449 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			449 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <template>
 | |
| 	<view class="pr pb100">
 | |
| 		<image class="user-bg" src="/static/bg/user-bg.png" mode=""></image>
 | |
| 		<view class="user-top d-b-s white">
 | |
| 			<view class="flex-1">
 | |
| 				<view class=" d-b-s ww100 mb20">
 | |
| 					<image class="user-ava" :src="userInfo.headPath || userInfo.countryCircularIcon" mode=""></image>
 | |
| 					<view class="user-info d-c d-b-s flex-1">
 | |
| 						<view class="d-s-c mb10">
 | |
| 							<text class="f28 fb mr20">{{userInfo.memberName}}</text>
 | |
| 							<!-- 	<view class="grad-btn d-c-c">
 | |
| 								<image class="menber-icon" src="/static/icon/menber-icon.png" mode=""></image>
 | |
| 								<text>{{userData.awardsVal}}</text>
 | |
| 							</view> -->
 | |
| 							<view class="d-s-c">
 | |
| 								<image class="vip-icon" v-if="userInfo.gradeIcon" :src="userInfo.gradeIcon" mode="">
 | |
| 								</image>
 | |
| 								<image class="vip-icon" v-if="userInfo.awardsIcon" :src="userInfo.awardsIcon" mode="">
 | |
| 								</image>
 | |
| 							</view>
 | |
| 						</view>
 | |
| 						<view class="f22">{{$t('MN_T_1')}}:{{userInfo.memberCode}}</view>
 | |
| 					</view>
 | |
| 				</view>
 | |
| 
 | |
| 			</view>
 | |
| 			<view class="d-c d-b-e user-info">
 | |
| 				<view class="icon iconfont icon-shezhi1" @click="gotoPage('pages/user/set/index')"></view>
 | |
| 				<!-- <view>服务中心</view> -->
 | |
| 			</view>
 | |
| 		</view>
 | |
| 		<view class="my-assets">
 | |
| 			<view class="my-assets-all">
 | |
| 				<view class="f28">{{$t('N_I_247')}}</view>
 | |
| 				<view class="gray9 f24" @click="jumpPage('/pages/order/myorder')">{{$t('MY_ORD_54')}}<text
 | |
| 						class="icon iconfont icon-jiantou"></text></view>
 | |
| 			</view>
 | |
| 			<view class="d-b-c w100">
 | |
| 				<view class="item" @click="jumpPage('/pages/order/myorder?dataType=0')">
 | |
| 					<view class="icon-box pr">
 | |
| 						<image src="/static/icon/icon-icon.png" mode=""></image>
 | |
| 						<text class="dot  d-c-c"
 | |
| 							v-if="orderCount.waitPayNum != null && orderCount.waitPayNum > 0">{{ orderCount.waitPayNum }}</text>
 | |
| 					</view>
 | |
| 					<text>{{$t('ENU_ORDER_S_0')}}</text>
 | |
| 				</view>
 | |
| 				<view class="item" @click="jumpPage('/pages/order/myorder?dataType=1')">
 | |
| 					<view class="icon-box pr">
 | |
| 						<image src="/static/icon/icon-daifahuo.png" mode=""></image>
 | |
| 						<text class="dot  d-c-c"
 | |
| 							v-if="orderCount.payNum != null && orderCount.payNum > 0">{{ orderCount.payNum }}</text>
 | |
| 					</view>
 | |
| 					<text class="">{{$t('ENU_ORDER_S_1')}}</text>
 | |
| 				</view>
 | |
| 				<view class="item" @click="jumpPage('/pages/order/myorder?dataType=3')">
 | |
| 					<view class="icon-box pr">
 | |
| 						<image src="/static/icon/icon-daishouhuo.png" mode=""></image>
 | |
| 					</view>
 | |
| 					<text>{{$t('ENU_ORDER_S_3')}}</text>
 | |
| 				</view>
 | |
| 				<view class="item" @click="jumpPage('/pages/order/myorder?dataType=4')">
 | |
| 					<view class="icon-box pr">
 | |
| 						<image src="/static/icon/icon-quanbudingdan.png" mode=""></image>
 | |
| 					</view>
 | |
| 					<text>{{$t('ENU_ORDER_S_5')}}</text>
 | |
| 				</view>
 | |
