juliancheng/pages/mine/mine.vue

<template>
	<view class="main">
		<view class="top">
			<!-- <image src="../../static/mine/topbg.png" class="bg" mode=""/> -->
			<view class="bg"></view>
			<view class="infobox">
				<image :src="user.avatar == null || '' ? '../../static/tuijian/head.png' : user.avatar" mode="" />
				<view class="name" v-if="hasLogin">{{ user.realname }}</view>
				<view v-else class="name" @click="loginBtn">{{ '点击登录' }}</view>
			</view>
		</view>
		<view class="dans">
			<image class="bg" src="../../static/mine/dansbg.png" mode="" style="height: 202rpx;}"></image>
			<view class="status" v-for="(item, index) in status" :key="index" @click="orderlist(index)">
				<view class="status-img">
					<image :src="imgHost+item.img" mode="" class="status-img-item" />
				</view>
				<view class="status-name">{{ item.name }}</view>
			</view>
		</view>
		<view class="main-box">
			<view class="mine-box">
				<button class="tab" v-for="(item, index) in tabs" :open-type="index == 4 ? 'contact' : ''" :key="index" :class="index == 1 || index == 3 || index == 5 ? 'zuo' : ''"
				 :style="index == 4 || index == 5 ? 'border-bottom:none;' : ''" @contact="contact" @click="getthis(index)">
					<view class="tab-img">
						<image class="img-item" :src="imgHost+item.img" mode=""></image>
					</view>
					<view class="tab-name">
						<!-- {{item.name == '在线客服'? '': item.name}} -->
						{{ item.name }}
						<!-- <button class="button" open-type="contact" v-if="item.name == '在线客服'"@contact="contact">{{item.name}}</button> -->
					</view>
				</button>
			</view>
		</view>
		<!-- 获取微信信息弹窗框 -->
		<view class="cu-modal" :class="modalName == 'WxModal' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">您还未登录</view>
					<view class="action" @tap="modalName = ''">
						<text class="cuIcon-close yellow" />
					</view>
				</view>
				<view class="padding-xl">
					<view class="top-title" style="">
						<!-- <text class="top-title1">您还未登录</text></br> -->
						<text class="top-title1">请先登录再进行操作</text>
					</view>
					<view class="flex justify-around">
						<button type="primary" @tap="modalName = ''" class="cu-btn round greyBg lg">暂不登录</button>
						<button type="primary" @click="gotologin" class="cu-btn round yellowBg lg" hover-class="btn-hover">立刻登录</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 清除微信缓存弹窗框 -->
		<view class="cu-modal" :class="modalName == 'WxHCModal' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">退出登录</view>
					<view class="action" @tap="modalName = ''"><text class="cuIcon-close yellow" /></view>
				</view>
				<view class="padding-xl">
					<view class="flex justify-around">
						<button type="primary" @tap="modalName = ''" class="cu-btn round greyBg lg">暂不退出</button>
						<button type="primary" @click="clearCache" class="cu-btn round yellowBg lg" hover-class="btn-hover">立刻退出</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 联系我们 -->
		<!-- <view class="cu-modal" :class="modalName == 'phoneme' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">联系我们</view>
					<view class="action" @tap="modalName = ''"><text class="cuIcon-close yellow" /></view>
				</view>
				<view class="padding-xl">
					<view class="flex align-start flex-direction">
						<view class="margin-bottom-sm flex align-center">
							<text class="cuIcon-mail text-gray" style="font-size: 32rpx;"></text>
							<text class="margin-left-sm">541417720@qq.com</text>
							<button class="text-sm margin-left-sm" @click="copymail" style="border-color:rgb(251, 198, 0);color: rgb(251, 198, 0);border: 1rpx solid rgb(251, 198, 0);">复制</button>
						</view>
						<view class="flex align-center">
							<text class="cuIcon-phone text-gray" style="font-size: 32rpx;"></text>
							<text class="margin-left-sm">13676933748</text>
							<button class="text-sm margin-left-sm" @click="copyphone" style="border-color:rgb(251, 198, 0);color: rgb(251, 198, 0);border: 1rpx solid rgb(251, 198, 0);">复制</button>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	var user = require('../../common/user.js');
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy.js'
	export default {
		data() {
			return {
				contactIphone: '',
				modalName: null, //公告框状态
				isShow: 0,
				// status: [{
				// 		name: '全部',
				// 		img: '/static/mine/shouhou.png'
				// 	},
				// 	{
				// 		name: '评估中',
				// 		img: '/static/mine/pinggu.png'
				// 	},
				// 	{
				// 		name: '待付款',
				// 		img: '/static/mine/daifu.png'
				// 	},
				// 	{
				// 		name: '进行中',
				// 		img: '/static/mine/jinxing.png'
				// 	},
				// 	{
				// 		name: '已完成',
				// 		img: '/static/mine/wancheng.png'
				// 	}
				// ],
				status: [{
						name: '全部',
						img: '/static/mine/shouhou.png'
					},
					{
						name: '评估中',
						img: '/static/mine/pinggu.png'
					},
					{
						name: '修复中',
						img: '/static/mine/daifu.png'
					},
					{
						name: '已完成',
						img: '/static/mine/jinxing.png'
					},
					{
						name: '已取消',
						img: '/static/mine/wancheng.png'
					}
				],
				tabs: [{
						img: '/static/mine/info.png',
						name: '个人信息'
					},
					{
						img: '/static/mine/shoucang.png',
						name: '我的收藏'
					},
					{
						img: '/static/mine/tousu.png',
						name: '投诉建议'
					},
					// {
					// 	img: '/static/mine/kefu.png',
					// 	name: '在线客服'
					// },
					{
						img: '/static/mine/call.png',
						name: '联系我们'
					},
					{
						img: '/static/mine/qingchu.png',
						name: '关于我们'
					},
					// {
					// 	img: '/static/mine/qingchu.png',
					// 	name: '退出登录'
					// },
				],
				imgHost: ''
			};
		},
		onLoad() {
			this.imgHost = this.$imgHost
		},
		onShow() {
			this.getUser(true);
		},
		computed: {
			...mapState(['user']),
			...mapGetters({
				hasLogin: 'verifyJwt'
			})
		},
		mounted() {
			this.configData();
		},
		methods: {
			...mapActions({
				getUser: 'getUser' // 将 `this.getUser()` 映射为 `this.$store.dispatch('getUser')`
			}),
			...mapMutations(['logout', 'setUser']),
			// 清除缓存
			clearCache: function() {
				let that = this;
				uni.showLoading({
					title: '清除中...'
				});
				that.modalName = '';
				setTimeout(function() {
					that.logout();
					uni.clearStorage();
					uni.hideLoading();
				}, 2000);
			},
			copyphone() {
				const result = h5Copy('13676933748')
				if (result === false) {
					uni.showToast({
						title: '复制失败',
						icon: "none"
					})
				} else {
					this.modalName = ''
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				}
			},
			copymail() {
				const result = h5Copy('541417720@qq.com')
				if (result === false) {
					uni.showToast({
						title: '复制失败',
						icon: "none"
					})
				} else {
					this.modalName = ''
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				}
			},
			loginBtn: function() {
				uni.navigateTo({
					url: "../login/login",
					fail: (err) => {
						console.log(err)
					}
				})
			},
			gotologin() {
				this.modalName = '';
				uni.navigateTo({
					url: "../login/login",
					fail: (err) => {
						console.log(err)
					}
				})
			},
			// wxLogin: function(e) {
			// 	if (e.detail.userInfo == undefined) {
			// 		uni.showToast({
			// 			title: '微信登录失败'
			// 		});
			// 		return;
			// 	}
			// 	this.modalName = '';
			// 	user.loginByWeixin(e.detail.userInfo)
			// 		.then(res => {
			// 			this.getUser(true);
			// 		})
			// 		.catch(res => {
			// 			uni.showToast({
			// 				title: '微信登录失败'
			// 			});
			// 		});
			// },
			orderlist(e) {
				if (this.$isShow) {
					uni.showModal({
						title: "提示",
						content: "系统维护请等待通知",
						showCancel: false,
						success: (res) => {}
					})
					return false
				}
				if (this.isShow == 1) {
					if (!this.hasLogin) {
						uni.navigateTo({
							url: "../login/login",
							fail: (err) => {
								console.log(err)
							}
						})
						return;
					}
					console.log(e);
					uni.navigateTo({
						url: '/pages/mine/order?index=' + e
					});
				}
			},
			getthis(e) {
				if (this.$isShow) {
					uni.showModal({
						title: "提示",
						content: "系统维护请等待通知",
						showCancel: false,
						success: (res) => {}
					})
					return false
				}
				if (!this.hasLogin && e !== 2) {
					uni.navigateTo({
						url: "../login/login",
						fail: (err) => {
							console.log(err)
						}
					})
					return;
				}

				if (e == 0) {
					uni.navigateTo({
						url: '/pages/mine/info'
					});
				} else if (e == 1) {
					uni.navigateTo({
						url: '/pages/mine/save'
					});
				} else if (e == 2) {
					uni.navigateTo({
						url: '/pages/mine/tousu'
					});
				} else if (e == 3) {
					uni.makePhoneCall({
						phoneNumber: this.contactIphone
					})
				} else if (e == 4) {
					uni.navigateTo({
						url: '/pages/mine/about'
					});
				} else if (e == 5) {
					this.modalName = 'WxHCModal';
				}
			},
			contact(e) {
				console.log(e);
			},
			// 加载公共配置
			configData: async function() {
				let res = await this.$request.post('/api/SystemConfig/getSysteConfig');
				console.log(res.data);
				if (res.code == 200) {
					this.contactIphone = res.data.phone;
					this.isShow = res.data.is_show
				}
			}
		}
	};
