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

<template>
	<view class="service-new container">
		<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',
			}
		},
		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
		},
		methods:{
			selectAddress(){
				uni.navigateTo({
					url: "/pages/newOrder/addressList"
				});
			},
			selectPet(){
				uni.navigateTo({
					url: "/pages/newOrder/petList"
				});
			},
			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;
		.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>