goods.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <view class="content">
  3. <view class="info">该类商品需购满300乐豆才能下单哦!</view>
  4. <view class="goods-list" v-if="goodsList.length">
  5. <uni-coods v-for="item in goodsList" :key="item.id" :data="item"></uni-coods>
  6. </view>
  7. <!-- 购物车 -->
  8. <uni-cart-fix></uni-cart-fix>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. clsId: '',
  16. goodsList:[
  17. {
  18. id: 21312312321,
  19. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  20. src: '/static/goods.png',
  21. price: 50,
  22. status: 0
  23. },
  24. {
  25. id: 6465465465,
  26. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  27. src: '/static/goods.png',
  28. price: 50,
  29. status: 1
  30. },
  31. {
  32. id: 234324,
  33. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  34. src: '/static/goods.png',
  35. price: 50,
  36. status: 0
  37. },
  38. {
  39. id: 4453455,
  40. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  41. src: '/static/goods.png',
  42. price: 50,
  43. status: 0
  44. },
  45. {
  46. id: 22222,
  47. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  48. src: '/static/goods.png',
  49. price: 50,
  50. status: 0
  51. },
  52. {
  53. id: 345,
  54. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  55. src: '/static/goods.png',
  56. price: 50,
  57. status: 0
  58. },
  59. {
  60. id: 456456,
  61. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  62. src: '/static/goods.png',
  63. price: 50,
  64. status: 0
  65. }
  66. ]
  67. };
  68. },
  69. onLoad(opts) {
  70. this.clsId = opts.id
  71. }
  72. }
  73. </script>
  74. <style lang="scss">
  75. .content {
  76. .goods{
  77. padding: 20upx 0;
  78. }
  79. .goods-list{
  80. display: flex;
  81. flex-wrap: wrap;
  82. justify-content: space-between;
  83. padding: 20upx 20upx 0;
  84. background: #FFFFFF;
  85. >view{
  86. margin-bottom: 20upx;
  87. }
  88. }
  89. .info{
  90. text-align: center;
  91. color: #DD524D;
  92. margin-bottom: 20upx;
  93. }
  94. }
  95. </style>