hospital-accompaniment-wechat/pages/mine/exchangeOrder.vue

<template>
  <view class="container">
    <u-sticky>
      <view class="head">
        <u-navbar title="我的订单" leftIconColor="#ffffff" titleStyle="color:#fff" :autoBack="true" placeholder></u-navbar>
        <view>
          <view class="searchBox">
            <view>
              <u--input placeholder="请输入商品名称" v-model="searchValue" placeholderClass="placeholderClass" border="none" clearable></u--input>
              <view class="searchBox_btn" @click="goSearch()">
                <text class="iconfont icon-sousuo"></text>
                搜索
              </view>
            </view>
          </view>
          <view class="tabs">
            <view v-for="(v,i) in tabsList" :key="i" :class="{active:tabIndex==i}" @click="tabsClick(i)">{{v.name}}</view>
          </view>
        </view>
      </view>
    </u-sticky>
    <view class="list">
      <view class="item" v-for="(v,i) in list" :key="i" @click="goPath('/pages/mine/exchangeOrderDetails?orderId='+v.orderId)">
        <view class="item_t">订单号： <text>{{v.orderNo}}</text>
          <view class="tag red" :class="{green:v.orderStatus==20,gary:v.orderStatus==30}">{{dealStatus(v.orderStatus)}}</view>
        </view>
        <view class="item_b" v-if="v.orderDetails&&v.orderDetails.length>0">
          <image :src="v.orderDetails[0].productCover" mode="" />
          <view class="item_b_r">
            <view class="item_b_r_title">{{v.orderDetails[0].productTitle}}</view>
            <view class="item_b_r_num">X{{v.orderDetails[0].productNum}}</view>
            <view class="item_b_r_price">
              <view class="item_b_r_price_l">￥{{v.orderDetails[0].productPrice}}</view>
              <view class="item_b_r_price_r">{{v.orderDetails[0].pointsPerProduct}}兑换豆</view>
            </view>
          </view>
        </view>
      </view>
      <empty marginTop="50" v-if="(!list||list.length<=0)&&status!='loading'"></empty>
      <u-loadmore v-else :status="status" />
    </view>
  </view>
</template>

<script>
import { shoporderPage } from '@/api/home';
export default {
  data () {
    return {
      tabsList: [{ name: "全部", value: undefined }, { name: "待发货", value: 10 }, { name: "已发货", value: 20 }, { name: "已完成", value: 30 }],
      tabIndex: 0,
      status: 'loadmore',//加载前值为loadmore，加载中为loading，没有数据为nomore，
      params: {
        pageSize: 10,
        pageNum: 1,
        orderStatus: undefined,//订单状态(0待支付,10待发货,20已发货待收货,30交易完成,100订单已取消),
      },
      list: [],
      searchValue: ""
    }
  },
  onLoad (options) {
    if (options.orderStatus) {
      this.params.orderStatus = options.orderStatus;
      this.tabIndex = this.tabsList.findIndex(v => v.value == options.orderStatus);
    }
    this.getList();
  },
  onPullDownRefresh () {
    this.params.pageNum = 1;
    this.getList()
  },
  onReachBottom () {
    if (this.status == "loadmore") {
      this.params.pageNum++;
      this.getList()
    }
  },
  methods: {
    goSearch () {
      this.params.productTitle = this.searchValue;
      this.params.pageNum = 1;
      this.getList()
    },
    dealStatus (orderStatus) {
      let status = ''
      this.tabsList.map(v => {
        if (v.value == orderStatus) {
          status = v.name
        }
      })
      return status
    },
    tabsClick (index) {
      this.tabIndex = index;
      this.params.pageNum = 1;
      this.params.orderStatus = this.tabsList[index].value;
      this.getList()
    },
    getList () {
      this.status = 'loading';
      shoporderPage(this.params).then(res => {
        // res.rows.map(v => {
        //   v.productDataJosn = JSON.parse(v.productData);
        // })
        if (this.params.pageNum == 1) {
          this.list = res.rows
        } else {
          this.list.push(...res.rows);
        }
        if (this.list.length < res.total) {
          this.status = 'loadmore';
        } else {
          this.status = 'nomore';
        }
      }).finally(()=>{
		  uni.stopPullDownRefresh();
	  })
    },
    goPath (path) {
      uni.navigateTo({
        url: path
      })
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .u-navbar__content,
::v-deep .u-status-bar {
  background-color: transparent !important;
}
.container {
  .head {
    background: linear-gradient(180deg, #c90700, #c90700 100%);
    padding: 20rpx 30rpx 50rpx;
    .searchBox {
      font-family: FZZhunYuan-M02S;
      > view {
        display: flex;
        background: #f5f5f5;
        height: 78rpx;
        border-radius: 40rpx;
        padding-left: 30rpx;
        border: 1px solid #e6e6e6;
      }
      .searchBox_btn {
        font-size: 28rpx;
        width: 136rpx;
        height: 66rpx;
        background: #fb0b03;
        border-radius: 33rpx;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 7rpx;
        .icon-sousuo {
          display: inline-block;
          margin-right: 8rpx;
          font-size: 32rpx;
        }
      }
    }
    .tabs {
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > view {
        font-size: 28rpx;
        color: #fae6e6;
      }
      .active {
        font-family: FZCuYuan-M03;
        position: relative;
        &::after {
          content: "";
          display: block;
          width: 100%;
          height: 4rpx;
          background: #ffffff;
          border-radius: 2rpx;
          position: absolute;
          left: 0;
          bottom: -15rpx;
        }
      }
    }
  }
}
.list {
  background: #f8f8f8;
  min-height: 70vh;
  padding: 45rpx 30rpx;
  .item {
    background: #ffffff;
    border-radius: 30rpx;
    margin-bottom: 32rpx;
    .item_t {
      font-size: 29rpx;
      color: #1a1a1a;
      font-family: FZCuYuan-M03;
      padding: 50rpx 20rpx 30rpx;
      border-bottom: 1px solid #cccccc;
      position: relative;
      text {
        color: #808080;
        font-family: FZCuYuan-M03;
      }
      .tag {
        width: 136rpx;
        height: 50rpx;
        border-radius: 0rpx 30rpx 0rpx 30rpx;
        font-size: 24rpx;
        line-height: 50rpx;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
      }
      .red {
        background: #ffdbd9;
        color: #fb0b03;
      }
      .green {
        background: #e6ffec;
        color: #00bf02;
      }
      .gary {
        background: #e6e6e6;
        color: #333333;
      }
    }
    .item_b {
      display: flex;
      padding: 30rpx 20rpx 48rpx;
      > image {
        width: 172rpx;
        height: 172rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
        flex-shrink: 0;
      }
      .item_b_r {
        flex-grow: 1;
        .item_b_r_title {
          height: 84rpx;
          font-size: 28rpx;
          color: #1a1a1a;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          line-height: 42rpx;
        }
        .item_b_r_num {
          font-size: 26rpx;
          color: #1a1a1a;
          margin-top: 10rpx;
        }
        .item_b_r_price {
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          .item_b_r_price_l {
            font-size: 26rpx;
            color: #1a1a1a;
          }
          .item_b_r_price_r {
            font-size: 32rpx;
            color: #fb0b03;
            font-family: FZCuYuan-M03;
          }
        }
      }
    }
  }
}
::v-deep .placeholderClass {
  font-family: FZZhunYuan-M02S;
  font-size: 28rpx;
}
</style>