vipnub/oil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化项目

Browse Source
This commit is contained in:
vipnub
2026-09-01 22:15:50 +08:00
commit b5a26a8848
11217 changed files with 1710987 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile-uniapp/pages/user/bind/index.vue
+311
View File
@@ -0,0 +1,311 @@
<template>
<view class="container">
<!-- 页面头部 -->
<view class="header">
<view class="title">
<text>绑定您的手机号</text>
</view>
<view class="sub-title">
<text>为了更好的服务您，请绑定手机号</text>
</view>
</view>
<!-- 表单 -->
<view class="submit-form">
<!-- 手机号 -->
<view class="form-item">
<input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
</view>
<!-- 图形验证码 -->
<view class="form-item">
<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5" placeholder="请输入图形验证码" />
<view class="form-item--parts">
<view class="captcha" @click="getCaptcha()">
<image class="image" :src="captcha.base64"></image>
</view>
</view>
</view>
<!-- 短信验证码 -->
<view class="form-item">
<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
<view class="form-item--parts">
<view class="captcha-sms" @click="handelSmsCaptcha()">
<text v-if="!smsState" class="activate">获取验证码</text>
<text v-else class="un-activate">重新发送({{ times }})秒</text>
</view>
</view>
</view>
<!-- 确认绑定 -->
<view class="submit-button" @click="handleSubmit()">
<text>确认绑定</text>
</view>
</view>
</view>
</template>
<script>
import store from '@/store'
import * as UserApi from '@/api/user'
import * as CaptchaApi from '@/api/captcha'
import * as Verify from '@/utils/verify'
// 倒计时时长(秒)
const times = 60
// 表单验证场景
const GET_CAPTCHA = 10
const FORM_SUBMIT = 20
export default {
data() {
return {
// 正在加载
isLoading: false,
// 图形验证码信息
captcha: {},
// 短信验证码发送状态
smsState: false,
// 倒计时
times,
// 手机号
mobile: '',
// 图形验证码
captchaCode: '',
// 短信验证码
smsCode: ''
}
},
/**
* 生命周期函数--监听页面加载
*/
created() {
// 获取图形验证码
this.getCaptcha()
},
methods: {
// 获取图形验证码
getCaptcha() {
const app = this
CaptchaApi.image().then(result => app.captcha = result.data)
},
// 点击发送短信验证码
handelSmsCaptcha() {
const app = this
if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
app.sendSmsCaptcha()
app.getCaptcha()
}
},
// 表单验证
formValidation(scene = GET_CAPTCHA) {
const app = this
// 验证获取短信验证码
if (scene === GET_CAPTCHA) {
if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
return false
}
}
// 验证表单提交
if (scene === FORM_SUBMIT) {
if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
return false
}
}
return true
},
// 验证手机号
validteMobile(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入手机号')
return false
}
if (!Verify.isMobile(str)) {
this.$toast('请输入正确格式的手机号')
return false
}
return true
},
// 验证图形验证码
validteCaptchaCode(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入图形验证码')
return false
}
return true
},
// 验证短信验证码
validteSmsCode(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入短信验证码')
return false
}
return true
},
// 请求发送短信验证码接口
sendSmsCaptcha() {
const app = this
app.isLoading = true
CaptchaApi.sendSmsCaptcha({
form: {
captchaKey: app.captcha.key,
captchaCode: app.captchaCode,
mobile: app.mobile
}
})
.then(result => {
// 显示发送成功
app.$toast(result.message)
// 执行定时器
app.timer()
})
.finally(() => app.isLoading = false)
},
// 执行定时器
timer() {
const app = this
app.smsState = true
const inter = setInterval(() => {
app.times = app.times - 1
if (app.times <= 0) {
app.smsState = false
app.times = times
clearInterval(inter)
}
}, 1000)
},
// 点击提交
handleSubmit() {
const app = this
if (!app.isLoading && app.formValidation(FORM_SUBMIT)) {
app.onSubmitEvent()
}
},
// 确认提交事件
onSubmitEvent() {
const app = this
app.isLoading = true
UserApi.bindMobile({ form: { smsCode: app.smsCode, mobile: app.mobile } })
.then(result => {
// 显示操作成功
app.$toast(result.message)
// 跳转回原页面
setTimeout(() => {
app.onNavigateBack(1)
}, 2000)
})
.finally(() => app.isLoading = false)
},
/**
* 提交成功-跳转回原页面
*/
onNavigateBack(delta) {
uni.navigateBack({
delta: Number(delta || 1)
})
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 100rpx 60rpx;
min-height: 100vh;
background-color: #fff;
}
// 页面头部
.header {
margin-bottom: 50rpx;
.title {
color: #191919;
font-size: 50rpx;
}
.sub-title {
margin-top: 20rpx;
color: #b3b3b3;
font-size: 25rpx;
}
}
// 输入框元素
.form-item {
display: flex;
padding: 18rpx;
border-bottom: 1rpx solid #f3f1f2;
margin-bottom: 25rpx;
height: 96rpx;
&--input {
font-size: 26rpx;
letter-spacing: 1rpx;
flex: 1;
height: 100%;
}
&--parts {
min-width: 100rpx;
height: 100%;
}
// 图形验证码
.captcha {
height: 100%;
.image {
display: block;
width: 192rpx;
height: 100%;
}
}
// 短信验证码
.captcha-sms {
font-size: 22rpx;
line-height: 50rpx;
padding-right: 20rpx;
.activate {
color: #cea26a;
}
.un-activate {
color: #9e9e9e;
}
}
}
// 提交按钮
.submit-button {
width: 100%;
height: 86rpx;
margin-top: 70rpx;
// background: #cea26a;
background: linear-gradient(to right, #ecb53c, #ff9211);
text-align: center;
line-height: 86rpx;
color: #fff;
border-radius: 80rpx;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
letter-spacing: 5rpx;
}
</style>
mobile-uniapp/pages/user/index.vue
+720
View File
@@ -0,0 +1,720 @@
<template>
<view v-if="!isFirstload" class="container">
<!-- 页面头部 -->
<view class="main-header" :style="{ height: platform == 'H5' ? '260rpx' : '320rpx', paddingTop: platform == 'H5' ? '0' : '80rpx' }">
<image class="bg-image" src="/static/background/user-header2.png" mode="scaleToFill"></image>
<!-- 用户信息 -->
<view v-if="isLogin" class="user-info">
<view class="user-avatar" @click="handlePersonal()">
<avatar-image :url="userInfo.avatar_url" :width="100" />
</view>
<view class="user-content">
<!-- 会员昵称 -->
<view class="nick-name oneline-hide" @click="handlePersonal()">{{ userInfo.nick_name }}</view>
<!-- 会员等级 -->
<view v-if="userInfo.grade_id > 0 && userInfo.grade" class="user-grade">
<view class="user-grade_icon">
<image class="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA0lBMVEUAAAD/tjL/tzH/uDP/uC7/tjH/tzH/tzL/tTH+tTL+tjP/tDD/tTD+tzD/tjL/szD/uDH/tjL/tjL+tjD/tjT/szb/tzL/tTL+uTH+tjL/tjL/tjL/tTT/tjL/tjL+tjH/uTL/vDD/tjL/tjH/tzL9uS//tTL/nBr/sS7/tjH/ujL/szD/uTv+rzf/tzL+tzH+vDP+uzL+tjP+ry7+tDL9ki/7szf/sEX/tTL/tjL+tjL/tTH/tTT/tzH/tzL/tjP/sTX/uTP/wzX+rTn/vDX9vC8m8ckhAAAAOXRSTlMAlnAMB/vjxKWGMh0S6drMiVxPRkEY9PLy0ru0sKagmo5+dGtgVCMgBP716eXWyMGxqJGRe2o5KSmFNjaYAAABP0lEQVQ4y8XS13KDMBAF0AWDDe4t7r3ETu9lVxJgJ/n/X8rKAzHG5TE+Twz3zki7I/g/KXdghIbGJewrU4yzn08Ebgl6TuZzzuOC6W5es3HX6qsSz3NFShRU0MpucytDmOSpu3yULx3CA9RD1HjVedc0jSjqm6ZzhUjDsFDQhSp/OKj5GQvg0+ZCOixsbtDLAeTTOm/yGi8GyIphIVsgH737FEDV44LJa88IRKK/SetrwT9G/GUIr6vXjoy4GXn7+RboVXnghuSjaoGecwQxL2su3CwAKlO+QFoqxI4FMctHQhQd2OhxTu184jWUlI+rMTBTn1/IQcJHQ6GQdZ7pWiDaNdhTt330efISeiqYwQEzQpTlsURJLhzkEmpCPsERfeIUVyXr6MNuIyp5uziW6xURtt7hhGwzmMNJExfO4Bd9X0ZPqAxdNwAAAABJRU5ErkJggg==">
</image>
</view>
<view class="user-grade_name">
<text>{{ userInfo.grade.name }}</text>
</view>
</view>
<!-- 会员无等级时显示手机号 -->
<view v-else class="mobile">{{ userInfo.mobile }}</view>
</view>
</view>
<!-- 未登录 -->
<view v-else class="user-info" @click="handleLogin">
<view class="user-avatar">
<avatar-image :width="100" />
</view>
<view class="user-content">
<view class="nick-name">未登录</view>
<view class="login-tips">点击登录账号</view>
</view>
</view>
</view>
<!-- 绑定手机号 -->
<view v-if="isLogin && !userInfo.mobile && setting[SettingKeyEnum.REGISTER.value].isManualBind" class="my-mobile"
@click="handleBindMobile()">
<view class="info">点击绑定手机号，确保账户安全</view>
<view class="btn-bind">去绑定</view>
</view>
<!-- 我的钱包 -->
<view class="my-asset">
<view class="asset-left flex-box dis-flex flex-x-around">
<view class="asset-left-item" style="max-width: 200rpx;" @click="onTargetWallet">
<view class="item-value dis-flex flex-x-center">
<text>{{ isLogin ? assets.balance : '--' }}</text>
</view>
<view class="item-name dis-flex flex-x-center">
<text class="oneline-hide">账户余额</text>
</view>
</view>
<view class="asset-left-item" @click="onTargetPoints">
<view class="item-value dis-flex flex-x-center">
<text>{{ isLogin ? assets.points : '--' }}</text>
</view>
<view class="item-name dis-flex flex-x-center">
<text class="oneline-hide">{{ setting[SettingKeyEnum.POINTS.value].points_name }}</text>
</view>
</view>
<view class="asset-left-item" @click="onTargetMyCoupon">
<view class="item-value dis-flex flex-x-center">
<text class="oneline-hide">{{ isLogin ? assets.coupon : '--' }}</text>
</view>
<view class="item-name dis-flex flex-x-center">
<text>优惠券</text>
</view>
</view>
</view>
<view class="asset-right">
<view class="asset-right-item" @click="onTargetWallet">
<view class="item-icon dis-flex flex-x-center">
<text class="iconfont icon-qianbao"></text>
</view>
<view class="item-name dis-flex flex-x-center">
<text>我的钱包</text>
</view>
</view>
</view>
</view>
<!-- 订单操作 -->
<view class="order-navbar">
<view class="order-navbar-item" v-for="(item, index) in orderNavbar" :key="index" @click="onTargetOrder(item)">
<view class="item-icon">
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
</view>
<view class="item-name">{{ item.name }}</view>
<view class="item-badge" v-if="item.count && item.count > 0">
<text v-if="item.count <= 99" class="text">{{ item.count }}</text>
<text v-else class="text">99+</text>
</view>
</view>
</view>
<!-- 我的服务 -->
<view class="my-service">
<view class="service-title">我的服务</view>
<view class="service-content clearfix">
<block v-for="(item, index) in service" :key="index">
<view v-if="item.type == 'link'" class="service-item" @click="handleService(item)">
<view class="item-icon">
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
</view>
<view class="item-name">{{ item.name }}</view>
<view class="item-badge" v-if="item.count && item.count > 0">
<text v-if="item.count <= 99" class="text">{{ item.count }}</text>
<text v-else class="text">99+</text>
</view>
</view>
<view v-if="item.type == 'button' && platform == 'MP-WEIXIN'" class="service-item">
<button class="btn-normal" :open-type="item.openType">
<view class="item-icon">
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
</view>
<view class="item-name">{{ item.name }}</view>
</button>
</view>
<view v-if="item.type == 'phone'" class="service-item">
<button class="btn-normal" @click="callPhone()">
<view class="item-icon">
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
</view>
<view class="item-name">{{ item.name }}</view>
</button>
</view>
</block>
</view>
</view>
<!-- 退出登录 -->
<view v-if="isLogin" class="my-logout">
<view class="logout-btn" @click="handleLogout()">
<text>退出登录</text>
</view>
</view>
</view>
</template>
<script>
import store from '@/store'
import AvatarImage from '@/components/avatar-image'
import { setCartTabBadge } from '@/core/app'
import SettingKeyEnum from '@/common/enum/setting/Key'
import SettingModel from '@/common/model/Setting'
import * as UserApi from '@/api/user'
import * as OrderApi from '@/api/order'
import { checkLogin } from '@/core/app'
// 订单操作
const orderNavbar = [
{ id: 'all', name: '全部订单', icon: 'qpdingdan' },
{ id: 'payment', name: '待支付', icon: 'daifukuan', count: 0 },
// { id: 'delivery', name: '待发货', icon: 'daifahuo', count: 0 },
// { id: 'received', name: '待收货', icon: 'daishouhuo', count: 0 },
{ id: 'progress', name: '进行中', icon: 'daifahuo', count: 0 },
{ id: 'complete', name: '已完成', icon: 'daishouhuo', count: 0 },
]
/**
* 我的服务
* id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
*/
const service = [
{ id: 'address', name: '收货地址', icon: 'shouhuodizhi', type: 'link', url: 'pages/address/index' },
{ id: 'coupon', name: '领券中心', icon: 'lingquan', type: 'link', url: 'pages/coupon/index' },
// { id: 'myCoupon', name: '优惠券', icon: 'youhuiquan', type: 'link', url: 'pages/my-coupon/index' },
{ id: 'contact', name: '在线客服', icon: 'kefu', type: 'button', openType: 'contact' },
{ id: 'points', name: '我的积分', icon: 'jifen', type: 'link', url: 'pages/points/log' },
{ id: 'refund', name: '退换/售后', icon: 'shouhou', type: 'link', url: 'pages/refund/index', count: 0 },
{ id: 'orderCenter', name: '订单中心', icon: 'order-c', type: 'link', url: 'pages/order/center' },
{ id: 'help', name: '我的帮助', icon: 'bangzhu', type: 'link', url: 'pages/help/index' },
{ id: 'phone', name: '客服电话', icon: 'dianhua', type: 'phone', openType: 'contact' },
]
export default {
components: {
AvatarImage
},
data() {
return {
// 枚举类
SettingKeyEnum,
// 正在加载
isLoading: true,
// 首次加载
isFirstload: true,
// 是否已登录
isLogin: false,
// 系统设置
setting: {},
// 当前用户信息
userInfo: {},
// 账户资产
assets: { balance: '--', points: '--', coupon: '--' },
// 我的服务
service,
// 订单操作
orderNavbar,
// 当前用户待处理的订单数量
todoCounts: { payment: 0, deliver: 0, received: 0 },
tel: '18281516816'
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow(options) {
this.onRefreshPage()
},
methods: {
// 刷新页面
onRefreshPage() {
// 更新购物车角标
setCartTabBadge()
// 判断是否已登录
this.isLogin = checkLogin()
// 获取页面数据
this.getPageData()
},
// 获取页面数据
getPageData(callback) {
const app = this
app.isLoading = true
Promise.all([app.getSetting(), app.getUserInfo(), app.getUserAssets(), app.getTodoCounts()])
.then(result => {
app.isFirstload = false
// 初始化我的服务数据
app.initService()
// 初始化订单操作数据
app.initOrderTabbar()
// 执行回调函数
callback && callback()
})
.catch(err => console.log('catch', err))
.finally(() => app.isLoading = false)
},
// 初始化我的服务数据
initService() {
const app = this
const newService = []
service.forEach(item => {
if (item.id === 'points') {
item.name = '我的' + app.setting[SettingKeyEnum.POINTS.value].points_name
}
// 数据角标
if (item.count != undefined) {
item.count = app.todoCounts[item.id]
}
newService.push(item)
})
app.service = newService
},
// 初始化订单操作数据
initOrderTabbar() {
const app = this
const newOrderNavbar = []
orderNavbar.forEach(item => {
if (item.count != undefined) {
item.count = app.todoCounts[item.id]
}
newOrderNavbar.push(item)
})
app.orderNavbar = newOrderNavbar
},
// 获取商城设置
getSetting() {
const app = this
return new Promise((resolve, reject) => {
SettingModel.data()
.then(setting => {
app.setting = setting
resolve(setting)
}).catch(reject)
})
},
// 获取当前用户信息
getUserInfo() {
const app = this
return new Promise((resolve, reject) => {
!app.isLogin ? resolve(null) : UserApi.info({}, { load: app.isFirstload })
.then(result => {
app.userInfo = result.data.userInfo
resolve(app.userInfo)
})
.catch(err => {
if (err.result && err.result.status == 401) {
app.isLogin = false
resolve(null)
} else {
reject(err)
}
})
})
},
// 获取账户资产
getUserAssets() {
const app = this
return new Promise((resolve, reject) => {
!app.isLogin ? resolve(null) : UserApi.assets({}, { load: app.isFirstload })
.then(result => {
app.assets = result.data.assets
resolve(app.assets)
})
.catch(err => {
if (err.result && err.result.status == 401) {
app.isLogin = false
resolve(null)
} else {
reject(err)
}
})
})
},
// 获取当前用户待处理的订单数量
getTodoCounts() {
const app = this
return new Promise((resolve, reject) => {
!app.isLogin ? resolve(null) : OrderApi.todoCounts({}, { load: app.isFirstload })
.then(result => {
app.todoCounts = result.data.counts
resolve(app.todoCounts)
})
.catch(err => {
if (err.result && err.result.status == 401) {
app.isLogin = false
resolve(null)
} else {
reject(err)
}
})
})
},
// 跳转到登录页
handleLogin() {
!this.isLogin && this.$navTo('pages/login/index')
},
// 跳转到绑定手机号页面
handleBindMobile() {
this.$navTo('pages/user/bind/index')
},
// 跳转到修改个人信息页
handlePersonal() {
this.$navTo('pages/user/personal/index')
},
// 退出登录
handleLogout() {
const app = this
uni.showModal({
title: '友情提示',
content: '您确定要退出登录吗?',
success(res) {
if (res.confirm) {
store.dispatch('Logout', {})
.then(result => app.onRefreshPage())
}
}
})
},
// 跳转到钱包页面
onTargetWallet() {
this.$navTo('pages/wallet/index')
},
// 跳转到订单页
onTargetOrder(item) {
this.$navTo('pages/order/index', { dataType: item.id })
},
// 跳转到我的积分页面
onTargetPoints() {
this.$navTo('pages/points/log')
},
// 跳转到我的优惠券页
onTargetMyCoupon() {
this.$navTo('pages/my-coupon/index')
},
// 跳转到服务页面
handleService({ url }) {
this.$navTo(url)
},
// 拨打电话
callPhone(){
console.log(this.setting.trade.phone);
let tel = this.tel
uni.makePhoneCall({
phoneNumber: this.setting.trade.phone
})
},
},
/**
* 下拉刷新
*/
onPullDownRefresh() {
// 获取首页数据
this.getPageData(() => {
uni.stopPullDownRefresh()
})
},
}
</script>
<style lang="scss" scoped>
// 页面头部
.main-header {
background-color: #fff;
// background-image: url('/static/background/user-header.png');
position: relative;
width: 100%;
height: 280rpx;
background-size: 100% 100%;
overflow: hidden;
display: flex;
align-items: center;
// padding-top: 40rpx;
padding-left: 30rpx;
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.user-info {
display: flex;
height: 100rpx;
z-index: 1;
.user-content {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 30rpx;
color: #c59a46;
.nick-name {
font-size: 34rpx;
font-weight: bold;
max-width: 270rpx;
}
.mobile {
margin-top: 15rpx;
font-size: 28rpx;
}
.user-grade {
align-self: baseline;
display: flex;
align-items: center;
background: #3c3c3c;
margin-top: 12rpx;
border-radius: 10rpx;
padding: 4rpx 12rpx;
.user-grade_icon .image {
display: block;
width: 32rpx;
height: 32rpx;
}
.user-grade_name {
margin-left: 5rpx;
font-size: 26rpx;
color: #EEE0C3;
}
}
.login-tips {
margin-top: 12rpx;
font-size: 30rpx;
}
}
}
}
// 角标组件
.item-badge {
position: absolute;
top: 0;
right: 55rpx;
background: #fa2209;
color: #fff;
border-radius: 100%;
min-width: 38rpx;
height: 38rpx;
display: flex;
justify-content: center;
align-items: center;
padding: 1rpx;
font-size: 24rpx;
}
// 我的钱包
.my-asset {
display: flex;
background: #fff;
padding: 40rpx 0;
.asset-right {
width: 200rpx;
border-left: 1rpx solid #eee;
}
.asset-right-item {
text-align: center;
color: #545454;
.item-icon {
font-size: 44rpx;
}
.item-name {
margin-top: 14rpx;
font-size: 28rpx;
}
}
.asset-left-item {
max-width: 183rpx;
text-align: center;
color: #666;
padding: 0 16rpx;
.item-value {
font-size: 34rpx;
color: red;
}
.item-name {
margin-top: 6rpx;
}
.item-name {
margin-top: 14rpx;
font-size: 28rpx;
}
}
}
// 订单操作
.order-navbar {
display: flex;
margin: 20rpx auto 20rpx auto;
padding: 20rpx 0;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
font-size: 30rpx;
border-radius: 5rpx;
background: #fff;
&-item {
position: relative;
width: 25%;
.item-icon {
text-align: center;
margin: 0 auto;
padding: 10rpx 0;
color: #545454;
font-size: 44rpx;
}
.item-name {
font-size: 28rpx;
color: #545454;
text-align: center;
margin-right: 10rpx;
}
}
}
// 我的服务
.my-service {
margin: 22rpx auto 22rpx auto;
padding: 22rpx 0;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 5rpx;
background: #fff;
.service-title {
padding-left: 24rpx;
margin-bottom: 20rpx;
font-size: 30rpx;
}
.service-content {
margin-bottom: -20rpx;
.service-item {
position: relative;
width: 25%;
float: left;
margin-bottom: 30rpx;
.item-icon {
text-align: center;
margin: 0 auto;
padding: 14rpx 0;
color: #ff3800;
font-size: 44rpx;
}
.item-name {
font-size: 28rpx;
color: #545454;
text-align: center;
margin-right: 10rpx;
}
}
}
}
// 退出登录
.my-logout {
display: flex;
justify-content: center;
margin-top: 50rpx;
.logout-btn {
width: 60%;
margin: 0 auto;
font-size: 28rpx;
color: #616161;
border-radius: 20rpx;
border: 1px solid #dcdcdc;
padding: 16rpx 0;
text-align: center;
}
}
// 绑定手机号 样式1
.my-mobile {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 40rpx;
background: #FCEBD1;
.info {
color: #cd8c0c;
font-size: 28rpx;
}
.btn-bind {
padding: 8rpx 24rpx;
background-color: #EAB766;
color: #fff;
border-radius: 30rpx;
font-size: 26rpx;
text-align: center;
}
}
// 绑定手机号 样式2
.my-mobile2 {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20rpx auto 20rpx auto;
padding: 12rpx 40rpx;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
font-size: 30rpx;
border-radius: 5rpx;
background: #fff;
.info {
// color: #cd8c0c;
font-size: 26rpx;
}
.btn-bind {
padding: 8rpx 24rpx;
background-color: #EAB766;
color: #fff;
border-radius: 30rpx;
font-size: 26rpx;
text-align: center;
}
}
</style>
mobile-uniapp/pages/user/personal/index.vue
+240
View File
@@ -0,0 +1,240 @@
<template>
<view class="container" :style="appThemeStyle">
<!-- 标题 -->
<view class="page-title">个人信息</view>
<!-- 表单组件 -->
<view class="form-wrapper">
<u-form :model="form" ref="uForm" label-width="140rpx">
<u-form-item label="头像">
<button class="btn-normal" open-type="chooseAvatar" @click="onClickAvatar()" @chooseavatar="onChooseAvatar">
<avatar-image :url="avatarUrl" :width="100" />
</button>
</u-form-item>
<u-form-item label="昵称" prop="nickName">
<u-input v-model="form.nickName" type="nickname" maxlength="30" placeholder="请输入昵称" @input="onInputNickName"
@blur="onInputNickName" />
</u-form-item>
</u-form>
</view>
<!-- 操作按钮 -->
<view class="footer">
<view class="btn-wrapper">
<view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
</view>
</view>
</view>
</template>
<script>
import store from '@/store'
import AvatarImage from '@/components/avatar-image'
import * as UserApi from '@/api/user'
import * as UploadApi from '@/api/upload'
// 表单验证规则
const rules = {
nickName: [{
required: true,
message: '请输入用户昵称',
trigger: ['blur', 'change']
}]
}
export default {
components: {
AvatarImage
},
data() {
return {
// 按钮禁用
disabled: false,
// 头像路径 (用于显示)
avatarUrl: '',
// 临时图片 (用于上传)
tempFile: null,
// 表单数据
form: {
avatarId: '',
nickName: ''
},
// 验证规则
rules,
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
// 获取当前用户信息
this.getUserInfo()
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.uForm.setRules(this.rules)
},
methods: {
// 获取当前用户信息
getUserInfo() {
const app = this
UserApi.info()
.then(result => {
const userInfo = result.data.userInfo
app.avatarUrl = userInfo.avatar_url
app.form.avatarId = userInfo.avatar_id
app.form.nickName = userInfo.nick_name
})
},
// 点击头像按钮事件
onClickAvatar() {
// #ifdef MP-WEIXIN
return
// #endif
this.chooseImage()
},
// 选择头像事件 - 仅限微信小程序
// #ifdef MP-WEIXIN
onChooseAvatar({ detail }) {
const app = this
app.avatarUrl = detail.avatarUrl
app.tempFile = { path: app.avatarUrl }
},
// #endif
// 选择图片
chooseImage() {
const app = this
// 选择图片
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success({ tempFiles }) {
app.tempFile = tempFiles[0]
app.avatarUrl = app.tempFile.path
}
});
},
// 上传图片
uploadFile() {
const app = this
return UploadApi.image([app.tempFile])
.then(fileIds => {
app.form.avatarId = fileIds[0]
app.tempFile = null
return true
})
.catch(() => {
app.disabled = false
return false
})
},
// 确认修改
async handleSubmit() {
const app = this
// 判断是否重复提交
if (app.disabled === true) return
app.$refs.uForm.validate(async valid => {
if (!valid) return
// 按钮禁用
app.disabled = true
// 先上传头像图片
if (app.tempFile && !await app.uploadFile()) {
return
}
// 提交保存个人信息
UserApi.personal({ form: app.form })
.then(result => {
app.$toast(result.message)
setTimeout(() => {
app.disabled = false
uni.navigateBack()
}, 1500)
})
.catch(err => app.disabled = false)
})
},
// 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
onInputNickName(val) {
if (val) {
this.form.nickName = val
}
}
}
}
</script>
<style>
page {
background: #f7f8fa;
}
</style>
<style lang="scss" scoped>
.container {}
.page-title {
width: 94%;
margin: 0 auto;
padding-top: 40rpx;
font-size: 28rpx;
color: rgba(69, 90, 100, 0.6);
}
.form-wrapper {
margin: 20rpx auto 20rpx auto;
padding: 0 40rpx;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 16rpx;
background: #fff;
}
/* 底部操作栏 */
.footer {
margin-top: 80rpx;
.btn-wrapper {
height: 100%;
// display: flex;
// align-items: center;
padding: 0 20rpx;
}
.btn-item {
flex: 1;
font-size: 28rpx;
height: 86rpx;
color: #fff;
border-radius: 50rpx;
display: flex;
justify-content: center;
align-items: center;
}
.btn-item-wechat {
background: #0ba90b;
margin-bottom: 26rpx;
}
.btn-item-main {
background: linear-gradient(to right, #f9211c, #ff6335);
color: #fff;
// 禁用按钮
&.disabled {
opacity: 0.6;
}
}
}
</style>