TC_GaoLiGongShan
/
manage_mobile
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

系统消息页面

master
邓宏 2 years ago
parent
57b82e46a2
commit
41666468ec
6 changed files with 385 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 43
      pages/baseMana/formReacord.vue
  2. 2
      pages/home/my.vue
  3. 227
      pages/home/news.vue
  4. 81
      pages/home/newsDetail.vue
  5. 22
      router/home.js
  6. 57
      uni_modules/d-search/components/d-search/d-search.vue

43
pages/baseMana/formReacord.vue
View File

@ -2,6 +2,36 @@
.container{ .container{
height:100%; height:100%;
background:#f6f6f6; background:#f6f6f6;
&>.d-search{
&/deep/ .want_search{
.title{
color:#999;
font-size:24rpx;
font-weight: normal;
}
.content{
display:flex;
flex-wrap: wrap;
margin:14rpx -20rpx -20rpx 0;
text{
height:48rpx;
line-height: 48rpx;
border-radius: 30rpx;
width:calc(100%/5 - 20rpx);
text-align: center;
font-size:24rpx;
margin:0 20rpx 20rpx 0;
transition: all 0.3s;
color:#999;
background:#EEEEEE;
&.active{
color:#fff;
background:#10C176;
}
}
}
}
}
.date-range{ .date-range{
flex-shrink: 0; flex-shrink: 0;
@ -122,7 +152,12 @@
</style> </style>
<template> <template>
<view class="container flex"> <view class="container flex">
<d-search :btn="false" v-model="searchVal.search" :selectVal="searchVal.value" :list="typeList" @select="searchVal.value=$event" @search="clean();search()"/> <d-search :btn="false" popup ref="dSearch" v-model="searchVal.search" :selectVal="searchVal.value" @select="searchVal.value=$event" @search="clean();search()">
<text class="title">猜你想搜</text>
<view class="content">
<text v-for="(v,k) in typeList" :class="{active:v.value==searchVal.value}" :key="k" @click="select(v.value)">{{v.label}}</text>
</view>
</d-search>
<view class="date-range"> <view class="date-range">
<picker mode="date" class="plant-youbian" :class="{noData:!searchVal.startTime}" :end="searchVal.endTime" @change="searchVal.startTime=$event.detail.value;clean();search()" >{{searchVal.startTime||"请选择开始时间"}}</picker> <picker mode="date" class="plant-youbian" :class="{noData:!searchVal.startTime}" :end="searchVal.endTime" @change="searchVal.startTime=$event.detail.value;clean();search()" >{{searchVal.startTime||"请选择开始时间"}}</picker>
@ -183,6 +218,12 @@ import request from '@/common/request.js'
this.search() this.search()
}, },
methods:{ methods:{
select(e){
this.$refs.dSearch.show=false
this.searchVal.value=this.searchVal.value==e?'':e
this.clean()
this.search()
},
async init(){ async init(){
var res=await request("/api/plantFarming/listFarmName") var res=await request("/api/plantFarming/listFarmName")
if(res.statu){ if(res.statu){

2
pages/home/my.vue
View File

@ -70,7 +70,7 @@
<view class="item" @click="$u.route({url:'/pages/stock/already'})"> <view class="item" @click="$u.route({url:'/pages/stock/already'})">
<text class="plant-kufangguanli-lingyongguihuan"/> <text>领用记录</text> <text class="plant-youbian"/> <text class="plant-kufangguanli-lingyongguihuan"/> <text>领用记录</text> <text class="plant-youbian"/>
</view> </view>
<view class="item"> <view class="item" @click="$u.route({url:'/pages/home/news'})">
<text class="plant-xitongxiaoxi"/> <text>系统消息</text> <text class="plant-youbian"/> <text class="plant-xitongxiaoxi"/> <text>系统消息</text> <text class="plant-youbian"/>
</view> </view>
<view class="item" @click="$store.commit('outLogin')"> <view class="item" @click="$store.commit('outLogin')">

227
pages/home/news.vue
View File

@ -0,0 +1,227 @@
<style lang="less" scoped>
.container{
height:100%;
background:#f6f6f6;
&>.d-search{
.u-tabs{
margin-top:-20rpx;
}
.tabs{
display:flex;
flex-wrap: wrap;
margin:20rpx -20rpx -15rpx 0;
text{
height:48rpx;
line-height: 48rpx;
background:rgba(238, 238, 238, 0.4);
color:#999;
font-size:24rpx;
border-radius: 48rpx;
min-width:110rpx;
padding:0 10rpx;
box-sizing: border-box;
text-align: center;
transition: all 0.3s;
margin:0 20rpx 15rpx 0;
&.active{
color:#fff;
background:#10C176;
}
}
}
}
scroll-view{
flex-grow: 1;
height:1rpx;
.card{
margin-top:0;
&>.info{
display:flex;
align-items: center;
&>.plant-xitongxiaoxi{
background:#10C176;
color:#fff;
width:90rpx;
height:90rpx;
line-height: 90rpx;
text-align: center;
border-radius: 50%;
position:relative;
margin-right:16rpx;
&:after{
content:"";
position:absolute;
background:red;
width:12rpx;
height:12rpx;
border-radius: 50%;
top:9rpx;
right:9rpx;
}
}
&>view{
flex-grow: 1;
width:1rpx;
.title{
display:flex;
align-items: center;
text{
&:first-child{
font-weight: bold;
}
&:nth-child(2){
margin:0 20rpx 0 18rpx;
color:#fff;
background:#10C176;
border-radius: 4rpx 40rpx 4rpx 40rpx;
height:34rpx;
line-height: 34rpx;
padding:0 10rpx;
min-width:80rpx;
text-align: center;
font-size:20rpx;
}
&:nth-child(3){
margin-left:auto;
}
}
}
.tabs{
display:flex;
flex-wrap: wrap;
margin:12rpx -18rpx -16rpx 0;
text{
border-radius: 44rpx;
margin:0 18rpx 16rpx 0;
font-size:24rpx;
height:44rpx;
line-height: 44rpx;
background-position: 20rpx 12rpx;
background-repeat: no-repeat;
color:rgba(var(--c),1);
background-color:rgba(var(--c),0.1);
padding-right:20rpx;
}
.germinate{
--c:15, 194, 119;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAYAAAB24g05AAAAAXNSR0IArs4c6QAAAYZJREFUKFOdkU1IVHEUxc957yE45YwKSRnUpp24dKELZ4YCMdFNJNWyRdDOr3lBkMzK0PmIEsFVqzDMlRsXBcObaBuCgRjMphREUOq9USqc9z/igGKKMHi3554f955D1DCXC8/aLNu8pNgFoonSqsA5v8m8YQ1+NBZTgcB6AN8oXRF5lYAjaakKuFQcbnfgDEHoAlkHaPlfxYz+vZ37AYGxz+4aoe8S7oIwMhxRuPe+fGdmhzEv9RTA9KEAYAPALwA3INh+ItOMD/ftaMvNOYvWIIC9CszAbjxbOLqcMc+doKV9iR0EegUJ4FcJpSAx9TDqua8rDiYdKa6K+VRO5rZPvv1fBg3eWL9Nzgq4BnEeMCuw2O53Zx6dl9XZENNpq74zuP6nJ78e+ei22nXmQTmRzdcOOLXZWEw9/h3PvL0wIOaNTfiJ7POaAZEvbqsT4okl3QMZGKlEoB+EF8K82936uYjBhfC4hVNkRgujL2jbfYBuEWyu6oIvahPkssL98SD5qnTkOwB+A5pVJ9wdJQAAAABJRU5ErkJggg==);
background-size:30rpx 22rpx;
padding-left:30rpx+25rpx;
}
.organ{
--c:248, 203, 54;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANCAYAAACdKY9CAAAAAXNSR0IArs4c6QAAAQ9JREFUKFOlUrtKA1EQPedeHxERFAQRCYK9GCW7Ivb+hEUqsbONhZVFCm0kYCPoD9gFS4tgYeFVsLBLmyaNWO5qmCOYjYJuksJphnmcmTMPIpPkIXoGuda3f7QEoSVgbyoOd+wH0sfoCKL/DZA0A+IAQLMQhR0moVwHXPFv5cxjuJTTIYHpQhTWmYRYA5O/AjoDUAIw+w+A0AV0QcemmTZIVAFm8+V2sBOjzq2bpnJ+fowTVwTjHtWBlGQATgHcSjgmuTUCkD+6YDVPNWjOj8fhfviWhNZrp12aW1jadbK3yc2n6xEA1QW8kFoF3IqXauy9BJbzCAlqOOpG8hVAi864//0aw473EcrbEt8NqnwCf8mG+U/vRGMAAAAASUVORK5CYII=);
background-size:26rpx 24rpx;
padding-left:26rpx+25rpx;
}
.type{
--c:235, 67, 118;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAASBJREFUKFN9kD0vQ2EYhq/7bUUklUhEYxAMNfsDJk0TGxN/wWJ0EpvExmjpajMYTAaDxSIWg1ERFh/toCGpr55bzkk1qmmf8cl9PR+XqvPRHfY+QRH9KvY2YkXVYmTgEFjCNIBmi8sghv7MSDNtwHapfv8+OlPZ/UhCV4W1wZHJoSpiuAV1AgltxxVJL0nA9ogUCj03YC8iPWBixDiQ/fdS10lz+ZOdsSRULUanwFxfIH0IPhMD2ANIj2rGURzClsT0r5hOS62Rtq8F5aZ9miHMWo4kXXZYSrW2AZ7q942p7MSrklYu5M8Qtz0B7POBz8zCV/Z7+Y3aXi6MHSHV+2xwjZhNiUnsG4I2kC5S4Lm4fqBYxwRWwekJ3aVEdtmi9AMqTJE6K1mcKgAAAABJRU5ErkJggg==);
background-size:24rpx 22rpx;
padding-left:24rpx+25rpx;
}
}
}
}
&>.content{
display:flex;
align-items: center;
margin-top:10rpx;
.fruit,.food{
margin-right:16rpx;
border-radius: 8rpx;
flex-shrink: 0;
height:44rpx;
line-height: 44rpx;
color:rgba(var(--c),1);
background:rgba(var(--c),0.1);
display:flex;
align-items: center;
padding:0 5rpx;
&:before{
content:"";
flex-shrink: 0;
margin-right:4rpx;
}
&:after{
flex-shrink: 0;
}
}
.fruit{
--c:248, 203, 54;
&:before{
width:29rpx;
height:21rpx;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAALCAYAAACgR9dcAAAAAXNSR0IArs4c6QAAAitJREFUKFNVkV1Ik3EUxp//ecdm84ttMFHDGMYSbKaIbTPISTYzeJmDdiNUUhdZVHRRBEUXel1UBN6EF2LRRdEXIyiyG5sGGqkFUYph4i6knBs13Lv3/Z/YcsLOzTk8D7/DwzkCW6WqqtXutodGb40+Kmi5fjAUau/1Jf3js6WvUtoO98SzJy8KvsgN4fBRt6ZJf01D/Tm54bg2MjI0ntM7VLXt5OHkh/6uDXo7VyqjC/VxW+0P7+DpWDzn5+HW1tZql6tlyOl0RyrLa4zllY/Di4uxO2dPlKz2dSQtZhMjnSFMyAak06nUg5n3XU8vpabzcCAQMHn2hpbMZmtFWbnDvLAwuRmPf/r97t7a7u+zOu5SFezLVgQDNthShPJUevpXZu14HgZAp/oH32SySZ+mbaIzMGCdmbwiRnpfA/w/X1bfB8lN0AwdFos0Plds7C/A+Q2NjY325uaeaGXFTn9d7a7E1T1hW05nHUha6mSitIn0kqpMwmTr9B64ObUNHztz/vKh7iMDzCwAJiHIUISuFC7LTBJExBKSAf4yP5fdhtuDYSeb+YYQKGOIhACbpOSXRNTHzA8ZbIWAiyBaWPJ9kOIpiu1Tw9cJsELwOiTapNRuk2JRNWGMKUAdoDgUhoeZ/0iDxopgb09vUFHQzUATwN8YPAWQuvXTOcGoZgEHgPWp6PMLRXAkElFW/moXhUI+SKwKYXxlQd78O0BLzNIuWeiKMA3Hoo9//gNbO95NYH+HjwAAAABJRU5ErkJggg==);
}
&:after{
content:"水果";
}
}
.food{
--c:16, 193, 118;
&:before{
width:24rpx;
height:24rpx;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAkRJREFUKFM1kF9IU2EYxr/v/Nk52s7cGp45qSTMMbNAmDRFCwSXHOtiSQhGkWVddFEXYRde1FUQNaOrLhIMQS8kb3YROOjCZJFRRoWKiLV0Ttf+tu0c5znnO9+3OELP5fs8P3ifBwIAgL9faldaitf2mwsDwtfaqep1x8zi2/Bn0zshSRzTnYtiQbMxBX4b+np6anK3d34rbRmHGTBln3f/4qa9ravvZxWfz8dqEv9RPaq4IYEl6H3etpC7sHWG0mhClRmCq4wK4AgrTnsWLm97UR5pSlTY9SCXirFVr8Cml63fdHdZZBQLZ9gQYrIWHdWVuZM/GnITxS4vIgS/SMRnP2ysDhVFkYKnRs49Tt5ZHa1ZrMtiq0EohQZyR9r+cCy401slOqPFvzip618eTU1I5rvQL/UfKQTi41qD3FGhgQowUDuXmvaulzz1K0xMrxeL1HqWXYmsVd/8FAlvQpPyDQdu5friIeGnM39X67NpShnJ2i7laSxCwFYBou/DpQT3/Vlo5jwcvHf/qYW3dCqOQqOI7HS78ziLCEZbpU22qZ79PxxIZA24vI1eQenqjdeS1NutaxqgaRZACAEh+CBIUTSoVCoAYwQsHA/m5iLz0H/xUtfQlcF3G7EY73K5AMswwDCMA4BhGIAMA6RSKdDibVbHJycDZgdq+MHosiiKx3jOgmmaIaqqUSbA8xzB2KBUTafT6XR8IvTk9EHps8GBYG3t4THBKgg2wUYnU3/2zLvbVXeoJJewrMhyJpMfiYbfhP8BZDwCZS4yOV4AAAAASUVORK5CYII=);
}
&:after{
content:"蔬菜";
}
}
.cause,.date{
color:#999;
font-size:24rpx;
}
}
}
}
}
</style>
<template>
<view class="container flex">
<d-search :btn="false" popup>
<u-tabs :list="[{name:'消息类型'},{name:'作物类型'}]" lineColor="#10C176" :activeStyle="{color:'#10C176'}" :inactiveStyle="{color:'#999'}" :itemStyle="{height:'60rpx'}" lineHeight="6rpx" lineWidth="96rpx"/>
<view class="tabs">
<text>害虫</text>
<text class="active">害虫</text>
</view>
</d-search>
<scroll-view scroll-y>
<view class="card" @click="$u.route({url:'/pages/home/newsDetail'})">
<view class="info">
<text class="plant-xitongxiaoxi"/>
<view>
<view class="title">
<text class="over">阳光玫瑰</text>
<text>病害</text>
<text class="plant-youbian"/>
</view>
<view class="tabs">
<text class="germinate">发芽</text>
<text class="organ">根、茎</text>
<text class="type">变色</text>
</view>
</view>
</view>
<view class="content">
<text class="fruit"/>
<text class="food"/>
<text class="cause over">由于叶子部位病变需要使用水溶肥部位病变需要使用水溶肥</text>
<text class="date">2023/2/27</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>

81
pages/home/newsDetail.vue
View File

@ -0,0 +1,81 @@
<style lang="less" scoped>
.container{
padding:0 30rpx;
&>view{
display:flex;
align-items: center;
justify-content: space-between;
padding:20rpx 0;
&+view{
border-top:2rpx solid rgba(216, 216, 216, 0.2);
}
text{
&:first-child{
color:var(--b,#777);
margin-right:20rpx;
}
&:nth-child(2){
color:var(--f,#333);
font-size:var(--size,28rpx);
&.agr{
color:#10C176;
margin-top:13rpx;
}
&.account{
margin-top:13rpx;
padding:30rpx;
border-radius: 24rpx;
color:#999;
background: #F7F7F7;
}
}
}
&.info{
--b:#333;
--f:#777;
--size:24rpx;
}
&.vertical{
flex-direction: column;
align-items: flex-start;
}
}
}
</style>
<template>
<view class="container">
<view class="info">
<text>基本信息</text> <text>推送时间：2023-02-28 10:23:56</text>
</view>
<view>
<text>品种名称</text> <text class="over">阳光玫瑰</text>
</view>
<view>
<text>作物类型</text> <text class="over">葡萄</text>
</view>
<view>
<text>生长过程</text> <text class="over">发芽</text>
</view>
<view>
<text>病虫害部位</text> <text class="over">根、茎</text>
</view>
<view>
<text>显著症状</text> <text class="over">变色</text>
</view>
<view class="vertical">
<text>推荐农资</text> <text class="agr">水溶肥、复合肥、氮肥</text>
</view>
<view class="vertical">
<text>推荐理由</text> <text class="account">由于叶子部位病变需要使用水溶肥内容这里是产品介绍内容这里是产品介绍内容这里是产品介绍内容这里是产品介绍内容这里是产品介绍内容</text>
</view>
</view>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>

22
router/home.js
View File

@ -66,4 +66,26 @@ module.exports=[
} }
} }
}, },
{
path:"pages/home/news",
style:{
navigationBarTitleText:"消息",
navigationBarBackgroundColor:"#10C176",
navigationBarTextStyle:"white",
"app-plus":{
titleNView:true
}
}
},
{
path:"pages/home/newsDetail",
style:{
navigationBarTitleText:"消息详情",
navigationBarBackgroundColor:"#10C176",
navigationBarTextStyle:"white",
"app-plus":{
titleNView:true
}
}
},
] ]

