cxc/yshop-pro-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

Browse Source
This commit is contained in:
黄少君
2023-11-14 17:21:03 +08:00
parent d0b337c596
commit dcab74274f
567 changed files with 22414 additions and 7375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
pages/userInfo/index.data.js Normal file
View File

@ -0,0 +1,48 @@
export const userInfoList = [
{
label: 'ID',
field: 'id',
type: 'text',
icon: false
},
{
label: '昵称',
field: 'nickname',
type: 'input',
icon: true
},
{
label: '性别',
field: 'sex',
type: 'text',
icon: true,
map: {
0: '女',
1: '男'
},
func: 'openSex'
}
,
{
label: '出生日期',
field: 'birthday',
type: 'text',
icon: true,
func: 'openBirthday'
}
]
export const userInfoNextList = [
{
label: '手机号',
field: 'mobile',
type: 'text',
icon: false
}
]
export const sexColumns = [
[{label: '男', value: 1}, {label: '女', value: 0}]
]

32
pages/userInfo/index.utlis.js Normal file
View File

@ -0,0 +1,32 @@
import { useMainStore } from "@/store/store";
import { useInterface } from "@/hooks/useInterface";
import { updateAvatar, updateUserInfo } from "@/api/user";
export function useRequest() {
const {loading, hideLoading, toast} = useInterface()
const userStore = useMainStore()
/**
* 请求修改用户头像
* @param file
* @returns {Promise<void>}
*/
async function doUpdateAvatar(file) {
let data = new FormData()
data.append('avatarFile', file)
loading({title: '上传中...'})
await updateAvatar(data)
await userStore.getUserInfo()
hideLoading()
}
async function doUpdateUserInfo() {
await updateUserInfo(userStore.user)
await userStore.getUserInfo()
}
return {
doUpdateAvatar,
doUpdateUserInfo
}
}

291
pages/userInfo/index.vue Normal file
View File

