YXGJ/components/bottomModules/bottom2.vue

<template>
  <view class="box">
    <view class="title"> 免费帮您获取装修预算 </view>
    <view class="total"> 今日已有 <text class="num">258</text>位业主申请 </view>
    <view
      class="input-box"
      hover-class="navigator-hover"
      @click="areaFocus = true"
    >
      <input
        type="digit"
        @input="onInput"
        :focus="areaFocus"
        placeholder="您房子的面积是多少？"
        style="color: #fff"
        placeholder-class="placeholder"
      />
      <text class="unit"> m² </text>
    </view>
    <view
      class="input-box"
      hover-class="navigator-hover"
      @click="showBathroom = true"
    >
      <view class="value">
        {{ submitData.bathroom }}
      </view>
      <text class="iconfont icon-a-wodetiaozhuan" />
    </view>
    <u-action-sheet
      :actions="bathroomList"
      :show="showBathroom"
      cancelText="取消"
      @close="showBathroom = false"
      @select="onSelect($event, 'bathroom')"
    />

    <view
      class="input-box"
      hover-class="navigator-hover"
      @click="showWall = true"
    >
      <view class="value">
        {{ submitData.wall }}
      </view>
      <text class="iconfont icon-a-wodetiaozhuan" />
    </view>

    <u-action-sheet
      :actions="wallList"
      :show="showWall"
      cancelText="取消"
      @close="showWall = false"
      @select="onSelect($event, 'wall')"
    />

    <view class="radio-box">
      <u-radio-group v-model="submitData.type">
        <u-radio
          v-for="item in radioList"
          style="margin-right: 20px"
          :key="item.name"
          activeColor="#E3041F"
          labelColor="#FFFFFF"
          :customStyle="item.customStyle"
          :labelSize="tovw(14)"
          :label="item.name"
          :name="item.name"
        />
      </u-radio-group>
    </view>
    <view class="submit" hover-class="navigator-hover" @click="toEstimate">
      立即估算报价 <text class="iconfont icon-a-wodetiaozhuan" />
    </view>
    <view class="evenMore">
      更多阳台空间、全屋顶墙柜门等报价，请咨询当地专卖店
    </view>
  </view>
</template>

<script>
export default {
  name: "bottom2",
  data() {
    return {
      areaFocus: false,
      submitData: {
        area: "100",
        wall: "1个背景墙",
        bathroom: "1厨1卫",
        type: "毛坯房装修",
      },
      radioList: [
        {
          name: "毛坯房装修",
          customStyle: { marginRight: this.tovw(26) },
        },
        {
          name: "旧房装修",
          customStyle: { marginRight: this.tovw(26) },
        },
        {
          name: "精装房焕新",
        },
      ],
      showWall: false,
      showBathroom: false,
      bathroomList: [
        {
          name: "0厨0卫",
        },
        {
          name: "1厨1卫",
        },
        {
          name: "1厨2卫",
        },
        {
          name: "1厨3卫",
        },
        {
          name: "1厨>3卫",
        },
      ],
      wallList: [
        {
          name: "0个背景墙",
        },
        {
          name: "1个背景墙",
        },
        {
          name: "2个背景墙",
        },
        {
          name: "3个背景墙",
        },
        {
          name: ">3个背景墙",
        },
      ],
    };
  },
  methods: {
    onSelect({ name }, key) {
      this.submitData[key] = name;
    },
    onInput(e) {
      this.submitData.area = e.detail.value;
      console.log("submitData", this.submitData);
    },
    toEstimate() {
      uni.navigateTo({
        url: "/store/budget/result?data=" + JSON.stringify(this.submitData),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  padding: 30px 0;
  background: radial-gradient(100% 0% at 50% 50%, #7e7e7e 0%, #787878 100%);

  /deep/.placeholder {
    color: #fff;
    opacity: 0.6;
  }

  .title {
    line-height: 22px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 1px;
  }

  .total {
    line-height: 17px;
    font-family: PingFang SC, PingFang SC;
    font-size: 12px;
    color: #ffffff;
    margin-top: 5px;
    letter-spacing: 1.5px;

    .num {
      color: #fc9228;
      padding: 0 5px;
      letter-spacing: 0px;
    }
  }

  .input-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 315px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    padding: 0 10px;
    margin-top: 10px;

    .value {
      color: #ffffff;
      font-size: 14px;
    }

    .iconfont {
      color: #ffffff;
      transform: rotate(90deg);
    }

    .unit {
      color: #ffffff;
    }
  }

  .radio-box {
    height: 20px;
    line-height: 20px;
    margin-top: 20px;
  }

  .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 315px;
    height: 45px;
    background: #fc9228;
    border-radius: 2px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    margin-top: 20px;

    .iconfont {
      font-size: 12px;
      margin-left: 4px;
    }
  }

  .evenMore {
    margin-top: 10px;
    line-height: 17px;
    font-family: PingFang SC, PingFang SC;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>