Skip to content

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

修改订单列表

parent b2059d4c
Hide 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="輸入商品名稱/訂單號" <q-list>
v-model="GoodsName" <q-item clickable v-close-popup v-for="item in orderEnums" :key="item.ID" @click="changeOrderType(item)">
clearable <q-item-section>
outlined <q-item-label>{{ item.Name }}</q-item-label>
></q-input> </q-item-section>
</div> </q-item>
</div> </q-list>
<div class="tips flex"> </q-btn-dropdown>
<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-item clickable v-close-popup v-for="item in orderEnums" :key="item.ID" @click="changeOrderType(item)">
<q-item-section>
<q-item-label>{{ item.Name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</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>
<q-item-label>{{ x.desc }}</q-item-label> <q-item-label>{{ x.desc }}</q-item-label>
</q-item-section> </q-item-section>
</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,36 +39,52 @@ ...@@ -146,36 +39,52 @@
<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">
<q-img <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
: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" />
<span class="q-mr-md">{{ item.contactNumber }}</span> <span class="q-mr-md">{{ item.contactNumber }}</span>
<q-icon name="iconfont iconemail" size="14px" class="q-mr-sm" /> <q-icon name="iconfont iconemail" size="14px" class="q-mr-sm" />
<span class="q-mr-md">{{ item.mailbox }}</span> <span class="q-mr-md">{{ item.mailbox }}</span>
</div>
</div> </div>
</div> </div>
<div class="q-ml-lg"> <div class="q-mt-sm text-grey-8 f12 row items-center mobile-only">
<div class="text-right"> <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">
<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>
</div> </div>
...@@ -187,6 +96,7 @@ ...@@ -187,6 +96,7 @@
<div class="q-mt-md text-right" v-else> <div class="q-mt-md text-right" v-else>
<q-btn color="dark" dense flat class="q-px-sm" @click="CommonJump('/orderinfo/'+item.orderNo,{},'blank')" label="查看訂單" /> <q-btn color="dark" dense flat class="q-px-sm" @click="CommonJump('/orderinfo/'+item.orderNo,{},'blank')" label="查看訂單" />
</div> </div>
</div>
</div> </div>
</div> </div>
</q-card> </q-card>
...@@ -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