分享好友朋友圈、下载海报

src/components/hch-poster/hch-poster.vue

@@ -0,0 +1,409 @@
+<!--
+ * @Description: 生成图片组件
+ * @Version: 1.0.0
+ * @Autor: 
+ * @Date: 2020-08-07 14:48:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-31 18:11:35
+ * 保存图片按钮和关闭按钮 在html代码中写出来 绑定点击方法然后透明 再用canvas 覆盖
+-->
+
+<template>
+	<view class="canvas-content" v-show="canvasShow" :style="'width:' + system.w + 'px; height:' + system.h + 'px;'">
+		<!-- 遮罩层 -->
+		<view class="canvas-mask"></view>
+		<!-- 图片 -->
+		<!-- :width="system.w" :height="system.h" 支付宝必须要这样设置宽高才有效果 -->
+		<canvas class="canvas" canvas-id="myCanvas" id="myCanvas"
+			:style="'width:' + system.w + 'px; height:' + system.h + 'px;'" :width="system.w"
+			:height="system.h"></canvas>
+		<view class="button-wrapper">
+			<!-- 保存图片按钮 -->
+			<!-- #ifndef MP-QQ -->
+			<!-- cover-view 标签qq小程序有问题 -->
+			<cover-view class="save-btn" @tap="handleSaveCanvasImage">保存</cover-view>
+			<cover-view class="save-btn cancel-btn" @tap="handleCanvasCancel">取消</cover-view>
+			<!-- #endif -->
+			<!-- #ifdef MP-QQ -->
+			<view class="save-btn" @tap="handleSaveCanvasImage">保存</view>
+			<view class="save-btn cancel-btn" @tap="handleCanvasCancel">取消</view>
+			<!-- #endif -->
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		drawSquarePic,
+		drawTextReturnH,
+		getSystem
+	} from '@/common/poster'
+	export default {
+		data() {
+			return {
+				system: {},
+				canvasShow: false
+			}
+		},
+		props: {
+			posterData: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			}
+		},
+		computed: {
+			/**
+			 * @description: 计算图片背景数据
+			 * @param {*}
+			 * @return {*}
+			 * @author: hch
+			 */
+			poster() {
+				let data = this.posterData
+				let system = this.system
+				let posterBg = {
+					url: data.poster.url,
+					r: data.poster.r * system.scale,
+					w: data.poster.w * system.scale,
+					h: data.poster.h * system.scale,
+					x: (system.w - data.poster.w * system.scale) / 2,
+					y: (system.h - data.poster.h * system.scale) / 2,
+					p: data.poster.p * system.scale
+				}
+				return posterBg
+			},
+			/**
+			 * @description: 计算图片标题
+			 * @param {*}
+			 * @return {*}
+			 * @author: hch
+			 */
+			title() {
+				let data = this.posterData
+				let system = this.system
+				let posterTitle = data.title
+				posterTitle.x = this.mainImg.x
+				posterTitle.y = data.title.mt * system.scale
+				return posterTitle
+			},
+			/**
+			 * @description: 计算图片头部主图
+			 * @param {*}
+			 * @return {*}
+			 * @author: hch
+			 */
+			mainImg() {
+				let data = this.posterData
+				let system = this.system
+				let posterMain = {
+					url: data.mainImg.url,
+					r: data.mainImg.r * system.scale,
+					w: data.mainImg.w * system.scale,
+					h: data.mainImg.h * system.scale,
+					x: (system.w - data.mainImg.w * system.scale) / 1.63,
+					y: this.poster.y + data.poster.p + data.mainImg.mt * system.scale
+				}
+				return posterMain
+			},
+			/**
+			 * @description: 计算小程序码
+			 * @param {*}
+			 * @return {*}
+			 * @author: hch
+			 */
+			codeImg() {
+				let data = this.posterData
+				let system = this.system
+				let posterCode = {
+					url: data.codeImg.url,
+					r: data.codeImg.r * system.scale,
+					w: data.codeImg.w * system.scale,
+					h: data.codeImg.h * system.scale,
+					x: (system.w - data.codeImg.w * system.scale) / 2.8,
+					y: data.codeImg.mt * system.scale //y需要加上绘图后文本的y
+				}
+				return posterCode
+			}
+		},
+		created() {
+			// 获取设备信息
+			this.system = getSystem()
+		},
+		methods: {
+			/**
+			 * @description: 展示图片
+			 * @param {type}
+			 * @return {type}
+			 * @author: hch
+			 */
+			posterShow() {
+				this.canvasShow = true
+				this.creatPoster()
+			},
+			/**
+			 * @description: 生成图片
+			 * @author: hch
+			 */
+			async creatPoster() {
+				uni.showLoading({
+					title: '生成海报中...'
+				})
+				const ctx = uni.createCanvasContext('myCanvas', this)
+				this.ctx = ctx
+				ctx.clearRect(0, 0, this.system.w, this.system.h) //清空之前的图片
+				ctx.draw() //清空之前的图片
+				// 根据设备屏幕大小和距离屏幕上下左右距离，及圆角绘制背景
+				let poster = this.poster
+				let mainImg = this.mainImg
+				let codeImg = this.codeImg
+				let title = this.title
+				await drawSquarePic(ctx, poster.x, poster.y, poster.w, poster.h, poster.r, poster.url)
+				await drawSquarePic(ctx, mainImg.x, mainImg.y, mainImg.w, mainImg.h, mainImg.r, mainImg.url)
+				// 绘制标题 textY 绘制文本的y位置
+				// console.log('creatPoster -> title.x', title.x)
+				let textY = drawTextReturnH(
+					ctx,
+					title.text,
+					title.x,
+					title.y,
+					title.w,
+					title.fontSize,
+					title.color,
+					title.background,
+					title.lineHeight,
+					title.align
+				)
+				// 绘制小程序码
+				await drawSquarePic(
+					ctx,
+					codeImg.x,
+					codeImg.y + textY,
+					codeImg.w,
+					codeImg.h,
+					codeImg.r,
+					codeImg.url
+				)
+				// 小程序的名称
+				// 长按/扫描识别查看商品
+				let y = 0
+				this.posterData.tips.forEach((element, i) => {
+					if (i == 0) {
+						y = codeImg.y + textY + element.mt + codeImg.h
+					} else {
+						y += element.mt
+					}
+					y = drawTextReturnH(
+						ctx,
+						element.text,
+						title.x,
+						y,
+						mainImg.w,
+						element.fontSize,
+						element.color,
+						element.background,
+						element.lineHeight,
+						element.align
+					)
+				})
+				uni.hideLoading()
+			},
+			/**
+			 * @description: 保存到系统相册
+			 * @param {type}
+			 * @return {type}
+			 * @author: hch
+			 */
+			handleSaveCanvasImage() {
+				uni.showLoading({
+					title: '保存中...'
+				})
+				let _this = this
+				// 把画布转化成临时文件
+				// #ifndef MP-ALIPAY
+				// 支付宝小程序外，其他都是用这个方法 canvasToTempFilePath
+				uni.canvasToTempFilePath({
+						x: this.poster.x,
+						y: this.poster.y,
+						width: this.poster.w, // 画布的宽
+						height: this.poster.h, // 画布的高
+						destWidth: this.poster.w * 5,
+						destHeight: this.poster.h * 5,
+						canvasId: 'myCanvas',
+						success(res) {
+							//保存图片至相册
+							// #ifndef H5
+							// 除了h5以外的其他端
+							uni.saveImageToPhotosAlbum({
+								filePath: res.tempFilePath,
+								success(res) {
+									uni.hideLoading()
+									uni.showToast({
+										title: '海报保存成功，可以去分享啦~',
+										duration: 2000,
+										icon: 'none'
+									})
+									_this.handleCanvasCancel()
+								},
+								fail(res1) {
+									uni.showToast({
+										title: '保存失败，稍后再试',
+										duration: 2000,
+										icon: 'none'
+									})
+									uni.hideLoading()
+								}
+							})
+							// #endif
+
+							// #ifdef H5
+							// h5的时候
+							uni.showToast({
+								title: '请长按保存',
+								duration: 3000,
+								icon: 'none'
+							})
+							_this.handleCanvasCancel()
+							_this.$emit('previewImage', res.tempFilePath)
+							// #endif
+						},
+						fail(res) {
+							// console.log('fail -> res', res)
+							uni.showToast({
+								title: '保存失败，稍后再试',
+								duration: 2000,
+								icon: 'none'
+							})
+							uni.hideLoading()
+						}
+					},
+					this
+				)
+				// #endif
+				// #ifdef MP-ALIPAY
+				// 支付宝小程序条件下 toTempFilePath
+				this.ctx.toTempFilePath({
+						x: this.poster.x,
+						y: this.poster.y,
+						width: this.poster.w, // 画布的宽
+						height: this.poster.h, // 画布的高
+						destWidth: this.poster.w * 5,
+						destHeight: this.poster.h * 5,
+						success(res) {
+							//保存图片至相册
+							my.saveImage({
+								url: res.apFilePath,
+								showActionSheet: true,
+								success(res) {
+									uni.hideLoading()
+									uni.showToast({
+										title: '图片保存成功，可以去分享啦~',
+										duration: 2000,
+										icon: 'none'
+									})
+									_this.handleCanvasCancel()
+								},
+								fail() {
+									uni.showToast({
+										title: '保存失败，稍后再试',
+										duration: 2000,
+										icon: 'none'
+									})
+									uni.hideLoading()
+								}
+							})
+						},
+						fail(res) {
+							// console.log('fail -> res', res)
+							uni.showToast({
+								title: '保存失败，稍后再试',
+								duration: 2000,
+								icon: 'none'
+							})
+							uni.hideLoading()
+						}
+					},
+					this
+				)
+				// #endif
+			},
+			/**
+			 * @description: 取消图片
+			 * @param {type}
+			 * @return {type}
+			 * @author: hch
+			 */
+			handleCanvasCancel() {
+				this.canvasShow = false
+				this.$emit('cancel', true)
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+		height: 100%;
+		text-align: center;
+	}
+
+	.canvas-content {
+		position: absolute;
+		top: 0;
+
+		.canvas-mask {
+			position: fixed;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 9;
+			width: 100%;
+			height: 100%;
+			background: rgba(0, 0, 0, 0.5);
+		}
+
+		.canvas {
+			z-index: 10;
+		}
+
+		.button-wrapper {
+			position: fixed;
+			bottom: 80rpx;
+			z-index: 16;
+			display: flex;
+			width: 100%;
+			height: 72rpx;
+			justify-content: space-around;
+		}
+
+		.save-btn {
+			z-index: 16;
+			width: 40%;
+			height: 100%;
+			font-size: 30rpx;
+			line-height: 72rpx;
+			color: #fff;
+			text-align: center;
+			background: $uni-btn-color;
+			border-radius: 45rpx;
+			border-radius: 36rpx;
+		}
+
+		.cancel-btn {
+			color: #fff;
+			background: #4D402F;
+		}
+
+		.canvas-close-btn {
+			position: fixed;
+			top: 30rpx;
+			right: 0;
+			z-index: 12;
+			width: 60rpx;
+			height: 60rpx;
+			padding: 20rpx;
+		}
+	}
+</style>

src/packageOperate/activity/index.vue

@@ -425,7 +425,6 @@
 		},
 		//分享朋友圈
 		onShareTimeline() {
-			console.log(this.userInfo.userId);
 			return {
 				title: '超值宝贝免费抽，参与活动仅需3秒',
 				imageUrl: 'https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/free_draw_bkg.jpeg',

src/packagePrize/choice/index.vue

@@ -1,693 +1,830 @@
-	<template>
-	<view>
-		<u-popup :show="tipShow" :round="10" mode="center" :safeAreaInsetBottom="false">
-			<view class="null-prize">
-				<view class="title">该盲票已被他人买走了</view>
-				<!-- <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator> -->
-				<view class="btn" @click="toUser">确认</view>
-			</view>
-		</u-popup>
-
-		<view class="choice">
-			<!-- 返回 -->
-			<!-- #ifndef MP-ALIPAY -->
-			<!-- <view class="choice-navLeft flex" :style="{ top: statusHeight + 'px' }" @click="back">
-				<u-icon size="19" color="#fff" name="arrow-left"></u-icon>
-			</view> -->
-			<!-- #endif -->
-			
-			<!-- 标题 -->
-			<view class="choice-title flex">
-				<image src="../../packagePrize/static/rolling_title.png" mode="scaleToFill" v-if="!comfirmShow"></image>
-				<image src="../../packagePrize/static/choice_title.png" mode="scaleToFill" v-else></image>
-			</view>
-			<!-- 提示 -->
-			<view class="choice-tip flex" v-if="!comfirmShow">
-				<view class="choice-tip-content">以下奖品任选一件</view>
-			</view>
-			<!-- 奖品列表 -->
-			<view class="choice-list" v-if="!comfirmShow">
-				<view class="choice-list-item flex" v-for="(item, index) in prizeList" :key="index">
-					<view class="checkbox flex" :class="{ 'checkbox-action': actionIndex == index }" @click="selectPrize(index)">
-						<u-icon name="checkmark" color="#fff" size="14"></u-icon>
-					</view>
-					<view class="info flex" @click="selectPrize(index)">
-						<image :src="item.picUrl" mode="aspectFill"></image>
-						<view class="info-content flex">
-							<!-- #ifdef MP-ALIPAY -->
-							<view class="info-content__titletwo ells" v-if="item.prizeType && item.prizeType.value != 'coin'">{{ item.title }}</view>
-							<view class="info-content__titletwo ells" v-else>盲豆</view>
-							<!-- #endif -->
-							<!-- #ifndef MP-ALIPAY -->
-							<view class="info-content__title ells" v-if="item.prizeType && item.prizeType.value != 'coin'">{{ item.title }}</view>
-							<view class="info-content__title ells" v-else>盲豆</view>
-							<!-- #endif -->
-							
-							<view class="info-content__price" v-if="item.prizeType && item.prizeType.value != 'coin'">￥{{ $numberFormat(item.value) }}</view>
-							<view class="info-content__price" v-else>{{ item.value }}个</view>
-						</view>
-					</view>
-					<view class="detail" @click="toPrizeGoods(item)">查看</view>
-				</view>
-			</view>
-			<!-- 按钮 -->
-			<view class="footer-fixed flex" v-if="!comfirmShow">
-				<view class="footer-fixed-btn flex" @click="confirmPrize">
-					<image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
-					<view class="footer-fixed-btn-txt">确认</view>
-				</view>
-			</view>
-			
-			<view class="choice-box flex" v-if="comfirmShow">
-				<view class="choice-box-popup flex">
-					<view class="choice-box-popup__image flex">
-						<image :src="actionInfo.picUrl" mode="aspectFit"></image>
-					</view>
-				</view>
-			</view>
-			<view class="choice-info flex" v-if="comfirmShow">
-				<view class="choice-info-content">
-					<view class="choice-info-content-price" v-if="actionInfo.prizeType && actionInfo.prizeType.value != 'coin'"><text>¥</text>{{ $numberFormat(actionInfo.value) }}</view>
-					<view class="choice-info-content-price" v-else>{{ actionInfo.value }}个</view>
-					<view class="choice-info-content-title ells" v-if="actionInfo.prizeType && actionInfo.prizeType.value != 'coin'">{{ actionInfo.title }}</view>
-					<view class="choice-info-content-title" v-else>盲豆</view>
-					<view class="choice-info-content-btn flex">
-						<view class="choice-info-content-btn-content flex"  @click="toPrize(actionInfo.prizeType)">
-							<image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
-							<view class="choice-info-content-btn-content-txt" v-if="actionInfo.prizeType && actionInfo.prizeType.value != 'coin'">去查看我的奖品</view>
-							<view class="choice-info-content-btn-content-txt" v-else>去商城兑换商品</view>
-						</view>
-					</view>
-				</view>
-			</view>
-			<view class="choice-tip flex" @click="again" v-if="comfirmShow && type == 'offline'">
-				<view class="txt">再来一张</view>
-			</view>
-			<view class="choice-tip flex" @click="again" v-if="comfirmShow && type == 'online'">
-				<view class="txt">再买一个</view>
-			</view>
+<template>
+	<view>
+		<u-popup :show="tipShow" :round="10" mode="center" :safeAreaInsetBottom="false">
+			<view class="null-prize">
+				<view class="title">该盲票已被他人买走了</view>
+				<!-- <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator> -->
+				<view class="btn" @click="toUser">确认</view>
+			</view>
+		</u-popup>
+
+		<view class="choice" v-if="comfirmShow1">
+			<!-- 返回 -->
+			<!-- #ifndef MP-ALIPAY -->
+			<!-- <view class="choice-navLeft flex" :style="{ top: statusHeight + 'px' }" @click="back">
+				<u-icon size="19" color="#fff" name="arrow-left"></u-icon>
+			</view> -->
+			<!-- #endif -->
+
+			<!-- 标题 -->
+			<view class="choice-title flex">
+				<image src="../../packagePrize/static/rolling_title.png" mode="scaleToFill" v-if="!comfirmShow">
+				</image>
+				<image src="../../packagePrize/static/choice_title.png" mode="scaleToFill" v-else></image>
+			</view>
+			<!-- 提示 -->
+			<view class="choice-tip flex" v-if="!comfirmShow">
+				<view class="choice-tip-content">以下奖品任选一件</view>
+			</view>
+			<!-- 奖品列表 -->
+			<view class="choice-list" v-if="!comfirmShow">
+				<view class="choice-list-item flex" v-for="(item, index) in prizeList" :key="index">
+					<view class="checkbox flex" :class="{ 'checkbox-action': actionIndex == index }"
+						@click="selectPrize(index)">
+						<u-icon name="checkmark" color="#fff" size="14"></u-icon>
+					</view>
+					<view class="info flex" @click="selectPrize(index)">
+						<image :src="item.picUrl" mode="aspectFill"></image>
+						<view class="info-content flex">
+							<!-- #ifdef MP-ALIPAY -->
+							<view class="info-content__titletwo ells"
+								v-if="item.prizeType && item.prizeType.value != 'coin'">{{ item.title }}</view>
+							<view class="info-content__titletwo ells" v-else>盲豆</view>
+							<!-- #endif -->
+							<!-- #ifndef MP-ALIPAY -->
+							<view class="info-content__title ells"
+								v-if="item.prizeType && item.prizeType.value != 'coin'">{{ item.title }}</view>
+							<view class="info-content__title ells" v-else>盲豆</view>
+							<!-- #endif -->
+
+							<view class="info-content__price" v-if="item.prizeType && item.prizeType.value != 'coin'">
+								￥{{ $numberFormat(item.value) }}</view>
+							<view class="info-content__price" v-else>{{ item.value }}个</view>
+						</view>
+					</view>
+					<view class="detail" @click="toPrizeGoods(item)">查看</view>
+				</view>
+			</view>
+			<!-- 按钮 -->
+			<view class="footer-fixed flex" v-if="!comfirmShow">
+				<view class="footer-fixed-btn flex" @click="confirmPrize">
+					<image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
+					<view class="footer-fixed-btn-txt">确认</view>
+				</view>
+			</view>
+
+			<view class="choice-box flex" v-if="comfirmShow">
+				<view class="choice-box-popup flex">
+					<view class="choice-box-popup__image flex">
+						<image :src="actionInfo.picUrl" mode="aspectFit"></image>
+					</view>
+				</view>
+			</view>
+			<view class="choice-info flex" v-if="comfirmShow">
+				<view class="choice-info-content">
+					<view class="choice-info-content-price"
+						v-if="actionInfo.prizeType && actionInfo.prizeType.value != 'coin'">
+						<text>¥</text>{{ $numberFormat(actionInfo.value) }}
+					</view>
+					<view class="choice-info-content-price" v-else>{{ actionInfo.value }}个</view>
+					<view class="choice-info-content-title ells"
+						v-if="actionInfo.prizeType && actionInfo.prizeType.value != 'coin'">{{ actionInfo.title }}
+					</view>
+					<view class="choice-info-content-title" v-else>盲豆</view>
+					<view class="choice-info-content-btn flex">
+						<view class="choice-info-content-btn-content flex" @click="toPrize(actionInfo.prizeType)">
+							<image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
+							<view class="choice-info-content-btn-content-txt"
+								v-if="actionInfo.prizeType && actionInfo.prizeType.value != 'coin'">去查看我的奖品</view>
+							<view class="choice-info-content-btn-content-txt" v-else>去商城兑换商品</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="choice-tip flex" @click="again" v-if="comfirmShow && type == 'offline'">
+				<view class="txt">再来一张</view>
+			</view>
+			<view class="choice-tip flex" @click="again" v-if="comfirmShow && type == 'online'">
+				<view class="txt">再买一个</view>
+			</view>
+			<view class="choice-download flex" @click="saveImg" v-if="comfirmShow">
+				<image src="../../packagePrize/static/download1.png" mode="aspectFit"></image>
+				<view>下载海报</view>
+			</view>
 		</view>
-		
-		<!-- 详情 -->
-		<u-popup :show="detailShow" :round="11" mode="bottom" @close="detailShow = false" :closeable="true">
-			<view class="prize-detail flex">
-				<view class="prize-detail-title">奖品详情</view>
-				<view class="prize-detail-content">
-					<u-parse :content="description" :selectable="true"></u-parse>
-				</view>
-			</view>
-		</u-popup>
-	</view>
-</template>
-
-<script>
-	import env from '../../config/env.js'
-	import $http from '@/utils/request.js'
-	import { formatRichText,urlParameter } from '@/utils/util.js'
-	export default {
-		data() {
-			return {
-				ticketId: '',
-				prizeList: [],
-				total: 0,
-				actionIndex: 0,
-				tipShow: false,
+		<view v-else class="poster">
+		</view>
+
+		<!-- 详情 -->
+		<u-popup :show="detailShow" :round="11" mode="bottom" @close="detailShow = false" :closeable="true">
+			<view class="prize-detail flex">
+				<view class="prize-detail-title">奖品详情</view>
+				<view class="prize-detail-content">
+					<u-parse :content="description" :selectable="true"></u-parse>
+				</view>
+			</view>
+		</u-popup>
+
+		<!-- 海报 -->
+		<share-code ref="shareCode" :posterData.sync="posterData" />
+	</view>
+</template>
+
+<script>
+	import env from '../../config/env.js'
+	import $http from '@/utils/request.js'
+	import { formatRichText, urlParameter } from '@/utils/util.js'
+	import ShareCode from "@/components/hch-poster/hch-poster.vue"
+	export default {
+		components: {
+			ShareCode
+		},
+		data() {
+			return {
+				ticketId: '',
+				prizeList: [],
+				total: 0,
+				actionIndex: 0,
+				tipShow: false,
 				comfirmShow: false,
-				actionInfo: {},
-				type: '',
-				
-				statusHeight: 30,
-				detailShow: false,
-				description: '',
-			};
-		},
+				comfirmShow1: false,
+				actionInfo: {},
+				type: '',
+
+				statusHeight: 30,
+				detailShow: false,
+				description: '',
+
+				// 图片数据
+				posterData: {
+					poster: {
+						//根据屏幕大小自动生成图片背景大小
+						url: "https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/prizeBackground.png", //图片地址
+						r: 15, //圆角半径
+						w: 350, //图片宽度
+						h: 600, //图片高度
+						p: 20 //图片内边距padding
+					},
+					title: {
+						// 商品名称
+						text: "", //文本
+						fontSize: 26, //字体大小
+						color: "#fff", //颜色
+						lineHeight: 44, //行高#4F4F4F 100%
+						mt: 220, //margin-top
+						w: 310,
+						align: "left"
+					},
+					mainImg: {
+						// 商品图
+						url: "", //图片地址
+						r: 5, //圆角半径
+						w: 216, //宽度
+						h: 216, //高度
+						mt: 242
+					},
+					codeImg: {
+						// 小程序码
+						url: "", //图片地址
+						w: 60, //宽度
+						h: 60, //高度
+						r: 2, //圆角半径
+						mt: 380
+					},
+					tips: [
+						
+					]
+				}
+			};
+		},
 		onLoad(options) {
-			this.ticketId = options.id
-			
-			// #ifdef MP-WEIXIN
-			const res = uni.getMenuButtonBoundingClientRect()
-			this.statusHeight = res.top //胶囊距离顶部
-			// #endif
+			if(options.toIndex) {
+				this.toIndex()
+				return
+			}else {
+				this.comfirmShow1 = true
+			}
+			this.ticketId = options.id
+			// #ifdef MP-WEIXIN
+			const res = uni.getMenuButtonBoundingClientRect()
+			this.statusHeight = res.top //胶囊距离顶部
+			// #endif
 			this.getPrizeList()
 		},
-		methods: {
-			getPrizeList() {
-				uni.showLoading({
-					title: '加载中'
-				});
-				let data = {
-					ticketId: this.ticketId
-				}
-				$http.post('/api/v1/mp/user/ticket/queryHitPrizeList', data).then(res => {
-					uni.hideLoading();
-					if (res.code == 0) {
+		onShow() {
+			this.getUrl()
+		},
+		methods: {
+			getPrizeList() {
+				uni.showLoading({
+					title: '加载中'
+				});
+				let data = {
+					ticketId: this.ticketId
+				}
+				$http.post('/api/v1/mp/user/ticket/queryHitPrizeList', data).then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
 						this.type = res.data.type
-						res.data.prizeList.forEach(item => {
-							let picUrlArr = item.picUrl.split(',')
-							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
-							item.prizeType = JSON.parse(item.prizeType)
-						})
-						if(res.data.prizeList.length == 1) {
+						res.data.prizeList.forEach(item => {
+							let picUrlArr = item.picUrl.split(',')
+							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
+							item.prizeType = JSON.parse(item.prizeType)
+						})
+						if (res.data.prizeList.length == 1) {
 							let item = res.data.prizeList[this.actionIndex]
-							this.actionInfo = item
-							$http.post('/api/v1/mp/user/ticket/cashPrize', {
-								ticketId: this.ticketId,
-								awardsId: item.awardsId,
-								prizeId: item.prizeId
-							}).then(res => {
-								if (res.code == 0) {
-									this.comfirmShow = true
-								}
-							})
-							return
-						}
-						this.ticketId = res.data.ticketId
-						this.total = this.prizeList.length
-						this.prizeList = res.data.prizeList
-					} else if (res.code == 1018) {
-						this.tipShow = true
-					} else {
-						this.tipShow = true
-					}
-				}).catch(() => {
-					uni.hideLoading();
-				})
-			},
-
-			selectPrize(index) {
-				this.actionIndex = index
-			},
-
-			confirmPrize() {
-				let _this = this
+							// this.posterData.title.text = item.title || ''
+							this.posterData.title.text = item.title.length > 11 ? item.title.slice(0, 11).concat("...") : item.title ;
+							this.posterData.mainImg.url = item.picUrl
+							this.actionInfo = item
+							$http.post('/api/v1/mp/user/ticket/cashPrize', {
+								ticketId: this.ticketId,
+								awardsId: item.awardsId,
+								prizeId: item.prizeId
+							}).then(res => {
+								if (res.code == 0) {
+									this.comfirmShow = true
+								}
+							})
+							return
+						}
+						this.ticketId = res.data.ticketId
+						this.total = this.prizeList.length
+						this.prizeList = res.data.prizeList
+					} else if (res.code == 1018) {
+						this.tipShow = true
+					} else {
+						this.tipShow = true
+					}
+				}).catch(() => {
+					uni.hideLoading();
+				})
+			},
+
+			selectPrize(index) {
+				this.actionIndex = index
+			},
+
+			confirmPrize() {
+				let _this = this
 				let item = _this.prizeList[_this.actionIndex]
-				_this.actionInfo = item
-				if (_this.prizeList.length > 1) {
-					uni.showModal({
-						title: '提示',
-						content: '确定选择该奖品吗？',
-						success(res) {
-							if (res.confirm) {
-								$http.post('/api/v1/mp/user/ticket/cashPrize', {
-									ticketId: _this.ticketId,
-									awardsId: item.awardsId,
-									prizeId: item.prizeId
-								}).then(res => {
-									if (res.code == 0) {
-										_this.comfirmShow = true
-									}
-								})
-							}
-						}
-					})
-				} else {
-					$http.post('/api/v1/mp/user/ticket/cashPrize', {
-						ticketId: _this.ticketId,
-						awardsId: item.awardsId,
-						prizeId: item.prizeId
-					}).then(res => {
-						if (res.code == 0) {
-							_this.comfirmShow = true
-						}
-					})
-				}
-			},
-
-			toIndex() {
-				uni.switchTab({
-					url: '/pages/index/index'
-				})
-			},
-
-			back() {
-				let pages = getCurrentPages();
-				if (pages.length > 1) {
-					uni.navigateBack({
-						delta: 1
-					})
-				} else {
-					uni.switchTab({
-						url: '/pages/core/index'
-					})
-				}
-			},
-
-			toPrize(data) {
-				if (data.value == 'goods') {
-					uni.redirectTo({
-						url: '/packagePrize/prize/index'
-					})
-				}
-				if (data.value == 'coupon') {
-					uni.redirectTo({
-						url: '/packagePrize/prize/index?coupon=1'
-					})
-				}
-				if (data.value == 'coupon_pkg') {
-					uni.redirectTo({
-						url: '/packagePrize/prize/index?coupon=1'
-					})
-				}
-				if (data.value == 'coin') {
-					uni.switchTab({
-						url: '/pages/core/index'
-					})
-				}
+				// this.posterData.title.text = item.title || ''
+				this.posterData.title.text = item.title.length > 11 ? item.title.slice(0, 11).concat("...") : item.title ;
+				this.posterData.mainImg.url = item.picUrl
+				_this.actionInfo = item
+				if (_this.prizeList.length > 1) {
+					uni.showModal({
+						title: '提示',
+						content: '确定选择该奖品吗？',
+						success(res) {
+							if (res.confirm) {
+								$http.post('/api/v1/mp/user/ticket/cashPrize', {
+									ticketId: _this.ticketId,
+									awardsId: item.awardsId,
+									prizeId: item.prizeId
+								}).then(res => {
+									if (res.code == 0) {
+										_this.comfirmShow = true
+									}
+								})
+							}
+						}
+					})
+				} else {
+					$http.post('/api/v1/mp/user/ticket/cashPrize', {
+						ticketId: _this.ticketId,
+						awardsId: item.awardsId,
+						prizeId: item.prizeId
+					}).then(res => {
+						if (res.code == 0) {
+							_this.comfirmShow = true
+						}
+					})
+				}
+			},
+
+			toIndex() {
+				uni.switchTab({
+					url: '/pages/index/index'
+				})
+			},
+
+			back() {
+				let pages = getCurrentPages();
+				if (pages.length > 1) {
+					uni.navigateBack({
+						delta: 1
+					})
+				} else {
+					uni.switchTab({
+						url: '/pages/core/index'
+					})
+				}
+			},
+
+			toPrize(data) {
+				if (data.value == 'goods') {
+					uni.redirectTo({
+						url: '/packagePrize/prize/index'
+					})
+				}
+				if (data.value == 'coupon') {
+					uni.redirectTo({
+						url: '/packagePrize/prize/index?coupon=1'
+					})
+				}
+				if (data.value == 'coupon_pkg') {
+					uni.redirectTo({
+						url: '/packagePrize/prize/index?coupon=1'
+					})
+				}
+				if (data.value == 'coin') {
+					uni.switchTab({
+						url: '/pages/core/index'
+					})
+				}
+			},
+
+			toPrizeGoods(item) {
+				if (item.prizeType.value == "goods") {
+					this.getGoodsDetail(item.refId)
+				}
+				//门店优惠券
+				if (item.prizeType.value == "coupon" || item.prizeType.value == "coupon_pkg") {
+					this.getGoodsDetail(425)
+				}
+				// 盲豆
+				if (item.prizeType.value == "coin") {
+					this.getGoodsDetail(424)
+				}
+			},
+
+			toUser() {
+				uni.switchTab({
+					url: '/pages/user/index'
+				})
+			},
+
+			getGoodsDetail(id) {
+				uni.showLoading({
+					title: '加载中'
+				});
+				$http.post('/api/v1/mp/user/exchange/goods/detail', {
+					noToken: true,
+					goodsId: id
+				}).then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						this.detailShow = true
+						// 处理富文本
+						// #ifndef MP-ALIPAY
+						const description = res.data.description.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
+							.replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
+								".png?imageView2/2/w/750\"");
+						this.description = formatRichText(description);
+						// #endif
+
+						// #ifdef MP-ALIPAY
+						res.data.description.split(".jpg\"").join(".jpg?imageView2/2/w/750\"")
+						res.data.description.split(".jpeg\"").join(".jpeg?imageView2/2/w/750\"")
+						res.data.description.split(".png\"").join(".png?imageView2/2/w/750\"")
+						this.description = formatRichText(res.data.description);
+						// #endif
+					}
+				}).catch(() => {
+					uni.hideLoading();
+				})
+			},
+
+			again() {
+				let _this = this
+				if (this.type == 'online') {
+					uni.switchTab({
+						url: '/pages/index/index'
+					})
+				} else {
+					uni.scanCode({
+						scanType: ['qrCode'],
+						success(res) {
+							const url = res.result
+							let serialNo = urlParameter(url).id
+							uni.redirectTo({
+								url: `/pages/lucky/index?id=${ serialNo }&type=offline`
+							})
+						},
+						fail() {
+							uni.$u.toast('请扫二维码');
+						}
+					});
+				}
 			},
 			
