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 12KB

2 年之前
2 年之前
2 年之前
2 年之前
2 年之前
2 年之前
2 年之前
2 年之前
2 年之前
2 年之前
2 年之前
2 年之前
2 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. <template>
  2. <navBar title="九州ETC"></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. @numberplateResult="checkNumberplateColor"
  17. >
  18. </numberplate-color>
  19. </view>
  20. <!-- 收货地址 -->
  21. <view v-if="!state.data.address" class="address-lane">
  22. <view class="title">请选择或新增收货地址</view>
  23. <view style="margin-top: 30rpx" class="action">
  24. <button type="default" class="button" @click="state.show = true">
  25. 添加收货地址
  26. </button>
  27. </view>
  28. </view>
  29. <view v-if="state.data.address" class="address-lane">
  30. <view class="title">收货地址</view>
  31. <view
  32. @click="state.show = true"
  33. class="address-content"
  34. style="margin-top: 30rpx"
  35. >
  36. <view class="flex">
  37. <image
  38. :showLoading="true"
  39. :src="`${$imgUrl}applyCard/location.png`"
  40. style="width: 48rpx; height: 48rpx"
  41. >
  42. </image>
  43. <view style="margin-left: 18rpx" class="">
  44. <view class="address">
  45. {{ state.data.region + state.data.address }}
  46. </view>
  47. <view style="margin-top: 15rpx" class="flex">
  48. <view class="name">
  49. {{ state.data.consignee }}
  50. </view>
  51. <view class="phone">
  52. {{ state.data.consigneeTel }}
  53. </view>
  54. </view>
  55. </view>
  56. </view>
  57. <view class="arror"><image :src="`${$imgUrl}common/arror-right.png`" class="icon"></image></view>
  58. </view>
  59. <view style="margin-top: 30rpx" class="action">
  60. <button type="default" class="button" @click="nextAction()">
  61. 下一步
  62. </button>
  63. </view>
  64. </view>
  65. </view>
  66. <!-- 地址弹窗 -->
  67. <u-popup mode="bottom" v-model="state.show">
  68. <view class="address-line">
  69. <view
  70. v-if="state.addressArray"
  71. v-for="(item, index) in state.addressArray"
  72. :key="index"
  73. @click="addressSelected(item)"
  74. style="margin-bottom: 60rpx"
  75. class="flex-bettwen"
  76. >
  77. <view class="flex">
  78. <view class="xing">
  79. {{ item.consignee.charAt(0) }}
  80. </view>
  81. <view class="content">
  82. <view class="flex">
  83. <view class="name">
  84. {{ item.consignee }}
  85. </view>
  86. <view class="phone">
  87. {{ item.consigneeTel }}
  88. </view>
  89. </view>
  90. <view class="address">
  91. {{ item.region + item.address }}
  92. </view>
  93. </view>
  94. </view>
  95. <view
  96. @click.stop="editAddress(item)"
  97. style="margin-left: 80rpx"
  98. class="picture"
  99. >
  100. <image
  101. :showLoading="true"
  102. :src="`${$imgUrl}applyCard/edit.png`"
  103. style="width: 48rpx; height: 48rpx"
  104. ></image>
  105. </view>
  106. </view>
  107. <view
  108. :style="state.addressArray ? 'margin-top: 60rpx;' : ''"
  109. class="action-bottom"
  110. >
  111. <button type="default" class="button" @click="goToAddAddress()">
  112. 添加收货地址
  113. </button>
  114. </view>
  115. </view>
  116. </u-popup>
  117. </template>
  118. <script setup lang="ts">
  119. /*导航*/
  120. import navBgCar from "./components/nav-bg-car1";
  121. import carNumberInput from "@/components/car-number-input/car-number-input.vue";
  122. import numberplateColor from "./components/layout-numberplate-color";
  123. import { getItem, StorageKeys } from "@/utils/storage";
  124. import { stringToJson } from "@/utils/network/encryption";
  125. import navBar from "../components/nav-bar/nav-bar2.vue";
  126. import { onLoad, onShow } from "@dcloudio/uni-app";
  127. import {
  128. addressQuery,
  129. etcCreatOrder,
  130. etcVehiclePlateVer,
  131. searchOrder,
  132. } from "@/utils/network/api.js";
  133. import { request } from "@/utils/network/request.js";
  134. import { reactive } from "vue";
  135. import { msg } from "@/utils/utils";
  136. const state = reactive({
  137. data: {
  138. vehiclePlate: undefined, //车牌号
  139. vehiclePlateNumber: "贵A1234", //车牌号
  140. vehiclePlateColor: 0, //车盘颜色
  141. type: "0", //车牌类型
  142. userType: "1",
  143. whetherToMail: 0, //是否需要邮寄 小程序默认邮寄
  144. orderSource: "WECHAT",
  145. opId: "",
  146. consignee: "", //收货人
  147. consigneeTel: "", //收货电话
  148. region: "",
  149. address: "",
  150. postalCode: "",
  151. },
  152. show: false,
  153. addressArray: undefined,
  154. });
  155. /* 选择车牌颜色 */
  156. const checkNumberplateColor = (item: any) => {
  157. state.data.vehiclePlateColor = item.id;
  158. };
  159. const goToAddAddress = () => {
  160. uni.navigateTo({
  161. url: "/applyCard/addAddress",
  162. });
  163. };
  164. const editAddress = (val) => {
  165. uni.navigateTo({
  166. url: `/applyCard/editAddress?content=` + JSON.stringify(val),
  167. });
  168. };
  169. const carNumber = (val: any) => {
  170. state.data.vehiclePlate = val;
  171. state.data.vehiclePlateNumber = val;
  172. };
  173. const addressSelected = (val: any) => {
  174. state.data = {
  175. ...state.data,
  176. ...val,
  177. };
  178. state.show = false;
  179. };
  180. const nextAction = () => {
  181. if (!state.data.vehiclePlate) {
  182. msg("请输入申办车牌");
  183. return;
  184. }
  185. state.data.vehiclePlate = state.data.vehiclePlate.trim();
  186. console.log(state.data.vehiclePlate);
  187. console.log(state.data.vehiclePlate.length);
  188. if (state.data.vehiclePlate.length < 7) {
  189. msg("请输入正确的申办车牌");
  190. return;
  191. }
  192. //1.优先车牌校验 2.在进行订单创建
  193. var vehicleData = {
  194. vehiclePlate: state.data.vehiclePlate,
  195. vehiclePlateColor: state.data.vehiclePlateColor,
  196. };
  197. const options = {
  198. type: 2,
  199. data: vehicleData,
  200. method: "POST",
  201. showLoading: true,
  202. };
  203. request(etcVehiclePlateVer, options).then((res) => {
  204. var data = state.data;
  205. const options = {
  206. type: 2,
  207. data: data,
  208. method: "POST",
  209. showLoading: true,
  210. };
  211. request(etcCreatOrder, options).then((res) => {
  212. console.log(res);
  213. if (res.statusCode === 600) {
  214. orderGoAction();
  215. } else {
  216. const data = stringToJson(res.bizContent);
  217. uni.navigateTo({
  218. url: `/applyCard/choice-product?orderId=${data.orderId}&userType=${state.data.userType}&vehiclePlateColor=${state.data.vehiclePlateColor}`,
  219. })
  220. // if (state.data.userType === "1") {
  221. // uni.navigateTo({
  222. // url: `/applyCard/opening-account-people?orderId=${data.orderId}&&vehiclePlateColor=${state.data.vehiclePlateColor}`,
  223. // });
  224. // } else {
  225. // uni.navigateTo({
  226. // url: `/applyCard/opening-account-unit?orderId=${data.orderId}&&vehiclePlateColor=${state.data.vehiclePlateColor}`,
  227. // });
  228. // }
  229. }
  230. });
  231. });
  232. };
  233. //按照订单阶段去跳转
  234. const orderGoAction = () => {
  235. var orderParmas = {
  236. vehicleId: state.data.vehiclePlate + "_" + state.data.vehiclePlateColor,
  237. opId: getItem(StorageKeys.OpenId),
  238. source: "WECHAT",
  239. };
  240. const options = {
  241. type: 2,
  242. data: orderParmas,
  243. method: "POST",
  244. showLoading: true,
  245. };
  246. request(searchOrder, options).then((res) => {
  247. const data = stringToJson(res.bizContent);
  248. orderStepGoActon(data);
  249. });
  250. };
  251. //订单状态舔砖
  252. const orderStepGoActon = (val: any) => {
  253. console.log(val);
  254. //完成填写基本信息
  255. if (val.orderStep === 1) {
  256. if (state.data.userType === "1") {
  257. uni.navigateTo({
  258. url: `/applyCard/opening-account-people?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
  259. });
  260. } else {
  261. uni.navigateTo({
  262. url: `/applyCard/opening-account-unit?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
  263. });
  264. }
  265. } else if (val.orderStep === 2) {
  266. uni.navigateTo({
  267. url: `/applyCard/car-release?orderId=${val.orderId}&&vehiclePlateColor=${val.vehiclePlateColor}`,
  268. });
  269. } else if (val.orderStep === 3) {
  270. uni.navigateTo({
  271. url: `/applyCard/choice-product?orderId=${val.orderId}`,
  272. });
  273. } else if (val.orderStep === 4) {
  274. uni.navigateTo({
  275. url: `/applyCard/product-detail?orderId=${val.orderId}&&clientFee=${val.product.clientFee}&&id=${val.productId}`,
  276. });
  277. }
  278. };
  279. onLoad((option: any) => {
  280. state.data.opId = getItem(StorageKeys.OpenId);
  281. state.data.type = option.type; //客车
  282. state.data.userType = option.userType;
  283. });
  284. onShow(() => {
  285. var data = {
  286. openId: getItem(StorageKeys.OpenId),
  287. };
  288. const options = {
  289. type: 2,
  290. data: data,
  291. method: "POST",
  292. showLoading: true,
  293. };
  294. request(addressQuery, options).then((res) => {
  295. const data = stringToJson(res.bizContent);
  296. state.addressArray = data.data;
  297. });
  298. });
  299. </script>
  300. <style lang="scss" scoped>
  301. .flex {
  302. display: flex;
  303. align-items: center;
  304. }
  305. .content-wrap {
  306. position: relative;
  307. margin-top: -50rpx;
  308. padding: 0rpx 30rpx;
  309. .title {
  310. font-size: 30rpx;
  311. font-family: Noto Sans S Chinese;
  312. font-weight: 400;
  313. color: #000000;
  314. line-height: 30rpx;
  315. margin-bottom: 30rpx;
  316. }
  317. .car-input {
  318. }
  319. .chepai-lane {
  320. margin-top: 60rpx;
  321. margin-bottom: 20rpx;
  322. }
  323. .address-lane {
  324. margin-bottom: 30rpx;
  325. .title {
  326. font-size: 30rpx;
  327. font-weight: 400;
  328. color: #000000;
  329. line-height: 30rpx;
  330. }
  331. }
  332. }
  333. .address-content {
  334. display: flex;
  335. align-items: center;
  336. justify-content: space-between;
  337. padding-bottom: 30rpx;
  338. border-bottom: 1rpx solid #dcdcdc;
  339. .name {
  340. font-size: 26rpx;
  341. font-family: Microsoft YaHei;
  342. font-weight: 400;
  343. color: #999999;
  344. font-size: 26rpx;
  345. }
  346. .phone {
  347. font-size: 26rpx;
  348. font-family: Microsoft YaHei;
  349. font-weight: 400;
  350. color: #999999;
  351. line-height: 26rpx;
  352. margin-left: 20rpx;
  353. }
  354. .arror .icon {
  355. width: 36rpx;
  356. height: 36rpx;
  357. }
  358. .address {
  359. font-size: 32rpx;
  360. font-family: Microsoft YaHei;
  361. font-weight: 400;
  362. color: #333333;
  363. line-height: 32rpx;
  364. }
  365. }
  366. .address-line {
  367. padding: 20px;
  368. .flex-bettwen {
  369. display: flex;
  370. align-items: center;
  371. justify-content: space-between;
  372. }
  373. .xing {
  374. width: 68rpx;
  375. height: 68rpx;
  376. background: rgba(0, 179, 139, 0.2);
  377. border-radius: 50%;
  378. font-size: 26rpx;
  379. font-weight: 400;
  380. color: #00b38b;
  381. line-height: 68rpx;
  382. text-align: center;
  383. }
  384. .content {
  385. margin-left: 20px;
  386. .name {
  387. font-size: 30rpx;
  388. font-family: Microsoft YaHei;
  389. font-weight: 500;
  390. color: #333333;
  391. }
  392. .phone {
  393. margin-left: 10rpx;
  394. font-size: 24rpx;
  395. font-family: Microsoft YaHei;
  396. font-weight: 400;
  397. color: #999999;
  398. line-height: 36rpx;
  399. }
  400. .address {
  401. margin-top: 10rpx;
  402. font-size: 26rpx;
  403. font-family: Microsoft YaHei;
  404. font-weight: 400;
  405. color: #333333;
  406. line-height: 36rpx;
  407. }
  408. .picture {
  409. width: 48rpx;
  410. height: 48rpx;
  411. }
  412. .editIcon {
  413. width: 48rpx;
  414. height: 48rpx;
  415. }
  416. }
  417. }
  418. .action {
  419. padding-bottom: 100rpx;
  420. .button {
  421. height: 80rpx;
  422. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  423. border-radius: 40rpx;
  424. font-size: 32rpx;
  425. font-weight: 400;
  426. color: #ffffff;
  427. line-height: 80rpx;
  428. }
  429. }
  430. .action-bottom {
  431. padding-bottom: 30rpx;
  432. .button {
  433. height: 80rpx;
  434. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  435. border-radius: 40rpx;
  436. font-size: 32rpx;
  437. font-weight: 400;
  438. color: #ffffff;
  439. line-height: 80rpx;
  440. }
  441. }
  442. </style>