IHG/pages/my/prize/exchangeDetail.vue

<template>
	<view class="exchangeDetail">
		<!-- 自定义导航栏 -->
		<u-navbar :leftText='title' fixed safeAreaInsetTop :placeholder='true' :bgColor="bgColor" @leftClick='back'>
		</u-navbar>
		<!-- 兑换状态 -->
		<view class="detailCard" v-if="productType == 2 ">
			<image src="/static/icon/success.png"></image>
			<text>奖品兑换成功</text>
		</view>

		<view class="detailCard" v-if="productType == 1 ">
			<image src="/static/icon/success.png"></image>
			<text>商品兑换成功</text>
			<text>-{{integral}}积分</text>
		</view>

		<!-- 按钮 -->
		<view class="btn">
			<view class="back" @click="goBack">
				<text>返回首页</text>
			</view>
			<view class="checkout" @click="goOrderDetail">
				<text>查看订单</text>
			</view>
		</view>
		<!-- 加入会员 -->
		<view class="bottomCard">
			<!-- 广告图 -->
			<view class="home-banner">
				<view class="home-banner-img" v-if="in_page==3 && type == 1"
					@click="goOtherPage(jump_type,jump_config)">
					<image style="width: 100%; height: 492rpx;border-radius: 12rpx 12rpx 0 0;" :src="advData.img" mode="">
					</image>
				</view>
				<view class="home-banner-img" v-if="in_page==3 && type == 2">
					<image class="banner-img" v-if="!isOpenVideo" @click="openVideoPlay"
						style="width: 100%; height: 492rpx; border-radius: 12rpx 12rpx 0 0;" :src="videoCoverImg" mode=""></image>
					<video class="baner-video" id="myVideo" ref="myVideo"
						style="width: 100%; height: 492rpx;border-radius: 12rpx 12rpx 0 0;" :src="videoSrc" controls
						:enable-progress-gesture="false">
					</video>
				</view>
			</view>
			<view class="content" @click="goJoin">
				<text>立即加入IHG会员</text>
				<image src="/static/icon/right.png"></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//跳转h5,小程序,其他页面
				jump_type_vip: '',
				jump_config_vip: {},
				//加入会员广告配置
				advise: '',
				//自定义导航栏
				bgColor: '#f9f9f9',
				title: '兑换详情',
				//积分商品1奖品2兑换
				productType: '',
				//积分
				integral: '',

				admin: '',
				isOpenVideo: false,
				jump_type: '',
				jump_config: '',
				advData: '',
				advertis: '',
				in_page: '',
				type: '',
				videoCoverImg: '',
				videoSrc: ''
			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad(o) {
			this.getAdvertis()
			this.admin = this.$store.getters.userInfo
			if (o.productType == 1) {
				this.productType = o.productType
				this.integral = o.integral
			}else if(o.productType == 2){
				this.productType = o.productType
			}
			
			this.advise = this.$store.getters.allset.add_member
			this.jump_type_vip = this.advise.value.exchange_jump_type
			if (this.jump_type_vip == 1) {
				this.jump_config_vip = this.advise.value.exchange_h5_url
			} else if (this.jump_type_vip == 2) {
				this.jump_config_vip.appid = this.advise.value.exchange_appid
				this.jump_config_vip.path = this.advise.value.exchange_path
			} else if (this.jump_type_vip == 3) {
				this.jump_config_vip = this.advise.value.exchange_other_path
			}
		},
		
		 onUnload() {
		     this.back()
		},	
		methods: {
			//返回上一级
			back() {
				if(this.productType == 1){
					uni.$emit('refreshData')
					uni.navigateBack({
						delta: 2,
					})
				}else if(this.productType == 2){
					uni.$emit('refreshPrizeData')
					uni.navigateBack({
						delta: 1,
					})
				}
			},
			//广告图
			getAdvertis() {
				this.$api.document.allSet().then(res => {
					this.advertis = res.data.advertises.filter(item => {
						return item.in_page == 3
					})
					this.advData = this.advertis[0];
					console.log(this.advData.img, '------>this.advData');
					if (this.advertis[0].type == 1) {
						this.in_page = 3
						this.type = 1
						this.jump_type = this.advData.jump_type
						this.jump_config = this.advData.jump_config
					} else if (this.advertis[0].type == 2) {
						this.in_page = 3
						this.type = 2
						this.videoCoverImg = this.advertis[0].video_cover
						this.videoSrc = this.advertis[0].video
					}
				})
			},
			//点击视频封面图片,播放视频
			openVideoPlay() {
				this.isOpenVideo = !this.isOpenVideo
				this.videoContext.play()
			},

			//跳转方法
			jumpHAppID(id, urls) {
				if (id == 1) {
					const url = urls; // 跳转的外链
					const navtitle = 'H5'; // 这个标题是你自己可以设置的
					uni.navigateTo({
						// 跳转到webview页面
						url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
						success: () => {
							console.log('成功')
						},
						fail: (e) => {
							console.log(e, "失败")
						}
					});
				} else if (id == 2) {
					let obj = JSON.parse(urls);
					wx.navigateToMiniProgram({
						appId: `${obj.appid}`, //appid
						path: `${obj.path}`, //path
						extraData: { //参数
							foo: 'bar'
						},
						// envVersion: 'develop', //开发版develop 开发版 trial   体验版 release 正式版 
						success(res) {
							console.log('成功')
							// 打开成功
						},
						fail(e) {
							console.log(e, '失败')
						}
					})
				} else if (id == 3) {
					uni.redirectTo({
						url: urls,
						fail: (err) => {
							uni.reLaunch({
								url: urls
							})
						}
					})
				}
			},

			//点击图片跳转
			goOtherPage(id, url) {
				this.jumpHAppID(id, url)
			},


			// 返回首页
			goBack() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			// 跳转订单详情
			goOrderDetail() {
				uni.navigateTo({
					url: '/pages/my/myorders/orders'
				})
			},
			//获取当前页面路径
			getPageUrl() {
				const pages = getCurrentPages();
				console.log(pages, '--------->pages')
				if (pages.length == 1) {
					const currentPage = pages[0];
					let pageUrl = `/${currentPage.route}`;
					return pageUrl
					console.log('当前页面url：', pageUrl);
				} else {
					const currentPage = pages[pages.length - 1];
					let pageUrl = `/${currentPage.route}`;
					return pageUrl
					console.log('当前页面url：', pageUrl);
				}
			},
			// 跳转其他小程序
			jumpHAppIDVip(id, urls) {
				if (id == 1) {
					const url = urls; // 跳转的外链
					const navtitle = 'H5'; // 这个标题是你自己可以设置的
					uni.navigateTo({
						// 跳转到webview页面
						url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
						success: () => {
							console.log('成功')
						},
						fail: (e) => {
							console.log(e, "失败")
						}
					});
				} else if (id == 2) {
					let _this = this
					let obj = urls;
					console.log(obj, '----->obj');
					wx.navigateToMiniProgram({
						appId: `${obj.appid}`, //appid
						path: `${obj.path}`, //path
						extraData: { //参数
							foo: 'bar'
						},
						// envVersion: 'develop', //开发版develop 开发版 trial   体验版 release 正式版 
						success(res) {
							let page = _this.getPageUrl()
							let user_id = ''
							if (_this.admin != null) {
								user_id = _this.admin.id
							} else {
								user_id = 0
							}
							_this.$api.my.userMemberAdd({
								user_id,
								page,
							}).then(res => {
								console.log(res.data);
							})
							// 打开成功
						},
						fail(e) {
							console.log(e, '失败')
						}
					})
				} else if (id == 3) {
					uni.redirectTo({
						url: urls,
						fail: (err) => {
							uni.reLaunch({
								url: urls
							})
						}
					})
				}
			},
			
			// 跳转其他小程序
			goJoin() {
				let _this = this
				this.jumpHAppIDVip(this.jump_type_vip, this.jump_config_vip)
			},
		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.exchangeDetail {
		height: 100%;
		background: $pageColor;
	}

	.detailCard {
		width: 750rpx;
		height: 446rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 48rpx;
		}

		text {
			display: block;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #080F18;
		}
	}

	.btn {
		width: 750rpx;
		height: 76rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;

		.back {
			width: 332rpx;
			height: 76rpx;
			background: #F5F5F5;
			border-radius: 8rpx;

			@include flexlayout() text {
				font-size: 30rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FF6301;
			}
		}

		.checkout {
			width: 332rpx;
			height: 76rpx;
			background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
			border-radius: 8rpx;

			@include flexlayout() text {
				font-size: 30rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}

	.bottomCard {
		width: 690rpx;
		height: 584rpx;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 16rpx 0px rgba(220, 222, 229, 0.71);
		border-radius: 20rpx;
		background: $bgColor;
		margin-left: 30rpx;
		margin-top: 64rpx;
		position: relative;

		image {
			width: 690rpx;
			height: 492rpx;
		}

		.content {
			width: 690rpx;
			height: 92rpx;
			position: absolute;
			bottom: 0;
			margin-top: -9rpx;;
			@include flexlayout();

			image {
				width: 12rpx;
				height: 20rpx;
				margin-left: 8rpx;
			}

			text {
				font-size: 30rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #333333;
				text-shadow: 0px 8rpx 16rpx rgba(220, 222, 229, 0.71);
			}
		}
	}


	.home-banner {
		// height: 640rpx;
		// padding: 0 30rpx;
		// padding-top: 64rpx;

		.home-banner-img {
			position: relative;
			width: 100%;

			// height: 100%;
			.baner-video {
				position: absolute;
				top: 0;
				left: 0;
			}

			.banner-img {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9;
			}

			.img-clean {
				position: absolute;
				right: 28rpx;
				top: 30rpx;
				z-index: 99;
			}

			.img-IHg {
				width: 84rpx;
				height: 84rpx;
				background-color: #fff;
				box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: fixed;
				top: 1030rpx;
				right: 30rpx;
				z-index: 99;

			}
		}
	}
</style>