<template>
|
<view class="container-canteen" style="min-height: calc(100vh - 20rpx );">
|
|
<view class="canteen-items" style="min-height: calc(100vh - 360rpx);">
|
<view v-if="(!list||list.length==0)&&true" style="width: 100%;min-height: 200rpx;">
|
|
</view>
|
<no-data v-if="(!list||list.length==0)&&true" style="width: 100%;margin-top: 220rpx;"></no-data>
|
<view class="" style="display: flex;flex-wrap: inherit;" v-else>
|
<view class="type-list">
|
<view v-for="(item,index) of types" @click="changeType(item)"
|
:class="[query.typeId==item.id?'current':'']" :key="index" class="p10 flex type-item">
|
{{item.name || '-'}}
|
</view>
|
</view>
|
<view class="canteen-item-container">
|
<view v-for="(item,index) of listFilter" :key="item.id" class="p10 canteen-item list"
|
style="display: flex;flex-wrap: inherit;">
|
<view class="m-r-10">
|
<image :src="item.cover" mode="scaleToFill" class="cover" @click="previewImg(item.cover)">
|
</image>
|
</view>
|
<view class="cateen_infos list">
|
<view class="title">{{item.name}}</view>
|
<view class="desc">月售:{{item.monthSale || '0'}}</view>
|
<view class="flex bottom-buttons flex">
|
<view class="price flex">
|
<view class="icon">￥</view>
|
<view class='num'>{{item.price || '-'}}</view>
|
</view>
|
<view class="icons flex">
|
<uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
|
@click="mulnum(item)"></uni-icons>
|
<view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>
|
<uni-icons type="plus-filled" size="32" @click="addnum(item)"></uni-icons>
|
</view>
|
</view>
|
</view>
|
<view style="padding-bottom:100rpx">
|
</view>
|
</view>
|
|
<footer-msg v-if="query.block&&query.schoolArea"
|
:more="page.total>0&&page.total>page.current*page.size"></footer-msg>
|
|
</view>
|
</view>
|
|
</view>
|
|
|
|
<view style="min-height:200rpx">
|
</view>
|
<common-footer flg="1"></common-footer>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex'
|
export default {
|
data() {
|
return {
|
list: [],
|
showpop: false,
|
query: {
|
name: '',
|
// status:'',
|
schoolArea: '',
|
schoolAreaStr: '',
|
block: '',
|
blockStr: '',
|
typeId: '',
|
},
|
types: [{
|
name: '全部',
|
id: ''
|
}],
|
schools: [],
|
schoolIndex: -1,
|
blockIndex: -1,
|
blocks: [],
|
shoptotal: 0,
|
cal: 0,
|
}
|
},
|
async onLoad() {
|
// this.list = [{
|
// 'shopnum': 0
|
// }, {
|
// 'shopnum': 1
|
// }]
|
|
//加载分类
|
this.$http.request('get', '/api/canteen/goods/type/list', {
|
params: {
|
size: 100
|
}
|
}).then(async res => {
|
if (res.code == 0) {
|
this.types = res.data && res.data.records || []
|
this.types.unshift({
|
name: '全部',
|
id: ''
|
});
|
|
}
|
})
|
|
this.listApi = '/api/canteen/customer/goods/list'
|
|
// this.getList()
|
//加载校区、楼栋
|
this.$http.request('get', '/api/school/area/list', {
|
|
}).then(async res => {
|
if (res.code == 0) {
|
this.schools = res.data || []
|
// this.schools = [{
|
// 'name': '全部',
|
// 'id': '',
|
// }]
|
// for (var item of arr) {
|
// this.schools.push(item)
|
// }
|
}
|
console.log('schools', this.schools)
|
var schoolIndex = uni.getStorageSync('schoolIndex')
|
if (!schoolIndex && schoolIndex !== 0) {
|
// await this.getList()
|
// this.list.forEach(item => {
|
// if (!item.shopnum) {
|
// item.shopnum = 0
|
// }
|
// })
|
} else {
|
this.schoolIndex = schoolIndex
|
if (this.schoolIndex >= 0) {
|
this.PickerChangeSchool({
|
detail: {
|
value: this.schoolIndex
|
}
|
})
|
// await this.getList()
|
// this.list.forEach(item => {
|
// if (!item.shopnum) {
|
// item.shopnum = 0
|
// }
|
// })
|
}
|
}
|
|
})
|
|
|
},
|
methods: {
|
changeType(item) {
|
this.query.typeId = item.id || ''
|
},
|
async PickerChangeSchool(e) {
|
if (e.detail.value == '-1') {
|
this.$message.showToast('未选择校区')
|
return
|
}
|
this.schoolIndex = parseInt(e.detail.value)
|
this.query.schoolArea = this.schools[this.schoolIndex].id
|
this.blockIndex = -1
|
|
this.$message.showLoading()
|
var {
|
data
|
} = await this.$http.request('get', '/api/school/block/list', {
|
params: {
|
schoolArea: this.query.schoolArea,
|
size: 200
|
}
|
})
|
|
this.blocks = data && data.records || []
|
// var arr = data.records || []
|
// this.blocks = [{
|
// 'name': '全部',
|
// 'id': '',
|
// }]
|
// for (var item of arr) {
|
// this.blocks.push(item)
|
// }
|
this.$message.hideLoading()
|
if (this.blocks.length >= 1) {
|
this.query.block = this.blocks[0].id
|
this.query.blockStr = this.blocks[0].name
|
this.page.current = 1
|
this.blockIndex = 0
|
this.list = []
|
this.getList()
|
} else {
|
this.page.current = 1
|
this.list = []
|
}
|
|
|
|
},
|
async PickerChangeBlock(e) {
|
if (e.detail.value == '-1') {
|
this.$message.showToast('未选择楼栋')
|
return
|
}
|
this.blockIndex = parseInt(e.detail.value)
|
this.query.block = this.blocks[this.blockIndex].id
|
this.page.current = 1
|
// this.list = []
|
this.list = []
|
// this.getList()
|
await this.getList()
|
this.list.forEach(item => {
|
if (!item.shopnum) {
|
item.shopnum = 0
|
}
|
})
|
|
},
|
mulnum(item) {
|
if (item.shopnum > 0) {
|
item.shopnum -= 1
|
}
|
this.shoptotal -= 1
|
this.cal += 1
|
this.$forceUpdate()
|
|
},
|
addnum(item) {
|
// console.log('addnum', item)
|
if (item.shopnum) {
|
item.shopnum += 1
|
} else {
|
item.shopnum = 1
|
}
|
this.shoptotal += 1
|
this.cal += 1
|
this.$forceUpdate()
|
},
|
openShopDetail() {
|
// this.showpop = false
|
// this.$forceUpdate()
|
this.cal += 1
|
this.$refs.popup_shop_detail.open()
|
this.$nextTick(() => {
|
this.$refs.addressselect && this.$refs.addressselect.init()
|
})
|
},
|
closeShopDetail() {
|
// this.showpop = true
|
this.$refs.popup_shop_detail.close()
|
},
|
async submitGood() {
|
var values = []
|
for (var item of this.list) {
|
if (item.shopnum > 0) {
|
values.push({
|
id: item.id,
|
num: item.shopnum
|
})
|
}
|
}
|
//购买
|
if (!this.address.id) {
|
this.$message.showToast('请先选择收获地址')
|
return
|
}
|
|
await this.$message.confirm('确定购买吗?')
|
this.$message.showLoading()
|
const {
|
code,
|
data
|
} = await this.$http.request('post', '/api/canteen/customer/order', {
|
data: {
|
customerAddress: (this.address.schoolAreaStr || '') + (this.address.blockStr || '') + (
|
this
|
.address.room || '') + (this.address.address || ''),
|
customerTel: this.address.tel,
|
customer: this.address.name,
|
goodsList: values, //规格
|
}
|
})
|
|
this.$message.hideLoading()
|
if (code == 0) {
|
|
this.list.forEach(item => {
|
item.shopnum = 0
|
})
|
this.shoptotal = 0
|
this.cal += 1
|
this.$refs.popup_shop_detail.close()
|
this.$forceUpdate()
|
|
//todo，预支付
|
//深夜食堂的逻辑不太一样
|
if (true) {
|
const orderInfo = await this.$http.request('get', '/api/canteen/customer/payment/' + data
|
.orderId, {})
|
//支付准备
|
var info = orderInfo.data
|
let that = this
|
wx.requestPayment({
|
...info,
|
success(res) {
|
console.log('pay success', res)
|
uni.navigateTo({
|
url: '/pages/canteen/canteen-success/canteen-success'
|
})
|
},
|
fail(err) {
|
console.error('pay fail', err)
|
that.$message.showToast('支付失败')
|
}
|
})
|
} else {
|
uni.navigateTo({
|
url: '/pages/canteen/canteen-success/canteen-success'
|
})
|
}
|
|
|
}
|
}
|
},
|
computed: {
|
...mapState({
|
address: state => {
|
return state.defaultaddress || {}
|
},
|
}),
|
selectprices() {
|
var arr = 0
|
for (var item of this.list) {
|
if (item.shopnum > 0) {
|
// arr.push(item)
|
arr += (item.price >= 0 ? item.price : 0) * item.shopnum
|
}
|
}
|
if (this.cal > 0) {
|
return arr
|
|
}
|
return 0
|
},
|
selectgoods() {
|
var arr = []
|
for (var item of this.list) {
|
if (item.shopnum > 0) {
|
arr.push(item)
|
}
|
}
|
if (this.cal > 0) {
|
return arr
|
|
}
|
return arr
|
|
},
|
listFilter() {
|
if (this.query.typeId) {
|
var arr = []
|
if (this.list && this.list.length > 0) {
|
for (var item of this.list) {
|
if (item.typeId === this.query.typeId || item.type === this.query.typeId) {
|
arr.push(item)
|
}
|
}
|
}
|
return arr
|
} else {
|
return this.list
|
}
|
|
},
|
// shoptotal() {
|
// var a = 0
|
// for (var item of this.list) {
|
// a += item.shopnum || 0
|
// }
|
// console.log('shoptotal',a,this.list)
|
// return a
|
// }
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container-canteen {
|
background-color: #FFFFFF;
|
|
.type-list {
|
max-width: 178rpx;
|
width: 178rpx;
|
min-width: 178rpx;
|
background: #EEF7F5;
|
border-radius: 8rpx;
|
min-height: calc(100vh - 300rpx);
|
max-height: calc(100vh - 300rpx);
|
overflow-y: scroll;
|
margin-left: 30rpx;
|
|
.type-item {
|
text-align: center;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #000000;
|
line-height: 88rpx;
|
// padding-left: 30rpx;
|
// padding-right: 30rpx;
|
}
|
|
.type-item.current {
|
font-weight: 600;
|
font-size: 28rpx;
|
color: #04BA97;
|
}
|
}
|
|
.title-before-blue.green {
|
padding-left: 30rpx;
|
padding-bottom: 0rpx;
|
}
|
|
.title-before-blue:before {
|
color: #04BA97;
|
font-weight: 600;
|
min-width: 14rpx;
|
background: #04BA97;
|
border-radius: 8rpx;
|
display: inline-block;
|
}
|
|
.popup_shop_detail {
|
background: #FFFFFF;
|
// padding: 30rpx 0rpx;
|
padding-bottom: 30rpx;
|
|
.footer-shop {
|
margin: 0 auto;
|
margin-top: 46rpx;
|
}
|
|
.common-address-select {
|
margin-left: 20rpx;
|
margin-right: 20rpx;
|
}
|
|
.close-parent {
|
margin-right: 20rpx;
|
}
|
|
.canteen-items {
|
.canteen-item {
|
margin-left: 20rpx;
|
margin-right: 0rpx;
|
|
.cateen_infos {
|
width: 440rpx;
|
|
}
|
|
.cateen_infos.list {
|
max-width: 30 0rpx;
|
min-width: 200rpx;
|
}
|
}
|
}
|
}
|
|
.canteen-items {
|
// margin-left: 30rpx;
|
|
.canteen-item {
|
margin-left: 30rpx;
|
margin-right: 30rpx;
|
// width: 690rpx;
|
// max-width: 690rpx;
|
height: 206rpx;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
display: flex;
|
margin-bottom: 24rpx;
|
|
.cover {
|
width: 202rpx;
|
height: 202rpx;
|
}
|
|
.title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #000000;
|
line-height: 44rpx;
|
}
|
|
.desc {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #666666;
|
line-height: 34rpx;
|
}
|
|
.price {
|
|
font-size: 24rpx;
|
|
.icon {
|
line-height: 60rpx;
|
}
|
|
.num {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #000000;
|
// line-height: 50rpx;
|
}
|
}
|
|
.cateen_infos {
|
width: 400rpx;
|
position: relative;
|
}
|
|
.cateen_infos.list {
|
max-width: 300rpx;
|
min-width: 200rpx;
|
|
}
|
|
.bottom-buttons {
|
// width: 400rpx;
|
position: absolute;
|
bottom: 0rpx;
|
|
left: 0;
|
right: 0;
|
|
.icons {
|
margin-left: auto;
|
margin-right: 0;
|
|
.curnums {
|
line-height: 60rpx;
|
}
|
}
|
}
|
}
|
|
.canteen-item-container {
|
width: 100%;
|
min-height: 300rpx;
|
max-height: calc(100vh - 300rpx);
|
overflow-y: scroll;
|
}
|
|
.canteen-item.list {
|
margin-right: 0rpx;
|
flex: 1;
|
margin-bottom: 0rpx;
|
|
.cover {
|
width: 158rpx;
|
height: 158rpx;
|
}
|
}
|
}
|
|
.canteen-footer-shop {
|
position: absolute;
|
position: fixed;
|
left: 30rpx;
|
bottom: 30rpx;
|
}
|
|
.area-select {
|
.area {
|
|
margin-right: 0rpx;
|
|
.t {
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #000000;
|
line-height: 44rpx;
|
}
|
|
.i {}
|
}
|
|
.area-1 {
|
margin-left: auto;
|
}
|
|
.area-2 {
|
margin-left: 84rpx;
|
}
|
}
|
|
.canteen-banner {
|
width: 750rpx;
|
min-height: 360rpx;
|
}
|
}
|
</style>
|
