1268 lines
32 KiB
Vue
1268 lines
32 KiB
Vue
<template>
|
||
<view class="container">
|
||
<u-navbar title="购物车" bgColor="transparent">
|
||
<view class="u-nav-slot" slot="left"></view>
|
||
<view class="u-nav-slot" slot="right" @tap="isManager = !isManager">管理</view>
|
||
</u-navbar>
|
||
<view class="bg">
|
||
<image src="@/static/images/shop/cart_bg.png"></image>
|
||
</view>
|
||
<view class="box">
|
||
<view class="item" v-for="(item,index) in cartList.valid" :key="item.attrId">
|
||
<view class="item-list" v-if="cartList.valid.length>0">
|
||
<view style="height: 1rpx;"></view>
|
||
<view class="top">
|
||
<text class="shopName">{{item.storeName}}</text>
|
||
</view>
|
||
<view class="content">
|
||
<text :class="[reChecked(item)?'checkedIcon':'noCheckIcon']" @tap="reelect(item,index)"
|
||
style="margin-left: 26rpx;"></text>
|
||
<view class="image">
|
||
<image :src="item.image" style="border-radius: 10rpx;"></image>
|
||
</view>
|
||
<view class="detail" @tap="goDetail(item)">
|
||
<view class="name">
|
||
{{item.storeName}}
|
||
</view>
|
||
<view class="model">
|
||
{{item.storeName}}
|
||
</view>
|
||
<view class="price">
|
||
<u--text class="text" color="#E50202" mode="price" :text="item.price"></u--text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="sum">x{{item.cartNum}}</view> -->
|
||
<view class="numberBox">
|
||
<u-number-box v-model="cartNum" min="0">
|
||
<view @tap="ChangeCartCountJian(item,index)" slot="minus" class="minus">
|
||
<u-icon name="minus" size="12"></u-icon>
|
||
</view>
|
||
<text slot="input" style="width: 50px;text-align: center;"
|
||
class="input">{{item.cartNum}}</text>
|
||
<view slot="plus" class="plus" @tap="ChangeCartCountJia(item,index)">
|
||
<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
|
||
</view>
|
||
</u-number-box>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
<view class="item" style="width: 669rpx;height: 800rpx;background: transparent;" v-if="cartList.valid.length==0">
|
||
<u-empty width="669rpx" height="100%" marginTop="200rpx" mode="car"></u-empty>
|
||
</view>
|
||
</view>
|
||
<view class="fixed" v-if="isManager">
|
||
<view class="all" @tap="allCheck">
|
||
<text :class="[isAllSelect?'checkedIcon':'noCheckIcon']"></text>
|
||
<text>全选</text>
|
||
</view>
|
||
<view class="allPrice">合计 <u--text class="text" color="#E50202" mode="price" :text="priceAll"></u--text>
|
||
</view>
|
||
<view class="closeAll" @tap="subOrder">结算({{allCountval}})</view>
|
||
</view>
|
||
<view class="fixed" v-if="!isManager">
|
||
<view class="all" @tap="allCheck">
|
||
<text :class="[isAllSelect?'checkedIcon':'noCheckIcon']"></text>
|
||
<text>全选</text>
|
||
</view>
|
||
<!-- <view class="collect">收藏</view> -->
|
||
<view class="delAll" @tap="subDel">删除</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let sysHeight = 0
|
||
import {
|
||
getCartList,
|
||
getCartCounts,
|
||
changeCartNum,
|
||
cartDel,
|
||
getResetCart
|
||
} from '@/api/order.js';
|
||
import Vue from 'vue'
|
||
import {
|
||
getProductHot,
|
||
collectAll,
|
||
getProductDetail
|
||
} from '@/api/store.js';
|
||
import {
|
||
toLogin
|
||
} from '@/libs/login.js';
|
||
import {
|
||
mapGetters
|
||
} from "vuex";
|
||
import recommend from '@/components/recommend';
|
||
import productWindow from '@/components/productWindow';
|
||
// #ifdef MP
|
||
import authorize from '@/components/Authorize';
|
||
import {
|
||
login
|
||
} from '../../api/public';
|
||
// #endif
|
||
export default {
|
||
components: {
|
||
recommend,
|
||
productWindow,
|
||
// #ifdef MP
|
||
authorize
|
||
// #endif
|
||
},
|
||
data() {
|
||
return {
|
||
cartCount: 0,
|
||
goodsHidden: false,
|
||
footerswitch: true,
|
||
hostProduct: [],
|
||
cartList: {
|
||
valid: [],
|
||
invalid: []
|
||
},
|
||
cartNum: 0,
|
||
isManager: true,
|
||
isAllSelect: false, //全选
|
||
selectValue: [], //选中的数据
|
||
selectCountPrice: 0.00,
|
||
isAuto: false, //没有授权的不会自动授权
|
||
isShowAuth: false, //是否隐藏授权
|
||
hotScroll: false,
|
||
hotPage: 1,
|
||
value: '',
|
||
radiolist1: [{
|
||
name: '全选',
|
||
disabled: false
|
||
}],
|
||
checkboxValue1: [],
|
||
// 基本案列数据
|
||
checkboxList1: [{
|
||
firmId: 101,
|
||
firmName: '商铺名称',
|
||
selectedAll: false,
|
||
goods: [{
|
||
id: 1,
|
||
img: '@/static/images/shop/shoes.png',
|
||
name: '商品标题1',
|
||
spec: '规格:S码',
|
||
price: 127.5,
|
||
number: 1,
|
||
selected: false
|
||
}, {
|
||
id: 2,
|
||
img: '@/static/images/shop/shoes.png',
|
||
name: '标商品标题商品标题商品标',
|
||
spec: '规格:S码',
|
||
price: 2.5,
|
||
number: 2,
|
||
selected: false
|
||
}]
|
||
}, ],
|
||
hotLimit: 10,
|
||
loading: false,
|
||
loadend: false,
|
||
loadTitle: '加载更多', //提示语
|
||
page: 1,
|
||
limit: 20,
|
||
loadingInvalid: false,
|
||
loadendInvalid: false,
|
||
loadTitleInvalid: '加载更多', //提示语
|
||
pageInvalid: 1,
|
||
priceAll: 0,
|
||
limitInvalid: 20,
|
||
attr: {
|
||
cartAttr: false,
|
||
productAttr: [],
|
||
productSelect: {}
|
||
},
|
||
productValue: [], //系统属性
|
||
productInfo: {},
|
||
attrValue: '', //已选属性
|
||
attrTxt: '请选择', //属性页面提示
|
||
cartId: 0,
|
||
product_id: 0,
|
||
sysHeight: sysHeight,
|
||
canShow: false
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters(['isLogin', 'uid']),
|
||
reChecked() {
|
||
return item => {
|
||
return item.checked
|
||
}
|
||
},
|
||
allSelectval() {
|
||
let count = 0
|
||
this.cartList.valid.forEach(item => {
|
||
if (item.checked) {
|
||
count += 1
|
||
}
|
||
})
|
||
if (count == this.cartList.valid.length) {
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
allCountval() {
|
||
this.priceAll = 0
|
||
let count = 0
|
||
this.cartList.valid.forEach(item => {
|
||
let price = 0
|
||
if (item.checked) {
|
||
count += 1
|
||
price = item.price * item.cartNum
|
||
this.priceAll = this.priceAll + price
|
||
}
|
||
})
|
||
return count
|
||
}
|
||
},
|
||
onLoad: function(options) {
|
||
let that = this;
|
||
console.log(that.isAllSelect, 'isAllselect')
|
||
that.cartList.valid.forEach((item, index) => {
|
||
if (!item.checked) {
|
||
that.isAllSelect = false
|
||
return
|
||
}
|
||
})
|
||
if (that.isLogin == false) {
|
||
toLogin();
|
||
}
|
||
},
|
||
onShow: function() {
|
||
this.canShow = false
|
||
if (this.isLogin == true) {
|
||
this.hotPage = 1;
|
||
this.hostProduct = [],
|
||
this.hotScroll = false,
|
||
this.loadend = false;
|
||
this.page = 1;
|
||
this.cartList.valid = [];
|
||
this.getCartList();
|
||
this.loadendInvalid = false;
|
||
this.pageInvalid = 1;
|
||
this.cartList.invalid = [];
|
||
this.getInvalidList();
|
||
//this.getCartNum();
|
||
this.footerswitch = true;
|
||
this.hotScroll = false;
|
||
this.hotPage = 1;
|
||
this.hotLimit = 10;
|
||
this.cartList = {
|
||
valid: [],
|
||
invalid: []
|
||
},
|
||
this.isAllSelect = false; //全选
|
||
this.selectValue = []; //选中的数据
|
||
this.selectCountPrice = 0.00;
|
||
this.cartCount = 0;
|
||
this.isShowAuth = false;
|
||
};
|
||
},
|
||
methods: {
|
||
// 商品详情页跳转
|
||
goDetail(item) {
|
||
if (item.activityH5 && item.activityH5.type === "2" && !this.isLogin) {
|
||
toLogin();
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/goods_details/index?id=${item.productId}`
|
||
})
|
||
}
|
||
},
|
||
// 全选
|
||
allCheck() {
|
||
this.isAllSelect = !this.isAllSelect
|
||
if (this.isAllSelect) {
|
||
this.cartList.valid.forEach((item, index) => {
|
||
item.checked = true
|
||
Vue.set(this.cartList.valid, index, item)
|
||
Vue.set(this.cartList, 'valid', this.cartList.valid)
|
||
})
|
||
} else {
|
||
this.cartList.valid.forEach((item, index) => {
|
||
this.priceAll = 0
|
||
item.checked = false
|
||
Vue.set(this.cartList.valid, index, item)
|
||
Vue.set(this.cartList, 'valid', this.cartList.valid)
|
||
})
|
||
}
|
||
},
|
||
// 购物车重选
|
||
reelect(item, index) {
|
||
console.log(item, 'item哇')
|
||
// let reCheck = {
|
||
// id: item.id,
|
||
// num: item.cartNum+2,
|
||
// productId: item.productId,
|
||
// unique: item.productAttrUnique
|
||
// }
|
||
// getResetCart(reCheck).then(res=> {
|
||
// console.log('重选成功')
|
||
// })
|
||
this.allCountval
|
||
item.checked = !item.checked
|
||
// this.priceAll -= item.price * item.cartNum
|
||
Vue.set(this.cartList.valid, index, item)
|
||
Vue.set(this.cartList, 'valid', this.cartList.valid)
|
||
|
||
},
|
||
//购物车商品数量增加
|
||
ChangeCartCountJia(item, index) {
|
||
item.cartNum += 1
|
||
console.log(item, 'jiajiajia')
|
||
changeCartNum(item.id, item.cartNum).then(res => {
|
||
Vue.set(this.cartList.valid, index, item)
|
||
Vue.set(this.cartList, 'valid', this.cartList.valid)
|
||
})
|
||
|
||
},
|
||
// 购物车商品数量减少
|
||
ChangeCartCountJian(item, index) {
|
||
item.cartNum -= 1
|
||
changeCartNum(item.id, item.cartNum).then(res => {
|
||
Vue.set(this.cartList.valid, index, item)
|
||
Vue.set(this.cartList, 'valid', this.cartList.valid)
|
||
})
|
||
},
|
||
// 授权关闭
|
||
authColse: function(e) {
|
||
this.isShowAuth = e;
|
||
},
|
||
// 修改购物车
|
||
reGoCat: function() {
|
||
let that = this,
|
||
productSelect = that.productValue[this.attrValue];
|
||
//如果有属性,没有选择,提示用户选择
|
||
if (
|
||
that.attr.productAttr.length &&
|
||
productSelect === undefined
|
||
)
|
||
return that.$util.Tips({
|
||
title: "产品库存不足，请选择其它"
|
||
});
|
||
|
||
let q = {
|
||
id: that.cartId,
|
||
productId: that.product_id,
|
||
num: that.attr.productSelect.cart_num,
|
||
unique: that.attr.productSelect !== undefined ?
|
||
that.attr.productSelect.unique : that.productInfo.id
|
||
};
|
||
getResetCart(q)
|
||
.then(function(res) {
|
||
that.attr.cartAttr = false;
|
||
that.$util.Tips({
|
||
title: "添加购物车成功",
|
||
success: () => {
|
||
that.loadend = false;
|
||
that.page = 1;
|
||
that.cartList.valid = [];
|
||
that.getCartList();
|
||
that.getCartNum();
|
||
}
|
||
});
|
||
})
|
||
.catch(res => {
|
||
return that.$util.Tips({
|
||
title: res
|
||
});
|
||
});
|
||
},
|
||
onMyEvent: function() {
|
||
this.$set(this.attr, 'cartAttr', false);
|
||
},
|
||
reElection: function(item) {
|
||
this.getGoodsDetails(item)
|
||
},
|
||
/**
|
||
* 获取产品详情
|
||
*
|
||
*/
|
||
getGoodsDetails: function(item) {
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
});
|
||
let that = this;
|
||
that.cartId = item.id;
|
||
that.product_id = item.productId;
|
||
getProductDetail(item.productId).then(res => {
|
||
uni.hideLoading();
|
||
that.attr.cartAttr = true;
|
||
let productInfo = res.data.productInfo;
|
||
that.$set(that, 'productInfo', productInfo);
|
||
that.$set(that.attr, 'productAttr', res.data.productAttr);
|
||
that.$set(that, 'productValue', res.data.productValue);
|
||
that.DefaultSelect();
|
||
}).catch(err => {
|
||
uni.hideLoading();
|
||
})
|
||
},
|
||
/**
|
||
* 属性变动赋值
|
||
*
|
||
*/
|
||
ChangeAttr: function(res) {
|
||
let productSelect = this.productValue[res];
|
||
if (productSelect && productSelect.stock > 0) {
|
||
this.$set(this.attr.productSelect, "image", productSelect.image);
|
||
this.$set(this.attr.productSelect, "price", productSelect.price);
|
||
this.$set(this.attr.productSelect, "stock", productSelect.stock);
|
||
this.$set(this.attr.productSelect, "unique", productSelect.id);
|
||
this.$set(this.attr.productSelect, "cart_num", 1);
|
||
this.$set(this, "attrValue", res);
|
||
this.$set(this, "attrTxt", "已选择");
|
||
} else {
|
||
this.$set(this.attr.productSelect, "image", this.productInfo.image);
|
||
this.$set(this.attr.productSelect, "price", this.productInfo.price);
|
||
this.$set(this.attr.productSelect, "stock", 0);
|
||
this.$set(this.attr.productSelect, "unique", this.productInfo.id);
|
||
this.$set(this.attr.productSelect, "cart_num", 0);
|
||
this.$set(this, "attrValue", "");
|
||
this.$set(this, "attrTxt", "请选择");
|
||
}
|
||
},
|
||
/**
|
||
* 默认选中属性
|
||
*
|
||
*/
|
||
DefaultSelect: function() {
|
||
let productAttr = this.attr.productAttr;
|
||
let value = [];
|
||
for (let key in this.productValue) {
|
||
if (this.productValue[key].stock > 0) {
|
||
value = this.attr.productAttr.length ? key.split(",") : [];
|
||
break;
|
||
}
|
||
}
|
||
for (let i = 0; i < productAttr.length; i++) {
|
||
this.$set(productAttr[i], "index", value[i]);
|
||
}
|
||
//sort();排序函数:数字-英文-汉字；
|
||
let productSelect = this.productValue[value.sort().join(",")];
|
||
if (productSelect && productAttr.length) {
|
||
this.$set(
|
||
this.attr.productSelect,
|
||
"storeName",
|
||
this.productInfo.storeName
|
||
);
|
||
this.$set(this.attr.productSelect, "image", productSelect.image);
|
||
this.$set(this.attr.productSelect, "price", productSelect.price);
|
||
this.$set(this.attr.productSelect, "stock", productSelect.stock);
|
||
this.$set(this.attr.productSelect, "unique", productSelect.id);
|
||
this.$set(this.attr.productSelect, "cart_num", 1);
|
||
this.$set(this, "attrValue", value.sort().join(","));
|
||
this.$set(this, "attrTxt", "已选择");
|
||
} else if (!productSelect && productAttr.length) {
|
||
this.$set(
|
||
this.attr.productSelect,
|
||
"storeName",
|
||
this.productInfo.storeName
|
||
);
|
||
this.$set(this.attr.productSelect, "image", this.productInfo.image);
|
||
this.$set(this.attr.productSelect, "price", this.productInfo.price);
|
||
this.$set(this.attr.productSelect, "stock", 0);
|
||
this.$set(this.attr.productSelect, "unique", this.productInfo.id);
|
||
this.$set(this.attr.productSelect, "cart_num", 0);
|
||
this.$set(this, "attrValue", "");
|
||
this.$set(this, "attrTxt", "请选择");
|
||
} else if (!productSelect && !productAttr.length) {
|
||
this.$set(
|
||
this.attr.productSelect,
|
||
"storeName",
|
||
this.productInfo.storeName
|
||
);
|
||
this.$set(this.attr.productSelect, "image", this.productInfo.image);
|
||
this.$set(this.attr.productSelect, "price", this.productInfo.price);
|
||
this.$set(this.attr.productSelect, "stock", this.productInfo.stock);
|
||
this.$set(
|
||
this.attr.productSelect,
|
||
"unique",
|
||
this.productInfo.id || ""
|
||
);
|
||
this.$set(this.attr.productSelect, "cart_num", 1);
|
||
this.$set(this, "attrValue", "");
|
||
this.$set(this, "attrTxt", "请选择");
|
||
}
|
||
},
|
||
attrVal(val) {
|
||
this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attrValues[val
|
||
.indexn]);
|
||
},
|
||
/**
|
||
* 购物车数量加和数量减
|
||
*
|
||
*/
|
||
ChangeCartNum: function(changeValue) {
|
||
//changeValue:是否 加|减
|
||
//获取当前变动属性
|
||
let productSelect = this.productValue[this.attrValue];
|
||
//如果没有属性,赋值给商品默认库存
|
||
if (productSelect === undefined && !this.attr.productAttr.length)
|
||
productSelect = this.attr.productSelect;
|
||
//无属性值即库存为0；不存在加减；
|
||
if (productSelect === undefined) return;
|
||
let stock = productSelect.stock || 0;
|
||
let num = this.attr.productSelect;
|
||
if (changeValue) {
|
||
num.cart_num++;
|
||
if (num.cart_num > stock) {
|
||
this.$set(this.attr.productSelect, "cart_num", stock ? stock : 1);
|
||
this.$set(this, "cart_num", stock ? stock : 1);
|
||
}
|
||
} else {
|
||
num.cart_num--;
|
||
if (num.cart_num < 1) {
|
||
this.$set(this.attr.productSelect, "cart_num", 1);
|
||
this.$set(this, "cart_num", 1);
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 购物车手动填写
|
||
*
|
||
*/
|
||
iptCartNum: function(e) {
|
||
this.$set(this.attr.productSelect, 'cart_num', e);
|
||
},
|
||
subDel: function(event) {
|
||
let selectValue = []
|
||
this.cartList.valid.forEach(item => {
|
||
if (item.checked && (selectValue.indexOf(item.id) < 0)) {
|
||
selectValue.push(item.id)
|
||
}
|
||
})
|
||
console.log(selectValue, '000000')
|
||
this.selectValue = selectValue
|
||
let that = this
|
||
if (selectValue.length > 0)
|
||
cartDel(selectValue).then(res => {
|
||
that.loadend = false;
|
||
that.page = 1;
|
||
that.cartList.valid = [];
|
||
that.getCartList();
|
||
that.getCartNum();
|
||
});
|
||
else
|
||
return that.$util.Tips({
|
||
title: '请选择产品'
|
||
});
|
||
},
|
||
getSelectValueProductId: function() {
|
||
let that = this;
|
||
let validList = that.cartList.valid;
|
||
let selectValue = that.selectValue;
|
||
let productId = [];
|
||
if (selectValue.length > 0) {
|
||
for (let index in validList) {
|
||
if (that.inArray(validList[index].id, selectValue)) {
|
||
productId.push(validList[index].productId);
|
||
}
|
||
}
|
||
};
|
||
return productId;
|
||
},
|
||
subCollect: function(event) {
|
||
let that = this
|
||
selectValue = that.selectValue;
|
||
if (selectValue.length > 0) {
|
||
let selectValueProductId = that.getSelectValueProductId();
|
||
collectAll(that.getSelectValueProductId()).then(res => {
|
||
return that.$util.Tips({
|
||
title: '收藏成功',
|
||
icon: 'success'
|
||
});
|
||
}).catch(err => {
|
||
return that.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
} else {
|
||
return that.$util.Tips({
|
||
title: '请选择产品'
|
||
});
|
||
}
|
||
},
|
||
// 立即下单
|
||
subOrder: function(event) {
|
||
let selectValue = []
|
||
this.cartList.valid.forEach(item => {
|
||
console.log(item, 99999999)
|
||
if (item.checked && (selectValue.indexOf(item.id) < 0)) {
|
||
selectValue.push(item.id)
|
||
}
|
||
|
||
})
|
||
this.selectValue = selectValue
|
||
let that = this
|
||
if (selectValue.length > 0) {
|
||
that.getPreOrder();
|
||
} else {
|
||
return that.$util.Tips({
|
||
title: '请选择产品'
|
||
});
|
||
}
|
||
},
|
||
/**
|
||
* 预下单
|
||
*/
|
||
getPreOrder: function() {
|
||
let shoppingCartId = this.selectValue.map(item => {
|
||
return {
|
||
"shoppingCartId": Number(item)
|
||
}
|
||
})
|
||
this.$Order.getPreOrder("shoppingCart", shoppingCartId);
|
||
},
|
||
checkboxAllChange: function(event) {
|
||
let value = event.detail.value;
|
||
if (value.length > 0) {
|
||
this.setAllSelectValue(1)
|
||
} else {
|
||
this.setAllSelectValue(0)
|
||
}
|
||
},
|
||
setAllSelectValue: function(status) {
|
||
let that = this;
|
||
let selectValue = [];
|
||
let valid = that.cartList.valid;
|
||
if (valid.length > 0) {
|
||
let newValid = valid.map(item => {
|
||
if (status) {
|
||
if (that.footerswitch) {
|
||
if (item.attrStatus) {
|
||
item.checked = true;
|
||
selectValue.push(item.id);
|
||
} else {
|
||
item.checked = false;
|
||
}
|
||
} else {
|
||
item.checked = true;
|
||
selectValue.push(item.id);
|
||
}
|
||
that.isAllSelect = true;
|
||
} else {
|
||
item.checked = false;
|
||
that.isAllSelect = false;
|
||
}
|
||
return item;
|
||
});
|
||
that.$set(that.cartList, 'valid', newValid);
|
||
that.selectValue = selectValue;
|
||
that.switchSelect();
|
||
}
|
||
},
|
||
checkboxChange: function(event) {
|
||
let that = this;
|
||
let value = event.detail.value;
|
||
let valid = that.cartList.valid;
|
||
let arr1 = [];
|
||
let arr2 = [];
|
||
let arr3 = [];
|
||
let newValid = valid.map(item => {
|
||
if (that.inArray(item.id, value)) {
|
||
if (that.footerswitch) {
|
||
if (item.attrStatus) {
|
||
item.checked = true;
|
||
arr1.push(item);
|
||
} else {
|
||
item.checked = false;
|
||
}
|
||
} else {
|
||
item.checked = true;
|
||
arr1.push(item);
|
||
}
|
||
} else {
|
||
item.checked = false;
|
||
arr2.push(item);
|
||
}
|
||
return item;
|
||
});
|
||
if (that.footerswitch) {
|
||
arr3 = arr2.filter(item => !item.attrStatus);
|
||
}
|
||
that.$set(that.cartList, 'valid', newValid);
|
||
// let newArr = that.cartList.valid.filter(item => item.attrStatus);
|
||
that.isAllSelect = newValid.length === arr1.length + arr3.length;
|
||
that.selectValue = value;
|
||
that.switchSelect();
|
||
},
|
||
inArray: function(search, array) {
|
||
for (let i in array) {
|
||
if (array[i] == search) {
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
},
|
||
switchSelect: function() {
|
||
let that = this;
|
||
let validList = that.cartList.valid;
|
||
let selectValue = that.selectValue;
|
||
let selectCountPrice = 0.00;
|
||
if (selectValue.length < 1) {
|
||
that.selectCountPrice = selectCountPrice;
|
||
} else {
|
||
for (let index in validList) {
|
||
if (that.inArray(validList[index].id, selectValue)) {
|
||
selectCountPrice = that.$util.$h.Add(selectCountPrice, that.$util.$h.Mul(validList[index]
|
||
.cartNum, validList[
|
||
index].price))
|
||
}
|
||
}
|
||
that.selectCountPrice = selectCountPrice;
|
||
}
|
||
},
|
||
/**
|
||
* 购物车手动填写
|
||
*
|
||
*/
|
||
iptCartNum: function(index) {
|
||
let item = this.cartList.valid[index];
|
||
if (item.cartNum) {
|
||
this.setCartNum(item.id, item.cartNum);
|
||
}
|
||
this.switchSelect();
|
||
},
|
||
blurInput: function(index) {
|
||
let item = this.cartList.valid[index];
|
||
if (!item.cartNum) {
|
||
item.cartNum = 1;
|
||
this.$set(this.cartList, 'valid', this.cartList.valid)
|
||
}
|
||
},
|
||
subCart: function(index) {
|
||
let that = this;
|
||
let status = false;
|
||
let item = that.cartList.valid[index];
|
||
item.cartNum = Number(item.cartNum) - 1;
|
||
if (item.cartNum < 1) status = true;
|
||
if (item.cartNum <= 1) {
|
||
item.cartNum = 1;
|
||
item.numSub = true;
|
||
} else {
|
||
item.numSub = false;
|
||
item.numAdd = false;
|
||
}
|
||
if (false == status) {
|
||
that.setCartNum(item.id, item.cartNum, function(data) {
|
||
that.cartList.valid[index] = item;
|
||
that.switchSelect();
|
||
that.getCartNum();
|
||
});
|
||
}
|
||
},
|
||
addCart: function(index) {
|
||
let that = this;
|
||
let item = that.cartList.valid[index];
|
||
item.cartNum = Number(item.cartNum) + 1;
|
||
let productInfo = item;
|
||
if (item.cartNum >= item.stock) {
|
||
item.cartNum = item.stock;
|
||
item.numAdd = true;
|
||
item.numSub = false;
|
||
} else {
|
||
item.numAdd = false;
|
||
item.numSub = false;
|
||
}
|
||
that.setCartNum(item.id, item.cartNum, function(data) {
|
||
that.cartList.valid[index] = item;
|
||
that.switchSelect();
|
||
that.getCartNum();
|
||
});
|
||
},
|
||
setCartNum(cartId, cartNum, successCallback) {
|
||
let that = this;
|
||
changeCartNum(cartId, cartNum).then(res => {
|
||
successCallback && successCallback(res.data);
|
||
});
|
||
},
|
||
getCartNum: function() {
|
||
let that = this;
|
||
getCartCounts(true, 'sum').then(res => {
|
||
that.cartCount = res.data.count;
|
||
});
|
||
},
|
||
getCartData(data) {
|
||
return new Promise((resolve, reject) => {
|
||
getCartList(data).then((res) => {
|
||
resolve(res.data);
|
||
}).catch(function(err) {
|
||
this.loading = false;
|
||
this.canShow = true;
|
||
this.$util.Tips({
|
||
title: err
|
||
});
|
||
})
|
||
});
|
||
},
|
||
async getCartList() {
|
||
// uni.showLoading({
|
||
// title: '加载中',
|
||
// mask: true
|
||
// });
|
||
let that = this;
|
||
let data = {
|
||
page: that.page,
|
||
limit: that.limit,
|
||
isValid: true
|
||
}
|
||
|
||
getCartCounts(true, 'sum').then(async c => {
|
||
that.cartCount = c.data.count;
|
||
if (c.data.count === 0) that.getHostProduct();
|
||
for (let i = 0; i < Math.ceil(that.cartCount / that.limit); i++) {
|
||
let cartList = await this.getCartData(data);
|
||
console.log(cartList, 'cartlist');
|
||
let valid = cartList.list;
|
||
// let validList = that.$util.SplitArray(valid, that.cartList.valid);
|
||
console.log(valid, 'that.cartList0')
|
||
let numSub = [{
|
||
numSub: true
|
||
}, {
|
||
numSub: false
|
||
}];
|
||
let numAdd = [{
|
||
numAdd: true
|
||
}, {
|
||
numAdd: false
|
||
}],
|
||
selectValue = [];
|
||
// if (validList.length > 0) {
|
||
// for (let index in validList) {
|
||
// if (validList[index].cartNum == 1) {
|
||
// validList[index].numSub = true;
|
||
// } else {
|
||
// validList[index].numSub = false;
|
||
// }
|
||
// let productInfo = validList[index];
|
||
// let stock = validList[index].stock ? validList[index].stock : 0;
|
||
// if (validList[index].cartNum == stock) {
|
||
// validList[index].numAdd = true;
|
||
// } else if (validList[index].cartNum == validList[index].stock) {
|
||
// validList[index].numAdd = true;
|
||
// } else {
|
||
// validList[index].numAdd = false;
|
||
// }
|
||
// if (validList[index].attrStatus) {
|
||
// validList[index].checked = true;
|
||
// selectValue.push(validList[index].id);
|
||
// } else {
|
||
// validList[index].checked = false;
|
||
// }
|
||
// }
|
||
// }
|
||
// that.$set(that.cartList, 'valid', validList);
|
||
that.$set(that.cartList, 'valid', valid);
|
||
data.page += 1;
|
||
that.selectValue = selectValue;
|
||
console.log(that.cartList, 'that.cartList')
|
||
let newArr = valid.filter(item => item.attrStatus);
|
||
that.isAllSelect = newArr.length == selectValue.length && newArr.length;
|
||
that.loading = false;
|
||
that.canShow = true;
|
||
uni.hideLoading();
|
||
that.switchSelect();
|
||
}
|
||
|
||
|
||
});
|
||
},
|
||
getInvalidList: function() {
|
||
let that = this;
|
||
if (this.loadendInvalid) return false;
|
||
if (this.loadingInvalid) return false;
|
||
let data = {
|
||
page: that.pageInvalid,
|
||
limit: that.limitInvalid,
|
||
isValid: false
|
||
}
|
||
getCartList(data).then(res => {
|
||
let invalid = res.data.list,
|
||
loadendInvalid = invalid.length < that.limitInvalid;
|
||
let invalidList = that.$util.SplitArray(invalid, that.cartList.invalid);
|
||
that.$set(that.cartList, 'invalid', invalidList);
|
||
console.log(that.cartList, 'sssss')
|
||
that.loadendInvalid = loadendInvalid;
|
||
that.loadTitleInvalid = loadendInvalid ? '我也是有底线的' : '加载更多';
|
||
that.pageInvalid = that.pageInvalid + 1;
|
||
that.loadingInvalid = false;
|
||
//if(invalid.length===0) that.getHostProduct();
|
||
}).catch(res => {
|
||
that.loadingInvalid = false;
|
||
that.loadTitleInvalid = '加载更多';
|
||
})
|
||
|
||
},
|
||
getHostProduct: function() {
|
||
let that = this;
|
||
if (that.hotScroll) return
|
||
getProductHot(
|
||
that.hotPage,
|
||
that.hotLimit,
|
||
).then(res => {
|
||
that.hotPage++
|
||
that.hotScroll = res.data.list.length < that.hotLimit
|
||
that.hostProduct = that.hostProduct.concat(res.data.list)
|
||
});
|
||
},
|
||
goodsOpen: function() {
|
||
let that = this;
|
||
that.goodsHidden = !that.goodsHidden;
|
||
},
|
||
manage: function() {
|
||
let that = this;
|
||
that.footerswitch = !that.footerswitch;
|
||
let arr1 = [];
|
||
let arr2 = [];
|
||
let newValid = that.cartList.valid.map(item => {
|
||
if (that.footerswitch) {
|
||
if (item.attrStatus) {
|
||
if (item.checked) {
|
||
arr1.push(item.id);
|
||
}
|
||
} else {
|
||
item.checked = false;
|
||
arr2.push(item);
|
||
}
|
||
} else {
|
||
if (item.checked) {
|
||
arr1.push(item.id);
|
||
}
|
||
}
|
||
return item;
|
||
});
|
||
that.cartList.valid = newValid;
|
||
console.log(that.cartList.valid, 'that.cartList.valid')
|
||
if (that.footerswitch) {
|
||
that.isAllSelect = newValid.length === arr1.length + arr2.length;
|
||
} else {
|
||
that.isAllSelect = newValid.length === arr1.length;
|
||
}
|
||
that.selectValue = arr1;
|
||
that.switchSelect();
|
||
},
|
||
unsetCart: function() {
|
||
let that = this,
|
||
ids = [];
|
||
for (let i = 0, len = that.cartList.invalid.length; i < len; i++) {
|
||
ids.push(that.cartList.invalid[i].id);
|
||
}
|
||
cartDel(ids).then(res => {
|
||
that.$util.Tips({
|
||
title: '清除成功'
|
||
});
|
||
that.$set(that.cartList, 'invalid', []);
|
||
that.getHostProduct();
|
||
}).catch(res => {
|
||
|
||
});
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
let that = this;
|
||
if (that.loadend) {
|
||
that.getInvalidList();
|
||
}
|
||
if (that.cartList.valid.length == 0 && that.cartList.invalid.length == 0 && this.hotPage != 1) {
|
||
that.getHostProduct();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: calc(100vh - 50px);
|
||
// overflow: hidden;
|
||
|
||
.bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
// overflow: hidden;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.box {
|
||
position: absolute;
|
||
top: 167rpx;
|
||
width: 100%;
|
||
height: 1000rpx;
|
||
overflow: scroll;
|
||
|
||
.item {
|
||
margin-top: 20rpx;
|
||
margin-left: 40rpx;
|
||
width: 669rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
z-index: 1;
|
||
|
||
.checkedIcon {
|
||
display: inline-block;
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
background: url(@/static/images/shop/checked.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.noCheckIcon {
|
||
display: inline-block;
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
background: url(@/static/images/shop/nochecked.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.top {
|
||
margin-left: 25rpx;
|
||
margin-top: 19rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.shopName {
|
||
display: inline-block;
|
||
width: 240rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
height: 40rpx;
|
||
line-height: 28rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
position: relative;
|
||
margin-top: 10rpx;
|
||
width: 100%;
|
||
height: 150rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
margin-left: 34rpx;
|
||
width: 111rpx;
|
||
height: 98rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.detail {
|
||
margin-top: -10rpx;
|
||
margin-left: 25rpx;
|
||
|
||
.name {
|
||
width: 400rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
|
||
.model {
|
||
width: 300rpx;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
margin: 10rpx 0;
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #B7B7B7;
|
||
}
|
||
|
||
.price {
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #E94343;
|
||
}
|
||
}
|
||
|
||
.sum {
|
||
position: absolute;
|
||
bottom: 29rpx;
|
||
right: 32rpx;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #FD491F;
|
||
border: 1px solid #FD491F;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.numberBox {
|
||
position: absolute;
|
||
bottom: 16rpx;
|
||
right: 30rpx;
|
||
|
||
.minus {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
border-width: 1px;
|
||
border-color: #E6E6E6;
|
||
border-style: solid;
|
||
border-top-left-radius: 200rpx;
|
||
border-top-right-radius: 200rpx;
|
||
border-bottom-left-radius: 200rpx;
|
||
border-bottom-right-radius: 200rpx;
|
||
@include flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.input {
|
||
width: 50rpx !important;
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.plus {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
background-color: #FF0000;
|
||
border-radius: 50%;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.fixed {
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
width: 100%;
|
||
height: 110rpx;
|
||
background: #fff;
|
||
|
||
.all {
|
||
position: absolute;
|
||
top: 35rpx;
|
||
left: 42rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 35rpx;
|
||
|
||
.checkedIcon {
|
||
display: inline-block;
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
background: url(@/static/images/shop/checked.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.noCheckIcon {
|
||
display: inline-block;
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
background: url(@/static/images/shop/nochecked.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
text {
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
margin-right: 10rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.allPrice {
|
||
position: absolute;
|
||
right: 222rpx;
|
||
top: 34rpx;
|
||
display: flex;
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
|
||
.text {
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.collect {
|
||
position: absolute;
|
||
right: 209rpx;
|
||
top: 23rpx;
|
||
width: 155rpx;
|
||
height: 57rpx;
|
||
line-height: 57rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #EF2461;
|
||
background: #FFF1F5;
|
||
border: 1px solid #EF2462;
|
||
border-radius: 28rpx;
|
||
}
|
||
|
||
.closeAll {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 23rpx;
|
||
text-align: center;
|
||
width: 170rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
background: linear-gradient(0deg, #EE1C5D 0%, #FF6486 100%);
|
||
border-radius: 28rpx;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.delAll {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 23rpx;
|
||
text-align: center;
|
||
width: 170rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
background: linear-gradient(0deg, #FC0607 0%, #FF1C1C 100%);
|
||
border-radius: 28rpx;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|