bonus
/
hz-zhhq-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
hz-zhhq-app/pages/work-tool/work-tool.vue

507 lines
12 KiB
Vue
Raw Blame History

<template>
<view class="container">
<view class="main">
<view class="classify-box">
<view class="classify-item" :class="chooseClassifyIndex == index ? 'active' : ''" v-for="(item, index) in kinds" :key="index" @click="kindClick(index)">
<text>{{item.name}}</text>
</view>
</view>
<view class="food-list" v-if="foodList.length > 0">
<view class="list-item" v-for="(item,index) in foodList" :key="index">
<view class="img-box">
<image :src="item.picture" mode=""></image>
</view>
<view class="fr-content">
<view class="name">{{item.food_name}}</view>
<view class="num">剩余{{item.no_buy_num}}{{item.company}}</view>
<view class="quota-num">
<view class="buy-num" v-if="item.quota > 0">限申请{{item.quota}}{{item.company}}</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>
<!-- <image v-if="item.buyNum < item.quota && item.buyNum < item.no_buy_num" @click="addItem(item)" src="/static/icons/jia.png" mode=""></image>
<image v-else src="/static/icons/no-jia.png" mode=""></image> -->
</view>
<!-- <view class="price">&yen;{{item.price}}/{{item.company}}</view> -->
</view>
</view>
</view>
<content-none v-else :padTop="30"></content-none>
</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>&yen;{{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}}{{item.company}}</view>
<view class="quota-num">
<view class="buy-num" v-if="item.quota > 0">限申请{{item.quota}}{{item.company}}</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">&yen;{{item.price}}/{{item.unit}}</view> -->
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {commodityList,submitOrder} 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,//是否显示弹窗
kinds : [
{
id:'1',
name: '文件管理',
},
{
id:'2',
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:""
}
},
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.getList()
},
methods: {
getList(){
// let data = {
// "method": commodityList,
// data:{userId:this.userId,locationId:3}
// }
// callbackRequest(data)
// .then(res => {
// if(res.data.returnCode == 1){
// let result = res.data.returnData;
// this.foodListAll = result.locationDec;
// this.kindClick(this.chooseClassifyIndex);
// }
// })
this.kindClick(this.chooseClassifyIndex);
},
//切换分类
kindClick(index){
this.chooseClassifyIndex = index;
if(index == 0){
this.foodList = [{food_name:'文件夹',picture:'http://47.99.190.179:80/appImageDir/1.jpg',quota:1,no_buy_num:20,company:'个'},
{food_name:'档案盒',picture:'http://47.99.190.179:80/appImageDir/2.jpg',quota:1,no_buy_num:20,company:'个'}];
}else if(index == 1){
this.foodList = [{food_name:'计算器',picture:'http://47.99.190.179:80/appImageDir/3.jpg',quota:1,no_buy_num:20,company:'个'},
{food_name:'订书机',picture:'http://47.99.190.179:80/appImageDir/4.jpg',quota:1,no_buy_num:20,company:'个'}];
}else if(index == 2){
this.foodList = this.foodListAll.coldDishList || [];
}else if(index == 3){
this.foodList = this.foodListAll.hotDishList || [];
}else if(index == 4){
this.foodList = this.foodListAll.vegetablesList || [];
}else if(index == 5){
this.foodList = this.foodListAll.mainFoodList || [];
}
},
//点击日期
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(){
uni.navigateTo({
url:'/pages/work-tool/work-list'
})
},
onNavigationBarButtonTap : function(){
uni.navigateTo({
url: '../order-form/order-form'
})
},
chooseDate(e){
this.takeFoodTime = e.time;
}
}
}
</script>
<style lang="scss">
@import '@/static/css/common.scss';
.container{
position:relative;
min-height:100vh;
}
.head-box{
// position:fixed;
top:0;
left:0;
width:100%;
.scroll-view{
white-space: nowrap;
width:100%;
height:90upx;
.time-item{
padding:0 10upx;
margin:0 16upx;
display:inline-block;
.time{
display:block;
width:100%;
font-size:28upx;
color:#666;
}
.week{
display:block;
width:100%;
font-size:28upx;
color:#666;
}
}
.active{
.time{
color:#00c277;
}
.week{
color:#00c277;
}
}
}
.form-box{
padding:20upx 30upx 0upx;
margin-bottom: 20upx;
background: #fff;
.form-item{
overflow:hidden;
border-bottom:1px solid #eee;
padding:30upx 0;
.label{
float:left;
width:150upx;
font-size:28upx;
color:#333;
font-weight:bold;
line-height:50upx;
}
.ipt-box{
margin-left:160upx;
input{
width:100%;
height:50upx;
line-height:50upx;
font-size:26upx;
color:#666;
}
.pic{
width:60upx;
height:60upx;
line-height: 80upx;
}
}
.select{
.arrow{
float:right;
width:16upx;
height:29upx;
margin-top:10upx;
}
input{
width:70%;
}
}
.jian{
width: 50upx;
height:50upx;
margin-left: 280upx;
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
}
}
}
.main{
// border-top:10upx solid #f8f8f8;
overflow: hidden;
position:absolute;
top:0upx;
left:0;
bottom:80upx;
width:100%;
.classify-box{
float:left;
width:150upx;
height:100%;
background: #eee;
overflow:auto;
.classify-item{
padding:30upx 0;
line-height:40upx;
text-align:center;
text{
font-size:26upx;
color:#666;
}
}
.active{
background: #fff;
text:{
color:#00c277;
}
}
}
}
.food-list {
margin-left:150upx;
height:100%;
overflow:auto;
background: #fff;
.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;
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink