From 535214091413d5411fabb42c0c3cccb474145d0a Mon Sep 17 00:00:00 2001
From: chen <2659004835@qq.com>
Date: Sat, 7 May 2022 19:26:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=B4=AD=E7=89=A9=E8=BD=A6?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E3=80=81=E4=BC=98=E5=8C=96tools.js=E4=B8=AD?=
 =?UTF-8?q?=E7=BB=99=E6=95=B0=E5=AD=97=E6=B7=BB=E5=8A=A0=E4=B8=A4=E4=BD=8D?=
 =?UTF-8?q?=E5=B0=8F=E6=95=B0=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 commons/icon-font.css                      |  20 +-
 components/foot-tabs/foot-tab.vue          |   4 +-
 components/shopping-carts/cart-one.vue     | 219 +++++++++++++++++++++
 components/swiper-tab/swiper-tab-slide.vue |   2 +-
 jsFile/tools.js                            |  10 +-
 pages.json                                 |   9 +
 pages/tabbar/feedback/feedback.vue         |   6 +-
 pages/tabbar/project-list/project-list.vue |  21 +-
 pagesA/shopping-cart/shopping-cart.vue     |  30 +++
 9 files changed, 306 insertions(+), 15 deletions(-)
 create mode 100644 components/shopping-carts/cart-one.vue
 create mode 100644 pagesA/shopping-cart/shopping-cart.vue

diff --git a/commons/icon-font.css b/commons/icon-font.css
index 6acb33b..6270de7 100644
--- a/commons/icon-font.css
+++ b/commons/icon-font.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3180711 */
-  src: url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.woff2?t=1649586677823') format('woff2'),
-       url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.woff?t=1649586677823') format('woff'),
-       url('https://at.alicdn.com/t/font_3180711_mjqzq7x5vu.ttf?t=1649586677823') format('truetype');
+  src: url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff2?t=1651830764889') format('woff2'),
+       url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff?t=1651830764889') format('woff'),
+       url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.ttf?t=1651830764889') format('truetype');
 }
 
 .icon {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-del:before {
+  content: "\e718";
+}
+
+.icon-cut:before {
+  content: "\e609";
+}
+
+.icon-add:before {
+  content: "\e60a";
+}
+
 .icon-add-picture05:before {
   content: "\e639";
 }
@@ -113,7 +125,7 @@
   content: "\e73f";
 }
 
