paper-shopkeeper-H5/pages/address-manage/index.vue

<template>
  <view class="warpper">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="收货地址"></uni-nav-bar>
    <view class="content" v-for="(item, index) in list" :key="index">
      <view class="info-box" @tap="selectAddress(item)">
        <view class="name">{{ item.receiver }} {{ item.receiverMobile }}</view>
        <view class="address">{{ item.provinceName }}{{ item.cityName }}{{ item.districtName }}{{ item.streetName }}{{ item.detail }}</view>
      </view>
      <view class="other">
        <view class="left">
          <label @tap="radioTap(item)">
            <radio :checked="item.isDefault == 1" style="transform: scale(0.8)" />
            <text :class="item.isDefault == 1 ? 'radioText' : 'not-radioText'">{{ item.isDefault == 1 ? '已设为默认' : '设为默认' }}</text>
          </label>
        </view>
        <view class="right">
          <view class="" @tap="delTap(item, index)">删除</view>
          <view class="edit" @tap="editTap(item, index)">编辑</view>
        </view>
      </view>
    </view>
    <qn-footer fixed height="120rpx">
      <view class="button-area">
        <!-- <view class="button button__cancel" @click="back">
	      <text class="text">取消</text>
	    </view> -->
        <view class="button button__submit" @click="addTap"><text class="text" style="color: white">添加地址</text></view>
      </view>
    </qn-footer>
    <uni-popup ref="popup" type="center" :mask-click="false">
      <view class="popup-box">
        <view class="tip-title">确定要删除改地址吗？</view>
        <view class="operation-row">
          <view class="cancel-text" @tap="cancelTap">取消</view>
          <view class="line"></view>
          <view class="confirm-text" @tap="confirmTap">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { go2, back, setCache } from '@/utils/hook.js'
import qnFooter from '@/components/qn-footer/qn-footer.vue'
import { getAddress, delAddress, setDefaultAddress } from '@/apis/addressManageApi.js'
export default {
  components: { qnFooter },
  data() {
    return {
      /**
       * 页面操作类型 none: 无操作, select: 选择
       */
      operation: 'none',
      list: [],
      id: null
    }
  },
  onShow() {
    this.queryData()
  },

  methods: {
    go2,
    back,
    // 查询收货地址
    queryData() {
      const params = {
        enterpriseId: this.$store.state.companyInfo.id
      }
      getAddress(params).then((res) => {
        if (res) {
          this.list = res
        }
      })
    },
    // 设置默认地址
    radioTap(item) {
      setDefaultAddress({ id: item.id }).then((res) => {
        if (res) {
          this.queryData()
        }
      })
    },
    // 选择地址
    selectAddress(item) {
      if (this.operation === 'select') {
        setCache('address', item)
        back()
      }
    },

    // 新增收货地址
    addTap() {
      go2('add-address-manage', { type: '新增地址' })
    },
    // 删除
    delTap(item, index) {
      this.id = item.id
      this.$refs.popup.open('center')
      // this.$refs.popup.close()
    },
    // 编辑
    editTap(item, index) {
      go2('add-address-manage', { id: item.id, type: '编辑地址' })
    },
    confirmTap() {
      delAddress({ id: this.id }).then((res) => {
        this.$refs.popup.close()
        if (res) {
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
          this.queryData()
        }
      })
    },
    cancelTap() {
      this.$refs.popup.close()
    }
  },
  onLoad(option) {
    if (option) {
      this.operation = option.operation
    }
  }
}
</script>

<style lang="scss" scoped>
.warpper {
  .content {
    padding-bottom: 16rpx;
    .info-box {
      max-height: 197rpx;
      background: #ffffff;
      padding: 27rpx 32rpx;
      border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
      .name {
        ont-size: 30rpx;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;
      }
      .address {
        padding-top: 16rpx;
        font-size: 28rpx;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;
      }
    }
    .other {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0rpx 32rpx;
      height: 80rpx;
      background: #ffffff;
      .radioText {
        font-size: 28rpx;
        color: #007aff;
        letter-spacing: 0;
        font-weight: 400;
      }
      .not-radioText {
        font-size: 28rpx;
        color: #888888;
        letter-spacing: 0;
        font-weight: 400;
      }
      .left {
        font-size: 28rpx;
        color: #007aff;
        letter-spacing: 0;
        font-weight: 400;
      }
      .right {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 28rpx;
        color: #888888;
        letter-spacing: 0;
        font-weight: 400;
        .edit {
          padding-left: 32rpx;
        }
      }
    }
  }
  .button-area {
    width: 750rpx;
    padding: 0 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    // justify-content: space-between;
    .button {
      flex-grow: 0;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
      .text {
        font-size: 30rpx;
        font-weight: 500;
        text-align: center;
      }
    }
    .button__cancel {
      width: 270rpx;
      height: 88rpx;
      border: 2rpx solid #979797;
    }
    .button__submit {
      width: 100%;
      height: 88rpx;
      background: #007aff;
    }
  }
  .popup-box {
    width: 540rpx;
    height: 226rpx;
    background: #ffffff;
    border-radius: 14rpx;
    .tip-title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 126rpx;
      font-size: 32rpx;
      color: #333333;
      letter-spacing: 0;
      text-align: center;
      font-weight: 400;
    }
    .operation-row {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      height: 100rpx;
      background: #ffffff;
      border-top: 2rpx solid rgba(221, 221, 221, 0.5);
      .cancel-text {
        flex-grow: 1;
        flex-shrink: 1;
        font-size: 36rpx;
        color: #000000;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
      }
      .line {
        flex-grow: 0;
        flex-shrink: 0;
        width: 2rpx;
        height: 100rpx;
        border-left: 2rpx solid #dcdee3;
      }
      .confirm-text {
        flex-grow: 1;
        flex-shrink: 1;
        font-size: 36rpx;
        color: #108ee9;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
      }
    }
  }
}
</style>