Huanyuyuehui/pages/chat/customer_login/index.vue

<template>
	<view :style="viewColor">
		<view class="customerCount">
			<view class="title">选择登录店铺</view>
			<view class="store_count">
				<scroll-view scroll-y="true" show-scrollbar="false">
					<view v-for="(item, index) in list" class="item">
						<view class="info" @click="login(item)">
							<image class="image" :src='item.merchant.mer_avatar' ></image>
							<view class="text">
								<view class="name">{{item.merchant.mer_name}}</view>
								<view class="desc">{{item.account}}</view>
							</view>
						</view>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</scroll-view>
			</view>
			<view class="picture-group">
			<view class="picture"></view>
			</view>
		</view>
		<view v-if="loaded && !list.length">
			<view class="empty">
				<image class="img" src="../static/images/noPermission.png"></image>
				<view class="title">暂无权限</view>
				<view class="intr">抱歉，您还没有登录权限哦！</view>
				<navigator class="btn" open-type="switchTab" url="/pages/index/index">返回首页</navigator>
			</view>
		</view>
		<view class="success" v-if="isShowbox">
			<view class="bg"></view>
			<view class="con">
				<image :src="domain+'/static/diy/success'+keyColor+'.png'" mode=""></image>
				<view class="text">登录成功</view>
				<view class="btn" @click="close">我知道了</view>
			</view>
		</view>
	</view>
</template>
<script>
	 
	import {
		getStoreList,
		serviceLogin
	} from '@/api/user.js';
	import {
		mapGetters
	} from "vuex";
	import { HTTP_REQUEST_URL } from '@/config/app';
	export default {
		name: "CustomerLogin",
		computed: mapGetters(['viewColor', 'keyColor']),
		components:{
			
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				list: [],
				isShowbox: false,
				key:'',
				loaded: false,
			};
		},
		onLoad(options) {
			this.key = options.key
			this.loaded = !this.key
			!this.loaded && this.getList()
		},
		onShow(option) {
				
		},
		onHide(){  
		     
		},
		onUnload() {
			
		},
		methods: {
			close(){
				this.isShowbox = false;
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			getList() {		
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getStoreList().then(res=>{
					uni.hideLoading()
					this.loaded = true;
					this.list = res.data;
				})
			},
			login(item){
				uni.showLoading({
					title: '授权中',
					mask: true
				})
				serviceLogin(this.key, {service_id:item.service_id}).then(res=>{
					uni.hideLoading()
					this.isShowbox = true
				}).catch(err=>{
					uni.hideLoading()
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			}
		},	
	};
</script>
<style lang="scss">
	page{
		background-color: #fff;
		height: 100%;
	}
	.customerCount{
		.title{
			padding: 60rpx 40rpx 50rpx;
			color: #282828;
			font-size: 36rpx;
			font-weight: bold;
			position: fixed;
			top: 0;
			width: 100%;
			background-color: #fff;
			z-index: 2;
		}
		.store_count{
			margin-top: 160rpx;
			height: 100%;
			margin-bottom: 400rpx;
			scroll-view{
				height: 100%;
			}
			.item{
				border-top: 1px solid #E5E5E5;
				padding: 21rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.info{
					width: 500rpx;
					display: flex;
					align-items: center;
					.image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 100%;
					}
					.text{
						margin-left: 20rpx;
						.name{
							color: #282828;
							font-size: 30rpx;
						}
						.desc{
							color: #666666;
							font-size: 26rpx;
							margin-top: 10rpx;
						}
					}
				}
				.iconfont{
					font-size: 30rpx;
					color: #999999;
				}
			}
			
		}
		.picture-group{
			position: fixed;
			display: flex;
			justify-content: center;
			bottom: 0;
			background-color: #fff;
			width: 100%;
		}
		.picture{
			width: 650rpx;
			height: 390rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABRQAAAMQCAMAAABheRn2AAAC+lBMVEUAAAD/ySj///93vvVHpO4YYr5DpXA0OUw1jlze9fn////////+////////bEVmtuz+/v7/////y7z////////w9vz/////1MX////u7u7/////////xqr////////8/fz////+////u5rthqP////////u5ub9//////+azvb////+///6/v739PQ6l8X///9Vre7////q8fqPyPUyh1YeZsCUy/Y8mWb///////8+n2r///+uxeL///7////0+f0sdMjX5fX17Oz////////U0tKi0fcUW6////////8NUpkvglE4k2H+w6b8szf/z0Ire0283/is1/eOrtwrdWdAQlTi5Od3vvXe9vn///4mb0RTrO9GpfASV6P/+fATdl5Dfcj/tJAngIT/yCZcj830yb0haD46i9r8rq3b9Pr/0lXB0uf3xzBwu/UKTo12vvV2vfWCw/UodEhcrO1FpO53u/Lc29tyvPV3vfX/ySf/4Yf/89zwt5/d9vkdZb8+Q1X7vK//yCfYsKM6mWdBmeIcZcB3vPT94dsngVpTUWD/78D/2m3/447/6KRJqHxCpnD/tht9bXR5u/Ilglybz/e/u2u/1O7/yib+ySfM5/vkvbXuh6MiaMD2+f1cm37dkbB3vfTM4e4hf1xnYGs1jlt2vvVCpXF3vvV2vvVbn+GUfX7/4YhTVmf/oVj/3nqpjotCpXH/gF40jVxMqZm1usPGn4ra7vPDw8kfZsDd7/gdYDi/o5/tiaSrxug0jVsXYb7/+O02can/a0W/vcq+3/hHSl1maXn/yCb/yCfuiKTkpIuz2vn/m4CZm67/ZTxlrpVptdGAvqlMg8qg0ML9xyZcsLX/2806Tm0Tdl//ZDtbh7G84Nljm9ijwOL/ZDvuhqNtdIU6kYKd0PT1xr3/aUGyr7qow+ODh5HzuMmSnHT+4NgzN0yHipb/tj23lLv/yo9Nhs5OnI0ng27/SRlLlWZsl23/zLwnTIT/ySdGpfBGZ5HNbGDXuUT8r0vIsthdAAAA/nRSTlMA5ubm5ubm5ubmJBMZHubmCyvmenUGb+aA5lxj5mlV5Ycx5uaOlOY3T+ZEPUvmDprmnuXm5uTm5qKw5rrmpsLm5ubmtazm5uaoy+bm5uYW3+bm5uYf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
		}
	}
	.empty{
		text-align: center;
		margin-top: 300rpx;
		.img{
			width: 414rpx;
			height: 305rpx;
		}
		.title{
			color: #282828;
			font-size: 28rpx;
			font-weight: bold;
		}
		.intr{
			font-size: 24rpx;
			color: #999999;
			margin-top: 14rpx;
		}
		.btn{
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: 1rpx solid var(--view-theme);
			text-align: center;
			border-radius: 40rpx;
			margin: 44rpx auto 0;
			color: var(--view-theme);
		}
	}
	.success {
		z-index: 10;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .5);
		}
	
		.con {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 500rpx;
			height: 540rpx;
			background: #fff;
			border-radius: 10rpx;
			font-size: 34rpx;
			color: #282828;
	
			image {
				width: 290rpx;
				height: 224rpx;
			}
			.text{
				color: #282828;
				font-size: 36rpx;
				margin-top: 36rpx;
				font-weight: bold;
			}
			.btn {
				width: 340rpx;
				height: 90rpx;
				line-height: 90rpx;
				margin-top: 38rpx;
				text-align: center;
				color: #fff;
				background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
				border-radius: 45rpx;
			}
		}
	}
</style>