补丁

api/specialService/financialInfrastructure.js

@@ -1,19 +1,18 @@
-import upload from '@/utils/upload'
 import request from '@/utils/request'
 
 // 查询金融基建列表
-export function listServer(query) {
+export function list(query) {
   return request({
-    url: '/high/server/list',
+    url: '/high/server/financialInfrastructureList',
     method: 'get',
     params: query
   })
 }
 
 // 查询金融基建详情
-export function getServer(id,type) {
+export function getDetails(id) {
   return request({
-    url: '/high/server/' + id + '/' + type,
-    method: 'get'
+    url: '/high/server/financialInfrastructureDetails/' + id,
+    method: 'get',
   })
 }

api/specialService/legalService.js

@@ -1,19 +1,18 @@
-import upload from '@/utils/upload'
 import request from '@/utils/request'
 
 // 查询法律服务列表
-export function listServer(query) {
+export function list(query) {
   return request({
-    url: '/high/server/list',
+    url: '/high/server/legalServiceList',
     method: 'get',
     params: query
   })
 }
 
 // 查询法律服务详情
-export function getServer(id,type) {
+export function getDetails(id) {
   return request({
-    url: '/high/server/' + id + '/' + type,
-    method: 'get'
+    url: '/high/server/legalServiceDetails/' + id,
+    method: 'get',
   })
 }

api/specialService/loveAtVillage.js

@@ -1,19 +1,18 @@
-import upload from '@/utils/upload'
 import request from '@/utils/request'
 
 // 查询乡村婚恋列表
-export function listServer(query) {
+export function list(query) {
   return request({
-    url: '/high/server/list',
+    url: '/high/server/loveAtVillageList',
     method: 'get',
     params: query
   })
 }
 
 // 查询乡村婚恋详情
-export function getServer(id,type) {
+export function getDetails(id) {
   return request({
-    url: '/high/server/' + id + '/' + type,
-    method: 'get'
+    url: '/high/server/loveAtVillageDetails/' + id,
+    method: 'get',
   })
 }

pages.json

@@ -7,7 +7,7 @@
 			}
 		},
 		{
-			"path": "pages/highFrequencyService/cooperative/addCooperative",
+			"path": "pages/highServer/cooperative/addCooperative",
 			"style": {
 				"usingComponents": {},
 				"navigationBarBackgroundColor": "#07c160",
@@ -16,7 +16,7 @@
 			}
 		},
 		{
-			"path": "pages/highFrequencyService/cooperative/cooperative",
+			"path": "pages/highServer/cooperative/cooperative",
 			"style": {
 				"usingComponents": {},
 				"navigationBarBackgroundColor": "#07c160",
@@ -79,7 +79,7 @@
 			}
 		},
 		{
-			"path": "pages/highFrequencyService/cooperative/details",
+			"path": "pages/highServer/cooperative/details",
 			"style": {
 				"usingComponents": {},
 				"navigationBarBackgroundColor": "#07c160",

pages/highFrequencyService/cooperative/cooperative.css

@@ -1,128 +0,0 @@
-/* pages/wenda/wenda.wxss */
-.wendaFL {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin: 30rpx 0 0 0;
-}
-.wendaFL li {
-    width: 48%;
-    height: 168rpx;
-    position: relative;
-}
-.cooperativeBox{
-    position: relative;
-    left: 30rpx;
-    top: 10rpx;
-    z-index: 0;
-    width: 800rpx;
-    height: 100rpx;
-}
-.cooperativeImgBox{
-    position: relative;
-    left: 0;
-    top: 0;
-    z-index: 0;
-    width: 330rpx;
-    height: 100rpx;
-}
-.cooperativeImg{
-    position: relative;
-    left: 0;
-    top: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.lbBj {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-}
-.wendaFL li h2 {
-    font-size: 36rpx;
-    position: absolute;
-    left: 30rpx;
-    top: 40rpx;
-    z-index: 1;
-    font-weight: bold;
-}
-.wendaFL li span {
-    font-size: 30rpx;
-    position: absolute;
-    left: 30rpx;
-    top: 88rpx;
-    z-index: 1;
-}
-.wendaFL li.sanNong {
-    color: #0d9970;
-}
-.wendaFL li.jiuYe {
-    color: #1e8fb4;
-}
-.wendaFL li.faLv {
-    color: #1e5dab;
-}
-.wendaFL li.jiuZhen {
-    color: #4a700d;
-}
-/* 列表 */
-.rnwdList {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin: 20rpx 0;
-}
-.list {
-    width: 79%;
-}
-.lb {
-    background: #0d9970;
-    color: #fff;
-    font-size: 24rpx;
-    width: 12%;
-    text-align: center;
-    padding: 2rpx 0;
-    line-height: 40rpx;
-    height: 40rpx;
-    border-radius: 10rpx;
-}
-.listTitle {
-    font-size: 32rpx;
-    color: #333;
-    line-height: 40rpx;
-}
-.jlSj {
-    height: 40rpx;
-    display: flex;
-    justify-content: space-between;
-    font-size: 24rpx;
-    margin: 20rpx 0 0 0;
-}
-.jf {
-    color: #07c160;
-}
-.icon-jifen {
-    font-size: 28rpx;
-    color: #07c160;
-    margin: 0 0 0 6rpx;
-}
-.ck {
-    color: #c4c4c4;
-}
-.icon-pinglun,
-.icon-chakan,
-.icon-shoucang {
-    font-size: 28rpx;
-    margin: 0 6rpx 0 20rpx;
-    color: #c4c4c4;
-}
-.icon-xiangyoujiantou {
-    font-size: 30rpx;
-    color: #c4c4c4;
-    line-height: 60rpx;
-}

pages/highFrequencyService/cooperative/cooperative.vue

@@ -1,119 +0,0 @@
-<template>
-    <view class="container">
-        <!-- 供销社列表 -->
-        <view class="rnwdList" v-for="(item, index) in list" :key="index">
-            <view @tap="goDetails(item.id)" class="cooperativeImgBox">
-                <image :src="loadImgSrc('/snbj.png')" class="cooperativeImg"></image>
-                <!--<image :src="loadImgSrc(item.imgUrl)" class="cooperativeImg"></image>-->
-            </view>
-            <view @tap="goDetails(item.id)" class="cooperativeBox">
-                <view class="list">
-                    <span class="listTitle">{{ item.name }}</span>
-                    <view class="jlSj">
-                        <span class="jf">
-                            {{ item.address?item.address:'' }}
-                        </span>
-                    </view>
-                </view>
-            </view>
-            <em class="iconfont icon-xiangyoujiantou"></em>
-        </view>
-        <uni-load-more :status="status" :content-text="contentText"/>
-        <uni-fab ref="fab" horizontal="right" vertical="bottom"
-                 @fabClick="handleAdd()"/>
-    </view>
-</template>
-
-<script>
-import { getList, getDetails } from '@/api/highFrequencyService/cooperative/cooperative';
-export default {
-    data() {
-        return {
-            // 查询参数
-            queryParams: {
-                pageNum: 1,
-                pageSize: 15,
-                id: null,
-                status:"1",
-            },
-            // 加载更多
-            status: 'more',
-            contentText: {
-                contentdown: '查看更多',
-                contentrefresh: '加载中',
-                contentnomore: '------------------我是有底线的------------------'
-            },
-            // 列表数据
-            list: [
-                {
-                    name:"-",
-                    address:"-",
-                    chargePeople:"-",
-                    chargePhone:"-",
-                    imgUrl:"-"
-                }
-            ],
-        };
-    },
-    onPullDownRefresh() {
-        this.queryParams.pageNum = 1;
-        this.list = [];
-        this.getList()
-    },
-    //上拉加载
-    onReachBottom(){
-        let pageNum = this.queryParams.pageNum;
-        let pageSize = this.queryParams.pageSize;
-        let total = this.total;
-        if(pageNum*pageSize >= total){
-            uni.showToast({
-                title:'暂无更多数据'
-            });
-            return;
-        } else {
-            this.queryParams.pageNum += 1;
-            this.getList()
-        }
-    }
-    /**
-     * 生命周期函数--监听页面加载
-     */,
-    onLoad(options) {
-        this.getList();
-    },
-    methods: {
-        /** 新增按钮操作 */
-        handleAdd(){
-            uni.navigateTo({
-                url: '../highFrequencyService/cooperative/addCooperative'
-            });
-        },
-        /** 查询列表 */
-        getList(type) {
-            this.loading = true;
-            getList().then(response => {
-                if (this.queryParams.pageNum === 1) {
-                    this.list = response.rows;
-                } else {
-                    this.list = this.list.concat(response.rows);
-                }
-                // 判断是否还有更多数据
-                if (response.rows.length < this.queryParams.pageSize) {
-                    this.status = 'noMore'; // 没有更多数据
-                } else {
-                    this.status = 'more'; // 还有更多数据
-                }
-            });
-        },
-        /** 查询详情 */
-        goDetails(id) {
-            uni.navigateTo({
-                url: '/pages/highFrequencyService/cooperative/details?id='+id
-            });
-        }
-    }
-};
-</script>
-<style>
-@import './cooperative.css';
-</style>

pages/index/index.vue

@@ -467,7 +467,7 @@
 
 			goCooperative() {
 				uni.navigateTo({
-					url: '/pages/highFrequencyService/cooperative/cooperative'
+					url: '/pages/highServer/cooperative/cooperative'
 				});
 			},
 			goLoveAtVillage() {

pages/specialService/financialInfrastructure/details.css

@@ -1,36 +1,159 @@
-.container{
-    padding: 0;
+.title {
+    font-size: 44rpx;
+    text-align: center;
+    line-height: 70rpx;
+    color: #333;
+    margin: 30rpx 0;
+}
+.wenzhangLy {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 14rpx 0;
+}
+.txTime {
+    display: flex;
+    flex-direction: row;
+}
+.txTime image {
+    width: 80rpx;
+    height: 80rpx;
+}
+.time {
+    display: flex;
+    flex-direction: column;
+    padding: 10rpx 0 0 8px;
+}
+.time p {
+    font-size: 28rpx;
+    color: #9c9c9c;
+}
+.time span {
+    font-size: 24rpx;
+    color: #c4c4c4;
 }
 
-.cooperativeImgBox{
-    position: static;
-    left: 0;
-    top: 0;
-    z-index: 0;
+.jf {
+    color: #07c160;
+    line-height: 80rpx;
+    font-size: 24rpx;
+}
+.icon-jifen {
+    font-size: 28rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+.ck {
+    color: #c4c4c4;
+    font-size: 28rpx;
+}
+.icon-pinglun,
+.icon-chakan,
+.ck .icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+    line-height: 0;
+}
+.wenzhangCont {
+    font-size: 34rpx;
+    margin: 30rpx 0;
+}
+.wenzhangCont image {
     width: 100%;
-    height: 480rpx;
+    height: 320rpx;
+    margin: 20rpx auto;
 }
-.cooperativeImg{
-    position: static;
-    left: 0;
-    top: 0;
-    z-index: 0;
+.pinglunTj {
     width: 100%;
-    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx 0;
 }
-
-.itemBox {
+.pinglunTitle {
+    font-size: 34rpx;
+    color: #2e2e2e;
+    font-weight: 600;
+}
+.pinglunTitle em {
+    font-size: 34rpx;
+    color: #9b9b9b;
+    font-weight: normal;
+    margin: 0 0 0 10rpx;
+}
+.pinglunList {
     width: 100%;
-    font-size: 50rpx;
+    padding: 0 0 120rpx 0;
 }
-.itemBox:nth-child(2n-1){
-    background: #ccc;
+.pinglunList li {
+    margin: 20rpx 0;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 20rpx 0;
+    display: flex;
+    flex-direction: column;
 }
-.itemBox:nth-child(2n){
-    background: #ddd;
+.plListcont {
+    font-size: 30rpx;
+    color: #696868;
+    margin: 20rpx 0;
 }
-
-.item{
-    /*width: 100%;*/
-    /*background-color: #57f5a1;*/
+.pinglunList li button {
+    width: 80%;
+    border-radius: 10rpx;
+    background: #07c160;
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: normal;
+    margin: 16rpx auto;
+}
+.fabiaoPl {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    height: 112rpx;
+    background: #e8e8e8;
+    box-shadow: 0rpx 0rpx 16rpx #999;
+}
+.shuRu {
+    width: 72%;
+    display: flex;
+    flex-direction: row;
+    height: 76rpx;
+    background: #e0e0e0;
+    border-radius: 60rpx;
+    margin: 20rpx 0 0 20rpx;
+}
+.shuRu input {
+    line-height: 38px;
+    height: 76rpx;
+    font-size: 30rpx;
+    width: 83%;
+}
+.icon-bianji {
+    font-size: 38rpx;
+    line-height: 76rpx;
+    margin: 0 10rpx 0 20rpx;
+    color: #828181;
+}
+.icon-shoucang {
+    font-size: 50rpx;
+    line-height: 112rpx;
+    color: #828181;
+}
+.fasong {
+    width: 58rpx;
+    height: 58rpx;
+    border-radius: 50rpx;
+    background: #07c160;
+    margin: 26rpx 20rpx 0 10rpx;
+    text-align: center;
+    line-height: 58rpx;
+}
+.icon-fasong {
+    font-size: 40rpx;
+    color: #fff;
 }

pages/specialService/financialInfrastructure/details.vue

@@ -1,50 +1,231 @@
 <template>
-    <view class="container">
-        <!-- 详情 -->
-        <view class="cooperativeImgBox">
-            <image :src="loadImgSrc('/snbj.png')" class="cooperativeImg"></image>
-        </view>
-        <view class="itemBox">
-            <view class="item">
-                <span>
-                    {{ details.textDetails }}
-                </span>
+    <view>
+        <!-- 金融基建详情 -->
+        <view class="container">
+            <h1 class="title">{{fromData.titleName}}</h1>
+            <view class="wenzhangLy">
+                <!-- 头像昵称 -->
+                <view class="txTime">
+                    <image :src="(detailInfo.headImg!=null)?loadImgSrcLocalhost(detailInfo.headImg):'https://tse4-mm.cn.bing.net/th/id/OIP-C.cYyiJYfTo1SY1cj26FQpAQHaHa?rs=1&pid=ImgDetMain'" style="border-radius: 50px;"></image>
+                    <view class="time">
+                        <p>{{detailInfo.nickName?detailInfo.nickName:'网友'}}</p>
+                        <span>{{ detailInfo.createTime }}</span>
+                    </view>
+                </view>
+            </view>
+            <view class="wenzhangCont article">
+                <view v-html="fromData.textDetails"></view>
+                <view v-for="(item, index) in fromData.pictureList" :key="index">
+                    <image :src="loadImgSrcLocalhost(item)"></image>
+                </view>
             </view>
+            <view class="fengexian"></view>
         </view>
     </view>
 </template>
 
 <script>
-    import { listServer, getServer, delServer, addServer, updateServer } from '@/api/specialService/specialService';
+    import { getDetails } from '@/api/specialService/loveAtVillage.js';
     export default {
         data() {
             return {
-                details: {
-                    titleName: "-",
-                    textDetails: "-",
-                }
-            }
+                parentId: "",
+                fromData: {},
+                content: "",
+                initInfo: {
+                    userId: null,
+                    scoreNum: 0,
+                    wechatName: "微信用户",
+                    name: null,
+                    headImg: null,
+                },
+            };
+        },
+        methods: {
+            // 获取数据
+            getDetails() {
+                getDetails(this.parentId).then(res => {
+                    if (res.code == 200) {
+                        this.fromData = res.data
+                    }
+                })
+            },
+            // getUserInfoByUserId(userId) {
+            // 	getUserInfo(userId).then(res => {
+            // 		this.initInfo = res.data;
+            // 	})
+            // },
         }
         /**
          * 生命周期函数--监听页面加载
-         */,
+         */
+        ,
         onLoad(options) {
-            this.getServer(options.id, options.type);
+            this.parentId = options.id
+            this.getDetails()
         },
-        methods: {
-            /** 详情 */
-            getServer(id, type) {
-                getServer(id, type).then(response => {
-                    let details = response.data;
-                    this.details = details;
-                    wx.setNavigationBarTitle({
-                        title: details.titleName
-                    })
-                });
-            },
-        }
+        /**
+         * 生命周期函数--监听页面初次渲染完成
+         */
+        onReady() {
+            this.userId = getApp().globalData.userId
+            // this.getUserInfoByUserId(this.userId)
+        },
+        /**
+         * 生命周期函数--监听页面显示
+         */
+        onShow() {},
+        /**
+         * 生命周期函数--监听页面隐藏
+         */
+        onHide() {},
+        /**
+         * 生命周期函数--监听页面卸载
+         */
+        onUnload() {},
+        /**
+         * 页面相关事件处理函数--监听用户下拉动作
+         */
+        onPullDownRefresh() {},
+        /**
+         * 页面上拉触底事件的处理函数
+         */
+        onReachBottom() {},
+        /**
+         * 用户点击右上角分享
+         */
+        onShareAppMessage() {},
     };
 </script>
-<style>
+<style lang="scss">
     @import './details.css';
+
+    .collect {
+        .icon-shoucang:before {
+            color: red;
+        }
+    }
+
+    .not-collect {}
+
+    .effectBix {
+        width: 56px;
+        height: 56px;
+        border-radius: 50px;
+        font-family: 'Bebas Neue', cursive;
+        background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+        border: 0;
+        color: #fff;
+        text-align: center;
+        line-height: 56px;
+        outline: transparent;
+        position: absolute;
+        transform: rotate(-30deg);
+        right: 3%;
+        top: -5%;
+    }
+
+    .effectBox,
+    .effectBox::after {
+        width: 56px;
+        height: 56px;
+        border-radius: 50px;
+        font-size: 16px;
+        font-family: 'Bebas Neue', cursive;
+        background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+        border: 0;
+        color: #fff;
+        opacity: 1;
+        letter-spacing: 3px;
+        text-align: center;
+        line-height: 56px;
+        outline: transparent;
+        position: relative;
+        left: 78%;
+        top: 113%;
+        transform: rotate(-30deg);
+        z-index: 1;
+    }
+
+    .effectBox::after {
+        --slice-0: inset(50% 50% 50% 50%);
+        --slice-1: inset(80% -6px 0 0);
+        --slice-2: inset(50% -6px 30% 0);
+        --slice-3: inset(10% -6px 85% 0);
+        --slice-4: inset(40% -6px 43% 0);
+        --slice-5: inset(80% -6px 5% 0);
+
+        content: 'AVAILABLE NOW';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
+        text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
+        clip-path: var(--slice-0);
+    }
+
+    .effectBox:hover::after {
+        animation: 1s glitch;
+        animation-timing-function: steps(2, end);
+    }
+
+    @keyframes glitch {
+        0% {
+            clip-path: var(--slice-1);
+            transform: translate(-20px, -10px);
+        }
+
+        10% {
+            clip-path: var(--slice-3);
+            transform: translate(10px, 10px);
+        }
+
+        20% {
+            clip-path: var(--slice-1);
+            transform: translate(-10px, 10px);
+        }
+
+        30% {
+            clip-path: var(--slice-3);
+            transform: translate(0px, 5px);
+        }
+
+        40% {
+            clip-path: var(--slice-2);
+            transform: translate(-5px, 0px);
+        }
+
+        50% {
+            clip-path: var(--slice-3);
+            transform: translate(5px, 0px);
+        }
+
+        60% {
+            clip-path: var(--slice-4);
+            transform: translate(5px, 10px);
+        }
+
+        70% {
+            clip-path: var(--slice-2);
+            transform: translate(-10px, 10px);
+        }
+
+        80% {
+            clip-path: var(--slice-5);
+            transform: translate(20px, -10px);
+        }
+
+        90% {
+            clip-path: var(--slice-1);
+            transform: translate(-10px, 0px);
+        }
+
+        100% {
+            clip-path: var(--slice-1);
+            transform: translate(0);
+        }
+    }
 </style>

pages/specialService/financialInfrastructure/financialInfrastructure.css

@@ -1,4 +1,3 @@
-/* pages/wenda/wenda.wxss */
 .wendaFL {
     width: 100%;
     display: flex;
@@ -10,31 +9,6 @@
     height: 168rpx;
     position: relative;
 }
-.cooperativeBox{
-    position: relative;
-    left: 30rpx;
-    top: 10rpx;
-    z-index: 0;
-    width: 800rpx;
-    height: 100rpx;
-}
-.cooperativeImgBox{
-    position: relative;
-    left: 0;
-    top: 0;
-    z-index: 0;
-    width: 330rpx;
-    height: 100rpx;
-}
-.cooperativeImg{
-    position: relative;
-    left: 0;
-    top: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-}
-
 .lbBj {
     position: absolute;
     left: 0;
@@ -73,12 +47,12 @@
 /* 列表 */
 .rnwdList {
     width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin: 20rpx 0;
+    height: 100%;
 }
 .list {
-    width: 79%;
+    border-bottom: solid 2rpx #f6f6f6;
+    padding: 10rpx 0;
+    width: 100%;
 }
 .lb {
     background: #0d9970;
@@ -96,24 +70,11 @@
     color: #333;
     line-height: 40rpx;
 }
-.jlSj {
-    height: 40rpx;
-    display: flex;
-    justify-content: space-between;
-    font-size: 24rpx;
-    margin: 20rpx 0 0 0;
-}
-.jf {
-    color: #07c160;
-}
 .icon-jifen {
     font-size: 28rpx;
     color: #07c160;
     margin: 0 0 0 6rpx;
 }
-.ck {
-    color: #c4c4c4;
-}
 .icon-pinglun,
 .icon-chakan,
 .icon-shoucang {
@@ -126,3 +87,49 @@
     color: #c4c4c4;
     line-height: 60rpx;
 }
+.onePic {
+    width: 100%;
+    height: 360rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+    margin: 20rpx 0;
+}
+.onePic image {
+    width: 100%;
+    height: 100%;
+}
+.twoPic {
+    width: 100%;
+    height: 220rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.twoPic image {
+    width: 49%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.threePic {
+    width: 100%;
+    height: 160rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.threePic image {
+    width: 32%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.jlSj {
+    height: 40rpx;
+    display: flex;
+    justify-content: space-between;
+    font-size: 24rpx;
+    margin: 20rpx 0 0 0;
+}
+.ck {
+    color: #c4c4c4;
+    margin-left:240px;
+}

pages/specialService/financialInfrastructure/financialInfrastructure.vue

@@ -1,104 +1,108 @@
 <template>
+    <!-- 金融基建列表 -->
     <view class="container">
-        <!-- 供销社列表 -->
-        <view class="rnwdList" v-for="(item, index) in list" :key="index">
-            <view @tap="goDetails(item.id, item.type)" class="cooperativeImgBox">
-                <image :src="loadImgSrc('/snbj.png')" class="cooperativeImg"></image>
-            </view>
-            <view @tap="goDetails(item.id, item.type)" class="cooperativeBox">
-                <view class="list">
-                    <span class="listTitle">{{ item.titleName }}</span>
+        <view class="rnwdList">
+            <view class="list" @tap="goDetails(item.id)" v-for="(item, index1) in dataSource" :key="index1">
+                <span class="listTitle">{{ item.titleName }}</span>
+
+                <view class="onePic" v-if="item.pictureList != null && item.pictureList.length == 1">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+                    </image>
+                </view>
+                <view class="twoPic" v-if="item.pictureList != null && item.pictureList.length == 2">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+                    </image>
+                </view>
+                <view class="threePic" v-if="item.pictureList != null && item.pictureList.length == 3">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+                    </image>
+                </view>
+                <view class="threePic" v-if="item.pictureList != null && item.pictureList.length > 3">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList"
+                           v-if="index2 < 3" :key="index2"></image>
+                </view>
+
+                <view class="jlSj">
+                    <view class="ck">
+						<span>
+							<em class="iconfont icon-chakan"></em>
+							{{ item.likeNum }}
+						</span>
+                        <span>
+							<em class="iconfont icon-shoucang"></em>
+							{{ item.watchNum }}
+						</span>
+                    </view>
                 </view>
             </view>
-            <em class="iconfont icon-xiangyoujiantou"></em>
         </view>
-        <!-- 我是有底线的 -->
-        <uni-load-more :status="status" :content-text="contentText"/>
     </view>
 </template>
 
 <script>
-import { listServer, getServer, delServer, addServer, updateServer } from '@/api/specialService/specialService';
-export default {
-    data() {
-        return {
-            // 查询参数
-            queryParams: {
-                pageNum: 1,
-                pageSize: 15,
-                id: null,
-                status:"1",
+    import { list } from '@/api/specialService/financialInfrastructure.js';
+    export default {
+        data() {
+            return {
+                dataSource: [],
+                // 数据总量
+                total: 0,
+                queryParams: {
+                    // 当前页
+                    pageNum: 1,
+                    // 每页数据量
+                    pageSize: 10,
+                },
+                loading: false,
+            }
+        },
+        /**
+         * 生命周期函数--监听页面加载
+         */
+        onLoad(options) {
+            this.getList(1)
+        },
+        onReachBottom(){
+            let pageNum = this.queryParams.pageNum
+            let pageSize = this.queryParams.pageSize
+            let total = this.total
+            if(pageNum * pageSize >= total){
+                uni.showToast({
+                    title:'暂无更多数据'
+                })
+                return
+            } else {
+                this.queryParams.pageNum += 1;
+                this.getList()
+            }
+        },
+        methods: {
+            goDetails(id) {
+                uni.navigateTo({
+                    url: '/pages/specialService/financialInfrastructure/details?id=' + id,
+                });
             },
-            // 加载更多
-            status: 'more',
-            contentText: {
-                contentdown: '查看更多',
-                contentrefresh: '加载中',
-                contentnomore: '------------------我是有底线的------------------'
+            // 分页触发
+            change(e) {
+                this.getList(e.current);
             },
-            // 列表数据
-            list: [
-                {
-                    titleName:"-",
-                    imgUrlList:"-"
-                }
-            ],
-        };
-    },
-    onPullDownRefresh() {
-        console.log("onPullDownRefresh  "+this.queryParams.pageNum)
-        this.queryParams.pageNum = 1;
-        this.list = [];
-        this.getList(9)
-    },
-    //上拉加载
-    onReachBottom(){
-        let pageNum = this.queryParams.pageNum;
-        let pageSize = this.queryParams.pageSize;
-        let total = this.total;
-        if(pageNum*pageSize >= total){
-            uni.showToast({
-                title:'暂无更多数据'
-            });
-            return;
-        } else {
-            this.queryParams.pageNum += 1;
-            this.getList(9)
-        }
-    }
-    /**
-     * 生命周期函数--监听页面加载
-     */,
-    onLoad(options) {
-        this.getList(9);
-    },
-    methods: {
-        /** 查询列表 */
-        getList(type) {
-            this.loading = true;
-            listServer({type: type}).then(response => {
-                if (this.queryParams.pageNum === 1) {
-                    this.list = response.rows;
-                } else {
-                    this.list = this.list.concat(response.rows);
+            // 获取数据
+            getList(pageNum) {
+                let params = {
+                    pageSize: this.queryParams.pageSize,
+                    pageNum: pageNum,
                 }
-                // 判断是否还有更多数据
-                if (response.rows.length < this.queryParams.pageSize) {
-                    this.status = 'noMore'; // 没有更多数据
-                } else {
-                    this.status = 'more'; // 还有更多数据
-                }
-            });
-        },
-        /** 查询详情 */
-        goDetails(id, type) {
-            uni.navigateTo({
-                url: '/pages/specialService/financialInfrastructure/details?id='+id+'&type='+type
-            });
+                list(params).then(res => {
+                    if (res.code == 200) {
+                        this.dataSource = [...this.dataSource,...res.rows]
+                        this.total = res.total
+                    }
+                })
+            },
         }
     }
-};
 </script>
+
 <style>
-@import './financialInfrastructure.css';
+    @import './financialInfrastructure.css';
 </style>

pages/specialService/legalService/details.css

@@ -1,36 +1,159 @@
-.container{
-    padding: 0;
+.title {
+    font-size: 44rpx;
+    text-align: center;
+    line-height: 70rpx;
+    color: #333;
+    margin: 30rpx 0;
+}
+.wenzhangLy {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 14rpx 0;
+}
+.txTime {
+    display: flex;
+    flex-direction: row;
+}
+.txTime image {
+    width: 80rpx;
+    height: 80rpx;
+}
+.time {
+    display: flex;
+    flex-direction: column;
+    padding: 10rpx 0 0 8px;
+}
+.time p {
+    font-size: 28rpx;
+    color: #9c9c9c;
+}
+.time span {
+    font-size: 24rpx;
+    color: #c4c4c4;
 }
 
-.cooperativeImgBox{
-    position: static;
-    left: 0;
-    top: 0;
-    z-index: 0;
+.jf {
+    color: #07c160;
+    line-height: 80rpx;
+    font-size: 24rpx;
+}
+.icon-jifen {
+    font-size: 28rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+.ck {
+    color: #c4c4c4;
+    font-size: 28rpx;
+}
+.icon-pinglun,
+.icon-chakan,
+.ck .icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+    line-height: 0;
+}
+.wenzhangCont {
+    font-size: 34rpx;
+    margin: 30rpx 0;
+}
+.wenzhangCont image {
     width: 100%;
-    height: 480rpx;
+    height: 320rpx;
+    margin: 20rpx auto;
 }
-.cooperativeImg{
-    position: static;
-    left: 0;
-    top: 0;
-    z-index: 0;
+.pinglunTj {
     width: 100%;
-    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx 0;
 }
-
-.itemBox {
+.pinglunTitle {
+    font-size: 34rpx;
+    color: #2e2e2e;
+    font-weight: 600;
+}
+.pinglunTitle em {
+    font-size: 34rpx;
+    color: #9b9b9b;
+    font-weight: normal;
+    margin: 0 0 0 10rpx;
+}
+.pinglunList {
     width: 100%;
-    font-size: 50rpx;
+    padding: 0 0 120rpx 0;
 }
-.itemBox:nth-child(2n-1){
-    background: #ccc;
+.pinglunList li {
+    margin: 20rpx 0;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 20rpx 0;
+    display: flex;
+    flex-direction: column;
 }
-.itemBox:nth-child(2n){
-    background: #ddd;
+.plListcont {
+    font-size: 30rpx;
+    color: #696868;
+    margin: 20rpx 0;
 }
-
-.item{
-    /*width: 100%;*/
-    /*background-color: #57f5a1;*/
+.pinglunList li button {
+    width: 80%;
+    border-radius: 10rpx;
+    background: #07c160;
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: normal;
+    margin: 16rpx auto;
+}
+.fabiaoPl {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    height: 112rpx;
+    background: #e8e8e8;
+    box-shadow: 0rpx 0rpx 16rpx #999;
+}
+.shuRu {
+    width: 72%;
+    display: flex;
+    flex-direction: row;
+    height: 76rpx;
+    background: #e0e0e0;
+    border-radius: 60rpx;
+    margin: 20rpx 0 0 20rpx;
+}
+.shuRu input {
+    line-height: 38px;
+    height: 76rpx;
+    font-size: 30rpx;
+    width: 83%;
+}
+.icon-bianji {
+    font-size: 38rpx;
+    line-height: 76rpx;
+    margin: 0 10rpx 0 20rpx;
+    color: #828181;
+}
+.icon-shoucang {
+    font-size: 50rpx;
+    line-height: 112rpx;
+    color: #828181;
+}
+.fasong {
+    width: 58rpx;
+    height: 58rpx;
+    border-radius: 50rpx;
+    background: #07c160;
+    margin: 26rpx 20rpx 0 10rpx;
+    text-align: center;
+    line-height: 58rpx;
+}
+.icon-fasong {
+    font-size: 40rpx;
+    color: #fff;
 }

pages/specialService/legalService/details.vue

@@ -1,50 +1,231 @@
 <template>
-    <view class="container">
-        <!-- 详情 -->
-        <view class="cooperativeImgBox">
-            <image :src="loadImgSrc('/snbj.png')" class="cooperativeImg"></image>
-        </view>
-        <view class="itemBox">
-            <view class="item">
-                <span>
-                    {{ details.textDetails }}
-                </span>
+    <view>
+        <!-- 法律服务详情 -->
+        <view class="container">
+            <h1 class="title">{{fromData.titleName}}</h1>
+            <view class="wenzhangLy">
+                <!-- 头像昵称 -->
+                <view class="txTime">
+                    <image :src="(detailInfo.headImg!=null)?loadImgSrcLocalhost(detailInfo.headImg):'https://tse4-mm.cn.bing.net/th/id/OIP-C.cYyiJYfTo1SY1cj26FQpAQHaHa?rs=1&pid=ImgDetMain'" style="border-radius: 50px;"></image>
+                    <view class="time">
+                        <p>{{detailInfo.nickName?detailInfo.nickName:'网友'}}</p>
+                        <span>{{ detailInfo.createTime }}</span>
+                    </view>
+                </view>
+            </view>
+            <view class="wenzhangCont article">
+                <view v-html="fromData.textDetails"></view>
+                <view v-for="(item, index) in fromData.pictureList" :key="index">
+                    <image :src="loadImgSrcLocalhost(item)"></image>
+                </view>
             </view>
+            <view class="fengexian"></view>
         </view>
     </view>
 </template>
 
 <script>
-    import { listServer, getServer, delServer, addServer, updateServer } from '@/api/specialService/specialService';
+    import { getDetails } from '@/api/specialService/legalService.js';
     export default {
         data() {
             return {
-                details: {
-                    titleName: "-",
-                    textDetails: "-",
-                }
-            }
+                parentId: "",
+                fromData: {},
+                content: "",
+                initInfo: {
+                    userId: null,
+                    scoreNum: 0,
+                    wechatName: "微信用户",
+                    name: null,
+                    headImg: null,
+                },
+            };
+        },
+        methods: {
+            // 获取数据
+            getDetails() {
+                getDetails(this.parentId).then(res => {
+                    if (res.code == 200) {
+                        this.fromData = res.data
+                    }
+                })
+            },
+            // getUserInfoByUserId(userId) {
+            // 	getUserInfo(userId).then(res => {
+            // 		this.initInfo = res.data;
+            // 	})
+            // },
         }
         /**
          * 生命周期函数--监听页面加载
-         */,
+         */
+        ,
         onLoad(options) {
-            this.getServer(options.id, options.type);
+            this.parentId = options.id
+            this.getDetails()
         },
-        methods: {
-            /** 详情 */
-            getServer(id, type) {
-                getServer(id, type).then(response => {
-                    let details = response.data;
-                    this.details = details;
-                    wx.setNavigationBarTitle({
-                        title: details.titleName
-                    })
-                });
-            },
-        }
+        /**
+         * 生命周期函数--监听页面初次渲染完成
+         */
+        onReady() {
+            this.userId = getApp().globalData.userId
+            // this.getUserInfoByUserId(this.userId)
+        },
+        /**
+         * 生命周期函数--监听页面显示
+         */
+        onShow() {},
+        /**
+         * 生命周期函数--监听页面隐藏
+         */
+        onHide() {},
+        /**
+         * 生命周期函数--监听页面卸载
+         */
+        onUnload() {},
+        /**
+         * 页面相关事件处理函数--监听用户下拉动作
+         */
+        onPullDownRefresh() {},
+        /**
+         * 页面上拉触底事件的处理函数
+         */
+        onReachBottom() {},
+        /**
+         * 用户点击右上角分享
+         */
+        onShareAppMessage() {},
     };
 </script>
-<style>
+<style lang="scss">
     @import './details.css';
+
+    .collect {
+        .icon-shoucang:before {
+            color: red;
+        }
+    }
+
+    .not-collect {}
+
+    .effectBix {
+        width: 56px;
+        height: 56px;
+        border-radius: 50px;
+        font-family: 'Bebas Neue', cursive;
+        background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+        border: 0;
+        color: #fff;
+        text-align: center;
+        line-height: 56px;
+        outline: transparent;
+        position: absolute;
+        transform: rotate(-30deg);
+        right: 3%;
+        top: -5%;
+    }
+
+    .effectBox,
+    .effectBox::after {
+        width: 56px;
+        height: 56px;
+        border-radius: 50px;
+        font-size: 16px;
+        font-family: 'Bebas Neue', cursive;
+        background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+        border: 0;
+        color: #fff;
+        opacity: 1;
+        letter-spacing: 3px;
+        text-align: center;
+        line-height: 56px;
+        outline: transparent;
+        position: relative;
+        left: 78%;
+        top: 113%;
+        transform: rotate(-30deg);
+        z-index: 1;
+    }
+
+    .effectBox::after {
+        --slice-0: inset(50% 50% 50% 50%);
+        --slice-1: inset(80% -6px 0 0);
+        --slice-2: inset(50% -6px 30% 0);
+        --slice-3: inset(10% -6px 85% 0);
+        --slice-4: inset(40% -6px 43% 0);
+        --slice-5: inset(80% -6px 5% 0);
+
+        content: 'AVAILABLE NOW';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
+        text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
+        clip-path: var(--slice-0);
+    }
+
+    .effectBox:hover::after {
+        animation: 1s glitch;
+        animation-timing-function: steps(2, end);
+    }
+
+    @keyframes glitch {
+        0% {
+            clip-path: var(--slice-1);
+            transform: translate(-20px, -10px);
+        }
+
+        10% {
+            clip-path: var(--slice-3);
+            transform: translate(10px, 10px);
+        }
+
+        20% {
+            clip-path: var(--slice-1);
+            transform: translate(-10px, 10px);
+        }
+
+        30% {
+            clip-path: var(--slice-3);
+            transform: translate(0px, 5px);
+        }
+
+        40% {
+            clip-path: var(--slice-2);
+            transform: translate(-5px, 0px);
+        }
+
+        50% {
+            clip-path: var(--slice-3);
+            transform: translate(5px, 0px);
+        }
+
+        60% {
+            clip-path: var(--slice-4);
+            transform: translate(5px, 10px);
+        }
+
+        70% {
+            clip-path: var(--slice-2);
+            transform: translate(-10px, 10px);
+        }
+
+        80% {
+            clip-path: var(--slice-5);
+            transform: translate(20px, -10px);
+        }
+
+        90% {
+            clip-path: var(--slice-1);
+            transform: translate(-10px, 0px);
+        }
+
+        100% {
+            clip-path: var(--slice-1);
+            transform: translate(0);
+        }
+    }
 </style>

pages/specialService/legalService/legalService.css

@@ -10,31 +10,6 @@
     height: 168rpx;
     position: relative;
 }
-.cooperativeBox{
-    position: relative;
-    left: 30rpx;
-    top: 10rpx;
-    z-index: 0;
-    width: 800rpx;
-    height: 100rpx;
-}
-.cooperativeImgBox{
-    position: relative;
-    left: 0;
-    top: 0;
-    z-index: 0;
-    width: 330rpx;
-    height: 100rpx;
-}
-.cooperativeImg{
-    position: relative;
-    left: 0;
-    top: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-}
-
 .lbBj {
     position: absolute;
     left: 0;
@@ -73,12 +48,12 @@
 /* 列表 */
 .rnwdList {
     width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin: 20rpx 0;
+    height: 100%;
 }
 .list {
-    width: 79%;
+    border-bottom: solid 2rpx #f6f6f6;
+    padding: 10rpx 0;
+    width: 100%;
 }
 .lb {
     background: #0d9970;
@@ -96,24 +71,11 @@
     color: #333;
     line-height: 40rpx;
 }
-.jlSj {
-    height: 40rpx;
-    display: flex;
-    justify-content: space-between;
-    font-size: 24rpx;
-    margin: 20rpx 0 0 0;
-}
-.jf {
-    color: #07c160;
-}
 .icon-jifen {
     font-size: 28rpx;
     color: #07c160;
     margin: 0 0 0 6rpx;
 }
-.ck {
-    color: #c4c4c4;
-}
 .icon-pinglun,
 .icon-chakan,
 .icon-shoucang {
@@ -126,3 +88,49 @@
     color: #c4c4c4;
     line-height: 60rpx;
 }
+.onePic {
+    width: 100%;
+    height: 360rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+    margin: 20rpx 0;
+}
+.onePic image {
+    width: 100%;
+    height: 100%;
+}
+.twoPic {
+    width: 100%;
+    height: 220rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.twoPic image {
+    width: 49%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.threePic {
+    width: 100%;
+    height: 160rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.threePic image {
+    width: 32%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.jlSj {
+    height: 40rpx;
+    display: flex;
+    justify-content: space-between;
+    font-size: 24rpx;
+    margin: 20rpx 0 0 0;
+}
+.ck {
+    color: #c4c4c4;
+    margin-left:240px;
+}

pages/specialService/legalService/legalService.vue

@@ -1,104 +1,108 @@
 <template>
+    <!-- 法律服务列表 -->
     <view class="container">
-        <!-- 供销社列表 -->
-        <view class="rnwdList" v-for="(item, index) in list" :key="index">
-            <view @tap="goDetails(item.id, item.type)" class="cooperativeImgBox">
-                <image :src="loadImgSrc('/snbj.png')" class="cooperativeImg"></image>
-            </view>
-            <view @tap="goDetails(item.id, item.type)" class="cooperativeBox">
-                <view class="list">
-                    <span class="listTitle">{{ item.titleName }}</span>
+        <view class="rnwdList">
+            <view class="list" @tap="goDetails(item.id)" v-for="(item, index1) in dataSource" :key="index1">
+                <span class="listTitle">{{ item.titleName }}</span>
+
+                <view class="onePic" v-if="item.pictureList != null && item.pictureList.length == 1">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+                    </image>
+                </view>
+                <view class="twoPic" v-if="item.pictureList != null && item.pictureList.length == 2">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+                    </image>
+                </view>
+                <view class="threePic" v-if="item.pictureList != null && item.pictureList.length == 3">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+                    </image>
+                </view>
+                <view class="threePic" v-if="item.pictureList != null && item.pictureList.length > 3">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList"
+                           v-if="index2 < 3" :key="index2"></image>
+                </view>
+
+                <view class="jlSj">
+                    <view class="ck">
+						<span>
+							<em class="iconfont icon-chakan"></em>
+							{{ item.likeNum }}
+						</span>
+                        <span>
+							<em class="iconfont icon-shoucang"></em>
+							{{ item.watchNum }}
+						</span>
+                    </view>
                 </view>
             </view>
-            <em class="iconfont icon-xiangyoujiantou"></em>
         </view>
-        <!-- 我是有底线的 -->
-        <uni-load-more :status="status" :content-text="contentText"/>
     </view>
 </template>
 
 <script>
-import { listServer, getServer, delServer, addServer, updateServer } from '@/api/specialService/specialService';
-export default {
-    data() {
-        return {
-            // 查询参数
-            queryParams: {
-                pageNum: 1,
-                pageSize: 15,
-                id: null,
-                status:"1",
+    import { list } from '@/api/specialService/legalService.js';
+    export default {
+        data() {
+            return {
+                dataSource: [],
+                // 数据总量
+                total: 0,
+                queryParams: {
+                    // 当前页
+                    pageNum: 1,
+                    // 每页数据量
+                    pageSize: 10,
+                },
+                loading: false,
+            }
+        },
+        /**
+         * 生命周期函数--监听页面加载
+         */
+        onLoad(options) {
+            this.getList(1)
+        },
+        onReachBottom(){
+            let pageNum = this.queryParams.pageNum
+            let pageSize = this.queryParams.pageSize
+            let total = this.total
+            if(pageNum * pageSize >= total){
+                uni.showToast({
+                    title:'暂无更多数据'
+                })
+                return
+            } else {
+                this.queryParams.pageNum += 1;
+                this.getList()
+            }
+        },
+        methods: {
+            goDetails(id) {
+                uni.navigateTo({
+                    url: '/pages/specialService/legalService/details?id=' + id,
+                });
             },
-            // 加载更多
-            status: 'more',
-            contentText: {
-                contentdown: '查看更多',
-                contentrefresh: '加载中',
-                contentnomore: '------------------我是有底线的------------------'
+            // 分页触发
+            change(e) {
+                this.getList(e.current);
             },
-            // 列表数据
-            list: [
-                {
-                    titleName:"-",
-                    imgUrlList:"-"
-                }
-            ],
-        };
-    },
-    onPullDownRefresh() {
-        console.log("onPullDownRefresh  "+this.queryParams.pageNum)
-        this.queryParams.pageNum = 1;
-        this.list = [];
-        this.getList(8)
-    },
-    //上拉加载
-    onReachBottom(){
-        let pageNum = this.queryParams.pageNum;
-        let pageSize = this.queryParams.pageSize;
-        let total = this.total;
-        if(pageNum*pageSize >= total){
-            uni.showToast({
-                title:'暂无更多数据'
-            });
-            return;
-        } else {
-            this.queryParams.pageNum += 1;
-            this.getList(8)
-        }
-    }
-    /**
-     * 生命周期函数--监听页面加载
-     */,
-    onLoad(options) {
-        this.getList(8);
-    },
-    methods: {
-        /** 查询列表 */
-        getList(type) {
-            this.loading = true;
-            listServer({type: type}).then(response => {
-                if (this.queryParams.pageNum === 1) {
-                    this.list = response.rows;
-                } else {
-                    this.list = this.list.concat(response.rows);
+            // 获取数据
+            getList(pageNum) {
+                let params = {
+                    pageSize: this.queryParams.pageSize,
+                    pageNum: pageNum,
                 }
-                // 判断是否还有更多数据
-                if (response.rows.length < this.queryParams.pageSize) {
-                    this.status = 'noMore'; // 没有更多数据
-                } else {
-                    this.status = 'more'; // 还有更多数据
-                }
-            });
-        },
-        /** 查询详情 */
-        goDetails(id, type) {
-            uni.navigateTo({
-                url: '/pages/specialService/legalService/details?id='+id+'&type='+type
-            });
+                list(params).then(res => {
+                    if (res.code == 200) {
+                        this.dataSource = [...this.dataSource,...res.rows]
+                        this.total = res.total
+                    }
+                })
+            },
         }
     }
-};
 </script>
+
 <style>
-@import './legalService.css';
+    @import './legalService.css';
 </style>

pages/specialService/loveAtVillage/details.css

@@ -1,36 +1,159 @@
-.container{
-    padding: 0;
+.title {
+    font-size: 44rpx;
+    text-align: center;
+    line-height: 70rpx;
+    color: #333;
+    margin: 30rpx 0;
+}
+.wenzhangLy {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 14rpx 0;
+}
+.txTime {
+    display: flex;
+    flex-direction: row;
+}
+.txTime image {
+    width: 80rpx;
+    height: 80rpx;
+}
+.time {
+    display: flex;
+    flex-direction: column;
+    padding: 10rpx 0 0 8px;
+}
+.time p {
+    font-size: 28rpx;
+    color: #9c9c9c;
+}
+.time span {
+    font-size: 24rpx;
+    color: #c4c4c4;
 }
 
-.cooperativeImgBox{
-    position: static;
-    left: 0;
-    top: 0;
-    z-index: 0;
+.jf {
+    color: #07c160;
+    line-height: 80rpx;
+    font-size: 24rpx;
+}
+.icon-jifen {
+    font-size: 28rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+.ck {
+    color: #c4c4c4;
+    font-size: 28rpx;
+}
+.icon-pinglun,
+.icon-chakan,
+.ck .icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+    line-height: 0;
+}
+.wenzhangCont {
+    font-size: 34rpx;
+    margin: 30rpx 0;
+}
+.wenzhangCont image {
     width: 100%;
-    height: 480rpx;
+    height: 320rpx;
+    margin: 20rpx auto;
 }
-.cooperativeImg{
-    position: static;
-    left: 0;
-    top: 0;
-    z-index: 0;
+.pinglunTj {
     width: 100%;
-    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx 0;
 }
-
-.itemBox {
+.pinglunTitle {
+    font-size: 34rpx;
+    color: #2e2e2e;
+    font-weight: 600;
+}
+.pinglunTitle em {
+    font-size: 34rpx;
+    color: #9b9b9b;
+    font-weight: normal;
+    margin: 0 0 0 10rpx;
+}
+.pinglunList {
     width: 100%;
-    font-size: 50rpx;
+    padding: 0 0 120rpx 0;
 }
-.itemBox:nth-child(2n-1){
-    background: #ccc;
+.pinglunList li {
+    margin: 20rpx 0;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 20rpx 0;
+    display: flex;
+    flex-direction: column;
 }
-.itemBox:nth-child(2n){
-    background: #ddd;
+.plListcont {
+    font-size: 30rpx;
+    color: #696868;
+    margin: 20rpx 0;
 }
-
-.item{
-    /*width: 100%;*/
-    /*background-color: #57f5a1;*/
+.pinglunList li button {
+    width: 80%;
+    border-radius: 10rpx;
+    background: #07c160;
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: normal;
+    margin: 16rpx auto;
+}
+.fabiaoPl {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    height: 112rpx;
+    background: #e8e8e8;
+    box-shadow: 0rpx 0rpx 16rpx #999;
+}
+.shuRu {
+    width: 72%;
+    display: flex;
+    flex-direction: row;
+    height: 76rpx;
+    background: #e0e0e0;
+    border-radius: 60rpx;
+    margin: 20rpx 0 0 20rpx;
+}
+.shuRu input {
+    line-height: 38px;
+    height: 76rpx;
+    font-size: 30rpx;
+    width: 83%;
+}
+.icon-bianji {
+    font-size: 38rpx;
+    line-height: 76rpx;
+    margin: 0 10rpx 0 20rpx;
+    color: #828181;
+}
+.icon-shoucang {
+    font-size: 50rpx;
+    line-height: 112rpx;
+    color: #828181;
+}
+.fasong {
+    width: 58rpx;
+    height: 58rpx;
+    border-radius: 50rpx;
+    background: #07c160;
+    margin: 26rpx 20rpx 0 10rpx;
+    text-align: center;
+    line-height: 58rpx;
+}
+.icon-fasong {
+    font-size: 40rpx;
+    color: #fff;
 }

pages/specialService/loveAtVillage/details.vue

@@ -1,50 +1,231 @@
 <template>
-    <view class="container">
-        <!-- 详情 -->
-        <view class="cooperativeImgBox">
-            <image :src="loadImgSrc('/snbj.png')" class="cooperativeImg"></image>
-        </view>
-        <view class="itemBox">
-            <view class="item">
-                <span>
-                    {{ details.textDetails }}
-                </span>
+    <view>
+        <!-- 乡村婚恋详情 -->
+        <view class="container">
+            <h1 class="title">{{fromData.titleName}}</h1>
+            <view class="wenzhangLy">
+                <!-- 头像昵称 -->
+                <view class="txTime">
+                    <image :src="(detailInfo.headImg!=null)?loadImgSrcLocalhost(detailInfo.headImg):'https://tse4-mm.cn.bing.net/th/id/OIP-C.cYyiJYfTo1SY1cj26FQpAQHaHa?rs=1&pid=ImgDetMain'" style="border-radius: 50px;"></image>
+                    <view class="time">
+                        <p>{{detailInfo.nickName?detailInfo.nickName:'网友'}}</p>
+                        <span>{{ detailInfo.createTime }}</span>
+                    </view>
+                </view>
+            </view>
+            <view class="wenzhangCont article">
+                <view v-html="fromData.textDetails"></view>
+                <view v-for="(item, index) in fromData.pictureList" :key="index">
+                    <image :src="loadImgSrcLocalhost(item)"></image>
+                </view>
             </view>
+            <view class="fengexian"></view>
         </view>
     </view>
 </template>
 
 <script>
-import { listServer, getServer, delServer, addServer, updateServer } from '@/api/specialService/specialService';
-export default {
-    data() {
-        return {
-            details: {
-                titleName: "-",
-                textDetails: "-",
-            }
-        }
-    }
-    /**
-     * 生命周期函数--监听页面加载
-     */,
-    onLoad(options) {
-        this.getServer(options.id, options.type);
-    },
-    methods: {
-        /** 详情 */
-        getServer(id, type) {
-            getServer(id, type).then(response => {
-                let details = response.data;
-                this.details = details;
-                wx.setNavigationBarTitle({
-                    title: details.titleName
+    import { getDetails } from '@/api/specialService/loveAtVillage.js';
+    export default {
+        data() {
+            return {
+                parentId: "",
+                fromData: {},
+                content: "",
+                initInfo: {
+                    userId: null,
+                    scoreNum: 0,
+                    wechatName: "微信用户",
+                    name: null,
+                    headImg: null,
+                },
+            };
+        },
+        methods: {
+            // 获取数据
+            getDetails() {
+                getDetails(this.parentId).then(res => {
+                    if (res.code == 200) {
+                        this.fromData = res.data
+                    }
                 })
-            });
+            },
+            // getUserInfoByUserId(userId) {
+            // 	getUserInfo(userId).then(res => {
+            // 		this.initInfo = res.data;
+            // 	})
+            // },
+        }
+        /**
+         * 生命周期函数--监听页面加载
+         */
+        ,
+        onLoad(options) {
+            this.parentId = options.id
+            this.getDetails()
         },
-    }
-};
+        /**
+         * 生命周期函数--监听页面初次渲染完成
+         */
+        onReady() {
+            this.userId = getApp().globalData.userId
+            // this.getUserInfoByUserId(this.userId)
+        },
+        /**
+         * 生命周期函数--监听页面显示
+         */
+        onShow() {},
+        /**
+         * 生命周期函数--监听页面隐藏
+         */
+        onHide() {},
+        /**
+         * 生命周期函数--监听页面卸载
+         */
+        onUnload() {},
+        /**
+         * 页面相关事件处理函数--监听用户下拉动作
+         */
+        onPullDownRefresh() {},
+        /**
+         * 页面上拉触底事件的处理函数
+         */
+        onReachBottom() {},
+        /**
+         * 用户点击右上角分享
+         */
+        onShareAppMessage() {},
+    };
 </script>
-<style>
-@import './details.css';
+<style lang="scss">
+    @import './details.css';
+
+    .collect {
+        .icon-shoucang:before {
+            color: red;
+        }
+    }
+
+    .not-collect {}
+
+    .effectBix {
+        width: 56px;
+        height: 56px;
+        border-radius: 50px;
+        font-family: 'Bebas Neue', cursive;
+        background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+        border: 0;
+        color: #fff;
+        text-align: center;
+        line-height: 56px;
+        outline: transparent;
+        position: absolute;
+        transform: rotate(-30deg);
+        right: 3%;
+        top: -5%;
+    }
+
+    .effectBox,
+    .effectBox::after {
+        width: 56px;
+        height: 56px;
+        border-radius: 50px;
+        font-size: 16px;
+        font-family: 'Bebas Neue', cursive;
+        background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+        border: 0;
+        color: #fff;
+        opacity: 1;
+        letter-spacing: 3px;
+        text-align: center;
+        line-height: 56px;
+        outline: transparent;
+        position: relative;
+        left: 78%;
+        top: 113%;
+        transform: rotate(-30deg);
+        z-index: 1;
+    }
+
+    .effectBox::after {
+        --slice-0: inset(50% 50% 50% 50%);
+        --slice-1: inset(80% -6px 0 0);
+        --slice-2: inset(50% -6px 30% 0);
+        --slice-3: inset(10% -6px 85% 0);
+        --slice-4: inset(40% -6px 43% 0);
+        --slice-5: inset(80% -6px 5% 0);
+
+        content: 'AVAILABLE NOW';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
+        text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
+        clip-path: var(--slice-0);
+    }
+
+    .effectBox:hover::after {
+        animation: 1s glitch;
+        animation-timing-function: steps(2, end);
+    }
+
+    @keyframes glitch {
+        0% {
+            clip-path: var(--slice-1);
+            transform: translate(-20px, -10px);
+        }
+
+        10% {
+            clip-path: var(--slice-3);
+            transform: translate(10px, 10px);
+        }
+
+        20% {
+            clip-path: var(--slice-1);
+            transform: translate(-10px, 10px);
+        }
+
+        30% {
+            clip-path: var(--slice-3);
+            transform: translate(0px, 5px);
+        }
+
+        40% {
+            clip-path: var(--slice-2);
+            transform: translate(-5px, 0px);
+        }
+
+        50% {
+            clip-path: var(--slice-3);
+            transform: translate(5px, 0px);
+        }
+
+        60% {
+            clip-path: var(--slice-4);
+            transform: translate(5px, 10px);
+        }
+
+        70% {
+            clip-path: var(--slice-2);
+            transform: translate(-10px, 10px);
+        }
+
+        80% {
+            clip-path: var(--slice-5);
+            transform: translate(20px, -10px);
+        }
+
+        90% {
+            clip-path: var(--slice-1);
+            transform: translate(-10px, 0px);
+        }
+
+        100% {
+            clip-path: var(--slice-1);
+            transform: translate(0);
+        }
+    }
 </style>

pages/specialService/loveAtVillage/loveAtVillage.css

@@ -10,31 +10,6 @@
     height: 168rpx;
     position: relative;
 }
-.cooperativeBox{
-    position: relative;
-    left: 30rpx;
-    top: 10rpx;
-    z-index: 0;
-    width: 800rpx;
-    height: 100rpx;
-}
-.cooperativeImgBox{
-    position: relative;
-    left: 0;
-    top: 0;
-    z-index: 0;
-    width: 330rpx;
-    height: 100rpx;
-}
-.cooperativeImg{
-    position: relative;
-    left: 0;
-    top: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-}
-
 .lbBj {
     position: absolute;
     left: 0;
@@ -73,12 +48,12 @@
 /* 列表 */
 .rnwdList {
     width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin: 20rpx 0;
+    height: 100%;
 }
 .list {
-    width: 79%;
+    border-bottom: solid 2rpx #f6f6f6;
+    padding: 10rpx 0;
+    width: 100%;
 }
 .lb {
     background: #0d9970;
@@ -96,24 +71,11 @@
     color: #333;
     line-height: 40rpx;
 }
-.jlSj {
-    height: 40rpx;
-    display: flex;
-    justify-content: space-between;
-    font-size: 24rpx;
-    margin: 20rpx 0 0 0;
-}
-.jf {
-    color: #07c160;
-}
 .icon-jifen {
     font-size: 28rpx;
     color: #07c160;
     margin: 0 0 0 6rpx;
 }
-.ck {
-    color: #c4c4c4;
-}
 .icon-pinglun,
 .icon-chakan,
 .icon-shoucang {
@@ -126,3 +88,49 @@
     color: #c4c4c4;
     line-height: 60rpx;
 }
+.onePic {
+    width: 100%;
+    height: 360rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+    margin: 20rpx 0;
+}
+.onePic image {
+    width: 100%;
+    height: 100%;
+}
+.twoPic {
+    width: 100%;
+    height: 220rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.twoPic image {
+    width: 49%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.threePic {
+    width: 100%;
+    height: 160rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.threePic image {
+    width: 32%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.jlSj {
+    height: 40rpx;
+    display: flex;
+    justify-content: space-between;
+    font-size: 24rpx;
+    margin: 20rpx 0 0 0;
+}
+.ck {
+    color: #c4c4c4;
+    margin-left:240px;
+}

pages/specialService/loveAtVillage/loveAtVillage.vue

@@ -1,104 +1,108 @@
 <template>
+    <!-- 乡村婚恋列表 -->
     <view class="container">
-        <!-- 供销社列表 -->
-        <view class="rnwdList" v-for="(item, index) in list" :key="index">
-            <view @tap="goDetails(item.id, item.type)" class="cooperativeImgBox">
-                <image :src="loadImgSrc('/snbj.png')" class="cooperativeImg"></image>
-            </view>
-            <view @tap="goDetails(item.id, item.type)" class="cooperativeBox">
-                <view class="list">
-                    <span class="listTitle">{{ item.titleName }}</span>
+        <view class="rnwdList">
+            <view class="list" @tap="goDetails(item.id)" v-for="(item, index1) in dataSource" :key="index1">
+                <span class="listTitle">{{ item.titleName }}</span>
+
+                <view class="onePic" v-if="item.pictureList != null && item.pictureList.length == 1">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+                    </image>
+                </view>
+                <view class="twoPic" v-if="item.pictureList != null && item.pictureList.length == 2">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+                    </image>
+                </view>
+                <view class="threePic" v-if="item.pictureList != null && item.pictureList.length == 3">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+                    </image>
+                </view>
+                <view class="threePic" v-if="item.pictureList != null && item.pictureList.length > 3">
+                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList"
+                           v-if="index2 < 3" :key="index2"></image>
+                </view>
+
+                <view class="jlSj">
+                    <view class="ck">
+						<span>
+							<em class="iconfont icon-chakan"></em>
+							{{ item.likeNum }}
+						</span>
+                        <span>
+							<em class="iconfont icon-shoucang"></em>
+							{{ item.watchNum }}
+						</span>
+                    </view>
                 </view>
             </view>
-            <em class="iconfont icon-xiangyoujiantou"></em>
         </view>
-        <!-- 我是有底线的 -->
-        <uni-load-more :status="status" :content-text="contentText"/>
     </view>
 </template>
 
 <script>
-import { listServer, getServer, delServer, addServer, updateServer } from '@/api/specialService/specialService';
-export default {
-    data() {
-        return {
-            // 查询参数
-            queryParams: {
-                pageNum: 1,
-                pageSize: 15,
-                id: null,
-                status:"1",
+    import { list } from '@/api/specialService/loveAtVillage.js';
+    export default {
+        data() {
+            return {
+                dataSource: [],
+                // 数据总量
+                total: 0,
+                queryParams: {
+                    // 当前页
+                    pageNum: 1,
+                    // 每页数据量
+                    pageSize: 10,
+                },
+                loading: false,
+            }
+        },
+        /**
+         * 生命周期函数--监听页面加载
+         */
+        onLoad(options) {
+            this.getList(1)
+        },
+        onReachBottom(){
+            let pageNum = this.queryParams.pageNum
+            let pageSize = this.queryParams.pageSize
+            let total = this.total
+            if(pageNum * pageSize >= total){
+                uni.showToast({
+                    title:'暂无更多数据'
+                })
+                return
+            } else {
+                this.queryParams.pageNum += 1;
+                this.getList()
+            }
+        },
+        methods: {
+            goDetails(id) {
+                uni.navigateTo({
+                    url: '/pages/specialService/loveAtVillage/details?id=' + id,
+                });
             },
-            // 加载更多
-            status: 'more',
-            contentText: {
-                contentdown: '查看更多',
-                contentrefresh: '加载中',
-                contentnomore: '------------------我是有底线的------------------'
+            // 分页触发
+            change(e) {
+                this.getList(e.current);
             },
-            // 列表数据
-            list: [
-                {
-                    titleName:"-",
-                    imgUrlList:"-"
-                }
-            ],
-        };
-    },
-    onPullDownRefresh() {
-        console.log("onPullDownRefresh  "+this.queryParams.pageNum)
-        this.queryParams.pageNum = 1;
-        this.list = [];
-        this.getList(7)
-    },
-    //上拉加载
-    onReachBottom(){
-        let pageNum = this.queryParams.pageNum;
-        let pageSize = this.queryParams.pageSize;
-        let total = this.total;
-        if(pageNum*pageSize >= total){
-            uni.showToast({
-                title:'暂无更多数据'
-            });
-            return;
-        } else {
-            this.queryParams.pageNum += 1;
-            this.getList(7)
-        }
-    }
-    /**
-     * 生命周期函数--监听页面加载
-     */,
-    onLoad(options) {
-        this.getList(7);
-    },
-    methods: {
-        /** 查询列表 */
-        getList(type) {
-            this.loading = true;
-            listServer({type: type}).then(response => {
-                if (this.queryParams.pageNum === 1) {
-                    this.list = response.rows;
-                } else {
-                    this.list = this.list.concat(response.rows);
+            // 获取数据
+            getList(pageNum) {
+                let params = {
+                    pageSize: this.queryParams.pageSize,
+                    pageNum: pageNum,
                 }
-                // 判断是否还有更多数据
-                if (response.rows.length < this.queryParams.pageSize) {
-                    this.status = 'noMore'; // 没有更多数据
-                } else {
-                    this.status = 'more'; // 还有更多数据
-                }
-            });
-        },
-        /** 查询详情 */
-        goDetails(id, type) {
-            uni.navigateTo({
-                url: '/pages/specialService/loveAtVillage/details?id='+id+'&type='+type
-            });
+                list(params).then(res => {
+                    if (res.code == 200) {
+                        this.dataSource = [...this.dataSource,...res.rows]
+                        this.total = res.total
+                    }
+                })
+            },
         }
     }
-};
 </script>
+
 <style>
-@import './loveAtVillage.css';
+    @import './loveAtVillage.css';
 </style>