pet-front-order/pages/newOrder/serviceNew.vue

<template>
	<view class="service-new container">

		<view class="order-type-select" v-if="!buyInfo.teacher">

			<view class="order-type-title">
				<image style="width: 40rpx; height: 40rpx;margin-right: 10rpx;" slot='cover' src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderIcon.png">
				</image>

				<!-- <image style="width: 32rpx; height: 32rpx; margin-right: 10rpx;" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/SystemOrderCircle.png"></image> -->
				下单方式：系统派单 <text style="color: #999;font-size: 26rpx;">(需先选择伴宠师等级)</text>
			</view>

			<view class="order-type-options">
				<view class="order-type-option" :class="{active: companionLevel === 'junior'}" @click="selectCompanionLevel('junior')">
					<image style="width: 40rpx; height: 40rpx; margin-right: 10rpx;" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png"></image>
					初级伴宠师
					<view class="info-icon" @click.stop="showCompanionInfo('junior')">
						<uni-icons type="info" size="20" color="#FFB13F"></uni-icons>
					</view>
				</view>
				<view class="order-type-option" :class="{active: companionLevel === 'senior'}" @click="selectCompanionLevel('senior')">
					<image style="width: 40rpx; height: 40rpx; margin-right: 10rpx;" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png"></image>
					高级伴宠师
					<view class="info-icon" @click.stop="showCompanionInfo('senior')">
						<uni-icons type="info" size="20" color="#FFB13F"></uni-icons>
					</view>
				</view>
			</view>
		</view>

        <view class="order-type-select" v-if="buyInfo.teacher">

            <view class="order-type-title">
                <image style="width: 40rpx; height: 40rpx;margin-right: 10rpx;" slot='cover' src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderIcon.png">
                </image>

                <!-- <image style="width: 32rpx; height: 32rpx; margin-right: 10rpx;" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/SystemOrderCircle.png"></image> -->
                下单方式：指定喂养员 - <text style="color: #999;font-size: 26rpx;">{{buyInfo.teacher.userName}}</text>
            </view>
        </view>
		
		<uni-popup ref="companionInfoPopup" type="center">
			<view class="companion-info-popup">
				<view class="companion-info-title">
					<text>{{ popupTitle }}</text>
				</view>
				<view class="companion-info-content">
					<view class="companion-info-item">
						<text class="companion-info-label">等级:</text>
						<text class="companion-info-value">{{ popupLevel }}</text>
					</view>
					<view class="companion-info-item">
						<text class="companion-info-label">价格:</text>
						<text class="companion-info-value">要根据规城市不同展示不同的价格</text>
					</view>
					<view class="companion-info-item">
						<text class="companion-info-label">分类标准:</text>
						<text class="companion-info-value">文字描述初级是什么类型的，高级是什么类型的 :)</text>
					</view>
				</view>
				<view class="companion-info-close" @click="closeCompanionInfo">
					<uni-icons type="close" size="24" color="#fff"></uni-icons>
				</view>
			</view>
		</uni-popup>
        
		<view class="service-new-address">
			<uni-card padding=0 :is-shadow="false">
				<view class="service-new-title" slot="title">
					<view class="service-new-title-left">
						<view class="service-new-flag"></view>
						<view>服务地址</view>
					</view>
				</view>
				<view class="split-line"></view>
				<view class="service-new-address-content">

					<view v-if="isAddressSelected" class="service-new-address-selected" >
						<view class="personal-address-info">
							<view class="personal-address-text">
								{{currentAddress.province}} {{currentAddress.city}} {{currentAddress.detailAddress}}
							</view>
							<view class="personal-address-people">
								<view>
									{{currentAddress.name}}
								</view>
								<view style="border: solid #7D8196 1px; margin: 0 10px; height: 12px;">	</view>
								<view>
									{{currentAddress.phone}}
								</view>
							</view>
						</view>
						<view>
							<uni-icons type="right" size="28rpx" color="#AAA" @click="selectAddress"></uni-icons>
						</view>
						
					</view>

					<view v-else class="service-new-unselect">
						<view style="width: 50%;">
							<u-button color="#FFBF60" icon="plus-circle-fill" text="添加地址" shape="circle" plain @click="selectAddress">
							</u-button>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="service-new-pet">
			<uni-card padding=0 :is-shadow="false">
				<view class="service-new-title" slot="title">
					<view class="service-new-title-left">
						<view class="service-new-flag">
						</view>
						<view class="service-new-title-text">
							服务宠物
						</view>
					</view>
						
					<view v-if="isPetSelected" class="add-pet" @click="selectPet">
						<u-icon name="plus-circle-fill" color="#FFBF60" size="28rpx" style="margin-right: 10rpx;"></u-icon>
						添加宠物
					</view>
				</view>
				<view class="split-line"></view>
				<view class="service-new-pet-content">
					<view v-if="isPetSelected" class="personal-pet-list">			
						<view v-for="(item,index) in currentPets" :key="index">
							<view class="personal-pet-list-item">
								<view class="personal-pet-info">
									<!-- 左侧头像 -->
									<view class="pet-avatar">
										<u-avatar :src="item.photo?item.photo:defaultPhoto" size="60" shape="circle"></u-avatar>
									</view>
									
									<!-- 中间内容 -->
									<view class="pet-info" style="flex: 1; margin: 0 20rpx; max-width: 50%;">
										<view class="pet-name-gender" style="display: flex; align-items: center;">
											<view>{{item.name}}</view>
											<view class="pet-gender" style="margin-left: 10rpx; display: flex;align-items: center;">
												<img :src="item.gender=='男生'?'../../static/images/details/boy.svg':'../../static/images/details/girl.svg'" alt="sex" 		
												style="width: 16px;height: 16px;"/>
											</view>
										</view>
										<view class="pet-dates ellipsis" >
											{{ getSelectedDateString(item.selectedDate) }}
										</view>
									</view>
									
									<!-- 右侧天数统计 -->
									<view class="date-total" style="margin-left: auto;width: 140rpx;text-align: end;">
										共 {{item.selectedDate.length}} 天 
										<uni-icons type="right" size="28rpx" color="#AAA" @click="selectPet"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="service-new-unselect">
						<view style="width: 50%;">
							<u-button color="#FFBF60" icon="plus-circle-fill" text="添加宠物" shape="circle" plain @click="selectPet">
							</u-button>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="service-new-pet">
			<uni-card padding=0 :is-shadow="false">
				<view class="service-new-title" slot="title">
					<view class="service-new-title-left">
						<view class="service-new-flag">
						</view>
						<view class="service-new-title-text">
							服务细则
						</view>
					</view>
				</view>
				<view class="split-line"></view>
				<view class="service-new-details-content">
					<view style="margin: 30rpx 0;">
						<u-checkbox-group
						    v-model="needPreFamiliarize"
						    iconPlacement="right" 
								placement="column">
							<u-checkbox activeColor="#FFBF60" label="是否提前熟悉" name="是否提前熟悉" shape="circle"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="split-line"></view>
					<view class="service-new-details-desc">
						<view style="display: flex;">
							<text style="width: 20rpx;">*</text>
							<text style="flex: 1;">价格40元/次</text>
						</view>
						<view style="display: flex; margin: 20rpx 0;">
							<text style="width: 20rpx;">*</text>
							<text style="flex: 1;">服务内容: 购买此服务后，伴宠师将在您离家前，按照约定日期提前上门沟通，熟悉喂养要求及宠物</text>
						</view>
						<view style="display: flex;">
							<text style="width: 20rpx;">*</text>
							<text style="flex: 1;">服务保障: 购买此服务后，平台支持在提前熟悉后，上门服务第一天前，无理由免费更换伴宠师1次</text>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="details-subscribe">
			<button class="details-btn" @click="goNext">下一步</button>
		</view>
	</view> 
