提交 e07d0d6f 作者: 宇宙超人

产销发布页面修改,选择器去掉input事件,app端下载文件方法修改

上级 7ef27b6c
<script setup lang="ts"> <script setup lang="ts">
import { reactive, toRefs } from 'vue' import { reactive, toRefs } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app' import { onLoad, onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
import { useGlobSetting } from '/@/hooks/setting' import { useGlobSetting } from '/@/hooks/setting'
import * as ChanxiaoAPI from '@/api/model/chanxiao' import * as ChanxiaoAPI from '@/api/model/chanxiao'
import * as UserInfoAPI from '@/api/model/userInfo' import * as UserInfoAPI from '@/api/model/userInfo'
import { areaTree, getTextByCode, getCodeByText } from '@/utils/areaData' import { areaTree, getTextByCode, getCodeByText } from '@/utils/areaData'
import { useDictStore } from '@/store/modules/dict' import { useDictStore } from '@/store/modules/dict'
const dictStore = useDictStore() const dictStore = useDictStore()
const userStore = useUserStore() const userStore = useUserStore()
const globSetting = useGlobSetting() const globSetting = useGlobSetting()
onLoad((option) => { onLoad((option) => {
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: '发布采购需求', title: '发布采购需求',
}) })
...@@ -22,14 +22,14 @@ ...@@ -22,14 +22,14 @@
// 获取当前位置 // 获取当前位置
getCurrentAddressInfo() getCurrentAddressInfo()
} }
}) })
onShow(() => { onShow(() => {
// 数据字典赋值 // 数据字典赋值
initDict() initDict()
}) })
const pageData = reactive({ const pageData = reactive({
title: '发布采购需求', title: '发布采购需求',
show: { show: {
time: false, time: false,
...@@ -43,11 +43,11 @@ ...@@ -43,11 +43,11 @@
form: { form: {
id: '', id: '',
title: '', title: '',
count: 0, count: '',
unit: '', unit: '',
deadLine: '', deadLine: '',
priceStart: 0, priceStart: '',
priceEnd: 0, priceEnd: '',
address: '', address: '',
province: '', province: '',
city: '', city: '',
...@@ -105,11 +105,11 @@ ...@@ -105,11 +105,11 @@
msg: ['请上传示例图片'], msg: ['请上传示例图片'],
}, },
], ],
}) })
const { show, options, form } = toRefs(pageData) const { show, options, form } = toRefs(pageData)
function initDict() { function initDict() {
pageData.options.classify = dictStore.getDictList['classify'].map((item) => { pageData.options.classify = dictStore.getDictList['classify'].map((item) => {
return { return {
value: item.value, value: item.value,
...@@ -117,9 +117,9 @@ ...@@ -117,9 +117,9 @@
} }
}) })
pageData.options.address = areaTree pageData.options.address = areaTree
} }
function getCurrentAddressInfo() { function getCurrentAddressInfo() {
if (!uni.getStorageSync('location')) return if (!uni.getStorageSync('location')) return
const { lon, lat } = uni.getStorageSync('location') const { lon, lat } = uni.getStorageSync('location')
...@@ -132,17 +132,17 @@ ...@@ -132,17 +132,17 @@
pageData.form.country = res.country pageData.form.country = res.country
pageData.form.address = `${res.province}/${res.city}/${res.country}` pageData.form.address = `${res.province}/${res.city}/${res.country}`
}) })
} }
function getDetails(id) { function getDetails(id) {
ChanxiaoAPI.purchaseSellDetails({ id }).then((res) => { ChanxiaoAPI.purchaseSellDetails({ id }).then((res) => {
pageData.form = res pageData.form = res
pageData.form.address = `${getTextByCode(res.province)}/${getTextByCode(res.city)}/${getTextByCode(res.country)}` pageData.form.address = `${getTextByCode(res.province)}/${getTextByCode(res.city)}/${getTextByCode(res.country)}`
pageData.form.classifyText = pageData.options.classify.find((item) => item.value == res.classify)?.text pageData.form.classifyText = pageData.options.classify.find((item) => item.value == res.classify)?.text
pageData.form.imageObj = pageData.form.image && parseUrlInfo(pageData.form.image) pageData.form.imageObj = pageData.form.image && parseUrlInfo(pageData.form.image)
}) })
} }
function parseUrlInfo(url) { function parseUrlInfo(url) {
// 从URL中提取文件名 // 从URL中提取文件名
const pathParts = url.split('/') const pathParts = url.split('/')
const fileName = pathParts[pathParts.length - 1] const fileName = pathParts[pathParts.length - 1]
...@@ -157,26 +157,26 @@ ...@@ -157,26 +157,26 @@
extname: extname, extname: extname,
url: url, url: url,
} }
} }
function handleChangeTime(e) { function handleChangeTime(e) {
pageData.form.deadLine = e.result pageData.form.deadLine = e.result
pageData.show.time = false pageData.show.time = false
} }
function handleChangeClassify(e) { function handleChangeClassify(e) {
pageData.form.classify = e.value pageData.form.classify = e.value
pageData.form.classifyText = e.text pageData.form.classifyText = e.text
pageData.show.classify = false pageData.show.classify = false
} }
function handleChangeAddress(e) { function handleChangeAddress(e) {
pageData.form.address = e.text.join('/') pageData.form.address = e.text.join('/')
pageData.show.address = false pageData.show.address = false
} }
const toastRef = ref() const toastRef = ref()
const uploadRef = ref() const uploadRef = ref()
// 文件上传 // 文件上传
function handleUpload(file) { function handleUpload(file) {
uni.uploadFile({ uni.uploadFile({
url: globSetting.apiUrl + globSetting.urlPrefix + '/sys/common/upload', // 直接使用上传接口URL url: globSetting.apiUrl + globSetting.urlPrefix + '/sys/common/upload', // 直接使用上传接口URL
filePath: file.tempFiles[0].path, filePath: file.tempFiles[0].path,
...@@ -208,14 +208,14 @@ ...@@ -208,14 +208,14 @@
pageData.form.image = null pageData.form.image = null
}, },
}) })
} }
// 文件删除 // 文件删除
function handleDelete() { function handleDelete() {
uploadRef.value.clearFiles() uploadRef.value.clearFiles()
pageData.form.image = null pageData.form.image = null
} }
const formRef = ref() const formRef = ref()
function submit() { function submit() {
formRef.value.validator(pageData.form, pageData.rules, true).then((res) => { formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
if (res.isPassed) { if (res.isPassed) {
changeAddressValue(pageData.form) changeAddressValue(pageData.form)
...@@ -230,99 +230,354 @@ ...@@ -230,99 +230,354 @@
}) })
} }
}) })
} }
/** /**
* 处理地区值 * 处理地区值
* @param formData 表单数据 * @param formData 表单数据
*/ */
const changeAddressValue = (formData) => { const changeAddressValue = (formData) => {
const addressValue = formData.address.split('/') const addressValue = formData.address.split('/')
if (addressValue.length === 3) { if (addressValue.length === 3) {
formData.province = getCodeByText(addressValue[0]) formData.province = getCodeByText(addressValue[0])
formData.city = getCodeByText(addressValue[1]) formData.city = getCodeByText(addressValue[1])
formData.country = getCodeByText(addressValue[2]) formData.country = getCodeByText(addressValue[2])
} }
} }
</script> </script>
<template> <template>
<fui-form ref="formRef"> <view class="page">
<fui-input required label="标题" borderTop placeholder="请输入标题" v-model="form.title"></fui-input> <view class="formBox">
<fui-input required label="数量" borderTop placeholder="请输入数量" v-model="form.count"></fui-input> <fui-form ref="formRef" label-weight="auto" top="60">
<fui-input required label="单位" borderTop placeholder="请输入单位" v-model="form.unit"></fui-input> <view class="mt20">
<fui-input <fui-input required label="采购标题" placeholder="请输入采购标题" v-model="form.title" labelSize="28"
required label-width="180"></fui-input>
label="截至时间" <fui-input label="说明" placeholder="请输入规格说明" v-model="form.inputTextArea" labelSize="28"
borderTop label-width="180"></fui-input>
placeholder="请选择截至时间" </view>
v-model="form.deadLine" <view class="mt20">
@click="show.time = true" <!-- 价格区间 -->
></fui-input> <view class="form-section" style="padding: 0 10rpx;">
<fui-input required label="最低价" placeholder="请输入最低价" v-model="form.priceStart"></fui-input> <view class="form-item required flex align-center">
<fui-input required label="最高价" placeholder="请输入最高价" v-model="form.priceEnd"></fui-input> <text class="label">价格区间</text>
<fui-input <view class="price-range">
required <input type="number" class="price-input" v-model="form.priceStart" placeholder="最低价"
label="省/市/区县" :min="0" />
placeholder="请选择省/市/区县" <text class="price-separator">-</text>
v-model="form.address" <input type="number" class="price-input" v-model="form.priceEnd" placeholder="最高价"
@click="show.address = true" :min="0" />
></fui-input> </view>
<fui-input </view>
required </view>
label="分类" <fui-input type="number" required label="数量" placeholder="请输入数量" v-model="form.count" labelSize="28"
placeholder="请选择分类" label-width="180"></fui-input>
v-model="form.classifyText" <fui-input required label="单位" placeholder="请输入计量单位" v-model="form.unit" labelSize="28"
@click="show.classify = true" label-width="180"></fui-input>
></fui-input> </view>
<fui-input label="说明" placeholder="请输入说明" v-model="form.inputTextArea"></fui-input> <view class="mt20">
<view class="bg-white" style="padding: 0.875rem 0.35rem"> <view class="form-item required flex align-center" style="padding: 20rpx 10rpx;">
<view class="mb-1 flex justify-start"> <text class="label">省/市/区县</text>
<text class="pr-1" style="color: #ff2b2b">*</text> <view class="select-input" @click="show.address = true">
示例图片 <text class="time-text" :class="{ placeholder: !form.address }">
{{ form.address || '请选择省/市/区县' }}
</text>
</view>
</view>
<!-- 截至时间 -->
<view class="form-section" style="padding: 0 10rpx;">
<view class="form-item required flex align-center">
<text class="label">截至时间</text>
<view class="time-input" @click="show.time = true">
<text class="time-text" :class="{ placeholder: !form.deadLine }">
{{ form.deadLine || '请选择截止时间' }}
</text>
</view>
</view>
</view>
<view class="form-section" style="padding: 0 10rpx;">
<view class="form-item required flex align-center">
<text class="label">分类</text>
<view class="time-input" @click="show.classify = true">
<text class="select-text" :class="{ placeholder: !form.classifyText }">
{{ form.classifyText || '请选择分类' }}
</text>
</view>
</view> </view>
<uni-file-picker
:value="form.imageObj"
ref="uploadRef"
limit="1"
:auto-upload="false"
@select="handleUpload"
@delete="handleDelete"
></uni-file-picker>
</view> </view>
<view class="fui-btn__box bg-white p-4" v-if="!form.id"> </view>
<view class="bg-white mt20" style="padding: 0.875rem 1rem">
<view class="mb-1 flex justify-start"> 示例图片 </view>
<uni-file-picker :value="form.imageObj" ref="uploadRef" limit="1" :auto-upload="false"
@select="handleUpload" @delete="handleDelete"></uni-file-picker>
</view>
<view class="fui-btn__box" v-if="!form.id" style="margin-top: 30rpx;">
<fui-button text="发布需求" bold radius="96rpx" @click="submit"></fui-button> <fui-button text="发布需求" bold radius="96rpx" @click="submit"></fui-button>
</view> </view>
</fui-form> </fui-form>
<fui-date-picker <fui-date-picker :show="show.time" type="3" @change="handleChangeTime"
:show="show.time" @cancel="show.time = false"></fui-date-picker>
type="3" <fui-picker :show="show.classify" :layer="1" :linkage="true" :options="options.classify"
@change="handleChangeTime" @change="handleChangeClassify" @cancel="show.classify = false"></fui-picker>
@cancel="show.time = false" <fui-picker :show="show.address" :options="options.address" :linkage="true" :layer="3"
></fui-date-picker> @change="handleChangeAddress" @cancel="show.address = false"></fui-picker>
<fui-picker
:show="show.classify" <fui-toast ref="toastRef"></fui-toast>
:layer="1" </view>
:linkage="true" </view>
:options="options.classify" <fui-date-picker :show="show.time" type="3" @change="handleChangeTime" @cancel="show.time = false"
@change="handleChangeClassify" minDate="2025-01-01"></fui-date-picker>
@cancel="show.classify = false" <fui-picker :show="show.classify" :layer="1" :linkage="true" :options="options.classify"
></fui-picker> @change="handleChangeClassify" @cancel="show.classify = false"></fui-picker>
<fui-picker <fui-picker :show="show.address" :options="options.address" :linkage="true" :layer="3" @change="handleChangeAddress"
:show="show.address" @cancel="show.address = false"></fui-picker>
:options="options.address"
:linkage="true"
:layer="3"
@change="handleChangeAddress"
@cancel="show.address = false"
></fui-picker>
<fui-toast ref="toastRef"></fui-toast> <fui-toast ref="toastRef"></fui-toast>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.fui-button) { body {
border-color: #ff9800 !important; background-color: #E6F5E8;
background: #ff9800 !important; }
.page {
background-color: #E6F5E8;
width: 750rpx;
overflow-x: hidden;
.mt20 {
margin-top: 30rpx;
background: #FFF;
padding: 20rpx;
border-radius: 10rpx;
}
.formBox {
width: 690rpx;
margin: 30rpx auto;
} }
.purchase-form {
background: transparent;
}
.form-section {
// background: #ffffff;
// border-radius: 12rpx;
// margin-bottom: 20rpx;
// box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
border-bottom: 1rpx solid #f5f5f5;
}
.form-item {
padding: 30rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
&.required .label::before {
content: '*';
color: #ff4d4f;
margin-right: 8rpx;
}
// 添加点击区域样式
.select-input {
position: relative;
}
}
.form-row {
display: flex;
justify-content: space-between;
}
.half-width {
width: 48%;
}
.align-center {
align-items: center;
}
.label {
display: block;
font-size: 28rpx;
color: #333333;
font-weight: 500;
width: 180rpx;
// margin-right: 20rpx;
}
.input {
width: 100%;
height: 80rpx;
background: #f8f9fa;
border-radius: 8rpx;
padding: 0 20rpx;
font-size: 28rpx;
color: #333333;
&::placeholder {
color: #999999;
}
}
.price-range {
display: flex;
align-items: center;
// justify-content: space-between;
}
.price-input {
width: 15%;
// height: 80rpx;
// background: #f8f9fa;
// border-radius: 8rpx;
padding: 0 10rpx;
font-size: 28rpx;
text-align: center;
}
.price-separator {
color: #666666;
font-size: 28rpx;
margin: 0 10rpx;
}
.select-input {
flex: 1;
border-radius: 8rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.select-text {
font-size: 28rpx;
color: #333333;
padding: 0 20rpx;
&.placeholder {
color: #999999;
}
}
.select-arrow {
color: #999999;
font-size: 24rpx;
line-height: 1;
}
.time-range {
display: flex;
align-items: center;
justify-content: space-between;
}
.time-input {
width: 45%;
// height: 80rpx;
// background: #f8f9fa;
border-radius: 8rpx;
display: flex;
align-items: center;
}
.time-text {
font-size: 28rpx;
color: #333333;
padding: 0 20rpx;
&.placeholder {
color: #999999;
}
}
.time-separator {
color: #666666;
font-size: 28rpx;
margin: 0 10rpx;
}
.upload-area {
margin-top: 10rpx;
}
.custom-uploader {
:deep(.uni-file-picker__container) {
border: 2rpx dashed #d9d9d9;
border-radius: 8rpx;
background: #f8f9fa;
}
}
.upload-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200rpx;
color: #999999;
}
.upload-icon {
font-size: 48rpx;
margin-bottom: 10rpx;
}
.upload-text {
font-size: 24rpx;
}
.submit-section {
background: transparent;
padding: 40rpx 0;
}
.submit-btn {
width: 100%;
height: 88rpx;
background: #5DB66F;
border-radius: 44rpx;
color: #ffffff;
font-size: 32rpx;
font-weight: 500;
border: none;
&:active {
background: #4ca85c;
opacity: 0.9;
}
}
}
::v-deep .uni-input-placeholder {
font-size: 28rpx !important;
color: #999999 !important;
}
:deep(.fui-button) {
width: 690rpx;
border-color: #5DB66F !important;
background: #5DB66F !important;
}
// 移除fui-form的默认样式
:deep(.fui-form) {
background: transparent;
}
:deep(.fui-form__item) {
background: transparent;
border: none;
margin-bottom: 0;
padding: 0;
}
</style> </style>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, toRefs } from 'vue' import { reactive, toRefs } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app' import { onLoad, onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
import { useGlobSetting } from '/@/hooks/setting' import { useGlobSetting } from '/@/hooks/setting'
import * as ChanxiaoAPI from '@/api/model/chanxiao' import * as ChanxiaoAPI from '@/api/model/chanxiao'
import * as UserInfoAPI from '@/api/model/userInfo' import * as UserInfoAPI from '@/api/model/userInfo'
import { areaTree, getTextByCode, getCodeByText } from '@/utils/areaData' import { areaTree, getTextByCode, getCodeByText } from '@/utils/areaData'
import { useDictStore } from '@/store/modules/dict' import { useDictStore } from '@/store/modules/dict'
const dictStore = useDictStore() const dictStore = useDictStore()
const userStore = useUserStore() const userStore = useUserStore()
const globSetting = useGlobSetting() const globSetting = useGlobSetting()
onLoad((option) => { onLoad((option) => {
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: '发布供应需求', title: '发布供应需求',
}) })
...@@ -22,14 +22,14 @@ ...@@ -22,14 +22,14 @@
// 获取当前位置 // 获取当前位置
getCurrentAddressInfo() getCurrentAddressInfo()
} }
}) })
onShow(() => { onShow(() => {
// 数据字典赋值 // 数据字典赋值
initDict() initDict()
}) })
const pageData = reactive({ const pageData = reactive({
title: '发布供应需求', title: '发布供应需求',
show: { show: {
time1: false, time1: false,
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
id: '', id: '',
title: '', title: '',
productSpecs: '', productSpecs: '',
minPrice: 0, minPrice: '',
maxPrice: 0, maxPrice: '',
unit: '', unit: '',
currency: '', currency: '',
supplyQuantity: '', supplyQuantity: '',
...@@ -119,11 +119,11 @@ ...@@ -119,11 +119,11 @@
msg: ['请选择分类'], msg: ['请选择分类'],
}, },
], ],
}) })
const { show, options, form } = toRefs(pageData) const { show, options, form } = toRefs(pageData)
function initDict() { function initDict() {
pageData.options.address = areaTree pageData.options.address = areaTree
console.log(dictStore.getDictList['purchase_status']) console.log(dictStore.getDictList['purchase_status'])
...@@ -139,9 +139,9 @@ ...@@ -139,9 +139,9 @@
text: item.text, text: item.text,
} }
}) })
} }
function getCurrentAddressInfo() { function getCurrentAddressInfo() {
if (!uni.getStorageSync('location')) return if (!uni.getStorageSync('location')) return
const { lon, lat } = uni.getStorageSync('location') const { lon, lat } = uni.getStorageSync('location')
...@@ -154,9 +154,9 @@ ...@@ -154,9 +154,9 @@
pageData.form.country = res.country pageData.form.country = res.country
pageData.form.address = `${res.province}/${res.city}/${res.country}` pageData.form.address = `${res.province}/${res.city}/${res.country}`
}) })
} }
function getDetails(id) { function getDetails(id) {
ChanxiaoAPI.purchaseSellDetails({ id }).then((res) => { ChanxiaoAPI.purchaseSellDetails({ id }).then((res) => {
pageData.form = res pageData.form = res
pageData.form.address = `${getTextByCode(res.province)}/${getTextByCode(res.city)}/${getTextByCode(res.country)}` pageData.form.address = `${getTextByCode(res.province)}/${getTextByCode(res.city)}/${getTextByCode(res.country)}`
...@@ -164,8 +164,8 @@ ...@@ -164,8 +164,8 @@
pageData.form.classifyText = pageData.options.classify.find((item) => item.value == res.classify).text pageData.form.classifyText = pageData.options.classify.find((item) => item.value == res.classify).text
pageData.form.imageObj = pageData.form.image && parseUrlInfo(pageData.form.image) pageData.form.imageObj = pageData.form.image && parseUrlInfo(pageData.form.image)
}) })
} }
function parseUrlInfo(url) { function parseUrlInfo(url) {
// 从URL中提取文件名 // 从URL中提取文件名
const pathParts = url.split('/') const pathParts = url.split('/')
const fileName = pathParts[pathParts.length - 1] const fileName = pathParts[pathParts.length - 1]
...@@ -180,35 +180,35 @@ ...@@ -180,35 +180,35 @@
extname: extname, extname: extname,
url: url, url: url,
} }
} }
function handleChangeTime1(e) { function handleChangeTime1(e) {
pageData.form.supplyStartDate = e.result pageData.form.supplyStartDate = e.result
pageData.show.time1 = false pageData.show.time1 = false
} }
function handleChangeTime2(e) { function handleChangeTime2(e) {
pageData.form.supplyEndDate = e.result pageData.form.supplyEndDate = e.result
pageData.show.time2 = false pageData.show.time2 = false
} }
function handleChangeClassify(e) { function handleChangeClassify(e) {
pageData.form.classify = e.value pageData.form.classify = e.value
pageData.form.classifyText = e.text pageData.form.classifyText = e.text
pageData.show.classify = false pageData.show.classify = false
} }
function handleChangeAddress(e) { function handleChangeAddress(e) {
pageData.form.address = e.text.join('/') pageData.form.address = e.text.join('/')
pageData.show.address = false pageData.show.address = false
} }
function handleChangeStatus(e) { function handleChangeStatus(e) {
pageData.form.status = e.value pageData.form.status = e.value
pageData.form.statusText = e.text pageData.form.statusText = e.text
pageData.show.status = false pageData.show.status = false
} }
const toastRef = ref() const toastRef = ref()
const uploadRef = ref() const uploadRef = ref()
// 文件上传 // 文件上传
function handleUpload(file) { function handleUpload(file) {
uni.uploadFile({ uni.uploadFile({
url: globSetting.apiUrl + globSetting.urlPrefix + '/sys/common/upload', // 直接使用上传接口URL url: globSetting.apiUrl + globSetting.urlPrefix + '/sys/common/upload', // 直接使用上传接口URL
filePath: file.tempFiles[0].path, filePath: file.tempFiles[0].path,
...@@ -240,14 +240,14 @@ ...@@ -240,14 +240,14 @@
pageData.form.image = null pageData.form.image = null
}, },
}) })
} }
// 文件删除 // 文件删除
function handleDelete(file) { function handleDelete(file) {
uploadRef.value.clearFiles() uploadRef.value.clearFiles()
pageData.form.image = null pageData.form.image = null
} }
const formRef = ref() const formRef = ref()
function submit() { function submit() {
formRef.value.validator(pageData.form, pageData.rules, true).then((res) => { formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
if (res.isPassed) { if (res.isPassed) {
changeAddressValue(pageData.form) changeAddressValue(pageData.form)
...@@ -262,137 +262,384 @@ ...@@ -262,137 +262,384 @@
}) })
} }
}) })
} }
/** /**
* 处理地区值 * 处理地区值
* @param formData 表单数据 * @param formData 表单数据
*/ */
const changeAddressValue = (formData) => { const changeAddressValue = (formData) => {
const addressValue = formData.address.split('/') const addressValue = formData.address.split('/')
if (addressValue.length === 3) { if (addressValue.length === 3) {
formData.province = getCodeByText(addressValue[0]) formData.province = getCodeByText(addressValue[0])
formData.city = getCodeByText(addressValue[1]) formData.city = getCodeByText(addressValue[1])
formData.country = getCodeByText(addressValue[2]) formData.country = getCodeByText(addressValue[2])
} }
} }
</script> </script>
<template> <template>
<fui-form ref="formRef"> <view class="page">
<fui-input required label="供应标题" placeholder="请输入供应标题" v-model="form.title"></fui-input> <view class="formBox">
<fui-input label="规格说明" borderTop placeholder="请输入规格说明" v-model="form.productSpecs"></fui-input> <fui-form ref="formRef" label-weight="auto" top="60">
<fui-input required label="最低价" borderTop placeholder="请输入最低价" v-model="form.minPrice"></fui-input> <view class="mt20">
<fui-input required label="最高价" borderTop placeholder="请输入最高价" v-model="form.maxPrice"></fui-input> <fui-input required label="供应标题" placeholder="请输入供应标题" v-model="form.title"
<fui-input required label="计量单位" borderTop placeholder="请输入计量单位" v-model="form.unit"></fui-input> labelSize="28" label-width="180"></fui-input>
<fui-input required label="币种" borderTop placeholder="请输入币种" v-model="form.currency"></fui-input> <fui-input label="规格说明" placeholder="请输入规格说明" v-model="form.productSpecs"
<fui-input labelSize="28" label-width="180"></fui-input>
required </view>
label="供应数量" <view class="mt20">
borderTop <!-- 价格区间 -->
placeholder="请输入供应数量" <view class="form-section" style="padding: 0 10rpx;">
v-model="form.supplyQuantity" <view class="form-item required flex align-center">
></fui-input> <text class="label">价格区间</text>
<fui-input <view class="price-range">
required <input type="number" class="price-input" v-model="form.minPrice" placeholder="最低价" :min="0" />
label="最小起订量" <text class="price-separator">-</text>
borderTop <input type="number" class="price-input" v-model="form.maxPrice" placeholder="最高价" :min="0"/>
placeholder="请输入最小起订量" </view>
v-model="form.minOrderQuantity" </view>
></fui-input> </view>
<fui-input <!-- <fui-input required label="最低价" placeholder="请输入最低价" v-model="form.minPrice"
required labelSize="28" label-width="180"></fui-input>
label="省/市/区县" <fui-input required label="最高价" placeholder="请输入最高价" v-model="form.maxPrice"
placeholder="请选择省/市/区县" labelSize="28" label-width="180"></fui-input> -->
v-model="form.address" <fui-input required label="计量单位" placeholder="请输入计量单位" v-model="form.unit"
@click="show.address = true" labelSize="28" label-width="180" ></fui-input>
></fui-input> <fui-input required label="币种" placeholder="请输入币种" v-model="form.currency"
<fui-input label="详细地址" placeholder="请输入详细地址" v-model="form.detailedAddress"></fui-input> labelSize="28" label-width="180"></fui-input>
<fui-input <fui-input type="number" required label="供应数量" placeholder="请输入供应数量" v-model="form.supplyQuantity"
label="供应开始时间" labelSize="28" label-width="180"></fui-input>
borderTop <fui-input type="number" required label="最小起订量" placeholder="请输入最小起订量" v-model="form.minOrderQuantity"
placeholder="请选择供应开始时间" labelSize="28" label-width="180"></fui-input>
v-model="form.supplyStartDate" </view>
@click="show.time1 = true" <view class="mt20">
></fui-input> <view class="form-item required flex align-center" style="padding: 20rpx 10rpx;">
<fui-input <text class="label">省/市/区县</text>
label="供应结束时间" <view class="select-input" @click="show.address = true">
borderTop <text class="time-text" :class="{ placeholder: !form.address }">
placeholder="请选择供应结束时间" {{ form.address || '请选择省/市/区县' }}
v-model="form.supplyEndDate" </text>
@click="show.time2 = true"
></fui-input> </view>
<fui-input </view>
required <fui-input label="详细地址" placeholder="请输入详细地址" v-model="form.detailedAddress"
label="分类" labelSize="28" label-width="180"></fui-input>
placeholder="请选择分类"
v-model="form.classifyText" <!-- 供应时间 -->
@click="show.classify = true" <view class="form-section" style="padding: 0 30rpx;">
></fui-input> <view class="form-item flex align-center">
<fui-input <text class="label">供应时间</text>
label="状态" <view class="time-range">
placeholder="请选择状态" <view class="time-input" @click="show.time1 = true">
v-model="form.statusText" <text class="time-text" :class="{ placeholder: !form.supplyStartDate }">
@click="show.status = true" {{ form.supplyStartDate || '供应开始时间' }}
></fui-input> </text>
<view class="bg-white" style="padding: 0.875rem 1rem"> </view>
<text class="time-separator">-</text>
<view class="time-input" @click="show.time2 = true">
<text class="time-text" :class="{ placeholder: !form.supplyEndDate }">
{{ form.supplyEndDate || '供应结束时间' }}
</text>
</view>
</view>
</view>
</view>
<!-- <fui-input label="供应开始时间" placeholder="请选择供应开始时间" v-model="form.supplyStartDate"
@click="show.time1 = true" labelSize="28" label-width="180"></fui-input>
<fui-input label="供应结束时间" placeholder="请选择供应结束时间" v-model="form.supplyEndDate"
@click="show.time2 = true" labelSize="28" label-width="180"></fui-input> -->
<view class="form-section" style="padding: 0 10rpx;">
<view class="form-item required flex align-center">
<text class="label">分类</text>
<view class="time-input" @click="show.classify = true">
<text class="select-text" :class="{ placeholder: !form.classifyText }">
{{ form.classifyText || '请选择分类' }}
</text>
</view>
</view>
</view>
<view class="form-section" style="padding: 0 10rpx;">
<view class="form-item required flex align-center">
<text class="label">状态</text>
<view class="time-input" @click="show.status = true">
<text class="select-text" :class="{ placeholder: !form.statusText }">
{{ form.statusText || '请选择状态' }}
</text>
</view>
</view>
</view>
</view>
<view class="bg-white mt20" style="padding: 0.875rem 1rem">
<view class="mb-1 flex justify-start"> 示例图片 </view> <view class="mb-1 flex justify-start"> 示例图片 </view>
<uni-file-picker <uni-file-picker :value="form.imageObj" ref="uploadRef" limit="1" :auto-upload="false"
:value="form.imageObj" @select="handleUpload" @delete="handleDelete"></uni-file-picker>
ref="uploadRef"
limit="1"
:auto-upload="false"
@select="handleUpload"
@delete="handleDelete"
></uni-file-picker>
</view> </view>
<view class="fui-btn__box bg-white p-4" v-if="!form.id"> <view class="fui-btn__box" v-if="!form.id" style="margin-top: 30rpx;">
<fui-button text="发布需求" bold radius="96rpx" @click="submit"></fui-button> <fui-button text="发布需求" bold radius="96rpx" @click="submit"></fui-button>
</view> </view>
</fui-form> </fui-form>
<fui-date-picker <fui-date-picker :show="show.time1" type="3" @change="handleChangeTime1"
:show="show.time1" @cancel="show.time1 = false" minDate="2025-01-01"></fui-date-picker>
type="3" <fui-date-picker :show="show.time2" type="3" @change="handleChangeTime2"
@change="handleChangeTime1" @cancel="show.time2 = false" minDate="2025-01-01"></fui-date-picker>
@cancel="show.time1 = false" <fui-picker :show="show.status" :layer="1" :linkage="true" :options="options.status"
></fui-date-picker> @change="handleChangeStatus" @cancel="show.status = false"></fui-picker>
<fui-date-picker <fui-picker :show="show.classify" :layer="1" :linkage="true" :options="options.classify"
:show="show.time2" @change="handleChangeClassify" @cancel="show.classify = false"></fui-picker>
type="3" <fui-picker :show="show.address" :options="options.address" :linkage="true" :layer="3"
@change="handleChangeTime2" @change="handleChangeAddress" @cancel="show.address = false"></fui-picker>
@cancel="show.time2 = false"
></fui-date-picker>
<fui-picker
:show="show.status"
:layer="1"
:linkage="true"
:options="options.status"
@change="handleChangeStatus"
@cancel="show.status = false"
></fui-picker>
<fui-picker
:show="show.classify"
:layer="1"
:linkage="true"
:options="options.classify"
@change="handleChangeClassify"
@cancel="show.classify = false"
></fui-picker>
<fui-picker
:show="show.address"
:options="options.address"
:linkage="true"
:layer="3"
@change="handleChangeAddress"
@cancel="show.address = false"
></fui-picker>
<fui-toast ref="toastRef"></fui-toast> <fui-toast ref="toastRef"></fui-toast>
</view>
</view>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.fui-button) { body {
border-color: #ff9800 !important; background-color: #E6F5E8;
background: #ff9800 !important; }
.page {
background-color: #E6F5E8;
width: 750rpx;
overflow-x: hidden;
.mt20 {
margin-top: 30rpx;
background: #FFF;
padding: 20rpx;
border-radius: 10rpx;
}
.formBox {
width: 690rpx;
margin: 30rpx auto;
}
.supply-form {
background: transparent;
}
.form-section {
// background: #ffffff;
// border-radius: 12rpx;
// margin-bottom: 20rpx;
// box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
border-bottom: 1rpx solid #f5f5f5;
}
.form-item {
padding: 30rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
&.required .label::before {
content: '*';
color: #ff4d4f;
margin-right: 8rpx;
}
// 添加点击区域样式
.select-input {
position: relative;
}
}
.form-row {
display: flex;
justify-content: space-between;
}
.half-width {
width: 48%;
}
.align-center {
align-items: center;
}
.label {
display: block;
font-size: 28rpx;
color: #333333;
font-weight: 500;
width: 180rpx;
// margin-right: 20rpx;
}
.input {
width: 100%;
height: 80rpx;
background: #f8f9fa;
border-radius: 8rpx;
padding: 0 20rpx;
font-size: 28rpx;
color: #333333;
&::placeholder {
color: #999999;
}
}
.price-range {
display: flex;
align-items: center;
// justify-content: space-between;
}
.price-input {
width: 15%;
// height: 80rpx;
// background: #f8f9fa;
// border-radius: 8rpx;
padding: 0 10rpx;
font-size: 28rpx;
text-align: center;
}
.price-separator {
color: #666666;
font-size: 28rpx;
margin: 0 10rpx;
}
.select-input {
flex: 1;
border-radius: 8rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.select-text {
font-size: 28rpx;
color: #333333;
padding: 0 20rpx;
&.placeholder {
color: #999999;
}
}
.select-arrow {
color: #999999;
font-size: 24rpx;
line-height: 1;
}
.time-range {
display: flex;
align-items: center;
justify-content: space-between;
} }
.time-input {
width: 45%;
// height: 80rpx;
// background: #f8f9fa;
border-radius: 8rpx;
display: flex;
align-items: center;
}
.time-text {
font-size: 28rpx;
color: #333333;
&.placeholder {
color: #999999;
}
}
.time-separator {
color: #666666;
font-size: 28rpx;
margin: 0 10rpx;
}
.upload-area {
margin-top: 10rpx;
}
.custom-uploader {
:deep(.uni-file-picker__container) {
border: 2rpx dashed #d9d9d9;
border-radius: 8rpx;
background: #f8f9fa;
}
}
.upload-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200rpx;
color: #999999;
}
.upload-icon {
font-size: 48rpx;
margin-bottom: 10rpx;
}
.upload-text {
font-size: 24rpx;
}
.submit-section {
background: transparent;
padding: 40rpx 0;
}
.submit-btn {
width: 100%;
height: 88rpx;
background: #5DB66F;
border-radius: 44rpx;
color: #ffffff;
font-size: 32rpx;
font-weight: 500;
border: none;
&:active {
background: #4ca85c;
opacity: 0.9;
}
}
}
::v-deep .uni-input-placeholder{
font-size: 28rpx !important;
color: #999999 !important;
}
:deep(.fui-button) {
width: 690rpx;
border-color: #5DB66F !important;
background: #5DB66F !important;
}
// 移除fui-form的默认样式
:deep(.fui-form) {
background: transparent;
}
:deep(.fui-form__item) {
background: transparent;
border: none;
margin-bottom: 0;
padding: 0;
}
</style> </style>
<template> <template>
<u-modal :show="show" :title="dialogTitle" :showConfirmButton="false" :showCancelButton="false" <u-modal :show="show" :title="dialogTitle" :showConfirmButton="false" :showCancelButton="false" @close="handleClose"
@close="handleClose" :closeOnClickOverlay="false"> :closeOnClickOverlay="false">
<view class="dialog-content"> <view class="dialog-content">
<u-form :model="formData" :rules="rules" ref="formRef" label-width="180rpx"> <u-form :model="formData" :rules="rules" ref="formRef" label-width="180rpx">
<!-- 设备基本信息 --> <!-- 设备基本信息 -->
...@@ -11,8 +11,13 @@ ...@@ -11,8 +11,13 @@
</u-form-item> </u-form-item>
<u-form-item label="设备类型" prop="deviceType" required> <u-form-item label="设备类型" prop="deviceType" required>
<u-input v-model="formData.deviceTypeText" placeholder="请选择设备类型" border="bottom" <view class="address-display" @click="showDeviceTypePicker = true">
@click="showDeviceTypePicker = true" /> <text :class="{ 'placeholder-text': !formData.deviceTypeText }">
{{ formData.deviceTypeText || '请选择设备类型' }}
</text>
</view>
<!-- <u-input v-model="formData.deviceTypeText" placeholder="请选择设备类型" border="bottom"
@click="showDeviceTypePicker = true" /> -->
</u-form-item> </u-form-item>
<u-form-item label="设备标识" prop="deviceIdentifier" required> <u-form-item label="设备标识" prop="deviceIdentifier" required>
...@@ -21,7 +26,8 @@ ...@@ -21,7 +26,8 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<view class="dialog-buttons"> <view class="dialog-buttons">
<u-button type="primary" @click="handleSubmit" :loading="loading" size="normal" class="submit-btn" color="var(--fui-color-success)"> <u-button type="primary" @click="handleSubmit" :loading="loading" size="normal" class="submit-btn"
color="var(--fui-color-success)">
{{ submitButtonText }} {{ submitButtonText }}
</u-button> </u-button>
<u-button @click="handleClose" size="normal" class="cancel-btn">取消</u-button> <u-button @click="handleClose" size="normal" class="cancel-btn">取消</u-button>
...@@ -100,7 +106,7 @@ const rules = { ...@@ -100,7 +106,7 @@ const rules = {
{ min: 2, max: 50, message: '设备名称长度在2-50个字符之间', trigger: 'blur' } { min: 2, max: 50, message: '设备名称长度在2-50个字符之间', trigger: 'blur' }
], ],
deviceType: [ deviceType: [
{ required: true, message: '请选择设备类型',type:'number', trigger: 'change' } { required: true, message: '请选择设备类型', type: 'number', trigger: 'change' }
], ],
deviceIdentifier: [ deviceIdentifier: [
{ required: true, message: '请输入设备唯一标识', trigger: 'blur' }, { required: true, message: '请输入设备唯一标识', trigger: 'blur' },
...@@ -259,6 +265,7 @@ defineExpose({ ...@@ -259,6 +265,7 @@ defineExpose({
.submit-btn { .submit-btn {
flex: 1; flex: 1;
::v-deep .u-button { ::v-deep .u-button {
background-color: #5DB66F; background-color: #5DB66F;
border-color: #5DB66F; border-color: #5DB66F;
...@@ -267,6 +274,7 @@ defineExpose({ ...@@ -267,6 +274,7 @@ defineExpose({
.cancel-btn { .cancel-btn {
flex: 1; flex: 1;
::v-deep .u-button { ::v-deep .u-button {
background-color: #fff; background-color: #fff;
color: #666; color: #666;
...@@ -300,6 +308,27 @@ defineExpose({ ...@@ -300,6 +308,27 @@ defineExpose({
min-width: 0; min-width: 0;
} }
} }
.address-display {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12rpx 18rpx;
background-color: transparent;
border-bottom: 2rpx solid #e4e7ed;
border-radius: 0;
cursor: pointer;
width: 100%;
text {
flex: 1;
font-size: 28rpx;
color: #333;
}
.placeholder-text {
color: #c0c4cc;
}
}
::v-deep .u-form-item__body__left__content__required { ::v-deep .u-form-item__body__left__content__required {
position: static; position: static;
......
...@@ -8,9 +8,12 @@ ...@@ -8,9 +8,12 @@
<u-input v-model="formData.baseName" placeholder="请输入基地名称" border="bottom" /> <u-input v-model="formData.baseName" placeholder="请输入基地名称" border="bottom" />
</u-form-item> </u-form-item>
<u-form-item label="基地类型" prop="baseType" required> <u-form-item label="基地类型" prop="baseType" required class="clickable" @click="show.farmType = true">
<u-input v-model="formData.baseTypeText" placeholder="请选择基地类型" border="bottom" <view class="address-display">
@click="show.farmType = true" /> <text :class="{'placeholder-text': !formData.baseTypeText}">
{{ formData.baseTypeText || '请选择基地类型' }}
</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="规模" prop="scale" required> <u-form-item label="规模" prop="scale" required>
...@@ -24,9 +27,12 @@ ...@@ -24,9 +27,12 @@
<!-- 地址信息 --> <!-- 地址信息 -->
<view class="section-title">地址信息</view> <view class="section-title">地址信息</view>
<u-form-item label="省市区" prop="province" required> <u-form-item label="省市区" prop="province" required class="clickable" @click="show.address = true">
<u-input v-model="formData.province" placeholder="请选择省市区" border="bottom" <view class="address-display">
@click="show.address = true" /> <text :class="{'placeholder-text': !formData.province}">
{{ formData.province || '请选择省市区' }}
</text>
</view>
</u-form-item> </u-form-item>
<u-form-item label="详细地址" prop="detailedAddress" required> <u-form-item label="详细地址" prop="detailedAddress" required>
...@@ -464,10 +470,18 @@ onLoad((pageOptions) => { ...@@ -464,10 +470,18 @@ onLoad((pageOptions) => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 20rpx 0; padding: 12rpx 18rpx;
background-color: transparent; background-color: transparent;
border-bottom: 2rpx solid #e4e7ed; border-bottom: 2rpx solid #e4e7ed;
border-radius: 0; border-radius: 0;
cursor: pointer;
width: 100%;
text {
flex: 1;
font-size: 28rpx;
color: #333;
}
.placeholder-text { .placeholder-text {
color: #c0c4cc; color: #c0c4cc;
...@@ -572,4 +586,24 @@ onLoad((pageOptions) => { ...@@ -572,4 +586,24 @@ onLoad((pageOptions) => {
} }
} }
} }
// 表单项点击区域样式
::v-deep .u-form-item {
&.clickable {
cursor: pointer;
.u-form-item__body__right {
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: -20rpx;
right: -20rpx;
bottom: 0;
}
}
}
}
</style> </style>
<script setup lang="ts"> <script setup lang="ts">
import { reactive } from 'vue' import { reactive } from 'vue'
import { onPullDownRefresh, onHide, onUnload } from '@dcloudio/uni-app' import { onPullDownRefresh } from '@dcloudio/uni-app'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { closeSplashscreenAndChechUpgrade } from '@/utils/upgrade' import { closeSplashscreenAndChechUpgrade } from '@/utils/upgrade'
import * as WeatherAPI from '@/api/model/weather' import * as WeatherAPI from '@/api/model/weather'
......
...@@ -8,7 +8,11 @@ import SaveDialog from '../device/components/save-dialog.vue' ...@@ -8,7 +8,11 @@ import SaveDialog from '../device/components/save-dialog.vue'
onPullDownRefresh(() => { onPullDownRefresh(() => {
setTimeout(function () { setTimeout(function () {
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
Message.toast('刷新成功') uni.showToast({
title: '刷新成功',
icon: 'success',
duration: 1500
})
}, 1000) }, 1000)
}) })
...@@ -244,9 +248,9 @@ function onResourceClick(resource: any) { ...@@ -244,9 +248,9 @@ function onResourceClick(resource: any) {
} }
// 资源下载点击事件 // 资源下载点击事件
function onDownloadClick(resource: any) { function onDownloadClick(e, resource: any) {
// 阻止事件冒泡 // 阻止事件冒泡
event?.stopPropagation() e?.stopPropagation()
// 显示加载提示 // 显示加载提示
uni.showLoading({ uni.showLoading({
...@@ -281,7 +285,11 @@ function downloadFileForWeb(resource: any) { ...@@ -281,7 +285,11 @@ function downloadFileForWeb(resource: any) {
// 清理 // 清理
document.body.removeChild(link) document.body.removeChild(link)
uni.hideLoading() uni.hideLoading()
Message.toast('开始下载') uni.showToast({
title: '开始下载',
icon: 'success',
duration: 1500
})
} }
// 原生平台下载文件函数 // 原生平台下载文件函数
...@@ -294,7 +302,11 @@ function downloadFileForNative(resource: any) { ...@@ -294,7 +302,11 @@ function downloadFileForNative(resource: any) {
tempFilePath: res.tempFilePath, tempFilePath: res.tempFilePath,
success: (saveRes) => { success: (saveRes) => {
uni.hideLoading() uni.hideLoading()
Message.toast('下载成功') uni.showToast({
title: '下载成功',
icon: 'success',
duration: 1500
})
// 提示用户文件已保存 // 提示用户文件已保存
uni.showModal({ uni.showModal({
...@@ -307,7 +319,11 @@ function downloadFileForNative(resource: any) { ...@@ -307,7 +319,11 @@ function downloadFileForNative(resource: any) {
fileType: resource.fileType?.toString() || '', fileType: resource.fileType?.toString() || '',
showMenu: true, showMenu: true,
fail: () => { fail: () => {
Message.toast('无法打开文件') uni.showToast({
title: '无法打开文件',
icon: 'error',
duration: 1500
})
}, },
}) })
} }
...@@ -317,18 +333,30 @@ function downloadFileForNative(resource: any) { ...@@ -317,18 +333,30 @@ function downloadFileForNative(resource: any) {
fail: (err) => { fail: (err) => {
uni.hideLoading() uni.hideLoading()
console.error('保存文件失败:', err) console.error('保存文件失败:', err)
Message.toast('保存文件失败') uni.showToast({
title: '保存文件失败',
icon: 'error',
duration: 1500
})
}, },
}) })
} else { } else {
uni.hideLoading() uni.hideLoading()
Message.toast(`下载失败,状态码: ${res.statusCode}`) uni.showToast({
title: `下载失败,状态码: ${res.statusCode}`,
icon: 'error',
duration: 1500
})
} }
}, },
fail: (err) => { fail: (err) => {
uni.hideLoading() uni.hideLoading()
console.error('下载失败:', err) console.error('下载失败:', err)
Message.toast('网络错误,下载失败') uni.showToast({
title: '网络错误,下载失败',
icon: 'error',
duration: 1500
})
}, },
}) })
} }
...@@ -478,7 +506,7 @@ function onHelpClick(help: any) { ...@@ -478,7 +506,7 @@ function onHelpClick(help: any) {
</view> </view>
</view> </view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4" <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
@click.stop="onDownloadClick(resource)"> @click.stop="(e) => onDownloadClick(e, resource)">
<text class="font_10">下载</text> <text class="font_10">下载</text>
</view> </view>
</view> </view>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论