339 lines
8.8 KiB
Vue
339 lines
8.8 KiB
Vue
|
<template>
|
||
|
|
<view class="page flex-col">
|
||
|
|
<view class="section_1 flex-col align-center">
|
||
|
|
<view class="group_1 flex-col"></view>
|
||
|
|
<view class="swiper">
|
||
|
|
<u-swiper @click="getcarPics" height="360rpx" :list="carPics" :indicator="true" :autoplay="true"
|
||
|
|
circular radius="20"></u-swiper>
|
||
|
|
</view>
|
||
|
|
<u-overlay :show="show" @click="this.show = false">
|
||
|
|
<view class="top-x">
|
||
|
|
<text>X</text>
|
||
|
|
</view>
|
||
|
|
<view class="warp">
|
||
|
|
<view class="jtou1" @click.stop="getsyt()">
|
||
|
|
<uni-icons type="left" size="30" color="#fffff"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<movable-area style="width: 80%; height: auto;">
|
||
|
|
<movable-view :x="x" :y="y" direction="all" @change="onChange" class="ma-img" scale="true">
|
||
|
|
<image :src="xzimg" mode="aspectFit"></image>
|
||
|
|
</movable-view>
|
||
|
|
</movable-area>
|
||
|
|
|
||
|
|
<view class="jtou" @click.stop="getxyt()">
|
||
|
|
<uni-icons type="right" size="30" color="#fffff"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</u-overlay>
|
||
|
|
|
||
|
|
<view class="w700 flex-col">
|
||
|
|
<view class="w700">
|
||
|
|
<text
|
||
|
|
style="font-size: 18px; font-weight: bold;">{{carInfo.carBrand + ' ' + carInfo.carModel}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="flex-row justify-between margin-top">
|
||
|
|
<view class="text-wrapper_1 margin-bottom">
|
||
|
|
<text class="text_3"
|
||
|
|
style="font-size: 18px; font-weight: bold;margin-right: 10px;">{{formatAmountToWan(carInfo.carPrice)}}</text>
|
||
|
|
<text class="text_4">万</text>
|
||
|
|
</view>
|
||
|
|
<view class="text-wrapper_2 flex-col" @click="call()">
|
||
|
|
<text class="text_5">咨询车主</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class=" flex-row align-center ">
|
||
|
|
<view class="box_1 flex-col margin-right-xs"></view>
|
||
|
|
<text class="text_6" style="font-size: 16px; font-weight: bold;margin-right: 10px;">基本信息</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<view class="w700 group_6 flex-col margin-top margin-bottom" style="height: auto;">
|
||
|
|
|
||
|
|
<view class=" flex-row justify-between padding-xl">
|
||
|
|
<view class=" flex-col justify-between align-center">
|
||
|
|
<u--image :showLoading="false" :lazyLoad="false" :src="imagesUrl+'caricon1.png'" width="43rpx"
|
||
|
|
height="50rpx" class="image_3"></u--image>
|
||
|
|
<text class="text_7">{{ carInfo.carRecordDate}}</text>
|
||
|
|
<text class="text_8 margin-top-sm">上户日期</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class=" flex-col justify-between align-center">
|
||
|
|
<u--image :showLoading="false" :lazyLoad="false" :src="imagesUrl+'caricon2.png'" width="43rpx"
|
||
|
|
height="50rpx" class="image_3"></u--image>
|
||
|
|
<text class="text_7">{{ carInfo.carKilometers }}公里</text>
|
||
|
|
<text class="text_8 margin-top-sm">公里数</text>
|
||
|
|
</view>
|
||
|
|
<view class=" flex-col justify-between align-center">
|
||
|
|
<u--image :showLoading="false" :lazyLoad="false" :src="imagesUrl+'caricon3.png'" width="43rpx"
|
||
|
|
height="50rpx" class="image_3"></u--image>
|
||
|
|
<text class="text_7">{{ carInfo.carBrand }}</text>
|
||
|
|
<text class="text_8 margin-top-sm">品牌</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="">
|
||
|
|
<view class="dis">
|
||
|
|
<view class="yban1">
|
||
|
|
<text class="xinh">型号:</text>
|
||
|
|
<text class="xin">
|
||
|
|
{{ carInfo.carModel }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<view class="yban">
|
||
|
|
<text class="xinh">车源地:</text>
|
||
|
|
<text class="xin">{{ carInfo.city }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="dis">
|
||
|
|
<view class="yban1">
|
||
|
|
<text class="xinh">联系人:</text>
|
||
|
|
<text class="xin">{{ carInfo.contactName }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="yban">
|
||
|
|
<text class="xinh">电话:</text>
|
||
|
|
<text class="xin">{{ carInfo.contectTel }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="w700 flex-col" v-if="carInfo.carType =='经销商'">
|
||
|
|
<view class=" flex-row align-center ">
|
||
|
|
<view class="box_1 flex-col margin-right-xs"></view>
|
||
|
|
<text class="text_6" style="font-size: 16px; font-weight: bold;margin-right: 10px;">经销商</text>
|
||
|
|
</view>
|
||
|
|
<view class="flex-col margin-top w700 "
|
||
|
|
style="background-color: rgba(237, 245, 255, 1);border-radius: 20rpx;">
|
||
|
|
<view class="flex-row justify-between w700 padding">
|
||
|
|
<text class="text-lg text-bold">{{ carInfo.dealersName || "暂未设置"}}</text>
|
||
|
|
<image :src="imagesUrl+'renzheng.png'" mode="widthFix" style="width: 84rpx; height: 32rpx;"
|
||
|
|
v-if="carInfo.isAuthenticationDealers == 1">
|
||
|
|
</image>
|
||
|
|
</view>
|
||
|
|
<view class="flex-row w700 padding align-center">
|
||
|
|
<image :src="imagesUrl+'loction1111.png'" mode="widthFix" style="width: 20rpx; height: 22rpx;"
|
||
|
|
class="margin-right-xs">
|
||
|
|
</image>
|
||
|
|
<text>{{ carInfo.dealersAddress || "暂未设置"}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="w700 flex-col margin-top" style="min-height: 300rpx;">
|
||
|
|
<view class=" flex-row align-center ">
|
||
|
|
<view class="box_1 flex-col margin-right-xs"></view>
|
||
|
|
<text class="text_6" style="font-size: 16px; font-weight: bold;margin-right: 10px;">详情</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="w700 margin-top " style="height: auto;" v-if="carInfo.carDesc">
|
||
|
|
<text>{{ carInfo.carDesc }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="w700 flex-col margin-top align-center" style="height: auto;" v-if="carInfo.carVideo">
|
||
|
|
<video style="width: 360rpx; height: 640rpx;" :src="baseUrl + carInfo.carVideo" controls></video>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="w700 flex-col justify-center align-center " style="height: auto;">
|
||
|
|
|
||
|
|
<image v-for="(item,index) in carPics" :key="index" :src="item" mode="widthFix"
|
||
|
|
style="max-width:680rpx;margin-top: 20rpx;">
|
||
|
|
</image>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import Decimal from "decimal.js"; // 具体文件中引入
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
carPicsindex: 0,
|
||
|
|
show: false,
|
||
|
|
imagesUrl: getApp().globalData.config.imagesUrl,
|
||
|
|
baseUrl: getApp().globalData.config.baseUrl,
|
||
|
|
carPics: [],
|
||
|
|
xzimg: "",
|
||
|
|
carInfo: {
|
||
|
|
city: '123'
|
||
|
|
},
|
||
|
|
constants: {},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
this.getCarInfo(option.id)
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getsyt() {
|
||
|
|
let lenghts = this.carPics.length
|
||
|
|
console.log('a', this.carPicsindex);
|
||
|
|
if (this.carPicsindex != 0) {
|
||
|
|
this.carPicsindex--
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: '没有上一张了！',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.xzimg = this.carPics[this.carPicsindex]
|
||
|
|
},
|
||
|
|
getxyt() {
|
||
|
|
let lenghts = this.carPics.length
|
||
|
|
if (lenghts >= this.carPicsindex) {
|
||
|
|
this.carPicsindex++
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: '已经是最后一张了！',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.xzimg = this.carPics[this.carPicsindex]
|
||
|
|
},
|
||
|
|
getcarPics(index) {
|
||
|
|
// console.log(this.carPics[index]);
|
||
|
|
this.carPicsindex = index
|
||
|
|
this.show = true
|
||
|
|
this.xzimg = this.carPics[index]
|
||
|
|
},
|
||
|
|
async getCarInfo(carId) {
|
||
|
|
const res = await this.$request({
|
||
|
|
url: '/system/car/getInfoWx/' + carId,
|
||
|
|
})
|
||
|
|
|
||
|
|
this.carInfo = res.data
|
||
|
|
console.log(this.carInfo);
|
||
|
|
|
||
|
|
let carPics = res.data.carPics.split(",");
|
||
|
|
for (let i = 0; i < carPics.length; i++) {
|
||
|
|
carPics[i] = this.baseUrl + carPics[i]
|
||
|
|
}
|
||
|
|
this.carPics = carPics
|
||
|
|
let city = res.data.city
|
||
|
|
const getRegion = await this.$request({
|
||
|
|
url: '/shop/region/getInfoWx/' + city,
|
||
|
|
})
|
||
|
|
this.carInfo.city = getRegion.data.name
|
||
|
|
|
||
|
|
},
|
||
|
|
call() {
|
||
|
|
uni.makePhoneCall({
|
||
|
|
phoneNumber: this.carInfo.contectTel, //电话号码
|
||
|
|
success: function(e) {
|
||
|
|
console.log(e);
|
||
|
|
},
|
||
|
|
fail: function(e) {
|
||
|
|
console.log(e);
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 格式化金额，转为万元单位
|
||
|
|
formatAmountToWan(num) {
|
||
|
|
num = Number(num);
|
||
|
|
if (num == 0) {
|
||
|
|
return num + "";
|
||
|
|
} else {
|
||
|
|
return new Decimal(num).div(new Decimal(10000)).toString();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './index.rpx.css';
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
width: 700rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
position: relative;
|
||
|
|
top: -60rpx
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-x {
|
||
|
|
width: 90%;
|
||
|
|
margin: 0 auto;
|
||
|
|
height: 60px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
color: white;
|
||
|
|
font-size: 22px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.warp {
|
||
|
|
width: 100%;
|
||
|
|
margin: 60px auto;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.xin {
|
||
|
|
font-size: 18px !important;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.xinh {
|
||
|
|
font-size: 18px;
|
||
|
|
color: rgba(127, 127, 127, 1.0);
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dis {
|
||
|
|
width: 90%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin: 20px auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yban1 {
|
||
|
|
width: 40%;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.yban {
|
||
|
|
width: 60%;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.jtou1 {
|
||
|
|
position: fixed;
|
||
|
|
left: 5px;
|
||
|
|
top: 40%;
|
||
|
|
z-index: 999;
|
||
|
|
color: white;
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.jtou {
|
||
|
|
position: fixed;
|
||
|
|
right: 5px;
|
||
|
|
top: 40%;
|
||
|
|
z-index: 999;
|
||
|
|
color: white;
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ma-img {
|
||
|
|
width: 100%;
|
||
|
|
height: 260px;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|