chenkainan
/
tongli_WeChat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

提交

master
chenkainan 12 months ago
parent
c69b8c34f5
commit
9a10ecdc51
7 changed files with 743 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      pages.json
  2. 20
      pages/index/index.vue
  3. 230
      subPackages/leyou/detail.vue
  4. 153
      subPackages/leyou/index.vue
  5. 105
      subPackages/novelty/detail.vue
  6. 147
      subPackages/user/getCoupon.vue
  7. 59
      subPackages/video/video.vue

33
pages.json
View File

@ -241,6 +241,13 @@
"navigationBarTitleText": "优惠券"
}
},
{
"path": "user/getCoupon",
"style": {
"navigationBarTitleText": "领券中心",
"navigationStyle": "custom"
}
},
{
"path": "user/collect",
"style": {
@ -311,6 +318,32 @@
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "leyou/index",
"style": {
"navigationBarTitleText": "乐游同里"
}
},
{
"path": "leyou/detail",
"style": {
"navigationBarTitleText": "乐游同里详情",
"navigationStyle": "custom"
}
},
{
"path": "video/video",
"style": {
"navigationBarTitleText": "视频"
}
},
{
"path": "novelty/detail",
"style": {
"navigationBarTitleText": "同里新鲜事",
"navigationStyle": "custom"
}
}
]
}],

20
pages/index/index.vue
View File

@ -30,7 +30,7 @@
</view>
<view class="notice-bottom flex-between">
<image src="https://static.ticket.sz-trip.com/tongli/images/index/menpiao.png" mode="" @click="gotoPath(navList[0].path)"></image>
<image src="https://static.ticket.sz-trip.com/tongli/images/index/menpiao.png" mode="" @click="gotoPath('/subPackages/ticketBooking/ticketBooking')"></image>
<image src="https://static.ticket.sz-trip.com/tongli/images/index/ditu.png" mode=""></image>
</view>
</view>
@ -97,7 +97,7 @@
</view>
</view>
<!-- 游记攻略 -->
<!-- 同里新鲜事 -->
<view>
<view class="title-box flex-between">
<image :src="showImg(homeUi.yjgl)" mode=""></image>
@ -105,7 +105,7 @@
<view class="strategy-box">
<view v-for="(num,nums) in 2" :key="nums">
<view v-for="(item,index) in strategyList" :key="index" class="strategy-item" v-if="index % 2 === nums" @click="goCalendarDetail(item)">
<view v-for="(item,index) in strategyList" :key="index" class="strategy-item" v-if="index % 2 === nums" @click="gotoPath('/subPackages/novelty/detail?id='+item.id)">
<image class="strategy-image" :src="showImg(item.image)" mode="widthFix"></image>
<view class="strategy-content">
<view class="strategy-title">{{item.title}}</view>
@ -117,6 +117,9 @@
<view class="strategy-more" @click="strategyMore" v-show="showMore">查看更多</view>
</view>
<!-- 领券中心 -->
<image src="https://static.ticket.sz-trip.com/tongli/images/index/getCoupon.png" @click="gotoPath('/subPackages/user/getCoupon')" class="couponImg"></image>
</view>
</template>
@ -130,7 +133,7 @@
{
img: 'https://static.ticket.sz-trip.com/tongli/images/index/lytl.png',
text: '乐游同里',
path: '/subPackages/ticketBooking/ticketBooking'
path: '/subPackages/leyou/index'
},
{
img: 'https://static.ticket.sz-trip.com/tongli/images/index/hdrl.png',
@ -739,4 +742,13 @@
font-size: 27rpx;
color: #248BAA;
}
.couponImg {
position: fixed;
right: 27rpx;
bottom: 38rpx;
width: 94rpx;
height: 105.33rpx;
z-index: 100;
}
</style>

230
subPackages/leyou/detail.vue
View File

@ -0,0 +1,230 @@
<template>
<view class="bg scroll" v-if="detail.list_images" :style="{backgroundImage: 'url('+showImg(detail.list_images.split(',')[0])+')'}">
<view class="topLeft flex-center">
<span class="iconfont" @click="goBack">&#xe660;</span>
</view>
<view class="content">
<view class="title">{{detail.title}}</view>
<view class="subtitle">{{detail.subtitle}}</view>
<view class="notice">
<uni-notice-bar showIcon scrollable single :text="detail.open_description" color="#fff"
background-color="rgba(255, 255, 255, .26)" speed="50"></uni-notice-bar>
</view>
</view>
<!-- 音视频 -->
<view class="box">
<view>景点解说</view>
<view>
<view v-for="(item,index) in detail.multimedia" :key="index" class="item" @click="play(item,index)">
<image :src="showImg(item.head_img)" mode="aspectFill" class="item-img"></image>
<view class="item-title text-overflow">{{item.title}}</view>
<image src="https://static.ticket.sz-trip.com/tongli/images/index/sound.png" class="item-icon" v-if="item.type == 'audio' && !item.status"></image>
<image src="https://static.ticket.sz-trip.com/tongli/images/index/pause.png" class="item-icon" v-if="item.type == 'audio' && item.status"></image>
<image src="https://static.ticket.sz-trip.com/tongli/images/index/play.png" class="item-icon" v-if="item.type == 'video'"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
detail: {},
audio: null,
isPlayIndex: null
}
},
onLoad(option) {
this.Post({
id: option.id
}, '/api/scenic/getScenicById').then(res => {
if (res.data.flag == 0) {
uni.showToast({
title: '商品不存在或已下架',
icon: 'none'
})
setTimeout(() => {
this.goBack()
}, 2000)
}
res.data.multimedia.map(item => {
item.type = item.multimedia_url.includes('mp3') ? 'audio' : 'video'
item.status = false // 是否播放
})
this.detail = res.data
});
},
onShow() {
this.isPlayIndex = null
},
onHide() {
if(this.audio){
// 停止播报（销毁当前实例）
this.audio.destroy()
}
},
onUnload() {
if(this.audio){
// 停止播报（销毁当前实例）
this.audio.destroy()
}
},
methods: {
// 播放音视频
play(item,index) {
if(item.type == 'audio') {
// 判断新音频链接是否与正在播放链接相同
if(this.audio && this.audio.src == this.showImg(item.multimedia_url)) {
// 当前是否是暂停或停止状态，true 表示暂停或停止，false 表示正在播放
if(this.audio.paused) {
this.audio.play()
}else {
this.audio.pause()
}
}else {
// 是否存在audio组件
if(this.audio) {
// 如果存在停止音频
this.detail.multimedia[this.isPlayIndex].status = false
this.audio.stop(); // 停止当前音频
this.audio = null;
}
// 不存在，创建音频
this.audio = uni.createInnerAudioContext();
this.audio.src = this.showImg(item.multimedia_url)
this.audio.play()
}
if(this.audio) {
this.audio.onEnded(() => {
// 播放结束
item.status = false
});
}
this.isPlayIndex = index
item.status = !item.status
}else {
uni.navigateTo({
url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(item))
})
}
}
}
}
</script>
<style scoped lang="scss">
.bg {
width: 100vw;
height: 100vh;
background-size: auto 100%;
animation: scroll 10s infinite;
overflow: hidden;
background-repeat: no-repeat;
}
@keyframes scroll {
0% {
background-position: 0%;
}
100% {
background-position: -1000px;
}
/* 500px 是背景图片宽度的一半 */
}
.content {
width: 670rpx;
position: absolute;
top: 235rpx;
left: 40rpx;
.title {
font-weight: 500;
font-size: 48rpx;
color: #FFFFFF;
}
.subtitle {
margin-top: 35rpx;
font-weight: 500;
font-size: 31rpx;
color: #FFFFFF;
}
.notice {
margin-top: 35rpx;
height: 80rpx;
border-radius: 33rpx;
overflow: hidden;
}
}
.box {
position: absolute;
bottom: 79rpx;
width: 100%;
padding-left: 42rpx;
&>view:first-child {
font-weight: 500;
font-size: 37rpx;
color: #FFFFFF;
padding-left: 12rpx;
}
&>view:last-child {
overflow-x: scroll;
overflow-y: hidden;
font-weight: bold;
font-size: 31rpx;
color: #FFFFFF;
display: flex;
margin-top: 28rpx;
}
&>view:last-child::-webkit-scrollbar {
display: none;
}
.item {
width: 206rpx;
height: 254rpx;
background: rgba(255, 255, 255, .4);
border-radius: 20rpx;
margin-right: 20rpx;
padding: 8rpx;
flex-shrink: 0;
position: relative;
.item-img {
width: 190rpx;
height: 190rpx;
border-radius: 13rpx;
}
.item-title {
width: 190rpx;
font-weight: bold;
font-size: 31rpx;
color: #FFFFFF;
text-align: center;
}
.item-icon {
position: absolute;
width: 46rpx;
height: 46rpx;
top: 80rpx;
left: 80rpx;
}
}
}
</style>

153
subPackages/leyou/index.vue
View File

