pdkj
/
jiqu-library-miniprogram
6
0
Fork 0
Code Releases Activity

店铺-购物车

hui.zhou
panliang 2023-02-10 14:54:34 +08:00
parent f4d8058fce
commit 14b16f2b49
6 changed files with 252 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/pageB/code/index.vue
View File

@ -1,43 +1,51 @@
<template>
<view class="flex items-center justify-center flex-col pt-80rpx">
<image class="w-400rpx h-400rpx" :src="image"></image>
<view class="mt-20rpx">请用户通过微信扫码进入小程序生成订单</view>
<view class="grid grid-cols-2 gap-x-80rpx text-36rpx mt-120rpx">
<view @click="toBack">门店管理</view>
<view @click="toSwitchTab">个人中心</view>
</view>
<image class="w-400rpx h-400rpx" :src="image"></image>
<view class="mt-20rpx">请用户通过微信扫码进入小程序生成订单</view>
<view class="grid grid-cols-2 gap-x-80rpx text-36rpx mt-120rpx">
<view @click="toBack">门店管理</view>
<view @click="toSwitchTab">个人中心</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
image:''
};
export default {
data() {
return {
id: '',
image: '',
};
},
onLoad(e) {
this.id = e.id;
this.getOrder()
},
methods: {
getOrder() {
uni.showLoading()
this.$api.get(`/v1/order-pre/${this.id}`).then(res => {
uni.hideLoading()
this.image = res.qrcode
})
},
onLoad({image}) {
this.image=image
toBack() {
uni.navigateBack({
delta: 4,
});
},
methods:{
toBack(){
uni.navigateBack({
delta:3
})
},
toSwitchTab(){
uni.switchTab({
url:'/pages/me/me'
})
}
}
}
toSwitchTab() {
uni.switchTab({
url: '/pages/me/me',
});
},
},
};
</script>
<style>
page{
background: #ffffff;
}
page {
background: #ffffff;
}
</style>
<style lang="scss">
</style>

160
src/pageB/select_product/cart.vue
View File

