uniapp+uView幸运大转盘

Nymph_Zhu

已于 2024-09-03 17:58:52 修改

阅读量944

点赞数 18

文章标签： uni-app android ios 前端 javascript

于 2024-09-03 17:58:13 首次发布

本文链接：https://blog.csdn.net/Mirs_Zhu/article/details/141867629

版权

父组件代码：

<almost-lottery :lottery-size="lotteryConfig.lotterySize" :action-size="lotteryConfig.actionSize"

:lotteryBg="lotteryBg" :ring-count="2" :duration="1" :img-circled="true" :strFontColors="['#f00']"

:canvasCached="true" :prize-list="prizeList" :prize-index="prizeIndex" @reset-index="prizeIndex = -1"

@draw-start="handleDrawStart" @draw-end="handleDrawEnd" @finish="handleDrawFinish"

v-if="prizeList.length" />

</view>

<u-notice-bar fontSize="22rpx" :customStyle="{padding:'12rpx 6rpx 0 30rpx',width:'380rpx',height:'44rpx',borderRadius:'0 22px 22px 0'}" :text="text1" direction="column" icon="" color="#fff" bgColor="rgba(0,0,0,.3)"></u-notice-bar>

</view>

</view>

我的奖品

</view>

</view>

1.<strong>积分消耗</strong> ：每进行一次大转盘抽奖消耗10积分；<br/>

2.<strong>奖品说明</strong>：权益奖品会在10分钟内发放到对应获奖账户；实体物品需在【我的奖品】进行领取；<br/>

3.<strong>奖品领取</strong>：需在【我的奖品】中填写联系人、联系电话及联系地址，一旦完成领取，不可撤销/更改;奖品将在领取后14个工作日内完成奖品发放；<br/>

4.<strong>奖品有效期</strong>：凡通过大转盘抽奖获取的实体物品，需在中奖后7天内完成领取，逾期视为放弃奖励；<br/>

5.<strong>特殊说明</strong>：凡通过不正当手段获取的积分，本司有权撤销该用户相应积分，并追回其在大转盘抽奖获取的权益/物品，且保留追究该用户责任的权利。<br/>

</view>

<u-popup :show="popupShow1" mode="center" bgColor="transparent">

<view class="r-title" v-if="isStatus">恭喜您中奖</view>

<text v-if="productName">{{productName}}</text>

<text v-else>未中奖谢谢参与</text>

</view>

</view>

</u-popup>

<u-popup :show="popupShow2" mode="bottom" bgColor="transparent">

</view>

<scroll-view scroll-y="true" style="max-height: 920rpx;">

<u--image :showLoading="true" :src="item.mainImgPath" width="170rpx" height="170rpx" radius='10rpx' @click="click"></u--image>

<view class="t-left">{{item.productName}}</view>

</view>

<view class="c-time">获奖时间: {{item.updatetime.slice(0,10)}}</view>

</view>

</scroll-view>

<u--image src="/static/images/nocomment.png" width="320rpx" height="268rpx"></u--image>

<text style="font-size: 24rpx;font-weight: 500;color: #999999;margin-top: 22rpx;">暂无中奖记录~</text>

</view>

</u-popup>

</view>

</template>

import {

luckdrawactivityinfos,

luckdrawproductinfo,

luckDraw,

MyLuckDraw,

GetLuckDraws,

getUserinfo,

getintegroreduce

} from "@/api/luckDraw.js" // 后端接口

import AlmostLottery from './almost-lottery.vue'

import {

clearCacheFile,

clearStore

} from './almost-utils.js'

