更新打包配置
This commit is contained in:
@@ -1,245 +1,245 @@
|
||||
<template>
|
||||
<up-popup
|
||||
:show="show"
|
||||
:round="24"
|
||||
:closeOnClickOverlay="false"
|
||||
>
|
||||
<view class="share-popup-view">
|
||||
<view class="share-head">
|
||||
<text class="text-28 text-zu1">分享信任桥</text>
|
||||
</view>
|
||||
<view class="share-btn-view">
|
||||
<view class="share-box" @click="onBtn(index)" v-for="(item,index) in btnList" :key="index">
|
||||
<image :src="`https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/share_${index}.png`" class="share-img"></image>
|
||||
<text class="text-24 text-zu1">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="share-line" style="margin-top:40rpx;"></view>
|
||||
<view class="qr-view" v-if="qrvalue">
|
||||
<tki-qrcode ref="qrcode" :val="qrvalue" :size="252" />
|
||||
</view>
|
||||
<view class="share-line" style="min-height:16rpx;height:16rpx">
|
||||
</view>
|
||||
<view class="share-bottom" @click="onClose">
|
||||
<text class="text-32 text-fu1">取消</text>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="share-top-image-view">
|
||||
<image :src="tu" class="tu-img"></image>
|
||||
<view class="image-view-bottom">
|
||||
<view class="image-view-bottom-left">
|
||||
<text class="text-24 text-zu1 text-overflow1">{{text}}</text>
|
||||
</view>
|
||||
<view class="image-view-bottom-right">
|
||||
<text class="text-24 text-zi">￥{{price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Func from '/utils/func'
|
||||
import tkiQrcode from './tki-qrcode/tki-qrcode.vue'
|
||||
import {SHARE_URL} from '@/utils/config.js'
|
||||
export default {
|
||||
components:{tkiQrcode},
|
||||
data() {
|
||||
return {
|
||||
btnList:['微信','朋友圈','复制链接','保存图片','QQ'],
|
||||
qrvalue:''
|
||||
}
|
||||
},
|
||||
props:{
|
||||
show:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
id:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
tu:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
price:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
text:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
|
||||
},
|
||||
mounted(){
|
||||
this.qrvalue = `${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=${this.id}`
|
||||
this.$nextTick(()=>{
|
||||
if(this.qrvalue){
|
||||
this.creatQrcode();
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
creatQrcode() {
|
||||
this.$refs.qrcode._makeCode();
|
||||
},
|
||||
onBtn(index){
|
||||
if(index == 2){
|
||||
let tmp = `【信任桥】消费共享数字化权益 ${this.qrvalue} ${this.text}`;
|
||||
// #ifdef APP-PLUS
|
||||
uni.setClipboardData({
|
||||
data:tmp,
|
||||
success:function(res){
|
||||
uni.getClipboardData({
|
||||
success:function(res){
|
||||
Func.myToast('复制成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.$copyText(tmp).then(res=>{
|
||||
console.log('resresresres',res)
|
||||
Func.myToast('复制成功')
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
this.$emit('share',index)
|
||||
|
||||
},
|
||||
onClose(){
|
||||
this.$emit('close');
|
||||
},
|
||||
onOk(){
|
||||
Func.debounce(this.dOk())
|
||||
},
|
||||
dOk(){
|
||||
this.$emit('ok');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.share-top-image-view{
|
||||
width:400rpx;
|
||||
min-height:496rpx;
|
||||
height:496rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top:-638rpx;
|
||||
.image-view-bottom{
|
||||
width:100%;
|
||||
flex:1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top:20rpx;
|
||||
.image-view-bottom-left{
|
||||
height:72rpx;
|
||||
min-height:72rpx;
|
||||
border-right: 2rpx solid #EBEBEB;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 10rpx;
|
||||
|
||||
}
|
||||
.image-view-bottom-right{
|
||||
// min-width:130rpx;
|
||||
margin-left:10rpx;
|
||||
height:72rpx;
|
||||
min-height:72rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.tu-img{
|
||||
width:100%;
|
||||
height:344rpx;
|
||||
}
|
||||
}
|
||||
.share-popup-view{
|
||||
width:100%;
|
||||
height:796rpx;
|
||||
min-height:796rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
position: relative;
|
||||
.share-head{
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.share-bottom{
|
||||
width:100%;
|
||||
height:92rpx;
|
||||
min-height:92rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.share-line{
|
||||
display: flex;
|
||||
width:100%;
|
||||
height:2rpx;
|
||||
min-height:2rpx;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.qr-view{
|
||||
width:100%;
|
||||
height:332rpx;
|
||||
min-height:332rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.share-btn-view{
|
||||
width:100%;
|
||||
height:124rpx;
|
||||
min-height:124rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// padding: 0 36rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top:36rpx;
|
||||
.share-box{
|
||||
flex:1;
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.share-img{
|
||||
width:80rpx;
|
||||
height:80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<up-popup
|
||||
:show="show"
|
||||
:round="24"
|
||||
:closeOnClickOverlay="false"
|
||||
>
|
||||
<view class="share-popup-view">
|
||||
<view class="share-head">
|
||||
<text class="text-28 text-zu1">分享信任桥</text>
|
||||
</view>
|
||||
<view class="share-btn-view">
|
||||
<view class="share-box" @click="onBtn(index)" v-for="(item,index) in btnList" :key="index">
|
||||
<image :src="`https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/share_${index}.png`" class="share-img"></image>
|
||||
<text class="text-24 text-zu1">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="share-line" style="margin-top:40rpx;"></view>
|
||||
<view class="qr-view" v-if="qrvalue">
|
||||
<tki-qrcode ref="qrcode" :val="qrvalue" :size="252" />
|
||||
</view>
|
||||
<view class="share-line" style="min-height:16rpx;height:16rpx">
|
||||
</view>
|
||||
<view class="share-bottom" @click="onClose">
|
||||
<text class="text-32 text-fu1">取消</text>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="share-top-image-view">
|
||||
<image :src="tu" class="tu-img"></image>
|
||||
<view class="image-view-bottom">
|
||||
<view class="image-view-bottom-left">
|
||||
<text class="text-24 text-zu1 text-overflow1">{{text}}</text>
|
||||
</view>
|
||||
<view class="image-view-bottom-right">
|
||||
<text class="text-24 text-zi">￥{{price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Func from '/utils/func'
|
||||
import tkiQrcode from './tki-qrcode/tki-qrcode.vue'
|
||||
import {SHARE_URL} from '@/utils/config.js'
|
||||
export default {
|
||||
components:{tkiQrcode},
|
||||
data() {
|
||||
return {
|
||||
btnList:['微信','朋友圈','复制链接','保存图片','QQ'],
|
||||
qrvalue:''
|
||||
}
|
||||
},
|
||||
props:{
|
||||
show:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
id:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
tu:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
price:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
text:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
|
||||
},
|
||||
mounted(){
|
||||
this.qrvalue = `${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=${this.id}`
|
||||
this.$nextTick(()=>{
|
||||
if(this.qrvalue){
|
||||
this.creatQrcode();
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
creatQrcode() {
|
||||
this.$refs.qrcode._makeCode();
|
||||
},
|
||||
onBtn(index){
|
||||
if(index == 2){
|
||||
let tmp = `【信任桥】消费共享数字化权益 ${this.qrvalue} ${this.text}`;
|
||||
// #ifdef APP-PLUS
|
||||
uni.setClipboardData({
|
||||
data:tmp,
|
||||
success:function(res){
|
||||
uni.getClipboardData({
|
||||
success:function(res){
|
||||
Func.myToast('复制成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.$copyText(tmp).then(res=>{
|
||||
console.log('resresresres',res)
|
||||
Func.myToast('复制成功')
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
this.$emit('share',index)
|
||||
|
||||
},
|
||||
onClose(){
|
||||
this.$emit('close');
|
||||
},
|
||||
onOk(){
|
||||
Func.debounce(this.dOk())
|
||||
},
|
||||
dOk(){
|
||||
this.$emit('ok');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.share-top-image-view{
|
||||
width:400rpx;
|
||||
min-height:496rpx;
|
||||
height:496rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top:-638rpx;
|
||||
.image-view-bottom{
|
||||
width:100%;
|
||||
flex:1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top:20rpx;
|
||||
.image-view-bottom-left{
|
||||
height:72rpx;
|
||||
min-height:72rpx;
|
||||
border-right: 2rpx solid #EBEBEB;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 10rpx;
|
||||
|
||||
}
|
||||
.image-view-bottom-right{
|
||||
// min-width:130rpx;
|
||||
margin-left:10rpx;
|
||||
height:72rpx;
|
||||
min-height:72rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.tu-img{
|
||||
width:100%;
|
||||
height:344rpx;
|
||||
}
|
||||
}
|
||||
.share-popup-view{
|
||||
width:100%;
|
||||
height:796rpx;
|
||||
min-height:796rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
position: relative;
|
||||
.share-head{
|
||||
width:100%;
|
||||
height:88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.share-bottom{
|
||||
width:100%;
|
||||
height:92rpx;
|
||||
min-height:92rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.share-line{
|
||||
display: flex;
|
||||
width:100%;
|
||||
height:2rpx;
|
||||
min-height:2rpx;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.qr-view{
|
||||
width:100%;
|
||||
height:332rpx;
|
||||
min-height:332rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.share-btn-view{
|
||||
width:100%;
|
||||
height:124rpx;
|
||||
min-height:124rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// padding: 0 36rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top:36rpx;
|
||||
.share-box{
|
||||
flex:1;
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.share-img{
|
||||
width:80rpx;
|
||||
height:80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,211 +1,211 @@
|
||||
<template xlang="wxml" minapp="mpvue">
|
||||
<view class="tki-qrcode">
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" />
|
||||
<!-- #endif -->
|
||||
<image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QRCode from "./qrcode.js"
|
||||
let qrcode
|
||||
export default {
|
||||
name: "tki-qrcode",
|
||||
props: {
|
||||
cid: {
|
||||
type: String,
|
||||
default: 'tki-qrcode-canvas'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'upx'
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
val: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
foreground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
pdground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
lv: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
onval: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadMake: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
usingComponents: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '二维码生成中'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_makeCode() {
|
||||
let that = this
|
||||
if (!this._empty(this.val)) {
|
||||
qrcode = new QRCode({
|
||||
context: that, // 上下文环境
|
||||
canvasId:that.cid, // canvas-id
|
||||
usingComponents: that.usingComponents, // 是否是自定义组件
|
||||
showLoading: that.showLoading, // 是否显示loading
|
||||
loadingText: that.loadingText, // loading文字
|
||||
text: that.val, // 生成内容
|
||||
size: that.cpSize, // 二维码大小
|
||||
background: that.background, // 背景色
|
||||
foreground: that.foreground, // 前景色
|
||||
pdground: that.pdground, // 定位角点颜色
|
||||
correctLevel: that.lv, // 容错级别
|
||||
image: that.icon, // 二维码图标
|
||||
imageSize: that.iconSize,// 二维码图标大小
|
||||
cbResult: function (res) { // 生成二维码的回调
|
||||
that._result(res)
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '二维码内容不能为空',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
_clearCode() {
|
||||
this._result('')
|
||||
qrcode.clear()
|
||||
},
|
||||
_saveCode() {
|
||||
let that = this;
|
||||
if (this.result != "") {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.result,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '二维码保存成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
_result(res) {
|
||||
this.result = res;
|
||||
this.$emit('result', res)
|
||||
},
|
||||
_empty(v) {
|
||||
let tp = typeof v,
|
||||
rt = false;
|
||||
if (tp == "number" && String(v) == "") {
|
||||
rt = true
|
||||
} else if (tp == "undefined") {
|
||||
rt = true
|
||||
} else if (tp == "object") {
|
||||
if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
|
||||
} else if (tp == "string") {
|
||||
if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
|
||||
} else if (tp == "function") {
|
||||
rt = false
|
||||
}
|
||||
return rt
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
size: function (n, o) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
this.cSize = n
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
},
|
||||
val: function (n, o) {
|
||||
if (this.onval) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cpSize() {
|
||||
if(this.unit == "upx"){
|
||||
return uni.upx2px(this.size)
|
||||
}else{
|
||||
return this.size
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
if (this.loadMake) {
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.tki-qrcode {
|
||||
position: relative;
|
||||
}
|
||||
.tki-qrcode-canvas {
|
||||
position: fixed;
|
||||
top: -99999upx;
|
||||
left: -99999upx;
|
||||
z-index: -99999;
|
||||
}
|
||||
</style>
|
||||
<template xlang="wxml" minapp="mpvue">
|
||||
<view class="tki-qrcode">
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" />
|
||||
<!-- #endif -->
|
||||
<image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QRCode from "./qrcode.js"
|
||||
let qrcode
|
||||
export default {
|
||||
name: "tki-qrcode",
|
||||
props: {
|
||||
cid: {
|
||||
type: String,
|
||||
default: 'tki-qrcode-canvas'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'upx'
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
val: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
foreground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
pdground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
lv: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
onval: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadMake: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
usingComponents: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '二维码生成中'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_makeCode() {
|
||||
let that = this
|
||||
if (!this._empty(this.val)) {
|
||||
qrcode = new QRCode({
|
||||
context: that, // 上下文环境
|
||||
canvasId:that.cid, // canvas-id
|
||||
usingComponents: that.usingComponents, // 是否是自定义组件
|
||||
showLoading: that.showLoading, // 是否显示loading
|
||||
loadingText: that.loadingText, // loading文字
|
||||
text: that.val, // 生成内容
|
||||
size: that.cpSize, // 二维码大小
|
||||
background: that.background, // 背景色
|
||||
foreground: that.foreground, // 前景色
|
||||
pdground: that.pdground, // 定位角点颜色
|
||||
correctLevel: that.lv, // 容错级别
|
||||
image: that.icon, // 二维码图标
|
||||
imageSize: that.iconSize,// 二维码图标大小
|
||||
cbResult: function (res) { // 生成二维码的回调
|
||||
that._result(res)
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '二维码内容不能为空',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
_clearCode() {
|
||||
this._result('')
|
||||
qrcode.clear()
|
||||
},
|
||||
_saveCode() {
|
||||
let that = this;
|
||||
if (this.result != "") {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.result,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '二维码保存成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
_result(res) {
|
||||
this.result = res;
|
||||
this.$emit('result', res)
|
||||
},
|
||||
_empty(v) {
|
||||
let tp = typeof v,
|
||||
rt = false;
|
||||
if (tp == "number" && String(v) == "") {
|
||||
rt = true
|
||||
} else if (tp == "undefined") {
|
||||
rt = true
|
||||
} else if (tp == "object") {
|
||||
if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
|
||||
} else if (tp == "string") {
|
||||
if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
|
||||
} else if (tp == "function") {
|
||||
rt = false
|
||||
}
|
||||
return rt
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
size: function (n, o) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
this.cSize = n
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
},
|
||||
val: function (n, o) {
|
||||
if (this.onval) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cpSize() {
|
||||
if(this.unit == "upx"){
|
||||
return uni.upx2px(this.size)
|
||||
}else{
|
||||
return this.size
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
if (this.loadMake) {
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.tki-qrcode {
|
||||
position: relative;
|
||||
}
|
||||
.tki-qrcode-canvas {
|
||||
position: fixed;
|
||||
top: -99999upx;
|
||||
left: -99999upx;
|
||||
z-index: -99999;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,234 +1,234 @@
|
||||
<template>
|
||||
<view class="lottery-page">
|
||||
<view class="back" style="width:100rpx;height:100rpx;" @click="jumpMine">
|
||||
<up-image src="/static/common/left_b.png" width="22" height="22" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
<!-- 中奖记录 -->
|
||||
<view class="history" @click="jumpWinningRecord">中奖记录
|
||||
</view>
|
||||
|
||||
<view class="remain-count"> 剩余抽奖次数: {{ prizesObj.times }} </view>
|
||||
|
||||
|
||||
<!-- 九宫格抽奖组件 -->
|
||||
<LotteryGrid :prizesObj="prizesObj" :remainCount="prizesObj.times" :is-disabled="isRotating"
|
||||
@start="handleStartLottery" @complete="handleLotteryComplete" />
|
||||
<view class="notice-view">
|
||||
<view class="notice-li">
|
||||
<u-notice-bar :text="noticeList" color="#fff" icon="" justifyContent="center"
|
||||
direction="column" bgColor="rgba(0,0,0,0)"></u-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 规则 -->
|
||||
<view class="rule">
|
||||
<view class="rule-title"> 活动规则</view>
|
||||
<view class="rule_content" v-html="prizesObj.ruleDescr"></view>
|
||||
</view>
|
||||
|
||||
<!-- 中奖结果弹窗 -->
|
||||
<ResultModal :visible="showResult" :prize="currentPrize" @close="showResult = false" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LotteryGrid from './components/LotteryGrid.vue'
|
||||
import ResultModal from './components/ResultModal.vue'
|
||||
import { getActivityList, raffleExecute,getCommonRaffle } from '@/api/raffle.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LotteryGrid,
|
||||
ResultModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 奖品配置数据
|
||||
noticeList:[],
|
||||
prizesObj: {
|
||||
prizes: [],
|
||||
},
|
||||
|
||||
// 状态管理
|
||||
isRotating: false, // 是否正在抽奖
|
||||
showResult: false, // 是否显示结果弹窗
|
||||
currentPrize: [],// 当前中奖奖品
|
||||
|
||||
backPath: null,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const backPath = option.backPath;
|
||||
console.log("option backPath", backPath);
|
||||
if (backPath && backPath !== 'null') {
|
||||
this.backPath = backPath;
|
||||
|
||||
}
|
||||
this.getCommon();
|
||||
},
|
||||
mounted() {
|
||||
this.getActivityList();
|
||||
},
|
||||
methods: {
|
||||
getCommon(){
|
||||
getCommonRaffle().then(res=>{
|
||||
let tmpArr = res.data && res.data.length ? res.data : [];
|
||||
this.noticeList = [];
|
||||
tmpArr.forEach(item=>{
|
||||
if(item.type == 'quicken'){
|
||||
item.text = `恭喜 ${item.user} 获得${item.parValue}个${item.prizeName}`;
|
||||
}else if(item.type == 'balance'){
|
||||
item.text = `恭喜 ${item.user} 获得${item.parValue}元${item.prizeName}`;
|
||||
}else if(item.type == 'redpacket'){
|
||||
item.text = `恭喜 ${item.user} 获得${item.parValue}${item.prizeName}`;
|
||||
}
|
||||
this.noticeList.push(item.text);
|
||||
})
|
||||
|
||||
console.log('getCommonRaffle',res)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 查询活动详情
|
||||
*/
|
||||
async getActivityList() {
|
||||
const { bizcode, data } = await getActivityList();
|
||||
if (bizcode === 100) {
|
||||
this.prizesObj = data || { prizes: [] };
|
||||
console.log('查询活动详情-1', this.prizesObj)
|
||||
this.prizesObj.prizes.splice(4, 0, { iconUrl: 'https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/activity-button.png', })
|
||||
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 处理开始抽奖事件
|
||||
*/
|
||||
async handleStartLottery(num, currentPrize) {
|
||||
|
||||
|
||||
this.currentPrize = currentPrize;
|
||||
|
||||
|
||||
// 减少抽奖次数并标记为正在抽奖
|
||||
|
||||
this.isRotating = true
|
||||
|
||||
const total = this.prizesObj.times;
|
||||
this.prizesObj.times = total - num;// 减去次数
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理抽奖完成事件
|
||||
* @param {Object} prize - 中奖奖品
|
||||
*/
|
||||
handleLotteryComplete() {
|
||||
this.isRotating = false
|
||||
this.showResult = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到中奖记录
|
||||
*/
|
||||
jumpWinningRecord() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine_package/mine_winning_record/mine_winning_record',
|
||||
})
|
||||
},
|
||||
|
||||
jumpMine() {
|
||||
const backPath = this.backPath;
|
||||
console.log("backPath", backPath);
|
||||
if (backPath) {
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home',
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: '/pages/mine/mine',
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.notice-view{
|
||||
width:100%;
|
||||
min-height:64rpx;
|
||||
display: flex;
|
||||
padding: 0 40rpx;
|
||||
margin-top:30rpx;
|
||||
box-sizing: border-box;
|
||||
.notice-li{
|
||||
width:100%;
|
||||
height:100%;
|
||||
display: flex;
|
||||
border-radius: 32rpx;
|
||||
background: linear-gradient( 180deg, #FF8876 0%, #FF3D36 17%, #FF4646 85%, #FF8978 100%);
|
||||
}
|
||||
}
|
||||
.lottery-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 1927rpx;
|
||||
background: url('https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/activity-bg.png') no-repeat center center;
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.remain-count {
|
||||
font-size: 30rpx;
|
||||
color: #FFFAE3;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 430rpx;
|
||||
width: 340rpx;
|
||||
height: 44rpx;
|
||||
text-align: center;
|
||||
line-height: 44rpx;
|
||||
background: linear-gradient(180deg, #F33838 0%, #FF4F28 100%);
|
||||
|
||||
}
|
||||
|
||||
.rule {
|
||||
width: 670rpx;
|
||||
background: linear-gradient(180deg, #FF8876 0%, #FF3D36 17%, #FF4646 85%, #FF8978 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 50rpx 24rpx;
|
||||
margin: 30rpx auto 0;
|
||||
font-size: 34rpx;
|
||||
color: #FFFAE3;
|
||||
line-height: 54rpx;
|
||||
|
||||
.rule-title {
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.history {
|
||||
width: 130rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
background: #000000;
|
||||
border-top-left-radius: 100rpx;
|
||||
border-bottom-left-radius: 100rpx;
|
||||
opacity: 0.4;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 80rpx;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
left: 40rpx;
|
||||
top: 40rpx;
|
||||
}
|
||||
<template>
|
||||
<view class="lottery-page">
|
||||
<view class="back" style="width:100rpx;height:100rpx;" @click="jumpMine">
|
||||
<up-image src="/static/common/left_b.png" width="22" height="22" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
<!-- 中奖记录 -->
|
||||
<view class="history" @click="jumpWinningRecord">中奖记录
|
||||
</view>
|
||||
|
||||
<view class="remain-count"> 剩余抽奖次数: {{ prizesObj.times }} </view>
|
||||
|
||||
|
||||
<!-- 九宫格抽奖组件 -->
|
||||
<LotteryGrid :prizesObj="prizesObj" :remainCount="prizesObj.times" :is-disabled="isRotating"
|
||||
@start="handleStartLottery" @complete="handleLotteryComplete" />
|
||||
<view class="notice-view">
|
||||
<view class="notice-li">
|
||||
<u-notice-bar :text="noticeList" color="#fff" icon="" justifyContent="center"
|
||||
direction="column" bgColor="rgba(0,0,0,0)"></u-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 规则 -->
|
||||
<view class="rule">
|
||||
<view class="rule-title"> 活动规则</view>
|
||||
<view class="rule_content" v-html="prizesObj.ruleDescr"></view>
|
||||
</view>
|
||||
|
||||
<!-- 中奖结果弹窗 -->
|
||||
<ResultModal :visible="showResult" :prize="currentPrize" @close="showResult = false" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LotteryGrid from './components/LotteryGrid.vue'
|
||||
import ResultModal from './components/ResultModal.vue'
|
||||
import { getActivityList, raffleExecute,getCommonRaffle } from '@/api/raffle.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LotteryGrid,
|
||||
ResultModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 奖品配置数据
|
||||
noticeList:[],
|
||||
prizesObj: {
|
||||
prizes: [],
|
||||
},
|
||||
|
||||
// 状态管理
|
||||
isRotating: false, // 是否正在抽奖
|
||||
showResult: false, // 是否显示结果弹窗
|
||||
currentPrize: [],// 当前中奖奖品
|
||||
|
||||
backPath: null,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const backPath = option.backPath;
|
||||
console.log("option backPath", backPath);
|
||||
if (backPath && backPath !== 'null') {
|
||||
this.backPath = backPath;
|
||||
|
||||
}
|
||||
this.getCommon();
|
||||
},
|
||||
mounted() {
|
||||
this.getActivityList();
|
||||
},
|
||||
methods: {
|
||||
getCommon(){
|
||||
getCommonRaffle().then(res=>{
|
||||
let tmpArr = res.data && res.data.length ? res.data : [];
|
||||
this.noticeList = [];
|
||||
tmpArr.forEach(item=>{
|
||||
if(item.type == 'quicken'){
|
||||
item.text = `恭喜 ${item.user} 获得${item.parValue}个${item.prizeName}`;
|
||||
}else if(item.type == 'balance'){
|
||||
item.text = `恭喜 ${item.user} 获得${item.parValue}元${item.prizeName}`;
|
||||
}else if(item.type == 'redpacket'){
|
||||
item.text = `恭喜 ${item.user} 获得${item.parValue}${item.prizeName}`;
|
||||
}
|
||||
this.noticeList.push(item.text);
|
||||
})
|
||||
|
||||
console.log('getCommonRaffle',res)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 查询活动详情
|
||||
*/
|
||||
async getActivityList() {
|
||||
const { bizcode, data } = await getActivityList();
|
||||
if (bizcode === 100) {
|
||||
this.prizesObj = data || { prizes: [] };
|
||||
console.log('查询活动详情-1', this.prizesObj)
|
||||
this.prizesObj.prizes.splice(4, 0, { iconUrl: 'https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/activity-button.png', })
|
||||
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 处理开始抽奖事件
|
||||
*/
|
||||
async handleStartLottery(num, currentPrize) {
|
||||
|
||||
|
||||
this.currentPrize = currentPrize;
|
||||
|
||||
|
||||
// 减少抽奖次数并标记为正在抽奖
|
||||
|
||||
this.isRotating = true
|
||||
|
||||
const total = this.prizesObj.times;
|
||||
this.prizesObj.times = total - num;// 减去次数
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理抽奖完成事件
|
||||
* @param {Object} prize - 中奖奖品
|
||||
*/
|
||||
handleLotteryComplete() {
|
||||
this.isRotating = false
|
||||
this.showResult = true
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到中奖记录
|
||||
*/
|
||||
jumpWinningRecord() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine_package/mine_winning_record/mine_winning_record',
|
||||
})
|
||||
},
|
||||
|
||||
jumpMine() {
|
||||
const backPath = this.backPath;
|
||||
console.log("backPath", backPath);
|
||||
if (backPath) {
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home',
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: '/pages/mine/mine',
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.notice-view{
|
||||
width:100%;
|
||||
min-height:64rpx;
|
||||
display: flex;
|
||||
padding: 0 40rpx;
|
||||
margin-top:30rpx;
|
||||
box-sizing: border-box;
|
||||
.notice-li{
|
||||
width:100%;
|
||||
height:100%;
|
||||
display: flex;
|
||||
border-radius: 32rpx;
|
||||
background: linear-gradient( 180deg, #FF8876 0%, #FF3D36 17%, #FF4646 85%, #FF8978 100%);
|
||||
}
|
||||
}
|
||||
.lottery-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 1927rpx;
|
||||
background: url('https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/activity-bg.png') no-repeat center center;
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.remain-count {
|
||||
font-size: 30rpx;
|
||||
color: #FFFAE3;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 430rpx;
|
||||
width: 340rpx;
|
||||
height: 44rpx;
|
||||
text-align: center;
|
||||
line-height: 44rpx;
|
||||
background: linear-gradient(180deg, #F33838 0%, #FF4F28 100%);
|
||||
|
||||
}
|
||||
|
||||
.rule {
|
||||
width: 670rpx;
|
||||
background: linear-gradient(180deg, #FF8876 0%, #FF3D36 17%, #FF4646 85%, #FF8978 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 50rpx 24rpx;
|
||||
margin: 30rpx auto 0;
|
||||
font-size: 34rpx;
|
||||
color: #FFFAE3;
|
||||
line-height: 54rpx;
|
||||
|
||||
.rule-title {
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.history {
|
||||
width: 130rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
background: #000000;
|
||||
border-top-left-radius: 100rpx;
|
||||
border-bottom-left-radius: 100rpx;
|
||||
opacity: 0.4;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 80rpx;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
left: 40rpx;
|
||||
top: 40rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user