xingmingyi_applet/pages/index/navDet.vue

<template>
	<view class="container">
		<view class="conwarp">
			<view class="gdHead dffs">
				<view class="head flex1">{{ goodInfo.info.name }}</view>
				<text v-for="(item, index) in goodInfo.info.tags.split('|')" class="desc">{{ item }}</text>
			</view>
			<view class="subtit textgrey fontssm">{{ goodInfo.info.desc }}</view>
			
			<block v-if="goodInfo.class_vedio_status == 1">
				<view v-if="goodInfo.info.vedio" class="cl-one">
					<video class="vidBox" :src="goodInfo.info.vedio" controls></video>
				</view>
			</block>
		</view>
		<view class="conwarp">
			<view class="gdHead"><view class="head">解析文档</view></view>
			<view class="cl-one">
				<view class="xqcont">
					<u-parse :content="goodInfo.info.content"></u-parse>
					<!-- <view class="xqleft dffd">
						<image
							@click="cliCot(1)"
							class="small"
							:src="goodInfo.info.is_collection == 1 ? '/static/img/pro/navcolsel.png' : '/static/img/pro/navcol.png'"
							mode=""
						></image>
						<view class="word">收藏</view>
						<image @click="cliCot(2)" class="big" :src="goodInfo.info.is_give == 1 ? '/static/img/pro/navgodsel.png' : '/static/img/pro/navgod.png'" mode=""></image>
						<view class="word">{{ goodInfo.info.like_num || 0 }}</view>
						<button open-type="share" class=" shareBtn " type="default">
							<image class="small" src="/static/img/pro/navshare.png" mode=""></image>
							<view class="word">分享</view>
						</button>
					</view> -->
					<view class="btnsBox dffd">
						<image @click="cliCot(2)" class="small" :src="goodInfo.info.is_give == 1 ? '/static/img/pro/navgodsel.png' : '/static/img/pro/navgod.png'" mode=""></image>
						<view class="fontssm textgrey">{{ goodInfo.info.like_num || 0 }}人喜欢</view>
						<view class="dfsb">
							<view @click="cliCot(1)" class="btns dfsb">
								<image class="icon" :src="goodInfo.info.is_collection == 1 ? '/static/img/pro/navcolsel.png' : '/static/img/pro/navcol.png'" mode=""></image>
								<view class="word">收藏</view>
							</view>
							<button open-type="share" class="btns shareBtn dfsb">
								<image class="icon" src="/static/img/pro/navshare1.png" mode=""></image>
								<view class="word">分享</view>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="conwarp">
			<view class="gdHead"><view class="head">文档下载</view></view>
			<view class="cl-one"><video-list :flag="2" :list="goodInfo.files"></video-list></view>
		</view>
		<view class="fixBox dfsb">
			<view @tap="toPay()" class="li flex1 dffs">
				<image src="/static/img/pro/navlidown.png" mode=""></image>
				普通下载
			</view>
			<view class="line"></view>
			<view @tap="toPay()" class="li flex1 dffs">
				<image src="/static/img/pro/navlivdown.png" mode=""></image>
				会员下载
			</view>
			<!-- <navigator :url="'/pages/pay/pay?id=' + id" class="li flex1 dffs">
				<image src="/static/img/pro/navlidown.png" mode=""></image>
				普通下载
			</navigator>
			<view class="line"></view>
			<navigator :url="'/pages/pay/pay?id=' + id" class="li flex1 dffs">
				<image src="/static/img/pro/navlivdown.png" mode=""></image>
				会员下载
			</navigator> -->
		</view>
	</view>
</template>
<script>
import videoList from './components/wordlist.vue';

