Commit 30ace30247856b291f1f756c0d40b0d7b11d7873

Authored by 喻鹏
Exists in master

Merge branch 'master' of http://121.40.31.31:8888/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/pages/frameDetail/frameDetail.vue
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="D1"> 3 <view class="D1">
4 <!-- 轮播图 --> 4 <!-- 轮播图 -->
5 <swiper 5 <swiper
6 class="swiperImage" 6 class="swiperImage"
7 :indicator-dots="true" 7 :indicator-dots="true"
8 :autoplay="true" 8 :autoplay="true"
9 :interval="4000" 9 :interval="4000"
10 :duration="500" 10 :duration="500"
11 > 11 >
12 <swiper-item 12 <swiper-item
13 v-for="(item, index) in goodInfo.pics" 13 v-for="(item, index) in goodInfo.pics"
14 :key="index" 14 :key="index"
15 > 15 >
16 <image 16 <image
17 :src="item" 17 :src="item"
18 mode="scaleToFill" 18 mode="scaleToFill"
19 ></image> 19 ></image>
20 </swiper-item> 20 </swiper-item>
21 </swiper> 21 </swiper>
22 <view class="D1_price">¥{{goodInfo.p_sale_price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> 22 <view class="D1_price">¥{{goodInfo.p_sale_price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> 23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> 24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
25 </view> 25 </view>
26 <view 26 <view
27 class="D2" 27 class="D2"
28 v-if="updateGoodType == 2 || updateGoodType == 4" 28 v-if="updateGoodType == 2 || updateGoodType == 4"
29 > 29 >
30 <view><span class="D2_span1">框架材质:</span><span class="D2_span2">{{introduction.material}}</span></view> 30 <view><span class="D2_span1">框架材质:</span><span class="D2_span2">{{introduction.material}}</span></view>
31 <view><span class="D2_span1">风格:</span><span class="D2_span2">{{introduction.func}}</span></view> 31 <view><span class="D2_span1">风格:</span><span class="D2_span2">{{introduction.func}}</span></view>
32 <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view> 32 <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view>
33 </view> 33 </view>
34 <view 34 <view
35 class="D2" 35 class="D2"
36 v-if="updateGoodType == 1" 36 v-if="updateGoodType == 1"
37 > 37 >
38 <view><span class="D2_span1">镜片材质:</span><span class="D2_span2">{{introduction.material}}</span></view> 38 <view><span class="D2_span1">镜片材质:</span><span class="D2_span2">{{introduction.material}}</span></view>
39 <view><span class="D2_span1">功能:</span><span class="D2_span2">{{introduction.func}}</span></view> 39 <view><span class="D2_span1">功能:</span><span class="D2_span2">{{introduction.func}}</span></view>
40 <view><span class="D2_span1">使用场景:</span><span class="D2_span2">{{introduction.rate}}</span></view> 40 <view><span class="D2_span1">使用场景:</span><span class="D2_span2">{{introduction.rate}}</span></view>
41 </view> 41 </view>
42 <view 42 <view
43 class="D2" 43 class="D2"
44 v-if="updateGoodType == 3" 44 v-if="updateGoodType == 3"
45 > 45 >
46 <view><span class="D2_span1">材质:</span><span class="D2_span2">{{introduction.material}}</span></view> 46 <view><span class="D2_span1">材质:</span><span class="D2_span2">{{introduction.material}}</span></view>
47 <view><span class="D2_span1">直径/基弧:</span><span class="D2_span2">{{introduction.func}}</span></view> 47 <view><span class="D2_span1">直径/基弧:</span><span class="D2_span2">{{introduction.func}}</span></view>
48 <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view> 48 <view><span class="D2_span1">适用性别:</span><span class="D2_span2">{{introduction.rate}}</span></view>
49 </view> 49 </view>
50 <view class="D3"> 50 <view class="D3">
51 <view class="screenBar"> 51 <view class="screenBar">
52 <view 52 <view
53 v-for="item in screenItems" 53 v-for="item in screenItems"
54 :key="item.current" 54 :key="item.current"
55 @click="tabChange(item.current)" 55 @click="tabChange(item.current)"
56 > 56 >
57 <view 57 <view
58 class="screenItem" 58 class="screenItem"
59 v-bind:class="{ active: current === item.current }" 59 v-bind:class="{ active: current === item.current }"
60 >{{ item.text || '暂无' }}</view> 60 >{{ item.text || '暂无' }}</view>
61 </view> 61 </view>
62 </view> 62 </view>
63 <view 63 <view
64 class="screen-item" 64 class="screen-item"
65 v-if="current === 1" 65 v-if="current === 1"
66 > 66 >
67 <view class="D3_list"> 67 <view class="D3_list">
68 <view 68 <view
69 v-for="(item) in parameter" 69 v-for="(item) in parameter"
70 :key="item.key" 70 :key="item.key"
71 > 71 >
72 <image 72 <image
73 class="D3_image" 73 class="D3_image"
74 v-bind:src="item.img" 74 v-bind:src="item.img"
75 ></image> 75 ></image>
76 <span>{{item.standard || '暂无'}}</span> 76 <span>{{item.standard || '暂无'}}</span>
77 <span>{{item.slength || '暂无'}}</span> 77 <span>{{item.slength || '暂无'}}</span>
78 </view> 78 </view>
79 </view> 79 </view>
80 </view> 80 </view>
81 <view 81 <view
82 class="screen-item" 82 class="screen-item"
83 v-if="current === 0" 83 v-if="current === 0"
84 > 84 >
85 <view class="D3_list"> 85 <view class="D3_list">
86 <!-- <block> 86 <!-- <block>
87 <view>主体</view> 87 <view>主体</view>
88 <view>商品产地:韩国</view> 88 <view>商品产地:韩国</view>
89 <view>包装清单:彩色隐形 * 1</view> 89 <view>包装清单:彩色隐形 * 1</view>
90 </block> --> 90 </block> -->
91 <!-- 迭代时建议配合接口修改 为数组 --> 91 <!-- 迭代时建议配合接口修改 为数组 -->
92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> 92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
93 <view class=""> 93 <view class="">
94 年龄:<view 94 年龄:<view
95 v-for="(item,index) in tag.prod_tag_age" 95 v-for="(item,index) in tag.prod_tag_age"
96 :key="index" 96 :key="index"
97 > 97 >
98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> 98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
99 </view> 99 </view>
100 </view> 100 </view>
101 </view> 101 </view>
102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> 102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
103 <view class=""> 103 <view class="">
104 颜色:<view 104 颜色:<view
105 v-for="(item,index) in tag.prod_tag_color" 105 v-for="(item,index) in tag.prod_tag_color"
106 :key="index" 106 :key="index"
107 > 107 >
108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> 108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
109 </view> 109 </view>
110 </view> 110 </view>
111 </view> 111 </view>
112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> 112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
113 <view class=""> 113 <view class="">
114 脸型:<view 114 脸型:<view
115 v-for="(item,index) in tag.prod_tag_face" 115 v-for="(item,index) in tag.prod_tag_face"
116 :key="index" 116 :key="index"
117 > 117 >
118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> 118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
119 </view> 119 </view>
120 </view> 120 </view>
121 </view> 121 </view>
122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> 122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
123 <view class=""> 123 <view class="">
124 赠品:<view 124 赠品:<view
125 v-for="(item,index) in tag.prod_tag_freesend" 125 v-for="(item,index) in tag.prod_tag_freesend"
126 :key="index" 126 :key="index"
127 > 127 >
128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> 128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
129 </view> 129 </view>
130 </view> 130 </view>
131 </view> 131 </view>
132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> 132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
133 <view class=""> 133 <view class="">
134 保险:<view 134 保险:<view
135 v-for="(item,index) in tag.prod_tag_insurance" 135 v-for="(item,index) in tag.prod_tag_insurance"
136 :key="index" 136 :key="index"
137 > 137 >
138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> 138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
139 </view> 139 </view>
140 </view> 140 </view>
141 </view> 141 </view>
142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> 142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
143 <view class=""> 143 <view class="">
144 材质:<view 144 材质:<view
145 v-for="(item,index) in tag.prod_tag_metal" 145 v-for="(item,index) in tag.prod_tag_metal"
146 :key="index" 146 :key="index"
147 > 147 >
148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> 148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
149 </view> 149 </view>
150 </view> 150 </view>
151 </view> 151 </view>
152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> 152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
153 <view class=""> 153 <view class="">
154 个性:<view 154 个性:<view
155 v-for="(item,index) in tag.prod_tag_personal" 155 v-for="(item,index) in tag.prod_tag_personal"
156 :key="index" 156 :key="index"
157 > 157 >
158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> 158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
159 </view> 159 </view>
160 </view> 160 </view>
161 </view> 161 </view>
162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> 162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
163 <view class=""> 163 <view class="">
164 场景:<view 164 场景:<view
165 v-for="(item,index) in tag.prod_tag_sense" 165 v-for="(item,index) in tag.prod_tag_sense"
166 :key="index" 166 :key="index"
167 > 167 >
168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> 168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
169 </view> 169 </view>
170 </view> 170 </view>
171 </view> 171 </view>
172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> 172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
173 <view class=""> 173 <view class="">
174 性别:<view 174 性别:<view
175 v-for="(item,index) in tag.prod_tag_sex" 175 v-for="(item,index) in tag.prod_tag_sex"
176 :key="index" 176 :key="index"
177 > 177 >
178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> 178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
179 </view> 179 </view>
180 </view> 180 </view>
181 </view> 181 </view>
182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> 182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
183 <view class=""> 183 <view class="">
184 风格:<view 184 风格:<view
185 v-for="(item,index) in tag.prod_tag_style" 185 v-for="(item,index) in tag.prod_tag_style"
186 :key="index" 186 :key="index"
187 > 187 >
188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> 188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
189 </view> 189 </view>
190 </view> 190 </view>
191 </view> 191 </view>
192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> 192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
193 <view class=""> 193 <view class="">
194 重量:<view 194 重量:<view
195 v-for="(item,index) in tag.prod_tag_weight" 195 v-for="(item,index) in tag.prod_tag_weight"
196 :key="index" 196 :key="index"
197 > 197 >
198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> 198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
199 </view> 199 </view>
200 </view> 200 </view>
201 </view> 201 </view>
202 </view> 202 </view>
203 </view> 203 </view>
204 <view 204 <view
205 class="screen-item " 205 class="screen-item "
206 v-if="current ===2" 206 v-if="current ===2"
207 > 207 >
208 <view class="customerService"> 208 <view class="customerService">
209 <view class="serviceItem"> 209 <view class="serviceItem">
210 <view class="title"> 210 <view class="title">
211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
212 <text class="titleText">卖家服务</text> 212 <text class="titleText">卖家服务</text>
213 </view> 213 </view>
214 <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验</view> 214 <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验</view>
215 </view> 215 </view>
216 <view class="serviceItem"> 216 <view class="serviceItem">
217 <view class="title"> 217 <view class="title">
218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
219 <text class="titleText">平台承诺</text> 219 <text class="titleText">平台承诺</text>
220 </view> 220 </view>
221 <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> 221 <view class="itemContent">平台卖家服务,为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
222 </view> 222 </view>
223 <view class="serviceItem"> 223 <view class="serviceItem">
224 <view class="title"> 224 <view class="title">
225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
226 <text class="titleText">正品保证</text> 226 <text class="titleText">正品保证</text>
227 </view> 227 </view>
228 <view class="itemContent">向您保证所售商品均为正品行货</view> 228 <view class="itemContent">向您保证所售商品均为正品行货</view>
229 </view> 229 </view>
230 <view class="serviceItem2"> 230 <view class="serviceItem2">
231 <view class="title"> 231 <view class="title">
232 <text class="titleText">权利申明</text> 232 <text class="titleText">权利申明</text>
233 </view> 233 </view>
234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> 234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
235 </view> 235 </view>
236 <view class="serviceItem2"> 236 <view class="serviceItem2">
237 <view class="title"> 237 <view class="title">
238 <text class="titleText">价格保证</text> 238 <text class="titleText">价格保证</text>
239 </view> 239 </view>
240 <view class="itemContent"> 240 <view class="itemContent">
241 <view class="itemContent-child"> 241 <view class="itemContent-child">
242 <text class="contentTitle">平台价:</text> 242 <text class="contentTitle">平台价:</text>
243 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 243 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
244 </view> 244 </view>
245 <view class="itemContent-child"> 245 <view class="itemContent-child">
246 <text class="contentTitle">划线价:</text> 246 <text class="contentTitle">划线价:</text>
247 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 247 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
248 </view> 248 </view>
249 <view class="itemContent-child"> 249 <view class="itemContent-child">
250 <text class="contentTitle">平折扣:</text> 250 <text class="contentTitle">平折扣:</text>
251 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 251 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
252 </view> 252 </view>
253 <view class="itemContent-child"> 253 <view class="itemContent-child">
254 <text class="contentTitle">异常问题:</text> 254 <text class="contentTitle">异常问题:</text>
255 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 255 <text>任何个人或单位如果同时符合以下两个条件:1. 权利人发现网络用户利用网络服务侵害其合法权益;2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
256 </view> 256 </view>
257 257
258 </view> 258 </view>
259 </view> 259 </view>
260 </view> 260 </view>
261 </view> 261 </view>
262 </view> 262 </view>
263 <view 263 <view
264 class="D4" 264 class="D4"
265 v-if="current !==2" 265 v-if="current !==2"
266 > 266 >
267 <view class="D4_esvalue"> 267 <view class="D4_esvalue">
268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view> 268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
269 <view class="D4_2"> 269 <view class="D4_2">
270 <view 270 <view
271 class="star" 271 class="star"
272 v-for="o in starCount" 272 v-for="o in starCount"
273 :key="o" 273 :key="o"
274 > 274 >
275 <image 275 <image
276 src="../../static/img/detail/d_star.png" 276 src="../../static/img/detail/d_star.png"
277 mode="aspectFill" 277 mode="aspectFill"
278 style="height: 26rpx; width: 28rpx;" 278 style="height: 26rpx; width: 28rpx;"
279 ></image> 279 ></image>
280 </view> 280 </view>
281 </view> 281 </view>
282 </view> 282 </view>
283 <view class="D4_list"> 283 <view class="D4_list">
284 <view 284 <view
285 v-for="(assess) in goodInfo.judge_tag" 285 v-for="(assess) in goodInfo.judge_tag"
286 :key="assess.key" 286 :key="assess.key"
287 >{{assess.name}}</view> 287 >{{assess.name}}</view>
288 </view> 288 </view>
289 </view> 289 </view>
290 <view 290 <view
291 class="D5" 291 class="D5"
292 v-if="current !==2" 292 v-if="current !==2"
293 > 293 >
294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)"> 294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
295 <image src="/static/img/detail/hr.png"></image> 295 <image src="/static/img/detail/hr.png"></image>
296 <view>商品详细</view> 296 <view>商品详细</view>
297 <image src="/static/img/detail/hr.png"></image> 297 <image src="/static/img/detail/hr.png"></image>
298 </view> 298 </view>
299 <view class="D5_all" v-html="test"> 299 <view class="D5_all" v-html="test">
300 <!-- <block> 300 <!-- <block>
301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text> 301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
302 </block> --> 302 </block> -->
303 </view> 303 </view>
304 </view> 304 </view>
305
306 <!-- 底部菜单 --> 305 <!-- 底部菜单 -->
307 <view class="botton"> 306 <view class="botton">
308 <view 307 <view
309 @tap="toCart()" 308 @tap="toCart()"
310 class="botton_1" 309 class="botton_1"
311 > 310 >
312 <image v-bind:src="imgShop.img"></image> 311 <image v-bind:src="imgShop.img"></image>
313 <view class="botton_image">购物车</view> 312 <view class="botton_image">购物车</view>
314 </view> 313 </view>
315 <view class="botton_2"> 314 <view class="botton_2">
316 <view 315 <view
317 class="botton_input" 316 class="botton_input"
318 @tap="addCart()" 317 @tap="addCart()"
319 >加入购物车</view> 318 >加入购物车</view>
320 <view 319 <view
321 class="botton_now" 320 class="botton_now"
322 @tap="goPerchase()" 321 @tap="goPerchase()"
323 >立即购买</view> 322 >立即购买</view>
324 </view> 323 </view>
325 </view> 324 </view>
326 </view> 325 </view>
327 </template> 326 </template>
328 327
329 <script> 328 <script>
330 import store from '@/store' 329 import store from '@/store'
331 export default { 330 export default {
332 data () { 331 data () {
333 return { 332 return {
334 test: '', 333 test: '',
335 goodType: 2, 334 goodType: 2,
336 pid: 0, 335 pid: 0,
337 // 购物车数据 336 // 购物车数据
338 addCartList: { 337 addCartList: {
339 mp_id: 335, 338 mp_id: 0,
339 uid: 0,
340 sk_id: 0, 340 sk_id: 0,
341 num: 1, 341 num: 1,
342 price: '' 342 price: ''
343 }, 343 },
344 screenItems: [ 344 screenItems: [
345 { current: 0, text: '商品介绍' }, 345 { current: 0, text: '商品介绍' },
346 { current: 1, text: '规格参数' }, 346 { current: 1, text: '规格参数' },
347 { current: 2, text: '售后保障' } 347 { current: 2, text: '售后保障' }
348 ], 348 ],
349 current: 0, 349 current: 0,
350 starCount: 5, 350 starCount: 5,
351 parameter: [ 351 parameter: [
352 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 352 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
353 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 353 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
354 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 354 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
355 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 355 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
356 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 356 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
357 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' } 357 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }
358 ], 358 ],
359 esvalue: '宝贝好评率', 359 esvalue: '宝贝好评率',
360 introduction: { 360 introduction: {
361 material: '钛合金', 361 material: '钛合金',
362 func: '抗疲劳/防辐射', 362 func: '抗疲劳/防辐射',
363 rate: '男/女' 363 rate: '男/女'
364 }, 364 },
365 imgAll: '/static/img/detail/d8.png', 365 imgAll: '/static/img/detail/d8.png',
366 photoes: [ 366 photoes: [
367 { value: '日常办公', img: '/static/img/detail/d9.png' }, 367 { value: '日常办公', img: '/static/img/detail/d9.png' },
368 { value: '上网', img: '/static/img/detail/d10.png' }, 368 { value: '上网', img: '/static/img/detail/d10.png' },
369 { value: '追剧', img: '/static/img/detail/d11.png' }, 369 { value: '追剧', img: '/static/img/detail/d11.png' },
370 { value: '玩游戏', img: '/static/img/detail/d12.png' } 370 { value: '玩游戏', img: '/static/img/detail/d12.png' }
371 ], 371 ],
372 imgDetail: '/static/img/detail/d13.png', 372 imgDetail: '/static/img/detail/d13.png',
373 imgShop: { 373 imgShop: {
374 img: '/static/tab-cart.png', 374 img: '/static/tab-cart.png',
375 IsShown: false 375 IsShown: false
376 }, 376 },
377 tag: { 377 tag: {
378 prod_tag_freesend: [{ 378 prod_tag_freesend: [{
379 label: '眼镜盒', 379 label: '眼镜盒',
380 value: '262' 380 value: '262'
381 }] 381 }]
382 } 382 }
383 } 383 }
384 }, 384 },
385 onLoad: function ({ pid,sk_id }) { 385 onLoad: function ({ pid,sk_id }) {
386 this.pid = pid 386 this.pid = pid
387 // console.log('sk_id=====>',sk_id) 387 // console.log('sk_id=====>',sk_id)
388 store.dispatch('read/fetch', { 388 store.dispatch('read/fetch', {
389 pid, 389 pid,
390 sk_id 390 sk_id
391 }).then(() => { 391 }).then(() => {
392 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 392 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
393 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 393 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
394 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 394 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
395 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 395 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
396 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 396 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
397 this.parameter[5].slength = `${this.goodInfo.weight}mm`
398 this.tag = this.goodInfo.tag 397 this.parameter[5].slength = `${this.goodInfo.weight}mm`
399 this.addCartList.price = this.goodInfo.p_sale_price 398 this.tag = this.goodInfo.tag
399 this.test = this.goodInfo.prodIntro1
400 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
401 // addCart
402 this.addCartList.price = this.goodInfo.p_sale_price
403 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
400 this.test = this.goodInfo.prodIntro1 404 this.addCartList.mp_id = this.goodInfo.glassData.mp_id
405 this.addCartList.uid = this.$store.state.user.userInfo.uid
401 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') 406 })
402 }) 407 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
403 }, 408 },
404 computed: { 409 computed: {
405 updateGoodType () { 410 updateGoodType () {
406 return this.goodType 411 return this.goodType
407 }, 412 },
408 goodInfo () { 413 goodInfo () {
409 console.log(this.$store.state.read.goodInfo) 414 console.log(this.$store.state.read.goodInfo)
410 return this.$store.state.read.goodInfo 415 return this.$store.state.read.goodInfo
411 } 416 }
412 }, 417 },
413 methods: { 418 methods: {
414 // 前往购物车 419 // 前往购物车
415 toCart() { 420 toCart() {
416 uni.switchTab({ 421 uni.switchTab({
417 url: '/pages/cart/cart', 422 url: '/pages/cart/cart',
418 success: res => {}, 423 success: res => {},
419 fail: (error) => { console.log('跳转购物车失败======>', error) }, 424 fail: (error) => { console.log('跳转购物车失败======>', error) },
420 complete: () => { console.log('toCart') } 425 complete: () => { console.log('toCart') }
421 }) 426 })
422 }, 427 },
423 // 加入购物车 428 // 加入购物车
424 addCart () { 429 addCart () {
425 store.dispatch('cart/addCart', { 430 store.dispatch('cart/addCart', {
426 uid: this.$store.state.user.userInfo.uid, 431 uid: this.$store.state.user.userInfo.uid,
427 openid: this.$store.state.user.userInfo.openid, 432 openid: this.$store.state.user.userInfo.openid,
428 mp_id: this.addCartList.mp_id, 433 mp_id: this.addCartList.mp_id,
429 sk_id: this.addCartList.sk_id, 434 sk_id: this.addCartList.sk_id,
430 num: this.addCartList.num, 435 num: this.addCartList.num,
431 pid: this.pid,
432 price: this.addCartList.price, 436 pid: this.pid,
433 checkedSKU: {} 437 price: this.addCartList.price
434 }) 438 })
435 store.dispatch('cart/getCartList', { 439 store.dispatch('cart/getCartList', {
436 uid: this.$store.state.user.userInfo.uid // 用户id 440 uid: this.$store.state.user.userInfo.uid // 用户id
437 }) 441 })
438 }, 442 },
439 goPerchase () { 443 goPerchase () {
440 // switch (this.updateGoodType) { 444 // switch (this.updateGoodType) {
441 // case '1': 445 // case '1':
442 console.log('goPerchase') 446 console.log('goPerchase')
443 uni.navigateTo({ 447 uni.navigateTo({
444 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 448 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
445 success: res => {}, 449 success: res => {},
446 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 450 fail: (error) => { console.log('跳转参数选择失败======>', error) },
447 complete: () => { console.log('goPerchase') } 451 complete: () => { console.log('goPerchase') }
448 }) 452 })
449 // break 453 // break
450 // case '2': 454 // case '2':
451 // uni.navigateTo({ 455 // uni.navigateTo({
452 // url: '../detailStandard/detailStandard_k', 456 // url: '../detailStandard/detailStandard_k',
453 // success: res => {}, 457 // success: res => {},
454 // fail: () => {}, 458 // fail: () => {},
455 // complete: () => {} 459 // complete: () => {}
456 // }) 460 // })
457 // break 461 // break
458 // case '3': 462 // case '3':
459 // uni.navigateTo({ 463 // uni.navigateTo({
460 // url: '../purchaseLenses/purchaseLenses', 464 // url: '../purchaseLenses/purchaseLenses',
461 // success: res => {}, 465 // success: res => {},
462 // fail: () => {}, 466 // fail: () => {},
463 // complete: () => {} 467 // complete: () => {}
464 // }) 468 // })
465 // break 469 // break
466 // case '4': 470 // case '4':
467 // uni.navigateTo({ 471 // uni.navigateTo({
468 // url: '../detailStandard/detailStandard_sun', 472 // url: '../detailStandard/detailStandard_sun',
469 // success: res => {}, 473 // success: res => {},
470 // fail: () => {}, 474 // fail: () => {},
471 // complete: () => {} 475 // complete: () => {}
472 // }) 476 // })
473 // break 477 // break
474 // default : 478 // default :
475 // break 479 // break
476 // }
477 },
478 // 加入购物车
479 addCart () {
480 store.dispatch('cart/addCart', {
481 uid: this.$store.state.user.userInfo.uid,
482 openid: this.$store.state.user.userInfo.openid,
483 pid: this.pid,
484 checkedSKU: {}
485 })
486 store.dispatch('cart/getCartList', {
487 uid: this.$store.state.user.userInfo.uid // 用户id
488 }) 480 // }
489 }, 481 },
490 tabChange (e) { 482 tabChange (e) {
491 if (this.current !== e) { 483 if (this.current !== e) {
492 this.current = e 484 this.current = e
493 } 485 }
494 } 486 }
495 } 487 }
496 } 488 }
497 </script> 489 </script>
498 <style lang='scss'> 490 <style lang='scss'>
499 .container { 491 .container {
500 background-color: #f8f8f8; 492 background-color: #f8f8f8;
501 } 493 }
502 .D1, 494 .D1,
503 .D2, 495 .D2,
504 .D3, 496 .D3,
505 .D4, 497 .D4,
506 .D6 { 498 .D6 {
507 background: #ffffff; 499 background: #ffffff;
508 margin-bottom: 10px; 500 margin-bottom: 10px;
509 padding: 8px 20px 8px 20px; 501 padding: 8px 20px 8px 20px;
510 box-sizing: border-box; 502 box-sizing: border-box;
511 .swiperImage { 503 .swiperImage {
512 width: 684rpx; 504 width: 684rpx;
513 height: 480rpx; 505 height: 480rpx;
514 image { 506 image {
515 max-width: 100%; 507 max-width: 100%;
516 max-height: 100%; 508 max-height: 100%;
517 border-radius: 16rpx; 509 border-radius: 16rpx;
518 } 510 }
519 } 511 }
520 } 512 }
521 .D5 { 513 .D5 {
522 background: #ffffff; 514 background: #ffffff;
523 padding: 8px 20px 8px 20px; 515 padding: 8px 20px 8px 20px;
524 box-sizing: border-box; 516 box-sizing: border-box;
525 } 517 }
526 .swiperImage { 518 .swiperImage {
527 width: 100%; 519 width: 100%;
528 height: 560rpx; 520 height: 560rpx;
529 .swiper-item { 521 .swiper-item {
530 width: 100%; 522 width: 100%;
531 image { 523 image {
532 width: 100%; 524 width: 100%;
533 } 525 }
534 } 526 }
535 } 527 }
536 .D1 { 528 .D1 {
537 .D1_price { 529 .D1_price {
538 color: #eb5d3b; 530 color: #eb5d3b;
539 font-size: 18px; 531 font-size: 18px;
540 margin-top: 5px; 532 margin-top: 5px;
541 font-family: "PingFangSC-Semibold"; 533 font-family: "PingFangSC-Semibold";
542 display: flex; 534 display: flex;
543 justify-content: space-between; 535 justify-content: space-between;
544 .D1_number { 536 .D1_number {
545 color: #999999; 537 color: #999999;
546 font-size: 14px; 538 font-size: 14px;
547 font-family: "PingFangSC-Regular"; 539 font-family: "PingFangSC-Regular";
548 } 540 }
549 } 541 }
550 .D1_name { 542 .D1_name {
551 font-size: 16px; 543 font-size: 16px;
552 font-family: "PingFangSC-Semibold"; 544 font-family: "PingFangSC-Semibold";
553 margin-top: 5px; 545 margin-top: 5px;
554 .D1_name1 { 546 .D1_name1 {
555 font-weight: bold; 547 font-weight: bold;
556 font-size: 16px; 548 font-size: 16px;
557 color: #333333; 549 color: #333333;
558 } 550 }
559 } 551 }
560 .D1_spans { 552 .D1_spans {
561 font-size: 10px; 553 font-size: 10px;
562 color: #999999; 554 color: #999999;
563 margin-top: 5px; 555 margin-top: 5px;
564 span { 556 span {
565 height: 14px; 557 height: 14px;
566 margin-right: 10px; 558 margin-right: 10px;
567 } 559 }
568 } 560 }
569 } 561 }
570 .D2 { 562 .D2 {
571 font-size: 14px; 563 font-size: 14px;
572 font-family: "PingFangSC-Regular"; 564 font-family: "PingFangSC-Regular";
573 view { 565 view {
574 height: 24px; 566 height: 24px;
575 } 567 }
576 .D2_span1 { 568 .D2_span1 {
577 color: #999999; 569 color: #999999;
578 } 570 }
579 .D2_span2 { 571 .D2_span2 {
580 color: #333333; 572 color: #333333;
581 } 573 }
582 } 574 }
583 .D3 { 575 .D3 {
584 .screenBar { 576 .screenBar {
585 width: 670rpx; 577 width: 670rpx;
586 margin-top: 20rpx; 578 margin-top: 20rpx;
587 margin-bottom: 24rpx; 579 margin-bottom: 24rpx;
588 display: flex; 580 display: flex;
589 flex-direction: row; 581 flex-direction: row;
590 justify-content: space-between; 582 justify-content: space-between;
591 align-items: center; 583 align-items: center;
592 font-size: 14px; 584 font-size: 14px;
593 color: #333333; 585 color: #333333;
594 transition: all 0.2s; 586 transition: all 0.2s;
595 } 587 }
596 .screen-item { 588 .screen-item {
597 font-size: 32rpx; 589 font-size: 32rpx;
598 color: #333333; 590 color: #333333;
599 display: flex; 591 display: flex;
600 transition: all 0.2s; 592 transition: all 0.2s;
601 .D3_list { 593 .D3_list {
602 margin-bottom: 4px; 594 margin-bottom: 4px;
603 } 595 }
604 .D3_list view { 596 .D3_list view {
605 display: flex; 597 display: flex;
606 align-content: center; 598 align-content: center;
607 font-size: 14px; 599 font-size: 14px;
608 color: #333333; 600 color: #333333;
609 } 601 }
610 .D3_list image { 602 .D3_list image {
611 width: 50px; 603 width: 50px;
612 height: 25px; 604 height: 25px;
613 margin-right: 6px; 605 margin-right: 6px;
614 } 606 }
615 .D3_list span { 607 .D3_list span {
616 margin-left: 6px; 608 margin-left: 6px;
617 margin-right: 5px; 609 margin-right: 5px;
618 font-family: "PingFangSC-Regular"; 610 font-family: "PingFangSC-Regular";
619 } 611 }
620 } 612 }
621 .active { 613 .active {
622 border-bottom: 4rpx solid #ff6b4a; 614 border-bottom: 4rpx solid #ff6b4a;
623 } 615 }
624 .customerService { 616 .customerService {
625 margin-bottom: 90rpx; 617 margin-bottom: 90rpx;
626 .serviceItem { 618 .serviceItem {
627 margin-bottom: 32rpx; 619 margin-bottom: 32rpx;
628 .title { 620 .title {
629 display: flex; 621 display: flex;
630 flex-direction: row; 622 flex-direction: row;
631 align-items: center; 623 align-items: center;
632 .titleText { 624 .titleText {
633 font-size: 14px; 625 font-size: 14px;
634 color: #333333; 626 color: #333333;
635 margin-bottom: 12rpx; 627 margin-bottom: 12rpx;
636 } 628 }
637 } 629 }
638 .itemContent { 630 .itemContent {
639 font-size: 14px; 631 font-size: 14px;
640 color: #999999; 632 color: #999999;
641 margin-left: 18rpx; 633 margin-left: 18rpx;
642 } 634 }
643 } 635 }
644 .serviceItem2 { 636 .serviceItem2 {
645 margin-left: 18rpx; 637 margin-left: 18rpx;
646 margin-bottom: 32rpx; 638 margin-bottom: 32rpx;
647 .titleText { 639 .titleText {
648 font-size: 14px; 640 font-size: 14px;
649 color: #ff6b4a; 641 color: #ff6b4a;
650 } 642 }
651 .itemContent { 643 .itemContent {
652 font-size: 14px; 644 font-size: 14px;
653 color: #999999; 645 color: #999999;
654 .itemContent-child { 646 .itemContent-child {
655 margin-bottom: 40rpx; 647 margin-bottom: 40rpx;
656 .contentTitle { 648 .contentTitle {
657 border-bottom: 1px solid #ff6b4a; 649 border-bottom: 1px solid #ff6b4a;
658 } 650 }
659 } 651 }
660 } 652 }
661 } 653 }
662 } 654 }
663 } 655 }
664 .D4 { 656 .D4 {
665 .D4_esvalue { 657 .D4_esvalue {
666 font-size: 14px; 658 font-size: 14px;
667 color: #333333; 659 color: #333333;
668 display: flex; 660 display: flex;
669 justify-content: space-between; 661 justify-content: space-between;
670 margin-bottom: 10px; 662 margin-bottom: 10px;
671 .D4_2 { 663 .D4_2 {
672 width: 90px; 664 width: 90px;
673 display: flex; 665 display: flex;
674 align-items: center; 666 align-items: center;
675 justify-content: space-between; 667 justify-content: space-between;
676 } 668 }
677 } 669 }
678 .D4_esvalue view { 670 .D4_esvalue view {
679 font-size: 14px; 671 font-size: 14px;
680 color: #333333; 672 color: #333333;
681 font-weight: bold; 673 font-weight: bold;
682 } 674 }
683 .D4_list{ 675 .D4_list{
684 display: grid; 676 display: grid;
685 grid-row-gap: 10px; 677 grid-row-gap: 10px;
686 grid-column-gap: 4px; 678 grid-column-gap: 4px;
687 } 679 }
688 .D4_list view { 680 .D4_list view {
689 display: flex; 681 display: flex;
690 justify-content: center; 682 justify-content: center;
691 align-items: center; 683 align-items: center;
692 font-size: 12px; 684 font-size: 12px;
693 width: 118px; 685 width: 118px;
694 height: 24px; 686 height: 24px;
695 border-radius: 2px; 687 border-radius: 2px;
696 background: #f2f2f2; 688 background: #f2f2f2;
697 color: #666666; 689 color: #666666;
698 // letter-spacing: 1px; 690 // letter-spacing: 1px;
699 } 691 }
700 } 692 }
701 .D5 { 693 .D5 {
702 .D5_fixed1 { 694 .D5_fixed1 {
703 display: flex; 695 display: flex;
704 justify-content: space-between; 696 justify-content: space-between;
705 align-content: center; 697 align-content: center;
706 margin-bottom: 12px; 698 margin-bottom: 12px;
707 view { 699 view {
708 font-size: 14px; 700 font-size: 14px;
709 color: #333333; 701 color: #333333;
710 font-weight: bold; 702 font-weight: bold;
711 font-family: "PingFangSC-Medium"; 703 font-family: "PingFangSC-Medium";
712 line-height: 24px; 704 line-height: 24px;
713 } 705 }
714 image { 706 image {
715 width: 240rpx; 707 width: 240rpx;
716 height: 3px; 708 height: 3px;
717 margin-top: 10px; 709 margin-top: 10px;
718 } 710 }
719 } 711 }
720 .D5_all { 712 .D5_all {
721 width: 100%; 713 width: 100%;
722 margin-top: 30rpx; 714 margin-top: 30rpx;
723 margin-right: 30rpx; 715 margin-right: 30rpx;
724 margin-bottom: 180rpx; 716 margin-bottom: 180rpx;
725 font-family: "PingFangSC-Regular"; 717 font-family: "PingFangSC-Regular";
726 // border: #999999 solid 1.5px; 718 // border: #999999 solid 1.5px;
727 } 719 }
728 } 720 }
729 .D6 { 721 .D6 {
730 width: 100%; 722 width: 100%;
731 height: 430px; 723 height: 430px;
732 background: #f9f6ed; 724 background: #f9f6ed;
733 margin-bottom: 74px; 725 margin-bottom: 74px;
734 view { 726 view {
735 text-align: center; 727 text-align: center;
736 } 728 }
737 .D6_v1 { 729 .D6_v1 {
738 font-weight: bold; 730 font-weight: bold;
739 } 731 }
740 .D6_v2 { 732 .D6_v2 {
741 font-size: 14px; 733 font-size: 14px;
742 margin-bottom: 30px; 734 margin-bottom: 30px;
743 } 735 }
744 .D6_v5 { 736 .D6_v5 {
745 .D6_v5_s1 { 737 .D6_v5_s1 {
746 font-weight: bold; 738 font-weight: bold;
747 } 739 }
748 .D6_v5_s2 { 740 .D6_v5_s2 {
749 font-size: 14px; 741 font-size: 14px;
750 } 742 }
751 } 743 }
752 } 744 }
753 .botton { 745 .botton {
754 position: fixed; 746 position: fixed;
755 bottom: 0; 747 bottom: 0;
756 height: 74px; 748 height: 74px;
757 width: 100%; 749 width: 100%;
758 background: #ffffff; 750 background: #ffffff;
759 padding: 20px 20px 8px 20px; 751 padding: 20px 20px 8px 20px;
760 font-family: "PingFangSC-Regular"; 752 font-family: "PingFangSC-Regular";
761 box-sizing: border-box; 753 box-sizing: border-box;
762 display: flex; 754 display: flex;
763 justify-content: space-between; 755 justify-content: space-between;
764 align-content: center; 756 align-content: center;
765 .botton_1 { 757 .botton_1 {
766 width: 20%; 758 width: 20%;
767 height: 100%; 759 height: 100%;
768 text-align: center; 760 text-align: center;
769 color: #989898; 761 color: #989898;
770 } 762 }
771 image { 763 image {
772 width: 60%; 764 width: 60%;
773 height: 30px; 765 height: 30px;
774 } 766 }
775 .botton_image { 767 .botton_image {
776 font-size: 12px; 768 font-size: 12px;
777 text-align: center; 769 text-align: center;
778 } 770 }
779 .botton_2 { 771 .botton_2 {
780 width: 74%; 772 width: 74%;
781 height: 86%; 773 height: 86%;
782 display: grid; 774 display: grid;
783 grid-template-columns: 50% 50%; 775 grid-template-columns: 50% 50%;
784 } 776 }
785 .botton_input { 777 .botton_input {
786 display: inline-flex; 778 display: inline-flex;
787 align-items: center; 779 align-items: center;
788 justify-content: space-around; 780 justify-content: space-around;
789 background: #fff0ec; 781 background: #fff0ec;
790 font-size: 16px; 782 font-size: 16px;
791 color: #ff6b4a; 783 color: #ff6b4a;
792 border-radius: 20px 0 0 20px; 784 border-radius: 20px 0 0 20px;
793 } 785 }
794 .botton_now { 786 .botton_now {
795 display: inline-flex; 787 display: inline-flex;
796 align-items: center; 788 align-items: center;
797 justify-content: space-around; 789 justify-content: space-around;
798 background: #ff6b4a; 790 background: #ff6b4a;
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