scancode-miro/pages/hexiao/ywy/patrol_detail.vue

<template>
  <view class="page-container">
    <view class="details-card">

      <view class="detail-item">
        <text class="detail-label">店铺名称</text>
        <text class="detail-value">{{ patrolDetails.storeName }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">店主名称</text>
        <text class="detail-value">{{ patrolDetails.ownerName }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">联系方式</text>
        <text class="detail-value">{{ patrolDetails.contact }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">店铺地址</text>
        <text class="detail-value">{{ patrolDetails.address }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">巡店时间</text>
        <text class="detail-value">{{ patrolDetails.patrolTime }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">巡店人</text>
        <text class="detail-value">{{ patrolDetails.patrolPersonName }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">巡店人账号</text>
        <text class="detail-value">{{ patrolDetails.patrolPersonAccount }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">巡店奖励</text>
        <text class="detail-value reward">{{ patrolDetails.reward }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">备注</text>
        <text class="detail-value">{{ patrolDetails.remarks }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">门头照片</text>
        <image
            class="detail-image"
            :src="patrolDetails.storefrontPhoto"
            mode="aspectFill"
            @click="previewImage(patrolDetails.storefrontPhoto)"
        ></image>
      </view>

      <view class="detail-item no-border">
        <text class="detail-label">陈列照片</text>
        <image v-for="item in patrolDetails.displayPhoto"
            class="detail-image"
            :src="item"
            mode="aspectFill"
            @click="previewImage(item)"
        ></image>
      </view>

    </view>
  </view>
</template>

<script>
import {getXundianDetail} from "@/api/hexiao";

export default {
  data() {
    return {
      // 巡店详情数据
      patrolDetails: {
        storeName: '',
        ownerName: '',
        contact: '',
        address: '',
        patrolTime: '',
        patrolPersonName: '',
        patrolPersonAccount: '',
        reward: '',
        remarks: '',
        storefrontPhoto: '',
        displayPhoto: ''
      }
    };
  },
  onLoad(options) {
    // 页面加载时，会传入一个记录的ID
    console.log('加载的巡店记录ID:', options.id);
    // 根据ID从服务器获取详情
    this.fetchPatrolDetails(options.id);
  },
  methods: {
    // 模拟从API获取数据
    fetchPatrolDetails(recordId) {
      uni.showLoading({ title: '加载中...' });

      getXundianDetail(recordId).then(res=>{
        let data = res.data;
            this.patrolDetails = {
                  storeName: data.storeName,
                  ownerName: data.storeOwnerName,
                  contact: data.salesmanAccount,
                  address: data.storeAddress,
                  patrolTime: data.getTime,
                  patrolPersonName: data.salesmanName,
                  patrolPersonAccount: data.salesmanAccount,
                  reward: data.point == null?"0":data.point,
                  remarks: data.remark,
                  // 请替换为您真实的图片URL
                  storefrontPhoto: data.storeImg,
                  displayPhoto: data.displayImg
                };
        uni.hideLoading();
      })
      // 模拟网络请求
      // setTimeout(() => {
      //   this.patrolDetails = {
      //     storeName: '超吉炫长沙旗舰店',
      //     ownerName: '张家辉',
      //     contact: '15975236548',
      //     address: '湖南省长沙市洪山区珞喻路195号',
      //     patrolTime: '2025-08-01',
      //     patrolPersonName: '李达康',
      //     patrolPersonAccount: '15264587523',
      //     reward: '10积分',
      //     remarks: '暂无',
      //     // 请替换为您真实的图片URL
      //     storefrontPhoto: 'https://img.js.design/assets/img/661643632cd9549b6b7f9191.jpg',
      //     displayPhoto: 'https://img.js.design/assets/img/66164394c295b2d18361110a.jpg',
      //   };
      //
      // }, 500);
    },

    // 图片预览
    previewImage(currentUrl) {
      const urls = [this.patrolDetails.storefrontPhoto, this.patrolDetails.displayPhoto].filter(url => url);
      uni.previewImage({
        urls: urls,
        current: currentUrl
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #e4efff, #f5f6fa 40%);
  padding: 30rpx;
  box-sizing: border-box;
}

.details-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 0 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.detail-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &.no-border {
    border-bottom: none;
  }
}

.detail-label {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.detail-value {
  display: block;
  margin-top: 15rpx;
  font-size: 30rpx;
  color: #333;
  font-weight: 500;

  &.reward {
    color: #ff9900;
  }
}

.detail-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  margin-top: 15rpx;
}
</style>