123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- <template>
- <view class="order-pages">
- <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="reachBottom">
- <view class="order-list">
- <view v-for="item in list" :key="item.id" class="order-list-item" @click="goView(item)">
- <view>
- <view>{{item.storeName}}</view>
- <view :class="item.orderStatus">{{getOptionName(orderStatusList,item.orderStatus)}}</view>
- </view>
- <view>
- <view class="order-carNo">{{item.customerMobile}}</view>
- <u-icon name="arrow-right" color="#666" size="28"></u-icon>
- </view>
- <view>
- <view class="order-price">
- <!-- 显示用户实付金额,未支付显示0 -->
- <text>¥{{item.payStatus=='PAID' ?item.paymentAmount:0}}</text>
- <text>{{item.payType}}</text>
- </view>
- <view>{{item.orderTime}}</view>
- </view>
- </view>
- </view>
- <u-empty :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
- <view style="padding: 20upx;">
- <u-loadmore v-if="count>pageSize || status=='loading'" :status="status" />
- </view>
- </scroll-view>
- </view>
- </template>
- <script>
- import {getOrderList, orderDetail} from '@/api/order.js'
- export default {
- data() {
- return {
- noDataText: '暂无数据',
- status: 'loading',
- list:[],
- pageNo:1,
- pageSize:10,
- count:0,
- orderStatusList: []
- }
- },
- onShow() {
- this.pageInit()
- },
- methods: {
- pageInit () {
- this.pageNo = 1
- this.count = 0
- this.list = []
- this.orderStatusList = this.$store.state.vuex_payStatus
- this.getList()
- },
- getOptionName (list,val) {
- let p = list.find((item) => {
- return item.code == val
- })
- return p ? p.dispName : '-'
- },
- // 获取订单列表
- getList() {
- this.status = "loading"
- let payTypeList = this.$store.state.vuex_payType
- let params = {
- pageNo: this.pageNo,
- pageSize: this.pageSize
- }
- getOrderList(params).then(res=>{
- this.status = "loadmore"
- if(res.status == 200) {
- let list = res.data.list
- list.map(item => {
- item.payType = item.payType ? this.getOptionName(payTypeList,item.payType) : ''
- })
- this.list = this.list.concat(list)
- this.count = res.data.count
- } else {
- this.list = []
- this.count = 0
- this.noDataText = res.message
- }
- })
- },
- // 查看详情
- goView(item){
- uni.navigateTo({
- url:"/pages/order/orderDetail?id="+item.id
- })
- },
- // 滚动到底部自动加载下页
- reachBottom() {
- if(this.list.length < this.count){
- this.pageNo += 1
- this.getList()
- }else{
- this.status = "nomore"
- }
- }
- },
-
- }
- </script>
- <style lang="scss">
- page{
- height: 100%;
- }
- .order-pages{
- width: 100%;
- height: 100%;
- .scroll-Y {
- width: 100%;
- height: 100%;
- .order-list{
- padding: 25rpx;
- .order-list-item{
- box-shadow: 1rpx 1rpx 5rpx #eee;
- border: 1px solid #eee;
- border-radius: 10rpx;
- margin: 30rpx 0;
- > view{
- padding:20rpx 30rpx;
- display: flex;
- align-items: center;
- border-bottom: 1px dashed #eee;
- &:last-child{
- border: 0;
- }
- >view{
- &:first-child{
- flex-grow: 1;
- }
- &:last-child{
- padding-left: 15rpx;
- }
- }
- .FINISHED{
- color: #00aa00;
- }
- .UN_PAY{
- color: #ff0000;
- }
- .CANCELED{
- color: #7e7b88;
- }
- .PAID{
- color: #00aaff;
- }
- .REFUNDING{
- color: #00557f;
- }
- .REFUNDED{
- color: #005500;
- }
- .order-carNo{
- font-size: 32rpx;
- }
- .order-price{
- text{
- margin-right: 20rpx;
- color: #666;
- &:first-child{
- color: red;
- font-size: 32rpx;
- }
- }
- }
- }
- }
- }
- .u-empty.data-v-6938e513{
- height: 90%;
- }
- }
- }
- </style>
|