hlm_pl_mall_h5/pages/member/buy/pay.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <member-base :show="false" >
    <view class="div container">
      <view class="div common-header-wrap">
        <view :style="'height:'+navHeight+'px'"></view>
        <view class="common-header-holder"></view>
        <view class="common-header-fixed">
        <title-header />
        <uni-nav-bar v-if="isback"  title="付款" class="common-header" left-icon="back" @clickLeft="goBack">
        </uni-nav-bar>
        <uni-nav-bar v-else  title="付款" class="common-header">
        </uni-nav-bar>
      </view>
      </view>
      <view class="div" v-if="pay_info">
        <view class="div top-wrapper">
          <view class="div row-wrapper title-wrapper">
            <text class="i iconfont">&#xe6d2;</text>
            <label class="title">订单提交成功，请选择付款方式</label>
          </view>
          <view class="div subtitle-wrapper">
            <label class="subtitle">合计：</label>
            <label class="price">￥{{pay_info.pay_amount}}</label>
          </view>
        </view>
        <view class="div main-content">
          <flex-line v-if="pay_info.member_available_pd>0" :show-border="true">
            <view class="div"><text class="span">预存款</text><text
                class="span left-price">￥{{pay_info.member_available_pd}}</text></view>
            <view class="div" slot="right">
              <switch @change="switchChange(1,$event)" :checked="!!payment_info.pd_pay"></switch>
            </view>
          </flex-line>
          <flex-line v-if="pay_info.member_available_rcb>0" :show-border="true">
            <view class="div"><text class="span">充值卡</text><text
                class="span left-price">￥{{pay_info.member_available_rcb}}</text></view>
            <view class="div" slot="right">
              <switch @change="switchChange(2,$event)" :checked="!!payment_info.rcb_pay"></switch>
            </view>
          </flex-line>
          <flex-line :show-border="true" @click.native="payType(item.payment_code)" v-for="(item,index) in payment_list"
            :key="index">
            <view class="div item-left-wrapper">
              <text class="i" :class="'icon ' + item.payment_code"></text>
              <label class="item-title">{{item.payment_name}}</label>
            </view>
            <view slot="right" class="div item-right-wrapper">
              <text class="i item-select iconfont" v-if="payment_info.payment_code == item.payment_code">&#xe69d;</text>
            </view>
          </flex-line>
        </view>
      </view>
      <view class="div bottom-wrapper">
        <view class="div common-btn ds-button-large" @click="submit">立即付款</view>
      </view>
    </view>
    <uni-popup background-color="#fff" ref="confirm" type="dialog">
      <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content"
        :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
    </uni-popup>
  </member-base>
</template>

<script>
    import { getStoreJoinin } from '../../../api/seller'
