mp-ui-user/pages/lucky/index.vue

<template>
	<view>
		<u-navbar leftIconSize="0" title="盲票详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
		<view class="detail">
			<view class="detail-top">
				<u-swiper :list="picUrlArr" height="320" radius="0" :indicator="true" :circular="true"></u-swiper>
			</view>
			<view class="flex detail-info">
				<view class="detail-info__left">
					<text class="title">{{ boxInfo.title }}</text>
					<view class="flex num">
						<u-icon name="gift" size="25" color="#EB7009"></u-icon>
						<text>100%抽中，奖品多多</text>
					</view>
					<view class="tip">图片仅供参考，请以实物为准</view>
				</view>
				<view class="detail-info__right">
					<text class="money">￥{{ $numberFormat(boxInfo.salePrice) }}</text>
					<text>销量 {{ boxInfo.saleQty }}</text>
				</view>
			</view>
			<view class="detail-goods">
				<view class="detail-goods-title">可获得奖品</view>
				<view class="detail-goods-list">
					<!-- <navigator :url="`/pages/prizeGoods/detail?id=${ item.prizeId }`" class="detail-goods-list-item"
						hover-class="navigator-hover" v-for="(item, index) in prizeList" :key="index"> -->
					<view class="detail-goods-list-item" v-for="(item, index) in prizeList" :key="index">
						<view class="detail-goods-list-item__value">
							<view class="flex image-wrap">
								<image :src="item.picUrl" mode="scaleToFill"></image>
							</view>
							<view class="info">
								<text class="title">{{ item.title }}</text>
								<text class="num"
									v-if="item.prizeType != 'coin'">价值：￥{{ $numberFormat(item.value) }}</text>
								<text class="num" v-else>数量：{{ item.value }}个</text>
								<text class="num">概率：{{ item.hitRate }}%</text>
							</view>
							<view class="name">{{ item.name }}</view>
						</view>
					</view>
					<!-- </navigator> -->
				</view>
			</view>
		</view>
		<u-overlay :show="luckyShow" :opacity="0.8" zIndex="100">
			<view class="flex luck-warp" @touchmove.prevent.stop>
				<view class="luck-info">
					<view class="flex luck-info-image">
						<image class="image1" src="../../static/icon/lucky_bg.png" mode="" v-if="info.status == 1">
						</image>
						<image class="image2" src="../../static/icon/lucky_bg2.png" mode="" v-else></image>
					</view>
					<view
						:class="{ 'flex luck-info-content mat': info.status == 1, 'flex luck-info-content mat2': info.status != 1 }">
						<view class="title">幸运数字</view>
						<view class="name">{{ info.title }}</view>
						<view class="num">盲票序列号：{{ info.serialNo }}</view>
					</view>
					<view class="flex luck-info-tip" v-if="info.status == 2">
						<view class="tip">请刮开纸质票面的数字,与此幸运数字相同的就是所中奖项</view>
					</view>
					<view class="flex luck-info-btn">
						<view class="btn" @click="pay" v-if="info.status == 1">支付{{ info.salePrice / 100 }}元 立即查看</view>
						<view class="btn" @click="saveImg" v-else>保存至手机相册</view>
					</view>
					<view class="flex luck-info-num" v-if="info.status == 2">{{ info.plainLuckyNum }}</view>
					<view class="flex luck-info-close">
						<navigator open-type="exit" target="miniProgram" hover-class="none" class="flex">
							<u-icon name="close" color="#333" size="20"></u-icon>
						</navigator>
					</view>
				</view>
			</view>
		</u-overlay>

		<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="getDetailInfo" />

		<u-popup :show="showNull" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8" @touchmove.prevent.stop>
			<view class="null-prize">
				<view class="title">该盲票已兑奖</view>
				<navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator>
			</view>
		</u-popup>

		<hch-poster ref="hchPoster" @cancel="handleCancel" :posterData.sync="posterData" @previewImage='previewImage'
			@canvasConfirm="toIndex" />
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import PayPopup from '../../components/pay-popup/pay-popup.vue'
	import HchPoster from "../../components/hch-poster/hch-poster.vue"

	export default {
		components: {
			PayPopup,
			HchPoster
		},
		data() {
			return {
				serialNo: '',
				info: '',
				payInfo: {},
				payShow: false,
				payLookFlag: true,
				showNull: false,
				posterData: {},

				luckyShow: true,
				status: 2,

				boxId: '',
				picUrlArr: [],
				boxInfo: {},
				prizeList: [],
			};
		},

		onLoad(options) {
			if (options.id) {
				this.serialNo = options.id
			}

			if (options.q) {
				let url = JSON.stringify(options.q)
				this.serialNo = url.substring(url.length - 22, url.length - 1)
			}
		},
		onShow() {
			if (this.serialNo && this.payLookFlag) {
				this.getDetail()
			}
		},
		methods: {
			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
					serialNo: this.serialNo,
					noToken: true
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.getBoxDetail(res.data.boxId)
						if (res.data.status == 1) {
							this.info = res.data
						} else if (res.data.status == 2) {
							if (uni.getStorageSync('token')) {
								uni.redirectTo({
									url: `/pages/choice/index?id=${ res.data.ticketId }`
								})
							} else {
								uni.showModal({
									title: '提示',
									content: '您未登录或登录失效！',
									confirmText: '去登录',
									showCancel: false,
									success(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: "/pages/login/index"
											})
										}
									}
								})
							}
						} else {
							this.showNull = true
							this.luckyShow = false
						}
					} else {
						uni.$u.toast('该盲票不存在！');
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000)
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			getDetailInfo() {
				this.payShow = false
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
					serialNo: this.serialNo,
					noToken: true
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.info = res.data
						let num = res.data.plainLuckyNum
						this.posterData.num.text =
							this.posterData = {
								poster: {
									//根据屏幕大小自动生成图片背景大小
									url: env.filePublic + this.info.picUrl, //图片地址
									r: 10, //圆角半径
									w: 300, //图片宽度
									h: 480, //图片高度
									p: 20 //图片内边距padding
								},
								square3: {
									x: 100,
									y: 100,
									r: 0, //圆角半径
									w: 240, //宽度
									h: 180, //高度
									mt: 65
								},
								title: {
									text: "幸运数字", //文本
									fontSize: 20, //字体大小
									color: "#000", //颜色
									lineHeight: 25, //行高
									mt: 20, //margin-top
									align: 'center'
								},
								num: {
									text: num + '', //文本
									fontSize: 40, //字体大小
									color: "#fff", //颜色
									lineHeight: 25, //行高
									mt: 20, //margin-top
									align: 'center'
								},
								txt: {
									text: res.data.title, //文本
									fontSize: 16, //字体大小
									color: "#000", //颜色
									lineHeight: 25, //行高
									mt: 20, //margin-top
									align: 'center'
								},
							}
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			getBoxDetail(id) {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/mall/ticket/detail', {
					boxId: id,
					noToken: true
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.boxInfo = res.data
						let picUrlArr = res.data.picUrl.split(',')
						picUrlArr.forEach(item => {
							this.picUrlArr.push(env.filePublic + item)
						})
						let prizeList = res.data.prizeList
						prizeList.forEach(item => {
							let picUrlArr = item.picUrl.split(',')
							item.picUrl = env.filePublic + picUrlArr[0]
						})
						this.prizeList = prizeList
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			close() {
				this.payShow = false
			},

			pay() {
				let data = {
					ticketId: this.info.ticketId,
					autoCoupon: 1
				}
				this.payLookFlag = false
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						let info = {
							...res.data,
							...this.info,
							picUrl: env.filePublic + res.data.picUrl,
						}
						this.payInfo = info
						this.payShow = true
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			screen() {

			},

			toIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			previewImage() {

			},

			saveImg() {
				this.$refs.hchPoster.posterShow()
			},

			handleCancel() {

			},

			toIndex() {
				// uni.switchTab({
				// 	url: '/pages/index/index'
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.luck-warp {
		height: 100%;

		.luck-info {
			position: relative;
			width: 85%;
			border-radius: 40rpx;
			background-color: #fff;

			.luck-info-image {
				margin-bottom: 30rpx;

				.image1 {
					width: 400rpx;
					height: 400rpx;
					margin-top: -200rpx;
				}

				.image2 {
					width: 450rpx;
					height: 450rpx;
					margin-top: -286rpx;
					// padding-bottom: 50rpx;
				}
			}

			.luck-info-tip {
				.tip {
					width: 460rpx;
					height: 100rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					padding: 0 26rpx;
					color: #666666;
					text-align: center;
					background: rgba(255, 109, 28, 0.2);
				}
			}

			.luck-info-content {
				flex-direction: column;

				.title {
					line-height: 68rpx;
					font-size: 48rpx;
					margin-bottom: 36rpx;
				}

				.name {
					font-size: 40rpx;
					line-height: 56rpx;
					margin-bottom: 20rpx;
				}

				.num {
					font-size: 32rpx;
					color: #666666;
					line-height: 44rpx;
				}
			}


			.mat {
				margin-bottom: 140rpx;
			}

			.mat2 {
				margin-bottom: 20rpx;
			}

			.luck-info-btn {
				margin-top: 20rpx;

				.btn {
					width: 530rpx;
					height: 100rpx;
					line-height: 100rpx;
					color: #FFFFFF;
					font-size: 48rpx;
					text-align: center;
					border-radius: 200rpx;
					background: linear-gradient(180deg, #FFB266 0%, #FFB266 0%, #FF843A 100%, #FF843A 100%);
					box-shadow: 0px 4px 10px 0px rgba(182, 85, 24, 0.6);
					margin-bottom: 72rpx;
				}
			}

			.luck-info-num {
				position: absolute;
				top: -56rpx;
				width: 100%;
				font-size: 80rpx;
				color: #FFFFFF;
			}

			.luck-info-close {
				position: absolute;
				width: 70rpx;
				height: 70rpx;
				background-color: #b9b9b9;
				border-radius: 50%;
				right: 10rpx;
				top: -80rpx;
			}
		}
	}


	.detail {
		padding-bottom: 100rpx;

		&-top {
			margin-bottom: 20rpx;
		}

		&-info {
			justify-content: space-between;
			box-sizing: border-box;
			padding: 24rpx 16rpx;
			background-color: #fff;
			margin: 10rpx 10rpx 20rpx;
			border-radius: 10rpx;

			&__left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				text {
					line-height: 24rpx;
					display: inline-block;
				}

				.title {
					color: rgba(16, 16, 16, 100);
					font-size: 32rpx;
					line-height: 32rpx;
					font-weight: bold;
				}

				.num {
					color: $uni-text-color;
					font-size: 28rpx;
					justify-content: flex-start;
					margin: 20rpx 0;
				}

				.tip {
					font-size: 24rpx;
				}
			}

			&__right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-between;
				height: 162rpx;

				text {
					color: rgba(157, 157, 157, 100);
					font-size: 14px;
				}

				.money {
					font-size: 40rpx;
					font-weight: bold;
					line-height: 40rpx;
					font-weight: bold;
					color: $uni-text-color;
					margin-bottom: 40rpx;
				}
			}
		}

		&-sku {
			background-color: #fff;
			border-radius: 10rpx;
			margin: 10rpx 10rpx 20rpx;

			&-title {
				padding: 24rpx 16rpx 12rpx;
			}

			&-item {
				padding-bottom: 10rpx;

				view {
					padding-left: 50rpx;
					line-height: 50rpx;
				}
			}
		}

		&-goods {
			margin: 10rpx 10rpx 20rpx;

			&-title {
				margin-bottom: 20rpx;
			}

			&-list {
				padding-bottom: 100rpx;

				&-item {
					position: relative;
					background-color: #FFFFFF;
					margin-bottom: 30rpx;
					border-radius: 10rpx;
					padding: 30rpx 20rpx;

					&__value {
						display: flex;
					}

					image {
						width: 200rpx;
						height: 200rpx;
					}

					.name {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						line-height: 28rpx;
						padding: 10rpx 40rpx;
						color: #FFFFFF;
						border-top-left-radius: 10rpx;
						border-bottom-right-radius: 40rpx;
						background-color: $uni-bg-color;
					}

					.info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 30rpx;
						padding-left: 50rpx;

						.title {
							font-weight: bold;
						}

						.num {
							color: #848484;
						}
					}
				}

				&-item:last-child {
					border: none;
				}
			}
		}
	}

	.null-prize {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 80vw;
		height: 320rpx;
		background-color: #FFFFFF;
		border: 1px solid rgba(187, 187, 187, 100);

		.btn {
			margin-top: 60rpx;
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 8rpx;
			background-color: rgba(235, 112, 9, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>