feat：完成设备时长转移静态页面

pages/transferDuration/components/comoros.vue

@@ -0,0 +1,202 @@
+<template>
+    <div>
+        <div @click="visibleFun">
+            <slot>
+                <div class="comoros-input">
+                    <div v-if="true" 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=""
+                                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>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </slot>
+        </div>
+        <van-popup v-model="visible" position="bottom">
+            <div class="comoros-list">
+                <div style="display: flex;justify-content: space-between;margin-bottom: 16px;">
+                    <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">
+                            <div class="comoros-list-item_left">
+                                <img :src="require(`@/assets/image/transferDuration/${img}.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>
+                                </div>
+                            </div>
+                            <div class="comoros-list-item_right"><van-radio :name="item" shape="square"
+                                    icon-size="15px"></van-radio></div>
+                        </div>
+                    </van-radio-group>
+                </div>
+                <div class="comoros-list-btn">
+                    <van-button type="info" block>确认</van-button>
+                </div>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'comoros',
+
+    data() {
+        return {
+            visible: false,
+            checkedAll: false,
+            img: 'STAR_icon',
+            id: ''
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        checkedAllFun(bool) {
+            this.$refs.checkboxGroup.toggleAll(bool)
+        },
+        visibleFun() {
+            this.visible = true
+            setTimeout(() => {
+                const documents = document.getElementsByClassName('comoros-list-container')
+                const length = documents.length
+                for (let i = 0; i < length; i++) {
+                    documents[i].scrollTop = 0
+                }
+            })
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.comoros-input {
+    margin-top: 8px;
+    height: 52px;
+    background: #2C2C2D;
+    border-radius: 8px;
+    // line-height: 52px;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+
+    .comoros-input-empty {
+        width: 100%;
+        margin: 0 12px;
+        display: flex;
+        justify-content: space-between;
+
+        .comoros-input-empty-img {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+
+}
+
+.comoros-list {
+    background: #fff;
+    margin: 0 10px;
+    background: #2C2C2D;
+    border-radius: 20px 20px 0 0;
+    padding: 24px 16px 8px;
+    color: #CFD1D4;
+    height: 60vh;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+
+    ::v-deep .van-checkbox__label {
+        color: #CFD1D4;
+    }
+
+    .comoros-list-container {
+        flex: 1;
+        overflow-y: auto;
+
+        .comoros-list-item {
+            box-sizing: border-box;
+            padding: 16px 16px 16px 10px;
+            height: 65px;
+            background: #363636;
+            border-radius: 6px;
+            margin-top: 12px;
+            display: flex;
+            justify-content: space-between;
+
+            .comoros-list-item_right {
+                display: flex;
+                align-items: center;
+            }
+
+
+
+        }
+    }
+
+    .comoros-list-btn {
+        margin: 16px 0 9px;
+    }
+
+
+}
+
+
+.comoros-list-item_left {
+        display: flex;
+        vertical-align: middle;
+        font-size: 14px;
+        line-height: 18px;
+
+        .comoros-list-item_left-img {
+            width: 34px;
+            height: 34px;
+            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;
+
+            &.red-time {
+                color: #F04646;
+            }
+        }
+    }
+
+::v-deep .van-popup {
+    background: transparent;
+}
+</style>

pages/transferDuration/components/tansferDuration.vue

@@ -0,0 +1,172 @@
+<template>
+    <div class="transfer">
+        <div>
+            <div>减少时长的云机</div>
+            <div>
+                <comoros />
+            </div>
+        </div>
+        <div class="transfer-item">
+            <div>增加时长的云机</div>
+            <div>
+                <comoros />
+            </div>
+        </div>
+        <div class="transfer-item">
+            <div>转移的时间</div>
+            <div class="transfer-item-input">
+                <van-field v-model="value" placeholder="请输入转移的时间" type="number" />
+                天
+            </div>
+        </div>
+        <div style="font-size: 12px;font-weight: 400;color: #3B7FFF;line-height: 16px;margin-top: 5px">服务费计算</div>
+        <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>
+        </div>
+        <div class="transfer-btn">
+            <van-button type="info" block>分配时间</van-button>
+        </div>
+
+        <van-dialog v-model="visible" :title="false ? '服务费计算' : ''" confirmButtonColor="#3B7FFF" className="dialog" showCancelButton cancelButtonColor="#999999">
+            <div style="padding: 16px;font-weight: 100;">
+                <template v-if="false">
+                    <div style="display: flex; justify-content: space-between;">
+                        <div>转移天数：</div>
+                        <div style="color: #F9F9F9;">100天</div>
+                    </div>
+                    <div style="display: flex; justify-content: space-between;">
+                        <div>服务费：</div>
+                        <div style="color: #F9F9F9;">1.5天</div>
+                    </div>
+
+                </template>
+
+                <template v-else>
+                    <div style="line-height: 30px;">
+                        <div style="text-align: center;font-weight:bold;">
+                            确定要将【A设备云机名称】
+                        </div>
+                        <div style="text-align: center;">
+                            时间分配给【A设备云机名称】
+                        </div>
+                        <div style="text-align: center;margin-top: 10px">
+                            服务费：1.6天
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </van-dialog>
+    </div>
+</template>
+
+<script>
+const comoros = () => import('./comoros.vue')
+export default {
+    name: 'tansferDuration',
+    components: {
+        comoros
+    },
+    data() {
+        return {
+            value: '',
+            visible: true
+        };
+    },
+
+    mounted() {
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.transfer {
+    padding: 0 16px 90px;
+
+    .transfer-item {
+        margin-top: 16px;
+    }
+
+    .transfer-tip {
+        margin-top: 24px;
+    }
+
+    .transfer-item-input {
+        margin-top: 8px;
+        display: flex;
+        align-items: center;
+    }
+
+    .transfer-tip-content {
+        margin-top: 8px;
+    }
+
+    .transfer-tip-content {
+        font-size: 12px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        color: #959799;
+        line-height: 17px;
+    }
+
+    .transfer-btn {
+        width: calc(100% - 32px);
+        position: fixed;
+        left: 16px;
+        bottom: 36px;
+        height: 48px;
+
+        .van-button {
+            height: 100%;
+            border-radius: 5px;
+        }
+    }
+
+    .van-field {
+        background: #2C2C2D;
+        margin-right: 12px;
+        border-radius: 5px;
+        height: 52px !important;
+        font-weight: 500 !important;
+        align-items: center;
+
+        ::v-deep .van-field__control {
+            color: #fff;
+        }
+
+        ::v-deep .van-field__control::-webkit-input-placeholder {
+            color: #999999 !important;
+        }
+    }
+}
+
+.dialog {
+    color: #CFD1D4;
+
+    ::v-deep [class*=van-hairline]::after {
+        border-color: rgba(72, 72, 72, 0.5);
+    }
+
+    &,
+    ::v-deep .van-button__content {
+        background: #2C2C2D;
+    }
+}
+</style>

pages/transferDuration/components/transferRecord.vue

@@ -0,0 +1,102 @@
+<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-col span="24">
+                    <div class="flex-jub record-border">
+                        <div>
+                            <span>单号：</span><span style="font-weight: bold;color: #CFD1D4;">35584748783455</span>
+                        </div>
+                        <div>
+                            <span>转移天数：</span><span style="font-weight: bold;color: #CFD1D4;">700天</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>
+                    </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>
+                        </div>
+                        <div>
+                            <span>设备天数：</span><span style="font-weight: bold;color: #CFD1D4;">-700天</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>
+                        </div>
+                        <div>
+                            <span>设备天数：</span><span style="font-weight: bold;color: #CFD1D4;">700天</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>
+                    </div>
+                </van-col>
+            </van-row>
+
+        </van-list>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'transferRecord',
+
+    data() {
+        return {
+            loading: false,
+            finished: false
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        onLoad() {
+            console.log(54456)
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.record {
+    padding: 0 16px;
+    font-weight: 100;
+
+    .record-item {
+        margin-bottom: 16px;
+        padding: 24px 24px 24px 16px;
+        background: #2C2C2D;
+        box-shadow: 0px 3px 7px 0px #1E2022;
+        border-radius: 8px;
+    }
+
+    .record-details-item {
+        margin-top: 12px;
+    }
+
+    .record-border {
+        padding-bottom: 12px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    .flex-jub {
+        display: flex;
+        justify-content: space-between;
+
+    }
+}
+</style>

pages/transferDuration/index.vue

@@ -0,0 +1,109 @@
+<template>
+    <div :style="{ 'height': '100vh' }">
+        <div class="transfer-duration">
+            <div class="transfer-duration-tabs">
+                <!-- <div class="transfer-duration-tabs_item active">123456</div>
+                <div class="transfer-duration-tabs_item">1432123</div> -->
+                <div v-for="item in tabs" :key="item.key"
+                    :class="['transfer-duration-tabs_item', { active: tabsActive === item.key }]"
+                    @click="changeTabs(item.key)">
+                    <img :src="tabsActive === item.key ? item.activeIcon : item.icon" alt=""
+                        class="transfer-duration-tabs_item-icon">
+                    {{ item.name }}
+                </div>
+            </div>
+            <div class="transfer-duration-com" :key="tabsActive">
+                <components :is="tabsActive" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+const transferRecord = () => import('./components/transferRecord.vue')
+const tansferDuration = () => import('./components/tansferDuration.vue')
+export default {
+    auth: false,
+    name: 'transferDuration',
+    data() {
+        return {
+            tabs: [{
+                name: '转移时长',
+                key: 'tansferDuration',
+                icon: require('@/assets/image/transferDuration/tansferDuration.png'),
+                activeIcon: require('@/assets/image/transferDuration/activeTansferDuration.png')
+            }, {
+                name: '转移记录',
+                key: 'transferRecord',
+                icon: require('@/assets/image/transferDuration/transferRecord.png'),
+                activeIcon: require('@/assets/image/transferDuration/activeTransferRecord.png')
+            }],
+            tabsActive: 'tansferDuration',
+        }
+    },
+    components: { transferRecord, tansferDuration },
+    head: {
+        title: '转移时长',
+    },
+    mounted() {
+    },
+    methods: {
+        changeTabs(key) {
+            this.tabsActive = key
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.transfer-duration {
+    font-family: PingFangSC, PingFang SC;
+    color: #C0C1C4;
+    background: #1c1c1e;
+    display: flex;
+    flex-direction: column;
+    // padding: 16px 16px 0;
+    font-size: 14px;
+    font-weight: bold;
+    // overflow: hidden;
+    height: 100%;
+
+    .transfer-duration-tabs {
+        height: 48px;
+        margin: 16px 16px 0;
+        background: #363636;
+        border-radius: 8px;
+        box-sizing: border-box;
+
+        padding: 0 10px;
+        display: flex;
+        align-items: center;
+
+        .transfer-duration-tabs_item {
+            height: 40px;
+            border-radius: 8px;
+            flex: 1;
+            text-align: center;
+            line-height: 40px;
+
+            .transfer-duration-tabs_item-icon {
+                width: 14px;
+                height: 14px;
+                vertical-align: middle;
+                margin-bottom: 3px;
+            }
+
+            &.active {
+                color: #fff;
+                background: linear-gradient(180deg, #575759 0%, #2C2C2D 100%);
+                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+            }
+        }
+    }
+
+    .transfer-duration-com {
+        margin-top: 16px;
+        flex: 1;
+        overflow-y: auto;
+    }
+}</style>