export default {

components: {

AlmostLottery

data() {

return {

// 开启调试模式

isDev: true,

// 以下是转盘配置相关数据

lotteryConfig: {

// 抽奖转盘的整体尺寸，单位rpx

lotterySize: 600,

// 抽奖按钮的尺寸，单位rpx

actionSize: 150

// 以下是转盘 UI 配置

// 转盘外环图，如有需要，请参考替换为自己的设计稿

lotteryBg: require('@/static/images/zhuanpan.png'),

// 以下是奖品配置数据

// 奖品数据

prizeList: [],

// 奖品是否设有库存

onStock: true,

// 中奖下标

prizeIndex: -1,

// 是否正在抽奖中，避免重复触发

prizeing: false,

top: 0,

opacity: 0,

scrollTop: 0.5,

popupShow1: false, // 中奖结果弹框

popupShow2: false, // 奖品弹框

text1: [], // 中奖滚动信息

userId:'', // 用户id

productName:'', // 奖品名称

mainImgPath:'', // 奖品图片

isPrize:true, // 是否有奖品

isStatus:true, // 是否展示中奖

integroreduce:'', // 用户积分

myprizeList:[], // 中奖奖品列表

integroValue:'', // 积分值

productID:'', // 奖品id

produceAttr:'', // 奖品列表

userName:'', // 用户名

}

computed: {

isApple() {

return uni.getSystemInfoSync().platform === 'ios'

}

onPageScroll(e) {

this.scrollTop = e.scrollTop;

methods: {

// 获取轮播列表

async getLuckDraws() {

let arr = []

let res = await GetLuckDraws({

luckDrawActivityID: this.LuckDrawActivityID

})

res.result.forEach(item=>{

arr.push(`恭喜${item.userName ? item.userName :'**'}获得${item.productName}奖品！`)

})

this.text1 = arr

// 获取我的奖品

async getMyLuckDraw() {

let res = await MyLuckDraw({

token: sessionStorage.getItem("token"),

status:-1,

pageIndex:1,

pageSize: 1000

})

this.popupShow2 = true

this.myprizeList = res.result

//获取总积分

async getTotal() {

let res = await getintegroreduce({

token: sessionStorage.getItem("token")

})

if (res.isSuccess) {

this.integroreduce = res.resultData

} else {

this.integroreduce = 0

}

again() {

this.popupShow1 = false

this.handleDrawStart()

this.productName = ''

this.mainImgPath = ''

closePopup() {

this.popupShow1 = false

this.productName = '',

this.mainImgPath = ''

async getluckdrawactivityinfos() {

let data = await getUserinfo({

token: sessionStorage.getItem("token")

})

this.userId = data.result.UserID

this.userName = data.result.Name

let res = await luckdrawactivityinfos()

this.LuckDrawActivityID = res.result.luckDrawActivityID

this.integroValue = res.result.integralValue

this.getPrizeList()

// 获取奖品列表

async getPrizeList() {

let res = await luckdrawproductinfo({

LuckDrawActivityID:this.LuckDrawActivityID

})

if(res.status == 1) {

let data = res.result

if (data.length) {

this.prizeList = data

}

} else {

uni.hideLoading()

uni.showToast({

title: '获取奖品失败',

mask: true,

icon: 'none'

})

}

initNavigation(e) {

this.opacity = e.opacity;

this.top = e.top;

opacityChange(e) {

this.opacity = e.opacity;

// 重新生成

handleInitCanvas() {

clearCacheFile()

clearStore()

this.prizeList = []

this.getPrizeList()

// 本次抽奖开始

handleDrawStart() {

if (this.prizeing) return

this.prizeing = true

this.remoteGetPrizeIndex()

async remoteGetPrizeIndex() {

let res = await luckDraw({

userId:this.userId,

LuckDrawActivityID:this.LuckDrawActivityID,

integroValue:this.integroValue,

userName:this.userName,

token: sessionStorage.getItem("token")

})

if(res.status == 1) {

this.isStatus = true

this.getTotal()

if( res.result.productName.indexOf('积分') != -1 || res.result.productName.indexOf('研报') != -1) {

this.isPrize = false

}else {

this.isPrize = true

}

let productID = res.result.productID

this.productName = res.result.productName

this.mainImgPath = res.result.mainImgPath

this.produceAttr = res.result.produceAttr

this.productID = res.result.productID

let list = [...this.prizeList]

// 拿到后端返回的 productID 后，开始循环比对得出那个中奖的数据

for (let i = 0; i < list.length; i++) {

let item = list[i]

if (item.productID === productID) {

// 中奖下标

this.prizeIndex = i

break

}

}else if(res.message == '谢谢惠顾！') {

this.getTotal()

this.isPrize = false

this.isStatus = false

let list = [...this.prizeList]

for (let i = 0; i < list.length; i++) {

let item = list[i]

if (item.productID === null) {

// 中奖下标

this.prizeIndex = i

break

}

}else{

uni.showToast({

icon:'none',

title: res.message

})

this.prizeing = false

}

// 本次抽奖结束

handleDrawEnd() {

this.popupShow1 = true

this.prizeing = false

// 抽奖转盘绘制完成

handleDrawFinish(res) {

if (res.ok) {

// 计算结束绘制的时间

if (console.timeEnd) {

console.timeEnd('绘制转盘用时')

}

let stoTimer = setTimeout(() => {

stoTimer = null

uni.hideLoading()

uni.showToast({

title: res.msg,

mask: true,

icon: 'none'

})

}, 50)

}

onLoad() {

this.text1 = []

this.prizeList = []

this.getTotal()

this.getluckdrawactivityinfos()

this.getLuckDraws()

onUnload() {

uni.hideLoading()

}

</script>

page {

background-color: #E8251E;

padding-bottom: 60rpx;

}

.mask {

overflow: hidden;

position:fixed;

height: 100%;

width: 100%;

}

.p-result {

position: relative;

width: 668rpx;

height: 744rpx;

background: url('/static/images/result-icon.png');

background-size: 100% 100%;

background-repeat: no-repeat;

.r-title {

text-align: center;

margin-top: 60rpx;

font-size: 46rpx;

font-family: PingFang;

font-weight: bold;

color: #C72B2A;

letter-spacing: 2px;

}

.r-grid {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

width: 400rpx;

height: 300rpx;

background: linear-gradient(0deg, #FFEAC3, #FFF6EF);

border-radius: 20rpx;

margin: 110rpx auto 0;

image {

width: 160rpx;

height: 160rpx;

margin-bottom: 10rpx;

}

text {

font-size: 34rpx;

font-family: PingFang;

font-weight: bold;

color: #DC3F24;

line-height: 60rpx;

letter-spacing: 1px;

}

.receive-btn {

display: flex;

justify-content: center;

width: 300rpx;

height: 80rpx;

background: url('/static/images/receive-btn.png');

background-size: 100% 100%;

background-repeat: no-repeat;

margin: 60rpx auto 0;

font-size: 30rpx;

font-family: PingFang;

font-weight: bold;

color: #C72B2A;

padding-top: 16rpx;

box-sizing: border-box;

}

.r-close {

position: absolute;

width: 60rpx;

height: 60rpx;

left: 0;

right: 0;

bottom: -100rpx;

margin: auto;

}

.p-header {

width: 750rpx;

height: 110rpx;

display: flex;

justify-content: space-between;

align-items: center;

padding: 0 40rpx 0 30rpx;

box-sizing: border-box;

background-color: #fff;

.h-left {

font-size: 34rpx;

font-family: PingFang;

font-weight: bold;

color: #333333;

}

.h-right {

width: 40rpx;

height: 40rpx;

display: flex;

justify-content: center;

align-items: center;

image {

width: 24rpx;

height: 24rpx;

}

.p-list {

padding: 0 20rpx 0 24rpx;

width: 720rpx;

background: #FFFFFF;

border-radius: 14rpx 14rpx 0 0;

box-sizing: border-box;

margin: 16rpx auto 0;

.p-item {

display: flex;

align-items: center;

height: 230rpx;

image {

width: 170rpx;

height: 170rpx;

border-radius: 10rpx;

}

.i-right {

flex: 1;

margin-left: 30rpx;

.r-title {

display: flex;

align-items: center;

justify-content: space-between;

margin-top: 22rpx;

line-height: 1;

.t-left {

font-size: 32rpx;

font-family: PingFang;

font-weight: bold;

color: #333333;

}

.t-right {

font-size: 26rpx;

font-family: PingFang SC;

font-weight: 500;

color: #DC3F24;

}

.r-num {

font-size: 26rpx;

font-family: PingFang;

font-weight: 500;

color: #999999;

margin-top: 30rpx;

line-height: 1;

}

.r-check {

display: flex;

justify-content: space-between;

align-items: center;

.c-time {

font-size: 24rpx;

font-family: PingFang SC;

font-weight: 500;

color: #999999;

}

.c-btn1 {

display: flex;

align-items: center;

justify-content: center;

width: 160rpx;

height: 60rpx;

background: linear-gradient(90deg, #FF853C, #FC5A4A);

border-radius: 30rpx;

font-size: 28rpx;

font-family: PingFang;

font-weight: bold;

color: #fff;

}

.c-btn3 {

display: flex;

align-items: center;

justify-content: center;

width: 160rpx;

height: 60rpx;

background: linear-gradient(90deg, #E0E3E7, #DBDDE1);;

border-radius: 30rpx;

font-size: 28rpx;

font-family: PingFang;

font-weight: bold;

color: #fff;

}

.c-btn2 {

display: flex;

align-items: center;

justify-content: center;

width: 160rpx;

height: 60rpx;

border: 1px solid #DC3F24;

border-radius: 30rpx;

font-size: 28rpx;

font-family: PingFang;

font-weight: bold;

color: #DC3F24;

}

.d-content {

width: 750rpx;

height: 1505rpx;

position: relative;

background: url('/static/images/d-bgm.jpg');

background-size: cover;

background-repeat: no-repeat;

overflow: hidden;

}

.b-tip1 {

text-align: center;

position: absolute;

top: 0rpx;

right: 24rpx;

width: 60rpx;

height: 76rpx;

background: linear-gradient(90deg, #F8E79B, #FFC15B);

border-radius: 0px 0px 30rpx 30rpx;

font-size: 20rpx;

font-weight: 500;

color: #D0271F;

line-height: 1.2;

padding: 10rpx 6rpx 0;

box-sizing: border-box;

}

.b-tip2 {

position: absolute;

bottom: 10rpx;

width: 300rpx;

height: 44rpx;

z-index: 110;

}

.tui-header-icon {

width: 100%;

position: fixed;

top: 0;

padding: 0 12rpx;

display: flex;

align-items: center;

height: 32px;

transform: translateZ(0);

z-index: 99999;

box-sizing: border-box;

}

.almost-lottery__wheel {

position: relative;

margin-top: 280rpx;

.lottery {

position: absolute;

left: 0;

right: 0;

margin: auto;

z-index: 10;

}

.l-btn {

box-sizing: border-box;

padding-top: 18rpx;

padding-left:100rpx;

position: absolute;

bottom: 70rpx;

left: 20rpx;

width: 224rpx;

height: 96rpx;

background:url('/static/images/btn1.png');

background-repeat: repeat;

background-size: 100% 100%;

z-index: 100;

color: #f00;

font-size: 34rpx;

font-weight: bold;

}

.r-btn {

box-sizing: border-box;

padding-top: 18rpx;

padding-left: 40rpx;

right: 20rpx;

bottom: 70rpx;

position: absolute;

width: 254rpx;

height: 96rpx;

background:url('/static/images/btn2.png');

background-repeat: repeat;

background-size: 100% 100%;

z-index: 100;

color: #f00;

font-size: 32rpx;

font-weight: bold;

}

.a-diz {

margin-top: 300rpx;

}

.d-list {

position:relative;

width: 690rpx;

height: 827rpx;

background: url('/static/images/rule.png');

background-size: 100% 100%;

background-repeat: no-repeat;

margin: -400rpx auto 0 ;

padding: 130rpx 30rpx 0;

font-size: 32rpx;

color: #666;

line-height: 42rpx;

box-sizing: border-box;

font-family: PingFang;

}

</style>

AlmostLottery子组件代码：

<image

class="almost-lottery__bg"

mode="widthFix"

:src="lotteryBg"

:style="{

width: lotteryPxSize + 'px',

height: lotteryPxSize + 'px'

></image>

<image

class="almost-lottery__canvas-img"

mode="widthFix"

:src="lotteryImg"

:style="{

width: canvasImgPxSize + 'px',

height: canvasImgPxSize + 'px',

left: canvasImgToLeftPx + 'px',

top: canvasImgToLeftPx + 'px',

transform: `rotate(${canvasAngle + targetAngle}deg)`,

transitionDuration: `${transitionDuration}s`

></image>

<image

class="almost-lottery__action-bg"

mode="widthFix"

:src="actionBg"

:style="{

width: actionPxSize + 'px',

height: actionPxSize + 'px',

left: actionBgToLeftPx + 'px',

top: actionBgToLeftPx + 'px',

transform: `rotate(${actionAngle + targetActionAngle}deg)`,

transitionDuration: `${transitionDuration}s`

@click="handleActionStart"

></image>

</template>

</view>

<text class="almost-lottery__measureText" :style="{ fontSize: higtFontSize + 'px' }">{{ measureText }}</text>

<canvas

:class="className"

:id="canvasId"

:width="higtCanvasSize"

:height="higtCanvasSize"

:style="{

width: higtCanvasSize + 'px',

height: higtCanvasSize + 'px'

<canvas

:class="className"

:canvas-id="canvasId"

:width="higtCanvasSize"

:height="higtCanvasSize"

:style="{

width: higtCanvasSize + 'px',

height: higtCanvasSize + 'px'

</view>

</template>

import { getStore, setStore, clearStore, circleImg, clacTextLen, downloadFile, pathToBase64, base64ToPath } from './almost-utils.js'

export default {

name: 'AlmostLottery',

props: {

// 设计稿的像素比基准值

pixelRatio: {

type: Number,

default: 2

// canvas 标识

canvasId: {

type: String,

default: 'almostLottery'

// 抽奖转盘的整体尺寸

lotterySize: {

type: Number,

default: 600

// 抽奖按钮的尺寸

actionSize: {

type: Number,

default: 200

// canvas边缘距离转盘边缘的距离

canvasMarginOutside: {

type: Number,

default: 148

// 奖品列表

prizeList: {

type: Array,

required: true,

validator: (value) => {

return value.length > 1

}

// 中奖奖品在列表中的下标

prizeIndex: {

type: Number,

required: true

// 奖品区块对应背景颜色

colors: {

type: Array,

default: () => [

'#FFFFFF',

'#FFE1C1'

]

// 转盘外环背景图

lotteryBg: {

type: String,

default: '/uni_modules/almost-lottery/static/almost-lottery/almost-lottery__bg2x.png'

// 抽奖按钮背景图

actionBg: {

type: String,

default: '/uni_modules/almost-lottery/static/almost-lottery/almost-lottery__action2x.png'

// 是否绘制奖品名称

prizeNameDrawed: {

type: Boolean,

default: true

// 是否开启奖品区块描边

stroked: {

type: Boolean,

default: false

// 描边颜色

strokeColor: {

type: String,

default: '#FFBF05'

// 旋转的类型

rotateType: {

type: String,

default: 'roulette'

// 旋转动画时间单位s

duration: {

type: Number,

default: 8

// 旋转的圈数

ringCount: {

type: Number,

default: 8

// 指针位置

pointerPosition: {

type: String,

default: 'edge',

validator: (value) => {

return value === 'edge' || value === 'middle'

}

// 文字方向

strDirection: {

type: String,

default: 'horizontal',

validator: (value) => {

return value === 'horizontal' || value === 'vertical'

}

// 字体颜色

strFontColors: {

type: Array,

default: () => [

'#FFBF05',

'#FFFFFF'

]

// 文字的大小

strFontSize: {

type: Number,

default: 24

// 奖品文字距离边缘的距离

strMarginOutside: {

type: Number,

default:40

// 奖品图片距离奖品文字的距离

imgMarginStr: {

type: Number,

default: 60

// 奖品文字多行情况下的行高

strLineHeight: {

type: Number,

default: 1.2

// 奖品文字总长度限制

strMaxLen: {

type: Number,

default: 12

// 奖品文字多行情况下第一行文字长度

strLineLen: {

type: Number,

default: 4

// 奖品图片的宽

imgWidth: {

type: Number,

default: 50

// 奖品图片的高

imgHeight: {

type: Number,

default: 50

// 是否绘制奖品图片

imgDrawed: {

type: Boolean,

default: true

// 奖品图片是否裁切为圆形

imgCircled: {

type: Boolean,

default: false

// 转盘绘制成功的提示

successMsg: {

type: String,

default: '奖品准备就绪，快来参与抽奖吧'

// 转盘绘制失败的提示

failMsg: {

type: String,

default: '奖品仍在准备中，请稍后再来...'

// 是否开启画板的缓存

canvasCached: {

type: Boolean,

default: false

}

data() {

return {

// 画板className

className: 'almost-lottery__canvas',

// 高清固定 2 倍，不再从 system 中动态获取，因为 h5、app-vue 中单个尺寸过大时存在 iOS/Safari 无法绘制的问题，且 2 倍基本也可以解决模糊的问题

systemPixelRatio: 2,

// 抽奖转盘的整体px尺寸

lotteryPxSize: 0,

// 画板的px尺寸

canvasImgPxSize: 0,

// 抽奖按钮的px尺寸

actionPxSize: 0,

// 奖品文字距离转盘边缘的距离

strMarginPxOutside: 0,

// 奖品图片相对奖品文字的距离

imgMarginPxStr: 0,

// 奖品图片的宽、高

imgPxWidth: 0,

imgPxHeight: 0,

// 画板导出的图片

lotteryImg: '',

// 旋转到奖品目标需要的角度

targetAngle: 0,

targetActionAngle: 0,

// 旋转动画时间单位 s

transitionDuration: 0,

// 是否正在旋转

isRotate: false,

// 当前停留在那个奖品的序号

stayIndex: 0,

// 当前中奖奖品的序号

targetIndex: 0,

// 是否存在可用的缓存转盘图

isCacheImg: false,

oldLotteryImg: '',

// 解决 app 不支持 measureText 的问题

// app 已在 2.9.3 的版本中提供了对 measureText 的支持，将在后续版本逐渐稳定后移除相关兼容代码

measureText: ''

}

computed: {

// 高清尺寸

higtCanvasSize() {

return this.canvasImgPxSize * this.systemPixelRatio

// 高清字体

higtFontSize() {

return Math.round(this.strFontSize / this.pixelRatio) * this.systemPixelRatio

// 高清行高

higtHeightMultiple() {

return Math.round(this.strFontSize / this.pixelRatio) * this.strLineHeight * this.systemPixelRatio

canvasImgToLeftPx () {

return (this.lotteryPxSize - this.canvasImgPxSize) / 2

actionBgToLeftPx () {

return (this.lotteryPxSize - this.actionPxSize) / 2

// 根据奖品列表计算 canvas 旋转角度

canvasAngle() {

let result = 0

let prizeCount = this.prizeList.length

let prizeClip = 360 / prizeCount

let diffNum = 90 / prizeClip

if (this.pointerPosition === 'edge' || this.rotateType === 'pointer') {

result = -(prizeClip * diffNum)

} else {

result = -(prizeClip * diffNum + prizeClip / 2)

}

return result

actionAngle() {

return 0

// 外圆的半径

outsideRadius() {

return this.higtCanvasSize / 2

// 内圆的半径

insideRadius() {

return 20 * this.systemPixelRatio

// 文字距离边缘的距离

textRadius() {

return this.strMarginPxOutside * this.systemPixelRatio || (this.higtFontSize / 2)

// 根据画板的宽度计算奖品文字与中心点的距离

textDistance() {

const textZeroY = Math.round(this.outsideRadius - (this.insideRadius / 2))

return textZeroY - this.textRadius

}

watch: {

// 监听获奖序号的变动

prizeIndex(newVal, oldVal) {

if (newVal > -1) {

this.targetIndex = newVal

this.onRotateStart()

} else {

console.info('旋转结束，prizeIndex 已重置')

}

methods: {

// 开始旋转

onRotateStart() {

if (this.isRotate) return

this.isRotate = true

// 奖品总数

let prizeCount = this.prizeList.length

let baseAngle = 360 / prizeCount

let angles = 0

if (this.rotateType === 'pointer') {

if (this.targetActionAngle === 0) {

// 第一次旋转

angles = (this.targetIndex - this.stayIndex) * baseAngle + baseAngle / 2 - this.actionAngle

} else {

// 后续旋转

// 后续继续旋转就只需要计算停留的位置与目标位置的角度

angles = (this.targetIndex - this.stayIndex) * baseAngle

}

// 更新目前序号

this.stayIndex = this.targetIndex

// 转 8 圈，圈数越多，转的越快

this.targetActionAngle += angles + 360 * this.ringCount

console.log('targetActionAngle', this.targetActionAngle)

} else {

if (this.targetAngle === 0) {

// 第一次旋转

// 因为第一个奖品是从0°开始的，即水平向右方向

// 第一次旋转角度 = 270度 - (停留的序号-目标序号) * 每个奖品区间角度 - 每个奖品区间角度的一半 - canvas自身旋转的度数

angles = (270 - (this.targetIndex - this.stayIndex) * baseAngle - baseAngle / 2) - this.canvasAngle

} else {

// 后续旋转

// 后续继续旋转就只需要计算停留的位置与目标位置的角度

angles = -(this.targetIndex - this.stayIndex) * baseAngle

}

// 更新目前序号

this.stayIndex = this.targetIndex

// 转 8 圈，圈数越多，转的越快

this.targetAngle += angles + 360 * this.ringCount

}

// 计算转盘结束的时间，预加一些延迟确保转盘停止后触发结束事件

let endTime = this.transitionDuration * 1000 + 100

let endTimer = setTimeout(() => {

clearTimeout(endTimer)

endTimer = null

this.isRotate = false

this.$emit('draw-end')

}, endTime)

let resetPrizeTimer = setTimeout(() => {

clearTimeout(resetPrizeTimer)

resetPrizeTimer = null

// 每次抽奖结束后都要重置父级组件的 prizeIndex

this.$emit('reset-index')

}, endTime + 50)

// 点击开始抽奖按钮

handleActionStart() {

if (!this.lotteryImg) return

if (this.isRotate) return

this.$emit('draw-start')

// 渲染转盘

async onCreateCanvas() {

// 获取 canvas 画布

const canvasId = this.canvasId

const ctx = uni.createCanvasContext(canvasId, this)

// canvas 的宽高

let canvasW = this.higtCanvasSize

let canvasH = this.higtCanvasSize

// 根据奖品个数计算角度

let prizeCount = this.prizeList.length

let baseAngle = Math.PI * 2 / prizeCount

// 设置字体

ctx.setFontSize(this.higtFontSize)

// 注意，开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。

// 画具体内容

for (let i = 0; i < prizeCount; i++) {

let prizeItem = this.prizeList[i]

// 当前角度

let angle = i * baseAngle

// 保存当前画布的状态

ctx.save()

// x => 圆弧对应的圆心横坐标 x

// y => 圆弧对应的圆心横坐标 y

// radius => 圆弧的半径大小

// startAngle => 圆弧开始的角度，单位是弧度

// endAngle => 圆弧结束的角度，单位是弧度

// anticlockwise(可选) => 绘制方向，true 为逆时针，false 为顺时针

ctx.beginPath()

// 外圆

ctx.arc(canvasW * 0.5, canvasH * 0.5, this.outsideRadius, angle, angle + baseAngle, false)

// 内圆

ctx.arc(canvasW * 0.5, canvasH * 0.5, this.insideRadius, angle + baseAngle, angle, true)

// 每个奖品区块背景填充颜色

if (this.colors.length === 2) {

ctx.setFillStyle(this.colors[i % 2])

} else {

ctx.setFillStyle(this.colors[i])

}

// 填充颜色

ctx.fill()

// 开启描边

if (this.stroked) {

// 设置描边颜色

ctx.setStrokeStyle(`${this.strokeColor}`)

// 描边

ctx.stroke()

}

// 开始绘制奖品内容

// 重新映射画布上的 (0,0) 位置

let translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * this.textDistance

let translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * this.textDistance

ctx.translate(translateX, translateY)

// 绘制奖品名称

let rewardName = this.strLimit(prizeItem.product_name)

// 设置文字颜色

if (this.strFontColors.length === 1) {

ctx.setFillStyle(this.strFontColors[0])

} else if (this.strFontColors.length === 2) {

ctx.setFillStyle(this.strFontColors[i % 2])

} else {

ctx.setFillStyle(this.strFontColors[i])

}

// rotate方法旋转当前的绘图，因为文字是和当前扇形中心线垂直的

ctx.rotate(angle + (baseAngle / 2) + (Math.PI / 2))

// 设置文本位置并处理换行

if (this.strDirection === 'horizontal') {

// 是否需要换行

if (rewardName && this.prizeNameDrawed) {

let realLen = clacTextLen(rewardName).realLen

let isLineBreak = realLen > this.strLineLen

if (isLineBreak) {

// 获得多行文本数组

let textCount = 0

let tempTxt = ''

let rewardNames = []

for (let j = 0; j < rewardName.length; j++) {

textCount += clacTextLen(rewardName[j]).byteLen

tempTxt += rewardName[j]

if (textCount === (this.strLineLen * 2)) {

rewardNames.push(tempTxt)

textCount = 0

tempTxt = ''

} else {

if ((rewardName.length - 1) === j) {

rewardNames.push(tempTxt)

textCount = 0

tempTxt = ''

}

// 循环文本数组，计算每一行的文本宽度

for (let j = 0; j < rewardNames.length; j++) {

if (ctx.measureText && ctx.measureText(rewardNames[j]).width > 0) {

// 文本的宽度信息

let tempStrSize = ctx.measureText(rewardNames[j])

let tempStrWidth = -(tempStrSize.width / 2).toFixed(2)

ctx.fillText(rewardNames[j], tempStrWidth, j * this.higtHeightMultiple)

} else {

this.measureText = rewardNames[j]

// 等待页面重新渲染

await this.$nextTick()

let textWidth = await this.getTextWidth()

let tempStrWidth = -(textWidth / 2).toFixed(2)

ctx.fillText(rewardNames[j], tempStrWidth, j * this.higtHeightMultiple)

// console.log(rewardNames[j], textWidth, j)

}

} else {

if (ctx.measureText && ctx.measureText(rewardName).width > 0) {

// 文本的宽度信息

let tempStrSize = ctx.measureText(rewardName)

let tempStrWidth = -(tempStrSize.width / 2).toFixed(2)

ctx.fillText(rewardName, tempStrWidth, 0)

} else {

this.measureText = rewardName

// 等待页面重新渲染

await this.$nextTick()

let textWidth = await this.getTextWidth()

let tempStrWidth = -(textWidth / 2).toFixed(2)

ctx.fillText(rewardName, tempStrWidth, 0)

}

} else {

let rewardNames = rewardName.split('')

for (let j = 0; j < rewardNames.length; j++) {

if (ctx.measureText && ctx.measureText(rewardNames[j]).width > 0) {

// 文本的宽度信息

let tempStrSize = ctx.measureText(rewardNames[j])

let tempStrWidth = -(tempStrSize.width / 2).toFixed(2)

ctx.fillText(rewardNames[j], tempStrWidth, j * this.higtHeightMultiple)

} else {

this.measureText = rewardNames[j]

// 等待页面重新渲染

await this.$nextTick()

let textWidth = await this.getTextWidth()

let tempStrWidth = -(textWidth / 2).toFixed(2)

ctx.fillText(rewardNames[j], tempStrWidth, j * this.higtHeightMultiple)

// console.log(rewardNames[j], textWidth, i)

}

// 绘制奖品图片，文字竖向展示时，不支持图片展示

if (this.imgDrawed && prizeItem.prizeImage && this.strDirection !== 'vertical') {

// App-Android平台系统 webview 更新到 Chrome84+ 后 canvas 组件绘制本地图像 uni.canvasToTempFilePath 会报错

// 统一将图片处理成 base64

// https://ask.dcloud.net.cn/question/103303

let reg = /^(https|http)/g

// 处理远程图片

if (reg.test(prizeItem.prizeImage)) {

let platformTips = ''

// #ifdef APP-PLUS

platformTips = ''

// #endif

// #ifdef MP

platformTips = '需要处理好下载域名的白名单问题，'

// #endif

// #ifdef H5

platformTips = '需要处理好跨域问题，'

// #endif

console.warn(`###当前数据列表中的奖品图片为网络图片，${platformTips}开始尝试下载图片...###`)

let res = await downloadFile(prizeItem.prizeImage)

console.log('处理远程图片', res)

if (res.ok) {

let tempFilePath = res.tempFilePath

// #ifndef MP

prizeItem.prizeImage = await pathToBase64(tempFilePath)

// #endif

// #ifdef MP

prizeItem.prizeImage = tempFilePath

// #endif

} else {

this.handlePrizeImgSuc({

ok: false,

data: res.data,

msg: res.msg

})

}

} else {

// #ifndef MP

// 不是小程序环境，把本地图片处理成 base64

if (prizeItem.prizeImage.indexOf(';base64,') === -1) {

console.log('开始处理本地图片', prizeItem.prizeImage)

prizeItem.prizeImage = await pathToBase64(prizeItem.prizeImage)

console.log('处理本地图片结束', prizeItem.prizeImage)

}

// #endif

// #ifdef MP-WEIXIN

// 小程序环境，把 base64 处理成小程序的本地临时路径

if (prizeItem.prizeImage.indexOf(';base64,') !== -1) {

console.log('开始处理BASE64图片', prizeItem.prizeImage)

prizeItem.prizeImage = await base64ToPath(prizeItem.prizeImage)

console.log('处理BASE64图片完成', prizeItem.prizeImage)

}

// #endif

}

let prizeImageX = -(this.imgPxWidth * this.systemPixelRatio / 2)

let prizeImageY = this.imgMarginPxStr * this.systemPixelRatio

let prizeImageW = this.imgPxWidth * this.systemPixelRatio

let prizeImageH = this.imgPxHeight * this.systemPixelRatio

if (this.imgCircled) {

// 重新设置每个圆形的背景色

if (this.colors.length === 2) {

ctx.setFillStyle(this.colors[i % 2])

} else {

ctx.setFillStyle(this.colors[i])

}

circleImg(ctx, prizeItem.prizeImage, prizeImageX, prizeImageY, prizeImageW, prizeImageH)

} else {

ctx.drawImage(prizeItem.prizeImage, prizeImageX, prizeImageY, prizeImageW, prizeImageH)

}

ctx.restore()

}

// 保存绘图并导出图片

ctx.draw(true, () => {

let drawTimer = setTimeout(() => {

clearTimeout(drawTimer)

drawTimer = null

// #ifdef MP-ALIPAY

ctx.toTempFilePath({

destWidth: this.higtCanvasSize,

destHeight: this.higtCanvasSize,

success: (res) => {

// console.log(res.apFilePath)

this.handlePrizeImg({

ok: true,

data: res.apFilePath,

msg: '画布导出生成图片成功'

})

fail: (err) => {

this.handlePrizeImg({

ok: false,

data: err,

msg: '画布导出生成图片失败'

})

}

})

// #endif

// #ifndef MP-ALIPAY

uni.canvasToTempFilePath({

canvasId: this.canvasId,

destWidth: this.higtCanvasSize,

destHeight: this.higtCanvasSize,

success: (res) => {

// 在 H5 平台下，tempFilePath 为 base64

// console.log(res.tempFilePath)

this.handlePrizeImg({

ok: true,

data: res.tempFilePath,

msg: '画布导出生成图片成功'

})

fail: (err) => {

this.handlePrizeImg({

ok: false,

data: err,

msg: '画布导出生成图片失败'

})

}

}, this)

// #endif

}, 500)

})

// 处理导出的图片

handlePrizeImg(res) {

if (res.ok) {

let data = res.data

if (!this.canvasCached) {

this.lotteryImg = data

this.handlePrizeImgSuc(res)

return

}

// #ifndef H5

if (this.isCacheImg) {

uni.getSavedFileList({

success: (sucRes) => {

let fileList = sucRes.fileList

// console.log('getSavedFileList Cached', fileList)

let cached = false

if (fileList.length) {

for (let i = 0; i < fileList.length; i++) {

let item = fileList[i]

if (item.filePath === data) {

cached = true

this.lotteryImg = data

console.info('经查，本地缓存中存在的转盘图可用，本次将不再绘制转盘')

this.handlePrizeImgSuc(res)

break

}

if (!cached) {

console.info('经查，本地缓存中存在的转盘图不可用，需要重新初始化转盘绘制')

this.initCanvasDraw()

}

fail: (err) => {

this.initCanvasDraw()

}

})

} else {

uni.saveFile({

tempFilePath: data,

success: (sucRes) => {

let filePath = sucRes.savedFilePath

// console.log('saveFile', filePath)

setStore(`${this.canvasId}LotteryImg`, filePath)

this.lotteryImg = filePath

this.handlePrizeImgSuc({

ok: true,

data: filePath,

msg: '画布导出生成图片成功'

})

fail: (err) => {

this.handlePrizeImg({

ok: false,

data: err,

msg: '画布导出生成图片失败'

})

}

})

}

// #endif

// #ifdef H5

setStore(`${this.canvasId}LotteryImg`, data)

this.lotteryImg = data

this.handlePrizeImgSuc(res)

// console info

let consoleText = this.isCacheImg ? '缓存' : '导出'

console.info(`当前为 H5 端，使用${consoleText}中的 base64 图`)

// #endif

} else {

console.error(res.msg, res)

// #ifdef H5

console.error('###当前为 H5 端，下载网络图片需要后端配置允许跨域###')

// #endif

// #ifdef MP

console.error('###当前为小程序端，下载网络图片需要配置域名白名单###')

// #endif

}

// 处理图片完成

handlePrizeImgSuc (res) {

// this.$emit('finish', {

// ok: res.ok,

// data: res.data,

// msg: res.ok ? this.successMsg : this.failMsg

// })

// 兼容 app 端不支持 ctx.measureText

// 已知问题：初始绘制时，低端安卓机平均耗时 2s

// hbx 2.8.12+ 已在 app 端支持

getTextWidth() {

console.warn('正在采用兼容方式获取文本的 size 信息')

let query = uni.createSelectorQuery().in(this)

let nodesRef = query.select('.almost-lottery__measureText')

return new Promise((resolve, reject) => {

nodesRef.fields({

size: true,

}, (res) => {

resolve(res.width)

}).exec()

})

// 处理文字溢出

strLimit(value) {

let maxLength = this.strMaxLen

if (!value || !maxLength) return value

return clacTextLen(value).realLen > maxLength ? value.slice(0, maxLength - 1) + '..' : value

// 检查本地缓存中是否存在转盘图

checkCacheImg () {

console.log('检查本地缓存中是否存在转盘图')

// 检查是否已有缓存的转盘图

// 检查是否与本次奖品数据相同

this.oldLotteryImg = getStore(`${this.canvasId}LotteryImg`)

let oldPrizeList = getStore(`${this.canvasId}PrizeList`)

let newPrizeList = JSON.stringify(this.prizeList)

if (this.oldLotteryImg) {

if (oldPrizeList === newPrizeList) {

console.log(`经查，本地缓存中存在转盘图 => ${this.oldLotteryImg}`)

this.isCacheImg = true

console.log('需要继续判断这张缓存图是否可用')

this.handlePrizeImg({

ok: true,

data: this.oldLotteryImg,

msg: '画布导出生成图片成功'

})

return

}

console.log('经查，本地缓存中不存在转盘图')

this.initCanvasDraw()

// 初始化绘制

initCanvasDraw () {

console.log('开始初始化转盘绘制')

this.isCacheImg = false

this.lotteryImg = ''

clearStore(`${this.canvasId}LotteryImg`)

setStore(`${this.canvasId}PrizeList`, this.prizeList)

this.onCreateCanvas()

// 预处理初始化

async beforeInit () {

let query = uni.createSelectorQuery().in(this)

// 处理 rpx 自适应尺寸

let lotterySize = await new Promise((resolve) => {

query.select('.almost-lottery__wrap').boundingClientRect((rects) => {

resolve(rects)

// console.log('处理 lottery rpx 的自适应', rects)

}).exec()

})

let actionSize = await new Promise((resolve) => {

query.select('.lottery-action').boundingClientRect((rects) => {

resolve(rects)

// console.log('处理 action rpx 的自适应', rects)

}).exec()

})

let strMarginSize = await new Promise((resolve) => {

query.select('.str-margin-outside').boundingClientRect((rects) => {

resolve(rects)

// console.log('处理 str-margin-outside rpx 的自适应', rects)

}).exec()

})

let imgMarginStr = await new Promise((resolve) => {

query.select('.img-margin-str').boundingClientRect((rects) => {

resolve(rects)

// console.log('处理 img-margin-str rpx 的自适应', rects)

}).exec()

})

let imgSize = await new Promise((resolve) => {

query.select('.img-size').boundingClientRect((rects) => {

resolve(rects)

// console.log('处理 img-size rpx 的自适应', rects)

}).exec()

})

this.lotteryPxSize = Math.floor(lotterySize.width)

this.canvasImgPxSize = this.lotteryPxSize - Math.floor(actionSize.left) + Math.floor(lotterySize.left)

this.actionPxSize = Math.floor(actionSize.width)

this.strMarginPxOutside = Math.floor(strMarginSize.left) - Math.floor(lotterySize.left)

this.imgMarginPxStr = Math.floor(imgMarginStr.left) - Math.floor(lotterySize.left)

this.imgPxWidth = Math.floor(imgSize.width)

this.imgPxHeight = Math.floor(imgSize.height)

// console.log(this.lotteryPxSize, this.canvasImgPxSize, this.actionPxSize)

let stoTimer = setTimeout(() => {

clearTimeout(stoTimer)

stoTimer = null

// 判断画板是否设置缓存

if (this.canvasCached) {

this.checkCacheImg()

} else {

this.initCanvasDraw()

}

this.transitionDuration = this.duration

}, 50)

}

mounted() {

this.$nextTick(() => {

let delay = 50

// 小程序平台需要更多的延时才能获取到准确的元素 Size 信息

// // #ifdef MP

// delay = 300

// // #endif

let stoTimer = setTimeout(() => {

clearTimeout(stoTimer)

stoTimer = null

this.beforeInit()

}, delay)

})

}

</script>

.almost-lottery {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

// 以下元素不可见，是 canvas 的实例

.almost-lottery__canvas {

position: absolute;

left: -9999px;

opacity: 0;

display: flex;

justify-content: center;

align-items: center;

}

// 以下元素不可见，用于获得自适应的值

.lottery-action,

.str-margin-outside,

.img-margin-str,

.img-size {

position: absolute;

left: 0;

top: 0;

z-index: -1;

// background-color: blue;

}

// 以下元素不可见，用于计算文本的宽度

.almost-lottery__measureText {

position: absolute;

left: 0;

top: 0;

white-space: nowrap;

font-size: 12px;

opacity: 0;

}

// 以下为可见内容的样式

.almost-lottery__wrap {

position: relative;

// display: flex;

// justify-content: center;

// align-items: center;

// background-color: #FFFFFF;

}

.almost-lottery__bg,

.almost-lottery__canvas-img,

.almost-lottery__action-bg {

position: absolute;

left: 0;

top: 0;

}

.almost-lottery__canvas-img {

transition: transform cubic-bezier(.34, .12, .05, .95);

}

</style>

almost-utils.js文件代码：

/**

* 存储 localStorage 数据

* @param {String} name - 缓存数据的标识

* @param {any} content - 缓存的数据内容

export const setStore = (name, content) => {

if (!name) return

if (typeof content !== 'string') {

content = JSON.stringify(content)

}

uni.setStorageSync(name, content)

}

/**

* 获取 localStorage 数据

* @param {String} name - 缓存数据的标识

export const getStore = (name) => {

if (!name) return

return uni.getStorageSync(name)

}

/**

* 清除 localStorage 数据

* @param {String} name - 缓存数据的标识

export const clearStore = (name) => {

if (name) {

uni.removeStorageSync(name)

} else {

console.log('清理本地全部缓存')

uni.clearStorageSync()

}

/**

* 绘制圆形

* @param {String} ctx - 图片网络地址

* @param {String} img - 图片地址

* @param {String} x - x 轴偏移量

* @param {String} y - y 轴偏移量

* @param {String} w - 宽

* @param {String} h - 高

export const circleImg = (ctx, img, x, y, w, h) => {

let r = Math.floor(w/2)

let cx = x + r

let cy = y + r

ctx.save()

ctx.beginPath()

ctx.arc(cx, cy, r, 0, Math.PI * 2)

ctx.fill()

ctx.clip()

ctx.drawImage(img, x, y, w, h)

ctx.restore()

}

/**

* 计算文本的长度

* @param {String} text - 文本内容

export const clacTextLen = (text) => {

if (!text) return { byteLen: 0, realLen: 0 }

text += ''

let clacLen = 0

for (let i = 0; i < text.length; i++) {

if ((text.charCodeAt(i) < 0) || (text.charCodeAt(i) > 255)) {

clacLen += 2

} else {

clacLen += 1

}

// console.log(`当前文本 ${text} 的长度为 ${clacLen / 2}`)

return {

byteLen: clacLen,

realLen: clacLen / 2

}

/**

* 下载文件，并返回临时路径

* @return {String} 临时路径

* @param {String} fileUrl - 网络地址

export const downloadFile = (fileUrl) => {

return new Promise((resolve) => {

uni.downloadFile({

url: fileUrl,

success: (res) => {

resolve({

ok: true,

data: res.errMsg,

tempFilePath: res.tempFilePath

})

fail: (err) => {

resolve({

ok: false,

data: err.errMsg,

msg: '图片下载失败'

})

}

})

}

/**

* 清理应用已缓存的文件

export const clearCacheFile = () => {

// #ifndef H5

uni.getSavedFileList({

success: (res) => {

let fileList = res.fileList

if (fileList.length) {

for (let i = 0; i < fileList.length; i++) {

uni.removeSavedFile({

filePath: fileList[i].filePath,

complete: () => {

console.log('清除缓存已完成')

}

})

}

fail: (err) => {

console.log('getSavedFileList Fail')

}

})

// #endif

}

// 图像转换工具，可用于图像和base64的转换

// https://ext.dcloud.net.cn/plugin?id=123

const getLocalFilePath = (path) => {

if (

path.indexOf('_www') === 0 ||

path.indexOf('_doc') === 0 ||

path.indexOf('_documents') === 0 ||

path.indexOf('_downloads') === 0

) return path

if (path.indexOf('/storage/emulated/0/') === 0) return path

if (path.indexOf('/storage/sdcard0/') === 0) return path

if (path.indexOf('/var/mobile/') === 0) return path

if (path.indexOf('file://') === 0) return path

if (path.indexOf('/') === 0) {

// ios 无法获取本地路径

let localFilePath = plus.os.name === 'iOS' ? path : plus.io.convertLocalFileSystemURL(path)

if (localFilePath !== path) {

return localFilePath

} else {

path = path.substring(1)

}

return '_www/' + path

}

export const pathToBase64 = (path) => {

return new Promise((resolve, reject) => {

if (typeof window === 'object' && 'document' in window) {

if (typeof FileReader === 'function') {

let xhr = new XMLHttpRequest()

xhr.open('GET', path, true)

xhr.responseType = 'blob'

xhr.onload = function() {

if (this.status === 200) {

let fileReader = new FileReader()

fileReader.onload = function(e) {

resolve(e.target.result)

}

fileReader.onerror = reject

fileReader.readAsDataURL(this.response)

}

xhr.onerror = reject

xhr.send()

return

}

let canvas = document.createElement('canvas')

let c2x = canvas.getContext('2d')

let img = new Image

img.onload = function() {

canvas.width = img.width

canvas.height = img.height

c2x.drawImage(img, 0, 0)

resolve(canvas.toDataURL())

canvas.height = canvas.width = 0

}

img.onerror = reject

img.src = path

return

}

if (typeof plus === 'object') {

let tempPath = getLocalFilePath(path)

plus.io.resolveLocalFileSystemURL(tempPath, (entry) => {

entry.file((file) => {

let fileReader = new plus.io.FileReader()

fileReader.onload = function(data) {

resolve(data.target.result)

}

fileReader.onerror = function(error) {

console.log(error)

reject(error)

}

fileReader.readAsDataURL(file)

}, (error) => {

reject(error)

})

}, (error) => {

reject(error)

})

return

}

if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {

wx.getFileSystemManager().readFile({

filePath: path,

encoding: 'base64',

success: (res) => {

resolve('data:image/png;base64,' + res.data)

fail: (error) => {

reject(error)

}

})

return

}

reject(new Error('not support'))

})

}

export const base64ToPath = (base64) => {

return new Promise((resolve, reject) => {

if (typeof window === 'object' && 'document' in window) {

base64 = base64.split(',')

let type = base64[0].match(/:(.*?);/)[1]

let str = atob(base64[1])

let n = str.length

let array = new Uint8Array(n)

while (n--) {

array[n] = str.charCodeAt(n)

}

return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], {

type: type

})))

}

let extName = base64.match(/data\:\S+\/(\S+);/)

if (extName) {

extName = extName[1]

} else {

reject(new Error('base64 error'))

}

let fileName = Date.now() + '.' + extName

if (typeof plus === 'object') {

let bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())

bitmap.loadBase64Data(base64, () => {

let filePath = '_doc/uniapp_temp/' + fileName

bitmap.save(filePath, {}, () => {

bitmap.clear()

resolve(filePath)

}, (error) => {

bitmap.clear()

reject(error)

})

}, (error) => {

bitmap.clear()

reject(error)

})

return

}

if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {

let filePath = wx.env.USER_DATA_PATH + '/' + fileName

wx.getFileSystemManager().writeFile({

filePath: filePath,

data: base64.replace(/^data:\S+\/\S+;base64,/, ''),

encoding: 'base64',

success: () => {

resolve(filePath)

fail: (error) => {

reject(error)

}

})

return

}

reject(new Error('not support'))

})

}

样式仅供参考，所用到的图片：

Nymph_Zhu

关注

18
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
uniapp+uView幸运大转盘

查看= -1">已领取= -1">已领取
复制链接

扫一扫