newXLSC/pages/shop/createYhq.vue

<template>
	<view class="content">
		<view class="jg"></view>
		<view class="tab">
			<view class="tab-item flex">
				<view class="item-name">名称</view>
				<input type="text" placeholder="请输入优惠券名称" class="item-val" v-model="name">
			</view>
			<view class="tab-item flex">
				<view class="item-name">介绍</view>
				<textarea name="" id="" cols="30" rows="10" placeholder="请输入优惠券介绍" v-model="store_info"
					class="item-area"></textarea>
			</view>
			<view class="tab-item flex">
				<view class="item-name">价格</view>
				<input type="number" placeholder="请输入优惠券价格" class="item-val" v-model="price">
			</view>
			<view class="tab-item flex">
				<view class="item-name">原价</view>
				<input type="number" placeholder="请输入优惠券原价" class="item-val" v-model="ot_price">
			</view>
			<view class="tab-item flex">
				<view class="item-name">面值</view>
				<input type="number" placeholder="请输入优惠券面值" class="item-val" v-model="coupon_price">
			</view>
			<view class="tab-item flex">
				<view class="item-name">开始时间</view>
				<picker mode="date" class="item-val" @change="bindStartTimeChange">
					<view class="item-val" :class="{'empty': start_time == ''}">
						{{start_time == ''?'请输入优惠券开始时间':start_time}}
					</view>
				</picker>
				<!-- <input type="number" placeholder="请输入优惠券开始时间" class="item-val" v-model="start_time"> -->
			</view>
			<view class="tab-item flex">
				<view class="item-name">结束时间</view>
				<picker mode="date" class="item-val" @change="bindEndTimeChange">
					<view class="item-val" :class="{'empty': end_time == ''}">{{end_time == ''?'请输入优惠券结束时间':end_time}}
					</view>
				</picker>
				<!-- <input type="number" placeholder="请输入优惠券结束时间" class="item-val" v-model="end_time"> -->
			</view>
			<view class="tab-item flex">
				<view class="item-name">发放数量</view>
				<input type="number" placeholder="请输入优惠券发放数量" class="item-val" v-model="stock">
			</view>
		</view>
		<view class="sub" @click="sub">
			确认添加
		</view>
	</view>
</template>

<script>
	import {
		storeCoupon
	} from '@/api/shop.js'
	export default {
		data() {
			return {
				name: '',
				price: '',
				ot_price: '',
				coupon_price: '',
				start_time: '',
				end_time: '',
				stock: '',
				store_info: '',
				uping: false,
			}
		},
		onLoad() {

		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			bindStartTimeChange(res) {
				console.log(res)
				this.start_time = res.detail.value
			},
			bindEndTimeChange(res) {
				console.log(res)
				this.end_time = res.detail.value
			},
			sub() {
				console.log('dddd')
				let obj = this
				if (obj.uping) {
					return
				}
				if (obj.name == '') {
					return obj.$api.msg('请输入优惠券名称')
				}
				if (obj.store_info == '') {
					return obj.$api.msg('请输入优惠券介绍')
				}
				if (obj.price == '') {
					return obj.$api.msg('请输入优惠券价格')
				}
				if (obj.ot_price == '') {
					return obj.$api.msg('请输入优惠券原价')
				}
				if (obj.coupon_price == '') {
					return obj.$api.msg('请输入优惠券面值')
				}
				if (obj.start_time == '') {
					return obj.$api.msg('请输入优惠券开始时间')
				}
				if (obj.end_time == '') {
					return obj.$api.msg('请输入优惠券结束时间')
				}
				if (obj.stock == '') {
					return obj.$api.msg('请输入优惠券发放数量')
				}
				obj.uping = true
				storeCoupon({
					name: obj.name,
					price: obj.price,
					ot_price: obj.ot_price,
					coupon_price: obj.coupon_price,
					start_time: obj.start_time,
					end_time: obj.end_time,
					stock: obj.stock,
					store_info: obj.store_info,
				}).then(res => {
					obj.$api.showOk('添加成功')
					obj.uping = false
				}).catch(res => {
					obj.uping = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.jg {
		height: 20rpx;
	}

	.tab {
		width: 690rpx;
		margin: auto;
		border-radius: 10px;
		background-color: #fff;
		margin-bottom: 20rpx;

		.tab-item {
			padding: 0 20rpx;
			font-size: 30rpx;
			align-items: flex-start;
			line-height: 100rpx;
			border-bottom: 1px #F0F0F0 solid;

			&:last-of-type {
				border-bottom: none;
			}

			.item-name {
				flex-shrink: 0;
				width: 220rpx;
				color: #333333;
			}

			.item-area {
				// padding-top: 28rpx;
				border: 1px #F0F0F0 solid;
				margin: 28rpx 0;
				border-radius: 20rpx;
			}

			.item-val {
				display: inline-block;
				flex-grow: 1;
				text-align: left;
				line-height: 100rpx;
				height: 100rpx;
			}
		}
	}

	.sub {
		text-align: center;
		width: 560rpx;
		line-height: 80rpx;
		background: #ff005d;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: 500;
		margin: 80rpx auto 0;
	}

	.empty {
		color: #999999;
	}
</style>