<template> <view class="container"> <view class="vheigh"></view> <view class="top-image"> <image src="../../static/icon/user-top.png" mode=""></image> </view> <view class="" style="height: 100rpx;"></view> <view class="user-box"> <view class="user-info flex"> <image class="avatar" :src="userInfo.avatar" mode="" v-if="userInfo.avatar" @click="navTo('/pages/set/userinfo')"></image> <image class="avatar" src="../../static/error/missing-face.png" mode="" v-else @click="navTo('/pages/set/userinfo')"></image> <view class="user-name-id"> <view class="user-name clamp2">{{ userInfo.nickname || '游客'}}</view> <view class="user-id" v-if="userInfo && userInfo.uid"> UID: {{userInfo.uid}} </view> <view class="user-shop flex" v-if="userInfo.uid"> <view class="user-shop-item" v-if="userInfo.level> 0 " style="width: 180rpx;"> <image class="user-shop-icon" :src="showLevel(userInfo.level)" mode="" style="width: 180rpx;"></image> <!-- <view class="user-shopname" style="padding-left: 70rpx;"> {{userInfo.level_name}} </view> --> </view> </view> </view> </view> <view class="user-money flex"> <view class="user-money-item" @click="navTo('/pages/user/yue')"> <view class="user-money-num">{{ userInfo.now_money*1 || 0 }}</view> <view class="user-money-font"> 我的余额</view> </view> <view class="user-xian"></view> <view class="user-money-item" @click="navTo('/pages/user/award')"> <view class="user-money-num">{{ userInfo.brokerage_price*1 || 0 }}</view> <view class="user-money-font">我的佣金</view> </view> <view class="user-xian"></view> <view class="user-money-item" @click="navTo('/pages/user/jf')"> <view class="user-money-num">{{ userInfo.contribute*1 || 0 }}</view> <view class="user-money-font">我的贡献值</view> </view> <template v-if="userInfo.uid && userInfo.adminid" @click="navTo('/pages/user/jf')"> <!-- <template > --> <view class="user-xian"></view> <view class="user-money-item" @click="navTo('/pages/user/jhz')"> <view class="user-money-num">{{ userInfo.month_performance || 0 }}</view> <view class="user-money-font">进货额</view> </view> </template> </view> </view> <!-- --> <view class="main-box"> <view class="title flex" @click="navTo('/pages/order/order?state=0')"> <view class="title-left"> <view class="title-font">我的订单</view> </view> <image class="title-right" src="../../static/icon/back.png" mode=""></image> </view> <view class="main flex"> <view class="oitem" @click="navTo('/pages/order/order?state=0')"> <image class="oitem-image" src="../../static/icon/o1.png" mode=""></image> <view class="oitem-font">待付款</view> </view> <view class="oitem" @click="navTo('/pages/order/order?state=1')"> <image class="oitem-image" src="../../static/icon/o2.png" mode=""></image> <view class="oitem-font">待发货</view> </view> <view class="oitem" @click="navTo('/pages/order/order?state=2')"> <image class="oitem-image" src="../../static/icon/o3.png" mode=""></image> <view class="oitem-font">待收货</view> </view> <view class="oitem" @click="navTo('/pages/order/order?state=3')"> <image class="oitem-image" src="../../static/icon/o4.png" mode=""></image> <view class="oitem-font">已完成</view> </view> </view> </view> <view class="user-list flex" @click="smsh" v-if="userInfo && userInfo.uid && userInfo.adminid"> <image src="../../static/icon/scend.png" mode="" class="left-img"></image> <view class=""> 扫码核销 </view> <image src="../../static/icon/back.png" mode="" class="right-img"></image> </view> <view class="user-list flex" @click="gorz" v-if="userInfo && userInfo.uid && userInfo.is_real != 2"> <image src="../../static/icon/u1.png" mode="" class="left-img"></image> <view class=""> 实名认证 </view> <image src="../../static/icon/back.png" mode="" class="right-img"></image> </view> <!-- <view class="user-list flex" @click="navTo('/pages/user/sqdl')"> <image src="../../static/icon/u2.png" mode="" class="left-img"></image> <view class=""> 银行卡绑定 </view> <image src="../../static/icon/back.png" mode="" class="right-img"></image> </view> --> <view class="user-list flex" @click="navTo('/pages/user/userCard')"> <image src="../../static/icon/u2.png" mode="" class="left-img"></image> <view class=""> 我的卡券 </view> <image src="../../static/icon/back.png" mode="" class="right-img"></image> </view> <view class="user-list flex" @click="navTo('/pages/user/sz')"> <image src="../../static/icon/jf.png" mode="" class="left-img"></image> <view class=""> 我的积分({{userInfo.integral || '0'}}) </view> <image src="../../static/icon/back.png" mode="" class="right-img"></image> </view> <view class="user-list flex" @click="navTo('/pages/user/shareQrCode')"> <image src="../../static/icon/u3.png" mode="" class="left-img"></image> <view class=""> 推广海报 </view> <image src="../../static/icon/back.png" mode="" class="right-img"></image> </view> <view class="user-list flex" @click="navTo('/pages/user/team')"> <image src="../../static/icon/gn1.png" mode="" class="left-img"></image> <view class=""> 我的推广 </view> <image src="../../static/icon/back.png" mode="" class="right-img"></image> </view> <view class="user-list flex" @click="navTo('/pages/set/address')"> <image src="../../static/icon/u4.png" mode="" class="left-img"></image> <view class=""> 收货地址 </view> <image src="../../static/icon/back.png" mode="" class="right-img"></image> </view> <view class="user-list flex" @click="openKf()"> <image src="../../static/icon/u5.png" mode="" class="left-img"></image> <view class=""> 客服 </view> <image src="../../static/icon/back.png" mode="" class="right-img"></image> </view> <view class="user-list flex" @click="navTo('/pages/set/set')"> <image src="../../static/icon/u6.png" mode="" class="left-img"></image> <view class=""> 设置 </view> <image src="../../static/icon/back.png" mode="" class="right-img"></image> </view> <view class="" style="height: 20rpx;"> </view> <uni-popup ref="popupkf" type="center"> <view class="popup-box"> <view class="img"> <image src="../../static/img/img009.png" mode=""></image> </view> <view class="mian"> <view class="delivery"> <view class="title">已经为您定制专属客服</view> <image src="../../static/img/img010.png" mode=""></image> </view> <view class="nocancel">客服VX:{{ text }}</view> <view class="comfirm-box"> <view class="cancel" @click="cancel">取消</view> <view class="comfirm" @click="comfirm(text)">复制微信</view> </view> </view> </view> </uni-popup> <!-- 核销弹窗 --> <uni-popup ref="popuphx" class="agree-wrapper"> <view class="hx-wrapper"> <view class="hx-img"> <image src="../../static/img/hxbg.png" mode=""></image> </view> <view class="hx-body"> <view class="hx-title"> 扫码核销 </view> <input type="text" v-model="hxcode" placeholder="请输入核销码" placeholder-class="hx-placeholder" /> <view class="hx-btn" @click="qhx"> 立即核销 </view> </view> <view class="hx-close" @click="close"> <image src="../../static/icon/close.png" mode=""></image> </view> </view> </uni-popup> </view> </template> <script> import { orderVerific } from '@/api/index.js' import { toScanCode } from '@/components/scan.js' // #ifdef H5 import weixinObj from "@/plugin/jweixin-module/index.js"; // #endif import { mapState, mapMutations } from 'vuex'; import uniList from '@/components/uni-list/uni-list.vue'; import uniListItem from '@/components/uni-list-item/uni-list-item.vue'; import { orderData, getUserInfo, check, getLevelList, goHx } from '@/api/user.js'; import { saveUrl, interceptor } from '@/utils/loginUtils.js'; let startY = 0, moveY = 0, pageAtTop = true; export default { components: { uniList, uniListItem }, data() { return { jhe: 0,//进货额 listList: [], //等级列表 current: 2, id: '', //是否已签到 store_name: '', achievement: '', code: '', levelList: [], text: '', //客服微信 hxcode: '', //核销码 hxLoading: false }; }, onShow() { // 判断是否已经登录 // if (this.hasLogin) { // this.loadBaseData(); // } this.loadBaseData(); }, filters: { phone(e) { var subStr1 = e.substr(0, 3); var subStr2 = e.substr(e.length - 4, 4); var subStr = subStr1 + '...' + subStr2; e = subStr; return e; } }, onReady() { // 初始化获取页面宽度 uni.createSelectorQuery() .select('.container') .fields({ size: true }, data => { // 计算最多下拉的高度 this.userDowm = Math.floor((data.width / 750) * 185); // 计算最大触发修改高度事件 this.userMaxDowm = Math.floor((data.width / 750) * 250); } ) .exec(); }, computed: { ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']) }, methods: { ...mapMutations('user', ['setUserInfo']), getLevelList() { getLevelList().then(res => { console.log(res); this.listList = res.data.list }) }, showLevel(val) { let data = this.listList.find(item => item.grade == val) console.log(data); if (data) { return data.icon } else { return '' } }, close() { this.hxcode = '' this.$refs.popuphx.close() }, qhx() { let that = this if (that.hxLoading) { return } if (that.hxcode == '') { return that.$api.msg('请输入核销码') } that.hxLoading = true goHx({ verify_code: that.hxcode, }).then(res => { uni.showToast({ title: '核销成功', mask: true, duration: 1500 }); that.close() that.hxLoading = false }).catch(err => [ that.hxLoading = false ]) }, // 扫码 smsh() { let that = this // #ifdef H5 try { weixinObj.scanQRCode({ needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function(res) { that.hxcode = res.resultStr; // 当needResult 为 1 时,扫码返回的结果 that.$refs.popuphx.open() } }); } catch (err) { that.$refs.popuphx.open() } // #endif // #ifndef H5 uni.scanCode({ success: (res) => { this.hxcode = res.result this.$refs.popuphx.open() } }) // #endif }, gorz() { if (!this.hasLogin) { saveUrl(); interceptor(); } else { // uni.navigateTo({ // url // }); if (this.userInfo.is_real == 0) { this.navTo('/pages/user/smrz') } else if (this.userInfo.is_real == 1) { uni.showModal({ title: "提示", content: '您提交的资料正在审核中,请耐心等待审核' }) } } }, sqdl() { if (this.hasLogin) { if (this.userInfo.enroll_status == 1) { uni.showModal({ title: "提示", content: '您提交的申请正在审核中,请耐心等待审核' }) } else { this.navTo('/pages/user/sqdl') } } else { this.navTo('/pages/user/sqdl') } }, sao() { let obj = this; // #ifndef H5 uni.scanCode({ success(e) { obj.code = e.result; obj.$refs.popuphx.open(); console.log(obj.$refs.popuphx); } }); // #endif }, comfirm(text) { console.log(text); const result = this.uniCopy(text); if (result === false) { uni.showToast({ title: '不支持' }); } else { uni.showToast({ title: '复制成功', icon: 'none' }); } this.$refs.popupkf.close(); }, uniCopy(content) { /** * 小程序端 和 app端的复制逻辑 */ //#ifndef H5 uni.setClipboardData({ data: content, success: function() { console.log('success'); return true; } }); //#endif /** * H5端的复制逻辑 */ // #ifdef H5 if (!document.queryCommandSupported('copy')) { //为了兼容有些浏览器 queryCommandSupported 的判断 // 不支持 return false; } let textarea = document.createElement('textarea'); textarea.value = content; textarea.readOnly = 'readOnly'; document.body.appendChild(textarea); textarea.select(); // 选择对象 textarea.setSelectionRange(0, content.length); //核心 let result = document.execCommand('copy'); // 执行浏览器复制命令 textarea.remove(); return result; // #endif }, // 加载初始数据 loadBaseData() { const obj = this getUserInfo({}) .then(({ data }) => { obj.setUserInfo(data); obj.getLevelList() }) .catch(e => { console.log(e); }); }, /** * 统一跳转接口,拦截未登录路由 * navigator标签现在默认没有转场动画,所以用view */ navTo(url) { console.log(url); if (!this.hasLogin) { // 保存地址 saveUrl(); // 登录拦截 interceptor(); } else { uni.navigateTo({ url }); } }, close() { this.$refs.popuphx.close(); this.code = ''; }, // 打开客服 openKf() { this.$refs.popupkf.open(); }, // 关闭客服 cancel() { this.$refs.popupkf.close(); }, // 打开绑定 open() { this.$refs.gspass.open(); }, cast() { set_waiter({ uid: this.id }) .then(e => { this.$api.msg('绑定成功'); this.$refs.gspass.close(); this.id = ''; }) .catch(err => { this.$refs.gspass.close(); this.id = ''; }); }, cancelpass() { this.$refs.gspass.close(); this.id = ''; } } }; </script> <style lang="scss"> %flex-center { display: flex; flex-direction: column; justify-content: center; align-items: center; } %section { display: flex; justify-content: space-around; align-content: center; background: #fff; border-radius: 10rpx; } .container, page { min-height: 100%; height: auto; background-color: $page-color-base; } .vheigh { height: var(--status-bar-height); background-color: $base-color; } .top-image { position: absolute; top: 0; left: 0; right: 0; height: 228rpx; image { width: 100%; height: 100%; } } .popup-box { width: 522rpx; height: 605rpx; background-color: #ffffff; border-radius: 20rpx; position: relative; .img { position: relative; top: -56rpx; left: 0; width: 522rpx; height: 132rpx; display: flex; justify-content: center; image { border-radius: 20rpx 20rpx 0 0; width: 450rpx; height: 132rpx; } } .mian { margin-top: -44rpx; display: flex; flex-direction: column; align-items: center; // padding: 32rpx 32rpx; background-color: #ffffff; border-radius: 0 0 20rpx 20rpx; text-align: center; .delivery { font-size: 40rpx; color: #333333; display: flex; align-items: center; flex-direction: column; image { margin-top: 48rpx; width: 172rpx; height: 160rpx; } } .nocancel { font-size: 32rpx; color: #333333; margin-top: 14rpx; } .comfirm-box { margin-top: 52rpx; display: flex; // margin-bottom: 32rpx; // justify-content: space-around; .cancel { display: flex; align-items: center; justify-content: center; width: 197rpx; height: 74rpx; border: 1px solid #dcc786; border-radius: 38rpx; font-size: 32rpx; color: #605128; } .comfirm { margin-left: 32rpx; display: flex; align-items: center; justify-content: center; width: 197rpx; height: 74rpx; background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%); border-radius: 38px; font-size: 32rpx; color: #605128; } } } } .user-box { position: relative; z-index: 2; width: 690rpx; margin: 0 auto; /* #ifdef MP-WEIXIN */ margin: -100rpx auto 0; /* #endif */ background: #ffffff; box-shadow: 0px 4rpx 13rpx 0px rgba(229, 229, 229, 0.46); border-radius: 20rpx; display: flex; flex-direction: column; align-items: center; padding: 54rpx 0 30rpx; line-height: 1; position: relative; .u-set { position: absolute; top: 85rpx; right: 40rpx; width: 44rpx; height: 44rpx; } .user-info { flex-direction: column; justify-content: flex-start; width: 100%; padding-left: 40rpx; .avatar { border-radius: 50%; width: 132rpx; height: 132rpx; background-color: #eee; margin-right: 18rpx; } .user-uid { padding-top: 10rpx; font-size: 24rpx; font-weight: 500; color: #666666; } } .user-name { text-align: center; width: 300rpx; margin-top: 14rpx; // font-size: 30rpx; font-size: $ltl-size-big; font-family: PingFang SC; font-weight: bold; color: #333333; } .user-id { text-align: center; font-size: 28rpx; padding: 10rpx 0; } .user-shop { margin-top: 10rpx; display: flex; justify-content: flex-start; align-items: center; .user-shop-item { position: relative; margin: 0 auto; width: 180rpx; height: 55rpx; .user-shop-icon { position: absolute; top: 0; left: 0; right: 0; width: 180rpx; height: 55rpx; } .user-shopname { padding-left: 60rpx; position: relative; z-index: 2; font-size: 30rpx; font-weight: 500; color: #977843; line-height: 55rpx; text-align: left; } } } } .main-box { margin: 20rpx auto 0; width: 710rpx; background: #ffffff; box-shadow: 0px 4rpx 14rpx 0px rgba(229, 229, 229, 0.46); border-radius: 20rpx; .title { display: flex; justify-content: space-between; align-items: center; padding: 24rpx; border-bottom: 1px solid #eeeeee; .title-left { display: flex; align-items: center; .title-icon { width: 32rpx; height: 32rpx; } .title-font { margin-left: 20rpx; font-size: 30rpx; font-family: PingFang SC; font-weight: bold; color: #333333; } } .title-right { width: 14rpx; height: 24rpx; } } .main { padding: 50rpx 0 30rpx; .jg { width: 1px; height: 100rpx; background: #eeeeee; } .item { padding-bottom: 20rpx; width: 25%; display: flex; flex-direction: column; align-items: center; .item-num { font-size: 36rpx; font-family: PingFang SC; font-weight: bold; color: #333333; } .item-font { margin-top: 18rpx; font-size: 22rpx; font-family: PingFang SC; font-weight: 500; color: #666666; } } .oitem { width: 33%; display: flex; flex-direction: column; align-items: center; .oitem-image { height: 40rpx; width: 42rpx; } .oitem-font { margin-top: 20rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #333333; } } } } .tool-list { width: 690rpx; margin: 20rpx auto 0; background: #ffffff; box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06); border-radius: 20rpx; } .psw-wrapper { width: 548rpx; padding: 20rpx 0; background-color: #ffffff; border-radius: 15rpx 15rpx; .psw-title { width: 100%; font-size: 35rpx; padding: 0 0 40rpx; text-align: center; font-weight: 800; } .psw-content { width: 100%; font-size: 32rpx; text-align: center; } .psw-price { font-weight: bold; font-size: 68rpx; text-align: center; padding-top: 10rpx; } .psw-jg { height: 1px; width: 500rpx; background-color: #eee; margin: auto; } .psw-paytype { justify-content: space-between; padding: 10rpx 25rpx 30rpx; font-size: 26rpx; } .psw-ipt { display: block; background-color: #dce3ed; height: 90rpx; width: 464rpx; padding-left: 30rpx; margin: 0 auto; font-size: 80rpx; } .psw-btn text { display: inline-block; text-align: center; width: 50%; padding-top: 29rpx; font-size: 35rpx; } .psw-qd { color: #ff4c4c; } } .hx-wrapper { width: 536rpx; height: 630rpx; position: relative; // background-color: #fff; .hx-img { width: 536rpx; height: 281rpx; image { width: 536rpx; height: 281rpx; } } .hx-close { position: absolute; left: 243rpx; bottom: -80rpx; width: 52rpx; height: 52rpx; image { width: 52rpx; height: 52rpx; } } .hx-body { width: 536rpx; height: 349rpx; background-color: #fff; border-radius: 0 0 10rpx 10rpx; .hx-title { width: 536rpx; font-size: 36rpx; font-weight: 500; color: #333333; line-height: 1; padding-top: 42rpx; text-align: center; } input { width: 439rpx; height: 68rpx; background: #dbf3e9; border-radius: 10rpx; margin: 39rpx auto 0; padding-left: 26rpx; .hx-placeholder { font-size: 26rpx; font-weight: 500; color: #ff4c4c; } } .hx-btn { margin: 44rpx auto 0; width: 353rpx; height: 71rpx; background: $base-color; border-radius: 34rpx; font-size: 36rpx; font-weight: 500; color: #f8f9f9; line-height: 71rpx; text-align: center; } } } .user-list { width: 691rpx; height: 104rpx; background: #FFFFFF; box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06); border-radius: 28rpx; margin: 20rpx auto; padding: 0 25rpx; .left-img { width: 40rpx; height: 40rpx; } view { padding-left: 20rpx; flex-grow: 1; font-size: 29rpx; font-weight: bold; color: #5D5D5D; } .right-img { width: 13rpx; height: 23rpx; } } .sqdl { display: block; width: 689rpx; margin: 20rpx auto 20rpx; } .user-money { width: 100%; margin-top: 50rpx; justify-content: center; .user-money-item { width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; .user-money-num { font-size: 36rpx; font-weight: bold; } .user-money-font { margin-top: 20rpx; font-size: 24rpx; font-weight: 500; } } .user-xian { width: 1px; height: 77rpx; background: #eeeeee; } } </style>