|
...
|
...
|
@@ -2,34 +2,59 @@ |
|
|
|
<LayoutApp :title="title">
|
|
|
|
<div class="order-page">
|
|
|
|
<div class="product">
|
|
|
|
<ImgSize class="pro-img" :src="goodsInfo.goodImg || ''" :width="200" :height="200"></ImgSize>
|
|
|
|
<ImgSize
|
|
|
|
class="pro-img"
|
|
|
|
:src="goodsInfo.goodImg || ''"
|
|
|
|
:width="200"
|
|
|
|
:height="200"
|
|
|
|
></ImgSize>
|
|
|
|
<div class="pro-info">
|
|
|
|
<p class="pro-name">{{goodsInfo.colorName}}, {{goodsInfo.sizeName}}码</p>
|
|
|
|
<p class="stock-info ufo-font">最低售价： ¥{{goodsInfo.leastPrice || '-'}}</p>
|
|
|
|
<p class="pro-name">
|
|
|
|
{{ goodsInfo.colorName }}, {{ goodsInfo.sizeName }}码
|
|
|
|
</p>
|
|
|
|
<p class="stock-info ufo-font">
|
|
|
|
最低售价： ¥{{ goodsInfo.leastPrice || "-" }}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="input-container">
|
|
|
|
<InputUfo type="number" placeholder="定价需以9结尾.例如1999"
|
|
|
|
:maxlength="8" class="ipt-number ufo-font" v-model="chgPrice" @blur="onChange">
|
|
|
|
<InputUfo
|
|
|
|
type="number"
|
|
|
|
placeholder="定价需以9结尾.例如1999"
|
|
|
|
:maxlength="8"
|
|
|
|
class="ipt-number ufo-font"
|
|
|
|
v-model="chgPrice"
|
|
|
|
@blur="onChange"
|
|
|
|
>
|
|
|
|
<span class="prepend" slot="prepend">¥</span>
|
|
|
|
</InputUfo>
|
|
|
|
</div>
|
|
|
|
<div class="earnest-container">
|
|
|
|
<p>需支付保证金：</p><p class="earnest-money">{{earnestMoney}}</p><i class="iconfont iconquestion icon-earnest" @click="showEarnestQuestion"></i>
|
|
|
|
<p class="desc">所有商品必须为国内现货，且承诺36小时内发货，交易成功后将自动退还保证金</p>
|
|
|
|
<p>需支付保证金：</p>
|
|
|
|
<p class="earnest-money">{{ earnestMoney }}</p>
|
|
|
|
<i
|
|
|
|
class="iconfont iconquestion icon-earnest"
|
|
|
|
@click="showEarnestQuestion"
|
|
|
|
></i>
|
|
|
|
<p class="desc">
|
|
|
|
所有商品必须为国内现货，且承诺36小时内发货，交易成功后将自动退还保证金
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="fee-container">
|
|
|
|
<div class="fee-line">
|
|
|
|
<p class="fee-title">平台费用: <i class="iconfont iconquestion" @click="showFeeDetail"></i></p>
|
|
|
|
<p class="fee-price">{{platformFee.amount}}</p>
|
|
|
|
<p class="fee-title">
|
|
|
|
平台费用:
|
|
|
|
<i class="iconfont iconquestion" @click="showFeeDetail"></i>
|
|
|
|
</p>
|
|
|
|
<p class="fee-price">{{ platformFee.amount }}</p>
|
|
|
|
</div>
|
|
|
|
<div class="fee-line">
|
|
|
|
<p class="fee-title">银行转账费(1%):</p>
|
|
|
|
<p class="fee-price">{{bankTransferFee}}</p>
|
|
|
|
<p class="fee-price">{{ bankTransferFee }}</p>
|
|
|
|
</div>
|
|
|
|
<div class="fee-line total">
|
|
|
|
<p class="fee-title">实际收入:</p>
|
|
|
|
<p class="fee-price">{{income}}</p>
|
|
|
|
<p class="fee-price">{{ income }}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="address-container">
|
|
...
|
...
|
@@ -37,12 +62,12 @@ |
|
|
|
<i class="iconfont iconaddress"></i>
|
|
|
|
</div>
|
|
|
|
<div class="address-info">
|
|
|
|
<p class="user-name">{{userAddress.consignee}}</p>
|
|
|
|
<p class="user-name">{{ userAddress.consignee }}</p>
|
|
|
|
<p class="user-address">
|
|
|
|
{{userAddress.area}} {{userAddress.address}}
|
|
|
|
{{ userAddress.area }} {{ userAddress.address }}
|
|
|
|
</p>
|
|
|
|
<p class="user-phone">
|
|
|
|
{{userAddress.mobile}}
|
|
|
|
{{ userAddress.mobile }}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -54,29 +79,39 @@ |
|
|
|
<Checkbox :option="labelOption" shape="square" v-model="isAgree"></Checkbox>
|
|
|
|
</div>
|
|
|
|
<a @click="showAgreement">卖家协议</a>-->
|
|
|
|
<OrderCheck v-model="isAgree" :desc="`卖家协议`" :url="agreementURL"></OrderCheck>
|
|
|
|
<OrderCheck
|
|
|
|
v-model="isAgree"
|
|
|
|
:desc="`卖家协议`"
|
|
|
|
:url="agreementURL"
|
|
|
|
></OrderCheck>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div :class="['submit-button', (isAgree && calced) ? 'active' : '']">
|
|
|
|
<div :class="['submit-button', isAgree && calced ? 'active' : '']">
|
|
|
|
<button @click="changePrice">提交</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--平台费用问号点击弹框-->
|
|
|
|
<Modal v-model="platformFeeModalVisible" :transfer="true" cancel-text="我知道了">
|
|
|
|
<Modal
|
|
|
|
v-model="platformFeeModalVisible"
|
|
|
|
:transfer="true"
|
|
|
|
cancel-text="我知道了"
|
|
|
|
>
|
|
|
|
<div class="fee-dialog-container">
|
|
|
|
<p class="modal-title">平台费用</p>
|
|
|
|
|
|
|
|
<p class="fee-line">
|
|
|
|
<span class="fee-title">商品鉴定费</span>
|
|
|
|
<span class="fee-price">{{platformFee.appraiseFee}}</span>
|
|
|
|
<span class="fee-price">{{ platformFee.appraiseFee }}</span>
|
|
|
|
</p>
|
|
|
|
<p class="fee-line">
|
|
|
|
<span class="fee-title">商品包装费</span>
|
|
|
|
<span class="fee-price">{{platformFee.packageFee}}</span>
|
|
|
|
<span class="fee-price">{{ platformFee.packageFee }}</span>
|
|
|
|
</p>
|
|
|
|
<p class="fee-line total">
|
|
|
|
<span class="fee-title">平台服务费({{platformFee.goodsPaymentRatePercent}})</span>
|
|
|
|
<span class="fee-price">{{platformFee.serviceFee}}</span>
|
|
|
|
<span class="fee-title"
|
|
|
|
>平台服务费({{ platformFee.goodsPaymentRatePercent }})</span
|
|
|
|
>
|
|
|
|
<span class="fee-price">{{ platformFee.serviceFee }}</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</Modal>
|
|
...
|
...
|
@@ -84,56 +119,69 @@ |
|
|
|
</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';
|
|
|
|
import {Checkbox} from 'cube-ui';
|
|
|
|
import {get} from 'lodash';
|
|
|
|
import Modal from './components/modal';
|
|
|
|
import OrderCheck from '../components/confirm/agree';
|
|
|
|
|
|
|
|
const {mapState, mapActions} = createNamespacedHelpers('order/priceChange');
|
|
|
|
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";
|
|
|
|
import { Checkbox } from "cube-ui";
|
|
|
|
import { get } from "lodash";
|
|
|
|
import Modal from "./components/modal";
|
|
|
|
import OrderCheck from "../components/confirm/agree";
|
|
|
|
|
|
|
|
const { mapState, mapActions } = createNamespacedHelpers("order/priceChange");
|
|
|
|
// orderCode = 1233499619151
|
|
|
|
export default {
|
|
|
|
name: 'noEntryDetail',
|
|
|
|
components: {OrderCheck, Modal, InputUfo, ScrollView, LayoutApp, ImgSize, Checkbox},
|
|
|
|
name: "noEntryDetail",
|
|
|
|
components: {
|
|
|
|
OrderCheck,
|
|
|
|
Modal,
|
|
|
|
InputUfo,
|
|
|
|
ScrollView,
|
|
|
|
LayoutApp,
|
|
|
|
ImgSize,
|
|
|
|
Checkbox
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
title: '调价',
|
|
|
|
agreementURL: 'https://activity.yoho.cn/feature/3187.html?share_id=5851&title=ufo-%E5%8D%96%E5%AE%B6%E5%8D%8F%E8%AE%AE',
|
|
|
|
title: "调价",
|
|
|
|
agreementURL:
|
|
|
|
"https://activity.yoho.cn/feature/3187.html?share_id=5851&title=ufo-%E5%8D%96%E5%AE%B6%E5%8D%8F%E8%AE%AE",
|
|
|
|
platformFeeModalVisible: false,
|
|
|
|
platformFee: {
|
|
|
|
amount: '-¥0',
|
|
|
|
appraiseFee: '¥0.00',
|
|
|
|
packageFee: '¥0.00',
|
|
|
|
serviceFee: '¥0.00',
|
|
|
|
goodsPaymentRatePercent: '0.00%',
|
|
|
|
payChannelPercentage: '0.00%'
|
|
|
|
amount: "-¥0",
|
|
|
|
appraiseFee: "¥0.00",
|
|
|
|
packageFee: "¥0.00",
|
|
|
|
serviceFee: "¥0.00",
|
|
|
|
goodsPaymentRatePercent: "0.00%",
|
|
|
|
payChannelPercentage: "0.00%"
|
|
|
|
},
|
|
|
|
bankTransferFee: '-¥0',
|
|
|
|
income: '¥0',
|
|
|
|
errorTip: '',
|
|
|
|
chgPrice: '',
|
|
|
|
bankTransferFee: "-¥0",
|
|
|
|
income: "¥0",
|
|
|
|
errorTip: "",
|
|
|
|
chgPrice: "",
|
|
|
|
calced: false,
|
|
|
|
earnestMoney: '¥0',
|
|
|
|
earnestMoney: "¥0",
|
|
|
|
// 保证金
|
|
|
|
earnestPrice: 0,
|
|
|
|
isAgree: false,
|
|
|
|
labelOption: {
|
|
|
|
label: '我已阅读并同意'
|
|
|
|
label: "我已阅读并同意"
|
|
|
|
},
|
|
|
|
time: 15000
|
|
|
|
};
|
|
|
|
},
|
|
|
|
asyncData({store, router}) {
|
|
|
|
return store.dispatch('order/priceChange/fetchOrder', {orderCode: router.params.orderCode});
|
|
|
|
asyncData({ store, router }) {
|
|
|
|
return store.dispatch("order/priceChange/fetchOrder", {
|
|
|
|
orderCode: router.params.orderCode
|
|
|
|
});
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
// this.fetchOrder({orderCode: this.$route.params.orderCode});
|
|
|
|
// this.inputChange = debounce(this.onChange.bind(this), 500);
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState(['noEntryOrderInfo']),
|
|
|
|
...mapState(["noEntryOrderInfo"]),
|
|
|
|
goodsInfo() {
|
|
|
|
return this.noEntryOrderInfo.goodsInfo || {};
|
|
|
|
},
|
|
...
|
...
|
@@ -145,60 +193,65 @@ export default { |
|
|
|
chgPrice() {
|
|
|
|
this.calced = false;
|
|
|
|
this.platformFee = {
|
|
|
|
amount: '-¥0',
|
|
|
|
appraiseFee: '¥0.00',
|
|
|
|
packageFee: '¥0.00',
|
|
|
|
serviceFee: '¥0.00',
|
|
|
|
goodsPaymentRatePercent: '0.00%',
|
|
|
|
payChannelPercentage: '0.00%'
|
|
|
|
amount: "-¥0",
|
|
|
|
appraiseFee: "¥0.00",
|
|
|
|
packageFee: "¥0.00",
|
|
|
|
serviceFee: "¥0.00",
|
|
|
|
goodsPaymentRatePercent: "0.00%",
|
|
|
|
payChannelPercentage: "0.00%"
|
|
|
|
};
|
|
|
|
this.bankTransferFee = '-¥0';
|
|
|
|
this.income = '¥0';
|
|
|
|
this.earnestMoney = '¥0';
|
|
|
|
this.bankTransferFee = "-¥0";
|
|
|
|
this.income = "¥0";
|
|
|
|
this.earnestMoney = "¥0";
|
|
|
|
this.earnestPrice = 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['fetchOrder', 'postNoEntryCalcPrice', 'postNoEntryChangePrice']),
|
|
|
|
...mapActions([
|
|
|
|
"fetchOrder",
|
|
|
|
"postNoEntryCalcPrice",
|
|
|
|
"postNoEntryChangePrice"
|
|
|
|
]),
|
|
|
|
checkPrice(price) {
|
|
|
|
let valid = false;
|
|
|
|
|
|
|
|
if (!price) {
|
|
|
|
this.errorTip = '没有价格';
|
|
|
|
this.errorTip = "没有价格";
|
|
|
|
return false;
|
|
|
|
} else if (!/^\d+$/.test(price)) {
|
|
|
|
this.errorTip = '价格只能为正整数';
|
|
|
|
this.errorTip = "价格只能为正整数";
|
|
|
|
} else if (!/9$/.test(price)) {
|
|
|
|
this.errorTip = '出售价格必须以9结尾';
|
|
|
|
this.errorTip = "出售价格必须以9结尾";
|
|
|
|
} else {
|
|
|
|
this.errorTip = '';
|
|
|
|
this.errorTip = "";
|
|
|
|
valid = true;
|
|
|
|
}
|
|
|
|
console.log(this.errorTip, valid);
|
|
|
|
return valid;
|
|
|
|
},
|
|
|
|
changePrice() { // 点击提交按钮
|
|
|
|
changePrice() {
|
|
|
|
// 点击提交按钮
|
|
|
|
if (this.isAgree && this.calced) {
|
|
|
|
this.$createDialog({
|
|
|
|
type: 'confirm',
|
|
|
|
content: '重新出售后本次出售保证金原路返回',
|
|
|
|
type: "confirm",
|
|
|
|
content: "重新出售后本次出售保证金原路返回",
|
|
|
|
confirmBtn: {
|
|
|
|
text: '我再想想',
|
|
|
|
text: "我再想想",
|
|
|
|
active: true,
|
|
|
|
disabled: false,
|
|
|
|
disabled: false
|
|
|
|
},
|
|
|
|
cancelBtn: {
|
|
|
|
text: '重新出售',
|
|
|
|
text: "重新出售",
|
|
|
|
active: false,
|
|
|
|
disabled: false
|
|
|
|
},
|
|
|
|
onCancel: () => {
|
|
|
|
this.onPriceChangeConfirm({
|
|
|
|
price: this.chgPrice,
|
|
|
|
earnestPrice: this.earnestPrice,
|
|
|
|
skup: this.goodsInfo.skup
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
}).show();
|
|
|
|
}
|
|
|
|
},
|
|
...
|
...
|
@@ -211,10 +264,11 @@ export default { |
|
|
|
console.log(result);
|
|
|
|
|
|
|
|
if (result && result.code === 200) {
|
|
|
|
this.platformFee = get(result, 'data.platformFee', '');
|
|
|
|
this.bankTransferFee = get(result, 'data.bankTransferFee', '');
|
|
|
|
this.income = '¥' + get(result, 'data.income', '');
|
|
|
|
this.earnestMoney = '¥' + get(result, 'data.earnestMoney', '');
|
|
|
|
this.platformFee = get(result, "data.platformFee", "");
|
|
|
|
this.bankTransferFee = get(result, "data.bankTransferFee", "");
|
|
|
|
this.income = "¥" + get(result, "data.income", "");
|
|
|
|
this.earnestMoney = "¥" + get(result, "data.earnestMoney", "");
|
|
|
|
this.earnestPrice = get(result, "data.earnestMoney", 0);
|
|
|
|
this.calced = true;
|
|
|
|
} else {
|
|
|
|
if (result.message) {
|
|
...
|
...
|
@@ -224,27 +278,30 @@ export default { |
|
|
|
|
|
|
|
this.$createToast({
|
|
|
|
txt: this.errorTip,
|
|
|
|
type: 'txt'
|
|
|
|
type: "txt"
|
|
|
|
}).show();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onChange(price) { // 价格改变时(文本框离开焦点)
|
|
|
|
onChange(price) {
|
|
|
|
// 价格改变时(文本框离开焦点)
|
|
|
|
if (this.checkPrice(price)) {
|
|
|
|
this.calcPrice(price);
|
|
|
|
} else {
|
|
|
|
this.$createToast({
|
|
|
|
txt: this.errorTip,
|
|
|
|
type: 'txt'
|
|
|
|
type: "txt"
|
|
|
|
}).show();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
showFeeDetail() { // 显示平台费用详情
|
|
|
|
showFeeDetail() {
|
|
|
|
// 显示平台费用详情
|
|
|
|
this.platformFeeModalVisible = true;
|
|
|
|
},
|
|
|
|
|
|
|
|
showEarnestQuestion() { // 跳转保证金说明页
|
|
|
|
console.log('showEarnest');
|
|
|
|
this.$xianyu.goXianyuNewPage({url: this.agreementURL});
|
|
|
|
showEarnestQuestion() {
|
|
|
|
// 跳转保证金说明页
|
|
|
|
console.log("showEarnest");
|
|
|
|
this.$xianyu.goXianyuNewPage({ url: this.agreementURL });
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
...
|
...
|
@@ -253,7 +310,7 @@ export default { |
|
|
|
* @param skup
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
*/
|
|
|
|
async onPriceChangeConfirm({price, skup}) {
|
|
|
|
async onPriceChangeConfirm({ price, earnestPrice, skup }) {
|
|
|
|
const that = this;
|
|
|
|
const result = await this.postNoEntryChangePrice({
|
|
|
|
price,
|
|
...
|
...
|
@@ -264,15 +321,15 @@ export default { |
|
|
|
console.log(result);
|
|
|
|
this.$createOrderPayType({
|
|
|
|
orderCode: result.data.orderCode,
|
|
|
|
price: price,
|
|
|
|
desc: '保证金',
|
|
|
|
price: parseFloat(`${earnestPrice}`).toFixed(2),
|
|
|
|
desc: "保证金",
|
|
|
|
extra: JSON.stringify({
|
|
|
|
type: 'sell',
|
|
|
|
type: "sell",
|
|
|
|
back: {
|
|
|
|
name: 'InSaleOrderList'
|
|
|
|
name: "InSaleOrderList"
|
|
|
|
},
|
|
|
|
forward: {
|
|
|
|
name: 'SellPayOk',
|
|
|
|
name: "SellPayOk",
|
|
|
|
query: {
|
|
|
|
orderCode: result.data.orderCode
|
|
|
|
}
|
|
...
|
...
|
@@ -281,9 +338,9 @@ export default { |
|
|
|
onCloseAction() {
|
|
|
|
that.clearData();
|
|
|
|
that.$router.replace({
|
|
|
|
name: 'sellOrderDetail',
|
|
|
|
name: "sellOrderDetail",
|
|
|
|
params: {
|
|
|
|
owner: 'sell',
|
|
|
|
owner: "sell",
|
|
|
|
code: result.data.orderCode
|
|
|
|
}
|
|
|
|
});
|
|
...
|
...
|
@@ -291,30 +348,31 @@ export default { |
|
|
|
}).show();
|
|
|
|
} else {
|
|
|
|
this.$createToast({
|
|
|
|
txt: result.message || '调价失败',
|
|
|
|
type: 'txt'
|
|
|
|
txt: result.message || "调价失败",
|
|
|
|
type: "txt"
|
|
|
|
}).show();
|
|
|
|
}
|
|
|
|
|
|
|
|
// console.log(result);
|
|
|
|
},
|
|
|
|
clearData() { // 清空数据状态
|
|
|
|
clearData() {
|
|
|
|
// 清空数据状态
|
|
|
|
console.log(this.$router);
|
|
|
|
this.platformFeeModalVisible = false;
|
|
|
|
this.platformFee = {
|
|
|
|
amount: '-¥0',
|
|
|
|
appraiseFee: '¥0.00',
|
|
|
|
packageFee: '¥0.00',
|
|
|
|
serviceFee: '¥0.00',
|
|
|
|
goodsPaymentRatePercent: '0.00%',
|
|
|
|
payChannelPercentage: '0.00%'
|
|
|
|
amount: "-¥0",
|
|
|
|
appraiseFee: "¥0.00",
|
|
|
|
packageFee: "¥0.00",
|
|
|
|
serviceFee: "¥0.00",
|
|
|
|
goodsPaymentRatePercent: "0.00%",
|
|
|
|
payChannelPercentage: "0.00%"
|
|
|
|
};
|
|
|
|
this.bankTransferFee = '-¥0';
|
|
|
|
this.income = '¥0';
|
|
|
|
this.errorTip = '';
|
|
|
|
this.chgPrice = '';
|
|
|
|
this.bankTransferFee = "-¥0";
|
|
|
|
this.income = "¥0";
|
|
|
|
this.errorTip = "";
|
|
|
|
this.chgPrice = "";
|
|
|
|
this.calced = false;
|
|
|
|
this.earnestMoney = '¥0';
|
|
|
|
this.earnestMoney = "¥0";
|
|
|
|
this.isAgree = false;
|
|
|
|
}
|
|
|
|
}
|
|
...
|
...
|
@@ -322,297 +380,297 @@ export default { |
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.order-page {
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
right: 0;
|
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: scroll;
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
|
|
|
.title {
|
|
|
|
line-height: 82px;
|
|
|
|
font-size: 68px;
|
|
|
|
font-weight: bold;
|
|
|
|
padding: 2px 40px 0 40px;
|
|
|
|
}
|
|
|
|
.order-page {
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
right: 0;
|
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: scroll;
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
-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;
|
|
|
|
|
|
|
|
.product {
|
|
|
|
margin: 20px auto;
|
|
|
|
padding: 0 30px;
|
|
|
|
.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-img {
|
|
|
|
width: 200px;
|
|
|
|
height: 200px;
|
|
|
|
.pro-name {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #444;
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
height: auto;
|
|
|
|
}
|
|
|
|
.stock-info {
|
|
|
|
position: relative;
|
|
|
|
color: #000;
|
|
|
|
margin-top: 24px;
|
|
|
|
font-size: 28px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.pro-info {
|
|
|
|
padding: 64px 40px 0 40px;
|
|
|
|
line-height: 32px;
|
|
|
|
overflow: hidden;
|
|
|
|
.stock-text {
|
|
|
|
text-indent: 128px;
|
|
|
|
font-size: 28px;
|
|
|
|
font-weight: 600;
|
|
|
|
line-height: 44px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.pro-name {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #444;
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
.input-container {
|
|
|
|
position: relative;
|
|
|
|
display: block;
|
|
|
|
width: 690px;
|
|
|
|
margin: 0 auto;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.stock-info {
|
|
|
|
position: relative;
|
|
|
|
color: #000;
|
|
|
|
margin-top: 24px;
|
|
|
|
font-size: 28px;
|
|
|
|
}
|
|
|
|
.ipt-number {
|
|
|
|
/deep/ .prepend {
|
|
|
|
width: 40px;
|
|
|
|
margin-left: 20px;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.stock-text {
|
|
|
|
text-indent: 128px;
|
|
|
|
font-size: 28px;
|
|
|
|
font-weight: 600;
|
|
|
|
line-height: 44px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.earnest-container {
|
|
|
|
width: 690px;
|
|
|
|
margin: 10px auto;
|
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
|
|
|
p {
|
|
|
|
display: inline-block;
|
|
|
|
font-size: 28px;
|
|
|
|
line-height: 60px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.input-container {
|
|
|
|
position: relative;
|
|
|
|
display: block;
|
|
|
|
width: 690px;
|
|
|
|
margin: 0 auto;
|
|
|
|
overflow: hidden;
|
|
|
|
.earnest-money {
|
|
|
|
color: #c94353;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ipt-number {
|
|
|
|
/deep/ .prepend {
|
|
|
|
width: 40px;
|
|
|
|
margin-left: 20px;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.desc {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #999;
|
|
|
|
line-height: 32px;
|
|
|
|
padding-bottom: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.earnest-container {
|
|
|
|
width: 690px;
|
|
|
|
margin: 10px auto;
|
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
.icon-earnest {
|
|
|
|
font-size: 28px;
|
|
|
|
color: #999;
|
|
|
|
margin-left: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
display: inline-block;
|
|
|
|
font-size: 28px;
|
|
|
|
line-height: 60px;
|
|
|
|
}
|
|
|
|
.fee-container {
|
|
|
|
width: 690px;
|
|
|
|
margin: 40px auto 20px auto;
|
|
|
|
overflow: hidden;
|
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
|
|
|
.earnest-money {
|
|
|
|
color: #c94353;
|
|
|
|
}
|
|
|
|
.fee-line {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
color: #999;
|
|
|
|
font-size: 28px;
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
.desc {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #999;
|
|
|
|
line-height: 32px;
|
|
|
|
padding-bottom: 30px;
|
|
|
|
.fee-title {
|
|
|
|
width: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-earnest {
|
|
|
|
font-size: 28px;
|
|
|
|
color: #999;
|
|
|
|
margin-left: 20px;
|
|
|
|
.fee-price {
|
|
|
|
width: 50%;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
|
|
&.total {
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
|
|
|
.fee-title {
|
|
|
|
width: 50%;
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fee-price {
|
|
|
|
width: 50%;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.total {
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
|
|
|
.fee-title {
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fee-price {
|
|
|
|
color: #c94353;
|
|
|
|
}
|
|
|
|
color: #c94353;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.iconquestion {
|
|
|
|
font-size: 28px;
|
|
|
|
}
|
|
|
|
.iconquestion {
|
|
|
|
font-size: 28px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.white-space {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 180px;
|
|
|
|
}
|
|
|
|
.white-space {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 180px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.address-container {
|
|
|
|
position: relative;
|
|
|
|
width: 690px;
|
|
|
|
margin: 40px auto 40px auto;
|
|
|
|
overflow: hidden;
|
|
|
|
.address-container {
|
|
|
|
position: relative;
|
|
|
|
width: 690px;
|
|
|
|
margin: 40px auto 40px auto;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
.icon-container {
|
|
|
|
position: absolute;
|
|
|
|
width: 100px;
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
.icon-container {
|
|
|
|
.iconfont {
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
font-size: 40px;
|
|
|
|
font-weight: 500;
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.address-info {
|
|
|
|
overflow: hidden;
|
|
|
|
padding: 0 0 20px 100px;
|
|
|
|
.address-info {
|
|
|
|
overflow: hidden;
|
|
|
|
padding: 0 0 20px 100px;
|
|
|
|
|
|
|
|
.user-name {
|
|
|
|
font-size: 32px;
|
|
|
|
font-weight: 500;
|
|
|
|
line-height: 36px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
.user-name {
|
|
|
|
font-size: 32px;
|
|
|
|
font-weight: 500;
|
|
|
|
line-height: 36px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-address {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #999;
|
|
|
|
line-height: 30px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
.user-address {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #999;
|
|
|
|
line-height: 30px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-phone {
|
|
|
|
font-size: 28px;
|
|
|
|
font-weight: bold;
|
|
|
|
line-height: 32px;
|
|
|
|
}
|
|
|
|
.user-phone {
|
|
|
|
font-size: 28px;
|
|
|
|
font-weight: bold;
|
|
|
|
line-height: 32px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/deep/ .modal-content {
|
|
|
|
width: 570px;
|
|
|
|
}
|
|
|
|
/deep/ .modal-content {
|
|
|
|
width: 570px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fee-dialog-container {
|
|
|
|
width: 100%;
|
|
|
|
.fee-dialog-container {
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
.modal-title {
|
|
|
|
line-height: 120px;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 28px;
|
|
|
|
}
|
|
|
|
.modal-title {
|
|
|
|
line-height: 120px;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 28px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fee-line {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
color: #000;
|
|
|
|
font-size: 28px;
|
|
|
|
display: flex;
|
|
|
|
.fee-line {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
color: #000;
|
|
|
|
font-size: 28px;
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
.fee-title {
|
|
|
|
width: 55%;
|
|
|
|
}
|
|
|
|
.fee-title {
|
|
|
|
width: 55%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fee-price {
|
|
|
|
width: 45%;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
.fee-price {
|
|
|
|
width: 45%;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.submit-container {
|
|
|
|
width: 100%;
|
|
|
|
height: 180px;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0;
|
|
|
|
z-index: 9;
|
|
|
|
|
|
|
|
.submit-container {
|
|
|
|
.agree-container {
|
|
|
|
width: 100%;
|
|
|
|
height: 180px;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0;
|
|
|
|
z-index: 9;
|
|
|
|
|
|
|
|
.agree-container {
|
|
|
|
width: 100%;
|
|
|
|
border-top: 1px solid #f0f0f0;
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
a {
|
|
|
|
display: inline-block;
|
|
|
|
text-decoration: underline;
|
|
|
|
color: #64ad88;
|
|
|
|
}
|
|
|
|
border-top: 1px solid #f0f0f0;
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
.checkbox {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
display: inline-block;
|
|
|
|
text-decoration: underline;
|
|
|
|
color: #64ad88;
|
|
|
|
}
|
|
|
|
|
|
|
|
/deep/ .cube-checkbox-wrap {
|
|
|
|
padding: 10px 0;
|
|
|
|
color: #999;
|
|
|
|
.checkbox {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cube-checkbox-label {
|
|
|
|
font-size: 0.6rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/deep/ .cube-checkbox-wrap {
|
|
|
|
padding: 10px 0;
|
|
|
|
color: #999;
|
|
|
|
|
|
|
|
/deep/ .cube-checkbox_checked .cube-checkbox-ui i {
|
|
|
|
color: #0c2b48;
|
|
|
|
.cube-checkbox-label {
|
|
|
|
font-size: 0.6rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.submit-button {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 100px;
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
button {
|
|
|
|
display: block;
|
|
|
|
width: 670px;
|
|
|
|
height: 88px;
|
|
|
|
border-radius: 60px;
|
|
|
|
margin: 0 auto;
|
|
|
|
color: #fff;
|
|
|
|
background-color: #ccc;
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
/deep/ .cube-checkbox_checked .cube-checkbox-ui i {
|
|
|
|
color: #0c2b48;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active button{
|
|
|
|
background-color: #0c2b48;
|
|
|
|
}
|
|
|
|
.submit-button {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 100px;
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
button {
|
|
|
|
display: block;
|
|
|
|
width: 670px;
|
|
|
|
height: 88px;
|
|
|
|
border-radius: 60px;
|
|
|
|
margin: 0 auto;
|
|
|
|
color: #fff;
|
|
|
|
background-color: #ccc;
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active button {
|
|
|
|
background-color: #0c2b48;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
