fx:售后进度页面、全部评价页面图片添加预览模式
parent
43d23ed9b7
commit
a76fd9ee03
|
@ -9,28 +9,7 @@
|
|||
></su-tabs>
|
||||
<view class="ss-m-t-20">
|
||||
<view class="list-item" v-for="item in state.pagination.data" :key="item">
|
||||
<view class="ss-flex ss-row-between">
|
||||
<view class="ss-flex">
|
||||
<image class="avatar" :src="sheep.$url.static(item.user_avatar)" />
|
||||
<view class="ss-m-l-20 ss-m-r-24 nickname">{{ item.user_nickname }}</view>
|
||||
<view><uni-rate :readonly="true" size="16" :value="item.level" /></view>
|
||||
</view>
|
||||
<view class="create-time">{{ item.create_time?.substring(0, 11) }}</view>
|
||||
</view>
|
||||
<view class="ss-m-t-20 content-title">{{ item.content }}</view>
|
||||
<view class="ss-m-t-40" v-if="item.images?.length">
|
||||
<scroll-view class="scroll-box" scroll-x scroll-anchoring enable-flex>
|
||||
<view class="ss-flex">
|
||||
<view v-for="i in item.images" :key="i" class="ss-m-r-20"
|
||||
><image class="content-img" :src="sheep.$url.static(i)" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- <view class="ss-flex ss-row-right">
|
||||
<text class="cicon-info-o"></text>
|
||||
<view class="ss-m-l-8 foot-title">举报</view>
|
||||
</view> -->
|
||||
<comment-item :item="item"></comment-item>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
|
||||
|
@ -50,6 +29,7 @@
|
|||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import commentItem from '../components/detail/comment-item.vue';
|
||||
const state = reactive({
|
||||
list: [],
|
||||
type: [],
|
||||
|
@ -62,6 +42,7 @@
|
|||
},
|
||||
commentId: 0,
|
||||
code: 'all',
|
||||
commentImages: [],
|
||||
});
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
|
@ -98,6 +79,11 @@
|
|||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
state.pagination.data.forEach((item) => {
|
||||
item.images.forEach((image) => {
|
||||
state.commentImages.push(sheep.$url.cdn(image));
|
||||
});
|
||||
});
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
|
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
|
||||
<text class="cicon-title" :class="index === 0 ? 'activity-color' : ''"></text>
|
||||
<view v-if="data.length - 1 != index" class="line"></view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="text">{{ item.log_type_text }}</view>
|
||||
<su-parse class="richtext" :content="item.content"></su-parse>
|
||||
<view class="" v-if="item.images?.length">
|
||||
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
|
||||
<view class="ss-flex">
|
||||
<view v-for="i in item.images" :key="i" class="ss-m-r-20">
|
||||
<su-image
|
||||
class="content-img"
|
||||
isPreview
|
||||
:previewList="state.commentImages"
|
||||
:current="index"
|
||||
:src="i"
|
||||
:height="120"
|
||||
:width="120"
|
||||
mode="aspectFit"
|
||||
></su-image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="date">{{ item.create_time }}</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { reactive } from 'vue';
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
const state = reactive({
|
||||
commentImages: [],
|
||||
});
|
||||
props.item.images?.forEach((i) => {
|
||||
state.commentImages.push(sheep.$url.cdn(i));
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.log-icon {
|
||||
height: inherit;
|
||||
.cicon-title {
|
||||
font-size: 30rpx;
|
||||
color: #dfdfdf;
|
||||
}
|
||||
.activity-color {
|
||||
color: #60bd45;
|
||||
}
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #dfdfdf;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.richtext {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
margin: 20rpx 0 0 0;
|
||||
}
|
||||
.content-img {
|
||||
margin-top: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.date {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
</style>
|
|
@ -3,24 +3,7 @@
|
|||
<s-layout title="售后进度">
|
||||
<view class="log-box">
|
||||
<view class="log-content-box ss-flex" v-for="(item, index) in state.info" :key="item.title">
|
||||
<view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
|
||||
<text class="cicon-title" :class="index === 0 ? 'activity-color' : ''"></text>
|
||||
<view v-if="state.info.length - 1 != index" class="line"></view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="text">{{ item.log_type_text }}</view>
|
||||
<su-parse class="richtext" :content="item.content"></su-parse>
|
||||
<view class="" v-if="item.images?.length">
|
||||
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
|
||||
<view class="ss-flex">
|
||||
<view v-for="i in item.images" :key="i" class="ss-m-r-20"
|
||||
><image class="content-img" :src="sheep.$url.static(i)" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="date">{{ item.create_time }}</view>
|
||||
</view>
|
||||
<log-item :item="item" :index="index" :data="state.info"></log-item>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
|
@ -30,6 +13,7 @@
|
|||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import logItem from './log-item.vue';
|
||||
|
||||
const state = reactive({
|
||||
active: 1,
|
||||
|
@ -69,44 +53,5 @@
|
|||
.log-content-box {
|
||||
align-items: stretch;
|
||||
}
|
||||
.log-icon {
|
||||
height: inherit;
|
||||
.cicon-title {
|
||||
font-size: 30rpx;
|
||||
color: #dfdfdf;
|
||||
}
|
||||
.activity-color {
|
||||
color: #60bd45;
|
||||
}
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #dfdfdf;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.richtext {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
margin: 20rpx 0 0 0;
|
||||
}
|
||||
.content-img {
|
||||
margin-top: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.date {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue