DeXun/cashier
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
砂糖
2026-02-07 18:01:13 +08:00
commit 8015759c65
2110 changed files with 269866 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
fuintUniapp/pages/book/bookDetail.vue Normal file
View File

@@ -0,0 +1,242 @@
<template>
<view v-if="!isLoading" class="container b-f p-b">
<view class="base">
<view class="title"> {{ detail.bookName }} </view>
<view class="item">
<view class="label">姓名：</view>
<view class="value">{{ detail.contact ? detail.contact : '' }}</view>
</view>
<view class="item">
<view class="label">日期：</view>
<view class="value">{{ detail.serviceDate }}</view>
</view>
<view class="item">
<view class="label">时间：</view>
<view class="value">{{ detail.serviceTime }}</view>
</view>
<view class="item">
<view class="label">门店：</view>
<view class="value">{{ detail.storeInfo ? detail.storeInfo.name : '-'}}</view>
</view>
</view>
<view class="book-qr" v-if="detail.code">
<view>
<image class="image" :src="detail.qrCode"></image>
</view>
<view class="qr-code">
<p class="code">预约码：{{ detail.code }}</p>
<p class="tips">请出示以上券码给核销人员</p>
</view>
</view>
<view class="book-content m-top20">
<view class="title">备注</view>
<view class="content"><jyf-parser :html="detail.remark ? detail.remark : '暂无...'"></jyf-parser></view>
</view>
<!-- 底部选项卡 -->
<view class="footer-fixed" v-if="detail.status == 'A'">
<view class="footer-container">
<view class="foo-item-btn">
<view class="btn-wrapper">
<view class="btn-item btn-item-main" @click="onCancel(detail.id)">
<text>取消预约</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import jyfParser from '@/components/jyf-parser/jyf-parser'
import * as BookApi from '@/api/book'
export default {
data() {
return {
// 预约ID
myBookId: 0,
// 加载中
isLoading: true,
// 当前卡券详情
detail: null,
qrCode: '',
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.myBookId = options.myBookId ? options.myBookId : 0;
this.getBookDetail();
},
methods: {
// 获取预约详情
getBookDetail() {
const app = this
BookApi.myBookDetail(app.myBookId)
.then(result => {
app.detail = result.data ? result.data.bookInfo : null;
})
.finally(() => app.isLoading = false)
},
// 取消预约
onCancel() {
const app = this
uni.showModal({
title: '友情提示',
content: '确认取消预约吗？',
success(o) {
if (o.confirm) {
BookApi.cancel(app.myBookId)
.then(result => {
// 显示成功信息
app.$success(result.message)
// 刷新当前订单数据
app.getBookDetail()
})
}
}
});
}
}
}
</script>
<style lang="scss" scoped>
.container {
min-height: 100vh;
padding: 20rpx;
background: #fff;
color:#666666;
}
.base {
border: dashed 5rpx #cccccc;
padding: 30rpx;
border-radius: 10rpx;
margin: 20rpx;
display: block;
height: auto;
min-height: 220rpx;
.title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 30rpx;
}
.book-main {
.image {
width: 200rpx;
height: 158rpx;
border-radius: 8rpx;
border: #cccccc solid 1rpx;
}
width: 100%;
}
.item {
margin-bottom: 20rpx;
font-size: 30rpx;
color: #666666;
clear: both;
.label {
float: left;
font-weight: bold;
}
.value {
font-weight: normal;
}
}
}
.book-qr {
border: dashed 5rpx #cccccc;
border-radius: 10rpx;
margin: 20rpx;
text-align: center;
padding-top: 30rpx;
padding-bottom: 30rpx;
.image {
width: 360rpx;
height: 360rpx;
margin: 0 auto;
}
.qr-code{
.code{
font-weight: bold;
font-size: 30rpx;
line-height: 50rpx;
}
.tips{
font-size: 25rpx;
color:#C0C4CC;
}
}
}
.book-content {
padding: 30rpx;
border: dashed 5rpx #cccccc;
border-radius: 5rpx;
margin: 20rpx;
min-height: 400rpx;
.title {
margin-bottom: 15rpx;
font-weight: bold;
}
.content {
color: #666666;
font-size: 24rpx;
}
}
/* 底部操作栏 */
.footer-fixed {
position: fixed;
bottom: var(--window-bottom);
left: 0;
right: 0;
display: flex;
height: 180rpx;
z-index: 11;
box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
background: #fff;
}
.footer-container {
width: 100%;
display: flex;
margin-bottom: 40rpx;
}
// 操作按钮
.foo-item-btn {
flex: 1;
.btn-wrapper {
height: 100%;
display: flex;
align-items: center;
}
.btn-item {
flex: 1;
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
margin-right: 16rpx;
margin-left: 16rpx;
text-align: center;
color: #fff;
border-radius: 40rpx;
}
// 立即领取按钮
.btn-item-main {
background: linear-gradient(to right, #f9211c, #ff6335);
&.state {
border: none;
color: #cccccc;
background: #F5F5F5;
}
}
}
</style>

240
fuintUniapp/pages/book/detail.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<view class="content">
<view class="top-v" v-show="storeInfo"><text class="storeName">预约【{{ storeInfo.name }}】</text><text class="moreStore" @click="toMoreStore">切换门店</text></view>
<view class="info-v">
<view class="title">
｜请选择预约日期
</view>
<view v-if="dateArr && dateArr.length > 0" class="list-v">
<view @click="dateClick(index)" v-for="(item, index) in dateArr" :key="index" :class="[dateIndex==index?'activeItem':'item-v']">
<view>{{item.week}}</view>
<view>{{ item.date }}</view>
</view>
</view>
<none v-if="!dateArr.length" :isLoading="false" :custom-style="{ padding: '30px 10px' }" tips="暂无可预约日期"></none>
</view>
<view class="info-v">
<view class="title">
｜请选择预约时段
</view>
<view v-if="timeArr && timeArr.length > 0" class="list-v">
<view @click="timeClick(index)" v-for="(item, index) in timeArr" :key="index" :class="[timeIndex==index?'activeItem' : (bookable.indexOf(item.time) >= 0 ? 'item-v' : 'disable') ]">
<view>{{ item.time }}</view>
</view>
</view>
<none v-if="!timeArr.length" :isLoading="false" :custom-style="{ padding: '30rpx 10rpx' }" tips="暂无可预约时段"></none>
</view>
<view class="btn" @click="doSubmit">确定预约</view>
</view>
</template>
<script>
import * as BookApi from '@/api/book'
import * as SettingApi from '@/api/setting'
import None from '@/components/none'
export default {
components: {
None
},
data() {
return {
// 预约项目ID
bookId: null,
// 当前预约详情
bookInfo: null,
dateArr: [ { week: '星期六', date : '8月17号' }, { week: '星期日', date : '8月18号' }],
timeArr: [ '09:00-12:00', '14:00-15:00' ],
dateIndex: 0,
timeIndex: 100000,
storeInfo: null,
bookable: [],
isCheck: false
}
},
onLoad(options) {
// 记录预约ID
this.bookId = options.bookId;
// 获取预约详情
this.getBookDetail();
},
onShow() {
uni.removeStorageSync('bookData');
this.getStoreInfo();
this.dateIndex = 0;
this.timeIndex = 100000;
},
methods: {
// 获取预约项目详情
getBookDetail() {
const app = this;
app.isLoading = true;
BookApi.detail(app.bookId)
.then(result => {
app.bookInfo = result.data.bookInfo;
app.dateArr = app.bookInfo.dateList;
app.timeArr = app.bookInfo.timeList;
app.dateClick(app.dateIndex);
})
.finally(() => app.isLoading = false)
},
// 切换门店
toMoreStore() {
this.$navTo('pages/location/index');
},
// 获取店铺详情
getStoreInfo() {
const app = this;
SettingApi.storeDetail()
.then(result => {
app.storeInfo = result.data.storeInfo;
})
},
// 确定预约
doSubmit() {
let app = this;
if (!app.isCheck) {
app.$toast("请选择预约时间！");
return false;
}
uni.showModal({
title: '提示',
content: '确定预约【'+app.storeInfo.name+'】吗?',
success: function (res) {
if (res.confirm) {
let dates = app.bookInfo.serviceDates.split(",");
let week = app.dateArr[app.dateIndex].week;
let data = { bookId: app.bookId, week: week, date : dates[app.dateIndex], time: app.timeArr[app.timeIndex].time };
uni.setStorageSync('bookData', data);
app.$navTo('pages/book/submit');
}
}
});
},
// 选择时段
timeClick(index) {
const app = this;
if (app.bookable.indexOf(app.timeArr[index].time) < 0) {
return false;
}
app.timeIndex = index;
app.isCheck = true;
},
// 选择日期
dateClick(index) {
const app = this;
app.dateIndex = index;
app.timeIndex = 100000;
let dates = app.bookInfo.serviceDates.split(",");
let times = app.timeArr;
BookApi.bookable({ bookId: app.bookId, date: dates[app.dateIndex], time: '' })
.then(result => {
if (result.data) {
app.bookable = result.data;
} else {
app.bookable = [];
}
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
.top-v {
margin: 20rpx;
.storeName {
font-weight: bold;
font-size: 32rpx;
}
.moreStore {
float: right;
color: $fuint-theme;
border: 1rpx solid $fuint-theme;
padding: 6rpx;
border-radius: 20rpx;
font-size: 24rpx;
}
}
padding-bottom: 50rpx;
}
.getInfo-v {
background-color: #fff;
padding: 50rpx 30rpx;
border-radius: 20rpx;
width: 600rpx;
.getInfo-btn{
background-color: $fuint-theme;
color: #fff;
padding: 20rpx;
border-radius: 10rpx;
margin-top: 30rpx;
text-align: center;
}
}
.btn {
margin: 20rpx auto;
background-color: $fuint-theme;
padding: 20rpx;
border-radius: 40rpx;
text-align: center;
color: #fff;
width: 680rpx;
font-size: 30rpx;
margin-top: 50rpx;
}
.info-v {
padding: 20rpx;
background-color: #fff;
margin-bottom: 20rpx;
.title {
font-weight: bold;
color: $fuint-theme;
}
.list-v {
padding: 20rpx;
display: flex;
flex-wrap: wrap;
.item-v {
border-radius: 12rpx;
font-size: 30rpx;
margin-top: 10rpx;
margin-left: 10rpx;
font-weight: bold;
width: 30%;
border: 1rpx solid #ccc;
text-align: center;
padding: 20rpx;
}
.activeItem {
font-size: 30rpx;
border-radius: 12rpx;
margin-top: 10rpx;
margin-left: 10rpx;
width: 30%;
font-weight: bold;
background-color: $fuint-theme;
border: 1rpx solid #ccc;
color: #fff;
text-align: center;
padding: 20rpx;
}
.disable {
border-radius: 12rpx;
font-size: 30rpx;
margin-top: 10rpx;
margin-left: 10rpx;
font-weight: bold;
width: 30%;
border: 1rpx solid #ccc;
text-align: center;
color: white !important;
background-color: rgb(188, 188, 188) !important;
padding: 20rpx;
}
}
}
</style>

261
fuintUniapp/pages/book/index.vue Normal file
View File

@@ -0,0 +1,261 @@
<template>
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" @up="upCallback">
<!-- 分类列表tab -->
<view class="tabs-wrapper">
<scroll-view class="scroll-view" scroll-x>
<view class="tab-item" :class="{ active: curId == 0 }" @click="onSwitchTab(0)">
<view class="value"><text>全部</text></view>
</view>
<!-- 分类列表 -->
<view class="tab-item" :class="{ active: curId == item.id }" @click="onSwitchTab(item.id)"
v-for="(item, index) in categoryList" :key="index">
<view class="value"><text>{{ item.name }}</text></view>
</view>
</scroll-view>
</view>
<!-- 预约列表 -->
<view class="book-list">
<view class="book-item show-type" v-for="(item, index) in list.content" :key="index" @click="onTargetDetail(item.id)">
<block>
<view class="book-item-image">
<image class="image" :src="item.logo"></image>
</view>
<view class="book-item-left flex-box">
<view class="book-item-title twolist-hidden">
<text>{{ item.name }}</text>
</view>
<view class="book-item-footer m-top10">
<text class="book-views">{{ item.description }}</text>
</view>
</view>
</block>
</view>
</view>
</mescroll-body>
</template>
<script>
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import * as BookApi from '@/api/book'
import { getEmptyPaginateObj, getMoreListData } from '@/utils/app'
const pageSize = 15
export default {
components: {
MescrollBody
},
mixins: [MescrollMixin],
data() {
return {
// 分类列表
categoryList: [],
// 预约列表
list: getEmptyPaginateObj(),
// 当前选中的分类id (0则代表首页)
curId: 0,
// 上拉加载配置
upOption: {
// 首次自动执行
auto: true,
// 每页数据的数量; 默认10
page: { size: pageSize },
// 数量要大于3条才显示无更多数据
noMoreSize: 3,
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
const app = this;
if (options.categoryId) {
app.curId = options.categoryId;
}
// 获取分类数据
app.getCategoryList();
},
methods: {
/**
* 上拉加载的回调 (页面初始化时也会执行一次)
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
* @param {Object} page
*/
upCallback(page) {
const app = this;
// 设置列表数据
app.getBookList(page.num)
.then(list => {
const curPageLen = list.content.length;
const totalSize = list.content.totalElements;
app.mescroll.endBySize(curPageLen, totalSize);
})
.catch(() => app.mescroll.endErr());
},
// 获取预约分类数据
getCategoryList() {
const app = this;
BookApi.cateList()
.then(result => {
app.categoryList = result.data.cateList;
})
},
/**
* 获取预约项目列表
* @param {Number} pageNo 页码
*/
getBookList(pageNo = 1) {
const app = this
return new Promise((resolve, reject) => {
BookApi.list({ cateId: app.curId, page: pageNo }, { load: false })
.then(result => {
// 合并新数据
const newList = result.data;
app.list.content = getMoreListData(newList, app.list, pageNo);
resolve(newList);
})
.catch(result => reject());
})
},
// 切换选择的分类
onSwitchTab(categoryId = 0) {
const app = this;
// 切换当前的分类ID
app.curId = categoryId;
// 刷新列表数据
app.list = getEmptyPaginateObj();
app.mescroll.resetUpScroll();
},
// 跳转预约详情页
onTargetDetail(bookId) {
this.$navTo('pages/book/detail', { bookId });
}
},
/**
* 分享当前页面
*/
onShareAppMessage() {
return {
title: '预约项目',
path: "/pages/book/index?" + this.$getShareUrlParams()
}
},
/**
* 分享到朋友圈
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
*/
onShareTimeline() {
return {
title: '预约项目',
path: "/pages/book/index?" + this.$getShareUrlParams()
}
}
}
</script>
<style lang="scss" scoped>
/* 顶部选项卡 */
.container {
min-height: 100vh;
}
.tabs-wrapper {
position: sticky;
top: 1rpx;
display: flex;
width: 100%;
height: 88rpx;
color: #333;
font-size: 28rpx;
background: #fff;
border-bottom: 1rpx solid #e4e4e4;
z-index: 100;
overflow: hidden;
white-space: nowrap;
}
.tab-item {
display: inline-block;
padding: 0 10rpx;
text-align: center;
min-width: 10%;
height: 87rpx;
line-height: 88rpx;
box-sizing: border-box;
.value {
height: 100%;
}
&.active .value {
color: #000;
border-bottom: 4rpx solid #000;
font-weight: bold;
}
}
/* 预约列表 */
.book-list {
padding-top: 0rpx;
line-height: 1;
background: #f7f7f7;
}
.book-item {
padding: 40rpx;
background: #fff;
margin: 20rpx;
border-radius: 15rpx;
&:last-child {
margin-bottom: 0;
}
.book-item-title {
max-height: 80rpx;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.book-item-image .image {
display: block;
border-radius: 16rpx;
height: 160rpx;
width: 200rpx;
border: 2rpx solid #cccccc;
}
}
.show-type {
display: flex;
.book-item-left {
padding-left: 20rpx;
}
.book-item-title {
font-size: 32rpx;
}
.book-item-footer {
line-height: 40rpx;
max-height: 120rpx;
text-overflow: ellipsis;
overflow: hidden;
}
}
</style>

258
fuintUniapp/pages/book/my.vue Normal file
View File

@@ -0,0 +1,258 @@
<template>
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" @up="upCallback">
<!-- 分类列表tab -->
<view class="tabs-wrapper">
<scroll-view class="scroll-view" scroll-x>
<view class="tab-item" :class="{ active: curId == '' }" @click="onSwitchTab('')">
<view class="value"><text>全部</text></view>
</view>
<!-- tab列表 -->
<view class="tab-item" :class="{ active: curId == item.key }" @click="onSwitchTab(item.key)"
v-for="(item, index) in statusList" :key="index">
<view class="value"><text>{{ item.name }}</text></view>
</view>
</scroll-view>
</view>
<!-- 预约列表 -->
<view class="book-list">
<view class="book-item" v-for="(item, index) in list.content" :key="index" @click="onView(item.id)">
<block>
<view class="flex-box">
<view class="book-item-title">
<text>{{ item.bookName }}</text>
</view>
<view class="book-content">
<view class="contacts">姓名：{{ item.contact }}</view>
<view class="time">时间：{{ item.serviceDate }} {{ item.serviceTime }}</view>
</view>
<view class="book-item-footer m-top10">
<text class="book-views f-24 col-8">{{ item.createTime | timeFormat('yyyy-mm-dd hh:MM') }}</text>
<view class="btn-cancel" v-if="item.status == 'A'" @click="onView(item.id)">取消</view>
<view class="btn-view" @click="onView(item.id)">详情</view>
</view>
</view>
</block>
</view>
</view>
</mescroll-body>
</template>
<script>
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import * as BookApi from '@/api/book'
import { getEmptyPaginateObj, getMoreListData } from '@/utils/app'
const pageSize = 15
export default {
components: {
MescrollBody
},
mixins: [MescrollMixin],
data() {
return {
// 状态列表
statusList: [],
// 预约列表
list: getEmptyPaginateObj(),
// 当前选中的分类id (0则代表首页)
curId: '',
// 上拉加载配置
upOption: {
// 首次自动执行
auto: true,
// 每页数据的数量; 默认10
page: { size: pageSize },
// 数量要大于3条才显示无更多数据
noMoreSize: 3,
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
const app = this;
if (options.status) {
app.curId = options.status;
}
},
methods: {
/**
* 上拉加载的回调 (页面初始化时也会执行一次)
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
* @param {Object} page
*/
upCallback(page) {
const app = this;
// 设置列表数据
app.getMyBookList(page.num)
.then(list => {
const curPageLen = list.content.length;
const totalSize = list.content.totalElements;
app.mescroll.endBySize(curPageLen, totalSize);
})
.catch(() => app.mescroll.endErr());
},
/**
* 获取预约列表
* @param {Number} pageNo 页码
*/
getMyBookList(pageNo = 1) {
const app = this;
return new Promise((resolve, reject) => {
BookApi.myBookList({ status: app.curId, page: pageNo }, { load: false })
.then(result => {
// 合并新数据
const newList = result.data;
app.list.content = getMoreListData(newList, app.list, pageNo);
app.statusList = result.data.statusList;
resolve(newList);
})
.catch(result => reject());
})
},
// 切换选择的分类
onSwitchTab(status) {
const app = this;
// 切换当前的状态
app.curId = status;
// 刷新列表数据
app.list = getEmptyPaginateObj();
app.mescroll.resetUpScroll();
},
// 取消预约
onCancel(myBookId) {
const app = this;
uni.showModal({
title: "提示",
content: "您确定要取消该预约吗?",
success({ confirm }) {
confirm && app.doCancel(myBookId)
}
});
},
// 确认取消预约
doCancel(myBookId) {
const app = this;
BookApi.cancel(myBookId)
.then(result => {
app.getPageData()
})
},
// 跳转详情页
onView(myBookId) {
this.$navTo('pages/book/bookDetail', { myBookId });
}
}
}
</script>
<style lang="scss" scoped>
/* 顶部选项卡 */
.container {
min-height: 100vh;
}
.tabs-wrapper {
position: sticky;
display: flex;
width: 100%;
height: 88rpx;
color: #333;
font-size: 28rpx;
background: #fff;
border-bottom: 1rpx solid #e4e4e4;
z-index: 100;
overflow: hidden;
white-space: nowrap;
}
.tab-item {
display: inline-block;
padding: 0 15rpx;
text-align: center;
height: 87rpx;
line-height: 88rpx;
box-sizing: border-box;
.value {
height: 100%;
}
&.active .value {
color: #fd4a5f;
border-bottom: 4rpx solid #fd4a5f;
font-weight: bold;
}
}
/* 预约列表 */
.book-list {
padding-top: 20rpx;
line-height: 1;
background: #f7f7f7;
}
.book-item {
margin: 0rpx 10rpx 20rpx 10rpx;
padding: 30rpx;
background: #fff;
border-radius: 20rpx;
min-height: 280rpx;
&:last-child {
margin-bottom: 0;
}
.book-item-title {
font-size: 32rpx;
color: #333;
font-weight: bold;
line-height: 40rpx;
}
.book-content {
margin: 30rpx 0rpx 30rpx 0rpx;
.contacts {
margin-bottom: 20rpx;
}
}
.book-item-footer {
.btn-cancel {
width: 100rpx;
border-radius: 8rpx;
padding: 10rpx 14rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
border: 1rpx solid #fff;
float: right;
background: #f9211c;
}
.btn-view {
width: 100rpx;
border-radius: 8rpx;
padding: 10rpx 14rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
border: 1rpx solid #fff;
float: right;
background: $fuint-theme;
}
}
}
</style>

229
fuintUniapp/pages/book/submit.vue Normal file
View File

@@ -0,0 +1,229 @@
<template>
<view v-if="!isLoading" class="container">
<!-- 预约时间 -->
<view class="row-service b-f m-top20">
<view class="row-title">预约时间</view>
<view class="service-switch dis-flex">
<view class="switch-item active">{{ bookData.date }} {{ bookData.week }} {{ bookData.time }}
</view>
</view>
</view>
<!-- 称呼 -->
<view class="row-input b-f m-top20 dis-flex">
<view class="row-title">联系人名：</view>
<view class="mo ney col-m">
<input class="weui-input value" type="text" v-model="form.contact" placeholder="请输入联系人姓名"/>
</view>
</view>
<!-- 电话 -->
<view class="row-input b-f m-top20 dis-flex">
<view class="row-title">联系电话：</view>
<view class="money col-m">
<input class="weui-input value" type="text" v-model="form.mobile" placeholder="请输入联系人电话"/>
</view>
</view>
<!-- 备注信息 -->
<view class="row-textarea b-f m-top20">
<view class="row-title">备注信息：</view>
<view class="content">
<textarea class="textarea" v-model="form.remark" maxlength="2000" placeholder="请填写备注信息"
placeholderStyle="color:#ccc"></textarea>
</view>
</view>
<!-- 底部操作按钮 -->
<view class="footer-fixed">
<view class="btn-wrapper">
<view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">确认提交</view>
</view>
</view>
</view>
</template>
<script>
import * as BookApi from '@/api/book'
export default {
data() {
return {
// 正在加载
isLoading: true,
// 预约项目id
bookId: null,
// 预约详情
bookInfo: {},
// 按钮禁用
disabled: false,
// 表单数据
form: { contact: '', mobile: '', remark: '' },
bookData: null
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad({ bookId }) {
this.bookId = bookId
// 获取预约项目详情
this.getBookDetail()
},
onShow() {
this.bookData = uni.getStorageSync('bookData');
},
methods: {
// 获取预约详情
getBookDetail() {
const app = this
app.isLoading = true
BookApi.detail(app.bookId)
.then(result => {
app.bookInfo = result.bookInfo;
app.isLoading = false;
})
},
// 提交预约信息
handleSubmit() {
const app = this;
if (app.form.mobile.length < 6 || app.form.contact.length < 1) {
app.$toast("请先提交联系人和联系电话！");
return false;
}
if (app.disabled === true) return false;
const param = { bookId: app.bookData.bookId,
remark: app.form.remark,
mobile: app.form.mobile,
contact: app.form.contact,
date: app.bookData.date,
time: app.bookData.time };
BookApi.submit(param)
.then(result => {
if (result.code == '200') {
app.$toast('提交预约成功，请等待确认！')
setTimeout(() => {
app.disabled = false;
uni.navigateBack();
}, 3000)
} else {
if (result.message) {
app.$error(result.message);
} else {
app.$error('预约提交失败');
}
app.disabled = false;
return false;
}
}).catch(err => app.disabled = false)
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 20rpx 20rpx 100rpx 20rpx;
}
.row-title {
color: #333;
font-weight: bold;
line-height: 60rpx;
}
/* 服务类型 */
.row-service {
padding: 24rpx 20rpx;
border-radius: 20rpx;
}
.service-switch {
.switch-item {
padding: 6rpx 30rpx;
margin-right: 25rpx;
border-radius: 10rpx;
color: #f9211c;
border: 1px solid #f9211c;
}
}
/* 备注信息 */
.row-textarea {
margin: 20rpx auto;
border-radius: 20rpx;
border: solid 1rpx #f5f5f5;
height: 100%;
display: block;
padding: 10rpx 10rpx 80rpx 10rpx;
.textarea {
min-height: 260rpx;
width: 100%;
padding: 12rpx;
border: 1rpx solid #ccc;
border-radius: 12rpx;
box-sizing: border-box;
font-size: 26rpx;
margin: 0 auto;
}
}
/* 表单项 */
.row-input {
padding: 24rpx 20rpx;
border-radius: 20rpx;
border: solid 1rpx #f5f5f5;
.row-title {
margin-bottom: 0;
margin-right: 20rpx;
}
.value {
color: #333;
padding-top: 10rpx;
}
}
// 底部操作栏
.footer-fixed {
position: fixed;
bottom: var(--window-bottom);
left: 0;
right: 0;
height: 180rpx;
padding-bottom: 30rpx;
z-index: 11;
box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
background: #fff;
.btn-wrapper {
height: 100%;
display: flex;
align-items: center;
padding: 0 20rpx;
}
.btn-item {
flex: 1;
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
border-radius: 40rpx;
}
.btn-item-main {
background: linear-gradient(to right, #f9211c, #ff6335);
// 禁用按钮
&.disabled {
background: #ff9779;
}
}
}
</style>