添加活动功能
parent
15d0198b94
commit
fcf7563f69
|
|
@ -44,7 +44,7 @@
|
||||||
</cu-modal>
|
</cu-modal>
|
||||||
<!-- 确认收货弹窗 -->
|
<!-- 确认收货弹窗 -->
|
||||||
<cu-modal v-model="receiptShow" title="确认收货" @confirm="receiptConfirm" confirm-color="#378264" show-cancel-button
|
<cu-modal v-model="receiptShow" title="确认收货" @confirm="receiptConfirm" confirm-color="#378264" show-cancel-button
|
||||||
content="确认收货后不能享受7天无理由退还货，是否确认收货？"></cu-modal>
|
content="是否确认收货？"></cu-modal>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,200 @@
|
||||||
|
## 1.8.27（2022-06-01）
|
||||||
|
本次更新：
|
||||||
|
- 优化示例项目
|
||||||
|
## 1.8.26（2022-06-01）
|
||||||
|
本次更新：
|
||||||
|
- 修复奖品图片裁切为圆形时在安卓机器不显示的问题
|
||||||
|
## 1.8.25（2022-05-31）
|
||||||
|
本次更新：
|
||||||
|
- 修复部分安卓下载图片得到.unknown格式文件的问题
|
||||||
|
## 1.8.24（2022-05-09）
|
||||||
|
本地缓存：
|
||||||
|
- 优化示例项目
|
||||||
|
## 1.8.23（2022-05-09）
|
||||||
|
本地缓存：
|
||||||
|
- 优化清除文件缓存的方法
|
||||||
|
## 1.8.22（2022-05-09）
|
||||||
|
本次更新：
|
||||||
|
- 调整计算转盘绘制的方式
|
||||||
|
## 1.8.21（2022-05-08）
|
||||||
|
本次更新：
|
||||||
|
- 调整示例项目中本地图片的引入方式
|
||||||
|
## 1.8.20（2022-04-29）
|
||||||
|
本次更新：
|
||||||
|
- 修复转盘在某个临界点可以出现多次触发的问题
|
||||||
|
## 1.8.19（2022-04-27）
|
||||||
|
本次更新：
|
||||||
|
- 奖品文字的绘制由先前的两行变成多行，根据设定的每行文字的长度分段绘制
|
||||||
|
## 1.8.18（2022-04-25）
|
||||||
|
本次更新：
|
||||||
|
- 减少小程序平台的 delay
|
||||||
|
## 1.8.17（2022-03-23）
|
||||||
|
本次更新：
|
||||||
|
- 新增配置项 `imgCircled` 奖品图片是否裁切为圆形，默认不裁切
|
||||||
|
## 1.8.16（2022-03-04）
|
||||||
|
本次更新：
|
||||||
|
- 示例项目新增绘制时长的计算，方便开发时定位绘制慢的问题
|
||||||
|
## 1.8.15（2022-03-02）
|
||||||
|
本次更新：
|
||||||
|
- 优化一处错误提示信息的展现方式
|
||||||
|
## 1.8.14（2021-11-29）
|
||||||
|
本次更新：
|
||||||
|
- 示例项目中新增开放自定义权重最大值，没有自定义则取权重数组中的最大值
|
||||||
|
- 更新文档
|
||||||
|
## 1.8.13（2021-11-03）
|
||||||
|
本次更新：
|
||||||
|
- 注释 `1.8.12` 版本中调试时的代码
|
||||||
|
## 1.8.12（2021-11-03）
|
||||||
|
本次更新：
|
||||||
|
- 修复一些老机型不支持 `flex` 导致布局错乱的问题
|
||||||
|
## 1.8.11（2021-10-29）
|
||||||
|
本次更新：
|
||||||
|
- 优化示例项目中模拟接口访问的速度
|
||||||
|
## 1.8.10（2021-10-19）
|
||||||
|
本次更新：
|
||||||
|
- 优化组件代码
|
||||||
|
- 更新示例项目
|
||||||
|
## 1.8.9（2021-09-28）
|
||||||
|
本次更新：
|
||||||
|
- 移除内置的 `奖品准备中...` 提示
|
||||||
|
## 1.8.8（2021-09-27）
|
||||||
|
本次更新：
|
||||||
|
- 修复 `1.8.6` 引起的非微信小程序平台绘制异常的问题
|
||||||
|
## 1.8.7（2021-09-23）
|
||||||
|
本次更新：
|
||||||
|
- 优化项目中使用到的图片大小
|
||||||
|
## 1.8.6（2021-09-23）
|
||||||
|
本次更新：
|
||||||
|
- 修复小程序平台在绘制 `base64` 格式的图片时无法在真机模式下正常显示的问题
|
||||||
|
## 1.8.5（2021-09-13）
|
||||||
|
本次更新：
|
||||||
|
- 修复一个已知问题
|
||||||
|
## 1.8.4（2021-09-12）
|
||||||
|
本次更新：
|
||||||
|
- 调整 `strFontColor` 为 `strFontColors`，现在可以设置每个区块的文字颜色，详见文档说明
|
||||||
|
## 1.8.3（2021-09-12）
|
||||||
|
本次更新：
|
||||||
|
- 修复因 `1.8.0` 改动引起的文字方向、无奖品图时绘制异常的问题
|
||||||
|
- 新增 `imgDrawed` 是否绘制奖品图片的配置项 ，默认为 `true`
|
||||||
|
## 1.8.2（2021-09-10）
|
||||||
|
本次更新：
|
||||||
|
**不兼容旧版本的更新**
|
||||||
|
- 移除配置项 `strKey` 字段
|
||||||
|
- 调整 `prizeList` 结构
|
||||||
|
## 1.8.1（2021-09-06）
|
||||||
|
本次更新：
|
||||||
|
- 修复 `hbx3.1.22` 在小程序平台处理 `id-name` 存在解析错误的问题
|
||||||
|
## 1.8.0（2021-09-06）
|
||||||
|
本次更新：
|
||||||
|
**该版本更新涉及破坏性的变更，请重新查看 `API - Props` 的部分**
|
||||||
|
- `px` 全面调整为 `rpx` 单位，多个`Props` 的参数相应调整，请查看文档
|
||||||
|
- 新增 `pixelRatio` 参数，该参数为设计稿的设备像素比基准值，默认为 `2` 倍素
|
||||||
|
## 1.7.18（2021-09-05）
|
||||||
|
本次更新：
|
||||||
|
- 修复一个已知问题
|
||||||
|
## 1.7.17（2021-08-23）
|
||||||
|
本次更新：
|
||||||
|
- 更新示例项目
|
||||||
|
## 1.7.16（2021-08-14）
|
||||||
|
本次更新：
|
||||||
|
- 更新示例项目
|
||||||
|
## 1.7.15（2021-08-03）
|
||||||
|
本次更新：
|
||||||
|
- 新增文字竖向展示的功能，详见文档说明
|
||||||
|
## 1.7.13（2021-08-02）
|
||||||
|
本次更新：
|
||||||
|
- 更新文档
|
||||||
|
## 1.7.12（2021-07-30）
|
||||||
|
本次更新：
|
||||||
|
- 修复示例项目的已知问题
|
||||||
|
- 现已提供Almost-Lottery抽奖转盘的uniCloud云端一体页面模板
|
||||||
|
- 现已提供Almost-Lottery抽奖转盘云端一体页面配套的Admin配置中心
|
||||||
|
## 1.7.11（2021-07-22）
|
||||||
|
本次更新：
|
||||||
|
- 修复部分安卓手机文字大小异常的问题
|
||||||
|
- 字段 `strHeightMultiple` 更换为 `strLineHeight`
|
||||||
|
## 1.7.10（2021-07-12）
|
||||||
|
本次更新：
|
||||||
|
- 修复奖品名称 `name` 为空字符串时无法成功绘制转盘的问题
|
||||||
|
- 新增 `prizeNameDrawed` 是否绘制奖品名称的配置项，现在可以仅展示奖品图片了
|
||||||
|
## 1.7.9（2021-07-09）
|
||||||
|
本次更新：
|
||||||
|
- 优化组件内部代码
|
||||||
|
- 修复奖品图片已然是 `base64` 格式时导致转盘绘制失败的问题
|
||||||
|
- 文档新增QQ群号，让沟通更便捷
|
||||||
|
## 1.7.8（2021-07-08）
|
||||||
|
本次更新：
|
||||||
|
- 调整 `Canvas` 默认宽高为 `280`
|
||||||
|
## 1.7.7（2021-07-08）
|
||||||
|
本次更新：
|
||||||
|
- 新增多个配置项，满足更多自定义需求
|
||||||
|
- 优化多行文本情况下非中文字符的字节处理
|
||||||
|
- 修复偶发的第一条数据文本不居中显示的问题
|
||||||
|
## 1.7.6（2021-07-02）
|
||||||
|
本次更新：
|
||||||
|
- 调整 `imageWidth` 、 `imageHeight` 字段为 `imgWidth` 、 `imgHeight`
|
||||||
|
- 更新示例项目
|
||||||
|
## 1.7.5（2021-07-01）
|
||||||
|
本次更新：
|
||||||
|
- 新增配置项 `imgMarginStr` 奖品图片距离奖品文字的距离
|
||||||
|
## 1.7.4（2021-06-28）
|
||||||
|
本次更新：
|
||||||
|
- 新增轮盘旋转或指针旋转配置项
|
||||||
|
- 转盘内置的外环图片以及按钮图片统一调整为 `image` 展示
|
||||||
|
- 更新相关文档说明
|
||||||
|
## 1.7.3（2021-06-16）
|
||||||
|
本次更新：
|
||||||
|
- 优化错误提示
|
||||||
|
- 优化示例项目
|
||||||
|
- 优化文档说明
|
||||||
|
## 1.7.2（2021-06-11）
|
||||||
|
本次更新：
|
||||||
|
- 新增 `canvasId` 参数配置项，多画板情况下需要配置不同的 `canvasId`
|
||||||
|
- 优化多画板情况下的缓存功能
|
||||||
|
- 优化示例项目
|
||||||
|
- 修改文档说明
|
||||||
|
## 1.7.1（2021-06-10）
|
||||||
|
本次更新：
|
||||||
|
- 优化示例项目中的注释
|
||||||
|
## 1.7.0（2021-06-04）
|
||||||
|
本次更新：
|
||||||
|
- 修复 `1.6.1` 引起的多行奖品文字行高异常的问题
|
||||||
|
- 新增配置转盘外环和抽奖按钮图片的功能，详见文档说明
|
||||||
|
- 更新示例项目，新增抽奖次数等业务有关的逻辑供参考
|
||||||
|
## 1.6.1（2021-05-28）
|
||||||
|
本次更新：
|
||||||
|
- 修复小程序平台画板模糊的问题
|
||||||
|
## 1.6.0（2021-05-28）
|
||||||
|
本次更新：
|
||||||
|
- 新增奖品区块是否开启描边的配置项，默认不开启
|
||||||
|
- 调整画板缓存为默认不开启
|
||||||
|
- 优化代码
|
||||||
|
- 优化文档说明
|
||||||
|
- 更新示例项目并修改部分注释
|
||||||
|
## 1.5.13（2021-05-22）
|
||||||
|
本次更新：
|
||||||
|
- 优化文档说明
|
||||||
|
- 更新示例项目
|
||||||
|
## 1.5.12（2021-05-22）
|
||||||
|
本次更新：
|
||||||
|
- 新增配置项 `strokeColor` 奖品区块边框颜色
|
||||||
|
- 更新文档说明
|
||||||
|
## 1.5.11（2021-05-19）
|
||||||
|
本次更新：
|
||||||
|
- 新增`strMarginOutside`参数，用于设置奖品文字距离边缘的距离
|
||||||
|
- 修复奖品文字在某些情况下不是居中显示的问题
|
||||||
|
## 1.5.10（2021-05-19）
|
||||||
|
本次更新：
|
||||||
|
- 修复示例项目中权重值相同时的取值逻辑
|
||||||
|
## 1.5.9（2021-05-14）
|
||||||
|
本次更新：
|
||||||
|
- 调整代码，优化小程序端的展示
|
||||||
|
## 1.5.8（2021-05-12）
|
||||||
|
本次更新：
|
||||||
|
- 文档增加预警提示：不再维护非 `uni_modules` 模式下的版本
|
||||||
|
## 1.5.7（2021-05-12）
|
||||||
|
本次更新：
|
||||||
|
- 修复小程序平台奖品名称不清晰的问题
|
||||||
|
## 1.5.6（2021-03-18）
|
||||||
|
本次更新：
|
||||||
|
- 适配 uni_modules 插件模式
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,82 @@
|
||||||
|
{
|
||||||
|
"id": "almost-lottery",
|
||||||
|
"displayName": "Almost-Lottery抽奖转盘",
|
||||||
|
"version": "1.8.27",
|
||||||
|
"description": "【荣获2021插件大赛三等奖】提供奇数、缓存等众多配置项，更有抽奖概率、抽奖次数、付费抽奖等功能内置于示例项目中，完美支持APP、各平台小程序、H5、PC，同时提供 uniCloud 云端版本",
|
||||||
|
"keywords": [
|
||||||
|
"转盘",
|
||||||
|
"抽奖",
|
||||||
|
"大转盘抽奖"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/ialmost/almost-components_uniapp",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.22"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "n"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "n"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
# almost-lottery
|
||||||
|
*使用 Canvas 绘制的抽奖转盘，提供奇数、缓存等众多配置项，更有抽奖概率、抽奖次数、付费抽奖等功能内置于示例项目中*
|
||||||
|
|
||||||
|
|
||||||
|
> <br />
|
||||||
|
>
|
||||||
|
> 如果用着还行，请支持一下
|
||||||
|
> - 前往 [GitHub](https://github.com/ialmost/almost-components_uniapp) 给个 Star
|
||||||
|
> - 前往 [UniApp](https://ext.dcloud.net.cn/plugin?id=1030) 给个五星
|
||||||
|
> - 使用中遇到问题时，可以添加 **QQ群 20441313**
|
||||||
|
>
|
||||||
|
> <br />
|
||||||
|
|
||||||
|
|
||||||
|
## 基于 uniCloud 开发的云端 Almost-Lottery 抽奖转盘，欢迎尝试体验
|
||||||
|
- [Almost-Lottery抽奖转盘的云端一体页面](https://ext.dcloud.net.cn/plugin?id=5763)
|
||||||
|
- [Almost-Lottery抽奖转盘的配置中心](https://ext.dcloud.net.cn/plugin?id=5762)
|
||||||
|
|
||||||
|
|
||||||
|
## 高能预警
|
||||||
|
- 本插件仅支持 `uni_modules` 模式，强烈推荐使用该模式，**非 `uni_modules` 模式不再维护**
|
||||||
|
- 在使用本插件之前，强烈建议使用 `HBuilderX` 导入示例项目验证可用性并参照修改
|
||||||
|
|
||||||
|
## 功能概要
|
||||||
|
- [x] 可配置奖品文字 **支持横向/竖向展示**
|
||||||
|
- [x] 可配置每个奖品区块的背景颜色
|
||||||
|
- [x] 可配置每个奖品区块的奖品文字颜色
|
||||||
|
- [x] 可配置奖品区块是否开启描边以及边框的颜色，默认不开启
|
||||||
|
- [x] 可配置转盘外环和抽奖按钮图
|
||||||
|
- [x] 可配置每个奖品区块的奖品图片，**当图片是网络地址时，小程序端需要配置白名单，H5端需要允许跨域，奖品文字为竖向时不支持展示奖品图片**
|
||||||
|
- [x] 奖品列表支持奇数，**奇数时需尽量能被 `360` 除尽**
|
||||||
|
- [x] 可配置内圈与外圈的间距
|
||||||
|
- [x] 可配置轮盘旋转或指针旋转
|
||||||
|
- [x] 可配置画板是否缓存，默认不开启
|
||||||
|
- [x] 更多配置请查看API说明
|
||||||
|
|
||||||
|
## 示例项目附加功能
|
||||||
|
- [x] 中奖概率，**强烈推荐中奖概率应由后端控制**
|
||||||
|
- [x] 抽奖次数
|
||||||
|
- [x] 付费抽奖
|
||||||
|
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
- 编译到小程序端时，请务必勾选ES6转ES5
|
||||||
|
|
||||||
|
- `@reset-index="prizeIndex = -1"` 必须默认写入到 `template` 中，不可删除
|
||||||
|
|
||||||
|
- 每个奖品区块的奖品图片尺寸不宜过大，图片越大，绘制的过程越慢，尽量将图片尺寸控制在 `100*100` 以内，且图片大小控制在 `40KB` 以内
|
||||||
|
|
||||||
|
- 关于中奖概率的配置，请下载示例项目，参照 `pages/index/index.vue` 中的代码进行配置
|
||||||
|
|
||||||
|
- 组件本身不涉及任何业务逻辑，与业务相关的代码建议都放在 `pages/index/index.vue` 中
|
||||||
|
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
#### 基础用法
|
||||||
|
```
|
||||||
|
// template
|
||||||
|
// @reset-index="prizeIndex = -1" 必须默认写入到 template 中，不可删除
|
||||||
|
<almost-lottery
|
||||||
|
:prizeList="prizeList"
|
||||||
|
:prizeIndex="prizeIndex"
|
||||||
|
@reset-index="prizeIndex = -1"
|
||||||
|
@draw-start="handleDrawStart"
|
||||||
|
@draw-end="handleDrawEnd"
|
||||||
|
@finish="handleDrawFinish"
|
||||||
|
v-if="prizeList.length"
|
||||||
|
/>
|
||||||
|
|
||||||
|
// script
|
||||||
|
import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
AlmostLottery
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
// 以下是奖品配置数据
|
||||||
|
// 奖品数据
|
||||||
|
prizeList: [],
|
||||||
|
// 中奖下标
|
||||||
|
prizeIndex: -1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 本次抽奖开始
|
||||||
|
handleDrawStart () {
|
||||||
|
// 这里需要处理你的中奖逻辑，并得出 prizeIndex
|
||||||
|
// 请查看示例项目中的代码
|
||||||
|
},
|
||||||
|
// 本次抽奖结束
|
||||||
|
handleDrawEnd () {
|
||||||
|
// 完成抽奖后，这里处理你拿到结果后的逻辑
|
||||||
|
// 请查看示例项目中的代码
|
||||||
|
},
|
||||||
|
// 抽奖转盘绘制完成
|
||||||
|
handleDrawFinish (res) {
|
||||||
|
// 抽奖转盘准备就绪后，这里处理你的逻辑
|
||||||
|
// 请查看示例项目中的代码
|
||||||
|
// console.log('抽奖转盘绘制完成', res)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
#### Props
|
||||||
|
参数 | 说明 | 类型 | 默认值
|
||||||
|
:---|:---|:---|:---
|
||||||
|
pixelRatio | 移动端设计稿的像素比基准值，**涉及到 `rpx` 的适配问题** | *`Number`* | `2`
|
||||||
|
canvasId | Canvas的标识，**多画板情况下需要配置不同的标识** | *`String`* | `'almostLottery'`
|
||||||
|
lotterySize | 抽奖转盘的整体尺寸，单位 `rpx` | *`Number`* | `600`
|
||||||
|
actionSize | 抽奖按钮的尺寸，单位 `rpx` | *`Number`* | `200`
|
||||||
|
canvasMarginOutside | Canvas边缘距离转盘边缘的距离，单位`rpx` | *`Number`* | `90`
|
||||||
|
prizeIndex | 获奖奖品在奖品列表中的序号，**每次抽奖结束后会自动重置为 `-1`** | *`Number`* | `-1`
|
||||||
|
prizeList | 奖品列表，支持奇数（尽量能被 `360` 除尽），**为奇数时需要重设 `colors` 参数** | *`Array`* | -
|
||||||
|
lotteryBg | 转盘外环图片 | `String` | `默认内置的本地图片`
|
||||||
|
actionBg | 抽奖按钮图片 | `String` | `默认内置的本地图片`
|
||||||
|
colors | 奖品区块对应的背景颜色，默认 2 个颜色相互交替，**也可以对每个区块设置不同颜色** | *`Array`* | `['#FFFFFF', '#FFBF05']`
|
||||||
|
prizeNameDrawed | 是否绘制奖品名称 | *`Boolean`* | `true`
|
||||||
|
stroked | 是否开启奖品区块描边 | *`Boolean`* | `false`
|
||||||
|
strDirection | 奖品名称展示方向，可选值 `'horizontal'` => 横向 `'vertical'` => 竖向 | *`String`* | `'horizontal'`
|
||||||
|
strokeColor | 奖品区块边框颜色 | *`String`* | `'#FFBF05'`
|
||||||
|
rotateType | 旋转的类型，可选值 `'roulette'` => 轮盘旋转 `'pointer'` => 指针旋转 | *`String`* | `'roulette'`
|
||||||
|
duration | 转盘旋转的动画时长，单位：秒 | *`Number`* | `8`
|
||||||
|
ringCount | 旋转的圈数 | *`Number`* | `8`
|
||||||
|
pointerPosition | 点击抽奖按钮指针的位置，可选值 `'edge'` => 指向边界 `'middle'` => 指向中间 | *`String`* | `'edge'`
|
||||||
|
strFontColors | 奖品文字颜色，默认 2 个颜色相互交替，**也可以对每个区块的文字设置不同颜色，或仅设置一个颜色** | *`Array`* | `['#FFBF05', '#FFFFFF']`
|
||||||
|
strFontSize | 奖品名称的字号，单位 `rpx` | *`Number`* | `24`
|
||||||
|
strLineHeight | 奖品名称多行情况下的行高 | *`Number`* | `1.2`
|
||||||
|
strMaxLen | 奖品名称长度限制，**文字竖向时不生效** | *`Number`* | `12`
|
||||||
|
strLineLen | 奖品名称在多行情况下第一行文字的长度，**文字竖向时不生效** | *`Number`* | `6`
|
||||||
|
strMarginOutside | 奖品文字相对轮盘边缘的距离，单位 `rpx` | *`Number`* | `strFontSize 的一半`
|
||||||
|
imgMarginStr | 奖品图片相对奖品文字的距离，单位 `rpx` | *`Number`* | `60`
|
||||||
|
imgWidth | 奖品图片的宽度，单位 `rpx` | *`Number`* | `50`
|
||||||
|
imgHeight | 奖品图片的高度，单位 `rpx` | *`Number`* | `50`
|
||||||
|
imgDrawed | 是否绘制奖品图片，默认绘制 | *`Boolean`* | `true`
|
||||||
|
imgCircled | 奖品图片是否裁切为圆形，默认不裁切 | *`Boolean`* | `false`
|
||||||
|
successMsg | 转盘绘制成功的提示 | *`String`* | `'奖品准备就绪，快来参与抽奖吧'`
|
||||||
|
failMsg | 转盘绘制失败的提示 | *`String`* | `'奖品仍在准备中，请稍后再来...'`
|
||||||
|
canvasCached | 是否开启缓存，避免在数据不变的情况下重复绘制，建议在生产环境中开启 | *`Boolean`* | `false`
|
||||||
|
|
||||||
|
#### Events
|
||||||
|
事件名 | 说明 | 回调参数
|
||||||
|
:---|:---|:---
|
||||||
|
@reset-index | 每次抽奖结束后重置获奖的序号为 `-1`，**该事件必须默认写入到 `template` 中，不可删除** | -
|
||||||
|
@draw-start | 转盘旋转开始时触发 | -
|
||||||
|
@draw-end | 转盘旋转结束时触发 | -
|
||||||
|
@finish | Canvas转盘绘制完成时触发 | `{ ok: 绘制是否成功, data: 转盘的图片, msg: 绘制结果的提示 }`
|
||||||
|
|
||||||
|
#### prizeList 数据结构
|
||||||
|
*请按如下数据字段对你的奖品列表数据结构进行调整*
|
||||||
|
键名 | 说明 | 类型
|
||||||
|
:---|:---|:---
|
||||||
|
prizeId | 奖品对应 `ID` | *`Number`*
|
||||||
|
prizeName | 奖品名称 | *`String`*
|
||||||
|
prizeStock | 奖品库存 | *`Number`*
|
||||||
|
prizeWeight | 奖品权重 | *`Number`*
|
||||||
|
prizeImage | 奖品图片地址，网络图片仅支持`http`和`https`协议 | *`String`*
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,316 @@
|
||||||
|
/**
|
||||||
|
* 存储 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) => {
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
let extName = fileUrl.split('.').pop()
|
||||||
|
let fileName = Date.now() + '.' + extName
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
uni.downloadFile({
|
||||||
|
url: fileUrl,
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
filePath: wx.env.USER_DATA_PATH + '/' + fileName,
|
||||||
|
// #endif
|
||||||
|
success: (res) => {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
resolve({
|
||||||
|
ok: true,
|
||||||
|
data: res.errMsg,
|
||||||
|
tempFilePath: res.filePath
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
resolve({
|
||||||
|
ok: true,
|
||||||
|
data: res.errMsg,
|
||||||
|
tempFilePath: res.tempFilePath
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
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'))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,422 @@
|
||||||
|
<template>
|
||||||
|
<view class="h-full">
|
||||||
|
<loading-view v-if="isFirstLoading"></loading-view>
|
||||||
|
<view
|
||||||
|
class="bg min-h-full overflow-hidden"
|
||||||
|
v-else
|
||||||
|
:style="{ backgroundImage: `url(${draw_activity.bg_image})`, backgroundColor: draw_activity.bg_color }"
|
||||||
|
>
|
||||||
|
<view class="">
|
||||||
|
<view class="fixed top-0 left-0 w-full bg z-10" :style="{ backgroundImage: `url(${draw_activity.bg_image})` }">
|
||||||
|
<view :style="{ height: statusBarHeight + 'px' }"></view>
|
||||||
|
<view class="px-30rpx py-20rpx flex h-50px flex items-center relative">
|
||||||
|
<image
|
||||||
|
@click="onBack"
|
||||||
|
class="h-56rpx w-56rpx"
|
||||||
|
src="https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/back.png"
|
||||||
|
alt=""
|
||||||
|
srcset=""
|
||||||
|
></image>
|
||||||
|
<view class="absolute left-100rpx right-100rpx text-center text-52rpx text-white">{{draw_activity.name}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="w-full" :style="{ height: 50 + statusBarHeight + 'px' }"> </view>
|
||||||
|
</view>
|
||||||
|
<view class="h-300rpx w-full"></view>
|
||||||
|
<view class="w-full relative">
|
||||||
|
<view class="h-100rpx"></view>
|
||||||
|
<view class="absolute top-0 z-9 left-0 px-30rpx message w-full">
|
||||||
|
<view class="h-180rpx">
|
||||||
|
<swiper
|
||||||
|
vertical="vertical"
|
||||||
|
autoplay="play"
|
||||||
|
class="h-full"
|
||||||
|
previous-margin="60rpx"
|
||||||
|
next-margin="60rpx"
|
||||||
|
disable-touch
|
||||||
|
@change="change"
|
||||||
|
circular
|
||||||
|
:current="current"
|
||||||
|
>
|
||||||
|
<swiper-item v-for="(item, index) in logsAll" :key="index" class="h-full flex items-start flex-col justify-center">
|
||||||
|
<view
|
||||||
|
class="bg-hex-000 bg-opacity-30 text-white rounded-full px-20px h-44rpx leading-44rpx text-28rpx inline-block"
|
||||||
|
:class="index == current ? 'opacity1' : index + 1 == current ? 'opacity0' : index - 1 == current ? 'opacity2' :(current==logsAll.length-1 && index==0)?'opacity2' : 'opacity3'"
|
||||||
|
>
|
||||||
|
<text
|
||||||
|
>恭喜{{ item.user.nickname }}抽中<text class="text-hex-ffde58">{{ item.prize.name }}</text></text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
<!-- <view v-for="item in logs" :key="item.id" class="opacity">
|
||||||
|
<view class="bg-hex-000 bg-opacity-30 text-white rounded-full px-20px h-44rpx leading-44rpx text-28rpx mb-10rpx inline-block">
|
||||||
|
<text
|
||||||
|
>恭喜{{ item.user.nickname }}抽中<text class="text-hex-ffde58">{{ item.prize.name }}</text></text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
<almost-lottery
|
||||||
|
pointer-position="edge"
|
||||||
|
:lottery-size="lotteryConfig.lotterySize"
|
||||||
|
:action-size="lotteryConfig.actionSize"
|
||||||
|
:ring-count="8"
|
||||||
|
:duration="8"
|
||||||
|
:prize-list="prizeList"
|
||||||
|
:prize-index="prizeIndex"
|
||||||
|
@reset-index="prizeIndex = -1"
|
||||||
|
@draw-start="handleDrawStart"
|
||||||
|
@draw-end="handleDrawEnd"
|
||||||
|
@finish="handleDrawFinish"
|
||||||
|
v-if="prizeList.length"
|
||||||
|
stroke-color="#ffffff"
|
||||||
|
:str-font-size="18"
|
||||||
|
:strFontColors="['#fb6056']"
|
||||||
|
:colors="['#ffeaa7', '#ffeaa7']"
|
||||||
|
:stroked="true"
|
||||||
|
:img-width="120"
|
||||||
|
:img-height="120"
|
||||||
|
:imgMarginStr="30"
|
||||||
|
:strMarginOutside="16"
|
||||||
|
:canvasCached="true"
|
||||||
|
:lotteryBg="lotteryBg"
|
||||||
|
:actionBg="actionBg"
|
||||||
|
/>
|
||||||
|
<view class="text-center mt-40rpx"
|
||||||
|
>今天还可以抽 <text class="text-error">{{ freeNum }}</text> 次</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<block>
|
||||||
|
<view class="p-30rpx">
|
||||||
|
<u-parse :html="draw_activity.desc"></u-parse>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<u-mask :show="show">
|
||||||
|
<view class="flex items-center justify-center h-full">
|
||||||
|
<view class="">
|
||||||
|
<view class="pr-30rpx text-right">
|
||||||
|
<image src="/static/images/app/app_update_close.png" alt="" srcset="" class="w-48rpx h-48rpx" @click="show = false"></image>
|
||||||
|
</view>
|
||||||
|
<view class="w-600rpx h-600rpx relative" v-if="prizeData.prize">
|
||||||
|
<image :src="prizeData.prize.type==0?results.goods:tips_image" class="w-full h-full"></image>
|
||||||
|
<block v-if="prizeData.prize.type!=0">
|
||||||
|
<view class="absolute top-178rpx left-0 right-0 text-center mx-auto mx-auto w-300rpx h-290rpx">
|
||||||
|
<image :src="results.goods" alt="" class="w-full h-full"></image>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="absolute top-136rpx left-0 right-0 text-center h-42rpx leading-40rpx text-24rpx text-hex-f74a2c bg-gradient-to-t to-hex-fff4e5 from-hex-ffd4b2 w-240rpx rounded-full mx-auto"
|
||||||
|
>
|
||||||
|
{{ results.name }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="!!results.btn"
|
||||||
|
@click="onResults"
|
||||||
|
class="absolute top-466rpx left-0 right-0 text-center h-54rpx leading-54rpx text-28rpx text-white bg-img w-280rpx mx-auto"
|
||||||
|
>
|
||||||
|
{{ results.btn }}
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-mask>
|
||||||
|
|
||||||
|
<u-popup v-model="showAddress" mode="center" :border-radius="20" :mask-close-able="false">
|
||||||
|
<view class="p-30rpx w-600rpx">
|
||||||
|
<u-form :model="form" ref="uForm" label-width="130rpx" :error-type="['toast']">
|
||||||
|
<u-form-item label="收件人" prop="consignee_name">
|
||||||
|
<u-input v-model="form.consignee_name" cursor-spacing="50rpx" />
|
||||||
|
</u-form-item>
|
||||||
|
<u-form-item label="联系方式" prop="consignee_phone">
|
||||||
|
<u-input v-model="form.consignee_phone" cursor-spacing="50rpx" />
|
||||||
|
</u-form-item>
|
||||||
|
<u-form-item label="收货地址" prop="consignee_address">
|
||||||
|
<u-input v-model="form.consignee_address" cursor-spacing="50rpx" />
|
||||||
|
</u-form-item>
|
||||||
|
</u-form>
|
||||||
|
<view class="bg-primary rounded-full h-64rpx leading-64rpx text-center text-white" @click="submit"> 确定 </view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let systemInfo = uni.getSystemInfoSync();
|
||||||
|
import AlmostLottery from '../components/almost-lottery/components/almost-lottery/almost-lottery.vue';
|
||||||
|
export default {
|
||||||
|
name: 'Home',
|
||||||
|
components: {
|
||||||
|
AlmostLottery,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isFirstLoading: true,
|
||||||
|
id: '',
|
||||||
|
config: {},
|
||||||
|
current: 1,
|
||||||
|
statusBarHeight: systemInfo.statusBarHeight,
|
||||||
|
form: {
|
||||||
|
consignee_name: '',
|
||||||
|
consignee_phone: '',
|
||||||
|
consignee_address: '',
|
||||||
|
},
|
||||||
|
show: false,
|
||||||
|
prizeData: {},
|
||||||
|
results: {
|
||||||
|
name: '50元消费体验价',
|
||||||
|
btn: '充值账户余额内',
|
||||||
|
goods: 'https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/hb.png',
|
||||||
|
},
|
||||||
|
// 开启调试模式
|
||||||
|
isDev: process.env.NODE_ENV === 'development',
|
||||||
|
|
||||||
|
// 以下是转盘配置相关数据
|
||||||
|
lotteryConfig: {
|
||||||
|
// 抽奖转盘的整体尺寸，单位rpx
|
||||||
|
lotterySize: 680,
|
||||||
|
// 抽奖按钮的尺寸，单位rpx
|
||||||
|
actionSize: 200,
|
||||||
|
},
|
||||||
|
|
||||||
|
// 以下是转盘 UI 配置
|
||||||
|
// 转盘外环图，如有需要，请参考替换为自己的设计稿
|
||||||
|
lotteryBg: 'https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/lottery-bg.png',
|
||||||
|
// 抽奖按钮图
|
||||||
|
actionBg: 'https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/action-bg.png',
|
||||||
|
// 奖品数据
|
||||||
|
prizeList: [],
|
||||||
|
// 奖品是否设有库存
|
||||||
|
onStock: true,
|
||||||
|
// 中奖下标
|
||||||
|
prizeIndex: -1,
|
||||||
|
// 是否正在抽奖中，避免重复触发
|
||||||
|
prizeing: false,
|
||||||
|
// 当日免费抽奖次数余额
|
||||||
|
freeNum: 0,
|
||||||
|
logsAll: [],
|
||||||
|
logsIndex: 0,
|
||||||
|
logs: [],
|
||||||
|
timer: null,
|
||||||
|
showAddress: false,
|
||||||
|
draw_log_id: null,
|
||||||
|
rules: {
|
||||||
|
consignee_name: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入收件人',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
consignee_phone: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入连续方式',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
consignee_address: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入收货地址',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isApple() {
|
||||||
|
return uni.getSystemInfoSync().platform === 'ios';
|
||||||
|
},
|
||||||
|
draw_activity() {
|
||||||
|
return this.config.draw_activity;
|
||||||
|
},
|
||||||
|
tips_image(){
|
||||||
|
return this.draw_activity?.tips_image ?? 'https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/lucky-jg.png'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async onLoad({ id }) {
|
||||||
|
this.id = id;
|
||||||
|
this.getConfig();
|
||||||
|
this.getLuckyLog();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
change(e) {
|
||||||
|
this.current = e.detail.current;
|
||||||
|
},
|
||||||
|
onBack() {
|
||||||
|
uni.navigateBack();
|
||||||
|
},
|
||||||
|
async getConfig() {
|
||||||
|
try {
|
||||||
|
const resData = await this.$api.get(`/v1/draw-activities/${this.id}`);
|
||||||
|
this.config = resData;
|
||||||
|
this.handleInitCanvas();
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
} finally {
|
||||||
|
this.isFirstLoading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onResults() {
|
||||||
|
const { prize } = this.prizeData;
|
||||||
|
if (prize.type == 1) {
|
||||||
|
this.show = false;
|
||||||
|
this.showAddress = true;
|
||||||
|
} else {
|
||||||
|
this.show = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
submit() {
|
||||||
|
this.$refs.uForm.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
await this.$api.put(`/v1/draw-activities/${this.id}/logs/${this.draw_log_id}`, this.form);
|
||||||
|
this.$refs.uForm.resetFields();
|
||||||
|
this.showAddress = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取抽奖记录
|
||||||
|
async getLuckyLog() {
|
||||||
|
const resData = await this.$api.get(`/v1/draw-activities/${this.id}/logs`, {
|
||||||
|
params: {
|
||||||
|
page: 1,
|
||||||
|
per_page: 4,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
this.logsAll = resData.data.reverse();
|
||||||
|
},
|
||||||
|
// 重新生成
|
||||||
|
handleInitCanvas() {
|
||||||
|
this.prizeList = [];
|
||||||
|
this.getPrizeList();
|
||||||
|
},
|
||||||
|
// 获取奖品列表
|
||||||
|
async getPrizeList() {
|
||||||
|
this.freeNum = this.config.draw_tickets_number;
|
||||||
|
const data = this.draw_activity.prizes.map((e) => {
|
||||||
|
return { prizeId: e.id, prizeName: e.name, prizeStock: 10, prizeWeight: 200, prizeImage: e.icon, ...e };
|
||||||
|
});
|
||||||
|
|
||||||
|
this.draw_log_id = this.config.draw_log_id;
|
||||||
|
this.prizeList = data;
|
||||||
|
if (!!this.draw_log_id && !this.showAddress) {
|
||||||
|
this.showAddress = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.uForm.setRules(this.rules);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 本次抽奖开始
|
||||||
|
handleDrawStart() {
|
||||||
|
if(this.draw_activity.status == 4){
|
||||||
|
return this.$u.toast('活动已结束');
|
||||||
|
}
|
||||||
|
if(this.draw_activity.status == 2){
|
||||||
|
return this.$u.toast('活动未开始');
|
||||||
|
}
|
||||||
|
if(this.draw_activity.status != 3){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.prizeing) return;
|
||||||
|
this.prizeing = true;
|
||||||
|
// 还有免费数次或者剩余金币足够抽一次
|
||||||
|
if (this.freeNum > 0) {
|
||||||
|
// 更新免费次数或金币余额
|
||||||
|
if (this.freeNum > 0) {
|
||||||
|
this.freeNum--;
|
||||||
|
}
|
||||||
|
this.tryLotteryDraw();
|
||||||
|
} else {
|
||||||
|
this.$u.toast('抽奖次数不足');
|
||||||
|
this.prizeing = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 尝试发起抽奖
|
||||||
|
tryLotteryDraw() {
|
||||||
|
this.remoteGetPrizeIndex();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取中奖下标
|
||||||
|
async remoteGetPrizeIndex() {
|
||||||
|
const resData = await this.$api.post(`/v1/draw-activities/${this.id}/draw`);
|
||||||
|
this.prizeData = resData;
|
||||||
|
const { prize } = resData;
|
||||||
|
let _prizeId = prize.id;
|
||||||
|
this.prizeIndex = this.prizeList.findIndex(({ prizeId }) => prizeId == _prizeId);
|
||||||
|
},
|
||||||
|
// 本次抽奖结束
|
||||||
|
handleDrawEnd() {
|
||||||
|
// 旋转结束后，开始处理拿到结果后的逻辑
|
||||||
|
let prize = this.prizeList[this.prizeIndex];
|
||||||
|
|
||||||
|
const { type, prizeImage, name, amount } = prize;
|
||||||
|
this.draw_log_id = this.prizeData.id;
|
||||||
|
this.results.name = name;
|
||||||
|
this.results.btn = '';
|
||||||
|
if (type == 1) {
|
||||||
|
// this.showAddress = true
|
||||||
|
this.results.btn = '填写地址';
|
||||||
|
}
|
||||||
|
this.results.goods = prizeImage;
|
||||||
|
this.show = true;
|
||||||
|
this.prizeing = false;
|
||||||
|
this.getLuckyLog();
|
||||||
|
},
|
||||||
|
// 抽奖转盘绘制完成
|
||||||
|
handleDrawFinish(res) {
|
||||||
|
let stoTimer = setTimeout(() => {
|
||||||
|
clearTimeout(stoTimer);
|
||||||
|
stoTimer = null;
|
||||||
|
uni.showToast({
|
||||||
|
title: res.msg,
|
||||||
|
mask: true,
|
||||||
|
icon: 'none',
|
||||||
|
});
|
||||||
|
}, 50);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
onUnload() {
|
||||||
|
uni.hideLoading();
|
||||||
|
clearTimeout(this.timer);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.bg {
|
||||||
|
// background-image: url('https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/luckywheel.png');
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-position: top;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.bg-img {
|
||||||
|
background: url('https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/btn.png') no-repeat;
|
||||||
|
background-size: 100% auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opacity0 {
|
||||||
|
@apply opacity-60;
|
||||||
|
}
|
||||||
|
.opacity1 {
|
||||||
|
@apply opacity-80;
|
||||||
|
}
|
||||||
|
.opacity2 {
|
||||||
|
@apply opacity-100;
|
||||||
|
}
|
||||||
|
.opacity3 {
|
||||||
|
@apply opacity-80;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -593,6 +593,13 @@
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "default"
|
"navigationStyle": "default"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "lucky/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "活动",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -553,7 +553,7 @@ export default {
|
||||||
return this.bannerList[key] ?? [];
|
return this.bannerList[key] ?? [];
|
||||||
},
|
},
|
||||||
jumpByOption(e) {
|
jumpByOption(e) {
|
||||||
const whiteRouter = ['/pages/user_sign/index', '/pageA/user_sign/index','/pages/points/swap'];
|
const whiteRouter = ['/pages/user_sign/index', '/pageA/user_sign/index','/pages/points/swap','/pageB/lucky/index'];
|
||||||
const tabRouter = ['/pages/sort/index', '/pages/shop_cart/index', '/pages/healthy/index', '/pages/me/me'];
|
const tabRouter = ['/pages/sort/index', '/pages/shop_cart/index', '/pages/healthy/index', '/pages/me/me'];
|
||||||
if (!!e.jump_link) {
|
if (!!e.jump_link) {
|
||||||
if (e.jump_type == 1) {
|
if (e.jump_type == 1) {
|
||||||
|
|
|
||||||
|
|
@ -206,7 +206,7 @@
|
||||||
@confirm="receiptConfirm"
|
@confirm="receiptConfirm"
|
||||||
confirm-color="#378264"
|
confirm-color="#378264"
|
||||||
show-cancel-button
|
show-cancel-button
|
||||||
content="确认收货后不能享受7天无理由退还货，是否确认收货？"
|
content="是否确认收货？"
|
||||||
></cu-modal>
|
></cu-modal>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -641,8 +641,33 @@ export default {
|
||||||
//sku改变
|
//sku改变
|
||||||
onChangeSku(e) {
|
onChangeSku(e) {
|
||||||
this.skuId = e.sku_id;
|
this.skuId = e.sku_id;
|
||||||
this.getProducts();
|
this.getProdutsku();
|
||||||
},
|
},
|
||||||
|
//、
|
||||||
|
async getProdutsku() {
|
||||||
|
try {
|
||||||
|
this.loading = true;
|
||||||
|
const resData = await this.$api.get(`/v1/product/sku/${this.skuId}`);
|
||||||
|
this.products = resData;
|
||||||
|
|
||||||
|
if (resData?.sku?.is_bargaing) {
|
||||||
|
this.bargainOrderLog();
|
||||||
|
}
|
||||||
|
//动态修改导航栏
|
||||||
|
this.getTitle(resData.sku.name);
|
||||||
|
//保存图片到本地
|
||||||
|
this.getLocal(resData.sku.cover);
|
||||||
|
} catch (error) {
|
||||||
|
if (error != 404) {
|
||||||
|
this.isNull = true;
|
||||||
|
}
|
||||||
|
// console.log(error);
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
this.isFirstLoading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//、
|
||||||
//收藏
|
//收藏
|
||||||
onCollection() {
|
onCollection() {
|
||||||
this.$u.throttle(async () => {
|
this.$u.throttle(async () => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue