discounts-minapp/my/activityManage/detail.vue

<template>
  <view class="order-detail">

    <view class="content info">
      <view class="order-info">
        <!-- <image class="icon" :src="info.goodsList[0].goodsInfo.goodsPath" mode=""></image> -->
        <view class="shop-info">
          <view class="title">
            {{ info.goodsList[0].goodsInfo.activityName }}
          </view>
          <view class="goods-desc">
            活动时间: {{ info.goodsList[0].goodsInfo.activityStartTime }} 至 {{ info.goodsList[0].goodsInfo.activityEndTime
            }}
          </view>
          <view class="price-box">
            <view class="goods-desc">
              报名人数:
            </view>
            <view class="goods-desc">
              {{ signupDetailList.length || 0 }}人
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="title"> 报名信息 </view>
      <view v-for="(item, index) in signupDetailList">
        <view class="item" v-for=" obj in item">
          <view class="label"> {{ obj.name }} </view>
          <view class="value" v-for="o in obj.value" v-if="!obj.isImg">
            {{ o }}
          </view>
          <view class="value" v-else>
            <image v-for="(img, index) in obj.value" @click="clickImg(obj.value, index)" :src="img" mode="widthFix"
              style="width: 150rpx; height: 150rpx;"></image>
          </view>
        </view>
        <!-- uniapp 下划线 -->
        <u-divider v-if="signupDetailList.length - 1 != index"></u-divider>
      </view>

    </view>


  </view>
</template>

<script>
import { qrCode } from "@/api/order.js";
import { payDetails, queryPayOrder, unRefund } from "@/api/payment.js";
import { getActivityOrdersByOrderNo } from '@/api/activity.js'
export default {
  data() {
    return {
      isVisual: false, //是否是虚拟商品
      codeData: "123",
      show: false,
      isJumped: false,
      loading: false,
      btnLoading: false,
      oldBright: 0,
      info: {
        goodsList: [{ goodsState: "" }],
        payment: {
          paymentWay: "",
          pay: false
        },
        extend: "",
      },
      dataCollectVo: null,
      signupDetail: null,
      signupDetailList: [],
      isNotTime: false,
    };
  },
  watch: {
    // isNotTime(val) {
    // 	if(this.isNotTime){
    // 		this.payDetails(this.info.orderNo)
    // 	}
    // }
  },
  filters: {

  },
  computed: {
  },
  methods: {
    clickImg(list, index) {
      uni.previewImage({
        urls: list,
        current: list[index]
      })
    },
    // 获取订单详情
    payDetails(orderNo) {
      payDetails(orderNo).then((res) => {
        this.info = res.content;
        this.$forceUpdate()
        // 查询报名的人数信息
        // getOrderDetail()
        getActivityOrdersByOrderNo({
          orderNo: orderNo,
        }).then(({ content }) => {
          const { list, dataCollectVo } = content;
          try {

            this.signupDetail = list.map(e => e.signupDetail);
            // 报名信息
            this.signupDetailList = this.signupDetail.map(e => {
              const list = JSON.parse(e);
              console.log('list', list);
              return list.map(e => {
                // 判断是否为附件
                let type = e.hasOwnProperty('uploadType') && !!e.uploadType ? true : false;
                return {
                  name: e.dataName,
                  value: e.content,
                  isImg: type
                }
              })
            })
            console.log('报名信息', this.signupDetail);
            // 表单模板数据
            this.dataCollectVo = dataCollectVo.data;
            this.$forceUpdate()
          } catch (error) {
            uni.showToast({
              title: "获取报名信息失败。",
              icon: "error",
            });
          }

        })



      });
    },

  },
  onReady() { },
  onLoad(options) {
    this.info.orderNo = options.id;
  },
  onShow() {
    this.payDetails(this.info.orderNo);
  },
  created() {
    // this.info = JSON.parse(uni.getStorageSync('order'))
  },
};
</script>

<style lang="scss">
.order-detail {
  background: #f9f9f9;
  min-height: 100vh;

  // padding-bottom: 100rpx;
  .status-box {
    padding: 24rpx 24rpx 4rpx;
    display: flex;
    justify-content: space-between;

    .text-box {
      color: #181818;

      .status {
        font-weight: bold;
        font-size: 32rpx;
        display: flex;

        .u-count-down__text {
          color: #ff4d3a !important;
        }
      }

      .notice {
        font-size: 24rpx;
        margin-top: 20rpx;
      }
    }
  }

  .progress {
    .progress-title {
      font-weight: 600;
      font-size: 32rpx;
      color: #181818;
    }

    .progress-desc {
      font-weight: 300;
      font-size: 24rpx;
      color: #aaaaaa;
      margin-top: 15rpx;
    }
  }

  .shop-box {
    width: 690rpx;
    // margin: 0 30rpx;
    // padding: 24rpx 24rpx 30rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-top: -30rpx;
    box-sizing: border-box;

    .shop-name {
      font-weight: 600;
      font-size: 32rpx;
      color: #181818;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .address {
      font-weight: 300;
      font-size: 24rpx;
      color: #aaaaaa;
      margin-top: 20rpx;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .black {
    color: #222222 !important;
  }

  .red {
    color: red !important;
  }

  .fs28 {
    font-size: 28rpx !important;
    font-weight: bold;
  }

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

    .left {
      .title {
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
      }

      .codeNum {
        font-weight: 300;
        font-size: 24rpx;
        color: #aaaaaa;
        margin-top: 15rpx;
      }
    }

    .code-btn {
      display: flex;
      align-items: center;
      font-weight: 300;
      font-size: 24rpx;
      color: #aaaaaa;

      .jiantou {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .input-box {
    margin: 20rpx 30rpx;
    padding: 28rpx 24rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .label {
      color: #222;
      font-size: 28rpx;
    }

    .value {
      font-size: 28rpx;
      color: #aaaaaa;
    }
  }

  .input-box-address {
    margin: 20rpx 30rpx;
    padding: 28rpx 24rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;

    .value {
      color: #222;
      font-size: 28rpx;
    }

    .label {
      font-size: 28rpx;
      margin: 10rpx 0;
      color: #aaaaaa;
    }
  }


  .content {
    margin: 20rpx 30rpx;
    padding: 28rpx 24rpx;
    border-radius: 16rpx;
    background: #fff;

    .title {
      font-weight: 600;
      font-size: 28rpx;
      color: #222222;
    }

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 28rpx;

      .label {
        color: #222222;
        font-size: 28rpx;
      }

      .value {
        color: #999999;
        font-size: 28rpx;
      }
    }
  }

  .pay-btn {
    position: fixed;
    bottom: 30px;
    left: 4%;
    background: $uni-color-primary;
    width: 688rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 46rpx;
    color: #fff;
    margin-top: 50rpx;
  }

  .refund-box {
    .refund-msg {
      font-weight: 300;
      font-size: 24rpx;
      color: #222222;
      margin-top: 15rpx;
      line-height: 40rpx;
    }
  }

  .apply-box {
    position: relative;

    .label {
      font-weight: 600;
      font-size: 28rpx;
      color: #222222;
    }

    .value {
      color: #999999;
      font-size: 24rpx;
      margin-top: 15rpx;
    }

    .jiantou {
      position: absolute;
      top: 50%;
      right: 24rpx;
      transform: translateY(-50%);
      width: 24rpx;
      height: 24rpx;
    }
  }

  .info {
    .order-info {
      display: flex;

      .icon {
        width: 164rpx;
        height: 164rpx;
        border-radius: 16rpx;
        flex-shrink: 0;
      }

      .shop-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 24rpx;
        flex: 1;
        box-sizing: border-box;

        .title {
          color: #181818;
          font-size: 28rpx;
          width: 450rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

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

          .price {
            color: #181818;
            font-size: 32rpx;
            font-weight: bold;
          }
        }

        .start-time,
        .goods-desc {
          font-size: 24rpx;
          color: #aaaaaa;
          width: 560rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
  }
}
</style>