bookDetail.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. <template>
  2. <view v-if="!isLoading" class="container b-f p-b">
  3. <view class="base">
  4. <view class="title"> {{ detail.bookName }} </view>
  5. <view class="item">
  6. <view class="label">姓名:</view>
  7. <view class="value">{{ detail.contact ? detail.contact : '' }}</view>
  8. </view>
  9. <view class="item">
  10. <view class="label">日期:</view>
  11. <view class="value">{{ detail.serviceDate }}</view>
  12. </view>
  13. <view class="item">
  14. <view class="label">时间:</view>
  15. <view class="value">{{ detail.serviceTime }}</view>
  16. </view>
  17. <view class="item">
  18. <view class="label">门店:</view>
  19. <view class="value">{{ detail.storeInfo ? detail.storeInfo.name : '-'}}</view>
  20. </view>
  21. </view>
  22. <view class="book-qr" v-if="detail.code">
  23. <view>
  24. <image class="image" :src="detail.qrCode"></image>
  25. </view>
  26. <view class="qr-code">
  27. <p class="code">预约码:{{ detail.code }}</p>
  28. <p class="tips">请出示以上券码给核销人员</p>
  29. </view>
  30. </view>
  31. <view class="book-content m-top20">
  32. <view class="title">备注</view>
  33. <view class="content"><jyf-parser :html="detail.remark ? detail.remark : '暂无...'"></jyf-parser></view>
  34. </view>
  35. <!-- 底部选项卡 -->
  36. <view class="footer-fixed" v-if="detail.status == 'A'">
  37. <view class="footer-container">
  38. <view class="foo-item-btn">
  39. <view class="btn-wrapper">
  40. <view class="btn-item btn-item-main" @click="onCancel(detail.id)">
  41. <text>取消预约</text>
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. import jyfParser from '@/components/jyf-parser/jyf-parser'
  51. import * as BookApi from '@/api/book'
  52. export default {
  53. data() {
  54. return {
  55. // 预约ID
  56. myBookId: 0,
  57. // 加载中
  58. isLoading: true,
  59. // 当前卡券详情
  60. detail: null,
  61. qrCode: '',
  62. }
  63. },
  64. /**
  65. * 生命周期函数--监听页面加载
  66. */
  67. onLoad(options) {
  68. this.myBookId = options.myBookId ? options.myBookId : 0;
  69. this.getBookDetail();
  70. },
  71. methods: {
  72. // 获取预约详情
  73. getBookDetail() {
  74. const app = this
  75. BookApi.myBookDetail(app.myBookId)
  76. .then(result => {
  77. app.detail = result.data ? result.data.bookInfo : null;
  78. })
  79. .finally(() => app.isLoading = false)
  80. },
  81. // 取消预约
  82. onCancel() {
  83. const app = this
  84. uni.showModal({
  85. title: '友情提示',
  86. content: '确认取消预约吗?',
  87. success(o) {
  88. if (o.confirm) {
  89. BookApi.cancel(app.myBookId)
  90. .then(result => {
  91. // 显示成功信息
  92. app.$success(result.message)
  93. // 刷新当前订单数据
  94. app.getBookDetail()
  95. })
  96. }
  97. }
  98. });
  99. }
  100. }
  101. }
  102. </script>
  103. <style lang="scss" scoped>
  104. .container {
  105. min-height: 100vh;
  106. padding: 20rpx;
  107. background: #fff;
  108. color:#666666;
  109. }
  110. .base {
  111. border: dashed 5rpx #cccccc;
  112. padding: 30rpx;
  113. border-radius: 10rpx;
  114. margin: 20rpx;
  115. display: block;
  116. height: auto;
  117. min-height: 220rpx;
  118. .title {
  119. font-size: 36rpx;
  120. font-weight: bold;
  121. margin-bottom: 30rpx;
  122. }
  123. .book-main {
  124. .image {
  125. width: 200rpx;
  126. height: 158rpx;
  127. border-radius: 8rpx;
  128. border: #cccccc solid 1rpx;
  129. }
  130. width: 100%;
  131. }
  132. .item {
  133. margin-bottom: 20rpx;
  134. font-size: 30rpx;
  135. color: #666666;
  136. clear: both;
  137. .label {
  138. float: left;
  139. font-weight: bold;
  140. }
  141. .value {
  142. font-weight: normal;
  143. }
  144. }
  145. }
  146. .book-qr {
  147. border: dashed 5rpx #cccccc;
  148. border-radius: 10rpx;
  149. margin: 20rpx;
  150. text-align: center;
  151. padding-top: 30rpx;
  152. padding-bottom: 30rpx;
  153. .image {
  154. width: 360rpx;
  155. height: 360rpx;
  156. margin: 0 auto;
  157. }
  158. .qr-code{
  159. .code{
  160. font-weight: bold;
  161. font-size: 30rpx;
  162. line-height: 50rpx;
  163. }
  164. .tips{
  165. font-size: 25rpx;
  166. color:#C0C4CC;
  167. }
  168. }
  169. }
  170. .book-content {
  171. padding: 30rpx;
  172. border: dashed 5rpx #cccccc;
  173. border-radius: 5rpx;
  174. margin: 20rpx;
  175. min-height: 400rpx;
  176. .title {
  177. margin-bottom: 15rpx;
  178. font-weight: bold;
  179. }
  180. .content {
  181. color: #666666;
  182. font-size: 24rpx;
  183. }
  184. }
  185. /* 底部操作栏 */
  186. .footer-fixed {
  187. position: fixed;
  188. bottom: var(--window-bottom);
  189. left: 0;
  190. right: 0;
  191. display: flex;
  192. height: 180rpx;
  193. z-index: 11;
  194. box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
  195. background: #fff;
  196. }
  197. .footer-container {
  198. width: 100%;
  199. display: flex;
  200. margin-bottom: 40rpx;
  201. }
  202. // 操作按钮
  203. .foo-item-btn {
  204. flex: 1;
  205. .btn-wrapper {
  206. height: 100%;
  207. display: flex;
  208. align-items: center;
  209. }
  210. .btn-item {
  211. flex: 1;
  212. font-size: 28rpx;
  213. height: 80rpx;
  214. line-height: 80rpx;
  215. margin-right: 16rpx;
  216. margin-left: 16rpx;
  217. text-align: center;
  218. color: #fff;
  219. border-radius: 40rpx;
  220. }
  221. // 立即领取按钮
  222. .btn-item-main {
  223. background: linear-gradient(to right, #f9211c, #ff6335);
  224. &.state {
  225. border: none;
  226. color: #cccccc;
  227. background: #F5F5F5;
  228. }
  229. }
  230. }
  231. </style>