promiseInfo.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <view>
  3. <view class="preview_icon">点击图片预览</view>
  4. <image
  5. class="image"
  6. :src="promise.url"
  7. mode="widthFix"
  8. @click="preview"
  9. >
  10. </image>
  11. </view>
  12. </template>
  13. <script>
  14. import { mapState } from "vuex"
  15. export default {
  16. name:"promise_info",
  17. computed:{
  18. ...mapState(["promise"])
  19. },
  20. methods:{
  21. preview(){
  22. let arr=[]
  23. arr.push(this.promise.url)
  24. uni.previewImage({
  25. urls:arr
  26. })
  27. }
  28. }
  29. }
  30. </script>
  31. <style lang="scss">
  32. page{
  33. width: calc(100% - 40rpx);
  34. min-height: 100%;
  35. background: $uni-bg-color-normal;
  36. padding: 20rpx;
  37. }
  38. .image{
  39. width: 100%;
  40. }
  41. .time{
  42. display: block;
  43. margin: 10px 0;
  44. font-size: 28rpx;
  45. color: #4D4D4D;
  46. }
  47. .preview_icon{
  48. display: flex;
  49. align-items: center;
  50. font-size: 24rpx;
  51. justify-content: center;
  52. margin-bottom: 10px;
  53. &:before{
  54. content: "";
  55. display: block;
  56. width: 40rpx;
  57. height: 40rpx;
  58. background-image: url("../../static/preview.png");
  59. background-size: 100% 100%;
  60. }
  61. }
  62. </style>