mrr.sj.front/pages/shop/staff/addStaff.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 scroll-y  :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: #FF4767">门店商家主动邀请入驻的</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: #FF4767">员工入驻成为门店手艺人后(搜索美融融手艺人)</text>
					<text>，再进行添加操作。</text>
				</view>
			</view>
			
			<view class="" style="height: 200rpx;"></view>
			<view class="agreement-footer" @click="sjinvitesyr" v-if="sryDetail && sryDetail.id && sryDetail.bind_state!=1">
				<view class="agreement-btn">邀请员工</view>
			</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: #FF4767;
					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: #FF4767;
					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: #FF4767;
					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: #FF4767;
			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>