|
|
@@ -0,0 +1,351 @@
|
|
|
+<template>
|
|
|
+ <div class="app-content awaitPayYe awaitPayYe">
|
|
|
+ <div class="callback-wrap">
|
|
|
+ <div class="bg_01"></div>
|
|
|
+ <div class="callback-blo">
|
|
|
+ <block>
|
|
|
+ <div class="icon">
|
|
|
+ <i class="iconfont icondaizhifu"></i>
|
|
|
+ </div>
|
|
|
+ </block>
|
|
|
+ <view class="wait">待付款</view>
|
|
|
+ <block>
|
|
|
+ <div class="price">
|
|
|
+ <span>￥</span>
|
|
|
+ <span class="app-size-36 app-bold">{{ actPrice || ''}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="order-num app-color-3 order-show">订单号: {{ orderSn || ''}}</div>
|
|
|
+ <div class="order-num app-color-3 order-show" v-if="orderTime>0">{{orderTime}} 秒后订单失效</div>
|
|
|
+ <div class="order-num app-color-3 order-show" v-else>订单已失效</div>
|
|
|
+ </block>
|
|
|
+ <block>
|
|
|
+ <div class="call-one-btn">
|
|
|
+ <block v-if="orderTime>0">
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <view style="margin-top:30upx;text-align: center;">
|
|
|
+ <image :src="aliPayCodeImg" mode="heightFix" style="width:290upx;height:290upx;margin:0 auto;"></image>
|
|
|
+ <view style="margin-top:10upx;font-size:32upx;">支付宝扫此二维码付款</view>
|
|
|
+ </view>
|
|
|
+ <button class="button-com ali-btn" @click="savePayCode" style="margin-top:10upx;">保存二维码</button>
|
|
|
+ <button class="button-com ali-btn" @click="goDetail" style="margin-top:10upx;">我已经付款</button>
|
|
|
+ <view style="margin-top:25upx;font-size:32upx;text-decoration: underline;" @click="teachPayFn()">不会用支付宝付款？点这里教您</view>
|
|
|
+ <button class="button-com green pay-wx" @click="useWxPay" style="margin-top:50upx;">用微信付款</button>
|
|
|
+ <!-- #endif -->
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <button class="button-com disable pay-wx">微信支付</button>
|
|
|
+ <button class="button-com disable pay-wx">支付宝支付</button>
|
|
|
+ </block>
|
|
|
+ </div>
|
|
|
+ </block>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { purchaseClearWxPay,purchaseClearAliPay } from "@/api/purchase";
|
|
|
+import { getAliPayClearCode,detail } from "@/api/clear";
|
|
|
+import wexinPay from "@/utils/pay/wxPay";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import { postWxCode } from '@/api/mini'
|
|
|
+export default {
|
|
|
+ name: "callback",
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ orderTime:120,
|
|
|
+ type: '',
|
|
|
+ modalForm: {
|
|
|
+ payPassword: ''
|
|
|
+ },
|
|
|
+ psdKey: '',
|
|
|
+ orderSn: '',
|
|
|
+ id:0,
|
|
|
+ actPrice: '',
|
|
|
+ hasRequestApi:false,
|
|
|
+ needCheck:0,
|
|
|
+ aliPayCodeImg:'',
|
|
|
+ remainSecond:0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad (options) {
|
|
|
+ this.id = options.id ? options.id : 0
|
|
|
+ this.aliPayCodeImg = `${this.$constant.imgUrl}/default-img.png`
|
|
|
+ detail({ id:this.id }).then(res => {
|
|
|
+ if(res.code == 1) {
|
|
|
+ this.orderSn = res.data.orderSn?res.data.orderSn:''
|
|
|
+ this.actPrice = res.data.actPrice?res.data.actPrice:0
|
|
|
+ this.remainSecond = res.data.remainSecond?res.data.remainSecond:0
|
|
|
+ this.orderTime = this.remainSecond - 10 > 0 ? (this.remainSecond - 10) : 0
|
|
|
+ this.orderTimeFun()
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ this.getPayCodeFn(this.orderSn)
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["getLoginInfo", 'getDictionariesInfo']),
|
|
|
+ },
|
|
|
+ onShow(){
|
|
|
+ let that = this
|
|
|
+ if(that.needCheck == 1){
|
|
|
+ that.needCheck = 0
|
|
|
+ that.$util.confirmModal({content:'已付款成功？',okText:'是的',cancelText:'没有'},() => {
|
|
|
+ that.pageTo({ url: '/pagesPurchase/gatherResult?id='+that.id, type: 2 })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openAliPay(){
|
|
|
+ this.$msg('商家还未开通此功能')
|
|
|
+ },
|
|
|
+ init(){
|
|
|
+ },
|
|
|
+ useWxPay(){
|
|
|
+ this.orderSn = this.option.orderSn
|
|
|
+ this.id = this.option.id ? this.option.id : 0
|
|
|
+ this.actPrice = this.option.actPrice ? this.option.actPrice : 0
|
|
|
+ this.$util.pageTo({url: "/pagesPurchase/gatherPay?id="+this.id,type:2})
|
|
|
+ },
|
|
|
+ getPayCodeFn(orderSn){
|
|
|
+ getAliPayClearCode({orderSn:orderSn}).then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ if(res.data.imgUrl){
|
|
|
+ this.aliPayCodeImg = res.data.imgUrl
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ savePayCode(){
|
|
|
+ let url = this.aliPayCodeImg
|
|
|
+ uni.downloadFile({
|
|
|
+ url: url,
|
|
|
+ success: (res) => {
|
|
|
+ if (res.statusCode === 200) {
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ success: function (data) {
|
|
|
+ uni.showToast({title:'下载成功'})
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goDetail(){
|
|
|
+ this.$util.pageTo({url: "/admin/clear/info?id="+this.id,type:2})
|
|
|
+ },
|
|
|
+ teachPayFn() {
|
|
|
+ this.pageTo({ url: "/admin/ghs/teachPay"})
|
|
|
+ },
|
|
|
+ orderTimeFun(){
|
|
|
+ if(this.orderTime==0){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.orderTime--;
|
|
|
+ this.orderTimeFun();
|
|
|
+ },1000)
|
|
|
+ },
|
|
|
+ aliPay(){
|
|
|
+ let that = this
|
|
|
+ //解决重复提交问题
|
|
|
+ if(this.hasRequestApi == true){
|
|
|
+ this.$msg('正在请求，请5秒后重试')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ that.hasRequestApi = true
|
|
|
+ setTimeout(() => {
|
|
|
+ that.hasRequestApi = false
|
|
|
+ },7000)
|
|
|
+
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ that.$util.confirmModal({content:'确认收到花材没有问题？结清后订单无法再售后'},() => {
|
|
|
+ purchaseClearAliPay({ orderSn: this.orderSn}).then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ that.orderSn = res.data.orderSn
|
|
|
+ that.needCheck = 1
|
|
|
+ plus.runtime.openWeb(res.data.payUrl)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ wxPayFn(type){
|
|
|
+
|
|
|
+ let platformType = uni.getSystemInfoSync().platform
|
|
|
+ if(platformType == 'windows'){
|
|
|
+ this.$msg('请使用手机小程序付款')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ let that = this
|
|
|
+ //解决重复提交问题
|
|
|
+ if(this.hasRequestApi == true){
|
|
|
+ this.$msg('正在请求，请5秒后重试')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ that.hasRequestApi = true
|
|
|
+ setTimeout(() => {
|
|
|
+ that.hasRequestApi = false
|
|
|
+ },7000)
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ this.$msg('请用小程序打开，再支付')
|
|
|
+ return false
|
|
|
+ // #endif
|
|
|
+ that.$util.confirmModal({content:'确认收到花材没有问题？结清后订单无法再售后'},() => {
|
|
|
+ if(type == 1){
|
|
|
+ that.confirmWxPayFn()
|
|
|
+ }else{
|
|
|
+ that.confirmWxPayFnOld()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ confirmWxPayFn () {
|
|
|
+ let that = this
|
|
|
+ uni.showLoading({mask:true})
|
|
|
+ uni.login({
|
|
|
+ provider: 'weixin',
|
|
|
+ success: res => {
|
|
|
+ postWxCode({ code: res.code }).then(subRes => {
|
|
|
+ uni.hideLoading()
|
|
|
+ if(subRes.data.currentMiniOpenId){
|
|
|
+ let thisMiniOpenId = subRes.data.currentMiniOpenId
|
|
|
+ uni.setStorageSync('currentMiniOpenId',thisMiniOpenId)
|
|
|
+ that.weixinPay(thisMiniOpenId)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ weixinPay(currentMiniOpenId){
|
|
|
+ let that = this
|
|
|
+ purchaseClearWxPay({ orderSn: this.orderSn,currentMiniOpenId:currentMiniOpenId }).then(res => {
|
|
|
+ that.orderSn = res.data.orderSn
|
|
|
+ wexinPay(res.data, this.getSuccess, this.getError)
|
|
|
+ that.getPayCodeFn(that.orderSn)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ confirmWxPayFnOld() {
|
|
|
+ let currentMiniOpenId = uni.getStorageSync('currentMiniOpenId')
|
|
|
+ let that = this
|
|
|
+ if(!this.$util.isEmpty(currentMiniOpenId)){
|
|
|
+ that.weixinPayOld()
|
|
|
+ }else{
|
|
|
+ //没有miniOpenId补miniOpenId
|
|
|
+ uni.showLoading({mask:true})
|
|
|
+ uni.login({
|
|
|
+ provider: 'weixin',
|
|
|
+ success: res => {
|
|
|
+ postWxCode({ code: res.code }).then(subRes => {
|
|
|
+ uni.hideLoading()
|
|
|
+ if(subRes.data.currentMiniOpenId){
|
|
|
+ let thisMiniOpenId = subRes.data.currentMiniOpenId
|
|
|
+ uni.setStorageSync('currentMiniOpenId',thisMiniOpenId)
|
|
|
+ that.weixinPayOld()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ weixinPayOld(){
|
|
|
+ let that = this
|
|
|
+ let currentMiniOpenId = uni.getStorageSync('currentMiniOpenId')
|
|
|
+ purchaseClearWxPay({ orderSn: this.orderSn,currentMiniOpenId:currentMiniOpenId }).then(res => {
|
|
|
+ that.orderSn = res.data.orderSn
|
|
|
+ wexinPay(res.data, this.getSuccess, this.getError)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getSuccess () {
|
|
|
+ let that = this
|
|
|
+ that.pageTo({ url: '/pagesPurchase/gatherResult?id='+that.id, type: 2 })
|
|
|
+ },
|
|
|
+ getError () {
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-content {
|
|
|
+ .ali-btn{
|
|
|
+ background-color:#3385ff;
|
|
|
+ border:1upx solid #3385ff;
|
|
|
+ color:white;
|
|
|
+ }
|
|
|
+ .callback-wrap {
|
|
|
+ padding-top: 50upx;
|
|
|
+ // background-image: url("../../src/static/images/callback/bg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% auto;
|
|
|
+ position: relative;
|
|
|
+ .bg_01 {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 290upx;
|
|
|
+ background: #3385ff;
|
|
|
+ border-radius: 0upx 0upx 83upx 83upx;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .callback-blo {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 70upx 0;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 2upx 2upx 16upx 0upx rgba(181, 181, 181, 0.29);
|
|
|
+ border-radius: 10upx;
|
|
|
+ text-align: center;
|
|
|
+ // 使用icon
|
|
|
+ .icon {
|
|
|
+ .iconfont {
|
|
|
+ font-size: 170upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 一个按钮
|
|
|
+ .call-one-btn {
|
|
|
+ .button-com {
|
|
|
+ width: 70%;
|
|
|
+ padding-top: 22upx;
|
|
|
+ padding-bottom: 22upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ margin-top: 40upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-show{
|
|
|
+ margin-top:20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 待支付 - 公共
|
|
|
+.awaitPayWx,
|
|
|
+.awaitPayYe {
|
|
|
+ .status-text {
|
|
|
+ margin-top: 22upx;
|
|
|
+ margin-bottom: 52upx;
|
|
|
+ color: #ffa92e;
|
|
|
+ }
|
|
|
+ .surplus {
|
|
|
+ margin-top: 22upx;
|
|
|
+ margin-bottom: 38upx;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ .iconfont {
|
|
|
+ color: #ffa92e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 待确认样式
|
|
|
+.wait {
|
|
|
+ color: #ffa92e;
|
|
|
+ font-size: 40upx;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 20upx 0;
|
|
|
+}
|
|
|
+</style>
|
