小程序实习生实现手机机型预约

(代码略多，希望有大神能够提供新的思路或者建议)

页面效果如图：

具体的布局样式实现不再论述，主要是对于品牌和机型的选择与初始化
实现面临的问题：
1.页面加载后品牌默认为第一个品牌，机型也默认为第一个品牌的机型。
2.点击切换品牌展示不同的机型。
3.选择品牌和机型后获取对应的值。
4.点击立即预约后恢复默认值。
实现思路
1.给view设置样式，呈现选中效果，设置标识符ppIndex，点击对应的view更改ppIndex的值，再判断按钮本身的index与ppIndex相同的话展示选中效果

 <view class="jxbtn {{ppIndex==index?'checked':''}}"wx:for="{{pp_array}}" data-value="  {{item}}" wx:for-index="index" data-index="{{index}}" bindtap="pp_checked" wx:key="index">
      {{item}} 
 </view>  

2.加载页面时请求数据，将不同品牌的机型放进一个数组中，根据不同的key按需展示 onload请求数据成功后代码：

        success: res => {
         console.log(res)
         if (res.data.code == '0') {    
          //获取图片
           let imgArray = []
           let ppArray = []//品牌数组
           let modelArray =[]//机型数组
           for(let i in res.data.phoneInfo){
             console.log(i)
             imgArray.push(res.data.phoneInfo[i][0].detail_img_url)
             ppArray.push(i)
             modelArray.push(res.data.phoneInfo[i][0].model_name)              
           }
           this.setData({
               ppIndex:0,//默认品牌索引为第一个
               imgUrls:imgArray,//手机图片的url
               pp_array:ppArray,//获取品牌数组
               phoneInfo: res.data.phoneInfo,//获取机型对象
               jxArray:res.data.phoneInfo[ppArray[0]],//设置默认为第一个品牌的所有机型
               brand:ppArray[0],//默认品牌为第一个
               model:modelArray[0],////设置默认为第一个品牌的第一个机型
               modelArray//获取机型名称                               
             })
            console.log(this.data.brand,this.data.model,this.data.jxArray)       
           }else{
             wx.showToast({
               title: '获取失败',
               icon:'none'
             })
           }
       }

wxml里品牌部分代码

<view class="jxbtn {{jxIndex==index?'checked':''}}"wx:for="{{jxArray}}" data-value="{{item.model_name}}" wx:for-index="index" data-index="{{index}}" bindtap="jx_checked" wx:key="index">
        {{item.model_name}} 
      </view>

3.给品牌的view设置点击事件

//选择机型改变样式
   // 点击品牌
   pp_checked(e){
     // console.log(this.data.phoneInfo)
     let ppType = e.currentTarget.dataset.value
     this.setData({
       brand:e.currentTarget.dataset.value,//获取选中品牌的值
       ppIndex:e.currentTarget.dataset.index,//获取选中view的索引
       jxIndex:0,//设置机型的默认index
       jxArray:this.data.phoneInfo[ppType],//获取机型数组
       model:this.data.phoneInfo[ppType][0].model_name//设置默认机型为第一个
     })
   },

4.给机型的view设置点击事件

//点击机型
   jx_checked(e){
    
     this.setData({
       model:e.currentTarget.dataset.value,//获取选中机型名称
       jxIndex:e.currentTarget.dataset.index//获取选中机型索引
     })
    
   },

5.给立即预约按钮添加点击事件传输数据成功后恢复默认值

            success:res=>{
         this.setData({               
           yyName:'',
           yyTel: '',
           yyAddr:'',
           ppIndex:0,
           jxIndex:0,
           brand:this.data.pp_array[0],//设置默认品牌为第一个
           model:this.data.modelArray[0],//设置默认机型为第一个品牌的第一个机型
           jxArray:this.data.phoneInfo[this.data.pp_array[0]],//设置默认展示第一个品牌的机型
        })
       
       }