first commit
This commit is contained in:
编码猿
320
金壶/appV1/pages/my/collect.vue
Normal file
320
金壶/appV1/pages/my/collect.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user