You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
9.2 KiB
292 lines
9.2 KiB
<template> |
|
<view class="body-background" :style="{ |
|
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
|
}"></view> |
|
<HeaderNav title="地址簿" :is-back="true"></HeaderNav> |
|
<view class="app-wallpaper"> |
|
<view class="addr-list-container row"> |
|
<!-- <view @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove" v-for="item in addrList" class="addr-list-item row" :style="{backgroundImage:'url('+staticImage.addrBg+')'}">--> |
|
|
|
<uni-swipe-action v-for="(item, index) in addrList" wx:key="index" style="width:100%;"> |
|
<uni-swipe-action-item :right-options="options1" style="width:100%;"> |
|
<view class="addr-list-item-container"> |
|
<view class="addr-list-item row" :style="{backgroundImage:'url('+staticImage.addrBg+')'}"> |
|
<view class="addr-list-content row"> |
|
<view class="addr-title-group row"> |
|
<view class="addr-title" @click="(type === 'select')?navBack(item):''">{{item.name}}</view> |
|
<view class="addr-phone" @click="(type === 'select')?navBack(item):''">{{item.phone}}</view> |
|
<view class="addr-edit" @click="navTo('/pages/AddrDetail/index?id=' + item.id)"> |
|
<image class="img" :src="staticImage.addrEdit" mode="aspectFit" /> |
|
</view> |
|
</view> |
|
<view class="addr-desc-container row"> |
|
<view class="addr-icon"> |
|
<image class="img" :src="staticImage.addrIcon" mode="aspectFit" /> |
|
</view> |
|
<view class="addr-desc col" @click="(type === 'select')?navBack(item):''"> |
|
{{item.province}} {{ item.city }} {{ item.district }} {{ item.info }} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<template v-slot:right> |
|
<view class="addr-list-del-container"> |
|
<view class="addr-list-del-content"> |
|
<view class="addr-list-del" @click="delAddress(item.id)"> |
|
<view class="addr-del-container"> |
|
<image class="img " :src="staticImage.addrDel" mode="aspectFit" /> |
|
<view class="addr-del-title"> |
|
删除 |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
</uni-swipe-action-item> |
|
|
|
</uni-swipe-action> |
|
<u-loadmore :status="status" fontSize="28" |
|
color="#ACB4B6" |
|
line |
|
line-color="#ACB4B6" |
|
marginBottom="30" marginTop="30" @loadmore="getAddressList()"/> |
|
</view> |
|
|
|
</view> |
|
<view class="footer-menu row"> |
|
<!-- <view class="footer-button col-6">--> |
|
<!-- <MzButton--> |
|
<!-- title="管理"--> |
|
<!-- button-color="#ffffff"--> |
|
<!-- font-color="##262626"--> |
|
<!-- button-width="250rpx"--> |
|
<!-- >--> |
|
<!-- </MzButton>--> |
|
<!-- </view>--> |
|
<view class="footer-button col-12" |
|
@click="navTo('/pages/AddrDetail/index')"> |
|
<MzButton |
|
title="新增地址" |
|
button-color="#4DC3B8" |
|
font-color="#FFFFFF" |
|
button-width="100%" |
|
style="width:90%;" |
|
> |
|
</MzButton> |
|
</view> |
|
</view> |
|
<!-- <RightNav></RightNav> --> |
|
</template> |
|
|
|
<script> |
|
import { |
|
imghost |
|
} from '@/config/host.js' |
|
import HeaderNav from '@/components/HeaderNav/Index.vue'; |
|
import FooterNav from '@/components/FooterNav/Index.vue'; |
|
import RightNav from '@/components/RightNav/Index.vue'; |
|
import MzButton from '@/components/MzButton/Index.vue'; |
|
import {delAddress, getAddressList} from "@/api/address"; |
|
import functions from "@/utils/functions"; |
|
import log from "@/utils/log"; |
|
export default { |
|
components: { |
|
HeaderNav, |
|
FooterNav, |
|
RightNav, |
|
MzButton |
|
}, |
|
data() { |
|
return { |
|
options1: [{ |
|
text: '删除', |
|
}], |
|
title: 'Hello', |
|
loading: true, |
|
staticImage: { |
|
screenActiveImg: imghost + '/order-screen-active.png', |
|
orderCardBackground: imghost + '/order-card-background.png', |
|
wallpaperBgImage: imghost + '/background.png', |
|
couponsBackground: imghost + '/coupons-bg.png', |
|
couponsGrayBackground: imghost + '/coupons-gray-bg.png', |
|
couponsGQ: imghost + '/coupons-gq.png', |
|
addrDel: imghost + '/addr-del.png', |
|
addrBg: imghost + '/addr-bg.png', |
|
addrIcon: imghost + '/addr-icon.png', |
|
addrEdit: imghost + '/addr-edit.png', |
|
}, |
|
indexBanner: [{ |
|
image: imghost + '/banner.png', |
|
url: '', |
|
}], |
|
user: { |
|
avatar: imghost + '/banner.png', |
|
nickname: '清晨的风', |
|
coupons: 221, |
|
id: 88685 |
|
}, |
|
isTop: false, |
|
|
|
petImage: imghost + '/pet_avatar1.jpeg', |
|
addrList: [], |
|
type:'', |
|
pages:{ |
|
page:1, |
|
limit:6, |
|
}, |
|
status:'loadmore', |
|
} |
|
}, |
|
onLoad(option) { |
|
this.type = option.type||'lists' |
|
}, |
|
onShow() { |
|
this.pages = { |
|
page: 1, |
|
limit: 6, |
|
}; |
|
this.status = 'loadmore'; |
|
this.getAddressList(); |
|
}, |
|
methods: { |
|
navBack(item) { |
|
item.select = true; |
|
uni.setStorageSync('address',item) |
|
uni.navigateBack(); |
|
}, |
|
touchstart(e) { |
|
console.log(e) |
|
|
|
// this.$set(e.) |
|
}, |
|
touchend(event, ownerInstance) { |
|
// console.log(e); |
|
// console.log('Left',e.currentTarget.offsetLeft); |
|
// console.log('Top',e.currentTarget.offsetTop); |
|
|
|
}, |
|
touchmove(event, ownerInstance) { |
|
|
|
// console.log(e.currentTarget.dataset.index); |
|
// console.log('clientX',e.touches[0].clientX); |
|
// console.log('clientY',e.touches[0].clientY); |
|
// console.log('pageX',e.touches[0].pageX); |
|
// console.log('pageY',e.touches[0].pageY); |
|
|
|
var instance = event.instance |
|
// wxs内的局部变量快照 |
|
var state = instance.getState() |
|
if (state.disabled || !state.moving) return |
|
var touches = event.touches |
|
var pageX = touches[0].pageX |
|
var pageY = touches[0].pageY |
|
var moveX = pageX - state.startX |
|
var moveY = pageY - state.startY |
|
var buttonsWidth = state.buttonsWidth |
|
|
|
// 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动 |
|
if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) { |
|
event.preventDefault && event.preventDefault() |
|
event.stopPropagation && event.stopPropagation() |
|
} |
|
// 如果移动的X轴距离小于Y轴距离，也即终点位置与起点位置连线，与Y轴夹角小于45度时，认为是页面上下滑动，而不是左右滑动单元格 |
|
if (Math.abs(moveX) < Math.abs(moveY)) return |
|
|
|
// 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断 |
|
// 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，最好的办法就是 |
|
// 在超出后，设置为0 |
|
if (state.status === 'open') { |
|
// 在开启状态下，向左滑动，需忽略 |
|
if (moveX < 0) moveX = 0 |
|
// 想要收起菜单，最大能移动的距离为按钮的总宽度 |
|
if (moveX > buttonsWidth) moveX = buttonsWidth |
|
// 如果是已经打开了的状态，向左滑动时，移动收起菜单 |
|
this.moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance) |
|
} else { |
|
// 关闭状态下，右滑动需忽略 |
|
if (moveX > 0) moveX = 0 |
|
// 滑动的距离不允许超过所有按钮的总宽度，此时只能是左滑，最终设置按钮的总宽度，同时为负数 |
|
if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth |
|
// 只要是在滑过程中，就不断移动单元格内容部分，从而使隐藏的菜单显示出来 |
|
this.moveSwipeAction(moveX, instance, ownerInstance) |
|
} |
|
}, |
|
moveSwipeAction(moveX, instance, ownerInstance) { |
|
var state = instance.getState() |
|
// 获取所有按钮的实例，需要通过它去设置按钮的位移 |
|
var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button') |
|
|
|
// 设置菜单内容部分的偏移 |
|
instance.requestAnimationFrame(function() { |
|
instance.setStyle({ |
|
// 设置translateX的值 |
|
'transition': 'none', |
|
transform: 'translateX(' + moveX + 'px)', |
|
'-webkit-transform': 'translateX(' + moveX + 'px)' |
|
}) |
|
}) |
|
}, |
|
delAddr(item){ |
|
uni.showModal({ |
|
content: '123123', |
|
showCancel: false |
|
}); |
|
}, |
|
navTo(url){ |
|
uni.navigateTo({ |
|
url:url |
|
}) |
|
}, |
|
getAddressList(){ |
|
if(this.status === 'nomore'){ |
|
return false; |
|
} |
|
this.status = 'loading'; |
|
getAddressList(this.pages).then(res => { |
|
if (this.pages.page === 1) { |
|
this.addrList = res.data; |
|
}else{ |
|
this.addrList.push(...res.data); |
|
} |
|
this.pages.page++; |
|
if(res.data.length === 0){ |
|
this.status = 'nomore'; |
|
}else{ |
|
this.status = 'loadmore'; |
|
} |
|
}); |
|
}, |
|
delAddress(id){ |
|
functions.confirm("确认删除吗？").then(() => { |
|
delAddress(id).then(data => { |
|
functions.success("删除成功"); |
|
console.log(id); |
|
this.addrList = this.addrList.filter(v => v.id !== id); |
|
}) |
|
}) |
|
} |
|
}, |
|
onReachBottom() { |
|
this.getAddressList(); |
|
}, |
|
onPageScroll(res) { |
|
if (res.scrollTop <= 20) { |
|
uni.$emit('isTop', true); |
|
} else { |
|
uni.$emit('isTop', false); |
|
} |
|
}, |
|
created() { |
|
// this.pagePadding = (api.navHeight().navPaddingTop + |
|
// api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
|
}, |
|
|
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |