market.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <input type="text" v-model="searchInfo.name" @blur="toInput" placeholder="搜索商品名称">
  6. </view>
  7. <view class="two">
  8. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
  9. <view class="list-scroll-view">
  10. <view class="two_1">
  11. <view :class="['list',condActive==index?'activeList':'']" v-for="(item,index) in condList"
  12. :key="index" @tap="toCond(index,item)">
  13. <view class="name" v-if="index!=4">
  14. {{item.name}}
  15. </view>
  16. <view v-if="index==4" class="icon4">
  17. <view class="icon_1">
  18. <text :class="['iconfont',item.shangActive]"
  19. v-if="condActive==index&&shang=='1'"></text>
  20. <text :class="['iconfont',item.shang]" v-else></text>
  21. </view>
  22. </view>
  23. <view v-else class="icon">
  24. <view class="icon_1">
  25. <text :class="['iconfont',item.shangActive]"
  26. v-if="condActive==index&&shang=='1'"></text>
  27. <text :class="['iconfont',item.shang]" v-else></text>
  28. </view>
  29. <view class="icon_1">
  30. <text :class="['iconfont', item.xiaActive]"
  31. v-if="condActive==index&&xia=='-1'"></text>
  32. <text :class="['iconfont', item.xia]" v-else></text>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="two_2" v-if="type=='gongge'">
  38. <view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
  39. <image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode="">
  40. </image>
  41. <view class="name">
  42. {{item.name||'暂无'}}
  43. </view>
  44. <view class="money">
  45. <text>¥</text>
  46. <text>{{item.sell_money.$numberDecimal}}</text>
  47. </view>
  48. <view class="other">
  49. <view class="other_1">
  50. {{item.view_num||0}}人浏览
  51. </view>
  52. <view class="other_2">
  53. <text @tap.stop="toDel(item)" class="iconfont icon-del"></text>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. <view class="two_3" v-else>
  59. <view class="list_1" v-for="(item, index) in list" :key="index" @tap="toView(item)">
  60. <image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode="">
  61. </image>
  62. <view class="list_1_1">
  63. <view class="name">
  64. {{item.name||'暂无'}}
  65. </view>
  66. <view class="money">
  67. <text>¥</text>
  68. <text>{{item.sell_money.$numberDecimal}}</text>
  69. </view>
  70. <view class="other">
  71. <view class="other_1">
  72. {{item.view_num||0}}人浏览
  73. </view>
  74. <view class="other_2">
  75. <text @tap.stop="toDel(item)" class="iconfont icon-del"></text>
  76. </view>
  77. </view>
  78. </view>
  79. </view>
  80. </view>
  81. </view>
  82. </scroll-view>
  83. </view>
  84. </view>
  85. </mobile-frame>
  86. </template>
  87. <script>
  88. export default {
  89. data() {
  90. return {
  91. searchInfo: {},
  92. user: {},
  93. list: [],
  94. total: 0,
  95. skip: 0,
  96. limit: 6,
  97. page: 0,
  98. condActive: 0,
  99. shang: '',
  100. xia: '',
  101. condList: [ // 筛选
  102. {
  103. name: '默认',
  104. },
  105. {
  106. name: '收藏时间',
  107. shang: 'icon-shangjiantou',
  108. shangActive: 'icon-shangjiantou-copy',
  109. xia: 'icon-xiajiantou',
  110. xiaActive: 'icon-xiajiantou-copy'
  111. },
  112. {
  113. name: '价格',
  114. shang: 'icon-shangjiantou',
  115. shangActive: 'icon-shangjiantou-copy',
  116. xia: 'icon-xiajiantou',
  117. xiaActive: 'icon-xiajiantou-copy'
  118. },
  119. {
  120. name: '浏览量',
  121. shang: 'icon-shangjiantou',
  122. shangActive: 'icon-shangjiantou-copy',
  123. xia: 'icon-xiajiantou',
  124. xiaActive: 'icon-xiajiantou-copy'
  125. },
  126. {
  127. shang: 'icon-shitugonggeListBox',
  128. shangActive: 'icon-shitugonggeListBox',
  129. }
  130. ],
  131. type: 'gongge',
  132. };
  133. },
  134. onShow: function() {
  135. const that = this;
  136. that.watchLogin()
  137. },
  138. methods: {
  139. // 输入框
  140. toInput(e) {
  141. const that = this;
  142. if (e.detail.value) that.$set(that.searchInfo, `name`, e.detail.value);
  143. that.clearPage();
  144. that.search();
  145. },
  146. // 详细信息
  147. toView(e) {
  148. const that = this;
  149. that.clearPage();
  150. uni.navigateTo({
  151. url: `/pagesHome/order/detail?id=${e._id}`
  152. })
  153. },
  154. // 删除
  155. toDel(e) {
  156. const that = this;
  157. let user = that.user;
  158. uni.showModal({
  159. title: '提示',
  160. content: '确定取消收藏吗?',
  161. success: async function(res) {
  162. if (res.confirm) {
  163. const arr = await that.$api(`/storeGoods`, 'POST', {
  164. customer: user._id,
  165. goods: e._id
  166. });
  167. if (arr.errcode == '0') {
  168. uni.showToast({
  169. title: '取消收藏成功',
  170. icon: 'none'
  171. })
  172. that.clearPage();
  173. that.search();
  174. } else {
  175. uni.showToast({
  176. title: arr.errmsg,
  177. icon: 'none'
  178. })
  179. }
  180. }
  181. }
  182. });
  183. },
  184. // 筛选
  185. toCond(index, e) {
  186. const that = this;
  187. let condActive = that.condActive;
  188. that.$set(that, `condActive`, index);
  189. if (condActive != index && that.xia == '') {
  190. that.$set(that, `shang`, '0');
  191. that.$set(that, `xia`, '-1');
  192. } else if (condActive == index && that.xia == '-1') {
  193. that.$set(that, `shang`, '1');
  194. that.$set(that, `xia`, '0');
  195. } else if (condActive == index && that.shang == '1') {
  196. that.$set(that, `shang`, '0');
  197. that.$set(that, `xia`, '-1');
  198. } else if (condActive = index && that.shang == '1') {
  199. that.$set(that, `shang`, '0');
  200. that.$set(that, `xia`, '-1');
  201. }
  202. let value;
  203. if (index != 0) {
  204. value = that.shang == '0' ? that.xia : that.shang;
  205. } else {
  206. that.$set(that, `searchInfo`, {})
  207. }
  208. if (index == 1) {
  209. that.$set(that, `searchInfo`, {})
  210. that.$set(that.searchInfo, `time`, value);
  211. } else if (index == 2) {
  212. that.$set(that, `searchInfo`, {})
  213. that.$set(that.searchInfo, `sell_money`, value);
  214. } else if (index == 3) {
  215. that.$set(that, `searchInfo`, {})
  216. that.$set(that.searchInfo, `view_num`, value);
  217. } else if (index == 4) {
  218. if (e.shang == 'icon-liebiaoxingshi') {
  219. that.$set(e, `shang`, 'icon-shitugonggeListBox');
  220. that.$set(that, `type`, 'gongge');
  221. } else {
  222. that.$set(e, `shang`, 'icon-liebiaoxingshi');
  223. that.$set(that, `type`, 'list');
  224. }
  225. }
  226. that.clearPage();
  227. that.search();
  228. },
  229. // 监听用户是否登录
  230. watchLogin() {
  231. const that = this;
  232. uni.getStorage({
  233. key: 'token',
  234. success: function(res) {
  235. let user = that.$jwt(res.data);
  236. that.$set(that, `user`, user);
  237. that.search()
  238. },
  239. fail: function(err) {
  240. uni.reLaunch({
  241. url: `/pages/login/index`
  242. })
  243. }
  244. })
  245. },
  246. // 查询列表
  247. async search() {
  248. const that = this;
  249. let user = that.user;
  250. let info = {
  251. skip: that.skip,
  252. limit: that.limit
  253. }
  254. const res = await that.$api(`/storeGoods/userView`, 'GET', {
  255. ...info,
  256. ...that.searchInfo
  257. })
  258. if (res.errcode == '0') {
  259. let list = [...that.list, ...res.data];
  260. that.$set(that, `list`, list);
  261. that.$set(that, `total`, res.total)
  262. }
  263. },
  264. // 分页
  265. toPage(e) {
  266. const that = this;
  267. let list = that.list;
  268. let limit = that.limit;
  269. if (that.total > list.length) {
  270. uni.showLoading({
  271. title: '加载中',
  272. mask: true
  273. })
  274. let page = that.page + 1;
  275. that.$set(that, `page`, page)
  276. let skip = page * limit;
  277. that.$set(that, `skip`, skip)
  278. that.search();
  279. uni.hideLoading();
  280. } else uni.showToast({
  281. title: '没有更多数据了'
  282. });
  283. },
  284. // 清空列表
  285. clearPage() {
  286. const that = this;
  287. that.$set(that, `list`, [])
  288. that.$set(that, `skip`, 0)
  289. that.$set(that, `limit`, 6)
  290. that.$set(that, `page`, 0)
  291. }
  292. }
  293. }
  294. </script>
  295. <style lang="scss">
  296. .main {
  297. display: flex;
  298. flex-direction: column;
  299. width: 100vw;
  300. height: 100vh;
  301. .one {
  302. border-bottom: 1px solid var(--f85Color);
  303. padding: 2vw;
  304. input {
  305. padding: 2vw;
  306. background-color: var(--f1Color);
  307. font-size: var(--font14Size);
  308. border-radius: 5px;
  309. }
  310. }
  311. .two {
  312. position: relative;
  313. flex-grow: 1;
  314. padding: 2vw 0 0 0;
  315. .two_1 {
  316. background-color: var(--fffColor);
  317. padding: 2vw;
  318. display: flex;
  319. width: 100vw;
  320. flex-direction: row;
  321. justify-content: space-around;
  322. .list {
  323. display: flex;
  324. flex-direction: row;
  325. .icon {
  326. position: relative;
  327. top: -5px;
  328. left: 2px;
  329. .icon_1 {
  330. height: 10px;
  331. .iconfont {
  332. font-size: 12px;
  333. }
  334. }
  335. }
  336. .icon4 {
  337. .icon_1 {
  338. .iconfont {
  339. font-size: 17px;
  340. }
  341. }
  342. }
  343. }
  344. .activeList {
  345. .name {
  346. color: #ff0000;
  347. }
  348. }
  349. }
  350. .two_2 {
  351. width: 100vw;
  352. display: flex;
  353. flex-wrap: wrap;
  354. .list {
  355. width: 42vw;
  356. border: 1px solid var(--f1Color);
  357. margin: 2vw 2vw 0 2vw;
  358. padding: 2vw;
  359. border-radius: 5px;
  360. .image {
  361. width: 100%;
  362. height: 40vw;
  363. border-radius: 5px;
  364. }
  365. .name {
  366. font-size: var(--font16Size);
  367. margin: 0 0 1vw 0;
  368. }
  369. .money {
  370. color: var(--fFB1Color);
  371. font-size: var(--font14Size);
  372. margin: 0 0 1vw 0;
  373. }
  374. .other {
  375. display: flex;
  376. flex-direction: row;
  377. justify-content: space-between;
  378. .other_1 {
  379. font-size: var(--font14Size);
  380. color: var(--f85Color);
  381. }
  382. }
  383. }
  384. .list:nth-child(2n) {
  385. margin: 2vw 0 0 0;
  386. }
  387. }
  388. .two_3 {
  389. width: 100vw;
  390. .list_1 {
  391. display: flex;
  392. flex-direction: row;
  393. justify-content: space-between;
  394. width: 91vw;
  395. border: 1px solid var(--f1Color);
  396. margin: 2vw 2vw 0 2vw;
  397. padding: 2vw;
  398. border-radius: 5px;
  399. .image {
  400. width: 25vw;
  401. height: 25vw;
  402. border-radius: 5px;
  403. margin: 0 2vw 0 0;
  404. }
  405. .list_1_1 {
  406. display: flex;
  407. flex-direction: column;
  408. flex-grow: 1;
  409. padding: 2vw 0;
  410. .name {
  411. font-size: var(--font16Size);
  412. margin: 0 0 1vw 0;
  413. }
  414. .money {
  415. color: var(--fFB1Color);
  416. font-size: var(--font14Size);
  417. margin: 0 0 1vw 0;
  418. }
  419. .other {
  420. display: flex;
  421. justify-content: space-between;
  422. .name {
  423. font-size: var(--font16Size);
  424. font-weight: bold;
  425. }
  426. .other_1 {
  427. font-size: var(--font14Size);
  428. color: var(--f85Color);
  429. text {
  430. font-weight: bold;
  431. padding: 0 2vw;
  432. color: var(--ff0Color);
  433. }
  434. }
  435. }
  436. }
  437. }
  438. }
  439. }
  440. }
  441. .scroll-view {
  442. position: absolute;
  443. top: 0;
  444. left: 0;
  445. right: 0;
  446. bottom: 0;
  447. .list-scroll-view {
  448. display: flex;
  449. flex-direction: column;
  450. }
  451. }
  452. </style>