kxmall-ui/kxmall-app-ui/pages/user/coupons.vue

<template>
	<view class="coupon_box">
		<view v-if="type === 'user'" class="other_type">
			<view class="text"><span>已领取优惠券</span></view>
		</view>
		<coupon v-for="(item, index) in couponList" :key="index" v-bind:item="item" :index="index" @shareCoupon="shareCoupon" @useCoupon="useCoupon"
		 @obtainCoupon="obtainCoupon" theme="#ff0000"></coupon>
		<view v-if="type === 'list' || obatinableCouponList.length > 0" class="other_type">
			<view class="text"><span>可领取</span></view>
		</view>
		<coupon v-for="(item, index) in obatinableCouponList" v-if="item.remainCount > 0" :key="index" v-bind:item="item" :index="index" @shareCoupon="shareCoupon" @useCoupon="useCoupon"
		 @obtainCoupon="obtainCoupon" theme="#ff0000"></coupon>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
		</view>

		<!-- 以下是浮层 -->
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<button class="posterBtn" type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<button class="posterBtn" type="primary" open-type="share" size="mini">分享好友</button>
				</view>
			</view>
		</view>
		<view v-if="type === 'list'" class="other_type">
			<view class="text"><span>可领取优惠券</span></view>
		</view>

	</view>
</template>

<script>
	import coupon from '@/components/coolc-coupon/coolc-coupon'
	import { getSharePoster } from '@/components/QS-SharePoster/QS-SharePoster.js'
	import _app from '@/components/QS-SharePoster/app.js'
	export default {
		components: {
			coupon
		},
		data() {
			return {
				title: '可领取优惠券',
				couponList: [],
				obatinableCouponList: [],
				type: 'list',
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				couponId: undefined
			}
		},
		/**
		 * @param {Object} options .type 取值为 list(默认) | user
		 * list: 表示从Advert等地方进去的，只显示可领取优惠券
		 * user: 表示从我的进去的，显示已领取优惠券
		 */
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			} else {
				this.type = 'list'
			}
			this.loadData()
		},
		onShareAppMessage() {
			const that = this
			if (that.couponId) {
				return {
					title: '',
					imageUrl: '',
					path: '/pages/index/index?couponid=' + that.couponId
				}
			} else {
				return {
					title: '',
					imageUrl: '',
					path: '/pages/coupon/list'
				}
			}

		},
		methods: {
			async loadData() {
				const that = this
				if (that.type === 'user') {
					that.$api.request('get', 'coupon/app/getUserCoupons').then(res => {
						that.couponList = res.data
					})
				}
				that.$api.request('get', 'coupon/app/getObtainableCoupon').then(res => {
					that.obatinableCouponList = res.data
				})
			},
			obtainCoupon(item, index) {
				const that = this
				that.$api.request('get', 'coupon/app/obtainCoupon', {
					couponId: item.id
				}).then(res => {
					that.$api.msg('领取成功')
					if (that.type === 'list') {
						that.couponList[index].nowCount++
					} else {
						that.loadData()
					}
				})
			},
			shareCoupon(item, index) {
				const that = this
				uni.showLoading({
					title: '正在获取.'
				})
				if (!item.couponId) {
					that.$api.msg('这个优惠券不能分享')
					return
				}
				that.$api.request('get', 'coupon/app/getCouponQRCodeUrl', {
					couponId: item.couponId
				}, failres => {
					uni.hideLoading()
					that.$api.msg(failres.errmsg)
				}).then(res => {
					that.shareFc(res.data)
				})
			},
			useCoupon(item, index) {
				uni.switchTab({
					url:`../category/category`
				})
			},
			async shareFc(qrcodeText) {
				try {
					console.log('准备生成:' + new Date())
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据

						},
						posterCanvasId: this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数
						/* background: {
							width: 1080,
							height: 1920,
							backgroundColor: '#666'
						}, */
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([{
										type: 'custom',
										setDraw(Context) {
											Context.setFillStyle('black');
											Context.setGlobalAlpha(0.3);
											Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
											Context.setGlobalAlpha(1);
										}
									},
									{
										type: 'image',
										url: '/static/logo.jpg',
										alpha: .3,
										dx,
										dy: bgObj.height - bgObj.width * 0.25,
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.2 / imageInfo.height;
											return {
												circleSet: {
													x: imageInfo.width * scale / 2,
													y: bgObj.width * 0.2 / 2,
													r: bgObj.width * 0.2 / 2
												}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width * 0.2,
												/* roundRectSet: { // 圆角矩形
													r: imageInfo.width * .1
												} */
											}
										}
									},
									{
										type: 'text',
										fontStyle: 'italic',
										text: '优惠券',
										size: fontSize,
										color: 'white',
										alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											_app.log('index页面的text的infocallback ，textlength:' + textLength);
											return {
												dx: bgObj.width - textLength - fontSize,
												dy: bgObj.height - lineHeight * 3
											}
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									{
										type: 'text',
										text: '优惠券',
										fontWeight: 'bold',
										size: fontSize,
										color: 'white',
										alpha: .75,
										textAlign: 'left',
										textBaseline: 'middle',
										serialNum: 1,
										allInfoCallback({ //v3.0.1 更新 可以获取drawArray中全部数据
											drawArray
										} = {}) {
											const obj = drawArray.find(item => item.id === 'tag1');
											/* return {
												dx: obj.dx,
												dy: obj.dy + lineHeight
											} */
											//也可以return promise对象
											return new Promise((rs, rj) => {
												setTimeout(() => {
													rs({
														dx: obj.dx,
														dy: obj.dy + lineHeight
													});
												}, 1);
											});
										}
									},
									{
										type: 'text',
										text: '优惠券',
										size: fontSize,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width - textLength - fontSize,
												dy: bgObj.height - lineHeight
											}
										}
									},
									{
										type: 'qrcode',
										text: qrcodeText,
										size: bgObj.width * 0.2,
										dx: bgObj.width * 0.05,
										dy: bgObj.height - bgObj.width * 0.25
									}
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.poster.finalPath = d.poster.tempFilePath;
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			share() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif

				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},
			hideQr() {
				this.qrShow = false;
			}
		}
	}
</script>

<style lang='scss'>
	page {
		background: #FFFFFF;
	}

	.coupon_box {
		width: 100%;
		height: auto;
		display: table;
		padding: 6upx 26upx 26upx 26upx;
	}

	.other_type {
		width: 100%;
		height: 90upx;
		padding-top: 50upx;

		.text {
			width: 100%;
			border-top: 1px solid #eeeeee;
			display: block;
			text-align: center;
			position: relative;
		}

		.text span {
			width: 180upx;
			height: 40upx;
			line-height: 40upx;
			color: #999999;
			display: block;
			background: #ffffff;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -90upx;
			margin-top: -20upx;
			font-size: $font-base;
		}
	}

	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
		background-color: white;
	}

	.border_radius_10px {
		border-radius: 10px;
	}

	.padding1vh {
		padding: 1vh;
	}

	.posterImage {
		width: 60vw;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 2vh;
	}

	.posterBtn {
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;
	}
</style>