<template>
|
<view class="evaluate pb100" :data-theme='theme()' :class="theme() || ''">
|
<form @submit="formSubmit" @reset="formReset">
|
<view class="evaluate-item p30">
|
|
<view class="form-item border-b">
|
<view class="field-name">标题*:</view>
|
<input class="flex-1" v-model="form.name" type="text" placeholder-class="grary" placeholder="请输入标题" />
|
</view>
|
<view class="form-item border-b">
|
<view class="field-name">分类*:</view>
|
<picker @change="onChange" :value='index' :range="list">
|
<view class="label-right">
|
{{list[index]}}
|
</view>
|
</picker>
|
</view>
|
|
<view class="form-item border-b">
|
<view class="field-name">价格(元)*:</view>
|
<input class="flex-1" v-model="form.price" type="text" placeholder-class="grary" placeholder="请输入您的价格" />
|
</view>
|
|
<view class="textarea-box d-s-c f28">
|
<textarea class="p10 box-s-b border flex-1" v-model="form.content" placeholder="请输入详细描述*" />
|
</view>
|
<view class="upload-list d-s-c" v-model="form.image_list">
|
<view class="item" v-for="(imgs, img_num) in form.image_list" :key="img_num" @click="deleteImg(img_num)">
|
<image :src="imgs.file_path" mode="aspectFit"></image>
|
</view>
|
<view class="item upload-btn d-c-c d-c" @click="openUpload()" v-if="form.image_list.length < 9" >
|
<text class="icon iconfont icon-xiangji"></text>
|
<text class="gray9">上传图片</text>
|
</view>
|
</view>
|
|
<view class="form-item border-b">
|
<view class="field-name">标签:</view>
|
<view>
|
<view v-if="tagList" class="tag-item" v-for="(item, index) in tagList" :key="index">
|
<label class="d-c-c" @tap.stop="checkItem(item, index)">
|
<checkbox color="red" value="cb" class="checkbox" :checked="item.checked" />
|
</label>
|
<view class="info">
|
<view class="title">{{ item.name }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="form-item border-b">
|
<view class="field-name">交付时间:</view>
|
<picker mode="date" @change="bindDateChange">
|
<view class="label-right">
|
{{form.finish_time}}
|
</view>
|
</picker>
|
</view>
|
<view class="form-item border-b">
|
<view class="field-name">服务地区:</view>
|
<input class="flex-1" v-model="form.detail" type="text" placeholder-class="grary" placeholder="请输入您的期望地点" />
|
</view>
|
|
<view class="textarea-box d-s-c f28">
|
<textarea class="p10 box-s-b border flex-1" v-model="form.product_content" placeholder="请输入产品介绍" />
|
</view>
|
|
<view class="textarea-box d-s-c f28 mt10">
|
<textarea class="p10 box-s-b border flex-1" v-model="form.product_case" placeholder="请输入产品应用案例" />
|
</view>
|
|
<view class="form-item border-b">
|
<view class="field-name">是否展示:</view>
|
<radio-group class="d-s-c" @change="changeShow($event,index)">
|
<label class="d-s-c make-item mr10">
|
<view><radio style="transform:scale(0.7)" color="#EE1413" :checked="form.is_show == 1" value="1" /></view>
|
<view class="f26 color-57">是</view>
|
</label>
|
<label class="d-s-c make-item mr10">
|
<view><radio style="transform:scale(0.7)" color="#EE1413" :checked="form.is_show == 0" value="0" /></view>
|
<view class="f26 color-57">否</view>
|
</label>
|
</radio-group>
|
</view>
|
|
|
<!-- <view class="form-item border-b">
|
<text class="field-name">需求所在地:</text>
|
<input class="flex-1" name="location_address" type="text" placeholder-class="grary9" placeholder="请选择地址" v-model="short_address"
|
disabled @click="chooseLocation" />
|
</view> -->
|
|
</view>
|
<view v-if="!loadding" class="foot-btns" @click="submit">
|
<button class="btn-red" style="background: none; border: 0;">确认提交</button>
|
</view>
|
</form>
|
|
<!--上传图片-->
|
<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
|
|
|
|
</view>
|
</template>
|
|
<script>
|
import Upload from '@/components/upload/upload.vue';
|
|
export default {
|
components: {
|
Upload,
|
},
|
data() {
|
return {
|
/*是否加载完成*/
|
loadding: true,
|
/*页面数据*/
|
tableData: [],
|
form: {
|
project_id:'',
|
image_list:[],
|
tag_list:[],
|
content:'',
|
product_content:'',
|
product_case:'',
|
name:'',
|
category_id:'',
|
finish_time:'请选择日期',
|
price:'',
|
province_id: 0,
|
city_id: 0,
|
region_id: 0,
|
longitude:'',
|
latitude:'',
|
location_address:'',
|
detail:'',
|
is_show:1,
|
},
|
/*是否打开上传图片*/
|
isUpload: false,
|
categoryList:[],
|
tagList:[],
|
//所有分类
|
list:[],
|
//选中的分类
|
index:0,
|
location_address: '',
|
short_address:'',
|
Address:[],
|
};
|
},
|
onLoad(e){
|
this.form.project_id = e.project_id;
|
},
|
mounted() {
|
|
},
|
onShow(){
|
let self = this;
|
self.getData();
|
},
|
methods: {
|
/* 单选框 */
|
changeShow(e, index) {
|
let self = this;
|
self.form.is_show = e.detail.value;
|
},
|
/*单选*/
|
checkItem(e, index) {
|
e.checked = !e.checked;
|
this.$set(this.tagList, index, e);
|
},
|
//改变
|
onChange(e) {
|
let self = this;
|
let val = e.detail.value;
|
if(val == 0){
|
self.index = 0;
|
self.form.category_id = '';
|
return;
|
}
|
self.index = val;
|
let index = val - 1;
|
self.form.category_id = this.categoryList[index].category_id;
|
},
|
|
bindDateChange(e){
|
let self = this;
|
self.form.finish_time = e.detail.value;
|
},
|
/*获取数据*/
|
getData() {
|
let self = this;
|
uni.showLoading({
|
title: '加载中'
|
})
|
self._get('plus.release.supplyProject/detail', {
|
project_id: self.form.project_id,
|
}, function(res) {
|
uni.hideLoading();
|
self.loadding=false;
|
self.tagList = res.data.tag_list;
|
self.categoryList = res.data.category_list;
|
var detail = res.data.detail;
|
var list = [];
|
list.push("请选择分类");
|
self.categoryList.forEach((item,index) => {
|
list.push(item.name);
|
if(item.category_id == detail.category_id){
|
self.index= index + 1;
|
}
|
});
|
self.list = list;
|
self.form = detail;
|
if(detail.image_list && detail.image_list != 'undefined'){
|
self.form.image_list = detail.image_list;
|
}else{
|
self.form.image_list = [];
|
}
|
});
|
},
|
|
/*提交*/
|
submit() {
|
let self = this;
|
let formData=self.form;
|
//获取选中的标签
|
var tag_ids = [];
|
for (let j = 0; j < this.tagList.length; j++) {
|
if (this.tagList[j]['checked'] == true) {
|
tag_ids.push(this.tagList[j]['tag_id']);
|
}
|
}
|
formData.tag_list = tag_ids;
|
uni.showLoading({
|
title: '加载中'
|
});
|
self._post(
|
'plus.release.supplyProject/edit', {
|
pay_source: self.getPlatform(),
|
formData: JSON.stringify(formData),
|
},
|
function(res) {
|
uni.hideLoading();
|
self.showSuccess('提交成功！',function(){
|
self.gotoPage('/pages3/release/supplyproject/index', 'redirect');
|
});
|
}
|
);
|
},
|
chooseLocation(n) {
|
let self=this;
|
uni.authorize({
|
scope: 'scope.userLocation',
|
success: () => {
|
uni.chooseLocation({
|
success: function (res) {
|
console.log(res)
|
self.form.longitude=res.longitude;
|
self.form.latitude=res.latitude;
|
self.form.detail= res.address;
|
self.location_address=res.address;
|
// 获取省市区
|
setTimeout(function(){
|
self.setLocationAddress();
|
},500)
|
},fail: function (err) {
|
//console.log(err)
|
}
|
});
|
},
|
})
|
},
|
// 获取省市区 by yj
|
setLocationAddress() {
|
let self = this;
|
self._get('user.address/setLocationAddress', {
|
address: self.location_address
|
}, function(res) {
|
self.short_address = res.data.short_address;
|
self.form.province_id = res.data.cityCode[0];
|
self.form.city_id = res.data.cityCode[1];
|
self.form.region_id = res.data.cityCode[2];
|
});
|
},
|
|
/*打开上传图片*/
|
openUpload() {
|
this.isUpload = true;
|
},
|
|
/*获取上传的图片*/
|
getImgsFunc(e) {
|
let self = this;
|
if(e&&typeof(e)!='undefined'){
|
console.log(self.form.image_list)
|
console.log('----')
|
console.log(e)
|
self.form.image_list = self.form.image_list.concat(e);
|
}
|
self.isUpload = false;
|
},
|
|
/*点击图片删除*/
|
deleteImg(i,n){
|
this.loadding=true;
|
this.form.image_list.splice(n,1);
|
this.loadding=false;
|
},
|
|
}
|
};
|
</script>
|
|
<style>
|
.evaluate-item {
|
margin-bottom: 20rpx;
|
background: #ffffff;
|
}
|
.product .cover,
|
.product .cover image {
|
width: 160rpx;
|
height: 160rpx;
|
}
|
.evaluate .grade .item .iconfont {
|
width: 60rpx;
|
height: 60rpx;
|
line-height: 60rpx;
|
border-radius: 50%;
|
font-size: 40rpx;
|
color: #ffffff;
|
text-align: center;
|
}
|
.evaluate .grade .item {
|
height: 60rpx;
|
padding-right: 20rpx;
|
line-height: 60rpx;
|
border-radius: 30rpx;
|
transition: background-color 0.4s;
|
}
|
.grade .flex-1:nth-child(1) .iconfont {
|
background: #f42222;
|
}
|
.grade .flex-1:nth-child(2) .iconfont {
|
background: #f2b509;
|
}
|
.grade .flex-1:nth-child(3) .iconfont {
|
background: #999999;
|
}
|
.grade .flex-1.active:nth-child(1) .item {
|
background: #f42222;
|
color: #ffffff;
|
}
|
.grade .flex-1.active:nth-child(2) .item {
|
background: #f2b509;
|
color: #ffffff;
|
}
|
.grade .flex-1.active:nth-child(3) .item {
|
background: #999999;
|
color: #ffffff;
|
}
|
.icon-start{
|
color: #f5a623;
|
}
|
.evalu-value{
|
display: flex;
|
margin-bottom: 30rpx;
|
}
|
.eval{
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
}
|
.evalu{
|
display: flex;
|
align-items: baseline;
|
flex-direction: column;
|
}
|
.form-item {
|
padding: 20rpx 0;
|
margin-bottom: 20rpx;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
font-size: 28rpx;
|
}
|
|
.form-item .field-name {
|
width: 180rpx;
|
}
|
|
.form-item input {
|
font-size: 28rpx;
|
}
|
.form-item .tag-item {
|
display: flex;
|
align-items: center;
|
margin-right: 20rpx;
|
float: left;
|
margin-bottom:2px;
|
}
|
|
</style>
|
<style lang="scss">
|
.foot-btns {
|
position: fixed;
|
bottom: 20rpx;
|
left: 0rpx;
|
width: 90%;
|
height: 80rpx;
|
line-height: 80rpx;
|
border-radius: 80rpx;
|
/* background: #ff5704; */
|
@include background_color('background_color');
|
color: #fff;
|
font-size: 30rpx;
|
display: flex;
|
justify-content: center;
|
margin: 0 auto;
|
}
|
</style>
|