import {getFontSize} from '@/util/common'
  import TitleHeader from '../../TitleHeader'
  import MemberBase from '../MemberBase'
  import { isWechat } from '../../../util/wechat'
  import {
    wechatUser
  } from '../../../api/memberLogin'
  import {
    getOrderpayInfo
  } from '../../../api/memberBuy'
  import {
    getVrOrderpayInfo
  } from '../../../api/memberVrBuy'
  import {
    mapState
  } from 'vuex'
  import {
    pay,
    getPaymentList
  } from '../../../api/memberPayment'
  import {
    getRechargeInfo
  } from '../../../api/memberRecharge'
  import {
    loadScript
  } from '../../../util/common'
  import flexLine from '../../flexLine'
  export default {
    name: 'pay',
    mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    var pages = getCurrentPages()
    var page = pages[pages.length - 2]
    var route = page.route
    if(route != 'pages/member/order/OrderList'){
        this.isback = false
    }else{
        this.isback = true
    }
    },
    data(){
      return {
        navHeight: 0,
        dialog: {},
        pay_sn: '',
        pay_type: '',
        // 订单支付显示的数据
        pay_info: null,
        isback:false,//是否显示返回按钮
        // 提交支付需要用到的数据
        payment_info: {
          openid:'',
          password: '', // 支付密码
          rcb_pay: 0, // 是否使用充值卡进行支付
          pd_pay: 0, // 是否使用预存款进行支付
          payment_code: 'alipay_h5' // 支付方式

        },
        payment_list: [],
        showNotice: 0,
        notice: 0,
      }
    },
    components:{
      TitleHeader,
      MemberBase,
      flexLine
    },
    computed:{
      fontSize(){
        return getFontSize()
      },
      ...mapState({
        token: state => state.member.token
      })
    },
    onLoad: function(option) {
      this.pay_sn = option.pay_sn ? option.pay_sn : ''
      this.pay_type = option.pay_type ? option.pay_type : ''
      this.notice = option.notice

      this.getMemberPayInfo()
      this.getPaymentList()
    },
    watch: {
      showNotice: function(val) {
        if (val && this.notice) {
          this.dialog = {
            condition: 1,
            title: '确认支付是否完成',
            content: '如果您已完成支付，请点击“确定”按钮，如果您未完成支付，请点击“取消”重新发起支付',
            cancelButtonText: '重新支付',
            confirmButtonText: '完成付款'
          }
          this.$refs.confirm.open()

        }
      }
    },
    methods: {
      switchChange(i, e) {
        switch (i) {
          case 1:
            this.payment_info.pd_pay = e.detail.value
            break
          case 2:
            this.payment_info.rcb_pay = e.detail.value
            break
        }

      },
      closeDialog() {
      },
      confirmDialog(value) {
        switch (this.dialog.condition) {
          case 1:
            this.goNext()
            break
          case 2:
            uni.navigateTo({
              url: '/pages/member/setting/AccountSet'
            })
            break
          case 3:
            this.payment_info.password = value
            this.submit()
            break
        }
      },
      goBack() {
        if (this.notice) {
          uni.navigateBack({
            delta: 2
          })
        } else {
          uni.navigateBack({
            delta: 1
          })
        }
      },
      goNext() {
        if (this.pay_type === 'pay_new') {
          uni.redirectTo({
            url: '/pages/member/order/OrderList?if_pay=1'
          })
        } else if (this.pay_type === 'vr_pay_new') {
          uni.redirectTo({
            url: '/pages/member/vrorder/OrderList?if_pay=1'
          })
        } else if (this.pay_type === 'pd_pay') {
          uni.redirectTo({
            url: '/pages/member/recharge/RechargeList?if_pay=1'
          })
        } else if (this.pay_type === 'sj_pay') {
          uni.redirectTo({
            url: '/pages/member/sellerjoinin/Step1?if_pay=1'
          })
        }
      },
      payType(code) {
        this.payment_info.payment_code = code
      },
      getPaymentList() {
        var from = ''
        var code = ''
        // #ifdef H5
        if(isWechat()){
          code = 'wxpay_jsapi'
        }
        // #endif
        // #ifdef APP-PLUS
        from = 'app'
        // #endif
        // #ifdef MP-WEIXIN
        code = 'wxpay_minipro'
        // #endif
        getPaymentList(from,code).then(res => {
          this.payment_list = res.result.payment_list
          if (this.payment_list.length) {
            this.payment_info.payment_code = this.payment_list[0].payment_code
          }
        }).catch(function(error) {
          uni.showToast({
            icon: 'none',
            title: error.message
          })
        })
      },
      getMemberPayInfo() {
        if (this.pay_type === 'pay_new') {
          let _this = this
          getOrderpayInfo(
            this.pay_sn
          ).then((res) => {
            if (res.code === 10000) {
              this.pay_info = res.result.pay_info
            }
            this.showNotice = 1
          }).catch(function(error) {
            if (error.code === 12001) { // 订单已经支付
              _this.goNext()
            } else {
              uni.showToast({
                icon: 'none',
                title: error.message
              })
            }
          })
        } else if (this.pay_type === 'vr_pay_new') {
          let _this = this
          getVrOrderpayInfo(
            this.pay_sn
          ).then((res) => {
            if (res.code === 10000) {
              this.pay_info = res.result.pay_info
            }
            this.showNotice = 1
          }).catch(function(error) {
            if (error.code === 12001) { // 订单已经支付
              _this.goNext()
            } else {
              uni.showToast({
                icon: 'none',
                title: error.message
              })
            }
          })
        } else if (this.pay_type === 'sj_pay') {
        let _this = this
          getStoreJoinin().then((res) => {
          if (res.code === 10000) {
            this.pay_info = res.result.store_joinin
          }
          this.showNotice = 1
        }).catch(function (error) {
          if (error.code === 12001) { // 订单已经支付
            _this.goNext()
          } else {
            Toast(error.message)
          }
        })
      } else if (this.pay_type === 'pd_pay') {
          getRechargeInfo(
            this.pay_sn
          ).then((res) => {
            if (res.code === 10000) {
              this.pay_info = {
                pay_amount: res.result.pdinfo.pdr_amount
              }
            }
            this.showNotice = 1
          }).catch(function(error) {
            if (error.code === 12001) { // 订单已经支付
              _this.goNext()
            } else {
              uni.showToast({
                icon: 'none',
                title: error.message
              })
            }
          })
        }
      },
      submit() {


        if (this.payment_info.pd_pay || this.payment_info.rcb_pay) {
          if (!this.pay_info.member_paypwd) {
            this.dialog = {
              condition: 2,
              content: '您需要先去设置支付密码'
            }
            this.$refs.confirm.open()
          } else {
            if (!this.payment_info.password) {
              this.dialog = {
                condition: 3,
                mode: 'input',
                title: '请输入支付密码',
                content: '注：默认支付密码为：123456'
              }
              this.$refs.confirm.open()
              return
            }
          }
        }
        // #ifdef MP-WEIXIN
          uni.login({
            provider: 'weixin',
            success: (res)=>{
              wechatUser({
              code: res.code,
              from: 'miniprogram',
            }).then(res=>{
                this.payment_info.openid=res.result.openid
                this.goPay()
              }).catch(error=>{
                uni.showToast({
                  icon: 'loading',
                  title: error.message
                })
              })

            },
            fail: (err)=>{
              uni.showToast({
                icon: 'loading',
                title: '登录失败'
              })
            }
          })

        // #endif
        // #ifndef MP-WEIXIN
        this.goPay()
        // #endif
      },
      goPay(){
        pay(
          this.pay_sn, this.pay_type, this.payment_info, this.token
        ).then((res) => {
          this.payment_info.password=''
          if (res.code) {
            if (res.code === 12001) {
              this.goNext()
            } else if (res.code === 10000) {
              var _this = this
              // #ifdef APP-PLUS
              var orderInfo = res.result.content
              var provider = 'wxpay'
              if (this.payment_info.payment_code == 'alipay_app') {
                var provider = 'alipay'
              }
              uni.requestPayment({
                provider: provider,
                orderInfo: orderInfo, //微信、支付宝订单数据
                complete: function() {
                  _this.goNext()
                }
              })
              // #endif
              // #ifdef MP-WEIXIN
              var result = JSON.parse(res.result)
              uni.requestPayment({
                provider: 'wxpay',
                timeStamp: result.timeStamp,
                nonceStr: result.nonceStr,
                package: result.package,
                signType: 'MD5',
                paySign: result.paySign,
                complete: function() {
                  _this.goNext()
                }
              })
              // #endif
            } else {
              uni.showToast({
                icon: 'none',
                title: res.message
              })
            }
          } else {
            // #ifdef H5
            document.write(res)
            // #endif
          }
        }).catch((error)=> {
          this.payment_info.password=''
          if (error.message) {
            uni.showToast({
              icon: 'none',
              title: error.message
            })
          } else {
            // #ifdef H5
            document.write(error)
            // #endif
          }
        })
      }
    }
  }
