miaoshaOrderDetail.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896
  1. <template>
  2. <view class="container" v-if="info.order.id">
  3. <view class="order-status">
  4. {{info.order.status_msg}}
  5. </view>
  6. <view class="page-block">
  7. <view class="page-title-block">
  8. <view class="title">订单信息</view>
  9. </view>
  10. <view class="content">
  11. <view class="cell flex flex-y-center">
  12. <view class="title-block required">
  13. <text>订单编号:</text>
  14. </view>
  15. <view class="desc">
  16. <view class="info" style="color:#FEAF44">{{info.order.order_no}}</view>
  17. </view>
  18. </view>
  19. <view class="cell flex flex-y-center">
  20. <view class="title-block required">
  21. <text>支付方式:</text>
  22. </view>
  23. <view class="desc">
  24. <view class="info" style="color:#FEAF44">
  25. {{info.order.pay_type == 1?'微信':info.order.pay_type == 2?'余额':'支付宝'}}
  26. </view>
  27. </view>
  28. </view>
  29. <view class="cell flex flex-y-center">
  30. <view class="title-block required">
  31. <text>订单金额:</text>
  32. </view>
  33. <view class="desc">
  34. <view class="info" style="color:#FEAF44">¥{{info.order.pay_price}}</view>
  35. </view>
  36. </view>
  37. <view class="cell flex flex-y-center">
  38. <view class="title-block required">
  39. <text>运费:</text>
  40. </view>
  41. <view class="desc">
  42. <view class="info" style="color:#FEAF44">¥{{info.order.postage_price}}</view>
  43. </view>
  44. </view>
  45. <template v-if="info.order.is_pay == 1">
  46. <view class="cell flex flex-y-center">
  47. <view class="title-block required">
  48. <text>支付时间:</text>
  49. </view>
  50. <view class="desc">
  51. <view class="info" style="color:#FEAF44">{{info.order.pay_time}}</view>
  52. </view>
  53. </view>
  54. </template>
  55. <view class="cell flex flex-y-center">
  56. <view class="title-block required">
  57. <text>提货方式:</text>
  58. </view>
  59. <view class="desc">
  60. {{info.order.pick_type == 1?'快递':info.order.pick_type == 2?'外卖':'自提'}}
  61. </view>
  62. </view>
  63. <view class="cell flex flex-y-center" v-if="info.order.pick_type == 3">
  64. <view class="title-block required">
  65. <text>自提时间:</text>
  66. </view>
  67. <view class="desc">
  68. <view class="info" style="color:#FEAF44">{{info.order.take_time}}</view>
  69. </view>
  70. </view>
  71. <template v-if="info.order.pick_type == 1">
  72. <view class="cell flex flex-y-center">
  73. <view class="title-block required">
  74. <text>快递公司:</text>
  75. </view>
  76. <view class="desc">
  77. <view class="info" style="color:#FEAF44">{{info.order.express || ''}}</view>
  78. </view>
  79. </view>
  80. <view class="cell flex flex-y-center">
  81. <view class="title-block required">
  82. <text>快递公司编号:</text>
  83. </view>
  84. <view class="desc">
  85. <view class="info" style="color:#FEAF44">{{info.order.express_code || ''}}</view>
  86. </view>
  87. </view>
  88. <view class="cell flex flex-y-center">
  89. <view class="title-block required">
  90. <text>快递单号:</text>
  91. </view>
  92. <view class="desc">
  93. <view class="info" style="color:#FEAF44">{{info.order.express_no || ''}}</view>
  94. </view>
  95. </view>
  96. </template>
  97. <view class="cell flex flex-y-center">
  98. <view class="title-block required">
  99. <text>用户昵称:</text>
  100. </view>
  101. <view class="desc">
  102. <view class="info" style="color:#FEAF44">{{info.order.user_name}}</view>
  103. </view>
  104. </view>
  105. <view class="cell flex flex-y-center">
  106. <view class="title-block required">
  107. <text>电话:</text>
  108. </view>
  109. <view class="desc">
  110. <view class="info" style="color:#FEAF44">{{info.order.tel}}</view>
  111. </view>
  112. </view>
  113. <view class="cell flex flex-y-center">
  114. <view class="title-block required">
  115. <text>地址:</text>
  116. </view>
  117. <view class="desc">
  118. <view class="info" style="color:#FEAF44">{{info.order.address || ''}}</view>
  119. </view>
  120. </view>
  121. <view class="cell flex flex-y-center">
  122. <view class="title-block required">
  123. <text>用户备注:</text>
  124. </view>
  125. <view class="desc">
  126. <view class="info" style="color:#FEAF44">{{info.order.user_remark}}</view>
  127. </view>
  128. </view>
  129. <view class="cell flex flex-y-center">
  130. <view class="title-block required">
  131. <text>下单时间:</text>
  132. </view>
  133. <view class="desc">
  134. <view class="info" style="color:#FEAF44">{{info.order.create_time}}</view>
  135. </view>
  136. </view>
  137. <template v-if="info.order.status == 6">
  138. <view class="cell flex flex-y-center">
  139. <view class="title-block required">
  140. <text>退款金额:</text>
  141. </view>
  142. <view class="desc">
  143. <view class="info" style="color:#FEAF44">{{info.order.refund_price}}</view>
  144. </view>
  145. </view>
  146. <view class="cell flex flex-y-center">
  147. <view class="title-block required">
  148. <text>退款时间:</text>
  149. </view>
  150. <view class="desc">
  151. <view class="info" style="color:#FEAF44">{{info.order.refund_price}}</view>
  152. </view>
  153. </view>
  154. <view class="cell flex flex-y-center">
  155. <view class="title-block required">
  156. <text>快递单号:</text>
  157. </view>
  158. <view class="desc">
  159. <view class="info" style="color:#FEAF44">{{info.order.express_no || ''}}</view>
  160. </view>
  161. </view>
  162. </template>
  163. </view>
  164. </view>
  165. <view class="page-block">
  166. <view class="page-title-block">
  167. <view class="title">商品信息</view>
  168. </view>
  169. <view class="content">
  170. <view class="goods-tab">
  171. <view class="tr">
  172. <view class="td goods-name">商品名称</view>
  173. <view class="td">数量</view>
  174. <view class="td">单价</view>
  175. <view class="td">总价</view>
  176. <view class="td">退款金额</view>
  177. <view class="td">退款数量</view>
  178. </view>
  179. <view class="tr" v-for="(item,index) in info.goods" :key="id">
  180. <view class="td goods-name">{{item.name || ''}}</view>
  181. <view class="td">{{item.num || ''}}</view>
  182. <view class="td">{{item.unit_price || ''}}</view>
  183. <view class="td">{{item.sum_price || ''}}</view>
  184. <view class="td">{{item.refund_price || ''}}</view>
  185. <view class="td">{{item.refund_num || ''}}</view>
  186. </view>
  187. </view>
  188. </view>
  189. </view>
  190. <view class="page-block">
  191. <view class="page-title-block">
  192. <view class="title">门店备注</view>
  193. </view>
  194. <view class="content">
  195. <form @submit="onSaveRemark" class="store-remark-form">
  196. <textarea name="remark" v-model="info.order.store_remark" placeholder="请输入" class="store-remark" />
  197. <button form-type="submit" class="stroe-remark-btn">保存</button>
  198. </form>
  199. </view>
  200. </view>
  201. <view class="btm-btn-block-content">
  202. <view class="btm-btn-block">
  203. <view class="btn btn11" @click="cancelOrder" v-if="info.order.status == 1"> 取消订单 </view>
  204. <template v-if="info.order.status == 2">
  205. <view class="btn btn11" @click="deliverGoods" v-if="info.order.is_show_send_but == 1"> 立即发货 </view>
  206. <view class="btn btn11" @click="showExpress" v-if="info.order.pick_type == 1"> 快递发货 </view>
  207. </template>
  208. <view class="btn btn11" @click="orderCompletion" v-if="info.order.status == 3"> 订单完成 </view>
  209. <view class="btn btn11" @click="processingOrders" v-if="info.order.status == 5"> 处理订单 </view>
  210. </view>
  211. </view>
  212. <uni-popup ref="express" type="center">
  213. <view class="operation-content">
  214. <view class="title">快递发货</view>
  215. <input type="text" :value="expressName" placeholder="快递公司" class="refund-amount"
  216. @input="onInput($event,'expressName')" />
  217. <input type="text" :value="expressCode" placeholder="公司编号" class="refund-amount"
  218. @input="onInput($event,'expressCode')" />
  219. <input type="text" :value="expressOrderNo" placeholder="快递单号" class="refund-amount"
  220. @input="onInput($event,'expressOrderNo')" />
  221. <view class="btns box-pack-between">
  222. <view class="operation-btn" @click="closePop('express')">取消</view>
  223. <view class="operation-btn" @click="fahuo" style="color:#3387ff;">发货</view>
  224. </view>
  225. </view>
  226. </uni-popup>
  227. <uni-popup ref="processing" type="center">
  228. <view class="operation-content">
  229. <template v-if="refoundType == 2">
  230. <view class="title">退款</view>
  231. <input type="digit" :value="refundAmount" placeholder="退款金额" class="refund-amount"
  232. @input="onInput($event,'refundAmount')" />
  233. <view class="btns box-pack-between">
  234. <view class="operation-btn" @click="closePop('processing')">取消</view>
  235. <view class="operation-btn" @click="refound" style="color:#3387ff;">退款</view>
  236. </view>
  237. </template>
  238. <template v-if="refoundType == 3">
  239. <view class="title">拒绝退款</view>
  240. <textarea type="digit" :value="refundRemark" placeholder="拒绝原因" class="refund-remark"
  241. @input="onInput($event,'refundRemark')" />
  242. <view class="btns box-pack-between">
  243. <view class="operation-btn" @click="closePop('processing')">取消</view>
  244. <view class="operation-btn" @click="refuseRefound" style="color:#3387ff;">拒绝退款</view>
  245. </view>
  246. </template>
  247. </view>
  248. </uni-popup>
  249. </view>
  250. </template>
  251. <script>
  252. export default {
  253. data() {
  254. return {
  255. URL: getApp().globalData.URL,
  256. id: "",
  257. info: {},
  258. refundAmount: '', //退款金额
  259. refoundType: '',
  260. refundRemark: '',
  261. expressName: "",
  262. expressCode: "",
  263. expressOrderNo: ''
  264. }
  265. },
  266. onLoad(options) {
  267. this.id = options.id;
  268. this.getData()
  269. },
  270. methods: {
  271. // 门店备注
  272. onSaveRemark(e) {
  273. this.request({
  274. url: 'smdcshop/seckill_remarkSave',
  275. data: {
  276. id: this.id,
  277. remark: e.detail.value.remark
  278. }
  279. }).then(res => {
  280. this.getData()
  281. this.updatePrePage()
  282. })
  283. },
  284. // 秒杀订单取消
  285. cancelOrder() {
  286. uni.showModal({
  287. content: '确认取消该订单',
  288. success: (r) => {
  289. if (r.confirm) {
  290. this.request({
  291. url: 'smdcshop/seckill_cancel',
  292. data: {
  293. id: this.id
  294. }
  295. }).then(res => {
  296. this.getData()
  297. this.updatePrePage()
  298. })
  299. }
  300. }
  301. })
  302. },
  303. // 预约订单退款
  304. yyorderqueren() {
  305. this.$refs.popup.open('top')
  306. },
  307. //发货
  308. deliverGoods() {
  309. uni.showModal({
  310. content: "确定发货",
  311. success: (r) => {
  312. if (r.confirm) {
  313. this.request({
  314. url: 'Smdcshop/yyorderjujue',
  315. data: {
  316. id: this.id
  317. }
  318. }).then(res => {
  319. uni.showModal({
  320. content: res.message,
  321. showCancel: false,
  322. success: (r) => {
  323. this.getData()
  324. this.updatePrePage()
  325. }
  326. })
  327. })
  328. }
  329. }
  330. })
  331. },
  332. //快递发货
  333. showExpress(){
  334. this.expressName = ""
  335. this.expressCode = ""
  336. this.expressOrderNo = ""
  337. this.$refs.express.open()
  338. },
  339. fahuo(){
  340. if(!this.expressName){
  341. uni.showToast({
  342. title:"请输入快递公司",
  343. icon:"none"
  344. })
  345. return false
  346. }else if(!this.expressOrderNo){
  347. uni.showToast({
  348. title:"请输入快递单号",
  349. icon:"none"
  350. })
  351. return false
  352. }
  353. this.request({
  354. url: 'Smdcshop/yyorderjujue',
  355. data: {
  356. id: this.id,
  357. express:this.expressName,
  358. express_code:this.expressCode,
  359. express_no:this.expressOrderNo
  360. }
  361. }).then(res => {
  362. uni.showModal({
  363. content: res.message,
  364. showCancel: false,
  365. success: (r) => {
  366. this.getData()
  367. this.updatePrePage()
  368. }
  369. })
  370. })
  371. },
  372. // 订单完成
  373. orderCompletion() {
  374. uni.showModal({
  375. content: '确定订单完成吗',
  376. success: (r) => {
  377. if (r.confirm) {
  378. this.request({
  379. url: 'smdcshop/seckill_finish',
  380. data: {
  381. id: this.id
  382. }
  383. }).then(res => {
  384. this.getData()
  385. this.updatePrePage()
  386. })
  387. }
  388. }
  389. })
  390. },
  391. //处理订单
  392. processingOrders() {
  393. uni.showActionSheet({
  394. itemList: ['退款', '拒绝退款'],
  395. success: r => {
  396. if (r.tapIndex == 0) {
  397. this.refoundType = 2
  398. this.refundAmount = this.info.refund_price
  399. this.$refs.processing.open()
  400. } else if (r.tapIndex == 1) {
  401. this.refoundType = 3
  402. this.refundRemark = ""
  403. this.$refs.processing.open()
  404. }
  405. }
  406. })
  407. },
  408. onInput(e, name) {
  409. console.log(e, name)
  410. this[name] = e.detail.value
  411. },
  412. closePop(name) {
  413. this.refundAmount = ""
  414. this.refundRemark = ""
  415. this.$refs[name].close()
  416. },
  417. //退款
  418. refound() {
  419. if (!/^(0|([1-9]\d{0,6}))(\.\d{1,2})?$/.test(this.refundAmount) || this.refundAmount == 0) {
  420. uni.showToast({
  421. title: "请正确输入退款金额",
  422. icon: 'none'
  423. })
  424. return false
  425. }
  426. this.request({
  427. url: 'smdcshop/seckill_subDealRefund',
  428. data: {
  429. id: this.id,
  430. refund_id: this.info.order_refund.id,
  431. status: 2,
  432. refund_price: this.refundAmount,
  433. }
  434. }).then(res => {
  435. this.closePop('processing')
  436. uni.showModal({
  437. content: res.message,
  438. showCancel: false,
  439. success: (r) => {
  440. this.getData()
  441. this.updatePrePage()
  442. }
  443. })
  444. })
  445. },
  446. //拒绝退款
  447. refuseRefound() {
  448. // this.closePop('processing')
  449. this.request({
  450. url: 'smdcshop/seckill_subDealRefund',
  451. data: {
  452. id: this.id,
  453. refund_id: this.info.order_refund.id,
  454. status: 3,
  455. refuse_reason: this.refundAmount,
  456. }
  457. }).then(res => {
  458. this.closePop('processing')
  459. uni.showModal({
  460. content: res.message,
  461. showCancel: false,
  462. success: (r) => {
  463. this.getData()
  464. this.updatePrePage()
  465. }
  466. })
  467. })
  468. },
  469. // 更新上个页面
  470. updatePrePage() {
  471. let pages = getCurrentPages()
  472. if (pages.length > 1) {
  473. let prePage = pages[pages.length - 2]
  474. if (prePage.route == 'saomaDiancan/order/yuyueOrder') {
  475. prePage.$vm.getData(1)
  476. }
  477. }
  478. },
  479. showImg(src) {
  480. uni.previewImage({
  481. urls: [src]
  482. })
  483. },
  484. getData() {
  485. this.request({
  486. url: 'smdcshop/seckill_info',
  487. data: {
  488. id: this.id
  489. }
  490. }).then(res => {
  491. this.info = res.data;
  492. })
  493. },
  494. }
  495. }
  496. </script>
  497. <style>
  498. page {
  499. background-color: #F4F5F7;
  500. }
  501. page .act {
  502. color: #007AFF;
  503. }
  504. .model-content-center {
  505. width: 650rpx;
  506. background-color: #FFFFFF;
  507. border-radius: 16rpx;
  508. }
  509. .model-content-center .content {
  510. padding: 20rpx;
  511. }
  512. .model-content-center .round {
  513. border: 1rpx solid #CCCCCC;
  514. width: 40rpx;
  515. height: 40rpx;
  516. margin-right: 10rpx;
  517. border-radius: 4rpx;
  518. }
  519. .amount-text {
  520. font-size: 26rpx;
  521. padding-bottom: 20rpx;
  522. }
  523. .amount-input {
  524. padding: 10rpx;
  525. border: 1rpx solid #F1F1F1;
  526. }
  527. .model-refund-title {
  528. font-size: 36rpx;
  529. text-align: center;
  530. padding: 20rpx 0;
  531. }
  532. .model-refund-btn {
  533. border-top-color: #f5f5f5;
  534. border-top-style: solid;
  535. border-top-width: 1px;
  536. }
  537. .model-refund-btn .cancel {
  538. height: 90rpx;
  539. }
  540. .model-refund-btn .submit {
  541. height: 90rpx;
  542. border-left-color: #f0f0f0;
  543. border-left-style: solid;
  544. border-left-width: 1px;
  545. }
  546. button {
  547. background-color: #fff;
  548. padding: 0;
  549. margin: 0;
  550. line-height: 1rpx;
  551. /* border: 1px solid #cccccc; */
  552. min-height: 0;
  553. font-size: 28rpx;
  554. background: #fff;
  555. border-radius: none;
  556. }
  557. button::after {
  558. border: none;
  559. }
  560. .model-content-peiSong {
  561. text-align: center;
  562. padding: 10rpx 0;
  563. border-bottom: 1rpx solid #F1F1F1;
  564. font-size: 28rpx;
  565. }
  566. .pd10 {
  567. padding: 10rpx 0;
  568. }
  569. .model {
  570. width: 100%;
  571. height: 100%;
  572. position: fixed;
  573. top: 0;
  574. left: 0;
  575. background: rgba(0, 0, 0, .5);
  576. }
  577. .model-content {
  578. background: #FFFFFF;
  579. height: 800rpx;
  580. }
  581. .model-content-title {
  582. padding: 20rpx;
  583. }
  584. .text-r {
  585. text-align: right;
  586. color: red;
  587. }
  588. .info image {
  589. width: 40rpx;
  590. height: 50rpx;
  591. }
  592. .goods_list-img {
  593. width: 100rpx;
  594. height: 100rpx;
  595. margin-right: 20rpx;
  596. min-width: 100rpx;
  597. }
  598. .order-status {
  599. width: 100%;
  600. height: 130rpx;
  601. background: url(../static/images/order_detail_bg.png) no-repeat center;
  602. background-size: 100%;
  603. text-align: center;
  604. line-height: 130rpx;
  605. font-size: 36rpx;
  606. color: #fff;
  607. font-weight: bold;
  608. }
  609. .page-block {}
  610. .page-block .page-title-block {
  611. height: 90rpx;
  612. padding: 0 35rpx;
  613. }
  614. .page-block .page-title-block .title {
  615. font-size: 32rpx;
  616. line-height: 90rpx;
  617. color: #999;
  618. font-weight: bold;
  619. }
  620. .page-block .content {
  621. padding: 30rpx 35rpx 0;
  622. background-color: #fff;
  623. overflow: hidden;
  624. }
  625. .page-block .cell {
  626. min-height: 45rpx;
  627. margin-bottom: 30rpx;
  628. }
  629. .page-block .cell .title-block {
  630. width: 175rpx;
  631. flex: none;
  632. font-size: 30rpx;
  633. line-height: 45rpx;
  634. font-weight: 600;
  635. color: #333;
  636. }
  637. .page-block .cell .desc {
  638. flex: auto;
  639. min-height: 45rpx;
  640. line-height: 45rpx;
  641. font-size: 32rpx;
  642. color: #333;
  643. }
  644. .pay-type-icon {
  645. display: block;
  646. width: 30rpx;
  647. height: 30rpx;
  648. margin-right: 8rpx;
  649. }
  650. .goods {
  651. font-size: 32rpx;
  652. color: #333;
  653. line-height: 45rpx;
  654. margin-bottom: 30rpx;
  655. }
  656. .price {
  657. color: red;
  658. }
  659. .btm-btn-block-content {
  660. margin-top: 50rpx;
  661. }
  662. .btm-btn-block {
  663. padding: 0 20rpx;
  664. margin-bottom: 20rpx;
  665. display: flex;
  666. flex-flow: row nowrap;
  667. justify-content: space-around;
  668. align-items: center;
  669. }
  670. .btm-btn-block .btn {
  671. flex: none;
  672. /* width: 325rpx; */
  673. width: 217rpx;
  674. height: 98rpx;
  675. border-radius: 8rpx;
  676. text-align: center;
  677. line-height: 98rpx;
  678. font-size: 32rpx;
  679. font-weight: 500;
  680. }
  681. .btm-btn-block .btn11 {
  682. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  683. box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
  684. color: #fff;
  685. }
  686. .btm-btn-block .btn12 {
  687. background: linear-gradient(315deg, #999 2%, #999 99%);
  688. box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
  689. color: #fff;
  690. }
  691. .zt-btn {
  692. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  693. box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
  694. color: #fff;
  695. font-size: 24rpx;
  696. padding: 10rpx 12rpx;
  697. border-radius: 6rpx;
  698. }
  699. /* */
  700. .qc-btn {
  701. background-color: #3387FF;
  702. color: #fff;
  703. border-radius: 6rpx;
  704. height: 48rpx;
  705. line-height: 48rpx;
  706. padding: 0 20rpx;
  707. margin-left: 10rpx;
  708. }
  709. /* */
  710. .store-remark-form {
  711. display: block;
  712. }
  713. .store-remark-form .store-remark {
  714. display: block;
  715. width: 100%;
  716. background: #f1f1f1;
  717. padding: 20rpx;
  718. border-radius: 20rpx;
  719. font-size: 26rpx;
  720. line-height: 1.5;
  721. }
  722. .store-remark-form .stroe-remark-btn {
  723. display: block;
  724. width: 600rpx;
  725. height: 88rpx;
  726. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  727. color: #fff;
  728. font-weight: 500;
  729. line-height: 88rpx;
  730. text-align: center;
  731. font-size: 30rpx;
  732. margin: 30rpx auto;
  733. }
  734. /* */
  735. .goods-tab {
  736. display: table;
  737. width: 100%;
  738. border-collapse: collapse;
  739. margin-bottom: 30rpx;
  740. }
  741. .goods-tab .tr {
  742. display: table-row;
  743. }
  744. .goods-tab .td {
  745. display: table-cell;
  746. text-align: center;
  747. font-size: 24rpx;
  748. padding: 10rpx;
  749. border: 1rpx solid #ddd;
  750. }
  751. .goods-tab .goods-name {
  752. width: 200rpx;
  753. }
  754. /* */
  755. .operation-content {
  756. width: 600rpx;
  757. background-color: #fff;
  758. border-radius: 20rpx;
  759. overflow: hidden;
  760. }
  761. .title {
  762. height: 80rpx;
  763. /* border-bottom: 1rpx solid #ddd; */
  764. text-align: center;
  765. line-height: 80rpx;
  766. font-size: 30rpx;
  767. font-weight: 500;
  768. color: #333;
  769. }
  770. .refund-amount {
  771. width: 80%;
  772. height: 88rpx;
  773. padding: 0 20rpx;
  774. border: 1rpx solid #ddd;
  775. font-size: 30rpx;
  776. color: #333;
  777. margin: 30rpx auto;
  778. border-radius: 12rpx;
  779. }
  780. .refund-remark {
  781. width: 80%;
  782. padding: 20rpx;
  783. border: 1rpx solid #ddd;
  784. font-size: 28rpx;
  785. line-height: 1.5;
  786. color: #333;
  787. margin: 30rpx auto;
  788. border-radius: 12rpx;
  789. }
  790. .operation-content .btns {
  791. border-top: 1px solid #ddd;
  792. }
  793. .operation-btn {
  794. width: 100%;
  795. height: 88rpx;
  796. color: #333;
  797. font-weight: 500;
  798. line-height: 88rpx;
  799. text-align: center;
  800. font-size: 30rpx;
  801. }
  802. .operation-btn+.operation-btn {
  803. border-left: 1px solid #ddd;
  804. }
  805. </style>