add.nvue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <view>
  3. <view class="box">
  4. <view class="add-line">
  5. <view class="al-left">
  6. <text class="text">收货人</text>
  7. </view>
  8. <view class="al-right">
  9. <input class="input" placeholder="收货人" placeholder-class="p-size" name="name"
  10. v-model="data.name" />
  11. </view>
  12. </view>
  13. <view class="add-line">
  14. <view class="al-left">
  15. <text class="text">手机号码</text>
  16. </view>
  17. <view class="al-right">
  18. <input class="input" placeholder="手机号码" placeholder-class="p-size" name="tel" type="number"
  19. v-model="data.tel" />
  20. </view>
  21. </view>
  22. <view class="add-line">
  23. <view class="al-left">
  24. <text class="text">所在地区</text>
  25. </view>
  26. <view class="al-right" @tap="showMulLinkageThreePicker">
  27. <text class="addresstext" :style="'color:' + (data.region ? '#333' : '#585858') ">
  28. {{data.region ? data.region : "请选择"}}
  29. </text>
  30. <input type="text" name="region" v-show="false" :value="data.region" />
  31. <view class="alr-jiantou">
  32. <image class="image" src="/static/img/ic_next.png"></image>
  33. </view>
  34. </view>
  35. </view>
  36. <view class="add-line">
  37. <view class="al-left">
  38. <text class="text">详细地址</text>
  39. </view>
  40. <view class="al-right">
  41. <textarea class="textarea" placeholder-class="p-size" name="address"
  42. placeholder="详细省份,城市,道路,门牌号,小区,楼栋号,单元室等(必填)" v-model="data.address" />
  43. </view>
  44. </view>
  45. <button class="nt add-btn" formType="submit">
  46. <text class="add-btn-text">保存</text>
  47. </button>
  48. </view>
  49. <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
  50. @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
  51. </view>
  52. </template>
  53. <script>
  54. import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.nvue';
  55. import graceChecker from "@/library/utils/graceChecker.js";
  56. import Request from '@/library/Request';
  57. import utils from "@/library/utils/Comm.js"
  58. export default {
  59. components: {
  60. 'mpvue-city-picker': mpvueCityPicker
  61. },
  62. data() {
  63. return {
  64. cityPickerValueDefault: [0, 0, 0],
  65. themeColor: '#007AFF',
  66. data: {
  67. name: "",
  68. tel: "",
  69. address: "",
  70. region: "",
  71. City: 0
  72. }
  73. }
  74. },
  75. onLoad(options) {
  76. this.id = options.id || 0;
  77. if (this.id > 0) {
  78. uni.setNavigationBarTitle({
  79. title: "修改地址"
  80. })
  81. this.getData();
  82. }
  83. },
  84. methods: {
  85. getData() {
  86. Request
  87. .post("userAddressInfo", {
  88. id: this.id
  89. })
  90. .then((res) => {
  91. if (res.code == 200) {
  92. this.data = res.data;
  93. } else {
  94. utils.Tip(res.msg);
  95. }
  96. }).catch(() => {
  97. utils.Tip("网络错误,请稍后尝试");
  98. })
  99. },
  100. //表单提交
  101. formSubmit(e) {
  102. var that = this,
  103. formData = {
  104. name:that.data.name,
  105. tel:that.data.tel,
  106. address:that.data.address,
  107. region:that.data.region,
  108. City:that.data.City,
  109. };
  110. //定义表单规则
  111. var rule = [{
  112. name: "name",
  113. checkType: "notnull",
  114. checkRule: "",
  115. errorMsg: "请输入收货人姓名"
  116. },
  117. {
  118. name: "tel",
  119. checkType: "phoneno",
  120. checkRule: "",
  121. errorMsg: "请输入正确的联系电话"
  122. },
  123. {
  124. name: "region",
  125. checkType: "notnull",
  126. checkRule: "",
  127. errorMsg: "请选择所在地区"
  128. },
  129. {
  130. name: "address",
  131. checkType: "notnull",
  132. checkRule: "",
  133. errorMsg: "请输入详细地址"
  134. }
  135. ];
  136. var checkRes = graceChecker.check(formData, rule);
  137. if (!checkRes) {
  138. uni.showToast({
  139. title: graceChecker.error,
  140. icon: "none"
  141. });
  142. return;
  143. }
  144. formData.id = this.id;
  145. formData.cityId = this.data.City;
  146. utils.loadIng("提交中...");
  147. Request
  148. .post("userAddressSave", formData)
  149. .then(res => {
  150. if (res.code == 200) {
  151. that.utils.Tip(res.msg);
  152. uni.$emit("addressEvent", {});
  153. uni.navigateBack();
  154. } else {
  155. that.utils.Tip(res.msg);
  156. }
  157. }).catch(function() {
  158. that.utils.Tip("网络错误,请稍后尝试");
  159. });
  160. },
  161. // 省市区选择
  162. showMulLinkageThreePicker() {
  163. this.$refs.mpvueCityPicker.show()
  164. },
  165. onCancel(e) {
  166. this.data.region = "";
  167. },
  168. onConfirm(e) {
  169. this.data.region = e.label;
  170. this.data.City = e.cityCode;
  171. },
  172. }
  173. }
  174. </script>
  175. <style lang="scss">
  176. .add-line {
  177. padding: 15px;
  178. align-items: center;
  179. background: #fff;
  180. border-bottom: 1px #F5F5F5 solid;
  181. justify-content: space-between;
  182. flex-direction: row;
  183. }
  184. .al-left {
  185. flex:1;
  186. .text{
  187. color: #585858;
  188. font-size: 28rpx;
  189. }
  190. }
  191. .al-right {
  192. align-items: center;
  193. width: 500rpx;
  194. justify-content: flex-end;
  195. flex-direction: row;
  196. .addresstext{
  197. font-size: 28rpx;
  198. }
  199. }
  200. .al-right .input {
  201. font-size: 14px;
  202. text-align: right;
  203. flex: 1;
  204. }
  205. .al-right .textarea {
  206. width: 100%;
  207. height: 40px;
  208. font-size: 13px;
  209. flex: 1;
  210. }
  211. .p-size {
  212. color: #9B9B9B;
  213. font-size: 13px;
  214. }
  215. .alr-jiantou {
  216. margin-left: 6px;
  217. .image {
  218. width: 20px;
  219. height: 20px;
  220. }
  221. }
  222. .add-btn {
  223. width: 690rpx;
  224. height: 80rpx;
  225. background: #db292b;
  226. border-radius: 100px;
  227. position: fixed;
  228. bottom: 20rpx;
  229. left: 30rpx;
  230. .add-btn-text {
  231. color: #fff;
  232. }
  233. }
  234. </style>