user modal

src/components/Setting/components/Device.vue

@@ -2,18 +2,40 @@
   <div class="device_container">
     <div class="row_wrap">
       <p class="title">加液蠕动泵</p>
-      <p class="num">000/000</p>
+      <p class="num">
+        <van-field
+          type="number"
+          v-model="addLiquidVal"
+          :clickable="true"
+          :formatter="formatter"
+          placeholder="设置加液蠕动泵转速"
+        />
+      </p>
       <div class="btn">设置</div>
     </div>
     <div class="row_wrap">
       <p class="title">喷液蠕动泵</p>
-      <p class="num">000/000</p>
+      <p class="num">
+        <van-field
+          type="number"
+          v-model="sprayLiquidVal"
+          :clickable="true"
+          :formatter="formatter"
+          placeholder="设置喷液蠕动泵转速"
+        />
+      </p>
       <div class="btn">设置</div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+const addLiquidVal = ref(0)
+const sprayLiquidVal = ref(0)
+
+const formatter = value => value + '/g'
+</script>
 
 <style lang="scss" scoped>
 .device_container {
@@ -49,6 +71,8 @@
       font-weight: 500;
       letter-spacing: 0.1em;
       color: #000000;
+      display: flex;
+      align-items: center;
     }
     .btn {
       width: 87px;

src/components/Setting/components/User.vue

@@ -53,24 +53,15 @@
         <div class="user_line">
           <p class="username">username</p>
           <div class="operator_wrap">
-            <div class="btn">删除用户</div>
-            <div class="btn mb">设为管理员</div>
-            <div class="btn" @click="showUpdatePassword">修改密码</div>
-          </div>
-        </div>
-        <div class="user_line">
-          <p class="username">username</p>
-          <div class="operator_wrap">
-            <div class="btn">删除用户</div>
-            <div class="btn mb">设为管理员</div>
-            <div class="btn" @click="showUpdatePassword">修改密码</div>
-          </div>
-        </div>
-        <div class="user_line">
-          <p class="username">username</p>
-          <div class="operator_wrap">
-            <div class="btn">删除用户</div>
-            <div class="btn mb">设为管理员</div>
+            <div class="btn" @click="showUserModal('username1 用户删除')">
+              删除用户
+            </div>
+            <div
+              class="btn mb"
+              @click="showUserModal('username1 设置为管理员')"
+            >
+              设为管理员
+            </div>
             <div class="btn" @click="showUpdatePassword">修改密码</div>
           </div>
         </div>
@@ -79,7 +70,11 @@
         <div class="add_user" @click="addUserFormShow">新增用户</div>
       </div>
     </div>
-    <!-- <UserModal /> -->
+    <UserModal
+      v-if="userModalVisible"
+      :hideUserModal="hideUserModal"
+      :userWarnInfo="userWarnInfo"
+    />
   </div>
 </template>
 
@@ -88,6 +83,7 @@ import { ref } from 'vue'
 import UserModal from 'cpns/dialogs/UserModal'
 const userFormVisible = ref(false)
 const changePasswordVisible = ref(false)
+const userModalVisible = ref(false)
 
 const showUpdatePassword = () => {
   changePasswordVisible.value = true
@@ -104,6 +100,15 @@ const returnList = () => {
 const addUserFormShow = () => {
   userFormVisible.value = true
 }
+
+const userWarnInfo = ref('')
+const showUserModal = info => {
+  userWarnInfo.value = info
+  userModalVisible.value = true
+}
+const hideUserModal = () => {
+  userModalVisible.value = false
+}
 </script>
 
 <style lang="scss" scoped>

src/components/dialogs/UserModal.vue

@@ -18,16 +18,31 @@
           />
         </g>
       </svg>
-      <p class="tips">请添是否将 <span class="red">username1 用户删除</span></p>
+      <p class="tips">
+        请确认是否将 <span class="red">{{ userWarnInfo }}</span>
+      </p>
       <div class="btns">
         <div class="ok">确定</div>
-        <div class="cancel">取消</div>
+        <div class="cancel" @click="handleCancel">取消</div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+const props = defineProps({
+  userWarnInfo: {
+    type: String,
+  },
+  hideUserModal: {
+    type: Function,
+  },
+})
+
+const handleCancel = () => {
+  props.hideUserModal()
+}
+</script>
 
 <style lang="scss" scoped>
 .user_modal_container {
@@ -46,7 +61,7 @@
     height: 350px;
     border-radius: 16px;
     background: #ffffff;
-    padding: 52px 57px 55px 57px;
+    padding: 52px 37px 55px 37px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -55,7 +70,7 @@
       margin-top: 33px;
       margin-bottom: 50px;
       font-family: Source Han Sans CN;
-      font-size: 22px;
+      font-size: 21px;
       font-weight: normal;
       letter-spacing: 0.04em;
       color: #000000;

src/main.js

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import router from './router'
 import store from './store'
 import App from './App.vue'
-import { DatePicker, TimePicker, Picker } from 'vant'
+import { DatePicker, TimePicker, Picker, Field } from 'vant'
 import 'vant/lib/index.css'
 import '@/assets/css/reset.css'
 import './style.scss'
@@ -12,5 +12,6 @@ createApp(App)
   .use(Picker)
   .use(DatePicker)
   .use(TimePicker)
+  .use(Field)
   .use(store)
   .mount('#app')

src/style.scss

@@ -9,3 +9,10 @@ body {
   -ms-user-select: none; /* IE10+ */
   user-select: none; /* Standard */
 }
+
+.van-cell {
+  .van-field__control {
+    text-align: center;
+  }
+  background: none;
+}