uni-coods.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <view class="goods-item" @click="toDetail">
  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 ellipsis-two">{{data.name}}</view>
  8. <view class="price">
  9. <view><text>{{data.price}}</text>乐豆</view>
  10. <view @click.stop="addCart"><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. methods: {
  35. // 加入购物车
  36. addCart() {
  37. // 请求接口
  38. this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + 1
  39. },
  40. // 商品详情
  41. toDetail(){
  42. uni.navigateTo({
  43. url:"/pages/goods/goodsDetail?id="+this.data.id
  44. })
  45. }
  46. },
  47. }
  48. </script>
  49. <style lang="scss">
  50. .goods-item{
  51. background: #FFFFFF;
  52. box-shadow: 1px 1px 3px #eee;
  53. width: 48%;
  54. margin-bottom: 35upx;
  55. border-radius: 10upx;
  56. .goods-imgs{
  57. position: relative;
  58. .goods-staus{
  59. width: 120rpx;
  60. height: 120rpx;
  61. position: absolute;
  62. z-index: 10000;
  63. border-radius: 100%;
  64. background: rgba($color: #000000, $alpha: 0.5);
  65. text-align: center;
  66. line-height: 120rpx;
  67. left: 50%;
  68. top: 50%;
  69. margin-top: -60rpx;
  70. margin-left: -60rpx;
  71. color: #eee;
  72. }
  73. }
  74. .name{
  75. padding: 10upx 20upx 0;
  76. }
  77. .price{
  78. display: flex;
  79. align-items: center;
  80. justify-content: space-between;
  81. padding: 15upx 20upx;
  82. text{
  83. color: red;
  84. font-size: 36upx;
  85. margin-right: 6upx;
  86. }
  87. >view{
  88. &:first-child{
  89. font-size: 22upx;
  90. }
  91. }
  92. }
  93. }
  94. </style>