web-base-h5/pages/mine/order/index.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <backIcon></backIcon>
    <view class="index_header">
      <view>{{'我的订单'}}</view>
    </view>
    <!-- <view class="clearFilter" @click="clearFilter">
      清除筛选
    </view> -->
    <view 
      class="shareImg"
      @click="rightOpen"
    >
      <img 
        src="@/static/images/serach_999.png"
        alt=""
      />
    </view>
    <view class="zhan1"></view>
    <view class="con_top">
      <view class="tab">
        <view v-for="(item, index) in orderStatusList"
              :key="index"
              @click="isTab = item.value"
              class="tab_i">
          <view>{{ item.label }}</view>
          <view :class="isTab===item.value?'heng':'heng1'">
          </view>
        </view>
      </view>
      <view class="hui"></view>
    </view>
    <view class="zhan"></view>

    <view v-for="(item, index) in orderLists"
          :key="index"
          class="orderList_i">
      <view @click.stop="getDetails(item)">
        <view class="disFlex atm just mbt10">
          <view class="disFlex atm">
            <view class="quan">{{ item.orderTypeVal }}</view>
            <view class="tit1">{{'订单编号'}}{{ item.orderCode }}</view>
          </view>
          <view class="tit2">
            {{ item.orderStatusVal }}
          </view>
        </view>
        <view v-for="ctem,cndex in item.itemList"
              :key="cndex"
              class="disFlex atm just mbt10">
          <view class="disFlex atm">
            <img :src="ctem.cover"
                 alt="">
            <view class="tit3">
              {{ ctem.productName }}
            </view>
          </view>
          <view style="text-align:right">
            <view class="tit4">
              {{ ctem.price | numberToCurrency | isLocal}}
            </view>
            <view class="tit5">
              x{{ ctem.quantity }}
            </view>
          </view>

        </view>
        <view class="tit1">
          {{'创建时间'}}：{{ item.creationTime }}
        </view>
      </view>
      <view class="xian"></view>
      <view class="disFlex">
        <view style="flex: 1;"></view>
        <view class="disFlex">
          <u-button type="primary"
                    class="lBtn"
                    :plain="true"
                    shape="circle"
                    text="备注"
                    @click="openRemark(item)"
                    v-if="item.remark"
                    color="#999"></u-button>
          <u-button type="primary"
                    v-if="item.orderStatus == 0"
                    class="lBtn"
                    :plain="true"
                    shape="circle"
                    :text="'撤销订单'"
                    @click="cancelPay(item)"
                    color="#999"></u-button>
          <u-button type="primary"
                    v-if="item.orderStatus == 0"
                    shape="circle"
                    @click="goPay(item)"
                    :text="'支付'"
                    color="#E03030"></u-button>
          <u-button type="primary"
                    v-if="item.orderStatus == 3||item.orderStatus == 5"
                    @click="openWl(item)"
                    shape="circle"
                    :text="'查看物流'"
                    color="#E03030"></u-button>
        </view>
      </view>
    </view>
    <view class="timePicker">
      <u-datetime-picker :closeOnClickOverlay="true"
                         @close="dataShow = false"
                         @cancel="dataShow = false"
                         @confirm="getDate"
                         :show="dataShow"
                         v-model="value1"
                         mode="date"></u-datetime-picker>
      <u-datetime-picker :closeOnClickOverlay="true"
                         @close="dataShow1 = false"
                         @cancel="dataShow1 = false"
                         @confirm="getDate1"
                         :show="dataShow1"
                         v-model="value2"
                         mode="date"></u-datetime-picker>
    </view>
    <u-popup class="pop"
             :show="detailsShow"
             closeable
             :round="10"
             mode="center"
             @close="detailsShow= false">
      <view class="pop_a">
        <view class="t_tit">
          {{'订单详情'}}
        </view>
        <view class="pop_t">{{'商品信息'}}</view>
        <view class="xian"></view>
        <view class="orderList_a">
          <view v-for="ctem,cndex in details.itemList"
                :key="cndex"
                class="disFlex atm just mbt10">
            <view class="disFlex just"
                  style="flex:1">
              <img :src="ctem.cover"
                   alt="">
              <view style="flex:1">
                <view class="disFlex atm just">
                  <view class="tit3">
                    {{ ctem.productName }}
                  </view>
                  <view class="tit5">
                    x{{ ctem.quantity }}
                  </view>
                </view>
                <view class="tit4">
                  {{ ctem.price | numberToCurrency | isLocal}}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="disFlex atm just mbt10">
          <view class="tit1">
            {{'订单金额'}}
          </view>
          <view class="tit6">
            {{ details.orderAmount |toThousandthAndKeepDecimal}}
          </view>
        </view>
        <view class="disFlex atm just mbt10">
          <view class="tit1">
            {{'订单业绩'}}(PV)
          </view>
          <view class="tit6">
            {{ details.orderAchieve |toThousandthAndKeepDecimal}}
          </view>
        </view>
        <view class="disFlex atm just mbt10">
          <view class="tit1">
            {{'订单业绩'}}(BV)
          </view>
          <view class="tit6">
            {{ details.orderAssAchieve |toThousandthAndKeepDecimal}}
          </view>
        </view>
        <view class="xian"></view>
        <view class="pop_t mbt10">
          {{'收货人信息'}}
        </view>
        <view class="disFlex atm mbt10 tit6">
          <view>
            {{ details.recName }}
          </view>
          <view>
            {{ details.recPhone }}
          </view>
        </view>
        <view class="mbt10 tit1">
          {{ details.recProvince }} {{ details.recCity }} {{ details.recCounty }} {{ details.address }}
        </view>
      </view>
    </u-popup>
    <u-modal :show="cancleOrder"
             showConfirmButton
             showCancelButton
             :content='content'
             confirmColor='#DE3932'
             @confirm="toCancel"
             @cancel="cancleOrder=false"
             ref="uModal"
             :asyncClose="true"></u-modal>

    <u-modal :show="isRemark"
             showConfirmButton
             :content='remarkEd'
             confirmColor='#DE3932'
             @confirm="isRemark=false"
             ref="uModal"
             :asyncClose="true"></u-modal>
    <view class="contain">
      <u-popup :show="rightShow"
               mode="right"
               @close="rightShow = false"
               :closeOnClickOverlay="false">
        <view class="rightPopup">
          <view class="popup_top">
            <view>{{'筛选'}}</view>
            <view class="top_red"
                  @click="rightShow = false">{{'返回'}}</view>
          </view>
          <view class="typesBox">
            <view class="typeTitle">
              {{'订单编号'}}
            </view>
            <view class="choiceBox">
              <view class="flex_btn">
                <u--input :placeholder="'请输入'"
                          v-model="select.orderCode"
                          border="none"></u--input>
              </view>
            </view>
          </view>
          <view class="typesBox">
            <view class="typeTitle">
              {{'会员编号'}}
            </view>
            <view class="choiceBox">
              <view class="flex_btn">
                <u--input :placeholder="'请输入'"
                          v-model="select.memberCode"
                          border="none"></u--input>
              </view>
            </view>
          </view>
          <view class="typesBox">
            <view class="typeTitle">
              {{'订单类型'}}
            </view>
            <view class="choiceBox1">
              <view class="flex_btn"
                    @click="clickType(item)"
                    v-for="(item,index) in orderTypes"
                    :key="index"
                    :class="select.orderType==item.value?'selectbtn':''">
                {{item.label}}
              </view>

            </view>
          </view>
          <view class="typesBox">
            <view class="typeTitle">
              {{'日期区间'}}
            </view>
            <view class="choiceBox1">
              <view class="flex_btn"
                    style="flex:1"
                    @click="openDate">
                {{select.creationTimeStart?select.creationTimeStart:'开始时间'}}
              </view>
              <view style="color: #666;">
                ——
              </view>
              <view class="flex_btn"
                    style="flex:1"
                    @click="openDate1">
                {{select.creationTimeEnd?select.creationTimeEnd:'结束时间'}}
              </view>
            </view>
          </view>
          <view class="footer">
            <view class="footer_l"
                  @tap="reset">{{'清空筛选条件'}}</view>
            <view class="footer_r"
                  @tap="getDataList(1)">{{'确定'}}</view>
          </view>

        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import backIcon from '@/components/backIcon.vue'
