CredentialPopup

components/CredentialPopup.vue

@@ -0,0 +1,155 @@
+<template>
+  <view class="popup-mask" v-if="visible" @click.self="close('cancel')">
+    <view class="popup-container">
+      <!-- <view class="popup-title">请输入账号和密码</view>
+      <input class="filter_input" v-model="username" placeholder="账号" />
+      <input class="filter_input" v-model="password" type="password" placeholder="密码" /> -->
+      <view class="setup-item">
+        <view class="filter_label">账号</view>
+        <input type="text" class="setup-input" v-model="username">
+      </view>
+      <view class="setup-item">
+        <view class="filter_label">密码</view>
+        <input type="password" class="setup-input" v-model="password">
+      </view>
+      <view class="dialog-buttons">
+        <!-- <button @click="close('cancel')">取消</button>
+        <button @click="confirm">确定</button> -->
+        <button class="cancel-btn" @click="close('cancel')">取消</button>
+				<button class="confirm-btn" type="primary" @click="confirm">复核确认</button>		
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      username: '',
+      password: '',
+      resolvePromise: null,
+      rejectPromise: null
+    };
+  },
+  methods: {
+    // 显示弹窗，返回 Promise
+    show() {
+      this.visible = true;
+      this.username = '';
+      this.password = '';
+      return new Promise((resolve, reject) => {
+        this.resolvePromise = resolve;
+        this.rejectPromise = reject;
+      });
+    },
+    confirm() {
+      if (this.username && this.password) {
+        this.resolvePromise({ username: this.username, password: this.password });
+        this.close();
+      } else {
+        uni.showToast({ title: '请输入账号和密码', icon: 'none' });
+      }
+    },
+    close(type) {
+      this.visible = false;
+      if (type === 'cancel') {
+        this.rejectPromise(new Error('用户取消'));
+      }
+      this.resolvePromise = null;
+      this.rejectPromise = null;
+    }
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+@import '../common/style/mixin.styl';
+.setup-item
+	width 100%
+	margin-bottom 18rpx
+.setup-label
+	_font(24rpx,40rpx,#000)
+.setup-input
+	_wh(100%, 80rpx)
+	background #fff
+	_font(28rpx,80rpx,#323232)
+	padding 0 28rpx
+	border 2px solid #e9ecf3
+	border-radius 12rpx
+.popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+.popup-container {
+  width: 80%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px 20px 0px 20px;
+}
+.popup-title {
+  text-align: center;
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+.popup-input {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 15px;
+}
+.popup-buttons {
+  display: flex;
+  justify-content: space-between;
+}
+/* 按钮区域 */
+.dialog-buttons {
+  display: flex;
+  border-top: 1px solid #f0f0f0;
+}
+
+.dialog-buttons button {
+  flex: 1;
+  border-radius: 0;
+  height: 48px;
+  line-height: 48px;
+  font-size: 16px;
+  background: transparent;
+  border: none;
+  margin: 0;
+}
+.cancel-btn {
+  color: #666;
+  border-right: 1px solid #f0f0f0;
+}
+
+.cancel-btn::after {
+  border: none;
+}
+
+.confirm-btn {
+  color: #007aff;
+  font-weight: 500;
+}
+
+.confirm-btn::after {
+  border: none;
+}
+
+/* 分隔线样式 */
+.button-divider {
+  width: 1px;
+  height: 24px;
+  background-color: #e5e5e5;
+  flex-shrink: 0;
+}
+</style>