修改区域选择交互

miniprogram/pages/areaSelect/areaSelect.ts

@@ -12,6 +12,7 @@ Page({
     areaList: [],
     filterList: [],
     methodName: '',
+    inputValue: '',
   },
 
   /**
@@ -48,6 +49,7 @@ Page({
             if (index > -1) {
               this.setData({
                 selectedIndex: index,
+                inputValue: res.data[index].areaName,
               });
             }
           }
@@ -74,6 +76,14 @@ Page({
     console.log(e, value);
     this.getFilterListByName(value);
   },
+  clearInputValue() {
+    console.log('in clearInputValue');
+    this.setData!({
+      inputValue: '',
+      selected: '',
+      selectedIndex: '',
+    });
+  },
   getFilterListByName(name: string) {
     let filterList = [];
     if (name) {
@@ -83,7 +93,7 @@ Page({
     } else {
       filterList = this.data.areaList;
     }
-    this.setData({
+    this.setData!({
       filterList,
     });
   },
@@ -104,7 +114,7 @@ Page({
     var pages = getCurrentPages();
     var prevPage = pages[pages.length - 2]; //上一个页面
     let entity = {
-      id: value,
+      id: this.data.filterList[value].id,
       name: this.data.filterList[value].areaName,
     };
 

miniprogram/pages/areaSelect/areaSelect.wxml

 <!-- miniprogram/pages/areaSelect/areaSelect.wxml -->
 <view class="areaselect-pickBox">
   <view class="areaselect-pickFilter">
-    <input class="areaselect-pickInput" type="text" bindinput="inputHandle" bindconfirm="confirmHandle" />
+    <input class="areaselect-pickInput" type="text" value="{{inputValue}}" bindinput="inputHandle" bindconfirm="confirmHandle" />
+    <view class="areaselect-pickInput-clear" wx:if="{{inputValue}}" catch:tap="clearInputValue">
+      <image class="areaselect-pickInput-clear-icon" src="../../images/ic_guanbi@2x.png" />
+    </view>
     <view class="areaselect-pickBtn" bindtap="bindPickerChange">确认</view>
   </view>
   <view class="areaselect-list">

miniprogram/pages/areaSelect/areaSelect.wxss

@@ -13,6 +13,7 @@ page {
   flex-direction: column;
 }
 .areaselect-pickFilter {
+  position: relative;
   display: flex;
   padding: 40rpx 40rpx 0;
   align-items: center;
@@ -20,6 +21,17 @@ page {
 .areaselect-pickInput {
   flex: 1;
 }
+.areaselect-pickInput-clear {
+  position: absolute;
+  width: 40rpx;
+  height: 40rpx;
+  right: 175rpx;
+  z-index: 2;
+}
+.areaselect-pickInput-clear-icon {
+  width: 100%;
+  height: 100%;
+}
 .areaselect-pickBtn {
   color: #6895fe;
   margin-left: 20rpx;

miniprogram/pages/components/PayTypeChart/PayTypeChart.ts

@@ -63,7 +63,11 @@ function initChart(canvas, width, height, F2) {
   const coord = paytypeChart.get('coord'); // 获取坐标系对象
   frontPlot.addShape('sector', {
     attrs: {
-      fill: '#000',
+      x: coord.center.x - coord.circleRadius - coord.start.x + coord.endAngle,
+      y: coord.center.y,
+      r: 0, // 全半径
+      r0: coord.circleRadius * coord.innerRadius,
+      fill: '#fff',
     },
   });
   paytypeChart.get('canvas').draw();
@@ -84,7 +88,15 @@ Component({
             marker: 'square',
             itemFormatter: val => {
               let item = newVal.find(item => item.key === val);
-              return item ? item.name + '    ' + formatPrice(item.count) : '';
+              if (item) {
+                let name = item.name;
+                if (item && item.name.length < 4) {
+                  name += '\xa0\xa0\xa0';
+                }
+                return name + '   ' + formatPrice(item.count);
+              } else {
+                return '';
+              }
             },
             // custom: true,
             // items: newVal.map(item => ({

miniprogram/pages/index/index.wxss

@@ -18,17 +18,19 @@
 }
 
 .login-input-password {
-  position: relative;
+  display: flex;
+  align-items: center;
+}
+.login-input-password .login-input {
+  flex: 1;
+  margin-bottom: 0;
+  margin-right: 10rpx;
 }
-
 .password-eyes {
-  position: absolute;
   width: 44rpx;
   height: 44rpx;
-  right: 40rpx;
-  top: 10rpx;
   z-index: 2;
-  padding: 10rpx;
+  padding: 20rpx;
 }
 .password-eyes-icon {
   width: 100%;