laishajiang
2 years ago
5 changed files with 183 additions and 100 deletions
@ -1,78 +1,92 @@
|
||||
<template> |
||||
<el-form :model="form" label-width="120px"> |
||||
<el-form-item label="Activity name"> |
||||
<el-input v-model="form.name" /> |
||||
</el-form-item> |
||||
<el-form-item label="Activity zone"> |
||||
<el-select v-model="form.region" placeholder="please select your zone"> |
||||
<el-option label="Zone one" value="shanghai" /> |
||||
<el-option label="Zone two" value="beijing" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="Activity time"> |
||||
<el-col :span="11"> |
||||
<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> |
||||
|
||||
<el-tabs v-model="pageStore.mailTabActive" class="demo-tabs" |
||||
:stretch="false" style="margin-top: 1%; width: 1200px;" @tab-change="handleClickOfWrite"> |
||||
<el-tab-pane label="我要写信" name="write" ref="cab1" style="min-height: 1100px;" ><WriteInfo @childWriter-msg="getChildWriteMsg" /></el-tab-pane> |
||||
<el-tab-pane label="我的信件" name="my" @tab-click="handleClick"> |
||||
<MyMail v-if="chooseTab=='isList'" @child-msg="getChildMsg" /> |
||||
<MailDetail :message="message" v-else/> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="草稿箱" name="draft"> |
||||
<MailDraft :message_draft="message_draft" @child-msg="getMailDraftChildMsg"/> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
|
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive } from 'vue' |
||||
<script lang="ts" setup> |
||||
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) => { |
||||
|
||||
// do not use same name with ref |
||||
const form = reactive({ |
||||
name: '', |
||||
region: '', |
||||
date1: '', |
||||
date2: '', |
||||
delivery: false, |
||||
type: [], |
||||
resource: '', |
||||
desc: '', |
||||
}) |
||||
} |
||||
const handleClickOfWrite = (name) => { |
||||
console.log(chooseTab.value) |
||||
|
||||
chooseTab.value = 'isList' |
||||
|
||||
} |
||||
|
||||
function getChildMsg(msg) { |
||||
console.log("这就是子组件传过来的msg" + msg) |
||||
chooseTab.value = 'isDetail' |
||||
message.value = msg |
||||
console.log("aaa"+message.value) |
||||
|
||||
} |
||||
function getChildWriteMsg(msg) { |
||||
// console.log("这就是子组件传过来的msg" + msg) |
||||
activeName.value = msg |
||||
// console.log("aaa"+activeName.value) |
||||
} |
||||
function getMailDraftChildMsg(msg) { |
||||
activeName.value = "first" |
||||
console.log("这就是子组件传过来的msg" + msg) |
||||
message_draft.value = msg |
||||
console.log("message_draft"+message_draft.value) |
||||
} |
||||
</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%; |
||||
} |
||||
|
||||
const onSubmit = () => { |
||||
console.log('submit!') |
||||
} |
||||
</script> |
||||
|
||||
::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