.

src/views/asset/Consignment.vue

@@ -7,17 +7,48 @@
             </div>
             <div class="border border1"></div>
             <div class="content">
-                <van-field type="number" label="寄售价格(元)" placeholder="请设置寄售价格" v-model="price" />
+                <div class="title">寄售价格(元）<span>最高定价20000.00</span></div>
+                <!-- <van-field type="number" input-align="center" placeholder="请输入价格" v-model="price" /> -->
+                <van-stepper
+                    v-model="price"
+                    default-value=""
+                    :show-plus="false"
+                    :show-minus="false"
+                    :decimal-length="2"
+                    max="20000"
+                />
+                <div class="title">预计收入(元）</div>
+                <div class="info-item">
+                    <span>寄售定价</span>
+                    <span class="val">{{ price1 }}</span>
+                </div>
+                <div class="info-item">
+                    <span>版税(10.0%)</span>
+                    <span class="val">{{ price2 }}</span>
+                </div>
+                <div class="info-item">
+                    <span>技术服务费(4%) </span>
+                    <span class="val">{{ price3 }}</span>
+                </div>
+                <div class="info-item">
+                    <span>支付通道费(1%)</span>
+                    <span class="val">{{ price4 }}</span>
+                </div>
+                <div class="info-item">
+                    <span>最终收入</span>
+                    <span class="val prim">{{ price5 }}</span>
+                </div>
             </div>
             <div class="border"></div>
             <div class="input">
-                <div class="text1">请输入交易密码，验证信息</div>
+                <div class="text1">请输入交易密码</div>
                 <div v-if="sets">
                     <van-password-input :value="password" :focused="showKeyboard" @focus="showKeyboard = true" />
                     <van-number-keyboard
                         v-model="password"
                         :show="showKeyboard"
                         @blur="showKeyboard = false"
+                        :gutter="10"
                         maxlength="6"
                     />
                     <div class="text2" @click="$router.push('/tradingPassword')">忘记密码？</div>
@@ -29,7 +60,7 @@
             <van-notice-bar
                 :color="$colors.prim"
                 :background="$colors.prim"
-                text="出售成功的数字藏品将会携带数字藏品的所有信息转让于购买方，包括但不限于：加密空间、权益的使用、数字藏品的区块信息等"
+                text="出售成功的数字藏品将会携带数字藏品的所有信息转让于购买方，包括但不限于：权益的使用、数字藏品的区块信息等"
             />
             <div class="bottom-content">
                 <div class="btn1" @click="$router.go(-1)">取消</div>
@@ -70,7 +101,27 @@ export default {
         };
     },
     computed: {
-        ...mapState(['userInfo'])
+        ...mapState(['userInfo']),
+        price1() {
+            let price = Math.floor(this.price * 100) / 100;
+            return price.toFixed(2);
+        },
+        price2() {
+            let price = Math.floor(this.price * 10) / 100;
+            return price.toFixed(2);
+        },
+        price3() {
+            let price = Math.floor(this.price * 4) / 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();
@@ -159,7 +210,7 @@ export default {
 }
 
 .input {
-    padding: 20px 0;
+    padding: 12px 0 20px;
     .text1 {
         font-size: @font2;
         color: @text0;
@@ -201,10 +252,9 @@ export default {
         line-height: 24px;
     }
     // background-color: @bg3;;
-    padding-bottom: 100px;
+    padding-bottom: 280px;
     .title {
-        font-size: 20px;
-        font-weight: bold;
+        font-size: 14px;
         color: @text0;
         line-height: 30px;
         margin-top: 5px;
@@ -276,19 +326,55 @@ export default {
     }
     .content {
         width: 375px;
-        height: 70px;
-        line-height: 70px;
         background: @bg;
+
+        .title {
+            span {
+                font-size: 12px;
+                color: #ff4f50;
+            }
+        }
+
+        .van-cell {
+            padding: 0 16px 0px;
+            margin: 10px 0 0;
+
+            /deep/.van-cell__value {
+                background-color: @bg3;
+                padding: 8px;
+            }
+        }
+
+        .info-item {
+            padding: 3px 16px;
+            .flex();
+            justify-content: space-between;
+            font-size: 12px;
+            color: #939599;
+            line-height: 24px;
+
+            .val {
+                border: 1px solid #f5f7fa;
+                box-sizing: border-box;
+                text-align: center;
+                min-width: 72px;
+                display: inline-block;
+
+                &.prim {
+                    color: @prim;
+                }
+            }
+        }
     }
     .input {
-        margin-top: 20px;
+        // margin-top: 20px;
         width: 100%;
         .text1 {
             font-size: @font2;
             color: @text0;
             line-height: 24px;
             margin-bottom: 6px;
-            text-align: center;
+            padding: 0 16px;
         }
         .text2 {
             font-size: @font2;
@@ -308,4 +394,22 @@ export default {
         }
     }
 }
+
+/deep/.van-stepper {
+    padding: 10px 16px;
+    width: 100%;
+    box-sizing: border-box;
+    .van-stepper__input {
+        width: 100%;
+        height: 40px;
+        margin: 0 0;
+    }
+}
+
+.van-notice-bar {
+    font-size: 12px;
+    height: 36px;
+    line-height: 36px;
+    background: fade(@prim, 10%) !important;
+}
 </style>