xingmingyi_applet/pages/index/components/wordlist.vue

<template>
	<view class="box">
		<view v-if="flag == 2" class="boxlist">
			<view @click="nextTo(item)" class="bb vidLi dfsb" v-for="(item, ind) in list" :key="ind">
				<image class="imgbox" src="/static/img/pro/wodimg.png" mode=""></image>
				<view class="dffd flex1">
					<view class="title elli">{{ item.title }}</view>
					<view class="textgrey fontsm">{{ item.is_buy == 1 ? '已购买' : '未购买' }}</view>
				</view>
				<image v-if="flag == 2" class="down" src="../../../static/img/pro/navdown.png" mode=""></image>
			</view>
		</view>
		<view v-if="flag == 1" class="boxlist">
			<view @click="nextTo(item, 1)" class="bb vidLi dfsb" v-for="(item, ind) in list" :key="ind">
				<image class="imgbox" src="/static/img/pro/wodimg.png" mode=""></image>
				<view class="dffd flex1">
					<view class="title elli">{{ item.title }}</view>
					<view class="textgrey fontsm">已购买</view>
				</view>
				<image class="down" src="../../../static/img/pro/navdown.png" mode=""></image>
			</view>
		</view>
		<view v-if="flag == 4" class="boxlist">
			<view @click="nextTo(item, 1)" class="bb vidLi dfsb" v-for="(item, ind) in list" :key="ind">
				<image class="imgbox" src="/static/img/pro/wodimg.png" mode=""></image>
				<view class="dffd flex1">
					<view class="title elli">{{ item.title }}</view>
					<!-- <view class="textgrey fontsm">已购买</view> -->
				</view>
				<image class="down" src="../../../static/img/pro/navdown.png" mode=""></image>
			</view>
		</view><view v-if="flag == 5" class="boxlist">
			<view @click="nextTo(item, 1)" class="bb vidLi dfsb" v-for="(item, ind) in list" :key="ind">
				<!-- <image class="imgbox" src="/static/img/pro/wodimg.png" mode=""></image> -->
				<view class="dffd flex1">
					<view class="title elli">{{ item.title }}</view>
					<!-- <view class="textgrey fontsm">已购买</view> -->
				</view>
				<image class="down" src="../../../static/img/pro/navdown.png" mode=""></image>
			</view>
		</view>
		<view v-if="flag == 3" class="boxlist">
			<view v-if="item.is_buy == 0" class="bb vidLi dfsb" v-for="(item, ind) in list" :key="ind">
				<image class="imgbox" src="/static/img/pro/wodimg.png" mode=""></image>
				<view class="dffd flex1">
					<view class="title elli">{{ item.title }}</view>
					
					<text v-if="selType == 1&&item.price>0" class="priceDan">{{ item.price }}</text>
					<text v-if="selType == 1&&item.price==0" class="fontsm prosecond">免费</text>
					<view v-if="selType == 2" class="textgrey fontsm">{{ item.bean==0?'免费':item.bean+'学豆' }}</view>
<!-- 					<view v-if="selType == 1" class="textgrey fontsm">{{ item.bean==0?'免费':item.bean+'学豆' }}</view>
					<text v-if="selType == 2&&item.price>0" class="priceDan">{{ item.price }}</text>
					<text v-if="selType == 2&&item.price==0" class="fontsm prosecond">免费</text> -->
				</view>
				<image @click.stop="hhh(item, ind)" v-if="!item.sel" class="down" src="/static/img/pro/wxz.png" mode=""></image>
				<image @click.stop="hhh(item, ind)" v-if="item.sel" class="down" src="/static/img/pro/chenggong.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			path: ''
		};
	},
	props: {
		list: {
			type: Array,
			default: []
		},
		flag: {
			type: [String, Number],
			default: 1
		},
		selType: {
			type: [String, Number],
			default: 2
		}
	},
	methods: {
		hhh(item, ind) {
			console.log('hhh: ',item);
			// if(item.sel)
			item.sel = !item.sel;
			// console.log(111, item.sel);
			this.$emit('getItem', item.sel, ind);
		},
		nextTo(item, val) {
			let that = this;
			if ((that.flag == 2 && item.is_buy == 1) || val == 1) {
				// that.$api.toast('点击下载');
				let url = item.files;
				// 下载
				uni.downloadFile({
					url: url, //仅为示例，并非真实的资源
					success: res => {
						if (res.statusCode === 200) {
							that.$api.toast('下载成功');
							that.path = res.tempFilePath;
							console.log(res, that.path);
							//保存到本地
							uni.saveFile({
								tempFilePath: that.path,
								success: res1 => {
									//res.savedFilePath文件的保存路径
									//保存成功并打开文件
									uni.openDocument({
										filePath: res1.savedFilePath,
										showMenu:true,
										success: res2 => {
											that.$api.toast('打开成功');
										}
									});
								},
								fail: res3 => {
									console.log(res3);
									that.$api.toast('保存失败');
								}
							});
						} else {
							that.$api.toast('下载失败');
						}
					},
					complete: res12 => {
						console.log(res12);
						that.$api.toast(res12);
					},
					fail: res11 => {
						console.log(res11);
						that.$api.toast(res11);
					}
				});
			} else {
				that.$api.toast('请先购买');
			}
		}
	}
};
</script>

<style scoped lang="scss">
.boxlist {
	.vidLi {
		width: 100%;
		padding: 27rpx 0;
		background-color: #fff;
		&:nth-of-type(2n) {
			margin-right: 0;
		}
		.imgbox {
			width: 146rpx;
			height: 146rpx;
			margin-right: 18rpx;
		}
		.title {
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 12rpx;
		}
		.auth {
			margin-top: 15rpx;
			width: 100%;
		}
		.down {
			width: 40rpx;
			height: 40rpx;
			margin-right: 30rpx; 
		}
	}
}
</style>