|
|
@@ -0,0 +1,205 @@
|
|
|
+<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>
|