@ -0,0 +1,291 @@
<!--
@name: index
@author: kahu4
@date: 2023-11-10 14:55
@description：index
@update: 2023-11-10 14:55
-->
<script setup>
import Header from "@/components/Header/index.vue"
import moment from "moment"
import { useMainStore } from "@/store/store";
import { storeToRefs } from "pinia";
import UvIcon from "@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue";
import UvImage from "@/uni_modules/uv-image/components/uv-image/uv-image.vue";
import { objectURLToBlob } from "@/utils";
import UvUpload from "@/uni_modules/uv-upload/components/uv-upload/uv-upload.vue";
import { useInterface } from "@/hooks/useInterface";
import { useRequest } from "@/pages/userInfo/index.utlis";
import { sexColumns, userInfoList, userInfoNextList } from "@/pages/userInfo/index.data";
import { onShow } from "@dcloudio/uni-app";
import UvPicker from "@/uni_modules/uv-picker/components/uv-picker/uv-picker.vue";
import { ref, unref } from "vue";
import UvDatetimePicker from "@/uni_modules/uv-datetime-picker/components/uv-datetime-picker/uv-datetime-picker.vue";
import Model from '@/components/Modal/index.vue'
const {loading, hideLoading} = useInterface()
const {doUpdateAvatar, doUpdateUserInfo} = useRequest()
const userStore = useMainStore()
const {user} = storeToRefs(userStore)
const funcMap = {
openSex,
openBirthday
}
const dateModel = ref(new Date().getTime())
const sexPicker = ref()
const birthdayPicker = ref()
const modelRef = ref()
/**
* 选择用户头像以后
* @param event
* @returns {Promise<void>}
*/
async function afterChooseFile(event) {
const imgObj = await objectURLToBlob(event.file.url)
await doUpdateAvatar(new File([imgObj], '', {type: imgObj.type}))
}
function sexChange(event) {
const sex = event.value[0].value
user.value.sex = sex
// 请求
doUpdateUserInfo()
}
function birthdayChange(event) {
const timeStamp = event.value
user.value.birthday = moment(timeStamp).format('YYYY-MM-DD');
// 请求
doUpdateUserInfo()
}
function handleClickRow(cellRow) {
if (cellRow.type === 'input') return
if (cellRow.type === 'text') {
if (cellRow.func) {
funcMap[cellRow.func]()
}
}
}
function openSex() {
unref(sexPicker).open()
}
function openBirthday() {
unref(birthdayPicker).open()
}
onShow(async () => {
await userStore.getUserInfo()
})
</script>
<template>
<view class="account-setting">
<Header
header-area-bg="#fff"
system-bar-area-bg="#fff"
>
账号设置
</Header>
<!-- 头像 -->
<view class="card">
<view class="cell-row">
<view class="label">
头像
</view>
<view class="value">
<uv-upload
:capture="['album', 'camera']"
use-before-read
@afterRead="afterChooseFile"
>
<uv-image
class="img"
:src="user&&user.avatar"
width="90rpx"
height="90rpx"
shape="circle"
>
<template v-slot:error>
<uv-icon name="photo"></uv-icon>
</template>
</uv-image>
</uv-upload>
<uv-icon
name="arrow-right"
color="#999"
/>
</view>
</view>
</view>
<view
class="card"
v-if="user"
>
<template
v-for="cellRow in userInfoList"
:key="cellRow.field"
>
<view
class="cell-row"
@click="handleClickRow(cellRow)"
>
<view class="label">
{{ cellRow.label }}
</view>
<view class="value">
<template v-if="cellRow.type === 'text'">
<template v-if="cellRow.map">
{{ cellRow.map[user[cellRow.field]] }}
</template>
<template v-else>
{{ user[cellRow.field] }}
</template>
</template>
<template v-if="cellRow.type==='input'">
<input
type="text"
:placeholder="`请输入${cellRow.label}`"
v-model="user[cellRow.field]"
@blur="doUpdateUserInfo"
/>
</template>
<uv-icon
v-if="cellRow.icon"
name="arrow-right"
color="#999"
/>
</view>
</view>
</template>
</view>
<view
class="card"
v-if="user"
>
<template
v-for="cellRow in userInfoNextList"
:key="cellRow.field"
>
<view
class="cell-row"
@click="handleClickRow(cellRow)"
>
<view class="label">
{{ cellRow.label }}
</view>
<view class="value">
<template v-if="cellRow.type === 'text'">
<template v-if="cellRow.map">
{{ cellRow.map[user[cellRow.field]] }}
</template>
<template v-else>
{{ user[cellRow.field] }}
</template>
</template>
<template v-if="cellRow.type==='input'">
<input
type="text"
:placeholder="`请输入${cellRow.label}`"
v-model="user[cellRow.field]"
/>
</template>
<uv-icon
v-if="cellRow.icon"
name="arrow-right"
color="#999"
/>
</view>
</view>
</template>
</view>
<view
class="card button"
@click="modelRef.show()"
>
退出登录
</view>
</view>
<!-- 性别 -->
<uv-picker
:round="20"
ref="sexPicker"
keyName="label"
:columns="sexColumns"
color="#999"
confirmColor="#ee6d46"
activeColor="#ee6d46"
@confirm="sexChange"
/>
<!-- 生日 -->
<uv-datetime-picker
v-model="dateModel"
:minDate="(new Date('1900-01-01')).getTime()"
ref="birthdayPicker"
mode="date"
@confirm="birthdayChange"
/>
<!-- 退出弹窗 -->
<Model
content="确认要退出登录吗？此操作将会清空登录数据以及用户信息"
ref="modelRef"
@confirm="userStore.logout()"
/>
</template>
<style
scoped
lang="scss"
>
.account-setting {
.card {
@include usePadding(34, 0);
background: #fff;
margin-bottom: 20rpx;
.cell-row {
@include usePadding(0, 45);
@include useFlex(space-between, center);
border-bottom: 1rpx solid #E6E6E6;
&:last-child {
border-bottom: 0;
}
.label {
font-size: 28rpx;
color: #333;
}
.value {
@include useFlex(flex-end, center, row, nowrap, 10rpx);
font-size: 28rpx;
color: #999;
input {
text-align: right;
}
}
}
}
.button {
@include usePadding(34, 25);
text-align: center;
}
}
</style>

212
pages/userInfo/userInfo.vue
View File

