web-base-h5/pages/selfService/updateAdress/updateAdress.vue

<template>
  <view class="content">
    <view class="con_top">
      <view class="seach">
        <view class="seach_i">
          <u--input
            prefixIcon="search"
            v-model="queryParams.orderCode"
            prefixIconStyle="font-size: 22px;color: #909399;height:32px"
            border="none"
            placeholder="请输入订单编号"
            suffixIconStyle="color: #909399"
          ></u--input>
        </view>
        <view class="seatch_r" @click="getDataList">
          <u-icon name="search" size="22" color="#fff"></u-icon>
        </view>
      </view>
    </view>
    <template v-if="orderLists.length > 0">
      <view class="theListbox">
        <view v-for="(item, index) in orderLists" class="orderList_i">
          <view class="list_flex">
            <view class="top_flex">
              <view class="zc_btn">{{ item.orderTypeVal }}</view>
              <view class="code_text"
                >{{ '订单编号' }}：{{ item.orderCode }}</view
              >
            </view>
            <view class="top_status">
              {{ item.orderStatusVal }}
            </view>
          </view>
          <view class="list_flex">
            <view class="center_price">￥{{ item.orderAmount }}</view>
          </view>
          <!-- <view class="list_flex" style="margin-top: 10rpx">
            <view class="top_flex">
              <view class="code_text"
                >{{ '审核状态' }}：{{ item.approveStatusVal }}</view
              >
            </view>
            <view
              v-if="item.approveStatus == 3"
              class="top_status"
              @click="findWhy(item)"
            >
              {{ '驳回原因' }}
            </view>
          </view> -->
          <view class="btm_time">
            {{ '创建时间' }}:{{ item.creationTime }}
          </view>

          <view class="list_btn">
            <view class="sub_btn" @click="updateAdress(item)">
              {{ '修改地址' }}
            </view>
          </view>
          <!-- <view class='line_title'>变更后省/州：{{item.recProvinceVal}}</view>
					<view class='line_title'>变更后市：{{item.recCityVal}}</view>
					<view class='line_title'>变更后区/县：{{item.recCountyVal}}</view>
					<view class='line_title'>变更后详细地址：{{item.recAddress}}</view>
					<view class='line_title'>申请时间：{{item.creationTime}}</view>
					<view class='line_title'>备注：{{item.remark}}</view> -->
        </view>
      </view>
    </template>
    <template v-else>
      <view class="theListbox" style="background-color: #f2f2f2">
        <u-empty mode="list"> </u-empty>
      </view>
    </template>
    <u-popup
      :show="rejectShow"
      closeable
      mode="center"
      round="10"
      @close="rejectShow = false"
      >\
      <view class="popview">
        <view
          class="email_neir"
          @click="clickhtml(rejectContent)"
          v-html="rejectContent"
        >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import * as sel from '@/config/selfService.js'
import { formatMsToDate } from '@/util/index'
export default {
  data() {
    return {
      dataShow: false,
      value1: '',

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        orderCode: '',
      },
      orderLists: [],
      timeIndex: 0,
      rejectShow: false,
      rejectContent: '',
    }
  },
  watch: {},
  onShow() {
    this.getDataList()
  },
  methods: {
    findWhy(item) {
      this.rejectContent = item.rejectMsg
      this.rejectShow = true
    },
    clickhtml(content) {
      this.rejectShow = false
      // 在组件挂载后，调用handleImageClick方法预览第一张图片
      const parser = new DOMParser()
      const doc = parser.parseFromString(content, 'text/html')
      const imgElements = doc.getElementsByTagName('img')
      if (imgElements.length > 0) {
        const firstImageUrl = imgElements[0].src
        this.handleImageClick(firstImageUrl, content)
      }
    },
    handleImageClick(url, content) {
      uni.previewImage({
        urls: this.getUrls(content),
        current: url,
      })
    },
    getUrls(content) {
      const parser = new DOMParser()
      const doc = parser.parseFromString(content, 'text/html')
      const imgElements = doc.getElementsByTagName('img')
      const urls = []
      for (let i = 0; i < imgElements.length; i++) {
        urls.push(imgElements[i].src)
      }
      return urls
    },
    getDataList() {
      // 显示全局loading
      uni.showLoading({
        title: '加载中...',
        mask: true,
      })

      sel
        .getOderSelfList(this.queryParams)
        .then(res => {
          this.orderLists = res.rows
        })
        .catch(err => {
          console.error('获取订单列表失败:', err)
          // 可以添加错误提示
          uni.showToast({
            title: '获取数据失败',
            icon: 'none',
          })
        })
        .finally(() => {
          // 确保无论成功还是失败都隐藏loading
          uni.hideLoading()
        })
    },
    updateAdress(item) {
      let params = item
      console.log(
        '%c [ params ]-144',
        'font-size:13px; background:#f37aa1; color:#ffbee5;',
        params
      )
      // let queryString = Object.keys(params).map(key =>
      // 	`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`).join('&')
      // let paramsString = encodeURIComponent(JSON.stringify(params))

      uni.navigateTo({
        url:
          '/pages/selfService/updateAdress/addAdress?obj=' +
          JSON.stringify(params),
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep img {
  max-width: 100%;
  height: auto;
}
.popview {
  padding: 24rpx;
  width: 620rpx;
  .email_neir {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
  }
}

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

.seach {
  background: #fff;
  overflow: hidden;
  height: 100rpx;
  padding: 0 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;
  }
}

.theListbox {
  padding-top: 90rpx;

  .orderList_i {
    background-color: #ffffff;
    padding: 22rpx;
    margin-top: 22rpx;

    .list_flex {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .top_flex {
        display: flex;
        align-items: center;

        .zc_btn {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #3d3d3d;
          color: #ffffff;
          border-radius: 30rpx;
          padding: 7rpx 23rpx;
          margin-right: 8rpx;
          font-size: 20rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
        }

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

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

      .center_left {
        display: flex;
        align-items: center;

        .center_img {
          width: 124rpx;
          height: 124rpx;
          border-radius: 15rpx;
          margin-right: 20rpx;
        }

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

      .center_right {
        .center_price {
          font-size: 32rpx;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #f82c1a;
        }

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

    .center_price {
      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #f82c1a;
      margin-top: 20rpx;
    }

    .btm_time {
      padding: 20rpx 0;
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      border-bottom: 1rpx solid #eeeeee;
    }

    .list_btn {
      margin-top: 20rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .sub_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30rpx;
        background: #005bac;
        color: #ffffff;
        padding: 15rpx 28rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
      }
    }

    .list_top {
      // background-color: pink;
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      font-weight: 400;
      color: #333333;
      border-bottom: 2rpx solid #eeeeee;
    }

    .line_title {
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      margin: 18rpx 0;
    }
  }
}
</style>