寄售

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

@@ -0,0 +1,229 @@
+<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="100px" 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="border"></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;
+        },
+        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;
+                            })
+                            .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;
+    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-dialog__headerbtn {
+//     margin: 14px 50px 0 0;
+//     &::before {
+//         width: 24px;
+//         height: 24px;
+//     }
+// }
+/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;
+    }
+    .border {
+        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>

src/main/pc-space/src/components/TransactionPhone.vue

@@ -6,7 +6,7 @@
             <el-step title="完成"></el-step>
         </el-steps>
         <el-form :label-position="labelPosition" ref="form2" label-width="290px" :model="ruleForm" :rules="rules">
-            <el-form-item label="新交易密码" prop="password" οnkeyup="value=value.replace(/[^\d]/g,'')">
+            <el-form-item label="新交易密码" prop="password">
                 <el-input
                     style="width: 300px"
                     type="number"

src/main/pc-space/src/views/AssetDetail.vue

@@ -97,8 +97,9 @@
                                 <span>赠送好友</span>
                             </div>
                         </div>
-                        <el-button class="buy" type="primary" size="default"
-                            ><i class="font_family icon-icon-zhuanrang1"></i><span>寄售上架</span></el-button
+                        <el-button @click="Consignment" class="buy" type="primary" size="default"
+                            ><i class="font_family icon-icon-zhuanrang1"></i
+                            ><span>{{ info.consignment ? '取消寄售' : '寄售上架' }}</span></el-button
                         >
                     </div>
                 </div>
@@ -174,10 +175,12 @@
         </div>
 
         <send ref="send"></send>
+        <consignment-info ref="refFn"></consignment-info>
     </div>
 </template>
 <script>
 import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
+import ConsignmentInfo from '../components/ConsignmentInfo';
 import asset from '../mixins/asset';
 import product from '../mixins/product';
 import 'swiper/css/swiper.css';
@@ -186,7 +189,7 @@ import { mapState } from 'vuex';
 import Send from './Send.vue';
 import Share from '../components/Share.vue';
 export default {
-    components: { Swiper, SwiperSlide, CollectionInfo, Send, Share },
+    components: { Swiper, SwiperSlide, CollectionInfo, Send, Share, ConsignmentInfo },
     mixins: [asset, product],
     data() {
         return {
@@ -230,15 +233,6 @@ export default {
         }
     },
     methods: {
-        // aaa() {
-        //     this.$http
-        //         .post('/identityAuth/apply', {
-        //             ...form
-        //         })
-        //         .then(() => {
-        //             this.$store.dispatch('getUserInfo');
-        //         });
-        // },
         getDetail() {
             this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
                 this.info = res;
@@ -299,12 +293,32 @@ export default {
                     }
                 });
         },
+        Consignment() {
+            if (!this.info.consignment) {
+                this.$refs.refFn.isShow = true;
+            } else {
+                this.$confirm('寄售将取消上架', '取消寄售', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    customClass: 'myClass',
+                    center: true
+                })
+                    .then(() => {
+                        return this.$http.post(`/asset/cancelConsignment?id=${this.info.id}`);
+                    })
+                    .then(res => {
+                        this.getProduct();
+                        this.$message.success('取消寄售');
+                    });
+            }
+        },
         changeShow() {
             if (!this.info.publicShow) {
                 console.log(this.info);
                 this.$confirm('藏品将公开展示，无报价', '公开展示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
+                    customClass: 'myClass',
                     center: true
                 })
                     .then(() => {
@@ -318,6 +332,7 @@ export default {
                 this.$confirm('藏品将取消展示', '取消展示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
+                    customClass: 'myClass',
                     center: true
                 })
                     .then(() => {
@@ -337,6 +352,20 @@ export default {
     }
 };
 </script>
+<style lang="less">
+.myClass {
+    .el-button {
+        background: linear-gradient(133deg, @prim 0%, @warn 100%);
+        border-radius: 4px;
+        border: 0;
+    }
+    .el-button:nth-last-child(2) {
+        background: #c4c7cc;
+        color: #ffffff;
+        font-size: 13px;
+    }
+}
+</style>
 <style lang="less" scoped>
 .container {
     padding: 50px 50px 200px;