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">
					环卫车
				</view>
				<view class="se-display-ib se-c-red se-fs-32 se-br-8 se-px-10 se-py-5">
					￥3600
				</view>
			</view>
			<view class="se-pr-30 se-flex se-flex-v-c">
				<text>浏览量1000+</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">阿萨德防守打法2水岸东方</text>
		</view>
		<view class="se-pt-20">
			<view class="se-p-20 se-c-black se-fs-28">
				产品参数
			</view>
			<view>
				<image class="se-w-p-100" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="widthFix"></image>
				<image class="se-w-p-100" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="widthFix"></image>
				<image class="se-w-p-100" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="widthFix"></image>
			</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-py-30">
					<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 label="联系姓名" prop="name" borderBottom>
							<u--input v-model="form.name" border="none" placeholder="请输入联系姓名"></u--input>
						</u-form-item>
						<u-form-item 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="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>
	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: ''
				},
				rules:{
					
					name: [
						{
							required: true,
							message: '请输入联系姓名',
							trigger: ['blur', 'change']
						}
					],
					mobile:[
						{
							required: true,
							message: '请输入联系电话',
							trigger: ['blur', 'change']
						}
					],
					address: [
						{
							required: true,
							message: '请选择地址',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		methods:{
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			onCustomerService(){
				let that = this
				// let obj = that.$utils.getkeyContent('phone')
				
				if (uni.canIUse('makePhoneCall')) {
					uni.makePhoneCall({
					  // phoneNumber: obj.keyContent, // 电话号码
					  phoneNumber:"13189698115",
					  success: function () {
						console.log('拨打电话成功');
					  },
					  fail: function () {
						console.log('拨打电话失败');
					  }
					});
				} else {
					console.log('你的设备不支持拨打电话功能');
				}
				
			},
			open() {
			  this.show = true
			},
			close() {
			  this.show = false
			}
		}
	}
</script>
<style>
	page{
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.default-btn{
		background-color: transparent;
	}
	.default-btn::after{
		content: "";
		border: none;
	}
</style>