share.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view class="share-body">
  3. <view class="share-head">
  4. <u-image src="@/static/share1.jpg" width='750' height="253"></u-image>
  5. </view>
  6. <view class="share-info">
  7. <view class="userinfo">
  8. <view>
  9. 好友 MAK2342
  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="@/static/share1.jpg" width='150' height="150"></u-image>
  16. </view>
  17. <view>VIN:LFV2A21K0G4053021</view>
  18. <view>马自达 CX-5(KE 2012-2017) 2.0L | 手自一体 2014款 都市型</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. export default {
  29. data() {
  30. return {
  31. carInfo: null,
  32. userInfo: null
  33. }
  34. },
  35. onShareAppMessage(){},
  36. methods: {
  37. // 复制vin
  38. copyVin(){
  39. uni.setClipboardData({
  40. data: this.carInfo.vinNumber||'',
  41. })
  42. },
  43. // 复制车型
  44. copyCar(){
  45. uni.setClipboardData({
  46. data: this.carInfo.carModel||'',
  47. })
  48. },
  49. }
  50. }
  51. </script>
  52. <style lang="less">
  53. .share-info{
  54. background-image: linear-gradient(#bceafa 0%,#ffffff 60%);
  55. padding: 30rpx;
  56. text-align: center;
  57. .userinfo{
  58. padding: 30rpx;
  59. >view{
  60. padding: 10rpx 0;
  61. }
  62. }
  63. .carinfo{
  64. padding: 30rpx;
  65. >view{
  66. padding: 15rpx 0;
  67. }
  68. }
  69. .cbutton{
  70. padding: 30rpx;
  71. button{
  72. width: 260rpx;
  73. }
  74. }
  75. }
  76. </style>