uni-coods.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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 @click="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. console.log('add')
  38. // 请求接口
  39. this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + 1
  40. }
  41. },
  42. }
  43. </script>
  44. <style lang="scss">
  45. .goods-item{
  46. background: #FFFFFF;
  47. box-shadow: 1px 1px 3px #eee;
  48. width: 48%;
  49. margin-bottom: 35upx;
  50. border-radius: 10upx;
  51. .goods-imgs{
  52. position: relative;
  53. .goods-staus{
  54. width: 120rpx;
  55. height: 120rpx;
  56. position: absolute;
  57. z-index: 10000;
  58. border-radius: 100%;
  59. background: rgba($color: #000000, $alpha: 0.5);
  60. text-align: center;
  61. line-height: 120rpx;
  62. left: 50%;
  63. top: 50%;
  64. margin-top: -60rpx;
  65. margin-left: -60rpx;
  66. color: #eee;
  67. }
  68. }
  69. .name{
  70. padding: 10upx 20upx 0;
  71. }
  72. .price{
  73. display: flex;
  74. align-items: center;
  75. justify-content: space-between;
  76. padding: 15upx 20upx;
  77. text{
  78. color: red;
  79. font-size: 36upx;
  80. margin-right: 6upx;
  81. }
  82. >view{
  83. &:first-child{
  84. font-size: 22upx;
  85. }
  86. }
  87. }
  88. }
  89. </style>