confirmVin.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <view style="width: 100%;">
  3. <view class="confirm-text">
  4. <view>请核对VIN识别是否正确?</view>
  5. <view>如果有误,请修改</view>
  6. </view>
  7. <view class="vin-img" v-if="vinImg">
  8. <u-image :src="vinImg" width="100%" height="165"></u-image>
  9. </view>
  10. <xt-verify-code v-model="verifyCode" inputType='text' size="17" @confirm="confirm"></xt-verify-code>
  11. <view class="confirm-button">
  12. <u-button @click="ok" :custom-style="{background:'#1283d4'}" type="primary" shape="circle">确认</u-button>
  13. </view>
  14. <view class="share-list flex align_center">
  15. <view @click="toScan">
  16. <view><u-icon name="scan" size="60" color="##d5d5d5"></u-icon></view>
  17. <view>重新扫描</view>
  18. </view>
  19. <view>
  20. <view>
  21. <button open-type="share"><u-icon name="chat" size="60" color="##d5d5d5"></u-icon></button>
  22. </view>
  23. <view>分享给好友</view>
  24. </view>
  25. <view @click="toCopy">
  26. <view><u-icon name="file-text" size="60" color="##d5d5d5"></u-icon></view>
  27. <view>复制VIN</view>
  28. </view>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. export default {
  34. data() {
  35. return {
  36. verifyCode: '',
  37. vinImg: ''
  38. }
  39. },
  40. onLoad(opts) {
  41. this.verifyCode = opts.verifyCode
  42. this.vinImg = opts.filePath || ''
  43. },
  44. onShareAppMessage(e){
  45. console.log(e)
  46. return {
  47. title: '修配一码通车架号(VIN)分享',
  48. path: '/pages/vinIput/share?userId=123&vin='+this.verifyCode,
  49. imageUrl:'/static/share.png',
  50. type: '1',
  51. success(res){
  52. console.log(res)
  53. },
  54. fail(err){
  55. console.log(err)
  56. }
  57. }
  58. },
  59. methods: {
  60. toScan(){
  61. uni.navigateTo({
  62. url: "/pages/scan-frame/scan-frame"
  63. })
  64. },
  65. toCopy(){
  66. uni.setClipboardData({
  67. data: this.verifyCode,
  68. })
  69. },
  70. confirm(code){
  71. console.log(code)
  72. this.verifyCode = code
  73. },
  74. ok(){
  75. if(this.verifyCode==''){
  76. uni.showToast({
  77. title: "请输入VIN码",
  78. icon:"none"
  79. })
  80. }else{
  81. // 到选择配件页面
  82. // uni.navigateTo({
  83. // url: "/pages/vinInput/confirmVin"
  84. // })
  85. }
  86. }
  87. }
  88. }
  89. </script>
  90. <style lang="less">
  91. .confirm-button{
  92. padding: 50rpx;
  93. }
  94. .confirm-text{
  95. text-align: center;
  96. padding: 60rpx 30rpx 0;
  97. line-height: 45rpx;
  98. color: #999;
  99. }
  100. .vin-img{
  101. padding: 30rpx 20rpx;
  102. }
  103. .share-list{
  104. padding: 30rpx;
  105. justify-content: space-around;
  106. > view{
  107. text-align: center;
  108. >view{
  109. &:first-child{
  110. margin: 10rpx auto;
  111. border:2rpx solid #aaa;
  112. border-radius: 200rpx;
  113. width: 100rpx;
  114. height: 100rpx;
  115. display: flex;
  116. align-items: center;
  117. justify-content: center;
  118. color: #aaa;
  119. button{
  120. background: none;
  121. border: 0;
  122. color: #aaa;
  123. line-height: normal;
  124. margin: 0;
  125. padding: 0;
  126. &:after{
  127. border: 0;
  128. }
  129. }
  130. }
  131. }
  132. }
  133. }
  134. </style>