address-edit.vue
3.11 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
<template>
<view class="page-shell address-edit-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">{{ pageTitle }}</text>
<text class="subpage-subtitle">以简洁的方式，保留你最常用的配送信息</text>
</view>
</view>
<view class="subpage-card">
<view class="form-item">
<text class="form-label">收货人</text>
<view class="form-field">{{ form.name }}</view>
</view>
<view class="form-item">
<text class="form-label">手机号</text>
<view class="form-field">{{ form.phone }}</view>
</view>
<view class="form-item">
<text class="form-label">地址标签</text>
<view class="form-field">{{ form.tag }}</view>
</view>
<view class="form-item no-border">
<text class="form-label">详细地址</text>
<view class="form-field multiline">{{ form.full }}</view>
</view>
</view>
<view class="cta-row">
<view class="secondary-button" @tap="removeAddress">删除</view>
<view class="primary-button" @tap="saveAddress">保存地址</view>
</view>
</view>
</view>
</template>
<script>
import { findAddressById } from '@/data/mock'
export default {
data() {
return {
mode: 'edit',
form: findAddressById(1)
}
},
computed: {
pageTitle() {
return this.mode === 'create' ? '新增地址' : '编辑地址'
}
},
onLoad(options) {
this.mode = options.mode || 'edit'
if (options.id) {
this.form = findAddressById(options.id)
} else if (this.mode === 'create') {
this.form = {
name: '林小姐',
phone: '138****5628',
tag: '新地址',
full: '请填写收货地址'
}
}
},
methods: {
goBack() {
uni.navigateBack({ fail: () => uni.redirectTo({ url: '/pages/address-list/address-list' }) })
},
saveAddress() {
uni.showToast({ title: '地址已保存', icon: 'none' })
setTimeout(() => {
uni.redirectTo({ url: '/pages/address-list/address-list' })
}, 300)
},
removeAddress() {
uni.showToast({ title: this.mode === 'create' ? '已取消新增' : '地址已删除', icon: 'none' })
setTimeout(() => {
uni.redirectTo({ url: '/pages/address-list/address-list' })
}, 300)
}
}
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';
.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-field {
margin-top: 14rpx;
font-size: 30rpx;
font-weight: 600;
color: $text-primary;
}
.form-field.multiline {
line-height: 1.8;
}
</style>