Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 a5aa2470 作者: 宇宙超人
操作

基地管理

上级 52cdf723
正在显示 包含 1207 行增加 和 1076 行删除
src/api/model/nongchang.ts
......@@ -10,6 +10,17 @@ enum Api {
getFarmBaseList = '/farmbase/getFarmBaseList',
}
/**
* 农场基地管理-通过id查询
* @param params
* @returns
*/
export function getFarmbaseInfoById(params: any = {}) {
return otherHttp.get({
url: '/farmbase/queryById',
params,
})
}
/**
* 删除基地
* @param id
* @returns
......@@ -31,6 +42,17 @@ export function addFarmbase(params = {}) {
})
}
/**
* 编辑基地
* @param params
* @returns
*/
export function editFarmbase(params = {}) {
return otherHttp.post({
url: '/farmbase/edit',
params,
})
}
/**
* 基地列表
* @param {any} params
* @return
......
src/pages/jidiguanli/add.vue
<template>
<view class="container">
<u-form :model="formData" :rules="rules" ref="formRef" label-width="160rpx">
<!-- 基地基本信息 -->
<view class="section-title">基地基本信息</view>
<u-form-item label="基地名称" prop="baseName" required>
<u-input v-model="formData.baseName" placeholder="请输入基地名称" border="bottom" />
</u-form-item>
<u-form-item label="基地类型" prop="baseType" required>
<u-input v-model="formData.baseTypeText" placeholder="请选择基地类型" border="bottom"
@click="show.farmType = true" />
</u-form-item>
<u-form-item label="规模" prop="scale" required>
<u-input v-model="formData.scale" placeholder="请输入规模（亩）" border="bottom" type="number">
<template #suffix>
<text class="suffix-text">亩</text>
</template>
</u-input>
</u-form-item>
<!-- 地址信息 -->
<view class="section-title">地址信息</view>
<u-form-item label="省市区" prop="province" required>
<u-input v-model="formData.province" placeholder="请选择省市区" border="bottom"
@click="show.address = true" />
</u-form-item>
<u-form-item label="详细地址" prop="detailedAddress" required>
<u-input v-model="formData.detailedAddress" placeholder="请输入详细地址" border="bottom" />
</u-form-item>
<!-- 负责人信息 -->
<view class="section-title">负责人信息</view>
<u-form-item label="负责人姓名" prop="managerName" required>
<u-input v-model="formData.managerName" placeholder="请输入负责人姓名" border="bottom" />
</u-form-item>
<u-form-item label="联系电话" prop="contactPhone" required>
<u-input v-model="formData.contactPhone" placeholder="请输入联系电话" border="bottom" type="number" />
</u-form-item>
<u-form-item label="身份证号" prop="idCard" required>
<u-input v-model="formData.idCard" placeholder="请输入身份证号" border="bottom" />
</u-form-item>
<!-- 经营信息 -->
<view class="section-title">经营信息</view>
<u-form-item label="种植作物" prop="plantedCrops" required>
<u-input v-model="formData.plantedCrops" placeholder="请输入种植作物，多个用逗号分隔" border="bottom" />
</u-form-item>
<u-form-item label="经营年限" prop="operationYears" required>
<u-input v-model="formData.operationYears" placeholder="请输入经营年限" border="bottom" type="number">
<template #suffix>
<text class="suffix-text">年</text>
</template>
</u-input>
</u-form-item>
<!-- 基地图片 -->
<view class="section-title">认证材料</view>
<u-form-item label="基地图片" prop="baseImages">
<u-upload :fileList="formData.baseImages" @afterRead="(e) => afterRead(e, 'baseImages')"
@delete="(e) => deletePic(e, 'baseImages')" name="1" multiple :maxCount="5"
:previewFullImage="true"></u-upload>
</u-form-item>
<u-form-item label="身份证明" prop="identityProveUrl" required>
<div>
<u-upload :fileList="formData.identityProveUrl" @afterRead="(e) => afterRead(e, 'identityProveUrl')"
@delete="(e) => deletePic(e, 'identityProveUrl')" name="identityProveUrl" multiple :maxCount="2"
:previewFullImage="true"></u-upload>
<div><i>身份证/营业执照图片</i></div>
</div>
</u-form-item>
<u-form-item label="场地证明" prop="landProveUrl" required>
<div>
<u-upload :fileList="formData.landProveUrl" @afterRead="(e) => afterRead(e, 'landProveUrl')"
@delete="(e) => deletePic(e, 'landProveUrl')" name="landProveUrl" multiple :maxCount="2"
:previewFullImage="true"></u-upload>
<div><i>土地合同/场地照片</i></div>
</div>
</u-form-item>
<u-form-item label="生产证明" prop="productionProveUrl" required>
<div>
<u-upload :fileList="formData.productionProveUrl"
@afterRead="(e) => afterRead(e, 'productionProveUrl')"
@delete="(e) => deletePic(e, 'productionProveUrl')" name="productionProveUrl" multiple
:maxCount="2" :previewFullImage="true"></u-upload>
<div><i>现场作业照片/产品照片</i></div>
</div>
</u-form-item>
<u-form-item label="质量证书">
<div>
<u-upload :fileList="formData.qualityCertificateUrl"
@afterRead="(e) => afterRead(e, 'qualityCertificateUrl')"
@delete="(e) => deletePic(e, 'qualityCertificateUrl')" name="qualityCertificateUrl" multiple
:maxCount="2" :previewFullImage="true"></u-upload>
<div><i>质量认证证书</i></div>
</div>
</u-form-item>
<u-form-item label="其他材料">
<div>
<u-upload :fileList="formData.otherMaterialUrl" @afterRead="(e) => afterRead(e, 'otherMaterialUrl')"
@delete="(e) => deletePic(e, 'otherMaterialUrl')" name="otherMaterialUrl" multiple :maxCount="2"
:previewFullImage="true"></u-upload>
<div><i>其他补充材料</i></div>
</div>
</u-form-item>
<!-- 提交按钮 -->
<view class="submit-btn-container">
<u-button type="primary" @click="submitForm" :loading="loading">提交</u-button>
</view>
</u-form>
<fui-picker :show="show.address" :options="options.address" :linkage="true" :layer="3"
@change="handleChangeAddress" @cancel="show.address = false"></fui-picker>
<fui-picker :show="show.farmType" :layer="1" :linkage="true" :options="options.farmType"
@change="handleChangeFarmType" @cancel="show.farmType = false"></fui-picker>
</view>
<view class="container">
<u-form :model="formData" :rules="rules" ref="formRef" label-width="160rpx">
<!-- 基地基本信息 -->
<view class="section-title">基地基本信息</view>
<u-form-item label="基地名称" prop="baseName" required>
<u-input v-model="formData.baseName" placeholder="请输入基地名称" border="bottom" />
</u-form-item>
<u-form-item label="基地类型" prop="baseType" required>
<u-input v-model="formData.baseTypeText" placeholder="请选择基地类型" border="bottom"
@click="show.farmType = true" />
</u-form-item>
<u-form-item label="规模" prop="scale" required>
<u-input v-model="formData.scale" placeholder="请输入规模（亩）" border="bottom" type="number">
<template #suffix>
<text class="suffix-text">亩</text>
</template>
</u-input>
</u-form-item>
<!-- 地址信息 -->
<view class="section-title">地址信息</view>
<u-form-item label="省市区" prop="province" required>
<u-input v-model="formData.province" placeholder="请选择省市区" border="bottom"
@click="show.address = true" />
</u-form-item>
<u-form-item label="详细地址" prop="detailedAddress" required>
<u-input v-model="formData.detailedAddress" placeholder="请输入详细地址" border="bottom" />
</u-form-item>
<!-- 负责人信息 -->
<view class="section-title">负责人信息</view>
<u-form-item label="负责人姓名" prop="managerName" required>
<u-input v-model="formData.managerName" placeholder="请输入负责人姓名" border="bottom" />
</u-form-item>
<u-form-item label="联系电话" prop="contactPhone" required>
<u-input v-model="formData.contactPhone" placeholder="请输入联系电话" border="bottom" type="number" />
</u-form-item>
<u-form-item label="身份证号" prop="idCard" required>
<u-input v-model="formData.idCard" placeholder="请输入身份证号" border="bottom" />
</u-form-item>
<!-- 经营信息 -->
<view class="section-title">经营信息</view>
<u-form-item label="种植作物" prop="plantedCrops" required>
<u-input v-model="formData.plantedCrops" placeholder="请输入种植作物，多个用逗号分隔" border="bottom" />
</u-form-item>
<u-form-item label="经营年限" prop="operationYears" required>
<u-input v-model="formData.operationYears" placeholder="请输入经营年限" border="bottom" type="number">
<template #suffix>
<text class="suffix-text">年</text>
</template>
</u-input>
</u-form-item>
<!-- 基地图片 -->
<view class="section-title">认证材料</view>
<u-form-item label="基地图片" prop="baseImages">
<u-upload :fileList="formData.baseImages" @afterRead="(e) => afterRead(e, 'baseImages')"
@delete="(e) => deletePic(e, 'baseImages')" name="1" multiple :maxCount="5"
:previewFullImage="true"></u-upload>
</u-form-item>
<u-form-item label="身份证明" prop="identityProveUrl" required>
<div>
<u-upload :fileList="formData.identityProveUrl" @afterRead="(e) => afterRead(e, 'identityProveUrl')"
@delete="(e) => deletePic(e, 'identityProveUrl')" name="identityProveUrl" multiple :maxCount="2"
:previewFullImage="true"></u-upload>
<div><i>身份证/营业执照图片</i></div>
</div>
</u-form-item>
<u-form-item label="场地证明" prop="landProveUrl" required>
<div>
<u-upload :fileList="formData.landProveUrl" @afterRead="(e) => afterRead(e, 'landProveUrl')"
@delete="(e) => deletePic(e, 'landProveUrl')" name="landProveUrl" multiple :maxCount="2"
:previewFullImage="true"></u-upload>
<div><i>土地合同/场地照片</i></div>
</div>
</u-form-item>
<u-form-item label="生产证明" prop="productionProveUrl" required>
<div>
<u-upload :fileList="formData.productionProveUrl"
@afterRead="(e) => afterRead(e, 'productionProveUrl')"
@delete="(e) => deletePic(e, 'productionProveUrl')" name="productionProveUrl" multiple
:maxCount="2" :previewFullImage="true"></u-upload>
<div><i>现场作业照片/产品照片</i></div>
</div>
</u-form-item>
<u-form-item label="质量证书">
<div>
<u-upload :fileList="formData.qualityCertificateUrl"
@afterRead="(e) => afterRead(e, 'qualityCertificateUrl')"
@delete="(e) => deletePic(e, 'qualityCertificateUrl')" name="qualityCertificateUrl" multiple
:maxCount="2" :previewFullImage="true"></u-upload>
<div><i>质量认证证书</i></div>
</div>
</u-form-item>
<u-form-item label="其他材料">
<div>
<u-upload :fileList="formData.otherMaterialUrl" @afterRead="(e) => afterRead(e, 'otherMaterialUrl')"
@delete="(e) => deletePic(e, 'otherMaterialUrl')" name="otherMaterialUrl" multiple :maxCount="2"
:previewFullImage="true"></u-upload>
<div><i>其他补充材料</i></div>
</div>
</u-form-item>
<!-- 提交按钮 -->
<view class="submit-btn-container">
<u-button type="primary" @click="submitForm" :loading="loading">提交</u-button>
</view>
</u-form>
<fui-picker :show="show.address" :options="options.address" :linkage="true" :layer="3"
@change="handleChangeAddress" @cancel="show.address = false"></fui-picker>
<fui-picker :show="show.farmType" :layer="1" :linkage="true" :options="options.farmType"
@change="handleChangeFarmType" @cancel="show.farmType = false"></fui-picker>
</view>
</template>
<script setup lang="ts">
......@@ -143,105 +143,124 @@ const dictStore = useDictStore()
const formRef = ref()
const loading = ref(false)
const show = reactive({
address: false,
farmType: false,
address: false,
farmType: false,
})
const options = reactive({
address: areaTree,
farmType: []
address: areaTree,
farmType: []
})
// 表单数据
const formData = reactive({
farmId: '',
baseName: '',
baseType: '',
baseTypeText: '',
scale: '',
provinceName: '',
cityName: '',
districtName: '',
detailedAddress: '',
province: '',
managerName: '',
contactPhone: '',
idCard: '',
plantedCrops: '',
operationYears: '',
baseImages: [],
identityProveUrl: [],//身份证明(身份证/营业执照图片)
landProveUrl: [],//土地证明(土地证/国有土地使用证)
productionProveUrl: [],//生产证明(生产许可证/种养许可证)
qualityCertificateUrl: [],//质量证明(质量认证证书)
otherMaterialUrl: [],//其他证明(其他证明)
farmId: '',
baseName: '',
baseType: '',
baseTypeText: '',
scale: '',
provinceName: '',
cityName: '',
districtName: '',
detailedAddress: '',
province: '',
managerName: '',
contactPhone: '',
idCard: '',
plantedCrops: '',
operationYears: '',
baseImages: [],
identityProveUrl: [],//身份证明(身份证/营业执照图片)
landProveUrl: [],//土地证明(土地证/国有土地使用证)
productionProveUrl: [],//生产证明(生产许可证/种养许可证)
qualityCertificateUrl: [],//质量证明(质量认证证书)
otherMaterialUrl: [],//其他证明(其他证明)
})
// 表单验证规则
const rules = {
baseName: [
{ required: true, message: '请输入基地名称', trigger: 'blur' },
{ min: 2, max: 50, message: '基地名称长度在2-50个字符之间', trigger: 'blur' }
],
baseType: [
{ required: true, message: '请选择基地类型', trigger: 'change' }
],
scale: [
{ required: true, message: '请输入规模', trigger: 'blur' },
{ pattern: /^[1-9]\d*$/, message: '规模必须为正整数', trigger: 'blur' }
],
province: [
{
required: true, message: '请获取地址信息', trigger: 'change',
// validator: () => formData.provinceName && formData.cityName && formData.districtName
}
],
detailedAddress: [
{ required: true, message: '请输入详细地址', trigger: 'blur' },
{ min: 5, max: 200, message: '详细地址长度在5-200个字符之间', trigger: 'blur' }
],
managerName: [
{ required: true, message: '请输入负责人姓名', trigger: 'blur' },
{ pattern: /^[\u4e00-\u9fa5]{2,10}$/, message: '姓名必须为2-10个汉字', trigger: 'blur' }
],
contactPhone: [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
],
idCard: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{
pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
message: '请输入正确的身份证号码', trigger: 'blur'
}
],
plantedCrops: [
{ required: true, message: '请输入种植作物', trigger: 'blur' },
{ min: 2, max: 100, message: '种植作物长度在2-100个字符之间', trigger: 'blur' }
],
operationYears: [
{ required: true, message: '请输入经营年限', trigger: 'blur' },
{ pattern: /^[1-9]\d*$/, message: '经营年限必须为正整数', trigger: 'blur' }
],
identityProveUrl:[
{required: true, message: '请上传身份证明', trigger: 'change',type:'array'}
],
landProveUrl:[
{required: true, message: '请上传场地证明', trigger: 'change',type:'array'}
],
productionProveUrl:[
{required: true, message: '请上传生产证明', trigger: 'change',type:'array'}
]
baseName: [
{ required: true, message: '请输入基地名称', trigger: 'blur' },
{ min: 2, max: 50, message: '基地名称长度在2-50个字符之间', trigger: 'blur' }
],
baseType: [
{ required: true, message: '请选择基地类型', trigger: 'change' }
],
scale: [
{
validator: (rule: any, value: any, callback: any) => {
if (!value || value === '') {
callback(new Error('请输入规模'))
} else if (!/^[1-9]\d*$/.test(value.toString())) {
callback(new Error('规模必须为正整数'))
} else {
callback()
}
},
trigger: ['blur', 'change']
}
],
province: [
{
required: true, message: '请获取地址信息', trigger: 'change',
// validator: () => formData.provinceName && formData.cityName && formData.districtName
}
],
detailedAddress: [
{ required: true, message: '请输入详细地址', trigger: 'blur' },
{ min: 5, max: 200, message: '详细地址长度在5-200个字符之间', trigger: 'blur' }
],
managerName: [
{ required: true, message: '请输入负责人姓名', trigger: 'blur' },
{ pattern: /^[\u4e00-\u9fa5]{2,10}$/, message: '姓名必须为2-10个汉字', trigger: 'blur' }
],
contactPhone: [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
],
idCard: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{
pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
message: '请输入正确的身份证号码', trigger: 'blur'
}
],
plantedCrops: [
{ required: true, message: '请输入种植作物', trigger: 'blur' },
{ min: 2, max: 100, message: '种植作物长度在2-100个字符之间', trigger: 'blur' }
],
operationYears: [
{
validator: (rule: any, value: any, callback: any) => {
if (value && !/^[1-9]\d*$/.test(value.toString())) {
callback(new Error('经营年限必须为正整数'))
} else {
callback()
}
},
message: '经营年限必须为正整数',
trigger: ['blur', 'change']
}
],
identityProveUrl: [
{ required: true, message: '请上传身份证明', trigger: 'change', type: 'array' }
],
landProveUrl: [
{ required: true, message: '请上传场地证明', trigger: 'change', type: 'array' }
],
productionProveUrl: [
{ required: true, message: '请上传生产证明', trigger: 'change', type: 'array' }
]
}
function handleChangeFarmType(e) {
formData.baseType = e.value
formData.baseTypeText = e.text
show.farmType = false
formData.baseType = e.value
formData.baseTypeText = e.text
show.farmType = false
}
function handleChangeAddress(e) {
formData.province = e.result;
formData.provinceName = e.text[0];
formData.cityName = e.text[1];
formData.districtName = e.text[2];
show.address = false
formData.province = e.result;
formData.provinceName = e.text[0];
formData.cityName = e.text[1];
formData.districtName = e.text[2];
show.address = false
}
const userStore = useUserStore()
......@@ -249,231 +268,308 @@ const globSetting = useGlobSetting()
const toastRef = ref()
// 文件上传
function afterRead(event, key) {
// 获取上传的文件列表
const files = event.file
// 如果没有文件，直接返回
if (!files || files.length === 0) return
// 记录成功上传的数量
let successCount = 0
let totalCount = files.length
// 遍历所有文件进行上传
files.forEach((file) => {
uni.uploadFile({
url: globSetting.apiUrl + globSetting.urlPrefix + '/sys/common/upload', // 直接使用上传接口URL
filePath: file.url,
name: 'file',
formData: {
biz: 'temp',
},
header: {
'X-Access-Token': userStore.getToken,
},
success: (res) => {
if (res.statusCode === 200) {
const data = JSON.parse(res.data)
if (data.code === 200 || data.code === 0) {
successCount++
formData[key].push(data.message)
// 所有文件上传完成
if (successCount === totalCount) {
toastRef.value.show({
type: 'success',
text: `成功上传${successCount}张图片`,
})
}
}
}
},
fail: () => {
toastRef.value.show({
type: 'error',
text: '部分图片上传失败',
})
},
})
})
// 获取上传的文件列表
const files = event.file
// 如果没有文件，直接返回
if (!files || files.length === 0) return
// 记录成功上传的数量
let successCount = 0
let totalCount = files.length
// 遍历所有文件进行上传
files.forEach((file) => {
uni.uploadFile({
url: globSetting.apiUrl + globSetting.urlPrefix + '/sys/common/upload', // 直接使用上传接口URL
filePath: file.url,
name: 'file',
formData: {
biz: 'temp',
},
header: {
'X-Access-Token': userStore.getToken,
},
success: (res) => {
if (res.statusCode === 200) {
const data = JSON.parse(res.data)
if (data.code === 200 || data.code === 0) {
successCount++
formData[key].push(data.message)
// 所有文件上传完成
if (successCount === totalCount) {
toastRef.value.show({
type: 'success',
text: `成功上传${successCount}张图片`,
})
}
}
}
},
fail: () => {
toastRef.value.show({
type: 'error',
text: '部分图片上传失败',
})
},
})
})
}
// 删除图片
const deletePic = (event: any, key) => {
formData[key].splice(event.index, 1)
formData[key].splice(event.index, 1)
}
// 提交表单
const submitForm = async () => {
try {
const valid = await formRef.value.validate()
if (valid) {
loading.value = true
// 这里应该调用提交API
let paramData = { ...formData };
paramData.baseImages = paramData.baseImages.join(',');
paramData.identityProveUrl = paramData.identityProveUrl.join(',');
paramData.landProveUrl = paramData.landProveUrl.join(',');
paramData.productionProveUrl = paramData.productionProveUrl.join(',');
paramData.qualityCertificateUrl = paramData.qualityCertificateUrl.join(',');
paramData.otherMaterialUrl = paramData.otherMaterialUrl.join(',');
NongchangAPI.addFarmbase(paramData).then(res => {
loading.value = false
uni.showToast({ title: '提交成功', icon: 'success' })
setTimeout(() => {
uni.navigateBack()
}, 800)
}).catch(err => {
loading.value = false;
Message.toast(err.message)
})
}
} catch (error) {
console.log('表单验证失败:', error)
uni.showToast({ title: '请完善表单信息', icon: 'none' })
}
try {
// 先进行表单验证
const valid = await formRef.value.validate()
if (!valid) {
return
}
loading.value = true
// 准备提交数据
const submitData = { ...formData }
// 将数组字段转换为逗号分隔的字符串
const arrayFields = [
'baseImages',
'identityProveUrl',
'landProveUrl',
'productionProveUrl',
'qualityCertificateUrl',
'otherMaterialUrl'
]
arrayFields.forEach(field => {
if (Array.isArray(submitData[field])) {
submitData[field] = submitData[field].filter(item => item?.trim()).join(',')
}
})
// 根据是否有ID决定调用编辑还是新增接口
const apiCall = submitData.id ? NongchangAPI.editFarmbase : NongchangAPI.addFarmbase
try {
await apiCall(submitData)
uni.showToast({
title: '提交成功',
icon: 'success',
duration: 1500
})
// 延迟返回上一页
setTimeout(() => {
uni.navigateBack()
}, 1500)
} catch (error) {
console.error('API调用失败:', error)
uni.showToast({
title: error.message || '提交失败，请重试',
icon: 'none',
duration: 2000
})
} finally {
loading.value = false
}
} catch (error) {
console.log('表单验证失败:', error)
loading.value = false
uni.showToast({
title: '请完善表单信息',
icon: 'none',
duration: 2000
})
}
}
const farmStore = useFarmStore()
onLoad(() => {
// 页面加载时的初始化操作
const farmInfo = farmStore.getFarm
if (farmInfo) {
formData.farmId = farmInfo.id
}
options.farmType = dictStore.getDictList['farm_type'].map((item) => {
return {
value: item.value,
text: item.text,
}
})
onLoad((pageOptions) => {
// 页面加载时的初始化操作
const farmInfo = farmStore.getFarm
if (farmInfo) {
formData.farmId = farmInfo.id
}
// 修复：修改页面上定义的 options 对象中的 farmType
options.farmType = dictStore.getDictList['farm_type'].map((item) => {
return {
value: item.value,
text: item.text,
}
})
if (pageOptions.id) {
NongchangAPI.getFarmbaseInfoById({ id: pageOptions.id }).then(res => {
if (res) {
// 将 res 中的数据赋值到 formData 中，key 保持一致
Object.keys(res).forEach(key => {
if (key in formData) {
// 如果是数组类型的字段且返回的是字符串，需要转换为数组
if (['baseImages', 'identityProveUrl', 'landProveUrl', 'productionProveUrl', 'qualityCertificateUrl', 'otherMaterialUrl'].includes(key) &&
typeof res[key] === 'string') {
formData[key] = res[key].split(',').filter(item => item.trim() !== '')
} else {
formData[key] = res[key]
}
}
})
formData.id = res.id
formData.province = res.provinceName + res.cityName + res.districtName
// 根据 res.baseType 的值从 options.farmType 中查找对应的文本
if (res.baseType && options.farmType.length > 0) {
const foundItem = options.farmType.find((item: any) => item.value === res.baseType)
if (foundItem) {
formData.baseTypeText = foundItem.text
}
}
// 数据赋值完成后，延迟触发表单验证更新
setTimeout(() => {
if (formRef.value) {
// 逐个验证可能存在问题的字段
formRef.value.validateField('scale')
formRef.value.validateField('operationYears')
// 重新验证整个表单
formRef.value.validate()
}
}, 200)
}
})
}
})
</script>
<style lang="scss" scoped>
.container {
padding: 30rpx;
background-color: #f8f9fa;
min-height: 100vh;
padding: 30rpx;
background-color: #f8f9fa;
min-height: 100vh;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin: 40rpx 0 20rpx 0;
padding-left: 20rpx;
border-left: 6rpx solid #5DB66F;
font-size: 32rpx;
font-weight: 600;
color: #333;
margin: 40rpx 0 20rpx 0;
padding-left: 20rpx;
border-left: 6rpx solid #5DB66F;
}
.address-display {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
background-color: transparent;
border-bottom: 2rpx solid #e4e7ed;
border-radius: 0;
.placeholder-text {
color: #c0c4cc;
}
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
background-color: transparent;
border-bottom: 2rpx solid #e4e7ed;
border-radius: 0;
.placeholder-text {
color: #c0c4cc;
}
}
.suffix-text {
color: #909399;
margin-left: 10rpx;
color: #909399;
margin-left: 10rpx;
}
.submit-btn-container {
margin: 60rpx 0;
::v-deep .u-button {
height: 88rpx;
border-radius: 44rpx;
font-size: 32rpx;
background-color: #5DB66F;
border-color: #5DB66F;
}
margin: 60rpx 0;
::v-deep .u-button {
height: 88rpx;
border-radius: 44rpx;
font-size: 32rpx;
background-color: #5DB66F;
border-color: #5DB66F;
}
}
// uview-plus 表单样式调整
::v-deep .u-form-item {
margin-bottom: 40rpx;
.u-form-item__body {
padding: 0;
align-items: flex-start;
}
.u-form-item__body__left__content__label {
font-size: 28rpx;
color: #333;
font-weight: 500;
width: 160rpx;
flex-shrink: 0;
text-align: right;
padding-right: 20rpx;
line-height: 80rpx;
}
.u-form-item__body__right {
flex: 1;
min-width: 0;
}
margin-bottom: 40rpx;
.u-form-item__body {
padding: 0;
align-items: flex-start;
}
.u-form-item__body__left__content__label {
font-size: 28rpx;
color: #333;
font-weight: 500;
width: 160rpx;
flex-shrink: 0;
text-align: right;
padding-right: 20rpx;
line-height: 80rpx;
}
.u-form-item__body__right {
flex: 1;
min-width: 0;
}
}
::v-deep .u-form-item__body__left__content__required {
position: static;
padding-right: 10rpx;
position: static;
padding-right: 10rpx;
}
// 输入框样式优化 - 只保留下面的线
::v-deep .u-input {
.u-input__content {
padding: 0;
.u-input__content__field-wrapper {
border: none;
// border-bottom: 2rpx solid #e4e7ed;
border-radius: 0;
.u-input__content__field-wrapper__field {
font-size: 28rpx;
// padding: 20rpx 0;
height: auto;
// min-height: 80rpx;
}
.u-input__content__field-wrapper__placeholder {
color: #c0c4cc;
font-size: 28rpx;
}
}
&.u-input--focus {
.u-input__content__field-wrapper {
border-bottom-color: #5DB66F;
}
}
}
.u-input__content {
padding: 0;
.u-input__content__field-wrapper {
border: none;
// border-bottom: 2rpx solid #e4e7ed;
border-radius: 0;
.u-input__content__field-wrapper__field {
font-size: 28rpx;
// padding: 20rpx 0;
height: auto;
// min-height: 80rpx;
}
.u-input__content__field-wrapper__placeholder {
color: #c0c4cc;
font-size: 28rpx;
}
}
&.u-input--focus {
.u-input__content__field-wrapper {
border-bottom-color: #5DB66F;
}
}
}
}
// 上传组件样式调整
::v-deep .u-upload {
margin-top: 10rpx;
margin-top: 10rpx;
.u-upload__wrap {
padding: 0;
}
.u-upload__wrap {
padding: 0;
}
}
// 选择器输入框样式
::v-deep .u-input--readonly {
.u-input__content__field-wrapper {
background-color: transparent;
.u-input__content__field-wrapper {
background-color: transparent;
.u-input__content__field-wrapper__field {
color: #333;
}
}
.u-input__content__field-wrapper__field {
color: #333;
}
}
}
</style>
src/pages/jidiguanli/jidiguanli.vue
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onPullDownRefresh, onLoad, onShow, onNavigationBarButtonTap } from '@dcloudio/uni-app'
import * as NongchangAPI from '@/api/model/nongchang'
const isOnePage = ref(true)
const paging = ref(null)
const pageData = reactive({
param: {
pageNo: 1,
pageSize: 10,
baseName: ''
},
list: [],
total: 0, //基地总数
type_success_total: 0,//已认证
type_unverified_total: 0,//未认证
})
onNavigationBarButtonTap((e) => {
console.log('onNavigationBarButtonTap', e)
})
onLoad(() => {
})
onShow(() => {
nextTick(() => {
if(!isOnePage.value)paging.value.refresh();
isOnePage.value = false
})
})
import { nextTick, reactive, ref } from 'vue'
import { onLoad, onNavigationBarButtonTap, onShow } from '@dcloudio/uni-app'
import * as NongchangAPI from '@/api/model/nongchang'
const isOnePage = ref(true)
const paging = ref(null)
const pageData = reactive({
param: {
pageNo: 1,
pageSize: 10,
baseName: '',
},
list: [],
total: 0, // 基地总数
type_success_total: 0, // 已认证
type_unverified_total: 0, // 未认证
})
onNavigationBarButtonTap((e) => {
console.log('onNavigationBarButtonTap', e)
})
onLoad(() => {})
onShow(() => {
nextTick(() => {
if (!isOnePage.value && paging.value) {
paging.value.reload()
}
isOnePage.value = false
})
})
function getList() {
NongchangAPI.getFarmbaseList(pageData.param).then(res => {
pageData.total = res.total;
paging.value.complete(res.records);
}).catch(err => {
paging.value.complete(false);
})
}
onNavigationBarButtonTap((e) => {
uni.navigateTo({
url: './add'
})
})
const queryList = (pageNo, pageSize) => {
pageData.param.pageNo = pageNo;
pageData.param.pageSize = pageSize;
getList()
}
const handleSearch = () => {
// 重置页码为1，重新搜索
pageData.param.pageNo = 1;
paging.value.reload();
}
const del = (id, index) => {
uni.showModal({
title: '提示',
content: '确定删除吗？',
success: (res) => {
if (res.confirm) {
NongchangAPI.delFarmbase(id).then(res => {
uni.showToast({
title: '删除成功',
icon: 'none'
})
paging.value.refresh();
})
}
}
})
if (!paging.value) return
NongchangAPI.getFarmbaseList(pageData.param)
.then((res) => {
pageData.total = res.total
paging.value.complete(res.records)
})
.catch(() => {
paging.value.complete(false)
})
}
onNavigationBarButtonTap((_) => {
uni.navigateTo({
url: './add',
})
})
function queryList(pageNo, pageSize) {
pageData.param.pageNo = pageNo
pageData.param.pageSize = pageSize
getList()
}
function handleSearch() {
// 重置页码为1，重新搜索
pageData.param.pageNo = 1
if (paging.value) {
paging.value.reload()
}
}
const goDetail = (id)=>{
uni.navigateTo({
url: './add?id='+id,
})
}
function del(id) {
uni.showModal({
title: '提示',
content: '确定删除吗？',
success: (res) => {
if (res.confirm) {
NongchangAPI.delFarmbase(id).then(() => {
uni.showToast({
title: '删除成功',
icon: 'none',
})
if (paging.value) {
paging.value.reload()
}
})
}
},
})
}
</script>
<template>
<view class="codefun-flex-col page">
<!-- <view class="codefun-flex-col section">
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
<image class="image" src="/static/images/codefun/187b02e95cf1f33e4fa03b784305e21d.png" />
<view class="codefun-flex-row group">
<image class="image_2" src="/static/images/codefun/5095bac6e3d752cba3708a4aaae4995a.png" />
<image class="image_3 ml-5" src="/static/images/codefun/568ef7f0e1d4af85ed9e599afdc74d20.png" />
<image class="image_4 ml-5" src="/static/images/codefun/21fe98696f0027c988d25f6121cc2831.png" />
</view>
</view>
<view class="codefun-mt-22 codefun-flex-row codefun-justify-center codefun-items-center codefun-relative group_2">
<image class="image_5 pos" src="/static/images/codefun/8e086590d7d14994e1d62cf41c8ccff9.png" />
<text class="font text">农场基地管理</text>
<view class="codefun-flex-row codefun-items-center pos_2">
<image class="codefun-shrink-0 image_6" src="/static/images/codefun/09abef094d235d5ac956a89c6f8a3835.png" />
<text class="font_2 text_2 ml-5">添加基地</text>
</view>
</view>
</view> -->
<z-paging ref="paging" v-model="pageData.list" @query="queryList">
<view class="codefun-flex-col group_3">
<view class="codefun-flex-row codefun-items-center section_2">
<image class="image_6" src="/static/images/codefun/6c5c5a3c082b8c60a307d3a7caee623c.png" />
<u-input
v-model="pageData.param.baseName"
placeholder="请输入搜索内容"
border="none"
class="codefun-ml-8"
@confirm="handleSearch"
/>
</view>
<view class="codefun-mt-12 codefun-flex-col section_3">
<view class="codefun-flex-row codefun-justify-between group_4">
<view class="codefun-flex-row codefun-self-start">
<image class="codefun-shrink-0 image_7"
src="/static/images/codefun/db26a8ae3f4d5f1e0a3f11d8fb5bc491.png" />
<view
class="codefun-flex-col codefun-items-start codefun-shrink-0 codefun-self-center group_7">
<text class="text_5">{{ pageData.total }}</text>
<text class="font_4 text_7 mt-5">总基地数</text>
</view>
<text class="codefun-self-start font_4 text_4">个</text>
</view>
<view class="codefun-flex-col codefun-self-center group_5">
<view class="codefun-flex-row codefun-items-center group_6">
<image class="image_6"
src="/static/images/codefun/118c884c539aaba710313f0682db00e1.png" />
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_3 text_6">已认证：</text>
</view>
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
<text class="font_5">{{ pageData.type_success_total }}个</text>
</view>
</view>
<view class="codefun-flex-row codefun-items-center group_8">
<image class="image_6"
src="/static/images/codefun/27ef797870c2085d1a14446c50cf53e0.png" />
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_3 text_6">待认证：</text>
</view>
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3">
<text class="font_3 text_8">{{ pageData.type_unverified_total }}个</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_9">
<view class="codefun-flex-row">
<image class="image_8" src="/static/images/codefun/c24e87154a833caadfcb70fb24ae52dc.png" />
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_4">
<text class="font_5">基地认证指南</text>
</view>
</view>
<image class="image_9" src="/static/images/codefun/7e185c6d21ed1b0d04422b2d3835fce8.png" />
</view>
</view>
<view class="codefun-mt-12 codefun-flex-col section_4" v-if="pageData.list.length">
<view class="codefun-flex-col codefun-self-stretch list">
<view class="codefun-flex-row codefun-items-center list-item"
v-for="(item, index) in pageData.list" :key="index">
<view class="codefun-flex-col codefun-justify-start codefun-items-start section_5">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5">
<text class="font_6">{{ item.auditStatus_dictText }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-flex-1 group_10 ml-13">
<view class="codefun-flex-col">
<text class="codefun-self-start font">{{ item.baseName }}</text>
<view class="codefun-flex-row codefun-self-stretch mt-11">
<text class="font_4 text_9">类型：{{ item.baseType_dictText }}</text>
<text class="font_4 text_10 ml-13">规模：{{ item.scale }} 亩</text>
</view>
</view>
<view
class="codefun-mt-18 codefun-flex-row codefun-justify-between codefun-items-center group_11">
<view class="codefun-flex-row">
<image class="image_10"
src="/static/images/codefun/3566724e23f8a91e60ae87c2744e4090.png" />
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6">
<text class="font_7 text_11">详情</text>
</view>
</view>
<view class="codefun-flex-row codefun-items-center" @click="del(item.id, index)">
<image class="codefun-shrink-0 image_10"
src="/static/images/codefun/8630d19ebb6334e2028daa7d7b8b5983.png" />
<text class="font_8 ml-5">删除</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</z-paging>
</view>
<view class="codefun-flex-col page">
<z-paging ref="paging" v-model="pageData.list" @query="queryList">
<view class="codefun-flex-col group_3">
<view class="codefun-flex-row codefun-items-center section_2">
<image class="image_6" src="/static/images/codefun/6c5c5a3c082b8c60a307d3a7caee623c.png" />
<u-input
v-model="pageData.param.baseName"
placeholder="请输入搜索内容"
border="none"
class="codefun-ml-8"
@confirm="handleSearch"
/>
</view>
<view class="codefun-mt-12 codefun-flex-col section_3">
<view class="codefun-flex-row codefun-justify-between group_4">
<view class="codefun-flex-row codefun-self-start">
<image
class="codefun-shrink-0 image_7"
src="/static/images/codefun/db26a8ae3f4d5f1e0a3f11d8fb5bc491.png"
/>
<view
class="codefun-flex-col codefun-items-start codefun-shrink-0 codefun-self-center group_7"
>
<text class="text_5">{{ pageData.total }}</text>
<text class="font_4 text_7 mt-5">总基地数</text>
</view>
<text class="codefun-self-start font_4 text_4">个</text>
</view>
<view class="codefun-flex-col codefun-self-center group_5">
<view class="codefun-flex-row codefun-items-center group_6">
<image
class="image_6"
src="/static/images/codefun/118c884c539aaba710313f0682db00e1.png"
/>
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper"
>
<text class="font_3 text_6">已认证：</text>
</view>
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2"
>
<text class="font_5">{{ pageData.type_success_total }}个</text>
</view>
</view>
<view class="codefun-flex-row codefun-items-center group_8">
<image
class="image_6"
src="/static/images/codefun/27ef797870c2085d1a14446c50cf53e0.png"
/>
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper"
>
<text class="font_3 text_6">待认证：</text>
</view>
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
>
<text class="font_3 text_8">{{ pageData.type_unverified_total }}个</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_9">
<view class="codefun-flex-row">
<image class="image_8" src="/static/images/codefun/c24e87154a833caadfcb70fb24ae52dc.png" />
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_4"
>
<text class="font_5">基地认证指南</text>
</view>
</view>
<image class="image_9" src="/static/images/codefun/7e185c6d21ed1b0d04422b2d3835fce8.png" />
</view>
</view>
<view class="codefun-mt-12 codefun-flex-col section_4" v-if="pageData.list.length">
<view class="codefun-flex-col codefun-self-stretch list">
<view
class="codefun-flex-row codefun-items-center list-item"
v-for="(item, index) in pageData.list"
:key="index"
>
<view class="codefun-flex-col codefun-justify-start codefun-items-start section_5">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
>
<text class="font_6">{{ item.auditStatus_dictText }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-flex-1 group_10 ml-13">
<view class="codefun-flex-col">
<text class="codefun-self-start font">{{ item.baseName }}</text>
<view class="codefun-flex-row codefun-self-stretch mt-11">
<text class="font_4 text_9">类型：{{ item.baseType_dictText }}</text>
<text class="font_4 text_10 ml-13">规模：{{ item.scale }} 亩</text>
</view>
</view>
<view
class="codefun-mt-18 codefun-flex-row codefun-justify-between codefun-items-center group_11"
>
<view class="codefun-flex-row" @click="goDetail(item.id)">
<image
class="image_10"
src="/static/images/codefun/3566724e23f8a91e60ae87c2744e4090.png"
/>
<view
class="codefun-ml-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6"
>
<text class="font_7 text_11">详情</text>
</view>
</view>
<view class="codefun-flex-row codefun-items-center" @click="del(item.id)">
<image
class="codefun-shrink-0 image_10"
src="/static/images/codefun/8630d19ebb6334e2028daa7d7b8b5983.png"
/>
<text class="font_8 ml-5">删除</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<style scoped lang="scss">
body {
background-color: #e6f5e8;
}
.mt-5 {
margin-top: 10rpx;
}
.mt-11 {
margin-top: 22rpx;
}
.ml-5 {
margin-left: 10rpx;
}
.ml-13 {
margin-left: 26rpx;
}
.ml-9 {
margin-left: 18rpx;
}
.page {
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
.section {
padding: 32rpx 24rpx 32rpx 36rpx;
background-color: #5db66f;
mix-blend-mode: NOTTHROUGH;
.image {
border-radius: 64rpx;
width: 108rpx;
height: 42rpx;
}
.group {
margin-right: 4rpx;
.image_2 {
mix-blend-mode: NOTTHROUGH;
width: 34rpx;
height: 22rpx;
}
.image_3 {
mix-blend-mode: NOTTHROUGH;
width: 30rpx;
height: 22rpx;
}
.image_4 {
width: 48rpx;
height: 22rpx;
}
}
.group_2 {
padding-left: 6rpx;
.image_5 {
mix-blend-mode: NOTTHROUGH;
width: 14rpx;
height: 26rpx;
}
.pos {
position: absolute;
left: 6rpx;
top: 50%;
transform: translateY(-50%);
}
.text {
color: #ffffffe6;
line-height: 29.6rpx;
}
.pos_2 {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
.text_2 {
line-height: 25.78rpx;
}
}
}
}
.group_3 {
padding: 28rpx 24rpx 58rpx;
.section_2 {
padding: 16rpx 20rpx;
background-color: #ffffff;
border-radius: 1998rpx;
mix-blend-mode: NOTTHROUGH;
.text_3 {
color: #cccccc;
line-height: 26.02rpx;
}
}
.section_3 {
padding: 0 24rpx;
background-color: #ffffff;
border-radius: 18.46rpx;
mix-blend-mode: NOTTHROUGH;
.group_4 {
padding: 42rpx 4rpx 30rpx 22rpx;
border-bottom: solid 2rpx #eeeeee;
.image_7 {
width: 100rpx;
height: 86rpx;
}
.group_7 {
margin-left: 32rpx;
.text_5 {
color: #5db66f;
font-size: 40rpx;
font-family: SourceHanSansCN;
line-height: 40rpx;
}
.text_7 {
line-height: 22.18rpx;
}
}
.text_4 {
color: #333333;
line-height: 40rpx;
}
.group_5 {
width: 219.94rpx;
.group_6 {
overflow: hidden;
.text-wrapper_2 {
padding: 8rpx 0 4rpx;
overflow: hidden;
width: 60rpx;
height: 40rpx;
}
}
.group_8 {
padding-top: 16rpx;
.text-wrapper_3 {
padding: 8rpx 0 4rpx;
overflow: hidden;
width: 60rpx;
height: 40rpx;
.text_8 {
color: #ff9800;
}
}
}
.text-wrapper {
padding: 8rpx 0 4rpx;
overflow: hidden;
width: 112rpx;
height: 40rpx;
.text_6 {
line-height: 25.74rpx;
}
}
}
}
.group_9 {
padding: 12rpx 4rpx;
.image_8 {
margin: 4rpx 0;
width: 40rpx;
height: 40rpx;
}
.text-wrapper_4 {
padding: 12rpx 0;
overflow: hidden;
width: 168rpx;
height: 48rpx;
}
.image_9 {
margin-right: 12rpx;
width: 16rpx;
height: 26rpx;
}
}
.font_5 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 25.76rpx;
color: #5db66f;
}
}
.font_3 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 25.76rpx;
color: #1f2937;
}
.section_4 {
padding-left: 6rpx;
padding-bottom: 26rpx;
background-color: #ffffff;
border-radius: 26.28rpx;
mix-blend-mode: NOTTHROUGH;
.list {
margin-left: 18rpx;
margin-right: 24rpx;
.list-item {
padding: 24rpx 0;
border-bottom: solid 2rpx #eeeeee;
.section_5 {
padding: 12rpx 0 116rpx;
background-image: url('/static/images/codefun/4be80e2618f3c4b4aa1ce64fd9063abf.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 160rpx;
height: 160rpx;
.text-wrapper_5 {
padding: 8rpx 0;
background-image: linear-gradient(90deg, #43cf7c 0%, #5db66f 100%);
border-radius: 0rpx 8rpx 8rpx 0rpx;
mix-blend-mode: NOTTHROUGH;
width: 84rpx;
.font_6 {
font-size: 20rpx;
font-family: SourceHanSansCN;
line-height: 18.38rpx;
color: #ffffff;
}
}
}
.group_10 {
margin-right: 40rpx;
.text_9 {
line-height: 22.34rpx;
}
.text_10 {
line-height: 22.22rpx;
}
.group_11 {
padding-left: 64rpx;
.image_10 {
width: 28rpx;
height: 28rpx;
}
.text-wrapper_6 {
padding-top: 8rpx;
overflow: hidden;
width: 48rpx;
height: 32rpx;
.text_11 {
line-height: 22.12rpx;
}
}
.font_8 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 22.28rpx;
color: #f44336;
}
}
}
}
}
.group_14 {
margin: 18rpx 24rpx 0;
.text_14 {
line-height: 26.12rpx;
}
.text-wrapper_8 {
padding: 4rpx 0;
overflow: hidden;
width: 48rpx;
height: 32rpx;
.text_15 {
line-height: 22.2rpx;
}
}
}
.font_7 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 22.28rpx;
color: #5db66f;
}
.group_15 {
margin-left: 24rpx;
margin-top: 28rpx;
width: 528.18rpx;
.text_16 {
line-height: 25.12rpx;
}
.text_17 {
line-height: 26.26rpx;
}
}
.group_16 {
margin-left: 24rpx;
margin-top: 28rpx;
width: 216.94rpx;
.text_18 {
line-height: 25.82rpx;
}
.text_19 {
line-height: 25.34rpx;
}
}
.font_9 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 25.76rpx;
color: #6b7280;
}
.group_17 {
margin-left: 24rpx;
margin-top: 28rpx;
.text_20 {
line-height: 26.16rpx;
}
.text_21 {
line-height: 22.66rpx;
}
}
.divider {
margin: 28rpx 18rpx 0 24rpx;
background-color: #f3f4f6;
height: 2rpx;
}
.text_22 {
margin-left: 24rpx;
margin-top: 32rpx;
line-height: 26.12rpx;
}
.group_18 {
margin-left: 24rpx;
margin-top: 32rpx;
.text_23 {
line-height: 26.06rpx;
}
.text_24 {
line-height: 22.66rpx;
}
}
.font_10 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 22.28rpx;
color: #1f2937;
}
.group_19 {
margin-left: 24rpx;
margin-top: 28rpx;
.text_25 {
line-height: 25.9rpx;
}
.text_26 {
line-height: 25.78rpx;
}
}
.group_20 {
margin-left: 24rpx;
margin-top: 32rpx;
.text_27 {
line-height: 25.96rpx;
}
.text_28 {
line-height: 25.88rpx;
}
}
.divider_2 {
margin-top: 28rpx;
background-color: #f3f4f6;
width: 716rpx;
height: 2rpx;
}
.text-wrapper_9 {
margin-left: 24rpx;
margin-top: 32rpx;
padding: 24rpx 0;
background-color: #5db66f;
border-radius: 400rpx;
mix-blend-mode: NOTTHROUGH;
.text_29 {
line-height: 25.9rpx;
}
}
}
.font_4 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 22.28rpx;
color: #555555;
}
}
.image_6 {
width: 32rpx;
height: 32rpx;
}
.font {
font-size: 32rpx;
font-family: SourceHanSansCN;
line-height: 29.88rpx;
color: #333333;
}
.font_2 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 25.76rpx;
color: #ffffff;
}
}
</style>
\ No newline at end of file
body {
background-color: #e6f5e8;
}
.mt-5 {
margin-top: 10rpx;
}
.mt-11 {
margin-top: 22rpx;
}
.ml-5 {
margin-left: 10rpx;
}
.ml-13 {
margin-left: 26rpx;
}
.ml-9 {
margin-left: 18rpx;
}
.page {
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
.section {
padding: 32rpx 24rpx 32rpx 36rpx;
background-color: #5db66f;
mix-blend-mode: NOTTHROUGH;
.image {
border-radius: 64rpx;
width: 108rpx;
height: 42rpx;
}
.group {
margin-right: 4rpx;
.image_2 {
mix-blend-mode: NOTTHROUGH;
width: 34rpx;
height: 22rpx;
}
.image_3 {
mix-blend-mode: NOTTHROUGH;
width: 30rpx;
height: 22rpx;
}
.image_4 {
width: 48rpx;
height: 22rpx;
}
}
.group_2 {
padding-left: 6rpx;
.image_5 {
mix-blend-mode: NOTTHROUGH;
width: 14rpx;
height: 26rpx;
}
.pos {
position: absolute;
left: 6rpx;
top: 50%;
transform: translateY(-50%);
}
.text {
color: #ffffffe6;
line-height: 29.6rpx;
}
.pos_2 {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
.text_2 {
line-height: 25.78rpx;
}
}
}
}
.group_3 {
padding: 28rpx 24rpx 58rpx;
.section_2 {
padding: 16rpx 20rpx;
background-color: #ffffff;
border-radius: 1998rpx;
mix-blend-mode: NOTTHROUGH;
.text_3 {
color: #cccccc;
line-height: 26.02rpx;
}
}
.section_3 {
padding: 0 24rpx;
background-color: #ffffff;
border-radius: 18.46rpx;
mix-blend-mode: NOTTHROUGH;
.group_4 {
padding: 42rpx 4rpx 30rpx 22rpx;
border-bottom: solid 2rpx #eeeeee;
.image_7 {
width: 100rpx;
height: 86rpx;
}
.group_7 {
margin-left: 32rpx;
.text_5 {
color: #5db66f;
font-size: 40rpx;
font-family: SourceHanSansCN;
line-height: 40rpx;
}
.text_7 {
line-height: 22.18rpx;
}
}
.text_4 {
color: #333333;
line-height: 40rpx;
}
.group_5 {
width: 219.94rpx;
.group_6 {
overflow: hidden;
.text-wrapper_2 {
padding: 8rpx 0 4rpx;
overflow: hidden;
width: 60rpx;
height: 40rpx;
}
}
.group_8 {
padding-top: 16rpx;
.text-wrapper_3 {
padding: 8rpx 0 4rpx;
overflow: hidden;
width: 60rpx;
height: 40rpx;
.text_8 {
color: #ff9800;
}
}
}
.text-wrapper {
padding: 8rpx 0 4rpx;
overflow: hidden;
width: 112rpx;
height: 40rpx;
.text_6 {
line-height: 25.74rpx;
}
}
}
}
.group_9 {
padding: 12rpx 4rpx;
.image_8 {
margin: 4rpx 0;
width: 40rpx;
height: 40rpx;
}
.text-wrapper_4 {
padding: 12rpx 0;
overflow: hidden;
width: 168rpx;
height: 48rpx;
}
.image_9 {
margin-right: 12rpx;
width: 16rpx;
height: 26rpx;
}
}
.font_5 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 25.76rpx;
color: #5db66f;
}
}
.font_3 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 25.76rpx;
color: #1f2937;
}
.section_4 {
padding-left: 6rpx;
padding-bottom: 26rpx;
background-color: #ffffff;
border-radius: 26.28rpx;
mix-blend-mode: NOTTHROUGH;
.list {
margin-left: 18rpx;
margin-right: 24rpx;
.list-item {
padding: 24rpx 0;
border-bottom: solid 2rpx #eeeeee;
.section_5 {
padding: 12rpx 0 116rpx;
background-image: url('/static/images/codefun/4be80e2618f3c4b4aa1ce64fd9063abf.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 160rpx;
height: 160rpx;
.text-wrapper_5 {
padding: 8rpx 0;
background-image: linear-gradient(90deg, #43cf7c 0%, #5db66f 100%);
border-radius: 0rpx 8rpx 8rpx 0rpx;
mix-blend-mode: NOTTHROUGH;
width: 84rpx;
.font_6 {
font-size: 20rpx;
font-family: SourceHanSansCN;
line-height: 18.38rpx;
color: #ffffff;
}
}
}
.group_10 {
margin-right: 40rpx;
.text_9 {
line-height: 22.34rpx;
}
.text_10 {
line-height: 22.22rpx;
}
.group_11 {
padding-left: 64rpx;
.image_10 {
width: 28rpx;
height: 28rpx;
}
.text-wrapper_6 {
padding-top: 8rpx;
overflow: hidden;
width: 48rpx;
height: 32rpx;
.text_11 {
line-height: 22.12rpx;
}
}
.font_8 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 22.28rpx;
color: #f44336;
}
}
}
}
}
.group_14 {
margin: 18rpx 24rpx 0;
.text_14 {
line-height: 26.12rpx;
}
.text-wrapper_8 {
padding: 4rpx 0;
overflow: hidden;
width: 48rpx;
height: 32rpx;
.text_15 {
line-height: 22.2rpx;
}
}
}
.font_7 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 22.28rpx;
color: #5db66f;
}
.group_15 {
margin-left: 24rpx;
margin-top: 28rpx;
width: 528.18rpx;
.text_16 {
line-height: 25.12rpx;
}
.text_17 {
line-height: 26.26rpx;
}
}
.group_16 {
margin-left: 24rpx;
margin-top: 28rpx;
width: 216.94rpx;
.text_18 {
line-height: 25.82rpx;
}
.text_19 {
line-height: 25.34rpx;
}
}
.font_9 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 25.76rpx;
color: #6b7280;
}
.group_17 {
margin-left: 24rpx;
margin-top: 28rpx;
.text_20 {
line-height: 26.16rpx;
}
.text_21 {
line-height: 22.66rpx;
}
}
.divider {
margin: 28rpx 18rpx 0 24rpx;
background-color: #f3f4f6;
height: 2rpx;
}
.text_22 {
margin-left: 24rpx;
margin-top: 32rpx;
line-height: 26.12rpx;
}
.group_18 {
margin-left: 24rpx;
margin-top: 32rpx;
.text_23 {
line-height: 26.06rpx;
}
.text_24 {
line-height: 22.66rpx;
}
}
.font_10 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 22.28rpx;
color: #1f2937;
}
.group_19 {
margin-left: 24rpx;
margin-top: 28rpx;
.text_25 {
line-height: 25.9rpx;
}
.text_26 {
line-height: 25.78rpx;
}
}
.group_20 {
margin-left: 24rpx;
margin-top: 32rpx;
.text_27 {
line-height: 25.96rpx;
}
.text_28 {
line-height: 25.88rpx;
}
}
.divider_2 {
margin-top: 28rpx;
background-color: #f3f4f6;
width: 716rpx;
height: 2rpx;
}
.text-wrapper_9 {
margin-left: 24rpx;
margin-top: 32rpx;
padding: 24rpx 0;
background-color: #5db66f;
border-radius: 400rpx;
mix-blend-mode: NOTTHROUGH;
.text_29 {
line-height: 25.9rpx;
}
}
}
.font_4 {
font-size: 24rpx;
font-family: SourceHanSansCN;
line-height: 22.28rpx;
color: #555555;
}
}
.image_6 {
width: 32rpx;
height: 32rpx;
}
.font {
font-size: 32rpx;
font-family: SourceHanSansCN;
line-height: 29.88rpx;
color: #333333;
}
.font_2 {
font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 25.76rpx;
color: #ffffff;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论