jiazhipeng
12 months ago
17 changed files with 2736 additions and 360 deletions
@ -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"></span> |
||||
|
</view> |
||||
|
|
||||
|
<view class="content"> |
||||
|
<view class="title">{{detail.title}}</view> |
||||
|
<view class="subtitle">{{detail.subtitle}}</view> |
||||
|
<view class="notice" v-if="detail.open_description"> |
||||
|
<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> |
||||
@ -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> |
||||
@ -0,0 +1,575 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="date-all-box"> |
||||
|
<view class="month-box"> |
||||
|
<view @click="changeMonth(index)" :class="'month-item' + (monthIndex == index ? ' active' : '')" |
||||
|
v-for="(item, index) in months" :key="index" v-if="emptyList[index].isShow"> |
||||
|
{{ item }}月 |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="day-header"> |
||||
|
<view class="day-header-item">日</view> |
||||
|
<view class="day-header-item">一</view> |
||||
|
<view class="day-header-item">二</view> |
||||
|
<view class="day-header-item">三</view> |
||||
|
<view class="day-header-item">四</view> |
||||
|
<view class="day-header-item">五</view> |
||||
|
<view class="day-header-item">六</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="day-box" v-if="selectDate"> |
||||
|
<view class="day-item" v-for="(item, index) in emptyList[monthIndex].empty" :key="index"> |
||||
|
<view class="date-item-in"> |
||||
|
<view class="date-num"></view> |
||||
|
<view class="date-price-place"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view |
||||
|
:class="'day-item' + (selectDate['selectMonth'] == months[monthIndex] && selectDate['selectDate'] == index + 1 ? ' active' : '')" |
||||
|
v-for="(item, index) in emptyList[monthIndex].days" :key="index" |
||||
|
> |
||||
|
<view class="date-item-in" @click="selectDateFun(index + 1)"> |
||||
|
<view |
||||
|
:class=" |
||||
|
'date-num' + (prices[months[monthIndex] + '-' + (index + 1)] && prices[months[monthIndex] + '-' + (index + 1)].product_price != null ? ' active' : '') |
||||
|
" |
||||
|
> |
||||
|
{{ index + 1 >= 10 ? index + 1 : '0' + (index + 1) }} |
||||
|
</view> |
||||
|
<view |
||||
|
class="price" |
||||
|
v-if=" |
||||
|
prices[months[monthIndex] + '-' + (index + 1)] && |
||||
|
prices[months[monthIndex] + '-' + (index + 1)].product_price != null && |
||||
|
prices[months[monthIndex] + '-' + (index + 1)].store != null |
||||
|
" |
||||
|
> |
||||
|
￥{{ prices[months[monthIndex] + '-' + (index + 1)].m_price / 100 }} |
||||
|
</view> |
||||
|
<view class="date-price-place" v-else-if="prices[months[monthIndex] + '-' + (index + 1)] && prices[months[monthIndex] + '-' + (index + 1)].store == 0"> |
||||
|
售罄 |
||||
|
</view> |
||||
|
<view class="date-price-place" v-else></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="box" v-for="(item, index) in sku" :key="index"> |
||||
|
<view class="box-top"> |
||||
|
<view class="box-title">{{ item.title }}</view> |
||||
|
<view class="box-tip text-overflow">{{ item.sku_type_info }}</view> |
||||
|
<view :class="'iconfont' + (nums[index] == 0 ? ' disable' : '')" @click="minus(index)">-</view> |
||||
|
<view class="number">{{ nums[index] }}</view> |
||||
|
<view :class="'iconfont' + (nums[index] == selectDate['info'][index].store ? ' disable' : '')" @click="add(index)">+</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="single-price" v-if="selectDate">{{ selectDate['info'][index].money / 100 }}</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="fixed-bottom"> |
||||
|
<text class="fixed-text">合计：</text> |
||||
|
<view class="price">¥{{ totalPrice() / 100 }}</view> |
||||
|
<view class="btn" @tap="order">下一步</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
id: '', |
||||
|
months: [], |
||||
|
monthIndex: 0, |
||||
|
productInfo: null, |
||||
|
sku: [], |
||||
|
nums: [], |
||||
|
selectDate: null, |
||||
|
price: 0, |
||||
|
prices: {}, |
||||
|
emptyList: [ |
||||
|
{ |
||||
|
empty: 0, |
||||
|
days: 0, |
||||
|
isShow: false |
||||
|
}, |
||||
|
{ |
||||
|
empty: 0, |
||||
|
days: 0, |
||||
|
isShow: false |
||||
|
}, |
||||
|
{ |
||||
|
empty: 0, |
||||
|
days: 0, |
||||
|
isShow: false |
||||
|
}, |
||||
|
{ |
||||
|
empty: 0, |
||||
|
days: 0, |
||||
|
isShow: false |
||||
|
}, |
||||
|
{ |
||||
|
empty: 0, |
||||
|
days: 0, |
||||
|
isShow: false |
||||
|
}, |
||||
|
{ |
||||
|
empty: 0, |
||||
|
days: 0, |
||||
|
isShow: false |
||||
|
} |
||||
|
], |
||||
|
years: [] |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.id = option.id |
||||
|
this.getSku() |
||||
|
this.initDate() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 下一步 |
||||
|
order() { |
||||
|
let selectDate = this.selectDate; |
||||
|
let sku = this.sku; |
||||
|
let nums = this.nums; |
||||
|
let allNum = 0; |
||||
|
if (!selectDate) { |
||||
|
uni.showToast({ |
||||
|
title: '请先选择日期', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
sku.map((item, index) => { |
||||
|
item.num = nums[index]; |
||||
|
allNum = allNum + nums[index]; |
||||
|
item.price = selectDate.info[index].money; |
||||
|
}); |
||||
|
if (allNum == 0) { |
||||
|
uni.showToast({ |
||||
|
title: '至少选择一个规格', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let data = { |
||||
|
sku: sku, |
||||
|
selectDate: selectDate, |
||||
|
price: this.totalPrice() |
||||
|
} |
||||
|
this.$store.commit('changeLineInfo',data) |
||||
|
|
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/line/orders' |
||||
|
}) |
||||
|
}, |
||||
|
// 减少数量 |
||||
|
minus(index) { |
||||
|
if (!this.selectDate) { |
||||
|
uni.showToast({ |
||||
|
title: '请先选择出行日期', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
let nums = this.nums; |
||||
|
if (nums[index] == 0) { |
||||
|
return; |
||||
|
} |
||||
|
nums[index] = nums[index] - 1; |
||||
|
this.nums = nums |
||||
|
this.$forceUpdate() |
||||
|
}, |
||||
|
// 添加数量 |
||||
|
add(index) { |
||||
|
if (!this.selectDate) { |
||||
|
uni.showToast({ |
||||
|
title: '请先选择出行日期', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
let nums = this.nums; |
||||
|
let sku = this.sku; |
||||
|
|
||||
|
if (this.selectDate.info[index].store == nums[index]) { |
||||
|
uni.showToast({ |
||||
|
title: '无库存', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
nums[index] = nums[index] + 1; |
||||
|
this.nums = nums |
||||
|
this.$forceUpdate() |
||||
|
}, |
||||
|
// 切换月份 |
||||
|
changeMonth(index) { |
||||
|
this.monthIndex = index |
||||
|
}, |
||||
|
// 选择日期 |
||||
|
selectDateFun(item) { |
||||
|
// 选择日期 |
||||
|
let selectMonth = this.months[this.monthIndex]; |
||||
|
if (!selectMonth) { |
||||
|
return; |
||||
|
} |
||||
|
let info = this.prices[selectMonth + '-' + item]; |
||||
|
if (info && info.product_price && info.product_price !== null && info.store != 0) { |
||||
|
info.selectMonth = selectMonth; |
||||
|
info.selectDate = item; |
||||
|
|
||||
|
this.selectDate = info; |
||||
|
} |
||||
|
}, |
||||
|
// 获取产品下的规格 |
||||
|
getSku() { |
||||
|
this.Post({ |
||||
|
goods_id: this.id |
||||
|
},'/api/goods/getSpecificationsByGoodsId').then(res => { |
||||
|
let nums = []; |
||||
|
res.data.map((item) => { |
||||
|
nums.push(0); |
||||
|
}); |
||||
|
this.sku = res.data, |
||||
|
this.nums = nums |
||||
|
}) |
||||
|
}, |
||||
|
// 总价 |
||||
|
totalPrice() { |
||||
|
let selectDate = this.selectDate; |
||||
|
let nums = this.nums; |
||||
|
let price = 0; |
||||
|
nums.map((num, index) => { |
||||
|
price = price + num * selectDate.info[index].money; |
||||
|
}); |
||||
|
return price |
||||
|
}, |
||||
|
initDate() { |
||||
|
let today = new Date(); |
||||
|
let month = today.getMonth() + 1; |
||||
|
this.months[0] = today.getMonth() + 1 |
||||
|
for (let i = 1; i < 6; i++) { |
||||
|
this.months[i] = (month + i) % 12 == 0 ? 12 : (month + i) % 12 |
||||
|
} |
||||
|
|
||||
|
let year1 = today.getFullYear(); |
||||
|
let year2 = this.months[0] < this.months[1] ? year1 : year1 + 1 |
||||
|
let year3 = this.months[1] < this.months[2] ? year2 : year2 + 1 |
||||
|
let year4 = this.months[2] < this.months[3] ? year3 : year3 + 1 |
||||
|
let year5 = this.months[3] < this.months[4] ? year4 : year4 + 1 |
||||
|
let year6 = this.months[4] < this.months[5] ? year5 : year5 + 1 |
||||
|
|
||||
|
this.years = [year1,year2,year3,year4,year5,year6] |
||||
|
|
||||
|
for (let i = 0; i < 6; i++) { |
||||
|
this.emptyList[i].empty = this.getMonthDays(this.months[i], this.years[i])[1] |
||||
|
this.emptyList[i].days = this.getMonthDays(this.months[i], this.years[i])[0] |
||||
|
} |
||||
|
|
||||
|
// 是否展示日历 |
||||
|
this.Post({ |
||||
|
goods_id: this.id, |
||||
|
start_date: this.formatDate(today), |
||||
|
end_date: this.years[5] + '-' + this.months[5] + '-' + this.emptyList[5].days |
||||
|
},'/api/goods/getStoreByMonth').then(res => { |
||||
|
let data = res.data |
||||
|
for (let i = 0; i < 6; i++) { |
||||
|
this.emptyList[i].isShow = data[i].store > 0 ? true : false |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
let selectDate; |
||||
|
let selectMonth; |
||||
|
this.Post({ |
||||
|
goods_id: this.id, |
||||
|
start_date: this.formatDate(today), |
||||
|
end_date: this.years[5] + '-' + this.months[5] + '-' + this.emptyList[5].days |
||||
|
},'/api/goods/get_product_sku_price_by_date').then(res => { |
||||
|
let prices = {}; |
||||
|
res.data.map((item) => { |
||||
|
// 给规格排序 |
||||
|
for (let i = 0; i < item.info.length; i++) { |
||||
|
for (let j = i + 1; j < item.info.length; j++) { |
||||
|
if (item.info[i].sku_info.id > item.info[j].sku_info.id) { |
||||
|
[item.info[i], item.info[j]] = [item.info[j], item.info[i]]; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
let store = 0; |
||||
|
item.info.map((i) => { |
||||
|
store = store + i.store; |
||||
|
}); |
||||
|
item.store = store; |
||||
|
if (item.store != 0) { |
||||
|
let date = item.date.split('-').splice(1, 2); |
||||
|
let newDate = []; |
||||
|
date.map((d) => { |
||||
|
d = parseInt(d); |
||||
|
newDate.push(d); |
||||
|
}); |
||||
|
if (!selectDate) { |
||||
|
selectDate = newDate[1]; |
||||
|
selectMonth = newDate[0]; |
||||
|
} |
||||
|
prices[newDate.join('-')] = item; |
||||
|
} |
||||
|
}); |
||||
|
this.prices = prices |
||||
|
if (!selectDate) { |
||||
|
return; |
||||
|
} |
||||
|
let info = prices[selectMonth + '-' + selectDate]; |
||||
|
info.selectMonth = selectMonth; |
||||
|
info.selectDate = selectDate; |
||||
|
this.selectDate = info; |
||||
|
this.monthIndex = this.emptyList.findIndex(i => i.isShow == true) |
||||
|
}) |
||||
|
}, |
||||
|
// 获取这个月有几天 |
||||
|
getMonthDays(month, year) { |
||||
|
let date = new Date(year + '/' + month + '/01').getDay(); |
||||
|
if (month == 2) { |
||||
|
if ((year % 100 !== 0 && year % 4 == 0) || year % 400 == 0) { |
||||
|
return [29, date]; |
||||
|
} else { |
||||
|
return [28, date]; |
||||
|
} |
||||
|
} else if ((month < 8 && month % 2 == 1) || (month >= 8 && month % 2 == 0)) { |
||||
|
return [31, date]; |
||||
|
} else { |
||||
|
return [30, date]; |
||||
|
} |
||||
|
}, |
||||
|
formatDate(date){ |
||||
|
const year = date.getFullYear(); |
||||
|
const month = date.getMonth() + 1; |
||||
|
const day = date.getDate(); |
||||
|
return [year, month, day].join('-'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
background: #f6f6f6; |
||||
|
padding-bottom: 200rpx; |
||||
|
} |
||||
|
|
||||
|
.date-all-box { |
||||
|
margin: 0 25rpx; |
||||
|
|
||||
|
.month-box { |
||||
|
padding: 0 20rpx; |
||||
|
height: 116rpx; |
||||
|
display: flex; |
||||
|
border-bottom: 1rpx solid #ccc; |
||||
|
align-items: center; |
||||
|
|
||||
|
.month-item { |
||||
|
margin-right: 70rpx; |
||||
|
font-size: 33rpx; |
||||
|
color: #000; |
||||
|
font-weight: 500; |
||||
|
line-height: 116rpx; |
||||
|
position: relative; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.month-item.active::after { |
||||
|
content: '1'; |
||||
|
display: block; |
||||
|
font-size: 0; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
height: 8rpx; |
||||
|
background: #248BAA; |
||||
|
border-radius: 4rpx; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.day-header { |
||||
|
padding-top: 40rpx; |
||||
|
line-height: 45rpx; |
||||
|
font-size: 29rpx; |
||||
|
color: #000; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
margin-bottom: 50rpx; |
||||
|
|
||||
|
.day-header-item { |
||||
|
width: calc(690rpx / 7); |
||||
|
text-align: center; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.day-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 35rpx; |
||||
|
flex-wrap: wrap; |
||||
|
color: #999; |
||||
|
|
||||
|
.day-item { |
||||
|
width: calc(690rpx / 7); |
||||
|
text-align: center; |
||||
|
flex-shrink: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 30rpx; |
||||
|
|
||||
|
.date-item-in { |
||||
|
width: 98rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
flex-direction: column; |
||||
|
height: 98rpx; |
||||
|
|
||||
|
.date-num { |
||||
|
line-height: 40rpx; |
||||
|
} |
||||
|
.date-num.active { |
||||
|
color: #000; |
||||
|
} |
||||
|
|
||||
|
.price { |
||||
|
font-size: 23rpx; |
||||
|
color: #F84A56; |
||||
|
line-height: 20rpx; |
||||
|
} |
||||
|
.price::after { |
||||
|
content: '起'; |
||||
|
font-size: 17rpx; |
||||
|
} |
||||
|
|
||||
|
.date-price-place { |
||||
|
height: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.day-item.active { |
||||
|
.date-item-in { |
||||
|
background: #248BAA; |
||||
|
color: #fff; |
||||
|
border-radius: 7rpx; |
||||
|
|
||||
|
.price { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.date-num { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
background: white; |
||||
|
margin: 25rpx; |
||||
|
background: #ffffff; |
||||
|
border-radius: 9rpx; |
||||
|
padding: 35rpx 20rpx; |
||||
|
|
||||
|
.box-top { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
line-height: 50rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
|
||||
|
.box-title { |
||||
|
font-size: 31rpx; |
||||
|
color: #000; |
||||
|
} |
||||
|
|
||||
|
.box-tip { |
||||
|
flex: 1; |
||||
|
margin-left: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.iconfont { |
||||
|
color: #000; |
||||
|
font-size: 34rpx; |
||||
|
width: 50rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.iconfont.disable { |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.number { |
||||
|
width: 67rpx; |
||||
|
height: 50rpx; |
||||
|
background: #f0f0f0; |
||||
|
border-radius: 7rpx; |
||||
|
text-align: center; |
||||
|
margin: 0 23rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.single-price { |
||||
|
font-size: 33rpx; |
||||
|
color: #d62828; |
||||
|
text-align: right; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
.single-price::before { |
||||
|
content: '￥'; |
||||
|
font-size: 24rpx; |
||||
|
margin-right: 4rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fixed-bottom { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
height: 148rpx; |
||||
|
background: white; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding-left: 26rpx; |
||||
|
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
||||
|
z-index: 999; |
||||
|
|
||||
|
.fixed-text { |
||||
|
flex-shrink: 0; |
||||
|
font-size: 29rpx; |
||||
|
} |
||||
|
|
||||
|
.price { |
||||
|
flex: 1; |
||||
|
font-size: 36rpx; |
||||
|
color: #F84A56; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 293rpx; |
||||
|
text-align: center; |
||||
|
line-height: 87rpx; |
||||
|
background: linear-gradient(-90deg, #F84A56, #FF9834); |
||||
|
border-radius: 43rpx; |
||||
|
color: #fff; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 500; |
||||
|
margin-left: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,777 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="top-box" v-if="product"> |
||||
|
<view class="product-title">{{ product.title }}</view> |
||||
|
<view class="product-date">{{ selectDate.date }}</view> |
||||
|
<view class="product-num"> |
||||
|
<text class="product-text" v-for="(item, index) in sku" :key="index">{{ item.title }}x{{ item.num }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="user-box"> |
||||
|
<view class="user-box-title">出行人信息</view> |
||||
|
|
||||
|
<!-- <view v-for="(skuItem, skuIndex) in sku" :key="skuIndex"> |
||||
|
<view class="user-item" v-for="(item, index) in skuItem.num" :key="index"> |
||||
|
<text class="user-item-text">{{ skuItem.title }}</text> |
||||
|
|
||||
|
<view v-if="linkmans[skuIndex][index]" class="user-info"> |
||||
|
<text style="margin-right: 30rpx">{{ linkmans[skuIndex][index].name }}</text> |
||||
|
<text>{{ linkmans[skuIndex][index].tel }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<img @tap="showLinkman(skuIndex)" v-if="linkmans[skuIndex][index]" src="https://static.ticket.sz-trip.com/dongtai/images/index/edit.png" class="icon-bianji1" /> |
||||
|
|
||||
|
<view @tap="showLinkman(skuIndex)" v-else class="add-btn"> |
||||
|
+ 添加 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> --> |
||||
|
<view class="user-item"> |
||||
|
<text class="user-item-text">姓名</text> |
||||
|
<input type="number" v-model="reserve_name" placeholder="输入您的姓名" class="user-input"/> |
||||
|
</view> |
||||
|
<view class="user-item"> |
||||
|
<text class="user-item-text">手机号</text> |
||||
|
<input type="number" v-model="reserve_phone" placeholder="输入您的手机号" maxlength="11" class="user-input"/> |
||||
|
<uni-icons type="closeempty" size="20" @click="reserve_phone = ''" v-if="reserve_phone!= ''" style="margin-left: 30rpx;"></uni-icons> |
||||
|
</view> |
||||
|
<!-- <view class="user-item" style="border-bottom: none"> |
||||
|
<text class="user-item-text">订单备注</text> |
||||
|
<input type="text" v-model="remark" placeholder="选填" class="user-input"/> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
|
||||
|
<navigator :url="'/subPackages/order/orderCoupon?allprice='+ price + '&sku_ids='+ sku_ids.toString()" class="coupon-box flex-between"> |
||||
|
<text>优惠券</text> |
||||
|
<view style="display: flex;align-items: center;"> |
||||
|
<view class="add-btn" v-if="!coupon">请选择</view> |
||||
|
<view style="display: flex;align-items: center;color: #FC5109;" v-if="coupon && coupon.CouponActivity"> |
||||
|
<view>-￥{{coupon.CouponActivity.discounts/100}}</view> |
||||
|
</view> |
||||
|
<img src="https://static.ticket.sz-trip.com/changyoutaihu/images/user/rightIcon.png" class="icon-coupon"> |
||||
|
</view> |
||||
|
</navigator> |
||||
|
|
||||
|
<!-- <view class="xy-box"> |
||||
|
<view class="quan flex-center" @click="clickXy"> |
||||
|
<view class="quan-seld" v-if="xySeld"></view> |
||||
|
</view> |
||||
|
<view style="margin-left: 20rpx;"> |
||||
|
请您仔细阅读<span @click="openXz">线路标准退预定须知</span>，点击去支付即代表您已阅读条款内容 |
||||
|
</view> |
||||
|
</view> --> |
||||
|
|
||||
|
<view class="fixed-bottom"> |
||||
|
<view class="order-all-price"> |
||||
|
合计： |
||||
|
<text class="order-all-text"> |
||||
|
¥{{ priceTotal() / 100 }} |
||||
|
</text> |
||||
|
</view> |
||||
|
<view class="order-btn" @tap="order">去支付</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 协议弹框 --> |
||||
|
<!-- <uni-popup ref="popup" type="bottom" :safe-area="false"> |
||||
|
<view class="xzPopup"> |
||||
|
<view v-html="formateRichText(product.reserve_content)"></view> |
||||
|
<img src="https://static.ticket.sz-trip.com/taihu/images/scenic/cha.png" @click="closePopup"> |
||||
|
</view> |
||||
|
</uni-popup> --> |
||||
|
|
||||
|
<!-- 添加出行人弹窗 --> |
||||
|
<uni-popup ref="peoplePopup" type="bottom" backgroundColor="#F4F4F4"> |
||||
|
<view class="people-popup"> |
||||
|
<view class="popup-top"> |
||||
|
<view class="top flex-between"> |
||||
|
<text class="text-overflow" @click="changePeoplePopup('close')"></text> |
||||
|
<text class="confirm" @click="changePeoplePopup('')">确定</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<navigator url="/subPackages/user/myContactsAdd?type=add" class="button">添加出行人</navigator> |
||||
|
<view class="popup-list" v-if="peopleList.length>0"> |
||||
|
<view class="popup-item" v-for="(item,index) in peopleList" :key="index"> |
||||
|
<view class="item-top flex-between"> |
||||
|
<navigator :url="`/subPackages/user/myContactsAdd?type=edit&id=${item.id}`"><img |
||||
|
src="https://static.ticket.sz-trip.com/taizhou/images/detail/edit.png" class="editImg"> |
||||
|
</navigator> |
||||
|
<view class="name">{{ item.name }}</view> |
||||
|
<view class="subtitle"> |
||||
|
<view class="mobile">手机号 {{ item.tel }}</view> |
||||
|
<view class="idCard">{{ item.document_type_text }} {{ item.id_number }}</view> |
||||
|
</view> |
||||
|
<view class="status" :class="item.is_seld?'statuss':'noSelect'" |
||||
|
@click="seldThisPeople(item, index)"> |
||||
|
<img src="https://static.ticket.sz-trip.com/taihu/images/user/dui.png" |
||||
|
v-if="item.is_seld" class="selectImg"> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="item-site" @click="changeDefaultPeople(item,index)"> |
||||
|
<view class="flex-around" v-if="item.is_default==1"> |
||||
|
<view></view> |
||||
|
</view> |
||||
|
<view v-else></view> |
||||
|
设为默认出行人 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
product: this.$store.state.user.lineInfo.product, |
||||
|
sku: this.$store.state.user.lineInfo.sku, |
||||
|
selectDate: this.$store.state.user.lineInfo.selectDate, |
||||
|
linkmans: [], |
||||
|
sku_ids: '', |
||||
|
price: this.$store.state.user.lineInfo.price, |
||||
|
skuIndex: null, |
||||
|
coupon: '', |
||||
|
reserve_name: '', |
||||
|
reserve_phone: '', |
||||
|
reserve_mobile: '', |
||||
|
remark: '', |
||||
|
peopleList: [], |
||||
|
linkmanList: [], |
||||
|
xySeld: false |
||||
|
} |
||||
|
}, |
||||
|
onReady() { |
||||
|
// 清除优惠券 |
||||
|
this.$store.commit("choseCoupon", ""); |
||||
|
// 自动获取手机号 |
||||
|
this.reserve_phone = JSON.parse(uni.getStorageSync('userInfo')).mobile |
||||
|
this.Post({ |
||||
|
goods_id: this.sku[0].goods_id |
||||
|
},'/api/goods/getGoodDetail').then(res => { |
||||
|
this.product = res.data |
||||
|
}) |
||||
|
|
||||
|
let linkmans = []; |
||||
|
let sku_ids = []; |
||||
|
this.sku.map((item) => { |
||||
|
let num = Number(item.num); |
||||
|
linkmans.push(new Array(num)); |
||||
|
sku_ids.push(item.id); |
||||
|
}); |
||||
|
this.linkmans = linkmans |
||||
|
this.sku_ids = sku_ids |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.coupon = this.$store.state.user.coupon |
||||
|
console.log('传过来的优惠券',this.coupon); |
||||
|
|
||||
|
// this.getPeople() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 协议 |
||||
|
clickXy() { |
||||
|
this.xySeld = !this.xySeld |
||||
|
}, |
||||
|
openXz() { |
||||
|
this.$refs.popup.open('bottom') |
||||
|
}, |
||||
|
closePopup() { |
||||
|
this.$refs.popup.close() |
||||
|
}, |
||||
|
// 去支付 |
||||
|
order() { |
||||
|
let flag = true |
||||
|
let product_list = []; |
||||
|
this.sku.map((item, index) => { |
||||
|
if(item.num > 0) { |
||||
|
// let linkman = this.linkmans[index].filter(i => i); |
||||
|
// if(linkman.length < item.num) { |
||||
|
// flag = false |
||||
|
// uni.showToast({ |
||||
|
// title: '请选择对应的出行人', |
||||
|
// icon: 'none' |
||||
|
// }); |
||||
|
// return; |
||||
|
// } |
||||
|
// let pId = [] |
||||
|
// linkman.map(lItem => { |
||||
|
// pId.push(lItem.id) |
||||
|
// }) |
||||
|
product_list.push({ |
||||
|
product_id: this.product.id, |
||||
|
specifications_id: item.id, |
||||
|
num: item.num, |
||||
|
// contact_id: pId, |
||||
|
date: this.selectDate.date |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
if(!this.idChinaName(this.reserve_name)) { |
||||
|
flag = false |
||||
|
uni.showToast({ |
||||
|
title: '请输入联系人', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if(!this.IsTel(this.reserve_phone)) { |
||||
|
flag = false |
||||
|
uni.showToast({ |
||||
|
title: '请输入联系方式', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// if(!this.xySeld) { |
||||
|
// flag = false |
||||
|
// uni.showToast({ |
||||
|
// title: '请先同意预订须知内容', |
||||
|
// icon: 'none' |
||||
|
// }); |
||||
|
// return; |
||||
|
// } |
||||
|
|
||||
|
if(flag){ |
||||
|
let data = { |
||||
|
goods: product_list, |
||||
|
coupon: this.coupon ? this.coupon.id : null, |
||||
|
reserve_name: this.reserve_name, |
||||
|
reserve_phone: this.reserve_phone |
||||
|
}; |
||||
|
|
||||
|
this.Post({ |
||||
|
data: JSON.stringify(data), |
||||
|
method: 'POST', |
||||
|
},'/api/order/place').then(res => { |
||||
|
console.log(res) |
||||
|
if(res.code == 1) { |
||||
|
let order_id = res.data.order_id |
||||
|
this.$store.commit("changeLineInfo", null); |
||||
|
this.$store.commit("choseCoupon", ""); |
||||
|
|
||||
|
this.Post({ |
||||
|
order_id: order_id, |
||||
|
type: "miniprogram", |
||||
|
platform: 'miniprogram' |
||||
|
}, '/api/pay/unify').then(res => { |
||||
|
if (res.data) { |
||||
|
uni.requestPayment({ |
||||
|
nonceStr: res.data.nonceStr, |
||||
|
package: res.data.package, |
||||
|
paySign: res.data.paySign, |
||||
|
signType: res.data.signType, |
||||
|
timeStamp: res.data.timeStamp, |
||||
|
complete() { |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/order/trades' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 总价 |
||||
|
priceTotal() { |
||||
|
let price = 0 |
||||
|
if(this.coupon) { |
||||
|
if (this.coupon.percent == 0) { |
||||
|
price = this.price - this.coupon.CouponActivity.discounts |
||||
|
} else{ |
||||
|
price = this.price - (this.price * this.coupon.CouponActivity.percent/100) |
||||
|
} |
||||
|
}else { |
||||
|
price = this.price |
||||
|
} |
||||
|
return price < 0 ? 0 : price |
||||
|
}, |
||||
|
// 获取出行人列表 |
||||
|
getPeople() { |
||||
|
this.Post({ |
||||
|
offset: 0, |
||||
|
limit: 100 |
||||
|
},'/api/user/contactList').then(res => { |
||||
|
this.peopleList = res.data |
||||
|
this.reserve_mobile = this.peopleList[0].tel |
||||
|
// 如果是添加或者修改完出行人后需要默认选中已选择的出行人 |
||||
|
if(this.linkmanList.length > 0){ |
||||
|
for (let i = 0; i < this.linkmanList.length; i++) { |
||||
|
for (let j = 0; j < this.peopleList.length; j++) { |
||||
|
if(this.peopleList[j].id == this.linkmanList[i].id){ |
||||
|
this.linkmanList[i] = this.peopleList[j] |
||||
|
this.peopleList[j].is_seld = true |
||||
|
this.linkmanList[i].is_seld = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.$forceUpdate() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 设置默认出行人 |
||||
|
changeDefaultPeople(item, index) { |
||||
|
if (item.is_default == 1) { |
||||
|
return |
||||
|
} |
||||
|
this.Post({ |
||||
|
is_default: 1, |
||||
|
name: item.name, |
||||
|
tel: item.tel, |
||||
|
id: item.id, |
||||
|
id_number: item.id_number, |
||||
|
idcard_type: item.idcard_type |
||||
|
},'/api/user/editContact').then(res => { |
||||
|
if(res.code == 200){ |
||||
|
uni.showToast({ |
||||
|
title: '设置成功', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
for (let item of this.peopleList) item.is_default = 0 |
||||
|
this.peopleList[index].is_default = 1 |
||||
|
} |
||||
|
this.$forceUpdate() |
||||
|
}) |
||||
|
}, |
||||
|
// 选择出行人弹框 |
||||
|
showLinkman(skuIndex) { |
||||
|
this.skuIndex = skuIndex |
||||
|
|
||||
|
this.peopleList.map(item => { |
||||
|
if(item.is_seld && item.is_sku != this.sku[this.skuIndex].id) { |
||||
|
item.is_disable = true |
||||
|
}else { |
||||
|
item.is_disable = false |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
this.$refs.peoplePopup.open('bottom') |
||||
|
this.$forceUpdate() |
||||
|
}, |
||||
|
// 选择出行人 |
||||
|
seldThisPeople(item,index) { |
||||
|
let num = 0 |
||||
|
let list = [] |
||||
|
|
||||
|
if(item.is_seld && item.is_disable) { |
||||
|
uni.showToast({ |
||||
|
title: '该联系人已选择为其他规格', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
this.linkmans[this.skuIndex] = [] |
||||
|
this.peopleList.map(items => { |
||||
|
if(items.id == item.id) { |
||||
|
items.is_seld = !items.is_seld |
||||
|
} |
||||
|
if(items.is_seld && !items.is_disable) { |
||||
|
num++; |
||||
|
items.is_sku = this.sku[this.skuIndex].id |
||||
|
this.linkmans[this.skuIndex].push(items) |
||||
|
} |
||||
|
if(items.is_seld) { |
||||
|
this.linkmanList.push(item) |
||||
|
} |
||||
|
}) |
||||
|
if(num > this.sku[this.skuIndex].num) { |
||||
|
item.is_seld = false |
||||
|
this.linkmans[this.skuIndex].splice(this.linkmans[this.skuIndex].findIndex(i => i.id == item.id),1) |
||||
|
uni.showToast({ |
||||
|
title: '该规格最多只能选择'+this.sku[this.skuIndex].num+'个出行人', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
this.$forceUpdate() |
||||
|
console.log(this.peopleList,this.linkmans) |
||||
|
}, |
||||
|
// 确定取消 |
||||
|
changePeoplePopup(type,confirm) { |
||||
|
this.$refs.peoplePopup.close() |
||||
|
this.$forceUpdate() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
background: #f6f6f6; |
||||
|
padding-bottom: 200rpx; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.top-box { |
||||
|
padding: 30rpx 47rpx; |
||||
|
color: #333333; |
||||
|
font-size: 28rpx; |
||||
|
border-bottom: 1rpx solid #ccc; |
||||
|
|
||||
|
.product-title { |
||||
|
color: #000000; |
||||
|
font-size: 33rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 47rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.product-num { |
||||
|
margin-top: 30rpx; |
||||
|
|
||||
|
.product-text { |
||||
|
margin-right: 50rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.user-box { |
||||
|
margin: 25rpx; |
||||
|
background: #ffffff; |
||||
|
border-radius: 9rpx; |
||||
|
|
||||
|
.user-box-title { |
||||
|
// border-bottom: 1rpx solid #ccc; |
||||
|
line-height: 113rpx; |
||||
|
font-size: 33rpx; |
||||
|
color: #000; |
||||
|
font-weight: bold; |
||||
|
padding: 0 20rpx; |
||||
|
} |
||||
|
|
||||
|
.user-item { |
||||
|
margin: 0 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
height: 126rpx; |
||||
|
border-top: 1rpx solid #B8B8B8; |
||||
|
|
||||
|
.user-item-text{ |
||||
|
flex-shrink: 0; |
||||
|
font-size: 31rpx; |
||||
|
color: #000; |
||||
|
font-weight: bold; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.user-info { |
||||
|
font-size: 27rpx; |
||||
|
margin-right: 20rpx; |
||||
|
flex: 1; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.icon-bianji1 { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.add-btn { |
||||
|
display: flex; |
||||
|
width: 140rpx; |
||||
|
height: 57rpx; |
||||
|
border: 1rpx solid #333333; |
||||
|
border-radius: 29rpx; |
||||
|
box-sizing: border-box; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #000; |
||||
|
} |
||||
|
|
||||
|
.user-input { |
||||
|
flex: 1; |
||||
|
font-size: 29rpx; |
||||
|
display: block; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.icon-coupon{ |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
margin-left: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.people-popup { |
||||
|
padding: 26rpx; |
||||
|
min-height: 800rpx; |
||||
|
|
||||
|
.top-box { |
||||
|
height: 80rpx; |
||||
|
|
||||
|
.top { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
color: #000; |
||||
|
height: 80rpx; |
||||
|
font-size: 0; |
||||
|
overflow: hidden; |
||||
|
padding: 0 26rpx; |
||||
|
|
||||
|
text { |
||||
|
text-align: left; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 400; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.confirm { |
||||
|
font-weight: 400; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.popup-list { |
||||
|
height: 666rpx; |
||||
|
overflow: scroll; |
||||
|
|
||||
|
.popup-item { |
||||
|
border-radius: 12rpx; |
||||
|
padding: 0 20rpx; |
||||
|
margin-top: 24rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #333333; |
||||
|
font-weight: 400; |
||||
|
background-color: #FFFFFF; |
||||
|
|
||||
|
.item-top { |
||||
|
padding: 20rpx 12rpx; |
||||
|
|
||||
|
img { |
||||
|
color: #666666; |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
font-size: 30rpx; |
||||
|
color: #000000; |
||||
|
margin: 0 20rpx; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
text { |
||||
|
color: #999999; |
||||
|
margin: 0 20rpx; |
||||
|
} |
||||
|
|
||||
|
.tag { |
||||
|
border-radius: 8rpx; |
||||
|
text-align: center; |
||||
|
color: #333333; |
||||
|
font-size: 20rpx; |
||||
|
padding: 6rpx 15rpx; |
||||
|
background-color: #FFC825; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.com-flex-start { |
||||
|
margin: 0 0 30rpx; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-weight: 400; |
||||
|
flex: 1; |
||||
|
text-align: left; |
||||
|
|
||||
|
.mobile { |
||||
|
margin-bottom: 36rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
line-height: 40rpx; |
||||
|
border-radius: 50%; |
||||
|
text-align: center; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
img { |
||||
|
width: 27rpx; |
||||
|
height: 21rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.statuss { |
||||
|
background: linear-gradient(90deg, #FA2B66, #FF9834); |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.noSelect { |
||||
|
border: 1rpx solid #999999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-site { |
||||
|
color: #666666; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 36rpx 0; |
||||
|
|
||||
|
view { |
||||
|
width: 23rpx; |
||||
|
height: 23rpx; |
||||
|
margin-right: 10rpx; |
||||
|
border: 1rpx solid #999999; |
||||
|
border-radius: 50%; |
||||
|
|
||||
|
view { |
||||
|
width: 8rpx; |
||||
|
height: 8rpx; |
||||
|
background: #000000; |
||||
|
border-radius: 50%; |
||||
|
margin: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.button { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 400; |
||||
|
color: #000000; |
||||
|
text-align: center; |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
background-color: #FFFFFF; |
||||
|
border-radius: 60rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fixed-bottom { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
height: 113rpx; |
||||
|
background: white; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 0 26rpx; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
||||
|
z-index: 1; |
||||
|
|
||||
|
.order-all-price { |
||||
|
flex: 1; |
||||
|
font-size: 29rpx; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
|
||||
|
.order-all-text { |
||||
|
flex: 1; |
||||
|
font-size: 36rpx; |
||||
|
color: #F84A56; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.order-btn { |
||||
|
width: 293rpx; |
||||
|
background: linear-gradient(90deg, #F84A56, #FF9834); |
||||
|
border-radius: 43rpx; |
||||
|
text-align: center; |
||||
|
line-height: 87rpx; |
||||
|
color: #fff; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 500; |
||||
|
margin-left: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.xy-box { |
||||
|
width: 658rpx; |
||||
|
margin: 36rpx auto 0; |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 400; |
||||
|
color: #999999; |
||||
|
display: flex; |
||||
|
|
||||
|
span { |
||||
|
color: #FEB419; |
||||
|
} |
||||
|
|
||||
|
.quan { |
||||
|
min-width: 23rpx; |
||||
|
min-height: 23rpx; |
||||
|
max-width: 23rpx; |
||||
|
max-height: 23rpx; |
||||
|
border: 1px solid #999999; |
||||
|
border-radius: 50%; |
||||
|
|
||||
|
.quan-seld { |
||||
|
width: 12rpx; |
||||
|
height: 12rpx; |
||||
|
background: #FEB419; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.xzPopup { |
||||
|
width: 750rpx; |
||||
|
padding: 33rpx 26rpx 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #FFFFFF; |
||||
|
position: relative; |
||||
|
height: 1200rpx; |
||||
|
overflow-y: scroll; |
||||
|
|
||||
|
view { |
||||
|
padding: 0 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 35rpx; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
position: absolute; |
||||
|
top: 33rpx; |
||||
|
right: 27rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.coupon-box { |
||||
|
height: 113rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
padding: 0 20rpx; |
||||
|
margin: 0 20rpx; |
||||
|
|
||||
|
.add-btn { |
||||
|
width: 153rpx; |
||||
|
line-height: 40rpx; |
||||
|
background: #EE3E3B; |
||||
|
border-radius: 9rpx; |
||||
|
text-align: center; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.icon-coupon{ |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
margin-left: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,105 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="topLeft flex-center"> |
||||
|
<span class="iconfont" @click="goBack"></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> |
||||
@ -0,0 +1,147 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="topLeft flex-center"> |
||||
|
<span class="iconfont" @click="goBack"></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> |
||||
@ -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> |
||||
Loading…
Reference in new issue