瀏覽代碼

add:云机转移时长活动页

leo 1 年之前
父節點
當前提交
23eab00ba7

+ 1 - 0
nuxt.config.js

@@ -84,6 +84,7 @@ export default {
     '~/plugins/jweixin',
     // '~/plugins/umeng-datasources',
     '@/plugins/vant',
+    '~/plugins/common'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

+ 33 - 8
package-lock.json

@@ -11,6 +11,7 @@
         "@nuxtjs/auth-next": "5.0.0-1648802546.c9880dc",
         "@nuxtjs/axios": "^5.13.6",
         "axios": "^0.27.2",
+        "bignumber.js": "^9.1.2",
         "callapp-lib": "^3.5.2",
         "clipboard": "^2.0.11",
         "clipboard-polyfill": "^4.0.0-rc1",
@@ -20,6 +21,7 @@
         "dayjs": "^1.11.3",
         "format-number": "^3.0.0",
         "jmuxer": "^2.0.4",
+        "js-sha256": "^0.10.1",
         "jsencrypt": "^3.2.1",
         "jweixin-module": "^1.6.0",
         "nativeshare": "^2.1.5",
@@ -5324,10 +5326,9 @@
       }
     },
     "node_modules/bignumber.js": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmmirror.com/bignumber.js/-/bignumber.js-2.4.0.tgz",
-      "integrity": "sha512-uw4ra6Cv483Op/ebM0GBKKfxZlSmn6NgFRby5L3yGTlunLj53KQgndDlqy2WVFOwgvurocApYkSud0aO+mvrpQ==",
-      "dev": true,
+      "version": "9.1.2",
+      "resolved": "https://registry.npmmirror.com/bignumber.js/-/bignumber.js-9.1.2.tgz",
+      "integrity": "sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==",
       "engines": {
         "node": "*"
       }
@@ -11746,6 +11747,15 @@
         "url-regex": "^3.0.0"
       }
     },
+    "node_modules/jimp/node_modules/bignumber.js": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/bignumber.js/-/bignumber.js-2.4.0.tgz",
+      "integrity": "sha512-uw4ra6Cv483Op/ebM0GBKKfxZlSmn6NgFRby5L3yGTlunLj53KQgndDlqy2WVFOwgvurocApYkSud0aO+mvrpQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/jimp/node_modules/file-type": {
       "version": "3.9.0",
       "resolved": "https://registry.npmmirror.com/file-type/-/file-type-3.9.0.tgz",
@@ -11805,6 +11815,11 @@
       "integrity": "sha512-Ni9PffhJtYtdD7VwxH6V2MnievekGfUefosGCHadog0/jAevRu6HPjYeMHbUemn0IPE8d4wGa8UsOGsX+iKy2g==",
       "dev": true
     },
+    "node_modules/js-sha256": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmmirror.com/js-sha256/-/js-sha256-0.10.1.tgz",
+      "integrity": "sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -26262,10 +26277,9 @@
       "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
     },
     "bignumber.js": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmmirror.com/bignumber.js/-/bignumber.js-2.4.0.tgz",
-      "integrity": "sha512-uw4ra6Cv483Op/ebM0GBKKfxZlSmn6NgFRby5L3yGTlunLj53KQgndDlqy2WVFOwgvurocApYkSud0aO+mvrpQ==",
-      "dev": true
+      "version": "9.1.2",
+      "resolved": "https://registry.npmmirror.com/bignumber.js/-/bignumber.js-9.1.2.tgz",
+      "integrity": "sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug=="
     },
     "binary-extensions": {
       "version": "2.2.0",
@@ -31361,6 +31375,12 @@
         "url-regex": "^3.0.0"
       },
       "dependencies": {
+        "bignumber.js": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmmirror.com/bignumber.js/-/bignumber.js-2.4.0.tgz",
+          "integrity": "sha512-uw4ra6Cv483Op/ebM0GBKKfxZlSmn6NgFRby5L3yGTlunLj53KQgndDlqy2WVFOwgvurocApYkSud0aO+mvrpQ==",
+          "dev": true
+        },
         "file-type": {
           "version": "3.9.0",
           "resolved": "https://registry.npmmirror.com/file-type/-/file-type-3.9.0.tgz",
@@ -31406,6 +31426,11 @@
       "integrity": "sha512-Ni9PffhJtYtdD7VwxH6V2MnievekGfUefosGCHadog0/jAevRu6HPjYeMHbUemn0IPE8d4wGa8UsOGsX+iKy2g==",
       "dev": true
     },
