pet-front-order/pages/index.vue

<template>
	<view class="home-content">

		<NewUserCoupon v-if="isNewUser" @close="closeNewUserPopup" @getCoupon="handleGetCoupon"></NewUserCoupon>
		
        <view class="banner">
			<uni-swiper-dot class="uni-swiper-dot-box" field="content">
				<swiper class="swiper" indicator-dots indicator-color="rgba(255, 255, 255, 0.50)"
					indicator-active-color="#ffffff" autoplay interval="5000">
					<swiper-item v-for="(item,i) in bannerList" :key="i">
						<img :src="item&&item.dictValue" style="width: 100%;" mode="widthFix" />
					</swiper-item>
					<!-- 		<swiper-item>
						<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/banner/banner2_3x.png"
							style="width: 100%;" mode="widthFix" />
					</swiper-item> -->
				</swiper>
			</uni-swiper-dot>
		</view>

		<view style="margin: -250px 20rpx 0 20rpx;">
			<image style="width: 710rpx; height: 176rpx;" slot='cover'
				src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/TopDetail.png" />
		</view>
		<view class="card-container">
			<uni-card :is-shadow="false" padding="40rpx 20rpx 40rpx 20rpx" margin="20rpx">
				<view class="normal-bolb-text">
					<view @click="getLocationInfo"
						style="display: flex; align-items: center; justify-content: space-between;">
						<text v-if="isCheckLocation"
							style="color: #333333 ;font-size: 32rpx;font-weight: 600; font-style: normal; width: 450rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{locationName}}</text>
						<text v-else
							style="color: #C4C4C4 ;font-size: 32rpx;font-weight: 500; font-style: normal;">请选择宠物上门服务地址</text>
						<uni-icons type="location-filled" size="20" color="#FFB13F"></uni-icons>
					</view>
				</view>
				<view class="line" style="background-color: #EFEFEF;"></view>
				<view class="content-container">
					<view class="example-body hideOnPc">
						<view class="normal-bolb-text">
							<view @click="toggleCalendar('bottom')">
								<view v-if="isCheckTime"
									style="display: flex; align-items: center; justify-content: space-between;">
									<text
										style="color: #333333 ;font-size: 32rpx;font-weight: 600; font-style: normal; width: 450rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{selectedDateShowText}}</text>
									<text
										style="color: #333333 ;font-size: 32rpx;font-weight: 600; font-style: normal;">共选择
										<text style="color: #FFB13F;">{{selectedDate.length}}</text>
										天</text>
								</view>
								<view v-else
									style="display: flex; align-items: center; justify-content: space-between;">
									<text
										style="color: #C4C4C4 ;font-size: 32rpx;font-weight: 500; font-style: normal;">请选择宠物上门服务时间</text>
									<uni-icons type="right" size="20" color="#FFB13F"></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<view>
						<uni-popup ref="popup" background-color="#fff" @change="changePopup">
							<view class="popupBottom">
								<uni-calendar ref="calendar" class="uni-calendar--hook" :selected="selectedDate"
									:startDate="startDate" :endDate="endDate" :showMonth="false"
									@change="changeCalendar" @confirm="changeCalendar" @close="close" />
								<view style="display: flex; justify-content: center; align-items: center;">
									<!-- <button class="bottom-btn" @click="closePopup">确定</button> -->
									<image @click="closePopup" style="width: 670rpx; height: 80rpx;" slot='cover' src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/yesButton.png" />
								</view>
							</view>
						</uni-popup>
					</view>
				</view>
				<view class="line" style="background-color: #EFEFEF;"></view>
				<view>
					<view style="display: flex;">
						<view @click="getOrder(true)" style="margin-right: 20rpx;">
							<image style="width: 304rpx; height: 100rpx;" slot='cover'
								src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderByCompanion.png">
						</view>
						<view @click="getOrder(false)">
							<image style="width: 304rpx; height: 100rpx;"
								src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderBySystem.png">
						</view>
					</view>
				</view>
			</uni-card>
		</view>

		<view class="coupon-list">
			<uni-card :is-shadow="false" padding=0 margin="10px">
				<view class="coupon-title" slot="title">
					<view class="coupon-title-left">
						<view class="coupon-flag"></view>
						<view>领券中心</view>
					</view>
					<view class="coupon-title-right">
						<view @click="getAllCoupon">
							更多 <uni-icons type="right" size="14px" color="#AAAAAA"></uni-icons>
						</view>
					</view>
				</view>
				<view class="split-line"></view>
				<view class="coupon-content">
					<view v-for="(item,index) in couponData" style="padding:20rpx;" :key="index">
						<view style="border: 1px solid #FFBF60; border-radius: 8px;">
							<view class="card">
								<view class="card-left">{{switchType(item.stockType)}}</view>
								<view class="card-center">
									<view class="card-center-top"></view>
									<view class="card-center-bottom"></view>
								</view>
								<view class="card-right">
									<view class="card-content">
										<view class="card-info">{{item.stockName}}</view>
										<view class="card-type">可用于
											<text class="card-type-text">专业喂养</text>
											<text class="card-type-text">专业遛狗</text>
										</view>
										<view class="card-time">有效期至: {{item.availableEndTime.slice(0, 16)}}</view>
									</view>
									<view>
										<!-- <u-button @click="receiveCoupon(item.id)" shape="circle" size="mini"
											color="#ffaa48" text="立即领取"></u-button> -->
										<view style="width: 132rpx;height: 52rpx;background-color: #FFAA48; display: flex;align-items: center;justify-content: center;border-radius: 56rpx;">
											<text style="font-size: 24rpx; font-weight: 500; color: #FFFFFF;">立即领取</text>
										</view>
									</view>
								</view>
							</view>
							<view class="card-bottom">
								<view class="card-bottom-text">
									优惠券不可兑换现金
								</view>
								<view class="card-bottom-text">
									查看详细规则>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</view>

		<view class="companion-list">
			<uni-card :is-shadow="false" padding=0 margin="10px">
				<view class="companion-title" slot="title">
					<view class="companion-title-left">
						<view class="companion-flag"></view>
						<view>周边伴宠师</view>
					</view>
					<view class="companion-title-right" @click="getAllCompanion">
						<view>
							更多 <uni-icons type="right" size="14px" color="#AAA"></uni-icons>
						</view>
					</view>
				</view>
				<view class="split-line"></view>
				<view class="companion-content">
					<view class="companion-item">
						<view class="companion-info">
							<image class="companion-img" slot='cover'
								:src="defaultCompanion&&defaultCompanion.staffImages&&defaultCompanion.staffImages.length>0?defaultCompanion.staffImages[0].url:defaultStaffIamge">
							</image>
							<view class="companion-info-1">
								<view class="companion-info-2">
									<view class="companion-info-title">
										<view class="companion-name">
											{{defaultCompanion.name}}
										</view>
										<view class="companion-sex">
											<img :src="defaultCompanion.gender=='1'?'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_m.png':
														'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_f.png'" alt="sex"
												style="width: 40rpx;height: 40rpx;" />
										</view>
									</view>
									<view class="companion-info-star">
										<text style="color: #FFB13F;">客户点赞数{{defaultCompanion.star}}</text>
										<uni-icons type="hand-up-filled" size="18" color="#FFB13F"></uni-icons>
									</view>
								</view>
								<view class="companion-info-3" style="width: 100%;">
									<view class="ellipsis">
										距离{{defaultCompanion.distance}}km
									</view>
								</view>
								<view class="companion-info-4" style="width: 100%;">
									<view class="ellipsis" style="max-width: 450rpx;">
										简介：{{defaultCompanion.shortDescription}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view>
						<view class="companion-item-bottom">
							<text class="companion-item-bottom-text">养宠{{defaultCompanion.year}}年 | 评价{{defaultCompanion.record}}条 | 服务小结{{defaultCompanion.serviceNum}}份</text>
						</view>
					</view>
				</view>
			</uni-card>
		</view>

		<view class="history-record">
			<uni-card :is-shadow="false" padding=0 margin="10px">
				<view class="history-record-title" slot="title">
					<view class="history-record-title-left">
						<view class="history-record-flag"></view>
						<view>历史记录</view>
					</view>
					<view class="history-record-title-right">
						<view @click="getAllRecord">
							查看服务记录和评价详情 <uni-icons type="right" size="14px" color="#AAAAAA"></uni-icons>
						</view>
					</view>
				</view>
				<view class="split-line"></view>
				<view class="history-record-content">
					<view class="history-record-content-image">
						<view class="history-record-content-image-1">
							<view class="history-record-content-image-1-text">
								<view class="history-record-content-image-1-text-1">{{historyRecord.dog}}只</view>
								<view class="history-record-content-image-1-text-2">至{{historyRecord.dogTime}}</view>
							</view>
						</view>
						<view class="history-record-content-image-2">
							<view class="history-record-content-image-2-text">
								<view class="history-record-content-image-2-text-1">{{historyRecord.cat}}只</view>
								<view class="history-record-content-image-2-text-2">至2{{historyRecord.catTime}}</view>
							</view>
						</view>
						<view class="history-record-content-image-3">
							<view class="history-record-content-image-3-text">
								<view class="history-record-content-image-3-text-1">{{historyRecord.num}}次</view>
								<view class="history-record-content-image-3-text-2">至{{historyRecord.numTime}}</view>
							</view>
						</view>
					</view>
					<view class="history-record-content-text">
						<text>*数据来源于布丁猫妈狗爸平台</text>
					</view>
				</view>
			</uni-card>
		</view>

		<view class="service-content">
			<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/ysbz.png"
				style="width: 100%;" mode="widthFix" alt="service">
		</view>

		<view class="card-container">
			<uni-card :is-shadow="false" padding="0px" margin="10px">
				<view class="title-img4"></view>
				<uni-row class="demo-uni-row">
					<uni-col :span="12" v-for="(item,index) in peopleList" :key="index">
						<uni-card :is-shadow="false" margin="5px" padding="0" spacing="0" :border="false"
							shadow="0px 0px 0px 0px rgba(0, 0, 0, 0.08)">
							<image class="people-img" slot='cover' style="width: 100%;"
								:src="item&&item.staffImages&&item.staffImages.length>0?item.staffImages[0].url:defaultStaffIamge">
							</image>
							<text class="people-year">{{item.serviceAge}}年从业经验</text>
							<text class="show-text-1">姓名：{{item.nickName}}</text>
							<text class="show-text-2">简介：{{item.shortDescription}}</text>
						</uni-card>
					</uni-col>

				</uni-row>
			</uni-card>
		</view>
		
		<view>
			<image style="height: 132rpx; width: 710rpx; margin: 0 20rpx 20rpx 20rpx;"
				slot='cover'
				src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/joinus.png">
		</view>

		<Kefu></Kefu>
		<view class="coupon_wrap" v-if="envVersion == 'dev'">
			<view class="details-subscribe">
				<view @click="getCoupon" class="details-btn">点击领取到卡包</view>
			</view>
			<!-- 领取弹窗 -->
			<view v-if="showMask" @closeMask="closeMask">
				<view class="mask-coupon" @click="closeMask">
					<view class="wx-coupon">
						<view class="title">
							领取优惠券
							<i>*</i>
						</view>
						<view class="content">
							优惠券列表显示
						</view>
						<!-- 小程序领券插件 -->
						<view class="" v-for="(item,index) in couponList" :key="index">
							<send-coupon @sendcoupon="getSendCoupon" @userconfirm="redirectuser" :sign="item.sign"
								:send_coupon_params="item.sendCouponParams"
								:send_coupon_merchant="item.send_coupon_merchant">
								<view class="text-button">{{item.wechatStock.stockName}}</view>
							</send-coupon>
						</view>

					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getStaffList,
		getProductList,
		getBannerList,
		getCouponList,
		getCouponListNoAuth,
		getOpenId,
		receiveCoupon,
	} from "@/api/system/user"
	import {
		getCompanionList
	} from "@/api/system/companion"
	import {
		setToken,
		getToken,
		getOpenIdKey,
		setOpenIdKey
	} from '@/utils/auth'
	import Kefu from './common/kefu.vue'
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	import NewUserCoupon from './components/NewUserCoupon.vue';
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				defaultSkuImage: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/%E5%96%82%E5%85%BB.png',
				defaultStaffIamge: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png',
				defaultLink: '/pages/details/feed',
				skuData: [],
				peopleList: [],
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				bannerList: [],
				couponList: [],
				showMask: false,
				envVersion: 'develop',
				isNewUser: false,
				selectedDate: [],
				startDate: '',
				endDate: '',
				isCheckTime: false,
				selectedDateShowText: '',
				isCheckLocation: false,
				locationName: '',
				locationLatitude: '',
				locationLongitude: '',
				locationAddress: '',
				allInfo: {
					isCheckLocation: false,
					locationName: '',
					locationLatitude: '',
					locationLongitude: '',
					locationAddress: '',
					selectedDate: [],
					isCheckTime: false,
					selectedDateShowText: '',
				},
				defaultCompanion: {
					name: '宠小二',
					gender: 0,
					star: 560,
					distance: 1.5,
					shortDescription: '有一只三岁蓝猫叫憨憨，热爱小宠物，心地善良，喜欢动物',
					staffImages: [{
						url: "https://catmdogf.oss-cn-shanghai.aliyuncs.com/2024/01/2634af25c5bf294f39b795ecc9d3c4eefa微信图片_20240126125100.png"
					}],
					year: 4,
					record: 11,
					serviceNum: 13,
				},
				couponData: [],
				historyRecord: {
					dog: "47131",
					dogTime: "2024.12.12",
					cat: "47131",
					catTime: "2024.12.12",
					num: "47131",
					numTime: "2024.12.12",
				},
			}
		},
		components: {
			Kefu,
			uniPopup,
			NewUserCoupon
		},
		mounted() {
			this.getCalendarDate();
			this.checkNewUser();
		},
		methods: {
			checkNewUser() {
				// 检查是否为新用户，这里可以根据实际需求修改判断逻辑
				// 例如：检查本地存储中是否有首次访问的标记
				const isFirstVisit = !uni.getStorageSync('hasVisited');
				if (isFirstVisit) {
					this.isNewUser = true;
					// 设置访问标记
					uni.setStorageSync('hasVisited', true);
				}
			},
			closeNewUserPopup() {
				this.isNewUser = false;
			},
			handleGetCoupon() {
				// 如果用户已登录，则直接调用领券方法
				if (getToken()) {
					this.getCoupon();
				} else {
					// 未登录，跳转到登录页面
					uni.navigateTo({
						url: '/pages/personalCenter/index'
					});
				}
			},
			getAllCoupon() {
				uni.navigateTo({
					url: '/pages/companionPetList/couponList'
				});
			},
			getAllCompanion() {
				if (!this.isCheckLocation) {
					uni.showToast({
						title: '请先选择地址',
						duration: 1500,
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: `/pages/companionPetList/companionPetList?info=` + encodeURIComponent(JSON
							.stringify(this.allInfo))
					});
				}
			},
			getAllRecord () {
				
			},
			toggleCalendar(type) {
				this.type = type
				uni.hideTabBar()
				this.$refs.popup.open(type)
			},
			closePopup() {
				this.$refs.popup.close()
				setTimeout(() => {
					uni.showTabBar()
				}, 300)
			},
			changePopup(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
				if (e.show) {
					uni.hideTabBar()
				} else {
					setTimeout(() => {
						uni.showTabBar()
					}, 300)
				}
			},
			close() {
				console.log('弹窗关闭');
			},
			confirm(e) {
				console.log('confirm 返回:', e)
			},
			changeCalendar(e) {
				console.log('change 返回:', e)
				this.selectedDateShowText = ''
				// 选中日期
				const selectedValue = this.selectedDate.find(item => item.date === e.fulldate)
				console.log('const selectedValue', selectedValue)
				if (selectedValue) {
					// 存在则移除
					this.selectedDate = this.selectedDate.filter(item => item.date !== e.fulldate);
					this.allInfo.selectedDate = this.selectedDate;
				} else {
					this.selectedDate.push({
						date: e.fulldate,
						info: 'time'
					})
					this.allInfo.selectedDate = this.selectedDate
					console.log('this.selectedDate', this.selectedDate)
				}
				console.log("this.selectedDate.length", this.selectedDate.length)
				console.log("this.selectedDate", this.selectedDate)
				if (this.selectedDate.length > 0) {
					this.isCheckTime = true
					this.allInfo.isCheckTime = this.isCheckTime
					if (this.selectedDate.length == 1) {
						this.selectedDateShowText = this.selectedDate[0].date + ''
						this.selectedDateShowText = this.selectedDateShowText.replace(/-/g, "/");
						this.allInfo.selectedDateShowText = this.selectedDateShowText
					} else if (this.selectedDate.length == 2) {
						this.selectedDateShowText = this.selectedDate[0].date + "," + this.selectedDate[1].date
						this.selectedDateShowText = this.selectedDateShowText.replace(/-/g, "/");
						this.allInfo.selectedDateShowText = this.selectedDateShowText
					} else if (this.selectedDate.length > 2) {
						this.selectedDateShowText = this.selectedDate[0].date + '...' + this.selectedDate[this.selectedDate
							.length - 1].date
						this.selectedDateShowText = this.selectedDateShowText.replace(/-/g, "/");
						this.allInfo.selectedDateShowText = this.selectedDateShowText
					}
				} else {
					this.isCheckTime = false
					this.allInfo.isCheckTime = this.isCheckTime
				}
			},
			getCalendarDate() {
				let tomorrow = new Date()
				tomorrow.setDate(tomorrow.getDate() + 2);
				this.startDate = this.formatDate(tomorrow);
				// 获取三个月后的日期
				let threeMonthsLater = new Date();
				threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 3);
				this.endDate = this.formatDate(threeMonthsLater);
			},
			formatDate(date) {
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				return year + '-' + month + '-' + day;
			},
			getLocationInfo() {
				wx.chooseLocation({
					type: 'gcj02', // 坐标系，默认为 wgs84 返回 gps 原始坐标，gcj02 返回可用于 wx.openLocation 的坐标
					success: (res) => {
						// 成功回调
						this.isCheckLocation = true
						this.locationName = res.address
						this.locationLongitude = res.longitude
						this.locationLatitude = res.latitude
						this.locationAddress = res.address
						console.log('选择的位置：', res);
						this.allInfo.isCheckLocation = true
						this.allInfo.locationName = res.address
						this.allInfo.locationLongitude = res.longitude
						this.allInfo.locationLatitude = res.latitude
						this.allInfo.locationAddress = res.address
					},
					fail: (err) => {
						// 失败回调
						console.error('选择位置失败：', err);
					}
				});
			},
			getLocationFirst() {
				wx.chooseLocation({
					type: 'gcj02', // 坐标系，默认为 wgs84 返回 gps 原始坐标，gcj02 返回可用于 wx.openLocation 的坐标
					success: (res) => {
						// 成功回调
						this.isCheckLocation = true
						this.locationName = res.address
						this.locationLongitude = res.longitude
						this.locationLatitude = res.latitude
						this.locationAddress = res.address
						this.allInfo.isCheckLocation = true
						this.allInfo.locationName = res.address
						this.allInfo.locationLongitude = res.longitude
						this.allInfo.locationLatitude = res.latitude
						this.allInfo.locationAddress = res.address
						this.getCompanionList()
					},
					fail: (err) => {
						// 失败回调
						console.error('选择位置失败：', err);
					}
				});
			},
			getCompanionList() {
				// let data = {
				// 	longitude: this.locationLongitude,
				// 	latitude: this.locationLatitude,
				// 	petTypes: this.selectedPet,
				// 	staffName: '',
				// 	address: this.locationAddress
				// }
				let data = {
					address: "上海市浦东新区浦东南路150弄",
					latitude: 29.56471,
					longitude: 106.55073,
					petTypes: ["1", "2"],
					staffName: "君"
				}
				console.log('data', data);
				getCompanionList(data).then(response => {
					if (response.code == 200) {
						// this.companionList = response.rows
						this.defaultCompanion.name = response.rows[0].name
						this.defaultCompanion.gender = response.rows[0].gender
						this.defaultCompanion.star = response.rows[0].id
						this.defaultCompanion.distance = response.rows[0].id
						this.defaultCompanion.shortDescription = response.rows[0].shortDescription
						this.defaultCompanion.staffImages = response.rows[0].staffImages
						this.defaultCompanion.year = 4
						this.defaultCompanion.record = 11
						this.defaultCompanion.serviceNum = 13
					}
					console.log(response);
				})
			},
			getOrder(value) {
				if (value) {
					if (!this.isCheckLocation) {
						uni.showToast({
							title: '请先选择地址',
							duration: 1500,
							icon: "none"
						})
					} else {
						uni.navigateTo({
							// url: '/pages/companionPetList/companionPetList',
							url: `/pages/companionPetList/companionPetList?info=` + encodeURIComponent(JSON
								.stringify(this.allInfo))
						});
					}
				} else {
					uni.navigateTo({
						url: '/pages_order/order/payOrderSuccessful',
						// url: '/pages/newOrder/serviceNew',
						// url: '/pages/newOrder/serviceNew2',
					});
				}
			},
			getCoupon() {
				getCouponList().then(res => {
					if (res.code == 200) {
						this.couponList = res.rows
						this.showMask = true
					} else {
						this.$modal.showToast('获取优惠券失败')
					}

				})

			},
			getCouponListAuth() {
				getCouponList().then(res => {
					if (res.code == 200) {
						this.couponData.push(res.data[0])
						console.log("this.couponData", this.couponData)
					} else {
						this.$modal.showToast('获取优惠券失败')
					}
				})
			},
			switchType(type) {
				if (type == 'PNORMAL') {
					return '满减券'
				}
				if (type == 'PDISCOUNT') {
					return '折扣券'
				}
				if (type == 'PTRAIL') {
					return '体验券'
				}
				return '优惠券'
			},
			receiveCoupon(id) {
				let data = {
					stockId: id
				}
				receiveCoupon(data).then(res => {
					console.log("this.receiveCoupon", res)
					if (res.code == 200) {
						this.$modal.showToast('优惠券领取成功')
					} else {
						this.$modal.showToast('领取优惠券失败')
					}
				})
			},
			getCouponListNoAuth() {
				console.log('进入 getCouponListNoAuth：');
				getCouponListNoAuth().then(res => {
					if (res.code == 200) {
						this.couponData = res.rows
					} else {
						this.$modal.showToast('获取优惠券失败')
					}

				})
			},
			closeMask() {
				this.showMask = false
			},
			// 点击领券获取优惠券信息
			getSendCoupon(res) {
				let that = this
				console.log('res', res)
				if (res.detail.errcode == 'OK') {
					console.log(222)
					if (res.detail.send_coupon_result[0].code == 'SUCCESS') {
						that.showMask = false
						uni.showToast({
							title: '领取成功',
							icon: 'success',
							duration: 2000,
						})
					} else {
						uni.showModal({
							title: '领取失败',
							content: res.detail.send_coupon_result[0].message,
							showCancel: false,
							success: function(res) {
								that.showMask = false
							}
						})
					}
				} else {
					uni.showToast({
						title: '领取失败',
						icon: 'none'
					})
					that.showMask = false
				}
			},
			// 点击确认收券按钮后回调
			redirectuser() {},
			getBanner() {
				getBannerList().then(res => {
					if (res.code == 200) {
						this.bannerList = res.data
					} else {
						this.$modal.showToast('获取Banner失败')
					}
				})
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			getPeopleList() {
				getStaffList().then(response => {

					if (response.code == 200) {
						this.peopleList = response.rows
					}

					console.log(response);
				})
			},
			getProductList() {
				getProductList({
					"publishStatus": 1,
					"categoryId": 76
				}).then(response => {
					if (response && response.content && response.content.length > 0) {
						this.skuData = response.content;
					}
					console.log(response);
				})
			},
			goDetails(item) {
				if (item) {
					// uni.navigateTo({
					// 	url: `/pages/details/successful`
					// });
					uni.navigateTo({
						url: `/pages/details/detail?id=${item.id}`
					});
				} else {
					this.$modal.showToast('数据有误，请联系管理员')
				}

			},

			init() {
				this.$globalData.itemPrice = []
				this.$globalData.submitData = {
					"phone": "",
					"wechatId": "",
					"note": "",
					"totalPrice": "",
					"address": {
						"province": "",
						"city": "",
						"district": "",
						"detailAddress": ""
					},
					"skuList": [],
					"service": {
						"serviceFrequency": "once_a_day",
						"serviceDate": [],
						"serviceTimeFirst": "",
						"serviceTimeSecond": "",
						"pet": []
					}
				}
			},
			login() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log("login", 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)
						}
					}
				})
			},
		},


		onLoad: function() {
			this.init()
			this.getPeopleList()
			this.getProductList()
			this.getBanner()
			// this.getCouponListNoAuth()
			const accountInfo = wx.getAccountInfoSync();
			this.envVersion = accountInfo.miniProgram.envVersion;
			if (!getToken() || !getOpenIdKey()) {
				this.login()
			} else {
				// this.getLocationFirst()
				this.getCouponListAuth()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F7 !important;
	}

	.home-content {
		position: relative;
		// background: linear-gradient(360deg, #F5F5F7 0%, #FFBF60 99%);


		.swiper {
			height: calc(100vw * 1098/1125);
			// background-image: linear-gradient(180deg, #FFBF60 0%, #FFBF60 90%, #ffffff 99.41%);
		}

		.banner {
			height: calc(100vw * 1098/1125 + 250px);
			background-image: linear-gradient(180deg, #FFBF60 0%, #FFBF60 90%, #F5F5F7 99.41%);
		}

		.uni-card {
			border-radius: 16rpx;
		}

		.float-button {
			position: fixed;
			bottom: 150px;
			/* 距离底部的距离 */
			right: 10px;
			/* 距离右侧的距离 */
			width: 50px;
			/* 按钮的宽度 */
			height: 50px;

			/* 按钮的高度 */
			/* 其他样式 */
			.kf-btn {
				background-color: rgba(255, 255, 255, 1);
				height: 52px;
				width: 52px;
				border-radius: 50%;
				display: flex;
				align-items: center;
			}
		}

		.coupon-list {
			width: 100%;

			.coupon-title {
				display: flex;
				line-height: 33rpx;
				margin: 42rpx 0 30rpx;
				justify-content: space-between;

				.coupon-title-left {
					display: flex;
					align-items: center;
					font-weight: 900;
					font-size: 30rpx;
					color: #333333;

					.coupon-flag {
						width: 8rpx;
						height: 33rpx;
						background: #FFBF60;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						margin-right: 10rpx;
					}
				}

				.coupon-title-right {
					color: #7D8196;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 28rpx;
				}
			}

			.split-line {
				width: 100%;
				height: 1rpx;
				background: #EFEFEF;
			}

			.coupon-content {
				.card {
					display: flex;
					align-items: center;
					width: 100%;
					padding: 10px 0;
					// background: #fff;
					// background: #f6f5f8;
					// border: 1px solid #FFBF60;
					border-radius: 8px 8px 0 0;
					// -webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, #d8d8d8 4.5px), radial-gradient(closest-side circle at 50%, #d8d8d8 99%, transparent 100%);
					// -webkit-mask-size: 100%, 2px 4px;
					// -webkit-mask-repeat: repeat, repeat-y;
					// -webkit-mask-position: 0 -4px, 87px;
					// -webkit-mask-composite: source-out;
					// mask-composite: subtract;
					// background: linear-gradient(45deg, orange, red);
				}

				.card-bottom {
					display: flex;
					background-color: #FFF1E0;
					height: 50rpx;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx 0 20rpx;
					border-radius: 0 0 8px 8px;

					.card-bottom-text {
						color: #AAAAAA;
						font-size: 24rpx;
						font-weight: 400;
					}
				}

				.card-left {
					width: 88px;
					text-align: center;
					color: #FF530A;
					font-size: 28rpx;
					font-weight: 900;
				}

				.card-center {
					display: flex;
					flex-direction: column;
					// align-items: center;

					.card-center-top {
						width: 40rpx;
						height: 20rpx;
						border-radius: 0 0 20rpx 20rpx;
						background-color: #fff;
						line-height: 20rpx;
						border-bottom: 1px solid #FDA714;
						border-left: 1px solid #FDA714;
						border-right: 1px solid #FDA714;
						margin-top: -22rpx;
						margin-bottom: 20rpx;
						margin-left: -19rpx;
					}

					.card-center-bottom {
						border-right: 1px dashed #AAAAAA;
						width: 1px;
						height: 120rpx;
					}
				}

				.card-right {
					padding: 0 16rpx 0 0;
					display: flex;
					flex: 1;
					/* flex-direction: column; */
					justify-content: space-between;
					align-items: center;
					height: 60px;

					.card-content {
						width: 77%;
					}

					.card-icon {
						position: relative;
						right: -10px;
						top: -10px;
					}
				}

				.card-info {
					margin: 0;
					font-size: 28rpx;
					line-height: 28rpx;
					color: #333333;
					font-weight: 500;
				}

				.card-type {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 24rpx;
					font-weight: 400;
					color: #AAAAAA;
					margin-top: 10rpx;

					.card-type-text {
						color: #FFAA48;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 24rpx;
						border: #FFAA48 1px solid;
						border-radius: 7rpx;
						margin-left: 8rpx;
					}
				}

				.card-time {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 24rpx;
					font-weight: 400;
					color: #AAAAAA;
					margin-top: 10rpx;
				}
			}
		}

		.companion-list {
			width: 100%;

			.companion-title {
				display: flex;
				line-height: 33rpx;
				margin: 42rpx 0 30rpx;
				justify-content: space-between;

				.companion-title-left {
					display: flex;
					align-items: center;
					font-weight: 900;
					font-size: 30rpx;
					color: #333333;

					.companion-flag {
						width: 8rpx;
						height: 33rpx;
						background: #FFBF60;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						margin-right: 10rpx;
					}
				}

				.companion-title-right {
					color: #7D8196;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 28rpx;
				}
			}

			.split-line {
				width: 100%;
				height: 1rpx;
				background: #EFEFEF;
			}

			.companion-content {
				.companion-item {
					padding: 10px 0px 0px 0;

					.companion-info {
						display: flex;
						align-items: center;
						justify-content: flex-start;

						.companion-img {
							width: 168rpx;
							height: 168rpx;
							border: #FEA714 5rpx solid;
							border-radius: 20rpx;
						}

						.companion-info-1 {
							margin-left: 10px;
							width: 80%;

							.companion-info-2 {
								display: flex;
								flex-wrap: wrap;

								.companion-info-title {
									display: flex;
									flex-wrap: wrap;
									width: 60%;
								}

								.companion-name {
									color: #333;
									font-size: 32rpx;
									// line-height: 32rpx;
									margin-right: 10rpx;
									font-weight: 900;
									font-style: normal;
								}

								.companion-info-star {
									color: #FFAA48;
									font-size: 24rpx;
									font-weight: 400;
									line-height: 28rpx;
									display: flex;
									align-items: center;
								}
							}

							.companion-info-3 {
								display: flex;
								align-items: baseline;
								font-size: 28rpx;
								line-height: 32rpx;
								margin-top: 5px;
								color: #FFAA48;
								font-weight: 900;
							}

							.companion-info-4 {
								display: flex;
								align-items: baseline;
								font-size: 24rpx;
								margin-top: 10px;
								color: #7D8196;
								font-weight: 400;
								line-height: 32rpx;
							}

						}

					}
				}

				.companion-item-bottom {
					height: 60rpx;
					background-color: #FFF4E5;
					margin: 20rpx 0 20rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;

					.companion-item-bottom-text {
						color: #A94F20;
						margin: 14rpx;
						font-size: 24rpx;
						font-weight: 400;
					}
				}
			}
		}

		.history-record {
			width: 100%;

			.history-record-title {
				display: flex;
				line-height: 33rpx;
				margin: 42rpx 0 30rpx;
				justify-content: space-between;

				.history-record-title-left {
					display: flex;
					align-items: center;
					font-weight: 900;
					font-size: 30rpx;
					color: #333333;

					.history-record-flag {
						width: 8rpx;
						height: 33rpx;
						background: #FFBF60;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						margin-right: 10rpx;
					}
				}

				.history-record-title-right {
					color: #7D8196;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 28rpx;
				}
			}

			.split-line {
				width: 100%;
				height: 1rpx;
				background: #EFEFEF;
			}

			.history-record-content {
				padding: 20rpx 0 20rpx 0;

				.history-record-content-image {
					display: flex;
					flex-wrap: nowrap;
					margin-bottom: 10rpx;

					.history-record-content-image-1 {
						background-image: url("https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/catNum.png");
						background-size: cover;
						width: 208rpx;
						height: 260rpx;
						margin-right: 20rpx;

						.history-record-content-image-1-text {
							.history-record-content-image-1-text-1 {
								width: 100%;
								display: flex;
								justify-content: center;
								height: 156rpx;
								align-items: flex-end;
								color: #FF8D00;
								font-size: 32rpx;
								font-weight: 900;
							}

							.history-record-content-image-1-text-2 {
								width: 100%;
								display: flex;
								justify-content: center;
								height: 90rpx;
								align-items: flex-end;
								color: #AAAAAA;
								font-size: 24rpx;
								font-weight: 400;
							}
						}
						
					}
					
					.history-record-content-image-2 {
						background-image: url("https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/dogNum.png");
						background-size: cover;
						width: 208rpx;
						height: 260rpx;
						margin-right: 20rpx;
					
						.history-record-content-image-2-text {
							.history-record-content-image-2-text-1 {
								width: 100%;
								display: flex;
								justify-content: center;
								height: 156rpx;
								align-items: flex-end;
								color: #FF8D00;
								font-size: 32rpx;
								font-weight: 900;
							}
					
							.history-record-content-image-2-text-2 {
								width: 100%;
								display: flex;
								justify-content: center;
								height: 90rpx;
								align-items: flex-end;
								color: #AAAAAA;
								font-size: 24rpx;
								font-weight: 400;
							}
						}
						
					}
					
					.history-record-content-image-3 {
						background-image: url("https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/goodNum.png");
						background-size: cover;
						width: 208rpx;
						height: 260rpx;
					
						.history-record-content-image-3-text {
							.history-record-content-image-3-text-1 {
								width: 100%;
								display: flex;
								justify-content: center;
								height: 156rpx;
								align-items: flex-end;
								color: #FF8D00;
								font-size: 32rpx;
								font-weight: 900;
							}
					
							.history-record-content-image-3-text-2 {
								width: 100%;
								display: flex;
								justify-content: center;
								height: 90rpx;
								align-items: flex-end;
								color: #AAAAAA;
								font-size: 24rpx;
								font-weight: 400;
							}
						}
						
					}
				}

				.history-record-content-text {
					font-size: 24rpx;
					font-weight: 400;
					color: #A94F20;
				}
			}
		}
	}

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}


	.popupBottom {
		height: 950rpx;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10rpx 20rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;

		.bottom-btn {
			width: 100%;
			border-radius: 120rpx;
			background: #FFB13F;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.line {
		height: 1px;
		width: 100%;
		margin: 16px 0;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 500rpx;
		line-height: 300rpx;
	}

	.card-container {
		margin: 0;
		padding: 0;
	}

	.title-img1 {
		height: 30px;
		width: 104px;
		background-repeat: no-repeat;
		background-position: left;
		background-size: 104px 30px;
		background-image: url('/static/images/pages/cwfw.png');
	}

	.service-content-img {
		// height: 208px;
		padding: 5px;
		margin-top: 5px;
		border-radius: 8px;
	}



	#myVideo {
		width: 100%;
		border-radius: 5px;
	}

	.service-content {
		width: 100%;
		padding: 0 10px;
	}

	.title-img4 {
		height: 30px;
		width: 202px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 202px 30px;
		background-image: url('/static/images/pages/jppcs.png');
		margin: 10px 0;
	}

	.demo-uni-row {
		margin: 0;
		padding: 0;
	}

	.people-img {
		width: 190px;
		height: 163px;
		border: #FFBF60 1px solid;
		border-radius: 5px;
	}

	.people-year {
		display: flex;
		width: 68px;
		padding: 1px 4px;
		justify-content: space-between;
		align-items: center;
		border-radius: 0px 10px 10px 0px;
		background: linear-gradient(90deg, #FDA714 0%, #FD8B04 99.41%);
		color: #FFF;
		font-family: PingFang SC;
		font-size: 10px;
		font-style: normal;
		line-height: 14px;
		/* 140% */
		position: absolute;
		top: 15px;
		left: 0;
	}

	.service-people {
		display: flex;
	}

	.service-people-text {
		display: flex;
		align-items: center;
		line-height: 24px;
	}

	.service-people-text::before {
		content: "";
		background-color: black;
		border-radius: 50%;
		display: inline-block;
		height: 5px;
		width: 5px;
		margin-right: 5px;
	}

	.show-text-1 {
		display: block;
		color: var(--Color-, #222229);
		font-family: PingFang SC;
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: 24px;
	}

	.show-text-2 {
		display: block;
		color: var(--Color-, #222229);
		font-family: PingFang SC;
		font-size: 12px;
		font-style: normal;
		line-height: 18px;
	}

	.image-wrapper {
		position: relative;
	}

	.text-wrapper {
		position: absolute;
		bottom: 83px;
		/* 根据需要调整文字距离图片底部的距离 */
		left: 10px;
		/* 根据需要调整文字距离图片左边的距离 */
		color: #fff;
		/* 根据需要调整文字颜色 */
		font-size: 10px;
		font-weight: blod;
		font-family: PingFang SC;
	}

	.coupone_wrap {
		margin-top: 200px;
	}

	.details-subscribe {
		background-color: #FFFFFF;
		padding: 10px;
		width: 100%;
		height: 58px;
		position: fixed;
		bottom: 0;
		z-index: 100;

		.details-btn {
			width: 100%;
			border-radius: 6px;
			background: #FFB13F;
			font-size: 16px;
			color: #FFFFFF;
		}
	}

	.text-button {
		height: 100rpx;
		border-radius: 0px 0px 6rpx 0;
		background: rgba(255, 208, 0, 1);
		font-weight: 500;
		font-size: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.couponItem {
		width: 100%;
		padding: 0 30rpx;
		margin-top: 24rpx;
		-webkit-overflow-scrolling: touch;
	}

	.couponItem:last-child {
		margin-bottom: 24rpx;
	}

	.mask-coupon {
		background: rgba(0, 0, 0, .5);
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		padding-bottom: 120rpx;

		.wx-coupon {
			background: #F2F2F2;
			min-height: 300px;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}

		.title {
			font-size: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0 10rpx;
		}

		.content {
			height: 80%;
			overflow-y: auto;
		}

		.text-button {
			height: 100rpx;
			border-radius: 0px 0px 6rpx 0;
			background: rgba(255, 208, 0, 1);
			font-weight: 500;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}


	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
</style>