web-app-v1/pages/index-my/index-my.vue

<template>
	<view class="MyContainer">
		<view class="MyInfo">
			<view class="InfoBody">
				<view :style="{ backgroundImage: `url(${logged ? userinfo.avatar : ''})` }" class="avatar">
					<!-- <view class="avatar-yuan" @click="toCard"><image src="../../static/new_my/pen.png" mode="widthFix" style="width: 28rpx;"></image></view> -->
				</view>
				<view class="nameBox">
					<view class="name" v-if="userinfo.nickname">
						<!-- {{ logged ? userinfo.nickname.slice(0, 10) : '请登录' }} -->
						<text v-if="logged">{{ userinfo.nickname | getName(10) }}</text>
						<text v-else>请登录</text>
					</view>
					<view class="nameBottom">
						<!-- <view class="Id">{{ logged && userinfo.uuid ? `ID:${userinfo.uuid}` : '' }}</view> -->
						<!-- <view class="card" @click="toCard">
							<view class="text">名片</view>
						</view> -->
						<!-- <view class="nameBottom-level" v-if="logged">{{ userinfo.level }}</view> -->
					</view>
				</view>
				<view v-if="logged" class="warea" @click="goPolitical">
					<image src="../../static/new_my/kefu.png" mode="widthFix" style="width: 40rpx;"></image>
					<text class="text">客服</text>
				</view>
			</view>
		</view>
		<view class="orderContainer">
			<!-- 	<view class="orderTop">
				<view class="title">我的订单</view>
				<view class="all" @click="toUrlLink('my-order/my-order?type=0')">
					<view>全部订单</view>
				</view>
			</view>
			<view class="orderList">
				<view
					v-for="(item, i) in orderList"
					:key="i"
					class="orderItem"
					@click="toUrlLink(item.url)"
				>
					<image
						mode="widthFix"
						:src="`../../static/new_my/new_order/${item.icon}`"
						class="icon"
					/>
					<view class="name">{{ item.name }}</view>
					<view class="messageNumber" v-if="item.num">{{ userinfo[item.num] || 0 }}</view>
				</view>
			</view> -->
		</view>
	<!-- 	<view class="topList">
			<view v-for="(item, i) in topList" :key="i" class="topItem" @click="toUrlLink(item.url)">
				<image mode="widthFix" :src="`../../static/new_my/new_honor/${item.icon}`" :class="item.class" />
				<view class="name">{{ item.name }}</view>
			</view>
		</view> -->
		<view class="setList">
			<view v-for="(item, i) in setList" :key="i" class="setItem" @click="toUrlLink(item.url)">
				<view class="setItem-left">
					<image mode="widthFix" :src="`../../static/new_my/new_icon/${item.icon}`" class="icon" />
					<view>{{ item.name }}</view>
				</view>
				<view class="setItem-right">
					<text>{{ item.remark }}</text>
					<image mode="widthFix" src="../../static/new_my/arrow.png" class="right" />
				</view>
			</view>
		</view>
		<!-- 	<view v-if="showSigup" class="showSigup" @click="goSigup">
			报名入口
		</view> -->
	</view>
