editAddress-修改定位前.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. <template>
  2. <view class="tui-addr-box">
  3. <form @submit="bindSave" :report-submit="true">
  4. <tui-list-cell :hover="false" padding="0">
  5. <view class="tui-line-cell">
  6. <view class="tui-title">姓名</view>
  7. <input placeholder-class="tui-phcolor" class="tui-input" name="name" :value="addressData.name" placeholder="请输入姓名"
  8. maxlength="15" type="text" />
  9. </view>
  10. </tui-list-cell>
  11. <tui-list-cell :hover="false" padding="0">
  12. <view class="tui-line-cell">
  13. <view class="tui-title">手机号码</view>
  14. <input placeholder-class="tui-phcolor" class="tui-input" name="telephone" :value="addressData.telephone" placeholder="请输入手机号码"
  15. maxlength="11" type="text" />
  16. </view>
  17. </tui-list-cell>
  18. <picker :value="value" mode="multiSelector" @change="picker" @columnchange="columnPicker" :range="multiArray">
  19. <tui-list-cell :arrow="true" padding="0">
  20. <view class="tui-line-cell">
  21. <view class="tui-title"><text class="tui-title-city-text">所在位置</text></view>
  22. <input placeholder-class="tui-phcolor" class="tui-input tui-pr__30" disabled name="city" placeholder="请选择所在位置" maxlength="50"
  23. type="text" v-model="showRegionStr"/>
  24. </view>
  25. </tui-list-cell>
  26. </picker>
  27. <tui-list-cell :hover="false" padding="0">
  28. <view class="tui-line-cell">
  29. <view class="tui-title">详细地址</view>
  30. <input placeholder-class="tui-phcolor" class="tui-input" name="address" :value="addressData.address" placeholder="请输入详细的地址"
  31. maxlength="50" type="text" />
  32. </view>
  33. </tui-list-cell>
  34. <!--
  35. <tui-list-cell :hover="false" padding="0">
  36. <view class="tui-line-cell">
  37. <view class="tui-cell-title">地址类型</view>
  38. <view class="tui-addr-label">
  39. <text v-for="(item,index) in lists" :key="index" class="tui-label-item"
  40. :class="{'tui-label-active':index==1}">{{item}}</text>
  41. </view>
  42. </view>
  43. </tui-list-cell>
  44. -->
  45. <!-- 默认地址 -->
  46. <!--<tui-list-cell :hover="false" padding="0">
  47. <view class="tui-swipe-cell">
  48. <view>设为默认地址</view>
  49. <switch checked color="#19be6b" class="tui-switch-small" />
  50. </view>
  51. </tui-list-cell>-->
  52. <!-- 保存地址 -->
  53. <view class="tui-addr-save">
  54. <tui-button formType="submit" shadow type="danger" height="88rpx" shape="circle">保存地址</tui-button>
  55. </view>
  56. <view class="tui-del" v-if="addressData.length > 0">
  57. <tui-button shadow type="gray" @click="deleteAddress" height="88rpx" shape="circle">删除地址</tui-button>
  58. </view>
  59. </form>
  60. </view>
  61. </template>
  62. <script>
  63. export default {
  64. data() {
  65. return {
  66. id: 0,
  67. addressData:[],
  68. lists: ["公司", "家", "学校", "其他"],
  69. selectList: [],
  70. multiArray: [], //picker数据
  71. pickerSelect: [0, 0, 0],
  72. showRegionStr: "",
  73. province:[],
  74. city:[],
  75. district:[],
  76. pickerRegionRange: [],
  77. telnull: '',
  78. }
  79. },
  80. onLoad(e) {
  81. const _this = this;
  82. _this.$request.get('area.tree').then(res => {
  83. _this.selectList = res.data;
  84. _this.multiArray = [
  85. _this.toArr(_this.selectList),
  86. _this.toArr(_this.selectList[0].children),
  87. _this.toArr(_this.selectList[0].children[0].children)
  88. ]
  89. });
  90. _this.$config.init(function() {
  91. _this.telnull = _this.$config.getConf("telnull");
  92. });
  93. if (e.id) { // 修改初始化数据库数据
  94. _this.$request.get('address.detail', {
  95. samkey: (new Date()).valueOf(),
  96. id: e.id
  97. }).then(res => {
  98. if (res.errno === 0) {
  99. _this.id = e.id;
  100. _this.addressData = res.data;
  101. _this.showRegionStr = res.data.provinceStr + res.data.cityStr + res.data.areaStr;
  102. _this.initRegionDB(res.data.provinceStr, res.data.cityStr, res.data.areaStr)
  103. return;
  104. } else {
  105. uni.showModal({
  106. title: '提示',
  107. content: '无法获取地址数据',
  108. showCancel: false
  109. })
  110. }
  111. })
  112. }
  113. },
  114. methods: {
  115. picker: function(e) {
  116. let value = e.detail.value;
  117. if (this.selectList.length > 0) {
  118. this.province = this.selectList[value[0]]
  119. this.city = this.selectList[value[0]].children[value[1]]
  120. this.district = this.selectList[value[0]].children[value[1]].children[value[2]]
  121. // this.selectList[value[0]].children[value[1]].children[value[2]].value
  122. this.showRegionStr = this.province.text + " " + this.city.text + " " + this.district.text;
  123. }
  124. },
  125. toArr(object) {
  126. let arr = [];
  127. for (let i in object) {
  128. arr.push(object[i].text);
  129. }
  130. return arr;
  131. },
  132. columnPicker: function(e) {
  133. //第几列 下标从0开始
  134. let column = e.detail.column;
  135. //console.log(column);
  136. //第几行 下标从0开始
  137. let value = e.detail.value;
  138. if (column === 0) {
  139. this.multiArray = [
  140. this.multiArray[0],
  141. this.toArr(this.selectList[value].children),
  142. this.toArr(this.selectList[value].children[0].children)
  143. ];
  144. this.pickerSelect = [value, 0, 0]
  145. } else if (column === 1) {
  146. this.multiArray = [
  147. this.multiArray[0],
  148. this.multiArray[1],
  149. this.toArr(this.selectList[this.pickerSelect[0]].children[value].children)
  150. ];
  151. this.pickerSelect = [this.pickerSelect[0], value, 0]
  152. }
  153. },
  154. async initRegionDB(pname, cname, dname) {
  155. var _this = this;
  156. _this.showRegionStr = pname + cname + dname
  157. let province = undefined
  158. let city = undefined
  159. let district = undefined
  160. if (pname) {
  161. const index = _this.pickerRegionRange[0].findIndex(ele => {
  162. return ele.name == pname
  163. })
  164. //console.log('pindex', index)
  165. if (index >= 0) {
  166. _this.pickerSelect[0] = index
  167. province = _this.pickerRegionRange[0][index]
  168. }
  169. }
  170. if (!province) {
  171. return
  172. }
  173. const _cRes = await _this.$request.get('area.child', {
  174. pid: province.id
  175. });
  176. if (_cRes.errno === 0) {
  177. _this.pickerRegionRange[1] = _cRes.data
  178. if (cname) {
  179. const index = _this.pickerRegionRange[1].findIndex(ele => {
  180. return ele.name == cname
  181. })
  182. if (index >= 0) {
  183. _this.pickerSelect[1] = index
  184. city = _this.pickerRegionRange[1][index]
  185. }
  186. }
  187. }
  188. if (!city) {
  189. return
  190. }
  191. const _dRes = await _this.$request.get('area.child', {
  192. pid: city.id
  193. });
  194. if (_dRes.errno === 0) {
  195. _this.pickerRegionRange[2] = _dRes.data
  196. if (dname) {
  197. const index = _this.pickerRegionRange[2].findIndex(ele => {
  198. return ele.name == dname
  199. })
  200. if (index >= 0) {
  201. _this.pickerSelect[2] = index
  202. district = _this.pickerRegionRange[2][index]
  203. }
  204. }
  205. }
  206. _this.province = province;
  207. _this.city = city;
  208. _this.district = district;
  209. },
  210. bindSave: function(e) {
  211. var _this = this;
  212. var name = e.detail.value.name;
  213. var address = e.detail.value.address;
  214. var telephone = e.detail.value.telephone;
  215. if (name == "") {
  216. uni.showModal({
  217. title: '提示',
  218. content: '请填写联系人姓名',
  219. showCancel: false
  220. })
  221. return
  222. }
  223. if (_this.telnull != '1') {
  224. if (telephone == "") {
  225. uni.showModal({
  226. title: '提示',
  227. content: '请输入联系电话',
  228. showCancel: false
  229. })
  230. return
  231. }
  232. }
  233. if (JSON.stringify(_this.province) == "{}" || JSON.stringify(_this.city) == "{}") {
  234. uni.showModal({
  235. title: '提示',
  236. content: '请选择地区',
  237. showCancel: false
  238. })
  239. return
  240. }
  241. if (address == "") {
  242. uni.showModal({
  243. title: '提示',
  244. content: '请填写详细地址',
  245. showCancel: false
  246. })
  247. return
  248. }
  249. let apiResult
  250. if (_this.id) {
  251. var district_id = _this.addressData.district_id
  252. if( _this.district){
  253. if(_this.district.id){
  254. district_id = _this.district.id;
  255. }
  256. }
  257. apiResult = _this.$request.post('address.update', {
  258. id: _this.id,
  259. province_id: _this.province.id || _this.addressData.province_id,
  260. city_id: _this.city.id || _this.addressData.city_id,
  261. district_id: district_id,
  262. street: _this.sObject ? _this.sObject.id : '',
  263. name: name,
  264. address: address,
  265. telephone: telephone,
  266. isDefault: '1'
  267. })
  268. } else {
  269. apiResult = _this.$request.post('address.add', {
  270. province_id: _this.province.id,
  271. city_id: _this.city.id,
  272. district_id: _this.district ? _this.district.id : '',
  273. street: _this.sObject ? _this.sObject.id : '',
  274. name: name,
  275. address: address,
  276. telephone: telephone,
  277. isDefault: '1'
  278. })
  279. }
  280. apiResult.then(function(res) {
  281. if (res.errno != 0) {
  282. // 登录错误
  283. uni.hideLoading();
  284. uni.showModal({
  285. title: '失败',
  286. content: res.msg,
  287. showCancel: false
  288. })
  289. return;
  290. }
  291. // 跳转到结算页面
  292. uni.navigateBack({})
  293. })
  294. },
  295. deleteAddress: function() {
  296. var _this = this;
  297. var id = _this.addressData.id;
  298. uni.showModal({
  299. title: '提示',
  300. content: '确定要删除该地址吗?',
  301. success: function(res) {
  302. if (res.confirm) {
  303. _this.$request.post('address.delete', {
  304. id: id
  305. }).then(function() {
  306. uni.navigateBack({})
  307. })
  308. } else {
  309. console.log('user cancel')
  310. }
  311. }
  312. })
  313. },
  314. //获取微信地址
  315. readFromWx: function() {
  316. const _this = this
  317. uni.chooseAddress({
  318. success: function(res) {
  319. //console.log(res)
  320. _this.initRegionDB(res.provinceName, res.cityName, res.countyName);
  321. _this.wxaddress = res;
  322. }
  323. })
  324. }
  325. },
  326. /**
  327. * 页面相关事件处理函数--监听用户下拉动作
  328. */
  329. onPullDownRefresh: function() {
  330. setTimeout(() => {
  331. uni.stopPullDownRefresh()
  332. }, 200);
  333. },
  334. }
  335. </script>
  336. <style>
  337. .tui-addr-box {
  338. padding: 20rpx 0;
  339. }
  340. .tui-line-cell {
  341. width: 100%;
  342. padding: 24rpx 30rpx;
  343. box-sizing: border-box;
  344. display: flex;
  345. align-items: center;
  346. }
  347. .tui-title {
  348. width: 180rpx;
  349. font-size: 28rpx;
  350. flex-shrink: 0;
  351. }
  352. .tui-title-city-text {
  353. width: 180rpx;
  354. height: 40rpx;
  355. display: block;
  356. line-height: 46rpx;
  357. }
  358. .tui-input {
  359. width: 500rpx;
  360. }
  361. .tui-pr__30 {
  362. padding-right: 30rpx;
  363. }
  364. .tui-input-city {
  365. flex: 1;
  366. height: 40rpx;
  367. font-size: 28rpx;
  368. padding-right: 30rpx;
  369. }
  370. .tui-phcolor {
  371. color: #ccc;
  372. font-size: 28rpx;
  373. }
  374. .tui-cell-title {
  375. font-size: 28rpx;
  376. flex-shrink: 0;
  377. }
  378. .tui-addr-label {
  379. margin-left: 70rpx;
  380. }
  381. .tui-label-item {
  382. width: 76rpx;
  383. height: 40rpx;
  384. border: 1rpx solid rgb(136, 136, 136);
  385. border-radius: 6rpx;
  386. font-size: 26rpx;
  387. text-align: center;
  388. line-height: 40rpx;
  389. margin-right: 20rpx;
  390. display: inline-block;
  391. transform: scale(0.92);
  392. }
  393. .tui-label-active {
  394. background: #E41F19;
  395. border-color: #E41F19;
  396. color: #fff;
  397. }
  398. .tui-swipe-cell {
  399. width: 100%;
  400. display: flex;
  401. justify-content: space-between;
  402. align-items: center;
  403. background: #fff;
  404. padding: 10rpx 24rpx;
  405. box-sizing: border-box;
  406. border-radius: 6rpx;
  407. overflow: hidden;
  408. font-size: 28rpx;
  409. }
  410. .tui-switch-small {
  411. transform: scale(0.8);
  412. transform-origin: 100% center;
  413. }
  414. /* #ifndef H5 */
  415. .tui-switch-small .wx-switch-input {
  416. margin: 0 !important;
  417. }
  418. /* #endif */
  419. /* #ifdef H5 */
  420. >>>uni-switch .uni-switch-input {
  421. margin-right: 0 !important;
  422. }
  423. /* #endif */
  424. .tui-addr-save {
  425. padding: 24rpx 30rpx;
  426. margin-top: 100rpx;
  427. }
  428. .tui-del {
  429. padding: 24rpx 30rpx;
  430. }
  431. </style>