detail.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582
  1. <template>
  2. <app-layout>
  3. <view class='status'>
  4. <image class='status-bg' :src='clerkImg.detail'></image>
  5. <view class="status-text" v-if="detail.is_use == 1 && detail.cancel_status == 0">已核销</view>
  6. <view class='status-info' v-if="detail.is_use == 1">
  7. <view v-if="card_id > 0">核销时间:{{detail.clerked_at}}</view>
  8. <view v-if="id > 0">核销时间:{{detail.orderClerk.updated_at}}</view>
  9. <view class="status-price" v-if="id > 0">核销金额:¥{{detail.total_pay_price}}</view>
  10. </view>
  11. <view class="status-text" v-if="detail.is_use == 0 && (card_id > 0 || detail.cancel_status == 0)">未核销</view>
  12. <view class="status-text" v-if="detail.cancel_status == 1">已退款</view>
  13. <view class='status-info' v-if="detail.cancel_status == 1">
  14. <view v-if="id > 0">退款时间:{{detail.cancel_time}}</view>
  15. </view>
  16. <view v-if="id > 0" class='address-info'>
  17. <image src='./../image/address.png'></image>
  18. <view>{{detail.store.name ? detail.store.name : ''}} {{detail.store.mobile ? detail.store.mobile : ''}}</view>
  19. <view class="address">{{detail.store.address}}</view>
  20. </view>
  21. <view v-if="card_id > 0" class="card-info">
  22. <view class='dir-left-nowrap cross-center'>
  23. <image class="card-img" :src='detail.pic_url'></image>
  24. <view class="card-name t-omit-two">{{detail.card_name}}</view>
  25. </view>
  26. <view class='card-other'>
  27. <view v-if="detail.is_show_history" class="history-button" @click="isShow = true">
  28. <span>历史核销记录</span>
  29. <image class="icon" src="/static/image/icon/red-arrow.png"></image>
  30. </view>
  31. <view class='other-label'>有效时间</view>
  32. <view>{{detail.start_time}} - {{detail.end_time}}</view>
  33. <view class='other-label'>发放时间</view>
  34. <view>{{detail.created_at}}</view>
  35. <view class='other-label'>使用说明</view>
  36. <text>{{detail.content}}</text>
  37. </view>
  38. </view>
  39. </view>
  40. <view v-if="id > 0" class='order-info'>
  41. <view class="goods" :style="{'margin-top':`${index == 0 ?'0':'12'}px`}" v-for="goods in detail.detail" :key="goods.id">
  42. <image :src='goods.goods.goodsWarehouse.cover_pic'></image>
  43. <view class='goods-info'>
  44. <view class='goods-name t-omit-two'>{{goods.goods.goodsWarehouse.name}}</view>
  45. <view class="goods-attr">
  46. <text v-for="attr in goods.attr_list" :key="attr.id">{{attr.attr_group_name}}:{{attr.attr_name}}</text>
  47. </view>
  48. <view>x{{goods.num}}</view>
  49. </view>
  50. <view class='goods-price'>¥ {{goods.total_price ? goods.total_price : '0.00'}}</view>
  51. </view>
  52. <view class="main-between price-item">
  53. <view class="price-label">商品总价</view>
  54. <view>¥{{ detail.total_goods_price ? detail.total_goods_price : '0.00' }}</view>
  55. </view>
  56. <view class="main-between price-item">
  57. <view class="price-label">运费</view>
  58. <view>¥{{ detail.express_price ? detail.express_price : '0.00' }}</view>
  59. </view>
  60. <view class="main-between price-item" v-if="detail.member_discount_price > 0">
  61. <view class="price-label">会员折扣</view>
  62. <view>¥{{ detail.member_discount_price }}</view>
  63. </view>
  64. <view class="main-between price-item" v-if="detail.integral_deduction_price > 0">
  65. <view class="price-label">积分抵扣</view>
  66. <view>¥-{{ detail.integral_deduction_price }}</view>
  67. </view>
  68. <view class="main-between price-item" v-if="detail.coupon_discount_price > 0">
  69. <view class="price-label">优惠券抵扣</view>
  70. <view>-¥{{ detail.coupon_discount_price }}</view>
  71. </view>
  72. <view class="main-between price-item">
  73. <view class="price-label total-label">订单总价</view>
  74. <view class="total-price">¥{{ detail.total_pay_price ? detail.total_pay_price : '0.00' }}</view>
  75. </view>
  76. </view>
  77. <view v-if="id > 0" class='order-info'>
  78. <view class='info-title'>订单信息</view>
  79. <view class="dir-left-nowrap price-item">
  80. <view class="price-label">下单时间:</view>
  81. <view>{{detail.created_at}}</view>
  82. </view>
  83. <view class="dir-left-nowrap price-item">
  84. <view class="price-label">订单号:</view>
  85. <view>{{detail.order_no}}</view>
  86. </view>
  87. <view class="dir-left-nowrap price-item" v-if="detail.remark">
  88. <view class="price-label">买家备注:</view>
  89. <view>{{detail.remark}}</view>
  90. </view>
  91. <view class="dir-left-nowrap price-item">
  92. <view class="price-label">支付方式:</view>
  93. <view v-if="detail.pay_type == 1">线上支付</view>
  94. <view v-else-if="detail.pay_type == 3">余额支付</view>
  95. <view v-else-if="detail.pay_type == 2">货到付款</view>
  96. <view v-else>未支付</view>
  97. </view>
  98. <view class="dir-left-nowrap price-item">
  99. <view class="price-label">收货方式:</view>
  100. <view v-if="detail.send_type == 1">到店自提</view>
  101. <view v-if="detail.send_type == 0">快递配送</view>
  102. </view>
  103. </view>
  104. <view class='order-info' v-if="detail.name">
  105. <view class='info-title'>收货信息</view>
  106. <view class="dir-left-nowrap price-item">
  107. <view class="price-label">收货人:</view>
  108. <view>{{detail.name}}</view>
  109. </view>
  110. <view class="dir-left-nowrap price-item">
  111. <view class="price-label">联系方式:</view>
  112. <view>{{detail.mobile}}</view>
  113. </view>
  114. </view>
  115. <view v-if="detail.is_show_history == 1" class='order-info' :style="{'margin-bottom': `${detail.clerk_id > 0 ? '12':'28'}px;`}">
  116. <view class='info-title'>核销信息</view>
  117. <view class="dir-left-nowrap price-item">
  118. <view class="price-label">剩余次数:</view>
  119. <view>{{detail.number - detail.use_number}}次</view>
  120. </view>
  121. <view class="dir-left-nowrap price-item">
  122. <view class="price-label">已核销次数:</view>
  123. <view>{{detail.use_number}}次</view>
  124. </view>
  125. <view class="dir-left-nowrap price-item">
  126. <view class="price-label">总次数:</view>
  127. <view>{{detail.number}}次</view>
  128. </view>
  129. </view>
  130. <view style="height: 140rpx; width: 100%"></view>
  131. <view v-if="detail.clerk_id == 0 && id > 0 && detail.is_pay == 1 && detail.cancel_status == 0" @click="toClerk(detail.id)" class="to-clerk">
  132. <button>去核销</button>
  133. </view>
  134. <view v-if="detail.clerk_id == 0 && id > 0 && detail.is_pay == 0 && detail.cancel_status == 0" class="to-clerk" @click="checkPay=!checkPay">
  135. <button>确认收款</button>
  136. </view>
  137. <view v-if="detail.is_use == 0 && card_id > 0" @click="toClerkCard(detail.id)" class="to-clerk">
  138. <button>去核销</button>
  139. </view>
  140. <view class="bg cross-center main-center" v-if="checkPay">
  141. <view class="dialog">
  142. <view class="dialog-title">提示</view>
  143. <view class="dialog-msg">确认是否已当面支付款项给您!</view>
  144. <view class="dialog-btn main-center">
  145. <view @click="checkPay=!checkPay" class="dialog-close">取消</view>
  146. <view class="line"></view>
  147. <view class="dialog-submit" @click="clerkAffirmPay">确认</view>
  148. </view>
  149. </view>
  150. </view>
  151. <app-clerk-historys :user-card-id="detail.id" :is-show.sync="isShow"></app-clerk-historys>
  152. </app-layout>
  153. </template>
  154. <script>
  155. import appLayout from "../../../components/basic-component/app-layout/app-layout.vue";
  156. import appFormId from "../../../components/basic-component/app-form-id/app-form-id.vue";
  157. import appClerkHistorys from '../../../components/page-component/app-clerk-historys/app-clerk-historys.vue';
  158. import { mapState } from "vuex";
  159. export default {
  160. name: "detail",
  161. components: {
  162. "app-layout": appLayout,
  163. "app-form-id": appFormId,
  164. appClerkHistorys
  165. },
  166. data() {
  167. return {
  168. detail: {
  169. start_time: '',
  170. end_time: '',
  171. },
  172. card_id: null,
  173. checkPay: false,
  174. id: null,
  175. isShow: false,
  176. };
  177. },
  178. computed: {
  179. ...mapState({
  180. theme: state => state.mallConfig.theme,
  181. clerkImg: state => state.mallConfig.__wxapp_img.clerk,
  182. mall: state => state.mallConfig.mall
  183. }),
  184. },
  185. onLoad(options) {
  186. this.$showLoading({
  187. text: '加载中...'
  188. });
  189. if (options.id > 0) {
  190. this.id = options.id;
  191. uni.setNavigationBarTitle({
  192. title: "订单详情",
  193. })
  194. }else if (options.card_id > 0) {
  195. this.card_id = options.card_id;
  196. uni.setNavigationBarTitle({
  197. title: "卡券详情",
  198. })
  199. }
  200. },
  201. onShow: function() {
  202. if (this.id > 0) {
  203. this.getDetail();
  204. }else if (this.card_id > 0) {
  205. this.getCardDetail();
  206. }
  207. },
  208. methods: {
  209. toClerk(id) {
  210. uni.navigateTo({
  211. url: '/pages/order/clerk/clerk?id=' + id
  212. });
  213. },
  214. toClerkCard(id) {
  215. uni.navigateTo({
  216. url: '/pages/card/clerk/clerk?cardId=' + id
  217. });
  218. },
  219. getDetail() {
  220. let that = this;
  221. that.$request({
  222. url: that.$api.clerk.detail,
  223. data: {
  224. order_id: this.id
  225. },
  226. }).then(response=>{
  227. that.$hideLoading();
  228. if(response.code == 0) {
  229. that.detail = response.data.order;
  230. }else {
  231. uni.showToast({
  232. title: response.msg,
  233. icon: 'none',
  234. duration: 1000
  235. });
  236. }
  237. }).catch(response => {
  238. that.$hideLoading();
  239. });
  240. },
  241. getCardDetail() {
  242. let that = this;
  243. that.$request({
  244. url: that.$api.clerk.card_detail,
  245. data: {
  246. cardId: this.card_id
  247. },
  248. }).then(response=>{
  249. that.$hideLoading();
  250. if(response.code == 0) {
  251. that.detail = response.data.card;
  252. }else {
  253. uni.showToast({
  254. title: response.msg,
  255. icon: 'none',
  256. duration: 1000
  257. });
  258. }
  259. }).catch(response => {
  260. that.$hideLoading();
  261. });
  262. },
  263. clerkAffirmPay() {
  264. let that = this;
  265. that.$request({
  266. url: that.$api.order.clerk_affirm_pay,
  267. data: {
  268. id: that.id,
  269. action_type: 1,
  270. },
  271. }).then(response=>{
  272. that.$hideLoading();
  273. if(response.code == 0) {
  274. that.checkPay = !that.checkPay;
  275. that.getDetail();
  276. }else {
  277. uni.showToast({
  278. title: response.msg,
  279. icon: 'none',
  280. duration: 1000
  281. });
  282. }
  283. }).catch(response => {
  284. that.$hideLoading();
  285. });
  286. }
  287. }
  288. }
  289. </script>
  290. <style scoped lang="scss">
  291. .status {
  292. position: relative;
  293. padding-top: #{140rpx};
  294. }
  295. .status-price {
  296. margin-top: #{4rpx};
  297. }
  298. .status-bg {
  299. position: absolute;
  300. top: 0;
  301. left: 0;
  302. height: #{220rpx};
  303. width: 100%;
  304. z-index: 0;
  305. }
  306. .status-text {
  307. font-size: #{32rpx};
  308. color: #fff;
  309. position: absolute;
  310. top: #{42rpx};
  311. left: #{48rpx};
  312. }
  313. .address-info {
  314. width: #{702rpx};
  315. margin: 0 auto;
  316. font-size: #{26rpx};
  317. color: #353535;
  318. background-color: #fff;
  319. border-radius: #{16rpx};
  320. position: relative;
  321. padding: #{28rpx} #{24rpx} #{28rpx} #{92rpx};
  322. }
  323. .address-info image {
  324. position: absolute;
  325. top: #{40rpx};
  326. left: #{24rpx};
  327. height: #{44rpx};
  328. width: #{44rpx};
  329. }
  330. .address {
  331. margin-top: #{8rpx};
  332. }
  333. .order-info {
  334. margin: #{24rpx} #{38rpx};
  335. padding: #{28rpx} #{24rpx};
  336. background-color: #fff;
  337. border-radius: #{16rpx};
  338. }
  339. .goods {
  340. height: #{160rpx};
  341. position: relative;
  342. margin-bottom: #{20rpx};
  343. }
  344. .goods image {
  345. height: #{160rpx};
  346. width: #{160rpx};
  347. border-radius: #{10rpx};
  348. float: left;
  349. margin-right: #{20rpx};
  350. }
  351. .goods-info {
  352. font-size: #{24rpx};
  353. color: #999999;
  354. }
  355. .goods-name {
  356. color: #353535;
  357. height: #{85rpx};
  358. }
  359. .goods-price {
  360. color: #353535;
  361. font-size: #{24rpx};
  362. position: absolute;
  363. bottom: 0;
  364. right: 0;
  365. }
  366. .total {
  367. font-size: #{24rpx};
  368. margin-top: #{28rpx};
  369. color: #999999;
  370. text-align: right;
  371. }
  372. .price-item {
  373. margin-top: #{10rpx};
  374. font-size: #{24rpx};
  375. color: #353535;
  376. }
  377. .price-item:first-of-type {
  378. margin-top: #{24rpx};
  379. }
  380. .price-label {
  381. color: #999;
  382. font-size: #{24rpx};
  383. }
  384. .price-label.total-label {
  385. font-size: #{24rpx};
  386. color:#353535;
  387. }
  388. .total-price {
  389. font-size: #{28rpx};
  390. color: #ff4544;
  391. font-weight: bold;
  392. }
  393. .info-title {
  394. font-size: #{24rpx};
  395. color: #353535;
  396. margin-bottom: #{20rpx};
  397. }
  398. .status-info {
  399. position: absolute;
  400. right: #{48rpx};
  401. top: #{42rpx};
  402. color: #fff;
  403. font-size: #{24rpx};
  404. text-align: right;
  405. }
  406. .to-clerk {
  407. position: fixed;
  408. bottom: 0;
  409. height: 140#{rpx};
  410. width: 100%;
  411. padding: 0 24#{rpx};
  412. border-top: 1#{rpx} solid #e2e2e2;
  413. background: #ffffff;
  414. display: flex;
  415. align-items: center;
  416. }
  417. .to-clerk button {
  418. width: #{702rpx};
  419. margin: 0 auto;
  420. font-size: #{32rpx};
  421. color: #fff;
  422. height: #{88rpx};
  423. line-height: #{88rpx};
  424. border-radius: #{44rpx};
  425. background-color: #ff4544;
  426. text-align: center;
  427. }
  428. .card-info {
  429. width: 90%;
  430. margin: 0 auto;
  431. border-radius: #{15rpx};
  432. background-color: #fff;
  433. position: relative;
  434. padding: #{40rpx} #{24rpx};
  435. margin-bottom: #{20rpx};
  436. }
  437. .card-img {
  438. height: #{88rpx};
  439. width: #{88rpx};
  440. margin-right: #{20rpx};
  441. border-radius: #{44rpx};
  442. }
  443. .card-name {
  444. font-size: #{32rpx};
  445. color: #353535;
  446. width: #{546rpx};
  447. }
  448. .info-label {
  449. color: #999999;
  450. }
  451. .card-other {
  452. text-align: left;
  453. font-size: #{28rpx};
  454. margin-top: #{40rpx};
  455. color: #353535;
  456. border-top: #{1rpx} solid #e2e2e2;
  457. }
  458. .other-label {
  459. color: #999999;
  460. margin: #{30rpx} 0 #{22rpx};
  461. }
  462. .bg {
  463. position: fixed;
  464. top: 0;
  465. left: 0;
  466. height: 100%;
  467. width: 100%;
  468. background-color: rgba(0, 0, 0, .3);
  469. z-index: 10;
  470. }
  471. .dialog {
  472. position: fixed;
  473. top: #{400rpx};
  474. left: 0;
  475. right: 0;
  476. height: #{300rpx};
  477. width: #{640rpx};
  478. margin: 0 auto;
  479. z-index: 21;
  480. background-color: #fff;
  481. border-radius: 10px;
  482. text-align: center;
  483. font-size: #{30rpx};
  484. }
  485. .dialog-title {
  486. margin: #{40rpx} auto #{35rpx};
  487. }
  488. .dialog-msg {
  489. color: #ff4544;
  490. }
  491. .dialog-btn {
  492. height: #{88rpx};
  493. width: #{640rpx};
  494. border-top: #{1rpx} solid #e2e2e2;
  495. line-height: #{88rpx};
  496. position: absolute;
  497. bottom: 0;
  498. left: 0;
  499. }
  500. .dialog-close,.dialog-submit {
  501. width: 50%;
  502. }
  503. .line {
  504. height: #{44rpx};
  505. margin-top: #{22rpx};
  506. width: #{1rpx};
  507. background-color: #e2e2e2;
  508. }
  509. .dialog-submit {
  510. color: #ff4544;
  511. }
  512. .goods-attr {
  513. margin-bottom: #{16rpx};
  514. }
  515. .goods-attr text {
  516. margin-right: #{18rpx};
  517. }
  518. .history-button {
  519. width: 215#{rpx};
  520. height:60#{rpx};
  521. padding:18#{rpx} 23#{rpx};
  522. display: flex;
  523. color: #ff4544;
  524. font-size:24#{rpx};
  525. margin:30#{rpx} 0;
  526. align-items: center;
  527. justify-content:center;
  528. background: #ffebeb;
  529. border-radius: 30#{rpx};
  530. .icon {
  531. width: 12#{rpx};
  532. height:22#{rpx};
  533. margin-left:12#{rpx};
  534. }
  535. }
  536. </style>