Merge branch 'dev-ryan' into ma
mabo
commit
c9c6b1d690
|
|
@ -2,7 +2,7 @@ export default {
|
||||||
/**
|
/**
|
||||||
* @description 配置显示在浏览器标签的title
|
* @description 配置显示在浏览器标签的title
|
||||||
*/
|
*/
|
||||||
title: 'Lili电商',
|
title: "Lili电商",
|
||||||
/**
|
/**
|
||||||
* @description token在Cookie中存储的天数，默认1天
|
* @description token在Cookie中存储的天数，默认1天
|
||||||
*/
|
*/
|
||||||
|
|
@ -17,29 +17,28 @@ export default {
|
||||||
* @description api请求基础路径
|
* @description api请求基础路径
|
||||||
*/
|
*/
|
||||||
api_dev: {
|
api_dev: {
|
||||||
common: 'https://common-api.pickmall.cn',
|
common: "http://192.168.0.103:8890",
|
||||||
buyer: 'https://buyer-api.pickmall.cn',
|
buyer: "http://192.168.0.103:8888",
|
||||||
seller: 'https://store-api.pickmall.cn',
|
seller: "http://192.168.0.103:8889",
|
||||||
manager: 'https://admin-api.pickmall.cn'
|
manager: "http://192.168.0.103:8887"
|
||||||
},
|
},
|
||||||
api_prod: {
|
api_prod: {
|
||||||
common: 'https://common-api.pickmall.cn',
|
common: "https://common-api.pickmall.cn",
|
||||||
buyer: 'https://buyer-api.pickmall.cn',
|
buyer: "https://buyer-api.pickmall.cn",
|
||||||
seller: 'https://store-api.pickmall.cn',
|
seller: "https://store-api.pickmall.cn",
|
||||||
manager: 'https://admin-api.pickmall.cn'
|
manager: "https://admin-api.pickmall.cn"
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description api请求基础路径前缀
|
* @description api请求基础路径前缀
|
||||||
*/
|
*/
|
||||||
baseUrlPrefix: '/manager',
|
baseUrlPrefix: "/manager",
|
||||||
/**
|
/**
|
||||||
* @description 需要加载的插件
|
* @description 需要加载的插件
|
||||||
*/
|
*/
|
||||||
plugin: {
|
plugin: {
|
||||||
'error-store': {
|
"error-store": {
|
||||||
showInHeader: true, // 设为false后不会在顶部显示错误日志徽标
|
showInHeader: true, // 设为false后不会在顶部显示错误日志徽标
|
||||||
developmentOff: true // 设为true后在开发环境不会收集错误信息，方便开发中排查错误
|
developmentOff: true // 设为true后在开发环境不会收集错误信息，方便开发中排查错误
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,23 @@
|
||||||
// 统一请求路径前缀在libs/axios.js中修改
|
// 统一请求路径前缀在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) => {
|
export const getPintuanList = (params) => {
|
||||||
|
|
|
||||||
|
|
@ -18,14 +18,14 @@ export default {
|
||||||
* @description api请求基础路径
|
* @description api请求基础路径
|
||||||
*/
|
*/
|
||||||
api_dev: {
|
api_dev: {
|
||||||
common: 'https://common-api.pickmall.cn',
|
// common: 'https://common-api.pickmall.cn',
|
||||||
buyer: 'https://buyer-api.pickmall.cn',
|
// buyer: 'https://buyer-api.pickmall.cn',
|
||||||
seller: 'https://store-api.pickmall.cn',
|
// seller: 'https://store-api.pickmall.cn',
|
||||||
manager: 'https://admin-api.pickmall.cn'
|
// manager: 'https://admin-api.pickmall.cn'
|
||||||
// common: 'http://192.168.0.103:8890',
|
common: 'http://192.168.0.103:8890',
|
||||||
// buyer: 'http://192.168.0.103:8888',
|
buyer: 'http://192.168.0.103:8888',
|
||||||
// seller: 'http://192.168.0.103:8889',
|
seller: 'http://192.168.0.103:8889',
|
||||||
// manager: 'http://192.168.0.103:8887'
|
manager: 'http://192.168.0.103:8887'
|
||||||
},
|
},
|
||||||
api_prod: {
|
api_prod: {
|
||||||
common: 'https://common-api.pickmall.cn',
|
common: 'https://common-api.pickmall.cn',
|
||||||
|
|
|
||||||
|
|
@ -216,19 +216,20 @@ export const postRequestWithNoForm = (url, params) => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// export const postRequestWithHeaders = (url, params) => {
|
export const postRequestWithHeaders = (url, params) => {
|
||||||
// let accessToken = getStore("accessToken");
|
let accessToken = getStore("accessToken");
|
||||||
// return axios({
|
return axios({
|
||||||
// method: "post",
|
method: "post",
|
||||||
// url: `${url}`,
|
url: `${url}`,
|
||||||
// data: params,
|
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) => {
|
export const putRequest = (url, params,headers) => {
|
||||||
let accessToken = getStore("accessToken");
|
let accessToken = getStore("accessToken");
|
||||||
|
|
|
||||||
|
|
@ -425,6 +425,34 @@ export const result = [
|
||||||
url: "",
|
url: "",
|
||||||
permTypes: [],
|
permTypes: [],
|
||||||
children: null
|
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",
|
name: "add-coupon",
|
||||||
component: () => import("@/views/promotion/coupon/couponPublish.vue")
|
component: () => import("@/views/promotion/coupon/couponPublish.vue")
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "add-live",
|
||||||
|
title: "创建直播",
|
||||||
|
name: "add-live",
|
||||||
|
component: () => import("@/views/promotion/live/addLive.vue")
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "bill-detail",
|
path: "bill-detail",
|
||||||
title: "结算单详情",
|
title: "结算单详情",
|
||||||
|
|
|
||||||
|
|
@ -430,7 +430,7 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
@import "@/styles/table-common.scss";
|
@import "@/styles/table-common.scss";
|
||||||
.search-form {
|
.search-form {
|
||||||
width: 100% !important;
|
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