laishajiang
2 years ago
5 changed files with 183 additions and 100 deletions
@ -1,78 +1,92 @@ |
|||||||
<template> |
<template> |
||||||
<el-form :model="form" label-width="120px"> |
|
||||||
<el-form-item label="Activity name"> |
<el-tabs v-model="pageStore.mailTabActive" class="demo-tabs" |
||||||
<el-input v-model="form.name" /> |
:stretch="false" style="margin-top: 1%; width: 1200px;" @tab-change="handleClickOfWrite"> |
||||||
</el-form-item> |
<el-tab-pane label="我要写信" name="write" ref="cab1" style="min-height: 1100px;" ><WriteInfo @childWriter-msg="getChildWriteMsg" /></el-tab-pane> |
||||||
<el-form-item label="Activity zone"> |
<el-tab-pane label="我的信件" name="my" @tab-click="handleClick"> |
||||||
<el-select v-model="form.region" placeholder="please select your zone"> |
<MyMail v-if="chooseTab=='isList'" @child-msg="getChildMsg" /> |
||||||
<el-option label="Zone one" value="shanghai" /> |
<MailDetail :message="message" v-else/> |
||||||
<el-option label="Zone two" value="beijing" /> |
</el-tab-pane> |
||||||
</el-select> |
<el-tab-pane label="草稿箱" name="draft"> |
||||||
</el-form-item> |
<MailDraft :message_draft="message_draft" @child-msg="getMailDraftChildMsg"/> |
||||||
<el-form-item label="Activity time"> |
</el-tab-pane> |
||||||
<el-col :span="11"> |
</el-tabs> |
||||||
<el-date-picker |
|
||||||
v-model="form.date1" |
|
||||||
type="date" |
|
||||||
placeholder="Pick a date" |
|
||||||
style="width: 100%" |
|
||||||
/> |
|
||||||
</el-col> |
|
||||||
<el-col :span="2" class="text-center"> |
|
||||||
<span class="text-gray-500">-</span> |
|
||||||
</el-col> |
|
||||||
<el-col :span="11"> |
|
||||||
<el-time-picker |
|
||||||
v-model="form.date2" |
|
||||||
placeholder="Pick a time" |
|
||||||
style="width: 100%" |
|
||||||
/> |
|
||||||
</el-col> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="Instant delivery"> |
|
||||||
<el-switch v-model="form.delivery" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="Activity type"> |
|
||||||
<el-checkbox-group v-model="form.type"> |
|
||||||
<el-checkbox label="Online activities" name="type" /> |
|
||||||
<el-checkbox label="Promotion activities" name="type" /> |
|
||||||
<el-checkbox label="Offline activities" name="type" /> |
|
||||||
<el-checkbox label="Simple brand exposure" name="type" /> |
|
||||||
</el-checkbox-group> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="Resources"> |
|
||||||
<el-radio-group v-model="form.resource"> |
|
||||||
<el-radio label="Sponsor" /> |
|
||||||
<el-radio label="Venue" /> |
|
||||||
</el-radio-group> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="Activity form"> |
|
||||||
<el-input v-model="form.desc" type="textarea" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-button type="primary" @click="onSubmit">Create</el-button> |
|
||||||
<el-button>Cancel</el-button> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||||
import { reactive } from 'vue' |
import { reactive } from 'vue' |
||||||
|
import { ref } from 'vue' |
||||||
|
import WriteInfo from './components/WriteInfo.vue'; |
||||||
|
import MyMail from './components/MyMail.vue'; |
||||||
|
import MailDraft from './components/MailDraft.vue'; |
||||||
|
import MailDetail from '../views/MailDetail.vue'; |
||||||
|
import type { TabsPaneContext } from 'element-plus' |
||||||
|
import { useRoute } from "vue-router"; |
||||||
|
import PageStore from '../store/page'; |
||||||
|
|
||||||
|
const chooseTab = ref('isList'); |
||||||
|
const route = useRoute(); |
||||||
|
|
||||||
|
const pageStore = PageStore() |
||||||
|
if(route.query.active){ |
||||||
|
pageStore.mailTabActive = route.query.active |
||||||
|
}else{ |
||||||
|
pageStore.mailTabActive = "write" |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
const message = ref("1"); |
||||||
|
const message_draft = ref("1"); |
||||||
|
const activeName = ref('first') |
||||||
|
|
||||||
|
const handleClick = (tab: TabsPaneContext, event: Event) => { |
||||||
|
|
||||||
|
} |
||||||
|
const handleClickOfWrite = (name) => { |
||||||
|
console.log(chooseTab.value) |
||||||
|
|
||||||
|
chooseTab.value = 'isList' |
||||||
|
|
||||||
// do not use same name with ref |
} |
||||||
const form = reactive({ |
|
||||||
name: '', |
function getChildMsg(msg) { |
||||||
region: '', |
console.log("这就是子组件传过来的msg" + msg) |
||||||
date1: '', |
chooseTab.value = 'isDetail' |
||||||
date2: '', |
message.value = msg |
||||||
delivery: false, |
console.log("aaa"+message.value) |
||||||
type: [], |
|
||||||
resource: '', |
} |
||||||
desc: '', |
function getChildWriteMsg(msg) { |
||||||
}) |
// console.log("这就是子组件传过来的msg" + msg) |
||||||
|
activeName.value = msg |
||||||
const onSubmit = () => { |
// console.log("aaa"+activeName.value) |
||||||
console.log('submit!') |
} |
||||||
|
function getMailDraftChildMsg(msg) { |
||||||
|
activeName.value = "first" |
||||||
|
console.log("这就是子组件传过来的msg" + msg) |
||||||
|
message_draft.value = msg |
||||||
|
console.log("message_draft"+message_draft.value) |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
|
||||||
|
::v-deep .el-tabs__item { |
||||||
|
width: 400px; |
||||||
|
height: 33px; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-size: 24px; |
||||||
|
color: #333333 100%; |
||||||
|
text-align: center; |
||||||
|
font-weight: 400; |
||||||
|
margin-bottom: 1.2%; |
||||||
|
} |
||||||
|
|
||||||
|
::v-deep .el-tabs__item .is-active { |
||||||
|
color: #0E5A98 100%; |
||||||
|
} |
||||||
|
::v-deep .el-tabs__active-bar { |
||||||
|
|
||||||
|
background-color: #0E5A98 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue