332 lines
7.8 KiB
Vue
332 lines
7.8 KiB
Vue
<template>
|
|
<view class="" style="padding-bottom: 120rpx;">
|
|
<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>
|
|
|
|
</u-navbar>
|
|
<!-- 轮播图 -->
|
|
<u-swiper height="750rpx" radius="0" 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="20" :text="commodityDeta.title"></u--text>
|
|
<!-- 收藏/分享 -->
|
|
<view slot="right">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="flex collect-share" style="">
|
|
<image v-if="!commodityDeta.userIsCollect" @click="carAddProductFn"
|
|
:src="`${config.aliyunOssUrl}/static/images/app/serve/coupons_xingxing_end.png`" alt="">
|
|
</image>
|
|
<image v-else @click="carAddProductFn"
|
|
: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 v-if="!commodityDeta.userIsCollect" @click="carAddProductFn"
|
|
src="@/static/images/app/serve/coupons_xingxing.png" mode="">
|
|
</image>
|
|
<image v-else @click="carAddProductFn"
|
|
src="@/static/images/app/serve/coupons_xingxing_end.png" alt=""></image>
|
|
<image @click="shareFn(commodityDeta)" src="@/static/images/app/serve/coupons_fenxiang.png"
|
|
mode=""></image>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex align-center shop-price">
|
|
<view class="shop-price-title">指导价:</view> ￥
|
|
{{commodityDeta.maxGuidePrice}}
|
|
</view>
|
|
<view class="flex align-center shop-price">
|
|
<view class="shop-price-title">零售价:</view> ￥ {{commodityDeta.fullPrice}}
|
|
</view>
|
|
<view class="flex align-center shop-price">
|
|
<view class="shop-price-title">定金:</view> ￥{{commodityDeta.depositPrice}}
|
|
</view>
|
|
<!-- <view v-if="type==0" class="flex align-center shop-price">
|
|
<text>月供 ￥{{commodityDeta.monthTributePrice}} </text>
|
|
<text class="f-26 c666 fw-4"> x {{commodityDeta.monthTribute}}期</text>
|
|
</view>
|
|
<view v-else class="flex align-center shop-price">
|
|
<text>月租 ￥{{commodityDeta.monthRentPrice}} </text>
|
|
<text class="f-26 c666 fw-4"> x {{commodityDeta.monthRent}}期</text>
|
|
</view> -->
|
|
</view>
|
|
<!-- <view style="width: 750rpx;height: 12rpx;background: #f5f5f5;"></view> -->
|
|
<view class="store-list">
|
|
<rich-text :nodes="commodityDeta.content" :tagStyle="parseStyle" :preview="false"
|
|
:image-menu-prevent="false"></rich-text>
|
|
</view>
|
|
<view class="btns fixed-bottom">
|
|
<view class="comment-btn flex align-center justify-between">
|
|
<view class="contact-icon flex-column align-center justify-center"
|
|
@click="Navto('/pages/driver/message/message_Chat/message_Chat',)"
|
|
src="@/static/images/app/icon/message.png">
|
|
<image src="@/static/images/app/icon/message.png" mode="heightFix"></image>
|
|
<text class="txt">咨询</text>
|
|
</view>
|
|
<view class="right-btn" @click="link">
|
|
立即订车
|
|
</view>
|
|
</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 {
|
|
config: getApp().globalData.config,
|
|
//商品详情
|
|
commodityDeta: {},
|
|
commodityNum: 1,
|
|
branner: [], // 轮播图列表
|
|
currentNum: 0,
|
|
//规格弹出
|
|
parameterShow: false,
|
|
actArr: [],
|
|
specTabArr: [],
|
|
//车id
|
|
carId: '',
|
|
//销售类型
|
|
type: 0,
|
|
//富文本默认样式
|
|
parseStyle: {
|
|
img: 'width:750rpx;'
|
|
},
|
|
allowSaveImage: false
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
//分享
|
|
shareFn(item) {
|
|
console.log('车详情',item);
|
|
console.log(item.mainImage);
|
|
let shareData = {
|
|
imageUrl: item.mainImage,
|
|
content: item.title
|
|
}
|
|
|
|
shareApi('WXSceneSession', shareData, `pages/showroom/carBuy/index?id=${item.id}&type=${this.type}`).then(
|
|
res => {
|
|
getNoteShare(item.id).then(res => {
|
|
console.log(res, '分享成功');
|
|
})
|
|
})
|
|
},
|
|
//跳转消息
|
|
Navto(url, ) {
|
|
let obj = this.commodityDeta.attrList[0]
|
|
console.log(obj.carDealerUid);
|
|
this.$u.route(url, {
|
|
charSn: obj.charSn ? JSON.stringify(encodeURIComponent(obj.charSn)) : '',
|
|
toUidNickname: obj.carDealerName,
|
|
toUid: obj.carDealerUid,
|
|
});
|
|
},
|
|
//返回
|
|
navBackFn(type) {
|
|
if (type == 'tabbar') {
|
|
uni.switchTab({
|
|
url: '/pages/driver/home/home'
|
|
})
|
|
} else {
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
link() {
|
|
this.$tab.navigateTo(`./predetermine?id=${this.commodityDeta.id}&type=${this.type}`)
|
|
},
|
|
// 添加收藏接口
|
|
carAddProductFn() {
|
|
if (this.commodityDeta.userIsCollect) {
|
|
carCancelProduct({
|
|
ids: this.commodityDeta.id
|
|
}).then(res => {
|
|
uni.showToast({
|
|
title: '已取消收藏',
|
|
icon: 'none'
|
|
})
|
|
})
|
|
} else {
|
|
carAddProduct({
|
|
cspId: this.commodityDeta.id
|
|
}).then(res => {
|
|
uni.showToast({
|
|
title: '已收藏',
|
|
icon: 'none'
|
|
})
|
|
})
|
|
}
|
|
this.getProductInfoFn()
|
|
},
|
|
//车详情
|
|
getProductInfoFn() {
|
|
getProductInfo({
|
|
id: this.carId,
|
|
type: this.type
|
|
}).then(res => {
|
|
console.log(res.data);
|
|
this.commodityDeta = res.data
|
|
if (res.data.picture) {
|
|
this.branner = res.data.picture.split(',')
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.carId = options.id
|
|
this.type = options.type
|
|
this.getProductInfoFn()
|
|
//拉详情
|
|
},
|
|
longPressImage() {
|
|
console.log('imag');
|
|
if (!this.data.allowSaveImage) {
|
|
console.log('imag2');
|
|
// 如果不允许保存图片，则阻止默认行为
|
|
return false;
|
|
}
|
|
// 允许保存图片的其他操作...
|
|
},
|
|
onShow() {},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f5f5f5;
|
|
|
|
}
|
|
|
|
.store-list {
|
|
background: #ffffff;
|
|
padding-top: 24rpx;
|
|
}
|
|
|
|
.store-list img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.collect-share {
|
|
margin-right: 140rpx;
|
|
|
|
image {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
}
|
|
|
|
.info-introduce {
|
|
width: 750rpx;
|
|
padding: 24rpx 24rpx 0rpx;
|
|
background: #FFFFFF;
|
|
font-size: 34rpx;
|
|
color: #000;
|
|
font-weight: 600;
|
|
|
|
.shop-price {
|
|
margin-top: 24rpx;
|
|
|
|
.shop-price-title {
|
|
width: 120rpx;
|
|
text-align-last: justify;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.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 {
|
|
width: 750rpx;
|
|
padding: 16rpx 24rpx;
|
|
}
|
|
|
|
.contact-icon {
|
|
width: 98rpx;
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.txt {
|
|
margin-top: 6rpx;
|
|
font-size: 20rpx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
|
|
.right-btn {
|
|
width: 580rpx;
|
|
height: 96rpx;
|
|
background: #333333;
|
|
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
background-color: #13AFA8;
|
|
text-align: center;
|
|
line-height: 94rpx;
|
|
}
|
|
|
|
}
|
|
</style> |