addAddress.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. <template>
  2. <view class="content">
  3. <view class="inner">
  4. <view class="address-box">
  5. <textarea class="textarea" v-model="content"
  6. placeholder="请粘贴或输入文本,点击'识别'自动识别姓名、电话、地址,格式:深圳市龙岗区坂田街道长坑路西2巷2号202 黄大大 18888888888" />
  7. <view class="btns">
  8. <view class="btn parse" @click="parseAddress()">识别</view>
  9. </view>
  10. </view>
  11. <view class="form-box">
  12. <view class="form-item">
  13. <text class="label">联系人</text>
  14. <input type="text" v-model="form.realName" maxlength="10" placeholder="姓名" class="form-input" />
  15. </view>
  16. <view class="form-item">
  17. <text class="label">手机号</text>
  18. <input type="number" v-model="form.phone" maxlength="11" placeholder="手机号" class="form-input" />
  19. </view>
  20. <view class="form-item">
  21. <text class="label">所在地区</text>
  22. <picker :value="multiIndex" class="birth-picker" mode="multiSelector" range-key="n"
  23. :range="addressList" @change="pickerChange" @columnchange="pickerColumnchange">
  24. <view class="right-box">
  25. <view class="input-box">
  26. <input type="text" v-model="form.address" placeholder="请选择" class="form-input"
  27. disabled="disabled" />
  28. </view>
  29. <image class="arrow" src="/static/images/arrow_gray.png" mode=""></image>
  30. </view>
  31. </picker>
  32. </view>
  33. <view class="form-item">
  34. <text class="label">详细地址</text>
  35. <textarea class="form-textarea" v-model="form.detail" placeholder="请输入详细地址" />
  36. </view>
  37. </view>
  38. <!-- 设为默认地址 -->
  39. <view class="setting-box">
  40. <text class="label">设为默认地址</text>
  41. <evan-switch @change="logChange" v-model="isDefault" activeColor="#0bb3f2"
  42. inactiveColor="rgba(0, 0, 0, 0.1)"></evan-switch>
  43. </view>
  44. </view>
  45. <view class="btn-box">
  46. <view class="sub-btn" @click="submit()">保存地址</view>
  47. </view>
  48. </view>
  49. </template>
  50. <script>
  51. import {
  52. addAddress, // 添加地址
  53. editAddress, // 编辑地址
  54. getCitys, //获取省市区
  55. parseAddress, //地址解析
  56. getAddressById
  57. } from "@/api/order.js"
  58. // import {parseAddress,getCity,getCitys,getAddressById,addAddress,editAddress} from '@/api/address'
  59. import EvanSwitch from '@/components/evan-switch/evan-switch.vue'
  60. export default {
  61. components: {
  62. EvanSwitch
  63. },
  64. data() {
  65. return {
  66. content: null,
  67. type: null,
  68. addressId: null,
  69. isDefault: false,
  70. multiIndex: [0, 0, 0],
  71. address: [],
  72. addressList: [
  73. [],
  74. [],
  75. []
  76. ],
  77. form: {
  78. realName: null,
  79. phone: null,
  80. addressId: null,
  81. province: null,
  82. city: null,
  83. district: null,
  84. // cityIds:null,
  85. // postCode:null,
  86. // longitude:null,
  87. // latitude:null,
  88. detail: null,
  89. // address: null,
  90. isDefault: 0,
  91. }
  92. }
  93. },
  94. onLoad(option) {
  95. console.log("option", option)
  96. this.type = option.type;
  97. if (this.type == 'edit') {
  98. uni.setNavigationBarTitle({
  99. title: "修改收货地址"
  100. })
  101. this.form.addressId = option.addressId;
  102. this.addressId = option.addressId;
  103. this.getAddressById();
  104. } else {
  105. uni.setNavigationBarTitle({
  106. title: "新增收货地址"
  107. })
  108. }
  109. this.getCitys()
  110. },
  111. methods: {
  112. logChange(value) {
  113. console.log('isDefault 新值:', value); // 验证值是否更新
  114. this.form.isDefault=value?1:0
  115. },
  116. parseAddress() {
  117. if (this.content == null || this.content == "") {
  118. uni.showToast({
  119. icon: 'none',
  120. title: '请输入地址信息'
  121. });
  122. return;
  123. }
  124. var data = {
  125. content: this.content
  126. };
  127. parseAddress(data).then(
  128. res => {
  129. if (res.code == 200) {
  130. this.form.realName = res.data.name
  131. this.form.phone = res.data.mobile
  132. this.form.address = res.data.provinceName + res.data.cityName + res.data.expAreaName
  133. this.form.province = res.data.provinceName
  134. this.form.city = res.data.cityName
  135. this.form.district = res.data.expAreaName
  136. this.form.detail = res.data.streetName + res.data.address
  137. } else {
  138. uni.showToast({
  139. icon: 'none',
  140. title: res.msg,
  141. });
  142. }
  143. },
  144. rej => {}
  145. );
  146. },
  147. getAddressById() {
  148. var data = {
  149. addressId: this.addressId
  150. };
  151. getAddressById(data).then(
  152. res => {
  153. if (res.code == 200) {
  154. this.form = res.data;
  155. // console.log(" this.form", JSON.stringify(this.form))
  156. this.isDefault = this.form.isDefault == 1 ? true : false;
  157. this.form.address = this.form.province + this.form.city + this.form.district
  158. } else {
  159. uni.showToast({
  160. icon: 'none',
  161. title: res.msg,
  162. });
  163. }
  164. },
  165. rej => {}
  166. );
  167. },
  168. submit() {
  169. // 调试输出
  170. console.log('提交数据:', JSON.stringify(this.form));
  171. if (this.type == "add") {
  172. this.addAddress()
  173. } else if (this.type == "edit") {
  174. this.editAddress()
  175. }
  176. },
  177. editAddress() {
  178. console.log('提交数据:', JSON.stringify(this.form));
  179. editAddress(this.form).then(
  180. res => {
  181. if (res.code == 200) {
  182. uni.showToast({
  183. icon: 'success',
  184. title: "操作成功",
  185. });
  186. setTimeout(function() {
  187. uni.$emit('refreshAddress');
  188. uni.navigateBack({
  189. delta: 1
  190. })
  191. }, 500);
  192. } else {
  193. uni.showToast({
  194. icon: 'none',
  195. title: res.msg,
  196. });
  197. }
  198. },
  199. rej => {}
  200. );
  201. },
  202. addAddress() {
  203. this.form.isDefault=this.isDefault?1:0
  204. addAddress(this.form).then(
  205. res => {
  206. if (res.code == 200) {
  207. uni.showToast({
  208. icon: 'success',
  209. title: "操作成功",
  210. });
  211. setTimeout(function() {
  212. uni.$emit('refreshAddress');
  213. uni.navigateBack({
  214. delta: 1
  215. })
  216. }, 500);
  217. } else {
  218. uni.showToast({
  219. icon: 'none',
  220. title: res.msg,
  221. });
  222. }
  223. },
  224. rej => {}
  225. );
  226. },
  227. // 地区选择
  228. pickerChange(e) {
  229. this.multiIndex = e.detail.value;
  230. // 数组内的下标
  231. // 获取一级类目
  232. // 获取二级类目
  233. // 获取三级类目
  234. this.form.address = this.addressList[0][this.multiIndex[0]].n + this.addressList[1][this.multiIndex[1]].n +
  235. this.addressList[2][this.multiIndex[2]].n
  236. this.form.province = this.addressList[0][this.multiIndex[0]].n
  237. this.form.city = this.addressList[1][this.multiIndex[1]].n
  238. this.form.district = this.addressList[2][this.multiIndex[2]].n
  239. this.form.cityId = this.addressList[1][this.multiIndex[1]].v;
  240. },
  241. pickerColumnchange(e) {
  242. // 第一列滑动
  243. if (e.detail.column === 0) {
  244. this.multiIndex[0] = e.detail.value
  245. // console.log('第一列滑动');
  246. this.addressList[1] = this.address[this.multiIndex[0]].c;
  247. this.addressList[2] = this.address[this.multiIndex[0]].c[0].c
  248. // 第一列滑动 第二列 和第三列 都变为第一个
  249. this.multiIndex.splice(1, 1, 0)
  250. this.multiIndex.splice(2, 1, 0)
  251. }
  252. // 第二列滑动
  253. if (e.detail.column === 1) {
  254. this.multiIndex[1] = e.detail.value
  255. // console.log('第二列滑动');
  256. // console.log(this.multiIndex)
  257. this.addressList[2] = this.address[this.multiIndex[0]].c[this.multiIndex[1]].c
  258. // 第二列 滑动 第三列 变成第一个
  259. this.multiIndex.splice(2, 1, 0)
  260. }
  261. // 第三列滑动
  262. if (e.detail.column === 2) {
  263. this.multiIndex[2] = e.detail.value
  264. }
  265. },
  266. getCitys() {
  267. getCitys().then(
  268. res => {
  269. if (res.code == 200) {
  270. this.address = res.data
  271. for (var i = 0; i < this.address.length; i++) {
  272. this.addressList[0].push(this.address[i])
  273. }
  274. for (var i = 0; i < this.address[0].c.length; i++) {
  275. this.addressList[1].push(this.address[0].c[i])
  276. }
  277. for (var i = 0; i < this.address[0].c[0].c.length; i++) {
  278. this.addressList[2].push(this.address[0].c[0].c[i])
  279. }
  280. } else {
  281. uni.showToast({
  282. icon: 'none',
  283. title: "请求失败",
  284. });
  285. }
  286. },
  287. rej => {}
  288. );
  289. }
  290. }
  291. }
  292. </script>
  293. <style lang="scss">
  294. page {
  295. height: 100%;
  296. }
  297. .content {
  298. height: 100%;
  299. display: flex;
  300. flex-direction: column;
  301. justify-content: space-between;
  302. .inner {
  303. height: calc(100% - 120upx);
  304. padding: 20upx;
  305. .address-box {
  306. padding: 30upx;
  307. background: #FFFFFF;
  308. border-radius: 16upx;
  309. margin-bottom: 20upx;
  310. position: relative;
  311. .textarea {
  312. width: 100%;
  313. height: 200upx;
  314. font-size: 30upx;
  315. color: #999999;
  316. padding-bottom: 100rpx;
  317. }
  318. .btns {
  319. right: 10rpx;
  320. bottom: 10rpx;
  321. position: absolute;
  322. .btn {
  323. width: 155upx;
  324. height: 64upx;
  325. line-height: 64upx;
  326. font-size: 26upx;
  327. font-family: PingFang SC;
  328. font-weight: 500;
  329. text-align: center;
  330. border-radius: 32upx;
  331. &.parse {
  332. background: #0bb3f2;
  333. color: #FFFFFF;
  334. }
  335. }
  336. }
  337. }
  338. .form-box {
  339. padding: 0 30upx;
  340. background: #FFFFFF;
  341. border-radius: 16upx;
  342. .form-item {
  343. padding: 30upx 0;
  344. display: flex;
  345. align-items: flex-start;
  346. border-bottom: 1px solid #F1F1F1;
  347. &:last-child {
  348. border-bottom: none;
  349. }
  350. .label {
  351. width: 180upx;
  352. text-align: left;
  353. font-size: 30upx;
  354. line-height: 44upx;
  355. font-family: PingFang SC;
  356. font-weight: 500;
  357. color: #222222;
  358. flex-shrink: 0;
  359. }
  360. input {
  361. text-align: left;
  362. }
  363. .form-input {
  364. font-size: 30upx;
  365. font-family: PingFang SC;
  366. font-weight: 500;
  367. color: #999999;
  368. text-align: left;
  369. }
  370. .form-textarea {
  371. font-size: 30upx;
  372. color: #999999;
  373. height: 100upx;
  374. padding: 4upx 0;
  375. }
  376. .birth-picker {
  377. flex: 1;
  378. display: flex;
  379. align-items: center;
  380. .right-box {
  381. width: 100%;
  382. display: flex;
  383. align-items: center;
  384. .input-box {
  385. width: 470upx;
  386. }
  387. .arrow {
  388. width: 13upx;
  389. height: 23upx;
  390. margin-left: 20upx;
  391. }
  392. }
  393. }
  394. }
  395. }
  396. .setting-box {
  397. height: 88upx;
  398. background: #FFFFFF;
  399. border-radius: 16upx;
  400. margin-top: 20upx;
  401. padding: 0 30upx;
  402. display: flex;
  403. align-items: center;
  404. justify-content: space-between;
  405. .label {
  406. font-size: 28upx;
  407. font-family: PingFang SC;
  408. font-weight: 500;
  409. color: #111111;
  410. }
  411. }
  412. }
  413. .btn-box {
  414. height: 120upx;
  415. padding: 0 30upx;
  416. display: flex;
  417. align-items: center;
  418. justify-content: center;
  419. background: #FFFFFF;
  420. .sub-btn {
  421. width: 100%;
  422. height: 88upx;
  423. line-height: 88upx;
  424. text-align: center;
  425. font-size: 30upx;
  426. font-family: PingFang SC;
  427. font-weight: bold;
  428. color: #FFFFFF;
  429. background: #0bb3f2;
  430. border-radius: 44upx;
  431. }
  432. }
  433. }
  434. </style>