Skip to content

M
mayi-mp-shop
Commit 03befc0a by 李嘉林
Options

个人资料原生也

parent a8290443
Showing with 866 additions and 1 deletions
src/app.json
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
"pages/changeAdr/main", "pages/changeAdr/main",
"pages/downFile/main", "pages/downFile/main",
"pages/wxArticle/main", "pages/wxArticle/main",
"pages/userInfo/main",
"pages/memberCode/main" "pages/memberCode/main"
], ],
"subPackages": [ "subPackages": [
......
src/pages/userInfo/index.vue 0 → 100644
<template>
<div
class="userInfo"
:style="{
'--main-color': themeColor['--main-color'],
'--minor-color': themeColor['--minor-color'],
}"
>
<div class="line"></div>
<!--头像-->
<div class="personal-top">
<div class="updateHeadPic flex flex-cen">
<div class="van-cell__title">
<span>头像</span>
</div>
<div class="van-cell__value">
<!-- <div class="van-field__icon" >
</div>-->
<div class="userPic">
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image
mode="aspectFill"
v-if="userMsg.headPortraitUrl != ''"
:src="userMsg.headPortraitUrl"
/>
<image
v-else
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/jpg/39ada9cc-aff3-4842-8376-9f49e36c5811.jpg"
alt
/>
</button>
</div>
</div>
<van-icon name="arrow" />
</div>
</div>
<div class="line"></div>
<!--个人信息-->
<div class="updateInfo">
<!-- 昵称 -->
<van-field
placeholder="请输入昵称"
:value="userMsg.nickname"
@change="changeNickName"
maxlength="20"
label="昵称"
type="nickname"
class="shuru"
input-align="right"
/>
<van-field
placeholder="请输入姓名"
:value="userMsg.realname"
@change="changeRealName"
maxlength="20"
label="姓名"
class="shuru"
input-align="right"
/>
<!-- 性别 -->
<van-cell
title="性别"
@click="sex_show = true"
:value="sex_list[userMsg.gender]"
is-link
/>
<!-- <div class="covername sex">{{userMsg.gender}}</div> -->
<!-- 设置生日 -->
<div @click="birthShow = true">
<van-cell
v-if="userMsg.birth"
title="生日"
:value="userMsg.birth"
is-link
/>
<van-cell v-else title="生日" value="未设置" is-link />
</div>
<div class="line"></div>
<!--手机-->
<div class="tel flex flex-btw">
<div>手机号</div>
<div
class="font15"
v-if="userMsg.mobilephone"
@click="toUpdateBindPhone"
>
{{ correctTel(userMsg.mobilephone) ? userMsg.mobilephone : "未认证" }}
<van-icon name="arrow" />
</div>
</div>
</div>
<div class="btn-user" @click="submit">保存</div>
<!-- 性别弹出层 -->
<div catchtouchmove="ture">
<van-popup :show="sex_show" position="bottom">
<van-picker
:columns="sex_list"
:show-toolbar="true"
@confirm="chooseSex"
@cancel="chooseSexCancel"
/>
</van-popup>
</div>
<!-- 设置生日弹框 -->
<div catchtouchmove="ture">
<van-popup :show="birthShow" position="bottom">
<van-datetime-picker
:min-date="minDate"
:max-date="maxDate"
:value="currentTime"
type="date"
:show-toolbar="true"
@confirm="chooseBirth"
@cancel="chooseBirthCancel"
/>
</van-popup>
</div>
<!-- <div @click="click">按下试试</div> -->
</div>
</template>
<script>
import live from "@/api/live";
import index from "@/api/index";
import { DFSImg } from "@/utils/index";
import { themeColor } from "../../utils/mayi.js";
import { formatTime } from "@/utils/index";
export default {
name: "userInfo",
data() {
return {
userMsg: {
headPortraitUrl: "",
birth: 0,
realname: "",
mobilephone: "",
nickname: "",
},
imgArr: [],
minDate: new Date(1900, 1, 1).getTime(),
maxDate: new Date().getTime(),
birthShow: false,
sex_show: false,
sex_list: ["女", "男", "未设置"],
imgNumLimit: 1,
currentTime: new Date().getTime(),
currentTime2: new Date().getTime(),
update_info_data: {},
maxSize: 3145728,
themeColor: {
"--main-color": "",
"--minor-color": "",
},
ossConfig: {},
};
},
onLoad() {
console.log("onLoad-----------------");
if (themeColor["--main-color"] != "#ffffff") {
this.themeColor = themeColor;
} else {
this.mpApp.themeColorCallBack = (res) => {
this.themeColor = res;
};
}
this.getUserMsg();
},
methods: {
toUpdateBindPhone() {
if (this.correctTel(this.userMsg.mobilephone)) {
this.$router.push(
"/personalCenter/updateBindPhone?mobilephone=" +
this.userMsg.mobilephone
);
} else {
console.log(this.$store.state.userInfo, "-------------------135");
this.$router.push({
path: "/login/wxRegister",
query: {
openId: this.$store.state.userInfo.wxMiniOpenId,
},
});
}
},
click() {
console.log(999999);
},
// 返回
returnClick() {
// this.$router.back(-1);
//会员信息组件跳转回原组件
if (this.$route.query.memberInfo) {
this.$router.back(-1);
} else {
this.$router.push("/personalCenter");
}
},
getUserMsg() {
live.getUserInfo().then((res) => {
let result = res.data.data;
this.userMsg = result;
this.userMsg.birth = this.userMsg.birth
? this.userMsg.birth.replace(/\-/g, "/")
: "";
this.userMsg.headPortraitUrl = DFSImg(
this.userMsg.headPortraitUrl,
400,
400,
1
);
console.log(this.userMsg, "--------------userMsg");
});
},
changeNickName(val) {
this.userMsg.nickname = val.mp.detail;
},
changeRealName(val) {
this.userMsg.realname = val.mp.detail;
},
submit() {
// 获取需要提供的数据
// this.userMsg.headPortraitUrl=this.uploadImg;
this.update_info_data.userId = this.userMsg.userId;
this.update_info_data.mobilephone = this.userMsg.mobilephone;
this.update_info_data.nickname = this.userMsg.nickname;
this.update_info_data.birth = this.userMsg.birth
? `${this.userMsg.birth} 00:00:00`
: "";
this.update_info_data.gender = this.userMsg.gender.toString();
this.update_info_data.headPortraitUrl = this.userMsg.headPortraitUrl;
this.update_info_data.realname = this.userMsg.realname;
if (this.userMsg.nickname == "" || this.userMsg.nickname == " ") {
wx.showToast({
title: "昵称不得为空",
icon: "none",
duration: 2000,
});
return;
}
if (this.userMsg.nickname.length > 20) {
wx.showToast({
title: "昵称不得超过20个字符",
icon: "none",
duration: 2000,
});
return;
}
index.update_info(this.update_info_data).then((res) => {
if (res.data.code == 200) {
this.currentTime = this.userMsg.birth;
wx.showToast({
title: "保存成功",
icon: "success",
duration: 2000,
});
} else {
wx.showToast({
title: res.data.msg,
icon: "none",
duration: 2000,
});
}
});
},
// onRead(file) {
// console.log(file)
// this.uploadImg = file.content;
// let uploadImgReq = this.uploadImg
// common.getUploadImg({uploadImgReq:uploadImgReq}).then(res => {
// console.log(res);
// })
// },
chooseSex(value) {
console.log(value, "------------------264");
let val = value.mp.detail.index;
this.userMsg.gender = val;
// if (val == "女") {
// } else if (val == "男") {
// this.userMsg.gender = 1;
// } else {
// this.userMsg.gender = 2;
// }
this.sex_show = false;
},
chooseSexCancel() {
this.sex_show = false;
},
chooseBirth(val) {
console.log(
val,
formatTime(new Date(val.mp.detail)).split(" ")[0].replace(/\//g, "-"),
"----------val"
);
let brith = formatTime(new Date(val.mp.detail))
.split(" ")[0]
.replace(/\//g, "-");
this.userMsg.birth = brith;
this.birthShow = false;
},
chooseBirthCancel() {
this.birthShow = false;
},
// 校验真实手机号
correctTel(val) {
return /^1\d{10}$/.test(val);
},
sexTransform(value) {
console.log(value, "--------------249");
if (value == 0) {
return "女";
} else if (value == 1) {
return "男";
} else {
return "未设置";
}
},
onChooseAvatar(val) {
let userImg = val.mp.detail.avatarUrl;
console.log(userImg, "---------------------299");
let _this = this;
wx.showLoading({
title: '上传中...',
})
this.get_oss_config(()=>{
let fileName = `${_this.ossConfig.dir}${userImg.split("/").pop()}`;
console.log(fileName,'----------fileName')
wx.uploadFile({
url: `${_this.ossConfig.host}`,
filePath: userImg,
name: "file",
formData: {
key: fileName,
OSSAccessKeyId: _this.ossConfig.accessid,
policy: _this.ossConfig.policy,
signature: _this.ossConfig.signature,
success_action_status: "200",
},
success(res) {
if (res.statusCode == 200) {
let host =
_this.ossConfig.host.substr(-1) == "/"
? _this.ossConfig.host
: `${_this.ossConfig.host}/`;
_this.userMsg.headPortraitUrl = `${host}${fileName}`;
console.log(_this.userMsg.headPortraitUrl,'---_this.userMsg.headPortraitUrl')
wx.hideLoading();
}
//do something
},
fail(res) {
console.log(res, "-----------------fail");
wx.showToast({
title: "上传失败",
icon: "error",
duration: 1000,
});
},
});
});
},
random_string(len) {
len = len || 32;
let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
let maxPos = chars.length;
let pwd = "";
for (let i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
},
get_oss_config(callback=()=>{}) {
index.get_oss_config().then((res) => {
console.log(res.data,'-------------------------res375')
this.ossConfig = res.data;
console.log(this.ossConfig, "--ossConfig");
callback();
});
},
},
};
</script>
<style scoped lang="scss">
.line {
height: 10px;
background-color: #f5f5f5;
}
.r {
margin-right: 18px;
}
i {
font-size: 18px;
}
.font15 {
font-size: 15px;
color: #929292;
}
.userInfo {
.personal-top {
width: 100%;
height: 80px;
position: relative;
.updateHeadPic {
height: 80px;
padding: 0 17px 0 15px;
.userPic {
width: 58px;
height: 58px;
border-radius: 50%;
overflow: hidden;
border: 1px solid #acacac;
margin-left: 80px;
button {
width: 100%;
height: 100%;
padding: 0;
}
image {
width: 100%;
height: 100%;
}
}
.uploader {
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
right: 0;
}
.van-cell__title {
flex: 1;
font-size: 15px;
font-weight: bold;
color: #191919;
}
.van-cell__value {
}
.van-cell:not(:last-child)::after {
right: 15px;
border-color: #dbdbdb;
}
}
}
.updateInfo {
position: relative;
width: 100%;
.van-cell {
width: 100%;
height: 55px;
// border-bottom: 1px solid #f0f2f5;
display: flex;
justify-content: space-between;
align-items: center;
}
.covername {
width: 45px;
height: 15px;
position: absolute;
right: 18px;
top: 20px;
font-size: 15px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: rgba(146, 146, 146, 1);
}
.sex {
top: 70px;
}
.rightIco {
padding-right: 14px;
color: #929292;
}
}
.tel {
height: 55px;
padding: 0 15px 0 15px;
font-size: 15px;
i {
vertical-align: text-top;
}
}
.btn-user {
position: fixed;
bottom: 20px;
width: 350px;
height: 44px;
line-height: 44px;
background: var(--main-color);
border-radius: 4px;
left: 50%;
margin-left: -175px;
font-size: 17px;
color: #ffffff;
text-align: center;
}
}
/deep/ .van-cell__title,
.van-cell__value {
font-size: 15px;
}
</style>
src/pages/userInfo/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/userInfo/main.json 0 → 100644
{
"usingComponents": {
"van-popup": "/static/vant/popup/index",
"van-picker": "/static/vant/picker/index",
"van-field": "/static/vant/field/index",
"van-datetime-picker": "/static/vant/datetime-picker/index",
"van-cell": "/static/vant/cell/index",
"van-icon": "/static/vant/icon/index"
},
"backgroundColor": "#f5f5f5"
}
\ No newline at end of file
static/css/common.css
...@@ -15,3 +15,13 @@ ...@@ -15,3 +15,13 @@
.flex { .flex {
display: flex; display: flex;
} }
.flex-btw {
justify-content: space-between;
align-items: center;
}
.flex-cen {
justify-content: center;
align-items: center;
}
static/css/common.min.css
.text-overflow{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text-overflow2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.flex{display:flex} .text-overflow{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text-overflow2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.flex{display:flex}.flex-btw{justify-content:space-between;align-items:center}.flex-cen{justify-content:center;align-items:center}
static/css/common.scss
...@@ -15,6 +15,16 @@ ...@@ -15,6 +15,16 @@
display: flex; display: flex;
} }
.flex-btw {
justify-content: space-between;
align-items: center;
}
.flex-cen {
justify-content: center;
align-items: center;
}
@mixin btn { @mixin btn {
width: 148px; width: 148px;
height: 40px; height: 40px;
......
static/vant/datetime-picker/index.js 0 → 100644
import { VantComponent } from '../common/component';
import { isDef } from '../common/validator';
import { pickerProps } from '../picker/shared';
const currentYear = new Date().getFullYear();
function isValidDate(date) {
return isDef(date) && !isNaN(new Date(date).getTime());
}
function range(num, min, max) {
return Math.min(Math.max(num, min), max);
}
function padZero(val) {
return `00${val}`.slice(-2);
}
function times(n, iteratee) {
let index = -1;
const result = Array(n < 0 ? 0 : n);
while (++index < n) {
result[index] = iteratee(index);
}
return result;
}
function getTrueValue(formattedValue) {
if (formattedValue === undefined) {
formattedValue = '1';
}
while (isNaN(parseInt(formattedValue, 10))) {
formattedValue = formattedValue.slice(1);
}
return parseInt(formattedValue, 10);
}
function getMonthEndDay(year, month) {
return 32 - new Date(year, month - 1, 32).getDate();
}
const defaultFormatter = (type, value) => value;
VantComponent({
classes: ['active-class', 'toolbar-class', 'column-class'],
props: Object.assign(Object.assign({}, pickerProps), { value: {
type: null,
observer: 'updateValue',
}, filter: null, type: {
type: String,
value: 'datetime',
observer: 'updateValue',
}, showToolbar: {
type: Boolean,
value: true,
}, formatter: {
type: null,
value: defaultFormatter,
}, minDate: {
type: Number,
value: new Date(currentYear - 10, 0, 1).getTime(),
observer: 'updateValue',
}, maxDate: {
type: Number,
value: new Date(currentYear + 10, 11, 31).getTime(),
observer: 'updateValue',
}, minHour: {
type: Number,
value: 0,
observer: 'updateValue',
}, maxHour: {
type: Number,
value: 23,
observer: 'updateValue',
}, minMinute: {
type: Number,
value: 0,
observer: 'updateValue',
}, maxMinute: {
type: Number,
value: 59,
observer: 'updateValue',
} }),
data: {
innerValue: Date.now(),
columns: [],
},
methods: {
updateValue() {
const { data } = this;
const val = this.correctValue(data.value);
const isEqual = val === data.innerValue;
this.updateColumnValue(val).then(() => {
if (!isEqual) {
this.$emit('input', val);
}
});
},
getPicker() {
if (this.picker == null) {
this.picker = this.selectComponent('.van-datetime-picker');
const { picker } = this;
const { setColumnValues } = picker;
picker.setColumnValues = (...args) => setColumnValues.apply(picker, [...args, false]);
}
return this.picker;
},
updateColumns() {
const { formatter = defaultFormatter } = this.data;
const results = this.getOriginColumns().map((column) => ({
values: column.values.map((value) => formatter(column.type, value)),
}));
return this.set({ columns: results });
},
getOriginColumns() {
const { filter } = this.data;
const results = this.getRanges().map(({ type, range }) => {
let values = times(range[1] - range[0] + 1, (index) => {
const value = range[0] + index;
return type === 'year' ? `${value}` : padZero(value);
});
if (filter) {
values = filter(type, values);
}
return { type, values };
});
return results;
},
getRanges() {
const { data } = this;
if (data.type === 'time') {
return [
{
type: 'hour',
range: [data.minHour, data.maxHour],
},
{
type: 'minute',
range: [data.minMinute, data.maxMinute],
},
];
}
const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', data.innerValue);
const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', data.innerValue);
const result = [
{
type: 'year',
range: [minYear, maxYear],
},
{
type: 'month',
range: [minMonth, maxMonth],
},
{
type: 'day',
range: [minDate, maxDate],
},
{
type: 'hour',
range: [minHour, maxHour],
},
{
type: 'minute',
range: [minMinute, maxMinute],
},
];
if (data.type === 'date')
result.splice(3, 2);
if (data.type === 'year-month')
result.splice(2, 3);
return result;
},
correctValue(value) {
const { data } = this;
// validate value
const isDateType = data.type !== 'time';
if (isDateType && !isValidDate(value)) {
value = data.minDate;
}
else if (!isDateType && !value) {
const { minHour } = data;
value = `${padZero(minHour)}:00`;
}
// time type
if (!isDateType) {
let [hour, minute] = value.split(':');
hour = padZero(range(hour, data.minHour, data.maxHour));
minute = padZero(range(minute, data.minMinute, data.maxMinute));
return `${hour}:${minute}`;
}
// date type
value = Math.max(value, data.minDate);
value = Math.min(value, data.maxDate);
return value;
},
getBoundary(type, innerValue) {
const value = new Date(innerValue);
const boundary = new Date(this.data[`${type}Date`]);
const year = boundary.getFullYear();
let month = 1;
let date = 1;
let hour = 0;
let minute = 0;
if (type === 'max') {
month = 12;
date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
hour = 23;
minute = 59;
}
if (value.getFullYear() === year) {
month = boundary.getMonth() + 1;
if (value.getMonth() + 1 === month) {
date = boundary.getDate();
if (value.getDate() === date) {
hour = boundary.getHours();
if (value.getHours() === hour) {
minute = boundary.getMinutes();
}
}
}
}
return {
[`${type}Year`]: year,
[`${type}Month`]: month,
[`${type}Date`]: date,
[`${type}Hour`]: hour,
[`${type}Minute`]: minute,
};
},
onCancel() {
this.$emit('cancel');
},
onConfirm() {
this.$emit('confirm', this.data.innerValue);
},
onChange() {
const { data } = this;
let value;
const picker = this.getPicker();
const originColumns = this.getOriginColumns();
if (data.type === 'time') {
const indexes = picker.getIndexes();
value = `${+originColumns[0].values[indexes[0]]}:${+originColumns[1]
.values[indexes[1]]}`;
}
else {
const indexes = picker.getIndexes();
const values = indexes.map((value, index) => originColumns[index].values[value]);
const year = getTrueValue(values[0]);
const month = getTrueValue(values[1]);
const maxDate = getMonthEndDay(year, month);
let date = getTrueValue(values[2]);
if (data.type === 'year-month') {
date = 1;
}
date = date > maxDate ? maxDate : date;
let hour = 0;
let minute = 0;
if (data.type === 'datetime') {
hour = getTrueValue(values[3]);
minute = getTrueValue(values[4]);
}
value = new Date(year, month - 1, date, hour, minute);
}
value = this.correctValue(value);
this.updateColumnValue(value).then(() => {
this.$emit('input', value);
this.$emit('change', picker);
});
},
updateColumnValue(value) {
let values = [];
const { type } = this.data;
const formatter = this.data.formatter || defaultFormatter;
const picker = this.getPicker();
if (type === 'time') {
const pair = value.split(':');
values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
}
else {
const date = new Date(value);
values = [
formatter('year', `${date.getFullYear()}`),
formatter('month', padZero(date.getMonth() + 1)),
];
if (type === 'date') {
values.push(formatter('day', padZero(date.getDate())));
}
if (type === 'datetime') {
values.push(formatter('day', padZero(date.getDate())), formatter('hour', padZero(date.getHours())), formatter('minute', padZero(date.getMinutes())));
}
}
return this.set({ innerValue: value })
.then(() => this.updateColumns())
.then(() => picker.setValues(values));
},
},
created() {
const innerValue = this.correctValue(this.data.value);
this.updateColumnValue(innerValue).then(() => {
this.$emit('input', innerValue);
});
},
});
static/vant/datetime-picker/index.json 0 → 100644
{
"component": true,
"usingComponents": {
"van-picker": "../picker/index"
}
}
static/vant/datetime-picker/index.wxml 0 → 100644
<van-picker
class="van-datetime-picker"
active-class="active-class"
toolbar-class="toolbar-class"
column-class="column-class"
title="{{ title }}"
columns="{{ columns }}"
item-height="{{ itemHeight }}"
show-toolbar="{{ showToolbar }}"
visible-item-count="{{ visibleItemCount }}"
confirm-button-text="{{ confirmButtonText }}"
cancel-button-text="{{ cancelButtonText }}"
bind:change="onChange"
bind:confirm="onConfirm"
bind:cancel="onCancel"
/>
static/vant/datetime-picker/index.wxss 0 → 100644
@import '../common/index.wxss';
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment