category.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. <template>
  2. <view class="container">
  3. <!-- <view class="search-block">
  4. <uni-search-bar bgColor="#fff" @confirm="search" cancelButton="none" @clear="clear">
  5. </uni-search-bar>
  6. </view> -->
  7. <view class="input-block">
  8. <view class="cell flex flex-y-c">
  9. <view class="name">一级类目</view>
  10. <input type="text" placeholder="搜索一级类目" class="input-box" :value="oneInput" @focus="onFocus('one')"
  11. @input="onInput($event,'one')" @blur="onBlur('one')">
  12. </view>
  13. <view class="cell flex flex-y-c" v-if="activeOne.id">
  14. <view class="name">二级类目</view>
  15. <input type="text" placeholder="搜索二级类目" class="input-box" :value="twoInput" @focus="onFocus('two')"
  16. @input="onInput($event,'two')" @blur="onBlur('two')">
  17. </view>
  18. <view class="btns flex flex-center">
  19. <view class="btn cancel-btn" @click="onCancel">取消</view>
  20. <view class="btn submit-btn" @click="onSubmit">确定</view>
  21. </view>
  22. </view>
  23. <!-- <view class="item flex-y-center" @click="bindcate(index)" v-for="(item,index) of list" :key="index">
  24. {{item.three_category}}
  25. </view> -->
  26. <view class="list" v-show="searchType == 'one'">
  27. <view class="item border1rpx" v-for="(item,index) in one_list" :key="item.id"
  28. @click="activeLeimu(item,'one')">{{item.name}}</view>
  29. </view>
  30. <view class="list" v-show="searchType == 'two'">
  31. <view class="item border1rpx" v-for="(item,index) in two_list" :key="item.id"
  32. @click="activeLeimu(item,'two')">{{item.name}}</view>
  33. </view>
  34. <view class="is-iphone-x" style="min-height: 40rpx;"></view>
  35. </view>
  36. </template>
  37. <script>
  38. export default {
  39. data() {
  40. return {
  41. timer: '',
  42. keyword: '',
  43. list: [],
  44. page: 1,
  45. is_bottom: false,
  46. //
  47. one_list: [],
  48. two_list: [],
  49. activeOne: {},
  50. activeTwo: {},
  51. oneInput: '',
  52. twoInput: '',
  53. searchType: 'one'
  54. }
  55. },
  56. onLoad() {
  57. // this.storeinfo(1);
  58. this.getOne()
  59. },
  60. onReachBottom() {
  61. // if (!this.is_bottom) {
  62. // this.storeinfo(this.page + 1)
  63. // }
  64. },
  65. onUnload() {
  66. if (this.timer) {
  67. clearTimeout(this.timer)
  68. }
  69. },
  70. methods: {
  71. // search(e) {
  72. // console.log(e)
  73. // this.keyword = e.value
  74. // this.storeinfo()
  75. // },
  76. // clear() {
  77. // this.keyword = ""
  78. // this.storeinfo()
  79. // },
  80. // bindcate(index) {
  81. // let a = this.list[index];
  82. // uni.setStorageSync("category", a)
  83. // uni.navigateBack()
  84. // },
  85. // storeinfo(page = 1) {
  86. // if (page == 1) {
  87. // this.page = 1
  88. // this.is_bottom = false
  89. // this.list = []
  90. // }
  91. // this.request({
  92. // url: 'Smdcshop/store_category',
  93. // data: {
  94. // keyword: this.keyword,
  95. // page: page,
  96. // limit: 20,
  97. // }
  98. // }).then(res => {
  99. // console.log(res)
  100. // if (res.code == 200 && res.data.length) {
  101. // this.list = this.list.concat(res.data)
  102. // this.page = page
  103. // } else {
  104. // this.is_bottom = true
  105. // }
  106. // })
  107. // },
  108. getOne() {
  109. this.request({
  110. url: 'Smdcshop/new_store_category',
  111. data: {
  112. keyword: this.oneInput
  113. }
  114. }).then(res => {
  115. console.log(res)
  116. if (res.code == 200) {
  117. this.one_list = res.data
  118. }
  119. })
  120. },
  121. getTwo() {
  122. this.request({
  123. url: 'Smdcshop/weixin_shop_category',
  124. data: {
  125. code: this.activeOne.id || '',
  126. keyword: this.twoInput
  127. }
  128. }).then(res => {
  129. console.log(res)
  130. if (res.code == 200) {
  131. this.two_list = res.data
  132. }
  133. })
  134. },
  135. onFocus(type) {
  136. console.log(type)
  137. if (type != this.searchType) {
  138. this.searchType = type
  139. if (type == 'one') {
  140. this.getOne()
  141. } else if (type == 'two') {
  142. this.getTwo()
  143. }
  144. }
  145. },
  146. onBlur(type) {
  147. if (type == 'one') {
  148. this.oneInput = this.activeOne.name || ''
  149. } else if (type == 'two') {
  150. this.twoInput = this.activeTwo.name || ''
  151. }
  152. },
  153. onInput(e, type) {
  154. if (this.timer) {
  155. clearTimeout(this.timer)
  156. }
  157. this.timer = setTimeout(() => {
  158. let val = e.detail.value
  159. this.searchType = type
  160. if (type == 'one') {
  161. this.oneInput = val
  162. this.getOne()
  163. } else if (type == 'two') {
  164. this.twoInput = val
  165. this.getTwo()
  166. }
  167. }, 500)
  168. },
  169. activeLeimu(item, type) {
  170. if (type == 'one') {
  171. this.oneInput = item.name
  172. this.activeOne = item
  173. this.activeTwo = {}
  174. this.twoInput = ""
  175. this.searchType = 'two'
  176. this.getTwo()
  177. } else if (type == 'two') {
  178. this.twoInput = item.name
  179. this.activeTwo = item
  180. }
  181. },
  182. onCancel() {
  183. uni.navigateBack()
  184. },
  185. onSubmit() {
  186. this.$nextTick(() => {
  187. console.log(this.activeOne)
  188. console.log(this.activeTwo)
  189. if (!this.activeOne.id) {
  190. uni.showToast({
  191. title: "请选择一级分类",
  192. icon: 'none'
  193. })
  194. return false
  195. } else if (!this.activeTwo.id) {
  196. uni.showToast({
  197. title: "请选择二级分类",
  198. icon: 'none'
  199. })
  200. return false
  201. }
  202. let pages = getCurrentPages()
  203. if (pages.length > 1) {
  204. let prePage = pages[pages.length - 2]
  205. console.log(prePage)
  206. prePage.$vm['new_shop_category'] = {
  207. one_category: this.activeOne,
  208. two_category: this.activeTwo
  209. }
  210. prePage.$vm['new_shop_category_txt'] = `${this.activeOne.name}>${this.activeTwo.name}`
  211. uni.navigateBack()
  212. }
  213. })
  214. },
  215. }
  216. }
  217. </script>
  218. <style lang="scss" scoped>
  219. .search-block {
  220. height: 100rpx;
  221. }
  222. .input-block {
  223. background-color: #fff;
  224. box-shadow: 0 10rpx 10rpx #f0f0f0;
  225. position: sticky;
  226. top: 0;
  227. z-index: 100;
  228. padding: 30rpx 24rpx;
  229. .cell {
  230. &~.cell {
  231. margin-top: 20rpx;
  232. }
  233. .name {
  234. height: 88rpx;
  235. line-height: 88rpx;
  236. font-size: 26rpx;
  237. }
  238. .input-box {
  239. flex: auto;
  240. height: 88rpx;
  241. background-color: #f6f7f8;
  242. border-radius: 8rpx;
  243. font-size: 26rpx;
  244. padding: 0 20rpx;
  245. margin-left: 24rpx;
  246. }
  247. }
  248. .btns {
  249. .btn {
  250. width: 200rpx;
  251. height: 60rpx;
  252. border-radius: 12rpx;
  253. text-align: center;
  254. line-height: 60rpx;
  255. margin: 30rpx 20rpx 0;
  256. }
  257. .cancel-btn {
  258. box-sizing: border-box;
  259. border: 2rpx solid #3387FF;
  260. color: #3387FF;
  261. }
  262. .submit-btn {
  263. background: #3387FF;
  264. color: #fff;
  265. }
  266. }
  267. }
  268. // .item {
  269. // height: 80rpx;
  270. // padding: 0 20rpx;
  271. // border-bottom: 1rpx solid #F1F1F1;
  272. // }
  273. .list {
  274. .item {
  275. border-bottom: 1rpx solid #f1f1f1;
  276. font-size: 26rpx;
  277. line-height: 80rpx;
  278. padding: 0 24rpx;
  279. }
  280. }
  281. </style>