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
-
48pages/order/apply-refund.vue
-
7pages/order/confirm-order.vue
-
37pages/order/index.vue
-
119pages/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