選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

operation-tips.vue 5.8KB

8ヶ月前
8ヶ月前
8ヶ月前
8ヶ月前
1年前
1年前
1年前
8ヶ月前
1年前
8ヶ月前
8ヶ月前
1年前
8ヶ月前
8ヶ月前
1年前
1年前
1年前
8ヶ月前
1年前
1年前
8ヶ月前
1年前
1年前
1年前
8ヶ月前
1年前
1年前
8ヶ月前
8ヶ月前
8ヶ月前
1年前
8ヶ月前
1年前
8ヶ月前
1年前
1年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <!-- 设备激活1-操作提示 -->
  2. <template>
  3. <view class="main">
  4. <view class="t-card">
  5. <view class="center">
  6. <image class="center-bg" :src="`${$imgUrl}bluetooth/device-active-bg.png`" mode="widthFix" style="width: 100%;">
  7. </image>
  8. <view class="dialog-content first">
  9. <image :src="`${$imgUrl}bluetooth/device-active-left.png`" mode="widthFix"></image>
  10. <view class="dialog-text">
  11. <text class="orange" space="emsp"> &nbsp;&nbsp;&nbsp;&nbsp;撕掉双面胶背面贴纸</text>
  12. 贴在汽车前挡风玻璃并用力按紧。
  13. </view>
  14. </view>
  15. <view class="dialog-content second">
  16. <image :src="`${$imgUrl}bluetooth/device-active-top.png`" mode="widthFix"></image>
  17. <view class="dialog-text">
  18. &nbsp;&nbsp;&nbsp;&nbsp;请你在<text class="orange">激活前</text>将<text class="green">OBU</text>贴在申办车辆挡风玻璃<text
  19. class="orange">后视镜附近阴影区域</text>。
  20. </view>
  21. </view>
  22. </view>
  23. </view>
  24. <!-- <view class="hint">
  25. <image :src="`${$imgUrl}common/icon-hint.png`" class="icon"></image>
  26. <view>激活时,确保OBU蓝牙和手机蓝牙处于打开状态。</view>
  27. </view> -->
  28. <view class="hint">
  29. <view class="txt">
  30. <view>重要提示</view>
  31. </view>
  32. <view class="grey-txt"><view class="point"></view>激活前必须将ETC设备安装到相应车辆上,确保安装车辆信息与激活后OBU内信息一致后才能正常使用。</view>
  33. <view class="grey-txt"><view class="point"></view>如因激活的ETC设备未安装到对应车辆上产生的异常扣费,我司不承担任何赔偿责任。</view>
  34. <view class="grey-txt"><view class="point"></view>激活时,需要录入您的车牌号和手机号并确保OBU蓝牙和手机蓝牙处于打开状态。</view>
  35. </view>
  36. <view class="action">
  37. <button type="default" class="ui-btn" @click="gotoNextStep">
  38. 已知悉,下一步
  39. </button>
  40. </view>
  41. </view>
  42. </template>
  43. <script setup lang="ts">
  44. import {
  45. msg,
  46. navTo,
  47. noticeUser
  48. } from '@/utils/utils';
  49. import { setItem,getItem } from "@/utils/storage";
  50. import { onLoad } from "@dcloudio/uni-app";
  51. let transfer = 0;
  52. let isAfter = '';
  53. onLoad((option) => {
  54. console.log(option);
  55. const orderInfo = {
  56. orderId: "",
  57. id: "",
  58. cardStatus: "",
  59. obuStatus: "",
  60. }
  61. orderInfo.orderId = option.orderId;
  62. orderInfo.id = option.id;
  63. orderInfo.cardStatus = option.cardStatus;
  64. orderInfo.obuStatus = option.obuStatus;
  65. transfer = option.transfer;
  66. isAfter = option.isAfter;
  67. setItem("orderInfo", orderInfo)
  68. console.log(orderInfo,"mpOpenId",getItem('mpOpenId'));
  69. if(!getItem('mpOpenId')){
  70. navTo(`/subpackage/after-sale/wxWebView`)
  71. }
  72. })
  73. const gotoNextStep = () => {
  74. uni.openBluetoothAdapter({
  75. success(res) {
  76. noticeUser(() => {
  77. console.log("11111")
  78. /* 判断是否打开蓝牙 */
  79. uni.getBluetoothAdapterState({
  80. success(res) {
  81. console.log("2222", res)
  82. //如果res.avaliable==false 说明没打开蓝牙 反之则打开
  83. if (res.available == false) {
  84. uni.showToast({
  85. title: '请打开手机蓝牙',
  86. icon: "error",
  87. duration: 2000
  88. })
  89. return
  90. } else {
  91. navTo(`/subpackage/after-sale/activation/operation-upload?transfer=${transfer}&&isAfter=${isAfter}`)
  92. }
  93. }
  94. })
  95. });
  96. },
  97. fail(err) {
  98. uni.showModal({
  99. title: '提示',
  100. content: '请打开小程序蓝牙权限和微信蓝牙权限',
  101. success: function (res) {
  102. if (res.confirm) {
  103. uni.openSetting({
  104. success(res) {
  105. console.log("2222")
  106. console.log(res.authSetting)
  107. }
  108. });
  109. } else if (res.cancel) {
  110. console.log('用户点击取消');
  111. }
  112. }
  113. });
  114. }
  115. })
  116. }
  117. </script>
  118. <style lang="scss" scoped>
  119. .main {
  120. padding-bottom: 200rpx;
  121. background: #E9EDF0;
  122. position: relative;
  123. min-height: 100vh;
  124. box-sizing: border-box;
  125. .action {
  126. position: absolute;
  127. bottom: 0rpx;
  128. left: 0;
  129. height: 128rpx;
  130. background-color: #fff;
  131. border-radius: 30rpx 30rpx 0 0;
  132. width: 100vw;
  133. display: flex;
  134. align-items: center;
  135. justify-content: center;
  136. flex-direction: column;
  137. }
  138. .title {
  139. font-size: 36rpx;
  140. color: #333333;
  141. font-weight: 600;
  142. text-align: center;
  143. padding: 48rpx 0px;
  144. }
  145. .t-card {
  146. padding-top: 70rpx;
  147. background-color: #fff;
  148. }
  149. .center {
  150. width: 100%;
  151. height: auto;
  152. position: relative;
  153. .center-bg {
  154. width: 100%;
  155. }
  156. .dialog-content {
  157. position: absolute;
  158. image {
  159. width: 100%;
  160. }
  161. .dialog-text {
  162. position: absolute;
  163. font-size: 26rpx;
  164. line-height: 40rpx;
  165. color: #666;
  166. .orange {
  167. color: #FF8000;
  168. }
  169. .green {
  170. color: #00B38B;
  171. }
  172. }
  173. }
  174. .first {
  175. width: 419rpx;
  176. height: 144rpx;
  177. top: -40rpx;
  178. left: 250rpx;
  179. .dialog-text {
  180. width: calc(100% - 108rpx);
  181. left: 90rpx;
  182. top: 15rpx;
  183. }
  184. }
  185. .second {
  186. width: 403rpx;
  187. height: 217rpx;
  188. bottom: 200rpx;
  189. right: 115rpx;
  190. .dialog-text {
  191. width: calc(100% - 50rpx);
  192. left: 30rpx;
  193. top: 80rpx;
  194. }
  195. }
  196. }
  197. .hint {
  198. margin: 40rpx 30rpx 0px;
  199. .txt {
  200. font-family: MicrosoftYaHei;
  201. font-size: 32rpx;
  202. color: #111111;
  203. line-height: 35rpx;
  204. }
  205. .grey-txt {
  206. font-family: MicrosoftYaHei;
  207. font-size: 28rpx;
  208. color: #999999;
  209. line-height: 48rpx;
  210. display: flex;
  211. margin-top: 20rpx;
  212. .point{
  213. margin-top: 19rpx;
  214. flex-shrink: 0;
  215. width: 10rpx;
  216. height: 10rpx;
  217. background: #A0A0A0;
  218. margin-right: 16rpx;
  219. border-radius: 50%;
  220. }
  221. }
  222. }
  223. .btn {
  224. margin: 70rpx 40rpx;
  225. }
  226. }
  227. .red {
  228. display: inline-block;
  229. color: red;
  230. background-color: red;
  231. width: 26rpx;
  232. height: 26rpx;
  233. border-radius: 100%;
  234. }
  235. </style>