address.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. <template>
  2. <view class="content">
  3. <view class="inner">
  4. <view class="top">
  5. <view class="del" @click="delAllAddress">清空地址</view>
  6. </view>
  7. <view v-for="(item,index) in address" :key="index" class="address-item" >
  8. <view class="info" @click="selectAddress(item)">
  9. <view class="title">
  10. <view v-if="item.isDefault == 1" class="tag">默认</view>
  11. {{item.province}}{{item.city}}{{item.district}}{{item.detail}}
  12. </view>
  13. <view class="name-phone">
  14. <text class="text">{{item.realName}}</text>
  15. <text class="text">{{utils.parsePhone(item.phone)}}</text>
  16. </view>
  17. </view>
  18. <view class="operat-box">
  19. <image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/del1.png" mode="" @click="delAddress(item)"></image>
  20. <image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/edit.png" mode="" @click="editAddress(item)"></image>
  21. </view>
  22. </view>
  23. <view v-if="address.length == 0" class="no-data-box" @click="getAddressList()">
  24. <image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/no_data.png" mode="aspectFit"></image>
  25. <view class="empty-title">暂无数据</view>
  26. </view>
  27. </view>
  28. <view class="btn-box">
  29. <view class="sub-btn" @click="addAdress">新建收货地址</view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. import {getAddressList,delAddress,delAllAddress} from '@/api/address'
  35. export default {
  36. data() {
  37. return {
  38. address:[],
  39. }
  40. },
  41. onLoad() {
  42. // uni.$on('refreshAddress', () => {
  43. // this.getAddressList()
  44. // })
  45. uni.showShareMenu({
  46. withShareTicket: true,
  47. //小程序的原生菜单中显示分享按钮,才能够让发送给朋友与分享到朋友圈两个按钮可以点击
  48. menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
  49. })
  50. },
  51. onShow() {
  52. this.getAddressList()
  53. },
  54. //发送给朋友
  55. onShareAppMessage(res) {
  56. if (this.utils.isLogin()) {
  57. var user = JSON.parse(uni.getStorageSync('userInfo'))
  58. return {
  59. title: '邀请您填写地址,下单更方便',
  60. path: '/pages_user/user/address',
  61. imageUrl: 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/address-share.jpg' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  62. }
  63. }
  64. },
  65. //分享到朋友圈
  66. onShareTimeline(res) {
  67. if (this.utils.isLogin()) {
  68. var user = JSON.parse(uni.getStorageSync('userInfo'))
  69. return {
  70. title: '邀请您填写地址,下单更方便',
  71. imageUrl: 'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/app/address-share.jpg' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  72. }
  73. }
  74. },
  75. methods: {
  76. selectAddress(item){
  77. // uni.navigateBack({
  78. // delta: 1
  79. // })
  80. // 获取当前所有页面栈
  81. const pages = getCurrentPages();
  82. if (pages.length >= 2) {
  83. // 获取上一页
  84. const prevPage = pages[pages.length - 2];
  85. // 判断上一页的路径 是否是 订单页
  86. if (prevPage.route !== 'pages/user/index') { // 👈 改成你真实的订单页路径
  87. uni.$emit('updateAddress',item);
  88. uni.navigateBack({ delta: 1 });
  89. } else {
  90. uni.navigateTo({
  91. url: './addAddress?type=edit&id='+item.id
  92. })
  93. }
  94. } else {
  95. uni.navigateTo({
  96. url: './addAddress?type=edit&id='+item.id
  97. })
  98. }
  99. },
  100. editAddress(item){
  101. uni.navigateTo({
  102. url: './addAddress?type=edit&id='+item.id
  103. })
  104. },
  105. delAllAddress(item){
  106. uni.showModal({
  107. title:"提示",
  108. content:"确认删除所有地址吗?",
  109. showCancel:true,
  110. cancelText:'取消',
  111. confirmText:'确定',
  112. success:res=>{
  113. if(res.confirm){
  114. var data={ }
  115. delAllAddress(data).then(
  116. res => {
  117. if(res.code==200){
  118. uni.showToast({
  119. icon:'success',
  120. title: "操作成功",
  121. });
  122. this.getAddressList()
  123. }else{
  124. uni.showToast({
  125. icon:'none',
  126. title: "请求失败",
  127. });
  128. }
  129. },
  130. rej => {}
  131. );
  132. }else{
  133. // 否则点击了取消
  134. }
  135. }
  136. })
  137. },
  138. delAddress(item){
  139. uni.showModal({
  140. title:"提示",
  141. content:"确认删除此地址吗?",
  142. showCancel:true,
  143. cancelText:'取消',
  144. confirmText:'确定',
  145. success:res=>{
  146. if(res.confirm){
  147. // 用户点击确定
  148. var data={id:item.id}
  149. delAddress(data).then(
  150. res => {
  151. if(res.code==200){
  152. uni.showToast({
  153. icon:'success',
  154. title: "操作成功",
  155. });
  156. this.getAddressList()
  157. }else{
  158. uni.showToast({
  159. icon:'none',
  160. title: "请求失败",
  161. });
  162. }
  163. },
  164. rej => {}
  165. );
  166. }else{
  167. // 否则点击了取消
  168. }
  169. }
  170. })
  171. },
  172. getAddressList(){
  173. uni.showLoading({
  174. title:"正在加载中"
  175. })
  176. getAddressList().then(
  177. res => {
  178. uni.hideLoading()
  179. if(res.code==200){
  180. this.address=res.data;
  181. }else{
  182. uni.showToast({
  183. icon:'none',
  184. title: "请求失败",
  185. });
  186. }
  187. },
  188. rej => {}
  189. );
  190. },
  191. // 新建收货地址
  192. addAdress() {
  193. uni.navigateTo({
  194. url: './addAddress?type=add'
  195. })
  196. }
  197. }
  198. }
  199. </script>
  200. <style lang="scss">
  201. page{
  202. height: 100%;
  203. }
  204. .content{
  205. height: 100%;
  206. display: flex;
  207. flex-direction: column;
  208. justify-content: space-between;
  209. .inner{
  210. flex: 1;
  211. padding: 20upx 20upx 160upx;
  212. .top{
  213. padding: 0upx 20upx 20upx;
  214. text-align: right;
  215. .del{
  216. font-size: 28upx;
  217. font-family: PingFang SC;
  218. color: #999999;
  219. }
  220. }
  221. .address-item{
  222. background: #FFFFFF;
  223. border-radius: 16upx;
  224. padding: 46upx 40upx 50upx 24upx;
  225. display: flex;
  226. align-items: center;
  227. justify-content: space-between;
  228. margin-bottom: 20upx;
  229. .info{
  230. width: 75%;
  231. .title{
  232. font-size: 30upx;
  233. font-family: PingFang SC;
  234. font-weight: bold;
  235. color: #111111;
  236. line-height: 42upx;
  237. word-break: break-all;
  238. .tag{
  239. padding: 0 6upx;
  240. height: 32upx;
  241. line-height: 32upx;
  242. font-size: 22upx;
  243. font-family: PingFang SC;
  244. font-weight: 500;
  245. color: #FFFFFF;
  246. background: #FF233C;
  247. border-radius: 4upx;
  248. float: left;
  249. margin-right: 10upx;
  250. margin-top: 5upx;
  251. }
  252. }
  253. .name-phone{
  254. margin-top: 30upx;
  255. display: flex;
  256. align-items: center;
  257. .text{
  258. font-size: 26upx;
  259. font-family: PingFang SC;
  260. font-weight: 500;
  261. color: #999999;
  262. margin-right: 22upx;
  263. &:last-child{
  264. margin-right: 0;
  265. }
  266. }
  267. }
  268. }
  269. .operat-box{
  270. display: flex;
  271. align-items: center;
  272. image{
  273. width: 30upx;
  274. height: 30upx;
  275. margin-left: 38upx;
  276. &:first-child{
  277. margin-left: 0;
  278. }
  279. }
  280. }
  281. }
  282. }
  283. .btn-box{
  284. z-index: 9999;
  285. width: 100%;
  286. padding: 30upx;
  287. position: fixed;
  288. bottom: 0;
  289. left: 0;
  290. box-sizing: border-box;
  291. background: #FFFFFF;
  292. .sub-btn{
  293. height: 88upx;
  294. line-height: 88upx;
  295. text-align: center;
  296. font-size: 30upx;
  297. font-family: PingFang SC;
  298. font-weight: bold;
  299. color: #FFFFFF;
  300. background: #FF233C;
  301. border-radius: 44upx;
  302. }
  303. }
  304. }
  305. </style>