|
|
@@ -0,0 +1,161 @@
|
|
|
+<template>
|
|
|
+ <div class="collection-add">
|
|
|
+
|
|
|
+ <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
|
|
|
+ <div class="collection-add-box">
|
|
|
+ <el-form :model="collection" :rules="rules" ref="form" label-width="100px">
|
|
|
+ <el-form-item label="藏品名称(套):" prop="collectionTitle" label-width="120px">
|
|
|
+ <el-input v-model="collection.collectionTitle" maxlength="20" show-word-limit></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="藏品头图:" prop="collectionImg" label-width="120px">
|
|
|
+ <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ :show-file-list="true" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
|
|
+ <img v-if="collection.imageUrl" :src="collection.imageUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ <span style="color: red;">请按照规范上传尺寸为750px * 750px的照片</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设置套系时间:" prop="collectionTime" label-width="120px">
|
|
|
+ <el-date-picker v-model="dataput" type="datetimerange" class="up-input-right" range-separator="-"
|
|
|
+ start-placeholder="开始日期" end-placeholder="结束日期" align="right">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="线下礼品兑换:" prop="giftRedemption" label-width="120px">
|
|
|
+ <el-radio-group v-model="collection.resource">
|
|
|
+ <el-radio label="可兑换"></el-radio>
|
|
|
+ <el-radio label="不可兑换"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label-width="120px">
|
|
|
+ <el-button type="primary">提交</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ collection: {
|
|
|
+ collectionTitle: '',
|
|
|
+ collectionTime: '',
|
|
|
+ resource: '',
|
|
|
+ imageUrl: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ collectionTitle: [
|
|
|
+ { required: true, collection: '请输入藏品名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+
|
|
|
+ collectionImg: [
|
|
|
+ { required: true, collection: '请设置头图', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ collectionTime: [
|
|
|
+ { required: true, collection: '请设置时间', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ giftRedemption: [
|
|
|
+ { required: true, collection: '请设置是否可兑换', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
+ this.collection.imageUrl = URL.createObjectURL(file.raw);
|
|
|
+ },
|
|
|
+ //限制图片大小
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPG = file.type === "image/jpeg" || file.type === "image/png";
|
|
|
+ if (!isJPG) {
|
|
|
+ this.$message.error("上传头像图片只能是 JPG和PNG 格式!");
|
|
|
+ }
|
|
|
+ //调用[限制图片尺寸]函数
|
|
|
+ this.limitFileWH(750, 750, file).then((res) => {
|
|
|
+ file.isFlag = res
|
|
|
+ })
|
|
|
+ return isJPG && file.isFlag;
|
|
|
+ },
|
|
|
+ //限制图片尺寸
|
|
|
+ limitFileWH(E_width, E_height, file) {
|
|
|
+ let _this = this;
|
|
|
+ let imgWidth = "";
|
|
|
+ let imgHight = "";
|
|
|
+ const isSize = new Promise(function (resolve, reject) {
|
|
|
+ let width = E_width;
|
|
|
+ let height = E_height;
|
|
|
+ let _URL = window.URL || window.webkitURL;
|
|
|
+ let img = new Image();
|
|
|
+ img.onload = function () {
|
|
|
+ imgWidth = img.width;
|
|
|
+ imgHight = img.height;
|
|
|
+ let valid = img.width == width && img.height == height;
|
|
|
+ valid ? resolve() : reject();
|
|
|
+ }
|
|
|
+ img.src = _URL.createObjectURL(file);
|
|
|
+ }).then(() => {
|
|
|
+ return true;
|
|
|
+ }, () => {
|
|
|
+ _this.$message.warning({
|
|
|
+ message: '上传文件的图片大小不合符标准,宽需要为' + E_width + 'px，高需要为' + E_height + 'px。当前上传图片的宽高分别为：' + imgWidth + 'px和' +
|
|
|
+ imgHight + 'px',
|
|
|
+ btn: false
|
|
|
+ })
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ return isSize
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.collection-add {
|
|
|
+ width: 700px;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+.collection-add-box {
|
|
|
+ padding: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 447px;
|
|
|
+ height: 447px;
|
|
|
+ line-height: 447px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|
王秀