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.

287 lines
8.5 KiB

2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
  1. <template>
  2. <view class="container">
  3. <view class="address-info ">
  4. <u--form labelPosition="left" ref="uForm">
  5. <u-form-item required label="联系人" prop="addressInfo.name" labelWidth="120" borderBottom>
  6. <u--input v-model="addressInfo.name" placeholder="请输入联系人姓名" placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
  7. </u-form-item>
  8. <u-form-item required label="手机号码" prop="addressInfo.phone" labelWidth="120" borderBottom>
  9. <u--input v-model="addressInfo.phone" placeholder="请输入手机号码" placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
  10. </u-form-item>
  11. <u-form-item label="应急联络" prop="addressInfo.emergencyPhone" labelWidth="120" borderBottom>
  12. <u--input v-model="addressInfo.emergencyPhone" placeholder="请输入应急联络号码" placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
  13. </u-form-item>
  14. <!-- <u-form-item label="所在城市" prop="addressInfo.city" labelWidth="120" borderBottom>
  15. <picker mode="multiSelector" @columnchange="columnchange" @change="bindMultiPickerColumnChange" :value="multiIndex"
  16. :range="multiArray">
  17. <view style="display: flex;justify-content: space-between;">
  18. <u--input :value="addressInfo.city? (addressInfo.city +' '+ addressInfo.district):''"
  19. disabled disabledColor="#ffffff" placeholder="请选择所在城市"
  20. placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right">
  21. </u--input>
  22. <u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
  23. </view>
  24. </picker>
  25. </u-form-item> -->
  26. <u-form-item label="所在地区" prop="addressInfo.city" labelWidth="120" borderBottom>
  27. <view style="display: flex;justify-content: space-between;" @click="selectAddress">
  28. <u--input :value="addressInfo.city"
  29. disabled disabledColor="#ffffff" placeholder="请选择所在地区"
  30. placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right">
  31. </u--input>
  32. <u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
  33. </view>
  34. </u-form-item>
  35. <u-form-item label="详细地址" prop="addressInfo.detailAddress" labelWidth="120" borderBottom>
  36. <u--input v-model="addressInfo.detailAddress" placeholder="如楼栋、门牌号" placeholderStyle="text-align:right;color:#AAA;" border="none" inputAlign="right"></u--input>
  37. </u-form-item>
  38. <u-form-item label="设为默认地址" prop="addressInfo.isDefault" labelWidth="120">
  39. <view>
  40. <u-radio-group :value="addressInfo.isDefault?'默认':''" placement="column" @change="groupChange">
  41. <u-radio name="默认" activeColor="#ffbf60" labelColor="#ffbf60" label="默认"></u-radio>
  42. </u-radio-group>
  43. </view>
  44. </u-form-item>
  45. </u--form>
  46. </view>
  47. <view class="address-save">
  48. <button class="address-save-btn" @click="save" :loading="loading">保存</button>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. import {
  54. getCity
  55. } from '@/api/system/user.js'
  56. import {
  57. getAddressDetails,addAddress,updateAddress
  58. } from '@/api/system/address.js'
  59. export default{
  60. data(){
  61. return{
  62. loading:false,
  63. addressInfo:{
  64. name:"",
  65. phone:"",
  66. emergencyPhone:"",
  67. province:"",
  68. city:"",
  69. district:"",
  70. detailAddress:"",
  71. openId:"",
  72. isDefault:0,
  73. },
  74. multiArray: [],
  75. cityList:[],
  76. multiIndex: [0, 0],
  77. addressId:'',
  78. }
  79. },
  80. onLoad(option) {
  81. this.optionType=option.optionType;
  82. if(this.optionType=='edit'){
  83. this.addressId=option.addressId;
  84. this.getAddressDetails(option.addressId);
  85. }
  86. },
  87. mounted() {
  88. this.getCityList()
  89. },
  90. methods:{
  91. getAddressDetails(id){
  92. getAddressDetails(id).then(res=>{
  93. if(res&& res.id){
  94. const {
  95. name,
  96. phone,
  97. emergencyPhone,
  98. province,
  99. city,
  100. district,
  101. detailAddress,
  102. openId,
  103. isDefault,
  104. } = res;
  105. this.addressInfo = {
  106. name,
  107. phone,
  108. emergencyPhone,
  109. province,
  110. city,
  111. district,
  112. detailAddress,
  113. openId,
  114. isDefault,
  115. };
  116. }else{
  117. this.$modal.showToast('获取地址详情失败')
  118. }
  119. })
  120. },
  121. // 选择地区
  122. selectAddress(){
  123. uni.chooseLocation({
  124. success: res => {
  125. this.addressInfo.latitude = res.latitude
  126. this.addressInfo.longitude = res.longitude
  127. this.addressInfo.district = ''
  128. this.addressInfo.province = ''
  129. if (!res.address && res.name) { //用户直接选择城市的逻辑
  130. return this.addressInfo.city = res.name
  131. }
  132. if (res.address || res.name) {
  133. return this.addressInfo.city = res.address + res.name
  134. }
  135. this.addressInfo.city = '' //用户啥都没选就点击勾选
  136. },
  137. fail(e) {
  138. console.log("获取位置信息失败!", e)
  139. }
  140. })
  141. },
  142. save(){
  143. let params = this.addressInfo
  144. if(params.phone){
  145. if(!(/^1[3456789]\d{9}$/.test(params.phone))){
  146. this.$modal.showToast('手机号码有误')
  147. return false;
  148. }
  149. } else {
  150. this.$modal.showToast('请输入手机号')
  151. return false;
  152. }
  153. if(params.emergencyPhone){
  154. if(!(/^1[3456789]\d{9}$/.test(params.emergencyPhone))){
  155. this.$modal.showToast('手机号码有误')
  156. return false;
  157. }
  158. }
  159. if(!params.name){
  160. this.$modal.showToast('请输入联系人')
  161. return false;
  162. }
  163. this.loading=true
  164. console.log(params);
  165. if(this.optionType=='edit'){
  166. params.id = this.addressId;
  167. updateAddress(params).then(res=>{
  168. if(res&&res==1){
  169. setTimeout(() => {
  170. let len = getCurrentPages().length;
  171. this.loading=false
  172. if(len >= 2) {
  173. uni.navigateBack();
  174. }else {
  175. uni.redirectTo({url:'/pages/personalCenter/address'});
  176. }
  177. }, 2000);
  178. }else {
  179. this.loading=false
  180. this.$modal.showToast('更新地址失败')
  181. }
  182. })
  183. } else if(this.optionType=='add'){
  184. addAddress(params).then(res=>{
  185. if(res&&res>0){
  186. setTimeout(() => {
  187. let len = getCurrentPages().length;
  188. this.loading=false
  189. if(len >= 2) {
  190. uni.navigateBack();
  191. }else {
  192. uni.redirectTo({url:'/pages/personalCenter/address'});
  193. }
  194. }, 2000);
  195. }else {
  196. this.loading=false
  197. this.$modal.showToast('新增地址失败')
  198. }
  199. })
  200. }
  201. },
  202. getCityList() {
  203. getCity().then(res => {
  204. if (res.code == 200) {
  205. console.log('city', JSON.parse(res.msg));
  206. this.cityList = JSON.parse(res.msg)
  207. const cityLabels = this.cityList.map(item =>item.city)
  208. this.multiArray[0] = cityLabels
  209. this.multiArray[1] = this.cityList[0].region.map(e=> e.region)
  210. } else {
  211. this.$modal.showToast('获取城市失败,请联系系统管理员!');
  212. }
  213. })
  214. },
  215. columnchange(e){
  216. console.log(e)
  217. // 当滚动切换一级分类时,为当前的一级分类添加它的子类
  218. if (e.detail.column == 0) {
  219. const currentCity = this.cityList[e.detail.value]
  220. // #ifdef H5
  221. // 在小程序中直接赋值无效 H5 可直接赋值
  222. this.multiArray[1] = currentCity.region.map(e=>e.region)
  223. // #endif
  224. // #ifdef MP-WEIXIN
  225. // 在 H5 环境下 $set 会导致一级分类无法滚动, 小程序正常运行
  226. this.$set(this.multiArray, 1, currentCity.region.map(e=>e.region))
  227. // #endif
  228. this.multiIndex=[e.detail.value,0]
  229. }
  230. },
  231. bindMultiPickerColumnChange(e) {
  232. console.log('值为:' + e.detail.value)
  233. this.multiIndex = e.detail.value
  234. this.addressInfo.province = this.multiArray[0][this.multiIndex[0]]
  235. this.addressInfo.city = this.multiArray[0][this.multiIndex[0]]
  236. this.addressInfo.district = this.multiArray[1][this.multiIndex[1]]
  237. this.isSelected = true
  238. this.$forceUpdate()
  239. },
  240. groupChange(n) {
  241. console.log('groupChange', n);
  242. this.addressInfo.isDefault=+(!this.addressInfo.isDefault)
  243. },
  244. }
  245. }
  246. </script>
  247. <style lang="scss">
  248. .container {
  249. position: relative;
  250. height: 100%;
  251. padding-bottom: 90px;
  252. .address-save {
  253. background-color: #FFFFFF;
  254. padding: 10px 20px 40px;
  255. width: 100%;
  256. height: 90px;
  257. position: fixed;
  258. bottom: 0;
  259. z-index: 100;
  260. .address-save-btn {
  261. width: 100%;
  262. border-radius: 6px;
  263. background: #FFB13F;
  264. font-size: 16px;
  265. color: #FFFFFF;
  266. }
  267. }
  268. }
  269. .address-info{
  270. background-color: #fff;
  271. padding: 10px 20px;
  272. .u-radio-group{
  273. float: right;
  274. }
  275. }
  276. </style>