app-product-list.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <template>
  2. <view class="page-width product-list dir-top-nowrap">
  3. <view class="page-width row dir-left-nowrap main-between box-grow-1" v-for="(row, key) in goods_list" :key="key">
  4. <view @click="routeGo(item)"
  5. class="goods box-grow-0 dir-top-nowrap main-between"
  6. v-for="(item, index) in row"
  7. :key="index">
  8. <view class="image-name dir-top-nowrap main-left" >
  9. <view class="out-dialog" v-if="item.goods_stock == 0 && appSetting.is_show_stock == '1'">
  10. <image :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
  11. </view>
  12. <image class="image" :src="item.cover_pic" :lazy-load="true" mode="aspectFill"></image>
  13. <view class="name t-omit-two" v-if="is_name && isShowGoodsName == 1">{{item.name}}</view>
  14. </view>
  15. <view class="content dir-top-nowrap main-right" :style="{height: is_name ? 'calc(100% - #{426rpx})': 'height: calc(100% - #{384rpx});'}" >
  16. <!-- 会员价 -->
  17. <view class="member-price" v-if="item.is_level == 1 && item.is_negotiable != 1">
  18. <app-member-price
  19. :price="item.level_price"
  20. ></app-member-price>
  21. </view>
  22. <!-- 超级会员卡 -->
  23. <view class="app-sup-vip" v-if="item.vip_card_appoint.discount > 0">
  24. <app-sup-vip
  25. :discount="item.vip_card_appoint.discount"
  26. :is_vip_card_user="item.vip_card_appoint.is_vip_card_user"
  27. ></app-sup-vip>
  28. </view>
  29. <!-- 价格 销量 -->
  30. <view
  31. class="price-total page-width dir-left-nowrap main-between cross-center"
  32. >
  33. <text :class="[`${theme}-color`, 'price']">
  34. {{item.price_content}}
  35. </text>
  36. <template v-if="sign === 'gift'">
  37. <text v-if="item.is_negotiable != 1" class="gray sales">{{item.sales}}</text>
  38. </template>
  39. <template v-else>
  40. <text v-if="item.is_negotiable != 1 && isShowSalesNum == 1" class="gray sales">{{item.sales}}</text>
  41. <div v-if="item.is_negotiable != 1 && isShowCart == 1 && item.goods_stock > 0" class="box-grow-1 cart-box">
  42. <!-- #ifdef MP-ALIPAY -->
  43. <img style="-webkit-background-origin: content-box;background-origin: content-box;"
  44. @click.stop="specification(item)"
  45. class="goods-cart"
  46. src="/static/image/icon/goods-cart.png">
  47. <!-- #endif -->
  48. <!-- #ifndef MP-ALIPAY -->
  49. <img @click.stop="specification(item)"
  50. class="goods-cart"
  51. src="/static/image/icon/goods-cart.png">
  52. <!-- #endif -->
  53. </div>
  54. </template>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <app-attr ref="attr" :goods="item" :select-attr="selectAttr" :attr-group-list="attrGroup" :show="show"
  60. @attrtap="onAttr"></app-attr>
  61. </view>
  62. </template>
  63. <script>
  64. import { mapState, mapGetters } from "vuex";
  65. import appMemberPrice from '../../../components/page-component/app-member-mark/app-member-price.vue';
  66. import appSupVip from '../../../components/page-component/app-sup-vip/app-sup-vip.vue';
  67. import appAttr from '../../../components/page-component/app-attr/app-attr.vue';
  68. export default {
  69. name: 'product-list',
  70. props: {
  71. goods_list: Array,
  72. theme: String,
  73. is_name: {
  74. type: Boolean,
  75. default: true,
  76. },
  77. sign: String,
  78. },
  79. computed: {
  80. ...mapState({
  81. appImg: state => state.mallConfig.__wxapp_img.mall,
  82. isShowCart: state => state.mallConfig.mall.setting.is_show_cart,
  83. isShowGoodsName: state => state.mallConfig.mall.setting.is_show_goods_name,
  84. isShowSalesNum: state => state.mallConfig.mall.setting.is_show_sales_num,
  85. appSetting: state => state.mallConfig.mall.setting,
  86. }),
  87. },
  88. methods: {
  89. routeGo(data) {
  90. this.$emit('routeGo', data);
  91. },
  92. specification(goods) {
  93. this.attrGroup = goods.attr_groups;
  94. this.item = goods;
  95. this.show = Math.random();
  96. },
  97. onAttr(data) {
  98. this.selectAttr = data;
  99. },
  100. },
  101. data() {
  102. return {
  103. show: 0,
  104. item: null,
  105. selectAttr: {},
  106. attrGroup: [],
  107. }
  108. },
  109. components: {
  110. 'app-member-price': appMemberPrice,
  111. 'app-sup-vip': appSupVip,
  112. 'app-attr': appAttr,
  113. },
  114. }
  115. </script>
  116. <style scoped lang="scss">
  117. .product-list {
  118. padding: #{0 20upx};
  119. position: relative;
  120. .row {
  121. margin-top: #{15upx};
  122. .goods {
  123. background-color: #ffffff;
  124. width: #{344upx};
  125. border-radius: #{15upx};
  126. }
  127. }
  128. }
  129. /*图片名字*/
  130. .image-name {
  131. width: 100%;
  132. border-top-left-radius: #{15upx};
  133. border-top-right-radius: #{15upx};
  134. position: relative;
  135. .out-dialog {
  136. border-top-left-radius: #{15upx};
  137. border-top-right-radius: #{15upx};
  138. width: #{344upx};
  139. height: #{344upx};
  140. position: absolute;
  141. top: 0;
  142. z-index: 10;
  143. left: 0;
  144. background-color: rgba(0,0,0,.5);
  145. image {
  146. width: #{344upx};
  147. height: #{344upx};
  148. }
  149. }
  150. .image {
  151. width: 100%;
  152. height: #{344upx};
  153. border-top-left-radius: #{15upx};
  154. border-top-right-radius: #{15upx};
  155. }
  156. .name {
  157. font-size: #{26upx};
  158. color: #353535;
  159. padding: #{0 24upx};
  160. margin-top: #{20upx};
  161. line-height: #{31upx};
  162. height: #{62upx};
  163. }
  164. }
  165. .content-name {
  166. height: calc(100% - #{426upx});
  167. }
  168. .content-no {
  169. height: calc(100% - #{384upx});
  170. }
  171. /*复杂内容*/
  172. .content {
  173. padding: #{0 24upx};
  174. .price-total {
  175. margin: #{16upx 0 30upx 0};
  176. .sales {
  177. font-size: #{20rpx};
  178. margin-left:#{12rpx};
  179. }
  180. .price {
  181. font-size: #{28rpx};
  182. }
  183. }
  184. /*会员价组件*/
  185. .member-price {
  186. margin-top: #{12upx};
  187. }
  188. /*超级会员卡组件*/
  189. .app-sup-vip {
  190. margin-top: #{9upx};
  191. }
  192. }
  193. /*默认文字颜色*/
  194. .default-color {
  195. color: #ff4544;
  196. }
  197. .cart-box {
  198. position: relative;
  199. }
  200. .goods-cart {
  201. width: #{92rpx};
  202. height: #{92rpx};
  203. position: absolute;
  204. padding: #{32rpx};
  205. right: #{-24rpx};
  206. top: #{-50rpx};
  207. }
  208. </style>