|
|
@@ -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>
|
loop
Damon