index.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  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. <tabs :tabs="tabs" @tabsChange="tabsChange">
  9. <view class="tabsList">
  10. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
  11. <view class="list-scroll-view">
  12. <view class="list" v-for="(item, index) in list" :key="index" @click="toShare(item)">
  13. <view class="image">
  14. <image class="file" v-for="(tag, indexs) in item.persons.slice(0,9)"
  15. :key="indexs" :src="tag.icon&&tag.icon.length>0?tag.icon[0].url:''" mode="">
  16. </image>
  17. </view>
  18. <view class="list_1">
  19. <view class="name">
  20. {{item.person_limit||0}}人即可开团成功
  21. </view>
  22. <view class="some">
  23. <text>团长</text>
  24. <text>{{item.leader.name||'暂无'}}</text>
  25. </view>
  26. <view class="some">
  27. <text>参团人数</text>
  28. <text>{{item.persons.length||0}}人</text>
  29. </view>
  30. <view class="some">
  31. <text>开团时间</text>
  32. <text>{{item.time||'暂无'}}</text>
  33. </view>
  34. </view>
  35. <view class="other">
  36. <view v-if="item.status=='0'" class="btn">
  37. <text>{{item.zhStatus||'暂无状态'}}</text>
  38. </view>
  39. <view v-else-if="item.status=='-1'" class="button">
  40. {{item.zhStatus||'暂无状态'}}
  41. </view>
  42. <view v-else-if="item.status=='2'" class="button">
  43. 已退团
  44. </view>
  45. <view v-else class="button">
  46. {{item.zhStatus||'暂无状态'}}
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </scroll-view>
  52. </view>
  53. </tabs>
  54. </view>
  55. </view>
  56. </mobile-frame>
  57. </template>
  58. <script>
  59. import moment from 'moment';
  60. import tabs from '@/components/tabs/index.vue';
  61. export default {
  62. components: {
  63. tabs
  64. },
  65. data() {
  66. return {
  67. user: {},
  68. searchInfo: {},
  69. list: [],
  70. total: 0,
  71. skip: 0,
  72. limit: 6,
  73. page: 0,
  74. statusList: [],
  75. tabs: {
  76. active: '0',
  77. menu: [{
  78. title: '开团中',
  79. active: '0'
  80. },
  81. {
  82. title: '已散团',
  83. active: '-1'
  84. },
  85. // {
  86. // title: '已退团',
  87. // active: '2'
  88. // },
  89. {
  90. title: '已结束',
  91. active: '1'
  92. }
  93. ]
  94. },
  95. status: '0',
  96. };
  97. },
  98. onShow: function() {
  99. const that = this;
  100. that.watchLogin()
  101. },
  102. onHide: function() {
  103. const that = this;
  104. that.clearPage();
  105. },
  106. methods: {
  107. // 输入框
  108. toInput(e) {
  109. const that = this;
  110. if (e.detail.value) that.$set(that.searchInfo, `name`, e.detail.value);
  111. that.clearPage();
  112. that.search();
  113. },
  114. // 选择选项卡
  115. tabsChange(e) {
  116. const that = this;
  117. that.$set(that.tabs, `active`, e.active)
  118. that.$set(that, `status`, e.active);
  119. that.clearPage();
  120. that.search()
  121. },
  122. // 分享
  123. toShare(e) {
  124. const that = this;
  125. that.clearPage();
  126. uni.navigateTo({
  127. url: `/pagesHome/group/share?id=${e._id}`
  128. })
  129. },
  130. // 监听用户是否登录
  131. watchLogin() {
  132. const that = this;
  133. uni.getStorage({
  134. key: 'token',
  135. success: async function(res) {
  136. let user = that.$jwt(res.data);
  137. that.$set(that, `user`, user);
  138. let status = await that.$api(`/dictData`, 'GET', {
  139. code: "group_status"
  140. });
  141. if (status.errcode == '0') {
  142. that.$set(that, `statusList`, status.data)
  143. }
  144. that.search()
  145. },
  146. fail: function(err) {
  147. uni.reLaunch({
  148. url: `/pages/login/index`
  149. })
  150. }
  151. })
  152. },
  153. // 查询列表
  154. async search() {
  155. const that = this;
  156. let user = that.user;
  157. let status = that.status;
  158. if (user._id) {
  159. let info = {
  160. skip: that.skip,
  161. limit: that.limit,
  162. person: user._id,
  163. status: that.status,
  164. }
  165. let res = await that.$api(`/group`, 'GET', {
  166. ...info,
  167. ...that.searchInfo
  168. })
  169. if (res.errcode == '0') {
  170. let list = [...that.list, ...res.data];
  171. for (let val of list) {
  172. let personsstatus = val.persons.find(i => i.customer == user._id)
  173. if (personsstatus?.status == '1') {
  174. val.status = '2';
  175. }
  176. if (that.status != '-1') {
  177. val.persons = val.persons.filter(i => i.status == '0')
  178. }
  179. let status = that.statusList.find(i => i.value == val.status)
  180. if (status) val.zhStatus = status.label;
  181. val.time = moment(val.meta.createdAt).format('YYYY-MM-DD HH:mm:ss')
  182. }
  183. that.$set(that, `list`, list);
  184. that.$set(that, `total`, res.total)
  185. }
  186. }
  187. },
  188. // 分页
  189. toPage(e) {
  190. const that = this;
  191. let list = that.list;
  192. let limit = that.limit;
  193. if (that.total > list.length) {
  194. uni.showLoading({
  195. title: '加载中',
  196. mask: true
  197. })
  198. let page = that.page + 1;
  199. that.$set(that, `page`, page)
  200. let skip = page * limit;
  201. that.$set(that, `skip`, skip)
  202. that.search();
  203. uni.hideLoading();
  204. } else uni.showToast({
  205. title: '没有更多数据了',
  206. icon: 'none'
  207. });
  208. },
  209. // 清空列表
  210. clearPage() {
  211. const that = this;
  212. that.$set(that, `list`, [])
  213. that.$set(that, `skip`, 0)
  214. that.$set(that, `limit`, 6)
  215. that.$set(that, `page`, 0)
  216. }
  217. }
  218. }
  219. </script>
  220. <style lang="scss">
  221. .main {
  222. display: flex;
  223. flex-direction: column;
  224. width: 100vw;
  225. height: 100vh;
  226. .one {
  227. padding: 2vw;
  228. input {
  229. padding: 2vw;
  230. background-color: var(--f1Color);
  231. font-size: var(--font14Size);
  232. border-radius: 5px;
  233. }
  234. }
  235. .two {
  236. position: relative;
  237. flex-grow: 1;
  238. padding: 2vw 0 0 0;
  239. .tabsList {
  240. position: relative;
  241. width: 100vw;
  242. height: 82vh;
  243. .list {
  244. display: flex;
  245. flex-direction: row;
  246. justify-content: space-between;
  247. align-items: center;
  248. width: 91vw;
  249. border: 1px solid var(--f1Color);
  250. margin: 2vw 2vw 0 2vw;
  251. padding: 0 2vw;
  252. border-radius: 5px;
  253. .image {
  254. display: flex;
  255. flex-wrap: wrap;
  256. justify-content: center;
  257. align-items: center;
  258. width: 27vw;
  259. height: 27vw;
  260. border-radius: 5px;
  261. margin: 0 2vw 0 0;
  262. .file {
  263. width: 9vw;
  264. height: 9vw;
  265. }
  266. }
  267. .list_1 {
  268. display: flex;
  269. flex-direction: column;
  270. flex-grow: 1;
  271. padding: 2vw 0;
  272. width: 35vw;
  273. .name {
  274. font-size: var(--font16Size);
  275. margin: 0 0 1vw 0;
  276. }
  277. .some {
  278. color: var(--f85Color);
  279. font-size: var(--font14Size);
  280. margin: 0 0 1vw 0;
  281. text:last-child {
  282. margin: 0 0 0 1vw;
  283. color: var(--f00Color);
  284. }
  285. }
  286. }
  287. .other {
  288. .btn {
  289. display: flex;
  290. flex-direction: column;
  291. align-items: center;
  292. margin: 0 2vw;
  293. padding: 2vw 3vw;
  294. background-color: var(--ff0Color);
  295. color: var(--fffColor);
  296. border-radius: 2vw;
  297. font-size: var(--font14Size);
  298. text {
  299. font-size: var(--font12Size);
  300. }
  301. }
  302. .button {
  303. margin: 0 2vw;
  304. padding: 2vw 3vw;
  305. background-color: var(--fcColor);
  306. color: var(--f00Color);
  307. border-radius: 2vw;
  308. font-size: var(--font14Size);
  309. }
  310. }
  311. }
  312. }
  313. }
  314. }
  315. .scroll-view {
  316. position: absolute;
  317. top: 0;
  318. left: 0;
  319. right: 0;
  320. bottom: 0;
  321. .list-scroll-view {
  322. display: flex;
  323. flex-direction: column;
  324. }
  325. }
  326. </style>