322 lines
8.9 KiB
Vue
322 lines
8.9 KiB
Vue
<template>
|
||
<view>
|
||
<view class="header">
|
||
<image class="header-card" src="https://card.ysd-bs.com/storage/materials/2021/09/01/upgrade-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="radios">
|
||
<view class="radios-title">生效时间</view>
|
||
<view class="radios-subtitle">*请选择升级包生效时间</view>
|
||
<radio-group class="radios-box" @change="radioChange">
|
||
<label class="radio-item" v-for="(item, index) in types" :key="index">
|
||
{{ item.name }}生效
|
||
<radio :value="item.id" :checked="item.id === typeId" color="#252f4b" />
|
||
</label>
|
||
</radio-group>
|
||
</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 item5g" :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 : '',
|
||
typeId : '',
|
||
types : [],
|
||
item5g : []
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
business(1).then(res => {
|
||
this.businessId = res.business_id
|
||
this.mobile = res.mobile
|
||
this.types = res.type
|
||
this.typeId = res.type[0].id
|
||
this.item5g = res.items['5G']
|
||
})
|
||
},
|
||
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 : this.typeId,
|
||
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
|
||
},
|
||
|
||
// 选择生效时间
|
||
radioChange(e){
|
||
this.typeId = e.detail.value
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
|
||
/* 生效时间 */
|
||
.radios{
|
||
background: white;
|
||
padding: 30rpx 50rpx;
|
||
border-bottom: solid 20rpx #e8e8ee;
|
||
}
|
||
|
||
.radios-title{
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.radios-subtitle{
|
||
padding: 10rpx 0;
|
||
font-size: 26rpx;
|
||
color: #910000;
|
||
}
|
||
|
||
.radios-box{
|
||
margin: 0 -10rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.radio-item{
|
||
width: calc(50% - 20rpx);
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx;
|
||
border:solid 1rpx #d2d2d2;
|
||
margin: 10rpx;
|
||
padding: 10rpx 30rpx;
|
||
display: flex;
|
||
height: 100rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
/* 套餐类型 */
|
||
.combo{
|
||
background: white;
|
||
padding: 30rpx 50rpx;
|
||
}
|
||
|
||
.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(50% - 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%;
|
||
}
|
||
}
|
||
|
||
/* 预约表单 */
|
||
.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>
|