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>
<div class=" activeDetail-item">
<div class="up">
<div class="date">第{{index}}天
<i class="iconfont icon-xiala icon" v-if="isDropdown" @click="taggleDown"></i>
<i class="iconfont icon-xiala1 icon" v-if="!isDropdown" @click="taggleDown"></i>
<div class="up">
<div class="date">第{{index}}天
<i class="iconfont icon-xiala 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 class="title">
<q-input
ref="Title"
filled
stack-label
v-model="itemMsg.Title"
label="活动大标题"
:rules="[val => !!val || '请填写活动大标题']"
/>
<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>
<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>
<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>
</div>
<!-- 地图选址 -->
<el-dialog title="地图展示" :visible.sync="isShowMap" width="960px">
<Map @map-submit="mapEvent($event,index)" :address="item.LocationName"></Map>
</el-dialog>
<div class="active-con">
<q-input
v-model="item.TripContent"
filled
type="textarea"
placeholder="输入活动内容..."
ref="TripContent"
:rules="[val => !!val || '请填写活动名称']"
/>
</div>
<div class="item-name">
活动图片
</div>
<div class="active-con">
<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 class="active-con">
<q-input v-model="item.TripContent" filled type="textarea" placeholder="输入活动内容..." ref="TripContent"
:rules="[val => !!val || '请填写活动名称']" />
</div>
<div class="item-name">
活动图片
</div>
<div class="active-con">
<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 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 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>
</template>
<script>
import Map from "./commonMap";
import {
import Map from "./commonMap";
import {
UploadSelfFile,
} from '../../api/common/common'
export default {
components:{
Map
components: {
Map
},
props: {
itemData: {
type: Object,
default: null
},
props:{
itemData:{
type:Object
},
index:{
type:Number,
default:1
index: {
type: Number,
default: 1
}
},
watch: {
itemData: {
handler(val) {
if (val) {
this.itemMsg = val
console.log(116, val)
}
},
deep: true
},
watch:{
itemMsg:{
handler(val){
// this.$refs.Title.validate();
// console.log(143, this.$refs)
// 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
},
itemMsg: {
handler(val) {
this.$emit("success", val)
},
deep: true
},
},
data() {
return {
isShowMap: false, //是否显示地图弹窗
isDropdown: true,//显示下拉
itemMsg:{
Title:"",//活动大标题
TripSort:0,//活动排序
ActivityPlanList:[//活动安排
{
TripSort:0,//排序
StartTime:"",//开始时间
ActivityDuration:"",//活动时长（单位：分钟）
LonLat:"",//活动地址经纬度
LocationName:"",//活动地址
TripTitle:"",//安排标题
TripContent:"",//内容
TripPicList:[]//图片
}
]
isDropdown: true, //显示下拉
itemMsg: {
Title: "", //活动大标题
TripSort: 0, //活动排序
ActivityPlanList: [ //活动安排
{
TripSort: 0, //排序
StartTime: "", //开始时间
ActivityDuration: "", //活动时长（单位：分钟）
LonLat: "", //活动地址经纬度
LocationName: "", //活动地址
TripTitle: "", //安排标题
TripContent: "", //内容
TripPicList: [] //图片
}
]
},
}
},
mounted() {
this.itemMsg=this.itemData
if (this.itemData) {
this.itemMsg = this.itemData
}
},
methods: {
goBack(){
this.$router.go(-1)
goBack() {
this.$router.go(-1)
},
taggleDown(){
this.isDropdown=!this.isDropdown
taggleDown() {
this.isDropdown = !this.isDropdown
},
uploadFile(files,index) {
uploadFile(files, index) {
UploadSelfFile('activeImg', files.file, res => {
if (res.Code == 1) {
this.itemMsg.ActivityPlanList[index].TripPicList.push(res.FileUrl);
this.itemMsg.ActivityPlanList[index].TripPicList.push(res.FileUrl);
}
})
},
//删除图片
deleteItemImg(index,_index){
this.itemMsg.ActivityPlanList[index].TripPicList.splice(_index,1);
//删除图片
deleteItemImg(index, _index) {
this.itemMsg.ActivityPlanList[index].TripPicList.splice(_index, 1);
},
//添加当日活动
addCurActuve(){
this.itemMsg.ActivityPlanList.push({
TripSort:this.itemMsg.ActivityPlanList.length,//排序
StartTime:"",//开始时间
ActivityDuration:"",//活动时长（单位：分钟）
LonLat:"",//活动地址经纬度
LocationName:"",//活动地址
TripTitle:"",//安排标题
TripContent:"",//内容
TripPicList:[]//图片
})
addCurActuve() {
this.itemMsg.ActivityPlanList.push({
TripSort: this.itemMsg.ActivityPlanList.length, //排序
StartTime: "", //开始时间
ActivityDuration: "", //活动时长（单位：分钟）
LonLat: "", //活动地址经纬度
LocationName: "", //活动地址
TripTitle: "", //安排标题
TripContent: "", //内容
TripPicList: [] //图片
})
},
delCurActuve(index){
this.itemMsg.ActivityPlanList.splice(index,1)
},
//得到地图信息
mapEvent(e,index) {
this.itemMsg.ActivityPlanList[index].LonLat= e.lat + "," + e.long;
this.itemMsg.ActivityPlanList[index].LocationName= e.address;
this.isShowMap = false;
delCurActuve(index) {
this.itemMsg.ActivityPlanList.splice(index, 1)
},
//得到地图信息
mapEvent(e, index) {
this.itemMsg.ActivityPlanList[index].LonLat = e.lat + "," + e.long;
this.itemMsg.ActivityPlanList[index].LocationName = e.address;
this.isShowMap = false;
},
getMapShow() {
this.isShowMap = true;
},
ruleVerification(){
this.$refs.Title.validate();
this.$refs.StartTime.map(item=>{
item.validate()
})
this.$refs.Duration.map(item=>{
item.validate()
})
this.$refs.TripTitle.map(item=>{
item.validate()
})
this.$refs.TripContent.map(item=>{
item.validate()
})
// 验证
ruleVerification() {
let hasErr = []
this.$refs.Title.validate();
if(this.$refs.Title.hasError){
hasErr.push(this.$refs.Title.hasError)
}
this.$refs.StartTime.map(item => {
item.validate()
if(item.hasError){
hasErr.push(item.hasError)
}
})
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>
<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{
.up{
width: 700px;
// height: 55px;
.down {
width: 640px;
margin-left: 61px;
// height: 100px;
border-left: 1px dashed #DCDCDC;
.down-item {
.item1 {
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;
.circle {
width: 8px;
height: 8px;
background-color: #2961FE;
border-radius: 50%;
}
.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;
.starttime{
width: 140px;
margin-right: 10px;
}
}
}
.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;
.con {
height: 100%;
background-color: #F2F2F2;
border-radius: 4px;
flex-grow: 2;
// padding: 10px 0;
display: flex;
.starttime {
width: 140px;
margin-right: 10px;
}
}
}
}
.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 {
border-radius: 6px;
cursor: pointer;
width:100%;
height:100%;
color:#8c939d;
width: 100%;
height: 100%;
color: #8c939d;
position: relative;
overflow: hidden;
}
.addDutyMain{
display:inline-block;
width:118px;
height:118px;
font-size:70px;
.addDutyMain {
display: inline-block;
width: 118px;
height: 118px;
font-size: 70px;
border: 1px dashed #d9d9d9;
line-height:120px;
line-height: 120px;
text-align: center;
}
.ItemImgDiv{
width:118px;
height:118px;
.ItemImgDiv {
width: 118px;
height: 118px;
position: relative;
margin:0 10px 10px 0;
display:inline-block;
margin: 0 10px 10px 0;
display: inline-block;
}
</style>
src/pages/activity/activeDetail.vue
View file @ c65e3b48
......@@ -85,6 +85,7 @@ import DetailItem from "../../components/activity/activeDetail-item"
mounted(){
if(this.$route.query.Id){
this.msg.Id=this.$route.query.Id
this.getDetail()
}
},
methods: {
......@@ -116,37 +117,38 @@ import DetailItem from "../../components/activity/activeDetail-item"
this.ActivityTitle.splice(index,1)
},
getItemData(val,index){
console.log('119', val,index)
this.msg.ActivityTitle[index]=val
},
//保存信息
save() {
// this.$refs.child[0].ruleVerification();
this.msg.ActivityTitle=this.ActivityTitle
this.$refs.child.forEach(x=>{
this.$refs.child.map(x=>{
x.ruleVerification();
})
// this.$refs.Name.validate();
// this.$refs.StartTime.validate();
// 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) {
let res= this.$refs.child.every(x=>{
return x.ruleVerification();
})
// this.apipostDS("/api/Education/GetSetActivityPlan", this.msg, (res) => {
// console.log(136,res)
// if (res.data.resultCode === 1) {
// this.Success(res.data.message);
// } else {
// this.Error(res.data.message);
// }
// })
// }
console.log('res', res)
if(res){
this.apipostDS("/api/Education/GetSetActivityPlan", this.msg, (res) => {
console.log(136,res)
if (res.data.resultCode === 1) {
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