code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-21 18:35:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

c

Browse Source
This commit is contained in:
lemon橪
2021-06-03 11:47:34 +08:00
parent 020ddf0588
commit d55d53528e
37 changed files with 4760 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

293
seller/src/views/promotion/live/liveGoods.vue
View File

@@ -1,72 +1,102 @@
<template>
<div class="wrapper">
<Card>
<Alert banner type="warning">
<Form ref="searchForm" :model="params" inline :label-width="100" class="search-form">
<Form-item label="商品名称">
<Input type="text" v-model="params.name" placeholder="请输入商品名称" clearable style="width: 200px" />
</Form-item>
<template slot="desc">
由于直播商品需经过小程序直播平台的审核，你需要在此先提审商品，为了不影响直播间选取商品，请提前1天提审商品；
每次最多可提审20款商品，每个店铺最多可维护200款商品，每款SPU只需选择其中一款SKU即可；
</template>
</Alert>
<Button @click="getLiveGoodsMethods('clear')" type="primary" class="search-btn" icon="ios-search">搜索</Button>
</Form>
<h4 v-if="!reviewed">
由于直播商品需经过小程序直播平台的审核，你需要在此先提审商品，为了不影响直播间选取商品，请提前1天提审商品；
</h4>
<div>
<Tabs :value="params.auditStatus">
<Tabs v-model="params.auditStatus">
<TabPane v-for="(item,index) in liveTabWay" :key="index" :label="item.label" :name="item.type">
</TabPane>
</Tabs>
</div>
<Button type="primary" style="margin-bottom:10px;" @click="addNewLiveGoods" icon="md-add">选择商品</Button>
<Button v-if="!reviewed" type="primary" style="margin-bottom:10px;" @click="addNewLiveGoods" icon="md-add">选择商品</Button>
<Button type="primary" v-if="params.auditStatus == 0" ghost style="margin:0 0 10px 10px" @click="getLiveGoodsMethods('clear')">更新状态</Button>
<div style="position:relative">
<Spin size="large" fix v-if="tableLoading">
</Spin>
<Table disabled-hover :columns="liveGoodsColumns" :data="liveGoodsData">
<Table disabled-hover :columns="liveGoodsColumns" :data="liveGoodsData">
<template slot-scope="{ row }" slot="goodsName">
<div class="flex-goods">
<img class="thumbnail" :src="row.thumbnail">
{{ row.goodsName }}
</div>
</template>
<template slot-scope="{ row }" slot="price">
<RadioGroup v-model="row.priceType">
<div class="price-item">
<Radio label="1">一口价:</Radio> <Input v-if="row.priceType == '1'" style="width:100px" v-model="row.price"></Input>
<template slot-scope="{ row }" slot="goodsName">
<div class="flex-goods">
<img class="thumbnail" :src="row.thumbnail || row.goodsImage">
{{ row.goodsName || row.name }}
</div>
<div class="price-item">
<Radio label="2">区间价:</Radio> <span v-if="row.priceType == '2'"><Input style="width:100px" v-model="row.price" />至<Input style="width:100px" v-model="row.price2" /></span>
</div>
<div class="price-item">
<Radio label="3">折扣价:</Radio> <span v-if="row.priceType == '3'">现价<Input style="width:100px" v-model="row.price"></Input>原价<Input style="width:100px" v-model="row.price2" /></span>
</div>
</RadioGroup>
</template>
</template>
<template slot-scope="{ row ,index }" class="price" slot="price">
<!-- 如果为新增商品显示 -->
<template slot-scope="{ row,index }" slot="action">
<Button type="primary" @click="()=>{liveGoodsData.splice(index,1)}">删除</Button>
</template>
</Table>
<RadioGroup v-if="params.auditStatus == 99" @on-change="changeRadio(row,'priceType')" v-model="row.priceType">
<div class="price-item">
<Radio :label="1">一口价:</Radio>
<InputNumber :min="0.1" v-if="liveGoodsData[index].priceType == 1" style="width:100px" v-model="liveGoodsData[index].price"></InputNumber>
</div>
<div class="price-item">
<Radio :label="2">区间价:</Radio> <span v-if="liveGoodsData[index].priceType == 2">
<InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price" />至
<InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price2" />
</span>
</div>
<div class="price-item">
<Radio :label="3">折扣价:</Radio> <span v-if="liveGoodsData[index].priceType == 3">原价<InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price"></InputNumber>现价
<InputNumber :min="0.1" style="width:100px" v-model="liveGoodsData[index].price2" />
</span>
</div>
</RadioGroup>
<div v-else>
<div v-if="row.priceType == 1">{{row.price | unitPrice('￥')}}</div>
<div v-if="row.priceType == 2">{{row.price | unitPrice('￥')}}至{{row.price2 | unitPrice('￥')}}</div>
<div v-if="row.priceType == 3">{{row.price | unitPrice('￥')}}<span class="original-price">{{row.price2 | unitPrice('￥')}}</span></div>
</div>
</template>
<template slot-scope="{ row,index }" slot="action">
<Button v-if="params.auditStatus == 99" type="primary" @click="()=>{liveGoodsData.splice(index,1)}">删除</Button>
<Button v-if="params.auditStatus != 99 && !reviewed" ghost type="primary" @click="()=>{$router.push({path:'/goods-operation-edit',query:{id:row.goodsId}})}">查看</Button>
<Button v-if="reviewed" :type="row.__selected ? 'primary' : ''" @click="selectedLiveGoods(row,index)">{{row.__selected ? '已':''}}选择</Button>
</template>
</Table>
<div class="flex">
<Page size="small" :total="goodsTotal" @on-change="changePageNumber" class="pageration" @on-page-size-change="changePageSize" :page-size="params.pageSize" show-total show-elevator
show-sizer>
</Page>
</div>
</div>
</Card>
<sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
<div class="submit">
<Button type="primary" @click="saveLiveGoods">保存商品</Button>
<div v-if="params.auditStatus == 99" class="submit">
<Button type="primary" :loading="saveGoodsLoading" @click="saveLiveGoods">保存商品</Button>
</div>
</div>
</template>
<script>
import skuSelect from "@/views/lili-dialog"; //选择商品组件
import { addLiveGoods } from "@/api/promotion.js";
import { addLiveStoreGoods, getLiveGoods } from "@/api/promotion.js";
export default {
components: {
skuSelect,
},
data() {
return {
goodsTotal: "", //商品总数
saveGoodsLoading: false, //保存商品加载
tableLoading: false, //表格是否加载
params: {
pageNumber: 1,
pageSize: 10,
auditStatus: 0,
auditStatus: 2, //商品状态
},
// 商品审核状态
liveTabWay: [
@@ -74,14 +104,16 @@ export default {
label: "待提审",
type: 0,
},
{
label: "审核中",
type: 1,
},
{
label: "已审核",
type: 2,
},
{
label: "审核中",
type: 1,
},
{
label: "审核未通过",
type: 3,
@@ -112,33 +144,161 @@ export default {
],
// 表格商品详情
liveGoodsData: [],
selectedGoods: [],
};
},
props: {
// 是否是已审核，此处为组件模式时使用。去除添加等功能 只保留查询以及新增选择回调数据
reviewed: {
type: Boolean,
default: false,
},
// 初始化信息，此处为组件模式时使用。父级将数据传输到此方法上
init: {
type: null,
default: "",
},
},
watch: {
//此处为组件模式时使用 监听此处为开启则需要删除tab上面的数据只显示已审核
reviewed: {
handler(val) {
if (val) {
this.liveTabWay = this.liveTabWay.filter((item) => {
return item.label == "已审核";
});
}
},
immediate: true,
},
//此处为组件模式时使用 监听父级给传值
init: {
handler(val) {
if (val) {
this.$nextTick(() => {
// 将当前父级返回的数据和当前数据进行匹配
this.selectedGoods = val;
this.liveGoodsData.forEach((item, index) => {
val.forEach((callback) => {
if (item.id == callback.id) {
this.$set(this.liveGoodsData[index], "__selected", true);
// this.selectedGoods.push(item);
}
});
});
});
}
},
immediate: true,
},
// 监听如果次数变化说明用户再点击tab
"params.auditStatus": {
handler(val) {
this.liveGoodsData = [];
if (val != 99) {
this.params.pageNumber = 1;
this.getLiveGoodsMethods();
}
},
immediate: true,
},
},
methods: {
/**
* 回调参数补充
*/
selectedLiveGoods(val, index) {
if (!val.__selected) {
val.__selected = true;
this.$set(this.liveGoodsData[index], "__selected", true);
this.selectedGoods.push(this.liveGoodsData[index]);
} else {
this.$nextTick(() => {
val.__selected = false;
this.$set(this.liveGoodsData[index], "__selected", true);
this.selectedGoods.splice(index, 1);
});
}
this.$emit("selectedGoods", this.selectedGoods);
},
/**
* 解决radio数据不回显问题
*/
changeRadio(val) {
this.$set(this.liveGoodsData[val._index], "priceType", val.priceType);
},
/**
* 页面数据大小分页回调
*/
changePageSize(val) {
this.params.pageSize = val;
this.getLiveGoodsMethods("clear");
},
/**
* 分页回调
*/
changePageNumber(val) {
this.params.pageNumber = val;
this.getLiveGoodsMethods("clear");
},
/**
* 清除新增的tab
*/
clearNewLiveTab() {
this.liveTabWay.map((item, index) => {
return item.type == 99 && this.liveTabWay.splice(index, 1);
});
},
/**
* 查询商品
*/
async getLiveGoodsMethods(type) {
this.tableLoading = true;
let result = await getLiveGoods(this.params);
if (result.success) {
// 将表格数据清除
if (type == "clear") {
this.liveGoodsData = [];
}
this.liveGoodsData.push(...result.result.records);
this.goodsTotal = result.result.total;
}
this.tableLoading = false;
},
/**
* 保存直播商品
*/
async saveLiveGoods() {
// this.$Spin.show();
this.saveGoodsLoading = true;
let submit = this.liveGoodsData.map((element) => {
console.log(element.priceType);
return {
goodsId: element.goodsId, //商品id
goodsImage: element.small, //商品图片
name: element.goodsName, //商品昵称
price: parseInt(element.price), //商品价格
quantity: element.quantity, //库存
price2: element.price2 ? parseInt(element.price2) : "", //商品价格
priceType: element.priceType, // priceType Number 是 价格类型，1：一口价（只需要传入price，price2不传） 2：价格区间（price字段为左边界，price2字段为右边界，price和price2必传） 3：显示折扣价（price字段为原价，price2字段为现价， price和price2必传）
skuId: element.id,
url: `/pages/product/goods?id=${element.id}&goodsId=${element.goodsId}`, //小程序地址
url: `pages/product/goods?id=${element.id}&goodsId=${element.goodsId}`, //小程序地址
};
});
let result = await addLiveGoods(submit);
let result = await addLiveStoreGoods(submit);
if (result.success) {
this.$Message.success({
content: `添加成功！`,
});
this.params.auditStatus = 0;
}
this.saveGoodsLoading = false;
},
/**
@@ -146,11 +306,8 @@ export default {
*/
selectedGoodsData(goods) {
goods.map((item) => {
return (item.priceType = "1");
return (item.priceType = 1);
});
this.liveTabWay.map((item,index)=>{
return item.type == 99 && this.liveTabWay.splice(index,1)
})
this.liveGoodsData.push(...goods);
},
@@ -159,18 +316,32 @@ export default {
* 新增商品
*/
addNewLiveGoods() {
this.clearNewLiveTab();
this.liveTabWay.push({
type:99,
label:"新增商品"
})
this.params.auditStatus = 99
type: 99,
label: "新增商品",
});
this.$set(this, "liveGoodsData", []);
this.params.auditStatus = 99;
this.$refs.skuSelect.open("goods");
this.$refs.skuSelect.goodsData = JSON.parse(
JSON.stringify(this.liveGoodsData)
);
},
},
};
</script>
<style lang="scss" scoped>
@import "@/styles/table-common.scss";
.search-form {
margin-bottom: 10px;
}
.flex {
display: flex;
justify-content: flex-end;
margin: 20px 0;
}
.wrapper {
position: relative;
}
@@ -206,4 +377,20 @@ export default {
justify-content: center;
align-items: center;
}
.original-price {
margin-left: 10px;
color: #999;
text-decoration: line-through;
}
h4 {
margin-bottom: 10px;
padding: 0 10px;
border: 1px solid #ddd;
background-color: #f8f8f8;
color: #333;
font-size: 12px;
line-height: 40px;
text-align: left;
}
</style>