ppl/pages/lanhu_jingxi/index - 副本.vue

<template>
	<view>
		<view>
			<view style="padding: 20rpx;">
				<view class="list-items_1 flex-row list" v-for="(item, index) in goodlist" :key="index">
					<view style="">
						<view style="position: absolute;z-index: 999;background-color: red;color:#fff;padding:2px;font-size: 11px;">{{ item.cname }}</view>
						<image :src="item.litpic" style="width: 150px;height: 120px;"></image>
					</view>
					
					<view class="group_3 flex-col">
						<text class="text_2" style="color: 'rgba(0,47,167,1)'">{{ item.name }}</text>
						<text class="text_3">乐票：{{ item.lpnum }}&nbsp;/&nbsp;{{ item.shouyi }}</text>
						<view class="text-wrapper_2 flex-row justify-between">
							<text class="text_4">周期：{{ item.tianshu }}天&nbsp;/&nbsp;{{ item.shouyi1 }}%</text>
							<text class="text_5" style="margin-left: 20px;">
								{{ item.kssj}}&nbsp;~&nbsp;{{ item.jssj}}
							</text>
						</view>
						<text class="text_6">￥{{ item.price }}</text>
						<view class="box_1 flex-row">
							<view
								@click="autoYuyue(item.id, 1, true)"
								class="text-wrapper_3 flex-col"
								style="background-color: hsl(223deg 49% 51%);"
							>
								<text class="text_7" style="margin-left: 1px;">自动一单</text>
							</view>
							<view @click="autoYuyue(item.id, 1, true)" class="text-wrapper_3 flex-col" style="background:#989898;">
								<text class="text_7" style="margin-left: 1px;">已结束</text>
							</view>
							<view
								@click="autoYuyue(item.id, 2, true)"
								class="text-wrapper_4 flex-col"
								style="background-color: hsl(223deg 49% 51%);"
							>
								<text class="text_8" style="margin-left: 1px;">自动二单</text>
							</view>
							<view
								@click="autoYuyue(item.id, 1, true)"
								class="text-wrapper_5 flex-col"
								style="background-color: hsl(223deg 49% 51%);"
							>
								<text class="text_9" style="margin-left: 1px;">手动预约</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view style="background-color: #fff;padding:10px;">
				<view style="padding-left: 10px;">确认预约单数</view>
				<input class="uni-input" style="height: 50px;margin:10px;border:solid 0px #999;border-radius: 5px;padding-left: 10px;" v-model="num" placeholder="输入预约单数" />
				<button style="width:150px;margin: 0 auto;background-color:dodgerblue;color: #fff;" @click="autoYuyue(0, 0, true)">确定预约</button>
			</view>
		</uni-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			constants: {},
			goodlist: [],
			num: 0,
			id: 0,
			userinfo: null
		};
	},
	onShow() {
		var user = this.$api.getUserinfo();
		if (user) {
			this.userinfo = user;
		} else {
			this.userinfo = null;
		}
	},
	filters: {
		formatDate: function(value, args) {
			var dt = new Date(value);
			if (args == 'yyyy-M-d') {
				// yyyy-M-d
				let year = dt.getFullYear();
				let month = dt.getMonth() + 1;
				let date = dt.getDate();
				return `${year}-${month}-${date}`;
			} else if (args == 'yyyy-M-d H:m:s') {
				// yyyy-M-d H:m:s
				let year = dt.getFullYear();
				let month = dt.getMonth() + 1;
				let date = dt.getDate();
				let hour = dt.getHours();
				let minute = dt.getMinutes();
				let second = dt.getSeconds();
				return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
			} else if (args == 'yyyy-MM-dd') {
				// yyyy-MM-dd
				let year = dt.getFullYear();
				let month = (dt.getMonth() + 1).toString().padStart(2, '0');
				let date = dt
					.getDate()
					.toString()
					.padStart(2, '0');
				return `${year}-${month}-${date}`;
			} else if (args == 'HH:mm') {
				// yyyy-MM-dd
				let hour = dt
					.getHours()
					.toString()
					.padStart(2, '0');
				let minute = dt
					.getMinutes()
					.toString()
					.padStart(2, '0');
				return `${hour}:${minute}`;
			} else {
				// yyyy-MM-dd HH:mm:ss
				let year = dt.getFullYear();
				let month = (dt.getMonth() + 1).toString().padStart(2, '0');
				let date = dt
					.getDate()
					.toString()
					.padStart(2, '0');
				let hour = dt
					.getHours()
					.toString()
					.padStart(2, '0');
				let minute = dt
					.getMinutes()
					.toString()
					.padStart(2, '0');
				let second = dt
					.getSeconds()
					.toString()
					.padStart(2, '0');
				return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
			}
		}
	},
	onLoad(option) {
		// console.log(option);
		this.getMhGoodlist();
	},
	methods: {
		autoYuyue(id, num, confirm) {
			if (!this.userinfo) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				return;
			}
			if (confirm == false) {
				this.id = id;
				this.num = num;
				//手动预约的  要求输入数量
				this.$refs.popup.open('bottom');
				return;
			}

			var data = new Object();
			data.cid = id;
			data.uid = this.userinfo.id;
			data.num = num;
			// console.log(data)
			this.$api
				.MhGetModel(data, 'jingxi/yuyue')
				.then(res => {
					// console.log('MhGoodAutoYuyue信息', JSON.stringify(res));
					if (res.data.code != 0) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						return;
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				})
				.catch(err => {
					// console.log('request fail', JSON.stringify(err));
				});
		},
		getMhGoodlist() {
			var data = new Object();
			this.$api
				.MhGetModel(data, 'jingxi/list')
				.then(res => {
					// console.log(res.data.code)
					
						// console.log('jingxi/list信息',JSON.stringify(res.data.data));
						this.goodlist = res.data.data;
					
				})
				.catch(err => {
					// console.log('request fail', JSON.stringify(err));
				});
		}
	}
};
</script>
<style lang="css">
@import '../common/common.css';
@import './assets/style/index.rpx.css';
page{padding: 15rpx;background:#b7bab3 no-repeat;}
.nav-counter {
	position: absolute;
	top: 11px;
	left: -8px;
	min-width: 8px;
	height: 20px;
	width: 20px;
	line-height: 19px;
	margin-top: -11px;
	font-weight: normal;
	color: white;
	text-align: center;
	text-shadow: 0 1px rgb(0 0 0 / 20%);
	background: #e23442;
	border: 1px solid #911f28;
	border-radius: 10px;
	background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
	background-image: -o-linear-gradient(top, #e8616c, #dd202f);
	background-image: linear-gradient(to bottom, #e8616c, #dd202f);
	-webkit-box-shadow: inset 0 0 1px 1px rgb(255 255 255 / 10%), 0 1px rgb(0 0 0 / 12%);
	box-shadow: inset 0 0 1px 1px rgb(255 255 255 / 10%), 0 1px rgb(0 0 0 / 12%);
}
.list{background: rgba(255,255,255,0.5);padding: 20rpx;border-radius: 10rpx;height: auto !important;}
.nav-counter-blue {
	background: #e8616c;
	border: 1px solid #dd202f;
	background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
	background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
	background-image: -o-linear-gradient(top, #e8616c, #dd202f);
	background-image: linear-gradient(to bottom, #e8616c, #dd202f);
}

</style>