You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

466 lines
12 KiB

3 years ago
<template>
<!--pages/user/editNeeds/index.wxml-->
<view class="edit-needs-box">
<view class="form-box">
<form @submit="submit">
<view class="form-item chose-box acea-row row-between">
3 years ago
<view class="label">我是{{title}}</view>
<view> {{title}} </view>
3 years ago
</view>
<view class="form-item">
3 years ago
<view class="label">{{title}}标题<text class="red">*</text></view>
3 years ago
<view class="inp-box">
3 years ago
<input type="text" :placeholder="'我' + (title) + '...'" :value="form.title" name="title">
3 years ago
</view>
</view>
<view class="form-item">
3 years ago
<view class="label">{{title}}类型<text class="red">*</text></view>
3 years ago
<!-- <view class="inp-box"><input type="text" placeholder="我供应/需求..." value="{{form.resourceCagetoryId}}" name="resourceCagetoryId" /></view> -->
<view class="inp-box acea-row-nowrap row-between row-middle">
<picker class="pick-box" @change="resourcesChange" :value="idx" :range="resourcesList" :range-key="'cagetoryName'" mode="selector">
<view class="picker">{{resourcesList[resourcesIdx].cagetoryName || '请选择'}}</view>
</picker>
<image src="/static/images/home/arrow-r.png" class="arrow-d"></image>
</view>
</view>
<view class="form-item">
<view class="label acea-row row-between">
3 years ago
<view>{{title}}内容<text class="red">*</text></view>
3 years ago
<!-- <view class="colO">看看别人怎么写></view> -->
</view>
<view class="area-box">
3 years ago
<textarea :placeholder="'请详细描述您的' + (title)" :value="form.detailedDescription" name="detailedDescription"></textarea>
3 years ago
</view>
</view>
<view class="form-item">
3 years ago
<view class="label">补充内容/添加图片<text style="font-size: 20rpx; color: #666;">(建议图片尺寸200X116)</text></view>
3 years ago
<view class="upload-box acea-row">
<image v-for="(item, index) in form.resourceImgs" :key="index" :src="item" mode="aspectFill"></image>
<image src="/static/images/upload.png" @tap="upImgs"></image>
</view>
</view>
<view class="form-item">
<view class="label acea-row row-between">
3 years ago
<view>{{title}}预算<text class="red">*</text></view>
3 years ago
<view class="tab-box acea-row ">
<view :class="'tab-item ' + (active == 1 ? 'tab-a' : '')" data-i="1" @tap="tabClick">明确预算</view>
<view :class="'tab-item ' + (active == 2 ? 'tab-a' : '')" data-i="2" @tap="tabClick">价格可议</view>
</view>
</view>
<view class="inp-box acea-row-nowrap" v-if="active == 1">
<input type="text" placeholder="请输入预算" :value="form.capital" @input="capitalChange" name="capital">
<text></text>
</view>
</view>
<view class="form-item">
<view class="label acea-row row-between">
<view>展示时间</view>
</view>
<view class="time-box acea-row row-middle">
<view class="timepick-box">
<picker @change="startTimeChange" :value="form.resourceStartTime" name="resourceStartTime" mode="date">
<view class="picker">{{form.resourceStartTime || '请选择'}}</view>
</picker>
<image src="/static/images/home/arrow-r.png" class="arrow-d"></image>
</view>
<text class="m14"></text>
<view class="timepick-box">
<picker @change="endTimeChange" :value="form.resourceEndTime" name="resourceEndTime" mode="date">
<view class="picker">{{form.resourceEndTime || '请选择'}}</view>
</picker>
<image src="/static/images/home/arrow-r.png" class="arrow-d"></image>
</view>
</view>
</view>
<view class="btn-box acea-row row-center">
<button class="submit-btn default-btn" form-type="submit" data-type="0">保存到草稿箱</button>
<button class="submit-btn" form-type="submit" data-type="1">保存并提交</button>
</view>
3 years ago
</form>
</view>
</view>
</template>
<script>
// pages/user/editNeeds/index.js
const util = require("../../../utils/util.js");
const app = getApp();
import WxValidate from '../../../utils/WxValidate.js';
export default {
data() {
return {
3 years ago
title: '',
3 years ago
form: {
resourceType: 0,
title: '',
detailedDescription: '',
resourceImgs: [],
capital: '',
resourceStartTime: '',
resourceEndTime: ''
},
id: '',
active: 1,
resourcesList: [],
resourcesIdx: null
};
},
components: {},
props: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if (options.id) {
this.setData({
id: options.id
});
this.getDetail(options.id);
}
if (options.type) {
this.form.resourceType = Number(options.type);
3 years ago
console.log(this.form.resourceType)
this.title = this.form.resourceType == 1? '供应' : '需求'
uni.setNavigationBarTitle({ title: this.title+ '发布' })
3 years ago
}
this.initValidate(); //验证规则函数
this.getResourcesCagetory();
},
methods: {
tabClick(e) {
let i = e.currentTarget.dataset.i;
if (i == 2) {
this.form.capital = '价格可议';
}
this.setData({
active: e.currentTarget.dataset.i
});
},
capitalChange(e) {
this.form.capital = e.detail.value;
},
startTimeChange(e) {
console.log(e.detail.value);
let timeArr = e.detail.value.split('-');
let year = Number(timeArr[0]) + 1;
this.form.resourceEndTime = year + '-' + timeArr[1] + '-' + timeArr[2];
this.form.resourceStartTime = e.detail.value;
},
endTimeChange(e) {
this.form.resourceEndTime = e.detail.value;
},
bindPickerChange(e) {
this.form.resourceType = this.typeArr[e.detail.value];
},
//获取供应、需求类型
getResourcesCagetory() {
app.http('GET', 'ResourcesCagetory/listResourcesCagetory').then(res => {
// console.log(res)
if (res.data.success) {
this.setData({
resourcesList: res.data.data
});
}
});
},
resourcesChange(e) {
// console.log(e)
let idx = Number(e.detail.value);
this.resourcesIdx = idx;
//try fix
this.form.resourceCagetoryId = this.resourcesList[idx].id;
},
// 重新发布,获取提交数据
getDetail(id) {
app.http('GET', 'Resources/resourceInfo', {
id: id
}).then(res => {
if (res.data.success) {
let data = res.data.data;
this.form.resourceEndTime = data.resourceEndTime;
this.form.resourceStartTime = data.resourceStartTime;
this.form.capital = data.capital;
this.form.resourceImgs = data.resourceImgs;
this.form.detailedDescription = data.detailedDescription;
this.form.title = data.title;
this.form.resourceType = data.resourceType;
if (isNaN(Number(data.capital))) {
this.setData({
active: 2
});
}
}
});
},
initValidate() {
const rules = {
title: {
required: true
},
resourceCagetoryId: {
required: true
},
detailedDescription: {
required: true
},
resourceStartTime: {
required: true
},
resourceEndTime: {
required: true
}
};
const messages = {
title: {
required: '请填写标题'
},
resourceCagetoryId: {
required: '请选择需求类型'
},
detailedDescription: {
required: '请填写内容'
},
resourceEndTime: {
required: '请设置展示开始时间'
},
resourceEndTime: {
required: '请设置展示结束时间'
}
};
this.WxValidate = new WxValidate(rules, messages);
},
upImgs() {
util.chooseImages2(img => {
let imgs = this.form.resourceImgs;
imgs.push(img);
this.form.resourceImgs = imgs;
});
},
submit(e) {
let that = this;
let type = e.detail.target.dataset.type;
let params = e.detail.value;
if (this.id != '') {
params.id = this.id;
}
params.resourceType = that.form.resourceType;
params.resourceCagetoryId = that.form.resourceCagetoryId;
params.resourceImgs = that.form.resourceImgs;
params.capital = that.form.capital;
if (type == 0) {
params.isDraft = true;
uni.showModal({
title: '提示!',
content: '是否保存到草稿箱?',
success(res) {
if (res.confirm) {
if (!that.WxValidate.checkForm(params)) {
const error = that.WxValidate.errorList[0];
that.showModal(error);
return false;
}
that.submitHttp(params);
} else {
console.log('已取消');
}
}
});
} else {
uni.showModal({
title: '提示!',
content: '是否确认提交?',
success(res) {
if (res.confirm) {
params.isDraft = false;
if (!that.WxValidate.checkForm(params)) {
const error = that.WxValidate.errorList[0];
that.showModal(error);
return false;
}
that.submitHttp(params);
} else {
console.log('已取消');
}
}
});
}
},
submitHttp(params) {
app.http('post', 'Resources/create', params).then(res => {
if (res.data.success) {
uni.showToast({
title: '提交成功',
duration: 2000
});
setTimeout(() => {
uni.navigateBack({
delta: 1
});
}, 2000);
} else {
uni.showToast({
title: '请求失败',
duration: 2000,
icon: 'none'
});
}
});
},
showModal(error) {
uni.showModal({
content: error.msg,
showCancel: false
});
}
}
};
</script>
<style>
/* pages/user/editNeeds/index.wxss */
.edit-needs-box{
background: #fff;
}
3 years ago
.form-box{
width: 100%;
padding: 32rpx 38rpx;
font-size: 28rpx;
color:#666666;
}
.form-item{
margin-bottom: 20rpx;
3 years ago
}
.red{
color: #FF0000;
}
.colO{
color: #000;
3 years ago
font-size: 24rpx;
}
.inp-box{
width: 100%;
padding: 10rpx 22rpx;
background: #eee;
color: #666;
margin-top: 26rpx;
3 years ago
}
.pick-box{
width: 92%;
background: #eee;
box-sizing: border-box;
/* padding: 10rpx 22rpx; */
}
.pick-box .picker{
width: 100%;
color: #666666;
}
.inp-box input{
width: 90%;
height: 100%;
}
.area-box{
width: 100%;
height: 290rpx;
padding: 24rpx 22rpx;
background: #eee;
color: #666;
margin-top: 36rpx;
}
.area-box textarea{
width: 100%;
height: 100%;
}
.upload-box{
width: 100%;
3 years ago
/* height: 140rpx; */
3 years ago
margin-top: 26rpx;
}
.upload-box image{
3 years ago
width: 216rpx;
height: 216rpx;
margin-right: 22rpx;
3 years ago
}
.tab-item{
width: 122rpx;
height: 40rpx;
text-align: center;
line-height: 40rpx;
border: 1px solid #707070;
border-radius: 8rpx;
color: #666;
font-size: 22rpx;
margin-left: 20rpx;
}
.tab-a{
background: #232323;
3 years ago
color: #fff;
border: none;
}
.time-box{
margin-top: 24rpx;
}
.timepick-box{
width: 308rpx;
height: 60rpx;
background: #eee;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
}
.timepick-box picker{
width: 100%;
}
.arrow-d{
width: 14rpx;
height: 24rpx;
transform: rotate(90deg);
}
.m14{
margin: 0 14rpx;
}
.submit-btn{
width: 240rpx !important;
3 years ago
height: 76rpx !important;
background: #232323;
3 years ago
border-radius: 38rpx;
color: #fff;
font-size: 28rpx !important;
line-height: 76rpx !important;
text-align: center;
margin:40rpx auto 20rpx !important;
padding: 0 !important;
}
.default-btn{
background: #BFBFBF;
}
3 years ago
</style>