code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-18 08:55:52 +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

32
seller/src/api/promotion.js
View File

@@ -3,21 +3,49 @@ import { getRequest, postRequest, postRequestWithNoForm, putRequest, deleteReque
// 获取店铺直播间列表
export const getLivesList = (params) => {
export const getLiveList = (params) => {
return getRequest('/broadcast/studio', params)
}
// 添加直播间
export const addLive = (params) => {
return postRequest('/broadcast/studio', params)
}
// 获取直播间详情
export const getLiveInfo = (studioId) => {
return getRequest(`/broadcast/studio/studioInfo/${studioId}`)
}
// 修改直播间
export const editLive = (params) => {
return putRequest('/broadcast/studio/edit', params)
}
// 获取店铺直播商品
export const getLiveGoods = (params) => {
return getRequest('/broadcast/commodity', params)
}
// 店铺直播间删除商品
export const delLiveGoods = (goodsId) => {
return deleteRequest(`/broadcast/commodity/${goodsId}`)
}
// 直播间删除商品
export const delRoomLiveGoods = (roomId,liveGoodsId) => {
return deleteRequest(`/broadcast/studio/deleteInRoom/${roomId}/${liveGoodsId}`)
}
// 添加店铺直播商品
export const addLiveGoods = (params) => {
export const addLiveStoreGoods = (params) => {
return postRequestWithNoForm('/broadcast/commodity', params)
}
// 店铺直播间添加
export const addLiveGoods = (params) => {
return putRequest(`/broadcast/studio/push/${params.roomId}/${params.liveGoodsId}`)
}
// 获取拼团列表
export const getPintuanList = (params) => {

8
seller/src/config/index.js
View File

@@ -22,10 +22,10 @@ export default {
// 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: 'http://192.168.0.109:8890',
buyer: 'http://192.168.0.109:8888',
seller: 'http://192.168.0.109:8889',
manager: 'http://192.168.0.109:8887'
},
api_prod: {
common: 'https://common-api.pickmall.cn',

3
seller/src/views/goods/goods-seller/goods.vue
View File

@@ -718,6 +718,9 @@ export default {
});
},
},
mounted () {
this.init();
},
activated () {
this.init();
},

324
seller/src/views/promotion/live/addLive.vue
View File

@@ -1,8 +1,9 @@
<template>
<div>
<Card>
<Card style="position:relative;">
<Spin size="large" fix v-if="spinShow"></Spin>
<Alert type="warning">
创建直播
<template slot="desc">
为了方便在创建直播间时从选择商品，请尽量提前提审直播商品
</template>
@@ -10,21 +11,23 @@
<Form :model="liveForm" ref="liveForm" :rules="liveRulesForm" :label-width="120">
<FormItem label="直播标题" prop="name">
<Input v-model="liveForm.name" style="width:460px"></Input>
<Input :disabled="liveStatus!='NEW'" 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>
<Input :disabled="liveStatus!='NEW'" 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>
<DatePicker :disabled="liveStatus!='NEW'" format="yyyy-MM-dd HH:mm" type="datetimerange" v-model="times" @on-change="handleChangeTime" :options="optionsTime" placeholder="直播计划开始时间-直播计划结束时间"
style="width: 300px">
</DatePicker>
<div class="tips">直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）</div>
</FormItem>
<FormItem label="主播微信号" prop="anchorWechat">
<Input v-model="liveForm.anchorWechat" style="width:360px" placeholder="主播微信号"></Input>
<Input :disabled="liveStatus!='NEW'" 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>
@@ -34,15 +37,14 @@
<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>
<Icon type="ios-eye-outline" @click.native="handleView(liveForm.feedsImg)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove('feedsImg')"></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;">
:on-format-error="handleFormatError" :max-size="1024" :on-exceeded-size="handleMaxSize" 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>
@@ -59,28 +61,77 @@
<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>
<Icon type="ios-eye-outline" @click.native="handleView(liveForm.coverImg)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove('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;">
:on-format-error="handleFormatError" :max-size="2048" :on-exceeded-size="handleMaxSize" 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 label="直播间分享图" prop="shareImg">
<div class="upload-list" v-if="liveForm.shareImg">
<template>
<img :src="liveForm.shareImg">
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(liveForm.shareImg)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove('shareImg')"></Icon>
</div>
</template>
</div>
<Upload v-if="liveForm.shareImg.length ==0" ref="upload" :show-upload-list="false" :on-success="handleShareImgSuccess" :default-file-list="defaultImgList" :format="['jpg','jpeg','png']"
:on-format-error="handleFormatError" :max-size="2048" :on-exceeded-size="handleMaxSize" 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="商品" v-if="$route.query.id">
<Button type="primary" :disabled="liveStatus!='NEW'" ghost @click="liveGoodsVisible=true" icon="md-add">添加商品</Button>
<Table class="goods-table" :columns="liveColumns" :data="liveData">
<template slot-scope="{ row,index }" slot="goodsName">
<div class="flex-goods">
<Badge v-if="index == 0 || index ==1" color="volcano"></Badge>
<img class="thumbnail" :src="row.thumbnail || row.goodsImage">
{{ row.goodsName || row.name }}
</div>
</template>
<template slot-scope="{ row }" class="price" slot="price">
<div>
<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 }" slot="quantity">
<div>{{row.quantity}}</div>
</template>
<template slot-scope="{ row,index }" slot="action">
<div class="action">
<Button size="small" type="primary" :disabled="liveStatus!='NEW'" @click="deleteGoods(row,index)">删除</Button>
<Button size="small" ghost type="primary" :disabled="liveStatus!='NEW'" @click="onMove(row.id,1)">上移</Button>
<Button size="small" ghost type="primary" :disabled="liveStatus!='NEW'" @click="onMove(row.id,0)">下移</Button>
</div>
</template>
</Table>
<div class="tips">
直播间商品中前两个商品将自动被选为封面，伴随直播间在直播列表中显示
</div>
</FormItem>
<FormItem>
<Button type="primary" @click="createLives()">保存</Button>
<Button style="margin-left: 8px">取消</Button>
</FormItem>
</Form>
</Card>
@@ -88,19 +139,37 @@
<Modal title="查看图片" v-model="imageVisible">
<img :src="imageSrc" v-if="imageVisible" style="width: 100%">
</Modal>
<Modal width="800" v-model="liveGoodsVisible" @on-ok="addGoods">
<liveGoods :init="liveData" @selectedGoods="callBackData" reviewed />
</Modal>
</div>
</template>
<script>
import { uploadFile } from "@/api/index";
import { getLiveGoods } from "@/api/promotion";
import {
addLive,
addLiveGoods,
editLive,
getLiveInfo,
delLiveGoods,
delRoomLiveGoods,
} from "@/api/promotion";
import liveGoods from "./liveGoods";
export default {
components: {
liveGoods,
},
data() {
return {
spinShow: false,
liveGoodsVisible: false, //选择商品
imageVisible: false, //查看图片的dailog
imageSrc: "", //查看图片的路径
action: uploadFile, // 上传地址
accessToken: {}, // 验证token
liveStatus: "NEW", //当前直播状态
// 不能选择今天以前的时间
optionsTime: {
disabledDate(date) {
@@ -124,7 +193,6 @@ export default {
{
required: true,
message: "请输入开始时间以及结束时间",
trigger: "blur",
},
],
feedsImg: [
@@ -133,38 +201,149 @@ export default {
coverImg: [
{ required: true, message: "直播间背景墙不能为空", trigger: "blur" },
],
shareImg: [
{ required: true, message: "直播间分享图不能为空", trigger: "blur" },
],
},
liveForm: {
name: "", //直播标题
anchorName: "", //主播昵称
anchorWechat: "", //主播微信号
feedsImg: "", //分享卡片封面
coverImg: "", //直播间背景墙
shareImg: "", //分享图
startTime: "",
},
times: [], //接收直播时间数据
// 直播商品表格表头
liveColumns: [
{
title: "商品",
slot: "goodsName",
},
{
title: "价格",
slot: "price",
},
{
title: "库存",
},
{
title: "链接",
slot: "quantity",
width: 100,
},
{
title: "操作",
slot: "action",
width: 250,
},
],
liveData: [], //直播商品集合
commodityList: "", //商品集合
};
},
mounted() {
/**
* 如果query.id有值说明是查看详情
* liveStatus 可以判断当前直播状态 从而区分数据 是否是未开始、已开启、已关闭、
*/
if (this.$route.query.id) {
// 获取直播间详情
this.getLiveDetail();
}
this.accessToken = {
accessToken: this.getStore("accessToken"),
};
},
methods: {
/**
* 删除直播间商品
*/
async deleteGoods(val, index) {
let res = await delRoomLiveGoods(this.liveForm.roomId, val.liveGoodsId);
if (res.success) {
this.$Message.success("删除成功!");
this.liveData.splice(index, 1);
}
},
/**
* 获取直播间详情
*/
async getLiveDetail() {
let result = await getLiveInfo(this.$route.query.id);
// 将数据回调到liveform里面
if (result.success) {
let data = result.result;
for (let key in data) {
this.liveForm[key] = data[key];
}
// 将选择的商品回调给表格
this.liveData = data.commodityList;
this.commodityList = data.commodityList;
// 将时间格式化
this.$set(
this.times,
[0],
this.$options.filters.unixToDate(data.startTime, "yyyy-MM-dd hh:mm")
);
this.$set(
this.times,
[1],
this.$options.filters.unixToDate(data.endTime, "yyyy-MM-dd hh:mm")
);
this.liveStatus = data.status;
}
},
/**
* 上下移动功能
* dir 1为上 0为下
*/
onMove(code, dir) {
let moveComm = (curIndex, nextIndex) => {
let arr = this.liveData;
arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0];
return arr;
};
this.liveData.some((val, index) => {
if (val.id === code) {
if (dir === 1 && index === 0) {
this.$message.Warning("已在顶部！");
} else if (dir === 0 && index === this.liveData.length - 1) {
this.$message.Warning("已在底部！");
} else {
let nextIndex = dir === 1 ? index - 1 : index + 1;
this.liveData = moveComm(index, nextIndex);
}
return true;
}
return false;
});
},
/**
* 回调的商品选择数据
*/
callBackData(way) {
this.$set(this, "liveData", way);
},
/**
* dialog点击确定时判断
*/
addGoods() {
this.liveData.forEach((item) => {
this.commodityList.forEach((oldVal) => {
if (oldVal.liveGoodsId != item.liveGoodsId) {
addLiveGoods({
roomId: this.$route.query.roomId,
liveGoodsId: item.liveGoodsId,
});
}
});
});
},
/**
* 上传图片查看图片
*/
@@ -176,11 +355,11 @@ export default {
/**
* 删除上传的图片
*/
handleRemove(val, type) {
if (type == "coverImg") {
this.liveForm.coverImg = "";
handleRemove(type) {
if (this.liveStatus == "NEW") {
this.liveForm[type] = "";
} else {
this.liveForm.feedsImg = "";
this.$Message.error("当前状态禁止修改删除!");
}
},
/**
@@ -189,6 +368,13 @@ export default {
handleCoverImgSuccess(res) {
this.liveForm.coverImg = res.result;
},
/**
* 直播间分享图上传成功回调
*/
handleShareImgSuccess(res) {
console.log(res);
this.liveForm.shareImg = res.result;
},
/**
* 分享卡片封面上传成功回调
@@ -201,15 +387,24 @@ export default {
* 直播间背景图
*/
handleCoverImgSuccess(res) {
this.liveForm.coverImg.push(res.result);
this.liveForm.coverImg = res.result;
},
/**
* 选择时间后的回调
*/
handleChangeTime(daterange) {
this.liveForm.startTime = new Date(daterange[0]).getTime() / 1000;
this.liveForm.endTime = new Date(daterange[1]).getTime() / 1000;
this.times = daterange;
this.$set(
this.liveForm,
"startTime",
new Date(daterange[0]).getTime() / 1000
);
this.$set(
this.liveForm,
"endTime",
new Date(daterange[1]).getTime() / 1000
);
},
/**
@@ -235,8 +430,8 @@ export default {
/**
* 限制只能上传一张图片
*/
handleBeforeUpload() {
const check = this.liveForm.feedsImg.length < 1;
handleBeforeUpload(type) {
const check = this.liveForm[type].length < 1;
if (!check) {
this.$Notice.warning({
title: "最多上传一张图片",
@@ -244,18 +439,77 @@ export default {
}
return check;
},
createLives() {},
/**
* 添加直播间 /broadcast/studio/edit
*/
createLives() {
this.$refs["liveForm"].validate((valid) => {
if (valid) {
// 需判断当前是否是添加商品
if (this.$route.query.id && this.liveData.length != 0) {
this.spinShow = true;
this.liveForm.commodityList = JSON.stringify(this.liveForm.commodityList);
// 将当前直播间修改
editLive(this.liveForm).then((res) => {
if (res.success) {
this.$Message.success("修改成功!");
this.$router.push({ path: "/storePromotion/live" });
}
this.spinShow = false;
});
} else {
// 此处为创建直播
this.spinShow = true;
addLive(this.liveForm).then((res) => {
if (res.success) {
this.$Message.success("添加成功!");
this.$router.push({ path: "/storePromotion/live" });
}
this.spinShow = false;
});
}
}
});
},
},
};
</script>
<style lang="scss" scoped>
.action {
display: flex;
/deep/ .ivu-btn {
margin: 0 5px !important;
}
}
.original-price {
margin-left: 10px;
color: #999;
text-decoration: line-through;
}
.thumbnail {
width: 50px;
height: 50px;
border-radius: 0.4em;
}
.flex-goods {
margin: 10px;
display: flex;
align-items: center;
> img {
margin-right: 10px;
}
}
.tips {
color: #999;
font-size: 12px;
}
.goods-table {
width: 800px;
width: 1000px;
margin: 10px 0;
}
.upload-list {

181
seller/src/views/promotion/live/live.vue
View File

@@ -2,43 +2,40 @@
<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">
<Form-item label="直播状态" prop="promotionStatus">
<Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 200px">
<Option value="NEW">未开始</Option>
<Option value="START">已开始/上架</Option>
<Option value="END">已结束/下架</Option>
<Option value="CLOSE">紧急关闭/作废</Option>
<Option value="START">直播中</Option>
<Option value="END">已结束</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>
<Tabs v-model="searchForm.status">
<!-- 标签栏 -->
<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 v-for="(item,index) in tabs" :key="index" :name="item.status" :label="item.title">
</TabPane>
</Tabs>
<Table :columns="liveColumns" :data="liveData"></Table>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePageNumber" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
size="small" show-total show-elevator show-sizer></Page>
</Row>
</Card>
</div>
</template>
<script>
import { getLivesList } from "@/api/promotion.js";
import { getLiveList } from "@/api/promotion.js";
export default {
data() {
return {
@@ -48,87 +45,181 @@ export default {
searchForm: {
pageSize: 10,
pageNumber: 1,
status: "NEW",
},
// 直播tab选项栏
tabs: [
{
title: "全部",
},
{
title: "直播中",
status: "START",
},
{
title: "未开始",
status: "NEW",
},
{
title: "已结束",
status: "END",
},
],
liveColumns: [
{
title: "直播标题",
key: "a",
},
{
title: "直播时间",
key: "a",
key: "name",
},
{
title: "主播昵称",
key: "a",
key: "anchorName",
},
{
title: "直播开始时间",
key: "createTime",
render: (h, params) => {
return h(
"span",
this.$options.filters.unixToDate(params.row.startTime)
);
},
},
{
title: "直播结束时间",
key: "endTime",
render: (h, params) => {
return h(
"span",
this.$options.filters.unixToDate(params.row.endTime)
);
},
},
{
title: "直播状态",
key: "a",
render: (h, params) => {
return h(
"span",
params.row.status == "NEW"
? "未开始"
: params.row.status == "START"
? "直播中"
: "已结束"
);
},
},
{
title: "操作",
key: "a",
key: "action",
render: (h, params) => {
return h(
"div",
{
style: {
display: "flex",
},
},
[
h(
"Button",
{
props: {
type: "error",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.getLiveDetail(params.row);
},
},
},
"查看/添加商品"
),
]
);
},
},
], //table中显示的title
liveData: [], //table中显示的直播数据
};
},
watch: {
"searchForm.status": {
handler() {
this.liveData = [];
this.getStoreLives();
},
deep: true,
},
},
mounted() {
this.getStoreLives();
},
methods: {
/**
* 搜索直播间状态
*/
handleSearch() {
this.getStoreLives();
},
/**
* 页面数据大小分页回调
*/
changePageSize(val) {
console.log(val)
this.searchForm.pageSize = val;
this.getStoreLives();
},
/**
* 分页回调
*/
changePageNumber(val) {
console.log(val)
this.searchForm.pageNumber = val;
this.getStoreLives();
},
/**
* 获取店铺直播间列表
*/
async getStoreLives() {
let result = await getLivesList();
let result = await getLiveList(this.searchForm);
if (result.success) {
this.liveData = result.records;
this.liveData = result.result.records;
this.total = result.result.total;
}
},
/**
* 获取
* 获取直播间详情
*/
getLiveDetail(val) {
this.$router.push({
path: "/add-live",
query: { ...val, liveStatus: this.searchForm.status },
});
},
/**
* 创建直播
*/
createLive(){
this.$router.push({path:'/add-live'})
createLive() {
this.$router.push({ path: "/add-live" });
},
/**
* 点击分页数据回调
*/
changePageSize() {},
/**
* 点击分页回调
*/
changePage() {},
},
};
</script>
<style lang="scss" scoped>
@import "@/styles/table-common.scss";
.btns{
.btns {
margin-bottom: 10px;
margin-top: 10px;
}
.page {
margin-top: 20px;
}
</style>

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>

81
seller/src/views/promotion/seckill/seckill.vue
View File

@@ -2,29 +2,12 @@
<div class="seckill">
<Card>
<Row>
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="70"
class="search-form"
>
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="活动名称" prop="goodsName">
<Input
type="text"
v-model="searchForm.promotionName"
placeholder="请输入活动名称"
clearable
style="width: 200px"
/>
<Input type="text" v-model="searchForm.promotionName" placeholder="请输入活动名称" clearable style="width: 200px" />
</Form-item>
<Form-item label="活动状态" prop="promotionStatus">
<Select
v-model="searchForm.promotionStatus"
placeholder="请选择"
clearable
style="width: 200px"
>
<Select v-model="searchForm.promotionStatus" placeholder="请选择" clearable style="width: 200px">
<Option value="NEW">未开始</Option>
<Option value="START">已开始/上架</Option>
<Option value="END">已结束/下架</Option>
@@ -32,13 +15,7 @@
</Select>
</Form-item>
<Form-item label="活动时间">
<DatePicker
v-model="selectDate"
type="daterange"
clearable
placeholder="选择起始时间"
style="width: 200px"
></DatePicker>
<DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px"></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
<Button @click="handleReset" class="ml_10">重置</Button>
@@ -46,14 +23,7 @@
</Row>
<Row class="padding-row">
<Table
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
sortable="custom"
>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom">
<template slot-scope="{ row }" slot="applyEndTime">
{{ unixDate(row.applyEndTime) }}
</template>
@@ -63,36 +33,14 @@
}}</Tag>
</template>
<template slot-scope="{ row }" slot="action">
<Button
v-if="row.promotionStatus === 'NEW'"
type="primary"
size="small"
@click="manage(row)"
>管理</Button
>
<Button
v-else
type="info"
size="small"
@click="manage(row)"
>查看</Button
>
<Button v-if="row.promotionStatus === 'NEW'" type="primary" size="small" @click="manage(row)">管理</Button>
<Button v-else type="info" size="small" @click="manage(row)">查看</Button>
</template>
</Table>
</Row>
<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>
<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>
</Card>
</div>
@@ -193,8 +141,8 @@ export default {
this.getDataList();
},
handleReset() {
this.searchForm = {}
this.selectDate = ''
this.searchForm = {};
this.selectDate = "";
this.searchForm.pageNumber = 0;
this.searchForm.pageSize = 10;
this.getDataList();
@@ -234,9 +182,12 @@ export default {
return hourArr;
},
},
activated () {
activated() {
this.init();
}
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>

58
seller/src/views/statistics/order.vue
View File

@@ -174,7 +174,8 @@ export default {
data() {
return {
total: "0", // 订单总数
orderType: [ // tab切换状态
orderType: [
// tab切换状态
{
title: "订单",
selected: true,
@@ -195,13 +196,15 @@ export default {
TAKE: "已完成",
},
serviceTypeList: { // 服务类型
serviceTypeList: {
// 服务类型
CANCEL: "取消",
RETURN_GOODS: "退货",
EXCHANGE_GOODS: "换货",
RETURN_MONEY: "退款",
},
serviceStatusList: { // 服务类型
serviceStatusList: {
// 服务类型
APPLY: "申请售后",
PASS: "通过售后",
REFUSE: "拒绝售后",
@@ -220,7 +223,8 @@ export default {
columns: [], // 定退单title
orderColumns: [ // 订单表头
orderColumns: [
// 订单表头
{
type: "expand",
width: 50,
@@ -271,7 +275,8 @@ export default {
},
},
],
refundColumns: [ // 退货单表头
refundColumns: [
// 退货单表头
{
type: "expand",
width: 50,
@@ -333,7 +338,8 @@ export default {
key: "applyRefundPrice",
render: (h, params) => {
return h(
"div", this.$options.filters.unitPrice(params.row.applyRefundPrice, '￥')
"div",
this.$options.filters.unitPrice(params.row.applyRefundPrice, "￥")
);
},
},
@@ -403,20 +409,20 @@ export default {
orderParams: {
searchType: "LAST_SEVEN", // TODAY , YESTERDAY , LAST_SEVEN , LAST_THIRTY
year: "",
storeId: JSON.parse(Cookies.get("userInfo")).id || '',
storeId: JSON.parse(Cookies.get("userInfo")).id || "",
memberId: "",
},
// 订单概念
overViewParams: {
month: "",
searchType: "LAST_SEVEN", // TODAY , YESTERDAY , LAST_SEVEN , LAST_THIRTY
storeId: JSON.parse(Cookies.get("userInfo")).id || '',
storeId: JSON.parse(Cookies.get("userInfo")).id || "",
year: "",
},
defaultParams: {
month: "",
searchType: "LAST_SEVEN", // TODAY , YESTERDAY , LAST_SEVEN , LAST_THIRTY
storeId: JSON.parse(Cookies.get("userInfo")).id || '',
storeId: JSON.parse(Cookies.get("userInfo")).id || "",
year: "",
},
@@ -426,7 +432,7 @@ export default {
pageNumber: 1,
pageSize: 10,
searchType: "LAST_SEVEN",
storeId:JSON.parse(Cookies.get("userInfo")).id || '',
storeId: JSON.parse(Cookies.get("userInfo")).id || "",
year: "",
},
@@ -478,34 +484,29 @@ export default {
// 默认已经加载 legend-filter 交互
let data = this.chartList;
this.orderChart.data(data);
this.orderChart.scale({
finalPrice: {
range: [0, 1],
nice: true,
},
data.forEach((item) => {
item.createTime = item.createTime.split(" ")[0];
item.title = "交易额";
});
this.orderChart.data(data);
this.orderChart.tooltip({
showCrosshairs: true,
shared: true,
});
this.orderChart.axis("finalPrice", {
label: {
formatter: (val) => {
return val + "元";
},
},
});
this.orderChart
.line()
.position("createTime*price")
.label("price")
.color("title")
.shape("smooth");
this.orderChart
.point()
.position("createTime*price")
.label("price")
.color("title")
.shape("circle")
.style({
stroke: "#fff",
@@ -528,7 +529,6 @@ export default {
const res = await API_Goods.getOrderOverView(this.overViewParams);
if (res.success) {
this.overViewList = res.result;
console.log(res.result);
}
},
// 实例化订单图表
@@ -598,9 +598,9 @@ export default {
background: $theme_color;
}
}
.breadcrumb{
span{
cursor: pointer;
.breadcrumb {
span {
cursor: pointer;
}
}

5
seller/src/views/statistics/traffic.vue
View File

@@ -67,7 +67,8 @@ export default {
uvs: "", // 访客数
pvs: "", // 浏览量
dateList: [ // 日期选择列表
dateList: [
// 日期选择列表
{
title: "今天",
selected: false,
@@ -118,6 +119,8 @@ export default {
watch: {
params: {
handler(val) {
this.uvs = 0;
this.pvs = 0;
this.init();
},
deep: true,