Skip to content

C
confucius
Commit c65e3b48 authored by 罗超's avatar 罗超
Browse files
Options

1

parent f8d4a93b
Show whitespace changes
Inline Side-by-side
Showing with 330 additions and 327 deletions
src/components/activity/activeDetail-item.vue
View file @ c65e3b48
...@@ -6,14 +6,8 @@ ...@@ -6,14 +6,8 @@
<i class="iconfont icon-xiala1 icon" v-if="!isDropdown" @click="taggleDown"></i> <i class="iconfont icon-xiala1 icon" v-if="!isDropdown" @click="taggleDown"></i>
</div> </div>
<div class="title"> <div class="title">
<q-input <q-input ref="Title" filled stack-label v-model="itemMsg.Title" label="活动大标题"
ref="Title" :rules="[val => !!val || '请填写活动大标题']" />
filled
stack-label
v-model="itemMsg.Title"
label="活动大标题"
:rules="[val => !!val || '请填写活动大标题']"
/>
</div> </div>
</div> </div>
<div class="down" v-if="isDropdown"> <div class="down" v-if="isDropdown">
...@@ -39,26 +33,12 @@ ...@@ -39,26 +33,12 @@
</q-input> </q-input>
</div> </div>
<div class="starttime"> <div class="starttime">
<q-input <q-input ref="Duration" filled stack-label v-model.number="item.ActivityDuration" type="number"
ref="Duration" label="持续时长" suffix="分钟" :rules="[val => !!val || '请填写活动持续时长']" />
filled
stack-label
v-model.number="item.ActivityDuration"
type="number"
label="持续时长"
suffix="分钟"
:rules="[val => !!val || '请填写活动持续时长']"
/>
</div> </div>
<div style="flex-grow:2"> <div style="flex-grow:2">
<q-input <q-input ref="TripTitle" filled stack-label v-model="item.TripTitle" label="活动名称"
ref="TripTitle" :rules="[val => !!val || '请填写活动名称']" />
filled
stack-label
v-model="item.TripTitle"
label="活动名称"
:rules="[val => !!val || '请填写活动名称']"
/>
</div> </div>
</div> </div>
<el-tooltip class="item" effect="dark" content="删除当前活动" placement="top" v-if="index>0"> <el-tooltip class="item" effect="dark" content="删除当前活动" placement="top" v-if="index>0">
...@@ -69,24 +49,18 @@ ...@@ -69,24 +49,18 @@
<div class="item-name"> <div class="item-name">
活动内容 活动内容
<div class="location" @click="getMapShow"> <div class="location" @click="getMapShow">
<i class="iconfont icon-customer-visited" ></i> <i class="iconfont icon-customer-visited"></i>
<span v-if="item.LocationName">{{item.LocationName}}</span> <span v-if="item.LocationName">{{item.LocationName}}</span>
<span v-else>可设置活动定位</span> <span v-else>可设置活动定位</span>
</div> </div>
</div> </div>
<!-- 地图选址 --> <!-- 地图选址 -->
<el-dialog title="地图展示" :visible.sync="isShowMap" width="960px" > <el-dialog title="地图展示" :visible.sync="isShowMap" width="960px">
<Map @map-submit="mapEvent($event,index)" :address="item.LocationName"></Map> <Map @map-submit="mapEvent($event,index)" :address="item.LocationName"></Map>
</el-dialog> </el-dialog>
<div class="active-con"> <div class="active-con">
<q-input <q-input v-model="item.TripContent" filled type="textarea" placeholder="输入活动内容..." ref="TripContent"
v-model="item.TripContent" :rules="[val => !!val || '请填写活动名称']" />
filled
type="textarea"
placeholder="输入活动内容..."
ref="TripContent"
:rules="[val => !!val || '请填写活动名称']"
/>
</div> </div>
<div class="item-name"> <div class="item-name">
活动图片 活动图片
...@@ -96,15 +70,12 @@ ...@@ -96,15 +70,12 @@
<div v-if="item.TripPicList&&item.TripPicList.length>0" v-for="(_item,_index) in item.TripPicList"> <div v-if="item.TripPicList&&item.TripPicList.length>0" v-for="(_item,_index) in item.TripPicList">
<div class="ItemImgDiv"> <div class="ItemImgDiv">
<q-img :src="_item" spinner-color="white" style="height: 100%;height:100%" /> <q-img :src="_item" spinner-color="white" style="height: 100%;height:100%" />
<q-btn size="7px" @click="deleteItemImg(_index)" style="position:absolute;right:-5px;top:-5px;" round color="red" icon="iconfont icon-guanbi1" /> <q-btn size="7px" @click="deleteItemImg(_index)" style="position:absolute;right:-5px;top:-5px;" round
color="red" icon="iconfont icon-guanbi1" />
</div> </div>
</div> </div>
<el-upload <el-upload class="avatar-uploader addDutyMain" action="" :http-request="(files)=>{uploadFile(files,index)}"
class="avatar-uploader addDutyMain" :show-file-list="false">
action=""
:http-request="(files)=>{uploadFile(files,index)}"
:show-file-list="false"
>
<i class="el-icon-plus avatar-uploader-icon"></i> <i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> </el-upload>
</div> </div>
...@@ -119,46 +90,39 @@ ...@@ -119,46 +90,39 @@
</div> </div>
</template> </template>
<script> <script>
import Map from "./commonMap"; import Map from "./commonMap";
import { import {
UploadSelfFile, UploadSelfFile,
} from '../../api/common/common' } from '../../api/common/common'
export default { export default {
components:{ components: {
Map Map
}, },
props:{ props: {
itemData:{ itemData: {
type:Object type: Object,
default: null
}, },
index:{ index: {
type:Number, type: Number,
default:1 default: 1
} }
}, },
watch:{ watch: {
itemMsg:{ itemData: {
handler(val){ handler(val) {
// this.$refs.Title.validate(); if (val) {
// console.log(143, this.$refs) this.itemMsg = val
// this.$refs.StartTime.map(item=>{ console.log(116, val)
// item.validate() }
// console.log(item.validate) },
// }) deep: true
// this.$refs.StartTime.validate(); },
// this.$refs.Duration.validate(); itemMsg: {
// this.$refs.TripTitle.validate(); handler(val) {
// this.$refs.TripContent.validate(); this.$emit("success", val)
// if (!this.$refs.Title.hasError &&
// !this.$refs.StartTime.hasError &&
// !this.$refs.Duration.hasError &&
// !this.$refs.TripTitle.hasError &&
// !this.$refs.TripContent.hasError) {
this.$emit("success",val)
// }
}, },
deep:true deep: true
}, },
}, },
...@@ -166,38 +130,39 @@ import { ...@@ -166,38 +130,39 @@ import {
data() { data() {
return { return {
isShowMap: false, //是否显示地图弹窗 isShowMap: false, //是否显示地图弹窗
isDropdown: true,//显示下拉 isDropdown: true, //显示下拉
itemMsg:{ itemMsg: {
Title:"",//活动大标题 Title: "", //活动大标题
TripSort:0,//活动排序 TripSort: 0, //活动排序
ActivityPlanList:[//活动安排 ActivityPlanList: [ //活动安排
{ {
TripSort:0,//排序 TripSort: 0, //排序
StartTime:"",//开始时间 StartTime: "", //开始时间
ActivityDuration:"",//活动时长（单位：分钟） ActivityDuration: "", //活动时长（单位：分钟）
LonLat:"",//活动地址经纬度 LonLat: "", //活动地址经纬度
LocationName:"",//活动地址 LocationName: "", //活动地址
TripTitle:"",//安排标题 TripTitle: "", //安排标题
TripContent:"",//内容 TripContent: "", //内容
TripPicList:[]//图片 TripPicList: [] //图片
} }
] ]
}, },
} }
}, },
mounted() { mounted() {
this.itemMsg=this.itemData if (this.itemData) {
this.itemMsg = this.itemData
}
}, },
methods: { methods: {
goBack(){ goBack() {
this.$router.go(-1) this.$router.go(-1)
}, },
taggleDown(){ taggleDown() {
this.isDropdown=!this.isDropdown this.isDropdown = !this.isDropdown
}, },
uploadFile(files,index) { uploadFile(files, index) {
UploadSelfFile('activeImg', files.file, res => { UploadSelfFile('activeImg', files.file, res => {
if (res.Code == 1) { if (res.Code == 1) {
this.itemMsg.ActivityPlanList[index].TripPicList.push(res.FileUrl); this.itemMsg.ActivityPlanList[index].TripPicList.push(res.FileUrl);
...@@ -205,64 +170,85 @@ import { ...@@ -205,64 +170,85 @@ import {
}) })
}, },
//删除图片 //删除图片
deleteItemImg(index,_index){ deleteItemImg(index, _index) {
this.itemMsg.ActivityPlanList[index].TripPicList.splice(_index,1); this.itemMsg.ActivityPlanList[index].TripPicList.splice(_index, 1);
}, },
//添加当日活动 //添加当日活动
addCurActuve(){ addCurActuve() {
this.itemMsg.ActivityPlanList.push({ this.itemMsg.ActivityPlanList.push({
TripSort:this.itemMsg.ActivityPlanList.length,//排序 TripSort: this.itemMsg.ActivityPlanList.length, //排序
StartTime:"",//开始时间 StartTime: "", //开始时间
ActivityDuration:"",//活动时长（单位：分钟） ActivityDuration: "", //活动时长（单位：分钟）
LonLat:"",//活动地址经纬度 LonLat: "", //活动地址经纬度
LocationName:"",//活动地址 LocationName: "", //活动地址
TripTitle:"",//安排标题 TripTitle: "", //安排标题
TripContent:"",//内容 TripContent: "", //内容
TripPicList:[]//图片 TripPicList: [] //图片
}) })
}, },
delCurActuve(index){ delCurActuve(index) {
this.itemMsg.ActivityPlanList.splice(index,1) this.itemMsg.ActivityPlanList.splice(index, 1)
}, },
//得到地图信息 //得到地图信息
mapEvent(e,index) { mapEvent(e, index) {
this.itemMsg.ActivityPlanList[index].LonLat= e.lat + "," + e.long; this.itemMsg.ActivityPlanList[index].LonLat = e.lat + "," + e.long;
this.itemMsg.ActivityPlanList[index].LocationName= e.address; this.itemMsg.ActivityPlanList[index].LocationName = e.address;
this.isShowMap = false; this.isShowMap = false;
}, },
getMapShow() { getMapShow() {
this.isShowMap = true; this.isShowMap = true;
}, },
ruleVerification(){ // 验证
ruleVerification() {
let hasErr = []
this.$refs.Title.validate(); this.$refs.Title.validate();
this.$refs.StartTime.map(item=>{ if(this.$refs.Title.hasError){
hasErr.push(this.$refs.Title.hasError)
}
this.$refs.StartTime.map(item => {
item.validate() item.validate()
if(item.hasError){
hasErr.push(item.hasError)
}
}) })
this.$refs.Duration.map(item=>{ this.$refs.Duration.map(item => {
item.validate() item.validate()
if(item.hasError){
hasErr.push(item.hasError)
}
}) })
this.$refs.TripTitle.map(item=>{ this.$refs.TripTitle.map(item => {
item.validate() item.validate()
if(item.hasError){
hasErr.push(item.hasError)
}
}) })
this.$refs.TripContent.map(item=>{ this.$refs.TripContent.map(item => {
item.validate() item.validate()
if(item.hasError){
hasErr.push(item.hasError)
}
}) })
if(hasErr.length>0){
return false
} else{
return true
}
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.activeDetail-item {
.activeDetail-item{ .up {
.up{
width: 700px; width: 700px;
// height: 55px; // height: 55px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
.date{ .date {
font-size: 16px; font-size: 16px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
...@@ -272,7 +258,8 @@ import { ...@@ -272,7 +258,8 @@ import {
align-items: center; align-items: center;
margin-right: 20px; margin-right: 20px;
} }
.icon{
.icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
font-size: 12px; font-size: 12px;
...@@ -285,32 +272,38 @@ import { ...@@ -285,32 +272,38 @@ import {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.title{
.title {
flex-grow: 2; flex-grow: 2;
} }
} }
.down{
.down {
width: 640px; width: 640px;
margin-left: 61px; margin-left: 61px;
// height: 100px; // height: 100px;
border-left: 1px dashed #DCDCDC; border-left: 1px dashed #DCDCDC;
.down-item{
.item1{ .down-item {
.item1 {
height: 55px; height: 55px;
display: flex; display: flex;
align-items: center; align-items: center;
.circle{
.circle {
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: #2961FE; background-color: #2961FE;
border-radius: 50%; border-radius: 50%;
} }
.line{
.line {
width: 20px; width: 20px;
height: 2px; height: 2px;
background-color: #2961FE; background-color: #2961FE;
} }
.con{
.con {
height: 100%; height: 100%;
background-color: #F2F2F2; background-color: #F2F2F2;
border-radius: 4px; border-radius: 4px;
...@@ -318,13 +311,15 @@ import { ...@@ -318,13 +311,15 @@ import {
// padding: 10px 0; // padding: 10px 0;
display: flex; display: flex;
.starttime{
.starttime {
width: 140px; width: 140px;
margin-right: 10px; margin-right: 10px;
} }
} }
} }
.item-name{
.item-name {
height: 55px; height: 55px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -332,42 +327,48 @@ import { ...@@ -332,42 +327,48 @@ import {
font-family: PingFang SC; font-family: PingFang SC;
color: #2D2D2D; color: #2D2D2D;
padding-left: 28px; padding-left: 28px;
.location{
.location {
margin-left: 15px; margin-left: 15px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #2961FE; color: #2961FE;
} }
} }
.active-con{
.active-con {
padding-left: 28px; padding-left: 28px;
} }
} }
} }
} }
.avatar-uploader .el-upload { .avatar-uploader .el-upload {
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
width:100%; width: 100%;
height:100%; height: 100%;
color:#8c939d; color: #8c939d;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.addDutyMain{
display:inline-block; .addDutyMain {
width:118px; display: inline-block;
height:118px; width: 118px;
font-size:70px; height: 118px;
font-size: 70px;
border: 1px dashed #d9d9d9; border: 1px dashed #d9d9d9;
line-height:120px; line-height: 120px;
text-align: center; text-align: center;
} }
.ItemImgDiv{
width:118px; .ItemImgDiv {
height:118px; width: 118px;
height: 118px;
position: relative; position: relative;
margin:0 10px 10px 0; margin: 0 10px 10px 0;
display:inline-block; display: inline-block;
} }
</style> </style>
src/pages/activity/activeDetail.vue
View file @ c65e3b48
...@@ -85,6 +85,7 @@ import DetailItem from "../../components/activity/activeDetail-item" ...@@ -85,6 +85,7 @@ import DetailItem from "../../components/activity/activeDetail-item"
mounted(){ mounted(){
if(this.$route.query.Id){ if(this.$route.query.Id){
this.msg.Id=this.$route.query.Id this.msg.Id=this.$route.query.Id
this.getDetail()
} }
}, },
methods: { methods: {
...@@ -116,37 +117,38 @@ import DetailItem from "../../components/activity/activeDetail-item" ...@@ -116,37 +117,38 @@ import DetailItem from "../../components/activity/activeDetail-item"
this.ActivityTitle.splice(index,1) this.ActivityTitle.splice(index,1)
}, },
getItemData(val,index){ getItemData(val,index){
console.log('119', val,index)
this.msg.ActivityTitle[index]=val this.msg.ActivityTitle[index]=val
}, },
//保存信息 //保存信息
save() { save() {
// this.$refs.child[0].ruleVerification();
this.msg.ActivityTitle=this.ActivityTitle this.msg.ActivityTitle=this.ActivityTitle
this.$refs.child.forEach(x=>{ this.$refs.child.map(x=>{
x.ruleVerification(); x.ruleVerification();
}) })
// this.$refs.Name.validate(); let res= this.$refs.child.every(x=>{
// this.$refs.StartTime.validate(); return x.ruleVerification();
// this.$refs.EndTime.validate(); })
// this.$refs.SignStartTime.validate();
// this.$refs.SignEndTime.validate();
// if (!this.$refs.Name.hasError &&
// !this.$refs.StartTime.hasError &&
// !this.$refs.EndTime.hasError &&
// !this.$refs.SignStartTime.hasError &&
// !this.$refs.SignEndTime.hasError) {
// this.apipostDS("/api/Education/GetSetActivityPlan", this.msg, (res) => { console.log('res', res)
// console.log(136,res) if(res){
// if (res.data.resultCode === 1) { this.apipostDS("/api/Education/GetSetActivityPlan", this.msg, (res) => {
// this.Success(res.data.message); console.log(136,res)
// } else { if (res.data.resultCode === 1) {
// this.Error(res.data.message); this.Success(res.data.message);
// } } else {
// }) this.Error(res.data.message);
// } }
})
}
}, },
  getDetail(){
        this.apipostDS("/api/Education/GetActivity", {Id:this.msg.Id}, (res) => {
            if (res.data.resultCode === 1) {
              this.ActivityTitle=res.data.data.ActivityTitleList
              console.log(152,res.data.data.ActivityTitleList)
            } 
          })
      }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment