|
- <template>
- <div class="app-container">
- <van-nav-bar
- title="项目详情"
- left-arrow
- fixed
- placeholder
- @click-left="$router.back(-1)"
- />
- <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">
- <template v-if="detail.fileUrlList !== undefined &&detail.fileUrlList.length>0">
- <van-swipe-item v-for="(item,index) in detail.fileUrlList"><van-image :src="item.fileUrl?''+item.fileUrl:'../../static/images/index/banner.png'" height="235" /></van-swipe-item>
- </template>
- <template v-else>
- <van-swipe-item><van-image src="../../static/images/index/banner.png" height="235" /></van-swipe-item>
- </template>
- <template #indicator>
- <div class="custom-indicator">{{ current + 1 }}/{{ detail.fileUrlList !== undefined &&detail.fileUrlList.length>0 ? detail.fileUrlList.length:1 }}</div>
- </template>
- </van-swipe>
- <van-notice-bar color="#fff" background="#007E72" left-icon="clock-o">
- {{ process }}    {{tip}}
- </van-notice-bar>
- <div class="information">
- <van-row>
- <van-col span="24" class="title">【{{ detail.rollout }}】{{ detail.projectName }}</van-col>
- </van-row>
- <van-row>
- <van-col span="4">{{ process }}</van-col>
- <van-col span="20"><van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" /></van-col>
- </van-row>
- <van-row>
- <van-col span="4">挂牌价</van-col>
- <van-col span="20" class="price"><span>{{detail.price}}</span> 元/亩/年</van-col>
- </van-row>
- <van-row>
- <van-col span="4">保证金</van-col>
- <van-col span="20" class="money"><span>{{ detail.deposit }}</span> 元</van-col>
- </van-row>
- </div>
- <div class="lead">
- <van-row >
- <van-col span="3"><van-image src="../../static/images/icon/phone.png" style="vertical-align: text-top;" /></van-col>
- <template v-if="biddinglistInformation!=undefined&&biddinglistInformation.length>0">
- <van-col span="4">{{biddinglistInformation[0].userName}}</van-col>
- <van-col span="4">{{biddinglistInformation[0].money}}元</van-col>
- <van-col span="4">领先</van-col>
- <van-col span="8">{{biddinglistInformation[0].createTime}}</van-col>
- </template>
- </van-row>
- </div>
- <div class="detail">
- <van-row>
- <van-col span="24"><span>报名开始时间:</span>{{ detail.signupStartTime }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>报名截止时间:</span>{{ detail.signupStopTime }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>竞价开始时间:</span>{{ detail.biddingStartTime }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>竞价截止时间:</span>{{ detail.biddingStopTime }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>竞价方式:</span>{{ detail.biddingType }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>阶梯价(加价幅度):</span>{{ detail.ladderPrice }}</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>{{ detail.outName }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>住址(地址)</span>{{ detail.address }}</van-col>
- </van-row>
- <van-row>
- <van-col span="14"><span>经济类型</span>{{ detail.economicType }}</van-col>
- <van-col span="10"><span>注册账号</span>{{ detail.registerNum }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>注册资本(万元)</span>{{ detail.registerMoney }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>组织机构代码证号</span>{{ detail.areaNum }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>法定代表人/负责人</span>{{ detail.legalPerson }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>身份证号</span>{{ detail.idCardNum }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>联系电话</span>{{ detail.phone }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>电子邮箱</span>{{ detail.email }}</van-col>
- </van-row>
- <van-row>
- <van-col span="14"><span>项目类型</span>{{ detail.projectNumber }}</van-col>
- <van-col span="10"><span>农地性质</span>{{ detail.projectType }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>转出项目名称</span>{{ detail.projectName }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>坐落</span>{{ detail.locationName }}</van-col>
- </van-row>
- <van-row>
- <van-col span="14"><span>是否属再次转出</span>{{ detail.twoout == 'N'?"否":"是"}}</van-col>
- <van-col span="10"><span>前次转出方式</span>{{ detail.oneout}}</van-col>
- </van-row>
- <van-row>
- <van-col span="14"><span>拟转出方式</span>{{ detail.rollout }}</van-col>
- <van-col span="10"><span>拟转出面积/数量</span> {{detail.allCount}}{{detail.allCountUnit}} </van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>拟转出期限</span>{{detail.outStartTime}} 至 {{detail.outStopTime}}     共{{detail.outYearNum}}年</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>涉及农户数</span>{{ detail.peasantNum }}</van-col>
- </van-row>
- <van-row>
- <van-col span="24" style="color:#007E72;">标的物信息</van-col>
- </van-row>
- <div class="project_info" v-for="(item,index) in detail.subjectList">
- <van-row>
- <van-col span="14"><span>标的物名称</span>{{ item.landName }}</van-col>
- <van-col span="10"><span>面积/数量</span>{{ item.area }}{{item.areaUnit}}</van-col>
- </van-row>
- <van-row>
- <van-col span="24"><span>{{ item.condition}}</span></van-col>
- </van-row>
- </div>
- </div>
- </van-tab>
- <van-tab title="标的物图片" title-style="font-size:12px;">
- <p class="delTitle">标的物图片</p>
- <template v-if="detail.fileUrlList !== undefined &&detail.fileUrlList.length>0">
- <van-image v-for="(item,index) in detail.fileUrlList" :src="item.fileUrl?''+item.fileUrl:'../../static/images/index/detailImg.png'" style="vertical-align: text-top;" />
- </template>
- <template v-else>
- <van-image src="../../static/images/index/detailImg.png" style="vertical-align: text-top;" />
- </template>
- </van-tab>
- <van-tab title="竞买须知" title-style="font-size:12px;">
- <p class="delTitle">竞买须知</p>
- <div class="notice" v-html="webConfig">
- </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 v-for="(item,index) in this.biddinglistInformation">
- <td>{{ item.userAccount }}</td>
- <td>{{ item.userName }}</td>
- <td>{{ item.money}}</td>
- <template v-if="index==0">
- <td style="color:#C21F3A">领先</td>
- </template>
- <template v-else>
- <td></td>
- </template>
- <td>{{ item.createTime }}</td>
- </tr>
- </table>
- </div>
- </van-tab>
- </van-tabs>
- <div style="height: 2rem;"></div>
- <div class="bottomBtn" v-if="">
- <van-row v-if="!showBtn">
- <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 :disabled="isSignup" :to="{path:'signUp',query:{projectId:detail.id,deposit:detail.deposit,projectName:detail.projectName}}">
- {{ btnMsg }}<br/>
- <span style="font-size: 10px">保证金¥{{detail.deposit}}</span>
- </van-button>
- </van-col>
- </van-row>
- <van-row v-if="showBtn">
- <van-col span="4" style="text-align: center;line-height: 1rem">
- <van-button color="#e2e2e2" icon="minus" size="small" @click="sub"></van-button>
- </van-col>
- <van-col span="16">
- <van-button round color="#C21F3A" block @click="offer">
- <p>出价</p>
- <p>{{price}}元</p>
- </van-button>
- </van-col>
- <van-col span="4" style="text-align: center;line-height: 1rem">
- <van-button color="#e2e2e2" icon="plus" size="small" @click="add"></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>
- import {
- biddingSubmit,
- getBiddingList,
- getMember,
- getOutProjectDetail,
- getSignup,
- getWebConfig
- } from "../../api/project";
- import {getInfo} from "../../api/login";
-
- export default {
- name: "projectDetail",
- provide(){
- return{
- reload:this.reload
- }
- },
- data() {
- return {
- current: 0,
- show: false,
- id:this.$route.query.id,
- detail: {},
- webConfig:"",
- biddinglistInformation:[],
- rollout_type:[],
- process:"",
- tip:"",
- btnMsg:"",
- time:0,
- timeMsg:"",
- isSignup:false,
- showBtn:false,
- price:0,
- userAccount:"",
- userName:"",
- userId:""
- };
- },
- computed: {
- getNowFormatDate:function(){
- let date = new Date();
- let seperator1 = "-";
- let seperator2 = ":";
- let month = date.getMonth() + 1;
- let day = date.getDate();
- let hours = date.getHours();
- let minutes = date.getMinutes();
- let seconds = date.getSeconds();
- if (month >= 1 && month <= 9) {
- month = "0" + month;
- }
- if (day >= 0 && day <= 9) {
- day = "0" + day;
- }
- if (hours >= 0 && hours <= 9) {
- hours = "0" + hours;
- }
- if (minutes >= 0 && minutes <= 9) {
- minutes = "0" + minutes;
- }
- if (seconds >= 0 && seconds <= 9) {
- seconds = "0" + seconds;
- }
- let currentdate = date.getFullYear() + seperator1 + month + seperator1 + day + " " + hours + seperator2 + minutes + seperator2 + seconds;
- console.log(currentdate)
- return currentdate;
- }
- },
- created() {
-
- this.reload();
- },
- methods: {
- onChange(index) {
- this.current = index;
- },
- showPopup() {
- this.show = true;
- },
- reload(){
- getOutProjectDetail(this.id).then(response =>{
- this.detail=response.data
- this.getDicts("rollout_type").then(res =>{
- this.detail.rollout = this.selectDictLabel(res.data,response.data.rollout);
- if(this.detail.oneout==0){
- this.detail.oneout = "无"
- }else{
- this.detail.oneout = this.selectDictLabel(res.data,response.data.oneout);
- }
- })
- this.getDicts("project_type").then(res => {
- this.detail.projectNumber = this.selectDictLabel(res.data,response.data.projectNumber);
- });
- this.getDicts("sub_object_type").then(res => {
- this.detail.projectType = this.selectDictLabel(res.data,response.data.projectType);
- });
- this.getDicts("economic_type").then(res => {
- this.detail.economicType = this.selectDictLabel(res.data,response.data.economicType);
- });
- this.getDicts("area_unit").then(res => {
- this.detail.allCountUnit = this.selectDictLabel(res.data,response.data.allCountUnit);
- });
- this.getDicts("bidding_type").then(res => {
- this.detail.biddingType = this.selectDictLabel(res.data,response.data.biddingType);
- });
- for(let i of this.detail.subjectList){
- this.getDicts("area_unit").then(res => {
- i.areaUnit = this.selectDictLabel(res.data,i.areaUnit);
- });
- }
- let biddingStartTime = Date.parse(this.detail.biddingStartTime)+0
- let biddingStopTime = Date.parse(this.detail.biddingStopTime)+0
- let signupStartTime = Date.parse(this.detail.signupStartTime)+0
- let signupStopTime = Date.parse(this.detail.signupStopTime)+0
- let nowDate = Date.parse(new Date());
- if(signupStartTime>nowDate){
- this.process= "报名未开始"
- this.tip=this.detail.signupStartTime+"开始报名"
- this.btnMsg="立即报名"
- this.timeMsg="距报名开始"
- this.time = signupStartTime-nowDate
- this.isSignup=true
- }else if(signupStopTime>nowDate&&signupStopTime>signupStartTime){
- this.process= "报名中"
- this.tip=this.detail.signupStopTime+"报名截止"
- this.btnMsg="立即报名"
- this.timeMsg="距报名截止"
- this.time = signupStopTime-nowDate
- getInfo().then(response => {
- let _this = this
- getMember(response.user.userId).then(res => {
- console.log(res)
- let data= {
- projectId:this.id,
- memberId:res.data.id,
- };
- getSignup(data).then(r =>{
- if(r.data=="1"){
- _this.isSignup=true
- this.btnMsg="已报名"
- }
- })
- })
- })
- }else if(biddingStartTime>nowDate&&nowDate>signupStopTime){
- this.process= "竞价未开始"
- this.tip=this.detail.biddingStartTime+"开始竞价"
- this.timeMsg="距竞价开始"
- this.time = biddingStartTime-nowDate
- getInfo().then(response => {
- let _this = this
- getMember(response.user.userId).then(res => {
- let data= {
- projectId:this.id,
- memberId:res.data.id,
- };
- getSignup(data).then(r =>{
- if(r.data=="1"){
- _this.isSignup=true
- this.btnMsg="立即竞价"
- this.price=this.detail.ladderPrice?this.biddinglistInformation[0].money+this.detail.ladderPrice:this.biddinglistInformation[0].money+1
- }else{
- this.btnMsg="未报名"
- }
- })
- })
- })
- }else if(biddingStopTime>nowDate&&nowDate>biddingStartTime){
- this.process= "竞价中"
- this.tip=this.detail.biddingStopTime+"结束竞价"
- this.timeMsg="距竞价结束"
- this.time = biddingStopTime-nowDate
- getInfo().then(response => {
- let _this = this
- this.userId=response.user.userId
- getMember(response.user.userId).then(res => {
- this.userAccount=res.data.phone
- this.userName=res.data.realname
- this.memberId=res.data.id
- let data= {
- projectId:this.id,
- memberId:res.data.id,
- };
- getSignup(data).then(r =>{
- if(r.data=="1"){
- _this.isSignup=true
- this.btnMsg="立即竞价"
- this.showBtn=true
- this.price=this.detail.ladderPrice?this.biddinglistInformation[0].money+this.detail.ladderPrice:this.biddinglistInformation[0].money+1
- }else{
- this.btnMsg="未报名"
- _this.isSignup=true
- }
- })
- })
- })
- }else if(nowDate>biddingStopTime){
- this.process= "竞价结束"
- this.tip=this.detail.biddingStopTime+"结束竞价"
- this.btnMsg="竞价结束"
- this.timeMsg="竞价结束"
- this.time = 0
- this.isSignup = true
- }
- });
- getWebConfig().then(response =>{
- response.data.map(item =>{
- if(item.configKey=="cqjy.website.bidInfo"){
- this.webConfig += item.configValue
- }
- })
- });
- getBiddingList(this.id).then(response =>{
- this.biddinglistInformation = response.rows
- });
- },
- offer(){
- let data= {
- projectId:this.id,
- memberId:this.memberId,
- userId:this.userId,
- userAccount:this.userAccount,
- userName:this.userName,
- money:this.price,
- loginTime:this.getNowFormatDate
- };
- console.log(data)
- biddingSubmit(data).then(response =>{
- let _this = this
- if(response){
- this.$toast({
- icon: 'success', // 找到自己需要的图标
- message: '出价成功',
- duration:"1000",
- onClose:function(){
- _this.reload()
- }
- })
-
- }
- })
- },
- add(){
- this.detail.ladderPrice?this.price=this.price+this.detail.ladderPrice:this.price+=1
- },
- sub(){
- if(this.detail.ladderPrice){
- if((this.price-this.detail.ladderPrice)>this.biddinglistInformation[0].money){
- this.price-=this.detail.ladderPrice
- }else{
- this.$toast({
- icon: 'error', // 找到自己需要的图标
- message: '出价不能低于当前最高价',
- duration:"1000",
- })
- }
- }else{
- if((this.price-1)>this.biddinglistInformation[0].money){
- this.price-=1
- }else{
- this.$toast({
- icon: 'error', // 找到自己需要的图标
- message: '出价不能低于当前最高价',
- duration:"1000",
- })
- }
- }
- },
- }
- };
- </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>
|