export default {
	components: {
		videoList
	},

	data() {
		return {
			id: 0, //商品id
			goodInfo: { tags: '', info: '' }
		};
	},

	onLoad(option) {
		console.log(option);
		if (option.scene) {
			let scene = decodeURIComponent(option.scene);
			let id =scene.split('=')[1]
			console.log(scene);
			this.id = id;
		} else {
			this.id = option.id;
		}
		this.loadData();
		this.$store.dispatch('getUserInfo');
	},
	onShareAppMessage() {
		let that = this;
		return {
			title: that.goodInfo.info.name,
			path: `/pages/index/navDet?id=${this.id}&invite_id=${this.token()}`
		};
	},

	methods: {
		// val  1收藏 2点赞
		cliCot(val) {
			let url = val == 1 ? 'collection/setCollection' : 'give/setGive';
			// type	2 类型:  1=商品 2=文档  3=视频
			// coll_id 收藏ID  (分为:  商品ID  ,  文档ID  ,  视频ID)
			this.$api
				.request(url, {
					coll_id: this.goodInfo.info.id || '',
					r_id: this.goodInfo.info.id || '',
					type: 2
				})
				.then(res => {
					this.$api.toast(res.msg);
					if (res.code == '200') {
						setTimeout(res => {
							this.loadData();
						}, 600);
					}
				});
		},
		/**
		 * 请求数据只是为了代码不那么乱
		 * 分次请求未作整合
		 */
		async loadData() {
			let url = 'index/getClassInfo';
			this.$api
				.request(url, {
					id: this.id
				})
				.then(res => {
					if (res.code == '200') {
						let data = res.data;
						this.goodInfo = data;
					}
				});
		},

		showPopup(key, type) {
			this.$refs[key].open(type);
		},
		
		toPay()
		{
			if(this.goodInfo.info.level_time == 0)
			{
				uni.showToast({
					icon:'none',
				    title: '普通会员无法下载!',
				    duration: 2000,
				});
				
				setTimeout(res => {
					uni.navigateTo({
						url: '/pages/user/mine/member'
					});
				}, 2000);
				
				return;
			}
			
			uni.navigateTo({
			    url: '/pages/pay/pay?id=' + this.id
			});
			
		},

		//立即购买
		buyNow(data) {
			
			
			
			const parms = this.getConfirmData(data);
			console.log(parms);
			if (!parms) {
				return;
			}
			// parms.id = parms.gid;
			this.hidePopup('skuPopup');
			this.navTo('/pages/order/createOrder?data=' + JSON.stringify(parms), 'post', {
				login: true
			});
		}
		// ,
		//立即购买
		// async buyNow(data) {
		// 	this.getConfirmData(data);
		// 	this.$request('/api/cart/addCart', {
		// 			goods_id: this.id,
		// 			nums: 1,
		// 			nums_type: 2
		// 		})
		// 		.then(res => {
		// 			if (res.code == '200') {
		// 				this.navTo('/pages/order/createOrder?type=buyNow&ids=' + res.data, {
		// 					login: true
		// 				})
		// 			} else {
		// 				this.$util.msg(res.msg);
		// 			}
		// 		});
		// }
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding-bottom: 120rpx;
	.conwarp {
		background-color: #fff;
		padding: 26rpx 30rpx 39rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		.gdHead {
			line-height: 58rpx;
			margin-bottom: 16rpx;
			.head {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 48rpx;
			}
			.desc {
				background: #f89638;
				border-radius: 5rpx;
				font-size: 18rpx;
				height: 32rpx;
				line-height: 32rpx;
				padding: 0rpx 8rpx;
				display: inline-block;
				color: #fff;
				margin-left: 10rpx;
				&:nth-of-type(2) {
					background: #7fc06e;
				}
				&:nth-of-type(3) {
					background: #75b2c4;
				}
				&:nth-of-type(4) {
					background: #8875c0;
				}
			}
		}
		.subtit {
			margin-top: 10rpx;
		}
		.cl-one {
			.vidBox {
				margin-top: 30rpx;
				width: 690rpx;
				height: 335rpx;
			}
			.xqcont {
				min-height: 800rpx;
				width: 100%;
				align-items: center;
				.xqleft {
					position: fixed;
					top: 50%;
					right: 0;
					align-items: center;
					justify-content: center;
					.small {
						width: 54rpx;
						height: 54rpx;
					}
					.big {
						width: 108rpx;
						height: 108rpx;
					}
					.word {
						margin: 8rpx 0 48rpx;
						font-size: 20rpx;
						color: #999;
					}
				}
				.btnsBox {
					align-items: center;
					.small {
						width: 90rpx;
						height: 90rpx;
						margin: 60rpx 0 16rpx;
						opacity: 0.8;
					}
					.btns {
						margin: 70rpx 60rpx 0;
						width: 154rpx;
						height: 54rpx;
						background: #f6f6f6;
						border-radius: 31px;
						align-items: center;
						padding: 0 15rpx;
						justify-content: space-around;
						.icon {
							width: 35rpx;
							height: 31rpx;
						}
						.word {
							font-size: 22rpx;
							color: #666;
						}
					}
				}
			}
		}
	}
	.fixBox {
		padding: 34rpx;
		.line {
			width: 1rpx;
			height: 20rpx;
			background: #b7b7bd;
		}
		.li {
			justify-content: center;
			color: #7fc06e;
			image {
				width: 42rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}
	}
}
</style>