+    "js-sha256": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmmirror.com/js-sha256/-/js-sha256-0.10.1.tgz",
+      "integrity": "sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",

+ 2 - 0
package.json

@@ -24,6 +24,7 @@
     "@nuxtjs/auth-next": "5.0.0-1648802546.c9880dc",
     "@nuxtjs/axios": "^5.13.6",
     "axios": "^0.27.2",
+    "bignumber.js": "^9.1.2",
     "callapp-lib": "^3.5.2",
     "clipboard": "^2.0.11",
     "clipboard-polyfill": "^4.0.0-rc1",
@@ -33,6 +34,7 @@
     "dayjs": "^1.11.3",
     "format-number": "^3.0.0",
     "jmuxer": "^2.0.4",
+    "js-sha256": "^0.10.1",
     "jsencrypt": "^3.2.1",
     "jweixin-module": "^1.6.0",
     "nativeshare": "^2.1.5",

+ 150 - 49
pages/transferDuration/components/comoros.vue

@@ -3,20 +3,23 @@
         <div @click="visibleFun">
             <slot>
                 <div class="comoros-input">
-                    <div v-if="true" class="comoros-input-empty">
+                    <div v-if="!Object.keys(data).length" class="comoros-input-empty">
                         <div>选择云手机</div>
                         <img src="@/assets/image/transferDuration/arrow-right.png" alt="" class="comoros-input-empty-img" />
                     </div>
                     <div v-else>
                         <div class="comoros-list-item_left" style="margin: 0 12px;">
-                            <img :src="require(`@/assets/image/transferDuration/${img}.png`)" alt=""
+                            <img :src="require(`@/assets/image/transferDuration/${data.buyVipType}_icon.png`)" alt=""
                                 class="comoros-list-item_left-img" />
                             <div>
-                                <div class="comoros-list-item_left-title">123456</div>
-                                <div class="comoros-list-item_left-tips red-time">
-                                    <img src="@/assets/image/transferDuration/phone_time.png" alt=""
-                                        class="tips-img">剩一天23小时
+                                <div class="comoros-list-item_left-title">{{ data.diskName }}</div>
+                                <div v-if="data.userCardType === 1" class="comoros-list-item_left-tips">
+                                    剩{{ timeStamp(data.validTime, item.userCardType) }}
                                 </div>
+                                <div v-else-if="data.validTime > 0"
+                                    :class="['comoros-list-item_left-tips', { 'red-time': item.validTime <= 4320 }]">
+                                    剩{{ timeStamp(data.validTime, data.userCardType) }}</div>
+                                <div v-else class="comoros-list-item_left-tips red-time">已过期</div>
                             </div>
                         </div>
                     </div>
@@ -29,26 +32,32 @@
                     <div>请选择云手机</div>
                 </div>
                 <div class="comoros-list-container">
-                    <van-radio-group v-model="id" ref="checkboxGroup">
-                        <div v-for="item in 20" :key="item" class="comoros-list-item">
+                    <van-checkbox-group v-model="id" ref="checkboxGroup" v-if="filterTransferPhoneList.length">
+                        <div v-for="item in filterTransferPhoneList" :key="item.id" class="comoros-list-item">
                             <div class="comoros-list-item_left">
-                                <img :src="require(`@/assets/image/transferDuration/${img}.png`)" alt=""
+                                <img :src="require(`@/assets/image/transferDuration/${item.buyVipType}_icon.png`)" alt=""
                                     class="comoros-list-item_left-img" />
                                 <div>
-                                    <div class="comoros-list-item_left-title">123456</div>
-                                    <div class="comoros-list-item_left-tips red-time">
-                                        <img src="@/assets/image/transferDuration/phone_time.png" alt=""
-                                            class="tips-img">剩一天23小时
+                                    <div class="comoros-list-item_left-title">{{ item.diskName }}</div>
+                                    <div v-if="item.userCardType === 1" class="comoros-list-item_left-tips">
+                                        剩{{ timeStamp(item.validTime, item.userCardType) }}
                                     </div>
