lhyt_shop_applet/XCX-Shop/pages/serve/detial.vue

<template>
	<view class="body">
		<view class="header">
			<view class="headercon">
				<view>
					<p>
						<image style="width: 20vw; height: 20vw;" :src="detialInfo.img.url"></image>
					</p>
				</view>
				<view style="margin-left: 4vw;">
					<p style="font-weight: 550; font-size: 1rem;">{{detialInfo.name}}</p>
					<p
						style="font-size: 0.8rem; margin-top: 2vw; text-align: center; width: 15vw; color: #a0dbd9;border: 1px solid #a0dbd9;">
						取送车</p>
					<view style="display: flex; margin-top: 2vw;">
						<p>
							<image style="width: 5vw; height: 5vw;" src="../../static/duihao.png" mode=""></image>
						</p>
						<p style="font-size: 0.75rem; color: #adaebe;"> 洗车 </p>
						<p style="margin-left: 2vw;">
							<image style="width: 5vw; height: 5vw;" src="../../static/duihao.png" mode=""></image>
						</p>
						<p style="font-size: 0.75rem; color: #adaebe;">WIFI</p>
						<p style="margin-left: 2vw;">
							<image style="width: 5vw; height: 5vw;" src="../../static/duihao.png" mode=""></image>
						</p>
						<p style="font-size: 0.75rem; color: #adaebe;">客休区</p>
					</view>
				</view>
			</view>
			<view class="headerContent">
				<view style="color:#adaebe;">{{detialInfo.addr}}</view>
				<view style="display: flex;  justify-content: space-around;  width: 30vw;">
					<!-- 	<view>
						<p>
							<image style="width: 6vw; height: 6vw;" src="../../static/daohang.png" mode=""></image>
						</p>
						<p style="color: #adaebe;">导航</p>
					</view> -->
					<view @click="callPhone">
						<p>
							<image style="width: 6vw; height: 6vw;" src="../../static/dianhua.png" mode=""></image>
						</p>
						<p style="color: #adaebe;">电话</p>
					</view>

				</view>
			</view>

		</view>
		<view class="content">
			<view class="contentInfo">
				<view style="width: 90vw; height: 12vw; border-bottom: 0.5px solid #f8f8f8; margin-top: 2vw;">
					<view style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
							style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">服务类型</span>
						<p style="width: 63vw; margin-left: 2vw;"><uni-data-select v-model="value" :localdata="range"
								@change="Searchchange"></uni-data-select></p>

					</view>
				</view>
				<!-- 车系 -->
				<view style="width: 90vw; height: 12vw; border-bottom: 0.5px solid #f8f8f8; margin-top: 1vw;">
					<view style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
							style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">车辆</span>
						<p style="width: 63vw; margin-left: 9vw;"><uni-data-select v-model="VehicleSeries"
								:localdata="chexi" @change="Vehiclechange"></uni-data-select></p>

					</view>
				</view>
				<!--  联系人-->
				<view style="width: 90vw; height: 12vw; border-bottom: 0.5px solid #f8f8f8;">
					<view style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
							style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">联系人</span>
						<p> <input type="text" placeholder="请输入联系人" v-model="name"
								style=" width: 30vw; font-size: 0.8rem; height: 10vw; line-height: 10vw; margin-left: 7vw; " />
						</p>
						<view style=" width: 37vw; display: flex; align-items: center;">
							<u-radio-group v-model="selectRadio" @change="radioGroupChange">
								<u-radio @change="radioChange" active-color="red" v-for="(item, index) in list"
									:key="index" :name="item.name" :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
				<!-- 联系电话 -->
				<view style="width: 90vw; height: 12vw; border-bottom: 0.5px solid #f8f8f8;">
					<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
							style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">联系电话</span> <input
							type="text" placeholder="请输入联系电话" v-model="phone"
							style="font-size: 0.8rem; height: 10vw; line-height: 10vw; margin-left: 4vw; " /> </p>
				</view>
				<view style="width: 90vw; height: 12vw; display: flex; border-bottom: 0.5px solid #f8f8f8;">
					<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
							style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">预约时间</span>
						<input type="text" placeholder="预约时间" v-model="date"
							style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 6vw; "
							@focus="TimeFocus" />
						<u-picker mode="time" v-model="show" :params="params" @confirm="confirm" @cancel="cancel"></u-picker>
					</p>
				</view>
				<!-- 备注说明 -->
				<view style="width: 90vw; height: 12vw; display: flex; border-bottom: 0.5px solid #f8f8f8;">
					<p style="display: flex;"><span style="color: red;  line-height: 11vw;">*</span> <span
							style="font-size: 0.8rem; line-height: 10vw; margin-left: 1vw;">备注说明</span> <input
							type="text" v-model="text" placeholder="请输入备注说明"
							style="font-size: 0.8rem; width: 50vw; height: 10vw; line-height: 10vw; margin-left: 4vw; " />
					</p>
				</view>
				<!-- button -->
				<u-toast ref="uToast" />
				<view class="button" @click="submit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UniDataSelect from '@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue'
	export default {
		components: {
			UniDataSelect
		},
		data() {
			return {
				value: 0,
				show: false,
				detialInfo: '',
				CarNumber: '',
				VehicleSeries: '',
				phone: '',
				name: '',
				text: '',
				date: null,
				selectRadio: '先生',
				list: [{
						name: '先生',
						disabled: false
					},
					{
						name: '女士',
						disabled: false
					},
				],
				range: [],
				chexi: [],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
			}
		},
		onLoad(option) {
			if (option.detialInfo) {
				this.detialInfo = JSON.parse(decodeURIComponent(option.detialInfo))
				console.log(this.detialInfo)
			}
			if (this.$db.get('name')) {
				this.name = this.$db.get('name')
			}
			if (this.$db.get('tel')) {
				this.phone = this.$db.get('tel')
			}
			this.getserve()
		},
		methods: {
			radioGroupChange(e) {
				console.log(e)
			},
			callPhone() {
				uni.showModal({
					title: '联系我们',
					content: this.detialInfo.tel,
					confirmText: '确认',
					success(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: this.detialInfo.tel, //电话号码
								success: function(e) {
									console.log(e);
								},
								fail: function(e) {
									console.log(e);
								}
							})
						}
					}
				})
			},
			// checkboxChange(e) {
			// 	if (this.CarNumber == true) {
			// 		this.CarNumber = false
			// 	} else {
			// 		this.CarNumber = true
			// 	}
			// },
			// 服务类型
			getserve() {
				this.$api.getServeType(res => {
					if (res.code == 0) {
						this.range = res.data.maint_types
						this.chexi = res.data.vehicles
					}
				})
			},
			// 提交
			submit() {
				if (!this.$db.get('token')) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				this.$api.postreserve({
					shop: this.detialInfo.id,
					name: this.name,
					tel: this.phone,
					type: this.value,
					vehicle: this.VehicleSeries,
					date: this.date,
					notes: this.text
				}, res => {
					if (res.code == 0) {
						this.successToast('操作成功')
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/serve/index'
							})
						}, 1000)

					} else {
						this.errorToast('请填写必填项')
					}
				})
			},
			Searchchange(e) {
				this.value = e.id
				console.log("e:", e);
			},
			Vehiclechange(e) {
				this.VehicleSeries = e.id
				console.log('e', e)
			},
			successToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'success',
					duration: 1000
				})
			},
			errorToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'error',
					duration: 1000
				})
			},
			TimeFocus() {
				this.show = true
			},
			// 时间
			confirm(e) {
				this.date = e.year + '-' + e.month + '-' + e.day
			},
			cancel() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 100vw;
		height: 100vh;
		background-color: #f8f8f8f8;

		.header {
			width: 100vw;
			height: 27vh;
			background-color: #ebeff4;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			padding: 2vw;

			.headercon {
				width: 96vw;
				height: 13vh;
				display: flex;
				border-bottom: 1px solid #e5e8ed;
			}

			.headerContent {
				display: flex;
				margin-top: 4vw;
				justify-content: space-between;
			}
		}

		.content {
			width: 100vw;
			height: 70vh;
			box-sizing: border-box;
			padding: 0 2vw;
			border-radius: 5px;
			overflow: hidden;

			.contentInfo {
				position: absolute;
				top: 45vw;
				width: 96vw;
				height: 70vh;
				box-sizing: border-box;
				padding: 2vw;
				background-color: white;
				border-radius: 10px;
				margin-top: 2vw;
			}
		}

		.button {
			width: 90vw;
			height: 10vw;
			margin-top: 10vw;
			background-color: red;
			line-height: 10vw;
			border-radius: 5vw;
			color: white;
			text-align: center;
		}

	}
</style>