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