+                                    <div v-else-if="item.validTime > 0"
+                                        :class="['comoros-list-item_left-tips', { 'red-time': item.validTime <= 4320 }]">
+                                        剩{{ timeStamp(item.validTime, item.userCardType) }}</div>
+                                    <div v-else class="comoros-list-item_left-tips red-time">已过期</div>
                                 </div>
                             </div>
-                            <div class="comoros-list-item_right"><van-radio :name="item" shape="square"
-                                    icon-size="15px"></van-radio></div>
+                            <div class="comoros-list-item_right"><van-checkbox :name="item.id" shape="square"
+                                    icon-size="15px" @click="changeCheckbox(item)"></van-checkbox></div>
                         </div>
-                    </van-radio-group>
+                    </van-checkbox-group>
+                    <div v-else style="height: 100%;display: flex;align-self: center;justify-content: center;">
+                        <van-empty description="暂时没有数据哦~"></van-empty>
+                    </div>
                 </div>
                 <div class="comoros-list-btn">
-                    <van-button type="info" block>确认</van-button>
+                    <van-button type="info" block :disabled="!id.length" @click="confirm">确认</van-button>
                 </div>
             </div>
         </van-popup>
@@ -58,26 +67,81 @@
 <script>
 export default {
     name: 'comoros',
+    props: {
+        // 云机数据
+        transferPhoneList: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        // 已选择的云机类型
+        buyVipType: {
+            type: String,
+            default: ''
+        },
+
+        // 过滤类型
+        filterType: {
+            type: String,
+            default: ''
+        },
+
+        value: {
+            type: [String, Number],
+            default: ''
+        },
 
+        // 不能勾选需要过滤的云机
+        disabledId: {
+            type: [String, Number],
+            default: ''
+        },
+        // 云机名字
+        name: {
+            type: String,
+            default: ''
+        },
+        // distinguishBool  false是减少、true是增加时长云机列表
+        distinguishBool: {
+            type: Boolean,
+            default: false
+        },
+        dayTime: {
+            type: [String, Number],
+            default: ''
+        }
+    },
     data() {
         return {
+            // 显示弹窗
             visible: false,
-            checkedAll: false,
-            img: 'STAR_icon',
-            id: ''
+            // 选中的数据
+            id: [],
+            // vip类型
+            vipType: '',
+            data: {},
+            item: {}
         };
     },
-
-    mounted() {
-
+    computed: {
+        // 过滤云机
+        filterTransferPhoneList() {
+            return this.transferPhoneList.filter(item => {
+                if (this.distinguishBool) {
+                    return this.filterType ? this.disabledId !== item.id : true
+                } else {
+                    return this.dayTime ? item.validTime > +this.dayTime : true
+                }
+            })
+        }
     },
-
     methods: {
-        checkedAllFun(bool) {
-            this.$refs.checkboxGroup.toggleAll(bool)
-        },
+        // 点击显示弹框
         visibleFun() {
             this.visible = true
+            this.id = this.value ? [this.value] : []
+            this.vipType = this.buyVipType
             setTimeout(() => {
                 const documents = document.getElementsByClassName('comoros-list-container')
                 const length = documents.length
@@ -85,6 +149,43 @@ export default {
                     documents[i].scrollTop = 0
                 }
             })
+        },
+        // 转化时长
+        timeStamp(StatusMinute, userCardType, nextSendTime) {
+            var day = parseInt(StatusMinute / 60 / 24);
+            var hour = parseInt((StatusMinute / 60) % 24);
+            var min = parseInt(StatusMinute % 60);
+            StatusMinute = '';
+            if (day > 0) {
+                StatusMinute = day + '天';
+            }
+            if (hour > 0) {
+                StatusMinute += hour + '小时';
+            }
+            if (day === 0 && min > 0) {
+                StatusMinute += parseFloat(min) + '分钟';
+            }
+            return StatusMinute.length ? StatusMinute : userCardType === 1 ? '0小时' : '';
+        },
+        // 点击复选框触发
+        changeCheckbox(data) {
+            if (!this.id.length) return
+            if (this.id.includes(data.id)) {
+                this.id = []
+            }
+            this.id = [data.id]
+            this.vipType = data.buyVipType
+            this.item = data
+        },
+
+        // 确认选择云机
+        confirm() {
+            this.visible = false
+            this.$emit('input', this.id[0])
+            this.$emit('update:buyVipType', this.vipType)
+            this.data = this.item
+            this.$emit('update:name', this.item.diskName)
+            this.$emit('confirm')
         }
     },
 };
@@ -165,36 +266,36 @@ export default {
 
 
 .comoros-list-item_left {
-        display: flex;
+    display: flex;
+    vertical-align: middle;
+    font-size: 14px;
+    line-height: 18px;
+
+    .comoros-list-item_left-img {
+        width: 34px;
+        height: 34px;
         vertical-align: middle;
-        font-size: 14px;
-        line-height: 18px;
+        margin-right: 8px;
+    }
 
-        .comoros-list-item_left-img {
-            width: 34px;
-            height: 34px;
+    .comoros-list-item_left-tips {
+        &>img {
+            width: 12px;
+            height: 12px;
+            margin-bottom: 2px;
+            margin-right: 5px;
             vertical-align: middle;
-            margin-right: 8px;
         }
 
-        .comoros-list-item_left-tips {
-            &>img {
-                width: 12px;
-                height: 12px;
-                margin-bottom: 2px;
-                margin-right: 5px;
-                vertical-align: middle;
-            }
-
-            font-size: 12px;
-            font-weight: 100;
-            vertical-align: middle;
+        font-size: 12px;
+        font-weight: 100;
+        vertical-align: middle;
 
-            &.red-time {
-                color: #F04646;
-            }
+        &.red-time {
+            color: #F04646;
         }
     }
+}
 
 ::v-deep .van-popup {
     background: transparent;

+ 180 - 25
pages/transferDuration/components/tansferDuration.vue

@@ -3,55 +3,57 @@
         <div>
             <div>减少时长的云机</div>
             <div>
-                <comoros />
+                <comoros :key="transferUserCardKey" :dayTime="countObj.transferMinDay" :transferPhoneList="transferPhoneList" :buyVipType.sync="buyVipType"
+                    v-model="params.transferUserCardId" :name.sync="transferUserCardName" @confirm="comorosConfirm" />
             </div>
         </div>
         <div class="transfer-item">
             <div>增加时长的云机</div>
             <div>
-                <comoros />
+                <comoros :key="acceptUserCardKey" :disabledId="params.transferUserCardId"
+                    :transferPhoneList="transferPhoneList" :filterType="buyVipType" v-model="params.acceptUserCardId"
+                    :name.sync="acceptUserCardName" distinguishBool/>
             </div>
         </div>
         <div class="transfer-item">
             <div>转移的时间</div>
             <div class="transfer-item-input">
-                <van-field v-model="value" placeholder="请输入转移的时间" type="number" />
+                <van-field placeholder="请输入转移的时间" v-model="params.transferTime"
+                    @input="params.transferTime = params.transferTime.replace(/\D/g, '')" />
             </div>
         </div>
-        <div style="font-size: 12px;font-weight: 400;color: #3B7FFF;line-height: 16px;margin-top: 5px">服务费计算</div>
+        <span style="font-size: 12px;font-weight: 400;color: #3B7FFF;line-height: 16px;margin-top: 5px;"
+            @click="params.transferTime && serviceCount()" :class="{ opacity: !params.transferTime }">{{ countLoading ? '正在计算中...' : '服务费计算'
+            }}</span>
         <div class="transfer-tip">
             <div>
                 温馨提示:
             </div>
             <div class="transfer-tip-content">
-                此功能支持转移云手机时长到其它设备<br />
-                1、合成设备必须是同一个套餐类型<br />
-                2、减少时长的云机:选择转移时间的设备<br />
-                3、增加时长的云机:选择增加时长的设备<br />
-                4、授权云手机,获取云手机,自动续费云手机,计时套餐云手机,特权年卡,激活码,不支持设备合成<br />
-                5、转移天数的设备最少为7天云手机,小于7天的云手机不支持转移时长<br />
-                6、转移扣除天数<br />
-                50 -100天 扣除5%<br />
-                100-200天 扣除4%<br />
-                200-500天 扣除3%<br />
-                其它转移时间 扣除时间按照5%计算<br />
+                <div v-html="html"></div>
             </div>
         </div>
         <div class="transfer-btn">
-            <van-button type="info" block>分配时间</van-button>
+            <van-button type="info" block
+                :disabled="!params.transferUserCardId || !params.acceptUserCardId || !params.transferTime"
+                :loading="allocateLoading" @click="changePopUpType(0)" loading-text="正在分配时间中...">
+                分配时间
+            </van-button>
         </div>
 
-        <van-dialog v-model="visible" :title="false ? '服务费计算' : ''" confirmButtonColor="#3B7FFF" className="dialog" showCancelButton cancelButtonColor="#999999">
+        <van-dialog v-model="visible" :title="clickType ? '服务费计算' : ''" confirmButtonColor="#3B7FFF" className="dialog"
+            showCancelButton cancelButtonColor="#999999" @confirm="!clickType && confirm()"
+            @close="allocateLoading = false">
             <div style="padding: 16px;font-weight: 100;">
-                <template v-if="false">
+                <template v-if="clickType">
                     <div style="display: flex; justify-content: space-between;">
                         <div>转移天数:</div>
-                        <div style="color: #F9F9F9;">100天</div>
+                        <div style="color: #F9F9F9;">{{ params.transferTime }}天</div>
                     </div>
                     <div style="display: flex; justify-content: space-between;">
                         <div>服务费:</div>
-                        <div style="color: #F9F9F9;">1.5天</div>
+                        <div style="color: #F9F9F9;">{{ serviceCharge }}天</div>
                     </div>
 
                 </template>
@@ -59,13 +61,13 @@
                 <template v-else>
                     <div style="line-height: 30px;">
                         <div style="text-align: center;font-weight:bold;">
-                            确定要将【A设备云机名称
+                            确定要将【{{ transferUserCardName }}
                         </div>
                         <div style="text-align: center;">
-                            时间分配给【A设备云机名称
+                            时间分配给【{{ acceptUserCardName }}
                         </div>
                         <div style="text-align: center;margin-top: 10px">
-                            服务费:1.6
+                            服务费:{{ serviceCharge }}
                         </div>
                     </div>
                 </template>
@@ -75,23 +77,162 @@
 </template>
 
 <script>
+import {
+    sha256
+} from 'js-sha256';
+import BigNumber from "bignumber.js";
+import { Toast } from 'vant'
 const comoros = () => import('./comoros.vue')
 export default {
     name: 'tansferDuration',
     components: {
         comoros
     },
+    props: {
+        token: {
+            type: String,
+            default: ''
+        }
+    },
     data() {
         return {
-            value: '',
-            visible: true
+            visible: false,// 显示弹窗
+            transferPhoneList: [], // 云机列表
+            buyVipType: '', // 当前选中的云机类型
+            params: {},
+            acceptUserCardKey: +new Date(),
+            transferUserCardKey: +new Date(),
+            acceptUserCardName: '',
+            transferUserCardName: '',
+            // 点击类型 0 是确认转移、1是计算手续费
+            clickType: 0,
+            // 计算loading
+            countLoading: false,
+            // 计算服务费的对象
+            countObj: {},
+            // 服务费
+            serviceCharge: '',
+            // 分配时间loading
+            allocateLoading: false,
+            html: ''
         };
     },
 
     mounted() {
+        this.init()
+        this.getFeeRatio()
+        this.getRule()
     },
     methods: {
+        init() {
+            this.params = {
+                acceptUserCardId: '', // 接受设备ID
+                transferUserCardId: '', // 转移设备ID
+                transferTime: '' // 转移天数
+            }
+            this.acceptUserCardKey = +new Date()
+            this.transferUserCardKey = +new Date()
+            this.buyVipType = ''
+            this.serviceCharge = ''
+            this.getTransferPhoneList()
+        },
+        // 获取云机列表
+        getTransferPhoneList() {
+            this.$axios.$get('resources/v5/time/transfer/getTransferPhoneList', { header: { token: this.token } }).then(res => {
+                if (res.success) {
+                    this.transferPhoneList = res.data
+                }
+            })
+        },
+        // 确认框
+        comorosConfirm() {
+            this.acceptUserCardKey = +new Date()
+            this.params.acceptUserCardId = ''
+        },
+
+        // 获取手续费比例
+        getFeeRatio() {
+            this.$axios.$get('resources/v5/time/transfer/getFeeRatio', { headers: { Authorization: this.token } }).then(res => {
+                if (res.success) {
+                    res.data.transferMinDay = res.data.transferMinDay * 24 * 60
+                    this.countObj = res.data
+                }
+            })
+        },
+
+        // 确定提交
+        async confirm() {
+            // 获取服务器时间
+            let requestTime = await this.$axios.$get('pay/v1/order/getSystemTime', { headers: { Authorization: this.token } })
+
+            requestTime = new Date(requestTime.data * 1000).$formatTime()
+            const requestTimeSign = sha256("Register_SZX_2023:" + requestTime)
+            this.$axios.$post('resources/v5/time/transfer/transferDurationOperation', {
+                ...this.params,
+                requestTime
+            }, { headers: { Authorization: this.token, requestTimeSign } }).then(res => {
+                if (res.success) {
+                    this.init()
+                    Toast.success(res.msg)
+                }
+            }).catch(err => {
+                Toast.fail(err.message)
+            }).finally(() => {
+                this.allocateLoading = false
+            })
+
+        },
+
+        // 服务费计算
+        serviceCount(bool = true) {
+            if (this.countLoading) return
+            if (bool) this.countLoading = true
+            const arr = this.countObj.list.sort((a, b) => {
+                console.log(a, b)
+                return a.timeConsumingEnd - b.timeConsumingEnd
+            })
+            console.log(arr)
+            let commission = null
+            for (const i of arr) {
+                if (this.params.transferTime <= i.timeConsumingEnd) {
+                    commission = i.commission
+                    break
+                }
+            }
+
+            if (!commission) commission = this.countObj.commissionSet
+            this.serviceCharge = +new BigNumber(this.params.transferTime).times(new BigNumber(commission).div(100))
+            this.countLoading = false
+            if (bool) this.changePopUpType(1)
+        },
+
+        changePopUpType(e) {
+            if (!e) {
+                this.serviceCount(false)
+                this.allocateLoading = true
+            }
+            this.visible = true
+            this.clickType = e
+        },
 
+        // 获取规则
+        getRule() {
+            this.$axios.$get('/public/v4/agreement/content', {
+                params: {
+                    agreementCoding: 'YJSBSJZY2024'
+                }, headers: { Authorization: this.token }
+            }).then(res => {
+                const html = res.data.content;
+                const rx = /<body[^>]*>([\s\S]+?)<\/body>/i;
+                let m = rx.exec(html);
+                if (m) {
+                    m = m[1]
+                };
+                console.log(m)
+                this.html = m
+
+            })
+        }
     },
 };
 </script>
@@ -169,4 +310,18 @@ export default {
         background: #2C2C2D;
     }
 }
+
+.opacity {
+    opacity: .4;
+}
+
+.transfer-tip-content {
+    ::v-deep ol {
+        list-style-type: decimal;
+    }
+
+    ::v-deep ul {
+        list-style-type: disc;
+    }
+}
 </style>

+ 58 - 15
pages/transferDuration/components/transferRecord.vue

@@ -1,71 +1,113 @@
 <template>
     <div class="record">
-        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-            <van-row v-for="item in 50" :key="item" class="record-item">
+        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" v-if="list.length">
+            <van-row v-for="(item, index) in list" :key="index" class="record-item">
                 <van-col span="24">
                     <div class="flex-jub record-border">
                         <div>
-                            <span>单号:</span><span style="font-weight: bold;color: #CFD1D4;">35584748783455</span>
+                            <span>单号:</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.synthesisId }}</span>
                         </div>
                         <div>
-                            <span>转移天数:</span><span style="font-weight: bold;color: #CFD1D4;">700天</span>
+                            <span>转移天数:</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.transferDurationStr
+                            }}</span>
                         </div>
                     </div>
                 </van-col>
                 <van-col span="24">
                     <div class="record-details-item">
