平安校园
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

265 regels
5.2 KiB

  1. <template>
  2. <view style="padding: 0 30rpx;">
  3. <view class="header">
  4. <view style="padding-top: 44rpx;" class="headerContent">
  5. <u-avatar src="/static/image/test/test.png" size="180rpx"></u-avatar>
  6. <view class="right">
  7. <view class="name">
  8. 张云
  9. </view>
  10. <view class="des">
  11. <image src="/static/image/school.png" mode=""></image>
  12. 山西科技大学 | 校长
  13. </view>
  14. </view>
  15. </view>
  16. </view>
  17. <view class="whiteCard">
  18. <view class="title">
  19. 个人信息
  20. </view>
  21. <u-cell title="账号" :titleStyle="{fontSize:'28rpx',color:'#333'}" :border="false">
  22. <view slot="value" class="valueBox disabled">
  23. 543asd25a1
  24. </view>
  25. </u-cell>
  26. <u-cell title="姓名" :titleStyle="{fontSize:'28rpx',color:'#333'}" :border="false" isLink
  27. @click="cellClick('修改姓名')">
  28. <view slot="value" class="valueBox">
  29. 杨云
  30. </view>
  31. </u-cell>
  32. <u-cell title="手机" :titleStyle="{fontSize:'28rpx',color:'#333'}" :border="false" isLink
  33. @click="cellClick('修改手机号')">
  34. <view slot="value" class="valueBox">
  35. 18633460001
  36. </view>
  37. </u-cell>
  38. <u-cell title="昵称" :titleStyle="{fontSize:'28rpx',color:'#333'}" :border="false" isLink
  39. @click="cellClick('设置昵称')">
  40. <view slot="value" class="valueBox">
  41. 未设置
  42. </view>
  43. </u-cell>
  44. <picker mode="date" :value="date" @change="dateChange">
  45. <u-cell title="出生日期" :titleStyle="{fontSize:'28rpx',color:'#333'}" :border="false" isLink>
  46. <view slot="value" class="valueBox">
  47. {{date}}
  48. </view>
  49. </u-cell>
  50. </picker>
  51. </view>
  52. <view class="btn" @click="loginOut">
  53. 退出登录
  54. </view>
  55. <u-popup :show="show" mode="center" :round="10">
  56. <view class="popupInfo">
  57. <view class="title">
  58. {{this.action}}
  59. </view>
  60. <u--input v-model="inputValue" placeholder="请输入" border="surround" clearable></u--input>
  61. <view class="bottom">
  62. <view class="cancel" @click="cancel">
  63. 取消
  64. </view>
  65. <view class="confirm" @click="confirm">
  66. 确定
  67. </view>
  68. </view>
  69. </view>
  70. </u-popup>
  71. </view>
  72. </template>
  73. <script>
  74. export default {
  75. data() {
  76. return {
  77. show: false,
  78. action: '',
  79. inputValue: '',
  80. date: '1990-06-15',
  81. }
  82. },
  83. mounted() {},
  84. methods: {
  85. cellClick(action) {
  86. this.action = action
  87. this.inputValue = ''
  88. this.show = true
  89. },
  90. confirm() {
  91. switch (this.action) {
  92. case '修改姓名':
  93. if (!this.inputValue) {
  94. this.TOAST('请输入姓名')
  95. return
  96. }
  97. break
  98. case '修改手机号':
  99. if (!this.inputValue) {
  100. this.TOAST('请输入手机号')
  101. return
  102. }
  103. if (!
  104. /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
  105. .test(this.inputValue)) {
  106. this.TOAST('请输入正确的手机号')
  107. return
  108. }
  109. break
  110. case '设置昵称':
  111. if (!this.inputValue) {
  112. this.TOAST('请输入昵称')
  113. return
  114. }
  115. break
  116. }
  117. },
  118. cancel() {
  119. this.show = false
  120. },
  121. dateChange(e) {
  122. this.date = e.detail.value
  123. },
  124. loginOut() {
  125. this.CONFIRM('您是否确认退出登录?')
  126. }
  127. }
  128. }
  129. </script>
  130. <style scoped lang="scss">
  131. uni-page-body {
  132. background-image: url('/static/image/mybg.png');
  133. background-position: top;
  134. background-size: 100% auto;
  135. background-repeat: no-repeat;
  136. }
  137. .header {
  138. padding-top: 88rpx;
  139. color: #333;
  140. .headerContent {
  141. display: flex;
  142. }
  143. .right {
  144. flex: 1;
  145. padding-top: 24rpx;
  146. padding-left: 36rpx;
  147. .name {
  148. font-size: 46rpx;
  149. font-weight: 700;
  150. }
  151. .des {
  152. display: flex;
  153. font-size: 28rpx;
  154. margin-top: 30rpx;
  155. uni-image {
  156. width: 34rpx;
  157. height: 34rpx;
  158. margin-right: 12rpx;
  159. }
  160. }
  161. }
  162. }
  163. .whiteCard {
  164. background-color: #fff;
  165. border-radius: 20rpx;
  166. margin-top: 50rpx;
  167. // padding: 0 30rpx;
  168. .title {
  169. font-weight: 700;
  170. color: #2388FF;
  171. font-size: 42rpx;
  172. padding: 50rpx 30rpx 30rpx;
  173. }
  174. }
  175. .u-cell {
  176. height: 90rpx;
  177. position: relative;
  178. &:not(&:last-child)::after {
  179. content: '';
  180. display: block;
  181. position: absolute;
  182. height: 1rpx;
  183. background-color: rgba(0, 0, 0, 0.1);
  184. width: calc(100% - 60rpx);
  185. left: 30rpx;
  186. bottom: 0rpx;
  187. }
  188. .valueBox {
  189. color: #333;
  190. font-size: 30rpx;
  191. font-weight: 700;
  192. &.disabled {
  193. font-weight: unset;
  194. }
  195. }
  196. }
  197. .btn {
  198. height: 98rpx;
  199. background-color: #fff;
  200. line-height: 98rpx;
  201. border-radius: 20rpx;
  202. text-align: center;
  203. color: #333;
  204. margin-top: 30rpx;
  205. font-size: 32rpx;
  206. }
  207. .popupInfo {
  208. padding: 30rpx 30rpx 0rpx;
  209. width: 540rpx;
  210. box-sizing: border-box;
  211. .title {
  212. font-size: 34rpx;
  213. font-weight: 700;
  214. text-align: center;
  215. margin-bottom: 30rpx;
  216. margin-top: 16rpx;
  217. }
  218. .bottom {
  219. margin-top: 30rpx;
  220. display: flex;
  221. line-height: 88rpx;
  222. border-top: 1rpx solid rgba(0, 0, 0, 0.1);
  223. margin-left: -30rpx;
  224. margin-right: -30rpx;
  225. position: relative;
  226. &::after {
  227. content: '';
  228. background-color: rgba(0, 0, 0, 0.1);
  229. display: block;
  230. position: absolute;
  231. width: 1rpx;
  232. height: 100%;
  233. left: 50%;
  234. top: 0;
  235. }
  236. &>* {
  237. width: 50%;
  238. text-align: center;
  239. color: #165DFF;
  240. font-weight: 32rpx;
  241. }
  242. }
  243. }
  244. </style>