index.vue 9.0 KB

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