main.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <el-dialog
  3. :visible.sync="dialogVisible"
  4. :close-on-click-modal="false"
  5. :close-on-press-escape="false"
  6. append-to-body
  7. width="805px">
  8. <div slot="title" class="goods-picker-title">商品选择器</div>
  9. <div class="goods-picker-body">
  10. <div class="goods-picker-search">
  11. <div class="item-search">
  12. <span>搜索范围</span>
  13. <!-- <en-category-picker-->
  14. <!-- @changed="(category) => { params.category_path = category ? category.category_path : '' }"-->
  15. <!-- :api="_categoryApi"-->
  16. <!-- placeholder="商品分类"-->
  17. <!-- clearable-->
  18. <!-- />-->
  19. <!--<en-shop-picker
  20. v-if="type === 'admin'"
  21. clearable
  22. @changed="(shop) => { params.seller_id = shop.shop_id || 0 }"
  23. />-->
  24. <el-input v-model="params.keyword" placeholder="请输入关键字" clearable class="inline-input"/>
  25. <el-button @click="() => { GET_GoodsList(true) }">搜索</el-button>
  26. </div>
  27. </div>
  28. <div class="goods-picker-content">
  29. <div class="list">
  30. <div
  31. v-for="(goods, index) in goodsList"
  32. :key="sku ? goods.sku_id : goods.id"
  33. :class="['goods-item', isSelected(goods) && 'selected']"
  34. >
  35. <span class="icon-selected"></span>
  36. <div class="goods-image">
  37. <img :src="goods.image">
  38. </div>
  39. <div class="goods-other">
  40. <div class="goods-name">{{ goods.name }}</div>
  41. <div class="goods-specs-name">{{ goods.sn }}</div>
  42. <div class="goods-price">{{ goods.price | unitPrice }}</div>
  43. </div>
  44. <div class="goods-mask">
  45. <!-- <a :href="buyerDomain + '/goods/' + goods.id" target="_blank" class="mask-view" title="查看详情"><i></i></a>-->
  46. <div class="mask-check" title="选择商品" @click="handleClickItem(goods, index)"><i></i></div>
  47. </div>
  48. </div>
  49. <el-button
  50. v-if="goodsList.length > 0"
  51. type="primary"
  52. size="small"
  53. :loading="loading"
  54. @click="handleLoadMore"
  55. class="load-more"
  56. >加载更多</el-button>
  57. </div>
  58. <div class="selected-list" :id="'goods-picker-selected-' + _uid">
  59. <transition-group name="slide-fade">
  60. <div
  61. v-for="(goods, index) in selectedList"
  62. v-if="goods"
  63. :key="sku ? goods.sku_id : goods.id"
  64. class="goods-item slide-fade-item selected"
  65. >
  66. <span class="icon-selected"></span>
  67. <div class="goods-image">
  68. <img :src="goods.image">
  69. </div>
  70. <div class="goods-other">
  71. <p class="goods-name">{{ goods.name }}</p>
  72. <div class="goods-specs-name">{{ goods.sn }}</div>
  73. <div class="goods-price">{{ goods.price | unitPrice }}</div>
  74. </div>
  75. <div class="goods-mask">
  76. <!-- <a :href="buyerDomain + '/goods/' + goods.id" target="_blank" class="mask-view" title="查看详情"><i></i></a>-->
  77. <div class="mask-check" title="取消选择商品" @click="handleRemoveItem(goods, index)"><i></i></div>
  78. </div>
  79. </div>
  80. </transition-group>
  81. </div>
  82. </div>
  83. </div>
  84. <div slot="footer" class="goods-picker-footer">
  85. <div class="upload-status-num">
  86. 最多可选个数:<span>{{ limit < 1 ? '无限制' : limit }}</span>
  87. 已选个数:<span>{{ selectedNum }}</span>
  88. 还可选个数:<span>{{ limit < 1 ? '无限制' : limit - selectedNum }}</span>
  89. </div>
  90. <span>
  91. <el-button @click="dialogVisible = false">取 消</el-button>
  92. <el-button type="primary" @click="handleConfirm">确 定</el-button>
  93. </span>
  94. </div>
  95. </el-dialog>
  96. </template>
  97. <script>
  98. import mixin from './mixin'
  99. export default {
  100. name: 'EnGoodsPicker',
  101. mixins: [mixin]
  102. }
  103. </script>
  104. <style lang="scss" type="text/scss" scoped>
  105. @import './styles';
  106. </style>
  107. <style type="text/scss" lang="scss">
  108. .params-ids-select-dropdown {
  109. display: none !important;
  110. }
  111. </style>