Commit 99469e05 by 吴春元

修改

parent ed1df273
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>
\ No newline at end of file
......@@ -4,29 +4,41 @@
<option name="autoReloadType" value="NONE" />
</component>
<component name="ChangeListManager">
<list default="true" id="e6b5ebd7-6e68-4ea7-96fc-deb6be1cf064" name="Changes" comment="" />
<list default="true" id="e6b5ebd7-6e68-4ea7-96fc-deb6be1cf064" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="ProjectColorInfo"><![CDATA[{
"associatedIndex": 4
}]]></component>
<component name="ProjectId" id="2syJVkZnfHDKjALs5jpTkkHI9zT" />
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent">
<property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
<property name="RunOnceActivity.cidr.known.project.marker" value="true" />
<property name="android.project.structure.last.selected" value="SDK Location" />
<property name="android.project.structure.proportion" value="0.15" />
<property name="android.sdk.path" value="$USER_HOME$/Library/Android/sdk" />
<property name="cidr.known.project.marker" value="true" />
<property name="dart.analysis.tool.window.visible" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="settings.editor.selected.configurable" value="AndroidSdkUpdater" />
<property name="show.migrate.to.gradle.popup" value="false" />
<component name="PropertiesComponent"><![CDATA[{
"keyToString": {
"RunOnceActivity.ShowReadmeOnStart": "true",
"kotlin-language-version-configured": "true",
"last_opened_file_path": "/Library/web/git/emergency-app/emergency-app",
"nodejs_package_manager_path": "yarn",
"vue.rearranger.settings.migration": "true"
}
}]]></component>
<component name="SharedIndexes">
<attachedChunks>
<set>
<option value="bundled-jdk-9f38398b9061-39b83d9b5494-intellij.indexing.shared.core-IU-241.15989.150" />
<option value="bundled-js-predefined-1d06a55b98c1-91d5c284f522-JavaScript-IU-241.15989.150" />
</set>
</attachedChunks>
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
<component name="TaskManager">
......@@ -36,7 +48,11 @@
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1739421911220</updated>
<workItem from="1739422927921" duration="93000" />
</task>
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" />
</component>
</project>
\ No newline at end of file
<template>
<view class="tab">
<scroll-view class="scroll-view-content" scroll-x scroll-with-animation :show-scrollbar="false"
:scroll-left="scrollLeft">
<view class="scroll-item-view" :class="scroll ? '' : 'flex-row-left'" id="tab">
<view class="scroll-item" :class="[ index == list.length - 1 ? 'no-right' : '' ]"
:style="{ color: currentIndex == index ? activeColor: '', height: tabHeight, 'line-height': tabHeight, 'font-size': fontSize, width: !scroll ? (100/list.length) + '%' : '', 'margin-right': scroll ? marright : '','font-weight': currentIndex == index ? activeWeight: '', }"
:id="'tab-item-' + index" v-for="(item, index) in list" :key="index" @click="clickTab(item, index)">
{{ item.name }}
</view>
<view class="scroll-tab-bar" :style="[tabBarStyle]"></view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => {
return []
}
},
// 当前活动tab的索引
current: {
type: [Number, String],
default: 0
},
// 菜单底部移动的bar的宽度,单位px
barWidth: {
type: [String, Number],
default: 16
},
// 移动bar的高度
barHeight: {
type: [String, Number],
default: 2
},
barStyle: {
type: Object,
default () {
return {}
}
},
// 移动bar选中颜色
activeBarColor: {
type: String,
default: '#ffffff'
},
// 文字选中颜色
activeColor: {
type: String,
default: '#ffffff'
},
// 过渡动画时长, 单位ms
duration: {
type: [String, Number],
default: 0.5
},
// tab高度
height: {
type: Number,
default: 44
},
// 字体
fontSize: {
type: String,
default: '14px'
},
// 是否滚动,默认是,否则是不滚动,按个数等分宽度
scroll: {
type: Boolean,
default: true
},
// margin-right
marright: {
type: String,
default: '10px'
},
// font-weight
activeWeight: {
type: String,
default: 'normal'
}
},
watch: {
list(n, o) {
// list变动时,重制内部索引,否则可能导致超出数组边界的情况
if (n.length !== o.length) this.currentIndex = 0;
this.$nextTick(() => {
this.init();
});
},
current: {
immediate: true,
handler(nVal, oVal) {
// 视图更新后再执行移动操作
this.$nextTick(() => {
this.currentIndex = nVal;
this.scrollByIndex();
});
}
}
},
computed: {
tabBarStyle: function() {
let style = {
width: this.barWidth + 'px',
height: this.barHeight + 'px',
transform: `translateX(${this.scrollBarLeft}px)`,
'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration}s`,
'border-radius': `${this.barHeight / 2}px`,
'background-color': this.activeBarColor
}
Object.assign(style, this.barStyle)
return style
},
tabHeight() {
return this.height + 'px'
}
},
data() {
return {
scrollLeft: 0,
componentWidth: 0, // tabs组件宽度,单位为px
parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
tabItemRectInfo: [],
currentIndex: 0,
barFirstTimeMove: true
};
},
mounted() {
this.init()
},
methods: {
init() {
console.log("#init")
this.$nextTick(() => {
uni.createSelectorQuery().in(this).select(`#tab`).fields({
size: true,
rect: true
}, data => {
console.log("#tab-data:", data)
this.parentLeft = data.left;
// tabs组件的宽度
this.componentWidth = data.width;
}).exec();
this.getTabItemRect()
})
},
getTabItemRect() {
console.log("getTabItemRect")
let query = uni.createSelectorQuery().in(this);
for (let i = 0; i < this.list.length; i++) {
// 只要size和rect两个参数
query.select(`#tab-item-${i}`).fields({
size: true,
rect: true
});
}
query.exec((data) => {
console.log("#data:", data)
this.tabItemRectInfo = data
this.scrollByIndex()
})
},
scrollByIndex() {
let tabInfo = this.tabItemRectInfo[this.currentIndex]
if (!tabInfo) return
// 活动tab的宽度
let tabWidth = tabInfo.width
let offsetLeft = tabInfo.left - this.parentLeft
// 将活动的tabs-item移动到屏幕正中间,实际上是对scroll-view的移动
let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2
this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft;
// 计算当前活跃item到组件左边的距离
let left = tabInfo.left + tabInfo.width / 2 - this.parentLeft
this.scrollBarLeft = left - this.barWidth / 2;
if (this.barFirstTimeMove == true) {
setTimeout(() => {
this.barFirstTimeMove = false;
}, 100)
}
},
clickTab(item, index) {
// 点击当前活动tab,不触发事件
if (index == this.currentIndex) return
this.currentIndex = index
this.$emit('tabItemClick', item, index)
this.scrollByIndex()
}
}
}
</script>
<style lang="scss" scoped>
.tab {
height: 50px;
}
scroll-view {
box-sizing: border-box;
height: 100%;
}
::v-deep ::-webkit-scrollbar {
display: none
}
/* #ifndef APP-NVUE */
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
/* #endif */
/* #ifdef H5 */
// 通过样式穿透,隐藏H5下,scroll-view下的滚动条
scroll-view ::v-deep ::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
/* #endif */
.scroll-view-content {
white-space: nowrap;
width: 100%;
position: relative;
.scroll-item-view {
width: 100%;
white-space: nowrap;
position: relative;
}
.scroll-item {
position: relative;
padding: 0 10px;
display: inline-block;
text-align: center;
color: rgba(255, 255, 255, 0.7);
}
.mar-r-38 {
margin-right: 10px;
}
.no-right {
margin: 0;
}
.scroll-tab-bar {
position: absolute;
bottom: 0;
z-index: 10;
}
}
</style>
\ No newline at end of file
......@@ -11,7 +11,7 @@
"url": "git+https://github.com/sonofmagic/uni-app-vue3-tailwind-hbuilder-template.git"
},
"keywords": [],
"author": "",
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/sonofmagic/uni-app-vue3-tailwind-hbuilder-template/issues"
......
......@@ -85,6 +85,7 @@
//获取首页轮播图
function getLbtList(pageSize : number, pageNo : number) {
const datas = {
contentDisplay: "0",
contentType: yjjblbt,
pageSize: pageSize,
pageNo: pageNo,
......@@ -106,6 +107,7 @@
//获取首页轮播图
function getRdList(pageSize : number, pageNo : number) {
const datas = {
contentDisplay: "0",
contentType: rdxw,
pageSize: pageSize,
pageNo: pageNo,
......@@ -126,6 +128,7 @@
//获取首页轮播图
function getSxList(pageSize : number, pageNo : number) {
const datas = {
contentDisplay: "0",
contentType: sxxw,
pageSize: pageSize,
pageNo: pageNo,
......@@ -147,6 +150,7 @@
//获取首页轮播图
function getTyList(pageSize : number, pageNo : number) {
const datas = {
contentDisplay: "0",
contentType: tyxw,
pageSize: pageSize,
pageNo: pageNo,
......@@ -182,7 +186,7 @@
//详情页面
function goToDetails(item : any) {
if (item.contentOutLink) {
if (item.contentOutLink) {
uni.navigateTo({
url: '/pages/web/index?webUrl=' + item.contentOutLink,
});
......
......@@ -6,7 +6,7 @@
<view class="news-list">
<view v-for="(news, index) in dataList" :key="index" class="news-card" @click="goToDetails(news)">
<view class="news-content">
<image class="news-image" :src="news.image" mode="aspectFill" />
<image v-if="news.image" class="news-image" :src="news.image" mode="aspectFill" />
<view class="news-info">
<text class="news-title">{{ news.contentTitle }}</text>
<text class="news-date">{{ news.contentDatetime }}</text>
......@@ -20,7 +20,7 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';
import { getNewsList } from "@/network/api/news.js";
import { yjjblbt, rdxw, tyxw, sxxw, tzgg, qwfb, pyzq, zjjd, flfg, baseImageUrl } from "@/network/config.js";
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
......@@ -34,9 +34,9 @@
empty: {
tip: '~ 暂无相关数据 ~', // 提示
}
}
}
const props = defineProps({
dataValue: String,
categoryId: Number,
});
//总条数
const total = ref(0);
......@@ -57,11 +57,18 @@
dataList.value = []// 先置空列表,显示加载进度
getMescroll().resetUpScroll() // 再刷新列表数据
}
//categoryId变化时,重置列表数据
watch(() => props.categoryId, (newVal, oldVal) => {
dataList.value = [];
getMescroll().resetUpScroll();
})
//获取新闻热点列表
function getList(isDown : boolean, mescroll : any, pageSize : number, pageNo : number) {
const datas = {
contentType: props.dataValue,
contentDisplay: "0",
categoryId: props.categoryId,
pageSize: pageSize,
pageNo: pageNo,
};
......
<template>
<view class="app-container flex flex-col">
<view class="nav-bar fixed w-full top-0 z-50">
<view class="tab-container">
<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
:class="{'tab-active': activeTab === index}" @click="changeTabs(index)">
{{ tab.categoryTitle }}
<!-- <scroll-view scroll-x="true" class="tab-scroll">
<view class="tab-container">
<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
:class="{'tab-active': activeTab === index}" @click="changeTabs(index,tab)">
{{ tab.categoryTitle }}
</view>
</view>
</scroll-view> -->
<view class="tab-content">
<tabsTop :list="tabList" @tabItemClick="itemClick" activeWeight='600'></tabsTop>
</view>
</view>
<view class="flex-1 h-0">
<all-list class="h-full" v-if="activeTab == 0" :dataValue="qwfb"></all-list>
<all-list class="h-full" :categoryId="categoryId"></all-list>
<!-- <all-list class="h-full" v-if="activeTab == 0" :dataValue="qwfb"></all-list>
<all-list class="h-full" v-if="activeTab == 1" :dataValue="pyzq"></all-list>
<all-list class="h-full" v-if="activeTab == 2" :dataValue="zjjd"></all-list>
<all-list class="h-full" v-if="activeTab == 3" :dataValue="flfg"></all-list>
<dt-list class="h-full" v-if="activeTab == 4" :dataValue="dtsy"></dt-list>
<dt-list class="h-full" v-if="activeTab == 4" :dataValue="dtsy"></dt-list> -->
</view>
</view>
</template>
......@@ -26,16 +34,13 @@
import dtList from './dt-list/dt-list.vue';
import { yjjblbt, rdxw, tyxw, sxxw, tzgg, qwfb, pyzq, zjjd, flfg, dtsy, sxhlwlhpypt, baseImageUrl } from "@/network/config.js";
import { getTab } from '@/network/api/news';
import tabsTop from '@/components/yixuan-tabs/yixuan-tabs.vue'
const activeTab = ref(0);
// const tabs = [
// '权威发布',
// '辟谣专区',
// '专家解读',
// '法律法规',
// '读图识谣'
// ];
const categoryId = ref();
const tabs = ref([]);
const tabList = ref([]);
getTab(sxhlwlhpypt).then((res) => {
console.log(res);
......@@ -46,38 +51,31 @@
const filterData = data.filter(
(item) =>
item.categoryTitle !== "轮播图" &&
item.categoryTitle !== "山西互联网联合辟谣平台"&&
item.categoryTitle !== "山西互联网联合辟谣平台" &&
item.categoryTitle !== "首页"
);
categoryId.value = filterData[0].id;
tabs.value = filterData;
// categoryId.value = data[0].id;
// tabs.value = data;
//为tabList添加name属性
tabList.value = filterData.map((item : any) => {
return {
name: item.categoryTitle,
id: item.id
};
});
});
function itemClick(item : any, index : number) {
categoryId.value = item.id;
activeTab.value = index;
};
function changeTabs(index : number) {
switch (index) {
case 0: {
activeTab.value = 0;
break
}
case 1: {
activeTab.value = 1;
break
}
case 2: {
activeTab.value = 2;
break
}
case 3: {
activeTab.value = 3;
break
}
case 4: {
activeTab.value = 4;
break
}
}
}
// function changeTabs(index : number, tab : number) {
// categoryId.value = tab.id;
// activeTab.value = index;
// }
</script>
<style>
......@@ -85,10 +83,23 @@
height: 100%;
}
.tab-content {
width: 100%;
}
.tab-scroll {
overflow-x: auto;
/* 允许水平滚动 */
white-space: nowrap;
/* 防止选项卡换行 */
}
.app-container {
width: 750rpx;
min-height: 100%;
background-color: #f5f5f5;
display: flex;
/* 使用Flexbox布局 */
}
.nav-bar {
......@@ -101,8 +112,8 @@
.tab-container {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
/* justify-content: space-around; */
/* align-items: center; */
}
.tab-item {
......@@ -111,6 +122,10 @@
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
transition: all 0.3s;
flex-shrink: 0;
/* 防止选项卡缩小 */
margin-right: 10px;
/* 选项卡之间的间距 */
}
.tab-active {
......
......@@ -33,7 +33,7 @@
</view>
<view class="message-list">
<view v-for="item in hotList" :key="item.id" class="message-item" @click="goToDetails(item.id)">
<text class="title">{{ item.title }}</text>
<text class="title line-clamp-2">{{ item.title }}</text>
<view class="message-info">
<text class="date">{{ item.contentDatetime }}</text>
<text
......@@ -147,7 +147,6 @@
url: '/pages_wm/modules/submit/index',
});
}
</script>
<style>
page {
......@@ -336,6 +335,10 @@
font-size: 14px;
font-weight: 500;
flex: 1;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.department {
......@@ -348,6 +351,11 @@
color: #4b5563;
margin-bottom: 16rpx;
display: block;
overflow: hidden;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.status-tag {
......
......@@ -2,19 +2,23 @@
<view class="app-container flex flex-col">
<view class="nav-bar fixed w-full top-0 z-50">
<view class="tab-container">
<!-- <view class="tab-container">
<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
:class="{'tab-active': activeTab === index}" @click="changeTabs(index)">
:class="{'tab-active': activeTab === index}" @click="changeTabs(index,tab)">
{{ tab.categoryTitle }}
</view>
</view> -->
<view class="tab-content">
<tabsTop :list="tabList" @tabItemClick="itemClick" activeWeight='600'></tabsTop>
</view>
</view>
<view class="flex-1 h-0">
<news-list class="h-full" v-if="activeTab == 0" :dataValue="rdxw"></news-list>
<news-list class="h-full" v-if="activeTab == 1" :dataValue="sxxw"></news-list>
<!-- <news-list class="h-full" v-if="activeTab == 0" :dataValue="rdxw"></news-list> -->
<news-list class="h-full" :categoryId="categoryId"></news-list>
<!-- <news-list class="h-full" v-if="activeTab == 1" :dataValue="sxxw"></news-list>
<news-list class="h-full" v-if="activeTab == 2" :dataValue="tyxw"></news-list>
<tz-list class="h-full" v-if="activeTab == 3" :dataValue="tzgg"></tz-list>
<tz-list class="h-full" v-if="activeTab == 3" :dataValue="tzgg"></tz-list> -->
</view>
</view>
......@@ -27,46 +31,56 @@
import tzList from './tz-list/tz-list.vue';
import { yjjblbt, rdxw, tyxw, sxxw, tzgg, tyshlwyjzhhjbzx, baseImageUrl } from "@/network/config.js";
import { getTab } from '@/network/api/news';
const activeTab = ref(0);
// const tabs = [
// '新闻热点',
// '山西新闻',
// '太原新闻',
// '通知公告'
// ];
import tabsTop from '@/components/yixuan-tabs/yixuan-tabs.vue'
const activeTab = ref(0);
const categoryId = ref();
const tabs = ref([]);
const tabList = ref([]);
getTab(tyshlwyjzhhjbzx).then((res) => {
console.log(res);
const data = res.data.rows;
// //用data内的categorySort排序
data.sort((a, b) => a.categorySort - b.categorySort);
//将data内categoryTitle等于“权威发布”和“辟谣专区”和“轮播图”的数据过滤不在navItems.value中显示
const filterData = data.filter((item) => item.categoryTitle !== "轮播图" && item.categoryTitle !== "首页");
categoryId.value = filterData[0].id;
tabs.value = filterData;
//为tabList添加name属性
tabList.value = filterData.map((item : any) => {
return {
name: item.categoryTitle,
id: item.id
};
});
});
function changeTabs(index : number) {
switch (index) {
case 0: {
activeTab.value = 0;
break
}
case 1: {
activeTab.value = 1;
break
}
case 2: {
activeTab.value = 2;
break
}
case 3: {
activeTab.value = 3;
break
}
}
}
function itemClick(item : any, index : number) {
categoryId.value = item.id;
activeTab.value = index;
};
// function changeTabs(index : number, tab : any) {
// categoryId.value = tab.id;
// switch (index) {
// case 0: {
// activeTab.value = 0;
// break
// }
// case 1: {
// activeTab.value = 1;
// break
// }
// case 2: {
// activeTab.value = 2;
// break
// }
// case 3: {
// activeTab.value = 3;
// break
// }
// }
// }
</script>
<style scoped>
......
......@@ -6,7 +6,7 @@
<view class="news-count">{{ total }} 条新闻</view>
<view class="news-list">
<view v-for="(item, index) in dataList" :key="index" class="news-item" @click="goToDetails(item)">
<view class="news-image">
<view v-if="item.image" class="news-image">
<image :src="item.image" :alt="item.contentTitle" mode="aspectFill" />
</view>
<view class="news-content">
......@@ -21,7 +21,7 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';
import { getNewsList } from "@/network/api/news.js";
import { yjjblbt, rdxw, tyxw, sxxw, tzgg, baseImageUrl } from "@/network/config.js";
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
......@@ -38,7 +38,7 @@
}
}
const props = defineProps({
dataValue: String,
categoryId: Number,
});
//总条数
const total = ref(0);
......@@ -60,10 +60,17 @@
getMescroll().resetUpScroll() // 再刷新列表数据
}
//categoryId变化时,重置列表数据
watch(() => props.categoryId, (newVal, oldVal) => {
dataList.value = [];
getMescroll().resetUpScroll();
})
//获取新闻热点列表
function getList(isDown : boolean, mescroll : any, pageSize : number, pageNo : number) {
const datas = {
contentType: props.dataValue,
contentDisplay: "0",
categoryId: props.categoryId,
pageSize: pageSize,
pageNo: pageNo,
};
......
......@@ -87,6 +87,7 @@
//获取相关列表
function getNewsLists() {
const datas = {
contentDisplay: "0",
contentType: getContentType(),
pageSize: 5,
pageNo: 1,
......
......@@ -10,17 +10,17 @@
:class="['reply-status', detail.replyStatus === '1' ? 'replied' : 'pending']">{{ detail.replyStatus == "1" ? "已回复" : "未回复" }}</text>
<!-- <text :class="detail.replyStatus == '1'
?'status-tag':'status-tag-red'">{{ detail.replyStatus == "1" ? "已回复" : "未回复" }}</text> -->
<text class="info-text">留言人: {{ detail.name }}</text>
<text class="info-text">留言人: ***{{'&nbsp;'}}</text>
<text class="divider">|</text>
<text class="info-text">{{ detail.contentDatetime }}</text>
<text class="info-text">{{detail.contentDatetime}}</text>
</view>
<!-- 诉求内容 -->
<view class="content-section">
<text class="section-title">问题内容:</text>
<rich-text class="description" :nodes="detail.content"></rich-text>
<text class="description">{{detail.content}}</text>
<!-- <textarea class="textarea" fixed disabled auto-height :value="detail.content"></textarea> -->
</view>
<!-- 附件列表 -->
<!-- <view :v-if="attachments.length>0" class="attachments-section">
<text class="section-title">相关附件</text>
......@@ -37,7 +37,10 @@
<!-- 官方回复 -->
<view class="reply-card" v-if="detail.reply != null">
<text class="section-title2">官方回复</text>
<rich-text class="reply-text" :nodes="detail.reply"></rich-text>
<text class="description" >{{detail.reply}}</text>
<!-- <rich-text class="reply-text" :nodes="detail.reply"></rich-text> -->
<!-- <textarea class="textarea" fixed disabled auto-height :value="detail.reply"></textarea> -->
</view>
</view>
</view>
......@@ -55,7 +58,7 @@
detail.value = response.data;
});
});
const attachments = ref([
{
name: '现场照片1.jpeg',
......@@ -192,9 +195,9 @@
}
.info-text {
color: #666666;
font-size: 14px;
margin-left: 20rpx;
color: #999;
font-size: 25rpx;
margin-left: 10rpx;
}
.divider {
......@@ -227,7 +230,7 @@
.description {
color: #333333;
font-size: 14px;
line-height: 1.6;
line-height: 1.8;
margin-bottom: 30rpx;
display: block;
}
......@@ -314,19 +317,20 @@
overflow: hidden;
text-overflow: ellipsis;
}
.reply-status {
font-size: 12px;
padding: 2rpx 16rpx;
border-radius: 32rpx;
display: inline-block;
}
.replied {
color: #52C41A;
background-color: #F6FFED;
border: 1px solid #B7EB8F;
}
.pending {
color: #FAAD14;
background-color: #FFF7E6;
......
......@@ -18,7 +18,7 @@
<text class="message-title">{{ item.title }}</text>
<text class="message-content">{{ item.content }}</text>
<view class="message-footer">
<text class="message-time">留言人:{{ item.name }} {{ item.contentDatetime }}</text>
<text class="message-time">留言人:*** {{'&nbsp;&nbsp;'+ item.contentDatetime }}</text>
<text
:class="['reply-status', item.replyStatus === '1' ? 'replied' : 'pending']">{{ item.replyStatus == "1" ? "已回复" : "未回复" }}</text>
</view>
......@@ -77,7 +77,7 @@
}
function search(word) {
searchKeyword.value=word;
searchKeyword.value = word;
dataList.value = []; // 先清空列表,显示加载进度
getMescroll().resetUpScroll();
}
......@@ -148,6 +148,13 @@
font-weight: 500;
color: #333333;
margin-bottom: 16rpx;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.message-content {
......@@ -156,12 +163,20 @@
color: #666666;
line-height: 1.6;
margin-bottom: 20rpx;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.message-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.message-time {
......
......@@ -7,20 +7,20 @@
<uni-search-bar v-model="searchKeyword" placeholder="搜索回复内容" :radius="16" bgColor="#ffffff"
cancelButton="none" @input="search" :focus="true"></uni-search-bar>
</view>
<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
<mescroll-body @init="mescrollInit" top="0" @down="downCallback" :up="upOption" @up="upCallback"
@emptyclick="emptyClick" :down="downOption">
<view class="container h-full">
<view class="news-count">{{ total }} 条新闻</view>
<view class="message-list">
<view v-for="(item, index) in dataList" :key="index" class="message-card"
@click="goToDetails(item.id)">
<text class="message-title">{{ item.title }}</text>
<text class="message-content">{{ item.content }}</text>
<view class="message-footer">
<text class="message-time">留言人:{{ item.name }} {{ item.contentDatetime }}</text>
<text class="message-time">留言人:***{{'&nbsp;&nbsp;'+item.contentDatetime }}</text>
<text
:class="['reply-status', item.replyStatus === '1' ? 'replied' : 'pending']">{{ item.replyStatus == "1" ? "已回复" : "未回复" }}</text>
</view>
......@@ -46,35 +46,35 @@
tip: '~ 暂无相关数据 ~'
}
}
//总条数
const total = ref(0);
const dataList = ref([]);
const searchKeyword = ref('');
//下拉刷新
const downCallback = (mescroll : any) => {
dataList.value = [];
mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
}
//上拉加载
const upCallback = (mescroll : any) => {
getList(false, mescroll, mescroll.size, mescroll.num);
}
//点击空布局按钮的回调
const emptyClick = () => {
dataList.value = []// 先置空列表,显示加载进度
getMescroll().resetUpScroll() // 再刷新列表数据
}
function search(word) {
searchKeyword.value=word;
searchKeyword.value = word;
dataList.value = []; // 先清空列表,显示加载进度
getMescroll().resetUpScroll();
}
//获取新闻热点列表
function getList(isDown : boolean, mescroll : any, pageSize : number, pageNo : number) {
const datas = {
......@@ -140,6 +140,13 @@
font-weight: 500;
color: #333333;
margin-bottom: 16rpx;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.message-content {
......@@ -148,6 +155,13 @@
color: #666666;
line-height: 1.6;
margin-bottom: 20rpx;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.message-footer {
......@@ -179,6 +193,7 @@
background-color: #FFF7E6;
border: 1px solid #FFE58F;
}
.news-count {
text-align: center;
font-size: 13px;
......
......@@ -3,16 +3,16 @@
<view class="container">
<!-- 基础表单校验 -->
<uni-forms ref="valiForm" :rules="rules" :model="form">
<uni-forms-item label-width="80px" label="姓名" required name="name">
<uni-forms-item label-width="78px" label="姓名" required name="name">
<uni-easyinput v-model="form.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label-width="80px" label="留言标题" required name="title">
<uni-forms-item label-width="78px" label="留言标题" required name="title">
<uni-easyinput v-model="form.title" placeholder="请输入留言标题" />
</uni-forms-item>
<uni-forms-item label-width="80px" label="留言内容" required name="content">
<uni-forms-item label-width="78px" label="留言内容" required name="content">
<uni-easyinput type="textarea" v-model="form.content" placeholder="请输入留言内容" />
</uni-forms-item>
<uni-forms-item label-width="80px" label="联系电话" required name="phoneNumber">
<uni-forms-item label-width="78px" label="联系电话" required name="phoneNumber">
<uni-easyinput v-model="form.phoneNumber" placeholder="请输入联系电话" />
</uni-forms-item>
<!-- <view class="form-item">
......
......@@ -87,6 +87,7 @@
//获取相关列表
function getNewsLists() {
const datas = {
contentDisplay: "0",
contentType: getContentType(),
pageSize: 5,
pageNo: 1,
......
## 1.2.3(2024-04-02)
- 修复 修复在微信小程序下inactiveColor失效bug
## 1.2.2(2024-03-28)
- 修复 在vue2下:style动态绑定导致编译失败的bug
## 1.2.1(2024-03-20)
- 新增 inActiveColor属性,可供配置未激活时的颜色
## 1.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-segmented-control](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
## 1.1.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.5(2021-05-12)
- 新增 项目示例地址
## 1.0.4(2021-02-05)
- 调整为uni_modules目录规范
<template>
<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
:style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
<view v-for="(item, index) in values" :class="[styleType === 'text' ? '' : 'segmented-control__item--button',
index === 0 && styleType === 'button' ? 'segmented-control__item--button--first' : '',
index === values.length - 1 && styleType === 'button' ? 'segmented-control__item--button--last':'']" :key="index"
:style="{backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : styleType === 'button' ?inActiveColor:'transparent', borderColor: index === currentIndex && styleType === 'text' || styleType === 'button' ? activeColor : inActiveColor}"
class="segmented-control__item" @click="_onClick(index)">
<view>
<text
:style="{color:index === currentIndex? styleType === 'text'? activeColor: '#fff': styleType === 'text'? '#000': activeColor}"
class="segmented-control__text"
:class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
</view>
</view>
</view>
</template>
<script>
/**
* SegmentedControl 分段器
* @description 用作不同视图的显示
* @tutorial https://ext.dcloud.net.cn/plugin?id=54
* @property {Number} current 当前选中的tab索引值,从0计数
* @property {String} styleType = [button|text] 分段器样式类型
* @value button 按钮类型
* @value text 文字类型
* @property {String} activeColor 选中的标签背景色与边框颜色
* @property {String} inActiveColor 未选中的标签背景色与边框颜色
* @property {Array} values 选项数组
* @event {Function} clickItem 组件触发点击事件时触发,e={currentIndex}
*/
export default {
name: 'UniSegmentedControl',
emits: ['clickItem'],
props: {
current: {
type: Number,
default: 0
},
values: {
type: Array,
default () {
return []
}
},
activeColor: {
type: String,
default: '#2979FF'
},
inActiveColor: {
type: String,
default: 'transparent'
},
styleType: {
type: String,
default: 'button'
}
},
data() {
return {
currentIndex: 0
}
},
watch: {
current(val) {
if (val !== this.currentIndex) {
this.currentIndex = val
}
}
},
computed: {},
created() {
this.currentIndex = this.current
},
methods: {
_onClick(index) {
if (this.currentIndex !== index) {
this.currentIndex = index
this.$emit('clickItem', {
currentIndex: index
})
}
}
}
}
</script>
<style lang="scss" scoped>
.segmented-control {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
height: 36px;
overflow: hidden;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.segmented-control__item {
/* #ifndef APP-NVUE */
display: inline-flex;
box-sizing: border-box;
/* #endif */
position: relative;
flex: 1;
justify-content: center;
align-items: center;
}
.segmented-control__item--button {
border-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 0;
}
.segmented-control__item--button--first {
border-left-width: 1px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.segmented-control__item--button--last {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.segmented-control__item--text {
border-bottom-style: solid;
border-bottom-width: 2px;
padding: 6px 0;
}
.segmented-control__text {
font-size: 14px;
line-height: 20px;
text-align: center;
}
</style>
{
"id": "uni-segmented-control",
"displayName": "uni-segmented-control 分段器",
"version": "1.2.3",
"description": "分段器由至少 2 个分段控件组成,用作不同视图的显示",
"keywords": [
"uni-ui",
"uniui",
"分段器",
"segement",
"顶部选择"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## SegmentedControl 分段器
> **组件名:uni-segmented-control**
> 代码块: `uSegmentedControl`
用作不同视图的显示
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment