order.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. <template>
  2. <view>
  3. <view class="to_bottom" v-if="!addrList.length"> -----还没有地址啦-----</view>
  4. <view class="addr_list">
  5. <view class="addr_item" v-for="(item, index) in addrList" :key="index">
  6. <view class="contact_user">
  7. <text class="contact_name">{{ item.contact_name }}</text>
  8. <text class="contact_phone">{{ item.contact_phone }}</text>
  9. <text class="contact_shop">{{ item.contact_shop }}</text>
  10. </view>
  11. <view class="contact_addr"> {{ item.contact_area }} {{ item.contact_school }} {{ item.contact_grade }} {{ item.contact_class }} </view>
  12. <view class="contact_handler">
  13. <view class="radio_label" @click="setDefault(index)">
  14. <image class="radio_icon" :src="item.is_default ? '../../static/icon/radioed.png' : '../../static/icon/radio.png'"></image>
  15. <text :class="item.is_default ? 'radioed_text' : ''">{{ item.is_default ? "已默认" : "设为默认" }}</text>
  16. </view>
  17. <view class="addr_right_btn" @click="removeAddr(index)"> 删除 </view>
  18. <view class="addr_right_btn" @click="openForm(item)"> 编辑 </view>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="create_box">
  23. <button class="create_addr" @click="openForm()">新建收货地址</button>
  24. </view>
  25. <view class="to_bottom" v-if="isLast"> -----到底啦-----</view>
  26. <uni-popup ref="addrForm" type="bottom" class="popup" background-color="#FFFFFF" @change="popupChange">
  27. <view class="contact_addr_form">
  28. <!-- 地区代表表单 -->
  29. <form class="info_form">
  30. <view class="form_group">
  31. <view class="group_title">姓名:</view>
  32. <view class="group_box">
  33. <input type="text" class="form_ctrl" placeholder="请输入学生姓名" maxlength="20" required="" v-model="addrRequest.contact_name" />
  34. </view>
  35. </view>
  36. <view class="form_group">
  37. <view class="group_title">手机号:</view>
  38. <view class="group_box">
  39. <input type="text" class="form_ctrl" placeholder="请输入家长手机号" maxlength="11" required="" v-model="addrRequest.contact_phone" />
  40. </view>
  41. </view>
  42. <view class="form_group">
  43. <view class="group_title">区域:</view>
  44. <view class="group_box">
  45. <picker mode="multiSelector" class="form_ctrl" :range="cityArray" @columnchange="cityChange" @change="cityFinish">
  46. <view class="area_text">
  47. <text v-if="addrRequest.contact_area">{{ addrRequest.contact_area }}</text>
  48. <text v-if="addrRequest.contact_school">/{{ addrRequest.contact_school }}</text>
  49. </view>
  50. </picker>
  51. </view>
  52. </view>
  53. <view class="form_group">
  54. <view class="group_title">年级:</view>
  55. <view class="group_box">
  56. <!-- <input type="text" class="form_ctrl" placeholder="请输入详细地址:街道/小区/门牌号" maxlength="64" required="" v-model="addrRequest.contact_addr" /> -->
  57. <picker class="form_ctrl" :range="ageArray" @change="bindAgeChange">
  58. <view class="area_text">
  59. <text>{{ addrRequest.contact_grade == "" ? "请选择年级" : addrRequest.contact_grade }}</text>
  60. </view>
  61. </picker>
  62. </view>
  63. </view>
  64. <view class="form_group">
  65. <view class="group_title">班级:</view>
  66. <view class="group_box">
  67. <picker class="form_ctrl" :range="classArray" @change="bindClassChange">
  68. <view class="area_text">
  69. <text>{{ addrRequest.contact_class == "" ? "请选择班级" : addrRequest.contact_class }}</text>
  70. </view>
  71. </picker>
  72. </view>
  73. </view>
  74. <view class="form_group">
  75. <view class="group_title">设为默认</view>
  76. <view class="group_box">
  77. <switch color="#E03519" style="transform: scale(0.6); float: right" @change="defaultSwitch" :checked="addrRequest.is_default ? true : false" />
  78. </view>
  79. </view>
  80. <button class="submit_btn" @click="saveAddr">保存地址</button>
  81. </form>
  82. </view>
  83. </uni-popup>
  84. </view>
  85. </template>
  86. <script>
  87. import { getProvinces, getMyCity, getAreas } from "../../utils/city";
  88. export default {
  89. data() {
  90. return {
  91. // 产品列表
  92. addrList: [],
  93. // 请求参数
  94. requestParam: {
  95. page: 1,
  96. status: 0,
  97. },
  98. // 保存地址
  99. addrRequest: {
  100. id: 0,
  101. contact_name: "",
  102. contact_phone: "",
  103. contact_school: "",
  104. contact_area: "",
  105. contact_addr: "",
  106. contact_shop: "",
  107. contact_grade: "",
  108. contact_class: "",
  109. is_default: 0,
  110. },
  111. // 是否最后一页
  112. isLast: false,
  113. // 是否请求中
  114. isReqing: false,
  115. // 所在地区
  116. cityArray: [[], []],
  117. cityValue: [0, 0],
  118. // 自动弹出
  119. autoShowForm: false,
  120. // 异步通知
  121. AddrEmit: false,
  122. ageArray: [],
  123. classArray: [],
  124. };
  125. },
  126. onLoad(param) {
  127. this.AddrEmit = param.notify == "addr" ? true : false;
  128. this.autoShowForm = param.type == "create" ? true : false;
  129. // 获取列表
  130. this.getList();
  131. //获取学院
  132. this.getSchool();
  133. },
  134. onReady() {
  135. if (this.autoShowForm) {
  136. var that = this;
  137. // 500毫秒后自动弹出
  138. setTimeout(function () {
  139. that.openForm();
  140. }, 500);
  141. }
  142. },
  143. onShow() {},
  144. methods: {
  145. getArea(list) {
  146. var provinces = [];
  147. for (var i = 0; i < list.length; i++) {
  148. provinces.push(list[i].area_name);
  149. }
  150. return provinces;
  151. },
  152. getSchoolList(list, provinceIndex) {
  153. var citys = [];
  154. for (var i = 0; i < list[provinceIndex].school_list.length; i++) {
  155. citys.push(list[provinceIndex].school_list[i].name);
  156. }
  157. return citys;
  158. },
  159. getSchool() {
  160. // 获取学院
  161. this.$http.request("api/school/get_list").then((callback) => {
  162. // console.log(callback);
  163. if (callback.code == "success") {
  164. this.ageArray = callback.data.grade_list;
  165. this.classArray = callback.data.class_list;
  166. this.area_list = callback.data.area_list;
  167. // 替换对应的数据
  168. this.cityArray.splice(0, 1, this.getArea(callback.data.area_list));
  169. this.cityArray.splice(1, 1, this.getSchoolList(callback.data.area_list, this.cityValue[0]));
  170. // 默认地址
  171. this.addrRequest.contact_area = this.cityArray[0][this.cityValue[0]];
  172. this.addrRequest.contact_school = this.cityArray[1][this.cityValue[1]];
  173. this.addrRequest.contact_grade = callback.data.grade_list[0];
  174. this.addrRequest.contact_class = callback.data.class_list[0];
  175. }
  176. });
  177. },
  178. // 获取列表
  179. getList() {
  180. // 登录提示
  181. if (!this.$checkAccess.alterLogin()) return;
  182. // 判断数据
  183. this.$http.request("api/student_addr/get_list").then((callback) => {
  184. // 获取成功
  185. if (callback.code == "success") {
  186. this.addrList = callback.data;
  187. // 通知地址变更
  188. if (this.AddrEmit) uni.$emit("addr_list_change", { list: this.addrList });
  189. }
  190. });
  191. },
  192. // 打开弹窗
  193. openForm(item) {
  194. if (!item) {
  195. this.addrRequest.id = 0;
  196. this.addrRequest.contact_name = "";
  197. this.addrRequest.contact_phone = "";
  198. this.addrRequest.contact_shop = "";
  199. this.addrRequest.contact_addr = "";
  200. this.addrRequest.is_default = 0;
  201. } else {
  202. const _cloneItem = JSON.parse(JSON.stringify(item));
  203. this.addrRequest = _cloneItem;
  204. }
  205. // 显示下单弹出层
  206. this.$refs.addrForm.open("bottom");
  207. },
  208. // 默认开关
  209. defaultSwitch(e) {
  210. this.addrRequest.is_default = e.detail.value ? 1 : 0;
  211. },
  212. // 弹出层
  213. popupChange(e) {
  214. // 禁止滚动穿透
  215. this.show = e.show;
  216. },
  217. // 城市修改
  218. cityChange(e) {
  219. // 替换三个选项
  220. this.cityValue.splice(e.detail.column, 1, e.detail.value);
  221. // 下一级设置为0
  222. if (e.detail.column == 0) {
  223. this.cityValue.splice(1, 1, 0);
  224. this.cityValue.splice(2, 1, 0);
  225. }
  226. if (e.detail.column == 1) {
  227. this.cityValue.splice(2, 1, 0);
  228. }
  229. // 替换对应的数据
  230. this.cityArray.splice(0, 1, this.getArea(this.area_list));
  231. this.cityArray.splice(1, 1, this.getSchoolList(this.area_list, this.cityValue[0]));
  232. },
  233. // 城市选择
  234. cityFinish(e) {
  235. this.addrRequest.contact_area = this.cityArray[0][this.cityValue[0]];
  236. this.addrRequest.contact_school = this.cityArray[1][this.cityValue[1]];
  237. },
  238. bindAgeChange(e) {
  239. this.addrRequest.contact_grade = this.ageArray[e.detail.value];
  240. },
  241. bindClassChange(e) {
  242. this.addrRequest.contact_class = this.classArray[e.detail.value];
  243. },
  244. // 保存地址
  245. saveAddr() {
  246. // 判断姓名
  247. if (!this.addrRequest.contact_name) {
  248. uni.showToast({ icon: "none", title: "请填写学生姓名" });
  249. return;
  250. }
  251. if (this.addrRequest.contact_name.length < 2) {
  252. uni.showToast({ icon: "none", title: "请填写学生完整姓名" });
  253. return;
  254. }
  255. if (!this.addrRequest.contact_phone) {
  256. uni.showToast({ icon: "none", title: "请填写收件人手机号" });
  257. return;
  258. }
  259. // 请求状态
  260. uni.showLoading({ mask: true });
  261. // 请求路径
  262. var url = this.addrRequest.id ? "api/student_addr/edit" : "api/student_addr/add";
  263. // 授权成功以后,调用绑定
  264. this.$http.request(url, this.addrRequest, "post").then((re) => {
  265. // 关闭
  266. uni.hideLoading();
  267. // 成功的话
  268. if (re.code != "success") {
  269. // 跳转
  270. uni.showToast({ title: re.msg, icon: "none" });
  271. return;
  272. }
  273. // 地址变动
  274. this.getList();
  275. // 显示下单弹出层
  276. this.$refs.addrForm.close();
  277. });
  278. },
  279. // 删除地址
  280. removeAddr(index) {
  281. // 授权成功以后,调用绑定
  282. this.$http.request("api/student_addr/del", { id: this.addrList[index].id }, "post").then((re) => {
  283. // 关闭
  284. uni.hideLoading();
  285. // 成功的话
  286. if (re.code != "success") {
  287. // 跳转
  288. uni.showToast({ title: re.msg, icon: "none" });
  289. return;
  290. }
  291. // 成功删除该项
  292. this.addrList.splice(index, 1);
  293. // 通知地址变更
  294. if (this.AddrEmit) uni.$emit("addr_list_change", { list: this.addrList });
  295. });
  296. },
  297. // 设置默认
  298. setDefault(index) {
  299. // 如果已经是默认状态
  300. if (this.addrList[index].is_default) return;
  301. // 授权成功以后,调用绑定
  302. this.$http.request("api/student_addr/set_default", { id: this.addrList[index].id }, "post").then((re) => {
  303. // 关闭
  304. uni.hideLoading();
  305. // 成功的话
  306. if (re.code != "success") {
  307. // 跳转
  308. uni.showToast({ title: re.msg, icon: "none" });
  309. return;
  310. }
  311. // 更新其他的默认项
  312. for (let i in this.addrList) {
  313. this.addrList[i].is_default = 0;
  314. }
  315. // 成功修改值
  316. this.addrList[index].is_default = 1;
  317. // 通知地址变更
  318. if (this.AddrEmit) uni.$emit("addr_list_change", { list: this.addrList });
  319. });
  320. },
  321. },
  322. };
  323. </script>
  324. <style lang="less">
  325. .addr_list {
  326. width: 730rpx;
  327. display: block;
  328. overflow: hidden;
  329. margin: 0rpx auto;
  330. .addr_item {
  331. display: block;
  332. font-size: 24rpx;
  333. overflow: hidden;
  334. line-height: 40rpx;
  335. padding: 15rpx 10rpx;
  336. border-radius: 15rpx;
  337. padding-bottom: 0rpx;
  338. margin-bottom: 10rpx;
  339. background-color: #ffffff;
  340. .contact_user {
  341. display: block;
  342. font-size: 24rpx;
  343. line-height: 50rpx;
  344. .contact_name {
  345. font-size: 26rpx;
  346. font-weight: bold;
  347. margin-right: 16rpx;
  348. }
  349. .contact_shop {
  350. float: right;
  351. }
  352. }
  353. .contact_addr {
  354. display: block;
  355. font-size: 24rpx;
  356. line-height: 30rpx;
  357. padding: 10rpx 5rpx;
  358. border-bottom: 2rpx solid #dddddd;
  359. }
  360. .contact_handler {
  361. height: 60rpx;
  362. display: block;
  363. line-height: 60rpx;
  364. font-size: 20rpx;
  365. .radio_label {
  366. float: left;
  367. height: 60rpx;
  368. line-height: 60rpx;
  369. .radio_icon {
  370. width: 40rpx;
  371. height: 40rpx;
  372. vertical-align: middle;
  373. }
  374. .radioed_text {
  375. color: #e03519;
  376. }
  377. }
  378. .addr_right_btn {
  379. float: right;
  380. height: 40rpx;
  381. display: block;
  382. line-height: 40rpx;
  383. padding: 10rpx 35rpx;
  384. }
  385. }
  386. }
  387. }
  388. .create_box {
  389. left: 0rpx;
  390. width: 750rpx;
  391. height: 140rpx;
  392. display: block;
  393. position: fixed;
  394. bottom: var(--window-bottom);
  395. .create_addr {
  396. width: 700rpx;
  397. height: 80rpx;
  398. display: block;
  399. color: #ffffff;
  400. font-size: 30rpx;
  401. overflow: hidden;
  402. line-height: 80rpx;
  403. padding: 0rpx 0rpx;
  404. text-align: center;
  405. margin: 0rpx auto;
  406. margin-top: 20rpx;
  407. border-radius: 40rpx;
  408. background-color: #e03519;
  409. }
  410. }
  411. .popup {
  412. .info_form {
  413. display: block;
  414. overflow: hidden;
  415. padding: 20rpx 0rpx;
  416. padding-top: 80rpx;
  417. background: #ffffff;
  418. .form_group {
  419. display: block;
  420. overflow: hidden;
  421. line-height: 60rpx;
  422. padding: 20rpx 35rpx;
  423. .group_title {
  424. float: left;
  425. width: 160rpx;
  426. display: block;
  427. overflow: hidden;
  428. font-size: 30rpx;
  429. margin-right: 20rpx;
  430. }
  431. .group_box {
  432. float: left;
  433. width: 480rpx;
  434. display: block;
  435. .form_ctrl {
  436. height: 56rpx;
  437. font-size: 28rpx;
  438. padding: 0rpx 20rpx;
  439. line-height: 56rpx;
  440. border: 2rpx solid #dddddd;
  441. }
  442. .area_text {
  443. width: 446rpx;
  444. font-size: 28rpx;
  445. overflow: hidden;
  446. white-space: nowrap;
  447. text-overflow: ellipsis;
  448. }
  449. .group_image {
  450. width: 200rpx;
  451. height: 200rpx;
  452. }
  453. .choose_image {
  454. display: block;
  455. width: 200rpx;
  456. height: 200rpx;
  457. font-size: 38rpx;
  458. text-align: center;
  459. line-height: 200rpx;
  460. border: 2rpx solid #dddddd;
  461. }
  462. }
  463. }
  464. .submit_btn {
  465. width: 700rpx;
  466. height: 80rpx;
  467. display: block;
  468. color: #ffffff;
  469. font-size: 30rpx;
  470. overflow: hidden;
  471. line-height: 80rpx;
  472. padding: 0rpx 0rpx;
  473. text-align: center;
  474. margin: 20rpx auto;
  475. margin-top: 40rpx;
  476. border-radius: 40rpx;
  477. background-color: #e03519;
  478. }
  479. }
  480. }
  481. </style>