pet_uni/pages/Addr/index.vue

<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" @click="(type === 'select')?navBack(item):''">
					<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">{{item.name}}</view>
								<view class="addr-phone">{{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">
									{{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 + '/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: [],
        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>