Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

essential-information-two.vue 14KB

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