yicangzongtai_app_240321/pages/user/wallet/cardBag.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#999999"></navbar>
    <view class="card-list">
      <view class="item u-FFF" v-for="(item,index) in list" :key="item.id">
        <image :src="imgUrl+'/cardBag.png'"></image>
        <view class="position-ab">
          <view class="u-flex-center-sb pd30">
            <view>
              <view class="u-font20"><text>￥</text><text class="font52 u-ml5 u-mr5">{{item.money}}</text>元 </view>
              <view class="u-font24 u-flex-center"><text class="u-text400">购买此卡送</text><text
                  class="u-font30 u-DAC6A1">{{item.append}}</text>元</view>
            </view>
            <view class="btn" v-if="ispay">
              <button class="u-font24" @click="buyCard(item.id)">立即购买</button>
            </view>
          </view>
        </view>
      </view>
      <nodata v-if="noData" :config="{top:15,content:'暂无卡包~'}"></nodata>
    </view>
    <uniPopup type="bottom" ref="payOpen">
      <view class="u-bg-fff pay-select">
        <radio-group>
          <label class="u-flex-center-sb" @click="payWay(1)">
            <view class="u-flex-center">
              <image class="img60" :src="imgUrl+'/weChat2.png'"></image>
              <view class="u-ml20 u-font28 u-181818">微信支付</view>
            </view>
            <view>
              <radio value="1" checked />
            </view>
          </label>
          <!-- <label class="u-flex-center-sb u-mt30 " @click="payWay(2)">
            <view class="u-flex-center">
              <image class="img60" src="@/static/alipay.png"></image>
              <view class="u-ml20 u-font28 u-181818">支付宝支付</view>
            </view>
            <view>
              <radio value="2"  />
            </view>
          </label> -->

        </radio-group>
      </view>
      <view class="pay-btn">
        <button class="u-btn-two" @click="submitPay">
          去付款
        </button>
      </view>
    </uniPopup>
  </view>
</template>

<script>
  import uniPopup from "@/components/uni-popup/uni-popup.vue";
  let app = getApp()
  export default {
    components: {
      uniPopup,

    },
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '一卡通',
          color: '#1A1A1A',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A'
        },
        list: [],
        noData: false,
        payStatus: 1,
        selectId: null,
        imgUrl: this.$mConfig.staticUrl,
        ispay: app.globalData.openPay
      }
    },
    onLoad() {
      this.getRefillcardlist()
    },
    methods: {
      payWay(e) {
        this.payStatus = e;
      },
      submitPay() {
        let data = {
          refill_card_id: this.selectId,
          pay_mode: this.payStatus, //* 1：微信      * 2：支付宝
        }
        this.$http.post('/order/refillcard/buy', data)
          .then(res => {
            if (res && res.code == 200) {
              let target = res.data.data

              if (this.payStatus == 1) {
                uni.requestPayment({
                  provider: 'wxpay',
                  timeStamp: target.timeStamp,
                  nonceStr: target.nonceStr,
                  package: target.package,
                  signType: target.signType,
                  paySign: target.paySign,
                  //      orderInfo: {
                  //   appid: "wx54fd6fb89a3018e9",
                  //   noncestr: target.nonceStr,
                  //   package: "Sign=WXPay",
                  //   partnerid: "",
                  //   prepayid: "",
                  //   timestamp: target.timeStamp,
                  //   sign: target.paySign,
                  // },
                  success: (res) => {
                    this.$mUtil.toast('购买成功')
                    this.$refs.payOpen.close();
                    // setTimeout(()=>{
                    // 	uni.switchTab({
                    // 		url:'/pages/index/my'
                    // 	})
                    // },1000)
                  },
                  fail: function(err) {
                    console.log('fail:' + JSON.stringify(err));
                  }
                });
              } else {

                uni.requestPayment({
                  provider: 'alipay',
                  orderInfo: target.prePayOrderInfo,
                  success: (res) => {
                    this.$mUtil.toast('购买成功')
                    setTimeout(() => {
                      uni.redirectTo({
                        url: '/pages/index/my'
                      })
                    }, 1000)
                  },
                  fail: function(err) {
                    console.log('fail:' + JSON.stringify(err));
                  }
                });
              }




            }
          })
      },
      getRefillcardlist() {
        this.$http.get('/refill/card/list')
          .then(res => {
            if (res && res.code == 200) {
              this.list = res.list
              if (res.list.length == 0) {
                this.noData = true
              } else {
                this.noData = false
              }
            } else {
              this.noData = false
            }
          })
      },
      buyCard(id) {
        this.selectId = id
        this.$refs.payOpen.open();
      }
    }
  }
</script>

<style lang="scss">
  radio {
    transform: scale(0.7);
  }

  .pay-select {
    margin-top: 66rpx;
    border-radius: 18rpx 18rpx 0 0;
    padding: 48rpx 38rpx;
  }

  .img60 {
    width: 60rpx;
    height: 60rpx;
  }

  .pay-btn {
    padding: 80rpx 30rpx 20rpx 30rpx;
    padding-top: 80rpx;
    background: #fff;
    padding-bottom: 20px;

    button {
      background-color: #0B844A;
      color: #ffffff;
    }
  }

  .font52 {
    font-size: 52rpx;
  }

  .pd30 {
    padding: 30rpx 45rpx;
  }

  /* 文本溢出隐藏 */
  .u-text400 {
    display: block;
    max-width: 300rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .card-list {
    padding: 35rpx 15rpx 80rpx;

    .item {
      position: relative;

      image {
        width: 100%;
        height: 180rpx;
      }

      .position-ab {
        position: absolute;
        top: 0rpx;
        width: 100%;
      }

      .btn button {
        width: 149rpx;
        height: 50rpx;
        line-height: 50rpx;
        color: #0B844A;
        background: #ffffff;
        border-radius: 25rpx;
      }
    }
  }
</style>