product-uniapp/pages/index/mine.vue

<template>
  <view class="mine-page">
    <!-- 顶部渐变背景 -->
	<uni-nav-bar leftText=" " :fixed="true" :border="false"  @clickLeft="leftClick" color="#000000" backgroundColor="#3BC8BE" :statusBar="true" title="我的"></uni-nav-bar>
	
    <view class="header">
      <view class="profile-card">
        <view class="profile-main">
          <image class="avatar" @click="changinfo" :src="userinfo.avatar_pull" mode="aspectFill" />
          <view class="info" v-if="!is_login">
            <text class="name">请点击登录</text>
            <text class="sub">注册/登录即可发布信息</text>
          </view>
		  <view v-else class="info" @click="changinfo">{{userinfo.nickname}}</view>
		  <button v-if="!is_login" class="login-btn" open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber">立即登录</button>
        </view>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="menu-card">
      <view class="menu-item" @click="navTo('/pages/mine/my_newmsg')">
        <image src="/static/image/mine/xinxi.png" mode="" class="menu-icon"></image>
        <view class="menu-text">我的信息</view>
      </view>
	  <view class="menu-item" @click="navTo('/pages/mine/my_release')">
	    <image src="/static/image/mine/shoucang.png" mode="" class="menu-icon"></image>
	    <view class="menu-text">我的收藏</view>
	  </view>
	  <view class="menu-item" @click="navTo('/pages/mine/my_favorites')">
	    <image src="/static/image/mine/fabu.png" mode="" class="menu-icon"></image>
	    <view class="menu-text">我的发布</view>
	  </view>
	  <view class="menu-item" @click="navTo('/pages/mine/my_reply')">
	    <image src="/static/image/mine/huifu.png" mode="" class="menu-icon"></image>
	    <view class="menu-text">我的回复</view>
	  </view>
    </view>
	<u-popup :show="show"  :closeOnClickOverlay="false"  :round="20" mode="center">
		<view class="popupcontent">
			<image class="log1" src="/static/image/log1.png"></image>
			<view class="title">{{$t('home.loginmsg')}}</view>
			<view class="yhxy">
				<checkbox-group name="" style="width: 28px;display: inline-block;">
					<label @tap="selfChangde()">
						<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B" style="transform:scale(0.7);border-radius: 50%"/>
					</label>
				</checkbox-group>
				{{$t('home.argin')}}<text class="xy" @click="gouser">{{$t('home.UserAgreement')}}</text>{{$t('home.and')}}<text class="xy"  @click="goprivacy">{{$t('home.Privacy')}}</text>
			</view>
		</view>
		<view class="cent">
			<button class="btn1" @click="show = !show">{{$t('cancel')}}</button>
			<button v-if="selfChecked" class="btn" open-type="getPhoneNumber" @click="show = !show" @getphonenumber="getPhoneNumber">{{$t('login')}}</button>
			<button v-else class="btn" @click="loginbtn">{{$t('login')}}</button>
		</view>
	</u-popup>
  </view>
</template>

<script>
import { request,showToast } from '@/api/apiT.js'
export default {
  data() {
    return {
		userinfo:'',
		selfChecked: false,
		is_login:uni.getStorageSync('is_login'),
		show: false
    }
  },
  onShow() {
  	this.getinfo()
  },
  methods: {
    onLogin() {
      uni.showToast({ title: '请登录', icon: 'none' })
    },
    navTo(url) {
    	if(uni.getStorageSync('is_login')){
    		uni.navigateTo({
    			url: url
    		});
    	}else{
    		this.show = true
    	}
    },
	goprivacy(){
		uni.navigateTo({
			url: '/pages/login/agreement',// 替换为你要跳转的页面路径
		});
	},
	gouser(){
		uni.navigateTo({
			url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
		});
	},
	changinfo(){
		if(uni.getStorageSync('is_login')){
			uni.navigateTo({
				url: '/pages/mine/changinfo'
			});
		}else{
			this.show = true
		}
		
	},
	getinfo(){
		request({
			url:'common/user/info',
			method:'POST',
		}).then(res => {
			this.userinfo=res.data.data.user
		})
	},
	selfChangde(e) {
		this.selfChecked = !this.selfChecked;
	},
	loginbtn(){
		if(!this.selfChecked){
			uni.showToast({
				title:this.$t('home.arginimg'),
				icon: 'none'
			});
			return false
		}
	},
	getPhoneNumber(e) {
	    let that = this;
		request({
			url:'miniapp/phone',
			method:'POST',
			data:{
				phone_code: e.detail.code,
			}
		}).then(res => {
			if (res.data.code == -1) {
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
				
			} else if (res.data.code == 200) {
				//返回数据接收成功
				uni.showToast({
					title:this.$t('messagesucc'),
					icon: 'none'
				});
				uni.setStorageSync('is_login', true);
				setTimeout(function () {
					uni.reLaunch({
						url: '/pages/index/mine',// 替换为你要跳转的页面路径
					});
				}, 2000);
				
			}
		})
	},
  }
}
</script>

<style lang="scss">
.mine-page {
  min-height: 100vh;
  background-image: url(/static/image/mine/minebg.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.header {
  background-image: url(data:image/png;base64,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
  background-repeat: no-repeat;
  background-size: 100%;
  height: 312rpx;
  margin: 0px 30rpx;
}

.title {
  color: #0d534e;
  font-size: 34rpx;
  font-weight: 600;
  text-align: center;
  margin-bottom: 32rpx;
}

.profile-card {
  position: relative;
  // background: #eaf7f6;
  border-radius: 16rpx;
  padding: 24rpx;
  overflow: hidden;
}

.profile-main {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  background: #fff;
}

.info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 30rpx;
  color: #0d534e;
  font-weight: 600;
}

.sub {
  font-size: 24rpx;
  color: #83a9a3;
  margin-top: 6rpx;
}

.login-btn {
  padding: 0rpx 28rpx;
  background: #fff;
  border-radius: 24rpx;
  color: #0d534e;
  font-size: 24rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
}

.watermark {
  position: absolute;
  bottom: 12rpx;
  left: 24rpx;
  font-size: 64rpx;
  letter-spacing: 6rpx;
  color: rgba(13, 83, 78, 0.08);
  font-weight: 700;
  z-index: 1;
}

.menu-card {
  margin: 64rpx 24rpx 0;
  background: rgb(59 200 190 / 0.1);
  border-radius: 16rpx;
  padding: 40rpx 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}

.menu-icon {
  width: 56rpx;
  height: 56rpx;
}

.menu-text {
  font-size: 24rpx;
  color: #333;
}
.popupcontent{
	background-size: 100% 100%;
	padding: 26px 15px;
	text-align: center;
	background-repeat: no-repeat;
	.title{
		color: #333333;
		font-size: 15px;
		margin-bottom: 15px;
	}
}
.log1{
	width: 180px;
	height: 180px;
}
.yhxy{
	color: #999999;
	font-size: 12px;
	margin-bottom: 5px;
	.xy{
		color: #05b3a8;
	}
}
.qxbtn{
	width: 99%;
}
.cent{
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 0px 10px 20px;
	.btn1{
		background-color: #fff;
		border: 1px solid #05b3a8;
		color: #05b3a8;
		border-radius: 50px;
		width: 46%;
		margin: 10px 0px 20px;
		height: 50px;
		line-height: 50px;
	}
	.btn{
		background-color: #05b3a8;
		color: white;
		border-radius: 50px;
		width: 46%;
		margin: 10px 0px 20px;
		height: 50px;
		line-height: 50px;
	}
}
</style>