lasuo_nft_front/src/views/asset/Consignment.vue

<template>
    <div class="content">
        <div class="consignment_top">
            <van-image width="120px" height="120px" radius="18" :src="Image" fit="cover" />
            <div class="consignment_top_title">
                <div class="consignment_top_title_one">{{ info.name }}</div>
                <div class="consignment_top_title_two">
                    <div class="consignment_top_title_two_text1">{{info.collectionCategory}}</div>
                    <div class="consignment_top_title_two_text2">{{ info.category }}</div>
                </div>
                <div class="consignment_top_title_three">
                    <span class="consignment_top_title_three_text1">¥</span>{{ info.price || '0' }}
                </div>
            </div>
            <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture">
        </div>
        <!-- <div class="consignment_title">挂售上架</div>
        <div class="consignment_tip">交易成功后该藏品将会被转移</div>
        <div class="hanging_sale_list">
            <div class="consignment_set_price">设置价格（元）</div>
            <van-cell-group inset>
                <van-field v-model="price" type="number" placeholder="请输入金额" />
            </van-cell-group>
            <div class="transaction_password">
                <div class="transaction_password_title">输入交易密码</div>
                <div class="transaction_password_forget" @click="$router.push('/tradingPassword')">忘记密码</div>
            </div> -->
            <!-- 密码输入框 -->
            <!-- <van-password-inpu :value="password" :focused="showKeyboard" :gutter="16" @focus="showKeyboard = true" /> -->
            <!-- 数字键盘 -->
            <!-- <van-number-keyboard
                v-model="password"
                :show="showKeyboard"
                @blur="keyBlur"
                @close="submit"
                :gutter="10"
                maxlength="6"
                theme="custom"
                close-button-text="完成"
            /> -->
            <van-popup
                class="popup-content"
                style="background: #191d27"
                v-model:show="showKeyboard"
                teleport="body"
                position="bottom"
            >
                <div class="popup">
                    <!-- <div class="cancel" @click="showKeyboard = false">取消</div> -->
                    <img :src="require('@assets/shanchu@3x.png')" alt="" @click="showKeyboard = false" class="cancel" />
                    <div class="title">输入交易密码</div>
                    <van-password-input :value="password" :gutter="8" />
                    <div class="popup_password_forget" @click="$router.push('/tradingPassword')">忘记密码？</div>
                    <!-- <van-password-input :value="form.code" :length="4" /> -->
                    <!-- 数字键盘 -->
                    <van-number-keyboard
                        v-model="password"
                        theme="custom"
                        :show="showKeyboard"
                        close-button-text="完成"
                        @close="submit"
                    />
                </div>
            </van-popup>
        <!-- </div> -->
        <!-- <div v-else class="text3" @click="$router.push('/tradingPassword')">您当前没有交易密码，点击去设置</div> -->
    </div>
    <div class="consignment_content">
        <div class="consignment_content_one">挂售价格</div>
        <div class="consignment_content_two">
            <div class="consignment_content_two_text">¥</div>
            <van-field v-model="price" type="number"/>
        </div>
    </div>
    <div class="consignment_cost">
        <div class="consignment_cost_con">
            <div class="consignment_cost_con_one">
                <div class="consignment_cost_con_one_text1">版权使用费(5%)</div>
                <div class="consignment_cost_con_one_text2">{{ price2 }} 元</div>
            </div>
            <div class="consignment_cost_con_one">
                <div class="consignment_cost_con_one_text1">平台手续费(10%)</div>
                <div class="consignment_cost_con_one_text2">{{ price3 }} 元</div>
            </div>
            <div class="consignment_cost_con_one">
                <div class="consignment_cost_con_one_text1">售卖到手(85%)</div>
                <div class="consignment_cost_con_one_text2">{{ price5 }} 元</div>
            </div>
        </div>
    </div>
    <div class="consignment_button">
        <div class="consignment_button_con" @click="showKeyboard = true">确定</div>
    </div>
    <!-- <div class="consignment_confirmation" ref="bottom">
        <div class="consignment_confirmation_left" @click="$router.go(-1)">取消</div>
        <div class="consignment_confirmation_right" @click="submit">确认</div>
    </div> -->
    <!-- <agreement ref="agree" :info="info" @agree="agree"></agreement> -->
</template>

