Commit cd8561baec1722c6874a76f4610010f490289a3c

Authored by 尹聃
Exists in master

Merge branch 'master' of 121.40.31.31:jp/gulu-vue

src/pages/address/addAddress.vue
1 <template> 1 <template>
2 <form 2 <form
3 class="wrap" 3 class="wrap"
4 @submit="formSubmit" 4 @submit="formSubmit"
5 @reset="formReset" 5 @reset="formReset"
6 > 6 >
7 <view class="content"> 7 <view class="content">
8 <view class="item,name"> 8 <view class="item,name">
9 <text class="itemText">姓名</text> 9 <text class="itemText">姓名</text>
10 <input 10 <input
11 placeholder="收货人姓名(真实姓名)" 11 placeholder="收货人姓名(真实姓名)"
12 placeholder-style="color:#B8B8B8" 12 placeholder-style="color:#B8B8B8"
13 name="name" 13 name="name"
14 :value="name" 14 :value="name"
15 /> 15 />
16 </view> 16 </view>
17 <view class="item,phone"> 17 <view class="item,phone">
18 <text class="itemText">电话</text> 18 <text class="itemText">电话</text>
19 <input 19 <input
20 placeholder="手机号" 20 placeholder="手机号"
21 type="digit" 21 type="digit"
22 placeholder-style="color:#B8B8B8" 22 placeholder-style="color:#B8B8B8"
23 name="mobile" 23 name="mobile"
24 v-model="mobile" 24 v-model="mobile"
25 /> 25 />
26 </view> 26 </view>
27 <view class="item,phone"> 27 <view class="item,phone">
28 <text class="itemText">性别</text> 28 <text class="itemText">性别</text>
29 <picker 29 <picker
30 @change="bindPickerChange" 30 @change="bindPickerChange"
31 :value="index" 31 :value="index"
32 :range="sexArray" 32 :range="sexArray"
33 name="sex" 33 name="sex"
34 > 34 >
35 <view class="uni-input">{{sexArray[sexIndex]}}</view> 35 <view class="uni-input">{{sexArray[sexIndex]}}</view>
36 </picker> 36 </picker>
37 </view> 37 </view>
38 <view class="item,area"> 38 <view class="item,area">
39 <text class="itemText">地区</text> 39 <text class="itemText">地区</text>
40 <view 40 <view
41 class="btn" 41 class="btn"
42 v-if="pickerText===''" 42 v-if="pickerText===''"
43 @tap="openAddres" 43 @tap="openAddres"
44 >选择省/市/区</view> 44 >选择省/市/区</view>
45 <view 45 <view
46 class="btn" 46 class="btn"
47 v-else 47 v-else
48 @tap="openAddres" 48 @tap="openAddres"
49 >{{pickerText}}</view> 49 >{{pickerText}}</view>
50 <simple-address 50 <simple-address
51 ref="SimpleAddress" 51 ref="SimpleAddress"
52 :pickerValueDefault="cityPickerValueDefault" 52 :pickerValueDefault="cityPickerValueDefault"
53 @onConfirm="onConfirm" 53 @onConfirm="onConfirm"
54 themeColor="#007AFF" 54 themeColor="#007AFF"
55 name="address" 55 name="address"
56 ></simple-address> 56 ></simple-address>
57 </view> 57 </view>
58 <view class="item,address"> 58 <view class="item,address">
59 <text class="itemText">详细地址</text> 59 <text class="itemText">详细地址</text>
60 <input 60 <input
61 placeholder="街道、小区门牌等详细地址" 61 placeholder="街道、小区门牌等详细地址"
62 name="addDetail" 62 name="addDetail"
63 :value="addDetial" 63 :value="addDetial"
64 /> 64 />
65 </view> 65 </view>
66 <view class="item,check"> 66 <view class="item,check">
67 <text class="itemText">设为默认地址</text> 67 <text class="itemText">设为默认地址</text>
68 <switch 68 <switch
69 :checked="isDefalutAddress" 69 :checked="isDefalutAddress"
70 color="#FF6B4A" 70 color="#FF6B4A"
71 style="transform:scale(0.6)" 71 style="transform:scale(0.6)"
72 @change="changeDefalutAddress" 72 @change="changeDefalutAddress"
73 name="isDefault" 73 name="isDefault"
74 /> 74 />
75 </view> 75 </view>
76 <input /> 76 <input />
77 </view> 77 </view>
78 <button 78 <button
79 form-type="submit" 79 form-type="submit"
80 class="button" v-if="addId">编辑</button>
81 <button
82 form-type="submit"
80 class="button" 83 class="button"
84 v-else
81 >保存并使用</button> 85 >保存并使用</button>
82 </form> 86 </form>
83 </template> 87 </template>
84 88
85 <script> 89 <script>
86 import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue' 90 import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue'
87 import store from '@/store' 91 import store from '@/store'
88 92
89 export default { 93 export default {
90 data () { 94 data () {
91 return { 95 return {
92 cityPickerValueDefault: [0, 0, 1], 96 cityPickerValueDefault: [0, 0, 1],
93 pickerText: '', 97 pickerText: '',
94 isDefalutAddress: true, 98 isDefalutAddress: true,
95 sexArray: ['男', '女'], 99 sexArray: ['男', '女'],
96 sexIndex: 0, 100 sexIndex: 0,
97 flag: 0, 101 flag: 0,
98 addId: undefined, 102 addId: undefined,
99 name: '', 103 name: '',
100 mobile: '', 104 mobile: '',
101 addDetial: '', 105 addDetial: '',
102 isDefault: 0 106 isDefault: 0
103 } 107 }
104 }, 108 },
105 onLoad (option) { 109 onLoad (option) {
106 const { addId } = option 110 const { addId } = option
107 if (addId) { 111 if (addId) {
108 this.addId = addId 112 this.addId = addId
109 store.dispatch('address/details', { 113 store.dispatch('address/details', {
110 add_id: addId 114 add_id: addId
111 }).then(() => { 115 }).then(() => {
112 uni.setNavigationBarTitle({ 116 uni.setNavigationBarTitle({
113 title: '编辑地址' 117 title: '编辑地址'
114 }) 118 })
115 const { name, mobile, sex, add_detail: addDetial, default: isDefault } = this.$store.state.address.details 119 const { name, mobile, sex, add_detail: addDetial, default: isDefault } = this.$store.state.address.details
116 console.log('---', this.$store.state.address.details) 120 console.log('---', this.$store.state.address.details)
117 const index = this.$refs.SimpleAddress.queryIndex(this.$store.state.address.details.address.split('-'), 'label') 121 const index = this.$refs.SimpleAddress.queryIndex(this.$store.state.address.details.address.split('-'), 'label')
118 this.cityPickerValueDefault = index.index 122 this.cityPickerValueDefault = index.index
119 this.name = name 123 this.name = name
120 this.mobile = Number(mobile) 124 this.mobile = Number(mobile)
121 this.sexIndex = sex 125 this.sexIndex = sex
122 this.addDetial = addDetial 126 this.addDetial = addDetial
123 this.isDefalutAddress = !!Number(isDefault) 127 this.isDefalutAddress = !!Number(isDefault)
124 }) 128 })
125 } 129 }
126 }, 130 },
127 components: { 131 components: {
128 SimpleAddress 132 SimpleAddress
129 }, 133 },
130 methods: { 134 methods: {
131 openAddres () { 135 openAddres () {
132 this.cityPickerValueDefault = [0, 0, 1] 136 this.cityPickerValueDefault = [0, 0, 1]
133 this.$refs.SimpleAddress.open() 137 this.$refs.SimpleAddress.open()
134 }, 138 },
135 onConfirm (e) { 139 onConfirm (e) {
136 this.pickerText = e.label 140 this.pickerText = e.label
137 console.log('lll', e, this.pickerText) 141 console.log('lll', e, this.pickerText)
138 }, 142 },
139 changeDefalutAddress (e) { 143 changeDefalutAddress (e) {
140 this.isDefalutAddress = e.target.value 144 this.isDefalutAddress = e.target.value
141 }, 145 },
142 bindPickerChange (e) { 146 bindPickerChange (e) {
143 console.log('picker发送选择改变,携带值为', e.target.value) 147 console.log('picker发送选择改变,携带值为', e.target.value)
144 this.sexIndex = e.target.value 148 this.sexIndex = e.target.value
145 }, 149 },
146 formValidation (formdata) { 150 formValidation (formdata) {
147 const { name, mobile, addDetail } = formdata 151 const { name, mobile, addDetail } = formdata
148 this.flag = false 152 this.flag = false
149 if (name === '') { 153 if (name === '') {
150 uni.showModal({ 154 uni.showModal({
151 content: '请输入姓名', 155 content: '请输入姓名',
152 showCancel: false 156 showCancel: false
153 }) 157 })
154 return 0 158 return 0
155 } 159 }
156 if (!(/^1[3456789]\d{9}$/.test(mobile))) { 160 if (!(/^1[3456789]\d{9}$/.test(mobile))) {
157 uni.showModal({ 161 uni.showModal({
158 content: '请输入正确的手机号', 162 content: '请输入正确的手机号',
159 showCancel: false 163 showCancel: false
160 }) 164 })
161 return 0 165 return 0
162 } 166 }
163 if (this.pickerText === '') { 167 if (this.pickerText === '') {
164 uni.showModal({ 168 uni.showModal({
165 content: '请选择收货地区', 169 content: '请选择收货地区',
166 showCancel: false 170 showCancel: false
167 }) 171 })
168 return 0 172 return 0
169 } 173 }
170 if (addDetail === '') { 174 if (addDetail === '') {
171 uni.showModal({ 175 uni.showModal({
172 content: '请输入收货详细地址', 176 content: '请输入收货详细地址',
173 showCancel: false 177 showCancel: false
174 }) 178 })
175 return 0 179 return 0
176 } 180 }
177 this.flag = true 181 this.flag = true
178 }, 182 },
179 formSubmit (e) { 183 formSubmit (e) {
180 const formdata = e.detail.value 184 const formdata = e.detail.value
181 this.formValidation(formdata) 185 this.formValidation(formdata)
182 186
183 const { name, mobile, addDetail, isDefault } = formdata 187 const { name, mobile, addDetail, isDefault } = formdata
184 if (this.flag === true) { 188 if (this.flag === true) {
185 const params = { 189 const params = {
186 sex: this.sexIndex, 190 sex: this.sexIndex,
187 name, 191 name,
188 address: this.pickerText, 192 address: this.pickerText,
189 mobile, 193 mobile,
190 default: isDefault ? 1 : 0, 194 default: isDefault ? 1 : 0,
191 add_detail: addDetail, 195 add_detail: addDetail,
192 longitude: 1, 196 longitude: 1,
193 latitude: 1 197 latitude: 1
194 } 198 }
195 if (this.addId) { 199 if (this.addId) {
196 params.add_id = this.addId 200 params.add_id = this.addId
197 } 201 }
198 store.dispatch('address/edit', params) 202 store.dispatch('address/edit', params).then(() => {
203 uni.navigateBack({
204 delta: 1
205 })
206 })
199 } 207 }
200 } 208 }
201 } 209 }
202 } 210 }
203 </script> 211 </script>
204 212
205 <style lang="scss"> 213 <style lang="scss">
206 .wrap { 214 .wrap {
207 height: 100vh; 215 height: 100vh;
208 background-color: #f2f2f2; 216 background-color: #f2f2f2;
209 font-family: PingFangSC-Regular; 217 font-family: PingFangSC-Regular;
210 letter-spacing: -0.23px; 218 letter-spacing: -0.23px;
211 padding-top: 19rpx; 219 padding-top: 19rpx;
212 } 220 }
213 .content { 221 .content {
214 background-color: #ffffff; 222 background-color: #ffffff;
215 border-radius: 8px; 223 border-radius: 8px;
216 border-radius: 8px; 224 border-radius: 8px;
217 padding: 40rpx 56rpx; 225 padding: 40rpx 56rpx;
218 margin-left: 40rpx; 226 margin-left: 40rpx;
219 width: 670rpx; 227 width: 670rpx;
220 box-sizing: border-box; 228 box-sizing: border-box;
221 .item { 229 .item {
222 display: flex; 230 display: flex;
223 justify-content: flex-start; 231 justify-content: flex-start;
224 font-size: 14px; 232 font-size: 14px;
225 align-items: center; 233 align-items: center;
226 height: 112rpx; 234 height: 112rpx;
227 border-bottom: 1rpx solid #e9e9e9; 235 border-bottom: 1rpx solid #e9e9e9;
228 .itemText { 236 .itemText {
229 width: 162rpx; 237 width: 162rpx;
230 font-family: PingFangSC-Regular; 238 font-family: PingFangSC-Regular;
231 letter-spacing: -0.26px; 239 letter-spacing: -0.26px;
232 } 240 }
233 .btn { 241 .btn {
234 color: #333333 !important; 242 color: #333333 !important;
235 } 243 }
236 } 244 }
237 .check { 245 .check {
238 justify-content: space-between; 246 justify-content: space-between;
239 } 247 }
240 } 248 }
241 .button { 249 .button {
242 position: fixed; 250 position: fixed;
243 bottom: 0; 251 bottom: 0;
244 left: 0; 252 left: 0;
245 height: 112rpx; 253 height: 112rpx;
246 width: 100%; 254 width: 100%;
247 background: #ff6b4a; 255 background: #ff6b4a;
248 display: flex; 256 display: flex;
249 justify-content: center; 257 justify-content: center;
250 align-items: center; 258 align-items: center;
251 font-size: 16px; 259 font-size: 16px;
252 color: #ffffff; 260 color: #ffffff;
253 letter-spacing: -0.3px; 261 letter-spacing: -0.3px;
254 } 262 }
255 </style> 263 </style>
256 264
src/pages/address/addressList.vue
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view 3 <view
4 v-if="addressList.length !== 0" 4 v-if="addressList.length !== 0"
5 class="list" 5 class="list"
6 > 6 >
7 <view 7 <view
8 v-for="(item, index) in addressList" 8 v-for="(item, index) in addressList"
9 :key="index" 9 :key="index"
10 class="order-user" 10 class="order-user"
11 @tap="toOrder(item.add_id)" 11 @tap="toOrder(item.add_id)"
12 > 12 >
13 <view class="order-user-head"> 13 <view class="order-user-head">
14 <view class="name"> 14 <view class="name">
15 <view 15 <view
16 v-if="item.default === '1'" 16 v-if="item.default === '1'"
17 class="default" 17 class="default"
18 ><text>默认</text></view>{{item.name}} 18 ><text>默认</text></view>{{item.name}}
19 </view> 19 </view>
20 <text class="mobile">{{item.mobile}}</text> 20 <text class="mobile">{{item.mobile}}</text>
21 </view> 21 </view>
22 <view class="order-user-body"> 22 <view class="order-user-body">
23 <image src="../../static/myorder-paying-location.png"></image> 23 <image src="../../static/myorder-paying-location.png"></image>
24 <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text> 24 <text class="address">{{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}}</text>
25 </view> 25 </view>
26 <image 26 <image
27 @tap="toEditAddress(item.add_id)" 27 @tap="toEditAddress(item.add_id)"
28 v-if="item.default === '1'" 28 v-if="item.default === '1'"
29 class="arrow" 29 class="arrow"
30 src="../../static/right.png" 30 src="../../static/right.png"
31 ></image> 31 ></image>
32 <image 32 <image
33 @tap="toEditAddress(item.add_id)" 33 @tap="toEditAddress(item.add_id)"
34 v-else 34 v-else
35 class="arrow pen" 35 class="arrow pen"
36 src="../../static/icon-pen.png" 36 src="../../static/icon-pen.png"
37 ></image> 37 ></image>
38 </view> 38 </view>
39 </view> 39 </view>
40 <view 40 <view
41 v-else 41 v-else
42 class="empty" 42 class="empty"
43 > 43 >
44 暂无收货地址 44 暂无收货地址
45 </view> 45 </view>
46 <button class="add">新建收货地址</button> 46 <button @tap="toAddAddress" class="add">新建收货地址</button>
47 </view> 47 </view>
48 </template> 48 </template>
49 49
50 <script> 50 <script>
51 import store from '@/store' 51 import store from '@/store'
52 export default { 52 export default {
53 data () { 53 data () {
54 return {} 54 return {}
55 }, 55 },
56 computed: { 56 computed: {
57 addressList () { 57 addressList () {
58 return this.$store.state.address.list 58 return this.$store.state.address.list
59 } 59 }
60 }, 60 },
61 onLoad ({ edit }) { 61 onLoad ({ edit }) {
62 if (edit) { 62 if (edit) {
63 this.edit = true 63 this.edit = true
64 } 64 }
65 store.dispatch('address/list') 65 store.dispatch('address/list')
66 }, 66 },
67 methods: { 67 methods: {
68 toAddAddress() {
69 console.log('aaaaa-a')
70 uni.navigateTo({
71 url: 'addAddress',
72 fail: (error) => {
73 console.error('跳转出现错误', error)
74 }
75 })
76 },
68 toEditAddress (addId) { 77 toEditAddress (addId) {
69 console.log('addId', addId) 78 console.log('addId', addId)
70 uni.navigateTo({ 79 uni.navigateTo({
71 url: `addAddress?addId=${addId}`, 80 url: `addAddress?addId=${addId}`,
72 fail: (error) => { 81 fail: (error) => {
73 console.error('跳转出现错误', error) 82 console.error('跳转出现错误', error)
74 } 83 }
75 }) 84 })
76 }, 85 },
77 toOrder (addId) { 86 toOrder (addId) {
78 if (this.edit) { 87 if (this.edit) {
79 uni.navigateTo({ 88 uni.navigateTo({
80 url: `../confirmOrder/confirmOrder?addressId=${addId}`, 89 url: `../confirmOrder/confirmOrder?addressId=${addId}`,
81 fail: (error) => { 90 fail: (error) => {
82 console.error('跳转出现错误', error) 91 console.error('跳转出现错误', error)
83 } 92 }
84 }) 93 })
85 } 94 }
86 } 95 }
87 } 96 }
88 } 97 }
89 </script> 98 </script>
90 99
91 <style lang="scss"> 100 <style lang="scss">
92 .content { 101 .content {
93 min-height: 100vh; 102 min-height: 100vh;
94 background-color: #f2f2f2; 103 background-color: #f2f2f2;
95 padding-top: 20rpx; 104 padding-top: 20rpx;
96 padding-bottom: 112rpx; 105 padding-bottom: 112rpx;
97 .order-user { 106 .order-user {
98 width: 670rpx; 107 width: 670rpx;
99 height: 228rpx; 108 height: 228rpx;
100 background: #ffffff; 109 background: #ffffff;
101 border-radius: 14rpx; 110 border-radius: 14rpx;
102 margin: 0 auto; 111 margin: 0 auto;
103 margin-bottom: 20rpx; 112 margin-bottom: 20rpx;
104 position: relative; 113 position: relative;
105 .order-user-head { 114 .order-user-head {
106 display: flex; 115 display: flex;
107 height: 108rpx; 116 height: 108rpx;
108 width: 100%; 117 width: 100%;
109 align-items: center; 118 align-items: center;
110 margin-left: 126rpx; 119 margin-left: 126rpx;
111 .name { 120 .name {
112 display: flex; 121 display: flex;
113 justify-content: space-between; 122 justify-content: space-between;
114 font-size: 14px; 123 font-size: 14px;
115 color: #333333; 124 color: #333333;
116 letter-spacing: -0.26px; 125 letter-spacing: -0.26px;
117 margin-right: 20rpx; 126 margin-right: 20rpx;
118 .default { 127 .default {
119 height: 40rpx; 128 height: 40rpx;
120 width: 80rpx; 129 width: 80rpx;
121 background-color: #4a90e2; 130 background-color: #4a90e2;
122 border-radius: 13px; 131 border-radius: 13px;
123 border-radius: 13px; 132 border-radius: 13px;
124 text-align: center; 133 text-align: center;
125 margin-right: 20rpx; 134 margin-right: 20rpx;
126 text { 135 text {
127 font-size: 12px; 136 font-size: 12px;
128 color: #ffffff; 137 color: #ffffff;
129 letter-spacing: -0.23px; 138 letter-spacing: -0.23px;
130 } 139 }
131 } 140 }
132 } 141 }
133 .mobile { 142 .mobile {
134 font-size: 14px; 143 font-size: 14px;
135 color: #999999; 144 color: #999999;
136 letter-spacing: -0.26px; 145 letter-spacing: -0.26px;
137 } 146 }
138 } 147 }
139 .order-user-body { 148 .order-user-body {
140 display: flex; 149 display: flex;
141 width: 100%; 150 width: 100%;
142 image { 151 image {
143 width: 24px; 152 width: 24px;
144 height: 26px; 153 height: 26px;
145 margin: 12rpx 32rpx 0 40rpx; 154 margin: 12rpx 32rpx 0 40rpx;
146 } 155 }
147 .address { 156 .address {
148 font-weight: bold; 157 font-weight: bold;
149 font-size: 14px; 158 font-size: 14px;
150 color: #333333; 159 color: #333333;
151 letter-spacing: -0.26px; 160 letter-spacing: -0.26px;
152 } 161 }
153 } 162 }
154 .arrow { 163 .arrow {
155 width: 6px; 164 width: 6px;
156 height: 12px; 165 height: 12px;
157 position: absolute; 166 position: absolute;
158 right: 40rpx; 167 right: 40rpx;
159 bottom: 104rpx; 168 bottom: 104rpx;
160 } 169 }
161 } 170 }
162 .empty { 171 .empty {
163 color: #666; 172 color: #666;
164 font-size: 16px; 173 font-size: 16px;
165 text-align: center; 174 text-align: center;
166 padding-top: 30vh; 175 padding-top: 30vh;
167 } 176 }
168 .add { 177 .add {
169 position: fixed; 178 position: fixed;
170 bottom: 0; 179 bottom: 0;
171 left: 0; 180 left: 0;
172 height: 112rpx; 181 height: 112rpx;
173 width: 100%; 182 width: 100%;
174 background-color: #ff6b4a; 183 background-color: #ff6b4a;
175 display: flex; 184 display: flex;
176 justify-content: center; 185 justify-content: center;
177 align-items: center; 186 align-items: center;
178 font-size: 16px; 187 font-size: 16px;
179 color: #ffffff; 188 color: #ffffff;
180 letter-spacing: -0.3px; 189 letter-spacing: -0.3px;
181 } 190 }
182 } 191 }
183 </style> 192 </style>
184 193
src/pages/confirmOrder/confirmOrder.vue
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view></view> 3 <view></view>
4 <view 4 <view
5 class="addAddress" 5 class="addAddress"
6 @tap="toaddAddress" 6 @tap="toaddAddress"
7 v-if="this.showAddress" 7 v-if="this.showAddress"
8 > 8 >
9 <view class="addIcon"> 9 <view class="addIcon">
10 <image 10 <image
11 src="../../static/add.png" 11 src="../../static/add.png"
12 mode="aspectFill" 12 mode="aspectFill"
13 ></image> 13 ></image>
14 </view> 14 </view>
15 <view class="addressText">{{addAddress}}</view> 15 <view class="addressText">{{addAddress}}</view>
16 <image 16 <image
17 src="../../static/right.png" 17 src="../../static/right.png"
18 mode="aspectFill" 18 mode="aspectFill"
19 ></image> 19 ></image>
20 </view> 20 </view>
21 <view 21 <view
22 v-else 22 v-else
23 @tap="toaddAddress" 23 @tap="toaddAddress"
24 class="list order-user" 24 class="list order-user"
25 > 25 >
26 <view class="order-user-head"> 26 <view class="order-user-head">
27 <view class="name"> 27 <view class="name">
28 <view 28 <view
29 v-if="addressInfo.default === '1'" 29 v-if="addressInfo.default === '1'"
30 class="default" 30 class="default"
31 ><text>默认</text></view>{{addressInfo.name}} 31 ><text>默认</text></view>{{addressInfo.name}}
32 </view> 32 </view>
33 <text class="mobile">{{addressInfo.mobile}}</text> 33 <text class="mobile">{{addressInfo.mobile}}</text>
34 </view> 34 </view>
35 <view class="order-user-body"> 35 <view class="order-user-body">
36 <image src="../../static/myorder-paying-location.png"></image> 36 <image src="../../static/myorder-paying-location.png"></image>
37 <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text> 37 <text class="address">{{addressInfo.address.replace(/[-]/g,' ')}}\n{{addressInfo.add_detail}}</text>
38 </view> 38 </view>
39 <image 39 <image
40 class="arrow" 40 class="arrow"
41 src="../../static/right.png" 41 src="../../static/right.png"
42 ></image> 42 ></image>
43 </view> 43 </view>
44 <view class="content"> 44 <view class="content">
45 <view class="orderInfo"> 45 <view class="orderInfo">
46 <view class="title"> 46 <view class="title">
47 <image 47 <image
48 src="../../static/store.png" 48 src="../../static/store.png"
49 mode="aspectFill" 49 mode="aspectFill"
50 style="width: 40rpx;height: 40rpx;" 50 style="width: 40rpx;height: 40rpx;"
51 ></image> 51 ></image>
52 <text>非常戴镜</text> 52 <text>非常戴镜</text>
53 </view> 53 </view>
54 <view class="infoBox"> 54 <view class="infoBox">
55 <view class="infoTop"> 55 <view class="infoTop">
56 <image 56 <image
57 :src="goodInfo.img_index_url" 57 :src="goodInfo.img_index_url"
58 mode="aspectFill" 58 mode="aspectFill"
59 ></image> 59 ></image>
60 <view class="infoRight"> 60 <view class="infoRight">
61 <text class="goodName">商品名称商品名称商品名称名称名称</text> 61 <text class="goodName">商品名称商品名称商品名称名称名称</text>
62 <text class="remarks">支持7天无理由退货 顺丰发货</text> 62 <text class="remarks">支持7天无理由退货 顺丰发货</text>
63 <view class="priceBox"> 63 <view class="priceBox">
64 <view class="price">¥198</view> 64 <view class="price">¥198</view>
65 <view class="counter"> 65 <view class="counter">
66 <view 66 <view
67 class="btn" 67 class="btn"
68 disabled="this.disabled" 68 disabled="this.disabled"
69 type="default" 69 type="default"
70 @click="counter(false)" 70 @click="counter(false)"
71 >-</view> 71 >-</view>
72 <text>{{count}}</text> 72 <text>{{count}}</text>
73 <view 73 <view
74 class="btn" 74 class="btn"
75 type="default" 75 type="default"
76 @click="counter(true)" 76 @click="counter(true)"
77 >+</view> 77 >+</view>
78 </view> 78 </view>
79 </view> 79 </view>
80 </view> 80 </view>
81 </view> 81 </view>
82 <view class="infoBottom"> 82 <view class="infoBottom">
83 <view class="norm">规格 <text>玫瑰金/钛合金</text></view> 83 <view class="norm">规格 <text>玫瑰金/钛合金</text></view>
84 <view class="shippingMethod">配送方式 <text>快递</text></view> 84 <view class="shippingMethod">配送方式 <text>快递</text></view>
85 <view class="message">买家留言 85 <view class="message">买家留言
86 <input 86 <input
87 type="text" 87 type="text"
88 :value="note" 88 :value="note"
89 placeholder="建议提前协商(50字以内)" 89 placeholder="建议提前协商(50字以内)"
90 /> 90 />
91 </view> 91 </view>
92 </view> 92 </view>
93 </view> 93 </view>
94 </view> 94 </view>
95 <view class="payWay"> 95 <view class="payWay">
96 <view class="item"> 96 <view class="item">
97 <text>支付方式</text> 97 <text>支付方式</text>
98 <view class="itemRight"> 98 <view class="itemRight">
99 <view class="rightText"> 99 <view class="rightText">
100 <view class="choosePayWay"> 100 <view class="choosePayWay">
101 <image 101 <image
102 src="../../static/store.png" 102 src="../../static/store.png"
103 mode="aspectFill" 103 mode="aspectFill"
104 ></image> 104 ></image>
105 <text>微信支付</text> 105 <text>微信支付</text>
106 </view> 106 </view>
107 <!-- <view class="randomSubstraction">最高随机立减¥99</view> --> 107 <!-- <view class="randomSubstraction">最高随机立减¥99</view> -->
108 </view> 108 </view>
109 <!-- <image 109 <!-- <image
110 src="../../static/right.png" 110 src="../../static/right.png"
111 mode="aspectFill" 111 mode="aspectFill"
112 ></image> --> 112 ></image> -->
113 </view> 113 </view>
114 </view> 114 </view>
115 <!-- <view class="item"> 115 <!-- <view class="item">
116 <text>优惠券</text> 116 <text>优惠券</text>
117 <view class="itemRight"> 117 <view class="itemRight">
118 <view class="rightText"> 118 <view class="rightText">
119 <view class="chooseOffers"> 119 <view class="chooseOffers">
120 <text>-¥70.00</text> 120 <text>-¥70.00</text>
121 </view> 121 </view>
122 <view class="preferentialWay">最大优惠</view> 122 <view class="preferentialWay">最大优惠</view>
123 </view> 123 </view>
124 <image 124 <image
125 src="../../static/right.png" 125 src="../../static/right.png"
126 mode="aspectFill" 126 mode="aspectFill"
127 ></image> 127 ></image>
128 </view> 128 </view>
129 </view> --> 129 </view> -->
130 <view class="item"> 130 <view class="item">
131 <text>运费</text> 131 <text>运费</text>
132 <view class="itemRight"> 132 <view class="itemRight">
133 <view class="freight">免运费</view> 133 <view class="freight">免运费</view>
134 </view> 134 </view>
135 </view> 135 </view>
136 <view class="item"> 136 <view class="item">
137 <text>合计</text> 137 <text>合计</text>
138 <view class="itemRight"> 138 <view class="itemRight">
139 <view class="total">¥{{total}}</view> 139 <view class="total">¥{{total}}</view>
140 </view> 140 </view>
141 </view> 141 </view>
142 </view> 142 </view>
143 <!-- 143 <!--
144 <view class="checkBox"> 144 <view class="checkBox">
145 <checkbox-group> 145 <checkbox-group>
146 <label> 146 <label>
147 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买 147 <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
148 </label> 148 </label>
149 </checkbox-group> 149 </checkbox-group>
150 </view> --> 150 </view> -->
151 </view> 151 </view>
152 <view class="footer"> 152 <view class="footer">
153 <view class="footerLeft">实付金额:<text>¥{{total}}</text></view> 153 <view class="footerLeft">实付金额:<text>¥{{total}}</text></view>
154 <view class="footerRight"> 154 <view class="footerRight">
155 <view 155 <view
156 class="paybtn" 156 class="paybtn"
157 @tap="orderBuild" 157 @tap="orderBuild"
158 >立即支付</view> 158 >立即支付</view>
159 </view> 159 </view>
160 </view> 160 </view>
161 </view> 161 </view>
162 </template> 162 </template>
163 163
164 <script> 164 <script>
165 import store from '@/store' 165 import store from '@/store'
166 166
167 export default { 167 export default {
168 data() { 168 data() {
169 return { 169 return {
170 addAddress: '添加收货地址', 170 addAddress: '添加收货地址',
171 count: 1, 171 count: 1,
172 pid: 0, 172 pid: 0,
173 disabled: false, 173 disabled: false,
174 total: 120, 174 total: 120,
175 freight: 0.00, 175 freight: 0.00,
176 showAddress: false, 176 showAddress: false,
177 note: '', 177 note: '',
178 addressInfo: { 178 addressInfo: {
179 address: '' 179 address: ''
180 } 180 }
181 // isAnonymous: 181 // isAnonymous:
182 } 182 }
183 }, 183 },
184 onLoad({ pid, addressId }) { 184 onLoad({ pid, addressId }) {
185 this.pid = pid 185 this.pid = pid
186 // 若已经选择地址 186 // 若已经选择地址
187 if (addressId) { 187 if (addressId) {
188 store.dispatch('address/details', { 188 store.dispatch('address/details', {
189 add_id: addressId 189 add_id: addressId
190 }).then(({ code, data }) => { 190 }).then(({ code, data }) => {
191 if (code === 1) { 191 if (code === 1) {
192 console.log('code', code, data) 192 console.log('code', code, data)
193 this.showAddress = true 193 this.showAddress = true
194 this.addressInfo = data 194 this.addressInfo = data
195 } 195 }
196 }) 196 })
197 } else { 197 } else {
198 store.dispatch('address/default').then(({ code, data }) => { 198 store.dispatch('address/default').then(({ code, data }) => {
199 if (code === 1) { 199 if (code === 1) {
200 console.log('code', code, data) 200 console.log('code', code, data)
201 this.showAddress = true 201 this.showAddress = true
202 this.addressInfo = data 202 this.addressInfo = data
203 } 203 }
204 }) 204 })
205 } 205 }
206 store.dispatch('read/fetch', { 206 store.dispatch('read/fetch', {
207 pid 207 pid
208 }) 208 })
209 }, 209 },
210 computed: { 210 computed: {
211 goodInfo () { 211 goodInfo () {
212 console.log(this.$store.state.read.goodInfo) 212 console.log(this.$store.state.read.goodInfo)
213 return this.$store.state.read.goodInfo 213 return this.$store.state.read.goodInfo
214 } 214 }
215 }, 215 },
216 methods: { 216 methods: {
217 counter(isadd) { 217 counter(isadd) {
218 if (isadd) { 218 if (isadd) {
219 this.count++ 219 this.count++
220 } else { 220 } else {
221 this.count <= 1 ? this.disabled = true : this.count-- 221 this.count <= 1 ? this.disabled = true : this.count--
222 } 222 }
223 }, 223 },
224 toaddAddress() { 224 toaddAddress() {
225 uni.navigateTo({ 225 uni.navigateTo({
226 url: `../address/addressList?edit=${1}`, 226 url: `../address/addressList?edit=${1}`,
227 success: res => {}, 227 success: res => {},
228 fail: (error) => { console.log('跳转到地址列表页面失败====>', error) }, 228 fail: (error) => { console.log('跳转到地址列表页面失败====>', error) },
229 complete: () => {} 229 complete: () => {}
230 }) 230 })
231 }, 231 },
232 // 加入购物车
233 addCart() {
234 console.log('this', this.$store.state)
235 store.dispatch('cart/')
236 },
237 // 下单 232 // 下单
238 orderBuild() { 233 orderBuild() {
239 console.log('this', this.$store.state) 234 console.log('this', this.$store.state)
240 // store.dispatch('order/build', { 235 // store.dispatch('order/build', {
236 // pid: 2,
237 // sk_id: '23',
238 // number: 2,
239 // mp_id: '201',
240 // totalPrice: 101,
241 // address: this.addressInfo, 241 // address: this.addressInfo,
242 // checkedGoods: [], 242 // dir: 1
243 // sk_id_arr: [],
244 // totalPrice: 101
245 // }) 243 // })
246 } 244 }
247 // 支付 245 // 支付
248 // pay() { 246 // pay() {
249 // const openId = uni.getStorageSync('openid') 247 // const openId = uni.getStorageSync('openid')
250 // const fieldSet = { 248 // const fieldSet = {
251 // 'openid': this.$store.state.user.userInfo.openid, 249 // 'openid': this.$store.state.user.userInfo.openid,
252 // 'uid': this.$store.state.user.userInfo.uid, 250 // 'uid': this.$store.state.user.userInfo.uid,
253 // 'shopid': 0, 251 // 'shopid': 0,
254 // 'payCate': 2020, 252 // 'payCate': 2020,
255 // 'payMoney': , 253 // 'payMoney': ,
256 // '' 254 // ''
257 // } 255 // }
258 // } 256 // }
259 } 257 }
260 } 258 }
261 </script> 259 </script>
262 260
263 <style lang="scss"> 261 <style lang="scss">
264 .wrap { 262 .wrap {
265 height: 100vh; 263 height: 100vh;
266 background-color: #f2f2f2; 264 background-color: #f2f2f2;
267 font-family: PingFangSC-Regular; 265 font-family: PingFangSC-Regular;
268 letter-spacing: -0.23px; 266 letter-spacing: -0.23px;
269 position: absolute; 267 position: absolute;
270 } 268 }
271 .addAddress { 269 .addAddress {
272 background-color: #ffffff; 270 background-color: #ffffff;
273 box-sizing: border-box; 271 box-sizing: border-box;
274 height: 124rpx; 272 height: 124rpx;
275 width: 100%; 273 width: 100%;
276 display: flex; 274 display: flex;
277 align-items: center; 275 align-items: center;
278 padding: 0 40rpx; 276 padding: 0 40rpx;
279 .addIcon { 277 .addIcon {
280 background-color: #f2f2f2; 278 background-color: #f2f2f2;
281 height: 56rpx; 279 height: 56rpx;
282 width: 60rpx; 280 width: 60rpx;
283 border-radius: 4rpx; 281 border-radius: 4rpx;
284 display: flex; 282 display: flex;
285 justify-content: center; 283 justify-content: center;
286 align-items: center; 284 align-items: center;
287 margin-right: 40rpx; 285 margin-right: 40rpx;
288 } 286 }
289 image { 287 image {
290 height: 28rpx; 288 height: 28rpx;
291 width: 28rpx; 289 width: 28rpx;
292 } 290 }
293 .addressText { 291 .addressText {
294 font-size: 28rpx; 292 font-size: 28rpx;
295 color: #333333; 293 color: #333333;
296 margin-right: 364rpx; 294 margin-right: 364rpx;
297 } 295 }
298 } 296 }
299 .content { 297 .content {
300 background-color: #f2f2f2; 298 background-color: #f2f2f2;
301 width: 100%; 299 width: 100%;
302 display: flex; 300 display: flex;
303 flex-direction: column; 301 flex-direction: column;
304 justify-content: center; 302 justify-content: center;
305 align-items: center; 303 align-items: center;
306 padding: 40rpx; 304 padding: 40rpx;
307 box-sizing: border-box; 305 box-sizing: border-box;
308 .orderInfo { 306 .orderInfo {
309 width: 670rpx; 307 width: 670rpx;
310 height: 488rpx; 308 height: 488rpx;
311 background-color: #ffffff; 309 background-color: #ffffff;
312 border-radius: 20rpx; 310 border-radius: 20rpx;
313 box-sizing: border-box; 311 box-sizing: border-box;
314 padding: 0 40rpx 40rpx 40rpx; 312 padding: 0 40rpx 40rpx 40rpx;
315 .title { 313 .title {
316 display: flex; 314 display: flex;
317 align-items: center; 315 align-items: center;
318 font-size: 28rpx; 316 font-size: 28rpx;
319 color: #333333; 317 color: #333333;
320 height: 60rpx; 318 height: 60rpx;
321 line-height: 40rpx; 319 line-height: 40rpx;
322 padding: 10rpx 10rpx 10rpx 0rpx; 320 padding: 10rpx 10rpx 10rpx 0rpx;
323 image { 321 image {
324 margin-right: 20rpx; 322 margin-right: 20rpx;
325 } 323 }
326 } 324 }
327 .infoBox { 325 .infoBox {
328 margin-top: 42rpx; 326 margin-top: 42rpx;
329 .infoTop { 327 .infoTop {
330 display: flex; 328 display: flex;
331 flex-direction: row; 329 flex-direction: row;
332 image { 330 image {
333 height: 188rpx; 331 height: 188rpx;
334 width: 188rpx; 332 width: 188rpx;
335 margin-right: 24rpx; 333 margin-right: 24rpx;
336 } 334 }
337 .infoRight { 335 .infoRight {
338 width: 374rpx; 336 width: 374rpx;
339 display: flex; 337 display: flex;
340 flex-direction: column; 338 flex-direction: column;
341 align-items: flex-start; 339 align-items: flex-start;
342 justify-content: space-between; 340 justify-content: space-between;
343 .goodName { 341 .goodName {
344 font-size: 28rpx; 342 font-size: 28rpx;
345 color: #333333; 343 color: #333333;
346 } 344 }
347 .remarks { 345 .remarks {
348 font-size: 20rpx; 346 font-size: 20rpx;
349 color: #999999; 347 color: #999999;
350 } 348 }
351 .priceBox { 349 .priceBox {
352 display: flex; 350 display: flex;
353 justify-content: space-between; 351 justify-content: space-between;
354 align-items: center; 352 align-items: center;
355 width: 100%; 353 width: 100%;
356 .price { 354 .price {
357 color: #ff6b4a; 355 color: #ff6b4a;
358 font-size: 28rpx; 356 font-size: 28rpx;
359 } 357 }
360 .counter { 358 .counter {
361 display: flex; 359 display: flex;
362 flex-direction: row; 360 flex-direction: row;
363 justify-content: space-between; 361 justify-content: space-between;
364 font-size: 28rpx; 362 font-size: 28rpx;
365 color: #333333; 363 color: #333333;
366 width: 122rpx; 364 width: 122rpx;
367 .btn { 365 .btn {
368 display: flex; 366 display: flex;
369 justify-content: center; 367 justify-content: center;
370 line-height: 32rpx; 368 line-height: 32rpx;
371 height: 32rpx; 369 height: 32rpx;
372 width: 32rpx; 370 width: 32rpx;
373 background-color: #f2f2f2; 371 background-color: #f2f2f2;
374 color: #cfcfcf; 372 color: #cfcfcf;
375 } 373 }
376 } 374 }
377 } 375 }
378 } 376 }
379 } 377 }
380 .infoBottom { 378 .infoBottom {
381 display: flex; 379 display: flex;
382 flex-direction: column; 380 flex-direction: column;
383 justify-content: flex-start; 381 justify-content: flex-start;
384 font-size: 24rpx; 382 font-size: 24rpx;
385 color: #333333; 383 color: #333333;
386 text { 384 text {
387 color: #999999; 385 color: #999999;
388 margin-left: 20rpx; 386 margin-left: 20rpx;
389 } 387 }
390 388
391 .norm { 389 .norm {
392 margin-top: 28rpx; 390 margin-top: 28rpx;
393 } 391 }
394 .shippingMethod { 392 .shippingMethod {
395 margin-top: 12rpx; 393 margin-top: 12rpx;
396 } 394 }
397 .message { 395 .message {
398 display: flex; 396 display: flex;
399 flex-direction: row; 397 flex-direction: row;
400 align-items: center; 398 align-items: center;
401 margin-top: 18rpx; 399 margin-top: 18rpx;
402 input { 400 input {
403 margin-left: 20rpx; 401 margin-left: 20rpx;
404 width: 75%; 402 width: 75%;
405 } 403 }
406 } 404 }
407 } 405 }
408 } 406 }
409 } 407 }
410 .payWay { 408 .payWay {
411 height: 464rpx; 409 height: 464rpx;
412 width: 670rpx; 410 width: 670rpx;
413 background-color: #ffffff; 411 background-color: #ffffff;
414 color: #333333; 412 color: #333333;
415 font-size: 24rpx; 413 font-size: 24rpx;
416 border-radius: 20rpx; 414 border-radius: 20rpx;
417 box-sizing: border-box; 415 box-sizing: border-box;
418 padding: 0 52rpx 0rpx 40rpx; 416 padding: 0 52rpx 0rpx 40rpx;
419 margin-top: 20rpx; 417 margin-top: 20rpx;
420 display: flex; 418 display: flex;
421 flex-direction: column; 419 flex-direction: column;
422 justify-content: center; 420 justify-content: center;
423 align-items: flex-start; 421 align-items: flex-start;
424 .item { 422 .item {
425 display: flex; 423 display: flex;
426 flex-direction: row; 424 flex-direction: row;
427 justify-content: space-between; 425 justify-content: space-between;
428 align-items: center; 426 align-items: center;
429 width: 100%; 427 width: 100%;
430 height: 115rpx; 428 height: 115rpx;
431 .itemRight { 429 .itemRight {
432 display: flex; 430 display: flex;
433 flex-direction: row; 431 flex-direction: row;
434 justify-content: space-between; 432 justify-content: space-between;
435 align-items: center; 433 align-items: center;
436 image { 434 image {
437 height: 24rpx; 435 height: 24rpx;
438 width: 12rpx; 436 width: 12rpx;
439 } 437 }
440 .rightText { 438 .rightText {
441 margin-right: 20rpx; 439 margin-right: 20rpx;
442 text-align: right; 440 text-align: right;
443 .choosePayWay { 441 .choosePayWay {
444 text { 442 text {
445 color: #333333; 443 color: #333333;
446 } 444 }
447 image { 445 image {
448 height: 26rpx; 446 height: 26rpx;
449 width: 30rpx; 447 width: 30rpx;
450 margin-right: 20px; 448 margin-right: 20px;
451 } 449 }
452 } 450 }
453 .randomSubstraction { 451 .randomSubstraction {
454 color: #ff6b4a; 452 color: #ff6b4a;
455 } 453 }
456 .preferentialWay { 454 .preferentialWay {
457 color: #999999; 455 color: #999999;
458 } 456 }
459 } 457 }
460 .freight, 458 .freight,
461 .total { 459 .total {
462 margin-right: 32rpx; 460 margin-right: 32rpx;
463 } 461 }
464 text { 462 text {
465 color: #ff6b4a; 463 color: #ff6b4a;
466 } 464 }
467 } 465 }
468 } 466 }
469 } 467 }
470 // .checkBox { 468 // .checkBox {
471 // height: 58rpx; 469 // height: 58rpx;
472 // line-height: 58rpx; 470 // line-height: 58rpx;
473 // width: 100%; 471 // width: 100%;
474 // margin-top: 36rpx; 472 // margin-top: 36rpx;
475 // margin-left: 40rpx; 473 // margin-left: 40rpx;
476 // font-size: 12px; 474 // font-size: 12px;
477 // color: #999999; 475 // color: #999999;
478 // } 476 // }
479 } 477 }
480 .footer { 478 .footer {
481 height: 112rpx; 479 height: 112rpx;
482 width: 100%; 480 width: 100%;
483 background-color: #fff; 481 background-color: #fff;
484 font-size: 16px; 482 font-size: 16px;
485 display: flex; 483 display: flex;
486 justify-content: space-between; 484 justify-content: space-between;
487 align-items: center; 485 align-items: center;
488 position: fixed; 486 position: fixed;
489 bottom: 0; 487 bottom: 0;
490 .footerLeft { 488 .footerLeft {
491 display: flex; 489 display: flex;
492 justify-content: center; 490 justify-content: center;
493 align-items: center; 491 align-items: center;
494 width: 50%; 492 width: 50%;
495 color: #333333; 493 color: #333333;
496 text { 494 text {
497 color: #ff6b4a; 495 color: #ff6b4a;
498 } 496 }
499 } 497 }
500 .footerRight { 498 .footerRight {
501 display: flex; 499 display: flex;
502 justify-content: flex-end; 500 justify-content: flex-end;
503 align-items: center; 501 align-items: center;
504 width: 50%; 502 width: 50%;
505 margin-right: 26rpx; 503 margin-right: 26rpx;
506 .paybtn { 504 .paybtn {
507 display: flex; 505 display: flex;
508 justify-content: center; 506 justify-content: center;
509 align-items: center; 507 align-items: center;
510 background: #ff6b4a; 508 background: #ff6b4a;
511 border-radius: 20px; 509 border-radius: 20px;
512 border-radius: 20px; 510 border-radius: 20px;
513 color: #ffffff; 511 color: #ffffff;
514 width: 204rpx; 512 width: 204rpx;
515 height: 80rpx; 513 height: 80rpx;
516 } 514 }
517 } 515 }
518 } 516 }
519 // 地址信息样式 517 // 地址信息样式
520 .order-user { 518 .order-user {
521 width: 670rpx; 519 width: 670rpx;
522 height: 228rpx; 520 height: 228rpx;
523 background: #ffffff; 521 background: #ffffff;
524 border-radius: 14rpx; 522 border-radius: 14rpx;
525 margin: 0 auto; 523 margin: 0 auto;
526 margin-top: 20rpx; 524 margin-top: 20rpx;
527 position: relative; 525 position: relative;
528 .order-user-head { 526 .order-user-head {
529 display: flex; 527 display: flex;
530 height: 108rpx; 528 height: 108rpx;
531 width: 100%; 529 width: 100%;
532 align-items: center; 530 align-items: center;
533 margin-left: 126rpx; 531 margin-left: 126rpx;
534 .name { 532 .name {
535 display: flex; 533 display: flex;
536 justify-content: space-between; 534 justify-content: space-between;
537 font-size: 14px; 535 font-size: 14px;
538 color: #333333; 536 color: #333333;
539 letter-spacing: -0.26px; 537 letter-spacing: -0.26px;
540 margin-right: 20rpx; 538 margin-right: 20rpx;
541 .default { 539 .default {
542 height: 40rpx; 540 height: 40rpx;
543 width: 80rpx; 541 width: 80rpx;
544 background-color: #4a90e2; 542 background-color: #4a90e2;
545 border-radius: 13px; 543 border-radius: 13px;
546 border-radius: 13px; 544 border-radius: 13px;
547 text-align: center; 545 text-align: center;
548 margin-right: 20rpx; 546 margin-right: 20rpx;
549 text { 547 text {
550 font-size: 12px; 548 font-size: 12px;
551 color: #ffffff; 549 color: #ffffff;
552 letter-spacing: -0.23px; 550 letter-spacing: -0.23px;
553 } 551 }
554 } 552 }
555 } 553 }
556 .mobile { 554 .mobile {
557 font-size: 14px; 555 font-size: 14px;
558 color: #999999; 556 color: #999999;
559 letter-spacing: -0.26px; 557 letter-spacing: -0.26px;
560 } 558 }
561 } 559 }
562 .order-user-body { 560 .order-user-body {
563 display: flex; 561 display: flex;
564 width: 100%; 562 width: 100%;
565 image { 563 image {
566 width: 24px; 564 width: 24px;
567 height: 26px; 565 height: 26px;
568 margin: 12rpx 32rpx 0 40rpx; 566 margin: 12rpx 32rpx 0 40rpx;
569 } 567 }
570 .address { 568 .address {
571 font-weight: bold; 569 font-weight: bold;
572 font-size: 14px; 570 font-size: 14px;
573 color: #333333; 571 color: #333333;
574 letter-spacing: -0.26px; 572 letter-spacing: -0.26px;
575 } 573 }
576 } 574 }
577 .arrow { 575 .arrow {
578 width: 6px; 576 width: 6px;
579 height: 12px; 577 height: 12px;
580 position: absolute; 578 position: absolute;
581 right: 40rpx; 579 right: 40rpx;
src/store/modules/address.js
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { editAddress, addressList, getAddress, getDefaultAddress } = urlAlias 4 const { editAddress, addressList, getAddress, getDefaultAddress } = urlAlias
5 5
6 const state = { list: [], detail: {}, defaultInfo: {} } 6 const state = { list: [], detail: {}, defaultInfo: {} }
7 7
8 const mutations = { 8 const mutations = {
9 LIST: (state, list) => { 9 LIST: (state, list) => {
10 state.list = list 10 state.list = list
11 }, 11 },
12 DETAILS: (state, details) => { 12 DETAILS: (state, details) => {
13 state.details = details 13 state.details = details
14 }, 14 },
15 DEFAULT: (state, data) => { 15 DEFAULT: (state, data) => {
16 state.defaultInfo = data 16 state.defaultInfo = data
17 } 17 }
18 } 18 }
19 19
20 const actions = { 20 const actions = {
21 edit(mutations, param, success) { 21 edit(mutations, param, success) {
22 request({ 22 return new Promise((resolve) => request({
23 url: editAddress, 23 url: editAddress,
24 data: param, 24 data: param,
25 success, 25 success: () => {
26 resolve()
27 },
26 fail: () => { 28 fail: () => {
27 uni.showModal({ 29 uni.showModal({
28 content: '编辑失败', 30 content: '编辑失败',
29 showCancel: false 31 showCancel: false
30 }) 32 })
31 }, 33 },
32 complete: (res) => { 34 complete: (res) => {
33 console.log('complete status === > ', res) 35 console.log('complete status === > ', res)
34 } 36 }
35 }) 37 }))
36 }, 38 },
37 list({ commit }) { 39 list({ commit }) {
38 request({ 40 request({
39 url: addressList, 41 url: addressList,
40 success: (res) => { 42 success: (res) => {
41 commit('LIST', res.data.data) 43 commit('LIST', res.data.data)
42 }, 44 },
43 fail: () => { 45 fail: () => {
44 uni.showModal({ 46 uni.showModal({
45 content: '获取地址列表失败', 47 content: '获取地址列表失败',
46 showCancel: false 48 showCancel: false
47 }) 49 })
48 } 50 }
49 }) 51 })
50 }, 52 },
51 details({ commit }, param) { 53 details({ commit }, param) {
52 return new Promise((resolve, reject) => request({ 54 return new Promise((resolve, reject) => request({
53 url: getAddress, 55 url: getAddress,
54 data: param, 56 data: param,
55 success: (res) => { 57 success: (res) => {
56 commit('DETAILS', res.data.data) 58 commit('DETAILS', res.data.data)
57 resolve({ 59 resolve({
58 code: res.data.code, 60 code: res.data.code,
59 data: res.data.data 61 data: res.data.data
60 }) 62 })
61 }, 63 },
62 fail: () => { 64 fail: () => {
63 uni.showModal({ 65 uni.showModal({
64 content: '获取地址信息失败', 66 content: '获取地址信息失败',
65 showCancel: false 67 showCancel: false
66 }) 68 })
67 } 69 }
68 })) 70 }))
69 }, 71 },
70 default({ commit }, param) { 72 default({ commit }, param) {
71 return new Promise((resolve, reject) => request({ 73 return new Promise((resolve, reject) => request({
72 url: getDefaultAddress, 74 url: getDefaultAddress,
73 data: param, 75 data: param,
74 success: (res) => { 76 success: (res) => {
75 resolve({ 77 resolve({
76 code: res.data.code, 78 code: res.data.code,
77 data: res.data.data 79 data: res.data.data
78 }) 80 })
79 }, 81 },
80 fail: () => { 82 fail: () => {
81 uni.showModal({ 83 uni.showModal({
82 content: '获取默认地址信息失败', 84 content: '获取默认地址信息失败',
83 showCancel: false 85 showCancel: false
84 }) 86 })
85 } 87 }
86 })) 88 }))
87 } 89 }
88 } 90 }
89 91
90 export default { 92 export default {
91 namespaced: true, 93 namespaced: true,
92 state, 94 state,
93 mutations, 95 mutations,
94 actions 96 actions
95 } 97 }
96 98