resultOrder.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <view class="pages">
  3. <view class="success-box">
  4. <view class="success-tit">质保单领取成功</view>
  5. <view class="success-code">
  6. <image :src="codeImg"></image>
  7. </view>
  8. <view class="success-tips">车主可用微信扫此二维码查看质保单详情</view>
  9. </view>
  10. <view class="buttons flex justify_between">
  11. <u-button type="default" @click="shareCode">保存二维码</u-button>
  12. <u-button type="primary" @click="saveForm">查看质保信息</u-button>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. import { getZbdQrCode, sharePic } from '@/libs/tools'
  18. export default {
  19. data() {
  20. return {
  21. detail: null,
  22. codeImg: ''
  23. }
  24. },
  25. onLoad() {
  26. this.detail = this.$store.state.vuex_uuidTempData
  27. this.codeImg = getZbdQrCode()
  28. },
  29. onUnload() {
  30. this.$store.state.vuex_uuidTempData = null
  31. },
  32. methods: {
  33. // 保存二维码到相册并打开详情页面
  34. saveForm(){
  35. uni.redirectTo({
  36. url: "/pagesA/qualityPolicy/searchOrder?mobile="+this.detail.customerInfo.customMobile
  37. })
  38. },
  39. shareCode(){
  40. sharePic()
  41. }
  42. }
  43. }
  44. </script>
  45. <style lang="less">
  46. .pages{
  47. height: 100vh;
  48. background: #fff;
  49. .success-box{
  50. text-align: center;
  51. display: flex;
  52. flex-direction: column;
  53. justify-content: center;
  54. margin-top: 10vh;
  55. .success-tit{
  56. font-weight: bold;
  57. color: #4CAF50;
  58. font-size: 1rem;
  59. }
  60. .success-code{
  61. padding: 2rem;
  62. image{
  63. width: 10rem;
  64. height: 10rem;
  65. }
  66. }
  67. .success-tips{
  68. color: #fd920e;
  69. }
  70. }
  71. .buttons{
  72. padding: 1rem 2rem 2rem;
  73. position: fixed;
  74. width: 100%;
  75. bottom: 0;
  76. left: 0;
  77. background: #fff;
  78. z-index: 10000;
  79. border-top: 1px solid #eee;
  80. justify-content: space-around;
  81. /deep/ .u-btn{
  82. width: 8rem;
  83. }
  84. }
  85. }
  86. </style>