index.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. <template>
  2. <view class="group_info">
  3. <!-- #ifdef H5 -->
  4. <view class="top_bg"></view>
  5. <view class="header_card acea-row row-middle">
  6. <view class="pic">
  7. <text class="iconfont icon-qunliao"></text>
  8. </view>
  9. <view class="name">
  10. <view class="group_name">{{chatInfo.name}}</view>
  11. <view class="desc">创建时间:{{chatInfo.group_create_time}}</view>
  12. </view>
  13. </view>
  14. <view class="static acea-row row-around row-middle">
  15. <view class="item">
  16. <view class="num">{{chatInfo.member_num}}</view>
  17. <view class="title">当前群成员</view>
  18. </view>
  19. <view class="item v_line">
  20. <view class="num">{{chatInfo.todaySum}}</view>
  21. <view class="title">今日入群</view>
  22. </view>
  23. <view class="item v_line">
  24. <view class="num">{{chatInfo.retreat_group_num}}</view>
  25. <view class="title">累计退群</view>
  26. </view>
  27. </view>
  28. <view class="list">
  29. <view class="search">
  30. <input type="text" v-model="name"
  31. class="search" placeholder="点击搜索客户名称"
  32. placeholder-class="pla_name" @blur="search()">
  33. </view>
  34. <view class="item" v-for="(item,index) in userList" :key="index" @click="toInfo(item)">
  35. <view class="item-info acea-row row-between row-top" >
  36. <view class="pictrue">
  37. <image v-if="item.type == 1 && item.member" :src="item.member.avatar"></image>
  38. <image v-if="item.type == 2 && item.client" :src="item.client.avatar"></image>
  39. </view>
  40. <view class="conten">
  41. <view class="name line1" v-if="item.type == 1 && item.member">{{item.member.name}}
  42. <text class="iconfont" :class="item.member.gender == 1 ? 'icon-xingbie-nan' : 'icon-xingbie-nv'"></text>
  43. </view>
  44. <view class="name line1" v-if="item.type == 2 && item.client">{{item.client.name}}
  45. <text class="iconfont" :class="item.client.gender == 1 ? 'icon-xingbie-nan' : 'icon-xingbie-nv'"></text>
  46. </view>
  47. <text class="label" v-if="item.type == 1">{{item.userid == chatInfo.owner ? "群主" : "成员"}}</text>
  48. <text class="label" v-if="item.type == 2">客户</text>
  49. <text class="label_qita">其他所在群{{item.group_chat_num}}</text>
  50. </view>
  51. <view class="time">{{item.join_time}}</view>
  52. </view>
  53. <view class="desc line1" v-if="item.tags && item.tags.length">
  54. 标签:<text v-for="(item1,index1) in item.tags" :key="index1">{{item1}},</text>
  55. </view>
  56. <view class="desc line1" v-else>
  57. 标签:暂无
  58. </view>
  59. </view>
  60. <Loading :loaded="loaded" :loading="loading"></Loading>
  61. </view>
  62. <!-- #endif -->
  63. </view>
  64. </template>
  65. <script>
  66. // #ifdef H5
  67. import { initWxConfig,initAgentConfig } from "@/libs/work.js";
  68. import {getWorkGroupInfo,getWorkGroupMember} from "@/api/work.js"
  69. import Loading from '@/components/Loading/index.vue';
  70. // import {wx} from "@/utils/agent.js"
  71. export default{
  72. data() {
  73. return {
  74. // chat_id:"wrPuqMEwAARnzYsua0WJgATVYu4b3iUg",
  75. chat_id:"",
  76. chatInfo:{},
  77. loaded: false,
  78. loading: false, //是否加载中
  79. loadend: false, //是否加载完毕
  80. loadTitle: '加载更多', //提示语
  81. userList: [], //数组
  82. page: 1,
  83. limit: 20,
  84. name:"",
  85. }
  86. },
  87. components:{Loading},
  88. onLoad(e) {
  89. if(e.back){
  90. this.chat_id = this.$Cache.get('chatId');
  91. if(this.$Cache.get('chatId')){
  92. this.getInfo();
  93. }else{
  94. uni.navigateBack();
  95. return this.$util.Tips({
  96. title: "缺少参数"
  97. });
  98. }
  99. }else{
  100. initWxConfig().then((jWeixin) => {
  101. // initAgentConfig().then(res=>{
  102. this.getChatID();
  103. // })
  104. }).catch((err) => {
  105. return that.$util.Tips({
  106. title: err
  107. });
  108. });
  109. }
  110. // this.getInfo();
  111. },
  112. methods:{
  113. getChatID(){
  114. if (/(iPhone|iPad|iPod|iOS|macintosh|mac os x)/i.test(navigator.userAgent)){
  115. wx.invoke('getContext', {}, (res)=>{
  116. if(res.err_msg == "getContext:ok"){
  117. let entry = res.entry ;
  118. //返回进入H5页面的入口类型,
  119. //目前有normal、contact_profile、single_chat_tools、group_chat_tools、chat_attachment
  120. wx.invoke('getCurExternalChat', {entry}, (response)=>{
  121. if(response.err_msg == "getCurExternalChat:ok"){
  122. this.chat_id = response.chatId;
  123. this.getInfo();
  124. }
  125. });
  126. }
  127. });
  128. }else{
  129. jWeixin.invoke('getContext', {}, (res)=>{
  130. if(res.err_msg == "getContext:ok"){
  131. let entry = res.entry ;
  132. //返回进入H5页面的入口类型,
  133. //目前有normal、contact_profile、single_chat_tools、group_chat_tools、chat_attachment
  134. jWeixin.invoke('getCurExternalChat', {entry}, (response)=>{
  135. if(response.err_msg == "getCurExternalChat:ok"){
  136. this.chat_id = response.chatId;
  137. this.getInfo();
  138. }
  139. });
  140. }
  141. });
  142. }
  143. },
  144. getInfo(){
  145. getWorkGroupInfo({chat_id:this.chat_id}).then(res=>{
  146. this.chatInfo = res.data;
  147. this.getList();
  148. }).catch(err=>{
  149. return this.$util.Tips({
  150. title: err
  151. });
  152. })
  153. },
  154. getList(){
  155. let that = this;
  156. if (that.loadend) return;
  157. if (that.loading) return;
  158. that.loading = true;
  159. that.loadTitle = '加载更多';
  160. getWorkGroupMember(that.chatInfo.id,{
  161. page:this.page,
  162. limit:this.limit,
  163. name:this.name
  164. }).then(res=>{
  165. let list = res.data.list || [];
  166. let loadend = list.length < that.limit;
  167. that.userList = that.$util.SplitArray(list, that.userList);
  168. that.$set(that, 'userList', that.userList);
  169. that.loadend = loadend;
  170. that.loading = false;
  171. that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
  172. that.page = that.page + 1;
  173. }).catch(err=>{
  174. return that.$util.Tips({
  175. title: err
  176. });
  177. })
  178. },
  179. search(){
  180. if(this.loading) return
  181. this.loadend = false;
  182. this.page = 1;
  183. this.$set(this, 'userList', []);
  184. this.getList();
  185. },
  186. toInfo(item){
  187. if(item.type == 2){
  188. this.$Cache.set('chatId',this.chat_id);
  189. uni.navigateTo({
  190. url:"/pages/work/userInfo/index?userid=" + item.userid
  191. })
  192. }
  193. }
  194. },
  195. onReachBottom: function() {
  196. this.getList();
  197. }
  198. }
  199. // #endif
  200. </script>
  201. <style lang="scss">
  202. /* #ifdef H5 */
  203. .group_info{
  204. .top_bg{
  205. width: 750rpx;
  206. height: 150rpx;
  207. background: #1890FF;
  208. }
  209. .header_card{
  210. width: 710rpx;
  211. height: 168rpx;
  212. margin: -126rpx auto 0;
  213. background: #FFFFFF;
  214. border-radius: 12rpx;
  215. padding: 28rpx 24rpx;
  216. .pic{
  217. width: 112rpx;
  218. height: 112rpx;
  219. border-radius: 50%;
  220. background: #E1F1FF;
  221. text-align: center;
  222. line-height: 112rpx;
  223. .iconfont{
  224. font-size: 50rpx;
  225. color: #1890FF;
  226. }
  227. }
  228. .name{
  229. margin-left:20rpx;
  230. .group_name{
  231. height: 44rpx;
  232. font-size: 32rpx;
  233. font-weight: 500;
  234. color: rgba(0, 0, 0, 0.85);
  235. line-height: 44rpx;
  236. }
  237. .desc{
  238. height: 32rpx;
  239. font-size: 22rpx;
  240. font-weight: 400;
  241. color: rgba(102, 102, 102, 0.85);
  242. line-height: 32rpx;
  243. margin-top: 6rpx;
  244. }
  245. }
  246. }
  247. .static{
  248. width: 710rpx;
  249. height: 172rpx;
  250. background: #FFFFFF;
  251. border-radius: 12rpx;
  252. margin: 20rpx auto 0;
  253. .item{
  254. text-align: center;
  255. width: 33.3%;
  256. .num{
  257. height: 56rpx;
  258. font-size: 40rpx;
  259. font-family: PingFangSC-Medium, PingFang SC;
  260. font-weight: 500;
  261. color: rgba(0, 0, 0, 0.85);
  262. line-height: 56rpx;
  263. }
  264. .title{
  265. height: 32rpx;
  266. font-size: 22rpx;
  267. font-family: PingFangSC-Regular, PingFang SC;
  268. font-weight: 400;
  269. color: rgba(102, 102, 102, 0.85);
  270. line-height: 32rpx;
  271. margin-top: 12rpx;
  272. }
  273. }
  274. .v_line{
  275. position: relative;
  276. &::before{
  277. content: '';
  278. position: absolute;
  279. left: 0;
  280. top:23rpx;
  281. width: 1px;
  282. height: 80rpx;
  283. background-color: #eee;
  284. }
  285. }
  286. }
  287. .list{
  288. width: 710rpx;
  289. margin: 20rpx auto 0;
  290. background: #FFFFFF;
  291. border-radius: 12rpx;
  292. padding: 30rpx 24rpx;
  293. .search{
  294. width: 642rpx;
  295. height: 64rpx;
  296. margin:0 auto 0;
  297. line-height: 64rpx;
  298. background: #F5F6F9;
  299. border-radius: 32rpx;
  300. padding-left:20rpx ;
  301. font-size: 28rpx;
  302. }
  303. .pla_name{
  304. font-size: 28rpx;
  305. text-align: center;
  306. font-weight: 400;
  307. color: #CCCCCC;
  308. }
  309. .item {
  310. margin-top: 32rpx;
  311. padding-bottom: 28rpx;
  312. border-bottom: 1px solid #eee;
  313. }
  314. .item-info .pictrue {
  315. width: 100rpx;
  316. height: 100rpx;
  317. }
  318. .item-info .pictrue image {
  319. width: 100%;
  320. height: 100%;
  321. border-radius: 8rpx;
  322. }
  323. .conten{
  324. width: 296rpx;
  325. margin-left:22rpx;
  326. .name{
  327. height: 42rpx;
  328. font-size: 30rpx;
  329. font-weight: 600;
  330. color: #000;
  331. line-height: 42rpx;
  332. }
  333. .iconfont{
  334. font-size: 26rpx;
  335. font-weight: 400;
  336. display: inline-block;
  337. margin-left: 8rpx;
  338. }
  339. .icon-xingbie-nan{
  340. color: #1890FF;
  341. }
  342. .icon-xingbie-nv{
  343. color: #E369A2;
  344. }
  345. .label{
  346. display: inline-block;
  347. margin:10rpx 12rpx 0 0;
  348. height: 38rpx;
  349. padding: 0 12rpx 0;
  350. background: rgba(24, 144, 255, 0.1);
  351. border-radius: 4rpx;
  352. border: 1px solid #1890FF;
  353. // line-height: 44rpx;
  354. text-align: center;
  355. font-size: 24rpx;
  356. color: #1890FF;
  357. }
  358. .label_qita{
  359. display: inline-block;
  360. margin:10rpx 12rpx 0 0;
  361. height: 38rpx;
  362. padding: 0 12rpx 0;
  363. border-radius: 4rpx;
  364. border: 1rpx solid #ccc;
  365. // line-height: 44rpx;
  366. text-align: center;
  367. font-size: 24rpx;
  368. color: #999;
  369. }
  370. }
  371. .time{
  372. font-size: 24rpx;
  373. }
  374. .desc{
  375. width: 460rpx;
  376. height: 34rpx;
  377. font-size: 24rpx;
  378. font-family: PingFangSC-Regular, PingFang SC;
  379. font-weight: 400;
  380. color: rgba(0, 0, 0, 0.85);
  381. line-height: 34rpx;
  382. margin-top: 24rpx;
  383. }
  384. }
  385. }
  386. /* #endif */
  387. </style>