770 lines
17 KiB
Vue
770 lines
17 KiB
Vue
<template>
|
||
<view>
|
||
<view class="main-header">
|
||
<image class="bg-image" :src="bgImage" mode="scaleToFill"></image>
|
||
<image src="@/static/star1.svg" class="star star1" mode="widthFix"></image>
|
||
<image src="@/static/star1.svg" class="star star2" mode="widthFix"></image>
|
||
<image src="@/static/star1.svg" class="star star3" mode="widthFix"></image>
|
||
<!-- 用户信息 -->
|
||
<view class="user-info" @click="onLogin">
|
||
<u-avatar :src="userInfo.avatar" :size="120" img-mode="aspectFill" show-level></u-avatar>
|
||
<view class="user-content">
|
||
<view class="nick-name">{{ userInfo.nickname }}</view>
|
||
<view class="login-tips" v-for="(item,index) in userInfo.roles" :key="index">
|
||
<u-tag :text="userInfo.mobile ? userInfo.mobile : item.roleName" plain size="mini" type="info"></u-tag>
|
||
<!-- <u-tag v-if="userInfo.phone" :text="userInfo.mobile" plain size="mini" type="info"></u-tag> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 绑定手机号 -->
|
||
<view class="my-mobile" v-if="userInfo.userId && !userInfo.phone">
|
||
<view class="info">点击绑定手机号，确保账户安全</view>
|
||
<button class="btn-bind" open-type="getAuthorize" size="mini" scope="phoneNumber" @click="bindPhone">去绑定</button>
|
||
</view>
|
||
<view class="my-mobile" v-if="userInfo.userId && !userInfo.avatar">
|
||
<view class="info">点击获取头像昵称</view>
|
||
<button
|
||
open-type="getAuthorize"
|
||
scope="userInfo"
|
||
onGetAuthorize="getOpenUserInfo"
|
||
onError="handleAuthError"
|
||
size="mini"
|
||
class="btn-bind"
|
||
v-if="userInfo.username && userInfo.username !== 'www'"
|
||
@click="onUpdateAvatar"
|
||
>
|
||
去获取
|
||
</button>
|
||
<!-- <button class="btn-bind" open-type="getAuthorize" size="mini" scope="phoneNumber" @click="bindPhone">获取头像昵称</button> -->
|
||
</view>
|
||
<!-- 我的钱包 -->
|
||
<view class="my-asset">
|
||
<view class="asset-left flex-box dis-flex flex-x-around">
|
||
<view class="asset-left-item">
|
||
<view class="item-value dis-flex flex-x-center">
|
||
<text>{{ userInfo.userId ? userInfo.balance : '--' }}</text>
|
||
</view>
|
||
<view class="item-name dis-flex flex-x-center">
|
||
<text>可提现</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="asset-left-item" style="display: flex;align-items: center;">
|
||
<u-button shape="circle" size="mini"
|
||
@click="navTo('package/dealer/withdraw/apply')">查看明细</u-button>
|
||
</view> -->
|
||
<!-- <view class="asset-left-item" style="display: flex;align-items: center;">
|
||
<u-button shape="circle" type="primary" size="mini" @click="onApply">去提现</u-button>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="my-service">
|
||
<view class="service-title">我的服务</view>
|
||
<view class="service-content clearfix">
|
||
<block v-for="(item, index) in service" :key="index">
|
||
<view class="service-item" @click="handleService(item)">
|
||
<view class="item-icon">
|
||
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
|
||
</view>
|
||
<view class="item-name">{{ item.name }}</view>
|
||
<view class="item-badge" v-if="item.count && item.count > 0">
|
||
<text v-if="item.count <= 99" class="text">{{ item.count }}</text>
|
||
<text v-else class="text">99+</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view v-if="item.type == 'button' && platform == 'MP-WEIXIN' && item.enabled" class="service-item">
|
||
<button class="btn-normal" :open-type="item.openType">
|
||
<view class="item-icon">
|
||
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
|
||
</view>
|
||
<view class="item-name">{{ item.name }}</view>
|
||
</button>
|
||
</view> -->
|
||
</block>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="my-service">
|
||
<view class="service-title">本月收入</view>
|
||
<view class="service-content clearfix">
|
||
<view class="service-info">
|
||
<view class="item">
|
||
<view class="desc">已到账收入</view>
|
||
<!-- <u-icon name="question"></u-icon> -->
|
||
<view><text class="money">0.00</text>元</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="desc">待结算收入</view>
|
||
<view><text class="money">0.00</text>元</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="my-service" @click="navTo('pages/dealer/team')">
|
||
<view class="service-title">我的邀请</view>
|
||
<view class="service-content clearfix">
|
||
<view class="service-info">
|
||
<view class="item">
|
||
<view class="desc">接受邀请</view>
|
||
<view><text class="money">0</text>人</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="desc">邀请成功</view>
|
||
<view><text class="money">0</text>人</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 绑定手机号 (第2种样式) -->
|
||
<!-- <view class="my-mobile2" @click="handleBindMobile()">
|
||
<view class="info">点击绑定手机号，确保账户安全</view>
|
||
<view class="btn-bind">去绑定</view>
|
||
</view> -->
|
||
|
||
|
||
<!-- 退出登录 -->
|
||
<view v-if="isLogin" class="my-logout">
|
||
<view class="logout-btn" @click="handleLogout()">
|
||
<text>退出登录</text>
|
||
</view>
|
||
</view>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import store from '@/store/index.js'
|
||
import { getUser, updateUser } from '@/websoft/api/user.js'
|
||
import { getAuthCode, getPhoneNumber, login, register } from '@/websoft/api/login.js'
|
||
import { tenantId, roleId, username, password, appId } from '@/config.js';
|
||
import { ACCESS_TOKEN, USER_ID } from '@/store/mutation-types'
|
||
import storage from '@/utils/storage'
|
||
import { getMobile } from '@/utils/util.js'
|
||
import http from '@/websoft/api'
|
||
|
||
// 订单操作
|
||
const orderNavbar = [
|
||
// { id: 'all', name: '全部订单', icon: 'qpdingdan' },
|
||
{
|
||
id: 'payment',
|
||
name: '待付款',
|
||
icon: 'daifukuan',
|
||
count: 0
|
||
},
|
||
{
|
||
id: 'delivery',
|
||
name: '待配送',
|
||
icon: 'daifahuo',
|
||
count: 0
|
||
},
|
||
{
|
||
id: 'received',
|
||
name: '待收货',
|
||
icon: 'daishouhuo',
|
||
count: 0
|
||
},
|
||
{
|
||
id: 'comment',
|
||
name: '待评价',
|
||
icon: 'lingquan',
|
||
count: 0
|
||
},
|
||
]
|
||
/**
|
||
* 我的服务
|
||
* id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
|
||
*/
|
||
const service = [
|
||
{id: 'get_order',name: '订单管理',icon: 'qpdingdan',type: 'link',url: 'pages/order/index'},
|
||
{id: 'equipment',name: '设备管理',icon: 'shouhuodizhi',type: 'link',url: 'pages/user/equipment/index'},
|
||
{id: 'saleman',name: '收益明细',icon: 'shouhuodizhi',type: 'link',url: 'pages/saleman/profir-log/profir-log'},
|
||
// {id: 'withdraw_kog',name: '提现记录',icon: 'shouhuodizhi',type: 'link',url: 'package/dealer/withdraw/apply'},
|
||
{id: 'help',name: '使用帮助',icon: 'bangzhu',type: 'link',url: 'pages/help/index'},
|
||
{id: 'administration',name: '关于我们',icon: 'sy-yh',type: 'link',url: 'pages/help/about'},
|
||
]
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgImage: 'https://file.wsdns.cn/20230313/778ccc230d644b6ebc3c768b7d45229d.png',
|
||
// #ifdef MP-ALIPAY
|
||
canIUseAuthButton: my.canIUse('button.open-type.getAuthorize'),
|
||
// #endif
|
||
// 首次加载
|
||
isFirstload: true,
|
||
// 是否已登录
|
||
isLogin: false,
|
||
// 系统设置
|
||
setting: {},
|
||
// 当前用户信息
|
||
userInfo: {
|
||
nickname: '未登录'
|
||
},
|
||
form: {},
|
||
// 账户资产
|
||
assets: {
|
||
balance: '--',
|
||
points: '--',
|
||
coupon: '--',
|
||
browse: '--',
|
||
collection: '--',
|
||
follow: '--'
|
||
},
|
||
// 我的服务
|
||
service,
|
||
// 订单操作
|
||
orderNavbar,
|
||
// 当前用户待处理的订单数量
|
||
todoCounts: {
|
||
payment: 0,
|
||
deliver: 0,
|
||
received: 0,
|
||
notice: 10
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 设置navbar标题、颜色
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#000000',
|
||
backgroundColor: '#ffffff'
|
||
})
|
||
},
|
||
onShow() {
|
||
this.getUserInfo()
|
||
},
|
||
methods: {
|
||
getUserInfo() {
|
||
const { form } = this
|
||
const app = this
|
||
getUser().then(res => {
|
||
if( res.code == 0 && res.data.username != 'www') {
|
||
console.log("获取用户信息: ",res.data);
|
||
app.form = res.data
|
||
app.userInfo = res.data
|
||
store.dispatch('setUserInfo',res.data)
|
||
app.isLogin = true
|
||
}else{
|
||
app.isLogin = false
|
||
app.handleLogout()
|
||
}
|
||
})
|
||
|
||
},
|
||
// 跳转到服务页面
|
||
handleService({
|
||
url
|
||
}) {
|
||
if (url.slice(0, 4) == 'http') {
|
||
wx.openCustomerServiceChat({
|
||
extInfo: {
|
||
url: 'https://work.weixin.qq.com/kfid/kfc1693a8d29b84bc5e'
|
||
},
|
||
corpId: 'ww1c3f872ba0a39228',
|
||
success(res) {}
|
||
})
|
||
return;
|
||
}
|
||
if(!this.isLogin){
|
||
return false;
|
||
}
|
||
console.log("url: ",url);
|
||
this.$navTo(url)
|
||
},
|
||
onLogin(){
|
||
const app = this
|
||
// 未登录状态
|
||
if(!app.isLogin){
|
||
return this.$navTo('pages/login/login')
|
||
}
|
||
// #ifdef H5
|
||
// 跳转登录页面
|
||
return this.$navTo('pages/login/login')
|
||
// #endif
|
||
},
|
||
onUpdateAvatar() {
|
||
const { form, isLogin } = this
|
||
const app = this
|
||
// #ifdef MP-ALIPAY
|
||
console.log("// 自动获取头像昵称: ");
|
||
return false;
|
||
// 自动获取头像昵称
|
||
my.getOpenUserInfo({
|
||
fail: (res) => {
|
||
console.log("res1: ",res);
|
||
},
|
||
success: (res) => {
|
||
let user = JSON.parse(res.response).response // 以下方的报文格式解析两层 response
|
||
// 获取头像昵称
|
||
if(user && user.avatar){
|
||
form.avatar = user.avatar
|
||
form.nickname = user.nickName
|
||
updateUser(form).then(res => {
|
||
console.log("res3: ",res);
|
||
app.userInfo.avatar = user.avatar
|
||
app.userInfo.nickname = user.nickName
|
||
app.showToast('更新成功')
|
||
})
|
||
}
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
// 显示toast信息
|
||
showToast(title, duration = 2000) {
|
||
this.$refs.uToast.show({ title, duration })
|
||
},
|
||
// 绑定手机号码
|
||
bindPhone() {
|
||
const app = this
|
||
const {
|
||
form
|
||
} = this
|
||
my.getPhoneNumber({
|
||
success: (res) => {
|
||
let encryptedData = res.response;
|
||
getPhoneNumber({encryptedData}).then(response => {
|
||
console.log("授权手机号码: ",response);
|
||
const json = JSON.parse(response.data)
|
||
if(json.mobile){
|
||
// 执行登录
|
||
updateUser({phone: json.mobile}).then(res => {
|
||
app.$toast('绑定成功')
|
||
app.userInfo.phone = json.mobile
|
||
})
|
||
}else{
|
||
app.bindPhone()
|
||
}
|
||
})
|
||
},
|
||
fail: (res) => {
|
||
console.log(res);
|
||
},
|
||
});
|
||
},
|
||
|
||
handleLogout(){
|
||
http.setConfig((config) => {
|
||
config.header = {};
|
||
config.header = {
|
||
AppId: appId,
|
||
tenantId: tenantId
|
||
};
|
||
return config
|
||
})
|
||
uni.clearStorage()
|
||
uni.clearStorageSync()
|
||
uni.redirectTo({
|
||
url: '/pages/login/login'
|
||
})
|
||
},
|
||
|
||
onApply(){
|
||
if(!this.isLogin){
|
||
return false;
|
||
}
|
||
// this.$navTo('pages/dealer/withdraw/apply')
|
||
this.$navTo('pages/withdraw/withdraw')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
padding-bottom: 60rpx;
|
||
}
|
||
|
||
// 页面头部
|
||
.main-header {
|
||
// background-color: #FBF7EF;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 280rpx;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 30rpx;
|
||
|
||
.bg-image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
}
|
||
|
||
.star {
|
||
position: absolute;
|
||
opacity: 0.1;
|
||
color: #fff;
|
||
}
|
||
|
||
.star1 {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
right: 80rpx;
|
||
top: 34rpx;
|
||
}
|
||
|
||
.star2 {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
left: 40rpx;
|
||
top: 10rpx;
|
||
}
|
||
|
||
.star3 {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
left: 140rpx;
|
||
bottom: 34rpx;
|
||
}
|
||
|
||
|
||
.user-info {
|
||
display: flex;
|
||
height: 120rpx;
|
||
z-index: 1;
|
||
|
||
.user-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
margin-left: 30rpx;
|
||
color: #ffffff;
|
||
|
||
.nick-name {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
max-width: 270rpx;
|
||
}
|
||
|
||
.mobile {
|
||
margin-top: 15rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.user-grade {
|
||
align-self: baseline;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #3c3c3c;
|
||
margin-top: 12rpx;
|
||
border-radius: 10rpx;
|
||
padding: 4rpx 12rpx;
|
||
|
||
.user-grade_icon .image {
|
||
display: block;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.user-grade_name {
|
||
margin-left: 5rpx;
|
||
font-size: 26rpx;
|
||
color: #EEE0C3;
|
||
}
|
||
|
||
}
|
||
|
||
.login-tips {
|
||
margin-top: 12rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
// 角标组件
|
||
.item-badge {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 55rpx;
|
||
// background: $main-bg;
|
||
background: #fa2209;
|
||
color: #fff;
|
||
border-radius: 100%;
|
||
min-width: 38rpx;
|
||
height: 38rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 1rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
// 我的钱包
|
||
.my-asset {
|
||
display: flex;
|
||
margin: 22rpx auto 22rpx auto;
|
||
padding: 22rpx 0;
|
||
width: 92%;
|
||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 24rpx;
|
||
background: #fff;
|
||
|
||
.asset-right {
|
||
width: 170rpx;
|
||
border-left: 1rpx solid #eee;
|
||
}
|
||
|
||
.asset-right-item {
|
||
text-align: center;
|
||
color: #545454;
|
||
|
||
.item-icon {
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.item-name {
|
||
margin-top: 14rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.asset-left-item {
|
||
text-align: center;
|
||
color: #666;
|
||
padding: 0 42rpx;
|
||
|
||
.item-value {
|
||
font-size: 34rpx;
|
||
color: $main-bg;
|
||
}
|
||
|
||
.item-name {
|
||
margin-top: 14rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
// 订单操作
|
||
.order-navbar {
|
||
display: flex;
|
||
margin: 20rpx auto 20rpx auto;
|
||
padding: 0rpx 0 6rpx 0;
|
||
width: 94%;
|
||
// box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||
font-size: 30rpx;
|
||
border-radius: 5rpx;
|
||
background: #fff;
|
||
|
||
&-item {
|
||
position: relative;
|
||
width: 25%;
|
||
|
||
.item-icon {
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
padding: 10rpx 0;
|
||
color: #545454;
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 28rpx;
|
||
color: #545454;
|
||
text-align: center;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
// 我的服务
|
||
.my-service {
|
||
margin: 22rpx auto 22rpx auto;
|
||
padding: 22rpx 0;
|
||
width: 92%;
|
||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 24rpx;
|
||
background: #fff;
|
||
|
||
.service-title {
|
||
padding-left: 24rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 20rpx;
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.service-content {
|
||
|
||
.service-info {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
line-height: 52rpx;
|
||
color: #999999;
|
||
|
||
.desc {
|
||
color: #999999;
|
||
}
|
||
|
||
.money {
|
||
color: #3c3c3c;
|
||
font-weight: bold;
|
||
font-size: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
margin-bottom: -20rpx;
|
||
|
||
.shop-service-item {
|
||
position: relative;
|
||
width: 33.33%;
|
||
float: left;
|
||
margin-bottom: 30rpx;
|
||
|
||
.item-icon {
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
padding: 14rpx 0;
|
||
color: $main-bg;
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 28rpx;
|
||
color: #545454;
|
||
text-align: center;
|
||
}
|
||
|
||
}
|
||
|
||
.service-item {
|
||
position: relative;
|
||
width: 25%;
|
||
float: left;
|
||
margin-bottom: 30rpx;
|
||
|
||
.item-icon {
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
padding: 14rpx 0;
|
||
color: $main-bg;
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 28rpx;
|
||
color: #545454;
|
||
text-align: center;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
// 退出登录
|
||
.my-logout {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 50rpx;
|
||
|
||
.logout-btn {
|
||
width: 60%;
|
||
margin: 0 auto;
|
||
font-size: 28rpx;
|
||
color: #616161;
|
||
border-radius: 20rpx;
|
||
border: 1px solid #dcdcdc;
|
||
padding: 16rpx 0;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
// 绑定手机号 样式1
|
||
.my-mobile {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16rpx 40rpx;
|
||
background: #FCEBD1;
|
||
|
||
.info {
|
||
color: #cd8c0c;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.btn-bind {
|
||
list-style-type: none;
|
||
padding: 0px 16px !important;
|
||
background-color: #EAB766;
|
||
color: #fff;
|
||
border-radius: 30rpx;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
// 绑定手机号 样式2
|
||
.my-mobile2 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 20rpx auto 20rpx auto;
|
||
padding: 12rpx 40rpx;
|
||
width: 94%;
|
||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||
font-size: 30rpx;
|
||
border-radius: 5rpx;
|
||
background: #fff;
|
||
|
||
.info {
|
||
// color: #cd8c0c;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.btn-bind {
|
||
padding: 8rpx 24rpx;
|
||
background-color: #EAB766;
|
||
color: #fff;
|
||
border-radius: 30rpx;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
button::after{
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.flex-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.more {
|
||
padding-right: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.main-header-btn {
|
||
width: 700rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
z-index: 9999;
|
||
clear: both;
|
||
display: flex;
|
||
color: #ffffff;
|
||
justify-content: space-around;
|
||
padding: 12rpx 0;
|
||
}
|
||
</style>
|