index.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <!-- 分类二商品列表 -->
  3. <view class="goodsList">
  4. <view class="item" v-for="(item,index) in tempArr" :key='index' @click="goDetail(item)">
  5. <view class="pictrue">
  6. <span class="pictrue_log pictrue_log_class" v-if="item.activity && item.activity.type === '1'">秒杀</span>
  7. <span class="pictrue_log pictrue_log_class" v-if="item.activity && item.activity.type === '2'">砍价</span>
  8. <span class="pictrue_log pictrue_log_class" v-if="item.activity && item.activity.type === '3'">拼团</span>
  9. <image :src="item.recommend_image" mode="aspectFill" v-if="item.recommend_image"></image>
  10. <image :src="item.image" mode="aspectFill" v-else></image>
  11. </view>
  12. <view class="text line2">{{item.store_name}}</view>
  13. <!-- #ifdef H5 || APP-PLUS -->
  14. <slot name="center" :item="item"></slot>
  15. <!-- #endif -->
  16. <!-- #ifdef MP -->
  17. <slot name="center{{index}}"></slot>
  18. <!-- #endif -->
  19. <view class="bottom acea-row row-between-wrapper">
  20. <view class="sales acea-row row-middle">
  21. <view class="money font-color"><text></text>{{item.price}}</view>
  22. <view>已售 {{item.sales}}</view>
  23. </view>
  24. <view v-if="item.stock>0">
  25. <view class="bnt acea-row row-center-wrapper" v-if="(item.activity && (item.activity.type === '1' || item.activity.type === '2' || item.activity.type === '3')) || item.product_type!=0 || item.custom_form.length">立即购买</view>
  26. <view v-else>
  27. <!-- 多规格 -->
  28. <!-- <view class="bnt acea-row row-center-wrapper" @click.stop="goCartDuo(item)" v-if="item.spec_type">
  29. 加入购物车
  30. <text class="num" v-if="isLogin && item.cart_num">{{item.cart_num}}</text>
  31. </view> -->
  32. <uni-badge class="uni-badge-left-margin" :text="item.cart_num" absolute="rightTop" v-if="item.spec_type">
  33. <!-- 多规格 -->
  34. <view class="bnt acea-row row-center-wrapper" @click.stop="goCartDuo(item)">
  35. 选规格
  36. </view>
  37. </uni-badge>
  38. <!-- 单规格 -->
  39. <view v-if="!item.spec_type && !item.cart_num">
  40. <view v-if="item.cart_button">
  41. <view class="bnt acea-row row-center-wrapper end" v-if="item.is_presale_product && (item.presale_pay_status == 1 || item.presale_pay_status == 3)">>
  42. {{item.presale_pay_status === 1?'未开始':'已结束'}}
  43. </view>
  44. <view v-else class="bnt acea-row row-center-wrapper" @click.stop="goCartDan(item,index)">加入购物车</view>
  45. </view>
  46. <view v-else class="bnt acea-row row-center-wrapper">立即购买</view>
  47. </view>
  48. <view class="cart acea-row row-middle" v-if="!item.spec_type && item.cart_num">
  49. <view class="pictrue iconfont icon-jianhao" @click.stop="CartNumDes(index,item)"></view>
  50. <view class="num">{{item.cart_num}}</view>
  51. <view class="pictrue iconfont icon-jiahao" @click.stop="CartNumAdd(index,item)"></view>
  52. </view>
  53. </view>
  54. </view>
  55. <view class="bnt end acea-row row-center-wrapper" v-else>已售罄</view>
  56. </view>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. export default {
  62. name: 'd_goodList',
  63. props: {
  64. dataConfig: {
  65. type: Object,
  66. default: () => {}
  67. },
  68. tempArr:{
  69. type: Array,
  70. default: () => []
  71. },
  72. isLogin:{
  73. type: Boolean,
  74. default:false
  75. }
  76. },
  77. data() {
  78. return {
  79. };
  80. },
  81. created() {},
  82. mounted() {},
  83. methods: {
  84. goDetail(item){
  85. this.$emit('detail',item);
  86. },
  87. goCartDuo(item){
  88. this.$emit('gocartduo',item);
  89. },
  90. goCartDan(item,index){
  91. this.$emit('gocartdan',item,index);
  92. },
  93. CartNumDes(index,item){
  94. this.$emit('ChangeCartNumDan', false,index,item);
  95. },
  96. CartNumAdd(index,item){
  97. if(item.is_limit && item.cart_num>=item.limit_num){
  98. this.$util.Tips({
  99. title: "购买最多不能超过"+item.limit_num
  100. });
  101. }else{
  102. this.$emit('ChangeCartNumDan', true,index,item);
  103. }
  104. }
  105. }
  106. };
  107. </script>
  108. <style lang="scss">
  109. .goodsList{
  110. padding: 0 30rpx;
  111. .item{
  112. width: 100%;
  113. box-sizing: border-box;
  114. margin-bottom: 63rpx;
  115. .pictrue{
  116. width: 100%;
  117. height: 290rpx;
  118. border-radius: 16rpx;
  119. position: relative;
  120. image{
  121. width: 100%;
  122. height: 100%;
  123. border-radius: 16rpx;
  124. }
  125. }
  126. .text{
  127. font-size:30rpx;
  128. font-family:PingFang SC;
  129. font-weight:bold;
  130. color: #282828;
  131. margin: 20rpx 0;
  132. }
  133. .bottom{
  134. .sales{
  135. font-size: 22rpx;
  136. color: #8E8E8E;
  137. .money{
  138. font-size: 42rpx;
  139. font-weight: bold;
  140. margin-right: 16rpx;
  141. text{
  142. font-size: 28rpx;
  143. }
  144. }
  145. }
  146. .cart{
  147. height: 56rpx;
  148. .pictrue{
  149. color: var(--view-theme);
  150. font-size:46rpx;
  151. width: 50rpx;
  152. height: 50rpx;
  153. text-align: center;
  154. line-height: 50rpx;
  155. }
  156. .num{
  157. font-size: 30rpx;
  158. color: #282828;
  159. font-weight: bold;
  160. width: 80rpx;
  161. text-align: center;
  162. }
  163. }
  164. .bnt{
  165. padding: 0 30rpx;
  166. height: 55rpx;
  167. background:var(--view-theme);
  168. border-radius:42rpx;
  169. font-size: 26rpx;
  170. color: #fff;
  171. position: relative;
  172. &.end{
  173. background:rgba(203,203,203,1);
  174. }
  175. .num{
  176. min-width: 14rpx;
  177. background-color: #fff;
  178. color: var(--view-theme);
  179. border-radius: 15px;
  180. position: absolute;
  181. right: -14rpx;
  182. top: -15rpx;
  183. font-size: 20rpx;
  184. padding: 0 10rpx;
  185. border: 1px solid var(--view-theme);
  186. }
  187. }
  188. }
  189. }
  190. }
  191. </style>