You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

install-activation-order.vue 10KB

2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
6 months ago
2 years ago
6 months ago
2 years ago
5 months ago
7 months ago
6 months ago
7 months ago
5 months ago
6 months ago
2 years ago
6 months ago
2 years ago
7 months ago
2 years ago
10 months ago
10 months ago
7 months ago
2 years ago
10 months ago
7 months ago
2 years ago
10 months ago
10 months ago
7 months ago
10 months ago
7 months ago
10 months ago
7 months ago
10 months ago
10 months ago
10 months ago
2 years ago
2 years ago
2 years ago
10 months ago
10 months ago
2 years ago
10 months ago
2 years ago
2 years ago
10 months ago
10 months ago
2 years ago
2 years ago
1 year ago
1 year ago
10 months ago
7 months ago
1 year ago
7 months ago
7 months ago
10 months ago
1 year ago
2 years ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
2 years ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
6 months ago
2 years ago
10 months ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  1. <!-- 安装激活-选择订单 -->
  2. <template>
  3. <empty-view :mode="config.emptyHint.mode" :content="config.emptyHint.hint" v-if="params.ordersList.length === 0" />
  4. <view v-else>
  5. <view v-for="(item,index) in params.ordersList" :key="index" :item="item" class="item">
  6. <view class="head">
  7. <view class="name">
  8. <image :src="`${$imgUrl}order/icon-car.png`" class="icon" mode="aspectFit"></image>
  9. <text class="title">{{item.vehiclePlate ?item.vehiclePlate: ''}}</text>
  10. </view>
  11. <view v-if="item.promotionModes==1" class="xiao">小程序</view>
  12. <view v-else class="xianxia">线下网点</view>
  13. </view>
  14. <view class="content">
  15. <view class="picture">
  16. <view>
  17. <view style="padding-bottom: 10rpx;">
  18. <text>车牌颜色:</text>
  19. <text>{{getVehiclePlateColor(item.vehiclePlateColor)}}</text>
  20. </view>
  21. <view>
  22. <text>产品名称:</text>
  23. <text>{{item.productName ?item.productName: ''}}</text>
  24. </view>
  25. </view>
  26. <view>
  27. <view v-if="item.status==2">
  28. <image class="tupian" :src="`${$imgUrl}order/daishouhuo.png`" mode="aspectFill"></image>
  29. </view>
  30. <view
  31. v-if="item.status==1">
  32. <image class="tupian" :src="`${$imgUrl}order/dajihuo.png`" mode="aspectFill"></image>
  33. </view>
  34. <view
  35. v-if="item.status==3">
  36. <image class="tupian" :src="`${$imgUrl}order/chongxinjihuo.png`" mode="aspectFill"></image>
  37. </view>
  38. </view>
  39. </view>
  40. <view>
  41. <text class="type">新办订单号:</text>
  42. <text class="value">{{item.orderNo}}</text>
  43. </view>
  44. <view v-if="item.amount" class="all">合计:<text class="cny">¥</text><text class="amount"
  45. >{{item.amount / 100}}</text></view>
  46. </view>
  47. <view class="btns">
  48. <view class="btn btn-primary"@click="gotoConfirmReceipt(item)"
  49. v-if="item.status==2">确认收货</view>
  50. <view class="btn btn-primary"@click="gotoActiveOrder(item)"
  51. v-if="item.status==1">去激活</view>
  52. <view class="btn btn-primary"@click="gotoOnceActivate(item)"
  53. v-if="item.status==3">OBU重新激活</view>
  54. </view>
  55. </view>
  56. </view>
  57. <uni-load-more :status="params.status" iconType="snow" :icon-size="16" :content-text="config.contentTxt"
  58. v-if="params.ordersList.length > 0" />
  59. </template>
  60. <script setup lang="ts">
  61. import { reactive, ref, watch } from "vue";
  62. import { request, requestNew } from "@/utils/network/request.js";
  63. import { stringToJson } from "@/utils/network/encryption";
  64. import { onLoad, onUnload, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
  65. import { getItem, StorageKeys,setItem } from "@/utils/storage";
  66. import { hasLogin, msg, getOrderStatusName, getOrderTypeName, navTo,interceptND } from "@/utils/utils";
  67. import { queryActiveInfo,ndActivateVerification,silentLoginApi} from "@/utils/network/api";
  68. import useOrderSkip from "@/composables/order/useOrderSkip";
  69. import { deviceType } from "@/utils/network/difference";
  70. import { jump } from "@/datas/9901Jump.js";
  71. import {
  72. getVehiclePlateColor
  73. } from "@/datas/vehiclePlateColor";
  74. //跳转
  75. const { gotoActiveOrder, gotoConfirmReceipt } = useOrderSkip();
  76. const gotoOnceActivate = (item) => {
  77. if (item.deviceType == deviceType) {
  78. const params = encodeURIComponent(JSON.stringify(item))
  79. jump("1", params)
  80. } else {
  81. let vehicleId=item.vehiclePlate+"_"+item.vehiclePlateColor
  82. // #ifdef MP-WEIXIN
  83. navTo(
  84. `/subpackage/after-sale/activation-once-again/activation-once-again?vehicleId=${item.vehicleId}`
  85. );
  86. // #endif
  87. // #ifdef MP-ALIPAY
  88. navTo(
  89. `/subpackage/after-sale/activation-once-again/activation-once-again-ali?vehicleId=${item.vehicleId}`
  90. );
  91. // #endif
  92. }
  93. }
  94. const config = {
  95. emptyHint: {
  96. hint: '~ 暂无待激活订单 ~',
  97. icon: '',
  98. mode: 'order'
  99. },
  100. contentTxt: {
  101. contentdown: '~上拉加载更多~',
  102. contentrefresh: '努力加载中...',
  103. contentnomore: '-- 我是有底线的 --'
  104. }
  105. }
  106. //请求参数
  107. const params = reactive({
  108. pageNo: 1,
  109. pageSize: 10,
  110. total: 0,
  111. status: 'more',
  112. reload: false,
  113. ordersList: [],
  114. vehicleId:"",
  115. tel:"",
  116. qdOrderNo:""
  117. })
  118. /* 刷新列表 */
  119. const refreshList = () => {
  120. params.pageNo = 1;
  121. params.total = 0;
  122. params.ordersList = [];
  123. params.status = 'more';
  124. params.reload = false;
  125. getList();
  126. }
  127. /* 加载更多 */
  128. const loadMore = () => {
  129. if (params.ordersList.length<params.pageNo*10) {
  130. params.status = 'noMore';
  131. } else {
  132. params.status = 'loading';
  133. params.pageNo++;
  134. getList();
  135. }
  136. }
  137. /* 获取列表数据 */
  138. const getList = async () => {
  139. if (!hasLogin()) {
  140. uni.stopPullDownRefresh();
  141. return;
  142. }
  143. let source = ""
  144. // #ifdef MP-ALIPAY
  145. source = "ALI"
  146. // #endif
  147. // #ifdef MP-WEIXIN
  148. source = "WECHAT"
  149. // #endif
  150. let res : any = null;
  151. const options = {
  152. type: 2,
  153. data: {
  154. "opId": getItem(StorageKeys.OpenId),
  155. },
  156. method: 'POST',
  157. showLoading: params.pageNo === 1 ? true : false,
  158. }
  159. try {
  160. res = await requestNew(queryActiveInfo, options);
  161. const data =res;
  162. console.log("data===",data)
  163. params.total = data.data;
  164. console.log("res====", params.total)
  165. if (data.activeList.length > 0 || data.receiveList.length > 0 || data.secondActiveList.length > 0) {
  166. // status 1 首次激活车辆信息列表 2确认收货车辆信息列表 3二次激活车辆信息列表
  167. var activeList=data.activeList
  168. var receiveList=data.receiveList
  169. var secondActiveList=data.secondActiveList
  170. if (data.activeList.length > 0){
  171. for(var i=0;i<activeList.length;i++){
  172. activeList[i]['status']=1
  173. }
  174. }
  175. if (data.receiveList.length > 0){
  176. for(var i=0;i<receiveList.length;i++){
  177. receiveList[i]['status']=2
  178. }
  179. }
  180. if (data.secondActiveList.length > 0){
  181. for(var i=0;i<secondActiveList.length;i++){
  182. secondActiveList[i]['status']=3
  183. }
  184. }
  185. const curList = [...activeList,...receiveList,...secondActiveList] || [];
  186. params.ordersList = params.reload ? curList : params.ordersList.concat(curList);
  187. params.reload = false;
  188. }
  189. if (params.total === params.ordersList.length) {
  190. params.reload = false;
  191. params.status = 'noMore';
  192. }
  193. if (params.pageNo === 1) {
  194. uni.stopPullDownRefresh();
  195. }
  196. console.log("params.ordersList", params.ordersList)
  197. } catch (e) {
  198. console.log('输出内容', e)
  199. uni.stopPullDownRefresh();
  200. }
  201. }
  202. onLoad((option) => {
  203. console.log("诺德激活",option)
  204. // 诺德数据过来 验证+无感登录
  205. if(option.qdOrderNo){
  206. params.qdOrderNo=option.qdOrderNo
  207. params.tel=option.tel
  208. params.vehicleId=option.vehicleId
  209. ndActivateVerificationQuery().then((data) => {
  210. if(data.pass=='on'){
  211. console.log("验证")
  212. silentLogin(data).then(() => {
  213. //监听订单刷新信息
  214. uni.$on('refreshOrder', (data) => {
  215. refreshList();
  216. });
  217. console.log("guoliale")
  218. refreshList();
  219. })
  220. }else{
  221. msg("不属于该渠道")
  222. }
  223. })
  224. }else{
  225. //监听订单刷新信息
  226. uni.$on('refreshOrder', (data) => {
  227. refreshList();
  228. });
  229. console.log("guoliale")
  230. refreshList();
  231. }
  232. });
  233. // 诺德激活验证接口
  234. const ndActivateVerificationQuery = () => {
  235. const options = {
  236. type: 2,
  237. data: {
  238. "code": "1", //诺德
  239. "qdOrderNo": params.qdOrderNo, //渠道订单号
  240. "tel": params.tel,
  241. "vehicleId": params.vehicleId,
  242. },
  243. method: "POST",
  244. showLoading: true,
  245. };
  246. return new Promise(async (resolve, reject) => {
  247. const res = await request(ndActivateVerification, options);
  248. const data = stringToJson(res.bizContent);
  249. console.log("data==", data)
  250. resolve(data);
  251. }).catch((error) => {
  252. reject(error);
  253. });
  254. }
  255. const silentLogin = (data) => {
  256. if (data.userType == "1") {
  257. var datas = {
  258. userType: data.userType,
  259. account: data.mobile,
  260. loginSource: getItem("loginSource"),
  261. };
  262. } else {
  263. var datas = {
  264. userType: data.userType,
  265. account: data.idNum,
  266. loginSource: getItem("loginSource"),
  267. };
  268. }
  269. console.log("datas",datas)
  270. const options = {
  271. type: 2,
  272. data: datas,
  273. method: "POST",
  274. showLoading: true,
  275. };
  276. return new Promise(async (resolve, reject) => {
  277. const res = await request(silentLoginApi, options);
  278. const data = stringToJson(res.bizContent);
  279. console.log("data===",data)
  280. setItem("openId", data.openId);
  281. setItem("token", data.accessToken);
  282. resolve(data);
  283. }).catch((error) => {
  284. reject(error);
  285. });
  286. }
  287. onUnload(() => {
  288. uni.$off('refreshOrder');
  289. });
  290. onPullDownRefresh(() => {
  291. refreshList();
  292. });
  293. </script>
  294. <style>
  295. page {
  296. background-color: #EEF7F7;
  297. }
  298. </style>
  299. <style lang="scss" scoped>
  300. .item {
  301. background: #ffffff;
  302. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  303. border-radius: 20rpx;
  304. box-sizing: border-box;
  305. display: flex;
  306. flex-direction: column;
  307. margin: 30rpx 30rpx 0rpx;
  308. }
  309. .item .head {
  310. display: flex;
  311. justify-content: space-between;
  312. align-items: center;
  313. padding: 20rpx 0;
  314. border-bottom: 1px solid #dcdcdc;
  315. width: 95%;
  316. margin: 0 auto;
  317. }
  318. .item .head {
  319. .head-row {
  320. display: flex;
  321. width: 100%;
  322. justify-content: space-between;
  323. align-items: center;
  324. }
  325. .name>text {
  326. font-size: 26rpx;
  327. font-family: Noto Sans S Chinese;
  328. font-weight: 400;
  329. color: #999999;
  330. line-height: 36rpx;
  331. margin-left: 6rpx;
  332. }
  333. }
  334. .item .head .icon {
  335. width: 37rpx;
  336. height: 31rpx;
  337. }
  338. .item .head .name {
  339. display: flex;
  340. align-items: center;
  341. }
  342. .xiao {
  343. background: #42D175;
  344. border-radius: 5rpx 5rpx 5rpx 5rpx;
  345. color: white;
  346. font-size: 20rpx;
  347. padding: 4rpx 6rpx;
  348. }
  349. .xianxia {
  350. background: #CCB375;
  351. border-radius: 5rpx 5rpx 5rpx 5rpx;
  352. color: white;
  353. font-size: 20rpx;
  354. padding: 4rpx 6rpx;
  355. }
  356. .content {
  357. font-size: 26rpx;
  358. padding: 6rpx 20rpx;
  359. }
  360. .picture {
  361. display: flex;
  362. align-items: center;
  363. justify-content: space-between;
  364. margin: 10rpx 0;
  365. }
  366. .picture>view:first-child {
  367. width: 65%;
  368. }
  369. .tupian {
  370. width: 90rpx;
  371. height: 80rpx;
  372. }
  373. .type {
  374. font-size: 26rpx;
  375. color: #999;
  376. }
  377. .value {
  378. font-size: 26rpx;
  379. color: #333;
  380. }
  381. .all {
  382. display: flex;
  383. justify-content: flex-end;
  384. align-items: center;
  385. margin-top: 10rpx;
  386. }
  387. .cny {
  388. font-size: 26rpx;
  389. color: #333;
  390. }
  391. .amount {
  392. font-size: 40rpx;
  393. font-weight: bold;
  394. }
  395. .btns {
  396. position: relative;
  397. display: flex;
  398. align-items: center;
  399. justify-content: flex-end;
  400. border-top: 1px solid #dcdcdc;
  401. margin: 0 30rpx;
  402. padding: 20rpx 0;
  403. }
  404. .btn {
  405. height: 60rpx;
  406. line-height: 58rpx;
  407. border-radius: 30rpx;
  408. padding: 0 24rpx;
  409. font-size: 23rpx;
  410. box-sizing: border-box;
  411. }
  412. .btn-primary {
  413. color: white;
  414. background-color: #133850;
  415. }
  416. </style>