new-mshop-view/components/payment/pay.vue

<template>
  <view class="pay-content">
    <view class="box-title">支付方式</view>
    <view class="box-content">
      <radio-group name="pay_type" @change="changePayType">
        <view class="pay-label" v-for="(item,index) in pay_list" :key="index" v-if="item.payStatus==1">
          <label>
            <view class="pay-item">
              <view class="left">
                <view :class="['iconfont','animated',item.icon]"></view>
                <view class="pay-item-info">
                  <view class="pay-name">{{ item.name }}</view>
                  <view class='tip'>
                    {{item.title}}
                    <block v-if="item.value === 'balance'">{{ item.number || '0.00' }}</block>
                  </view>
                </view>
              </view>
              <view class="right">
                <radio :value="item.value" :checked="item.value === payType" />
              </view>
            </view>
          </label>
        </view>
      </radio-group>
    </view>
  </view>
</template>

<script>

import {getUserInfo} from "@/api/user";

export default {
  props: {
    // 支付信息
    payType: {
      type: String,
      default () {
        return 'weixin';
      }
    },
    // 是否使用余额
    isBalance:{
      type: Boolean,
      default: true,
    },
    // 可用余额数量
    useBalance: {
      type: Number || String,
      default: 0,
    },


  },
  data() {
    return {
      pay_list: {
        weixin: {
          name: "微信支付",
          icon: "icon-weixin2",
          value: 'weixin',
          title: '微信快捷支付',
          payStatus: this.$store.getters.globalData.pay_routine_switch
        },
        // #ifdef H5 || APP-PLUS
        alipay: {
          name: "支付宝支付",
          icon: "icon-zhifubao",
          value: 'alipay',
          title: '支付宝支付',
          payStatus: this.$store.getters.globalData.alipay_open
        },
        // #endif
        // #ifdef MP
        alipayQr: {
          name: "支付宝支付",
          icon: "icon-zhifubao",
          value: 'alipayQr',
          title: '支付宝支付二维码',
          payStatus: this.$store.getters.globalData.alipay_open
        },
        // #endif
        balance: {
          name: "余额支付",
          icon: "icon-yuezhifu",
          value: 'balance',
          title: '可用余额:',
          payStatus: this.$store.getters.globalData.yue_pay_status == 1 && this.$store.getters.globalData.balance_func_status == 1 && this.isBalance,
          number: 0
        },
        hftx_weixin: {
          name: this.$store.getters.globalData.hftx_wechat_name || "微信支付",
          icon: "icon-weixin2",
          value: 'hftx_weixin',
          title: '第三方微信支付（汇付）',
          payStatus: this.$store.getters.globalData.hftx_switch
        },
      }




    };
  },
  watch: {
    // 存在指定的余额数量  则改变余额数量
    useBalance: {
      handler() {
        let useBalance = Number(this.useBalance || 0).toFixed(2);
        if(useBalance > 0) this.pay_list.balance.number = useBalance || '0.00';
      },
      deep: true
    },
  },
  mounted() {
    console.log(this.$store.getters.globalData)

    this.getUserBalance();
  },
  methods: {
    // 获取用户余额
    getUserBalance(){
      let _this = this;
      let useBalance = Number(this.useBalance || 0).toFixed(2);
      if(_this.pay_list.balance && useBalance <= 0){
        getUserInfo().then(res => {
          _this.pay_list.balance.number = res.data.now_money || '0.00';
        });
      }
    },
    // 点击切换支付项
    changePayType(e){
      let value = e.detail.value || e.target.value;
      this.$emit('change', value);
    }




  }
}
</script>

<style scoped lang="scss">
.pay-content{
  .box-title{
    margin: 30rpx 0;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    padding-left: 20rpx;
    font-weight: bold;
    position: relative;
  }
  .box-title:after{
    content: "";
    position: absolute;
    left: 0;
    top: calc((50rpx - 30rpx) / 2);
    width: 10rpx;
    height: 30rpx;
    background: #1777ff;
  }
  .box-content{
    .pay-label:not(:last-child){
      margin-bottom: 20rpx;
    }
    .pay-item{
      height: 120rpx;
      padding: 20rpx;
      width: 100%;
      border: 2rpx solid #d9dce4;
      border-radius: 15rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-around;
      .left{
        width: calc(100% - 80rpx);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        .animated{
          width: 44rpx;
          height: 44rpx;
          border-radius: 50%;
          text-align: center;
          line-height: 44rpx;
          background-color: #fe960f;
          color: #fff;
          font-size: 30rpx;
          margin-right: 15rpx;
        }
        .icon-weixin2 {
          background-color: #41b035;
        }
        .icon-icon34 {
          background-color: #4295D5;
        }
        .pay-item-info{
          .pay-name{
            text-align: left;
            border-right: 1px solid #eee;
            justify-content: left;
          }
          .tip{
            text-align: left;
            font-size: 26rpx;
            color: #aaa;
          }
        }
      }
      .right{
        width: 80rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
      }
    }
  }
}
</style>