settings.vue
4.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<template>
<view class="page-shell settings-page">
<view class="page-blur"></view>
<view class="page-blur-secondary"></view>
<view class="page-blur-tertiary"></view>
<view class="page-content subpage-content">
<view class="subpage-nav">
<view class="subpage-back" @tap="goBack">‹</view>
<view class="subpage-title-wrap">
<text class="subpage-title">设置</text>
<text class="subpage-subtitle">把通知、隐私与使用习惯整理得更清晰一些</text>
</view>
</view>
<view class="subpage-card">
<view class="section-head">
<text class="section-title">会员资料</text>
<text class="section-link">编辑资料</text>
</view>
<view class="form-item">
<text class="form-label">昵称</text>
<input v-model="form.NickName" class="form-input" placeholder="请输入昵称" placeholder-class="form-placeholder" />
</view>
<view class="form-item no-border">
<text class="form-label">手机号</text>
<input v-model="form.Phone" class="form-input" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="form-placeholder" />
</view>
<view class="primary-button save-button" @tap="saveInfo">保存资料</view>
</view>
<view class="subpage-card">
<view v-for="item in settings" :key="item.title" class="setting-row">
<view>
<text class="setting-title">{{ item.title }}</text>
<text class="setting-desc">{{ item.desc }}</text>
</view>
<text class="setting-state">{{ item.value }}</text>
</view>
</view>
<view class="subpage-card">
<view class="setting-row no-border">
<view>
<text class="setting-title">账号与安全</text>
<text class="setting-desc">手机号、登录方式与设备安全管理</text>
</view>
<text class="setting-state">已启用</text>
</view>
</view>
</view>
</view>
</template>
<script>
import { getMyInfo, updateMyInfo } from '@/api/mall'
import { getMember, setMember } from '@/utils/auth'
export default {
data() {
const member = getMember() || {}
return {
form: {
NickName: member.nickName || '',
Avatar: member.avatar || '',
Phone: member.phone || ''
},
settings: [
{ title: '预约提醒', desc: '到店前提醒与确认通知', value: '已开启' },
{ title: '订单通知', desc: '核销与自提提醒', value: '已开启' },
{ title: '隐私管理', desc: '会员信息与授权说明', value: '查看' }
]
}
},
onLoad() {
this.loadInfo()
},
methods: {
loadInfo() {
getMyInfo()
.then((data) => {
if (data) {
this.form.NickName = data.nickName || ''
this.form.Avatar = data.avatar || ''
this.form.Phone = data.phone || ''
setMember(data)
}
})
.catch(() => {})
},
saveInfo() {
updateMyInfo({
NickName: this.form.NickName,
Avatar: this.form.Avatar,
Phone: this.form.Phone
})
.then(() => {
const member = getMember() || {}
setMember({ ...member, nickName: this.form.NickName, avatar: this.form.Avatar, phone: this.form.Phone })
uni.showToast({ title: '资料已保存', icon: 'none' })
})
.catch(() => {})
},
goBack() {
uni.navigateBack({ fail: () => uni.redirectTo({ url: '/pages/profile/profile' }) })
}
}
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';
.setting-row {
display: flex;
justify-content: space-between;
gap: 20rpx;
padding: 20rpx 0;
border-bottom: 1rpx solid rgba(100, 140, 118, 0.08);
transition: transform 240ms ease, opacity 240ms ease;
}
.setting-row:active {
transform: translateX(6rpx);
}
.setting-row.no-border,
.setting-row:last-child {
border-bottom: 0;
}
.setting-title,
.setting-desc,
.setting-state {
display: block;
}
.setting-title {
font-size: 28rpx;
font-weight: 600;
}
.setting-desc {
margin-top: 10rpx;
font-size: 23rpx;
line-height: 1.7;
color: $text-secondary;
}
.setting-state {
font-size: 24rpx;
color: $brand-accent;
white-space: nowrap;
}
.form-item {
padding: 18rpx 0;
border-bottom: 1rpx solid rgba(100, 140, 118, 0.08);
}
.form-item.no-border {
border-bottom: 0;
}
.form-label {
display: block;
font-size: 22rpx;
color: $text-tertiary;
letter-spacing: 2rpx;
}
.form-input {
margin-top: 14rpx;
height: 60rpx;
font-size: 30rpx;
color: $text-primary;
}
.form-placeholder {
color: $text-tertiary;
}
.save-button {
width: 100%;
margin-top: 28rpx;
}
</style>