TakeOutShop/userserve/useredit/useredit.vue

<template>
	<view class="main">
		<view class="list" @click="chooseImage()">
			<view class="list_l">头像</view>
			<view class="list_r list_arrow"><image class="list_img" :src="avatar" mode="widthFix"></image></view>
		</view>
		<view class="list">
			<view class="list_l">昵称</view>
			<view class="list_r">
				<input class="list_input" type="text" v-model="nickname" placeholder="请输入昵称"/>
			</view>
		</view>
		<view class="list">
			<view class="list_l">手机号</view>
			<view class="list_r">
				<input class="list_input"  type="text" v-model="phone" placeholder="请输入手机号"/>
			</view>
		</view>
		<view class="footer">
			<view class="footer_btn" @click="api_useredit()">保存</view>
		</view>
	</view>
</template>
<script setup>
import { url }  from '@/server/config.js'
import { loads } from '@/utils/index.js'
import { frontuser,useredit } from '@/server/api.js'
import { computed,ref,onMounted } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const { statusHeight,headerHeight,token } = storeToRefs(counterStore);
const user = ref(false);
const avatar = ref("")
const nickname = ref("")
const phone = ref("");
const api_frontuser = () => {
	return frontuser().then(({data})=>{
		avatar.value = data.avatar;
		nickname.value = data.nickname;
		phone.value = data.phone;
	}).catch(({message}) => {
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
//选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 1, // 最多选择1张
    sizeType: ['original', 'compressed'], // 可选择原图或压缩图
    sourceType: ['album', 'camera'], // 可从相册或相机选择
    success: (res) => {
	  api_uploadimage(res.tempFilePaths);
    },
    fail: (err) => {
      console.error('选择图片失败:', err);
    }
  });
}
//接口上传图片拿到图片url
const api_uploadimage = (tempFilePaths) =>{
  console.log('地址',url);
  loads('上传中', true)
  uni.uploadFile({
    url:url+'/api/front/user/upload/image', // 替换为你的接口地址
    filePath: tempFilePaths[0], // 图片临时路径
    name: 'multipart', // 后端接收文件的字段名
	header: {
		'Authori-zation':token.value// 身份令牌
	},
    formData: { // 附加的其他参数
      model: 'wechat',
      pid: '8'
    },
    success: (res) => {
	  uni.hideLoading()
      const data = JSON.parse(res.data); // 解析后端返回的数据
	  avatar.value = data.data.url;
    },
    fail: (err) => {
	  uni.hideLoading()
      console.error('上传失败:', err);
    }
  })
}
const api_useredit = () => {
	const params = {
		avatar:avatar.value,
		nickname:nickname.value,
		phone:phone.value
	}
	loads('', true)
	return useredit(params).then(({message})=>{
		uni.hideLoading();
		uni.showToast({
			title:message,
			icon:'success',
			success: () => {
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1400)
			}
		})
	}).catch(({message}) => {
		uni.hideLoading();
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
//生命周期钩子
onMounted(() => {
	api_frontuser();
});
onLoad((options) => {
	
});
</script>

<style lang="scss">
	page{
		background-color: #f6f6f6;
	}
	.main{
		margin: 20rpx 0 0 0;
		background-color: #FFFFFF;
		.list{
			margin: 0 20rpx 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #f6f6f6;
			padding-top: 15rpx;
			padding-bottom: 15rpx;
			.list_l{
				font-size: 28rpx;
				color: #333333;
				height: 100%;
				display: flex;
				align-items: center;
			}
			.list_r{
				.list_img{
					width: 130rpx;
					height: 130rpx;
					background-color: #f6f6f6;
					border-radius: 80rpx;
					display: block;
				}
				.list_input{
					width: 200rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					text-align: right;
				}
			}
			.list_arrow{
				margin-right: 20rpx;
				position: relative;
			}
			.list_arrow::after{
				content: "";
				position: absolute;
				top: 50%;
				left: 100%;
				transform: translate3d(0,-50%,0) rotate(45deg);
				width: 20rpx;
				height: 20rpx;
				border-top: 3rpx solid #999999;
				border-right: 3rpx solid #999999;
				border-top-width: 1px;
				border-top-style: solid;
				border-top-color: rgb(153, 153, 153);
				border-right-width: 1px;
				border-right-style: solid;
				border-right-color: rgb(153, 153, 153);
			}
		}
		.footer {
		    position: fixed;
		    left: 0;
		    right: 0;
		    bottom: 0;
		    z-index: 160;
		    background: #FFFFFF;
		    font-size: 30rpx;
		    padding-bottom: env(safe-area-inset-bottom);
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    padding-top: 20rpx;
		    padding-left: 20rpx;
		    padding-right: 20rpx;
		    border-top: 1rpx solid #efefef;
			.footer_btn {
			    width: 100%;
			    height: 85rpx;
			    background-color: #fd3f3f;
			    border-radius: 50rpx;
			    color: #fff;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    font-weight: 500;
			    font-size: 28rpx;
			}
		}
	}
</style>