@ -1,39 +1,50 @@
<template>
<layout>
<uv-navbar
:fixed="false"
title="账号设置"
left-arrow
@leftClick="$onClickLeft"
:fixed="false"
title="账号设置"
left-arrow
@leftClick="goBack"
/>
<view v-if="user">
<view class="y-list">
<uv-list border>
<uv-list-item
border
clickable
show-arrow
@click=""
>
<view class="y-list-content avatar">
<view class="y-list-label">头像</view>
<view class="y-list-avatar">
<image
:src="store.user.avatar"
class="img"
/>
</view>
</view>
</uv-list-item>
</uv-list>
<uv-upload
:useBeforeRead="true"
@afterRead="handleUploadAvatar"
>
<view class="upload-warp">
<uv-list border>
<uv-list-item
border
show-arrow
>
<view class="y-list-content avatar flex flex-jc__sb">
<view class="y-list-label">头像</view>
<view class="y-list-avatar">
<uv-image
class="img"
:src="store.user.avatar"
width="90rpx"
height="90rpx"
shape="circle"
>
<template v-slot:error>
<uv-icon name="photo"></uv-icon>
</template>
</uv-image>
</view>
</view>
</uv-list-item>
</uv-list>
</view>
</uv-upload>
</view>
<view class="y-list">
<uv-list border>
<uv-list-item
border
clickable
show-arrow
@click=""
border
clickable
@click=""
>
<view class="y-list-content">
<view class="y-list-label">ID</view>
@ -43,23 +54,29 @@
</view>
</uv-list-item>
<uv-list-item
border
clickable
show-arrow
@click=""
border
clickable
show-arrow
@click=""
>
<view class="y-list-content">
<view class="y-list-label">昵称</view>
<view class="y-list-select-placeholder">
{{ store.user.nickname }}
<uv-input
placeholder="请输入内容"
border="none"
v-model="store.user.nickname"
@blur="nicknameChange"
inputAlign="right"
></uv-input>
</view>
</view>
</uv-list-item>
<!-- <uv-list-item
border
clickable
show-arrow
@click=""
<uv-list-item
border
clickable
show-arrow
@click=""
>
<view class="y-list-content">
<view class="y-list-label">性别</view>
@ -67,12 +84,12 @@
{{ store.user.nickname }}
</view>
</view>
</uv-list-item> -->
</uv-list-item>
<uv-list-item
border
clickable
show-arrow
@click=""
border
clickable
show-arrow
@click="openBirthdayPicker"
>
<view class="y-list-content">
<view class="y-list-label">出生日期</view>
@ -87,15 +104,16 @@
<view class="y-list">
<uv-list border>
<uv-list-item
border
clickable
show-arrow
@click=""
border
clickable
show-arrow
@click=""
>
<view class="y-list-content">
<view class="y-list-label">手机号</view>
<view class="y-list-select-placeholder">
{{ store.user.mobile }}
<!-- <uv-input placeholder="请输入内容" border="none" v-model="store.user.mobile" @blur="mobileChange" inputAlign="right"></uv-input>-->
</view>
</view>
</uv-list-item>
@ -104,75 +122,99 @@
</view>
<view class="form-buttons">
<uv-button
round
block
type="primary"
@tap="handleLogout"
round
block
type="primary"
@tap="handleLogout"
>
退出登录
</uv-button>
</view>
<uv-datetime-picker
ref="datetimePickerRef"
mode="date"
minDate="1900"
@confirm="datetimeConfirm"
>
</uv-datetime-picker>
</layout>
</template>
<script setup>
import { ref, watch } from 'vue'
import { orderInfo, applyForAfterSales } from '@/api/order'
import { navigateTo, back } from '@/utils/router'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { objectURLToBlob } from '@/utils'
import { useMainStore } from '@/store/store'
import { updateAvatar, updateNickname } from '@/api/user'
import { useGlobalProperties } from "@/hooks";
import { useRouter } from "@/hooks/useRouter";
const store = useMainStore()
const { user, } = storeToRefs(store)
console.log("--> % user:\n", user)
// const user = ref(store.user)
console.log("--> % user:\n", store)
console.log("--> % user:\n", store.value)
const {user} = storeToRefs(store)
const datetimePickerRef = ref(null)
const {$timeFormat} = useGlobalProperties()
const {goBack} = useRouter()
const handleLogout = () => {
store.logout()
}
const onClickLeft = () => {
back()
}
onLoad((option) => {
store.getUserInfo()
})
const handleUploadAvatar = async (event) => {
const imgObj = await objectURLToBlob(event.file.url)
let file = new File([imgObj], '', {
type: imgObj.type
})
let data = new FormData()
data.append('avatarFile', file)
uni.showLoading({
title: '上传中'
});
updateAvatar(data).then(() => {
uni.hideLoading()
store.getUserInfo()
})
}
// 昵称改变
const nicknameChange = () => {
if (!store.user.nickname) return
uni.showLoading({
title: '更新中'
});
updateNickname({
nickname: store.user.nickname,
birthday: store.user.birthday
}).then(() => {
uni.hideLoading()
store.getUserInfo()
})
}
// 打开生日窗口
const openBirthdayPicker = () => {
datetimePickerRef.value.open();
}
//
const datetimeConfirm = (e) => {
store.user.birthday = $timeFormat(e.value, 'yyyy-mm-dd')
nicknameChange()
}
</script>
<style lang="less">
.shopping-checkbox {}
.shopping-action {
padding-left: 34rpx;
flex: 1;
display: flex;
justify-content: space-between;
&-checkbox {
flex: 1
}
&-total {
line-height: 48rpx;
font-size: 34rpx;
color: #333333;
margin-right: 10rpx;
}
&-btn {
width: 224rpx;
}
<style lang="scss">
.upload-warp {
width: 750rpx;
}
</style>