order-details.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723
  1. <template>
  2. <view class="container details clearfix">
  3. <!-- 自定义返回
  4. <header-back
  5. :systeminfo="systeminfo"
  6. :navbar-data="nvabarData"
  7. :headerBtnPosi="headerBtnPosi"
  8. :isShare="isOrderShare"
  9. /> -->
  10. <tui-skeleton
  11. v-if="!skeletonShow"
  12. backgroundColor="#fafafa"
  13. borderRadius="10rpx"
  14. :isLoading="true"
  15. :loadingType="5"
  16. />
  17. <view class="container-details">
  18. <view class="status-text">
  19. <view class="view-type">{{ orderInfo.status | statusFilters }}</view>
  20. <text class="bage-buss btn" v-if="orderInfo.orderSubmitType == 3 || orderInfo.orderSubmitType == 4"
  21. >采购员</text
  22. >
  23. <text
  24. class="bage-auto btn"
  25. v-if="
  26. orderInfo.orderSubmitType == 0 ||
  27. orderInfo.orderSubmitType == 1 ||
  28. orderInfo.orderSubmitType == 2
  29. "
  30. >自主</text
  31. >
  32. </view>
  33. <!-- 地址选择 -->
  34. <cm-address-temp ref="orderAddress" v-if="skeletonShow && !rechargeGoods" :addressData="addressData" />
  35. <!-- 商品 -->
  36. <cm-goods-temp
  37. ref="goods"
  38. v-if="skeletonShow"
  39. :list="orderInfo.orderProductList"
  40. :orderInfo="orderInfo"
  41. @popupClick="hanldePopupFn"
  42. />
  43. <!-- 订单信息 -->
  44. <cm-order-temp ref="orderInfo" v-if="skeletonShow" :orderInfo="orderInfo" />
  45. <!-- 发票信息 -->
  46. <cm-invice-temp ref="invoice" v-if="skeletonShow" :orderInvoice="orderInvoice" />
  47. <!-- 支付记录 -->
  48. <cm-payment-temp
  49. ref="payment"
  50. v-if="skeletonShow"
  51. :discernReceiptList="discernReceiptList"
  52. :receiptAmount="receiptAmount"
  53. />
  54. <!-- 退款记录 -->
  55. <cm-refund-temp
  56. ref="refund"
  57. v-if="skeletonShow"
  58. :returnedPurchaseList="returnedPurchaseList"
  59. :returnedPurchaseFee="returnedPurchaseFee"
  60. />
  61. <!-- 支付凭证记录 -->
  62. <cm-voucher-temp ref="voucher" v-if="skeletonShow && voucherList.length > 0" :list="voucherList" />
  63. <!-- 底部button -->
  64. <cm-details-button
  65. ref="orderButton"
  66. v-if="skeletonShow"
  67. :status="orderInfo.status"
  68. :order="orderInfo"
  69. :rechargeGoods="rechargeGoods"
  70. :ableUserMoney="ableUserMoney"
  71. :shareCode="shareCode"
  72. :secondHandOrderFlag="orderInfo.secondHandOrderFlag"
  73. @buttonConfirm="handButtonConfirm"
  74. />
  75. </view>
  76. <!-- 分享弹窗 -->
  77. <cm-share-popup
  78. :shopOrderId="shopOrderId"
  79. :shareType="isShareType"
  80. v-if="isShareModal"
  81. @shareConfirm="onShareAppMessage"
  82. />
  83. <!-- 提示弹窗 -->
  84. <tui-modal
  85. :show="modal"
  86. @click="handleClick"
  87. :content="contentModalText"
  88. :button="modalButton"
  89. color="#333"
  90. :size="32"
  91. shape="circle"
  92. :maskClosable="false"
  93. />
  94. </view>
  95. </template>
  96. <script>
  97. import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
  98. import cmAddressTemp from './components/details/cm-address-temp' //地址信息
  99. import cmGoodsTemp from './components/details/cm-goods-temp' //商品列表
  100. import cmOrderTemp from './components/details/cm-order-temp' //订单信息
  101. import cmInviceTemp from './components/details/cm-invice-temp' //发票信息
  102. import cmPaymentTemp from './components/details/cm-payment-temp' //支付记录
  103. import cmRefundTemp from './components/details/cm-refund-temp' //退款记录
  104. import cmVoucherTemp from './components/details/cm-voucher-temp' //退款记录
  105. import cmDetailsButton from './components/cm-details-button' //底部按钮
  106. import cmSharePopup from './components/cm-share-popup' //分享弹窗
  107. export default {
  108. components: {
  109. headerBack,
  110. cmAddressTemp,
  111. cmGoodsTemp,
  112. cmOrderTemp,
  113. cmInviceTemp,
  114. cmPaymentTemp,
  115. cmRefundTemp,
  116. cmVoucherTemp,
  117. cmDetailsButton,
  118. cmSharePopup
  119. },
  120. data() {
  121. return {
  122. nvabarData: {
  123. //顶部自定义导航
  124. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示
  125. title: '订单详情' // 导航栏 中间的标题
  126. },
  127. state: 0,
  128. userId: '',
  129. orderId: 0,
  130. shopOrderId: 0,
  131. clubUserId: 0,
  132. serviceProviderId: '', //协销ID
  133. shareCode: '', //分享码
  134. shareType: '', //分享登录页过来记录的状态
  135. cellPhone: '', //客服电话
  136. skeletonShow: false, //是否加载完成渲染子组件
  137. isOrderShare: false,
  138. isShareModal: false,
  139. isShareType: 2,
  140. isPayModel: false,
  141. modelType: 0,
  142. ableUserMoney: '', //机构余额
  143. addressData: {}, //地址信息初始化
  144. orderInfo: {}, //订单信息初始化
  145. orderInvoice: {}, //发票信息初始化
  146. returnedPurchaseList: {}, //退款信息初始化
  147. discernReceiptList: {}, //支付信息初始化
  148. voucherList:[], // 线下支付凭证
  149. receiptAmount: 0, //支付金额
  150. returnedPurchaseFee: 0, //退款金额
  151. navbarHeight: '',
  152. rechargeGoods: false,
  153. headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
  154. systeminfo: this.setSysteminfo(), //获取设备信息
  155. isIphoneX: this.$store.state.isIphoneX,
  156. CustomBar: this.CustomBar, // 顶部导航栏高度
  157. popupShow: false,
  158. handlerPros: {},
  159. clauseData: {},
  160. showAgan: false,
  161. failList: [], // 再来一单可购买商品
  162. promptitle: '',
  163. returnGoodsStutas: false,
  164. helpContent: '',
  165. handleModelEven: 0,
  166. modal: false,
  167. contentModalText: '订单查询失败,请稍候重试~', //操作文字提示语句
  168. modalButton: [
  169. {
  170. text: '取消',
  171. type: 'gray',
  172. plain: true //是否空心
  173. },
  174. {
  175. text: '确定',
  176. customStyle: {
  177. color: '#fff',
  178. bgColor: '#F3B574'
  179. },
  180. plain: false
  181. }
  182. ],
  183. }
  184. },
  185. onLoad(option) {
  186. console.log(option)
  187. this.shareType = option.type
  188. this.shopOrderId = option.shopOrderId
  189. this.clubUserId = option.userId
  190. if (this.shareType === 'share') {
  191. this.listType = 0
  192. this.isOrderShare = true
  193. } else if (option.type === 'confim' || option.type === 'search' || option.type === 'cash') {
  194. this.listType = 0
  195. } else {
  196. this.listType = option.listType
  197. }
  198. this.getHeaderTopHeight()
  199. this.initOrderDetaileData()
  200. },
  201. filters: {
  202. NumFormat(value) {
  203. //处理金额
  204. return Number(value).toFixed(2)
  205. },
  206. statusFilters(value) {
  207. //处理订单状态显示
  208. const map = {
  209. 0: '待确认',
  210. 2: '交易完成',
  211. 4: '已关闭',
  212. 5: '交易全退',
  213. 6: '交易全退',
  214. 11: '待付款待发货',
  215. 12: '待付款部分发货',
  216. 13: '待付款已发货',
  217. 21: '部分付款待发货',
  218. 22: '部分付款部分发货',
  219. 23: '部分付款已发货',
  220. 31: '已付款待发货',
  221. 32: '已付款部分发货',
  222. 33: '已付款已发货'
  223. }
  224. return map[value]
  225. }
  226. },
  227. methods: {
  228. async initOrderDetaileData() {
  229. try {
  230. const res = await this.OrderService.QueryOrderDetails({
  231. shopOrderId: this.shopOrderId,
  232. userId: this.clubUserId
  233. })
  234. const data = res.data
  235. this.orderInfo = data.shopOrder
  236. this.userId = this.orderInfo.userId
  237. this.rechargeGoods = this.orderInfo.rechargeGoods
  238. // this.shareCode = data.shareCode
  239. this.addressData = data.userInfo
  240. this.receiptAmount = this.orderInfo.receiptAmount
  241. this.returnedPurchaseFee = this.orderInfo.returnedPurchaseFee
  242. this.orderInvoice = data.orderInvoice
  243. this.returnedPurchaseList = data.returnedPurchaseList
  244. this.discernReceiptList = data.discernReceiptList
  245. this.voucherList = data.voucher
  246. this.ableUserMoney = data.ableUserMoney
  247. this.clauseData = data.clause
  248. if (this.clauseData && this.clauseData.name.length > 10) {
  249. this.clauseData.name = this.clauseData.name.substr(0, 10) + '...'
  250. }
  251. // 特殊商品退货须知
  252. this.returnGoodsStutas = data.returnGoodsStutas && data.returnGoodsStutas === 2 // 1:可以 2:不可以
  253. this.helpContent = data.helpContent
  254. this.skeletonShow = true
  255. } catch (error) {
  256. this.$util.msg(error.msg, 2000)
  257. }
  258. },
  259. handButtonConfirm(data) {
  260. //判断点击的按钮类型并执行...
  261. switch (data.type) {
  262. case 'cancel': //取消订单
  263. this.modal = true
  264. this.contentModalText = '确认取消该订单吗?'
  265. this.handleModelEven = 1
  266. break
  267. case 'delete': //删除订单
  268. this.modal = true
  269. this.contentModalText = '确认删除该订单吗?'
  270. this.handleModelEven = 2
  271. break
  272. case 'confirm': // 确认订单
  273. this.modal = true
  274. this.contentModalText = '确认此订单吗?'
  275. this.handleModelEven = 3
  276. break
  277. case 'balance':
  278. this.getOrderPaymentValidation(data)
  279. break
  280. case 'again':
  281. this.handOrderAgain(data.shopOrderId)
  282. break
  283. case 'query':
  284. this.isModalLayer = true
  285. this.$api.navigateTo('/pages/user/order/order-logistics?shopOrderId=' + data.shopOrderId)
  286. break
  287. }
  288. },
  289. handleClick(e) {
  290. //确认操作
  291. if (e.index == 1) {
  292. switch (this.handleModelEven) {
  293. case 1: //取消订单
  294. this.cancelOrder(this.shopOrderId)
  295. break
  296. case 2: //删除订单
  297. this.deleteOrder(this.shopOrderId)
  298. break
  299. case 3: //确认订单
  300. this.affirmOrder(this.shopOrderId)
  301. break
  302. }
  303. }
  304. this.modal = false
  305. },
  306. //取消订单
  307. async cancelOrder(shopOrderId) {
  308. try {
  309. const res = await this.OrderService.CancelOrder({ shopOrderId: shopOrderId, userIdentity: 1 })
  310. this.$util.msg(res.msg, 2000, true, 'success')
  311. setTimeout(() => {
  312. this.initOrderDetaileData()
  313. }, 2000)
  314. } catch (error) {
  315. this.$util.msg(error.msg, 2000)
  316. }
  317. },
  318. //删除订单
  319. async deleteOrder(shopOrderId) {
  320. try {
  321. const res = await this.OrderService.DeleteOrder({ shopOrderId: shopOrderId })
  322. this.$util.msg(res.msg, 2000, true, 'success')
  323. setTimeout(() => {
  324. if (this.shareType === 'share') {
  325. this.$api.switchTabTo('/pages/tabBar/home/index')
  326. } else {
  327. this.$api.redirectTo(`/pages/user/order/order-list?type=detele&state=${this.state}`)
  328. }
  329. }, 2000)
  330. } catch (error) {
  331. this.$util.msg(error.msg, 2000)
  332. }
  333. },
  334. //确认订单
  335. async affirmOrder(shopOrderId) {
  336. try {
  337. const res = await this.OrderService.AffirmOrder({ shopOrderId: shopOrderId })
  338. this.$util.msg(res.msg, 2000, true, 'success')
  339. setTimeout(() => {
  340. this.initOrderDetaileData()
  341. }, 2000)
  342. } catch (error) {
  343. this.$util.msg(error.msg, 2000)
  344. }
  345. },
  346. // 再来一单
  347. async handOrderAgain(shopOrderId) {
  348. try{
  349. const res = await this.SellerService.SellerCreateOrderAgain({
  350. confirmFlag: 0,
  351. shopOrderId: shopOrderId,
  352. serviceProviderId: this.serviceProviderId
  353. })
  354. const data = res.data
  355. this.$api.setStorage('orderUserInfo', {
  356. clubId: data.clubId,
  357. againBuyProductIds: data.productIds,
  358. userId: data.userId
  359. })
  360. this.$api.navigateTo('/pages/seller/cart/cart')
  361. }catch(error){
  362. if (error.code == -3) {
  363. this.showAgan = true
  364. this.promptitle = error.msg
  365. this.failList = error.data
  366. } else if (error.code == -2) {
  367. this.$util.modal('', error.msg, '确定', '', false, () => {})
  368. } else {
  369. this.$util.msg(error.msg, 2000)
  370. }
  371. }
  372. },
  373. async handleAddAgian() {
  374. // 再来一单弹窗
  375. try{
  376. await this.SellerService.SellerCreateOrderAgain({
  377. confirmFlag: 1,
  378. shopOrderId: this.shopOrderId,
  379. serviceProviderId: this.serviceProviderId,
  380. })
  381. this.$api.navigateTo('/pages/seller/cart/cart')
  382. this.showAgan = false
  383. }catch(error){
  384. this.$util.msg(error.msg, 2000)
  385. }
  386. },
  387. //监听余额抵扣按钮
  388. async hanldPaymentConfirm(data) {
  389. try{
  390. await this.OrderService.OrderBalanceDeduction({ shopOrderId: this.shopOrderId })
  391. this.$util.msg('余额抵扣成功', 2000)
  392. this.initOrderDetaileData()
  393. }catch(error){
  394. this.$util.msg(error.msg, 2000)
  395. }
  396. },
  397. //监听根据付款状态做操作
  398. async getOrderPaymentValidation(order) {
  399. try{
  400. const res = await this.OrderService.OrderPaymentValidation({ shopOrderId: order.shopOrderId })
  401. const data = res.data
  402. this.payModelData = data
  403. if (data.balanceFlag == 0) {
  404. // 0可以走余额抵扣,1不能走余额抵扣
  405. if (data.code == -1) {
  406. this.$util.modal('', '订单已申请全部退款,无需再付款!', '确定', '', false, () => {})
  407. } else {
  408. console.log('payModelData',this.payModelData)
  409. this.isPayModel = true
  410. this.modelType = 3
  411. console.log('isPayModel',this.isPayModel)
  412. }
  413. } else {
  414. this.$util.modal('', '该订单已走线上支付流程,不能进行余额抵扣。', '确定', '', false, () => {})
  415. }
  416. }catch(error){
  417. this.$util.msg(error.msg, 2000)
  418. }
  419. },
  420. // 条款
  421. openclauseConten(id) {
  422. this.$api.navigateTo(`/pages/service/sellconten?clauseId=${id}`)
  423. },
  424. hanldePopupFn(data) {
  425. //监听活动内容
  426. this.popupShow = true
  427. this.handlerPros = data
  428. },
  429. onShareAppMessage(res) {
  430. //分享转发
  431. this.isShareModal = false
  432. if (res.from === 'button') {
  433. // 来自页面内转发按钮
  434. }
  435. return {
  436. title: '您有新的订单,请点击查看~',
  437. path: `/pages/user/order/order-sharelogin?orderId=${this.orderId}&userId=${
  438. this.userId
  439. }&serviceProviderId=${this.serviceProviderId}`,
  440. imageUrl: 'https://static.caimei365.com/app/mini-mcare/icon/icon_shareOrder@2x.png'
  441. }
  442. },
  443. getHeaderTopHeight() {
  444. let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
  445. let headerPosi = this.headerBtnPosi
  446. let btnPosi = {
  447. // 胶囊实际位置,坐标信息不是左上角原点
  448. height: headerPosi.height,
  449. width: headerPosi.width,
  450. // 胶囊top - 状态栏高度
  451. top: headerPosi.top - statusBarHeight,
  452. // 胶囊bottom - 胶囊height - 状态栏height (现胶囊bottom 为距离导航栏底部的长度)
  453. bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
  454. // 屏幕宽度 - 胶囊right
  455. right: this.systeminfo.screenWidth - headerPosi.right
  456. }
  457. this.navbarHeight = headerPosi.bottom + btnPosi.bottom // 原胶囊bottom + 现胶囊bottom
  458. },
  459. setHeaderBtnPosi() {
  460. // 获得胶囊按钮位置信息
  461. let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
  462. return headerBtnPosi
  463. },
  464. setSysteminfo() {
  465. let systeminfo
  466. uni.getSystemInfo({
  467. // 获取设备信息
  468. success: res => {
  469. systeminfo = res
  470. }
  471. })
  472. return systeminfo
  473. }
  474. },
  475. onShow() {
  476. this.$api.getStorage().then(resolve => {
  477. this.serviceProviderId = resolve.serviceProviderId ? resolve.serviceProviderId : 0
  478. })
  479. }
  480. }
  481. </script>
  482. <style lang="scss">
  483. page {
  484. height: auto;
  485. background: #f7f7f7;
  486. }
  487. .btn-hover {
  488. background: #ffffff;
  489. }
  490. .animation {
  491. /* transition: transform 0.3s ease;*/
  492. transition-property: transform;
  493. transition-duration: 0.3s;
  494. transition-timing-function: ease;
  495. }
  496. .invoice-balance {
  497. width: 702rpx;
  498. height: auto;
  499. padding: 0 24rpx;
  500. background: #ffffff;
  501. float: left;
  502. margin-top: 24rpx;
  503. margin-bottom: 24rpx;
  504. .balabce-t {
  505. width: 100%;
  506. height: 86rpx;
  507. line-height: 86rpx;
  508. font-size: $font-size-28;
  509. color: $text-color;
  510. float: left;
  511. .balabce-t-le {
  512. float: left;
  513. font-weight: bold;
  514. }
  515. .balabce-t-ri {
  516. float: right;
  517. display: flex;
  518. align-items: center;
  519. .money {
  520. display: flex;
  521. float: left;
  522. }
  523. .checkbox-box {
  524. display: flex;
  525. width: 60rpx;
  526. float: left;
  527. height: 100%;
  528. font-size: $font-size-24;
  529. .checkbox {
  530. width: 40rpx;
  531. text-align: right;
  532. box-sizing: border-box;
  533. text-align: center;
  534. text-decoration: none;
  535. border-radius: 0;
  536. -webkit-tap-highlight-color: transparent;
  537. overflow: hidden;
  538. }
  539. }
  540. }
  541. }
  542. .balabce-b {
  543. width: 100%;
  544. float: left;
  545. overflow: hidden;
  546. .balabce-b-text {
  547. width: 100%;
  548. line-height: 58rpx;
  549. font-size: $font-size-24;
  550. color: #ff2a2a;
  551. text-align: right;
  552. float: right;
  553. }
  554. &.balabce-b--hide {
  555. padding: 0 0;
  556. height: 0px;
  557. line-height: 0px;
  558. }
  559. }
  560. }
  561. .clause {
  562. float: right;
  563. font-size: 24rpx;
  564. color: #999999;
  565. margin-top: 60rpx;
  566. margin-right: 24rpx;
  567. &.noclick {
  568. pointer-events: none;
  569. }
  570. .text {
  571. color: #1890f9;
  572. &.color-bg {
  573. color: #333333;
  574. }
  575. }
  576. }
  577. .status-text {
  578. overflow: hidden;
  579. padding: 24rpx;
  580. background: #fff;
  581. font-size: $font-size-26;
  582. .view-type {
  583. float: left;
  584. color: #ff2a2a;
  585. }
  586. .status-visible {
  587. float: left;
  588. color: #999999;
  589. margin-left: 20rpx;
  590. }
  591. .bage-buss {
  592. display: inline-block;
  593. width: 100rpx;
  594. height: 36rpx;
  595. background: radial-gradient(circle, rgba(255, 39, 180, 1) 0%, rgba(193, 77, 245, 1) 100%);
  596. border-radius: 6rpx;
  597. line-height: 36rpx;
  598. text-align: center;
  599. color: #ffffff;
  600. float: right;
  601. font-size: $font-size-24;
  602. }
  603. .bage-auto {
  604. display: inline-block;
  605. width: 100rpx;
  606. height: 36rpx;
  607. background: radial-gradient(circle, rgba(255, 180, 39, 1) 0%, rgba(245, 142, 77, 1) 100%);
  608. border-radius: 6rpx;
  609. line-height: 36rpx;
  610. text-align: center;
  611. color: #ffffff;
  612. float: right;
  613. font-size: $font-size-24;
  614. }
  615. .bage-name {
  616. line-height: 32rpx;
  617. display: inline-block;
  618. color: #999999;
  619. float: right;
  620. font-size: $font-size-24;
  621. }
  622. .Rebate {
  623. display: inline-block;
  624. width: 72rpx;
  625. height: 32rpx;
  626. background: #ff7a51;
  627. border-radius: 6rpx;
  628. line-height: 32rpx;
  629. text-align: center;
  630. color: #ffffff;
  631. float: right;
  632. font-size: $font-size-24;
  633. margin-left: 20rpx;
  634. }
  635. }
  636. .aganBj {
  637. position: fixed;
  638. left: 0;
  639. top: 0;
  640. bottom: 0;
  641. width: 100%;
  642. height: 100%;
  643. background-color: rgba(0, 0, 0, 0.5);
  644. z-index: 999999;
  645. .alertAgan {
  646. position: absolute;
  647. top: 50%;
  648. left: 50%;
  649. transform: translate(-50%, -50%);
  650. width: 580rpx;
  651. background-color: #fff;
  652. border-radius: 16rpx;
  653. .title {
  654. font-size: 30rpx;
  655. color: #333333;
  656. line-height: 42rpx;
  657. padding: 30rpx;
  658. display: block;
  659. }
  660. .goods {
  661. padding: 0 30rpx;
  662. .list {
  663. padding: 10px 0;
  664. border-bottom: 1rpx solid #e1e1e1;
  665. margin: 10rpx 0;
  666. .image-left {
  667. width: 86rpx;
  668. height: 86rpx;
  669. border: 2rpx solid #e1e1e1;
  670. border-radius: 6rpx;
  671. display: inline-block;
  672. vertical-align: middle;
  673. }
  674. .name-right {
  675. display: inline-block;
  676. width: 416rpx;
  677. margin-left: 15rpx;
  678. font-size: 26rpx;
  679. color: #666666;
  680. vertical-align: middle;
  681. word-break: break-all;
  682. overflow: hidden;
  683. text-overflow: ellipsis;
  684. display: -webkit-inline-box;
  685. -webkit-line-clamp: 2;
  686. -webkit-box-orient: vertical;
  687. }
  688. }
  689. }
  690. .BtnAll {
  691. margin-top: 30rpx;
  692. .btn {
  693. display: inline-block;
  694. width: 290rpx;
  695. height: 90rpx;
  696. line-height: 90rpx;
  697. text-align: center;
  698. &.closebtn {
  699. border-radius: 0px 0px 0px 10px;
  700. color: #999999;
  701. background: #efefef;
  702. }
  703. &.cancel {
  704. border-radius: 0px 0px 8px 0px;
  705. background: $btn-confirm;
  706. color: #fff;
  707. }
  708. }
  709. }
  710. }
  711. }
  712. .return-instructions {
  713. font-size: 26rpx;
  714. color: #ff5b00;
  715. line-height: 42rpx;
  716. padding: 32rpx 50rpx;
  717. background-color: #fffaf8;
  718. text-align: justify;
  719. }
  720. </style>