461 lines
11 KiB
Vue
461 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<view class="deng">
|
||
<image class="deng-image-l" src="@/static/images/app/showroom/deng-l.png" mode=""></image>
|
||
<image class="deng-image-r" src="@/static/images/app/showroom/deng-r.png" mode=""></image>
|
||
</view>
|
||
<u-navbar :title="' '" safeAreaInsetTop bgColor="rgba(0,0,0,0)">
|
||
<view slot="left" class="flex align-center nav-list" style="" @click="navBackFn">
|
||
<view class="back-box flex-center" >
|
||
<u-icon name="arrow-left" :color="showType <= 3 && '#fff'|| '#000'" size="20"></u-icon>
|
||
</view>
|
||
<view :class="['nav-title', showType ==4 && 'nav-title-color']" >
|
||
{{commodityDeta.title}}
|
||
<!-- 元PLUS冠军版 -->
|
||
</view>
|
||
</view>
|
||
</u-navbar>
|
||
<view :class="['branner-box', showType <= 3 && 'branner-box-color']">
|
||
<!-- v-show="showType!=3" -->
|
||
<view 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-if="showType != 4" style="height: 48rpx;" />
|
||
</view>
|
||
<!-- <view v-if="showType<=3" class="delivery-time flex align-center">
|
||
<image src="@/static/images/app/icon/clock-1.png" mode=""></image>
|
||
预计下单后2-4周内交付
|
||
</view> -->
|
||
<!-- 轮播图 -->
|
||
<view v-if="showType < 4" style="height: 146rpx;" />
|
||
<view class="swiper-box" v-if="showType == 1">
|
||
<u-swiper circular imgMode="aspectFit" bgColor="transparent" height="604rpx"
|
||
indicatorActiveColor="#13AFA8" keyName="image" @change="actTrimChengFn" :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="actTrimChengFn">
|
||
</u-swiper>
|
||
<view v-show="showType ==3" style="height: 108rpx;" /> -->
|
||
<view class="out-box"v-if="colorList.length&&showType == 2 || showType == 3">
|
||
<u-swiper v-if="showType==2|| showType == 3" circular :current="colorIndex" :autoplay="false" imgMode="widthFix"
|
||
bgColor="transparent" height="476rpx" keyName="image" :list="colorList" @change="actTrimChengFn">
|
||
</u-swiper>
|
||
<view class="swiper-line-box">
|
||
<view v-if="colorList.length==1" class="swiper-line-s"></view>
|
||
<view v-else 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?colorList[colorIndex].name:'无'}}
|
||
</view>
|
||
<view class="color-info-all">
|
||
￥{{colorList[colorIndex].addPrice}}
|
||
<!-- <text>{{colorList[colorIndex].price}}</text> -->
|
||
</view>
|
||
</view>
|
||
<view class="color-list flex-wrap align-center justify-center">
|
||
<view @click="actTrimClickFn(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="commodityDeta.equityImage" 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">{{type==0?commodityDeta.monthTributePrice:commodityDeta.monthRentPrice}}</text>
|
||
<text class="info-bottom">
|
||
/月x{{type==0?commodityDeta.monthTribute:commodityDeta.monthRent}}期
|
||
</text>
|
||
</view>
|
||
<view class="info-bottom">
|
||
月供最低（含定金¥{{commodityDeta.depositPrice}}）
|
||
</view>
|
||
</view>
|
||
<u-button @click="navEndOrderFn" shape="circle"
|
||
:customStyle="{ width: '264rpx', height: '96rpx', margin: 0}" color="#13AFA8">立即订购</u-button>
|
||
</view>
|
||
<u-safe-bottom></u-safe-bottom>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
shareApi
|
||
} from "@/utils/index.js"
|
||
import {
|
||
getNoteShare
|
||
} from "@/api/discover/discover.js"
|
||
import {
|
||
getProductInfo,
|
||
carAddProduct,
|
||
carCancelProduct
|
||
} from "@/api/showroom/showroom.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
//车id
|
||
carId: '',
|
||
//销售类型
|
||
type: 0,
|
||
//商品详情
|
||
commodityDeta: {},
|
||
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: [],
|
||
endTrimIds: {
|
||
appearaceId: '', //外观
|
||
interiorId: '', //内饰
|
||
}
|
||
};
|
||
},
|
||
methods: {
|
||
//返回上一级
|
||
navBackFn(){
|
||
console.log('nav');
|
||
uni.navigateBack()
|
||
},
|
||
//监听选择
|
||
actTrimChengFn(e) {
|
||
this.colorIndex = e.current
|
||
if (this.showType == 2) {
|
||
this.endTrimIds.appearace = this.commodityDeta.appearaceList[this.colorIndex]
|
||
} else {
|
||
this.endTrimIds.interior = this.commodityDeta.interiorList[this.colorIndex]
|
||
}
|
||
},
|
||
//点击选择样式
|
||
actTrimClickFn(e) {
|
||
this.colorIndex = e
|
||
if (this.showType == 2) {
|
||
this.endTrimIds.appearace = this.commodityDeta.appearaceList[e]
|
||
} else {
|
||
this.endTrimIds.interior = this.commodityDeta.interiorList[e]
|
||
}
|
||
},
|
||
//确认订单 pages/driver/showroom/confirmOrder/confirmOrder
|
||
navEndOrderFn() {
|
||
this.$store.dispatch('Cardmoney', null)
|
||
if (!this.endTrimIds.appearace) {
|
||
this.endTrimIds.appearace = this.commodityDeta.appearaceList[0]
|
||
}
|
||
if (!this.endTrimIds.interior) {
|
||
this.endTrimIds.interior = this.commodityDeta.interiorList[0]
|
||
}
|
||
uni.navigateTo({
|
||
url: `/pages/driver/showroom/confirmOrder/confirmOrder?type=${this.type}`,
|
||
success: res => {
|
||
// 通过eventChannel向被打开页面传送数据
|
||
res.eventChannel.emit('form', {
|
||
...this.endTrimIds,
|
||
...this.commodityDeta,
|
||
depositPrice: this.commodityDeta.attrList[0].depositPrice
|
||
})
|
||
}
|
||
})
|
||
},
|
||
changeShowType(e) {
|
||
this.showType = e
|
||
if (e == 1 || e == 2) {
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#FFFFFF'
|
||
})
|
||
} else {
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#000000'
|
||
})
|
||
}
|
||
if (e == 2) {
|
||
this.colorIndex = 0
|
||
this.colorList = this.commodityDeta.appearaceList
|
||
if (!this.colorList.length) {
|
||
uni.showToast({
|
||
title: '无外观配置',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} else if (e == 3) {
|
||
this.colorIndex = 0
|
||
this.colorList = this.commodityDeta.interiorList
|
||
if (!this.colorList.length) {
|
||
uni.showToast({
|
||
title: '无内饰配置',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
},
|
||
//详情
|
||
getProductInfoFn() {
|
||
getProductInfo({
|
||
id: this.carId,
|
||
type: this.type
|
||
}).then(res => {
|
||
console.log('买车详情', res.data);
|
||
this.commodityDeta = res.data
|
||
this.branner = res.data.image.split(',')
|
||
})
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.carId = options.id
|
||
this.type = options.type
|
||
this.getProductInfoFn()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F8F8F8;
|
||
}
|
||
|
||
.deng {
|
||
height: 1rpx;
|
||
width: 750rpx;
|
||
position: relative;
|
||
z-index: 9;
|
||
.deng-image-l,
|
||
.deng-image-r {
|
||
width: 370rpx;
|
||
height: 460rpx;
|
||
}
|
||
|
||
.deng-image-l {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 49;
|
||
}
|
||
|
||
.deng-image-r {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 49;
|
||
}
|
||
}
|
||
.nav-list{
|
||
position: relative;
|
||
z-index: 9999;
|
||
}
|
||
.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;
|
||
}
|
||
|
||
.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: 220rpx;
|
||
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;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
|
||
.btn-info {
|
||
padding: 32rpx 24rpx;
|
||
font-size: 38rpx;
|
||
color: #000000;
|
||
|
||
.left-info {
|
||
width: calc(100% - 288rpx);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.swiper-line-s {
|
||
width: 128rpx;
|
||
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> |