发起收费页面修改

src/views/my/charge.vue

@@ -34,30 +34,47 @@
     <div class="things">
       <div class="things_title">所需耗材</div>
       <div class="list-item" v-for="(item,index) in addList" :key="index">
-        <div class="item flex-h flex-hb" v-model="item.zl">
+        <div class="item flex-h flex-hb" @click="showZl(index)">
           <div class="item_title flex-h flex-vc">
             <div class="title_left">耗材种类</div>
-            <div class="title_r">洁具</div>
+            <div class="title_r">{{item.zl}}</div>
           </div>
           <div class="select flex-h flex-vc">
             <div class="select_txt">选择</div>
             <img src="@assets/images/my/select.png" alt />
           </div>
         </div>
-        <div class="item flex-h flex-hb" v-model="item.mc">
+        <div class="item flex-h flex-hb" @click="showHc(index)">
           <div class="item_title flex-h flex-vc">
             <div class="title_left">耗材名称</div>
-            <div class="title_r">水龙头</div>
+            <div class="title_r">{{item.mc}}</div>
           </div>
           <div class="select flex-h flex-vc">
             <div class="select_txt">选择</div>
             <img src="@assets/images/my/select.png" alt />
           </div>
         </div>
-        <div class="item flex-h flex-vc" v-model="item.sl">
+        <div class="item flex-h flex-vc">
           <div class="title_left">耗材个数</div>
-          <input type="number" placeholder="请输入" />
+          <input type="number" placeholder="请输入" v-model="item.sl" />
         </div>
+        <!-- 种类弹窗 -->
+        <van-popup v-model="item.zlSelect" round position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="types"
+            @confirm="(value)=>{typeConfirm(value,index)}"
+            @cancel="typeCancel(index)"
+          />
+        </van-popup>
+        <van-popup v-model="item.mcSelect" round position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="hcName"
+            @confirm="(value)=>{hcConfirm(value,index)}"
+            @cancel="hcCancel(index)"
+          />
+        </van-popup>
       </div>
       <div class="line"></div>
       <div class="math-btn flex-h flex-vc flex-hb">
@@ -68,7 +85,11 @@
     <div class="blank"></div>
     <!-- 底部 -->
     <div class="bottom flex-h flex-hb flex-vc">
-      <div class="left">共<span>{{addList.length}}</span>件，总金额:<span>￥0</span></div>
+      <div class="left">
+        共
+        <span>{{addList.length}}</span>件，总金额:
+        <span>￥0</span>
+      </div>
       <div class="sk-btn">发起收款</div>
     </div>
   </div>
@@ -80,20 +101,51 @@ export default {
     data () {
         return {
             addList:[
-			  {
-				  zl:'',
-                  mc:'',
-                  sl:'',
-			  }
-		    ],
+              {
+                zl:'',
+                mc:'',
+				sl:'',
+				zlSelect:false,
+				mcSelect: false
+              }
+			],
+			showPicker: false,
+			types: ["洁具", "木工类","供暖类"],
+			type_name: '请选择',
+			hcName: ["水龙头","桌子","暖气管"],
+			hc_name: '请选择',
+			hcPicker: false,
+			hcNum: '',
         }
     },
     methods:{
+		showZl(index){
+			this.addList[index].zlSelect = true
+		},
+		typeConfirm(value, index) {
+			this.addList[index].zl = value
+			this.addList[index].zlSelect = false
+		},
+		typeCancel(index) {
+			this.addList[index].zlSelect = false
+		},
+		showHc(index){
+			this.addList[index].mcSelect = true
+		},
+		hcConfirm(value, index) {
+			this.addList[index].mc = value
+			this.addList[index].mcSelect = false
+		},
+		hcCancel() {
+			this.addList[index].mcSelect = false
+		},
         addMeth () {
             this.addList.push({
-				  zl:'',
-                  mc:'',
-                  sl:'',
+				zl:'',
+				mc:'',
+				sl:'',
+				zlSelect:false,
+				mcSelect: false
 			  })
         },
         delMeth(index){
@@ -194,8 +246,8 @@ export default {
   font-size: 0.3rem;
   margin-top: 0.4rem;
 }
-.list-item{
-    margin-bottom: 0.8rem;
+.list-item {
+  margin-bottom: 0.8rem;
 }
 .blank {
   width: 100%;