</template>


<script>
	import {
		getProductList,
		getOpenId
	} from "@/api/system/user"
	import { setToken,getToken,getOpenIdKey,setOpenIdKey } from '@/utils/auth'
	export default {
		data() 
		{
			return {
				isAddressSelected:false,
				currentAddress:{},
				isPetSelected:false,
				currentPets:[],
				needPreFamiliarize:[],
				defaultPhoto:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png',
				companionLevel: 'junior', // 默认选择初级伴宠师
				companionLevelList: ['', 'junior', 'senior'], // 默认选择初级伴宠师
				popupTitle: '',
				popupLevel: '',
			}
		},
		onLoad: function(option) {
		},
		onShow() {
			if (!getToken() || !getOpenIdKey()) {
				this.login()
			}
			if(this.$globalData.mainSku.length < 1 || !this.$globalData.mainSku[0].price){
				// 获取主产品
				this.getProductList()
			}
			this.currentAddress = this.$globalData.newOrderData.currentAddress
			if(this.currentAddress&&this.currentAddress.name){
				this.isAddressSelected=true
			}
			this.currentPets = this.$globalData.newOrderData.currentPets
			if(this.currentPets&&this.currentPets.length>0){
				this.isPetSelected=true
			}
			this.needPreFamiliarize = this.$globalData.newOrderData.needPreFamiliarize
			// 初始化伴宠师等级
			if(this.$globalData.newOrderData.companionLevel) {
				this.companionLevel = this.$globalData.newOrderData.companionLevel
			}else{
                this.$globalData.newOrderData.companionLevel = this.companionLevel
            }
		},
		methods:{
			selectAddress(){
				uni.navigateTo({
					url: "/pages/newOrder/addressList"
				});
			},
			selectPet(){
				uni.navigateTo({
					url: "/pages/newOrder/petList"
				});
			},
			selectCompanionLevel(level) {
				this.companionLevel = level;
				// 将选择的伴宠师等级保存到全局数据
				this.$globalData.newOrderData.companionLevel = level;
			},
			showCompanionInfo(level) {
				if(level === 'junior') {
					this.popupTitle = '初级伴宠师';
					this.popupLevel = '初级伴宠师';
				} else {
					this.popupTitle = '高级伴宠师';
					this.popupLevel = '高级伴宠师';
				}
				this.$refs.companionInfoPopup.open();
			},
			closeCompanionInfo() {
				this.$refs.companionInfoPopup.close();
			},
			getProductList() {
				getProductList({
					"publishStatus": 1,
					"categoryId": 76,
					"needSku": true
				}).then(response => {
					if (response && response.content && response.content.length > 0) {
						const skus = response && response.content[0].skus
						if(skus && skus.length>0){
							let productSku = {
								"skuId": skus[0].id,
								"price":skus[0].price,
								"name":response.content[0].name,
								"quantity": 1,
								"isMainProduct":true
							}
							this.$globalData.mainSku = [productSku]
						}
					}else {
						uni.showToast('获取主产品失败，请联系管理员')
					}
					console.log(response);
				})
			},
			login() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.getOpenId(loginRes.code)
					},
					fail: function(error) {
						// 授权失败处理
						uni.showToast('授权失败，请授权后再试')
					}
				});
			},
			getOpenId(code) {
				getOpenId(code).then(res => {
					if (res.code == 200 && res.data) {
						let resData = JSON.parse(res.data)
						let token = resData.token;
						let openId = resData.openId;
						setOpenIdKey(openId)
						if(token){ 
							setToken(token)
						}
					}
				})
			},
			goNext(){
				console.log(this.needPreFamiliarize)
				if(!this.isAddressSelected) {
					this.$modal.showToast('请选择服务地址');
					return;
				}
				if(!this.isPetSelected) {
					this.$modal.showToast('请选择宠物');
					return;
				}
				this.$globalData.newOrderData.needPreFamiliarize = this.needPreFamiliarize
				uni.navigateTo({
					url: "/pages/newOrder/serviceNew2"
				});
				console.log(this.$globalData.newOrderData)
			},
			getSelectedDateString(selectDate){
				//显示日期为01/01;01/02;
				if(!selectDate || selectDate.length === 0) return '';
				return selectDate.map(date => {
					// 从日期字符串中提取月和日
					const [,month, day] = date.date.split('-');
					return `${month}/${day}`;
				}).join(';');
			}
		}
	}
