From b83ba3cc4687f21d744e9866e10e30e91229e8a4 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Thu, 28 Jan 2021 16:23:30 +0800
Subject: [PATCH] gx
---
hive-app/pages/workbench/selectProduct/index.vue | 423 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 332 insertions(+), 91 deletions(-)
diff --git a/hive-app/pages/workbench/selectProduct/index.vue b/hive-app/pages/workbench/selectProduct/index.vue
index 47d7715..ed1bbba 100644
--- a/hive-app/pages/workbench/selectProduct/index.vue
+++ b/hive-app/pages/workbench/selectProduct/index.vue
@@ -1,93 +1,293 @@
<template>
<!-- 当前客户 -->
<view class="container">
- <!-- #ifndef H5 -->
- <view class="status_bar"></view>
- <!-- #endif -->
- <search-bar :placeholder="placeholder" class="ml-10 mr-10"></search-bar>
- <view class="list flex">
- <scroll-view class="list-left" scroll-y>
- <view v-for="(item,index) in list" class="list-left-row" @click="active(index)" :class="select==index?'active':''">
- <text class="font-14">{{item}}</text>
- </view>
+ <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>
- <navigator url="../productDetail/index">
- <view class="flex align-center list-right-row">
- <image class="product-img mr-5" mode="aspectFill" src="../../../static/images/product.jpg"></image>
- <view>
- <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
- <text class="font-10 gray flex justify-start">物品描述</text>
- <view class="flex justify-between align-center mt-15">
- <text class="flex justify-start font-12 red mt-10">￥400.00</text>
- <view class="flex align-center justify-end mt-10">
- <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
- <text>1</text>
- <text class="iconfont iconjia blue-btn-circle ml-10"></text>
+ <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 class="flex align-center list-right-row">
- <image class="product-img mr-5" mode="aspectFill" src="../../../static/images/product.jpg"></image>
- <view>
- <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
- <text class="font-10 gray flex justify-start">物品描述</text>
- <view class="flex justify-between align-center mt-15">
- <text class="flex justify-start font-12 red mt-10">￥400.00</text>
- <view class="flex align-center justify-end mt-10">
- <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
- <text>1</text>
- <text class="iconfont iconjia blue-btn-circle ml-10"></text>
- </view>
- </view>
- </view>
+ <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="shopping flex align-center justify-between">
- <view class="flex align-center">
- <view class="shopping-icon iconfont iconicongouwuche gray" @click="openShoppingCart">
- <view class="shopping-icon-num flex align-center justify-center">
- <text class="font-10">19</text>
- </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-14 blue ml-10">¥110.00</text>
+ <text class="font-16 blue">¥{{totalAmount}}</text>
</view>
- <navigator url="../confirmOrder">
- <button class="blue-btn btn mr-0">提交订单</button>
- </navigator>
+ <button class="blue-btn btn mr-0" @click="submit" :disabled="isEnableSumbit">提交订单</button>
</view>
- <uni-popup ref="popup" type="bottom">
- <shopping-cart></shopping-cart>
- </uni-popup>
+ <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 uniPopup from '@/components/uni-popup/uni-popup.vue'
import shoppingCart from './shoppingCart.vue'
+ import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components:{
+ uniCollapse,
+ uniCollapseItem,
searchBar,
- uniPopup,
- shoppingCart
+ shoppingCart,
+ uniLoadMore
},
data(){
return{
- placeholder:'商品名称、编号、拼音',
- list:['院装产品','美容套餐','美容客装','美容试装','头皮院装'],
- select:'0'
+ 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:{
- active(index){
- this.select=index
+ 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.popup.open()
+ 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
+ });
}
}
}
@@ -101,67 +301,108 @@
display: flex;
flex-direction: column;
height: 100%;
- padding: 10px 0 0;
+ 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: 25%;
- height: 100%;
- text-align: center;
+ width: 200rpx;
background: #F6F6F8;
border-radius: 4px;
}
.list-right{
- width: 75%;
- text-align: center;
- padding: 0px 10px;
+ flex: 1;
}
.list-left-row{
- padding: 10px;
color: #8c9fad;
+ font-size: 13px;
+ border-bottom: 0;
}
- .active{
- background: #FFFFFF;
- color: #000000;
+ .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{
- border: 1px solid #EDEAF4;
- box-shadow:0 6px 6px rgba(237,234,244,0.5);
- border-radius: 4px;
+ 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-right-row:not(:first-child){
- margin-top: 10px;
+ .list-row .list-right-row:nth-last-of-type(1){
+ margin-bottom: 0;
}
- .product-img{
- width: 81px;
- height: 81px;
+ .list-right-row .product-img{
+ width: 66px;
+ height: 66px;
+ margin-right: 5px;
}
- .shopping{
- padding: 10px 10px;
- box-shadow:0 6px 100px rgba(237,234,244,1);
+ .list-right-row .price{
+ display: block;
+ color: #FA5151;
+ font-size: 15px;
}
- .shopping-icon{
- font-size: 28px;
+ .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);
}
- .shopping-icon-num{
- width: 20px;
- height: 20px;
- background: #518EFF;
- border-radius: 50%;
- color: #FFFFFF;
+ .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;
}
- .btn{
+ .footer .btn{
border-radius: 20px;
- line-height: 34px;
- padding: 0 24px;
+ line-height: 36px;
+ padding: 0 26px;
font-size: 14px;
}
</style>
--
Gitblit v1.9.1