Skip to content

GitLab

Q
qk_admin
Commit 6f71e395 authored by yaya's avatar yaya
Browse files
Options

feat: 添加团购编辑页面

parent ffecd10b
Show whitespace changes
Inline Side-by-side
Showing with 521 additions and 2 deletions
src/router/index.js
View file @ 6f71e395
...@@ -486,6 +486,19 @@ export const asyncRouterMap = [ ...@@ -486,6 +486,19 @@ export const asyncRouterMap = [
keepAlive: true keepAlive: true
} }
}, },
{
path: 'groupAdd',
component: () => import('@/views/sale/groupAdd'),
name: 'groupAdd',
meta: {
perms: [],
title: '商品编辑',
icon: 'logininfor',
noCache: true,
keepAlive: true
},
hidden: true
},
{ {
path: 'auctionList', path: 'auctionList',
component: () => import('@/views/sale/auctionList'), component: () => import('@/views/sale/auctionList'),
......
src/views/sale/groupAdd.vue 0 → 100644
View file @ 6f71e395
<template>
<div>
<el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>商品信息</span>
</div>
<el-form-item label="商品标题" prop="name">
<el-input v-model="goods.name" />
</el-form-item>
<el-form-item label="商品详情" prop="description">
<editor :init="editorInit" :style="{'min-height':'300px' }" v-model="goods.description" />
</el-form-item>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>商品图片</span>
</div>
<el-form-item label="" prop="images">
<div v-if="goods.images && (typeof goods.images === 'object')" class="ant-upload-list">
<draggable
:list="goods.images"
:options="{group:'title', animation:150}"
:no-transition-on-drag="true"
class="syllable_ul"
element="ul"
@change="change"
>
<div v-for="(item, index) in goods.images" :key="index" class="ant-upload-list-item">
<div class="ant-upload-list-item-info">
<span>
<a :href="item" target="_blank" rel="noopener noreferrer" >
<img :src="item" class="ant-upload-list-item-thumbnail">
</a>
</span>
</div>
<span class="ant-upload-list-item-actions">
<i class="el-icon-delete" @click="removeImg(item)"/>
</span>
</div>
</draggable>
</div>
<el-upload
:action="uploadPath"
:headers="headers"
:limit="9"
:file-list="itemImages"
:on-exceed="uploadOverrun"
:on-success="handleGalleryUrl"
:on-remove="handleRemove"
:show-file-list="false"
multiple
accept=".jpg,.jpeg,.png,.gif"
list-type="picture-card">
<i class="el-icon-plus" />
</el-upload>
<div>建议上传尺寸3：4的图片，最多不超过9张</div>
</el-form-item>
<!-- <el-form-item label="图片" prop="images">
<UploadFile :product-top-images.sync="goods.images" @productTopImages="goods.images"/>
</el-form-item>-->
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>商品设置</span>
</div>
<div>
<div class="item">
<el-form-item label="藏家定价" >
<div style="width: 300px">{{ `${goods && goods.distributionPrice ? `¥ ${goods.distributionPrice}` : '-'}` }}</div>
</el-form-item>
<el-form-item label="售价" prop="valuation">
<el-input v-model="goods.valuation" style="width: 300px">
<template slot="prepend">¥</template>
</el-input>
</el-form-item>
</div>
<div class="item">
<el-form-item label="供货价" prop="startPrice">
<el-input v-model="goods.startPrice" style="width: 300px">
<template slot="prepend">¥</template>
</el-input>
</el-form-item>
<el-form-item label="订金" prop="addExtent">
<el-input v-model="goods.addExtent" style="width: 300px">
<template slot="prepend">¥</template>
</el-input>
</el-form-item>
</div>
<div class="item">
<el-form-item label="团购时间" prop="auctionEndTime">
<el-date-picker
v-model="timeValue"
:picker-options="pickerOptions"
class="filter-item"
style="width: 400px; "
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
align="right"/>
</el-form-item>
</div>
<div class="item">
<el-form-item label="团购方式" prop="auctionEndTime">
<div>
拼满
<el-input v-model="goods.valuation" style="width: 150px">
<template slot="append">件</template>
</el-input>
<span style="margin-left: 20px">享受</span>
<el-input v-model="goods.valuation" style="width: 150px">
<template slot="append">折</template>
</el-input>
</div>
</el-form-item>
</div>
</div>
</el-card>
</el-form>
<div class="op-container">
<el-button @click="handleBack">返回</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
</div>
</template>
<script>
import { uploadPath, createStorage } from '@/api/business/storage'
import { getToken } from '@/utils/auth'
import Editor from '@tinymce/tinymce-vue'
import { MessageBox } from 'element-ui'
import { createSale, findSaleDetail, updateSale } from '../../api/business/sale'
import UploadFile from './UploadImg'
import draggable from 'vuedraggable'
export default {
name: 'GroupAdd',
components: { UploadFile, Editor, draggable },
data() {
return {
uploadPath,
numType: -1,
goods: {
images: [],
type: 1,
buyLimitNum: 0
},
timeValue: '',
pickerOptions: {
disabledDate(time) {
var todayYear = (new Date()).getFullYear()
var todayMonth = (new Date()).getMonth()
var todayDay = (new Date()).getDate() - 1
var todayTime = (new Date(todayYear, todayMonth, todayDay, '23', '59', '59')).getTime()// 毫秒
return time.getTime() < todayTime
}
},
itemImages: [],
rules: {
images: [{ required: true, message: '至少一张图片', trigger: 'blur' }],
name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
// auctionStartTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
// auctionEndTime: [{ required: true, message: '截拍时间不能为空', trigger: 'blur' }],
startPrice: [{ required: true, message: '起拍价不能为空', trigger: 'blur' }],
addExtent: [{ required: true, message: '加价幅度不能为空', trigger: 'blur' }],
estimatedPrice: [{ required: true, message: '估价不能为空', trigger: 'blur' }],
supplyPrice: [{ required: true, message: '供货价不能为空', trigger: 'blur' }]
},
editorInit: {
language: 'zh_CN',
convert_urls: false,
plugins: [
'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
],
toolbar: [
'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample',
'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
],
images_upload_handler: function(blobInfo, success, failure) {
const formData = new FormData()
formData.append('file', blobInfo.blob())
createStorage(formData)
.then(res => {
success(res.data.data.url)
})
.catch(() => {
failure('上传失败，请重新上传')
})
}
}
}
},
computed: {
headers() {
return {
'X-Dts-Admin-Token': getToken()
}
}
},
created() {
if (this.$route.query.id == null) {
return
}
this.id = this.$route.query.id
this.timeStr = this.$route.query.timeStr
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.handleGetDetail(loading)
},
methods: {
change() {
const newList = []
for (var i = 0; i < this.goods.images.length; i++) {
newList.push({
url: this.goods.images[i]
})
}
this.itemImages = newList
},
previewImg(url) {
window.open(url, '_blank')
},
removeImg(url) {
this.goods.images.forEach((val, key) => {
if (url === val) {
this.goods.images.splice(key, 1)
this.change()
}
})
this.itemImages.forEach((val, key) => {
if (url === val.url) {
this.itemImages.splice(key, 1)
this.change()
}
})
},
handlerNumTypeChange(e) {
console.log('==e==', e)
},
handlerClose(imageList) {
this.itemImages = imageList
},
/**
* 获取详情
* @param loading
*/
handleGetDetail(loading) {
findSaleDetail({ id: this.id })
.then(response => {
if (loading) {
loading.close()
}
console.log('====', response.data.data)
if (response.data.data) {
this.goods = response.data.data
if (!response.data.data.buyLimitNum || response.data.data.buyLimitNum === -1) {
this.goods.buyLimitNum = 0
this.numType = -1
} else {
this.numType = 2
}
this.goods.images = response.data.data.images ? response.data.data.images.split(';') : []
if (this.goods.images && this.goods.images.length > 0) {
for (var i = 0; i < this.goods.images.length; i++) {
this.itemImages.push({
url: this.goods.images[i]
})
}
}
}
})
.catch(response => {
if (loading) {
loading.close()
}
})
},
/**
* 返回
*/
handleBack() {
if (this.$route.query.noGoBack) {
this.$router.push({ path: '/dashboard' })
} else {
this.$router.go(-1)
}
},
/**
* 保存
*/
handleSave() {
if (this.goods.images.length === 0) {
this.$message({
type: 'error',
message: '最少上传1张图片!'
})
return
}
if (this.goods.stock <= 0) {
this.$message({
type: 'error',
message: '库存需大于0!'
})
return
}
if (this.numType === 2 && this.goods.buyLimitNum <= 0) {
this.$message({
type: 'error',
message: '限购数量需大于0！'
})
return
}
if (this.goods.images) {
if (typeof this.goods.images !== 'string') {
this.goods.images = this.goods.images.join(';')
}
} else {
this.goods.images = ''
}
this.$refs.goods.validate((valid) => {
if (valid) {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
if (this.numType === -1) {
this.goods.buyLimitNum = -1
}
if (this.id) {
updateSale(this.goods)
.then(response => {
if (loading) {
loading.close()
}
this.$notify.success({
title: '成功',
message: '编辑成功'
})
this.$router.push({ path: '/sale/auctionList' })
})
.catch(response => {
if (loading) {
loading.close()
}
this.goods.images = this.goods.images.split(';') || []
MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
} else {
createSale(this.goods)
.then(response => {
if (loading) {
loading.close()
}
this.$notify.success({
title: '成功',
message: '创建成功'
})
this.$router.push({ path: '/sale/auctionList' })
})
.catch(response => {
if (loading) {
loading.close()
}
this.goods.images = this.goods.images.split(';') || []
MessageBox.alert('业务错误：' + response.data.errmsg || '请求失败，请重试', '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
}
}
})
},
/**
* 金额输入
* @param value
*/
limitInput(value, type) {
const price = ('' + value) // 第一步：转成字符串
.replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
.replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
.replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
.match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点， 而且小数点后面只能有0到2位小数
if (type === 1) {
this.goods.distributionPrice = price
} else if (type === 2) {
this.goods.supplyPrice = price
} else if (type === 3) {
this.goods.rebate = price
}
},
uploadOverrun: function() {
this.$message({
type: 'error',
message: '上传文件个数超出限制!最多上传9张图片!'
})
},
handleGalleryUrl(response, file, fileList) {
if (response.errno === 0) {
this.goods.images.push(response.data.url)
}
},
handleRemove: function(file, fileList) {
var url
if (file.response === undefined) {
url = file.url
} else {
url = file.response.data.url
}
for (var i = 0; i < this.goods.images.length; i++) {
// 这里存在两种情况
// 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
// 此时的file.url虽然存在，但是是本机地址，而不是远程地址。
// 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
if (this.goods.images[i] === url) {
this.goods.images.splice(i, 1)
}
}
}
}
}
</script>
<style lang="scss" scoped>
.box-card {
margin: 24px;
}
.item {
display: flex;
}
.op-container {
display: flex;
justify-content: center;
padding: 0 24px 24px;
}
/deep/ .el-form-item__content {
margin-left: 0;
}
/deep/ .syllable_ul {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/deep/ .el-icon-delete {
color: white;
}
/deep/ .el-upload--picture-card {
margin-left: 40px;
}
.ant-upload-list {
display: flex;
flex-direction: row;
}
.ant-upload-list-item {
display: flex;
flex-direction: row;
width: 146px;
height: 146px;
margin: 0 12px 12px 0;
.ant-upload-list-item-info {
position: relative;
}
.ant-upload-list-item-actions {
width: 146px;
height: 30px;
position: absolute;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
top: 0;
margin-top: 136px;
background: rgba(0, 0, 0, 0.5);
border-radius: 0 0 12px 12px;
}
.ant-upload-list-item-thumbnail {
width: 146px;
height: 146px;
border-radius: 12px;
}
}
</style>
src/views/sale/groupList.vue
View file @ 6f71e395
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
fit fit
highlight-current-row> highlight-current-row>
<!-- <el-table-column align="center" label="排行" width="100px" type="index" />--> <!-- <el-table-column align="center" label="排行" width="100px" type="index" />-->
<el-table-column align="center" min-width="100px" prop="id" label="商品ID" /> <el-table-column align="center" min-width="100px" prop="id" label="商品ID" fixed="left"/>
<el-table-column align="center" label="封面图" prop="itemImg"> <el-table-column align="center" label="封面图" prop="itemImg">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="image_preview"> <div class="image_preview">
...@@ -198,7 +198,7 @@ export default { ...@@ -198,7 +198,7 @@ export default {
* 详情 * 详情
*/ */
handleToDetail(item) { handleToDetail(item) {
this.$router.push({ path: '/sale/saleAdd', query: { id: item.id }}) this.$router.push({ path: '/sale/groupAdd', query: { id: item.id }})
}, },
/** /**
* 删除 * 删除
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment