share.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <view class="share-body">
  3. <view class="share-head">
  4. <view class="back-icon" @click="toHome">
  5. <u-icon name="home"></u-icon>
  6. <text>首页</text>
  7. </view>
  8. <u-image src="@/static/share1.jpg" width='750' height="253"></u-image>
  9. </view>
  10. <view class="share-info">
  11. <view class="userinfo">
  12. <view>
  13. 好友 <text v-if="userName">{{userName||''}}</text>
  14. </view>
  15. <view>给您分享了一个车架号(VIN)</view>
  16. </view>
  17. <view class="carinfo flex flex_column align_center">
  18. <view>
  19. <u-image shape="circle" :src="carInfo?carInfo.icon : '@/static/def_imgs.png'" width='150' height="150"></u-image>
  20. </view>
  21. <view>VIN:{{vinNo}}</view>
  22. <view>{{carInfo?carInfo.text:'暂无匹配车型'}}</view>
  23. </view>
  24. <view class="cbutton flex align_center justify_center">
  25. <u-button @click="copyVin" style="margin: 0 10rpx;" v-if="vinNo" shape="circle">复制VIN</u-button>
  26. <u-button @click="copyCar" style="margin: 0 10rpx;" v-if="carInfo&&carInfo.text" shape="circle">复制车型</u-button>
  27. </view>
  28. </view>
  29. </view>
  30. </template>
  31. <script>
  32. import { getVehicleInfoByVin } from '@/api/car.js'
  33. export default {
  34. data() {
  35. return {
  36. carInfo: null,
  37. userName: null,
  38. vinNo: ''
  39. }
  40. },
  41. onShareAppMessage(){},
  42. onLoad(opts) {
  43. this.vinNo = opts.vinNo
  44. this.userName = (opts.userName == 'undefined' || !opts.userName) ? '' : opts.userName
  45. this.getInfo()
  46. },
  47. methods: {
  48. toHome(){
  49. uni.reLaunch({
  50. url: "/pages/index/index"
  51. })
  52. },
  53. // 复制vin
  54. copyVin(){
  55. uni.setClipboardData({
  56. data: this.vinNo||'',
  57. })
  58. },
  59. // 复制车型
  60. copyCar(){
  61. uni.setClipboardData({
  62. data: this.carInfo.text||'',
  63. })
  64. },
  65. getInfo(){
  66. getVehicleInfoByVin({
  67. vin:this.vinNo
  68. }).then(res => {
  69. if (res.status == 200&&res.data) {
  70. this.carInfo = res.data
  71. this.carInfo.icon = this.carInfo.icon ? 'https:'+this.carInfo.icon : ''
  72. } else {
  73. uni.showModal({
  74. title: '匹配错误',
  75. content: '此VIN码没有匹配的车型,请检查VIN码是否正确',
  76. showCancel: false,
  77. confirmText: '知道了',
  78. success() {
  79. }
  80. })
  81. }
  82. })
  83. }
  84. }
  85. }
  86. </script>
  87. <style lang="less">
  88. page{
  89. background-color: #ffffff;
  90. }
  91. .share-head{
  92. position: relative;
  93. .back-icon{
  94. position: absolute;
  95. left: 30rpx;
  96. top: 90rpx;
  97. color: #333;
  98. z-index: 10000;
  99. }
  100. }
  101. .share-info{
  102. background-image: linear-gradient(#bceafa 0%,#ffffff 60%);
  103. padding: 30rpx;
  104. text-align: center;
  105. .userinfo{
  106. padding: 30rpx;
  107. >view{
  108. padding: 10rpx 0;
  109. }
  110. }
  111. .carinfo{
  112. padding: 30rpx;
  113. >view{
  114. padding: 15rpx 0;
  115. }
  116. }
  117. .cbutton{
  118. padding: 30rpx;
  119. button{
  120. width: 260rpx;
  121. }
  122. }
  123. }
  124. </style>