<script>
import { mapState } from 'vuex';
// import Agreement from '../asset/Agreement.vue';
export default {
    name: 'Top',
    inject: ['changeScroll'],
    data() {
        return {
            price: '',
            showKeyboard: false,
            password: '',
            sets: false,
            list: [
                {
                    title: '1. 作品寄售为单个作品价格'
                },
                {
                    title: '2. 用户将会看到数字藏品的权益的使用情况'
                },
                {
                    title: '3. 交易成功后数字藏品的点赞数量将会被清除'
                },
                {
                    title: '4. 平台会收取作品出售价格的 5% 作为服务费'
                },
                {
                    title: '5. 因电子支付通道限制，单笔限额20000元'
                }
            ],
            info: {},
            agreement: false,
            Image: ''
        };
    },
    computed: {
        ...mapState(['userInfo']),
        price1() {
            let price = Math.floor(this.price * 100) / 100;
            return price.toFixed(2);
        },
        price2() {
            let price = Math.floor(this.price * 5) / 100;
            return price.toFixed(2);
        },
        price3() {
            let price = Math.floor(this.price * 10) / 100;
            return price.toFixed(2);
        },
        price4() {
            let price = Math.floor(this.price * 1) / 100;
            return price.toFixed(2);
        },
        price5() {
            let price = Math.floor(this.price * 85) / 100;
            return price.toFixed(2);
        }
    },
    mounted() {
        this.passFn();
        this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
            this.info = res;
            this.Image = this.info.pic[0].url
        });
    },
    methods: {
        keyboardEnter() {
            this.changeScroll(1000);
            this.showKeyboard = true;
        },
        passFn() {
            this.$http
                .get('/user/tradeCodeStatus', {
                    userId: this.userInfo.id
                })
                .then(res => {
                    console.log(res);
                    this.sets = res.set;
                });
        },
        agree() {
            this.agreement = true;
            this.submit();
        },
        submit() {
            // this.$router.push('/ConsignmentSuccess?id=' + this.info.id);
            if (Number(this.price) > 20000 && !this.agreement) {
                this.$refs.agree.init();
            } else if (Number(this.price)) {
                this.$dialog
                    .confirm({
                        title: '寄售',
                        message: `商品将以<span style='color:#ff4f50;font-weight:bold;font-size:18px;margin:0 5px'>${this.price}</span>的价格上架`,
                        allowHtml: true
                    })
                    .then(() => {
                        this.$toast.loading({
                            message: '加载中...',
                            forbidClick: true
                        });
                        return new Promise((resolve, reject) => {
                            this.$http
                                .post('/user/verifyTradeCode', {
                                    tradeCode: this.password
                                })
                                .then(_ => resolve())
                                .catch(e => {
                                    reject({ error: '密码错误' });
                                });
                        });
                    })
                    .then(() => {
                        return this.$http.post('/asset/consignment', {
                            id: this.$route.query.id,
                            price: this.price
                        });
                    })
                    .catch(e => {
                        if (e.error) {
                            this.$toast(e.error || '出现错误，请稍后再试');
                        }
                        return Promise.reject('cancel');
                    })
                    .then(res => {
                        this.$toast.success('寄售成功');
                        setTimeout(() => {
                            this.$router.push('/ConsignmentSuccess?id=' + this.info.id);
                            // this.$router.go(-1);
                        }, 1000);
                    })
                    .catch(e => {
                        if (e && e.error) {
                            this.$toast(e.error);
                        }
                    });
            } else {
                this.$toast('请输入价格');
            }
        },
        goRouter() {
            if (!this.showKeyboard) {
                this.$router.push('/tradingPassword');
            }
        },
        keyBlur() {
            setTimeout(() => {
                this.showKeyboard = false;
            }, 100);
        }
    }
};
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    // height: 100%;
    // position: absolute;
    background: #191d27;
    padding: 15px;
    padding-bottom: 0px;
    box-sizing: border-box;
    .consignment_top {
        background: #1e222c;
        border-radius: 0px 18px 18px 0px;
        display: flex;
        position: relative;
        .bottom_texture{
            width: 115px;
            height: 100px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .consignment_top_title {
            width: calc(100% - 150px);
            margin-left: 12px;
            padding: 16px 0px;
            box-sizing: border-box;
            .consignment_top_title_one {
                width: 100%;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 22px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 12px;
            }
            .consignment_top_title_two {
                display: flex;
                margin-bottom: 12px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                .consignment_top_title_two_text1 {
                    padding: 0px 6px;
                    box-sizing: border-box;
                    height: 18px;
                    background: #f9ddb3;
                    color: #282d3a;
                    border-radius: 3px;
                    line-height: 18px;
                    margin-right: 6px;
                }
                .consignment_top_title_two_text2 {
                    padding: 0px 6px;
                    box-sizing: border-box;
                    height: 18px;
                    background: #323743;
                    border-radius: 3px;
                    color: #f9ddb3;
                    line-height: 18px;
                }
            }
            .consignment_top_title_three {
                font-size: 18px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                line-height: 24px;
                .consignment_top_title_three_text1{
                    font-size: 16px;
                    line-height: 22px;
                }
            }
        }
    }
    .consignment_title {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 28px;
        margin-bottom: 8px;
    }
    .consignment_tip {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 18px;
        opacity: 0.5;
        margin-bottom: 20px;
    }
    .hanging_sale_list {
        width: 100%;
        background: #1e222c;
        border-radius: 12px;
        padding: 20px 15px;
        box-sizing: border-box;
        .consignment_set_price {
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 18px;
            margin-bottom: 8px;
        }
        /deep/ .van-cell-group {
            margin: 0;
        }
        /deep/ .van-cell {
            border-radius: 4px;
            border: 1px solid rgba(151, 151, 151, 0.1);
            margin-bottom: 20px;
            .van-field__control {
                color: #ffffff;
            }
        }
        .transaction_password {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            .transaction_password_title {
                color: #ffffff;
                line-height: 18px;
            }
            .transaction_password_forget {
                color: #077dff;
                line-height: 18px;
            }
        }
        .van-password-input {
            margin: 0;
            /deep/ .van-password-input__security li {
                width: 45px;
                height: 50px;
                border-radius: 4px;
                border: 1px solid rgba(151, 151, 151, 0.1);
                color: #ffffff;
                background: #1e222c;
            }
        }
    }
}
.consignment_content{
    padding: 20px 30px;
    box-sizing: border-box;
    background: linear-gradient(360deg, #1E222C 0%, rgba(25, 29, 39, 0) 100%);
    border-radius: 0px 0px 20px 20px;
    .consignment_content_one{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 20px;
        margin-bottom: 24px;
        opacity: 0.5;
    }
    .consignment_content_two{
        display: flex;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 36px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 40px;
        .consignment_content_two_text{
            margin-right: 10px;
        }
        .van-field{
            padding-left: 10px;
            font-size: 30px;
            padding: 0;
        }
    }
}
.consignment_confirmation {
    width: 100%;
    height: 56px;
    background: #15152d;
    position: fixed;
    bottom: 0;
    padding: 8px 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    .consignment_confirmation_left {
        width: 164px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #28b6ff;
        color: #28b6ff;
        line-height: 40px;
    }
    .consignment_confirmation_right {
        width: 164px;
        height: 40px;
        background: #28b6ff;
        border-radius: 8px;
        color: #ffffff;
        line-height: 40px;
    }
}
.consignment_cost{
    padding: 0px 15px;
    box-sizing: border-box;
    margin-top: 16px;
    .consignment_cost_con{
        padding: 18px 15px;
        box-sizing: border-box;
        background: #1E222C;
        border-radius: 12px;
        .consignment_cost_con_one{
            display: flex;
            justify-content: space-between;
            margin-bottom: 14px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 20px;
            .consignment_cost_con_one_text1{
                color: #FFFFFF;
                opacity: 0.3;
            }
            .consignment_cost_con_one_text2{
                color: #FFFFFF;
            }
        }
        .consignment_cost_con_one:last-child{
            margin-bottom: 0px;
        }
    }
}
.consignment_button{
    width: 100%;
    position: fixed;
    bottom: 64px;
    padding: 0px 82px;
    box-sizing: border-box;
    .consignment_button_con{
        width: 100%;
        height: 50px;
        background: #F9DDB3;
        border-radius: 8px;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #503A1E;
    }
}
@bottom: 6px;
@gray3: #f2f4f5;
.popup {
    color: #000;
    position: relative;
    padding-bottom: calc(@bottom+ constant(safe-area-inset-bottom));
    padding-bottom: calc(@bottom + env(safe-area-inset-bottom));
    padding-bottom: 280px;
    .title {
        text-align: center;
        padding: 13px 0px;
        font-size: 17px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .popup_password_forget {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #077dff;
        line-height: 18px;
        position: absolute;
        top: 132px;
        right: 28px;
    }
    .van-password-input {
        margin: 0 !important;
        padding: 19px 32px 12px;
        /deep/ .van-password-input__security li {
            width: 45px;
            height: 50px;
            border-radius: 4px;
            background: #1e222c;
            color: #ffffff;
        }
    }
    .cancel {
        width: 24px;
        height: 24px;
        position: absolute;
        // font-size: 16px;
        // font-family: PingFangSC-Regular, PingFang SC;
        // font-weight: 400;
        // color: #939599;
        // line-height: 22px;
        // padding: 21px 20px;
        left: 10px;
        top: 13px;
    }

    .phone {
        padding: 12px 0 20px;
        text-align: center;
        font-size: 12px;
        color: #aaabad;
        line-height: 24px;
    }

    /deep/.van-password-input {
        margin: 0 80px;
    }

    /deep/.van-key {
        &:hover {
            background-color: @gray3;
        }
        &:focus {
            background-color: @gray3;
        }
        &:active {
            background-color: @gray3;
        }
        &:link {
            background-color: @gray3;
        }
        &:visited {
            background-color: @gray3;
        }

        &.van-key--active {
            background-color: @gray3;
        }
    }

    /deep/[class*='van-hairline']::after {
        border-color: @gray3;
    }

    /deep/.van-key--blue {
        background: linear-gradient(135deg, @prim 0%, @warn 100%);
        color: @btnText;
    }
}
</style>