uniapp 坐标转换 百度转换腾讯、uni.showModal问题解决、uniapp 列表加载、uniapp 图片上传 删除图片、发送验证码 倒计时 uniapp地图渲染标点

uniapp 坐标转换 百度转换腾讯

const lngs = ref();
	const lats = ref();
	function bMapTransgMap(lng: any, lat: any) {
		let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
		let x = lng - 0.0065;
		let y = lat - 0.006;
		let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
		let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
		lngs.value = z * Math.cos(theta);
		lats.value = z * Math.sin(theta);
	}

uniapp uni.showModal问题解决 点击取消也会执行确定问题解决

uni.showModal({
			title: "请先登录",
			content: "会员才可以发布，谢谢！",
			success: function (data) {
				if (data.cancel == true) {
					return;
				} else {
					router.push("/pages/login/indexView");
				}
			},
			fail: function (res) {}
		});

uniapp 列表加载

<u-list @scrolltolower="scrolltolower" v-if="list && list.length > 0">
		<u-list-item v-for="(item, index) in list" :key="index">
		<u-list-item v-if="status == 'nomore'">
			<view class="nomore">没有更多了</view>
		</u-list-item>
	</u-list>
	<view v-else class="null">
		<image src="@/static/images/icons/Nodata.png" alt="" />
		<p>暂无数据</p>
	</view>

const page = ref(1);
	const status = ref("loadmore");
	const list = ref([]);
	const scrolltolower = () => {
		loadmore();
	};
	const loadmore = async val => {
		if (status.value == "nomore") {
			return;
		}
		let res = null;
		// 当tab 等于0  调用的接口  和 tab不等于0调用的接口
		if (current.value == 0) {
			res = await GetHSYW(page.value, keyword.value);
		} else {
			res = await GetActivityList(val, page.value, keyword.value);
		}
		if (res.code != 10) {
			uni.showToast({
				title: "列表加载失败！",
				icon: "error"
			});
			return;
		} else {
			if (uni.getStorageSync("IsWpy") == 1) {
				res.data.list.forEach(item => {
					list.value.push(item);
				});
			} else {
				// 不是则看不到
				list.value = res.data.list;
				res.data.list
					.filter(item => item.Type != "网评员")
					.forEach(item => {
						list.value.push(item);
					});
			}
			if (list.value && list.value.length >= res.data.records) {
				// console.log(1111);
				status.value = "nomore";
				return true;
			}
			page.value += 1;
		}
	
		// if (res.list) {
		// 	res.data.forEach(el => {
		// 		list.value.push(el);
		// 	});
		// }
	};
	loadmore();

uniapp 图片上传 删除图片

<u-upload
		:fileList="fileList"
		@afterRead="afterRead"
		@delete="deleteimg"
		name="1"
		multiple
		:maxCount="3"
	></u-upload>
	// 上传图片
	const fileList = ref([]); //图片
	const imgarr = ref([]); //保存上传的图片信息
	const arr = ref([]); //保存上传的图片地址

	// 上传图片 此时可以自行将文件上传至服务器
	const afterRead = async event => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map(item => {
			fileList.value.push({
				...item,
				status: "uploading",
				message: "上传中"
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList.value[fileListLen];
			fileList.value.splice(fileListLen, 1, {
				...item,
				status: "success",
				message: "",
				url: result
			});
			fileListLen++;
		}
	};
	const uploadFilePromise = item => {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: UPLOAD_URL, // 仅为示例，非真实的接口地址
				filePath: item,
				name: "file",
				success: res => {
					setTimeout(() => {
						const result = JSON.parse(JSON.stringify(res));
						const resultData = JSON.parse(result.data);
						// imgs.value.push(resultData.data[0].filePath);
						// model1.productPhoto = imgs.value.join(',');
						resolve(resultData.url);
					}, 1000);
					arr.value.push(JSON.parse(res.data).data.url);
					imgarr.value.push(JSON.parse(res.data).data.details);
				}
			});
		});
	};
	// 删除图片
	const deleteimg = event => {
		fileList.value.splice(event.index, 1); //回显的图片
		arr.value.splice(event.index, 1); //保存的图片
		imgarr.value.splice(event.index, 1); //保存的图片信息
	};

获取微信code

// 获取微信code
function getUserInfo() {
	uni.login({
		provider: "weixin",
		success: function (arr) {
			console.log(arr.code);
			code.value = arr.code;
		}
	});
}
getUserInfo();

发送验证码 倒计时

<view class="list">
	<view class="icon">
			<image src="@/static/images/newpage/icon-code.png" alt="" />
			<div>验证码</div>
		</view>
		<div class="get-code">
			<view class="input-box">
				<u-input type="text" placeholder="请输入验证码" v-model="pwd" />
			</view>
			<view class="right-button" @click="go">
				{{ obation }}
			</view>
		</div>
	</view>

const isClicked = ref(false); //是否进行了点击获取
const obation = ref("获取验证码");
const wait = ref(60); //倒计时时间
const go = debounce(
	function () {
		let re = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
		if (num.value == "") {
			Toast("请输入手机号！");
			return;
		} else if (re.test(num.value) === false) {
			uni.showToast({
				title: "手机号格式错误！",
				icon: "none"
			});
			return;
		}
		name1();
	},
	200,
	true
);

// 倒计时
async function name1() {
	if (isClicked.value) return;
	// 发送验证码
	let res = await SendCaptcha(num.value, 1);
	if (res.code !== 10) {
		uni.showToast({
			title: res.message,
			icon: "error"
		});
	} else {
		uni.showToast({
			title: "验证码发送成功！",
			icon: "success"
		});
	}

	isClicked.value = true;
	obation.value = "重新发送(" + --wait.value + ")";
	timer = setInterval(() => {
		obation.value = "重新发送(" + --wait.value + ")";
		if (wait.value < 0) {
			isClicked.value = false;
			obation.value = "获取";
			wait.value = 60;
			clearInterval(timer);
			timer = null;
		}
	}, 1000);
}

拨打电话

 uni.makePhoneCall({
    phoneNumber: val,
    success: () => {},
    fail: () => {
      uni.showToast({
        title: "拨打失败！",
        icon: "error",
      });
    },
  });

uniapp map 地图渲染标点

  <div class="page page-bicycle">
    <map
      style="width: 100%; height: 100vh"
      :latitude="latitude"
      :longitude="longitude"
      :markers="covers"
    >
    </map>
  </div>
</template>
<script lang="ts" setup>
import { GetBicyclePositionPageList } from "@/api/neighbor";
const covers = ref<any>([]); //标记点
const latitude = ref(); //中心维度
const longitude = ref(); // 中心经度
const init = async () => {
  let res: any = await GetBicyclePositionPageList({
    pageIndex: 1,
    pageSize: 100,
  });
  console.log(res.data.list);
  res.data.list.forEach((el: any) => {
    covers.value.push({
      latitude: el.latitude,
      longitude: el.longitude,
      iconPath: getStaticImg("biaodian.png", "traffic"),
      width: 30,
      height: 36,
    });
  });
  latitude.value = covers.value[0].latitude;
  longitude.value = covers.value[0].longitude;
};
init();
</script>