H5-ThreeDoorder/pages/pages-recharge/shareRedEnvelopes/index.vue

<template>
	<view class="shareRedEnvelopes_content">
		<image :src="shareImg" class="share_img"> </image>
 
		<image :src="sucImg" v-if="status==1" class="share_img_1" @click="toHome"> </image>
		<image :src="errorImg" v-if="status==2" class="share_img_1" @click="toHome"> </image>
		<image :src="repeatImg" v-if="status==3" class="share_img_1" @click="toHome"> </image>
		<image :src="selfImg" v-if="status==4" class="share_img_1" @click="toHome"> </image>
		<view class="money_detail" v-show="status==1">已领取{{amont?amont/100:0}}元</view>
		<view class="money_detail" @click="toList" v-show="status==4||status==3">		<image :src="status==4?seeImg:useImg"  class="reciveImg" @click="toHome"> </image></view>
		<view :class="['detail_content',status==3||status==4?'detail_content_top1':'detail_content_top2']" @click="toHomeDetail">
			<view class="shareRedEnvelopes_title"> 消费补贴卡权益介绍</view>
			<view class="rich-text-content">
				卡内余额支持话费充值、影音娱乐、旅游出行等100+线上主流平台和美食餐饮、休闲娱乐、健康丽人等，线下支持万家联盟店等消费抵扣，覆盖生活的方方面面。
			</view>
		</view>
	</view>

</template>

<script>
	import {
		userAndRuleAPI,
		getVipShareStatus,
		toUseCard
	} from "@/request/recharge/index.js";
	import mixin from '@/static/js/mixin/mixin.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				equityContent: "",
				shareImg: 'https://img.agrimedia.cn/chwl/shareBg.png',

				sucImg: "https://img.agrimedia.cn/chwl/receiveRedenvelope.gif",
				errorImg: 'https://img.agrimedia.cn/chwl/receiveEnd.png',
				repeatImg: "https://img.agrimedia.cn/repeat.png",
				selfImg:"https://img.agrimedia.cn/self.png",
				  seeImg:'https://img.agrimedia.cn/seeImg.png',
				useImg:'https://img.agrimedia.cn/use.png',
				html: "",
				code: "",
				status: -7,
				amont: 0,
				html: "",
				code: "",
				status: 0,
			a:"",
			};
		},
		methods: {

			//获取VIP权益接口或者图片
			// getVipDesc() {
			// 	/**
			// 	 * @获取用户昵称和充值规则
			// 	 */
			// 	userAndRuleAPI().then((res) => {
			// 		this["html"] = res["data"]["rule"];
			// 		this[["nickname"]] = res["data"]["nickname"];
			// 		console.log(this["html"]);
			// 	});
			// },


			//判断分享成功失败
			getVipShareStatus() {

				getVipShareStatus({
					code: this.code
				}).then((res) => {
					if (res) {
						const {
							code,
							data
						} = res
				 	if (code == 200) {
							this.status = data.ck
							this.amont = data.amont
							this.a=JSON.stringify(data)
							console.log(JSON.stringify(data), "状态")
							console.log(data.ck, "状态")
							if (data.ck == 1) {
								this.toUseCard()
							}
							// 	uni.showToast({
							// 	title: data.msg,
							// 	icon: 'none'
							// });
						}
					}
				}).catch((error) => {

				})
			},


			//使用状态码
			toUseCard() {
				toUseCard({
					code: this.code
				}).then((res) => {
					if (res) {
						const {
							code
						} = res
						if (code == 200) {

						}
					}
				}).catch((error) => {

			 })
			},
			//跳转领取
			toHome() {
				if (this.status != 1) {
					return
				}

				this.toHomeDetail()
			},
			//权益卡详情跳转
			toHomeDetail() {
				if (getApp()['globalData']['parameters']?.isWechat) {
					wx.miniProgram.redirectTo({
						url: `/sub_card/index/index`
					});
				} else {
					uni.navigateTo({
						url: `/pages/pages-recharge/index/index`
					});
				}


			},
			//跳转
			toList(){
				if(this.status==4){
					uni.navigateTo({
						url: `/pages/pages-recharge/subgiftTotal/index`
					});
				}else{
                  this.toHomeDetail()
				}
				
			}

		},
		onShow() {
			this.code = getApp()['globalData']['parameters']['code']
			this.getVipShareStatus()
		},

	}
</script>

<style lang="scss">
	.shareRedEnvelopes_content {
		padding: 20rpx 24rpx;

		.share_img {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;

			z-index: -1;
		}

		.share_img_1 {
			height: 650rpx;
			width: 572rpx;
			position: absolute;
			left: 47%;
			margin-left: -260rpx;
		}

		.money_detail {
			position: absolute;
			top: 780rpx;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			left: 50%;
			color: #fff;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			.reciveImg{
				width: 380rpx;
				height: 120rpx;
			}
		}

		.detail_content {
			background: #d53c2c;
			position: absolute;
	
			border-radius: 20rpx;
			left: 24rpx;
			right: 24rpx;

			.shareRedEnvelopes_title {
				position: absolute;
				top: -20rpx;
				left: 50%;
				margin-left: -280rpx;
				width: 560rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: #ffb444;
				text-align: center;
				border-radius: 20rpx;
				color: #fff;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;

			}
		}
		.detail_content_top1{
			top: 950rpx;
		}
		.detail_content_top2{
			top: 850rpx;
		}

		.rich-text-content {
			font-size: 24rpx;
			color: #fff;
			padding: 60rpx 24rpx;
		}
	}
</style>