-                        <span>扣除天数:</span><span style="font-weight: bold;color: #CFD1D4;">700天</span>
+                        <span>扣除天数:</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.commissionStr }}</span>
                     </div>
                 </van-col>
                 <van-col span="24">
                     <div class="flex-jub record-details-item">
                         <div>
-                            <span>主设备名称:</span><span style="font-weight: bold;color: #CFD1D4;">CsQ354</span>
+                            <span>主设备名称:</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.transferDiskName
+                            }}</span>
                         </div>
                         <div>
-                            <span>设备天数:</span><span style="font-weight: bold;color: #CFD1D4;">-700天</span>
+                            <span>设备天数:</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.transferDurationStr
+                            }}</span>
                         </div>
                     </div>
                 </van-col>
                 <van-col span="24">
                     <div class="flex-jub record-details-item">
                         <div>
-                            <span>副设备名称:</span><span style="font-weight: bold;color: #CFD1D4;">CsQ354</span>
+                            <span>副设备名称:</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.acceptDiskName
+                            }}</span>
                         </div>
                         <div>
-                            <span>设备天数:</span><span style="font-weight: bold;color: #CFD1D4;">700天</span>
+                            <span>设备天数:</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.obtainTime }}</span>
                         </div>
                     </div>
                 </van-col>
                 <van-col span="24">
                     <div class="record-details-item">
