You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
494 lines
11 KiB
494 lines
11 KiB
2 years ago
|
<template>
|
||
|
|
<view class="cart-container backcor9">
|
||
|
|
<scroll-view :scroll-y="true" class="cart-list">
|
||
|
|
|
||
|
|
<uni-swipe-action>
|
||
|
|
|
||
|
|
<!-- 从这里开始遍历-->
|
||
|
|
<view v-for="(item,index) in cartList" :class="(item.isFailure?' isFailure ':' ')+'marb10 border-8r backcolorfff paading10'" :key="item.id">
|
||
|
|
|
||
|
|
<!-- :disabled="item.isFailure" -->
|
||
|
|
<uni-swipe-action-item :auto-close="autoClose" :right-options="swipe_options" @click="swipe_opt_event" @change="swipe_change($event, item.id)">
|
||
|
|
|
||
|
|
<view class="cart-container2">
|
||
|
|
<checkbox-group @change="checkClick(item)">
|
||
|
|
<checkbox class="mycheck" :disabled="!isEdit&&item.isFailure" color="#FFC71E" :value="item.id" :checked="item.checked" />
|
||
|
|
</checkbox-group>
|
||
|
|
<view class="cart-detail">
|
||
|
|
<view class="cart-img">
|
||
|
|
<image :src="item.img" class="img border-8r" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
<view class="cart-msg">
|
||
|
|
<view class="">
|
||
|
|
<view class="cart-msg-title font16 marb10 mart5">{{item.name}}</view>
|
||
|
|
<view class="cart-msg-parm font13 marb10 fcor777">珍珠米5斤</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="cart-msg-price">
|
||
|
|
<view class="cart-price font16 fcorred">
|
||
|
|
<!-- ¥ <text class="font20">18 </text>.8 -->
|
||
|
|
¥{{item.price}}
|
||
|
|
</view>
|
||
|
|
<view class="cart-num">
|
||
|
|
<!-- @blur="blur" @focus="focus" -->
|
||
|
|
<uni-number-box v-model="item.num" :min="1" @noMoreLess="noMoreLess" @change="changeNumValue" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-swipe-action-item>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<noMore></noMore>
|
||
|
|
|
||
|
|
</uni-swipe-action>
|
||
|
|
|
||
|
|
</scroll-view>
|
||
|
|
<view class="cart-tool bg-white">
|
||
|
|
<view class="select-all">
|
||
|
|
<checkbox-group @change="checkAllClick" >
|
||
|
|
<label >
|
||
|
|
<!-- :disabled="cartList.length == 0" -->
|
||
|
|
<checkbox class="mycheck" color="#FFC71E" :value="allCheck.value" :checked="allCheck.checked" />
|
||
|
|
<text class="paddleft5 font16 fcor777">全选</text>
|
||
|
|
</label>
|
||
|
|
<!-- -->
|
||
|
|
</checkbox-group>
|
||
|
|
<text v-if="!isEdit" class="paddleft5 fcorred" @click="editDelete" >编辑</text>
|
||
|
|
<text v-if="isEdit" class="icon-ymt delete paddleft5 fcorred" @click="deleteCart"></text>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<text v-if="isEdit" class="tool-right paddleft5 fcorred" @click="editDelete">退出编辑</text>
|
||
|
|
<view v-if="!isEdit" class="tool-right">
|
||
|
|
<view class="tool-jiesuan marRight10 ">
|
||
|
|
合计:<text class="fcorred">¥{{priceAll}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="jiesuan-btn fcorfff " @click="settleAccount">
|
||
|
|
结算
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import cartList from '@/pages/classify/cart-list/cart-list.vue'
|
||
|
|
import noMore from '@/pages/classify/no-more/no-more.vue'
|
||
|
|
import uniNumberBox from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue'
|
||
|
|
export default {
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
cartList:[],
|
||
|
|
|
||
|
|
|
||
|
|
checkList:[],
|
||
|
|
allCheck:{
|
||
|
|
name:'全选',
|
||
|
|
checked:false,
|
||
|
|
value:'all'
|
||
|
|
},
|
||
|
|
|
||
|
|
//
|
||
|
|
swipe_options:[
|
||
|
|
{
|
||
|
|
isCheck:false,
|
||
|
|
text: "收藏",
|
||
|
|
icon:' shoucang32 ',
|
||
|
|
style: {
|
||
|
|
backgroundColor: '#f6c133'
|
||
|
|
}
|
||
|
|
},{
|
||
|
|
text: '删除',
|
||
|
|
icon:' delete ',
|
||
|
|
style: {
|
||
|
|
backgroundColor: '#E64340'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
swipe_item_index: null,
|
||
|
|
numberValue:0,
|
||
|
|
cartList:[],
|
||
|
|
autoClose:false,
|
||
|
|
// listSelect:[],
|
||
|
|
|
||
|
|
isEdit:false,
|
||
|
|
showAction:'none'
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components:{
|
||
|
|
// cartList,
|
||
|
|
noMore,
|
||
|
|
"uni-number-box":uniNumberBox
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
priceAll(){
|
||
|
|
//总计金额
|
||
|
|
var str = 0;
|
||
|
|
for (var i = 0; i < this.cartList.length; i++) {
|
||
|
|
if (this.cartList[i].checked) {
|
||
|
|
str += this.cartList[i].num * this.cartList[i].price;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return str;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(){
|
||
|
|
this.cartList=[
|
||
|
|
{id:111,name:"小香风",isFailure:true,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:20,num:1},
|
||
|
|
{id:222,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:30,num:1},
|
||
|
|
{id:333,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:20,num:1},
|
||
|
|
{id:444,name:"小香风",isFailure:false,img:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",title:"夏季复古ins风格网红SP同款",price:30,num:1},
|
||
|
|
]
|
||
|
|
this.cartList.map(item=>{
|
||
|
|
this.$set(item, 'checked', false);
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
editDelete(){
|
||
|
|
this.isEdit = !this.isEdit;
|
||
|
|
if(!this.isEdit){//退出编辑
|
||
|
|
this.cartList.map(item=>{
|
||
|
|
if(item.checked&&item.isFailure){
|
||
|
|
item.checked = false;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}else{//进入编辑
|
||
|
|
if(this.allCheck.checked){
|
||
|
|
this.cartList.map(item=>{
|
||
|
|
item.checked = true;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
// 全选的点击事件
|
||
|
|
checkAllClick(e) {
|
||
|
|
this.allCheck.checked = !this.allCheck.checked;
|
||
|
|
if (this.allCheck.checked) {
|
||
|
|
this.cartList.map(item => {
|
||
|
|
if(!this.isEdit){//商品的全选事件
|
||
|
|
if(!item.isFailure){
|
||
|
|
item.checked = true
|
||
|
|
}
|
||
|
|
}else{//编辑的全选事件
|
||
|
|
item.checked = true
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
this.cartList.map(item => {
|
||
|
|
item.checked = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 单个商品的选择
|
||
|
|
checkClick(item) {
|
||
|
|
item.checked = !item.checked
|
||
|
|
|
||
|
|
if (!item.checked) {
|
||
|
|
if(!this.isEdit&&!item.isFailure){//商品
|
||
|
|
this.allCheck.checked = false
|
||
|
|
}else if(this.isEdit){
|
||
|
|
this.allCheck.checked = false
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
// 判断每一个商品是否是被选择的状态
|
||
|
|
const goods = this.cartList.every(item => {
|
||
|
|
if(!this.isEdit){//商品
|
||
|
|
if(item.isFailure){
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
return item.checked === true
|
||
|
|
})
|
||
|
|
if (goods) {
|
||
|
|
this.allCheck.checked = true
|
||
|
|
} else {
|
||
|
|
this.allCheck.checked = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 判断购物车内是否有商品
|
||
|
|
isHaveGoods(){
|
||
|
|
if(this.cartList.length == 0){
|
||
|
|
uni.showToast({
|
||
|
|
title: '购物车内暂无商品喔',
|
||
|
|
duration: 1000,
|
||
|
|
icon:'none'
|
||
|
|
});
|
||
|
|
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
|
||
|
|
// 购物车删除
|
||
|
|
deleteCart() {
|
||
|
|
if(!this.isHaveGoods()) return;
|
||
|
|
var select = [];
|
||
|
|
for (var i = 0; i < this.cartList.length; i++) {
|
||
|
|
if (this.cartList[i].checked) {
|
||
|
|
select.push(this.cartList[i].id)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(select.length == 0){
|
||
|
|
uni.showToast({
|
||
|
|
title: '请勾选要移除购物车的商品',
|
||
|
|
duration: 1000,
|
||
|
|
icon:'none'
|
||
|
|
});
|
||
|
|
return
|
||
|
|
}else{
|
||
|
|
|
||
|
|
console.log(select,"要移除的商品id")
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
// 结算
|
||
|
|
settleAccount(){
|
||
|
|
if(!this.isHaveGoods()) return;
|
||
|
|
|
||
|
|
if(this.priceAll > 0){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pages/settleAccounts/settleAccounts'
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
uni.showToast({
|
||
|
|
title: '请勾选要购买的商品',
|
||
|
|
duration: 1000,
|
||
|
|
icon:'none'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
// 滑动点击
|
||
|
|
swipe_opt_event(e){
|
||
|
|
console.log(e,"dianji")
|
||
|
|
|
||
|
|
if(e.index == 0){//收藏
|
||
|
|
|
||
|
|
// console.log(e.content.isCheck)
|
||
|
|
// e.content.isCheck=!e.content.isCheck
|
||
|
|
|
||
|
|
// if(e.content.isCheck){
|
||
|
|
// e.content.icon=" shoucang32-select "
|
||
|
|
// }else{
|
||
|
|
// e.content.icon=" shoucang32 "
|
||
|
|
// }
|
||
|
|
this.showAction = 'right'
|
||
|
|
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if(e.index == 1){//删除
|
||
|
|
|
||
|
|
this.noMoreLess()
|
||
|
|
|
||
|
|
|
||
|
|
// this.showAction = 'right';
|
||
|
|
|
||
|
|
return
|
||
|
|
}
|
||
|
|
// var index = e.index || 0;
|
||
|
|
// var temp_data_list = this.data_list;
|
||
|
|
// if(this.swipe_item_index === null) {
|
||
|
|
// app.globalData.showToast("请先滑动要操作的数据");
|
||
|
|
// return false;
|
||
|
|
// }
|
||
|
|
// if((temp_data_list[this.swipe_item_index] || null) == null) {
|
||
|
|
// app.globalData.showToast("数据不存在");
|
||
|
|
// return false;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// // 根据操作类型处理数据
|
||
|
|
// var id = temp_data_list[this.swipe_item_index]['id'];
|
||
|
|
// if (index == 0) {
|
||
|
|
// var goods_id = temp_data_list[this.swipe_item_index]['goods_id'];
|
||
|
|
// this.goods_favor_delete(id, goods_id, 'favor');
|
||
|
|
// } else {
|
||
|
|
// this.cart_delete(id, 'delete');
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
// 滑动事件
|
||
|
|
swipe_change(e, id) {
|
||
|
|
console.log(e,id)
|
||
|
|
// this.swipe_item_index= (e == 'none') ? null : v
|
||
|
|
|
||
|
|
},
|
||
|
|
noMoreLess(){
|
||
|
|
let _this = this;
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: '确定把该商品移除购物车吗?',
|
||
|
|
success: function (res) {
|
||
|
|
if (res.confirm) {
|
||
|
|
console.log('用户点击确定');
|
||
|
|
} else if (res.cancel) {
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
console.log('用户点击取消');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
changeNumValue(v){
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
|
||
|
|
.bg-white{
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cart-container{
|
||
|
|
height: 100vh;
|
||
|
|
padding: 10px 20rpx 0px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cart-list{
|
||
|
|
height: calc(100vh - 70px);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 列表
|
||
|
|
.cart-container2{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.mycheck{
|
||
|
|
// margin:0 20rpx;
|
||
|
|
}
|
||
|
|
.cart-detail{
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 10rpx;
|
||
|
|
.cart-img{
|
||
|
|
|
||
|
|
.img{
|
||
|
|
vertical-align: middle;
|
||
|
|
width: 200rpx;
|
||
|
|
height: 200rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.cart-msg{
|
||
|
|
flex: 1;
|
||
|
|
align-self: flex-start;
|
||
|
|
padding-left: 20rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
.cart-msg-title{
|
||
|
|
|
||
|
|
}
|
||
|
|
.cart-msg-parm{
|
||
|
|
|
||
|
|
}
|
||
|
|
.cart-msg-price{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
.cart-price{
|
||
|
|
|
||
|
|
}
|
||
|
|
.cart-num{
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 失效
|
||
|
|
.isFailure{
|
||
|
|
.cart-img{
|
||
|
|
position: relative;
|
||
|
|
:before{
|
||
|
|
content: '商品失效';
|
||
|
|
display: block;
|
||
|
|
height: 20rpx;
|
||
|
|
width: 120rpx;
|
||
|
|
line-height: 20rpx;
|
||
|
|
padding: 20rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background-color: #E6E6E6;
|
||
|
|
position: absolute;
|
||
|
|
top: calc(50% - 30rpx);
|
||
|
|
left:20rpx;
|
||
|
|
z-index: 10;
|
||
|
|
font-size: 28rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
background-color: #ffffff;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 底部
|
||
|
|
.cart-tool{
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 10px;
|
||
|
|
height: 60px;
|
||
|
|
// line-height: 60px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
.select-all{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.tool-right{
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
.tool-jiesuan{
|
||
|
|
|
||
|
|
}
|
||
|
|
.jiesuan-btn{
|
||
|
|
width: 200rpx;
|
||
|
|
height:40px;
|
||
|
|
line-height: 40px;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 20px;
|
||
|
|
background: linear-gradient(to right,#FFCC1E,#FF8F19);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|