[本时生活h5端]
This commit is contained in:
299
pages/subscribe/combo/combo.vue
Normal file
299
pages/subscribe/combo/combo.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<view class="header">
|
||||
<image class="header-card" src="https://card.ysd-bs.com/storage/materials/2021/09/01/combo-card.png" mode="widthFix"></image>
|
||||
<image class="header-back" src="https://card.ysd-bs.com/storage/materials/2021/09/01/subscribe-back.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="combo">
|
||||
<view class="combo-title">*请选择套餐类型</view>
|
||||
<view class="combo-tabs">
|
||||
<view class="combo-item" :class="{show : comboId === item.business_item_id}" v-for="(item, index) in tops" :key="index" @tap="onCombo(item.business_item_id)">
|
||||
<view class="combo-item-header">
|
||||
<view class="combo-item-title">{{ item.title || '-' }}</view>
|
||||
<view class="combo-item-price">¥{{ item.price || '-' }}</view>
|
||||
</view>
|
||||
<view class="combo-item-info">
|
||||
<image v-if="item.cover != ''" :src="item.cover" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nets">
|
||||
<view class="nets-title">*请选择套餐类型</view>
|
||||
<view class="combo-tabs">
|
||||
<view class="combo-item nets-item" :class="{show : comboId === item.business_item_id}" v-for="(item, index) in nets" :key="index" @tap="onCombo(item.business_item_id)">
|
||||
<view class="combo-item-header">
|
||||
<view class="combo-item-title">{{ item.title || '-' }}</view>
|
||||
<view class="combo-item-price">¥{{ item.price || '-' }}</view>
|
||||
</view>
|
||||
<view class="combo-item-info">
|
||||
<image v-if="item.cover != ''" :src="item.cover" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提交预约表单 -->
|
||||
<form class="combo-from" @submit="comboSubmit">
|
||||
<view class="from-title">预约信息</view>
|
||||
<view class="from-submit">*请填写预约信息</view>
|
||||
<input class="from-input" type="text" name="name" placeholder="请输入姓名" :value="name" />
|
||||
<input class="from-input" type="number" name="phone" placeholder="请输入手机号" :value="phone" />
|
||||
<button class="from-button" size="default" form-type="submit">立即预约</button>
|
||||
</form>
|
||||
|
||||
<!-- 客服电话 -->
|
||||
<view class="service">
|
||||
<view @tap="callPhone">
|
||||
<view>客服热线：{{ mobile }}</view>
|
||||
<view class="callPhone">拨打客服电话</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { business, create } from '@/apis/interfaces/subscribe'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
businessId : '',
|
||||
comboId : '',
|
||||
mobile : '',
|
||||
phone : '',
|
||||
name : '',
|
||||
tops : [],
|
||||
nets : []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
business(2).then(res => {
|
||||
this.businessId = res.business_id
|
||||
this.mobile = res.mobile
|
||||
this.tops = res.items.top
|
||||
this.nets = res.items.network
|
||||
})
|
||||
},
|
||||
onShow() {},
|
||||
methods:{
|
||||
// 拨打电话
|
||||
callPhone(){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.mobile,
|
||||
fail(){}
|
||||
})
|
||||
},
|
||||
|
||||
// 提交表单
|
||||
comboSubmit(e){
|
||||
let formValue = e.detail.value
|
||||
|
||||
if(this.comboId === ''){
|
||||
uni.showToast({
|
||||
title: "请选择套餐类型",
|
||||
icon : "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if(formValue.name === ''){
|
||||
uni.showToast({
|
||||
title: "请输入预约人姓名",
|
||||
icon : "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if(formValue.phone === ''){
|
||||
uni.showToast({
|
||||
title: "请输入预约办理手机号码",
|
||||
icon : "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
create({
|
||||
business_id : this.businessId,
|
||||
business_item_id: this.comboId,
|
||||
type : '',
|
||||
mobile : formValue.phone,
|
||||
username : formValue.name
|
||||
}).then(res => {
|
||||
uni.showModal({
|
||||
title : "提示",
|
||||
icon : res,
|
||||
showCancel : false,
|
||||
confirmColor: "#252f4b",
|
||||
success : modalRes => {
|
||||
if(modalRes.confirm){
|
||||
this.phone = ''
|
||||
this.name = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
}).catch(err=>{
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 选择套餐
|
||||
onCombo(id){
|
||||
this.comboId = id
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header{
|
||||
position: relative;
|
||||
background: linear-gradient(to top, #575a85, #252f4b);
|
||||
padding: 60rpx 60rpx 0;
|
||||
}
|
||||
|
||||
.header-card{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.header-back{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* 套餐类型 */
|
||||
.combo{
|
||||
background: white;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.combo-title{
|
||||
font-size: 26rpx;
|
||||
color: #910000;
|
||||
}
|
||||
|
||||
.combo-tabs{
|
||||
margin: 0 -10rpx;
|
||||
padding-top: 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.combo-item{
|
||||
margin: 10rpx;
|
||||
width: calc(33.33% - 20rpx);
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.combo-item.show > .combo-item-header{
|
||||
background: white;
|
||||
box-shadow: 3rpx 0 4rpx 4rpx rgba(255, 152, 0, .13);
|
||||
}
|
||||
|
||||
.combo-item-header{
|
||||
background: #fffbf4;
|
||||
border:solid 1rpx #e3a03a;
|
||||
border-bottom: none;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.combo-item-title{
|
||||
font-size: 28rpx;
|
||||
color: #2d2d2d;
|
||||
}
|
||||
|
||||
.combo-item-price{
|
||||
font-weight: bold;
|
||||
font-size: 48rpx;
|
||||
color: #e3a03a;
|
||||
}
|
||||
|
||||
.combo-item-info{
|
||||
background: #9e652a;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
image{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nets{
|
||||
padding: 30rpx;
|
||||
border-top: solid 20rpx #e8e8e8;
|
||||
}
|
||||
|
||||
.nets-title{
|
||||
font-size: 32rpx;
|
||||
color: #9e652a;
|
||||
}
|
||||
|
||||
.nets-item{
|
||||
width: calc(50% - 20rpx);
|
||||
}
|
||||
|
||||
/* 预约表单 */
|
||||
.combo-from{
|
||||
display: block;
|
||||
padding: 30rpx 50rpx;
|
||||
border-top: solid 20rpx #e8e8e8;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.from-title{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.from-submit{
|
||||
padding: 10rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #910000;
|
||||
}
|
||||
|
||||
.from-input{
|
||||
background: #e2e2e2;
|
||||
height: 90rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-top: 30rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.from-button[size="default"]{
|
||||
background: #252f4b;
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0;
|
||||
margin-top: 30rpx;
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
/* 客服电话 */
|
||||
.service{
|
||||
padding: 60rpx;
|
||||
text-align: center;
|
||||
background: #e8e8e8;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.callPhone{
|
||||
color: #252f4b;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user