index.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. <template>
  2. <mobile-frame :frameStyle="frameStyle" @toPath="toPath">
  3. <view class="main">
  4. <view class="one">
  5. <input type="text" placeholder="搜索商品" @tap="toCommon('pagesHome/market/search')" placeholder-class="placss">
  6. </view>
  7. <view class="two">
  8. <view class="two_1">
  9. <scroll-view scroll-y="true" class="scroll-view">
  10. <view class="list-scroll-view">
  11. <view class="list" :class="[active==index?'listActive':'']" v-for="(item,index) in typeList" :key="index" @tap="toChange(index,item)">
  12. <text>{{item.label}}</text>
  13. </view>
  14. </view>
  15. </scroll-view>
  16. </view>
  17. <view class="two_2">
  18. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
  19. <view class="list-scroll-view">
  20. <view class="two_2_1">
  21. <scroll-view scroll-x="true" class="typeScrollview">
  22. <view class="list" v-for="(item,index) in list" :key="index" @tap="twoChange(item,index)">
  23. <image class="image" :src="item.file&&item.file.length>0?item.file[0].url:logoUrl" mode="">
  24. </image>
  25. <view class="label textOver"><text :style="{color:twoActive==index?'#ff0000':'#000000'}">{{item.label}}</text>
  26. </view>
  27. </view>
  28. </scroll-view>
  29. </view>
  30. <view class=" two_2_2">
  31. <view class="list" v-for="(tag,index) in marketList" :key="index" @tap="toBuy(tag)">
  32. <view class="img">
  33. <image class="image" :src="tag.file&&tag.file.length>0?tag.file[0].url:''" mode=""></image>
  34. </view>
  35. <view class="info">
  36. <view class="name textOver">
  37. <text>{{tag.name}}</text>
  38. </view>
  39. <view class="num">
  40. <text>库存{{tag.num}}</text>
  41. </view>
  42. <view class="money">
  43. <text>¥{{tag.sell_money}}</text>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. <view class="is_bottom" v-if="is_bottom">
  49. <text>{{config.bottom_title}}</text>
  50. </view>
  51. </view>
  52. </scroll-view>
  53. </view>
  54. </view>
  55. </view>
  56. </mobile-frame>
  57. </template>
  58. <script>
  59. export default {
  60. data() {
  61. return {
  62. frameStyle: {
  63. useBar: true
  64. },
  65. active: '0',
  66. typeList: [],
  67. list: [],
  68. // 平台信息
  69. config: {},
  70. logoUrl: '',
  71. // 商品分类tags
  72. tags: '',
  73. twoActive: null,
  74. // 商品列表
  75. marketList: [],
  76. total: 0,
  77. page: 0,
  78. skip: 0,
  79. limit: 6,
  80. // 数据是否触底
  81. is_bottom: false,
  82. scrollTop: 0,
  83. };
  84. },
  85. onLoad: function() {
  86. const that = this;
  87. that.searchConfig();
  88. that.search();
  89. },
  90. methods: {
  91. // 查询基本设置
  92. searchConfig() {
  93. const that = this;
  94. uni.getStorage({
  95. key: 'config',
  96. success: function(res) {
  97. let data = res.data;
  98. that.$set(that, `config`, data)
  99. if (data) {
  100. that.$set(that, `logoUrl`, data.config.logo[0].url)
  101. }
  102. },
  103. fail: function(err) {
  104. console.log(err);
  105. }
  106. })
  107. },
  108. // 查询左侧一级列表
  109. async search() {
  110. const that = this;
  111. let res;
  112. res = await that.$api(`/goodsTags`, 'GET', {
  113. status: '0'
  114. })
  115. if (res.errcode == '0') {
  116. that.$set(that, `typeList`, res.data);
  117. if (res.total > 0) {
  118. that.searchRight(res.data[0]);
  119. // 查询产品
  120. that.$set(that, `tags`, res.data[0].code)
  121. that.searchMarket()
  122. }
  123. }
  124. },
  125. // 查询左侧二级信息
  126. async searchRight(e) {
  127. const that = this;
  128. let info = {};
  129. if (e.id) info.pid = e.id;
  130. const res = await that.$api(`/goodsTags/tree`, 'GET', {
  131. ...info
  132. })
  133. if (res.errcode == '0' && res.data.length > 0) {
  134. that.$set(that, `list`, res.data[0].children);
  135. }
  136. },
  137. // 查询产品
  138. async searchMarket() {
  139. const that = this;
  140. let info = {
  141. skip: that.skip,
  142. limit: that.limit,
  143. tags: that.tags
  144. }
  145. const res = await that.$api(`/viewGoods/indexGoodsList`, `GET`, {
  146. ...info,
  147. })
  148. if (res.errcode == '0') {
  149. let list = [...that.marketList, ...res.data];
  150. that.$set(that, `marketList`, list);
  151. that.$set(that, `total`, res.total)
  152. } else {
  153. uni.showToast({
  154. title: res.errmsg || '错误信息',
  155. icon: 'none'
  156. })
  157. }
  158. },
  159. // 分页
  160. toPage() {
  161. const that = this;
  162. let list = that.marketList;
  163. let limit = that.limit;
  164. if (that.total > list.length) {
  165. uni.showLoading({
  166. title: '加载中',
  167. mask: true
  168. })
  169. let page = that.page + 1;
  170. that.$set(that, `page`, page)
  171. let skip = page * limit;
  172. that.$set(that, `skip`, skip)
  173. that.searchMarket();
  174. uni.hideLoading();
  175. } else that.$set(that, `is_bottom`, true)
  176. },
  177. // 触底
  178. toScroll(e) {
  179. const that = this;
  180. let up = that.scrollTop;
  181. that.$set(that, `scrollTop`, e.detail.scrollTop);
  182. let num = Math.sign(up - e.detail.scrollTop);
  183. if (num == 1) that.$set(that, `is_bottom`, false);
  184. },
  185. // 左侧一级选择
  186. toChange(index, e) {
  187. const that = this;
  188. that.$set(that, `list`, []);
  189. that.$set(that, `active`, index);
  190. that.$set(that, `tags`, e.code);
  191. that.$set(that, `twoActive`, null);
  192. that.clearPage();
  193. that.searchRight(e);
  194. that.searchMarket();
  195. },
  196. // 右侧二级选择
  197. twoChange(e, index) {
  198. const that = this;
  199. that.$set(that, `tags`, e.code);
  200. that.$set(that, `twoActive`, index);
  201. that.searchMarket();
  202. },
  203. // 搜索商品
  204. toCommon(e) {
  205. const that = this;
  206. uni.navigateTo({
  207. url: `/${e}`
  208. })
  209. },
  210. // 购买
  211. toBuy(e) {
  212. const that = this;
  213. uni.navigateTo({
  214. url: `/pagesHome/order/detail?id=${e.id||e._id}`
  215. })
  216. },
  217. // 菜单跳转
  218. toPath(e) {
  219. const that = this;
  220. that.clearPage();
  221. if (e && e.route && e.type == '0') {
  222. uni.redirectTo({
  223. url: `/${e.route}`
  224. })
  225. } else {
  226. uni.navigateTo({
  227. url: `/${e.route}`
  228. })
  229. }
  230. },
  231. // 清空列表
  232. clearPage() {
  233. const that = this;
  234. that.$set(that, `list`, [])
  235. that.$set(that, `marketList`, [])
  236. that.$set(that, `typeList`, [])
  237. that.$set(that, `active`, '0')
  238. that.$set(that, `skip`, 0)
  239. that.$set(that, `limit`, 6)
  240. that.$set(that, `page`, 0)
  241. },
  242. },
  243. onPullDownRefresh: async function() {
  244. const that = this;
  245. that.$set(that, `list`, [])
  246. that.$set(that, `marketList`, [])
  247. that.$set(that, `typeList`, [])
  248. that.$set(that, `active`, '0')
  249. that.$set(that, `skip`, 0)
  250. that.$set(that, `limit`, 6)
  251. that.$set(that, `page`, 0)
  252. await that.search();
  253. uni.stopPullDownRefresh();
  254. }
  255. }
  256. </script>
  257. <style lang="scss">
  258. .main {
  259. display: flex;
  260. flex-direction: column;
  261. width: 100vw;
  262. height: 91vh;
  263. .one {
  264. padding: 2vw;
  265. border: 1px solid var(--f1Color);
  266. input {
  267. background-color: var(--fFB1Color);
  268. border-radius: 30px;
  269. padding: 2vw;
  270. color: var(--fffColor);
  271. font-size: var(--font15Size);
  272. }
  273. .placss {
  274. color: var(--fffColor);
  275. }
  276. }
  277. .two {
  278. height: 83vh;
  279. display: flex;
  280. flex-direction: row;
  281. .two_1 {
  282. position: relative;
  283. width: 25vw;
  284. background-color: #fafafa;
  285. display: flex;
  286. flex-direction: column;
  287. .list {
  288. text-align: center;
  289. padding: 2.5vw 0;
  290. border-bottom: 1px solid var(--f1Color);
  291. text {
  292. font-size: var(--font14Size);
  293. }
  294. }
  295. .listActive {
  296. background-color: var(--fffColor);
  297. }
  298. }
  299. .two_2 {
  300. flex-grow: 1;
  301. position: relative;
  302. display: flex;
  303. flex-direction: column;
  304. .two_2_1 {
  305. padding: 0 2vw;
  306. margin: 0 0 2vw 0;
  307. .typeScrollview {
  308. display: flex;
  309. white-space: nowrap;
  310. .list {
  311. display: inline-block;
  312. width: 14vw;
  313. padding: 1vw;
  314. text-align: center;
  315. border-radius: 5px;
  316. margin: 0 2vw 0 0;
  317. .image {
  318. width: 100%;
  319. height: 7vh;
  320. border-radius: 5px;
  321. border: 1px solid var(--f1Color);
  322. ;
  323. }
  324. .label {
  325. font-size: var(--font12Size);
  326. }
  327. }
  328. }
  329. }
  330. .two_2_2 {
  331. padding: 0 2vw;
  332. width: 70vw;
  333. .list {
  334. display: flex;
  335. width: 66vw;
  336. margin: 0 0 2vw 0;
  337. padding: 2vw;
  338. box-shadow: 0 0 5px var(--f1Color);
  339. ;
  340. border-radius: 5px;
  341. .img {
  342. width: 19vw;
  343. .image {
  344. width: 19vw;
  345. height: 12vh;
  346. border-radius: 5px;
  347. }
  348. }
  349. .info {
  350. width: 45vw;
  351. padding: 0 0 0 2vw;
  352. .name {
  353. font-size: var(--font15Size);
  354. margin: 0 0 1vw 0;
  355. }
  356. .num {
  357. font-size: var(--font14Size);
  358. color: #858585;
  359. margin: 0 0 1vw 0;
  360. }
  361. .money {
  362. font-size: var(--font14Size);
  363. color: #ff0000;
  364. margin: 0 0 1vw 0;
  365. }
  366. }
  367. }
  368. }
  369. }
  370. }
  371. }
  372. .scroll-view {
  373. position: absolute;
  374. top: 0;
  375. left: 0;
  376. right: 0;
  377. bottom: 0;
  378. .list-scroll-view {
  379. display: flex;
  380. flex-direction: column;
  381. }
  382. }
  383. .is_bottom {
  384. text-align: center;
  385. text {
  386. padding: 2vw 0;
  387. display: inline-block;
  388. color: #858585;
  389. font-size: 14px;
  390. }
  391. }
  392. </style>