You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
556 lines
12 KiB
556 lines
12 KiB
<template>
|
|
<view class="bg">
|
|
<view class="guanli" v-if="list && list.length>0" @click="guanli">{{operate}}</view>
|
|
<view v-for="(item,index) in list" :key="index">
|
|
<view class="goodBox" v-if="item.data && item.data.length > 0 ">
|
|
<view class="title" v-if="item.data.some(v => v.flag == 1)">{{item.merchant_name}} ></view>
|
|
<view class="goodItem" v-for="(goodItem,goodIndex) in item.data" :key="goodIndex"
|
|
v-if="goodItem.flag != 0">
|
|
<view class="noSelect" v-if="!goodItem.is_select" @click="changeSelect(goodItem)"></view>
|
|
<view class="selectBox flex-around" v-else @click="changeSelect(goodItem)">
|
|
<img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png">
|
|
</view>
|
|
<image :src="showImg(goodItem.specifications_image)" mode="aspectFill"
|
|
@click="goDetails(goodItem.good_id)"></image>
|
|
<view class="contentBox">
|
|
<view class="title text-overflow">{{goodItem.good_name}}</view>
|
|
<view class="subTitle text-overflow">{{goodItem.Specifications_name}}</view>
|
|
<view class="priceBox flex-between">
|
|
<view class="price">{{goodItem.Specifications_money / 100}}</view>
|
|
<view class="flex-between" style="width: 165rpx;font-size: 29rpx;">
|
|
<view :class="['jian', goodItem.num == 1 ? 'zhihui' : '']" @click="delNum(goodItem)">-
|
|
</view>
|
|
<view>{{goodItem.num}}</view>
|
|
<view class="jia" @click="addNum(goodItem)">+</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="loseGood" v-if="loseList && loseList.length>0">
|
|
<view class="title flex-between">失效商品<span @click="delLoseGood('',1)">清空失效商品</span></view>
|
|
<view class="goodItem" v-for="(goodItem,goodIndex) in loseList" :key="goodIndex">
|
|
<view class="noSelect"></view>
|
|
<image :src="showImg(goodItem.specifications_image)" mode="aspectFill"></image>
|
|
<view class="contentBox">
|
|
<view class="title text-overflow">{{goodItem.good_name}}</view>
|
|
<view class="subTitle text-overflow">{{goodItem.Specifications_name}}</view>
|
|
<view class="priceBox flex-between">
|
|
<view class="price">{{goodItem.Specifications_money / 100}}</view>
|
|
<view class="btn" @click="delLoseGood(goodItem.id,0)">删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预定按钮 -->
|
|
<view class="orderBox flex-between">
|
|
<view class="priceBox">
|
|
<!-- <view class="selectBox flex-around" v-if="allSelect" @click="changeAllSelect">
|
|
<img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png" alt="">
|
|
</view>
|
|
<view class="noSelect" v-else @click="changeAllSelect"></view>全选 -->
|
|
<span v-if="operate == '管理'">在线付:</span>
|
|
<p v-if="operate == '管理'">￥{{getAllPrice()}}</p>
|
|
</view>
|
|
<view class="btn" @click="order" v-if="operate == '管理'">提交订单</view>
|
|
<view class="btn" @click="delGood" v-else>删除</view>
|
|
</view>
|
|
|
|
<view class="noProduct" v-if="list.length == 0 && loseList.length == 0">
|
|
暂无商品
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
operate: '管理',
|
|
list: [],
|
|
loseList: [],
|
|
allSelect: false,
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getShoppingList()
|
|
this.allSelect = false
|
|
},
|
|
methods: {
|
|
getShoppingList() {
|
|
this.Post({
|
|
is_post: 1,
|
|
// lon: this.$store.state.user.location.lon || '120.63132',
|
|
// lat: this.$store.state.user.location.lat || '31.30227'
|
|
}, '/api/shopping/getShoppingList').then(res => {
|
|
this.list = res.data.merchant
|
|
this.loseList = []
|
|
this.list.forEach(item => {
|
|
item.data.forEach(items => {
|
|
if (items.flag === 0) {
|
|
this.loseList.push(items)
|
|
}
|
|
|
|
})
|
|
})
|
|
console.log('打印', this.loseList);
|
|
})
|
|
},
|
|
// 管理
|
|
guanli() {
|
|
if (this.operate == '管理') {
|
|
this.operate = '退出管理'
|
|
} else {
|
|
this.operate = '管理'
|
|
}
|
|
console.log(this.operate)
|
|
},
|
|
delNum(item) {
|
|
if (item.num <= 1) {
|
|
item.num = 1
|
|
uni.showToast({
|
|
title: '已经最少了，不能再减了',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
item.num -= 1
|
|
this.updateCart(item)
|
|
}
|
|
},
|
|
addNum(item) {
|
|
item.num += 1
|
|
this.updateCart(item)
|
|
},
|
|
updateCart(item) {
|
|
let that = this
|
|
that.Post({
|
|
s_id: item.id,
|
|
num: item.num
|
|
}, '/api/shopping/updateShopping').then(function(res) {
|
|
if (res) {
|
|
// that.$toast.clear()
|
|
}
|
|
})
|
|
},
|
|
// 更改选中状态
|
|
changeSelect(item) {
|
|
item.is_select = !item.is_select
|
|
this.list.forEach(item => {
|
|
let checkAll = item.data.findIndex(items => {
|
|
return !items.is_select
|
|
})
|
|
if (checkAll == -1) {
|
|
this.allSelect = true
|
|
} else {
|
|
this.allSelect = false
|
|
}
|
|
})
|
|
this.$forceUpdate()
|
|
},
|
|
// 去商品详情
|
|
goDetails(id) {
|
|
uni.navigateTo({
|
|
url: '/subPackages/techan/detail?id=' + id
|
|
});
|
|
},
|
|
// 改变所有选中
|
|
changeAllSelect() {
|
|
this.allSelect = !this.allSelect
|
|
this.list.forEach(item => {
|
|
item.data.forEach(items => {
|
|
if (this.allSelect) items.is_select = true
|
|
else items.is_select = false
|
|
})
|
|
})
|
|
},
|
|
// 删除失效商品
|
|
delLoseGood(id, index) {
|
|
if (index == 0) {
|
|
this.Post({
|
|
s_id: id
|
|
}, '/api/shopping/delShopping').then(res => {
|
|
this.getShoppingList()
|
|
this.$forceUpdate()
|
|
})
|
|
} else {
|
|
let ids = []
|
|
this.loseList.forEach(item => {
|
|
ids.push(item.id)
|
|
})
|
|
this.Post({
|
|
s_id: ids.toString()
|
|
}, '/api/shopping/delShopping').then(res => {
|
|
this.getShoppingList()
|
|
this.$forceUpdate()
|
|
})
|
|
}
|
|
},
|
|
// 删除商品
|
|
delGood() {
|
|
let ids = []
|
|
this.list.forEach(item => {
|
|
item.data.forEach(items => {
|
|
if (items.is_select == true) {
|
|
ids.push(items.id)
|
|
}
|
|
})
|
|
})
|
|
this.Post({
|
|
s_id: ids.toString()
|
|
}, '/api/shopping/delShopping').then(res => {
|
|
this.getShoppingList()
|
|
this.$forceUpdate()
|
|
})
|
|
},
|
|
// 获取总价
|
|
getAllPrice() {
|
|
let allPrice = 0
|
|
this.list.forEach(item => {
|
|
item.data.forEach(items => {
|
|
if (items.is_select == true) {
|
|
allPrice += items.Specifications_money * items.num
|
|
}
|
|
})
|
|
})
|
|
return (allPrice / 100).toFixed(2)
|
|
},
|
|
// 结算
|
|
order() {
|
|
let list = []
|
|
let ids = []
|
|
this.list.forEach(item => {
|
|
item.data.forEach((items, index) => {
|
|
if (items.is_select == true) {
|
|
ids.push(items.merchant_id)
|
|
list.push(items)
|
|
}
|
|
})
|
|
})
|
|
// if (Array.from(new Set(ids)).length > 1) {
|
|
// uni.showToast({
|
|
// title: '请选择同一商户下的商品',
|
|
// icon: 'none'
|
|
// })
|
|
// return;
|
|
// }
|
|
if (list.length == 0) {
|
|
uni.showToast({
|
|
title: '请选择商品',
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
console.log('list参数', list);
|
|
this.$store.commit("changeOrderSCart", list)
|
|
// this.gotoPath('/subPackages/order/eCartOrder')
|
|
this.gotoPath('/subPackages/order/gwcOrder')
|
|
// this.gotoPath('/subPackages/goods/goodsOrder')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.bg {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
padding: 0 27rpx 200rpx;
|
|
box-sizing: border-box;
|
|
background-color: #F8F8F8;
|
|
}
|
|
|
|
.guanli {
|
|
height: 76rpx;
|
|
text-align: right;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #000000;
|
|
line-height: 76rpx;
|
|
}
|
|
|
|
.goodBox {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin: 0 auto 27rpx;
|
|
padding: 25rpx 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-size: 35rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
|
|
.goodItem {
|
|
width: 100%;
|
|
height: 173rpx;
|
|
margin-top: 46rpx;
|
|
display: flex;
|
|
|
|
.noSelect {
|
|
width: 37rpx;
|
|
height: 37rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #666666;
|
|
box-sizing: border-box;
|
|
margin-right: 25rpx;
|
|
margin-top: 68rpx;
|
|
}
|
|
|
|
.selectBox {
|
|
width: 37rpx;
|
|
height: 37rpx;
|
|
// background: linear-gradient(90deg, #FA2B66, #FF9834);
|
|
// border-radius: 50%;
|
|
margin-right: 25rpx;
|
|
margin-top: 68rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 173rpx;
|
|
height: 173rpx;
|
|
border-radius: 13rpx;
|
|
}
|
|
|
|
.contentBox {
|
|
width: 400rpx;
|
|
height: 173rpx;
|
|
margin-left: 23rpx;
|
|
|
|
.title {
|
|
font-size: 31rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
|
|
.subTitle {
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #7C7C7C;
|
|
margin-top: 13rpx;
|
|
}
|
|
|
|
.priceBox {
|
|
margin-top: 35rpx;
|
|
|
|
.price {
|
|
font-size: 40rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #FF2D3B;
|
|
}
|
|
|
|
.price:before {
|
|
content: "￥";
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.jian,
|
|
.jia {
|
|
width: 47rpx;
|
|
height: 47rpx;
|
|
background: #6CA5AA;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
line-height: 47rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.loseGood {
|
|
width: 697rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin: 0 auto 27rpx;
|
|
padding: 25rpx 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-size: 35rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
|
|
span {
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #2791F7;
|
|
}
|
|
}
|
|
|
|
.goodItem {
|
|
width: 100%;
|
|
height: 173rpx;
|
|
margin-top: 46rpx;
|
|
display: flex;
|
|
color: #999999;
|
|
|
|
.noSelect {
|
|
width: 37rpx;
|
|
height: 37rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #CCCCCC;
|
|
background: #F1F1F1;
|
|
box-sizing: border-box;
|
|
margin-right: 25rpx;
|
|
margin-top: 68rpx;
|
|
}
|
|
|
|
image {
|
|
width: 173rpx;
|
|
height: 173rpx;
|
|
border-radius: 13rpx;
|
|
margin-right: 23rpx;
|
|
}
|
|
|
|
.contentBox {
|
|
width: 421rpx;
|
|
height: 173rpx;
|
|
|
|
.title {
|
|
font-size: 31rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.subTitle {
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.priceBox {
|
|
margin-top: 35rpx;
|
|
|
|
.price {
|
|
font-size: 40rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.price:before {
|
|
content: "￥";
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 125rpx;
|
|
height: 53rpx;
|
|
background: #999999;
|
|
border-radius: 13rpx;
|
|
text-align: center;
|
|
line-height: 53rpx;
|
|
font-size: 29rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.noProduct {
|
|
width: 100%;
|
|
height: 300rpx;
|
|
text-align: center;
|
|
line-height: 300rpx;
|
|
color: #999999;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.orderBox {
|
|
width: 750rpx;
|
|
height: 151rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
|
|
padding: 0 27rpx;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
|
|
.priceBox {
|
|
display: flex;
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
|
|
span {
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
p {
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #FF2D3B;
|
|
margin-top: -5rpx;
|
|
}
|
|
|
|
.noSelect {
|
|
width: 41rpx;
|
|
height: 41rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #666666;
|
|
box-sizing: border-box;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.selectBox {
|
|
width: 41rpx;
|
|
height: 41rpx;
|
|
// background: linear-gradient(90deg, #FA2B66, #FF9834);
|
|
border-radius: 50%;
|
|
margin-right: 10rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 219rpx;
|
|
height: 77rpx;
|
|
background: #6CA5AA;
|
|
border-radius: 39rpx;
|
|
text-align: center;
|
|
line-height: 77rpx;
|
|
font-size: 33rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.zhihui {
|
|
background: #E8E8E8 !important;
|
|
color: #999999 !important;
|
|
}
|
|
</style>
|