Commit 3730a445 authored by Junling Bu's avatar Junling Bu
Browse files

chore[litemall-vue]: 继续调整代码

parent 31d04729
<template>
<div>
<van-collapse accordion="true" v-model="activeNames">
<van-collapse-item :title="issue.question" :name="index" v-for="(issue, index) in issueList" :key="index">
{{issue.answer}}
</van-collapse-item>
</van-collapse>
</div>
</template>
<script>
import { Collapse, CollapseItem } from 'vant';
import { issueList } from '@/api/api';
export default {
data() {
return {
activeNames: [-1],
issueList: []
};
},
created() {
this.getIssueList();
},
methods: {
getIssueList() {
issueList().then(res => {
this.issueList = res.data.data.data
})
}
},
components: {
[Collapse.name]: Collapse,
[CollapseItem.name]: CollapseItem
}
};
</script>
<style scoped lang="scss">
</style>
\ No newline at end of file
...@@ -3,16 +3,24 @@ ...@@ -3,16 +3,24 @@
<van-cell-group> <van-cell-group>
<van-cell title="联系客服" @click="showKefu = true" isLink></van-cell> <van-cell title="联系客服" @click="showKefu = true" isLink></van-cell>
<van-cell title="意见反馈" isLink></van-cell> <van-cell title="意见反馈" isLink></van-cell>
<van-cell title="常见问题" isLink></van-cell> <van-cell title="常见问题" to="/user/help" isLink/>
</van-cell-group> </van-cell-group>
<van-popup v-model="showKefu"> <van-popup v-model="showKefu">
电话 XXX <van-cell-group>
<van-cell title="项目名称" value="litemall" />
<van-cell title="项目地址" value="Github" url="https://github.com/linlinjava/litemall"/>
<van-cell title="项目地址" value="Gitee" url="https://gitee.com/linlinjava/litemall"/>
<van-cell title="联系电话" value="021-xxxx-xxxx" />
<van-cell title="联系QQ" value="738696120" />
<van-cell title="当前版本" value="V1.0" />
<van-cell title="开源协议" value="MIT" />
</van-cell-group>
</van-popup> </van-popup>
</div> </div>
</template> </template>
<script> <script>
import { Popup } from 'vant'; import { Popup, Cell, CellGroup } from 'vant';
export default { export default {
data() { data() {
...@@ -22,7 +30,17 @@ export default { ...@@ -22,7 +30,17 @@ export default {
}, },
components: { components: {
[Popup.name]: Popup [Popup.name]: Popup,
[Cell.name]: Cell,
[CellGroup.name]: CellGroup
} }
}; };
</script> </script>
<style scoped lang="scss">
.van-popup {
width: 80%;
padding: 20px;
box-sizing: border-box;
}
</style>
\ No newline at end of file
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('cancel')">取消订单</van-button>
<van-button size="small" type="danger" @click="$emit('pay')">去支付</van-button>
</div>
</template>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">去使用</van-button>
</div>
</template>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">查看详情</van-button>
</div>
</template>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">查看详情</van-button>
</div>
</template>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">查看详情</van-button>
</div>
</template>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('delete-order')">删除订单</van-button>
</div>
</template>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('delete-order')">删除订单</van-button>
</div>
</template>
<template> <template>
<div class="order_list no-pad-bottom over-hide"> <div class="order_list no-pad-bottom over-hide">
<van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick"> <van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab v-for="(tab, tabIndex) in tabsItem" :title="tab.name" :key="tab.type"> <van-tab v-for="(tabTitle, tabIndex) in tabTitles" :title="tabTitle" :key="tabIndex">
<InfinityScroll <!-- <InfinityScroll
class="full-page scroll-wrap height-fix42" class="full-page scroll-wrap height-fix42"
:beforeRequest="beforeRequest" :beforeRequest="beforeRequest"
:apiUrl="listApi" :apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)" @onLoad="onLoad(tabIndex, $event)"
> > -->
<van-panel
v-for="(el, i) in tab.items" <van-panel style=" padding-bottom: 10px;">
class="order_list--panel" <div class="van-coupon-item" v-for="(coupon,index) in couponList" :key="index">
:key="el.id" <div class="van-coupon-item__content">
:title="'订单编号: ' + el.id" <div class="van-coupon-item__head">
:status="getStatusText(el.status)" <h2>
> <span>¥</span>
<div> {{coupon.discount}}
<van-card </h2>
v-for="(goods, i) in el.serviceItems" <p>{{coupon.desc }} - {{coupon.tag}}</p>
class="order_list--van-card" </div>
:key="i" <div class="van-coupon-item__body">
:title="goods.item_name" <h2>{{coupon.name}}</h2>
:desc="goods.sku_props_str" <p>有效期: 至 {{coupon.endTime}}</p>
:num="10000"
:price="(goods.price / 100).toFixed(2)" </div>
:thumb="goods.pic_url" </div>
/>
<div class="order_list--total">合计: {{el.total_fee | yuan}}(含运费{{el.post_fee | yuan}}</div>
</div> </div>
<component
slot="footer"
:is="'status' + el.status"
@delete-order="delOrder(i)"
@pay="toPay(el.id)"
@cancel="cancelOrder(i)"
/>
</van-panel> </van-panel>
</InfinityScroll> <!-- </InfinityScroll> -->
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</div> </div>
</template> </template>
<script> <script>
import { ELE_COUPON_LIST } from '@/api/order'; import { CouponMyList, couponMyList } from '@/api/api';
import { Tab, Tabs, Panel, Card, List } from 'vant'; import { Tab, Tabs, Panel, Card, List, CouponCell, CouponList } from 'vant';
import status10 from './handle-status-10';
import status40 from './handle-status-40';
import status60 from './handle-status-60';
import status70 from './handle-status-70';
import status100 from './handle-status-100';
import status110 from './handle-status-110';
import status120 from './handle-status-120';
import _ from 'lodash'; import _ from 'lodash';
import InfinityScroll from '@/components/infinity-scroll'; import InfinityScroll from '@/components/infinity-scroll';
const STATUS_TEXT = {
10: '待付款',
40: '已完成',
60: '已关闭',
70: '已关闭',
100: '未使用',
110: '已使用',
120: '已退款'
};
export default { export default {
name: 'order-list', name: 'coupon-list',
props: { props: {
active: { active: {
...@@ -76,88 +52,33 @@ export default { ...@@ -76,88 +52,33 @@ export default {
default: 0 default: 0
} }
}, },
created() {
this.init();
},
data() { data() {
const activeIndex = this.active;
return { return {
listApi: ELE_COUPON_LIST, listApi: CouponMyList,
shop_id: 1, activeIndex: this.active,
activeIndex, tabTitles: [
tabsItem: [ '未使用',
{ '已使用',
name: '全部', '已过期'
],
status: 0, status: 0,
items: [] couponList: []
},
{
name: '待付款',
status: 10,
items: []
},
{
name: '待使用',
status: 100,
items: []
},
{
name: '已使用',
status: 110,
items: []
},
{
name: '退款成功',
status: 120,
items: []
}
]
}; };
}, },
methods: { methods: {
onLoad(i, items) { init(i) {
new Array(10).fill(1).forEach(() => { let status = i || this.activeIndex;
items.push(_.cloneDeep(_.last(items))); couponMyList({status: status}).then(res => {
this.couponList = res.data.data.data;
}); });
this.tabsItem[i].items.push(...items);
},
beforeRequest() {
const i = this.activeIndex;
const status = this.tabsItem[i].status;
const { shop_id } = this;
return {
params: {
status,
shop_id
}
};
},
delOrder(i) {
this.$dialog.confirm({ message: '确定删除订单?' }).then(() => {
this.items.splice(i, 1);
this.$toast('已删除');
});
},
async cancelOrder(i) {
this.$dialog
.confirm({ message: '确定要取消该订单吗?' })
.then(() => {
this.items.splice(i, 1);
this.$toast('已取消该订单');
})
.catch(() => {});
},
toPay(id) {
this.$router.push({ name: 'payment', params: { order_id: id } });
}, },
handleTabClick(index) { handleTabClick(index) {
this.$router.replace({ this.init(index);
name: 'user-order-ele-list',
params: { status: index }
});
}, },
getStatusText(status) {
return STATUS_TEXT[status] || '';
}
}, },
components: { components: {
[Tab.name]: Tab, [Tab.name]: Tab,
...@@ -166,13 +87,8 @@ export default { ...@@ -166,13 +87,8 @@ export default {
[Card.name]: Card, [Card.name]: Card,
[List.name]: List, [List.name]: List,
InfinityScroll, InfinityScroll,
status10, CouponCell,
status40, CouponList,
status60,
status70,
status100,
status110,
status120
} }
}; };
</script> </script>
...@@ -195,4 +111,89 @@ export default { ...@@ -195,4 +111,89 @@ export default {
padding: 10px; padding: 10px;
} }
} }
.van-coupon-item {
overflow: hidden;
border-radius: 4px;
margin: 0 15px 15px;
background-color: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.van-coupon-item:active {
background-color: #e8e8e8;
}
.van-coupon-item__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100px;
padding: 24px 0 0 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border:1px solid red;
}
.van-coupon-item h2,
.van-coupon-item p {
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.van-coupon-item h2 {
height: 34px;
font-weight: 500;
line-height: 34px;
}
.van-coupon-item p {
font-size: 12px;
line-height: 16px;
color: #969799;
}
.van-coupon-item__head {
min-width: 90px;
}
.van-coupon-item__head h2 {
color: #f44;
font-size: 24px;
}
.van-coupon-item__head h2 span {
font-size: 50%;
}
.van-coupon-item__body {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
border-radius: 0 4px 4px 0;
margin-left:20px;
}
.van-coupon-item__body h2 {
font-size: 16px;
}
.van-coupon-item__corner {
top: 16px;
right: 15px;
position: absolute;
}
.van-coupon-item__corner .van-icon {
border-color: #f44;
background-color: #f44;
}
.van-coupon-item__reason {
padding: 7px 15px;
border-top: 1px dashed #ebedf0;
background-color: #fafafa;
}
.van-coupon-item--disabled:active {
background-color: #fff;
}
.van-coupon-item--disabled .van-coupon-item__content {
height: 90px;
}
.van-coupon-item--disabled h2,
.van-coupon-item--disabled p,
.van-coupon-item--disabled span {
color: #969799;
}
</style> </style>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('handle', 'cancelOrder')">取消订单</van-button>
<van-button size="small" type="danger" @click="$emit('handle', 'toPay')">去支付</van-button>
</div>
</template>
<script>
</script>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" type="danger" @click="$emit('handle', 'reminderOrder')" :disabled="!reminder">提醒发货</van-button>
</div>
</template>
<script>
export default {
props: {
reminder: Boolean
}
};
</script>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">查看物流</van-button>
<van-button size="small" type="danger" @click="$emit('handle', 'reminderOrder')" :disabled="!reminder">提醒发货</van-button>
</div>
</template>
<script>
export default {
props: {
reminder: Boolean
}
};
</script>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">查看物流</van-button>
<van-button size="small" type="danger" @click="$emit('handle', 'receiptOrder')">确认收货</van-button>
</div>
</template>
<script>
</script>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('handle', 'toOrderDetail')">查看详情</van-button>
</div>
</template>
<script>
</script>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">查看详情</van-button>
</div>
</template>
<script>
</script>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('handle', 'delOrder')">删除订单</van-button>
</div>
</template>
<script>
</script>
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('handle', 'delOrder')">删除订单</van-button>
</div>
</template>
<script>
</script>
<template> <template>
<div class="order_list over-hide"> <div class="order_list over-hide">
<van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick"> <van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab <van-tab v-for="(tabTitle, index) in tabTitles" :title="tabTitle" :key="index">
v-for="(tab, tabIndex) in tabsItem" <!-- <InfinityScroll
:title="tab.name"
@click="changeTab"
:key="tab.type"
>
<InfinityScroll
class="full-page scroll-wrap height-fix42" class="full-page scroll-wrap height-fix42"
:beforeRequest="beforeRequest" :beforeRequest="beforeRequest"
:apiUrl="listApi" :apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)" @onLoad="onLoad(tabIndex, $event)"
> > -->
<van-panel <van-panel
v-for="(el, i) in orderArr" v-for="(el, i) in orderList"
class="order_list--panel" class="order_list--panel"
:key="i" :key="i"
:title="'订单编号: ' + el.orderSn" :title="'订单编号: ' + el.orderSn"
...@@ -26,54 +21,46 @@ ...@@ -26,54 +21,46 @@
class="order_list--van-card" class="order_list--van-card"
:key="goodsI" :key="goodsI"
:title="goods.goodsName" :title="goods.goodsName"
:desc="goods.goodsName"
:num="goods.number" :num="goods.number"
:thumb="goods.picUrl" :thumb="goods.picUrl"
@click.native="toOrderDetail(el.id)" @click.native="toOrderDetail(el.id)"
/> >
<div slot="desc">
<div class="van-card__desc">
<van-tag plain style="margin-right:6px;" v-for="(spec, index) in goods.specifications" :key="index">
{{spec}}
</van-tag>
</div>
</div>
</van-card>
<div <div
class="order_list--total" class="order_list--total"
>合计: {{el.actualPrice * 100 | yuan}}(含运费{{el.post_fee | yuan}}</div> >合计: {{el.actualPrice * 100 | yuan}}(含运费{{el.post_fee | yuan}}</div>
</div> </div>
<component
slot="footer" <div slot="footer" class="order_list--footer_btn">
:is="'status' + el.status" <van-button size="small" v-if="el.handleOption.cencel" @click="cancelOrder(el.id)">取消订单</van-button>
:reminder="el.is_can_reminder" <van-button size="small" v-if="el.handleOption.pay" type="danger" @click="toPay(el.id)">去支付</van-button>
@handle="actionHandle($event, i)" <van-button size="small" v-if="el.handleOption.confirm" type="danger" @click="confirmOrder(el.id)">确认收货</van-button>
/> <van-button size="small" v-if="el.handleOption.delete" @click="delOrder(el.id)">删除订单</van-button>
<van-button size="small" v-if="el.handleOption.comment" @click="commentOrder(el.id)">去评价</van-button>
</div>
</van-panel> </van-panel>
</InfinityScroll>
<!-- </InfinityScroll> -->
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</div> </div>
</template> </template>
<script> <script>
import { ORDER_LIST } from '@/api/order'; import { OrderList, orderList } from '@/api/api';
import { Tab, Tabs, Panel, Card, List } from 'vant';
import status10 from './handle-status-10';
import status20 from './handle-status-20';
import status25 from './handle-status-25';
import status30 from './handle-status-30';
import status40 from './handle-status-40';
import status50 from './handle-status-50';
import status60 from './handle-status-60';
import status70 from './handle-status-70';
import { Tab, Tabs, Panel, Card, List, Tag } from 'vant';
import InfinityScroll from '@/components/infinity-scroll'; import InfinityScroll from '@/components/infinity-scroll';
const STATUS_TEXT = {
10: '待付款',
20: '待发货',
25: '部分发货',
30: '待收货',
40: '已完成',
50: '退款成功',
60: '交易关闭',
70: '交易关闭'
};
export default { export default {
name: 'order-list', name: 'order-list',
...@@ -87,118 +74,55 @@ export default { ...@@ -87,118 +74,55 @@ export default {
this.init(); this.init();
}, },
data() { data() {
const activeIndex = this.active;
return { return {
listApi: ORDER_LIST, listApi: OrderList,
shop_id: 1, activeIndex: this.active,
activeIndex, tabTitles: [
tabsItem: [ '全部',
{ '待付款',
name: '全部', '待发货',
status: 0, '待收货',
items: [] '待评价'
},
{
name: '待付款',
status: 10,
items: []
},
{
name: '待发货',
status: 20,
items: []
},
{
name: '待收货',
status: 30,
items: []
},
{
name: '已完成',
status: 40,
items: []
}
], ],
orderArr: [] orderList: []
}; };
}, },
methods: { methods: {
async init(i) { init(i) {
let { data } = await this.$reqGet( let showType = i || this.activeIndex;
`/wx/order/list?showType=${i || this.active || '0'}` orderList({showType: showType}).then(res => {
); this.orderList = res.data.data.data;
this.orderArr = data.data.data; });
},
onLoad(i, items) {
this.tabsItem[i].items.push(...items);
},
beforeRequest() {
const i = this.activeIndex;
const status = this.tabsItem[i].status;
const { shop_id } = this;
return {
params: {
status,
shop_id
}
};
}, },
async delOrder(i) { delOrder(i) {
await this.$dialog.confirm({ message: '确定要删除该订单吗?' }); this.$dialog.confirm({ message: '确定要删除该订单吗?' });
this.items.splice(i, 1); this.items.splice(i, 1);
this.$toast('已删除该订单'); this.$toast('已删除该订单');
}, },
async cancelOrder(i) { cancelOrder(id) {
await this.$dialog.confirm({ message: '确定要取消该订单吗?' }); this.$dialog.confirm({ message: '确定要取消该订单吗?' });
if (this.activeIndex == 0) {
this.items[i].status = 60;
} else {
this.items.splice(i, 1);
}
this.$toast('已取消该订单'); this.$toast('已取消该订单');
}, },
async receiptOrder(i) { confirmOrder(id) {
await this.$dialog.confirm({ this.$dialog.confirm({
message: '请确认收到货物, 确认收货后无法撤销!' message: '请确认收到货物, 确认收货后无法撤销!'
}); });
this.items[i].status = 40;
this.$toast('已确认收货'); this.$toast('已确认收货');
}, },
reminderOrder(i) { commentOrder(id) {
this.items[i].is_can_reminder = false;
this.$toast('已提醒卖家发货, 请耐心等待哦~');
}, },
toPay(i) { toPay(id) {
const id = this.items[i].id; this.$router.push({ name: 'payment', params: { orderId: id } });
this.$router.push({ name: 'payment', params: { order_id: id } });
}, },
handleTabClick(index) { handleTabClick(index) {
console.log(6666666); this.init(index);
// console.log(index);
// await this.init(i);
this.$router.replace({
name: 'user-order-list',
params: { active: index }
});
},
getStatusText(status) {
return STATUS_TEXT[status] || '';
}, },
toOrderDetail(id) { toOrderDetail(id) {
this.$router.push({ this.$router.push({
name: `orderDetail`, name: `orderDetail`,
query: { cartId: 0, orderId: id } query: { cartId: 0, orderId: id }
}); });
},
actionHandle(handle, i) {
this[handle] && this[handle](i);
}
},
watch: {
active(val) {
this.init(val);
val && !this.address_list.length && this.getAddress();
} }
}, },
components: { components: {
...@@ -208,14 +132,7 @@ export default { ...@@ -208,14 +132,7 @@ export default {
[Panel.name]: Panel, [Panel.name]: Panel,
[Card.name]: Card, [Card.name]: Card,
[List.name]: List, [List.name]: List,
status10, [Tag.name]: Tag
status20,
status25,
status30,
status40,
status50,
status60,
status70
} }
}; };
</script> </script>
......
...@@ -8,19 +8,19 @@ ...@@ -8,19 +8,19 @@
<van-row class="ecoupon_status"> <van-row class="ecoupon_status">
<van-col span="8"> <van-col span="8">
<div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/1'})"> <div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/0'})">
<van-icon name="coupon" /> <van-icon name="coupon" />
</div> </div>
<div>待使用</div> <div>待使用</div>
</van-col> </van-col>
<van-col span="8"> <van-col span="8">
<div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/2'})"> <div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/1'})">
<van-icon name="coupon-used" /> <van-icon name="coupon-used" />
</div> </div>
<div>已使用</div> <div>已使用</div>
</van-col> </van-col>
<van-col span="8"> <van-col span="8">
<div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/3'})"> <div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/2'})">
<van-icon name="coupon-due" /> <van-icon name="coupon-due" />
</div> </div>
<div>过期关闭</div> <div>过期关闭</div>
......
Supports Markdown
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