addressManage.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  1. <template>
  2. <view class="container clearfix">
  3. <view class="add-content">
  4. <view class="input-row b-b">
  5. <view class="label">收货人姓名</view>
  6. <input
  7. class="input"
  8. type="text"
  9. v-model="addressData.shouHuoRen"
  10. @input="onShouHuoRen"
  11. placeholder="请输入收货人姓名"
  12. placeholder-class="placeholder"
  13. />
  14. </view>
  15. <view class="input-row b-b">
  16. <view class="label">联系方式</view>
  17. <input
  18. class="input"
  19. type="number"
  20. maxlength="11"
  21. v-model="addressData.mobile"
  22. @input="onMobile"
  23. placeholder="请输入联系方式"
  24. placeholder-class="placeholder"
  25. />
  26. </view>
  27. <view class="input-row b-b" @click="showMulLinkageThreePicker">
  28. <view class="label">收货地址</view>
  29. <text class="input"> {{ addressData.allAddress }} </text>
  30. <text class="iconfont icon-chakangengduo"></text>
  31. </view>
  32. <view class="text-textarea b-b">
  33. <view class="textarea show" v-if="isShowInput">{{
  34. addressData.address
  35. ? addressData.address
  36. : '详细地址:如道路、门牌号、小区、楼房号、单元室等'
  37. }}</view>
  38. <textarea
  39. v-else
  40. class="textarea"
  41. type="text"
  42. v-model="addressData.address"
  43. placeholder="详细地址:如道路、门牌号、小区、楼房号、单元室等"
  44. placeholder-class="placeholder"
  45. maxlength="50"
  46. @input="onTextareaInput"
  47. :class="isShowInput ? '' : ''"
  48. />
  49. </view>
  50. <view class="text-input default-row">
  51. <text class="tit">设为默认地址</text>
  52. <switch
  53. :checked="switchDefault"
  54. color="#333333"
  55. @change="switchChange"
  56. style="transform:scale(0.6)"
  57. />
  58. </view>
  59. <button
  60. class="add-btn"
  61. :disabled="isConfirm"
  62. :class="[isConfirm == true ? 'disabled' : '']"
  63. @click="confirm"
  64. >
  65. {{ buttonText }}
  66. </button>
  67. </view>
  68. <mpvue-city-picker
  69. :themeColor="themeColor"
  70. ref="mpvueCityPicker"
  71. :pickerValueDefault="cityPickerValueDefault"
  72. @onCancel="onCancel"
  73. @onConfirm="onConfirm"
  74. >
  75. </mpvue-city-picker>
  76. </view>
  77. </template>
  78. <script>
  79. import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
  80. import authorize from '@/common/config/authorize.js'
  81. export default {
  82. components: {
  83. mpvueCityPicker
  84. },
  85. data() {
  86. return {
  87. buttonText: '保存',
  88. addType: 1, //记录添加地址的类型
  89. isConfirm: true,
  90. isShowInput: false,
  91. switchDefault: false,
  92. addressData: {
  93. addressId: '',
  94. allAddress: '请选择所在地区',
  95. storeId: '', //用户id ,只在新增收货地址时传
  96. shouHuoRen: '', //收货人
  97. mobile: '', //收货人手机
  98. townId: '', //区ID
  99. address: '', //地址
  100. defaultFlag: 0 //是否默认收货地址(0 不是默认,1 默认)
  101. },
  102. params: {} //参数
  103. }
  104. },
  105. onLoad(option) {
  106. this.addressData.storeId = uni.getStorageSync('clubInfo').storeId
  107. let title = '添加新地址'
  108. if (option.type === 'edit') {
  109. title = '编辑收货地址'
  110. this.isConfirm = false
  111. this.addType = 2
  112. let optionData = JSON.parse(option.data)
  113. console.log(optionData)
  114. // 设置默认值
  115. this.addressData.allAddress = `${optionData.provinceName}-${optionData.cityName}-${
  116. optionData.townName
  117. }`
  118. this.addressData.address = optionData.address
  119. this.addressData.defaultFlag = optionData.defaultFlag
  120. this.addressData.storeId = optionData.storeId
  121. this.addressData.mobile = optionData.mobile
  122. this.addressData.townId = optionData.townId
  123. this.addressData.addressId = optionData.addressId
  124. this.addressData.shouHuoRen = optionData.shouHuoRen
  125. this.addressData.addressId = optionData.addressId
  126. if (optionData.defaultFlag == 1) {
  127. this.switchDefault = true
  128. } else {
  129. this.switchDefault = false
  130. }
  131. }
  132. uni.setNavigationBarTitle({
  133. title
  134. })
  135. },
  136. methods: {
  137. switchChange(e) {
  138. if (e.detail.value == true) {
  139. this.addressData.defaultFlag = 1
  140. } else {
  141. this.addressData.defaultFlag = 0
  142. }
  143. },
  144. // 三级联动选择
  145. showMulLinkageThreePicker() {
  146. this.isShowInput = true
  147. this.$refs.mpvueCityPicker.show()
  148. },
  149. onConfirm(e) {
  150. this.addressData.allAddress = e.name
  151. this.addressData.townId = e.townCode
  152. console.log(e)
  153. this.initInput()
  154. },
  155. //提交
  156. confirm() {
  157. if (!this.addressData.shouHuoRen) {
  158. this.$util.msg('请填写收货人')
  159. }
  160. if (this.addressData.address == '请选择所在地区') {
  161. this.$util.msg('请选择所在地区')
  162. }
  163. if (!/(^1[0-9][0-9]{9}$)/.test(this.addressData.mobile)) {
  164. this.$util.msg('请输入正确的手机号码')
  165. return
  166. }
  167. if (this.addType == 1) {
  168. this.params = {
  169. // 测试id
  170. // userId:'13914',
  171. storeId: this.addressData.storeId, //用户id ,只在新增收货地址时传
  172. shouHuoRen: this.addressData.shouHuoRen, //收货人
  173. townId: this.addressData.townId, //区ID
  174. address: this.addressData.address, //地址
  175. mobile: this.addressData.mobile, //手机
  176. defaultFlag: this.addressData.defaultFlag //是否默认收货地址(0 不是默认,1 默认)
  177. }
  178. this.postAddressData(this.params)
  179. } else {
  180. this.params = this.addressData
  181. this.postAddressData(this.params)
  182. }
  183. },
  184. postAddressData(res) {
  185. this.btnText(true)
  186. // 保存地址
  187. this.UserService.AddNewAddress(res)
  188. .then(response => {
  189. this.$util.msg('保存成功', 2000, true, 'success')
  190. this.btnText(false)
  191. setTimeout(() => {
  192. uni.navigateBack()
  193. }, 2000)
  194. })
  195. .catch(error => {
  196. this.$util.msg(error.msg, 2000)
  197. setTimeout(function() {
  198. uni.switchTab({
  199. url: '/seller/pages/index/index'
  200. })
  201. }, 1000)
  202. })
  203. },
  204. btnText(flg) {
  205. if (flg) {
  206. this.isConfirm = true
  207. this.buttonText = '保存中...'
  208. } else {
  209. this.isConfirm = false
  210. this.buttonText = '保存'
  211. }
  212. },
  213. onShouHuoRen(e) {
  214. this.addressData.shouHuoRen = e.detail.value
  215. this.initInput()
  216. },
  217. onMobile(e) {
  218. this.addressData.mobile = e.detail.value
  219. this.initInput()
  220. },
  221. onTextareaInput(e) {
  222. this.addressData.address = e.detail.value
  223. this.initInput()
  224. },
  225. initInput() {
  226. if (
  227. this.addressData.shouHuoRen !== '' &&
  228. this.addressData.mobile !== '' &&
  229. this.addressData.address !== '' &&
  230. this.addressData.townId !== ''
  231. ) {
  232. this.isConfirm = false
  233. } else {
  234. this.isConfirm = true
  235. }
  236. }
  237. },
  238. onShow() {
  239. this.$api.getComStorage('clubInfo').then(resolve => {
  240. this.addressData.userId = resolve.userId
  241. })
  242. }
  243. }
  244. </script>
  245. <style lang="scss">
  246. page {
  247. height: auto;
  248. background: $bg-color;
  249. }
  250. .add-content {
  251. width: 702rpx;
  252. padding: 0 24rpx;
  253. .input-row {
  254. display: flex;
  255. align-items: center;
  256. position: relative;
  257. width: 702rpx;
  258. height: 88rpx;
  259. margin: 0 auto;
  260. border-bottom: 2rpx solid #e1e1e1;
  261. .label {
  262. font-size: $font-size-28;
  263. color: #666666;
  264. line-height: 88rpx;
  265. flex: 2;
  266. }
  267. .input {
  268. height: 100%;
  269. font-size: $font-size-28;
  270. line-height: 88rpx;
  271. color: #333333;
  272. flex: 7;
  273. box-sizing: border-box;
  274. padding-left: 20rpx;
  275. }
  276. &.b-b {
  277. margin: 20rpx 0;
  278. }
  279. }
  280. }
  281. .icon-chakangengduo {
  282. font-size: 36rpx;
  283. color: #b2b2b2;
  284. position: absolute;
  285. right: 0;
  286. }
  287. .text-textarea {
  288. width: 100%;
  289. height: 146rpx;
  290. border-bottom: 2rpx solid #e1e1e1;
  291. .textarea {
  292. width: 100%;
  293. height: 100%;
  294. font-size: $font-size-28;
  295. color: $text-color;
  296. z-index: 1;
  297. line-height: 32rpx;
  298. }
  299. .textarea.hide {
  300. opacity: 0;
  301. }
  302. .textarea.show {
  303. color: #999999;
  304. }
  305. }
  306. .default-row {
  307. background: #ffffff;
  308. margin-top: 16upx;
  309. padding: 24rpx 24rpx 24rpx 0;
  310. .tit {
  311. font-size: $font-size-28;
  312. line-height: 40rpx;
  313. color: #666666;
  314. flex: 1;
  315. }
  316. switch {
  317. transform: translateX(16upx) scale(0.9);
  318. }
  319. }
  320. .add-btn {
  321. width: 600rpx;
  322. height: 90rpx;
  323. font-size: $font-size-28;
  324. line-height: 90rpx;
  325. color: #ffffff;
  326. margin: 0 auto;
  327. text-align: center;
  328. background: $btn-confirm;
  329. border-radius: 45rpx;
  330. margin-top: 80rpx;
  331. }
  332. .add-btn.disabled {
  333. background: #e1e1e1;
  334. border-radius: 45rpx;
  335. }
  336. </style>