父组件
<Feedback ref="RefFeedback"></Feedback>
import Feedback from '@/components/feedback'
components: {
Feedback
},
setup () {
const RefFeedback = ref()
const handleFeedback = () => {
RefFeedback.value.showSure(params.userCode) // 调用子组件的方法,传递参数
}
}
return {
RefFeedback,
handleFeedback,
}
子组件
<template>
<van-dialog title="感谢你反馈问题/需求"
v-model:show='show'
show-cancel-button
confirm-button-text='提交'
@confirm='handleConfirm'
message-align='left'
>
<van-cell-group>
<van-cell title="内容分类"></van-cell>
<van-cell>
<van-dropdown-menu :overlay='false' >
<van-dropdown-item v-model="feedback.type" :options="contentClassify" @change='handleContentClassify'/>
</van-dropdown-menu>
</van-cell>
<van-cell title="具体描述"></van-cell>
<van-cell>
<van-field
v-model="feedback.remark"
rows="1"
autosize
type="textarea"
placeholder=""
/>
</van-cell>
</van-cell-group>
</van-dialog>
</template>
<script>
import { defineComponent, reactive, toRefs, getCurrentInstance } from 'vue'
import { Notify } from 'vant'
export default defineComponent({
name: 'Feedback',
setup () {
const { proxy } = getCurrentInstance()
const api = proxy.$api
const data = reactive({
feedback: {
type: 1,
remark: '请选择分类'
},
show: false,
// 单选,枚举: 需增加门店,需新增产品线,需关闭产品线,门店已关闭,其他
contentClassify: [{
text: '需增加门店',
value: 1,
remark: '门店编号:'
}, {
text: '需新增产品线',
value: 2,
remark: '门店编号: 产品系列名称:'
}, {
text: '需关闭产品线',
value: 3,
remark: '门店编号: 产品系列名称:'
}, {
text: '门店已关闭',
value: 4,
remark: '门店编号:'
}, {
text: '其他',
value: 0,
remark: ''
}]
})
const handleContentClassify = (value) => {
data.contentClassify.filter(item => {
if (value === item.value) {
data.feedback.remark = item.remark
}
})
}
const handleConfirm = () => {
api.store.feedbackCommit(data.feedback).then(res => {
if (res.data.code === '0') {
Notify({ type: 'success', message: '操作成功' })
data.show = false
}
})
}
const showSure = (userCode) => { // 子组件方法接受参数
data.feedback.userCode = userCode // 门店编号
data.show = true
}
return {
...toRefs(data),
handleContentClassify,
handleConfirm,
showSure
}
}
})
</script>