user.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <template>
  2. <!-- <view class="content">
  3. <view class="btn-row">
  4. <button type="default" @tap="bindLogout">退出登录</button>
  5. </view>
  6. </view> -->
  7. <view class="page-fill">
  8. <view class="header">
  9. <image src="../../static/icons/CpoxxFw_-5-AFyVyAABLIH8xBTw233.png" class="face"></image>
  10. <view class="info-wapper">
  11. <view class="nickname">
  12. 用户名:{{name}}
  13. </view>
  14. </view>
  15. <view>
  16. <button type="default" @tap="bindLogout" class="settings">退出</button>
  17. </view>
  18. </view>
  19. <view v-if="show">
  20. <view v-for="(list,index) in listName" :key="index" class="body">
  21. <view class="input-two">
  22. <input :id=list.id type="text" class="input" @focus="setStyle()" @blur="setStyle2()" :value=list.name @input="getValue" />
  23. <p id="p2" class="p2" :style="{display:showOrNo}">如:广东省广州市xx广场301型x号机</p>
  24. </view>
  25. <view class="">
  26. <button type="primary" @click="updata()" class="button">
  27. <p class="p">更改</p>
  28. </button>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. import {
  36. mapState,
  37. mapMutations
  38. } from 'vuex'
  39. export default {
  40. data() {
  41. return {
  42. name: '',
  43. show: false,
  44. listName: [],
  45. value: null,
  46. id: null,
  47. showOrNo: null
  48. };
  49. },
  50. onPullDownRefresh() {
  51. setTimeout(function() {
  52. uni.stopPullDownRefresh();
  53. }, 800);
  54. },
  55. onShow() {
  56. uni.startPullDownRefresh();
  57. var me = this;
  58. var name = uni.getStorageSync("name");
  59. me.name = name;
  60. var listName = uni.getStorageSync("listName");
  61. me.listName = listName;
  62. var adminId = listName[0].adminId;
  63. if (adminId != '1' && adminId != null) {
  64. me.show = true;
  65. }
  66. },
  67. onLoad() {
  68. },
  69. computed: {},
  70. methods: {
  71. bindLogout() {
  72. uni.reLaunch({
  73. url: '/pages/Login/Login',
  74. });
  75. },
  76. setStyle() {
  77. this.showOrNo = "block";
  78. },
  79. setStyle2() {
  80. this.showOrNo = "none";
  81. },
  82. updata() {
  83. var id = this.id;
  84. var value = this.value;
  85. if (value != null && value != '') {
  86. uni.request({
  87. url: 'http://127.0.0.1:8090/TEquipment/updateName',
  88. data: {
  89. id: id,
  90. name: value
  91. },
  92. dataType: 'json',
  93. method: "POST",
  94. success: (res) => {
  95. debugger;
  96. uni.showModal({
  97. title: '提示',
  98. content: '名称:' + value + res.data.message,
  99. });
  100. }
  101. });
  102. }
  103. },
  104. getValue: function(event) {
  105. // 绕过v-model 获取input输入框的值
  106. var value = event.target.value;
  107. var id = event.target.id;
  108. this.value = value;
  109. this.id = id;
  110. }
  111. }
  112. }
  113. </script>
  114. <style>
  115. .page-fill {
  116. width: 100%;
  117. height: 100%;
  118. }
  119. .header {
  120. padding: 60upx 30upx 40upx 30upx;
  121. background-color: #ffd655;
  122. background: url(../../static/icons/CpoxxFwu_1OAYFAIAAAzO_Q1tPg693.png) repeat;
  123. display: flex;
  124. flex-direction: row;
  125. justify-content: flex-start;
  126. }
  127. .face {
  128. width: 120upx;
  129. height: 120upx;
  130. border-radius: 50%;
  131. flex-shrink: 0;
  132. }
  133. .info-wapper {
  134. width: 60%;
  135. margin-left: 40upx;
  136. display: flex;
  137. flex-direction: column;
  138. }
  139. .nickname {
  140. color: #6a5018;
  141. font-size: 12px;
  142. font-weight: bold;
  143. padding: 30upx 0upx 0upx 0upx;
  144. }
  145. .set-wapper {
  146. display: flex;
  147. flex-direction: row;
  148. justify-content: flex-end;
  149. width: 15%;
  150. }
  151. .settings {
  152. width: 160upx;
  153. height: 110upx;
  154. }
  155. .button {
  156. padding: 10upx 10upx 10upx 0upx;
  157. width: 80upx;
  158. height: 60upx;
  159. }
  160. .input {
  161. padding: 10upx 10upx 10upx 0upx;
  162. background-color: #EEEEEE;
  163. width: 550upx;
  164. height: 50upx;
  165. }
  166. .body {
  167. background-color: #D9D9D9;
  168. padding: 10upx 10upx 10upx 10upx;
  169. display: flex;
  170. flex-direction: row;
  171. justify-content: flex-start;
  172. }
  173. .input-two {
  174. width: 600upx;
  175. height: 100upx;
  176. }
  177. .p {
  178. width: 80upx;
  179. height: 50upx;
  180. }
  181. .p2 {
  182. color: #DD524D;
  183. display: none;
  184. width: 600upx;
  185. height: 50upx;
  186. border: 1px;
  187. }
  188. </style>