index.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <view class="" @click.stop="openGoodsInfo(GoodsInfo)">
  3. <!-- mode="aspectFit" -->
  4. <image ref="imgRef" :src="GoodsInfo.image" :style="{ height: imgHeight + 'px' }" @load="onImgLoad"
  5. @error="onErrorC"></image>
  6. <view class="" :style="$getStyle(styles.goodsTitle)">
  7. {{GoodsInfo.title}}
  8. </view>
  9. <view class="goods-price" :style="$getStyle(styles.goodsPrice)">
  10. <view class="" :style="$getStyle(styles.price)">
  11. <text>¥</text>
  12. <text>{{GoodsInfo.price}}</text>
  13. </view>
  14. <view class="original-price" :style="$getStyle(styles.originalPrice)">
  15. <text>¥</text>
  16. <text>{{GoodsInfo.originalPrice}}</text>
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. name: 'Goods',
  24. props: {
  25. GoodsInfo: {
  26. type: Object,
  27. default: {
  28. image: ''
  29. }
  30. },
  31. // dataVal: {
  32. // type: Object | String,
  33. // default: null
  34. // },
  35. // attrs: {
  36. // type: Object | String,
  37. // default: null
  38. // },
  39. styles: {
  40. type: Object | String,
  41. default: null
  42. },
  43. },
  44. data() {
  45. return {
  46. imgHeight: 100,
  47. }
  48. },
  49. methods: {
  50. onImgLoad(e) {
  51. // 当图片加载完成后,获取图片的原始宽度和高度,并根据宽度计算出高度
  52. const {
  53. width,
  54. height
  55. } = e.mp.detail;
  56. const imgWidth = this.$refs.imgRef.$el.offsetWidth
  57. // console.log('onImgLoad = ', width,
  58. // height , this.$refs.imgRef.$el.offsetWidth)
  59. // this.imgHeight = height
  60. this.imgHeight = (height / width) * imgWidth; // 高度 = 原始高度 / 原始宽度 * imgWidth
  61. },
  62. onErrorC(e) {
  63. console.log('onErrorC = ', e)
  64. this.imgHeight = '100'
  65. },
  66. openGoodsInfo(GoodsInfo){
  67. console.log('GoodsInfo = ' , GoodsInfo)
  68. }
  69. }
  70. }
  71. </script>
  72. <style lang="scss" scoped>
  73. image {
  74. width: 100%;
  75. height: auto;
  76. }
  77. .goods-price{
  78. display: flex;
  79. align-items: flex-end;
  80. .original-price{
  81. text-decoration: line-through;
  82. padding-left: 6rpx;
  83. }
  84. }
  85. </style>