commodity.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <template>
  2. <view class="service">
  3. <view class="recommend">
  4. <view
  5. class="recommend-item"
  6. @click="onrecommend(index, item.value, item.id)"
  7. :class="{ red: activeIndex == index }"
  8. v-for="(item, index) in choice"
  9. :key="index"
  10. >
  11. {{ item.name }}
  12. </view>
  13. <!-- <view
  14. class="recommend-item"
  15. :class="{ red: activeIndex == index + 3 }"
  16. v-for="(v, index) in cate"
  17. :key="index + 3"
  18. @click="onrecommend((index + 3), v ,'')"
  19. >
  20. {{ v.name + v.id }}
  21. </view> -->
  22. </view>
  23. <view class="content" v-if="good && good.length > 0">
  24. <view class="content-item" v-for="item in good" :key="item.id" @click="
  25. goProductDetails(item.id)
  26. ">
  27. <image :src="item.cover" mode="" class="neironga2"></image>
  28. <view class="name u-text2"> {{ item.title }} </view>
  29. <view class="number">
  30. <view class="large">
  31. <rich-text
  32. :nodes="$mUtil.priceBigSmall(item.sale_price||item.min_sale_price)"
  33. ></rich-text>
  34. </view>
  35. <view class="small">¥{{ item.market_price||item.min_market_price }}</view>
  36. </view>
  37. <view class="sell"> 已售{{ item.result_sale_num }}件 </view>
  38. </view>
  39. </view>
  40. <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
  41. </view>
  42. </template>
  43. <script>
  44. export default {
  45. data() {
  46. return {
  47. choice: [
  48. {
  49. id: 1,
  50. name: "推荐",
  51. value: "recommend",
  52. },
  53. {
  54. id: 2,
  55. name: "热销",
  56. value: "hot",
  57. },
  58. {
  59. id: 3,
  60. name: "新品",
  61. value: "new",
  62. },
  63. ],
  64. activeIndex: -1,
  65. isConcat: false // 是否合并数组
  66. };
  67. },
  68. props: {
  69. cate: {
  70. type: Array,
  71. default: [],
  72. },
  73. good: {
  74. type: Array,
  75. default: [],
  76. },
  77. isActive:{
  78. type:Number,
  79. default:0
  80. }
  81. },
  82. watch: {
  83. cate(e){
  84. this.activeIndex =-1
  85. if(!this.isConcat) {
  86. this.isConcat = true
  87. this.choice = this.choice.concat(e)
  88. }
  89. },
  90. },
  91. onLoad() {
  92. this.activeIndex = this.initNum;
  93. },
  94. onReady() {
  95. },
  96. methods: {
  97. goProductDetails(id){
  98. uni.navigateTo({
  99. url: this.isActive==0?'/pages/product/goods/serviceGood?id='+id:'/pages/product/goods/goods?id='+id,
  100. });
  101. },
  102. onrecommend(index, type, groupId) {
  103. this.activeIndex = index;
  104. this.$emit("typeChange", { type: type, groupId: groupId });
  105. },
  106. },
  107. };
  108. </script>
  109. <style scoped lang="scss">
  110. .content {
  111. display: flex;
  112. flex-wrap: wrap;
  113. justify-content: space-between;
  114. padding: 30rpx;
  115. background-color: #f5f5f5;
  116. .content-item {
  117. background-color: #ffffff;
  118. border-radius: 18rpx;
  119. overflow: hidden;
  120. margin-bottom: 30rpx;
  121. image {
  122. width: 336rpx;
  123. height: 336rpx;
  124. // background-color: red;
  125. }
  126. .number {
  127. display: flex;
  128. align-items: flex-end;
  129. padding: 0 30rpx;
  130. .large {
  131. color: #ed3d07;
  132. font-size: 36rpx;
  133. font-weight: 500;
  134. text {
  135. font-size: 36rpx;
  136. font-weight: Bold;
  137. }
  138. }
  139. .small {
  140. font-size: 22rpx;
  141. color: #999999;
  142. font-weight: 400;
  143. text-decoration: line-through;
  144. margin-left: 16rpx;
  145. }
  146. }
  147. .sell {
  148. padding: 0 30rpx;
  149. font-size: 22rpx;
  150. font-weight: 400;
  151. color: #999999;
  152. margin-bottom: 36rpx;
  153. margin-top: 8rpx;
  154. }
  155. .name {
  156. width: 276rpx;
  157. height: 80rpx;
  158. line-height: 40rpx;
  159. padding: 0 30rpx;
  160. }
  161. }
  162. }
  163. .recommend {
  164. display: flex;
  165. background-color: #f5f5f5;
  166. overflow: scroll;
  167. white-space: nowrap;
  168. border-radius: 40rpx 40rpx 0 0;
  169. .recommend-item {
  170. font-weight: 500;
  171. padding: 15rpx 30rpx;
  172. background-color: #ffffff;
  173. margin: 40rpx 0 30rpx 30rpx;
  174. border-radius: 34rpx;
  175. }
  176. .red {
  177. background: #FA6138;
  178. color: #d5c49b;
  179. }
  180. }
  181. </style>