-                        <span>转移时间:</span><span style="font-weight: bold;color: #CFD1D4;">2023年7月20日14:45:11</span>
+                        <span>转移时间:</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.transferDurationStr
+                        }}</span>
                     </div>
                 </van-col>
             </van-row>
-
         </van-list>
+        <div v-else-if="pageLoading" style="height: 100%;position: relative;">
+            <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
+                <van-loading type="spinner" />
+            </div>
+        </div>
+        <div style="height: 100%;display: flex;align-self: center;justify-content: center;" v-else>
+            <van-empty description="暂时没有数据哦~"></van-empty>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
     name: 'transferRecord',
-
+    props: {
+        token: {
+            type: String,
+            default: ''
+        }
+    },
     data() {
         return {
             loading: false,
-            finished: false
+            finished: false,
+            params: {
+                pageNum: 1,
+                pageSize: 10
+            },
+            list: [],
+            total: 0,
+            pageLoading: false
         };
     },
 
     mounted() {
-
+        this.getTransferDurationRecode()
     },
 
     methods: {
+        // 获取转移记录
+        getTransferDurationRecode() {
+            this.pageLoading = true
+            this.$axios.$post('/resources/v5/time/transfer/getUserTransferRecode', { ...this.params }, { headers: { Authorization: this.token } }).then(res => {
+                if (res.success) {
+                    this.list.push(...res.data.list)
+                    this.total = res.data.total
+                    this.loading = false;
+                    this.pageLoading = false
+                }
+            })
+        },
+        // 加载分页
         onLoad() {
-            console.log(54456)
+            if (this.list.length >= this.total) {
+                this.finished = true
+                return
+            }
+            this.params.pageNum++
+            this.getTransferDurationRecode()
         }
     },
 };
