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="#005BAC"
          ></u-button>
          <u-button
            type="primary"
            v-if="item.orderStatus == 3 || item.orderStatus == 5"
            @click="openWl(item)"
            shape="circle"
            :text="'查看物流'"
            color="#005BAC"
          ></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="tit3"
                  style="color: #999; font-size: 24rpx; margin-top: 6rpx"
                >
                  {{ ctem.specsName }}
                </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"> {{ '订单业绩' }} </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
        console.log(this.details, '....this.details')
      })
    },
    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: 499;
}

.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: #005bac;
    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: #005bac;
  border-radius: 1px 1px 1px 1px;
  margin-top: 4rpx;
}

.heng1 {
  width: 24px;
  height: 2px;
  background: transparent;
  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: #f82c1a;
}

.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(176, 196, 222, 0.45);
    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: #005bac;
    }
  }
  .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: #005bac;
        color: #ffffff;
      }
    }
    .choiceBox1 {
      padding: 0 12rpx;
      display: flex;
      margin-top: 17rpx;
      align-items: center;
      flex-wrap: wrap;
      .flex_btn {
        background-color: rgba(176, 196, 222, 0.45);
        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: #005bac;
        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: #005bac;
      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>