|
|
|
|
@ -1,6 +1,7 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<xy-dialog :width="66" ref="dialog" type="form" :is-show.sync="isShow" :title="type === 'add' ? '新增商品' : '编辑商品'" :form="form" :rules="rules" @submit="submit">
|
|
|
|
|
<xy-dialog :width="66" ref="dialog" type="form" :is-show.sync="isShow" :title="type === 'add' ? '新增商品' : '编辑商品'"
|
|
|
|
|
:form="form" :rules="rules" @submit="submit">
|
|
|
|
|
<template v-slot:name>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label">
|
|
|
|
|
@ -17,26 +18,13 @@
|
|
|
|
|
海报图：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<div v-if="form.poster" style="position: relative;">
|
|
|
|
|
<img :src="form.poster" class="avatar">
|
|
|
|
|
<Button
|
|
|
|
|
shape="circle"
|
|
|
|
|
icon="md-close"
|
|
|
|
|
type="error"
|
|
|
|
|
size="small"
|
|
|
|
|
class="img__delete"
|
|
|
|
|
@click="form.poster = ''"></Button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-upload
|
|
|
|
|
v-else
|
|
|
|
|
accept="picture"
|
|
|
|
|
:limit="1"
|
|
|
|
|
class="avatar-uploader"
|
|
|
|
|
list-type="picture-card"
|
|
|
|
|
:action="action"
|
|
|
|
|
:show-file-list="true"
|
|
|
|
|
:on-error="uploadFail"
|
|
|
|
|
:on-success="uploadSuccess"
|
|
|
|
|
<div v-if="form.poster_url" style="position: relative;">
|
|
|
|
|
<img :src="form.poster_url" class="avatar">
|
|
|
|
|
<Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
|
|
|
|
|
@click="form.poster_url = ''"></Button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
|
|
|
|
|
:action="action" :show-file-list="true" :on-error="uploadFail" :on-success="uploadSuccess"
|
|
|
|
|
:before-upload="uploadBefore">
|
|
|
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
|
|
</el-upload>
|
|
|
|
|
@ -49,7 +37,8 @@
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属商户：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-input suffix-icon="el-icon-arrow-down" readonly :value="form.merchantId.label" placeholder="请选择所属商户" clearable style="width: 300px;" @focus="isShowMerchantSelect = true,getMerchants()"></el-input>
|
|
|
|
|
<el-input suffix-icon="el-icon-arrow-down" readonly :value="form.merchantId.label" placeholder="请选择所属商户"
|
|
|
|
|
clearable style="width: 300px;" @focus="isShowMerchantSelect = true,getMerchants()"></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -69,7 +58,8 @@
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属板块：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-select clearable placeholder="请选择所属板块" style="width: 300px" v-model="form.productTypePid" @change="typeChange">
|
|
|
|
|
<el-select clearable placeholder="请选择所属板块" style="width: 300px" v-model="form.productTypePid"
|
|
|
|
|
@change="typeChange">
|
|
|
|
|
<el-option v-for="item in types" :key="item.id" :value="item.id" :label="item.name">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
@ -95,7 +85,8 @@
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>原价：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content number-input">
|
|
|
|
|
<el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入原价" clearable v-model="form.originalPrice" style="width: 300px;"></el-input-number>
|
|
|
|
|
<el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入原价" clearable
|
|
|
|
|
v-model="form.originalPrice" style="width: 300px;"></el-input-number>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -105,7 +96,8 @@
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>价格：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content number-input">
|
|
|
|
|
<el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入价格" clearable v-model="form.price" style="width: 300px;"></el-input-number>
|
|
|
|
|
<el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入价格" clearable
|
|
|
|
|
v-model="form.price" style="width: 300px;"></el-input-number>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -115,7 +107,8 @@
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>平台佣金：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content number-input">
|
|
|
|
|
<el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入平台佣金" clearable v-model="form.fee" style="width: 300px;"></el-input-number>
|
|
|
|
|
<el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入平台佣金" clearable
|
|
|
|
|
v-model="form.fee" style="width: 300px;"></el-input-number>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -125,7 +118,8 @@
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>分享金：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content number-input">
|
|
|
|
|
<el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入分享金" clearable v-model="form.sharing" style="width: 300px;"></el-input-number>
|
|
|
|
|
<el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入分享金" clearable
|
|
|
|
|
v-model="form.sharing" style="width: 300px;"></el-input-number>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -135,7 +129,8 @@
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>总份数：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-input-number :min="0" placeholder="请输入总份数" clearable v-model="form.maxQuantity" style="width: 200px;"></el-input-number>
|
|
|
|
|
<el-input-number :min="0" placeholder="请输入总份数" clearable v-model="form.maxQuantity" style="width: 200px;">
|
|
|
|
|
</el-input-number>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -145,7 +140,8 @@
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>每用户限购：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-input-number :min="0" placeholder="请输入每用户限购数" clearable v-model="form.limitQuantity" style="width: 200px;"></el-input-number>
|
|
|
|
|
<el-input-number :min="0" placeholder="请输入每用户限购数" clearable v-model="form.limitQuantity"
|
|
|
|
|
style="width: 200px;"></el-input-number>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -155,7 +151,8 @@
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>虚拟购买次数：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-input-number :min="0" placeholder="请输入虚拟购买次数" clearable v-model="form.pretendQuantity" style="width: 200px;"></el-input-number>
|
|
|
|
|
<el-input-number :min="0" placeholder="请输入虚拟购买次数" clearable v-model="form.pretendQuantity"
|
|
|
|
|
style="width: 200px;"></el-input-number>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -165,17 +162,9 @@
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>上架/下架时间：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
clearable
|
|
|
|
|
style="width: 440px;"
|
|
|
|
|
v-model="form.time"
|
|
|
|
|
type="datetimerange"
|
|
|
|
|
:picker-options="pickerOptions"
|
|
|
|
|
range-separator="至"
|
|
|
|
|
start-placeholder="上架日期"
|
|
|
|
|
end-placeholder="下架日期"
|
|
|
|
|
align="right"
|
|
|
|
|
value-format="yyyy-MM-dd hh:mm:ss">
|
|
|
|
|
<el-date-picker clearable style="width: 440px;" v-model="form.time" type="datetimerange"
|
|
|
|
|
:picker-options="pickerOptions" range-separator="至" start-placeholder="上架日期" end-placeholder="下架日期"
|
|
|
|
|
align="right" value-format="yyyy-MM-dd hh:mm:ss">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -183,7 +172,8 @@
|
|
|
|
|
<template v-slot:sortnumber>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label">
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序<span style="font-size: 12px;padding-left: 2px;color: rgb(140,140,140)">（大到小）</span> ：
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序<span
|
|
|
|
|
style="font-size: 12px;padding-left: 2px;color: rgb(140,140,140)">（大到小）</span> ：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-input-number v-model="form.sortnumber" :controls="false" style="width: 200px;"></el-input-number>
|
|
|
|
|
@ -203,14 +193,10 @@
|
|
|
|
|
</xy-dialog>
|
|
|
|
|
|
|
|
|
|
<Modal v-model="isShowMerchantSelect" title="所属商户选择">
|
|
|
|
|
<Table
|
|
|
|
|
size="small"
|
|
|
|
|
highlight-row
|
|
|
|
|
ref="currentRowTable"
|
|
|
|
|
:columns="merchantTable"
|
|
|
|
|
:data="merchants"
|
|
|
|
|
<Table size="small" highlight-row ref="currentRowTable" :columns="merchantTable" :data="merchants"
|
|
|
|
|
@on-current-change="merchantSelect" />
|
|
|
|
|
<Page :current="merchantIndex" :total="merchantTotal" simple style="padding-top: 14px;display: flex;justify-content: center;" @on-change="merchantPageChange"/>
|
|
|
|
|
<Page :current="merchantIndex" :total="merchantTotal" simple
|
|
|
|
|
style="padding-top: 14px;display: flex;justify-content: center;" @on-change="merchantPageChange" />
|
|
|
|
|
</Modal>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -218,9 +204,17 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {store,show,save} from '@/api/product'
|
|
|
|
|
import {index as merchantIndex} from '@/api/merchant'
|
|
|
|
|
import { Message } from 'element-ui'
|
|
|
|
|
import {
|
|
|
|
|
store,
|
|
|
|
|
show,
|
|
|
|
|
save
|
|
|
|
|
} from '@/api/product'
|
|
|
|
|
import {
|
|
|
|
|
index as merchantIndex
|
|
|
|
|
} from '@/api/merchant'
|
|
|
|
|
import {
|
|
|
|
|
Message
|
|
|
|
|
} from 'element-ui'
|
|
|
|
|
|
|
|
|
|
import tinymce from "@/components/Tinymce"
|
|
|
|
|
export default {
|
|
|
|
|
@ -272,50 +266,61 @@ export default {
|
|
|
|
|
pretendQuantity: 0,
|
|
|
|
|
time: [],
|
|
|
|
|
sortnumber: 0,
|
|
|
|
|
content:''
|
|
|
|
|
content: '',
|
|
|
|
|
poster_url: ""
|
|
|
|
|
},
|
|
|
|
|
rules: {
|
|
|
|
|
name:[
|
|
|
|
|
{required:true,message:'请填写商品名称'}
|
|
|
|
|
],
|
|
|
|
|
merchantId:[
|
|
|
|
|
{required:true,message:'请选择所属商家'}
|
|
|
|
|
],
|
|
|
|
|
productTypePid:[
|
|
|
|
|
{required:true,message:'请选择所属模块'}
|
|
|
|
|
],
|
|
|
|
|
productTypeId:[
|
|
|
|
|
{required:true,message:'请选择产品类别'}
|
|
|
|
|
],
|
|
|
|
|
originalPrice:[
|
|
|
|
|
{required:true,message:'请输入原价'}
|
|
|
|
|
],
|
|
|
|
|
price:[
|
|
|
|
|
{required:true,message:'请输入价格'}
|
|
|
|
|
],
|
|
|
|
|
fee:[
|
|
|
|
|
{required:true,message:'请输入平台佣金'}
|
|
|
|
|
],
|
|
|
|
|
sharing:[
|
|
|
|
|
{required:true,message:'请输入分享金'}
|
|
|
|
|
],
|
|
|
|
|
maxQuantity:[
|
|
|
|
|
{required:true,message:'请输入总分数'}
|
|
|
|
|
],
|
|
|
|
|
limitQuantity:[
|
|
|
|
|
{required:true,message:'请输入用户限购'}
|
|
|
|
|
],
|
|
|
|
|
time:[
|
|
|
|
|
{required:true,message:'请选择上架/下架时间'}
|
|
|
|
|
]
|
|
|
|
|
name: [{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请填写商品名称'
|
|
|
|
|
}],
|
|
|
|
|
merchantId: [{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请选择所属商家'
|
|
|
|
|
}],
|
|
|
|
|
productTypePid: [{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请选择所属模块'
|
|
|
|
|
}],
|
|
|
|
|
productTypeId: [{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请选择产品类别'
|
|
|
|
|
}],
|
|
|
|
|
originalPrice: [{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入原价'
|
|
|
|
|
}],
|
|
|
|
|
price: [{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入价格'
|
|
|
|
|
}],
|
|
|
|
|
fee: [{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入平台佣金'
|
|
|
|
|
}],
|
|
|
|
|
sharing: [{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入分享金'
|
|
|
|
|
}],
|
|
|
|
|
maxQuantity: [{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入总分数'
|
|
|
|
|
}],
|
|
|
|
|
limitQuantity: [{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入用户限购'
|
|
|
|
|
}],
|
|
|
|
|
time: [{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请选择上架/下架时间'
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
products: [], //板块下商品
|
|
|
|
|
|
|
|
|
|
isShowMerchantSelect: false,
|
|
|
|
|
merchants: [],
|
|
|
|
|
merchantTable:[
|
|
|
|
|
{
|
|
|
|
|
merchantTable: [{
|
|
|
|
|
title: '简称',
|
|
|
|
|
key: 'username',
|
|
|
|
|
width: 130
|
|
|
|
|
@ -338,11 +343,14 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async getDetail() {
|
|
|
|
|
const res = await show({id:this.id})
|
|
|
|
|
const res = await show({
|
|
|
|
|
id: this.id
|
|
|
|
|
})
|
|
|
|
|
this.typeChange(res?.product_type_pid)
|
|
|
|
|
this.form = {
|
|
|
|
|
name: res?.name,
|
|
|
|
|
poster: res?.poster,
|
|
|
|
|
poster_url: res?.poster_url,
|
|
|
|
|
merchantId: {
|
|
|
|
|
label: res.merchant.name,
|
|
|
|
|
value: res.merchant.id
|
|
|
|
|
@ -370,7 +378,8 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
uploadSuccess(response) {
|
|
|
|
|
console.log(response)
|
|
|
|
|
this.form.poster = response.url
|
|
|
|
|
this.form.poster = "/" + response.folder + "/" + response.name
|
|
|
|
|
this.form.poster_url = response.url;
|
|
|
|
|
},
|
|
|
|
|
uploadBefore(file) {
|
|
|
|
|
if ((file.size / 1000) > 2024) {
|
|
|
|
|
@ -518,9 +527,11 @@ export default {
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
|
|
|
border-color: #BF617C;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.avatar-uploader-icon {
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
color: #8c939d;
|
|
|
|
|
@ -529,11 +540,13 @@ export default {
|
|
|
|
|
line-height: 110px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.avatar {
|
|
|
|
|
width: 110px;
|
|
|
|
|
display: block;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img__delete {
|
|
|
|
|
transform: scale(0.7, 0.7);
|
|
|
|
|
|
|
|
|
|
|
刘翔宇-旅管家
3 years ago