57
uni_modules/d-search/components/d-search/d-search.vue
View File

@ -40,36 +40,10 @@
transition: all 0.2s; transition: all 0.2s;
opacity:0; opacity:0;
&.show{ &.show{
z-index: 320; z-index: 310;
transform: scale(1); transform: scale(1);
opacity:1; opacity:1;
} }
.title{
color:#999;
font-size:24rpx;
font-weight: normal;
}
.content{
display:flex;
flex-wrap: wrap;
margin:14rpx -20rpx -20rpx 0;
text{
height:48rpx;
line-height: 48rpx;
border-radius: 30rpx;
width:calc(100%/5 - 20rpx);
text-align: center;
font-size:24rpx;
margin:0 20rpx 20rpx 0;
transition: all 0.3s;
color:#999;
background:#EEEEEE;
&.active{
color:#fff;
background:#10C176;
}
}
}
} }
&>.mask{ &>.mask{
position:fixed; position:fixed;
@ -89,20 +63,17 @@
} }
</style> </style>
<template> <template>
<view class="d-search" @click="isShow=false"> <view class="d-search" @click="show=false">
<view class="search" @click.stop="" :style="{'--bg':background}"> <view class="search" @click.stop="" :style="{'--bg':background}">
<u-icon name="search" color="#999999" size="20"/> <u-icon name="search" color="#999999" size="20"/>
<input placeholder="请输入搜索内容" :value="(list.find(v=>v.value==value)||{label:''}).label||value" auto-blur @focus="isShow=true" @input="$emit('input',$event.detail.value)" @confirm="isShow=false;$emit('search')"/> <input placeholder="请输入搜索内容" :value="value" auto-blur @focus="show=true" @input="$emit('input',$event.detail.value)" @confirm="show=false;$emit('search')"/>
<text class="plant-zengjia" v-if="value" @click="$emit('input','');$emit('search')"/> <text class="plant-zengjia" v-if="value" @click="$emit('input','');$emit('search')"/>
<u-button type="primary" shape="circle" v-if="btn" color="#10C176" text="搜索" size="mini" @click="$emit('search')"/> <u-button type="primary" shape="circle" v-if="btn" color="#10C176" text="搜索" size="mini" @click="$emit('search')"/>
</view> </view>
<view v-if="list.length>0" @click.stop="" class="want_search card" :class="{show:isShow}"> <view v-if="popup" @click.stop="" class="want_search card" :class="{show:show}">
<text class="title">猜你想搜</text> <slot/>
<view class="content">
<text v-for="(v,k) in list" :class="{active:v.value==selectVal}" :key="k" @click="$emit('select', v.value==selectVal?'':v.value);$emit('search')">{{v.label}}</text>
</view>
</view> </view>
<view class="mask" :class="{show:isShow}" v-if="list.length>0"/> <view class="mask" :class="{show:show}" v-if="popup"/>
</view> </view>
</template> </template>
<script> <script>
@ -112,14 +83,6 @@ export default {
type:String, type:String,
default:"" default:""
}, },
list:{
type:Array,
default:()=>[]
},
selectVal:{
type:[String,Number],
default:''
},
btn:{ btn:{
type:Boolean, type:Boolean,
default:true default:true
@ -127,11 +90,15 @@ export default {
background:{ background:{
type:String, type:String,
default:"#fff" default:"#fff"
} },
popup:{
type:Boolean,
default:false
},
}, },
data(){ data(){
return{ return{
isShow: false, show: false,
} }
}, },
methods:{ methods:{

Write Preview
Loading…
Cancel
Save