shop-applet/pages/chat/customer_login/index.vue

284 lines
74 KiB
Vue
Raw Normal View History

2023-09-20 18:16:59 +08:00
<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>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
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>