pageFour.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967
  1. <template>
  2. <view class="page-container">
  3. <!-- 入库信息卡片 -->
  4. <view class="card_wrap">
  5. <u--form labelPosition="top" :model="warehouseInfo" ref="form" class="address-section">
  6. <view class="address-header">
  7. <u-icon name="car-fill" size="36rpx" color="#108cff" class="location-icon"></u-icon>
  8. <text class="address-title">入库信息</text>
  9. </view>
  10. <!-- 编码和快递单号同一行 -->
  11. <u-row class="info-row" justify="space-between">
  12. <u-col span="4.5">
  13. <u-form-item label="编码" prop="codeStorage">
  14. <u--input v-model="warehouseInfo.codeStorage" placeholder="请输入编码" class="info-input" />
  15. </u-form-item>
  16. </u-col>
  17. <u-col span="4.5">
  18. <u-form-item label="快递单号" prop="expressOrderNo">
  19. <u--input v-model="warehouseInfo.expressOrderNo" placeholder="请输入快递单号" class="info-input" />
  20. </u-form-item>
  21. </u-col>
  22. <u-col span="2">
  23. <u-form-item label="物流图片" prop="uploadedImage">
  24. <view class="image-uploader" @click="selectImage">
  25. <u-icon v-if="!warehouseInfo.uploadedImage" name="camera-fill" size="48rpx"
  26. color="#909399" class="camera-icon"></u-icon>
  27. <image v-else :src="warehouseInfo.uploadedImage" mode="aspectFill"
  28. class="image-preview">
  29. </image>
  30. </view>
  31. </u-form-item>
  32. </u-col>
  33. </u-row>
  34. <!-- 单独一行的收单物品 -->
  35. <u-row class="info-row">
  36. <u-col span="12">
  37. <u-form-item label="收单物品" prop="item">
  38. <u--input v-model="warehouseInfo.item" placeholder="请输入收单物品" class="info-input" />
  39. </u-form-item>
  40. </u-col>
  41. </u-row>
  42. <!-- 查码费和表款同一行 -->
  43. <u-row class="info-row" justify="space-between">
  44. <u-col span="5.8">
  45. <u-form-item label="查码费">
  46. <u--input v-model="warehouseInfo.checkCodeFee" placeholder="请输入查码费" class="info-input"
  47. type="number" />
  48. </u-form-item>
  49. </u-col>
  50. <u-col span="5.8">
  51. <u-form-item label="表款">
  52. <u--input v-model="warehouseInfo.watchPrice" placeholder="请输入表款" class="info-input"
  53. type="number" />
  54. </u-form-item>
  55. </u-col>
  56. </u-row>
  57. <u-row class="info-row" justify="space-between">
  58. <u-col span="5.8">
  59. <u-form-item label="好处费">
  60. <u--input v-model="warehouseInfo.benefitFee" placeholder="请输入好处费" class="info-input"
  61. type="number" />
  62. </u-form-item>
  63. </u-col>
  64. <u-col span="5.8">
  65. <u-form-item label="运费">
  66. <u--input v-model="warehouseInfo.freight" placeholder="请输入运费" class="info-input"
  67. type="number" />
  68. </u-form-item>
  69. </u-col>
  70. </u-row>
  71. <!-- 维修金额和毛业绩同一行 -->
  72. <u-row class="info-row" justify="space-between">
  73. <u-col span="5.8">
  74. <u-form-item label="维修金额">
  75. <u--input v-model="warehouseInfo.repairAmount" placeholder="请输入维修金额" class="info-input"
  76. type="number" />
  77. </u-form-item>
  78. </u-col>
  79. <u-col span="5.8">
  80. <u-form-item label="毛业绩">
  81. <u--input v-model="warehouseInfo.grossPerformance" placeholder="请输入毛业绩" class="info-input"
  82. type="number" />
  83. </u-form-item>
  84. </u-col>
  85. </u-row>
  86. <!-- 收单备注 -->
  87. <u-row class="info-row">
  88. <u-col span="12">
  89. <u-form-item label="收单备注">
  90. <u--textarea v-model="warehouseInfo.remarks" placeholder="请输入收单备注" class="info-input"
  91. confirmType="done" rows="4" />
  92. </u-form-item>
  93. </u-col>
  94. </u-row>
  95. </u--form>
  96. </view>
  97. <!-- 新添加的卡片 -->
  98. <view class="card_wrap">
  99. <view class="address-section">
  100. <view class="address-header">
  101. <u-icon name="list" size="36rpx" color="#108cff" class="location-icon"></u-icon>
  102. <text class="address-title">分成信息</text>
  103. <u-button type="primary" plain shape="circle" size="mini" class="add-button" @click="addSplit">
  104. <u-icon name="plus" size="24rpx" color="#108cff"></u-icon>
  105. <text>添加</text>
  106. </u-button>
  107. </view>
  108. <!-- 分成信息表格 -->
  109. <view class="split-table">
  110. <u-row class="split-table-header">
  111. <u-col span="4">
  112. <text class="header-text">关联</text>
  113. </u-col>
  114. <u-col span="2">
  115. <text class="header-text">分成人</text>
  116. </u-col>
  117. <u-col span="2">
  118. <text class="header-text">比例</text>
  119. </u-col>
  120. <u-col span="1">
  121. <text class="header-text">类型</text>
  122. </u-col>
  123. <u-col span="1">
  124. <text class="header-text">公司</text>
  125. </u-col>
  126. <u-col span="2" class="action-column">
  127. <text class="header-text">操作</text>
  128. </u-col>
  129. </u-row>
  130. <u-row v-for="(item, index) in profitSharingList" :key="item.uuid" class="split-table-row">
  131. <u-col span="4">
  132. <view class="table-cell">
  133. <!-- <select v-model="item.deptId" class="custom-select">
  134. <option v-for="option in associationOptions" :key="option.id" :value="option.id">
  135. {{ option.label }}
  136. </option>
  137. </select> -->
  138. <u-button @click='handleSelectOrg(item)' :text="item.orgName" plain></u-button>
  139. </view>
  140. </u-col>
  141. <u-col span="2">
  142. <view class="table-cell">
  143. <!-- <select v-model="item.userId" class="custom-select">
  144. <option value="">无</option>
  145. <option v-for="person in item.personOptions" :key="person.id" :value="person.id">
  146. {{ person.label }}
  147. </option>
  148. </select> -->
  149. <u-button @click="handleSelectPerson(item)" :text="item.userName" plain></u-button>
  150. </view>
  151. </u-col>
  152. <u-col span="2">
  153. <view class="table-cell">
  154. <u--input v-model="item.commissionRate" type="number" class="percentage-input"
  155. @input="handlePercentageInput(item)" min="0" max="100" precision="0" />
  156. </view>
  157. </u-col>
  158. <u-col span="1">
  159. <view class="table-cell">
  160. <view :class="['account-type', item.accountType == '1' ? 'frontend' : 'backend']"
  161. @click="toggleAccountType(item)" style="cursor: pointer;">
  162. {{ item.accountType == '1' ? '前' : '后' }}
  163. </view>
  164. </view>
  165. </u-col>
  166. <u-col span="1">
  167. <view class="table-cell">
  168. <view class="radio-wrapper" @click="toggleBelongToCompany(item)">
  169. <view :class="['radio-circle', item.isCompanyPerformance == '1' ? 'active' : '']">
  170. <u-icon v-if="item.isCompanyPerformance == '1'" name="checkmark" size="20rpx"
  171. color="#fff"></u-icon>
  172. </view>
  173. </view>
  174. </view>
  175. </u-col>
  176. <u-col span="2" class="action-column">
  177. <view class="table-cell">
  178. <u-button type="error" plain shape="circle" size="mini"
  179. @click="deleteRow(item.id, item.uuid)" class='delectBtn'>
  180. <u-icon name="trash" size="20rpx" color="#ff6b6b"></u-icon>
  181. </u-button>
  182. </view>
  183. </u-col>
  184. </u-row>
  185. </view>
  186. </view>
  187. </view>
  188. <!-- 确认入库按钮 -->
  189. <div class="confirm-button-container">
  190. <u-button type="success" @click="confirmWarehouseEntry" style="border-radius: 11px;">
  191. <u-icon name="checkmark-circle-fill" size="28rpx" color="#fff"></u-icon>
  192. <text style="margin-left: 8rpx;">确认入库</text>
  193. </u-button>
  194. </div>
  195. <!-- 组织选择 -->
  196. <u-picker :show="showOrgPicker" title="请选择组织" :columns="columnsOrgList" keyName="label"
  197. @confirm="handleOrgConfirmOrg" @cancel='showOrgPicker = false'></u-picker>
  198. <!-- 人员选择 -->
  199. <u-picker :show="showPersonPicker" title="请选择分成人" :columns="columnsPersonList" keyName="label"
  200. @confirm="handleConfirmPerson" @cancel='handleCancelPerson'></u-picker>
  201. <u-toast ref="uToast"></u-toast>
  202. </view>
  203. </template>
  204. <script>
  205. export default {
  206. props: {
  207. orderDetail: {
  208. type: Object,
  209. default: () => { },
  210. },
  211. currentReceipt: {
  212. type: Object,
  213. default: () => { },
  214. },
  215. },
  216. watch: {
  217. currentReceipt: {
  218. handler(newVal) {
  219. if (newVal) {
  220. console.log('这里是page4', newVal)
  221. // "searchValue": null,
  222. // "createBy": "12234",
  223. // "createTime": "2025-12-25 13:39:25",
  224. // "updateBy": "12234",
  225. // "updateTime": "2025-12-27 09:33:05",
  226. // "remark": null,
  227. // "params": {},
  228. // "id": "4347",
  229. // "sendFormId": "5464",
  230. // "clueId": "1973381744953516033",
  231. // "item": "测试发单-VV", //收单物品
  232. // "brand": "LV",
  233. // "needCheckCode": 1,
  234. // "code": "111",
  235. // "paymentAmount": 99.00,
  236. // "phone": "18692257000",
  237. // "tableFee": 999999.00,
  238. // "benefitFee": 666.00, //好处费
  239. // "freight": 666666.00, //运费
  240. // "checkCodeFee": 666.00, //查码费
  241. // "totalCost": null,
  242. // "sellingPrice": 125000.00,
  243. // "performance": null,
  244. // "receiptRemark": null,
  245. // "repairAmount": 666.00, //维修金额
  246. // "grossPerformance": 666.00, //毛业绩
  247. // "expressOrderNo": "666", //快递单号
  248. // "fileIds": "",
  249. // "model": "lvvvv",
  250. // "splitRatio": null,
  251. // "customerServiceName": "1",
  252. // "deptId": "373",
  253. // "category": "2",
  254. // "delFlag": null,
  255. // "idCard": "444",
  256. // "paymentMethod": null,
  257. // "bankCardNumber": "333",
  258. // "bankName": "222",
  259. // "customName": "111"
  260. const data = newVal
  261. this.warehouseInfo = {
  262. codeStorage: data.code,//编码
  263. expressOrderNo: data.expressOrderNo || '',//快递单号
  264. uploadedImage: data.receiptRemark?.split(';')[1] || '',//物流图片 截取备注第二部分
  265. item: data.item || '',//收单物品
  266. checkCodeFee: data.checkCodeFee || '',//查码费
  267. watchPrice: data.tableFee || '',//表款
  268. benefitFee: data.benefitFee || '',//好处费
  269. freight: data.freight || '',//运费
  270. repairAmount: data.repairAmount || '',//维修金额
  271. grossPerformance: data.grossPerformance || '',//毛业绩
  272. remarks: data.receiptRemark?.split(';')[0] || '',//收单备注 截取备注第一部分
  273. }
  274. this.$nextTick(() => {
  275. this.getShareList()
  276. })
  277. }
  278. },
  279. }
  280. },
  281. data() {
  282. return {
  283. // 入库信息相关的数据
  284. warehouseInfo: {
  285. codeStorage: '',//编码
  286. expressOrderNo: '',//快递单号
  287. uploadedImage: '',//物流图片
  288. item: '',//收单物品
  289. checkCodeFee: '',//查码费
  290. watchPrice: '',//表款
  291. benefitFee: '',//好处费
  292. freight: '',//运费
  293. repairAmount: '',//维修金额
  294. grossPerformance: '',//毛业绩
  295. remarks: '',//收单备注
  296. },
  297. // 分成信息相关的数据
  298. profitSharingList: [
  299. ],
  300. // 关联选项列表
  301. // associationOptions: [],
  302. // 分成人选项列表
  303. // personOptions: [],
  304. // 表单验证规则
  305. showOrgPicker: false,
  306. showPersonPicker: false,
  307. columnsOrgList: [],
  308. columnsPersonList: [],
  309. };
  310. },
  311. mounted() {
  312. // 获取分成人名单
  313. this.$nextTick(() => {
  314. this.getCommissionUserList();
  315. })
  316. },
  317. methods: {
  318. // 选择物流图片
  319. selectImage() {
  320. uni.chooseImage({
  321. count: 1,
  322. sizeType: ['compressed'],
  323. sourceType: ['album', 'camera'],
  324. success: async (res) => {
  325. const tempFilePath = res.tempFilePaths[0];
  326. //把选择的图片上传给服务器,然后获取返回路径
  327. const rep = await uni.$u.api.uploadFile(tempFilePath)
  328. if (rep.code == 200) {
  329. console.log('上传成功=====>', rep.data.url)
  330. this.warehouseInfo.uploadedImage = rep.data.url
  331. }
  332. }
  333. });
  334. },
  335. // 添加分成行
  336. addSplit() {
  337. // 添加新行
  338. this.profitSharingList.push({
  339. deptId: '',
  340. accountType: '1',
  341. userId: '',
  342. percentage: 0,
  343. isCompanyPerformance: '2',
  344. orgName: '',
  345. userName: '',
  346. id: '',
  347. uuid: Math.random()//唯一标识,仅vfor使用
  348. });
  349. // 重新计算所有行的比例
  350. },
  351. // 切换账户类型
  352. toggleAccountType(item) {
  353. item.accountType = item.accountType == '1' ? '2' : '1';
  354. // 重新计算分成比例
  355. },
  356. // 处理百分比输入
  357. handlePercentageInput(item) {
  358. // 确保输入是数字
  359. let value = Number(item.percentage);
  360. // 验证输入值是否在有效范围内(0-100)
  361. if (isNaN(value)) {
  362. item.percentage = 0;
  363. } else if (value < 0) {
  364. item.percentage = 0;
  365. } else if (value > 100) {
  366. item.percentage = 100;
  367. } else {
  368. // 确保是整数
  369. item.percentage = Math.floor(value);
  370. }
  371. },
  372. // 切换归属公司状态
  373. toggleBelongToCompany(item) {
  374. item.isCompanyPerformance = item.isCompanyPerformance == '1' ? '2' : '1';
  375. },
  376. // 确认入库方法
  377. confirmWarehouseEntry() {
  378. console.log('确认入库', this.orderDetail.id)
  379. uni.showModal({
  380. title: '确认入库',
  381. content: `是否确认入库改订单:${this.orderDetail.item}?`,
  382. success: async (res) => {
  383. if (res.confirm) {
  384. await uni.$u.api.oderForm({
  385. status: "3",
  386. id: this.orderDetail.id,
  387. });
  388. //上传物流表单数据
  389. this.$emit('confirmInterStore', {
  390. warehouseInfo: this.warehouseInfo,
  391. })
  392. //上传分成数据
  393. await this.addShare()
  394. this.$refs.uToast.show({
  395. type: "success",
  396. message: "入库成功",
  397. iconUrl: "https://uviewui.com/demo/toast/success.png",
  398. complete() {
  399. uni.navigateTo({
  400. url: '/pages/pagereceivecenter/pagereceivecenter',
  401. })
  402. },
  403. });
  404. } else if (res.cancel) {
  405. // 用户点击了取消,不执行任何操作
  406. uni.$u.toast('已取消入库');
  407. }
  408. }
  409. })
  410. },
  411. // 获取分成人名单
  412. async getCommissionUserList() {
  413. const commissionUserList = await uni.$u.api.getCustomerManagerAllList()
  414. console.log('分成人名单', commissionUserList.data[0].children)
  415. // this.associationOptions = commissionUserList.data[0].children
  416. this.columnsOrgList = [commissionUserList.data[0].children]
  417. },
  418. //初始化分成比例
  419. async getShareList() {
  420. const { rows, total } = await uni.$u.api.selectCommissionList({
  421. pageSize: 9999,
  422. pageNum: 1,
  423. }, { sendFormId: this.currentReceipt.sendFormId, });
  424. console.log('分成比例表格数据', rows)
  425. rows.map(item => {
  426. item.uuid = Math.random()//唯一标识
  427. })
  428. this.profitSharingList = rows
  429. },
  430. //上传分成
  431. addShare() {
  432. this.profitSharingList.forEach(async item => {
  433. const data = {
  434. id: item.id || '',
  435. accountType: item.accountType == '1' ? 1 : 2,
  436. clueId: this.currentReceipt.clueId,
  437. commissionRate: item.commissionRate,
  438. isCompanyPerformance: item.isCompanyPerformance == '1' ? 1 : 2,
  439. sendFormId: this.currentReceipt.sendFormId,
  440. userId: item.userId,
  441. userName: item.userName,
  442. }
  443. if (item.id) {
  444. //更新
  445. await uni.$u.api.clueCommissionUpdate(data);
  446. } else {
  447. //新增
  448. await uni.$u.api.clueCommissionAdd(data);
  449. }
  450. });
  451. },
  452. //删除分成
  453. async deleteRow(id, uuid) {
  454. console.log(id, 'id', uuid, 'uuid')
  455. //如果没有id说明是新增的,直接删除数组中的项
  456. if (!id) {
  457. this.profitSharingList = this.profitSharingList.filter(item => item.uuid != uuid)
  458. uni.$u.toast('删除成功')
  459. return
  460. }
  461. try {
  462. await uni.$u.api.deleteClueCommissionForm(id)
  463. uni.$u.toast('删除成功')
  464. this.getShareList()
  465. } catch (error) {
  466. uni.$u.toast('删除失败,请稍后重试')
  467. }
  468. },
  469. //打开选择框
  470. handleSelectOrg(item) {
  471. console.log(item.uuid, '当前选择的行的uuid')
  472. this.currentEditItem = item.uuid
  473. this.showOrgPicker = true
  474. },
  475. //选择当前的分成人
  476. handleSelectPerson(item) {
  477. console.log(item, '当前选择的行')
  478. this.currentEditItem = item.uuid
  479. //获取当前选择组织的分成人名单
  480. // 获取当前行的关联id
  481. const deptId = item.deptId
  482. const org = this.columnsOrgList[0].find(org => org.id == deptId)
  483. console.log(org, '当前选择的行的组织')
  484. if (org) {
  485. this.columnsPersonList = [org.children]
  486. }
  487. // 把当前选择组织的分成人名单赋值给当前行的分成人选项列表
  488. this.showPersonPicker = true
  489. },
  490. //确认选择组织
  491. handleOrgConfirmOrg({ columnIndex, value, values },) {
  492. console.log(value, '选择的组织')
  493. //把值赋值给当前行
  494. this.profitSharingList.forEach(item => {
  495. if (item.uuid == this.currentEditItem) {
  496. item.orgName = value[0].label
  497. item.deptId = value[0].id
  498. // item.personOptions = value[0].children
  499. //将当前的行的分成人清空
  500. item.userId = ''
  501. item.userName = ''
  502. }
  503. })
  504. this.showOrgPicker = false
  505. },
  506. //确认选择人
  507. handleConfirmPerson({ columnIndex, value, values },) {
  508. console.log(value, '选择的人')
  509. //把值赋值给当前行
  510. this.profitSharingList.forEach(item => {
  511. if (item.uuid == this.currentEditItem) {
  512. item.userName = value[0].label
  513. item.userId = value[0].id
  514. }
  515. })
  516. this.columnsPersonList = []
  517. this.showPersonPicker = false
  518. },
  519. // 取消选择人
  520. handleCancelPerson() {
  521. this.columnsPersonList = []
  522. this.showPersonPicker = false
  523. }
  524. }
  525. };
  526. </script>
  527. <style lang="scss" scoped>
  528. // 导入公共样式
  529. @import './common.scss';
  530. // 主样式
  531. .page-container {
  532. box-sizing: border-box;
  533. padding: 0;
  534. background-color: map-get($colors, bg);
  535. font-family: map-get($font, family);
  536. -webkit-font-smoothing: map-get($font, smoothing);
  537. font-smoothing: map-get($font, smoothing);
  538. }
  539. .address-section {
  540. padding: map-get($sizes, padding-sm) map-get($sizes, padding);
  541. .u-col {
  542. padding: 0;
  543. box-sizing: border-box;
  544. }
  545. .u-col:first-child {
  546. padding-right: 15rpx;
  547. }
  548. .u-col:last-child {
  549. padding-left: 15rpx;
  550. }
  551. }
  552. // 表单行样式
  553. .info-row {
  554. margin-bottom: 20rpx;
  555. box-sizing: border-box;
  556. padding: 0;
  557. }
  558. // 表单标签样式
  559. .info-label {
  560. @include font-styles($size: tiny, $weight: regular, $color: tertiary);
  561. margin-bottom: 8rpx;
  562. display: block;
  563. }
  564. // 输入框样式
  565. .info-input {
  566. height: 65rpx;
  567. border-radius: 8rpx;
  568. border: 1rpx solid #e5e7eb;
  569. padding: 20rpx 16rpx;
  570. width: 100%;
  571. box-sizing: border-box;
  572. @include font-styles($size: small, $weight: regular, $color: secondary);
  573. // textarea特殊样式
  574. &[type="textarea"] {
  575. min-height: 160rpx;
  576. resize: vertical;
  577. padding-top: 20rpx;
  578. padding-bottom: 20rpx;
  579. }
  580. }
  581. // 防止表单label换行
  582. ::v-deep .u-form-item__body__left__content__label {
  583. white-space: nowrap;
  584. }
  585. // 图片上传样式
  586. .image-uploader {
  587. width: 100%;
  588. height: 65rpx;
  589. border: 2rpx dashed #409eff;
  590. border-radius: 8rpx;
  591. display: flex;
  592. align-items: center;
  593. justify-content: center;
  594. cursor: pointer;
  595. background-color: #ecf5ff;
  596. box-sizing: border-box;
  597. overflow: hidden;
  598. transition: all 0.3s ease;
  599. &:hover {
  600. border-color: #66b1ff;
  601. background-color: #f0f9ff;
  602. transform: scale(1.02);
  603. }
  604. }
  605. .camera-icon {
  606. margin: 0;
  607. font-size: 32rpx;
  608. color: #409eff;
  609. transition: all 0.3s ease;
  610. }
  611. .image-uploader:hover .camera-icon {
  612. color: #66b1ff;
  613. transform: scale(1.1);
  614. }
  615. .image-preview {
  616. width: 100%;
  617. height: 100%;
  618. object-fit: cover;
  619. border-radius: 10rpx;
  620. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  621. transition: all 0.3s ease;
  622. }
  623. .image-uploader:hover .image-preview {
  624. transform: scale(1.02);
  625. box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  626. }
  627. .hidden-input {
  628. display: none;
  629. }
  630. // 分成信息卡片样式
  631. .address-header {
  632. display: flex;
  633. align-items: center;
  634. justify-content: space-between;
  635. margin-bottom: 20rpx;
  636. .address-title {
  637. @include font-styles($size: small, $weight: medium, $color: primary);
  638. margin-left: 10rpx;
  639. }
  640. }
  641. .split-content {
  642. padding: 10rpx 0;
  643. }
  644. .split-item {
  645. display: flex;
  646. justify-content: space-between;
  647. align-items: center;
  648. padding: 15rpx 0;
  649. border-bottom: 1rpx solid map-get($colors, border);
  650. &:last-child {
  651. border-bottom: none;
  652. }
  653. }
  654. .split-label {
  655. @include font-styles($size: tiny, $weight: regular, $color: tertiary);
  656. }
  657. .split-value {
  658. @include font-styles($size: small, $weight: regular, $color: secondary);
  659. }
  660. .add-button {
  661. padding: 0;
  662. width: 50rpx;
  663. height: 50rpx;
  664. display: flex;
  665. align-items: center;
  666. justify-content: center;
  667. }
  668. /* 分成信息表格样式 */
  669. .split-table {
  670. width: 100%;
  671. margin-top: 20rpx;
  672. background-color: #fff;
  673. border-radius: 8rpx;
  674. overflow: hidden;
  675. }
  676. .split-table-header {
  677. background-color: #f5f7fa;
  678. padding: 15rpx 0;
  679. border-bottom: 1rpx solid #e4e7ed;
  680. }
  681. .split-table-row {
  682. padding: 15rpx 0;
  683. border-bottom: 1rpx solid #e4e7ed;
  684. align-items: center;
  685. &:last-child {
  686. border-bottom: none;
  687. }
  688. }
  689. .header-text {
  690. @include font-styles($size: tiny, $weight: regular, $color: tertiary);
  691. text-align: center;
  692. display: block;
  693. }
  694. .table-cell {
  695. display: flex;
  696. align-items: center;
  697. justify-content: center;
  698. padding: 0 10rpx;
  699. box-sizing: border-box;
  700. }
  701. .action-column {
  702. display: flex;
  703. align-items: center;
  704. justify-content: center;
  705. }
  706. /* 自定义下拉框样式 - 隐藏原生箭头 */
  707. .custom-select {
  708. width: 100%;
  709. height: 50rpx;
  710. border-radius: 0;
  711. border: 1rpx solid #e5e7eb;
  712. text-align: center;
  713. /* 增加右侧内边距,为自定义箭头留出空间 */
  714. @include font-styles($size: tiny, $weight: regular, $color: secondary);
  715. background-color: #fff;
  716. /* 确保隐藏所有浏览器的原生箭头 */
  717. appearance: none !important;
  718. -webkit-appearance: none !important;
  719. -moz-appearance: none !important;
  720. -o-appearance: none !important;
  721. cursor: pointer;
  722. /* 使用自定义SVG箭头 */
  723. background-repeat: no-repeat;
  724. background-position: right 8rpx center;
  725. background-size: 12rpx 12rpx;
  726. box-sizing: border-box;
  727. position: relative;
  728. /* 防止箭头在焦点状态下显示 */
  729. &:focus {
  730. outline: none;
  731. border-color: #409eff;
  732. box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
  733. }
  734. /* 针对IE/Edge浏览器的特殊处理 */
  735. &::-ms-expand {
  736. display: none !important;
  737. }
  738. /* 针对某些旧版浏览器的额外处理 */
  739. &::-webkit-select-arrow {
  740. display: none !important;
  741. }
  742. /* 添加伪元素覆盖可能残留的箭头 */
  743. &::after {
  744. content: '';
  745. position: absolute;
  746. right: 8rpx;
  747. top: 50%;
  748. transform: translateY(-50%);
  749. width: 12rpx;
  750. height: 12rpx;
  751. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23909399' d='M6 8l-4-4h8z'/%3E%3C/svg%3E");
  752. background-repeat: no-repeat;
  753. background-size: 100% 100%;
  754. pointer-events: none;
  755. z-index: 1;
  756. }
  757. }
  758. /* 百分比输入框样式 */
  759. .percentage-input {
  760. text-align: center;
  761. background-color: #f9f9f9;
  762. color: #606266;
  763. text-align: center;
  764. padding: 0rpx !important;
  765. }
  766. /* 账户类型标签样式 */
  767. .account-type {
  768. padding: 4rpx 16rpx;
  769. border-radius: 12rpx;
  770. font-size: 24rpx;
  771. font-weight: 500;
  772. color: #fff;
  773. text-align: center;
  774. }
  775. .account-type.frontend {
  776. background-color: #409eff;
  777. }
  778. .account-type.backend {
  779. background-color: #909399;
  780. }
  781. /* 调整表格布局,使其更紧凑 */
  782. .split-table {
  783. width: 100%;
  784. margin-top: 10rpx;
  785. }
  786. .split-table-header,
  787. .split-table-row {
  788. padding: 10rpx 0;
  789. }
  790. .table-cell {
  791. padding: 0 5rpx;
  792. }
  793. /* 归属公司单选框样式 */
  794. .radio-wrapper {
  795. cursor: pointer;
  796. display: flex;
  797. align-items: center;
  798. justify-content: center;
  799. }
  800. .radio-circle {
  801. width: 32rpx;
  802. height: 32rpx;
  803. border-radius: 50%;
  804. border: 2rpx solid #dcdfe6;
  805. display: flex;
  806. align-items: center;
  807. justify-content: center;
  808. transition: all 0.3s ease;
  809. }
  810. .radio-circle.active {
  811. border-color: #67c23a;
  812. background-color: #67c23a;
  813. }
  814. /* 确认入库按钮样式 */
  815. .confirm-button-container {
  816. display: flex;
  817. justify-content: center;
  818. align-items: center;
  819. padding: 40rpx 0;
  820. margin-top: 20rpx;
  821. }
  822. /* 响应式布局调整 */
  823. @media screen and (max-width: 750rpx) {
  824. .split-table {
  825. overflow-x: auto;
  826. }
  827. .custom-select {
  828. width: 100%;
  829. }
  830. .account-type {
  831. padding: 2rpx 10rpx;
  832. font-size: 22rpx;
  833. }
  834. }
  835. @media screen and (min-width: 751rpx) {
  836. .table-cell {
  837. padding: 0 10rpx;
  838. }
  839. }
  840. .u-button {
  841. height: 60rpx;
  842. }
  843. .delectBtn {
  844. height: 40rpx;
  845. .u-button {
  846. width: 40rpx;
  847. }
  848. }
  849. .delectBtn ::v-deep .u-button--mini {
  850. min-width: 20rpx !important;
  851. }
  852. </style>