wangyifang
/
yunyubang-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
master
刘翔宇-旅管家 3 years ago
parent e4363d1e82
commit b2c8c8ed9e
1 changed files with 556 additions and 543 deletions
Show Stats Download Patch File Download Diff File

473
src/views/productService/components/addProduct.vue
Unescape View File

@ -1,6 +1,7 @@
<template> <template>
<div> <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> <template v-slot:name>
<div class="xy-table-item"> <div class="xy-table-item">
<div class="xy-table-item-label"> <div class="xy-table-item-label">
@ -17,26 +18,13 @@
海报图： 海报图：
</div> </div>
<div class="xy-table-item-content"> <div class="xy-table-item-content">
<div v-if="form.poster" style="position: relative;"> <div v-if="form.poster_url" style="position: relative;">
<img :src="form.poster" class="avatar"> <img :src="form.poster_url" class="avatar">
<Button <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
shape="circle" @click="form.poster_url = ''"></Button>
icon="md-close" </div>
type="error" <el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
size="small" :action="action" :show-file-list="true" :on-error="uploadFail" :on-success="uploadSuccess"
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"
:before-upload="uploadBefore"> :before-upload="uploadBefore">
<i class="el-icon-plus avatar-uploader-icon"></i> <i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> </el-upload>
@ -49,7 +37,8 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属商户： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属商户：
</div> </div>
<div class="xy-table-item-content"> <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>
</div> </div>
</template> </template>
@ -69,7 +58,8 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属板块： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属板块：
</div> </div>
<div class="xy-table-item-content"> <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 v-for="item in types" :key="item.id" :value="item.id" :label="item.name">
</el-option> </el-option>
</el-select> </el-select>
@ -95,7 +85,8 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>原价： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>原价：
</div> </div>
<div class="xy-table-item-content number-input"> <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>
</div> </div>
</template> </template>
@ -105,7 +96,8 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>价格： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>价格：
</div> </div>
<div class="xy-table-item-content number-input"> <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>
</div> </div>
</template> </template>
@ -115,7 +107,8 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>平台佣金： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>平台佣金：
</div> </div>
<div class="xy-table-item-content number-input"> <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>
</div> </div>
</template> </template>
@ -125,7 +118,8 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>分享金： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>分享金：
</div> </div>
<div class="xy-table-item-content number-input"> <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>
</div> </div>
</template> </template>
@ -135,7 +129,8 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>总份数： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>总份数：
</div> </div>
<div class="xy-table-item-content"> <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>
</div> </div>
</template> </template>
@ -145,7 +140,8 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>每用户限购： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>每用户限购：
</div> </div>
<div class="xy-table-item-content"> <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>
</div> </div>
</template> </template>
@ -155,7 +151,8 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>虚拟购买次数： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>虚拟购买次数：
</div> </div>
<div class="xy-table-item-content"> <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>
</div> </div>
</template> </template>
@ -165,17 +162,9 @@
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>上架/下架时间： <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>上架/下架时间：
</div> </div>
<div class="xy-table-item-content"> <div class="xy-table-item-content">
<el-date-picker <el-date-picker clearable style="width: 440px;" v-model="form.time" type="datetimerange"
clearable :picker-options="pickerOptions" range-separator="至" start-placeholder="上架日期" end-placeholder="下架日期"
style="width: 440px;" align="right" value-format="yyyy-MM-dd hh:mm:ss">
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> </el-date-picker>
</div> </div>
</div> </div>
@ -183,7 +172,8 @@
<template v-slot:sortnumber> <template v-slot:sortnumber>
<div class="xy-table-item"> <div class="xy-table-item">
<div class="xy-table-item-label"> <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>
<div class="xy-table-item-content"> <div class="xy-table-item-content">
<el-input-number v-model="form.sortnumber" :controls="false" style="width: 200px;"></el-input-number> <el-input-number v-model="form.sortnumber" :controls="false" style="width: 200px;"></el-input-number>
@ -203,14 +193,10 @@
</xy-dialog> </xy-dialog>
<Modal v-model="isShowMerchantSelect" title="所属商户选择"> <Modal v-model="isShowMerchantSelect" title="所属商户选择">
<Table <Table size="small" highlight-row ref="currentRowTable" :columns="merchantTable" :data="merchants"
size="small"
highlight-row
ref="currentRowTable"
:columns="merchantTable"
:data="merchants"
@on-current-change="merchantSelect" /> @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> </Modal>
@ -218,24 +204,32 @@
</template> </template>
<script> <script>
import {store,show,save} from '@/api/product' import {
import {index as merchantIndex} from '@/api/merchant' store,
import { Message } from 'element-ui' show,
save
} from '@/api/product'
import {
index as merchantIndex
} from '@/api/merchant'
import {
Message
} from 'element-ui'
import tinymce from "@/components/Tinymce" import tinymce from "@/components/Tinymce"
export default { export default {
components:{ components: {
tinymce tinymce
}, },
props:{ props: {
types:Array types: Array
}, },
data() { data() {
return { return {
id:'', id: '',
isShow:false, isShow: false,
type:'add', type: 'add',
action:`${process.env.VUE_APP_BASE_API}api/admin/upload-file`, action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
pickerOptions: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: '最近一周', text: '最近一周',
@ -256,134 +250,149 @@ export default {
}] }]
}, },
form:{ form: {
name:'', name: '',
poster:'', poster: '',
merchantId:'', merchantId: '',
shopIds:'', shopIds: '',
productTypePid:'', productTypePid: '',
productTypeId:'', productTypeId: '',
originalPrice:'', originalPrice: '',
price:'', price: '',
fee:'', fee: '',
sharing:'', sharing: '',
maxQuantity:'', maxQuantity: '',
limitQuantity:'1', limitQuantity: '1',
pretendQuantity:0, pretendQuantity: 0,
time:[], time: [],
sortnumber:0, sortnumber: 0,
content:'' content: '',
poster_url: ""
}, },
rules:{ rules: {
name:[ name: [{
{required:true,message:'请填写商品名称'} required: true,
], message: '请填写商品名称'
merchantId:[ }],
{required:true,message:'请选择所属商家'} merchantId: [{
], required: true,
productTypePid:[ message: '请选择所属商家'
{required:true,message:'请选择所属模块'} }],
], productTypePid: [{
productTypeId:[ required: true,
{required:true,message:'请选择产品类别'} message: '请选择所属模块'
], }],
originalPrice:[ productTypeId: [{
{required:true,message:'请输入原价'} required: true,
], message: '请选择产品类别'
price:[ }],
{required:true,message:'请输入价格'} originalPrice: [{
], required: true,
fee:[ message: '请输入原价'
{required:true,message:'请输入平台佣金'} }],
], price: [{
sharing:[ required: true,
{required:true,message:'请输入分享金'} message: '请输入价格'
], }],
maxQuantity:[ fee: [{
{required:true,message:'请输入总分数'} required: true,
], message: '请输入平台佣金'
limitQuantity:[ }],
{required:true,message:'请输入用户限购'} sharing: [{
], required: true,
time:[ message: '请输入分享金'
{required:true,message:'请选择上架/下架时间'} }],
] maxQuantity: [{
required: true,
message: '请输入总分数'
}],
limitQuantity: [{
required: true,
message: '请输入用户限购'
}],
time: [{
required: true,
message: '请选择上架/下架时间'
}]
}, },
products:[],//板块下商品 products: [], //板块下商品
isShowMerchantSelect:false, isShowMerchantSelect: false,
merchants:[], merchants: [],
merchantTable:[ merchantTable: [{
{ title: '简称',
title:'简称', key: 'username',
key:'username', width: 130
width:130
}, },
{ {
title:'全称', title: '全称',
key:'name', key: 'name',
align:'left', align: 'left',
width:220 width: 220
}, },
{ {
title:'状态', title: '状态',
key:'state', key: 'state',
sortable:true sortable: true
} }
], ],
merchantIndex:1, merchantIndex: 1,
merchantTotal:0, merchantTotal: 0,
} }
}, },
methods: { methods: {
async getDetail(){ async getDetail() {
const res = await show({id:this.id}) const res = await show({
id: this.id
})
this.typeChange(res?.product_type_pid) this.typeChange(res?.product_type_pid)
this.form = { this.form = {
name:res?.name, name: res?.name,
poster:res?.poster, poster: res?.poster,
merchantId:{ poster_url: res?.poster_url,
label:res.merchant.name, merchantId: {
value:res.merchant.id label: res.merchant.name,
value: res.merchant.id
}, },
shopIds:res?.shop_ids, shopIds: res?.shop_ids,
productTypePid:res?.product_type_pid, productTypePid: res?.product_type_pid,
productTypeId:res?.product_type_id, productTypeId: res?.product_type_id,
originalPrice:res?.original_price, originalPrice: res?.original_price,
price:res?.price, price: res?.price,
fee:res?.fee, fee: res?.fee,
sharing:res?.sharing, sharing: res?.sharing,
maxQuantity:res?.max_quantity, maxQuantity: res?.max_quantity,
limitQuantity:res?.limit_quantity, limitQuantity: res?.limit_quantity,
pretendQuantity:res?.pretend_quantity, pretendQuantity: res?.pretend_quantity,
time:[res?.start_time,res?.end_time], time: [res?.start_time, res?.end_time],
sortnumber:res?.sortnumber, sortnumber: res?.sortnumber,
content:res?.content content: res?.content
} }
this.$refs['tinymce'].setContent(this.form.content ||' ') this.$refs['tinymce'].setContent(this.form.content || ' ')
}, },
//上传 //上传
uploadFail(err){ uploadFail(err) {
console.log(err) console.log(err)
}, },
uploadSuccess(response){ uploadSuccess(response) {
console.log(response) console.log(response)
this.form.poster = response.url this.form.poster = "/" + response.folder + "/" + response.name
this.form.poster_url = response.url;
}, },
uploadBefore(file){ uploadBefore(file) {
if((file.size/1000) > 2024){ if ((file.size / 1000) > 2024) {
Message({ Message({
type:'warning', type: 'warning',
message:'上传图片大小超过2M！' message: '上传图片大小超过2M！'
}) })
return false return false
} }
}, },
typeChange(val){ typeChange(val) {
if(!val){ if (!val) {
this.products = [] this.products = []
return return
} }
@ -393,80 +402,80 @@ export default {
this.products = res[0].children this.products = res[0].children
}, },
async getMerchants(){ async getMerchants() {
const res = await merchantIndex({ const res = await merchantIndex({
page_size:10, page_size: 10,
page:this.merchantIndex page: this.merchantIndex
}) })
this.merchantTotal = res.total this.merchantTotal = res.total
this.merchants = res.data this.merchants = res.data
}, },
merchantPageChange(e){ merchantPageChange(e) {
this.merchantIndex = e this.merchantIndex = e
this.getMerchants() this.getMerchants()
}, },
merchantSelect(row){ merchantSelect(row) {
this.form.merchantId = { this.form.merchantId = {
label:row.username, label: row.username,
value:row.id value: row.id
} }
}, },
submit(){ submit() {
if(this.type === 'add'){ if (this.type === 'add') {
store({ store({
name:this.form.name, name: this.form.name,
poster:this.form.poster, poster: this.form.poster,
merchant_id:this.form.merchantId?.value, merchant_id: this.form.merchantId?.value,
shop_ids:this.form.shopIds, shop_ids: this.form.shopIds,
product_type_pid:this.form.productTypePid, product_type_pid: this.form.productTypePid,
product_type_id:this.form.productTypeId, product_type_id: this.form.productTypeId,
original_price:this.form.originalPrice.toString(), original_price: this.form.originalPrice.toString(),
price:this.form.price.toString(), price: this.form.price.toString(),
fee:this.form.fee.toString(), fee: this.form.fee.toString(),
sharing:this.form.sharing.toString(), sharing: this.form.sharing.toString(),
max_quantity:this.form.maxQuantity.toString(), max_quantity: this.form.maxQuantity.toString(),
limit_quantity:this.form.limitQuantity.toString(), limit_quantity: this.form.limitQuantity.toString(),
pretend_quantity:this.form.pretendQuantity.toString(), pretend_quantity: this.form.pretendQuantity.toString(),
start_time:this.form.time[0], start_time: this.form.time[0],
sortnumber:this.form.sortnumber, sortnumber: this.form.sortnumber,
end_time:this.form.time[1], end_time: this.form.time[1],
content:this.form.content content: this.form.content
}).then(res => { }).then(res => {
Message({ Message({
type:'success', type: 'success',
message:'新增成功' message: '新增成功'
}) })
this.isShow = false this.isShow = false
this.$emit('refresh') this.$emit('refresh')
}) })
return return
} }
if(this.type === 'editor'){ if (this.type === 'editor') {
save({ save({
id:this.id, id: this.id,
name:this.form.name, name: this.form.name,
poster:this.form.poster, poster: this.form.poster,
merchant_id:this.form.merchantId?.value, merchant_id: this.form.merchantId?.value,
shop_ids:this.form.shopIds, shop_ids: this.form.shopIds,
product_type_pid:this.form.productTypePid, product_type_pid: this.form.productTypePid,
product_type_id:this.form.productTypeId, product_type_id: this.form.productTypeId,
original_price:this.form.originalPrice.toString(), original_price: this.form.originalPrice.toString(),
price:this.form.price.toString(), price: this.form.price.toString(),
fee:this.form.fee.toString(), fee: this.form.fee.toString(),
sharing:this.form.sharing.toString(), sharing: this.form.sharing.toString(),
max_quantity:this.form.maxQuantity.toString(), max_quantity: this.form.maxQuantity.toString(),
limit_quantity:this.form.limitQuantity.toString(), limit_quantity: this.form.limitQuantity.toString(),
pretend_quantity:this.form.pretendQuantity.toString(), pretend_quantity: this.form.pretendQuantity.toString(),
start_time:this.form.time[0], start_time: this.form.time[0],
sortnumber:this.form.sortnumber, sortnumber: this.form.sortnumber,
end_time:this.form.time[1], end_time: this.form.time[1],
content:this.form.content content: this.form.content
}).then(res => { }).then(res => {
Message({ Message({
type:'success', type: 'success',
message:'编辑商品成功' message: '编辑商品成功'
}) })
this.isShow = false this.isShow = false
this.$emit('refresh') this.$emit('refresh')
@ -474,14 +483,14 @@ export default {
} }
} }
}, },
watch:{ watch: {
isShow(newVal){ isShow(newVal) {
if(newVal){ if (newVal) {
if(this.type === 'editor'){ if (this.type === 'editor') {
this.getDetail() this.getDetail()
} }
}else{ } else {
this.$refs['tinymce'].setContent(' ') this.$refs['tinymce'].setContent(' ')
this.$refs['dialog'].reset() this.$refs['dialog'].reset()
this.id = '' this.id = ''
@ -490,23 +499,23 @@ export default {
} }
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.xy-table-item-label{ .xy-table-item-label {
width: 164px; width: 164px;
} }
.number-input{ .number-input {
::v-deep .el-input-number .el-input__inner{ ::v-deep .el-input-number .el-input__inner {
text-align: left !important; text-align: left !important;
} }
} }
</style> </style>
<style> <style>
.avatar-uploader .el-upload { .avatar-uploader .el-upload {
width: 110px; width: 110px;
height: 110px; height: 110px;
border: 1px dashed #d9d9d9; border: 1px dashed #d9d9d9;
@ -517,28 +526,32 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.avatar-uploader .el-upload:hover {
.avatar-uploader .el-upload:hover {
border-color: #BF617C; border-color: #BF617C;
} }
.avatar-uploader-icon {
.avatar-uploader-icon {
font-size: 28px; font-size: 28px;
color: #8c939d; color: #8c939d;
width: 110px; width: 110px;
height: 110px; height: 110px;
line-height: 110px; line-height: 110px;
text-align: center; text-align: center;
} }
.avatar {
.avatar {
width: 110px; width: 110px;
display: block; display: block;
border-radius: 6px; border-radius: 6px;
} }
.img__delete{
transform: scale(0.7,0.7); .img__delete {
transform: scale(0.7, 0.7);
position: absolute; position: absolute;
top: 1px; top: 1px;
left: 4%; left: 4%;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save