微信小程序选择城市弹窗

wxml

//引用
<wxs module="utils" src="./form.wxs"></wxs>

 <view bindtap="openCity">
         所在城市: <text wx:if="{
  {!province&&!cityName}}">请选择</text>
         <text wx:if="{
  {province}}&&{
  {cityName}}">{
  {province}}{
  {cityName}}</text>
     </view>

 <!-- 选择城市弹出层 -->

    <van-popup show="{
  { cityShow }}"  position="bottom"
  custom-style="height: 60%;" bind:close="onCityClose">
  
  <view class="top">
      <view class="left"  bindtap="back">
          返回
      </view>
      <view class="center" wx:if="{
  {!province}}">
          请选择地址
      </view>
      <view class="center" wx:else>
          {
  {province}}
      </view>
      <view class="right" bindtap="onCityClose">
          取消
      </view>
  </view>
  <view class="city" wx:if="{
  {!province}}" >
      <view class="item" wx:for="{
  {city}}" wx:key="index" bindtap="onProvince" data- 
      name="{
  {item}}">
          {
  {item.province}}
      </view>
      
  </view>

  <view class="city" wx:else >
      <view wx:for="{
  {cityList}}"   class="city_item"   wx:key="id" bindtap="onCity" 
       data-name="{
  {item}}">
         
         {
  {utils.toSubString(item)}}
        
      </view>
      
  </view>
  </van-popup>

wxss

.top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid rgb(238, 236, 236);
}
.left{
    background-color: rgb(242,241,241);
    color: gray;
    width: 120rpx;
    line-height: 60rpx;
    text-align: center;
    height: 60rpx;
    margin-left: 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    font-size: 26rpx;
}
.right{
    background-color: rgb(242,241,241);