竞价大厅静态页面

src/components/biddingHall/biddingHallApply.vue

@@ -0,0 +1,241 @@
+<template>
+  <div>
+    <van-search
+      v-model="value"
+      shape="round"
+      background="#fff"
+      placeholder="请输入搜索关键词"
+    />
+    <van-row>
+      <van-dropdown-menu >
+        <van-dropdown-item v-model="value1" :options="option1" />
+        <van-dropdown-item v-model="value2" :options="option2" />
+        <van-dropdown-item v-model="value3" :options="option3" />
+      </van-dropdown-menu>
+    </van-row>
+    <van-row type="flex" justify="center" class="biddingPorcessTitle">
+      <van-col span="24">竞价流程</van-col>
+    </van-row>
+    <van-row type="flex" justify="space-around" class="biddingPorcessContent">
+      <van-col span="1">
+      </van-col>
+      <van-col span="3">
+        <div class="biddingPorcess">
+          <van-image
+            class="biddingPorcess_img"
+            :src="iconList.bjd"
+          />
+        </div>
+        <p class="biddingPorcess_text">第一步</p>
+        <p class="biddingPorcess_text">查看项目</p>
+      </van-col>
+      <van-col span="3">
+        <div class="biddingPorcess">
+          <van-image
+            class="biddingPorcess_img"
+            :src="iconList.bjd"
+          />
+        </div>
+        <p class="biddingPorcess_text">第二步</p>
+        <p class="biddingPorcess_text">注册报名</p>
+      </van-col>
+      <van-col span="3">
+        <div class="biddingPorcess">
+          <van-image
+            class="biddingPorcess_img"
+            :src="iconList.bjd"
+          />
+        </div>
+        <p class="biddingPorcess_text">第三步</p>
+        <p class="biddingPorcess_text">交保证金</p>
+      </van-col>
+      <van-col span="3">
+        <div class="biddingPorcess">
+          <van-image
+            class="biddingPorcess_img"
+            :src="iconList.bjd"
+          />
+        </div>
+        <p class="biddingPorcess_text">第四步</p>
+        <p class="biddingPorcess_text">资质审核</p>
+      </van-col>
+      <van-col span="3">
+        <div class="biddingPorcess">
+          <van-image
+            class="biddingPorcess_img"
+            :src="iconList.bjd"
+          />
+        </div>
+        <p class="biddingPorcess_text">第五步</p>
+        <p class="biddingPorcess_text">参与竞价</p>
+      </van-col>
+      <van-col span="3">
+        <div class="biddingPorcess">
+          <van-image
+            class="biddingPorcess_img"
+            :src="iconList.bjd"
+          />
+        </div>
+        <p class="biddingPorcess_text">第六步</p>
+        <p class="biddingPorcess_text">成家确认</p>
+      </van-col>
+      <van-col span="3">
+        <div class="biddingPorcess">
+          <van-image
+            class="biddingPorcess_img"
+            :src="iconList.bjd"
+          />
+        </div>
+        <p class="biddingPorcess_text">第七步</p>
+        <p class="biddingPorcess_text">结算交割</p>
+      </van-col>
+      <van-col span="1"></van-col>
+    </van-row>
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onL"
+      >
+        <van-row v-for="(item,index) in infoList" :key="index" :title="item">
+          <van-col span="13" class="biddingPorcessListLeftCol">
+            <span >{{item.content}}</span>
+          </van-col>
+          <van-col span="11" class="biddingPorcessListRightCol">
+            <van-count-down :time="item.deadline">
+              <template #default="timeData">
+                <span style="color: #666666">距竞价结束</span><span>{{timeData.days }}天{{timeData.hours}}时{{timeData.minutes}}分{{timeData.seconds}}秒</span>
+              </template>
+            </van-count-down>
+            <van-row> <span style="color: #666666">当前价 </span><span style="font-size: 14px">{{item.currentPrice}}</span> <span>{{item.priceUnit}}</span></van-row>
+          </van-col>
+        </van-row>
+      </van-list>
+    </van-pull-refresh>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "biddingHallApply",
+    data() {
+      return {
+        input: '',
+        iconList: {
+          bjd: "../../static/images/bidding_bjd.png",
+          bzj:"../../static/images/bidding_bzj.png",
+          cj:"../../static/images/bidding_cj.png",
+          jcxx:"../../static/images/bidding_jcxx.png",
+          k:"../../static/images/bidding_k.png",
+          xmjflc:"../../static/images/bidding_xmjflc.png",
+          zj:"../../static/images/bidding_zj.png",
+        },
+        iconWidthHeight:"0.4rem",
+        infoList:[],
+        value1: 0,
+        value2: 0,
+        value3: 0,
+        value:"",
+        info:{content:"管家堡乡张春张三丰500亩水田出租",deadline:"2222222222",currentPrice:"500",priceUnit:"元/亩/年"},
+        option1: [
+          { text: '标的物类型', value: 0 },
+          { text: '类型一', value: 1 },
+          { text: '类型二', value: 2 },
+        ],
+        option2: [
+          { text: '标的物所在地', value: 0 },
+          { text: '地址1', value: 1 },
+          { text: '地址2', value: 2 },
+        ],
+        option3: [
+          { text: '项目状态', value: 0 },
+          { text: '状态1', value: 1 },
+          { text: '状态2', value: 2 },
+        ],
+        loading: false,
+        finished: false,
+        refreshing: false,
+      }
+    },
+    methods:{
+      onL() {
+        setTimeout(() => {
+          if (this.refreshing) {
+            this.infoList = [];
+            this.refreshing = false;
+          }
+
+          for (let i = 0; i < 10; i++) {
+            this.infoList.push(this.info);
+          }
+          this.loading = false;
+
+          if (this.infoList.length >= 40) {
+            this.finished = true;
+          }
+        }, 1000);
+      },
+      onRefresh() {
+        // 清空列表数据
+        this.finished = false;
+
+        // 重新加载数据
+        // 将 loading 设置为 true，表示处于加载状态
+        this.loading = true;
+        this.onL();
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .van-search__content{
+    border:1px solid #007E72;
+  }
+  >>> .van-dropdown-menu__title{
+    font-size: 0.2rem;
+  }
+ .biddingPorcess {
+    width:0.55rem;
+    height:0.55rem;
+    border-radius:0.275rem;
+    border:1px solid #007E72;
+    margin: 0 auto;
+    padding: 0.085rem;
+  }
+  .biddingPorcess_img{
+    width:0.32rem;
+    height:0.32rem;
+  }
+  .biddingPorcessTitle{
+    background-color:#007E72;
+    color:#fff;
+    text-align: center;
+    line-height: 0.8rem;
+    font-size: 14px;
+  }
+  .biddingPorcess_text{
+    font-size: 0.2rem;
+  }
+  .biddingPorcessContent{
+    padding:0.4rem 0;
+    background-color: #efefef;
+    text-align: center;
+  }
+  .biddingPorcessListLeftCol{
+    padding:10px 0.25rem 10px 0.3rem;
+  }
+  .biddingPorcessListLeftCol span{
+    font-size: 0.38rem;
+  }
+  .biddingPorcessListRightCol
+  {
+    padding:10px 0.3rem 10px 0.25rem;
+
+  }
+  .biddingPorcessListRightCol span{
+    color: #c21F3a;
+    font-size: 10px;
+  }
+</style>

src/permission.js

@@ -6,7 +6,7 @@ import { getToken } from '@/utils/auth'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
+const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/biddingHall']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
@@ -44,7 +44,8 @@ router.beforeEach((to, from, next) => {
       // 在免登录白名单，直接进入
       next()
     } else {
-      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+      //next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+     next('/biddingHall');
       NProgress.done()
     }
   }

src/router/index.js

@@ -76,6 +76,14 @@ export const constantRoutes = [
       title: '我的'
     },
     component: (resolve) => require(['@/views/mynsgk'], resolve)
+  },
+  {
+    path: '/biddingHall',
+    name: 'biddingHall',
+    meta: {
+      title: '竞价大厅'
+    },
+    component: (resolve) => require(['@/views/biddingHall'], resolve)
   }
 ];
 

src/views/biddingHall/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <biddingHallApply></biddingHallApply>
+</template>
+
+<script>
+  import biddingHallApply from "../../components/biddingHall/biddingHallApply";
+  export default {
+      name: "biddingHall",
+      components:{biddingHallApply},
+      data() {
+      return {
+        input: ''
+      }
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>