uni-coods.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <view class="goods-item">
  3. <view class="goods-imgs">
  4. <view v-if="data.status == 1" class="goods-staus">已售罄</view>
  5. <u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="data.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
  6. </view>
  7. <view class="name">{{data.name}}</view>
  8. <view class="price">
  9. <view><text>{{data.price}}</text>乐豆</view>
  10. <view><u-image width="48rpx" height="48rpx" src="/static/add-cart.png"></u-image></view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. props: {
  17. imgHeight: {
  18. type: Number,
  19. default: 250
  20. },
  21. data:{
  22. type: Object,
  23. default: function(){
  24. return {}
  25. }
  26. }
  27. },
  28. data() {
  29. return {
  30. loadingImg: '/static/loading.gif',
  31. errorImg: '/static/imgError.png'
  32. }
  33. }
  34. }
  35. </script>
  36. <style lang="scss">
  37. .goods-item{
  38. background: #FFFFFF;
  39. box-shadow: 1px 1px 3px #eee;
  40. width: 48%;
  41. margin-bottom: 35upx;
  42. border-radius: 10upx;
  43. .goods-imgs{
  44. position: relative;
  45. .goods-staus{
  46. width: 120rpx;
  47. height: 120rpx;
  48. position: absolute;
  49. z-index: 10000;
  50. border-radius: 100%;
  51. background: rgba($color: #000000, $alpha: 0.5);
  52. text-align: center;
  53. line-height: 120rpx;
  54. left: 50%;
  55. top: 50%;
  56. margin-top: -60rpx;
  57. margin-left: -60rpx;
  58. color: #eee;
  59. }
  60. }
  61. .name{
  62. padding: 10upx 20upx 0;
  63. }
  64. .price{
  65. display: flex;
  66. align-items: center;
  67. justify-content: space-between;
  68. padding: 15upx 20upx;
  69. text{
  70. color: red;
  71. font-size: 36upx;
  72. margin-right: 6upx;
  73. }
  74. >view{
  75. &:first-child{
  76. font-size: 22upx;
  77. }
  78. }
  79. }
  80. }
  81. </style>