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 {
};
</script>
<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-family: "oswald";
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>
.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>
<template>
<div :class="$q.platform.is.desktop ? 'q-ma-lg content': 'full-width'" style="min-height:80vh">
<!-- <div class="flex justify-between margin">
<div :class="$q.platform.is.desktop ? 'form-item': 'full-width'">
<q-input
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-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>
<div class="" :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div :class="{'row items-center':$q.platform.is.mobile}">
<q-btn-dropdown color="dark" flat dense :label="`訂單狀態：${orderStatusFiled}`" class="q-px-md" :class="{'col':$q.platform.is.mobile}">
<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-list>
<q-item clickable v-close-popup v-for="(x,i) in productTypes" :key="i" @click="changeProductTypeHandler(x)">
<q-item-section>
<q-item-label>{{ x.desc }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-space />
<q-btn-dropdown color="dark" flat dense :label="`商品類型：${productTypeFiled}`" class="q-px-md" :class="{'col':$q.platform.is.mobile}">
<q-list>
<q-item clickable v-close-popup v-for="(x,i) in productTypes" :key="i" @click="changeProductTypeHandler(x)">
<q-item-section>
<q-item-label>{{ x.desc }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
<q-space class="desktop-only" />
<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>
<q-icon name="search" />
</template>
......@@ -146,36 +39,52 @@
<div class="row justify-between items-center">
<div>
<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 class="text-grey-5">下單日期：{{ item.createTimeStr }}</div>
<div class="text-grey-5 desktop-only">下單日期：{{ item.createTimeStr }}</div>
<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" />
<span class="q-ml-sm" :class="[item.orderStatusInfo.color]">{{ item.orderStatusInfo.desc }}</span>
</div>
</div>
<div class="q-mt-sm row">
<q-img
<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
:src="item.goodsPic"
class="rounded-borders q-mr-md"
spinner-color="grey-2"
style="width: 150px;height:80px;"
/>
<div class="col">
<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="q-mt-sm text-grey-8 f12 row items-center">
<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>
<q-icon name="iconfont iconemail" size="14px" class="q-mr-sm" />
<span class="q-mr-md">{{ item.mailbox }}</span>
:style="{width: $q.platform.is.desktop?'150px':'80px',height:$q.platform.is.desktop?'80px':'40px'}"
/>
<div class="col">
<div class="text-body1 ellipsis cursor-pointer" @click="CommonJump('/orderinfo/'+item.orderNo,{},'blank')">{{ item.goodsName }}</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 desktop-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>
<q-icon name="iconfont iconemail" size="14px" class="q-mr-sm" />
<span class="q-mr-md">{{ item.mailbox }}</span>
</div>
</div>
</div>
<div class="q-ml-lg">
<div class="text-right">
<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">
<span>CNY:</span>
<span class="text-h6 q-ml-sm">{{ moneyFormat(item.totalPrice,2) }}</span>
</div>
......@@ -187,6 +96,7 @@
<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="查看訂單" />
</div>
</div>
</div>
</div>
</q-card>
......@@ -328,6 +238,9 @@ export default {
null
);
},
goCustomerServiceHandler(){
window.open('https://work.weixin.qq.com/kfid/kfcaec7130ac124872a', '_blank');
},
getOrderList() {
this.apipost(
"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