view.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <view>
  3. <!-- 顶部 -->
  4. <cu-custom bgColor="bg-blue" :isBack="true">
  5. <block slot="backText">{{title}}</block>
  6. <block slot="content"></block>
  7. <block slot="right">
  8. <view class=" flex justify-center">
  9. <button class="margin-top-ssm cu-btn round bg-blue text-blue">装饰</button>
  10. </view>
  11. </block>
  12. </cu-custom>
  13. <view class="padding content">
  14. <image mode="widthFix" :src="fileSrc"></image>
  15. </view>
  16. <view class=" topc text-xssl padding" @click="download()">
  17. <image src="/static/task/download.png" class="menuImageTask"></image>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. data() {
  24. return {
  25. fileSrc:"",
  26. title:""
  27. }
  28. },
  29. onLoad(e) {
  30. this.fileSrc=e.file;
  31. this.title =e.title;
  32. },
  33. methods: {
  34. download(){
  35. uni.showLoading({
  36. title: '下载中'
  37. });
  38. uni.saveImageToPhotosAlbum({
  39. filePath: this.fileSrc,
  40. success: function() {
  41. uni.hideLoading();
  42. uni.showToast({
  43. title: '已保存到相册',
  44. icon: 'none',
  45. duration: 2200
  46. });
  47. }
  48. });
  49. }
  50. }
  51. }
  52. </script>
  53. <style>
  54. .topc {
  55. position: fixed;
  56. right: 0;
  57. top: 85%;
  58. height: 50px;
  59. line-height: 50px;
  60. }
  61. .text-xssl {
  62. font-size: 40px;
  63. }
  64. </style>