shareUser.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. <template>
  2. <view class="flex-col justify-start page">
  3. <cu-custom isBack="true" bgColor="#000000"><view slot="content" style="color: #FFFFFF">UU睡眠</view></cu-custom>
  4. <view class="flex-col justify-start section">
  5. <view class="flex-col section_2 space-y-421">
  6. <view class="flex-col">
  7. <text class="self-start font_1 text_2">共享用户</text>
  8. <view class="flex-col group_3 space-y-10">
  9. <view class="flex-row justify-between items-center section_6" v-for="(item, index) in tableData" :key="index">
  10. <view class="flex-row">
  11. <image v-if="item.face === null || item.face === ''" class="image_6" src="http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/7F70B5FF967F44BC97BD7CD8786A70B4.png"/>
  12. <image v-else class="image_6" :src="item.face"/>
  13. <view class="flex-col items-start group_4 space-y-10">
  14. <text class="font_1 text_3">{{ item.nickname }}</text>
  15. <text class="text_5">{{ item.mobile }}</text>
  16. <text class="text_6 text_7">{{ formatTime(item.create_time) }}</text>
  17. </view>
  18. </view>
  19. <view class="flex-col justify-start items-center text-wrapper" @click="deleteById(item.id)"><text class="text_4">删除</text></view>
  20. </view>
  21. <view class="flex-row justify-center items-center section_7 space-x-10" @click="modalName ='DialogModal'">
  22. <image class="image_7" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874414496441492308.png"/>
  23. <text class="text_8">添加用户</text>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="flex-row justify-center items-center relative group_5">
  28. <view class="flex-col justify-start items-center button"><text class="font_2" @click="back">完成</text></view>
  29. <!-- <text class="font_2 text_6 pos_2">跳过</text>-->
  30. </view>
  31. </view>
  32. </view>
  33. <view class="cu-modal" :class="modalName ==='DialogModal'?'show':''">
  34. <view class="cu-dialog">
  35. <view class="cu-bar bg-white justify-end">
  36. <view style="color: black" class="content">共享用户</view>
  37. <view class="action" @tap="hideModal">
  38. <text class="cuIcon-close text-red"></text>
  39. </view>
  40. </view>
  41. <view class="padding-xl">
  42. <input v-model="searchPhone" placeholder="请输入对方手机号" name="input" />
  43. </view>
  44. <view class="cu-bar bg-white justify-end">
  45. <view class="action">
  46. <button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
  47. <button class="cu-btn bg-green margin-left" @tap="addLook">申请查看</button>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </template>
  54. <script>
  55. import Storage from '@/utils/storage'
  56. import { unixToDate } from '@/ui-utils/Foundation'
  57. import * as API_vitalSignsLook from '@/api/vitalSignsLook'
  58. import {addByMobile} from "../../api/vitalSignsLook";
  59. export default {
  60. data() {
  61. return {
  62. page_size: 20,
  63. page_no: 1,
  64. tableData: [],
  65. finishedLoad: false,
  66. uid: '',
  67. modalName: false,
  68. searchPhone: ''
  69. }
  70. },
  71. onShow() {
  72. this.uid = Storage.getItem('uid')
  73. if (this.uid) {
  74. this.sx()
  75. }
  76. },
  77. onPullDownRefresh() {
  78. this.sx()
  79. },
  80. onReachBottom() {
  81. if (!this.finishedLoad) {
  82. this.page_no += 1;
  83. this.GET_MemberList()
  84. }
  85. },
  86. methods: {
  87. sx() {
  88. this.page_no = 1
  89. this.finishedLoad = false
  90. this.tableData = []
  91. this.GET_MemberList()
  92. },
  93. /** 加载用户列表 */
  94. GET_MemberList() {
  95. const params = {
  96. page_no: this.page_no,
  97. page_size: this.page_size,
  98. }
  99. params.fixedCondition = ' ccll.status=1 and ccll.friend_id=' + this.uid + ' and ccll.member_id = em.member_id'
  100. let _this = this
  101. API_vitalSignsLook.getList(params).then(res => {
  102. console.log('res====', res)
  103. if (res.data.length > 0) {
  104. _this.tableData.push(...res.data);
  105. } else {
  106. _this.finishedLoad = true;
  107. }
  108. }).catch(() => {
  109. _this.loading = false
  110. })
  111. },
  112. back() {
  113. uni.navigateBack()
  114. },
  115. formatTime(value) {
  116. return unixToDate(value, '')
  117. },
  118. deleteById(id) {
  119. let _this = this
  120. uni.showModal({
  121. title: '警告',
  122. content: '删除操作后数据不可复原,您确定要删除此数据?',
  123. success: function (res) {
  124. if (res.confirm) {
  125. API_vitalSignsLook.deleteLogLook(id).then(
  126. res => {
  127. _this.sx()
  128. uni.showToast({
  129. title: '已删除!'
  130. })
  131. }
  132. )
  133. }
  134. }
  135. })
  136. },
  137. hideModal(e) {
  138. this.modalName = null
  139. },
  140. addLook() {
  141. if (this.searchPhone === '') {
  142. uni.showModal({
  143. content: '请输入对方手机号',
  144. showCancel: false
  145. })
  146. return
  147. }
  148. let params = {
  149. friend_id: this.uid,
  150. type: 0,
  151. add_member_id: this.uid,
  152. status: 1,
  153. phone: this.searchPhone
  154. }
  155. const _this = this
  156. API_vitalSignsLook.addByMobile(params).then(res => {
  157. if (!res.success) {
  158. uni.showModal({
  159. content: res.message,
  160. showCancel: false
  161. })
  162. } else {
  163. uni.showToast({
  164. title: '操作成功',
  165. icon: 'none'
  166. })
  167. _this.modalName = null
  168. _this.searchPhone = ''
  169. _this.sx()
  170. }
  171. })
  172. }
  173. }
  174. }
  175. </script>
  176. <style lang="scss" scoped>
  177. .page {
  178. background-color: #000000;
  179. width: 100%;
  180. overflow-y: auto;
  181. overflow-x: hidden;
  182. height: 100%;
  183. .section {
  184. // background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/2E8800F59CE14717A09884B811B3C608.png");
  185. background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/3C62AD507C8345D49AEB2AAD8F7584BB.png");
  186. background-size: cover;
  187. background-repeat: no-repeat;
  188. height: 100%;
  189. .section_2 {
  190. background-image: linear-gradient(180deg, #1e1ef7e3 0%, #1dbff59c 100%);
  191. height: 100%;
  192. .section_3 {
  193. padding: 1.13rem 0.44rem 0.38rem;
  194. background-color: #ffffff4d;
  195. .group {
  196. padding: 0 0.5rem;
  197. .image {
  198. width: 1.06rem;
  199. height: 0.69rem;
  200. }
  201. .image_2 {
  202. width: 0.94rem;
  203. height: 0.69rem;
  204. }
  205. .image_3 {
  206. width: 1.5rem;
  207. height: 0.72rem;
  208. }
  209. }
  210. .space-x-6-reverse {
  211. & > view:not(:last-child),
  212. & > text:not(:last-child),
  213. & > image:not(:last-child) {
  214. margin-right: 0.38rem;
  215. }
  216. }
  217. .group_2 {
  218. padding: 0.63rem 0 0.38rem;
  219. .text {
  220. font-size: 1.16rem;
  221. }
  222. .section_4 {
  223. padding: 0.38rem 0.75rem;
  224. background-color: #ffffff99;
  225. border-radius: 1rem;
  226. border: solid 0.031rem #00000014;
  227. .image-wrapper {
  228. width: 1.19rem;
  229. .image_5 {
  230. width: 1.19rem;
  231. height: 0.44rem;
  232. }
  233. .image_4 {
  234. width: 1.13rem;
  235. height: 1.06rem;
  236. }
  237. }
  238. .section_5 {
  239. background-color: #00000033;
  240. width: 0.063rem;
  241. height: 1.16rem;
  242. }
  243. }
  244. .space-x-11 {
  245. & > view:not(:first-child),
  246. & > text:not(:first-child),
  247. & > image:not(:first-child) {
  248. margin-left: 0.69rem;
  249. }
  250. }
  251. .pos {
  252. position: absolute;
  253. right: 0;
  254. top: 50%;
  255. transform: translateY(-50%);
  256. }
  257. }
  258. }
  259. .space-y-22 {
  260. & > view:not(:first-child),
  261. & > text:not(:first-child),
  262. & > image:not(:first-child) {
  263. margin-top: 1.38rem;
  264. }
  265. }
  266. .font_1 {
  267. font-size: 1.13rem;
  268. font-family: PingFangSC;
  269. line-height: 1.06rem;
  270. color: #ffffff;
  271. }
  272. .text_2 {
  273. margin-left: 1.25rem;
  274. margin-top: 1.38rem;
  275. }
  276. .group_3 {
  277. margin-top: 0.88rem;
  278. padding: 0 1.25rem;
  279. .section_6 {
  280. padding: 0.94rem 0 0.94rem 0.94rem;
  281. background-color: #ffffff33;
  282. border-radius: 1rem;
  283. .image_6 {
  284. border-radius: 50%;
  285. width: 4rem;
  286. height: 4rem;
  287. }
  288. .group_4 {
  289. margin: 0.25rem 0 0.25rem 1.25rem;
  290. .text_3 {
  291. line-height: 1.03rem;
  292. }
  293. .text_5 {
  294. color: #ffffff;
  295. font-size: 0.88rem;
  296. font-family: PingFangSC;
  297. line-height: 0.63rem;
  298. }
  299. .text_7 {
  300. color: #ffffff;
  301. font-size: 0.63rem;
  302. font-family: PingFangSC;
  303. line-height: 0.47rem;
  304. }
  305. }
  306. .text-wrapper {
  307. padding: 0.25rem 0;
  308. background-image: linear-gradient(90deg, #2c3ff2 0%, #1e09de 100%);
  309. border-radius: 6.25rem 0px 0px 6.25rem;
  310. width: 2.75rem;
  311. height: 1.25rem;
  312. .text_4 {
  313. color: #ffffff;
  314. font-size: 0.75rem;
  315. font-family: PingFangSC;
  316. line-height: 0.69rem;
  317. }
  318. }
  319. }
  320. .section_7 {
  321. padding: 2.13rem 0;
  322. background-color: #ffffff33;
  323. border-radius: 1rem;
  324. .image_7 {
  325. width: 1.5rem;
  326. height: 1.5rem;
  327. }
  328. .text_8 {
  329. color: #ffffff;
  330. font-size: 1.5rem;
  331. font-family: PingFangSC;
  332. line-height: 1.41rem;
  333. }
  334. }
  335. .space-x-10 {
  336. & > view:not(:first-child),
  337. & > text:not(:first-child),
  338. & > image:not(:first-child) {
  339. margin-left: 0.63rem;
  340. }
  341. }
  342. }
  343. .space-y-10 {
  344. & > view:not(:first-child),
  345. & > text:not(:first-child),
  346. & > image:not(:first-child) {
  347. margin-top: 0.63rem;
  348. }
  349. }
  350. .group_5 {
  351. padding: 0 1.75rem;
  352. .button {
  353. padding: 0.5rem 0;
  354. background-image: linear-gradient(90deg, #5611f780 0%, #2c3ff7 100%);
  355. border-radius: 1rem;
  356. width: 8.69rem;
  357. }
  358. .font_2 {
  359. font-size: 1rem;
  360. font-family: PingFangSC;
  361. line-height: 0.94rem;
  362. color: #ffffff;
  363. }
  364. .pos_2 {
  365. position: absolute;
  366. right: 1.78rem;
  367. top: 50%;
  368. transform: translateY(-50%);
  369. }
  370. }
  371. .text_6 {
  372. opacity: 0.5;
  373. }
  374. }
  375. .space-y-421 {
  376. & > view:not(:first-child),
  377. & > text:not(:first-child),
  378. & > image:not(:first-child) {
  379. margin-top: 5rem;
  380. }
  381. }
  382. }
  383. }
  384. </style>