ch
3 years ago
parent
d2a97c734b
commit
6b6ce39d0c
@ -0,0 +1,56 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-05-08 14:41:42
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-05-08 15:11:29
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="ui-goods-info">
|
||||||
|
<div class="ui-goods-info--img">
|
||||||
|
<img :src="goods.productImageUrl"/>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<b>{{goods.productName}}</b>
|
||||||
|
<span>{{goods.skuDescribe}}{{goods.productName}}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props : {
|
||||||
|
goods : {
|
||||||
|
type : Object,
|
||||||
|
default : () => ({})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ui-goods-info{
|
||||||
|
display: flex;
|
||||||
|
&--img{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
width: 270px;
|
||||||
|
margin: 7px 0 0 18px;
|
||||||
|
text-align: left;
|
||||||
|
b{
|
||||||
|
display: block;
|
||||||
|
line-height: 22px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
display:-webkit-box;
|
||||||
|
-webkit-box-orient:vertical;
|
||||||
|
-webkit-line-clamp:2;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-05-07 22:40:55
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-05-08 14:24:16
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="ui-line-box">
|
||||||
|
<div class="ui-line-box--head">
|
||||||
|
<slot name="head"></slot>
|
||||||
|
</div>
|
||||||
|
<slot name="body"></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ui-line-box{
|
||||||
|
border:1px solid #ddd;
|
||||||
|
&--head{
|
||||||
|
height: 42px;
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-05-08 17:48:36
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-05-08 20:03:35
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="account">
|
||||||
|
<div class="account--nav">左侧栏</div>
|
||||||
|
<nuxt-child class="account--main"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.account{
|
||||||
|
padding-top: 370px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
&--nav{
|
||||||
|
width: 170px;
|
||||||
|
height: 300px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
&--main{
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,165 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-05-04 20:47:29
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-05-08 21:17:05
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul class="tab">
|
||||||
|
<li v-for="item in tabs" :key="item.value" @click="changeTab(item.value)"
|
||||||
|
:class="tabActive == item.value && 'tab__active'">
|
||||||
|
{{item.label}}
|
||||||
|
<span>6</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="order" v-for="item in orderList" :key="item.orderId">
|
||||||
|
<div class="order--head"></div>
|
||||||
|
<table class="order--table">
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(i, idx) in item.products" :key="i.orderProductId">
|
||||||
|
<td width="620px">
|
||||||
|
<div class="order--product">
|
||||||
|
<UIGoodsInfo :goods="i"/>
|
||||||
|
<p>{{i.realAmount}}</p>
|
||||||
|
<p>{{i.quantity}}</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<template v-if="!idx">
|
||||||
|
<td width="119px" :rowspan="item.products.length">{{item.payAmount}}</td>
|
||||||
|
<td width="110px" :rowspan="item.products.length">{{item.orderStatusDesc}}</td>
|
||||||
|
<td :rowspan="item.products.length">
|
||||||
|
<button v-if="item.orderStatus === 1" @click="pay(item)">去支付</button>
|
||||||
|
<button v-if="[2,3].includes(item.orderStatus)"
|
||||||
|
@click="$router.push(`./detail?id=${item.orderId}`)">查看详情</button>
|
||||||
|
<button v-if="item.orderStatus >= 4"
|
||||||
|
@click="$router.push(`/logisitcsInfo?orderId=${item.orderId}`)">查看物流</button>
|
||||||
|
<button v-if="item.orderStatus === 4" @click="receive(item)">确认收货</button>
|
||||||
|
</td>
|
||||||
|
</template>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<el-pagination v-if=" orderTotal > pageSize" background layout="prev, pager, next"
|
||||||
|
:current-page.sync="pageIndex"
|
||||||
|
:total="orderTotal" @current-change="getOrderList"></el-pagination>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {ApiGetOrderList, ApiPutOrderReceive} from '~/plugins/api/order';
|
||||||
|
import UIGoodsInfo from '../../../../../components/UIGoodsInfo.vue';
|
||||||
|
import UiLineBox from '../../../../../components/UiLineBox.vue';
|
||||||
|
export default {
|
||||||
|
components: { UiLineBox, UIGoodsInfo },
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
tabs : [
|
||||||
|
{label : '全部', value : -1},
|
||||||
|
{label : '待付款', value : 1},
|
||||||
|
{label : '待发货', value : 3},
|
||||||
|
{label : '待收货', value : 4},
|
||||||
|
],
|
||||||
|
tabActive : this.$route.query.type || -1,
|
||||||
|
pageIndex : 1,
|
||||||
|
pageSize : 15,
|
||||||
|
orderList : [],
|
||||||
|
orderTotal : 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.getOrderList()
|
||||||
|
},
|
||||||
|
methods : {
|
||||||
|
changeTab(val){
|
||||||
|
if(val === this.$route.query.type){
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.$router.replace({
|
||||||
|
query:{
|
||||||
|
type : val
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.pageIndex = 1;
|
||||||
|
this.tabActive = val;
|
||||||
|
this.getOrderList();
|
||||||
|
|
||||||
|
},
|
||||||
|
async getOrderList(){
|
||||||
|
const {error, result} = await ApiGetOrderList({
|
||||||
|
length : this.pageSize,
|
||||||
|
pageIndex : this.pageIndex,
|
||||||
|
orderStatus : this.tabActive > -1 ? this.tabActive : null
|
||||||
|
});
|
||||||
|
if(error){
|
||||||
|
this.message.warning(error.message);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.orderList = result.records;
|
||||||
|
this.orderTotal = result.total
|
||||||
|
},
|
||||||
|
pageChange(){
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tab {
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
li{
|
||||||
|
float: left;
|
||||||
|
margin-right: 54px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
span{
|
||||||
|
color: #FF875B;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__active{
|
||||||
|
color: #FF875B;
|
||||||
|
position: relative;
|
||||||
|
&::after{
|
||||||
|
display: block;
|
||||||
|
height: 2px;
|
||||||
|
width: 100%;
|
||||||
|
content: '';
|
||||||
|
background: #FF875B;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order{
|
||||||
|
margin: 10px 0;
|
||||||
|
&--head{
|
||||||
|
height: 42px;
|
||||||
|
color: #999;
|
||||||
|
background: #F8F8F8;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
&--table{
|
||||||
|
width: 100%;
|
||||||
|
td{
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
tr:first-child td{
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&--product{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
p{
|
||||||
|
width: 96px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,32 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: ch
|
|
||||||
* @Date: 2022-05-04 20:47:29
|
|
||||||
* @LastEditors: ch
|
|
||||||
* @LastEditTime: 2022-05-04 21:49:40
|
|
||||||
* @Description: file content
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h1>我是订单列表</h1>
|
|
||||||
<a href="/">回首页</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import {ApiGetOrderList} from '~/plugins/api/order';
|
|
||||||
export default {
|
|
||||||
name: 'IndexPage',
|
|
||||||
asyncData(){
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
this.getData();
|
|
||||||
},
|
|
||||||
methods : {
|
|
||||||
async getData(){
|
|
||||||
const res = await ApiGetOrderList();
|
|
||||||
console.log(res);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-05-08 16:12:18
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-05-08 16:14:57
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="amount">
|
||||||
|
<div>
|
||||||
|
<span>应付款</span>
|
||||||
|
<b>{{amount}}</b>
|
||||||
|
</div>
|
||||||
|
<p>北京市XXXXX区XXXX路xxxxxx小区XXX单元</p>
|
||||||
|
<p>卖火柴的灰姑凉 18888888888</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props : {
|
||||||
|
amount : {
|
||||||
|
type : Number,
|
||||||
|
default : 0
|
||||||
|
},
|
||||||
|
address : {
|
||||||
|
type : Object,
|
||||||
|
default : () => ({})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.amount{
|
||||||
|
height: 133px;
|
||||||
|
background: #f8f8f8;
|
||||||
|
text-align: right;
|
||||||
|
padding: 20px 40px;
|
||||||
|
margin-top: 10px;
|
||||||
|
b{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 12px;
|
||||||
|
color: #9E9E9E;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue