|
|
@@ -0,0 +1,843 @@
|
|
|
+<config>
|
|
|
+{
|
|
|
+ "navigationBarTitleText": "提交选配"
|
|
|
+}
|
|
|
+</config>
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="card" style="padding-bottom: 20px;">
|
|
|
+ <img :src="bookForm.image" mode="aspectFill" class="cover" />
|
|
|
+ <div class="title">恭喜您完成定制</div>
|
|
|
+ <div class="sub-title">{{ bookForm.color.name }}</div>
|
|
|
+ <div class="divider"></div>
|
|
|
+ <div class="small-title">全部选择配置</div>
|
|
|
+ <div class="param" style="margin-top: 14px;">
|
|
|
+ <div class="name">动力：{{ bookForm.carDesc }}</div>
|
|
|
+ <div class="value">¥0</div>
|
|
|
+ </div>
|
|
|
+ <div class="param">
|
|
|
+ <div class="name">座椅：{{ bookForm.seat.name }}</div>
|
|
|
+ <div class="value">¥{{ bookForm.seat.price }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="param">
|
|
|
+ <div class="name">颜色：{{ bookForm.color.name }}/{{ bookForm.color.material }}</div>
|
|
|
+ <div class="value">¥{{ bookForm.color.price }}</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="param">
|
|
|
+ <div class="name">材质：{{ bookForm.color.material }}</div>
|
|
|
+ <div class="value">¥{{ bookForm.color.price }}</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="param">
|
|
|
+ <div class="name">内饰：{{ bookForm.upholstery.name }}</div>
|
|
|
+ <div class="value">¥{{ bookForm.upholstery.price }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="param">
|
|
|
+ <div class="name">轮毂：{{ bookForm.wheelHub.name }}</div>
|
|
|
+ <div class="value">¥{{ bookForm.wheelHub.price }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="param">
|
|
|
+ <div class="name">卡钳：{{ bookForm.caliper.name }}</div>
|
|
|
+ <div class="value">¥{{ bookForm.caliper.price }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="param" v-for="(item, i) in bookForm.optionalPackage" :key="i">
|
|
|
+ <div class="name">{{ item.name }}</div>
|
|
|
+ <div class="value">¥{{ item.price }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="sum" style="margin-top: 14px;">
|
|
|
+ <div class="name">总价</div>
|
|
|
+ <div class="value">¥{{ bookForm.totalPrice }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="divider"></div>
|
|
|
+ <div class="sum" style="margin-top: 14px;">
|
|
|
+ <div class="name">订金</div>
|
|
|
+ <div class="value prim">¥{{ bookForm.deposit }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card" style="padding-bottom: 24px;">
|
|
|
+ <div class="title">填写个人信息</div>
|
|
|
+ <div class="field" style="margin-top: 28px;">
|
|
|
+ <div class="label">姓名</div>
|
|
|
+ <input v-model="name" class="input" placeholder-class="placeholder" placeholder="请输入姓名" />
|
|
|
+ </div>
|
|
|
+ <div class="field">
|
|
|
+ <div class="label">身份证号</div>
|
|
|
+ <input
|
|
|
+ v-model="idCard"
|
|
|
+ class="input"
|
|
|
+ type="idcard"
|
|
|
+ placeholder-class="placeholder"
|
|
|
+ placeholder="请输入身份证号"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="field">
|
|
|
+ <div class="label">手机号</div>
|
|
|
+ <input
|
|
|
+ v-model="mobile"
|
|
|
+ class="input"
|
|
|
+ type="number"
|
|
|
+ placeholder-class="placeholder"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ />
|
|
|
+ <!-- <div class="input" v-if="mobile"></div>
|
|
|
+ <button class="input placeholder" v-else open-type="getPhoneNumber" @getphonenumber="getphonenumber">
|
|
|
+ 请输入手机号
|
|
|
+ </button> -->
|
|
|
+ </div>
|
|
|
+ <div class="field" @click="showCityPicker = true">
|
|
|
+ <div class="label">提车城市</div>
|
|
|
+ <div class="input" v-if="cityId">{{ cityName }}</div>
|
|
|
+ <div class="input placeholder" v-else>请选择城市</div>
|
|
|
+ <img src="../static/imgs/icon_arrow_right.png" class="arrow" />
|
|
|
+ </div>
|
|
|
+ <div class="field" @click="chooseDealer">
|
|
|
+ <div class="label">提车经销商</div>
|
|
|
+ <div class="input" v-if="dealerId">{{ dealerName }}</div>
|
|
|
+ <div class="input placeholder" v-else>请选经销商</div>
|
|
|
+ <img src="../static/imgs/icon_arrow_right.png" class="arrow" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="title">选择支付方式</div>
|
|
|
+ <div class="btns">
|
|
|
+ <div class="btn" @click="type = 1" :class="{ active: type === 1 }">
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ type === 1
|
|
|
+ ? require('../static/imgs/btn_icon_check.png')
|
|
|
+ : require('../static/imgs/btn_icon_uncheck.png')
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <div>全款购车</div>
|
|
|
+ </div>
|
|
|
+ <div class="btn" style="margin-left: 18px;" @click="type = 2" :class="{ active: type === 2 }">
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ type === 2
|
|
|
+ ? require('../static/imgs/btn_icon_check.png')
|
|
|
+ : require('../static/imgs/btn_icon_uncheck.png')
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <div>贷款购车</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="type === 1" style="height: 28px;"></div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="slider-title">
|
|
|
+ <div style="flex-grow: 1;">首付比例</div>
|
|
|
+ <div>{{ percent }}%</div>
|
|
|
+ </div>
|
|
|
+ <div class="slider-wrapper">
|
|
|
+ <img src="../static/imgs/minus.png" class="icon" @click="addPercent(-1)" />
|
|
|
+ <div class="slider" id="slider">
|
|
|
+ <div class="progress" :style="{ width: percent + '%' }"></div>
|
|
|
+ <div
|
|
|
+ class="dot"
|
|
|
+ :style="{ left: percent + '%' }"
|
|
|
+ @touchstart="touchstart"
|
|
|
+ @touchmove.stop="touchmove"
|
|
|
+ @touchend="touchend"
|
|
|
+ @touchcancel="touchend"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <img src="../static/imgs/plus.png" class="icon" @click="addPercent(1)" />
|
|
|
+ </div>
|
|
|
+ <div class="tabs">
|
|
|
+ <div class="tab" :class="{ active: tab === 0 }" @click="tab = 0">
|
|
|
+ <div class="name">{{ loanOptions[0].month }}期</div>
|
|
|
+ <div class="desc">利率{{ loanOptions[0].rate * 100 }}%</div>
|
|
|
+ </div>
|
|
|
+ <div class="tab" :class="{ active: tab === 1 }" @click="tab = 1">
|
|
|
+ <div class="name">{{ loanOptions[1].month }}期</div>
|
|
|
+ <div class="desc">利率{{ loanOptions[1].rate * 100 }}%</div>
|
|
|
+ </div>
|
|
|
+ <div class="tab" :class="{ active: tab === 2 }" @click="tab = 2">
|
|
|
+ <div class="name">{{ loanOptions[2].month }}期</div>
|
|
|
+ <div class="desc">利率{{ loanOptions[2].rate * 100 }}%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="moneys">
|
|
|
+ <div class="row">
|
|
|
+ <div class="label">首付款</div>
|
|
|
+ <div class="value">¥{{ num(downPayment) }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="label">贷款总额</div>
|
|
|
+ <div class="value">¥{{ num(loan) }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="label">月供金额</div>
|
|
|
+ <div class="value">¥{{ num(monthly) }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tip">此方案仅限参考，实际情况请咨询当地经销商</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="agree" @click="agree = !agree">
|
|
|
+ <img :src="agree ? require('../static/imgs/check.png') : require('../static/imgs/uncheck.png')" />
|
|
|
+ <div>已阅读并同意</div>
|
|
|
+ <div class="prim" @click.stop="showAgree = true">《在线订车协议》</div>
|
|
|
+ </div>
|
|
|
+ <van-button class="btn" block :color="$colors.prim" @click="submit">立即下订</van-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-dialog
|
|
|
+ use-slot
|
|
|
+ title="预定协议"
|
|
|
+ :show="showAgree"
|
|
|
+ :confirm-button-color="$colors.prim"
|
|
|
+ confirm-button-text="关闭"
|
|
|
+ @close="showAgree = false"
|
|
|
+ >
|
|
|
+ <div class="agree-content">
|
|
|
+ <rich-text :nodes="agreeContent"></rich-text>
|
|
|
+ </div>
|
|
|
+ </van-dialog>
|
|
|
+
|
|
|
+ <van-action-sheet :show="showCityPicker">
|
|
|
+ <!-- eslint-disable -->
|
|
|
+ <van-picker
|
|
|
+ :columns="[
|
|
|
+ { values: [], className: 'column1' },
|
|
|
+ { values: [], className: 'column2' },
|
|
|
+ ]"
|
|
|
+ value-key="name"
|
|
|
+ show-toolbar
|
|
|
+ title="选择城市"
|
|
|
+ @cancel="showCityPicker = false"
|
|
|
+ @confirm="confirmCity"
|
|
|
+ @change="pickerChange"
|
|
|
+ id="cityPicker"
|
|
|
+ />
|
|
|
+ <!-- eslint-enable -->
|
|
|
+ </van-action-sheet>
|
|
|
+
|
|
|
+ <van-action-sheet :show="showDealerPicker">
|
|
|
+ <van-picker
|
|
|
+ :columns="dealerList"
|
|
|
+ value-key="name"
|
|
|
+ show-toolbar
|
|
|
+ title="选择经销商"
|
|
|
+ @cancel="showDealerPicker = false"
|
|
|
+ @confirm="confirmDealer"
|
|
|
+ id="dealerPicker"
|
|
|
+ />
|
|
|
+ </van-action-sheet>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ type: 1,
|
|
|
+ tab: 0,
|
|
|
+ loanOptions: [
|
|
|
+ {
|
|
|
+ month: 12,
|
|
|
+ rate: 0.0388
|
|
|
+ },
|
|
|
+ {
|
|
|
+ month: 24,
|
|
|
+ rate: 0.0488
|
|
|
+ },
|
|
|
+ {
|
|
|
+ month: 36,
|
|
|
+ rate: 0.0588
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ percent: 30,
|
|
|
+ touch: false,
|
|
|
+ sliderRect: {
|
|
|
+ left: 0,
|
|
|
+ width: 0
|
|
|
+ },
|
|
|
+ agree: false,
|
|
|
+ agreeContent: require('../agree.js').default,
|
|
|
+ showAgree: false,
|
|
|
+ name: '',
|
|
|
+ mobile: '',
|
|
|
+ idCard: '',
|
|
|
+ provinceId: null,
|
|
|
+ provinceName: null,
|
|
|
+ cityId: null,
|
|
|
+ cityName: null,
|
|
|
+ showCityPicker: null,
|
|
|
+ picker: null,
|
|
|
+ dealerName: '',
|
|
|
+ dealerCode: '',
|
|
|
+ dealerId: null,
|
|
|
+ spNo: null,
|
|
|
+ dealerList: [],
|
|
|
+ showDealerPicker: false,
|
|
|
+ bookForm: {
|
|
|
+ carId: null,
|
|
|
+ carDesc: null,
|
|
|
+ image: '',
|
|
|
+ color: {
|
|
|
+ id: null,
|
|
|
+ name: null,
|
|
|
+ material: null,
|
|
|
+ price: null
|
|
|
+ },
|
|
|
+ seat: {
|
|
|
+ id: null,
|
|
|
+ name: null,
|
|
|
+ price: null
|
|
|
+ },
|
|
|
+ upholstery: {
|
|
|
+ id: null,
|
|
|
+ name: null,
|
|
|
+ price: null
|
|
|
+ },
|
|
|
+ wheelHub: {
|
|
|
+ id: null,
|
|
|
+ name: null,
|
|
|
+ price: null
|
|
|
+ },
|
|
|
+ caliper: {
|
|
|
+ id: null,
|
|
|
+ name: null,
|
|
|
+ price: null
|
|
|
+ },
|
|
|
+ optionalPackage: [],
|
|
|
+ totalPrice: 0,
|
|
|
+ deposit: 0
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.picker = this.$mp.page.selectComponent('#cityPicker');
|
|
|
+ this.$http
|
|
|
+ .get(
|
|
|
+ 'https://dealer.jetour.com.cn/api-basic/api/region/findAllProvinces',
|
|
|
+ {},
|
|
|
+ {
|
|
|
+ header: {
|
|
|
+ Authorization: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ this.picker.setColumnValues(0, res);
|
|
|
+ if (res[0]) {
|
|
|
+ this.pickerChange({
|
|
|
+ detail: {
|
|
|
+ index: 0,
|
|
|
+ value: [res[0]]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let eventChannel = this.$mp.page.getOpenerEventChannel();
|
|
|
+ if (eventChannel.on) {
|
|
|
+ eventChannel.on('bookForm', data => {
|
|
|
+ this.bookForm = data;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ downPayment() {
|
|
|
+ return ((this.bookForm.totalPrice || 0) * this.percent) / 100;
|
|
|
+ },
|
|
|
+ loan() {
|
|
|
+ return (this.bookForm.totalPrice || 0) - this.downPayment;
|
|
|
+ },
|
|
|
+ monthly() {
|
|
|
+ let monthly = 0;
|
|
|
+ switch (this.tab) {
|
|
|
+ case 0:
|
|
|
+ monthly = (this.loan / 12) * 1.0388;
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ monthly = (this.loan / 24) * 1.0488;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ monthly = (this.loan / 36) * 1.0588;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return Math.ceil(monthly);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ num(x) {
|
|
|
+ return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
|
+ },
|
|
|
+ addPercent(d) {
|
|
|
+ this.percent = Math.min(Math.max(this.percent + d, 30), 100);
|
|
|
+ },
|
|
|
+ touchstart() {
|
|
|
+ const query = wx.createSelectorQuery();
|
|
|
+ query.select('#slider').boundingClientRect();
|
|
|
+ query.exec(res => {
|
|
|
+ console.log(res[0]);
|
|
|
+ this.sliderRect = res[0];
|
|
|
+ this.touch = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ touchmove(e) {
|
|
|
+ let progress = parseInt(((e.touches[0].clientX - this.sliderRect.left) / this.sliderRect.width) * 100);
|
|
|
+ this.percent = Math.min(Math.max(progress, 30), 100);
|
|
|
+ },
|
|
|
+ touchend() {
|
|
|
+ this.touch = false;
|
|
|
+ },
|
|
|
+ confirmCity() {
|
|
|
+ this.provinceId = this.picker.getColumnValue(0).id;
|
|
|
+ this.provinceName = this.picker.getColumnValue(0).name;
|
|
|
+ this.cityId = this.picker.getColumnValue(1).id;
|
|
|
+ this.cityName = this.picker.getColumnValue(1).name;
|
|
|
+ this.showCityPicker = false;
|
|
|
+ this.dealerName = '';
|
|
|
+ this.dealerId = null;
|
|
|
+ this.getDealer();
|
|
|
+ },
|
|
|
+ pickerChange(e) {
|
|
|
+ if (e.detail.index === 0) {
|
|
|
+ this.$http
|
|
|
+ .get(
|
|
|
+ // eslint-disable-next-line prettier/prettier
|
|
|
+ `https://dealer.jetour.com.cn/api-basic/api/region/findCityByProvinceId/${e.detail.value[0].id}`,
|
|
|
+ {},
|
|
|
+ {
|
|
|
+ header: {
|
|
|
+ Authorization: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ this.picker.setColumnValues(1, res);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDealer() {
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ 'https://dealer.jetour.com.cn/api-dealer/dealer-info/searchDealerListByCondition',
|
|
|
+ {
|
|
|
+ brandId: '0cbe50af-c29a-4eb0-91cc-4a05c5f05c57',
|
|
|
+ provinceId: this.provinceId,
|
|
|
+ cityId: this.cityId,
|
|
|
+ enabledFlag: 1,
|
|
|
+ type: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ header: {
|
|
|
+ Authorization: '',
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ res.data = res.data.filter(
|
|
|
+ i => i.showWebsiteFlag == 1 && !(typeof i.code === 'string' && i.code.startsWith('99999'))
|
|
|
+ );
|
|
|
+ this.dealerList = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ chooseDealer() {
|
|
|
+ if (!this.cityId) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请先选择城市'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.showDealerPicker = true;
|
|
|
+ },
|
|
|
+ confirmDealer() {
|
|
|
+ let value = this.$mp.page.selectComponent('#dealerPicker').getColumnValue(0);
|
|
|
+ this.dealerName = value.name;
|
|
|
+ this.dealerId = value.id;
|
|
|
+ this.dealerCode = value.code;
|
|
|
+ this.spNo = value.spNo;
|
|
|
+ this.showDealerPicker = false;
|
|
|
+ },
|
|
|
+ getphonenumber(e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (!this.name) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入姓名'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入正确的手机号'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ !/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/.test(
|
|
|
+ this.idCard
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请输入正确的身份证号'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.cityId) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请选择城市'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.dealerId) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请选择经销商'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.agree) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请阅读并同意《在线订车协议》'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ carId: this.bookForm.carId,
|
|
|
+ carSeatId: this.bookForm.seat.id,
|
|
|
+ carColorId: this.bookForm.color.id,
|
|
|
+ carColorMaterialId: this.bookForm.color.materialId,
|
|
|
+ carUpholsteryId: this.bookForm.upholstery.id,
|
|
|
+ carWheelHubId: this.bookForm.wheelHub.id,
|
|
|
+ carCaliperId: this.bookForm.caliper.id,
|
|
|
+ carPackageIdList: this.bookForm.optionalPackage.map(i => i.id)
|
|
|
+ };
|
|
|
+ this.$http
|
|
|
+ .post('/applets/checkValidMaterielCode', data, {
|
|
|
+ header: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log('checkValidMaterielCode::', res);
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ data.materielCode = res.data;
|
|
|
+ // return this.$http.post('/applets/querycarsettlement', data, {
|
|
|
+ // header: {
|
|
|
+ // 'Content-Type': 'application/json'
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ return Promise.resolve();
|
|
|
+ } else {
|
|
|
+ return Promise.reject(res.message);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log('querycarsettlement::', res);
|
|
|
+ return this.$http.post(
|
|
|
+ '/applets/carsubmit/submitcarorder',
|
|
|
+ {
|
|
|
+ dealerCode: this.dealerCode,
|
|
|
+ dealerId: this.dealerId,
|
|
|
+ pickedCarIds: data,
|
|
|
+ payType: this.type,
|
|
|
+ loanInstalmentCount: this.loanOptions[this.tab].month,
|
|
|
+ incomingUrl: this.$http.parseUrl('/applets/'),
|
|
|
+ loanRate: this.loanOptions[this.tab].rate,
|
|
|
+ idCard: this.idCard,
|
|
|
+ name: this.name,
|
|
|
+ mobile: this.mobile,
|
|
|
+ pickCity: this.provinceName + ' ' + this.cityName,
|
|
|
+ carSupplier: this.dealerName,
|
|
|
+ carSupplierNo: this.type === 1 ? '100109999999' : this.spNo,
|
|
|
+ downPaymentRate: this.percent / 100,
|
|
|
+ materielCode: data.materielCode
|
|
|
+ },
|
|
|
+ {
|
|
|
+ header: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+page {
|
|
|
+ background: @bg;
|
|
|
+}
|
|
|
+.card {
|
|
|
+ box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 15px 15px 0 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: white;
|
|
|
+}
|
|
|
+.cover {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(464 / 800 * (100vw - 30px));
|
|
|
+}
|
|
|
+.title {
|
|
|
+ margin: 30px 15px 0 15px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 21px;
|
|
|
+ color: @text1;
|
|
|
+}
|
|
|
+.sub-title {
|
|
|
+ margin: 16px 15px 0 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: @text2;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.divider {
|
|
|
+ margin: 14px 10px 0 10px;
|
|
|
+ height: 1px;
|
|
|
+ background: #ebebeb;
|
|
|
+}
|
|
|
+.small-title {
|
|
|
+ margin-top: 15px;
|
|
|
+ color: @text3;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.param {
|
|
|
+ font-size: 14px;
|
|
|
+ height: 33px;
|
|
|
+ .flex();
|
|
|
+ padding: 0 30px 0 20px;
|
|
|
+ .name {
|
|
|
+ color: @text1;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ color: @text2;
|
|
|
+ }
|
|
|
+}
|
|
|
+.sum {
|
|
|
+ color: @text1;
|
|
|
+ .flex();
|
|
|
+ padding: 0 30px 0 20px;
|
|
|
+ .name {
|
|
|
+ font-size: 18px;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ font-size: 21px;
|
|
|
+ }
|
|
|
+ .prim {
|
|
|
+ color: @prim;
|
|
|
+ }
|
|
|
+}
|
|
|
+.field {
|
|
|
+ margin: 5px 20px 0 20px;
|
|
|
+ .flex();
|
|
|
+ height: 39px;
|
|
|
+ background: #fdfcfc;
|
|
|
+ border: 1px solid #dde6ef;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 0 14px 0 16px;
|
|
|
+ .label {
|
|
|
+ color: @text1;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ margin: 0;
|
|
|
+ margin-left: 14px;
|
|
|
+ flex-basis: 0;
|
|
|
+ flex-grow: 1;
|
|
|
+ font-size: 16px;
|
|
|
+ color: @text2;
|
|
|
+ text-align: right;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ outline: none;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ background: none;
|
|
|
+ .ellipsis();
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &.placeholder {
|
|
|
+ color: @text3;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .arrow {
|
|
|
+ width: 7px;
|
|
|
+ height: 13px;
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.placeholder {
|
|
|
+ color: @text3;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.btns {
|
|
|
+ .flex();
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 28px;
|
|
|
+ .btn {
|
|
|
+ width: 100px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 50px;
|
|
|
+ border: 1px solid #959595;
|
|
|
+ color: #959595;
|
|
|
+ .flex();
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 1;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: @prim;
|
|
|
+ border: none;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tabs {
|
|
|
+ margin-top: 23px;
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-right: 20px;
|
|
|
+ .flex();
|
|
|
+ justify-content: space-around;
|
|
|
+ border-bottom: 1px solid #dde5ef;
|
|
|
+ .tab {
|
|
|
+ width: 60px;
|
|
|
+ .flex-col();
|
|
|
+ justify-content: center;
|
|
|
+ color: @text2;
|
|
|
+ line-height: 1;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ position: relative;
|
|
|
+ .name {
|
|
|
+ font-size: 15px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ font-size: 11px;
|
|
|
+ margin-top: 6px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ color: @prim;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: -1px;
|
|
|
+ right: 0;
|
|
|
+ height: 2px;
|
|
|
+ width: 32px;
|
|
|
+ background: @prim;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.moneys {
|
|
|
+ .flex-col();
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 28px 64px 0 64px;
|
|
|
+ height: 86px;
|
|
|
+ .row {
|
|
|
+ .flex();
|
|
|
+ .label {
|
|
|
+ font-size: 13px;
|
|
|
+ color: @text1;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ font-size: 16px;
|
|
|
+ color: @text1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tip {
|
|
|
+ color: @text3;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 24px 0 21px 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.slider-title {
|
|
|
+ margin: 19px 20px 0 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: @text2;
|
|
|
+ .flex();
|
|
|
+}
|
|
|
+.slider-wrapper {
|
|
|
+ .flex();
|
|
|
+ margin: 11px 25px 0 25px;
|
|
|
+ .icon {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ }
|
|
|
+ .slider {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin: 0;
|
|
|
+ background: fade(@prim, 10%);
|
|
|
+ height: 8px;
|
|
|
+ font-size: 0;
|
|
|
+ position: relative;
|
|
|
+ .progress {
|
|
|
+ background: fade(@prim, 80%);
|
|
|
+ height: 8px;
|
|
|
+ }
|
|
|
+ .dot {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ background: @prim;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.bottom {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: white;
|
|
|
+ .agree {
|
|
|
+ .flex();
|
|
|
+ color: @text2;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 35px;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ .van-button {
|
|
|
+ border-radius: 0;
|
|
|
+ padding-bottom: calc(env(safe-area-inset-bottom) / 2) !important;
|
|
|
+ height: calc(52px + env(safe-area-inset-bottom) / 2) !important;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.container {
|
|
|
+ padding-bottom: 100px;
|
|
|
+ padding-bottom: calc(100px + env(safe-area-inset-bottom));
|
|
|
+}
|
|
|
+.agree-content {
|
|
|
+ height: 60vh;
|
|
|
+ padding: 20px;
|
|
|
+ overflow: auto;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+</style>
|
drew
