选择方式优化

ghsApp/src/admin/expend/addExpend.vue

@@ -4,12 +4,10 @@
       <form @submit="formSubmit">
         <view class="module-com input-line-wrap">
 
-          <tui-list-cell class="line-cell" :hover="false" :arrow="true">
-            <view class="tui-title">类型</view>
-            <view class="tui-input" @click="changeType">
-              <text v-if="form.type == -1" style="color:#CCCCCC;">请选择</text>
-              <text v-else>{{ form.typeName }}</text>
-            </view>
+          <tui-list-cell class="line-cell" :arrow="true">
+            <div class="tui-title">类型</div>
+            <view class="uni-input" v-if="form.type==-1" style="color:#CCCCCC;width:400upx;" @click="changeType()">请选择</view>
+            <view class="uni-input" v-else @click="changeType()" style="width:400upx;">{{ form.typeName ? form.typeName : '请选择' }}</view>
           </tui-list-cell>
 
           <tui-list-cell class="line-cell" :hover="false">
@@ -68,14 +66,23 @@
       </form>
     </view>
 
-    <uni-popup ref="typeShowMore" background-color="#fff" type="center" :animation="true" class="class-popup-style">
-		<view style="display:flex;width:100vw;padding:20upx 20upx 40upx 20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
-			<view v-for="(item, index) in typeList" :key="index" style="width:100vw;margin-top:8upx;">
-				<button @click="getType(item)">{{ item.name }}</button>
-			</view>
-			<view style="width:100vw;margin-top:30upx;margin-bottom:70upx;"><button @click="closeTypeShow()">取消</button></view>
-		</view>
-	</uni-popup>
+    <uni-popup ref="typeShowMore" background-color="#fff" type="center" :animation="false" class="class-popup-style">
+      <view style="max-height:80vh;overflow: scroll;">
+        <view style="margin-left:30upx;margin-top:19upx;font-size:27upx;font-weight:bold;">请选择：</view>
+        <view style="display:flex;padding:20upx;height:auto;justify-content: flex-start;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
+          <view v-for="(item, index) in typeList" :key="index" style="margin-bottom:20upx;margin-left:3upx;">
+            <button
+              class="admin-button-com staff-btn"
+              @click.stop="getType(item)"
+              :class="{'selected': form.type === item.id}"
+            >
+              {{ item.name }}
+            </button>
+          </view>
+        </view>
+        <view style="text-align:center;padding:10upx 0 10upx 0;"><button class="admin-button-com big blue" @click="closeTypeShow()">取消选择</button></view>
+      </view>
+    </uni-popup>
 
   <mx-date-picker :show="showPicker" format="yyyy-mm-dd" type="date" :value="defaultPickerDate" :show-tips="true" @confirm="confirmPicker" @cancel="showPicker = false" />
 
@@ -238,4 +245,27 @@ export default {
     width: 100%;
   }
 }
+
+.staff-btn {
+  min-width: 160upx;
+  padding: 0 27upx;
+  height: 80upx;
+  font-size: 40upx;
+  font-weight: bold;
+  margin: 8upx 8upx 0 0;
+  border-radius: 16upx;
+  background: #f0f2f6;
+  color: #333;
+  border: 2upx solid #e0e0e0;
+  transition: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  &.selected {
+    background-color: #007aff !important;
+    color: #fff !important;
+    border-color: #007aff !important;
+  }
+}
 </style>