hjt_erdao_WeChatApplet/pages/merchant/home/index.vue

<template>
	<view class="main main-bg shadow">
		<view class="home-header header-long-bg">
			<view class="header-text font-forty font-color1">{{ list.shopsName ? list.shopsName : '' }}</view>
			<view class="view">
				<view class="view-data">
					<view class="quit font-color2 font-twenty" @click="handleQuit">退出登录</view>
					<view class="one">
						<view class="name font-color3 font-thirty-two">{{ list.shopsName ? list.shopsName : '' }}</view>
						<view class="phone font-color5 font-twenty-two">商铺电话: {{ list.shopsTel ? list.shopsTel : '无' }}</view>
					</view>
					<view class="address font-twenty-two font-color4">地址: {{ list.shopsAddress ? list.shopsAddress : '' }}</view>
					<image class="img" :src="image(list.shopsPic)"></image>
					<view class="content font-color2 font-twenty-four">店铺简介: {{ list.shopsIntroduce ? list.shopsIntroduce : '' }}</view>
				</view>
				<view class="footer">
					<view class="left font-color1 font-thirty header-long-bg" @click="gotoCode">结算</view>
					<view class="right font-color2 font-thirty" @click="gotoModify">修改店铺信息</view>
				</view>
				<view class="footer">
					<view class="left font-color1 font-thirty header-long-bg" @click="gotoShops(list.shopsId)">店铺审核详情</view>
					<view class="right font-color2 font-thirty" @click="goto('/pages/merchant/examine/goods/index')">商品审核详情</view>
				</view>
				<!-- <view class="footer">
					<view class="left font-color1 font-thirty header-long-bg" @click="goto('/pages/merchant/home/record')">优惠记录</view>
				</view> -->
			</view>
		</view>
		<u-tabbar :list="tabBarList" :active-color="activeColor" :inactive-color="inactiveColor"
					:border-top="borderTop"></u-tabbar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import server from "@/api/index";
	import http from '@/common/http.js'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				borderTop: false,
				inactiveColor: '#ccc',
				activeColor: '#2E4F1C',
				list: {},
				userInfo:{}
			}
		},
		computed: {
			...mapGetters([
				'tabBarList',
				'role'
			])
		},
		methods:{
			show(){
				console.log('show???')
				this.userInfo = uni.getStorageSync('userInfo');
				this.getListFn();
			},
			image(e) {
				return http.webUrl + e
			},
			getListFn(){
				server.getYongJunDetails(this.userInfo.nickName).then(res =>{
					if(res){
						this.list = res
					}else{
						this.list = {}
					}
				})
			},
			handleQuit(){
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '确定退出登录吗?',
				    success: function (res) {
				        if (res.confirm) {
							uni.removeStorage({
							    key: 'userInfo',
							    success: function (res) {
									uni.removeStorage({
										key: 'role',
									});
									uni.removeStorage({
										key: 'token',
									    success: function (res) {
											uni.reLaunch({
											    url: '/pages/index/index'
											});
									    }
									});
							    }
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			gotoShops(id){
				uni.navigateTo({
					url: '/pages/merchant/examine/shops/merchantExamine?id=' + id
				})
			},
			goto(url){
				uni.navigateTo({
					url
				})
			},
			gotoCode(){
				if(this.userInfo.status !== '2'){
					this.$refs.uToast.show({
						title: '店铺暂未认证!',
						type: 'default',
					})
				}else{
					let _this = this;
					uni.navigateTo({
						url: '/pages/merchant/home/code?id=' + _this.list.id + '&name=' + _this.list.shopsName + '&img=' + _this.list.shopsPic
					})
					// uni.navigateTo({
					// 	url: '/pages/merchant/home/code'
					// })
				}
			},
			gotoModify(){
				uni.navigateTo({
					url: '/pages/merchant/home/modify?id=' + this.list.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: auto;
		min-height: 100vh;
		.home-header{
			width: 100%;
			height: 400rpx;
			border-bottom-left-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			padding-top: 84rpx;
			padding-left: 30rpx;
			position: relative;
			.header-text{
				height: 96rpx;
				line-height: 96rpx;
			}
			.view{
				position: absolute;
				top: 180rpx;
				left: 30rpx;
				width: calc(100% - 60rpx);
				height: auto;
				border-radius: 24rpx;
				.view-data{
					width: 100%;
					height: auto;
					background: #FFFFFF;
					border-radius: 8rpx;
					padding: 30rpx;
					position: relative;
					.quit{
						position: absolute;
						height: 50rpx;
						line-height: 50rpx;
						top: 25rpx;
						right: 30rpx;
						width: 150rpx;
						text-align: center;
						border-radius: 25rpx;
						border: 1rpx solid #2E4F1C;
					}
					.one{
						margin-top: 30rpx;
						display: flex;
						justify-content: space-between;
						height: 96rpx;
						line-height: 96rpx;
						overflow: hidden;
						.name{
							letter-spacing: 2rpx;
							width: 50%;
						}
						.phone{
							width: 50%;
							text-align: right;
						}
					}
					.img{
						width: 100%;
						height: 420rpx;
						margin: 30rpx 0;
					}
					.content{
						opacity: 1;
						line-height: 40rpx;
					}
					.text{
						height: 100rpx;
						line-height: 100rpx;
					}
				}
				.footer{
					width: 100%;
					height: 96rpx;
					margin-top: 60rpx;
					display: flex;
					justify-content: space-between;
					.left{
						width: calc(50% - 15rpx);
						height: 96rpx;
						line-height: 96rpx;
						border-radius: 48rpx;
						text-align: center;
						letter-spacing: 2rpx;
					}
					.right{
						width: calc(50% - 15rpx);
						height: 96rpx;
						line-height: 96rpx;
						border-radius: 48rpx;
						text-align: center;
						letter-spacing: 2rpx;
						border: 2rpx solid #2E4F1C;
					}
				}
			}
		}
	}
</style>