You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
389 lines
10 KiB
389 lines
10 KiB
<template>
|
|
<view class="my">
|
|
<view class="my-header position-relative">
|
|
<status-bar isMenuButton></status-bar>
|
|
<view class="m-t-28 m-b-20 p-l-42 p-r-80 flex align-start">
|
|
<view class="position-relative">
|
|
<u-avatar size="120" :src="userInfo.headUrl || ''"></u-avatar>
|
|
<view class="position-absolute left-0 pic_user_btm flex">
|
|
</view>
|
|
|
|
</view>
|
|
<view class="flex-1 m-l-20 flex align-center justify-between" v-if="Object.keys(userInfo).length>0">
|
|
<view class="flex flex-column text-white">
|
|
<text class="font-36">{{ userInfo.nickName || '' }}</text>
|
|
<view class="flex align-center">
|
|
<text class="font-32">ID: {{ userInfo.invitationCode || '' }}</text>
|
|
<com-view class="my-header-copy flex align-center justify-center m-l-20" @click="copy(userInfo.invitationCode)"><view class="text-white font-32 my-header-copy--txt">复制</view></com-view>
|
|
</view>
|
|
<view class="flex align-center m-t-10" style="width: 100%;">
|
|
<image class="m-r-20" v-if="userInfo.channelDealerRole==1" style="height: 39rpx;width: 141rpx;" :src="IMG_URL + 'my/channel_pic.png'" mode=""></image>
|
|
<image class="m-r-20" v-if="userInfo.stationmasterRole==1" style="height: 39rpx;width: 141rpx;" :src="IMG_URL + 'my/webmaster_pic.png'" mode=""></image>
|
|
<image style="height: 42rpx;width: 144rpx;" :src="IMG_URL + 'vip/'+userInfo.level+'.png'" mode=""></image>
|
|
</view>
|
|
|
|
</view>
|
|
<com-view class="my-header-edit" @click="toInformation"><image mode="widthFix" :src="IMG_URL + 'my/edit.png'"></image></com-view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="position-absolute my-shadow my-header-data flex align-center">
|
|
<view class="my-header-data-item flex-1 flex flex-column align-center justify-between" @click="toConsumptionGold">
|
|
<text class="theme-color font-32 font-weight-bold">{{ userInfo.consumption | numberFormat }}</text>
|
|
<text class="font-30">消费金</text>
|
|
<text class="font-30">余额与明细</text>
|
|
</view>
|
|
<view class="my-header-data-item flex-1 flex flex-column align-center justify-between" @click="toIntegral">
|
|
<text class="theme-color font-32 font-weight-bold">{{ userInfo.integral | numberFormat }}</text>
|
|
<text class="font-30">兑购金</text>
|
|
<text class="font-30">余额与明细</text>
|
|
</view>
|
|
<view class="my-header-data-item flex-1 flex flex-column align-center justify-between" @click="toWebmaster">
|
|
<text class="theme-color font-32 font-weight-bold">{{ userInfo.wallet | numberFormat }}</text>
|
|
<text class="font-30">钱包</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="my-welfare" @click="toMember" v-if="img_Member"><image :src="img_Member" mode="widthFix"></image></view>
|
|
|
|
<view class="my-notice flex align-center overflow-hidden" v-if="userToken">
|
|
<view ><image class="my-notice-image" :src="IMG_URL + 'notice.png'" mode="widthFix"></image></view>
|
|
<u-notice-bar
|
|
@click="todetail"
|
|
class="flex-1"
|
|
:volume-icon="false"
|
|
type="primary"
|
|
color="#01AEEA"
|
|
bg-color="#e0ffff"
|
|
mode="horizontal"
|
|
:list="noticeList"
|
|
/>
|
|
</view>
|
|
<!-- <view class="my-notice flex align-center">
|
|
<view class="my-notice-image"><image :src="IMG_URL + 'notice.png'" mode="widthFix"></image></view>
|
|
<u-notice-bar class="flex-1" font-size="30" :volume-icon="false" type="primary" color="#01AEEA" bg-color="#e0ffff" mode="horizontal" :list="noticeList"></u-notice-bar>
|
|
</view> -->
|
|
|
|
<view class="my-order my-shadow m-t-20 p-b-20">
|
|
<view class="my-order-title p-l-28 p-r-28 flex align-center justify-between">
|
|
<text class="text-black font-30 font-weight-bold">我的订单</text>
|
|
<!-- <com-view>
|
|
<view class="flex align-center my-order-title-right">
|
|
<view class="my-order--txt">全部订单</view>
|
|
<u-icon size="40" name="arrow-right" color="#707070"></u-icon>
|
|
</view>
|
|
</com-view> -->
|
|
</view>
|
|
|
|
<view class="flex align-center justify-between p-l-20 p-r-20">
|
|
<view
|
|
hover-class="hover-class"
|
|
class="my-order-item flex flex-column align-center justify-between"
|
|
v-for="(item, index) in config.orderList"
|
|
:key="item.key"
|
|
@click="toOrder(index)"
|
|
>
|
|
<view :style="{ width: item.width }"><image :src="item.img" mode="widthFix"></image></view>
|
|
<text class="font-30 text-black" style="font-weight: 500;">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="my-other my-shadow m-t-30 p-20 flex align-center justify-between flex-wrap"> -->
|
|
<view class="my-other my-shadow m-t-30 p-20" v-if="otherList.length>0">
|
|
<u-grid :col="4" :border="false">
|
|
<u-grid-item v-for="item in otherList" :key="item.id">
|
|
<view hover-class="hover-class" @click="handleOther(item.url,item)">
|
|
<view class="flex flex-column align-center justify-between">
|
|
<view>
|
|
<image style="width: 64rpx; height: 64rpx" :src="item.image"></image>
|
|
</view>
|
|
<text class="font-30 text-black" style="font-weight: 500;">{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from './config.js';
|
|
import config_img from '@/utils/js/config.js';
|
|
import { IMG_URL } from '@/env.js';
|
|
import { mapState } from 'vuex';
|
|
export default {
|
|
data() {
|
|
return {
|
|
IMG_URL,
|
|
config,
|
|
otherList:[],
|
|
noticeList: [],
|
|
img_Member: '',
|
|
userInfo: {},
|
|
};
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getUserInfo();
|
|
},
|
|
onShow() {
|
|
this.noticeList = []
|
|
// this.userToken && this.$store.dispatch('userInfo');
|
|
uni.showLoading();
|
|
this.getUserInfo();
|
|
this.getBanner();
|
|
this.userToken && this.getNotice();
|
|
this.getMyButton();
|
|
uni.hideLoading();
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
userToken: state => state.userToken,
|
|
// userInfo: state => state.userInfo
|
|
})
|
|
},
|
|
methods: {
|
|
// 获取用户信息
|
|
getUserInfo () {
|
|
return new Promise((resolve, reject) => {
|
|
this.$api('getUserInfo').then(res => {
|
|
let { code, result, message} = res;
|
|
if(code == 200){
|
|
let userInfo = {...result.account, ...result.userInfo }
|
|
// 更新用户信息缓存
|
|
this.userInfo = userInfo
|
|
this.$storage.setStorage("__user_info", userInfo)
|
|
// this.getAddressInfo();
|
|
uni.stopPullDownRefresh();
|
|
resolve(result)
|
|
}else {
|
|
uni.stopPullDownRefresh();
|
|
reject(message)
|
|
}
|
|
}).catch(err => {
|
|
uni.stopPullDownRefresh();
|
|
reject(err.message)
|
|
})
|
|
})
|
|
},
|
|
|
|
toWebmaster () {
|
|
this.$tools.navigateTo({
|
|
url: '/pagesA/my_other_list/webmaster/wallet/index'
|
|
})
|
|
},
|
|
copy (val) {
|
|
uni.setClipboardData({
|
|
data: val,
|
|
showToast: true
|
|
})
|
|
},
|
|
// 获取功能按钮
|
|
getMyButton() {
|
|
this.$api('getMyButton').then(res => {
|
|
let { code, result, message} = res;
|
|
if(code == 200 ) {
|
|
// 成功
|
|
this.otherList = result
|
|
}else {
|
|
this.$Toast(message);
|
|
}
|
|
}).catch(err => {
|
|
this.$Toast(err.message);
|
|
})
|
|
},
|
|
getBanner() {
|
|
this.$api('getMyBanner').then(res =>{
|
|
let { code, result, message} = res;
|
|
if(code == 200) {
|
|
this.img_Member = result.value;
|
|
}else{
|
|
this.$Toast(message)
|
|
}
|
|
}).catch(err => {
|
|
this.$Toast(err.message)
|
|
})
|
|
},
|
|
getNotice() {
|
|
this.$api('getMyNotice').then(res =>{
|
|
let { code, result, message} = res;
|
|
if(code == 200) {
|
|
this.noticeList.push(result.value)
|
|
}else{
|
|
this.$Toast(message)
|
|
}
|
|
}).catch(err => {
|
|
this.$Toast(err.message)
|
|
})
|
|
},
|
|
// 会员
|
|
toMember() {
|
|
console.log(this.userInfo)
|
|
if(this.userInfo.level>0){
|
|
this.$tools.navigateTo({
|
|
url: '/pagesC/member/upgrades_renewals/index'
|
|
});
|
|
}else{
|
|
this.$tools.navigateTo({
|
|
url: '/pagesC/member/index'
|
|
});
|
|
}
|
|
},
|
|
toOrder(index) {
|
|
this.$tools.navigateTo({
|
|
url: './order/index?status=' + index
|
|
});
|
|
},
|
|
toInformation() {
|
|
this.$tools.navigateTo({
|
|
url: '/pages/my/information/index'
|
|
});
|
|
},
|
|
toConsumptionGold() {
|
|
this.$tools.navigateTo({
|
|
url: '/pages/my/consumption_gold/index'
|
|
});
|
|
},
|
|
toIntegral() {
|
|
this.$tools.navigateTo({
|
|
url: '/pages/my/integral/index'
|
|
});
|
|
},
|
|
handleOther (url,item) {
|
|
if(item.state==1){
|
|
this.$Toast('暂未开通，敬请期待！')
|
|
return
|
|
}
|
|
if(url == '/pagesA/my_other_list/presented_integral/index' && this.userInfo.getRole==0) {
|
|
this.$Toast('授权后，方可赠送！')
|
|
return
|
|
}
|
|
if(this.userInfo.channelDealerRole == 0 && url == '/pagesA/my_other_list/channel/index'){
|
|
this.$Toast('您不是合伙人，无权限访问')
|
|
return
|
|
}
|
|
if(this.userInfo.stationmasterRole == 0 && url == '/pagesA/my_other_list/webmaster/index'){
|
|
this.$Toast('您不是站长，无权限访问')
|
|
return
|
|
}
|
|
|
|
this.$tools.navigateTo({
|
|
url
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.pic_user_btm{
|
|
width: 100%;
|
|
height: 40rpx;
|
|
bottom: -12rpx;
|
|
image{
|
|
width: 150rpx;
|
|
}
|
|
}
|
|
.my {
|
|
padding-bottom: 20rpx;
|
|
&-header {
|
|
height: 383rpx;
|
|
background: linear-gradient(180deg, #01aeea, #f1fbff);
|
|
margin-bottom: 86rpx;
|
|
&-edit {
|
|
width: 40rpx;
|
|
}
|
|
|
|
&-copy {
|
|
width: 70rpx;
|
|
height: 28rpx;
|
|
opacity: 0.4;
|
|
background: #000000;
|
|
border-radius: 10rpx;
|
|
&--txt {
|
|
transform: scale(0.7);
|
|
line-height: 28rpx;
|
|
}
|
|
}
|
|
|
|
&-data {
|
|
width: 700rpx;
|
|
height: 182rpx;
|
|
bottom: -60rpx;
|
|
left: 50%;
|
|
transform: translate(-50%, 50%);
|
|
&-item {
|
|
height: 100%;
|
|
padding: 28rpx 0 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-shadow {
|
|
box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.16);
|
|
background: #ffffff;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
&-welfare {
|
|
padding-top: 90rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
&-notice {
|
|
width: 712rpx;
|
|
margin: 0 20rpx;
|
|
background-color: #e0ffff;
|
|
padding: 0rpx 10rpx;
|
|
border-radius: 40rpx;
|
|
position: relative;
|
|
&-image {
|
|
width: 60rpx;
|
|
}
|
|
::v-deep .u-notice-box{
|
|
margin-left: 0rpx;
|
|
}
|
|
::v-deep .u-notice-bar{
|
|
padding: 0 24rpx !important;
|
|
width: 79%;
|
|
}
|
|
::v-deep .u-notice-text{
|
|
font-size: 36rpx !important;
|
|
}
|
|
}
|
|
|
|
&-order {
|
|
margin: 0 26rpx;
|
|
&-title {
|
|
height: 80rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
&-right {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
&--txt {
|
|
font-size: 26rpx;
|
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
|
color: #707070;
|
|
}
|
|
|
|
&-item {
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
|
|
&-other {
|
|
margin: 0 26rpx;
|
|
|
|
&-item {
|
|
width: 25%;
|
|
height: 120rpx;
|
|
margin-bottom: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|