certificate.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <view class="container clearfix">
  3. <image :src="imagePath" :class="imgClass" @click="previewImg" mode=""></image>
  4. </view>
  5. </template>
  6. <script>
  7. export default{
  8. data() {
  9. return{
  10. staticUrl: this.$Static,
  11. imagePath:'',
  12. imgClass:'',
  13. imageList:[],
  14. }
  15. },
  16. onLoad(option){
  17. this.imagePath = `${this.staticUrl}certificates/certificates-${option.id}.png`
  18. this.imgClass = `image-${option.id}`
  19. this.imageList.push(this.imagePath)
  20. },
  21. methods:{
  22. previewImg () {//顶部商品图片预览
  23. uni.previewImage({
  24. current: 0, //图片索引
  25. urls: this.imageList, //必须是http图片,本地图片无效
  26. longPressActions:''
  27. })
  28. }
  29. }
  30. }
  31. </script>
  32. <style lang="scss">
  33. page{
  34. background-color: #FFFFFF;
  35. }
  36. .container{
  37. width: 100%;
  38. height: auto;
  39. box-sizing: border-box;
  40. padding: 0 24rpx;
  41. .image-1{
  42. width: 100%;
  43. height: 480rpx;
  44. }
  45. .image-2{
  46. width: 100%;
  47. height: 940rpx;
  48. }
  49. .image-3{
  50. width: 100%;
  51. height: 4294rpx;
  52. }
  53. }
  54. </style>