uniapp 小程序 手写弹框单选选择器

先看效果：

直接贴代码：

<template>
  <!-- 退款申请页面 -->
  <view>
    <nav-bar title="退款申请"></nav-bar>
    <view class="application">
      <view class="goods">
        <view class="houseImg">
          <image :src="orderData.imgSrc" mode="scaleToFill" />
        </view>
        <view>
          <view style="color: #333; font-size: 32rpx; font-weight: 700">{{
            orderData.floorName
          }}</view>
          <view>数量：1</view>
          <view
            >总退款金额：<text
              style="color: #fe3d3d; font-size: 32rpx; font-weight: 700"
              >￥1670000.00</text
            ></view
          >
        </view>
      </view>
      <view class="goodDesc"
        >温馨提示：申请退款后，我们会在1-3个工作日给您处理，请耐心 等待！</view
      >
      <!-- 退款理由 -->
      <view class="reason">
        <view style="margin-right: 20rpx">退款理由：</view>
        <view>
          <input
            type="text"
            placeholder="请选择"
            disabled="true"
            v-model="a"
            :border="border"
            class="refoundInput"
            @click="chooseShow"
          />
        </view>
        <u-icon name="arrow-down" color="#333" size="28" class="down"></u-icon>
        <text style="color: #ff3b3b; margin-left: 12rpx">*</text>
        <!-- 退款理由弹框 -->
        <view>
          <u-popup
            v-model="show"
            mode="bottom"
            border-radius="20"
            height="686rpx"
            closeable="true"
          >
            <view class="refundTitle">退款原因</view>
            <view>
              <view
                class="reasonList"
                v-for="(item, index) in refundList"
                v-bind:key="index"
              >
                <view style="line-height: 89rpx">{{ item.name }}</view>
                <view class="chooseYes" @click="selected(item, index)">
                  <image
                    :src="item.status == true ? yes : no"
                    mode="scaleToFill"
                  />
                </view>
              </view>
            </view>
            <view class="submit" @click="commit">确认</view>
          </u-popup>
        </view>
      </view>
      <view style="margin-top: 34rpx">
        <textarea
          type="text"
          v-model="reasonrefund"
          placeholder="请输入退款理由~"
          class="reasonDesc"
        />
      </view>
      <view class="submitapply" @click="submitapply">提交申请</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderData: {},
      a: "",
      show: false,
      border: false,
      pitch: "",
      yes:
        "https://myzf-oss.oss-cn-hangzhou.aliyuncs.com/myzf_wechat/xuanzhong.png",
      no:
        "https://myzf-oss.oss-cn-hangzhou.aliyuncs.com/myzf_wechat/weixuanzhong.png",
      reasonrefund: "", //退款理由
      refundList: [
        {
          name: "小区配套设施不完善",
          value: 1,
          status: false,
        },
        {
          name: "经纪人服务不佳",
          value: 2,
          status: false,
        },
        {
          name: "平台信息与实物不符",
          value: 3,
          status: false,
        },
        {
          name: "户型不佳",
          value: 4,
          status: false,
        },
        {
          name: "其他",
          value: 5,
          status: false,
        },
      ],
    };
  },
  onLoad(options) {
    this.orderData = JSON.parse(decodeURIComponent(options.data));
  },
  methods: {
    chooseShow() {
      console.log(123);
      this.show = true;
    },
    selected(data, index) {
      console.log(data);
      this.pitch = data.name;
      for (let a = 0; a < this.refundList.length; a++) {// for循环判断用户点击了那个修改其样式
        if (a == index) {
          this.refundList[a].status = true;
        } else {
          this.refundList[a].status = false;
        }
      }
    },
    //弹框提交
    commit() {
      this.a = this.pitch;
      this.show = false;
    },
    // 提交申请按钮
    submitapply(){

    }
  },
};
</script>

<style scoped>
.application {
  width: 100%;
  padding: 0 32rpx;
  box-sizing: border-box;
}
.goods {
  width: 100%;
  height: 220rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(231, 242, 255, 1);
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 32rpx;
  margin-top: 40rpx;
  margin-bottom: 28rpx;
  display: flex;
  align-items: center;
}
.houseImg {
  width: 140rpx;
  height: 140rpx;
  margin-right: 25rpx;
}
.houseImg image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.goodDesc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 44rpx;
}
.reason {
  display: flex;
  align-items: center;
  position: relative;
}
.refoundInput {
  /* border: 2rpx solid #ccc; */
  width: 495rpx;
  height: 68rpx;
  background: #fff;
  border-radius: 10rpx;
  padding-left: 30rpx;
}
.down {
  position: absolute;
  top: 20rpx;
  right: 50rpx;
}
.refundTitle {
  height: 106rpx;
  line-height: 106rpx;
  text-align: center;
  font-size: 34rpx;
  color: #333;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  margin: 0 32rpx;
}
.reasonList {
  margin: 0 64rpx;
  color: #333;
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chooseYes {
  width: 32rpx;
  height: 32rpx;
}
.chooseYes image {
  width: 100%;
  height: 100%;
}
.submit {
  width: 686rpx;
  height: 88rpx;
  background: #66baff;
  border-radius: 10rpx;
  color: #fff;
  text-align: center;
  line-height: 88rpx;
  margin: 30rpx 32rpx 0 32rpx;
}
.reasonDesc {
  width: 100%;
  height: 260rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(231, 242, 255, 1);
  border-radius: 10rpx;
  overflow-y: auto;
  padding: 23rpx 32rpx;
  text-align: justify;
}
.submitapply {
  width: 686rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #66baff;
  border-radius: 10rpx;
  color: #fff;
  position: fixed;
  bottom: 40rpx;
}
</style>