-			toPrizeGoods(item) {
-				if (item.prizeType.value == "goods") {
-					this.getGoodsDetail(item.refId)
-				}
-				//门店优惠券
-				if (item.prizeType.value == "coupon" || item.prizeType.value == "coupon_pkg") {
-					this.getGoodsDetail(425)
-				}
-				// 盲豆
-				if (item.prizeType.value == "coin") {
-					this.getGoodsDetail(424)
-				}
-			},
-			
-			toUser() {
-				uni.switchTab({
-					url: '/pages/user/index'
-				})
-			},
-			
-			getGoodsDetail(id) {
-				uni.showLoading({
-					title: '加载中'
-				});
-				$http.post('/api/v1/mp/user/exchange/goods/detail', {
-					noToken: true,
-					goodsId: id
+			getUrl() {
+				//获取二维码
+				$http.post('/api/v1/mp/user/share/code/generate', {
+					boxId: this.boxId,
+					type: "1",
 				}).then(res => {
-					uni.hideLoading();
-					if (res.code == 0) {
-						this.detailShow = true
-						// 处理富文本
-						// #ifndef MP-ALIPAY
-						const description = res.data.description.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
-							.replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
-								".png?imageView2/2/w/750\"");
-						this.description = formatRichText(description);
-						// #endif
-						
-						// #ifdef MP-ALIPAY
-						res.data.description.split(".jpg\"").join(".jpg?imageView2/2/w/750\"")
-						res.data.description.split(".jpeg\"").join(".jpeg?imageView2/2/w/750\"")
-						res.data.description.split(".png\"").join(".png?imageView2/2/w/750\"")
-						this.description = formatRichText(res.data.description);
-						// #endif
-					}
-				}).catch(() => {
-					uni.hideLoading();
+					this.posterData.codeImg.url = env.filePublic + res.data
 				})
-			},
-			
-			again() {
-				let _this = this
-				if(this.type == 'online') {
-					uni.switchTab({
-						url: '/pages/index/index'
-					})
-				} else {
-					uni.scanCode({
-						scanType: ['qrCode'],
-						success(res) {
-							const url = res.result
-							let serialNo = urlParameter(url).id
-							uni.redirectTo({
-								url: `/pages/lucky/index?id=${ serialNo }&type=offline`
-							})
-						},
-						fail() {
-							uni.$u.toast('请扫二维码');
-						}
-					});
-				}
-			},
-		}
-	}
-</script>
-
+			},
+
+			saveImg() {
+				//下载海报
+				this.$refs.shareCode.posterShow()
+			},
+		},
+		onShareAppMessage(res) {
+			return {
+				title: '分享奖品',
+				path: `/pages/index/index`,
+				imageUrl: 'https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/sharePosterCover.png',
+			}
+		},
+		//分享朋友圈
+		onShareTimeline() {
+			return {
+				title: '分享奖品',
+				query: `toIndex=true`,
+				imageUrl: 'https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/sharePosterCover.png',
+			}
+		}
+	}
+</script>
+
 <style lang="scss" scoped>
