|
@@ -154,30 +154,69 @@
|
|
|
<el-button type="primary" @click="updateFormInfo">确 定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
- <el-dialog title="上传模板" :visible.sync="dialogAddImg" width="40%">
|
|
|
- <el-form label-position="right" :model="addImg" style="margin-top:20px">
|
|
|
- <el-form-item label="活动:" label-width="100px" required>
|
|
|
- <el-select v-model="listQuery.activity_id" style="width: 350px" disabled>
|
|
|
- <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上传主图:" label-width="100px" required>
|
|
|
- <el-upload action="" :show-file-list="false" :http-request="thumbPictureUploadone">
|
|
|
- <el-button size="mini">点击上传</el-button>
|
|
|
- </el-upload>
|
|
|
- <div v-if="addImg.main_url">
|
|
|
- <el-image :src="addImg.main_url" fit="contain" class="thumbUrl" :preview-src-list="[addImg.main_url]" :z-index="3000" />
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上传副图:" label-width="100px" required>
|
|
|
- <el-upload action="" :show-file-list="false" :http-request="thumbPictureUploadtwo">
|
|
|
- <el-button size="mini">点击上传</el-button>
|
|
|
- </el-upload>
|
|
|
- <div v-if="addImg.url">
|
|
|
- <el-image :src="addImg.url" fit="contain" class="thumbUrl" :preview-src-list="[addImg.url]" :z-index="3000" />
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <el-dialog title="上传模板" :visible.sync="dialogAddImg" width="50%">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-form label-position="right" :model="addImg" style="margin-top:20px">
|
|
|
+ <el-form-item label="活动:" label-width="100px" required>
|
|
|
+ <el-select v-model="listQuery.activity_id" style="width: 260px" disabled>
|
|
|
+ <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传主图:" label-width="100px" required>
|
|
|
+ <el-upload action="" :show-file-list="false" :http-request="thumbPictureUploadone">
|
|
|
+ <el-button size="mini">点击上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div v-if="addImg.main_url">
|
|
|
+ <el-image :src="addImg.main_url" fit="contain" class="thumbUrl" :preview-src-list="[addImg.main_url]" :z-index="3000" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传副图:" label-width="100px" required>
|
|
|
+ <el-upload action="" :show-file-list="false" :http-request="thumbPictureUploadtwo">
|
|
|
+ <el-button size="mini">点击上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div v-if="addImg.url">
|
|
|
+ <el-image :src="addImg.url" fit="contain" class="thumbUrl" :preview-src-list="[addImg.url]" :z-index="3000" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div>
|
|
|
+ <el-form label-width="130px">
|
|
|
+ <el-form-item label="顶边距">
|
|
|
+ <el-input v-model="height" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入顶边距" style="width:220px" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="左边距">
|
|
|
+ <el-input v-model="left_len" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入左边距" style="width:220px" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="文字内容">
|
|
|
+ <el-input v-model="text" style="width:220px" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="文字大小">
|
|
|
+ <el-input v-model="size" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入文字大小" style="width:220px" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="文字颜色">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <el-input v-model="color" style="width:180px" clearable />
|
|
|
+ <el-color-picker v-model="color" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片">
|
|
|
+ <el-input v-model="user_img" style="width:220px" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="setImage">生成</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 60px;">
|
|
|
+ <el-image
|
|
|
+ v-if="image"
|
|
|
+ style="width: 200px; border: 1px dashed #C1C4C6;"
|
|
|
+ :src="image"
|
|
|
+ :preview-src-list="[image]"
|
|
|
+ />
|
|
|
+ <p v-if="image" style="width: 200px; text-align: center;">点击图片预览</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="dialogAddImg = false">取 消</el-button>
|
|
|
<el-button type="primary" @click="addImgInfo">确 定</el-button>
|
|
@@ -201,6 +240,13 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ height: 306,
|
|
|
+ left_len: 844,
|
|
|
+ text: '',
|
|
|
+ size: 100,
|
|
|
+ color: '#FFFFFF',
|
|
|
+ user_img: 'https://image.chuliu.cc/bwcx.png',
|
|
|
+ image: null,
|
|
|
urtemp: '',
|
|
|
loadingFull: false,
|
|
|
indexe: 0,
|
|
@@ -268,6 +314,16 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 预览图片
|
|
|
+ setImage() {
|
|
|
+ if (!this.height || !this.left_len || !this.text || !this.size || !this.color || !this.user_img) {
|
|
|
+ this.$message.error('请补全信息')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ console.log(this.image)
|
|
|
+ const textC = this.color.slice(1)
|
|
|
+ this.image = `https://api.admin.app.cliu.cc/api/CreateImgBDemo?user_img=${this.user_img}&text=${this.text}&size=${this.size}&color=${textC}&left_len=${this.left_len}&height=${this.height}`
|
|
|
+ },
|
|
|
// 重新生成
|
|
|
anew(row) {
|
|
|
this.$confirm('确定要重新生成吗 ?', '提示', {
|
|
@@ -331,6 +387,13 @@ export default {
|
|
|
if (this.imgStatus === true) {
|
|
|
this.addImg.main_url = res.data.main_img
|
|
|
this.addImg.url = res.data.img
|
|
|
+ if (res.data.img_info) {
|
|
|
+ const data = JSON.parse(res.data.img_info)
|
|
|
+ this.height = data.height
|
|
|
+ this.left_len = data.left_len
|
|
|
+ this.color = '#' + data.color
|
|
|
+ this.size = data.size
|
|
|
+ }
|
|
|
} else {
|
|
|
this.addImg.main_url = ''
|
|
|
this.addImg.url = ''
|
|
@@ -351,10 +414,18 @@ export default {
|
|
|
this.$message.error('请上传副图')
|
|
|
return
|
|
|
}
|
|
|
+ if (!this.height || !this.left_len || !this.size || !this.color) {
|
|
|
+ this.$message.error('请补全信息')
|
|
|
+ return
|
|
|
+ }
|
|
|
const data = {
|
|
|
activity_id: this.listQuery.activity_id,
|
|
|
main_url: this.addImg.main_url,
|
|
|
- url: this.addImg.url
|
|
|
+ url: this.addImg.url,
|
|
|
+ height: this.height,
|
|
|
+ left_len: this.left_len,
|
|
|
+ size: this.size,
|
|
|
+ color: this.color.slice(1)
|
|
|
}
|
|
|
AddUpdateImgB(data).then(res => {
|
|
|
this.loadingFull = false
|