</script>

<style>
	page {
		width: 100%;
		background: #fff;
	}

	.main {
		width: 100%;
		height: auto;

		background: #fff;
	}

	.top {
		width: 100%;
		height: 170rpx;
		position: relative;
		padding-top: 5vw;

	}

	.top .bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		height: 480rpx;
		background-color: #FBB929;
	}

	.top .infobox {
		width: 90vw;
		height: 250rpx;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		/* background: #ffd362; */
		margin: 0 5vw;
		position: absolute;
		display: flex;
		/* background-image: url('~@/static/mine/topbg2.png'); */
		background-size: cover;
		flex-direction: column;
		align-items: center;
		top: 120rpx;
	}

	.dans {
		width: 86vw;
		height: 120px;
		display: flex;
		justify-content: space-around;
		/* background: #fff; */
		border-radius: 8px;
		margin: 24vw 7vw 0 7vw;
		position: relative;
		z-index: 3;
		display: flex;
		justify-content: cneter;
		align-items: center;
	}

	.dans .bg {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
	}

	.dans .status {
		width: 15vw;
		height: 15vw;
	}

	.status .status-img {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.status .status-img .status-img-item {
		width: 36rpx;
		height: 36rpx;
		/* margin: 18px calc( 6.5vw - 13px ) 9px calc( 6.5vw - 10px ); */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.status .status-name {
		width: 100%;
		height: 30rpx;
		line-height: 10px;
		font-size: 20rpx;
		font-weight: 300;
		font-family: PingFangSC-Regular, sans-serif;
		text-align: center;
		color: #555864;
	}

	.infobox image {
		width: 70px;
		height: 70px;
		border-radius: 60px;
		background: #eee;
		/* margin: 25px; */
		margin-top: 5px;
	}

	.infobox .name {
		width: calc(90vw - 150px);
		height: 40px;
		/* line-height: 40px; */
		/* margin: 40px 0; */
		font-size: 18px;
		color: #fff;
		text-align: center;
		background: transparent;
		padding: 0;
		line-height: 40px;
	}

	.infobox .name::after {
		border: none;
		border-radius: 0;
	}

	.main-box {
		width: 100vw;
		/* height: auto; */
		/* height: 447rpx; */
		background: #fff;
		/* padding: 5vw 0; */
		/* margin-top: 10px; */
	}

	.main-box .mine-box {
		/* width: 90vw; */
		/* height: 180px; */
		/* display: flex; */
		/* flex-wrap: wrap; */
		/* margin: 0 5vw; */
	}

	.mine-box .tab {
		/* width: 49.7%; */
		height: 130rpx;
		display: flex;
		/* justify-content: center; */
		align-items: center;
		border-bottom: 1px solid #eee;
		margin: 0;
		padding: 0;
		color: #555864;
		background: #fff;
		border-radius: 0;
		padding-left: 60rpx;
	}

	.tab::after {
		border: none;
		border-radius: 0;
	}

	.tab .tab-img {
		height: 48rpx;
		line-height: 48rpx;
	}

	.tab .tab-img .img-item {
		width: 48rpx;
		height: 48rpx;
		/* margin: 18px 10px; */
	}

	.tab .tab-name {
		width: 60%;
		height: 48rpx;
		line-height: 48rpx;
		text-align: left;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, sans-serif;
		color: #555864;
		padding-left: 20rpx;
		/* margin: 20px 0; */
	}

	.mine-box .xia {
		border-bottom: none;
	}

	.mine-box .zuo {
		border-left: 1px solid #eee;
	}

	.yellow {
		color: #f5cc57;
	}

	.yellowBg {
		background: #f5cc57 !important;
	}

	.greyBg {
		background: grey !important;
	}

	.top-title {
		margin-bottom: 15px;
	}

	.top-title .top-title1 {
		font-size: 19px;
		color: #000000;
		margin-top: 10px;
	}

	.top-title .top-title2 {
		font-size: 13px;
		color: #999;
	}
</style>