Skip to content

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

1

parent f8d4a93b
Hide whitespace changes
Inline Side-by-side
Showing with 330 additions and 327 deletions
src/components/activity/activeDetail-item.vue
View file @ c65e3b48
<template> <template>
<div class=" activeDetail-item"> <div class=" activeDetail-item">
<div class="up"> <div class="up">
<div class="date">第{{index}}天 <div class="date">第{{index}}天
<i class="iconfont icon-xiala icon" v-if="isDropdown" @click="taggleDown"></i> <i class="iconfont icon-xiala icon" v-if="isDropdown" @click="taggleDown"></i>
<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 class="title">
<q-input ref="Title" filled stack-label v-model="itemMsg.Title" label="活动大标题"
:rules="[val => !!val || '请填写活动大标题']" />
</div>
</div>
<div class="down" v-if="isDropdown">
<div v-for="(item,index) in itemMsg.ActivityPlanList" :key="item.id" class="down-item q-mb-lg">
<div class="item1">
<div class="circle"></div>
<div class="line"></div>
<div class="con">
<div class="starttime">
<q-input filled v-model="item.StartTime" stack-label label="开始时间" ref="StartTime"
:rules="[val => !!val || '请选择开始时间']">
<template v-slot:append>
<q-icon name="access_time" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-time v-model="item.StartTime" format24h>
<div class="row items-center justify-end">
<q-btn v-close-popup label="关闭" color="primary" flat />
</div>
</q-time>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="starttime">
<q-input ref="Duration" filled stack-label v-model.number="item.ActivityDuration" type="number"
label="持续时长" suffix="分钟" :rules="[val => !!val || '请填写活动持续时长']" />
</div>
<div style="flex-grow:2">
<q-input ref="TripTitle" filled stack-label v-model="item.TripTitle" label="活动名称"
:rules="[val => !!val || '请填写活动名称']" />
</div>
</div> </div>
<div class="title"> <el-tooltip class="item" effect="dark" content="删除当前活动" placement="top" v-if="index>0">
<q-input <i class="iconfont icon-img_delete_small q-ml-sm" @click="delCurActuve(index)"></i>
ref="Title" </el-tooltip>
filled
stack-label </div>
v-model="itemMsg.Title" <div class="item-name">
label="活动大标题" 活动内容
:rules="[val => !!val || '请填写活动大标题']" <div class="location" @click="getMapShow">
/> <i class="iconfont icon-customer-visited"></i>
<span v-if="item.LocationName">{{item.LocationName}}</span>
<span v-else>可设置活动定位</span>
</div> </div>
</div> </div>
<div class="down" v-if="isDropdown"> <!-- 地图选址 -->
<div v-for="(item,index) in itemMsg.ActivityPlanList" :key="item.id" class="down-item q-mb-lg"> <el-dialog title="地图展示" :visible.sync="isShowMap" width="960px">
<div class="item1"> <Map @map-submit="mapEvent($event,index)" :address="item.LocationName"></Map>
<div class="circle"></div>
<div class="line"></div>
<div class="con">
<div class="starttime">
<q-input filled v-model="item.StartTime" stack-label label="开始时间" ref="StartTime"
:rules="[val => !!val || '请选择开始时间']">
<template v-slot:append>
<q-icon name="access_time" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-time v-model="item.StartTime" format24h>
<div class="row items-center justify-end">
<q-btn v-close-popup label="关闭" color="primary" flat />
</div>
</q-time>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="starttime">
<q-input
ref="Duration"
filled
stack-label
v-model.number="item.ActivityDuration"
type="number"
label="持续时长"
suffix="分钟"
:rules="[val => !!val || '请填写活动持续时长']"
/>
</div>
<div style="flex-grow:2">
<q-input
ref="TripTitle"
filled
stack-label
v-model="item.TripTitle"
label="活动名称"
:rules="[val => !!val || '请填写活动名称']"
/>
</div>
</div>
<el-tooltip class="item" effect="dark" content="删除当前活动" placement="top" v-if="index>0">
<i class="iconfont icon-img_delete_small q-ml-sm" @click="delCurActuve(index)"></i>
</el-tooltip>
</div>
<div class="item-name">
活动内容
<div class="location" @click="getMapShow">
<i class="iconfont icon-customer-visited" ></i>
<span v-if="item.LocationName">{{item.LocationName}}</span>
<span v-else>可设置活动定位</span>
</div>
</div>
<!-- 地图选址 -->
<el-dialog title="地图展示" :visible.sync="isShowMap" width="960px" >
<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 </div>
type="textarea" <div class="item-name">
placeholder="输入活动内容..." 活动图片
ref="TripContent" </div>
:rules="[val => !!val || '请填写活动名称']" <div class="active-con">
/> <div style="display:flex;flex-wrap: wrap;">
</div> <div v-if="item.TripPicList&&item.TripPicList.length>0" v-for="(_item,_index) in item.TripPicList">
<div class="item-name"> <div class="ItemImgDiv">
活动图片 <q-img :src="_item" spinner-color="white" style="height: 100%;height:100%" />
</div> <q-btn size="7px" @click="deleteItemImg(_index)" style="position:absolute;right:-5px;top:-5px;" round
<div class="active-con"> color="red" icon="iconfont icon-guanbi1" />
<div style="display:flex;flex-wrap: wrap;">
<div v-if="item.TripPicList&&item.TripPicList.length>0" v-for="(_item,_index) in item.TripPicList">
<div class="ItemImgDiv">
<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" />
</div>
</div>
<el-upload
class="avatar-uploader addDutyMain"
action=""
:http-request="(files)=>{uploadFile(files,index)}"
:show-file-list="false"
>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</div> </div>
</div>
<el-upload class="avatar-uploader addDutyMain" action="" :http-request="(files)=>{uploadFile(files,index)}"
:show-file-list="false">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div> </div>
<div class=" q-mt-lg q-mb-lg" style="margin-left:28px"> </div>
<q-btn color="accent" size="sm" class="" icon="add" label="添加当日活动" @click="addCurActuve" />
</div> </div>
<div class=" q-mt-lg q-mb-lg" style="margin-left:28px">
<q-btn color="accent" size="sm" class="" icon="add" label="添加当日活动" @click="addCurActuve" />
</div> </div>
</div>
</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: {
itemData: {
type: Object,
default: null
}, },
props:{ index: {
itemData:{ type: Number,
type:Object default: 1
}, }
index:{ },
type:Number, watch: {
default:1 itemData: {
handler(val) {
if (val) {
this.itemMsg = val
console.log(116, val)
} }
},
deep: true
}, },
watch:{ itemMsg: {
itemMsg:{ handler(val) {
handler(val){ this.$emit("success", val)
// this.$refs.Title.validate(); },
// console.log(143, this.$refs) deep: true
// this.$refs.StartTime.map(item=>{
// item.validate()
// console.log(item.validate)
// })
// this.$refs.StartTime.validate();
// this.$refs.Duration.validate();
// this.$refs.TripTitle.validate();
// this.$refs.TripContent.validate();
// 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
},
}, },
},
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);
} }
}) })
}, },
//删除图片 //删除图片
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(){ // 验证
this.$refs.Title.validate(); ruleVerification() {
this.$refs.StartTime.map(item=>{ let hasErr = []
item.validate() this.$refs.Title.validate();
}) if(this.$refs.Title.hasError){
this.$refs.Duration.map(item=>{ hasErr.push(this.$refs.Title.hasError)
item.validate() }
}) this.$refs.StartTime.map(item => {
this.$refs.TripTitle.map(item=>{ item.validate()
item.validate() if(item.hasError){
}) hasErr.push(item.hasError)
this.$refs.TripContent.map(item=>{ }
item.validate() })
}) this.$refs.Duration.map(item => {
item.validate()
if(item.hasError){
hasErr.push(item.hasError)
}
})
this.$refs.TripTitle.map(item => {
item.validate()
if(item.hasError){
hasErr.push(item.hasError)
}
})
this.$refs.TripContent.map(item => {
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 {
.up {
width: 700px;
// height: 55px;
display: flex;
align-items: center;
margin-bottom: 20px;
.date {
font-size: 16px;
font-family: PingFang SC;
font-weight: bold;
color: #2961FE;
padding-bottom: 20px;
display: flex;
align-items: center;
margin-right: 20px;
}
.icon {
width: 20px;
height: 20px;
font-size: 12px;
margin-left: 20px;
padding: 10px;
background-color: #C9DBFF;
border-radius: 4px;
color: #2961FE;
display: flex;
justify-content: center;
align-items: center;
}
.title {
flex-grow: 2;
}
}
.activeDetail-item{ .down {
.up{ width: 640px;
width: 700px; margin-left: 61px;
// height: 55px; // height: 100px;
border-left: 1px dashed #DCDCDC;
.down-item {
.item1 {
height: 55px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px;
.circle {
.date{ width: 8px;
font-size: 16px; height: 8px;
font-family: PingFang SC; background-color: #2961FE;
font-weight: bold; border-radius: 50%;
color: #2961FE;
padding-bottom: 20px;
display: flex;
align-items: center;
margin-right: 20px;
}
.icon{
width: 20px;
height: 20px;
font-size: 12px;
margin-left: 20px;
padding: 10px;
background-color: #C9DBFF;
border-radius: 4px;
color: #2961FE;
display: flex;
justify-content: center;
align-items: center;
} }
.title{
flex-grow: 2; .line {
width: 20px;
height: 2px;
background-color: #2961FE;
} }
}
.down{
width: 640px;
margin-left: 61px;
// height: 100px;
border-left: 1px dashed #DCDCDC;
.down-item{
.item1{
height: 55px;
display: flex;
align-items: center;
.circle{
width: 8px;
height: 8px;
background-color: #2961FE;
border-radius: 50%;
}
.line{
width: 20px;
height: 2px;
background-color: #2961FE;
}
.con{
height: 100%;
background-color: #F2F2F2;
border-radius: 4px;
flex-grow: 2;
// padding: 10px 0;
display: flex; .con {
.starttime{ height: 100%;
width: 140px; background-color: #F2F2F2;
margin-right: 10px; border-radius: 4px;
} flex-grow: 2;
} // padding: 10px 0;
}
.item-name{ display: flex;
height: 55px;
display: flex; .starttime {
align-items: center; width: 140px;
font-size: 14px; margin-right: 10px;
font-family: PingFang SC;
color: #2D2D2D;
padding-left: 28px;
.location{
margin-left: 15px;
font-size: 14px;
font-weight: 500;
color: #2961FE;
}
}
.active-con{
padding-left: 28px;
} }
} }
}
.item-name {
height: 55px;
display: flex;
align-items: center;
font-size: 14px;
font-family: PingFang SC;
color: #2D2D2D;
padding-left: 28px;
.location {
margin-left: 15px;
font-size: 14px;
font-weight: 500;
color: #2961FE;
}
}
.active-con {
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