no message

src/api/pay.js

@@ -42,4 +42,13 @@ export function list(data) {
     mthod: 'get',
     data
   })
+}
+
+// 流量列表
+export function order(data) {
+  return request({
+    url: `/order/4G/deviceTrafficOrderList`,
+    method: 'get',
+    data
+  })
 }

src/common/main.scss

@@ -69,4 +69,10 @@ textarea{
 
 uni-modal{
   color: #000;
+}
+
+.owt{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }

src/pages/pay/index.vue

@@ -1,12 +1,12 @@
 <template>
   <view class='app-container' flex column>
-    <view class="header">
+    <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">{{ info.deviceName }}</view>
+          <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>
@@ -17,14 +17,27 @@
           <text>总量：{{ this.rateplan.total / 1024 }}G</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 between>
+            <text>待生效流量套餐</text>
+            <text>总量：xxGB</text>
+            <text>{{ item.dayStr }}</text>
+          </view>
+        </view>
+      </view>
     </view>
     <view class="main">
-      <view class="title">流量选择</view>
+      <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"
           :data-content-after="item.tagName">
-          <view class="flow">{{ item.name }}</view>
+          <view class="flow owt">{{ item.name }}</view>
           <view class="discount icon">{{ item.goodDiscountedPrice }}</view>
           <view class="price icon">{{ item.goodPrice }}</view>
         </view>
@@ -32,21 +45,35 @@
       <view class="explain" flex column>
         <text>说明：</text>
         <text>1、当前流量包购买后，将充值至猫王音响赠送的SIM卡内</text>
-        <text>2、流量包购买后当日生效</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>
 </template>
 
 <script>
-import { openId, wechatPay, detail, options } from "@/api/pay"
+import { openId, wechatPay, detail, options, order } from "@/api/pay"
 export default {
   data() {
     return {
@@ -63,7 +90,9 @@ export default {
       active: 0,
       // 流量套餐id
       goddsId: 0,
-      state: ''
+      state: '',
+      // 待生效流量
+      orderList: []
     }
   },
   onLoad(e) {
@@ -71,6 +100,7 @@ export default {
     this.getOpenId(e)
     this.getDetail()
     this.getOptions()
+    this.getOrder()
   },
   methods: {
     // 获取openId
@@ -93,6 +123,15 @@ export default {
       })
     },
 
+    // 流量列表
+    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 => {
@@ -134,6 +173,16 @@ export default {
       })
     },
 
+    // 弹窗
+    getOpen() {
+      this.$refs.popup.open()
+    },
+
+    // 关闭
+    getClose() {
+      this.$refs.popup.close()
+    },
+
     // 调起支付
     onBridgeReady() {
       WeixinJSBridge.invoke('getBrandWCPayRequest', this.form, function (res) {
@@ -165,6 +214,8 @@ export default {
   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;
@@ -179,11 +230,13 @@ export default {
     }
 
     .dev {
+      width: calc(590rpx - 130rpx);
       margin-top: 88rpx;
       margin-left: 24rpx;
 
       .dev-name {
         font-size: 32rpx;
+        margin-bottom: 8rpx;
       }
 
       .dev-history {
@@ -195,7 +248,7 @@ export default {
 
   .progress {
     width: 100%;
-    margin-top: 48rpx;
+    margin-bottom: 16rpx;
 
     ::v-deep uni-progress,
     .progress-info {
@@ -215,11 +268,20 @@ export default {
   }
 }
 
+.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);
   }
@@ -229,13 +291,15 @@ export default {
     height: 268rpx;
     border: 1px solid #C7AA86;
     border-radius: 16rpx;
-    padding: 48rpx 0;
+    padding: 48rpx 10px;
     color: #FFD5A0;
     position: relative;
     margin: 24rpx 5px 0;
 
     .flow {
-      font-size: 32rpx;
+      width: 100%;
+      font-size: 28rpx;
+      text-align: center;
     }
 
     .discount {
@@ -297,19 +361,41 @@ export default {
     background-color: #2A2A2A;
     padding: 16rpx 32rpx;
   }
+}
 
-  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;
+.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>