<template> <view class="content"> <view v-if="addressList.length !== 0" class="list" > <view v-for="(item, index) in addressList" :key="index" class="order-user" @tap="toOrder(item.add_id)" > <view class="order-user-head"> <view class="name"> <view v-if="item.default === '1'" class="default" ><text>默认</text></view>{{item.name}} </view> <text class="mobile">{{item.mobile}}</text> </view> <view class="order-user-body"> <image src="../../static/myorder-paying-location.png"></image> <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> </view> <image @click.stop="toEditAddress(item.add_id)" v-if="item.default === '1'" class="arrow" src="../../static/right.png" ></image> <image @click.stop="toEditAddress(item.add_id)" v-else class="arrow pen" src="../../static/icon-pen.png" ></image> </view> </view> <view v-else class="empty" > 暂无收货地址 </view> <button @tap="toAddAddress" class="add">新建收货地址</button> </view> </template> <script> import store from '@/store' export default { data () { return {} }, computed: { addressList () { return this.$store.state.address.list } }, onLoad ({ edit }) { if (edit) { this.edit = true } store.dispatch('address/list') }, onShow() { store.dispatch('address/list') }, methods: { toAddAddress() { console.log('aaaaa-a') uni.navigateTo({ url: 'addAddress', fail: (error) => { console.error('跳转出现错误', error) } }) }, toEditAddress (addId) { console.log('addId', addId) uni.navigateTo({ url: `addAddress?addId=${addId}`, fail: (error) => { console.error('跳转出现错误', error) } }) }, toOrder (addId) { if (this.edit) { let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; //上一个页面 const addressId=addId // console.log(addressId) prevPage.onShow(addressId); uni.navigateBack(); // uni.navigateTo({ // url: `../confirmOrder/confirmOrder?addressId=${addId}`, // fail: (error) => { // console.error('跳转出现错误', error) // } // }) } } } } </script> <style lang="scss"> .content { min-height: 100vh; background-color: #f2f2f2; padding-top: 20rpx; padding-bottom: 112rpx; .order-user { width: 670rpx; height: 228rpx; background: #ffffff; border-radius: 14rpx; margin: 0 auto; margin-bottom: 20rpx; position: relative; .order-user-head { display: flex; height: 108rpx; width: 100%; align-items: center; padding-left: 126rpx; box-sizing: border-box; .name { display: flex; justify-content: space-between; font-size: 14px; color: #333333; letter-spacing: -0.26px; margin-right: 20rpx; .default { height: 40rpx; width: 80rpx; background-color: #4a90e2; border-radius: 13px; border-radius: 13px; text-align: center; margin-right: 20rpx; text { display: flex; justify-content: center; align-items: center; font-size: 12px; color: #ffffff; letter-spacing: -0.23px; } } } .mobile { font-size: 14px; color: #999999; letter-spacing: -0.26px; } } .order-user-body { display: flex; width: 100%; image { width: 24px; height: 26px; margin: 12rpx 32rpx 0 40rpx; } .address { font-weight: bold; font-size: 14px; color: #333333; letter-spacing: -0.26px; } } .arrow { width: 12px; height: 12px; position: absolute; right: 40rpx; bottom: 104rpx; } } .empty { color: #666; font-size: 16px; text-align: center; padding-top: 30vh; } .add { position: fixed; bottom: 0; left: 0; height: 112rpx; width: 100%; background-color: #ff6b4a; display: flex; justify-content: center; align-items: center; font-size: 16px; color: #ffffff; letter-spacing: -0.3px; } } </style>