@ -0,0 +1,153 @@
<template>
<view class="bg">
<swiper class="swiper-box" :circular="true" previous-margin="0" next-margin="70rpx" :duration="800"
:current="current" @change="swiperChange">
<swiper-item v-for="(item, index) in list" :key="index" class="swiper-item">
<view class="swiper-item" :class="['swiper-item', {'active': index == current}]">
<image :src="showImg(item.image)" mode="aspectFill" class="swiper-img"></image>
<view class="content">
<view class="title text-overflowRows">{{item.title}}</view>
<view class="tags" v-if="item.label">
<view class="tag" v-for="(tagItem, tagIndex) in item.label.split(',').slice(0,2)" :key="tagIndex">{{tagItem}}</view>
</view>
<view class="address text-overflowRows" v-if="item.address">
<image src="https://static.ticket.sz-trip.com/tongli/images/index/location.png" mode=""></image>
{{item.address}}
</view>
<navigator :url="'/subPackages/leyou/detail?id='+item.id" class="btn">
查看更多 >
</navigator>
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
current: 0,
}
},
onShow() {
this.getList()
},
methods: {
getList() {
https://tlgz.sz-trip.com?scenic_type_id=11&offset=0&limit=10&lon=120&lat=30&token=96035795-fe93-4db8-8cf3-aeabbdb4e8c4
this.Post({
scenic_type_id: 12,
offset: 0,
limit: 100
},'/api/Scenic/getScenicByType').then(res => {
this.list = res.data
})
},
//轮播图左右滑动
swiperChange(e) {
let {
current,
source
} = e.detail;
//在自动或手动的时候才赋予current值
if (source === 'autoplay' || source === 'touch') {
this.current = current;
}
},
}
}
</script>
<style lang="scss" scoped>
.bg {
min-height: 100vh;
padding: 40rpx 0 0 40rpx;
}
.swiper-box {
height: 1267rpx;
.swiper-item {
width: 640rpx;
height: 1267rpx;
border-radius: 27rpx;
position: relative;
.swiper-img {
width: 100%;
height: 100%;
border-radius: 27rpx;
position: absolute;
left: 0;
transform: scale(0.9);
}
.active {
width: 640rpx;
height: 1267rpx;
.swiper-img {
transform: scale(1);
}
}
.content {
position: absolute;
width: 530rpx;
left: 40rpx;
bottom: 50rpx;
.title {
font-weight: 500;
font-size: 44rpx;
color: #FFFFFF;
}
.tags {
display: flex;
margin-top: 28rpx;
.tag {
line-height: 47rpx;
border-radius: 8rpx;
border: 1rpx solid #FFFFFF;
padding: 0 12rpx;
margin-right: 20rpx;
font-weight: 500;
font-size: 27rpx;
color: #FFFFFF;
}
}
.address {
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
margin-top: 28rpx;
image {
width: 30.67rpx;
height: 36.67rpx;
vertical-align: middle;
margin-right: 10rpx;
}
}
.btn {
width: 253rpx;
line-height: 73rpx;
background: rgba(255, 255, 255, .26);
border-radius: 37rpx;
text-align: center;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
margin-top: 28rpx;
}
}
}
}
</style>

105
subPackages/novelty/detail.vue
View File

@ -0,0 +1,105 @@
<template>
<view class="bg">
<view class="topLeft flex-center">
<span class="iconfont" @click="goBack">&#xe660;</span>
</view>
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)"
indicator-active-color="#fff" v-if="detail.images">
<swiper-item v-for="(item, index) in detail.images.split(',')" :key="item.id">
<view class="swiper-item">
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
<view class="topBox">
<view class="title text-overflowRows">{{detail.title}}</view>
<view class="name">
<image src="https://static.ticket.sz-trip.com/tongli/images/index/noveltyUser.png" mode=""></image>
{{detail.author}}
</view>
</view>
<view class="content" v-html="formateRichText(detail.content)"></view>
</view>
</template>
<script>
export default {
data() {
return {
detail: {}
}
},
onLoad(option) {
this.Post({id: option.id},'/api/article/getArticleById').then(res => {
if (res.data.flag == 0) {
uni.showToast({title: '文章不存在或已下架',icon: 'none'})
setTimeout(() => {this.goBack()}, 2000)
}
this.detail = res.data;
});
}
}
</script>
<style lang="scss" scoped>
.bg {
width: 750rpx;
min-height: 100vh;
background: #F7F7F7;
padding-bottom: 100rpx;
}
.swiper {
height: 500rpx;
.swiper-item {
width: 100%;
height: 500rpx;
.item-img {
width: 750rpx;
height: 500rpx;
}
}
}
.topBox {
width: 697rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding: 22rpx 48rpx 34rpx 26rpx;
margin: 26rpx auto 0;
.title {
font-weight: bold;
font-size: 35rpx;
color: #000000;
}
.name {
font-weight: 500;
font-size: 25rpx;
color: #666666;
display: flex;
align-items: center;
margin-top: 35rpx;
image {
width: 23.33rpx;
height: 23.33rpx;
margin-right: 12rpx;
}
}
}
.content {
width: 697rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin: 42rpx auto 0;
padding: 36rpx 28rpx;
}
</style>

