|
|
@@ -0,0 +1,332 @@
|
|
|
+<template>
|
|
|
+ <view class="app-content" :class="[contentClass]">
|
|
|
+ <view class="callback-wrap">
|
|
|
+ <view class="callback-blo">
|
|
|
+ <block v-if="pageStatus == 1 || pageStatus == 2">
|
|
|
+ <view class="icon">
|
|
|
+ <i class="iconfont icondaizhifu"></i>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <view class="status-img">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/callback/success.png`" alt mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <view class="status-text app-size-36 app-bold">{{ pageTit }}</view>
|
|
|
+ <block v-if="pageStatus == 1 || pageStatus == 2">
|
|
|
+ <view class="price">
|
|
|
+ <span class="app-size-36 app-bold">￥{{ totalPrice }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="order-num app-color-3">订单号: {{ orderSn }}</view>
|
|
|
+ </block>
|
|
|
+ <block v-else-if="pageStatus == 3 && payDiscountPrice >0">
|
|
|
+ <view>
|
|
|
+ <span v-if="payDiscountType == 0" class="app-color-2">使用优惠券为您省</span>
|
|
|
+ <span v-else-if="payDiscountType == 1" class="app-color-2">会员身份为您省</span>
|
|
|
+ <span v-else-if="payDiscountType == 2" class="app-color-2">随机优惠为您省</span>
|
|
|
+ <span v-else class="app-color-2">随机优惠为您省</span>
|
|
|
+ <span class="app-price">{{ payDiscountPrice }}元</span>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <block v-if="pageStatus == 1 || pageStatus == 2">
|
|
|
+ <view class="call-one-btn">
|
|
|
+ <view v-if="Number(hdInfo.balance)>0" style="color:green;font-weight:bold;font-size:36upx;margin-top:28upx;">可用余额 ￥{{ parseFloat(hdInfo.balance) }}</view>
|
|
|
+ <button v-if="isYeBtnShow" class="button-com green pay-wx" @click="balancePayFn" style="height:100upx;line-height:50upx;">余额支付</button>
|
|
|
+ <button v-if="getPayType == 1" class="button-com green pay-wx" @click="wxPayFn" style="height:100upx;line-height:50upx;">微信支付</button>
|
|
|
+ <button v-else class="button-com green pay-wx" @click="wxPayFnOld" style="height:100upx;line-height:50upx;">微信支付</button>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <block v-else-if="pageStatus == 3 || pageStatus == 4 || pageStatus == 5">
|
|
|
+ <view class="call-btn-com call-two-btn" v-if="$util.isEmpty(loginInfo)"> <button class="button-com" @click="register()" >注册会员</button> </view>
|
|
|
+ <view class="call-btn-com call-two-btn"> <button class="button-com default" @click="goBackHome()" >返回首页</button></view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ <view class="coupon-wrap" v-if="option.pageStatus == 5">
|
|
|
+ <view class="coupon-img">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/callback/coupon.png`" alt mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ <view class="qrcode-img">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/images/extension.png`" alt mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import ModalModule from "@/components/plugin/modal";
|
|
|
+import AlertModule from "@/components/plugin/alert";
|
|
|
+import wexinPay from "@/utils/pay/wxPay";
|
|
|
+import { getShopUser } from "@/utils/auth";
|
|
|
+import { balancePay, wxPay } from "@/api/order";
|
|
|
+import { postWxCode } from '@/api/mini';
|
|
|
+import { getHdInfo } from '@/api/hd';
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ components: {
|
|
|
+ ModalModule,
|
|
|
+ AlertModule
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ constant: this.$constant,
|
|
|
+ pageTit: "",
|
|
|
+ pageStatus: 1,
|
|
|
+ contentClass: "",
|
|
|
+ payDiscountPrice: null,
|
|
|
+ payDiscountType: 0,
|
|
|
+ passwordModal: false,
|
|
|
+ form: {
|
|
|
+ payPassword: ""
|
|
|
+ },
|
|
|
+ payCallData: {},
|
|
|
+ setPassModal: false,
|
|
|
+ totalPrice:0,
|
|
|
+ orderSn:'',
|
|
|
+ getPayType:1,
|
|
|
+ hasRequestApi:false,
|
|
|
+ hdInfo:{},
|
|
|
+ isYeBtnShow:false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ shopUser: "getShopUser",loginInfo:"getLoginInfo" })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ register(){
|
|
|
+ let account = uni.getStorageSync('account')
|
|
|
+ this.$util.pageTo({url: "/pages/login/index?account="+account,type:2})
|
|
|
+ },
|
|
|
+ goBackHome(){
|
|
|
+ this.$util.pageTo({url: "/pages/home/recent",type:3})
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.orderSn = this.option.orderSn ? this.option.orderSn : ''
|
|
|
+ this.getPayType = this.option.getPayType
|
|
|
+ if(this.option.totalPrice){
|
|
|
+ this.totalPrice = parseFloat(Number(this.option.totalPrice))
|
|
|
+ }
|
|
|
+ this.pageStatus = this.option.pageStatus;
|
|
|
+ this.payDiscountPrice = this.option.payDiscountPrice;
|
|
|
+ this.payDiscountType = this.option.payDiscountType;
|
|
|
+ this.initClass(this.pageStatus);
|
|
|
+ getShopUser(true)
|
|
|
+
|
|
|
+ if(this.option.hdId && this.option.hdId>0){
|
|
|
+ getHdInfo({id:this.option.hdId}).then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ this.hdInfo = res.data.hd ? res.data.hd : {}
|
|
|
+ if(Number(this.hdInfo.balance) >= Number(this.totalPrice)){
|
|
|
+ this.isYeBtnShow = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ wxPayFn() {
|
|
|
+ let that = this
|
|
|
+ //解决重复提交问题
|
|
|
+ if(this.hasRequestApi == true){
|
|
|
+ this.$msg('正在请求，请5秒后重试')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ that.hasRequestApi = true
|
|
|
+ setTimeout(() => {
|
|
|
+ that.hasRequestApi = false
|
|
|
+ },7000)
|
|
|
+
|
|
|
+ uni.showLoading({title: '加载中',mask:true})
|
|
|
+ uni.login({
|
|
|
+ provider: 'weixin',
|
|
|
+ success: res => {
|
|
|
+ postWxCode({ code: res.code }).then(subRes => {
|
|
|
+ uni.hideLoading()
|
|
|
+ if(subRes.data.miniOpenId){
|
|
|
+ let miniOpenId = subRes.data.miniOpenId
|
|
|
+ wxPay({ orderSn: that.orderSn, couponId: that.option.couponId,miniOpenId:miniOpenId }).then(res => {
|
|
|
+ this.payCallData = res.data
|
|
|
+ wexinPay(res.data, that.paySuccess, that.payFail)
|
|
|
+ that.orderSn = res.data.orderSn ? res.data.orderSn : ''
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ wxPayFnOld() {
|
|
|
+ let miniOpenId = uni.getStorageSync('miniOpenId')
|
|
|
+ wxPay({ orderSn: this.orderSn, couponId: this.option.couponId,miniOpenId:miniOpenId }).then(res => {
|
|
|
+ this.payCallData = res.data
|
|
|
+ wexinPay(res.data, this.paySuccess, this.payFail)
|
|
|
+ this.orderSn = res.data.orderSn ? res.data.orderSn : ''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ paySuccess() {
|
|
|
+ this.$util.pageTo({ url: "/pages/callback/paySuccess", type: 2 })
|
|
|
+ },
|
|
|
+ payFail() {
|
|
|
+ },
|
|
|
+ balancePayFn() {
|
|
|
+ let that = this
|
|
|
+ that.$util.confirmModal({content:'确认余额支付？'},() => {
|
|
|
+ balancePay({orderSn:this.orderSn}).then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ this.$util.pageTo({ url:"/pages/callback/paySuccess",type: 2})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hideAlert() {
|
|
|
+ this.$util.pageTo("/pages/user/password");
|
|
|
+ },
|
|
|
+ // 初始样式
|
|
|
+ initClass(val) {
|
|
|
+ switch (val) {
|
|
|
+ case "1":
|
|
|
+ this.pageTit = "待支付";
|
|
|
+ this.contentClass = "awaitPayYe";
|
|
|
+ break;
|
|
|
+ case "2":
|
|
|
+ this.pageTit = "待支付";
|
|
|
+ this.contentClass = "awaitPayWx";
|
|
|
+ break;
|
|
|
+ case "3":
|
|
|
+ this.pageTit = "支付成功";
|
|
|
+ this.contentClass = "successPay";
|
|
|
+ break;
|
|
|
+ case "4":
|
|
|
+ this.pageTit = "评价成功";
|
|
|
+ this.contentClass = "successEval";
|
|
|
+ break;
|
|
|
+ case "5":
|
|
|
+ this.pageTit = "支付成功";
|
|
|
+ this.contentClass = "successPayCode";
|
|
|
+ break;
|
|
|
+ case "6":
|
|
|
+ this.pageTit = "提交成功";
|
|
|
+ this.contentClass = "registerMember";
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ this.pageTit = "支付成功";
|
|
|
+ this.contentClass = "awaitPayYe";
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: this.pageTit
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-content {
|
|
|
+ .callback-wrap {
|
|
|
+ padding-top: 50upx;
|
|
|
+ background-image: url("../../static/images/callback/bg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% auto;
|
|
|
+ .callback-blo {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 使用状态图片
|
|
|
+ .status-img {
|
|
|
+ width: 294upx;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .call-btn-com {
|
|
|
+ margin-top:60upx;
|
|
|
+ @include disFlex(center, space-evenly);
|
|
|
+ }
|
|
|
+ // 一个按钮
|
|
|
+ .call-one-btn {
|
|
|
+ .button-com {
|
|
|
+ width: 80%;
|
|
|
+ padding-top: 22upx;
|
|
|
+ padding-bottom: 22upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ margin-top: 40upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 两个按钮
|
|
|
+ .call-two-btn {
|
|
|
+ .button-com {
|
|
|
+ width: 40%;
|
|
|
+ padding-top: 22upx;
|
|
|
+ padding-bottom: 22upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 优惠券
|
|
|
+ .coupon-wrap {
|
|
|
+ width: 96%;
|
|
|
+ margin: 52upx auto 0;
|
|
|
+ position: relative;
|
|
|
+ .qrcode-img {
|
|
|
+ width: 170upx;
|
|
|
+ height: 170upx;
|
|
|
+ position: absolute;
|
|
|
+ top: 40upx;
|
|
|
+ right: 108upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.awaitPayWx,
|
|
|
+.awaitPayYe {
|
|
|
+ .status-text {
|
|
|
+ margin-top: 22upx;
|
|
|
+ margin-bottom: 52upx;
|
|
|
+ color: #ffa92e;
|
|
|
+ }
|
|
|
+ .surplus {
|
|
|
+ margin-top: 22upx;
|
|
|
+ margin-bottom: 38upx;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ .iconfont {
|
|
|
+ color: #ffa92e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.registerMember,
|
|
|
+.successPay,
|
|
|
+.successPayCode,
|
|
|
+.successEval {
|
|
|
+ .status-text {
|
|
|
+ color: #333;
|
|
|
+ margin-top: 22upx;
|
|
|
+ margin-bottom: 52upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.registerMember {
|
|
|
+ .call-back-wrap {
|
|
|
+ .qr-code-img {
|
|
|
+ width: 300upx;
|
|
|
+ height: 300upx;
|
|
|
+ margin: 20upx auto;
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .app-color-2 {
|
|
|
+ font-size: 30upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
