first commit
This commit is contained in:
PC-202306242200\Administrator
522
pages/mine/mine.vue
Normal file
522
pages/mine/mine.vue
Normal file
@@ -0,0 +1,522 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<image src="/static/mineBanner.png" style="width: 750rpx; height: 762rpx; position: fixed; top: 0; left: 0; z-index: -1"></image>
|
||||
|
||||
<wd-navbar :bordered="false" custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>
|
||||
|
||||
<view class="p30">
|
||||
<!-- 用户信息头部 -->
|
||||
<view class="user-header">
|
||||
<image class="avatar" :src="userInfo.avatar"></image>
|
||||
<view class="user-info">
|
||||
<view class="username">{{ userInfo.nickname || '微信用户' }}</view>
|
||||
<view class="phone">{{ userInfo.mobile }}</view>
|
||||
</view>
|
||||
<view class="invite-code" v-if="userInfo.inviteCodeImg" @click="$refs.popup.open()">
|
||||
<image style="width: 38rpx; height: 38rpx" src="/static/icons/code.png"></image>
|
||||
<text>邀请码</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠提示栏 -->
|
||||
<view class="promo-bar">
|
||||
<text>购买权益包至高享2.5折优惠</text>
|
||||
<view class="go-shop" @click="navTo('/pages/equity/equity', true)">
|
||||
<text>去下单</text>
|
||||
<image src="/static/icons/youh.png" style="width: 26rpx; height: 26rpx"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的钱包 -->
|
||||
<view class="wallet-section" @click="navTo('/pages/wallet/wallet', true)">
|
||||
<view class="section-title">
|
||||
<text>我的钱包</text>
|
||||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||||
</view>
|
||||
|
||||
<view class="wallet-cards">
|
||||
<view class="wallet-item">
|
||||
<text class="amount red">{{ userInfo.money || 0 }}</text>
|
||||
<text class="label">余额</text>
|
||||
<text class="desc">包含奖励</text>
|
||||
</view>
|
||||
<view class="wallet-item">
|
||||
<text class="amount">{{ userInfo.performanceReward || 0 }}</text>
|
||||
<text class="label">业绩奖励</text>
|
||||
<text class="desc">售出分成</text>
|
||||
</view>
|
||||
<view class="wallet-item">
|
||||
<text class="amount">{{ userInfo.directReferralReward || 0 }}</text>
|
||||
<text class="label">直推奖励</text>
|
||||
</view>
|
||||
<view class="wallet-item">
|
||||
<text class="amount">{{ userInfo.indirectReferralReward || 0 }}</text>
|
||||
<text class="label">间推奖励</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的订单 -->
|
||||
<!-- <view class="order-section">
|
||||
<view class="section-title">
|
||||
<text>我的订单</text>
|
||||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||||
</view>
|
||||
|
||||
<view class="order-types">
|
||||
<view class="order-type">
|
||||
<image src="/static/icons/wait-pay.png"></image>
|
||||
<text>待付款</text>
|
||||
</view>
|
||||
<view class="order-type">
|
||||
<image src="/static/icons/pre-order.png"></image>
|
||||
<text>已预定</text>
|
||||
</view>
|
||||
<view class="order-type">
|
||||
<image src="/static/icons/finished.png"></image>
|
||||
<text>已完成</text>
|
||||
</view>
|
||||
<view class="order-type">
|
||||
<image src="/static/icons/cancelled.png"></image>
|
||||
<text>已取消</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 功能列表 -->
|
||||
<view class="function-list">
|
||||
<view class="function-item" @click="navTo('/pages/mine/sett', true)">
|
||||
<image src="/static/icons/info.png"></image>
|
||||
<text>个人信息</text>
|
||||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||||
</view>
|
||||
<view class="function-item" @click="navTo('/pages/wallet/list', true)">
|
||||
<image src="/static/icons/money.png"></image>
|
||||
<text>我的账单</text>
|
||||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||||
</view>
|
||||
|
||||
<view class="function-item" @click="navTo('/pages/team/team', true)">
|
||||
<image src="/static/icons/tj.png"></image>
|
||||
<text>我的团队</text>
|
||||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||||
</view>
|
||||
<view class="function-item" @click="navTo('/pages/address/list', true)">
|
||||
<image src="/static/icons/address.png"></image>
|
||||
<text>地址管理</text>
|
||||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||||
</view>
|
||||
<!-- <view class="function-item">
|
||||
<image src="/static/icons/tjr.png"></image>
|
||||
<text>推荐人</text>
|
||||
<text class="info">{{ userInfo.puser ? `${userInfo.puser.nickname} ${userInfo.puser.mobile}` : '无' }}</text>
|
||||
</view> -->
|
||||
<button class="function-item" open-type="contact">
|
||||
<image src="/static/icons/kf.png"></image>
|
||||
<text>联系客服</text>
|
||||
<image src="/static/y.png" style="width: 34rpx; height: 34rpx"></image>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="popup" type="center" border-radius="16rpx">
|
||||
<view class="shareBlock">
|
||||
<view style="width: 100%; text-align: right"><image @click="$refs.popup.close()" src="/static/icons/cha.png" class="shareBlock_close"></image></view>
|
||||
<image class="shareBlock_code" :src="userInfo.inviteCodeImg"></image>
|
||||
<view class="shareBlock_info">打开微信扫描二维码，注册时输入邀请码</view>
|
||||
<view class="shareBlock_codeInfo">
|
||||
<view class="shareBlock_codeInfo_left">
|
||||
邀请码：
|
||||
<text style="text-decoration: underline">{{ userInfo.inviteCode }}</text>
|
||||
</view>
|
||||
<view class="shareBlock_codeInfo_right" @click="copy(userInfo.inviteCode)">点击复制</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import { lookImg,copy } from '@/utils/fun.js';
|
||||
|
||||
import { Store } from '@/store';
|
||||
|
||||
import { useNav } from '@/hooks/useNav';
|
||||
const { navTo } = useNav();
|
||||
const store = Store();
|
||||
|
||||
const userInfo = computed(
|
||||
() =>
|
||||
store.userInfo || {
|
||||
inviteCode: '',
|
||||
nickname: '',
|
||||
mobile: '',
|
||||
avatar: '',
|
||||
paywallet: {
|
||||
balance: 0
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onShow(async () => {
|
||||
await store.usersGetInfo();
|
||||
});
|
||||
// export default {
|
||||
// data() {
|
||||
// return {
|
||||
// userInfo: {
|
||||
// nickname: '九天应援雷声普化天尊',
|
||||
// phone: '1863****301'
|
||||
// },
|
||||
// wallet: {
|
||||
// balance: '23万',
|
||||
// performanceReward: '98456',
|
||||
// directReward: '68230',
|
||||
// indirectReward: '63314'
|
||||
// },
|
||||
// orderTypes: [
|
||||
// { type: 'waitPay', name: '待付款' },
|
||||
// { type: 'preOrder', name: '已预定' },
|
||||
// { type: 'finished', name: '已完成' },
|
||||
// { type: 'cancelled', name: '已取消' }
|
||||
// ],
|
||||
// functions: [
|
||||
// { name: '我的账单', icon: 'bill' },
|
||||
// { name: '我的推荐', icon: 'recommend' },
|
||||
// { name: '联系客服', icon: 'service' },
|
||||
// { name: '推荐人', info: '北极**大帝 1863****301', icon: 'referrer' },
|
||||
// { name: '个人信息', icon: 'profile' }
|
||||
// ]
|
||||
// };
|
||||
// },
|
||||
// onLoad() {
|
||||
// // 页面加载时执行的逻辑
|
||||
// },
|
||||
// methods: {
|
||||
// // 点击钱包项目
|
||||
// onWalletItemTap(e) {
|
||||
// const { index } = e.currentTarget.dataset;
|
||||
// const items = ['余额', '业绩奖励', '直推奖励', '间推奖励'];
|
||||
// uni.showToast({
|
||||
// title: `查看${items[index]}详情`,
|
||||
// icon: 'none'
|
||||
// });
|
||||
// },
|
||||
|
||||
// // 点击订单类型
|
||||
// onOrderTypeTap(e) {
|
||||
// const { index } = e.currentTarget.dataset;
|
||||
// const types = ['待付款', '已预定', '已完成', '已取消'];
|
||||
// uni.showToast({
|
||||
// title: `查看${types[index]}订单`,
|
||||
// icon: 'none'
|
||||
// });
|
||||
// },
|
||||
|
||||
// // 点击功能项
|
||||
// onFunctionTap(e) {
|
||||
// const { index } = e.currentTarget.dataset;
|
||||
// const names = ['我的账单', '我的推荐', '联系客服', '推荐人', '个人信息'];
|
||||
// uni.showToast({
|
||||
// title: `进入${names[index]}页面`,
|
||||
// icon: 'none'
|
||||
// });
|
||||
// },
|
||||
|
||||
// // 进入个人中心
|
||||
// goToProfile() {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/profile/index'
|
||||
// });
|
||||
// },
|
||||
|
||||
// // 查看邀请码
|
||||
// viewInviteCode() {
|
||||
// uni.showModal({
|
||||
// title: '邀请码',
|
||||
// content: '您的邀请码：123456',
|
||||
// showCancel: false
|
||||
// });
|
||||
// },
|
||||
|
||||
// // 去下单
|
||||
// goToOrder() {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/order/index'
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
|
||||
}
|
||||
|
||||
/* 用户信息头部 */
|
||||
.user-header {
|
||||
background-size: cover;
|
||||
padding: 40rpx 30rpx 60rpx;
|
||||
display: flex;
|
||||
/* align-items: center; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 152rpx;
|
||||
height: 152rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
z-index: 1;
|
||||
height: 152rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.invite-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.invite-code text {
|
||||
font-size: 24rpx;
|
||||
color: #232323;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.qrcode-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: 6rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 优惠提示栏 */
|
||||
.promo-bar {
|
||||
width: 638rpx;
|
||||
height: 70rpx;
|
||||
background: #799675;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
padding: 0 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #ffff94;
|
||||
}
|
||||
|
||||
.go-shop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 钱包区域 */
|
||||
.wallet-section {
|
||||
background-color: white;
|
||||
margin: 0rpx 0 20rpx;
|
||||
padding: 30rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 0 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.wallet-cards {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.wallet-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
/* 订单区域 */
|
||||
.order-section {
|
||||
background-color: white;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 30rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.order-types {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.order-type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.order-type image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.order-type text {
|
||||
font-size: 26rpx;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
/* 功能列表 */
|
||||
.function-list {
|
||||
background-color: white;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f7f7f7;
|
||||
}
|
||||
|
||||
.function-item image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.function-item text {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #232323 !important;
|
||||
font-weight: 500 !important;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
button {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
button::after {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
.shareBlock {
|
||||
margin: auto;
|
||||
width: 650rpx;
|
||||
height: 688rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&_close {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
&_code {
|
||||
width: 392rpx;
|
||||
height: 392rpx;
|
||||
}
|
||||
&_info {
|
||||
font-size: 24rpx;
|
||||
color: #cccccc;
|
||||
margin: 24rpx 0;
|
||||
}
|
||||
&_codeInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&_left {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #232323;
|
||||
}
|
||||
&_right {
|
||||
margin-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
246
pages/mine/mobile.vue
Normal file
246
pages/mine/mobile.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 旧手机号输入区 -->
|
||||
<view class="form-group">
|
||||
<text class="label">旧手机号：</text>
|
||||
<input class="input" type="number" placeholder="请输入旧手机号" disabled :value="userInfo.mobile" maxlength="11" />
|
||||
</view>
|
||||
|
||||
<!-- 短信验证码区 -->
|
||||
<view class="form-group code-group">
|
||||
<text class="label">短信验证码：</text>
|
||||
<input class="input" type="number" placeholder="请输入短信验证码" v-model="formData.oldCode" maxlength="6" />
|
||||
<view class="code-btn" @click="getCode1">{{ current1.seconds || codeIngo1 }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 新手机号输入区 -->
|
||||
<view class="form-group">
|
||||
<text class="label">新手机号：</text>
|
||||
<input class="input" type="number" placeholder="请输入新手机号" v-model="formData.mobile" maxlength="11" />
|
||||
</view>
|
||||
|
||||
<!-- 短信验证码区 -->
|
||||
<view class="form-group code-group">
|
||||
<text class="label">短信验证码：</text>
|
||||
<input class="input" type="number" placeholder="请输入短信验证码" v-model="formData.code" maxlength="6" />
|
||||
<view class="code-btn" @click="getCode2">{{ current2.seconds || codeIngo2 }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 确定按钮 -->
|
||||
<button class="confirm-btn" @click="handleSubmit">确定</button>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<view class="tips">
|
||||
<text class="tips-title">温馨提醒：</text>
|
||||
<text class="tips-item">1. 一个手机号只能作为一个账户的登录名；</text>
|
||||
<text class="tips-item">2. 手机号修改成功后，原手机号将不支持登录。</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { toast } from '@/utils/fun.js';
|
||||
import { useCountDown } from '@/uni_modules/wot-design-uni';
|
||||
import api from '@/api/index';
|
||||
import { Store } from '@/store';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
const store = Store();
|
||||
|
||||
|
||||
|
||||
|
||||
const userInfo = computed(
|
||||
() =>
|
||||
store.userInfo || {
|
||||
inviteCode: '',
|
||||
nickname: '',
|
||||
mobile: '',
|
||||
avatar: '',
|
||||
paywallet: {
|
||||
balance: 0
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onShow(async () => {
|
||||
await store.usersGetInfo();
|
||||
});
|
||||
|
||||
const codeIngo1 = ref('获取验证码');
|
||||
const codeIngo2 = ref('获取验证码');
|
||||
|
||||
const formData = ref({
|
||||
code: '',
|
||||
mobile: '',
|
||||
oldCode: ''
|
||||
});
|
||||
|
||||
const {
|
||||
start: start1,
|
||||
pause: pause1,
|
||||
reset: reset1,
|
||||
current: current1
|
||||
} = useCountDown({
|
||||
time: 60 * 1000,
|
||||
onChange(current) {},
|
||||
onFinish() {
|
||||
codeIngo1.value = '重新发送';
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
start: start2,
|
||||
pause: pause2,
|
||||
reset: reset2,
|
||||
current: current2
|
||||
} = useCountDown({
|
||||
time: 60 * 1000,
|
||||
onChange(current) {},
|
||||
onFinish() {
|
||||
codeIngo2.value = '重新发送';
|
||||
}
|
||||
});
|
||||
|
||||
// 获取验证码方法
|
||||
const getCode1 = (e) => {
|
||||
if (!userInfo.value.mobile) {
|
||||
toast('请输入旧手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
if (current1.value.seconds) {
|
||||
toast('请等待倒计时结束');
|
||||
return;
|
||||
}
|
||||
|
||||
api.smsCode({
|
||||
mobile: userInfo.value.mobile,
|
||||
scene: 2
|
||||
})
|
||||
.then((res) => {
|
||||
start1();
|
||||
toast('验证码发送成功');
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
toast('验证码发送失败');
|
||||
});
|
||||
};
|
||||
|
||||
// 获取验证码方法
|
||||
const getCode2 = (e) => {
|
||||
if (!formData.value.mobile) {
|
||||
toast('请输入旧手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
if (current2.value.seconds) {
|
||||
toast('请等待倒计时结束');
|
||||
return;
|
||||
}
|
||||
|
||||
api.smsCode({
|
||||
mobile: formData.value.mobile,
|
||||
scene: 2
|
||||
})
|
||||
.then((res) => {
|
||||
start2();
|
||||
toast('验证码发送成功');
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
toast('验证码发送失败');
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
api.updateMobile(formData.value).then((res) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '修改成功',
|
||||
showCancel: false,
|
||||
success: async () => {
|
||||
await store.usersGetInfo();
|
||||
uni.navigateBack();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 表单组通用样式 */
|
||||
.form-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
width: 180rpx; /* 固定标签宽度，保证输入框对齐 */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-bottom: 1px solid #eee; /* 底部下划线 */
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 验证码按钮组 */
|
||||
.code-group {
|
||||
justify-content: space-between; /* 输入框与按钮左右分布 */
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
width: 175rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
color: #5d7a4e;
|
||||
border: 1rpx solid #5d7a4e;
|
||||
text-align: center;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
|
||||
/* 确定按钮 */
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
background-color: #5d7a4e; /* 深绿 */
|
||||
border-radius: 10rpx;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
/* 温馨提示 */
|
||||
.tips {
|
||||
margin-top: 60rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
274
pages/mine/sett.vue
Normal file
274
pages/mine/sett.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 返回按钮 -->
|
||||
<wd-navbar :bordered="false" left-arrow custom-style="background-color: transparent !important;" title="个人信息" safeAreaInsetTop @click-left="back"></wd-navbar>
|
||||
<image src="/static/settbie.png" style="width: 750rpx; height: 690rpx; position: absolute; top: 0; left: 0; z-index: -1" mode="widthFix"></image>
|
||||
|
||||
<view style="padding: 30rpx">
|
||||
<!-- 卡片 -->
|
||||
<view class="card">
|
||||
<!-- 头像行 -->
|
||||
<view class="avatar-row">
|
||||
<text class="label">头像</text>
|
||||
<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
|
||||
<view class="avatar-uploader">
|
||||
<image v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar-image"></image>
|
||||
<view v-else class="avatar-placeholder">
|
||||
<image src="/static/icon/icon_img.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 昵称 -->
|
||||
<view class="form-row" @click="prompt">
|
||||
<text class="label required">账户名称</text>
|
||||
<view class="form-row-right" style="font-size: 28rpx">
|
||||
<view>{{ userInfo.nickname || '微信用户' }}</view>
|
||||
<image src="/static/y.png" style="opacity: 0.5; width: 30rpx; height: 30rpx" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 手机号 -->
|
||||
<view class="form-row" @click="toPhone">
|
||||
<text class="label required">手机号</text>
|
||||
<view class="form-row-right" style="font-size: 28rpx">
|
||||
<view>{{ userInfo.mobile }}</view>
|
||||
<image src="/static/y.png" style="opacity: 0.5; width: 30rpx; height: 30rpx" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 等级 -->
|
||||
<view class="form-row">
|
||||
<text class="label required">等级</text>
|
||||
<view style="font-size: 28rpx" v-if="userInfo.userRights">{{userInfo.userRights.rights.rightsName}}</view>
|
||||
<view style="font-size: 28rpx" v-else>-</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<view class="save-btn" @click="logout">退出登录</view>
|
||||
</view>
|
||||
|
||||
<!-- prompt -->
|
||||
<wd-message-box />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import api from '@/api/index';
|
||||
import { uploadFiles } from '@/utils/fun.js';
|
||||
import { Store } from '@/store';
|
||||
import { useMessage } from '@/uni_modules/wot-design-uni';
|
||||
const message = useMessage();
|
||||
|
||||
const store = Store();
|
||||
const back = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
const userInfo = computed(() => store.userInfo || {});
|
||||
// 表单数据
|
||||
const form = ref({
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
mobile: '',
|
||||
sex: 0
|
||||
});
|
||||
|
||||
onShow(async () => {
|
||||
await store.usersGetInfo();
|
||||
});
|
||||
|
||||
onLoad(async () => {
|
||||
const storage = uni.getStorageSync('userInfo');
|
||||
if (storage) {
|
||||
const getData = await getUser();
|
||||
uni.setStorageSync('userInfo', getData);
|
||||
form.value = { ...getData };
|
||||
}
|
||||
});
|
||||
|
||||
function prompt() {
|
||||
message
|
||||
.prompt({
|
||||
title: '请输入昵称',
|
||||
inputValue: form.value.nickname
|
||||
})
|
||||
.then(async (res) => {
|
||||
await api.usersUpdate({ nickname: res.value || '微信用户' });
|
||||
await store.usersGetInfo();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
// 头像
|
||||
const avatarUrl = ref('');
|
||||
|
||||
// 选择头像
|
||||
const chooseAvatar = async (e) => {
|
||||
try {
|
||||
if (e.detail.avatarUrl) {
|
||||
const imgUrl = await uploadFiles(e.detail.avatarUrl);
|
||||
await api.usersUpdate({ avatar: imgUrl, mobile: userInfo.value.mobile, nickname: userInfo.value.nickname || '微信用户' });
|
||||
await store.usersGetInfo();
|
||||
// form.value.avatar = imgUrl;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('选择头像失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const chooseAvatarApp = async (e) => {
|
||||
try {
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: function (res) {
|
||||
console.log(res.tempFilePaths);
|
||||
uploadFiles(res.tempFilePaths[0]).then((img) => {
|
||||
console.log(img);
|
||||
form.value.avatar = img;
|
||||
});
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('选择头像失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// 保存
|
||||
const logout = async () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `是否确认退出登录?`,
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
store.logoutUser();
|
||||
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const toPhone = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/mobile'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
// padding: 30rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.avatar-row {
|
||||
height: 170rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.avatar-btn {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
&::after {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
height: 82rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
color: #232323;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.input-disabled {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.form-row-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
image {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
margin-top: 35rpx;
|
||||
width: 690rpx;
|
||||
height: 110rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0, 88, 219, 0.06);
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #5d7a4e;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user