index.vue 8.8 KB

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