productBrand.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <u-popup v-model="isShow" class="brand-picker" @close="isShow=false" mode="bottom">
  3. <view class="brand-header flex justify_between align_center">
  4. <text class="brand-picker-btn" @click="onClean">清空</text>
  5. <text>产品品牌</text>
  6. <text class="brand-picker-btn color-blue" @click="isShow=false">
  7. <u-icon name="close"></u-icon>
  8. </text>
  9. </view>
  10. <view class="search-box">
  11. <u-tabs :list="tablist" :is-scroll="false" bar-width="200" bar-height="3" v-model="current" @change="changeTab"></u-tabs>
  12. <u-gap height="10" bg-color="#fff"></u-gap>
  13. <u-search
  14. placeholder="请输入品牌名称搜索"
  15. v-model="queryWord"
  16. height="60"
  17. :show-action="isGobleSearch||queryWord!=''"
  18. @focus="isGobleSearch=true"
  19. @blur="isGobleSearch=false"
  20. @custom="searchBrand"
  21. @search="searchBrand"
  22. @clear="clearSearch"
  23. :action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': $config('primaryColor'), 'border-radius': '6upx', 'padding': '12upx 0'}">
  24. </u-search>
  25. </view>
  26. <scroll-view class="picker-content" scroll-y>
  27. <view class="picker-main">
  28. <view class="picker-main-item" v-for="(item, index) in listData" :key="item.brandSn" @click="chooseItem(index)">
  29. <view class="item-name" :style="{color:item.brandSn==brandSn?$config('primaryColor'):''}">{{item.brandName}}</view>
  30. <u-icon v-if="item.brandSn==brandSn" class="item-icon" name="checkmark-circle-fill" :color="$config('primaryColor')" size="32"></u-icon>
  31. </view>
  32. <view v-if="listData && listData.length == 0 && status!='loading'">
  33. <u-empty text="没有找到品牌" mode="list" :img-width="150" :margin-top="-60"></u-empty>
  34. </view>
  35. <view style="padding-bottom: 20upx;">
  36. <u-loadmore v-if="totalNum>listData.length || status=='loading'" :status="status" />
  37. </view>
  38. </view>
  39. </scroll-view>
  40. </u-popup>
  41. </template>
  42. <script>
  43. import { dealerProductBrandQuery } from '@/api/dealerProductBrand'
  44. export default {
  45. props: {
  46. openModal: { // 弹框显示状态
  47. type: Boolean,
  48. default: false
  49. },
  50. itemSn: {
  51. type: String,
  52. default: ''
  53. }
  54. },
  55. data() {
  56. return {
  57. isShow: this.openModal, // 是否打开弹框
  58. listData: [],
  59. queryWord: '',
  60. isGobleSearch: false,
  61. brandSn: this.itemSn || null,
  62. status: 'loadmore',
  63. totalNum: 0,
  64. tablist:[
  65. {
  66. name: '箭冠品牌'
  67. },
  68. {
  69. name: '自建品牌'
  70. },
  71. ],
  72. current: 0
  73. }
  74. },
  75. mounted() {
  76. this.clearSearch()
  77. },
  78. methods: {
  79. // 搜索品牌
  80. searchBrand(){
  81. this.brandSn = null
  82. this.getBrandList()
  83. },
  84. clearSearch(){
  85. this.queryWord = ''
  86. this.listData = []
  87. this.getBrandList()
  88. },
  89. changeTab(index){
  90. this.current = index
  91. this.getBrandList()
  92. },
  93. getBrandList(){
  94. this.status = "loading"
  95. dealerProductBrandQuery({ brandName: this.queryWord, sysFlag: this.current==1 ? 0 : 1 }).then(res => {
  96. console.log('品牌')
  97. if(res.status == 200 && res.data){
  98. this.listData = res.data
  99. this.totalNum = res.data.count || 0
  100. }else{
  101. this.listData = []
  102. this.totalNum = 0
  103. }
  104. this.status = "loadmore"
  105. })
  106. },
  107. // 选择
  108. chooseItem(ind){
  109. this.brandSn = this.listData[ind].brandSn
  110. this.$emit('choose', this.listData[ind])
  111. this.isShow = false
  112. },
  113. // 清空
  114. onClean(){
  115. this.queryWord = ''
  116. this.brandSn = null
  117. this.$emit('clean')
  118. this.isShow = false
  119. this.getBrandList()
  120. }
  121. },
  122. watch: {
  123. // 父页面传过来的弹框状态
  124. openModal (newValue, oldValue) {
  125. this.isShow = newValue
  126. },
  127. // 重定义的弹框状态
  128. isShow (newValue, oldValue) {
  129. if (!newValue) {
  130. this.$emit('close')
  131. }
  132. }
  133. }
  134. }
  135. </script>
  136. <style lang="scss" scoped>
  137. .brand-picker{
  138. .brand-header{
  139. padding: 0 30upx;
  140. position: relative;
  141. .brand-picker-btn{
  142. color: rgb(96, 98, 102);
  143. margin: 10upx;
  144. }
  145. .color-blue{
  146. display: inline-block;
  147. padding: 10upx 20upx;
  148. margin: 10upx 0;
  149. }
  150. }
  151. .brand-header:after{
  152. content: "";
  153. position: absolute;
  154. border-bottom: 1px solid #eaeef1;
  155. -webkit-transform: scaleY(.5);
  156. transform: scaleY(.5);
  157. bottom: 0;
  158. right: 0;
  159. left: 0;
  160. }
  161. .search-box{
  162. padding: 10upx 20upx;
  163. }
  164. .picker-content{
  165. height: 50vh;
  166. padding: 6upx 0 20upx;
  167. position: relative;
  168. .picker-main{
  169. width: 100%;
  170. display: flex;
  171. flex-wrap: wrap;
  172. .picker-main-item{
  173. position: relative;
  174. padding: 0 2rem 0 1rem;
  175. width: 50%;
  176. .item-name{
  177. padding: 14upx 0;
  178. }
  179. .item-icon{
  180. position: absolute;
  181. right: 20upx;
  182. top: 19upx;
  183. }
  184. &:active{
  185. background: #f8f8f8;
  186. }
  187. }
  188. }
  189. }
  190. }
  191. </style>