移动端
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

641 рядки
21 KiB

  1. <template>
  2. <div class="app-container">
  3. <van-nav-bar
  4. title="项目详情"
  5. left-arrow
  6. fixed
  7. placeholder
  8. @click-left="$router.back(-1)"
  9. />
  10. <van-tabs scrollspy sticky color="#007b76" >
  11. <van-tab title="竞拍信息" title-style="font-size:12px;">
  12. <van-swipe class="my-swipe" height="235" indicator-color="white" @change="onChange">
  13. <template v-if="detail.fileUrlList !== undefined &&detail.fileUrlList.length>0">
  14. <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>
  15. </template>
  16. <template v-else>
  17. <van-swipe-item><van-image src="../../static/images/index/banner.png" height="235" /></van-swipe-item>
  18. </template>
  19. <template #indicator>
  20. <div class="custom-indicator">{{ current + 1 }}/{{ detail.fileUrlList !== undefined &&detail.fileUrlList.length>0 ? detail.fileUrlList.length:1 }}</div>
  21. </template>
  22. </van-swipe>
  23. <van-notice-bar color="#fff" background="#007E72" left-icon="clock-o">
  24. {{ process }}&nbsp&nbsp&nbsp&nbsp{{tip}}
  25. </van-notice-bar>
  26. <div class="information">
  27. <van-row>
  28. <van-col span="24" class="title">【{{ detail.rollout }}】{{ detail.projectName }}</van-col>
  29. </van-row>
  30. <van-row>
  31. <van-col span="4">{{ process }}</van-col>
  32. <van-col span="20"><van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" /></van-col>
  33. </van-row>
  34. <van-row>
  35. <van-col span="4">挂牌价</van-col>
  36. <van-col span="20" class="price"><span>{{detail.price}}</span> 元/亩/年</van-col>
  37. </van-row>
  38. <van-row>
  39. <van-col span="4">保证金</van-col>
  40. <van-col span="20" class="money"><span>{{ detail.deposit }}</span> 元</van-col>
  41. </van-row>
  42. </div>
  43. <div class="lead">
  44. <van-row >
  45. <van-col span="3"><van-image src="../../static/images/icon/phone.png" style="vertical-align: text-top;" /></van-col>
  46. <template v-if="biddinglistInformation!=undefined&&biddinglistInformation.length>0">
  47. <van-col span="4">{{biddinglistInformation[0].userName}}</van-col>
  48. <van-col span="4">{{biddinglistInformation[0].money}}元</van-col>
  49. <van-col span="4">领先</van-col>
  50. <van-col span="8">{{biddinglistInformation[0].createTime}}</van-col>
  51. </template>
  52. </van-row>
  53. </div>
  54. <div class="detail">
  55. <van-row>
  56. <van-col span="24"><span>报名开始时间:</span>{{ detail.signupStartTime }}</van-col>
  57. </van-row>
  58. <van-row>
  59. <van-col span="24"><span>报名截止时间:</span>{{ detail.signupStopTime }}</van-col>
  60. </van-row>
  61. <van-row>
  62. <van-col span="24"><span>竞价开始时间:</span>{{ detail.biddingStartTime }}</van-col>
  63. </van-row>
  64. <van-row>
  65. <van-col span="24"><span>竞价截止时间:</span>{{ detail.biddingStopTime }}</van-col>
  66. </van-row>
  67. <van-row>
  68. <van-col span="24"><span>竞价方式:</span>{{ detail.biddingType }}</van-col>
  69. </van-row>
  70. <van-row>
  71. <van-col span="24"><span>阶梯价(加价幅度):</span>{{ detail.ladderPrice }}</van-col>
  72. </van-row>
  73. <van-row>
  74. <van-col span="24"><span>延时周期:</span>2分钟报名<van-icon name="question" size="15" style="top: 3px;left: 5px;" color="#CDCDCD"/></van-col>
  75. </van-row>
  76. </div>
  77. </van-tab>
  78. <van-tab title="标的物介绍" title-style="font-size:12px;">
  79. <p class="delTitle">标的物介绍</p>
  80. <div class="introduce">
  81. <van-row>
  82. <van-col span="24" style="color:#8A8A8A;font-size: 0.4rem;">项目挂牌转出方简况及公告内容</van-col>
  83. </van-row>
  84. <van-row>
  85. <van-col span="24"><span>转出方名称</span>{{ detail.outName }}</van-col>
  86. </van-row>
  87. <van-row>
  88. <van-col span="24"><span>住址(地址)</span>{{ detail.address }}</van-col>
  89. </van-row>
  90. <van-row>
  91. <van-col span="14"><span>经济类型</span>{{ detail.economicType }}</van-col>
  92. <van-col span="10"><span>注册账号</span>{{ detail.registerNum }}</van-col>
  93. </van-row>
  94. <van-row>
  95. <van-col span="24"><span>注册资本(万元)</span>{{ detail.registerMoney }}</van-col>
  96. </van-row>
  97. <van-row>
  98. <van-col span="24"><span>组织机构代码证号</span>{{ detail.areaNum }}</van-col>
  99. </van-row>
  100. <van-row>
  101. <van-col span="24"><span>法定代表人/负责人</span>{{ detail.legalPerson }}</van-col>
  102. </van-row>
  103. <van-row>
  104. <van-col span="24"><span>身份证号</span>{{ detail.idCardNum }}</van-col>
  105. </van-row>
  106. <van-row>
  107. <van-col span="24"><span>联系电话</span>{{ detail.phone }}</van-col>
  108. </van-row>
  109. <van-row>
  110. <van-col span="24"><span>电子邮箱</span>{{ detail.email }}</van-col>
  111. </van-row>
  112. <van-row>
  113. <van-col span="14"><span>项目类型</span>{{ detail.projectNumber }}</van-col>
  114. <van-col span="10"><span>农地性质</span>{{ detail.projectType }}</van-col>
  115. </van-row>
  116. <van-row>
  117. <van-col span="24"><span>转出项目名称</span>{{ detail.projectName }}</van-col>
  118. </van-row>
  119. <van-row>
  120. <van-col span="24"><span>坐落</span>{{ detail.locationName }}</van-col>
  121. </van-row>
  122. <van-row>
  123. <van-col span="14"><span>是否属再次转出</span>{{ detail.twoout == 'N'?"否":"是"}}</van-col>
  124. <van-col span="10"><span>前次转出方式</span>{{ detail.oneout}}</van-col>
  125. </van-row>
  126. <van-row>
  127. <van-col span="14"><span>拟转出方式</span>{{ detail.rollout }}</van-col>
  128. <van-col span="10"><span>拟转出面积/数量</span> {{detail.allCount}}{{detail.allCountUnit}} </van-col>
  129. </van-row>
  130. <van-row>
  131. <van-col span="24"><span>拟转出期限</span>{{detail.outStartTime}} 至 {{detail.outStopTime}}&nbsp&nbsp&nbsp&nbsp&nbsp共{{detail.outYearNum}}年</van-col>
  132. </van-row>
  133. <van-row>
  134. <van-col span="24"><span>涉及农户数</span>{{ detail.peasantNum }}</van-col>
  135. </van-row>
  136. <van-row>
  137. <van-col span="24" style="color:#007E72;">标的物信息</van-col>
  138. </van-row>
  139. <div class="project_info" v-for="(item,index) in detail.subjectList">
  140. <van-row>
  141. <van-col span="14"><span>标的物名称</span>{{ item.landName }}</van-col>
  142. <van-col span="10"><span>面积/数量</span>{{ item.area }}{{item.areaUnit}}</van-col>
  143. </van-row>
  144. <van-row>
  145. <van-col span="24"><span>{{ item.condition}}</span></van-col>
  146. </van-row>
  147. </div>
  148. </div>
  149. </van-tab>
  150. <van-tab title="标的物图片" title-style="font-size:12px;">
  151. <p class="delTitle">标的物图片</p>
  152. <template v-if="detail.fileUrlList !== undefined &&detail.fileUrlList.length>0">
  153. <van-image v-for="(item,index) in detail.fileUrlList" :src="item.fileUrl?''+item.fileUrl:'../../static/images/index/detailImg.png'" style="vertical-align: text-top;" />
  154. </template>
  155. <template v-else>
  156. <van-image src="../../static/images/index/detailImg.png" style="vertical-align: text-top;" />
  157. </template>
  158. </van-tab>
  159. <van-tab title="竞买须知" title-style="font-size:12px;">
  160. <p class="delTitle">竞买须知</p>
  161. <div class="notice" v-html="webConfig">
  162. </div>
  163. </van-tab>
  164. <van-tab title="竞价记录" title-style="font-size:12px;">
  165. <p class="delTitle">竞价记录</p>
  166. <div class="biddingList">
  167. <table width="100%" cellspacing="0">
  168. <tr>
  169. <td>出价人账号</td>
  170. <td>姓名</td>
  171. <td>出价价格</td>
  172. <td>状态</td>
  173. <td>出价时间</td>
  174. </tr>
  175. <tr v-for="(item,index) in this.biddinglistInformation">
  176. <td>{{ item.userAccount }}</td>
  177. <td>{{ item.userName }}</td>
  178. <td>{{ item.money}}</td>
  179. <template v-if="index==0">
  180. <td style="color:#C21F3A">领先</td>
  181. </template>
  182. <template v-else>
  183. <td></td>
  184. </template>
  185. <td>{{ item.createTime }}</td>
  186. </tr>
  187. </table>
  188. </div>
  189. </van-tab>
  190. </van-tabs>
  191. <div style="height: 2rem;"></div>
  192. <div class="bottomBtn" v-if="">
  193. <van-row v-if="!showBtn">
  194. <van-col span="8" style="margin-top: 4px;" @click="showPopup">
  195. <van-image src="../../static/images/icon/clock.png" style="vertical-align: text-bottom;" />
  196. <p style="line-height: 0.2rem;color: #999999">提醒</p>
  197. </van-col>
  198. <van-col span="16">
  199. <van-button round color="#C21F3A" block :disabled="isSignup" :to="{path:'signUp',query:{projectId:detail.id,deposit:detail.deposit,projectName:detail.projectName}}">
  200. {{ btnMsg }}<br/>
  201. <span style="font-size: 10px">保证金¥{{detail.deposit}}</span>
  202. </van-button>
  203. </van-col>
  204. </van-row>
  205. <van-row v-if="showBtn">
  206. <van-col span="4" style="text-align: center;line-height: 1rem">
  207. <van-button color="#e2e2e2" icon="minus" size="small" @click="sub"></van-button>
  208. </van-col>
  209. <van-col span="16">
  210. <van-button round color="#C21F3A" block @click="offer">
  211. <p>出价</p>
  212. <p>{{price}}元</p>
  213. </van-button>
  214. </van-col>
  215. <van-col span="4" style="text-align: center;line-height: 1rem">
  216. <van-button color="#e2e2e2" icon="plus" size="small" @click="add"></van-button>
  217. </van-col>
  218. </van-row>
  219. </div>
  220. <van-popup v-model="show" class="popup" closeable>
  221. <van-image src="../../static/images/icon/success.png"/>
  222. <p class="popupTit">提醒设置成功</p>
  223. <p class="popupContent">系统将按要求提醒您竞拍</p>
  224. <van-button round color="#C21F3A" block class="iKnow">
  225. 我知道了
  226. </van-button>
  227. <p class="updatePopup">修改提醒方式</p>
  228. </van-popup>
  229. </div>
  230. </template>
  231. <script>
  232. import {
  233. biddingSubmit,
  234. getBiddingList,
  235. getMember,
  236. getOutProjectDetail,
  237. getSignup,
  238. getWebConfig
  239. } from "../../api/project";
  240. import {getInfo} from "../../api/login";
  241. export default {
  242. name: "projectDetail",
  243. provide(){
  244. return{
  245. reload:this.reload
  246. }
  247. },
  248. data() {
  249. return {
  250. current: 0,
  251. show: false,
  252. id:this.$route.query.id,
  253. detail: {},
  254. webConfig:"",
  255. biddinglistInformation:[],
  256. rollout_type:[],
  257. process:"",
  258. tip:"",
  259. btnMsg:"",
  260. time:0,
  261. timeMsg:"",
  262. isSignup:false,
  263. showBtn:false,
  264. price:0,
  265. userAccount:"",
  266. userName:"",
  267. userId:""
  268. };
  269. },
  270. computed: {
  271. getNowFormatDate:function(){
  272. let date = new Date();
  273. let seperator1 = "-";
  274. let seperator2 = ":";
  275. let month = date.getMonth() + 1;
  276. let day = date.getDate();
  277. let hours = date.getHours();
  278. let minutes = date.getMinutes();
  279. let seconds = date.getSeconds();
  280. if (month >= 1 && month <= 9) {
  281. month = "0" + month;
  282. }
  283. if (day >= 0 && day <= 9) {
  284. day = "0" + day;
  285. }
  286. if (hours >= 0 && hours <= 9) {
  287. hours = "0" + hours;
  288. }
  289. if (minutes >= 0 && minutes <= 9) {
  290. minutes = "0" + minutes;
  291. }
  292. if (seconds >= 0 && seconds <= 9) {
  293. seconds = "0" + seconds;
  294. }
  295. let currentdate = date.getFullYear() + seperator1 + month + seperator1 + day + " " + hours + seperator2 + minutes + seperator2 + seconds;
  296. console.log(currentdate)
  297. return currentdate;
  298. }
  299. },
  300. created() {
  301. this.reload();
  302. },
  303. methods: {
  304. onChange(index) {
  305. this.current = index;
  306. },
  307. showPopup() {
  308. this.show = true;
  309. },
  310. reload(){
  311. getOutProjectDetail(this.id).then(response =>{
  312. this.detail=response.data
  313. this.getDicts("rollout_type").then(res =>{
  314. this.detail.rollout = this.selectDictLabel(res.data,response.data.rollout);
  315. if(this.detail.oneout==0){
  316. this.detail.oneout = "无"
  317. }else{
  318. this.detail.oneout = this.selectDictLabel(res.data,response.data.oneout);
  319. }
  320. })
  321. this.getDicts("project_type").then(res => {
  322. this.detail.projectNumber = this.selectDictLabel(res.data,response.data.projectNumber);
  323. });
  324. this.getDicts("sub_object_type").then(res => {
  325. this.detail.projectType = this.selectDictLabel(res.data,response.data.projectType);
  326. });
  327. this.getDicts("economic_type").then(res => {
  328. this.detail.economicType = this.selectDictLabel(res.data,response.data.economicType);
  329. });
  330. this.getDicts("area_unit").then(res => {
  331. this.detail.allCountUnit = this.selectDictLabel(res.data,response.data.allCountUnit);
  332. });
  333. this.getDicts("bidding_type").then(res => {
  334. this.detail.biddingType = this.selectDictLabel(res.data,response.data.biddingType);
  335. });
  336. for(let i of this.detail.subjectList){
  337. this.getDicts("area_unit").then(res => {
  338. i.areaUnit = this.selectDictLabel(res.data,i.areaUnit);
  339. });
  340. }
  341. let biddingStartTime = Date.parse(this.detail.biddingStartTime)+0
  342. let biddingStopTime = Date.parse(this.detail.biddingStopTime)+0
  343. let signupStartTime = Date.parse(this.detail.signupStartTime)+0
  344. let signupStopTime = Date.parse(this.detail.signupStopTime)+0
  345. let nowDate = Date.parse(new Date());
  346. if(signupStartTime>nowDate){
  347. this.process= "报名未开始"
  348. this.tip=this.detail.signupStartTime+"开始报名"
  349. this.btnMsg="立即报名"
  350. this.timeMsg="距报名开始"
  351. this.time = signupStartTime-nowDate
  352. this.isSignup=true
  353. }else if(signupStopTime>nowDate&&signupStopTime>signupStartTime){
  354. this.process= "报名中"
  355. this.tip=this.detail.signupStopTime+"报名截止"
  356. this.btnMsg="立即报名"
  357. this.timeMsg="距报名截止"
  358. this.time = signupStopTime-nowDate
  359. getInfo().then(response => {
  360. let _this = this
  361. getMember(response.user.userId).then(res => {
  362. console.log(res)
  363. let data= {
  364. projectId:this.id,
  365. memberId:res.data.id,
  366. };
  367. getSignup(data).then(r =>{
  368. if(r.data=="1"){
  369. _this.isSignup=true
  370. this.btnMsg="已报名"
  371. }
  372. })
  373. })
  374. })
  375. }else if(biddingStartTime>nowDate&&nowDate>signupStopTime){
  376. this.process= "竞价未开始"
  377. this.tip=this.detail.biddingStartTime+"开始竞价"
  378. this.timeMsg="距竞价开始"
  379. this.time = biddingStartTime-nowDate
  380. getInfo().then(response => {
  381. let _this = this
  382. getMember(response.user.userId).then(res => {
  383. let data= {
  384. projectId:this.id,
  385. memberId:res.data.id,
  386. };
  387. getSignup(data).then(r =>{
  388. if(r.data=="1"){
  389. _this.isSignup=true
  390. this.btnMsg="立即竞价"
  391. this.price=this.detail.ladderPrice?this.biddinglistInformation[0].money+this.detail.ladderPrice:this.biddinglistInformation[0].money+1
  392. }else{
  393. this.btnMsg="未报名"
  394. }
  395. })
  396. })
  397. })
  398. }else if(biddingStopTime>nowDate&&nowDate>biddingStartTime){
  399. this.process= "竞价中"
  400. this.tip=this.detail.biddingStopTime+"结束竞价"
  401. this.timeMsg="距竞价结束"
  402. this.time = biddingStopTime-nowDate
  403. getInfo().then(response => {
  404. let _this = this
  405. this.userId=response.user.userId
  406. getMember(response.user.userId).then(res => {
  407. this.userAccount=res.data.phone
  408. this.userName=res.data.realname
  409. this.memberId=res.data.id
  410. let data= {
  411. projectId:this.id,
  412. memberId:res.data.id,
  413. };
  414. getSignup(data).then(r =>{
  415. if(r.data=="1"){
  416. _this.isSignup=true
  417. this.btnMsg="立即竞价"
  418. this.showBtn=true
  419. this.price=this.detail.ladderPrice?this.biddinglistInformation[0].money+this.detail.ladderPrice:this.biddinglistInformation[0].money+1
  420. }else{
  421. this.btnMsg="未报名"
  422. _this.isSignup=true
  423. }
  424. })
  425. })
  426. })
  427. }else if(nowDate>biddingStopTime){
  428. this.process= "竞价结束"
  429. this.tip=this.detail.biddingStopTime+"结束竞价"
  430. this.btnMsg="竞价结束"
  431. this.timeMsg="竞价结束"
  432. this.time = 0
  433. this.isSignup = true
  434. }
  435. });
  436. getWebConfig().then(response =>{
  437. response.data.map(item =>{
  438. if(item.configKey=="cqjy.website.bidInfo"){
  439. this.webConfig += item.configValue
  440. }
  441. })
  442. });
  443. getBiddingList(this.id).then(response =>{
  444. this.biddinglistInformation = response.rows
  445. });
  446. },
  447. offer(){
  448. let data= {
  449. projectId:this.id,
  450. memberId:this.memberId,
  451. userId:this.userId,
  452. userAccount:this.userAccount,
  453. userName:this.userName,
  454. money:this.price,
  455. loginTime:this.getNowFormatDate
  456. };
  457. console.log(data)
  458. biddingSubmit(data).then(response =>{
  459. let _this = this
  460. if(response){
  461. this.$toast({
  462. icon: 'success', // 找到自己需要的图标
  463. message: '出价成功',
  464. duration:"1000",
  465. onClose:function(){
  466. _this.reload()
  467. }
  468. })
  469. }
  470. })
  471. },
  472. add(){
  473. this.detail.ladderPrice?this.price=this.price+this.detail.ladderPrice:this.price+=1
  474. },
  475. sub(){
  476. if(this.detail.ladderPrice){
  477. if((this.price-this.detail.ladderPrice)>this.biddinglistInformation[0].money){
  478. this.price-=this.detail.ladderPrice
  479. }else{
  480. this.$toast({
  481. icon: 'error', // 找到自己需要的图标
  482. message: '出价不能低于当前最高价',
  483. duration:"1000",
  484. })
  485. }
  486. }else{
  487. if((this.price-1)>this.biddinglistInformation[0].money){
  488. this.price-=1
  489. }else{
  490. this.$toast({
  491. icon: 'error', // 找到自己需要的图标
  492. message: '出价不能低于当前最高价',
  493. duration:"1000",
  494. })
  495. }
  496. }
  497. },
  498. }
  499. };
  500. </script>
  501. <style scoped lang="scss">
  502. .app-container {
  503. }
  504. .custom-indicator {
  505. position: absolute;
  506. right: 20px;
  507. bottom: 20px;
  508. padding: 0px 20px;
  509. font-size: 12px;
  510. /*rgba(0, 0, 0, 0.1)*/
  511. background: rgba(0, 0, 0, 0.2);
  512. color: #FFF;
  513. border-radius: 20px;
  514. line-height: 0.5rem;
  515. }
  516. .title{
  517. font-size: 0.45rem;
  518. }
  519. .my-swipe{
  520. width: 100%;
  521. }
  522. .my-swipe .van-swipe-item .van-image{
  523. width: 100%;
  524. }
  525. .information{
  526. background-color: #FFF;
  527. margin-top: 0.3rem;
  528. padding: 0.4rem 0.5rem;
  529. }
  530. .van-row{
  531. line-height: 0.7rem;
  532. }
  533. .price{
  534. color: #C21F3A;
  535. }
  536. .price span{
  537. font-size: 0.5rem;
  538. font-weight: bold;
  539. }
  540. .money{
  541. color: #C21F3A;
  542. }
  543. .money span{
  544. font-size: 0.5rem;
  545. font-weight: bold;
  546. }
  547. .van-count-down{
  548. line-height: 0.7rem;
  549. }
  550. .lead{
  551. background-color: #FFF;
  552. margin-top: 0.3rem;
  553. padding: 0.1rem 0.5rem;
  554. color: #C21F3A;
  555. }
  556. .detail{
  557. background-color: #FFF;
  558. margin-top: 0.3rem;
  559. padding: 0.2rem 0.5rem;
  560. }
  561. .detail span{
  562. color: #8A8A8A;
  563. }
  564. .delTitle{
  565. font-size: 0.4rem;
  566. color: #007E72;
  567. padding: 0.2rem 0.5rem;
  568. }
  569. .introduce{
  570. padding: 0.2rem 0.5rem 0.5rem;
  571. background-color: #FFF;
  572. }
  573. .introduce span{
  574. color: #8A8A8A;
  575. margin-right: 20px;
  576. }
  577. .project_info{
  578. border: 1px solid #DCDCDC;
  579. padding: 0px 20px;
  580. margin-top: 10px;
  581. border-radius: 10px;
  582. }
  583. .notice{
  584. padding: 0.5rem;
  585. background-color: #FFF;
  586. }
  587. .notice p{
  588. line-height: 0.7rem;
  589. }
  590. .biddingList{
  591. padding: 0.5rem;
  592. background-color: #FFF;
  593. margin-bottom: 0.4rem;
  594. }
  595. .biddingList table{
  596. text-align: center;
  597. }
  598. .biddingList table td{
  599. text-align: center;
  600. padding: 10px 0px;
  601. }
  602. .biddingList table tr:first-child td{
  603. background-color: #007E72;
  604. color: #FFF;
  605. }
  606. .bottomBtn{
  607. padding: 0.2rem 0.5rem;
  608. background-color: #FFF;
  609. position: fixed;
  610. bottom: 0;
  611. width: 100%;
  612. }
  613. .popup{
  614. text-align: center;
  615. padding: 0.5rem;
  616. border-radius: 20px;
  617. width: 70%;
  618. padding-top: 1.5rem;
  619. }
  620. .popupTit{
  621. color: #007E72;
  622. font-size: 0.4rem;
  623. line-height: 0.9rem;
  624. }
  625. .popupContent{
  626. color: #666666;
  627. }
  628. .iKnow{
  629. margin-top: 1rem;
  630. }
  631. .updatePopup{
  632. color: #007E72;
  633. margin-top: 0.5rem;
  634. }
  635. </style>