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.
234 lines
7.6 KiB
234 lines
7.6 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 in addrList"> |
|
<uni-swipe-action-item :right-options="options1"> |
|
<view class="addr-list-item-container"> |
|
<view class="addr-list-item row" :style="{backgroundImage:'url('+staticImage.addrBg+')'}"> |
|
<view class="addr-list-content"> |
|
<view class="addr-title-group row"> |
|
<view class="addr-title">{{item.name}}</view> |
|
<view class="addr-phone">{{item.phone}}</view> |
|
<view class="addr-edit" @click="navTo('/pages/AddrDetail/index')"> |
|
<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"> |
|
{{item.addr}} |
|
</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="delAddr(item)"> |
|
<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> |
|
|
|
</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'; |
|
export default { |
|
components: { |
|
HeaderNav, |
|
FooterNav, |
|
RightNav, |
|
MzButton |
|
}, |
|
data() { |
|
return { |
|
options1: [{ |
|
text: '删除', |
|
}], |
|
title: 'Hello', |
|
loading: true, |
|
staticImage: { |
|
screenActiveImg: imghost + '/static/image/order-screen-active.png', |
|
orderCardBackground: imghost + '/static/image/order-card-background.png', |
|
wallpaperBgImage: imghost + '/static/image/background.png', |
|
couponsBackground: imghost + '/static/image/coupons-bg.png', |
|
couponsGrayBackground: imghost + '/static/image/coupons-gray-bg.png', |
|
couponsGQ: imghost + '/static/image/coupons-gq.png', |
|
addrDel: imghost + '/static/image/addr-del.png', |
|
addrBg: imghost + '/static/image/addr-bg.png', |
|
addrIcon: imghost + '/static/image/addr-icon.png', |
|
addrEdit: imghost + '/static/image/addr-edit.png', |
|
}, |
|
indexBanner: [{ |
|
image: imghost + '/static/image/banner.png', |
|
url: '', |
|
}], |
|
user: { |
|
avatar: imghost + '/static/image/banner.png', |
|
nickname: '清晨的风', |
|
coupons: 221, |
|
id: 88685 |
|
}, |
|
isTop: false, |
|
pagePadding: 100, |
|
petImage: imghost + '/static/image/pet_avatar1.jpeg', |
|
addrList: [{ |
|
id: '1', |
|
name: '派大星', |
|
phone: '182****6889', |
|
addr: '四川省成都市武侯区天府二街环球中心 27253单元1601', |
|
}, { |
|
id: '2', |
|
name: '派大星', |
|
phone: '182****6889', |
|
addr: '四川省成都市武侯区天府二街环球中心 27253单元1601', |
|
}, { |
|
id: '3', |
|
name: '派大星', |
|
phone: '182****6889', |
|
addr: '四川省成都市武侯区天府二街环球中心 27253单元1601', |
|
}, { |
|
id: '4', |
|
name: '派大星', |
|
phone: '182****6889', |
|
addr: '四川省成都市武侯区天府二街环球中心 27253单元1601', |
|
}, ] |
|
} |
|
}, |
|
onLoad() { |
|
|
|
}, |
|
methods: { |
|
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){ |
|
wx.navigateTo({ |
|
url:url |
|
}) |
|
}, |
|
}, |
|
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> |