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">{{ sryDisplayName }}</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("/sj/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: {
		sryDisplayName() {
			return this.sryDetail.nick_name || this.sryDetail.name || "";
		},
		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>