You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
352 lines
7.6 KiB
352 lines
7.6 KiB
<template> |
|
<!--pages/demandHall/resourcesDetail/index.wxml--> |
|
<view class="resourcesDetail-page"> |
|
<view class="img-box"> |
|
<image :src="detail.resourceImgs[0]" mode="aspectFill"></image> |
|
</view> |
|
<view class="detail-box"> |
|
<view class="r-name">{{detail.title}}</view> |
|
<view class="tag">{{detail.cname}}</view> |
|
<view class="title-box acea-row row-middle"> |
|
<view class="col-line"></view> |
|
<text>基本信息</text> |
|
</view> |
|
<view class="info-box"> |
|
<view class="info-item acea-row-nowrap"> |
|
<view class="label">标题</view> |
|
<view class="colG">{{detail.title}}</view> |
|
</view> |
|
<view class="info-item acea-row-nowrap"> |
|
<view class="label">资金需求</view> |
|
<view class="colG">{{detail.capital}}</view> |
|
</view> |
|
</view> |
|
<view class="title-box mt40 acea-row row-middle"> |
|
<view class="col-line"></view> |
|
<text>发布信息</text> |
|
</view> |
|
<view class="company-card-box acea-row-nowrap" @tap="toCompanyDetail"> |
|
<image :src="detail.enterprise.enterpriseLogo" class="company-logo" mode="aspectFill"></image> |
|
<view class="info"> |
|
<view class="company-name line1">{{detail.enterprise.enterpriseName}}</view> |
|
<view class="tags-box"> |
|
<!-- <view class="tag-item">网站建设</view> --> |
|
<view class="tag-item bgG">{{detail.cname}}</view> |
|
</view> |
|
<view class="slogan">{{detail.enterprise.enterpriseTitle}}</view> |
|
</view> |
|
</view> |
|
<view class="title-box mt40 acea-row row-middle"> |
|
<view class="col-line"></view> |
|
<text>详细描述</text> |
|
</view> |
|
<view class="desc-box"> |
|
<text>{{detail.detailedDescription}}</text> |
|
</view> |
|
<view class="title-box mt40 acea-row row-middle"> |
|
<view class="col-line"></view> |
|
<text>补充内容</text> |
|
</view> |
|
</view> |
|
<view> |
|
<swiper class="swiper-block" autoplay="true" circular="true" previous-margin="90rpx" next-margin="90rpx" current="0" @change="swiperChange"> |
|
<block v-for="(item, index) in detail.resourceImgs" :key="index"> |
|
<swiper-item class="swiper-item" @tap="previewImg"> |
|
<image mode="aspectFill" :src="item" :class="'slide-image ' + (swiperIndex == index ? 'active' : '')"></image> |
|
</swiper-item> |
|
</block> |
|
</swiper> |
|
</view> |
|
<view class="btn-box"> |
|
<view class="contact-btn" @tap="toResourcesContact">立即沟通</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
// pages/demandHall/resourcesDetail/index.js |
|
const app = getApp(); |
|
|
|
export default { |
|
data() { |
|
return { |
|
id: '', |
|
detail: {}, |
|
swiperIndex: 0 |
|
}; |
|
}, |
|
|
|
components: {}, |
|
props: {}, |
|
|
|
/** |
|
* 生命周期函数--监听页面加载 |
|
*/ |
|
onLoad: function (options) { |
|
this.setData({ |
|
id: options.id |
|
}); |
|
this.getDetail(); |
|
}, |
|
|
|
/** |
|
* 生命周期函数--监听页面初次渲染完成 |
|
*/ |
|
onReady: function () {}, |
|
|
|
/** |
|
* 生命周期函数--监听页面显示 |
|
*/ |
|
onShow: function () {}, |
|
|
|
/** |
|
* 生命周期函数--监听页面隐藏 |
|
*/ |
|
onHide: function () {}, |
|
|
|
/** |
|
* 生命周期函数--监听页面卸载 |
|
*/ |
|
onUnload: function () {}, |
|
|
|
/** |
|
* 页面相关事件处理函数--监听用户下拉动作 |
|
*/ |
|
onPullDownRefresh: function () {}, |
|
|
|
/** |
|
* 页面上拉触底事件的处理函数 |
|
*/ |
|
onReachBottom: function () {}, |
|
|
|
/** |
|
* 用户点击右上角分享 |
|
*/ |
|
onShareAppMessage: function () {}, |
|
methods: { |
|
toCompanyDetail() { |
|
uni.navigateTo({ |
|
url: '/pages/demandHall/companyDetail/index?id=' + this.detail.enterprise.id |
|
}); |
|
}, |
|
|
|
getDetail() { |
|
app.http('get', 'Resources/resourceInfo', { |
|
id: this.id |
|
}).then(res => { |
|
if (res.data.success) { |
|
this.setData({ |
|
detail: res.data.data |
|
}); |
|
} |
|
}); |
|
}, |
|
|
|
// 立即沟通 |
|
toResourcesContact(e) { |
|
let str = encodeURIComponent(JSON.stringify(this.detail)); |
|
app.http('GET', 'Communicate/checkOwner', { |
|
resourceId: this.detail.id |
|
}).then(res => { |
|
if (res.data.success) { |
|
uni.navigateTo({ |
|
url: '/pages/demandHall/resourcesContact/index?detail=' + str |
|
}); |
|
} else { |
|
if (res.data.status == '5112') { |
|
uni.showModal({ |
|
title: '提示', |
|
content: res.data.msg, |
|
success: response => { |
|
if (response.confirm) { |
|
uni.navigateTo({ |
|
url: '/pages/release/index' |
|
}); |
|
} |
|
} |
|
}); |
|
} else { |
|
uni.showToast({ |
|
title: res.data.msg, |
|
icon: 'none', |
|
duration: 2000 |
|
}); |
|
} |
|
} |
|
}); |
|
}, |
|
|
|
swiperChange(e) { |
|
const that = this; |
|
that.setData({ |
|
swiperIndex: e.detail.current |
|
}); |
|
}, |
|
|
|
previewImg() { |
|
uni.previewImage({ |
|
urls: this.detail.resourceImgs |
|
}); |
|
} |
|
|
|
} |
|
}; |
|
</script> |
|
<style> |
|
/* pages/demandHall/resourcesDetail/index.wxss */ |
|
.resourcesDetail-page{ |
|
padding-bottom: 150rpx; |
|
position: relative; |
|
} |
|
.btn-box{ |
|
width: 100%; |
|
height: 150rpx; |
|
line-height: 150rpx; |
|
align-self: center; |
|
background: #fff; |
|
border-top: 1rpx solid #ececec; |
|
text-align: right; |
|
padding-right: 52rpx; |
|
position: fixed; |
|
bottom: 0; |
|
} |
|
.contact-btn{ |
|
display: inline-block; |
|
width: 240rpx; |
|
height: 88rpx; |
|
text-align: center; |
|
line-height: 88rpx; |
|
background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%); |
|
border-radius: 12rpx; |
|
font-size: 32rpx; |
|
color: #fff; |
|
} |
|
.img-box{ |
|
width: 100%; |
|
height: 392rpx; |
|
} |
|
.img-box image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.detail-box{ |
|
padding: 34rpx 40rpx; |
|
} |
|
.r-name{ |
|
font-size: 40rpx; |
|
line-height: 56rpx; |
|
color: #1D1D1D; |
|
} |
|
.tag{ |
|
width: 216rpx; |
|
height: 48rpx; |
|
line-height: 48rpx; |
|
text-align: center; |
|
font-size: 24rpx; |
|
color: #fff; |
|
background: linear-gradient(314deg, #FF5100 0%, #FF8800 100%); |
|
border-radius: 8rpx; |
|
margin: 16rpx 0; |
|
} |
|
.col-line{ |
|
width: 8rpx; |
|
height: 36rpx; |
|
background: #FF7942; |
|
border-radius: 4rpx; |
|
margin-right: 14rpx; |
|
} |
|
.info-item{ |
|
margin-top: 20rpx; |
|
font-size: 28rpx; |
|
line-height: 40rpx; |
|
color: #1D1D1D; |
|
} |
|
.label{ |
|
width: 144rpx; |
|
} |
|
.colG{ |
|
font-size: 28rpx; |
|
line-height: 40rpx; |
|
color: #707070; |
|
margin-left: 20rpx; |
|
} |
|
.mt40{ |
|
margin-top: 40rpx; |
|
} |
|
.company-card-box { |
|
padding: 30rpx 12rpx; |
|
margin-top: 34rpx; |
|
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); |
|
} |
|
.company-logo{ |
|
width: 150rpx; |
|
height: 150rpx; |
|
margin-right: 20rpx; |
|
border-radius: 8rpx; |
|
} |
|
.info{ |
|
width: 70%; |
|
} |
|
.company-name{ |
|
font-size: 32rpx; |
|
line-height: 44rpx; |
|
} |
|
.slogan{ |
|
font-size: 24rpx; |
|
line-height: 34rpx; |
|
color: #666; |
|
margin: 4rpx 0 12rpx; |
|
} |
|
.tags-box{ |
|
margin: 6rpx 0 10rpx; |
|
} |
|
.tag-item{ |
|
width: 112rpx; |
|
height: 36rpx; |
|
display: inline-block; |
|
line-height: 36rpx; |
|
text-align: center; |
|
font-size: 20rpx; |
|
background: linear-gradient(312deg, #FFB788 0%, #F9C8A7 100%); |
|
color: #fff; |
|
border-radius: 4rpx; |
|
margin-right: 8rpx; |
|
} |
|
.bgG{ |
|
background: linear-gradient(134deg, #AEC8F6 0%, #76A6FA 100%); |
|
} |
|
.desc-box{ |
|
/* padding: 0rpx 40rpx; */ |
|
margin-top: 34rpx; |
|
} |
|
.desc-box text{ |
|
font-size: 28rpx; |
|
color: #707070; |
|
line-height: 40rpx; |
|
} |
|
|
|
.swiper-block { |
|
height: 300rpx; |
|
width: 100%; |
|
} |
|
|
|
.swiper-item { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: flex-start; |
|
overflow: unset; |
|
} |
|
.slide-image { |
|
height: 250rpx; |
|
width: 520rpx; |
|
border-radius: 9rpx; |
|
margin: 0rpx 30rpx; |
|
z-index: 1; |
|
} |
|
.active { |
|
transform: scale(1.14); |
|
transition: all 0.2s ease-in 0s; |
|
z-index: 20; |
|
} |
|
</style> |