用户投诉
user-report.nvue
<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="用户投诉" showBack :showRight="true" bgColor="bg-white"> <free-main-button name="投诉" slot="right" @click="submit"></free-main-button> </free-nav-bar> <picker mode="selector" :range="range" @change="change"> <view> <free-list-item :showLeftIcon="false" :title="cate ? cate : '请选择分类'" showRight></free-list-item> </view> </picker> <textarea value="" placeholder="请填写投诉内容..." class="bg-white p-2 font-md" v-model="content" /> </view> </template> <script> import freeNavBar from '@/components/free-ui/free-nav-bar.vue'; import freeMainButton from '@/components/free-ui/free-main-button.vue'; import freeListItem from '@/components/free-ui/free-list-item.vue'; export default { components:{ freeNavBar, freeMainButton, freeListItem }, data() { return { content:'', range:['分类一','分类二','分类三','分类四','分类五'], cate:'' } }, methods: { change(e){ this.cate = this.range[e.detail.value]; }, submit(){ if(!this.cate){ return uni.showToast({ title:'请选择分类', icon:'none' }) } if(!this.content){ return uni.showToast({ title:'请填写投诉内容', icon:'none' }) } // 请求服务器 uni.navigateBack({ delta:1 }); uni.showToast({ title:'投诉成功', icon:'none' }) } } } </script> <style> </style>
所使用的组件
// free-nav-bar.vue <template> <view> <view :class="getClass"> <!-- 状态栏 --> <view :style="'height:'+statusBarHeight+'px;'"></view> <!-- 导航 --> <view class="w-100 flex align-center justify-between" style="height: 90rpx;"> <!-- 左边 --> <view class="flex align-center"> <!-- 返回按钮 --> <free-icon-button v-if="showBack" @click="back"><text class="iconfont font-md"></text></free-icon-button> <!-- 标题 --> <text v-if="title" class="font-md ml-3" >{{getTitle}}</text> </view> <!-- 右边 --> <view class="flex align-center" v-if="showRight"> <slot name="right"> <free-icon-button @click="search"><text class="iconfont font-md"></text></free-icon-button> <free-icon-button @click="openExtend"><text class="iconfont font-md"></text></free-icon-button> </slot> </view> <!--\ue6e3 \ue682 --> </view> </view> <!-- 站位 --> <view v-if="fixed" :style="fixedStyle"></view> <!-- 扩展菜单 --> <free-popup v-if="showRight" ref="extend" maskColor bottom :bodyWidth="320" :bodyHeight="525" bodyBgColor="bg-dark" transformOrigin="right top"> <view class="flex flex-column" style="width:320rpx;height: 525rpx;"> <view v-for="(item,index) in menus" :key="index" class="flex-1 flex align-center" hover-class="bg-hover-dark" @click="clickEvent(item.event)"> <text class="pl-3 pr-2 iconfont font-md text-white">{{item.icon}}</text> <text class="font-md text-white">{{item.name}}</text> </view> </view> </free-popup> </view> </template> <script> import freeIconButton from './free-icon-button.vue'; import freePopup from './free-popup.vue'; export default { components: { freeIconButton, freePopup }, props: { showBack:{ type:Boolean, default:false }, title: { type: String, default: '' }, fixed:{ type:Boolean, default:false }, noreadnum:{ type:Number, default:0 }, bgColor:{ type:String, default:"bg-light" }, showRight:{ type:Boolean, default:true } }, data() { return { statusBarHeight: 0, navBarHeight: 0, menus:[ { name:'发起群聊', event:"", icon:"\ue633" }, { name:'添加好友', event:"", icon:"\ue65d" }, { name:'扫一扫', event:"", icon:"\ue614" }, { name:'收付款', event:"", icon:"\ue66c" }, { name:'帮助与反馈', event:"", icon:"\ue61c" } ], } }, mounted() { // 获取任务栏高度 // #ifdef APP-PLUS-NVUE this.statusBarHeight = plus.navigator.getStatusbarHeight() // #endif this.navBarHeight = this.statusBarHeight + uni.upx2px(90) }, computed: { fixedStyle() { return `height:${this.navBarHeight}px`; }, getTitle(){ let noreadnum = this.noreadnum>0 ? '('+this.noreadnum+')' : ''; return this.title + noreadnum; }, getClass(){ let fixed = this.fixed?"fixed-top":""; return `${fixed} ${this.bgColor}`; } }, methods:{ openExtend(){ this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150)); }, // 返回 back(){ uni.navigateBack({ delta:1 }) } } } </script> <style> </style> // free-main-button.vue <template> <view class="rounded mr-2 px-2 py-1" @click="clickEvent" :class="disabled ? 'bg-light border' : 'main-bg-color'"> <text class="font" :class="disabled ? 'text-light-muted':'text-white'">{{name}}</text> </view> </template> <script> export default { props: { name: { type: String, default: "" }, disabled:{ type:Boolean, default:false } }, methods: { clickEvent() { if(!this.disabled){ this.$emit('click') } } }, } </script> <style> </style> // free-list-item.vue <template> <view class="bg-white flex align-stretch" hover-class="bg-light" @click="$emit('click')"> <view class="flex align-center justify-center py-2 pl-3" v-if="showLeftIcon"> <slot name="icon"></slot> <image :src="cover" v-if="cover" style="width: 75rpx;height: 75rpx;" mode="widthFix" :style="coverStyle"></image> </view> <view class="flex-1 flex align-center justify-between py-3 pl-3" :class="border ? 'border-bottom' : ''"> <slot> <text class="font-md text-dark">{{title}}</text> </slot> <view class="flex align-center pr-3" v-if="showRight"> <slot name="right"></slot> <!-- 右 --> <text class="iconfont text-light-muted font-md" v-if="showRightIcon" ></text> </view> </view> </view> </template> <script> export default{ props:{ // 是否开启下边线 border:{ type:Boolean, default:true }, // 封面 cover:{ type:String, default:"" }, // 标题 title:{ type:String, default:"" }, // 显示右边 showRight:{ type:Boolean, default:false }, // 封面大小 coverSize:{ type:[String,Number], default:75 }, // 显示左边图标 showLeftIcon:{ type:Boolean, default:true }, showRightIcon:{ type:Boolean, default:true } }, computed:{ coverStyle(){ return `width:${this.coverSize}rpx;height:${this.coverSize}rpx;`; } } } </script> <style> </style>
页面是酱紫的
感谢大家观看,我们下次见。