czg_team/cashierdesktop
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化element弹窗

Browse Source
This commit is contained in:
gyq
2024-02-27 09:02:31 +08:00
parent 276e65e9a3
commit 1525bb1bf9
4 changed files with 104 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/skuModal.vue
View File

@@ -1,22 +1,27 @@
<template>
<el-dialog :title="goods.name" width="800" v-model="dialogVisible">
<div class="header">选择规格</div>
<div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
<div class="title">{{ item.name }}</div>
<div class="sku_wrap">
<div class="item" :class="{ active: val.active }" v-for="(val, i) in item.value" :key="i"
@click="selectedSku(index, i)">{{ val.name }}</div>
<div v-loading="loading">
<div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
<div class="title">{{ item.name }}</div>
<div class="sku_wrap">
<div class="item" :class="{ active: val.active }" v-for="(val, i) in item.value" :key="i"
@click="selectedSku(index, i)">{{ val.name }}</div>
</div>
</div>
</div>
<div class="info">
<span>库存：{{ }}</span>
</div>
<div class="footer">
<div class="btn">
<el-button plain style="width: 100%;" @click="dialogVisible = false">取消</el-button>
<div class="info" v-if="goodsInfo.id">
<span>库存：{{ goodsInfo.stockNumber }}</span>
<span>￥{{ goodsInfo.salePrice }}</span>
</div>
<div class="btn">
<el-button type="primary" style="width: 100%;">确认</el-button>
<div class="btn_wrap">
<div class="btn">
<el-button plain style="width: 100%;" @click="dialogVisible = false">取消</el-button>
</div>
<div class="btn">
<el-button type="primary" style="width: 100%;" :disabled="!goodsInfo.id">确认</el-button>
</div>
</div>
</div>
</el-dialog>
@@ -35,7 +40,9 @@ const goods = ref({})
const selectedSkuNum = ref(0)
const selectedSkuTag = ref('')
const goodsInfo = ref({})
const loading = ref(false)
// 选择规格
function selectedSku(index, i) {
@@ -49,7 +56,11 @@ function selectedSku(index, i) {
goods.value.tbProductSpec.specList[index].value[i].active = true
selectedSkuNum.value++
}
selectedSuccess()
}
// 规格是否选择完
function selectedSuccess() {
let num = 0
let tag = []
goods.value.tbProductSpec.specList.map(item => {
@@ -64,7 +75,7 @@ function selectedSku(index, i) {
})
if (selectedSkuNum.value >= goods.value.tbProductSpec.specList.length) {
console.log('规格选完了');
// 规格选完了
queryProductSkuAjax()
}
}
@@ -72,32 +83,43 @@ function selectedSku(index, i) {
// 通过选中的商品规格查询价格
async function queryProductSkuAjax() {
try {
loading.value = true
const res = await queryProductSku({
shopId: store.userInfo.shopId,
productId: goods.value.id,
spec_tag: selectedSkuTag.value
})
goodsInfo.value = res
setTimeout(() => {
loading.value = false
}, 100)
} catch (error) {
loading.value = false
console.log(error)
}
}
// 显示规格
function show(item) {
goodsInfo.value = {}
goods.value = {}
selectedSkuNum.value = 0
dialogVisible.value = true
goods.value = item
goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
goods.value.tbProductSpec.specList.map(item => {
let arr = []
item.value.map(val => {
arr.push({
active: false,
name: val
if (typeof goods.value.tbProductSpec.specList == 'string') {
goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
goods.value.tbProductSpec.specList.map(item => {
let arr = []
item.value.map(val => {
arr.push({
active: false,
name: val
})
})
item.value = arr
})
item.value = arr
})
}
selectedSuccess()
}
defineExpose({
@@ -140,14 +162,24 @@ defineExpose({
}
.footer {
display: flex;
padding-top: 100px;
.btn {
flex: 1;
.info {
padding-bottom: 20px;
display: flex;
justify-content: space-between;
font-size: 20px;
}
&:last-child {
margin-left: 14px;
.btn_wrap {
display: flex;
.btn {
flex: 1;
&:last-child {
margin-left: 14px;
}
}
}
}