147
subPackages/user/getCoupon.vue
View File

@ -0,0 +1,147 @@
<template>
<view class="bg">
<view class="topLeft flex-center">
<span class="iconfont" @click="goBack">&#xe660;</span>
</view>
<img :src="showImg(headImg)" class="topImg" />
<view v-for="(item,index) in list" :key="index" class="item">
<view class="item-left">
<view>{{item.discounts / 100}}</view>
<view>满{{item.min_limit / 100}}可用</view>
</view>
<view class="item-right flex-column">
<view>{{item.discounts / 100}}元优惠券</view>
<view class="subtitle text-overflow">有效期：{{item.open_time.slice(0,10)}}-{{item.end_time.slice(0,10)}}</view>
<view class="flex-between">
<view class="subtitle" @click="note = item.note;$refs.popupRule.open()">使用规则 ></view>
<view class="btn" @click="getCoupon(item.id)">立即领取</view>
</view>
</view>
</view>
<uni-popup ref="popupRule" type="center">
<view class="rule-box" >
{{note}}
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
list:[],
headImg: '',
note: ''
}
},
onReady() {
this.getHeadImg('line').then(res => {this.headImg = res})
},
onShow() {
this.getList()
},
methods: {
getList() {
this.Post({
tag_id: 2
},'/api/coupon/getTagCouponActList').then(res => {
this.list = res.data
})
},
// 领取优惠券
getCoupon(id) {
this.Post({
ids: id
},'/api/coupon/getCouponsByActivityIds').then(res => {
if(res.code == 1) {
uni.showToast({
title: '优惠券领取成功!',
icon: 'none'
});
}
})
}
}
}
</script>
<style lang="scss" scoped>
.bg {
min-height: 100vh;
background: #FFFFFF;
padding-bottom: 200rpx;
}
.topImg {
width: 100%;
height: 440rpx;
}
.item {
width: 696.67rpx;
height: 200rpx;
background-image: url('https://static.ticket.sz-trip.com/tongli/images/index/couponBg.png');
background-size: 100% 100%;
margin: 27rpx auto 0;
padding: 0 20rpx 0 50rpx;
display: flex;
justify-content: space-between;
.item-left {
padding: 45rpx 0 29rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
font-weight: 500;
font-size: 27rpx;
color: #FFFFFF;
text-align: center;
&>view:first-child {
font-weight: bold;
font-size: 57rpx;
color: #FFFFFF;
}
&>view:first-child::before {
font-size: 32rpx;
content: '￥';
}
}
.item-right {
width: 410rpx;
height: 200rpx;
padding: 25rpx 0 20rpx;
font-weight: bold;
font-size: 32rpx;
color: #111111;
justify-content: space-between;
.subtitle {
font-weight: 400;
font-size: 25rpx;
color: #333333;
}
.btn {
width: 140rpx;
line-height: 51rpx;
background: linear-gradient(0deg, #FC5109, #FC930A);
border-radius: 25rpx;
text-align: center;
font-weight: 500;
font-size: 27rpx;
color: #FFFFFF;
}
}
}
.rule-box {
width: 70vw;
padding: 20rpx;
background-color: #fff;
}
</style>

59
subPackages/video/video.vue
View File

@ -0,0 +1,59 @@
<template>
<view class="bg">
<video :src="showImg(src)" controls class="myVideo" :poster="poster"></video>
<view class="title">
{{title}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: '',
poster: '',
title: ''
}
},
onLoad(option) {
const item = JSON.parse(decodeURIComponent(option.item));
this.src = item.multimedia_url
this.poster = item.head_img
this.title = item.title
},
onReady() {
uni.setNavigationBarTitle({
title: this.title
})
}
}
</script>
<style scoped lang="scss">
.bg {
width: 100%;
height: 100vh;
position: relative;
}
.myVideo {
width: 100%;
height: 100vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.title {
width: 699rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 29rpx;
color: #FFFFFF;
position: fixed;
left: 28rpx;
bottom: 140rpx;
}
</style>
Write Preview
Loading…
Cancel
Save