|
@@ -0,0 +1,245 @@
|
|
|
+<style>
|
|
|
+ .demo-upload-list{
|
|
|
+ display: inline-block;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0 1px 1px rgba(0,0,0,.2);
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .demo-upload-list img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .demo-upload-list-cover{
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: rgba(0,0,0,.6);
|
|
|
+ }
|
|
|
+ .demo-upload-list:hover .demo-upload-list-cover{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .demo-upload-list-cover i{
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 2px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <Row type="flex" justify="center" align="middle">
|
|
|
+ <Col span="12">
|
|
|
+ <Form ref="createdata" :model="createdata" :label-width="80">
|
|
|
+ <Col span="20">
|
|
|
+ <Form-item label="活动名称">
|
|
|
+ <Input type="text" v-model="createdata.name" placeholder="活动名称" :disabled="!isedit"></Input>
|
|
|
+ </Form-item>
|
|
|
+ <Form-item label="活动时间">
|
|
|
+ <Date-picker v-model="createdata.createdate" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placement="bottom-end"
|
|
|
+ placeholder="选择日期" style="width: 400px" @on-change="createdateChange" :disabled="!isedit"></Date-picker>
|
|
|
+ </Form-item>
|
|
|
+ <Form-item label="横幅图片">
|
|
|
+ <div class="demo-upload-list" v-for="(item,index) in uploadList" :key="index">
|
|
|
+ <template v-if="item.status === 'finished'">
|
|
|
+ <img :src="item.url">
|
|
|
+ <div class="demo-upload-list-cover">
|
|
|
+ <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
|
|
|
+ <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else >
|
|
|
+ <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <Upload
|
|
|
+ v-if="isedit"
|
|
|
+ name="file"
|
|
|
+ ref="upload"
|
|
|
+ :show-upload-list="false"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :format="['jpg','jpeg','png']"
|
|
|
+ :max-size="2048"
|
|
|
+ :on-format-error="handleFormatError"
|
|
|
+ :on-exceeded-size="handleMaxSize"
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ type="drag"
|
|
|
+ :action="uploadurl"
|
|
|
+ style="display: inline-block;width:58px;">
|
|
|
+ <div style="width: 58px;height:58px;line-height: 58px;"
|
|
|
+ :disabled="!isedit">
|
|
|
+ <Icon type="logo-instagram" size="20"></Icon>
|
|
|
+ </div>
|
|
|
+ </Upload>
|
|
|
+ <Modal title="查看图片" v-model="visible">
|
|
|
+ <img :src="imgurl" v-if="visible" style="width: 100%">
|
|
|
+ </Modal>
|
|
|
+ </Form-item>
|
|
|
+ <Form-item >
|
|
|
+ <Button type="primary" @click="saveinfo" :disabled="!isedit">保存</Button>
|
|
|
+ </Form-item>
|
|
|
+ </Col>
|
|
|
+ </Form>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import config from '@/config'
|
|
|
+import { saveParty, getPartyInfoById } from '@/api/data'
|
|
|
+const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
|
|
|
+export default {
|
|
|
+ name: 'editparty',
|
|
|
+ data () {
|
|
|
+ var self = this
|
|
|
+ return {
|
|
|
+ createdata: {
|
|
|
+ id: 0,
|
|
|
+ name: '',
|
|
|
+ createdate: [],
|
|
|
+ bannerphoto: ''
|
|
|
+ },
|
|
|
+ uploadList: [],
|
|
|
+ visible: false,
|
|
|
+ imgurl: '',
|
|
|
+ uploadurl: baseUrl + '/index/fileoper/uploadfilebydir?dir=party',
|
|
|
+ detail: {},
|
|
|
+ isedit: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ onQuery: function () {
|
|
|
+ // console.log(this.$route.query)
|
|
|
+ return this.$route.query
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'onQuery' (old, newValue) {
|
|
|
+ // console.log(11, old, newValue, newValue.id != old.id)
|
|
|
+ if (old.id) {
|
|
|
+ // console.log('update', old)
|
|
|
+ if (old.id) {
|
|
|
+ this.createdata.id = old.id
|
|
|
+ }
|
|
|
+ this.isedit = old.edit
|
|
|
+ if (this.createdata.id > 0) {
|
|
|
+ this.setinfo()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ createdateChange (values) {
|
|
|
+ this.createdata.createdate = values
|
|
|
+ },
|
|
|
+ handleSuccess (res, file) {
|
|
|
+ const name = file.name
|
|
|
+ const response = file.response
|
|
|
+ if (response.code != 200) {
|
|
|
+ this.$Message.error(response.resultData)
|
|
|
+ } else {
|
|
|
+ let imgfile = {
|
|
|
+ status: 'finished',
|
|
|
+ url: response.resultData,
|
|
|
+ name: name
|
|
|
+ }
|
|
|
+ this.uploadList.push(imgfile)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleFormatError (file) {
|
|
|
+ this.$Notice.warning({
|
|
|
+ title: '文件格式不正确',
|
|
|
+ desc: '文件 ' + file.name + ' 格式不正确,请上传 jpg 或 png 格式的图片。'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleMaxSize (file) {
|
|
|
+ this.$Notice.warning({
|
|
|
+ title: '超出文件大小限制',
|
|
|
+ desc: '文件 ' + file.name + ' 太大,不能超过 2M。'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleBeforeUpload () {
|
|
|
+ const check = this.uploadList.length < 1
|
|
|
+ if (!check) {
|
|
|
+ this.$Notice.warning({
|
|
|
+ title: '最多只能上传 1 张图片。'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return check
|
|
|
+ },
|
|
|
+ handleView (imgurl) {
|
|
|
+ this.imgurl = imgurl
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
+ handleRemove (index) {
|
|
|
+ // 从 upload 实例删除数据
|
|
|
+ const fileList = this.$refs.upload.fileList
|
|
|
+ fileList.splice(index, 1)
|
|
|
+ this.uploadList.splice(index, 1)
|
|
|
+ },
|
|
|
+ saveinfo () {
|
|
|
+ if (this.uploadList.length > 0) {
|
|
|
+ this.createdata.bannerphoto = this.uploadList[0].url
|
|
|
+ }
|
|
|
+ let usedata = this.createdata
|
|
|
+ saveParty(usedata).then(res => {
|
|
|
+ const data = res.data
|
|
|
+ if (data.code !== 200) {
|
|
|
+ this.$Message.error(data.msg)
|
|
|
+ } else {
|
|
|
+ this.$Message.success(data.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setinfo () {
|
|
|
+ const id = this.createdata.id
|
|
|
+ getPartyInfoById(id).then(res => {
|
|
|
+ const data = res.data
|
|
|
+ if (data.code !== 200) {
|
|
|
+ this.$Message.error(data.msg)
|
|
|
+ } else {
|
|
|
+ this.detail = data.data
|
|
|
+ // console.log(this.detail)
|
|
|
+ this.createdata.name = this.detail.name
|
|
|
+ this.createdata.createdate = [
|
|
|
+ this.detail.start_time,
|
|
|
+ this.detail.end_time
|
|
|
+ ]
|
|
|
+ this.createdata.bannerphoto = this.detail.banner_photo
|
|
|
+ // console.log(this.createdata)
|
|
|
+ let imgfile = {
|
|
|
+ status: 'finished',
|
|
|
+ url: this.detail.banner_photo,
|
|
|
+ name: ''
|
|
|
+ }
|
|
|
+ this.uploadList = []
|
|
|
+ this.uploadList.push(imgfile)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const query = this.onQuery
|
|
|
+ if (query.id) {
|
|
|
+ this.createdata.id = query.id
|
|
|
+ this.isedit = query.edit
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.createdata.id > 0) {
|
|
|
+ this.setinfo()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|