993 lines
20 KiB
Vue
993 lines
20 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="titleWrap">后勤保障服务清单与能力需求</view>
|
||
<view class="main">
|
||
<view>
|
||
<view class="cont">
|
||
<view class="classify-box">
|
||
<view class="classify-item" :class="chooseClassifyIndex == index ? 'active' : ''" v-for="(item, index) in kinds" :key="index">
|
||
<text class="mainSelector" @click="kindClick(index)">{{ item.name }}</text>
|
||
<view v-if="chooseClassifyIndex == index" v-for="(subItem,subIndex) in item.subSelectorList" class="subSelector"
|
||
:class="chooseClassifyIndex == index&& chooseSubSelectorIndex==subIndex ? 'subActive' : ''" @click="subItemClick(subIndex)">{{subItem.name}}</view>
|
||
<!-- <view v-if="chooseClassifyIndex == index" class="subSelector">会议管理</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="food-list">
|
||
<view class="barber">
|
||
<view class="barber-item" v-for="(item, index) in pros" :key="index" @click="chooseWorker(item.id, item.name)">
|
||
<text class="round" :class="chooseWorkerId == item.id ? 'barberactive' : ''"></text>
|
||
<text class="input_left">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="uni-list">
|
||
<checkbox-group style="word-break: keep-all;" @change="checkboxChange">
|
||
|
||
<label class="produnctionWrap" v-for="item in items" :key="item.value">
|
||
<checkbox class="productionCheckbox" :value="item.value" :checked="item.checked==1?true:false" />{{item.name}}
|
||
</label>
|
||
|
||
</checkbox-group>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<!-- <view class="footer-box " v-if="chooseFoodList.length == 0">
|
||
<image class="notCheck" src="../../static/food/notCheck.png" mode="widthFix"></image>
|
||
<text>未选购服务</text>
|
||
</view>
|
||
<view class="pay-box" v-else>
|
||
<view class="fr-btn" @click="submit">提交订单</view>
|
||
<view class="fl-box" @click="showAlert = true">
|
||
<image class="notCheck" src="../../static/icons/carChecked.png" mode="widthFix"></image>
|
||
<text>¥{{ totalPrice }}（{{ totalNum }}）</text>
|
||
</view>
|
||
</view>
|
||
<view class="common-shade" v-if="chooseFoodList.length > 0 && showAlert" @click="showAlert = false">
|
||
<view class="list-box food-list" @click.stop="">
|
||
<view class="list-item" v-for="(item, index) in chooseFoodList" :key="index">
|
||
<view class="img-box"><image :src="item.picture" mode=""></image></view>
|
||
<view class="fr-content">
|
||
<view class="name">{{ item.name }}</view>
|
||
<view class="num">剩余{{ item.no_buy_num }}份</view>
|
||
<view class="quota-num">
|
||
<view class="buy-num" v-if="item.quota > 0">限购{{ item.quota }}份</view>
|
||
</view>
|
||
<view class="choose-num">
|
||
<image v-if="item.buyNum > 0" @click="removeItem(item)" src="/static/icons/jian.png" mode=""></image>
|
||
<text v-if="item.buyNum > 0">{{ item.buyNum }}</text>
|
||
<image v-if="(item.quota > 0 && item.buyNum >= item.quota) || item.buyNum >= item.no_buy_num" src="/static/icons/no-jia.png" mode=""></image>
|
||
<image v-else @click="addItem(item)" src="/static/icons/jia.png" mode=""></image>
|
||
</view>
|
||
<view class="price">¥{{ item.price }}/{{ item.unit }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { commodityList, submitOrder,getCatagoryList,getProductionList } from '@/common/api.js';
|
||
import { callbackRequest, alertTip, sureAlterTip, getStorage } from '@/common/util.js';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
import datetimePicker from '@/components/dateTime.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
dataActive: 0,
|
||
chooseClassifyIndex: 0, //选中的菜单下标
|
||
showAlert: false, //是否显示弹窗
|
||
|
||
chooseSubSelectorIndex: 0,//选中子菜单下标
|
||
catagoryId:100101,//被选中的类别id
|
||
kinds: [
|
||
{
|
||
id: '1',
|
||
name: '通行',
|
||
subSelectorList:[
|
||
{
|
||
id:'1001',
|
||
name:'访客管理',
|
||
levelList:[
|
||
{
|
||
id:'100104',
|
||
value:'100104',
|
||
name:'不选'
|
||
},
|
||
{
|
||
id:'100101',
|
||
value:'100101',
|
||
name:'低配'
|
||
},
|
||
{
|
||
id:'100102',
|
||
value:'100102',
|
||
name:'中配'
|
||
},
|
||
{
|
||
id:'100103',
|
||
value:'100103',
|
||
name:'高配'
|
||
},
|
||
]
|
||
},
|
||
{
|
||
id:'1002',
|
||
name:'会议管理',
|
||
levelList:[
|
||
// {
|
||
// id:'100204',
|
||
// value:'100204',
|
||
// name:'不选'
|
||
// },
|
||
{
|
||
id:'100201',
|
||
value:'100201',
|
||
name:'低配'
|
||
},
|
||
{
|
||
id:'100202',
|
||
value:'100202',
|
||
name:'中配'
|
||
},
|
||
{
|
||
id:'100203',
|
||
value:'100203',
|
||
name:'高配'
|
||
},
|
||
]
|
||
},
|
||
]
|
||
},
|
||
{
|
||
id: '2',
|
||
name: '办公',
|
||
subSelectorList:[
|
||
{
|
||
id:'2001',
|
||
name:'访客管理1',
|
||
levelList:[
|
||
{
|
||
id:'200104',
|
||
value:'200204',
|
||
name:'不选'
|
||
},
|
||
{
|
||
id:'200101',
|
||
value:'200201',
|
||
name:'低配'
|
||
},
|
||
{
|
||
id:'200102',
|
||
value:'200102',
|
||
name:'中配'
|
||
},
|
||
{
|
||
id:'200103',
|
||
value:'200103',
|
||
name:'高配'
|
||
},
|
||
]
|
||
},
|
||
{
|
||
id:'2002',
|
||
name:'会议管理1',
|
||
levelList:[
|
||
{
|
||
id:'200204',
|
||
value:'200204',
|
||
name:'不选'
|
||
},
|
||
{
|
||
id:'200201',
|
||
value:'200201',
|
||
name:'低配'
|
||
},
|
||
{
|
||
id:'200202',
|
||
value:'200202',
|
||
name:'中配'
|
||
},
|
||
// {
|
||
// id:'200203',
|
||
// value:'200203',
|
||
// name:'高配'
|
||
// },
|
||
]
|
||
},
|
||
]
|
||
},
|
||
// {
|
||
// id: '3',
|
||
// name: '凉菜'
|
||
// },
|
||
// {
|
||
// id: '4',
|
||
// name: '热菜'
|
||
// },
|
||
// {
|
||
// id: '5',
|
||
// name: '蔬菜'
|
||
// },
|
||
// {
|
||
// id: '6',
|
||
// name: '主食'
|
||
// }
|
||
],
|
||
date: [
|
||
{ tiems: '12-13', week: '星期五' },
|
||
{ tiems: '12-14', week: '星期六' },
|
||
{ tiems: '12-15', week: '星期日' },
|
||
{ tiems: '12-16', week: '星期一' },
|
||
{ tiems: '12-17', week: '星期二' },
|
||
{ tiems: '12-18', week: '星期三' },
|
||
{ tiems: '12-19', week: '星期四' },
|
||
{ tiems: '12-20', week: '星期五' },
|
||
{ tiems: '12-21', week: '星期六' },
|
||
{ tiems: '12-22', week: '星期日' },
|
||
{ tiems: '12-23', week: '星期一' },
|
||
{ tiems: '12-24', week: '星期二' }
|
||
],
|
||
foodList: [],
|
||
chooseFoodList: [], //选中的食品列表
|
||
foodListAll: {}, //所有商品
|
||
userId: getStorage('userInfo').id,
|
||
takeFoodTime: '',
|
||
currentTabIndex: 0,
|
||
orderList: [
|
||
{
|
||
userName: '刘晓明',
|
||
status: 1,
|
||
order_time: '2020-01-10 09:00',
|
||
price: 100,
|
||
foodList: [
|
||
{
|
||
price: '20',
|
||
company: '斤',
|
||
picture: 'http://47.99.190.179:80/appImageDir/a68b13fe0bcf4ee1992ee32623055639.jpg',
|
||
food_name: '猪蹄',
|
||
count: 2
|
||
},
|
||
{
|
||
price: '30',
|
||
company: '份',
|
||
picture: 'http://47.99.190.179:80/appImageDir/42d0a21e68804c398ca3abb4bdc20314.jpg',
|
||
food_name: '鱿鱼圈',
|
||
count: 2
|
||
}
|
||
]
|
||
}
|
||
], //订单列表
|
||
chooseWorkerId: 1, //选择的项目
|
||
chooseWorkerName: '', //选择的项目名称
|
||
pros: [{ id: 0, name: '不选' },{ id: 1, name: '低配' }, { id: 2, name: '中配' }, { id: 3, name: '高配' }], //类型
|
||
items: [ {
|
||
value: 'USA',
|
||
name: '实名认证'
|
||
},
|
||
{
|
||
value: 'CHN',
|
||
name: '自助登记',
|
||
checked: 'true'
|
||
},
|
||
{
|
||
value: 'BRA',
|
||
name: '大屏播报'
|
||
},
|
||
{
|
||
value: 'USA1',
|
||
name: '实名认证1'
|
||
},
|
||
{
|
||
value: 'USA2',
|
||
name: '实名认证2'
|
||
},
|
||
],
|
||
|
||
};
|
||
},
|
||
components: {
|
||
contentNone,
|
||
datetimePicker
|
||
},
|
||
computed: {
|
||
|
||
totalPrice() {
|
||
let totalPrice = 0;
|
||
this.chooseFoodList.forEach((v, i) => {
|
||
let itemTotalPrice = v.price * v.buyNum;
|
||
totalPrice += itemTotalPrice;
|
||
});
|
||
return totalPrice;
|
||
},
|
||
totalNum() {
|
||
let totalNum = 0;
|
||
this.chooseFoodList.forEach((v, i) => {
|
||
totalNum += v.buyNum;
|
||
});
|
||
return totalNum;
|
||
}
|
||
},
|
||
onShow() {
|
||
this.chooseFoodList = [];
|
||
this.getCatagoryList();
|
||
},
|
||
methods: {
|
||
getCatagoryList(){
|
||
let data = {
|
||
method: getCatagoryList,
|
||
data: { userId: this.userId }
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
let result = res.data.returnData;
|
||
this.kinds = result.list;
|
||
console.log(this.kinds);
|
||
this.subItemClick(this.chooseSubSelectorIndex)
|
||
}
|
||
});
|
||
},
|
||
//根据类别id展示产品列表
|
||
getProductionList(){
|
||
let data = {
|
||
method: getProductionList,
|
||
data: { userId: this.userId,catagoryId:this.catagoryId }
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
let result = res.data.returnData;
|
||
this.items = result.list;
|
||
console.log(this.items);
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
checkboxChange(){
|
||
|
||
},
|
||
//切换分类
|
||
kindClick(index) {
|
||
this.chooseClassifyIndex = index;
|
||
this.chooseSubSelectorIndex = 0;
|
||
this.subItemClick(this.chooseSubSelectorIndex)
|
||
},
|
||
subItemClick(index){
|
||
this.chooseSubSelectorIndex = index;
|
||
this.pros = this.kinds[this.chooseClassifyIndex].subSelectorList[this.chooseSubSelectorIndex].levelList||[];
|
||
|
||
if(this.pros.length > 0){
|
||
this.chooseWorkerId = this.pros[0].id;
|
||
this.chooseWorkerName = this.pros[0].name;
|
||
this.chooseWorker(this.chooseWorkerId,this.chooseWorkerName);
|
||
}
|
||
|
||
},
|
||
//选择配置
|
||
chooseWorker(id, name) {
|
||
if (this.chooseWorkerId != id) {
|
||
this.chooseWorkerId = id;
|
||
this.chooseWorkerName = name;
|
||
}
|
||
this.catagoryId = id;
|
||
this.getProductionList();
|
||
},
|
||
//点击日期
|
||
switchTab(i) {
|
||
this.dataActive = i;
|
||
},
|
||
//加入购物车 || 购物车商品数量 加1
|
||
addItem(item) {
|
||
if (this.chooseFoodList.length == 0) {
|
||
this.$set(item, 'buyNum', 1);
|
||
this.chooseFoodList.push(item);
|
||
return false;
|
||
} else {
|
||
let boolean = this.chooseFoodList.every(function(value) {
|
||
return value.id != item.id;
|
||
});
|
||
console.log(boolean);
|
||
if (boolean) {
|
||
this.$set(item, 'buyNum', 1);
|
||
this.chooseFoodList.push(item);
|
||
} else {
|
||
item.buyNum++;
|
||
}
|
||
}
|
||
},
|
||
//购物车商品数量 减1
|
||
removeItem(item) {
|
||
// this.$set(item,item.buyNum --);
|
||
item.buyNum--;
|
||
if (item.buyNum == 0) {
|
||
this.chooseFoodList.forEach((v, i) => {
|
||
if (v.id == item.id) {
|
||
this.chooseFoodList.splice(i, 1);
|
||
if (this.chooseFoodList.length == 0) {
|
||
this.showAlert = false;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
submit() {
|
||
let arr = [];
|
||
this.chooseFoodList.forEach((v, i) => {
|
||
let item = {
|
||
goodsId: v.kinds_id,
|
||
goodsNum: v.buyNum
|
||
};
|
||
arr.push(item);
|
||
});
|
||
let data = {
|
||
method: submitOrder,
|
||
data: {
|
||
userId: this.userId,
|
||
diningRoomId: 3,
|
||
takeFoodTime: this.takeFoodTime,
|
||
orderDetails: arr
|
||
}
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
if (res.data.returnCode == 1) {
|
||
alertTip('预定成功');
|
||
setTimeout(function() {
|
||
uni.navigateTo({
|
||
url: '/pages/order-form/order-form'
|
||
});
|
||
}, 1500);
|
||
} else {
|
||
alertTip(res.data.returnMsg);
|
||
}
|
||
});
|
||
},
|
||
onNavigationBarButtonTap: function() {
|
||
uni.navigateTo({
|
||
url: '../order-form/order-form'
|
||
});
|
||
},
|
||
chooseDate(e) {
|
||
this.takeFoodTime = e.time;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
|
||
uni-checkbox-group uni-label{
|
||
width: 33% !important;
|
||
display: inline-flex;
|
||
padding:20upx;
|
||
line-height: 46upx;
|
||
}
|
||
.container {
|
||
min-height: 100vh;
|
||
overflow: hidden;
|
||
background: #f8f8f8;
|
||
|
||
.titleWrap{
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 36upx;
|
||
padding:20upx 0upx;
|
||
border-bottom: solid #CFCFCF 1px;
|
||
}
|
||
.banner-box {
|
||
width: 100%;
|
||
height: 240upx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
border-radius: 30upx;
|
||
}
|
||
.my-code {
|
||
background: #fff;
|
||
padding-top: 80rpx;
|
||
.code-box {
|
||
background: #fff;
|
||
overflow: hidden;
|
||
.code-img {
|
||
display: block;
|
||
width: 350rpx;
|
||
height: 350rpx;
|
||
margin: 70rpx auto 100rpx;
|
||
}
|
||
}
|
||
.money {
|
||
height: 60rpx;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.tip {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 40rpx;
|
||
padding: 0 0 30rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.uni-list {
|
||
background: #fff;
|
||
.list-item {
|
||
border-bottom: 10upx solid #f8f8f8;
|
||
padding: 30upx 20upx;
|
||
.content {
|
||
overflow: hidden;
|
||
.image-box {
|
||
float: left;
|
||
width: 200upx;
|
||
height: 200upx;
|
||
image {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.fr-content {
|
||
margin-left: 220upx;
|
||
font-size: 26upx;
|
||
.text {
|
||
color: #666;
|
||
line-height: 40upx;
|
||
margin-bottom: 10upx;
|
||
text {
|
||
float: left;
|
||
color: #333;
|
||
padding-right: 10upx;
|
||
}
|
||
}
|
||
.status {
|
||
color: red;
|
||
margin-left: 280upx;
|
||
position: absolute;
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
overflow: hidden;
|
||
padding: 10upx 20upx 0;
|
||
.num-box {
|
||
float: left;
|
||
font-size: 28upx;
|
||
color: #333;
|
||
line-height: 40upx;
|
||
padding-top: 20upx;
|
||
text {
|
||
color: #5fbf3d;
|
||
padding-left: 4upx;
|
||
}
|
||
}
|
||
.vote-btn {
|
||
float: right;
|
||
width: 160upx;
|
||
height: 60upx;
|
||
background: #5fbf3d;
|
||
font-size: 26upx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 60upx;
|
||
border-radius: 4upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.raffle {
|
||
width: 600rpx;
|
||
height: 600rpx;
|
||
}
|
||
|
||
.main {
|
||
position: absolute;
|
||
// margin: 42upx 40upx 0;
|
||
width: 100%;
|
||
height:100%;
|
||
.cont {
|
||
// margin: 0px -44upx 0px -44upx;
|
||
}
|
||
.tab-box {
|
||
overflow: hidden;
|
||
border-radius: 10upx 10upx 0 0;
|
||
background: rgba(132, 149, 167, 0.8);
|
||
height: 70upx;
|
||
|
||
.tab-item {
|
||
float: left;
|
||
height: 70upx;
|
||
width: 50%;
|
||
font-size: 30upx;
|
||
color: #e5f6ff;
|
||
text-align: center;
|
||
line-height: 70upx;
|
||
}
|
||
|
||
.active_tab {
|
||
background: #fff;
|
||
color: #333;
|
||
border-radius: 10upx 10upx 0 0;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.tip {
|
||
font-size: 26upx;
|
||
text-align: center;
|
||
color: #00c277;
|
||
margin: 10upx;
|
||
}
|
||
.classify-box {
|
||
position: absolute;
|
||
height: 100%;
|
||
float: left;
|
||
width: 180upx;
|
||
height: 100%;
|
||
background: #eee;
|
||
overflow: auto;
|
||
.classify-item {
|
||
padding: 30upx 0;
|
||
line-height: 60upx;
|
||
text-align: left;
|
||
padding-left: 30upx;;
|
||
text {
|
||
font-size: 30upx;
|
||
color: #666;
|
||
}
|
||
.mainSelector{
|
||
padding-bottom:12upx;
|
||
color: black;
|
||
}
|
||
.subSelector{
|
||
font-size:26upx;
|
||
text-align: right;
|
||
padding:12upx;
|
||
}
|
||
}
|
||
.active {
|
||
background: #fff;
|
||
text: {
|
||
color: #00c277;
|
||
}
|
||
}
|
||
|
||
.subActive {
|
||
color: #007aff;
|
||
|
||
}
|
||
}
|
||
}
|
||
.food-list {
|
||
margin-left: 178upx;
|
||
height: 100%;
|
||
overflow: auto;
|
||
background: #fff;
|
||
.produnctionWrap{
|
||
font-size: 24upx;
|
||
|
||
}
|
||
.productionCheckbox{
|
||
transform:scale(0.7);
|
||
}
|
||
.barber {
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20upx 20upx;
|
||
height: 60upx;
|
||
border-bottom: 1px solid #eee;
|
||
margin: 10upx 10upx;
|
||
|
||
.barberactive {
|
||
background: #007aff !important;
|
||
}
|
||
|
||
.barber-item{
|
||
padding-right:30rpx;
|
||
line-height:40rpx;
|
||
|
||
|
||
.round {
|
||
width: 32upx;
|
||
height: 32upx;
|
||
border-radius: 50%;
|
||
background: #cccccc;
|
||
display: inline-block;
|
||
margin-right: 10upx;
|
||
vertical-align:middle;
|
||
border-radius: 32upx;
|
||
|
||
}
|
||
|
||
.input_left{
|
||
vertical-align: middle;
|
||
font-size:28rpx;
|
||
color:#555;
|
||
}
|
||
}
|
||
}
|
||
.list-item {
|
||
overflow: hidden;
|
||
padding: 20upx 14upx;
|
||
border-bottom: 1px solid #f8f8f8;
|
||
.img-box {
|
||
float: left;
|
||
width: 200upx;
|
||
height: 200upx;
|
||
image {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.fr-content {
|
||
margin-left: 220upx;
|
||
.name {
|
||
font-size: 30upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
@include overstepOne;
|
||
line-height: 40upx;
|
||
margin-bottom: 6upx;
|
||
}
|
||
.num {
|
||
font-size: 26upx;
|
||
color: #666;
|
||
line-height: 40upx;
|
||
margin-bottom: 6upx;
|
||
}
|
||
.quota-num {
|
||
min-height: 50rpx;
|
||
}
|
||
.buy-num {
|
||
display: inline-block;
|
||
border: 1px solid #ff0000;
|
||
font-size: 24upx;
|
||
color: #ff0000;
|
||
border-radius: 8upx;
|
||
line-height: 32upx;
|
||
padding: 0 10upx;
|
||
vertical-align: top;
|
||
}
|
||
.choose-num {
|
||
float: right;
|
||
image {
|
||
width: 40upx;
|
||
height: 40upx;
|
||
vertical-align: top;
|
||
}
|
||
text {
|
||
display: inline-block;
|
||
font-size: 28upx;
|
||
color: #666;
|
||
width: 80upx;
|
||
text-align: center;
|
||
line-height: 40upx;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
.price {
|
||
font-size: 32upx;
|
||
color: #ff0000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer-box {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 80upx;
|
||
background: #7ae5bc;
|
||
text-align: center;
|
||
line-height: 80upx;
|
||
image {
|
||
width: 50upx;
|
||
vertical-align: middle;
|
||
}
|
||
text {
|
||
font-size: 30upx;
|
||
color: #fff;
|
||
vertical-align: middle;
|
||
padding-left: 10upx;
|
||
}
|
||
}
|
||
.pay-box {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 80upx;
|
||
background: #fff;
|
||
line-height: 80upx;
|
||
.fl-box {
|
||
// display: inline-block;
|
||
// float:left;
|
||
padding: 10upx 0 0 30upx;
|
||
line-height: 60upx;
|
||
margin-right: 230rpx;
|
||
image {
|
||
width: 50upx;
|
||
vertical-align: middle;
|
||
margin: 6upx 24upx 0 0;
|
||
vertical-align: top;
|
||
}
|
||
text {
|
||
font-size: 28upx;
|
||
color: #00c277;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
.fr-btn {
|
||
float: right;
|
||
width: 200upx;
|
||
background: #00c277;
|
||
font-size: 28upx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 80upx;
|
||
}
|
||
}
|
||
.common-shade {
|
||
bottom: 80upx;
|
||
height: auto;
|
||
.list-box {
|
||
width: 100%;
|
||
height: 500upx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: #fff;
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
.food-list1 {
|
||
height: 100%;
|
||
overflow: auto;
|
||
background: #fff;
|
||
// margin: 15upx;
|
||
.main {
|
||
background: #ffffff;
|
||
margin: 10upx;
|
||
border-radius: 10upx;
|
||
.top {
|
||
border-bottom: 1px solid #eee;
|
||
padding: 20upx 30upx;
|
||
overflow: hidden;
|
||
.dining {
|
||
float: left;
|
||
font-size: 28upx;
|
||
line-height: 40upx;
|
||
color: #555;
|
||
}
|
||
.status {
|
||
float: right;
|
||
font-size: 24upx;
|
||
color: #00c277;
|
||
line-height: 40upx;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
padding: 5upx 5upx 0upx 5upx;
|
||
border-top: 1px solid #eee;
|
||
line-height: 50upx;
|
||
overflow: hidden;
|
||
.order-time {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
.price {
|
||
float: right;
|
||
font-size: 28upx;
|
||
color: #666;
|
||
.btn {
|
||
border: 1px solid #00C277;
|
||
border-radius: 10upx;
|
||
padding: 0upx 20upx ;
|
||
color:#00C277;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.list-item {
|
||
overflow: hidden;
|
||
padding: 10upx 10upx 0upx 5upx;
|
||
border-bottom: 1px solid #f8f8f8;
|
||
.img-box {
|
||
border-radius: 10upx;
|
||
float: left;
|
||
width: 200upx;
|
||
height: 200upx;
|
||
image {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
|
||
.fr-content {
|
||
margin-left: 220upx;
|
||
.name {
|
||
font-size: 30upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
@include overstepOne;
|
||
line-height: 40upx;
|
||
margin-bottom: 6upx;
|
||
}
|
||
.num {
|
||
font-size: 26upx;
|
||
color: #666;
|
||
line-height: 40upx;
|
||
margin-bottom: 6upx;
|
||
}
|
||
.quota-num {
|
||
min-height: 50rpx;
|
||
}
|
||
.buy-num {
|
||
display: inline-block;
|
||
border: 1px solid #ff0000;
|
||
font-size: 24upx;
|
||
color: #ff0000;
|
||
border-radius: 8upx;
|
||
line-height: 32upx;
|
||
padding: 0 10upx;
|
||
vertical-align: top;
|
||
}
|
||
.choose-num {
|
||
float: right;
|
||
image {
|
||
width: 40upx;
|
||
height: 40upx;
|
||
vertical-align: top;
|
||
}
|
||
text {
|
||
display: inline-block;
|
||
font-size: 28upx;
|
||
color: #666;
|
||
width: 80upx;
|
||
text-align: center;
|
||
line-height: 40upx;
|
||
vertical-align: top;
|
||
}
|
||
.fl {
|
||
float: right;
|
||
padding: 10upx 20upx;
|
||
font-size: 24upx;
|
||
color: $assistColor;
|
||
line-height: 32upx;
|
||
border: 1px solid $assistColor;
|
||
border-radius: 8upx;
|
||
margin-left: 10upx;
|
||
}
|
||
}
|
||
.price {
|
||
font-size: 32upx;
|
||
color: #ff0000;
|
||
margin-top: 116upx;
|
||
}
|
||
.ct {
|
||
margin-left: 20upx;
|
||
color: #ff00009c;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|