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.

essential-information.vue 15KB

преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 1 година
преди 2 години
преди 1 година
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 1 година
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 1 година
преди 2 години
преди 1 година
преди 2 години
преди 1 година
преди 2 години
преди 1 година
преди 2 години
преди 1 година
преди 2 години
преди 2 години
преди 2 години
преди 1 година
преди 1 година
преди 2 години
преди 1 година
преди 2 години
преди 2 години
преди 1 година
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 1 година
преди 2 години
преди 1 година
преди 2 години
преди 1 година
преди 2 години
преди 1 година
преди 2 години
преди 2 години
преди 1 година
преди 2 години
преди 2 години
преди 2 години
преди 1 година
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 1 година
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
преди 2 години
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  1. <template>
  2. <navBar title="九州ETC" :scrollTop="scrollTop"></navBar>
  3. <navBgCar></navBgCar>
  4. <view class="content-wrap">
  5. <!-- 车牌输入 -->
  6. <view class="car-input">
  7. <view class="title">请输入申办车牌</view>
  8. <car-number-input @numberInputResult="carNumber"></car-number-input>
  9. </view>
  10. <!-- 车牌颜色 -->
  11. <view class="chepai-lane">
  12. <view class="title">选择车牌颜色</view>
  13. <numberplate-color
  14. :numberplate="state.data.vehiclePlateNumber"
  15. :numberplateCor="{ id: 0 }"
  16. :type="state.data.type"
  17. @numberplateResult="checkNumberplateColor"
  18. >
  19. </numberplate-color>
  20. </view>
  21. <view>
  22. <!-- 收货地址 -->
  23. <view v-if="!state.data.address" class="address-lane">
  24. <view class="title">请选择或新增收货地址</view>
  25. <view style="margin-top: 30rpx" class="action">
  26. <button type="default" class="button" @click="state.show = true">
  27. 添加收货地址
  28. </button>
  29. </view>
  30. </view>
  31. <view v-if="state.data.address" class="address-lane">
  32. <view class="title">收货地址</view>
  33. <view
  34. @click="state.show = true"
  35. class="address-content"
  36. style="margin-top: 30rpx"
  37. >
  38. <view class="flex">
  39. <image
  40. :showLoading="true"
  41. :src="`${$imgUrl}applyCard/location.png`"
  42. style="width: 48rpx; height: 48rpx"
  43. >
  44. </image>
  45. <view style="margin-left: 18rpx" class="">
  46. <view class="address">
  47. {{ state.data.region + state.data.address }}
  48. </view>
  49. <view style="margin-top: 15rpx" class="flex">
  50. <view class="name">
  51. {{ state.data.consignee }}
  52. </view>
  53. <view class="phone">
  54. {{ state.data.consigneeTel }}
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <view class="arror">
  60. <image
  61. :src="`${$imgUrl}common/arror-right.png`"
  62. class="icon"
  63. ></image>
  64. </view>
  65. </view>
  66. <view style="margin-top: 30rpx" class="action">
  67. <button type="default" class="button" @click="nextAction()">
  68. 下一步
  69. </button>
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. <!-- 地址弹窗 -->
  75. <u-popup mode="bottom" v-model="state.show">
  76. <view class="address-line">
  77. <view
  78. v-if="state.addressArray"
  79. v-for="(item, index) in state.addressArray"
  80. :key="index"
  81. @click="addressSelected(item)"
  82. style="margin-bottom: 60rpx"
  83. class="flex-bettwen"
  84. >
  85. <view class="flex">
  86. <view class="xing">
  87. {{ item.consignee.charAt(0) }}
  88. </view>
  89. <view class="content">
  90. <view class="flex">
  91. <view class="name">
  92. {{ item.consignee }}
  93. </view>
  94. <view class="phone">
  95. {{ item.consigneeTel }}
  96. </view>
  97. </view>
  98. <view class="address">
  99. {{ item.region + item.address }}
  100. </view>
  101. </view>
  102. </view>
  103. <view
  104. @click.stop="editAddress(item)"
  105. style="margin-left: 80rpx"
  106. class="picture"
  107. >
  108. <image
  109. :showLoading="true"
  110. :src="`${$imgUrl}applyCard/edit.png`"
  111. style="width: 48rpx; height: 48rpx"
  112. ></image>
  113. </view>
  114. </view>
  115. <view
  116. :style="state.addressArray ? 'margin-top: 60rpx;' : ''"
  117. class="action-bottom"
  118. >
  119. <button type="default" class="button" @click="goToAddAddress()">
  120. 添加收货地址
  121. </button>
  122. </view>
  123. </view>
  124. </u-popup>
  125. </template>
  126. <script setup lang="ts">
  127. /*导航*/
  128. import navBgCar from "./components/nav-bg-car2";
  129. import carNumberInput from "@/components/car-number-input/car-number-input.vue";
  130. import numberplateColor from "./components/layout-numberplate-color";
  131. import { getItem, StorageKeys } from "@/utils/storage";
  132. import { stringToJson } from "@/utils/network/encryption";
  133. import navBar from "@/components/nav-bar/nav-bar2.vue";
  134. import { onLoad, onShow, onPageScroll,onUnload } from "@dcloudio/uni-app";
  135. import {
  136. addressQuery,
  137. etcCreatOrder,
  138. etcVehiclePlateVer,
  139. searchOrder,
  140. productReCode,
  141. } from "@/utils/network/api.js";
  142. import { request } from "@/utils/network/request.js";
  143. import { reactive, ref } from "vue";
  144. import { msg } from "@/utils/utils";
  145. // import amap from "../../lib/amap-uni.130.js";//引入高德地图小程序插件
  146. const scrollTop = ref(0);
  147. const state = reactive({
  148. data: {
  149. vehiclePlate: undefined, //车牌号
  150. vehiclePlateNumber: "", //车牌号
  151. vehiclePlateColor: 0, //车盘颜色
  152. type: "0", //车牌类型
  153. userType: 1,
  154. whetherToMail: getItem(StorageKeys.OpenId) ? 0 : "", //是否需要邮寄 小程序默认邮寄 0邮寄||1不邮寄 不登录为1
  155. orderSource: "WECHAT",
  156. opId: "",
  157. consignee: "", //收货人
  158. consigneeTel: "", //收货电话
  159. region: "",
  160. address: "",
  161. postalCode: "",
  162. promoteId:"",
  163. longitude:"",
  164. latitude:"",
  165. detailedAddress:'', //通过经纬度转的地址
  166. },
  167. show: false,
  168. addressArray: [],
  169. isSign:''
  170. });
  171. /* 选择车牌颜色 */
  172. const checkNumberplateColor = (item: any) => {
  173. state.data.vehiclePlateColor = item.id;
  174. };
  175. const goToAddAddress = () => {
  176. uni.navigateTo({
  177. url: "/subpackage/orders/addAddress",
  178. });
  179. };
  180. const editAddress = (val) => {
  181. console.log("val",val)
  182. uni.navigateTo({
  183. url: `/subpackage/orders/editAddress?content=` + JSON.stringify(val),
  184. });
  185. };
  186. const carNumber = (val: any) => {
  187. state.data.vehiclePlate = val;
  188. state.data.vehiclePlateNumber = val;
  189. };
  190. const addressSelected = (val: any) => {
  191. console.log("val",val)
  192. state.data = {
  193. ...state.data,
  194. ...val,
  195. };
  196. console.log("state.data.address",state.data.address)
  197. state.show = false;
  198. };
  199. const nextAction = () => {
  200. if (!state.data.vehiclePlate) {
  201. msg("请输入申办车牌");
  202. return;
  203. }
  204. state.data.vehiclePlate = state.data.vehiclePlate.trim();
  205. console.log(state.data.vehiclePlate);
  206. console.log(state.data.vehiclePlate.length);
  207. if (state.data.vehiclePlate.length < 7) {
  208. msg("请输入正确的申办车牌");
  209. return;
  210. }
  211. //1.优先车牌校验 2.在进行订单创建
  212. var vehicleData = {
  213. vehiclePlate: state.data.vehiclePlate,
  214. vehiclePlateColor: state.data.vehiclePlateColor,
  215. };
  216. const options = {
  217. type: 2,
  218. data: vehicleData,
  219. method: "POST",
  220. showLoading: true,
  221. };
  222. request(etcVehiclePlateVer, options).then((res) => {
  223. var data = state.data;
  224. const options = {
  225. type: 2,
  226. data: data,
  227. method: "POST",
  228. showLoading: true,
  229. };
  230. request(etcCreatOrder, options).then((res) => {
  231. console.log(res);
  232. if (res.statusCode === 600) {
  233. orderGoAction();
  234. } else {
  235. const data = stringToJson(res.bizContent);
  236. console.log(data);
  237. //提交产品信息
  238. productReCodeAction(data.orderId).then((result)=>{
  239. console.log(state.data);
  240. console.log(result);
  241. if (state.data.userType == 1) {
  242. uni.navigateTo({
  243. url: `/subpackage/orders/opening-account-people?orderId=${data.orderId}&&vehiclePlateColor=${state.data.vehiclePlateColor}&isSign=${state.isSign}&type=${state.data.type}`,
  244. });
  245. } else {
  246. uni.navigateTo({
  247. url: `/subpackage/orders/opening-account-unit?orderId=${data.orderId}&&vehiclePlateColor=${state.data.vehiclePlateColor}&isSign=${state.isSign}&type=${state.data.type}`,
  248. });
  249. }
  250. })
  251. // uni.navigateTo({
  252. // url: `/subpackage/orders/choice-product?orderId=${data.orderId}&userType=${state.data.userType}&vehiclePlateColor=${state.data.vehiclePlateColor}`,
  253. // })
  254. // uni.redirectTo({
  255. // url: `/subpackage/orders/choice-product?orderId=${data.orderId}&userType=${state.data.userType}&vehiclePlateColor=${state.data.vehiclePlateColor}`,
  256. // });
  257. }
  258. });
  259. });
  260. };
  261. //按照订单阶段去跳转
  262. const orderGoAction = () => {
  263. var orderParmas = {
  264. vehicleId: state.data.vehiclePlate + "_" + state.data.vehiclePlateColor,
  265. opId: getItem(StorageKeys.OpenId),
  266. source: "WECHAT",
  267. };
  268. const options = {
  269. type: 2,
  270. data: orderParmas,
  271. method: "POST",
  272. showLoading: true,
  273. };
  274. request(searchOrder, options).then((res) => {
  275. const data = stringToJson(res.bizContent);
  276. console.log(data);
  277. orderStepGoActon(data);
  278. });
  279. };
  280. //订单状态舔砖
  281. const orderStepGoActon = (val: any) => {
  282. console.log(val);
  283. //完成填写基本信息
  284. if (val.orderStep === 1) {
  285. if (state.data.userType === 1) {
  286. uni.redirectTo({
  287. url: `/subpackage/orders/opening-account-people?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
  288. });
  289. } else {
  290. uni.redirectTo({
  291. url: `/subpackage/orders/opening-account-unit?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
  292. });
  293. }
  294. } else if (val.orderStep === 2) {
  295. uni.redirectTo({
  296. url: `/subpackage/orders/car-release?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
  297. });
  298. } else if (val.orderStep === 3) {
  299. uni.redirectTo({
  300. url: `/subpackage/orders/choice-product?orderId=${val.orderId}`,
  301. });
  302. }else if (val.orderStep === 4) {
  303. uni.redirectTo({
  304. url: `/subpackage/orders/product-detail?orderId=${val.orderId}&&clientFee=${val.product.clientFee}&&id=${val.productId}`,
  305. });
  306. } else if (val.orderStep === 26 || val.orderStep === 27) {
  307. uni.redirectTo({
  308. url: `/subpackage/orders/product-detail?orderId=${val.orderId}&&clientFee=${val.product.clientFee}&&id=${val.productId}`,
  309. });
  310. }
  311. };
  312. onLoad((option: any) => {
  313. state.data.opId = getItem(StorageKeys.OpenId);
  314. state.data.type = option.type; //客车
  315. state.data.userType = option.userType;
  316. state.data.promoteId = option.promoteId;
  317. state.isSign=option.isSign
  318. console.log("订单选择推广发行产品接口",option)
  319. uni.getLocation({
  320. type: 'wgs84',
  321. success: function (res) {
  322. state.data.longitude=res.longitude;
  323. state.data.latitude=res.latitude;
  324. console.log("成功回调",res)
  325. uni.request({
  326. url: 'https://apis.map.qq.com/ws/geocoder/v1/',
  327. data: {
  328. location: (res.latitude + "," + res.longitude),
  329. key: 'U3EBZ-EITC3-SRW3P-3PKVC-LWFD6-SJBAE',
  330. },
  331. success: function(res) {
  332. console.log("成功回调",res)
  333. state.data.detailedAddress = res.data.result.address; // 详细地址信息
  334. // 处理获取到的地址信息
  335. },
  336. fail: function(error) {
  337. // 请求失败的处理
  338. }
  339. });
  340. }
  341. });
  342. });
  343. //监听页面滚动
  344. onPageScroll((e) => {
  345. scrollTop.value = e.scrollTop;
  346. });
  347. onShow((option) => {
  348. var data = {
  349. openId: getItem(StorageKeys.OpenId),
  350. };
  351. if (getItem(StorageKeys.OpenId)) {
  352. const options = {
  353. type: 2,
  354. data: data,
  355. method: "POST",
  356. showLoading: true,
  357. };
  358. request(addressQuery, options).then((res) => {
  359. const data = stringToJson(res.bizContent);
  360. console.log("111",data);
  361. state.addressArray = data.data ?data.data: [];
  362. });
  363. }
  364. uni.$on('updateData',function(data){
  365. var arr=[];
  366. arr.push(data)
  367. state.addressArray=arr
  368. console.log("dizhi",arr)
  369. })
  370. // 删除地址
  371. if(option){
  372. if(option.del==1){
  373. state.addressArray=[];
  374. }
  375. }
  376. });
  377. onUnload(()=>{
  378. uni.$off('updateData');
  379. })
  380. const productReCodeAction = (orderId) => {
  381. // var data = {
  382. // productId: state.data.productId,
  383. // orderId: orderId,
  384. // };
  385. var data = {
  386. promoteId: state.data.promoteId,
  387. orderId: orderId,
  388. };
  389. const options = {
  390. type: 2,
  391. data: data,
  392. method: "POST",
  393. showLoading: true,
  394. };
  395. return new Promise(async (resolve, reject) => {
  396. const res = await request(productReCode, options);
  397. const data = stringToJson(res.bizContent);
  398. console.log("111")
  399. resolve(data);
  400. }).catch((error) => {
  401. console.log("222")
  402. reject(error);
  403. });
  404. };
  405. </script>
  406. <style lang="scss" scoped>
  407. .flex {
  408. display: flex;
  409. align-items: center;
  410. }
  411. .content-wrap {
  412. position: relative;
  413. margin-top: -50rpx;
  414. padding: 0rpx 30rpx;
  415. .title {
  416. font-size: 30rpx;
  417. font-family: Noto Sans S Chinese;
  418. font-weight: 400;
  419. color: #000000;
  420. line-height: 30rpx;
  421. margin-bottom: 30rpx;
  422. }
  423. .car-input {
  424. }
  425. .chepai-lane {
  426. margin-top: 60rpx;
  427. margin-bottom: 20rpx;
  428. }
  429. .address-lane {
  430. margin-bottom: 30rpx;
  431. .title {
  432. font-size: 30rpx;
  433. font-weight: 400;
  434. color: #000000;
  435. line-height: 30rpx;
  436. }
  437. }
  438. }
  439. .address-content {
  440. display: flex;
  441. align-items: center;
  442. justify-content: space-between;
  443. padding-bottom: 30rpx;
  444. border-bottom: 1rpx solid #dcdcdc;
  445. .name {
  446. font-size: 26rpx;
  447. font-family: Microsoft YaHei;
  448. font-weight: 400;
  449. color: #999999;
  450. font-size: 26rpx;
  451. }
  452. .phone {
  453. font-size: 26rpx;
  454. font-family: Microsoft YaHei;
  455. font-weight: 400;
  456. color: #999999;
  457. line-height: 26rpx;
  458. margin-left: 20rpx;
  459. }
  460. .arror .icon {
  461. width: 36rpx;
  462. height: 36rpx;
  463. }
  464. .address {
  465. font-size: 32rpx;
  466. font-family: Microsoft YaHei;
  467. font-weight: 400;
  468. color: #333333;
  469. line-height: 32rpx;
  470. }
  471. }
  472. .address-line {
  473. padding: 20px;
  474. .flex-bettwen {
  475. display: flex;
  476. align-items: center;
  477. justify-content: space-between;
  478. }
  479. .xing {
  480. width: 68rpx;
  481. height: 68rpx;
  482. background: rgba(0, 179, 139, 0.2);
  483. border-radius: 50%;
  484. font-size: 26rpx;
  485. font-weight: 400;
  486. color: #00b38b;
  487. line-height: 68rpx;
  488. text-align: center;
  489. }
  490. .content {
  491. margin-left: 20px;
  492. .name {
  493. font-size: 30rpx;
  494. font-family: Microsoft YaHei;
  495. font-weight: 500;
  496. color: #333333;
  497. }
  498. .phone {
  499. margin-left: 10rpx;
  500. font-size: 24rpx;
  501. font-family: Microsoft YaHei;
  502. font-weight: 400;
  503. color: #999999;
  504. line-height: 36rpx;
  505. }
  506. .address {
  507. margin-top: 10rpx;
  508. font-size: 26rpx;
  509. font-family: Microsoft YaHei;
  510. font-weight: 400;
  511. color: #333333;
  512. line-height: 36rpx;
  513. }
  514. .picture {
  515. width: 48rpx;
  516. height: 48rpx;
  517. }
  518. .editIcon {
  519. width: 48rpx;
  520. height: 48rpx;
  521. }
  522. }
  523. }
  524. .action {
  525. padding-bottom: 100rpx;
  526. .button {
  527. height: 80rpx;
  528. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  529. border-radius: 40rpx;
  530. font-size: 32rpx;
  531. font-weight: 400;
  532. color: #ffffff;
  533. line-height: 80rpx;
  534. }
  535. }
  536. .action-bottom {
  537. padding-bottom: 30rpx;
  538. .button {
  539. height: 80rpx;
  540. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  541. border-radius: 40rpx;
  542. font-size: 32rpx;
  543. font-weight: 400;
  544. color: #ffffff;
  545. line-height: 80rpx;
  546. }
  547. }
  548. :deep(.numberplates .numberplate-bg) {
  549. width: 190rpx;
  550. }
  551. :deep(.numberplates .numberplate){
  552. margin-right: 0rpx !important;
  553. width: 190rpx;
  554. }
  555. :deep(.numberplates){
  556. justify-content: space-between;
  557. }
  558. </style>