address-edit.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. <template>
  2. <view class="content">
  3. <form @submit="saveAddress">
  4. <view>
  5. <view class="flex-row flex-y-center edit-row" style="border-bottom: none;">
  6. <view class="flex-grow-0 row-label">联系人</view>
  7. <view class="flex-grow-1 text-r flex-y-center" style="height: 100%;border-bottom: 1rpx solid #f1f1f1;">
  8. <input placeholder="请输入联系人名称" maxlength="8" :value="info.user_name" name="user_name" />
  9. </view>
  10. </view>
  11. <view class="flex-y-center edit-row">
  12. <view class="flex-grow-0" style="width: 150rpx;">
  13. </view>
  14. <view class="flex-y-center">
  15. <view class="edit-sex flex-center"
  16. :style="[sex_index==1?{'border-color':setColor,color:setColor}:'']" @click="bindSex(1)">
  17. 男士
  18. </view>
  19. <view class="edit-sex flex-center" :style="[sex_index==2?{'border-color':setColor,color:setColor}:'']" @click="bindSex(2)">
  20. 女士
  21. </view>
  22. </view>
  23. </view>
  24. <view class="flex-row flex-y-center edit-row">
  25. <view class="flex-grow-0 row-label">电话</view>
  26. <view class="flex-grow-1 text-r">
  27. <input type="number" placeholder="请输入联系人电话" :value="info.tel" name="tel" maxlength="11" />
  28. </view>
  29. </view>
  30. <view class="flex-row flex-y-center edit-row" style="height: auto;padding: 25rpx 24rpx;">
  31. <view class="flex-grow-0 row-label">收货地址</view>
  32. <view @click="openAddres" class="flex-grow-1">
  33. <view class="flex-row">
  34. <view class="flex-grow-1" style="text-align: right;padding-right: 24rpx">
  35. {{address?address:"请选择"}}
  36. </view>
  37. <view class="flex-grow-0 flex-y-center">
  38. <text class="iconfont icon-jiantou"></text>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. <view class="flex-row flex-y-center edit-row">
  44. <view class="flex-grow-0 row-label">详细地址(门牌号)</view>
  45. <view class="flex-grow-1 text-r">
  46. <input placeholder="请输入详细地址(门牌号)" :value="info.mph" name="mph" />
  47. </view>
  48. </view>
  49. </view>
  50. <view class="bottom-bar">
  51. <button form-type="submit" :style="{background:setColor}">保存</button>
  52. </view>
  53. </form>
  54. </view>
  55. </template>
  56. <script>
  57. export default {
  58. components: {
  59. },
  60. data() {
  61. return {
  62. id: "",
  63. info: {},
  64. address: "",
  65. cityPickerValueDefault: [0, 0, 1],
  66. setColor: '',
  67. sex_index:1,
  68. lat:'',
  69. lng:'',
  70. }
  71. },
  72. onLoad(e) {
  73. this.id = e.id;
  74. if (e.id) {
  75. this.http();
  76. }
  77. uni.setNavigationBarColor({
  78. frontColor: '#ffffff',
  79. backgroundColor: this.$store.state.color,
  80. })
  81. this.setColor = this.$store.state.color;
  82. },
  83. methods: {
  84. bindSex(e){
  85. this.sex_index=e;
  86. },
  87. http() {
  88. this.$http.request('Xcx/MyAddressInfo', {
  89. id: this.id,
  90. }, "", "", true).then(res => {
  91. this.info = res.data
  92. this.address=res.data.address;
  93. this.lat=res.data.lat;
  94. this.lng=res.data.lng;
  95. this.sex_index=res.data.sex;
  96. })
  97. },
  98. openAddres() {
  99. uni.chooseLocation({
  100. success:(res)=> {
  101. this.address=res.address+res.name;
  102. this.lat= res.latitude;
  103. this.lng= res.longitude;
  104. },
  105. fail:(err)=>{
  106. console.log(err,"err")
  107. uni.getSetting({
  108. success: function(e) {
  109. console.log(e),
  110. e.authSetting["scope.userLocation"] ? console.log("取消") :
  111. uni.showModal({
  112. title: "提示",
  113. content: "您拒绝了获取收货地址授权,部分功能无法使用,点击确定重新获取授权。",
  114. showCancel: !1,
  115. success: function(e) {
  116. e.confirm && wx.authorize({
  117. scope: 'scope.userLocation',
  118. success () {
  119. // 用户已经同意小程序使用录音功能,
  120. // 后续调用 wx.startRecord 接口不会弹窗询问
  121. // wx.startRecord()
  122. }
  123. })
  124. // uni.openSetting({
  125. // success: function(e) {
  126. // e.authSetting[
  127. // "scope.userLocation"
  128. // ];
  129. // },
  130. // fail: function(e) {}
  131. // });
  132. },
  133. });
  134. }
  135. });
  136. }
  137. });
  138. // var index = this.$refs.simpleAddress.queryIndex(['全部', '全部', '全部'], 'label');
  139. // this.cityPickerValueDefault = index.index;
  140. // this.$refs.simpleAddress.open();
  141. },
  142. onConfirm(e) {
  143. // console.log(e)
  144. this.info = {
  145. province: e.labelArr[0],
  146. city: e.labelArr[1],
  147. area: e.labelArr[2],
  148. address: this.info.address,
  149. all_address: this.info.all_address,
  150. phone: this.info.phone,
  151. user_name: this.info.user_name,
  152. }
  153. },
  154. saveAddress(e) {
  155. var url,myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
  156. // console.log(myreg2.test(tel));
  157. let tel = e.detail.value.tel;
  158. if (!tel) {
  159. wx.showToast({
  160. title: "联系电话格式不正确",
  161. icon: 'none'
  162. });
  163. return false;
  164. }
  165. let data={
  166. address: this.address,
  167. user_name: e.detail.value.user_name,
  168. mph:e.detail.value.mph,
  169. user_id: uni.getStorageSync('user_id'),
  170. sex: this.sex_index,
  171. tel: e.detail.value.tel,
  172. lat: this.lat,
  173. lng: this.lng,
  174. }
  175. if(this.id){
  176. url='Xcx/UpdAddress';
  177. data.id=this.id;
  178. }else{
  179. url='Xcx/AddAddress';
  180. }
  181. this.$http.request(url,data).then(res => {
  182. uni.showToast({
  183. title: res.message,
  184. icon: 'none',
  185. duration: 1000
  186. })
  187. setTimeout(() => {
  188. uni.navigateBack({
  189. delta: 1
  190. })
  191. }, 1500)
  192. }).catch((res) => {
  193. uni.showToast({
  194. title: res.message,
  195. icon: 'none',
  196. duration: 2000
  197. })
  198. });
  199. },
  200. }
  201. }
  202. </script>
  203. <style lang="scss">
  204. /* pages/address-edit/address-edit.wxss */
  205. page {
  206. background: #fff;
  207. font-size: 28rpx;
  208. }
  209. .edit-sex{
  210. border: 1rpx solid #ccc;
  211. width: 150rpx;
  212. height: 60rpx;
  213. font-size: 24rpx;
  214. margin-left: 20rpx;
  215. border-radius: 6rpx;
  216. }
  217. input {
  218. font-size: 28rpx;
  219. }
  220. .bottom-bar {
  221. position: fixed;
  222. bottom: 20rpx;
  223. left: 0;
  224. width: 100%;
  225. z-index: 1;
  226. }
  227. .bottom-bar button {
  228. background: #C9271B;
  229. text-align: center;
  230. height: 100rpx;
  231. line-height: 100rpx;
  232. color: #fff;
  233. width: 686rpx;
  234. margin: 0 auto;
  235. border-radius: 48px;
  236. }
  237. button::after {
  238. border: none;
  239. }
  240. .wetcher {
  241. width: 686rpx;
  242. height: 100rpx;
  243. line-height: 100rpx;
  244. background: rgba(255, 255, 255, 1);
  245. border: 2rpx solid rgba(201, 206, 214, 1);
  246. opacity: 1;
  247. border-radius: 48px;
  248. margin: 0 auto;
  249. color: #C9271B;
  250. margin-top: 100rpx;
  251. margin-bottom: 66rpx;
  252. }
  253. .edit-row {
  254. background: #fff;
  255. height: 100rpx;
  256. border-bottom: 1rpx solid #eee;
  257. padding: 0rpx 24rpx;
  258. }
  259. .edit-row .row-label {
  260. margin-right: 24rpx;
  261. min-width: 140rpx;
  262. color: #000000;
  263. font-weight: 700;
  264. }
  265. .get-wechat-address {
  266. text-align: center;
  267. background: #09bb07;
  268. color: #fff;
  269. padding: 18rpx 0;
  270. margin: 32rpx 24rpx;
  271. border-radius: 10rpx;
  272. display: block;
  273. }
  274. .get-wechat-address:active {
  275. opacity: 0.85;
  276. }
  277. </style>