Browse Source

添加意见反馈页面

usgeek 7 years ago
parent
commit
45ae6e8c54

+ 109 - 0
litemall-wx/pages/ucenter/feedback/feedback.js

@@ -0,0 +1,109 @@
+var util = require('../../../utils/util.js');
+var api = require('../../../config/api.js');
+
+
+
+var app = getApp();
+
+Page({
+  data: {
+    array: ['请选择反馈类型', '商品相关', '功能异常', '优化建议', '其他'],
+    index: 0,
+    content:'',
+    contentLength:0,
+    mobile:''
+  },
+  bindPickerChange: function (e) {
+    console.log('picker发送选择改变,携带值为', e.detail.value);
+    this.setData({
+      index: e.detail.value
+    });
+  },
+  mobileInput: function (e) {
+    let that = this;
+    this.setData({
+      mobile: e.detail.value,
+    });
+    console.log(that.data.mobile);
+  },
+  contentInput: function (e) {
+   
+    let that = this;
+    this.setData({
+      contentLength: e.detail.cursor,
+      content: e.detail.value,
+    });
+    console.log(that.data.content);
+  },
+  cleanMobile:function(){
+    let that = this;
+
+  },
+  sbmitFeedback : function(e){
+    let that = this;
+    if (that.data.index == 0){
+      util.showErrorToast('请选择反馈类型');
+      return false;
+    }
+
+    if (that.data.content == '') {
+      util.showErrorToast('请输入反馈内容');
+      return false;
+    }
+
+    if (that.data.mobile == '') {
+      util.showErrorToast('请输入手机号码');
+      return false;
+    }
+    wx.showLoading({
+      title: '提交中...',
+      mask:true,
+      success: function () {
+
+      }
+    });
+
+    console.log(that.data);
+
+    util.request(api.FeedbackAdd, { mobile: that.data.mobile, index: that.data.index, content: that.data.content},'POST').then(function (res) {
+      if (res.errno === 0) {
+        console.log(res.data);
+      
+        wx.hideLoading();
+
+        wx.showToast({
+          title: res.data,
+          icon: 'success',
+          duration: 2000,
+          complete: function () {
+            console.log('重新加载');
+            that.setData({
+              index: 0,
+              content: '',
+              contentLength: 0,
+              mobile: ''
+            });
+          }
+        });
+      } else {
+        util.showErrorToast(res.data);
+      }
+      
+    });
+  },
+  onLoad: function (options) {
+  },
+  onReady: function () {
+
+  },
+  onShow: function () {
+
+  },
+  onHide: function () {
+    // 页面隐藏
+
+  },
+  onUnload: function () {
+    // 页面关闭
+  }
+})

+ 3 - 0
litemall-wx/pages/ucenter/feedback/feedback.json

@@ -0,0 +1,3 @@
+{
+
+}

+ 27 - 0
litemall-wx/pages/ucenter/feedback/feedback.wxml

@@ -0,0 +1,27 @@
+<view class="container">
+
+  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
+    <view class="picker">
+      <view class="fb-type">
+        <view class="type-label">{{array[index]}}</view>
+        <image class="type-icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/pickerArrow-a8b918f05f.png"></image>
+
+      </view>
+    </view>
+  </picker>
+  <view class="fb-body">
+    <textarea class="content" placeholder="对我们网站、商品、服务,你还有什么建议吗?你还希望在商城上买到什么?请告诉我们..."  bindinput ="contentInput" maxlength="500" auto-focus="true" value="{{content}}"/>
+    <view class="text-count">{{contentLength}}/500</view>
+  </view>
+  <view class="fb-mobile">
+    <view class="label">手机号码</view>
+    <view class="mobile-box">
+      <input class="mobile" maxlength="11" type="number" placeholder="方便我们与你联系" bindinput ="mobileInput" value="{{mobile}}"/>
+      <!--
+      <image class="clear-icon" src="https://platform-wxmall.oss-cn-beijing.aliyuncs.com/upload/20180727/150647657fcdd0.png" bindtap="cleanMobile"></image>
+      -->
+    </view>
+  </view>
+
+  <view class="fb-btn" bindtap="sbmitFeedback">提交</view>
+</view>

+ 131 - 0
litemall-wx/pages/ucenter/feedback/feedback.wxss

@@ -0,0 +1,131 @@
+page{
+    background: #f4f4f4;
+    min-height: 100%;
+}
+
+.container{
+    background: #f4f4f4;
+    min-height: 100%;
+    padding-top: 30rpx;
+}
+
+.fb-type{
+  height: 104rpx;
+  width: 100%;
+  background: #fff;
+  margin-bottom: 20rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 30rpx;
+  padding-right: 30rpx;
+}
+
+.fb-type .type-label{
+  height: 36rpx;
+  flex: 1;
+  color: #333;
+  font-size: 28rpx;
+}
+
+.fb-type .type-icon{
+  height: 36rpx;
+  width: 36rpx;
+}
+
+.fb-body{
+  width: 100%;
+  background: #fff;
+  height: 374rpx;
+  padding: 18rpx 30rpx 64rpx 30rpx;
+}
+
+.fb-body .content{
+  width: 100%;
+  height: 100%;
+  color: #333;
+  line-height: 40rpx;
+  font-size: 28rpx;
+}
+
+.fb-body .text-count{
+  padding-top: 17rpx;
+  line-height: 30rpx;
+  float: right;
+  color: #666;
+  font-size: 24rpx;
+}
+
+.fb-mobile{
+  height: 162rpx;
+  width: 100%;
+}
+
+.fb-mobile .label{
+  height: 58rpx;
+  width: 100%;
+  padding-top: 14rpx;
+  padding-bottom: 11rpx;
+  color: #7f7f7f;
+  font-size: 24rpx;
+  padding-left: 30rpx;
+  padding-right: 30rpx;
+  line-height: 33rpx;
+}
+
+.fb-mobile .mobile-box{
+  height: 104rpx;
+  width: 100%;
+  color: #333;
+  padding-left: 30rpx;
+  padding-right: 30rpx;
+  font-size: 24rpx;
+  background: #fff;
+  position: relative;
+}
+
+.fb-mobile .mobile{
+  position: absolute;
+  top: 27rpx;
+  left: 30rpx;
+  height: 50rpx;
+  width: 100%;
+  color: #333;
+  line-height: 50rpx;
+  font-size: 24rpx;
+}
+
+.clear-icon{
+  position: absolute;
+  top: 43rpx;
+  right: 30rpx;
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.fb-btn{
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+  height: 90rpx;
+  line-height: 98rpx;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  margin-left: 10%; 
+  text-align: center;
+  /* padding-left: -5rpx; */
+  font-size: 25rpx;
+  color: #f4f4f4;
+  border-top-left-radius: 50rpx;
+  border-bottom-left-radius: 50rpx;
+  border-top-right-radius: 50rpx;
+  border-bottom-right-radius: 50rpx;
+  letter-spacing: 3rpx;
+  background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);
+}