Skip to content
GitLab
"src/main/webapp/pages/manage/home.jsp" did not exist on "01a044b78adc49fceafdaf06248f573e37487cb2"
Commit ce4ef458 authored by six.nonacosa's avatar six.nonacosa
Browse files

litemall client power for vue -- init 

litemall client power for vue  -- init

thanks litemall
parent 94107e65
Hide whitespace changes
Inline Side-by-side
litemall-vue/src/views/user/order-ele-list/handle-status-10.vue 0 → 100644
View file @ ce4ef458
<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>
litemall-vue/src/views/user/order-ele-list/handle-status-100.vue 0 → 100644
View file @ ce4ef458
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">去使用</van-button>
</div>
</template>
litemall-vue/src/views/user/order-ele-list/handle-status-110.vue 0 → 100644
View file @ ce4ef458
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">查看详情</van-button>
</div>
</template>
litemall-vue/src/views/user/order-ele-list/handle-status-120.vue 0 → 100644
View file @ ce4ef458
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">查看详情</van-button>
</div>
</template>
litemall-vue/src/views/user/order-ele-list/handle-status-40.vue 0 → 100644
View file @ ce4ef458
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">查看详情</van-button>
</div>
</template>
litemall-vue/src/views/user/order-ele-list/handle-status-60.vue 0 → 100644
View file @ ce4ef458
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('delete-order')">删除订单</van-button>
</div>
</template>
litemall-vue/src/views/user/order-ele-list/handle-status-70.vue 0 → 100644
View file @ ce4ef458
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('delete-order')">删除订单</van-button>
</div>
</template>
litemall-vue/src/views/user/order-ele-list/index.vue 0 → 100644
View file @ ce4ef458
<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
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-tab>
</van-tabs>
</div>
</template>
<script>
import { ELE_COUPON_LIST } from '@/api/order';
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 _ from 'lodash';
import InfinityScroll from '@/vue/components/infinity-scroll';
const STATUS_TEXT = {
10: '待付款',
40: '已完成',
60: '已关闭',
70: '已关闭',
100: '未使用',
110: '已使用',
120: '已退款'
};
export default {
name: 'order-list',
props: {
active: {
type: [String, Number],
default: 0
}
},
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: []
}
]
};
},
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('已删除');
});
},
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] || '';
}
},
components: {
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[Panel.name]: Panel,
[Card.name]: Card,
[List.name]: List,
InfinityScroll,
status10,
status40,
status60,
status70,
status100,
status110,
status120
}
};
</script>
<style lang="scss" scoped>
.order_list {
&--footer_btn {
text-align: right;
}
&--panel {
margin-bottom: 10px;
}
&--van-card {
background-color: #fafafa;
}
&--total {
text-align: right;
padding: 10px;
}
}
</style>
litemall-vue/src/views/user/order-entity-list/handle-status-10.vue 0 → 100644
View file @ ce4ef458
<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>
litemall-vue/src/views/user/order-entity-list/handle-status-20.vue 0 → 100644
View file @ ce4ef458
<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>
litemall-vue/src/views/user/order-entity-list/handle-status-25.vue 0 → 100644
View file @ ce4ef458
<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>
litemall-vue/src/views/user/order-entity-list/handle-status-30.vue 0 → 100644
View file @ ce4ef458
<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>
litemall-vue/src/views/user/order-entity-list/handle-status-40.vue 0 → 100644
View file @ ce4ef458
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('handle', 'toOrderDetail')">查看详情</van-button>
</div>
</template>
<script>
</script>
litemall-vue/src/views/user/order-entity-list/handle-status-50.vue 0 → 100644
View file @ ce4ef458
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small">查看详情</van-button>
</div>
</template>
<script>
</script>
litemall-vue/src/views/user/order-entity-list/handle-status-60.vue 0 → 100644
View file @ ce4ef458
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('handle', 'delOrder')">删除订单</van-button>
</div>
</template>
<script>
</script>
litemall-vue/src/views/user/order-entity-list/handle-status-70.vue 0 → 100644
View file @ ce4ef458
<template>
<div slot="footer" class="order_list--footer_btn">
<van-button size="small" @click="$emit('handle', 'delOrder')">删除订单</van-button>
</div>
</template>
<script>
</script>
litemall-vue/src/views/user/order-entity-list/index.vue 0 → 100644
View file @ ce4ef458
<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
class="full-page scroll-wrap height-fix42"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
>
<van-panel
v-for="(el, i) in orderArr"
class="order_list--panel"
:key="i"
:title="'订单编号: ' + el.orderSn"
:status="el.orderStatusText"
>
<div>
<van-card
v-for="(goods, goodsI) in el.goodsList"
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
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)"
/>
</van-panel>
</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 InfinityScroll from '@/vue/components/infinity-scroll';
const STATUS_TEXT = {
10: '待付款',
20: '待发货',
25: '部分发货',
30: '待收货',
40: '已完成',
50: '退款成功',
60: '交易关闭',
70: '交易关闭'
};
export default {
name: 'order-list',
props: {
active: {
type: [String, Number],
default: 0
}
},
created() {
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: []
}
],
orderArr: []
};
},
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
}
};
},
async delOrder(i) {
await 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);
}
this.$toast('已取消该订单');
},
async receiptOrder(i) {
await this.$dialog.confirm({
message: '请确认收到货物, 确认收货后无法撤销!'
});
this.items[i].status = 40;
this.$toast('已确认收货');
},
reminderOrder(i) {
this.items[i].is_can_reminder = false;
this.$toast('已提醒卖家发货, 请耐心等待哦~');
},
toPay(i) {
const id = this.items[i].id;
this.$router.push({ name: 'payment', params: { order_id: 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] || '';
},
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: {
InfinityScroll,
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[Panel.name]: Panel,
[Card.name]: Card,
[List.name]: List,
status10,
status20,
status25,
status30,
status40,
status50,
status60,
status70
}
};
</script>
<style lang="scss" scoped>
.order_list {
padding-bottom: 0;
overflow-y: hidden;
&--footer_btn {
text-align: right;
}
&--panel {
margin-bottom: 10px;
}
&--van-card {
background-color: #fafafa;
}
&--total {
text-align: right;
padding: 10px;
}
}
</style>
litemall-vue/src/views/user/refund-list/index.vue 0 → 100644
View file @ ce4ef458
<template>
<div class="order_list">
<van-tabs sticky :active="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab v-for="(tab, tabIndex) in tabsItem" :title="tab.name" :key="tab.type">
<InfinityScroll
class="full-page scroll-wrap"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
>
<van-panel
v-for="(el, i) in tab.items"
class="order_list--panel"
:key="i"
:title="'订单编号: ' + el.id"
:status="getStatusText(el.status)"
>
<div>
<van-card
class="order_list--van-card"
:key="i"
:title="el.orderItem.item_name"
:desc="el.orderItem.sku_props_str"
:num="10000"
:price="(el.orderItem.price / 100).toFixed(2)"
:thumb="el.orderItem.pic_url"
/>
<div
class="order_list--total"
>合计: {{el.refund_fee | yuan}}（含运费{{el.refund_post_fee | yuan}}）</div>
</div>
<div slot="footer" style="text-align: right;">
<van-button
size="small"
@click="refund_handle(i)"
>{{ el.status == 10 ? "撤销申请" : "查看详情"}}</van-button>
</div>
</van-panel>
</InfinityScroll>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import { REFUND_LIST } from '@/api/order';
import { Tab, Tabs, Panel, Card, List } from 'vant';
import InfinityScroll from '@/vue/components/infinity-scroll';
const STATUS_TEXT = {
10: '退款中',
50: '退款关闭',
60: '退款成功'
};
export default {
name: 'order-list',
data() {
return {
listApi: REFUND_LIST,
shop_id: 1,
activeIndex: 0,
items: [],
tabsItem: [
{
name: '全部',
status: 0,
items: []
},
{
name: '退款中',
status: 10,
items: []
},
{
name: '退款成功',
status: 60,
items: []
}
]
};
},
methods: {
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
}
};
},
refund_handle(i) {
const item = this.items[i];
if (item.status == 10) {
this.$dialog
.confirm({
message: '撤销后将不能再次发起申请，确定要撤销该申请吗？'
})
.then(() => {
this.$toast('已撤销该退款申请');
this.items[i].status = 50;
});
} else {
// 跳转退款详情
}
},
handleTabClick(index) {
if (this.activeIndex != index) {
this.activeIndex = index;
}
},
getStatusText(status) {
return STATUS_TEXT[status] || '';
}
},
components: {
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[Panel.name]: Panel,
[Card.name]: Card,
[List.name]: List,
InfinityScroll
}
};
</script>
<style lang="scss" scoped>
.order_list {
padding-bottom: 0;
&--footer_btn {
text-align: right;
}
&--panel {
margin-bottom: 10px;
}
&--van-card {
background-color: #fafafa;
}
&--total {
text-align: right;
padding: 10px;
}
}
</style>
litemall-vue/src/views/user/tabbar-user-ecoupon.vue 0 → 100755
View file @ ce4ef458
<template>
<div>
<van-cell-group>
<van-cell title="我的电子券" isLink>
<router-link to="/user/orderEle/list/0" class="text-desc">全部电子券</router-link>
</van-cell>
</van-cell-group>
<van-row class="ecoupon_status">
<van-col span="6">
<div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/1'})">
<van-icon name="coupon" />
</div>
<div>待使用</div>
</van-col>
<van-col span="6">
<div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/2'})">
<van-icon name="coupon-used" />
</div>
<div>已使用</div>
</van-col>
<van-col span="6">
<div class="ecoupon_status_icon" @click="$router.push({path: '/user/orderEle/list/3'})">
<van-icon name="coupon-due" />
</div>
<div>过期关闭</div>
</van-col>
</van-row>
</div>
</template>
<script>
import { Row, Col } from 'vant';
export default {
name: 'ecoupon-group',
components: {
[Row.name]: Row,
[Col.name]: Col
}
};
</script>
<style scoped lang="scss">
@import '../../assets/scss/mixin';
.ecoupon_status {
background-color: #fff;
text-align: center;
padding: 10px 0;
font-size: 12px;
> div {
@include one-border;
&::after {
top: 50%;
left: 50%;
border-bottom: 0;
border-right: 1px solid $border-color;
height: 150%;
transform: scale(0.5) translate3d(-50%, -50%, 0);
transform-origin: 0 0;
}
&:last-child::after {
border: 0;
}
}
.ecoupon_status_icon {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-block;
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
font-size: 24px;
color: #000;
}
}
}
</style>
litemall-vue/src/views/user/tabbar-user-header.vue 0 → 100755
View file @ ce4ef458
<template>
<div class="user_header" :style="{backgroundImage: `url(${background_image})`}">
<van-icon name="set" class="user_set" @click="toSetting"/>
<div class="user_avatar">
<img :src="avatar" alt="头像" width="55" height="55">
</div>
<div>{{nickName}}</div>
</div>
</template>
<script>
import avatar_default from '../../assets/images/avatar_default.png';
import bg_default from '../../assets/images/user_head_bg.png';
import { getLocalStorage } from 'core/utils/local-storage';
import _ from 'lodash';
export default {
name: 'user-header',
props: {
isLogin: {
type: Boolean,
default: false
}
},
data() {
return {
nickName: '昵称',
avatar: avatar_default,
background_image: bg_default
};
},
activated() {
this.getUserInfo();
},
methods: {
getUserInfo() {
const infoData = getLocalStorage(
'nickName',
'background_image',
'avatar'
);
this.avatar = avatar_default;
this.nickName = infoData.nickName || '昵称';
if (!_.isEmpty(infoData.avatar)) {
this.avatar = `http://www.qmenhu.com${infoData.avatar}`;
}
console.log(this.avatar);
console.log('-----------');
console.log(infoData);
this.background_image = infoData.background_image || bg_default;
},
toSetting() {
this.$router.push({ name: 'user-information' });
}
// toLogin() {
// !this.isLogin &&
// this.$router.push({ name: 'login', query: { redirect: 'user' } });
// }
}
};
</script>
<style lang="scss" scoped>
.user_header {
position: relative;
background-repeat: no-repeat;
background-size: cover;
height: 130px;
box-sizing: border-box;
text-align: center;
color: #fff;
padding-top: 30px;
}
i.user_set {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
}
.user_avatar {
margin-bottom: 10px;
img {
border: 0;
border-radius: 50%;
}
}
</style>
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