@ -3,7 +3,7 @@
<cu-navbar class="cu-navbar" :background="{ background: '#f5f5f5' }" :border-bottom="false" :isBack="false" :title="`购物车(${cartList.length})`">
<view slot="left" class="flex items-center pl-base text-xl font-medium text-txBase font-extrabold">
<!-- 左边返回箭头 -->
<view class="w-20rpx flex items-center mr-10rpx" @tap="back" v-if="isBack">
<view class="w-20rpx flex items-center mr-10rpx" @tap="back">
<image class="w-20rpx" src="/static/images/user/left_arrow.png" mode="widthFix"></image>
</view>
<!-- <view>购物车<text class="text-md">({{ cartList.length }})</text></view> -->
@ -12,11 +12,7 @@
<u-icon name="chat" size="48"></u-icon>
<u-badge :is-dot="true" size="16" :offset="[0, 2]" type="warning"></u-badge>
</view> -->
<block v-if="isLogin">
<view class="pl-base text-xl font-medium text-txBase" @tap="changeEdit">
{{ navBarLeftText }}
</view>
</block>
<view class="pl-base text-xl font-medium text-txBase" @tap="changeEdit">{{ navBarLeftText }}</view>
</cu-navbar>
<!-- 已登录 -->
<block v-if="cartList.length > 0">
@ -25,6 +21,7 @@
<cart-goods-item
:data="item"
:goods="item.sku"
:disabled-input="true"
:selected="isSelect(item)"
@select="onSelect"
@tap="onGoodsClick"
@ -43,7 +40,7 @@
<text class="text-lg">全选</text>
</view>
<view class="ml-30rpx">
<text>共 {{ cartList.length }} 件</text>
<text>共 {{ selectedCart.length }} 件</text>
</view>
</view>
<block v-if="isEdit">
@ -74,12 +71,6 @@
<view class="flex items-center justify-center flex-col bg-white py-100rpx">
<image src="/static/images/cart/empty-cart.png" class="w-300rpx h-254rpx" mode="scaleToFill" />
<view class="text-txGray text-md">购物车是空的</view>
<view class="w-full px-150rpx flex items-center mt-50rpx text-txBase text-md mx-100rpx justify-between">
<view @tap="jumpIndex" class="w-180rpx h-55rpx border border-txBase leading-55rpx text-center rounded-full"> 去逛逛</view>
<view @tap="$u.routeAuth('/pageA/collection/index')" class="w-180rpx h-55rpx border border-txBase leading-55rpx text-center rounded-full"
>看看关注</view
>
</view>
</view>
</block>
@ -95,48 +86,41 @@
</template>
<script>
import CartGoodsItem from '@/pages/shop_cart/components/cart-goods-item.vue';
import { mapActions, mapGetters } from 'vuex';
import { add, mcl } from '@/utils';
import CartMixin from '@/pages/shop_cart/mixin';
export default {
mixins: [CartMixin],
components: {
CartGoodsItem,
},
props: {
isBack: {
type: Boolean,
default: false,
},
},
data() {
return {
mid: '',
delShow: false,
isEdit: false,
calculate: {
amount: 0,
},
cartList: [],
selectedCart: []
};
},
onShow() {
this.getCartList();
onLoad(e) {
this.mid = e.mid
this.getCartList()
},
computed: {
...mapGetters(['cartList', 'selectedCart']),
navBarLeftText() {
return this.isEdit ? '完成' : '管理';
},
selectAll: {
set(val) {
this.setSelectedCart(val ? this.cartList.map((e) => e.id) : []);
this.selectedCart = val ? this.cartList.map(item => item.id) : []
this.getCalculateAmount()
},
get() {
return this.cartList.length == this.selectedCart.length && this.cartList.length > 0;
return this.cartList.length > 0 && this.cartList.length == this.selectedCart.length;
},
},
selectedCorrect() {
return this.selectedCart?.filter((id) => this.cartList.findIndex((e) => e.id == id && e.sku.is_online) >= 0) ?? [];
},
height() {
const { windowHeight, statusBarHeight } = this.$u.sys();
@ -144,70 +128,74 @@ export default {
},
},
methods: {
...mapActions({
getCartList: 'goods/getCartList',
setSelectedCart: 'goods/setSelectedCart',
}),
getCartList() {
uni.showLoading()
this.$store.dispatch('storeCart/getCartList', { mid: 1 }).then(res => {
this.cartList = res
uni.hideLoading()
})
},
//结算
onSubmit() {
if (this.selectedCorrect.length == 0) return this.$u.toast('请选择需要结算的商品');
const params = {
cards: this.selectedCorrect,
type: 'cart',
};
this.$u.route('/pages/confirm_order/confirm_order?data=' + encodeURIComponent(JSON.stringify(params)));
if (this.selectedCart.length == 0) return this.$u.toast('请选择需要结算的商品');
const cart = this.cartList.filter(item => this.selectedCart.indexOf(item.id) >= 0)
const params = { store_id: this.mid, products: cart.map(item => {
return {
sku_id: item.id,
quantity: item.quantity,
send: item.quantity
}
})}
uni.showLoading()
this.$api.post(`/v1/order-pre`, params).then(res => {
uni.hideLoading()
this.$store.dispatch('storeCart/clear');
this.$u.route('/pageB/code/index', { id: res.order_pre })
})
},
//数量改变
async onNumChange(value, id) {
await this.$api.put(
`/v1/shopping-cart-items/${id}`,
{
quantity: value,
},
{
custom: {
loading: true,
},
},
);
this.getCartList();
// 数量改变
onNumChange(value, id) {
if (isNaN(value)) return;
this.$store.dispatch('storeCart/update', { id, number: value }).then(res => {
this.cartList = this.cartList.map(item => {
if (item.id == id) {
item.quantity = value
}
return item
})
this.getCalculateAmount()
})
},
//移除购物车
async delConfirm() {
// 移除购物车
delConfirm() {
if (this.selectedCart.length == 0) return this.$u.toast('您还未选择商品哦');
await this.$api.delete(
'/v1/shopping-cart-items',
{ ids: this.selectedCart },
{
custom: {
loading: true,
},
},
);
this.delShow = false;
this.getCartList();
this.$store.dispatch('storeCart/delete', { id: this.selectedCart }).then(res => {
this.delShow = false
this.cartList = this.cartList.filter(item => this.selectedCart.indexOf(item.id) === -1)
this.selectedCart = []
})
},
//编辑
// 编辑
changeEdit() {
this.isEdit = !this.isEdit;
},
//复选框
// 复选框
onSelect(id, selected) {
if (selected) {
this.setSelectedCart([...this.selectedCart, id]);
this.selectedCart.push(id)
} else {
this.setSelectedCart(this.selectedCart.filter((e) => id != e));
const index = this.selectedCart.indexOf(id)
if (index >= 0) {
this.selectedCart.splice(index, 1)
}
}
this.getCalculateAmount()
},
//商品点击
// 商品点击
onGoodsClick(e) {
if (this.isEdit) return false;
this.$u.route('/pages/product_details/index', {
skuId: e.id,
});
return false;
},
//计算价格
// 计算价格
getCalculateAmount() {
const { is_vip } = this.$store.getters?.user ?? false;
const amount = this.cartList.reduce((pr, cu) => {
@ -225,21 +213,7 @@ export default {
delta: 1,
});
},
jumpIndex() {
uni.switchTab({
url: '/pages/index/index',
});
},
},
watch: {
selectedCart: {
immediate: true,
handler(e) {
this.getCalculateAmount();
// console.log(e);
},
},
},
}
};
</script>
<style lang="scss" scoped>

15
src/pageB/select_product/search.vue
View File

@ -4,7 +4,7 @@
<view class="w-full">
<u-search placeholder="搜索商品" @change="Change" @search="Search" v-model="searchText" :show-action="false"></u-search>
</view>
<view slot="right" class="pr-26rpx pl-14rpx flex items-center" @tap="$u.route('/pageB/select_product/cart')">
<view slot="right" class="pr-26rpx pl-14rpx flex items-center" @tap="$u.route('/pageB/select_product/cart', { mid })">
<image class="w-48rpx h-48rpx" src="/static/images/cart/short-cart.png" mode="scaleToFill" />
</view>
</u-navbar>
@ -134,25 +134,26 @@ export default {
},
onChangeNumber(e) {
this.number = e;
console.log(e);
},
//购物车点击
// 点击购物车图标
async cartClick(e) {
this.productId = e.id;
this.number = 1;
await this.getProducts();
this.show = true;
console.log(e);
},
// 添加购物车
onAddCart(e) {
console.log('添加到购物车数量：' + this.number);
console.log(e);
this.$store.dispatch('storeCart/add', { id: e.id, number: this.number }).then(res => {
this.$u.toast('添加成功')
this.show = false
})
},
//获取商品详情
async getProducts() {
try {
this.loading = true;
const resData = await this.$api.get(`/v1/product/products/${this.productId}`);
const resData = await this.$api.get(`/v1/store/${this.mid}/product-spu/${this.productId}`);
this.products = resData;
this.skuId = this.products?.sku.id;
this.sku = this.products?.sku

8
src/pages/shop_cart/components/cart-goods-item.vue
View File

@ -34,7 +34,7 @@
<image class="w-58rpx h-58rpx ml-10rpx" src="/static/svg/svip.svg" mode=""></image>
</view>
<view class="text-right" @tap.prevent.stop="() => false">
<u-number-box @change="onNumberChange" :min="1" :max="goods.stock" :value="data.quantity" @plus="onPlus" @minus="onMinus">
<u-number-box @change="onNumberChange" :disabled-input="disabledInput" :min="1" :max="goods.stock" :value="data.quantity" integer asyncChange>
</u-number-box>
</view>
</view>
@ -56,6 +56,10 @@
type: Boolean,
default: false,
},
disabledInput: {
type: Boolean,
default: false
}
},
computed: {
goods() {
@ -68,7 +72,7 @@
this.$emit('select', this.data.id, !this.selected);
},
onNumberChange({value}) {
// this.$emit('num-change', value, this.data.id);
this.$emit('num-change', value, this.data.id);
},
onPlus({
value

4
src/store/index.js
View File

@ -5,6 +5,7 @@ import getters from './getters'
import user from './modules/user'
import app from './modules/app'
import goods from './modules/goods'
import storeCart from './modules/store_cart'
Vue.use(Vuex)
@ -12,7 +13,8 @@ const store = new Vuex.Store({
modules: {
user,
app,
goods
goods,
storeCart
},
getters
})

130
src/store/modules/store_cart.js 100644
View File

@ -0,0 +1,130 @@
import { http } from '@/utils/request'
const CART = 'jiqu_library_store_cart'
const SELECT_CART = 'jiqu_library_store_cart_selected'
const getDefaultState = () => {
return {
cartList: [],
selectedCart: uni.getStorageSync(SELECT_CART) || []
}
}
const state = getDefaultState()
const mutations = {
SET_CARTLIST(state, value) {
state.cartList = value
},
SET_SELECTED_CART(state, value) {
state.selectedCart = value
}
}
const actions = {
// 添加购物车
add({ dispatch,state }, params, custom) {
const { id, number } = params;
return new Promise((resolve, reject) => {
let cart = uni.getStorageSync(CART)
if (!cart) {
cart = []
}
let exists = false
cart = cart.map(item => {
if (item.id == id) {
exists = true
item.number += number
}
return item
})
if (!exists) {
cart.push({ id, number })
}
uni.setStorageSync(CART, cart)
resolve(cart)
})
},
// 更新购物车商品数量
update({ dispatch,state }, params) {
const { id, number } = params;
return new Promise((resolve, reject) => {
let cart = uni.getStorageSync(CART)
if (!cart) {
cart = []
}
let exists = false
cart = cart.map(item => {
if (item.id == id) {
exists = true
item.number = number
}
return item
})
uni.setStorageSync(CART, cart)
resolve(cart)
})
},
// 删除购物车商品
delete({}, params) {
const { id } = params;
return new Promise((resolve, reject) => {
let cart = uni.getStorageSync(CART)
if (!cart) {
cart = []
}
cart = cart.filter(item => id.indexOf(item.id) === -1)
uni.setStorageSync(CART, cart)
resolve(cart)
})
},
// 获取购物车列表
getCartList({ commit, rootGetters, state, dispatch }, params) {
const { mid } = params
return new Promise((resolve, reject) => {
const cart = uni.getStorageSync(CART)
if (!cart || cart.length == 0) {
resolve([])
}
const ids = cart.map(item => item.id).join(',')
const data = []
http.get(`/v1/store/${mid}/product-skus`, { params: { id: ids, per_page: -1 } }).then(res => {
const data = res.map(item => {
let cartItem = ''
cart.map(item1 => {
if (item1.id == item.id) {
cartItem = item1
}
})
item.is_online = true
return { id: item.id, quantity: cartItem ? cartItem.number : 1, sku: item }
})
resolve(data)
})
})
},
// 清空购物车
clear() {
return new Promise((resolve, reject) => {
uni.removeStorageSync(CART)
resolve()
})
},
setSelectedCart({commit},value){
const arr = Array.from(new Set(value))
uni.setStorageSync(SELECT_CART, arr)
commit('SET_SELECTED_CART',arr)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}