486 lines
11 KiB
Vue
486 lines
11 KiB
Vue
<template>
|
||
<view class="container">
|
||
<custom-navbar title="添加员工" :leftImg="'/static/images/back.png'" :showUser="true"
|
||
backgroundColor="transparent" titleColor="#000" borderBottom="none">
|
||
<template #right>
|
||
<view class="navbar-right" @click="goRecord">
|
||
<image class="navbar-right-img" src="/static/images/icons/record.png"></image>
|
||
<view class="navbar-right-text">邀请记录</view>
|
||
</view>
|
||
</template>
|
||
</custom-navbar>
|
||
<searchBox placeholder="请输入员工手机号" class="searchBox" v-model="queryData.phone" bgClor="transparent" @confirm="search"
|
||
@search="search">
|
||
</searchBox>
|
||
<scroll-view :style="{ height:`calc(100vh - ${statusBarHeight + 200}rpx)`} ">
|
||
<view class="page-container" v-if="sryDetail && sryDetail.id">
|
||
<!-- 个人信息栏 -->
|
||
<view class="user-info">
|
||
<image class="avatar" :src="sryDetail.head_photo" mode="aspectFill"></image>
|
||
<view class="user-detail">
|
||
<view class="flex-row-center-between">
|
||
<text class="user-name">{{ sryDetail.name }}</text>
|
||
<view class="enter-btn flex-row-center" @click="goDetail">进入详情</view>
|
||
</view>
|
||
<view class="tags">
|
||
<text>擅长：{{ sryDetail.servers_kill_arr_text }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务项目列表 -->
|
||
<view class="service-list">
|
||
<!-- 营销中心区域 -->
|
||
<view class="marketing-center">
|
||
<view class="flex-row-center">
|
||
<view class="mc-line"></view>
|
||
<text class="mc-title">服务项目</text>
|
||
</view>
|
||
|
||
<view class="select-btn" @click="goServiceList">
|
||
<text>请选服务项目</text>
|
||
<image src="/static/images/icons/right_20_40.png" class="select-btn-img" />
|
||
</view>
|
||
</view>
|
||
<!-- 服务项目标题 -->
|
||
<view class="service-title"><text>您选择的服务项目：</text></view>
|
||
<view class="service-item" v-for="(item, idx) in mergeServiceList.slice(0, 10)" :key="idx">
|
||
<text class="item-index flex-row-center-center">{{ idx + 1 }}</text>
|
||
<view class="item-info">
|
||
<text class="item-name">{{ item.title }}（价格{{ item.server_price }}）</text>
|
||
</view>
|
||
<text class="item-duration">{{ item.server_time }}分钟</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="container-tip" v-if="sryDetail && sryDetail.id">
|
||
<view class="tip-title flex-row-center">
|
||
<image class="tip-icon" src="/static//images/icons/tip_icon.png"></image>温馨提示：
|
||
</view>
|
||
<view class="tip-text">
|
||
<text style="color: #e8101e">门店商家主动邀请入驻的</text>
|
||
<text>合作型服务从业者，需线下达成合作协议后，邀请员工入驻成为挂靠手艺人后，再进行添加操作。</text>
|
||
</view>
|
||
</view>
|
||
<view class="container-tip" v-if="!sryDetail || !sryDetail.id">
|
||
<view class="tip-title flex-row-center">
|
||
<image class="tip-icon" src="/static//images/icons/tip_icon.png"></image>温馨提示：
|
||
</view>
|
||
<view class="tip-text">
|
||
<text>门店商家主动邀请入驻的合作型服务从业者，需线下达成合作协议后，</text>
|
||
<text style="color: #e8101e">员工入驻成为门店手艺人后(搜索美融融手艺人)</text>
|
||
<text>，再进行添加操作。</text>
|
||
</view>
|
||
</view>
|
||
<view class="agreement-footer" @click="sjinvitesyr" v-if="sryDetail && sryDetail.id && sryDetail.bind_state!=1">
|
||
<view class="agreement-btn">邀请员工</view>
|
||
</view>
|
||
<!-- <view class="" style="height: 98rpx;background-color: aquamarine;"></view> -->
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "@/utils/request";
|
||
import searchBox from "./components/search-box.vue";
|
||
export default {
|
||
name: "addStaff",
|
||
components: {
|
||
searchBox,
|
||
},
|
||
data() {
|
||
return {
|
||
queryData: {
|
||
phone: "",
|
||
},
|
||
statusBarHeight:0,
|
||
isSubmit:false,
|
||
sryDetail: {},
|
||
serversList: {},
|
||
};
|
||
},
|
||
async onLoad(options) {
|
||
this.statusBarHeight = this.getRpxStatusBarHeight();
|
||
let type = 3;
|
||
let result = await request.post("/user/getuser", {
|
||
type,
|
||
});
|
||
this.userInfo = result.data;
|
||
this.queryData.sjid = this.userInfo.id;
|
||
await this.sjservers();
|
||
if (options.phone) {
|
||
this.queryData.phone = options.phone
|
||
this.search()
|
||
}
|
||
},
|
||
computed: {
|
||
mergeServiceList() {
|
||
// 1. 提取原始对象的所有子数组
|
||
let allSubArrays = Object.values(this.$store.state.sjServiceList);
|
||
// 2. 遍历每个子数组，过滤掉server_time>100的元素，再合并
|
||
return allSubArrays
|
||
.map((subArr) => {
|
||
// 过滤
|
||
return subArr.filter((item) => {
|
||
// 只保留is_choice为true的项目
|
||
return item.is_choice;
|
||
});
|
||
})
|
||
.flat(); // 扁平化合并所有过滤后的子数组
|
||
},
|
||
},
|
||
methods: {
|
||
goServiceList() {
|
||
uni.navigateTo({
|
||
url: "/pages/shop/staff/serviceList",
|
||
});
|
||
},
|
||
async search() {
|
||
await request.post("/sj/searchsyr", this.queryData).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$store.commit("setSjServiceList", this.serversList);
|
||
this.sryDetail = res.data;
|
||
if (this.sryDetail?.servers_kill_arr) {
|
||
this.sryDetail.servers_kill_arr_text =
|
||
this.sryDetail.servers_kill_arr.join("、");
|
||
}
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
async sjservers() {
|
||
await request
|
||
.post("/sj/sjservers", {
|
||
sjid: this.queryData.sjid
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
//将数据存在vuex里作为依据
|
||
this.serversList = res.data;
|
||
this.$store.commit("setSjServiceList", res.data);
|
||
}
|
||
});
|
||
},
|
||
sjinvitesyr() {
|
||
let form = {
|
||
sj_id: this.queryData.sjid,
|
||
syr_id: this.sryDetail.id,
|
||
service_data: this.mergeServiceList.map(item => item.id),
|
||
}
|
||
if(this.isSubmit){
|
||
return
|
||
}
|
||
this.isSubmit = true
|
||
request.post("/sj/sjinvitesyr", form).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showModal({
|
||
title: '成功',
|
||
content: '邀请成功，等待员工同意。',
|
||
showCancel: false,
|
||
success: () => {
|
||
uni.navigateTo({
|
||
url: `/pages/shop/staff/record`,
|
||
});
|
||
}
|
||
});
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
});
|
||
}
|
||
}).finally(()=>{
|
||
this.isSubmit = false
|
||
});
|
||
},
|
||
goDetail() {
|
||
uni.navigateTo({
|
||
url: `/pages/shop/staff/staffDetail?syrid=${this.sryDetail.id}`,
|
||
});
|
||
},
|
||
goRecord() {
|
||
uni.navigateTo({
|
||
url: "/pages/shop/staff/record",
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.container {
|
||
position: relative;
|
||
background-image: url("/static/images/background/bj2.png");
|
||
background-size: 100% auto;
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
|
||
.container-tip {
|
||
width: 710rpx;
|
||
height: 311rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
margin: 0 auto;
|
||
|
||
.tip-title {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding-top: 46rpx;
|
||
margin-left: 6rpx;
|
||
|
||
.tip-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.tip-text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 18rpx 24rpx 0 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.page-container {
|
||
padding: 0rpx 20rpx 0 20rpx;
|
||
|
||
// 个人信息样式
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 8px;
|
||
|
||
.avatar {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.user-detail {
|
||
flex: 1;
|
||
|
||
.user-name {
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
line-height: 50rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.enter-btn {
|
||
padding: 0 20rpx;
|
||
height: 50rpx;
|
||
border-radius: 25rpx;
|
||
border: 1rpx solid rgba(232, 16, 30, 0.28);
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #e8101e;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
|
||
.tags {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-top: 18rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
max-width: 500rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 服务列表样式
|
||
.service-list {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
// 营销中心样式
|
||
.marketing-center {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
|
||
.mc-line {
|
||
width: 6rpx;
|
||
height: 22rpx;
|
||
background: #e8101e;
|
||
border-radius: 4rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.mc-title {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.select-btn {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 32rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
|
||
.select-btn-img {
|
||
width: 9rpx;
|
||
height: 18rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 服务项目标题
|
||
.service-title {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #5b5b5b;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding-bottom: 10rpx;
|
||
border-bottom: 1rpx solid #f1f1f1;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.service-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 30rpx;
|
||
|
||
.item-index {
|
||
font-weight: 500;
|
||
font-size: 18rpx;
|
||
color: #e8101e;
|
||
text-align: left;
|
||
font-style: normal;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
background: #fdf0eb;
|
||
border-radius: 50%;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.item-info {
|
||
flex: 1;
|
||
|
||
.item-name {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
max-width: 500rpx;
|
||
}
|
||
}
|
||
|
||
.item-duration {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #8a8a8a;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.agreement-footer {
|
||
padding: 20rpx 20rpx 50rpx 20rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #ffffff;
|
||
.agreement-btn {
|
||
width: 710rpx;
|
||
height: 98rpx;
|
||
background: #e8101e;
|
||
border-radius: 49rpx;
|
||
font-weight: 400;
|
||
font-size: 38rpx;
|
||
color: #ffffff;
|
||
line-height: 53rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
::v-deep .right-area {
|
||
width: 120rpx !important;
|
||
height: auto !important;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.navbar-right {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: column;
|
||
align-content: center;
|
||
|
||
.navbar-right-img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin: 0 auto 4rpx auto;
|
||
}
|
||
|
||
.navbar-right-text {
|
||
font-weight: 400;
|
||
font-size: 16rpx;
|
||
color: #333333;
|
||
line-height: 22rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.searchBox{
|
||
padding: 18rpx 30rpx 30rpx 30rpx;
|
||
}
|
||
|
||
::v-deep .navbar-content .title{
|
||
margin-left: 20rpx!important;
|
||
}
|
||
</style> |