confirmVin.vue 3.1 KB

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