pull/12/head
xiaozhiyong
2 years ago
parent
49fc0e5531
commit
5a73a4e9a6
9 changed files with 699 additions and 399 deletions
@ -1,240 +1,248 @@ |
||||
<template xlang="wxml" minapp="mpvue"> |
||||
<view class="tki-qrcode"> |
||||
<image src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/qr-bg.png" mode="" class="bgs"></image> |
||||
<!-- #ifndef MP-ALIPAY --> |
||||
<image v-if="isHaveBg" class="bgs" src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/qr-bg.png" /> |
||||
<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" class="erweima" :style="{width:cpSize+'px',height:cpSize+'px'}" /> |
||||
<!-- <canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" /> --> |
||||
<!-- <image v-show="show" :src="result" class="erweima" :style="{width:cpSize+'px',height:cpSize+'px'}" /> --> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import QRCode from "./qrcode.js" |
||||
// import indexBackgroundImage from "@/static/img/qr-bg.png" |
||||
import QRCode from "./qrcode.js" |
||||
// import indexBackgroundImage from "@/static/img/qr-bg.png" |
||||
|
||||
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: '二维码生成中' |
||||
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: '#fff' |
||||
}, |
||||
foreground: { |
||||
type: String, |
||||
default: '#000' |
||||
}, |
||||
pdground: { |
||||
type: String, |
||||
default: '#000' |
||||
}, |
||||
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: '二维码生成中' |
||||
}, |
||||
isHaveBg: { |
||||
type: Boolean, |
||||
default: true |
||||
} |
||||
}, |
||||
}, |
||||
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 |
||||
}); |
||||
data() { |
||||
return { |
||||
result: '', |
||||
} |
||||
}, |
||||
_clearCode() { |
||||
this._result('') |
||||
qrcode.clear() |
||||
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 |
||||
} |
||||
}, |
||||
_saveCode() { |
||||
let that = this; |
||||
if (this.result != "") { |
||||
uni.saveImageToPhotosAlbum({ |
||||
filePath: that.result, |
||||
success: function () { |
||||
uni.showToast({ |
||||
title: '二维码保存成功', |
||||
icon: 'success', |
||||
duration: 2000 |
||||
}); |
||||
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); |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
_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); |
||||
computed: { |
||||
cpSize() { |
||||
if (this.unit == "upx") { |
||||
return uni.upx2px(this.size) |
||||
} else { |
||||
return this.size |
||||
} |
||||
} |
||||
}, |
||||
val: function (n, o) { |
||||
if (this.onval) { |
||||
if (n != o && !this._empty(n)) { |
||||
mounted: function() { |
||||
if (this.loadMake) { |
||||
if (!this._empty(this.val)) { |
||||
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{ |
||||
.tki-qrcode { |
||||
position: relative; |
||||
} |
||||
.erweima{ |
||||
padding: 2%; |
||||
background: #ffff; |
||||
border:1px solid #f1f1f1; |
||||
|
||||
.erweima { |
||||
padding: 2%; |
||||
background: #ffff; |
||||
border: 1px solid #f1f1f1; |
||||
} |
||||
.bgs{ |
||||
|
||||
.bgs { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
right: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
max-width: 100%; |
||||
z-index: 0; |
||||
max-width: 100%; |
||||
z-index: 0; |
||||
background-color: #ffffff; |
||||
padding: 2%; |
||||
} |
||||
.tki-qrcode { |
||||
position: relative; |
||||
padding:8%; |
||||
background-image:url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/qr-bg.png') ; |
||||
background-repeat: no-repeat; |
||||
} |
||||
.tki-qrcode-canvas { |
||||
} |
||||
|
||||
.tki-qrcode { |
||||
position: relative; |
||||
padding: 8%; |
||||
background-repeat: no-repeat; |
||||
/* background-image:url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/qr-bg.png') ; */ |
||||
} |
||||
|
||||
.tki-qrcode-canvas { |
||||
display: inline-block; |
||||
background: 'transparent' |
||||
} |
||||
|
||||
/* .tki-qrcode-canvas { |
||||
position: fixed; |
||||
top: -99999upx; |
||||
left: -99999upx; |
||||
z-index: -99999; |
||||
} |
||||
image{ |
||||
|
||||
} |
||||
} */ |
||||
image {} |
||||
</style> |
||||
|
||||
@ -0,0 +1,240 @@ |
||||
<template> |
||||
<view> |
||||
<uni-popup ref="indexPopup" type="bottom"> |
||||
<view class="trans-block"> |
||||
<view class="title">请输入赠卡金额</view> |
||||
<text>￥</text><input v-model="params.occurAmount" class="uni-input" type="digit" |
||||
:placeholder=" '最多可以赠送'+ info.balance + '元'" /> |
||||
<button @click="sendTextMessage">确认赠卡</button> |
||||
</view> |
||||
</uni-popup> |
||||
|
||||
<uni-popup ref="smscodePopup" type="center"> |
||||
<view class="poput_tip"> |
||||
<view :style="'background-image: url('+popupbg+ ');'" class="popup_header">短信身份验证</view> |
||||
<view style="margin: 20rpx auto;width: 90%;">转出验证：本次转出需要短信确认，验证码 已发送至您的手机 |
||||
{{phoneHandle(this.user.userPhone)}} |
||||
</view> |
||||
<xt-verify-code class="code" v-model="params.code" @confirm="submit"></xt-verify-code> |
||||
<button @click="send" class="oliout_butten" |
||||
style="width:60%; border-radius: 50rpx;">{{time===0?'重新发送验证码':time+'S'}} |
||||
</button> |
||||
</view> |
||||
</uni-popup> |
||||
|
||||
<uni-popup ref="successPopupt" type="center"> |
||||
<view class="poput_tip"> |
||||
<view :style="'background-image: url('+popupbg+ ');'" class="popup_header">温馨提示</view> |
||||
<view style="margin: 20rpx auto;width: 90%;text-align: center;"> |
||||
<view class="container_img"> |
||||
<image class="success_img" src="../../static/img/success.png"></image> |
||||
</view> |
||||
转出成功! |
||||
</view> |
||||
<button @click="$refs.successPopupt.close()" class="oliout_butten" |
||||
style="width:60%; border-radius: 50rpx;">确认</button> |
||||
</view> |
||||
</uni-popup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import serve from '@/api/account.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
popupbg: 'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/web/cuscomtrac/popupbg.png', |
||||
time: 0, |
||||
price: '', |
||||
info: {}, |
||||
user: uni.getStorageSync('user') || {}, |
||||
params: { |
||||
occurAmount: '', |
||||
code: '', |
||||
verifyCodeToken: '', |
||||
billType: 'OIL_DONATION', |
||||
createSource: 'XOIL_DRIVER_WECHAT_APPLET', |
||||
} |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
_open(item) { |
||||
if (item) { |
||||
console.log('itemitemitemitem', item) |
||||
this.params.occurAmount = '' |
||||
this.info = item |
||||
this.$refs.indexPopup.open() |
||||
} |
||||
}, |
||||
sendTextMessage() { |
||||
if (!this.submitCheck()) return |
||||
|
||||
if (this.time === 0) { |
||||
this.params.code = '' |
||||
this.params.verifyCodeToken = '' |
||||
serve.giveCard({ |
||||
phone: this.user.userPhone |
||||
}).then(res => { |
||||
this.time = 60 |
||||
this.params.verifyCodeToken = res.data.verifyCodeToken |
||||
this.timefn() |
||||
this.$refs.smscodePopup.open() |
||||
}) |
||||
|
||||
} |
||||
}, |
||||
submitCheck() { |
||||
let { |
||||
occurAmount |
||||
} = this.params |
||||
if (!occurAmount) { |
||||
uni.showToast({ |
||||
title: '请输入赠送金额', |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
if (occurAmount > this.info.balance) { |
||||
uni.showToast({ |
||||
title: '超过最多赠送金额', |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
if (occurAmount < 5) { |
||||
uni.showToast({ |
||||
title: '赠送金额不可低于5元', |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
return true |
||||
}, |
||||
submit() { |
||||
let { |
||||
giveCustomerId, //收款方 |
||||
companyId, //付款方 |
||||
accountCardCode //付款方 |
||||
} = this.info |
||||
|
||||
serve.oilCustomerAccountRecord({ |
||||
giveCustomerId, |
||||
givePhone: '', |
||||
companyId, |
||||
payerCustomerId: this.user.id, |
||||
accountCardCode, |
||||
...this.params |
||||
}).then(res => { |
||||
this.$refs.indexPopup.close() |
||||
this.$refs.smscodePopup.close() |
||||
this.$refs.successPopupt.open() |
||||
this.$emit('reloadCard') |
||||
}) |
||||
}, |
||||
|
||||
|
||||
phoneHandle(e) { |
||||
return e.substr(0, 3) + "****" + e.substr(7); |
||||
}, |
||||
|
||||
timefn() { |
||||
if (this.time !== 0) { |
||||
this.time-- |
||||
setTimeout(() => { |
||||
this.timefn() |
||||
}, 1000) |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.poput_tip { |
||||
width: 85vw; |
||||
height: 40vh; |
||||
background-color: #F8F8F8; |
||||
border-radius: 15rpx; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.popup_header { |
||||
height: 20%; |
||||
width: 100%; |
||||
background-color: #FE0505; |
||||
color: white; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-size: 100% 30vh; |
||||
} |
||||
|
||||
.container_img { |
||||
height: 100rpx; |
||||
width: 100rpx; |
||||
overflow: hidden; |
||||
border-radius: 50%; |
||||
margin: 0 auto; |
||||
margin-top: 50rpx; |
||||
margin-bottom: 25rpx; |
||||
} |
||||
|
||||
// .xt__verify-code .xt__input-ground .xt__box-box.data-v-e4b72d00 { |
||||
// height: 100rpx !important; |
||||
// } |
||||
|
||||
// .xt__verify-code { |
||||
// width: 90% !important; |
||||
// margin: 0 auto !important; |
||||
// } |
||||
|
||||
.oliout_butten { |
||||
width: 90vw; |
||||
margin: 0 auto; |
||||
background-color: #FE0505; |
||||
margin-top: 60rpx; |
||||
color: #F0F0F0; |
||||
} |
||||
|
||||
.trans-block { |
||||
padding: 54rpx 43rpx 0 63rpx; |
||||
width: 100%; |
||||
height: 679rpx; |
||||
background: #FFF; |
||||
border-radius: 15rpx 15rpx 0 0; |
||||
|
||||
.title { |
||||
margin-bottom: 35rpx; |
||||
font-size: 26rpx; |
||||
font-weight: 550; |
||||
color: #333; |
||||
} |
||||
|
||||
>text { |
||||
position: relative; |
||||
top: -10rpx; |
||||
font-size: 42rpx; |
||||
font-weight: 550; |
||||
color: #000; |
||||
} |
||||
|
||||
>input { |
||||
display: inline-block; |
||||
margin-left: 10rpx; |
||||
font-size: 28rpx; |
||||
color: #000; |
||||
} |
||||
|
||||
>button { |
||||
margin-top: 320rpx; |
||||
width: 441rpx; |
||||
height: 89rpx; |
||||
color: #fff; |
||||
font-size: 34rpx; |
||||
text-align: center; |
||||
background: #FF6700; |
||||
border-radius: 10rpx |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue