290 lines
8.2 KiB
Vue
290 lines
8.2 KiB
Vue
<template>
|
|
<div v-if="loading" class="ui-boundEnterprise">
|
|
<div>
|
|
<div class="ui-title font_48 color3 bold">绑定订单职责</div>
|
|
<div class="font_28 color3 ui-pl-32 ui-pb-32">当前可绑定职责：</div>
|
|
<div v-if="typeList && typeList.length > 0" class="ui-item-select">
|
|
<div v-for="(item, index) in typeList" :key="index" class="f-fbc ui-pb-36" @click="selectChange(item)">
|
|
<div class="f-fcl">
|
|
<img v-if="item.name == '主教练'" class="ui-duty-icon" src="https://image.fulllinkai.com/202305/06/103763ce22be9a1bd964080a6b45bdf0.png" alt="" />
|
|
<img v-else-if="item.name == '副教练'" class="ui-duty-icon" src="https://image.fulllinkai.com/202305/06/b73e57901f943fa31eec78b21c8e8eac.png" alt="" />
|
|
<img v-else-if="item.name == '客服'" class="ui-duty-icon" src="https://image.fulllinkai.com/202305/06/6a96db6ec2a77503b84e6213f9d905a6.png" alt="" />
|
|
<img v-else class="ui-duty-icon" src="https://image.fulllinkai.com/202305/06/697595eb7b086798bef1706563ce3b92.png" alt="" />
|
|
<div class="font_32 color3 ui-item-select-text">{{ item.name }}</div>
|
|
</div>
|
|
<div>
|
|
<img v-show="!item.state" class="ui-item-select-icon" src="https://image.fulllinkai.com/202306/25/ba1565f2cf6d59945ec6f522c8caaa5d.png" alt="" />
|
|
<img v-show="item.state" class="ui-item-select-icon" src="https://image.fulllinkai.com/202306/25/1c57dd3dd3d4062255c159d73a437b83.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="ui-btn f-fcc font_30 colorF bold" @click="saveRole">确认绑定</div>
|
|
<div class="font_24 color9 text-center">绑定后可使用该职责</div>
|
|
</div>
|
|
<div v-else>
|
|
<img class="ui-no-role-icon" src="https://image.fulllinkai.com/202306/07/247d8ae6b90334457d1b39129cd5c490.png" alt="" />
|
|
<div class="font_30 color9 text-center">暂无可绑定的职责</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="ui-skeleton">
|
|
<div class="f-fcl">
|
|
<div class="ui-skeleton-photo"></div>
|
|
<div>
|
|
<div class="ui-skeleton-name"></div>
|
|
<div class="ui-skeleton-name-v2"></div>
|
|
</div>
|
|
</div>
|
|
<div class="ui-skeleton-line"></div>
|
|
<div v-for="(item, index) in skeleton" :key="index" class="f-fcl">
|
|
<div class="ui-skeleton-item">{{ item }}</div>
|
|
<div class="ui-skeleton-item-v2"></div>
|
|
</div>
|
|
<div class="font_28 color9 text-center">-- 加载中 --</div>
|
|
</div>
|
|
<img class="ui-icon" src="https://image.fulllinkai.com/202306/26/05b70e1b55dfed082b28fda935653343.png" alt="" />
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { showToast } from 'vant';
|
|
import weChat from '@/utils/weChat';
|
|
import router from '@/router';
|
|
import { useUserStore } from '@/store/modules/user';
|
|
|
|
defineOptions({ name: 'BoundEnterprise' });
|
|
|
|
const userStore = useUserStore() as any;
|
|
const loading = ref(false);
|
|
const isBind = ref<any>(''); // 是否绑定企业微信
|
|
const isRole = ref<any>(''); // 群是否绑定职责
|
|
const isRoleIdList = ref<any[]>([]); // 选择跟群绑定的职责
|
|
const typeList = ref<any[]>([]);
|
|
const throttle = ref<any>(true);
|
|
const skeleton = ref<any[]>(['', '', '', '', '', '']);
|
|
|
|
// 获取是否绑定企业微信 is_bind: true, false. 是否绑定职责is_role: true, false. 可绑定的职责列表 role_list
|
|
const getState = () => {
|
|
weChat({ url: `/h5/work/${userStore.chatId}/group/orders/status`, hideLoading: true, method: 'get' })
|
|
.then((res) => {
|
|
const result = res.data;
|
|
userStore.weChatBindState = result.status;
|
|
userStore.chiefCoach = result.is_main_coach;
|
|
userStore.coach = result.is_coach;
|
|
userStore.service = result.is_customer;
|
|
isBind.value = result.is_bind;
|
|
isRole.value = result.is_role;
|
|
if (isRole.value) {
|
|
router.replace({
|
|
name: 'personalCenter',
|
|
});
|
|
return;
|
|
}
|
|
if (result.role_list && result.role_list.length > 0) {
|
|
result.role_list.forEach((item) => {
|
|
typeList.value.push({
|
|
id: item.id,
|
|
name: item.name,
|
|
state: 0,
|
|
});
|
|
});
|
|
}
|
|
loading.value = true;
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
// 为群绑定职责
|
|
const saveRole = () => {
|
|
if (throttle.value) {
|
|
let data = {
|
|
chat_id: userStore.chatId,
|
|
role_ids: isRoleIdList.value,
|
|
};
|
|
if (isRoleIdList.value.length === 0) {
|
|
showToast('请选择需要绑定的职责');
|
|
return;
|
|
}
|
|
throttle.value = false;
|
|
weChat({ url: `h5/order/bind/role`, data, method: 'post' })
|
|
.then((res) => {
|
|
let result = res.data;
|
|
console.log(result, '7777');
|
|
showToast('绑定成功');
|
|
setTimeout(() => {
|
|
throttle.value = true;
|
|
router.replace({
|
|
name: 'personalCenter',
|
|
});
|
|
}, 1000);
|
|
})
|
|
.catch((err) => {
|
|
throttle.value = true;
|
|
console.log(err);
|
|
});
|
|
}
|
|
};
|
|
|
|
const selectChange = (e) => {
|
|
console.log(e, '7777');
|
|
if (e.state === 0) {
|
|
isRoleIdList.value.push(e.id);
|
|
e.state = 1;
|
|
} else {
|
|
isRoleIdList.value = isRoleIdList.value.filter((id) => {
|
|
return id !== e.id;
|
|
});
|
|
e.state = 0;
|
|
}
|
|
console.log(isRoleIdList.value);
|
|
};
|
|
|
|
onMounted(() => {
|
|
let route = router.currentRoute.value.query;
|
|
console.log(route);
|
|
if (route.chat_id) {
|
|
userStore.chatId = route.chat_id;
|
|
}
|
|
userStore.serviceUserId = route.service_user_id;
|
|
getState();
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.ui-boundEnterprise {
|
|
background: #ffffff;
|
|
overflow-y: auto;
|
|
height: 100vh;
|
|
}
|
|
|
|
.ui-title {
|
|
padding: px2rem(120) px2rem(0) px2rem(70) px2rem(50);
|
|
}
|
|
|
|
.ui-item-select {
|
|
position: relative;
|
|
z-index: 99;
|
|
padding: 0 px2rem(30);
|
|
|
|
.ui-duty-icon {
|
|
width: px2rem(40);
|
|
height: px2rem(40);
|
|
display: block;
|
|
margin-right: px2rem(4);
|
|
}
|
|
|
|
.ui-item-select-icon {
|
|
width: px2rem(36);
|
|
height: px2rem(36);
|
|
display: block;
|
|
margin-right: px2rem(10);
|
|
}
|
|
|
|
.ui-item-select-text {
|
|
line-height: px2rem(40);
|
|
}
|
|
}
|
|
|
|
.ui-mobile {
|
|
position: relative;
|
|
z-index: 33;
|
|
margin: px2rem(0) px2rem(50);
|
|
border-bottom: px2rem(2) solid #d8d8d8;
|
|
|
|
.ui-mobile-text {
|
|
line-height: px2rem(44);
|
|
}
|
|
|
|
.ui-user-input {
|
|
width: px2rem(480);
|
|
font-size: px2rem(32);
|
|
padding: px2rem(24) px2rem(12);
|
|
border-radius: px2rem(16);
|
|
background: initial;
|
|
line-height: initial;
|
|
}
|
|
|
|
// 去除默认下划线
|
|
::v-deep(.van-cell:after) {
|
|
position: relative;
|
|
}
|
|
|
|
::v-deep(input::-webkit-input-placeholder) {
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.ui-no-role-icon {
|
|
width: px2rem(270);
|
|
height: px2rem(200);
|
|
display: block;
|
|
margin: px2rem(40) auto px2rem(20) auto;
|
|
}
|
|
|
|
.ui-btn {
|
|
position: relative;
|
|
z-index: 33;
|
|
width: px2rem(650);
|
|
height: px2rem(88);
|
|
background: #5ac7a0;
|
|
border-radius: px2rem(40);
|
|
margin: px2rem(100) auto px2rem(30) auto;
|
|
}
|
|
|
|
.ui-icon {
|
|
width: 100vw;
|
|
height: px2rem(946);
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.ui-skeleton {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: px2rem(60);
|
|
|
|
.ui-skeleton-photo {
|
|
width: px2rem(120);
|
|
height: px2rem(120);
|
|
border-radius: 50%;
|
|
background: #f5f5f5;
|
|
display: block;
|
|
margin-right: px2rem(40);
|
|
}
|
|
|
|
.ui-skeleton-name,
|
|
.ui-skeleton-name-v2 {
|
|
width: px2rem(160);
|
|
height: px2rem(30);
|
|
border-radius: px2rem(16);
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.ui-skeleton-name-v2 {
|
|
width: px2rem(240);
|
|
margin-top: px2rem(16);
|
|
}
|
|
|
|
.ui-skeleton-line {
|
|
width: 100%;
|
|
height: px2rem(2);
|
|
background: #f5f5f5;
|
|
margin: px2rem(30) 0 px2rem(60) 0;
|
|
}
|
|
|
|
.ui-skeleton-item,
|
|
.ui-skeleton-item-v2 {
|
|
width: px2rem(52);
|
|
height: px2rem(52);
|
|
border-radius: px2rem(26);
|
|
background: #f5f5f5;
|
|
margin-bottom: px2rem(60);
|
|
}
|
|
|
|
.ui-skeleton-item-v2 {
|
|
width: px2rem(480);
|
|
margin-left: px2rem(22);
|
|
}
|
|
}
|
|
</style>
|