购物车逻辑完善

feature/v-xuexi
wangdong 10 months ago
parent 51dddcc5d3
commit cbbc1bc533
  1. 4
      api/store.js
  2. 22
      pages/index/position.vue
  3. 10
      pages/my/noticeDetail.vue
  4. 6
      pages/my/noticeList.vue
  5. 77
      pages/special/confirm_order.vue
  6. 4
      pages/special/order_store_list.vue
  7. 28
      pages/store/detail.vue
  8. 31
      pages/store/shoppingCart.vue

@ -75,4 +75,8 @@ export function joinCart(params) {
export function deleteCart(params) {
return http.get("/auth_api/remove_cart", params);
}
export function changeCartNum(params) {
return http.get("/auth_api/change_cart_num", params);
}

@ -4,7 +4,7 @@
<view class="position-box" id="position">
<view class="search-box flex flex-center-x" :style="scrollTop > 50 ? 'position: fixed; top: calc(88rpx + var(--safe-top)); left: 0;width: 100%;background: #fff;box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(68,68,68,0.4);' : ''">
<i class="iconfont2 iconsousuo"></i>
<input v-model.trim="search" confirm-type="search" @input="onSearch(search)" placeholder="搜入城市名、拼音或首字母查询" placeholder-class="input-placeholder"/>
<input v-model.trim="search" confirm-type="search" @input="onSearch(search)" placeholder="搜入城市名或首字母查询" placeholder-class="input-placeholder"/>
<i v-show="search" class="iconfont iconguanbi2" @click="search = ''"></i>
</view>
<view class="now-position p-box">
@ -42,6 +42,8 @@
<script>
import { city_list } from '@/api/index';
import { debounce } from 'lodash';
export default {
data() {
return {
@ -54,9 +56,9 @@
cityUpper: '',
};
},
onPageScroll(e) {
// this.scrollTop = e.scrollTop;
},
// onPageScroll(e) {
// this.scrollTop = e.scrollTop;
// },
watch: {
position() {
let pages = getCurrentPages();
@ -70,13 +72,21 @@
this.getCityList();
},
methods: {
onSearch() {},
onSearch: debounce(function () {
this.getCityList();
}, 500),
async getCityList() {
try{
const { data } = await city_list();
const { data } = await city_list({
search: this.search,
});
console.log(data);
this.hotList = data.hotList;
this.cityList = data.cityList;
// uni.pageScrollTo({
// scrollTop: 0,//
// duration: 300
// });
}catch(e){
//TODO handle the exception
}

@ -1,13 +1,13 @@
<template>
<BaseContainer>
<NavBar :title="info.title" />
<NavBar :title="info.message_types.name" />
<view class="info">
<view class="info-box flex flex-center-x">
<image :src="info.pic" mode="aspectFill"></image>
<image :src="info.message_types.pic" mode="aspectFill"></image>
<view class="box-content">
<view>{{ info.title }}</view>
<view>{{ info.time }}</view>
<view>{{ info.message_types.name }}</view>
<view>{{ info.message_types.update_time }}</view>
</view>
</view>
<mp-html
@ -45,7 +45,7 @@ export default {
return;
}
try{
await setReaded({ id: info.id});
await setReaded({ id: this.info.id});
}catch(e){
//TODO handle the exception
}

@ -10,7 +10,7 @@
</view>
<view class="item-right">
<view>{{ item.time }}</view>
<view v-if="item.is_read === 0" class="num">{{ item.count }}</view>
<view v-if="item.is_read === 0" class="num">1</view>
</view>
</view>
<view v-if="noticeList.length && !loading" class="finished">{{ loadTitle }}</view>
@ -35,7 +35,9 @@
loadTitle: '',
};
},
onLoad() {
onShow() {
this.page = 1;
this.finished = false;
this.getNoticeList();
},
onReachBottom() {

@ -40,14 +40,14 @@
</view>
<view class="count">
<view class="button flex flex-center" :class="{
disabled: number === 1,
}" @click="setNum(false)">
disabled: item.cart_num === 1,
}" @click="setNum(item, false)">
-
</view>
<input v-model.number="number" type="number" readonly />
<input v-model.number="item.cart_num" type="number" readonly />
<view class="button flex flex-center" :class="{
disabled: number === item.productInfo.stock,
}" @click="setNum(true)">
disabled: item.cart_num === item.productInfo.stock,
}" @click="setNum(item, true)">
+
</view>
</view>
@ -81,7 +81,7 @@
{{ number }}合计
<view class="money"><text></text>{{ total }}</view>
</view>
<view v-if="useGold" class="message-ft">抵扣减{{ diko }}</view>
<!-- <view v-if="useGold" class="message-ft">抵扣减{{ diko }}</view> -->
</view>
<view class="submit-btn flex flex-center" @click="pay">立即结算</view>
</view>
@ -189,10 +189,11 @@
if (!this.cartInfo || !this.cartInfo.length) {
return;
}
this.totals = this.$util.Mul(
this.cartInfo[0].productInfo[this.level ? "vip_price" : "price"],
this.number
);
let sum = 0;
this.cartInfo.length > 0 && this.cartInfo.forEach(v => {
sum += Number(v.cart_num) * Number(this.level ? v.productInfo.vip_price : v.productInfo.price);
});
this.totals = sum;
this.totals = this.$util.Add(this.totals, this.postages);
this.totals = this.$util.Sub(
this.totals,
@ -207,16 +208,18 @@
if (!this.cartInfo || !this.cartInfo.length) {
return;
}
if (
this.cartInfo[0].productInfo.is_postage ||
(this.cartInfo[0].productInfo.free_shipping > 0 &&
this.cartInfo[0].productInfo.free_shipping <= this.number)
) {
this.postages = 0;
return "包邮";
}
this.postages = this.cartInfo[0].productInfo.postage;
return "¥" + this.postages;
let sumPostages = 0;
this.cartInfo.forEach(v => {
if (
!v.productInfo.is_postage &&
(v.productInfo.free_shipping === 0 ||
v.productInfo.free_shipping >= v.cart_num)
) {
sumPostages += Number(v.productInfo.postage);
}
});
this.postages = sumPostages;
return this.postages === 0 ? '包邮' : `${this.postages}`;
},
diko() {
if (!this.cartInfo || !this.cartInfo.length) {
@ -240,20 +243,32 @@
this.popupShow = false;
this.subscribeTemplate();
},
cartInfo: {
deep: true,
handler() {
let total = 0;
if (this.cartInfo && this.cartInfo.length > 0) {
this.cartInfo.forEach(v => {
total += Number(v.cart_num || 0);
})
}
this.number = total;
},
},
},
methods: {
handlePickAddress(id) {
this.addressChecked = id;
this.popupShow = false;
},
setNum(type) {
setNum(item, type) {
if (type) {
// add
this.number++;
} else if (!type && this.number > 1) {
item.cart_num++;
} else if (!type && item.cart_num > 1) {
// sub
this.number--;
item.cart_num--;
}
},
async getData() {
@ -269,8 +284,14 @@
key: data.orderKey,
mark: "",
},
number: data.cartInfo ? data.cartInfo[0].cart_num : 1,
});
let total = 0;
if (data.cartInfo && data.cartInfo.length > 0) {
data.cartInfo.forEach(v => {
total += Number(v.cart_num || 0);
})
}
this.number = total;
} catch (err) {
uni.hideLoading();
this.$util.showMsg(err.msg);
@ -311,8 +332,12 @@
},
async getOrderPrice(n) {
uni.showLoading({ mask: true });
const numArr = [];
this.cartInfo.forEach(v => {
numArr.push(v.cart_num);
});
try {
const { data } = await getOrderPrice(this.cartId, this.number);
const { data } = await getOrderPrice(this.cartId, numArr.join(','));
uni.hideLoading();
if (n) {

@ -487,6 +487,10 @@
border-bottom: 1rpx solid #bbb;
.goods {
padding-left: 12rpx;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.image {
width: 156rpx;
height: 184rpx;

@ -115,6 +115,7 @@
<view class="btn flex flex-center-y flex-column" @click="goPage(3)">
<image src="@/static/images/store/cart-icon.png" />
<view class="btn-name">购物车</view>
<text v-if="cartNum > 0" class="cart-num">{{ cartNum }}</text>
</view>
</view>
<view class="submit-btn flex flex-center" @click="joinCart">加入购物车</view>
@ -141,6 +142,7 @@ import {
getStoreDetail,
createOrder,
joinCart,
getCartList,
} from "@/api/store";
import { getLecturer, getRebateAmount } from "@/api/auth";
import RebateGuide from "@/components/RebateGuide/index.vue";
@ -188,6 +190,7 @@ export default {
specialList: [],
lecturer: null,
isShareDisplaySwitch: false, //
cartNum: 0,
};
},
computed: {
@ -227,6 +230,7 @@ export default {
this.getEvaluateList();
this.rebateAmount();
this.getAssociatedTopics();
this.getCartList();
},
onReachBottom() {
if (this.tabOn === 2) {
@ -241,6 +245,15 @@ export default {
this.site_url = data.site_url
});
},
async getCartList() {
try {
const { data } = await getCartList();
console.log(data);
this.cartNum = data.valid.length;
} catch (err) {
console.log(err);
}
},
goPage(value) {
switch (value) {
case 1:
@ -535,9 +548,24 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.btn-name {
margin-top: 14rpx;
}
.cart-num {
position: absolute;
width: 22rpx;
height: 22rpx;
top: -3rpx;
right: 10rpx;
color: #fff;
font-size: 18rpx;
font-weight: bold;
background: #FE4944;
border-radius: 50%;
line-height: 22rpx;
text-align: center;
}
}
.goods-detail .third .group image {

@ -23,7 +23,7 @@
</view>
<view class="num">
<text @click="reduceCartNum(item)">-</text>
<input type="number" v-model="item.cart_num"/>
<input type="number" v-model="item.cart_num" @blur="(e) => changeInput(e, item)"/>
<text @click="addCartNum(item)">+</text>
</view>
</view>
@ -47,7 +47,7 @@
</template>
<script>
import { getCartList, deleteCart, createOrder } from "@/api/store";
import { getCartList, deleteCart, createOrder, changeCartNum } from "@/api/store";
import {
getInitData
} from "@/api/special";
@ -62,6 +62,7 @@
allSelect: false,
selectGoods: [],
goodsList: [],
originGoodsList: [],
checkedGoods: [],
total: 0,
payDialogOpen: false, //
@ -138,7 +139,8 @@
try {
const { data } = await getCartList();
console.log(data);
this.goodsList = data.valid;
this.goodsList = [...data.valid]
this.originGoodsList = [...data.valid];
} catch (err) {
console.log(err);
}
@ -152,11 +154,32 @@
this.allSelect = this.checkedGoods.length === this.goodsList.length;
},
reduceCartNum(item) {
if (Number(item.cart_num) - 1 > 1) {
this.changeCartNum(item.id, Number(item.cart_num) - 1);
}
item.cart_num = Number(item.cart_num) - 1 > 1 ? Number(item.cart_num) - 1 : 1;
},
addCartNum(item) {
this.changeCartNum(item.id, Number(item.cart_num) + 1);
item.cart_num = Number(item.cart_num) + 1;
},
changeInput(e, item) {
const value = String(e.detail.value);
if (value && Number(value) > 0) {
item.cart_num = Number(value);
this.changeCartNum(item.id, Number(value));
} else {
item.cart_num = this.originGoodsList.filter(v => v.id === item.id)[0].cart_num;
}
},
async changeCartNum(cartId, cartNum) {
try{
const { data } = await changeCartNum({ cartId, cartNum})
this.getCartList();
}catch(e){
//TODO handle the exception
}
},
deleteGoods() {
if (this.checkedGoods.length == 0) {
this.$util.showMsg("请选择商品");
@ -188,7 +211,7 @@
this.$util.showMsg("请选择商品");
} else {
uni.navigateTo({
url: "/pages/special/confirm_order?cartId=" + 544,
url: `/pages/special/confirm_order?cartId=${this.checkedGoods.join(',')}`,
});
// this.$util.checkLogin(async () => {
// try {

Loading…
Cancel
Save