|
|
<template>
|
|
|
<LayoutApp :title="title">
|
|
|
<div class="order-page">
|
|
|
<div class="title">出售</div>
|
|
|
<div class="product">
|
|
|
<ImgSize class="pro-img" :src="noEntryOrderInfo.goodsInfo.goodImg || ''" :width="200" :height="200"></ImgSize>
|
|
|
<div class="pro-info">
|
|
|
<p class="pro-name">{{noEntryOrderInfo.goodsInfo.colorName}}, {{noEntryOrderInfo.goodsInfo.sizeName}}码</p>
|
|
|
<p class="stock-info ufo-font">最低售价: ¥{{noEntryOrderInfo.goodsInfo.leastPrice}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="input-container">
|
|
|
<InputUfo type="number" placeholder="定价需以9结尾.例如1999"
|
|
|
:maxlength="8" class="ipt-number" v-model="chgPrice">
|
|
|
<span class="prepend" slot="prepend">¥</span>
|
|
|
</InputUfo>
|
|
|
</div>
|
|
|
<div class="earnest-container">
|
|
|
<p>需支付保证金:</p><p class="earnest-money">{{earnestMoney}}</p>
|
|
|
<p class="desc">所有商品必须为国内现货,且承诺36小时内发货,交易成功后将自动退还保证金</p>
|
|
|
</div>
|
|
|
<div class="fee-container">
|
|
|
<div class="fee-line">
|
|
|
<p class="fee-title">平台费用:</p>
|
|
|
<p class="fee-price">{{platformFee}}</p>
|
|
|
</div>
|
|
|
<div class="fee-line">
|
|
|
<p class="fee-title">银行转账费(1%):</p>
|
|
|
<p class="fee-price">{{bankTransferFee}}</p>
|
|
|
</div>
|
|
|
<div class="fee-line total">
|
|
|
<p class="fee-title">实际收入:</p>
|
|
|
<p class="fee-price">{{income}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="address-container">
|
|
|
<div class="icon-container">
|
|
|
<i class="iconfont iconaddress"></i>
|
|
|
</div>
|
|
|
<div class="address-info">
|
|
|
<p class="user-name">{{noEntryOrderInfo.userAddress.consignee}}</p>
|
|
|
<p class="user-address">
|
|
|
{{noEntryOrderInfo.userAddress.area}} {{noEntryOrderInfo.userAddress.address}}
|
|
|
</p>
|
|
|
<p class="user-phone">
|
|
|
{{noEntryOrderInfo.userAddress.mobile}}
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</LayoutApp>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import LayoutApp from '../../../components/layout/layout-app';
|
|
|
import ScrollView from '../../../components/layout/scroll-view';
|
|
|
import ImgSize from '../../../components/img-size';
|
|
|
import {createNamespacedHelpers} from 'vuex';
|
|
|
import InputUfo from './components/input-ufo';
|
|
|
|
|
|
const {mapState, mapActions, mapMutations} = createNamespacedHelpers('order/priceChange');
|
|
|
|
|
|
export default {
|
|
|
name: 'noEntryDetail',
|
|
|
components: {InputUfo, ScrollView, LayoutApp, ImgSize},
|
|
|
data() {
|
|
|
return {
|
|
|
title: '',
|
|
|
platformFee: '-¥0',
|
|
|
bankTransferFee: '-¥0',
|
|
|
income: '¥0',
|
|
|
errorTip: '',
|
|
|
chgPrice: '',
|
|
|
calced: false,
|
|
|
earnestMoney: '¥0',
|
|
|
};
|
|
|
},
|
|
|
asyncData({store, router}) {
|
|
|
return store.dispatch('order/priceChange/fetchOrder', {orderCode: router.params.orderCode});
|
|
|
},
|
|
|
mounted() {
|
|
|
// this.fetchOrder({orderCode: this.$route.params.orderCode});
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(['noEntryOrderInfo']),
|
|
|
},
|
|
|
methods: {
|
|
|
...mapActions(['fetchOrder'])
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.order-page {
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
|
.title {
|
|
|
line-height: 82px;
|
|
|
font-size: 68px;
|
|
|
font-weight: bold;
|
|
|
padding: 2px 40px 0 40px;
|
|
|
}
|
|
|
|
|
|
.product {
|
|
|
margin: 20px auto;
|
|
|
padding: 0 30px;
|
|
|
height: 200px;
|
|
|
display: flex;
|
|
|
|
|
|
.pro-img {
|
|
|
width: 200px;
|
|
|
height: 200px;
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.pro-info {
|
|
|
padding: 64px 40px 0 40px;
|
|
|
line-height: 32px;
|
|
|
overflow: hidden;
|
|
|
|
|
|
.pro-name {
|
|
|
font-size: 24px;
|
|
|
color: #444;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.stock-info {
|
|
|
position: relative;
|
|
|
color: #000;
|
|
|
margin-top: 24px;
|
|
|
font-size: 28px;
|
|
|
}
|
|
|
|
|
|
.stock-text {
|
|
|
text-indent: 128px;
|
|
|
font-size: 28px;
|
|
|
font-weight: 600;
|
|
|
line-height: 44px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.input-container {
|
|
|
position: relative;
|
|
|
display: block;
|
|
|
width: 690px;
|
|
|
margin: 0 auto;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.ipt-number {
|
|
|
/deep/ .prepend {
|
|
|
width: 40px;
|
|
|
margin-left: 20px;
|
|
|
text-align: left;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.earnest-container {
|
|
|
width: 690px;
|
|
|
margin: 10px auto;
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
|
p {
|
|
|
display: inline-block;
|
|
|
font-size: 28px;
|
|
|
line-height: 60px;
|
|
|
}
|
|
|
|
|
|
.earnest-money {
|
|
|
color: #c94353;
|
|
|
}
|
|
|
|
|
|
.desc {
|
|
|
font-size: 24px;
|
|
|
color: #999;
|
|
|
line-height: 32px;
|
|
|
padding-bottom: 30px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.fee-container {
|
|
|
width: 690px;
|
|
|
margin: 40px auto 20px auto;
|
|
|
overflow: hidden;
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
|
.fee-line {
|
|
|
margin-bottom: 20px;
|
|
|
color: #999;
|
|
|
font-size: 28px;
|
|
|
display: flex;
|
|
|
|
|
|
.fee-title {
|
|
|
width: 50%;
|
|
|
}
|
|
|
|
|
|
.fee-price {
|
|
|
width: 50%;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
&.total {
|
|
|
margin-bottom: 40px;
|
|
|
|
|
|
.fee-title {
|
|
|
color: #000;
|
|
|
}
|
|
|
|
|
|
.fee-price {
|
|
|
color: #c94353;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.address-container {
|
|
|
position: relative;
|
|
|
width: 690px;
|
|
|
margin: 40px auto 20px auto;
|
|
|
overflow: hidden;
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
|
.icon-container {
|
|
|
position: absolute;
|
|
|
width: 100px;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
.iconfont {
|
|
|
position: absolute;
|
|
|
font-size: 40px;
|
|
|
font-weight: 500;
|
|
|
color: #000;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.address-info {
|
|
|
overflow: hidden;
|
|
|
padding: 0 0 20px 100px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
...
|
...
|
|