-	.choice {
+	.poster {
 		display: flex;
 		flex-direction: column;
 		position: relative;
 		width: 100%;
 		height: 100vh;
-		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/offline_prize_bkg.png) center center no-repeat;
+		background: url(https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/EQCE9TSY4VTY2C4RCTPW.jpg) center center no-repeat;
 		background-size: 100vw 100vh;
 		overflow: hidden;
-		
-		// 返回
-		&-navLeft {
-			position: absolute;
-			left: 34rpx;
-			width: 66rpx;
-			height: 66rpx;
-			background-color: rgba(255, 255, 255, .36);
-			border-radius: 50%;
-		}
-		
-		// 标题
-		&-title {
-			padding-top: 15vh;
-			margin-bottom: 72rpx;
-			
-			image {
-				width: 484rpx;
-				height: 108rpx;
-			}
-		}
-		
-		// 提示
-		&-tip {
-			&-content {
-				width: 50vw;
-				height: 56rpx;
-				line-height: 56rpx;
-				background: rgba(255, 211, 157, .44);
-				border-radius: 24rpx;
-				color: #FB900B;
-				font-size: 30rpx;
-				text-align: center;
-			}
-		}
-		
-		// 奖品列表
-		&-list {
-			flex: 1;
-			margin: 72rpx 48rpx 0;
-			padding-bottom: 200rpx;
-			overflow-y: auto;
-			
-			&-item {
-				justify-content: space-between;
-				background-color: #fff;
-				border-radius: 12rpx;
-				padding: 38rpx 24rpx;
-				margin-bottom: 54rpx;
-				
-				.checkbox {
-					width: 46rpx;
-					height: 46rpx;
-					border: 1px solid #F56D1B;
-					border-radius: 50%;
-				}
-				
-				.checkbox-action {
-					background: #F56D1B;
-				}
-				
-				.info {
-					margin: 0 30rpx;
-					flex: 1;
-					justify-content: flex-start;
-					
-					image {
-						width: 120rpx;
-						height: 120rpx;
-						margin-right: 34rpx;
-					}
-					
-					&-content {
-						height: 120rpx;
-						flex: 1;
-						align-items: flex-start;
-						flex-direction: column;
-						justify-content: space-between;
-						
-						&__title {
-							width: 100%;
-							height: 70rpx;
-							font-size: 30rpx;
-							line-height: 35rpx;
-						}
-						&__titletwo {
-							width: 100%;
-							height: 67rpx;
-							font-size: 30rpx;
-							line-height: 35rpx;
-							overflow: hidden;
-						}
-						
-						&__price {
-							font-weight: bold;
-						}
-					}
-				}
-				
-				.detail {
-					color: #F56D1B;
-				}
-			}
-		}
-		
-		&-box {
-			margin-bottom: 34rpx;
-			
-			&-popup {
-				flex-direction: column;
-				width: 75vw;
-				height: 38vh;
-				background-color: #FFFFFF;
-				border-radius: 22rpx;
-				
-				&__image {
-					width: 65%;
-					height: 65%;
-					
-					image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-			}
-		}
-		
-		&-info {
-			margin-bottom: 40rpx;
-			
-			&-content {
-				width: 70vw;
-				
-				&-price {
-					text-align: center;
-					font-size: 40rpx;
-					line-height: 40rpx;
-					font-family: PingFang SC;
-					font-weight: bold;
-					color: #FFFFFF;
-					margin-bottom: 20rpx;
-					
-					text {
-						font-size: 28rpx;
-					}
-				}
-				
-				&-title {
-					height: 36rpx;
-					overflow: hidden;
-					text-align: center;
-					font-size: 36rpx;
-					line-height: 36rpx;
-					color: #FFFFFF;
-					margin-bottom: 40rpx;
-				}
-				
-				&-btn {
-					&-content {
-						position: relative;
-						width: 70vw;
-						
-						image {
-							width: 70vw;
-							height: 112rpx;
-						}
-						
-						&-txt {
-							position: absolute;
-							top: 0;
-							height: 112rpx;
-							line-height: 112rpx;
-							font-size: 30rpx;
-							text-align: center;
-							color: #FFFFFF;
-						}
-					}
-				}
-			}
-		}
-		
-		&-tip {
-			.txt {
-				width: 332rpx;
-				height: 66rpx;
-				line-height: 66rpx;
-				text-align: center;
-				background: rgba(255, 211, 157, .3);
-				border-radius: 34rpx;
-				font-size: 34rpx;
-				font-weight: 500;
-				color: #FB930D;
-			}
-		}
-	}
-	
-	// 按钮
-	.footer-fixed {
-		position: fixed;
-		bottom: var(--window-bottom);
-		left: 0;
-		right: 0;
-		z-index: 11;
-		// 设置ios刘海屏底部横线安全区域
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-		
-		&-btn {
-			padding: 0 0 20rpx;
-			position: relative;
-			width: 70vw;
-			
-			image {
-				width: 70vw;
-				height: 112rpx;
-			}
-			
-			&-txt {
-				position: absolute;
-				top: 0;
-				height: 112rpx;
-				line-height: 112rpx;
-				font-size: 30rpx;
-				text-align: center;
-				color: #FFFFFF;
-			}
-		}
-
-		.btn {
-			padding: 20rpx 0;
-
-			::v-deep button {
-				width: 640rpx;
-				height: 90rpx;
-				line-height: 90rpx;
-				font-size: 36rpx;
-				color: #fff;
-				background-color: $uni-bg-color;
-				border: none;
-				border-radius: 20rpx;
-			}
-		}
-	}
-	
-	.prize-detail {
-		flex-direction: column;
-		height: 60vh;
-
-		&-title {
-			padding: 40rpx 0;
-			text-align: center;
-			font-size: 34rpx;
-			line-height: 34rpx;
-			font-weight: bold;
-		}
-		
-		&-content {
-			width: 100vw;
-			flex: 1;
-			overflow-y: auto;
-		}
-	}
-
-	.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;
-		}
-	}
-
-	.confirm-prize {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		width: 80vw;
-		padding: 40rpx 0;
-
-		&-info {
-			width: 80%;
-			margin-bottom: 60rpx;
-			justify-content: space-around;
-
-			image {
-				width: 150rpx;
-				height: 200rpx;
-			}
-
-			.title {
-				flex: 1;
-				padding-left: 40rpx;
-			}
-		}
-
-		&-tip {
-			text-align: center;
-			margin-bottom: 60rpx;
-
-			text {
-				padding-left: 24rpx;
-				color: rgba(32, 163, 242, 100);
-			}
-		}
-
-		&-btn {
-			width: 80%;
-			justify-content: space-around;
-
-			.back {
-				width: 160rpx;
-				height: 60rpx;
-				line-height: 60rpx;
-				border-radius: 8rpx;
-				color: rgba(235, 112, 9, 100);
-				font-size: 28rpx;
-				text-align: center;
-				font-family: Microsoft Yahei;
-				border: 1px solid rgba(235, 112, 9, 100);
-			}
-
-			.confirm {
-				width: 160rpx;
-				height: 60rpx;
-				line-height: 60rpx;
-				border-radius: 8rpx;
-				background-color: rgba(235, 112, 9, 100);
-				color: rgba(253, 253, 253, 100);
-				font-size: 28rpx;
-				text-align: center;
-			}
-		}
-	}
+	}
+	.choice {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		width: 100%;
+		height: 100vh;
+		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/offline_prize_bkg.png) center center no-repeat;
+		background-size: 100vw 100vh;
+		overflow: hidden;
+
+		// 返回
+		&-navLeft {
+			position: absolute;
+			left: 34rpx;
+			width: 66rpx;
+			height: 66rpx;
+			background-color: rgba(255, 255, 255, .36);
+			border-radius: 50%;
+		}
+
+		// 标题
+		&-title {
+			padding-top: 15vh;
+			margin-bottom: 72rpx;
+
+			image {
+				width: 484rpx;
+				height: 108rpx;
+			}
+		}
+
+		// 提示
+		&-tip {
+			&-content {
+				width: 50vw;
+				height: 56rpx;
+				line-height: 56rpx;
+				background: rgba(255, 211, 157, .44);
+				border-radius: 24rpx;
+				color: #FB900B;
+				font-size: 30rpx;
+				text-align: center;
+			}
+		}
+
+		//下载海报
+		&-download {
+			margin-top: 50rpx;
+
+			>image {
+				width: 40rpx;
+				height: 40rpx;
+			}
+
+			>view {
+				font-size: 30rpx;
+				font-weight: 500;
+				color: #fff;
+			}
+		}
+
+		// 奖品列表
+		&-list {
+			flex: 1;
+			margin: 72rpx 48rpx 0;
+			padding-bottom: 200rpx;
+			overflow-y: auto;
+
+			&-item {
+				justify-content: space-between;
+				background-color: #fff;
+				border-radius: 12rpx;
+				padding: 38rpx 24rpx;
+				margin-bottom: 54rpx;
+
+				.checkbox {
+					width: 46rpx;
+					height: 46rpx;
+					border: 1px solid #F56D1B;
+					border-radius: 50%;
+				}
+
+				.checkbox-action {
+					background: #F56D1B;
+				}
+
+				.info {
+					margin: 0 30rpx;
+					flex: 1;
+					justify-content: flex-start;
+
+					image {
+						width: 120rpx;
+						height: 120rpx;
+						margin-right: 34rpx;
+					}
+
+					&-content {
+						height: 120rpx;
+						flex: 1;
+						align-items: flex-start;
+						flex-direction: column;
+						justify-content: space-between;
+
+						&__title {
+							width: 100%;
+							height: 70rpx;
+							font-size: 30rpx;
+							line-height: 35rpx;
+						}
+
+						&__titletwo {
+							width: 100%;
+							height: 67rpx;
+							font-size: 30rpx;
+							line-height: 35rpx;
+							overflow: hidden;
+						}
+
+						&__price {
+							font-weight: bold;
+						}
+					}
+				}
+
+				.detail {
+					color: #F56D1B;
+				}
+			}
+		}
+
+		&-box {
+			margin-bottom: 34rpx;
+
+			&-popup {
+				flex-direction: column;
+				width: 75vw;
+				height: 38vh;
+				background-color: #FFFFFF;
+				border-radius: 22rpx;
+
+				&__image {
+					width: 65%;
+					height: 65%;
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+		}
+
+		&-info {
+			margin-bottom: 40rpx;
+
+			&-content {
+				width: 70vw;
+
+				&-price {
+					text-align: center;
+					font-size: 40rpx;
+					line-height: 40rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #FFFFFF;
+					margin-bottom: 20rpx;
+
+					text {
+						font-size: 28rpx;
+					}
+				}
+
+				&-title {
+					height: 36rpx;
+					overflow: hidden;
+					text-align: center;
+					font-size: 36rpx;
+					line-height: 36rpx;
+					color: #FFFFFF;
+					margin-bottom: 40rpx;
+				}
+
+				&-btn {
+					&-content {
+						position: relative;
+						width: 70vw;
+
+						image {
+							width: 70vw;
+							height: 112rpx;
+						}
+
+						&-txt {
+							position: absolute;
+							top: 0;
+							height: 112rpx;
+							line-height: 112rpx;
+							font-size: 30rpx;
+							text-align: center;
+							color: #FFFFFF;
+						}
+					}
+				}
+			}
+		}
+
+		&-tip {
+			.txt {
+				width: 332rpx;
+				height: 66rpx;
+				line-height: 66rpx;
+				text-align: center;
+				background: rgba(255, 211, 157, .3);
+				border-radius: 34rpx;
+				font-size: 34rpx;
+				font-weight: 500;
+				color: #FB930D;
+			}
+		}
+	}
+
+	// 按钮
+	.footer-fixed {
+		position: fixed;
+		bottom: var(--window-bottom);
+		left: 0;
+		right: 0;
+		z-index: 11;
+		// 设置ios刘海屏底部横线安全区域
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+
+		&-btn {
+			padding: 0 0 20rpx;
+			position: relative;
+			width: 70vw;
+
+			image {
+				width: 70vw;
+				height: 112rpx;
+			}
+
+			&-txt {
+				position: absolute;
+				top: 0;
+				height: 112rpx;
+				line-height: 112rpx;
+				font-size: 30rpx;
+				text-align: center;
+				color: #FFFFFF;
+			}
+		}
+
+		.btn {
+			padding: 20rpx 0;
+
+			::v-deep button {
+				width: 640rpx;
+				height: 90rpx;
+				line-height: 90rpx;
+				font-size: 36rpx;
+				color: #fff;
+				background-color: $uni-bg-color;
+				border: none;
+				border-radius: 20rpx;
+			}
+		}
+	}
+
+	.prize-detail {
+		flex-direction: column;
+		height: 60vh;
+
+		&-title {
+			padding: 40rpx 0;
+			text-align: center;
+			font-size: 34rpx;
+			line-height: 34rpx;
+			font-weight: bold;
+		}
+
+		&-content {
+			width: 100vw;
+			flex: 1;
+			overflow-y: auto;
+		}
+	}
+
+	.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;
+		}
+	}
+
+	.confirm-prize {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 80vw;
+		padding: 40rpx 0;
+
+		&-info {
+			width: 80%;
+			margin-bottom: 60rpx;
+			justify-content: space-around;
+
+			image {
+				width: 150rpx;
+				height: 200rpx;
+			}
+
+			.title {
+				flex: 1;
+				padding-left: 40rpx;
+			}
+		}
+
+		&-tip {
+			text-align: center;
+			margin-bottom: 60rpx;
+
+			text {
+				padding-left: 24rpx;
+				color: rgba(32, 163, 242, 100);
+			}
+		}
+
+		&-btn {
+			width: 80%;
+			justify-content: space-around;
+
+			.back {
+				width: 160rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 8rpx;
+				color: rgba(235, 112, 9, 100);
+				font-size: 28rpx;
+				text-align: center;
+				font-family: Microsoft Yahei;
+				border: 1px solid rgba(235, 112, 9, 100);
+			}
+
+			.confirm {
+				width: 160rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 8rpx;
+				background-color: rgba(235, 112, 9, 100);
+				color: rgba(253, 253, 253, 100);
+				font-size: 28rpx;
+				text-align: center;
+			}
+		}
+	}
 </style>

src/packagePrize/goods/index.vue

@@ -130,7 +130,6 @@
 			},
 			
 			exchange() {
-				console.log(this.info);
 				let data = {
 					couponIds: [],
 					autoCoupon: 1,

src/pages/index/index.vue

@@ -322,7 +322,7 @@
 			
 			toLucky() {
 				uni.navigateTo({
-					url: `/pages/lucky/index?id=TXH00252-0001-0000009`
+					url: `/pages/lucky/index?id=TXH00252-0001-0000006`
 				})
 			},
 

src/pages/lucky/index.vue

@@ -254,7 +254,6 @@
 			
 			jumpNumber() {
 			      this.nearbyNum = 0 //起始数据
-						
 			      let endNum = Math.floor(Math.random()*10+1) //最终数据
 			      let step = 0  //累加步长
 						let time = 200 //动画时间