address.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <template>
  2. <view class="">
  3. <view class="bottom-bar">
  4. <navigator :style="{background:setColor}" url="../address-edit/address-edit">添加新地址</navigator>
  5. </view>
  6. <block v-if="list.length<=0">
  7. <no-none></no-none>
  8. </block>
  9. <view class="address-list" v-else>
  10. <view class="address-item" v-for="(item,index) of list" :key='index'>
  11. <view class="" @click="pickAddress" :data-index="index" :data-id="item.id">
  12. <view class="userinfo flex-row">
  13. <view class="flex-grow-1">收货人:{{item.user_name}}({{item.sex==1?'男士':'女士'}})</view>
  14. <view class="flex-grow-0">{{item.tel}}</view>
  15. </view>
  16. <view class="address-detail userinfo">收货地址:
  17. {{item.address}}{{item.mph}}
  18. </view>
  19. </view>
  20. <view class="flex-row address-default">
  21. <view class="flex-grow-1">
  22. <block v-if="item.is_default == 1">
  23. <view style="display: inline-block">
  24. <view class="default-address active flex-row flex-y-center">
  25. <image src="/static/icon-checked.png"
  26. style="width: 40rpx;height: 40rpx;margin-right: 12rpx"></image><text>默认地址</text>
  27. </view>
  28. </view>
  29. </block>
  30. <block v-else>
  31. <view style="display: inline-block">
  32. <view @tap="setDefaultAddress" class="default-address flex-row flex-y-center"
  33. :data-id='item.id' :data-index="index">
  34. <image src="/static/icon-uncheck.png"
  35. style="width: 40rpx;height: 40rpx;margin-right: 12rpx"></image><text>设为默认</text>
  36. </view>
  37. </view>
  38. </block>
  39. </view>
  40. <view class="flex-grow-0 flex-row">
  41. <navigator class="address-option flex-y-center"
  42. :url="'../address-edit/address-edit?id='+item.id">
  43. <image src="/static/icon-edit.png" />
  44. <text>编辑</text>
  45. </navigator>
  46. <view @click="delItem" class="address-option flex-y-center" :data-index="index"
  47. :data-id="item.id">
  48. <image src="/static/icon-delete.png" />
  49. <text>删除</text>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. <view style="height:50px"></view>
  56. </view>
  57. </template>
  58. <script>
  59. import {
  60. mapState,
  61. mapMutations
  62. } from 'vuex'
  63. let hideLoading = true;
  64. export default {
  65. data() {
  66. return {
  67. list: [],
  68. setColor: "",
  69. teen_index: 0,
  70. }
  71. },
  72. onLoad(e) {
  73. this.teen_index = e.teen_index || 0;
  74. uni.setNavigationBarColor({
  75. frontColor: '#ffffff',
  76. backgroundColor: this.$store.state.color,
  77. })
  78. this.setColor = this.$store.state.color;
  79. },
  80. onShow(e) {
  81. this.http()
  82. },
  83. methods: {
  84. ...mapMutations(['SET_ADDRESS', 'SET_TEEN_INDEX']),
  85. http() {
  86. this.$http.request('Xcx/MyAddress', {
  87. user_id: uni.getStorageSync('user_id'),
  88. }, "", "", hideLoading).then(res => {
  89. this.list = res.data;
  90. })
  91. },
  92. pickAddress(e) {
  93. if (this.teen_index == 3) {
  94. return
  95. }
  96. var page = this;
  97. var index = e.currentTarget.dataset.index;
  98. var address = this.list[index];
  99. this.SET_ADDRESS(address)
  100. if (this.teen_index == 1) {
  101. // uni.switchTab({
  102. // url: "../index/index"
  103. // })
  104. uni.navigateBack()
  105. }
  106. if (this.teen_index == 2) {
  107. let pages = getCurrentPages(); // 获取当前小程序打开页面信息列表 . 形式如下参考:图一
  108. let game_index = pages.findIndex(item => item.route === "pages/creatOrder/creatOrder");
  109. let num = pages.length - game_index - 1;
  110. uni.navigateBack({ // 关闭当前页面,返回上一页面或多级页面。
  111. delta: num, // 1是返回上一级页面,2是上级的上级页面,一次类推。
  112. })
  113. }
  114. },
  115. setDefaultAddress(e) {
  116. var id = e.currentTarget.dataset.id,
  117. index = e.currentTarget.dataset.index;
  118. this.$http.request('Xcx/AddDefault', {
  119. id: id,
  120. }).then(res => {
  121. let list = this.list;
  122. for (var i in list)
  123. list[i].is_default = i == index ? 1 : 2;
  124. this.list = list;
  125. })
  126. },
  127. delItem(e) {
  128. var id = e.currentTarget.dataset.id,
  129. index = e.currentTarget.dataset.index;
  130. //当前索引
  131. wx.showModal({
  132. title: '删除提示',
  133. content: '你确定要删除此地址吗?',
  134. showCancel: true,
  135. cancelText: '取消',
  136. confirmText: '删除',
  137. confirmColor: '#ff4544',
  138. success: (res) => {
  139. if (res.confirm)
  140. this.$http.request('Xcx/DelAdd', {
  141. id: id,
  142. }, "", "", hideLoading).then(res => {
  143. if (res.code === '200') {
  144. this.list.splice(index, 1)
  145. uni.showToast({
  146. title: "删除成功",
  147. icon: 'none',
  148. duration: 1000
  149. })
  150. uni.removeStorageSync("address")
  151. let vuex_address = this.$store.state.address
  152. if(vuex_address && vuex_address.id == id){
  153. this.$store.commit("SET_ADDRESS",{})
  154. }
  155. }
  156. }).catch((res) => {
  157. uni.showToast({
  158. title: res.message,
  159. icon: 'none',
  160. duration: 1000
  161. })
  162. });
  163. }
  164. })
  165. }
  166. }
  167. }
  168. </script>
  169. <style lang="scss">
  170. page {
  171. font-size: 28rpx;
  172. background: #F1F1F1;
  173. }
  174. .bottom-bar {
  175. position: fixed;
  176. bottom: 13px;
  177. left: 0;
  178. width: 100%;
  179. z-index: 1000;
  180. }
  181. .bottom-bar navigator {
  182. width: 686rpx;
  183. margin: 0 auto;
  184. background: #007AFF;
  185. text-align: center;
  186. height: 100rpx;
  187. line-height: 100rpx;
  188. color: #fff;
  189. border-radius: 100px;
  190. }
  191. .address-list {
  192. padding-bottom: 100rpx;
  193. }
  194. .address-item {
  195. background: #fff;
  196. padding: 32rpx 24rpx 0 24rpx;
  197. /* border-bottom: 1rpx solid #e3e3e3; */
  198. width: 686rpx;
  199. margin: 0 auto;
  200. margin-top: 24rpx;
  201. }
  202. .userinfo {
  203. margin-bottom: 24rpx;
  204. }
  205. .address-option {
  206. margin-left: 48rpx;
  207. }
  208. .address-option image {
  209. width: 32rpx;
  210. height: 32rpx;
  211. margin-right: 16rpx;
  212. }
  213. .btn {
  214. display: block;
  215. border: 1rpx solid #ddd;
  216. font-size: 11pt;
  217. color: #555;
  218. padding: 16rpx;
  219. line-height: normal;
  220. background: #fff;
  221. border-radius: 10rpx;
  222. text-align: center;
  223. }
  224. .btn:active {
  225. background: #fff;
  226. opacity: 0.65;
  227. }
  228. .btn:after {
  229. display: none;
  230. }
  231. .btn.btn-red {
  232. background: #ff4544;
  233. color: #fff;
  234. border-color: #ff4544;
  235. margin: 0 30rpx;
  236. }
  237. .job-content {
  238. width: 90%;
  239. margin: 0 auto;
  240. border-radius: 6rpx;
  241. font-size: 28rpx;
  242. margin-bottom: 30rpx;
  243. display: flex;
  244. overflow: hidden;
  245. position: relative;
  246. }
  247. .job-content-main {
  248. width: 100%;
  249. margin-right: 0;
  250. -webkit-transition: all 0.4s;
  251. transition: all 0.4s;
  252. -webkit-transform: translateX(120px);
  253. transform: translateX(120px);
  254. margin-left: -120px;
  255. background: #fff;
  256. padding: 25rpx 20rpx;
  257. }
  258. .del {
  259. background-color: orangered;
  260. width: 120px;
  261. display: flex;
  262. color: #fff;
  263. -webkit-transform: translateX(120px);
  264. transform: translateX(120px);
  265. -webkit-transition: all 0.4s;
  266. transition: all 0.4s;
  267. font-size: 28rpx;
  268. }
  269. .touch-move-active .job-content-main,
  270. .touch-move-active .del {
  271. -webkit-transform: translateX(0);
  272. transform: translateX(0);
  273. }
  274. .address-default {
  275. padding: 20rpx 0;
  276. border-top: 1rpx solid #f1f1f1;
  277. }
  278. </style>