taro开发微信小程序的实践(2)

getMoviesOnList(){ let cityId = this.state.id Taro.showLoading({ title:"加载中" }); Taro.request({ url:"https://m.maoyan.com/ajax/movieOnInfoList?token=", method:"GET", header:{ "Cookie":`_lxsdk_cuid=164b6cae2cac8-02b7b032f571b5-39614706-1fa400-164b6cae2cbc8; v=3; iuuid=1A6E888B4A4B29B16FBA1299108DBE9CA19FF6972813B39CA13A8D9705187374; revrev=76338a29; _lx_utm=utm_source%3DBaidu%26utm_medium%3Dorganic; webp=true; __mta=3463951.1532075108184.1533098338076.1533118040602.20; _lxsdk=1A6E888B4A4B29B16FBA1299108DBE9CA19FF6972813B39CA13A8D9705187374; from=canary; selectci=true; __mta=3463951.1532075108184.1533118040602.1533118773295.21; _lxsdk_s=164f4f4c9e9-45e-d1b-46%7C%7C50; ci=${cityId}` } }).then(res=>{ if(res.statusCode == 200){ Taro.hideLoading(); res.data.movieList.forEach((value)=>{ let arr = value["img"].split("w.h"); value["img"] = arr[0]+"128.180"+ arr[1] }); this.setState({ onList:res.data.movieList, startIndex:res.data.movieList.length, lastIndex:res.data.total -1, movieIds:res.data.movieIds }); }else{ this.setState({ onList:null, movieIds:null }) } }) }

seat (影院座位页)

自己模拟实现了一个推荐座位与选座功能。为了实现座位信息选择,使用了二维数组对座位信息已选和未选,其中0代表该处拥有座位、E代表该处为空。其中数组的行代表了影院的第几排,嵌套的数组的索引代表了第几列。

[ [0,0,0,0,0,0], [E,0,0,E,0,0], [0,0,0,0,0,0], [E,0,0,E,0,0] ]

初始化座位信息, https://m.maoyan.com/ajax/seatingPlan?timestamp=${Date.now()} 获取猫眼电影线上座位信息接口, cityId 是当前定位城市ID, ci 是影院ID。 initParams 是获取线上座位信息接口, seatData 是获取到的影院座位信息,需要对座位信息做进一步的加工。遍历座位信息,如果字段 st 为N,则arr设置为0(代表具有座位并未选),为E则为该处不具有座位。

initParams(){ const params = this.$router.params; const self = this; Taro.setNavigationBarTitle({ title:params.cinemaName }) Taro.showLoading({ title:"加载中..." }); Taro.request({ url:`https://m.maoyan.com/ajax/seatingPlan?timestamp=${Date.now()}`, method:'post', header:{ 'Cookie': 'uuid_n_v=v1; iuuid=26F6BA50506A11E9A973FDD3C7EBDF0E29C7297EC72D4F77A53F9445EF0EE9F3; webp=true; ci=20%2C%E5%B9%BF%E5%B7%9E; _lxsdk_cuid=169be42cf28c8-098c7e821e63bd-2d604637-3d10d-169be42cf29c8; _lxsdk=26F6BA50506A11E9A973FDD3C7EBDF0E29C7297EC72D4F77A53F9445EF0EE9F3; from=canary; uid=124265875; token=9P1-5VoykD_qrpBxpTvSoVhMwzQAAAAAJwgAAE2za6eVZdI-oORrTHb8dP4JEMYCiza0zSSNoRkHx4qajm2Nu6ClhU00u5A1avIySg; __mta=250960825.1553675243337.1553675275840.1553675275842.6; user=124265875%2C9P1-5VoykD_qrpBxpTvSoVhMwzQAAAAAJwgAAE2za6eVZdI-oORrTHb8dP4JEMYCiza0zSSNoRkHx4qajm2Nu6ClhU00u5A1avIySg; _lxsdk_s=169be42cf2b-ca7-4ca-570%7C%7C14' }, data:{ cityId:params.cityId, ci:params.ci, seqNo:params.seqNo } }).then(res=>{ if(res.statusCode ==200){ Taro.hideLoading(); const seatData = res.data.seatData; const seatArray = []; seatData.seat.sections[0].seats.map(item=>{ let arr = []; item["columns"].map(seat=>{ if(seat["st"] == "N"){ arr.push('0'); }else{ arr.push('E') } }) seatArray.push(arr); }) self.setState({ seatData:seatData, seatArray:seatArray }); } }) }

做了影院座位信息是否为空筛选之后,接下来就是选座功能。其中影院座位的选择与取消使用了 buySeat 进行保存。 selectSeat 函数是选择座位, row :代表选择第几行, column 代表第几列, item 是该座位是否被选的信息(0为未选表示可选择、2为已选表示不可再选)

selectSeat(row,column,item){ const self = this; const arr = this.state.seatArray; // item代表该座位是否可选 if(item == 0){ if(self.state.buySeat.length ==4){ Taro.showToast({ title: '最多选择4个座位', duration: 2000 }) return false; }else{ let buySeat = self.state.buySeat; arr[row][column]= '2'; buySeat.push({ "row":row, "column":column }); self.setState({ buySeat:buySeat, seatArray:arr }) } }else{ arr[row][column]= '0'; const buySeat = this.state.buySeat; let tmpArr = this.state.buySeat; buySeat.map((value,index)=>{ if(value["row"]== row && value["column"]== column){ tmpArr.splice(index,1); self.setState({ buySeat:tmpArr, seatArray:arr }) } }) } }

推荐座位功能实现, getRecomment 是推荐位实现,现在至于1人、2人、3人、4人推荐。情侣位实现没有抓取到猫眼的推荐接口信息。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/fff51a20bfa2b1b5888e6395957ab41c.html