321 lines
7.4 KiB
Vue
321 lines
7.4 KiB
Vue
<template>
|
||
<!-- 购物车 页面 -->
|
||
<view class="content w-100 h-100">
|
||
<!-- <view>
|
||
<image src="../../static/font/search.png" mode=""></image>
|
||
</view> -->
|
||
<view class="header bg-linear-gradient x-text-white text-center">
|
||
<image src="../../static/my/left.png" mode="" class="goback" @click="back()"></image>
|
||
收藏商品
|
||
<view class="search">
|
||
<!-- <image src="../../static/font/search.png" mode=""></image> -->
|
||
</view>
|
||
<view class="edit_shoppingCar" @click="edit_shoppingCar()" v-if="isEdit==true">完成</view>
|
||
<view class="edit_shoppingCar" @click="edit_shoppingCar()" v-if="isEdit==false &&list.length>0">编辑</view>
|
||
</view>
|
||
<view class="list" v-if="list.length>0">
|
||
<view class="list_items" v-for="(item,index) in list" :key="index">
|
||
<checkbox-group class="block" style='padding:0 30upx 30upx'>
|
||
<view class=" d-flex a-center">
|
||
<view class="d-flex goods_items a-center w-100">
|
||
<checkbox-group @change="selected(item)" v-if="isEdit==true">
|
||
<checkbox class="xuanzhong" :checked="item.checked" />
|
||
</checkbox-group>
|
||
<view class="box_img" @click="goodsDetail(item)">
|
||
<image :src="'https://'+item.pc_thumb" mode="" class="h-100 w-100"></image>
|
||
</view>
|
||
<view class="goods_txt flex-1" @click="goodsDetail(item)">
|
||
<view class="font-weight">{{item.name}}</view>
|
||
<view class="">{{item.factory_name}}</view>
|
||
<view class="">{{item.spec_desc}}</view>
|
||
<view class="x-text-159">{{item.show_price}}</view>
|
||
</view>
|
||
<!-- <view class="goods_count d-flex">
|
||
<view class="bianji_cars_num bianji_cars_numJian" @click="reduse_goodsNum(index)">-</view>
|
||
<view class="bianji_cars_num bianji_cars_numAdd">{{goods_num}}</view>
|
||
<view class="bianji_cars_num bianji_cars_numAdd" @click="add_goodsNum(index)">+</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</checkbox-group>
|
||
<view class="line"></view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- <view class="settlement shadow d-flex a-center" v-if="isEdit==true">
|
||
|
||
</view> -->
|
||
<view class="settlement shadow d-flex a-center" v-if="isEdit==true">
|
||
<view class="all_choose">
|
||
<checkbox-group @change="selectedall()">
|
||
<checkbox class="quanxuananniu" :checked="allchecked" />全选
|
||
</checkbox-group>
|
||
</view>
|
||
<view class="x_textRight flex-1 d-flex text-right ml-5">
|
||
<view>已选:</view>
|
||
<view class="x-text-159"> {{jianshu}} </view>
|
||
<view>件</view>
|
||
</view>
|
||
<view class="x-bg-159 text-center del_goods bg-danger text-white" @click="del_goods()">删除</view>
|
||
</view>
|
||
<view class="no_list x_margin0auto" v-if="list.length<=0">
|
||
<image src="../../static/shoppingCart/nopic.png" mode="" class="no_list_img"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import X_goods from '../../utils/models/goods.js'
|
||
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
|
||
// import {Config} from '@/utils/config'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
allchecked: false, //默认全选为true，因为后台数据没有是否选中的信息
|
||
goods_num: 10, //商品当前数量
|
||
Stock: 20, //当前商品的总库存
|
||
isEdit: false, // 判断是否编辑购物车，true为编辑，false为不编辑
|
||
add_choose_checked: false,
|
||
list: [], // 数据
|
||
|
||
isChecked: false,
|
||
checkboxData: [{
|
||
'value': 0,
|
||
'label': '选项一'
|
||
}, {
|
||
'value': 1,
|
||
'label': '选项2'
|
||
}],
|
||
checkedArr: [], //复选框选中的值
|
||
allChecked: false, //是否全选
|
||
jianshu: 0, // 已选中的件数
|
||
goods_id: '',
|
||
goodsId_arr:[],
|
||
id: {}
|
||
}
|
||
},
|
||
comments: {
|
||
HeaderTop
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
mounted() {
|
||
this.collectList();
|
||
},
|
||
methods: {
|
||
// 删除收藏的商品
|
||
async del_goods() {
|
||
var newArr = this.list.filter(function(obj) {
|
||
return obj.checked == true;
|
||
});
|
||
newArr.map((item,index)=>{
|
||
this.goods_id += item.goods_id+','
|
||
this.goodsId_arr.push({"goods_id":item.goods_id})
|
||
});
|
||
|
||
//this.goods_id = this.goods_id.substr(0, this.goods_id.length - 1);
|
||
// let res = await X_goods.X_addCollect_app(JSON.stringify(this.goodsId_arr), 2)
|
||
let res = await X_goods.X_addCollect_app(this.goods_id, 2)
|
||
this.handleError(res, res => {
|
||
|
||
this.isEdit = false
|
||
this.collectList();
|
||
})
|
||
},
|
||
// 单个商品前的勾选
|
||
selected(item) {
|
||
|
||
item.checked = !item.checked
|
||
|
||
if (!item.checked) {
|
||
this.allchecked = false
|
||
this.jianshu--
|
||
} else {
|
||
this.jianshu++
|
||
const test = this.list.every(item => {
|
||
return item.checked === true
|
||
})
|
||
if (test) {
|
||
this.allchecked = true
|
||
} else {
|
||
this.allchecked = false
|
||
}
|
||
}
|
||
},
|
||
// 全选按钮
|
||
selectedall() {
|
||
this.allchecked = !this.allchecked;
|
||
this.jianshu = 0;
|
||
|
||
if (this.allchecked) {
|
||
this.list.map(item => {
|
||
item.checked = true
|
||
})
|
||
|
||
this.jianshu = this.jianshu + this.list.length
|
||
|
||
} else {
|
||
this.list.map(item => {
|
||
item.checked = false
|
||
|
||
})
|
||
}
|
||
},
|
||
// 商品收藏列表
|
||
async collectList() {
|
||
|
||
let res = await X_goods.x_Collectlsit()
|
||
this.handleError(res, res => {
|
||
|
||
this.list = res.data.data.list
|
||
|
||
this.list.map(item => {
|
||
item.checked = false
|
||
})
|
||
})
|
||
},
|
||
//去结算
|
||
to_pay() {
|
||
uni.navigateTo({
|
||
url: './sureOrder'
|
||
})
|
||
},
|
||
// 管理购物车
|
||
edit_shoppingCar() {
|
||
this.isEdit = !this.isEdit
|
||
},
|
||
// 进入商品详情页
|
||
goodsDetail(item) {
|
||
console.log(item,2)
|
||
if (this.isEdit == false) {
|
||
uni.navigateTo({
|
||
url:'../home/search-list?keyword='+item.name
|
||
})
|
||
}
|
||
},
|
||
back(){
|
||
uni.navigateBack(1)
|
||
},
|
||
// 登录
|
||
to_login() {
|
||
uni.navigateTo({
|
||
url: 'x_login'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
.header {
|
||
height: 148upx;
|
||
font-size: 32upx;
|
||
position: relative;
|
||
line-height: 194upx;
|
||
.goback{
|
||
position: absolute;
|
||
bottom:29upx;
|
||
left:31upx;
|
||
height:30.9upx;
|
||
width:18upx;
|
||
}
|
||
.edit_shoppingCar {
|
||
position: absolute;
|
||
bottom: -48upx;
|
||
right: 31upx;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
|
||
height: calc(100% - 248upx);
|
||
overflow-y: auto;
|
||
|
||
.list_items {
|
||
|
||
|
||
.box_img {
|
||
height: 153.3upx;
|
||
width: 270upx;
|
||
padding: 10upx 20upx;
|
||
margin: 0 10upx;
|
||
}
|
||
|
||
.goods_items {
|
||
position: relative;
|
||
|
||
.goods_count {
|
||
position: absolute;
|
||
bottom: -14upx;
|
||
right: 8upx;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.line {
|
||
height: 4upx;
|
||
background-color: #F2F2F2;
|
||
}
|
||
}
|
||
}
|
||
|
||
.no_list {
|
||
margin-top: 315upx;
|
||
text-align: center;
|
||
|
||
.no_list_img {
|
||
height: 198upx;
|
||
width: 395upx;
|
||
}
|
||
}
|
||
|
||
.settlement {
|
||
height: 100upx;
|
||
.all_choose {
|
||
width: 30%;
|
||
margin-left: 30upx;
|
||
}
|
||
|
||
.to_buy {
|
||
line-height: 100upx;
|
||
width: 260upx;
|
||
min-width: 224.6upx;
|
||
font-size: 34upx;
|
||
}
|
||
|
||
.add_toCollection {
|
||
border: 1upx solid #EDCA4A;
|
||
border-radius: 30upx;
|
||
|
||
line-height: 60upx;
|
||
width: 198.8upx;
|
||
color: #EDCA4A;
|
||
margin: 0 22px 0 30px;
|
||
}
|
||
|
||
.del_goods {
|
||
border: 1upx solid #EB5159;
|
||
// border-radius: 30upx;
|
||
width: 249.6upx;
|
||
height: 100upx;
|
||
line-height: 100upx;
|
||
color: #EB5159;
|
||
border: 1upx solid #EB5159;
|
||
background-color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
// .search{
|
||
// border: 1rpx solid #007AFF;
|
||
// width: 40.9upx;height: 40.9upx;
|
||
// position: absolute;
|
||
// bottom: -48upx;
|
||
// right: 150upx;
|
||
// }
|
||
}
|
||
</style>
|