forked from zhongyuanhaiju/uniapp
702 lines
17 KiB
Vue
702 lines
17 KiB
Vue
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view class="reserve-wrap">
|
|
<view class="reserve-item">
|
|
<image :src="$util.img(serviceDetail.goods_image)" mode="aspectFill"></image>
|
|
<view class="conten">
|
|
<view class="name multi-hidden">{{ serviceDetail.goods_name }}</view>
|
|
<view class="price-wrap">
|
|
<view class="price">
|
|
<text>￥</text>
|
|
<text v-if="serviceDetail.discount_price > 0 && serviceDetail.discount_price < serviceDetail.price">{{ serviceDetail.discount_price }}</text>
|
|
<text v-else>{{ serviceDetail.price }}</text>
|
|
</view>
|
|
<view class="line-price">￥{{ serviceDetail.price }}</view>
|
|
</view>
|
|
<view class="btn-wrap">
|
|
<text class="num">已预约{{ serviceDetail.sale_num }}人次</text>
|
|
<view class="server-detail">
|
|
<text>服务详情</text>
|
|
<text class="icondiy icon-system-jiantouyou" @click="toDetail(goodsId)"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="store-select">
|
|
<view class="select-server" @click="openStorePopup()">
|
|
<text class="iconfont icon-mendian"></text>
|
|
<text class="txt">选择门店</text>
|
|
<text class="icondiy icon-system-jiantouyou arrows"></text>
|
|
</view>
|
|
<view class="store-info" v-if="storeInfo">
|
|
<view class="store-name">{{ storeInfo.store_name }}</view>
|
|
<view class="store-time">营业时间：{{ storeInfo.open_date }}</view>
|
|
<view class="store-addres">地址：{{ storeInfo.full_address }} {{ storeInfo.address }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="select-server" @click="openServicePopup()">
|
|
<text class="icondiy icon-xuanzhaijishi"></text>
|
|
<text class="txt">选择服务人员</text>
|
|
<view class="service-user">
|
|
<text class="txt" v-if="user">{{ user.username }}</text>
|
|
<text class="icondiy icon-system-jiantouyou arrows"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="reserve-panel">
|
|
<view class="panel-title">
|
|
<text class="icondiy icon-shijian"></text>
|
|
<text>预约时间</text>
|
|
</view>
|
|
<yuyue-date
|
|
ref="timePopup"
|
|
:disableWeek="disableWeek"
|
|
:beginTime= "timeInfo.start_time"
|
|
:endTime="timeInfo.end_time"
|
|
:timeInterval= "timeInterval"
|
|
@change = "getTime"
|
|
></yuyue-date>
|
|
</view>
|
|
<view class="tab-bar-fill"></view>
|
|
<view class="tab-bar">
|
|
<ns-goods-action-icon text="首页" icon="icondiy icon-shouye" @click="goHome" />
|
|
<ns-goods-action-icon text="客服" icon="icondiy icon-qiafu" :send-data="contactData" :chatParam="chatRoomParams"/>
|
|
<view class="tab-bar-item" @click="editCollection()">
|
|
<view class="action-icon-wrap">
|
|
<view v-if="whetherCollection == 0" class="icondiy icon-shouzang"></view>
|
|
<view v-else class="icondiy icon-shouzang selected-collection"></view>
|
|
<text>收藏</text>
|
|
</view>
|
|
</view>
|
|
<view class="bnutton-body"><button class="reserve-btn" type="default" @click="setAdd()">确认预约</button></view>
|
|
|
|
</view>
|
|
<ns-login ref="login"></ns-login>
|
|
|
|
<view @touchmove.prevent.stop>
|
|
<uni-popup ref="servicePopup" type="bottom">
|
|
<view class="goods-coupon-popup-layer popup-layer">
|
|
<view class="head-wrap" @click="closeServicePopup()">
|
|
<text>选择服务人员</text>
|
|
<text class="iconfont icon-close"></text>
|
|
</view>
|
|
<scroll-view class="service-body scroll" scroll-y>
|
|
<view v-for="(item, index) in serviceList" :key="index" @click="setUser(item)">
|
|
<text class="user-name">{{ item.username }}</text>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="button-box"><button type="primary" @click="closeServicePopup()">确定</button></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<view @touchmove.prevent.stop>
|
|
<uni-popup ref="storePopup" type="bottom">
|
|
<view class="goods-coupon-popup-layer popup-layer">
|
|
<view class="head-wrap" @click="closeStorePopup()">
|
|
<text>选择门店列表</text>
|
|
<text class="iconfont icon-close"></text>
|
|
</view>
|
|
<scroll-view class="store-body scroll" scroll-y>
|
|
<view class="store-select" v-for="(item, index) in storeList" :key="index" @click="setStore(item)">
|
|
<view class="store-info">
|
|
<view class="store-name">{{ item.store_name }}</view>
|
|
<view class="store-time">营业时间：{{ item.open_date }}</view>
|
|
<view class="store-addres">地址：{{ item.full_address }} {{ item.address }}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="button-box"><button type="primary" @click="closeStorePopup()">确定</button></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<loading-cover ref="loadingCover"></loading-cover>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import yuyueDate from '@/pages_promotion/components/yuyue-date/yuyue-date.vue';
|
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
export default {
|
|
components: {
|
|
yuyueDate,
|
|
uniPopup
|
|
},
|
|
data() {
|
|
return {
|
|
disableWeek: [], // 限制周几不可以预约
|
|
disableWeekTo : [],
|
|
goodsId: 0,
|
|
date : "",
|
|
time : "",
|
|
remark : "",
|
|
serviceList : [],
|
|
serviceDetail: "",
|
|
member_id : 0,
|
|
storeList : [],
|
|
storeInfo : "",
|
|
user: "",
|
|
timeInfo : {},
|
|
timeInterval : "1",
|
|
contactData : {},
|
|
chatRoomParams : {},
|
|
token : null,
|
|
whetherCollection : 0
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
if(option.goods_id){
|
|
this.goodsId = option.goods_id;
|
|
}else{
|
|
this.$util.showToast({
|
|
title: '未找到服务信息',
|
|
mask: true,
|
|
duration: 2000
|
|
});
|
|
setTimeout(() => {
|
|
this.$util.redirectTo('/pages/index/index');
|
|
}, 2000);
|
|
return;
|
|
}
|
|
this.$util.getMemberId().then(resolve => {
|
|
this.memberId = resolve;
|
|
});
|
|
},
|
|
onShow() {
|
|
if (uni.getStorageSync('token')) {
|
|
this.token = uni.getStorageSync('token');
|
|
} else {
|
|
setTimeout(() => {
|
|
this.$refs.login.open('/pages_promotion/cardservice/service_goods/reserve_apply?goods_id=' + this.goodsId);
|
|
});
|
|
}
|
|
|
|
this.getDetail();
|
|
this.getStoreList();
|
|
this.getWhetherCollection();
|
|
},
|
|
methods: {
|
|
getDetail(){
|
|
this.$api.sendRequest({
|
|
url: '/cardservice/api/service/detail',
|
|
data: {
|
|
goods_id: this.goodsId
|
|
},
|
|
success: res => {
|
|
if(res.code >= 0){
|
|
this.serviceDetail = res.data.goods_sku_detail;
|
|
console.log(this.serviceDetail)
|
|
this.contactData = {
|
|
title: this.serviceDetail.goods_name,
|
|
path: "",
|
|
img: this.$util.img(this.serviceDetail.goods_image, {
|
|
size: 'big'
|
|
})
|
|
}
|
|
|
|
this.chatRoomParams = {
|
|
sku_id: this.serviceDetail.sku_id,
|
|
type: 'cardservice',
|
|
type_id: ""
|
|
};
|
|
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
}else{
|
|
this.$util.showToast({
|
|
title: '未找到服务信息',
|
|
mask: true,
|
|
duration: 2000
|
|
});
|
|
setTimeout(() => {
|
|
this.$util.redirectTo('/pages/index/index');
|
|
}, 2000);
|
|
}
|
|
},
|
|
fail: res => {
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
}
|
|
});
|
|
},
|
|
getTime(data){
|
|
this.date = data.date;
|
|
this.time = data.time;
|
|
},
|
|
toDetail(id){
|
|
this.$util.redirectTo('/pages/goods/detail',{"goods_id":this.goodsId});
|
|
},
|
|
// 打开员工弹出层
|
|
openServicePopup() {
|
|
if(this.storeInfo == ""){
|
|
this.$util.showToast({
|
|
title: '请先选择门店',
|
|
mask: true,
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
this.getServiceList();
|
|
},
|
|
// 关闭员工弹出层
|
|
closeServicePopup() {
|
|
this.$refs.servicePopup.close();
|
|
},
|
|
// 打开门店弹出层
|
|
openStorePopup() {
|
|
this.$refs.storePopup.open();
|
|
},
|
|
// 关闭门店弹出层
|
|
closeStorePopup() {
|
|
this.$refs.storePopup.close();
|
|
},
|
|
getServiceList(){
|
|
this.$api.sendRequest({
|
|
url: '/store/api/reserve/servicerList',
|
|
data: {
|
|
'store_id' : this.storeInfo.store_id
|
|
},
|
|
success: res => {
|
|
if(res.code >= 0){
|
|
this.serviceList = res.data;
|
|
|
|
if(this.serviceList.length > 0){
|
|
this.$refs.servicePopup.open();
|
|
}else{
|
|
this.$util.showToast({
|
|
title: '该门店暂无服务人员',
|
|
mask: true,
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
setAdd(){
|
|
let goods = [];
|
|
goods.push({sku_id:this.serviceDetail.sku_id,uid : this.user.uid});
|
|
if(!this.verify()) return;
|
|
let params = {
|
|
goods : JSON.stringify(goods),
|
|
date : this.date,
|
|
time : this.time,
|
|
store_id: this.storeInfo.store_id,
|
|
username : this.user.username
|
|
};
|
|
uni.setStorageSync('reserveParams', params);
|
|
this.$util.redirectTo('/pages_promotion/cardservice/service_goods/reserve_detail',{"goods_id":this.goodsId});
|
|
},
|
|
getStoreList(){
|
|
this.$api.sendRequest({
|
|
url: '/api/store/page',
|
|
success: res => {
|
|
if(res.code >= 0 && res.data.list.length > 0){
|
|
this.storeList = res.data.list;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
setStore(item){
|
|
this.storeInfo = item;
|
|
this.getStoreTime();
|
|
this.closeStorePopup();
|
|
},
|
|
setUser(item){
|
|
this.user = item;
|
|
this.closeServicePopup();
|
|
},
|
|
getStoreTime(){
|
|
this.$api.sendRequest({
|
|
url: '/store/api/reserve/getTimeConfig',
|
|
data:{
|
|
store_id : this.storeInfo.store_id
|
|
},
|
|
success: res => {
|
|
if(res.code ==0){
|
|
this.timeInfo = res.data.value;
|
|
var timeArr = [1, 2, 3, 4, 5, 6, 7];
|
|
for (var k = 0; k < this.timeInfo.week.length; k++) {
|
|
this.timeInfo.week[k] = parseInt(this.timeInfo.week[k]);
|
|
}
|
|
this.disableWeek = this.getArrDifference(this.timeInfo.week, timeArr);
|
|
this.timeInterval = this.timeInfo.interval;
|
|
this.disableWeekTo = this.disableWeek;
|
|
for (var i = 0; i < this.disableWeek.length; i++) {
|
|
if(this.disableWeek[i] == 1){
|
|
this.disableWeek[i] = "周一";
|
|
}
|
|
if(this.disableWeek[i] == 2){
|
|
this.disableWeek[i] = "周二";
|
|
}
|
|
if(this.disableWeek[i] == 3){
|
|
this.disableWeek[i] = "周三";
|
|
}
|
|
if(this.disableWeek[i] == 4){
|
|
this.disableWeek[i] = "周四";
|
|
}
|
|
if(this.disableWeek[i] == 5){
|
|
this.disableWeek[i] = "周五";
|
|
}
|
|
if(this.disableWeek[i] == 6){
|
|
this.disableWeek[i] = "周六";
|
|
}
|
|
if(this.disableWeek[i] == 0){
|
|
this.disableWeek[i] = "周日";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getArrDifference(arr1, arr2) {
|
|
return arr1.concat(arr2).filter(function(v, i, arr) {
|
|
return arr.indexOf(parseInt(v)) === arr.lastIndexOf(v);
|
|
});
|
|
},
|
|
goHome() {
|
|
this.$util.redirectTo('/pages/index/index');
|
|
},
|
|
verify(){
|
|
if(this.storeInfo == ""){
|
|
this.$util.showToast({
|
|
title: '请选择门店',
|
|
});
|
|
return false;
|
|
}
|
|
|
|
if(this.user == ""){
|
|
this.$util.showToast({
|
|
title: '请选择服务人员',
|
|
});
|
|
return false;
|
|
}
|
|
|
|
let week = new Date().getDay()
|
|
if(this.disableWeekTo.indexOf(week) != -1){
|
|
this.$util.showToast({
|
|
title: '该天不支持预约',
|
|
});
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
//获取用户是否关注
|
|
getWhetherCollection() {
|
|
this.$api.sendRequest({
|
|
url: "/api/goodscollect/iscollect",
|
|
data: {
|
|
goods_id: this.goodsId
|
|
},
|
|
success: res => {
|
|
this.whetherCollection = res.data;
|
|
}
|
|
});
|
|
},
|
|
editCollection() {
|
|
if (this.token) {
|
|
//未关注添加关注
|
|
if (this.whetherCollection == 0) {
|
|
this.$api.sendRequest({
|
|
url: "/api/goodscollect/add",
|
|
data: {
|
|
sku_id: this.serviceDetail.sku_id,
|
|
goods_id: this.serviceDetail.goods_id,
|
|
sku_name: this.serviceDetail.sku_name,
|
|
sku_price: this.serviceDetail.price,
|
|
sku_image: this.serviceDetail.sku_image
|
|
},
|
|
success: res => {
|
|
var data = res.data;
|
|
if (data > 0) {
|
|
this.whetherCollection = 1;
|
|
this.$util.showToast({
|
|
title: '关注成功',
|
|
});
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
//已关注取消关注
|
|
this.$api.sendRequest({
|
|
url: "/api/goodscollect/delete",
|
|
data: {
|
|
goods_id: this.serviceDetail.goods_id
|
|
},
|
|
success: res => {
|
|
var data = res.data;
|
|
if (data > 0) {
|
|
this.whetherCollection = 0;
|
|
this.$util.showToast({
|
|
title: '取消关注',
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.reserve-wrap{
|
|
padding: 24rpx;
|
|
.reserve-item{
|
|
position: relative;
|
|
margin-bottom: 20rpx;
|
|
padding: 28rpx 24rpx;
|
|
display: flex;
|
|
border-radius: 18rpx;
|
|
background-color: #fff;
|
|
image{
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 10rpx;
|
|
background-color: pink;
|
|
margin-right: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
.conten{
|
|
overflow: hidden;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 420rpx;
|
|
.name{
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
line-height: 1.5;
|
|
}
|
|
.price-wrap{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
.price{
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: $font-size-tag;
|
|
color: $base-color;
|
|
margin-right: 20rpx;
|
|
text:last-child{
|
|
font-size: $font-size-toolbar;
|
|
}
|
|
}
|
|
.line-price{
|
|
color: #999;
|
|
text-decoration: line-through;
|
|
}
|
|
.btn-wrap{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: auto;
|
|
.num{
|
|
font-size: $font-size-tag;
|
|
color: $color-tip;
|
|
}
|
|
.server-detail{
|
|
position: absolute;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 158rpx;
|
|
height: 44rpx;
|
|
border-top-left-radius: 30rpx;
|
|
border-bottom-left-radius: 30rpx;
|
|
background-color: #F2F2F2;
|
|
font-size: $font-size-tag;
|
|
text:first-of-type{
|
|
margin-left: 10rpx;
|
|
}
|
|
text:last-of-type{
|
|
margin-left: 6rpx;
|
|
font-size: $font-size-tag;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.select-server{
|
|
margin-bottom: 20rpx;
|
|
padding: 0 20rpx;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 18rpx;
|
|
text:first-child{
|
|
margin-right: 12rpx;
|
|
}
|
|
.txt{
|
|
font-weight: bold;
|
|
}
|
|
.arrows{
|
|
margin-left: auto;
|
|
font-size: $font-size-tag;
|
|
}
|
|
.service-user{
|
|
margin-left: auto;
|
|
.txt{
|
|
color: #5A5A5A;
|
|
font-size: 24rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.icondiy{
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
}
|
|
.reserve-panel{
|
|
padding: 20rpx 24rpx;
|
|
background-color: #fff;
|
|
border-radius: 18rpx;
|
|
.panel-title{
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1;
|
|
margin-top: 10rpx;
|
|
text:last-of-type{
|
|
margin-left: 12rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.tab-bar-fill{
|
|
height: 98rpx;
|
|
}
|
|
.tab-bar{
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 98rpx;
|
|
line-height: 98rpx;
|
|
background-color: #fff;
|
|
.bnutton-body{
|
|
margin: 0 20rpx;
|
|
}
|
|
.tab-bar-item{
|
|
.action-icon-wrap{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: 100rpx;
|
|
min-width: 90rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
margin-right: 6rpx;
|
|
font-size: $font-size-tag;
|
|
.icondiy{
|
|
margin: 0 auto 10rpx;
|
|
line-height: 1;
|
|
font-size: 40rpx;
|
|
}
|
|
text{
|
|
font-size: 24rpx;
|
|
line-height: 1;
|
|
}
|
|
.selected-collection{
|
|
color: #FF0000;
|
|
}
|
|
}
|
|
}
|
|
.reserve-btn{
|
|
margin: 0;
|
|
width: 426rpx;
|
|
background-color: $base-color;
|
|
border-radius: 50rpx;
|
|
flex: 1;
|
|
height: 72rpx;
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
line-height: 72rpx;
|
|
border: none;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.store-select{
|
|
margin: 30rpx 0;
|
|
.select-server{
|
|
margin-bottom: 0rpx;
|
|
}
|
|
.store-info{
|
|
padding: 0 20rpx;
|
|
flex-wrap: wrap;
|
|
overflow: scroll;
|
|
background-color: #fff;
|
|
height: auto;
|
|
.store-name{
|
|
color: #333333;
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
}
|
|
.store-time{
|
|
color: #666;
|
|
font-size: 26rpx;
|
|
}
|
|
.store-addres{
|
|
color: #666;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.head-wrap {
|
|
font-size: $font-size-toolbar;
|
|
line-height: 100rpx;
|
|
height: 100rpx;
|
|
display: block;
|
|
text-align: center;
|
|
.iconfont {
|
|
position: absolute;
|
|
float: right;
|
|
right: 44rpx;
|
|
font-size: $font-size-toolbar;
|
|
}
|
|
}
|
|
.scroll{
|
|
min-height: 600rpx;
|
|
max-height: 800rpx;
|
|
}
|
|
.store-body{
|
|
padding: 0 20rpx;
|
|
-webkit-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
overflow: scroll;
|
|
background-color: #fff;
|
|
height: auto;
|
|
}
|
|
.service-body{
|
|
.user-name{
|
|
text-align: center;
|
|
padding: 10rpx;
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
.tab-bar{
|
|
.action-icon-wrap{
|
|
min-width: auto;
|
|
}
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
/deep/ .uni-page {
|
|
overflow: hidden;
|
|
}
|
|
/deep/ .mescroll-upwarp {
|
|
padding-bottom: 100rpx;
|
|
}
|
|
</style>
|