优化首页商品卡顿
This commit is contained in:
parent
e26049593f
commit
43ccf82177
139
package.json
139
package.json
|
|
@ -1,71 +1,72 @@
|
||||||
{
|
{
|
||||||
"name": "vite-electron",
|
"name": "vite-electron",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "1.0.25",
|
"version": "1.0.25",
|
||||||
"main": "dist-electron/main.js",
|
"main": "dist-electron/main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "chcp 65001 && vite",
|
"dev": "chcp 65001 && vite",
|
||||||
"build": "node ./addVersion.js && vite build && electron-builder",
|
"build": "node ./addVersion.js && vite build && electron-builder",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"build:win": "node ./addVersion.js && vite build && electron-builder --w"
|
"build:win": "node ./addVersion.js && vite build && electron-builder --w"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "^2.3.1",
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
"dayjs": "^1.11.10",
|
"dayjs": "^1.11.10",
|
||||||
"electron-pos-printer": "^1.3.6",
|
"electron-pos-printer": "^1.3.6",
|
||||||
"electron-pos-printer-vue": "^1.0.9",
|
"electron-pos-printer-vue": "^1.0.9",
|
||||||
"element-plus": "^2.4.3",
|
"element-plus": "^2.4.3",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"vue": "^3.3.8",
|
"swiper": "^11.1.1",
|
||||||
"vue-router": "^4.2.5"
|
"vue": "^3.3.8",
|
||||||
},
|
"vue-router": "^4.2.5"
|
||||||
"devDependencies": {
|
},
|
||||||
"@vitejs/plugin-vue": "^4.5.0",
|
"devDependencies": {
|
||||||
"electron": "^28.2.3",
|
"@vitejs/plugin-vue": "^4.5.0",
|
||||||
"electron-builder": "^24.13.3",
|
"electron": "^28.2.3",
|
||||||
"electron-rebuild": "^3.2.9",
|
"electron-builder": "^24.13.3",
|
||||||
"path": "^0.12.7",
|
"electron-rebuild": "^3.2.9",
|
||||||
"sass": "^1.69.5",
|
"path": "^0.12.7",
|
||||||
"sass-loader": "^13.3.2",
|
"sass": "^1.69.5",
|
||||||
"tree-kill": "^1.2.2",
|
"sass-loader": "^13.3.2",
|
||||||
"vite": "^5.0.0",
|
"tree-kill": "^1.2.2",
|
||||||
"vite-plugin-electron": "^0.15.4",
|
"vite": "^5.0.0",
|
||||||
"vite-plugin-electron-renderer": "^0.14.5"
|
"vite-plugin-electron": "^0.15.4",
|
||||||
},
|
"vite-plugin-electron-renderer": "^0.14.5"
|
||||||
"build": {
|
},
|
||||||
"appId": "com.cashierdesktop.app",
|
"build": {
|
||||||
"productName": "银收客",
|
"appId": "com.cashierdesktop.app",
|
||||||
"asar": true,
|
"productName": "银收客",
|
||||||
"files": [
|
"asar": true,
|
||||||
"./dist/**/*",
|
"files": [
|
||||||
"./dist-electron/**/*"
|
"./dist/**/*",
|
||||||
],
|
"./dist-electron/**/*"
|
||||||
"directories": {
|
],
|
||||||
"buildResources": "build",
|
"directories": {
|
||||||
"output": "release"
|
"buildResources": "build",
|
||||||
},
|
"output": "release"
|
||||||
"win": {
|
},
|
||||||
"icon": "./public/logo.ico",
|
"win": {
|
||||||
"target": [
|
"icon": "./public/logo.ico",
|
||||||
{
|
"target": [
|
||||||
"target": "nsis",
|
{
|
||||||
"arch": [
|
"target": "nsis",
|
||||||
"ia32"
|
"arch": [
|
||||||
]
|
"ia32"
|
||||||
}
|
]
|
||||||
]
|
}
|
||||||
},
|
]
|
||||||
"nsis": {
|
},
|
||||||
"oneClick": false,
|
"nsis": {
|
||||||
"allowElevation": true,
|
"oneClick": false,
|
||||||
"allowToChangeInstallationDirectory": true,
|
"allowElevation": true,
|
||||||
"installerIcon": "./public/logo.ico",
|
"allowToChangeInstallationDirectory": true,
|
||||||
"uninstallerIcon": "./public/logo.ico",
|
"installerIcon": "./public/logo.ico",
|
||||||
"installerHeaderIcon": "./public/logo.ico",
|
"uninstallerIcon": "./public/logo.ico",
|
||||||
"createDesktopShortcut": true,
|
"installerHeaderIcon": "./public/logo.ico",
|
||||||
"createStartMenuShortcut": true
|
"createDesktopShortcut": true,
|
||||||
}
|
"createStartMenuShortcut": true
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -34,19 +34,23 @@
|
||||||
@click="changeShopListType"></el-button>
|
@click="changeShopListType"></el-button>
|
||||||
</div>
|
</div>
|
||||||
<div class="shop_list" :class="{ img: shopListType == 'img' }" v-loading="loading">
|
<div class="shop_list" :class="{ img: shopListType == 'img' }" v-loading="loading">
|
||||||
<div class="item_wrap" v-for="item in goodsList" :key="item.id" @click="showSkuHandle(item)">
|
<swiper class="swiper_box" direction="vertical" @slideChange="onSlideChange">
|
||||||
<div class="item">
|
<swiper-slide class="slide_item" v-for="(goods, index) in goodsList" :key="index">
|
||||||
<div class="dot" v-if="item.orderCount">{{ item.orderCount }}</div>
|
<div class="item_wrap" v-for="item in goods" :key="item.id" @click="showSkuHandle(item)">
|
||||||
<div class="cover" v-if="shopListType == 'img'">
|
<div class="item">
|
||||||
<el-image :src="item.coverImg" class="el_img" fit="cover" lazy></el-image>
|
<div class="dot" v-if="item.orderCount">{{ item.orderCount }}</div>
|
||||||
|
<div class="cover" v-if="shopListType == 'img'">
|
||||||
|
<el-image :src="item.coverImg" class="el_img" fit="cover"></el-image>
|
||||||
|
</div>
|
||||||
|
<div class="name"><el-text line-clamp="2">{{ item.name }}</el-text></div>
|
||||||
|
<div class="item_empty" v-if="shopListType == 'text'"></div>
|
||||||
|
<div class="price">
|
||||||
|
<el-text>￥{{ item.lowPrice }}</el-text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name"><el-text line-clamp="2">{{ item.name }}</el-text></div>
|
</swiper-slide>
|
||||||
<div class="item_empty" v-if="shopListType == 'text'"></div>
|
</swiper>
|
||||||
<div class="price">
|
|
||||||
<el-text>￥{{ item.lowPrice }}</el-text>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="empty">
|
<div class="empty">
|
||||||
<el-empty description="空空如也~" v-if="!goodsList.length" />
|
<el-empty description="空空如也~" v-if="!goodsList.length" />
|
||||||
|
|
@ -64,6 +68,11 @@ import skuModal from '@/components/skuModal.vue'
|
||||||
|
|
||||||
import { queryCategory, productqueryCommodityInfo, queryProductSku } from '@/api/product'
|
import { queryCategory, productqueryCommodityInfo, queryProductSku } from '@/api/product'
|
||||||
import { useUser } from "@/store/user.js"
|
import { useUser } from "@/store/user.js"
|
||||||
|
|
||||||
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||||
|
import "swiper/swiper-bundle.css";
|
||||||
|
|
||||||
|
|
||||||
const store = useUser()
|
const store = useUser()
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -77,7 +86,7 @@ const emit = defineEmits(['success'])
|
||||||
|
|
||||||
const skuModalRef = ref(null)
|
const skuModalRef = ref(null)
|
||||||
|
|
||||||
const shopListType = ref('text')
|
const shopListType = ref('img')
|
||||||
|
|
||||||
const categorys = ref([])
|
const categorys = ref([])
|
||||||
const categorysActive = ref(0)
|
const categorysActive = ref(0)
|
||||||
|
|
@ -86,11 +95,24 @@ const commdityName = ref('')
|
||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const goodsList = ref([])
|
const goodsList = ref([])
|
||||||
|
const goodsPage = ref(1)
|
||||||
|
const goodsPageSize = ref(12)
|
||||||
|
const finish = ref(false) // 是否加载完
|
||||||
|
const currentGoodsIndex = ref(0)
|
||||||
|
const loopMax = ref(0)
|
||||||
|
const loopTimer = ref(null)
|
||||||
|
|
||||||
const showPopover = ref(false)
|
const showPopover = ref(false)
|
||||||
|
|
||||||
const inputChange = _.debounce(function () {
|
const inputChange = _.debounce(function () {
|
||||||
productqueryCommodityInfoAjax()
|
goodsList.value = []
|
||||||
|
goodsPage.value = 1
|
||||||
|
finish.value = false
|
||||||
|
currentGoodsIndex.value = 0
|
||||||
|
loopMax.value = 0
|
||||||
|
loopTimer.value = null
|
||||||
|
|
||||||
|
updataGoods()
|
||||||
}, 500)
|
}, 500)
|
||||||
|
|
||||||
// 确认选择规格回调
|
// 确认选择规格回调
|
||||||
|
|
@ -156,7 +178,14 @@ function changeCategory(index) {
|
||||||
|
|
||||||
useStorage.set('categorysActive', index)
|
useStorage.set('categorysActive', index)
|
||||||
|
|
||||||
productqueryCommodityInfoAjax()
|
goodsList.value = []
|
||||||
|
goodsPage.value = 1
|
||||||
|
finish.value = false
|
||||||
|
currentGoodsIndex.value = 0
|
||||||
|
loopMax.value = 0
|
||||||
|
loopTimer.value = null
|
||||||
|
|
||||||
|
updataGoods()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 从本地更新已选择的选项
|
// 从本地更新已选择的选项
|
||||||
|
|
@ -191,37 +220,104 @@ async function queryCategoryAjax() {
|
||||||
// 查询商品信息
|
// 查询商品信息
|
||||||
async function productqueryCommodityInfoAjax() {
|
async function productqueryCommodityInfoAjax() {
|
||||||
try {
|
try {
|
||||||
loading.value = true
|
// loading.value = true
|
||||||
const res = await productqueryCommodityInfo({
|
const res = await productqueryCommodityInfo({
|
||||||
shopId: store.userInfo.shopId,
|
shopId: store.userInfo.shopId,
|
||||||
categoryId: categorys.value[categorysActive.value].id,
|
categoryId: categorys.value[categorysActive.value].id,
|
||||||
commdityName: commdityName.value,
|
commdityName: commdityName.value,
|
||||||
page: 1,
|
page: goodsPage.value,
|
||||||
pageSize: 500,
|
pageSize: goodsPageSize.value,
|
||||||
masterId: props.masterId
|
masterId: props.masterId
|
||||||
})
|
})
|
||||||
goodsList.value = res
|
if (res.list.length < goodsPageSize.value) {
|
||||||
loading.value = false
|
finish.value = true
|
||||||
|
}
|
||||||
|
// loading.value = false
|
||||||
|
|
||||||
|
if (res.total > (goodsPageSize.value * 2)) {
|
||||||
|
// 启动循环任务
|
||||||
|
loopMax.value = parseInt(res.total / goodsPageSize.value)
|
||||||
|
loopGetGoods()
|
||||||
|
}
|
||||||
|
return res.list
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
console.log(error)
|
console.log(error)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 循环获取商品
|
||||||
|
function loopGetGoods() {
|
||||||
|
loopTimer.value = setInterval(async () => {
|
||||||
|
goodsPage.value++
|
||||||
|
if (goodsPage.value > loopMax.value) {
|
||||||
|
clearInterval(loopTimer.value)
|
||||||
|
loopTimer.value = null
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const res = await productqueryCommodityInfoAjax()
|
||||||
|
goodsList.value.push(res)
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
|
||||||
// 更新商品数据
|
// 更新商品数据
|
||||||
async function updateData() {
|
async function updateData() {
|
||||||
localUpdateShopListType()
|
localUpdateShopListType()
|
||||||
await updateCategoryActive()
|
await updateCategoryActive()
|
||||||
await queryCategoryAjax()
|
await queryCategoryAjax()
|
||||||
await productqueryCommodityInfoAjax()
|
updataGoods()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function updataGoods() {
|
||||||
|
if (!goodsList.value.length) {
|
||||||
|
const res = await productqueryCommodityInfoAjax()
|
||||||
|
goodsList.value.push(res)
|
||||||
|
|
||||||
|
if (res.length >= goodsPageSize.value) {
|
||||||
|
goodsPage.value++
|
||||||
|
const res2 = await productqueryCommodityInfoAjax()
|
||||||
|
goodsList.value.push(res2)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
goodsPage.value = currentGoodsIndex.value + 1
|
||||||
|
goodsList.value[currentGoodsIndex.value] = await productqueryCommodityInfoAjax()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 轮播图开始滑动
|
||||||
|
const onSlideChange = _.debounce(async function (e) {
|
||||||
|
if (e.activeIndex == e.previousIndex || finish.value) return
|
||||||
|
if (e.activeIndex > e.previousIndex) {
|
||||||
|
// console.log('向下滑动');
|
||||||
|
goodsPage.value++
|
||||||
|
const res = await productqueryCommodityInfoAjax()
|
||||||
|
goodsList.value.push(res)
|
||||||
|
// goodsList.value.shift()
|
||||||
|
} else {
|
||||||
|
// console.log('向上滑动');
|
||||||
|
// goodsPage.value--
|
||||||
|
// const res = await productqueryCommodityInfoAjax()
|
||||||
|
// goodsList.value.unshift(res)
|
||||||
|
// goodsList.value.pop()
|
||||||
|
}
|
||||||
|
currentGoodsIndex.value = e.activeIndex
|
||||||
|
}, 500)
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
updateData
|
updateData
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.swiper_box {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.slide_item {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.loading_wrap {
|
.loading_wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -325,10 +421,11 @@ defineExpose({
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop_list {
|
.shop_list {
|
||||||
max-height: calc(100vh - 40px - 80px - 40px);
|
// max-height: calc(100vh - 40px - 80px - 40px);
|
||||||
overflow-y: auto;
|
height: calc(100vh - 40px - 80px - 28px);
|
||||||
display: flex;
|
// overflow-y: auto;
|
||||||
flex-wrap: wrap;
|
// display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
|
||||||
&.img {
|
&.img {
|
||||||
|
|
@ -338,11 +435,14 @@ defineExpose({
|
||||||
}
|
}
|
||||||
|
|
||||||
.item_wrap {
|
.item_wrap {
|
||||||
|
float: left;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
|
height: 33.333%;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
|
height: 100%;
|
||||||
border: 1px solid #ececec;
|
border: 1px solid #ececec;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -366,7 +466,7 @@ defineExpose({
|
||||||
|
|
||||||
.cover {
|
.cover {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 100%;
|
height: 60%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.el_img {
|
.el_img {
|
||||||
|
|
@ -381,8 +481,10 @@ defineExpose({
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
height: 40px;
|
height: 20%;
|
||||||
margin-top: 20px;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// margin-top: 20px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -394,6 +496,7 @@ defineExpose({
|
||||||
}
|
}
|
||||||
|
|
||||||
.price {
|
.price {
|
||||||
|
height: 20%;
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,8 @@ export default defineConfig({
|
||||||
server: {
|
server: {
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'https://cashierclient.sxczgkj.cn/cashier-client', // 线上
|
// target: 'https://cashierclient.sxczgkj.cn/cashier-client', // 线上
|
||||||
// target: 'http://192.168.2.27:10587/cashier-client', // 国成
|
target: 'http://192.168.2.116:10587/cashier-client', // 国成
|
||||||
// target: 'http://192.168.2.128:10587/cashier-client',
|
// target: 'http://192.168.2.128:10587/cashier-client',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (path) => path.replace(/^\/api/, '')
|
rewrite: (path) => path.replace(/^\/api/, '')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue