Merge branch 'master' of gitee.com:beijing_hongye_huicheng/lilishop-ui

master
misworga831 2023-05-08 18:42:09 +08:00
commit ad09b38ed5
32 changed files with 2637 additions and 1039 deletions

View File

@ -71,10 +71,15 @@ export default {
this.search(); this.search();
}, },
search () { // search () { //
this.$router.push({ const url = this.$route.path;
path: '/goodsList', if(url == '/goodsList'){
query: { keyword: this.searchData } this.$emit('search', this.searchData)
}); }else{
this.$router.push({
path: '/goodsList',
query: { keyword: this.searchData }
});
}
}, },
searchStore () { // searchStore () { //
this.$emit('search', this.searchData) this.$emit('search', this.searchData)

View File

@ -369,6 +369,8 @@ export default {
return h('div', [h('span', {}, '申请中')]); return h('div', [h('span', {}, '申请中')]);
} else if (params.row.applyStatus === 'VIA_AUDITING') { } else if (params.row.applyStatus === 'VIA_AUDITING') {
return h('div', [h('span', {}, '提现成功')]); return h('div', [h('span', {}, '提现成功')]);
} else if (params.row.applyStatus === 'ERROR') {
return h('div', [h('span', {}, '提现失败')]);
} else { } else {
return h('div', [h('span', {}, '审核拒绝')]); return h('div', [h('span', {}, '审核拒绝')]);
} }

View File

