You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
370 lines
12 KiB
370 lines
12 KiB
<template>
|
|
<view>
|
|
<view class="se-w-vw-100 se-h-500">
|
|
<u-swiper :radius="0" :list="detail.images" :height="250" :autoplay="false"></u-swiper>
|
|
</view>
|
|
<view class="se-py-20 se-flex se-bgc-white">
|
|
<view class="se-w-vw-90 se-pl-30">
|
|
<view class=" se-c-black se-fw-6 se-fs-32">
|
|
{{detail.goodsName}}
|
|
</view>
|
|
<view class="se-display-ib se-c-red se-fs-32 se-br-8 se-px-10 se-py-5">
|
|
￥{{detail.price}}
|
|
</view>
|
|
</view>
|
|
<view class="se-pr-30 se-flex se-flex-v-c">
|
|
<text>浏览量{{detail.views}}+</text>
|
|
<!-- <button style="justify-content: center;" class="se-w-140 se-flex se-flex-ai-c se-h-60 se-lh-60 se-fs-22 se-bgc-green se-c-white se-py-0 se-br-30 se-px-20 se-m-0" open-type="share">
|
|
<uv-icon name="share" color="#fff"></uv-icon>
|
|
<text class="se-fs-20 se-pl-5">分享</text>
|
|
</button> -->
|
|
</view>
|
|
</view>
|
|
<view class="se-mt-20 se-bgc-white se-px-20 se-py-10 se-ta-l se-c-black se-py-20 se-flex se-flex-ai-c se-fs-24">
|
|
<text>型号:</text>
|
|
<text class="se-ml-10">{{detail.model}}</text>
|
|
</view>
|
|
<template v-if="detail.imageFronts && detail.imageFronts.length>0">
|
|
<view class="se-mt-20 se-bgc-white se-px-20 se-py-10 se-ta-l se-c-black se-py-20 se-flex se-flex-ai-c se-fs-24">
|
|
<text>车辆照片（前）:</text>
|
|
</view>
|
|
<view class="se-flex se-m-20" style="flex-wrap: wrap;">
|
|
<image v-for="(items,indexs) in detail.imageFronts" :key="indexs" @click="previewImage(detail.imageBacks,items)" class="se-w-220 se-h-180 se-bgc-f5 se-br-5 se-mr-10 se-mb-10" :src="items" mode=""></image>
|
|
</view>
|
|
</template>
|
|
<template v-if="detail.imageBacks && detail.imageBacks.length>0">
|
|
<view class="se-mt-20 se-bgc-white se-px-20 se-py-10 se-ta-l se-c-black se-py-20 se-flex se-flex-ai-c se-fs-24">
|
|
<text>车辆照片（后）:</text>
|
|
</view>
|
|
<view class="se-flex se-m-20" style="flex-wrap: wrap;">
|
|
<image v-for="(items,indexs) in detail.imageBacks" :key="indexs" @click="previewImage(detail.imageBacks,items)" class="se-w-220 se-h-180 se-bgc-f5 se-br-5 se-mr-10 se-mb-10" :src="items" mode=""></image>
|
|
</view>
|
|
</template>
|
|
<template v-if="detail.imageLefts && detail.imageLefts.length>0">
|
|
<view class="se-mt-20 se-bgc-white se-px-20 se-py-10 se-ta-l se-c-black se-py-20 se-flex se-flex-ai-c se-fs-24">
|
|
<text>车辆照片（左）:</text>
|
|
</view>
|
|
<view class="se-flex se-m-20" style="flex-wrap: wrap;">
|
|
<image v-for="(items,indexs) in detail.imageLefts" :key="indexs" @click="previewImage(detail.imageLefts,items)" class="se-w-220 se-h-180 se-bgc-f5 se-br-5 se-mr-10 se-mb-10" :src="items" mode=""></image>
|
|
</view>
|
|
</template>
|
|
<template v-if="detail.imageRights && detail.imageRights.length>0">
|
|
<view class="se-mt-20 se-bgc-white se-px-20 se-py-10 se-ta-l se-c-black se-py-20 se-flex se-flex-ai-c se-fs-24">
|
|
<text>车辆照片（右）:</text>
|
|
</view>
|
|
<view class="se-flex se-m-20" style="flex-wrap: wrap;">
|
|
<image v-for="(items,indexs) in detail.imageRights" :key="indexs" @click="previewImage(detail.imageRights,items)" class="se-w-220 se-h-180 se-bgc-f5 se-br-5 se-mr-10 se-mb-10" :src="items" mode=""></image>
|
|
</view>
|
|
</template>
|
|
<template v-if="detail.imageCabs && detail.imageCabs.length>0">
|
|
<view class="se-mt-20 se-bgc-white se-px-20 se-py-10 se-ta-l se-c-black se-py-20 se-flex se-flex-ai-c se-fs-24">
|
|
<text>车辆照片（驾驶室）:</text>
|
|
</view>
|
|
<view class="se-flex se-m-20" style="flex-wrap: wrap;">
|
|
<image v-for="(items,indexs) in detail.imageCabs" :key="indexs" @click="previewImage(detail.imageCabs,items)" class="se-w-220 se-h-180 se-bgc-f5 se-br-5 se-mr-10 se-mb-10" :src="items" mode=""></image>
|
|
</view>
|
|
</template>
|
|
<view class="se-pt-20">
|
|
<view class="se-p-20 se-c-black se-fs-28">
|
|
产品参数
|
|
</view>
|
|
<view class="se-p-20 se-pb-200">
|
|
<u-parse :content="detail.detail"></u-parse>
|
|
</view>
|
|
</view>
|
|
<view class="se-pos-fixed se-bgc-white se-b-ts se-w-vw-100 se-h-160" style="bottom: 0px;left: 0rpx;">
|
|
<view class=" se-flex se-flex-h-sb se-py-20">
|
|
<button style="justify-content: center;" class="default-btn se-w-140 se-flex se-flex-v-c se-fs-22 se-c-black se-py-0 se-br-30 se-px-20 se-m-0" open-type="share">
|
|
<u-icon name="share" color="#000"></u-icon>
|
|
<text class="se-fs-20 se-pl-5 se-c-black">分享</text>
|
|
</button>
|
|
<view class="se-flex se-flex-ai-c se-px-40 se-py-20">
|
|
<view @click="onCustomerService()" class="se-flex se-flex-ai-c se-px-60 se-h-60 se-c-green se-fs-24 se-c-black se-b" style="border-radius: 30rpx 0 0 30rpx;">
|
|
联系电话
|
|
</view>
|
|
<view @click="open()" class="se-flex se-flex-ai-c se-px-60 se-h-60 se-bgc-green se-fs-24 se-c-white se-b" style="border-radius: 0 30rpx 30rpx 0;">
|
|
预约看车
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-popup :show="show" @close="close" @open="open">
|
|
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="80">
|
|
<view class="se-bgc-white se-pt-40 se-pb-80">
|
|
<view class="se-px-40 se-py-20 se-c-black se-fs-30 se-fw-6">
|
|
预约租车
|
|
</view>
|
|
<view class="se-px-20 se-pb-20 se-mx-20 se-bgc-white se-br-20">
|
|
<u-form-item class="se-py-20" label="联系姓名" prop="name" borderBottom>
|
|
<u--input v-model="form.name" border="none" placeholder="请输入联系姓名"></u--input>
|
|
</u-form-item>
|
|
<u-form-item class="se-py-20" label="联系电话" prop="mobile" borderBottom>
|
|
<u--input v-model="form.mobile" type="number" border="none" placeholder="请输入联系电话"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="所在地区" prop="area" @click="handleAreaChange()">
|
|
<u--input readonly v-model="form.address" placeholder="请选择地址" border="bottom"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
<!-- <u-form-item class="se-py-20" label="所在地区" prop="address" borderBottom>
|
|
<u--input v-model="form.address" type="text" border="none" placeholder="请输入所在地区"></u--input>
|
|
</u-form-item> -->
|
|
<u-form-item>
|
|
<view @click="submit"
|
|
class="se-mx-10 se-flex-1 se-br-40 se-flex-h-c se-h-80 se-lh-80 se-ta-c se-fs-28 se-c-white se-bgc-green">
|
|
<text>确认</text>
|
|
</view>
|
|
</u-form-item>
|
|
</view>
|
|
</view>
|
|
</u--form>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { queryGoodsById,addOrder } from "@/common/api.js"
|
|
import QQMapWX from "@/util/qqmap-wx-jssdk.min.js"
|
|
export default{
|
|
data(){
|
|
return{
|
|
show:false,
|
|
list:[
|
|
// 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|
// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
|
// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
|
],
|
|
form:{
|
|
name:"",
|
|
mobile:"",
|
|
address: '',
|
|
latitude:"",
|
|
longitude:"",
|
|
},
|
|
rules:{
|
|
name: [
|
|
{
|
|
required: true,
|
|
message: '请输入联系姓名',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
mobile:[
|
|
{
|
|
required: true,
|
|
message: '请输入联系电话',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
address: [
|
|
{
|
|
required: true,
|
|
message: '请选择地址',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
]
|
|
},
|
|
id:null,
|
|
detail:{}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
//#ifdef MP-WEIXIN
|
|
wx.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ['shareAppMessage', 'shareTimeline']
|
|
});
|
|
//#endif
|
|
this.id = options.goodsId
|
|
if(options.shareId){
|
|
uni.setStorageSync('shareId',options.shareId)
|
|
}
|
|
this.onDetail()
|
|
},
|
|
onShareTimeline(){
|
|
let share = {
|
|
title:this.detail.goodsName,
|
|
path:"/pages_subpack/detail/index?id="+this.id+"&shareId="+uni.getStorageSync('userInfo').id,
|
|
imageUrl:this.list[0].url,
|
|
success:(res) => {
|
|
console.info(res)
|
|
},
|
|
fail:(err)=>{
|
|
console.info(err)
|
|
}
|
|
}
|
|
console.info(share)
|
|
return share
|
|
},
|
|
onShareAppMessage(options) {
|
|
console.info(options)
|
|
let share = {
|
|
title:this.detail.goodsName,
|
|
path:"/pages_subpack/detail/index?id="+this.id+"&shareId="+uni.getStorageSync('userInfo').id,
|
|
imageUrl:this.list[0].url,
|
|
success:(res) => {
|
|
console.info(res)
|
|
},
|
|
fail:(err)=>{
|
|
console.info(err)
|
|
}
|
|
}
|
|
console.info(share)
|
|
return share
|
|
},
|
|
methods:{
|
|
previewImage(urls, current) {
|
|
uni.previewImage({
|
|
urls: urls, // 需要预览的图片 HTTP 链接列表
|
|
current: current // 当前显示图片的链接，不填则默认为 urls 的第一张
|
|
});
|
|
},
|
|
onDetail(){
|
|
let that = this
|
|
queryGoodsById({goodsId:that.id}).then(response=>{
|
|
console.info("queryGoodsById",response)
|
|
let items = response.result
|
|
if(items.image){
|
|
items.image.split(',').forEach(item=>{
|
|
that.list.push({
|
|
url: item,
|
|
type: 'image'
|
|
})
|
|
})
|
|
}
|
|
if(items.image){
|
|
items.images = items.image.split(',')
|
|
}else{
|
|
items.images = []
|
|
}
|
|
if(items.imageBack){
|
|
items.imageBacks = items.imageBack.split(',')
|
|
}else{
|
|
items.imageBacks = []
|
|
}
|
|
|
|
if(items.imageCab){
|
|
items.imageCabs = items.imageCab.split(',')
|
|
}else{
|
|
items.imageCabs = []
|
|
}
|
|
if(items.imageFront){
|
|
items.imageFronts = items.imageFront.split(',')
|
|
}else{
|
|
items.imageFronts = []
|
|
}
|
|
if(items.imageLeft){
|
|
items.imageLefts = items.imageLeft.split(',')
|
|
}else{
|
|
items.imageLefts = []
|
|
}
|
|
if(items.imageRight){
|
|
items.imageRights = items.imageRight.split(',')
|
|
}else{
|
|
items.imageRights = []
|
|
}
|
|
that.detail = items
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
submit() {
|
|
this.$refs.uForm.validate().then(res => {
|
|
// uni.$u.toast('校验通过')
|
|
this.onAddOrder()
|
|
}).catch(errors => {
|
|
uni.$u.toast('校验失败')
|
|
})
|
|
},
|
|
onAddOrder(){
|
|
let that = this
|
|
let params ={
|
|
goodsId:that.detail.id,
|
|
area:that.form.address,
|
|
name:that.form.name,
|
|
phone:that.form.mobile,
|
|
typeId:that.detail.cartypeId
|
|
}
|
|
addOrder(params).then(response=>{
|
|
uni.$u.toast(response.message)
|
|
that.close()
|
|
uni.navigateTo({
|
|
url:"/pages_subpack/success/index"
|
|
})
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
onCustomerService(){
|
|
let that = this
|
|
// let obj = that.$utils.getkeyContent('phone')
|
|
|
|
if (uni.canIUse('makePhoneCall')) {
|
|
uni.makePhoneCall({
|
|
phoneNumber:String(that.detail.phone),
|
|
success: function () {
|
|
console.log('拨打电话成功');
|
|
},
|
|
fail: function () {
|
|
console.log('拨打电话失败');
|
|
}
|
|
});
|
|
} else {
|
|
console.log('你的设备不支持拨打电话功能');
|
|
}
|
|
|
|
},
|
|
open() {
|
|
this.show = true
|
|
},
|
|
close() {
|
|
this.show = false
|
|
},
|
|
handleAreaChange(){
|
|
const that = this;
|
|
wx.chooseLocation({
|
|
// type: 'wgs84',
|
|
success: function (res) {
|
|
const qqmapsdk = new QQMapWX({
|
|
key: 'TT7BZ-Z3LW4-KOAUB-KWHOA-SBJJ6-Y5B6R' // 必填
|
|
});
|
|
uni.showLoading({
|
|
title:"获取中...."
|
|
})
|
|
qqmapsdk.reverseGeocoder({
|
|
location: {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
},
|
|
success: function(response) {
|
|
console.log('逆地理编码结果：', response);
|
|
uni.hideLoading()
|
|
that.form.longitude = response.result.location.lng
|
|
that.form.latitude = response.result.location.lat
|
|
that.form.address = response.result.address
|
|
},
|
|
fail: function(error) {
|
|
uni.hideLoading()
|
|
console.error('逆地理编码失败：', error);
|
|
}
|
|
});
|
|
}
|
|
})
|
|
// this.$refs.citySelectRef.open()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
page{
|
|
background-color: #f5f5f5;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.default-btn{
|
|
background-color: transparent;
|
|
}
|
|
.default-btn::after{
|
|
content: "";
|
|
border: none;
|
|
}
|
|
</style>
|