<template>
<view class="page">
<u-navbar :title="title" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
:title-bold='true' height='45' id="navbar">
</u-navbar>
<view class="top">
<view class="top_left">
福鼎蜂场
</view>
<view class="top_right">
其他蜂场 <view class="iconfont icon-xiangyou1" style="font-size: 40rpx;">
</view>
</view>
</view>
<view class="set_log_box">
<view class="tit">
选择操作类型
</view>
<view class="set_type_box">
<view class="type_li" v-for="item in 7" :key="item" :class='item==1?"act1":""'>
换脾
</view>
</view>
<view class="tit" style="margin-top: 48rpx;">
上传操作图片
</view>
<view class="icon">
<view class="imgbox" v-for="(item,index) in imglist " :key="index">
<image :src="item" mode=""></image>
</view>
<view class="imgbox" @click="btn">
<image src="https://api.ccttiot.com/smartmeter/img/static/ulkCEWjWYqwijg7yhdY9" mode=""></image>
</view>
</view>
<view class="tit" style="margin-top: 48rpx;">
操作说明描述
</view>
<view class="input-container">
<view class="placeholder" v-if="!textValue">在此输入文字描述（选填）</view>
<textarea class="custom-textarea" v-model="textValue" @focus="hidePlaceholder" style="border: none;"
@input="updateWordCount" @blur="showPlaceholder"></textarea>
<text class="word-count">{{ currentCount }}/500</text>
</view>
<view class="xy" @click="showxy=!showxy">
<view class="yuans">
<image src="https://lxnapi.ccttiot.com/bike/img/static/u7F851ikY9rkASzNSNkO" v-if='showxy' mode=""></image>
</view>
<view class="txt">
该蜂场的所有蜂箱进行此日志，并记录蜂场日志
</view>
</view>
<view class="btn">
确认添加
</view>
<!-- <view class="img_cont">
<image src="https://api.ccttiot.com/smartmeter/img/static/ulkCEWjWYqwijg7yhdY9" mode=""></image>
</view> -->
</view>
<view class="cont_box" v-if="false">
<view class="left">
<view class="left_cont_box" v-for="(item, index) in tabs" :key="index" @click="changeTag(index)"
:class="currentIndex === index ? 'act4' : ''">
<view class="left_cont" :class="[
index=== currentIndex? 'act1' : '',
index + 1 === currentIndex? 'act2' : '',
index- 1 === currentIndex? 'act3' : ''
]">
{{item.title}}
</view>
</view>
</view>
<view class="right">
<view class="right_cont">
<view class="right_cont_top">
<view class="cont_left">
2024-05-21 09:52:01
</view>
<view class="cont_right">
换脾
</view>
</view>
<view class="cont">
分享车胎愚人节一年电影截图宽银 幕国会女63去爱为用户如上图还有 途客与他
</view>
<view class="imgcont">
<view class="img_box" v-for="item in 8" :key="item">
<image src="" mode=""></image>
</view>
</view>
<view class="log_info">
<view class="txt">
福鼎蜂场-001
</view>
<view class="txt">
21111154689
</view>
</view>
<view class="log_work">
<view class="work_cont">
<image src="https://api.ccttiot.com/smartmeter/img/static/uqvAxjb2kVb4s6Zrx5s8" mode="">
</image>
<view class="cont_xtx">
编辑
</view>
</view>
<view class="work_cont" style="margin-left: 34rpx ;">
<image src="https://api.ccttiot.com/smartmeter/img/static/uWikdpHsjtd8ggSA49gS" mode=""
style="width: 27rpx;height: 30rpx;"> </image>
<view class="cont_xtx">
删除
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: " #F4FAF8",
},
title: "操作日志",
currentIndex: 0,
tabs: [{
title: '京东超市',
},
{
title: '男装',
},
{
title: '奢侈品',
},
{
title: '女装',
},
{
title: '鞋靴',
},
{
title: '内衣饰品',
imageSrc: ''
},
{
title: '箱包',
imageSrc: ''
},
{
title: '美妆护肤',
imageSrc: ''
},
],
textValue: '',
currentCount: 0,
showxy:false
}
},
onLoad() {
},
onShow() {
},
methods: {
hidePlaceholder() {
this.placeholderVisible = false;
},
showPlaceholder() {
if (!this.textValue) {
this.placeholderVisible = true;
}
},
updateWordCount() {
this.currentCount = this.textValue.trim().replace(/\s+/g, '').length;
// if (this.currentCount > 500) {
// this.textValue = this.textValue.slice(0, this.textValue.lastIndexOf(' ', 500)).trim();
// uni.showToast({
// title: '字数已超过500字限制',
// icon: 'none'
// });
// }
},
btn() {
let _this = this
let math = 'static/' + _this.$u.guid(20)
uni.chooseImage({
count: 9,
type: 'all',
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFiles
// let tempFilePaths = chooseImageRes.tempFilePaths;
// console.log(tempFilePaths)
// tempFilePaths.forEach(item=>{
// // 上传图片到七牛云
// })
wx.uploadFile({
url: 'https://up-z2.qiniup.com',
name: 'file',
filePath: tempFilePaths[0].path,
formData: {
token: _this.token, //后端返回的token
key: 'smartmeter/img/' + math
},
success: function(res) {
console.log(res,'resres');
let str = JSON.parse(res.data)
console.log(str.key)
_this.userImgs = _this.upurl +'/'+ str.key
console.log(_this.userImgs)
_this.imglist.push(_this.userImgs)
}
});
}
})
},
changeTag(idx) {
this.currentIndex = idx
},
ClickImage(PhotoAddress) {
uni.previewImage({
urls: [PhotoAddress], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
current: '', // 当前显示图片的http链接，默认是第一个
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
}
}
</script>
<style lang="scss">
page {
background-color: #F4FAF8;
}
.page {
// position: relative;
width: 750rpx;
.set_log_box {
padding: 50rpx 56rpx;
.btn{
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 58rpx;
bottom: 68rpx;
width: 638rpx;
height: 88rpx;
background: #FFCC25;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
}
.xy{
margin-top: 46rpx;
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
.yuans{
margin-top: 2rpx;
display: flex;
align-items: center;
justify-content: center;
width: 34rpx;
height: 34rpx;
border-radius: 50%;
border: #808080 solid 2rpx;
image{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.txt{
margin-left: 10rpx;
font-weight: 400;
font-size: 28rpx;
color: #808080;
span{
color: #3D3D3D;
}
}
}
.input-container {
position: relative;
width: 612rpx;
height: 172rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
border-radius: 20rpx;
margin-top: 40rpx;
overflow: hidden;
padding-right: 38rpx;
box-sizing: border-box;
border: 2rpx solid #C7C7C7;
}
.placeholder {
position: absolute;
top: 18rpx;
left: 38rpx;
color: #999;
/* placeholder颜色 */
pointer-events: none;
/* 确保点击事件可以穿透到textarea上 */
}
.custom-textarea {
width: 100%;
height: 100%;
/* 设置一个合适高度 */
padding-top: 18rpx;
/* 为placeholder留出空间 */
padding-left: 38rpx;
box-sizing: border-box;
border: 1px solid #ccc;
}
.word-count {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
color: #999;
}
.icon {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 40rpx;
.imgbox {
width: 33%;
image {
width: 222rpx;
height: 222rpx;
}
}
}
.tit {
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.set_type_box {
display: flex;
flex-wrap: wrap;
// margin-top: 26rpx;
.type_li {
margin-top: 26rpx;
margin-right: 18rpx;
padding: 12rpx 50rpx;
background: #FFF5D6;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #FFC107;
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
}
.act1 {
background: #FFC107;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #FFC107;
color: #FFFFFF;
}
}
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 22rpx;
margin: 0 auto;
width: 658rpx;
height: 106rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.top_left {
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.top_right {
display: flex;
align-items: center;
flex-wrap: nowrap;
font-weight: 500;
font-size: 36rpx;
color: #808080;
}
}
.cont_box {
margin-top: 26rpx;
display: flex;
flex-wrap: nowrap;
.left {
margin-left: 48rpx;
width: 216rpx;
.left_cont_box {
width: 216rpx;
height: 100rpx;
background: #fff;
.left_cont {
display: flex;
align-items: center;
justify-content: center;
width: 216rpx;
height: 100rpx;
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
background-color: #F4FAF8;
// border-radius: 0rpx 40rpx 40rpx 0rpx;
// border: 1rpx solid #fff;
}
.act1 {
background: #fff;
border-radius: 40rpx 0 0 40rpx;
// box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
}
.act2 {
border-radius: 0rpx 0rpx 40rpx 0rpx;
}
.act3 {
border-radius: 0rpx 40rpx 0rpx 0rpx;
}
}
.act4 {
background-color: #F4FAF8;
border-radius: 40rpx 0 0 40rpx;
}
}
.right {
padding: 16rpx;
margin-left: -10rpx;
width: 100%;
height: 100vn;
background: #fff;
.right_cont {
padding: 20rpx 26rpx;
border: 2rpx solid #D8D8D8;
border-radius: 20rpx;
.log_work {
margin-top: 16rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.work_cont {
display: flex;
flex-wrap: nowrap;
align-items: center;
image {
width: 29rpx;
height: 29rpx;
}
.cont_xtx {
margin-left: 6rpx;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
}
}
.log_info {
margin-top: 16rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.txt {
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
}
.imgcont {
display: flex;
flex-wrap: wrap;
margin-top: 16rpx;
.img_box {
margin-top: 16rpx;
margin-right: 14rpx;
height: 124rpx;
width: 124rpx;
image {
background: #D8D8D8;
border-radius: 12rpx 12rpx 12rpx 12rpx;
height: 124rpx;
width: 124rpx;
}
}
}
// border-radius: 20rpx 20rpx 20rpx 20rpx;
.cont {
margin-top: 16rpx;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.right_cont_top {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.cont_left {
font-weight: 400;
font-size: 28rpx;
color: #808080;
}
.cont_right {
font-weight: 500;
font-size: 28rpx;
color: #FFC107;
}
}
}
// border-radius: 40rpx 0 0 40rpx;
// box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
}
}
}
</style>