Commit 72781568 authored by 罗超's avatar 罗超

1

parent 2e6d3ed1
<template>
<view class="buy-notice-restaurant">
<view class="meal-info">
<image :src="mealData.MealPic" mode="aspectFit" class="MealPic"></image>
<view class="right">
<view class="name">{{mealData.MealName}}</view>
<view class="sale">已售 {{mealData.SaleCount}}</view>
</view>
</view>
<view class="ticket-title">
套餐内容
<text class="ticket-title-bg"></text>
</view>
<view class="meal-con">
{{mealData.MealDesc}}
</view>
<view class="ticket-title">
购买须知
<text class="ticket-title-bg"></text>
</view>
<view class="buy-notice-con">
<rich-text :nodes="mealData.OtherTag"></rich-text>
</view>
<view class="btn-box">
<view class="price">
<text class="price-pre"></text>
{{mealData.LPriceB}}
</view>
<view class="btn" @click="subscribe">
立即预订
</view>
</view>
</view>
</template>
<script>
export default{
props:{
mealData:{
type:Object,
default:{}
}
},
data(){
return{
}
},
methods:{
subscribe(){
this.$emit("success")
}
}
}
</script>
<style lang="scss" scoped>
.buy-notice-restaurant{
height: 70vh;
padding: 45rpx 45rpx 120rpx 45rpx;
overflow-y: scroll;
overflow-x: hidden;
.meal-info{
display: flex;
padding-bottom: 50rpx;
border-bottom: 1rpx solid #E7E7E7;
.MealPic{
width: 129rpx;
height: 129rpx;
background-color: #DFBE6E;
border-radius: 20rpx;
}
.right{
flex-grow: 5;
margin-left: 35rpx;
.name{
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #1B1D1E;
}
.sale{
width: 120rpx;
height: 40rpx;
background-color: #ECF1F4;
border-radius: 4rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #111111;
text-align: center;
line-height: 38rpx;
margin-top: 20rpx;
}
}
}
.ticket-title {
// width: 70rpx;
height: 50rpx;
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #1F1F1F;
background-color: transparent;
// line-height: 44rpx;
position: relative;
margin: 40rpx 0;
.ticket-title-bg {
width: 70rpx;
height: 10rpx;
background-color: #DFBE6E;
border-radius: 4px;
position: absolute;
left: 0;
bottom: 6rpx;
z-index: 1;
opacity: 0.6;
}
}
.meal-con{
white-space: pre-wrap;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #111111;
}
.buy-notice-con{
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 800;
color: #111111;
}
.btn-box{
position: fixed;
right: 55rpx;
bottom:100rpx;
display: flex;
justify-content: flex-end;
align-items: center;
.price{
font-size: 40rpx;
font-family: PingFang SC;
font-weight: 500;
color: #D91818;
// line-height: 38rpx;
.price-pre{
font-size: 22rpx;
}
}
.btn{
width: 300rpx;
height: 80rpx;
background-color: #111111;
border-radius: 20rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
text-align: center;
line-height: 78rpx;
margin-left: 45rpx;
}
}
}
</style>
......@@ -8,58 +8,85 @@
<view class="package-name">{{data.MealName}}</view>
<view class="f11">
<text class="king" style="margin-right: 14rpx;" v-if="data.MinBuyNum>0">{{data.MinBuyNum}}人起订</text>
<text><text v-for="(item,index) in data.UsageTimeList" :key="index">
{{item.Name}} <text v-if="index!=data.UsageTimeList.length-1"></text>
</text>可用,</text>
<text>
<text v-for="(item,index) in data.UsageTimeList" :key="index" v-if="data.UsageTimeList[0].ID!==0">
{{item.Name}}
<text v-if="index!=data.UsageTimeList.length-1"></text>
</text>
<text v-if="data.UsageTimeList[0].ID!==0">可用,</text>
<text v-if="data.UsageTimeList[0].ID===0">
使用时间不限
</text>
</text>
<text v-if="data.IsHoliday===1">节假日可用</text>
</view>
<viwe class="give f11">
<text v-if="data.MakeDay===0">可预约当天</text>
<text v-if="data.MakeDay>0">提前{{data.MakeDay}}天预约</text>
</viwe>
<view class="price" style="margin-top:30rpx;">
<view class="buy-know" @click="seeBuyNotice">
购买须知
</view>
<view class="price" style="margin-top:10rpx;">
<text class="f11" style="margin-right: 10rpx;"></text>
<text v-if="data.LPriceB">{{data.LPriceB}}</text>
<text v-if="!data.LPriceB">暂无报价</text>
</view>
</view>
<view class="rm-opera">
<view class="buy" @click="previewOrder">
<view class="buy" @click="previewOrder" v-if="data.RemainingInventory>0">
<view class="buy-content"></view>
<view class="buy-tips">在线订</view>
</view>
<!-- <view class="buy disabled">
<view class="buy disabled" v-if="data.RemainingInventory===0">
<view class="buy-content"></view>
<view class="buy-tips">已售罄</view>
</view> -->
</view>
</view>
<u-popup v-model="showBuyNotice" mode="bottom" border-radius="40" :safe-area-inset-bottom="true">
<buyNotice :mealData="data" @success="buyNoticeSuccess"></buyNotice>
</u-popup>
</view>
</template>
<script>
import buyNotice from "./buyNotice.vue"
export default {
props:{
data:{
type:Object,
dafault:{}
components: {
buyNotice
},
props: {
data: {
type: Object,
dafault: {}
}
},
data() {
return {
showBuyNotice: false
}
},
mounted() {
console.log(this.data)
},
methods: {
previewOrder(){
uni.navigateTo({
url:"/pages/restaurant/order"
})
previewOrder() {
this.$emit("success")
},
buyNoticeSuccess(){
this.showBuyNotice = false
this.previewOrder()
},
seeBuyNotice() {
this.showBuyNotice = true
}
},
}
</script>
<style>
<style scoped>
.package-good {
margin-bottom: 30rpx;
display: flex;
......@@ -79,7 +106,8 @@
width: 1px;
flex: 1;
}
.package-good .rm-opera{
.package-good .rm-opera {
margin-left: 10rpx;
display: flex;
flex-direction: column;
......@@ -87,14 +115,16 @@
justify-items: center;
align-items: center;
}
.package-good .rm-opera .warm-count{
.package-good .rm-opera .warm-count {
text-align: center;
font-size: 18rpx;
font-weight: 500;
color: #111111;
margin-bottom: 10rpx;
}
.package-good .rm-opera .buy{
.package-good .rm-opera .buy {
width: 70rpx;
height: 81rpx;
background: #FFFFFF;
......@@ -103,26 +133,31 @@
display: flex;
flex-direction: column;
}
.package-good .rm-opera .buy.disabled{
.package-good .rm-opera .buy.disabled {
background: #EBEBEB;
border: 2rpx solid #DCDCDC;
}
.package-good .rm-opera .buy.disabled .buy-tips{
.package-good .rm-opera .buy.disabled .buy-tips {
background: #A09E9E;
color: #fff;
}
.package-good .rm-opera .buy.disabled .buy-content{
.package-good .rm-opera .buy.disabled .buy-content {
color: #A09E9E;
}
.package-good .rm-opera .buy .buy-tips{
.package-good .rm-opera .buy .buy-tips {
height: 27rpx;
background: #000000;
text-align: center;
color:#DFBE6E;
color: #DFBE6E;
font-size: 18rpx;
line-height: 27rpx;
}
.package-good .rm-opera .buy .buy-content{
.package-good .rm-opera .buy .buy-content {
height: 1px;
flex: 1;
text-align: center;
......@@ -133,6 +168,7 @@
font-weight: 800;
color: #111111;
}
.package-good .rm-right .package-name {
font-size: 30rpx;
font-weight: 800;
......@@ -143,18 +179,18 @@
}
.package-good .rm-right .give {
background: #ECF1F4;
border-radius: 4rpx;
padding: 10rpx;
margin-top:15rpx;
margin-top: 15rpx;
display: inline-block;
}
.package-good .rm-right .price{
.package-good .rm-right .price {
font-weight: 800;
font-size: 40rpx;
color:#111;
color: #111;
}
.package-good .rm-left {
......@@ -182,4 +218,12 @@
right: 0;
bottom: 0;
}
.buy-know {
margin-top: 10rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 800;
color: #111111;
}
</style>
......@@ -42,9 +42,6 @@
default:{}
}
},
created() {
console.log(this.data)
},
data() {
return {
// key: value
......
......@@ -4,7 +4,7 @@
<view class="media" :style="{'opacity':(100-boxOption)+'%'}">
<u-swiper :list="imgsList" :effect3d="false" :height="407" :interval="5000" :border-radius="0"
@click="openPicture" name="picUrl" v-if="active==1"></u-swiper>
<view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]"
style="position: fixed;top: 0;left: 0;padding-left: 6rpx;">
<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx;"></u-icon>
......@@ -23,10 +23,12 @@
<view class="restaurant-name">{{details.Name}}</view>
<view class="restaurant-tag" style="display: flex;flex-wrap: wrap;">
<view v-for="(item,index) in details.FoodTag" :key="index">
<u-tag style="margin-right: 22rpx;" :text="item" mode="plain" border-color="#DFBE6E" color="#DFBE6E" size="mini" v-if="item"/>
<u-tag style="margin-right: 22rpx;" :text="item" mode="plain" border-color="#DFBE6E"
color="#DFBE6E" size="mini" v-if="item" />
</view>
<view v-for="(item,index) in details.GeographicTag" :key="index">
<u-tag style="margin-right: 22rpx;" :text="item" mode="plain" border-color="#DFBE6E" color="#DFBE6E" size="mini" v-if="item"/>
<u-tag style="margin-right: 22rpx;" :text="item" mode="plain" border-color="#DFBE6E"
color="#DFBE6E" size="mini" v-if="item" />
</view>
</view>
</view>
......@@ -40,12 +42,14 @@
@click="changeLike"></image>
</view>
</view>
<view class="location" style="margin-bottom: 36rpx;padding-bottom: 36rpx;border-bottom: 1px solid rgba(0,0,0,.1);">
<view class="location"
style="margin-bottom: 36rpx;padding-bottom: 36rpx;border-bottom: 1px solid rgba(0,0,0,.1);">
<view class="loc-left">
<view class="loc-name">
<u-icon name="clock" size="28" />
<text style="margin-left: 14rpx;">营业时间 {{details.OpeningHours}}</text>
<u-tag style="margin-left: 22rpx;" text="营业中" bg-color="#DFBE6E" border-color="#DFBE6E" color="#ffffff" v-if="details.BusinessState===1"/>
<u-tag style="margin-left: 22rpx;" text="营业中" bg-color="#DFBE6E" border-color="#DFBE6E"
color="#ffffff" v-if="details.BusinessState===1" />
</view>
<view class="loc-remark">
<!-- <view>无休息日,全年营业</view> -->
......@@ -64,37 +68,46 @@
</view>
</view>
<view class="loc-right">
<text style="margin-right: 20rpx;" @click="goMap(details.Address,details.Lng,details.Lat)">地图详情</text>
<text style="margin-right: 20rpx;"
@click="goMap(details.Address,details.Lng,details.Lat)">地图详情</text>
<u-icon name="arrow" size="20" />
</view>
</view>
<view class="empty-block" style="margin: 0 -50rpx;"></view>
<view class="big-title" style="margin-top: 50rpx;">
<text>推荐菜品</text>
</view>
<view class="chooseDate" @click="chooseDate">
<text>选择日期</text>
<uni-calendar ref="calendar" :insert="true" :selected="calendar" @confirm="confirm"></uni-calendar>
<text v-if="Date">:{{Date}}</text>
</view>
<ul class="title-style-one hr">
<li v-for="(item,index) in details.FoodRecommendList" :key="index">
<view class="item-title regular">{{item.FoodName}}</view>
</li>
</ul>
<view class="big-title">
<text>优惠套餐</text>
<text>优惠套餐</text>
</view>
<view class="restaurant-room">
<view v-for="(item,index) in details.resultMealList" :key="index" class="room-list">
<package-good :data="item"></package-good>
<view class="no-data" v-if="details.resultMealList.length===0">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/no-data.png" mode="aspectFit" class="no-data-img"></image>
<view class="zhanwu">
暂无数据
</view>
</view>
<view v-for="(item,index) in details.resultMealList" :key="index" class="room-list" v-if="details.resultMealList.length>=0">
<package-good :data="item" @success="previewOrder(item)"></package-good>
<!-- <package-good-test></package-good-test> -->
</view>
</view>
</view>
<!-- <view class="empty-block"></view> -->
<view class="detail-box">
<!-- <view class="flex">
<view class="big-title">
......@@ -128,15 +141,18 @@
<recommed-restaurant></recommed-restaurant>
</view> -->
</view>
<view class="">
</view>
<!-- <u-popup v-model="showTimePopup" mode="bottom" border-radius="40" length="70%" :safe-area-inset-bottom="true" > -->
<!-- </u-popup> -->
<u-popup v-model="showTimePopup" mode="bottom" border-radius="40" length="70%"
:safe-area-inset-bottom="true">
<view class="" style="margin-top: 40rpx;">
<calendar ref="calendar" :insert="true" :selected="calendar" @change="changeDate"></calendar>
<view class="caledar-btn" @click="confirm">
确定
</view>
</view>
</u-popup>
</view>
</scroll-view>
</view>
</template>
......@@ -145,11 +161,11 @@
import packageGoodTest from './components/package-good2.vue';
import nearGood from './components/near-good.vue';
import recommedRestaurant from './components/recommed-restaurant.vue';
import uniCanlendar from "./components/uni-calendar/uni-calendar.vue"
import calendar from "./components/uni-calendar/uni-calendar.vue"
export default {
data() {
return {
imgsList: [{
imgsList: [{
picUrl: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622459632000_216.png"
},
{
......@@ -163,7 +179,7 @@
}
],
ID: 0,
details:{},
details: {},
typeList: [{
Id: 0,
Name: '视频'
......@@ -178,41 +194,12 @@
controls: false,
videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
active: 1,
islike: false,
currentRoomType: 0,
nearbyType: 0,
searchObj: {
date: {}
},
threeLevelList: [{
name: "全部",
id: 0
},
{
name: "大床房",
id: 1
},
{
name: "双床房",
id: 2
},
{
name: "含早餐",
id: 3
},
{
name: "可取消",
id: 4
},
{
name: "优惠活动",
id: 5
}
],
nearbyType: 0,
calendar: [{
date: "",
info: ''
}],
}],
Date: ""
}
},
components: {
......@@ -220,39 +207,25 @@
packageGoodTest,
nearGood,
recommedRestaurant,
uniCanlendar
calendar
},
created() {
let d1 = new Date();
let d = new Date();
let d2 = new Date(d.setDate(d.getDate() + 1))
var obj = {
start: `${d1.getFullYear()}-${d1.getMonth()+1}-${d1.getDate()}`,
end: `${d2.getFullYear()}-${d2.getMonth()+1}-${d2.getDate()}`,
startDay: `${this.getMonth(d1)}${d1.getDate()}日`,
endDay: `${this.getMonth(d1)}${d1.getDate()}日`,
startWeek: this.getWeek(d1),
endWeek: this.getWeek(d2),
day: 1
}
uni.setStorage({
key: 'Time',
data: JSON.stringify(obj)
})
this.searchObj.date = obj
// let d = new Date();
let nextDate = new Date(d.getTime() + 24*60*60*1000);
let year=nextDate.getFullYear();
let month=nextDate.getMonth()+1
if(month<10){
month='0'+month
let d3 = new Date();
let nextDate = new Date(d3.getTime() + 24 * 60 * 60 * 1000);
let year = nextDate.getFullYear();
let month = nextDate.getMonth() + 1
if (month < 10) {
month = '0' + month
}
let day=nextDate.getDate()
if(day<10){
day='0'+day
let day = nextDate.getDate()
if (day < 10) {
day = '0' + day
}
let tomorrow = year+'-'+month+'-'+day
this.calendar[0].date=tomorrow
let tomorrow = year + '-' + month + '-' + day
this.calendar[0].date = tomorrow
this.Date = tomorrow
console.log(this.calendar,this.Date)
},
onLoad(options) {
if (options && options.id) {
......@@ -272,100 +245,52 @@
this.mainColor = this.$uiConfig.mainColor;
},
methods: {
chooseDate(){
// this.showTimePopup=true
chooseDate() {
this.showTimePopup = true
// this.$refs.calendar.open();
console.log(this.$refs,this)
},
confirm(e) {
changeDate(e){
this.Date = e.fulldate
this.calendar[0].date = e.fulldate
// this.getDetailByDate();
this.$forceUpdate()
},
// opencalendar(){
// this.$refs.calendar.open();
// },
confirm() {
this.showTimePopup=false
this.getMealListByDate()
},
goMap(name, lon, lat) {
let newLon=parseFloat(lon)
let newLat=parseFloat(lat)
let newLon = parseFloat(lon)
let newLat = parseFloat(lat)
wx.openLocation({
latitude:newLat,
longitude:newLon,
scale: 18,
name,
// address:"武侯区科华中路 2 号",
success:(res)=>{
// console.log(res)
},
fail: (err) => {
// console.log(err)
}
latitude: newLat,
longitude: newLon,
scale: 18,
name,
// address:"武侯区科华中路 2 号",
success: (res) => {
// console.log(res)
},
fail: (err) => {
// console.log(err)
}
})
},
openPicture(){
openPicture() {
uni.navigateTo({
url:"/pages/restaurant/picture"
url: "/pages/restaurant/picture"
})
},
openDescription(){
openDescription() {
uni.navigateTo({
url:"/pages/restaurant/description"
url: "/pages/restaurant/description"
})
},
// chosenDateResult(obj) {
// obj.startDay = this.formatMonthDay(obj.startDay)
// obj.endDay = this.formatMonthDay(obj.endDay)
// this.searchObj.date = obj
// this.showTimePopup = false
// },
formatMonthDay(str) {
let temp = str.split('-')
temp[0] = temp[0] > 9 ? temp[0] : "0" + temp[0]
temp[1] = temp[1] > 9 ? temp[1] : "0" + temp[1]
return `${temp[0]}${temp[1]}日`
},
getMonth(date) {
let m = date.getMonth() + 1
return m > 9 ? m : "0" + m
},
getDay(date) {
let d = date.getDate()
return d > 9 ? d : "0" + d
},
getWeek(date) {
let day = date.getDay();
if (day === 1) {
var week = "一";
} else if (day === 2) {
week = "二";
} else if (day === 3) {
week = "三";
} else if (day === 4) {
week = "四";
} else if (day === 5) {
week = "五";
} else if (day === 6) {
week = "六";
} else if (day === 7) {
week = "日";
}
return "周" + week
},
changeNearbyType(t) {
this.nearbyType = t
},
changeRoomType(i) {
this.currentRoomType = i
},
changeLike() {
this.request2({
url: '/api/AppletDining/GetFollowDining',
data: {
ID: this.details.FollowId,
SourceId:this.details.ID
SourceId: this.details.ID
}
},
res => {
......@@ -375,40 +300,14 @@
}
);
},
previewImage(i) {
// uni.previewImage({
// urls: this.imgsList,
// current: i,
// longPressActions: {
// itemList: ["发送给朋友", "保存图片", "收藏"],
// success: function(data) {},
// fail: function(err) {
// console.log(err.errMsg);
// },
// },
// });
},
scroll(e) {
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
this.titleStyle.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) + "%"
this.$forceUpdate()
},
enlarge(file) {
// 全屏
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen({
direction: 0
})
},
videoControl(e) {
if (e.detail.fullScreen == false) {
this.videoContext.stop()
this.controls = false
} else {
this.videoContext.play()
this.controls = true
}
},
goback() {
uni.navigateBack({
delta: 1,
......@@ -434,24 +333,90 @@
}
);
},
//根据日期获取套餐列表
getMealListByDate() {
this.request2({
url: '/api/AppletDining/GetDiningMealList',
data: {
ID: this.ID,
BuyDate:this.Date
}
},
res => {
if (res.resultCode == 1) {
this.details.resultMealList = res.data;
}
}
);
},
previewOrder(item) {
let data = {
MealName: item.MealName,
date: this.Date,
Unit_Price: item.LPriceB,
MealId: item.Id,
DiningId: this.details.ID,
MakeDay: item.MakeDay,
IsHoliday: item.IsHoliday,
OtherTag:item.OtherTag,
}
uni.navigateTo({
url: "/pages/restaurant/order?data=" + encodeURIComponent(JSON.stringify(data)),
});
}
},
}
</script>
<style scoped>
.chooseDate{
/* width: 150px; */
<style lang="scss" scoped>
.no-data {
.no-data-img {
width: 180rpx;
height: 240rpx;
margin-left: 50%;
transform: translateX(-50%);
}
.zhanwu{
text-align: center;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
margin-top: 20rpx;
}
}
.chooseDate {
width: 275rpx;
margin-top: 20rpx;
/* display: inline-block; */
height: 60rpx;
/* height: 60rpx; */
background-color: #ECF1F4;
border-radius: 20rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #111111;
text-align: center;
line-height: 58rpx;
padding: 0 10rpx;
}
.caledar-btn {
margin-top: 20rpx;
width: 650rpx;
height: 80rpx;
background-color: #111111;
border-radius: 20rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
text-align: center;
line-height: 78rpx;
margin: 0 auto;
}
.restaurant-detail {
height: 100vh;
overflow: hidden;
......@@ -732,9 +697,11 @@
font-weight: 500;
color: #6E6E6E; */
}
.restaurant-detail .restaurant-content .restaurant-base .head .op-box{
.restaurant-detail .restaurant-content .restaurant-base .head .op-box {
margin-top: -175rpx;
}
.restaurant-detail .restaurant-content .restaurant-base .head .op-box image {
width: 109rpx;
height: 109rpx;
......@@ -877,7 +844,7 @@
bottom: 0;
left: 0;
right: 0;
padding:30rpx 50rpx;
padding: 30rpx 50rpx;
}
.restaurant-detail .media .media-info .mi-left {
......
......@@ -3,15 +3,15 @@
<view class="search-box">
<view style="width: 1px; flex: 1;">
<u-search placeholder="美食名称" v-model="msg.Name" input-align="left"
text-color="#111" bg-color="rgba(0,0,0,0)" :show-action="false"></u-search>
text-color="#111" bg-color="rgba(0,0,0,0)" :show-action="false" clearabled @search="searchList" @clear="searchList"></u-search>
</view>
</view>
<view>
<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#000" inactive-color="#444">
<u-dropdown-item v-model="msg.OrderBy" :title="optionsTitle[0]" :options="options1" @change="change">
<u-dropdown-item v-model="msg.OrderBy" :title="optionsTitle[0]" :options="options1" @change="getFoodList">
</u-dropdown-item>
<u-dropdown-item v-model="msg.FoodTypeIds" :title="optionsTitle[1]" :options="classOptions">
<u-dropdown-item v-model="msg.FoodTypeIds" :title="optionsTitle[1]" :options="classOptions" @change="getFoodList">
</u-dropdown-item>
<u-dropdown-item :title="optionsTitle[2]">
<view class="slot-content" style="padding: 30rpx;background-color: #FFF;">
......@@ -25,7 +25,8 @@
<text style="font-size: 28rpx;color:#111;font-weight: 800;">价格</text>
</view>
<view class="hotel-rate-box">
<view v-for="(x,i) in rates" class="hotel-rate" :class="{'active':tempRateAndPrice.rate.indexOf(x.ID)!=-1}" @click="setRestaurantPrice(x.ID)">{{x.Name}}</view>
<!-- <view v-for="(x,i) in rates" class="hotel-rate" :class="{'active':tempRateAndPrice.rate.indexOf(x.ID)!=-1}" @click="setRestaurantPrice(x.ID)">{{x.Name}}</view> -->
<view v-for="(x,i) in rates" class="hotel-rate" :class="{'active':msg.DiningPriceType===x.ID}" @click="setRestaurantPrice(x.ID)">{{x.Name}}</view>
</view>
<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
<view style="flex:1;margin-right: 30rpx;">
......@@ -81,7 +82,7 @@
Name:"",
OrderBy:0,
FoodTypeIds:0,
DiningPriceType:-1,
DiningPriceType:0,
},
page_count:1,
status: "loadmore",
......@@ -187,9 +188,6 @@
restaurantType
},
created() {
// uni.navigateTo({
// url:"/pages/hotel/detail"
// })
uni.setNavigationBarTitle({
title: "美食",
});
......@@ -213,7 +211,10 @@
this.getFoodList();
},
methods: {
searchList(){
this.msg.pageIndex=1
this.getFoodList();
},
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop;
},
......@@ -233,89 +234,93 @@
}
},
setRestaurantPrice(rateId){
if(rateId==-1){
this.tempRateAndPrice.rate=[-1]
}else{
if(this.tempRateAndPrice.rate.indexOf(-1)!=-1){
this.tempRateAndPrice.rate.splice(this.tempRateAndPrice.rate.indexOf(-1),1)
}
let temp=this.tempRateAndPrice.rate.indexOf(rateId)
if(temp==-1){
this.tempRateAndPrice.rate.push(rateId)
}else{
this.tempRateAndPrice.rate.splice(temp,1)
}
}
console.log(this.tempRateAndPrice.rate)
},
setRestaurant(typeId){
if(typeId==-1){
this.tempRateAndPrice.types=[-1]
}else{
if(this.tempRateAndPrice.types.indexOf(-1)!=-1){
this.tempRateAndPrice.types.splice(this.tempRateAndPrice.types.indexOf(-1),1)
}
let temp=this.tempRateAndPrice.types.indexOf(typeId)
if(temp==-1){
this.tempRateAndPrice.types.push(typeId)
}else{
this.tempRateAndPrice.types.splice(temp,1)
}
}
this.msg.DiningPriceType=rateId
// if(rateId==-1){
// this.tempRateAndPrice.rate=[-1]
// }else{
// if(this.tempRateAndPrice.rate.indexOf(-1)!=-1){
// this.tempRateAndPrice.rate.splice(this.tempRateAndPrice.rate.indexOf(-1),1)
// }
// let temp=this.tempRateAndPrice.rate.indexOf(rateId)
// if(temp==-1){
// this.tempRateAndPrice.rate.push(rateId)
// }else{
// this.tempRateAndPrice.rate.splice(temp,1)
// }
// }
},
// setRestaurant(typeId){
// if(typeId==-1){
// this.tempRateAndPrice.types=[-1]
// }else{
// if(this.tempRateAndPrice.types.indexOf(-1)!=-1){
// this.tempRateAndPrice.types.splice(this.tempRateAndPrice.types.indexOf(-1),1)
// }
// let temp=this.tempRateAndPrice.types.indexOf(typeId)
// if(temp==-1){
// this.tempRateAndPrice.types.push(typeId)
// }else{
// this.tempRateAndPrice.types.splice(temp,1)
// }
// }
// },
resetPrice(){
this.optionsTitle[2]="筛选"
this.searchObj.rateAndPrice={
types:[-1],
priceText:"不限",
rate:[-1]
}
// this.optionsTitle[2]="筛选"
// this.searchObj.rateAndPrice={
// types:[-1],
// priceText:"不限",
// rate:[-1]
// }
this.msg.DiningPriceType=0
this.getFoodList();
this.closeDropdown();
},
surePrice(){
let result=""
if(this.tempRateAndPrice.types.length>0){
this.options2.forEach(x=>{
if(this.tempRateAndPrice.types.indexOf(x.value)!=-1){
result+=x.label+","
}
})
}
if(this.tempRateAndPrice.rate.length>0){
this.rates.forEach(x=>{
if(this.tempRateAndPrice.rate.indexOf(x.value)!=-1){
result+=x.label+","
}
})
}
// let result=""
// if(this.tempRateAndPrice.types.length>0){
// this.options2.forEach(x=>{
// if(this.tempRateAndPrice.types.indexOf(x.value)!=-1){
// result+=x.label+","
// }
// })
// }
// if(this.tempRateAndPrice.rate.length>0){
// this.rates.forEach(x=>{
// if(this.tempRateAndPrice.rate.indexOf(x.value)!=-1){
// result+=x.label+","
// }
// })
// }
result=result==""?"筛选":result
console.log(result)
this.optionsTitle[2]=result
this.$forceUpdate()
this.searchObj.rateAndPrice=this.tempRateAndPrice
this.closeDropdown();
},
sureType(item){
this.searchObj.rtype=item.Id
this.optionsTitle[1]=item.Id==-1?'菜系':item.Name
// result=result==""?"筛选":result
// console.log(296,result)
// this.optionsTitle[2]=result
// this.$forceUpdate()
// this.searchObj.rateAndPrice=this.tempRateAndPrice
// this.msg.DiningPriceType=this.tempRateAndPrice.rate.toString();
this.getFoodList();
this.closeDropdown();
item.newTimespan=this.rand(1000,9999)
this.currentTypeObj=item
},
rangechange4(e){
if(e.minValue==0){
if(e.maxValue==1000){
this.tempRateAndPrice.priceText="不限"
}else{
this.tempRateAndPrice.priceText=`¥${e.maxValue}以下`
}
}else if(e.maxValue==1000){
this.tempRateAndPrice.priceText=`¥${e.minValue}以上`
}else{
this.tempRateAndPrice.priceText=`¥${e.minValue} - ¥${e.maxValue}之间`
}
},
// sureType(item){
// this.searchObj.rtype=item.Id
// this.optionsTitle[1]=item.Id==-1?'菜系':item.Name
// this.closeDropdown();
// item.newTimespan=this.rand(1000,9999)
// this.currentTypeObj=item
// },
// rangechange4(e){
// if(e.minValue==0){
// if(e.maxValue==1000){
// this.tempRateAndPrice.priceText="不限"
// }else{
// this.tempRateAndPrice.priceText=`¥${e.maxValue}以下`
// }
// }else if(e.maxValue==1000){
// this.tempRateAndPrice.priceText=`¥${e.minValue}以上`
// }else{
// this.tempRateAndPrice.priceText=`¥${e.minValue} - ¥${e.maxValue}之间`
// }
// },
closeDropdown() {
this.$refs.uDropdown.close();
},
......
......@@ -2,33 +2,52 @@
<view>
<view class="hotel-order">
<view class="o-head">
<view class="room-name">烧烤多人餐</view>
<view class="room-remark">需要提前1天下单预约</view>
<view class="room-name">{{orderData.MealName}}</view>
<view class="Meal-date">
{{orderData.date}}
</view>
<view class="room-remark">
<text v-if="orderData.MakeDay===0">可预约当天</text>
<text v-if="orderData.MakeDay>0">提前{{orderData.MakeDay}}天预约</text>
</view>
<view class="big-title">
<text class=" f12">订餐必知</text>
</view>
<view class="rule">
<text class="king">此套餐节假日不可用</text>
<text>需要提前预约,餐厅营业时间为:周一至周日 09:00-21:00,请您提前安排好行程时间</text>
<text class="king" v-if="orderData.IsHoliday===0">此套餐节假日不可用</text>
<!-- <text>需要提前预约,餐厅营业时间为:周一至周日 09:00-21:00,请您提前安排好行程时间</text> -->
<rich-text :nodes="orderData.OtherTag"></rich-text>
</view>
</view>
<view class="form">
<view class="form-items">
<view class="label">用餐人数</view>
<view class="label">就餐人数</view>
<view class="val">
<u-number-box size="28" :min="1" :max="100" v-model="order.PeopleNumber" @change="PeopleNumberChange"></u-number-box>
</view>
</view>
<view class="form-items">
<view class="label">套餐份数</view>
<view class="val">
<u-number-box size="28" :min="1" :max="100" v-model="order.roomCount"></u-number-box>
<u-number-box size="28" :min="1" :max="100" v-model="order.BuyNum" @change="BuyNumChange"></u-number-box>
</view>
</view>
<view class="form-items">
<view class="label">联系人</view>
<view class="val">
<input type="text" v-model="order.userName" placeholder="若是多人,输入代表人员即可" />
<input type="text" v-model="order.Consignee" placeholder="若是多人,输入代表人员即可" />
</view>
</view>
<view class="form-items">
<view class="label">联系电话</view>
<view class="val">
<input type="text" v-model="order.userName" placeholder="输入电话号码" />
<input type="number" v-model="order.ConsigneeMobile" placeholder="输入电话号码" />
</view>
</view>
<view class="form-items">
<view class="label">备注</view>
<view class="val">
<input type="number" v-model="order.BuyerMessage" placeholder="您的特殊要求,我们会尽量安排" />
</view>
</view>
</view>
......@@ -43,8 +62,8 @@
在线支付
</view>
<view class="val f14 regular" style="text-align: right;">
<text style="margin-right: 30rpx;">5分套餐</text>
<text class="red">3000</text>
<text style="margin-right: 30rpx;">{{order.BuyNum}}套餐</text>
<text class="red">{{orderData.Unit_Price*order.BuyNum}}</text>
</view>
</view>
<view class="form-items" style="border-bottom: none;">
......@@ -54,12 +73,12 @@
</view>
<view class="flex f12 grey">
<view style="flex:1">
<text style="margin-right: 30rpx;">烧烤多人餐</text>
<text style="margin-right: 30rpx;">{{orderData.MealName}}</text>
</view>
<view style="text-align: right;">5份 × ¥600</view>
<view style="text-align: right;">{{order.BuyNum}}份 × ¥{{orderData.Unit_Price}}</view>
</view>
</view>
</view>
<view class="empty-block"></view>
</view>
......@@ -67,49 +86,170 @@
<view class="box flex">
<view class="price">
<text class="f11"></text>
<text>3000</text>
<text>{{orderData.Unit_Price*order.BuyNum}}</text>
</view>
<view class="sum-detail">共计 5</view>
<u-button :ripple="true" :hair-line="false" :custom-style="btnStyle">立即购买</u-button>
<view class="sum-detail">共计 {{order.BuyNum}}</view>
<u-button :ripple="true" :hair-line="false" :custom-style="btnStyle" @click="buy">立即购买</u-button>
</view>
</view>
</view>
</template>
<script>
export default{
export default {
data() {
return {
order: {
roomCount:1,
userName:''
PeopleNumber: 1,
BuyNum: 1,
Consignee:"",
ConsigneeMobile:"",
BuyerMessage:"",
Sex:1,
},
btnStyle:{
height:"80rpx",
lineHeight:"80rpx",
borderRadius:"16rpx",
background:"#111",
color:"#FFF",
fontSize:"28rpx",
fontWeight:"600",
width:'193rpx',
}
btnStyle: {
height: "80rpx",
lineHeight: "80rpx",
borderRadius: "16rpx",
background: "#111",
color: "#FFF",
fontSize: "28rpx",
fontWeight: "600",
width: '193rpx',
},
orderData: {},
orderInfo:{}
}
},
created() {
uni.setNavigationBarTitle({
title: "九寨沟星宇国际大酒店",
title: "订单填写",
});
},
methods:{
PeopleNumberChange(val){
this.order.PeopleNumber=val.value
},
BuyNumChange(val){
this.order.BuyNum=val.value
},
buy(){
if(!this.order.Consignee){
uni.showToast({
title: "请填写联系人",
icon: "none",
});
return
}
if(!this.order.ConsigneeMobile){
uni.showToast({
title: "请填写联系人电话",
icon: "none",
});
return
}
let data={
MealId:this.orderData.MealId,
DiningId:this.orderData.DiningId,
Unit_Price:this.orderData.Unit_Price,
Date:this.orderData.date,
PeopleNumber:this.order.PeopleNumber,
Final_Price:this.orderData.Unit_Price*this.order.BuyNum,
BuyerMessage:this.order.BuyerMessage,
Consignee:this.order.Consignee,
ConsigneeMobile:this.order.ConsigneeMobile,
Sex:this.order.Sex,
BuyNum:this.order.BuyNum,
}
uni.showLoading({
title: '支付中...'
});
this.request2({
url: '/api/AppletDining/SetAppletDiningOrderInfo',
data: data
},
res => {
uni.hideLoading();
if(res.resultCode===1){
let that=this
uni.requestSubscribeMessage({
tmplIds: res.data.template_message_list,
complete(_res) {
that.queren(res.data.OrderId)
}
});
}
},
err=>{
uni.hideLoading();
}
);
},
queren(OrderId){
let url='/api/WeChatPay/GetDmcPayInfo'
let GoodsName = this.orderData.MealName
GoodsName = GoodsName.slice(0, 10)
this.request2({
url: url,
data: {
OrderId:OrderId,
GoodsName:GoodsName,
OrderPayType:1,
OpenId:uni.getStorageSync('mall_UserInfo').OpenId,
}
},
res => {
this.orderInfo = JSON.parse(res.data);
this.Pay()
}
);
},
Pay(){
let that=this;
uni.requestPayment({
provider: 'wxpay',
timeStamp: this.orderInfo.timeStamp,
nonceStr: this.orderInfo.nonceStr,
package: this.orderInfo.package,
signType: this.orderInfo.signType,
paySign: this.orderInfo.sign,
success: function(res) {
console.log('success', res);
uni.showToast({
title: "支付成功"
})
setTimeout(()=>{
uni.redirectTo({
url: '/pages/jiuzhai/allorderList'
});
}, 100 )
},
fail: function(err) {
console.log('fail:', err);
uni.showToast({
title: "支付失败"
})
}
});
},
},
onLoad(options) {
let obj = JSON.parse(decodeURIComponent(options.data))
this.orderData = obj
console.log("order", this.orderData)
// this.Final_Price=this.ticketdData.PeopleNumber*this.ticketdData.Unit_Price
},
}
</script>
<style>
.hotel-order{
.hotel-order {
color: #111111;
margin-bottom: 160rpx;
}
.opera-box{
.opera-box {
background-color: #FFF;
padding: 20rpx 45rpx 40rpx 45rpx;
position: fixed;
......@@ -118,7 +258,8 @@
right: 0;
z-index: 5;
}
.opera-box .box{
.opera-box .box {
height: 100rpx;
background: #FFFFFF;
box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
......@@ -127,69 +268,89 @@
align-items: center;
padding: 0 10rpx 0 36rpx;
}
.opera-box .box .price{
.opera-box .box .price {
font-size: 40rpx;
font-weight: 500;
color: #D91818;
margin-right: 20rpx;
line-height: 86rpx;
height: 100%;
}
.opera-box .box .sum-detail{
.opera-box .box .sum-detail {
font-size: 24rpx;
flex: 1;
font-weight: 500;
color: #6E6E6E;
}
.hotel-order .red{
color:#D91818 !important
.hotel-order .red {
color: #D91818 !important
}
.hotel-order .grey{
color:#6E6E6E !important
.hotel-order .grey {
color: #6E6E6E !important
}
.hotel-order .form{
.hotel-order .form {
margin-top: 60rpx;
padding:0 45rpx;
padding: 0 45rpx;
}
.hotel-order .form .form-items{
.hotel-order .form .form-items {
margin-bottom: 40rpx;
display: flex;
align-items: center;
padding-bottom: 36rpx;
border-bottom:1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
font-size: 28px;
font-weight: 500;
}
.hotel-order .form .form-items:last-child{
.hotel-order .form .form-items:last-child {
border-bottom: none;
}
.hotel-order .form .form-items .label{
.hotel-order .form .form-items .label {
white-space: nowrap;
text-align: justify ;
text-align-last: justify;
width: 115rpx;
font-size: 28rpx;
font-weight: 600;
margin-right: 60rpx;
flex-shrink: 0;
margin-right: 20rpx;
/* flex-shrink: 0; */
}
.hotel-order .form .form-items .val{
flex:1;
.hotel-order .form .form-items .val {
flex: 1;
}
.hotel-order .sheshi{
.hotel-order .sheshi {
margin-top: 50rpx;
}
.hotel-order .sheshi .she-title{
.hotel-order .sheshi .she-title {
font-size: 28rpx;
font-weight: 800;
}
.hotel-order .sheshi .she-content{
.hotel-order .sheshi .she-content {
margin-top: 24rpx;
}
.hotel-order .sheshi .she-content text{
.hotel-order .sheshi .she-content text {
font-size: 24rpx;
font-weight: 500;
color: #4A4A4A;
line-height: 40rpx;
margin-right: 24rpx;
}
.hotel-order .form .form-items .val input{
border:none;
.hotel-order .form .form-items .val input {
border: none;
padding: 0;
margin: 0;
outline: none;
......@@ -199,81 +360,97 @@
font-weight: 500;
width: 100%;
}
.hotel-order .king {
color: #DFBE6E !important;
}
.hotel-order .f12 {
font-size:24rpx !important;
font-size: 24rpx !important;
}
.f11 {
font-size:22rpx !important;
font-size: 22rpx !important;
}
.hotel-order .f14 {
font-size:28rpx !important;
font-size: 28rpx !important;
}
.hotel-order .regular {
font-weight: 500 !important;
}
.hotel-order .flex{
.hotel-order .flex {
display: flex;
align-items: center;
}
.hotel-order .empty-block{
.hotel-order .empty-block {
height: 20rpx;
background: #ECF1F4;
}
.hotel-order .flex-wrap{
.hotel-order .flex-wrap {
flex-wrap: wrap;
}
.hotel-order .o-head{
.hotel-order .o-head {
padding: 45rpx;
background: #FFFFFF;
box-shadow: 0px 2rpx 15rpx 0px rgba(76, 76, 76, 0.13);
border-radius: 0px 0px 60rpx 60rpx;
}
.hotel-order .o-head .o-timer{
.hotel-order .o-head .o-timer {
height: 100rpx;
background: #ECF1F4;
border-radius: 20rpx;
padding: 0 40rpx;
}
.hotel-order .o-head .o-timer .time-item{
.hotel-order .o-head .o-timer .time-item {
font-size: 32rpx;
font-weight: 800;
flex:1;
flex: 1;
}
.hotel-order .o-head .o-timer .time-item:last-child{
.hotel-order .o-head .o-timer .time-item:last-child {
text-align: right;
}
.hotel-order .o-head .o-timer .time-split{
.hotel-order .o-head .o-timer .time-split {
font-size: 24rpx;
font-weight: 400;
text-align: center;
}
.hotel-order .o-head .room-name{
.hotel-order .o-head .room-name {
font-size: 32rpx;
font-weight: bold;
margin-top: 40rpx;
margin-bottom: 10rpx;
}
.hotel-order .o-head .room-remark{
.hotel-order .o-head .room-remark {
font-size: 28rpx;
font-weight: 500;
padding-bottom:30rpx;
padding-bottom: 30rpx;
margin-bottom: 30rpx;
border-bottom: 1px solid #E7E7E7;
}
.hotel-order .o-head .rule{
.hotel-order .o-head .rule {
font-size: 22rpx;
font-weight: 500;
color: #6E6E6E;
margin-top: 18rpx;
}
.hotel-order .big-title {
position: relative;
}
.hotel-order .big-title::before {
display: block;
width: 71rpx;
......@@ -281,12 +458,13 @@
background: #DFBE6E;
border-radius: 4rpx;
content: ' ';
position: absolute;
left: 0;
bottom: 6rpx;
z-index: 1;
}
.hotel-order .big-title text {
font-size: 34rpx;
font-weight: bold;
......@@ -294,4 +472,9 @@
position: relative;
z-index: 2;
}
.Meal-date{
font-size: 24rpx;
font-family: PingFang SC;
color: #999999;
}
</style>
......@@ -100,7 +100,7 @@
</view>
<view>
<view class="no-data" v-if="details.mealList.length==0">
<view class="no-data" v-if="details.mealList.length===0">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/no-data.png" mode="aspectFit" class="no-data-img"></image>
<view class="zhanwu">
暂无数据
......
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