poster.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <template>
  2. <view>
  3. <view class="poster-container" v-if="poster.show">
  4. <l-painter
  5. v-if="poster.show"
  6. isRenderImage
  7. width="600rpx" height="940rpx"
  8. custom-style="position: fixed;z-index:999; left: 0rpx;right:0rpx;margin:0rpx auto;bottom:440rpx;background:#fff;border-radius:20rpx"
  9. :board="poster.base"
  10. @success="poster.path = $event"
  11. />
  12. </view>
  13. <view :class="{'poster-share':true, on:poster.show}">
  14. <view>分享到</view>
  15. <view class="poster-share-panel">
  16. <view @click="share">
  17. <button class="shareButton" open-type="share"><image src="/static/icon/wechat.svg" mode="aspectFit"/>
  18. <text>微信分享</text></button>
  19. </view>
  20. <view @click="save">
  21. <image src="/static/icon/wechat_moments.svg" mode="aspectFit"/>
  22. <text>保存相册</text>
  23. </view>
  24. </view>
  25. <view @click="cancel">取消分享</view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. import lPainter from '@/components/lime-painter/index.vue'
  31. export default {
  32. components: {lPainter},
  33. props: ["title", "name", "img", "qrcode"],
  34. data() {
  35. return {
  36. poster:{
  37. show:false,
  38. path: "",
  39. base: {
  40. width: '600rpx',
  41. height: '940rpx',
  42. background: "#fff",
  43. radius: "20rpx",
  44. views: [
  45. {
  46. type: 'text',
  47. text: '成都IHG大酒店',
  48. css: {
  49. width: "500rpx",
  50. height: "80rpx",
  51. left: "50rpx",
  52. top: '20rpx',
  53. fontSize: '32rpx',
  54. fontWeight: "bold",
  55. lineHeight: '80rpx',
  56. color:'#000',
  57. textAlign: 'center',
  58. }
  59. },
  60. {
  61. type: 'text',
  62. text: '正在参与',
  63. css: {
  64. width: "170rpx",
  65. height: "80rpx",
  66. left: "50rpx",
  67. top: '70rpx',
  68. fontSize: '26rpx',
  69. lineHeight: '80rpx',
  70. color:'grey',
  71. textAlign: 'right',
  72. }
  73. },
  74. {
  75. type: 'text',
  76. text: '“最受欢迎-IHG酒店”',
  77. css: {
  78. width: "330rpx",
  79. height: "80rpx",
  80. left: "220rpx",
  81. display: "flex",
  82. justifyContent: 'center',
  83. top: '70rpx',
  84. fontSize: '26rpx',
  85. lineHeight: '80rpx',
  86. color:'#EEA470',
  87. textAlign: 'left',
  88. }
  89. },
  90. {
  91. type: 'image',
  92. src: 'http://img.xjishu.com/img/zl/2018/6/30/1241359458913.gif',
  93. css: {
  94. left: '240rpx',
  95. top: '720rpx',
  96. width: '120rpx',
  97. height: '120rpx',
  98. borderRadius: '30px'
  99. }
  100. },
  101. {
  102. type: 'text',
  103. text: '长按识别小程序码给他投票',
  104. css: {
  105. width: "500rpx",
  106. height: "80rpx",
  107. left: "50rpx",
  108. top: '830rpx',
  109. fontSize: '26rpx',
  110. lineHeight: '80rpx',
  111. color:'grey',
  112. textAlign: 'center',
  113. }
  114. },
  115. {
  116. type: 'image',
  117. src: 'https://img1.baidu.com/it/u=3841234653,2748754224&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=500',
  118. css: {
  119. left: '30rpx',
  120. top: '150rpx',
  121. width: '540rpx',
  122. height: '540rpx',
  123. borderRadius: '20rpx'
  124. }
  125. }
  126. ]
  127. }
  128. },
  129. };
  130. },
  131. methods:{
  132. show({name, title, imgUrl, qrcodeUrl}){
  133. this.poster.base.views[0].text = name;
  134. this.poster.base.views[2].text = title;
  135. imgUrl && (this.poster.base.views[5].src = imgUrl);
  136. qrcodeUrl && (this.poster.base.views[3].src = qrcodeUrl);
  137. uni.pageScrollTo({
  138. scrollTop: 0,
  139. duration: 1
  140. });
  141. this.poster.show = true;
  142. },
  143. cancel(){
  144. this.poster.show = false;
  145. },
  146. save(){
  147. uni.saveImageToPhotosAlbum({
  148. filePath: this.poster.path,
  149. success(res) {
  150. uni.showToast({
  151. title: '已保存到相册',
  152. icon: 'success',
  153. duration: 2000
  154. })
  155. }
  156. })
  157. },
  158. share(){
  159. // wx.downloadFile({
  160. // url: this.poster.path, // 下载url
  161. // success (res) {
  162. // // 下载完成后转发
  163. // wx.shareFileMessage({
  164. // filePath: res.tempFilePath,
  165. // success() {
  166. // console.log('转发成功')
  167. // },
  168. // fail: console.error,
  169. // })
  170. // },
  171. // fail: console.error,
  172. // })
  173. }
  174. },
  175. }
  176. </script>
  177. <style lang="scss" scoped>
  178. .poster-container{
  179. width:100%;
  180. height:100%;
  181. position: fixed;
  182. top:0;
  183. left:0;
  184. z-index: 999;
  185. background-color: rgba(0, 0, 0, 0.4);
  186. }
  187. .poster-share{
  188. position: fixed;
  189. bottom:0;
  190. width: 100%;
  191. height: 380rpx;
  192. background-color: #fff;
  193. border-radius: 30rpx 30rpx 0px 0px;
  194. transform: translateY(500rpx);
  195. padding-top: 40rpx;
  196. transition: 0.3s all;
  197. z-index: 1000;
  198. color:rgba(0,0,0,0.5);
  199. display: flex;
  200. flex-direction: column;
  201. justify-content: space-between;
  202. &.on{
  203. transform: translateY(0rpx);
  204. }
  205. >view:first-child{
  206. text-align: center;
  207. color: #000;
  208. font-weight:bold;
  209. margin-bottom: 40rpx;
  210. }
  211. >view:nth-child(2){
  212. display: flex;
  213. justify-content: flex-start;
  214. align-items: center;
  215. margin-bottom: 40rpx;
  216. >view{
  217. text-align: center;
  218. margin-left: 40rpx;
  219. }
  220. image{
  221. width: 80rpx;
  222. height: 80rpx;
  223. }
  224. text{
  225. width: 100rpx;
  226. display: block;
  227. font-size: 24rpx;
  228. text-align: center;
  229. }
  230. }
  231. >view:last-child{
  232. height: 100rpx;
  233. line-height: 100rpx;
  234. text-align: center;
  235. border-top: 1px solid rgba(0,0,0,0.1);
  236. }
  237. .shareButton{
  238. background: transparent;
  239. border: 0px;
  240. line-height: inherit;
  241. color: inherit;
  242. &::after{
  243. border:0px;
  244. }
  245. }
  246. }
  247. </style>