@ -6,12 +6,7 @@
<div class="promotion-decorate">限时秒杀</div> <div class="promotion-decorate">限时秒杀</div>
<ul class="time-line"> <ul class="time-line">
<template v-for="(time, index) in list"> <template v-for="(time, index) in list">
<li <li v-if="index < 5" @click="currIndex = index" :key="index" :class="{ currTimeline: currIndex === index }">
v-if="index < 5"
@click="currIndex = index"
:key="index"
:class="{ currTimeline: currIndex === index }"
>
<div>{{ time.timeLine + ":00" }}</div> <div>{{ time.timeLine + ":00" }}</div>
<div v-if="currIndex === index"> <div v-if="currIndex === index">
<p>{{ nowHour >= time.timeLine ? "秒杀中" : "即将开始" }}</p> <p>{{ nowHour >= time.timeLine ? "秒杀中" : "即将开始" }}</p>
@ -30,13 +25,8 @@
<!-- 秒杀商品列表 --> <!-- 秒杀商品列表 -->
<div class="goods-list"> <div class="goods-list">
<empty v-if="goodsList.length === 0" /> <empty v-if="goodsList.length === 0" />
<div <div v-else class="goods-show-info1" v-for="(item, index) in goodsList" :key="index"
v-else @click="goGoodsDetail(item.skuId, item.goodsId)">
class="goods-show-info1"
v-for="(item, index) in goodsList"
:key="index"
@click="goGoodsDetail(item.skuId, item.goodsId)"
>
<div class="goods-show-img"> <div class="goods-show-img">
<img width="200" height="200" :src="item.goodsImage" /> <img width="200" height="200" :src="item.goodsImage" />
</div> </div>
@ -53,42 +43,28 @@
<div class="goods-show-detail"> <div class="goods-show-detail">
<span>{{ item.goodsName }}</span> <span>{{ item.goodsName }}</span>
</div> </div>
<div <div class="goods-seckill-btn" :class="{
class="goods-seckill-btn" 'goods-seckill-btn-gray': nowHour < list[currIndex].timeLine,
:class="{ }">
'goods-seckill-btn-gray': nowHour < list[currIndex].timeLine,
}"
>
{{ nowHour >= list[currIndex].timeLine ? "立即抢购" : "即将开始" }} {{ nowHour >= list[currIndex].timeLine ? "立即抢购" : "即将开始" }}
</div> </div>
<div <div v-if="nowHour >= list[currIndex].timeLine && item.quantity <= item.salesNum"
v-if="nowHour >= list[currIndex].timeLine && item.quantity <= item.salesNum" class="goods-seckill-btn goods-seckill-btn-gray">
class="goods-seckill-btn goods-seckill-btn-gray"
>
已售罄 已售罄
</div> </div>
<div v-if="nowHour >= list[currIndex].timeLine" class="goods-show-num1"> <div v-if="nowHour >= list[currIndex].timeLine" class="goods-show-num1">
<span <span>已售{{
>已售{{ (item.quantity && item.quantity > 0
(item.quantity && item.quantity > 0 ? Math.ceil(
? Math.ceil( (item.salesNum / (item.quantity + item.salesNum)) * 100
(item.salesNum / (item.quantity + item.salesNum)) * 100 )
) : 100) + "%"
: 100) + "%" }}</span><Progress hide-info stroke-color="#df0021" style="width: 110px" class="ml_10" :percent="item.quantity && item.quantity > 0
}}</span ? Math.ceil(
><Progress (item.salesNum / (item.quantity + item.salesNum)) * 100
hide-info )
stroke-color="#df0021" : 100
style="width: 110px" " />
class="ml_10"
:percent="
item.quantity && item.quantity > 0
? Math.ceil(
(item.salesNum / (item.quantity + item.salesNum)) * 100
)
: 100
"
/>
</div> </div>
<div class="goods-show-seller"> <div class="goods-show-seller">
<span>{{ item.storeName }}</span> <span>{{ item.storeName }}</span>
@ -101,7 +77,7 @@
<script> <script>
import { seckillByDay } from "@/api/promotion"; import { seckillByDay } from "@/api/promotion";
export default { export default {
data() { data () {
return { return {
list: [], // list: [], //
goodsList: [], // goodsList: [], //
@ -112,19 +88,19 @@ export default {
nowHour: new Date().getHours(), // nowHour: new Date().getHours(), //
}; };
}, },
beforeDestroy() { beforeDestroy () {
// //
clearInterval(this.interval); clearInterval(this.interval);
}, },
watch: { watch: {
currIndex(val) { currIndex (val) {
clearInterval(this.interval); clearInterval(this.interval);
this.interval = null; this.interval = null;
this.nowHour = new Date().getHours(); this.nowHour = new Date().getHours();
this.countDown(val); this.countDown(val);
this.goodsList = this.list[val].seckillGoodsList; this.goodsList = this.list[val].seckillGoodsList;
}, },
diffSeconds(val) { diffSeconds (val) {
const hours = Math.floor(val / 3600); const hours = Math.floor(val / 3600);
// / 60 // / 60
// 3600 / 60 = 60 // 3600 / 60 = 60
@ -138,7 +114,7 @@ export default {
clearInterval(this.interval); clearInterval(this.interval);
this.interval = null; this.interval = null;
} }
function filteTime(time) { function filteTime (time) {
if (time < 10) { if (time < 10) {
return "0" + time; return "0" + time;
} else { } else {
@ -148,7 +124,7 @@ export default {
}, },
}, },
methods: { methods: {
getListByDay() { getListByDay () {
// //
seckillByDay().then((res) => { seckillByDay().then((res) => {
if (res.success) { if (res.success) {
@ -158,7 +134,7 @@ export default {
} }
}); });
}, },
goGoodsDetail(skuId, goodsId) { goGoodsDetail (skuId, goodsId) {
// //
let routeUrl = this.$router.resolve({ let routeUrl = this.$router.resolve({
path: "/goodsDetail", path: "/goodsDetail",
@ -166,7 +142,7 @@ export default {
}); });
window.open(routeUrl.href, "_blank"); window.open(routeUrl.href, "_blank");
}, },
countDown(currIndex) { countDown (currIndex) {
// //
// 0 // 0
let zeroTime = new Date(new Date().toLocaleDateString()).getTime(); let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
@ -191,13 +167,14 @@ export default {
}, 1000); }, 1000);
}, },
}, },
mounted() { mounted () {
this.getListByDay(); this.getListByDay();
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../assets/styles/goodsList.scss"; @import "../../assets/styles/goodsList.scss";
.goods-seckill-btn { .goods-seckill-btn {
position: absolute; position: absolute;
right: 0; right: 0;
@ -212,19 +189,23 @@ export default {
margin-bottom: 1px; margin-bottom: 1px;
margin-right: 1px; margin-right: 1px;
} }
.goods-seckill-btn-gray { .goods-seckill-btn-gray {
background-color: #666; background-color: #666;
} }
.promotion-decorate::before, .promotion-decorate::before,
.promotion-decorate::after { .promotion-decorate::after {
background-image: url("/src/assets/images/sprite@2x.png"); background-image: url("/src/assets/images/sprite@2x.png");
} }
.time-line { .time-line {
width: 1200px; width: 1200px;
height: 60px; height: 60px;
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
li { li {
padding: 0 30px; padding: 0 30px;
font-size: 16px; font-size: 16px;
@ -233,9 +214,11 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
.not-curr { .not-curr {
border: 1px solid #999; border: 1px solid #999;
border-radius: 20px; border-radius: 20px;
@ -245,18 +228,22 @@ export default {
font-weight: normal; font-weight: normal;
} }
} }
.currTimeline { .currTimeline {
background-color: $theme_color; background-color: $theme_color;
color: #fff; color: #fff;
> div:nth-child(1) {
>div:nth-child(1) {
font-size: 20px; font-size: 20px;
} }
> div:nth-child(2) {
>div:nth-child(2) {
font-size: 14px; font-size: 14px;
margin-left: 10px; margin-left: 10px;
} }
} }
} }
.goods-show-info1 { .goods-show-info1 {
width: 290px; width: 290px;
padding: 6px; padding: 6px;
@ -267,15 +254,18 @@ export default {
cursor: pointer; cursor: pointer;
background-color: #fff; background-color: #fff;
} }
.goods-show-info1:hover { .goods-show-info1:hover {
border: 1px solid #ccc; border: 1px solid #ccc;
box-shadow: 0px 0px 15px #ccc; box-shadow: 0px 0px 15px #ccc;
} }
.goods-show-img { .goods-show-img {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.ivu-progress-success .ivu-progress-bg { .ivu-progress-success .ivu-progress-bg {
background-color: #111fff; background-color: #111fff;
} }
</style> </style>

View File

@ -14,12 +14,12 @@
<Poptip slot="append" transfer trigger="hover" title="图片预览" placement="right"> <Poptip slot="append" transfer trigger="hover" title="图片预览" placement="right">
<Icon type="md-eye" class="see-icon" /> <Icon type="md-eye" class="see-icon" />
<div slot="content"> <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> <a @click="viewImage=true" style="margin-top:5px;text-align:right;display:block">查看大图</a>
</div> </div>
</Poptip> </Poptip>
</Input> </Input>
<Upload <Upload
:action="uploadFileUrl" :action="uploadFileUrl"
:headers="accessToken" :headers="accessToken"
@ -40,7 +40,7 @@
</div> </div>
<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable> <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"> <div slot="footer">
<Button @click="viewImage=false"></Button> <Button @click="viewImage=false"></Button>
</div> </div>

View File

@ -26,11 +26,10 @@
<FormItem label="规格名称" prop="specName"> <FormItem label="规格名称" prop="specName">
<Input v-model="form.specName" maxlength="30" clearable style="width: 100%" /> <Input v-model="form.specName" maxlength="30" clearable style="width: 100%" />
</FormItem> </FormItem>
{{ form }}
<FormItem label="规格值" prop="specValue"> <FormItem label="规格值" prop="specValue">
<Select v-model="form.specValue" placeholder="输入后回车添加" multiple filterable allow-create <Select v-model="form.specValue" placeholder="输入后回车添加" multiple filterable allow-create
:popper-append-to-body="false" popper-class="spec-values-popper" :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 v-for="item in specValue" :value="item" :label="item" :key="item">
</Option> </Option>
</Select> </Select>
@ -51,7 +50,7 @@ import { regular } from "@/utils";
export default { export default {
name: "spec", name: "spec",
components: {}, components: {},
data() { data () {
return { return {
loading: true, // loading: true, //
modalType: 0, // modalType: 0, //
@ -150,29 +149,32 @@ export default {
}; };
}, },
methods: { methods: {
handleCreate2 (v) {
console.log(v);
},
// //
init() { init () {
this.getDataList(); this.getDataList();
}, },
// //
changePage(v) { changePage (v) {
this.searchForm.pageNumber = v; this.searchForm.pageNumber = v;
this.getDataList(); this.getDataList();
this.clearSelectAll(); this.clearSelectAll();
}, },
// //
changePageSize(v) { changePageSize (v) {
this.searchForm.pageSize = v; this.searchForm.pageSize = v;
this.getDataList(); this.getDataList();
}, },
// //
handleSearch() { handleSearch () {
this.searchForm.pageNumber = 1; this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10; this.searchForm.pageSize = 10;
this.getDataList(); this.getDataList();
}, },
// //
handleReset() { handleReset () {
this.$refs.searchForm.resetFields(); this.$refs.searchForm.resetFields();
this.searchForm.pageNumber = 1; this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10; this.searchForm.pageSize = 10;
@ -180,7 +182,7 @@ export default {
this.getDataList(); this.getDataList();
}, },
// //
changeSort(e) { changeSort (e) {
this.searchForm.sort = e.key; this.searchForm.sort = e.key;
this.searchForm.order = e.order; this.searchForm.order = e.order;
if (e.order === "normal") { if (e.order === "normal") {
@ -189,16 +191,16 @@ export default {
this.getDataList(); this.getDataList();
}, },
// //
clearSelectAll() { clearSelectAll () {
this.$refs.table.selectAll(false); this.$refs.table.selectAll(false);
}, },
// //
changeSelect(e) { changeSelect (e) {
this.selectList = e; this.selectList = e;
this.selectCount = e.length; this.selectCount = e.length;
}, },
// //
getDataList() { getDataList () {
this.loading = true; this.loading = true;
// //
getSpecListData(this.searchForm).then((res) => { getSpecListData(this.searchForm).then((res) => {
@ -211,7 +213,7 @@ export default {
this.loading = false; this.loading = false;
}, },
// //
saveSpec() { saveSpec () {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
this.submitLoading = true; this.submitLoading = true;
@ -246,7 +248,7 @@ export default {
}); });
}, },
// //
add() { add () {
this.modalType = 0; this.modalType = 0;
this.modalTitle = "添加"; this.modalTitle = "添加";
this.$refs.form.resetFields(); this.$refs.form.resetFields();
@ -255,8 +257,7 @@ export default {
this.modalVisible = true; this.modalVisible = true;
}, },
// //
edit(v) { edit (v) {
console.log(v);
this.modalType = 1; this.modalType = 1;
this.modalTitle = "编辑"; this.modalTitle = "编辑";
// null"" // null""
@ -266,23 +267,21 @@ export default {
} }
} }
let localVal = v.specValue; let localVal = v.specValue;
console.log(localVal.split(","))
this.form.specName = v.specName; this.form.specName = v.specName;
this.form.id = v.id; this.form.id = v.id;
this.$nextTick(() => { // this.$nextTick(() => {
this.$set(this.form, 'specValue', localVal.split(",")) // this.$set(this.form, 'specValue', localVal.split(","))
}) // })
this.form.specValue = localVal.split(",")
if (localVal && localVal.indexOf("," > 0)) { if (localVal && localVal.indexOf("," > 0)) {
this.specValue = this.form.specValue; this.specValue = this.form.specValue;
} else { } else {
this.specValue = []; this.specValue = [];
} }
console.log("form.specValue", this.form);
this.modalVisible = true; this.modalVisible = true;
}, },
// //
remove(v) { remove (v) {
this.$Modal.confirm({ this.$Modal.confirm({
title: "确认删除", title: "确认删除",
content: "您确认要删除 " + v.specName + " ?", content: "您确认要删除 " + v.specName + " ?",
@ -299,7 +298,7 @@ export default {
}); });
}, },
// //
delAll() { delAll () {
if (this.selectCount <= 0) { if (this.selectCount <= 0) {
this.$Message.warning("您还未选择要删除的数据"); this.$Message.warning("您还未选择要删除的数据");
return; return;
@ -327,7 +326,7 @@ export default {
}); });
}, },
}, },
mounted() { mounted () {
this.init(); this.init();
}, },
}; };

View File

@ -165,6 +165,8 @@ export default {
return h("Tag", { props: { color: "green" } }, "审核通过"); return h("Tag", { props: { color: "green" } }, "审核通过");
} else if (params.row.applyStatus == "SUCCESS") { } else if (params.row.applyStatus == "SUCCESS") {
return h("Tag", { props: { color: "blue" } }, "提现成功"); return h("Tag", { props: { color: "blue" } }, "提现成功");
} else if (params.row.applyStatus == "ERROR") {
return h("Tag", { props: { color: "blue" } }, "提现失败");
} else { } else {
return h("Tag", { props: { color: "red" } }, "审核拒绝"); return h("Tag", { props: { color: "red" } }, "审核拒绝");
} }
@ -249,6 +251,8 @@ export default {
return "审核通过(提现成功)"; return "审核通过(提现成功)";
} else if (val === "FAIL_AUDITING") { } else if (val === "FAIL_AUDITING") {
return "审核拒绝"; return "审核拒绝";
} else if (val === "ERROR") {
return "提现失败";
} else { } else {
return "未知状态"; return "未知状态";
} }

View File

@ -325,6 +325,7 @@ export default {
methods: { methods: {
// //
callback(val, index) { callback(val, index) {
this.selectMember.forEach(item=>{item.___selected = false})
this.$set(val, "___selected", !val.___selected); this.$set(val, "___selected", !val.___selected);
console.log(val.___selected); console.log(val.___selected);
console.log(this.selectMember); console.log(this.selectMember);

View File

@ -84,7 +84,7 @@
<dl> <dl>
<dt>实际退款金额</dt> <dt>实际退款金额</dt>
<dd> <dd>
<Input v-model="params.actualRefundPrice" style="width: 260px" /> <InputNumber :min="0" v-model="params.actualRefundPrice" style="width: 260px" />
</dd> </dd>
</dl> </dl>
<dl> <dl>

View File

@ -4,22 +4,10 @@
<Row @keydown.enter.native="handleSearch"> <Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form"> <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="订单号" prop="orderSn"> <Form-item label="订单号" prop="orderSn">
<Input <Input type="text" v-model="searchForm.orderSn" placeholder="请输入订单号" clearable style="width: 200px" />
type="text"
v-model="searchForm.orderSn"
placeholder="请输入订单号"
clearable
style="width: 200px"
/>
</Form-item> </Form-item>
<Form-item label="会员名称" prop="buyerName"> <Form-item label="会员名称" prop="buyerName">
<Input <Input type="text" v-model="searchForm.buyerName" placeholder="请输入会员名称" clearable style="width: 200px" />
type="text"
v-model="searchForm.buyerName"
placeholder="请输入会员名称"
clearable
style="width: 200px"
/>
</Form-item> </Form-item>
<Form-item label="订单状态" prop="orderStatus"> <Form-item label="订单状态" prop="orderStatus">
<Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 200px"> <Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 200px">
@ -32,274 +20,251 @@
</Select> </Select>
</Form-item> </Form-item>
<Form-item label="下单时间"> <Form-item label="下单时间">
<DatePicker <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable
v-model="selectDate" @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
type="datetimerange"
format="yyyy-MM-dd"
clearable
@on-change="selectDateRange"
placeholder="选择起始时间"
style="width: 200px"
></DatePicker>
</Form-item> </Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button> <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form> </Form>
</Row> </Row>
<Table <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10" sortable="custom"
:loading="loading" @on-sort-change="changeSort"></Table>
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"> <Row type="flex" justify="end" class="mt_10">
<Page <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
:current="searchForm.pageNumber" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator
:total="total" show-sizer></Page>
: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> </Row>
</Card> </Card>
</div> </div>
</template> </template>
<script> <script>
import * as API_Order from "@/api/order"; import * as API_Order from "@/api/order";
export default { export default {
name: "fictitiousOrderList", name: "fictitiousOrderList",
data() { data () {
return { return {
loading: true, // loading: true, //
searchForm: { searchForm: {
// //
pageNumber: 1, // pageNumber: 1, //
pageSize: 10, // pageSize: 10, //
sort: "", // sort: "", //
order: "", // order: "", //
startDate: "", // startDate: "", //
endDate: "", // endDate: "", //
orderType: "VIRTUAL", orderType: "VIRTUAL",
orderSn: "", orderSn: "",
buyerName: "", buyerName: "",
orderStatus: "" orderStatus: ""
},
selectDate: null, //
columns: [
{
title: "订单号",
key: "sn",
minWidth: 230,
tooltip: true
}, },
{
selectDate: null, // title: "下单时间",
columns: [ key: "createTime",
{ width: 200,
title: "订单号", },
key: "sn", {
minWidth: 230, title: "订单来源",
tooltip: true key: "clientType",
}, width: 95,
{ render: (h, params) => {
title: "下单时间", if (params.row.clientType == "H5") {
key: "createTime", return h("div", {}, "移动端");
width: 200, } else if (params.row.clientType == "PC") {
}, return h("div", {}, "PC端");
{ } else if (params.row.clientType == "WECHAT_MP") {
title: "订单来源", return h("div", {}, "小程序端");
key: "clientType", } else if (params.row.clientType == "APP") {
width: 95, return h("div", {}, "移动应用端");
render: (h, params) => { } else {
if (params.row.clientType == "H5") { return h("div", {}, params.row.clientType);
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: "操作", title: "买家名称",
key: "action", key: "memberName",
align: "center", width: 130,
width: 200, },
render: (h, params) => { {
return h("div", [ title: "订单金额",
h( key: "flowPrice",
"Button", minWidth: 120,
sortable: true,
{ render: (h, params) => {
props: { return h(
type: "primary", "div",
size: "small", this.$options.filters.unitPrice(params.row.flowPrice, "¥")
}, );
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);
},
},
},
"查看"
),
]);
},
}, },
], },
data: [], //
total: 0, // {
}; title: "订单状态",
}, key: "orderStatus",
methods: { width: 95,
// render: (h, params) => {
init() { if (params.row.orderStatus == "UNPAID") {
this.getDataList(); return h("div", [h("tag", { props: { color: "magenta" } }, "未付款")]);
}, } else if (params.row.orderStatus == "PAID") {
// return h("div", [h("tag", { props: { color: "blue" } }, "已付款")]);
changePage(v) { } else if (params.row.orderStatus == "COMPLETED") {
this.searchForm.pageNumber = v; return h("div", [h("tag", { props: { color: "green" } }, "已完成")]);
this.getDataList(); } else if (params.row.orderStatus == "TAKE") {
}, return h("div", [h("tag", { props: { color: "volcano" } }, "待核验")]);
// } else if (params.row.orderStatus == "CANCELLED") {
changePageSize(v) { return h("div", [h("tag", { props: { color: "red" } }, "已取消")]);
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; {
}, title: "操作",
// key: "action",
confirmPrice(v) { align: "center",
this.$Modal.confirm({ width: 200,
title: "确认收款", render: (h, params) => {
content: "您确定要收款吗?", return h("div", [
loading: true, h(
onOk: () => { "Button",
API_Order.orderPay(v.sn).then(res => {
if(res.success){ {
this.$Message.success("收款成功") props: {
this.getDataList() type: "primary",
} size: "small",
this.$Modal.remove(); },
}) 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);
},
},
},
"查看"
),
]);
}, },
}); },
],
}, data: [], //
// total: 0, //
detail(v) { };
let sn = v.sn; },
this.$router.push({ methods: {
name: "order-detail", //
query: {sn: sn}, 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> </script>

View File

@ -4,24 +4,12 @@
<Card style="height: 60px"> <Card style="height: 60px">
<div style=""> <div style="">
<Button v-if="allowOperation.editPrice" @click="modifyPrice"></Button> <Button v-if="allowOperation.editPrice" @click="modifyPrice"></Button>
<Button <Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary" ghost>修改收货地址</Button>
v-if="allowOperation.editConsignee" <Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost>订单取消</Button>
@click="editAddress" <Button v-if="orderInfo.order.orderStatus === 'UNPAID'" @click="confirmPrice" type="primary"></Button>
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="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> </div>
</Card> </Card>
<Card class="mt_10 clearfix"> <Card class="mt_10 clearfix">
@ -66,10 +54,8 @@
</div> </div>
</div> </div>
<div <div class="div-item"
class="div-item" v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId">
v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId"
>
<div class="div-item-left">发票税号</div> <div class="div-item-left">发票税号</div>
<div class="div-item-right"> <div class="div-item-right">
{{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }} {{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }}
@ -81,8 +67,8 @@
<div class="div-item-right"> <div class="div-item-right">
{{ {{
orderInfo.receipt && orderInfo.receipt.receiptContent orderInfo.receipt && orderInfo.receipt.receiptContent
? orderInfo.receipt.receiptContent ? orderInfo.receipt.receiptContent
: "暂无" : "暂无"
}} }}
</div> </div>
</div> </div>
@ -92,8 +78,8 @@
<div class="div-item-right"> <div class="div-item-right">
{{ {{
orderInfo.receipt && orderInfo.receipt.receiptPrice orderInfo.receipt && orderInfo.receipt.receiptPrice
? orderInfo.receipt.receiptPrice ? orderInfo.receipt.receiptPrice
: "暂无" | unitPrice("¥") : "暂无" | unitPrice("¥")
}} }}
</div> </div>
</div> </div>
@ -101,7 +87,7 @@
<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-left">是否开票</div>
<div class="div-item-right"> <div class="div-item-right">
{{ orderInfo.receipt?(orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开"):"空" }} {{ orderInfo.receipt ? (orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开") : "空" }}
</div> </div>
</div> </div>
</div> </div>
@ -127,12 +113,12 @@
<div class="div-item-right">{{ orderInfo.order.remark }}</div> <div class="div-item-right">{{ orderInfo.order.remark }}</div>
</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-left">发票信息</div>
<div class="div-item-right">暂无发票信息</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-left">发票抬头</div>
<div class="div-item-right"> <div class="div-item-right">
{{ {{
@ -141,10 +127,8 @@
</div> </div>
</div> </div>
<div <div class="div-item"
class="div-item" v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId">
v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId"
>
<div class="div-item-left">发票税号</div> <div class="div-item-left">发票税号</div>
<div class="div-item-right"> <div class="div-item-right">
{{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }} {{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }}
@ -156,8 +140,8 @@
<div class="div-item-right"> <div class="div-item-right">
{{ {{
orderInfo.receipt && orderInfo.receipt.receiptContent orderInfo.receipt && orderInfo.receipt.receiptContent
? orderInfo.receipt.receiptContent ? orderInfo.receipt.receiptContent
: "暂无" : "暂无"
}} }}
</div> </div>
</div> </div>
@ -167,8 +151,8 @@
<div class="div-item-right"> <div class="div-item-right">
{{ {{
orderInfo.receipt && orderInfo.receipt.receiptPrice orderInfo.receipt && orderInfo.receipt.receiptPrice
? orderInfo.receipt.receiptPrice ? orderInfo.receipt.receiptPrice
: "暂无" | unitPrice("¥") : "暂无" | unitPrice("¥")
}} }}
</div> </div>
</div> </div>
@ -176,11 +160,11 @@
<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-left">是否开票</div>
<div class="div-item-right"> <div class="div-item-right">
{{ orderInfo.receipt?(orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开"):"空" }} {{ orderInfo.receipt ? (orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开") : "空" }}
</div> </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-left">配送方式</div>
<div class="div-item-right"> <div class="div-item-right">
{{ orderInfo.deliveryMethodValue }} {{ orderInfo.deliveryMethodValue }}
@ -189,22 +173,12 @@
</div> </div>
</Card> </Card>
<Card class="mt_10"> <Card class="mt_10">
<Table <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom">
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
sortable="custom"
>
<!-- 商品栏目格式化 --> <!-- 商品栏目格式化 -->
<template slot="goodsSlot" slot-scope="{ row }"> <template slot="goodsSlot" slot-scope="{ row }">
<div style="margin-top: 5px; height: 80px; display: flex"> <div style="margin-top: 5px; height: 80px; display: flex">
<div style=""> <div style="">
<img <img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" />
:src="row.image"
style="height: 60px; margin-top: 1px; width: 60px"
/>
</div> </div>
<div style="margin-left: 13px"> <div style="margin-left: 13px">
@ -216,28 +190,12 @@
{{ key }} : {{ item }} {{ key }} : {{ item }}
</span> </span>
</span> </span>
<Poptip <Poptip trigger="hover" style="display: block" title="扫码在手机中查看" transfer>
trigger="hover"
style="display: block"
title="扫码在手机中查看"
transfer
>
<div slot="content"> <div slot="content">
<vue-qr <vue-qr :text="wapLinkTo(row.goodsId, row.skuId)" :margin="0" colorDark="#000" colorLight="#fff"
:text="wapLinkTo(row.goodsId, row.skuId)" :size="150"></vue-qr>
:margin="0"
colorDark="#000"
colorLight="#fff"
:size="150"
></vue-qr>
</div> </div>
<img <img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" />
src="../../../assets/qrcode.svg"
class="hover-pointer"
width="20"
height="20"
alt=""
/>
</Poptip> </Poptip>
</div> </div>
</div> </div>
@ -251,58 +209,56 @@
orderInfo.order.priceDetailDTO.goodsPrice | unitPrice("¥") orderInfo.order.priceDetailDTO.goodsPrice | unitPrice("¥")
}}</span> }}</span>
</li> </li>
<li <li v-if="
v-if=" orderInfo.order.priceDetailDTO.discountPrice &&
orderInfo.order.priceDetailDTO.discountPrice && orderInfo.order.priceDetailDTO.discountPrice > 0
orderInfo.order.priceDetailDTO.discountPrice > 0 ">
"
>
<span class="label">优惠金额</span> <span class="label">优惠金额</span>
<span class="txt"> <span class="txt">
{{ orderInfo.order.priceDetailDTO.discountPrice | unitPrice("¥") }} {{ orderInfo.order.priceDetailDTO.discountPrice | unitPrice("¥") }}
</span> </span>
</li> </li>
<li <li v-if="
v-if=" orderInfo.order.priceDetailDTO.couponPrice &&
orderInfo.order.priceDetailDTO.couponPrice && orderInfo.order.priceDetailDTO.couponPrice > 0
orderInfo.order.priceDetailDTO.couponPrice > 0 ">
"
>
<span class="label">优惠券金额</span> <span class="label">优惠券金额</span>
<span class="txt"> <span class="txt">
{{ orderInfo.order.priceDetailDTO.couponPrice | unitPrice("¥") }} {{ orderInfo.order.priceDetailDTO.couponPrice | unitPrice("¥") }}
</span> </span>
</li> </li>
<li v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''"> <li
<div class="label"> v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
<Poptip trigger="hover" placement="left" width="200"> <div class="label">
<Icon v-if="typeList.length > 0" type="ios-alert-outline" size="17" @click="getOrderPrice" color="#cc0000"/> <Poptip trigger="hover" placement="left" width="200">
<template #content> <Icon v-if="typeList.length > 0" type="ios-alert-outline" size="17" @click="getOrderPrice"
<div class="api" style="text-align:left;"> color="#cc0000" />
<table> <template #content>
<thead> <div class="api" style="text-align:left;">
<tr> <table>
<thead>
<tr>
<th>优惠详情</th> <th>优惠详情</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(item,index) in typeList" :key="index"> <tr v-for="(item, index) in typeList" :key="index">
<td>{{item.promotionName}}</td> <td>{{ item.promotionName }}</td>
<td>¥{{ item.discountPrice | unitPrice }}</td> <td>¥{{ item.discountPrice | unitPrice }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</template> </template>
</Poptip> </Poptip>
<span>优惠详情</span> <span>优惠详情</span>
</div> </div>
</li> </li>
<!-- <li v-if="showPrices"> <!-- <li v-if="showPrices">
<span class="label" style="color: #cc0000;font-size: 14px;" v-if="typeList.length > 0" >优惠详情</span> <span class="label" style="color: #cc0000;font-size: 14px;" v-if="typeList.length > 0" >优惠详情</span>
</li> --> </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="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="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> <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>
<li v-if="orderInfo.order.priceDetailDTO.updatePrice"> <li v-if="orderInfo.order.priceDetailDTO.updatePrice">
<span class="label">修改金额</span> <span class="label">修改金额</span>
<span class="txt theme_color" <span class="txt theme_color">¥{{ orderInfo.order.priceDetailDTO.updatePrice | unitPrice }}</span>
>¥{{ orderInfo.order.priceDetailDTO.updatePrice | unitPrice }}</span
>
</li> </li>
<li v-if="orderInfo.order.priceDetailDTO.payPoint != 0"> <li v-if="orderInfo.order.priceDetailDTO.payPoint != 0">
<span class="label">使用积分</span> <span class="label">使用积分</span>
@ -330,9 +284,7 @@
</li> </li>
<li> <li>
<span class="label">应付金额</span> <span class="label">应付金额</span>
<span class="txt flowPrice" <span class="txt flowPrice">¥{{ orderInfo.order.priceDetailDTO.flowPrice | unitPrice }}</span>
>¥{{ orderInfo.order.priceDetailDTO.flowPrice | unitPrice }}</span
>
</li> </li>
</ul> </ul>
</div> </div>
@ -345,20 +297,10 @@
<span>修改金额</span> <span>修改金额</span>
</p> </p>
<div> <div>
<Form <Form ref="modifyPriceForm" :model="modifyPriceForm" label-position="left" :label-width="70"
ref="modifyPriceForm" :rules="modifyPriceValidate">
:model="modifyPriceForm"
label-position="left"
:label-width="70"
:rules="modifyPriceValidate"
>
<FormItem label="订单金额" prop="price"> <FormItem label="订单金额" prop="price">
<InputNumber <InputNumber style="width: 100px" v-model="modifyPriceForm.price" :min="0" :max="999999"></InputNumber>
style="width: 100px"
v-model="modifyPriceForm.price"
:min="0"
:max="999999"
></InputNumber>
<span class="ml_10"></span> <span class="ml_10"></span>
</FormItem> </FormItem>
</Form> </Form>
@ -375,20 +317,11 @@
<span>订单取消</span> <span>订单取消</span>
</p> </p>
<div> <div>
<Form <Form ref="orderCancelForm" :model="orderCancelForm" label-position="left" :label-width="100"
ref="orderCancelForm" :rules="orderCancelValidate">
:model="orderCancelForm"
label-position="left"
:label-width="100"
:rules="orderCancelValidate"
>
<FormItem label="取消原因" prop="reason"> <FormItem label="取消原因" prop="reason">
<Input <Input v-model="orderCancelForm.reason" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
v-model="orderCancelForm.reason" placeholder="请输入取消原因"></Input>
type="textarea"
:autosize="{ minRows: 2, maxRows: 5 }"
placeholder="请输入取消原因"
></Input>
</FormItem> </FormItem>
</Form> </Form>
</div> </div>
@ -404,55 +337,22 @@
<span>修改收件信息</span> <span>修改收件信息</span>
</p> </p>
<div> <div>
<Form <Form ref="addressForm" :model="addressForm" label-position="left" :label-width="100" :rules="addressRule">
ref="addressForm"
:model="addressForm"
label-position="left"
:label-width="100"
:rules="addressRule"
>
<FormItem label="收件人" prop="consigneeName"> <FormItem label="收件人" prop="consigneeName">
<Input <Input v-model="addressForm.consigneeName" size="large" maxlength="20"></Input>
v-model="addressForm.consigneeName"
size="large"
maxlength="20"
></Input>
</FormItem> </FormItem>
<FormItem label="联系方式" prop="consigneeMobile"> <FormItem label="联系方式" prop="consigneeMobile">
<Input <Input v-model="addressForm.consigneeMobile" size="large" maxlength="11"></Input>
v-model="addressForm.consigneeMobile"
size="large"
maxlength="11"
></Input>
</FormItem> </FormItem>
<FormItem label="地址信息" prop="consigneeAddressPath"> <FormItem label="地址信息" prop="consigneeAddressPath">
<Input <Input v-model="addr" disabled style="width: 305px" v-if="showRegion == false" />
v-model="addr" <Button v-if="showRegion == false" @click="regionClick" :loading="submitLoading" type="primary"
disabled icon="ios-create-outline" style="margin-left: 8px">修改
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> </Button>
<region <region style="width: 400px" @selected="selectedRegion" v-if="showRegion == true" />
style="width: 400px"
@selected="selectedRegion"
v-if="showRegion == true"
/>
</FormItem> </FormItem>
<FormItem label="详细地址" prop="consigneeDetail"> <FormItem label="详细地址" prop="consigneeDetail">
<Input <Input v-model="addressForm.consigneeDetail" size="large" maxlength="50"></Input>
v-model="addressForm.consigneeDetail"
size="large"
maxlength="50"
></Input>
</FormItem> </FormItem>
</Form> </Form>
</div> </div>
@ -467,69 +367,67 @@
<span>订单日志</span> <span>订单日志</span>
</p> </p>
<div class="order-log-div"> <div class="order-log-div">
<Table <Table :loading="loading" border :columns="orderLogColumns" :data="orderInfo.orderLogs" ref="table"
:loading="loading" sortable="custom"></Table>
border
:columns="orderLogColumns"
:data="orderInfo.orderLogs"
ref="table"
sortable="custom"
></Table>
</div> </div>
<div slot="footer" style="text-align: right"> <div slot="footer" style="text-align: right">
<Button @click="handelCancel"></Button> <Button @click="handelCancel"></Button>
</div> </div>
</Modal> </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;"> <p slot="header" style="line-height:26px;height:26px;">
<span style="float: left;">打印发货单</span> <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> </p>
<div style="max-height:500px;overflow-y:auto;overflow-x:hidden;"> <div style="max-height:500px;overflow-y:auto;overflow-x:hidden;">
<div id="printInfo"> <div id="printInfo">
<Row v-if="orderInfo.order.remark !== ''"> <Row v-if="orderInfo.order.remark !== ''">
<Col span="24"> <Col span="24">
<p class="lineH30 f14">备注{{ orderInfo.order.remark }}</p> <p class="lineH30 f14">备注{{ orderInfo.order.remark }}</p>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="12"> <Col span="12">
<p class="lineH30 f14">收件人{{ orderInfo.order.consigneeName }}</p> <p class="lineH30 f14">收件人{{ orderInfo.order.consigneeName }}</p>
</Col> </Col>
<Col span="12" v-if="orderInfo.order.consigneeMobile"> <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-if="printHiddenFlag">{{
<p class="lineH30 f14" v-else>{{ orderInfo.order.consigneeMobile }}</p> orderInfo.order.consigneeMobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</p>
</Col> <p class="lineH30 f14" v-else>{{ orderInfo.order.consigneeMobile }}</p>
</Col>
</Row> </Row>
<Row> <Row>
<Col span="24"> <Col span="24">
<p class="lineH30 f14">收货地址{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}</p> <p class="lineH30 f14">收货地址{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}
</Col> </p>
</Col>
</Row> </Row>
<Row> <Row>
<Col span="24"> <Col span="24">
<p class="printgoodtitle">商品信息</p> <p class="printgoodtitle">商品信息</p>
<div class="printgoodinfo"> <div class="printgoodinfo">
<div v-for="(item,index) in orderInfo.orderItems" :key="index" class="printgooditem"> <div v-for="(item, index) in orderInfo.orderItems" :key="index" class="printgooditem">
<div class="printgoodname"> <div class="printgoodname">
<p>{{item.goodsName}}</p> <p>{{ item.goodsName }}</p>
<div class="printgoodguid"> <div class="printgoodguid">
<span v-for="(itemchild, keychild) in JSON.parse(item.specs)" :key="keychild"> <span v-for="(itemchild, keychild) in JSON.parse(item.specs)" :key="keychild">
<span class="printgoodguiditem" v-if="keychild != 'images'"> <span class="printgoodguiditem" v-if="keychild != 'images'">
{{ keychild }} : {{ itemchild }} {{ keychild }} : {{ itemchild }}
</span> </span>
</span> </span>
</div>
</div>
<span class="printgoodnumber">数量{{item.num}}</span>
</div> </div>
</div> </div>
</Col> <span class="printgoodnumber">数量{{ item.num }}</span>
</div>
</div>
</Col>
</Row> </Row>
</div> </div>
</div> </div>
<div slot="footer" style="text-align: right"> <div slot="footer" style="text-align: right">
<Button @click="printModal = false">关闭</Button> <Button @click="printModal = false">关闭</Button>
<Button type="primary" v-print="printInfoObj"></Button> <Button type="primary" v-print="printInfoObj"></Button>
@ -549,15 +447,15 @@ export default {
region, region,
"vue-qr": vueQr, "vue-qr": vueQr,
}, },
data() { data () {
return { return {
typeList:[], typeList: [],
showPrices:false, showPrices: false,
printHiddenFlag:false,// printHiddenFlag: false,//
printInfoObj:{ printInfoObj: {
id: "printInfo",//id # id: "printInfo",//id #
popTitle:'&nbsp;',// undefined 使html popTitle: '&nbsp;',// undefined 使html
extraHead:'',// extraHead: '',//
}, },
loading: false, // loading: false, //
submitLoading: false, // submitLoading: false, //
@ -612,7 +510,7 @@ export default {
reason: [{ required: true, message: "取消原因不能为空", trigger: "blur" }], reason: [{ required: true, message: "取消原因不能为空", trigger: "blur" }],
}, },
addressModal: false, // addressModal: false, //
printModal:false, printModal: false,
// //
addressForm: { addressForm: {
consigneeName: "", consigneeName: "",
@ -732,21 +630,21 @@ export default {
}; };
}, },
watch: { watch: {
$route(to, from) { $route (to, from) {
this.$router.go(0); this.$router.go(0);
}, },
}, },
methods: { methods: {
gotoHomes(){ gotoHomes () {
return false return false
}, },
// //
regionClick() { regionClick () {
this.showRegion = true; this.showRegion = true;
this.regionId = ""; this.regionId = "";
}, },
// //
confirmPrice() { confirmPrice () {
this.$Modal.confirm({ this.$Modal.confirm({
title: "提示", title: "提示",
content: content:
@ -763,30 +661,30 @@ export default {
}, },
}); });
}, },
getOrderPrice(){ getOrderPrice () {
if(this.showPrices){ if (this.showPrices) {
this.showPrices = false this.showPrices = false
}else if(!this.showPrices){ } else if (!this.showPrices) {
this.showPrices = true this.showPrices = true
} }
}, },
getContentPrice(){ getContentPrice () {
for (let i = 0; i < this.typeList.length; i++) { for (let i = 0; i < this.typeList.length; i++) {
for (let j = i + 1; j < this.typeList.length; j++) { for (let j = i + 1; j < this.typeList.length; j++) {
if (this.typeList[i].promotionId === this.typeList[j].promotionId) { if (this.typeList[i].promotionId === this.typeList[j].promotionId) {
this.typeList[i].discountPrice = this.typeList[i].discountPrice + this.typeList[j].discountPrice this.typeList[i].discountPrice = this.typeList[i].discountPrice + this.typeList[j].discountPrice
this.typeList.splice(j, 1) this.typeList.splice(j, 1)
}
} }
} }
console.log(this.typeList) }
if(this.typeList.length >= 3){ console.log(this.typeList)
console.log(123123) if (this.typeList.length >= 3) {
this.getContentPrice() console.log(123123)
} this.getContentPrice()
}, }
},
// //
getDataList() { getDataList () {
this.loading = true; this.loading = true;
API_Order.orderDetail(this.sn).then((res) => { API_Order.orderDetail(this.sn).then((res) => {
this.loading = false; this.loading = false;
@ -800,13 +698,13 @@ export default {
} }
}); });
}, },
modifyPrice() { modifyPrice () {
// //
this.modifyPriceForm.price = this.orderInfo.order.flowPrice; this.modifyPriceForm.price = this.orderInfo.order.flowPrice;
this.modal = true; this.modal = true;
}, },
// //
modifyPriceSubmit() { modifyPriceSubmit () {
this.$refs.modifyPriceForm.validate((valid) => { this.$refs.modifyPriceForm.validate((valid) => {
if (valid) { if (valid) {
API_Order.updateOrderPrice(this.sn, this.modifyPriceForm).then((res) => { API_Order.updateOrderPrice(this.sn, this.modifyPriceForm).then((res) => {
@ -820,16 +718,16 @@ export default {
}); });
}, },
// //
selectedRegion(val) { selectedRegion (val) {
this.addr = val[1]; this.addr = val[1];
this.regionId = val[0]; this.regionId = val[0];
}, },
// //
orderCancel() { orderCancel () {
this.orderCancelModal = true; this.orderCancelModal = true;
}, },
// //
orderCancelSubmit() { orderCancelSubmit () {
this.$refs.orderCancelForm.validate((valid) => { this.$refs.orderCancelForm.validate((valid) => {
if (valid) { if (valid) {
API_Order.orderCancel(this.sn, this.orderCancelForm).then((res) => { API_Order.orderCancel(this.sn, this.orderCancelForm).then((res) => {
@ -843,25 +741,25 @@ export default {
}); });
}, },
// //
orderLog() { orderLog () {
this.orderLogModal = true; this.orderLogModal = true;
}, },
// //
handelCancel() { handelCancel () {
this.orderLogModal = false; this.orderLogModal = false;
}, },
// //
printOrder(){ printOrder () {
this.printModal = true; this.printModal = true;
}, },
printHiddenInfo(){ printHiddenInfo () {
this.printHiddenFlag = !this.printHiddenFlag; this.printHiddenFlag = !this.printHiddenFlag;
}, },
printCancel(){ printCancel () {
// this.printHiddenFlag = false; // this.printHiddenFlag = false;
}, },
// //
editAddress() { editAddress () {
this.addressModal = true; this.addressModal = true;
this.showRegion = false; this.showRegion = false;
this.addr = this.orderInfo.order.consigneeAddressPath; this.addr = this.orderInfo.order.consigneeAddressPath;
@ -873,7 +771,7 @@ export default {
this.addressForm.consigneeAddressIdPath = this.orderInfo.order.consigneeAddressIdPath; this.addressForm.consigneeAddressIdPath = this.orderInfo.order.consigneeAddressIdPath;
}, },
// //
editAddressSubmit() { editAddressSubmit () {
if (this.regionId == "") { if (this.regionId == "") {
this.$Message.error("请选择地址"); this.$Message.error("请选择地址");
return; return;
@ -893,16 +791,17 @@ export default {
}); });
}, },
}, },
mounted() { mounted () {
this.sn = this.$route.query.sn; this.sn = this.$route.query.sn;
this.getDataList(); this.getDataList();
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.lineH30{ .lineH30 {
line-height: 30px; line-height: 30px;
} }
.order-log-div { .order-log-div {
line-height: 30px; line-height: 30px;
overflow-y: scroll; overflow-y: scroll;
@ -939,11 +838,11 @@ export default {
line-height: 35px; line-height: 35px;
display: flex; display: flex;
> .div-item-left { >.div-item-left {
width: 80px; width: 80px;
} }
> .div-item-right { >.div-item-right {
flex: 1; flex: 1;
word-break: break-all; word-break: break-all;
} }
@ -1000,24 +899,28 @@ export default {
} }
} }
} }
.f14{
.f14 {
font-size: 14px; font-size: 14px;
color: #333; color: #333;
} }
.printgoodtitle{
.printgoodtitle {
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
margin-top: 15px; margin-top: 15px;
color: #333; color: #333;
} }
.printgoodinfo{
.printgoodinfo {
// font-size: 14px; // font-size: 14px;
// background: #f2f2f2; // background: #f2f2f2;
// border-bottom:2px solid #333 ; // border-bottom:2px solid #333 ;
padding: 10px; padding: 10px;
overflow: hidden; overflow: hidden;
color: #333; color: #333;
.printgooditem{
.printgooditem {
border-bottom: 1px solid #e8eaec; border-bottom: 1px solid #e8eaec;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -1025,35 +928,43 @@ export default {
line-height: 30px; line-height: 30px;
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 10px; padding-bottom: 10px;
.printgoodname{
.printgoodname {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
.printgoodguid{
.printgoodguid {
font-size: 12px; font-size: 12px;
color:#999999; color: #999999;
line-height:1.5; line-height: 1.5;
.printgoodguiditem{
.printgoodguiditem {
margin-right: 10px; margin-right: 10px;
} }
} }
} }
.printgoodprice{
.printgoodprice {
width: 135px; width: 135px;
margin-left: 15px; margin-left: 15px;
} }
.printgoodnumber{
.printgoodnumber {
width: 85px; width: 85px;
margin-left: 15px; margin-left: 15px;
} }
} }
} }
@media print { @media print {
@page{ @page {
size: auto; size: auto;
margin: 3mm; margin: 3mm;
} }
html,body{
height:inherit; html,
body {
height: inherit;
} }
} }
</style> </style>

View File

@ -28,7 +28,8 @@
</template> </template>
<template slot-scope="{ index }" slot="settlementPrice"> <template slot-scope="{ index }" slot="settlementPrice">
<Input <InputNumber
:min="0"
type="number" type="number"
v-model="promotionGoodsList[index].settlementPrice" v-model="promotionGoodsList[index].settlementPrice"
/> />
@ -54,10 +55,18 @@
</Select> </Select>
</template> </template>
<template slot-scope="{ index }" slot="activeStock"> <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>
<template slot-scope="{ index }" slot="points"> <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> </template>
</Table> </Table>
</FormItem> </FormItem>
@ -370,8 +379,8 @@ export default {
settlementPrice: e.settlementPrice || 0, settlementPrice: e.settlementPrice || 0,
pointsGoodsCategoryId: e.pointsGoodsCategoryId || 0, pointsGoodsCategoryId: e.pointsGoodsCategoryId || 0,
pointsGoodsCategoryName: e.pointsGoodsCategoryName || "", pointsGoodsCategoryName: e.pointsGoodsCategoryName || "",
activeStock: e.activeStock || 0, activeStock: e.activeStock || 1,
points: e.points || 0, points: e.points || 1,
skuId: e.id, skuId: e.id,
goodsId: e.goodsId, goodsId: e.goodsId,
originalPrice: e.price || 0, originalPrice: e.price || 0,

View File

@ -96,7 +96,7 @@ export default {
pointsGoodsCategoryId:'', pointsGoodsCategoryId:'',
pointsGoodsCategoryName:'', pointsGoodsCategoryName:'',
form: { form: {
/** 活动名称 */ /** 活动名称 */
promotionName: "", promotionName: "",
/** 报名截止时间 */ /** 报名截止时间 */
@ -109,7 +109,7 @@ export default {
seckillRule: "", seckillRule: "",
goodsSku: {}, goodsSku: {},
promotionStatus: "NEW", promotionStatus: "NEW",
}, },
categoryList: [], // categoryList: [], //
id: this.$route.query.id, // id id: this.$route.query.id, // id
@ -118,6 +118,7 @@ export default {
settlementPrice: [{ required: true, message: "请填写结算价格" }], settlementPrice: [{ required: true, message: "请填写结算价格" }],
pointsGoodsCategoryId: [{ required: true, message: "请选择积分商品分类" }], pointsGoodsCategoryId: [{ required: true, message: "请选择积分商品分类" }],
points: [{ required: true, message: "请填写兑换积分" }], points: [{ required: true, message: "请填写兑换积分" }],
activeStock: [{ required: true, message: "请填写库存" }],
}, },
options: { options: {
disabledDate(date) { disabledDate(date) {

View File

@ -130,11 +130,11 @@
<div class="ant-col-md-6"> <div class="ant-col-md-6">
<p class="item"> <p class="item">
<span class="label">法人姓名</span> <span class="label">法人姓名</span>
<span class="info">{{storeInfo.legalName}}</span> <span class="info">{{storeInfo.legalName}}</span>
</p> </p>
<p class="item"> <p class="item">
<span class="label">法人身份证</span> <span class="label">法人身份证</span>
<span class="info">{{storeInfo.legalId}}</span> <span class="info">{{storeInfo.legalId}}</span>
</p> </p>
<p class="item"> <p class="item">
<span class="label">身份证照片</span> <span class="label">身份证照片</span>

View File

@ -2,7 +2,7 @@
<div class="layout"> <div class="layout">
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate"> <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"> <RadioGroup v-model="formValidate.type" type="button">
<Radio label="ALI_OSS">阿里OSS</Radio> <Radio label="ALI_OSS">阿里OSS</Radio>
<Radio label="MINIO">MINIO</Radio> <Radio label="MINIO">MINIO</Radio>
@ -11,68 +11,68 @@
</RadioGroup> </RadioGroup>
</FormItem> </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"/> <Input v-model="formValidate.aliyunOSSEndPoint"/>
</FormItem> </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"/> <Input v-model="formValidate.aliyunOSSBucketName"/>
</FormItem> </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"/> <Input v-model="formValidate.aliyunOSSPicLocation"/>
</FormItem> </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"/> <Input v-model="formValidate.aliyunOSSAccessKeyId"/>
</FormItem> </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"/> <Input v-model="formValidate.aliyunOSSAccessKeySecret"/>
</FormItem> </FormItem>
<!-- MINIO存储--> <!-- 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"/> <Input v-model="formValidate.m_frontUrl"/>
<span class="desc">配置MINIO nginx前端访问转发地址一般为完整域名例如https://minio.pickmall.cn</span> <span class="desc">配置MINIO nginx前端访问转发地址一般为完整域名例如https://minio.pickmall.cn</span>
</FormItem> </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"/> <Input v-model="formValidate.m_endpoint"/>
</FormItem> </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"/> <Input v-model="formValidate.m_accessKey"/>
</FormItem> </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"/> <Input v-model="formValidate.m_secretKey"/>
</FormItem> </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"/> <Input v-model="formValidate.m_bucketName"/>
</FormItem> </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"/> <Input v-model="formValidate.huaweicloudOBSAccessKey"/>
</FormItem> </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"/> <Input v-model="formValidate.huaweicloudOBSSecretKey"/>
</FormItem> </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"/> <Input v-model="formValidate.huaweicloudOBSEndPoint"/>
</FormItem> </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"/> <Input v-model="formValidate.huaweicloudOBSBucketName"/>
</FormItem> </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"/> <Input v-model="formValidate.tencentCOSSecretId"/>
</FormItem> </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"/> <Input v-model="formValidate.tencentCOSSecretKey"/>
</FormItem> </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"/> <Input v-model="formValidate.tencentCOSRegion"/>
</FormItem> </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"/> <Input v-model="formValidate.tencentCOSBucket"/>
</FormItem> </FormItem>
@ -179,3 +179,4 @@ export default {
color: #999; color: #999;
} }
</style> </style>

View File

@ -94,7 +94,7 @@
<dl v-if="params.serviceStatus == 'PASS'"> <dl v-if="params.serviceStatus == 'PASS'">
<dt>实际退款金额</dt> <dt>实际退款金额</dt>
<dd> <dd>
<Input v-model="params.actualRefundPrice" style="width:260px" /> <InputNumber :min="0" v-model="params.actualRefundPrice" style="width:260px" />
</dd> </dd>
</dl> </dl>
<dl> <dl>

View File

@ -487,7 +487,7 @@ export default {
liliMap, liliMap,
region, region,
}, },
data() { data () {
return { return {
typeList: [], typeList: [],
showPrices: false, showPrices: false,
@ -693,27 +693,27 @@ export default {
}, },
methods: { methods: {
// //
regionClick() { regionClick () {
this.showRegion = true; this.showRegion = true;
this.regionId = ""; this.regionId = "";
}, },
// //
orderTake() { orderTake () {
this.orderTakeForm.qrCode = this.orderInfo.order.verificationCode; this.orderTakeForm.qrCode = this.orderInfo.order.verificationCode;
this.orderTakeModal = true; this.orderTakeModal = true;
}, },
// //
printOrder() { printOrder () {
this.printModal = true; this.printModal = true;
}, },
printHiddenInfo() { printHiddenInfo () {
this.printHiddenFlag = !this.printHiddenFlag; this.printHiddenFlag = !this.printHiddenFlag;
}, },
printCancel() { printCancel () {
// this.printHiddenFlag = false; // this.printHiddenFlag = false;
}, },
// //
orderTakeSubmit() { orderTakeSubmit () {
this.$refs.orderTakeForm.validate((valid) => { this.$refs.orderTakeForm.validate((valid) => {
if (valid) { if (valid) {
API_Order.orderTake(this.sn, this.orderTakeForm.qrCode).then( API_Order.orderTake(this.sn, this.orderTakeForm.qrCode).then(
@ -728,14 +728,14 @@ export default {
} }
}); });
}, },
getOrderPrice() { getOrderPrice () {
if (this.showPrices) { if (this.showPrices) {
this.showPrices = false this.showPrices = false
} else if (!this.showPrices) { } else if (!this.showPrices) {
this.showPrices = true this.showPrices = true
} }
}, },
getContentPrice() { getContentPrice () {
for (let i = 0; i < this.typeList.length; i++) { for (let i = 0; i < this.typeList.length; i++) {
for (let j = i + 1; j < this.typeList.length; j++) { for (let j = i + 1; j < this.typeList.length; j++) {
if (this.typeList[i].promotionId === this.typeList[j].promotionId) { if (this.typeList[i].promotionId === this.typeList[j].promotionId) {
@ -751,7 +751,7 @@ export default {
} }
}, },
// //
getDataDetail() { getDataDetail () {
this.loading = true; this.loading = true;
API_Order.getOrderDetail(this.sn).then((res) => { API_Order.getOrderDetail(this.sn).then((res) => {
this.loading = false; this.loading = false;
@ -766,7 +766,7 @@ export default {
} }
}); });
}, },
Toprint() { Toprint () {
this.facesheetFlag = true; this.facesheetFlag = true;
API_Logistics.getCheckedOn().then(res => { API_Logistics.getCheckedOn().then(res => {
if (res.success) { if (res.success) {
@ -776,13 +776,13 @@ export default {
}); });
}, },
// //
modifyPrice() { modifyPrice () {
// //
this.modifyPriceForm.orderPrice = this.orderInfo.order.flowPrice; this.modifyPriceForm.orderPrice = this.orderInfo.order.flowPrice;
this.modal = true; this.modal = true;
}, },
// //
modifyPriceSubmit() { modifyPriceSubmit () {
this.$refs.modifyPriceForm.validate((valid) => { this.$refs.modifyPriceForm.validate((valid) => {
if (valid) { if (valid) {
API_Order.modifyOrderPrice(this.sn, this.modifyPriceForm).then( API_Order.modifyOrderPrice(this.sn, this.modifyPriceForm).then(
@ -798,12 +798,12 @@ export default {
}); });
}, },
// //
selectedRegion(val) { selectedRegion (val) {
this.region = val[1]; this.region = val[1];
this.regionId = val[0]; this.regionId = val[0];
}, },
// //
logistics() { logistics () {
this.logisticsModal = true; this.logisticsModal = true;
API_Order.getTraces(this.sn).then((res) => { API_Order.getTraces(this.sn).then((res) => {
if (res.success && res.result != null) { if (res.success && res.result != null) {
@ -812,7 +812,7 @@ export default {
}); });
}, },
// //
orderDeliver() { orderDeliver () {
this.facesheetFlag = false this.facesheetFlag = false
if (this.logisticsType == 'SHUNFENG') { if (this.logisticsType == 'SHUNFENG') {
this.$Modal.confirm({ this.$Modal.confirm({
@ -839,7 +839,7 @@ export default {
} }
}, },
// //
sfPrint() { sfPrint () {
API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => { API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => {
if (res.success) { if (res.success) {
let headers = { let headers = {
@ -869,13 +869,13 @@ export default {
} }
}) })
}, },
Toprints() { Toprints () {
if (this.form.logisticsId != null && this.form.logisticsId != '') { if (this.form.logisticsId != null && this.form.logisticsId != '') {
this.orderDeliverModal = false; this.orderDeliverModal = false;
} }
}, },
// //
orderDeliverySubmit() { orderDeliverySubmit () {
if (this.facesheetFlag) { if (this.facesheetFlag) {
this.$refs['faceSheetForm'].validate((valid) => { this.$refs['faceSheetForm'].validate((valid) => {
if (valid) { if (valid) {
@ -904,7 +904,7 @@ export default {
} }
}, },
// //
editAddress() { editAddress () {
this.addressModal = true; this.addressModal = true;
this.showRegion = false; this.showRegion = false;
this.regionId = this.orderInfo.order.consigneeAddressIdPath; this.regionId = this.orderInfo.order.consigneeAddressIdPath;
@ -918,7 +918,7 @@ export default {
this.orderInfo.order.consigneeAddressIdPath; this.orderInfo.order.consigneeAddressIdPath;
}, },
// //
editAddressSubmit() { editAddressSubmit () {
if (this.regionId == "") { if (this.regionId == "") {
this.$Message.error("请选择地址"); this.$Message.error("请选择地址");
return; return;
@ -940,7 +940,7 @@ export default {
}); });
}, },
getLogisticsSetting() { getLogisticsSetting () {
API_Logistics.getLogisticsSetting().then(res => { API_Logistics.getLogisticsSetting().then(res => {
if (res.success) { if (res.success) {
this.logisticsType = res.result; this.logisticsType = res.result;
@ -949,13 +949,13 @@ export default {
}, },
}, },
mounted() { mounted () {
this.sn = this.$route.query.sn; this.sn = this.$route.query.sn;
this.getDataDetail(); this.getDataDetail();
this.getLogisticsSetting(); this.getLogisticsSetting();
}, },
// keepAlivetrue // keepAlivetrue
beforeRouteLeave(to, from, next) { beforeRouteLeave (to, from, next) {
if (to.name === 'orderList' || to.name === 'virtualOrderList') { if (to.name === 'orderList' || to.name === 'virtualOrderList') {
to.meta.keepAlive = true to.meta.keepAlive = true
} }

View File

@ -6,251 +6,101 @@
<h4>基本信息</h4> <h4>基本信息</h4>
<div class="form-item-view"> <div class="form-item-view">
<FormItem label="活动名称" prop="promotionName"> <FormItem label="活动名称" prop="promotionName">
<Input <Input type="text" v-model="form.promotionName" :disabled="form.promotionStatus != 'NEW'" placeholder="活动名称"
type="text" clearable style="width: 280px" />
v-model="form.promotionName"
:disabled="form.promotionStatus != 'NEW'"
placeholder="活动名称"
clearable
style="width: 280px"
/>
</FormItem> </FormItem>
<FormItem label="活动时间" prop="rangeTime"> <FormItem label="活动时间" prop="rangeTime">
<DatePicker <DatePicker type="datetimerange" v-model="form.rangeTime" :disabled="form.promotionStatus != 'NEW'"
type="datetimerange" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :options="options" style="width: 280px">
v-model="form.rangeTime"
:disabled="form.promotionStatus != 'NEW'"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择"
:options="options"
style="width: 280px"
>
</DatePicker> </DatePicker>
</FormItem> </FormItem>
<FormItem label="活动描述" prop="description"> <FormItem label="活动描述" prop="description">
<Input <Input v-model="form.description" :disabled="form.promotionStatus != 'NEW'" type="textarea" :rows="4"
v-model="form.description" clearable style="width: 280px" />
:disabled="form.promotionStatus != 'NEW'"
type="textarea"
:rows="4"
clearable
style="width: 280px"
/>
</FormItem> </FormItem>
</div> </div>
<h4>优惠设置</h4> <h4>优惠设置</h4>
<div class="form-item-view"> <div class="form-item-view">
<FormItem label="优惠门槛" prop="fullMoney"> <FormItem label="优惠门槛" prop="fullMoney">
<Input <Input type="text" v-model="form.fullMoney" :disabled="form.promotionStatus != 'NEW'" placeholder="优惠门槛"
type="text" clearable style="width: 280px" />
v-model="form.fullMoney"
:disabled="form.promotionStatus != 'NEW'"
placeholder="优惠门槛"
clearable
style="width: 280px"
/>
<span class="describe">消费达到当前金额可以参与优惠</span> <span class="describe">消费达到当前金额可以参与优惠</span>
</FormItem> </FormItem>
<FormItem label="优惠方式"> <FormItem label="优惠方式">
<RadioGroup <RadioGroup type="button" button-style="solid" v-model="form.discountType">
type="button" <Radio :disabled="form.promotionStatus != 'NEW'" label="fullMinusFlag">减现金</Radio>
button-style="solid" <Radio :disabled="form.promotionStatus != 'NEW'" label="fullRateFlag">打折</Radio>
v-model="form.discountType"
>
<Radio
:disabled="form.promotionStatus != 'NEW'"
label="fullMinusFlag"
>减现金</Radio
>
<Radio
:disabled="form.promotionStatus != 'NEW'"
label="fullRateFlag"
>打折</Radio
>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
<FormItem <FormItem v-if="form.discountType == 'fullMinusFlag'" label="优惠金额" prop="fullMinus">
v-if="form.discountType == 'fullMinusFlag'" <Input :disabled="form.promotionStatus != 'NEW'" type="text" v-model="form.fullMinus" placeholder="优惠金额"
label="优惠金额" clearable style="width: 280px" />
prop="fullMinus"
>
<Input
:disabled="form.promotionStatus != 'NEW'"
type="text"
v-model="form.fullMinus"
placeholder="优惠金额"
clearable
style="width: 280px"
/>
</FormItem> </FormItem>
<FormItem <FormItem v-if="form.discountType == 'fullRateFlag'" label="优惠折扣" prop="fullRate">
v-if="form.discountType == 'fullRateFlag'" <Input :disabled="form.promotionStatus != 'NEW'" type="text" v-model="form.fullRate" placeholder="优惠折扣"
label="优惠折扣" clearable style="width: 280px" />
prop="fullRate"
>
<Input
:disabled="form.promotionStatus != 'NEW'"
type="text"
v-model="form.fullRate"
placeholder="优惠折扣"
clearable
style="width: 280px"
/>
<span class="describe">优惠折扣为0-10之间数字可有一位小数</span> <span class="describe">优惠折扣为0-10之间数字可有一位小数</span>
</FormItem> </FormItem>
<FormItem label="额外赠送"> <FormItem label="额外赠送">
<Checkbox <Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.freeFreightFlag"></Checkbox>
:disabled="form.promotionStatus != 'NEW'" <Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.couponFlag"></Checkbox>
v-model="form.freeFreightFlag" <Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.giftFlag"></Checkbox>
>免邮费</Checkbox <Checkbox :disabled="form.promotionStatus != 'NEW'" v-if="Cookies.get('userInfoSeller') &&
> JSON.parse(Cookies.get('userInfoSeller')).selfOperated
<Checkbox " v-model="form.pointFlag">送积分</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>
<FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId"> <FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
<Select <Select v-model="form.couponId" :disabled="form.promotionStatus != 'NEW'" filterable
v-model="form.couponId" :remote-method="getCouponList" placeholder="输入优惠券名称搜索" :loading="couponLoading" style="width: 280px">
:disabled="form.promotionStatus != 'NEW'" <Option v-for="item in couponList" :value="item.id" :key="item.id">{{ item.couponName }}</Option>
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> </Select>
</FormItem> </FormItem>
<FormItem v-if="form.giftFlag" label="赠品" prop="giftId"> <FormItem v-if="form.giftFlag" label="赠品" prop="giftId">
<Select <Select :disabled="form.promotionStatus != 'NEW'" v-model="form.giftId" filterable
:disabled="form.promotionStatus != 'NEW'" :remote-method="getGiftList" placeholder="输入赠品名称搜索" :loading="giftLoading" style="width: 280px">
v-model="form.giftId" <Option v-for="item in giftList" :value="item.id" :key="item.id">
filterable
:remote-method="getGiftList"
placeholder="输入赠品名称搜索"
:loading="giftLoading"
style="width: 280px"
>
<Option
v-for="item in giftList"
:value="item.id"
:key="item.id"
>
{{ item.goodsName }} {{ item.goodsName }}
</Option </Option>
>
</Select> </Select>
</FormItem> </FormItem>
<FormItem v-if="form.pointFlag" label="赠积分" prop="point"> <FormItem v-if="form.pointFlag" label="赠积分" prop="point">
<InputNumber <InputNumber :min="0" :disabled="form.promotionStatus != 'NEW'" v-model="form.point" type="number"
:min="0" style="width: 280px" />
:disabled="form.promotionStatus != 'NEW'"
v-model="form.point"
type="number"
style="width: 280px"
/>
</FormItem> </FormItem>
<FormItem label="使用范围" prop="scopeType"> <FormItem label="使用范围" prop="scopeType">
<RadioGroup <RadioGroup type="button" button-style="solid" v-model="form.scopeType">
type="button" <Radio :disabled="form.promotionStatus != 'NEW'" label="ALL">全品类</Radio>
button-style="solid" <Radio :disabled="form.promotionStatus != 'NEW'" label="PORTION_GOODS">指定商品</Radio>
v-model="form.scopeType"
>
<Radio :disabled="form.promotionStatus != 'NEW'" label="ALL"
>全品类</Radio
>
<Radio
:disabled="form.promotionStatus != 'NEW'"
label="PORTION_GOODS"
>指定商品</Radio
>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
<FormItem <FormItem style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
style="width: 100%" <div style="display: flex; margin-bottom: 10px" v-if="form.promotionStatus == 'NEW'">
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="primary" @click="openSkuList"></Button>
<Button <Button type="error" ghost style="margin-left: 10px" @click="delSelectGoods"></Button>
type="error"
ghost
style="margin-left: 10px"
@click="delSelectGoods"
>批量删除</Button
>
</div> </div>
<Table <Table border :columns="columns" :data="form.promotionGoodsList" @on-selection-change="changeSelect">
border
:columns="columns"
:data="form.promotionGoodsList"
@on-selection-change="changeSelect"
>
<template slot-scope="{ row }" slot="QRCode"> <template slot-scope="{ row }" slot="QRCode">
<img <img :src="row.QRCode || '../../../assets/lili.png'" width="50px" height="50px" alt="" />
:src="row.QRCode || '../../../assets/lili.png'"
width="50px"
height="50px"
alt=""
/>
</template> </template>
<template slot-scope="{ index }" slot="action"> <template slot-scope="{ index }" slot="action">
<Button <Button type="error" :disabled="form.promotionStatus != 'NEW' && !!id" size="small" ghost
type="error" @click="delGoods(index)">删除</Button>
:disabled="form.promotionStatus != 'NEW' && !!id"
size="small"
ghost
@click="delGoods(index)"
>删除</Button
>
</template> </template>
</Table> </Table>
</FormItem> </FormItem>
<div> <div>
<Button type="text" @click="closeCurrentPage"></Button> <Button type="text" @click="closeCurrentPage"></Button>
<Button <Button type="primary" :disabled="form.promotionStatus != 'NEW' && !!id" :loading="submitLoading"
type="primary" @click="handleSubmit">提交</Button>
:disabled="form.promotionStatus != 'NEW' && !!id"
:loading="submitLoading"
@click="handleSubmit"
>提交</Button
>
</div> </div>
</div> </div>
</div> </div>
</Form> </Form>
</Card> </Card>
<sku-select <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
ref="skuSelect"
@selectedGoodsData="selectedGoodsData"
></sku-select>
</div> </div>
</template> </template>
@ -270,7 +120,7 @@ export default {
components: { components: {
skuSelect, skuSelect,
}, },
data() { data () {
const checkPrice = (rule, value, callback) => { const checkPrice = (rule, value, callback) => {
if (!value && value !== 0) { if (!value && value !== 0) {
return callback(new Error("面额不能为空")); return callback(new Error("面额不能为空"));
@ -369,29 +219,31 @@ export default {
}, },
], ],
options: { options: {
disabledDate(date) { disabledDate (date) {
return date && date.valueOf() < Date.now() - 86400000; return date && date.valueOf() < Date.now() - 86400000;
}, },
}, },
}; };
}, },
async mounted() { async mounted () {
if (this.id) { if (this.id) {
this.getDetail(); this.getDetail();
this.columns.shift()
this.columns.pop()
} }
await this.getCouponList(); await this.getCouponList();
await this.getGiftList(); await this.getGiftList();
}, },
methods: { methods: {
// //
closeCurrentPage() { closeCurrentPage () {
this.$store.commit("removeTag", "full-cut-detail"); this.$store.commit("removeTag", "full-cut-detail");
localStorage.storeOpenedList = JSON.stringify( localStorage.storeOpenedList = JSON.stringify(
this.$store.state.app.storeOpenedList this.$store.state.app.storeOpenedList
); );
this.$router.go(-1); this.$router.go(-1);
}, },
openSkuList() { openSkuList () {
// //
this.$refs.skuSelect.open("goods"); this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList)); let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
@ -400,7 +252,7 @@ export default {
}); });
this.$refs.skuSelect.goodsData = data; this.$refs.skuSelect.goodsData = data;
}, },
getDetail() { getDetail () {
// //
getFullDiscountById(this.id).then((res) => { getFullDiscountById(this.id).then((res) => {
console.log(res); console.log(res);
@ -422,7 +274,7 @@ export default {
}); });
}, },
/** 保存 */ /** 保存 */
handleSubmit() { handleSubmit () {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
const params = JSON.parse(JSON.stringify(this.form)); const params = JSON.parse(JSON.stringify(this.form));
@ -489,11 +341,11 @@ export default {
}); });
}, },
changeSelect(e) { changeSelect (e) {
// //
this.selectedGoods = e; this.selectedGoods = e;
}, },
delSelectGoods() { delSelectGoods () {
// //
if (this.selectedGoods.length <= 0) { if (this.selectedGoods.length <= 0) {
this.$Message.warning("您还未选择要删除的数据"); this.$Message.warning("您还未选择要删除的数据");
@ -515,11 +367,11 @@ export default {
}, },
}); });
}, },
delGoods(index) { delGoods (index) {
// //
this.form.promotionGoodsList.splice(index, 1); this.form.promotionGoodsList.splice(index, 1);
}, },
selectedGoodsData(item) { selectedGoodsData (item) {
// //
let list = []; let list = [];
item.forEach((e) => { item.forEach((e) => {
@ -535,7 +387,7 @@ export default {
}); });
this.form.promotionGoodsList = list; this.form.promotionGoodsList = list;
}, },
getCouponList(query) { getCouponList (query) {
// //
let params = { let params = {
pageSize: 10, pageSize: 10,
@ -552,7 +404,7 @@ export default {
} }
}); });
}, },
getGiftList(query) { getGiftList (query) {
// //
let params = { let params = {
pageSize: 10, pageSize: 10,
@ -586,11 +438,13 @@ h4 {
line-height: 40px; line-height: 40px;
text-align: left; text-align: left;
} }
.describe { .describe {
font-size: 12px; font-size: 12px;
margin-left: 10px; margin-left: 10px;
color: #999; color: #999;
} }
.ivu-form-item { .ivu-form-item {
margin-bottom: 24px !important; margin-bottom: 24px !important;
} }

View File

@ -1,29 +1,12 @@
<template> <template>
<div class="search"> <div class="search">
<Card> <Card>
<Form <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
ref="searchForm"
:model="searchForm"
inline
:label-width="70"
class="search-form"
>
<Form-item label="活动名称"> <Form-item label="活动名称">
<Input <Input type="text" v-model="searchForm.promotionName" placeholder="请输入活动名称" clearable style="width: 200px" />
type="text"
v-model="searchForm.promotionName"
placeholder="请输入活动名称"
clearable
style="width: 200px"
/>
</Form-item> </Form-item>
<Form-item label="活动状态" prop="promotionStatus"> <Form-item label="活动状态" prop="promotionStatus">
<Select <Select v-model="searchForm.promotionStatus" placeholder="请选择" clearable style="width: 200px">
v-model="searchForm.promotionStatus"
placeholder="请选择"
clearable
style="width: 200px"
>
<Option value="NEW">未开始</Option> <Option value="NEW">未开始</Option>
<Option value="START">已开始/上架</Option> <Option value="START">已开始/上架</Option>
<Option value="END">已结束/下架</Option> <Option value="END">已结束/下架</Option>
@ -31,13 +14,7 @@
</Select> </Select>
</Form-item> </Form-item>
<Form-item label="活动时间"> <Form-item label="活动时间">
<DatePicker <DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px">
v-model="selectDate"
type="daterange"
clearable
placeholder="选择起始时间"
style="width: 200px"
>
</DatePicker> </DatePicker>
</Form-item> </Form-item>
<Form-item> <Form-item>
@ -60,54 +37,21 @@
</template> </template>
<template slot-scope="{ row }" slot="action"> <template slot-scope="{ row }" slot="action">
<div> <div>
<Button <Button type="primary" v-if="row.promotionStatus == 'NEW'" size="small" @click="edit(row)"></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="info" v-else size="small" @click="edit(row)"></Button>
<Button <Button type="success" v-if="row.promotionStatus === 'START'" style="margin-left: 5px" size="small"
type="success" @click="openOrClose(row)">关闭</Button>
v-if="row.promotionStatus === 'START'" <Button type="success" v-if="row.promotionStatus === 'CLOSE'" style="margin-left: 5px" size="small"
style="margin-left: 5px" @click="openOrClose(row)">开启</Button>
size="small" <Button type="error" :disabled="row.promotionStatus == 'START'" style="margin-left: 5px" size="small"
@click="openOrClose(row)" @click="del(row)">删除</Button>
>关闭</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> </div>
</template> </template>
</Table> </Table>
<Row type="flex" justify="end" class="page operation"> <Row type="flex" justify="end" class="page operation">
<Page <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
:current="searchForm.pageNumber" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator
:total="total" show-sizer></Page>
: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> </Row>
</Card> </Card>
</div> </div>
@ -120,7 +64,7 @@ import {
} from "@/api/promotion.js"; } from "@/api/promotion.js";
export default { export default {
name: "full-cut", name: "full-cut",
data() { data () {
return { return {
total: 0, total: 0,
selectDate: [], selectDate: [],
@ -198,31 +142,31 @@ export default {
}, },
methods: { methods: {
// //
newAct() { newAct () {
this.$router.push({ name: "full-discount-detail" }); this.$router.push({ name: "full-discount-detail" });
}, },
// //
init() { init () {
this.getDataList(); this.getDataList();
}, },
// //
changePage(v) { changePage (v) {
this.searchForm.pageNumber = v; this.searchForm.pageNumber = v;
this.getDataList(); this.getDataList();
}, },
// //
changePageSize(v) { changePageSize (v) {
this.searchForm.pageSize = v; this.searchForm.pageSize = v;
this.getDataList(); this.getDataList();
}, },
// //
handleSearch() { handleSearch () {
this.searchForm.pageNumber = 1; this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10; this.searchForm.pageSize = 10;
this.getDataList(); this.getDataList();
}, },
// //
handleReset() { handleReset () {
this.selectDate = ""; this.selectDate = "";
this.searchForm = {}; this.searchForm = {};
this.searchForm.pageNumber = 1; this.searchForm.pageNumber = 1;
@ -230,11 +174,11 @@ export default {
this.getDataList(); this.getDataList();
}, },
// //
edit(row) { edit (row) {
this.$router.push({ name: "full-discount-detail", query: { id: row.id } }); this.$router.push({ name: "full-discount-detail", query: { id: row.id } });
}, },
// //
del(row) { del (row) {
this.$Modal.confirm({ this.$Modal.confirm({
title: "提示", title: "提示",
// //
@ -253,7 +197,7 @@ export default {
}); });
}, },
// //
openOrClose(row) { openOrClose (row) {
let name = "开启"; let name = "开启";
let status = "START"; let status = "START";
if (row.promotionStatus === "START") { if (row.promotionStatus === "START") {
@ -325,7 +269,7 @@ export default {
} }
}, },
// //
getDataList() { getDataList () {
this.loading = true; this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) { if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime(); this.searchForm.startTime = this.selectDate[0].getTime();
@ -343,17 +287,19 @@ export default {
}); });
}, },
}, },
mounted() { mounted () {
this.init(); this.init();
}, },
// KeepAlivefalse // KeepAlivefalse
beforeRouteLeave(to, from, next) { beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false; from.meta.keepAlive = false;
next(); next();
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/styles/table-common.scss";
.operation { .operation {
margin: 10px 0; margin: 10px 0;
} }

View File

@ -14,20 +14,14 @@
</Select> </Select>
</Form-item> </Form-item>
<Form-item label="活动时间"> <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> </Form-item>
<Button @click="handleSearch" type="primary" class="search-btn">搜索</Button> <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
<Button @click="handleReset" class="ml_10">重置</Button> <Button @click="handleReset" class="ml_10">重置</Button>
</Form> </Form>
<Table <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
class="mt_10"
>
<template slot-scope="{ row }" slot="applyEndTime"> <template slot-scope="{ row }" slot="applyEndTime">
{{ unixDate(row.applyEndTime) }} {{ unixDate(row.applyEndTime) }}
</template> </template>
@ -37,25 +31,14 @@
}}</Tag> }}</Tag>
</template> </template>
<template slot-scope="{ row }" slot="action"> <template slot-scope="{ row }" slot="action">
<Button <Button v-if="row.promotionStatus === 'NEW'" type="primary" size="small" @click="manage(row)"></Button>
v-if="row.promotionStatus === 'NEW'" <Button v-else type="info" size="small" @click="manage(row)"></Button>
type="primary"
size="small"
@click="manage(row)"
>管理</Button
>
<Button
v-else
type="info"
size="small"
@click="manage(row)"
>查看</Button
>
</template> </template>
</Table> </Table>
<Row type="flex" justify="end" class="mt_10"> <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]" <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
size="small" show-total show-elevator show-sizer></Page> @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator
show-sizer></Page>
</Row> </Row>
</Card> </Card>
</div> </div>
@ -66,9 +49,9 @@ import { seckillList } from "@/api/promotion";
export default { export default {
name: "seckill", name: "seckill",
components: {}, components: {},
data() { data () {
return { return {
selectDate:[], selectDate: [],
loading: true, // loading: true, //
searchForm: { searchForm: {
// //
@ -141,27 +124,27 @@ export default {
}, },
methods: { methods: {
// //
init() { init () {
this.getDataList(); this.getDataList();
}, },
// //
changePage(v) { changePage (v) {
this.searchForm.pageNumber = v; this.searchForm.pageNumber = v;
this.getDataList(); this.getDataList();
}, },
// //
changePageSize(v) { changePageSize (v) {
this.searchForm.pageSize = v; this.searchForm.pageSize = v;
this.getDataList(); this.getDataList();
}, },
// //
handleSearch() { handleSearch () {
this.searchForm.pageNumber = 1; this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10; this.searchForm.pageSize = 10;
this.getDataList(); this.getDataList();
}, },
// //
handleReset() { handleReset () {
this.searchForm = {}; this.searchForm = {};
this.selectDate = ""; this.selectDate = "";
this.searchForm.pageNumber = 1; this.searchForm.pageNumber = 1;
@ -169,11 +152,11 @@ export default {
this.getDataList(); this.getDataList();
}, },
// //
manage(row) { manage (row) {
this.$router.push({ name: "seckill-goods", query: { id: row.id } }); this.$router.push({ name: "seckill-goods", query: { id: row.id } });
}, },
// //
getDataList() { getDataList () {
this.loading = true; this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) { if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime(); 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); return this.$options.filters.unixToDate(new Date(time) / 1000);
}, },
unixHours(item) { unixHours (item) {
// //
let hourArr = item.split(","); let hourArr = item.split(",");
for (let i = 0; i < hourArr.length; i++) { for (let i = 0; i < hourArr.length; i++) {
@ -204,16 +187,16 @@ export default {
return hourArr; return hourArr;
}, },
}, },
mounted() { mounted () {
this.init(); this.init();
}, },
// KeepAlivefalse // KeepAlivefalse
beforeRouteLeave(to, from, next) { beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false from.meta.keepAlive = false
next() next()
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/styles/table-common.scss";
</style> </style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -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;
}

View File

@ -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>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>

View File

@ -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>

View File

@ -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()
}
}

View File

@ -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()
}
}

View File

@ -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()
}
}

View File

@ -0,0 +1,7 @@
import hotzone from './index.vue'
hotzone.install = (Vue) => {
Vue.component(hotzone.name, hotzone)
}
export default hotzone

View File

@ -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>

View File

@ -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-topL-leftC-centerR-rightB-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 _

View File

@ -107,13 +107,13 @@ export default {
}, },
openModalTitle: '开启信息', openModalTitle: '开启信息',
ruleValidate: { ruleValidate: {
customerName: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], // customerName: [{ required: true, message: "" ,trigger: "blur" }],
payType: [{ required: true, message: "请填写必填项" ,trigger: "change" }], // payType: [{ required: true, message: "" ,trigger: "change" }],
expType: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], // expType: [{ required: true, message: "" ,trigger: "blur" }],
customerPwd: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], // customerPwd: [{ required: true, message: "" ,trigger: "blur" }],
monthCode: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], // monthCode: [{ required: true, message: "" ,trigger: "blur" }],
sendSite: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], // sendSite: [{ required: true, message: "" ,trigger: "blur" }],
sendStaff: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], // sendStaff: [{ required: true, message: "" ,trigger: "blur" }],
}, },
faceSheetForm: { faceSheetForm: {
@ -280,6 +280,8 @@ export default {
this.faceSheetForm.monthCode = res.result.monthCode; this.faceSheetForm.monthCode = res.result.monthCode;
this.faceSheetForm.sendSite = res.result.sendSite; this.faceSheetForm.sendSite = res.result.sendSite;
this.faceSheetForm.sendStaff = res.result.sendStaff; this.faceSheetForm.sendStaff = res.result.sendStaff;
this.faceSheetForm.payType = res.result.payType;
this.faceSheetForm.expType = res.result.expType;
} }
}); });
this.openModal = true; this.openModal = true;

View File

@ -17,7 +17,26 @@ export let homeData = {};
* notImg: true 没有选择图片功能 * notImg: true 没有选择图片功能
* close:true 右侧关闭按钮 * close:true 右侧关闭按钮
*/ */
export const modelData = [ 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", type: "carousel",
name: "图片轮播", name: "图片轮播",

View File

@ -118,44 +118,89 @@
<Input v-model="item.title" style="width: 200px" /> <Input v-model="item.title" style="width: 200px" />
</div> </div>
</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" v-if="!res.notLink">
<div class="decorate-view-title">选择链接</div> <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> <span>
{{ <!-- {{
ways.find((e) => { ways.find((e) => {
return item.url.___type == e.name; 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.___type == 'marketing'">
<span v-if="item.url.___promotion == 'SECKILL'"> </span> <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> <span v-if="item.url.___promotion == 'PINTUAN'"> </span>
{{ item.url.title || item.url.goodsName }} {{ item.url.title || item.url.goodsName }}
</span> </span>
<!-- 当选择完活动之后的其他回调 --> <!-- 当选择完活动之后的其他回调 -->
<span v-if="item.url.___type == 'pages'"> {{ item.url.title }}</span> <span v-if="item.url.___type == 'pages'">
{{ item.url.title }}</span
>
</span> </span>
</div> </div>
<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>
<!-- 链接地址-->
</div> </div>
</div> </div>
@ -174,7 +219,7 @@
@selectedLink="selectedLink" @selectedLink="selectedLink"
@selectedGoodsData="selectedGoodsData" @selectedGoodsData="selectedGoodsData"
></liliDialog> ></liliDialog>
<hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
<Modal width="1200px" v-model="picModelFlag"> <Modal width="1200px" v-model="picModelFlag">
<ossManage @callback="callbackSelected" ref="ossManage" /> <ossManage @callback="callbackSelected" ref="ossManage" />
</Modal> </Modal>
@ -182,11 +227,13 @@
</template> </template>
<script> <script>
import ossManage from "@/views/sys/oss-manage/ossManage"; import ossManage from "@/views/sys/oss-manage/ossManage";
import hotzone from "@/views/shop/hotzone";
import { modelData } from "./config"; import { modelData } from "./config";
import ways from "@/views/lili-dialog/wap.js"; // import ways from "@/views/lili-dialog/wap.js"; //
export default { export default {
components: { components: {
ossManage, ossManage,
hotzone,
}, },
data() { data() {
return { return {
@ -215,6 +262,7 @@ export default {
}, },
// //
selectedLink(val) { selectedLink(val) {
this.selectedLinks.zoneInfo = [];
// intro mobileIntro json // intro mobileIntro json
delete val.selected; delete val.selected;
delete val.intro; delete val.intro;
@ -257,9 +305,23 @@ export default {
}, },
// //
clickLink(val, index) { clickLink(val, index, oval) {
this.selectedLinks = val; 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 //base64
changeFile(item, index) { changeFile(item, index) {