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.
173 lines
5.3 KiB
173 lines
5.3 KiB
<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>
|