|
...
|
...
|
@@ -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>
|
|
...
|
...
|
@@ -87,22 +122,31 @@ |
|
|
|
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 { createNamespacedHelpers } from 'vuex';
|
|
|
|
import InputUfo from './components/input-ufo';
|
|
|
|
import {Checkbox} from 'cube-ui';
|
|
|
|
import {get} from 'lodash';
|
|
|
|
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');
|
|
|
|
const { mapState, mapActions } = createNamespacedHelpers('order/priceChange');
|
|
|
|
// orderCode = 1233499619151
|
|
|
|
export default {
|
|
|
|
name: 'noEntryDetail',
|
|
|
|
components: {OrderCheck, Modal, InputUfo, ScrollView, LayoutApp, ImgSize, Checkbox},
|
|
|
|
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',
|
|
|
|
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',
|
|
...
|
...
|
@@ -118,6 +162,8 @@ export default { |
|
|
|
chgPrice: '',
|
|
|
|
calced: false,
|
|
|
|
earnestMoney: '¥0',
|
|
|
|
// 保证金
|
|
|
|
earnestPrice: 0,
|
|
|
|
isAgree: false,
|
|
|
|
labelOption: {
|
|
|
|
label: '我已阅读并同意'
|
|
...
|
...
|
@@ -125,8 +171,10 @@ export default { |
|
|
|
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});
|
|
...
|
...
|
@@ -155,11 +203,15 @@ export default { |
|
|
|
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;
|
|
|
|
|
|
...
|
...
|
@@ -177,7 +229,8 @@ export default { |
|
|
|
console.log(this.errorTip, valid);
|
|
|
|
return valid;
|
|
|
|
},
|
|
|
|
changePrice() { // 点击提交按钮
|
|
|
|
changePrice() {
|
|
|
|
// 点击提交按钮
|
|
|
|
if (this.isAgree && this.calced) {
|
|
|
|
this.$createDialog({
|
|
|
|
type: 'confirm',
|
|
...
|
...
|
@@ -185,7 +238,7 @@ export default { |
|
|
|
confirmBtn: {
|
|
|
|
text: '我再想想',
|
|
|
|
active: true,
|
|
|
|
disabled: false,
|
|
|
|
disabled: false
|
|
|
|
},
|
|
|
|
cancelBtn: {
|
|
|
|
text: '重新出售',
|
|
...
|
...
|
@@ -195,10 +248,10 @@ export default { |
|
|
|
onCancel: () => {
|
|
|
|
this.onPriceChangeConfirm({
|
|
|
|
price: this.chgPrice,
|
|
|
|
earnestPrice: this.earnestPrice,
|
|
|
|
skup: this.goodsInfo.skup
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
}).show();
|
|
|
|
}
|
|
|
|
},
|
|
...
|
...
|
@@ -215,6 +268,7 @@ export default { |
|
|
|
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) {
|
|
...
|
...
|
@@ -228,7 +282,8 @@ export default { |
|
|
|
}).show();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onChange(price) { // 价格改变时(文本框离开焦点)
|
|
|
|
onChange(price) {
|
|
|
|
// 价格改变时(文本框离开焦点)
|
|
|
|
if (this.checkPrice(price)) {
|
|
|
|
this.calcPrice(price);
|
|
|
|
} else {
|
|
...
|
...
|
@@ -238,13 +293,15 @@ export default { |
|
|
|
}).show();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
showFeeDetail() { // 显示平台费用详情
|
|
|
|
showFeeDetail() {
|
|
|
|
// 显示平台费用详情
|
|
|
|
this.platformFeeModalVisible = true;
|
|
|
|
},
|
|
|
|
|
|
|
|
showEarnestQuestion() { // 跳转保证金说明页
|
|
|
|
showEarnestQuestion() {
|
|
|
|
// 跳转保证金说明页
|
|
|
|
console.log('showEarnest');
|
|
|
|
this.$xianyu.goXianyuNewPage({url: this.agreementURL});
|
|
|
|
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,7 +321,7 @@ export default { |
|
|
|
console.log(result);
|
|
|
|
this.$createOrderPayType({
|
|
|
|
orderCode: result.data.orderCode,
|
|
|
|
price: price,
|
|
|
|
price: parseFloat(`${earnestPrice}`).toFixed(2),
|
|
|
|
desc: '保证金',
|
|
|
|
extra: JSON.stringify({
|
|
|
|
type: 'sell',
|
|
...
|
...
|
@@ -298,8 +355,9 @@ export default { |
|
|
|
|
|
|
|
// console.log(result);
|
|
|
|
},
|
|
|
|
clearData() { // 清空数据状态
|
|
|
|
console.log(this.$router);
|
|
|
|
clearData() {
|
|
|
|
// 清空数据状态
|
|
|
|
// console.log(this.$router);
|
|
|
|
this.platformFeeModalVisible = false;
|
|
|
|
this.platformFee = {
|
|
|
|
amount: '-¥0',
|
|
...
|
...
|
@@ -321,298 +379,298 @@ 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;
|
|
|
|
}
|
|
|
|
<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;
|
|
|
|
}
|
|
|
|
|
|
|
|
.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> |
...
|
...
|
|
