leiyun
/
cytx_mp
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3 커밋
1 브렌치
5.2 MiB
 
 
 
 
트리: 6c4cb49e3b
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from '6c4cb49e3b'
${ noResults }
cytx_mp/pages/myinfo/myinfo.vue

721 lines
18 KiB
Raw Blame 히스토리 

  1. <template>

  2. 	<view class="page">

  3. 		<!-- 驳回原因提示 -->

  4. 		<view v-if="info.status === 2 && info.reject_reason" class="reject-tip">

  5. 			<u-icon name="warning-fill" size="20" color="#fa8c16" />

  6. 			<text class="reject-text">驳回原因：{{ info.reject_reason }}</text>

  7. 		</view>

  8. 

  9. 		<!-- 基本信息 -->

  10. 		<view class="section">

  11. 			<view class="section-title">

  12. 				<u-icon name="account-fill" size="18" color="#0e63e3" />

  13. 				<text>基本信息</text>

  14. 			</view>

  15. 			<view class="form-group">

  16. 				<text class="form-label">姓名</text>

  17. 				<view class="readonly-input">{{ info.name }}</view>

  18. 			</view>

  19. 			<view class="form-group">

  20. 				<text class="form-label">身份证号</text>

  21. 				<view class="readonly-input">{{ maskedIdCard }}</view>

  22. 			</view>

  23. 			<view class="form-group">

  24. 				<text class="form-label">手机号</text>

  25. 				<view class="readonly-input">{{ maskedPhone }}</view>

  26. 			</view>

  27. 			<view class="form-group" v-if="info.gender">

  28. 				<text class="form-label">性别</text>

  29. 				<view class="readonly-input">{{ info.gender }}</view>

  30. 			</view>

  31. 			<view class="form-group" v-else>

  32. 				<text class="form-label">性别</text>

  33. 				<view class="gender-row">

  34. 					<view class="gender-item" :class="{ active: form.gender === '男' }" @tap="form.gender = '男'">男</view>

  35. 					<view class="gender-item" :class="{ active: form.gender === '女' }" @tap="form.gender = '女'">女</view>

  36. 				</view>

  37. 			</view>

  38. 			<view class="form-group">

  39. 				<text class="form-label">联系地址</text>

  40. 				<view class="region-row" @tap="showRegionPicker = true">

  41. 					<text :class="['region-text', regionText ? '' : 'placeholder']">{{ regionText || '请选择省/市/区' }}</text>

  42. 					<text class="arrow">›</text>

  43. 				</view>

  44. 				<u-input v-model="form.address" placeholder="详细街道地址" border="surround"

  45. 					:customStyle="{ marginTop: '16rpx' }" />

  46. 			</view>

  47. 			<view class="form-group">

  48. 				<text class="form-label">紧急联系人（选填）</text>

  49. 				<view class="contact-row">

  50. 					<view class="contact-input">

  51. 						<u-input v-model="form.emergency_contact" placeholder="联系人姓名" border="surround" />

  52. 					</view>

  53. 					<view class="contact-input">

  54. 						<u-input v-model="form.emergency_phone" type="number" placeholder="联系人电话" border="surround" maxlength="11" />

  55. 					</view>

  56. 				</view>

  57. 			</view>

  58. 		</view>

  59. 

  60. 		<!-- 资料上传 -->

  61. 		<view class="section">

  62. 			<view class="section-title">

  63. 				<u-icon name="attach" size="18" color="#fa8c16" />

  64. 				<text>资料上传</text>

  65. 			</view>

  66. 			<view class="upload-tip">请上传您的检查报告单或出院诊断证明书，上传图片请尽量平整清晰。可上传多张。</view>

  67. 			<view class="upload-row">

  68. 				<view class="upload-item" v-for="(doc, idx) in form.documents" :key="idx">

  69. 					<image class="upload-img" :src="doc" mode="aspectFill" @tap="previewImage(idx)" />

  70. 					<view class="upload-del" @tap="form.documents.splice(idx, 1)">×</view>

  71. 				</view>

  72. 				<view class="upload-box" @tap="chooseDocument">

  73. 					<text class="upload-icon">+</text>

  74. 					<text class="upload-text">上传图片</text>

  75. 				</view>

  76. 			</view>

  77. 		</view>

  78. 

  79. 		<!-- 授权签名 -->

  80. 		<view class="section">

  81. 			<view class="section-title">

  82. 				<u-icon name="edit-pen-fill" size="18" color="#52c41a" />

  83. 				<text>授权签名</text>

  84. 			</view>

  85. 			<view class="sign-item">

  86. 				<view class="sign-left">

  87. 					<text class="sign-name">个人可支配收入声明</text>

  88. 					<text :class="['sign-status', signedIncome ? 'signed' : '']">{{ signedIncome ? '已签署' : '未签署' }}</text>

  89. 				</view>

  90. 				<view class="sign-btns" v-if="signedIncome">

  91. 					<view class="sign-btn view" @tap="previewSign('income')">查看</view>

  92. 					<view class="sign-btn resign" @tap="goSign('income')">重签</view>

  93. 				</view>

  94. 				<view class="sign-btn primary" v-else @tap="goSign('income')">去签署</view>

  95. 			</view>

  96. 			<view class="sign-item">

  97. 				<view class="sign-left">

  98. 					<text class="sign-name">个人信息处理同意书</text>

  99. 					<text :class="['sign-status', signedPrivacy ? 'signed' : '']">{{ signedPrivacy ? '已签署' : '未签署' }}</text>

  100. 				</view>

  101. 				<view class="sign-btns" v-if="signedPrivacy">

  102. 					<view class="sign-btn view" @tap="previewSign('privacy')">查看</view>

  103. 					<view class="sign-btn resign" @tap="goSign('privacy')">重签</view>

  104. 				</view>

  105. 				<view class="sign-btn primary" v-else @tap="goSign('privacy')">去签署</view>

  106. 			</view>

  107. 			<view class="sign-item">

  108. 				<view class="sign-left">

  109. 					<text class="sign-name">声明与承诺</text>

  110. 					<text :class="['sign-status', signedPromise ? 'signed' : '']">{{ signedPromise ? '已签署' : '未签署' }}</text>

  111. 				</view>

  112. 				<view class="sign-btns" v-if="signedPromise">

  113. 					<view class="sign-btn view" @tap="previewSign('promise')">查看</view>

  114. 					<view class="sign-btn resign" @tap="goSign('promise')">重签</view>

  115. 				</view>

  116. 				<view class="sign-btn primary" v-else @tap="goSign('promise')">去签署</view>

  117. 			</view>

  118. 		</view>

  119. 

  120. 		<!-- 提交按钮 -->

  121. 		<view class="btn-wrap">

  122. 			<u-button text="提交审核" :loading="submitting" @click="handleSubmit" color="#0E63E3" size="large" />

  123. 		</view>

  124. 

  125. 		<!-- 地区选择器 -->

  126. 		<u-picker v-if="regionColumns[0].length" :show="showRegionPicker" :columns="regionColumns" @confirm="onRegionConfirm"

  127. 			@cancel="showRegionPicker = false" @change="onRegionChange" :defaultIndex="regionDefaultIndex" />

  128. 

  129. 		<!-- 已通过重新提交确认弹窗 -->

  130. 		<u-popup :show="showConfirmPopup" mode="center" round="12" :safeAreaInsetBottom="false" @close="showConfirmPopup = false">

  131. 			<view class="confirm-popup">

  132. 				<view class="confirm-title">提示</view>

  133. 				<view class="confirm-content">您的资料审核已通过，如果重新提交审核会变为待审核，需要平台重新审核，是否确认提交？</view>

  134. 				<view class="confirm-btns">

  135. 					<u-button text="取消" size="normal" :plain="true" shape="circle" @click="showConfirmPopup = false" />

  136. 					<u-button text="确认提交" size="normal" color="#0E63E3" shape="circle" @click="doSubmit" />

  137. 				</view>

  138. 			</view>

  139. 		</u-popup>

  140. 	</view>

  141. </template>

  142. 

  143. <script setup>

  144. import { ref, reactive, computed, onBeforeUnmount } from 'vue'

  145. import { onLoad } from '@dcloudio/uni-app'

  146. import { get, post, upload } from '@/utils/request.js'

  147. 

  148. const info = ref({})

  149. const form = reactive({

  150. 	gender: '',

  151. 	province_code: '',

  152. 	city_code: '',

  153. 	district_code: '',

  154. 	address: '',

  155. 	emergency_contact: '',

  156. 	emergency_phone: '',

  157. 	documents: [],

  158. 	sign_income: '',

  159. 	sign_privacy: '',

  160. 	sign_promise: '',

  161. 	income_amount: ''

  162. })

  163. const submitting = ref(false)

  164. const showRegionPicker = ref(false)

  165. const showConfirmPopup = ref(false)

  166. const subscribeTmplId = ref('')

  167. 

  168. // 加载订阅消息模板配置

  169. const loadSubscribeConfig = async () => {

  170. 	try {

  171. 		const res = await get('/api/mp/subscribeConfig')

  172. 		if (res.data && res.data.audit_result) {

  173. 			subscribeTmplId.value = res.data.audit_result

  174. 		}

  175. 	} catch (e) {}

  176. }

  177. 

  178. // 请求订阅消息授权

  179. const requestSubscribe = () => {

  180. 	return new Promise((resolve) => {

  181. 		if (!subscribeTmplId.value) return resolve(false)

  182. 		// #ifdef MP-WEIXIN

  183. 		wx.requestSubscribeMessage({

  184. 			tmplIds: [subscribeTmplId.value],

  185. 			success: () => resolve(true),

  186. 			fail: () => resolve(false)

  187. 		})

  188. 		// #endif

  189. 		// #ifndef MP-WEIXIN

  190. 		resolve(false)

  191. 		// #endif

  192. 	})

  193. }

  194. 

  195. // 地区数据

  196. const allRegions = ref([])

  197. const regionColumns = ref([[], [], []])

  198. const regionDefaultIndex = ref([0, 0, 0])

  199. 

  200. const maskedIdCard = computed(() => {

  201. 	const v = info.value.id_card || ''

  202. 	if (v.length === 18) return v.slice(0, 3) + '***********' + v.slice(-4)

  203. 	return v

  204. })

  205. 

  206. const maskedPhone = computed(() => {

  207. 	const v = info.value.phone || ''

  208. 	if (v.length === 11) return v.slice(0, 3) + '****' + v.slice(-4)

  209. 	return v

  210. })

  211. 

  212. // 签署状态：form 中有新签的 URL 或 info 中有已保存的 URL

  213. const signedIncome = computed(() => form.sign_income || info.value.sign_income)

  214. const signedPrivacy = computed(() => form.sign_privacy || info.value.sign_privacy)

  215. const signedPromise = computed(() => form.sign_promise || info.value.sign_promise)

  216. 

  217. const regionText = computed(() => {

  218. 	const parts = []

  219. 	if (form.province_code) {

  220. 		const p = allRegions.value.find(r => r.code === form.province_code)

  221. 		if (p) parts.push(p.name)

  222. 	}

  223. 	if (form.city_code) {

  224. 		const prov = allRegions.value.find(r => r.code === form.province_code)

  225. 		if (prov && prov.children) {

  226. 			const c = prov.children.find(r => r.code === form.city_code)

  227. 			if (c) parts.push(c.name)

  228. 		}

  229. 	}

  230. 	if (form.district_code) {

  231. 		const prov = allRegions.value.find(r => r.code === form.province_code)

  232. 		if (prov && prov.children) {

  233. 			const city = prov.children.find(r => r.code === form.city_code)

  234. 			if (city && city.children) {

  235. 				const d = city.children.find(r => r.code === form.district_code)

  236. 				if (d) parts.push(d.name)

  237. 			}

  238. 		}

  239. 	}

  240. 	return parts.join(' ')

  241. })

  242. 

  243. // 签署结果事件监听

  244. const onSignResult = (data) => {

  245. 	if (data.type === 'income') {

  246. 		form.sign_income = data.url

  247. 		if (data.amount) form.income_amount = data.amount

  248. 	} else if (data.type === 'privacy') {

  249. 		form.sign_privacy = data.url

  250. 	} else if (data.type === 'promise') {

  251. 		form.sign_promise = data.url

  252. 	}

  253. }

  254. 

  255. onLoad(async () => {

  256. 	uni.$on('signResult', onSignResult)

  257. 	await loadRegions()

  258. 	await loadInfo()

  259. 	loadSubscribeConfig()

  260. })

  261. 

  262. onBeforeUnmount(() => {

  263. 	uni.$off('signResult', onSignResult)

  264. })

  265. 

  266. const goSign = (type) => {

  267. 	uni.navigateTo({ url: `/pages/sign/sign?type=${type}` })

  268. }

  269. 

  270. const previewSign = (type) => {

  271. 	const urlMap = {

  272. 		income: form.sign_income || info.value.sign_income,

  273. 		privacy: form.sign_privacy || info.value.sign_privacy,

  274. 		promise: form.sign_promise || info.value.sign_promise

  275. 	}

  276. 	const url = urlMap[type]

  277. 	if (url) uni.previewImage({ urls: [url], current: 0 })

  278. }

  279. 

  280. const loadRegions = async () => {

  281. 	try {

  282. 		const res = await get('/common/regions')

  283. 		allRegions.value = res.data || []

  284. 		buildRegionColumns()

  285. 	} catch (e) {}

  286. }

  287. 

  288. const buildRegionColumns = (pIdx = 0, cIdx = 0) => {

  289. 	const provinces = allRegions.value

  290. 	const col0 = provinces.map(p => p.name)

  291. 	const cities = (provinces[pIdx] && provinces[pIdx].children) || []

  292. 	const col1 = cities.map(c => c.name)

  293. 	const districts = (cities[cIdx] && cities[cIdx].children) || []

  294. 	const col2 = districts.map(d => d.name)

  295. 	regionColumns.value = [col0, col1, col2]

  296. }

  297. 

  298. const onRegionChange = (e) => {

  299. 	const { columnIndex, index } = e

  300. 	if (columnIndex === 0) {

  301. 		buildRegionColumns(index, 0)

  302. 		regionDefaultIndex.value = [index, 0, 0]

  303. 	} else if (columnIndex === 1) {

  304. 		const pIdx = regionDefaultIndex.value[0]

  305. 		buildRegionColumns(pIdx, index)

  306. 		regionDefaultIndex.value = [pIdx, index, 0]

  307. 	}

  308. }

  309. 

  310. const onRegionConfirm = (e) => {

  311. 	const idxs = e.indexs || e.index || [0, 0, 0]

  312. 	const provinces = allRegions.value

  313. 	const prov = provinces[idxs[0]]

  314. 	const city = prov && prov.children ? prov.children[idxs[1]] : null

  315. 	const dist = city && city.children ? city.children[idxs[2]] : null

  316. 	form.province_code = prov ? prov.code : ''

  317. 	form.city_code = city ? city.code : ''

  318. 	form.district_code = dist ? dist.code : ''

  319. 	showRegionPicker.value = false

  320. }

  321. 

  322. const loadInfo = async () => {

  323. 	try {

  324. 		const res = await get('/api/mp/myInfo')

  325. 		if (!res.data) return

  326. 		info.value = res.data

  327. 		// 填充表单

  328. 		form.gender = res.data.gender || ''

  329. 		form.province_code = res.data.province_code || ''

  330. 		form.city_code = res.data.city_code || ''

  331. 		form.district_code = res.data.district_code || ''

  332. 		form.address = res.data.address || ''

  333. 		form.emergency_contact = res.data.emergency_contact || ''

  334. 		form.emergency_phone = res.data.emergency_phone || ''

  335. 		form.documents = res.data.documents || []

  336. 		form.sign_income = res.data.sign_income || ''

  337. 		form.sign_privacy = res.data.sign_privacy || ''

  338. 		form.sign_promise = res.data.sign_promise || ''

  339. 		form.income_amount = res.data.income_amount || ''

  340. 		// 设置地区选择器默认索引

  341. 		if (form.province_code && allRegions.value.length) {

  342. 			const pIdx = allRegions.value.findIndex(r => r.code === form.province_code)

  343. 			if (pIdx >= 0) {

  344. 				const cities = allRegions.value[pIdx].children || []

  345. 				const cIdx = cities.findIndex(r => r.code === form.city_code)

  346. 				const ci = cIdx >= 0 ? cIdx : 0

  347. 				const districts = (cities[ci] && cities[ci].children) || []

  348. 				const dIdx = districts.findIndex(r => r.code === form.district_code)

  349. 				buildRegionColumns(pIdx, ci)

  350. 				regionDefaultIndex.value = [pIdx, ci, dIdx >= 0 ? dIdx : 0]

  351. 			}

  352. 		}

  353. 	} catch (e) {}

  354. }

  355. 

  356. const chooseDocument = () => {

  357. 	uni.chooseImage({

  358. 		count: 9 - form.documents.length,

  359. 		sizeType: ['compressed'],

  360. 		sourceType: ['album', 'camera'],

  361. 		success: async (res) => {

  362. 			for (const filePath of res.tempFilePaths) {

  363. 				try {

  364. 					const uploadRes = await upload('/api/mp/upload', { filePath, name: 'file' })

  365. 					if (uploadRes.data && uploadRes.data.url) {

  366. 						form.documents.push(uploadRes.data.url)

  367. 					}

  368. 				} catch (e) {}

  369. 			}

  370. 		}

  371. 	})

  372. }

  373. 

  374. const previewImage = (idx) => {

  375. 	uni.previewImage({ urls: form.documents, current: idx })

  376. }

  377. 

  378. const handleSubmit = async () => {

  379. 	if (!info.value.gender && !form.gender) {

  380. 		return uni.showToast({ title: '请选择性别', icon: 'none' })

  381. 	}

  382. 	if (!form.province_code || !form.city_code || !form.district_code) {

  383. 		return uni.showToast({ title: '请选择省市区', icon: 'none' })

  384. 	}

  385. 	if (!form.address.trim()) {

  386. 		return uni.showToast({ title: '请填写详细地址', icon: 'none' })

  387. 	}

  388. 	// 已通过状态需要二次确认

  389. 	if (info.value.status === 1) {

  390. 		showConfirmPopup.value = true

  391. 		return

  392. 	}

  393. 	await doSubmit()

  394. }

  395. 

  396. const doSubmit = async () => {

  397. 	showConfirmPopup.value = false

  398. 	// 先请求订阅消息授权（用户拒绝也继续提交）

  399. 	await requestSubscribe()

  400. 	submitting.value = true

  401. 	try {

  402. 		const params = {

  403. 			gender: info.value.gender || form.gender,

  404. 			province_code: form.province_code,

  405. 			city_code: form.city_code,

  406. 			district_code: form.district_code,

  407. 			address: form.address.trim(),

  408. 			emergency_contact: form.emergency_contact,

  409. 			emergency_phone: form.emergency_phone,

  410. 			documents: form.documents,

  411. 			sign_income: form.sign_income,

  412. 			sign_privacy: form.sign_privacy,

  413. 			sign_promise: form.sign_promise,

  414. 			income_amount: form.income_amount || null,

  415. 			// #ifdef MP-WEIXIN

  416. 			mp_env_version: uni.getAccountInfoSync().miniProgram.envVersion || 'release'

  417. 			// #endif

  418. 		}

  419. 		await post('/api/mp/saveMyInfo', params)

  420. 		uni.showToast({ title: '提交成功', icon: 'success' })

  421. 		setTimeout(() => uni.navigateBack(), 1500)

  422. 	} catch (e) {

  423. 		if (e && e.msg) uni.showToast({ title: e.msg, icon: 'none' })

  424. 	} finally {

  425. 		submitting.value = false

  426. 	}

  427. }

  428. </script>

  429. 

  430. <style lang="scss" scoped>

  431. .page {

  432. 	min-height: 100vh;

  433. 	background: #f4f4f5;

  434. 	padding: 24rpx;

  435. 	padding-bottom: 240rpx;

  436. }

  437. 

  438. .section {

  439. 	background: #fff;

  440. 	border-radius: 10rpx;

  441. 	padding: 32rpx;

  442. 	margin-bottom: 24rpx;

  443. 	border: 1rpx solid #ebeef5;

  444. }

  445. 

  446. .reject-tip {

  447. 	display: flex;

  448. 	align-items: flex-start;

  449. 	padding: 24rpx 28rpx;

  450. 	background: #fff2f0;

  451. 	border: 1rpx solid #ffccc7;

  452. 	border-radius: 10rpx;

  453. 	margin-bottom: 24rpx;

  454. 

  455. 	.reject-text {

  456. 		flex: 1;

  457. 		font-size: 26rpx;

  458. 		color: #f5222d;

  459. 		margin-left: 16rpx;

  460. 		line-height: 1.5;

  461. 	}

  462. }

  463. 

  464. .section-title {

  465. 	display: flex;

  466. 	align-items: center;

  467. 	gap: 12rpx;

  468. 	font-size: 32rpx;

  469. 	font-weight: 600;

  470. 	color: #333;

  471. 	margin-bottom: 28rpx;

  472. }

  473. 

  474. .form-group {

  475. 	padding: 20rpx 0;

  476. 	border-bottom: 1rpx solid #f0f0f0;

  477. 

  478. 	&:last-child {

  479. 		border-bottom: none;

  480. 	}

  481. }

  482. 

  483. .form-label {

  484. 	font-size: 28rpx;

  485. 	color: #555;

  486. 	margin-bottom: 16rpx;

  487. 	display: block;

  488. }

  489. 

  490. .readonly-input {

  491. 	padding: 20rpx 24rpx;

  492. 	background: #f5f5f5;

  493. 	border: 1rpx solid #ddd;

  494. 	border-radius: 12rpx;

  495. 	font-size: 28rpx;

  496. 	color: #333;

  497. }

  498. 

  499. .gender-row {

  500. 	display: flex;

  501. 	gap: 20rpx;

  502. }

  503. 

  504. .gender-item {

  505. 	flex: 1;

  506. 	text-align: center;

  507. 	padding: 16rpx 0;

  508. 	border: 1rpx solid #ddd;

  509. 	border-radius: 8rpx;

  510. 	font-size: 28rpx;

  511. 	color: #333;

  512. 

  513. 	&.active {

  514. 		border-color: #0e63e3;

  515. 		color: #0e63e3;

  516. 		background: rgba(14, 99, 227, 0.05);

  517. 	}

  518. }

  519. 

  520. .region-row {

  521. 	display: flex;

  522. 	align-items: center;

  523. 	justify-content: space-between;

  524. 	padding: 20rpx 24rpx;

  525. 	border: 1rpx solid #ddd;

  526. 	border-radius: 8rpx;

  527. }

  528. 

  529. .region-text {

  530. 	font-size: 28rpx;

  531. 	color: #333;

  532. 

  533. 	&.placeholder {

  534. 		color: #c0c4cc;

  535. 	}

  536. }

  537. 

  538. .arrow {

  539. 	font-size: 28rpx;

  540. 	color: #c0c4cc;

  541. }

  542. 

  543. .contact-row {

  544. 	display: flex;

  545. 	gap: 16rpx;

  546. }

  547. 

  548. .contact-input {

  549. 	flex: 1;

  550. }

  551. 

  552. .upload-tip {

  553. 	font-size: 26rpx;

  554. 	color: #888;

  555. 	line-height: 1.6;

  556. 	margin-bottom: 20rpx;

  557. }

  558. 

  559. .upload-row {

  560. 	display: flex;

  561. 	gap: 16rpx;

  562. 	flex-wrap: wrap;

  563. }

  564. 

  565. .upload-item {

  566. 	position: relative;

  567. 	width: 180rpx;

  568. 	height: 180rpx;

  569. }

  570. 

  571. .upload-img {

  572. 	width: 180rpx;

  573. 	height: 180rpx;

  574. 	border-radius: 8rpx;

  575. 	border: 1rpx solid #eee;

  576. }

  577. 

  578. .upload-del {

  579. 	position: absolute;

  580. 	top: -10rpx;

  581. 	right: -10rpx;

  582. 	width: 40rpx;

  583. 	height: 40rpx;

  584. 	background: rgba(0, 0, 0, 0.5);

  585. 	color: #fff;

  586. 	border-radius: 50%;

  587. 	font-size: 24rpx;

  588. 	display: flex;

  589. 	align-items: center;

  590. 	justify-content: center;

  591. }

  592. 

  593. .upload-box {

  594. 	width: 180rpx;

  595. 	height: 180rpx;

  596. 	border: 2rpx dashed #ccc;

  597. 	border-radius: 8rpx;

  598. 	display: flex;

  599. 	flex-direction: column;

  600. 	align-items: center;

  601. 	justify-content: center;

  602. 	background: #fafafa;

  603. }

  604. 

  605. .upload-icon {

  606. 	font-size: 56rpx;

  607. 	color: #ccc;

  608. }

  609. 

  610. .upload-text {

  611. 	font-size: 22rpx;

  612. 	color: #999;

  613. 	margin-top: 4rpx;

  614. }

  615. 

  616. .sign-item {

  617. 	display: flex;

  618. 	align-items: center;

  619. 	justify-content: space-between;

  620. 	padding: 28rpx 0;

  621. 	border-bottom: 1rpx solid #f0f0f0;

  622. 

  623. 	&:last-child {

  624. 		border-bottom: none;

  625. 	}

  626. }

  627. 

  628. .sign-left {

  629. 	display: flex;

  630. 	flex-direction: column;

  631. 	gap: 8rpx;

  632. }

  633. 

  634. .sign-name {

  635. 	font-size: 28rpx;

  636. 	color: #333;

  637. }

  638. 

  639. .sign-status {

  640. 	font-size: 24rpx;

  641. 	color: #f5222d;

  642. 

  643. 	&.signed {

  644. 		color: #52c41a;

  645. 	}

  646. }

  647. 

  648. .sign-btns {

  649. 	display: flex;

  650. 	gap: 12rpx;

  651. 	flex-shrink: 0;

  652. }

  653. 

  654. .sign-btn {

  655. 	padding: 10rpx 28rpx;

  656. 	border-radius: 28rpx;

  657. 	font-size: 24rpx;

  658. 	text-align: center;

  659. 	flex-shrink: 0;

  660. 

  661. 	&.primary {

  662. 		background: #0e63e3;

  663. 		color: #fff;

  664. 	}

  665. 

  666. 	&.view {

  667. 		background: #f0f5ff;

  668. 		color: #0e63e3;

  669. 		border: 1rpx solid #d0e0ff;

  670. 	}

  671. 

  672. 	&.resign {

  673. 		background: #fff7e6;

  674. 		color: #fa8c16;

  675. 		border: 1rpx solid #ffe7ba;

  676. 	}

  677. 

  678. 	&:active {

  679. 		opacity: 0.7;

  680. 	}

  681. }

  682. 

  683. .btn-wrap {

  684. 	position: fixed;

  685. 	bottom: 0;

  686. 	left: 0;

  687. 	right: 0;

  688. 	background: #fff;

  689. 	padding: 20rpx 32rpx;

  690. 	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

  691. 	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);

  692. 	z-index: 100;

  693. }

  694. 

  695. .confirm-popup {

  696. 	padding: 48rpx 40rpx 40rpx;

  697. 	width: 560rpx;

  698. }

  699. 

  700. .confirm-title {

  701. 	font-size: 34rpx;

  702. 	font-weight: 600;

  703. 	color: #333;

  704. 	text-align: center;

  705. 	margin-bottom: 28rpx;

  706. }

  707. 

  708. .confirm-content {

  709. 	font-size: 28rpx;

  710. 	color: #666;

  711. 	line-height: 1.7;

  712. 	text-align: center;

  713. 	margin-bottom: 40rpx;

  714. }

  715. 

  716. .confirm-btns {

  717. 	display: flex;

  718. 	gap: 24rpx;

  719. }

  720. </style>