</script>

<style scoped lang="less">
	.container {
		position: relative;
		height: 100%;
		padding-bottom: 78px;
		
		.order-type-select {
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			
			.order-type-title {
                background-color: #FFF9F0;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
                padding: 20rpx;
                border-radius: 40rpx;
			}
			
			.order-type-options {
				display: flex;
				justify-content: space-between;
                margin-top: 20rpx;
				
				.order-type-option {
					display: flex;
					align-items: center;
					width: 48%;
					height: 80rpx;
					background-color: #FFFFFF;
					border-radius: 40rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
					color: #666;
					position: relative;
					border: 2rpx solid transparent;
					
					&.active {
						border: 2rpx solid #FFB13F;
						background-color: #FFF5E5;
					}
					
					.info-icon {
						position: absolute;
						right: 20rpx;
					}
				}
			}
		}
		
		.companion-info-popup {
			width: 600rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx;
			position: relative;
            
            &::after {
                content: '';
                display: flex;
                position: absolute;
                top: 0rpx;
                left: 0;
                width: 100%;
                height: 100rpx;
                background-color: #FFB13F;
            }
			
			.companion-info-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				border-bottom: 1rpx solid #EFEFEF;
                position: relative;
                z-index: 2;
                height: 100rpx;
			}
			
			.companion-info-content {
				.companion-info-item {
					margin-bottom: 40rpx;
					
					.companion-info-label {
						font-size: 28rpx;
						color: #666;
						margin-right: 10rpx;
					}
					
					.companion-info-value {
						font-size: 28rpx;
						color: #333;
					}
				}
			}
			
			.companion-info-close {
				position: absolute;
				bottom: -80rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.details-subscribe {
			background-color: #FFFFFF;
			padding: 10px;
			width: 100%;
			height: 78px;
			position: fixed;
			bottom: 0;
			z-index: 100;
		
			.details-btn {
				width: 100%;
				border-radius: 6px;
				background: #FFB13F;
				font-size: 16px;
				color: #FFFFFF;
			}
		}
	}
	.service-new{
		.service-new-flag {
			width: 8rpx;
			height: 32rpx;
			background: #FFBF60;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			margin-right: 10rpx;
		}
		.split-line{
			width: 100%;
			height: 1rpx;
			background: #EFEFEF;
		}
		.service-new-title{
			display: flex;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
			margin: 42rpx 0 30rpx;
			justify-content: space-between;
			.service-new-title-left{
				display: flex;
				align-items: center;
			}
		}
		.service-new-unselect{
			height: 156rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.add-pet{
			font-weight: 400;
			font-size: 28rpx;
			color: #FFAA48;
			line-height: 40rpx;
			display: flex;
			align-items: center;
		}
		.service-new-details-desc{
			font-weight: 400;
			font-size: 24rpx;
			color: #A94F20;
			line-height: 28rpx;
			text-align: left;
			padding: 26rpx 0;
		}
		.personal-address-info{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin: 32rpx 0;
			width: 80%;
			.personal-address-text{
				color: #333;
				font-size: 28rpx;
				font-weight: bold;
				width: 100%;
			}
			.personal-address-people{
				color: #7D8196;
				font-size: 28rpx;
				font-weight: 400;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
		}
		.service-new-address-selected{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.personal-pet-list {
		margin-top: 20rpx;
		
		.personal-pet-list-item {
			margin-bottom: 20rpx;
			background-color: #F9F9F9;
			height: 172rpx;
			border-radius: 8rpx;
			
			.personal-pet-info {
				height: 100%;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
			}
		}
	}
</style>