-.icon-shopp-cart:before {
+.icon-shop-cart:before {
   content: "\e73d";
 }
 
diff --git a/components/foot-tabs/foot-tab.vue b/components/foot-tabs/foot-tab.vue
index 8a2a6ee..4060358 100644
--- a/components/foot-tabs/foot-tab.vue
+++ b/components/foot-tabs/foot-tab.vue
@@ -84,7 +84,7 @@
 					{
 						iconPath: "/static/tabbar/icon-mo-fun.png",
 						selectedIconPath: "/static/tabbar/icon-select-fun.png",
-						title:'项目列表'
+						title:'分类'
 					},
 					{
 						iconPath: "/static/tabbar/icon-scan.png",
@@ -94,7 +94,7 @@
 					{
 						iconPath: "/static/tabbar/icon-mo-news.png",
 						selectedIconPath: "/static/tabbar/icon-select-news.png",
-						title:'意见反馈'
+						title:'商品列表'
 					},
 					{
 						iconPath: "/static/tabbar/icon-mo-person.png",
diff --git a/components/shopping-carts/cart-one.vue b/components/shopping-carts/cart-one.vue
new file mode 100644
index 0000000..2f3161f
--- /dev/null
+++ b/components/shopping-carts/cart-one.vue
@@ -0,0 +1,219 @@
+<template>
+	<view>
+		<view class="disac shopping-cart-item animated " :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifAnimation ? 'flex' : 'none'}" v-for="(item,index) in dataList" :key="index">
+			<!-- 选择 -->
+			<view class="flexs mo-item" :class="item.ifcheck ? 'active-item' : ''" @tap="chooseEv(index)"></view>
+			<!-- 商品图片 -->
+			<view class="shopp-img mar-zy20 flexs" @tap="chooseEv(index)">
+				<image class="shopp-img imgH" :src="item.imgsrc" mode="aspectFill" lazy-load></image>
+			</view>
+			<view class="disjb fc imgH width100">
+				<view @tap="goDetail(item.id)">
+					<!-- 商品标题 -->
+					<view class="fon28 bold clips1">{{item.title}}</view>
+					<!-- 商品描述 -->
+					<view class="fon24 clips2">{{item.content}}</view>
+				</view>
+				<view class="disjbac">
+					<!-- 商品价格 -->
+					<view class="fon24">￥：<span class="fon28 colf8 bold">{{$toolAll.tools.addXiaoShu(item.price)}}</span></view>
+					<!-- 商品数量 -->
+					<view class="disac">
+						<!-- 减数量 -->
+						<i class="icon icon-cut countBtn disjcac" @tap="addCutEv(index,0)" :style="{backgroundColor: item.num==1 ? '#cccccc' : '#000000'}"></i>
+						<!-- 实际数量 -->
+						<input type="digit" class="fon24 tcenter countInput" v-model="item.num">
+						<!-- 加数量 -->
+						<i class="icon icon-add countBtn disjcac" @tap="addCutEv(index,1)" :style="{backgroundColor: item.num==10 ? '#cccccc' : '#000000'}"></i>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 管理 -->
+		<view class="shopping-manage" :style="{backgroundColor: ifManage ? 'rgba(0,0,0,.6)' : 'rgba(255,0,0,1)'}" @tap="manageEv">{{ifManage ? '管理' : '取消'}}</view>
+		<!-- 底部导航 -->
+		<view class="disjbac cart-foot-box fon24">
+			<view class="" v-if="ifManage">合计：<span class="fon38 colf8 bold">{{allPrice}}</span></view>
+			<view class="disac mar-z10" v-else @tap="chooseAllEv">
+				<view class="flexs mo-item mar-y10" :class="ifSelectAll ? 'active-item' : ''" @tap="chooseEv(index)"></view>
+				<span>全选</span>
+			</view>
+			<view class="fon38 cart-submit-btn" 
+				:style="{backgroundColor: allPrice=='0.00' ? '#cccccc' : '#FF0000'}" @tap="submitEv">{{ifManage ? `${allPrice=='0.00' ? '去购物' : '去结算'}` : `删除 (${delNum})`}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"cart-one",
+		props:{
+			list:{
+				type:Array,
+				default:()=>{
+					return [
+						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题商品标题商品标题商品标题商品标题商品标题',content:'商品描述商品描述',price:199.13,num:1,ifcheck:true},
+						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
+						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
+						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
+						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
+						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
+						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
+						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false},
+					]
+				}
+			}
+		},
+		data() {
+			return {
+				dataList:[],
+				ifManage:true,//是否显示管理按钮
+				ifSelectAll:false//是否全选
+			};
+		},
+		computed:{
+			// 总价及合计
+			allPrice() {
+				let allPrice = 0;
+				this.dataList.forEach(item=>{
+					if(item.ifcheck) {
+						allPrice += this.$toolAll.tools.operationEv(item.price,item.num,'*',2)*1;
+					}
+				})
+				return this.$toolAll.tools.addXiaoShu(allPrice);
+			},
+			// 要删除的数量
+			delNum() {
+				let delNum = 0;
+				this.dataList.forEach(item=>{
+					if(item.ifcheck) {
+						delNum += 1;
+					}
+				})
+				return delNum;
+			}
+		},
+		mounted() {
+			// this.dataList = this.list;
+			this.list.forEach((item,index)=>{
+				let obj = {
+					id:index,
+					imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
+					title:'商品标题'+index,
+					content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',
+					price:199,
+					num:1,
+					ifcheck:false,
+					ifExit:true,
+					ifAnimation:true
+				}
+				this.dataList.push(obj);
+			})
+		},
+		methods:{
+			// 去购物、去结算、删除
+			submitEv(){
+				if(this.ifManage) {
+					if(this.allPrice=='0.00') {
+						// 去购物
+					} else {
+						// 去结算
+					}
+				} else {
+					// 进入删除
+					this.dataList.forEach((item,index)=>{
+						if(item.ifcheck) {
+							this.dataList[index].ifExit = false;
+							this.dataList[index].ifcheck = false;
+							setTimeout(()=>{
+								this.dataList[index].ifAnimation = false;
+							},1000)
+						}
+					})
+					this.judgeSelectAllEv();
+				}
+			},
+			// 全选事件
+			chooseAllEv(){
+				this.ifSelectAll = !this.ifSelectAll;
+				this.dataList.forEach(item=>item.ifcheck = this.ifSelectAll ? true : false);
+			},
+			// 选中事件
+			chooseEv(index) {
+				this.dataList[index].ifcheck = !this.dataList[index].ifcheck;
+				this.judgeSelectAllEv();
+			},
+			// 判断全选中是否被选中
+			judgeSelectAllEv() {
+				let exit = this.dataList.findIndex(item=>item.ifcheck==false);
+				if(exit!=-1) {
+					this.ifSelectAll = false
+				} else {
+					this.ifSelectAll = true;
+				}  
+			},
+			// 去商品详情事件
+			goDetail(id){
+				uni.navigateTo({
+					url:''
+				})
+			},
+			// 数量加减事件
+			addCutEv(index,num) {
+				if(num) {
+					// 加
+					if(this.dataList[index].num!=10) {
+						this.dataList[index].num++;
+					}
+				} else {
+					// 减
+					if(this.dataList[index].num>1) {
+						this.dataList[index].num--;
+					}
+				}
+				console.log(this.allPrice,'总价');
+			},
+			// 管理点击事件
+			manageEv(){
+				this.dataList.forEach(item=>item.ifcheck=false)
+				this.ifManage = !this.ifManage;
+			}
+		}
+	}
+</script>
+
+<style>
+.mo-item{
+	width: 30rpx;
+	height: 30rpx;
+	border-radius: 100%;
+	border: 2rpx solid #000000;
+	box-sizing: border-box;
+}
+.active-item{
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: 2rpx solid #FF0000;
+}
+.active-item::before{
+	content: '';
+	display: block;
+	width: 20rpx;
+	height: 20rpx;
+	border-radius: 100%;
+	background-color: #FF0000;
+}
+.imgH{height: 180rpx;}
+.shopping-cart-item{background-color: #FFFFFF;border-radius: 10rpx;margin-bottom: 20rpx;padding: 20rpx;}
+.shopp-img{width: 180rpx;border-radius: 10rpx;}
+.countBtn{font-size: 36rpx;width: 40rpx;height: 40rpx;background-color: #000000;color: #FFFFFF; border-radius: 10rpx;}
+.countInput{background-color: #F5F5F5;width: 80rpx;border-radius: 10rpx;padding: 10rpx 0;margin: 0 10rpx;}
+
+.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF;padding: 20rpx 30rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, .3);}
+.cart-submit-btn{color: #FFFFFF;background-color: #cccccc;padding: 10rpx 40rpx;border-radius: 40rpx;}
+
+.shopping-manage{position: fixed;right: 20rpx;bottom: 340rpx;width: 80rpx;height: 80rpx; border-radius: 100%;background-color: rgba(0, 0, 0, .6);color: #FFFFFF;font-size: 24rpx;display: flex;justify-content: center;align-items: center;}
+
+</style>
\ No newline at end of file
diff --git a/components/swiper-tab/swiper-tab-slide.vue b/components/swiper-tab/swiper-tab-slide.vue
index bcc9fcf..4f34c01 100644
--- a/components/swiper-tab/swiper-tab-slide.vue
+++ b/components/swiper-tab/swiper-tab-slide.vue
@@ -8,7 +8,7 @@
 				<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
 					<!-- 列表数据 -->
 					<view class="radius20 bacf6 disjb pad20 bbot" v-for="(item1,index1) in list[index]" :key="index1">
-						<image class="mar-y20 flexs" src="/static/del/500478055.png" mode="" style="width: 200rpx;height: 200rpx;"></image>
+						<image class="mar-y20 flexs" src="https://s6.jpg.cm/2022/05/06/Lx4T45.jpg" mode="" style="width: 200rpx;height: 200rpx;"></image>
 						<view class="width100 disjb fc" style="height: 200rpx;">
 							<view>
 								<view class="clips2">{{item1.title}}{{index1}}</view>
diff --git a/jsFile/tools.js b/jsFile/tools.js
index aa21056..5a53b02 100644
--- a/jsFile/tools.js
+++ b/jsFile/tools.js
@@ -38,6 +38,12 @@ const tools = {
 		clearInterval(this.timer)
 		console.log('倒计时清空了');
 	},
+	/**
+	 * @description 获取字符串中的数字
+	 */
+	obtainCount(str) {
+		return parseInt(str.replace(/[^0-9]/ig,""))
+	},
 	/**
 	 * @description 获取微信扫码后的结果，并解析
 	 */
@@ -119,13 +125,11 @@ const tools = {
 	 * @description 整数添加.00，小数就不添加
 	 */
 	addXiaoShu(num){
-		console.log(num,120);
+		// console.log(num,'添加小数点后两位小数');
 		let str = num.toString();
-		if(str.length > 9){
 			str = str*1;
 			str = str.toFixed(2);
 			str = str+'';
-		}
 		return str.includes('.') ? str : str = num + '.00';
 	},
 	// type:+加、-减、*乘、/除
diff --git a/pages.json b/pages.json
index 6fc2cf9..a1e7be7 100644
--- a/pages.json
+++ b/pages.json
@@ -61,6 +61,15 @@
                     "enablePullDownRefresh": false
                 }
                 
+                }
+                ,{
+                    "path" : "shopping-cart/shopping-cart",
+                    "style" :                                                                                    
+                {
+                    "navigationBarTitleText": "",
+                    "enablePullDownRefresh": false
+                }
+                
                 }
             ]
         },
diff --git a/pages/tabbar/feedback/feedback.vue b/pages/tabbar/feedback/feedback.vue
index 0b90db6..5868061 100644
--- a/pages/tabbar/feedback/feedback.vue
+++ b/pages/tabbar/feedback/feedback.vue
@@ -1,6 +1,10 @@
 <template>
 	<view>
-		<swiperTabSlide @scrollBottom="scrollBottomEv" :list="dataList" :ifloading="ifloading"></swiperTabSlide>
+		<status-container :ifReturn="false" titlet="列表">
+			<view slot="content">
+				<swiperTabSlide @scrollBottom="scrollBottomEv" :list="dataList" :ifloading="ifloading"></swiperTabSlide>
+			</view>
+		</status-container>
 		<!-- 底部tab -->
 		<foot-tab :current="3"></foot-tab> 
 	</view>
diff --git a/pages/tabbar/project-list/project-list.vue b/pages/tabbar/project-list/project-list.vue
index 50d07cf..be47bfb 100644
--- a/pages/tabbar/project-list/project-list.vue
+++ b/pages/tabbar/project-list/project-list.vue
@@ -1,22 +1,35 @@
 <template>
 	<view class="pad-x160">
+		<status-container :ifReturn="false" titlet="分类">
+			<view slot="content">
+				<column-function @chooseEv="chooseEv" :list="funList"></column-function>
+			</view>
+		</status-container>
 		<!-- 底部tab -->
-		<foot-tab :current="1"></foot-tab> 
+		<foot-tab current="1"></foot-tab>
 	</view>
 </template>
 
 <script>
 	// 底部组件
 	import footTab from '@/components/foot-tabs/foot-tab.vue';
+	import columnFunction from '@/components/function-list/column/column-function.vue';
 	export default {
 		components:{
-			'foot-tab' :footTab
+			'foot-tab' :footTab,
+			columnFunction
 		},
 		data() {
-			return {}
+			return {
+				funList:[
+					{url:'/pagesA/shopping-cart/shopping-cart',title:'购物车',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
+				]
+			}
 		},
 		methods: {
-			
+			chooseEv(obj) {
+				console.log(obj);
+			},
 		}
 	}
 </script>
diff --git a/pagesA/shopping-cart/shopping-cart.vue b/pagesA/shopping-cart/shopping-cart.vue
new file mode 100644
index 0000000..eb24eef
--- /dev/null
+++ b/pagesA/shopping-cart/shopping-cart.vue
@@ -0,0 +1,30 @@
+<template>
+	<view>
+		<status-container titlet="购物车">
+			<view slot="content">
+				<cart-one></cart-one>
+			</view>
+		</status-container>
+	</view>
+</template>
+
+<script>
+	import cartOne from '@/components/shopping-carts/cart-one.vue';
+	export default {
+		components:{
+			cartOne
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>