yixiang/pageB/yuyue-vip.vue

<template>
	<view class="content">
		<view class="box">
			<view class="cell hflex acenter">
				<view class="label">姓名</view>
				<u-input placeholder="请输入您的姓名" v-model="name" border="none"> </u-input>
			</view>
			<view class="cell hflex acenter">
				<view class="label">手机号</view>
				<u-input placeholder="请输入您的手机号" v-model="mobile" border="none"> </u-input>
			</view>
			<view class="cell hflex acenter jbetween" @click="show_time = true">
				<view class="label">拍摄时间</view>
				<u-input placeholder="请输入您的拍摄时间" v-model="time" border="none" :disabled="true" disabledColor="#FFFFFF">
				</u-input>
				<image src="static/down.png" mode="aspectFill"></image>
			</view>
			<view class="cell hflex acenter">
				<view class="label">拍摄地点</view>
				<u-input placeholder="请输入您要拍摄的地方" v-model="address" border="none"> </u-input>
			</view>
			<view class="cell hflex acenter">
				<view class="label">拍摄预算</view>
				<u-input placeholder="请输入您的预算资金" v-model="price" border="none"> </u-input>
			</view>
			<view class="cell hflex acenter jbetween" @click="show_youhui = true">
				<view class="label">优惠券</view>
				<!-- <u-input placeholder="不使用" v-model="coupon.name || '不使用'" border="none" :disabled="true"
					disabledColor="#FFFFFF"> </u-input> -->
				<view class="coupon" :style="coupon.coupon.name ? '' : 'color:#222'">
					{{coupon.coupon.name || '不使用'}}
				</view>
				<image src="static/down.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="bottom hflex acenter jcenter">
			<view class="btn" @click="submit">提交表单</view>
		</view>
		<u-popup :show="show_time" mode="bottom" :round="14" @close="toclose">
			<time-box :list="timelist" @sure="selecttime" @close="toclose"></time-box>
		</u-popup>
		<u-popup :show="show_youhui" @close="toclose" mode="bottom" :round="13">
			<youhui :list="youhui_list" @close="toclose" @select="selectyouhui"></youhui>
		</u-popup>
	</view>
</template>

<script>
	import timeBox from './components/time-box.vue'
	import youhui from './components/youhui.vue'
	import $api from '@/static/js/api.js'
	export default {
		components: {
			timeBox,
			youhui
		},
		data() {
			return {
				name: '',
				mobile: '',
				time: '',
				date: '',
				address: '',
				price: '',
				youhui: '',
				show_time: false,
				show_youhui: false,
				youhui_list: [],
				timelist: [],
				coupon: {
					coupon: {
						name: ''
					}
				},
			}
		},
		onLoad() {
			this.getlist()
		},
		onShow() {

		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		methods: {
			submit() {
				var _this = this
				$api.req({
					url: 'shoot-appointment',
					method: 'POST',
					data: {
						name: _this.name,
						mobile: _this.mobile,
						date: _this.date,
						address: _this.address,
						price: _this.price,
						coupon_id: _this.coupon.id ? _this.coupon.id : '0',
					}
				}, function(res) {
					$api.info(res.msg)
					if (res.code == 10000) {

						uni.navigateBack()
					}
				})
			},
			selectyouhui(e) {
				console.log(e);
				if(e != -1) {
					this.coupon = this.youhui_list[e]
				}
				this.toclose()
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'user/coupon',
					data: {
						is_page: 0,
						is_expire: 0,
						is_use: 0,
						type: 'shoot'
					}
				}, function(res) {
					if (res.code == 10000) {
						_this.youhui_list = res.data
					}
				})

				const days = 7; // 近7天
				const week = ['日', '一', '二', '三', '四', '五', '六']; // 星期

				const dateList = Array.from({
					length: days
				}, (v, i) => i).map(day => {
					const date = new Date();
					date.setDate(date.getDate() + day);
					let month = date.getMonth() + 1
					if (month < 10) {
						month = '0' + month
					}
					let today = date.getDate()
					if (today < 10) {
						today = '0' + today
					}
					return date.getFullYear() + '-' + month + '-' + today + ' 星期' + week[date.getDay()];
				});
				for (var i = 0; i < dateList.length; i++) {
					this.timelist.push({
						id: i + 1,
						name: dateList[i],
						value: dateList[i].slice(0, 10)
					})
				}
			},
			selecttime(e) {
				console.log(e);
				this.time = this.timelist[e].name
				this.date = this.timelist[e].value
				this.toclose()
			},
			toclose() {
				this.show_time = false
				this.show_youhui = false
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx 28rpx;

		.box {
			background: #FFFFFF;
			border-radius: 20rpx;

			.cell {
				padding: 32rpx 20rpx;
				border-bottom: 1px solid #F5F5F5;

				.label {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #222222;
					width: 170rpx;
					padding-right: 16rpx;
				}

				.coupon {
					width: calc(100% - 220rpx);
					color: rgb(192, 196, 204);
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.cell:last-child {
				border: none;
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 16rpx 24rpx 66rpx;

			.btn {
				width: 694rpx;
				height: 84rpx;
				background: #00B0B0;
				border-radius: 42rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
			}
		}
	}
</style>