warm_man/pages/Address/index.vue

<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#fff"
  ></u-navbar>
  <u-row :custom-style="{padding:'16rpx 26rpx',boxSizing:'border-box'}">
    <u-col :custom-style="{backgroundColor:'#ffffff',borderRadius:'10rpx'}">

        <uni-swipe-action>
        <u-list :height="size.height+'px'">
          <uni-swipe-action-item @click="deleteAddr" :right-options="options" v-for="(item,index) in lists">
            <u-list-item>
              <u-cell isLink
                      :border="false"
                      label="rightIcon"
                      :custom-style="{paddingLeft:'14rpx'}"
                      :right-icon-style="{fontSize:'32rpx'}">
                <template #title>
                  <view class="title-container" @click="(type === 'select')?navBack(item):navTo('/pages/Address/edit?detail='+JSON.stringify(item))">
                    <view class="title-group row">
                      <view class="title">
                        <u-text :block="true" mode="name" :text="item.name" format="encrypt" size="32" color="#020b18"></u-text>
                      </view>
                      <view class="phone">
                        <u-text :block="true" mode="phone" :text="item.phone" format="encrypt" size="32" color="#020b18"></u-text>
                      </view>
                    </view>
                    <view class="address">
                      <u-text :text="item.area+item.address" size="32" color="#020b18"></u-text>
                    </view>
                  </view>
                </template>
                <template #label>
                  <view class="label-container row">
                    <view class="checkbox">
                      <u-checkbox-group>
                        <u-checkbox
                            activeColor="#FF9545"
                            :checked="item.is_default"
                            size="35"
                            shape="circle"
                            iconSize="30"
                            @change="setAddrDefault(item)"
                        ></u-checkbox>
                      </u-checkbox-group>
                    </view>
                    <view class="title">
                      <u-text text="设为默认地址" size="28" color="#020b18"></u-text>
                    </view>
                  </view>
                </template>
              </u-cell>
            </u-list-item>
          </uni-swipe-action-item>
        </u-list>
      </uni-swipe-action>
    </u-col>
  </u-row>
  <view class="foot-button border-box">
    <u-button
        type="primary"
        text="添加收货地址"
        shape="circle"
        :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              height:'80rpx'
            }"
        @click="navTo('/pages/Address/edit?type=create')"
    ></u-button>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {userAddrDefault, userAddrDel, userAddrList} from "@/api/user";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      value:1,
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#FC4956'
          }
        }
      ],
      title: '我的地址',
      loading: true,
      staticImage: {
        bg: imghost + '/BG.png',
        newIcon: imghost + '/new-icon.png',
      },
      isTop: false,
      lists: [],
      size: {
        height: 500,
      },
      type:''
    }
  },
  onLoad(option) {
    this.type = option.type||''
    this.getAddressList();
  },
  onReady() {
    let that = this;
    let height = api.wxSystemInfo().system.windowHeight
    let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight

    let info = uni.createSelectorQuery().in(this).select('.foot-button');
    info.boundingClientRect(function (data) {
      that.size.height = that.size.height = height - headerHeight - data.height - uni.$u.getPx('32rpx');
    }).exec(function (res) {});
  },
  computed: {
    api() {
      return api
    },
    sectionStyle() {
      const style = {};
      style.padding = '0 26rpx';
      style.position = 'sticky';
      style.zIndex = '9999';
      style.top = api.navHeight().systemBarHeight + 'px'
      return style;
    },
  },
  methods: {
    setAddrDefault(item){
      userAddrDefault({id: item.id}).then(res => {
        if(res.code === 200){
          uni.$u.toast('设置成功');
          this.getAddressList();
        }else{
          uni.$u.toast(res.msg);
        }
      });
    },
    chatDetail(item) {
      wx.navigateTo({
        url: '/pages/ChatDetail/index?id=' + item.id
      });
    },
    checkSection(index) {
      this.current = index;
    },
    scrollToLower() {

    },
    navTo(url) {
      wx.navigateTo({
        url: url
      })
    },
    navBack(item) {
      item.select = true;
      uni.setStorageSync('address',item)
      wx.navigateBack(-1)
    },
    getAddressList(){
      userAddrList().then(res => {
        this.lists = res.data;
      })
    },
    deleteAddr(e){
      userAddrDel({
        id:this.lists[e.index].id
      }).then(res => {
        uni.$u.toast('删除成功')
        this.getAddressList();
        uni.removeStorage({key:'address'});
      });
    }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {
    // this.listHeight();
    // this.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {
    this.getAddressList();
  },
  onShow(){
    console.log('addressOnShow')
    this.getAddressList();
    uni.removeStorage({key:'address'});
  }
}
</script>

<style lang="scss">
@import './components/index.scss';
</style>