Merge branch 'dev-ryan' into ma
mabo
commit
c9c6b1d690
|
|
@ -2,7 +2,7 @@ export default {
|
|||
/**
|
||||
* @description 配置显示在浏览器标签的title
|
||||
*/
|
||||
title: 'Lili电商',
|
||||
title: "Lili电商",
|
||||
/**
|
||||
* @description token在Cookie中存储的天数，默认1天
|
||||
*/
|
||||
|
|
@ -17,29 +17,28 @@ export default {
|
|||
* @description api请求基础路径
|
||||
*/
|
||||
api_dev: {
|
||||
common: 'https://common-api.pickmall.cn',
|
||||
buyer: 'https://buyer-api.pickmall.cn',
|
||||
seller: 'https://store-api.pickmall.cn',
|
||||
manager: 'https://admin-api.pickmall.cn'
|
||||
common: "http://192.168.0.103:8890",
|
||||
buyer: "http://192.168.0.103:8888",
|
||||
seller: "http://192.168.0.103:8889",
|
||||
manager: "http://192.168.0.103:8887"
|
||||
},
|
||||
api_prod: {
|
||||
common: 'https://common-api.pickmall.cn',
|
||||
buyer: 'https://buyer-api.pickmall.cn',
|
||||
seller: 'https://store-api.pickmall.cn',
|
||||
manager: 'https://admin-api.pickmall.cn'
|
||||
common: "https://common-api.pickmall.cn",
|
||||
buyer: "https://buyer-api.pickmall.cn",
|
||||
seller: "https://store-api.pickmall.cn",
|
||||
manager: "https://admin-api.pickmall.cn"
|
||||
},
|
||||
/**
|
||||
* @description api请求基础路径前缀
|
||||
*/
|
||||
baseUrlPrefix: '/manager',
|
||||
baseUrlPrefix: "/manager",
|
||||
/**
|
||||
* @description 需要加载的插件
|
||||
*/
|
||||
plugin: {
|
||||
'error-store': {
|
||||
"error-store": {
|
||||
showInHeader: true, // 设为false后不会在顶部显示错误日志徽标
|
||||
developmentOff: true // 设为true后在开发环境不会收集错误信息，方便开发中排查错误
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,23 @@
|
|||
// 统一请求路径前缀在libs/axios.js中修改
|
||||
import { getRequest, postRequest, putRequest, deleteRequest, importRequest, uploadFileRequest } from '@/libs/axios';
|
||||
import { getRequest, postRequest, postRequestWithNoForm, putRequest, deleteRequest, importRequest, uploadFileRequest } from '@/libs/axios';
|
||||
|
||||
|
||||
// 获取店铺直播间列表
|
||||
export const getLivesList = (params) => {
|
||||
return getRequest('/broadcast/studio', params)
|
||||
}
|
||||
|
||||
// 获取店铺直播商品
|
||||
export const getLiveGoods = (params) => {
|
||||
return getRequest('/broadcast/commodity', params)
|
||||
}
|
||||
|
||||
// 添加店铺直播商品
|
||||
export const addLiveGoods = (params) => {
|
||||
return postRequestWithNoForm('/broadcast/commodity', params)
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取拼团列表
|
||||
export const getPintuanList = (params) => {
|
||||
|
|
@ -128,4 +146,4 @@ export const getFullDiscountById = (id) => {
|
|||
// 删除满减活动
|
||||
export const delFullDiscount = (id) => {
|
||||
return deleteRequest(`/promotion/fullDiscount/${id}`)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,14 +18,14 @@ export default {
|
|||
* @description api请求基础路径
|
||||
*/
|
||||
api_dev: {
|
||||
common: 'https://common-api.pickmall.cn',
|
||||
buyer: 'https://buyer-api.pickmall.cn',
|
||||
seller: 'https://store-api.pickmall.cn',
|
||||
manager: 'https://admin-api.pickmall.cn'
|
||||
// common: 'http://192.168.0.103:8890',
|
||||
// buyer: 'http://192.168.0.103:8888',
|
||||
// seller: 'http://192.168.0.103:8889',
|
||||
// manager: 'http://192.168.0.103:8887'
|
||||
// common: 'https://common-api.pickmall.cn',
|
||||
// buyer: 'https://buyer-api.pickmall.cn',
|
||||
// seller: 'https://store-api.pickmall.cn',
|
||||
// manager: 'https://admin-api.pickmall.cn'
|
||||
common: 'http://192.168.0.103:8890',
|
||||
buyer: 'http://192.168.0.103:8888',
|
||||
seller: 'http://192.168.0.103:8889',
|
||||
manager: 'http://192.168.0.103:8887'
|
||||
},
|
||||
api_prod: {
|
||||
common: 'https://common-api.pickmall.cn',
|
||||
|
|
|
|||
|
|
@ -216,19 +216,20 @@ export const postRequestWithNoForm = (url, params) => {
|
|||
});
|
||||
};
|
||||
|
||||
// export const postRequestWithHeaders = (url, params) => {
|
||||
// let accessToken = getStore("accessToken");
|
||||
// return axios({
|
||||
// method: "post",
|
||||
// url: `${url}`,
|
||||
// data: params,
|
||||
export const postRequestWithHeaders = (url, params) => {
|
||||
let accessToken = getStore("accessToken");
|
||||
return axios({
|
||||
method: "post",
|
||||
url: `${url}`,
|
||||
data: params,
|
||||
|
||||
headers: {
|
||||
accessToken: accessToken,
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// headers: {
|
||||
// accessToken: accessToken,
|
||||
// "Content-Type": "application/x-www-form-urlencoded"
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
|
||||
export const putRequest = (url, params,headers) => {
|
||||
let accessToken = getStore("accessToken");
|
||||
|
|
|
|||
|
|
@ -425,6 +425,34 @@ export const result = [
|
|||
url: "",
|
||||
permTypes: [],
|
||||
children: null
|
||||
},
|
||||
{
|
||||
name: "live",
|
||||
showAlways: true,
|
||||
level: 2,
|
||||
type: 0,
|
||||
title: "小程序直播",
|
||||
path: "live",
|
||||
component: "promotion/live/live",
|
||||
icon: "md-person",
|
||||
isMenu: true,
|
||||
url: "",
|
||||
permTypes: [],
|
||||
children: null
|
||||
},
|
||||
{
|
||||
name: "liveGoods",
|
||||
showAlways: true,
|
||||
level: 2,
|
||||
type: 0,
|
||||
title: "直播商品",
|
||||
path: "liveGoods",
|
||||
component: "promotion/live/liveGoods",
|
||||
icon: "md-person",
|
||||
isMenu: true,
|
||||
url: "",
|
||||
permTypes: [],
|
||||
children: null
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -71,6 +71,12 @@ export const otherRouter = {
|
|||
name: "add-coupon",
|
||||
component: () => import("@/views/promotion/coupon/couponPublish.vue")
|
||||
},
|
||||
{
|
||||
path: "add-live",
|
||||
title: "创建直播",
|
||||
name: "add-live",
|
||||
component: () => import("@/views/promotion/live/addLive.vue")
|
||||
},
|
||||
{
|
||||
path: "bill-detail",
|
||||
title: "结算单详情",
|
||||
|
|
|
|||
|
|
@ -430,7 +430,7 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/table-common.scss";
|
||||
.search-form {
|
||||
width: 100% !important;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,297 @@
|
|||
<template>
|
||||
<div>
|
||||
<Card>
|
||||
<Alert type="warning">
|
||||
创建直播
|
||||
<template slot="desc">
|
||||
为了方便在创建直播间时从选择商品，请尽量提前提审直播商品
|
||||
</template>
|
||||
</Alert>
|
||||
|
||||
<Form :model="liveForm" ref="liveForm" :rules="liveRulesForm" :label-width="120">
|
||||
<FormItem label="直播标题" prop="name">
|
||||
<Input v-model="liveForm.name" style="width:460px"></Input>
|
||||
<div class="tips">直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符</div>
|
||||
</FormItem>
|
||||
<FormItem label="主播昵称" prop="anchorName">
|
||||
<Input v-model="liveForm.anchorName" style="width:360px"></Input>
|
||||
<div class="tips">主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符</div>
|
||||
</FormItem>
|
||||
<FormItem label="直播时间" prop="startTime">
|
||||
|
||||
<DatePicker format="yyyy-MM-dd HH:mm" type="datetimerange" @on-change="handleChangeTime" :options="optionsTime" placeholder="直播计划开始时间-直播计划结束时间" style="width: 300px"></DatePicker>
|
||||
<div class="tips">直播开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后</div>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="主播微信号" prop="anchorWechat">
|
||||
<Input v-model="liveForm.anchorWechat" style="width:360px" placeholder="主播微信号"></Input>
|
||||
<div class="tips">主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行<a target="_black" href="https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh">实名验证</a></div>
|
||||
</FormItem>
|
||||
|
||||
<!-- 分享卡片 -->
|
||||
<FormItem label="分享卡片封面" prop="feedsImg">
|
||||
<div class="upload-list" v-if="liveForm.feedsImg">
|
||||
<template>
|
||||
<img :src="liveForm.feedsImg">
|
||||
<div class="upload-list-cover">
|
||||
<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
|
||||
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<Upload v-if="liveForm.feedsImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleFeedsImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
|
||||
:on-format-error="handleFormatError" :max-size="1024" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" multiple type="drag" :action="action" :headers="accessToken"
|
||||
style="display: inline-block;width:58px;">
|
||||
<div style="width: 58px;height:58px;line-height: 58px;">
|
||||
<Icon type="ios-camera" size="20"></Icon>
|
||||
</div>
|
||||
</Upload>
|
||||
<div class="tips">
|
||||
直播间分享图，图片规则：建议像素800*640，大小不超过1M；
|
||||
</div>
|
||||
</FormItem>
|
||||
|
||||
<!-- 直播间背景墙 -->
|
||||
<FormItem label="直播间背景墙" prop="coverImg">
|
||||
|
||||
<div class="upload-list" v-if="liveForm.coverImg">
|
||||
<template>
|
||||
<img :src="liveForm.coverImg">
|
||||
<div class="upload-list-cover">
|
||||
<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
|
||||
<Icon type="ios-trash-outline" @click.native="handleRemove(item,'coverImg')"></Icon>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<Upload v-if="liveForm.coverImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleCoverImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
|
||||
:on-format-error="handleFormatError" :max-size="2048" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" multiple type="drag" :action="action" :headers="accessToken"
|
||||
style="display: inline-block;width:58px;">
|
||||
<div style="width: 58px;height:58px;line-height: 58px;">
|
||||
<Icon type="ios-camera" size="20"></Icon>
|
||||
</div>
|
||||
</Upload>
|
||||
<div class="tips"> 直播间背景图，图片规则：建议像素1080*1920，大小不超过2M</div>
|
||||
</FormItem>
|
||||
<FormItem label="商品" >
|
||||
<Button type="primary" ghost icon="md-add">添加商品</Button>
|
||||
<Table class="goods-table" :columns="liveColumns" :data="liveData"></Table>
|
||||
</FormItem>
|
||||
|
||||
<FormItem>
|
||||
<Button type="primary" @click="createLives()">保存</Button>
|
||||
<Button style="margin-left: 8px">取消</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
<!-- 浏览图片 -->
|
||||
<Modal title="查看图片" v-model="imageVisible">
|
||||
<img :src="imageSrc" v-if="imageVisible" style="width: 100%">
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uploadFile } from "@/api/index";
|
||||
import { getLiveGoods } from "@/api/promotion";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageVisible: false, //查看图片的dailog
|
||||
imageSrc: "", //查看图片的路径
|
||||
action: uploadFile, // 上传地址
|
||||
accessToken: {}, // 验证token
|
||||
// 不能选择今天以前的时间
|
||||
optionsTime: {
|
||||
disabledDate(date) {
|
||||
return date && date.valueOf() < Date.now() - 86400000;
|
||||
},
|
||||
},
|
||||
// 直播间数据上传规则
|
||||
liveRulesForm: {
|
||||
name: [
|
||||
{ required: true, message: "请输入直播标题", trigger: "blur" },
|
||||
{ max: 17, min: 3, message: "直播间名字最短3个汉字，最长17个汉字" },
|
||||
],
|
||||
anchorName: [
|
||||
{ required: true, message: "请输入主播昵称", trigger: "blur" },
|
||||
{ max: 15, min: 2, message: "主播昵称最短2个汉字，最长15个汉字" },
|
||||
],
|
||||
anchorWechat: [
|
||||
{ required: true, message: "请输入主播微信号", trigger: "blur" },
|
||||
],
|
||||
startTime: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入开始时间以及结束时间",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
feedsImg: [
|
||||
{ required: true, message: "分享卡片封面不能为空", trigger: "blur" },
|
||||
],
|
||||
coverImg: [
|
||||
{ required: true, message: "直播间背景墙不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
liveForm: {
|
||||
feedsImg: "", //分享卡片封面
|
||||
coverImg: "", //直播间背景墙
|
||||
},
|
||||
// 直播商品表格表头
|
||||
liveColumns: [
|
||||
{
|
||||
title: "商品",
|
||||
},
|
||||
{
|
||||
title: "价格",
|
||||
},
|
||||
{
|
||||
title: "库存",
|
||||
},
|
||||
{
|
||||
title: "链接",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
},
|
||||
],
|
||||
liveData: [], //直播商品集合
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.accessToken = {
|
||||
accessToken: this.getStore("accessToken"),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 上传图片查看图片
|
||||
*/
|
||||
handleView(src) {
|
||||
this.imageVisible = true;
|
||||
this.imageSrc = src;
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除上传的图片
|
||||
*/
|
||||
handleRemove(val, type) {
|
||||
if (type == "coverImg") {
|
||||
this.liveForm.coverImg = "";
|
||||
} else {
|
||||
this.liveForm.feedsImg = "";
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 直播间背景图上传成功回调
|
||||
*/
|
||||
handleCoverImgSuccess(res) {
|
||||
this.liveForm.coverImg = res.result;
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享卡片封面上传成功回调
|
||||
*/
|
||||
handleFeedsImgSuccess(res) {
|
||||
this.liveForm.feedsImg = res.result;
|
||||
},
|
||||
|
||||
/**
|
||||
* 直播间背景图
|
||||
*/
|
||||
handleCoverImgSuccess(res) {
|
||||
this.liveForm.coverImg.push(res.result);
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择时间后的回调
|
||||
*/
|
||||
handleChangeTime(daterange) {
|
||||
this.liveForm.startTime = new Date(daterange[0]).getTime() / 1000;
|
||||
this.liveForm.endTime = new Date(daterange[1]).getTime() / 1000;
|
||||
},
|
||||
|
||||
/**
|
||||
* 对图片错误进行回调
|
||||
*/
|
||||
handleFormatError(file) {
|
||||
this.$Notice.warning({
|
||||
title: "请上传正确的图片格式！",
|
||||
desc: file.name + " 格式不为 jpg or png.",
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 对图片的大小进行处理回调
|
||||
*/
|
||||
handleMaxSize(file) {
|
||||
this.$Notice.warning({
|
||||
title: "图片超过限制大小！",
|
||||
desc: file.name + "图片超过规定限制大小，请重新上传",
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 限制只能上传一张图片
|
||||
*/
|
||||
handleBeforeUpload() {
|
||||
const check = this.liveForm.feedsImg.length < 1;
|
||||
if (!check) {
|
||||
this.$Notice.warning({
|
||||
title: "最多上传一张图片",
|
||||
});
|
||||
}
|
||||
return check;
|
||||
},
|
||||
createLives() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tips {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.goods-table {
|
||||
width: 800px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.upload-list {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
margin-right: 4px;
|
||||
}
|
||||
.upload-list img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.upload-list-cover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.upload-list:hover .upload-list-cover {
|
||||
display: block;
|
||||
}
|
||||
.upload-list-cover i {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
margin: 0 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<div>
|
||||
<Card>
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
|
||||
<Form-item label="优惠券名称">
|
||||
<Input type="text" v-model="searchForm.couponName" placeholder="请输入优惠券名称" clearable style="width: 200px" />
|
||||
</Form-item>
|
||||
<Form-item label="活动状态" prop="promotionStatus">
|
||||
<Select v-model="searchForm.promotionStatus" placeholder="请选择" clearable style="width: 200px">
|
||||
<Option value="NEW">未开始</Option>
|
||||
<Option value="START">已开始/上架</Option>
|
||||
<Option value="END">已结束/下架</Option>
|
||||
<Option value="CLOSE">紧急关闭/作废</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="活动时间">
|
||||
<DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px"></DatePicker>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" class="search-btn" icon="ios-search">搜索</Button>
|
||||
</Form>
|
||||
<div class="btns">
|
||||
<Button @click="createLive()" type="primary">创建直播</Button>
|
||||
</div>
|
||||
<Tabs>
|
||||
<!-- 标签栏 -->
|
||||
<TabPane v-for="(item,index) in tabs" :key="index" :label="item.title">
|
||||
<Table :columns="liveColumns" :data="liveData"></Table>
|
||||
<Row type="flex" justify="end" class="page">
|
||||
<Page :current="searchForm.pageNumber + 1" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
|
||||
size="small" show-total show-elevator show-sizer></Page>
|
||||
</Row>
|
||||
</TabPane>
|
||||
|
||||
</Tabs>
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLivesList } from "@/api/promotion.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 查询数据的总数
|
||||
total: "",
|
||||
// 查询的form
|
||||
searchForm: {
|
||||
pageSize: 10,
|
||||
pageNumber: 1,
|
||||
},
|
||||
// 直播tab选项栏
|
||||
tabs: [
|
||||
{
|
||||
title: "全部",
|
||||
},
|
||||
{
|
||||
title: "直播中",
|
||||
},
|
||||
{
|
||||
title: "未开始",
|
||||
},
|
||||
{
|
||||
title: "已结束",
|
||||
},
|
||||
],
|
||||
liveColumns: [
|
||||
{
|
||||
title: "直播标题",
|
||||
key: "a",
|
||||
},
|
||||
{
|
||||
title: "直播时间",
|
||||
key: "a",
|
||||
},
|
||||
{
|
||||
title: "主播昵称",
|
||||
key: "a",
|
||||
},
|
||||
{
|
||||
title: "直播状态",
|
||||
key: "a",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "a",
|
||||
},
|
||||
], //table中显示的title
|
||||
liveData: [], //table中显示的直播数据
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getStoreLives();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取店铺直播间列表
|
||||
*/
|
||||
async getStoreLives() {
|
||||
let result = await getLivesList();
|
||||
if (result.success) {
|
||||
this.liveData = result.records;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取
|
||||
*/
|
||||
|
||||
/**
|
||||
* 创建直播
|
||||
*/
|
||||
createLive(){
|
||||
this.$router.push({path:'/add-live'})
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击分页数据回调
|
||||
*/
|
||||
changePageSize() {},
|
||||
/**
|
||||
* 点击分页回调
|
||||
*/
|
||||
changePage() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/table-common.scss";
|
||||
.btns{
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<Card>
|
||||
<Alert banner type="warning">
|
||||
|
||||
<template slot="desc">
|
||||
由于直播商品需经过小程序直播平台的审核，你需要在此先提审商品，为了不影响直播间选取商品，请提前1天提审商品；
|
||||
每次最多可提审20款商品，每个店铺最多可维护200款商品，每款SPU只需选择其中一款SKU即可；
|
||||
</template>
|
||||
|
||||
</Alert>
|
||||
|
||||
<div>
|
||||
<Tabs :value="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>
|
||||
|
||||
<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>
|
||||
</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 slot-scope="{ row,index }" slot="action">
|
||||
<Button type="primary" @click="()=>{liveGoodsData.splice(index,1)}">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
</Card>
|
||||
<sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
|
||||
<div class="submit">
|
||||
<Button type="primary" @click="saveLiveGoods">保存商品</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import skuSelect from "@/views/lili-dialog"; //选择商品组件
|
||||
import { addLiveGoods } from "@/api/promotion.js";
|
||||
export default {
|
||||
components: {
|
||||
skuSelect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
auditStatus: 0,
|
||||
},
|
||||
// 商品审核状态
|
||||
liveTabWay: [
|
||||
{
|
||||
label: "待提审",
|
||||
type: 0,
|
||||
},
|
||||
{
|
||||
label: "审核中",
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
label: "已审核",
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
label: "审核未通过",
|
||||
type: 3,
|
||||
},
|
||||
],
|
||||
|
||||
// 商品表格columns
|
||||
liveGoodsColumns: [
|
||||
{
|
||||
title: "商品",
|
||||
slot: "goodsName",
|
||||
},
|
||||
{
|
||||
title: "价格",
|
||||
slot: "price",
|
||||
},
|
||||
{
|
||||
title: "库存",
|
||||
key: "quantity",
|
||||
width: 100,
|
||||
},
|
||||
|
||||
{
|
||||
title: "操作",
|
||||
slot: "action",
|
||||
width: 100,
|
||||
},
|
||||
],
|
||||
// 表格商品详情
|
||||
liveGoodsData: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 保存直播商品
|
||||
*/
|
||||
async saveLiveGoods() {
|
||||
// this.$Spin.show();
|
||||
let submit = this.liveGoodsData.map((element) => {
|
||||
return {
|
||||
goodsId: element.goodsId, //商品id
|
||||
goodsImage: element.small, //商品图片
|
||||
name: element.goodsName, //商品昵称
|
||||
price: parseInt(element.price), //商品价格
|
||||
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}`, //小程序地址
|
||||
};
|
||||
});
|
||||
|
||||
let result = await addLiveGoods(submit);
|
||||
if (result.success) {
|
||||
this.$Message.success({
|
||||
content: `添加成功！`,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 商品选择器回调的商品信息
|
||||
*/
|
||||
selectedGoodsData(goods) {
|
||||
goods.map((item) => {
|
||||
return (item.priceType = "1");
|
||||
});
|
||||
this.liveTabWay.map((item,index)=>{
|
||||
return item.type == 99 && this.liveTabWay.splice(index,1)
|
||||
})
|
||||
|
||||
this.liveGoodsData.push(...goods);
|
||||
},
|
||||
|
||||
/**
|
||||
* 新增商品
|
||||
*/
|
||||
addNewLiveGoods() {
|
||||
this.liveTabWay.push({
|
||||
type:99,
|
||||
label:"新增商品"
|
||||
})
|
||||
this.params.auditStatus = 99
|
||||
this.$refs.skuSelect.open("goods");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.thumbnail {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
.flex-goods {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
> img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.price-item {
|
||||
margin: 15px 5px;
|
||||
> * {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.1);
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue