receive.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <view class="container">
  3. <view class="uni-padding-wrap uni-common-mt">
  4. <uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
  5. </view>
  6. <view v-if="current == 0">
  7. <uni-card class="addUser">
  8. <uni-list :border="false">
  9. <uni-list-item :showExtraIcon="true" :extra-icon="extraIcon" title="添加成员" clickable @click="onClick"></uni-list-item>
  10. </uni-list>
  11. </uni-card>
  12. <uni-list :border="true">
  13. <view :id="item && item.residentId" class="delBox" @touchstart="touchStart" @touchend="touchEnd" v-for="(item, index) in list" :key="index" >
  14. <uni-list-chat :class="{ left: isId == item.residentId }" class="item" :avatar="item.avatar || '/static/user1.png'" :title="item.name" :note="item.phone" badge-positon="left">
  15. </uni-list-chat>
  16. <uni-icons @click="userbtn(item)" color="#fff" class="del compose" type="compose" size="28"></uni-icons>
  17. <uni-icons :class="{ left: isId !== item.residentId }" @click="delbtn(item)" color="#fff" class="del" type="trash-filled" size="28"></uni-icons>
  18. </view>
  19. </uni-list>
  20. </view>
  21. <!-- 居民审核信息 -->
  22. <view v-if="current == 1">
  23. <uni-list :border="true">
  24. <view :id="item && item.residentReqId" class="delBox" v-for="(item, index) in list" :key="index" >
  25. <uni-list-chat :class="{ left: isId == item.residentReqId }" class="item" :avatar="item.avatar || '/static/user1.png'" :title="item.name" :note="item.phone" badge-positon="left">
  26. <uni-tag v-if="item.reqStatus == 0" :text="item.reqStatusText" :circle="true" type="primary" />
  27. <uni-tag v-if="item.reqStatus == 1" :text="item.reqStatusText" :circle="true" type="success" />
  28. <uni-tag v-if="item.reqStatus == 2" :text="item.reqStatusText" :circle="true" type="error" />
  29. <text class="chat-custom-text" v-if="item.rejectReason !== null">{{ item.rejectReason }}</text>
  30. </uni-list-chat>
  31. </view>
  32. </uni-list>
  33. </view>
  34. </view>
  35. </template>
  36. <script>
  37. import requestFamily from '../../api/family.js';
  38. export default {
  39. data() {
  40. return {
  41. isId: '',
  42. startX: 0,
  43. extraIcon: {
  44. color: '#ff8319',
  45. size: '20',
  46. type: 'plusempty'
  47. },
  48. list: [],
  49. natTaskId: '',
  50. membersStatus: [],
  51. // 选项卡参数
  52. items: ['成员信息', '成员审核状态'],
  53. activeColor: '#dd524d',
  54. styleType: 'text',
  55. current: 0
  56. }
  57. },
  58. async mounted() {
  59. this.query();
  60. },
  61. onShow() {
  62. this.isId = '';
  63. },
  64. methods: {
  65. // 标签页点击
  66. async onClickItem(e) {
  67. if (this.current !== e.currentIndex) {
  68. this.current = e.currentIndex
  69. }
  70. if (e.currentIndex == 1) {
  71. const res = await requestFamily.getApplyUser();
  72. this.list = res.data.map(e => {
  73. if (e.reqStatus == 0) e.reqStatusText = '审核中';
  74. if (e.reqStatus == 1) e.reqStatusText = '已通过';
  75. if (e.reqStatus == 2) e.reqStatusText = '已拒绝';
  76. return e;
  77. });
  78. return;
  79. }
  80. this.query();
  81. },
  82. async query() {
  83. const familyInfo = await requestFamily.getFamilyInfo();
  84. if (familyInfo.code == 200) {
  85. this.list = familyInfo.rows;
  86. }
  87. },
  88. // 滑动开始
  89. touchStart(e) {
  90. console.log(e)
  91. if (e.touches.length == 1) {
  92. //设置触摸起始点水平方向位置
  93. this.startX=e.touches[0].clientX;
  94. }
  95. },
  96. // 滑动结束
  97. touchEnd(e) {
  98. if (e.changedTouches.length == 1) {
  99. //手指移动结束后水平位置
  100. var endX = e.changedTouches[0].clientX;
  101. let diff = endX - this.startX;
  102. if(Math.abs(diff) > 20){
  103. if(diff < 0) {
  104. this.isId = e.currentTarget.id;
  105. }else{
  106. this.isId = '';
  107. }
  108. }
  109. }
  110. },
  111. // 删除
  112. async delbtn(e) {
  113. const res = await requestFamily.familyInfo({ ...e, reqType: '2' });
  114. if (res.code == 200) {
  115. this.isId = '';
  116. uni.showToast({
  117. title: '已提交审核',
  118. duration: 2000,
  119. });
  120. }
  121. },
  122. // 添加
  123. onClick() {
  124. uni.navigateTo({
  125. url: '/pages/user/familyInfo'
  126. })
  127. },
  128. // 修改
  129. userbtn(e) {
  130. uni.navigateTo({
  131. url: `/pages/user/familyInfo?residentId=${e.residentId}`
  132. })
  133. }
  134. }
  135. }
  136. </script>
  137. <style>
  138. .container {
  139. width: 100%;
  140. }
  141. .addUser {
  142. display: block;
  143. /* width: 90%; */
  144. margin: 5px auto;
  145. }
  146. .chat-custom-text {
  147. font-size: 12px;
  148. color: #999;
  149. width: 100%;
  150. text-align: center;
  151. display: block;
  152. }
  153. .addUser .uni-list-item__container {
  154. flex: none;
  155. margin: 0 auto;
  156. }
  157. .addUser .uni-list-item__content-title {
  158. color: #ff8319;
  159. }
  160. .delBox {
  161. display: flex;
  162. width: 100%;
  163. overflow: hidden;
  164. }
  165. .item {
  166. width: 100%;
  167. }
  168. .del {
  169. display: block;
  170. width: 50px;
  171. background: red;
  172. }
  173. .right {
  174. margin-right: -100px;
  175. }
  176. .uni-icons {
  177. display: block;
  178. width: 100%;
  179. text-align: center;
  180. line-height: 2.3em;
  181. }
  182. .left {
  183. margin-left: -100px;
  184. }
  185. .compose {
  186. background: #1aad19;
  187. }
  188. </style>