5c34676a
 “wangming”
对会员端进行了设计
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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">
|
|
e1dcb3a0
“wangming”
1
|
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<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">
|
|
5c34676a
“wangming”
对会员端进行了设计
|
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<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>
|
|
e1dcb3a0
“wangming”
1
|
56
57
58
|
import { getMyInfo, updateMyInfo } from '@/api/mall'
import { getMember, setMember } from '@/utils/auth'
|
|
5c34676a
“wangming”
对会员端进行了设计
|
59
60
|
export default {
data() {
|
|
e1dcb3a0
“wangming”
1
|
61
|
const member = getMember() || {}
|
|
5c34676a
“wangming”
对会员端进行了设计
|
62
|
return {
|
|
e1dcb3a0
“wangming”
1
|
63
64
65
66
67
|
form: {
NickName: member.nickName || '',
Avatar: member.avatar || '',
Phone: member.phone || ''
},
|
|
5c34676a
“wangming”
对会员端进行了设计
|
68
69
|
settings: [
{ title: '预约提醒', desc: '到店前提醒与确认通知', value: '已开启' },
|
|
d8035736
“wangming”
Refactor project ...
|
70
|
{ title: '订单通知', desc: '核销与自提提醒', value: '已开启' },
|
|
5c34676a
“wangming”
对会员端进行了设计
|
71
72
73
74
|
{ title: '隐私管理', desc: '会员信息与授权说明', value: '查看' }
]
}
},
|
|
e1dcb3a0
“wangming”
1
|
75
76
77
|
onLoad() {
this.loadInfo()
},
|
|
5c34676a
“wangming”
对会员端进行了设计
|
78
|
methods: {
|
|
e1dcb3a0
“wangming”
1
|
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
|
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(() => {})
},
|
|
5c34676a
“wangming”
对会员端进行了设计
|
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
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);
|
|
d8035736
“wangming”
Refactor project ...
|
121
122
123
124
125
|
transition: transform 240ms ease, opacity 240ms ease;
}
.setting-row:active {
transform: translateX(6rpx);
|
|
5c34676a
“wangming”
对会员端进行了设计
|
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
|
}
.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;
}
|
|
e1dcb3a0
“wangming”
1
|
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
|
.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;
}
|
|
5c34676a
“wangming”
对会员端进行了设计
|
188
|
</style>
|
