|
|
@@ -1,399 +1,467 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view class="head">
|
|
|
- <view class="left">海报预览
|
|
|
- <text class="text">
|
|
|
- （请拖动到下方编辑、保存海报）
|
|
|
- </text>
|
|
|
+ <view>
|
|
|
+ <view class="head">
|
|
|
+ <view class="left"
|
|
|
+ >海报预览
|
|
|
+ <text class="text"> （请拖动到下方编辑、保存海报） </text>
|
|
|
+ </view>
|
|
|
+ <My_upload @uploadCallback="handleFileLink">
|
|
|
+ <view class="right"> 更换背景图 </view>
|
|
|
+ </My_upload>
|
|
|
+ </view>
|
|
|
+ <view class="painter-box">
|
|
|
+ <view>
|
|
|
+ <l-painter ref="painter" css="position: relative;">
|
|
|
+ <!-- 背景图片 -->
|
|
|
+ <l-painter-image
|
|
|
+ :src="file.url"
|
|
|
+ css="width: 280px; height: 500px"
|
|
|
+ object-fit="fill"
|
|
|
+ />
|
|
|
+ <!-- 模板1 底部背景图 -->
|
|
|
+ <l-painter-image
|
|
|
+ v-if="mode == 'model1'"
|
|
|
+ src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714733820B3d50bdd4.png"
|
|
|
+ css="width: 280px; height: 130px;position: absolute;bottom: 0;z-index: 1;"
|
|
|
+ object-fit="fill"
|
|
|
+ />
|
|
|
+ <block v-if="mode == 'model1' || mode == 'model2'">
|
|
|
+ <!-- 站点logo -->
|
|
|
+ <l-painter-image
|
|
|
+ :src="siteLogo"
|
|
|
+ css="width: 60px; height:60px;position: absolute;bottom: 0px;left:10px;z-index: 2;"
|
|
|
+ object-fit="cover"
|
|
|
+ />
|
|
|
+ <!-- 文字描述 -->
|
|
|
+ <l-painter-text
|
|
|
+ :text="painterText"
|
|
|
+ :css="
|
|
|
+ 'width: 190px; line-height:20px;position: absolute;bottom: 62px;left:10px;z-index: 2;font-size: 14px;color: #333333;line-clamp:2;' +
|
|
|
+ 'color:' +
|
|
|
+ textColor
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </block>
|
|
|
+ <!-- 二维码 -->
|
|
|
+ <l-painter-qrcode
|
|
|
+ v-if="mode != 'default' && detail.isqrcode"
|
|
|
+ :text="detail.qrcodecontent"
|
|
|
+ css="width: 64px; height: 64px;position: absolute;bottom: 22px;right:10px;z-index: 2;"
|
|
|
+ />
|
|
|
+ </l-painter>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="custom">
|
|
|
+ <view class="models">
|
|
|
+ <view class="group">
|
|
|
+ <view class="title">海报样式</view>
|
|
|
+ <view class="options">
|
|
|
+ <view
|
|
|
+ class="option"
|
|
|
+ v-for="option in ops.painter"
|
|
|
+ hover-class="navigator-hover"
|
|
|
+ :key="option.mode"
|
|
|
+ @click="mode = option.mode"
|
|
|
+ >
|
|
|
+ <image v-if="option.imgUrl" class="image" :src="option.imgUrl" />
|
|
|
+ <image
|
|
|
+ class="current"
|
|
|
+ v-if="option.mode == mode"
|
|
|
+ src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712715614059B373541f3.png"
|
|
|
+ />
|
|
|
</view>
|
|
|
- <My_upload @uploadCallback="handleFileLink">
|
|
|
- <view class="right">
|
|
|
- 更换背景图
|
|
|
- </view>
|
|
|
- </My_upload>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="painter-box">
|
|
|
- <view>
|
|
|
- <l-painter ref="painter" css="position: relative;">
|
|
|
- <!-- 背景图片 -->
|
|
|
- <l-painter-image :src="file.url" css="width: 280px; height: 500px" object-fit="fill" />
|
|
|
- <!-- 模板1 底部背景图 -->
|
|
|
- <l-painter-image v-if="mode == 'model1'"
|
|
|
- src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714733820B3d50bdd4.png"
|
|
|
- css="width: 280px; height: 130px;position: absolute;bottom: 0;z-index: 1;" object-fit="fill" />
|
|
|
- <block v-if="mode == 'model1' || mode == 'model2'">
|
|
|
- <!-- 站点logo -->
|
|
|
- <l-painter-image :src="siteLogo"
|
|
|
- css="width: 60px; height:60px;position: absolute;bottom: 0px;left:10px;z-index: 2;"
|
|
|
- object-fit="cover" />
|
|
|
- <!-- 文字描述 -->
|
|
|
- <l-painter-text :text="painterText"
|
|
|
- :css="'width: 190px; line-height:20px;position: absolute;bottom: 62px;left:10px;z-index: 2;font-size: 14px;color: #333333;line-clamp:2;' + 'color:' + textColor" />
|
|
|
- </block>
|
|
|
- <!-- 二维码 -->
|
|
|
- <l-painter-qrcode v-if="mode != 'default' && detail.isqrcode" :text="detail.qrcodecontent"
|
|
|
- css="width: 64px; height: 64px;position: absolute;bottom: 22px;right:10px;z-index: 2;" />
|
|
|
- </l-painter>
|
|
|
+ <view class="group">
|
|
|
+ <view class="title">文字色彩</view>
|
|
|
+ <view class="options">
|
|
|
+ <view
|
|
|
+ class="option"
|
|
|
+ v-for="option in ops.text"
|
|
|
+ hover-class="navigator-hover"
|
|
|
+ :key="option.name"
|
|
|
+ @click="textColor = option.color"
|
|
|
+ >
|
|
|
+ <view class="text" :style="option.style">
|
|
|
+ {{ option.name }}
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ class="current"
|
|
|
+ v-if="option.color == textColor"
|
|
|
+ src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712715614059B373541f3.png"
|
|
|
+ />
|
|
|
</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="custom">
|
|
|
- <view class="models">
|
|
|
- <view class="group">
|
|
|
- <view class="title">海报样式</view>
|
|
|
- <view class="options">
|
|
|
- <view class="option" v-for="option in ops.painter" hover-class="navigator-hover" :key="option.mode"
|
|
|
- @click="mode = option.mode">
|
|
|
- <image v-if="option.imgUrl" class="image" :src="option.imgUrl" />
|
|
|
- <image class="current" v-if="option.mode == mode"
|
|
|
- src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712715614059B373541f3.png" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="group">
|
|
|
- <view class="title">文字色彩</view>
|
|
|
- <view class="options">
|
|
|
- <view class="option" v-for="option in ops.text" hover-class="navigator-hover" :key="option.name"
|
|
|
- @click="textColor = option.color">
|
|
|
- <view class="text" :style="option.style">
|
|
|
- {{ option.name }}
|
|
|
- </view>
|
|
|
- <image class="current" v-if="option.color == textColor"
|
|
|
- src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712715614059B373541f3.png" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="text-box">
|
|
|
- <view class="title">
|
|
|
- 海报文案
|
|
|
- </view>
|
|
|
- <view class="input-box">
|
|
|
- <input class="input" maxlength="16" type="text" v-model="painterText">
|
|
|
- <icon v-if="painterText" class="icon" type="clear" size="3.733vw" @click="painterText = ''" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="but" @click="loading ? '' : saveTheImage()" hover-class="navigator-hover">
|
|
|
- <u-loading-icon v-if="loading" color="#fff" />
|
|
|
- <text v-else>
|
|
|
- 保存
|
|
|
- </text>
|
|
|
- </view>
|
|
|
+ <view class="text-box">
|
|
|
+ <view class="title"> 海报文案 </view>
|
|
|
+ <view class="input-box">
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ maxlength="16"
|
|
|
+ type="text"
|
|
|
+ v-model="painterText"
|
|
|
+ />
|
|
|
+ <icon
|
|
|
+ v-if="painterText"
|
|
|
+ class="icon"
|
|
|
+ type="clear"
|
|
|
+ size="3.733vw"
|
|
|
+ @click="painterText = ''"
|
|
|
+ />
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="but"
|
|
|
+ @click="loading ? '' : saveTheImage()"
|
|
|
+ hover-class="navigator-hover"
|
|
|
+ >
|
|
|
+ <u-loading-icon v-if="loading" color="#fff" />
|
|
|
+ <text v-else> 保存 </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="tips">
|
|
|
- *自定义海报区域可以选择海报样式、文字色彩等，文案部分最多可输入16个字，若留空，则不显示自定义文案。
|
|
|
- </view>
|
|
|
- <view style="height: 20px;" />
|
|
|
+ <view class="tips">
|
|
|
+ *自定义海报区域可以选择海报样式、文字色彩等，文案部分最多可输入16个字，若留空，则不显示自定义文案。
|
|
|
</view>
|
|
|
+ <view style="height: 20px" />
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import lPainter from "../../uni_modules/lime-painter/components/l-painter/l-painter.vue"
|
|
|
-import lPainterView from "../../uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue"
|
|
|
-import lPainterText from "../../uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue"
|
|
|
-import lPainterImage from "../../uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue"
|
|
|
-import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue"
|
|
|
+import lPainter from "../../uni_modules/lime-painter/components/l-painter/l-painter.vue";
|
|
|
+import lPainterView from "../../uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue";
|
|
|
+import lPainterText from "../../uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue";
|
|
|
+import lPainterImage from "../../uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue";
|
|
|
+import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue";
|
|
|
export default {
|
|
|
- components: { lPainter, lPainterView, lPainterText, lPainterImage, lPainterQrcode },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- detail: {},
|
|
|
- file: {},
|
|
|
- siteLogo: uni.getStorageSync('site').attinfos[0].url || '',
|
|
|
- painterText: '自定义海报区域可以选择海报样式',
|
|
|
+ components: {
|
|
|
+ lPainter,
|
|
|
+ lPainterView,
|
|
|
+ lPainterText,
|
|
|
+ lPainterImage,
|
|
|
+ lPainterQrcode,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ detail: {},
|
|
|
+ file: {},
|
|
|
+ siteLogo: "",
|
|
|
+ painterText: "自定义海报区域可以选择海报样式",
|
|
|
+ mode: "model1",
|
|
|
+ textColor: "#000000",
|
|
|
+ ops: {
|
|
|
+ painter: [
|
|
|
+ {
|
|
|
mode: "model1",
|
|
|
- textColor: '#000000',
|
|
|
- ops: {
|
|
|
- painter: [{
|
|
|
- mode: "model1",
|
|
|
- imgUrl: "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714638752Bc18af43.png"
|
|
|
- }, {
|
|
|
- mode: "model2",
|
|
|
- imgUrl: "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714646946B480ca84d.png"
|
|
|
- }, {
|
|
|
- mode: "model3",
|
|
|
- imgUrl: "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714656283B28c9d1df.png"
|
|
|
- }, {
|
|
|
- mode: "default"
|
|
|
- }],
|
|
|
- text: [{
|
|
|
- name: "灰色",
|
|
|
- color: '#999999',
|
|
|
- style: "color: #999999; background: #FFFFFF;border: 1px solid #DDDDDD;"
|
|
|
- }, {
|
|
|
- name: "黑色",
|
|
|
- color: '#000000',
|
|
|
- style: 'color: #000000; background: #FFFFFF; border: 1px solid #DDDDDD;'
|
|
|
- }, {
|
|
|
- name: "白色",
|
|
|
- color: '#FFFFFF',
|
|
|
- style: "color: #FFFFFF;background: #CCCCCC;"
|
|
|
- },]
|
|
|
- },
|
|
|
- loading: false
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- try {
|
|
|
- this.detail = this.$Http.data.detail;
|
|
|
- this.file = this.$Http.data.file;
|
|
|
- delete (this.$Http.data)
|
|
|
- } catch (error) {
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- this.deteleFiles()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- saveTheImage() {
|
|
|
- let that = this;
|
|
|
- this.loading = true;
|
|
|
- this.$refs.painter.canvasToTempFilePathSync({
|
|
|
- fileType: "jpg",
|
|
|
- // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
|
|
|
- pathType: 'url',
|
|
|
- quality: 1,
|
|
|
- success: (res) => {
|
|
|
- // 非H5 保存到相册
|
|
|
- // H5 提示用户长按图另存
|
|
|
- uni.saveImageToPhotosAlbum({
|
|
|
- filePath: res.tempFilePath,
|
|
|
- success: function (e) {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '图片已保存到系统相册',
|
|
|
- showCancel: false
|
|
|
- })
|
|
|
- that.loading = false;
|
|
|
- that.$Http.basic({
|
|
|
- "id": 20240319142702,
|
|
|
- "content": {
|
|
|
- sat_sharematerialid: that.detail.sat_sharematerialid, type: 1
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- console.log(type, '记录', res)
|
|
|
- })
|
|
|
+ imgUrl:
|
|
|
+ "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714638752Bc18af43.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ mode: "model2",
|
|
|
+ imgUrl:
|
|
|
+ "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714646946B480ca84d.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ mode: "model3",
|
|
|
+ imgUrl:
|
|
|
+ "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714656283B28c9d1df.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ mode: "default",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ text: [
|
|
|
+ {
|
|
|
+ name: "灰色",
|
|
|
+ color: "#999999",
|
|
|
+ style:
|
|
|
+ "color: #999999; background: #FFFFFF;border: 1px solid #DDDDDD;",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "黑色",
|
|
|
+ color: "#000000",
|
|
|
+ style:
|
|
|
+ "color: #000000; background: #FFFFFF; border: 1px solid #DDDDDD;",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "白色",
|
|
|
+ color: "#FFFFFF",
|
|
|
+ style: "color: #FFFFFF;background: #CCCCCC;",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ try {
|
|
|
+ this.detail = this.$Http.data.detail;
|
|
|
+ this.file = this.$Http.data.file;
|
|
|
+ delete this.$Http.data;
|
|
|
+ } catch (error) {}
|
|
|
|
|
|
- },
|
|
|
- fail: ({ errMsg }) => {
|
|
|
- if (errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '请授权添加到相册权限后再试！',
|
|
|
- showCancel: false,
|
|
|
- complete: (complete) => {
|
|
|
- uni.openSetting({
|
|
|
- success: res => {
|
|
|
- that.loading = false;
|
|
|
- if (res.authSetting['scope.writePhotosAlbum']) {
|
|
|
- this.saveTheImage()
|
|
|
- } else {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '未获取授权！已取消保存',
|
|
|
- showCancel: false,
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- })
|
|
|
- } else {
|
|
|
- that.loading = false;
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '已取消保存',
|
|
|
- showCancel: false,
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
+ try {
|
|
|
+ this.siteLogo = uni.getStorageSync("site").attinfos[0].url || "";
|
|
|
+ } catch (error) {}
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.deteleFiles();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ saveTheImage() {
|
|
|
+ let that = this;
|
|
|
+ this.loading = true;
|
|
|
+ this.$refs.painter.canvasToTempFilePathSync({
|
|
|
+ fileType: "jpg",
|
|
|
+ // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
|
|
|
+ pathType: "url",
|
|
|
+ quality: 1,
|
|
|
+ success: (res) => {
|
|
|
+ // 非H5 保存到相册
|
|
|
+ // H5 提示用户长按图另存
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ success: function (e) {
|
|
|
+ uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "图片已保存到系统相册",
|
|
|
+ showCancel: false,
|
|
|
+ });
|
|
|
+ that.loading = false;
|
|
|
+ that.$Http
|
|
|
+ .basic({
|
|
|
+ id: 20240319142702,
|
|
|
+ content: {
|
|
|
+ sat_sharematerialid: that.detail.sat_sharematerialid,
|
|
|
+ type: 1,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(type, "记录", res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: ({ errMsg }) => {
|
|
|
+ if (errMsg == "saveImageToPhotosAlbum:fail auth deny") {
|
|
|
+ uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "请授权添加到相册权限后再试！",
|
|
|
+ showCancel: false,
|
|
|
+ complete: (complete) => {
|
|
|
+ uni.openSetting({
|
|
|
+ success: (res) => {
|
|
|
+ that.loading = false;
|
|
|
+ if (res.authSetting["scope.writePhotosAlbum"]) {
|
|
|
+ this.saveTheImage();
|
|
|
+ } else {
|
|
|
+ uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "未获取授权！已取消保存",
|
|
|
+ showCancel: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
});
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- handleFileLink(attachmentids, ownertable = "temporary", ownerid = 1, data) {
|
|
|
- this.deteleFiles()
|
|
|
- this.$Http.basic({
|
|
|
- "classname": "system.attachment.Attachment",
|
|
|
- "method": "createFileLink",
|
|
|
- "content": {
|
|
|
- ownertable,
|
|
|
- ownerid,
|
|
|
- usetype: 'painter',
|
|
|
- attachmentids
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- console.log('绑定附件', res)
|
|
|
- if (this.cutoff(res.msg)) return;
|
|
|
- this.file = res.data[0];
|
|
|
- })
|
|
|
- },
|
|
|
- //删除附件
|
|
|
- deteleFiles() {
|
|
|
- if (this.file.ownertable == "temporary") this.$Http.basic({
|
|
|
- "classname": "system.attachment.Attachment",
|
|
|
- "method": "deleteFileLink",
|
|
|
- "content": {
|
|
|
- linksids: [this.file.linksid]
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- console.log("处理删除附件", res)
|
|
|
- if (this.cutoff(res.msg)) return;
|
|
|
- });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ that.loading = false;
|
|
|
+ uni.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "已取消保存",
|
|
|
+ showCancel: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
+ });
|
|
|
},
|
|
|
-}
|
|
|
+ handleFileLink(attachmentids, ownertable = "temporary", ownerid = 1, data) {
|
|
|
+ this.deteleFiles();
|
|
|
+ this.$Http
|
|
|
+ .basic({
|
|
|
+ classname: "system.attachment.Attachment",
|
|
|
+ method: "createFileLink",
|
|
|
+ content: {
|
|
|
+ ownertable,
|
|
|
+ ownerid,
|
|
|
+ usetype: "painter",
|
|
|
+ attachmentids,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("绑定附件", res);
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ this.file = res.data[0];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //删除附件
|
|
|
+ deteleFiles() {
|
|
|
+ if (this.file.ownertable == "temporary")
|
|
|
+ this.$Http
|
|
|
+ .basic({
|
|
|
+ classname: "system.attachment.Attachment",
|
|
|
+ method: "deleteFileLink",
|
|
|
+ content: {
|
|
|
+ linksids: [this.file.linksid],
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("处理删除附件", res);
|
|
|
+ if (this.cutoff(res.msg)) return;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.head {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 10px;
|
|
|
-
|
|
|
- .left {
|
|
|
- line-height: 20px;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 14px;
|
|
|
- color: #333333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px;
|
|
|
|
|
|
- .text {
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
+ .left {
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
|
|
|
- .right {
|
|
|
- color: #C30D23;
|
|
|
- font-size: 12px;
|
|
|
+ .text {
|
|
|
+ color: #666666;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
+ .right {
|
|
|
+ color: #c30d23;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.custom {
|
|
|
- width: 355px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 10px auto;
|
|
|
-
|
|
|
- .models {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .group {
|
|
|
- .title {
|
|
|
- line-height: 20px;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 14px;
|
|
|
- color: #333333;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
+ width: 355px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 10px auto;
|
|
|
|
|
|
- .options {
|
|
|
- display: flex;
|
|
|
+ .models {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .option {
|
|
|
- position: relative;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: #CCCCCC;
|
|
|
- border-radius: 5px;
|
|
|
- margin-right: 5px;
|
|
|
- overflow: hidden;
|
|
|
- box-sizing: border-box;
|
|
|
+ .group {
|
|
|
+ .title {
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .image,
|
|
|
- .text {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 12px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
+ .options {
|
|
|
+ display: flex;
|
|
|
|
|
|
- .current {
|
|
|
- position: absolute;
|
|
|
- height: 14px;
|
|
|
- width: 14px;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
+ .option {
|
|
|
+ position: relative;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: #cccccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- }
|
|
|
+ .image,
|
|
|
+ .text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
|
|
|
- .option:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ .current {
|
|
|
+ position: absolute;
|
|
|
+ height: 14px;
|
|
|
+ width: 14px;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .option:last-child {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .text-box {
|
|
|
- margin-top: 20px;
|
|
|
+ .text-box {
|
|
|
+ margin-top: 20px;
|
|
|
|
|
|
- .title {
|
|
|
- line-height: 20px;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 14px;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
|
|
|
- .input-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 335px;
|
|
|
- height: 50px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px solid #CCCCCC;
|
|
|
- margin-top: 10px;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .input-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 335px;
|
|
|
+ height: 50px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #cccccc;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .input {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
+ .input {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .but {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 333px;
|
|
|
- height: 45px;
|
|
|
- background: #C30D23;
|
|
|
- border-radius: 5px;
|
|
|
- margin-top: 20px;
|
|
|
+ .but {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 333px;
|
|
|
+ height: 45px;
|
|
|
+ background: #c30d23;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-top: 20px;
|
|
|
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 16px;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.tips {
|
|
|
- width: 355px;
|
|
|
- height: 34px;
|
|
|
- font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
- font-size: 12px;
|
|
|
- color: #666666;
|
|
|
- margin: 10px auto;
|
|
|
+ width: 355px;
|
|
|
+ height: 34px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ margin: 10px auto;
|
|
|
}
|
|
|
|
|
|
.painter-box {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
</style>
|
