yuyueOrderDetail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534
  1. <template>
  2. <view class="container" v-if="info.id">
  3. <view class="order-status">
  4. {{['待付款','待使用','已完成','已取消','已退款','退款中','退款拒绝'][info.state-1]}}
  5. <!-- {{info.is_pay == 1?info.cancel_status==2?'已退款':'已支付':'待支付'}} -->
  6. </view>
  7. <view class="page-block">
  8. <view class="page-title-block">
  9. <view class="title">订单信息</view>
  10. </view>
  11. <view class="content">
  12. <view class="cell flex flex-y-center">
  13. <view class="title-block required">
  14. <text>门店名称:</text>
  15. </view>
  16. <view class="desc">
  17. <view class="info" style="color:#FEAF44">{{info.store_id}}</view>
  18. </view>
  19. </view>
  20. <view class="cell flex flex-y-center">
  21. <view class="title-block required">
  22. <text>订单编号:</text>
  23. </view>
  24. <view class="desc">
  25. <view class="info" style="color:#FEAF44">{{info.order_no}}</view>
  26. </view>
  27. </view>
  28. <view class="cell flex flex-y-center">
  29. <view class="title-block required">
  30. <text>预约类型:</text>
  31. </view>
  32. <view class="desc">
  33. <view class="info" style="color:#FEAF44">{{info.type == 1?'餐桌':'商品'}}</view>
  34. </view>
  35. </view>
  36. <view class="cell flex flex-y-center">
  37. <view class="title-block required">
  38. <text>用户ID:</text>
  39. </view>
  40. <view class="desc">
  41. <view class="info" style="color:#FEAF44">{{info.user_id}}</view>
  42. </view>
  43. </view>
  44. <view class="cell flex flex-y-center">
  45. <view class="title-block required">
  46. <text>支付方式:</text>
  47. </view>
  48. <view class="desc">
  49. <view class="info" style="color:#FEAF44">
  50. {{info.pay_type == 1?'微信':info.pay_type == 2?'支付宝':info.pay_type == 3?'余额':'线上支付'}}
  51. </view>
  52. </view>
  53. </view>
  54. <view class="cell flex flex-y-center">
  55. <view class="title-block required">
  56. <text>支付金额:</text>
  57. </view>
  58. <view class="desc">
  59. <view class="info" style="color:#FEAF44">¥{{info.money}}</view>
  60. </view>
  61. </view>
  62. <view class="cell flex flex-y-center">
  63. <view class="title-block required">
  64. <text>下单时间:</text>
  65. </view>
  66. <view class="desc">
  67. <view class="info" style="color:#FEAF44">{{info.create_time}}</view>
  68. </view>
  69. </view>
  70. <view class="cell flex flex-y-center" v-if="info.pay_time">
  71. <view class="title-block required">
  72. <text>支付时间:</text>
  73. </view>
  74. <view class="desc">
  75. <view class="info" style="color:#FEAF44">{{info.pay_time}}</view>
  76. </view>
  77. </view>
  78. <!-- 预约餐桌 -->
  79. <template v-if="info.type == 1">
  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.type_name}}</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.num}}</view>
  94. </view>
  95. </view>
  96. <view class="cell flex flex-y-center">
  97. <view class="title-block required">
  98. <text>预计到店:</text>
  99. </view>
  100. <view class="desc">
  101. <view class="info" style="color:#FEAF44">{{info.time}}</view>
  102. </view>
  103. </view>
  104. <view class="cell flex flex-y-center">
  105. <view class="title-block required">
  106. <text>联系方式:</text>
  107. </view>
  108. <view class="desc">
  109. <view class="info" style="color:#FEAF44">{{info.name}} {{info.tel}}</view>
  110. </view>
  111. </view>
  112. </template>
  113. <!-- 预约商品 -->
  114. <template v-if="info.type == 2">
  115. <view class="cell flex flex-y-center">
  116. <view class="title-block required">
  117. <text>商品名:</text>
  118. </view>
  119. <view class="desc">
  120. <view class="info" style="color:#FEAF44">{{info.name}}</view>
  121. </view>
  122. </view>
  123. <view class="cell flex flex-y-center">
  124. <view class="title-block required">
  125. <text>商品规格:</text>
  126. </view>
  127. <view class="desc">
  128. <view class="info" style="color:#FEAF44">{{info.attr}}</view>
  129. </view>
  130. </view>
  131. </template>
  132. </view>
  133. </view>
  134. <view class="page-block" v-if="info.formlist && info.formlist.length>0">
  135. <view class="page-title-block">
  136. <view class="title">表单信息</view>
  137. </view>
  138. <view class="content">
  139. <view class="cell flex flex-y-center" v-for="(item,index) in info.formlist" :key="id">
  140. <view class="title-block required">
  141. <text>{{item.key}}:</text>
  142. </view>
  143. <view class="desc">
  144. <image src="item.value" v-if="item.type == 'uploadImg'" mode="aspectFill"
  145. style="width: 200rpx;height:200rpx;" @click="showImg(item.value)"></image>
  146. <view class="info" style="color:#FEAF44" v-else>{{item.value}}</view>
  147. </view>
  148. </view>
  149. </view>
  150. </view>
  151. <view class="btm-btn-block-content">
  152. <view class="btm-btn-block">
  153. <view class="btn btn11" @click="yyorderhexiao" v-if="info.state == 2"> 核销 </view>
  154. <view class="btn btn11" @click="yyorderqueren" v-if="info.state == 6"> 退款 </view>
  155. <view class="btn btn12" @click="yyorderjujue" v-if="info.state == 6"> 拒绝退款 </view>
  156. </view>
  157. </view>
  158. </view>
  159. </template>
  160. <script>
  161. export default {
  162. data() {
  163. return {
  164. URL: getApp().globalData.URL,
  165. id: "",
  166. info: {},
  167. }
  168. },
  169. onLoad(options) {
  170. this.id = options.id;
  171. this.getData()
  172. },
  173. methods: {
  174. // 预约订单核销
  175. yyorderhexiao() {
  176. uni.showModal({
  177. content: '确认核销该订单',
  178. success: (r) => {
  179. if (r.confirm) {
  180. this.request({
  181. url: 'Smdcshop/yyorderhexiao',
  182. data: {
  183. id: this.id
  184. }
  185. }).then(res => {
  186. this.getData()
  187. this.updatePrePage()
  188. })
  189. }
  190. }
  191. })
  192. },
  193. // 预约订单退款
  194. yyorderqueren() {
  195. uni.showModal({
  196. content: '确定退款',
  197. success: (r) => {
  198. if (r.confirm) {
  199. this.request({
  200. url: 'Smdcshop/yyorderqueren',
  201. data: {
  202. admin_id: this.info.admin_id,
  203. id: this.id
  204. }
  205. }).then(res => {
  206. this.getData()
  207. this.updatePrePage()
  208. })
  209. }
  210. }
  211. })
  212. },
  213. // 预约订单退款拒绝
  214. yyorderjujue() {
  215. uni.showModal({
  216. content: '确定拒绝退款',
  217. success: (r) => {
  218. if (r.confirm) {
  219. this.request({
  220. url: 'Smdcshop/yyorderjujue',
  221. data: {
  222. id: this.id
  223. }
  224. }).then(res => {
  225. this.getData()
  226. this.updatePrePage()
  227. })
  228. }
  229. }
  230. })
  231. },
  232. // 更新上个页面
  233. updatePrePage() {
  234. let pages = getCurrentPages()
  235. if (pages.length > 1) {
  236. let prePage = pages[pages.length - 2]
  237. if (prePage.route == 'saomaDiancan/order/yuyueOrder') {
  238. prePage.$vm.getData(1)
  239. }
  240. }
  241. },
  242. showImg(src) {
  243. uni.previewImage({
  244. urls: [src]
  245. })
  246. },
  247. getData() {
  248. this.request({
  249. url: 'Smdcshop/yyorderdetails',
  250. data: {
  251. id: this.id
  252. }
  253. }).then(res => {
  254. this.info = res.data;
  255. })
  256. },
  257. }
  258. }
  259. </script>
  260. <style>
  261. page {
  262. background-color: #F4F5F7;
  263. }
  264. page .act {
  265. color: #007AFF;
  266. }
  267. .model-content-center {
  268. width: 650rpx;
  269. background-color: #FFFFFF;
  270. border-radius: 16rpx;
  271. }
  272. .model-content-center .content {
  273. padding: 20rpx;
  274. }
  275. .model-content-center .round {
  276. border: 1rpx solid #CCCCCC;
  277. width: 40rpx;
  278. height: 40rpx;
  279. margin-right: 10rpx;
  280. border-radius: 4rpx;
  281. }
  282. .amount-text {
  283. font-size: 26rpx;
  284. padding-bottom: 20rpx;
  285. }
  286. .amount-input {
  287. padding: 10rpx;
  288. border: 1rpx solid #F1F1F1;
  289. }
  290. .model-refund-title {
  291. font-size: 36rpx;
  292. text-align: center;
  293. padding: 20rpx 0;
  294. }
  295. .model-refund-btn {
  296. border-top-color: #f5f5f5;
  297. border-top-style: solid;
  298. border-top-width: 1px;
  299. }
  300. .model-refund-btn .cancel {
  301. height: 90rpx;
  302. }
  303. .model-refund-btn .submit {
  304. height: 90rpx;
  305. border-left-color: #f0f0f0;
  306. border-left-style: solid;
  307. border-left-width: 1px;
  308. }
  309. button {
  310. background-color: #fff;
  311. padding: 0;
  312. margin: 0;
  313. line-height: 1rpx;
  314. /* border: 1px solid #cccccc; */
  315. min-height: 0;
  316. font-size: 28rpx;
  317. background: #fff;
  318. border-radius: none;
  319. }
  320. button::after {
  321. border: none;
  322. }
  323. .model-content-peiSong {
  324. text-align: center;
  325. padding: 10rpx 0;
  326. border-bottom: 1rpx solid #F1F1F1;
  327. font-size: 28rpx;
  328. }
  329. .pd10 {
  330. padding: 10rpx 0;
  331. }
  332. .model {
  333. width: 100%;
  334. height: 100%;
  335. position: fixed;
  336. top: 0;
  337. left: 0;
  338. background: rgba(0, 0, 0, .5);
  339. }
  340. .model-content {
  341. background: #FFFFFF;
  342. height: 800rpx;
  343. }
  344. .model-content-title {
  345. padding: 20rpx;
  346. }
  347. .text-r {
  348. text-align: right;
  349. color: red;
  350. }
  351. .info image {
  352. width: 40rpx;
  353. height: 50rpx;
  354. }
  355. .goods_list-img {
  356. width: 100rpx;
  357. height: 100rpx;
  358. margin-right: 20rpx;
  359. min-width: 100rpx;
  360. }
  361. .order-status {
  362. width: 100%;
  363. height: 130rpx;
  364. background: url(../static/images/order_detail_bg.png) no-repeat center;
  365. background-size: 100%;
  366. text-align: center;
  367. line-height: 130rpx;
  368. font-size: 36rpx;
  369. color: #fff;
  370. font-weight: bold;
  371. }
  372. .page-block {}
  373. .page-block .page-title-block {
  374. height: 90rpx;
  375. padding: 0 35rpx;
  376. }
  377. .page-block .page-title-block .title {
  378. font-size: 32rpx;
  379. line-height: 90rpx;
  380. color: #999;
  381. font-weight: bold;
  382. }
  383. .page-block .content {
  384. padding: 30rpx 35rpx 0;
  385. background-color: #fff;
  386. overflow: hidden;
  387. }
  388. .page-block .cell {
  389. min-height: 45rpx;
  390. margin-bottom: 30rpx;
  391. }
  392. .page-block .cell .title-block {
  393. width: 175rpx;
  394. flex: none;
  395. font-size: 30rpx;
  396. line-height: 45rpx;
  397. font-weight: 600;
  398. color: #333;
  399. }
  400. .page-block .cell .desc {
  401. flex: auto;
  402. min-height: 45rpx;
  403. line-height: 45rpx;
  404. font-size: 32rpx;
  405. color: #333;
  406. }
  407. .pay-type-icon {
  408. display: block;
  409. width: 30rpx;
  410. height: 30rpx;
  411. margin-right: 8rpx;
  412. }
  413. .goods {
  414. font-size: 32rpx;
  415. color: #333;
  416. line-height: 45rpx;
  417. margin-bottom: 30rpx;
  418. }
  419. .price {
  420. color: red;
  421. }
  422. .btm-btn-block-content {
  423. margin-top: 50rpx;
  424. }
  425. .btm-btn-block {
  426. padding: 0 20rpx;
  427. margin-bottom: 20rpx;
  428. display: flex;
  429. flex-flow: row nowrap;
  430. justify-content: space-around;
  431. align-items: center;
  432. }
  433. .btm-btn-block .btn {
  434. flex: none;
  435. /* width: 325rpx; */
  436. width: 217rpx;
  437. height: 98rpx;
  438. border-radius: 8rpx;
  439. text-align: center;
  440. line-height: 98rpx;
  441. font-size: 32rpx;
  442. font-weight: 500;
  443. }
  444. .btm-btn-block .btn11 {
  445. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  446. box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
  447. color: #fff;
  448. }
  449. .btm-btn-block .btn12 {
  450. background: linear-gradient(315deg, #999 2%, #999 99%);
  451. box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
  452. color: #fff;
  453. }
  454. .zt-btn {
  455. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  456. box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
  457. color: #fff;
  458. font-size: 24rpx;
  459. padding: 10rpx 12rpx;
  460. border-radius: 6rpx;
  461. }
  462. /* */
  463. .qc-btn {
  464. background-color: #3387FF;
  465. color: #fff;
  466. border-radius: 6rpx;
  467. height: 48rpx;
  468. line-height: 48rpx;
  469. padding: 0 20rpx;
  470. margin-left: 10rpx;
  471. }
  472. </style>