Skip to content

M
million
Commit 964e90e6 authored by 沈良进's avatar 沈良进
Browse files
Options

修改订单列表

parent b2059d4c
Show whitespace changes
Inline Side-by-side
Showing with 63 additions and 150 deletions
src/App.vue
View file @ 964e90e6
...@@ -10,7 +10,7 @@ export default { ...@@ -10,7 +10,7 @@ export default {
}; };
</script> </script>
<style> <style>
@import url("//at.alicdn.com/t/c/font_1890699_gbysegbhucu.css"); @import url("//at.alicdn.com/t/c/font_1890699_5zxmcxmwvtf.css");
@font-face { @font-face {
font-family: "oswald"; font-family: "oswald";
src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf"); src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
......
src/pages/usercenter/order.vue
View file @ 964e90e6
<style lang="scss" scoped> <style lang="scss" scoped>
.form-item {
max-width: 320px;
}
.content {
width: 900px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
}
.card {
margin: 10px;
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 8px;
}
.card-title {
height: 37px;
height: 37px;
padding: 0 20px;
line-height: 37px;
background: #f5f5f5;
border-radius: 8px 8px 0px 0px;
}
.tips {
height: 42px;
background: #f5f5f5;
border-radius: 8px;
padding: 0 35px;
line-height: 42px;
}
::v-deep .q-field__control {
height: 40px;
}
::v-deep .q-field--auto-height .q-field__control {
min-height: 40px;
}
::v-deep .q-field__marginal {
height: 40px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
}
.phone {
margin-left: 100px;
}
.name {
padding: 10px;
max-width: 400px;
}
.user-name {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px;
}
.pay-info {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px;
}
.order-info {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px;
}
.order-action {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px;
}
.nav-item {
width: 25%;
max-width: 100px;
text-align: center;
}
.border-bottom {
width: 20px;
height: 4px;
border-radius: 2px;
background-color: $primary;
margin: -8px auto 0 auto;
}
.product-img {
width: 64px;
height: 64px;
}
</style> </style>
<template> <template>
<div :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'" style="min-height:80vh"> <div :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'" style="min-height:80vh">
<!-- <div class="flex justify-between margin"> <div class="" :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div :class="$q.platform.is.desktop ? 'form-item': 'full-width'"> <div :class="{'row items-center':$q.platform.is.mobile}">
<q-input <q-btn-dropdown color="dark" flat dense :label="`訂單狀態：${orderStatusFiled}`" class="q-px-md" :class="{'col':$q.platform.is.mobile}">
placeholder="輸入商品名稱/訂單號"
v-model="GoodsName"
clearable
outlined
></q-input>
</div>
</div>
<div class="tips flex">
<div
@click="changeOrderType(item)"
class="nav-item cursor-pointer"
v-for="item in orderEnums"
:key="item.ID"
>
{{ item.Name }}
<div :class="orderStatus === item.ID ? 'border-bottom' : ''"></div>
</div>
</div> -->
<div class="row items-center">
<q-btn-dropdown color="dark" flat dense :label="`訂單狀態：${orderStatusFiled}`" class="q-px-md">
<q-list> <q-list>
<q-item clickable v-close-popup v-for="item in orderEnums" :key="item.ID" @click="changeOrderType(item)"> <q-item clickable v-close-popup v-for="item in orderEnums" :key="item.ID" @click="changeOrderType(item)">
<q-item-section> <q-item-section>
...@@ -122,7 +14,7 @@ ...@@ -122,7 +14,7 @@
</q-list> </q-list>
</q-btn-dropdown> </q-btn-dropdown>
<q-btn-dropdown color="dark" flat dense :label="`商品類型：${productTypeFiled}`" class="q-px-md"> <q-btn-dropdown color="dark" flat dense :label="`商品類型：${productTypeFiled}`" class="q-px-md" :class="{'col':$q.platform.is.mobile}">
<q-list> <q-list>
<q-item clickable v-close-popup v-for="(x,i) in productTypes" :key="i" @click="changeProductTypeHandler(x)"> <q-item clickable v-close-popup v-for="(x,i) in productTypes" :key="i" @click="changeProductTypeHandler(x)">
<q-item-section> <q-item-section>
...@@ -131,9 +23,10 @@ ...@@ -131,9 +23,10 @@
</q-item> </q-item>
</q-list> </q-list>
</q-btn-dropdown> </q-btn-dropdown>
<q-space /> </div>
<q-space class="desktop-only" />
<div> <div>
<q-input standout dense v-model="msg.GoodsName" label="商品名稱/訂單編號" @keypress.enter.native="initListHandler" > <q-input standout dense v-model="msg.GoodsName" :borderless="$q.platform.is.mobile" :class="{'q-mx-md':$q.platform.is.mobile}" label="商品名稱/訂單編號" @keypress.enter.native="initListHandler" >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="search" /> <q-icon name="search" />
</template> </template>
...@@ -146,26 +39,31 @@ ...@@ -146,26 +39,31 @@
<div class="row justify-between items-center"> <div class="row justify-between items-center">
<div> <div>
<q-chip size="12px" :class="[item.goodTypeEnum.bgColor,item.goodTypeEnum.color]" square>{{ item.goodTypeEnum?item.goodTypeEnum.desc:'' }}</q-chip> <q-chip size="12px" :class="[item.goodTypeEnum.bgColor,item.goodTypeEnum.color]" square>{{ item.goodTypeEnum?item.goodTypeEnum.desc:'' }}</q-chip>
<span class="f12 q-ml-md text-grey-5">訂單編號：#{{ item.orderNo }}</span> <span class="f12 q-ml-md text-grey-5 desktop-only">訂單編號：#{{ item.orderNo }}</span>
</div> </div>
<div class="text-grey-5">下單日期：{{ item.createTimeStr }}</div> <div class="text-grey-5 desktop-only">下單日期：{{ item.createTimeStr }}</div>
<div class="row items-center"> <div class="row items-center">
<q-btn color="dark" icon="iconfont iconmessage1" label="联系客服" flat @click="goCustomerServiceHandler" class="q-mr-md" />
<q-icon :name="item.orderStatusInfo.icon" :class="[item.orderStatusInfo.color]" size="14px" /> <q-icon :name="item.orderStatusInfo.icon" :class="[item.orderStatusInfo.color]" size="14px" />
<span class="q-ml-sm" :class="[item.orderStatusInfo.color]">{{ item.orderStatusInfo.desc }}</span> <span class="q-ml-sm" :class="[item.orderStatusInfo.color]">{{ item.orderStatusInfo.desc }}</span>
</div> </div>
</div> </div>
<div class="q-mt-sm row"> <div class="q-pa-md bg-grey-2 rounded-borders mobile-only q-mt-sm">
<div class="f12 text-grey-6">訂單編號：#{{ item.orderNo }}</div>
<div class="text-grey-6 q-mt-sm">下單日期：{{ item.createTimeStr }}</div>
</div>
<div class="q-mt-sm" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div class="row col">
<q-img <q-img
:src="item.goodsPic" :src="item.goodsPic"
class="rounded-borders q-mr-md" class="rounded-borders q-mr-md"
spinner-color="grey-2" spinner-color="grey-2"
style="width: 150px;height:80px;" :style="{width: $q.platform.is.desktop?'150px':'80px',height:$q.platform.is.desktop?'80px':'40px'}"
/> />
<div class="col"> <div class="col">
<div class="text-body1 ellipsis cursor-pointer" @click="CommonJump('/orderinfo/'+item.orderNo,{},'blank')">{{ item.goodsName }}</div> <div class="text-body1 ellipsis cursor-pointer" @click="CommonJump('/orderinfo/'+item.orderNo,{},'blank')">{{ item.goodsName }}</div>
<div class="q-mt-sm text-grey-5">{{ item.orderMake }} </div> <div class="text-grey-5" :class="{'q-mt-sm':$q.platform.is.desktop}">{{ item.orderMake }} </div>
<div class="q-mt-sm text-grey-8 f12 row items-center"> <div class="q-mt-sm text-grey-8 f12 row items-center desktop-only">
<q-icon name="iconfont iconpeople1" size="14px" class="q-mr-sm" /> <q-icon name="iconfont iconpeople1" size="14px" class="q-mr-sm" />
<span class="q-mr-md">{{ item.surName }}/{{ item.name }}</span> <span class="q-mr-md">{{ item.surName }}/{{ item.name }}</span>
<q-icon name="iconfont icontelephone" size="14px" class="q-mr-sm" /> <q-icon name="iconfont icontelephone" size="14px" class="q-mr-sm" />
...@@ -174,7 +72,18 @@ ...@@ -174,7 +72,18 @@
<span class="q-mr-md">{{ item.mailbox }}</span> <span class="q-mr-md">{{ item.mailbox }}</span>
</div> </div>
</div> </div>
<div class="q-ml-lg"> </div>
<div class="q-mt-sm text-grey-8 f12 row items-center mobile-only">
<q-icon name="iconfont iconpeople1" size="14px" class="q-mr-sm" />
<span class="q-mr-md">{{ item.surName }}/{{ item.name }}</span>
<q-icon name="iconfont icontelephone" size="14px" class="q-mr-sm" />
<span class="q-mr-md">{{ item.contactNumber }}</span>
</div>
<div class="" :class="{'q-mt-md row items-end':$q.platform.is.mobile,'q-ml-lg':$q.platform.is.desktop}">
<div class="col mobile-only text-left">
<q-btn color="dark" icon="iconfont iconmessage1" label="联系客服" flat @click="goCustomerServiceHandler" />
</div>
<div>
<div class="text-right"> <div class="text-right">
<span>CNY:</span> <span>CNY:</span>
<span class="text-h6 q-ml-sm">{{ moneyFormat(item.totalPrice,2) }}</span> <span class="text-h6 q-ml-sm">{{ moneyFormat(item.totalPrice,2) }}</span>
...@@ -189,6 +98,7 @@ ...@@ -189,6 +98,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</q-card> </q-card>
<div class="row justify-end q-mt-lg"> <div class="row justify-end q-mt-lg">
<q-pagination <q-pagination
...@@ -328,6 +238,9 @@ export default { ...@@ -328,6 +238,9 @@ export default {
null null
); );
}, },
goCustomerServiceHandler(){
window.open('https://work.weixin.qq.com/kfid/kfcaec7130ac124872a', '_blank');
},
getOrderList() { getOrderList() {
this.apipost( this.apipost(
"GetMyDirectOrderPageList_post", "GetMyDirectOrderPageList_post",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment