uni-app 16用户投诉开发

用户投诉

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-NVUEthis.statusBarHeight = plus.navigator.getStatusbarHeight()// #endifthis.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>

页面是酱紫的

感谢大家观看，我们下次见。

uni-app 16用户投诉开发相关推荐

uni app video、视频播放开发
视频播放有3种解决方案,使用HTML5的自带video.从HBuilder9.1.3起新增的plus.video的原生视频播放,以及使用Native.js. HTML5自带video标签,可以播放符合 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
京东金融App收集用户敏感信息？致歉来了
整理 | 琥珀出品 | AI科技大本营(ID:rgznai100) 京东金融 App 收集用户信息大家看到的是安全隐患,而我们看到的是一个大企业的原罪. 日前,就京东金融 App 疑似收集信息事件引 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
Hybrid App 和 React Native 开发那点事
版权声明:本文为博主原创文章,未经博主允许不得转载. 简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App ...
京东金融App收集用户敏感信息？官方如何回应？
京东金融 App 收集用户信息大家看到的是安全隐患,而我们看到的是一个大企业的原罪. 日前,就京东金融 App 疑似收集信息事件引起了网络上的轩然大波.就该起事件,京东金融官方微博于今日再发声明致歉, ...
Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术——不就是chrome OS吗？...
什么是Progressive Web App? Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术,由Google实现,让浏览器打开的网址像APP一样运行 ...

uni-app 16用户投诉开发

user-report.nvue

uni-app 16用户投诉开发相关推荐

最新文章

热门文章