284 lines
7.5 KiB
Vue
284 lines
7.5 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from "vue";
|
|
import { storeListApi, userFreeTrialApi, productTitleApi, productStatusApi } from "@/api/shop.js";
|
|
import { useUserStore } from "@/store/user.js";
|
|
import { ElMessage } from "element-plus";
|
|
import add from "./component/add.vue";
|
|
|
|
const orderList = ref([]);
|
|
const userStore = useUserStore();
|
|
|
|
const where = ref({
|
|
page: 1,
|
|
limit: 15,
|
|
type: 1,
|
|
keyword: "",
|
|
staff_id: userStore.userInfo.service.service_id,
|
|
});
|
|
|
|
const loading = ref(false);
|
|
const total = ref(0);
|
|
|
|
|
|
|
|
const productTitle = ref([]);
|
|
const getProductTitleApi = () => {
|
|
productTitleApi(userStore.userInfo.service.mer_id).then((res) => {
|
|
productTitle.value = res.data;
|
|
});
|
|
};
|
|
getProductTitleApi()
|
|
|
|
const getShopList = () => {
|
|
loading.value = true;
|
|
storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
|
|
orderList.value = res.data.list;
|
|
total.value = res.data.count;
|
|
loading.value = false;
|
|
});
|
|
};
|
|
|
|
getShopList();
|
|
|
|
const prevClick = (e) => {
|
|
where.value.page = e;
|
|
getShopList();
|
|
};
|
|
|
|
const nextClick = (e) => {
|
|
where.value.page = e;
|
|
getShopList();
|
|
};
|
|
|
|
const currentChange = (e) => {
|
|
where.value.page = e;
|
|
getShopList();
|
|
};
|
|
|
|
const dialogFormVisible = ref(false);
|
|
const form = ref({});
|
|
const edit = (row) => {
|
|
form.value = row;
|
|
dialogFormVisible.value = true;
|
|
};
|
|
|
|
const submitUpdate = () => {
|
|
let obj = {
|
|
attr: form.value.attr || [],
|
|
attrValue: form.value.attrValue,
|
|
mer_cate_id: form.value.merCateId || [],
|
|
spec_type: form.value.spec_type,
|
|
is_stock: 1,
|
|
};
|
|
userFreeTrialApi(form.value.product_id, obj)
|
|
.then((res) => {
|
|
ElMessage({
|
|
message: res.message,
|
|
type: "success",
|
|
});
|
|
dialogFormVisible.value = false;
|
|
getShopList();
|
|
})
|
|
.catch((err) => {
|
|
ElMessage({
|
|
message: err,
|
|
type: "error",
|
|
});
|
|
});
|
|
};
|
|
|
|
const activeIndex = ref('1');
|
|
|
|
const handleSelect = (key) => {
|
|
where.value.type = key;
|
|
where.value.page = 1;
|
|
getShopList();
|
|
};
|
|
|
|
const updateShow = (row) => {
|
|
productStatusApi(userStore.userInfo.service.mer_id, row.product_id, {
|
|
status: row.is_show ? 1 : 0
|
|
}).then(res=>{
|
|
ElMessage.success(res.message);
|
|
getShopList();
|
|
})
|
|
}
|
|
|
|
const addRef = ref(null);
|
|
const showAdd = (type='add', data)=>{
|
|
addRef.value.show(type, data);
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div v-loading="loading" element-loading-text="加载中" class="my-shop">
|
|
<el-form :inline="true">
|
|
<el-form-item label="关键字:">
|
|
<el-input v-model="where.keyword" placeholder="请输入关键字搜索" style="width: 20rem;" clearable @clear="getShopList(true)" @keydown.enter="getShopList(true)"/>
|
|
</el-form-item>
|
|
<el-form-item >
|
|
<el-button type="primary" @click="getShopList(true)">搜索</el-button>
|
|
</el-form-item>
|
|
<el-form-item >
|
|
<el-button type="primary" @click="showAdd('add')">新增</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-menu
|
|
:default-active="activeIndex"
|
|
class="el-menu-top"
|
|
mode="horizontal"
|
|
@select="handleSelect"
|
|
>
|
|
<el-menu-item
|
|
:index="item.type+''"
|
|
v-for="(item, index) in productTitle"
|
|
:key="index"
|
|
>{{ `${item.name}(${item.count})` }}</el-menu-item
|
|
>
|
|
</el-menu>
|
|
|
|
<el-table :data="orderList" style="width: 100%">
|
|
<el-table-column prop="product_id" label="ID" width="100" />
|
|
<el-table-column prop="image" label="图片" width="120">
|
|
<template #default="scope">
|
|
<el-image
|
|
loading="lazy"
|
|
style="width: 60px; height: 60px"
|
|
:src="scope.row.image"
|
|
></el-image>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="store_name" label="商品名称" width="500" />
|
|
<el-table-column prop="price" label="售价" />
|
|
<el-table-column prop="stock" label="库存" />
|
|
<el-table-column label="上/下架" v-if="where.type<=2" width="100">
|
|
<template #default="scope">
|
|
<el-switch
|
|
v-model="scope.row.is_show"
|
|
:active-value="1"
|
|
inline-prompt
|
|
active-text="上架"
|
|
inactive-text="下架"
|
|
@click="updateShow(scope.row)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="商品状态" v-if="where.type<=4" width="100">
|
|
<template #default="scope">
|
|
<span v-if="!scope.row.is_used" style="color: #ff4a00">平台关闭</span>
|
|
<span v-else-if="scope.row.is_show">上架显示</span>
|
|
<span v-else>下架</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="120">
|
|
<template #default="scope">
|
|
<el-button
|
|
type="primary"
|
|
v-if="where.type != 5"
|
|
link
|
|
@click="edit(scope.row)"
|
|
>修改库存</el-button
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
v-if="where.type != 1 && where.type != 5"
|
|
link
|
|
@click="showAdd('edit', scope.row)"
|
|
>编辑</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-pagination
|
|
:page-size="where.limit"
|
|
layout="prev, pager, next"
|
|
:total="total"
|
|
@prev-click="prevClick"
|
|
@next-click="nextClick"
|
|
@current-change="currentChange"
|
|
/>
|
|
|
|
<el-dialog v-model="dialogFormVisible" title="编辑商品库存" width="800">
|
|
<el-table
|
|
v-if="form.attrValue"
|
|
:data="form.attrValue"
|
|
stripe
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column prop="image" label="图片" width="180">
|
|
<template #default="scope">
|
|
<el-image
|
|
loading="lazy"
|
|
style="width: 5rem; height: 5rem"
|
|
:src="scope.row.image || form.image"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="sku" label="名称" width="180">
|
|
<template #default="scope">
|
|
<span>{{ scope.row.sku || form.store_name }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="price" label="价格" />
|
|
<el-table-column prop="stock" label="库存">
|
|
<template #default="scope">
|
|
<el-input-number
|
|
v-model="scope.row.stock"
|
|
step-strictly
|
|
:min="0"
|
|
:step="1"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="submitUpdate"> 确定 </el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
<add ref="addRef" @reload="getShopList"></add>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.my-shop {
|
|
background-color: #fff;
|
|
border-radius: 1.2rem;
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
overflow-y: scroll;
|
|
}
|
|
/* 修改滚动条的样式 */
|
|
::-webkit-scrollbar {
|
|
width: 5px; /* 设置滚动条的宽度 */
|
|
}
|
|
|
|
/* 设置滚动条的轨道样式 */
|
|
::-webkit-scrollbar-track {
|
|
background-color: #f1f1f1; /* 设置轨道的背景色 */
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* 设置滚动条的滑块样式 */
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #ccc; /* 设置滑块的背景色 */
|
|
border-radius: 5px; /* 设置滑块的圆角 */
|
|
}
|
|
|
|
/* 设置滚动条鼠标悬停时的滑块样式 */
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
|
}
|
|
.el-menu--horizontal {
|
|
height: 2.5rem;
|
|
}
|
|
.el-form--inline .el-form-item{
|
|
margin-right: 1rem;
|
|
}
|
|
</style>
|