goods.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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 :count="15"></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: 'https://cdn.uviewui.com/uview/example/fade.jpg',
  21. price: 50,
  22. status: 0
  23. },
  24. {
  25. id: 6465465465,
  26. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  27. src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
  28. price: 50,
  29. status: 1
  30. },
  31. {
  32. id: 234324,
  33. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  34. src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
  35. price: 50,
  36. status: 0
  37. },
  38. {
  39. id: 4453455,
  40. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  41. src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
  42. price: 50,
  43. status: 0
  44. },
  45. {
  46. id: 22222,
  47. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  48. src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
  49. price: 50,
  50. status: 0
  51. },
  52. {
  53. id: 345,
  54. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  55. src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
  56. price: 50,
  57. status: 0
  58. },
  59. {
  60. id: 456456,
  61. name: '啊撒旦解放拉萨酱豆腐爱丽丝反对萨拉地方就',
  62. src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
  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. padding: 20upx 0;
  81. display: flex;
  82. flex-wrap: wrap;
  83. justify-content: space-between;
  84. }
  85. .info{
  86. text-align: center;
  87. color: #DD524D;
  88. }
  89. }
  90. </style>