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

<template>
	<view class="container">
		<custom-navbar title="服务项目" :leftImg="'/static/images/whiteBack.png'" :showUser="true"
			backgroundColor="linear-gradient( 134deg, #F52540 0%, #FF4767 100%)" :showHeadle="false" titleColor="#fff"
			borderBottom="none"></custom-navbar>
		<serviecFirstTab :tabs="tabs" :activeId="activeId" activeColor="#FF4767" @tab-click="tabClick" bgColor="#fff">
		</serviecFirstTab>

		<view class="service-list">
			<view class="service-item flex-row-center-between" v-for="(item, index) in getList" :key="index">
				<view class="item-left flex-row-start">
					<image class="item-left-photo" :src="item.photo[0]" mode="aspectFill"></image>
					<view class="item-left-texts">
						<view class="item-left-text1">
							{{ item.title }}
						</view>
						<view class="flex-row-center">
							<text class="item-left-text2" style="color: #FF4767">¥</text>
							<text class="item-left-text2"
								style="color: #FF4767; font-size: 28rpx">{{ item.server_price }}</text>
							<view class="item-left-line"></view>
							<text class="item-left-text2">{{ item.server_time }}分钟</text>
						</view>
					</view>
				</view>
				<!-- <view class="item-right" @click="item.is_choice = !item.is_choice">
					{{ item.is_choice ? "取消" : "添加" }}
				</view> -->
				<view v-if="isBack==0">
					<image class="item-right" src="/static/images/icons/staffCancel.png" @click="changeType(item)" v-if="item.is_choice"></image>
					<image class="item-right" src="/static/images/icons/staffAdd.png" @click="changeType(item)" v-else></image>
				</view>
				
			</view>
		</view>
		<view class="container-footer">
			<view class="container-footer-btn flex-row-center-center" @click="sure" v-if="isBack==0">
				<text>确认</text>
			</view>
			<view class="container-footer-btn flex-row-center-center" @click="back" v-else>
				<text>返回</text>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request";
	import serviecFirstTab from "@/components/common/service-first-tab.vue";
	export default {
		components: {
			serviecFirstTab,
		},
		data() {
			return {
				activeId: "",
				tabs: [],
				userInfo: {},
				serviceList: {},
				isBack: 0,
			};
		},
		async onLoad(options) {
			if (options.isBack) {
				this.isBack = options.isBack;
			}
			let type = 3;
			let result = await request.post("/user/getuser", {
				type,
			});
			this.userInfo = result.data;
			if (options.syrid) {
				this.sjservers(Number(options.syrid));
			} else {
				this.serviceList = JSON.parse(JSON.stringify(this.$store.state.sjServiceList))
			}
			this.sjfirstclass();
		},
		computed: {
			getList() {
				return this.serviceList[String(this.activeId)] || [];
			},
		},
		methods: {
			changeType(item){
				
				if(this.isBack==0){
					item.is_choice = !item.is_choice
					console.log(this.$store.state.sjServiceList,'this.$store.state.sjServiceList');
				}
				
			},
			tabClick(id) {
				this.activeId = id;
			},
			sjfirstclass() {
				request
					.post("/sj/sjfirstclass", {
						sjid: this.userInfo.id,
					})
					.then((res) => {
						if (res.code == 200) {
							this.tabs = res.data;
							this.activeId = res.data[0].id;
						}
					});
			},
			sjservers(syrid) {
				request
					.post("/sj/sjservers", {
						sjid: this.userInfo.id,
						syrid: syrid,
					})
					.then((res) => {
						if (res.code == 200) {
							//将数据存在vuex里作为依据
							this.serviceList = res.data;
						}
					});
			},
			sure() {
				this.$store.commit("setSjServiceList", this.serviceList);
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];
				if (prevPage) {
					if (prevPage.$vm && typeof prevPage.$vm.makeservers === "function") {
						prevPage.$vm.makeservers(); // 存在则调用
					}
					uni.navigateBack();
				}
			},
			back(){
				uni.navigateBack();
			}
		},
	};
</script>

<style lang="less">
	.container {
		.service-list {
			background-color: #fff;
			margin: 20rpx 20rpx 26rpx 20rpx;
			border-radius: 10rpx;
			padding-bottom: 150rpx;

			.service-item {
				padding-top: 20rpx;
				margin: 0rpx 20rpx 30rpx 20rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #f1f1f1;

				.item-left {
					.item-left-photo {
						width: 100rpx;
						height: 100rpx;
						border-radius: 20rpx;
						background: #000;
					}

					.item-left-texts {
						margin-left: 20rpx;

						.item-left-text1 {
							font-weight: 500;
							font-size: 30rpx;
							color: #333333;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
							margin-bottom: 27rpx;
							margin-top: 6rpx;
							max-width: 400rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.item-left-text2 {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
						}

						.item-left-line {
							margin: 0 10rpx;
							width: 2rpx;
							height: 20rpx;
							background: #666666;
						}
					}
				}

				.item-right {
					width: 132rpx;
					height: 57rpx;
				}
			}
		}
	}

	.service-first-tab {
		padding-bottom: 20rpx !important;
		box-shadow: none !important;
	}

	.container-footer {
		padding: 0rpx 40rpx 40rpx 40rpx;
		background: transparent;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		.container-footer-btn {
			width: 670rpx;
			height: 86rpx;
			border-radius: 100rpx;
			background: #FF4767;
			font-weight: 400;
			font-size: 34rpx;
			color: #ffffff;
			text-align: center;
			font-style: normal;
		}

		.nobtn {
			background: rgba(232, 16, 30, 0.4);
		}
	}
</style>