'展厅UI模块'
This commit is contained in:
xiaoshan
1
App.vue
1
App.vue
@@ -19,6 +19,7 @@
|
||||
this.initConfig()
|
||||
this.getSys()
|
||||
if(uni.getStorageSync('userType') == 'driver') this.$tab.switchTab('/pages/driver/showroom/index')
|
||||
// if(uni.getStorageSync('userType') == 'driver') this.$tab.navigateTo(`pages/driver/showroom/confirmOrder/confirmOrder`)
|
||||
if(uni.getStorageSync('userType') == 'repair') this.$tab.switchTab('/pages/repair/tabbar/repair')
|
||||
if(uni.getStorageSync('userType') == 'carDealers') this.$tab.switchTab('/pages/carShop/community/community')
|
||||
},
|
||||
|
||||
@@ -123,4 +123,18 @@ export const tabsList8 = [{
|
||||
}, {
|
||||
name: '助力抢券',
|
||||
value: 3
|
||||
}]
|
||||
|
||||
export const storeInfoTabs = [{
|
||||
name: '详情',
|
||||
value: 'detail'
|
||||
},{
|
||||
name: '评价',
|
||||
value: 'comment'
|
||||
},{
|
||||
name: '订前必读',
|
||||
value: 'read'
|
||||
}, {
|
||||
name: '常见问题',
|
||||
value: 'problem'
|
||||
}]
|
||||
29
pages.json
29
pages.json
@@ -1167,6 +1167,35 @@
|
||||
"enablePullDownRefresh" : false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/driver/showroom/carBuy/index",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"enablePullDownRefresh" : false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/driver/showroom/carBuy/predetermine",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"enablePullDownRefresh" : false,
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/driver/showroom/confirmOrder/confirmOrder",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "确认订单",
|
||||
"navigationBarBackgroundColor": "#f5f5f5",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
||||
209
pages/driver/showroom/carBuy/index.vue
Normal file
209
pages/driver/showroom/carBuy/index.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<u-navbar :title="' '" :safeAreaInsetTop="true" bgColor="rgba(0,0,0,0)">
|
||||
<u-icon slot="left" name="arrow-left" size="19" @click="navBackFn('back')"></u-icon>
|
||||
<view slot="right">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="flex collect-share" style="">
|
||||
<image v-if="commodityDeta.isCollect" @click="getIntegralOrderProductFn"
|
||||
:src="`${config.aliyunOssUrl}/static/images/app/serve/coupons_xingxing_end.png`" alt="">
|
||||
</image>
|
||||
<image v-else @click="getIntegralOrderProductFn"
|
||||
:src="`${config.aliyunOssUrl}/static/images/app/serve/coupons_xingxing.png`" mode=""></image>
|
||||
<image :src="`${config.aliyunOssUrl}/static/images/app/serve/coupons_fenxiang.png`" mode=""></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<view class="flex collect-share" style="margin-right: 0;">
|
||||
<image @click="getIntegralOrderProductFn" src="@/static/images/app/serve/coupons_xingxing.png"
|
||||
mode=""></image>
|
||||
<image src="@/static/images/app/serve/coupons_xingxing_end.png" alt=""></image>
|
||||
<image src="@/static/images/app/serve/coupons_fenxiang.png" mode=""></image>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<!-- 轮播图 -->
|
||||
<u-swiper height="750rpx" keyName="image" @change="e => currentNum = e.current" :list="branner" indicator
|
||||
:indicatorStyle="{bottom:'32rpx',right:'24rpx'}">
|
||||
</u-swiper>
|
||||
<view class="info-introduce">
|
||||
<view class="flex">
|
||||
<u--text :lines="1" bold size="16" text="元PLUS冠军版"></u--text>
|
||||
</view>
|
||||
<view class="flex align-center shop-price">
|
||||
指导价 ￥242,000 - 431,000
|
||||
</view>
|
||||
<view class="flex align-center shop-price">
|
||||
定金 ￥2000
|
||||
</view>
|
||||
<view class="flex align-center shop-price">
|
||||
月供 ￥3000 <text>x24期</text>
|
||||
</view>
|
||||
<view class="flex align-center shop-price">
|
||||
月租 ￥3000 <text>x24期</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="store-list">
|
||||
<u-parse :content="details"></u-parse>
|
||||
</view>
|
||||
<view class="btns fixed-bottom">
|
||||
<view class="comment-btn flex align-center justify-between">
|
||||
<view class="contact-icon flex-column align-center justify-between">
|
||||
<image src="@/static/images/app/icon/message.png" mode="heightFix"></image>
|
||||
咨询
|
||||
</view>
|
||||
<view class="right-btn flex align-center">
|
||||
<u-button @click="link" :customStyle="{ width: '580rpx', height: '96rpx', fontSize: '34rpx',marign:0}" color="#333333" shape="circle">立即订车</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 68rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getIntegralInfo,
|
||||
getIntegralOrderProduct
|
||||
} from "@/api/welfare/welfare.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config: getApp().globalData.config,
|
||||
//商品详情
|
||||
commodityDeta: {},
|
||||
details: '<h1>商品详情</h1>',
|
||||
commodityNum: 1,
|
||||
branner: [], // 轮播图列表
|
||||
currentNum: 0,
|
||||
//规格弹出
|
||||
parameterShow: false,
|
||||
actArr: [],
|
||||
specTabArr: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//返回
|
||||
navBackFn(type) {
|
||||
if (type == 'tabbar') {
|
||||
uni.switchTab({
|
||||
url: '/pages/driver/index/index'
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
link() {
|
||||
this.$tab.navigateTo(`./predetermine`)
|
||||
},
|
||||
// 添加收藏接口
|
||||
getIntegralOrderProductFn() {
|
||||
console.log(this.commodityDeta);
|
||||
getIntegralOrderProduct(this.commodityDeta.id).then(res => {
|
||||
console.log(res);
|
||||
this.getIntegralInfoFn(this.commodityDeta.id)
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// console.log(options);
|
||||
// this.getIntegralInfoFn(options.id)
|
||||
},
|
||||
onShow() {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.store-list {
|
||||
img {
|
||||
width: 750rpx;
|
||||
}
|
||||
image {
|
||||
width: 750rpx;
|
||||
}
|
||||
}
|
||||
.collect-share {
|
||||
margin-right: 140rpx;
|
||||
|
||||
image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-introduce {
|
||||
padding: 40rpx 24rpx 32rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
.title-info {
|
||||
width: 572rpx;
|
||||
}
|
||||
.btns-box {
|
||||
height: 49rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.shop-price {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.indicator {
|
||||
@include flex(row);
|
||||
justify-content: center;
|
||||
|
||||
&__dot {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 100px;
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
margin: 0 5px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&--active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-num {
|
||||
padding: 2px 0;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
border-radius: 100px;
|
||||
width: 35px;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
|
||||
&__text {
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
width: 750rpx;
|
||||
background-color: #fff;
|
||||
border-top: 2rpx solid #eeeeee;
|
||||
.comment-btn {
|
||||
padding: 16rpx 24rpx 0 48rpx;
|
||||
|
||||
}
|
||||
.contact-icon {
|
||||
font-size: 16rpx;
|
||||
color: #222222;
|
||||
image {
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
366
pages/driver/showroom/carBuy/predetermine.vue
Normal file
366
pages/driver/showroom/carBuy/predetermine.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :title="' '" safeAreaInsetTop bgColor="rgba(0,0,0,0)">
|
||||
<view class="back-box flex-center" slot="left" @click="$tab.navigateBack()">
|
||||
<u-icon name="arrow-left"
|
||||
:color="showType <= 2 && '#fff'|| '#000'" size="20"></u-icon>
|
||||
</view>
|
||||
<view :class="['nav-title', showType >=3 && 'nav-title-color']" slot="left">
|
||||
元PLUS冠军版
|
||||
</view>
|
||||
<view slot="right">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="flex collect-share" style="">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<view class="flex collect-share" style="margin-right: 0;">
|
||||
<!-- #endif -->
|
||||
<u-icon name="star" :color="showType <= 2 && '#fff'|| '#000'" size="20"></u-icon>
|
||||
<u-icon name="star-fill" color="#F78D1F" size="20"></u-icon>
|
||||
<u-icon style="margin-left: 20rpx;" name="share-square" :color="showType <= 2 && '#fff'|| '#000'" size="20"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view :class="['branner-box', showType <= 2 && 'branner-box-color']" >
|
||||
<view v-show="showType!=3" class="">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view :style="{height: `${$u.sys().statusBarHeight}px;`}" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<view :style="`height: ${$u.sys().statusBarHeight}px;`" />
|
||||
<!-- #endif -->
|
||||
<view style="height: 88rpx;" />
|
||||
<view v-show="showType != 4" style="height: 48rpx;" />
|
||||
</view>
|
||||
<view v-show="showType<=2" class="delivery-time flex align-center">
|
||||
<image src="@/static/images/app/icon/clock-1.png" mode=""></image>
|
||||
预计下单后2-4周内交付
|
||||
</view>
|
||||
<!-- 轮播图 -->
|
||||
<view v-show="showType < 3" style="height: 146rpx;" />
|
||||
<view class="swiper-box" v-show="showType == 1">
|
||||
<u-swiper
|
||||
circular imgMode="aspectFit"
|
||||
bgColor="transparent" height="604rpx"
|
||||
indicatorActiveColor="#13AFA8"
|
||||
keyName="image" @change="e => currentNum = e.current" :list="branner" indicator
|
||||
:indicatorStyle="{bottom:'0rpx'}">
|
||||
</u-swiper>
|
||||
</view>
|
||||
<u-swiper
|
||||
v-show="showType == 3"
|
||||
circular
|
||||
:current="colorIndex"
|
||||
:autoplay="false"
|
||||
imgMode="aspectFit"
|
||||
bgColor="#D9D9D9"
|
||||
height="750rpx"
|
||||
keyName="image"
|
||||
:list="colorList"
|
||||
@change="e => colorIndex = e.current">
|
||||
</u-swiper>
|
||||
<view v-show="showType ==3" style="height: 108rpx;" />
|
||||
<view class="out-box" v-show="showType == 2 || showType == 3">
|
||||
<u-swiper
|
||||
v-show="showType==2"
|
||||
circular
|
||||
:current="colorIndex"
|
||||
:autoplay="false"
|
||||
imgMode="aspectFit"
|
||||
bgColor="transparent" height="476rpx"
|
||||
keyName="image"
|
||||
:list="colorList"
|
||||
@change="e => colorIndex = e.current">
|
||||
</u-swiper>
|
||||
<view class="swiper-line-box">
|
||||
<view class="swiper-line" :style="`transform: translateX(${96 / (colorList.length-1) * colorIndex}rpx);transition: transform 0.5s;`" />
|
||||
</view>
|
||||
<view class="color-info flex-column-center">
|
||||
<view class="">
|
||||
{{colorList[colorIndex].name}}
|
||||
</view>
|
||||
<view class="color-info-all">
|
||||
价格已包含{{colorList[colorIndex].serve}}
|
||||
<text>{{colorList[colorIndex].price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-list flex-wrap align-center justify-center">
|
||||
<view @click="colorIndex = index" :class="['color-item', colorIndex == index && 'active-color-item']" :style="`background: ${item.color}`" v-for="(item,index) in colorList" :key="index" />
|
||||
</view>
|
||||
<view class="tip">
|
||||
颜色以实物为准
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="showType==4" class="image-box" :style="{height: `calc(100vh - ${$u.sys().statusBarHeight}px - 424rpx)`}">
|
||||
<image src="@/static/images/app/mine/gold_bg.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view v-show="showType!=4" style="height: 340rpx;" />
|
||||
<view class="btns-box flex align-center justify-between">
|
||||
<view :class="['btn-item', showType == 1 && 'active_item']" @click="changeShowType(1)">
|
||||
图库
|
||||
</view>
|
||||
|
|
||||
<view :class="['btn-item', showType == 2 && 'active_item']" @click="changeShowType(2)">
|
||||
外观
|
||||
</view>
|
||||
|
|
||||
<view :class="['btn-item', showType == 3 && 'active_item']" @click="changeShowType(3)">
|
||||
内饰
|
||||
</view>|
|
||||
<view :class="['btn-item', showType == 4 && 'active_item']" @click="changeShowType(4)">
|
||||
购车权益
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy-btn-box fixed-bottom">
|
||||
<view class="btn-info flex align-center justify-between">
|
||||
<view class="left-info">
|
||||
<view class="info-top">
|
||||
<text>￥</text>
|
||||
<text class="fw-b">3000</text>
|
||||
<text class="info-bottom">/月 x24期</text>
|
||||
</view>
|
||||
<view class="info-bottom">
|
||||
含定金￥3,000
|
||||
</view>
|
||||
</view>
|
||||
<u-button shape="circle" :customStyle="{ width: '344rpx', height: '96rpx', margin: 0}" color="#13AFA8">立即订购</u-button>
|
||||
</view>
|
||||
<u-safe-bottom></u-safe-bottom>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showType: 1,
|
||||
colorIndex: 0,
|
||||
config: getApp().globalData.config,
|
||||
branner: [
|
||||
'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/car.png',
|
||||
'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/car-1.png'
|
||||
],
|
||||
colorList: [{
|
||||
image: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/car.png',
|
||||
name: '暗夜行者黑',
|
||||
price: '10,000',
|
||||
serve: '安装，售后',
|
||||
color: '#000'
|
||||
},{
|
||||
image: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/car-1.png',
|
||||
name: '水晶灰',
|
||||
price: '10,000',
|
||||
serve: '安装，售后',
|
||||
color: '#4C5A64'
|
||||
},{
|
||||
image: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/car.png',
|
||||
name: '湛蓝',
|
||||
price: '10,000',
|
||||
serve: '安装，售后',
|
||||
color: '#0658C0'
|
||||
},{
|
||||
image: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/car-1.png',
|
||||
name: '小白脸',
|
||||
price: '10,000',
|
||||
serve: '安装，售后',
|
||||
color: '#FFFFFF'
|
||||
},{
|
||||
image: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/car.png',
|
||||
name: '特别红',
|
||||
price: '10,000',
|
||||
serve: '安装，售后',
|
||||
color: '#D31200'
|
||||
},{
|
||||
image: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/car-1.png',
|
||||
name: '海洋青',
|
||||
price: '10,000',
|
||||
serve: '安装，售后',
|
||||
color: '#06C0AA'
|
||||
},{
|
||||
image: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/car.png',
|
||||
name: '青青草原',
|
||||
price: '10,000',
|
||||
serve: '安装，售后',
|
||||
color: '#06C00D'
|
||||
},{
|
||||
image: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/car-1.png',
|
||||
name: '咖啡',
|
||||
price: '10,000',
|
||||
serve: '安装，售后',
|
||||
color: '#D37200'
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeShowType(e) {
|
||||
this.showType = e
|
||||
if(e == 1 || e == 2) {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#FFFFFF'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
.back-box {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-title {
|
||||
// margin-left: 20rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.nav-title-color {
|
||||
color: #000;
|
||||
}
|
||||
.collect-share {
|
||||
margin-right: 140rpx;
|
||||
|
||||
image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
}
|
||||
.branner-box {
|
||||
width: 750rpx;
|
||||
height: 1222rpx;
|
||||
.delivery-time {
|
||||
margin: 0 auto;
|
||||
width: 686rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, .3);
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 64rpx;
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
margin-right: 16rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
.swiper-box {
|
||||
padding: 0 27rpx;
|
||||
width: 750rpx;
|
||||
height: 604rpx;
|
||||
background: url('@/static/images/app/showroom/platform.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: bottom;
|
||||
}
|
||||
.btns-box {
|
||||
position: fixed;
|
||||
bottom: 200rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 686rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 48rpx;
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
line-height: 96rpx;
|
||||
color: #F2F2F2;
|
||||
.btn-item {
|
||||
width: 25%;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
}
|
||||
.active_item {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.buy-btn-box {
|
||||
width: 750rpx;
|
||||
background-color: #fff;
|
||||
.btn-info {
|
||||
padding: 32rpx 24rpx;
|
||||
font-size: 44rpx;
|
||||
color: #000000;
|
||||
.info-bottom {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.image-box {
|
||||
margin: 0 auto;
|
||||
width: 702rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow-y: auto;
|
||||
image {
|
||||
width: 702rpx;
|
||||
}
|
||||
}
|
||||
.out-box {
|
||||
.swiper-line-box {
|
||||
margin: 0 auto;
|
||||
width: 128rpx;
|
||||
height: 6rpx;
|
||||
background: rgba(0,0,0,0.05);
|
||||
border-radius: 3rpx;
|
||||
.swiper-line {
|
||||
width: 32rpx;
|
||||
height: 6rpx;
|
||||
background: #13AFA8;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
.color-info {
|
||||
margin-top: 32rpx;
|
||||
font-size: 32rpx;
|
||||
color: #111111;
|
||||
line-height: 44rpx;
|
||||
.color-info-all {
|
||||
margin-top: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
.color-list {
|
||||
margin: 48rpx auto;
|
||||
width: 680rpx;
|
||||
max-height: 160rpx;
|
||||
.color-item {
|
||||
margin: 0 36rpx;
|
||||
margin-bottom: 32rpx;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.active-color-item {
|
||||
box-shadow: 0 0 6rpx 6rpx #13AFA8;
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #CCCCCC;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.branner-box-color {
|
||||
background: linear-gradient(180deg, #A7A7A7 0%, #F9F9F9 100%);
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar placeholder>
|
||||
<view class="back-icon" slot="left">
|
||||
<view class="back-icon" slot="left" @click="$tab.navigateBack()">
|
||||
<u-icon name="arrow-left" size="22"></u-icon>
|
||||
</view>
|
||||
<view class="brand-name flex align-center justify-between" slot="left" >
|
||||
@@ -17,31 +17,55 @@
|
||||
<view class="select-content">
|
||||
<view class="content-box">
|
||||
<view :class="['content-item', powerId == index && 'active-item']" @click="powerId = index" v-for="(item,index) in 6" :key="index">
|
||||
比亚迪
|
||||
纯动力
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="power flex align-center justify-between">
|
||||
<view class="title">
|
||||
动力
|
||||
车型
|
||||
</view>
|
||||
<view class="select-content">
|
||||
<view class="content-box">
|
||||
<view :class="['content-item', powerId == index && 'active-item']" @click="powerId = index" v-for="(item,index) in 6" :key="index">
|
||||
比亚迪
|
||||
轿车
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="power flex align-center justify-between">
|
||||
<view class="power flex align-center justify-between" v-show="type == 0">
|
||||
<view class="title">
|
||||
动力
|
||||
车龄
|
||||
</view>
|
||||
<view class="select-content">
|
||||
<view class="content-box">
|
||||
<view :class="['content-item', powerId == index && 'active-item']" @click="powerId = index" v-for="(item,index) in 6" :key="index">
|
||||
比亚迪
|
||||
1年内
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="power flex align-center justify-between" v-show="type==0">
|
||||
<view class="title">
|
||||
租期
|
||||
</view>
|
||||
<view class="select-content">
|
||||
<view class="content-box">
|
||||
<view :class="['content-item', powerId == index && 'active-item']" @click="powerId = index" v-for="(item,index) in 6" :key="index">
|
||||
3个月
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="power flex align-center justify-between" v-show="type==1 || type == 2">
|
||||
<view class="title">
|
||||
价格
|
||||
</view>
|
||||
<view class="select-content">
|
||||
<view class="content-box">
|
||||
<view :class="['content-item', powerId == index && 'active-item']" @click="powerId = index" v-for="(item,index) in 6" :key="index">
|
||||
10-15万
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -52,12 +76,12 @@
|
||||
<view class="left">
|
||||
共12款车符合您的条件
|
||||
</view>
|
||||
<view class="right-btn flex align-center">
|
||||
<view class="right-btn flex align-center" @click="storeShow = true">
|
||||
商家
|
||||
<u-icon name="arrow-right" size="8" color="#999999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="car-item flex align-center" v-for="(item,index) in 10">
|
||||
<view class="car-item flex align-center" v-for="(item,index) in 10" @click="link(item)">
|
||||
<image class="car-image" src="@/static/images/logo/logo.jpg" mode=""></image>
|
||||
<view class="car-info">
|
||||
<view class="car-title flex align-center">
|
||||
@@ -69,7 +93,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="true" round="16" closeable="">
|
||||
<u-popup :show="storeShow" round="16" closeable @close="storeShow = false">
|
||||
<view class="popup-box">
|
||||
<view class="popup-title">
|
||||
筛选商家
|
||||
@@ -94,8 +118,22 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
powerId: -1
|
||||
powerId: -1,
|
||||
storeShow: false,
|
||||
type: 0
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.type = option.type
|
||||
},
|
||||
methods: {
|
||||
link(item) {
|
||||
if(this.type == 0) {
|
||||
this.$tab.navigateTo(`../carRental/index`)
|
||||
} else if (this.type == 1) {
|
||||
this.$tab.navigateTo(`./carBuy/index`)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -107,7 +145,6 @@
|
||||
.brand-name {
|
||||
width: 140rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
line-height: 36rpx;
|
||||
@@ -116,6 +153,7 @@
|
||||
padding: 24rpx;
|
||||
width: 750rpx;
|
||||
.power {
|
||||
margin-bottom: 16rpx;
|
||||
.title {
|
||||
margin-right: 24rpx;
|
||||
width: 116rpx;
|
||||
@@ -123,8 +161,6 @@
|
||||
background: #E2F0EF;
|
||||
border-radius: 4rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
line-height: 52rpx;
|
||||
text-align: center;
|
||||
@@ -133,7 +169,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: nowrap;
|
||||
margin-top: 16rpx;
|
||||
width: 586rpx;
|
||||
height: 52rpx;
|
||||
overflow-x: auto;
|
||||
@@ -148,8 +183,6 @@
|
||||
background: #F5F5F5;
|
||||
border-radius: 4rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #444444;
|
||||
line-height: 52rpx;
|
||||
text-align: center;
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<view class="title-info">
|
||||
<u--text :lines="2" bold size="16" text="商品标题最多显示两行商品标题最多显示两行最多显示两行"></u--text>
|
||||
</view>
|
||||
<view class="btns-box flex align-center">
|
||||
<view class="btns-box flex align-center" @click="parameterShow = true">
|
||||
参数
|
||||
<u-icon name="arrow-right" size="10"></u-icon>
|
||||
</view>
|
||||
@@ -74,7 +74,7 @@
|
||||
<view class="store-tags-right flex align-center">
|
||||
<text>租期 6个月</text>
|
||||
<view class="btn-item">
|
||||
<u-button color="#13AFA8" shape="circle">立即订车</u-button>
|
||||
<u-button @click="storeShow = true" :customStyle="{width: '152rpx', height: '60rpx', fontSize: '28rpx', padding: 0}" color="#13AFA8" shape="circle">立即订车</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -83,7 +83,7 @@
|
||||
<!-- 规格选择 -->
|
||||
<u-popup :show="parameterShow" round="16" @close="parameterShow = false" closeable>
|
||||
<view class="popup-box">
|
||||
<view class="popup-title">
|
||||
<view class="popup-title popup-tabs-box">
|
||||
BYD元PIUS冠军版
|
||||
</view>
|
||||
<view class="popup-content">
|
||||
@@ -92,45 +92,324 @@
|
||||
基本信息
|
||||
</view>
|
||||
<view class="popup-srcoll-content">
|
||||
<view class="item">
|
||||
<view class="item flex align-center">
|
||||
<view class="">
|
||||
车型：舒适轿车
|
||||
<text>车型：</text>
|
||||
舒适轿车
|
||||
</view>
|
||||
<view class="">
|
||||
车门：210㎡
|
||||
<text>车门：</text>
|
||||
210㎡
|
||||
</view>
|
||||
</view>
|
||||
<view class="item flex align-center">
|
||||
<view class="">
|
||||
<text>挡位：</text>
|
||||
9档
|
||||
</view>
|
||||
<view class="">
|
||||
<text>动力：</text>
|
||||
油动
|
||||
</view>
|
||||
</view>
|
||||
<view class="item flex align-center">
|
||||
<view class="">
|
||||
<text>续航：</text>
|
||||
600Km
|
||||
</view>
|
||||
<view class="">
|
||||
<text>驱动：</text>
|
||||
发动机
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-srcoll-title">
|
||||
配置信息
|
||||
</view>
|
||||
<view class="popup-srcoll-content">
|
||||
<view class="item flex align-center">
|
||||
<view class="">
|
||||
<text>车型：</text>
|
||||
舒适轿车
|
||||
</view>
|
||||
<view class="">
|
||||
<text>车门：</text>
|
||||
210㎡
|
||||
</view>
|
||||
</view>
|
||||
<view class="item flex align-center">
|
||||
<view class="">
|
||||
<text>挡位：</text>
|
||||
9档
|
||||
</view>
|
||||
<view class="">
|
||||
<text>动力：</text>
|
||||
油动
|
||||
</view>
|
||||
</view>
|
||||
<view class="item flex align-center">
|
||||
<view class="">
|
||||
<text>续航：</text>
|
||||
600Km
|
||||
</view>
|
||||
<view class="">
|
||||
<text>驱动：</text>
|
||||
发动机
|
||||
</view>
|
||||
</view>
|
||||
<view class="item flex align-center">
|
||||
<view class="">
|
||||
<text>续航：</text>
|
||||
600Km
|
||||
</view>
|
||||
<view class="">
|
||||
<text>驱动：</text>
|
||||
发动机
|
||||
</view>
|
||||
</view>
|
||||
<view class="item flex align-center">
|
||||
<view class="">
|
||||
<text>续航：</text>
|
||||
600Km
|
||||
</view>
|
||||
<view class="">
|
||||
<text>驱动：</text>
|
||||
发动机
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 68rpx;" />
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 车商详情 -->
|
||||
<u-popup :show="storeShow" :round="!scrollState && 16" @close="storeShow = false">
|
||||
<view class="popup-box">
|
||||
<view :class="['popup-title', 'rel', scrollState && 'popup-title-active']">
|
||||
杭州中升星旗
|
||||
<image @click="closeStorePopup" v-if="scrollState" class="abs" src="@/static/images/icon/x_3.png" mode=""></image>
|
||||
</view>
|
||||
<view class="popup-tabs-box">
|
||||
<u-tabs
|
||||
lineColor="#555"
|
||||
lineHeight="4rpx"
|
||||
lineWidth="58rpx"
|
||||
:scrollable="false"
|
||||
:activeStyle="{color: '#000'}"
|
||||
:itemStyle="{height: '60rpx'}"
|
||||
:list="storeInfoTabs"
|
||||
@click="tabChange"></u-tabs>
|
||||
</view>
|
||||
<scroll-view
|
||||
scroll-y
|
||||
scroll-with-animation
|
||||
class="scroll-view"
|
||||
:style="`height: calc(${scrollHeight})`"
|
||||
upper-threshold="0"
|
||||
@scroll="scrollView"
|
||||
@scrolltoupper="scrolltoupper"
|
||||
:scroll-into-view="viewId">
|
||||
<view class="comment-scroll-box">
|
||||
<view class="popup-car-list" id="detail">
|
||||
<view class="popup-car-title">
|
||||
商品标题
|
||||
</view>
|
||||
<view class="popup-tags-list">
|
||||
<text>2年车龄</text>
|
||||
</view>
|
||||
<view class="popup-car-box">
|
||||
<view class="car-list">
|
||||
<view class="car-item" v-for="(item, index) in 6" :key="index">
|
||||
<image src="@/static/htz-image-upload/play.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment-box" id="comment">
|
||||
<view class="comment-title flex align-center justify-between">
|
||||
<view class="">
|
||||
<text>用户评价</text>
|
||||
<text class="num">4.86分</text>
|
||||
</view>
|
||||
<view class="comrel flex align-center">
|
||||
评价(206)
|
||||
<u-icon name="arrow-right" size="12" color="#999999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment-content-item">
|
||||
<view class="user-info flex align-center justify-between">
|
||||
<view class="right flex align-center">
|
||||
<image src="@/static/images/logo/logo.png" mode=""></image>
|
||||
<view class="user-detail flex-column justify-between">
|
||||
<view class="name">
|
||||
陈客户
|
||||
</view>
|
||||
<view class="flex align-center">
|
||||
<view class="flex align-center">
|
||||
<u-icon v-for="(item, index) in 5" name="star-fill" :color="value>index ? '#F68D1F' : '#D9D9D9'"></u-icon>
|
||||
</view>
|
||||
<!-- <u-rate disabled activeColor="#F68D1F" inactiveColor="#D9D9D9" :count="count" v-model="value"></u-rate> -->
|
||||
<text class="fen">{{value.toFixed(1)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
2023/02/08
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment-text">
|
||||
工作人员服务态度很好，维修的很仔细，休息室很干净，维修的很仔细。
|
||||
</view>
|
||||
<view class="comment-image flex-wrap align-center">
|
||||
<image :style="index%3==2&&'marginRight: 0'" v-for="(item, index) in 5" :key="index" src="@/static/htz-image-upload/play.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="must-read" id="read">
|
||||
<view class="popup-read-title">
|
||||
订前必读
|
||||
</view>
|
||||
<view class="popup-read-content">
|
||||
<view class="read-new-title">
|
||||
订车规则
|
||||
</view>
|
||||
<view class="">
|
||||
<image class="guize" src="@/static/images/app/welfare/invite_btn.png" mode=""></image>
|
||||
<image class="guize" src="@/static/images/app/welfare/invite_btn.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-read-content">
|
||||
<view class="read-new-title">
|
||||
订车流程
|
||||
</view>
|
||||
<view class="read-images flex align-center justify-between">
|
||||
<image v-for="(item, index) in 4" :key="index" class="liucheng" src="@/static/images/app/mine/pay.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="must-read" id="problem">
|
||||
<view class="popup-read-title">
|
||||
常见问题
|
||||
</view>
|
||||
<view class="popup-read-content">
|
||||
<view class="problem-tabs">
|
||||
<view class="problem-tabs-box flex align-center">
|
||||
<text :class="['problem-tabs-item', categoryId == index && 'problem-active-item']" @click="categoryId = index" v-for="(item,index) in problemType" :key="index">
|
||||
{{item}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<image class="problem-image" src="@/static/images/app/mine/gold_bg.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="comment-btns fixed-bottom">
|
||||
<view class="comment-btn flex align-center justify-between">
|
||||
<view class="contact-icon flex align-center">
|
||||
<image @click="phoneShow = true" src="@/static/images/app/icon/phone.png" mode="heightFix"></image>
|
||||
<image src="@/static/images/app/icon/message.png" mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="right-btn flex align-center">
|
||||
<view class="right-price flex-column align-end justify-between">
|
||||
<view class="">
|
||||
￥25.8 <text class="yue">/月</text>
|
||||
</view>
|
||||
<view class="right-mouth">
|
||||
可租6个月
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-btn-box">
|
||||
<u-button :customStyle="{width: '232rpx', height: '96rpx', fontSize: '34rpx',marign:0}" color="#333333" shape="circle">立即订车</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 68rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-popup :show="phoneShow" round="16" safeAreaInsetBottom>
|
||||
<view class="popup-phone-box">
|
||||
<view class="btn-item-1 btn-item flex align-center justify-center" @click="callPhone('18875843298')">
|
||||
<image src="@/static/images/app/icon/phone-black.png" mode=""></image>
|
||||
18875843298
|
||||
</view>
|
||||
<view @click="phoneShow = false" class="btn-item-2 btn-item flex align-center justify-center">
|
||||
<text>取消</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config'
|
||||
import {
|
||||
getIntegralInfo,
|
||||
getIntegralOrderProduct
|
||||
} from "@/api/welfare/welfare.js"
|
||||
import { storeInfoTabs } from '@/data/tabsData'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config,
|
||||
//规格弹出
|
||||
parameterShow: false,
|
||||
storeShow: false,
|
||||
scrollState: false,
|
||||
phoneShow: false,
|
||||
count: 5,
|
||||
value: 3,
|
||||
scrollTop: 0,
|
||||
categoryId: 0,
|
||||
viewId: 'detail',
|
||||
scrollHeight: '1052rpx',
|
||||
storeInfoTabs, // 弹窗tab栏
|
||||
problemType: ['换车', '押金', '租金', '类目名', '类目名', '类目名'],
|
||||
|
||||
|
||||
config: getApp().globalData.config,
|
||||
//商品详情
|
||||
commodityDeta: {},
|
||||
details: '<h1>商品详情</h1>',
|
||||
commodityNum: 1,
|
||||
branner: [], // 轮播图列表
|
||||
currentNum: 0,
|
||||
//规格弹出
|
||||
parameterShow: false,
|
||||
actArr: [],
|
||||
specTabArr: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
callPhone(e) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e,
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
}
|
||||
})
|
||||
},
|
||||
closeStorePopup() {
|
||||
this.storeShow = false
|
||||
this.scrollState = false
|
||||
this.scrollHeight = '1052rpx'
|
||||
},
|
||||
// 弹窗tab栏点击
|
||||
tabChange(e) {
|
||||
console.log(e);
|
||||
this.viewId = e.value
|
||||
},
|
||||
// 触顶
|
||||
scrolltoupper() {
|
||||
console.log('触发');
|
||||
this.scrollHeight = '1052rpx'
|
||||
this.scrollState = false
|
||||
},
|
||||
scrollView(e) {
|
||||
console.log(this.scrollTop<e.detail.scrollTop);
|
||||
if(this.scrollTop<e.detail.scrollTop) {
|
||||
this.scrollHeight = '100vh - 188rpx'
|
||||
this.scrollState = true
|
||||
}
|
||||
this.scrollTop = e.detail.scrollTop
|
||||
},
|
||||
|
||||
//立即购买
|
||||
buyImmediatelyFn() {
|
||||
console.log(6666);
|
||||
@@ -335,24 +614,271 @@
|
||||
color: #222222;
|
||||
line-height: 128rpx;
|
||||
text-align: center;
|
||||
image {
|
||||
top: 50%;
|
||||
left: 16rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
.popup-title-active {
|
||||
padding-top: 62rpx;
|
||||
line-height: 66rpx;
|
||||
}
|
||||
.popup-tabs-box {
|
||||
border-bottom: 1rpx solid #ededed;
|
||||
}
|
||||
.scroll-view {
|
||||
height: 1052rpx;
|
||||
transition: height 0.5s;
|
||||
}
|
||||
.comment-scroll-box {
|
||||
// overflow-y: auto;
|
||||
background-color: #F5F5F5;
|
||||
padding-bottom: 220rpx;
|
||||
}
|
||||
.popup-car-list {
|
||||
padding: 24rpx 0 24rpx 24rpx;
|
||||
background-color: #fff;
|
||||
.popup-car-title {
|
||||
font-size: 36rpx;
|
||||
color: #111111;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.popup-tags-list {
|
||||
margin-top: 16rpx;
|
||||
text {
|
||||
margin-right: 16rpx;
|
||||
padding: 0 16rpx;
|
||||
background: #f5f5f5;
|
||||
font-size: 24rpx;
|
||||
color: #444444;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
}
|
||||
.popup-car-box {
|
||||
margin-top: 32rpx;
|
||||
height: 155rpx;
|
||||
overflow-x: auto;
|
||||
.car-list {
|
||||
display: flex;
|
||||
flex-direction:row;
|
||||
align-items: center;
|
||||
height: 155rpx;
|
||||
.car-item {
|
||||
margin-right: 24rpx;
|
||||
width: 202rpx;
|
||||
height: 152rpx;
|
||||
image {
|
||||
width: 202rpx;
|
||||
height: 150rpx;
|
||||
background: #F2F2F2;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.must-read {
|
||||
padding: 0 24rpx;
|
||||
.popup-read-title {
|
||||
font-size: 36rpx;
|
||||
color: #111111;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
.popup-read-content {
|
||||
margin-top: 24rpx;
|
||||
padding: 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
.read-new-title {
|
||||
font-size: 32rpx;
|
||||
color: #111111;
|
||||
}
|
||||
.read-images {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.guize {
|
||||
margin-top: 32rpx;
|
||||
width: 654rpx;
|
||||
height: 156rpx;
|
||||
}
|
||||
.liucheng {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.problem-tabs {
|
||||
margin-bottom: 32rpx;
|
||||
overflow-x: auto;
|
||||
.problem-tabs-box {
|
||||
.problem-tabs-item {
|
||||
margin-right: 24rpx;
|
||||
padding: 0 32rpx;
|
||||
white-space: nowrap;
|
||||
background: #F5F5F5;
|
||||
border-radius: 4rpx;
|
||||
line-height: 52rpx;
|
||||
font-size: 26rpx;
|
||||
color: #444444;
|
||||
}
|
||||
.problem-active-item {
|
||||
background-color: #13AFA8;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.problem-image {
|
||||
width: 654rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-box {
|
||||
background-color: #F5F5F5;
|
||||
.comment-title {
|
||||
padding: 0 24rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
color: #111111;
|
||||
.num {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #F78D1F;
|
||||
}
|
||||
.comrel {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.comment-content-item {
|
||||
margin: 0 auto;
|
||||
padding: 32rpx 24rpx;
|
||||
width: 702rpx;
|
||||
border-radius: 8rpx;
|
||||
background-color: #ffffff;
|
||||
.user-info {
|
||||
.right {
|
||||
.user-detail {
|
||||
height: 72rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
.name {
|
||||
padding-left: 12rpx;
|
||||
}
|
||||
.fen {
|
||||
color: #F68D1F;
|
||||
}
|
||||
}
|
||||
image {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-text {
|
||||
margin-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.comment-image {
|
||||
margin-top: 24rpx;
|
||||
image {
|
||||
margin-right: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
width: 202rpx;
|
||||
height: 202rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-btns {
|
||||
width: 750rpx;
|
||||
background-color: #fff;
|
||||
border-top: 2rpx solid #eeeeee;
|
||||
.comment-btn {
|
||||
padding: 6rpx 24rpx 8rpx 40rpx;
|
||||
.right-btn {
|
||||
.right-price {
|
||||
margin-right: 24rpx;
|
||||
height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #111111;
|
||||
.yue {
|
||||
font-weight: 400;
|
||||
}
|
||||
.right-mouth {
|
||||
width: 112rpx;
|
||||
height: 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.right-btn-box {
|
||||
height: 96rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contact-icon {
|
||||
image {
|
||||
margin-right: 36rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup-content {
|
||||
margin: 0 auto;
|
||||
width: 610rpx;
|
||||
height: 456rpx;
|
||||
overflow-y: auto;
|
||||
.popup-srcoll {
|
||||
.popup-srcoll-title {
|
||||
margin-top: 32rpx;
|
||||
font-size: 32rpx;
|
||||
color: #111111;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.popup-srcoll-content {
|
||||
.item {
|
||||
|
||||
margin-top: 16rpx;
|
||||
view {
|
||||
width: 50%;
|
||||
line-height: 36rpx;
|
||||
font-size: 28rpx;
|
||||
text {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup-phone-box {
|
||||
.btn-item {
|
||||
margin: 0 auto;
|
||||
width: 686rpx;
|
||||
height: 112rpx;
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
.btn-item-1 {
|
||||
border-bottom: 1rpx solid #eee;
|
||||
font-size: 34rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.btn-item-2 {
|
||||
font-size: 34rpx;
|
||||
color: rgba(153,153,153,0.9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
483
pages/driver/showroom/confirmOrder/confirmOrder.vue
Normal file
483
pages/driver/showroom/confirmOrder/confirmOrder.vue
Normal file
@@ -0,0 +1,483 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-form>
|
||||
<view style="height: 16rpx;" />
|
||||
<view class="item-box flex align-center justify-between">
|
||||
<view class="">
|
||||
<view class="item-title">
|
||||
汽车标题
|
||||
</view>
|
||||
<view class="content-text">
|
||||
<text>BYD</text>
|
||||
<text>|</text>
|
||||
<text>纯电动</text>
|
||||
<text>|</text>
|
||||
<text>轿车</text>
|
||||
<text>|</text>
|
||||
<text>车龄1年内</text>
|
||||
</view>
|
||||
<view class="content-text">
|
||||
<text>全景投影</text>
|
||||
<text>|</text>
|
||||
<text>标签1</text>
|
||||
<text>|</text>
|
||||
<text>标签2</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="car-image" src="@/static/htz-image-upload/play.png" mode=""></image>
|
||||
</view>
|
||||
<view class="title">
|
||||
{{orderType == 1 && '租赁方式' || '预定方式'}}
|
||||
</view>
|
||||
<view class="item-box border-price">
|
||||
<view class="flex align-center justify-between">
|
||||
<view class="item-title">
|
||||
{{orderType == 1 && '押金' || '定金'}}
|
||||
</view>
|
||||
<view class="price">
|
||||
￥3000
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-text">
|
||||
押金说明: 一定要在签合同或者交付定金的时候确认，以免自己的权益得不到保障。
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-if="orderType == 1">
|
||||
<view class="title">
|
||||
租赁信息
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<u-form-item border-bottom label-width="80" label="司机姓名">
|
||||
<u-input border="none" placeholder="请输入司机姓名" input-align="right"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item border-bottom label-width="80" label="身份证号">
|
||||
<u-input border="none" placeholder="请输入身份证号" input-align="right"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item border-bottom label-width="80" label="手机号码">
|
||||
<u-input border="none" placeholder="请输入手机号码" input-align="right"></u-input>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="title">
|
||||
费用及时间
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<u-form-item border-bottom label-width="80" label="租赁费用">
|
||||
<u-input border="none" placeholder="请输入租赁费用" input-align="right"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item border-bottom>
|
||||
<view class="">
|
||||
<view class="">
|
||||
选择租期
|
||||
</view>
|
||||
<view class="">
|
||||
<u-radio-group
|
||||
v-model="radiovalue1"
|
||||
activeColor="#13AFA8"
|
||||
placement="row"
|
||||
@change="groupChange"
|
||||
>
|
||||
<view style="width:638rpx" class="flex align-center justify-between mt-32">
|
||||
<u-radio
|
||||
iconSize="12"
|
||||
v-for="(item, index) in radiolist"
|
||||
:customStyle="{marginBottom: '8px'}"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.name"
|
||||
@change="radioChange"
|
||||
>
|
||||
</u-radio>
|
||||
</view>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view style="height: 24rpx;" />
|
||||
<view class="item-box imem-box-1">
|
||||
<u-form-item label-width="80" label="商品金额">
|
||||
<u-input border="none" placeholder="请输入商品金额" input-align="right"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label-width="80" label="消耗积分">
|
||||
<u-input border="none" placeholder="请输入消耗积分" input-align="right"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label-width="80" label="订单备注">
|
||||
<u-input border="none" placeholder="选填" input-align="right"></u-input>
|
||||
</u-form-item>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
<view class="title" v-if="orderType == 2">
|
||||
购车方案
|
||||
</view>
|
||||
<view class="title flex align-center justify-between" v-else>
|
||||
<view class="">
|
||||
购车方案
|
||||
</view>
|
||||
<view class="flex align-center f-24 c999">
|
||||
租买灵活方案
|
||||
<u-icon name="arrow-right" size="12" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="finance-btn flex align-center">
|
||||
<view class="btn-item flex-center" v-if="orderType == 2">
|
||||
全款
|
||||
</view>
|
||||
<view class="btn-item active-btn-item flex-center" v-if="orderType == 2">
|
||||
金融
|
||||
</view>
|
||||
<view class="btn-item active-btn-item flex-center" v-else>
|
||||
租买灵活
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
购买信息
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<u-form-item border-bottom label-width="80" label="上牌城市">
|
||||
<view style="width:100%" class="flex align-center justify-end" @click="openPopup('city')">
|
||||
<text v-show="!form.city" class="data-none">请选择上牌城市</text>
|
||||
<text v-show="form.city">{{form.city}}</text>
|
||||
<u-icon name="arrow-right" size="12" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item border-bottom label-width="80" label="交付中心">
|
||||
<view style="width:100%" class="flex align-center justify-end" @click="openPopup('deliver')">
|
||||
<text v-show="form.deliver">{{form.deliver}}</text>
|
||||
<text v-show="!form.deliver" class="data-none">请选择交付中心</text>
|
||||
<u-icon name="arrow-right" size="12" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item border-bottom label-width="80" label="使用性质">
|
||||
<view style="width:100%" class="flex align-center justify-end" @click="openPopup('carType')">
|
||||
<text v-show="!form.carType" class="data-none">请选择使用性质</text>
|
||||
<text v-show="form.carType">{{form.carType}}</text>
|
||||
<u-icon name="arrow-right" size="12" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="title">
|
||||
车主(车辆所有人)信息
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<view class="buy-tip">
|
||||
车辆所有人信息关联金融/开票/上牌/保险等业务请认真填写并核对预定金，定金支付三天后不可变更,直系亲属除外
|
||||
</view>
|
||||
<u-form-item border-bottom label-width="80" label="车主姓名">
|
||||
<u-input border="none" placeholder="请输入车主姓名" input-align="right"></u-input>
|
||||
</u-form-item>
|
||||
<u-form-item border-bottom label-width="80" label="证件类型">
|
||||
<view style="width:100%" class="flex align-center justify-end" @click="openPopup('IDType')">
|
||||
<text class="data-none">请选择证件类型</text>
|
||||
<!-- <text>请选择上牌城市</text> -->
|
||||
<u-icon name="arrow-right" size="12" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item border-bottom label-width="80" label="证件号码">
|
||||
<u-input border="none" placeholder="请输入证件号码" input-align="right"></u-input>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="title">
|
||||
车主(车辆所有人)信息
|
||||
</view>
|
||||
<view class="item-box f-28">
|
||||
<view class="flex align-center justify-between mb-16">
|
||||
<text class="c444">全国统一零售价</text>
|
||||
<text class="c999">￥320,000</text>
|
||||
</view>
|
||||
<view class="flex align-center justify-between mb-16">
|
||||
<text class="c444">金色金属漆</text>
|
||||
<text class="c999">￥1,0000</text>
|
||||
</view>
|
||||
<view class="flex align-center justify-between mb-16">
|
||||
<text class="c444">黑白双色内饰</text>
|
||||
<text class="c999">不包含</text>
|
||||
</view>
|
||||
<view class="flex align-center justify-between mb-16">
|
||||
<text class="c444">保险</text>
|
||||
<text class="c999">已包含</text>
|
||||
</view>
|
||||
<view class="aount flex align-center justify-between">
|
||||
<text class="c444">购车总价</text>
|
||||
<text class="c999">￥330,000</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 24rpx;" />
|
||||
<view class="item-box imem-box-1">
|
||||
<u-form-item label-width="80" label="使用优惠券">
|
||||
<view class="coupon flex align-center justify-end">
|
||||
<view class="num">
|
||||
2张可用
|
||||
</view>
|
||||
<view class="price">
|
||||
-￥200
|
||||
</view>
|
||||
<view class="none">
|
||||
无
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="nead-know">
|
||||
<view class="flex align-center f-32 c111">
|
||||
<image src="@/static/images/app/icon/waring.png" mode=""></image>
|
||||
定车须知
|
||||
</view>
|
||||
<view class="f-22 c444 mt-16">
|
||||
这里是订车须知详情内容，后台可编辑这里是订车须知详情内容，后台可编辑
|
||||
</view>
|
||||
</view>
|
||||
</u-form>
|
||||
<view style="height: 264rpx;" />
|
||||
<view class="btn-box fixed-bottom">
|
||||
<view class="radio-box">
|
||||
<u-radio-group v-model="value">
|
||||
<u-radio activeColor="#13AFA8" name="1" shape="circle">
|
||||
<text class="text-agree">请仔细阅读并勾选租车</text><text class="text-agree color-primary">《用户协议》</text>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
<view class="btn" v-if="orderType == 1">
|
||||
<u-button shape="circle" color="#13AFA8">立即订车</u-button>
|
||||
</view>
|
||||
<view class="btn flex align-center justify-between" v-else>
|
||||
<view class="">
|
||||
<view class="">
|
||||
<text class="f-24 c666">定金</text>
|
||||
<text class="f-32 c000">￥</text>
|
||||
<text class="f-32 fw-b c000">3000</text>
|
||||
</view>
|
||||
<view class="">
|
||||
<text v-if="orderType==3" class="f-24 c666">月租</text>
|
||||
<text v-if="orderType==3" class="f-24 c000 mr-1">￥2000</text>
|
||||
<text v-if="orderType==3" class="f-24 c666 mr-24">x24月</text>
|
||||
<text class="f-24 c666">已优惠</text>
|
||||
<text class="f-24 c000">￥200</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-button :customStyle="{width: '232rpx', height: '96rpx', margin: 0}" shape="circle" color="#13AFA8">立即订车</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<u-picker :visibleItemCount="keyName == 'city' ? 3 : 5" @change="changeHandler" @cancel="show = false" @confirm="confirm" confirmColor="#13AFA8" :title="title" :show="show" round="16" :columns="columns"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const address = require('../../../../data/address.js')
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
radiovalue1: '',
|
||||
title: '请选择',
|
||||
value: '',
|
||||
keyName: '',
|
||||
orderType: 2, // 1: 租车；2：卖车；3：租买
|
||||
radiolist: [
|
||||
{ name: '3个月' },
|
||||
{ name: '6个月' },
|
||||
{ name: '9个月' },
|
||||
{ name: '12个月' }
|
||||
],
|
||||
form: {
|
||||
deliver: '',
|
||||
carType: '',
|
||||
city: '',
|
||||
IDType: ''
|
||||
},
|
||||
columns: [],
|
||||
carType: [['营运', '非营运', '预约出租车']],
|
||||
deliver: [['交付中心一', '交付中心三','交付中心三']],
|
||||
city: [[],[]],
|
||||
columnData: [],
|
||||
IDType:['身份证']
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
let arr = address.data
|
||||
arr.forEach((item, index) => {
|
||||
this.city[0].push(item.name)
|
||||
item.children.forEach(i => {
|
||||
if(!this.columnData[index]) this.columnData[index] = []
|
||||
this.columnData[index].push(i.name)
|
||||
})
|
||||
})
|
||||
this.city[1] = this.columnData[0]
|
||||
},
|
||||
methods: {
|
||||
confirm(e) {
|
||||
console.log(e);
|
||||
if(this.keyName == 'city') this.form[this.keyName] = e.value[1]
|
||||
else this.form[this.keyName] = e.value[0]
|
||||
this.show = false
|
||||
},
|
||||
//
|
||||
openPopup(e) {
|
||||
console.log(e);
|
||||
this.keyName = e
|
||||
this.columns = this[e]
|
||||
this.show = true
|
||||
},
|
||||
groupChange(e) {
|
||||
console.log(e);
|
||||
},
|
||||
radioChange(e) {
|
||||
|
||||
},
|
||||
changeHandler() {
|
||||
const {
|
||||
columnIndex,
|
||||
index,
|
||||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||||
picker = this.$refs.uPicker
|
||||
} = e
|
||||
if (columnIndex === 0) {
|
||||
this.loading = true
|
||||
// 模拟网络请求
|
||||
uni.$u.sleep(100).then(() => {
|
||||
picker.setColumnValues(1, this.columnData[index])
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.title {
|
||||
padding: 0 24rpx;
|
||||
font-size: 32rpx;
|
||||
color: #111111;
|
||||
line-height: 84rpx;
|
||||
}
|
||||
.item-box {
|
||||
margin: 0 24rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
width: 702rpx;
|
||||
border: 16rpx;
|
||||
background-color: #fff;
|
||||
.item-title {
|
||||
font-size: 32rpx;
|
||||
color: #111111;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.content-text {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
text {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
font-size: 32rpx;
|
||||
color: #F20808;
|
||||
}
|
||||
.coupon {
|
||||
width: 486rpx;
|
||||
text-align: center;
|
||||
.num {
|
||||
width: 120rpx;
|
||||
height: 42rpx;
|
||||
background-color: #333;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
.price {
|
||||
font-size: 32rpx;
|
||||
color: #111111;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
.none {
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
}
|
||||
.car-image {
|
||||
width: 202rpx;
|
||||
height: 150rpx;
|
||||
background: #F2F2F2;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.buy-tip {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
width: 638rpx;
|
||||
background: url('@/static/images/app/showroom/buy-tip-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
font-size: 22rpx;
|
||||
color: #444444;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.aount {
|
||||
padding-top: 16rpx;
|
||||
border-top: 1rpx solid #eee;
|
||||
}
|
||||
}
|
||||
.border-price {
|
||||
border: 1rpx solid #13AFA8;
|
||||
}
|
||||
.imem-box-1 {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.finance-btn {
|
||||
padding: 0 24rpx;
|
||||
.btn-item {
|
||||
margin-right: 24rpx;
|
||||
width: 154rpx;
|
||||
height: 64rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #111111;
|
||||
}
|
||||
.active-btn-item {
|
||||
background-color: #13AFA8;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.nead-know {
|
||||
margin: 24rpx auto;
|
||||
padding: 30rpx 32rpx;
|
||||
width: 704rpx;
|
||||
background: #E2F0EF;
|
||||
border-radius: 16rpx;
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
width: 750rpx;
|
||||
background-color: #fff;
|
||||
.radio-box {
|
||||
padding: 0 24rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
.text-agree {
|
||||
font-size: 24rpx;
|
||||
color: #111111;
|
||||
line-height: 74rpx;
|
||||
}
|
||||
.color-primary {
|
||||
color: #13AFA8;
|
||||
}
|
||||
.btn {
|
||||
padding: 16rpx 24rpx 68rpx;
|
||||
}
|
||||
}
|
||||
.data-none {
|
||||
font-size: 32rpx;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
</style>
|
||||
@@ -36,7 +36,7 @@
|
||||
<image @click="show = !show" src="@/static/images/icon/mune.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="'select-box', 'bg-white', 'abs'" :style="show && 'height: 800rpx;'">
|
||||
<view :class="'select-box', 'bg-white', 'abs'" :style="show && `height: ${form.type == 1 ? 800 : 1000}rpx;transition: height 0.5s;`">
|
||||
<view class="select-car-box">
|
||||
<view class="brand">
|
||||
<view class="title">
|
||||
@@ -74,7 +74,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="brand">
|
||||
<view class="brand" v-show="form.type == 1 || form.type == 2">
|
||||
<view class="title">
|
||||
选择价格
|
||||
</view>
|
||||
@@ -86,16 +86,40 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="brand" v-show="form.type == 0">
|
||||
<view class="title">
|
||||
选择车龄
|
||||
</view>
|
||||
<view class="select-content">
|
||||
<view class="content-box">
|
||||
<view :class="['content-item', priceId == index && 'active-item']" @click="priceId = index" v-for="(item,index) in 6" :key="index">
|
||||
1年内
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="brand" v-show="form.type == 0">
|
||||
<view class="title">
|
||||
选择租期
|
||||
</view>
|
||||
<view class="select-content">
|
||||
<view class="content-box">
|
||||
<view :class="['content-item', priceId == index && 'active-item']" @click="priceId = index" v-for="(item,index) in 6" :key="index">
|
||||
3个月
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns flex align-center">
|
||||
<u-button @click="reset">重置</u-button>
|
||||
<u-button style="margin-left: 40rpx;" color="#333333" @click="$tab.navigateTo(`./carList/carList`)">确定</u-button>
|
||||
<u-button style="margin-left: 40rpx;" color="#333333" @click="$tab.navigateTo(`./carList/carList?type=${form.type}`)">确定</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<view class="content">
|
||||
<view class="car-info flex align-center" v-for="(item,index) in 20" @click="$tab.navigateTo(`./carRental/index`)">
|
||||
<view class="car-info flex align-center" v-for="(item,index) in 20" @click="link(item)">
|
||||
<image src="../../../static/htz-image-upload/play.png" mode=""></image>
|
||||
<view class="info">
|
||||
<view class="name">汽车标题</view>
|
||||
@@ -150,6 +174,13 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
link(item) {
|
||||
if(this.form.type == 0) {
|
||||
this.$tab.navigateTo(`./carRental/index`)
|
||||
} else if (this.form.type == 1) {
|
||||
this.$tab.navigateTo(`./carBuy/index`)
|
||||
}
|
||||
},
|
||||
fixed(e) {
|
||||
this.scrollTop = e
|
||||
},
|
||||
@@ -233,8 +264,6 @@
|
||||
background-color: #fff;
|
||||
.brand {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
@@ -257,8 +286,6 @@
|
||||
background: #F5F5F5;
|
||||
border-radius: 4rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #444444;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
|
||||
BIN
static/images/app/icon/clock-1.png
Normal file
BIN
static/images/app/icon/clock-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 889 B |
BIN
static/images/app/icon/message.png
Normal file
BIN
static/images/app/icon/message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 660 B |
BIN
static/images/app/icon/phone-black.png
Normal file
BIN
static/images/app/icon/phone-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 710 B |
BIN
static/images/app/icon/phone.png
Normal file
BIN
static/images/app/icon/phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/images/app/icon/share_white.png
Normal file
BIN
static/images/app/icon/share_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 720 B |
BIN
static/images/app/icon/waring.png
Normal file
BIN
static/images/app/icon/waring.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1007 B |
BIN
static/images/app/icon/xingxing_white.png
Normal file
BIN
static/images/app/icon/xingxing_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/images/app/showroom/buy-tip-bg.png
Normal file
BIN
static/images/app/showroom/buy-tip-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
static/images/app/showroom/platform.png
Normal file
BIN
static/images/app/showroom/platform.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
@@ -202,6 +202,24 @@ image {
|
||||
padding: 30rpx;
|
||||
}
|
||||
/* 外边距 */
|
||||
.mt-16 {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.mt-24 {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.mt-32 {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.mb-16 {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.ml-24 {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
.mr-24 {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
@@ -235,6 +253,9 @@ image {
|
||||
.ml-4 {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
.mr-1 {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.mr-2 {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
@@ -14,6 +14,10 @@ export default {
|
||||
title: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.title
|
||||
},
|
||||
round: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 对象数组，设置每一列的数据
|
||||
columns: {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<u-popup
|
||||
:show="show"
|
||||
@close="closeHandler"
|
||||
:round="round"
|
||||
>
|
||||
<view class="u-picker">
|
||||
<u-toolbar
|
||||
|
||||
Reference in New Issue
Block a user