parent
d5f10c1bed
commit
2f6d8adff3
@ -0,0 +1,35 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
// 获得农产品 列表—下拉框
|
||||
export function getAgriculturalProductList() { |
||||
return request({ |
||||
url: '/traceability/agricultural-product/selectList', |
||||
method: 'get' |
||||
}) |
||||
} |
||||
|
||||
// 获得产品品种 列表—下拉框
|
||||
export function getSpeciesList(params) { |
||||
return request({ |
||||
url: '/traceability/species/selectList', |
||||
method: 'get', |
||||
params, |
||||
}) |
||||
} |
||||
|
||||
// 获得全部地块列表
|
||||
export function getBlockList(id,status) { |
||||
return request({ |
||||
url: '/traceability/block/all?baseId='+id+'&status='+status, |
||||
method: 'get', |
||||
}) |
||||
} |
||||
|
||||
// 创建农作物信息;
|
||||
export function createCropper(data) { |
||||
return request({ |
||||
url: '/traceability/cropper/create', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
@ -0,0 +1,835 @@ |
||||
<template> |
||||
<view class="htz-image-upload-list"> |
||||
<view class="htz-image-upload-Item" v-for="(item,index) in uploadLists" :key="index"> |
||||
<view class="htz-image-upload-Item-video" v-if="isVideo(item)"> |
||||
<!-- #ifndef APP-PLUS --> |
||||
<video :disabled="false" :controls="false" :src="getFileUrl(item)"> |
||||
<cover-view class="htz-image-upload-Item-video-fixed" @click="previewVideo(getFileUrl(item))"> |
||||
</cover-view> |
||||
|
||||
<cover-view class="htz-image-upload-Item-del-cover" v-if="remove && previewVideoSrc==''" @click="imgDel(index)">×</cover-view> |
||||
|
||||
</video> |
||||
<!-- #endif --> |
||||
<!-- #ifdef APP-PLUS --> |
||||
<view class="htz-image-upload-Item-video-fixed" @click="previewVideo(getFileUrl(item))"></view> |
||||
<image class="htz-image-upload-Item-video-app-poster" mode="widthFix" :src="appVideoPoster"></image> |
||||
<!-- #endif --> |
||||
</view> |
||||
|
||||
<image v-else :src="getFileUrl(item)" @click="imgPreview(getFileUrl(item))"></image> |
||||
|
||||
<view class="htz-image-upload-Item-del" v-if="remove" @click="imgDel(index)">×</view> |
||||
</view> |
||||
<view class="htz-image-upload-Item htz-image-upload-Item-add" v-if="uploadLists.length<max && add" @click="chooseFile"> |
||||
+ |
||||
</view> |
||||
<view class="preview-full" v-if="previewVideoSrc!=''"> |
||||
<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false"> |
||||
<cover-view class="preview-full-close" @click="previewVideoClose"> × |
||||
</cover-view> |
||||
</video> |
||||
</view> |
||||
|
||||
|
||||
<!-- --> |
||||
</view> |
||||
</template> |
||||
|
||||
<style> |
||||
.ceshi { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
top: 0; |
||||
left: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
background-color: #FFFFFF; |
||||
color: #2C405A; |
||||
opacity: 0.5; |
||||
z-index: 100; |
||||
} |
||||
</style> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'htz-image-upload', |
||||
props: { |
||||
max: { //展示图片最大值 |
||||
type: Number, |
||||
default: 1, |
||||
}, |
||||
chooseNum: { //选择图片数 |
||||
type: Number, |
||||
default: 9, |
||||
}, |
||||
name: { //发到后台的文件参数名 |
||||
type: String, |
||||
default: 'file', |
||||
}, |
||||
dataType: { //v-model的数据结构类型 |
||||
type: Number, |
||||
default: 0, // 0: ['http://xxxx.jpg','http://xxxx.jpg'] 1:[{type:0,url:'http://xxxx.jpg'}] type 0 图片 1 视频 url 文件地址 此类型是为了给没有文件后缀的状况使用的 |
||||
}, |
||||
remove: { //是否展示删除按钮 |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
add: { //是否展示添加按钮 |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
disabled: { //是否禁用 |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
sourceType: { //选择照片来源 【ps：H5就别费劲了，设置了也没用。不是我说的，官方文档就这样！！！】 |
||||
type: Array, |
||||
default: () => ['album', 'camera'], |
||||
}, |
||||
action: { //上传地址 如需使用uniCloud服务，设置为uniCloud即可 |
||||
type: String, |
||||
default: '', |
||||
}, |
||||
headers: { //上传的请求头部 |
||||
type: Object, |
||||
default: () => {}, |
||||
}, |
||||
formData: { //HTTP 请求中其他额外的 form data |
||||
type: Object, |
||||
default: () => {}, |
||||
}, |
||||
compress: { //是否需要压缩 |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
quality: { //压缩质量，范围0～100 |
||||
type: Number, |
||||
default: 80, |
||||
}, |
||||
// #ifndef VUE3 |
||||
value: { //受控图片列表 |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
// #endif |
||||
// #ifdef VUE3 |
||||
modelValue: { //受控图片列表 |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
// #endif |
||||
uploadSuccess: { |
||||
default: (res) => { |
||||
return { |
||||
success: false, |
||||
url: '' |
||||
} |
||||
}, |
||||
}, |
||||
mediaType: { //文件类型 image/video/all |
||||
type: String, |
||||
default: 'image', |
||||
}, |
||||
maxDuration: { //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。 (只针对拍摄视频有用) |
||||
type: Number, |
||||
default: 60, |
||||
}, |
||||
camera: { //'front'、'back'，默认'back'(只针对拍摄视频有用) |
||||
type: String, |
||||
default: 'back', |
||||
}, |
||||
appVideoPoster: { //app端视频展示封面 只对app有效 |
||||
type: String, |
||||
default: '/static/htz-image-upload/play.png', |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
uploadLists: [], |
||||
mediaTypeData: ['image', 'video', 'all'], |
||||
previewVideoSrc: '', |
||||
} |
||||
}, |
||||
mounted: function() { |
||||
this.$nextTick(function() { |
||||
// #ifndef VUE3 |
||||
this.uploadLists = this.value; |
||||
// #endif |
||||
// #ifdef VUE3 |
||||
this.uploadLists = this.modelValue; |
||||
// #endif |
||||
if (this.mediaTypeData.indexOf(this.mediaType) == -1) { |
||||
uni.showModal({ |
||||
title: '提示', |
||||
content: 'mediaType参数不正确', |
||||
showCancel: false, |
||||
success: function(res) { |
||||
if (res.confirm) { |
||||
//console.log('用户点击确定'); |
||||
} else if (res.cancel) { |
||||
//console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
watch: { |
||||
// #ifndef VUE3 |
||||
value(val, oldVal) { |
||||
//console.log('value',val, oldVal) |
||||
this.uploadLists = val; |
||||
}, |
||||
// #endif |
||||
// #ifdef VUE3 |
||||
modelValue(val, oldVal) { |
||||
//console.log('value',val, oldVal) |
||||
this.uploadLists = val; |
||||
}, |
||||
// #endif |
||||
|
||||
}, |
||||
methods: { |
||||
isVideo(item) { |
||||
let isPass = false |
||||
if ((!/.(gif|jpg|jpeg|png|gif|jpg|png)$/i.test(item) && this.dataType == 0) || (this.dataType == 1 && item |
||||
.type == 1)) { |
||||
isPass = true |
||||
} |
||||
return isPass |
||||
}, |
||||
getFileUrl(item) { |
||||
var url = item; |
||||
if (this.dataType == 1) { |
||||
url = item.url |
||||
} |
||||
//console.log('url', url) |
||||
return url |
||||
}, |
||||
previewVideo(src) { |
||||
this.previewVideoSrc = src; |
||||
// this.previewVideoSrc = |
||||
// 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-fbd63a76-dc76-485c-b711-f79f2986daeb/ba804d82-860b-4d1a-a706-5a4c8ce137c3.mp4' |
||||
}, |
||||
previewVideoClose() { |
||||
this.previewVideoSrc = '' |
||||
//console.log('previewVideoClose', this.previewVideoSrc) |
||||
}, |
||||
imgDel(index) { |
||||
uni.showModal({ |
||||
title: '提示', |
||||
content: '您确定要删除么?', |
||||
success: (res) => { |
||||
if (res.confirm) { |
||||
// this.uploadLists.splice(index, 1) |
||||
// this.$emit("input", this.uploadLists); |
||||
// this.$emit("imgDelete", this.uploadLists); |
||||
let delUrl = this.uploadLists[index] |
||||
this.uploadLists.splice(index, 1) |
||||
// #ifndef VUE3 |
||||
this.$emit("input", this.uploadLists); |
||||
// #endif |
||||
// #ifdef VUE3 |
||||
this.$emit("update:modelValue", this.uploadLists); |
||||
// #endif |
||||
this.$emit("imgDelete", { |
||||
del: delUrl, |
||||
tempFilePaths: this.uploadLists |
||||
}); |
||||
} else if (res.cancel) {} |
||||
} |
||||
}); |
||||
}, |
||||
imgPreview(index) { |
||||
|
||||
var imgData = [] |
||||
|
||||
this.uploadLists.forEach(item => { |
||||
if (!this.isVideo(item)) { |
||||
imgData.push(this.getFileUrl(item)) |
||||
} |
||||
}) |
||||
|
||||
|
||||
//console.log('imgPreview', imgData) |
||||
uni.previewImage({ |
||||
urls: imgData, |
||||
current: index, |
||||
loop: true, |
||||
}); |
||||
|
||||
|
||||
}, |
||||
chooseFile() { |
||||
if (this.disabled) { |
||||
return false; |
||||
} |
||||
switch (this.mediaTypeData.indexOf(this.mediaType)) { |
||||
case 1: //视频 |
||||
this.videoAdd(); |
||||
break; |
||||
case 2: //全部 |
||||
uni.showActionSheet({ |
||||
itemList: ['相册', '视频'], |
||||
success: (res) => { |
||||
if (res.tapIndex == 1) { |
||||
this.videoAdd(); |
||||
} else if (res.tapIndex == 0) { |
||||
this.imgAdd(); |
||||
} |
||||
}, |
||||
fail: (res) => { |
||||
console.log(res.errMsg); |
||||
} |
||||
}); |
||||
break; |
||||
default: //图片 |
||||
this.imgAdd(); |
||||
break; |
||||
} |
||||
|
||||
|
||||
//if(this.mediaType=='image'){ |
||||
|
||||
|
||||
}, |
||||
videoAdd() { |
||||
//console.log('videoAdd') |
||||
let nowNum = Math.abs(this.uploadLists.length - this.max); |
||||
let thisNum = (this.chooseNum > nowNum ? nowNum : this.chooseNum) //可选数量 |
||||
uni.chooseVideo({ |
||||
compressed: this.compress, |
||||
sourceType: this.sourceType, |
||||
camera: this.camera, |
||||
maxDuration: this.maxDuration, |
||||
success: (res) => { |
||||
// console.log('videoAdd', res) |
||||
// console.log(res.tempFilePath) |
||||
this.chooseSuccessMethod([res.tempFilePath], 1) |
||||
//this.imgUpload([res.tempFilePath]); |
||||
//console.log('tempFiles', res) |
||||
// if (this.action == '') { //未配置上传路径 |
||||
// this.$emit("chooseSuccess", res.tempFilePaths); |
||||
// } else { |
||||
// if (this.compress && (res.tempFiles[0].size / 1024 > 1025)) { //设置了需要压缩 并且 文件大于1M，进行压缩上传 |
||||
// this.imgCompress(res.tempFilePaths); |
||||
// } else { |
||||
// this.imgUpload(res.tempFilePaths); |
||||
// } |
||||
// } |
||||
} |
||||
}); |
||||
}, |
||||
imgAdd() { |
||||
//console.log('imgAdd') |
||||
let nowNum = Math.abs(this.uploadLists.length - this.max); |
||||
let thisNum = (this.chooseNum > nowNum ? nowNum : this.chooseNum) //可选数量 |
||||
//console.log('nowNum', nowNum) |
||||
//console.log('thisNum', thisNum) |
||||
// #ifdef APP-PLUS |
||||
if (this.sourceType.length > 1) { |
||||
uni.showActionSheet({ |
||||
itemList: ['拍摄', '从手机相册选择'], |
||||
success: (res) => { |
||||
if (res.tapIndex == 1) { |
||||
this.appGallery(thisNum); |
||||
} else if (res.tapIndex == 0) { |
||||
this.appCamera(); |
||||
} |
||||
}, |
||||
fail: (res) => { |
||||
console.log(res.errMsg); |
||||
} |
||||
}); |
||||
} |
||||
if (this.sourceType.length == 1 && this.sourceType.indexOf('album') > -1) { |
||||
this.appGallery(thisNum); |
||||
} |
||||
|
||||
if (this.sourceType.length == 1 && this.sourceType.indexOf('camera') > -1) { |
||||
this.appCamera(); |
||||
} |
||||
// #endif |
||||
//#ifndef APP-PLUS |
||||
uni.chooseImage({ |
||||
count: thisNum, |
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 |
||||
sourceType: this.sourceType, |
||||
success: (res) => { |
||||
this.chooseSuccessMethod(res.tempFilePaths, 0) |
||||
//console.log('tempFiles', res) |
||||
// if (this.action == '') { //未配置上传路径 |
||||
// this.$emit("chooseSuccess", res.tempFilePaths); |
||||
// } else { |
||||
// if (this.compress && (res.tempFiles[0].size / 1024 > 1025)) { //设置了需要压缩 并且 文件大于1M，进行压缩上传 |
||||
// this.imgCompress(res.tempFilePaths); |
||||
// } else { |
||||
// this.imgUpload(res.tempFilePaths); |
||||
// } |
||||
// } |
||||
} |
||||
}); |
||||
// #endif |
||||
}, |
||||
appCamera() { |
||||
var cmr = plus.camera.getCamera(); |
||||
var res = cmr.supportedImageResolutions[0]; |
||||
var fmt = cmr.supportedImageFormats[0]; |
||||
//console.log("Resolution: " + res + ", Format: " + fmt); |
||||
cmr.captureImage((path) => { |
||||
//alert("Capture image success: " + path); |
||||
this.chooseSuccessMethod([path], 0) |
||||
}, |
||||
(error) => { |
||||
//alert("Capture image failed: " + error.message); |
||||
console.log("Capture image failed: " + error.message) |
||||
}, { |
||||
resolution: res, |
||||
format: fmt |
||||
} |
||||
); |
||||
}, |
||||
appGallery(maxNum) { |
||||
plus.gallery.pick((res) => { |
||||
this.chooseSuccessMethod(res.files, 0) |
||||
}, function(e) { |
||||
//console.log("取消选择图片"); |
||||
}, { |
||||
filter: "image", |
||||
multiple: true, |
||||
maximum: maxNum |
||||
}); |
||||
}, |
||||
chooseSuccessMethod(filePaths, type) { |
||||
if (this.action == '') { //未配置上传路径 |
||||
this.$emit("chooseSuccess", filePaths, type); //filePaths 路径 type 0 为图片 1为视频 |
||||
} else { |
||||
if (type == 1) { |
||||
this.imgUpload(filePaths, type); |
||||
} else { |
||||
if (this.compress) { //设置了需要压缩 |
||||
this.imgCompress(filePaths, type); |
||||
} else { |
||||
this.imgUpload(filePaths, type); |
||||
} |
||||
} |
||||
|
||||
} |
||||
}, |
||||
imgCompress(tempFilePaths, type) { //type 0 为图片 1为视频 |
||||
uni.showLoading({ |
||||
title: '压缩中...' |
||||
}); |
||||
|
||||
let compressImgs = []; |
||||
let results = []; |
||||
tempFilePaths.forEach((item, index) => { |
||||
compressImgs.push(new Promise((resolve, reject) => { |
||||
// #ifndef H5 |
||||
uni.compressImage({ |
||||
src: item, |
||||
quality: this.quality, |
||||
success: res => { |
||||
//console.log('compressImage', res.tempFilePath) |
||||
results.push(res.tempFilePath); |
||||
resolve(res.tempFilePath); |
||||
}, |
||||
fail: (err) => { |
||||
//console.log(err.errMsg); |
||||
reject(err); |
||||
}, |
||||
complete: () => { |
||||
//uni.hideLoading(); |
||||
} |
||||
}) |
||||
// #endif |
||||
// #ifdef H5 |
||||
this.canvasDataURL(item, { |
||||
quality: this.quality / 100 |
||||
}, (base64Codes) => { |
||||
//this.imgUpload(base64Codes); |
||||
results.push(base64Codes); |
||||
resolve(base64Codes); |
||||
}) |
||||
// #endif |
||||
})) |
||||
}) |
||||
Promise.all(compressImgs) //执行所有需请求的接口 |
||||
.then((results) => { |
||||
uni.hideLoading(); |
||||
//console.log('imgCompress', type) |
||||
this.imgUpload(results, type); |
||||
}) |
||||
.catch((res, object) => { |
||||
uni.hideLoading(); |
||||
}); |
||||
}, |
||||
imgUpload(tempFilePaths, type) { //type 0 为图片 1为视频 |
||||
// if (this.action == '') { |
||||
// uni.showToast({ |
||||
// title: '未配置上传地址', |
||||
// icon: 'none', |
||||
// duration: 2000 |
||||
// }); |
||||
// return false; |
||||
// } |
||||
if (this.action == 'uniCloud') { |
||||
this.uniCloudUpload(tempFilePaths, type) |
||||
return |
||||
} |
||||
uni.showLoading({ |
||||
title: '上传中' |
||||
}); |
||||
//console.log('imgUpload', tempFilePaths) |
||||
let uploadImgs = []; |
||||
tempFilePaths.forEach((item, index) => { |
||||
uploadImgs.push(new Promise((resolve, reject) => { |
||||
//console.log(index, item) |
||||
const uploadTask = uni.uploadFile({ |
||||
url: this.action, //仅为示例，非真实的接口地址 |
||||
filePath: item, |
||||
name: this.name, |
||||
fileType: 'image', |
||||
formData: this.formData, |
||||
header: this.headers, |
||||
success: (uploadFileRes) => { |
||||
//uni.hideLoading(); |
||||
//console.log(typeof this.uploadSuccess) |
||||
//console.log('') |
||||
uploadFileRes.fileType = type |
||||
if (typeof this.uploadSuccess == 'function') { |
||||
|
||||
let thisUploadSuccess = this.uploadSuccess( |
||||
uploadFileRes) |
||||
if (thisUploadSuccess.success) { |
||||
let keyName = ''; |
||||
// #ifndef VUE3 |
||||
keyName = 'value' |
||||
// #endif |
||||
// #ifdef VUE3 |
||||
keyName = 'modelValue' |
||||
// #endif |
||||
if (this.dataType == 0) { |
||||
this[keyName].push(thisUploadSuccess.url) |
||||
} else { |
||||
this[keyName].push({ |
||||
type: type, |
||||
url: thisUploadSuccess.url, |
||||
...thisUploadSuccess |
||||
}) |
||||
} |
||||
|
||||
//this.$emit("input", this.uploadLists); |
||||
// #ifndef VUE3 |
||||
this.$emit("input", this.uploadLists); |
||||
// #endif |
||||
// #ifdef VUE3 |
||||
this.$emit("update:modelValue", this.uploadLists); |
||||
// #endif |
||||
} |
||||
} |
||||
resolve(uploadFileRes); |
||||
this.$emit("uploadSuccess", uploadFileRes); |
||||
}, |
||||
fail: (err) => { |
||||
console.log(err); |
||||
//uni.hideLoading(); |
||||
reject(err); |
||||
this.$emit("uploadFail", err); |
||||
}, |
||||
complete: () => { |
||||
//uni.hideLoading(); |
||||
} |
||||
}); |
||||
})) |
||||
}) |
||||
Promise.all(uploadImgs) //执行所有需请求的接口 |
||||
.then((results) => { |
||||
uni.hideLoading(); |
||||
}) |
||||
.catch((res, object) => { |
||||
uni.hideLoading(); |
||||
this.$emit("uploadFail", res); |
||||
}); |
||||
// uploadTask.onProgressUpdate((res) => { |
||||
// //console.log('',) |
||||
// uni.showLoading({ |
||||
// title: '上传中' + res.progress + '%' |
||||
// }); |
||||
// if (res.progress == 100) { |
||||
// uni.hideLoading(); |
||||
// } |
||||
// }); |
||||
}, |
||||
uniCloudUpload(tempFilePaths, type) { |
||||
uni.showLoading({ |
||||
title: '上传中' |
||||
}); |
||||
console.log('uniCloudUpload', tempFilePaths); |
||||
let uploadImgs = []; |
||||
tempFilePaths.forEach((item, index) => { |
||||
uploadImgs.push(new Promise((resolve, reject) => { |
||||
|
||||
uniCloud.uploadFile({ |
||||
filePath: item, |
||||
cloudPath: this.guid() + '.' + this.getFileType(item, type), |
||||
success(uploadFileRes) { |
||||
if (uploadFileRes.success) { |
||||
resolve(uploadFileRes.fileID); |
||||
} |
||||
}, |
||||
fail(err) { |
||||
console.log(err); |
||||
reject(err); |
||||
}, |
||||
complete() {} |
||||
}); |
||||
|
||||
})) |
||||
}) |
||||
Promise.all(uploadImgs) //执行所有需请求的接口 |
||||
.then((results) => { |
||||
uni.hideLoading(); |
||||
// console.log('then', results) |
||||
|
||||
uniCloud.getTempFileURL({ |
||||
fileList: results, |
||||
success: (res) => { |
||||
//console.log('success',res.fileList) |
||||
res.fileList.forEach(item => { |
||||
//console.log(item.tempFileURL) |
||||
//this.value.push(item.tempFileURL) |
||||
// #ifndef VUE3 |
||||
this.value.push(item.tempFileURL) |
||||
this.$emit("input", this.value); |
||||
// #endif |
||||
// #ifdef VUE3 |
||||
this.modelValue.push(item.tempFileURL) |
||||
this.$emit("update:modelValue", this.modelValue); |
||||
// #endif |
||||
}) |
||||
}, |
||||
fail() {}, |
||||
complete() {} |
||||
}); |
||||
}) |
||||
.catch((res, object) => { |
||||
uni.hideLoading(); |
||||
}); |
||||
}, |
||||
getFileType(path, type) { //手机端默认图片为jpg 视频为mp4 |
||||
// #ifdef H5 |
||||
var result = type == 0 ? 'jpg' : 'mp4'; |
||||
// #endif |
||||
|
||||
|
||||
// #ifndef H5 |
||||
var result = path.split('.').pop().toLowerCase(); |
||||
// #ifdef MP |
||||
if (this.compress) { //微信小程序压缩完没有后缀 |
||||
result = type == 0 ? 'jpg' : 'mp4'; |
||||
} |
||||
// #endif |
||||
// #endif |
||||
return result; |
||||
}, |
||||
guid() { |
||||
return 'xxxxxxxx-date-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { |
||||
var r = Math.random() * 16 | 0, |
||||
v = c == 'x' ? r : (r & 0x3 | 0x8); |
||||
return v.toString(16); |
||||
}).replace(/date/g, function(c) { |
||||
return Date.parse(new Date()); |
||||
}); |
||||
}, |
||||
canvasDataURL(path, obj, callback) { |
||||
var img = new Image(); |
||||
img.src = path; |
||||
img.onload = function() { |
||||
var that = this; |
||||
// 默认按比例压缩 |
||||
var w = that.width, |
||||
h = that.height, |
||||
scale = w / h; |
||||
w = obj.width || w; |
||||
h = obj.height || (w / scale); |
||||
var quality = 0.8; // 默认图片质量为0.8 |
||||
//生成canvas |
||||
var canvas = document.createElement('canvas'); |
||||
var ctx = canvas.getContext('2d'); |
||||
// 创建属性节点 |
||||
var anw = document.createAttribute("width"); |
||||
anw.nodeValue = w; |
||||
var anh = document.createAttribute("height"); |
||||
anh.nodeValue = h; |
||||
canvas.setAttributeNode(anw); |
||||
canvas.setAttributeNode(anh); |
||||
ctx.drawImage(that, 0, 0, w, h); |
||||
// 图像质量 |
||||
if (obj.quality && obj.quality <= 1 && obj.quality > 0) { |
||||
quality = obj.quality; |
||||
} |
||||
// quality值越小，所绘制出的图像越模糊 |
||||
var base64 = canvas.toDataURL('image/jpeg', quality); |
||||
// 回调函数返回base64的值 |
||||
callback(base64); |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.preview-full { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 1002; |
||||
} |
||||
|
||||
.preview-full video { |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 1002; |
||||
} |
||||
|
||||
.preview-full-close { |
||||
position: fixed; |
||||
right: 32rpx; |
||||
top: 25rpx; |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
line-height: 60rpx; |
||||
text-align: center; |
||||
z-index: 1003; |
||||
/* background-color: #808080; */ |
||||
color: #fff; |
||||
font-size: 65rpx; |
||||
font-weight: bold; |
||||
text-shadow: 1px 2px 5px rgb(0 0 0); |
||||
} |
||||
|
||||
|
||||
|
||||
/* .preview-full-close-before, |
||||
.preview-full-close-after { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
content: ''; |
||||
height: 60rpx; |
||||
margin-top: -30rpx; |
||||
width: 6rpx; |
||||
margin-left: -3rpx; |
||||
background-color: #FFFFFF; |
||||
z-index: 20000; |
||||
} |
||||
|
||||
.preview-full-close-before { |
||||
transform: rotate(45deg); |
||||
|
||||
} |
||||
|
||||
.preview-full-close-after { |
||||
transform: rotate(-45deg); |
||||
|
||||
} */ |
||||
|
||||
.htz-image-upload-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
.htz-image-upload-Item { |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
margin: 13rpx; |
||||
border-radius: 10rpx; |
||||
position: relative; |
||||
} |
||||
|
||||
.htz-image-upload-Item image { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 10rpx; |
||||
} |
||||
|
||||
.htz-image-upload-Item-video { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 10rpx; |
||||
position: relative; |
||||
|
||||
} |
||||
|
||||
.htz-image-upload-Item-video-fixed { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 10rpx; |
||||
z-index: 996; |
||||
|
||||
} |
||||
|
||||
.htz-image-upload-Item video { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 10rpx; |
||||
|
||||
} |
||||
|
||||
.htz-image-upload-Item-add { |
||||
font-size: 105rpx; |
||||
/* line-height: 160rpx; */ |
||||
text-align: center; |
||||
border: 1px dashed #d9d9d9; |
||||
color: #d9d9d9; |
||||
} |
||||
|
||||
.htz-image-upload-Item-del { |
||||
background-color: #f5222d; |
||||
font-size: 24rpx; |
||||
position: absolute; |
||||
width: 35rpx; |
||||
height: 35rpx; |
||||
line-height: 35rpx; |
||||
text-align: center; |
||||
top: 0; |
||||
right: 0; |
||||
z-index: 997; |
||||
color: #fff; |
||||
} |
||||
|
||||
.htz-image-upload-Item-del-cover { |
||||
background-color: #f5222d; |
||||
font-size: 24rpx; |
||||
position: absolute; |
||||
width: 35rpx; |
||||
height: 35rpx; |
||||
text-align: center; |
||||
top: 0; |
||||
right: 0; |
||||
color: #fff; |
||||
/* #ifdef APP-PLUS */ |
||||
line-height: 25rpx; |
||||
/* #endif */ |
||||
/* #ifndef APP-PLUS */ |
||||
line-height: 35rpx; |
||||
/* #endif */ |
||||
z-index: 997; |
||||
|
||||
} |
||||
|
||||
.htz-image-upload-Item-video-app-poster { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
@ -1,7 +1,20 @@ |
||||
{ |
||||
"dependencies": { |
||||
"crypto-js": "^4.2.0", |
||||
"jsencrypt": "^3.3.2", |
||||
"jsrsasign": "^11.1.0" |
||||
} |
||||
"id": "sunui-upimg", |
||||
"name": "图片上传", |
||||
"displayName": "图片上传", |
||||
"version": "v2.77", |
||||
"description": "图片上传插件", |
||||
"keywords": [ |
||||
"图片上传", |
||||
"上传图片", |
||||
"h5", |
||||
"小程序", |
||||
"多图片上传" |
||||
], |
||||
"dcloudext": { |
||||
"category": [ |
||||
"前端组件", |
||||
"通用组件" |
||||
] |
||||
} |
||||
} |
||||
|
||||
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 885 B After Width: | Height: | Size: 574 B |
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 507 B After Width: | Height: | Size: 374 B |
|
Before Width: | Height: | Size: 722 KiB After Width: | Height: | Size: 714 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 765 B |
|
After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
@ -0,0 +1,305 @@ |
||||
<template> |
||||
<view class="v-pages"> |
||||
<view class="v-form v-container"> |
||||
<uni-forms :modelValue="formData" ref="formRef" :label-width="80" border :rules="formRules"> |
||||
<view class="v-form-item"> |
||||
<uni-forms-item label="认证类型" name="authenticationType" required> |
||||
<uni-data-picker class="m-data-pick" popupTitle=" " v-model="formData.authenticationType" :localdata="authenticationList" @change="getCustomChange"></uni-data-picker> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="认证图片" name="authenticationPic"> |
||||
<htz-image-upload |
||||
class="m-img-upload" |
||||
:max="1" |
||||
v-model="imgList" |
||||
mediaType="image" |
||||
:chooseNum="1" |
||||
:sourceType="['album', 'camera']" |
||||
:compress="false" |
||||
:quality="80" |
||||
:remove="true" |
||||
:headers="headers" |
||||
@uploadSuccess="ceshiUploadSuccess1" |
||||
@imgDelete="ceshiImgDelete" |
||||
@uploadFail="ceshiUploadFail" |
||||
:action="baseUrls" |
||||
></htz-image-upload> |
||||
<uni-easyinput class="not-show" v-model="formData.authenticationPic" placeholder=" " /> |
||||
</uni-forms-item> |
||||
</view> |
||||
<view class="v-form-item"> |
||||
<uni-forms-item label="种植方式" name="plantingWay" required> |
||||
<uni-data-picker class="m-data-pick" popupTitle=" " v-model="formData.plantingWay" :localdata="plantingWayList" @change="getCustomChange"></uni-data-picker> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="作业方式" name="jobWay" required> |
||||
<uni-data-picker class="m-data-pick" popupTitle=" " v-model="formData.jobWay" :localdata="operationWayList" @change="getCustomChange"></uni-data-picker> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="种植时间" name="plantingTime" required> |
||||
<uni-datetime-picker :clear-icon="false" type="date" returnType="timestamp" v-model="formData.plantingTime" @change="changeLog($event)" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="种植面积" name="plantingArea" required> |
||||
<uni-easyinput :disabled="formData.blockName == undefined" class="uni-mt-5" v-model="formData.plantingArea" @blur="checkArea"> |
||||
<template slot="right" class="m-kg">亩</template> |
||||
</uni-easyinput> |
||||
<spna v-if="formData.blockName != undefined" class="m-notice"> |
||||
可种植面积 |
||||
<span class="color-red">{{ formData.blockArea }}</span> |
||||
亩 |
||||
</spna> |
||||
</uni-forms-item> |
||||
</view> |
||||
<view class="v-form-item"> |
||||
<uni-forms-item label="种植地块" name="blockName" required> |
||||
<uni-easyinput class="uni-mt-5 m-padding-rigt" suffixIcon="right" v-model="formData.blockName" placeholder="请选择地块" @focus="goSearch"></uni-easyinput> |
||||
<uni-easyinput class="uni-mt-5 not-show" v-model="formData.blockId"></uni-easyinput> |
||||
</uni-forms-item> |
||||
</view> |
||||
<view class="v-form-item"> |
||||
<uni-forms-item label="预计采收时间" name="harvestTime"> |
||||
<uni-datetime-picker :clear-icon="false" type="date" returnType="timestamp" v-model="formData.harvestTime" @change="changeLog($event)" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="预计亩产" name="production"> |
||||
<uni-easyinput v-model="formData.production" placeholder="请输入预计亩产量"> |
||||
<template slot="right" class="m-kg">公斤</template> |
||||
</uni-easyinput> |
||||
</uni-forms-item> |
||||
</view> |
||||
</uni-forms> |
||||
<view class="fixed fixedBottom"> |
||||
<button class="m-t-large v-primary-btn large" @click="submitForm()">保存</button> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import mix from '@/utils/mix.js'; |
||||
import { getDictDatas, DICT_TYPE } from '@/utils/dict'; |
||||
import { getAccessToken } from '@/utils/auth'; |
||||
import config from '@/config'; |
||||
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'; |
||||
import { createCropper } from '@/api/system/addCrop/addCrop.js'; |
||||
export default { |
||||
components: { |
||||
htzImageUpload |
||||
}, |
||||
data() { |
||||
return { |
||||
authenticationList: [], //认证类型 |
||||
plantingWayList: [], //种植方式 |
||||
operationWayList: [], //作业方式 |
||||
showBlock: false, |
||||
formData: { |
||||
id: undefined, |
||||
blockId: undefined, |
||||
productId: undefined, |
||||
speciesId: undefined, |
||||
authenticationType: undefined, |
||||
authenticationPic: undefined, |
||||
plantingWay: undefined, |
||||
jobWay: undefined, |
||||
plantingTime: undefined, |
||||
plantingArea: undefined, |
||||
harvestTime: undefined, |
||||
production: undefined, |
||||
|
||||
blockArea: undefined, |
||||
blockName: undefined |
||||
}, |
||||
// 表单校验 |
||||
formRules: {}, |
||||
baseUrls: config.baseUrl + config.baseApi + '/infra/file/upload', |
||||
headers: { Authorization: 'Bearer ' + getAccessToken() }, // 设置上传的请求头部 |
||||
imgList: [] |
||||
}; |
||||
}, |
||||
mixins: [mix], |
||||
onLoad(options) { |
||||
if (options.params) { |
||||
this.formData = JSON.parse(options.params); |
||||
if(this.formData.authenticationPic!=undefined){ |
||||
this.imgList.push(this.formData.authenticationPic) |
||||
} |
||||
} |
||||
}, |
||||
onReady() { |
||||
// 设置自定义表单校验规则，必须在节点渲染完毕后执行 |
||||
this.$refs.formRef.setRules(this.formRules); |
||||
setTimeout(() => { |
||||
this.formData.plantingTime = new Date().valueOf(); |
||||
}, 500); |
||||
}, |
||||
onShow() { |
||||
//认证类型 数据字典查询 |
||||
let arr = this.getDictDatas(DICT_TYPE.AUTHENTICATION_TYPE); |
||||
arr.forEach((item) => { |
||||
item.text = item.label; |
||||
}); |
||||
this.authenticationList = arr; |
||||
//种植方式 PLANTING_WAY |
||||
let arr1 = this.getDictDatas(DICT_TYPE.PLANTING_WAY); |
||||
arr1.forEach((item) => { |
||||
item.text = item.label; |
||||
}); |
||||
this.plantingWayList = arr1; |
||||
//作业方式 OPERATION_WAY |
||||
let arr2 = this.getDictDatas(DICT_TYPE.OPERATION_WAY); |
||||
arr2.forEach((item) => { |
||||
item.text = item.label; |
||||
}); |
||||
this.operationWayList = arr2; |
||||
}, |
||||
|
||||
methods: { |
||||
getCustomChange() { |
||||
console.log(this.formData); |
||||
}, |
||||
ceshiUploadSuccess1(res) { |
||||
//上传成功 |
||||
var _res = JSON.parse(res.data); |
||||
console.log('_res', _res); |
||||
if (_res.code == 0) { |
||||
this.imgList.push(_res.data); |
||||
this.formData.authenticationPic = _res.data; |
||||
} |
||||
}, |
||||
ceshiImgDelete(e) { |
||||
console.log('ceshiImgDelete', e); |
||||
}, |
||||
ceshiUploadFail(err) { |
||||
//上传失败 |
||||
console.log('err', err); |
||||
}, |
||||
changeLog(e) { |
||||
console.log('change事件:', e, this.formData); |
||||
}, |
||||
checkArea() { |
||||
if (this.formData.plantingArea > this.formData.blockArea) { |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: '警告：种植面积不可大于地块面积' |
||||
}); |
||||
this.showBlock = false; |
||||
} else { |
||||
this.showBlock = true; |
||||
} |
||||
}, |
||||
goSearch() { |
||||
const val = JSON.stringify(this.formData); |
||||
uni.navigateTo({ |
||||
url: '/sunPages/commonSearch/commonSearch?isBlock=1¶ms='+val |
||||
}); |
||||
}, |
||||
reset() { |
||||
this.showBlock=false; |
||||
this.formData= { |
||||
id: undefined, |
||||
blockId: undefined, |
||||
productId: undefined, |
||||
speciesId: undefined, |
||||
authenticationType: undefined, |
||||
authenticationPic: undefined, |
||||
plantingWay: undefined, |
||||
jobWay: undefined, |
||||
plantingTime: undefined, |
||||
plantingArea: undefined, |
||||
harvestTime: undefined, |
||||
production: undefined, |
||||
|
||||
blockArea: undefined, |
||||
blockName: undefined |
||||
}; |
||||
}, |
||||
submitForm(){ |
||||
console.log(this.formData) |
||||
// 校验主表 |
||||
if(this.showBlock == false){ |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: '警告：种植面积不可大于地块面积' |
||||
}); |
||||
return false |
||||
} |
||||
this.$refs['formRef'].validate().then((res) => { |
||||
console.log('success', res); |
||||
createProduct(res) |
||||
.then((res) => { |
||||
uni.showToast({ |
||||
title: `新增成功`, |
||||
duration: 1500, |
||||
success() { |
||||
setTimeout(() => { |
||||
this_.reset(); |
||||
uni.switchTab({ |
||||
url: '/pages/index' |
||||
}); |
||||
}, 1500); |
||||
} |
||||
}); |
||||
}) |
||||
.catch((err) => { |
||||
console.log(err); |
||||
}); |
||||
}) |
||||
.catch((err) => { |
||||
console.log('err', err); |
||||
}); |
||||
// try { |
||||
// const data = this.formData |
||||
// await ProductApi.createProduct(data) |
||||
// uni.showToast({ |
||||
// title: `保存成功`, |
||||
// icon: 'success', |
||||
// duration: 2000, |
||||
// complete: function() { |
||||
// setTimeout(function() { |
||||
// uni.redirectTo({ |
||||
// url: '/pages/index' |
||||
// }); |
||||
// }, 2000); |
||||
// } |
||||
// }) |
||||
// } finally {} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.not-show { |
||||
display: none; |
||||
} |
||||
.m-kg { |
||||
background: #eee; |
||||
padding: 0 11rpx; |
||||
border-radius: 15rpx; |
||||
margin-left: 10rpx; |
||||
color: #929292; |
||||
font-size: 20rpx; |
||||
height: 55rpx; |
||||
line-height: 55rpx; |
||||
} |
||||
/deep/ .m-padding-rigt .uni-easyinput__content-input { |
||||
padding-right: 25rpx; |
||||
} |
||||
|
||||
/deep/ .m-data-pick .selected-area { |
||||
padding-right: 35rpx; |
||||
} |
||||
// /deep/ .m-img-upload .htz-image-upload-list { |
||||
// flex-direction: row-reverse; |
||||
|
||||
// .htz-image-upload-Item-add { |
||||
// line-height: 130rpx; |
||||
// } |
||||
// } |
||||
.m-notice { |
||||
background: #ddfff3; |
||||
padding: 6rpx 10rpx; |
||||
border-radius: 10rpx; |
||||
font-size: 24rpx; |
||||
color: #4a4a4a; |
||||
|
||||
.color-red { |
||||
color: #fc0022; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,166 @@ |
||||
<template> |
||||
<view class="page-box"> |
||||
<view class="m-bg"> |
||||
<view class="m-bg-left">添加农作物</view> |
||||
</view> |
||||
<view class="m-form"> |
||||
<uni-section title="作物" type="line" padding> |
||||
<uni-easyinput class="uni-mt-5" suffixIcon="right" v-model="reviceData.productName" placeholder="请选择作物" @focus="goSearch"></uni-easyinput> |
||||
</uni-section> |
||||
<uni-section title="品种" type="line" padding> |
||||
<uni-easyinput class="uni-mt-5" suffixIcon="right" v-model="reviceData.speciesName" placeholder="请选择品种" @focus="openPopupSelect"></uni-easyinput> |
||||
</uni-section> |
||||
<hy-popup-select v-model="reviceData.speciesId" :list="SpeciesList" :filterKeys="['speciesName','name']" ref="popupRef" |
||||
@save="done"> |
||||
<template slot-scope="{item,index}"> |
||||
<view style="margin-top: 12rpx;"> |
||||
{{item.speciesName}} |
||||
</view> |
||||
</template> |
||||
</hy-popup-select> |
||||
<button class="m-next-step" @click="nextStep">下一步</button> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import hyPopupSelect from "@/sunPages/uni_modules/hy-popup-select/components/hy-popup-select/hy-popup-select" |
||||
import uniSection from "@/components/uni-section/uni-section" |
||||
import { getSpeciesList } from '@/api/system/addCrop/addCrop.js'; |
||||
export default { |
||||
components: { |
||||
uniSection, |
||||
hyPopupSelect |
||||
}, |
||||
data() { |
||||
return { |
||||
reviceData: null, |
||||
value: null, |
||||
SpeciesList:null, |
||||
}; |
||||
}, |
||||
onLoad(options) { |
||||
if (options.params) { |
||||
this.reviceData = JSON.parse(decodeURIComponent(options.params)); |
||||
console.log(this.reviceData); |
||||
} else { |
||||
this.reviceData = null; |
||||
} |
||||
}, |
||||
watch: { |
||||
reviceData: { |
||||
handler(val) { |
||||
if (val != null) { |
||||
if(val.productId){ |
||||
this.getSpeciesList(val.productId) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
goSearch() { |
||||
if (this.reviceData != null) { |
||||
const obj = { |
||||
blockID: this.reviceData.id, |
||||
blockName:this.reviceData.blockName, |
||||
baseId: this.reviceData.baseId, |
||||
blockArea:this.reviceData.blockArea |
||||
}; |
||||
const val = JSON.stringify(obj); |
||||
console.log(val); |
||||
uni.redirectTo({ |
||||
url: '/sunPages/commonSearch/commonSearch?isBlock=2¶ms=' + val |
||||
}); |
||||
} else { |
||||
uni.redirectTo({ |
||||
url: '/sunPages/commonSearch/commonSearch?isBlock=2' |
||||
}); |
||||
} |
||||
}, |
||||
//品种下拉 |
||||
getSpeciesList(val) { |
||||
let params = { productId: val }; |
||||
getSpeciesList(params) |
||||
.then((res) => { |
||||
console.log(res) |
||||
this.SpeciesList = res.data; |
||||
}) |
||||
.catch((err) => { |
||||
console.log(err); |
||||
}); |
||||
}, |
||||
// 打开单选弹窗 |
||||
openPopupSelect() { |
||||
this.$refs.popupRef.open() |
||||
}, |
||||
// 单选选中确认事件 |
||||
done(ids, arr) { |
||||
this.reviceData.speciesId = arr[0].id |
||||
this.reviceData.speciesName = arr[0].speciesName |
||||
}, |
||||
nextStep() { |
||||
if(!this.reviceData.productId){ |
||||
uni.showToast({ |
||||
icon:'error', |
||||
title:'请选择作物' |
||||
}) |
||||
return false |
||||
} |
||||
if(!this.reviceData.speciesId){ |
||||
uni.showToast({ |
||||
icon:'error', |
||||
title:'请选品种' |
||||
}) |
||||
return false |
||||
} |
||||
console.log(this.reviceData) |
||||
const val = JSON.stringify(this.reviceData) |
||||
uni.navigateTo({ |
||||
url:'/sunPages/addCropForm/addCropForm?params='+val |
||||
}) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.page-box { |
||||
height: 100vh; |
||||
background-color: #fff; |
||||
} |
||||
.m-bg { |
||||
width: 100%; |
||||
height: 373rpx; |
||||
padding: 40rpx 20rpx 40rpx 100rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
background-image: url(../../static/images/searchBg/search-bg.png); |
||||
background-repeat: no-repeat; |
||||
background-position: 100% -70rpx; |
||||
background-size: 72%; |
||||
background-color: #fff; |
||||
|
||||
.m-bg-left { |
||||
width: 178rpx; |
||||
height: 34rpx; |
||||
font-family: Source Han Sans SC; |
||||
font-weight: 500; |
||||
font-size: 36rpx; |
||||
color: #1b1b1b; |
||||
} |
||||
} |
||||
.m-form { |
||||
padding: 0 30rpx; |
||||
background: #fff; |
||||
} |
||||
.m-next-step { |
||||
margin-top: 20rpx; |
||||
width: 650rpx; |
||||
height: 80rpx; |
||||
background: linear-gradient(180deg, #14c171, #60f0ad); |
||||
border-radius: 50rpx; |
||||
color: #fff; |
||||
line-height: 80rpx; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,290 @@ |
||||
<template> |
||||
<view class="search-box"> |
||||
<d-search-log |
||||
:color_border="color_border" |
||||
:color_text="color_border" |
||||
:store_key="store_key" |
||||
@onClickDelAllApi="onClickDelAll" |
||||
@onSearchNameApi="onSearchName" |
||||
:is_show_more="showMore" |
||||
> |
||||
<template v-if="showCrop && !showBlock" class="m-data-list" slot="dataList"> |
||||
<view class="m-data-box" v-for="item in data"> |
||||
<view class="m-variety-name">{{ item.varietyName }}</view> |
||||
<view class="m-variety-item-box"> |
||||
<view class="m-variety-item" v-for="items in item.products" @click="check(items)"> |
||||
{{ items.productName }} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<template v-if="!showCrop && !showBlock" class="m-sdata-list" slot="searchData"> |
||||
<view class="m-sdata-box" v-for="item in searchData" @click="check(item)"> |
||||
<view class="m-variety-name"> |
||||
<image style="width: 100%; height: 100%; background-color: #d4d4d4" mode="aspectFit" :src="item.productPic" @error="imageError"></image> |
||||
</view> |
||||
<view class="m-variety-item-box"> |
||||
<view class="m-variety-item-name"> |
||||
{{ item.productName }} |
||||
<span class="m-jiao">{{ item.varietyName }}</span> |
||||
</view> |
||||
<view class="m-variety-item-species"> |
||||
{{ item.speciesName }} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<template v-if="showBlock" class="m-sdata-list" slot="searchData"> |
||||
<view class="m-sdata-box" v-for="item in searchData" @click="check(item, 1)"> |
||||
<view class="m-variety-item-name"> |
||||
{{ item.blockName }} |
||||
<span class="m-jiao">当前未种植</span> |
||||
</view> |
||||
<view class="m-variety-item-species"> |
||||
<dict-tag :type="'land_type'" :value="item.blockType" class="m-dic-tag" /> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
</d-search-log> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import dSearchLog from '@/sunPages/uni_modules/d-search-log/components/d-search-log/d-search-log.vue'; |
||||
import { getAgriculturalProductList, getBlockList } from '@/api/system/addCrop/addCrop.js'; |
||||
import DictTag from '@/components/DictTag/index.vue'; |
||||
|
||||
export default { |
||||
components: { |
||||
dSearchLog: dSearchLog, |
||||
DictTag : DictTag |
||||
}, |
||||
computed: {}, |
||||
|
||||
data() { |
||||
return { |
||||
color_border: '#989898', |
||||
store_key: 'search_list', |
||||
showMore: true, |
||||
showCrop: true, |
||||
showBlock: false, |
||||
data: [], |
||||
allData: [], |
||||
searchData: [], |
||||
resviceData: null |
||||
}; |
||||
}, |
||||
onLoad(options) { |
||||
console.log(options); |
||||
if (options.isBlock == 2) { |
||||
if (options.params) { |
||||
this.resviceData = JSON.parse(options.params); |
||||
} else { |
||||
this.resviceData = null; |
||||
} |
||||
console.log(this.resviceData); |
||||
this.getAgriculturalProductList(); |
||||
this.showBlock = false; |
||||
this.showCrop = true; |
||||
} else { |
||||
this.resviceData = JSON.parse(options.params); |
||||
this.getBlockList(); |
||||
this.showBlock = true; |
||||
this.showCrop = false; |
||||
this.showMore = false; |
||||
} |
||||
}, |
||||
methods: { |
||||
onClickDelAll() { |
||||
console.log('[父级接收事件]：删除全部搜索记录'); |
||||
}, |
||||
onSearchName(e) { |
||||
console.log('[父级接收事件]：点击搜索:' + e); |
||||
if (this.showBlock == false) { |
||||
if (e != '') { |
||||
this.showCrop = false; |
||||
this.showMore = false; |
||||
this.searchData = this.searchByProductName(e); |
||||
} else { |
||||
this.showCrop = true; |
||||
this.showMore = true; |
||||
this.searchData = null; |
||||
} |
||||
} else { |
||||
if (e != '') { |
||||
this.searchData = this.searchByProductName(e); |
||||
} else { |
||||
this.searchData = this.allData; |
||||
} |
||||
} |
||||
console.log(this.searchData); |
||||
}, |
||||
getAgriculturalProductList() { |
||||
getAgriculturalProductList() |
||||
.then((res) => { |
||||
console.log(res); |
||||
this.allData = res.data; |
||||
const data = res.data; |
||||
const groupedData = data.reduce((acc, cur) => { |
||||
const variety = cur.varietyName; |
||||
if (!acc[variety]) { |
||||
acc[variety] = []; |
||||
} |
||||
acc[variety].push(cur); |
||||
return acc; |
||||
}, {}); |
||||
|
||||
const result = Object.keys(groupedData).map((variety) => ({ |
||||
varietyName: variety, |
||||
products: groupedData[variety] |
||||
})); |
||||
this.data = result; |
||||
}) |
||||
.catch((err) => { |
||||
console.log(err); |
||||
}); |
||||
}, |
||||
getBlockList() { |
||||
getBlockList(1130, 2) //这里还要改成从stroe获取baseid |
||||
.then((res) => { |
||||
this.allData = res.data; |
||||
this.searchData = res.data; |
||||
}) |
||||
.catch((err) => { |
||||
console.log(err); |
||||
}); |
||||
}, |
||||
check(val, num) { |
||||
console.log(this.resviceData, val); |
||||
if (this.resviceData != null && num != '1') { |
||||
const obj = this.resviceData; |
||||
obj.productId = val.id; |
||||
obj.productName = val.productName; |
||||
const data = encodeURIComponent(JSON.stringify(obj)); |
||||
uni.redirectTo({ |
||||
url: '/sunPages/addCrops/addCrops?params=' + data |
||||
}); |
||||
} else if (this.resviceData == null && num != '1') { |
||||
const obj = { |
||||
productId: val.id, |
||||
productName: val.productName |
||||
}; |
||||
const data = encodeURIComponent(JSON.stringify(obj)); |
||||
uni.redirectTo({ |
||||
url: '/sunPages/addCrops/addCrops?params=' + data |
||||
}); |
||||
} else { |
||||
const obj = this.resviceData; |
||||
obj.blockId = val.id; |
||||
obj.blockName = val.blockName; |
||||
obj.blockArea = val.blockArea; |
||||
const data = JSON.stringify(obj); |
||||
uni.redirectTo({ |
||||
url: '/sunPages/addCropForm/addCropForm?params=' + data |
||||
}); |
||||
} |
||||
}, |
||||
searchByProductName(val) { |
||||
if (this.showBlock == false) { |
||||
return this.allData.filter((item) => item.productName.includes(val)); |
||||
} else { |
||||
return this.allData.filter((item) => item.blockName.includes(val)); |
||||
} |
||||
}, |
||||
imageError(e) { |
||||
console.error('image发生error事件，携带值为' + e.detail.errMsg); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.search-box { |
||||
height: 100vh; |
||||
background-color: #fff; |
||||
} |
||||
.my-theme-bg { |
||||
background: linear-gradient(117deg, #60df9d, #31cb7b); |
||||
color: #fff; |
||||
} |
||||
|
||||
.m-data-list { |
||||
width: 100%; |
||||
margin-top: 50rpx; |
||||
padding: 20rpx 40rpx; |
||||
|
||||
.m-data-box { |
||||
margin-bottom: 30rpx; |
||||
|
||||
.m-variety-name { |
||||
margin-bottom: 10rpx; |
||||
font-size: 32rpx; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.m-variety-item-box { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
.m-variety-item { |
||||
background: #f5f5f5; |
||||
padding: 9rpx 26rpx; |
||||
border-radius: 20rpx; |
||||
margin-left: 10rpx; |
||||
margin-bottom: 15rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.m-sdata-list { |
||||
width: 100%; |
||||
padding: 20rpx; |
||||
|
||||
.m-sdata-box { |
||||
width: 100%; |
||||
display: flex; |
||||
margin-bottom: 20rpx; |
||||
box-shadow: 0 0 7px 1px #d6d6d6; |
||||
border-radius: 15rpx; |
||||
padding: 20rpx; |
||||
|
||||
.m-variety-name { |
||||
margin-right: 20rpx; |
||||
width: 100rpx; |
||||
height: 100rpx; |
||||
overflow: hidden; |
||||
border-radius: 10rpx; |
||||
} |
||||
|
||||
.m-variety-item-box { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.m-variety-item-name { |
||||
font-size: 38rpx; |
||||
font-weight: 500; |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 10rpx; |
||||
|
||||
.m-jiao { |
||||
font-size: 26rpx; |
||||
font-weight: 400; |
||||
background-color: #04921c; |
||||
padding: 3rpx 9rpx; |
||||
color: #eee; |
||||
flex: unset; |
||||
border-radius: 10rpx; |
||||
margin-left: 20rpx; |
||||
} |
||||
} |
||||
.m-variety-item-species { |
||||
max-width: 80%; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue