意见反馈

做假的意见反馈,主要练习一下微信小程序文件上传api以及样式界面的编写、组件的使用逻辑

代码实现

首先修改标题并且使用之前写好的tab组件

json

{"usingComponents": {"tab":"/components/Tabs/Tabs"},"navigationBarTitleText": "意见反馈"
}

编写界面

<tab tabList="{{tabs}}" curr="{{curr}}" ></tab>
<view class="fb_main"><view class="fb_title"></view><view class="fb_tips"><text >功能建议</text><text >购买遇到问题</text><text >性能问题</text><text >其他</text></view><view class="fb_content"><textarea value="{{textValue}}" bindinput = "handleTextInput" placeholder="请描述一下问题"></textarea><view class="fb_tool"><button bindtap = "handleimg" >+</button><view class="up_img_item" wx:for="{{chooseimg}}"wx:key="*this" bindtap = "handleremoveimg" data-index="{{index}}"><!--数组为简单数组的时候，使用 *this 的值作为wx:key 的值即可--><image src="{{item}}" style="width: 100rpx; height: 100rpx;"  mode="widthFix" /></view></view></view><view class="form_btn_wrap"> <button  bindtap="handlefrom"><icon type="success_no_circle"color="white"></icon>提交</button></view></view>

编写样式

.fb_main {padding:20rpx;color: #666;}
.fb_main .fb_tips {display: flex;flex-wrap: wrap;
}
.fb_main .fb_tips text {width: 30%;padding: 10rpx;background-color: rgb(223, 213, 213);text-align: center;margin:20rpx 10rpx;
}
.fb_main .fb_content {background-color: #fff;margin-top: 20rpx;
}
.fb_main .fb_content textarea {padding: 10rpx;
}
.fb_main .fb_content .fb_tool {display: flex;flex-wrap: wrap;padding-bottom: 30rpx;
}
.fb_main .fb_content .fb_tool button{margin: 0;width: 90rpx;height: 90rpx;font-size: 60rpx;padding: 0;display: flex;justify-content: center;align-items: center;margin-left: 20rpx;margin-top: 20rpx;color: #ccc;}.fb_main .fb_content .fb_tool .up_img_item{margin-left: 20rpx;margin-top: 20rpx;}.fb_main .form_btn_wrap {margin-top: 20rpx;display: flex;justify-content: flex-end;}.fb_main .form_btn_wrap button{margin: 0;width: 38%;color: #fff;background-color: var(--themeColor);}

逻辑处理js

tabs：tab组件,传入选项卡名称

curr:选中的下标

textValue:反馈的文本

chooseimg:反馈的图片

// pages/feedback/feedback.js
Page({/*** 页面的初始数据*/data: {tabs:['体验问题','商品、商家投诉'],curr:0,//文本的值textValue: "",//被选中的图片数组chooseimg: [],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},
//选择图片事件
handleimg(e) {console.log(e);//调用apiwx.chooseImage({count: 9, //最多可选择几张照片sizeType: ["original", "compressed"], //图片格式 原图/压缩sourceType: ["album", "camera"], //图片来源success: (result) => {console.log(result.tempFilePaths);this.setData({//图片数组进行拼接chooseimg: [...this.data.chooseimg, ...result.tempFilePaths],});},fail: () => {},complete: () => {},});},//删除图片元素handleremoveimg(e) {console.log(e);//获取传递过来的索引值const { index } = e.currentTarget.dataset;//获取图片数组let { chooseimg } = this.data;//删除元素chooseimg.splice(index, 1);//将修改后的值重新赋值this.setData({chooseimg,});},//文本输入handleTextInput(e) {this.setData({textValue: e.detail.value,});},//提交按钮单击事件handlefrom(e) {//获取文本的值const { textValue, chooseimg } = this.data;//验证合法性if (!textValue.trim()) {//不合法wx.showToast({title: "输入有误",icon: "none",mask: true,});return;}//显示正在上传中wx.showToast({title: "提交成功",icon:"success",duration:1000});setTimeout(() => {wx.switchTab({url: '/pages/index/index'})}, 1000);}
})

效果图

大概的界面功能以及假的意见反馈就实现完成了~
整个商城大概就这么些,后续我会将整个项目放到博客资源上供大家参考学习

微信小程序商城项目实战(完结篇:意见反馈)相关推荐

微信小程序商城项目实战(第一篇:项目搭建与首页)
商城项目第一篇项目搭建项目结构编写整个项目中需要用到的功能 request.js 全局样式组件(搜索框) 首页代码编写效果图项目搭建后端接口:https://www.showdoc.c ...
微信小程序商城项目实战(第二篇:分类页)
实现分类页修改json文件并且引入搜索框 {"usingComponents": {"search-input":"../../components ...
微信小程序商城项目实战(第十篇:订单管理)
订单管理订单页面分析代码实现效果图展示订单详情页分析详解效果图付完款的未付款的订单页面分析顶部改为"我的订单" 上方为导航栏:全部.待付款.待发货.退款/ ...
微信小程序商城项目实战(第七篇:生成订单支付页)
订单支付分析代码实现效果图展示分析顶部改为"支付" 上方为地址,跳转至地址管理,可修改下方为订单信息最下方显示所需支付金额以及支付按钮,点击支付则支付成功跳转订单页 ...
微信小程序商城项目实战(第十一篇:商品收藏+历史浏览管理)
商品收藏+历史浏览管理商品收藏+历史浏览页面分析代码实现效果图展示商品收藏: 历史浏览: 商品收藏+历史浏览页面共用一个页面分析顶部改为"商品收藏" 上方为导航栏: ...
微信小程序商城项目实战(第五篇:购物车)
实现购物车 json里边设置一下页面标题"navigationBarTitleText": "购物车" 界面组成上方由一个按钮跳转到收货地址管理, 中间为购物 ...
《微信小程序商城开发实战》笔者的新书，欢迎各位粉丝上京东购买
编辑推荐在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性牢牢地占据着移动App应用的头把交椅之位,据相关统计,微信月活跃用户已达10亿之多,且占据着中国用户30%以上的应用时间, ...
推荐一个微信小程序商城项目
推荐一款实用的微信小程序商城项目,这个项目不仅有商城基本的功能,比如:商品管理.订单管理.用户管理,还有分销功能,具备广告.优惠券等功能. 技术选型后端采用 Spring 技术栈,使用到的框架主要包 ...
微信小程序电商实战-入门篇
IT实战联盟博客:http://blog.100boot.cn 小程序开发工具有新版本更新啦!开发体验更好了,详情可以查看微信公众平台-小程序https://mp.weixin.qq.com/debu ...

微信小程序商城项目实战(完结篇:意见反馈)

微信小程序商城项目完结

意见反馈

代码实现

首先修改标题并且使用之前写好的tab组件

编写界面

编写样式

逻辑处理js

效果图

微信小程序商城项目实战(完结篇:意见反馈)相关推荐

最新文章

热门文章