no message

src/api/pay.js

@@ -14,4 +14,31 @@ export function wechatPay(data) {
     url: `/wxPay/webPay?openId=${data}`,
     method: 'post'
   })
+}
+
+// 流量信息
+export function detail(data) {
+  return request({
+    url: `/order/4G/cmpForward`,
+    method: 'get',
+    data
+  })
+}
+
+// 流量套餐
+export function options(data){
+  return request({
+    url: `/order/4G/dataPlanList`,
+    method: 'get',
+    data
+  })
+}
+
+// 充值记录
+export function list(data) {
+  return request({
+    url: `/order/4G/orderGet`,
+    mthod: 'get',
+    data
+  })
 }

src/main.js

@@ -3,6 +3,7 @@ import App from './App'
 import axios from 'axios'
 import openApp from './utils/openApp'
 import VConsole from 'vconsole'
+import { parseTime } from './utils/parseTime'
 
 Vue.config.productionTip = false
 
@@ -10,6 +11,7 @@ Vue.prototype.$axios = axios
 
 // 打开App
 Vue.prototype.openApp = openApp
+Vue.prototype.parseTime = parseTime
 
 if (process.env.VUE_APP_ENV !== 'production') {
   Vue.prototype.vconsole = new VConsole()

src/pages.json

@@ -189,6 +189,14 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{	
+			// 开通记录
+			"path": "pages/pay/detail",
+			"style": {
+				"navigationStyle": "custom",
+				"onReachBottomDistance": 50
+			}
 		}
 	]
 }

src/pages/pay/detail.vue

