index.vue 7.3 KB

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