diff --git a/commons/base.css b/commons/base.css index e55a4e5..80b9731 100644 --- a/commons/base.css +++ b/commons/base.css @@ -383,6 +383,34 @@ scroll-view ::-webkit-scrollbar { } +/* 圆圈中间一个原点 start */ +.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; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + width: 20rpx; + height: 20rpx; + border-radius: 100%; + background-color: #FF0000; +} +/* 圆圈中间一个原点 end */ diff --git a/components/foot-tabs/readme.md b/components/foot-tabs/readme.md index 3c0aa30..a21cbf8 100644 --- a/components/foot-tabs/readme.md +++ b/components/foot-tabs/readme.md @@ -22,7 +22,7 @@ -#参数说明 +参数说明 current:当前选中项,默认0表示第一项 isIcon:哪个图标突出,默认2表示从索引0开始数,第二个图标突出 diff --git a/components/shopping-carts/cart-one.vue b/components/shopping-carts/cart-one.vue index 2f3161f..470a382 100644 --- a/components/shopping-carts/cart-one.vue +++ b/components/shopping-carts/cart-one.vue @@ -1,16 +1,16 @@ @@ -52,14 +53,17 @@ 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}, + {id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, + {id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, + {id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, + {id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, + {id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, + {id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, + {id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, + {id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, + {id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, + {id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, + {id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true}, ] } } @@ -68,7 +72,11 @@ return { dataList:[], ifManage:true,//是否显示管理按钮 - ifSelectAll:false//是否全选 + ifSelectAll:false,//是否全选 + originalNum:0,//当前输入框原值 + maxNum:20,//最大可输入数量 + minNum:1,//最小可输入数量 + ifLoading:true }; }, computed:{ @@ -102,12 +110,14 @@ title:'商品标题'+index, content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述', price:199, - num:1, - ifcheck:false, - ifExit:true, - ifAnimation:true + num:index+++1, + ifcheck:false,//是否被选中 + ifExit:true,//是否存在 + ifShow:true//是否隐藏 } this.dataList.push(obj); + // this.dataList = []; + this.ifLoading = false; }) }, methods:{ @@ -116,20 +126,35 @@ if(this.ifManage) { if(this.allPrice=='0.00') { // 去购物 + console.log('去购物'); } else { // 去结算 + console.log('去结算'); } } 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; + // 隐藏该商品 + this.dataList[index].ifShow = false; },1000) } }) + setTimeout(()=>{ + // 重构数组列表,去除不存在的商品 + this.dataList = this.dataList.filter(item=>item.ifExit==true); + if(!this.dataList.length) { + // 如果购物车为空按钮变为去购物,全选变为合计:0.00 + this.ifManage = true; + } + },1000) this.judgeSelectAllEv(); } }, @@ -160,23 +185,42 @@ }, // 数量加减事件 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--; + // 不在管理状态下:可进行加减 + if(this.ifManage) { + if(num) { + // 加 ,如果当前商品数量不等于最大值 + if(this.dataList[index].num != this.maxNum) { + this.dataList[index].num++; + } + } else { + // 减 ,如果当前商品数量大于最小值 + if(this.dataList[index].num > this.minNum) { + this.dataList[index].num--; + } } + console.log(this.allPrice,'总价'); } - console.log(this.allPrice,'总价'); }, // 管理点击事件 manageEv(){ - this.dataList.forEach(item=>item.ifcheck=false) + // 重置所有商品不被选中 + this.dataList.forEach(item=>item.ifcheck=false); + // 管理状态的切换 管理/取消 this.ifManage = !this.ifManage; + // 设置底部全选框不被选中 + this.ifSelectAll = false; + }, + // 输入框获取焦点事件 + focusEv(num) { + // 储存当前商品的原始数值 + this.originalNum = num; + }, + // 输入框失去焦点事件 + blurEv(index,e) { + // 失去焦点时,获取当前输入框里的数值 + let currentNum = e.detail.value*1; + // 如果当前输入框的值不等于0或空,并且当前输入框的值大于最大值,当前商品的数量 = 最大值, 否则为当前输入框输入的值 + this.dataList[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum; } } } @@ -200,6 +244,10 @@ .active-item::before{ content: ''; display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); width: 20rpx; height: 20rpx; border-radius: 100%; @@ -211,7 +259,7 @@ .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-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF; padding: 20rpx 40rpx;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;} diff --git a/components/shopping-carts/cart-slide.vue b/components/shopping-carts/cart-slide.vue new file mode 100644 index 0000000..39277da --- /dev/null +++ b/components/shopping-carts/cart-slide.vue @@ -0,0 +1,267 @@ + + + + + diff --git a/components/swiper-tab/swiper-tab-slide.vue b/components/swiper-tab/swiper-tab-slide.vue index 4f34c01..0b64035 100644 --- a/components/swiper-tab/swiper-tab-slide.vue +++ b/components/swiper-tab/swiper-tab-slide.vue @@ -1,9 +1,9 @@