carrent-front/pages_subpack/detail/index.vue

<template>
	<view>
		<view class="se-w-vw-100 se-h-500">
			<u-swiper :radius="0" :list="list" :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>
		<view class="se-pt-20">
			<view class="se-p-20 se-c-black se-fs-28">
				产品参数
			</view>
			<view>
				<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) {
			this.id = options.goodsId
			this.onDetail()
		},
		methods:{
			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'
							})
						})
					}
					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>