BD-LDBD-UNI/pages/preCarWash/index.vue

<template>
	<view class="preCarWash" style="padding-bottom: 240rpx;">
		<Card titles="附近门店" page="washCar" :data="carShopData"></Card>
		<Card titles="车辆信息" :data="cardMsg"></Card>
		<view class="card-view">
			<view class="classHead">
				<view class="classBorder">

				</view>
				<view class="classTitle">
					选择服务
				</view>
			</view>
			<view class="classBody" style="padding: 36rpx 0;">
				<view v-for="(item, index) in carWashType" :key="index"
					style="padding-left: 24rpx;margin-bottom: 20rpx;">
					<button :class="chooseBtn==index?'chooseBtn':'btn'" @click="chooseBtn=index">{{item.name}}</button>
				</view>
			</view>
		</view>
		<view class="card-view">
			<view class="classHead">
				<view class="classBorder">

				</view>
				<view class="classTitle">
					服务方式
				</view>
			</view>
			<view class="radioView">
				<radio-group @change="radioChange">
					<div class="radioBody">
						<div class="radio">
							<radio style="transform:scale(0.7)" color="#0078FF" checked="true" :value="1" />在店洗车
						</div>
						<div class="radio">
							<radio style="transform:scale(0.7)" color="#0078FF" :value="2" />预约洗车
						</div>
					</div>
				</radio-group>
			</view>
			<view class="border" v-if="radioValue===2"></view>
			<view class="dataTimeBody" @tap="routerTo(dataTime)" v-if="radioValue===2">
				<view :class="dataTime?'dataTime':'dataNull'">
					{{dataTime || "请选择预约时间"}}
				</view>
				<view class="dataRight">
					<image class="classChoose" :src="require('../../static/choose.png')">
				</view>
			</view>
		</view>
		<view class="card-view" style="height: 186rpx;">
			<view class="classHead">
				<view class="classBorder">

				</view>
				<view class="classTitle">
					可用套餐
				</view>
			</view>
			<view class="dataTimeBody" style="padding-top: 28rpx;" @tap="routerTo('套餐')">
				<view :class="setMeal.name?'dataTime':'dataNull'">
					{{setMeal.name || "请选择套餐"}}
				</view>
				<view class="dataRight">
					<span v-if="setMeal.name" class="unit">可用</span>
					<span v-if="setMeal.name" class="num">{{setMeal.surplusSum}}</span>
					<image class="classChoose" :src="require('../../static/choose.png')">
				</view>
			</view>
		</view>
		<view class="price">
			<view class="leftView">
				<view class="classBottomLeft">
					<view style="font-size: 26rpx;">
						￥
					</view>
					<view style="font-size: 56rpx;">
						{{carPrice}}
					</view>
				</view>
				<view class="classBottomRight">
					<view class="bottomSpan">
						优惠价
					</view>
					<view class="bottomLaset">
						￥{{carScrib}}
					</view>
				</view>
			</view>
			<view class="rightView" @click="plOrder">
				立即预约
			</view>
		</view>
	</view>


</template>

