detail.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739
  1. <template>
  2. <view class="detail-page white-wrap">
  3. <view>
  4. <!-- 基础信息模块 -->
  5. <view class="section white-wrap base-info-wrap" v-if="info">
  6. <view class="title">
  7. {{ info.CompanyApprovalDetail.CompanyName }}
  8. <van-tag
  9. color="#ECF5FF"
  10. text-color="#4A83F1"
  11. style="margin-bottom:0;margin-left: 10rpx;"
  12. v-if="info.CompanyApprovalDetail.ApprovalCount>0"
  13. >
  14. 第{{ info.CompanyApprovalDetail.ApprovalCount }}次申请
  15. </van-tag>
  16. </view>
  17. <view class="base-info-list">
  18. <block v-for="item in baseInfo">
  19. <view :key="item.key">
  20. <text class="lable">{{ item.key }}:</text>
  21. <text :style="{ color: item.color }">{{ item.val }}</text>
  22. <van-tag v-if="item.tag" color="#ECF5FF" text-color="#4A83F1" style="margin-left:5px">
  23. {{ item.tag }}
  24. </van-tag>
  25. </view>
  26. <view style="padding-left:140rpx;margin-top:-10px" v-if="item.key==='合同期限'">({{item.val|formateYear}})</view>
  27. </block>
  28. <view v-if="info && info.CompanyApprovalDetail.ApproveStatus === '驳回'">
  29. <text class="lable" style="color:#FE6B7C">驳回理由:</text>
  30. <text style="color:#FE6B7C">{{ info.CompanyApprovalDetail.ApproveRemark }}</text>
  31. </view>
  32. </view>
  33. <image :src="info.CompanyApprovalDetail.statusImg" mode="aspectFill" class="status-img"></image>
  34. <!-- view class="status-img pass-img" v-if="info.CompanyApprovalDetail.ApproveStatus==='已审批'"></view>
  35. <view class="status-img fail-img" v-if="info.CompanyApprovalDetail.ApproveStatus==='驳回'"></view> -->
  36. </view>
  37. <!-- 套餐模块 -->
  38. <view class="section white-wrap variety-wrap package-type" v-if="packageType">
  39. <view class="title setmeal">套餐类型</view>
  40. <van-tag color="#ECF5FF" text-color="#4A83F1" custom-class="package-tag">{{ packageType == 1 ? '大套餐' : '小套餐' }}</van-tag>
  41. </view>
  42. <!-- 品种模块 -->
  43. <view class="section white-wrap variety-wrap" v-if="varietyInfo">
  44. <view class="title">{{ varietyInfo.title }}</view>
  45. <view class="variety-list">
  46. <view class="variety-item flex" v-for="item in varietyInfo.list" :key="item.ClassifyName">
  47. <view class="lable">{{ item.ClassifyName }}:</view>
  48. <view class="content">
  49. <van-tag color="#ECF5FF" text-color="#4A83F1" v-for="tag in item.Items"
  50. :key="tag.ChartPermissionId" custom-class="tag">{{ tag.PermissionName }}</van-tag>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. <!-- 合同模块 -->
  56. <view class="section white-wrap contract-wrap" v-if="constractFiles.length !== 0">
  57. <view class="title">查看合同附件</view>
  58. <view class="contract-list">
  59. <view class="contract-item" v-for="item in constractFiles" :key="item.url"
  60. @click="preViewContract(item)">
  61. <image class="contract-img" mode="aspectFill" :src="item.img"></image>
  62. </view>
  63. </view>
  64. </view>
  65. <!-- 客户信息模块 -->
  66. <view class="section white-wrap customer-wrap" v-if="showCustomerInfo && info">
  67. <view class="title">客户信息</view>
  68. <view class="customer-main-info">
  69. <view class="customer-info-item">
  70. <text>客户名称:</text>
  71. <text>{{ info.CompanyApprovalDetail.CompanyName }}</text>
  72. </view>
  73. <view class="customer-info-item">
  74. <text>社会信用码:</text>
  75. <text>{{ info.CompanyApprovalDetail.CreditCode }}</text>
  76. </view>
  77. <view class="customer-info-item">
  78. <text>地址:</text>
  79. <text>{{ info.CompanyApprovalDetail.Address }}</text>
  80. </view>
  81. </view>
  82. <view class="customer-info-list flex">
  83. <view class="customer-info-item flex" style="width:50%">
  84. <text style="flexShrink:0">客户类型:</text>
  85. <text>{{ info.CompanyApprovalDetail.CompanyType }}</text>
  86. </view>
  87. <view class="customer-info-item flex" style="width:50%">
  88. <text style="flexShrink:0">客户状态:</text>
  89. <text>{{ info.CompanyApprovalDetail.Status }}</text>
  90. </view>
  91. <view class="customer-info-item flex" style="width:50%">
  92. <text style="flexShrink:0">客户来源:</text>
  93. <text>{{ info.CompanyApprovalDetail.Source }}</text>
  94. </view>
  95. <view class="customer-info-item flex" style="width:50%">
  96. <text style="flexShrink:0">行业:</text>
  97. <text>{{ info.CompanyApprovalDetail.IndustryName }}</text>
  98. </view>
  99. <view class="customer-info-item flex" style="width:50%">
  100. <text style="flexShrink:0">申请销售:</text>
  101. <text>{{ info.CompanyApprovalDetail.SellerName }}</text>
  102. </view>
  103. </view>
  104. </view>
  105. <!-- 流程模块 -->
  106. <view class="section process-wrap">
  107. <view class="title" style="font-size: 16px;font-weight: bold;">审批流程</view>
  108. <steps :data="info.FlowNodeList"></steps>
  109. </view>
  110. </view>
  111. <!-- 审批按钮 -->
  112. <view class="fix-bottom-wrap btns-wrap flex" v-if="info &&info.CompanyApprovalDetail.OpButton&& info.CompanyApprovalDetail.ApproveStatus === '待审批'">
  113. <button class="pass-btn" @click="handlePass">通过</button>
  114. <button class="refuse-btn" @click="handleRefuse">驳回</button>
  115. </view>
  116. <van-dialog id="van-dialog" />
  117. </view>
  118. </template>
  119. <script>
  120. import {apiCustomeDetail,apiCustomeContractDetail,apiCustomeApprove} from '@/api/approve/custome.js'
  121. import {preViewFile} from '../utils/util.js'
  122. import steps from '../components/steps.vue'
  123. import {CalculationDate} from '@/utils/calculationDate.js'
  124. export default {
  125. components:{
  126. steps
  127. },
  128. filters:{
  129. formateYear(time){
  130. let s=time.replace(/\./g, '-').split('~')[0]
  131. let e=time.replace(/\./g, '-').split('~')[1]
  132. return `有效期为 ${CalculationDate(s,e)} `;
  133. }
  134. },
  135. computed: {
  136. //是否显示客户信息模块
  137. showCustomerInfo() {
  138. if (this.info && (this.info.CompanyApprovalDetail.ApplyMethod === 2 || this.info.CompanyApprovalDetail
  139. .ApplyMethod === 4)) {
  140. return false;
  141. } else {
  142. return true;
  143. }
  144. },
  145. },
  146. data() {
  147. return {
  148. id: null,
  149. info: null,
  150. baseInfo: null, //顶部基础信息
  151. varietyInfo: null, //品种信息
  152. constractFiles: [], //合同文件
  153. packageType:'',//套餐类型
  154. };
  155. },
  156. onLoad(options) {
  157. this.id = options.id||0
  158. },
  159. onShow() {
  160. this.getDetail()
  161. },
  162. onPullDownRefresh() {
  163. this.getDetail()
  164. setTimeout(() => {
  165. uni.stopPullDownRefresh()
  166. }, 1000)
  167. },
  168. methods: {
  169. // 同意
  170. async handlePass() {
  171. const res = await apiCustomeApprove({
  172. CompanyApprovalId: Number(this.info.CompanyApprovalDetail.CompanyApprovalId),
  173. CompanyContractId: Number(this.info.CompanyApprovalDetail.CompanyContractId),
  174. CompanyId: Number(this.info.CompanyApprovalDetail.CompanyId),
  175. Remark: "",
  176. Status: 1,
  177. })
  178. if (res.code === 200) {
  179. this.$dialog.alert({
  180. title: "处理成功",
  181. confirmButtonColor: "#5890FB",
  182. }).then(() => {
  183. // on close
  184. this.getDetail()
  185. // 更新列表
  186. uni.$emit('customeApproveListUpdate',{CompanyApprovalId:this.id})
  187. });
  188. }
  189. },
  190. //拒绝
  191. handleRefuse(){
  192. const data=this.info.CompanyApprovalDetail
  193. uni.navigateTo({
  194. url:`./reason?CompanyApprovalId=${data.CompanyApprovalId}&CompanyContractId=${data.CompanyContractId}&CompanyId=${data.CompanyId}`
  195. })
  196. },
  197. // 获取审批单详情
  198. async getDetail() {
  199. const res = await apiCustomeDetail({
  200. ApprovalId: this.id
  201. })
  202. if (res.code === 200) {
  203. this.info = res.data
  204. console.log(this.info);
  205. // 初始化状态
  206. let statusImg=''
  207. switch(res.data.CompanyApprovalDetail.ApproveStatus){
  208. case '已审批':
  209. statusImg=require('../static/pass-icon.png')
  210. break;
  211. case '驳回':
  212. statusImg=require('../static/fail-icon.png')
  213. break;
  214. }
  215. this.info.CompanyApprovalDetail.statusImg=statusImg
  216. let contractInfo = null
  217. // 如果有合同id 则获取合同数据
  218. if (res.data.CompanyApprovalDetail.CompanyContractId != 0) {
  219. const contractRes = await apiCustomeContractDetail({
  220. CompanyId: res.data.CompanyApprovalDetail.CompanyId,
  221. CompanyContractId: res.data.CompanyApprovalDetail.CompanyContractId
  222. })
  223. if (contractRes.code === 200) {
  224. contractInfo = contractRes.data
  225. this.packageType = contractRes.data.PackageType
  226. }
  227. }
  228. this.initTopInfo(res.data, contractInfo)
  229. this.initVarietyInfo(res.data, contractInfo)
  230. this.initContractFiles(res.data, contractInfo)
  231. }
  232. },
  233. // 预览合同文件
  234. preViewContract(e) {
  235. if (e.type === "pdf") {
  236. preViewFile(e.url)
  237. } else {
  238. uni.previewImage({
  239. urls: [e.url]
  240. })
  241. }
  242. },
  243. // 初始化合同文件数据
  244. initContractFiles(info, contractInfo) {
  245. let arr = [];
  246. if (info && contractInfo && (info.CompanyApprovalDetail.ApplyMethod === 1 || info
  247. .CompanyApprovalDetail.ApplyMethod === 5||info
  248. .CompanyApprovalDetail.ApplyMethod === 6)) {
  249. const reg = /\.(pdf)|\.doc|\.docx$/;
  250. arr = contractInfo.ImgUrl.split("#").map((item) => {
  251. if (reg.test(item)) {
  252. return {
  253. type: "pdf",
  254. url: item,
  255. img: require("@/pages-approve/static/pdf.png"),
  256. };
  257. } else {
  258. return {
  259. type: "img",
  260. url: item,
  261. img: item,
  262. };
  263. }
  264. });
  265. }
  266. this.constractFiles = arr
  267. },
  268. // 初始化顶部数据
  269. initTopInfo(info, contractInfo) {
  270. let arr = [];
  271. //试用转正式
  272. if (info && contractInfo && info.CompanyApprovalDetail.ApplyMethod === 1) {
  273. uni.setNavigationBarTitle({
  274. title:'试用转正式'
  275. })
  276. arr = [{
  277. key: "合同编号",
  278. val: contractInfo.ContractCode,
  279. tag: contractInfo.ContractType,
  280. },
  281. {
  282. key: "合同期限",
  283. val: `${contractInfo.StartDate}~${contractInfo.EndDate}`.replace(/-/g, '.'),
  284. },
  285. {
  286. key: "合同金额",
  287. val: contractInfo.Money+'元',
  288. color: "#FE6B7C",
  289. },
  290. {
  291. key: "付款方式",
  292. val: contractInfo.PayMethod,
  293. },
  294. {
  295. key: "付款渠道",
  296. val: contractInfo.PayChannel,
  297. },
  298. {
  299. key: "申请时间",
  300. val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
  301. },
  302. {
  303. key: "申请理由",
  304. val: info.CompanyApprovalDetail.ApplyReasons || "无",
  305. },
  306. ];
  307. }
  308. //冻结转试用
  309. if (info && info.CompanyApprovalDetail.ApplyMethod === 2) {
  310. uni.setNavigationBarTitle({
  311. title:'冻结转试用'
  312. })
  313. arr = [{
  314. key: "客户状态",
  315. val: info.CompanyApprovalDetail.Status,
  316. },
  317. {
  318. key: "冻结期限",
  319. val: `${info.CompanyApprovalDetail.FreezeStartDate}~${info.CompanyApprovalDetail.FreezeEndDate}`
  320. .replace(/-/g, '.'),
  321. },
  322. {
  323. key: "到期天数",
  324. val: info.CompanyApprovalDetail.FreezeExpireDays,
  325. },
  326. {
  327. key: "申请销售",
  328. val: info.CompanyApprovalDetail.ApplyRealName,
  329. },
  330. {
  331. key: "申请时间",
  332. val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
  333. },
  334. {
  335. key: "解冻理由",
  336. val: info.CompanyApprovalDetail.ApplyReasons,
  337. },
  338. ];
  339. }
  340. //试用延期
  341. if (info && info.CompanyApprovalDetail.ApplyMethod === 3) {
  342. uni.setNavigationBarTitle({
  343. title:'试用延期'
  344. })
  345. arr = [{
  346. key: "地址",
  347. val: info.CompanyApprovalDetail.Address,
  348. },
  349. {
  350. key: "申请时间",
  351. val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
  352. },
  353. {
  354. key: "申请理由",
  355. val: info.CompanyApprovalDetail.ApplyReasons,
  356. },
  357. ];
  358. }
  359. //原销售申请领取
  360. if (info && info.CompanyApprovalDetail.ApplyMethod === 4) {
  361. uni.setNavigationBarTitle({
  362. title:'原销售申请领取'
  363. })
  364. arr = [{
  365. key: "客户状态",
  366. val: info.CompanyApprovalDetail.Status,
  367. },
  368. {
  369. key: "原销售",
  370. val: info.CompanyApprovalDetail.SellerName,
  371. },
  372. {
  373. key: "申请销售",
  374. val: info.CompanyApprovalDetail.ApplyRealName,
  375. },
  376. {
  377. key: "申请时间",
  378. val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
  379. },
  380. {
  381. key: "申请理由",
  382. val: info.CompanyApprovalDetail.ApplyReasons,
  383. },
  384. ];
  385. }
  386. //续约申请/补充协议
  387. if (info && contractInfo && (info.CompanyApprovalDetail.ApplyMethod === 5||info.CompanyApprovalDetail.ApplyMethod===6)) {
  388. uni.setNavigationBarTitle({
  389. title:info.CompanyApprovalDetail.ApplyMethod === 5?'续约申请':'补充协议'
  390. })
  391. arr = [{
  392. key: "合同编号",
  393. val: contractInfo.ContractCode,
  394. tag: contractInfo.ContractType,
  395. },
  396. {
  397. key: "合同期限",
  398. val: `${contractInfo.StartDate}~${contractInfo.EndDate}`.replace(/-/g, '.'),
  399. },
  400. {
  401. key: "合同金额",
  402. val: contractInfo.Money+'元',
  403. color: "#FE6B7C",
  404. },
  405. {
  406. key: "付款方式",
  407. val: contractInfo.PayMethod,
  408. },
  409. {
  410. key: "付款渠道",
  411. val: contractInfo.PayChannel,
  412. },
  413. {
  414. key: "申请时间",
  415. val: info.CompanyApprovalDetail.ApprovalTime.replace(/-/g, '.'),
  416. },
  417. {
  418. key: "申请理由",
  419. val: info.CompanyApprovalDetail.ApplyReasons || "无",
  420. },
  421. ];
  422. }
  423. this.baseInfo = arr
  424. },
  425. // 初始化品种信息
  426. initVarietyInfo(info, contractInfo) {
  427. let usertype = this.$store.state.userInfo.ProductName; //用户身份类型admin,ficc,权益
  428. let arr = [];
  429. let obj = {
  430. title: "",
  431. list: [],
  432. };
  433. //试用转正式
  434. if (info && contractInfo && info.CompanyApprovalDetail.ApplyMethod === 1) {
  435. obj.title = "购买品种";
  436. arr = contractInfo.PermissionList;
  437. if (!arr) return obj;
  438. arr.forEach((item) => {
  439. let temarr = item.Items.filter((e) => {
  440. let flag = item.CheckList.includes(e.ChartPermissionId);
  441. if (flag) return e;
  442. });
  443. if (temarr.length !== 0) {
  444. obj.list.push({
  445. ClassifyName: item.ClassifyName,
  446. Items: temarr,
  447. });
  448. }
  449. });
  450. }
  451. //冻结转试用
  452. if (info && info.CompanyApprovalDetail.ApplyMethod === 2) {
  453. obj.title = "申请品种";
  454. if (usertype === "ficc") {
  455. arr = info.FiccPermissionList;
  456. } else if (usertype === "权益") {
  457. arr = info.PermissionList;
  458. } else if (usertype === "admin") {
  459. if (info.FiccPermissionList) {
  460. arr = [...info.FiccPermissionList];
  461. }
  462. if (info.PermissionList) {
  463. arr = [...info.PermissionList];
  464. }
  465. }
  466. if (!arr) return obj;
  467. arr.forEach((item) => {
  468. let temarr = item.Items.filter((e) => {
  469. let flag = item.CheckList.includes(e.ChartPermissionId);
  470. if (flag) return e;
  471. });
  472. if (temarr.length !== 0) {
  473. obj.list.push({
  474. ClassifyName: item.ClassifyName,
  475. Items: temarr,
  476. });
  477. }
  478. });
  479. }
  480. //试用延期
  481. if (info && info.CompanyApprovalDetail.ApplyMethod === 3) {
  482. obj.title = "申请品种";
  483. if (usertype === "ficc") {
  484. arr = info.FiccPermissionList;
  485. } else if (usertype === "权益") {
  486. arr = info.PermissionList;
  487. } else if (usertype === "admin") {
  488. if (info.FiccPermissionList) {
  489. arr = [...info.FiccPermissionList];
  490. }
  491. if (info.PermissionList) {
  492. arr = [...info.PermissionList];
  493. }
  494. }
  495. if (!arr) return obj;
  496. arr.forEach((item) => {
  497. let temarr = item.Items.filter((e) => {
  498. let flag = item.CheckList.includes(e.ChartPermissionId);
  499. if (flag) return e;
  500. });
  501. if (temarr.length !== 0) {
  502. obj.list.push({
  503. ClassifyName: item.ClassifyName,
  504. Items: temarr,
  505. });
  506. }
  507. });
  508. }
  509. //原销售申请领取
  510. if (info && info.CompanyApprovalDetail.ApplyMethod === 4) {
  511. obj.title = "申请品种";
  512. if (usertype === "ficc") {
  513. arr = info.FiccPermissionList;
  514. } else if (usertype === "权益") {
  515. arr = info.PermissionList;
  516. } else if (usertype === "admin") {
  517. if (info.FiccPermissionList) {
  518. arr = [...info.FiccPermissionList];
  519. }
  520. if (info.PermissionList) {
  521. arr = [...info.PermissionList];
  522. }
  523. }
  524. if (!arr) return obj;
  525. arr.forEach((item) => {
  526. let temarr = item.Items.filter((e) => {
  527. let flag = item.CheckList.includes(e.ChartPermissionId);
  528. if (flag) return e;
  529. });
  530. if (temarr.length !== 0) {
  531. obj.list.push({
  532. ClassifyName: item.ClassifyName,
  533. Items: temarr,
  534. });
  535. }
  536. });
  537. }
  538. //续约申请/补充协议
  539. if (info && contractInfo && (info.CompanyApprovalDetail.ApplyMethod === 5||info.CompanyApprovalDetail.ApplyMethod===6)) {
  540. obj.title = "购买品种";
  541. arr = contractInfo.PermissionList;
  542. if (!arr) return obj;
  543. arr.forEach((item) => {
  544. let temarr = item.Items.filter((e) => {
  545. let flag = item.CheckList.includes(e.ChartPermissionId);
  546. if (flag) return e;
  547. });
  548. if (temarr.length !== 0) {
  549. obj.list.push({
  550. ClassifyName: item.ClassifyName,
  551. Items: temarr,
  552. });
  553. }
  554. });
  555. }
  556. this.varietyInfo = obj
  557. }
  558. },
  559. }
  560. </script>
  561. <style lang="scss">
  562. .detail-page {
  563. width: 100%;
  564. min-height: 100vh;
  565. padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
  566. padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
  567. }
  568. .section {
  569. padding: 30rpx 34rpx;
  570. border-bottom: 14rpx solid #f5f5f5;
  571. &:last-child {
  572. margin-bottom: 0;
  573. border: none;
  574. }
  575. .title {
  576. font-size: 16px;
  577. font-weight: bold;
  578. margin: 0 0 40rpx 0;
  579. }
  580. .setmeal {
  581. margin: 0;
  582. }
  583. .lable {
  584. color: #666;
  585. flex-shrink: 0;
  586. font-size: 14px;
  587. }
  588. }
  589. .base-info-wrap {
  590. position: relative;
  591. .title {
  592. margin: 0 0 40rpx 0;
  593. &::before {
  594. content: "";
  595. display: inline-block;
  596. width: 15px;
  597. height: 17px;
  598. background-image: url("@/static/man.png");
  599. background-size: cover;
  600. background-repeat: no-repeat;
  601. margin-right: 10rpx;
  602. position: relative;
  603. top: 4rpx;
  604. }
  605. }
  606. .base-info-list {
  607. font-size: 14px;
  608. color: #000;
  609. view {
  610. margin-bottom: 10px;
  611. display: flex;
  612. }
  613. }
  614. .status-img{
  615. position: absolute;
  616. width: 220rpx;
  617. height: 220rpx;
  618. right: 0;
  619. top: 100rpx;
  620. }
  621. }
  622. .package-type {
  623. display: flex !important;
  624. align-items: center;
  625. .package-tag {
  626. margin-left: 15rpx;
  627. }
  628. }
  629. .variety-wrap {
  630. .variety-item {
  631. padding-top: 24rpx;
  632. padding-bottom: 24rpx;
  633. border-bottom: 1px dashed rgba(112, 112, 112, 0.2);
  634. }
  635. .variety-item:first-child {
  636. padding-top: 0;
  637. }
  638. .variety-item:last-child {
  639. border-bottom: none;
  640. }
  641. .tag {
  642. margin-right: 10rpx;
  643. margin-bottom: 10rpx;
  644. }
  645. }
  646. .contract-list {
  647. display: flex;
  648. flex-wrap: wrap;
  649. .contract-img {
  650. width: 102rpx;
  651. height: 120rpx;
  652. }
  653. }
  654. .customer-main-info {
  655. padding-bottom: 40rpx;
  656. border-bottom: 1px dashed rgba(112, 112, 112, 0.2);
  657. }
  658. .customer-info-item {
  659. font-size: 14px;
  660. color: #999;
  661. margin-bottom: 20rpx;
  662. }
  663. .customer-info-list {
  664. flex-wrap: wrap;
  665. padding-top: 20rpx;
  666. }
  667. .btns-wrap {
  668. justify-content: center;
  669. button {
  670. width: 260rpx;
  671. height: 70rpx;
  672. border-radius: 28px;
  673. border: none;
  674. margin: 0 15px;
  675. font-size: 15px;
  676. color: #fff;
  677. line-height: 70rpx;
  678. }
  679. .pass-btn {
  680. background-color: #5890fb;
  681. }
  682. .refuse-btn {
  683. background-color: #f55768;
  684. }
  685. }
  686. </style>