xpl/pages/index/appointmentD.vue

<template>
	<view class="center">
		<view class="card">
			<view class="bor">
				<view class="bor-top flex">
					<view class="user flex">
						<view class="avtor"><image class="portrait" :src="userInfo.avatar || '/static/img/missing-face.png'"></image></view>
						<view class="name-box">
							<view class="name clamp">{{ userInfo.phone || userInfo.email || '游客' }}</view>
							<template v-if="list.my">
								<view class="tip" style="margin-top: 10rpx;" v-if="list.my.is_forever=1">永久开通</view>
								<view class="tip" style="margin-top: 10rpx;" v-else>距离到期还有{{ list.js }}天</view>
							</template>
							<view class="tip" style="margin-top: 10rpx;" v-else>尚未开通</view>
						</view>
					</view>
					<view class="type">{{ list.my ? '已开通' : '未开通' }}</view>
				</view>
				<view class="ling-box flex">
					<view class="ling-left"><view class="ling-title">开启自动拼团</view></view>
					<view class="flex">
						<u-switch :loading="checkedLoding" v-model="checkedAuto" active-color="#FED591" active-value="1" inactive-value="0" @change="changeTye"></u-switch>
						<text style="margin-left: -40rpx; z-index: 0;font-weight: bold;font-size: 30rpx;font-family: PingFang SC;font-weight: bold;color: #333333;">关</text>
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="top flex">
				<view class="bg"><image src=".../../static/img/index4.png" mode=""></image></view>
				<view class="title">{{ list.name }}</view>
			</view>
			<view class="main-bg"><image src="../../static/img/auto.png" mode=""></image></view>
			<view class="font">
				预约消耗：
				<span class="money">{{ list.money * 1 }}{{ list.money_type }}</span>
			</view>
			<view class="font" style="margin-top: 10rpx;">
				预约时间：
				<span class="time">{{ list.is_forever == 1 ? '永久' : list.valid_date + '天' }}</span>
			</view>
			<view class="font" style="margin-top: 10rpx;">
				适用拼购：
				<span class="time">{{ list.lalaname }}</span>
			</view>
			<view class="btn" @click="buy()">立即购买</view>
		</view>
		<u-popup v-model="show1" mode="center" width="548rpx" border-radius="14">
			<view class="psw-wrapper">
				<view class="psw-title">请输入支付密码</view>
				<input type="password" v-model="password" class="psw-ipt" />
				<view class="psw-btn">
					<text @click="cancel">取消</text>
					<text class="psw-qd" @click="pswQd">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { autoDetails, buyauto, openclose } from '@/api/product.js';
export default {
	data() {
		return {
			id: '',
			list: '',
			show1: false,
			password: '',
			autoid: '',
			checkedAuto: false, //是否开启自动领红包
			checkedLoding: false //请求自动加载设置保存中
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.loadData();
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	methods: {
		async loadData() {
			const obj = this;
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			autoDetails({}, this.id).then(({ data }) => {
				obj.list = data;
				obj.list.lalaname = '';
				if (data.my) {
					obj.autoid = data.my.id;
					let time = Date.parse(new Date()).toString(); //获取到毫秒的时间戳，精确到毫秒
					time = (time.substr(0, 10))*1;
					let date = data.my.valid_time - time;
					console.log(date,data.my.valid_time,time)
					obj.list.js = (date / (3600 * 24)).toFixed(0);
					if (date % (3600 * 24) != 0) {
						obj.list.js = 1 + obj.list.js * 1;
					}
					if (data.my.status == 1) {
						obj.checkedAuto = true;
					}
				}
				for (let i = 0; i < data.lalas.length; i++) {
					if (i == 0) {
						obj.list.lalaname += data.lalas[i].name;
					} else {
						obj.list.lalaname += ',' + data.lalas[i].name;
					}
				}
				console.log(obj.list);
				uni.hideLoading();
			});
		},
		buy() {
			this.show1 = true;
		},
		cancel() {
			this.password = '';
			this.show1 = false;
		},
		pswQd() {
			const obj = this;
			buyauto(
				{
					trade_psw: this.password
				},
				this.id
			)
				.then(e => {
					this.password = '';
					this.show1 = false;
					this.$api.msg('购买自动拼团成功');
				})
				.catch(e => {
					this.password = '';
					this.show1 = false;
					console.log(e);
				});
		},
		changeTye(e) {
			if (this.checkedLoding) {
				return;
			}
			this.checkedLoding = true;
			if (this.autoid == '') {
				this.$api.msg('还未够买该服务或该服务已过期');
				this.checkedLoding = false;
				this.checkedAuto = false;
			} else {
				openclose({}, this.autoid)
					.then(e => {
						uni.showToast({
							title: '设置成功！'
						});
						this.checkedLoding = false;
						// this.checkedAuto = !this.checkedAuto
					})
					.catch(e => {
						console.log(e);
						this.checkedLoding = false;
					});
			}
		}
	}
};
</script>

<style lang="scss">
.card {
	padding: 12rpx;
	width: 700rpx;
	background: linear-gradient(270deg, #ffeacb 0%, #fed591 100%);
	border-radius: 20rpx;
	margin: 26rpx auto;
	.bor {
		border: 1px solid rgba(205, 180, 122, 0.38);
		border-radius: 20rpx;
		padding: 28rpx 25rpx 39rpx 32rpx;
		.bor-top {
			justify-content: space-between;
			.user {
				justify-content: flex-start;
				.avtor {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.name-box {
					margin-left: 22rpx;
					.name {
						width: 356rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
					.tip {
						margin-top: 6rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #a89575;
					}
				}
			}
			.type {
				width: 180rpx;
				height: 64rpx;
				background: rgba(215, 160, 116, 0.29);
				border-radius: 32px;
				text-align: center;
				line-height: 64rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #6e482b;
				opacity: 0.47;
			}
		}
		.ling-box {
			margin-top: 60rpx;
			.ling-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #644931;
			}
		}
	}
}
.box {
	margin: 20rpx auto 0;
	width: 690rpx;
	padding: 20rpx 20rpx 52rpx 30rpx;
	background: #ffffff;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	.top {
		justify-content: flex-start;
		align-items: center;
		.bg {
			width: 48rpx;
			height: 46rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.title {
			margin-left: 10rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0f253a;
		}
	}
	.main-bg {
		width: 520rpx;
		height: 165rpx;
		margin: 55rpx auto 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.font {
		margin-top: 62rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6d7c88;
		.money {
			font-size: 30rpx;
			color: #2e58ff;
		}
		.time {
			color: #0f253a;
		}
	}
	.btn {
		width: 558rpx;
		height: 80rpx;
		background: linear-gradient(0deg, #2e58ff, #32c6ff);
		border-radius: 40rpx;
		margin: 49rpx auto 0;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
}
.psw-wrapper {
	width: 548rpx;
	height: 344rpx;
	background-color: #ffffff;
	.psw-title {
		width: 100%;
		font-size: 35rpx;
		padding: 43rpx 0 49rpx;
		text-align: center;
		font-weight: 800;
	}
	.psw-ipt {
		display: block;
		background-color: #dce3ed;
		height: 90rpx;
		width: 464rpx;
		padding-left: 30rpx;
		margin: 0 auto;
		font-size: 80rpx;
	}
	.psw-btn text {
		display: inline-block;
		text-align: center;
		width: 50%;
		padding-top: 29rpx;
		font-size: 35rpx;
	}
	.psw-qd {
		color: #2e58ff;
	}
}
</style>