Browse Source

对接扫码支付相关所有涉及到的功能

master
邓平艺 4 years ago
parent
commit
2f8fa0cc3e
  1. 7
      common/js/sandBox.js
  2. 6
      components/lf-payPassword/lf-payPassword.vue
  3. 6
      pages.json
  4. 54
      pages/aboutpay/confirmcash.vue
  5. 18
      pages/aboutpay/paystate.vue
  6. 31
      pages/business/center/center.vue
  7. 22
      pages/business/payment/money.vue
  8. 20
      pages/business/payment/paystate.vue
  9. 65
      pages/business/payment/wait.vue
  10. 157
      pages/user/member/code.vue
  11. 2
      pages/user/my/setPassword.vue

7
common/js/sandBox.js

@ -95,14 +95,17 @@ export const sandBox = {
showCancel: false,
success:(res)=>{
if (res.confirm) {
wx.navigateTo({
// wx.navigateTo 邓平艺 于2021.09.24修改,
// 原因:未登录点击后跳转到登录页,当登录成功,
// 再次跳转回来时,用户点击页面返回,原有页面和弹窗还存在
uni.redirectTo({
url:`/pages/user/register/register?url=${url}`
})
return;
}
},
cancel:()=>{
wx.navigateTo({
uni.redirectTo({
url:`/pages/user/register/register?url=${url}`
})
return;

6
components/lf-payPassword/lf-payPassword.vue

@ -21,7 +21,7 @@
</countdown-timer>
</view>
</view>
<button class="btn" hover-class="lf-opacity" @click="comfirm">确认</button>
<button class="btn" hover-class="lf-opacity" @click="comfirm">{{ buttonText }}</button>
</view>
</template>
@ -41,6 +41,10 @@
showCountdown: {
type: Boolean,
default: false
},
buttonText: {
type: String,
default: '确认'
}
},
data(){

6
pages.json

@ -21,13 +21,15 @@
{
"path": "pages/aboutpay/paystate",
"style": {
"navigationStyle": "custom"
"navigationStyle": "custom",
"navigationBarTitleText":"支付结果"
}
},
{
"path": "pages/aboutpay/confirmcash",
"style": {
"navigationStyle": "custom"
"navigationStyle": "custom",
"navigationBarTitleText":"确认金额"
}
},
{

54
pages/aboutpay/confirmcash.vue

@ -6,7 +6,7 @@
<view class="lf-font-32 lf-color-555">
请核对支付金额
</view>
<view style="font-size: 72rpx;color: #15716E;">¥478.50</view>
<view style="font-size: 72rpx;color: #15716E;">¥{{ amount }}</view>
<view class="lf-flex">
<view class="lf-font-24 lf-m-r-10" style="color:#FF9D9D">
剩余支付时间
@ -23,7 +23,7 @@
</countdown-timer>
</view>
<view>
<button class="confirmcash-btn">确认</button>
<button class="confirmcash-btn" hover-class="lf-opacity" @click="offlinePay">确认</button>
</view>
</view>
</view>
@ -33,18 +33,62 @@
<script>
import countdownTimer from '@/components/countdown-timer/countdown-timer';
export default {
components: {
countdownTimer
},
data() {
return {
time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 14:10:00').getTime()
time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 14:10:00').getTime(),
amount: 0,
clerk_id: 0,
brand_id: 0,
is_date_end: false
}
},
components: {
countdownTimer
onLoad(options){
this.amount = options.amount || 0;
this.clerk_id = options.clerk_id;
this.brand_id = options.brand_id;
},
methods: {
dateFinish(){
console.log("倒计时结束");
this.is_date_end = true;
},
offlinePay(){
if(this.amount == 0){
return this.$msg('支付金额不能为0');
}
if(this.is_date_end){
uni.showModal({
title: '温馨提示',
content: '支付时间已结束, 请重新操作',
showCancel: false,
confirmColor: '#1c8482'
});
return;
};
let token = this.$cookieStorage.get('user_token');
this.$http.post({
api: 'api/offline/pay',
data: {
clerk_id: this.clerk_id,
brand_id: this.brand_id,
amount: this.amount
},
header: {
Authorization: token
}
}).then(res => {
if(res.data.code == 200){
this.$url('/pages/aboutpay/paystate?payState=1&amount='+ this.amount);
}else{
this.$msg(res.data.message || res.data.data || '支付失败').then(() => {
this.$url('/pages/aboutpay/paystate?payState=0');
})
}
})
}
}
}
</script>

18
pages/aboutpay/paystate.vue

@ -1,6 +1,6 @@
<template>
<view>
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#fff" title="确认金额"></lf-nav>
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#fff" title="支付结果"></lf-nav>
<view class="lf-p-30" style="margin: 0 auto;">
<view class="confirm-card">
<view class="state-btn" v-if="payState">
@ -11,11 +11,11 @@
</view>
<view>
<text class="lf-font-32 lf-color-777 lf-m-r-10">支付</text>
<text style="font-size: 72rpx;color: #15716E;" v-if="payState">¥478.50</text>
<text style="font-size: 72rpx;color: #15716E;" v-if="payState">¥{{ amount }}</text>
<text style="font-size: 72rpx;color: #15716E;" v-else>失败</text>
</view>
<view>
<button class="confirmcash-btn">返回首页</button>
<button class="confirmcash-btn" @click="backHome">返回首页</button>
</view>
</view>
</view>
@ -26,7 +26,17 @@
export default {
data() {
return {
payState: true
payState: 1,
amount: 0
}
},
onLoad(options){
this.payState = Boolean(Number(options.payState));
this.amount = options.amount;
},
methods: {
backHome(){
this.$url('/pages/index/index/index', {type: 'launch'});
}
}
}

31
pages/business/center/center.vue

@ -135,14 +135,35 @@
onScanCode(){
uni.scanCode({
complete: res => {
console.log(res);
if(res.errMsg == 'scanCode:ok'){
//
let result = res.result;
// TODO result
this.$url('/pages/business/payment/money?user_id=1');
let result = this.codeParse(res.result);
if(this.$shared.isValueType(result) == 'object'){
if(result.rand && result.time && result.u_id){
let url = '/pages/business/payment/money';
url += `?u_id=${result.u_id}`;
url += `&rand=${result.rand}`;
url += `&time=${result.time}`;
this.$url(url);
}
}else{
this.$msg('不是有效的支付码');
}
}else{
this.$msg('请扫二维码或条形码');
}
}
})
},
codeParse(str){
str = String(str);
let new_data = null;
try{
new_data = JSON.parse(str);
}catch{
new_data = str;
}
return new_data;
}
}
}

22
pages/business/payment/money.vue

@ -24,12 +24,16 @@
data(){
return {
money: '',
user_id: 0
user_id: 0,
rand: 0,
time: 0
}
},
onLoad(options){
if(options.user_id){
this.user_id = options.user_id;
if(options.u_id){
this.user_id = options.u_id;
this.time = options.time;
this.rand = options.rand;
}else{
this.$msg('二维码错误', {icon: 'error'}).then(() => {
this.$toBack();
@ -45,6 +49,8 @@
api: 'api/supplier/offline/order',
data: {
user_id: this.user_id,
time: this.time,
rand: this.rand,
amount: this.money
},
header: {
@ -52,10 +58,14 @@
}
}).then(res => {
if(res.data.code == 200){
this.$url('/pages/business/payment/wait', {type: 'redirect'})
let url = '/pages/business/payment/wait?user_id='+ this.user_id;
url += '&amount='+ this.amount;
this.$url(url, {type: 'redirect'});
}else{
let msg = res.data.msg || '网络错误';
this.$msg(msg);
let message = res.data.message || '网络错误';
this.$msg(message).then(() => {
this.$toBack();
})
}
})
}

20
pages/business/payment/paystate.vue

@ -1,9 +1,9 @@
<template>
<view>
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#fff" title="确认金额"></lf-nav>
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#fff" title="支付结果"></lf-nav>
<view class="lf-p-30" style="margin: 0 auto;">
<view class="confirm-card">
<view class="state-btn" v-if="!payState">
<view class="state-btn" v-if="payState">
<u-icon name="checkbox-mark" style="font-size: 100rpx;" class="lf-color-white"></u-icon>
</view>
<view class="state-btn1" v-else>
@ -11,11 +11,11 @@
</view>
<view>
<text class="lf-font-32 lf-color-777 lf-m-r-10">到账</text>
<text style="font-size: 72rpx;color: #0D2E9A;" v-if="!payState">¥478.50</text>
<text style="font-size: 72rpx;color: #0D2E9A;" v-if="payState">¥{{ amount }}</text>
<text style="font-size: 72rpx;color: #0D2E9A;" v-else>失败</text>
</view>
<view>
<button class="confirmcash-btn">返回主页</button>
<button class="confirmcash-btn" @click="backHome">返回主页</button>
</view>
</view>
</view>
@ -26,7 +26,17 @@
export default {
data() {
return {
payState: true
payState: 1,
amount: 0
}
},
onLoad(options){
this.payState = Boolean(Number(options.payState));
this.amount = options.amount;
},
methods: {
backHome(){
this.$url('/pages/business/center/center', {type: 'launch'});
}
}
}

65
pages/business/payment/wait.vue

@ -10,14 +10,71 @@
export default {
data(){
return {
user_id: 0,
amount: 0,
timer: null,
num: 5,
count: 0,
overtime: false
}
},
onLoad(){
onLoad(options){
this.user_id = options.user_id;
this.amount = options.amount;
this.startTimer();
},
onUnload(){
if(this.timer){
clearInterval(this.timer);
this.timer = null;
}
},
methods: {
startTimer(){
if(this.timer){
clearInterval(this.timer);
this.timer = null;
}
this.count++;
let max_date = 60 * 2; //
let current_date = this.count * 5; //
if(current_date >= max_date){
this.overtime = true;
}
this.checkOrderPay();
this.timer = setInterval(() => {
this.num--;
if(this.num <= 0){
clearInterval(this.timer);
this.timer = null;
this.num = 5;
this.startTimer();
}
}, 1000);
},
checkOrderPay(){
let token = this.$cookieStorage.get('store_token');
this.$http.get({
api: 'api/supplier/offline/check_order_pay',
data: {
user_id: this.user_id
},
header: {
token: token
}
}).then(res => {
if(res.data.code == 200){
let url = '/pages/business/payment/paystate';
url += '?payState=1';
url += '&amount='+ this.amount;
this.$url(url, {type: 'redirect'});
}else if(this.overtime){
let url = '/pages/business/payment/paystate';
url += '?payState=0';
this.$url(url, {type: 'redirect'});
}
})
}
}
}
</script>

157
pages/user/member/code.vue

@ -7,15 +7,16 @@
<view class="top">
<view class="lf-flex">
<view class="avatar">
<image src="https://picsum.photos/200"></image>
<image :src="userInfo.avatar"></image>
</view>
<view class="phone">182****5380</view>
<view class="phone">{{ userInfo.mobile_replace }}</view>
</view>
<view class="card">
<text class="lf-iconfont icon--1"></text>
<!-- <view class="card">
<text class="lf-iconfont icon-daifukuan"></text>
</view> -->
</view>
</view>
<view class="balance">余额 ¥1829.83</view>
<view class="balance">余额 ¥{{ centerInfo.balance }}</view>
<block v-if="show_code">
<view class="barcode">
<lf-barcode :options="config.bar"></lf-barcode>
</view>
@ -23,6 +24,7 @@
<lf-qrcode :options="config.qrc"></lf-qrcode>
</view>
<view class="tips">{{ num }}s后自动刷新</view>
</block>
</view>
</view>
</template>
@ -39,32 +41,38 @@
return {
config: {
bar: {
code: 'E01181016286106',
code: '',
color: '#000', //
bgColor: '#FFFFFF', //
width: 586, //
height: 210 //
},
qrc: {
code: "https://weixin.qq.com/g/AwYAAHO3aO4zlasEij6bLsk4hlZd5XNFkkBmqyS55mLPFxmn5c9PaI1omqLhd24fABCD23333",
code: "",
size: 352, //
level: 4, // 04
bgColor: '#FFFFFF', //
// border: {
// color: ['#8A2387', '#F27121'], //
// lineWidth: 3, //
// },
// img: '/static/logo.png', //
// iconSize: 40, //
color: '#000000', //
}
},
timer: null,
num: 90
num: 120,
refresh: 120,
token: '',
userInfo: {},
centerInfo: {balance: 0},
show_code: false,
show_code_count: 0,
show_count: 0
}
},
onLoad(){
this.refreshCode();
var token = this.$cookieStorage.get('user_token');
this.token = token;
this.getIsSetPayPwd();
this.getMeInfo();
this.getUcenter();
//
uni.getScreenBrightness({
success: (res) => {
@ -76,6 +84,12 @@
}
})
},
onShow(){
this.show_count++;
if(this.show_count > 1){
this.getIsSetPayPwd();
}
},
onUnload(){
if(this.timer){
clearInterval(this.timer);
@ -86,6 +100,55 @@
})
},
methods: {
//
getIsSetPayPwd(){
this.$http.post({
api: 'api/user/isset_pay_pwd',
header: {
Authorization: this.token
}
}).then(res => {
console.log("====",res)
if(res.data.status){
this.refreshCode();
}else{
uni.showModal({
title: '温馨提示',
content: res.data.message,
showCancel: false,
confirmColor: '#1c8482',
confirmText: '去设置',
success: result => {
if(result.confirm){
this.$url('/pages/user/my/setPassword');
}
}
})
}
})
},
//
getMeInfo(){
this.$http.get({
api: 'api/me',
header: {
Authorization: this.token
}
}).then(res => {
this.userInfo = res.data.data;
})
},
//
getUcenter(){
this.$http.get({
api: 'api/users/ucenter',
header: {
Authorization: this.token
}
}).then(res => {
this.centerInfo = res.data.data;
})
},
// rpx px
rpxTransformPx(num){
let systemInfo = uni.getSystemInfoSync();
@ -98,15 +161,75 @@
clearInterval(this.timer);
this.timer = null;
}
this.getPay();
this.timer = setInterval(() => {
this.num--;
if(this.num % 5 === 0){
this.getPay({silence: true});
}
if(this.num <= 0){
clearInterval(this.timer);
this.timer = null;
this.num = 90;
this.num = this.refresh;
this.refreshCode(); //
}
}, 1000);
},
getPay(options = {}){
if(!options.silence){
if(this.show_code_count >= 1){
uni.showLoading({
title: '正在刷新'
})
}else{
uni.showLoading({
title: '正在拉取数据'
})
}
}
this.$http.get({
api: 'api/offline/get_pay',
data: {
refresh: 0
},
header: {
Authorization: this.token
}
}).then(res => {
if(res.data.code == 200){
let detail = res.data.data;
let u_id = this.userInfo.id;
if(!options.silence){
let str = JSON.stringify({
rand: detail.rand,
time: detail.time,
u_id: u_id
});
this.config.bar.code = str;
this.config.qrc.code = str;
this.show_code = true;
this.show_code_count++;
}
if(detail.clerk_id){
// ,
let amount = detail.amount;
let brand_id = detail.brand_id;
let clerk_id = detail.clerk_id;
let url = '/pages/aboutpay/confirmcash';
url += `?clerk_id=${clerk_id}`;
url += `&brand_id=${brand_id}`;
url += `&amount=${amount}`;
this.$url(url);
}
}
if(!options.silence){
uni.hideLoading();
}
}).catch(err => {
if(!options.silence){
uni.hideLoading();
}
});
}
}
}

2
pages/user/my/setPassword.vue

@ -140,7 +140,7 @@
this.$toBack();
})
}else{
this.$msg(res.data.data);
this.$msg(res.data.message);
}
})
}else{

Loading…
Cancel
Save