import * as reg from '@/config/regiest'

import * as api from '@/config/order.js'
import { formatMsToDate } from '@/util/index'
export default {
  components: {
    backIcon,
  },
  data() {
    return {
      orderTypes: [],
      rightShow: false,
      remarkEd: '',
      content: '确认取消订单?',
      cancleOrder: false,
      isRemark: false,
      cancelCode: '',
      details: '',
      orderStatusList: [],
      dataShow: false,
      dataShow1: false,
      detailsShow: false,
      value1: Number(new Date()),
      value2: Number(new Date()),
      isTab: -1,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      select: {
        orderType: '',
      },
      orderLists: [],
    }
  },
  watch: {
    isTab(n, o) {
      this.select.orderStatus = n
      this.queryParams.pageNum = 1
      this.orderLists = []
      this.getDataList()
    },
  },
  onLoad(options) {
    if (options.isTab && options.isTab != '') {
      this.isTab = Number(options.isTab)
      this.select.orderStatus = this.isTab
    } else {
      this.isTab = ''
      this.select.orderStatus = this.isTab
    }
    this.getOrderStatus()
    // this.getDataList()
    this.getOrderType()
  },
  onShow() {},
  onReachBottom() {
    this.queryParams.pageNum++
    this.getDataList()
  },
  methods: {
    reset() {
      this.queryParams.pageNum = 1
      this.select = {
        orderType: '',
      }
      this.getDataList()
    },
    clickType(item) {
      this.select.orderType = item.value
    },
    getOrderType() {
      api.orderType().then((res) => {
        res.data.unshift({
          label: '全部',
          value: '',
        })
        this.orderTypes = res.data
      })
    },
    rightOpen() {
      this.rightShow = true
    },
    openWl(item) {
      uni.navigateTo({
        url: '/pages/mine/order/wl?id=' + item.orderCode,
      })
    },
    openRemark(item) {
      this.remarkEd = item.remark
      this.isRemark = true
    },
    goPay(item) {
      let orderItemsParams = []
      item.itemList.forEach((ctem) => {
        if(ctem.waresCode){
          orderItemsParams.push({
          waresCode: ctem.waresCode,
        })
        }
      })
      let checkObj = {
        specialArea: item.orderType,
        orderItemsParams: orderItemsParams,
      }
      api.payCheck(item.orderCode).then((res) => {
        if (res.code == 200) {
          uni.navigateTo({
            url:
              '/pages/pay/index?paramsPost=' +
              JSON.stringify(item) +
              '&businessType=1',
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'success',
            mask: true,
          })
        }
      })
      // uni.navigateTo({
      //   url:
      //     '/pages/pay/index?paramsPost=' +
      //     JSON.stringify(item) +
      //     '&businessType=1',
      // })
    },
    toCancel() {
      api.cancelOrder(this.cancelCode).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: '订单已取消',
            icon: 'none',
            duration: 1500,
          })
          this.queryParams.pageNum = 1
          this.orderLists = []
          this.getDataList()
        }
        this.cancleOrder = false
      })
    },
    cancelPay(val) {
      this.cancelCode = val.orderCode
      this.cancleOrder = true
    },
    getDetails(item) {
      api.orderDetails(item.orderCode).then((res) => {
        this.details = res.data
        this.detailsShow = true
      })
    },
    getDate(e) {
      this.select.creationTimeStart = formatMsToDate(e.value)
      this.dataShow = false
    },
    getDate1(e) {
      this.select.creationTimeEnd = formatMsToDate(e.value)
      this.dataShow1 = false
    },
    openDate() {
      this.dataShow = true
    },
    openDate1() {
      this.dataShow1 = true
    },
    getOrderStatus() {
      api.orderStatus().then((res) => {
        res.data.unshift({
          label: '全部',
          value: '',
        })
        this.orderStatusList = res.data
      })
    },
    getDataList(index) {
      if (index) {
        this.queryParams.pageNum = 1
        this.orderLists = []
      }
      this.rightShow = false
      api
        .orderList(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          this.orderLists = this.orderLists.concat(res.rows)
          this.total = res.total
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.index_header {
  background: #fff;
  font-size: 18px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  width: 100%;
  z-index: 100000000;
}

.shareImg {
  position: fixed;
  margin: 14rpx 24rpx;
  z-index: 1000000000;
  right: 10rpx;
  top: 10rpx;
  img {
    width: 40rpx;
    height: 40rpx;
  }
}
.clearFilter {
  position: fixed;
  top: 28rpx;
  right: 90rpx;
  z-index: 1000000000;
  color: #999;
  font-size: 28rpx;
}

.zhan1 {
  height: 50px;
}

.seach {
  background: #fff;
  overflow: hidden;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-bottom: 2rpx solid #eee;
  .seach_i {
    padding: 0 20rpx;
    border-radius: 34rpx;
    background: #fff;
    flex: 1;
    background: #f5f6f8; // margin-right: 40rpx;
  }
  .seatch_r {
    background: #fb3024;
    border-radius: 50%;
    padding: 8rpx;
    margin-left: 24rpx;
  }
}

.timeSlide {
  display: flex;
  align-items: center;
  padding: 38rpx 26rpx;
  .timeA {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333;
    margin-right: 46rpx;
    border-bottom: 2rpx solid #fff; // padding-bottom: 10rpx;
  }
  .timeB {
    width: 158rpx;
    font-size: 24rpx;
    font-family: Arial;
    font-weight: 400;
    color: #999999;
    margin-right: 46rpx;
    border-bottom: 2rpx solid #eee; // padding-bottom: 10rpx;
    text-align: center;
  }
}

.tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  margin-top: 20rpx;
  margin-bottom: 6rpx;
}

.tab_i {
  // width: 120rpx;
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333; // margin-right: 28rpx;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heng {
  width: 24px;
  height: 2px;
  background: #ed1d25;
  border-radius: 1px 1px 1px 1px;
  margin-top: 4rpx;
}

.heng1 {
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 1px 1px 1px 1px;
  margin-top: 4rpx;
}

.hui {
  height: 10rpx;
  background: #eee;
}

.zhan {
  height: 80rpx;
}

.con_top {
  position: fixed;
  background: #fff;
  width: 100%;
  z-index: 10;
}

.disFlex {
  display: flex;
}

.atm {
  align-items: center;
}

.just {
  justify-content: space-between;
}

.mbt10 {
  margin-bottom: 14rpx;
}

.orderList_i {
  padding: 25rpx;
  border-bottom: 22rpx solid #eee;
  background: #fff;
  img {
    width: 124rpx;
    height: 124rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
  }
}

.orderList_a {
  img {
    width: 124rpx;
    height: 124rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
  }
}

.quan {
  background: #3d3d3d;
  border-radius: 15px;
  font-size: 20rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  padding: 5rpx 20rpx;
  margin-right: 10rpx;
}

.tit1 {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}

.tit2 {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #69a35b;
}

.tit3 {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.tit4 {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #fb3024;
}

.tit5 {
  font-size: 22rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}

.tit6 {
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.xian {
  background: #eee;
  height: 2rpx;
  margin: 20rpx 0;
}

.lBtn {
  margin-right: 20rpx;
}

.pop_a {
  padding: 20rpx;
}

.t_tit {
  text-align: center;
  margin-top: 20px;
}

.pop_t {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
}

::v-deep .u-popup__content {
  // width: 90%;
}

.pop ::v-deep .u-popup__content {
  width: 90%;
}

.rightPopup {
  width: 645rpx;
  .popup_top {
    padding: 25rpx;
    background-color: rgba(255, 234, 233, 0.65);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    border-bottom: 2rpx solid #eeeeee;
    .top_red {
      color: #fb3024;
    }
  }
  .typesBox {
    margin-top: 40rpx;
    .typeTitle {
      padding: 0 24rpx;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
    }
    .choiceBox {
      padding: 0 12rpx;
      display: flex;
      margin-top: 17rpx;
      align-items: center; // flex-wrap: wrap;
      .flex_btn {
        background-color: #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14rpx 20rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin: 17rpx 5rpx;
        width: 100%;
      }
      .selectbtn {
        background-color: #c8161d;
        color: #ffffff;
      }
    }
    .choiceBox1 {
      padding: 0 12rpx;
      display: flex;
      margin-top: 17rpx;
      align-items: center;
      flex-wrap: wrap;
      .flex_btn {
        background-color: rgba(255, 234, 233, 0.65);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14rpx 20rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin: 17rpx 5rpx;
      }
      .selectbtn {
        background-color: #c8161d;
        color: #ffffff;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    .footer_l {
      width: 327rpx;
      text-align: center;
      background: #f3f3f3;
      height: 100rpx;
      line-height: 100rpx;
    }
    .footer_r {
      width: 327rpx;
      text-align: center;
      background: #ee252a;
      height: 100rpx;
      line-height: 100rpx;
      color: #fff;
    }
  }
}

.contain ::v-deep .u-transition {
  top: 45px !important;
}

.timePicker ::v-deep .u-transition {
  z-index: 10076 !important;
}
</style>