nsgk_mobile/src/views/project/projectDetail.vue

<template>
  <div class="app-container">
    <van-nav-bar
      title="项目详情"
      left-arrow
      fixed
      placeholder
    />
    <van-tabs scrollspy sticky color="#007b76" >
      <van-tab title="竞拍信息" title-style="font-size:12px;">
        <van-swipe class="my-swipe" height="235" indicator-color="white" @change="onChange">
          <van-swipe-item><van-image src="../../static/images/index/banner.png" height="235" /></van-swipe-item>
          <van-swipe-item><van-image src="../../static/images/index/banner.png" height="235" /></van-swipe-item>
          <van-swipe-item><van-image src="../../static/images/index/banner.png" height="235" /></van-swipe-item>
          <van-swipe-item><van-image src="../../static/images/index/banner.png" height="235" /></van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/4</div>
          </template>
        </van-swipe>
        <van-notice-bar color="#fff" background="#007E72" left-icon="clock-o">
          正在进行今天12：00结束
        </van-notice-bar>
        <div class="information">
          <van-row>
            <van-col span="24" class="title">【出租】管家堡乡500亩水田</van-col>
          </van-row>
          <van-row>
            <van-col span="4">距结束</van-col>
            <van-col span="20"><van-count-down :time="30 * 60 * 60 * 1000" format="DD 天 HH 时 mm 分 ss 秒" /></van-col>
          </van-row>
          <van-row>
            <van-col span="4">挂牌价</van-col>
            <van-col span="20" class="price"><span>500</span> 元/亩/年</van-col>
          </van-row>
          <van-row>
            <van-col span="4">保证金</van-col>
            <van-col span="20" class="money"><span>5000</span> 元</van-col>
          </van-row>
        </div>
        <div class="lead">
          <van-row gutter="20">
            <van-col span="3"><van-image src="../../static/images/icon/phone.png" style="vertical-align: text-top;" /></van-col>
            <van-col span="4">J1433</van-col>
            <van-col span="4">领先</van-col>
            <van-col span="4">06.20</van-col>
            <van-col span="4">22:46:38</van-col>
          </van-row>
        </div>
        <div class="detail">
          <van-row>
            <van-col span="24"><span>报名开始时间：</span>2021-04-1915:18:53</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>报名截止时间：</span>2021-04-1915:20:53</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>竞价开始时间：</span>2021-04-1915:25:53</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>竞价截止时间：</span>2021-04-1915:35:53</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>竞价方式：</span>自由竞价/阶梯竞价</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>阶梯价（加价幅度）：</span>¥1,000</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>延时周期：</span>2分钟报名<van-icon name="question" size="15" style="top: 3px;left: 5px;" color="#CDCDCD"/></van-col>
          </van-row>
        </div>
      </van-tab>
      <van-tab title="标的物介绍" title-style="font-size:12px;">
        <p class="delTitle">标的物介绍</p>
        <div class="introduce">
          <van-row>
            <van-col span="24" style="color:#8A8A8A;font-size: 0.4rem;">项目挂牌转出方简况及公告内容</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>转出方名称</span>张三丰</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>住址（地址）</span>威海市环翠区文化西路39号-5</van-col>
          </van-row>
          <van-row>
            <van-col span="14"><span>经济类型</span>个人</van-col>
            <van-col span="10"><span>注册账号</span>13306310001</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>注册资本（万元）</span>2000万</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>组织机构代码证号</span>SI4761215652</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>法定代表人/负责人</span>张三丰</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>身份证号</span>371481199001012400</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>联系电话</span>13306310001</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>电子邮箱</span>1027238303@qq.com</van-col>
          </van-row>
          <van-row>
            <van-col span="14"><span>项目类型</span>农户承包土地经营权</van-col>
            <van-col span="10"><span>农地性质</span>耕地</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>转出项目名称</span>管家堡乡转500亩土地</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>坐落</span>兴和县城关镇阳坡村委会</van-col>
          </van-row>
          <van-row>
            <van-col span="14"><span>是否属再次转出</span>否</van-col>
            <van-col span="10"><span>前次转出方式</span>无</van-col>
          </van-row>
          <van-row>
            <van-col span="14"><span>拟转出方式</span>出租</van-col>
            <van-col span="10"><span>拟转出面积/数量</span>500亩</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>拟转出期限</span>2021-05-24至2039-05-24共18年</van-col>
          </van-row>
          <van-row>
            <van-col span="24"><span>涉及农户数</span>1户</van-col>
          </van-row>
          <van-row>
            <van-col span="24" style="color:#007E72;">标的物信息</van-col>
          </van-row>
          <div class="project_info">
            <van-row>
              <van-col span="14"><span>标的物名称</span>张三丰地</van-col>
              <van-col span="10"><span>面积/数量</span>50亩</van-col>
            </van-row>
            <van-row>
              <van-col span="24"><span>备注</span></van-col>
            </van-row>
          </div>
          <div class="project_info">
            <van-row>
              <van-col span="14"><span>标的物名称</span>张三丰地</van-col>
              <van-col span="10"><span>面积/数量</span>50亩</van-col>
            </van-row>
            <van-row>
              <van-col span="24"><span>备注</span></van-col>
            </van-row>
          </div>
        </div>
      </van-tab>
      <van-tab title="标的物图片" title-style="font-size:12px;">
        <p class="delTitle">标的物图片</p>
        <van-image src="../../static/images/index/detailImg.png" style="vertical-align: text-top;" />
        <van-image src="../../static/images/index/detailImg.png" style="vertical-align: text-top;" />
        <van-image src="../../static/images/index/detailImg.png" style="vertical-align: text-top;" />
      </van-tab>
      <van-tab title="竞买须知" title-style="font-size:12px;">
        <p class="delTitle">竞买须知</p>
        <div class="notice">
          <p>一、竞价保证金缴付方式及要求：</p>
          <p>竞买人为个人的，可选择银行柜台转账、网上银行转账两种之一的方式缴付竞价保证金，不得采用该两种方式以外的其他方式缴付竞价保证金。 竞买人为单位的，可选择银行柜台转账、网上银行转账两种之一的方式缴付竞价保证金，不得采用该两种方式以外的其他方式缴付竞价保证金。 如果竞买人未按规定方式缴付竞价保证金，将会造成竞价保证金无法退还竞价人，由此产生的一切后果和责任，由竞买人自行承担。</p>
          <p>1.通过银行柜台转账的，在缴款时须在银行进账单或汇款凭证的备注/用途/附言栏中准确填写项目编号。</p>
          <p>2.通过网上银行转账的，在缴款时须在网上银行支付界面的备注/用途/银行附言栏中准确填写项目编号。</p>
          <p>二、竞价保证金缴付注意事项</p>
          <p>1.竞买人应填写并提示竞价保证金汇出银行将其填写的备注信息准确、完备地发送至农交所上述账户。若因竞买人未按要求填写相关信息而导致其无法参与竞价的，由此产生的一切后果和责任由竞买人自行承担。</p>
          <p>2.竞买人应妥善保管竞价保证金缴款凭证，该凭证将作为查询及办理相关手续的依据之一。</p>
          <p>三、报名所需材料：</p>
          <p>1.黑龙江农村产权流转交易意向受让申请书（首页资料下载处下载）。</p>
          <p>2.有效资格证明文件：</p>
          <p>（1）受让方为个人的，需提供本人身份证；</p>
          <p>（2）受让方为单位的，需提供有效期内的营业执照副本、机构代码证、法定代表人身份、合作社章程/公司章程（封面盖章，骑缝盖章）、合作社成员大会决议/股东会决议/董事会决议。</p>
          <p>3.缴款凭证。</p>
          <p>4.竞投保证金退还所需报名人本人名下的有效银行卡。</p>
          <p>四、报名：</p>
          <p>竞价保证金缴纳后：</p>
          <p>1.线下报名：携带竞价保证金缴款凭证的原件以及报名所需材料到镇（街）、区（县）、市、省级平台进行报名。到报名地点领取或者在本页面下方“竞投文件下载”处下载竞投文件。</p>
          <p>2.线上报名：点击“线上报名”按钮，填写报名表，以附件形式上传竞价保证金缴款凭证和报名所需材料的照片， 竞价账户密码以短信形式进行发送。在本页面下方“竞投文件下载”处下载。</p>
          <p>五、项目报名时间截止后，仅有一名意向受让方报名的，直接与转出方协议签约；有两名及两名以上意向受让方报名的，实行网络电子竞价或农交所同意的其他公开方式竞价。</p>
          <p>六、实行网上电子竞价的项目：竞投人登录农村产权交易中心网站，进入竞价大厅找到已报名项目，在竞投报价截止时间之前进行报价。竞投结束后，系统按竞投报价从高到低排序，选择报价最高者竞得项目。竞投报价不能低于项目挂牌价格，逾期报价或不符合规定的报价做无效处理，竞投人所交保证金转作违约金，作为对交易中心的违约赔偿，不予退还。</p>
          <p>七、受让方承诺在竞价成功后严格按照转出方的要求予以开发利用，且不用于非农业建设，不改变原用途，不破坏农业综合生产能力，不破坏生态环境，对于需提供开发利用规划的，及时提交规划文件。</p>
          <p>八、受让方放弃竞得项目的、无正当理由不与出让方签订合同的、在签订合同时向出让方提出附加条件或者更改合同实质性内容的，竞投保证金不予返还。</p>
          <p>九、法定节假日、公休日不受理报名。</p>
        </div>
      </van-tab>
      <van-tab title="竞价记录" title-style="font-size:12px;">
        <p class="delTitle">竞价记录</p>
        <div class="biddingList">
          <table width="100%" cellspacing="0">
            <tr>
              <td>出价人账号</td>
              <td>姓名</td>
              <td>出价价格</td>
              <td>状态</td>
              <td>出价时间</td>
            </tr>
            <tr>
              <td>15314031621</td>
              <td>张三</td>
              <td>45,101</td>
              <td style="color:#C21F3A">领先</td>
              <td>2021-04-20 10:55:13</td>
            </tr>
            <tr>
              <td>15314031621</td>
              <td>张三三</td>
              <td>45,101</td>
              <td></td>
              <td>2021-04-20 10:55:13</td>
            </tr>
            <tr>
              <td>15314031621</td>
              <td>张三</td>
              <td>45,101</td>
              <td></td>
              <td>2021-04-20 10:55:13</td>
            </tr>
          </table>
        </div>
      </van-tab>
    </van-tabs>
    <div style="height: 2rem;"></div>
    <div class="bottomBtn">
      <van-row>
        <van-col span="8" style="margin-top: 4px;" @click="showPopup">
          <van-image src="../../static/images/icon/clock.png" style="vertical-align: text-bottom;" />
          <p style="line-height: 0.2rem;color: #999999">提醒</p>
        </van-col>
        <van-col span="16">
          <van-button round color="#C21F3A" block>
            立即报名<br/>
            <span style="font-size: 10px">保证金￥30,000</span>
          </van-button>
        </van-col>
      </van-row>
      <van-row style="display: none;">
        <van-col span="3" style="text-align: center;line-height: 1rem">
          <van-button color="#e2e2e2" icon="plus" size="mini"></van-button>
        </van-col>
        <van-col span="18">
          <van-button round color="#C21F3A" block>
            <p>出价</p>
            <p>434,000</p>
          </van-button>
        </van-col>
        <van-col span="3" style="text-align: center;line-height: 1rem">
          <van-button color="#e2e2e2" icon="minus" size="mini"></van-button>
        </van-col>
      </van-row>
    </div>
    <van-popup v-model="show" class="popup" closeable>
      <van-image src="../../static/images/icon/success.png"/>
      <p class="popupTit">提醒设置成功</p>
      <p class="popupContent">系统将按要求提醒您竞拍</p>
      <van-button round color="#C21F3A" block class="iKnow">
        我知道了
      </van-button>
      <p class="updatePopup">修改提醒方式</p>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "projectDetail",
  data() {
    return {
      current: 0,
      show: false,
    };
  },
  mounted() {

  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
}
.custom-indicator {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 0px 20px;
  font-size: 12px;
  /*rgba(0, 0, 0, 0.1)*/
  background: rgba(0, 0, 0, 0.2);
  color: #FFF;
  border-radius: 20px;
  line-height: 0.5rem;
}
.title{
  font-size: 0.45rem;
}
.my-swipe{
  width: 100%;
}
.my-swipe .van-swipe-item .van-image{
  width: 100%;
}
.information{
  background-color: #FFF;
  margin-top: 0.3rem;
  padding: 0.4rem 0.5rem;
}
.van-row{
  line-height: 0.7rem;
}
.price{
  color: #C21F3A;
}
.price span{
  font-size: 0.5rem;
  font-weight: bold;
}
.money{
  color: #C21F3A;
}
.money span{
  font-size: 0.5rem;
  font-weight: bold;
}
.van-count-down{
  line-height: 0.7rem;
}
.lead{
  background-color: #FFF;
  margin-top: 0.3rem;
  padding: 0.1rem 0.5rem;
  color: #C21F3A;
}
.detail{
  background-color: #FFF;
  margin-top: 0.3rem;
  padding: 0.2rem 0.5rem;
}
.detail span{
  color: #8A8A8A;
}
.delTitle{
  font-size: 0.4rem;
  color: #007E72;
  padding: 0.2rem 0.5rem;
}
.introduce{
  padding: 0.2rem 0.5rem 0.5rem;
  background-color: #FFF;
}
.introduce span{
  color: #8A8A8A;
  margin-right: 20px;
}
.project_info{
  border: 1px solid #DCDCDC;
  padding: 0px 20px;
  margin-top: 10px;
  border-radius: 10px;
}
.notice{
  padding: 0.5rem;
  background-color: #FFF;
}
.notice p{
  line-height: 0.7rem;
}
.biddingList{
  padding: 0.5rem;
  background-color: #FFF;
  margin-bottom: 0.4rem;
}
.biddingList table{
  text-align: center;
}
.biddingList table td{
  text-align: center;
  padding: 10px 0px;
}
.biddingList table tr:first-child td{
  background-color: #007E72;
  color: #FFF;
}
.bottomBtn{
  padding: 0.2rem 0.5rem;
  background-color: #FFF;
  position: fixed;
  bottom: 0;
  width: 100%;
}
  .popup{
    text-align: center;
    padding: 0.5rem;
    border-radius: 20px;
    width: 70%;
    padding-top: 1.5rem;
  }
  .popupTit{
    color: #007E72;
    font-size: 0.4rem;
    line-height: 0.9rem;
  }
  .popupContent{
    color: #666666;
  }
  .iKnow{
    margin-top: 1rem;
  }
  .updatePopup{
    color: #007E72;
    margin-top: 0.5rem;
  }
</style>