Skip to content

M
mallapp
Commit b2887f7f authored by Mac's avatar Mac
Browse files
Options

1

parent 75cb9772
Show whitespace changes
Inline Side-by-side
Showing with 611 additions and 11 deletions
pages.json
View file @ b2887f7f
......@@ -422,6 +422,8 @@
}
},{
"path":"personalList"
},{
"path":"subscribe"
}
]
},
......
pages/reserve/storeDetails.vue
View file @ b2887f7f
......@@ -130,7 +130,7 @@
.storeDetails .setmeal-item{
width: 200px;
/* height: 98px; */
margin-left: 15px;
background: #FFF;
border-radius: 6px;
box-shadow:0 6px 10px 1px #F2F2F2;
......@@ -142,8 +142,20 @@
background: #221818;
padding: 8px 15px;
color: #EFDCCB;
background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cpoun.png');
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.storeDetails .setmeal-pl{
position: absolute;
top:28.5px;
width: 18px;
height: 18px;
border-radius: 9px;
background: #FFF;
}
.storeDetails .setmeal-item-bottom{
display: flex;
align-items: center;
......@@ -278,6 +290,11 @@
<view class="right u-skeleton-rect" @click="openShare">
<image src="@/static/images/icon/icon-share.png" class="share-icon" />
<text>分享</text>
<button
v-if="u"
style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;"
open-type="share"
></button>
</view>
</view>
<!-- location-o -->
......@@ -310,7 +327,7 @@
</view>
<view class="setmeal-box">
<view v-for="(cl, ci) in list" :key="ci">
<view class="setmeal-item u-skeleton-rect" >
<view class="setmeal-item u-skeleton-rect" :style="{'margin-left':ci==0?'15px':'0','margin-right': ci+1==list.length?'15px':'5px'}">
<view class="setmeal-item-top">
<view style="font-size: 14px;margin-bottom: 3px;" class="setmeal-name">剪发卡</view>
<view style="font-size: 11px;color: rgba(239, 220, 203, 0.6);" class="setmeal-name">总监精剪+造型+洗吹</view>
......@@ -319,6 +336,8 @@
<text style="font-size: 20px;font-weight: bold;">78.4</text>
<text style="font-size: 13px;">/次 3次¥235.2</text>
</view>
<view class="setmeal-pl" style="left: -9px;"></view>
<view class="setmeal-pl" style="right: -9px;"> </view>
</view>
<view class="setmeal-item-bottom">
有效期：2020.10.05 18:00
......@@ -355,7 +374,7 @@
</view>
</view>
</view>
<view class="designer-btn" :style="{'background':mc}" >
<view class="designer-btn" :style="{'background':mc}" @click.stop="gosubscribe">
预约
</view>
</view>
......@@ -391,6 +410,7 @@
@goLook="goLook"
@closeBtn="closeBtn"
></coupon>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</scroll-view>
</template>
......@@ -404,6 +424,7 @@
},
data(){
return{
showAuth:false,
pageTitle: "门店详情",
scrollTop:0,
headStyle:{},
......@@ -476,6 +497,7 @@
this.u = uni.getStorageSync("mall_UserInfo");
this.init();
this.getSPList()//获取服务人员列表
this.getAllCPList()//获取门店套餐卡
wx.showShareMenu({
withShareTicket: true,
menus: ["shareAppMessage", "shareTimeline"],
......@@ -496,10 +518,8 @@
if(SmallShopId == 0){//如果微店id为0 去找所属微店id
SmallShopId = mall_UserInfo ? mall_UserInfo.UserSmallShopId : 0;
}
let title =
this.g.app_share_title != null && this.g.app_share_title != "" ? this.g.app_share_title : this.g.name;
let imageUrl =
this.g.app_share_pic != null && this.g.app_share_pic != "" ? this.g.app_share_pic : this.g.cover_pic;
let title =this.g.storeName;
let imageUrl =this.g.storeCoverImg;
let id = this.id;
return {
title: title,
......@@ -522,9 +542,9 @@
SmallShopId = u.UserSmallShopId? u.UserSmallShopId:0
}
return {
title: this.g.app_share_title != null && this.g.app_share_title != "" ? this.g.app_share_title : this.g.name,
title: this.g.storeName,
path: "/pages/index/index?id=" + this.id + "&user_id=" + uid+ "&SmallShopId=" + SmallShopId+ "&Up=" + this.Up+'&JumpType=5',
imageUrl:this.g.app_share_pic != null && this.g.app_share_pic != "" ? this.g.app_share_pic : this.g.cover_pic,
imageUrl:this.g.storeCoverImg,
};
},
created() {
......@@ -553,7 +573,7 @@
this.designerH = data.top
}
}).exec();
uni.createSelectorQuery().select(".richtext").boundingClientRect(data=>{
uni.createSelectorQuery().select(".wxParse").boundingClientRect(data=>{
if(data && data.top){
this.richtextH = data.top
}
......@@ -608,6 +628,19 @@
}
);
},
getAllCPList(){
this.request2({
url: '/api/AppletStores/GetAllCouponPageList',
data: {pageIndex:1,pageSize:999,StoreId:this.id}
},
res => {
if (res.resultCode == 1) {
this.allCoupon = res.data.pageData
}
}
);
},
scrollHandler(e) {
console.log(e.detail.scrollTop)
this.scrollTop = e.detail.scrollTop;
......@@ -617,6 +650,15 @@
if(this.stickyH-this.headH>this.scrollTop){
this.showSticky=false
}
// if(this.scrollTop >this.setmealH+40 &&this.scrollTop<this.designerH){
// this.current= 0;
// }else if(this.scrollTop >this.designerH+40 && this.scrollTop<this.richtextH){
// this.current= 1;
// }else if(this.scrollTop >this.richtextH+40 && this.scrollTop<this.commentH){
// this.current= 2;
// }else if(this.scrollTop >this.commentH+40 ){
// this.current= 3;
// }
//this.$forceUpdate();
},
scrollTopHandler() {
......@@ -683,7 +725,30 @@
uni.navigateTo({
url: "/pages/reserve/personalList?id="+this.id,
})
},
gosubscribe(){
if (this.u) {
uni.navigateTo({
url: "/pages/reserve/subscribe?id="+this.id,
})
} else {
this.showAuth = true;
}
},
openShare(){
if (!this.u) {
this.showAuth = true;
}
},
reloadUserinfo() {
this.u = uni.getStorageSync("mall_UserInfo");
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
},
}
}
</script>
......
pages/reserve/subscribe.vue 0 → 100644
View file @ b2887f7f
<style scoped>
.subscribe {
height: 100vh;
background: #FAF8F9;
position: relative;
padding-top:15px ;
}
.subscribe .subscribe-box{
width: 100%;
background: #FFF;
padding: 15px 0 80px;
}
.subscribe .title{
width: 100%;
height: 45px;
font-size: 16px;
color: #1B1D1E;
font-weight: bold;
padding-left:15px ;
line-height: 45px;
}
.subscribe .classify{
display: flex;width:100%;flex-direction: row;overflow-x: auto;
padding-bottom: 15px;
}
.subscribe .classify-item{
height: 31px;
padding: 0 13px;
border-radius: 6px;
border: 1px solid #D8D8D8;
font-size: 13px;
color: #888888;
line-height: 29px;
margin-right: 5px;
white-space: nowrap;
}
.subscribe .classify-t{
width: 100%;
background: #FFF;
padding: 15px;
}
.subscribe .c-t-box{
width: 100%;
height: 143px;
border-radius: 6px;
background: #FAF8F9;
padding: 15px 0;
display: flex;width:100%;flex-direction: row;overflow-x: auto;
}
.subscribe .c-t-item{
width: 80px;
height: 113px;
border-radius: 6px;
border: 1px solid #D8D8D8;
color: #888888;
margin-right: 5px;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0 ;
justify-content: space-between;
font-size: 12px;
}
.subscribe .daystyle{
display: flex;width:100%;flex-direction: row;overflow-x: auto;
border-bottom: 1px solid #E2E2E2;
}
.subscribe .day-item{
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
color: #1B1D1E;
padding: 7px 15px;
white-space: nowrap;
position: relative;
}
.subscribe .offline{
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
}
.subscribe .timestyle{
display: flex;width:100%;flex-direction: row;overflow-x: auto;
padding: 15px 0;
}
.subscribe .time-item{
width: 75px;
height: 45px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #888888;
border: 1px solid #D8D8D8;
white-space: nowrap;
}
.subscribe .info{
padding: 0 15px;
}
.subscribe .info-item{
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.subscribe .info-i-l{
font-size: 14px;
color: #1B1D1E;
font-weight: bold;
}
.subscribe .inputsmart{
width:1;
flex: 1;
padding-left:20px ;text-align: right;font-size: 12px
}
.subscribe .persionName{
width: 80px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
padding: 0 3px;
text-align: center;
}
.subscribe .submit{
width: 100%;
height: 60px;
background: #FFF;
position: fixed;
left: 0;
bottom: 0;
padding: 0 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
z-index: 99;
}
.submit-l{
display: flex;
flex-direction: row;
align-items: flex-end;
font-size: 13px;
}
</style>
<template>
<view class="subscribe">
<view class="subscribe-box">
<view class="title">服务项目</view>
<view class="classify">
<view v-for="(cl, ci) in lineCate" :key="ci">
<view class="classify-item" @click="switchitem(cl)"
:style="{
'margin-left':ci==0?'15px':'0',
'margin-right': ci+1==lineCate.length?'15px':'5px',
'border-color':cl.Id== categoryIds?'#FF4048':'#D8D8D8',
'color':cl.Id== categoryIds?'#FF4048':'#888888',
'background':cl.Id== categoryIds?'#FBE5E7':'#FFF',
'font-weight':cl.Id== categoryIds?'Bold':'100',
}">
{{cl.Name}}
</view>
</view>
</view>
<view class="classify-t" v-if="OfflineGoods.length>0">
<view class="c-t-box">
<view v-for="(c, i) in OfflineGoods" :key="i">
<view class="c-t-item" @click="getgoodsList(c)"
:style="{
'margin-left':i==0?'15px':'0',
'margin-right': i+1==OfflineGoods.length?'15px':'5px',
'border-color':c.id== GoodsId?'#FF4048':'#D8D8D8',
'color':c.id== GoodsId?'#FF4048':'#888888',
'background':c.id== GoodsId?'#FBE5E7':'#FFF',
'font-weight':c.id== GoodsId?'Bold':'100',
}">
<image mode="aspectFill" :src="c.cover_pic" style="width: 30px;height: 30px;"></image>
<text class="persionName">{{c.name}}</text>
</view>
</view>
</view>
</view>
<view style="width: 100%;height: 15px;background: #FAF8F9;" v-if="dayList.length>0"></view>
<view class="title" v-if="dayList.length>0">到店时间</view>
<view class="daystyle" v-if="dayList.length>0">
<view v-for="(c, i) in dayList" :key="i">
<view class="day-item" @click="btnday(c,i)"
:style="{
'color':c.DayDateStr== selectDay?'#FF4048':'#888888',
}">
<text>{{c.WeekDayStr}}</text>
<text style="margin-top: 3px;">{{c.DayDateStr}}</text>
<view class="offline" :style="{'background':c.DayDateStr== selectDay?'#FF4048':'#FFF',}"></view>
</view>
</view>
</view>
<view class="timestyle" v-if="timeList.length>0">
<view v-for="(c, i) in timeList" :key="i">
<view class="time-item" @click="btntime(c)"
:style="{
'margin-left':i==0?'15px':'0',
'margin-right': i+1==timeList.length?'15px':'5px',
'border-color':c== selecttime?'#FF4048':'#D8D8D8',
'color':c== selecttime?'#FF4048':'#888888',
'background':c== selecttime?'#FBE5E7':'#FFF',
'font-weight':c== selecttime?'Bold':'100',
}">
<text>{{c}}</text>
</view>
</view>
</view>
<view style="width: 100%;height: 15px;background: #FAF8F9;" v-if="designerList.length>0"></view>
<view class="title" v-if="designerList.length>0">设计师</view>
<view class="classify-t" style="padding: 0;" v-if="designerList.length>0">
<view class="c-t-box" style="padding: 0 0 15px;background: #FFF;">
<view v-for="(c, i) in designerList" :key="i">
<view class="c-t-item" @click="getdesigner(c)"
:style="{
'margin-left':i==0?'15px':'0',
'margin-right': i+1==designerList.length?'15px':'5px',
'border-color':c.Gender== selectdesigner?'#FF4048':'#D8D8D8',
'color':c.Gender== selectdesigner?'#FF4048':'#888888',
'background':c.Gender== selectdesigner?'#FBE5E7':'#FFF',
'font-weight':c.Gender== selectdesigner?'Bold':'100',
'padding':i==0?'20px 0':'10px 0',
'height':'123px'
}">
<image mode="aspectFill" v-if="i==0" :src="c.ServiceLogo" style="width: 38px;height: 35px;"></image>
<u-avatar v-if="i!=0" :src="c.ServiceLogo" size="110"></u-avatar>
<view style="display: flex;flex-direction: column;align-items: center;">
<text class="persionName" style="">{{c.Name}}</text>
<text class="persionName" style="font-size: 10px;color: #999999;" v-if="i!=0">{{c.ReserveCount}}人预约</text>
</view>
</view>
</view>
</view>
</view>
<view style="width: 100%;height: 15px;background: #FAF8F9;" ></view>
<view class="title" >预约人信息</view>
<view class="info">
<view class="info-item">
<text class="info-i-l">人数</text>
<u-number-box v-model="value" :min="1" @change="valChange"></u-number-box>
</view>
<view class="info-item">
<text class="info-i-l">手机</text>
<input class="uni-input inputsmart" v-model="Mobile" placeholder='请输入手机号码' />
<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber='getphonenumber'>获取手机号码</button> -->
</view>
<view class="info-item">
<text class="info-i-l">备注</text>
<input class="uni-input inputsmart" v-model="remarks" placeholder='选填，请输入您的其他要求' />
</view>
</view>
<view class="submit">
<view class="submit-l">
<text>定金：</text>
<text :style="{'color':mainColor}">￥<text style='font-size: 20px;'>{{goods.price*value}}</text></text>
</view>
<u-button
size="80"
:ripple="true"
shape="circle"
@click="submitOrderHandler()"
:custom-style="{
backgroundColor: mainColor,
height: '80rpx',
color: '#FFF',
fontSize: '14px'
}"
>
<u-loading mode="circle" style="margin-right: 5px;" v-if="submitOrder"></u-loading>
立即预约
</u-button>
</view>
</view>
<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
<u-popup v-model="payExit" mode="center" :mask-close-able="false">
<view style="background:#fff;width:500rpx">
<view style="padding:10px 0 0 10px">提交失败</view>
<view style="text-align:center;padding-bottom:40rpx">
<view style="margin:80rpx 0">支付取消</view>
<span @click="exitPay" style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import payCom from '@/components/pay/pay';
export default {
components: {
payCom,
},
data() {
return {
pageTitle: "预约",
mainColor: "",
loading: true,
submitOrder:false,
payExit: false,
payBtn: false,
id:0,
goods:{},
lineCate:[],
OfflineGoods:[],
categoryIds:0,
GoodsId:0,
dayList:[],
timeList:[],
designerList:[],
selectDay:'',
selecttime:'',
selectdesigner:0,
value:1,
remarks:'',
Mobile:'',
payInfo: {
OpenId: 'ow_7I5XC1-RGwwk8QANBmWKYKmOc',
OrderId: '',
OrderPayType: 1,
GoodsName: ''
},
};
},
onLoad(option) {
this.mainColor = this.$uiConfig.mainColor;
if(option && option.id){
this.id = option.id
}
this.payInfo.OpenId=uni.getStorageSync('mall_UserInfo').OpenId;
},
mounted() {
uni.setNavigationBarTitle({
title: this.pageTitle,
});
this.getAppllCate()//获取分类
},
methods: {
getAppllCate(){
uni.showLoading({
title: '加载中'
});
this.request2({
url: '/api/AppletGoods/GetAppletOfflineCate',
data: {}
},
res => {
if (res.resultCode == 1) {
this.lineCate = res.data
this.categoryIds = this.lineCate[0].Id;
this.GetAppOGList()
}
uni.hideLoading();
}
);
},
GetAppOGList(){
uni.showLoading({
title: '加载中'
});
this.request2({
url: '/api/AppletGoods/GetAppletOfflineGoodsList',
data: {categoryIds:this.categoryIds,StoreId: this.id}
},
res => {
this.OfflineGoods = res.data;
this.GoodsId= 0;
this.dayList=[];
this.timeList=[];
this.designerList=[];
if(this.OfflineGoods.length>0){
this.GoodsId = this.OfflineGoods[0].id;
this.GetApplOGInfo()
}
uni.hideLoading();
}
);
},
GetApplOGInfo(){
uni.showLoading({
title: '加载中'
});
this.request2({
url: '/api/AppletGoods/GetAppletOfflineGoodsInfo',
data: {GoodsId:this.GoodsId,StoreId: this.id}
},
res => {
if (res.resultCode == 1) {
if(res.data && res.data.goods){
this.goods = res.data.goods;
this.payInfo.GoodsName = this.goods.name.slice(0,10);
this.dayList = res.data.goods.storeDateList;
this.selectDay= this.dayList[0].DayDateStr;
this.timeList = this.dayList[0].TimeList;
this.selecttime= this.timeList[0];
this.designerList = res.data.goods.persionList;
let obj = {
ServiceLogo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/timeisup.png',
Name:'到点分配',
Gender:0,
}
this.designerList.unshift(obj)
this.selectdesigner= this.designerList[0].Gender;
}
}
uni.hideLoading();
}
);
},
submitOrderHandler(){//提交订单
let that = this;
this.submitOrder = true;
uni.requestSubscribeMessage({
tmplIds: that.goods.template_message_list,
complete(res) {
let form = {};
form.GoodsId = that.goods.id;
form.StoresId = that.id;
form.Mobile = that.Mobile;
form.Income = that.goods.price*that.value;
form.Remark = that.remarks;
form.CouponMoney = 0;
form.DetailList = [];
let obj={
GoodsId:that.goods.id,
ServicepersonalId:that.selectdesigner,
ServiceDate:that.selectDay,
ServiceTime:that.selecttime,
Number: that.value
}
form.DetailList.push(obj)
console.log(form)
that.request2(
{
url: '/api/AppletOrder/SetAppletOfflineGoodsOrderInfo',
data: form
},
res => {
if (res.resultCode == 1) {
that.submitOrder = false;
that.payBtn = true;
that.payInfo.OrderId = res.data.OrderId;
that.payInfo.total_price = form.Income;
}
else{
that.$refs.uToast.show({
title: res.data.message,
type: 'warning'
});
}
}
);
}
});
},
getphonenumber(e){
console.log(e)
uni.checkSession({//检查登录状态是否过期
success:(x)=>{
if(x.errMsg=='checkSession:ok'){//没有过期
console.log('没过期')
}
},
fail:(err)=>{//检测失败重新登录
console.log(err)
}
})
},
switchitem(item){//选中分类的操作
this.categoryIds = item.Id;
this.GetAppOGList()
},
getgoodsList(item){//选中商品的操作
this.GoodsId = item.id;
this.GetApplOGInfo()
},
btnday(item,i){//选中日期的操作
this.selectDay = item.DayDateStr;
this.timeList = this.dayList[i].TimeList;
this.selecttime= this.timeList[0];
},
btntime(item){
this.selecttime = item;
},
getdesigner(item){//设计师
this.selectdesigner = item.Gender
},
valChange(e){
this.value = e.value
},
closePay() {
this.payBtn = false;
this.payExit = true;
},
exitPay() {
this.payExit = false;
// uni.redirectTo({
// url: "/pages/order/index/index?status=0",
// });
},
},
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment