yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

购物车：接入购物车列表 API

pull/1/MERGE
YunaiV 2023-08-29 23:28:17 +08:00
parent 31f8897d6e
commit f579101f7c
1 changed files with 133 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

350
pages/order_addcart/order_addcart.vue
View File

@ -16,59 +16,62 @@
</view> </view>
</view> </view>
<view v-if="cartList.valid.length > 0 || cartList.invalid.length > 0" class="pad30"> <view v-if="cartList.valid.length > 0 || cartList.invalid.length > 0" class="pad30">
<view class='list'> <!-- 有效的购物车 -->
<view class='list'>
<checkbox-group @change="checkboxChange"> <checkbox-group @change="checkboxChange">
<block v-for="(item,index) in cartList.valid" :key="index"> <block v-for="(item,index) in cartList.valid" :key="index">
<view class='item acea-row row-between-wrapper'> <view class='item acea-row row-between-wrapper'>
<!-- #ifndef MP --> <!-- #ifndef MP -->
<checkbox :value="(item.id).toString()" :checked="item.checked" <checkbox :value="(item.id).toString()" :checked="item.selected"
:disabled="!item.attrStatus && footerswitch" style="margin-right: 10rpx;" /> :disabled="!item.canChecked && footerswitch" style="margin-right: 10rpx;" />
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP --> <!-- #ifdef MP -->
<checkbox :value="item.id" :checked="item.checked" <checkbox :value="item.id" :checked="item.selected"
:disabled="!item.attrStatus && footerswitch" /> :disabled="!item.canChecked && footerswitch" />
<!-- #endif --> <!-- #endif -->
<navigator :url='"/pages/goods_details/index?id="+item.productId' hover-class='none' <navigator :url='"/pages/goods_details/index?id=" + item.spu.id' hover-class='none'
class='picTxt acea-row row-between-wrapper'> class='picTxt acea-row row-between-wrapper'>
<view class='pictrue'> <view class='pictrue'>
<image :src='item.image'></image> <image v-if="item.sku" :src='item.sku.picUrl' />
<image v-else :src='item.spu.picUrl' />
</view> </view>
<view class='text'> <view class='text'>
<view class='line1' :class="item.attrStatus?'':'reColor'">{{item.storeName}} <view class='line1' :class="item.canChecked?'':'reColor'">
{{ item.spu.name }}
</view> </view>
<view class='infor line1' v-if="item.suk">属性：{{item.suk}}</view> <view class='infor line1' v-if="item.sku.properties">属性：
<view class='money' v-if="item.attrStatus">￥{{item.price}}</view> <text v-for="property in item.sku.properties" style="padding-left: 2px">{{property.valueName}}</text>
<!-- <view class='money' v-if="item.attrStatus">￥{{item.truePrice}}</view> --> </view>
<view class="reElection acea-row row-between-wrapper" v-else> <view class='money' v-if="item.canChecked">￥{{ fen2yuan(item.sku.price) }}</view>
<!-- TODO 芋艿：重选 -->
<view class="reElection acea-row row-between-wrapper" v-else>
<view class="title">请重新选择商品规格</view> <view class="title">请重新选择商品规格</view>
<view class="reBnt cart-color acea-row row-center-wrapper" <view class="reBnt cart-color acea-row row-center-wrapper" @click.stop="reElection(item)">重选</view>
@click.stop="reElection(item)">重选</view>
</view> </view>
</view> </view>
<view class='carnum acea-row row-center-wrapper' v-if="item.attrStatus"> <view class='carnum acea-row row-center-wrapper' v-if="item.canChecked">
<view class="reduce" :class="item.numSub ? 'on' : ''" <view class="reduce" :class="item.numSub ? 'on' : ''" @click.stop='subCart(index)'>-</view>
@click.stop='subCart(index)'>-</view> <view class='num'>{{ item.count }}</view>
<view class='num'>{{item.cartNum}}</view> <view class="plus" :class="item.numAdd ? 'on' : ''" @click.stop='addCart(index)'>+</view>
<view class="plus" :class="item.numAdd ? 'on' : ''"
@click.stop='addCart(index)'>+</view>
</view> </view>
</navigator> </navigator>
</view> </view>
</block> </block>
</checkbox-group> </checkbox-group>
</view> </view>
<!-- cartList.valid.length===0 && cartList.invalid.length > 0 --> <!-- 无效的购物车 -->
<view v-if="cartList.invalid.length > 0" class='invalidGoods borRadius14' <view v-if="cartList.invalid.length > 0" class='invalidGoods borRadius14'
:style="cartList.valid.length===0 && cartList.invalid.length > 0 ? 'position: relative;z-index: 111;top: -120rpx;':'position: static;'"> :style="cartList.valid.length === 0 && cartList.invalid.length > 0
? 'position: relative;z-index: 111;top: -120rpx;'
:'position: static;'">
<view class='goodsNav acea-row row-between-wrapper'> <view class='goodsNav acea-row row-between-wrapper'>
<view v-if="cartList.invalid.length > 1 || cartList.valid.length > 0" @click='goodsOpen'> <view v-if="cartList.invalid.length > 1 || cartList.valid.length > 0" @click='goodsOpen'>
<text class='iconfont' <text class='iconfont' :class='goodsHidden ? "icon-xiangxia":"icon-xiangshang"' /> 失效商品
:class='goodsHidden===true?"icon-xiangxia":"icon-xiangshang"'></text>失效商品
</view> </view>
<view v-else> <view v-else>失效商品</view>
失效商品 <view class='del' @click='unsetCart'>
</view> <text class='iconfont icon-shanchu1' />清空
<view class='del' @click='unsetCart'><text class='iconfont icon-shanchu1'></text>清空</view> </view>
</view> </view>
<view class='goodsList' :hidden='goodsHidden'> <view class='goodsList' :hidden='goodsHidden'>
<block v-for="(item,index) in cartList.invalid" :key='index'> <block v-for="(item,index) in cartList.invalid" :key='index'>
@ -76,11 +79,14 @@
<view class='invalid'>失效</view> <view class='invalid'>失效</view>
<view class='picTxt acea-row row-between-wrapper'> <view class='picTxt acea-row row-between-wrapper'>
<view class='pictrue'> <view class='pictrue'>
<image :src='item.image'></image> <image v-if="item.sku" :src='item.sku.picUrl' />
<image v-else :src='item.spu.picUrl' />
</view> </view>
<view class='text acea-row row-column-between'> <view class='text acea-row row-column-between'>
<view class='line1 name'>{{item.storeName}}</view> <view class='line1 name'>{{ item.spu.name }}</view>
<view class='infor line1' v-if="item.suk">属性：{{item.suk}}</view> <view class='infor line1' v-if="item.sku.properties">属性：
<text v-for="property in item.sku.properties" style="padding-left: 2px">{{property.valueName}}</text>
</view>
<view class='acea-row row-between-wrapper'> <view class='acea-row row-between-wrapper'>
<view class='end'>该商品已失效</view> <view class='end'>该商品已失效</view>
</view> </view>
@ -90,14 +96,8 @@
</block> </block>
</view> </view>
</view> </view>
<!-- <view class='loadingicon acea-row row-center-wrapper' v-if="cartList.valid.length&&!loadend">
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
</view> -->
<view class='loadingicon acea-row row-center-wrapper' v-if="cartList.invalid.length&&loadend">
<text class='loading iconfont icon-jiazai'
:hidden='loadingInvalid===false'></text>{{loadTitleInvalid}}
</view>
</view> </view>
<!-- TODO -->
<view class='noCart' v-if="cartList.valid.length === 0 && cartList.invalid.length === 0 && canShow"> <view class='noCart' v-if="cartList.valid.length === 0 && cartList.invalid.length === 0 && canShow">
<view class='pictrue'> <view class='pictrue'>
<image src='../../static/images/noCart.png'></image> <image src='../../static/images/noCart.png'></image>
@ -106,7 +106,8 @@
</view> </view>
</view> </view>
</view> </view>
<view class='footer acea-row row-between-wrapper' v-if="cartList.valid.length > 0"> <!-- TODO -->
<view class='footer acea-row row-between-wrapper' v-if="cartList.valid.length > 0">
<view> <view>
<checkbox-group @change="checkboxAllChange"> <checkbox-group @change="checkboxAllChange">
<checkbox value="all" :checked="!!isAllSelect" /> <checkbox value="all" :checked="!!isAllSelect" />
@ -128,49 +129,29 @@
</form> </form>
</view> </view>
</view> </view>
<productWindow :attr="attr" :isShow='1' :iSplus='1' :iScart='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr" <!-- SKU 不可用的商品，重新选择 SKU TODO -->
<productWindow :attr="attr" :isShow='1' :iSplus='1' :iScart='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
@ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @iptCartNum="iptCartNum" @goCat="reGoCat" @ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @iptCartNum="iptCartNum" @goCat="reGoCat"
id='product-window'></productWindow> id='product-window'></productWindow>
<view class="uni-p-b-96"></view> <view class="uni-p-b-96" />
<view class="uni-p-b-98"></view> <view class="uni-p-b-98" />
<!-- #ifdef MP -->
<!-- <authorize :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
<!-- #endif -->
</view> </view>
</template> </template>
<script> <script>
let sysHeight = 0 let sysHeight = 0
import { import { getCartCounts, changeCartNum, cartDel, getResetCart} from '@/api/order.js';
getCartList, import { getProductHot, collectAll, getProductDetail } from '@/api/store.js';
getCartCounts, import { toLogin } from '@/libs/login.js';
changeCartNum, import { mapGetters } from "vuex";
cartDel,
getResetCart
} from '@/api/order.js';
import {
getProductHot,
collectAll,
getProductDetail
} from '@/api/store.js';
import {
toLogin
} from '@/libs/login.js';
import {
mapGetters
} from "vuex";
import recommend from '@/components/recommend'; import recommend from '@/components/recommend';
import productWindow from '@/components/productWindow'; import productWindow from '@/components/productWindow';
// #ifdef MP import * as TradeCartApi from '@/api/trade/cart.js';
import authorize from '@/components/Authorize'; import * as Util from '@/utils/util.js';
// #endif export default {
export default {
components: { components: {
recommend, recommend,
productWindow, productWindow,
// #ifdef MP
authorize
// #endif
}, },
data() { data() {
return { return {
@ -178,28 +159,20 @@
goodsHidden: false, goodsHidden: false,
footerswitch: true, footerswitch: true,
hostProduct: [], hostProduct: [],
hotPage: 1,
hotLimit: 10,
hotScroll: false,
cartList: { cartList: {
valid: [], valid: [],
invalid: [] invalid: []
}, },
isAllSelect: false, //全选 isAllSelect: false, // 是否全选
selectValue: [], //选中的数据 selectValue: [], // 选中的数据
selectCountPrice: 0.00, selectCountPrice: 0.00,
isAuto: false, //没有授权的不会自动授权
isShowAuth: false, //是否隐藏授权
hotScroll: false,
hotPage: 1,
hotLimit: 10,
loading: false, loading: false,
loadend: false,
loadTitle: '加载更多', //提示语 loadTitle: '加载更多', //提示语
page: 1,
limit: 20,
loadingInvalid: false,
loadendInvalid: false,
loadTitleInvalid: '加载更多', //提示语
pageInvalid: 1,
limitInvalid: 20,
attr: { attr: {
cartAttr: false, cartAttr: false,
productAttr: [], productAttr: [],
@ -217,46 +190,37 @@
}, },
computed: mapGetters(['isLogin']), computed: mapGetters(['isLogin']),
onLoad: function(options) { onLoad: function(options) {
let that = this; if (!this.isLogin) {
if (that.isLogin === false) {
toLogin(); toLogin();
} }
}, },
onShow: function() { onShow: function() {
this.canShow = false this.canShow = false
if (this.isLogin === true) { if (this.isLogin === true) {
// 加载热门商品
this.hotPage = 1; this.hotPage = 1;
this.hostProduct = [], this.hotLimit = 10;
this.hotScroll = false, this.hostProduct = [];
this.loadend = false; this.hotScroll = false;
this.page = 1; this.loadend = false;
this.cartList.valid = [];
this.getCartList(); // 加载购物车列表
this.loadendInvalid = false; this.footerswitch = true;
this.pageInvalid = 1;
this.cartList.invalid = [];
this.getInvalidList();
//this.getCartNum();
this.footerswitch = true;
this.hotScroll = false; this.hotScroll = false;
this.hotPage = 1;
this.hotLimit = 10;
this.cartList = { this.cartList = {
valid: [], valid: [],
invalid: [] invalid: []
}; };
this.getCartList();
this.isAllSelect = false; //全选 this.isAllSelect = false; //全选
this.selectValue = []; //选中的数据 this.selectValue = []; //选中的数据
this.selectCountPrice = 0.00; this.selectCountPrice = 0.00;
// TODO 芋艿：
this.cartCount = 0; this.cartCount = 0;
this.isShowAuth = false;
} }
}, },
methods: { methods: {
// 授权关闭
authColse: function(e) {
this.isShowAuth = e;
},
// 修改购物车 // 修改购物车
reGoCat: function() { reGoCat: function() {
let that = this, let that = this,
@ -284,7 +248,6 @@
title: "添加购物车成功", title: "添加购物车成功",
success: () => { success: () => {
that.loadend = false; that.loadend = false;
that.page = 1;
that.cartList.valid = []; that.cartList.valid = [];
that.getCartList(); that.getCartList();
that.getCartNum(); that.getCartNum();
@ -460,7 +423,6 @@
if (selectValue.length > 0) if (selectValue.length > 0)
cartDel(selectValue).then(res => { cartDel(selectValue).then(res => {
that.loadend = false; that.loadend = false;
that.page = 1;
that.cartList.valid = []; that.cartList.valid = [];
that.getCartList(); that.getCartList();
that.getCartNum(); that.getCartNum();
@ -545,19 +507,19 @@
let newValid = valid.map(item => { let newValid = valid.map(item => {
if (status) { if (status) {
if (that.footerswitch) { if (that.footerswitch) {
if (item.attrStatus) { if (item.canChecked) {
item.checked = true; item.selected = true;
selectValue.push(item.id); selectValue.push(item.id);
} else { } else {
item.checked = false; item.selected = false;
} }
} else { } else {
item.checked = true; item.selected = true;
selectValue.push(item.id); selectValue.push(item.id);
} }
that.isAllSelect = true; that.isAllSelect = true;
} else { } else {
item.checked = false; item.selected = false;
that.isAllSelect = false; that.isAllSelect = false;
} }
return item; return item;
@ -577,27 +539,26 @@
let newValid = valid.map(item => { let newValid = valid.map(item => {
if (that.inArray(item.id, value)) { if (that.inArray(item.id, value)) {
if (that.footerswitch) { if (that.footerswitch) {
if (item.attrStatus) { if (item.canChecked) {
item.checked = true; item.selected = true;
arr1.push(item); arr1.push(item);
} else { } else {
item.checked = false; item.selected = false;
} }
} else { } else {
item.checked = true; item.selected = true;
arr1.push(item); arr1.push(item);
} }
} else { } else {
item.checked = false; item.selected = false;
arr2.push(item); arr2.push(item);
} }
return item; return item;
}); });
if (that.footerswitch) { if (that.footerswitch) {
arr3 = arr2.filter(item => !item.attrStatus); arr3 = arr2.filter(item => !item.canChecked);
} }
that.$set(that.cartList, 'valid', newValid); that.$set(that.cartList, 'valid', newValid);
// let newArr = that.cartList.valid.filter(item => item.attrStatus);
that.isAllSelect = newValid.length === arr1.length + arr3.length; that.isAllSelect = newValid.length === arr1.length + arr3.length;
that.selectValue = value; that.selectValue = value;
that.switchSelect(); that.switchSelect();
@ -630,7 +591,6 @@
}, },
/** /**
* 购物车手动填写 * 购物车手动填写
*
*/ */
iptCartNum: function(index) { iptCartNum: function(index) {
let item = this.cartList.valid[index]; let item = this.cartList.valid[index];
@ -671,7 +631,6 @@
let that = this; let that = this;
let item = that.cartList.valid[index]; let item = that.cartList.valid[index];
item.cartNum = Number(item.cartNum) + 1; item.cartNum = Number(item.cartNum) + 1;
let productInfo = item;
if (item.cartNum >= item.stock) { if (item.cartNum >= item.stock) {
item.cartNum = item.stock; item.cartNum = item.stock;
item.numAdd = true; item.numAdd = true;
@ -698,9 +657,9 @@
that.cartCount = res.data.count; that.cartCount = res.data.count;
}); });
}, },
getCartData(data) { getCartData() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getCartList(data).then((res) => { TradeCartApi.getCartList().then((res) => {
resolve(res.data); resolve(res.data);
}).catch(function(err) { }).catch(function(err) {
this.loading = false; this.loading = false;
@ -716,91 +675,43 @@
title: '加载中', title: '加载中',
mask: true mask: true
}); });
let that = this; // 加载购物车
let data = { const cartList = await this.getCartData();
page: that.page, const validList = cartList.validList;
limit: that.limit, const invalidList = cartList.invalidList;
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);
let valid = cartList.list;
let validList = that.$util.SplitArray(valid, that.cartList.valid);
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);
data.page += 1;
that.selectValue = selectValue;
let newArr = validList.filter(item => item.attrStatus);
that.isAllSelect = newArr.length === selectValue.length && newArr.length;
that.switchSelect();
}
that.loading = false; // 有效的购物车
that.canShow = true; const selectValue = [];
uni.hideLoading(); if (validList.length > 0) {
}); for (let index in validList) {
}, // 设置是否可减少（到底，不可减少）
getInvalidList: function() { validList[index].numSub = validList[index].cartNum === 1;
let that = this; // 设置是否可添加（到顶，不可添加）
if (this.loadendInvalid) return false; const sku = validList[index].sku;
if (this.loadingInvalid) return false; validList[index].numAdd = !!(sku && validList[index].count === sku.stock);
let data = { // 设置为选中，并添加到 selectValue 数组中
page: that.pageInvalid, // why？库存不足时，可以引导选择该 SPU 对应的其它 SKU。而 invalidList 是 SPU 不存在或者库存彻底不足
limit: that.limitInvalid, if (sku && sku.stock > 0) {
isValid: false validList[index].canChecked = true; // 是否可选中：是
} selectValue.push(validList[index].id);
getCartList(data).then(res => { } else {
let invalid = res.data.list, validList[index].canChecked = false; // 是否可选中：否
loadendInvalid = invalid.length < that.limitInvalid; }
let invalidList = that.$util.SplitArray(invalid, that.cartList.invalid); }
that.$set(that.cartList, 'invalid', invalidList); }
that.loadendInvalid = loadendInvalid; this.$set(this.cartList, 'valid', validList);
that.loadTitleInvalid = loadendInvalid ? '我也是有底线的' : '加载更多'; this.selectValue = selectValue;
that.pageInvalid = that.pageInvalid + 1; let newArr = validList.filter(item => item.canChecked);
that.loadingInvalid = false; this.isAllSelect = newArr.length === selectValue.length && newArr.length;
//if(invalid.length===0) that.getHostProduct(); this.switchSelect();
}).catch(res => {
that.loadingInvalid = false;
that.loadTitleInvalid = '加载更多';
})
// 无效的购物车
this.$set(this.cartList, 'invalid', invalidList);
// 标记加载结束
this.loading = false;
this.canShow = true;
uni.hideLoading();
}, },
getHostProduct: function() { getHostProduct: function() {
let that = this; let that = this;
@ -825,16 +736,16 @@
let arr2 = []; let arr2 = [];
let newValid = that.cartList.valid.map(item => { let newValid = that.cartList.valid.map(item => {
if (that.footerswitch) { if (that.footerswitch) {
if (item.attrStatus) { if (item.canChecked) {
if (item.checked) { if (item.selected) {
arr1.push(item.id); arr1.push(item.id);
} }
} else { } else {
item.checked = false; item.selected = false;
arr2.push(item); arr2.push(item);
} }
} else { } else {
if (item.checked) { if (item.selected) {
arr1.push(item.id); arr1.push(item.id);
} }
} }
@ -864,13 +775,18 @@
}).catch(res => { }).catch(res => {
}); });
} },
fen2yuan(price) {
return Util.fen2yuan(price)
}
}, },
onReachBottom() { onReachBottom() {
// TODO 芋艿：临时禁用
if (true) {
return;
}
let that = this; let that = this;
if (that.loadend) {
that.getInvalidList();
}
if (that.cartList.valid.length == 0 && that.cartList.invalid.length == 0 && this.hotPage != 1) { if (that.cartList.valid.length == 0 && that.cartList.invalid.length == 0 && this.hotPage != 1) {
that.getHostProduct(); that.getHostProduct();
} }