web-retail-h5/pages/selfService/cancleOrder/index.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <view v-for="(item, index) in orderLists"
          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="cancleOrder(item)"
                    color="#999"></u-button>
        </view>
      </view>
    </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>
  </view>
</template>

<script>
import * as api from '@/config/order.js'
export default {
  data() {
    return {
      orderTypes: [],
      rightShow: false,
      remarkEd: '',
      content: '确认取消订单?',
      isRemark: false,
      cancelCode: '',
      details: '',
      orderStatusList: [],
      detailsShow: false,
      isTab: -1,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      select: {
        orderType: '',
      },
      orderLists: [],
    }
  },

  onLoad() {
    this.getDataList()
  },
  onShow() {},
  onReachBottom() {
    this.queryParams.pageNum++
    this.getDataList()
  },
  methods: {
    cancleOrder(item) {
      let that = this
      uni.showModal({
        title: '确定撤销订单?',
        success: function (response) {
          if (response.confirm) {
            api.selfRevokeListCheck(item).then((res) => {
              if (res.code == 200) {
                api.selfRevokeOrder(item).then((res) => {
                  if (res.code == 200) {
                    uni.showToast({
                      title: res.msg,
                      icon: 'none',
                      duration: 1500,
                    })
                    that.orderLists = []
                    that.getDataList()
                  } else {
                    uni.showToast({
                      title: res.msg,
                      icon: 'none',
                      duration: 1500,
                    })
                  }
                })
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  duration: 1500,
                })
              }
            })
          }
        },
      })
    },
    getDetails(item) {
      api.orderDetails(item.orderCode).then((res) => {
        this.details = res.data
        this.detailsShow = true
      })
    },
    getOrderStatus() {
      api.orderStatus().then((res) => {
        res.data.unshift({
          label: '全部',
          value: '',
        })
        this.orderStatusList = res.data
      })
    },
    getDataList(index) {
      api.selfRevokeList(Object.assign({}, this.queryParams)).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;
  }
}

.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>