traceability
/
agricultural-products-traceability-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed blockDetail to display area in m2, added variety name and type to product list, updated UI elements with new colors and styles, and added note and end-pro icons to the product list.

Browse Source
master
Tuzki 2 years ago
parent c2347ec61a
commit 684c01ab71
1 changed files with 106 additions and 35 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 141
      sunPages/blockDetail/blockDetail.vue

141
sunPages/blockDetail/blockDetail.vue
Unescape View File

@ -8,11 +8,11 @@
<view class="m-mapbox">
<map class="m-map" name="" id="map" :longitude="longitude" :latitude="latitude" :polygons="polygons" enable-satellite="true"></map>
<view class="m-shadow">
<view class="m-mj">{{ blockData.blockArea || '0' }}亩</view>
<view class="m-type"><dict-tag :type="'land_type'" :value="blockData.blockType" class="m-dic-tag" /></view>
<view class="m-mj">占地面积:{{ blockData.blockArea || '0' }}亩</view>
</view>
</view>
<z-tabs :list="tabList" @change="tabChange" />
<z-tabs active-color="#14C171 " :list="tabList" @change="tabChange" />
<view class="m-data-pick" v-if="tabIndex == 2">
<uni-datetime-picker class="no-time-pick" @change="searchData" v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
</view>
@ -27,9 +27,8 @@
<view class="m-pro-name">
{{ item.productName }}
</view>
<view class="m-pro-species">品种：{{ item.speciesName }}</view>
<view class="m-pro-Type">
标准：
<view class="tag-box">
<view class="item-verity" v-if="item.speciesName">{{ item.speciesName }}</view>
<dict-tag class="m-dic-tag" :type="'authentication_type'" :value="item.authenticationType" />
</view>
<view class="m-pro-Time">
@ -39,8 +38,14 @@
</view>
</view>
<view class="m-item-bottom">
<view class="m-note" @click.stop="getNoteList(item)">农事记录</view>
<view class="m-end-pro" @click.stop="stopCropper(item)">种植结束</view>
<view class="m-note" @click.stop="getNoteList(item)">
<uni-icons type="compose" size="16"></uni-icons>
农事记录
</view>
<view class="m-end-pro" @click.stop="stopCropper(item)">
<text class="iconfont icon-end m-r-mini"></text>
种植结束
</view>
</view>
</view>
</template>
@ -52,16 +57,16 @@
<view class="m-pro-name">
{{ item.productName }}
</view>
<view class="m-pro-species">品种：{{ item.speciesName }}</view>
<view class="m-pro-Type">
标准：
<view class="tag-box">
<view class="item-verity" v-if="item.speciesName">{{ item.speciesName }}</view>
<dict-tag class="m-dic-tag" :type="'authentication_type'" :value="item.authenticationType" />
</view>
</view>
</view>
<view class="m-item-bottom noflex">
<uni-steps
:active-color="'#3f3f3f'"
class="m-steps"
:active-color="'#666'"
:options="[
{ title: '种植时间', desc: parseTime(item.plantTime, '{y}-{m}-{d}') },
{ title: '结束时间', desc: parseTime(item.endTime, '{y}-{m}-{d}') }
@ -79,15 +84,14 @@
<view class="m-pro-name">
{{ item.productName }}
</view>
<view class="m-pro-species">品种：{{ item.speciesName }}</view>
<view class="m-pro-Type">
标准：
<view class="tag-box">
<view class="item-verity" v-if="item.speciesName">{{ item.speciesName }}</view>
<dict-tag class="m-dic-tag" :type="'authentication_type'" :value="item.authenticationType" />
</view>
<view class="m-pro-Time">采收时间：{{ parseTime(item.jobTime, '{y}-{m}-{d}') }}</view>
</view>
<view class="m-big-num">
{{ item.production }}
<span class="weight">{{ item.production }}</span>
<br />
公斤
</view>
@ -366,6 +370,7 @@ export default {
height: 500rpx;
overflow: hidden;
position: relative;
border-radius: 10rpx;
.m-map {
width: 100%;
@ -375,27 +380,40 @@ export default {
.m-shadow {
display: flex;
position: absolute;
bottom: 0;
align-items: center;
bottom: 22rpx;
left: 20rpx;
white-space: nowrap;
background: rgba(0, 0, 0, 0.5);
color: #eee;
padding: 15rpx 20rpx;
width: 100%;
justify-content: space-between;
background: #ebfff5;
box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(20, 193, 113, 0.15);
border-radius: 28rpx;
border: 1px solid #ffffff;
padding: 10rpx 15rpx;
width: fit-content;
color: #1b1b1b;
font-size: 24rpx;
/deep/ .m-dic-tag .v-dict-text {
font-size: 28rpx;
/deep/ .m-dic-tag {
margin-right: 16rpx;
color: #fff;
background-color: #14c171;
border: 2rpx solid #14c171;
padding: 2rpx 20rpx;
border-radius: 8rpx;
font-size: 24rpx;
}
}
}
.item {
margin: 30rpx 10rpx;
box-shadow: 0 0 7px 1px #a2a2a2;
padding: 20rpx 15rpx;
margin: 30rpx 20rpx;
box-shadow: 0 0 9px 1px #ddd;
padding: 20rpx 30rpx;
border-radius: 20rpx;
background: #fff;
.m-item-box {
.m-item-top {
border-bottom: solid 1rpx #666;
border-bottom: solid 1rpx #dedede;
display: flex;
padding-bottom: 20rpx;
align-items: center;
@ -403,38 +421,73 @@ export default {
.m-item-img {
width: 150rpx;
height: 150rpx;
border-radius: 50%;
border-radius: 20rpx;
margin-right: 30rpx;
}
.m-pro-custrom {
flex: 1;
.m-pro-name {
font-size: 35rpx;
font-size: 34rpx;
font-weight: bold;
padding-left: 20rpx;
position: relative;
&:before {
content: '';
position: absolute;
top: 20%;
left: 0;
width: 4rpx;
height: 60%;
border-radius: 8rpx;
background-color: #14c171;
}
}
.tag-box {
display: flex;
align-items: center;
margin-top: 10rpx;
margin-bottom: 10rpx;
.item-verity {
font-size: 24rpx;
color: #ffa800;
background-color: rgba(255, 168, 0, 0.1);
border: 2rpx solid rgba(255, 168, 0, 0.1);
margin-right: 15rpx;
padding: 0 10rpx;
}
.m-dic-tag {
font-size: 24rpx;
color: #14c171;
background-color: rgba(20, 193, 113, 0.1);
border: 2rpx solid rgba(20, 193, 113, 0.1);
padding: 0 10rpx;
}
}
.m-pro-Time {
display: flex;
justify-content: space-between;
width: 100%;
color: #666;
.m-daysdiff {
color: #00af7f;
}
}
/deep/ .m-dic-tag .v-dict-text {
font-size: 28rpx;
}
}
.m-big-num {
width: 20%;
font-size: 35rpx;
font-weight: bold;
font-size: 28rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
color: #666;
.weight{
color: #00af7f;
font-weight: bold;
}
}
}
.m-item-bottom {
@ -446,6 +499,24 @@ export default {
.m-note {
margin-right: 20rpx;
background: #14c171;
padding: 4rpx 10rpx;
color: #fff;
border-radius: 10rpx;
display: flex;
align-items: center;
/deep/ .uni-icons {
color: #fff !important;
}
}
.m-end-pro {
background: #ffa800;
color: #fff;
padding: 4rpx 10rpx;
display: flex;
align-items: center;
border-radius: 10rpx;
}
}
.noflex {

Write Preview
Loading…
Cancel
Save