448 lines
16 KiB
Vue
448 lines
16 KiB
Vue
<template>
|
|
<view>
|
|
<top-bar></top-bar>
|
|
<common-header></common-header>
|
|
<category-bar></category-bar>
|
|
|
|
<view class="page-nav">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
<el-breadcrumb-item>
|
|
<navigator style="display: inline-block;" url="/pages/spot/goods/goods">现货市场</navigator>
|
|
</el-breadcrumb-item>
|
|
<el-breadcrumb-item>发布现货</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</view>
|
|
|
|
<view class="form-view">
|
|
<!-- <vk-data-form ref="form1" v-model="form1.data" :action="form1.props.action" :columns="form1.props.columns"-->
|
|
<!-- :rules="form1.props.rules" :form-type="form1.props.formType"-->
|
|
<!-- :loading.sync="form1.props.loading"-->
|
|
<!-- :before-action="form1.props.beforeAction" :auto-close="true" label-width="140px"-->
|
|
<!-- :show-cancel="false"-->
|
|
<!-- @success="onFormSuccess">-->
|
|
<!-- <template v-slot:name="{ form, keyName }">-->
|
|
<!-- <el-input v-model="productName" readonly placeholder="请添加现货分类"></el-input>-->
|
|
<!-- </template>-->
|
|
<!-- </vk-data-form>-->
|
|
<el-form ref="form" :model="form1.data" label-width="140px">
|
|
<el-form-item label="现货名称">
|
|
<el-input v-model="form1.data.name" placeholder="请输入现货名称" readonly></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="现货分类" required>
|
|
<!-- <el-checkbox-group v-model="form1.data.categoryIds" @change="makeTitle">-->
|
|
<!-- <el-checkbox v-for="(item, index) in category" :key="index" :label="item._id">{{-->
|
|
<!-- item.name-->
|
|
<!-- }}-->
|
|
<!-- </el-checkbox>-->
|
|
<!-- </el-checkbox-group>-->
|
|
<div class="flex justify-center items-start">
|
|
<div v-for="(item, index) in category" class="flex-1" :key="index">
|
|
<div class="flex justify-start items-center">
|
|
<image :src="item.icon" style="width: 15px; height: 15px"/>
|
|
<span class="ml-10">{{ item.name }}</span>
|
|
</div>
|
|
<div class="ml-25 flex flex-wrap justify-start items-start">
|
|
<span class="mr-25 mt-10 pointer" @click="changeCheck(productItem)"
|
|
:class="[form1.data.categoryIds.includes(productItem._id) ? 'text-main' : '']"
|
|
v-for="(productItem, productIndex) in item.children"
|
|
:key="productIndex"> {{ productItem.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-start items-center flex-wrap mt-20">
|
|
<span style="margin: 10px 10px 0 0">已选:</span>
|
|
<div class="flex justify-start items-center pointer" @click="changeCheck(productItem)"
|
|
v-for="(productItem, productIndex) in categoryAll.filter(all => form1.data.categoryIds.includes(all._id))"
|
|
:key="productIndex" style="margin: 10px 10px 0 0">
|
|
<image src="/static/images/check.png" style="width: 12px; height: 12px; margin-right: 5px"/>
|
|
<span style="line-height: 18px">{{ productItem.name }}</span>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="库存（吨）" required>
|
|
<el-input v-model="form1.data.stock" placeholder="请输入库存（吨）" type="number"/>
|
|
</el-form-item>
|
|
<el-form-item label="现货存放地" required>
|
|
<vk-data-input-address :level="3" v-model="form1.data.address" @change="getAmount()"/>
|
|
</el-form-item>
|
|
<el-form-item label="产品规格单价">
|
|
<vk-data-upload v-model="form1.data.files" list-type="text" :on-preview="previewUpload"
|
|
accept=".jpg,.jpeg,.png,.xlsx,.doc,.docx,.pdf"/>
|
|
</el-form-item>
|
|
<el-form-item label="上传报价单样板">
|
|
<span class="text-main pointer" @click="download">下载样板</span>
|
|
<p class="tips">为平台格式统一性和用户便于对比请尽量使用建议格式</p>
|
|
</el-form-item>
|
|
<el-form-item label="报价有效期">
|
|
<el-date-picker :picker-options="pickerOptions"
|
|
v-model="form1.data.answerEndTime"
|
|
type="datetime"/>
|
|
</el-form-item>
|
|
<el-form-item label="产品现场图片">
|
|
<vk-data-upload v-model="form1.data.images" list-type="text" accept=".jpg,.jpeg,.png"/>
|
|
</el-form-item>
|
|
<el-form-item label="是否购买全国广告位">
|
|
<el-radio-group v-model="form1.data.buyAll" @change="getAmount(true)">
|
|
<el-radio :label="true">是</el-radio>
|
|
<el-radio :label="false">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="是否购买省份广告位">
|
|
<p class="tips text-main" v-if="!form1.data.buyAll && JSON.stringify(form1.data.address) === '{}'">
|
|
请先选择现货存放地</p>
|
|
<el-radio-group v-model="form1.data.buyTop" @change="getAmount()"
|
|
:disabled="form1.data.buyAll || JSON.stringify(form1.data.address) === '{}'">
|
|
<el-radio :label="true">是</el-radio>
|
|
<el-radio :label="false">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<p class="text-main text-25 my-20" v-if="form1.data.buyAll">
|
|
您已选择购买全国广告位,无法继续购买省份广告位</p>
|
|
<el-form-item label="购买时长(月)" v-if="form1.data.buyTop || form1.data.buyAll">
|
|
<el-input-number v-model="form1.data.buyTopNum" :min="1"/>
|
|
</el-form-item>
|
|
<el-form-item label="广告位价格">
|
|
{{ totalAmount }}元
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="text-center">
|
|
<el-button type="primary" @click="add">发布</el-button>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
pickerOptions: {
|
|
disabledDate(time) {
|
|
return time.getTime() < Date.now();
|
|
},
|
|
},
|
|
category: [],
|
|
categoryAll: [],
|
|
// 表单相关开始-----------------------------------------------------------
|
|
form1: {
|
|
// 表单请求数据，此处可以设置默认值
|
|
data: {
|
|
name: '',
|
|
stock: '',
|
|
buyTop: false,
|
|
buyAll: false,
|
|
buyTopNum: 1,
|
|
categoryIds: [],
|
|
files: [],
|
|
images: [],
|
|
address: {},
|
|
answerEndTime: null,
|
|
},
|
|
// 表单属性
|
|
props: {
|
|
// 表单请求地址
|
|
action: "client/spot/goods/kh/addUpdate",
|
|
// 表单字段显示规则
|
|
columns: [{
|
|
key: "name",
|
|
title: "现货名称",
|
|
type: "text",
|
|
},
|
|
{
|
|
key: "categoryIds",
|
|
title: "现货分类",
|
|
type: "html",
|
|
// action: "client/spot/category/pub/getList",
|
|
// actionData: {
|
|
// whereJson: {
|
|
// level: 2
|
|
// }
|
|
// },
|
|
// props: {
|
|
// list: "data",
|
|
// value: "_id",
|
|
// label: "name"
|
|
// },
|
|
// watch: ({
|
|
// option
|
|
// }) => {
|
|
// if (this.form1.data.categoryIds.length > 5) {
|
|
// this.$message.error('最多选择五个分类')
|
|
// this.form1.data.categoryIds.splice(-1, 1)
|
|
// return
|
|
// }
|
|
//
|
|
// this.form1.data.name = option.map(item => item.name).join('、')
|
|
// this.productName = option.map(item => item.name).join('、')
|
|
// },
|
|
},
|
|
{
|
|
key: "stock",
|
|
title: "库存（吨）",
|
|
type: "number"
|
|
},
|
|
{
|
|
key: "address",
|
|
title: "供货地",
|
|
type: "address"
|
|
},
|
|
{
|
|
key: "files",
|
|
title: "附件文档",
|
|
type: "file",
|
|
buttonText: "点击上传",
|
|
limit: 9,
|
|
accept: ".jpg,.jpeg,.png,.xlsx,.doc,.docx,.pdf",
|
|
tips: '上传自有采购单图片或文档,支持jpg/png/word/excel'
|
|
},
|
|
{
|
|
key: "buyAll",
|
|
title: "是否购买全国广告位",
|
|
type: "radio",
|
|
data: [
|
|
{
|
|
value: true,
|
|
label: "是"
|
|
},
|
|
{
|
|
value: false,
|
|
label: "否"
|
|
}
|
|
],
|
|
watch: ({value, formData}) => {
|
|
if (value) {
|
|
formData.buyTop = false
|
|
|
|
}
|
|
}
|
|
},
|
|
{
|
|
key: "buyTop",
|
|
title: "是否购买广告位",
|
|
type: "radio",
|
|
data: [
|
|
{
|
|
value: true,
|
|
label: "是"
|
|
},
|
|
{
|
|
value: false,
|
|
label: "否"
|
|
}
|
|
],
|
|
disabled: formData => {
|
|
return formData.buyAll
|
|
}
|
|
},
|
|
{
|
|
key: "buyTopNum",
|
|
title: "购买广告位时长(月)",
|
|
type: "number",
|
|
controls: true,
|
|
precision: 0,
|
|
min: 1,
|
|
step: 1,
|
|
rightText: '月'
|
|
},
|
|
{
|
|
key: "amount",
|
|
title: "价格",
|
|
type: "text",
|
|
readonly: true,
|
|
placeholder: '请选择供货地'
|
|
},
|
|
|
|
],
|
|
// 表单验证规则
|
|
rules: {
|
|
categoryIds: [
|
|
{
|
|
required: true,
|
|
message: "现货名称不能为空",
|
|
trigger: ['blur', 'change']
|
|
},
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
if (value.length > 5) {
|
|
callback(new Error('最多选择五个分类'));
|
|
} else {
|
|
callback()
|
|
}
|
|
},
|
|
trigger: ['blur', 'change']
|
|
},
|
|
],
|
|
stock: [
|
|
{
|
|
required: true,
|
|
message: "请填写库存",
|
|
trigger: ['blur', 'change']
|
|
},
|
|
{
|
|
min: 0,
|
|
type: 'number',
|
|
message: "库存不能小于0",
|
|
trigger: ['blur', 'change']
|
|
},
|
|
],
|
|
address: [
|
|
{
|
|
required: true,
|
|
message: "请填写地址",
|
|
trigger: ['blur', 'change']
|
|
}
|
|
]
|
|
},
|
|
// add 代表添加 update 代表修改
|
|
formType: "add",
|
|
// 表单是否在请求中
|
|
loading: false,
|
|
// 是否显示表单1 的弹窗
|
|
show: false
|
|
}
|
|
},
|
|
productName: '',
|
|
amount: '',
|
|
// 表单相关结束-----------------------------------------------------------
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.getCategory()
|
|
vk.callFunction({
|
|
url: 'client/spot/goods/kh/getSelfOne',
|
|
success: (res) => {
|
|
if (res.data) {
|
|
this.$refs.form1.setResetFormData(res.data);
|
|
this.$refs.form1.resetForm();
|
|
this.productName = res.data.name
|
|
}
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
changeCheck(product) {
|
|
const index = this.form1.data.categoryIds.findIndex(item => item === product._id)
|
|
if (index > -1) {
|
|
this.form1.data.categoryIds.splice(index, 1)
|
|
} else {
|
|
if (this.form1.data.categoryIds.length === 5) {
|
|
return this.$message.error('最多选择五个分类');
|
|
}
|
|
this.form1.data.categoryIds.push(product._id)
|
|
}
|
|
console.log(this.form1.data.categoryIds)
|
|
this.form1.data.name = this.categoryAll.filter(item => this.form1.data.categoryIds.includes(item._id)).map(item => item.name).join(',')
|
|
this.$forceUpdate()
|
|
},
|
|
onFormSuccess(res) {
|
|
if (this.form1.data.buyTop) {
|
|
vk.navigateTo({
|
|
url: `/pages/index/shop/pay?id=${res.data.data}`
|
|
})
|
|
} else vk.redirectTo({url: '/pages/spot/goods/goods'});
|
|
},
|
|
getCategory() {
|
|
vk.callFunction({
|
|
url: 'client/spot/category/pub/getTree',
|
|
success: (res) => {
|
|
this.categoryAll = []
|
|
this.category = res.rows.map(item => {
|
|
item.children.map(child => {
|
|
this.categoryAll.push(child)
|
|
return child
|
|
})
|
|
return item
|
|
});
|
|
console.log(this.category)
|
|
}
|
|
});
|
|
},
|
|
makeTitle(val) {
|
|
if (val.length > 5) {
|
|
this.form1.data.categoryIds.splice(-1)
|
|
return this.$message.error('最多选择五个分类');
|
|
}
|
|
this.form1.data.name = this.category.filter(item => val.includes(item._id)).map(item => item.name).join('、')
|
|
this.$forceUpdate()
|
|
},
|
|
getAmount(isAll = false) {
|
|
if (!this.form1.data.buyTop && !this.form1.data.buyAll) {
|
|
this.amount = 0
|
|
return
|
|
}
|
|
this.amount = 0
|
|
if (!isAll && JSON.stringify(this.form1.data.address) === '{}') return
|
|
vk.callFunction({
|
|
url: 'client/spot/amount/pub/getDetail',
|
|
data: {
|
|
province: isAll ? -1 : this.form1.data.address.province.code,
|
|
},
|
|
success: (res) => {
|
|
if (res.data) {
|
|
this.amount = parseFloat(res.data.amount)
|
|
} else {
|
|
if (!isAll) this.form1.data.buyTop = false
|
|
}
|
|
}
|
|
});
|
|
},
|
|
async add() {
|
|
if (this.form1.data.categoryIds.length === 0) return this.$message.error('请选择分类')
|
|
if (!this.form1.data.stock) return this.$message.error('请填写库存')
|
|
if (JSON.stringify(this.form1.data.address) === '{}') return this.$message.error('请选择供货地')
|
|
const res = await vk.callFunction({
|
|
title: '请求中...',
|
|
url: 'client/spot/goods/kh/addUpdate',
|
|
data: this.form1.data
|
|
})
|
|
if (this.form1.data.buyTop || this.form1.data.buyAll) {
|
|
vk.navigateTo({
|
|
url: `/pages/index/shop/pay?id=${res.data}`
|
|
})
|
|
} else vk.redirectTo({url: '/pages/spot/goods/goods'});
|
|
},
|
|
async download() {
|
|
const res = await vk.callFunction({
|
|
url: 'client/dict/pub/getDetail',
|
|
data: {
|
|
id: '7433728469140dac03352ade6cb069c8'
|
|
},
|
|
})
|
|
let openUrl = res.content
|
|
const userAgent = window.navigator.userAgent.toLowerCase();
|
|
if (userAgent.match(/micromessenger/i)) {
|
|
window.open(`https://www.jinjiuxinzg.cn/pdfjs/web/viewer.html?file=${encodeURIComponent(openUrl)}`)
|
|
} else {
|
|
window.open(openUrl)
|
|
}
|
|
},
|
|
previewUpload({url}) {
|
|
let openUrl = url
|
|
const userAgent = window.navigator.userAgent.toLowerCase();
|
|
if (userAgent.match(/micromessenger/i)) {
|
|
window.open(`https://www.jinjiuxinzg.cn/pdfjs/web/viewer.html?file=${encodeURIComponent(openUrl)}`)
|
|
} else {
|
|
window.open(openUrl)
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
totalAmount() {
|
|
let amount = 0
|
|
if (this.amount) amount = this.amount * this.form1.data.buyTopNum
|
|
return amount
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.form-view {
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
background-color: #FFFFFF;
|
|
padding: 20rpx;
|
|
}
|
|
</style> |