平安校园
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 
 
 

277 строки
5.5 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" :customStyle="{height: '84rpx',boxSizing:'border-box'}" 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. /* #ifdef H5*/
  133. background-image: url('/static/image/mybgh5.png');
  134. /* #endif */
  135. /* #ifndef H5*/
  136. background-image: url('/static/image/mybg.png');
  137. /* #endif */
  138. background-position: top;
  139. background-size: 100% auto;
  140. background-repeat: no-repeat;
  141. }
  142. .header {
  143. /* #ifdef H5*/
  144. padding-top: 40rpx;
  145. /* #endif */
  146. /* #ifndef H5*/
  147. padding-top: 88rpx;
  148. /* #endif */
  149. color: #333;
  150. .headerContent {
  151. display: flex;
  152. }
  153. .right {
  154. flex: 1;
  155. padding-top: 24rpx;
  156. padding-left: 36rpx;
  157. .name {
  158. font-size: 46rpx;
  159. font-weight: 700;
  160. }
  161. .des {
  162. display: flex;
  163. font-size: 28rpx;
  164. margin-top: 30rpx;
  165. uni-image {
  166. width: 34rpx;
  167. height: 34rpx;
  168. margin-right: 12rpx;
  169. }
  170. }
  171. }
  172. }
  173. .whiteCard {
  174. background-color: #fff;
  175. border-radius: 20rpx;
  176. margin-top: 50rpx;
  177. // padding: 0 30rpx;
  178. .title {
  179. font-family: 'Alimama ShuHeiTi';
  180. font-weight: 700;
  181. color: #2388FF;
  182. font-size: 42rpx;
  183. line-height: 42rpx;
  184. padding: 60rpx 30rpx 30rpx;
  185. }
  186. }
  187. .u-cell {
  188. height: 90rpx;
  189. position: relative;
  190. &:not(&:last-child)::after {
  191. content: '';
  192. display: block;
  193. position: absolute;
  194. height: 1rpx;
  195. background-color: rgba(0, 0, 0, 0.1);
  196. width: calc(100% - 60rpx);
  197. left: 30rpx;
  198. bottom: 0rpx;
  199. }
  200. .valueBox {
  201. color: #333;
  202. font-size: 30rpx;
  203. font-weight: 700;
  204. &.disabled {
  205. font-weight: unset;
  206. }
  207. }
  208. }
  209. .btn {
  210. height: 98rpx;
  211. background-color: #fff;
  212. line-height: 98rpx;
  213. border-radius: 20rpx;
  214. text-align: center;
  215. color: #333;
  216. margin-top: 30rpx;
  217. font-size: 32rpx;
  218. }
  219. .popupInfo {
  220. padding: 30rpx 30rpx 0rpx;
  221. width: 540rpx;
  222. box-sizing: border-box;
  223. .title {
  224. font-size: 34rpx;
  225. font-weight: 700;
  226. text-align: center;
  227. margin-bottom: 30rpx;
  228. margin-top: 16rpx;
  229. }
  230. .bottom {
  231. margin-top: 30rpx;
  232. display: flex;
  233. line-height: 88rpx;
  234. border-top: 1rpx solid rgba(0, 0, 0, 0.1);
  235. margin-left: -30rpx;
  236. margin-right: -30rpx;
  237. position: relative;
  238. &::after {
  239. content: '';
  240. background-color: rgba(0, 0, 0, 0.1);
  241. display: block;
  242. position: absolute;
  243. width: 1rpx;
  244. height: 100%;
  245. left: 50%;
  246. top: 0;
  247. }
  248. &>* {
  249. width: 50%;
  250. text-align: center;
  251. color: #165DFF;
  252. font-weight: 32rpx;
  253. }
  254. }
  255. }
  256. </style>