574 lines
16 KiB
Vue
574 lines
16 KiB
Vue
<template>
|
||
<view class="mine-page">
|
||
<view class="header">
|
||
<view class="detail">
|
||
<view class="avatar">
|
||
<!-- @click="previewImage" -->
|
||
<image :src="infoDetail.avatarResource ? infoDetail.avatarResource.url : '/static/zy/logo.png' " mode="aspectFit" class="avatar-icon"></image>
|
||
</view>
|
||
<view class="info">
|
||
<view class="top">
|
||
<view class="name" v-if="isLogin">{{infoDetail.nickname||''}}</view>
|
||
<view class="go-login" v-if="!isLogin" @click="goLogin">未登录</view>
|
||
<image src="@/static/my/sz.png" mode="aspectFit" class="set-icon" @click="set"></image>
|
||
</view>
|
||
<template v-if="isLogin">
|
||
<view class="bottom">
|
||
<view class="id-txt">
|
||
<image src="@/static/my/id.png" mode="aspectFit" class="id-icon"></image>
|
||
{{infoDetail.username | mobileFilter(infoDetail.username)}}
|
||
</view>
|
||
<!-- <view style="width: 100rpx;height: 100rpx;pointer-events: none;">
|
||
<SpineCom skelUrl="/static/spine/guan_yu/guan_yu.skel" atlasUrl="/static/spine/guan_yu/guan_yu.atlas" />
|
||
</view> -->
|
||
<!-- <view class="id-txt">
|
||
<image src="@/static/my/jf.png" mode="aspectFit" class="id-icon"></image>
|
||
{{infoDetail.coins||0}}
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="top-up" @click="topUp" v-if="isLogin">充值</view> -->
|
||
</view>
|
||
<view class="contain">
|
||
<view class="item" @click="ponitRecord">
|
||
<view class="label">{{infoDetail.points||0}}</view>
|
||
<view class="value">积分</view>
|
||
</view>
|
||
<view class="item" @click="coupon">
|
||
<view class="label">{{total || 0}}</view>
|
||
<view class="value">优惠券</view>
|
||
</view>
|
||
<view class="item" @click="promptCk">
|
||
<view class="label">{{promptCount || 0}}</view>
|
||
<view class="value">提示卡</view>
|
||
</view>
|
||
<view class="item" @click="warehouse">
|
||
<view class="label">{{count||0}}</view>
|
||
<view class="value">仓库</view>
|
||
</view>
|
||
</view>
|
||
<view class="order">
|
||
<view class="header">
|
||
<view class="label">我的订单</view>
|
||
<view class="value" @click="goOrder">
|
||
全部订单
|
||
<image src="@/static/my/back.png" class="back-icon" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="status">
|
||
<view v-for="(item,index) in orderList" :key="index" class="item" @click="goPath(item)" :class="{'border-left':index === 3}">
|
||
<image :src="item.img" mode="aspectFit" :style="{width:item.width,height:item.height}"></image>
|
||
<view class="label">{{item.label}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order server">
|
||
<view class="header">
|
||
<view class="label">我的服务</view>
|
||
<view class="value"></view>
|
||
</view>
|
||
<view class="status">
|
||
<view v-for="(item,index) in list" :key="index" class="item" @click="goPath(item)">
|
||
<image :src="item.img" mode="aspectFit" :style="{width:item.width,height:item.height}"></image>
|
||
<view class="label">{{item.label}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 是否有未开完的奖品 -->
|
||
<NoOpenCom></NoOpenCom>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/mine/mine" v-if="visible"></page-popup>
|
||
<!-- <page-popup page="/pages/mine/mine"></page-popup> -->
|
||
<!-- <customerCom v-if="customerVisible" @isClose="customerVisible = false"></customerCom> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
import { userInfo,boxCount,recordCountApi,customerApi } from '@/API/user.js'
|
||
import { userCouponApi,couponCountApi } from '@/API/user.js'
|
||
import NoOpenCom from '@/pages/index/components/noOpen.vue'
|
||
import reportClickFn from '@/utils/report.js'
|
||
import customerCom from '@/pages/components/customer.vue'
|
||
import SpineCom from '@/pages/components/spine.vue'
|
||
import { promptCountApi } from '@/API/index.js'
|
||
export default{
|
||
mixins: [myMixins],
|
||
data(){
|
||
return{
|
||
list:[
|
||
{label:"盲盒订单",img:"../../static/my/mhdd.png",width:"48rpx",height:"48rpx",page:'/pages/mine/boxOrder'},
|
||
{label:"地址管理",img:"../../static/my/dzgl.png",width:"48rpx",height:"48rpx",page:'/pages/mine/address'},
|
||
// {label:"我的收藏",img:"../../static/my/wdsc.png",width:"48rpx",height:"48rpx",page:"/pages/mine/collect"},
|
||
{label:"联系客服",img:"../../static/my/lxkf.png",width:"48rpx",height:"48rpx",page:'customer'},
|
||
// {label:"意见反馈",img:"../../static/mine/yjfk.png",width:"36rpx",height:"36rpx",page:"/pages/mine/feedback"},
|
||
// {label:"系统公告",img:"../../static/mine/xtgg.png",width:"37rpx",height:"38rpx",page:'/pages/mine/notice'},
|
||
// {label:"关于我们",img:"../../static/mine/gywm.png",width:"35rpx",height:"37rpx",page:'/pages/mine/about'},
|
||
],
|
||
operationList:[
|
||
{isShow:true,label:"盲盒订单",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-dd.png",width:"52rpx",height:"52rpx",page:'/pages/lifeOrder/order'},
|
||
{isShow:true,label:"地址管理",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-dz.png",width:"52rpx",height:"52rpx",page:'/pages/mine/address'},
|
||
{isShow:true,label:"我的收藏",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-sc.png",width:"52rpx",height:"52rpx",page:"/pages/mine/collect"},
|
||
{isShow:true,label:"联系客服",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-kf.png",width:"52rpx",height:"52rpx"},
|
||
{isShow:false,label:"劵码核销",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-qm.png",width:"52rpx",height:"52rpx",page:'/pages/lifeCancel/cancel'},
|
||
{isShow:true,label:"意见反馈",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-yj.png",width:"52rpx",height:"52rpx",page:"/pages/mine/feedback"},
|
||
{isShow:true,label:"系统公告",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-xt.png",width:"52rpx",height:"52rpx",page:'/pages/mine/notice'},
|
||
{isShow:true,label:"关于我们",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-gy.png",width:"52rpx",height:"52rpx",page:'/pages/mine/about'},
|
||
],
|
||
orderList:[
|
||
{label:"待发货",img:"../../static/my/dfh.png",width:"48rpx",height:"48rpx",page:'/pages/order/index?type=WAITING_FOR_SHIPMENT'},
|
||
{label:"待收货",img:"../../static/my/dsh.png",width:"48rpx",height:"48rpx",page:'/pages/order/index?type=WAITING_FOR_RECEIPT'},
|
||
{label:"已完成",img:"../../static/my/ywc.png",width:"48rpx",height:"48rpx",page:'/pages/order/index?type=COMPLETED'},
|
||
{label:"虚拟订单",img:"../../static/new/mine/virtual.png",width:"48rpx",height:"48rpx",page:'/pages/mine/virtual'},
|
||
],
|
||
infoDetail:{
|
||
phone:"",
|
||
avatarResource:{}
|
||
},//用户信息
|
||
boxCountData:{
|
||
boxes: 0,
|
||
items: 0
|
||
},
|
||
isLogin:false,
|
||
count:0,
|
||
total:0,
|
||
customer:'',
|
||
visible:false,
|
||
customerVisible:false,
|
||
promptCount:0
|
||
}
|
||
},
|
||
filters:{
|
||
// 隐藏手机号
|
||
mobileFilter(val){
|
||
let reg = /^(.{3}).*(.{4})$/
|
||
return val ? val.replace(reg,'$1****$2') : ''
|
||
},
|
||
},
|
||
components:{NoOpenCom,customerCom,SpineCom},
|
||
onShow() {
|
||
uni.$on('updateTabData', (data) => {
|
||
this.visible = false
|
||
setTimeout(() => {
|
||
this.visible = true
|
||
},500)
|
||
});
|
||
if(uni.getStorageSync('box-token')){
|
||
this.getUserInfo()
|
||
this.getRecordCount()
|
||
this.getCustomer()
|
||
this.getCoupon()
|
||
this.getPromptCount()
|
||
this.isLogin = true
|
||
}else{
|
||
this.isLogin = false
|
||
}
|
||
|
||
// if(this.$isLogin()){
|
||
// // this.getCount()
|
||
// this.getUserInfo()
|
||
// }else{//未登录
|
||
|
||
// }
|
||
},
|
||
onLoad(option) {
|
||
this.visible = true
|
||
console.log("aaaa:",option)
|
||
},
|
||
methods:{
|
||
promptCk(){
|
||
// return
|
||
uni.navigateTo({
|
||
url:`/pages/mine/prompt`
|
||
})
|
||
},
|
||
getPromptCount(){
|
||
promptCountApi().then(res => {
|
||
if(res.code === 200){
|
||
this.promptCount = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
|
||
getCoupon() {
|
||
uni.showLoading()
|
||
couponCountApi().then(res => {
|
||
uni.hideLoading()
|
||
this.total = res.data
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
previewImage(){
|
||
let imgUrl = this.infoDetail.avatarResource.url ? this.infoDetail.avatarResource.url : 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/logo.png'
|
||
console.log(imgUrl)
|
||
uni.previewImage({
|
||
loop: true,
|
||
urls: [imgUrl], //可以展示imgUrl 列表中所有的图片
|
||
// current: index //首先当前index对应图片，左右可以切换其他序号的图片
|
||
});
|
||
},
|
||
|
||
// 设置
|
||
set(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/setting`
|
||
})
|
||
},
|
||
getCustomer(){
|
||
customerApi().then(res => {
|
||
if(res.code === 200){
|
||
this.customer = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
topUp(){
|
||
if(uni.getStorageSync('box-token')){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/topUp`
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/login/login`
|
||
})
|
||
}
|
||
|
||
},
|
||
coupon(){
|
||
if(uni.getStorageSync('box-token')){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/coupon`
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/login/login`
|
||
})
|
||
}
|
||
|
||
},
|
||
ponitRecord(){
|
||
if(uni.getStorageSync('box-token')){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/point`
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/login/login`
|
||
})
|
||
}
|
||
|
||
},
|
||
getRecordCount(){
|
||
recordCountApi().then(res => {
|
||
if(res.code === 200){
|
||
this.count = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
goOrder(){
|
||
if(uni.getStorageSync('box-token')){
|
||
uni.navigateTo({
|
||
url:`/pages/order/index?type=''`
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/login/login`
|
||
})
|
||
}
|
||
|
||
},
|
||
goLogin(){
|
||
uni.navigateTo({
|
||
url:`/pages/login/login?type='back'`
|
||
})
|
||
},
|
||
warehouse(){
|
||
if(uni.getStorageSync('box-token')){
|
||
// if(this.$isLogin()){
|
||
// uni.$emit('updateTabData', {newData:'newData'});
|
||
uni.switchTab({
|
||
url:`/pages/mine/boxRecrd`
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/login/login`
|
||
})
|
||
}
|
||
// }else{
|
||
// // this.$api.msg('请登录！')
|
||
// this.$refs.loginPopup.show()
|
||
// }
|
||
},
|
||
// 复制
|
||
copy(val){
|
||
uni.setClipboardData({
|
||
data: val,
|
||
})
|
||
},
|
||
// 获取礼盒 物品数量
|
||
getCount(){
|
||
boxCount().then(res => {
|
||
console.log(res)
|
||
if(res.code === 200){
|
||
this.boxCountData = res.data
|
||
}
|
||
})
|
||
},
|
||
// 获取用户信息
|
||
getUserInfo(){
|
||
userInfo().then(res => {
|
||
if(res.code === 200){
|
||
this.infoDetail = res.data
|
||
|
||
}else if(res.code == 400){
|
||
uni.removeStorageSync('userInfo')
|
||
uni.removeStorageSync('info')
|
||
this.$api.msg(res.message)
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 个人中心
|
||
goPersonal(){
|
||
// if(this.$isLogin()){
|
||
uni.navigateTo({
|
||
url:`/pages/lifeMine/personal`
|
||
})
|
||
// }else{
|
||
// this.$refs.loginPopup.show()
|
||
// }
|
||
},
|
||
goPath(item){
|
||
if(uni.getStorageSync('box-token')){
|
||
if(item.page === 'customer'){
|
||
// window.open(this.customer)
|
||
// this.customerVisible = true
|
||
uni.navigateTo({
|
||
url:`/pages/mine/customer`
|
||
})
|
||
// window.location.href = this.customer
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`${item.page}`
|
||
})
|
||
}
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/login/login`
|
||
})
|
||
}
|
||
|
||
// if(this.$isLogin()){
|
||
// uni.navigateTo({
|
||
// url:`${item.page}`
|
||
// })
|
||
// }else{
|
||
// this.$refs.loginPopup.show()
|
||
// }
|
||
},
|
||
},
|
||
onTabItemTap(){
|
||
console.log("我点击了我的的bar")
|
||
// 个人中心tabbar点击次数
|
||
reportClickFn('mine_tabbar');
|
||
this.getRecordCount()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background-color: #F5F5F5;
|
||
}
|
||
.mine-page{
|
||
background-image: url('@/static/my/bg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
.header{
|
||
padding: 48rpx 0 0 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.detail{
|
||
display: flex;
|
||
align-items: center;
|
||
.avatar{
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border: 2px solid #39AFFF;
|
||
// border-image: linear-gradient(180deg, rgba(57, 175, 255, 1), rgba(51, 90, 255, 1)) 2 2;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
.avatar-icon{
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.info{
|
||
margin-left: 24rpx;
|
||
.top{
|
||
display: flex;
|
||
align-items: center;
|
||
.name{
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
}
|
||
.go-login{
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #000000;
|
||
width: 100rpx;
|
||
}
|
||
.set-icon{
|
||
margin-left: 16rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.bottom{
|
||
margin-top: 24rpx;
|
||
border-radius: 22px 22px 22px 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
.id-txt{
|
||
position: relative;
|
||
padding-left: 44rpx;
|
||
padding-right: 16rpx;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
background: #FFFFFF;
|
||
margin-right: 24rpx;
|
||
border-radius: 50rpx;
|
||
.id-icon{
|
||
position: absolute;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
top: 4rpx;
|
||
left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.top-up{
|
||
background-image: url('@/static/my/cz.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
width: 192rpx;
|
||
height: 128rpx;
|
||
display: flex;
|
||
|
||
align-items: center;
|
||
// padding-top: 46rpx;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
// border: 1px solid red;
|
||
}
|
||
}
|
||
.contain{
|
||
margin-top: 20rpx;
|
||
padding: 0 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 228rpx;
|
||
height: 148rpx;
|
||
.label{
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
}
|
||
.value{
|
||
margin-top: 16rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
.order{
|
||
margin-left: 32rpx;
|
||
width: 686rpx;
|
||
height: 224rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
background-image: url('@/static/my/dd.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
// border: 2rpx solid;
|
||
// border-image: radial-gradient(circle, rgba(63, 148, 255, 1), rgba(125, 210, 255, 0.5), rgba(255, 255, 255, 0)) 2 2;
|
||
.header{
|
||
padding: 24rpx 32rpx 0 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.label{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
.value{
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
.back-icon{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
.status{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
margin-top: 16rpx;
|
||
.item{
|
||
width: 154rpx;
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
.label{
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
.border-left{
|
||
border-left: 1px solid #999;
|
||
}
|
||
}
|
||
}
|
||
.server{
|
||
margin-top: 24rpx;
|
||
border: none;
|
||
background-image: none;
|
||
}
|
||
}
|
||
</style> |