Commit d5c1c29795f2d464b5620142fbfdf5421ec9b36e
1 parent
f9b4874e
订单列表和订单详情页初步完善
Showing
8 changed files
with
493 additions
and
115 deletions
yudao-ui-app/api/order.js
| @@ -2,3 +2,5 @@ const { http } = uni.$u | @@ -2,3 +2,5 @@ const { http } = uni.$u | ||
| 2 | 2 | ||
| 3 | // 获得订单交易分页 | 3 | // 获得订单交易分页 |
| 4 | export const getOrderPage = params => http.get('/trade/order/page', { params }) | 4 | export const getOrderPage = params => http.get('/trade/order/page', { params }) |
| 5 | +// 获得交易订单详情 | ||
| 6 | +export const getOrderDetail = params => http.get('/trade/order/get-detail', { params }) |
yudao-ui-app/common/orderStatus.js
0 → 100644
yudao-ui-app/pages.json
| @@ -75,12 +75,18 @@ | @@ -75,12 +75,18 @@ | ||
| 75 | } | 75 | } |
| 76 | }, | 76 | }, |
| 77 | { | 77 | { |
| 78 | - "path": "pages/order/order", | 78 | + "path": "pages/order/list", |
| 79 | "style": { | 79 | "style": { |
| 80 | "navigationBarTitleText": "我的订单" | 80 | "navigationBarTitleText": "我的订单" |
| 81 | } | 81 | } |
| 82 | }, | 82 | }, |
| 83 | { | 83 | { |
| 84 | + "path": "pages/order/detail", | ||
| 85 | + "style": { | ||
| 86 | + "navigationBarTitleText": "订单详情" | ||
| 87 | + } | ||
| 88 | + }, | ||
| 89 | + { | ||
| 84 | "path": "pages/address/list", | 90 | "path": "pages/address/list", |
| 85 | "style": { | 91 | "style": { |
| 86 | "navigationBarTitleText": "收货地址" | 92 | "navigationBarTitleText": "收货地址" |
yudao-ui-app/pages/order/detail.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="container"> | ||
| 3 | + <viwe class="detail-header"> | ||
| 4 | + <view class="order-status">{{ order.status | getStatusName }}</view> | ||
| 5 | + </viwe> | ||
| 6 | + | ||
| 7 | + <view class="order-product"> | ||
| 8 | + <view class="order-item" v-for="item in order.items" :key="item.id"> | ||
| 9 | + <image class="product-image" :src="item.picUrl"></image> | ||
| 10 | + <view class="item-info"> | ||
| 11 | + <view class="info-text"> | ||
| 12 | + <u--text :lines="1" size="15px" color="#333333" :text="item.spuName"></u--text> | ||
| 13 | + <u-gap height="10"></u-gap> | ||
| 14 | + <yd-text-price class="product-price" size="13" intSize="14" :price="item.originalUnitPrice"></yd-text-price> | ||
| 15 | + </view> | ||
| 16 | + <view class="price-number-box"> | ||
| 17 | + <view class="number-box"> | ||
| 18 | + <view class="product-number">共 {{ item.count }} 件</view> | ||
| 19 | + 小计： | ||
| 20 | + </view> | ||
| 21 | + <view class="number-box" @click.stop> | ||
| 22 | + <yd-text-price size="13" intSize="16" :price="item.originalPrice"></yd-text-price> | ||
| 23 | + </view> | ||
| 24 | + </view> | ||
| 25 | + </view> | ||
| 26 | + </view> | ||
| 27 | + </view> | ||
| 28 | + | ||
| 29 | + <view v-if="order.no" > | ||
| 30 | + <view v-if="order.no" class="base-info"> | ||
| 31 | + <view class="info-item"> | ||
| 32 | + <view class="item-name">订单编号：</view> | ||
| 33 | + <view class="item-value">{{ order.no }}</view> | ||
| 34 | + </view> | ||
| 35 | + <view class="info-item"> | ||
| 36 | + <view class="item-name">下单时间：</view> | ||
| 37 | + <view class="item-value">{{ order.createTime }}</view> | ||
| 38 | + </view> | ||
| 39 | + <view v-if="order.payOrderId" class="info-item"> | ||
| 40 | + <view class="item-name">支付方式：</view> | ||
| 41 | + <view class="item-value">{{ order.payOrderId }}</view> | ||
| 42 | + </view> | ||
| 43 | + <view v-if="order.payTime" class="info-item"> | ||
| 44 | + <view class="item-name">支付时间：</view> | ||
| 45 | + <view class="item-value">{{ order.payTime }}</view> | ||
| 46 | + </view> | ||
| 47 | + </view> | ||
| 48 | + | ||
| 49 | + <view class="delivery-info"> | ||
| 50 | + <view class="info-item"> | ||
| 51 | + <view class="item-name">收货地址：</view> | ||
| 52 | + <view class="item-value">{{ order.receiverAreaName + order.receiverDetailAddress + order.receiverDetailAddress + order.receiverDetailAddress }}</view> | ||
| 53 | + </view> | ||
| 54 | + <view v-if="order.receiverName" class="info-item"> | ||
| 55 | + <view class="item-name">收货人：</view> | ||
| 56 | + <view class="item-value">{{ order.receiverName }}</view> | ||
| 57 | + </view> | ||
| 58 | + <view v-if="order.receiverMobile" class="info-item"> | ||
| 59 | + <view class="item-name">联系电话：</view> | ||
| 60 | + <view class="item-value">{{ order.receiverMobile }}</view> | ||
| 61 | + </view> | ||
| 62 | + </view> | ||
| 63 | + | ||
| 64 | + <view class="delivery-info"> | ||
| 65 | + <view class="info-item"> | ||
| 66 | + <view class="item-name">商品总额：</view> | ||
| 67 | + <yd-text-price class="product-price" size="13" intSize="16" :price="order.originalPrice"></yd-text-price> | ||
| 68 | + </view> | ||
| 69 | + <view class="info-item"> | ||
| 70 | + <view class="item-name">运费：</view> | ||
| 71 | + <yd-text-price class="product-price" size="13" intSize="16" :price="order.deliveryPrice"></yd-text-price> | ||
| 72 | + </view> | ||
| 73 | + <view class="info-item"> | ||
| 74 | + <view class="item-name">优惠：</view> | ||
| 75 | + <yd-text-price class="product-price" size="13" intSize="16" symbol="-￥" :price="order.discountPrice"></yd-text-price> | ||
| 76 | + </view> | ||
| 77 | + <view class="info-item"> | ||
| 78 | + <view class="item-name">订单金额：</view> | ||
| 79 | + <yd-text-price class="product-price" size="15" intSize="20" :price="order.orderPrice"></yd-text-price> | ||
| 80 | + </view> | ||
| 81 | + </view> | ||
| 82 | + </view> | ||
| 83 | + | ||
| 84 | + </view> | ||
| 85 | +</template> | ||
| 86 | + | ||
| 87 | +<script> | ||
| 88 | +import { getOrderDetail } from '../../api/order' | ||
| 89 | +import orderStatus from '@/common/orderStatus' | ||
| 90 | + | ||
| 91 | +export default { | ||
| 92 | + name: 'orderDetail', | ||
| 93 | + filters: { | ||
| 94 | + getStatusName(status) { | ||
| 95 | + return orderStatus[status + ''].name | ||
| 96 | + } | ||
| 97 | + }, | ||
| 98 | + data() { | ||
| 99 | + return { | ||
| 100 | + orderId: undefined, | ||
| 101 | + order: {} | ||
| 102 | + } | ||
| 103 | + }, | ||
| 104 | + onLoad(e) { | ||
| 105 | + this.orderId = e.orderId | ||
| 106 | + if (!this.orderId) { | ||
| 107 | + uni.$u.toast('请求参数错误') | ||
| 108 | + } else { | ||
| 109 | + this.loadOrderDetailData() | ||
| 110 | + } | ||
| 111 | + }, | ||
| 112 | + methods: { | ||
| 113 | + loadOrderDetailData() { | ||
| 114 | + getOrderDetail({ id: this.orderId }) | ||
| 115 | + .then(res => { | ||
| 116 | + this.order = res.data || {} | ||
| 117 | + }) | ||
| 118 | + .catch(err => { | ||
| 119 | + console.log(err) | ||
| 120 | + }) | ||
| 121 | + } | ||
| 122 | + } | ||
| 123 | +} | ||
| 124 | +</script> | ||
| 125 | + | ||
| 126 | +<style lang="scss" scoped> | ||
| 127 | +.container { | ||
| 128 | + background-color: #f3f3f3; | ||
| 129 | + height: 100vh; | ||
| 130 | +} | ||
| 131 | + | ||
| 132 | +.detail-header { | ||
| 133 | + @include flex-center(); | ||
| 134 | + background-color: $custom-bg-color; | ||
| 135 | + padding: 10rpx 0; | ||
| 136 | + border-radius: 0 0 20rpx 20rpx; | ||
| 137 | +} | ||
| 138 | + | ||
| 139 | +.order-product { | ||
| 140 | + background-color: $custom-bg-color; | ||
| 141 | + border-radius: 20rpx; | ||
| 142 | + margin: 20rpx; | ||
| 143 | + padding: 10rpx 20rpx; | ||
| 144 | + .order-item { | ||
| 145 | + background: #ffffff; | ||
| 146 | + @include flex-space-between; | ||
| 147 | + padding: 10rpx 0 10rpx 5rpx; | ||
| 148 | + | ||
| 149 | + .product-check { | ||
| 150 | + padding: 20rpx; | ||
| 151 | + | ||
| 152 | + .un-check-box { | ||
| 153 | + width: 20px; | ||
| 154 | + height: 20px; | ||
| 155 | + border: 1px solid #939393; | ||
| 156 | + border-radius: 50%; | ||
| 157 | + } | ||
| 158 | + } | ||
| 159 | + | ||
| 160 | + .product-image { | ||
| 161 | + width: 180rpx; | ||
| 162 | + height: 180rpx; | ||
| 163 | + border-radius: 10rpx; | ||
| 164 | + } | ||
| 165 | + | ||
| 166 | + .item-info { | ||
| 167 | + flex: 1; | ||
| 168 | + padding: 0 20rpx; | ||
| 169 | + | ||
| 170 | + .info-text { | ||
| 171 | + padding-bottom: 10rpx; | ||
| 172 | + | ||
| 173 | + .product-price { | ||
| 174 | + margin-top: 15rpx; | ||
| 175 | + } | ||
| 176 | + } | ||
| 177 | + | ||
| 178 | + .price-number-box { | ||
| 179 | + @include flex-space-between; | ||
| 180 | + | ||
| 181 | + .number-box { | ||
| 182 | + font-size: 24rpx; | ||
| 183 | + | ||
| 184 | + .product-number { | ||
| 185 | + width: 200rpx; | ||
| 186 | + } | ||
| 187 | + } | ||
| 188 | + | ||
| 189 | + .number-box { | ||
| 190 | + height: 60rpx; | ||
| 191 | + @include flex-center; | ||
| 192 | + } | ||
| 193 | + } | ||
| 194 | + } | ||
| 195 | + } | ||
| 196 | +} | ||
| 197 | + | ||
| 198 | +.base-info { | ||
| 199 | + background-color: $custom-bg-color; | ||
| 200 | + border-radius: 20rpx; | ||
| 201 | + margin: 20rpx; | ||
| 202 | + padding: 20rpx; | ||
| 203 | + .info-item { | ||
| 204 | + @include flex-left(); | ||
| 205 | + padding: 10rpx 0; | ||
| 206 | + .item-name { | ||
| 207 | + color: #999; | ||
| 208 | + font-size: 26rpx; | ||
| 209 | + } | ||
| 210 | + .item-value { | ||
| 211 | + color: #333; | ||
| 212 | + font-size: 26rpx; | ||
| 213 | + } | ||
| 214 | + } | ||
| 215 | +} | ||
| 216 | + | ||
| 217 | +.delivery-info { | ||
| 218 | + background-color: $custom-bg-color; | ||
| 219 | + border-radius: 20rpx; | ||
| 220 | + margin: 20rpx; | ||
| 221 | + padding: 20rpx; | ||
| 222 | + .info-item { | ||
| 223 | + @include flex-left(); | ||
| 224 | + padding: 10rpx 0; | ||
| 225 | + .item-name { | ||
| 226 | + color: #999; | ||
| 227 | + font-size: 26rpx; | ||
| 228 | + width: 260rpx; | ||
| 229 | + } | ||
| 230 | + .item-value { | ||
| 231 | + color: #333; | ||
| 232 | + font-size: 26rpx; | ||
| 233 | + } | ||
| 234 | + } | ||
| 235 | +} | ||
| 236 | + | ||
| 237 | +.delivery-info { | ||
| 238 | + background-color: $custom-bg-color; | ||
| 239 | + border-radius: 20rpx; | ||
| 240 | + margin: 20rpx; | ||
| 241 | + padding: 20rpx; | ||
| 242 | + .info-item { | ||
| 243 | + @include flex-space-between(); | ||
| 244 | + padding: 10rpx 0; | ||
| 245 | + .item-name { | ||
| 246 | + color: #999; | ||
| 247 | + font-size: 26rpx; | ||
| 248 | + } | ||
| 249 | + } | ||
| 250 | +} | ||
| 251 | + | ||
| 252 | +</style> |
yudao-ui-app/pages/order/list.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="container"> | ||
| 3 | + <u-sticky style="top: 0" offset-top="0"> | ||
| 4 | + <u-tabs :list="tabArray" :current="tabIndex" itemStyle="padding-left: 18px; padding-right: 18px; height: 36px;" @change="handleStatusChange"></u-tabs> | ||
| 5 | + </u-sticky> | ||
| 6 | + <view class="order-list"> | ||
| 7 | + <view v-for="order in orderList" :key="order.no" class="order-item"> | ||
| 8 | + <view class="order-header"> | ||
| 9 | + <view class="order-no">订单编号：{{ order.no }}</view> | ||
| 10 | + <view class="order-status">{{ order.status | getStatusName }}</view> | ||
| 11 | + </view> | ||
| 12 | + | ||
| 13 | + <view v-if="order.items.length === 1" class="order-single-item" @click="handleOrderClick(order.id)"> | ||
| 14 | + <view class="item-wrap" v-for="item in order.items" :key="item.id"> | ||
| 15 | + <view class="item-info"> | ||
| 16 | + <image class="item-cover" :src="item.picUrl"></image> | ||
| 17 | + <u--text :lines="2" size="15px" color="#333333" :text="item.spuName"></u--text> | ||
| 18 | + </view> | ||
| 19 | + <view class="item-count">共{{ item.count }}件</view> | ||
| 20 | + </view> | ||
| 21 | + </view> | ||
| 22 | + <view v-else class="order-multi-item" @click="handleOrderClick(order.id)"> | ||
| 23 | + <u-scroll-list :indicator="false"> | ||
| 24 | + <view class="item-wrap" v-for="item in order.items" :key="item.id"> | ||
| 25 | + <image class="item-image" :src="item.picUrl"></image> | ||
| 26 | + </view> | ||
| 27 | + </u-scroll-list> | ||
| 28 | + <view class="product-count">共{{ order.productCount }}件</view> | ||
| 29 | + </view> | ||
| 30 | + | ||
| 31 | + <view class="order-btn-group"> | ||
| 32 | + <view class="order-btn">再次购买</view> | ||
| 33 | + <view class="order-btn">其他操作</view> | ||
| 34 | + </view> | ||
| 35 | + </view> | ||
| 36 | + </view> | ||
| 37 | + </view> | ||
| 38 | +</template> | ||
| 39 | + | ||
| 40 | +<script> | ||
| 41 | +import { getOrderPage } from '../../api/order' | ||
| 42 | +import orderStatus from '@/common/orderStatus' | ||
| 43 | + | ||
| 44 | +export default { | ||
| 45 | + name: 'orderList', | ||
| 46 | + filters: { | ||
| 47 | + getStatusName(status) { | ||
| 48 | + return orderStatus[status + ''].name | ||
| 49 | + } | ||
| 50 | + }, | ||
| 51 | + data() { | ||
| 52 | + return { | ||
| 53 | + pageNo: 1, | ||
| 54 | + tabIndex: 0, | ||
| 55 | + orderList: [] | ||
| 56 | + } | ||
| 57 | + }, | ||
| 58 | + computed: { | ||
| 59 | + tabArray() { | ||
| 60 | + let tabArray = [{ name: '全部', status: 'all' }] | ||
| 61 | + for (let status in orderStatus) { | ||
| 62 | + if (status !== '40') { | ||
| 63 | + tabArray.push({ name: orderStatus[status].name, status: status }) | ||
| 64 | + } | ||
| 65 | + } | ||
| 66 | + return tabArray | ||
| 67 | + } | ||
| 68 | + }, | ||
| 69 | + onLoad(e) { | ||
| 70 | + const status = e.status | ||
| 71 | + if (status !== undefined) { | ||
| 72 | + this.tabArray.forEach((item, index) => { | ||
| 73 | + if (item.status === status) { | ||
| 74 | + this.tabIndex = index | ||
| 75 | + } | ||
| 76 | + }) | ||
| 77 | + } | ||
| 78 | + this.loadOrderPageData() | ||
| 79 | + }, | ||
| 80 | + methods: { | ||
| 81 | + handleStatusChange({ index }) { | ||
| 82 | + this.tabIndex = index | ||
| 83 | + this.loadOrderPageData() | ||
| 84 | + }, | ||
| 85 | + loadOrderPageData() { | ||
| 86 | + let params = { pageNo: this.pageNo } | ||
| 87 | + const status = this.tabArray[this.tabIndex].status | ||
| 88 | + if (status !== 'all') { | ||
| 89 | + params.orderStatus = status | ||
| 90 | + } | ||
| 91 | + getOrderPage(params) | ||
| 92 | + .then(res => { | ||
| 93 | + this.orderList = res.data.list || [] | ||
| 94 | + }) | ||
| 95 | + .catch(err => { | ||
| 96 | + console.log(err) | ||
| 97 | + }) | ||
| 98 | + }, | ||
| 99 | + handleOrderClick(orderId) { | ||
| 100 | + uni.$u.route('/pages/order/detail', { | ||
| 101 | + orderId: orderId | ||
| 102 | + }) | ||
| 103 | + } | ||
| 104 | + } | ||
| 105 | +} | ||
| 106 | +</script> | ||
| 107 | + | ||
| 108 | +<style lang="scss" scoped> | ||
| 109 | +.order-list { | ||
| 110 | + background-color: #f3f3f3; | ||
| 111 | + | ||
| 112 | + .order-item { | ||
| 113 | + padding: 20rpx; | ||
| 114 | + background-color: #ffffff; | ||
| 115 | + border-bottom: $custom-border-style; | ||
| 116 | + | ||
| 117 | + .order-header { | ||
| 118 | + @include flex-space-between; | ||
| 119 | + height: 80rpx; | ||
| 120 | + | ||
| 121 | + .order-no { | ||
| 122 | + font-size: 28rpx; | ||
| 123 | + color: #333; | ||
| 124 | + } | ||
| 125 | + | ||
| 126 | + .order-status { | ||
| 127 | + font-size: 24rpx; | ||
| 128 | + color: #999; | ||
| 129 | + } | ||
| 130 | + } | ||
| 131 | + | ||
| 132 | + .order-single-item { | ||
| 133 | + .item-wrap { | ||
| 134 | + @include flex-space-between(); | ||
| 135 | + | ||
| 136 | + .item-info { | ||
| 137 | + @include flex-left(); | ||
| 138 | + | ||
| 139 | + .item-cover { | ||
| 140 | + width: 100rpx; | ||
| 141 | + height: 100rpx; | ||
| 142 | + border-radius: 10rpx; | ||
| 143 | + margin-right: 15rpx; | ||
| 144 | + } | ||
| 145 | + } | ||
| 146 | + | ||
| 147 | + .item-count { | ||
| 148 | + color: #999; | ||
| 149 | + font-size: 24rpx; | ||
| 150 | + width: 120rpx; | ||
| 151 | + text-align: right; | ||
| 152 | + } | ||
| 153 | + } | ||
| 154 | + } | ||
| 155 | + | ||
| 156 | + .order-multi-item { | ||
| 157 | + @include flex-space-between(); | ||
| 158 | + | ||
| 159 | + .item-wrap { | ||
| 160 | + margin-right: 20rpx; | ||
| 161 | + | ||
| 162 | + .item-image { | ||
| 163 | + width: 100rpx; | ||
| 164 | + height: 100rpx; | ||
| 165 | + border-radius: 10rpx; | ||
| 166 | + } | ||
| 167 | + } | ||
| 168 | + | ||
| 169 | + .product-count { | ||
| 170 | + color: #999; | ||
| 171 | + font-size: 24rpx; | ||
| 172 | + width: 120rpx; | ||
| 173 | + text-align: right; | ||
| 174 | + } | ||
| 175 | + } | ||
| 176 | + | ||
| 177 | + .order-btn-group { | ||
| 178 | + margin-top: 10rpx; | ||
| 179 | + @include flex-right(); | ||
| 180 | + | ||
| 181 | + .order-btn { | ||
| 182 | + width: 120rpx; | ||
| 183 | + height: 36rpx; | ||
| 184 | + line-height: 36rpx; | ||
| 185 | + border-radius: 36rpx; | ||
| 186 | + border: 1px solid #777; | ||
| 187 | + color: #777; | ||
| 188 | + font-size: 22rpx; | ||
| 189 | + text-align: center; | ||
| 190 | + margin-left: 15rpx; | ||
| 191 | + } | ||
| 192 | + } | ||
| 193 | + } | ||
| 194 | +} | ||
| 195 | +</style> |
yudao-ui-app/pages/order/order.vue deleted
| 1 | -<template> | ||
| 2 | - <view class="container"> | ||
| 3 | - <u-sticky style="top: 0" offset-top="0"> | ||
| 4 | - <u-tabs :list="statusArray" :current="statusIndex" @change="handleStatusChange"></u-tabs> | ||
| 5 | - </u-sticky> | ||
| 6 | - <view class="order-list"> | ||
| 7 | - <view v-for="(item, index) in orderList" :key="item.orderNo" class="order-item"> | ||
| 8 | - <view class="item-title">{{ item.orderNo }}</view> | ||
| 9 | - <view class="item-content">{{ item.orderStatus }}</view> | ||
| 10 | - <view class="item-btn-group"></view> | ||
| 11 | - </view> | ||
| 12 | - </view> | ||
| 13 | - </view> | ||
| 14 | -</template> | ||
| 15 | - | ||
| 16 | -<script> | ||
| 17 | -import { getOrderPage } from '../../api/order' | ||
| 18 | - | ||
| 19 | -export default { | ||
| 20 | - name: 'order', | ||
| 21 | - data() { | ||
| 22 | - return { | ||
| 23 | - pageNo: 1, | ||
| 24 | - statusIndex: 0, | ||
| 25 | - statusArray: [ | ||
| 26 | - { | ||
| 27 | - name: '全部', | ||
| 28 | - status: '-1' | ||
| 29 | - }, | ||
| 30 | - { | ||
| 31 | - name: '待付款', | ||
| 32 | - status: '0' | ||
| 33 | - }, | ||
| 34 | - { | ||
| 35 | - name: '待发货', | ||
| 36 | - status: '10' | ||
| 37 | - }, | ||
| 38 | - { | ||
| 39 | - name: '待收货', | ||
| 40 | - status: '20' | ||
| 41 | - }, | ||
| 42 | - { | ||
| 43 | - name: '已完成', | ||
| 44 | - status: '30' | ||
| 45 | - }, | ||
| 46 | - { | ||
| 47 | - name: '已取消', // TODO @辰尘：已取消不展示 | ||
| 48 | - status: '50' | ||
| 49 | - } | ||
| 50 | - ], | ||
| 51 | - orderList: [] | ||
| 52 | - } | ||
| 53 | - }, | ||
| 54 | - onLoad(e) { | ||
| 55 | - const status = e.status | ||
| 56 | - if (status !== undefined) { | ||
| 57 | - this.statusArray.forEach((item, index) => { | ||
| 58 | - if (item.status === status) { | ||
| 59 | - this.statusIndex = index | ||
| 60 | - } | ||
| 61 | - }) | ||
| 62 | - } | ||
| 63 | - this.loadOrderPageData() | ||
| 64 | - }, | ||
| 65 | - methods: { | ||
| 66 | - handleStatusChange(item) { | ||
| 67 | - this.statusIndex = item.status | ||
| 68 | - }, | ||
| 69 | - loadOrderPageData() { | ||
| 70 | - let params = { pageNo: this.pageNo } | ||
| 71 | - const status = this.statusArray[this.statusIndex].status | ||
| 72 | - if (status >= 0) { | ||
| 73 | - params.orderStatus = status | ||
| 74 | - } | ||
| 75 | - getOrderPage(params) | ||
| 76 | - .then(res => { | ||
| 77 | - console.log(res) | ||
| 78 | - }) | ||
| 79 | - .catch(err => { | ||
| 80 | - console.log(err) | ||
| 81 | - }) | ||
| 82 | - } | ||
| 83 | - } | ||
| 84 | -} | ||
| 85 | -</script> | ||
| 86 | - | ||
| 87 | -<style lang="scss" scoped></style> |
yudao-ui-app/pages/user/user.vue
| @@ -4,7 +4,7 @@ | @@ -4,7 +4,7 @@ | ||
| 4 | <view class="user-info" @click="pageRouter('/pages/profile/profile')"> | 4 | <view class="user-info" @click="pageRouter('/pages/profile/profile')"> |
| 5 | <u-avatar size="60" shape="square" :src="userInfo.avatar"></u-avatar> | 5 | <u-avatar size="60" shape="square" :src="userInfo.avatar"></u-avatar> |
| 6 | <view class="info-text"> | 6 | <view class="info-text"> |
| 7 | - <view class="user-nickname">{{ hasLogin ? userInfo.nickname || ' ' : '匿名用户' }}</view> | 7 | + <view class="user-nickname">{{ hasLogin ? userInfo.nickname || '会员用户' : '匿名用户' }}</view> |
| 8 | <view class="user-mobile">{{ hasLogin ? userInfo.mobile || ' ' : '登录/注册' }}</view> | 8 | <view class="user-mobile">{{ hasLogin ? userInfo.mobile || ' ' : '登录/注册' }}</view> |
| 9 | </view> | 9 | </view> |
| 10 | </view> | 10 | </view> |
| @@ -26,9 +26,9 @@ | @@ -26,9 +26,9 @@ | ||
| 26 | 26 | ||
| 27 | <view class="order-status-box"> | 27 | <view class="order-status-box"> |
| 28 | <u-grid :border="false" :col="orderStatusList.length"> | 28 | <u-grid :border="false" :col="orderStatusList.length"> |
| 29 | - <u-grid-item v-for="(item, index) in orderStatusList" :key="index" @click="pageRouter(orderPage, item.state)"> | 29 | + <u-grid-item v-for="(item, index) in orderStatusList" :key="index" @click="pageRouter(orderPage, item.status)"> |
| 30 | <u-icon :name="item.icon" :size="32"></u-icon> | 30 | <u-icon :name="item.icon" :size="32"></u-icon> |
| 31 | - <text class="grid-title">{{ item.title }}</text> | 31 | + <text class="grid-title">{{ item.name }}</text> |
| 32 | </u-grid-item> | 32 | </u-grid-item> |
| 33 | </u-grid> | 33 | </u-grid> |
| 34 | </view> | 34 | </view> |
| @@ -37,8 +37,8 @@ | @@ -37,8 +37,8 @@ | ||
| 37 | <u-gap height="10" bgColor="#f3f3f3"></u-gap> | 37 | <u-gap height="10" bgColor="#f3f3f3"></u-gap> |
| 38 | 38 | ||
| 39 | <view class="stat-box"> | 39 | <view class="stat-box"> |
| 40 | - <u-grid :border="false" col="3" | ||
| 41 | - ><u-grid-item v-for="(item, index) in statList" :key="index"> | 40 | + <u-grid :border="false" col="3"> |
| 41 | + <u-grid-item v-for="(item, index) in statList" :key="index"> | ||
| 42 | <text class="grid-value">{{ item.value }}</text> | 42 | <text class="grid-value">{{ item.value }}</text> |
| 43 | <text class="grid-title">{{ item.title }}</text> | 43 | <text class="grid-title">{{ item.title }}</text> |
| 44 | </u-grid-item> | 44 | </u-grid-item> |
| @@ -53,21 +53,16 @@ | @@ -53,21 +53,16 @@ | ||
| 53 | <u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell> | 53 | <u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell> |
| 54 | <u-cell class="fun-item" :border="false" icon="map" title="收货地址" @click="pageRouter('/pages/address/list')" isLink></u-cell> | 54 | <u-cell class="fun-item" :border="false" icon="map" title="收货地址" @click="pageRouter('/pages/address/list')" isLink></u-cell> |
| 55 | </u-cell-group> | 55 | </u-cell-group> |
| 56 | - | ||
| 57 | </view> | 56 | </view> |
| 58 | </template> | 57 | </template> |
| 59 | 58 | ||
| 60 | <script> | 59 | <script> |
| 60 | +import orderStatus from '@/common/orderStatus' | ||
| 61 | + | ||
| 61 | export default { | 62 | export default { |
| 62 | data() { | 63 | data() { |
| 63 | return { | 64 | return { |
| 64 | - orderPage: '/pages/order/order', | ||
| 65 | - orderStatusList: [ | ||
| 66 | - { icon: 'red-packet', title: '待付款', state: '0' }, | ||
| 67 | - { icon: 'car', title: '待发货', state:'20' }, | ||
| 68 | - { icon: 'order', title: '待收货', state: '30' }, | ||
| 69 | - { icon: 'integral', title: '已完成', state: '40' } | ||
| 70 | - ], | 65 | + orderPage: '/pages/order/list', |
| 71 | statList: [ | 66 | statList: [ |
| 72 | { value: '0', title: '我的收藏' }, | 67 | { value: '0', title: '我的收藏' }, |
| 73 | { value: '0', title: '我的消息' }, | 68 | { value: '0', title: '我的消息' }, |
| @@ -76,10 +71,27 @@ export default { | @@ -76,10 +71,27 @@ export default { | ||
| 76 | } | 71 | } |
| 77 | }, | 72 | }, |
| 78 | onLoad() { | 73 | onLoad() { |
| 79 | - if (this.hasLogin){ | 74 | + if (this.hasLogin) { |
| 80 | this.$store.dispatch('ObtainUserInfo') | 75 | this.$store.dispatch('ObtainUserInfo') |
| 81 | } | 76 | } |
| 82 | }, | 77 | }, |
| 78 | + computed: { | ||
| 79 | + userInfo() { | ||
| 80 | + return this.$store.getters.userInfo | ||
| 81 | + }, | ||
| 82 | + hasLogin() { | ||
| 83 | + return this.$store.getters.hasLogin | ||
| 84 | + }, | ||
| 85 | + orderStatusList() { | ||
| 86 | + let orderStatusList = [] | ||
| 87 | + for (let status in orderStatus) { | ||
| 88 | + if (status !== '40') { | ||
| 89 | + orderStatusList.push({ name: orderStatus[status].name, status: status, icon: orderStatus[status].icon }) | ||
| 90 | + } | ||
| 91 | + } | ||
| 92 | + return orderStatusList | ||
| 93 | + } | ||
| 94 | + }, | ||
| 83 | methods: { | 95 | methods: { |
| 84 | pageRouter(pageUrl, param) { | 96 | pageRouter(pageUrl, param) { |
| 85 | if (!this.hasLogin) { | 97 | if (!this.hasLogin) { |
| @@ -87,7 +99,7 @@ export default { | @@ -87,7 +99,7 @@ export default { | ||
| 87 | } else if (pageUrl === this.orderPage) { | 99 | } else if (pageUrl === this.orderPage) { |
| 88 | uni.$u.route(this.orderPage, { | 100 | uni.$u.route(this.orderPage, { |
| 89 | status: param | 101 | status: param |
| 90 | - }); | 102 | + }) |
| 91 | } else { | 103 | } else { |
| 92 | uni.$u.route(pageUrl) | 104 | uni.$u.route(pageUrl) |
| 93 | } | 105 | } |
| @@ -105,20 +117,11 @@ export default { | @@ -105,20 +117,11 @@ export default { | ||
| 105 | } | 117 | } |
| 106 | }) | 118 | }) |
| 107 | } | 119 | } |
| 108 | - }, | ||
| 109 | - computed: { | ||
| 110 | - userInfo() { | ||
| 111 | - return this.$store.getters.userInfo | ||
| 112 | - }, | ||
| 113 | - hasLogin() { | ||
| 114 | - return this.$store.getters.hasLogin | ||
| 115 | - } | ||
| 116 | } | 120 | } |
| 117 | } | 121 | } |
| 118 | </script> | 122 | </script> |
| 119 | 123 | ||
| 120 | <style lang="scss" scoped> | 124 | <style lang="scss" scoped> |
| 121 | - | ||
| 122 | .user-header { | 125 | .user-header { |
| 123 | background-color: #fff; | 126 | background-color: #fff; |
| 124 | @include flex-space-between; | 127 | @include flex-space-between; |
| @@ -161,6 +164,7 @@ export default { | @@ -161,6 +164,7 @@ export default { | ||
| 161 | color: #333333; | 164 | color: #333333; |
| 162 | font-size: 34rpx; | 165 | font-size: 34rpx; |
| 163 | } | 166 | } |
| 167 | + | ||
| 164 | .see-all { | 168 | .see-all { |
| 165 | height: 40rpx; | 169 | height: 40rpx; |
| 166 | @include flex-right; | 170 | @include flex-right; |
| @@ -196,5 +200,4 @@ export default { | @@ -196,5 +200,4 @@ export default { | ||
| 196 | border-bottom: $custom-border-style; | 200 | border-bottom: $custom-border-style; |
| 197 | } | 201 | } |
| 198 | } | 202 | } |
| 199 | - | ||
| 200 | </style> | 203 | </style> |
yudao-ui-app/uni.scss
| @@ -28,14 +28,14 @@ $custom-border-style: 1rpx solid #f3f3f3; | @@ -28,14 +28,14 @@ $custom-border-style: 1rpx solid #f3f3f3; | ||
| 28 | display: flex; | 28 | display: flex; |
| 29 | flex-direction: $direction; | 29 | flex-direction: $direction; |
| 30 | align-items: center; | 30 | align-items: center; |
| 31 | - justify-content: left; | 31 | + justify-content: flex-start; |
| 32 | } | 32 | } |
| 33 | 33 | ||
| 34 | @mixin flex-right($direction: row) { | 34 | @mixin flex-right($direction: row) { |
| 35 | display: flex; | 35 | display: flex; |
| 36 | flex-direction: $direction; | 36 | flex-direction: $direction; |
| 37 | align-items: center; | 37 | align-items: center; |
| 38 | - justify-content: right; | 38 | + justify-content: flex-end; |
| 39 | } | 39 | } |
| 40 | 40 | ||
| 41 | @mixin flex-center($direction: row) { | 41 | @mixin flex-center($direction: row) { |