Commit db5b5fe00da234e8f2903f7076f3a6204d656da7
1 parent
eab89b2542
Exists in
master
"修改样式细节"
Showing
3 changed files
with
21 additions
and
5 deletions
Show diff stats
src/pages/myOrderPaying/myOrderPaying.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view class="order-hr"></view> | 3 | <view class="order-hr"></view> |
| 4 | <view class="order-time"> | 4 | <view class="order-time"> |
| 5 | <text>请在</text> | 5 | <text>请在</text> |
| 6 | <!-- <text class="p2"></text> --> | 6 | <!-- <text class="p2"></text> --> |
| 7 | <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" | 7 | <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" |
| 8 | :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> | 8 | :hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> |
| 9 | <text>内完成付款</text> | 9 | <text>内完成付款</text> |
| 10 | </view> | 10 | </view> |
| 11 | <view class="order"> | 11 | <view class="order"> |
| 12 | <view class="order-user"> | 12 | <view class="order-user"> |
| 13 | <view class="order-user-head"> | 13 | <view class="order-user-head"> |
| 14 | <text class="p1">钱大大</text> | 14 | <text class="p1">钱大大</text> |
| 15 | <text class="p2">18823749843</text> | 15 | <text class="p2">18823749843</text> |
| 16 | </view> | 16 | </view> |
| 17 | <view class="order-user-body"> | 17 | <view class="order-user-body"> |
| 18 | <image src="../../static/myorder-paying-location.png"></image> | 18 | <image src="../../static/myorder-paying-location.png"></image> |
| 19 | <text class="p3">四川省 德阳市 旌阳区</br>黄河西路碧桂园3期 4单元 202</text> | 19 | <text class="p3">四川省 德阳市 旌阳区\n黄河西路碧桂园3期 4单元 202</text> |
| 20 | </view> | 20 | </view> |
| 21 | </view> | 21 | </view> |
| 22 | <view class="order-info"> | 22 | <view class="order-info"> |
| 23 | <view class="order-info-head"> | 23 | <view class="order-info-head"> |
| 24 | <image src="../../static/myorder-paying-pic.png"></image> | 24 | <image src="../../static/myorder-paying-pic.png"></image> |
| 25 | <view class="order-info-head-r"> | 25 | <view class="order-info-head-r"> |
| 26 | <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> | 26 | <text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text> |
| 27 | <view class="p2" style="margin: 0;"> | 27 | <view class="p2" style="margin: 0;"> |
| 28 | 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 | 28 | 规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻 |
| 29 | <!-- <view class="arrow"></view> --> | 29 | <!-- <view class="arrow"></view> --> |
| 30 | </view> | 30 | </view> |
| 31 | <text class="p3"><span>￥180</span><span class="p4">X1</span></text> | 31 | <text class="p3"><span>￥180</span><span class="p4">X1</span></text> |
| 32 | </view> | 32 | </view> |
| 33 | </view> | 33 | </view> |
| 34 | <!-- <view class="order-info-goodsnum"> | 34 | <!-- <view class="order-info-goodsnum"> |
| 35 | <text>X1</text> | 35 | <text>X1</text> |
| 36 | </view> --> | 36 | </view> --> |
| 37 | <text class="order-info-freight"> | 37 | <text class="order-info-freight"> |
| 38 | <text class="p1">运费</text> | 38 | <text class="p1">运费</text> |
| 39 | <text class="p2">0.00</text> | 39 | <text class="p2">0.00</text> |
| 40 | </text> | 40 | </text> |
| 41 | <text class="order-info-discount"> | 41 | <text class="order-info-discount"> |
| 42 | <text class="p1">优惠</text> | 42 | <text class="p1">优惠</text> |
| 43 | <text class="p2">-￥70.00</text> | 43 | <text class="p2">-￥70.00</text> |
| 44 | </text> | 44 | </text> |
| 45 | <text class="order-info-price"> | 45 | <text class="order-info-price"> |
| 46 | <text class="p1">实付</text> | 46 | <text class="p1">实付</text> |
| 47 | <text class="p2">￥110</text> | 47 | <text class="p2">￥110</text> |
| 48 | </text> | 48 | </text> |
| 49 | <text class="order-info-num"> | 49 | <text class="order-info-num"> |
| 50 | <text>订单号：203486795859605849</text> | 50 | <text>订单号：203486795859605849</text> |
| 51 | </text> | 51 | </text> |
| 52 | <text class="order-info-time"> | 52 | <text class="order-info-time"> |
| 53 | <text>下单时间：2020-10-22 14:32:42</text> | 53 | <text>下单时间：2020-10-22 14:32:42</text> |
| 54 | </text> | 54 | </text> |
| 55 | <view class="order-info-hr"></view> | 55 | <view class="order-info-hr"></view> |
| 56 | <view class="order-info-contact"> | 56 | <view class="order-info-contact"> |
| 57 | <image src="../../static/myorder-paying-contact.png"></image> | 57 | <image src="../../static/myorder-paying-contact.png"></image> |
| 58 | <text>联系客服</text> | 58 | <text>联系客服</text> |
| 59 | </view> | 59 | </view> |
| 60 | </view> | 60 | </view> |
| 61 | </view> | 61 | </view> |
| 62 | <view class="order-confim"> | 62 | <view class="order-confim"> |
| 63 | <button class="b1">取消订单</button> | 63 | <button class="b1">取消订单</button> |
| 64 | <button class="b2">立即支付</button> | 64 | <button class="b2">立即支付</button> |
| 65 | </view> | 65 | </view> |
| 66 | </view> | 66 | </view> |
| 67 | </template> | 67 | </template> |
| 68 | 68 | ||
| 69 | <script> | 69 | <script> |
| 70 | import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' | 70 | import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' |
| 71 | export default { | 71 | export default { |
| 72 | components: { | 72 | components: { |
| 73 | UniCountdown | 73 | UniCountdown |
| 74 | }, | 74 | }, |
| 75 | data() { | 75 | data() { |
| 76 | return { | 76 | return { |
| 77 | scrollHeight: false, | 77 | scrollHeight: false, |
| 78 | } | 78 | } |
| 79 | }, | 79 | }, |
| 80 | methods: { | 80 | methods: { |
| 81 | 81 | ||
| 82 | } | 82 | } |
| 83 | } | 83 | } |
| 84 | </script> | 84 | </script> |
| 85 | 85 | ||
| 86 | <style lang="scss" scoped> | 86 | <style lang="scss" scoped> |
| 87 | .content{ | 87 | .content{ |
| 88 | display: flex; | 88 | display: flex; |
| 89 | flex-direction: column; | 89 | flex-direction: column; |
| 90 | justify-content: center; | 90 | justify-content: center; |
| 91 | align-items: center; | 91 | align-items: center; |
| 92 | background-color: #f2f2f2; | 92 | background-color: #f2f2f2; |
| 93 | } | 93 | } |
| 94 | 94 | ||
| 95 | 95 | ||
| 96 | .order { | 96 | .order { |
| 97 | min-height: 1196rpx; | 97 | min-height: 1196rpx; |
| 98 | margin-bottom: 112rpx; | 98 | margin-bottom: 112rpx; |
| 99 | background: #F2F2F2; | 99 | background: #F2F2F2; |
| 100 | } | 100 | } |
| 101 | .order-hr { | 101 | .order-hr { |
| 102 | width: 100%; | 102 | width: 100%; |
| 103 | height: 1px; | 103 | height: 1px; |
| 104 | background-color: #E9E9E9; | 104 | background-color: #E9E9E9; |
| 105 | } | 105 | } |
| 106 | .order-time { | 106 | .order-time { |
| 107 | width: 100%; | 107 | width: 100%; |
| 108 | height: 140rpx; | 108 | height: 140rpx; |
| 109 | background-color: #fff; | 109 | background-color: #fff; |
| 110 | display: flex; | 110 | display: flex; |
| 111 | justify-content: center; | 111 | justify-content: center; |
| 112 | text { | 112 | text { |
| 113 | // font-family: PingFangSC-Regular; | 113 | // font-family: PingFangSC-Regular; |
| 114 | margin-top: 48rpx; | 114 | margin-top: 48rpx; |
| 115 | font-size: 14px; | 115 | font-size: 14px; |
| 116 | color: #333333; | 116 | color: #333333; |
| 117 | letter-spacing: -0.26px; | 117 | letter-spacing: -0.26px; |
| 118 | } | 118 | } |
| 119 | .p2 { | 119 | .p2 { |
| 120 | // font-family: DINAlternate-Bold; | 120 | // font-family: DINAlternate-Bold; |
| 121 | margin: 42rpx 20rpx 0 20rpx; | 121 | margin: 42rpx 20rpx 0 20rpx; |
| 122 | font-size: 18px; | 122 | font-size: 18px; |
| 123 | color: #EC5D3B; | 123 | color: #EC5D3B; |
| 124 | letter-spacing: -0.34px; | 124 | letter-spacing: -0.34px; |
| 125 | } | 125 | } |
| 126 | } | 126 | } |
| 127 | 127 | ||
| 128 | .order-user { | 128 | .order-user { |
| 129 | width: 670rpx; | 129 | width: 670rpx; |
| 130 | height: 228rpx; | 130 | height: 228rpx; |
| 131 | background: #FFFFFF; | 131 | background: #FFFFFF; |
| 132 | border-radius: 14rpx; | 132 | border-radius: 14rpx; |
| 133 | margin: 0 auto; | 133 | margin: 0 auto; |
| 134 | margin-top: 20rpx; | 134 | margin-top: 20rpx; |
| 135 | margin-bottom: 20rpx; | 135 | margin-bottom: 20rpx; |
| 136 | .order-user-head { | 136 | .order-user-head { |
| 137 | display: flex; | 137 | display: flex; |
| 138 | height: 108rpx; | 138 | height: 108rpx; |
| 139 | width: 100%; | 139 | width: 100%; |
| 140 | align-items: center; | 140 | align-items: center; |
| 141 | margin-left: 126rpx; | 141 | margin-left: 126rpx; |
| 142 | .p1 { | 142 | .p1 { |
| 143 | // font-family: PingFangSC-Regular; | 143 | // font-family: PingFangSC-Regular; |
| 144 | font-size: 14px; | 144 | font-size: 14px; |
| 145 | color: #333333; | 145 | color: #333333; |
| 146 | letter-spacing: -0.26px; | 146 | letter-spacing: -0.26px; |
| 147 | margin-right: 20rpx; | 147 | margin-right: 20rpx; |
| 148 | } | 148 | } |
| 149 | .p2 { | 149 | .p2 { |
| 150 | // font-family: PingFangSC-Regular; | 150 | // font-family: PingFangSC-Regular; |
| 151 | font-size: 14px; | 151 | font-size: 14px; |
| 152 | color: #999999; | 152 | color: #999999; |
| 153 | letter-spacing: -0.26px; | 153 | letter-spacing: -0.26px; |
| 154 | } | 154 | } |
| 155 | } | 155 | } |
| 156 | .order-user-body { | 156 | .order-user-body { |
| 157 | display: flex; | 157 | display: flex; |
| 158 | width: 100%; | 158 | width: 100%; |
| 159 | image{ | 159 | image{ |
| 160 | width: 24px; | 160 | width: 24px; |
| 161 | height: 26px; | 161 | height: 26px; |
| 162 | margin: 12rpx 32rpx 0 40rpx; | 162 | margin: 12rpx 32rpx 0 40rpx; |
| 163 | } | 163 | } |
| 164 | .p3 { | 164 | .p3 { |
| 165 | // font-family: PingFangSC-Semibold; | 165 | // font-family: PingFangSC-Semibold; |
| 166 | font-size: 14px; | 166 | font-size: 14px; |
| 167 | color: #333333; | 167 | color: #333333; |
| 168 | letter-spacing: -0.26px; | 168 | letter-spacing: -0.26px; |
| 169 | } | 169 | } |
| 170 | } | 170 | } |
| 171 | } | 171 | } |
| 172 | 172 | ||
| 173 | .order-info { | 173 | .order-info { |
| 174 | width: 670rpx; | 174 | width: 670rpx; |
| 175 | background-color: #fff; | 175 | background-color: #fff; |
| 176 | box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); | 176 | box-shadow: 0 0 20rpx 0 rgba(177,128,128,0.06); |
| 177 | border-radius: 16rpx; | 177 | border-radius: 16rpx; |
| 178 | margin: 0 auto; | 178 | margin: 0 auto; |
| 179 | view{ | 179 | view{ |
| 180 | margin-left: 40rpx; | 180 | margin-left: 40rpx; |
| 181 | } | 181 | } |
| 182 | text{ | 182 | text{ |
| 183 | font-size: 14px; | 183 | font-size: 14px; |
| 184 | } | 184 | } |
| 185 | .order-info-head { | 185 | .order-info-head { |
| 186 | display: flex; | 186 | display: flex; |
| 187 | padding-top: 40rpx; | 187 | padding-top: 40rpx; |
| 188 | image{ | 188 | image{ |
| 189 | height: 188rpx; | 189 | height: 188rpx; |
| 190 | width: 188rpx; | 190 | width: 188rpx; |
| 191 | } | 191 | } |
| 192 | .order-info-head-r{ | 192 | .order-info-head-r{ |
| 193 | margin: 0; | 193 | margin: 0; |
| 194 | width: 368rpx; | 194 | width: 368rpx; |
| 195 | margin-left: 24rpx; | 195 | margin-left: 24rpx; |
| 196 | // margin-top: 40rpx; | 196 | // margin-top: 40rpx; |
| 197 | text{ | 197 | text{ |
| 198 | display: block; | 198 | display: block; |
| 199 | } | 199 | } |
| 200 | // .arrow{ | 200 | // .arrow{ |
| 201 | // width: 0; | 201 | // width: 0; |
| 202 | // height: 0; | 202 | // height: 0; |
| 203 | // border-left: 5px transparent; | 203 | // border-left: 5px transparent; |
| 204 | // border-right: 5px transparent; | 204 | // border-right: 5px transparent; |
| 205 | // border-top: 5px #979797; | 205 | // border-top: 5px #979797; |
| 206 | // border-bottom: 0 transparent; | 206 | // border-bottom: 0 transparent; |
| 207 | // border-style: solid; | 207 | // border-style: solid; |
| 208 | // position: relative; | 208 | // position: relative; |
| 209 | // // transform: scaleY(-1); | 209 | // // transform: scaleY(-1); |
| 210 | // } | 210 | // } |
| 211 | // .arrow::after{ | 211 | // .arrow::after{ |
| 212 | // content: ''; | 212 | // content: ''; |
| 213 | // position: absolute; | 213 | // position: absolute; |
| 214 | // top: -6.5px; | 214 | // top: -6.5px; |
| 215 | // left: -5px; | 215 | // left: -5px; |
| 216 | // border-left: 5px transparent; | 216 | // border-left: 5px transparent; |
| 217 | // border-right: 5px transparent; | 217 | // border-right: 5px transparent; |
| 218 | // border-top: 5px #FFFFFF; | 218 | // border-top: 5px #FFFFFF; |
| 219 | // border-bottom: 0 transparent; | 219 | // border-bottom: 0 transparent; |
| 220 | // border-style: solid; | 220 | // border-style: solid; |
| 221 | // } | 221 | // } |
| 222 | .p1 { | 222 | .p1 { |
| 223 | min-height: 40px; | 223 | min-height: 40px; |
| 224 | // font-family: PingFangSC-Regular; | 224 | // font-family: PingFangSC-Regular; |
| 225 | font-size: 14px; | 225 | font-size: 14px; |
| 226 | color: #333333; | 226 | color: #333333; |
| 227 | letter-spacing: -0.26px; | 227 | letter-spacing: -0.26px; |
| 228 | line-height: 18px; | 228 | line-height: 18px; |
| 229 | // line-height: 20px; | 229 | // line-height: 20px; |
| 230 | } | 230 | } |
| 231 | .p2 { | 231 | .p2 { |
| 232 | height: 34px; | 232 | height: 34px; |
| 233 | padding: 1px 0 3px 0; | 233 | padding: 1px 0 3px 0; |
| 234 | // font-family: PingFangSC-Regular; | 234 | // font-family: PingFangSC-Regular; |
| 235 | font-size: 12px; | 235 | font-size: 12px; |
| 236 | color: #999999; | 236 | color: #999999; |
| 237 | letter-spacing: -0.23px; | 237 | letter-spacing: -0.23px; |
| 238 | } | 238 | } |
| 239 | .p3 { | 239 | .p3 { |
| 240 | height: 20px; | 240 | height: 20px; |
| 241 | // font-family: PingFangSC-Regular; | 241 | // font-family: PingFangSC-Regular; |
| 242 | font-size: 14px; | 242 | font-size: 14px; |
| 243 | color: #FF6B4A; | 243 | color: #FF6B4A; |
| 244 | letter-spacing: -0.26px; | 244 | letter-spacing: -0.26px; |
| 245 | } | 245 | } |
| 246 | .p4{ | 246 | .p4{ |
| 247 | font-size: 12px; | 247 | font-size: 12px; |
| 248 | color: #999999; | 248 | color: #999999; |
| 249 | letter-spacing: -0.23px; | 249 | letter-spacing: -0.23px; |
| 250 | margin-left: 10px; | 250 | margin-left: 10px; |
| 251 | } | 251 | } |
| 252 | } | 252 | } |
| 253 | 253 | ||
| 254 | } | 254 | } |
| 255 | // .order-info-goodsnum { | 255 | // .order-info-goodsnum { |
| 256 | // display: flex; | 256 | // display: flex; |
| 257 | // align-items: center; | 257 | // align-items: center; |
| 258 | // justify-content: flex-end; | 258 | // justify-content: flex-end; |
| 259 | // text { | 259 | // text { |
| 260 | // margin-right: 44rpx; | 260 | // margin-right: 44rpx; |
| 261 | // // ont-family: PingFangSC-Regular; | 261 | // // ont-family: PingFangSC-Regular; |
| 262 | // font-size: 12px; | 262 | // font-size: 12px; |
| 263 | // color: #999999; | 263 | // color: #999999; |
| 264 | // letter-spacing: -0.23px; | 264 | // letter-spacing: -0.23px; |
| 265 | // } | 265 | // } |
| 266 | // } | 266 | // } |
| 267 | .order-info-freight { | 267 | .order-info-freight { |
| 268 | display: block; | 268 | display: block; |
| 269 | margin-left: 40rpx; | 269 | margin-left: 40rpx; |
| 270 | margin-top: 22rpx; | 270 | margin-top: 22rpx; |
| 271 | .p1{ | 271 | .p1{ |
| 272 | // font-family: PingFangSC-Regular; | 272 | // font-family: PingFangSC-Regular; |
| 273 | font-size: 14px; | 273 | font-size: 14px; |
| 274 | color: #333333; | 274 | color: #333333; |
| 275 | letter-spacing: -0.26px; | 275 | letter-spacing: -0.26px; |
| 276 | line-height: 18px; | 276 | line-height: 18px; |
| 277 | margin-right: 24px; | 277 | margin-right: 24px; |
| 278 | } | 278 | } |
| 279 | .p2 { | 279 | .p2 { |
| 280 | // font-family: PingFangSC-Regular; | 280 | // font-family: PingFangSC-Regular; |
| 281 | font-size: 14px; | 281 | font-size: 14px; |
| 282 | color: #FF6B4A; | 282 | color: #FF6B4A; |
| 283 | letter-spacing: -0.26px; | 283 | letter-spacing: -0.26px; |
| 284 | } | 284 | } |
| 285 | } | 285 | } |
| 286 | .order-info-discount { | 286 | .order-info-discount { |
| 287 | display: block; | 287 | display: block; |
| 288 | margin-left: 40rpx; | 288 | margin-left: 40rpx; |
| 289 | margin-top: 24rpx; | 289 | margin-top: 24rpx; |
| 290 | .p1 { | 290 | .p1 { |
| 291 | // font-family: PingFangSC-Regular; | 291 | // font-family: PingFangSC-Regular; |
| 292 | font-size: 14px; | 292 | font-size: 14px; |
| 293 | color: #333333; | 293 | color: #333333; |
| 294 | letter-spacing: -0.26px; | 294 | letter-spacing: -0.26px; |
| 295 | line-height: 18px; | 295 | line-height: 18px; |
| 296 | margin-right: 24px; | 296 | margin-right: 24px; |
| 297 | } | 297 | } |
| 298 | .p2 { | 298 | .p2 { |
| 299 | // font-family: PingFangSC-Regular; | 299 | // font-family: PingFangSC-Regular; |
| 300 | font-size: 14px; | 300 | font-size: 14px; |
| 301 | color: #FF6B4A; | 301 | color: #FF6B4A; |
| 302 | letter-spacing: -0.26px; | 302 | letter-spacing: -0.26px; |
| 303 | } | 303 | } |
| 304 | } | 304 | } |
| 305 | .order-info-price { | 305 | .order-info-price { |
| 306 | display: block; | 306 | display: block; |
| 307 | margin-left: 40rpx; | 307 | margin-left: 40rpx; |
| 308 | margin-top: 24rpx; | 308 | margin-top: 24rpx; |
| 309 | .p1 { | 309 | .p1 { |
| 310 | // font-family: PingFangSC-Semibold; | 310 | // font-family: PingFangSC-Semibold; |
| 311 | font-size: 14px; | 311 | font-size: 14px; |
| 312 | color: #333333; | 312 | color: #333333; |
| 313 | letter-spacing: -0.26px; | 313 | letter-spacing: -0.26px; |
| 314 | line-height: 18px; | 314 | line-height: 18px; |
| 315 | margin-right: 24px; | 315 | margin-right: 24px; |
| 316 | } | 316 | } |
| 317 | .p2 { | 317 | .p2 { |
| 318 | // font-family: PingFangSC-Semibold; | 318 | // font-family: PingFangSC-Semibold; |
| 319 | font-size: 14px; | 319 | font-size: 14px; |
| 320 | color: #FF6B4A; | 320 | color: #FF6B4A; |
| 321 | letter-spacing: -0.26px; | 321 | letter-spacing: -0.26px; |
| 322 | } | 322 | } |
| 323 | } | 323 | } |
| 324 | .order-info-num{ | 324 | .order-info-num{ |
| 325 | display: block; | 325 | display: block; |
| 326 | margin-left: 40rpx; | 326 | margin-left: 40rpx; |
| 327 | margin-top: 44rpx; | 327 | margin-top: 44rpx; |
| 328 | text{ | 328 | text{ |
| 329 | // font-family: PingFangSC-Regular; | 329 | // font-family: PingFangSC-Regular; |
| 330 | font-size: 12px; | 330 | font-size: 12px; |
| 331 | color: #999999; | 331 | color: #999999; |
| 332 | letter-spacing: -0.23px; | 332 | letter-spacing: -0.23px; |
| 333 | } | 333 | } |
| 334 | } | 334 | } |
| 335 | .order-info-time { | 335 | .order-info-time { |
| 336 | display: block; | 336 | display: block; |
| 337 | margin: 8rpx 0 48rpx 40rpx; | 337 | margin: 8rpx 0 48rpx 40rpx; |
| 338 | text{ | 338 | text{ |
| 339 | // font-family: PingFangSC-Regular; | 339 | // font-family: PingFangSC-Regular; |
| 340 | font-size: 12px; | 340 | font-size: 12px; |
| 341 | color: #999999; | 341 | color: #999999; |
| 342 | letter-spacing: -0.23px; | 342 | letter-spacing: -0.23px; |
| 343 | } | 343 | } |
| 344 | } | 344 | } |
| 345 | .order-info-hr{ | 345 | .order-info-hr{ |
| 346 | width: 520rpx; | 346 | width: 520rpx; |
| 347 | height: 1px; | 347 | height: 1px; |
| 348 | background-color: #E9E9E9; | 348 | background-color: #E9E9E9; |
| 349 | margin-bottom: 20rpx; | 349 | margin-bottom: 20rpx; |
| 350 | } | 350 | } |
| 351 | .order-info-contact { | 351 | .order-info-contact { |
| 352 | display: flex; | 352 | display: flex; |
| 353 | padding-bottom: 28rpx; | 353 | padding-bottom: 28rpx; |
| 354 | image{ | 354 | image{ |
| 355 | width: 19px; | 355 | width: 19px; |
| 356 | height: 16px; | 356 | height: 16px; |
| 357 | } | 357 | } |
| 358 | text { | 358 | text { |
| 359 | // font-family: PingFangSC-Regular; | 359 | // font-family: PingFangSC-Regular; |
| 360 | margin-left: 20rpx; | 360 | margin-left: 20rpx; |
| 361 | font-size: 14px; | 361 | font-size: 14px; |
| 362 | color: #333333; | 362 | color: #333333; |
| 363 | letter-spacing: -0.26px; | 363 | letter-spacing: -0.26px; |
| 364 | line-height: 18px; | 364 | line-height: 18px; |
| 365 | } | 365 | } |
| 366 | } | 366 | } |
| 367 | } | 367 | } |
| 368 | 368 | ||
| 369 | .order-confim { | 369 | .order-confim { |
| 370 | display: flex; | 370 | display: flex; |
| 371 | align-items: center; | 371 | align-items: center; |
| 372 | z-index: 999; | 372 | z-index: 999; |
| 373 | width: 100%; | 373 | width: 100%; |
| 374 | height: 112rpx; | 374 | height: 112rpx; |
| 375 | position: fixed; | 375 | position: fixed; |
| 376 | bottom: 0; | 376 | bottom: 0; |
| 377 | background: #FFFFFF; | 377 | background: #FFFFFF; |
| 378 | button { | 378 | button { |
| 379 | width: 204rpx; | 379 | width: 204rpx; |
| 380 | height: 80rpx; | 380 | height: 80rpx; |
| 381 | border: 1px solid #FF6B4A; | 381 | border: 1px solid #FF6B4A; |
| 382 | border-radius: 40rpx; | 382 | border-radius: 40rpx; |
| 383 | font-size: 32rpx; | 383 | font-size: 32rpx; |
| 384 | letter-spacing: -0.3px; | 384 | letter-spacing: -0.3px; |
| 385 | margin-right: 0; | 385 | margin-right: 0; |
| 386 | } | 386 | } |
| 387 | .b1 { | 387 | .b1 { |
| 388 | // font-family: PingFangSC-Regular; | 388 | // font-family: PingFangSC-Regular; |
| 389 | color: #FF6B4A; | 389 | color: #FF6B4A; |
| 390 | 390 | ||
| 391 | } | 391 | } |
| 392 | .b2 { | 392 | .b2 { |
| 393 | // font-family: PingFangSC-Regular; | 393 | // font-family: PingFangSC-Regular; |
| 394 | background-color: #FF6B4A; | 394 | background-color: #FF6B4A; |
| 395 | color: #FFFFFF; | 395 | color: #FFFFFF; |
| 396 | margin: 0 26rpx 0 20rpx; | 396 | margin: 0 26rpx 0 20rpx; |
| 397 | } | 397 | } |
| 398 | } | 398 | } |
| 399 | 399 | ||
| 400 | </style> | 400 | </style> |
| 401 | 401 |
src/pages/user/user.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <view class="content"> | 3 | <view class="content"> |
| 4 | <view class="userInfo"> | 4 | <view class="userInfo"> |
| 5 | <view class="info"> | 5 | <view class="info"> |
| 6 | <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> | 6 | <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> |
| 7 | <view class="infoText"> | 7 | <view class="infoText"> |
| 8 | <text class="userName">{{userName}}</text> | 8 | <text class="userName">{{userName}}</text> |
| 9 | <text class="nickName">用户名：骆驼不死的祥子</text> | 9 | <text class="nickName">用户名：骆驼不死的祥子</text> |
| 10 | </view> | 10 | </view> |
| 11 | </view> | 11 | </view> |
| 12 | <view class="service"> | 12 | <view class="service"> |
| 13 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> | 13 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
| 14 | </view> | 14 | </view> |
| 15 | </view> | 15 | </view> |
| 16 | <view class="myOrder"> | 16 | <view class="myOrder"> |
| 17 | <view class="orderHeader"> | 17 | <view class="orderHeader"> |
| 18 | <text>全部订单</text> | 18 | <text>全部订单</text> |
| 19 | <view class="btn" @click="toMyOrder"> | 19 | <view class="btn" @click="toMyOrder"> |
| 20 | 全部 | 20 | 全部 |
| 21 | <image src="../../static/right.png" mode="aspectFill"></image> | 21 | <image src="../../static/right.png" mode="aspectFill"></image> |
| 22 | </view> | 22 | </view> |
| 23 | </view> | 23 | </view> |
| 24 | <view class="orderBody"> | 24 | <view class="orderBody"> |
| 25 | <view class="item waitPay" @click="toMyOrderPaying"> | 25 | <view class="item waitPay" @click="toMyOrderPaying"> |
| 26 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> | 26 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> |
| 27 | <text>待付款</text> | 27 | <text>待付款</text> |
| 28 | </view> | 28 | </view> |
| 29 | <view class="item waitDeliver" @click="toPredelivery" > | 29 | <view class="item waitDeliver" @click="toPredelivery" > |
| 30 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> | 30 | <image src="../../static/waitPay.png" mode="aspectFill"></image> |
| 31 | <text>待发货</text> | 31 | <text>待发货</text> |
| 32 | </view> | 32 | </view> |
| 33 | <view class="item waitReceive" @click="torefunProgress"> | 33 | <view class="item waitReceive" @click="torefunProgress"> |
| 34 | <image src="../../static/waitReceive.png" mode="aspectFill"></image> | 34 | <image src="../../static/waitReceive.png" mode="aspectFill"></image> |
| 35 | <text>待收货</text> | 35 | <text>待收货</text> |
| 36 | </view> | 36 | </view> |
| 37 | <view class="item service" @click="torefundment"> | 37 | <view class="item service" @click="torefundment"> |
| 38 | <image src="../../static/service.png" mode="aspectFill"></image> | 38 | <image src="../../static/service.png" mode="aspectFill"></image> |
| 39 | <text>退换/售后</text> | 39 | <text>退换/售后</text> |
| 40 | </view> | 40 | </view> |
| 41 | </view> | 41 | </view> |
| 42 | </view> | 42 | </view> |
| 43 | <view class="recommend"> | 43 | <view class="recommend"> |
| 44 | <view class="title"> | 44 | <view class="title"> |
| 45 | <view class="line"></view> | 45 | <view class="line"></view> |
| 46 | <view class="text">精选推荐</view> | 46 | <view class="text">精选推荐</view> |
| 47 | <view class="line"></view> | 47 | <view class="line"></view> |
| 48 | </view> | 48 | </view> |
| 49 | <!-- 商品列表 --> | 49 | <!-- 商品列表 --> |
| 50 | <view class="goods-list"> | 50 | <view class="goods-list"> |
| 51 | <view class="product-list"> | 51 | <view class="product-list"> |
| 52 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> | 52 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> |
| 53 | <Card :goods = "goods"></Card> | 53 | <Card :goods = "goods"></Card> |
| 54 | </view> | 54 | </view> |
| 55 | </view> | 55 | </view> |
| 56 | <view class="loading-text">{{loadingText}}</view> | 56 | <view class="loading-text">{{loadingText}}</view> |
| 57 | </view> | 57 | </view> |
| 58 | </view> | 58 | </view> |
| 59 | </view> | 59 | </view> |
| 60 | 60 | ||
| 61 | </view> | 61 | </view> |
| 62 | </template> | 62 | </template> |
| 63 | 63 | ||
| 64 | <script> | 64 | <script> |
| 65 | import Card from "@/components/CommodityCard/CommodityCard.vue" | 65 | import Card from "@/components/CommodityCard/CommodityCard.vue"; |
| 66 | import store from '@/store'; | ||
| 66 | export default { | 67 | export default { |
| 67 | components: { | 68 | components: { |
| 68 | 'Card':Card | 69 | 'Card':Card |
| 69 | }, | 70 | }, |
| 70 | data() { | 71 | data() { |
| 71 | return { | 72 | return { |
| 72 | 73 | ||
| 73 | //商品数据 | 74 | //商品数据 |
| 74 | goodsList:[ | 75 | goodsList:[ |
| 75 | { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 76 | { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 76 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 77 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 77 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 78 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 78 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 79 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 79 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 80 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 80 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 81 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 81 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 82 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 82 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 83 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 83 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 84 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 84 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } | 85 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } |
| 85 | ], | 86 | ], |
| 86 | headerphoto:'', | 87 | headerphoto:'', |
| 87 | userName:'Adam' | 88 | userName:'Adam' |
| 88 | } | 89 | } |
| 89 | }, | 90 | }, |
| 90 | onLoad() { | 91 | onLoad: function() { |
| 91 | 92 | store.dispatch('userRecommand/getRecommandList', { | |
| 93 | uid: 2, | ||
| 94 | }); | ||
| 95 | }, | ||
| 96 | computed: { | ||
| 97 | userRecommandList() { | ||
| 98 | console.log('recommandList', this.$store.state.userRecommand.recommandList); | ||
| 99 | return this.$store.state.userRecommand.recommandList; | ||
| 100 | } | ||
| 92 | }, | 101 | }, |
| 93 | methods: { | 102 | methods: { |
| 94 | toMyOrder(){ | 103 | toMyOrder(){ |
| 95 | uni.navigateTo({ | 104 | uni.navigateTo({ |
| 96 | url: '../myOrder/myOrder', | 105 | url: '../myOrder/myOrder', |
| 97 | success: res => {}, | 106 | success: res => {}, |
| 98 | fail: () => {}, | 107 | fail: () => {}, |
| 99 | complete: () => {} | 108 | complete: () => {} |
| 100 | }); | 109 | }); |
| 101 | }, | 110 | }, |
| 102 | toPredelivery(){ | 111 | toPredelivery(){ |
| 103 | uni.navigateTo({ | 112 | uni.navigateTo({ |
| 104 | url: '../predelivery/predelivery', | 113 | url: '../predelivery/predelivery', |
| 105 | success: res => {}, | 114 | success: res => {}, |
| 106 | fail: () => {}, | 115 | fail: () => {}, |
| 107 | complete: () => {} | 116 | complete: () => {} |
| 108 | }); | 117 | }); |
| 109 | }, | 118 | }, |
| 110 | toMyOrderPaying(){ | 119 | toMyOrderPaying(){ |
| 111 | uni.navigateTo({ | 120 | uni.navigateTo({ |
| 112 | url: '../myorderPaying/myorderPaying', | 121 | url: '../myorderPaying/myorderPaying', |
| 113 | success: res => {}, | 122 | success: res => {}, |
| 114 | fail: () => {}, | 123 | fail: () => {}, |
| 115 | complete: () => {} | 124 | complete: () => {} |
| 116 | }); | 125 | }); |
| 117 | }, | 126 | }, |
| 118 | torefundment(){ | 127 | torefundment(){ |
| 119 | uni.navigateTo({ | 128 | uni.navigateTo({ |
| 120 | url:'../refundment/refundment', | 129 | url:'../refundment/refundment', |
| 121 | }) | 130 | }) |
| 122 | }, | 131 | }, |
| 123 | torefunProgress(){ | 132 | torefunProgress(){ |
| 124 | uni.navigateTo({ | 133 | uni.navigateTo({ |
| 125 | url:'../refundProgress/refundProgress' | 134 | url:'../refundProgress/refundProgress' |
| 126 | }) | 135 | }) |
| 127 | } | 136 | } |
| 128 | } | 137 | } |
| 129 | } | 138 | } |
| 130 | </script> | 139 | </script> |
| 131 | 140 | ||
| 132 | <style lang="scss"> | 141 | <style lang="scss"> |
| 133 | .warp{ | 142 | .warp{ |
| 134 | font-size: 24rpx; | 143 | font-size: 24rpx; |
| 135 | background-color: #f2f2f2; | 144 | background-color: #f2f2f2; |
| 136 | height: 100vh; | 145 | height: 100vh; |
| 137 | } | 146 | } |
| 138 | .content { | 147 | .content { |
| 139 | display: flex; | 148 | display: flex; |
| 140 | flex-direction: column; | 149 | flex-direction: column; |
| 141 | align-items: center; | 150 | align-items: center; |
| 142 | justify-content: center; | 151 | justify-content: center; |
| 143 | background-color: #F2F2F2; | 152 | background-color: #F2F2F2; |
| 144 | } | 153 | } |
| 145 | .userInfo{ | 154 | .userInfo{ |
| 146 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); | 155 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); |
| 147 | width: 100%; | 156 | width: 100%; |
| 148 | height: 240rpx; | 157 | height: 240rpx; |
| 149 | color: #FFFFFF; | 158 | color: #FFFFFF; |
| 150 | padding: 60rpx 82rpx 80rpx 44rpx; | 159 | padding: 60rpx 82rpx 80rpx 44rpx; |
| 151 | box-sizing: border-box; | 160 | box-sizing: border-box; |
| 152 | display: flex; | 161 | display: flex; |
| 153 | flex-direction: row; | 162 | flex-direction: row; |
| 154 | justify-content: space-between; | 163 | justify-content: space-between; |
| 155 | align-items: flex-start; | 164 | align-items: flex-start; |
| 156 | .info{ | 165 | .info{ |
| 157 | display: flex; | 166 | display: flex; |
| 158 | flex-direction: row; | 167 | flex-direction: row; |
| 159 | justify-content: space-between; | 168 | justify-content: space-between; |
| 160 | align-items: center; | 169 | align-items: center; |
| 161 | image{ | 170 | image{ |
| 162 | border-radius: 50rpx; | 171 | border-radius: 50rpx; |
| 163 | height: 100rpx ; | 172 | height: 100rpx ; |
| 164 | width: 100rpx; | 173 | width: 100rpx; |
| 165 | margin-right: 40rpx; | 174 | margin-right: 40rpx; |
| 166 | } | 175 | } |
| 167 | .infoText{ | 176 | .infoText{ |
| 168 | display: flex; | 177 | display: flex; |
| 169 | flex-direction: column; | 178 | flex-direction: column; |
| 170 | justify-content: space-between; | 179 | justify-content: space-between; |
| 171 | align-items: flex-scetart; | 180 | align-items: flex-scetart; |
| 172 | .userName{ | 181 | .userName{ |
| 173 | font-size: 18px; | 182 | font-size: 18px; |
| 174 | color: #FFFFFF; | 183 | color: #FFFFFF; |
| 175 | margin-bottom: 8rpx; | 184 | margin-bottom: 8rpx; |
| 176 | } | 185 | } |
| 177 | .nickName{ | 186 | .nickName{ |
| 178 | font-size: 12px; | 187 | font-size: 12px; |
| 179 | color: #FFFFFF; | 188 | color: #FFFFFF; |
| 180 | } | 189 | } |
| 181 | } | 190 | } |
| 182 | } | 191 | } |
| 183 | .service{ | 192 | .service{ |
| 184 | image{ | 193 | image{ |
| 185 | height: 36rpx; | 194 | height: 36rpx; |
| 186 | width: 36rpx; | 195 | width: 36rpx; |
| 187 | } | 196 | } |
| 188 | } | 197 | } |
| 189 | } | 198 | } |
| 190 | .myOrder{ | 199 | .myOrder{ |
| 191 | width: 100%; | 200 | width: 100%; |
| 192 | height: 296rpx; | 201 | height: 296rpx; |
| 193 | margin-top: 20rpx; | 202 | margin-top: 20rpx; |
| 194 | margin-bottom: 20rpx; | 203 | margin-bottom: 20rpx; |
| 195 | padding: 0 40rpx; | 204 | padding: 0 40rpx; |
| 196 | box-sizing: border-box; | 205 | box-sizing: border-box; |
| 197 | background: #FFFFFF; | 206 | background: #FFFFFF; |
| 198 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 207 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 199 | border-radius: 6px; | 208 | border-radius: 6px; |
| 200 | border-radius: 6px; | 209 | border-radius: 6px; |
| 201 | display: flex; | 210 | display: flex; |
| 202 | flex-direction: column; | 211 | flex-direction: column; |
| 203 | justify-content: space-around; | 212 | justify-content: space-around; |
| 204 | align-items: center; | 213 | align-items: center; |
| 205 | .orderHeader{ | 214 | .orderHeader{ |
| 206 | width: 100%; | 215 | width: 100%; |
| 207 | height: 100rpx; | 216 | height: 100rpx; |
| 208 | display: flex; | 217 | display: flex; |
| 209 | flex-direction: row; | 218 | flex-direction: row; |
| 210 | justify-content: space-between; | 219 | justify-content: space-between; |
| 211 | align-items: center; | 220 | align-items: center; |
| 212 | border-bottom: 1px solid #E9E9E9;; | 221 | border-bottom: 1px solid #E9E9E9;; |
| 213 | font-weight: bold; | 222 | font-weight: bold; |
| 214 | font-size: 18px; | 223 | font-size: 18px; |
| 215 | color: #333333; | 224 | color: #333333; |
| 216 | .btn{ | 225 | .btn{ |
| 217 | font-size: 12px; | 226 | font-size: 12px; |
| 218 | color: #999999; | 227 | color: #999999; |
| 219 | image{ | 228 | image{ |
| 220 | margin-left: 20rpx; | 229 | margin-left: 20rpx; |
| 221 | height: 16rpx; | 230 | height: 16rpx; |
| 222 | width: 8rpx; | 231 | width: 8rpx; |
| 223 | } | 232 | } |
| 224 | } | 233 | } |
| 225 | } | 234 | } |
| 226 | .orderBody{ | 235 | .orderBody{ |
| 227 | width: 100%; | 236 | width: 100%; |
| 228 | display: flex; | 237 | display: flex; |
| 229 | flex-direction: row; | 238 | flex-direction: row; |
| 230 | justify-content: space-between; | 239 | justify-content: space-between; |
| 231 | align-items: center; | 240 | align-items: center; |
| 232 | .item{ | 241 | .item{ |
| 233 | display: flex; | 242 | display: flex; |
| 234 | flex-direction: column; | 243 | flex-direction: column; |
| 235 | align-items: center; | 244 | align-items: center; |
| 236 | image{ | 245 | image{ |
| 237 | width: 46rpx; | 246 | width: 46rpx; |
| 238 | height: 46rpx; | 247 | height: 46rpx; |
| 239 | } | 248 | } |
| 240 | text{ | 249 | text{ |
| 241 | margin-top: 24rpx; | 250 | margin-top: 24rpx; |
| 242 | font-size: 12px; | 251 | font-size: 12px; |
| 243 | color: #333333; | 252 | color: #333333; |
| 244 | } | 253 | } |
| 245 | } | 254 | } |
| 246 | } | 255 | } |
| 247 | } | 256 | } |
| 248 | .recommend{ | 257 | .recommend{ |
| 249 | background: #FFFFFF; | 258 | background: #FFFFFF; |
| 250 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 259 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 251 | border-radius: 6px; | 260 | border-radius: 6px; |
| 252 | border-radius: 6px; | 261 | border-radius: 6px; |
| 253 | width: 100%; | 262 | width: 100%; |
| 254 | .title{ | 263 | .title{ |
| 255 | display: flex; | 264 | display: flex; |
| 256 | flex-direction: row; | 265 | flex-direction: row; |
| 257 | align-items: center; | 266 | align-items: center; |
| 258 | justify-content: space-between; | 267 | justify-content: space-between; |
| 259 | padding: 20rpx 40rpx; | 268 | padding: 20rpx 40rpx; |
| 260 | .line{ | 269 | .line{ |
| 261 | width: 264rpx; | 270 | width: 264rpx; |
| 262 | height: 1rpx; | 271 | height: 1rpx; |
| 263 | border-bottom: 1px solid #EAEAEA; | 272 | border-bottom: 1px solid #EAEAEA; |
| 264 | } | 273 | } |
| 265 | .text{ | 274 | .text{ |
| 266 | font-family: PingFangSC-Medium; | 275 | font-family: PingFangSC-Medium; |
| 267 | font-size: 14px; | 276 | font-size: 14px; |
| 268 | color: #333333; | 277 | color: #333333; |
| 269 | letter-spacing: -0.26px; | 278 | letter-spacing: -0.26px; |
| 270 | text-align: justify; | 279 | text-align: justify; |
| 271 | line-height: 24px; | 280 | line-height: 24px; |
| 272 | } | 281 | } |
| 273 | } | 282 | } |
| 274 | .goods-list{ | 283 | .goods-list{ |
| 275 | .loading-text{ | 284 | .loading-text{ |
| 276 | width: 100%; | 285 | width: 100%; |
| 277 | display: flex; | 286 | display: flex; |
| 278 | justify-content: center; | 287 | justify-content: center; |
| 279 | align-items: center; | 288 | align-items: center; |
| 280 | height: 30px; | 289 | height: 30px; |
| 281 | color: #979797; | 290 | color: #979797; |
| 282 | font-size: 12px; | 291 | font-size: 12px; |
| 283 | } | 292 | } |
| 284 | .product-list{ | 293 | .product-list{ |
| 285 | width: 92%; | 294 | width: 92%; |
| 286 | padding: 0 4% 3vw 4%; | 295 | padding: 0 4% 3vw 4%; |
| 287 | display: flex; | 296 | display: flex; |
| 288 | justify-content: space-between; | 297 | justify-content: space-between; |
| 289 | flex-wrap: wrap; | 298 | flex-wrap: wrap; |
| 290 | .product{ | 299 | .product{ |
| 291 | width: 48%; | 300 | width: 48%; |
| 292 | margin: 0 0 20rpx 0; | 301 | margin: 0 0 20rpx 0; |
| 293 | background: #FFFFFF; | 302 | background: #FFFFFF; |
| 294 | border: 1px solid #F2F2F2; | 303 | border: 1px solid #F2F2F2; |
| 295 | } | 304 | } |
| 296 | } | 305 | } |
| 297 | } | 306 | } |
| 298 | } | 307 | } |
| 299 | 308 | ||
| 300 | </style> | 309 | </style> |
| 301 | 310 |
src/store/url.js
| 1 | const urlAlias = { | 1 | const urlAlias = { |
| 2 | // 首页 | 2 | // 首页 |
| 3 | shopList: '/app/prod/list', // 获取首页商品列表 | 3 | shopList: '/app/prod/list', // 获取首页商品列表 |
| 4 | 4 | ||
| 5 | 5 | ||
| 6 | 6 | ||
| 7 | // 我的订单 | 7 | // 我的订单 |
| 8 | orderList: '/app/order/list', // 获取订单列表 | 8 | orderList: '/app/order/list', // 获取订单列表 |
| 9 | |||
| 10 | |||
| 11 | // 购物车 | ||
| 12 | cartList: '/app/cart/list', // 获取购物车列表 | ||
| 13 | |||
| 14 | // 我的 | ||
| 15 | recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 | ||
| 9 | } | 16 | } |
| 10 | 17 | ||
| 11 | export default urlAlias; | 18 | export default urlAlias; |
| 12 | 19 |