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 @@
<van-cell-group>
<van-cell title="联系客服" @click="showKefu = true" 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-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>
</div>
</template>
<script>
import { Popup } from 'vant';
import { Popup, Cell, CellGroup } from 'vant';
export default {
data() {
......@@ -22,7 +30,17 @@ export default {
},
components: {
[Popup.name]: Popup
[Popup.name]: Popup,
[Cell.name]: Cell,
[CellGroup.name]: CellGroup
}
};
</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>
<div class="order_list no-pad-bottom over-hide">
<van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab v-for="(tab, tabIndex) in tabsItem" :title="tab.name" :key="tab.type">
<InfinityScroll
<van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab v-for="(tabTitle, tabIndex) in tabTitles" :title="tabTitle" :key="tabIndex">
<!-- <InfinityScroll
class="full-page scroll-wrap height-fix42"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
>
<van-panel
v-for="(el, i) in tab.items"
class="order_list--panel"
:key="el.id"
:title="'订单编号: ' + el.id"
:status="getStatusText(el.status)"
>
<div>
<van-card
v-for="(goods, i) in el.serviceItems"
class="order_list--van-card"
:key="i"
:title="goods.item_name"
:desc="goods.sku_props_str"
:num="10000"
:price="(goods.price / 100).toFixed(2)"
:thumb="goods.pic_url"
/>
<div class="order_list--total">合计: {{el.total_fee | yuan}}(含运费{{el.post_fee | yuan}}</div>
</div>
<component
slot="footer"
:is="'status' + el.status"
@delete-order="delOrder(i)"
@pay="toPay(el.id)"
@cancel="cancelOrder(i)"
/>
</van-panel>
</InfinityScroll>
> -->
<van-panel style=" padding-bottom: 10px;">
<div class="van-coupon-item" v-for="(coupon,index) in couponList" :key="index">
<div class="van-coupon-item__content">
<div class="van-coupon-item__head">
<h2>
<span>¥</span>
{{coupon.discount}}
</h2>
<p>{{coupon.desc }} - {{coupon.tag}}</p>
</div>
<div class="van-coupon-item__body">
<h2>{{coupon.name}}</h2>
<p>有效期: 至 {{coupon.endTime}}</p>
</div>
</div>
</div>
</van-panel>
<!-- </InfinityScroll> -->
</van-tab>
</van-tabs>
</div>
</template>
<script>
import { ELE_COUPON_LIST } from '@/api/order';
import { CouponMyList, couponMyList } from '@/api/api';
import { Tab, Tabs, Panel, Card, List } 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 { Tab, Tabs, Panel, Card, List, CouponCell, CouponList } from 'vant';
import _ from 'lodash';
import InfinityScroll from '@/components/infinity-scroll';
const STATUS_TEXT = {
10: '待付款',
40: '已完成',
60: '已关闭',
70: '已关闭',
100: '未使用',
110: '已使用',
120: '已退款'
};
export default {
name: 'order-list',
name: 'coupon-list',
props: {
active: {
......@@ -76,88 +52,33 @@ export default {
default: 0
}
},
created() {
this.init();
},
data() {
const activeIndex = this.active;
return {
listApi: ELE_COUPON_LIST,
shop_id: 1,
activeIndex,
tabsItem: [
{
name: '全部',
status: 0,
items: []
},
{
name: '待付款',
status: 10,
items: []
},
{
name: '待使用',
status: 100,
items: []
},
{
name: '已使用',
status: 110,
items: []
},
{
name: '退款成功',
status: 120,
items: []
}
]
listApi: CouponMyList,
activeIndex: this.active,
tabTitles: [
'未使用',
'已使用',
'已过期'
],
status: 0,
couponList: []
};
},
methods: {
onLoad(i, items) {
new Array(10).fill(1).forEach(() => {
items.push(_.cloneDeep(_.last(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
}
};
},
delOrder(i) {
this.$dialog.confirm({ message: '确定删除订单?' }).then(() => {
this.items.splice(i, 1);
this.$toast('已删除');
init(i) {
let status = i || this.activeIndex;
couponMyList({status: status}).then(res => {
this.couponList = res.data.data.data;
});
},
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) {
this.$router.replace({
name: 'user-order-ele-list',
params: { status: index }
});
},
getStatusText(status) {
return STATUS_TEXT[status] || '';
}
this.init(index);
},
},
components: {
[Tab.name]: Tab,
......@@ -166,13 +87,8 @@ export default {
[Card.name]: Card,
[List.name]: List,
InfinityScroll,
status10,
status40,
status60,
status70,
status100,
status110,
status120
CouponCell,
CouponList,
}
};
</script>
......@@ -195,4 +111,89 @@ export default {
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>
<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>
<div class="order_list over-hide">
<van-tabs v-model="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab
v-for="(tab, tabIndex) in tabsItem"
:title="tab.name"
@click="changeTab"
:key="tab.type"
>
<InfinityScroll
<van-tab v-for="(tabTitle, index) in tabTitles" :title="tabTitle" :key="index">
<!-- <InfinityScroll
class="full-page scroll-wrap height-fix42"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
>
> -->
<van-panel
v-for="(el, i) in orderArr"
v-for="(el, i) in orderList"
class="order_list--panel"
:key="i"
:title="'订单编号: ' + el.orderSn"
......@@ -26,54 +21,46 @@
class="order_list--van-card"
:key="goodsI"
:title="goods.goodsName"
:desc="goods.goodsName"
:num="goods.number"
:thumb="goods.picUrl"
@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
class="order_list--total"
>合计: {{el.actualPrice * 100 | yuan}}(含运费{{el.post_fee | yuan}}</div>
</div>
<component
slot="footer"
:is="'status' + el.status"
:reminder="el.is_can_reminder"
@handle="actionHandle($event, i)"
/>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" v-if="el.handleOption.cencel" @click="cancelOrder(el.id)">取消订单</van-button>
<van-button size="small" v-if="el.handleOption.pay" type="danger" @click="toPay(el.id)">去支付</van-button>
<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>
</InfinityScroll>
<!-- </InfinityScroll> -->
</van-tab>
</van-tabs>
</div>
</template>
<script>
import { ORDER_LIST } from '@/api/order';
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 { OrderList, orderList } from '@/api/api';
import { Tab, Tabs, Panel, Card, List, Tag } from 'vant';
import InfinityScroll from '@/components/infinity-scroll';
const STATUS_TEXT = {
10: '待付款',
20: '待发货',
25: '部分发货',
30: '待收货',
40: '已完成',
50: '退款成功',
60: '交易关闭',
70: '交易关闭'
};
export default {
name: 'order-list',
......@@ -87,118 +74,55 @@ export default {
this.init();
},
data() {
const activeIndex = this.active;
return {
listApi: ORDER_LIST,
shop_id: 1,
activeIndex,
tabsItem: [
{
name: '全部',
status: 0,
items: []
},
{
name: '待付款',
status: 10,
items: []
},
{
name: '待发货',
status: 20,
items: []
},
{
name: '待收货',
status: 30,
items: []
},
{
name: '已完成',
status: 40,
items: []
}
return {
listApi: OrderList,
activeIndex: this.active,
tabTitles: [
'全部',
'待付款',
'待发货',
'待收货',
'待评价'
],
orderArr: []
orderList: []
};
},
methods: {
async init(i) {
let { data } = await this.$reqGet(
`/wx/order/list?showType=${i || this.active || '0'}`
);
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
}
};
init(i) {
let showType = i || this.activeIndex;
orderList({showType: showType}).then(res => {
this.orderList = res.data.data.data;
});
},
async delOrder(i) {
await this.$dialog.confirm({ message: '确定要删除该订单吗?' });
delOrder(i) {
this.$dialog.confirm({ message: '确定要删除该订单吗?' });
this.items.splice(i, 1);
this.$toast('已删除该订单');
},
async cancelOrder(i) {
await this.$dialog.confirm({ message: '确定要取消该订单吗?' });
if (this.activeIndex == 0) {
this.items[i].status = 60;
} else {
this.items.splice(i, 1);
}
cancelOrder(id) {
this.$dialog.confirm({ message: '确定要取消该订单吗?' });
this.$toast('已取消该订单');
},
async receiptOrder(i) {
await this.$dialog.confirm({
confirmOrder(id) {
this.$dialog.confirm({
message: '请确认收到货物, 确认收货后无法撤销!'
});
this.items[i].status = 40;
this.$toast('已确认收货');
},
reminderOrder(i) {
this.items[i].is_can_reminder = false;
this.$toast('已提醒卖家发货, 请耐心等待哦~');
commentOrder(id) {
},
toPay(i) {
const id = this.items[i].id;
this.$router.push({ name: 'payment', params: { order_id: id } });
toPay(id) {
this.$router.push({ name: 'payment', params: { orderId: id } });
},
handleTabClick(index) {
console.log(6666666);
// console.log(index);
// await this.init(i);
this.$router.replace({
name: 'user-order-list',
params: { active: index }
});
},
getStatusText(status) {
return STATUS_TEXT[status] || '';
this.init(index);
},
toOrderDetail(id) {
this.$router.push({
name: `orderDetail`,
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: {
......@@ -208,14 +132,7 @@ export default {
[Panel.name]: Panel,
[Card.name]: Card,
[List.name]: List,
status10,
status20,
status25,
status30,
status40,
status50,
status60,
status70
[Tag.name]: Tag
}
};
</script>
......
......@@ -8,19 +8,19 @@
<van-row class="ecoupon_status">
<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" />
</div>
<div>待使用</div>
</van-col>
<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" />
</div>
<div>已使用</div>
</van-col>
<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" />
</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