index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802
  1. <template>
  2. <view class="container">
  3. <view class="header_banner"></view>
  4. <view class="header">
  5. <view class="avatar-container">
  6. <image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl"
  7. style="width:80px;height:80px;border-radius:50%" @tap="handleAvatarClick" />
  8. <button v-else open-type="chooseAvatar" @chooseavatar="onChooseAvatar">选择头像</button>
  9. <image src="/static/images/v.png" v-if="examine==1"
  10. style="position: absolute;bottom: 15px;right: 5px; width: 20px;height: 20px;"></image>
  11. </view>
  12. <view class="header_box">
  13. <view class="left">
  14. <view class="phone_name">
  15. <image src="/static/images/myUser.png" alt="" style="width: 24px;height: 24px;" />
  16. :
  17. <view class="user_name">
  18. <!-- <text v-if="userInfo.customName" style="margin-left:10px">{{ userInfo.customName }}</text>else- -->
  19. <text v-if="userInfo.nickName" style="margin-left:10px">{{ userInfo.nickName }}</text>
  20. <button v-else open-type="getUserProfile" @tap="getUserProfile" class="text-style-button"
  21. style="margin-left: 15px;color: #1296db;">获取微信昵称</button>
  22. </view>
  23. <button v-if="userInfo.nickName||userInfo.customName" @tap="showNameInput"
  24. class="text-style-button"
  25. style="margin-left: 15px;color: #1296db;text-decoration: underline">修改</button>
  26. </view>
  27. <view class="phone_name">
  28. <image src="/static/images/手机号码.png" mode="aspectFit" style="width: 24px; height: 24px;">
  29. </image>
  30. :
  31. <view style="margin-left:15px;">
  32. <button v-if="!userInfo.phoneNumber" open-type="getPhoneNumber"
  33. @getphonenumber="onGetPhoneNumber" class="text-style-button"
  34. style="color: #1296db;">获取手机号</button>
  35. <text v-else>{{ userInfo.phoneNumber }}</text>
  36. </view>
  37. <button v-if="userInfo.phoneNumber" open-type="getPhoneNumber"
  38. @getphonenumber="onGetPhoneNumber" class="text-style-button"
  39. style="margin-left: 15px;color: #1296db;text-decoration: underline">修改</button>
  40. </view>
  41. <view style="display: flex;">
  42. <image src="/static/images/用户类型.png" mode="aspectFit" style="width: 20px; height: 20px;">
  43. </image>
  44. :
  45. <view class="picker" style="margin-left: 10px;"><!-- { color: isChanged ? '#999' : '#000' } -->
  46. {{ array && array[examine] ? array[examine].name : '' }}
  47. </view>
  48. <button v-if="examine==0" @tap="openForm" class="text-style-button"
  49. style="margin-left: 15px;color: #1296db;text-decoration: underline">员工认证</button>
  50. <text v-if="examine==2" style="margin-left: 15px;color: #1296db;">认证中</text>
  51. <!-- <picker @change="onPickerChange" :value="index" :range="array" range-key="name"
  52. :disabled="isChanged" style="border: 1px solid #ccc;">
  53. <view class="picker" @tap="openForm" :style="{ color: isChanged ? '#999' : '#000' }">
  54. 当前选择:<text>{{ array[index].name }}</text>
  55. <text v-if="isChanged">(待审核)</text>
  56. </view>
  57. </picker> -->
  58. </view>
  59. </view>
  60. <!-- <view class="right" @click="goToSettings">
  61. <image src="/static/images/setting.png" style="width:24px;height:24px"></image>
  62. </view> -->
  63. </view>
  64. </view>
  65. <!-- 新增弹窗表单 -->
  66. <uni-popup ref="popup" type="center">
  67. <view class="popup-content">
  68. <view class="popup-header">
  69. <text class="popup-title">用户信息</text>
  70. <text class="popup-close" @tap="closePopup">×</text>
  71. </view>
  72. <form @submit="submitForm">
  73. <view class="form-item">
  74. <text>微信昵称:</text>
  75. <input type="text" v-model="formData.nickName" placeholder="微信昵称" required />
  76. </view>
  77. <view class="form-item">
  78. <text>姓名:</text>
  79. <input type="text" v-model="formData.realName" placeholder="姓名" required />
  80. </view>
  81. <view class="form-item">
  82. <text>手机号:</text>
  83. <input type="number" v-model="formData.phoneNumber" placeholder="手机号" required
  84. @blur="validatePhoneNumber" />
  85. <text v-if="errors.phoneNumber" class="error-message">{{ errors.phoneNumber }}</text>
  86. </view>
  87. <view class="form-item">
  88. <text>身份证号:</text>
  89. <input type="idcard" v-model="formData.idCard" placeholder="身份证号" required
  90. @blur="validateIdCard" />
  91. <text v-if="errors.idCard" class="error-message">{{ errors.idCard }}</text>
  92. </view>
  93. <view class="form-item">
  94. <text>用户类型:</text>
  95. <picker @change="onFormPickerChange" :value="formData.userType" :range="array" range-key="name">
  96. <view class="picker">
  97. {{ array[formData.userType].name }}
  98. </view>
  99. </picker>
  100. </view>
  101. <button form-type="submit">提交</button>
  102. </form>
  103. </view>
  104. </uni-popup>
  105. <view v-if="showNamePopup" class="custom-popup">
  106. <view class="custom-popup-content">
  107. <text>输入您的名称</text>
  108. <input v-model="tempCustomName" placeholder="请输入您的名称" />
  109. <view class="custom-popup-buttons">
  110. <button @tap="closeNamePopup">取消</button>
  111. <button @tap="confirmCustomName">确定</button>
  112. </view>
  113. </view>
  114. </view>
  115. </view>
  116. </template>
  117. <script>
  118. export default {
  119. data() {
  120. return {
  121. openId: '',
  122. userInfo: {
  123. avatarUrl: '',
  124. nickName: '',
  125. customName: '',
  126. phoneNumber: ''
  127. },
  128. tempCustomName: '',
  129. showNamePopup: false,
  130. array: [{
  131. id: 1,
  132. name: "游客",
  133. value: "0"
  134. }, {
  135. id: 2,
  136. name: "员工",
  137. value: "1"
  138. }, {
  139. id: 3,
  140. name: "游客",
  141. value: "2"
  142. }],
  143. index: 0,
  144. examine: 0,
  145. isChanged: false,
  146. // 表单
  147. formData: {
  148. nickName: '',
  149. realName: '',
  150. phoneNumber: '',
  151. idCard: '',
  152. userType: 0
  153. },
  154. errors: {
  155. phoneNumber: '',
  156. idCard: ''
  157. },
  158. apiUrl: 'https://ylaiapi.raycos.com.cn' //https://qlaiapi.raycos.com.cn'https://doc.shqlsy.com',https://ylaiapi.raycos.com.cn
  159. }
  160. },
  161. onLoad() {
  162. console.log('onLoad 被调用')
  163. this.checkLogin()
  164. this.handleLogin()
  165. },
  166. onShow() {
  167. console.log('onShow 被调用')
  168. if (this.openId) {
  169. this.showLoginButton = false
  170. } else {
  171. this.checkLogin()
  172. }
  173. },
  174. methods: {
  175. /* 表单操作 */
  176. closePopup() {
  177. this.$refs.popup.close();
  178. },
  179. openForm() {
  180. if (!this.openId) {
  181. uni.showToast({
  182. title: '请登录',
  183. icon: 'none'
  184. });
  185. return
  186. }
  187. this.formData.nickName = this.userInfo.nickName || '';
  188. this.formData.phoneNumber = this.userInfo.phoneNumber || '';
  189. this.formData.userType = 1;
  190. this.$refs.popup.open();
  191. },
  192. onFormPickerChange(e) {
  193. this.formData.userType = e.detail.value;
  194. },
  195. validatePhoneNumber() {
  196. const phoneRegex = /^1[3-9]\d{9}$/;
  197. if (!phoneRegex.test(this.formData.phoneNumber)) {
  198. this.errors.phoneNumber = '请输入有效的11位手机号码';
  199. } else {
  200. this.errors.phoneNumber = '';
  201. }
  202. },
  203. validateIdCard() {
  204. const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  205. if (!idCardRegex.test(this.formData.idCard)) {
  206. this.errors.idCard = '请输入有效的身份证号码';
  207. } else {
  208. this.errors.idCard = '';
  209. }
  210. },
  211. submitForm() {
  212. this.validatePhoneNumber();
  213. this.validateIdCard();
  214. if (this.errors.phoneNumber || this.errors.idCard) {
  215. uni.showToast({
  216. title: '请修正表单错误',
  217. icon: 'none'
  218. });
  219. return;
  220. }
  221. if (!this.formData.nickName || !this.formData.realName || !this.formData.phoneNumber || !this.formData
  222. .idCard) {
  223. uni.showToast({
  224. title: '请填写所有必填字段',
  225. icon: 'none'
  226. });
  227. return;
  228. }
  229. uni.request({
  230. url: this.apiUrl + '/wechat/updateUserInfo',
  231. method: 'POST',
  232. data: {
  233. openid: this.openId,
  234. purePhoneNumber: this.formData.phoneNumber,
  235. id_card: this.formData.idCard,
  236. name: this.formData.realName,
  237. nikeName: this.formData.nickName,
  238. examine: 2
  239. }, //JSON.stringify()level: this.formData.userType,
  240. header: {
  241. 'content-type': 'application/x-www-form-urlencoded' // 设置正确的内容类型
  242. },
  243. success: (res) => {
  244. console.log(res);
  245. if (res.data && res.data.status == 200) {
  246. this.$refs.popup.close();
  247. this.getUserInfo()
  248. uni.showToast({
  249. title: '提交成功!',
  250. icon: 'success'
  251. });
  252. } else {
  253. console.error('提交失败', res);
  254. uni.showToast({
  255. title: res.data && res.data.message ? res.data.message : '提交失败,请重试',
  256. icon: 'none'
  257. });
  258. }
  259. },
  260. fail: (err) => {
  261. console.error('请求失败', err);
  262. uni.showToast({
  263. title: '网络错误,请重试',
  264. icon: 'none'
  265. });
  266. }
  267. });
  268. //console.log('Form submitted:', this.formData);
  269. // 更新页面上的用户类型显示
  270. //this.index = this.formData.userType;
  271. //this.submitToBackend();
  272. },
  273. /* 终 */
  274. /* 获取昵称 */
  275. getUserProfile() {
  276. uni.getUserProfile({
  277. desc: '用于完善会员资料',
  278. success: (res) => {
  279. this.userInfo.nickName = res.userInfo.nickName;
  280. this.saveUserInfo();
  281. console.log('获取用户信息成功', res.userInfo);
  282. },
  283. fail: (err) => {
  284. console.error('获取用户信息失败', err);
  285. uni.showToast({
  286. title: '获取用户信息失败',
  287. icon: 'none'
  288. });
  289. }
  290. });
  291. },
  292. showNameInput() {
  293. this.tempCustomName = this.userInfo.customName || this.userInfo.nickName || '';
  294. this.showNamePopup = true;
  295. },
  296. confirmCustomName() {
  297. this.userInfo.customName = this.tempCustomName;
  298. uni.request({
  299. url: this.apiUrl + '/wechat/updateNikeName',
  300. method: 'POST',
  301. data: {
  302. nikeName: this.userInfo.customName,
  303. openid: this.openId
  304. }, //JSON.stringify()
  305. header: {
  306. 'content-type': 'application/x-www-form-urlencoded' // 设置正确的内容类型
  307. },
  308. success: (res) => {
  309. if (res.data && res.data.status == 200) {
  310. this.saveUserInfo();
  311. this.getUserInfo()
  312. this.closeNamePopup();
  313. uni.showToast({
  314. title: '修改成功',
  315. icon: 'success'
  316. });
  317. } else {
  318. console.error('修改失败', res);
  319. uni.showToast({
  320. title: '修改失败',
  321. icon: 'none'
  322. });
  323. }
  324. }
  325. });
  326. },
  327. closeNamePopup() {
  328. this.showNamePopup = false;
  329. },
  330. getUserInfo() {
  331. uni.request({
  332. url: this.apiUrl + '/wechat/getUserInfo',
  333. method: 'POST',
  334. data: {
  335. openid: this.openId
  336. },
  337. header: {
  338. 'content-type': 'application/x-www-form-urlencoded'
  339. },
  340. success: (res) => {
  341. console.log('获取用户信息成功', res.data);
  342. if (res.data && res.data.data) {
  343. this.examine = Number(res.data.data.examine);
  344. // 检查 nikeName 是否为空或 null
  345. if (!res.data.data.nikeName || res.data.data.nikeName === 'null') {
  346. console.log('服务器返回的 nickName 为空或 null,保持当前昵称不变');
  347. } else {
  348. // 如果不为空,则使用服务器返回的 nickName
  349. this.userInfo.nickName = res.data.data.nikeName;
  350. // 更新本地存储
  351. this.updateLocalStorage();
  352. }
  353. this.isChanged = this.userInfo.status === 5;
  354. }
  355. },
  356. fail: (err) => {
  357. console.error('获取用户信息失败', err);
  358. uni.showToast({
  359. title: '获取用户信息失败,请重试',
  360. icon: 'none'
  361. });
  362. }
  363. });
  364. },
  365. // 新增方法:更新本地存储
  366. updateLocalStorage() {
  367. const storedUserInfo = uni.getStorageSync('userInfo');
  368. if (storedUserInfo) {
  369. const parsedUserInfo = JSON.parse(storedUserInfo);
  370. parsedUserInfo.nickName = this.userInfo.nickName;
  371. uni.setStorageSync('userInfo', JSON.stringify(parsedUserInfo));
  372. } else {
  373. // 如果本地存储中没有 userInfo,则直接存储当前的 userInfo
  374. uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
  375. }
  376. console.log('本地存储的 userInfo 已更新');
  377. },
  378. onPickerChange(e) {
  379. if (!this.isChanged) {
  380. this.index = e.detail.value;
  381. console.log('picker发送选择改变,携带值为', this.array[this.index].name);
  382. // 调用提交数据的方法
  383. this.submitToBackend();
  384. }
  385. },
  386. submitToBackend() {
  387. uni.request({
  388. url: this.apiUrl + '/wechat/updateUserInfo', // 请确保这是正确的接口地址
  389. method: 'POST',
  390. data: {
  391. openid: this.openId,
  392. level: this.index, // 提交 index 作为参数
  393. phoneNumber: this.userInfo.phoneNumber,
  394. status: 5
  395. },
  396. header: {
  397. 'content-type': 'application/x-www-form-urlencoded' // 设置正确的内容类型
  398. },
  399. success: (res) => {
  400. console.log('提交成功', res.data);
  401. this.isChanged = true; // 标记为已变更
  402. uni.showToast({
  403. title: '更新成功,待审核',
  404. icon: 'success'
  405. });
  406. },
  407. fail: (err) => {
  408. console.error('提交失败', err);
  409. uni.showToast({
  410. title: '更新失败,请重试',
  411. icon: 'none'
  412. });
  413. }
  414. });
  415. },
  416. restoreOpenId() {
  417. const storedOpenId = uni.getStorageSync('openId')
  418. if (storedOpenId) {
  419. this.openId = storedOpenId
  420. console.log('恢复 openId:', this.openId)
  421. } else {
  422. console.log('未找到存储的 openId,需要重新登录')
  423. this.login()
  424. }
  425. },
  426. checkLogin() {
  427. uni.checkSession({
  428. success: () => {
  429. console.log('Session 有效')
  430. this.loadUserInfo()
  431. this.showLoginButton = false
  432. },
  433. fail: () => {
  434. console.log('Session 已过期,需要重新登录')
  435. this.showLoginButton = true
  436. }
  437. })
  438. },
  439. login() {
  440. console.log('执行login')
  441. uni.login({
  442. success: (res) => {
  443. if (res.code) {
  444. console.log('获取到登录code:', res); // 添加日志
  445. this.requestLogin(res.code)
  446. } else {
  447. console.log('获取code失败!' + res.code)
  448. }
  449. }
  450. })
  451. },
  452. requestLogin(code) {
  453. console.log('Sending login request with code:', code); // 添加日志
  454. uni.request({
  455. url: this.apiUrl + '/wechat/wechatLogin', // 确保这是正确的URL
  456. method: 'POST',
  457. data: {
  458. code: code
  459. }, //JSON.stringify()
  460. header: {
  461. 'content-type': 'application/x-www-form-urlencoded' // 设置正确的内容类型
  462. },
  463. success: (res) => {
  464. console.log('Login response:', res.data);
  465. if (res.data && res.data.status === 200 && res.data.data && res.data.data.openid) {
  466. this.openId = res.data.data.openid;
  467. // 存储整个 res.data.data 对象
  468. uni.setStorageSync('userData', JSON.stringify(res.data.data));
  469. uni.setStorageSync('openId', this.openId);
  470. console.log('登录成功,openId:', this.openId);
  471. this.showLoginButton = false;
  472. this.loadUserInfo();
  473. this.getUserInfo();
  474. } else {
  475. console.error('登录失败,未获取到 openId', res.data);
  476. this.showLoginButton = true;
  477. uni.showToast({
  478. title: '登录失败,请重试',
  479. icon: 'none'
  480. });
  481. }
  482. },
  483. fail: (err) => {
  484. console.error('登录请求失败', err);
  485. this.showLoginButton = true;
  486. uni.showToast({
  487. title: '登录失败,请重试',
  488. icon: 'none'
  489. });
  490. }
  491. })
  492. },
  493. loadUserInfo() {
  494. const storedInfo = uni.getStorageSync('userInfo')
  495. if (storedInfo) {
  496. this.userInfo = JSON.parse(storedInfo)
  497. this.showLoginButton = false
  498. } else {
  499. this.showLoginButton = true
  500. }
  501. },
  502. handleAvatarClick() {
  503. console.log('头像被点击')
  504. },
  505. onChooseAvatar(e) {
  506. this.userInfo.avatarUrl = e.detail.avatarUrl
  507. console.log(this.userInfo.avatarUrl);
  508. this.saveUserInfo()
  509. },
  510. onGetPhoneNumber(e) {
  511. console.log(e);
  512. if (e.detail.errMsg === 'getPhoneNumber:ok') {
  513. const code = e.detail.code;
  514. console.log('onGetPhoneNumber called, current openId:', this.openId);
  515. if (this.openId) {
  516. this.requestPhoneNumber(e.detail.code, this.openId);
  517. } else {
  518. console.error('openId 未定义,无法获取手机号');
  519. uni.showToast({
  520. title: '获取手机号失败,请先登录',
  521. icon: 'none'
  522. });
  523. }
  524. } else {
  525. console.error('获取手机号失败', e.detail.errMsg);
  526. uni.showToast({
  527. title: '获取手机号失败',
  528. icon: 'none'
  529. });
  530. }
  531. },
  532. requestPhoneNumber(code, openId) {
  533. uni.request({
  534. url: this.apiUrl + '/wechat/getUserPhoneNumber',
  535. method: 'POST',
  536. data: {
  537. code: code,
  538. openid: openId
  539. }, //JSON.stringify()
  540. header: {
  541. 'content-type': 'application/x-www-form-urlencoded' // 设置正确的内容类型
  542. },
  543. success: (res) => {
  544. if (res.data && res.data.data.purePhoneNumber) {
  545. this.userInfo.phoneNumber = res.data.data.purePhoneNumber;
  546. this.saveUserInfo();
  547. uni.showToast({
  548. title: '获取手机号成功',
  549. icon: 'success'
  550. });
  551. } else {
  552. console.error('获取手机号失败', res);
  553. uni.showToast({
  554. title: '获取手机号失败',
  555. icon: 'none'
  556. });
  557. }
  558. }
  559. });
  560. },
  561. saveUserInfo() {
  562. uni.setStorageSync('userInfo', JSON.stringify(this.userInfo))
  563. this.showLoginButton = false
  564. },
  565. handleLogin() {
  566. this.login()
  567. },
  568. goToSettings() {
  569. uni.navigateTo({
  570. url: '/pages/my/setting/setting',
  571. success: (res) => {
  572. console.log('成功跳转到设置页面');
  573. },
  574. fail: (err) => {
  575. console.error('跳转到设置页面失败', err);
  576. uni.showToast({
  577. title: '跳转失败,请重试',
  578. icon: 'none'
  579. });
  580. }
  581. });
  582. }
  583. }
  584. }
  585. </script>
  586. <style>
  587. .container {
  588. min-height: 100vh;
  589. }
  590. .header_banner {
  591. width: 100%;
  592. height: 200px;
  593. background-color: #1296db;
  594. border-radius: 0 0 30px 30px;
  595. }
  596. .header {
  597. display: flex;
  598. flex-direction: column;
  599. align-items: center;
  600. padding: 20px 20px;
  601. margin-top: -50px;
  602. }
  603. .header_box {
  604. width: 100%;
  605. display: flex;
  606. align-items: flex-start;
  607. justify-content: space-between;
  608. }
  609. .phone_name {
  610. display: flex;
  611. align-items: center;
  612. margin-bottom: 15px;
  613. }
  614. .avatar-container {
  615. width: 90px;
  616. height: 90px;
  617. border-radius: 50%;
  618. overflow: hidden;
  619. position: relative;
  620. }
  621. .avatar-container button {
  622. width: 100%;
  623. height: 100%;
  624. padding: 30px 10px;
  625. background-color: royalblue;
  626. z-index: 5;
  627. }
  628. .left {
  629. display: flex;
  630. flex-direction: column;
  631. }
  632. .right {
  633. padding: 10px;
  634. }
  635. button {
  636. background-color: #1296db;
  637. color: #fff;
  638. border: none;
  639. border-radius: 5px;
  640. padding: 2px 7px;
  641. font-size: 14px;
  642. }
  643. ::v-deep .uni-popup__wrapper {
  644. width: 80%;
  645. max-width: 600px;
  646. }
  647. .popup-content {
  648. background-color: #fff;
  649. padding: 20px;
  650. border-radius: 10px;
  651. }
  652. .form-item {
  653. margin-bottom: 15px;
  654. }
  655. .form-item text {
  656. display: block;
  657. margin-bottom: 5px;
  658. }
  659. .form-item input {
  660. height: 40px;
  661. border: 1px solid #ccc;
  662. border-radius: 5px;
  663. padding: 0 10px;
  664. }
  665. .error-message {
  666. color: red;
  667. font-size: 12px;
  668. margin-top: 5px;
  669. }
  670. .text-style-button {
  671. background: none;
  672. border: none;
  673. color: #000;
  674. /* Or any color you prefer */
  675. padding: 0;
  676. font: inherit;
  677. cursor: pointer;
  678. outline: inherit;
  679. /* text-decoration: underline; */
  680. }
  681. .text-style-button:hover {
  682. opacity: 0.8;
  683. }
  684. .text-style-button:after {
  685. border: none;
  686. }
  687. .custom-popup {
  688. position: fixed;
  689. top: 0;
  690. left: 0;
  691. right: 0;
  692. bottom: 0;
  693. background-color: rgba(0, 0, 0, 0.5);
  694. display: flex;
  695. justify-content: center;
  696. align-items: center;
  697. z-index: 999;
  698. }
  699. .custom-popup-content {
  700. background-color: #fff;
  701. padding: 20px;
  702. border-radius: 10px;
  703. width: 80%;
  704. max-width: 300px;
  705. }
  706. .custom-popup-content input {
  707. width: 100%;
  708. margin: 10px 0;
  709. padding: 5px;
  710. border: 1px solid #ccc;
  711. border-radius: 5px;
  712. }
  713. .custom-popup-buttons {
  714. display: flex;
  715. justify-content: space-between;
  716. margin-top: 15px;
  717. }
  718. .custom-popup-buttons button {
  719. width: 45%;
  720. }
  721. .popup-content {
  722. background-color: #fff;
  723. padding: 20px;
  724. border-radius: 10px;
  725. width: 80%;
  726. max-width: 600px;
  727. }
  728. .popup-header {
  729. display: flex;
  730. justify-content: space-between;
  731. align-items: center;
  732. margin-bottom: 20px;
  733. }
  734. .popup-title {
  735. font-size: 18px;
  736. font-weight: bold;
  737. }
  738. .popup-close {
  739. font-size: 24px;
  740. cursor: pointer;
  741. padding: 5px;
  742. }
  743. </style>