</template>
<script>
	import {
		_API_GetUserInfo
	} from '@/apis/user.js';
	// { name: '库存管理', icon: '1.png', url: 'stock/stock' },
	const setListArr = [
		// {
		// 	name: '我的授权',
		// 	icon: '10.png',
		// 	url: 'auth-card/auth-card'
		// },
		// {
		// 	name: '收货地址',
		// 	remark: '添加、修改',
		// 	icon: '1.png',
		// 	url: 'address-manage/address-manage'
		// },
		{
			name: '实战营报名',
			icon: '8.png',
			url: 'payment-xx/payment'
		},
		{
			name: '直播报名',
			icon: '8.png',
			url: 'payment/payment'
		},
		{
			name: '礼品兑换',
			icon: '3.png',
			url: 'zbs-exchange/exchange',
			width: 39,
			height: 37
		},
		{
			name: '安全管理',
			remark: '退出、修改手机号',
			icon: '2.png',
			url: 'safe-manage/safe-manage'
		},
		// {
		// 	name: '使用教程',
		// 	remark: '注册授权、微店铺',
		// 	icon: '3.png',
		// 	url: 'help-use/help-use',
		// 	width: 37,
		// 	height: 41
		// },
		// {
		// 	name: '微店铺',
		// 	icon: '4.png',
		// 	url: 'shop/shop',
		// 	width: 39,
		// 	height: 37
		// },
		// {
		// 	name: '公司荣誉殿堂',
		// 	icon: '6.png',
		// 	url: 'webView/webView',
		// 	width: 40,
		// 	height: 40
		// },
		{
			name: '评价客服',
			icon: '7.png',
			url: 'webView/appraise'
		}
		// { name: '购买肥皂', icon: '4.png', url: 'soap/index',width:36,height:37 }
	];
	export default {
		data() {
			return {
				// showSigup: true,
				warea: '',
				orderList: [{
						name: '待付款',
						icon: '1.png',
						url: 'my-order/my-order?type=1',
						num: ''
					},
					{
						name: '待审核',
						icon: '2.png',
						url: 'my-order/my-order?type=2',
						num: 'order_num1'
					},
					{
						name: '待收货',
						icon: '3.png',
						url: 'my-order/my-order?type=3',
						num: 'order_num2'
					},
					{
						name: '已完成',
						icon: '4.png',
						url: 'my-order/my-order?type=4',
						num: 'order_num3'
					}
				],
				topList: [{
						name: '个人荣誉',
						icon: '1.png',
						class: 'honer_icon',
						url: 'honor/index'
					},
					{
						name: '我的授权',
						icon: '2.png',
						class: 'accredit_icon',
						url: 'auth-card/auth-card'
					}
				],
				show_store: false, //true显示微店  false不显示微信
				warea_info: '', //战区信息A
			};
		},
		onPullDownRefresh() {
			this.showShop()
		},
		onShow() {
			if (this.userinfo.mobile === '18737108730' || this.userinfo.mobile === '15236877164' || this.userinfo.mobile === '15515667892') {
				const data = {
					name: '扫码',
					icon: '7.png',
					url: 'scanC/scanC'
				}
				setListArr.push(data)
			}
			if (this.userinfo.level == 3) {
				const data ={
					name: '收货地址',
					remark: '添加、修改',
					icon: '1.png',
					url: 'address-manage/address-manage'
				}
				setListArr.push(data)
			}
			this.showShop(); //判断是否显示店铺
		},
		computed: {
			tabBerList() {
				return this.$store.state.tabBer.list;
			},
			userinfo() {
				return this.$store.state.userinfo;
			},
			logged() {
				return this.$store.state.app.token ? true : false;
			},
			messageNum() {
				return this.$store.getters['message/messageNum'];
			},
			money() {
				return this.$store.state.userinfo.money;
			},
			setList() {
				let arr = Object.assign([], setListArr);
				
				return arr;
			}
		},
		methods: {
			// 跳转到报名支付
			goSigup() {
				uni.navigateTo({
					url: '../payment/payment'
				})
			},
			//判断是否显示微店测试
			showShop() {
				_API_GetUserInfo().then(res => {
					if (res.code == 200) {
						this.show_store = res.data.show_store;
						this.warea = res.data.warea;
						this.warea_info = res.data.warea_info;
					} else {
						uni.showModal({
							content: '获取信息失败',
							showCancel: false
						});
					}
				});
			},
			//跳转到微店测试
			toShop() {
				uni.navigateTo({
					url: '../shop/shop'
				});
			},
			// 跳转我的名片
			toCard() {
				uni.navigateTo({
					url: '../../pages/person-card/person-card?&self=1&id=' + this.userinfo.id
				});
			},
			// 跳转
			toUrlLink(url) {
				if (!url) return false;
				uni.navigateTo({
					url: `../../pages/${url}`
				});
			},
			goPolitical() {
				if (!this.warea_info) {
					uni.showModal({
						content: '暂无客服信息',
						showCancel: false
					})
					return false;
				}
				this.warea_info.warea = this.warea;
				let warea = encodeURIComponent(JSON.stringify(this.warea_info));
				uni.navigateTo({
					url: '../political/political?warea=' + warea
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.showSigup {
		width: 132rpx;
		height: 132rpx;
		padding: 10rpx;
		background: linear-gradient(150deg, #FFAA01 0%, #FE0000 100%);
		box-shadow: 0px 3px 10px rgba(254, 34, 0, 0.43);
		border-radius: 50%;
		opacity: 1;
		position: fixed;
		right: 40rpx;
		bottom: 160rpx;
		z-index: 100;
		color: #fff;
		font-weight: bold;
		line-height: 112rpx;
	}

	page {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.MyContainer {
		width: 100%;
		flex: 1;
		background-color: #f9f9fb;
		padding-bottom: 100rpx;

		.MyInfo {
			width: 100%;
			height: 320rpx;
			background-image: url(../../static/new_my/bg.png);
			padding: 30rpx;
			box-sizing: border-box;

			.InfoBody {
				width: 100%;
				margin-top: 10rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				position: relative;

				.avatar {
					position: relative;
					width: 126rpx;
					height: 126rpx;
					border-radius: 50%;
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
					background-color: #999999;
					border: 4rpx solid #fff;

					&-yuan {
						position: absolute;
						right: -5rpx;
						top: 0;
						width: 40rpx;
						height: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
						background: linear-gradient(180deg, #ffe9c2 0%, #ffcd81 100%);
					}
				}

				.nameBox {
					flex: 1;
					min-width: 0;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					margin-left: 30rpx;

					.name {
						color: #ffffff;
						font-size: 44rpx;
						margin-bottom: 10rpx;

						text {
							color: #fff;
						}
					}

					.nameBottom {
						display: flex;
						align-items: center;
						justify-content: flex-start;

						&-level {
							padding: 6rpx 28rpx;
							border-radius: 28rpx;
							// padding: 0 12rpx;
							// background: linear-gradient(227deg, #ffa600 0%, #fcbc05 100%);
							background: rgba(255, 255, 255, 0.4);
							color: #fff !important;
							font-size: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							// margin-left: 20rpx;
							// &::before {
							// 	content: '';
							// 	display: block;
							// 	width: 27rpx;
							// 	height: 32rpx;
							// 	background-image: url(../../static/new_my/level.png);
							// 	background-size: auto 100%;
							// 	background-position: center;
							// 	margin-right: 8rpx;
							// 	background-repeat: no-repeat;
							// }
						}

						.Id {
							color: #ffffff;
							font-size: 24rpx;
						}

						.card {
							width: 130rpx;
							height: 56rpx;
							border-radius: 28rpx;
							background: linear-gradient(180deg, #ffa600 0%, #fcbc05 100%);
							display: flex;
							align-items: center;
							justify-content: center;
							color: #ffffff;
							font-size: 28rpx;

							// margin-left: 20rpx;
							&::before {
								content: '';
								display: block;
								width: 28rpx;
								height: 28rpx;
								background-image: url(../../static/new_my/card.png);
								background-size: cover;
								background-position: center;
								margin-right: 8rpx;
							}

							.text {
								color: #ffffff !important;
							}
						}
					}
				}

				.warea {
					position: absolute;
					right: -30rpx;
					top: 60rpx;
					border-radius: 32rpx 0rpx 0rpx 32rpx;
					padding: 10rpx 20rpx 10rpx 16rpx;
					background: linear-gradient(203deg, #fbdcac 0%, #ffefd7 31%, #ffdca5 55%, #feeacb 90%, #f9d193 100%);
					color: #f44545 !important;
					font-size: 28rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					justify-content: center;

					.text {
						color: #f44545 !important;
					}
				}
			}
		}

		.orderContainer {
			width: calc(100% - 60rpx);
			margin: 0 auto 30rpx auto;
			box-sizing: border-box;
			// background: #FFFFFF;
			border-radius: 24rpx;

			.orderTop {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 42rpx;

				.title {
					color: #333333;
					font-size: 32rpx;
				}

				.all {
					color: #999999;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					&::after {
						content: '';
						display: block;
						width: 20rpx;
						height: 20rpx;
						background-position: center;
						background-size: cover;
						background-image: url(../../static/new_my/arrow.png);
						margin-left: 8rpx;
					}
				}
			}

			.orderList {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 28rpx;

				.orderItem {
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					position: relative;

					.icon {
						display: block;
						width: 58rpx;
						max-height: 58rpx;
						margin-bottom: 16rpx;
					}

					.name {
						color: #333333;
						font-size: 24rpx;
						line-height: 30rpx;
					}

					.messageNumber {
						position: absolute;
						padding: 0 6rpx;
						height: 32rpx;
						border-radius: 32rpx;
						background: linear-gradient(to right, #ffc401 0%, #fe2400 51%, #fe0000 100%);
						color: #ffffff;
						line-height: 32rpx;
						text-align: center;
						font-size: 28rpx;
						top: 0;
						left: 50%;
						min-width: 48rpx;
						box-sizing: border-box;
						transform: translate(25%, -16rpx);
					}
				}
			}

			.orderBottom {
				width: 100%;
				height: 212rpx;
				border-radius: 24rpx;
				background-image: url(../../static/new_my/bg2.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.orderMoney {
					.money {
						color: #ce7e06;
						font-size: 66rpx;
						margin-bottom: 10rpx;
						font-weight: bold;

						.spec {
							color: #ce7e06;
							font-size: 40rpx !important;
							font-weight: bold;
						}
					}

					.desc {
						color: #333;
						font-size: 28rpx;
					}
				}

				.link {
					width: 164rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 60rpx;
					// background-color: #FFF1AD;
					background-image: linear-gradient(to right, #fe6738, #f63737);
					color: #fff;
					font-size: 28rpx;
					text-align: center;
				}
			}
		}

		.topList {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			padding: 0 30rpx;

			.topItem {
				width: 330rpx;
				height: 168rpx;
				background-color: #ffffff;
				border-radius: 18rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.name {
					color: #333333;
					font-size: 30rpx;
					font-weight: bold;
				}

				.accredit_icon {
					width: 78rpx;
					max-height: 72rpx;
					margin-right: 22rpx;
				}

				.honer_icon {
					width: 50rpx;
					max-height: 70rpx;
					margin-right: 22rpx;
				}
			}
		}

		.setList {
			width: calc(100% - 60rpx);
			margin: 0 auto;
			padding: 0 16rpx 0 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-bottom: 30rpx;

			.setItem {
				width: 100%;
				height: 120rpx;
				border-bottom: 2rpx solid #eeeeee;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333333;
				font-size: 30rpx;

				&-left {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: bold;
				}

				&-right {
					display: flex;
					align-items: center;

					text {
						color: #999;
						font-size: 30rpx;
					}

					.right {
						width: 48rpx;
						height: 48rpx;
						// margin-top: 8rpx;
					}
				}

				.icon {
					width: 48rpx;
					max-height: 48rpx;
					display: block;
					margin-right: 20rpx;
				}

				&:nth-last-of-type(1) {
					border-bottom: 0;
				}
			}
		}
	}

	.showTotal {
		.box {
			width: 620rpx;
			height: 384rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			top: 300rpx;
			margin: auto;
			z-index: 10000;
			border-radius: 26rpx;

			&-image {
				width: 200rpx;
				position: absolute;
				top: -50rpx;
				left: 225rpx;
			}

			.show {
				height: 384rpx;
				padding-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: column;

				&-top {
					// width: 620rpx;
					margin-top: 120rpx;
					font-size: 36rpx;
					color: #333;
					font-weight: bold;
				}

				&-middle {
					font-size: 32rpx;
					color: #999;
				}

				&-button {
					width: 528rpx;
					line-height: 88rpx;
					text-align: center;
					color: #fff;
					border-radius: 44rpx;
				}
			}
		}

		.over {
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: 0.6;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
		}

		.button {
			width: 400rpx;
			height: 96rpx;
			background: linear-gradient(90deg, #f97c55 0%, #f44545 100%);
		}
	}
</style>