@@ -0,0 +1,97 @@
+<template>
+  <view class='app-container'>
+    <view class="list" v-for="item in tableData" :key="item.orderId">
+      <view class="name" flex between>
+        <view>
+          <text>{{ item.name }}-流量包</text>
+          <text :class="['flow-status', item.flowStatus === 0 ? 'used' : item.flowStatus === 1 ? 'unused' : 'over']">
+            {{ options[item.flowStatus] }}
+          </text>
+        </view>
+        <view>￥{{ item.goodDiscountedPrice }}</view>
+      </view>
+      <view class="time" flex between>
+        <view>购买时间：{{ parseTime(item.orderTimeStr, '{y}-{m}-{d}') }}</view>
+        <view>到期时间：{{ parseTime(item.expirationTime, '{y}-{m}-{d}') }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { list } from "@/api/pay.js"
+export default {
+  data() {
+    return {
+      form: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      tableData: [],
+      options: {
+        0: '已生效',
+        1: '待生效',
+        2: '已失效'
+      }
+    }
+  },
+  onLoad(e) {
+    this.form.state = e.state
+    this.getList()
+  },
+  methods: {
+    getList() {
+      list(this.form).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          this.hasMore = res.data.hasMore
+        }
+      })
+    }
+  },
+  onReachBottom() {
+    if (this.hasMore) {
+      this.form.pageNum++
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scope>
+.list {
+  padding: 32rpx;
+  background: rgba(255, 255, 255, 0.05);
+  margin-bottom: 12rpx;
+  border-radius: 16rpx;
+}
+
+.name {
+  font-size: 28rpx;
+  margin-bottom: 12rpx;
+}
+
+.time {
+  font-size: 22rpx;
+  opacity: 0.5;
+}
+
+.flow-status {
+  font-size: 20rpx;
+  border-radius: 16rpx;
+  padding: 0 12rpx;
+  margin-left: 10rpx;
+}
+
+.used {
+  background: linear-gradient(180deg, #A4D099 0%, #78B06A 100%);
+}
+
+.unused {
+  background: rgba(153, 153, 153, 1);
+}
+
+.over {
+  background: rgba(83, 83, 83, 1);
+}
+</style>

src/pages/pay/index.vue

@@ -2,28 +2,30 @@
   <view class='app-container'>
     <view class="header">
       <view class="info" flex>
-        <img class="dev-img" src="../../static/logo.png" />
+        <img class="dev-img" :src="info.devicePic" />
         <view class="dev" flex column>
-          <view class="dev-name">123</view>
-          <view class="dev-history">开通记录<uni-icons type="right" color="#9fa5ad" size="11" /></view>
+          <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="50" activeColor="#FFD5A0" backgroundColor="#746C64" border-radius="20" />
+        <progress :percent="percent" activeColor="#FFD5A0" backgroundColor="#746C64" border-radius="20" />
         <view class="progress-info" flex between>
-          <text>已用：xxxM/剩余：xxxM</text>
-          <text>总量：1GB</text>
+          <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' : '']" v-for="(item, index) in options" :key="index" flex
-          column between @click="getActive(index)">
-          <view class="flow">{{ item.flow }}GB</view>
-          <view class="discount icon">{{ item.discount }}</view>
-          <view class="price icon">{{ item.price }}</view>
+        <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(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>
@@ -43,33 +45,30 @@
 </template>
 
 <script>
-import { openId, wechatPay } from "@/api/pay"
+import { openId, wechatPay, detail, options } from "@/api/pay"
 export default {
   data() {
     return {
       openId: '',
+      // 流量信息
+      info: {},
+      rateplan: {},
+      // 已用流量
+      percent: 0,
       // 下单表单
       form: {},
       // 流量选择
-      options: [{
-        flow: 10,
-        price: 29,
-        discount: 20
-      }, {
-        flow: 20,
-        price: 49,
-        discount: 40
-      }, {
-        flow: 30,
-        price: 69,
-        discount: 60
-      }],
+      options: [],
       // 选择
-      active: 0
+      active: 0,
+      state: ''
     }
   },
   onLoad(e) {
+    this.state = e.state
     this.getOpenId(e)
+    this.getDetail(e)
+    this.getOptions(e)
   },
   methods: {
     // 获取openId
@@ -81,6 +80,25 @@ export default {
       })
     },
 
+    // 流量信息
+    getDetail(e) {
+      detail({ state: e.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(e) {
+      options({ state: e.state }).then(res => {
+        this.options = res.data
+        res.data.map(i => document.documentElement.style.setProperty('——operators', i.operators))
+      })
+    },
+
     // 选择套餐
     getActive(index) {
       this.active = index
@@ -89,7 +107,6 @@ export default {
     // 下单
     getWechatPay() {
       wechatPay(this.openId).then(res => {
-        console.log(JSON.parse(res.data));
         if (res.code === 0) {
           this.form = JSON.parse(res.data)
           if (typeof WeixinJSBridge == 'undefined') {
@@ -113,6 +130,14 @@ export default {
           // 支付成功刷新页面
         }
       })
+    },
+
+    // 开通记录
+    getRouter() {
+      console.log(1);
+      uni.navigateTo({
+        url: `/pages/pay/detail?state=${this.state}`,
+      })
     }
   }
 }
@@ -176,12 +201,11 @@ export default {
 .main {
   padding: 0 32rpx;
 
-  .active{
+  .active {
     background-color: rgba(199, 170, 134, 0.12);
   }
 
   .list {
-    width: calc(100% / 3 - 20rpx);
     height: 268rpx;
     border: 1px solid #C7AA86;
     border-radius: 16rpx;
@@ -211,7 +235,7 @@ export default {
   }
 
   .list::before {
-    content: '联通';
+    content: attr(data-content-before);
     position: absolute;
     left: -1px;
     top: -1px;
@@ -223,7 +247,7 @@ export default {
   }
 
   .list::after {
-    content: '限时优惠';
+    content: attr(data-content-after);
     position: absolute;
     left: 0px;
     bottom: -1px;

src/utils/parseTime.js

@@ -0,0 +1,40 @@
+// 日期格式化
+export function parseTime(time, pattern) {
+  if (arguments.length === 0 || !time) {
+    return null
+  }
+  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
+    } else if (typeof time === 'string') {
+      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
+    }
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}