purchase-let/components/shopListPopup.vue

<template>
  <up-popup :show="show" closeable round="10" @close="close">
    <view class="address-popup">
      <view class="head-title">提货点</view>
      <view class="list-admin">
        <up-search placeholder="请输入提货点名称" @search="searchKeyword" v-model="keyword" @custom="searchKeyword"></up-search>
      </view>
      <scroll-view style="height: 600rpx;padding-bottom: 20rpx;" scroll-y>
        <view class="list-li border" v-for="(item,index) in list" :key="index" @click="addressType=item.mer_id">
          <view class="list-li-top">
            <view class="">
              <text>{{item.mer_name}}</text>
              <text v-if="index==0&&item.distance"
                style="background-color: #38BE41;color: white;font-size: 18rpx;margin-left: 24rpx;padding: 0 5rpx;">距离最近</text>
              <text v-if="item.distance" class="distance">步行{{item.distance}}</text>
            </view>
          </view>
          <view class="">
            {{item.mer_address||''}}
          </view>
          <view style="color: #999;">
            <text v-if="item.service_phone" @click.stop="onCall(item.service_phone)">{{item.mer_real_name||''}}
              {{ item.service_phone||'' }}</text>
          </view>
          <view class="check">
            <image style="width: 36rpx;height: 36rpx" v-if="addressType==item.mer_id" src="@/static/icon/check.png">
            </image>
            <image style="width: 36rpx;height: 36rpx" v-else src="@/static/icon/n-check.png"></image>
          </view>
        </view>
      </scroll-view>
      <up-button color="#20B128" shape="circle" @click="submitAddress">确认提货点 </up-button>
    </view>
    <!-- <modal title="是否要拨打电话" :content="`即将拨打电话${phone}`" cancleText="取消" confirmText="拨打" :show="callShow" @close="callShow = false"
      @change="onCall" /> -->
  </up-popup>
</template>

<script setup>
  import {
    ref
  } from "vue";
  import modal from "@/components/modal.vue";

  const addressType = ref(-1)
  // const callShow = ref(false)
  // const phone = ref('');
  // const mer_real_name = (e) => {
  //   callShow.value = true;
  //   phone.value = e;
  // }
  const onCall = (e) => {
    uni.makePhoneCall({
      phoneNumber: e,
      success() {
        callShow.value = false
      }
    })
  }

  const props = defineProps({
    show: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    },
  })

  const emit = defineEmits(['close', 'change', 'search']);
  const close = () => {
    emit('close');
  }

  const submitAddress = () => {
    let e = props.list.find(item => item.mer_id == addressType.value);
    if (addressType.value <= 0 || !e) return uni.$u.toast('请选择提货点');
    emit('change', e);
  }

  const keyword = ref('')
  const searchKeyword = () => {
    emit('search', keyword.value);
  }

  const navTo = (url) => {
    uni.navigateTo({
      url: url
    })
  }

  const setCheck = (e) => {
    addressType.value = e;
  }
  defineExpose({
    setCheck
  })
</script>

<style scoped lang="scss">
  .address-popup {
    padding: 30rpx;

    .head-title {
      font-weight: bold;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .list-admin {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .admin-btn {
        display: flex;
        color: #20B128;

        .btn {
          margin-left: 20rpx;
          display: flex;
          align-items: center;

          &:active {
            color: rgba(#20B128, 0.8);
            transition: background-color 0.5s;
            animation: disappear 0.5s 0.5s forwards;
          }
        }
      }
    }

    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f6f6f6;
      margin-bottom: 20rpx;

      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      .content {
        .top {
          display: flex;

          view {
            margin-right: 20rpx;
          }
        }

        .bottom {}
      }

      image {
        width: 40rpx;
        height: 40rpx;
        flex-shrink: 0;
      }
    }
  }

  .border {
    border-bottom: 1px solid #F3F3F3;
  }

  .list-li {
    padding: 30rpx 0;
    font-size: 24rpx;
    position: relative;

    .list-li-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
      font-size: 30rpx;
    }

    .distance {
      border: 1px solid #40AE36;
      font-size: 18rpx;
      color: #40AE36;
      margin-left: 20rpx;
      padding: 0 5rpx;
    }

    .check {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  @keyframes disappear {
    to {
      opacity: 0;
      /* 渐隐 */
      transform: scale(0);
      /* 缩小 */
    }
  }
</style>