10 changed files with 230 additions and 6 deletions
@ -0,0 +1,93 @@ |
|||||
|
// pages/info/redmapInfo/index.js
|
||||
|
// pages/info/culturalUnitInfo/index.js
|
||||
|
import commonApi from "../../../utils/https/common" |
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
info:null, |
||||
|
currentIndex:0, |
||||
|
top:0, |
||||
|
htmls:[] |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad: function (options) { |
||||
|
let rect = wx.getMenuButtonBoundingClientRect(),device = wx.getSystemInfoSync(); |
||||
|
let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight; |
||||
|
this.setData({ |
||||
|
top:height |
||||
|
}) |
||||
|
commonApi._post("pbservice/Actcalendar/getRedMapDetail",{ |
||||
|
id:options.id |
||||
|
}).then(res=>{ |
||||
|
res.data.list_img = res.data.list_img?res.data.list_img.split(","):[] |
||||
|
if(res.data.list_img.length==0 && res.data.head_img){ |
||||
|
res.data.list_img.push(res.data.head_img) |
||||
|
} |
||||
|
let htmls = res.data.content?res.data.content.split('<hr style="page-break-after:always;" class="ke-pagebreak" />'):[] |
||||
|
this.setData({ |
||||
|
info:res.data, |
||||
|
htmls:htmls |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
changeSlide(e){ |
||||
|
this.setData({ |
||||
|
currentIndex:e.detail.current |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage: function () { |
||||
|
|
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,5 @@ |
|||||
|
{ |
||||
|
"usingComponents": { |
||||
|
"title":"/pages/component/TitleHeader" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,35 @@ |
|||||
|
<!--pages/info/redmapInfo/index.wxml--> |
||||
|
<wxs src="../../../utils/filter.wxs" module="tool" /> |
||||
|
<title wx:if="{{info}}" title="红色地图详情"></title> |
||||
|
<view wx:if="{{info}}" class="bg" style="top:{{top}}px"> |
||||
|
<swiper class="page" vertical bindchange="changeSlide"> |
||||
|
<swiper-item> |
||||
|
<view class="title">{{info.title}}</view> |
||||
|
<view class="address" wx:if="{{info.address}}"> |
||||
|
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infolocation.png"></image> |
||||
|
<view>地址:{{info.address}}</view> |
||||
|
</view> |
||||
|
<view class="address" wx:if="{{info.mobile}}"> |
||||
|
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infotel.png"></image> |
||||
|
<view>电话:<text style="color:#0B898E">{{info.mobile}}</text></view> |
||||
|
</view> |
||||
|
<swiper wx:if="{{info.list_img.length>0}}" style="width:690rpx;height:560rpx;margin:0 auto;margin-top:30rpx"> |
||||
|
<swiper-item wx:for="{{info.list_img}}"> |
||||
|
<image style="width:690rpx;height:560rpx;display:block;" src="{{item}}" mode="aspectFill"></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<!-- <image wx:else mode="aspectFill" style="width:690rpx;height:560rpx;display:block;margin:0 auto;margin-top:30rpx" src="{{info.headimg}}"></image> --> |
||||
|
<image mode="widthFix" class="infoline1" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
|
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
|
</swiper-item> |
||||
|
<swiper-item wx:for="{{htmls}}"> |
||||
|
<view class="title title2">{{info.company_name}}</view> |
||||
|
<image mode="widthFix" class="infoline1" style="position:static" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<rich-text class="detail" nodes="{{tool.formateRichText(item)}}"></rich-text> |
||||
|
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
|
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<image mode="widthFix" class="infoarrow{{currentIndex<htmls.length?' ani':''}}" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/{{currentIndex<htmls.length?'infoarrow':'infoover'}}.png"></image> |
||||
|
</view> |
||||
@ -0,0 +1,83 @@ |
|||||
|
/* pages/pbService/museum/info/index.wxss */ |
||||
|
.bg { |
||||
|
background: url(https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infobg.png); |
||||
|
background-size: 100% 100%; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
height: 190rpx; |
||||
|
color: #0B898E; |
||||
|
font-size: 48rpx; |
||||
|
font-weight: bold; |
||||
|
margin-left: 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.infoline1 { |
||||
|
display: block; |
||||
|
width: 720rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 190rpx; |
||||
|
} |
||||
|
.page { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.address { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
padding: 18rpx 0; |
||||
|
} |
||||
|
.address image { |
||||
|
display: block; |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 38rpx; |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
.infoline3,.infoline2,.infoarrow { |
||||
|
position: absolute; |
||||
|
width: 250rpx; |
||||
|
bottom: 47rpx; |
||||
|
display: block; |
||||
|
} |
||||
|
.infoline3 { |
||||
|
right: 0; |
||||
|
} |
||||
|
.infoline2 { |
||||
|
left: 0; |
||||
|
} |
||||
|
.infoarrow { |
||||
|
width: 60rpx; |
||||
|
bottom: 26rpx; |
||||
|
left: 50%; |
||||
|
margin-left: -30rpx; |
||||
|
|
||||
|
} |
||||
|
.infoarrow.ani { |
||||
|
-webkit-animation: bounce-down 1.6s linear infinite;animation: bounce-down 1.6s linear infinite; |
||||
|
} |
||||
|
.detail { |
||||
|
display: block; |
||||
|
margin: 20rpx 30rpx; |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
@keyframes bounce-down { |
||||
|
25% {transform: translateY(-10rpx);opacity:0.3;} |
||||
|
50%{transform: translateY(0);opacity:1;} |
||||
|
75% {transform: translateY(10rpx);opacity:1;} |
||||
|
100% {transform: translateY(0);opacity:1;} |
||||
|
} |
||||
|
.title2 { |
||||
|
font-size: 36rpx; |
||||
|
height: 126rpx; |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
Loading…
Reference in new issue