lasuo_back/src/main/pc-space/src/components/ConsignmentInfo.vue

<template>
    <el-dialog
        title="寄售说明"
        center
        append-to-body
        :visible.sync="isShow"
        :before-close="handleClose"
        @close="closeDialog"
    >
        <div class="content">
            <div class="title">寄售说明</div>
            <div class="name" v-for="(item, index) in list" :key="index">
                <span>{{ item.title }}</span>
            </div>
            <div class="border"></div>
            <div class="title">寄售价格</div>
            <div class="price">
                <el-form :model="form" ref="numberValidateForm" label-width="85px" class="demo-ruleForm">
                    <el-form-item
                        label="寄售价格(元）"
                        prop="price"
                        :rules="[{ required: true, message: '价格不能为空' }]"
                    >
                        <el-input
                            placeholder="请设置寄售价格"
                            style="width: 300px; margin-top: 20px"
                            type="number"
                            v-model="form.price"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <div class="border1"></div>
                    <div class="title">请输入交易密码，验证信息</div>
                    <el-form-item prop="password">
                        <el-input
                            style="width: 300px; margin: 20px 0 0 100px"
                            type="number"
                            v-model="form.password"
                            placeholder="请输入纯数字交易密码"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div @click="all('/transaction')" class="password">
                    <el-link> 忘记密码？</el-link>
                </div>
            </div>
            <div class="sub-btn">
                <div @click="Login" class="btn1">确定</div>
                <div class="btn2" @click="isShow = false">返回</div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            isShow: false,

            form: { price: '', password: '' },

            list: [
                {
                    title: '1. 作品寄售为单个作品价格'
                },
                {
                    title: '2. 用户将会看到加密作品的权益、加密空间的使用情况'
                },
                {
                    title: '3. 交易成功后加密作品的点赞数量将会被清除'
                },
                {
                    title: '4. 平台会收取作品出售价格的 5% 作为服务费'
                },
                {
                    title: '5. 因电子支付通道限制，单笔限额20000元'
                }
            ]
        };
    },
    computed: {},
    methods: {
        handleClose() {
            this.isShow = false;
        },
        init() {
            this.$emit('getDetail');
        },
        Login() {
            if (this.form.price != '') {
                this.$http
                    .post('/user/verifyTradeCode', {
                        tradeCode: this.form.password
                    })
                    .then(() => {
                        this.$http
                            .post('/asset/consignment', {
                                id: this.$route.query.id,
                                price: this.form.price
                            })
                            .then(res => {
                                this.$message.success('寄售成功');
                                this.isShow = false;
                                setTimeout(() => {
                                    this.init();
                                }, 1000);
                            })
                            .catch(e => {
                                if (e) {
                                    this.$message(e.error);
                                }
                            });
                    })
                    .catch(e => {
                        if (e) {
                            this.$message('失败点击忘记密码进行修改');
                        }
                    });
            } else {
                this.$message('请输入价格');
            }
        },
        closeDialog() {
            this.$emit('close1');
        }
    }
};
</script>
<style>
input[type='number'] {
    -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
</style>
<style lang="less" scoped>
/deep/ .el-dialog {
    width: 680px !important;
    height: 734px;
    background: #ffffff;
    border-radius: 8px;
    .el-dialog__title {
        font-size: 20px;
        font-weight: 500;
        color: #292c33;
        line-height: 28px;
    }
}
/deep/ .el-dialog__body {
    padding: 0;
}
/deep/ .el-form-item__label {
    width: 200px !important;
    margin-top: 20px;
}
/deep/ .el-form-item__error {
    left: 102px;
}
.content {
    .title {
        font-size: 16px;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
        padding-left: 20px;
    }
    .name {
        padding-left: 20px;
        span {
            font-size: 14px;
            font-weight: 400;
            color: #939599;
            line-height: 22px;
        }
    }
    .password {
        font-size: 14px;
        text-align: right;
        font-weight: 400;
        color: #939599;
        line-height: 24px;
        margin-right: 20px;
        cursor: pointer;
    }
    .border1 {
        height: 1px;
        background: #f5f7fa;
        border-radius: 1px;
        margin: 30px 20px;
    }
    .sub-btn {
        padding-top: 62px;
        display: flex;
        justify-content: center;
        .btn1 {
            width: 130px;
            height: 36px;
            background: linear-gradient(135deg, @prim 0%, @warn 100%);
            border-radius: 4px;
            font-size: 13px;
            line-height: 36px;
            color: #1a1a1a;
            cursor: pointer;
            text-align: center;
            margin-right: 20px;
        }
        .btn2 {
            width: 130px;
            height: 36px;
            background: #f2f3f5;
            border-radius: 4px;
            line-height: 36px;
            font-size: 13px;
            text-align: center;
            cursor: pointer;
        }
    }
}
</style>