chen
/
appApplet
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新增购物车组件、优化tools.js中给数字添加两位小数方法

master
chen 2022-05-07 19:26:04 +08:00
parent 324bde530f
commit 5352140914
9 changed files with 306 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
commons/icon-font.css
View File

@ -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";
}

4
components/foot-tabs/foot-tab.vue
View File

@ -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",

219
components/shopping-carts/cart-one.vue Normal file
View File

@ -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>

2
components/swiper-tab/swiper-tab-slide.vue
View File

@ -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>

10
jsFile/tools.js
View File

@ -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:+加、-减、*乘、/除

9
pages.json
View File

@ -61,6 +61,15 @@
"enablePullDownRefresh": false
}
}
,{
"path" : "shopping-cart/shopping-cart",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
},

4
pages/tabbar/feedback/feedback.vue
View File

@ -1,6 +1,10 @@
<template>
<view>
<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>

21
pages/tabbar/project-list/project-list.vue
View File

@ -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>

30
pagesA/shopping-cart/shopping-cart.vue Normal file
View File

@ -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>