mrr.sj.front/pages/shop/staff/manage.vue

<template>
	<view class="container">
		<custom-navbar title="员工管理" :leftImg="'/static/images/whiteBack.png'" :showUser="true"
			backgroundColor="linear-gradient( 134deg, #F52540 0%, #FF4767 100%)"
			headleSrc="/static/images/recruit/guide.png" :showHeadle="false" titleColor="#fff" borderBottom="none"
			@onHeadleClick="openPop"></custom-navbar>
		<searchBox placeholder="手艺人名字/手机号" v-model="queryData.nameorphone" :showAdd="true" @confirm="search"
			@search="search" @add="goAddStaff">
		</searchBox>

		<!-- Tab 内容区域 -->
		<div class="tab-nav">
			<div v-for="tab in tabs" :key="tab.id" class="tab-item" :class="{ active: queryData.state === tab.id }"
				@click="switchTab(tab.id)">
				{{ tab.name }}
			</div>
		</div>

		<CommonList ref="groupRef" apiUrl="/sj/sjstafflist"
			:listScrollHeight="`calc(100vh - ${statusBarHeight + 350}rpx)`">
			<template #listData="{ list }">
				<view class="scoll-lists">
					<view class="list-item" v-for="(item, index) in list" :key="index" @click="goDetail(item)"
						v-if="item.syr">
						<view class="item-left">
							<image :src="item.syr.head_photo" class="item-left-img" mode="aspectFill"></image>
							<view class="item-left-tab flex-row-center-center" :class="{ noTab: item.state == 2 }">{{
								typName(item.state) }}</view>
						</view>
						<view class="item-right">
							<view class="item-right-text1 flex-row-center-between">
								<text>{{ item.syr.name }}</text>

								<view class="switch-box" @click.stop="handleSwitchChange(item)"
									:class="{ disswitch: item.sj_state != 1 }" v-if="item.state == 1">
									<text class="switch-text" v-if="item.sj_state == 1">接单</text>
									<view class="switch-yuan"></view>
									<text class="switch-text" v-if="item.sj_state != 1">不接单</text>
								</view>
							</view>
							<view class="item-right-text2">绑定时间: {{ item.bind_time }}</view>
							<view class="item-right-text3">
								<text>分配项目</text>
								<image src="/static/images/icons/right_gray8.png" class="item-right-text3-icon"></image>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 空数据状态 -->
			<template #empty>
				<noData></noData>
			</template>
		</CommonList>

		<uv-popup ref="popup" bgColor="">
			<view class="pop-content">
				<text class="pop-content-title"> 什么是平台自营服务列表 </text>
				<text class="pop-content-text">
					1、平台自营服务：商品平台统一提供，服务由指定提供者承接。售价为商品标价，实际到账金额
					= 售价 - 平台服务费，以实际到账为准。
				</text>
				<text class="pop-content-text">
					2、已上架即商品处于售卖状态，请依据实际库存情况，合理执行上下架操作。
				</text>
				<text class="pop-content-text">
					3、商品售价将根据平台规则动态调整，当前标价仅为即时售价信息。
				</text>
				<view class="pop-content-btns">
					<view class="pop-content-close" @click="closePop"> 取消 </view>
					<view class="pop-content-sure" @click="closePop"> 我已了解 </view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
import request from "@/utils/request";
import searchBox from "./components/search-box.vue";
import CommonList from "@/components/common/CommonList.vue";
export default {
	components: {
		searchBox,
		CommonList,
	},
	data() {
		return {
			isSubmit: false,//调接口防止重复点击参数
			queryData: {
				nameorphone: "",
				sjid: null,
				state: "", // 1绑定 2解绑
			},
			userInfo: {},
			artisanType: getApp().globalData.artisanType,
			info: {
				1: {
					list: "/syr/serversSelf/list",
					name: "手艺人",
					switch: "/syr/serversSelf/switch",
				},
				2: {
					list: "/sj/serversSelf/list",
					name: "商家",
					switch: "/sj/serversSelf/switch",
				},
			},
			statusBarHeight: 0,
			// Tab 数据源，通过修改这个数组可以动态增删 Tab
			tabs: [{
				id: "",
				name: "全部",
			},
			{
				id: 1,
				name: "服务中",
			},
			{
				id: 2,
				name: "已解约",
			},
			],
		};
	},
	computed: {

	},
	async onLoad(options) {
		let type = 3;
		let result = await request.post("/sj/user/getuser", {
			type,
		});
		this.userInfo = result.data;
		this.queryData.sjid = this.userInfo.id
		this.statusBarHeight = this.getRpxStatusBarHeight();
		this.$nextTick(() => {
			this.search();
		});
	},
	onShow() {
		if (this.queryData.sjid) {
			this.$nextTick(() => {
				this.search();
			});
		}
	},
	methods: {
		goDetail(item) {
			uni.$uv.throttle(() => {
				uni.navigateTo({
					url: `/pages/shop/staff/detail?syrid=${item.syr?.id}`,
				});
			}, 500)

		},
		handleSwitchChange(item) {
			let obj = {
				sjid: this.userInfo.id,
				syrid: item.syr_id
			}
			request.post("/sj/isaccept", obj).then((res) => {
				if (res.code == 200) {
					item.sj_state === 1 ? item.sj_state = 2 : item.sj_state = 1;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			}).catch((error) => {
				uni.showToast({
					title: '网络异常，请稍后重试',
					icon: 'none',
					duration: 2000
				});
			});
		},
		typName(type) {
			const textList = {
				1: "服务中",
				2: "已解约"
			};
			return textList[type];
		},
		handleService(item) {
			uni.showModal({
				title: "提示",
				content: `确定要${item.us_state == 1 ? "下架" : "上架"}该服务吗？`,
				success: (res) => {
					if (res.confirm) {
						request
							.post(this.info[this.artisanType].switch, {
								id: item.id,
								us_state: item.us_state == 1 ? 2 : 1,
							})
							.then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: "下架成功",
										icon: "none",
									});
									this.search(); // 刷新列表
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none",
									});
								}
							});
					}
				},
			});
		},
		goAddStaff() {
			uni.navigateTo({
				url: `/pages/shop/staff/addStaff`,
			});
		},
		search() {
			this.$refs.groupRef.manualRefresh(this.queryData);
		},
		// 切换 Tab 的方法
		switchTab(tabId) {
			this.queryData.state = tabId;
			this.search();
		},
		openPop() {
			this.$refs.popup.open("center");
		},
		closePop() {
			this.$refs.popup.close();
		},
	},
};
</script>

<style lang="less">
page {
	background: linear-gradient(to bottom, #ffffff, #f5f5f5) !important;
}

.container {
	.tab-nav {
		display: flex;
		justify-content: space-between;
		padding: 0 91rpx;
		background: #fff;

		.tab-item {
			padding: 30rpx 0rpx 30rpx 0rpx;
			cursor: pointer;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 45rpx;
			text-align: left;
			font-style: normal;
			/* 预先设置透明边框，防止切换时布局跳动 */

			&.active {
				color: #FF4767;
				font-weight: 500;
				position: relative;

				&:after {
					content: "";
					position: absolute;
					bottom: 17rpx; // 定位在底部边框的下方
					left: 50%;
					transform: translateX(-50%); // 水平居中

					/* 激活时显示红色边框 */
					width: 34rpx;
					height: 6rpx;
					background: linear-gradient(306deg, #FF4767 0%, #fc563b 100%);
					border-radius: 3rpx;
				}
			}
		}
	}
}

.pop-content {
	width: 620rpx;
	background-image: url("/static/images/background/selfOperatedTip.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 20rpx;

	.pop-content-title {
		padding-top: 193rpx;
		padding-bottom: 40rpx;
		text-align: center;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		line-height: 50rpx;
		font-style: normal;
		display: block;
	}

	.pop-content-text {
		padding: 0 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		display: block;
	}

	.pop-content-btns {
		display: flex;
		padding: 0 54rpx;
		justify-content: space-between;
		margin-top: 80rpx;
		padding-bottom: 51rpx;

		.pop-content-close {
			width: 246rpx;
			height: 80rpx;
			border-radius: 40rpx;
			border: 2rpx solid #FF4767;
			font-weight: 500;
			font-size: 28rpx;
			color: #FF4767;
			text-align: left;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.pop-content-sure {
			width: 246rpx;
			height: 80rpx;
			background: #FF4767;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #ffffff;
			text-align: left;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.scoll-lists {
	padding: 0 20rpx;
	margin-top: 20rpx;

	.list-item {
		box-sizing: border-box;
		padding: 20rpx;
		height: 200rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;

		.item-left {
			position: relative;

			.item-left-img {
				width: 131rpx;
				height: 131rpx;
				border-radius: 50%;
			}

			.item-left-tab {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: left;
				font-style: normal;
				width: 124rpx;
				height: 34rpx;
				background: #FF4767;
				border-radius: 18rpx;
				position: absolute;
				bottom: 0;
				left: 4rpx;
			}

			.noTab {
				background: #C1C1C1;
			}
		}

		.item-right {
			margin-left: 20rpx;
			flex: 1;

			.item-right-text1 {
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}

			.item-right-text2 {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				margin-bottom: 20rpx;
			}

			.item-right-text3 {
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;

				.item-right-text3-icon {
					width: 8rpx;
					height: 16rpx;
					margin-left: 6rpx;
				}
			}
		}
	}
}

::v-deep .right-area {
	width: 31rpx !important;
	height: 31rpx !important;
}

::v-deep .icon-headle {
	width: 31rpx !important;
	height: 31rpx !important;
}

.common-list {
	background: #f5f5f5 !important;
	border-radius: 30rpx !important;
}

::v-deep .list-container {
	padding: 0 !important;
}

::v-deep .list-scroll {
	margin-top: 0 !important;
}

.switch-box {
	/* width: 126rpx; */
	height: 52rpx;
	line-height: 52rpx;
	border-radius: 26rpx;
	background-color: #FFD4D8;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	padding: 0 8rpx 0 15rpx;

	.switch-yuan {
		width: 38rpx;
		height: 38rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-left: 9rpx;
		margin-right: 0rpx;
	}

	.switch-text {
		font-weight: 500;
		font-size: 24rpx;
		color: #FF4767;
		line-height: 33rpx;
		text-align: right;
		font-style: normal;
	}
}

.disswitch {
	padding: 0 12rpx 0 8rpx;
	background-color: #cecfd5;

	.switch-yuan {
		margin-left: 0;
		margin-right: 9rpx;
	}

	.switch-text {
		color: #A0A0A0;
	}
}
</style>