ohplay_h5/src/pages/pay/index.vue

<template>
  <view class='app-container'>
    <view class="header">
      <view class="info" flex>
        <view class="dev-img" flex center>
          <img :src="info.devicePic" />
        </view>
        <view class="dev" flex column>
          <view class="dev-name">{{ info.deviceName }}</view>
          <view class="dev-history" @click="getRouter">开通记录<uni-icons type="right" color="#9fa5ad" size="11" /></view>
        </view>
      </view>
      <view class="progress" flex column center>
        <progress :percent="percent" activeColor="#FFD5A0" backgroundColor="#746C64" border-radius="20" />
        <view class="progress-info" flex between>
          <text>已用：{{ this.rateplan.used }}M / 剩余：{{ this.rateplan.left }}M</text>
          <text>总量：{{ this.rateplan.total / 1024 }}G</text>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="title">流量选择</view>
      <view flex between>
        <view :class="['list', active === index ? 'active' : '']"
          :style="{ 'width': `calc(${100 / options.length}% - 5px)` }" v-for="(item, index) in options" :key="index"
          flex column between @click="getActive(item, index)" :data-content-before="item.operators"
          :data-content-after="item.tagName">
          <view class="flow">{{ item.name }}</view>
          <view class="discount icon">{{ item.goodDiscountedPrice }}</view>
          <view class="price icon">{{ item.goodPrice }}</view>
        </view>
      </view>
      <view class="explain" flex column>
        <text>说明：</text>
        <text>1、当前流量包购买后，将充值至猫王音响赠送的SIM卡内</text>
        <text>2、流量包购买后当日生效</text>
        <text>3、如在有效期内流量未使用完毕，流量将被清零</text>
      </view>
    </view>
    <view class="footer">
      <view class="warning">
        开通后仅支持当前绑定的猫王音响上通过移动数据模式使用，不支持蓝牙模式
      </view>
      <button @click="getWechatPay">立即购买</button>
    </view>
  </view>
</template>

<script>
import { openId, wechatPay, detail, options } from "@/api/pay"
export default {
  data() {
    return {
      openId: '',
      // 流量信息
      info: {},
      rateplan: {},
      // 已用流量
      percent: 0,
      // 下单表单
      form: {},
      // 流量选择
      options: [],
      // 选择
      active: 0,
      // 流量套餐id
      goddsId: 0,
      state: ''
    }
  },
  onLoad(e) {
    this.state = e.state
    this.getOpenId(e)
    this.getDetail()
    this.getOptions()
  },
  methods: {
    // 获取openId
    getOpenId(e) {
      openId(e.code).then(res => {
        if (res.code === 0) {
          this.openId = res.data.openid
        }
      })
    },

    // 流量信息
    getDetail() {
      detail({ state: this.state }).then(res => {
        if (res.code === 0) {
          this.info = res.data
          this.rateplan = res.data.rateplan
          this.percent = this.rateplan.used / this.rateplan.total * 100
        }
      })
    },

    // 流量套餐
    getOptions() {
      options({ state: this.state }).then(res => {
        this.options = res.data
        this.goodsId = res.data[0].id
        res.data.map(i => document.documentElement.style.setProperty('——operators', i.operators))
      })
    },

    // 选择套餐
    getActive(item, index) {
      this.active = index
      this.goodsId = item.id
    },

    // 下单
    getWechatPay() {
      wechatPay({
        openId: this.openId,
        goodType: 18,
        goodsId: this.goodsId,
        ptype: 1,
        state: this.state,
        tradeType: 2
      }).then(res => {
        if (res.code === 0) {
          this.form = JSON.parse(res.data.wxOrder.formUrl)
          if (typeof WeixinJSBridge == 'undefined') {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridge', this.onBridgeReady(), false)
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridge', this.onBridgeReady())
              document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady())
            }
          } else {
            this.onBridgeReady()
          }
        }
      })
    },

    // 调起支付
    onBridgeReady() {
      WeixinJSBridge.invoke('getBrandWCPayRequest', this.form, function (res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          // 支付成功刷新页面
          this.getDetail()
        }
      })
    },

    // 开通记录
    getRouter() {
      uni.navigateTo({
        url: `/pages/pay/detail?state=${this.state}`,
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0;
}

.header {
  width: 100%;
  height: 368rpx;
  background: url('../../static/pay/bg.png') no-repeat 100% / 100%;

  .info {
    .dev-img {
      background: rgba(0, 0, 0, 0.12);
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin: 64rpx 0 0 64rpx;

      img {
        width: 96rpx;
        height: 96rpx;
      }
    }

    .dev {
      margin-top: 88rpx;
      margin-left: 24rpx;

      .dev-name {
        font-size: 32rpx;
      }

      .dev-history {
        color: #9fa5ad;
        font-size: 22rpx;
      }
    }
  }

  .progress {
    width: 100%;
    margin-top: 48rpx;

    ::v-deep uni-progress,
    .progress-info {
      width: 590rpx;

      .uni-progress-bar,
      .uni-progress-inner-bar {
        border-radius: 18rpx;
      }
    }

    .progress-info {
      font-size: 20rpx;
      color: #9fa5ad;
      margin-top: 8rpx;
    }
  }
}

.main {
  padding: 0 32rpx;

  .active {
    background-color: rgba(199, 170, 134, 0.12);
  }

  .list {
    height: 268rpx;
    border: 1px solid #C7AA86;
    border-radius: 16rpx;
    padding: 48rpx 0;
    color: #FFD5A0;
    position: relative;
    margin: 24rpx 0;

    .flow {
      font-size: 32rpx;
    }

    .discount {
      font-size: 48rpx;
    }

    .price {
      font-size: 24rpx;
      text-decoration: line-through;
      opacity: 0.5;
    }

    .icon::before {
      content: '￥';
      font-size: 24rpx;
    }
  }

  .list::before {
    content: attr(data-content-before);
    position: absolute;
    left: -1px;
    top: -1px;
    background-color: #FFD5A0;
    color: #765626;
    font-size: 22rpx;
    border-radius: 16rpx 0 16rpx 0;
    padding: 0 16rpx;
  }

  .list::after {
    content: attr(data-content-after);
    position: absolute;
    left: 0px;
    bottom: -1px;
    background-color: #FFD5A0;
    color: #765626;
    font-size: 22rpx;
    width: 100%;
    text-align: center;
    border-radius: 0 0 16rpx 16rpx;
  }

  .explain {
    font-size: 24rpx;
    opacity: 0.5;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #181818;

  .warning {
    font-size: 22rpx;
    background-color: #2A2A2A;
    padding: 16rpx 32rpx;
  }

  button {
    width: calc(100% - 64rpx);
    height: 92rpx;
    line-height: 92rpx;
    background: linear-gradient(90deg, #F3CF97 0%, #F6E5C4 100%);
    border-radius: 23px;
    color: #7C541A;
    font-size: 32rpx;
    font-weight: bold;
    margin: 32rpx auto;
  }
}
</style>