|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view style="width:100%; height: 316rpx; margin-top: 25rpx; position: relative;">
|
|
|
+ <van-image :src="bgImg" height="316rpx" width="750rpx"></van-image>
|
|
|
+ <view class="class-list" style="position: absolute; top: 124rpx;">
|
|
|
+ <view class="class-list-item" v-for="(item, index) in classList" :key="index" @click="toggleSelect(index,item)">
|
|
|
+ <view style="height: 98rpx; display: flex; justify-content: center; align-items: center;" >
|
|
|
+ <image :style="[getStyles(index)]" :src="item.logo">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view style="" :style="[getStylesText(index)]" >{{ item.cate_name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="shopping-wrapper">
|
|
|
+ <view class="list-item display-flex-content-center mt10" v-for="(item, index) in newsList" :key="index" @click="toDetail(item)">
|
|
|
+ <u--image
|
|
|
+ :showLoading="true"
|
|
|
+ :src="item.cover"
|
|
|
+ width="192rpx"
|
|
|
+ height="136rpx"
|
|
|
+ radius="10rpx"
|
|
|
+ ></u--image>
|
|
|
+ <view class="list-item-content ml10">
|
|
|
+ <view class="list-item-content-title mb10">
|
|
|
+ {{ item.name }}
|
|
|
+ </view>
|
|
|
+ <view class="list-item-content-read display-flex">
|
|
|
+ <view>
|
|
|
+ <u-icon
|
|
|
+ size="14"
|
|
|
+ name="clock"
|
|
|
+ ></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-content-read-text2 ml8 mr15">
|
|
|
+ {{ formattedCreatedAt(item)}}
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <u-icon
|
|
|
+ size="14"
|
|
|
+ name="eye"
|
|
|
+ ></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-content-read-text2 ml8">
|
|
|
+ {{ item.num_read }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {getCatesList, getNewsList} from "@/common/api/news";
|
|
|
+import {getData} from "@/common/api";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ cid: 0,
|
|
|
+ newsList:[],
|
|
|
+ page: 1,
|
|
|
+ pageSize: 9999,
|
|
|
+ classList: [],
|
|
|
+ selectedIndexes: [],
|
|
|
+ bgImg:""
|
|
|
+ };
|
|
|
+ }
|
|
|
+ ,onShow() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ cid(newVal, oldVal) {
|
|
|
+
|
|
|
+ this.getCatesList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData(){
|
|
|
+ let configs = uni.getStorageSync('configs') || {}
|
|
|
+ this.bgImg = configs.cs_fxsh_bgimg
|
|
|
+ getCatesList({pid:6}).then(({ data })=>{
|
|
|
+ console.log("data",data)
|
|
|
+ if ( data){
|
|
|
+ this.classList=data
|
|
|
+ this.cid=data[0].id
|
|
|
+ this.toggleSelect(0,data[0])
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCatesList(){
|
|
|
+ getNewsList(
|
|
|
+ {
|
|
|
+ "cid": this.cid,
|
|
|
+ "page": this.page,
|
|
|
+ "pageSize": this.pageSize
|
|
|
+ }).then(({ data })=>{
|
|
|
+ if ( data.list){
|
|
|
+ this.newsList=data.list
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ formattedCreatedAt(item) {
|
|
|
+ const date = new Date(item.created_at);
|
|
|
+ const month = date.getMonth() + 1; // 月份从0开始,需要加1
|
|
|
+ const day = date.getDate();
|
|
|
+ return `${month}月${day}日`;
|
|
|
+ },
|
|
|
+ getStyles(index) {
|
|
|
+ if (this.selectedIndexes.includes(index)) {
|
|
|
+ return {width: '96rpx', height: '96rpx',borderRadius: '96rpx' ,border: '1rpx solid #C79C53'}
|
|
|
+ }
|
|
|
+ return {width: '88rpx', height: '88rpx',borderRadius: '88rpx'}
|
|
|
+ },
|
|
|
+ getStylesText(index) {
|
|
|
+ if (this.selectedIndexes.includes(index)) {
|
|
|
+ return {color: '#333333',marginTop: "14rpx",fontWeight: 'bold'}
|
|
|
+ }
|
|
|
+ return {color: '#666666',marginTop: "14rpx"}
|
|
|
+ },
|
|
|
+ toggleSelect(index,item) {
|
|
|
+ const indexInSelected = this.selectedIndexes.indexOf(index);
|
|
|
+ if (indexInSelected !== -1) {
|
|
|
+ // this.selectedIndexes.splice(indexInSelected, 1); // 取消选中
|
|
|
+ // this.cid="0";
|
|
|
+ } else {
|
|
|
+ this.selectedIndexes=[]
|
|
|
+ this.selectedIndexes.push(index); // 选中
|
|
|
+ this.cid=item.id;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toDetail(item){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/subPages/fragrantLife/fragrantLifeDetail?id=" + item.id,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.class-list {
|
|
|
+ display: flex;
|
|
|
+ width: 94%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ background-color: transparent;
|
|
|
+ padding: 0 20rpx 0 20rpx;
|
|
|
+ &-item {
|
|
|
+ height: 138rpx;
|
|
|
+ width: 20%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ color: #1d161f;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ transition: width 0.3s, height 0.3s, border 0.3s; // 添加过渡效果
|
|
|
+ }
|
|
|
+}
|
|
|
+.shopping-wrapper {
|
|
|
+ width: 690rpx;
|
|
|
+ margin: 20rpx auto 0rpx;
|
|
|
+ padding: 0rpx 20rpx 178rpx;
|
|
|
+ .list-item {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+ width: calc(100% - 40rpx);
|
|
|
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
|
|
+ padding:20rpx;
|
|
|
+ &-content{
|
|
|
+ width: calc(100% - 210rpx);
|
|
|
+ &-title {
|
|
|
+ width: 100%;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ white-space: nowrap; /* 防止文本换行 */
|
|
|
+ overflow: hidden; /* 隐藏溢出的文本 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ &-read{
|
|
|
+ &-text2{
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 32rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|