wepy-vantUI 로 상 탄 목록 을 실현 하고 해당 하 는 값 을 선택 합 니 다.

vantUI 는 더 이상 소개 하지 않 습 니 다.상대 적 으로 사용 하기 좋 은 ui 구성 요소 라 이브 러 리 입 니 다.다음은 주소 입 니 다.여러분 이 직접 가서 보 세 요.
https://youzan.github.io/vant/#/zh-CN/actionsheet
그 다음 에 우 리 는 바로 본론 으로 들 어 갑 니 다.이 demo 에서 나 는 이 팝 업 층 을 하나의 구성 요소 로 밀봉 하여 정 의 된 페이지 를 호출 할 수 있 습 니 다.그래서 우리 가 먼저 해 야 할 일 은 페이지 를 정의 하고 구성 요 소 를 정의 하 는 것 입 니 다.다음은 코드 입 니 다.

<template>
 <view class="container">
  <image src="{{localUser.avatarUrl}}" class="backimg" mode="aspectFill">
   <view class='backimg' style='position:absolute;top:0;height:300rpx;width:100%;'></view>
  </image>
  <view class="touxiang_area">
   <view class="touxiang_view">
    <image src="{{localUser.avatarUrl}}" catchtap="changePic"></image>
   </view>
   <view class='touxiang-text'>
    <text catchtap="changeName" class='name'>{{localUser.nickName}}</text>
   </view>
  </view>
  <view style="margin-top:125px;">
   <van-cell-group>
    <block wx:if="{{saLogined}}">
     <van-cell title="     " icon="add-o" >
         
     </van-cell>
    </block>
    <block wx:else>
     <van-cell title="     " icon="add-o" url="/pages/authPage" is-link>
     </van-cell>
    </block>
 
    <van-cell title="  " icon="edit"></van-cell>
   </van-cell-group>
  </view>
  <view class="body">
   <form bindsubmit="formSubmit">
    <view class="message messageTwo">
     <view class="label">  </view>
     <input placeholder="         " placeholder-class="place" name="realName" value="{{realName}}"
         confirm-type="done" />
    </view>
    <view class="message messageThree">
     <view class="label">  </view>
     <input placeholder="       " placeholder-class="place" name="phone" value="{{phone}}" confirm-type="done" />
    </view>
//      vant  cellGroup
//cell           group   ，       ：
//CellGroup   Cell                             
//title                   
//value                         
// location: {
 //    id: -1,
 //    name: '   '
 //  },
 
//             
//@tap          。         invoke             
    <van-cell-group>
     <van-cell
      title="    "
      is-link
      value="{{location.name}}"
      @tap="popup"
     >
     </van-cell>
     </van-cell-group>
 //       ，                 
    <bolck>
 
     <button form-type='submit' class="submit">{{submit ? '    ': '  '}}</button>
    </bolck>
   </form>
  </view>
  
 </view>
//                      showPopup          
//setLocationId               
 
//                                                
//       
 <chooseSchoolPopup :show.sync="showPopup" v-on:setLocationId="setLocationId">
 
 </chooseSchoolPopup>
</template>
<script>
 import wepy from 'wepy';
 
 import {
  SYSTEM_INFO,
  USER_INFO,
  TOKEN
 } from '@/utils/constant';
//request                
 import { request } from '../utils/util';
//         ，              
 import chooseSchoolPopup from '../components/chooseSchoolPopup';
//    page       
 export default class UserInfo extends wepy.page {
//               
  components = {
   chooseSchoolPopup: chooseSchoolPopup,
  };
//            
  data = {
   active: 4,
   localUser: {},
   saLogined: false,
   phone: '',
   realName: '',
   submit: false,
   location: {
    id: -1,
    name: '   '
   },
   showPopup: true,
   location_id:null
  };
//             ，          ui      
//        ，           ，             
  config = {
   navigationBarTitleText: '  ',
   usingComponents: {
    'van-cell': '../components/van/cell/index',
    'van-cell-group': '../components/van/cell-group/index',
    'van-row': '../components/van/row/index',
    'van-col': '../components/van/col/index',
    'van-field': '../components/van/field/index',
    'van-popup': '../components/van/popup/index',
   }
  };
//   onshow                 ，      
  async onShow(){
   let servant = await request('/servant/getSelfInfo');
   this.saLogined = servant.saLogined;
   this.location = servant.location;
   console.log('user onShow', servant);
   this.$apply();
  }
//onload                     
  async onLoad() {
   let user = wepy.getStorageSync(USER_INFO);
   this.localUser = user;
   try {
    let servant = await request('/servant/getSelfInfo');
    console.log('user onLoad', servant);
    this.realName = servant.realName;
    this.phone = servant.phone;
    this.location = servant.location ? servant.location.name : null;
    this.saLogined = servant.saLogined;
    this.$apply();
 
   } catch (e) {
    console.error(e);
   }
  }
 
  //            
  methods = {
//                  ，                 
//          ，            
//             ，        this.$apply();         
   setLocationId(e){
    console.log('setLocationId',e)
    this.location_id =e.id
    this.location = e
   },
//                 ，          
//    invoke   ，
//                 ，    ，            ，
//                   ，             
//              ，               
   popup() {
    this.$invoke('chooseSchoolPopup', 'onPopup');
   },
//      form         
   async formSubmit(e) {
    var value = e.detail.value;
    console.log('formSubmit', e.detail);
    var params = {
     realName: value.realName,
//  id              
     location_id: this.location_id,
     phone: value.phone
    };
    console.log('formSubmit',params)
//             
    try {
     await request('/servant/emdit/self', {
      method: 'POST',
      data: params
     });
     this.submit = true;
     this.$apply();
    } catch (e) {
     console.log(e);
    }
   }
 
  };
 }
</script>
//            less  
<style lang="less">
//         ，        
 @import "../style/global";
 
 .body {
  background: white;
  .message {
   margin-top: 10px;
   display: flex;
   width: 100%;
   height: 100px;
   align-items: center;
   border-bottom: 1px solid #e8e8e8;
   justify-content: space-between;
  }
  .label {
   color: #333;
   margin-left: 20px;
   font-size: @font-size-normal;
  }
  .messageOne {
   image {
    height: 80px;
    width: 120px;
    margin-right: 20px;
    /*border-radius: 50%;*/
   }
  }
  input {
   padding-left: 20px;
   /*flex: 1;*/
   color: #333;
   font-size: @font-size-normal;
   text-align: right;
   margin-right: 20px;
   width: 80%;
  }
  .submit {
   position: fixed;
   bottom: 20px;
   left: 36px;
   width: 90%;
   background-color: #ea3333;
   color: #fff;
  }
 }
 
 .container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
 }
 
 .backimg {
  height: 250px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 1) 98%, #FFFFFF 100%);
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
 }
 
 .touxiang_area {
  height: 250px;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 10px solid #e7e7eb;
  width: 100%;
  vertical-align: middle;
  position: absolute;
 }
 
 .touxiang_view {
  display: inline-block;
  width: 35%;
 }
 
 .touxiang_view > image {
  width: 130px;
  height: 130px;
  border-radius: 100%;
  margin-top: 25%;
  margin-left: 25%;
 }
 
 .touxiang-text {
  display: inline-block;
  width: 400px;
  position: absolute;
  top: 40%;
  /* line-height: 60rpx; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 
 .touxiang-text > text {
  font-size: 32px;
 }
 
 .touxiang_area > text {
  margin-top: 20px;
 }
 
 .city {
  /* margin-top:10rpx; */
  padding-bottom: 15px;
  font-size: 30px;
 }
 
 .city > text {
  font-size: 30px;
 }
 
 .name {
  overflow: hidden;
  width: 250px;
  display: inline-block;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 
 button::after {
  border: none;
 }
 
 input {
  outline: none;
  border: none;
  list-style: none;
 
 }
</style>

이상 은 페이지 와 그 속성 방법 을 정의 하 는 코드 입 니 다.다음은 해당 구성 요소 의 코드 를 살 펴 보 겠 습 니 다.

<template>
//          
//showPopup                 
//onclose            
//position          
 <van-popup show="{{ showPopup }}" bind:close="onPopup" position="bottom">
  <van-radio-group value="{{ lastSchool.id }}">
   <van-cell-group>
//          
    <repeat for="{{ locationList }}">
//                                 ，         item
//    
     <van-cell title="{{item.name}}" clickable @tap="onClick({{item}})">
      <van-radio name="{{item.id}}" >
      </van-radio>
     </van-cell>
    </repeat>
   </van-cell-group>
 
  </van-radio-group>
 </van-popup>
</template>
 
<script>
 
 import wepy from 'wepy';
//   component        
 export default class myTabBar extends wepy.component {
// props            ，                ，            
  props = {
   lastSchool: {
    type: Object,
    twoWay: true
   }
  };
//data     ，               
  data = {
   showPopup: false,
   locationList: []
  };
 
  onLoad() {
 
//                       
//                    
   let locationList = wepy.getStorageSync('locationList');
   console.log('popup load');
   if (locationList) {
    this.locationList = locationList;
   }
  }
  methods = {
//                           ，  showPopup      ，    
//       
   onPopup(event) {
    console.log('close', event);
    this.showPopup = !this.showPopup;
   },
//               
//     emit                         ，       ，      
//               
   onClick(item, e) {
    console.log('item', item, e);
    this.lastSchool = item;
    this.$emit('setLocationId', item);
    this.showPopup = !this.showPopup;
   },
     };
 };
</script>
//           
<style lang="less">
 @import "../style/global";
 .van-radio__icon--checked{
  color:@theme-color !important;
 }
</style>

다음은 몇 장의 효과 도 를 살 펴 보 겠 습 니 다.
이것 은 선택 이 없 을 때의 상황 입 니 다.

선택 시간:

북 대 클릭 후:

마지막 제출:제출 할 때의 인자:

이상 은 간단 한 팝 업 데모 입 니 다.
추가 지식:vantUI 의 sku 구성 요소 사용(사용자 정의 알림 정보 추가,사용자 정의 단추 로 sku 선택 값 가 져 오기)
최근 에 진행 중인 모 바 일 전자상거래 프로젝트 는 vantUI 개발 상점 이 편리 하기 때문에 vue 를 vantUI 와 결합 하여 개발 하기 로 결 정 했 습 니 다.sku 구성 요 소 를 사용 할 때 문제 가 생 겼 습 니 다.먼저 sku 를 사용 한 효과 도 를 살 펴 보 겠 습 니 다.

설계도 다시 볼 게 요.

힌트 가 한 마디 빠 진 것 이 분명 하 다.슬롯 만 써 서 실현 하면 된다.

마지막 으로 최종 효 과 를 볼 게 요.

보충:
선택 한 규격 가 져 오 는 방법
1,우선 탭 에 ref 속성 추가

2.규격 을 가 져 올 이벤트 에서 this.$refs.(ref 의 속성 값)를 직접 가 져 오 면 됩 니 다.(공식 적 으로 제공 하 는 getSkuData 방법)가 져 오 면 됩 니 다.

코드 예 시 는 다음 과 같다.

인쇄 결과:

이상 의 이 wepy-vantUI 로 상 탄 목록 을 실현 하고 해당 하 는 값 조작 을 선택 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.