xihaigou/pages/user/newVip.vue

<template>
	<view class="content">
		<image src="../../static/index/vip01.png" mode=""></image>
		<view class="box">
			<view class="tit-box">
				<image class="img" src="../../static/index/vip02.png" mode=""></image>
				<view class="tit-tit">
					新人专享福利
				</view>
				<image class="img" src="../../static/index/vip02.png" mode=""></image>
			</view>
			<view class="box-con-img">
				<image src="../../static/index/vip04.png" mode=""></image>
			</view>
			<view class="buy" @click="buy()">
				新会员专享¥{{cj ||0}}
			</view>
		</view>
		<!-- <view class="box" style="top: 1100rpx;">
			<view class="tit-box">
				<image class="img" src="../../static/index/vip02.png" mode=""></image>
				<view class="tit-tit">
					新人规则
				</view>
				<image class="img" src="../../static/index/vip02.png" mode=""></image>
			</view>
			<view class="box-guize">
				<view class="content-guize">
					<view class="left">
						1
					</view>
					<view class="gz">
						新人福利新人福利新人福利新人福利新人福
						利新人福利。
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		cJbuy,
		cJiang
	} from '@/api/index.js'
	export default {
		data() {
			return {
				list: [], //抽奖

			};
		},
		onLoad() {

		},
		beforeDestroy() {
			console.log('定时器销毁1');
			if (this.timer) {
				clearTimeout(this.timer); //关闭
				console.log('定时器销毁');
			}
		},

		onShow() {
			this.loadDate()
		},
		computed: {
			cj() {
				return `${this.list.price ||0}(${this.list.count||0}次)`
			}
		},
		methods: {
			async loadDate() {
				await cJiang({}).then(res => {
					console.log(res, 'res');
					this.list = res.data
				})
			},

			buy() {
				cJbuy().then(res => {
					console.log(res, 'resssssss');
					this.loadDate()
					if (res.status == 200) {
						this.$api.msg(res.msg)
						
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/user/user',
								})
							}, 1000)
						

					}
					console.log('中间执行了');
			
				}).catch(res=>{
					if (res.msg == '请填写地址'&&res.status==400) {
						console.log('执行了');
						this.$api.msg(res.msg)
						let time = setTimeout(function() {
							uni.navigateTo({
								url: '/pages/set/address'
							}, )
						}, 1500)
					} 
				}
				
				)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		margin: 0;
		padding: 0;
		z-index: 99;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		padding: 20rpx 0;
		width: 590rpx;
		background: #FFFEFC;
		border: 12rpx solid #FDDB8E;
		border-radius: 20rpx;

		position: absolute;
		top: 600rpx;
		z-index: 999;
		left: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.box-guize {
			.content-guize {
				display: flex;
				padding: 30rpx;
				justify-content: space-around;

				.left {
					width: 34rpx;
					height: 34rpx;
					background: #EE4C47;
					border-radius: 50%;
					font-size: 25px;
					font-family: FZLTHJW;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 34px;
					text-align: center;
				}

				.gz {
					margin-left: 10rpx;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;

				}
			}
		}

		.tit-box {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.img {
				width: 17rpx;
				height: 15rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.tit-tit {
				margin: 0 40rpx;
				height: 67rpx;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #F94C2B;
				line-height: 67rpx;
			}
		}

		.box-con-img {
			margin: 20rpx 0;
			width: 240rpx;
			height: 240rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.buy {
			// width: 340rpx;
			padding: 0 20rpx;
			height: 58rpx;
			background: linear-gradient(-2deg, #DB1A34, #FA5244, #EF4744);
			box-shadow: 0rpx 7rpx 13rpx 0rpx rgba(225, 38, 55, 0.3100);
			border-radius: 16rpx;
			line-height: 58rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: FZLTCHK;
			font-weight: normal;
			color: #FFFFFF;
		}
	}
</style>