feat: 增加腾讯支付界面

src/pages/pay/tencent.vue

@@ -0,0 +1,577 @@
+<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>