carrent-front/pages_subpack/detail/index.vue

<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 | getPersonAuthentication}}<text class="se-fs-24">元</text><text class="se-fs-24" v-if="detail.categoryoneName=='环卫设备及配件'">/月</text>
				</view>
			</view>
			<view class="se-pr-30 se-flex se-flex-v-c">
				<text v-if="detail.categoryoneName==`环卫设备及配件`">销售量{{detail.views}}+</text>
				<text v-else>浏览量{{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-ff-cw se-fs-24">
			<view class="se-flex se-flex-ai-c">
				<text>型号:</text>
				<view class="se-tag">
					{{detail.model}}
				</view>
			</view>
			<view class="se-flex se-flex-ai-c se-pt-10"  v-if="detail.categoryoneName!='环卫设备及配件'">
				<text>品牌名:</text>
				<view class="se-tag">
					{{detail.brand}}
				</view>
			</view>
			<view class="se-flex se-flex-ai-c se-pt-10"  v-if="detail.categoryoneName!='环卫设备及配件'">
				<text>公里数:</text>
				<view class="se-tag">
					{{detail.mileage}}公里
				</view>
			</view>
			<view class="se-flex se-flex-ai-c se-pt-10" v-if="detail.categoryoneName!='环卫设备及配件'">
				<text>时间:</text>
				<view class="se-tag">
					{{detail.goodsTime}}
				</view>
			</view>
		</view>
		<template v-if="detail.imageFronts && detail.imageFronts.length>0 && detail.categoryoneName!='环卫设备及配件'">
			<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.imageFronts,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 && detail.categoryoneName!='环卫设备及配件'">
			<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 && detail.categoryoneName!='环卫设备及配件'">
			<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 && detail.categoryoneName!='环卫设备及配件'">
			<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 && detail.categoryoneName!='环卫设备及配件'">
			<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" style="border-radius: 10px 10px 0 0;">
					<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?goodsId="+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
		},
		filters:{
			getPersonAuthentication(price){
				let companyAuthenticationStatus = uni.getStorageSync("companyAuthenticationStatus")
				if(companyAuthenticationStatus==1){
					return price
				}
				let personAuthenticationStatus =uni.getStorageSync("personAuthenticationStatus")
				if (personAuthenticationStatus != 1){
					return '***';
				}
				return price
			}	
		},
		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 => {
					
				})
			},
			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;
	}
	.se-tag{
		padding: 5rpx 20rpx;
		background: #fff2df;
		border-radius: 4rpx;
		border: 2rpx solid rgba(0,0,0,0.00);
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #fab143;
		margin-left: 10rpx;
		font-size: 22rpx;
	}
	
	.se-tag:first-child{
		margin-left: 0rpx;
	}
</style>