<template>
|
<!-- 当前客户 -->
|
<view class="container">
|
<search-bar @confirm="search" placeholder="商品名称、编号、拼音" class="search-bar"></search-bar>
|
<view class="list">
|
<scroll-view class="list-left" scroll-y="true">
|
<uni-collapse accordion="true" @change="toggleCollapse">
|
<uni-collapse-item :showAnimation="true" :open="item.id==cateId" :title="item.name" :isShowIcon="isShowIcon(item)" class="list-left-row"
|
v-if="item.parentId===0" v-for="(item, index) in goodsTypeList">
|
<view class="list-row-wrap">
|
<view class="list-row" :class="op.id==cateId?'blue':''"
|
v-for="op in goodsTypeList"
|
v-if="op.parentId===item.id"
|
@click="changeGoodsType(op.id)">
|
{{op.name}}
|
</view>
|
</view>
|
</uni-collapse-item>
|
</uni-collapse>
|
</scroll-view>
|
<scroll-view class="list-right" scroll-y="true" @scrolltolower="scrolltolower()">
|
<navigator :url="'../productDetail/index?goodsType='+item.goodsType+'&id='+item.id" hover-class="none" v-for="item in goodsList">
|
<view class="list-right-row">
|
<image class="product-img" :src="item.img?item.img:'../../../static/images/no-img.png'"></image>
|
<view class="flex-1">
|
<text>{{item.name}}</text>
|
<view class="flex justify-between mt-15">
|
<text class="price">￥{{item.price}}</text>
|
<view class="right">
|
<template v-if="item.num">
|
<text class="iconfont iconjian blue-outline-btn-circle mr-10"
|
@click.stop="decreaseGoods(item)"></text>
|
<text>{{item.num}}</text>
|
</template>
|
<text class="iconfont iconjia blue-btn-circle ml-10"
|
@click.stop="addGoods(item)"></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</navigator>
|
<view v-if="goodsList.length">
|
<uni-load-more :status="loadStatus" color="#a5abaf"></uni-load-more>
|
</view>
|
<no-record :isShow="!goodsList.length" txt="暂无产品/项目"></no-record>
|
</scroll-view>
|
</view>
|
<view class="footer">
|
<view class="flex align-center" @click="openShoppingCart">
|
<view class="icon-car-wrap">
|
<text class="iconfont iconicongouwuche icon-car gray"></text>
|
<text class="count" v-if="totalCount">{{totalCount}}</text>
|
</view>
|
<text class="font-16 blue">¥{{totalAmount}}</text>
|
</view>
|
<button class="blue-btn btn mr-0" @click="submit" :disabled="isEnableSumbit">提交订单</button>
|
</view>
|
<shopping-cart ref="shopCart" :list="selectItems" @freeChange="freeChange" @addGoods="addGoods" @decreaseGoods="decreaseGoods" @reset="clearShopCart"></shopping-cart>
|
</view>
|
</template>
|
|
<script>
|
import uniCollapse from '../../../components/uni-collapse/uni-collapse.vue'
|
import uniCollapseItem from '../../../components/uni-collapse-item/uni-collapse-item.vue'
|
import searchBar from '../../../components/searchBar/index.vue';
|
import shoppingCart from './shoppingCart.vue'
|
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
export default {
|
components:{
|
uniCollapse,
|
uniCollapseItem,
|
searchBar,
|
shoppingCart,
|
uniLoadMore
|
},
|
data(){
|
return{
|
id: '',
|
tabIndex: '0',
|
goodsTypeList: [],
|
goodsList: [],
|
cateId: null,//当前产品类别id
|
selectItems: [],
|
queryKey: '',
|
loadStatus: 'more',
|
pageNum: 1
|
}
|
},
|
computed:{
|
// 购物车总数量
|
totalCount(){
|
let count = 0;
|
this.selectItems.forEach((item) => {
|
count += item.num;
|
})
|
return count;
|
},
|
// 购物车总金额
|
totalAmount(){
|
let amount = 0;
|
this.selectItems.forEach((item) => {
|
if(!item.isFree){
|
amount += item.price * item.num;
|
}
|
})
|
return amount;
|
},
|
isEnableSumbit(){
|
return !this.selectItems.length
|
}
|
},
|
onLoad(options) {
|
this.id = options.id;
|
uni.setNavigationBarTitle({
|
title: '当前客户：' + options.vipName
|
});
|
this.loadGoodsTypeList()
|
},
|
onPullDownRefresh(){
|
this.reloadData();
|
let timer = setTimeout(function () {
|
uni.stopPullDownRefresh();
|
clearTimeout(timer);
|
timer = null;
|
}, 800);
|
},
|
methods:{
|
reloadData(){
|
this.goodsList = [];
|
this.pageNum = 1;
|
this.loadStatus = 'more';
|
this.loadGoodsList();
|
},
|
scrolltolower(){
|
this.loadGoodsList()
|
},
|
isShowIcon(item){
|
let count = 0;
|
this.goodsTypeList.forEach((op) => {
|
if(op.parentId==item.id){
|
count ++
|
}
|
});
|
return count?true:false;
|
},
|
openShoppingCart(){
|
this.$refs.shopCart.toggle()
|
},
|
loadGoodsTypeList(){
|
this.$httpUtils.request('/api/order/findShoppingGoodsType').then((res) => {
|
if(res.status == 200){
|
let result = res.rows;
|
this.goodsTypeList = result;
|
if(result.length){
|
this.cateId = result[0].id;
|
this.loadGoodsList();
|
}
|
}
|
})
|
},
|
loadGoodsList(){
|
if(this.loadStatus!=='more'){
|
return;
|
}
|
this.$httpUtils.request('/api/order/findShoppingGoods',{
|
cateId: this.cateId,
|
pageNum: this.pageNum,
|
pageSize: 10,
|
queryKey: this.queryKey
|
},'POST').then((res) => {
|
if(res.status == 200){
|
let result = res.rows.map((item) => {
|
return Object.assign(item, {num: 0});
|
});
|
if(result.length < 10){
|
this.loadStatus = 'noMore';
|
} else {
|
this.pageNum ++ ;
|
this.loadStatus = 'more';
|
}
|
this.goodsList = this.goodsList.concat(result);
|
this.goodsList.forEach((item) => {
|
this.selectItems.forEach((op) => {
|
if(item.id == op.id){
|
item.num = op.num;
|
}
|
})
|
});
|
}
|
})
|
},
|
// 搜索
|
search(val){
|
this.queryKey = val;
|
this.reloadData();
|
},
|
getParentId(){
|
let arr = this.goodsTypeList.filter((item) => {
|
return item.id===this.cateId
|
})
|
return arr.length?arr[0].parentId:'';
|
},
|
toggleAll(arr){
|
this.changeGoodsType('');
|
},
|
// 打开关闭面板
|
toggleCollapse(arr){
|
if(!arr.length){
|
let parentId = this.getParentId();
|
if(parentId){
|
this.changeGoodsType();
|
}
|
return;
|
}
|
let index = arr[0];
|
let result = this.goodsTypeList.filter((item) => {
|
return item.parentId===0
|
})
|
this.changeGoodsType(result[index].id);
|
},
|
// 切换商品类型
|
changeGoodsType(id){
|
this.cateId = id;
|
this.reloadData();
|
},
|
freeChange(data){
|
data.goods.isFree = !data.goods.isFree;
|
this.$set(this.selectItems, data.index, data.goods)
|
},
|
// 添加商品
|
addGoods(goods){
|
goods.num ++
|
// 所有商品列表的下标
|
let ids = this.goodsList.map((item) => {
|
return item.id;
|
})
|
let index = ids.indexOf(goods.id);
|
if(index>-1){
|
this.goodsList[index].num = goods.num;
|
}
|
|
// 选中商品的下标
|
let selectIds = this.selectItems.map((item) => {
|
return item.id;
|
})
|
let selectIndex = selectIds.indexOf(goods.id);
|
|
// 该商品若已在购物车，则购物车数量上+1,否则加入购物车
|
if(selectIndex > -1){
|
this.selectItems[selectIndex].num = goods.num;
|
}else{
|
this.selectItems.push(Object.assign(goods, {isFree: false}));
|
}
|
|
},
|
decreaseGoods(goods){
|
goods.num = goods.num <= 0 ? 0 : goods.num - 1;
|
// 所有商品列表的下标
|
let ids = this.goodsList.map((item) => {
|
return item.id;
|
})
|
let index = ids.indexOf(goods.id);
|
if(index>-1){
|
this.goodsList[index].num = goods.num;
|
}
|
|
// 选中商品的下标
|
let selectIds = this.selectItems.map((item) => {
|
return item.id;
|
})
|
let selectIndex = selectIds.indexOf(goods.id);
|
|
// 该商品若已在购物车，则购物车数量上-1,否则从购物车删除
|
if(goods.num >= 1){
|
this.selectItems[selectIndex].num = goods.num;
|
}else{
|
this.selectItems.splice(selectIndex, 1);
|
}
|
},
|
clearShopCart(){
|
this.selectItems = [];
|
this.goodsList.forEach((item) => {
|
item.num = 0;
|
});
|
},
|
submit(){
|
let str = (encodeURIComponent(JSON.stringify(this.selectItems))).replace(/%/g, '%25');
|
uni.navigateTo({
|
url: '../confirmOrder?id='+this.id+'&list='+str
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
height: 100%;
|
}
|
.container{
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
padding-top: 10px;
|
box-sizing: border-box;
|
}
|
.search-bar{
|
margin-left: 10px;
|
margin-right: 10px;
|
}
|
.list{
|
flex: 1;
|
display: flex;
|
overflow: hidden;
|
}
|
.list-left{
|
width: 200rpx;
|
background: #F6F6F8;
|
border-radius: 4px;
|
}
|
.list-right{
|
flex: 1;
|
}
|
.list-left-row{
|
color: #8c9fad;
|
font-size: 13px;
|
border-bottom: 0;
|
}
|
.uni-collapse{
|
background-color: #F6F6F8!important;
|
}
|
.uni-collapse-cell{
|
border-color: #F6F6F8!important;
|
}
|
.uni-collapse-cell__title:active, .uni-collapse-cell--hover, .uni-collapse-cell--open, .uni-collapse-cell--disabled{
|
background-color: #FFFFFF!important;
|
}
|
|
.list-row-wrap{
|
padding: 0 15px;
|
margin-top: -8px;
|
}
|
.list-row{
|
font-size: 13px;
|
margin: 8px 0;
|
}
|
.list-right-row{
|
display: flex;
|
align-items: center;
|
padding: 10px;
|
margin: 0 10px 10px;
|
border: 1px solid #EDEAF4;
|
box-shadow:0 6px 6px rgba(237,234,244,0.4);
|
border-radius: 4px;
|
font-size: 13px;
|
}
|
.list-row .list-right-row:nth-last-of-type(1){
|
margin-bottom: 0;
|
}
|
.list-right-row .product-img{
|
width: 66px;
|
height: 66px;
|
margin-right: 5px;
|
}
|
.list-right-row .price{
|
display: block;
|
color: #FA5151;
|
font-size: 15px;
|
}
|
.footer{
|
position: relative;
|
z-index: 999;
|
display: flex;
|
justify-content: space-between;
|
background: #FFFFFF;
|
padding: 10px;
|
padding-bottom: 10px;
|
padding-bottom: calc(10px + constant(safe-area-inset-bottom));
|
padding-bottom: calc(10px + env(safe-area-inset-bottom));
|
box-shadow: 0 -6px 6px rgba(237,234,244,0.2);
|
}
|
.footer .icon-car-wrap{
|
position: relative;
|
margin-right: 15px;
|
}
|
.footer .icon-car{
|
font-size: 28px;
|
}
|
.footer .count{
|
position: absolute;
|
right: -10px;
|
top: -10px;
|
width: 20px;
|
height: 20px;
|
line-height: 20px;
|
background: #518EFF;
|
border-radius: 50%;
|
color: #FFFFFF;
|
font-size: 12px;
|
text-align: center;
|
}
|
.footer .btn{
|
border-radius: 20px;
|
line-height: 36px;
|
padding: 0 26px;
|
font-size: 14px;
|
}
|
</style>
|
