equipmentName.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <template>
  2. <view class="">
  3. <view class="xiugai">
  4. 修改设备名称
  5. </view>
  6. <view v-for="(list,index) in listName" :key="index" class="body">
  7. <view class="input-two">
  8. <input :id=list.id type="text" class="input" @focus="setStyle()" @blur="setStyle2()" :value=list.name @input="getValue" />
  9. <p id="p2" class="p2" :style="{display:showOrNo}">如:粤A张先生1</p>
  10. </view>
  11. <view class="button2">
  12. <button type="primary" @click="updata1()" class="button">
  13. <p class="p">更改</p>
  14. </button>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. import {
  21. mapState,
  22. mapActions,
  23. mapMutations
  24. } from 'vuex'
  25. export default {
  26. data() {
  27. return {
  28. name: '',
  29. show: false,
  30. listName: [],
  31. value: null,
  32. id: null,
  33. parm: {
  34. name: null,
  35. id: null
  36. },
  37. showOrNo: null,
  38. avatarUrl: null,
  39. weixinUp: false,
  40. weixinDown: true
  41. };
  42. },
  43. onPullDownRefresh() {
  44. setTimeout(function() {
  45. uni.stopPullDownRefresh();
  46. }, 800);
  47. },
  48. onShow() {
  49. // uni.startPullDownRefresh();
  50. var me = this;
  51. var name = uni.getStorageSync("name");
  52. me.name = name;
  53. var listName = uni.getStorageSync("listName");
  54. me.listName = listName;
  55. if (listName != '' && listName != null) {
  56. var adminId = listName[0].adminId;
  57. if (adminId != '1' && adminId != null) {
  58. me.show = true;
  59. }
  60. }
  61. var newparm = uni.getStorageSync("newparm");
  62. if (newparm.toString().length > 1) {
  63. if (newparm.avatarUrl.length > 1) {
  64. this.avatarUrl = newparm.avatarUrl;
  65. this.weixinUp = true;
  66. this.weixinDown = false;
  67. }
  68. }
  69. },
  70. onLoad() {
  71. },
  72. methods: {
  73. setStyle() {
  74. this.showOrNo = "block";
  75. },
  76. setStyle2() {
  77. this.showOrNo = "none";
  78. },
  79. getValue: function(event) {
  80. // 绕过v-model 获取input输入框的值
  81. var value = event.target.value;
  82. var id = event.target.id;
  83. this.value = value;
  84. this.id = id;
  85. this.parm.name = value;
  86. this.parm.id = id;
  87. },
  88. ...mapActions('chart', ['updata']),
  89. updata1() {
  90. if (this.parm.id != null) {
  91. this.updata(this.parm)
  92. .then(res => {
  93. uni.showModal({
  94. title: '提示',
  95. content: '名称:' + this.parm.name + res.message,
  96. });
  97. }, _ => void uni.stopPullDownRefresh());
  98. }
  99. }
  100. }
  101. }
  102. </script>
  103. <style>
  104. .settings {
  105. width: 100upx;
  106. height: 64upx;
  107. border-radius: 10upx;
  108. background: #D6101F;
  109. /* padding-right: 50upx; */
  110. /* padding-top: 5upx; */
  111. text-align: center;
  112. margin: 0 auto;
  113. }
  114. .p3 {
  115. /* #ifdef H5 */
  116. top: -13%;
  117. /* #endif */
  118. font-size: 32upx;
  119. color: #FFFFFF;
  120. font-weight: bold;
  121. width: 100upx;
  122. height: 64upx;
  123. /* #ifndef H5 */
  124. padding-top: 3upx;
  125. /* #endif */
  126. position: absolute;
  127. /* 水平居中 */
  128. left: 50%;
  129. -webkit-transform: translateX(-50%);
  130. transform: translateX(-50%);
  131. }
  132. .centerY {
  133. position: absolute;
  134. top: 50%;
  135. -webkit-transform: translateY(-50%);
  136. transform: translateY(-50%);
  137. }
  138. .button2 {
  139. padding-right: 60upx;
  140. padding-top: 2upx;
  141. }
  142. .button {
  143. /* padding: 5upx 10upx 10upx 0upx; */
  144. width: 80upx;
  145. height: 60upx;
  146. border-radius: 10upx;
  147. }
  148. .p {
  149. /* #ifdef H5 */
  150. top: -13%;
  151. /* #endif */
  152. width: 80upx;
  153. height: 60upx;
  154. font-size: 30upx;
  155. /* #ifndef H5 */
  156. padding-top: 3upx;
  157. /* #endif */
  158. position: absolute;
  159. /* 水平居中 */
  160. left: 50%;
  161. -webkit-transform: translateX(-50%);
  162. transform: translateX(-50%);
  163. }
  164. .input {
  165. /* padding: 10upx 20upx 10upx 0upx; */
  166. padding-left: 20upx;
  167. padding-top: 10upx;
  168. background-color: #FFFFFF;
  169. width: 500upx;
  170. height: 50upx;
  171. box-shadow: 0upx 0upx 20upx #D3D3D3;
  172. border-radius: 5upx;
  173. }
  174. .xiugai {
  175. width: 92%;
  176. border-left: 20upx;
  177. border-left: 10upx solid #206DC3;
  178. padding-left: 10upx;
  179. height: 38upx;
  180. padding-bottom: 20upx;
  181. font-family: "PingFang-SC-Bold";
  182. font-weight: bold;
  183. margin: auto;
  184. font-size: 32upx;
  185. color: #363D44;
  186. }
  187. .xiugai2 {
  188. width: 100%;
  189. height: 80upx;
  190. font-family: "PingFang-SC-Bold";
  191. font-weight: bold;
  192. margin: auto;
  193. font-size: 50upx;
  194. color: #363D44;
  195. position: fixed;
  196. bottom: 0;
  197. }
  198. .xiugai3 {
  199. height: 80upx;
  200. font-family: "PingFang-SC-Bold";
  201. font-weight: bold;
  202. margin: auto;
  203. font-size: 40upx;
  204. color: #363D44;
  205. }
  206. .body {
  207. background-color: #FFFFFF;
  208. padding: 10upx 10upx 10upx 10upx;
  209. display: flex;
  210. flex-direction: row;
  211. justify-content: flex-start;
  212. }
  213. .input-two {
  214. width: 600upx;
  215. height: 100upx;
  216. padding-left: 30upx;
  217. }
  218. .p2 {
  219. color: #DD524D;
  220. display: none;
  221. width: 600upx;
  222. height: 50upx;
  223. border: 1px;
  224. }
  225. </style>