index.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
  6. <radio-group @change="addressChange">
  7. <view class="list" v-for="(item,index) in list" :key="index">
  8. <label class="radio" v-if="type=='shopping'">
  9. <radio :value="item._id" :checked="item._id == address_id" />
  10. </label>
  11. <view class="list_1">
  12. <view class="name">
  13. <text>{{item.name}}</text>
  14. <text>{{item.phone}}</text>
  15. </view>
  16. <view class="address">
  17. <text>{{item.province}}</text>
  18. <text>{{item.city}}</text>
  19. <text>{{item.area}}</text>
  20. <text>{{item.address}}</text>
  21. <text>{{item.number}}</text>
  22. </view>
  23. <view class="btn">
  24. <button class="btn_1" size="mini" @click="toDefa(item)" v-if="item.is_default==false">设为默认</button>
  25. <button class="btn_2" size="mini" @click="toCommon(item)">编辑</button>
  26. <button class="btn_3" size="mini" @click="toDel(item)">删除</button>
  27. </view>
  28. <view class="default" v-if="item.is_default==true">
  29. <text>默认</text>
  30. </view>
  31. </view>
  32. </view>
  33. <view class="is_bottom" v-if="is_bottom">
  34. <text>{{config.bottom_title}}</text>
  35. </view>
  36. </radio-group>
  37. </scroll-view>
  38. </view>
  39. <view class="two">
  40. <view class="two_1">
  41. <button type="default" @click="toWxaddress()">获取微信地址</button>
  42. </view>
  43. <view class="two_1">
  44. <button type="default" @click="toCommon()">新增收货地址</button>
  45. </view>
  46. </view>
  47. </view>
  48. </mobile-frame>
  49. </template>
  50. <script>
  51. export default {
  52. data() {
  53. return {
  54. // 购物选地址
  55. id: '',
  56. type: '',
  57. address_id: '',
  58. // 系统设置
  59. config: {},
  60. user: {},
  61. list: [],
  62. total: 0,
  63. skip: 0,
  64. limit: 6,
  65. page: 0,
  66. // 数据是否触底
  67. is_bottom: false,
  68. scrollTop: 0,
  69. };
  70. },
  71. onLoad: function(e) {
  72. const that = this;
  73. that.$set(that, `type`, e && e.type || '');
  74. that.$set(that, `address_id`, e && e.id || '');
  75. },
  76. onShow: async function(e) {
  77. const that = this;
  78. that.searchConfig();
  79. that.watchLogin();
  80. },
  81. onHide: function() {
  82. const that = this;
  83. that.clearPage()
  84. },
  85. onPullDownRefresh: function() {
  86. const that = this;
  87. that.clearPage()
  88. that.search();
  89. uni.stopPullDownRefresh();
  90. },
  91. methods: {
  92. // 查询基本设置
  93. searchConfig() {
  94. const that = this;
  95. uni.getStorage({
  96. key: 'config',
  97. success: function(res) {
  98. if (res.data) that.$set(that, `config`, res.data)
  99. },
  100. fail: function(err) {
  101. console.log(err);
  102. }
  103. })
  104. },
  105. // 监听用户是否登录
  106. watchLogin() {
  107. const that = this;
  108. uni.getStorage({
  109. key: 'token',
  110. success: function(res) {
  111. let user = that.$jwt(res.data);
  112. that.$set(that, `user`, user);
  113. that.search()
  114. },
  115. fail: function(err) {
  116. uni.reLaunch({
  117. url: `/pages/login/index`
  118. })
  119. }
  120. })
  121. },
  122. // 查询列表
  123. async search() {
  124. const that = this;
  125. let user = that.user;
  126. let info = {
  127. skip: that.skip,
  128. limit: that.limit,
  129. customer: user._id
  130. }
  131. const res = await that.$api(`/address`, 'GET', {
  132. ...info
  133. })
  134. if (res.errcode == '0') {
  135. let list = [...that.list, ...res.data];
  136. that.$set(that, `list`, list);
  137. that.$set(that, `total`, res.total)
  138. }
  139. },
  140. // 分页
  141. toPage() {
  142. const that = this;
  143. let list = that.list;
  144. let limit = that.limit;
  145. if (that.total > list.length) {
  146. uni.showLoading({
  147. title: '加载中',
  148. mask: true
  149. })
  150. let page = that.page + 1;
  151. that.$set(that, `page`, page)
  152. let skip = page * limit;
  153. that.$set(that, `skip`, skip)
  154. that.search();
  155. uni.hideLoading();
  156. } else that.$set(that, `is_bottom`, true)
  157. },
  158. // 计算是否触底
  159. toScroll(e) {
  160. const that = this;
  161. let up = that.scrollTop;
  162. that.$set(that, `scrollTop`, e.detail.scrollTop);
  163. let num = Math.sign(up - e.detail.scrollTop);
  164. if (num == 1) that.$set(that, `is_bottom`, false);
  165. },
  166. // 选择收货地址
  167. addressChange(e) {
  168. const that = this;
  169. let data = that.list.find((i) => i._id == e.detail.value);
  170. if (data) {
  171. that.address_id == data._id;
  172. uni.$emit("id", e.detail.value);
  173. uni.navigateBack({
  174. delta: 1
  175. });
  176. }
  177. },
  178. // 设置默认
  179. toDefa(e) {
  180. const that = this;
  181. uni.showModal({
  182. title: '提示',
  183. content: '确定设置该地址为默认地址吗?',
  184. success: async function(res) {
  185. if (res.confirm) {
  186. const arr = await that.$api(`/address/toDefault/${e._id}`, `POST`);
  187. if (arr.errcode == '0') {
  188. uni.showToast({
  189. title: '添加默认成功',
  190. icon: 'none'
  191. })
  192. that.clearPage()
  193. that.search()
  194. } else {
  195. uni.showToast({
  196. title: arr.errmsg,
  197. icon: 'none'
  198. })
  199. }
  200. }
  201. }
  202. });
  203. },
  204. // 获取微信地址
  205. toWxaddress() {
  206. const that = this;
  207. let user = that.user;
  208. uni.getStorage({
  209. key: 'system',
  210. success: function(res) {
  211. if (res.data.uniPlatform == 'app') {
  212. uni.showToast({
  213. title: '请进入微信小程序进行获取微信地址',
  214. icon: 'none'
  215. })
  216. } else if (res.data.uniPlatform == 'mp-weixin') {
  217. uni.chooseAddress({
  218. success: async function(add) {
  219. let params = {
  220. customer: user._id,
  221. name: add.userName,
  222. phone: add.telNumber,
  223. province: add.provinceName,
  224. city: add.cityName,
  225. area: add.countyName,
  226. address: add.detailInfo
  227. }
  228. const arr = await that.$api(`/address`, 'POST', params);
  229. if (arr.errcode == '0') {
  230. uni.showToast({
  231. title: '添加收货地址成功',
  232. icon: 'none'
  233. })
  234. that.clearPage()
  235. } else {
  236. uni.showToast({
  237. title: arr.errmsg,
  238. icon: 'none'
  239. })
  240. }
  241. },
  242. fail: function() {
  243. that.clearPage()
  244. }
  245. })
  246. }
  247. }
  248. })
  249. },
  250. // 编辑
  251. toCommon(e) {
  252. const that = this;
  253. that.clearPage();
  254. uni.navigateTo({
  255. url: `/pagesMy/address/add?id=${e&&e._id||''}`
  256. })
  257. },
  258. // 删除
  259. toDel(e) {
  260. const that = this;
  261. uni.showModal({
  262. title: '提示',
  263. content: '确定删除该地址吗?',
  264. success: async function(res) {
  265. if (res.confirm) {
  266. const arr = await that.$api(`/address/${e._id}`, 'DELETE');
  267. if (arr.errcode == '0') {
  268. uni.showToast({
  269. title: '删除信息成功',
  270. icon: 'none'
  271. })
  272. if (that.address_id == e._id) uni.$emit("id", '')
  273. that.clearPage()
  274. that.search()
  275. } else {
  276. uni.showToast({
  277. title: arr.errmsg,
  278. icon: 'none'
  279. })
  280. }
  281. }
  282. }
  283. });
  284. },
  285. // 清空列表
  286. clearPage() {
  287. const that = this;
  288. that.$set(that, `list`, [])
  289. that.$set(that, `skip`, 0)
  290. that.$set(that, `limit`, 6)
  291. that.$set(that, `page`, 0)
  292. }
  293. },
  294. }
  295. </script>
  296. <style lang="scss">
  297. .main {
  298. display: flex;
  299. flex-direction: column;
  300. width: 100vw;
  301. height: 100vh;
  302. background-color: var(--f1Color);
  303. .one {
  304. position: relative;
  305. flex-grow: 1;
  306. .list {
  307. display: flex;
  308. background: var(--fffColor);
  309. margin: 2vw 2vw 0 2vw;
  310. padding: 2vw;
  311. border-radius: 5px;
  312. position: relative;
  313. .list_1 {
  314. flex-grow: 1;
  315. .name {
  316. font-size: var(--font16Size);
  317. margin: 0 0 2vw 0;
  318. text {
  319. padding: 0 2vw 0 0;
  320. }
  321. }
  322. .address {
  323. font-size: var(--font14Size);
  324. margin: 0 0 1vw 0;
  325. text {
  326. padding: 0 2vw 0 0;
  327. }
  328. }
  329. .btn {
  330. text-align: center;
  331. button {
  332. margin: 0 2vw 2vw 2vw;
  333. background-color: var(--f35BColor);
  334. color: var(--fffColor);
  335. }
  336. .btn_2 {
  337. background-color: var(--f0fColor);
  338. }
  339. .btn_3 {
  340. background-color: var(--fFB1Color);
  341. }
  342. }
  343. .default {
  344. position: absolute;
  345. top: 0;
  346. right: 0;
  347. text {
  348. background: var(--ff0Color);
  349. color: var(--fffColor);
  350. font-size: var(--font12Size);
  351. padding: 1vw;
  352. border-radius: 5px;
  353. }
  354. }
  355. }
  356. }
  357. }
  358. .two {
  359. display: flex;
  360. justify-content: space-between;
  361. .two_1 {
  362. width: 50vw;
  363. button {
  364. width: 100%;
  365. color: var(--fffColor);
  366. background-color: var(--f08Color);
  367. border-radius: 0;
  368. }
  369. }
  370. .two_1:nth-child(2) {
  371. button {
  372. background-color: var(--fFB1Color);
  373. }
  374. }
  375. }
  376. }
  377. .scroll-view {
  378. position: absolute;
  379. top: 0;
  380. left: 0;
  381. right: 0;
  382. bottom: 0;
  383. .list-scroll-view {
  384. display: flex;
  385. flex-direction: column;
  386. }
  387. }
  388. .is_bottom {
  389. text-align: center;
  390. text {
  391. padding: 2vw 0;
  392. display: inline-block;
  393. color: #858585;
  394. font-size: 14px;
  395. }
  396. }
  397. </style>