Merge branch 'master' of gitee.com:beijing_hongye_huicheng/lilishop-ui
misworga831
commit
ad09b38ed5
|
|
@ -71,10 +71,15 @@ export default {
|
|||
this.search();
|
||||
},
|
||||
search () { // 全平台搜索商品
|
||||
this.$router.push({
|
||||
path: '/goodsList',
|
||||
query: { keyword: this.searchData }
|
||||
});
|
||||
const url = this.$route.path;
|
||||
if(url == '/goodsList'){
|
||||
this.$emit('search', this.searchData)
|
||||
}else{
|
||||
this.$router.push({
|
||||
path: '/goodsList',
|
||||
query: { keyword: this.searchData }
|
||||
});
|
||||
}
|
||||
},
|
||||
searchStore () { // 店铺搜索商品
|
||||
this.$emit('search', this.searchData)
|
||||
|
|
|
|||
|
|
@ -369,6 +369,8 @@ export default {
|
|||
return h('div', [h('span', {}, '申请中')]);
|
||||
} else if (params.row.applyStatus === 'VIA_AUDITING') {
|
||||
return h('div', [h('span', {}, '提现成功')]);
|
||||
} else if (params.row.applyStatus === 'ERROR') {
|
||||
return h('div', [h('span', {}, '提现失败')]);
|
||||
} else {
|
||||
return h('div', [h('span', {}, '审核拒绝')]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,7 @@
|
|||
<div class="promotion-decorate">限时秒杀</div>
|
||||
<ul class="time-line">
|
||||
<template v-for="(time, index) in list">
|
||||
<li
|
||||
v-if="index < 5"
|
||||
@click="currIndex = index"
|
||||
:key="index"
|
||||
:class="{ currTimeline: currIndex === index }"
|
||||
>
|
||||
<li v-if="index < 5" @click="currIndex = index" :key="index" :class="{ currTimeline: currIndex === index }">
|
||||
<div>{{ time.timeLine + ":00" }}</div>
|
||||
<div v-if="currIndex === index">
|
||||
<p>{{ nowHour >= time.timeLine ? "秒杀中" : "即将开始" }}</p>
|
||||
|
|
@ -30,13 +25,8 @@
|
|||
<!-- 秒杀商品列表 -->
|
||||
<div class="goods-list">
|
||||
<empty v-if="goodsList.length === 0" />
|
||||
<div
|
||||
v-else
|
||||
class="goods-show-info1"
|
||||
v-for="(item, index) in goodsList"
|
||||
:key="index"
|
||||
@click="goGoodsDetail(item.skuId, item.goodsId)"
|
||||
>
|
||||
<div v-else class="goods-show-info1" v-for="(item, index) in goodsList" :key="index"
|
||||
@click="goGoodsDetail(item.skuId, item.goodsId)">
|
||||
<div class="goods-show-img">
|
||||
<img width="200" height="200" :src="item.goodsImage" />
|
||||
</div>
|
||||
|
|
@ -53,42 +43,28 @@
|
|||
<div class="goods-show-detail">
|
||||
<span>{{ item.goodsName }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="goods-seckill-btn"
|
||||
:class="{
|
||||
'goods-seckill-btn-gray': nowHour < list[currIndex].timeLine,
|
||||
}"
|
||||
>
|
||||
<div class="goods-seckill-btn" :class="{
|
||||
'goods-seckill-btn-gray': nowHour < list[currIndex].timeLine,
|
||||
}">
|
||||
{{ nowHour >= list[currIndex].timeLine ? "立即抢购" : "即将开始" }}
|
||||
</div>
|
||||
<div
|
||||
v-if="nowHour >= list[currIndex].timeLine && item.quantity <= item.salesNum"
|
||||
class="goods-seckill-btn goods-seckill-btn-gray"
|
||||
>
|
||||
<div v-if="nowHour >= list[currIndex].timeLine && item.quantity <= item.salesNum"
|
||||
class="goods-seckill-btn goods-seckill-btn-gray">
|
||||
已售罄
|
||||
</div>
|
||||
<div v-if="nowHour >= list[currIndex].timeLine" class="goods-show-num1">
|
||||
<span
|
||||
>已售{{
|
||||
(item.quantity && item.quantity > 0
|
||||
? Math.ceil(
|
||||
(item.salesNum / (item.quantity + item.salesNum)) * 100
|
||||
)
|
||||
: 100) + "%"
|
||||
}}</span
|
||||
><Progress
|
||||
hide-info
|
||||
stroke-color="#df0021"
|
||||
style="width: 110px"
|
||||
class="ml_10"
|
||||
:percent="
|
||||
item.quantity && item.quantity > 0
|
||||
? Math.ceil(
|
||||
(item.salesNum / (item.quantity + item.salesNum)) * 100
|
||||
)
|
||||
: 100
|
||||
"
|
||||
/>
|
||||
<span>已售{{
|
||||
(item.quantity && item.quantity > 0
|
||||
? Math.ceil(
|
||||
(item.salesNum / (item.quantity + item.salesNum)) * 100
|
||||
)
|
||||
: 100) + "%"
|
||||
}}</span><Progress hide-info stroke-color="#df0021" style="width: 110px" class="ml_10" :percent="item.quantity && item.quantity > 0
|
||||
? Math.ceil(
|
||||
(item.salesNum / (item.quantity + item.salesNum)) * 100
|
||||
)
|
||||
: 100
|
||||
" />
|
||||
</div>
|
||||
<div class="goods-show-seller">
|
||||
<span>{{ item.storeName }}</span>
|
||||
|
|
@ -101,7 +77,7 @@
|
|||
<script>
|
||||
import { seckillByDay } from "@/api/promotion";
|
||||
export default {
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
list: [], // 秒杀时段列表
|
||||
goodsList: [], // 商品列表
|
||||
|
|
@ -112,19 +88,19 @@ export default {
|
|||
nowHour: new Date().getHours(), // 当前小时数
|
||||
};
|
||||
},
|
||||
beforeDestroy() {
|
||||
beforeDestroy () {
|
||||
// 销毁前清除定时器
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
watch: {
|
||||
currIndex(val) {
|
||||
currIndex (val) {
|
||||
clearInterval(this.interval);
|
||||
this.interval = null;
|
||||
this.nowHour = new Date().getHours();
|
||||
this.countDown(val);
|
||||
this.goodsList = this.list[val].seckillGoodsList;
|
||||
},
|
||||
diffSeconds(val) {
|
||||
diffSeconds (val) {
|
||||
const hours = Math.floor(val / 3600);
|
||||
// 当前秒数 / 60，向下取整
|
||||
// 获取到所有分钟数 3600 / 60 = 60分钟
|
||||
|
|
@ -138,7 +114,7 @@ export default {
|
|||
clearInterval(this.interval);
|
||||
this.interval = null;
|
||||
}
|
||||
function filteTime(time) {
|
||||
function filteTime (time) {
|
||||
if (time < 10) {
|
||||
return "0" + time;
|
||||
} else {
|
||||
|
|
@ -148,7 +124,7 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
getListByDay() {
|
||||
getListByDay () {
|
||||
// 当天秒杀活动
|
||||
seckillByDay().then((res) => {
|
||||
if (res.success) {
|
||||
|
|
@ -158,7 +134,7 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
goGoodsDetail(skuId, goodsId) {
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
// 跳转商品详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: "/goodsDetail",
|
||||
|
|
@ -166,7 +142,7 @@ export default {
|
|||
});
|
||||
window.open(routeUrl.href, "_blank");
|
||||
},
|
||||
countDown(currIndex) {
|
||||
countDown (currIndex) {
|
||||
// 倒计时
|
||||
// 0点时间戳
|
||||
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
|
||||
|
|
@ -191,13 +167,14 @@ export default {
|
|||
}, 1000);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.getListByDay();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../assets/styles/goodsList.scss";
|
||||
|
||||
.goods-seckill-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -212,19 +189,23 @@ export default {
|
|||
margin-bottom: 1px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.goods-seckill-btn-gray {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.promotion-decorate::before,
|
||||
.promotion-decorate::after {
|
||||
background-image: url("/src/assets/images/sprite@2x.png");
|
||||
}
|
||||
|
||||
.time-line {
|
||||
width: 1200px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
padding: 0 30px;
|
||||
font-size: 16px;
|
||||
|
|
@ -233,9 +214,11 @@ export default {
|
|||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.not-curr {
|
||||
border: 1px solid #999;
|
||||
border-radius: 20px;
|
||||
|
|
@ -245,18 +228,22 @@ export default {
|
|||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.currTimeline {
|
||||
background-color: $theme_color;
|
||||
color: #fff;
|
||||
> div:nth-child(1) {
|
||||
|
||||
>div:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
|
||||
>div:nth-child(2) {
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-show-info1 {
|
||||
width: 290px;
|
||||
padding: 6px;
|
||||
|
|
@ -267,15 +254,18 @@ export default {
|
|||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.goods-show-info1:hover {
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0px 0px 15px #ccc;
|
||||
}
|
||||
|
||||
.goods-show-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ivu-progress-success .ivu-progress-bg {
|
||||
background-color: #111fff;
|
||||
background-color: #111fff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
<Poptip slot="append" transfer trigger="hover" title="图片预览" placement="right">
|
||||
<Icon type="md-eye" class="see-icon" />
|
||||
<div slot="content">
|
||||
<img :src="currentValue" alt="该资源不存在" style="width: 100%;margin: 0 auto;display: block;" />
|
||||
<img :src="currentValue" alt="该资源不存在" style="max-width: 300px;margin: 0 auto;display: block;" />
|
||||
<a @click="viewImage=true" style="margin-top:5px;text-align:right;display:block">查看大图</a>
|
||||
</div>
|
||||
</Poptip>
|
||||
</Input>
|
||||
|
||||
|
||||
<Upload
|
||||
:action="uploadFileUrl"
|
||||
:headers="accessToken"
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
</div>
|
||||
|
||||
<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
|
||||
<img :src="currentValue" alt="该资源不存在" style="width: 100%;margin: 0 auto;display: block;" />
|
||||
<img :src="currentValue" alt="该资源不存在" style="max-width: 300px;margin: 0 auto;display: block;" />
|
||||
<div slot="footer">
|
||||
<Button @click="viewImage=false">关闭</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,11 +26,10 @@
|
|||
<FormItem label="规格名称" prop="specName">
|
||||
<Input v-model="form.specName" maxlength="30" clearable style="width: 100%" />
|
||||
</FormItem>
|
||||
{{ form }}
|
||||
<FormItem label="规格值" prop="specValue">
|
||||
<Select v-model="form.specValue" placeholder="输入后回车添加" multiple filterable allow-create
|
||||
:popper-append-to-body="false" popper-class="spec-values-popper"
|
||||
style="width: 100%; text-align: left; margin-right: 10px">
|
||||
style="width: 100%; text-align: left; margin-right: 10px" @on-create="handleCreate2">
|
||||
<Option v-for="item in specValue" :value="item" :label="item" :key="item">
|
||||
</Option>
|
||||
</Select>
|
||||
|
|
@ -51,7 +50,7 @@ import { regular } from "@/utils";
|
|||
export default {
|
||||
name: "spec",
|
||||
components: {},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
modalType: 0, // 添加或编辑标识
|
||||
|
|
@ -150,29 +149,32 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
handleCreate2 (v) {
|
||||
console.log(v);
|
||||
},
|
||||
//初始化，获取数据
|
||||
init() {
|
||||
init () {
|
||||
this.getDataList();
|
||||
},
|
||||
//修改分页
|
||||
changePage(v) {
|
||||
changePage (v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
//修改页面大小
|
||||
changePageSize(v) {
|
||||
changePageSize (v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
//搜索参数
|
||||
handleSearch() {
|
||||
handleSearch () {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
//重置搜索参数
|
||||
handleReset() {
|
||||
handleReset () {
|
||||
this.$refs.searchForm.resetFields();
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
|
|
@ -180,7 +182,7 @@ export default {
|
|||
this.getDataList();
|
||||
},
|
||||
//更改排序
|
||||
changeSort(e) {
|
||||
changeSort (e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order === "normal") {
|
||||
|
|
@ -189,16 +191,16 @@ export default {
|
|||
this.getDataList();
|
||||
},
|
||||
//清除已选择
|
||||
clearSelectAll() {
|
||||
clearSelectAll () {
|
||||
this.$refs.table.selectAll(false);
|
||||
},
|
||||
//修改已选择
|
||||
changeSelect(e) {
|
||||
changeSelect (e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
//获取数据
|
||||
getDataList() {
|
||||
getDataList () {
|
||||
this.loading = true;
|
||||
// 带多条件搜索参数获取表单数据 请自行修改接口
|
||||
getSpecListData(this.searchForm).then((res) => {
|
||||
|
|
@ -211,7 +213,7 @@ export default {
|
|||
this.loading = false;
|
||||
},
|
||||
//新增规格
|
||||
saveSpec() {
|
||||
saveSpec () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
|
|
@ -246,7 +248,7 @@ export default {
|
|||
});
|
||||
},
|
||||
//弹出添加框
|
||||
add() {
|
||||
add () {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加";
|
||||
this.$refs.form.resetFields();
|
||||
|
|
@ -255,8 +257,7 @@ export default {
|
|||
this.modalVisible = true;
|
||||
},
|
||||
//弹出编辑框
|
||||
edit(v) {
|
||||
console.log(v);
|
||||
edit (v) {
|
||||
this.modalType = 1;
|
||||
this.modalTitle = "编辑";
|
||||
// 转换null为""
|
||||
|
|
@ -266,23 +267,21 @@ export default {
|
|||
}
|
||||
}
|
||||
let localVal = v.specValue;
|
||||
console.log(localVal.split(","))
|
||||
this.form.specName = v.specName;
|
||||
this.form.id = v.id;
|
||||
this.$nextTick(() => {
|
||||
this.$set(this.form, 'specValue', localVal.split(","))
|
||||
})
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// this.$set(this.form, 'specValue', localVal.split(","))
|
||||
// })
|
||||
this.form.specValue = localVal.split(",")
|
||||
if (localVal && localVal.indexOf("," > 0)) {
|
||||
this.specValue = this.form.specValue;
|
||||
} else {
|
||||
this.specValue = [];
|
||||
}
|
||||
console.log("form.specValue", this.form);
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 删除规格
|
||||
remove(v) {
|
||||
remove (v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除 " + v.specName + " ?",
|
||||
|
|
@ -299,7 +298,7 @@ export default {
|
|||
});
|
||||
},
|
||||
// 批量删除
|
||||
delAll() {
|
||||
delAll () {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未选择要删除的数据");
|
||||
return;
|
||||
|
|
@ -327,7 +326,7 @@ export default {
|
|||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -165,6 +165,8 @@ export default {
|
|||
return h("Tag", { props: { color: "green" } }, "审核通过");
|
||||
} else if (params.row.applyStatus == "SUCCESS") {
|
||||
return h("Tag", { props: { color: "blue" } }, "提现成功");
|
||||
} else if (params.row.applyStatus == "ERROR") {
|
||||
return h("Tag", { props: { color: "blue" } }, "提现失败");
|
||||
} else {
|
||||
return h("Tag", { props: { color: "red" } }, "审核拒绝");
|
||||
}
|
||||
|
|
@ -249,6 +251,8 @@ export default {
|
|||
return "审核通过(提现成功)";
|
||||
} else if (val === "FAIL_AUDITING") {
|
||||
return "审核拒绝";
|
||||
} else if (val === "ERROR") {
|
||||
return "提现失败";
|
||||
} else {
|
||||
return "未知状态";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -325,6 +325,7 @@ export default {
|
|||
methods: {
|
||||
// 回调给父级
|
||||
callback(val, index) {
|
||||
this.selectMember.forEach(item=>{item.___selected = false})
|
||||
this.$set(val, "___selected", !val.___selected);
|
||||
console.log(val.___selected);
|
||||
console.log(this.selectMember);
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
<dl>
|
||||
<dt>实际退款金额</dt>
|
||||
<dd>
|
||||
<Input v-model="params.actualRefundPrice" style="width: 260px" />
|
||||
<InputNumber :min="0" v-model="params.actualRefundPrice" style="width: 260px" />
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
|
|||
|
|
@ -4,22 +4,10 @@
|
|||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
|
||||
<Form-item label="订单号" prop="orderSn">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.orderSn"
|
||||
placeholder="请输入订单号"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
<Input type="text" v-model="searchForm.orderSn" placeholder="请输入订单号" clearable style="width: 200px" />
|
||||
</Form-item>
|
||||
<Form-item label="会员名称" prop="buyerName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.buyerName"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
<Input type="text" v-model="searchForm.buyerName" placeholder="请输入会员名称" clearable style="width: 200px" />
|
||||
</Form-item>
|
||||
<Form-item label="订单状态" prop="orderStatus">
|
||||
<Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 200px">
|
||||
|
|
@ -32,274 +20,251 @@
|
|||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="下单时间">
|
||||
<DatePicker
|
||||
v-model="selectDate"
|
||||
type="datetimerange"
|
||||
format="yyyy-MM-dd"
|
||||
clearable
|
||||
@on-change="selectDateRange"
|
||||
placeholder="选择起始时间"
|
||||
style="width: 200px"
|
||||
></DatePicker>
|
||||
<DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable
|
||||
@on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
|
||||
|
||||
</Form>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
class="mt_10"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
></Table>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10" sortable="custom"
|
||||
@on-sort-change="changeSort"></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
: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" :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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Order from "@/api/order";
|
||||
import * as API_Order from "@/api/order";
|
||||
|
||||
export default {
|
||||
name: "fictitiousOrderList",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "", // 默认排序字段
|
||||
order: "", // 默认排序方式
|
||||
startDate: "", // 起始时间
|
||||
endDate: "", // 终止时间
|
||||
orderType: "VIRTUAL",
|
||||
orderSn: "",
|
||||
buyerName: "",
|
||||
orderStatus: ""
|
||||
export default {
|
||||
name: "fictitiousOrderList",
|
||||
data () {
|
||||
return {
|
||||
loading: true, // 表单加载状态
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10, // 页面大小
|
||||
sort: "", // 默认排序字段
|
||||
order: "", // 默认排序方式
|
||||
startDate: "", // 起始时间
|
||||
endDate: "", // 终止时间
|
||||
orderType: "VIRTUAL",
|
||||
orderSn: "",
|
||||
buyerName: "",
|
||||
orderStatus: ""
|
||||
},
|
||||
|
||||
selectDate: null, // 下单时间
|
||||
columns: [
|
||||
{
|
||||
title: "订单号",
|
||||
key: "sn",
|
||||
minWidth: 230,
|
||||
tooltip: true
|
||||
},
|
||||
|
||||
selectDate: null, // 下单时间
|
||||
columns: [
|
||||
{
|
||||
title: "订单号",
|
||||
key: "sn",
|
||||
minWidth: 230,
|
||||
tooltip: true
|
||||
},
|
||||
{
|
||||
title: "下单时间",
|
||||
key: "createTime",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "订单来源",
|
||||
key: "clientType",
|
||||
width: 95,
|
||||
render: (h, params) => {
|
||||
if (params.row.clientType == "H5") {
|
||||
return h("div", {}, "移动端");
|
||||
} else if (params.row.clientType == "PC") {
|
||||
return h("div", {}, "PC端");
|
||||
} else if (params.row.clientType == "WECHAT_MP") {
|
||||
return h("div", {}, "小程序端");
|
||||
} else if (params.row.clientType == "APP") {
|
||||
return h("div", {}, "移动应用端");
|
||||
} else {
|
||||
return h("div", {}, params.row.clientType);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "买家名称",
|
||||
key: "memberName",
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
title: "订单金额",
|
||||
key: "flowPrice",
|
||||
minWidth: 120,
|
||||
sortable: true,
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
"div",
|
||||
this.$options.filters.unitPrice(params.row.flowPrice, "￥")
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: "订单状态",
|
||||
key: "orderStatus",
|
||||
width:95,
|
||||
render: (h, params) => {
|
||||
if (params.row.orderStatus == "UNPAID") {
|
||||
return h("div", [h("tag", {props: {color: "magenta"}}, "未付款")]);
|
||||
} else if (params.row.orderStatus == "PAID") {
|
||||
return h("div", [h("tag", {props: {color: "blue"}}, "已付款")]);
|
||||
} else if (params.row.orderStatus == "COMPLETED") {
|
||||
return h("div", [h("tag", {props: {color: "green"}}, "已完成")]);
|
||||
} else if (params.row.orderStatus == "TAKE") {
|
||||
return h("div", [h("tag", {props: {color: "volcano"}}, "待核验")]);
|
||||
} else if (params.row.orderStatus == "CANCELLED") {
|
||||
return h("div", [h("tag", {props: {color: "red"}}, "已取消")]);
|
||||
}
|
||||
{
|
||||
title: "下单时间",
|
||||
key: "createTime",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "订单来源",
|
||||
key: "clientType",
|
||||
width: 95,
|
||||
render: (h, params) => {
|
||||
if (params.row.clientType == "H5") {
|
||||
return h("div", {}, "移动端");
|
||||
} else if (params.row.clientType == "PC") {
|
||||
return h("div", {}, "PC端");
|
||||
} else if (params.row.clientType == "WECHAT_MP") {
|
||||
return h("div", {}, "小程序端");
|
||||
} else if (params.row.clientType == "APP") {
|
||||
return h("div", {}, "移动应用端");
|
||||
} else {
|
||||
return h("div", {}, params.row.clientType);
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
width: 200,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
|
||||
{
|
||||
props: {
|
||||
type: "primary",
|
||||
size: "small",
|
||||
},
|
||||
attrs: {
|
||||
disabled: params.row.orderStatus == "UNPAID" ? false : true,
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.confirmPrice(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"收款"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.detail(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"查看"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "买家名称",
|
||||
key: "memberName",
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
title: "订单金额",
|
||||
key: "flowPrice",
|
||||
minWidth: 120,
|
||||
sortable: true,
|
||||
render: (h, params) => {
|
||||
return h(
|
||||
"div",
|
||||
this.$options.filters.unitPrice(params.row.flowPrice, "￥")
|
||||
);
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0, // 表单数据总数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
// 列表排序
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order === "normal") {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.getDataList();
|
||||
},
|
||||
// 起止时间从新赋值
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
}
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
this.loading = true;
|
||||
API_Order.getOrderList(this.searchForm).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
},
|
||||
|
||||
{
|
||||
title: "订单状态",
|
||||
key: "orderStatus",
|
||||
width: 95,
|
||||
render: (h, params) => {
|
||||
if (params.row.orderStatus == "UNPAID") {
|
||||
return h("div", [h("tag", { props: { color: "magenta" } }, "未付款")]);
|
||||
} else if (params.row.orderStatus == "PAID") {
|
||||
return h("div", [h("tag", { props: { color: "blue" } }, "已付款")]);
|
||||
} else if (params.row.orderStatus == "COMPLETED") {
|
||||
return h("div", [h("tag", { props: { color: "green" } }, "已完成")]);
|
||||
} else if (params.row.orderStatus == "TAKE") {
|
||||
return h("div", [h("tag", { props: { color: "volcano" } }, "待核验")]);
|
||||
} else if (params.row.orderStatus == "CANCELLED") {
|
||||
return h("div", [h("tag", { props: { color: "red" } }, "已取消")]);
|
||||
}
|
||||
}
|
||||
});
|
||||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
},
|
||||
//确认收款
|
||||
confirmPrice(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认收款",
|
||||
content: "您确定要收款吗？",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
API_Order.orderPay(v.sn).then(res => {
|
||||
if(res.success){
|
||||
this.$Message.success("收款成功")
|
||||
this.getDataList()
|
||||
}
|
||||
this.$Modal.remove();
|
||||
})
|
||||
},
|
||||
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
width: 200,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
|
||||
{
|
||||
props: {
|
||||
type: "primary",
|
||||
size: "small",
|
||||
},
|
||||
attrs: {
|
||||
disabled: params.row.orderStatus == "UNPAID" ? false : true,
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.confirmPrice(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"收款"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.detail(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"查看"
|
||||
),
|
||||
]);
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
// 订单详情
|
||||
detail(v) {
|
||||
let sn = v.sn;
|
||||
this.$router.push({
|
||||
name: "order-detail",
|
||||
query: {sn: sn},
|
||||
});
|
||||
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 表单数据
|
||||
total: 0, // 表单数据总数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init () {
|
||||
this.getDataList();
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
// 分页 改变页码
|
||||
changePage (v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
},
|
||||
};
|
||||
// 分页 改变页数
|
||||
changePageSize (v) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch () {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
// 列表排序
|
||||
changeSort (e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order === "normal") {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.getDataList();
|
||||
},
|
||||
// 起止时间从新赋值
|
||||
selectDateRange (v) {
|
||||
if (v) {
|
||||
this.searchForm.startDate = v[0];
|
||||
this.searchForm.endDate = v[1];
|
||||
}
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList () {
|
||||
this.loading = true;
|
||||
API_Order.getOrderList(this.searchForm).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
this.total = this.data.length;
|
||||
this.loading = false;
|
||||
},
|
||||
//确认收款
|
||||
confirmPrice (v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认收款",
|
||||
content: "您确定要收款吗？",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
API_Order.orderPay(v.sn).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success("收款成功")
|
||||
this.getDataList()
|
||||
}
|
||||
this.$Modal.remove();
|
||||
})
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
// 订单详情
|
||||
detail (v) {
|
||||
console.log(v.orderType);
|
||||
let sn = v.sn;
|
||||
this.$router.push({
|
||||
name: "order-detail",
|
||||
query: { sn: sn, orderType: v.orderType },
|
||||
});
|
||||
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,24 +4,12 @@
|
|||
<Card style="height: 60px">
|
||||
<div style="">
|
||||
<Button v-if="allowOperation.editPrice" @click="modifyPrice">调整价格</Button>
|
||||
<Button
|
||||
v-if="allowOperation.editConsignee"
|
||||
@click="editAddress"
|
||||
type="primary"
|
||||
ghost
|
||||
>修改收货地址</Button
|
||||
>
|
||||
<Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost
|
||||
>订单取消</Button
|
||||
>
|
||||
<Button
|
||||
v-if="orderInfo.order.orderStatus === 'UNPAID'"
|
||||
@click="confirmPrice"
|
||||
type="primary"
|
||||
>收款</Button
|
||||
>
|
||||
<Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary" ghost>修改收货地址</Button>
|
||||
<Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost>订单取消</Button>
|
||||
<Button v-if="orderInfo.order.orderStatus === 'UNPAID'" @click="confirmPrice" type="primary">收款</Button>
|
||||
<Button @click="orderLog" type="info" ghost>订单日志</Button>
|
||||
<Button @click="printOrder" type="primary" ghost style="float:right;">打印发货单</Button>
|
||||
<Button @click="printOrder" type="primary" ghost style="float:right;"
|
||||
v-if="$route.query.orderType != 'VIRTUAL'">打印发货单</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card class="mt_10 clearfix">
|
||||
|
|
@ -66,10 +54,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="div-item"
|
||||
v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId"
|
||||
>
|
||||
<div class="div-item"
|
||||
v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId">
|
||||
<div class="div-item-left">发票税号：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }}
|
||||
|
|
@ -81,8 +67,8 @@
|
|||
<div class="div-item-right">
|
||||
{{
|
||||
orderInfo.receipt && orderInfo.receipt.receiptContent
|
||||
? orderInfo.receipt.receiptContent
|
||||
: "暂无"
|
||||
? orderInfo.receipt.receiptContent
|
||||
: "暂无"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -92,8 +78,8 @@
|
|||
<div class="div-item-right">
|
||||
{{
|
||||
orderInfo.receipt && orderInfo.receipt.receiptPrice
|
||||
? orderInfo.receipt.receiptPrice
|
||||
: "暂无" | unitPrice("￥")
|
||||
? orderInfo.receipt.receiptPrice
|
||||
: "暂无" | unitPrice("￥")
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -101,7 +87,7 @@
|
|||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">是否开票：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.receipt?(orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开"):"空" }}
|
||||
{{ orderInfo.receipt ? (orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开") : "空" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -127,12 +113,12 @@
|
|||
<div class="div-item-right">{{ orderInfo.order.remark }}</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == false">
|
||||
<!-- <div class="div-item" v-if="orderInfo.order.needReceipt == false">
|
||||
<div class="div-item-left">发票信息：</div>
|
||||
<div class="div-item-right">暂无发票信息</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<!-- <div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">发票抬头：</div>
|
||||
<div class="div-item-right">
|
||||
{{
|
||||
|
|
@ -141,10 +127,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="div-item"
|
||||
v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId"
|
||||
>
|
||||
<div class="div-item"
|
||||
v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId">
|
||||
<div class="div-item-left">发票税号：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }}
|
||||
|
|
@ -156,8 +140,8 @@
|
|||
<div class="div-item-right">
|
||||
{{
|
||||
orderInfo.receipt && orderInfo.receipt.receiptContent
|
||||
? orderInfo.receipt.receiptContent
|
||||
: "暂无"
|
||||
? orderInfo.receipt.receiptContent
|
||||
: "暂无"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -167,8 +151,8 @@
|
|||
<div class="div-item-right">
|
||||
{{
|
||||
orderInfo.receipt && orderInfo.receipt.receiptPrice
|
||||
? orderInfo.receipt.receiptPrice
|
||||
: "暂无" | unitPrice("￥")
|
||||
? orderInfo.receipt.receiptPrice
|
||||
: "暂无" | unitPrice("￥")
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -176,11 +160,11 @@
|
|||
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
||||
<div class="div-item-left">是否开票：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.receipt?(orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开"):"空" }}
|
||||
{{ orderInfo.receipt ? (orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开") : "空" }}
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="div-item">
|
||||
<div class="div-item" v-if="$route.query.orderType != 'VIRTUAL'">
|
||||
<div class="div-item-left">配送方式：</div>
|
||||
<div class="div-item-right">
|
||||
{{ orderInfo.deliveryMethodValue }}
|
||||
|
|
@ -189,22 +173,12 @@
|
|||
</div>
|
||||
</Card>
|
||||
<Card class="mt_10">
|
||||
<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="goodsSlot" slot-scope="{ row }">
|
||||
<div style="margin-top: 5px; height: 80px; display: flex">
|
||||
<div style="">
|
||||
<img
|
||||
:src="row.image"
|
||||
style="height: 60px; margin-top: 1px; width: 60px"
|
||||
/>
|
||||
<img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" />
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 13px">
|
||||
|
|
@ -216,28 +190,12 @@
|
|||
{{ key }} : {{ item }}
|
||||
</span>
|
||||
</span>
|
||||
<Poptip
|
||||
trigger="hover"
|
||||
style="display: block"
|
||||
title="扫码在手机中查看"
|
||||
transfer
|
||||
>
|
||||
<Poptip trigger="hover" style="display: block" title="扫码在手机中查看" transfer>
|
||||
<div slot="content">
|
||||
<vue-qr
|
||||
:text="wapLinkTo(row.goodsId, row.skuId)"
|
||||
:margin="0"
|
||||
colorDark="#000"
|
||||
colorLight="#fff"
|
||||
:size="150"
|
||||
></vue-qr>
|
||||
<vue-qr :text="wapLinkTo(row.goodsId, row.skuId)" :margin="0" colorDark="#000" colorLight="#fff"
|
||||
:size="150"></vue-qr>
|
||||
</div>
|
||||
<img
|
||||
src="../../../assets/qrcode.svg"
|
||||
class="hover-pointer"
|
||||
width="20"
|
||||
height="20"
|
||||
alt=""
|
||||
/>
|
||||
<img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" />
|
||||
</Poptip>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -251,58 +209,56 @@
|
|||
orderInfo.order.priceDetailDTO.goodsPrice | unitPrice("￥")
|
||||
}}</span>
|
||||
</li>
|
||||
<li
|
||||
v-if="
|
||||
orderInfo.order.priceDetailDTO.discountPrice &&
|
||||
orderInfo.order.priceDetailDTO.discountPrice > 0
|
||||
"
|
||||
>
|
||||
<li v-if="
|
||||
orderInfo.order.priceDetailDTO.discountPrice &&
|
||||
orderInfo.order.priceDetailDTO.discountPrice > 0
|
||||
">
|
||||
<span class="label">优惠金额：</span>
|
||||
<span class="txt">
|
||||
{{ orderInfo.order.priceDetailDTO.discountPrice | unitPrice("￥") }}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="
|
||||
orderInfo.order.priceDetailDTO.couponPrice &&
|
||||
orderInfo.order.priceDetailDTO.couponPrice > 0
|
||||
"
|
||||
>
|
||||
<li v-if="
|
||||
orderInfo.order.priceDetailDTO.couponPrice &&
|
||||
orderInfo.order.priceDetailDTO.couponPrice > 0
|
||||
">
|
||||
<span class="label">优惠券金额：</span>
|
||||
<span class="txt">
|
||||
{{ orderInfo.order.priceDetailDTO.couponPrice | unitPrice("￥") }}
|
||||
</span>
|
||||
</li>
|
||||
<li v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
|
||||
<div class="label">
|
||||
<Poptip trigger="hover" placement="left" width="200">
|
||||
<Icon v-if="typeList.length > 0" type="ios-alert-outline" size="17" @click="getOrderPrice" color="#cc0000"/>
|
||||
<template #content>
|
||||
<div class="api" style="text-align:left;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<li
|
||||
v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
|
||||
<div class="label">
|
||||
<Poptip trigger="hover" placement="left" width="200">
|
||||
<Icon v-if="typeList.length > 0" type="ios-alert-outline" size="17" @click="getOrderPrice"
|
||||
color="#cc0000" />
|
||||
<template #content>
|
||||
<div class="api" style="text-align:left;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>优惠详情：</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item,index) in typeList" :key="index">
|
||||
<td>{{item.promotionName}}：</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in typeList" :key="index">
|
||||
<td>{{ item.promotionName }}：</td>
|
||||
<td>¥{{ item.discountPrice | unitPrice }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</Poptip>
|
||||
<span>优惠详情：</span>
|
||||
</div>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</Poptip>
|
||||
<span>优惠详情：</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- <li v-if="showPrices">
|
||||
<!-- <li v-if="showPrices">
|
||||
<span class="label" style="color: #cc0000;font-size: 14px;" v-if="typeList.length > 0" >优惠详情：</span>
|
||||
</li> -->
|
||||
<!-- <li v-if="showPrices" v-for="(item,index) in typeList" :key="index">
|
||||
<!-- <li v-if="showPrices" v-for="(item,index) in typeList" :key="index">
|
||||
<span class="label" v-if="index == 1 && typeList.length > 1" style="font-size:10px !important;"><a @click="gotoHomes" style="display: inline-block;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
|
||||
<span class="txt" style="border-bottom: 1px dashed;font-size:10px !important;" v-if="index == 1 && typeList.length > 1">¥{{ item.discountPrice | unitPrice }}</span>
|
||||
<span class="label" v-if="index == 0 && typeList.length > 1" style="font-size:10px !important;"><a @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
|
||||
|
|
@ -318,9 +274,7 @@
|
|||
</li>
|
||||
<li v-if="orderInfo.order.priceDetailDTO.updatePrice">
|
||||
<span class="label">修改金额：</span>
|
||||
<span class="txt theme_color"
|
||||
>¥{{ orderInfo.order.priceDetailDTO.updatePrice | unitPrice }}</span
|
||||
>
|
||||
<span class="txt theme_color">¥{{ orderInfo.order.priceDetailDTO.updatePrice | unitPrice }}</span>
|
||||
</li>
|
||||
<li v-if="orderInfo.order.priceDetailDTO.payPoint != 0">
|
||||
<span class="label">使用积分：</span>
|
||||
|
|
@ -330,9 +284,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<span class="label">应付金额：</span>
|
||||
<span class="txt flowPrice"
|
||||
>¥{{ orderInfo.order.priceDetailDTO.flowPrice | unitPrice }}</span
|
||||
>
|
||||
<span class="txt flowPrice">¥{{ orderInfo.order.priceDetailDTO.flowPrice | unitPrice }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -345,20 +297,10 @@
|
|||
<span>修改金额</span>
|
||||
</p>
|
||||
<div>
|
||||
<Form
|
||||
ref="modifyPriceForm"
|
||||
:model="modifyPriceForm"
|
||||
label-position="left"
|
||||
:label-width="70"
|
||||
:rules="modifyPriceValidate"
|
||||
>
|
||||
<Form ref="modifyPriceForm" :model="modifyPriceForm" label-position="left" :label-width="70"
|
||||
:rules="modifyPriceValidate">
|
||||
<FormItem label="订单金额" prop="price">
|
||||
<InputNumber
|
||||
style="width: 100px"
|
||||
v-model="modifyPriceForm.price"
|
||||
:min="0"
|
||||
:max="999999"
|
||||
></InputNumber>
|
||||
<InputNumber style="width: 100px" v-model="modifyPriceForm.price" :min="0" :max="999999"></InputNumber>
|
||||
<span class="ml_10">元</span>
|
||||
</FormItem>
|
||||
</Form>
|
||||
|
|
@ -375,20 +317,11 @@
|
|||
<span>订单取消</span>
|
||||
</p>
|
||||
<div>
|
||||
<Form
|
||||
ref="orderCancelForm"
|
||||
:model="orderCancelForm"
|
||||
label-position="left"
|
||||
:label-width="100"
|
||||
:rules="orderCancelValidate"
|
||||
>
|
||||
<Form ref="orderCancelForm" :model="orderCancelForm" label-position="left" :label-width="100"
|
||||
:rules="orderCancelValidate">
|
||||
<FormItem label="取消原因" prop="reason">
|
||||
<Input
|
||||
v-model="orderCancelForm.reason"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="请输入取消原因"
|
||||
></Input>
|
||||
<Input v-model="orderCancelForm.reason" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="请输入取消原因"></Input>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
|
|
@ -404,55 +337,22 @@
|
|||
<span>修改收件信息</span>
|
||||
</p>
|
||||
<div>
|
||||
<Form
|
||||
ref="addressForm"
|
||||
:model="addressForm"
|
||||
label-position="left"
|
||||
:label-width="100"
|
||||
:rules="addressRule"
|
||||
>
|
||||
<Form ref="addressForm" :model="addressForm" label-position="left" :label-width="100" :rules="addressRule">
|
||||
<FormItem label="收件人" prop="consigneeName">
|
||||
<Input
|
||||
v-model="addressForm.consigneeName"
|
||||
size="large"
|
||||
maxlength="20"
|
||||
></Input>
|
||||
<Input v-model="addressForm.consigneeName" size="large" maxlength="20"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="联系方式" prop="consigneeMobile">
|
||||
<Input
|
||||
v-model="addressForm.consigneeMobile"
|
||||
size="large"
|
||||
maxlength="11"
|
||||
></Input>
|
||||
<Input v-model="addressForm.consigneeMobile" size="large" maxlength="11"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="地址信息" prop="consigneeAddressPath">
|
||||
<Input
|
||||
v-model="addr"
|
||||
disabled
|
||||
style="width: 305px"
|
||||
v-if="showRegion == false"
|
||||
/>
|
||||
<Button
|
||||
v-if="showRegion == false"
|
||||
@click="regionClick"
|
||||
:loading="submitLoading"
|
||||
type="primary"
|
||||
icon="ios-create-outline"
|
||||
style="margin-left: 8px"
|
||||
>修改
|
||||
<Input v-model="addr" disabled style="width: 305px" v-if="showRegion == false" />
|
||||
<Button v-if="showRegion == false" @click="regionClick" :loading="submitLoading" type="primary"
|
||||
icon="ios-create-outline" style="margin-left: 8px">修改
|
||||
</Button>
|
||||
<region
|
||||
style="width: 400px"
|
||||
@selected="selectedRegion"
|
||||
v-if="showRegion == true"
|
||||
/>
|
||||
<region style="width: 400px" @selected="selectedRegion" v-if="showRegion == true" />
|
||||
</FormItem>
|
||||
<FormItem label="详细地址" prop="consigneeDetail">
|
||||
<Input
|
||||
v-model="addressForm.consigneeDetail"
|
||||
size="large"
|
||||
maxlength="50"
|
||||
></Input>
|
||||
<Input v-model="addressForm.consigneeDetail" size="large" maxlength="50"></Input>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
|
|
@ -467,69 +367,67 @@
|
|||
<span>订单日志</span>
|
||||
</p>
|
||||
<div class="order-log-div">
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="orderLogColumns"
|
||||
:data="orderInfo.orderLogs"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
></Table>
|
||||
<Table :loading="loading" border :columns="orderLogColumns" :data="orderInfo.orderLogs" ref="table"
|
||||
sortable="custom"></Table>
|
||||
</div>
|
||||
|
||||
<div slot="footer" style="text-align: right">
|
||||
<Button @click="handelCancel">取消</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal v-model="printModal" width="530" @on-cancel="printCancel" >
|
||||
<Modal v-model="printModal" width="530" @on-cancel="printCancel">
|
||||
<p slot="header" style="line-height:26px;height:26px;">
|
||||
<span style="float: left;">打印发货单</span>
|
||||
<Button size="small" style="margin-right:35px;float: right;padding-bottom: 2px;" @click="printHiddenInfo"><template v-if="printHiddenFlag">显示</template><template v-else>隐藏</template>敏感信息</Button>
|
||||
<Button size="small" style="margin-right:35px;float: right;padding-bottom: 2px;"
|
||||
@click="printHiddenInfo"><template v-if="printHiddenFlag">显示</template><template
|
||||
v-else>隐藏</template>敏感信息</Button>
|
||||
</p>
|
||||
<div style="max-height:500px;overflow-y:auto;overflow-x:hidden;">
|
||||
<div id="printInfo">
|
||||
<Row v-if="orderInfo.order.remark !== ''">
|
||||
<Col span="24">
|
||||
<p class="lineH30 f14">备注：{{ orderInfo.order.remark }}</p>
|
||||
</Col>
|
||||
<p class="lineH30 f14">备注：{{ orderInfo.order.remark }}</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span="12">
|
||||
<p class="lineH30 f14">收件人：{{ orderInfo.order.consigneeName }}</p>
|
||||
</Col>
|
||||
<Col span="12" v-if="orderInfo.order.consigneeMobile">
|
||||
<p class="lineH30 f14" v-if="printHiddenFlag">手机号：{{ orderInfo.order.consigneeMobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</p>
|
||||
<p class="lineH30 f14" v-else>手机号：{{ orderInfo.order.consigneeMobile }}</p>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<p class="lineH30 f14">收件人：{{ orderInfo.order.consigneeName }}</p>
|
||||
</Col>
|
||||
<Col span="12" v-if="orderInfo.order.consigneeMobile">
|
||||
<p class="lineH30 f14" v-if="printHiddenFlag">手机号：{{
|
||||
orderInfo.order.consigneeMobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</p>
|
||||
<p class="lineH30 f14" v-else>手机号：{{ orderInfo.order.consigneeMobile }}</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span="24">
|
||||
<p class="lineH30 f14">收货地址：{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}</p>
|
||||
</Col>
|
||||
<Col span="24">
|
||||
<p class="lineH30 f14">收货地址：{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span="24">
|
||||
<p class="printgoodtitle">商品信息</p>
|
||||
<div class="printgoodinfo">
|
||||
<div v-for="(item,index) in orderInfo.orderItems" :key="index" class="printgooditem">
|
||||
<div class="printgoodname">
|
||||
<p>{{item.goodsName}}</p>
|
||||
<div class="printgoodguid">
|
||||
<span v-for="(itemchild, keychild) in JSON.parse(item.specs)" :key="keychild">
|
||||
<span class="printgoodguiditem" v-if="keychild != 'images'">
|
||||
{{ keychild }} : {{ itemchild }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="printgoodnumber">数量：{{item.num}}</span>
|
||||
<Col span="24">
|
||||
<p class="printgoodtitle">商品信息</p>
|
||||
<div class="printgoodinfo">
|
||||
<div v-for="(item, index) in orderInfo.orderItems" :key="index" class="printgooditem">
|
||||
<div class="printgoodname">
|
||||
<p>{{ item.goodsName }}</p>
|
||||
<div class="printgoodguid">
|
||||
<span v-for="(itemchild, keychild) in JSON.parse(item.specs)" :key="keychild">
|
||||
<span class="printgoodguiditem" v-if="keychild != 'images'">
|
||||
{{ keychild }} : {{ itemchild }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<span class="printgoodnumber">数量：{{ item.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div slot="footer" style="text-align: right">
|
||||
<Button @click="printModal = false">关闭</Button>
|
||||
<Button type="primary" v-print="printInfoObj">打印发货单</Button>
|
||||
|
|
@ -549,15 +447,15 @@ export default {
|
|||
region,
|
||||
"vue-qr": vueQr,
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
typeList:[],
|
||||
showPrices:false,
|
||||
printHiddenFlag:false,//隐藏信息
|
||||
printInfoObj:{
|
||||
typeList: [],
|
||||
showPrices: false,
|
||||
printHiddenFlag: false,//隐藏信息
|
||||
printInfoObj: {
|
||||
id: "printInfo",//要打印的id名 无#号
|
||||
popTitle:' ',//页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
|
||||
extraHead:'',//头部文字 默认空
|
||||
popTitle: ' ',//页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
|
||||
extraHead: '',//头部文字 默认空
|
||||
},
|
||||
loading: false, //加载表格
|
||||
submitLoading: false, // 添加或编辑提交状态
|
||||
|
|
@ -612,7 +510,7 @@ export default {
|
|||
reason: [{ required: true, message: "取消原因不能为空", trigger: "blur" }],
|
||||
},
|
||||
addressModal: false, //弹出修改收件信息框
|
||||
printModal:false,
|
||||
printModal: false,
|
||||
//收件地址表单
|
||||
addressForm: {
|
||||
consigneeName: "",
|
||||
|
|
@ -732,21 +630,21 @@ export default {
|
|||
};
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
$route (to, from) {
|
||||
this.$router.go(0);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
gotoHomes(){
|
||||
gotoHomes () {
|
||||
return false
|
||||
},
|
||||
},
|
||||
//修改地址
|
||||
regionClick() {
|
||||
regionClick () {
|
||||
this.showRegion = true;
|
||||
this.regionId = "";
|
||||
},
|
||||
//确认收款
|
||||
confirmPrice() {
|
||||
confirmPrice () {
|
||||
this.$Modal.confirm({
|
||||
title: "提示",
|
||||
content:
|
||||
|
|
@ -763,30 +661,30 @@ export default {
|
|||
},
|
||||
});
|
||||
},
|
||||
getOrderPrice(){
|
||||
if(this.showPrices){
|
||||
getOrderPrice () {
|
||||
if (this.showPrices) {
|
||||
this.showPrices = false
|
||||
}else if(!this.showPrices){
|
||||
} else if (!this.showPrices) {
|
||||
this.showPrices = true
|
||||
}
|
||||
},
|
||||
getContentPrice(){
|
||||
for (let i = 0; i < this.typeList.length; i++) {
|
||||
for (let j = i + 1; j < this.typeList.length; j++) {
|
||||
if (this.typeList[i].promotionId === this.typeList[j].promotionId) {
|
||||
this.typeList[i].discountPrice = this.typeList[i].discountPrice + this.typeList[j].discountPrice
|
||||
this.typeList.splice(j, 1)
|
||||
}
|
||||
getContentPrice () {
|
||||
for (let i = 0; i < this.typeList.length; i++) {
|
||||
for (let j = i + 1; j < this.typeList.length; j++) {
|
||||
if (this.typeList[i].promotionId === this.typeList[j].promotionId) {
|
||||
this.typeList[i].discountPrice = this.typeList[i].discountPrice + this.typeList[j].discountPrice
|
||||
this.typeList.splice(j, 1)
|
||||
}
|
||||
}
|
||||
console.log(this.typeList)
|
||||
if(this.typeList.length >= 3){
|
||||
console.log(123123)
|
||||
this.getContentPrice()
|
||||
}
|
||||
},
|
||||
}
|
||||
console.log(this.typeList)
|
||||
if (this.typeList.length >= 3) {
|
||||
console.log(123123)
|
||||
this.getContentPrice()
|
||||
}
|
||||
},
|
||||
// 获取订单详情
|
||||
getDataList() {
|
||||
getDataList () {
|
||||
this.loading = true;
|
||||
API_Order.orderDetail(this.sn).then((res) => {
|
||||
this.loading = false;
|
||||
|
|
@ -800,13 +698,13 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
modifyPrice() {
|
||||
modifyPrice () {
|
||||
//默认要修改的金额为订单总金额
|
||||
this.modifyPriceForm.price = this.orderInfo.order.flowPrice;
|
||||
this.modal = true;
|
||||
},
|
||||
//修改订单金额提交
|
||||
modifyPriceSubmit() {
|
||||
modifyPriceSubmit () {
|
||||
this.$refs.modifyPriceForm.validate((valid) => {
|
||||
if (valid) {
|
||||
API_Order.updateOrderPrice(this.sn, this.modifyPriceForm).then((res) => {
|
||||
|
|
@ -820,16 +718,16 @@ export default {
|
|||
});
|
||||
},
|
||||
// 选中的地址
|
||||
selectedRegion(val) {
|
||||
selectedRegion (val) {
|
||||
this.addr = val[1];
|
||||
this.regionId = val[0];
|
||||
},
|
||||
//订单取消
|
||||
orderCancel() {
|
||||
orderCancel () {
|
||||
this.orderCancelModal = true;
|
||||
},
|
||||
//订单取消提交
|
||||
orderCancelSubmit() {
|
||||
orderCancelSubmit () {
|
||||
this.$refs.orderCancelForm.validate((valid) => {
|
||||
if (valid) {
|
||||
API_Order.orderCancel(this.sn, this.orderCancelForm).then((res) => {
|
||||
|
|
@ -843,25 +741,25 @@ export default {
|
|||
});
|
||||
},
|
||||
//订单日志
|
||||
orderLog() {
|
||||
orderLog () {
|
||||
this.orderLogModal = true;
|
||||
},
|
||||
//订单日志取消
|
||||
handelCancel() {
|
||||
handelCancel () {
|
||||
this.orderLogModal = false;
|
||||
},
|
||||
//打印发货单
|
||||
printOrder(){
|
||||
printOrder () {
|
||||
this.printModal = true;
|
||||
},
|
||||
printHiddenInfo(){
|
||||
printHiddenInfo () {
|
||||
this.printHiddenFlag = !this.printHiddenFlag;
|
||||
},
|
||||
printCancel(){
|
||||
printCancel () {
|
||||
// this.printHiddenFlag = false;
|
||||
},
|
||||
//弹出修改收货地址框
|
||||
editAddress() {
|
||||
editAddress () {
|
||||
this.addressModal = true;
|
||||
this.showRegion = false;
|
||||
this.addr = this.orderInfo.order.consigneeAddressPath;
|
||||
|
|
@ -873,7 +771,7 @@ export default {
|
|||
this.addressForm.consigneeAddressIdPath = this.orderInfo.order.consigneeAddressIdPath;
|
||||
},
|
||||
//修改收货地址
|
||||
editAddressSubmit() {
|
||||
editAddressSubmit () {
|
||||
if (this.regionId == "") {
|
||||
this.$Message.error("请选择地址");
|
||||
return;
|
||||
|
|
@ -893,16 +791,17 @@ export default {
|
|||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.sn = this.$route.query.sn;
|
||||
this.getDataList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.lineH30{
|
||||
.lineH30 {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.order-log-div {
|
||||
line-height: 30px;
|
||||
overflow-y: scroll;
|
||||
|
|
@ -939,11 +838,11 @@ export default {
|
|||
line-height: 35px;
|
||||
display: flex;
|
||||
|
||||
> .div-item-left {
|
||||
>.div-item-left {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
> .div-item-right {
|
||||
>.div-item-right {
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
|
@ -1000,24 +899,28 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.f14{
|
||||
|
||||
.f14 {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
.printgoodtitle{
|
||||
|
||||
.printgoodtitle {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin-top: 15px;
|
||||
color: #333;
|
||||
}
|
||||
.printgoodinfo{
|
||||
|
||||
.printgoodinfo {
|
||||
// font-size: 14px;
|
||||
// background: #f2f2f2;
|
||||
// border-bottom:2px solid #333 ;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
color: #333;
|
||||
.printgooditem{
|
||||
|
||||
.printgooditem {
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -1025,35 +928,43 @@ export default {
|
|||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
.printgoodname{
|
||||
|
||||
.printgoodname {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.printgoodguid{
|
||||
|
||||
.printgoodguid {
|
||||
font-size: 12px;
|
||||
color:#999999;
|
||||
line-height:1.5;
|
||||
.printgoodguiditem{
|
||||
color: #999999;
|
||||
line-height: 1.5;
|
||||
|
||||
.printgoodguiditem {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.printgoodprice{
|
||||
|
||||
.printgoodprice {
|
||||
width: 135px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.printgoodnumber{
|
||||
|
||||
.printgoodnumber {
|
||||
width: 85px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
@page{
|
||||
size: auto;
|
||||
@page {
|
||||
size: auto;
|
||||
margin: 3mm;
|
||||
}
|
||||
html,body{
|
||||
height:inherit;
|
||||
|
||||
html,
|
||||
body {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@
|
|||
</template>
|
||||
|
||||
<template slot-scope="{ index }" slot="settlementPrice">
|
||||
<Input
|
||||
<InputNumber
|
||||
:min="0"
|
||||
type="number"
|
||||
v-model="promotionGoodsList[index].settlementPrice"
|
||||
/>
|
||||
|
|
@ -54,10 +55,18 @@
|
|||
</Select>
|
||||
</template>
|
||||
<template slot-scope="{ index }" slot="activeStock">
|
||||
<Input type="number" v-model="promotionGoodsList[index].activeStock" />
|
||||
<InputNumber
|
||||
:min="0"
|
||||
type="number"
|
||||
v-model="promotionGoodsList[index].activeStock"
|
||||
/>
|
||||
</template>
|
||||
<template slot-scope="{ index }" slot="points">
|
||||
<Input type="number" v-model="promotionGoodsList[index].points" />
|
||||
<InputNumber
|
||||
:min="0"
|
||||
type="number"
|
||||
v-model="promotionGoodsList[index].points"
|
||||
/>
|
||||
</template>
|
||||
</Table>
|
||||
</FormItem>
|
||||
|
|
@ -370,8 +379,8 @@ export default {
|
|||
settlementPrice: e.settlementPrice || 0,
|
||||
pointsGoodsCategoryId: e.pointsGoodsCategoryId || 0,
|
||||
pointsGoodsCategoryName: e.pointsGoodsCategoryName || "",
|
||||
activeStock: e.activeStock || 0,
|
||||
points: e.points || 0,
|
||||
activeStock: e.activeStock || 1,
|
||||
points: e.points || 1,
|
||||
skuId: e.id,
|
||||
goodsId: e.goodsId,
|
||||
originalPrice: e.price || 0,
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export default {
|
|||
pointsGoodsCategoryId:'',
|
||||
pointsGoodsCategoryName:'',
|
||||
form: {
|
||||
|
||||
|
||||
/** 活动名称 */
|
||||
promotionName: "",
|
||||
/** 报名截止时间 */
|
||||
|
|
@ -109,7 +109,7 @@ export default {
|
|||
seckillRule: "",
|
||||
goodsSku: {},
|
||||
promotionStatus: "NEW",
|
||||
|
||||
|
||||
},
|
||||
categoryList: [], // 分类列表
|
||||
id: this.$route.query.id, // 活动id
|
||||
|
|
@ -118,6 +118,7 @@ export default {
|
|||
settlementPrice: [{ required: true, message: "请填写结算价格" }],
|
||||
pointsGoodsCategoryId: [{ required: true, message: "请选择积分商品分类" }],
|
||||
points: [{ required: true, message: "请填写兑换积分" }],
|
||||
activeStock: [{ required: true, message: "请填写库存" }],
|
||||
},
|
||||
options: {
|
||||
disabledDate(date) {
|
||||
|
|
|
|||
|
|
@ -130,11 +130,11 @@
|
|||
<div class="ant-col-md-6">
|
||||
<p class="item">
|
||||
<span class="label">法人姓名：</span>
|
||||
<span class="info">{{storeInfo.legalName}}人</span>
|
||||
<span class="info">{{storeInfo.legalName}}</span>
|
||||
</p>
|
||||
<p class="item">
|
||||
<span class="label">法人身份证：</span>
|
||||
<span class="info">{{storeInfo.legalId}}人</span>
|
||||
<span class="info">{{storeInfo.legalId}}</span>
|
||||
</p>
|
||||
<p class="item">
|
||||
<span class="label">身份证照片：</span>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="layout">
|
||||
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
|
||||
|
||||
<FormItem label="平台" prop="endPoint">
|
||||
<FormItem label="平台" >
|
||||
<RadioGroup v-model="formValidate.type" type="button">
|
||||
<Radio label="ALI_OSS">阿里OSS</Radio>
|
||||
<Radio label="MINIO">MINIO</Radio>
|
||||
|
|
@ -11,68 +11,68 @@
|
|||
</RadioGroup>
|
||||
</FormItem>
|
||||
<!-- 阿里云存储-->
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" label="节点" prop="aliyunOSSEndPoint">
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSEndPoint" label="节点" prop="aliyunOSSEndPoint">
|
||||
<Input v-model="formValidate.aliyunOSSEndPoint"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" label="储存空间" class="label-item" prop="aliyunOSSBucketName">
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSBucketName" label="储存空间" class="label-item" prop="aliyunOSSBucketName">
|
||||
<Input v-model="formValidate.aliyunOSSBucketName"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" label="存放路径路径" prop="aliyunOSSPicLocation">
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSPicLocation" label="存放路径路径" prop="aliyunOSSPicLocation">
|
||||
<Input v-model="formValidate.aliyunOSSPicLocation"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" label="密钥id" prop="aliyunOSSAccessKeyId">
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeyId" label="密钥id" prop="aliyunOSSAccessKeyId">
|
||||
<Input v-model="formValidate.aliyunOSSAccessKeyId"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" label="密钥" prop="aliyunOSSAccessKeySecret">
|
||||
<FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeySecret" label="密钥" prop="aliyunOSSAccessKeySecret">
|
||||
<Input v-model="formValidate.aliyunOSSAccessKeySecret"/>
|
||||
</FormItem>
|
||||
|
||||
|
||||
<!-- MINIO存储-->
|
||||
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="访问地址" prop="m_frontUrl">
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="访问地址" key="m_frontUrl" prop="m_frontUrl">
|
||||
<Input v-model="formValidate.m_frontUrl"/>
|
||||
<span class="desc">配置MINIO nginx前端访问转发地址，一般为完整域名，例如：https://minio.pickmall.cn</span>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="endpoint" prop="m_endpoint">
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="endpoint" key="m_endpoint" prop="m_endpoint">
|
||||
<Input v-model="formValidate.m_endpoint"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="accessKey" class="label-item" prop="m_accessKey">
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="accessKey" key="m_accessKey" class="label-item" prop="m_accessKey">
|
||||
<Input v-model="formValidate.m_accessKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="secretKey" prop="bucketName">
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="secretKey" key="m_secretKey" prop="m_secretKey">
|
||||
<Input v-model="formValidate.m_secretKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="bucketName" prop="accessKeyId">
|
||||
<FormItem v-if="formValidate.type==='MINIO'" label="bucketName" key="m_bucketName" prop="m_bucketName">
|
||||
<Input v-model="formValidate.m_bucketName"/>
|
||||
</FormItem>
|
||||
|
||||
|
||||
<!-- 华为云存储-->
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="发起者的Access Key" prop="huaweicloudOBSAccessKey">
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="发起者的Access Key" key="huaweicloudOBSAccessKey" prop="huaweicloudOBSAccessKey">
|
||||
<Input v-model="formValidate.huaweicloudOBSAccessKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="密钥" class="label-item" prop="huaweicloudOBSSecretKey">
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="密钥" class="label-item" key="huaweicloudOBSSecretKey" prop="huaweicloudOBSSecretKey">
|
||||
<Input v-model="formValidate.huaweicloudOBSSecretKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="节点" prop="huaweicloudOBSEndPoint">
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="节点" key="huaweicloudOBSEndPoint" prop="huaweicloudOBSEndPoint">
|
||||
<Input v-model="formValidate.huaweicloudOBSEndPoint"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="桶" prop="huaweicloudOBSBucketName">
|
||||
<FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="桶" key="huaweicloudOBSBucketName" prop="huaweicloudOBSBucketName">
|
||||
<Input v-model="formValidate.huaweicloudOBSBucketName"/>
|
||||
</FormItem>
|
||||
|
||||
<!-- 腾讯云存储-->
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretId" prop="tencentCOSSecretId">
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretId" key="tencentCOSSecretId" prop="tencentCOSSecretId">
|
||||
<Input v-model="formValidate.tencentCOSSecretId"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretKey" class="label-item" prop="tencentCOSSecretKey">
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretKey" key="tencentCOSSecretKey" class="label-item" prop="tencentCOSSecretKey">
|
||||
<Input v-model="formValidate.tencentCOSSecretKey"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket的地域" prop="tencentCOSRegion">
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket的地域" key="tencentCOSRegion" prop="tencentCOSRegion">
|
||||
<Input v-model="formValidate.tencentCOSRegion"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket" prop="tencentCOSBucket">
|
||||
<FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket" key="tencentCOSBucket" prop="tencentCOSBucket">
|
||||
<Input v-model="formValidate.tencentCOSBucket"/>
|
||||
</FormItem>
|
||||
|
||||
|
|
@ -179,3 +179,4 @@ export default {
|
|||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
<dl v-if="params.serviceStatus == 'PASS'">
|
||||
<dt>实际退款金额</dt>
|
||||
<dd>
|
||||
<Input v-model="params.actualRefundPrice" style="width:260px" />
|
||||
<InputNumber :min="0" v-model="params.actualRefundPrice" style="width:260px" />
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
|
|||
|
|
@ -487,7 +487,7 @@ export default {
|
|||
liliMap,
|
||||
region,
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
typeList: [],
|
||||
showPrices: false,
|
||||
|
|
@ -693,27 +693,27 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
//修改地址
|
||||
regionClick() {
|
||||
regionClick () {
|
||||
this.showRegion = true;
|
||||
this.regionId = "";
|
||||
},
|
||||
//弹出订单核销框
|
||||
orderTake() {
|
||||
orderTake () {
|
||||
this.orderTakeForm.qrCode = this.orderInfo.order.verificationCode;
|
||||
this.orderTakeModal = true;
|
||||
},
|
||||
//打印发货单
|
||||
printOrder() {
|
||||
printOrder () {
|
||||
this.printModal = true;
|
||||
},
|
||||
printHiddenInfo() {
|
||||
printHiddenInfo () {
|
||||
this.printHiddenFlag = !this.printHiddenFlag;
|
||||
},
|
||||
printCancel() {
|
||||
printCancel () {
|
||||
// this.printHiddenFlag = false;
|
||||
},
|
||||
//订单核销提交
|
||||
orderTakeSubmit() {
|
||||
orderTakeSubmit () {
|
||||
this.$refs.orderTakeForm.validate((valid) => {
|
||||
if (valid) {
|
||||
API_Order.orderTake(this.sn, this.orderTakeForm.qrCode).then(
|
||||
|
|
@ -728,14 +728,14 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
getOrderPrice() {
|
||||
getOrderPrice () {
|
||||
if (this.showPrices) {
|
||||
this.showPrices = false
|
||||
} else if (!this.showPrices) {
|
||||
this.showPrices = true
|
||||
}
|
||||
},
|
||||
getContentPrice() {
|
||||
getContentPrice () {
|
||||
for (let i = 0; i < this.typeList.length; i++) {
|
||||
for (let j = i + 1; j < this.typeList.length; j++) {
|
||||
if (this.typeList[i].promotionId === this.typeList[j].promotionId) {
|
||||
|
|
@ -751,7 +751,7 @@ export default {
|
|||
}
|
||||
},
|
||||
//获取订单详细信息
|
||||
getDataDetail() {
|
||||
getDataDetail () {
|
||||
this.loading = true;
|
||||
API_Order.getOrderDetail(this.sn).then((res) => {
|
||||
this.loading = false;
|
||||
|
|
@ -766,7 +766,7 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
Toprint() {
|
||||
Toprint () {
|
||||
this.facesheetFlag = true;
|
||||
API_Logistics.getCheckedOn().then(res => {
|
||||
if (res.success) {
|
||||
|
|
@ -776,13 +776,13 @@ export default {
|
|||
});
|
||||
},
|
||||
// 修改订单金额
|
||||
modifyPrice() {
|
||||
modifyPrice () {
|
||||
//默认要修改的金额为订单总金额
|
||||
this.modifyPriceForm.orderPrice = this.orderInfo.order.flowPrice;
|
||||
this.modal = true;
|
||||
},
|
||||
//修改订单金额提交
|
||||
modifyPriceSubmit() {
|
||||
modifyPriceSubmit () {
|
||||
this.$refs.modifyPriceForm.validate((valid) => {
|
||||
if (valid) {
|
||||
API_Order.modifyOrderPrice(this.sn, this.modifyPriceForm).then(
|
||||
|
|
@ -798,12 +798,12 @@ export default {
|
|||
});
|
||||
},
|
||||
// 选中的地址
|
||||
selectedRegion(val) {
|
||||
selectedRegion (val) {
|
||||
this.region = val[1];
|
||||
this.regionId = val[0];
|
||||
},
|
||||
//查询物流
|
||||
logistics() {
|
||||
logistics () {
|
||||
this.logisticsModal = true;
|
||||
API_Order.getTraces(this.sn).then((res) => {
|
||||
if (res.success && res.result != null) {
|
||||
|
|
@ -812,7 +812,7 @@ export default {
|
|||
});
|
||||
},
|
||||
//订单发货
|
||||
orderDeliver() {
|
||||
orderDeliver () {
|
||||
this.facesheetFlag = false
|
||||
if (this.logisticsType == 'SHUNFENG') {
|
||||
this.$Modal.confirm({
|
||||
|
|
@ -839,7 +839,7 @@ export default {
|
|||
}
|
||||
},
|
||||
//顺丰打印面单
|
||||
sfPrint() {
|
||||
sfPrint () {
|
||||
API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => {
|
||||
if (res.success) {
|
||||
let headers = {
|
||||
|
|
@ -869,13 +869,13 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
Toprints() {
|
||||
Toprints () {
|
||||
if (this.form.logisticsId != null && this.form.logisticsId != '') {
|
||||
this.orderDeliverModal = false;
|
||||
}
|
||||
},
|
||||
//订单发货提交
|
||||
orderDeliverySubmit() {
|
||||
orderDeliverySubmit () {
|
||||
if (this.facesheetFlag) {
|
||||
this.$refs['faceSheetForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
|
|
@ -904,7 +904,7 @@ export default {
|
|||
}
|
||||
},
|
||||
//弹出修改收货地址框
|
||||
editAddress() {
|
||||
editAddress () {
|
||||
this.addressModal = true;
|
||||
this.showRegion = false;
|
||||
this.regionId = this.orderInfo.order.consigneeAddressIdPath;
|
||||
|
|
@ -918,7 +918,7 @@ export default {
|
|||
this.orderInfo.order.consigneeAddressIdPath;
|
||||
},
|
||||
//修改收货地址
|
||||
editAddressSubmit() {
|
||||
editAddressSubmit () {
|
||||
if (this.regionId == "") {
|
||||
this.$Message.error("请选择地址");
|
||||
return;
|
||||
|
|
@ -940,7 +940,7 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
getLogisticsSetting() {
|
||||
getLogisticsSetting () {
|
||||
API_Logistics.getLogisticsSetting().then(res => {
|
||||
if (res.success) {
|
||||
this.logisticsType = res.result;
|
||||
|
|
@ -949,13 +949,13 @@ export default {
|
|||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.sn = this.$route.query.sn;
|
||||
this.getDataDetail();
|
||||
this.getLogisticsSetting();
|
||||
},
|
||||
// 如果是从详情页返回列表页，修改列表页keepAlive为true，确保不刷新页面
|
||||
beforeRouteLeave(to, from, next) {
|
||||
beforeRouteLeave (to, from, next) {
|
||||
if (to.name === 'orderList' || to.name === 'virtualOrderList') {
|
||||
to.meta.keepAlive = true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,251 +6,101 @@
|
|||
<h4>基本信息</h4>
|
||||
<div class="form-item-view">
|
||||
<FormItem label="活动名称" prop="promotionName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.promotionName"
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
placeholder="活动名称"
|
||||
clearable
|
||||
style="width: 280px"
|
||||
/>
|
||||
<Input type="text" v-model="form.promotionName" :disabled="form.promotionStatus != 'NEW'" placeholder="活动名称"
|
||||
clearable style="width: 280px" />
|
||||
</FormItem>
|
||||
<FormItem label="活动时间" prop="rangeTime">
|
||||
<DatePicker
|
||||
type="datetimerange"
|
||||
v-model="form.rangeTime"
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择"
|
||||
:options="options"
|
||||
style="width: 280px"
|
||||
>
|
||||
<DatePicker type="datetimerange" v-model="form.rangeTime" :disabled="form.promotionStatus != 'NEW'"
|
||||
format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :options="options" style="width: 280px">
|
||||
</DatePicker>
|
||||
</FormItem>
|
||||
<FormItem label="活动描述" prop="description">
|
||||
<Input
|
||||
v-model="form.description"
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
clearable
|
||||
style="width: 280px"
|
||||
/>
|
||||
<Input v-model="form.description" :disabled="form.promotionStatus != 'NEW'" type="textarea" :rows="4"
|
||||
clearable style="width: 280px" />
|
||||
</FormItem>
|
||||
</div>
|
||||
|
||||
<h4>优惠设置</h4>
|
||||
<div class="form-item-view">
|
||||
<FormItem label="优惠门槛" prop="fullMoney">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.fullMoney"
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
placeholder="优惠门槛"
|
||||
clearable
|
||||
style="width: 280px"
|
||||
/>
|
||||
<Input type="text" v-model="form.fullMoney" :disabled="form.promotionStatus != 'NEW'" placeholder="优惠门槛"
|
||||
clearable style="width: 280px" />
|
||||
<span class="describe">消费达到当前金额可以参与优惠</span>
|
||||
</FormItem>
|
||||
<FormItem label="优惠方式">
|
||||
<RadioGroup
|
||||
type="button"
|
||||
button-style="solid"
|
||||
v-model="form.discountType"
|
||||
>
|
||||
<Radio
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
label="fullMinusFlag"
|
||||
>减现金</Radio
|
||||
>
|
||||
<Radio
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
label="fullRateFlag"
|
||||
>打折</Radio
|
||||
>
|
||||
<RadioGroup type="button" button-style="solid" v-model="form.discountType">
|
||||
<Radio :disabled="form.promotionStatus != 'NEW'" label="fullMinusFlag">减现金</Radio>
|
||||
<Radio :disabled="form.promotionStatus != 'NEW'" label="fullRateFlag">打折</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
v-if="form.discountType == 'fullMinusFlag'"
|
||||
label="优惠金额"
|
||||
prop="fullMinus"
|
||||
>
|
||||
<Input
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
type="text"
|
||||
v-model="form.fullMinus"
|
||||
placeholder="优惠金额"
|
||||
clearable
|
||||
style="width: 280px"
|
||||
/>
|
||||
<FormItem v-if="form.discountType == 'fullMinusFlag'" label="优惠金额" prop="fullMinus">
|
||||
<Input :disabled="form.promotionStatus != 'NEW'" type="text" v-model="form.fullMinus" placeholder="优惠金额"
|
||||
clearable style="width: 280px" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
v-if="form.discountType == 'fullRateFlag'"
|
||||
label="优惠折扣"
|
||||
prop="fullRate"
|
||||
>
|
||||
<Input
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
type="text"
|
||||
v-model="form.fullRate"
|
||||
placeholder="优惠折扣"
|
||||
clearable
|
||||
style="width: 280px"
|
||||
/>
|
||||
<FormItem v-if="form.discountType == 'fullRateFlag'" label="优惠折扣" prop="fullRate">
|
||||
<Input :disabled="form.promotionStatus != 'NEW'" type="text" v-model="form.fullRate" placeholder="优惠折扣"
|
||||
clearable style="width: 280px" />
|
||||
<span class="describe">优惠折扣为0-10之间数字，可有一位小数</span>
|
||||
</FormItem>
|
||||
<FormItem label="额外赠送">
|
||||
<Checkbox
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
v-model="form.freeFreightFlag"
|
||||
>免邮费</Checkbox
|
||||
>
|
||||
<Checkbox
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
v-model="form.couponFlag"
|
||||
>送优惠券</Checkbox
|
||||
>
|
||||
<Checkbox
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
v-model="form.giftFlag"
|
||||
>送赠品</Checkbox
|
||||
>
|
||||
<Checkbox
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
v-if="
|
||||
Cookies.get('userInfoSeller') &&
|
||||
JSON.parse(Cookies.get('userInfoSeller')).selfOperated
|
||||
"
|
||||
v-model="form.pointFlag"
|
||||
>送积分</Checkbox
|
||||
>
|
||||
<Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.freeFreightFlag">免邮费</Checkbox>
|
||||
<Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.couponFlag">送优惠券</Checkbox>
|
||||
<Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.giftFlag">送赠品</Checkbox>
|
||||
<Checkbox :disabled="form.promotionStatus != 'NEW'" v-if="Cookies.get('userInfoSeller') &&
|
||||
JSON.parse(Cookies.get('userInfoSeller')).selfOperated
|
||||
" v-model="form.pointFlag">送积分</Checkbox>
|
||||
</FormItem>
|
||||
<FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
|
||||
<Select
|
||||
v-model="form.couponId"
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
filterable
|
||||
:remote-method="getCouponList"
|
||||
placeholder="输入优惠券名称搜索"
|
||||
:loading="couponLoading"
|
||||
style="width: 280px"
|
||||
>
|
||||
<Option
|
||||
v-for="item in couponList"
|
||||
:value="item.id"
|
||||
:key="item.id"
|
||||
>{{ item.couponName }}</Option
|
||||
>
|
||||
<Select v-model="form.couponId" :disabled="form.promotionStatus != 'NEW'" filterable
|
||||
:remote-method="getCouponList" placeholder="输入优惠券名称搜索" :loading="couponLoading" style="width: 280px">
|
||||
<Option v-for="item in couponList" :value="item.id" :key="item.id">{{ item.couponName }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem v-if="form.giftFlag" label="赠品" prop="giftId">
|
||||
<Select
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
v-model="form.giftId"
|
||||
filterable
|
||||
:remote-method="getGiftList"
|
||||
placeholder="输入赠品名称搜索"
|
||||
:loading="giftLoading"
|
||||
style="width: 280px"
|
||||
>
|
||||
<Option
|
||||
v-for="item in giftList"
|
||||
:value="item.id"
|
||||
:key="item.id"
|
||||
>
|
||||
<Select :disabled="form.promotionStatus != 'NEW'" v-model="form.giftId" filterable
|
||||
:remote-method="getGiftList" placeholder="输入赠品名称搜索" :loading="giftLoading" style="width: 280px">
|
||||
<Option v-for="item in giftList" :value="item.id" :key="item.id">
|
||||
{{ item.goodsName }}
|
||||
</Option
|
||||
>
|
||||
</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem v-if="form.pointFlag" label="赠积分" prop="point">
|
||||
<InputNumber
|
||||
:min="0"
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
v-model="form.point"
|
||||
type="number"
|
||||
style="width: 280px"
|
||||
/>
|
||||
<InputNumber :min="0" :disabled="form.promotionStatus != 'NEW'" v-model="form.point" type="number"
|
||||
style="width: 280px" />
|
||||
</FormItem>
|
||||
<FormItem label="使用范围" prop="scopeType">
|
||||
<RadioGroup
|
||||
type="button"
|
||||
button-style="solid"
|
||||
v-model="form.scopeType"
|
||||
>
|
||||
<Radio :disabled="form.promotionStatus != 'NEW'" label="ALL"
|
||||
>全品类</Radio
|
||||
>
|
||||
<Radio
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
label="PORTION_GOODS"
|
||||
>指定商品</Radio
|
||||
>
|
||||
<RadioGroup type="button" button-style="solid" v-model="form.scopeType">
|
||||
<Radio :disabled="form.promotionStatus != 'NEW'" label="ALL">全品类</Radio>
|
||||
<Radio :disabled="form.promotionStatus != 'NEW'" label="PORTION_GOODS">指定商品</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
style="width: 100%"
|
||||
v-if="form.scopeType == 'PORTION_GOODS'"
|
||||
>
|
||||
<div
|
||||
style="display: flex; margin-bottom: 10px"
|
||||
v-if="form.promotionStatus == 'NEW'"
|
||||
>
|
||||
<FormItem style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
|
||||
<div style="display: flex; margin-bottom: 10px" v-if="form.promotionStatus == 'NEW'">
|
||||
<Button type="primary" @click="openSkuList">选择商品</Button>
|
||||
<Button
|
||||
type="error"
|
||||
ghost
|
||||
style="margin-left: 10px"
|
||||
@click="delSelectGoods"
|
||||
>批量删除</Button
|
||||
>
|
||||
<Button type="error" ghost style="margin-left: 10px" @click="delSelectGoods">批量删除</Button>
|
||||
</div>
|
||||
<Table
|
||||
border
|
||||
:columns="columns"
|
||||
:data="form.promotionGoodsList"
|
||||
@on-selection-change="changeSelect"
|
||||
>
|
||||
<Table border :columns="columns" :data="form.promotionGoodsList" @on-selection-change="changeSelect">
|
||||
<template slot-scope="{ row }" slot="QRCode">
|
||||
<img
|
||||
:src="row.QRCode || '../../../assets/lili.png'"
|
||||
width="50px"
|
||||
height="50px"
|
||||
alt=""
|
||||
/>
|
||||
<img :src="row.QRCode || '../../../assets/lili.png'" width="50px" height="50px" alt="" />
|
||||
</template>
|
||||
<template slot-scope="{ index }" slot="action">
|
||||
<Button
|
||||
type="error"
|
||||
:disabled="form.promotionStatus != 'NEW' && !!id"
|
||||
size="small"
|
||||
ghost
|
||||
@click="delGoods(index)"
|
||||
>删除</Button
|
||||
>
|
||||
<Button type="error" :disabled="form.promotionStatus != 'NEW' && !!id" size="small" ghost
|
||||
@click="delGoods(index)">删除</Button>
|
||||
</template>
|
||||
</Table>
|
||||
</FormItem>
|
||||
|
||||
<div>
|
||||
<Button type="text" @click="closeCurrentPage">返回</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
:disabled="form.promotionStatus != 'NEW' && !!id"
|
||||
:loading="submitLoading"
|
||||
@click="handleSubmit"
|
||||
>提交</Button
|
||||
>
|
||||
<Button type="primary" :disabled="form.promotionStatus != 'NEW' && !!id" :loading="submitLoading"
|
||||
@click="handleSubmit">提交</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
<sku-select
|
||||
ref="skuSelect"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></sku-select>
|
||||
<sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -270,7 +120,7 @@ export default {
|
|||
components: {
|
||||
skuSelect,
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
const checkPrice = (rule, value, callback) => {
|
||||
if (!value && value !== 0) {
|
||||
return callback(new Error("面额不能为空"));
|
||||
|
|
@ -369,29 +219,31 @@ export default {
|
|||
},
|
||||
],
|
||||
options: {
|
||||
disabledDate(date) {
|
||||
disabledDate (date) {
|
||||
return date && date.valueOf() < Date.now() - 86400000;
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
async mounted () {
|
||||
if (this.id) {
|
||||
this.getDetail();
|
||||
this.columns.shift()
|
||||
this.columns.pop()
|
||||
}
|
||||
await this.getCouponList();
|
||||
await this.getGiftList();
|
||||
},
|
||||
methods: {
|
||||
// 关闭当前页面
|
||||
closeCurrentPage() {
|
||||
closeCurrentPage () {
|
||||
this.$store.commit("removeTag", "full-cut-detail");
|
||||
localStorage.storeOpenedList = JSON.stringify(
|
||||
this.$store.state.app.storeOpenedList
|
||||
);
|
||||
this.$router.go(-1);
|
||||
},
|
||||
openSkuList() {
|
||||
openSkuList () {
|
||||
// 显示商品选择器
|
||||
this.$refs.skuSelect.open("goods");
|
||||
let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
|
||||
|
|
@ -400,7 +252,7 @@ export default {
|
|||
});
|
||||
this.$refs.skuSelect.goodsData = data;
|
||||
},
|
||||
getDetail() {
|
||||
getDetail () {
|
||||
// 获取活动详情
|
||||
getFullDiscountById(this.id).then((res) => {
|
||||
console.log(res);
|
||||
|
|
@ -422,7 +274,7 @@ export default {
|
|||
});
|
||||
},
|
||||
/** 保存 */
|
||||
handleSubmit() {
|
||||
handleSubmit () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const params = JSON.parse(JSON.stringify(this.form));
|
||||
|
|
@ -489,11 +341,11 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
changeSelect(e) {
|
||||
changeSelect (e) {
|
||||
// 已选商品批量选择
|
||||
this.selectedGoods = e;
|
||||
},
|
||||
delSelectGoods() {
|
||||
delSelectGoods () {
|
||||
// 多选删除商品
|
||||
if (this.selectedGoods.length <= 0) {
|
||||
this.$Message.warning("您还未选择要删除的数据");
|
||||
|
|
@ -515,11 +367,11 @@ export default {
|
|||
},
|
||||
});
|
||||
},
|
||||
delGoods(index) {
|
||||
delGoods (index) {
|
||||
// 删除商品
|
||||
this.form.promotionGoodsList.splice(index, 1);
|
||||
},
|
||||
selectedGoodsData(item) {
|
||||
selectedGoodsData (item) {
|
||||
// 回显已选商品
|
||||
let list = [];
|
||||
item.forEach((e) => {
|
||||
|
|
@ -535,7 +387,7 @@ export default {
|
|||
});
|
||||
this.form.promotionGoodsList = list;
|
||||
},
|
||||
getCouponList(query) {
|
||||
getCouponList (query) {
|
||||
// 优惠券列表
|
||||
let params = {
|
||||
pageSize: 10,
|
||||
|
|
@ -552,7 +404,7 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
getGiftList(query) {
|
||||
getGiftList (query) {
|
||||
// 赠品列表
|
||||
let params = {
|
||||
pageSize: 10,
|
||||
|
|
@ -586,11 +438,13 @@ h4 {
|
|||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.describe {
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ivu-form-item {
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,12 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<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="活动名称">
|
||||
<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>
|
||||
|
|
@ -31,13 +14,7 @@
|
|||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="活动时间">
|
||||
<DatePicker
|
||||
v-model="selectDate"
|
||||
type="daterange"
|
||||
clearable
|
||||
placeholder="选择起始时间"
|
||||
style="width: 200px"
|
||||
>
|
||||
<DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px">
|
||||
</DatePicker>
|
||||
</Form-item>
|
||||
<Form-item>
|
||||
|
|
@ -60,54 +37,21 @@
|
|||
</template>
|
||||
<template slot-scope="{ row }" slot="action">
|
||||
<div>
|
||||
<Button
|
||||
type="primary"
|
||||
v-if="row.promotionStatus == 'NEW'"
|
||||
size="small"
|
||||
@click="edit(row)"
|
||||
>编辑</Button
|
||||
>
|
||||
<Button type="primary" v-if="row.promotionStatus == 'NEW'" size="small" @click="edit(row)">编辑</Button>
|
||||
<Button type="info" v-else size="small" @click="edit(row)">查看</Button>
|
||||
<Button
|
||||
type="success"
|
||||
v-if="row.promotionStatus === 'START'"
|
||||
style="margin-left: 5px"
|
||||
size="small"
|
||||
@click="openOrClose(row)"
|
||||
>关闭</Button
|
||||
>
|
||||
<Button
|
||||
type="success"
|
||||
v-if="row.promotionStatus === 'CLOSE'"
|
||||
style="margin-left: 5px"
|
||||
size="small"
|
||||
@click="openOrClose(row)"
|
||||
>开启</Button
|
||||
>
|
||||
<Button
|
||||
type="error"
|
||||
:disabled="row.promotionStatus == 'START'"
|
||||
style="margin-left: 5px"
|
||||
size="small"
|
||||
@click="del(row)"
|
||||
>删除</Button
|
||||
>
|
||||
<Button type="success" v-if="row.promotionStatus === 'START'" style="margin-left: 5px" size="small"
|
||||
@click="openOrClose(row)">关闭</Button>
|
||||
<Button type="success" v-if="row.promotionStatus === 'CLOSE'" style="margin-left: 5px" size="small"
|
||||
@click="openOrClose(row)">开启</Button>
|
||||
<Button type="error" :disabled="row.promotionStatus == 'START'" style="margin-left: 5px" size="small"
|
||||
@click="del(row)">删除</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Table>
|
||||
<Row type="flex" justify="end" class="page operation">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
: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" :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>
|
||||
|
|
@ -120,7 +64,7 @@ import {
|
|||
} from "@/api/promotion.js";
|
||||
export default {
|
||||
name: "full-cut",
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
total: 0,
|
||||
selectDate: [],
|
||||
|
|
@ -198,31 +142,31 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
// 改变页码
|
||||
newAct() {
|
||||
newAct () {
|
||||
this.$router.push({ name: "full-discount-detail" });
|
||||
},
|
||||
// 初始化数据
|
||||
init() {
|
||||
init () {
|
||||
this.getDataList();
|
||||
},
|
||||
// 改变页数
|
||||
changePage(v) {
|
||||
changePage (v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 改变页码
|
||||
changePageSize(v) {
|
||||
changePageSize (v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
handleSearch () {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
handleReset () {
|
||||
this.selectDate = "";
|
||||
this.searchForm = {};
|
||||
this.searchForm.pageNumber = 1;
|
||||
|
|
@ -230,11 +174,11 @@ export default {
|
|||
this.getDataList();
|
||||
},
|
||||
// 编辑
|
||||
edit(row) {
|
||||
edit (row) {
|
||||
this.$router.push({ name: "full-discount-detail", query: { id: row.id } });
|
||||
},
|
||||
// 删除
|
||||
del(row) {
|
||||
del (row) {
|
||||
this.$Modal.confirm({
|
||||
title: "提示",
|
||||
// 记得确认修改此处
|
||||
|
|
@ -253,7 +197,7 @@ export default {
|
|||
});
|
||||
},
|
||||
// 开启或关闭活动
|
||||
openOrClose(row) {
|
||||
openOrClose (row) {
|
||||
let name = "开启";
|
||||
let status = "START";
|
||||
if (row.promotionStatus === "START") {
|
||||
|
|
@ -325,7 +269,7 @@ export default {
|
|||
}
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
getDataList () {
|
||||
this.loading = true;
|
||||
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
|
||||
this.searchForm.startTime = this.selectDate[0].getTime();
|
||||
|
|
@ -343,17 +287,19 @@ export default {
|
|||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.init();
|
||||
},
|
||||
// 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
|
||||
beforeRouteLeave(to, from, next) {
|
||||
beforeRouteLeave (to, from, next) {
|
||||
from.meta.keepAlive = false;
|
||||
next();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/table-common.scss";
|
||||
|
||||
.operation {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,20 +14,14 @@
|
|||
</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" class="search-btn">搜索</Button>
|
||||
<Button @click="handleReset" class="ml_10">重置</Button>
|
||||
</Form>
|
||||
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
ref="table"
|
||||
class="mt_10"
|
||||
>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
|
||||
<template slot-scope="{ row }" slot="applyEndTime">
|
||||
{{ unixDate(row.applyEndTime) }}
|
||||
</template>
|
||||
|
|
@ -37,25 +31,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 type="flex" justify="end" class="mt_10">
|
||||
<Page :current="searchForm.pageNumber" :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" :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>
|
||||
|
|
@ -66,9 +49,9 @@ import { seckillList } from "@/api/promotion";
|
|||
export default {
|
||||
name: "seckill",
|
||||
components: {},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
selectDate:[],
|
||||
selectDate: [],
|
||||
loading: true, // 表单加载状态
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
|
|
@ -141,27 +124,27 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
init () {
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePage(v) {
|
||||
changePage (v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
changePageSize (v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.getDataList();
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
handleSearch () {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getDataList();
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
handleReset () {
|
||||
this.searchForm = {};
|
||||
this.selectDate = "";
|
||||
this.searchForm.pageNumber = 1;
|
||||
|
|
@ -169,11 +152,11 @@ export default {
|
|||
this.getDataList();
|
||||
},
|
||||
// 管理
|
||||
manage(row) {
|
||||
manage (row) {
|
||||
this.$router.push({ name: "seckill-goods", query: { id: row.id } });
|
||||
},
|
||||
// 获取列表数据
|
||||
getDataList() {
|
||||
getDataList () {
|
||||
this.loading = true;
|
||||
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
|
||||
this.searchForm.startTime = this.selectDate[0].getTime();
|
||||
|
|
@ -191,11 +174,11 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
unixDate(time) {
|
||||
unixDate (time) {
|
||||
// 处理报名截止时间
|
||||
return this.$options.filters.unixToDate(new Date(time) / 1000);
|
||||
},
|
||||
unixHours(item) {
|
||||
unixHours (item) {
|
||||
// 处理小时场次
|
||||
let hourArr = item.split(",");
|
||||
for (let i = 0; i < hourArr.length; i++) {
|
||||
|
|
@ -204,16 +187,16 @@ export default {
|
|||
return hourArr;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.init();
|
||||
},
|
||||
// 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
|
||||
beforeRouteLeave(to, from, next) {
|
||||
beforeRouteLeave (to, from, next) {
|
||||
from.meta.keepAlive = false
|
||||
next()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "@/styles/table-common.scss";
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,657 @@
|
|||
.hz-m-wrap {
|
||||
position: relative;
|
||||
/*overflow: hidden;*/
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-u-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
/* max-height: 100%; */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-item {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 6px #000;
|
||||
background-color: #e31414;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.hz-m-box{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box>li {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box.hz-z-hidden>li {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box.hz-m-hoverbox:hover {
|
||||
box-shadow: 0 0 0 2px #373950;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box.hz-m-hoverbox .hz-icon:hover {
|
||||
background-color: #373950;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-icon:hover {
|
||||
background-color: #e31414;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-index {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: #000;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-m-copy {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-small-icon {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-square {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-square:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-square-tl {
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
cursor: nw-resize;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-square-tc {
|
||||
top: -4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-square-tr {
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
cursor: ne-resize;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-square-cl {
|
||||
top: 50%;
|
||||
left: -4px;
|
||||
transform: translateY(-50%);
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-square-cr {
|
||||
top: 50%;
|
||||
right: -4px;
|
||||
transform: translateY(-50%);
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-square-bl {
|
||||
bottom: -4px;
|
||||
left: -4px;
|
||||
cursor: sw-resize;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-square-bc {
|
||||
bottom: -4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
cursor: s-resize;
|
||||
}
|
||||
|
||||
.hz-m-wrap .hz-m-box .hz-u-square-br {
|
||||
bottom: -4px;
|
||||
right: -4px;
|
||||
cursor: se-resize;
|
||||
}
|
||||
|
||||
/* reset */
|
||||
.hz-m-modal,
|
||||
.hz-m-wrap {
|
||||
font-size: 12px;
|
||||
/* 清除内外边距 */
|
||||
/* 重置列表元素 */
|
||||
/* 重置文本格式元素 */
|
||||
/* 初始化 input */
|
||||
}
|
||||
|
||||
.hz-m-modal ul,
|
||||
.hz-m-wrap ul,
|
||||
.hz-m-modal ol,
|
||||
.hz-m-wrap ol,
|
||||
.hz-m-modal li,
|
||||
.hz-m-wrap li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hz-m-modal ul,
|
||||
.hz-m-wrap ul,
|
||||
.hz-m-modal ol,
|
||||
.hz-m-wrap ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hz-m-modal a,
|
||||
.hz-m-wrap a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hz-m-modal a:hover,
|
||||
.hz-m-wrap a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hz-m-modal p,
|
||||
.hz-m-wrap p {
|
||||
-webkit-margin-before: 0;
|
||||
-webkit-margin-after: 0;
|
||||
}
|
||||
|
||||
.hz-m-modal input[type="checkbox"],
|
||||
.hz-m-wrap input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* basic */
|
||||
/* modal 样式 */
|
||||
.hz-m-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
touch-action: cross-slide-y pinch-zoom double-tap-zoom;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hz-m-modal:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_dialog {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_close {
|
||||
float: right;
|
||||
margin: -6px -4px 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hz-m-modal .hz-modal_dialog {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
html.z-modal,
|
||||
html.z-modal body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hz-m-modal {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_dialog {
|
||||
width: 450px;
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_hd {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #f4f4f4;
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_close {
|
||||
margin: -15px -15px 0 0;
|
||||
padding: 6px;
|
||||
color: #bbb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_close:hover {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_close .hz-u-icon-close {
|
||||
font-size: 18px;
|
||||
transition: transform 500ms ease-in-out;
|
||||
transform: rotate(0deg);
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_close:hover .hz-u-icon-close {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_bd {
|
||||
padding: 15px 15px 0 15px;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_ft {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #f4f4f4;
|
||||
}
|
||||
|
||||
.hz-m-modal .hz-modal_ft .hz-u-btn {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hz-m-modal .hz-modal_dialog {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 基本按钮样式 btn */
|
||||
.hz-u-btn {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
overflow: visible;
|
||||
font: inherit;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hz-u-btn:hover,
|
||||
.hz-u-btn:focus {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hz-u-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.hz-u-btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hz-u-btn {
|
||||
padding: 0 16px;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
background: #f4f4f4;
|
||||
color: #444;
|
||||
border: 1px solid #ddd;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.hz-u-btn:hover,
|
||||
.hz-u-btn:focus {
|
||||
background: #e5e5e5;
|
||||
border: 1px solid #adadad;
|
||||
}
|
||||
|
||||
.hz-u-btn:active {
|
||||
background: #e5e5e5;
|
||||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.hz-u-btn:disabled {
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
filter: alpha(opacity=65);
|
||||
opacity: 0.65;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 按钮类型 */
|
||||
.hz-u-btn-primary {
|
||||
background: #67739b;
|
||||
color: #fff;
|
||||
border: 1px solid #67739b;
|
||||
}
|
||||
|
||||
.hz-u-btn-primary:hover,
|
||||
.hz-u-btn-primary:focus {
|
||||
background: #31384b;
|
||||
color: #fff;
|
||||
border: 1px solid #31384b;
|
||||
}
|
||||
|
||||
.hz-u-btn-primary:active {
|
||||
background: #367fa9;
|
||||
color: #fff;
|
||||
border: 1px solid #367fa9;
|
||||
}
|
||||
|
||||
.hz-u-btn-primary:disabled {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
/* input */
|
||||
.hz-u-input {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hz-u-input {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
padding: 5px 6px;
|
||||
border: 1px solid #d2d6de;
|
||||
color: #555;
|
||||
background: #fff;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.hz-u-input::-webkit-input-placeholder {
|
||||
color: #bbb;
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hz-u-input::-moz-placeholder {
|
||||
color: #bbb;
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hz-u-input:-moz-placeholder {
|
||||
color: #bbb;
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hz-u-input:-ms-placeholder {
|
||||
color: #bbb;
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hz-u-input:focus {
|
||||
outline: 0;
|
||||
background: #fff;
|
||||
color: #555;
|
||||
border: 1px solid #3c8dbc;
|
||||
}
|
||||
|
||||
.hz-u-input:disabled {
|
||||
cursor: not-allowed;
|
||||
background: #eee;
|
||||
color: #999;
|
||||
border: 1px solid #d2d6de;
|
||||
}
|
||||
|
||||
.hz-u-input {
|
||||
width: 280px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.hz-u-input.hz-u-input-success {
|
||||
color: #00a65a;
|
||||
border-color: #00a65a;
|
||||
}
|
||||
|
||||
.hz-u-input.hz-u-input-warning {
|
||||
color: #f39c12;
|
||||
border-color: #f39c12;
|
||||
}
|
||||
|
||||
.hz-u-input.hz-u-input-error {
|
||||
color: #dd4b39;
|
||||
border-color: #dd4b39;
|
||||
}
|
||||
|
||||
.hz-u-input.hz-u-input-blank {
|
||||
border-color: transparent;
|
||||
border-style: dashed;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.hz-u-input.hz-u-input-blank:focus {
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
/* formItem */
|
||||
.hz-u-formitem {
|
||||
display: inline-block;
|
||||
*zoom: 1;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.hz-u-formitem:before,
|
||||
.hz-u-formitem:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.hz-u-formitem:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.hz-u-formitem .hz-formitem_tt {
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hz-u-formitem .hz-formitem_ct {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hz-u-formitem .hz-formitem_rqr {
|
||||
line-height: 28px;
|
||||
color: #dd4b39;
|
||||
}
|
||||
|
||||
.hz-u-formitem .hz-formitem_tt {
|
||||
line-height: 34px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.hz-u-formitem .hz-formitem_ct {
|
||||
line-height: 34px;
|
||||
margin-left: 108px;
|
||||
}
|
||||
|
||||
/* icon */
|
||||
.hz-u-icon {
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* label */
|
||||
.hz-u-label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* margin */
|
||||
.hz-f-ml0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* replicator */
|
||||
.hz-u-copy input[data-for-copy] {
|
||||
transform: translateZ(0);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
z-index: -999;
|
||||
color: transparent;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
/* project id 525460 */
|
||||
src: url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.eot');
|
||||
src: url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.woff') format('woff'), url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.ttf') format('truetype'), url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.svg#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.hz-icon {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.hz-icon-edit {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.hz-flex-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hz-flex-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hz-icon-trash:before {
|
||||
content: "\e605";
|
||||
}
|
||||
|
||||
.hz-edit-img {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.hz-edit-img img {
|
||||
max-width: 300px;
|
||||
max-height: 200px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hz-edit-del {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
<template>
|
||||
<div class="hotzone-box">
|
||||
<div class="hotzone-item">
|
||||
<div ref="content" class="hz-m-wrap">
|
||||
<img class="hz-u-img" :src="image" />
|
||||
<ul class="hz-m-area" v-add-item>
|
||||
<zone
|
||||
class="hz-m-item"
|
||||
v-for="(zone, index) in zones"
|
||||
:key="index"
|
||||
:index="index"
|
||||
:setting="zone"
|
||||
:ref="`zone${index}`"
|
||||
@delItem="removeItem($event)"
|
||||
@changeInfo="changeInfo($event)"
|
||||
></zone>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="hotzone-add-box-body">
|
||||
<div
|
||||
v-for="(zone, index) in zones"
|
||||
:key="index"
|
||||
class="hotzone-box-item-main"
|
||||
>
|
||||
<div class="hotzone-box-item wes-2">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div @click="editZone(index)">
|
||||
<div class="hotzone-box-item-text">
|
||||
{{ showZoneText(zone) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="hotzone-btn" @click="editZone(index)">修改</div>
|
||||
|
||||
<div class="hotzone-btn" @click="delZone(index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hotzone-add-box-footer" @click="addHotzone">
|
||||
<svg
|
||||
viewBox="64 64 896 896"
|
||||
focusable="false"
|
||||
class=""
|
||||
data-icon="plus"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
|
||||
></path>
|
||||
<path
|
||||
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
|
||||
></path>
|
||||
</svg>
|
||||
<div class="hotzone-add-box-text">添加热区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Zone from "./Zone";
|
||||
import addItem from "../directives/addItem";
|
||||
|
||||
export default {
|
||||
name: "HotZone",
|
||||
data() {
|
||||
return {
|
||||
zones: [],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
image: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
zonesInit: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.zones = this.zonesInit.concat();
|
||||
},
|
||||
methods: {
|
||||
async addHotzone() {
|
||||
let perInfo = {
|
||||
topPer: 0.15,
|
||||
leftPer: 0.3,
|
||||
widthPer: 0.2,
|
||||
heightPer: 0.2,
|
||||
img: "",
|
||||
link: "",
|
||||
type: "",
|
||||
title: "",
|
||||
};
|
||||
let images = await this.getImageSize(this.image);
|
||||
if (images) {
|
||||
if (images.height >= 1000) {
|
||||
perInfo.heightPer = this.convertNumberToDecimal(images.height) / (images.height / 1000);
|
||||
} else {
|
||||
perInfo.heightPer = this.convertNumberToDecimal(images.height);
|
||||
}
|
||||
perInfo.widthPer = this.convertNumberToDecimal(images.width) / 2;
|
||||
}
|
||||
this.addItem(perInfo);
|
||||
},
|
||||
convertNumberToDecimal(num) {
|
||||
if (num >= 10000) {
|
||||
return num / 100000;
|
||||
} else if (num >= 1000) {
|
||||
return num / 10000;
|
||||
} else if (num >= 100) {
|
||||
return num / 1000;
|
||||
} else if (num >= 10) {
|
||||
return num / 100;
|
||||
}
|
||||
},
|
||||
getImageSize(url) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
let image = new Image();
|
||||
image.onload = function () {
|
||||
resolve({
|
||||
width: image.width,
|
||||
height: image.height,
|
||||
});
|
||||
};
|
||||
image.onerror = function () {
|
||||
reject(new Error("error"));
|
||||
};
|
||||
image.src = url;
|
||||
});
|
||||
},
|
||||
editZone(index) {
|
||||
this.$refs[`zone${index}`][0].showModalFn(index);
|
||||
},
|
||||
delZone(index) {
|
||||
this.$refs[`zone${index}`][0].delItem(index);
|
||||
},
|
||||
showZoneText(zone) {
|
||||
switch (zone.type) {
|
||||
case "goods":
|
||||
return `商品：${zone.goodsName}`;
|
||||
case "category":
|
||||
return `分类：${zone.name}`;
|
||||
case "shops":
|
||||
return `店铺：${zone.storeName}`;
|
||||
case "pages":
|
||||
return `文章：${zone.title}`;
|
||||
case "marketing":
|
||||
return `促销活动商品：${zone.goodsName}`;
|
||||
case "other":
|
||||
return `${zone.title}`;
|
||||
default:
|
||||
return "请选择跳转链接";
|
||||
}
|
||||
},
|
||||
changeInfo(res) {
|
||||
let { info, index, zoneInfo } = res;
|
||||
info = { ...zoneInfo, ...info };
|
||||
// 改变热区并发送change通知
|
||||
Object.assign(this.zones[index], info);
|
||||
this.hasChange("changeInfo");
|
||||
this.$forceUpdate();
|
||||
},
|
||||
addItem(setting) {
|
||||
this.zones.push(setting);
|
||||
this.$emit("choose");
|
||||
// this.hasChange() 不应该发送通知，mouseup判定成功才应该发
|
||||
// this.$emit('add', setting)
|
||||
},
|
||||
eraseItem(index = this.zones.length - 1) {
|
||||
this.zones.splice(index, 1);
|
||||
this.$emit("erase", index);
|
||||
},
|
||||
isOverRange() {
|
||||
let { max, zones } = this;
|
||||
|
||||
return max && zones.length > max;
|
||||
},
|
||||
overRange() {
|
||||
const index = this.zones.length - 1;
|
||||
|
||||
this.zones.splice(index, 1);
|
||||
this.$emit("overRange", index);
|
||||
},
|
||||
removeItem(index = this.zones.length - 1) {
|
||||
this.zones.splice(index, 1);
|
||||
this.hasChange("removeItem");
|
||||
this.$emit("remove", index);
|
||||
},
|
||||
changeItem(info, isAdd) {
|
||||
const index = this.zones.length - 1;
|
||||
// 改变热区并发送change通知
|
||||
Object.assign(this.zones[index], info);
|
||||
this.hasChange("changeItem");
|
||||
isAdd && this.$emit("add", this.zones[index]);
|
||||
},
|
||||
hasChange(from) {
|
||||
this.$emit("change", this.zones);
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
addItem,
|
||||
},
|
||||
components: {
|
||||
Zone,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../assets/styles/main.css";
|
||||
.hotzone-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 468px;
|
||||
> div {
|
||||
margin: 6px;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
> div:nth-of-type(1) {
|
||||
// display: flex;
|
||||
width: 50%;
|
||||
overflow: auto;
|
||||
// justify-content: center;
|
||||
background: #ededed;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
width: 50%;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
}
|
||||
|
||||
.hotzone-add-box-body {
|
||||
height: 90%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.hotzone-box-item-main {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hotzone-box-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ededed;
|
||||
font-size: 12px;
|
||||
justify-content: space-between;
|
||||
padding: 5px 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hotzone-add-box-footer {
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: #ff5c58;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hotzone-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hotzone-box-item-text {
|
||||
width: 200px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hotzone-add-box-text {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,244 @@
|
|||
<template>
|
||||
<li
|
||||
v-drag-item
|
||||
:style="{
|
||||
top: zoneTop,
|
||||
left: zoneLeft,
|
||||
width: zoneWidth,
|
||||
height: zoneHeight,
|
||||
}"
|
||||
>
|
||||
<ul
|
||||
v-change-size
|
||||
class="hz-m-box"
|
||||
:class="{
|
||||
'hz-z-hidden': tooSmall,
|
||||
'hz-m-hoverbox': !hideZone,
|
||||
}"
|
||||
>
|
||||
<li class="hz-u-index" :title="`热区${index + 1}`">{{ index + 1 }}</li>
|
||||
|
||||
<li
|
||||
title="删除该热区"
|
||||
v-show="!hideZone"
|
||||
class="hz-u-close hz-icon hz-icon-trash"
|
||||
@click.prevent.stop="delItem(index)"
|
||||
@mousedown.stop
|
||||
@mouseup.stop
|
||||
@mousemove.stop
|
||||
></li>
|
||||
<li
|
||||
title="编辑该热区"
|
||||
v-show="!hideZone"
|
||||
class="hz-u-close hz-icon hz-icon-edit"
|
||||
@click.prevent.stop="showModalFn(index)"
|
||||
@mousedown.stop
|
||||
@mouseup.stop
|
||||
@mousemove.stop
|
||||
>
|
||||
<img width="17" height="17" src="../assets/styles/icons8-edit-64.png"></img>
|
||||
</li>
|
||||
<li class="hz-flex-img">
|
||||
<img class="hz-u-img" :src="zoneForm.img" />
|
||||
</li>
|
||||
<li class="hz-u-square hz-u-square-tl" data-pointer="dealTL"></li>
|
||||
<li class="hz-u-square hz-u-square-tc" data-pointer="dealTC"></li>
|
||||
<li class="hz-u-square hz-u-square-tr" data-pointer="dealTR"></li>
|
||||
<li class="hz-u-square hz-u-square-cl" data-pointer="dealCL"></li>
|
||||
<li class="hz-u-square hz-u-square-cr" data-pointer="dealCR"></li>
|
||||
<li class="hz-u-square hz-u-square-bl" data-pointer="dealBL"></li>
|
||||
<li class="hz-u-square hz-u-square-bc" data-pointer="dealBC"></li>
|
||||
<li class="hz-u-square hz-u-square-br" data-pointer="dealBR"></li>
|
||||
</ul>
|
||||
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="编辑热区"
|
||||
draggable
|
||||
scrollable
|
||||
:mask="false"
|
||||
ok-text="保存"
|
||||
@on-ok="saveZone"
|
||||
@on-cancel="cancelZone"
|
||||
>
|
||||
<div>
|
||||
<div class="hz-edit-img">
|
||||
<img class="show-image" :src="zoneForm.img" alt />
|
||||
</div>
|
||||
|
||||
<Form :model="zoneForm" :label-width="80">
|
||||
<!-- <FormItem label="图片链接：">
|
||||
<Input v-model="zoneForm.img"></Input>
|
||||
<Button size="small" type="primary" @click="handleSelectImg"
|
||||
>选择图片</Button
|
||||
>
|
||||
:v-model="zoneForm.type === 'goods' ? zoneForm.goodsName : zoneForm.link"
|
||||
</FormItem> -->
|
||||
<FormItem label="跳转链接：">
|
||||
<Input type="textarea" v-if="zoneForm.type === 'other' && zoneForm.title === '外部链接'" v-model="zoneForm.link" ></Input>
|
||||
<Button size="small" type="primary" @click="handleSelectLink"
|
||||
>选择链接</Button
|
||||
>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage
|
||||
@callback="callbackSelected"
|
||||
:isComponent="true"
|
||||
ref="ossManage"
|
||||
/>
|
||||
</Modal>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import changeSize from "../directives/changeSize";
|
||||
import dragItem from "../directives/dragItem";
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
|
||||
export default {
|
||||
name: "Zone",
|
||||
components: {
|
||||
ossManage,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
zoneTop: "",
|
||||
zoneLeft: "",
|
||||
zoneWidth: "",
|
||||
zoneHeight: "",
|
||||
hideZone: false,
|
||||
tooSmall: false,
|
||||
showModal: false,
|
||||
picModelFlag: false,
|
||||
currentIndex: 0,
|
||||
currentShowIndex: -1,
|
||||
zoneForm: {
|
||||
img: "",
|
||||
link: "",
|
||||
type: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
props: ["index", "setting"],
|
||||
mounted() {
|
||||
this.setZoneInfo(this.setting);
|
||||
},
|
||||
methods: {
|
||||
setZoneInfo(val) {
|
||||
this.zoneTop = this.getZoneStyle(val.topPer);
|
||||
this.zoneLeft = this.getZoneStyle(val.leftPer);
|
||||
this.zoneWidth = this.getZoneStyle(val.widthPer);
|
||||
this.zoneHeight = this.getZoneStyle(val.heightPer);
|
||||
this.tooSmall = val.widthPer < 0.01 && val.heightPer < 0.01;
|
||||
this.zoneForm.link = val.link;
|
||||
this.settingZone(val);
|
||||
},
|
||||
handlehideZone(isHide = true) {
|
||||
if (this.hideZone === isHide) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.hideZone = isHide;
|
||||
},
|
||||
changeInfo(info = {}) {
|
||||
const { index } = this;
|
||||
|
||||
this.$emit("changeInfo", {
|
||||
info,
|
||||
index,
|
||||
zoneInfo: this.zoneForm,
|
||||
});
|
||||
},
|
||||
showModalFn(index) {
|
||||
this.showModal = true;
|
||||
this.currentIndex = index;
|
||||
},
|
||||
// 选择图片
|
||||
handleSelectImg() {
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
},
|
||||
// 选择图片回调
|
||||
callbackSelected(item) {
|
||||
this.picModelFlag = false;
|
||||
this.zoneForm.img = item.url;
|
||||
},
|
||||
|
||||
// 调起选择链接弹窗
|
||||
handleSelectLink(item, index) {
|
||||
if (item) this.selectedNav = item;
|
||||
this.$refs.liliDialog.open("link");
|
||||
},
|
||||
// 已选链接
|
||||
selectedLink(val) {
|
||||
this.zoneForm.link = this.$options.filters.formatLinkType(val);
|
||||
this.settingZone(val);
|
||||
this.changeInfo(this.zoneForm);
|
||||
},
|
||||
settingZone(val) {
|
||||
this.zoneForm.type = val.___type || val.type;
|
||||
this.zoneForm.title = val.title;
|
||||
switch (val.___type) {
|
||||
case "goods":
|
||||
this.zoneForm.id = val.id;
|
||||
this.zoneForm.goodsId = val.goodsId;
|
||||
this.zoneForm.goodsName = val.goodsName;
|
||||
break;
|
||||
case "category":
|
||||
this.zoneForm.id = val.allId;
|
||||
this.zoneForm.name = val.name;
|
||||
break;
|
||||
case "shops":
|
||||
this.zoneForm.id = val.id;
|
||||
this.zoneForm.storeName = val.storeName;
|
||||
break;
|
||||
case "pages":
|
||||
this.zoneForm.id = val.id;
|
||||
this.zoneForm.___path = val.___path;
|
||||
this.zoneForm.title = val.title;
|
||||
break;
|
||||
case "marketing":
|
||||
this.zoneForm.id = val.id;
|
||||
this.zoneForm.goodsId = val.goodsId;
|
||||
this.zoneForm.goodsName = val.goodsName;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
saveZone() {},
|
||||
cancelZone() {
|
||||
this.showModal = false;
|
||||
},
|
||||
delZone() {
|
||||
this.delItem(this.currentIndex);
|
||||
},
|
||||
delItem(index) {
|
||||
this.$emit("delItem", index);
|
||||
},
|
||||
getZoneStyle(val) {
|
||||
return `${(val || 0) * 100}%`;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
setting: {
|
||||
handler: function (val) {
|
||||
this.setZoneInfo(val);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
changeSize,
|
||||
dragItem,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import _ from '../utils'
|
||||
|
||||
export default {
|
||||
bind: function (el, binding, vnode) {
|
||||
const MIN_LIMIT = _.MIN_LIMIT
|
||||
|
||||
el.addEventListener('mousedown', handleMouseDown, { passive: false })
|
||||
|
||||
function handleMouseDown(e) {
|
||||
// console.log('additem', e)
|
||||
e && e.preventDefault()
|
||||
|
||||
let itemInfo = {
|
||||
top: _.getDistanceY(e, el),
|
||||
left: _.getDistanceX(e, el),
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
let container = _.getOffset(el)
|
||||
|
||||
// Only used once at the beginning of init
|
||||
let setting = {
|
||||
topPer: _.decimalPoint(itemInfo.top / container.height),
|
||||
leftPer: _.decimalPoint(itemInfo.left / container.width),
|
||||
widthPer: 0,
|
||||
heightPer: 0
|
||||
}
|
||||
let preX = _.getPageX(e)
|
||||
let preY = _.getPageY(e)
|
||||
|
||||
vnode.context.addItem(setting)// 这里去添加并发送了add通知，不应该发送通知
|
||||
|
||||
window.addEventListener('mousemove', handleChange, { passive: false })
|
||||
window.addEventListener('mouseup', handleMouseUp, { passive: false })
|
||||
|
||||
function handleChange(e) {
|
||||
e && e.preventDefault()
|
||||
|
||||
let moveX = _.getPageX(e) - preX
|
||||
let moveY = _.getPageY(e) - preY
|
||||
preX = _.getPageX(e)
|
||||
preY = _.getPageY(e)
|
||||
|
||||
// Not consider the direction of movement first, consider only the lower right drag point
|
||||
let minLimit = 0
|
||||
// 添加热区时，判定鼠标释放时，满足（热区大于48*48时）条件时生效
|
||||
let styleInfo = _.dealBR(itemInfo, moveX, moveY, minLimit)
|
||||
|
||||
// Boundary value processing 改变热区大小时边界条件的处理
|
||||
itemInfo = _.dealEdgeValue(itemInfo, styleInfo, container, vnode.context.zones)
|
||||
|
||||
Object.assign(el.lastElementChild.style, {
|
||||
top: `${itemInfo.top}px`,
|
||||
left: `${itemInfo.left}px`,
|
||||
width: `${itemInfo.width}px`,
|
||||
height: `${itemInfo.height}px`
|
||||
})
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
let perInfo = {
|
||||
topPer: _.decimalPoint(itemInfo.top / container.height),
|
||||
leftPer: _.decimalPoint(itemInfo.left / container.width),
|
||||
widthPer: _.decimalPoint(itemInfo.width / container.width),
|
||||
heightPer: _.decimalPoint(itemInfo.height / container.height),
|
||||
img: "",
|
||||
link: "",
|
||||
type: "",
|
||||
title: ""
|
||||
}
|
||||
|
||||
if (vnode.context.isOverRange()) {
|
||||
vnode.context.overRange() // 判断超出个数限制，给overRange钩子抛回调
|
||||
} else if (container.height < MIN_LIMIT && itemInfo.width > MIN_LIMIT) {
|
||||
vnode.context.changeItem(Object.assign(perInfo, {
|
||||
topPer: 0,
|
||||
heightPer: 1
|
||||
}), true)
|
||||
} else if (container.width < MIN_LIMIT && itemInfo.height > MIN_LIMIT) {
|
||||
vnode.context.changeItem(Object.assign(perInfo, {
|
||||
leftper: 0,
|
||||
widthPer: 1
|
||||
}), true)
|
||||
} else if (itemInfo.width > MIN_LIMIT && itemInfo.height > MIN_LIMIT) {
|
||||
vnode.context.changeItem(perInfo, true)
|
||||
} else {
|
||||
// 当添加区域超出范围或小于最小区域（48*48）时触发，删除当亲绘制的热区并发送erase事件通知
|
||||
vnode.context.eraseItem()
|
||||
}
|
||||
|
||||
window.removeEventListener('mousemove', handleChange)
|
||||
window.removeEventListener('mouseup', handleMouseUp)
|
||||
}
|
||||
}
|
||||
|
||||
el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown)
|
||||
},
|
||||
unbind: function (el) {
|
||||
el.$destroy()
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import _ from '../utils'
|
||||
|
||||
export default {
|
||||
bind: function (el, binding, vnode) {
|
||||
el.addEventListener('mousedown', handleMouseDown,{ passive: false })
|
||||
|
||||
function handleMouseDown (e) {
|
||||
let pointer = e.target.dataset.pointer //元素上绑定的方法名
|
||||
|
||||
if (!pointer) {
|
||||
return
|
||||
}
|
||||
|
||||
e && e.stopPropagation()
|
||||
|
||||
let zone = el.parentNode
|
||||
let setting = vnode.context.setting
|
||||
let currentIndex = vnode.context.index
|
||||
let container = _.getOffset(zone.parentNode)
|
||||
let itemInfo = {
|
||||
width: _.getOffset(zone).width || 0,
|
||||
height: _.getOffset(zone).height || 0,
|
||||
top: setting.topPer * container.height || 0,
|
||||
left: setting.leftPer * container.width || 0
|
||||
}
|
||||
let preX = _.getPageX(e)
|
||||
let preY = _.getPageY(e)
|
||||
let flag
|
||||
|
||||
// Hide the info displayed by hover
|
||||
vnode.context.handlehideZone(true)
|
||||
|
||||
window.addEventListener('mousemove', handleChange,{ passive: false })
|
||||
window.addEventListener('mouseup', handleMouseUp,{ passive: false })
|
||||
|
||||
function handleChange (e) {
|
||||
e && e.preventDefault()
|
||||
flag = true
|
||||
|
||||
let moveX = _.getPageX(e) - preX
|
||||
let moveY = _.getPageY(e) - preY
|
||||
|
||||
preX = _.getPageX(e)
|
||||
preY = _.getPageY(e)
|
||||
|
||||
// Handling the situation when different dragging points are selected
|
||||
let styleInfo = _[pointer](itemInfo, moveX, moveY)//调用对应的方法
|
||||
// Boundary value processing
|
||||
itemInfo = _.dealEdgeValue(itemInfo, styleInfo, container, vnode.context.$parent.zones, currentIndex)
|
||||
|
||||
Object.assign(zone.style, {
|
||||
top: `${itemInfo.top}px`,
|
||||
left: `${itemInfo.left}px`,
|
||||
width: `${itemInfo.width}px`,
|
||||
height: `${itemInfo.height}px`
|
||||
})
|
||||
}
|
||||
|
||||
function handleMouseUp () {
|
||||
if (flag) {
|
||||
flag = false
|
||||
let perInfo = {
|
||||
topPer: _.decimalPoint(itemInfo.top / container.height),
|
||||
leftPer: _.decimalPoint(itemInfo.left / container.width),
|
||||
widthPer: _.decimalPoint(itemInfo.width / container.width),
|
||||
heightPer: _.decimalPoint(itemInfo.height / container.height)
|
||||
}
|
||||
vnode.context.changeInfo(perInfo)
|
||||
|
||||
// 兼容数据无变更情况下导致 computed 不更新，数据仍为 px 时 resize 出现的问题
|
||||
Object.assign(zone.style, {
|
||||
top: `${itemInfo.top}px`,
|
||||
left: `${itemInfo.left}px`,
|
||||
width: `${itemInfo.width}px`,
|
||||
height: `${itemInfo.height}px`
|
||||
})
|
||||
}
|
||||
// Show the info
|
||||
vnode.context.handlehideZone(false)
|
||||
|
||||
window.removeEventListener('mousemove', handleChange)
|
||||
window.removeEventListener('mouseup', handleMouseUp)
|
||||
}
|
||||
}
|
||||
|
||||
el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown)
|
||||
},
|
||||
unbind: function (el) {
|
||||
el.$destroy()
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
import _ from '../utils'
|
||||
|
||||
export default {
|
||||
bind: function (el, binding, vnode) {
|
||||
el.addEventListener('mousedown', handleMouseDown)
|
||||
let collision
|
||||
function handleMouseDown (e) {
|
||||
e && e.stopPropagation()
|
||||
let container = _.getOffset(el.parentNode)
|
||||
let preX = _.getPageX(e)
|
||||
let preY = _.getPageY(e)
|
||||
let topPer
|
||||
let leftPer
|
||||
let flag
|
||||
|
||||
window.addEventListener('mousemove', handleChange,{ passive: false })
|
||||
window.addEventListener('mouseup', handleMouseUp,{ passive: false })
|
||||
|
||||
function handleChange (e) {
|
||||
e && e.preventDefault()
|
||||
flag = true
|
||||
collision = false
|
||||
// Hide the info displayed by hover
|
||||
vnode.context.handlehideZone(true)
|
||||
|
||||
let setting = vnode.context.setting
|
||||
let currentIndex = vnode.context.index
|
||||
let moveX = _.getPageX(e) - preX
|
||||
let moveY = _.getPageY(e) - preY
|
||||
|
||||
setting.topPer = setting.topPer || 0
|
||||
setting.leftPer = setting.leftPer || 0
|
||||
topPer = _.decimalPoint(moveY / container.height + setting.topPer)
|
||||
leftPer = _.decimalPoint(moveX / container.width + setting.leftPer)
|
||||
|
||||
// Hotzone moving boundary processing
|
||||
if (topPer < 0) {
|
||||
topPer = 0
|
||||
moveY = -container.height * setting.topPer
|
||||
}
|
||||
|
||||
if (leftPer < 0) {
|
||||
leftPer = 0
|
||||
moveX = -container.width * setting.leftPer
|
||||
}
|
||||
|
||||
if (topPer + setting.heightPer > 1) {
|
||||
topPer = 1 - setting.heightPer
|
||||
moveY = container.height * (topPer - setting.topPer)
|
||||
}
|
||||
|
||||
if (leftPer + setting.widthPer > 1) {
|
||||
leftPer = 1 - setting.widthPer
|
||||
moveX = container.width * (leftPer - setting.leftPer)
|
||||
}
|
||||
// 拖拽碰撞检测
|
||||
if (vnode.context.$parent.zones.length > 1) {
|
||||
let currentzones = JSON.parse(JSON.stringify(vnode.context.$parent.zones)).map((zone) => {
|
||||
return {
|
||||
left: (zone.leftPer || 0) * container.width,
|
||||
top: (zone.topPer || 0) * container.height,
|
||||
width: (zone.widthPer || 0) * container.width,
|
||||
height: (zone.heightPer || 0) * container.height
|
||||
}
|
||||
})
|
||||
// 矫正
|
||||
let changeSetting = {}
|
||||
changeSetting.left = setting.leftPer * container.width + moveX
|
||||
changeSetting.top = setting.topPer * container.height + moveY
|
||||
changeSetting.width = setting.widthPer * container.width
|
||||
changeSetting.height = setting.heightPer * container.height
|
||||
// 碰撞检测
|
||||
for (let i = 0, len = currentzones.length; i < len; i++) {
|
||||
if (currentIndex !== i && _.handleEgdeCollisions(currentzones[i], changeSetting)) {
|
||||
collision = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
el.style.transform = `translate(${moveX}px, ${moveY}px)`
|
||||
}
|
||||
|
||||
function handleMouseUp () {
|
||||
if (flag) {
|
||||
flag = false
|
||||
el.style.transform = 'translate(0, 0)'
|
||||
if (!collision) {
|
||||
vnode.context.changeInfo({
|
||||
topPer,
|
||||
leftPer
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Show the info
|
||||
vnode.context.handlehideZone(false)
|
||||
|
||||
window.removeEventListener('mousemove', handleChange)
|
||||
window.removeEventListener('mouseup', handleMouseUp)
|
||||
}
|
||||
}
|
||||
|
||||
el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown)
|
||||
},
|
||||
unbind: function (el) {
|
||||
el.$destroy()
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import hotzone from './index.vue'
|
||||
|
||||
hotzone.install = (Vue) => {
|
||||
Vue.component(hotzone.name, hotzone)
|
||||
}
|
||||
|
||||
export default hotzone
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<Modal
|
||||
:styles="{ top: '120px' }"
|
||||
width="800"
|
||||
@on-cancel="clickClose"
|
||||
@on-ok="clickOK"
|
||||
v-model="flag"
|
||||
:mask-closable="false"
|
||||
title="绘制热区"
|
||||
scrollable
|
||||
>
|
||||
<template v-if="flag">
|
||||
<hotzone
|
||||
ref="hotzone"
|
||||
@change="changeHotzone"
|
||||
:zonesInit="res.zoneInfo"
|
||||
:image="res.img"
|
||||
></hotzone>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
<script>
|
||||
import hotzone from "./components/Hotzone.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
hotzone,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flag: false, // modal显隐
|
||||
};
|
||||
},
|
||||
props: ["res"],
|
||||
mounted() {},
|
||||
methods: {
|
||||
changeHotzone(info) {
|
||||
this.$emit("changeZone", info);
|
||||
},
|
||||
// 关闭弹窗
|
||||
clickClose() {
|
||||
this.$emit("closeFlag", false);
|
||||
},
|
||||
// 点击确认
|
||||
clickOK() {
|
||||
this.clickClose();
|
||||
},
|
||||
// 打开组件方法
|
||||
open(type, mutiple) {
|
||||
this.flag = true;
|
||||
},
|
||||
// 关闭组件
|
||||
close() {
|
||||
this.flag = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/deep/ .ivu-modal {
|
||||
overflow: hidden;
|
||||
height: 650px !important;
|
||||
}
|
||||
/deep/ .ivu-modal-body {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
let _ = {
|
||||
MIN_LIMIT: 48, // Min size of zone
|
||||
DECIMAL_PLACES: 4 // Hotzone positioning decimal point limit number of digits
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a power result of 10 for the power of the constant
|
||||
* @return {Number}
|
||||
*/
|
||||
_.getMultiple = (decimalPlaces = _.DECIMAL_PLACES) => {
|
||||
return Math.pow(10, decimalPlaces)
|
||||
}
|
||||
|
||||
/**
|
||||
* Limit decimal places
|
||||
* @param {Number} num
|
||||
* @return {Number}
|
||||
*/
|
||||
_.decimalPoint = (val = 0) => { // 处理js小数点计算不精确问题，先放再缩小
|
||||
return Math.round(val * _.getMultiple()) / _.getMultiple() || 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Get element width and height
|
||||
* @param {Object} elem
|
||||
* @return {Object}
|
||||
*/
|
||||
_.getOffset = (elem = {}) => ({
|
||||
width: elem.clientWidth || 0,
|
||||
height: elem.clientHeight || 0
|
||||
})
|
||||
|
||||
/**
|
||||
* Get pageX
|
||||
* @param {Object} e
|
||||
* @return {Number}
|
||||
*/
|
||||
_.getPageX = (e) => ('pageX' in e) ? e.pageX : e.touches[0].pageX
|
||||
|
||||
/**
|
||||
* Get pageY
|
||||
* @param {Object} e
|
||||
* @return {Number}
|
||||
*/
|
||||
_.getPageY = (e) => ('pageY' in e) ? e.pageY : e.touches[0].pageY
|
||||
|
||||
/**
|
||||
* Gets the abscissa value of the mouse click relative to the target node
|
||||
* @param {Object} e
|
||||
* @param {Object} container
|
||||
* @return {Number}
|
||||
*/
|
||||
_.getDistanceX = (e, container) =>
|
||||
_.getPageX(e) - (container.getBoundingClientRect().left + window.pageXOffset)
|
||||
|
||||
/**
|
||||
* Gets the ordinate value of the mouse click relative to the target node
|
||||
* @param {Object} e
|
||||
* @param {Object} container
|
||||
* @return {Number}
|
||||
*/
|
||||
_.getDistanceY = (e, container) =>
|
||||
_.getPageY(e) - (container.getBoundingClientRect().top + window.pageYOffset)
|
||||
|
||||
// 检测区域是否有碰撞 true 有碰撞交集 ,false 无碰撞
|
||||
_.handleEgdeCollisions = (rect1, rect2) => {
|
||||
const l1 = { left: rect1.left, top: rect1.top }
|
||||
const r1 = { left: rect1.left + rect1.width, top: rect1.top + rect1.height }
|
||||
const l2 = { left: rect2.left, top: rect2.top }
|
||||
const r2 = { left: rect2.left + rect2.width, top: rect2.top + rect2.height }
|
||||
return !(
|
||||
l1.left > r2.left ||
|
||||
l2.left > r1.left ||
|
||||
l1.top > r2.top ||
|
||||
l2.top > r1.top
|
||||
)
|
||||
}
|
||||
/**
|
||||
* Treatment of boundary conditions when changing the size of the hotzone 改变热区大小时边界条件的处理（如果要避免热区重叠，代码要加载这里）
|
||||
* @param {Object} itemInfo
|
||||
* @param {Object} styleInfo
|
||||
* @param {Object} container
|
||||
*/
|
||||
_.dealEdgeValue = (itemInfo, styleInfo, container, zones, currentIndex = zones.length - 1) => {
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(styleInfo, "left") && styleInfo.left < 0) {
|
||||
styleInfo.left = 0
|
||||
styleInfo.width = itemInfo.width + itemInfo.left
|
||||
}
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(styleInfo, "top") && styleInfo.top < 0) {
|
||||
styleInfo.top = 0
|
||||
styleInfo.height = itemInfo.height + itemInfo.top
|
||||
}
|
||||
|
||||
if (!Object.prototype.hasOwnProperty.call(styleInfo, "left") && Object.prototype.hasOwnProperty.call(styleInfo, "width")) {
|
||||
if (itemInfo.left + styleInfo.width > container.width) {
|
||||
styleInfo.width = container.width - itemInfo.left
|
||||
}
|
||||
}
|
||||
|
||||
if (!Object.prototype.hasOwnProperty.call(styleInfo, "top") && Object.prototype.hasOwnProperty.call(styleInfo, "height")) {
|
||||
if (itemInfo.top + styleInfo.height > container.height) {
|
||||
styleInfo.height = container.height - itemInfo.top
|
||||
}
|
||||
}
|
||||
// 与其他热区重叠，则修正 检测是否发生碰撞
|
||||
if (zones.length > 1) {
|
||||
let currentzones = JSON.parse(JSON.stringify(zones)).map((zone) => {
|
||||
return {
|
||||
left: (zone.leftPer || 0) * container.width,
|
||||
top: (zone.topPer || 0) * container.height,
|
||||
width: (zone.widthPer || 0) * container.width,
|
||||
height: (zone.heightPer || 0) * container.height
|
||||
}
|
||||
})
|
||||
let current = { ...itemInfo, ...styleInfo }
|
||||
for (let i = 0, len = currentzones.length; i < len; i++) {
|
||||
if (currentIndex !== i && _.handleEgdeCollisions(currentzones[i], current)) {
|
||||
return itemInfo
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Object.assign(itemInfo, styleInfo)
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle different drag points, capital letters mean: T-top，L-left，C-center，R-right，B-bottom
|
||||
* @param {Object} itemInfo
|
||||
* @param {Number} moveX
|
||||
* @param {Number} moveY
|
||||
* @return {Object}
|
||||
*/
|
||||
_.dealTL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
||||
let styleInfo = {}
|
||||
let width = itemInfo.width - moveX
|
||||
let height = itemInfo.height - moveY
|
||||
|
||||
if (width >= Math.min(minLimit, itemInfo.width)) {
|
||||
Object.assign(styleInfo, {
|
||||
width,
|
||||
left: itemInfo.left + moveX
|
||||
})
|
||||
}
|
||||
|
||||
if (height >= Math.min(minLimit, itemInfo.height)) {
|
||||
Object.assign(styleInfo, {
|
||||
height,
|
||||
top: itemInfo.top + moveY
|
||||
})
|
||||
}
|
||||
|
||||
return styleInfo
|
||||
}
|
||||
|
||||
_.dealTC = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
||||
let styleInfo = {}
|
||||
let height = itemInfo.height - moveY
|
||||
|
||||
if (height >= Math.min(minLimit, itemInfo.height)) {
|
||||
styleInfo = {
|
||||
height,
|
||||
top: itemInfo.top + moveY
|
||||
}
|
||||
}
|
||||
|
||||
return styleInfo
|
||||
}
|
||||
|
||||
_.dealTR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
||||
let styleInfo = {}
|
||||
let width = itemInfo.width + moveX
|
||||
let height = itemInfo.height - moveY
|
||||
|
||||
if (width >= Math.min(minLimit, itemInfo.width)) {
|
||||
Object.assign(styleInfo, {
|
||||
width
|
||||
})
|
||||
}
|
||||
|
||||
if (height >= Math.min(minLimit, itemInfo.height)) {
|
||||
Object.assign(styleInfo, {
|
||||
height,
|
||||
top: itemInfo.top + moveY
|
||||
})
|
||||
}
|
||||
|
||||
return styleInfo
|
||||
}
|
||||
|
||||
_.dealCL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
||||
let styleInfo = {}
|
||||
let width = itemInfo.width - moveX
|
||||
|
||||
if (width >= Math.min(minLimit, itemInfo.width)) {
|
||||
Object.assign(styleInfo, {
|
||||
width,
|
||||
left: itemInfo.left + moveX
|
||||
})
|
||||
}
|
||||
|
||||
return styleInfo
|
||||
}
|
||||
|
||||
_.dealCR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
||||
let styleInfo = {}
|
||||
let width = itemInfo.width + moveX
|
||||
|
||||
if (width >= Math.min(minLimit, itemInfo.width)) {
|
||||
Object.assign(styleInfo, {
|
||||
width
|
||||
})
|
||||
}
|
||||
|
||||
return styleInfo
|
||||
}
|
||||
|
||||
_.dealBL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
||||
let styleInfo = {}
|
||||
let width = itemInfo.width - moveX
|
||||
let height = itemInfo.height + moveY
|
||||
|
||||
if (width >= Math.min(minLimit, itemInfo.width)) {
|
||||
Object.assign(styleInfo, {
|
||||
width,
|
||||
left: itemInfo.left + moveX
|
||||
})
|
||||
}
|
||||
|
||||
if (height >= Math.min(minLimit, itemInfo.height)) {
|
||||
Object.assign(styleInfo, {
|
||||
height
|
||||
})
|
||||
}
|
||||
|
||||
return styleInfo
|
||||
}
|
||||
|
||||
_.dealBC = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
||||
let styleInfo = {}
|
||||
let height = itemInfo.height + moveY
|
||||
|
||||
if (height >= Math.min(minLimit, itemInfo.height)) {
|
||||
Object.assign(styleInfo, {
|
||||
height
|
||||
})
|
||||
}
|
||||
|
||||
return styleInfo
|
||||
}
|
||||
// 添加热区时，判定鼠标释放点满足一下条件时生效
|
||||
_.dealBR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
||||
let styleInfo = {}
|
||||
let width = itemInfo.width + moveX
|
||||
let height = itemInfo.height + moveY
|
||||
if (width >= Math.min(minLimit, itemInfo.width)) {
|
||||
// 改变后的宽度 >= min(之前宽度,内置的最小宽度标准)，即生效
|
||||
Object.assign(styleInfo, {
|
||||
width
|
||||
})
|
||||
}
|
||||
|
||||
if (height >= Math.min(minLimit, itemInfo.height)) {
|
||||
// 改变后的高度 大于等于 Min（最小高度，之前高度）时，生效
|
||||
Object.assign(styleInfo, {
|
||||
height
|
||||
})
|
||||
}
|
||||
|
||||
return styleInfo
|
||||
}
|
||||
|
||||
export default _
|
||||
|
|
@ -107,13 +107,13 @@ export default {
|
|||
},
|
||||
openModalTitle: '开启信息',
|
||||
ruleValidate: {
|
||||
customerName: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
payType: [{ required: true, message: "请填写必填项" ,trigger: "change" }],
|
||||
expType: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
customerPwd: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
monthCode: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
sendSite: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
sendStaff: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
// customerName: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
// payType: [{ required: true, message: "请填写必填项" ,trigger: "change" }],
|
||||
// expType: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
// customerPwd: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
// monthCode: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
// sendSite: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
// sendStaff: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||
|
||||
},
|
||||
faceSheetForm: {
|
||||
|
|
@ -280,6 +280,8 @@ export default {
|
|||
this.faceSheetForm.monthCode = res.result.monthCode;
|
||||
this.faceSheetForm.sendSite = res.result.sendSite;
|
||||
this.faceSheetForm.sendStaff = res.result.sendStaff;
|
||||
this.faceSheetForm.payType = res.result.payType;
|
||||
this.faceSheetForm.expType = res.result.expType;
|
||||
}
|
||||
});
|
||||
this.openModal = true;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,26 @@ export let homeData = {};
|
|||
* notImg: true 没有选择图片功能
|
||||
* close:true 右侧关闭按钮
|
||||
*/
|
||||
|
||||
export const modelData = [
|
||||
{
|
||||
type: "flexOne",
|
||||
name: "图片",
|
||||
notAdd: true,
|
||||
onlyImg: true,
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/8wSNWbnqujDh6HL.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "750*280",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "carousel",
|
||||
name: "图片轮播",
|
||||
|
|
|
|||
|
|
@ -118,44 +118,89 @@
|
|||
<Input v-model="item.title" style="width: 200px" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 填写链接 -->
|
||||
|
||||
<div class="decorate-view" v-if="res.onlyImg">
|
||||
<div class="decorate-view-title">选择模式</div>
|
||||
|
||||
<div>
|
||||
<RadioGroup v-model="item.model" type="button">
|
||||
<Radio value="link" label="link">链接</Radio>
|
||||
<Radio value="hotzone" label="hotzone">热区</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="decorate-view" v-if="!res.notLink">
|
||||
<div class="decorate-view-title">选择链接</div>
|
||||
<div v-if="item.url.length != 0" class="decorate-view-link">
|
||||
<div
|
||||
v-if="item.url && item.url.length != 0"
|
||||
class="decorate-view-link"
|
||||
>
|
||||
已选链接：
|
||||
|
||||
<span>
|
||||
{{
|
||||
<!-- {{
|
||||
ways.find((e) => {
|
||||
return item.url.___type == e.name;
|
||||
}).title
|
||||
})
|
||||
? ways.find((e) => {
|
||||
return item.url.___type == e.name;
|
||||
}).title
|
||||
: "发现"
|
||||
}}
|
||||
-
|
||||
<!-- 当选择完链接之后的专题名称 -->
|
||||
<span v-if="item.url.pageType == 'special'">
|
||||
{{ item.url.name }}</span
|
||||
>
|
||||
<!-- 当选择完链接之后的商品名称 -->
|
||||
<span v-if="item.url.___type == 'goods'"> {{ item.url.goodsName }}</span>
|
||||
<span v-if="item.url.___type == 'goods'">
|
||||
{{ item.url.goodsName }}</span
|
||||
>
|
||||
<!-- 当选择完链接之后的分类回调 -->
|
||||
<span v-if="item.url.___type == 'category'"> {{ item.url.name }}</span>
|
||||
<span v-if="item.url.___type == 'category'">
|
||||
{{ item.url.name }}</span
|
||||
>
|
||||
<!-- 当选择完链接之后的店铺回调 -->
|
||||
<span v-if="item.url.___type == 'shops'"> {{ item.url.memberName }}</span>
|
||||
<span v-if="item.url.___type == 'shops'">
|
||||
{{ item.url.memberName }}</span
|
||||
>
|
||||
<!-- 当选择完链接之后的其他回调 -->
|
||||
<span v-if="item.url.___type == 'other'"> {{ item.url.title }}</span>
|
||||
<span v-if="item.url.___type == 'other'">
|
||||
{{ item.url.title }}</span
|
||||
>
|
||||
<!-- 当选择完链接之后的其他回调 -->
|
||||
<span v-if="item.url.___type == 'brand'">
|
||||
{{ item.url.name }}</span
|
||||
>
|
||||
|
||||
<!-- 当选择完活动之后的其他回调 -->
|
||||
<span v-if="item.url.___type == 'marketing'">
|
||||
<span v-if="item.url.___promotion == 'SECKILL'"> 秒杀 </span>
|
||||
<span v-if="item.url.___promotion == 'FULL_DISCOUNT'"> 满减 </span>
|
||||
<span v-if="item.url.___promotion == 'FULL_DISCOUNT'">
|
||||
满减
|
||||
</span>
|
||||
<span v-if="item.url.___promotion == 'PINTUAN'"> 拼团 </span>
|
||||
{{ item.url.title || item.url.goodsName }}
|
||||
</span>
|
||||
<!-- 当选择完活动之后的其他回调 -->
|
||||
<span v-if="item.url.___type == 'pages'"> {{ item.url.title }}</span>
|
||||
<span v-if="item.url.___type == 'pages'">
|
||||
{{ item.url.title }}</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<Button ghost size="small" type="primary" @click="clickLink(item, index)"
|
||||
>选择链接</Button
|
||||
<Button
|
||||
ghost
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="clickLink(item, index, res)"
|
||||
>
|
||||
{{ item.model === "hotzone" ? "绘制热区" : "选择链接" }}</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 链接地址-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -174,7 +219,7 @@
|
|||
@selectedLink="selectedLink"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
|
||||
<hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
|
||||
<Modal width="1200px" v-model="picModelFlag">
|
||||
<ossManage @callback="callbackSelected" ref="ossManage" />
|
||||
</Modal>
|
||||
|
|
@ -182,11 +227,13 @@
|
|||
</template>
|
||||
<script>
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
import hotzone from "@/views/shop/hotzone";
|
||||
import { modelData } from "./config";
|
||||
import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型
|
||||
export default {
|
||||
components: {
|
||||
ossManage,
|
||||
hotzone,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -215,6 +262,7 @@ export default {
|
|||
},
|
||||
// 回调选择的链接
|
||||
selectedLink(val) {
|
||||
this.selectedLinks.zoneInfo = [];
|
||||
// 需删除图片中 intro 和 mobileIntro 可能存在转义符导致json出错问题
|
||||
delete val.selected;
|
||||
delete val.intro;
|
||||
|
|
@ -257,9 +305,23 @@ export default {
|
|||
},
|
||||
|
||||
// 点击链接赋值一个唯一值，并将当前选择的模块赋值
|
||||
clickLink(val, index) {
|
||||
clickLink(val, index, oval) {
|
||||
this.selectedLinks = val;
|
||||
this.liliDialogFlag(false);
|
||||
if (val.model === "hotzone") {
|
||||
if (!val.zoneInfo) {
|
||||
val.zoneInfo = [];
|
||||
}
|
||||
this.$refs.hotzone.flag = true;
|
||||
this.$refs.hotzone.res = val;
|
||||
} else {
|
||||
this.liliDialogFlag(false);
|
||||
}
|
||||
},
|
||||
addZone(zoneInfo) {
|
||||
this.selectedLinks.zoneInfo.push(zoneInfo);
|
||||
},
|
||||
changeZone(zoneInfo) {
|
||||
this.selectedLinks.zoneInfo = zoneInfo;
|
||||
},
|
||||
//点击图片解析成base64
|
||||
changeFile(item, index) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue