football/pages/card/index/index.vue

f<template>
	<app-layout>
		<app-tab-nav :tabList="tabList" :activeItem="activeTab" @click="tabStatus" :theme="theme"></app-tab-nav>
		<view class="card-list">
			<view @click="toDetail(item.id)" v-for="item in list" :key="item.id">
				<view class="card-item">
					<image class="card-img" :src="item.pic_url"></image>
					<view class="name">{{item.name}}</view>
					<view class="right-box">
						<image v-if="item.is_may_use == 1" class="card-qr" @click.stop="showModal(item.id)" src="/static/image/icon/icon-card-qrcode.png"></image>
						<span>{{activeTab == 3 ? '未核销' : '剩余'}}{{item.surplus_number}}次</span>
					</view>
				</view>
			</view>
		</view>
		<view class="no-list" v-if="list.length === 0">
			<app-no-goods background="#f7f7f7" :title="title"></app-no-goods>
		</view>
		<view class="qr-modal" @click="show=false" v-if="show">
			<view class="look-qr" @click.stop="showModal(0)">
				<view>卡券二维码</view>
				<view>
					<image :src="img"></image>
				</view>
				<view style="height: 60rpx">
					<view @click="saveImg">
						<button :class="[`${theme}-background`]">保存图片</button>
					</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appTabNav from "../../../components/basic-component/app-tab-nav/app-tab-nav.vue";
	import appNoGoods from '../../../components/page-component/app-no-goods/app-no-goods.vue';

	import {
		mapState
	} from "vuex";

	export default {
		data() {
			return {
				tabList: [{
						id: 1,
						name: '未使用'
					},
					{
						id: 2,
						name: '已使用'
					},
					{
						id: 3,
						name: '已过期'
					}
				],
				show: false,
				img: '/images/share/img-share-order.png',
				activeTab: 1,
				list: [],
				more: false,
				page: 2,
				// title: '暂无未使用优惠券~'
				title: '暂无课程~',
				type: 1, //我的课程1 我的比赛2
			}
		},
		components: {
			'app-tab-nav': appTabNav,
			'app-no-goods': appNoGoods,
		},
		computed: {
			...mapState({
				theme: state => state.mallConfig.theme,
				userInfo: state => state.user.info,
			})
		},
		methods: {
			saveImg() {
				let that = this;
				// #ifndef MP-ALIPAY
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success(res) {
						if (res.errMsg == "authorize:ok") {
							uni.downloadFile({
								url: that.img,
								success(res) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success() {
											uni.showToast({
												title: '保存成功',
												icon: 'success',
												duration: 1000
											})
										},
										fail() {
											uni.showToast({
												title: '保存失败',
												icon: 'none',
												duration: 1000
											})
										}
									})
								}
							})
						}
					},
					fail(res) {
						uni.showModal({
							title: '提示',
							content: '保存失败，需要授权保存到相册权限',
							showCancel: false,
							confirmText: '打开授权',
							success(e) {
								if (e.confirm) {
									uni.openSetting({});
								}
							}
						});
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.showLoading({
					content: '图片保存中'
				});
				my.saveImage({
					url: that.img,
					showActionSheet: true,
					success: (res) => {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 1000
						})
					},
					fail() {
						uni.showToast({
							title: '保存失败',
							icon: 'none',
							duration: 1000
						})
					},
					complete() {
						my.hideLoading();
					}
				});
				// #endif
			},

			showModal(id) {
				let that = this;
				if (id > 0) {
					uni.showLoading({
						text: '生成中...'
					});
					that.$request({
						url: that.$api.card.qrcode,
						data: {
							cardId: id,
						},
						method: 'get'
					}).then(response => {
						uni.hideLoading();
						if (response.code === 0) {
							that.show = true;
							that.img = response.data.file_path;
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none',
								duration: 1000,
							});
						}
					}).catch(response => {
						uni.hideLoading();
						uni.showToast({
							title: response,
							icon: 'none',
							duration: 1000,
						});
					});
				}
			},

			tabStatus(e) {
				this.list = [];
				let id = e.currentTarget.dataset.id;
				// if (id === 1) {
				//     this.title = `暂无未使用优惠券~`;
				// } else if (id === 2) {
				//     this.title = `暂无已使用优惠券~`;
				// } else if (id === 3) {
				//     this.title = `暂无已过期优惠券~`;
				// }              
				if (id === 1) {
					if (this.type == 2) {
						this.title = `暂无比赛~`;
					} else {
						this.title = `暂无课程~`;
					}
				} else if (id === 2) {
					if (this.type == 2) {
						this.title = `暂无比赛~`;
					} else {
						this.title = `暂无课程~`;
					}
				} else if (id === 3) {
					if (this.type == 2) {
						this.title = `暂无比赛~`;
					} else {
						this.title = `暂无课程~`;
					}
				}
				this.page = 2;
				this.activeTab = id;
				this.getList();
			},
			getList() {
				let that = this;
				that.$showLoading({
					text: '加载中...'
				});
				that.$request({
					url: that.type == 1 ? that.$api.card.index + '&type=1' : that.type == 2 ? that.$api.card.index + '&type=2' : that.$api.card.index + '&type=3',
					data: {
						status: that.activeTab
					},
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						that.list = response.data.list;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.$hideLoading();
					that.$event.on(that.$const.EVENT_USER_LOGIN).then(() => {
						that.getList();
					});
				});
			},
			getMore() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
				});
				that.$request({
					url: that.$api.card.index,
					data: {
						page: that.page,
						status: that.activeTab
					},
				}).then(response => {
					uni.hideLoading();
					if (response.code === 0) {
						if (response.data.list.length > 0) {
							that.loading = null;
							that.list = that.list.concat(response.data.list);
							that.page++;
						}
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000,
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/card/details/details?id=${id}`
				});
			},
		},
		onLoad(option) {
			console.log(option)
			this.type = option.type
			this.getList();
		},
		onShow() {
			setTimeout(() => {
				uni.setNavigationBarTitle({
					title: this.type == 1 ? '我的课程' : this.type==2?'我的比赛':'我的培训'
				});
			}, 1000)
		},
		onReachBottom() {
			this.getMore();
		}
	}
</script>

<style scoped lang="scss">
	.no-list {
		margin-top: #{150upx};
	}

	.card-list {
		width: 100%;
		padding-top: #{10rpx};
		background-color: #f7f7f7;
	}

	.card-item {
		height: #{180rpx};
		margin: #{20rpx};
		background-color: #fff;
		color: #353535;
		font-size: #{30rpx};
		display: flex;
		align-items: center;
		border-radius: 16#{rpx};

		.name {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			overflow: hidden;
			width: 402#{rpx};
			margin-left:35#{rpx};
		}

		.card-img {
			height: #{88rpx};
			width: #{88rpx};
			border-radius: 50%;
			margin-left:24#{rpx};
		}

		.right-box {
			margin: #{65rpx} #{35rpx};
			display: flex;
			flex-direction: column;
			align-items: center;

			.card-qr {
				height: #{50rpx};
				width: #{50rpx};
			}

			span {
				font-size:20#{rpx};
				color: #353535;
				margin-top:10#{rpx};
			}
		}
	}

	.qr-modal {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		height: 100%;
		width: 100%;
		z-index: 2;
	}

	.look-qr {
		position: absolute;
		background-color: #fff;
		width: #{550rpx};
		height: #{700rpx};
		left: 50%;
		margin-left: #{-275rpx};
		top: 20%;
		border-radius: #{10rpx};
		text-align: center;
		padding: #{50rpx};
		font-size: #{34rpx};
		color: #353535;
	}

	.look-qr image {
		margin-top: #{25rpx};
		height: #{450rpx};
		width: #{450rpx};
	}

	.look-qr button {
		margin-top: #{15rpx};
		height: #{60rpx};
		line-height: #{60rpx};
		color: #fff;
		font-size: #{28rpx};
		width: #{200rpx};
	}
</style>