132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="hiddenPopup">
|
||
|
|
<view class="order-box">
|
||
|
|
<view class="avatar-box">
|
||
|
|
<view class="title">切换店员</view>
|
||
|
|
<view class="close-span" @click="hiddenPopup">
|
||
|
|
<u-icon name="close-circle" color="var(--ui-BG-Main)" size="50"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<scroll-view style="height: 700rpx;" scroll-y>
|
||
|
|
<view class="page-box">
|
||
|
|
<view @click="change(item)" class="item" :key="item.id" v-for="(item,index) in clerkList">
|
||
|
|
<view class="avatar-span">
|
||
|
|
<u-avatar :src="item.avatar"></u-avatar>
|
||
|
|
<view class="nickname">{{item.nickname}}</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<u-icon size="44" v-if="clerk.id == item.id" name="checkmark-circle-fill" color="var(--ui-BG-Main)"></u-icon>
|
||
|
|
<u-icon size="44" v-else name="checkmark-circle" color="var(--ui-BG-Main)"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</tui-bottom-popup>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import tuiBottomPopup from "@/components/thorui/tui-bottom-popup/tui-bottom-popup.vue"
|
||
|
|
import RewardApi from '@/sheep/api/worker/reward';
|
||
|
|
import ClerkApi from '@/sheep/api/worker/clerk';
|
||
|
|
import sheep from '@/sheep';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
tuiBottomPopup,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
popupShow: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
clerkList() {
|
||
|
|
return sheep.$store('sys').clerkList;
|
||
|
|
},
|
||
|
|
clerk() {
|
||
|
|
return sheep.$store('sys').currentClerk;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//调用此方法显示弹层
|
||
|
|
showPopup() {
|
||
|
|
ClerkApi.getClerkList().then((res) => {
|
||
|
|
if(res.data[0]){
|
||
|
|
sheep.$store('sys').setCurrentClerk(res.data[0]);
|
||
|
|
sheep.$store('sys').setClerkList(res.data);
|
||
|
|
}else{
|
||
|
|
sheep.$store('sys').setCurrentClerk({
|
||
|
|
id: -1,
|
||
|
|
avatar: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/aa361225849eeb86428e1a3d647d6f7b94354e74de212403bb968e6ad85e79b3.jpeg',
|
||
|
|
});
|
||
|
|
sheep.$store('sys').setClerkList([]);
|
||
|
|
}
|
||
|
|
this.popupShow = true;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
hiddenPopup() {
|
||
|
|
this.popupShow = false;
|
||
|
|
},
|
||
|
|
change(e) {
|
||
|
|
sheep.$store('sys').setCurrentClerk(e);
|
||
|
|
this.hiddenPopup();
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.avatar-box {
|
||
|
|
padding: 10px 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
height: 70rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close-span {
|
||
|
|
position: absolute;
|
||
|
|
right: 5px;
|
||
|
|
top: 5px;
|
||
|
|
width: 70rpx;
|
||
|
|
height: 70rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-box {
|
||
|
|
padding: 15px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
|
||
|
|
.avatar-span {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.nickname {
|
||
|
|
font-size: 24rpx;
|
||
|
|
margin-left: 14rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|