| 			</view>
 | |
| 		</view>
 | |
| 		<view class="menu-list">
 | |
| 			<view class="menu-title border-b f28">{{$t('ENU_MENU_90')}}</view>
 | |
| 			<view v-if="listmenu">
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/my-wallet/index')" v-if="hasMenu('wallet')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/wdqb.png" mode=""></image>
 | |
| 						<view>{{$t('ENU_MENU_901')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/electron-card/index')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user//dzhyk.png" mode=""></image>
 | |
| 						<view>{{$t('PER_DA_13')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('/pages/order/myorder')" v-if="hasMenu('order')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/wddd.png" mode=""></image>
 | |
| 						<view>{{$t('ENU_MENU_902')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('/pages/pickup-area/index')" v-if="hasMenu('pickGoods')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/thzq.png" mode=""></image>
 | |
| 						<view>{{$t('ENU_MENU_904')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<!-- <view class="d-b-c menu-item" @click="gotoPage('/pages/member-area/index')" v-if="hasMenu('product')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/hygl.png" mode=""></image>
 | |
| 						<view>会员专区</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view> -->
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('/pages/market/index')" v-if="hasMenu('market')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/scdt.png" mode=""></image>
 | |
| 						<view>{{$t('ENU_MENU_50')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('/pages/maker-space/index')" v-if="hasMenu('space')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/ckkj.png" mode=""></image>
 | |
| 						<view>{{$t('ENU_MENU_70')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('/pages/self-service/index')" v-if="hasMenu('selfHelp')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/zzfw.png" mode=""></image>
 | |
| 						<view>{{$t('ENU_MENU_905')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('pages/user/set/security')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/zhaq.png" mode=""></image>
 | |
| 						<view>{{$t('w_0026')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/address/address')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/dzgl.png" mode=""></image>
 | |
| 						<view>{{$t('w_0027')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/card/list')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/yhxx.png" mode=""></image>
 | |
| 						<view>{{$t('MY_WAL_3')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/feedback/feedback')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/yjfk.png" mode=""></image>
 | |
| 						<view>{{$t('S_L_15')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<view class="d-b-c menu-item">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/dyyqh.png" mode=""></image>
 | |
| 						<view>{{$t('MY_ORD_55')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 				<view class="d-b-c menu-item" @click="gotoPage('/pages/user/about/index')">
 | |
| 					<view class="d-s-c ">
 | |
| 						<image class="menu-icon" src="/static/icon/user/gywm.png" mode=""></image>
 | |
| 						<view>{{$t('w_0006')}}</view>
 | |
| 					</view>
 | |
| 					<view class="icon iconfont icon-jiantou"></view>
 | |
| 				</view>
 | |
| 			</view>
 | |
| 		</view>
 | |
| 		<button @click="loginOut()" class="normal-sub-btn">{{$t('w_0028')}}</button>
 | |
| 	</view>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| 	export default {
 | |
| 		data() {
 | |
| 			return {
 | |
| 				userInfo: {},
 | |
| 				userData: {},
 | |
| 				listmenu: [],
 | |
| 				orderCount:{
 | |
| 					waitPayNum: 0,
 | |
| 					payNum: 0
 | |
| 				}
 | |
| 			};
 | |
| 		},
 | |
| 		onLoad: function(options) {
 | |
| 			this.getMenu();
 | |
| 			this.getUserInfoData();
 | |
| 			this.getUserData();
 | |
| 			this.getCartNum();
 | |
| 		},
 | |
| 		onShow() {
 | |
| 			this.getOrderNumData();
 | |
| 		},
 | |
| 		methods: {
 | |
| 			getOrderNumData() {
 | |
| 				let self = this;
 | |
| 				self.loading = true;
 | |
| 				self._get(
 | |
| 					'sale/api/my-order/num', {},
 | |
| 					function(res) {
 | |
| 						self.orderCount = res.data;
 | |
| 					}, {},
 | |
| 					() => {
 | |
| 						self.loading = false;
 | |
| 					}
 | |
| 				);
 | |
| 			},
 | |
| 			getCartNum() {
 | |
| 				let self = this;
 | |
| 				self._get('sale/api/shopping/getShoppingCount', {
 | |
| 					specialArea: '',
 | |
| 					pkCountry: ''
 | |
| 				}, res => {
 | |
| 					uni.setTabBarBadge({
 | |
| 						index: 2,
 | |
| 						text: res.data.cont + ''
 | |
| 					})
 | |
| 				})
 | |
| 			},
 | |
| 			hasMenu(key) {
 | |
| 				let self = this;
 | |
| 				let flag = false;
 | |
| 				console.log(key)
 | |
| 				self.listmenu.forEach((item, index) => {
 | |
| 					if (item.menuKey == key) {
 | |
| 						flag = true
 | |
| 					}
 | |
| 				})
 | |
| 				console.log(flag)
 | |
| 				return flag
 | |
| 			},
 | |
| 			getMenu() {
 | |
| 				let self = this;
 | |
| 				self._get('system/api/menu/list', {}, res => {
 | |
| 					let list = [];
 | |
| 					let arr = res.data;
 | |
| 					arr.forEach((item, index) => {
 | |
| 						if (item.menuParent == 0 || item.menuParent == 90) {
 | |
| 							list.push(item)
 | |
| 						}
 | |
| 					})
 | |
| 					self.listmenu = list;
 | |
| 					console.log(self.listmenu)
 | |
| 				});
 | |
| 			},
 | |
| 			// 获取用户信息
 | |
| 			getUserInfoData() {
 | |
| 				let self = this;
 | |
| 				self.loadding = true;
 | |
| 				self._get('member/api/member/get-info', {}, function(res) {
 | |
| 					if (res.code == 200) {
 | |
| 						self.userInfo = res.data;
 | |
| 					}
 | |
| 					self.loadding = false;
 | |
| 					uni.hideLoading();
 | |
| 				});
 | |
| 			},
 | |
| 			// 获取用户信息
 | |
| 			getUserData() {
 | |
| 				let self = this;
 | |
| 				self.loadding = true;
 | |
| 				self._get('member/api/member/get-data', {}, function(res) {
 | |
| 					if (res.code == 200) {
 | |
| 						self.userData = res.data;
 | |
| 					}
 | |
| 					self.loadding = false;
 | |
| 					uni.hideLoading();
 | |
| 				});
 | |
| 			},
 | |
| 			/*发送短信*/
 | |
| 			loginOut() {
 | |
| 				let self = this;
 | |
| 				self._delete(
 | |
| 					'member/auth/api/logout', '',
 | |
| 					result => {
 | |
| 						if (result.code == 200) {
 | |
| 							uni.showToast({
 | |
| 								title: '退出成功'
 | |
| 							});
 | |
| 							uni.removeStorageSync('Admin-Token');
 | |
| 							uni.removeStorageSync('expires_in');
 | |
| 							self.gotoPage('/login');
 | |
| 						}
 | |
| 					}
 | |
| 				);
 | |
| 			},
 | |
| 		}
 | |
| 	};
 | |
| </script>
 | |
| 
 | |
| <style lang="scss">
 | |
| 	.user-bg {
 | |
| 		position: absolute;
 | |
| 		left: 0;
 | |
| 		top: 0;
 | |
| 		z-index: 0;
 | |
| 		width: 750rpx;
 | |
| 		height: 331rpx;
 | |
| 	}
 | |
| 
 | |
| 	.user-top {
 | |
| 		width: 750rpx;
 | |
| 		height: 331rpx;
 | |
| 		position: relative;
 | |
| 		z-index: 1;
 | |
| 		padding: 77rpx 25rpx 0 22rpx;
 | |
| 		box-sizing: border-box;
 | |
| 	}
 | |
| 
 | |
| 	.grad-btn {
 | |
| 		// width: 146rpx;
 | |
| 		height: 46rpx;
 | |
| 		line-height: 46rpx;
 | |
| 		padding: 0 18rpx;
 | |
| 		background: rgba(#000, 0.25);
 | |
| 		border-radius: 23rpx;
 | |
| 		margin-left: 22rpx;
 | |
| 	}
 | |
| 
 | |
| 	.menber-icon {
 | |
| 		width: 23rpx;
 | |
| 		height: 18rpx;
 | |
| 		margin-right: 7rpx;
 | |
| 	}
 | |
| 
 | |
| 	.user-info {
 | |
| 		height: 88rpx;
 | |
| 	}
 | |
| 
 | |
| 	.user-ava {
 | |
| 		width: 88rpx;
 | |
| 		height: 88rpx;
 | |
| 		border-radius: 50%;
 | |
| 		display: block;
 | |
| 		margin-right: 18rpx;
 | |
| 	}
 | |
| 
 | |
| 	.icon.icon-shezhi1 {
 | |
| 		font-size: 44rpx;
 | |
| 		color: #fff;
 | |
| 	}
 | |
| 
 | |
| 	.vip-icon {
 | |
| 		width: 59rpx;
 | |
| 		height: 59rpx;
 | |
| 		margin-right: 26rpx;
 | |
| 		display: block;
 | |
| 	}
 | |
| 
 | |
| 	.menu-list {
 | |
| 		background-color: #fff;
 | |
| 		border-radius: 25rpx 25rpx 0 0;
 | |
| 		padding: 23rpx;
 | |
| 		margin-top: -30rpx;
 | |
| 		position: relative;
 | |
| 		z-index: 2;
 | |
| 	}
 | |
| 
 | |
| 	.menu-item {
 | |
| 		height: 100rpx;
 | |
| 		font-size: 26rpx;
 | |
| 	}
 | |
| 
 | |
| 	.menu-title {
 | |
| 		height: 100rpx;
 | |
| 		line-height: 100rpx;
 | |
| 	}
 | |
| 
 | |
| 	.menu-icon {
 | |
| 		width: 56rpx;
 | |
| 		height: 56rpx;
 | |
| 		display: block;
 | |
| 		margin-right: 28rpx;
 | |
| 	}
 | |
| 
 | |
| 	.icon.icon-jiantou {
 | |
| 		font-size: 26rpx;
 | |
| 		color: #999;
 | |
| 	}
 | |
| 
 | |
| 	.normal-sub-btn {
 | |
| 		margin: 50rpx auto;
 | |
| 	}
 | |
| 
 | |
| 	.my-assets {
 | |
| 		margin: 0 20rpx 0 22rpx;
 | |
| 		padding: 22rpx;
 | |
| 		padding-top: 0;
 | |
| 		background: #ffffff;
 | |
| 		border-radius: 20rpx;
 | |
| 		margin-top: -50rpx;
 | |
| 		z-index: 2;
 | |
| 		position: relative;
 | |
| 		margin-bottom: 24rpx;
 | |
| 	}
 | |
| 
 | |
| 	.my-assets .item {
 | |
| 		display: flex;
 | |
| 		flex-direction: column;
 | |
| 		justify-content: center;
 | |
| 		align-items: center;
 | |
| 	}
 | |
| 
 | |
| 	.my-assets .icon-box image {
 | |
| 		width: 48rpx;
 | |
| 		height: 48rpx;
 | |
| 		margin-bottom: 16rpx;
 | |
| 	}
 | |
| 
 | |
| 	.my-assets .icon-box {
 | |
| 		width: 60rpx;
 | |
| 		height: 60rpx;
 | |
| 	}
 | |
| 
 | |
| 	.my-assets .icon-box .iconfont {
 | |
| 		font-size: 50rpx;
 | |
| 		color: #333333;
 | |
| 	}
 | |
| 
 | |
| 	.my-assets .icon-box .dot {
 | |
| 		position: absolute;
 | |
| 		top: -13rpx;
 | |
| 		right: -8rpx;
 | |
| 		height: 25rpx;
 | |
| 		min-width: 25rpx;
 | |
| 		padding: 4rpx;
 | |
| 		border-radius: 20rpx;
 | |
| 		font-size: 20rpx;
 | |
| 		background: linear-gradient(180deg, #FC4133, #FF7A04);
 | |
| 		color: #ffffff;
 | |
| 	}
 | |
| 	.my-assets-all {
 | |
| 		display: flex;
 | |
| 		justify-content: space-between;
 | |
| 		align-items: center;
 | |
| 		height: 90rpx;
 | |
| 		line-height: 90rpx;
 | |
| 		border-bottom: 1rpx solid #eee;
 | |
| 	}
 | |
| 	
 | |
| 	.my-assets-all .icon.icon-jiantou {
 | |
| 		font-size: 12px;
 | |
| 		color: #999999;
 | |
| 	}
 | |
| </style> |