index.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. <template>
  2. <view class="my-container">
  3. <cu-custom isBack="true" bgColor="#fff">
  4. <view slot="content" style="color: #FFFFFF">4G卡详情</view>
  5. </cu-custom>
  6. <view class="my-container" v-if="iotLinkFrom">
  7. <view class="cu-bar my-bg solid-bottom margin-top">
  8. <view class="action">
  9. <text class="cuIcon-title text-orange "></text> 卡片详情
  10. </view>
  11. <view class="action">
  12. <button class="cu-btn bg-green shadow" data-target="gridModal" @click="goPackagePage">购买套餐</button>
  13. </view>
  14. </view>
  15. <view class="cu-list menu card-menu margin-top myCard">
  16. <view class="cu-item">
  17. <view class="content">
  18. <text class="text-xl">{{ dtype }}IMEI</text>
  19. </view>
  20. <view class="action">
  21. <text class="text-lg">{{ imei }}</text>
  22. </view>
  23. </view>
  24. <view class="cu-item">
  25. <view class="content">
  26. <text class="text-xl">iccid</text>
  27. </view>
  28. <view class="action">
  29. <text class="text-lg">{{ iotLinkFrom.iccid }}</text>
  30. </view>
  31. </view>
  32. <view class="cu-item">
  33. <view class="content">
  34. <text>运营商</text>
  35. </view>
  36. <view class="action">
  37. <text class="text-lg">{{ formatterType(iotLinkFrom.operators) }}</text>
  38. </view>
  39. </view>
  40. <view class="cu-item">
  41. <view class="content">
  42. <text>卡状态</text>
  43. </view>
  44. <view class="action">
  45. <text class="cu-tag round bg-olive light">{{ iotLinkFrom.status }}</text>
  46. </view>
  47. </view>
  48. <!-- <view class="cu-item">-->
  49. <!-- <view class="content">-->
  50. <!-- <text>激活时间</text>-->
  51. <!-- </view>-->
  52. <!-- <view class="action">-->
  53. <!-- <text class="text-lg">{{ iotLinkFrom.activeTime }}</text>-->
  54. <!-- </view>-->
  55. <!-- </view>-->
  56. <!-- <view class="cu-item">-->
  57. <!-- <view class="content">-->
  58. <!-- <text>生效时间</text>-->
  59. <!-- </view>-->
  60. <!-- <view class="action">-->
  61. <!-- <text class="text-lg">{{ iotLinkFrom.effectiveTime }}</text>-->
  62. <!-- </view>-->
  63. <!-- </view>-->
  64. <view class="cu-item">
  65. <view class="content">
  66. <text>过期时间</text>
  67. </view>
  68. <view class="action">
  69. <text class="text-lg">{{ iotLinkFrom.expiredTime }}</text>
  70. </view>
  71. </view>
  72. <!-- <view class="cu-item">-->
  73. <!-- <view class="content">-->
  74. <!-- <text>总流量</text>-->
  75. <!-- </view>-->
  76. <!-- <view class="action">-->
  77. <!-- <text class="text-lg">{{ iotLinkFrom.totalFlow }}MB</text>-->
  78. <!-- </view>-->
  79. <!-- </view>-->
  80. <!-- <view class="cu-item">-->
  81. <!-- <view class="content">-->
  82. <!-- <text>已使用流量</text>-->
  83. <!-- </view>-->
  84. <!-- <view class="action">-->
  85. <!-- <text class="text-lg">{{ iotLinkFrom.usedFlow }}MB</text>-->
  86. <!-- </view>-->
  87. <!-- </view>-->
  88. <!-- <view class="cu-item">-->
  89. <!-- <view class="content">-->
  90. <!-- <text>剩余流量</text>-->
  91. <!-- </view>-->
  92. <!-- <view class="action">-->
  93. <!-- <text class="text-lg">{{ iotLinkFrom.leftFlow }}MB</text>-->
  94. <!-- </view>-->
  95. <!-- </view>-->
  96. <!-- <view v-if="iotLinkFrom.totalVoice">-->
  97. <!-- <view class="cu-item">-->
  98. <!-- <view class="content">-->
  99. <!-- <text>总语音量</text>-->
  100. <!-- </view>-->
  101. <!-- <view class="action">-->
  102. <!-- <text class="text-lg">{{ iotLinkFrom.totalVoice }}分钟</text>-->
  103. <!-- </view>-->
  104. <!-- </view>-->
  105. <!-- <view class="cu-item">-->
  106. <!-- <view class="content">-->
  107. <!-- <text>使用语音量</text>-->
  108. <!-- </view>-->
  109. <!-- <view class="action">-->
  110. <!-- <text class="text-lg">{{ iotLinkFrom.usedVoice }}分钟</text>-->
  111. <!-- </view>-->
  112. <!-- </view>-->
  113. <!-- <view class="cu-item">-->
  114. <!-- <view class="content">-->
  115. <!-- <text>剩余语音量</text>-->
  116. <!-- </view>-->
  117. <!-- <view class="action">-->
  118. <!-- <text class="text-lg">{{ iotLinkFrom.residualVoice }}分钟</text>-->
  119. <!-- </view>-->
  120. <!-- </view>-->
  121. <!-- </view>-->
  122. </view>
  123. <view class="cu-bar my-bg margin-top">
  124. <view class="action">
  125. <text class="cuIcon-title text-orange "></text> 本卡套餐
  126. </view>
  127. </view>
  128. <view v-for="(item, index) in tableData" :key="index" class="cu-list menu margin-top">
  129. <view class="cu-item">
  130. <view class="content">
  131. <text class="">套餐名称</text>
  132. </view>
  133. <view class="action">
  134. <text class="text-lg">{{ item.packageName }}</text>
  135. </view>
  136. </view>
  137. <!-- <view class="cu-item">-->
  138. <!-- <view class="content">-->
  139. <!-- <text class="">套餐总流量</text>-->
  140. <!-- </view>-->
  141. <!-- <view class="action">-->
  142. <!-- <text class="text-lg">{{ item.totalFlow }}MB</text>-->
  143. <!-- </view>-->
  144. <!-- </view>-->
  145. <!-- <view class="cu-item">-->
  146. <!-- <view class="content">-->
  147. <!-- <text class="">已使用流量</text>-->
  148. <!-- </view>-->
  149. <!-- <view class="action">-->
  150. <!-- <text class="text-lg">{{ item.usedFlow }}MB</text>-->
  151. <!-- </view>-->
  152. <!-- </view>-->
  153. <!-- <view class="cu-item">-->
  154. <!-- <view class="content">-->
  155. <!-- <text class="">剩余流量</text>-->
  156. <!-- </view>-->
  157. <!-- <view class="action">-->
  158. <!-- <text class="text-lg">{{ item.leftFlow }}MB</text>-->
  159. <!-- </view>-->
  160. <!-- </view>-->
  161. <view class="cu-item">
  162. <view class="content">
  163. <text class="">购买日期</text>
  164. </view>
  165. <view class="action">
  166. <text class="text-lg">{{ formatterDate(item.payTime / 1000) }}</text>
  167. </view>
  168. </view>
  169. <view class="cu-item">
  170. <view class="content">
  171. <text class="">过期时间</text>
  172. </view>
  173. <view class="action">
  174. <text class="text-lg">{{ formatterDate(item.expireTime / 1000) }}</text>
  175. </view>
  176. </view>
  177. <view class="cu-item">
  178. <view class="content">
  179. <text class="">使用状态</text>
  180. </view>
  181. <view class="action">
  182. <text class="cu-tag round bg-green light">{{ formatterStatus(item.status) }}</text>
  183. </view>
  184. </view>
  185. </view>
  186. </view>
  187. <view v-else>
  188. <view class="uni-padding-wrap" style="margin-top: 150upx">
  189. <text class="word-btn-white text-white">暂无记录</text>
  190. <br/>
  191. </view>
  192. </view>
  193. </view>
  194. </template>
  195. <script>
  196. import * as Foundation from '@/ui-utils/Foundation'
  197. import * as API_IOT_LINK from './index.js'
  198. export default {
  199. name: 'index',
  200. data() {
  201. return {
  202. iotLinkFrom: null,
  203. tableData: [],
  204. imei: '',
  205. dtype: null
  206. }
  207. },
  208. onLoad(option) {
  209. const { imei, dtype } = option
  210. console.log('option==', option)
  211. this.imei = imei
  212. this.dtype = dtype
  213. this.API_getDetails(imei)
  214. },
  215. methods: {
  216. API_getDetails(imei) {
  217. const _this = this
  218. API_IOT_LINK.getDetailsByImei(imei).then(res => {
  219. if (res.success) {
  220. _this.iotLinkFrom = res.data
  221. if (res.data) {
  222. _this.tableData = JSON.parse(res.data.packageList)
  223. }
  224. } else {
  225. uni.showToast({
  226. title: res.message,
  227. icon: 'none',
  228. duration: 5000
  229. })
  230. }
  231. })
  232. },
  233. formatterType(value) {
  234. switch (value) {
  235. case 1:
  236. return '电信'
  237. case 2:
  238. return '移动'
  239. case 3:
  240. return '联通'
  241. case 4:
  242. return '聚合卡'
  243. default:
  244. return '未知'
  245. }
  246. },
  247. formatterDate(time) {
  248. return Foundation.unixToDate(time)
  249. },
  250. formatterStatus(value) {
  251. switch (value) {
  252. case 0:
  253. return '未生效'
  254. case 1:
  255. return '生效中'
  256. case 2:
  257. return '已失效'
  258. case 3:
  259. return '已过期'
  260. case 4:
  261. return '已退款'
  262. default:
  263. return '其他'
  264. }
  265. },
  266. goPackagePage() {
  267. uni.navigateTo({
  268. url: '/pages/log/iot/iot-package/index?operators=' + this.iotLinkFrom.operators + '&iccid=' + this.iotLinkFrom.iccid + '&dtype=' + this.dtype
  269. })
  270. }
  271. }
  272. }
  273. </script>
  274. <style scoped>
  275. .my-container {
  276. width: 100%;
  277. height: 100%;
  278. position: relative;
  279. background: linear-gradient(90deg, rgba(5, 96, 232, 1) 0%, rgba(100, 158, 245, 1) 100%);
  280. color: white;
  281. }
  282. .cu-item {
  283. background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #2cc9e5 100%);
  284. }
  285. .my-bg {
  286. background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #2cc9e5 100%);
  287. }
  288. .cu-list.menu>.cu-item.arrow:before {
  289. color: white;
  290. }
  291. </style>