share.vue 2.1 KB

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