<template> <view> <!-- #ifdef H5 --> <view class="status"></view> <!-- #endif --> <view class="user"> <!-- 头像 --> <view class="left"> <image :src="imagewxUrl+imgadres" v-if="!user.headerImg"></image> <image :src="user.headerImg" v-else></image> </view> <!-- 昵称 --> <view class="right"> <!-- #ifdef MP --> <view class="username" v-if="user && user.infoCompleteStatus == 1" @click="jumplogin">点击获取信息</view> <view class="username" v-else>{{user.name}}</view> <!-- #endif --> <!-- #ifdef H5 --> <view class="username">{{user.name}}</view> <!-- #endif --> <view class="font14 fcor333">{{userphone}}</view> </view> </view> <!-- 优惠券,卡券 --> <view class="headcoun width100"> <view class="height80 alijus width92 border-8r backcorfff"> <view class=" fotct" style="width: 50%;" @click="jumppage(5)"> <view class="width100 font12 fcor333"><text class="font20 marglerig">{{textnum}} </text> 张</view> <view class="width100 font18 fcor333 mart5">卡券</view> </view> <view style="width: 1px;height: 50px;background-color: #f6f6f6;"> </view> <view class=" fotct" style="width: 50%;" @click="jumppage(6)"> <view class="width100 font12 fcor333"><text class="font20 marglerig">{{textSend}} </text> 张</view> <view class="width100 font18 fcor333 mart5">优惠券</view> </view> <view style="width: 1px;height: 50px;background-color: #f6f6f6;"> </view> <view class=" fotct" style="width: 32%;" @click="jumppage(7)"> <view class="width100 font12 fcor333"><text class="font20 marglerig">{{payactivitynum}} </text> 张</view> <view class="width100 font18 fcor333 mart5">活动券</view> </view> </view> </view> <!-- 订单-余额 --> <view class="order"> <!-- 订单类型 --> <view class="title width94"> <view class="width70 fontwig6">订单</view> <view class="width30 alijusend font14 fcor999" @click="toOrderList(-1)">全部订单<image class="icon15" mode="widthFix" src="../../../static/img/jt.png"> </image> </view> </view> <view class="list"> <view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index)"> <uni-badge style="width: 20px;position: absolute; left: 18%;" v-if="row.text == '待支付' && therrNum " :text="therrNum" type="error" size="normal"></uni-badge> <uni-badge style="width: 20px;position: absolute; left: 42%;" v-if="row.text == '已支付' && orderPayNum " :text="orderPayNum" type="error" size="normal"> </uni-badge> <uni-badge style="width: 20px;position: absolute; left: 63%;" v-if="row.text == '已完成' && whetherCheckNum " :text="whetherCheckNum" type="error" size="normal"> </uni-badge> <view class="img"> <image :src="row.icon" class="icon40" mode="widthFix"></image> </view> <view class="text mart10">{{row.text}}</view> </view> </view> <view class="width90 mart10 height60" v-if="nopaylist != ''"> <swiper circular="true" interval="3000" autoplay="true" @change="swiperChange"> <swiper-item v-for="(swiper,index) in nopaylist" :key="index" @click="jumpDetails(swiper.orderNo,swiper.productType)"> <view class="alijusstart border-8r backcor9 height60 "> <image mode="widthFix" class="icon40 margle10" src="../../../static/img/order7.png" v-if="swiper.productType== 1"></image> <image mode="widthFix" class="icon40 margle10" src="../../../static/img/order9.png" v-if="swiper.productType== 2"></image> <image mode="widthFix" class="icon40 margle10" src="../../../static/img/order3.png" v-if="swiper.productType== 3"></image> <image mode="widthFix" class="icon40 margle10" src="../../../static/img/order2.png" v-if="swiper.productType== 4"></image> <image mode="widthFix" class="icon40 margle10" src="../../../static/img/order5.png" v-if="swiper.productType== 5"></image> <image mode="widthFix" class="icon40 margle10" src="../../../static/img/order4.png" v-if="swiper.productType== 6"></image> <image mode="widthFix" class="icon40 margle10" src="../../../static/img/order8.png" v-if="swiper.productType== 7"></image> <image mode="widthFix" class="icon40 margle10" src="../../../static/img/unioncard.png" v-if="swiper.productType== 8"></image> <image mode="widthFix" class="icon40 margle10" src="../../../static/img/order6.png" v-if="swiper.productType== 9"> </image> <view class="width50 margle10"> <view class="font15 fcor333 fontspec">等待付款</view> <view class="font12 fcor666 fontspec mart5">剩余时间: {{countdownm}}分钟</view> </view> <view class="topay"> 去支付 </view> </view> </swiper-item> </swiper> </view> </view> <!-- 我的资产 --> <view class="order"> <view class="title width94"> <view class="width70 fontwig6 alijusstart">我的资产 <image mode="widthFix" class="icon30" v-if="assetsstu == 2" @click="updatestu(2)" src="../../../static/img/user/user6.png"></image> <image mode="widthFix" class="icon20 margle" v-if="assetsstu == 1" @click="updatestu(1)" src="../../../static/img/user/user14.png"></image> </view> <view class="width30 alijusend font14 fcor999" @click="jumppage(4)">进入卡包<image class="icon15" mode="widthFix" src="../../../static/img/jt.png"> </image> </view> </view> <view class="mart15 width90 alijus fotct paddbotm10"> <view class="width31"> <view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view> <view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">{{userAccount.integral}}</view> <view class="fontspec font14 fcor333 mart5">积分余额</view> </view> <view class="width31"> <view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view> <view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥{{userAccount.oilCardPrice}} </view> <view class="fontspec font14 fcor333 mart5">油卡余额</view> </view> <view class="width31"> <view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view> <view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥{{userAccount.hltCardPrice}} </view> <view class="fontspec font14 fcor333 mart5">工会卡余额</view> </view> </view> </view> <!-- 商务中心 --> <view class="order"> <view class="title width94"> <view class="width70 fontwig6">商务中心</view> </view> <view class="width90 alijus fotct paddbotm10 mart10"> <view class="width31" @click="jumppage(1)"> <image mode="widthFix" class="icon45" src="../../../static/img/user/user7.png"></image> <view class="fontspec font14 fcor333 mart5">门店登陆</view> </view> <view class="width31" @click="jumppage(2)"> <image mode="widthFix" class="icon45" src="../../../static/img/user/user8.png"></image> <view class="fontspec font14 fcor333 mart5">代理商登陆</view> </view> <view class="width31" @click="jumppage(3)"> <image mode="widthFix" class="icon45" src="../../../static/img/user/user9.png"></image> <view class="fontspec font14 fcor333 mart5">我的推广</view> </view> </view> </view> <!-- 其他 --> <view class="order"> <view class="height20 width94"> </view> <view class="list"> <view class="box" v-for="(row,index) in czList" :key="index" @tap="toPage(row.url,row.text)"> <view class="img" v-if="row.text != '客服' "> <image :src="row.img" class="icon40" mode="widthFix"></image> </view> <button open-type="contact" style="background-color: transparent;" class="img" show-message-card session-from send-message-path send-message-title v-if="row.text == '客服' "> <image class="icon40" mode="widthFix" :src="row.img"></image> </button> <view class="text mart10">{{row.text}}</view> </view> </view> </view> <view class="place-bottom"></view> </view> </template> <script> import { loginByPhone, findUser, loginOut, getUserAccount, getUserOrderList, orderCheck, queryHzfDiscountTotalNum } from "../../../Utils/Api.js"; // import authorize from '../../../components/Authorize'; import uniBadge from "../../../components/uni-badge/components/uni-badge/uni-badge.vue"; let app = getApp() export default { components: { // authorize, uniBadge }, data() { return { imagewxUrl: app.globalData.imageWxImg, imgadres: 'head.png', textnum: '', textSend: '', therrNum: '', payactivitynum:'', rechargeOrderNum: '', //话费待支付 whetherCheckNum: '', //未查看数量 orderPayNum: '', //支付订单数量 //个人信息, user: "", // 订单类型 orderList: [{ text: '待支付', icon: "../../../static/img/user/user1.png" }, { text: '已支付', icon: "../../../static/img/user/user2.png" }, { text: '已完成', icon: "../../../static/img/user/user3.png" }, { text: '已退款', icon: "../../../static/img/user/user4.png" } ], //操作列表 czList: '', nopaylist: [], assetsstu: 2, userphone: '', // 手机号 userAccount: '', //用户余额, countdownm: '', // 倒计时分 countdowns: '', // 倒计时秒 } }, //下拉刷新,需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true onPullDownRefresh() { setTimeout(function() { uni.stopPullDownRefresh(); }, 1000); }, onLoad() { if (!app.globalData.userInfo) { this.findUser(); this.queryHzfDiscountTotalNum(); } }, onReady() { //此处,演示,每次页面初次渲染都把登录状态重置 uni.setStorage({ key: 'UserInfo', data: false, success: function() {}, fail: function(e) {} }); }, onShow() { if (app.globalData.userInfo) { this.findUser(); this.queryHzfDiscountTotalNum(); } // #ifdef MP if (!app.globalData.userInfo.isSetPayPwd) { this.czList = [{ url: '/pages/goods/recording/recording', text: '积分记录', img: '../../../static/img/user/user10.png' }, { url: '../../login/updatePas/updatePas', text: '支付密码', img: '../../../static/img/user/user11.png' }, { url: '', text: '客服', img: '../../../static/img/user/user13.png' }, { url:"/physical-merchants/address/address", text: '我的地址', img: '../../../static/img/adresw.png' } ] return; } this.czList = [{ url: '/pages/goods/recording/recording', text: '积分记录', img: '../../../static/img/user/user10.png' }, { url: '../../login/updatePas/resetPas', text: '支付密码', img: '../../../static/img/user/user11.png' }, { url: '', text: '客服', img: '../../../static/img/user/user13.png' }, { url:"/physical-merchants/address/address", text: '我的地址', img: '../../../static/img/adresw.png' } ] // #endif // #ifdef H5 if (!app.globalData.userInfo.isSetPayPwd) { this.czList = [{ url: '/pages/goods/recording/recording', text: '积分记录', img: '../../../static/img/ghkpay.png' }, { url: '../../login/updatePas/updatePas', text: '支付密码', img: '../../../static/img/user/user11.png' }, { url: '', text: '退出登录', img: '../../../static/img/user/user12.png' }, { url: '', text: '客服', img: '../../../static/img/user/user13.png' }, { url:"/physical-merchants/address/address", text: '我的地址', img: '../../../static/img/adresw.png' } ] return; } this.czList = [{ url: '/pages/goods/recording/recording', text: '积分记录', img: '../../../static/img/ghkpay.png' }, { url: '../../login/updatePas/resetPas', text: '支付密码', img: '../../../static/img/user/user11.png' }, { url: '', text: '退出登录', img: '../../../static/img/exit.png' }, { url: '', text: '客服', img: '../../../static/img/user/user13.png' }, { url:"/physical-merchants/address/address", text: '我的地址', img: '../../../static/img/adresw.png' } ] // #endif }, methods: { //查询我的信息接口 findUser() { findUser().then(res => { if (res.return_code == '000000') { app.globalData.userInfo = res.return_data; this.user = res.return_data; this.textnum = res.return_data.unusedCouponNum; this.textSend = res.return_data.unusedDiscount; this.therrNum = res.return_data.unpaid; this.whetherCheckNum = res.return_data.whetherCheckNum; this.orderPayNum = res.return_data.orderPayNum; this.rechargeOrderNum = res.return_data.rechargeOrderNum; this.geTel(this.user.phone); this.getUserOrderList(); uni.setStorage({ key: "user", data: res.return_data }) } }); }, //查询活动次数 queryHzfDiscountTotalNum(){ queryHzfDiscountTotalNum().then(res => { if (res.return_code == '000000') { this.payactivitynum = res.return_data; } }); }, //查询订单列表 getUserOrderList() { // uni.showLoading({ // title: '加载中...' // }) let params = { status: 1, pageNum: 1, pageSize: 5 } getUserOrderList(params).then(res => { // uni.hideLoading(); if (res.return_code == '000000' && res.return_data.list != '') { this.nopaylist = res.return_data.list; this.timesettime(res.return_data.list[0].createTime); } else { this.nopaylist = []; } }) }, //跳转用户信息 jumplogin() { uni.navigateTo({ url: '../../userLogin/userLogin' }) }, toOrderList(index) { uni.navigateTo({ url: '../../user/order_list/order_list?tbIndex=' + index }) }, // 隐藏手机号 geTel(tel) { var reg = /^(\d{3})\d{4}(\d{4})$/; this.userphone = tel.replace(reg, "$1****$2"); }, // 资产查看状态 updatestu(item) { if (item == 1) { this.assetsstu = 2; } if (item == 2) { this.getUserAccount(); } }, //查询余额 getUserAccount() { getUserAccount().then(res => { if (res.return_code == '000000') { this.assetsstu = 1; this.userAccount = res.return_data; } }); }, //轮播滚动 swiperChange(e) { this.timesettime(this.nopaylist[e.detail.current].createTime); }, //跳转详情 jumpDetails(e, item) { //实物类型 if(item == 12){ uni.navigateTo({ url:'/physical-merchants/classify/order/orderDetail?id='+e }) return; } this.orderCheck(e); if (item == 1 || item == 2 || item == 3) { uni.navigateTo({ url: '/qianzhu-KFC/order-details/order-details?id=' + e }) return; } uni.navigateTo({ url: '/pages/user/order_details/order_details?id=' + e }) }, //查看状态 orderCheck(item) { let datas = { orderNo: item } orderCheck(datas).then(res => { }); }, //计算时间 timesettime(item) { var nowtime = new Date(), //获取当前时间 endtime = item + 600000; //定义结束时间 var lefttime = endtime - nowtime, //距离结束时间的毫秒数 leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数 lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24), //计算小时数 leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? +Math.floor(lefttime / (1000 * 60) % 60) : Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数 lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor( lefttime / 1000 % 60); //计算秒数 this.countdownm = leftm //返回倒计时的字符串 this.countdowns = lefts //返回倒计时的字符串 }, // 推广 jumppage(item) { if (item == 1) { uni.navigateTo({ url: '../../login/login?id=1' }) } if (item == 2) { uni.navigateTo({ url: '../../login/login?id=2' }) } if (item == 3) { uni.navigateTo({ url: '/pages/user/myPromotion/myPromotion' }) } if (item == 4) { uni.navigateTo({ url: '../../../subPages/cardsList/cardsList' }) } if (item == 5) { uni.navigateTo({ url: '/pages/user/mineCoupons/mineCoupons' }) } if (item == 6) { uni.navigateTo({ url: '../../user/coupon/coupon' }) } if (item == 7) { uni.navigateTo({ url: '/pages/user/payActivity/payActivity' }) } }, toPage(url, item) { let that = this; if (item != '客服') { uni.navigateTo({ url: url }) } // #ifdef H5 let cont = "本服务由惠兑礼品提供\n400-678-0738"; let content = cont.replace(/<br>/g, "\n"); if (item == '客服') { uni.showModal({ title: '客服', content: content, success: function(res) { if (res.confirm) { uni.makePhoneCall({ phoneNumber: '4006780738', //电话号码 success: function(e) { console.log(e); }, fail: function(e) { console.log(e); } }) } } }) } // #endif if (item == '退出登录') { uni.showModal({ title: '退出登录', content: '是否退出当前账号', success: function(res) { if (res.confirm) { loginOut().then(res => { if (res.return_code == '000000') { app.globalData.userInfo = ''; app.globalData.token = ''; that.textnum = ''; that.textSend = ''; that.therrNum = ''; that.payactivitynum = ''; that.whetherCheckNum = ''; that.orderPayNum = ''; that.rechargeOrderNum = ''; that.userphone = ''; that.user = ''; uni.setStorage({ key: "user", data: '' }) uni.setStorage({ key: "token", data: '' }) // location.reload(); uni.navigateTo({ url: '/pages/login/register' }) } }); } } }) } } } } </script> <style lang="scss"> page { background-color: #f5f5f5; overflow: hidden; overflow-y: auto; } .status { width: 100%; height: 44px; background-color: #6fbdee; } button::after { border: none } .headcoun { background: linear-gradient(to bottom, #e8eff4, #f5f5f5); height: 100px; } .topay { width: 70px; height: 25px; font-size: 14px; text-align: center; line-height: 25px; border-radius: 20px; border: 1px solid #009DFF; color: #009DFF; } .place-bottom { height: 200upx; } swiper { height: 60px !important; } swiper-item { height: 60px !important; } .user { width: 96%; padding: 0 0 0 4%; display: flex; align-items: center; // position: relative; padding-bottom: 40rpx; background: linear-gradient(to bottom, #6fbdee, #e8eff4); .left { width: 20vw; height: 20vw; flex-shrink: 0; margin-right: 20upx; border: solid 1upx #fff; border-radius: 100%; image { width: 20vw; height: 20vw; border-radius: 100%; } } .right { width: 100%; .username { font-size: 36upx; color: #333333; } .signature { color: #eee; font-size: 28upx; } } .erweima { flex-shrink: 0; width: 100px; height: 30px; border-radius: 15px 0px 0px 15px; padding: 0; margin-left: 5vw; background-color: #1391f6; color: #FFFFFF; display: flex; justify-content: center; align-items: center; image { width: 30rpx; height: 30rpx; } .icon { color: #7b6335; font-size: 42upx; } } } .order { .title { padding-top: 10px; padding-bottom: 10px; font-size: 36upx; height: 80upx; display: flex; align-items: center; } width: 92%; margin: 30rpx 4% 30rpx 4%; padding: 0rpx 0% 40rpx 0%; background-color: #fff; box-shadow: 0rpx 0rpx 25rpx rgba(0, 0, 0, 0.1); border-radius: 15rpx; .list { display: flex; padding-bottom: 10upx; flex-wrap: wrap; .box { width: 25%; margin-bottom: 10px; .img { width: 100%; display: flex; justify-content: center; } .text { width: 100%; display: flex; justify-content: center; font-size: 28upx; color: #3d3d3d; } } } .balance-info { display: flex; padding: 10upx 0; .left { width: 75%; display: flex; .box { width: 50%; font-size: 28upx; .num { width: 100%; height: 50upx; display: flex; justify-content: center; align-items: flex-end; color: #f9a453; } .text { width: 100%; display: flex; justify-content: center; color: #3d3d3d; font-size: 28upx; } } } .right { border-left: solid 1upx #17e6a1; width: 25%; .box { .img { width: 100%; height: 50upx; display: flex; justify-content: center; align-items: flex-end; .icon { font-size: 45upx; color: #e78901; } } .text { width: 100%; display: flex; justify-content: center; font-size: 28upx; color: #3d3d3d; } } } } } .toolbar { width: 92%; margin: 0 4% 0 4%; padding: 0 0 20upx 0; background-color: #fff; box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1); border-radius: 15upx; .title { padding-top: 10upx; margin: 0 0 10upx 3%; font-size: 30upx; height: 80upx; display: flex; align-items: center; } .list { display: flex; flex-wrap: wrap; .box { width: 25%; margin-bottom: 40upx; .img { width: 23vw; height: 10.5vw; display: flex; justify-content: center; image { width: 9vw; height: 9vw; } } .text { width: 100%; display: flex; justify-content: center; font-size: 26upx; color: #3d3d3d; } } } } </style>