10 changed files with 523 additions and 83 deletions
-
10colorui/main.css
-
6common/api.js
-
4components/self-line/self-line.vue
-
7pages.json
-
50pages/order/apply-details.vue
-
50pages/order/apply-refund.vue
-
7pages/order/confirm-order.vue
-
37pages/order/index.vue
-
121pages/order/order-details.vue
-
314pages/shopOrder/index.vue
@ -0,0 +1,314 @@ |
|||
<template> |
|||
<view> |
|||
<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 --> |
|||
<view class="padding-lr" style="margin-bottom: 10rpx;margin-top: 20rpx;"> |
|||
<me-tabs v-model="current" :tabs="tab_list" :fixed="true" @change="change"></me-tabs> |
|||
<!-- <u-tabs :list="tab_list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs> --> |
|||
</view> |
|||
<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tab.id"> |
|||
<view class="flex-direction justify-around list" v-for="(item, index) in tab.list" :key="item.id" @tap="goDetails(tabIndex,index)"> |
|||
<view class="lf-row-between"> |
|||
<view class="left" style="position: relative;"> |
|||
<image :src="item.goods.cover" mode=""></image> |
|||
<view class="cu-tag badge tag-self lf-font-28" :style="{'background-color':item.state_text.bg_color,'color':item.state_text.color}">{{item.state_text.text}}</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="lf-line-2 title" style="line-height: 40rpx;">网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 </view> |
|||
<view class="lf-flex tips" style="margin: 0!important;"> |
|||
<text class="progress margin-right-xs">数量</text> |
|||
<text class="bought">x {{item.number}}</text> |
|||
</view> |
|||
<view class="lf-row-between price"> |
|||
<text class="lf-font-bold"> |
|||
<text class="lf-font-24">￥</text> |
|||
<text class="lf-font-42">{{item.selling_price}}</text> |
|||
</text> |
|||
<button v-if="item.state==1" @tap.stop="$routerGo('/pages/order/confirm-order?type=1&goods_id='+item.goods_id+'&goods_specs_id='+item.goods_specs_id +'&order_id='+ item.id)">立即付款</button> |
|||
<button v-if="item.state==2" class="cu-btn bg-green round margin-left-sm" @tap="$routerGo('/pages/order/order-details?orderid='+item.id)">立即使用</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<view class="u-border-top flex justify-between align-center text-center"> |
|||
<view class="text-gray lf-font-28" style="padding: 20rpx;"> |
|||
{{item.created_at_text}} |
|||
</view> |
|||
<view class="text-orange" v-if="item.state==1" style="padding: 20rpx;"> |
|||
{{item.comment_text}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 加载 --> |
|||
<view class="loading-more"> |
|||
<text v-if="tab.list.length" |
|||
:class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text> |
|||
<my-nocontent v-else></my-nocontent> |
|||
</view> |
|||
<!-- 回到顶部 --> |
|||
<u-back-top :scroll-top="pageScrollTop"></u-back-top> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
tab_list: [{ |
|||
name: '全部', |
|||
type: 'all', |
|||
list: [], |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
}, { |
|||
name: '待付款', |
|||
type: 'unpaid', |
|||
list: [], |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
}, { |
|||
name: '待使用', |
|||
type: 'paid', |
|||
list: [], |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
}, |
|||
{ |
|||
name: '已完成', |
|||
type: 'complete', |
|||
list: [], |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
}, |
|||
{ |
|||
name: '售后', |
|||
type: 'after_sales', |
|||
list: [], |
|||
loadingClass: true, |
|||
loadingText: '正在加载中', |
|||
page: 1, |
|||
isPage: true |
|||
} |
|||
], |
|||
current: 0, // tab下表 |
|||
pageSize: 10, |
|||
assetsType: '', //账户类型 |
|||
orderType: [] |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
this.assetsType = e.type |
|||
this.getUserOrder() |
|||
}, |
|||
onShow() { |
|||
let tab_item = this.tab_list[this.current]; |
|||
tab_item.page = 1; |
|||
tab_item.isPage = true; |
|||
tab_item.loadingClass = true; |
|||
tab_item.loadingText = '正在加载中'; |
|||
this.getUserOrder(); |
|||
}, |
|||
methods: { |
|||
// 切换tab |
|||
change(index) { |
|||
this.current = index; |
|||
this.getUserOrder(); |
|||
}, |
|||
goDetails(tabIndex,index) { |
|||
// this.$routerGo('/pages/order/order-details?orderid=55') |
|||
|
|||
console.log(tabIndex,index) |
|||
let item = this.tab_list[tabIndex].list[index] |
|||
if (item.state == 1) { |
|||
this.$routerGo('/pages/order/unpay-details?orderid=' + item.id) |
|||
} else if(item.state == 4){ |
|||
this.$routerGo('/pages/order/apply-details?orderid=' + item.id) |
|||
}else { |
|||
this.$routerGo('/pages/order/order-details?orderid=' + item.id) |
|||
} |
|||
|
|||
}, |
|||
onReachBottom() { |
|||
let tab_item = this.tab_list[this.current]; |
|||
if (tab_item.isPage) { |
|||
tab_item.page = tab_item.page + 1; |
|||
this.getUserOrder(); |
|||
} |
|||
}, |
|||
onPullDownRefresh() { |
|||
let tab_item = this.tab_list[this.current]; |
|||
tab_item.page = 1; |
|||
tab_item.isPage = true; |
|||
tab_item.loadingClass = true; |
|||
tab_item.loadingText = '正在加载中'; |
|||
this.getUserOrder(); |
|||
uni.stopPullDownRefresh() |
|||
}, |
|||
getUserOrder() { |
|||
let per_page = this.pageSize; |
|||
let tab_item = this.tab_list[this.current]; |
|||
this.$http(this.API.API_SHOPORDER, { |
|||
state: this.tab_list[this.current].type, |
|||
page: tab_item.page, |
|||
per_page |
|||
}).then(res => { |
|||
if (res.code == 0) { |
|||
console.log(res) |
|||
if( Object.keys(res.metal_data).length != 0 ) { |
|||
this.$routerGo('/pages/login/index?type=userinfo') |
|||
}else { |
|||
let isPage = res.data.has_more_page; |
|||
tab_item.isPage = isPage; |
|||
if (isPage) { |
|||
tab_item.loadingClass = true; |
|||
tab_item.loadingText = '正在加载中'; |
|||
} else { |
|||
tab_item.loadingClass = false; |
|||
tab_item.loadingText = '没有更多数据啦~'; |
|||
} |
|||
if (tab_item.page == 1) { |
|||
tab_item.list = res.data.items; |
|||
} else { |
|||
tab_item.list.push(...res.data.items); |
|||
} |
|||
} |
|||
} |
|||
|
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
//返回 |
|||
back() { |
|||
if (this.assetsType === 'all2') { |
|||
// #ifdef H5 |
|||
window.history.go(-2) |
|||
// #endif |
|||
|
|||
// #ifndef H5 |
|||
uni.navigateBack({ |
|||
delta: 2 |
|||
}); |
|||
// #endif |
|||
} else { |
|||
// #ifdef H5 |
|||
window.history.go(-1) |
|||
// #endif |
|||
|
|||
// #ifndef H5 |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}); |
|||
// #endif |
|||
} |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.tag-self { |
|||
position: absolute!important; |
|||
top: 0!important; |
|||
border-radius: 20rpx 0 20rpx 0!important; |
|||
width: max-content; |
|||
height: 32rpx!important; |
|||
} |
|||
.title { |
|||
font-size: 28rpx; |
|||
color: $u-content-color; |
|||
height: 80rpx; |
|||
} |
|||
|
|||
// tab |
|||
.ctab { |
|||
width: 100%; |
|||
margin: 20rpx 0 0rpx 0rpx; |
|||
padding: 0 22rpx; |
|||
} |
|||
|
|||
// 商品列表 |
|||
.com { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
|
|||
.list { |
|||
border-radius: 10rpx; |
|||
overflow: hidden; |
|||
margin: 20rpx 32rpx; |
|||
background-color: #FFFFFF; |
|||
// box-shadow: 0 0 10px 5px #e5e5e5; |
|||
box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1); |
|||
align-items: flex-start; |
|||
|
|||
.left { |
|||
overflow: hidden; |
|||
|
|||
image { |
|||
width: 186rpx; |
|||
height: 186rpx; |
|||
margin: 20rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
overflow: hidden; |
|||
width: 64%; |
|||
|
|||
.title { |
|||
margin: 0rpx 20rpx 10rpx 0; |
|||
color: #222222; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.tips { |
|||
margin: 16rpx 0; |
|||
overflow: hidden; |
|||
|
|||
.u-line-progress { |
|||
width: 112rpx; |
|||
overflow: hidden; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.progress { |
|||
color: #777777; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.bought { |
|||
color: #777777; |
|||
font-size: 24rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.price { |
|||
overflow: hidden; |
|||
color: #FF0000; |
|||
margin-top: 10rpx; |
|||
button { |
|||
width: 176rpx; |
|||
height: 60rpx; |
|||
background: #FE9903; |
|||
border-radius: 15px; |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
margin: 0rpx 20rpx 0rpx 20rpx; |
|||
border: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue