yixiang/pageB/zulin-add.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 jbetween" @click="show_youhui = true">
				<view class="label">优惠券</view>
				<!-- <u-input placeholder="不使用" v-model="youhui" 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="texts vflex">
			<text>租赁说明</text>
			<text>{{content}}</text>
		</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: '',
				money: '',
				coupon: {
					coupon: {
						name: ''
					}
				},
				show_time: false,
				show_youhui: false,
				youhui_list: [],
				timelist: [],
				content: `1、负责境外上市公司的研究与分析，对重点公司进行调研、跟踪与经营预测，并撰写研究报告，提供投资建议；
							2、结合国家和地方相关经济政策，对行业发展进行前瞻性研究，准确判断行业发展趋势，提供行业研究报告和投资策略；
							`
			}
		},
		onLoad() {
			this.getlist()
		},
		onShow() {

		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		methods: {
			submit() {
				var _this = this
				$api.req({
					url: 'shoot-equipment-lease',
					method: 'POST',
					data: {
						name: _this.name,
						mobile: _this.mobile,
						date: _this.date,
						address: _this.address,
						coupon_id: _this.coupon.id ? _this.coupon.id : '0',
					}
				}, function(res) {
					if (res.code == 10000) {
						$api.info(res.msg)
						uni.navigateBack()
					}
				})
			},
			selectyouhui(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;
			}
		}

		.texts {
			text:first-child {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #222222;
				padding: 28rpx 0 20rpx;
			}

			text:last-child {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}

		.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>