</script>

<style scoped lang='scss'>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #F0F2F5;
  }

  .bottom-wrapper {
    background: #fff;
    position: absolute;
    width: 100%;
    padding: .5rem $pageSpace;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
  }

  .main-content {
    padding: 0 $pageSpace;
    background: #fff
  }

  .top-wrapper {
    padding: 0 $pageSpace;
    height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #fff;
    margin-bottom: 0.75rem;
  }

  .row-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .title-wrapper {
    height: 3.2rem;

    .i {
      font-size: $mainFontSize;
      margin-right: .2rem;
    }
  }

  .subtitle-wrapper {
    height: 1.5rem;
    text-align: right;
  }

  .icon {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.2rem;
    margin-right: 0.5rem;
  }

  .title {
    font-size: $subFontSize;
    color: $formInputColor;
    font-weight: 700;
  }

  .subtitle {
    font-size: $subFontSize;
    color: $descTextColor;
  }

  .price {
    font-size: $h2;
    color: $primaryColor;
    font-weight: 700;
  }

  .left-price {
    font-size: $h2;
    color: #48A1FB;
  }

  .item-wrapper {
    height: 3.1rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #E8EAED;
  }

  .item-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #fff;
  }

  .item-left-wrapper {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .i {
      background-image: url(../../../static/image/wxpayicon.png);
      background-repeat: no-repeat;
      background-size: 100%;
    }

    .alipay_h5,
    .alipay_app {
      background-image: url(../../../static/image/alipayicon.png);
    }

    .unionpay_h5 {
      background-image: url(../../../static/image/unionpayicon.png);
    }
  }

  .item-right-wrapper {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .item-title {}

  .item-subtitle {
    font-size: $h2;
    color: #8C8C8C;
    margin-right: 0.25rem;
    text-align: right;
  }

  .item-select {
    font-size: 1.2rem;
    color: #7ED321;
  }

  .indicator {
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 0.25rem;
    margin-right: 0.8rem;
  }

  .action-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 2.5rem;
    margin-top: 2.25rem;
  }
</style>