diff --git a/supplied-h5/package-lock.json b/supplied-h5/package-lock.json index 58fec2a..589a31a 100644 --- a/supplied-h5/package-lock.json +++ b/supplied-h5/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "core-js": "^3.37.1", + "pinia": "^2.3.1", "vant": "^2.13.9", "vue": "^2.7.16", "vue-router": "^3.6.5" @@ -2372,6 +2373,12 @@ "dev": true, "license": "ISC" }, + "node_modules/@vue/devtools-api": { + "version": "6.6.4", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz", + "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==", + "license": "MIT" + }, "node_modules/@vue/shared": { "version": "3.5.39", "dev": true, @@ -6934,6 +6941,54 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pinia": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz", + "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==", + "license": "MIT", + "dependencies": { + "@vue/devtools-api": "^6.6.3", + "vue-demi": "^0.14.10" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "typescript": ">=4.4.4", + "vue": "^2.7.0 || ^3.5.11" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/pinia/node_modules/vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "hasInstallScript": true, + "license": "MIT", + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/pkg-dir": { "version": "4.2.0", "dev": true, diff --git a/supplied-h5/package.json b/supplied-h5/package.json index 3ca6abb..52e330d 100644 --- a/supplied-h5/package.json +++ b/supplied-h5/package.json @@ -8,6 +8,7 @@ }, "dependencies": { "core-js": "^3.37.1", + "pinia": "^2.3.1", "vant": "^2.13.9", "vue": "^2.7.16", "vue-router": "^3.6.5" diff --git a/supplied-h5/public/index.html b/supplied-h5/public/index.html index d69b27b..99db16a 100644 --- a/supplied-h5/public/index.html +++ b/supplied-h5/public/index.html @@ -4,7 +4,7 @@ - 供货端 + 积分商城 diff --git a/supplied-h5/src/main.js b/supplied-h5/src/main.js index 7495eb3..bc23797 100644 --- a/supplied-h5/src/main.js +++ b/supplied-h5/src/main.js @@ -1,13 +1,18 @@ import Vue from 'vue' import Vant from 'vant' +import { createPinia, PiniaVuePlugin } from 'pinia' import 'vant/lib/index.css' import App from './App.vue' import router from './router' Vue.use(Vant) +Vue.use(PiniaVuePlugin) Vue.config.productionTip = false +const pinia = createPinia() + new Vue({ router, + pinia, render: h => h(App) }).$mount('#app') diff --git a/supplied-h5/src/router/index.js b/supplied-h5/src/router/index.js index 5809428..0e4df03 100644 --- a/supplied-h5/src/router/index.js +++ b/supplied-h5/src/router/index.js @@ -28,7 +28,8 @@ export default new Router({ path: '/joyful-selection', component: JoyfulSelectionLayout, children: [ - { path: '', component: JoyfulSelectionHome }, + { path: '', redirect: 'home' }, + { path: 'home', component: JoyfulSelectionHome }, { path: 'products', component: JoyfulSelectionProductList }, { path: 'product-detail', component: JoyfulSelectionProductDetail }, { path: 'cart', component: JoyfulSelectionCart }, diff --git a/supplied-h5/src/store/cart.js b/supplied-h5/src/store/cart.js new file mode 100644 index 0000000..68ce8fc --- /dev/null +++ b/supplied-h5/src/store/cart.js @@ -0,0 +1,44 @@ +import { defineStore } from 'pinia' + +const CART_KEY = 'joyful-selection-cart' + +const readCartItems = () => { + try { + return JSON.parse(localStorage.getItem(CART_KEY) || '[]') + } catch (error) { + return [] + } +} + +const saveCartItems = items => { + localStorage.setItem(CART_KEY, JSON.stringify(items)) +} + +export const useCartStore = defineStore('joyfulSelectionCart', { + state: () => ({ + items: [] + }), + getters: { + totalCount: state => state.items.reduce((total, item) => total + Number(item.count || 0), 0), + totalPrice: state => state.items.reduce((total, item) => total + Math.round(Number(item.price) * 100) * Number(item.count || 0), 0) + }, + actions: { + loadCart() { + this.items = readCartItems() + }, + persistCart() { + saveCartItems(this.items) + }, + addItem(item) { + const index = this.items.findIndex(cartItem => cartItem.cartId === item.cartId) + + if (index > -1) { + this.items[index].count += item.count + } else { + this.items.unshift(item) + } + + this.persistCart() + } + } +}) diff --git a/supplied-h5/src/view/index.vue b/supplied-h5/src/view/index.vue index c78984b..710fc9c 100644 --- a/supplied-h5/src/view/index.vue +++ b/supplied-h5/src/view/index.vue @@ -68,7 +68,7 @@ export default { { id: 'daily', image: bannerDaily, alt: '精选商品每日推荐' } ], suppliers: [ - { id: 'joy', name: '悦享优选', image: supplierJoy, description: '精选好物，悦享品质生活', tags: ['正品保障', '极速发货', '售后无忧'], productCount: 6800, sales: '18万+', backgroundColor: '#f4f7ff', tagColor: '#4e83ef', tagBackground: '#edf3ff', buttonColor: '#ff651d', path: '/joyful-selection' }, + { id: 'joy', name: '悦享优选', image: supplierJoy, description: '精选好物，悦享品质生活', tags: ['正品保障', '极速发货', '售后无忧'], productCount: 6800, sales: '18万+', backgroundColor: '#f4f7ff', tagColor: '#4e83ef', tagBackground: '#edf3ff', buttonColor: '#ff651d', path: '/joyful-selection/home' }, { id: 'home', name: '美家生活馆', image: supplierHome, description: '家居好物，点亮品质生活', tags: ['家居日用', '品质精选', '售后保障'], productCount: 5200, sales: '12万+', backgroundColor: '#f1fbf9', tagColor: '#18bfae', tagBackground: '#e9faf7', buttonColor: '#ff651d', path: '/home-living' }, { id: 'happy', name: '乐购甄选', image: supplierHappy, description: '天天低价，乐享购物', tags: ['低价好物', '限时优惠', '极速配送'], productCount: 7600, sales: '22万+', backgroundColor: '#f7f4ff', tagColor: '#7b61ee', tagBackground: '#f0edff', buttonColor: '#ff651d', path: '/happy-shopping' }, { id: 'fruit', name: '鲜果优品', image: supplierFruit, description: '新鲜直达，优选好果', tags: ['产地直采', '新鲜直达', '坏果包赔'], productCount: 3500, sales: '9万+', backgroundColor: '#fff9ed', tagColor: '#f39d16', tagBackground: '#fff5df', buttonColor: '#ff651d', path: '/fresh-fruit' }, diff --git a/supplied-h5/src/view/joyful-selection/cart/index.vue b/supplied-h5/src/view/joyful-selection/cart/index.vue index d8f03d9..3787e61 100644 --- a/supplied-h5/src/view/joyful-selection/cart/index.vue +++ b/supplied-h5/src/view/joyful-selection/cart/index.vue @@ -3,33 +3,48 @@
- - - - + +
- + 全选 diff --git a/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue b/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue index c358370..8567e5b 100644 --- a/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue +++ b/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue @@ -1,3 +1,4 @@ - + + diff --git a/supplied-h5/src/view/joyful-selection/layout.vue b/supplied-h5/src/view/joyful-selection/layout.vue index 5c4856a..e8f787f 100644 --- a/supplied-h5/src/view/joyful-selection/layout.vue +++ b/supplied-h5/src/view/joyful-selection/layout.vue @@ -2,7 +2,7 @@
- 首页 + 首页 分类 购物车 我的 @@ -15,7 +15,7 @@ export default { name: 'JoyfulSelectionLayout', computed: { showTabbar() { - return ['/joyful-selection', '/joyful-selection/products', '/joyful-selection/cart', '/joyful-selection/profile'].includes(this.$route.path) + return ['/joyful-selection/home', '/joyful-selection/products', '/joyful-selection/cart', '/joyful-selection/profile'].includes(this.$route.path) } } } diff --git a/supplied-h5/src/view/joyful-selection/product-detail/index.vue b/supplied-h5/src/view/joyful-selection/product-detail/index.vue index b445803..e3ff7da 100644 --- a/supplied-h5/src/view/joyful-selection/product-detail/index.vue +++ b/supplied-h5/src/view/joyful-selection/product-detail/index.vue @@ -1,20 +1,62 @@