<script>
	import {
		getSelectStore,
		getUserCar,
		getTimeList,
		carwashService
	} from "@/api/shop.js"
	import {
		getByTypeCode,
		getDefaultPrice,
		getMyPackage,
		carwashOrder
	} from "@/api/carWash.js"
	import Card from '@/components/Card'
	const app = getApp();
	export default {
		components: {
			Card
		},
		data: function() {
			return {
				requestStatus: false,
				loading: false,
				cardMsg: {},
				chooseBtn: 0,
				imgurl: require("../../static/logo.png"),
				dataTime: "",
				carShop: [],
				carShopData: {},
				setMeal: {},
				carWashType: [],
				setMealList: [],
				carPrice: "",
				carScrib: "",
				dataTimeList: [],
				startTime: "",
				radioValue: "1",
				carwashCode: "",
				pageType: '',
				btnStatus: false
			}
		},
		onBackPress(options) {
			console.log('11111');
			// 这里可以自定义返回逻辑，比如下面跳转其他页面
			if (!this.pageType) {
				// #ifdef APP-PLUS
				if (plus.os.name.toLowerCase() === 'android') {
					plus.runtime.quit();
				} else {
					plus.runtime.quit();
				}
				// #endif
				// return true 表示禁止默认返回
				return true;
			}
		},
		watch: {
			setMeal(val) {
				this.carPrice = 0
			},
			loading(val) {
				console.log(22222);
				if (this.cardMsg != "" && this.carShopData != undefined && this.carWashType != "" && val != undefined) {
					console.log(
						'this.cardMsg != "" && this.carShopData != undefined && this.carWashType != "" && val != undefined',
						this.cardMsg);
					if (this.cardMsg.id != undefined) {
						this.getDefaultPrices(this.carWashType[0].name, this.carShopData.id, this.cardMsg.id)
						this.getMyPackages(this.carWashType[0].name, this.carShopData.id, this.cardMsg.id)
					}
				}
			},
			chooseBtn(val) {
				console.log(33333, val);
				if (this.cardMsg != "" && this.carShopData != undefined && this.carWashType != "" && val != undefined) {
					if (this.cardMsg.id != undefined) {
						console.log(this.carWashType[val], 'val');
						this.carwashCode = this.carWashType[val].id
						this.getDefaultPrices(this.carWashType[val].name, this.carShopData.id, this.cardMsg.id)
						this.getMyPackages(this.carWashType[val].name, this.carShopData.id, this.cardMsg.id)
					}
				}
			},
			cardMsg(val) {
				if (this.carShopData != undefined && this.carWashType != "" && val.id != undefined) {
					console.log(44444);
					console.log('val', val);
					this.getDefaultPrices(this.carWashType[0].name, this.carShopData.id, val.id)
					this.getMyPackages(this.carWashType[0].name, this.carShopData.id, val.id)
				}
			},
			carShopData(val) {
				console.log(55555);
				console.log('this.cardMsg.id', this.val);
				console.log(this.carWashType);
				if (this.cardMsg != "" && this.carWashType != "" && val != undefined) {
					if (this.cardMsg.id != undefined) {
						console.log(111);
						console.log(this.carWashType[0].id, val.id, this.cardMsg.id);
						// this.getDefaultPrices(this.carWashType[0].id, val.id, this.cardMsg.id)
						this.getMyPackages(this.carWashType[0].id, val.id, this.cardMsg.id)
					}
				}
			}
		},
		onLoad: function(e) { //option为object类型，会序列化上个页面传递的参数
			console.log('onLoad', e.token);
			this.pageType = e.type
			let that = this;
			app.globalData.requestToken = e.token;
			uni.setStorageSync('token', e.token)
			getSelectStore({
				pageNo: 1,
				pageSize: 20,
				type: 2,
				isCarwash: 1,
				longitude: app.globalData.longitude,
				latitude: app.globalData.latitude
			}).then(res => {
				that.carShop = res.data.rows;
				that.carShopData = that.carShop[0];
				console.log('that.carShop', that.carShop);
				console.log('that.carShop[0]', that.carShop[0]);
				console.log('shop====================>', uni.getStorageSync('shopData'));
				if (that.carShopData != undefined) {
					console.log(that.carShopData.id, 'that.carShopData.idthat.carShopData.id，');
					carwashService({
						id: that.carShopData.id
					}).then(res => {
						console.log(res, '参数12345');
						that.carWashType = res.data;
						that.carwashCode = that.carWashType[0].id
						if (that.carShop != "" && that.cardMsg != "" && that.carWashType != "") {
							that.loading = true;

						}
					})
					getTimeList({
						id: that.carShopData.id
					}).then(res => { //that.carShopData.id
						that.dataTimeList = res.data
					})
					if (that.carShop != "" && that.cardMsg != "" && that.carWashType != "") {
						that.loading = true;
					}
				} else {
					that.loading = true;
				}
			})

			getUserCar().then(res => {
				console.log(res);

				that.cardMsg = res.data;
				if (that.carShop != "" && that.cardMsg != "" && that.carWashType != "") {
					that.loading = true;
				}
			})

			/* getByTypeCode({
				dictTypeCode: "carWashType",
				
			}).then(res => {
				console.log(res.data,'dict');
				that.carWashType = res.data;
				that.carwashCode = that.carWashType[0].code
				if (that.carShop != "" && that.cardMsg != "" && that.carWashType != "") {
					that.loading = true;
				}
			}) */
		},
		onShow: function() { //option为object类型，会序列化上个页面传递的参数
			console.log('onShow');
			let that = this
			uni.$on('chooseData', function(data) {
				console.log('data===========================>', data);
				that.dataTime = data.data;
				that.startTime = data.startTime;
			})
			uni.$on('chooseCar', function(data) {
				that.cardMsg = data;
			})
			uni.$on('chooseShop', function(data) {
				console.log('datadddddd==================================>', data);
				that.carShopData = data;
				getTimeList({
					id: that.carShopData.id
				}).then(res => {
					console.log(res, 'resss');
					that.dataTimeList = res.data
					carwashService({
						id: that.carShopData.id
					}).then(res => {
						that.chooseBtn = 0
						console.log(res.data, '参数');
						that.carWashType = res.data;
						that.carwashCode = res.data[0].id
						console.log(that.carWashType[0].name, that.carShopData.id, tidhat
							.cardMsg
							.id,
							'that.carWashType[0].name, that.carShopData.id, that.cardMsg.id'
						);
						that.getDefaultPrices(that.carWashType[0].name, that.carShopData.id,
							that.cardMsg.id)
						that.getMyPackages(that.carWashType[0].name, that.carShopData.id, that
							.cardMsg.id)
						if (that.carShop != "" && that.cardMsg != "" && that.carWashType !=
							"") {
							that.loading = true;
						}
					})
				})
			})
			uni.$on('setMeal', function(data) {
				that.setMeal = data;
				if (that.setMeal) {
					this.carPrice = 0
				}
			})
		},
		methods: {
			/* toPay(){
				uni.requestPayment({
					provider:"wxpay",
					
				})
			}, */
			plOrder() {
				if (this.requestStatus) {
					// 利用 return 终止函数继续运行
					return false;
				}
				this.requestStatus = true;
				setTimeout(() => {
					// 模拟执行完毕
					// 改变 requestStatus
					this.requestStatus = false;
				}, 1000);

				console.log(1);

				let data = {};
				if (this.cardMsg == "") {
					uni.showToast({
						title: "请选择车辆",
						icon: 'none',
						duration: 2000,
					})
					return
				} else {
					data.userCarId = this.cardMsg.id;
				}
				if (this.carShopData == "") {
					uni.showToast({
						title: "请选择店铺",
						icon: 'none',
						duration: 2000,
					})
					return;
				} else {
					data.shopId = this.carShopData.id;
				}
				if (this.carShopData == "") {
					uni.showToast({
						title: "请选择店铺",
						icon: 'none',
						duration: 2000,
					})
					return;
				} else {
					data.shopId = this.carShopData.id;
				}
				if (this.carwashCode == "") {
					uni.showToast({
						title: "请选择服务",
						// icon: 'none',
						duration: 2000,
					})
					return
				} else {
					data.shopServiceId = this.carwashCode
				}
				let type = 2
				if (data.payMoney == 0) type = 0;
				console.log(this.setMeal);
				data.payType = type;
				data.reserveTime = this.startTime;
				data.payMoney = this.carPrice;
				console.log(data.payMoney);
				data.upsId = this.setMeal.id
				data.upId = this.setMeal.upId
				data.serviceType = parseInt(this.radioValue);
				console.log('传参============>time', data);
				if (data.userCarId == null) {
					uni.showToast({
						icon: 'none',
						title: '请先添加车辆'
					})
				} else {
					if (data.upsId) {
						carwashOrder(data).then(() => {
							uni.showToast({
								icon: 'none',
								title: '下单成功'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/preCarWash/washOrder/index?token=' + uni
										.getStorageSync('token')
								})
							}, 1000)
						})
					} else {
						uni.navigateTo({
							url: '/pages/shop/cashierDesk/cashierDesk?page=carwash&params=' + JSON.stringify(data)
						})
					}
				}

			},
			getDefaultPrices(carwashCode, id, ucId) {
				let _this = this;
				console.log(carwashCode, id, ucId, 'carwashCode, id, ucId');
				getDefaultPrice({
					carwashName: carwashCode,
					id: id,
					ucId: ucId
				}).then((res) => {
					_this.carPrice = res.data.carPrice;
					_this.carScrib = res.data.carScrib;
				})

			},
			getMyPackages(carwashCode, id, ucId) {
				let _this = this;
				console.log(carwashCode, '店铺id');
				getMyPackage({
					carwashName: carwashCode,
					shopId: id,
					carId: ucId
				}).then((res) => {
					console.log(res, 'ressssss');
					_this.setMealList = res.data
				})
			},
			radioChange(e) {
				this.radioValue = e.detail.value
			},
			// 路由跳转
			routerTo(item) {
				if (item == "门店") {
					this.$yrouter.push({
						path: "/pages/preCarWash/chooseShop/index"
					});
				} else if (item == "套餐") {
					if (this.carShopData.id == null) {
						uni.showToast({
							title: "请选择店铺",
							icon: 'none',
							duration: 2000,
						})
						return;
					}
					if (this.cardMsg.id == null) {
						uni.showToast({
							title: "请选择车辆",
							icon: 'none',
							duration: 2000,
						})
						return;
					}
					let id = this.setMeal.id != undefined ? this.setMeal.id : "";
					this.$yrouter.push({
						path: "/pages/preCarWash/setMeal/index?id=" + id + "&setMealList=" + JSON.stringify(this
								.setMealList) + "&shopId=" + this.carShopData.id + "&carId=" + this.cardMsg.id +
							"&carWashType=" + this.carWashType[this.chooseBtn].dictCode
					});
				} else {
					this.$yrouter.push({
						path: "/pages/preCarWash/chooseTime/index?dataTime=" + item + "&shopId=" + this.carShop
							.id + "&dataTimeList=" + JSON.stringify(this.dataTimeList)
					});
				}
			}
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.card-view {
		width: 94%;
		margin-left: 3%;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 28rpx;
	}

	.classHead {
		display: flex;
		padding-top: 28rpx;
		width: 100%;
		height: 28rpx;
	}

	.classBorder {
		width: 5rpx;
		height: 28rpx;
		background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
		border-radius: 3rpx;
	}

	.classTitle {
		height: 25rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		padding-left: 28rpx;
		line-height: 28rpx;
	}

	.classBody {
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
	}

	.classChoose {
		width: 15rpx;
		height: 23rpx;
		margin-left: 10rpx;
	}

	.chooseBtn {
		width: 204rpx;
		height: 86rpx;
		background: linear-gradient(0deg, #FF4800 0%, #FF9600 100%);
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 86rpx;
	}

	.btn {
		width: 204rpx;
		height: 86rpx;
		background: #FFFFFF;
		border: 1px solid #DBDBDB;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 86rpx;
	}

	.radio {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 55rpx;
		width: 50%;
	}

	.radioBody {
		display: flex;
		padding: 28rpx;
	}

	.border {
		width: 650rpx;
		height: 1px;
		background: #EEEEEE;
		border-radius: 1px;
		margin-left: 4%;
	}

	.dataTimeBody {
		height: 100rpx;
		width: calc(100% - 56rpx);
		display: flex;
		padding: 0 28rpx;
		justify-content: space-between;
	}

	.dataTime {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 100rpx
	}

	.dataNull {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #A9A9A9;
		line-height: 100rpx;
	}

	.dataRight {
		/* margin-right: 56rpx; */
		line-height: 100rpx;
	}

	.price {
		width: 690rpx;
		height: 110rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 0px 8rpx 17rpx 0px rgba(168, 165, 165, 0.09);
		border-radius: 55rpx;
		margin: 58rpx 0 58rpx 28rpx;
		position: fixed;
		bottom: 0rpx;
	}

	.leftView {
		float: left;
		display: flex;
		padding: 18rpx;
	}

	.rightView {
		float: right;
		width: 240rpx;
		height: 110rpx;
		text-align: center;
		background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
		border-radius: 0 55rpx 55rpx 0;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FEFEFE;
		line-height: 110rpx
	}

	.classBottomLeft {
		display: flex;
		font-family: PingFang SC;
		font-weight: 500;
		color: #005EFF;
		align-items: baseline;
	}

	.bottomLaset {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: line-through;
		color: #BCBCBC;
		line-height: 50rpx;
	}

	.bottomSpan {
		width: 78rpx;
		height: 28rpx;
		text-align: center;
		background: rgba(255, 181, 158, 0.4);
		box-shadow: 0px 3rpx 6rpx 0px rgba(212, 84, 24, 0.2);
		border-radius: 14rpx 14rpx 13rpx 0px;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF3C00;
		line-height: 31rpx;
	}

	.classBottomRight {
		padding-left: 18rpx;
	}

	.unit {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 31rpx;
	}

	.num {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #007DFF;
		line-height: 31rpx;
	}

	button::after {
		border: none;
	}
</style>