Myth
4 years ago
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