ohplay_h5/src/pages/pay/tencent.vue

<template>
  <view class="app-container" flex column>
    <view :class="['header', orderList.length > 0 ? 'header-bg' : '']">
      <view class="info" flex>
        <view class="dev-img" flex center>
          <img :src="info.devicePic" />
        </view>
        <view class="dev" flex column>
          <view class="dev-name owt">{{ 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>
          <view>
            <text
              >剩余：{{ (this.rateplan.left / 1024).toFixed(2) }}GB / 总量：{{
                (this.rateplan.total / 1024).toFixed(2)
              }}GB
            </text>
            <text style="margin-left: 10px">{{ this.rateplan.dayStr }}</text>
          </view>
          <text>已用：{{ (this.rateplan.used / 1024).toFixed(2) }}GB</text>
        </view>
      </view>
      <view v-if="orderList.length > 0">
        <view
          class="progress"
          flex
          column
          center
          v-for="item in orderList"
          :key="item.orderId"
        >
          <progress
            activeColor="#FFD5A0"
            backgroundColor="#746C64"
            border-radius="20"
          />
          <view class="progress-info" flex>
            <view>
              <text>待生效流量套餐</text>
              <text style="margin-left: 10px"
                >总量：{{ (item.total / 1024 / 1024).toFixed(2) }}GB</text
              >
            </view>
            <text style="margin-left: 10px">{{ item.dayStr }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <!--      <button class="button popup-success" @click="getNewAcitivityDetail()">-->
      <!--        <text-->
      <!--            class="button-text success-text">领取福利-->
      <!--        </text>-->
      <!--      </button>-->
      <view class="title" flex>
        <text>流量选择</text>
        <uni-icons
          type="help"
          color="#828282"
          style="margin-left: 4px"
          @click="getOpen"
        />
      </view>
      <view flex wrap>
        <view
          :class="['list', active === index ? 'active' : '']"
          v-for="(item, index) in options"
          :key="index"
          flex
          column
          between
          @click="getActive(item, index)"
          :data-content-before="item.operators"
        >
          <view class="flow owt">{{ item.name }}</view>
          <view class="discount icon">{{ item.goodDiscountedPrice }}</view>
          <view class="price icon">{{ item.goodPrice }}</view>
          <view v-if="item.tagName" class="tag-name">{{ item.tagName }}</view>
        </view>
      </view>
      <view class="explain" flex column>
        <text>说明：</text>
        <text>1、当前流量包购买后，将充值至猫王音响赠送的SIM卡内</text>
        <text
          >2、预充值流量因运营商结算时效，上一个流量包使用完后1小时
          内生效，如有疑问，请咨询客服。</text
        >
        <text>3、如在有效期内流量未使用完毕，流量将被清零</text>
      </view>
    </view>
    <view class="footer">
      <view class="warning">
        开通后仅支持在当前绑定的猫王音响上通过移动数据模式使用，不支持蓝牙模式
      </view>
      <button @click="getWechatPay">立即购买</button>
    </view>

    <!-- 弹窗 -->
    <uni-popup
      ref="popup"
      type="bottom"
      border-radius="10px 10px 10px 10px"
      background-color="#2a2a2a"
    >
      <view class="popup">
        <view class="title">购买须知</view>
        <view class="content">
          <h4>
            1.
            支付完成后，若当前没有生效中的套餐，套餐立即生效，若当前有生效中未使用完套餐，购买套餐进入流量套餐队列，待上一个套餐失效后激活生效。
          </h4>
          <h4>2. 此卡充值流量套餐后，仅限当前设备使用。</h4>
          <h4>3. 此套餐为虚拟产品，购买后不支持退款。</h4>
          <h4>
            4. 客服微信：miao friend
            ，有任何问题请添加客服微信，我们将耐心为您解决问题。
          </h4>
        </view>
        <button @click="getClose">我知道了</button>
      </view>
    </uni-popup>

    <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog
          :showClose="showClose"
          :type="msgType"
          cancelText="不领取"
          confirmText="领取"
          title="福利通知"
          content="您当前有一个流量领取福利！"
          @confirm="dialogConfirm"
          @close="dialogClose"
        ></uni-popup-dialog>
      </uni-popup>
    </view>
    <view>
      <!-- 提示信息弹窗 -->
      <uni-popup ref="message" type="message">
        <uni-popup-message
          :type="msgType"
          :message="messageText"
          :duration="2000"
        ></uni-popup-message>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import {
detail,
newAcitivityDetail,
openId,
options,
order,
wechatPay,
} from "@/api/pay";

export default {
  data() {
    return {
      isWeixin: false,
      type: "center",
      msgType: "success",
      messageText: "这是一条成功提示",
      value: "",
      showClose: false,
      // 流量信息
      info: {},
      rateplan: {},
      // 已用流量
      percent: 0,
      // 下单表单
      form: {},
      // 流量选择
      options: [],
      // 选择
      active: 0,
      // 流量套餐id
      goddsId: 0,
      state: "",
      // 待生效流量
      orderList: [],
      isReceive: false,
      description: "",
      id: "",
      name: "",
      pic: "",
    };
  },

  onLoad(e) {
    // this.detectWeixin();
    // if (!this.isWeixin){
    //   // 跳转到微信页面
    //   uni.navigateTo({
    //     url: `/pages/weixin/index`,
    //   });
    // }

    this.state = e.state;
    this.getOpenId(e);
    this.getDetail();
    this.getOptions();
    this.getOrder();
    this.getNewAcitivityDetail();
  },
  methods: {
    // detectWeixin() {
    //   let userAgent = navigator.userAgent;
    //   if (userAgent.includes("MicroMessenger")) {
    //     this.isWeixin = true
    //   } else {
    //     this.isWeixin = false
    //   }
    // },
    // 联通流量详细信息
    getNewAcitivityDetail() {
      newAcitivityDetail({
        state: this.state,
      }).then((res) => {
        console.log("asdfqwerqrqr====" + JSON.stringify(res));
        if (res.code === 0) {
          this.isReceive = res.data.isReceive;
          this.id = res.data.id;
          this.name = res.data.name;
          this.pic = res.data.pic;
          this.description = res.data.description;

          // 可以领取
          if (res.data.isReceive) {
            this.msgType = "success";
            this.$refs.alertDialog.open();
          } else {
            // uni.showToast({
            //   title: res.data.msg,
            //   icon: "none",
            //   mask: true,
            //   duration: 4000,
            // });
          }
        } else {
          // uni.showToast({
          //   title: res.message,
          //   icon: "none",
          //   mask: true,
          //   duration: 4000,
          // });
        }
      });
    },

    dialogConfirm() {
      this.messageText = `点击确认了 ${this.msgType} 窗口`;
      this.$refs.alertDialog.close();
      // 跳转到活动页面
      uni.navigateTo({
        url: `/pages/activity/new?state=${this.state}&id=${this.id}&pic=${this.pic}`,
      });
    },
    dialogClose() {
      // alert("关闭")
    },

    // 获取openId
    getOpenId(e) {
      openId(e.code).then((res) => {
        if (res.code === 0) {
          uni.setStorageSync("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;
        }
      });
    },

    // 流量列表
    getOrder() {
      order({ state: this.state }).then((res) => {
        if (res.code === 0) {
          this.orderList = res.data.filter((i) => i.status === 1).splice(0, 2);
        }
      });
    },

    // 流量套餐
    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: uni.getStorageSync("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();
          }
        }
      });
    },
    // 弹窗
    getOpen() {
      this.$refs.popup.open();
    },
    // 关闭
    getClose() {
      this.$refs.popup.close();
    },
    // 调起支付
    onBridgeReady() {
      WeixinJSBridge.invoke("getBrandWCPayRequest", this.form, function (res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          // 支付成功刷新页面
          location.reload();
        }
      });
    },
    // 开通记录
    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 {
    margin-bottom: 38rpx;

    .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 {
      width: calc(590rpx - 130rpx);
      margin-top: 88rpx;
      margin-left: 24rpx;

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

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

  .progress {
    width: 100%;
    margin-bottom: 16rpx;

    ::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;
    }
  }
}

.header-bg {
  height: 510rpx;
  background: url("../../static/pay/bigbg.png") no-repeat 100% / 100%;
}

.main {
  flex: 1;
  padding: 0 32rpx;
  margin-bottom: 320rpx;

  .title {
    align-items: center;
  }

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

  .list {
    width: calc(100% / 3 - 10px);
    height: 268rpx;
    border: 1px solid #c7aa86;
    border-radius: 16rpx;
    padding: 48rpx 10px;
    color: #ffd5a0;
    position: relative;
    margin: 24rpx 5px 0;

    .flow {
      width: 100%;
      font-size: 28rpx;
      text-align: center;
    }

    .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;
  }

  .tag-name {
    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;
    margin-top: 24rpx;
  }
}

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

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

.popup {
  padding: 20px 24px 0;

  .title {
    text-align: center;
    font-size: 18px;
  }

  .content {
    padding: 16px 0 0 0;
    font-size: 14px;
    margin-bottom: 64rpx;

    h4 {
      font-weight: 100;
      line-height: 20px;
      margin-bottom: 10px;
    }
  }
}

button {
  width: calc(100% - 64rpx);
  height: 92rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #f3cf97 0%, #f6e5c4 100%);
  border-radius: 23px;
  color: #7c541a;
  font-size: 32rpx;
  font-weight: bold;
  margin: 32rpx auto;
}
</style>