android-cloud-H5/pages/transferDuration/components/tansferDuration.vue

<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>