makePoster.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. <template>
  2. <view>
  3. <view class="head">
  4. <view class="left"
  5. >海报预览
  6. <text class="text"> (请拖动到下方编辑、保存海报) </text>
  7. </view>
  8. <My_upload @uploadCallback="handleFileLink">
  9. <view class="right"> 更换背景图 </view>
  10. </My_upload>
  11. </view>
  12. <view class="painter-box">
  13. <view>
  14. <l-painter ref="painter" css="position: relative;">
  15. <!-- 背景图片 -->
  16. <l-painter-image
  17. :src="file.url"
  18. css="width: 280px; height: 500px"
  19. object-fit="fill"
  20. />
  21. <!-- 模板1 底部背景图 -->
  22. <l-painter-image
  23. v-if="mode == 'model1'"
  24. src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714733820B3d50bdd4.png"
  25. css="width: 280px; height: 130px;position: absolute;bottom: 0;z-index: 1;"
  26. object-fit="fill"
  27. />
  28. <block v-if="mode == 'model1' || mode == 'model2'">
  29. <!-- 站点logo -->
  30. <l-painter-image
  31. :src="siteLogo"
  32. css="width: 60px; height:60px;position: absolute;bottom: 0px;left:10px;z-index: 2;"
  33. object-fit="cover"
  34. />
  35. <!-- 文字描述 -->
  36. <l-painter-text
  37. :text="painterText"
  38. :css="
  39. 'width: 190px; line-height:20px;position: absolute;bottom: 62px;left:10px;z-index: 2;font-size: 14px;color: #333333;line-clamp:2;' +
  40. 'color:' +
  41. textColor
  42. "
  43. />
  44. </block>
  45. <!-- 二维码 -->
  46. <l-painter-qrcode
  47. v-if="mode != 'default' && detail.isqrcode"
  48. :text="detail.qrcodecontent"
  49. css="width: 64px; height: 64px;position: absolute;bottom: 22px;right:10px;z-index: 2;"
  50. />
  51. </l-painter>
  52. </view>
  53. </view>
  54. <view class="custom">
  55. <view class="models">
  56. <view class="group">
  57. <view class="title">海报样式</view>
  58. <view class="options">
  59. <view
  60. class="option"
  61. v-for="option in ops.painter"
  62. hover-class="navigator-hover"
  63. :key="option.mode"
  64. @click="mode = option.mode"
  65. >
  66. <image v-if="option.imgUrl" class="image" :src="option.imgUrl" />
  67. <image
  68. class="current"
  69. v-if="option.mode == mode"
  70. src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712715614059B373541f3.png"
  71. />
  72. </view>
  73. </view>
  74. </view>
  75. <view class="group">
  76. <view class="title">文字色彩</view>
  77. <view class="options">
  78. <view
  79. class="option"
  80. v-for="option in ops.text"
  81. hover-class="navigator-hover"
  82. :key="option.name"
  83. @click="textColor = option.color"
  84. >
  85. <view class="text" :style="option.style">
  86. {{ option.name }}
  87. </view>
  88. <image
  89. class="current"
  90. v-if="option.color == textColor"
  91. src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712715614059B373541f3.png"
  92. />
  93. </view>
  94. </view>
  95. </view>
  96. </view>
  97. <view class="text-box">
  98. <view class="title"> 海报文案 </view>
  99. <view class="input-box">
  100. <input
  101. class="input"
  102. maxlength="16"
  103. type="text"
  104. v-model="painterText"
  105. />
  106. <icon
  107. v-if="painterText"
  108. class="icon"
  109. type="clear"
  110. size="3.733vw"
  111. @click="painterText = ''"
  112. />
  113. </view>
  114. </view>
  115. <view
  116. class="but"
  117. @click="loading ? '' : saveTheImage()"
  118. hover-class="navigator-hover"
  119. >
  120. <u-loading-icon v-if="loading" color="#fff" />
  121. <text v-else> 保存 </text>
  122. </view>
  123. </view>
  124. <view class="tips">
  125. *自定义海报区域可以选择海报样式、文字色彩等,文案部分最多可输入16个字,若留空,则不显示自定义文案。
  126. </view>
  127. <view style="height: 20px" />
  128. </view>
  129. </template>
  130. <script>
  131. import lPainter from "../../uni_modules/lime-painter/components/l-painter/l-painter.vue";
  132. import lPainterView from "../../uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue";
  133. import lPainterText from "../../uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue";
  134. import lPainterImage from "../../uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue";
  135. import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue";
  136. export default {
  137. components: {
  138. lPainter,
  139. lPainterView,
  140. lPainterText,
  141. lPainterImage,
  142. lPainterQrcode,
  143. },
  144. data() {
  145. return {
  146. detail: {},
  147. file: {},
  148. siteLogo: "",
  149. painterText: "自定义海报区域可以选择海报样式",
  150. mode: "model1",
  151. textColor: "#000000",
  152. ops: {
  153. painter: [
  154. {
  155. mode: "model1",
  156. imgUrl:
  157. "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714638752Bc18af43.png",
  158. },
  159. {
  160. mode: "model2",
  161. imgUrl:
  162. "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714646946B480ca84d.png",
  163. },
  164. {
  165. mode: "model3",
  166. imgUrl:
  167. "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404101712714656283B28c9d1df.png",
  168. },
  169. {
  170. mode: "default",
  171. },
  172. ],
  173. text: [
  174. {
  175. name: "灰色",
  176. color: "#999999",
  177. style:
  178. "color: #999999; background: #FFFFFF;border: 1px solid #DDDDDD;",
  179. },
  180. {
  181. name: "黑色",
  182. color: "#000000",
  183. style:
  184. "color: #000000; background: #FFFFFF; border: 1px solid #DDDDDD;",
  185. },
  186. {
  187. name: "白色",
  188. color: "#FFFFFF",
  189. style: "color: #FFFFFF;background: #CCCCCC;",
  190. },
  191. ],
  192. },
  193. loading: false,
  194. };
  195. },
  196. onLoad() {
  197. try {
  198. this.detail = this.$Http.data.detail;
  199. this.file = this.$Http.data.file;
  200. delete this.$Http.data;
  201. } catch (error) {}
  202. try {
  203. this.siteLogo = uni.getStorageSync("site").attinfos[0].url || "";
  204. } catch (error) {}
  205. },
  206. beforeDestroy() {
  207. this.deteleFiles();
  208. },
  209. methods: {
  210. saveTheImage() {
  211. let that = this;
  212. this.loading = true;
  213. this.$refs.painter.canvasToTempFilePathSync({
  214. fileType: "jpg",
  215. // 如果返回的是base64是无法使用 saveImageToPhotosAlbum,需要设置 pathType为url
  216. pathType: "url",
  217. quality: 1,
  218. success: (res) => {
  219. // 非H5 保存到相册
  220. // H5 提示用户长按图另存
  221. uni.saveImageToPhotosAlbum({
  222. filePath: res.tempFilePath,
  223. success: function (e) {
  224. uni.showModal({
  225. title: "提示",
  226. content: "图片已保存到系统相册",
  227. showCancel: false,
  228. });
  229. that.loading = false;
  230. that.$Http
  231. .basic({
  232. id: 20240319142702,
  233. content: {
  234. sat_sharematerialid: that.detail.sat_sharematerialid,
  235. type: 1,
  236. },
  237. })
  238. .then((res) => {
  239. console.log(type, "记录", res);
  240. });
  241. },
  242. fail: ({ errMsg }) => {
  243. if (errMsg == "saveImageToPhotosAlbum:fail auth deny") {
  244. uni.showModal({
  245. title: "提示",
  246. content: "请授权添加到相册权限后再试!",
  247. showCancel: false,
  248. complete: (complete) => {
  249. uni.openSetting({
  250. success: (res) => {
  251. that.loading = false;
  252. if (res.authSetting["scope.writePhotosAlbum"]) {
  253. this.saveTheImage();
  254. } else {
  255. uni.showModal({
  256. title: "提示",
  257. content: "未获取授权!已取消保存",
  258. showCancel: false,
  259. });
  260. }
  261. },
  262. });
  263. },
  264. });
  265. } else {
  266. that.loading = false;
  267. uni.showModal({
  268. title: "提示",
  269. content: "已取消保存",
  270. showCancel: false,
  271. });
  272. }
  273. },
  274. });
  275. },
  276. });
  277. },
  278. handleFileLink(attachmentids, ownertable = "temporary", ownerid = 1, data) {
  279. this.deteleFiles();
  280. this.$Http
  281. .basic({
  282. classname: "system.attachment.Attachment",
  283. method: "createFileLink",
  284. content: {
  285. ownertable,
  286. ownerid,
  287. usetype: "painter",
  288. attachmentids,
  289. },
  290. })
  291. .then((res) => {
  292. console.log("绑定附件", res);
  293. if (this.cutoff(res.msg)) return;
  294. this.file = res.data[0];
  295. });
  296. },
  297. //删除附件
  298. deteleFiles() {
  299. if (this.file.ownertable == "temporary")
  300. this.$Http
  301. .basic({
  302. classname: "system.attachment.Attachment",
  303. method: "deleteFileLink",
  304. content: {
  305. linksids: [this.file.linksid],
  306. },
  307. })
  308. .then((res) => {
  309. console.log("处理删除附件", res);
  310. if (this.cutoff(res.msg)) return;
  311. });
  312. },
  313. },
  314. };
  315. </script>
  316. <style lang="scss">
  317. .head {
  318. display: flex;
  319. align-items: center;
  320. justify-content: space-between;
  321. padding: 10px;
  322. .left {
  323. line-height: 20px;
  324. font-family: Source Han Sans SC, Source Han Sans SC;
  325. font-size: 14px;
  326. color: #333333;
  327. .text {
  328. color: #666666;
  329. }
  330. }
  331. .right {
  332. color: #c30d23;
  333. font-size: 12px;
  334. }
  335. }
  336. .custom {
  337. width: 355px;
  338. background: #ffffff;
  339. border-radius: 8px;
  340. padding: 10px;
  341. box-sizing: border-box;
  342. margin: 10px auto;
  343. .models {
  344. display: flex;
  345. justify-content: space-between;
  346. .group {
  347. .title {
  348. line-height: 20px;
  349. font-family: Source Han Sans SC, Source Han Sans SC;
  350. font-size: 14px;
  351. color: #333333;
  352. margin-bottom: 10px;
  353. }
  354. .options {
  355. display: flex;
  356. .option {
  357. position: relative;
  358. width: 40px;
  359. height: 40px;
  360. background: #cccccc;
  361. border-radius: 5px;
  362. margin-right: 5px;
  363. overflow: hidden;
  364. box-sizing: border-box;
  365. .image,
  366. .text {
  367. display: flex;
  368. align-items: center;
  369. justify-content: center;
  370. width: 100%;
  371. height: 100%;
  372. font-family: Source Han Sans SC, Source Han Sans SC;
  373. font-size: 12px;
  374. box-sizing: border-box;
  375. border-radius: 5px;
  376. }
  377. .current {
  378. position: absolute;
  379. height: 14px;
  380. width: 14px;
  381. top: 0;
  382. right: 0;
  383. }
  384. }
  385. .option:last-child {
  386. margin-right: 0;
  387. }
  388. }
  389. }
  390. }
  391. .text-box {
  392. margin-top: 20px;
  393. .title {
  394. line-height: 20px;
  395. font-family: Source Han Sans SC, Source Han Sans SC;
  396. font-size: 14px;
  397. color: #333333;
  398. }
  399. .input-box {
  400. display: flex;
  401. align-items: center;
  402. width: 335px;
  403. height: 50px;
  404. background: #ffffff;
  405. border-radius: 8px;
  406. border: 1px solid #cccccc;
  407. margin-top: 10px;
  408. padding: 10px;
  409. box-sizing: border-box;
  410. .input {
  411. flex: 1;
  412. }
  413. }
  414. }
  415. .but {
  416. display: flex;
  417. align-items: center;
  418. justify-content: center;
  419. width: 333px;
  420. height: 45px;
  421. background: #c30d23;
  422. border-radius: 5px;
  423. margin-top: 20px;
  424. font-family: PingFang SC, PingFang SC;
  425. font-weight: bold;
  426. font-size: 16px;
  427. color: #ffffff;
  428. }
  429. }
  430. .tips {
  431. width: 355px;
  432. height: 34px;
  433. font-family: Source Han Sans SC, Source Han Sans SC;
  434. font-size: 12px;
  435. color: #666666;
  436. margin: 10px auto;
  437. }
  438. .painter-box {
  439. display: flex;
  440. justify-content: center;
  441. }
  442. </style>