@@ -75,6 +117,7 @@ export default {
 .record {
     padding: 0 16px;
     font-weight: 100;
+    height: 100%;
 
     .record-item {
         margin-bottom: 16px;

+ 7 - 3
pages/transferDuration/index.vue

@@ -13,7 +13,7 @@
                 </div>
             </div>
             <div class="transfer-duration-com" :key="tabsActive">
-                <components :is="tabsActive" />
+                <components :is="tabsActive" :token="token"/>
             </div>
         </div>
     </div>
@@ -39,13 +39,15 @@ export default {
                 activeIcon: require('@/assets/image/transferDuration/activeTransferRecord.png')
             }],
             tabsActive: 'tansferDuration',
+            token: ''
         }
     },
     components: { transferRecord, tansferDuration },
     head: {
         title: '转移时长',
     },
-    mounted() {
+    created() {
+        this.token = this.$route.query.token
     },
     methods: {
         changeTabs(key) {
@@ -106,4 +108,6 @@ export default {
         flex: 1;
         overflow-y: auto;
     }
-}</style>
+}
+
+</style>

+ 25 - 0
plugins/common.js

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+
+const common = {
+	install(Vue) {
+
+		// 手机号码格式成秘文形式  格式为137****3151
+		String.prototype.$formatPhone = function() {
+			return this.replace(/(\d{3})\d+(\d{4})/, '$1****$2')
+		}
+		
+		// 格式化时间  格式为 2023-10-02 12:00:00
+		Date.prototype.$formatTime = function() {
+			let date = this.toLocaleDateString()
+			let time = this.toLocaleTimeString()
+			let dateArr = date.split('/')
+			let month = `${+dateArr[1] >= 10 ? dateArr[1] : `0${dateArr[1]}`}`
+			let day = `${+dateArr[2] >= 10 ? dateArr[2] : `0${dateArr[2]}`}`
+			// 小程序this.toLocaleTimeString(),会显示上午、下午,为兼容h5、小程序 先统一去除中文和空格
+			time = time.replace(/[\u4e00-\u9fa5\s]/g, '');
+			return `${dateArr[0]}-${month}-${day} ${time}`
+		}
+	}
+}
+
+Vue.use(common)