uniProject/pages/admin/Jiazheng/common/share copy.vue

<template>

</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/path/to/your/image.jpg' // 后端提供的图片地址
    };
  },
  methods: {
    // 显示分享菜单
    showShareMenu() {
      uni.showActionSheet({
        itemList: ['下载图片'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.downloadImage(); // 点击“下载图片”
          }
        }
      });
    },

    // 下载图片
    downloadImage() {
      // #ifdef H5
      this.downloadImageForH5();
      // #endif

      // #ifdef APP-PLUS
      this.downloadImageForApp();
      // #endif
    },

    // H5 环境下载图片
    downloadImageForH5() {
      // 创建一个隐藏的 <a> 标签
      const link = document.createElement('a');
      link.href = this.imageUrl;
      link.download = 'image.jpg'; // 设置下载文件名
      document.body.appendChild(link);
      link.click(); // 触发下载
      document.body.removeChild(link);

      // 提示用户手动保存
      uni.showToast({
        title: '图片已下载，请手动保存到相册。',
        icon: 'none'
      });
    },

    // APP 环境下载图片
    downloadImageForApp() {
      uni.showLoading({
        title: '下载中...',
        mask: true
      });

      // 下载图片
      uni.downloadFile({
        url: this.imageUrl, // 图片地址
        success: (res) => {
          if (res.statusCode === 200) {
            const tempFilePath = res.tempFilePath; // 下载后的临时文件路径
            this.saveImageToAlbum(tempFilePath); // 保存到相册
          } else {
            uni.showToast({
              title: '下载失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('下载失败:', err);
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },

    // 保存图片到相册（APP 环境）
    saveImageToAlbum(tempFilePath) {
      // 检查权限（仅 Android 需要）
      // #ifdef APP-PLUS
      if (uni.getSystemInfoSync().platform === 'android') {
        uni.authorize({
          scope: 'scope.writePhotosAlbum',
          success: () => {
            this.saveImage(tempFilePath);
          },
          fail: () => {
            // 无权限，提示用户去设置
            uni.showModal({
              title: '提示',
              content: '需要相册权限才能保存图片，是否去设置？',
              success: (res) => {
                if (res.confirm) {
                  uni.openSetting(); // 打开设置页面
                }
              }
            });
          }
        });
      } else {
        this.saveImage(tempFilePath);
      }
      // #endif
    },
    saveImage(tempFilePath) {
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: () => {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('保存失败:', err);
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style>
button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007AFF;
  color: white;
  border-radius: 5px;
}
</style>





<template>
  <view class="map-popup-box">
    <view class="icon-title-navBar-box">
      <view @click="goUpPage" class="nav-bar-icon"></view>
      <text class="nav-bar-title">选择地址</text>
    </view>
    <!-- 城市选择器 -->
    <view class="city-picker-box">
      <picker mode="region" @change="handleCityChange">
        <view class="city-picker">
          <text>{{ selectedCity }}</text>
          <uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
        </view>
      </picker>
    </view>
    <!-- 查询地址 -->
    <view class="phone-search-box">
      <input class="search-input" placeholder="请输入地址" v-model="data.keyword" />
      <view class="search-icon" @click="handleClick">
        <uni-icons type="search" size="24" color="#fff"></uni-icons>
      </view>
    </view>
    <map style="width: 100%; height: 300px;" :latitude="data.latitude" :longitude="data.longitude"
      :markers="data.covers" :show-location="true"> </map>
    <!-- 搜索结果 -->
    <view v-if="result" class="map-card-list">
      <view v-for="(item,index) in result.data" :key="index" @click="xuanzeAdress(item)" class="map-card-box">
        <view>
          <view class="map-card-title"><text v-if="index==0" class="dqwz-text">当前位置</text>{{item.title}}</view>
          <view class="map-card-address">{{item.address}}</view>
        </view>
        <icon class="map-active-icon" v-if="index==0"></icon>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { reactive, ref } from "vue";
  import myIcon from "@/static/images/common/markIcon.png";
  import { onLoad } from "@dcloudio/uni-app";
  import { useCustomMap } from "@/components/customMap/useMap.js";

  const emits = defineEmits(['close', 'xuanzeAdress', 'currentWeizhi']);
  const { getPositionSearchByKeyword } = useCustomMap();

  const result = ref(null);
  const selectedCity = ref('选择城市'); // 默认显示“选择城市”

  const data = reactive({
    keyword: '', // 关键字
    latitude: 0, // 纬度
    longitude: 0, // 经度
    covers: [{ latitude: 0, longitude: 0, iconPath: myIcon, width: 30, height: 30 }]
  });

  // 城市选择事件
  function handleCityChange(e) {
    const city = e.detail.value[1]; // 获取选择的城市
    selectedCity.value = city;
    updateMapCenter(city);
  }

  // 更新地图中心点
  async function updateMapCenter(city) {
    const cityLocation = await getCityLocation(city);
    if (cityLocation) {
      data.latitude = cityLocation.lat;
      data.longitude = cityLocation.lng;
      data.covers[0].latitude = cityLocation.lat;
      data.covers[0].longitude = cityLocation.lng;
      // 重新搜索附近的地点
      getPositionSearchByKeyword(data.keyword || '公司', `nearby(${cityLocation.lat},${cityLocation.lng},1000)`, onSuccess, onError, {
        page: 1,
        size: 3,
      });
    }
  }

  // 获取城市经纬度
  async function getCityLocation(city) {
    const url = `https://apis.map.qq.com/ws/geocoder/v1/?address=${city}&key=${Key}`;
    try {
      const res = await uni.request({ url });
      if (res.data && res.data.result && res.data.result.location) {
        return res.data.result.location; // 返回经纬度对象 { lat, lng }
      }
    } catch (err) {
      console.error('获取城市位置失败', err);
    }
    return null;
  }

  // 其他代码保持不变...
</script>

<style>
  .city-picker-box {
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }

  .city-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .city-picker text {
    font-size: 16px;
    color: #333;
  }
</style>