index.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. const getHeight = require("../../utils/GetRheRemainingHeight");
  2. Component({
  3. options: {
  4. addGlobalClass: true
  5. },
  6. properties: {
  7. styleType: {
  8. type: String,
  9. value: "default", //默认样式
  10. },
  11. sort: Array, //排序规则列表
  12. search: Boolean, //是否开启搜索
  13. list: { //功能列表
  14. type: Array,
  15. value: [{
  16. label: "全部",
  17. icon: "icon-webxialaxuanxiangjiantou",
  18. color: "",
  19. width: "",
  20. id: "1"
  21. }, {
  22. label: "排序",
  23. icon: "icon-shengxu",
  24. color: "",
  25. width: "",
  26. id: "sort"
  27. }, {
  28. label: "筛选",
  29. icon: "icon-shaixuan",
  30. color: "",
  31. width: "",
  32. id: "filtrate"
  33. }]
  34. },
  35. condition: String, //搜索内容
  36. onClick: Function,
  37. startUsing: Boolean, //启用搜索
  38. onSearch: Function, //搜索回调
  39. record: { //记录历史
  40. type: Boolean,
  41. value: true
  42. },
  43. placeholder: {
  44. type: String,
  45. value: "搜索商品"
  46. },
  47. isFilter: {
  48. type: Boolean,
  49. value: false
  50. }
  51. },
  52. data: {
  53. sortShow: false,
  54. reversed: 0, //是否翻转
  55. condition: "",
  56. history: [], //搜索历史
  57. showHistory: false,
  58. listHeight: null,
  59. },
  60. lifetimes: {
  61. attached() {
  62. if (wx.getStorageSync('SearchHistory')) this.setData({
  63. history: wx.getStorageSync('SearchHistory')
  64. })
  65. },
  66. ready() {
  67. getHeight.getHeight('.Yl_head', this).then(res => this.setData({
  68. listHeight: res - 80
  69. }));
  70. }
  71. },
  72. methods: {
  73. /* 排序 */
  74. sortClick(e) {
  75. const {
  76. name
  77. } = e.target.dataset;
  78. if (name == 'confirm') {
  79. let sort = this.data.sort.find(v => v.sorted == 1),
  80. i = this.data.list.findIndex(v => v.id == 'sort');
  81. this.setData({
  82. [`list[${i}].label`]: sort.sortname,
  83. [`list[${i}].icon`]: sort.reversed == 1 ? 'icon-jiangxu1' : 'icon-shengxu',
  84. })
  85. let pages = getCurrentPages(),
  86. page = pages[pages.length - 1];
  87. page.setData({
  88. "content.sort": this.data.sort
  89. });
  90. page.getList(true);
  91. };
  92. this.setData({
  93. sortShow: false
  94. })
  95. },
  96. sortClose() {
  97. this.setData({
  98. sortShow: false
  99. })
  100. },
  101. /* 设置排序规则 */
  102. handleSort(e) {
  103. const {
  104. id
  105. } = e.currentTarget.dataset;
  106. this.setData({
  107. sort: this.data.sort.map(v => {
  108. v.sorted = v.sortid == id ? 1 : 0
  109. return v;
  110. })
  111. });
  112. },
  113. /* 设置升序和倒叙 */
  114. handleReversed(e) {
  115. let {
  116. id
  117. } = e.currentTarget.dataset;
  118. if (this.data.reversed == id) return;
  119. this.setData({
  120. reversed: id,
  121. sort: this.data.sort.map(v => {
  122. v.reversed = id;
  123. return v;
  124. })
  125. });
  126. },
  127. onClick(e) {
  128. const {
  129. item
  130. } = e.currentTarget.dataset;
  131. if (item.id == "sort") {
  132. //排序
  133. this.setData({
  134. sortShow: true
  135. })
  136. } else if (item.id == "filtrate") {
  137. let page = getCurrentPages()[getCurrentPages().length - 1].selectComponent("#Filtrate");
  138. if (page) {
  139. page.setData({
  140. show: true
  141. })
  142. } else {
  143. this.triggerEvent("onClick", item)
  144. }
  145. } else {
  146. this.triggerEvent("onClick", item)
  147. }
  148. },
  149. onChick1(e) {
  150. const {
  151. id
  152. } = e.currentTarget.dataset;
  153. if (id == "sort") {
  154. //排序
  155. this.setData({
  156. sortShow: true
  157. })
  158. } else if (id == "filtrate") {
  159. let page = getCurrentPages()[getCurrentPages().length - 1].selectComponent("#Filtrate");
  160. if (page) {
  161. page.setData({
  162. show: true,
  163. })
  164. } else {
  165. getCurrentPages()[getCurrentPages().length - 1].setData({
  166. modalName: 'viewModal'
  167. })
  168. }
  169. }
  170. },
  171. /* 开启关闭搜索 */
  172. clickSearch() {
  173. this.setData({
  174. startUsing: !this.data.startUsing
  175. });
  176. setTimeout(this.setListHeight, 400)
  177. },
  178. /* 搜索 */
  179. confirmSearch(e) {
  180. if (this.data.condition == e.detail.value) return;
  181. this.setData({
  182. condition: e.detail.value
  183. })
  184. this.triggerEvent("onSearch", e.detail.value)
  185. },
  186. /* 开始搜索 */
  187. startSearch({
  188. detail
  189. }) {
  190. if (this.data.condition == detail) return;
  191. this.setData({
  192. condition: detail
  193. })
  194. this.triggerEvent("onSearch", detail)
  195. if (this.data.record || detail == '') {
  196. let list = this.data.history;
  197. if (list.findIndex(v => v == detail) == -1) {
  198. list.push(detail)
  199. this.setData({
  200. history: list
  201. });
  202. wx.setStorageSync("SearchHistory", list)
  203. }
  204. }
  205. },
  206. /* 取消搜索 */
  207. endSearch() {
  208. this.setData({
  209. condition: ""
  210. })
  211. this.triggerEvent("onSearch", "")
  212. },
  213. /* 删除搜索历史 */
  214. deleteHistory(e) {
  215. let that = this;
  216. wx.showModal({
  217. title: '提示',
  218. content: '是否删除所有搜索历史',
  219. complete: ({
  220. confirm
  221. }) => {
  222. if (confirm) {
  223. wx.setStorageSync("SearchHistory", [])
  224. that.setData({
  225. history: []
  226. });
  227. this.setListHeight();
  228. }
  229. }
  230. })
  231. },
  232. /* 快速搜索 */
  233. clickTag(e) {
  234. const {
  235. name
  236. } = e.currentTarget.dataset;
  237. this.setData({
  238. condition: name
  239. });
  240. this.triggerEvent("onSearch", name)
  241. },
  242. /* 单独删除 */
  243. delteTag(e) {
  244. const {
  245. name
  246. } = e.currentTarget.dataset;
  247. this.setData({
  248. history: this.data.history.filter(v => v != name)
  249. });
  250. wx.setStorageSync('SearchHistory', this.data.history);
  251. this.setListHeight();
  252. },
  253. /* 设置列表高度 */
  254. setListHeight() {
  255. let pages = getCurrentPages();
  256. if (pages[pages.length - 1].setListHeight) pages[pages.length - 1].setListHeight();
  257. },
  258. /* 搜索框焦点 */
  259. onFocus() {
  260. this.setData({
  261. showHistory: true
  262. });
  263. setTimeout(this.setListHeight, 50);
  264. },
  265. /* 搜索框失焦 */
  266. onBlur() {
  267. this.setData({
  268. showHistory: false
  269. })
  270. setTimeout(this.setListHeight, 50);
  271. }
  272. }
  273. })