314 lines
6.5 KiB
Vue
314 lines
6.5 KiB
Vue
<template>
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|
<u-loading-page :loading="showLoading" loading-text="加载中..."></u-loading-page>
|
|
<view style="background-color: #fff;min-height: 95vh;">
|
|
<view class="top-bar">
|
|
<view style="font-size: 28rpx;font-weight: bold;">共{{collectData.length}}个菜品</view>
|
|
<view style="color: red;" @click="isShowBtn=!isShowBtn">管理</view>
|
|
</view>
|
|
<view class="dataInfo">
|
|
<view class="dataList" v-for="(item,index) in collectData" :key="index">
|
|
<checkbox-group @change="checkClick(item)" style="width: 30px;">
|
|
<checkbox :checked="item.checked" v-show="isShowBtn"/>
|
|
</checkbox-group>
|
|
<view class="details">
|
|
<view class="img">
|
|
<image :src="item.imageUrl"></image>
|
|
</view>
|
|
<view class="text">
|
|
<text style="font-weight: bold;font-size: 24rpx;">{{item.dishesName}}</text>
|
|
<text>月售：{{item.saleNum}}</text>
|
|
<text>￥{{ (item.price/100).toFixed(2) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="buy" v-show="isShowBtn">
|
|
<view class="checked">
|
|
<checkbox-group @tap="checkAll">
|
|
<checkbox :checked="allChecked" />
|
|
</checkbox-group>
|
|
<text>全选</text>
|
|
</view>
|
|
<view class="total">
|
|
<!-- {{ totalNum }} -->
|
|
<view class="bill" @click="confirm">
|
|
<text>删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
|
|
import { getCollectionDishesAPI,delCollectionDishesAPI } from "@/api/week-menu/index.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
fontValue:uni.getStorageSync('fontSize') || 8,
|
|
collectData:[],
|
|
allChecked: false,
|
|
isShowBtn:false,
|
|
confirmList:[],
|
|
list: [],
|
|
totalFine: '',
|
|
showLoading:false,
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getCollectData()
|
|
},
|
|
methods: {
|
|
async getCollectData() {
|
|
try {
|
|
this.showLoading=true
|
|
const res = await getCollectionDishesAPI({"userId":uni.getStorageSync('userId')})
|
|
console.log('?? ~ getList ~ res:', res)
|
|
this.collectData=res.rows;
|
|
this.collectData.forEach(item=>{
|
|
item.checked=false
|
|
})
|
|
this.showLoading=false
|
|
} catch (error) {
|
|
console.log(error)
|
|
this.showLoading=false
|
|
}
|
|
},
|
|
// 单个商品的选择
|
|
checkClick(item) {
|
|
item.checked = !item.checked
|
|
if (!item.checked) {
|
|
this.allChecked = false
|
|
} else {
|
|
// 判断每一个商品是否是被选择的状态
|
|
const goods = this.collectData.every(item => {
|
|
return item.checked === true
|
|
})
|
|
if (goods) {
|
|
this.allChecked = true
|
|
} else {
|
|
this.allChecked = false
|
|
}
|
|
}
|
|
},
|
|
checkAll() {
|
|
this.allChecked = !this.allChecked
|
|
if (this.allChecked) {
|
|
this.collectData.map(item => {
|
|
item.checked = true
|
|
})
|
|
} else {
|
|
this.collectData.map(item => {
|
|
item.checked = false
|
|
})
|
|
}
|
|
},
|
|
async confirm () {
|
|
let that = this
|
|
that.confirmList = that.collectData.filter((item) => {
|
|
return item.checked == true
|
|
})
|
|
console.log(this.confirmList);
|
|
if (that.confirmList.length == 0) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '请选择要删除的商品！'
|
|
})
|
|
} else {
|
|
console.log(that.confirmList)
|
|
let arr = that.confirmList.map(item=>item.dishesId)
|
|
console.log(arr)
|
|
let param = {
|
|
"dishesIds":arr,
|
|
// "userId":uni.getStorageSync('userId'),
|
|
// "shopstallId":this.menuData.stallId
|
|
}
|
|
const res = await delCollectionDishesAPI(param)
|
|
if(res.code==200){
|
|
// this.$modal.msgError("收藏成功")
|
|
uni.$u.toast('取消藏成功')
|
|
this.getCollectData()
|
|
this.allChecked = false
|
|
}
|
|
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.top-bar{
|
|
width: 95%;
|
|
margin: 0rpx auto;
|
|
padding-bottom: 20px;
|
|
display: flex;justify-content: space-between;
|
|
}
|
|
|
|
/deep/uni-checkbox .uni-checkbox-input {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
|
|
border-color: #ddd;
|
|
color: #fff !important;
|
|
background-color: #2DCF8C !important;
|
|
}
|
|
|
|
/deep/uni-checkbox .uni-checkbox-input {
|
|
border-color: #ddd;
|
|
}
|
|
|
|
/deep/uni-checkbox .uni-checkbox-input:hover {
|
|
border-color: #ddd;
|
|
}
|
|
|
|
.search {
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.search .searchIput {
|
|
background-color: #e6e6e6;
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
border-radius: 50rpx;
|
|
padding: 0 32rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.search .searchIput input {
|
|
font-size: 26rpx;
|
|
width: 100%;
|
|
color: grey;
|
|
}
|
|
|
|
.search .searchIput image {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
}
|
|
|
|
|
|
|
|
.dataInfo {
|
|
width: 95%;
|
|
height: 80vh;
|
|
overflow-y: auto;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.dataInfo .dataList {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 2px solid #F1F1F1;
|
|
padding: 25rpx 0;
|
|
}
|
|
|
|
.dataInfo .dataList .details {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
font-size: 0;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.dataInfo .dataList .details .img image {
|
|
width: 200rpx;
|
|
height: 140rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.dataInfo .dataList .details .text text {
|
|
color: #000;
|
|
font-size: 23rpx;
|
|
display: block;
|
|
padding: 10rpx 0;
|
|
}
|
|
|
|
.dataInfo .dataList .details .text {
|
|
color: red;
|
|
font-size: 25rpx;
|
|
}
|
|
|
|
.dataInfo .dataList .action text {
|
|
font-size: 25rpx;
|
|
color: #000;
|
|
border: 1px solid #C8C7CC;
|
|
display: inline-block;
|
|
line-height: 50rpx;
|
|
width: 60rpx;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dataInfo .dataList .action text:nth-child(2) {
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.buy {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 20px;
|
|
width: 95%;
|
|
transform: translate(-50%, 0);
|
|
background-color: #fff;
|
|
}
|
|
|
|
.buy .checked {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.buy .checked text {
|
|
font-size: 25rpx;
|
|
color: #000;
|
|
padding: 0 12rpx;
|
|
}
|
|
|
|
.buy .total {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.buy .total .price {
|
|
padding-right: 20rpx;
|
|
|
|
}
|
|
|
|
.buy .total .price text {
|
|
font-size: 27rpx;
|
|
color: #C8C7CC;
|
|
display: inline-block;
|
|
}
|
|
|
|
.buy .total .price text:last-child {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.buy .total .bill text {
|
|
font-size: 25rpx;
|
|
color: #fff;
|
|
display: inline-block;
|
|
/* background-color: red; */
|
|
border: 2rpx solid red;
|
|
border-radius: 10rpx;
|
|
color: red;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
width: 120rpx;
|
|
text-align: center;
|
|
margin: 20rpx;
|
|
}
|
|
</style> |