index.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. <template>
  2. <view class="container">
  3. <view class="addres-list">
  4. <view class="address-item" v-for="(item, index) in list" :key="index">
  5. <view class="contacts" @click="handleSetDefault(item.id)">
  6. <text class="name">{{ item.name }}</text>
  7. <text class="phone">{{ item.phone }}</text>
  8. </view>
  9. <view class="address" @click="handleSetDefault(item.id)">
  10. <text class="region">{{ item.provinceName }}{{ item.cityName }}{{ item.regionName }}</text>
  11. <text class="detail">{{ item.detail }}</text>
  12. </view>
  13. <view class="line"></view>
  14. <view class="item-option">
  15. <view class="_left">
  16. <label class="item-radio" @click.stop="handleSetDefault(item.id)">
  17. <radio class="radio" color="#fa2209" :checked="item.isDefault == 'Y'"></radio>
  18. <text class="text">选择</text>
  19. </label>
  20. </view>
  21. <view class="_right">
  22. <view class="events">
  23. <view class="event-item" @click="handleUpdate(item.id)">
  24. <text class="iconfont icon-edit"></text>
  25. <text class="title">编辑</text>
  26. </view>
  27. <view class="event-item" @click="handleRemove(item.id)">
  28. <text class="iconfont icon-delete"></text>
  29. <text class="title">删除</text>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. <empty v-if="!list.length" :isLoading="isLoading" tips="暂无收货地址哦.."/>
  37. <!-- 底部操作按钮 -->
  38. <view class="footer-fixed">
  39. <view class="btn-wrapper">
  40. <view class="btn-item btn-item-main" @click="handleCreate()">添加新地址</view>
  41. </view>
  42. </view>
  43. </view>
  44. </template>
  45. <script>
  46. import * as AddressApi from '@/api/address'
  47. import Empty from '@/components/empty'
  48. export default {
  49. components: {
  50. Empty
  51. },
  52. data() {
  53. return {
  54. //当前页面参数
  55. options: {},
  56. // 正在加载
  57. isLoading: true,
  58. // 收货地址列表
  59. list: []
  60. }
  61. },
  62. /**
  63. * 生命周期函数--监听页面加载
  64. */
  65. onLoad(options) {
  66. // 当前页面参数
  67. this.options = options
  68. },
  69. /**
  70. * 生命周期函数--监听页面显示
  71. */
  72. onShow() {
  73. // 获取页面数据
  74. this.getPageData()
  75. },
  76. methods: {
  77. // 获取页面数据
  78. getPageData() {
  79. const app = this
  80. app.isLoading = true
  81. Promise.all([app.getAddressList()])
  82. .then(() => {
  83. // 列表排序把默认收货地址放到最前
  84. app.onReorder()
  85. })
  86. .finally(() => app.isLoading = false)
  87. },
  88. // 获取收货地址列表
  89. getAddressList() {
  90. const app = this
  91. return new Promise((resolve, reject) => {
  92. AddressApi.list()
  93. .then(result => {
  94. app.list = result.data.list
  95. resolve(result)
  96. })
  97. .catch(err => reject(err))
  98. })
  99. },
  100. // 列表排序把默认收货地址放到最前
  101. onReorder() {
  102. const app = this
  103. app.list.sort(item => {
  104. return item.isDefault == 'Y' ? -1 : 1
  105. })
  106. },
  107. /**
  108. * 添加新地址
  109. */
  110. handleCreate() {
  111. this.$navTo('pages/address/create')
  112. },
  113. /**
  114. * 编辑地址
  115. * @param {int} addressId 收货地址ID
  116. */
  117. handleUpdate(addressId) {
  118. this.$navTo('pages/address/update', { addressId })
  119. },
  120. /**
  121. * 删除收货地址
  122. * @param {int} addressId 收货地址ID
  123. */
  124. handleRemove(addressId) {
  125. const app = this
  126. uni.showModal({
  127. title: "提示",
  128. content: "您确定要删除当前收货地址吗?",
  129. success({ confirm }) {
  130. confirm && app.onRemove(addressId)
  131. }
  132. });
  133. },
  134. /**
  135. * 确认删除收货地址
  136. * @param {int} addressId 收货地址ID
  137. */
  138. onRemove(addressId) {
  139. const app = this
  140. AddressApi.remove(addressId, 'D')
  141. .then(result => {
  142. app.getPageData()
  143. })
  144. },
  145. /**
  146. * 设置为默认地址
  147. * @param {Object} addressId
  148. */
  149. handleSetDefault(addressId) {
  150. const app = this
  151. AddressApi.setDefault(addressId, 'Y')
  152. .then(result => {
  153. app.options.from === 'checkout' && uni.navigateBack()
  154. })
  155. }
  156. }
  157. }
  158. </script>
  159. <style lang="scss" scoped>
  160. .addres-list {
  161. padding-bottom: 120rpx;
  162. }
  163. // 项目内容
  164. .address-item {
  165. margin: 20rpx auto 20rpx auto;
  166. padding: 30rpx 40rpx;
  167. width: 94%;
  168. box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  169. border-radius: 16rpx;
  170. background: #fff;
  171. }
  172. .contacts {
  173. font-size: 30rpx;
  174. margin-bottom: 16rpx;
  175. .name {
  176. margin-right: 16rpx;
  177. }
  178. }
  179. .address {
  180. font-size: 28rpx;
  181. .region {
  182. margin-right: 10rpx;
  183. }
  184. }
  185. .line {
  186. margin: 20rpx 0;
  187. border-bottom: 1rpx solid #f3f3f3;
  188. }
  189. .item-option {
  190. display: flex;
  191. justify-content: space-between;
  192. height: 48rpx;
  193. // 单选框
  194. .item-radio {
  195. font-size: 28rpx;
  196. .radio {
  197. vertical-align: middle;
  198. transform: scale(0.76)
  199. }
  200. .text {
  201. vertical-align: middle;
  202. }
  203. }
  204. // 操作
  205. .events {
  206. display: flex;
  207. align-items: center;
  208. line-height: 48rpx;
  209. .event-item {
  210. font-size: 28rpx;
  211. margin-right: 22rpx;
  212. color: #4c4c4c;
  213. &:last-child {
  214. margin-right: 0;
  215. }
  216. .title {
  217. margin-left: 8rpx;
  218. }
  219. }
  220. }
  221. }
  222. // 底部操作栏
  223. .footer-fixed {
  224. position: fixed;
  225. bottom: var(--window-bottom);
  226. left: 0;
  227. right: 0;
  228. height: 180rpx;
  229. z-index: 11;
  230. box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
  231. background: #fff;
  232. padding-bottom: 40rpx;
  233. .btn-wrapper {
  234. height: 100%;
  235. display: flex;
  236. align-items: center;
  237. padding: 0 20rpx;
  238. }
  239. .btn-item {
  240. flex: 1;
  241. font-size: 28rpx;
  242. height: 80rpx;
  243. line-height: 80rpx;
  244. text-align: center;
  245. color: #fff;
  246. border-radius: 40rpx;
  247. }
  248. .btn-item-main {
  249. background: linear-gradient(to right, #f9211c, #ff6335);
  250. }
  251. }
  252. </style>