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.

address.vue 7.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  1. <template>
  2. <view class="content-wrap">
  3. <!-- 收货地址 -->
  4. <view v-if="!state.data.address" class="address-lane">
  5. <view class="title">请选择或新增收货地址</view>
  6. <view style="margin-top: 30rpx" class="action">
  7. <button type="default" class="button" @click="state.show = true">
  8. 添加收货地址
  9. </button>
  10. </view>
  11. </view>
  12. <view v-if="state.data.address" class="address-lane">
  13. <view class="title">收货地址</view>
  14. <view @click="state.show = true" class="address-content" style="margin-top: 30rpx">
  15. <view class="flex">
  16. <image :showLoading="true" :src="`${$imgUrl}applyCard/location.png`"
  17. style="width: 48rpx; height: 48rpx">
  18. </image>
  19. <view style="margin-left: 18rpx" class="">
  20. <view class="address">
  21. {{ state.data.region + state.data.address }}
  22. </view>
  23. <view style="margin-top: 15rpx" class="flex">
  24. <view class="name">
  25. {{ state.data.consignee }}
  26. </view>
  27. <view class="phone">
  28. {{ state.data.consigneeTel }}
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. <view class="arror">
  34. <image :src="`${$imgUrl}common/arror-right.png`" class="icon"></image>
  35. </view>
  36. </view>
  37. <view style="margin-top: 30rpx" class="action">
  38. <button type="default" class="button" @click="nextAction()">
  39. 下一步
  40. </button>
  41. </view>
  42. </view>
  43. </view>
  44. <u-popup mode="bottom" v-model="state.show">
  45. <view class="address-line">
  46. <view v-if="state.addressArray" v-for="(item, index) in state.addressArray" :key="index"
  47. @click="addressSelected(item)" style="margin-bottom: 60rpx" class="flex-bettwen">
  48. <view class="flex">
  49. <view class="xing">
  50. {{ item.consignee.charAt(0) }}
  51. </view>
  52. <view class="content">
  53. <view class="flex">
  54. <view class="name">
  55. {{ item.consignee }}
  56. </view>
  57. <view class="phone">
  58. {{ item.consigneeTel }}
  59. </view>
  60. </view>
  61. <view class="address">
  62. {{ item.region + item.address }}
  63. </view>
  64. </view>
  65. </view>
  66. <view @click.stop="editAddress(item)" style="margin-left: 80rpx" class="picture">
  67. <image :showLoading="true" :src="`${$imgUrl}applyCard/edit.png`"
  68. style="width: 48rpx; height: 48rpx"></image>
  69. </view>
  70. </view>
  71. <view :style="state.addressArray ? 'margin-top: 60rpx;' : ''" class="action-bottom">
  72. <button type="default" class="button" @click="goToAddAddress()">
  73. 添加收货地址
  74. </button>
  75. </view>
  76. </view>
  77. </u-popup>
  78. </template>
  79. <script setup lang="ts">
  80. import {
  81. reactive
  82. } from "vue";
  83. import {
  84. getItem,
  85. StorageKeys
  86. } from "@/utils/storage";
  87. import {
  88. stringToJson
  89. } from "@/utils/network/encryption";
  90. import {
  91. addressQuery,
  92. gongWuSupplementObu
  93. } from "@/utils/network/api.js";
  94. import {
  95. request
  96. } from "@/utils/network/request.js";
  97. import {
  98. onLoad,
  99. onShow
  100. } from "@dcloudio/uni-app";
  101. import {
  102. navTo
  103. } from "../utils/utils";
  104. onLoad((option) => {
  105. state.data.openId = getItem(StorageKeys.OpenId);
  106. state.data.vehicleId = option.vehicleId;
  107. state.data.deptId = option.deptId;
  108. });
  109. onShow(() => {
  110. var data = {
  111. openId: getItem(StorageKeys.OpenId),
  112. };
  113. const options = {
  114. type: 2,
  115. data: data,
  116. method: "POST",
  117. showLoading: true,
  118. };
  119. request(addressQuery, options).then((res) => {
  120. console.log(res);
  121. const data = stringToJson(res.bizContent);
  122. state.addressArray = data.data;
  123. });
  124. });
  125. const state = reactive({
  126. data: {
  127. openId: "",
  128. orderSource: "WECHAT",
  129. receiveMethod: 0,
  130. deptId: 0,
  131. vehicleId: "",
  132. consignee: "", //收货人
  133. consigneeTel: "", //收货电话
  134. region: "",
  135. address: "",
  136. postalCode: "",
  137. postCode: "",
  138. area: "",
  139. },
  140. show: false,
  141. addressArray: undefined,
  142. });
  143. const addressSelected = (val: any) => {
  144. console.log(val);
  145. state.data = {
  146. ...state.data,
  147. ...val,
  148. };
  149. state.data.postCode = val.postalCode;
  150. state.data.area = val.region;
  151. state.show = false;
  152. };
  153. const goToAddAddress = () => {
  154. uni.navigateTo({
  155. url: "/applyCard/addAddress",
  156. });
  157. };
  158. const editAddress = (val) => {
  159. uni.navigateTo({
  160. url: `/applyCard/editAddress?content=` + JSON.stringify(val),
  161. });
  162. };
  163. const nextAction = () => {
  164. console.log("下一步");
  165. console.log(state.data);
  166. const options = {
  167. type: 2,
  168. data: state.data,
  169. method: "POST",
  170. showLoading: true,
  171. };
  172. request(gongWuSupplementObu, options).then((res) => {
  173. console.log(res);
  174. const result = stringToJson(res.bizContent);
  175. if (result.orderId) {
  176. navTo("/orders/order-details-obu?id=" + result.orderId)
  177. } else {
  178. console.log("增补订单提交有错误");
  179. }
  180. });
  181. }
  182. </script>
  183. <style lang="scss">
  184. page {
  185. background: #EEF7F7;
  186. }
  187. .flex {
  188. display: flex;
  189. align-items: center;
  190. }
  191. .content-wrap {
  192. position: relative;
  193. padding: 50rpx 30rpx;
  194. .title {
  195. font-size: 30rpx;
  196. font-family: Noto Sans S Chinese;
  197. font-weight: bold;
  198. color: #000000;
  199. line-height: 30rpx;
  200. margin-bottom: 30rpx;
  201. }
  202. .car-input {}
  203. .chepai-lane {
  204. margin-top: 60rpx;
  205. margin-bottom: 20rpx;
  206. }
  207. .address-lane {
  208. margin-bottom: 30rpx;
  209. .title {
  210. font-size: 30rpx;
  211. font-weight: bold;
  212. color: #000000;
  213. line-height: 30rpx;
  214. }
  215. }
  216. }
  217. .address-content {
  218. display: flex;
  219. align-items: center;
  220. justify-content: space-between;
  221. padding-bottom: 30rpx;
  222. border-bottom: 1rpx solid #dcdcdc;
  223. .name {
  224. font-size: 26rpx;
  225. font-family: Microsoft YaHei;
  226. font-weight: 400;
  227. color: #999999;
  228. font-size: 26rpx;
  229. }
  230. .phone {
  231. font-size: 26rpx;
  232. font-family: Microsoft YaHei;
  233. font-weight: 400;
  234. color: #999999;
  235. line-height: 26rpx;
  236. margin-left: 20rpx;
  237. }
  238. .arror .icon {
  239. width: 36rpx;
  240. height: 36rpx;
  241. }
  242. .address {
  243. font-size: 32rpx;
  244. font-family: Microsoft YaHei;
  245. font-weight: 400;
  246. color: #333333;
  247. line-height: 32rpx;
  248. }
  249. }
  250. .address-line {
  251. padding: 20px;
  252. .flex-bettwen {
  253. display: flex;
  254. align-items: center;
  255. justify-content: space-between;
  256. }
  257. .xing {
  258. width: 68rpx;
  259. height: 68rpx;
  260. background: rgba(0, 179, 139, 0.2);
  261. border-radius: 50%;
  262. font-size: 26rpx;
  263. font-weight: 400;
  264. color: #00b38b;
  265. line-height: 68rpx;
  266. text-align: center;
  267. }
  268. .content {
  269. margin-left: 20px;
  270. .name {
  271. font-size: 30rpx;
  272. font-family: Microsoft YaHei;
  273. font-weight: 500;
  274. color: #333333;
  275. }
  276. .phone {
  277. margin-left: 10rpx;
  278. font-size: 24rpx;
  279. font-family: Microsoft YaHei;
  280. font-weight: 400;
  281. color: #999999;
  282. line-height: 36rpx;
  283. }
  284. .address {
  285. margin-top: 10rpx;
  286. font-size: 26rpx;
  287. font-family: Microsoft YaHei;
  288. font-weight: 400;
  289. color: #333333;
  290. line-height: 36rpx;
  291. }
  292. .picture {
  293. width: 48rpx;
  294. height: 48rpx;
  295. }
  296. .editIcon {
  297. width: 48rpx;
  298. height: 48rpx;
  299. }
  300. }
  301. }
  302. .action {
  303. padding-bottom: 100rpx;
  304. .button {
  305. height: 80rpx;
  306. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  307. border-radius: 40rpx;
  308. font-size: 32rpx;
  309. font-weight: 400;
  310. color: #ffffff;
  311. line-height: 80rpx;
  312. }
  313. }
  314. .action-bottom {
  315. padding-bottom: 30rpx;
  316. .button {
  317. height: 80rpx;
  318. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  319. border-radius: 40rpx;
  320. font-size: 32rpx;
  321. font-weight: 400;
  322. color: #ffffff;
  323. line-height: 80rpx;
  324. }
  325. }
  326. </style>