优化首页商品卡顿
This commit is contained in:
parent
e26049593f
commit
43ccf82177
141
package.json
141
package.json
|
|
@ -1,71 +1,72 @@
|
|||
{
|
||||
"name": "vite-electron",
|
||||
"private": true,
|
||||
"version": "1.0.25",
|
||||
"main": "dist-electron/main.js",
|
||||
"scripts": {
|
||||
"dev": "chcp 65001 && vite",
|
||||
"build": "node ./addVersion.js && vite build && electron-builder",
|
||||
"preview": "vite preview",
|
||||
"build:win": "node ./addVersion.js && vite build && electron-builder --w"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"axios": "^1.6.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"electron-pos-printer": "^1.3.6",
|
||||
"electron-pos-printer-vue": "^1.0.9",
|
||||
"element-plus": "^2.4.3",
|
||||
"lodash": "^4.17.21",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.5.0",
|
||||
"electron": "^28.2.3",
|
||||
"electron-builder": "^24.13.3",
|
||||
"electron-rebuild": "^3.2.9",
|
||||
"path": "^0.12.7",
|
||||
"sass": "^1.69.5",
|
||||
"sass-loader": "^13.3.2",
|
||||
"tree-kill": "^1.2.2",
|
||||
"vite": "^5.0.0",
|
||||
"vite-plugin-electron": "^0.15.4",
|
||||
"vite-plugin-electron-renderer": "^0.14.5"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.cashierdesktop.app",
|
||||
"productName": "银收客",
|
||||
"asar": true,
|
||||
"files": [
|
||||
"./dist/**/*",
|
||||
"./dist-electron/**/*"
|
||||
],
|
||||
"directories": {
|
||||
"buildResources": "build",
|
||||
"output": "release"
|
||||
},
|
||||
"win": {
|
||||
"icon": "./public/logo.ico",
|
||||
"target": [
|
||||
{
|
||||
"target": "nsis",
|
||||
"arch": [
|
||||
"ia32"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"allowElevation": true,
|
||||
"allowToChangeInstallationDirectory": true,
|
||||
"installerIcon": "./public/logo.ico",
|
||||
"uninstallerIcon": "./public/logo.ico",
|
||||
"installerHeaderIcon": "./public/logo.ico",
|
||||
"createDesktopShortcut": true,
|
||||
"createStartMenuShortcut": true
|
||||
}
|
||||
}
|
||||
}
|
||||
"name": "vite-electron",
|
||||
"private": true,
|
||||
"version": "1.0.25",
|
||||
"main": "dist-electron/main.js",
|
||||
"scripts": {
|
||||
"dev": "chcp 65001 && vite",
|
||||
"build": "node ./addVersion.js && vite build && electron-builder",
|
||||
"preview": "vite preview",
|
||||
"build:win": "node ./addVersion.js && vite build && electron-builder --w"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"axios": "^1.6.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"electron-pos-printer": "^1.3.6",
|
||||
"electron-pos-printer-vue": "^1.0.9",
|
||||
"element-plus": "^2.4.3",
|
||||
"lodash": "^4.17.21",
|
||||
"pinia": "^2.1.7",
|
||||
"swiper": "^11.1.1",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.5.0",
|
||||
"electron": "^28.2.3",
|
||||
"electron-builder": "^24.13.3",
|
||||
"electron-rebuild": "^3.2.9",
|
||||
"path": "^0.12.7",
|
||||
"sass": "^1.69.5",
|
||||
"sass-loader": "^13.3.2",
|
||||
"tree-kill": "^1.2.2",
|
||||
"vite": "^5.0.0",
|
||||
"vite-plugin-electron": "^0.15.4",
|
||||
"vite-plugin-electron-renderer": "^0.14.5"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.cashierdesktop.app",
|
||||
"productName": "银收客",
|
||||
"asar": true,
|
||||
"files": [
|
||||
"./dist/**/*",
|
||||
"./dist-electron/**/*"
|
||||
],
|
||||
"directories": {
|
||||
"buildResources": "build",
|
||||
"output": "release"
|
||||
},
|
||||
"win": {
|
||||
"icon": "./public/logo.ico",
|
||||
"target": [
|
||||
{
|
||||
"target": "nsis",
|
||||
"arch": [
|
||||
"ia32"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"allowElevation": true,
|
||||
"allowToChangeInstallationDirectory": true,
|
||||
"installerIcon": "./public/logo.ico",
|
||||
"uninstallerIcon": "./public/logo.ico",
|
||||
"installerHeaderIcon": "./public/logo.ico",
|
||||
"createDesktopShortcut": true,
|
||||
"createStartMenuShortcut": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,19 +34,23 @@
|
|||
@click="changeShopListType"></el-button>
|
||||
</div>
|
||||
<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)">
|
||||
<div class="item">
|
||||
<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" lazy></el-image>
|
||||
<swiper class="swiper_box" direction="vertical" @slideChange="onSlideChange">
|
||||
<swiper-slide class="slide_item" v-for="(goods, index) in goodsList" :key="index">
|
||||
<div class="item_wrap" v-for="item in goods" :key="item.id" @click="showSkuHandle(item)">
|
||||
<div class="item">
|
||||
<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 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>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
<div class="empty">
|
||||
<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 { useUser } from "@/store/user.js"
|
||||
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import "swiper/swiper-bundle.css";
|
||||
|
||||
|
||||
const store = useUser()
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -77,7 +86,7 @@ const emit = defineEmits(['success'])
|
|||
|
||||
const skuModalRef = ref(null)
|
||||
|
||||
const shopListType = ref('text')
|
||||
const shopListType = ref('img')
|
||||
|
||||
const categorys = ref([])
|
||||
const categorysActive = ref(0)
|
||||
|
|
@ -86,11 +95,24 @@ const commdityName = ref('')
|
|||
|
||||
const loading = ref(false)
|
||||
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 inputChange = _.debounce(function () {
|
||||
productqueryCommodityInfoAjax()
|
||||
goodsList.value = []
|
||||
goodsPage.value = 1
|
||||
finish.value = false
|
||||
currentGoodsIndex.value = 0
|
||||
loopMax.value = 0
|
||||
loopTimer.value = null
|
||||
|
||||
updataGoods()
|
||||
}, 500)
|
||||
|
||||
// 确认选择规格回调
|
||||
|
|
@ -156,7 +178,14 @@ function changeCategory(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() {
|
||||
try {
|
||||
loading.value = true
|
||||
// loading.value = true
|
||||
const res = await productqueryCommodityInfo({
|
||||
shopId: store.userInfo.shopId,
|
||||
categoryId: categorys.value[categorysActive.value].id,
|
||||
commdityName: commdityName.value,
|
||||
page: 1,
|
||||
pageSize: 500,
|
||||
page: goodsPage.value,
|
||||
pageSize: goodsPageSize.value,
|
||||
masterId: props.masterId
|
||||
})
|
||||
goodsList.value = res
|
||||
loading.value = false
|
||||
if (res.list.length < goodsPageSize.value) {
|
||||
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) {
|
||||
loading.value = false
|
||||
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() {
|
||||
localUpdateShopListType()
|
||||
await updateCategoryActive()
|
||||
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({
|
||||
updateData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.swiper_box {
|
||||
height: 100%;
|
||||
|
||||
.slide_item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.loading_wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -325,10 +421,11 @@ defineExpose({
|
|||
}
|
||||
|
||||
.shop_list {
|
||||
max-height: calc(100vh - 40px - 80px - 40px);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// max-height: calc(100vh - 40px - 80px - 40px);
|
||||
height: calc(100vh - 40px - 80px - 28px);
|
||||
// overflow-y: auto;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
padding: 0 10px;
|
||||
|
||||
&.img {
|
||||
|
|
@ -338,11 +435,14 @@ defineExpose({
|
|||
}
|
||||
|
||||
.item_wrap {
|
||||
float: left;
|
||||
width: 20%;
|
||||
height: 33.333%;
|
||||
padding: 0 5px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.item {
|
||||
height: 100%;
|
||||
border: 1px solid #ececec;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
|
@ -366,7 +466,7 @@ defineExpose({
|
|||
|
||||
.cover {
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
height: 60%;
|
||||
position: relative;
|
||||
|
||||
.el_img {
|
||||
|
|
@ -381,8 +481,10 @@ defineExpose({
|
|||
|
||||
.name {
|
||||
padding: 0 10px;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// margin-top: 20px;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
|
|
@ -394,6 +496,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
.price {
|
||||
height: 20%;
|
||||
padding: 6px 10px;
|
||||
background-color: var(--primary-color);
|
||||
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ export default defineConfig({
|
|||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'https://cashierclient.sxczgkj.cn/cashier-client', // 线上
|
||||
// target: 'http://192.168.2.27:10587/cashier-client', // 国成
|
||||
// target: 'https://cashierclient.sxczgkj.cn/cashier-client', // 线上
|
||||
target: 'http://192.168.2.116:10587/cashier-client', // 国成
|
||||
// target: 'http://192.168.2.128:10587/cashier-client',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
|
|
|
|||
Loading…
Reference in New Issue