275 lines
7.4 KiB
Vue
275 lines
7.4 KiB
Vue
<template>
|
|
<JeepayCustomNavbar backCtrl="back" bgDefaultColor="#fff" title="支付宝代运营授权" />
|
|
<view class="ali-wrapper">
|
|
<view class="ali-top">
|
|
<image class="ali-image" :src="calcStyleOrImg()" mode="scaleToFill" />
|
|
<view class="ali-status" :style="{ color: calcStyleOrImg('color') }">{{ calcAliStatus() }}</view>
|
|
<view class="ali-reset" @tap="upDateAliStatus">
|
|
<image src="/static/iconImg/ali-resete.svg" mode="scaleToFill" /> 刷新授权状态
|
|
</view>
|
|
|
|
<view class="edit-input flex-center" style="margin-top: 30rpx">
|
|
<view class="input-title">支付宝账号</view>
|
|
<uni-easyinput :inputBorder="false" v-model="vdata.aliAccount" placeholderStyle=" font-size: 30rpx;color:#ADADAD"
|
|
placeholder="请输入支付宝账号以授权" :styles="styles" clearable />
|
|
</view>
|
|
</view>
|
|
<view class="ali-bottom">
|
|
<view>
|
|
<Button @tap="openPopup">{{ vdata.original?.handleStatus == 'SUCCESS' ? '重新' : '发起' }}授权</Button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<JSinglePopup :list="list" ref="refSingle" />
|
|
<uni-popup type="center" ref="refPopup">
|
|
<view class="ali-img-wrapper">
|
|
<view class="ali-tips">
|
|
请使用支付宝账号【{{ vdata.aliAccount }}】绑定的支付宝扫码，根据页面指引完成授权
|
|
</view>
|
|
<image class="ali-image" :src="vdata.qrImg" mode="scaleToFill" />
|
|
<view class="save-img">
|
|
<Button @tap="saveImage(vdata.qrImg)">保存图片</Button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { $aliPayQrCodeOrApply, $aliAccountInfo } from "@/http/apiManager"
|
|
import infoBox from '@/commons/utils/infoBox.js';
|
|
import { ref, reactive, onMounted } from "vue"
|
|
const vdata = reactive({
|
|
aliAccount: '',
|
|
original: {},//存储原始数据
|
|
})
|
|
const styles = {
|
|
backgroundColor: 'transparent',
|
|
color: '#000',
|
|
fontSize: '32rpx',
|
|
}
|
|
const refSingle = ref(null)
|
|
const refPopup = ref(null)
|
|
const list = [
|
|
{ label: '发送支付宝授权消息', value: 'phone', fun: () => { getAliQrCode('phone') } },
|
|
{ label: '使用支付宝扫授权码', value: 'scan', fun: () => { getAliQrCode('scan') } },
|
|
]
|
|
const getAliQrCode = (v) => {
|
|
if (validate()) return
|
|
$aliPayQrCodeOrApply(vdata.aliAccount, v == 'phone' ? 'apply' : 'queryQrcode').then(({ bizData }) => {
|
|
vdata.qrImg = decodeURIComponent(bizData.qrCodeUrl)
|
|
upDateAliStatus()
|
|
if (v == 'phone') {
|
|
infoBox.showToast('授权消息发送成功 请在支付宝 服务消息点击确认授权')
|
|
return
|
|
}
|
|
refPopup.value.open()
|
|
})
|
|
}
|
|
|
|
const getAliInfo = () => {
|
|
$aliAccountInfo().then(({ bizData }) => {
|
|
if (!bizData) return
|
|
vdata.original = bizData
|
|
vdata.aliAccount = bizData.alipayAccount
|
|
})
|
|
}
|
|
getAliInfo()
|
|
const validate = () => {
|
|
// 正则表达式 判断是否包含中文 和 中文符号
|
|
const REG = /[\u4e00-\u9fa5|\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/
|
|
if (vdata.aliAccount == vdata.original.alipayAccount && vdata.original.handleStatus == 'SUCCESS') return infoBox.showToast('当前支付宝账号已授权通过，无需再次授权。')
|
|
if (REG.test(vdata.aliAccount)) return infoBox.showToast('账号格式错误 不能包含中文和中文标点符号')
|
|
return false
|
|
}
|
|
const calcAliStatus = () => {
|
|
if (!vdata.original.handleStatus) return '暂未授权'
|
|
if (vdata.original.handleStatus == 'SUCCESS') return '已授权'
|
|
if (vdata.original.handleStatus == 'PROCESS') return '授权中'
|
|
return '暂未授权'
|
|
}
|
|
const calcStyleOrImg = (v = 'img') => {
|
|
if (v == 'img') return vdata.original.handleStatus == 'SUCCESS' ? '/static/iconImg/ali-success.svg' : '/static/iconImg/ali-none.svg'
|
|
if (v == 'color') return vdata.original.handleStatus == 'SUCCESS' ? '#000000ff' : '#afbbcbff'
|
|
}
|
|
// 更新授权状态
|
|
const upDateAliStatus = () => {
|
|
$aliPayQrCodeOrApply().then(({ bizData }) => {
|
|
infoBox.showToast('授权状态更新成功')
|
|
if (bizData) vdata.original.handleStatus = bizData.handleStatus
|
|
})
|
|
}
|
|
const saveImage = (key) => {
|
|
// #ifdef APP-PLUS
|
|
|
|
uni.downloadFile({
|
|
url: key,
|
|
success: (res) => {
|
|
if (res.statusCode == 200) {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: res.tempFilePath,
|
|
success: (r) => {
|
|
infoBox.showSuccessToast('保存成功')
|
|
uni.vibrateShort()
|
|
},
|
|
fail: (er) => {
|
|
infoBox.showErrorToast('保存失败')
|
|
}
|
|
})
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
infoBox.showErrorToast('保存失败')
|
|
}
|
|
})
|
|
// #endif
|
|
//#ifdef MP-WEIXIN
|
|
downloadQR(key)
|
|
//#endif
|
|
}
|
|
|
|
//#ifdef MP-WEIXIN
|
|
function downloadQR (key) {
|
|
console.log('执行');
|
|
wx.getSetting({
|
|
//获取权限
|
|
success (res) {
|
|
if (res.authSetting['scope.writePhotosAlbum']) {
|
|
if (key == 'authQr') return saveWxQrcodeImg(vdata.authQr)
|
|
download(key)
|
|
} else {
|
|
wx.authorize({
|
|
scope: 'scope.writePhotosAlbum',
|
|
success () {
|
|
if (key == 'authQr') return saveWxQrcodeImg(vdata.authQr)
|
|
download(key)
|
|
},
|
|
})
|
|
}
|
|
},
|
|
})
|
|
}
|
|
function download (data) {
|
|
uni.downloadFile({
|
|
url: data,
|
|
success: (res) => {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: res.tempFilePath,
|
|
success: function () {
|
|
infoBox.showSuccessToast('保存成功')
|
|
uni.vibrateShort()
|
|
},
|
|
fail: function (err) {
|
|
infoBox.showErrorToast('保存失败')
|
|
},
|
|
})
|
|
},
|
|
})
|
|
}
|
|
//#endif
|
|
const openPopup = () =>{
|
|
if(!vdata.aliAccount) return infoBox.showToast('请输入支付宝账号。')
|
|
refSingle.value.open()
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.ali-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: calc(100vh - 170rpx);
|
|
overflow: hidden;
|
|
|
|
.ali-top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
.ali-image {
|
|
margin-top: 50rpx;
|
|
width: 350rpx;
|
|
height: 280rpx;
|
|
}
|
|
|
|
.ali-status {
|
|
margin: 20rpx 0 50rpx 0;
|
|
color: #afbbcbff;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ali-reset {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 130rpx;
|
|
color: #1f7bfeff;
|
|
font-size: 26rpx;
|
|
|
|
image {
|
|
margin-right: 15rpx;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ali-bottom {
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 180rpx;
|
|
|
|
view {
|
|
width: 400rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.edit-input {
|
|
padding: 0 20rpx;
|
|
width: calc(100% - 100rpx);
|
|
flex: 1;
|
|
min-height: 120rpx;
|
|
border-radius: 32rpx;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.input-title {
|
|
margin-left: 40rpx;
|
|
font-size: 30rpx;
|
|
color: #000;
|
|
}
|
|
|
|
:deep .content-clear-icon {
|
|
color: rgb(192, 196, 204) !important;
|
|
}
|
|
|
|
.ali-img-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0 auto;
|
|
width: calc(100% - 60rpx);
|
|
min-height: 500rpx;
|
|
background-color: #fff;
|
|
border-radius: 22rpx;
|
|
|
|
image {
|
|
margin-top: 15rpx;
|
|
width: 350rpx;
|
|
height: 350rpx;
|
|
}
|
|
}
|
|
|
|
.ali-tips {
|
|
margin: 30rpx;
|
|
margin-bottom: 0;
|
|
text-align: center;
|
|
color: #808080ff;
|
|
font-size: 26rpx;
|
|
line-height: 2;
|
|
}
|
|
|
|
.save-img {
|
|
margin: 30rpx 0;
|
|
width: 80%;
|
|
}</style> |