chenkainan
7 months ago
17 changed files with 2729 additions and 25 deletions
@ -0,0 +1,205 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<!-- 使用日期 --> |
||||
|
<view class="date-box"> |
||||
|
<view class="dateList" id="dateList"> |
||||
|
<view class="date flex-column" v-for="(item,index) in dateList" :key="index" :id="'dateItem_' + index" |
||||
|
:class="index == dateIndex && item.stock!=0?'active':''" @click="handleChangeDate(item,index)"> |
||||
|
<view class="weekDay">{{ShowDateDay(new Date(item.date).getDay())}}</view> |
||||
|
<view class="dateNum">{{getDatePrefix(item)}}</view> |
||||
|
<view class="price" v-if="item.stock != 0">{{item.money == 0? '免费' : '￥' + (item.money / 100)}}</view> |
||||
|
<view class="noPrice" v-if="item.stock == 0">售罄</view> |
||||
|
</view> |
||||
|
<view class="more flex-around" @click="handleOpenCal"> |
||||
|
<view>更多<br>日期</view> |
||||
|
<view>></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="stock-box" v-if="stockList && stockList.length > 0"> |
||||
|
<view v-for="(item,index) in stockList" :key="index" |
||||
|
:class="['stockItem', stockIndex == index && item.stock_number>0?'active': item.stock_number == 0? 'disabled' : '']" |
||||
|
@click="handleChangeStock(item,index)"> |
||||
|
{{item.start_time}}-{{item.end_time}} |
||||
|
{{item.stock_number == 0? '无票' : '有票'}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import moment from "moment"; |
||||
|
export default { |
||||
|
props: { |
||||
|
dateList: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
dateIndex: { |
||||
|
type: Number, |
||||
|
default: null |
||||
|
}, |
||||
|
stockList: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
stockIndex: { |
||||
|
type: Number, |
||||
|
default: null |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 日期前加今天明天 |
||||
|
getDatePrefix(item) { |
||||
|
if (!item) { |
||||
|
proxy.$toast('价格日历有误') |
||||
|
return '' |
||||
|
} |
||||
|
let date = item.date |
||||
|
let nowDate = moment(new Date()).format('yyyy-MM-DD') |
||||
|
let tomDate = moment(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)).format('yyyy-MM-DD') |
||||
|
let aftDate = moment(new Date(new Date().getTime() + 24 * 60 * 60 * 1000 * 2)).format('yyyy-MM-DD') |
||||
|
let pre = '' |
||||
|
if (date == nowDate) pre = '今天' |
||||
|
else if (date == tomDate) pre = '明天' |
||||
|
else if (date == aftDate) pre = '后天' |
||||
|
return date.substring(5, 10) |
||||
|
}, |
||||
|
handleChangeDate(item, index) { |
||||
|
if (item.stock != 0) { |
||||
|
let data = { |
||||
|
item, index |
||||
|
} |
||||
|
this.$emit('changeDate', data); |
||||
|
} |
||||
|
}, |
||||
|
handleChangeStock(item, index) { |
||||
|
if (item.stock_number != 0) { |
||||
|
let data = { |
||||
|
item, index |
||||
|
} |
||||
|
this.$emit('changeStock', data); |
||||
|
} |
||||
|
}, |
||||
|
handleOpenCal() { |
||||
|
this.$emit('openCal'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.date-box{ |
||||
|
height: auto; |
||||
|
position: relative; |
||||
|
|
||||
|
.ticket-title{ |
||||
|
padding-left: 20rpx; |
||||
|
border-bottom: 1rpx solid #CCCCCC; |
||||
|
font-size: 33rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
height: 113rpx; |
||||
|
line-height: 113rpx; |
||||
|
} |
||||
|
|
||||
|
.dateList{ |
||||
|
height: 164rpx; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-right: 120rpx; |
||||
|
overflow-x: auto; |
||||
|
|
||||
|
.date{ |
||||
|
width: 120rpx; |
||||
|
height: 133rpx; |
||||
|
border-radius: 10rpx; |
||||
|
justify-content: space-around; |
||||
|
background: #F5F5F5; |
||||
|
margin-right: 15rpx; |
||||
|
flex-shrink: 0; |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
.dateNum{ |
||||
|
|
||||
|
} |
||||
|
.price{ |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #EE3E3B; |
||||
|
} |
||||
|
.noPrice{ |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.active{ |
||||
|
background: #00AEA0; |
||||
|
color: #FFFFFF; |
||||
|
border: none; |
||||
|
.dateNum{ |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.price{ |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.more{ |
||||
|
width: 120rpx; |
||||
|
height: 164rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 27rpx; |
||||
|
color: #00AEA0; |
||||
|
position: absolute; |
||||
|
right: -5rpx; |
||||
|
padding-left: 20rpx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
} |
||||
|
.dateList::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.stock-box{ |
||||
|
margin-top: 34rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.stockItem{ |
||||
|
width: 340rpx; |
||||
|
height: 64rpx; |
||||
|
background: #F5F5F5; |
||||
|
border-radius: 10rpx; |
||||
|
text-align: center; |
||||
|
line-height: 64rpx; |
||||
|
font-weight: 400; |
||||
|
font-size: 25rpx; |
||||
|
color: #000000; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.active{ |
||||
|
background: #00AEA0; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.disabled{ |
||||
|
color: #999999; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,11 @@ |
|||||
|
{ |
||||
|
"requires": true, |
||||
|
"lockfileVersion": 1, |
||||
|
"dependencies": { |
||||
|
"moment": { |
||||
|
"version": "2.30.1", |
||||
|
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz", |
||||
|
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,75 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="" id="cpts" v-html="formateRichText(info.detail)"></view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
swiperCurrent: 1, |
||||
|
info: {}, |
||||
|
} |
||||
|
}, |
||||
|
onShow(options) { |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.id = options.id; |
||||
|
this.getInfo(); |
||||
|
}, |
||||
|
methods: { |
||||
|
swiperChange (e) { |
||||
|
this.swiperCurrent = e.detail.current+1 |
||||
|
}, |
||||
|
// 获取信息 |
||||
|
getInfo() { |
||||
|
this.Post({id: this.id},'/api/activity/getActivityCalendarDetail').then(res => { |
||||
|
if (res.data.flag == 0) { |
||||
|
uni.showToast({title: '商品不存在或已下架',icon: 'none'}) |
||||
|
setTimeout(() => {this.goBack()}, 2000) |
||||
|
} |
||||
|
// res.data.is_collect = 0 // 收藏图变更慢 |
||||
|
this.info = res.data; |
||||
|
}); |
||||
|
}, |
||||
|
// 收藏 |
||||
|
collect() { |
||||
|
this.Post({type: 7,id: this.id},'/api/scenic/collect').then(res => { |
||||
|
if (res) { |
||||
|
uni.showToast({title: res.msg,icon: 'none'}); |
||||
|
this.info.is_collect = !this.info.is_collect |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
share () { |
||||
|
var pages = getCurrentPages() //获取加载的页面 |
||||
|
var view = pages[pages.length - 1] //获取当前页面的对象 |
||||
|
uni.share({ |
||||
|
provider: "weixin", |
||||
|
scene: "WXSceneSession", |
||||
|
type: 0, |
||||
|
href: `${view.route}`, |
||||
|
title: this.info.title, |
||||
|
imageUrl: this.showImg(this.info.image), |
||||
|
success: function (res) { |
||||
|
console.log("success:" + JSON.stringify(res)); |
||||
|
}, |
||||
|
fail: function (err) { |
||||
|
console.log("fail:" + JSON.stringify(err)); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.bg{ |
||||
|
min-height: 100vh; |
||||
|
background: #F8F8F8; |
||||
|
padding: 25rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,609 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<!-- <span class="iconfont topLeft" @click="goBack"></span> --> |
||||
|
<image :src="showImg(topImg)" class="topImg"></image> |
||||
|
|
||||
|
<view class="calendar"> |
||||
|
<view class="calendar-top flex-between"> |
||||
|
<view @click="preNextDate(0)"> |
||||
|
<img src="https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/left.png" class="iconfont" /> |
||||
|
{{ monthShow ? '上一月' : '上一周' }} |
||||
|
</view> |
||||
|
<view>{{year}}年{{month}}月</view> |
||||
|
<view @click="preNextDate(1)"> |
||||
|
{{ monthShow ? '下一月' : '下一周' }} |
||||
|
<img src="https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/right.png" class="iconfont" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="calendar-bottom"> |
||||
|
<view class="week-item" v-for="(item,index) in weekList" :key="index"> |
||||
|
{{item}} |
||||
|
</view> |
||||
|
|
||||
|
<view v-for="(item, index) in everyDay" :key="item.day" class="day-box flex-center" :class="(nowDay > item.date) ? 'grayDate' : ''" v-if="monthShow"> |
||||
|
<view class="day-item" :class="selectDay == item.date ? 'daySelect' : ''" @click="changeDate(item.date)"> |
||||
|
{{ nowDay== item.date ? '今日' : item.day }} |
||||
|
<view class="day-point" v-if="(item.day && selectDay != item.date) && item.flag"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view v-for="(item, index) in weekDates" :key="index" class="day-box flex-center" :class="(nowDay > getNowTime(item)) ? 'grayDate' : ''" v-if="!monthShow"> |
||||
|
<view class="day-item" :class="selectDay == getNowTime(item) ? 'daySelect' : ''" @click="changeDate(getNowTime(item))"> |
||||
|
{{ nowDay == getNowTime(item) ? '今日' : getNowTime(item).slice(-2) }} |
||||
|
<view class="day-point" v-if="(item && selectDay != getNowTime(item)) && item.flag"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="" style="width: 100%;height: 50rpx;padding: 20rpx;" @click="changeWeekMonth"> |
||||
|
<img :src="monthShow ? 'https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/top.png' : 'https://static.ticket.sz-trip.com/hsrNewTown/images/calendar/bottom.png'" class="iconfont" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 活动列表 --> |
||||
|
<view class="box"> |
||||
|
<view class="search-box"> |
||||
|
<img src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png" class="search-img" /> |
||||
|
<input type="text" placeholder="搜索" v-model="keywords" @confirm="getList();"/> |
||||
|
</view> |
||||
|
|
||||
|
<view class="type-box flex-between"> |
||||
|
<view :class="['type-item',{'type-active': index == typeIndex}]" v-for="(item,index) in typeList" :key="index" |
||||
|
@click="typeIndex = index;getList();"> |
||||
|
{{item.title}} |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item" v-for="(item,index) in list" :key="index" @click="viewDetail(item)"> |
||||
|
<image :src="showImg(item.image)" mode="aspectFill" class="item-img"></image> |
||||
|
<view class="content flex-column"> |
||||
|
<view class="title text-overflowRows">{{item.title}}</view> |
||||
|
<!-- <view class="tag text-overflow" v-if="item.keyword">{{item.keyword}}</view> --> |
||||
|
<view class="subtitle text-overflow" v-if="item.address">地址：{{item.address}}</view> |
||||
|
<view class="subtitle text-overflow" v-if="item.start_time && item.end_time">时间：{{item.start_time}} - {{item.end_time}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
weekList: ['日', '一', '二', '三', '四', '五', '六'], |
||||
|
monthShow: false, |
||||
|
year: 0, |
||||
|
month: 0, |
||||
|
day: 0, |
||||
|
week: '', |
||||
|
nowDay: '', |
||||
|
selectDay: '', |
||||
|
everyDay: [], |
||||
|
weekDates: [], |
||||
|
list: [], |
||||
|
keywords: '', |
||||
|
typeList: [ |
||||
|
{ |
||||
|
title: '热门推荐', |
||||
|
id: '1' |
||||
|
}, |
||||
|
{ |
||||
|
title: '活动赛事', |
||||
|
id: '2' |
||||
|
}, |
||||
|
{ |
||||
|
title: '精美展览', |
||||
|
id: '3' |
||||
|
}, |
||||
|
{ |
||||
|
title: '文艺演出', |
||||
|
id: '4' |
||||
|
} |
||||
|
], |
||||
|
typeIndex: 0, |
||||
|
topImg: '' |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.year = Number(this.getNowTime(new Date(), 2).slice(0, 4)); |
||||
|
this.month = Number(this.getNowTime(new Date(), 2).slice(5, 7)); |
||||
|
this.day = Number(this.getNowTime(new Date(), 2).slice(8, 10)); |
||||
|
this.nowDay = this.getNowTime(new Date()) |
||||
|
this.selectDay = this.getNowTime(new Date()) |
||||
|
// if(uni.getSystemInfoSync().platform == 'ios'){ |
||||
|
// this.getEveryDay(this.year + '/' + this.month + '/' + this.day); |
||||
|
// }else{ |
||||
|
// this.getEveryDay(this.year + '-' + this.month); |
||||
|
// } |
||||
|
this.getWeekDates(new Date()) |
||||
|
|
||||
|
this.getList() |
||||
|
this.getTopImg() |
||||
|
}, |
||||
|
methods: { |
||||
|
async getTopImg() { |
||||
|
this.topImg = await this.getHeadImg('calendar') |
||||
|
}, |
||||
|
// 列表 |
||||
|
getList() { |
||||
|
this.Post({ |
||||
|
date: this.selectDay, |
||||
|
offset: 0, |
||||
|
limit: 100, |
||||
|
type_id: this.typeList[this.typeIndex].id, |
||||
|
title: this.keywords |
||||
|
},'/api/activity/getActivityCalendar').then(res => { |
||||
|
this.list = res.data |
||||
|
}) |
||||
|
}, |
||||
|
// 将日期格式/改为- |
||||
|
formatDate(dateStr) { |
||||
|
if (dateStr) { |
||||
|
return dateStr.replace(/^\D*(\d{4})\D*(\d{2})\D*(\d{2})\D*$/, '$1-$2-$3').replace(/^(\d{4})-(\d{0,2})-(\d{0,2})$/, (match, p1, p2, p3) => {return `${p1}-${String(p2).padStart(2, '0')}-${String(p3).padStart(2, '0')}`;}) |
||||
|
} |
||||
|
return |
||||
|
}, |
||||
|
// 获取当前日期是否有活动 |
||||
|
getActivityCalendarCount() { |
||||
|
let start = '' |
||||
|
let end = '' |
||||
|
if (!this.monthShow) { |
||||
|
start = this.getNowTime(this.weekDates[0]) |
||||
|
end = this.getNowTime(this.weekDates[6]) |
||||
|
} else{ |
||||
|
start = this.everyDay[0].date |
||||
|
end = this.everyDay.slice(-1)[0].date |
||||
|
} |
||||
|
|
||||
|
this.Post({ |
||||
|
begin_date: start, |
||||
|
end_date: end, |
||||
|
},'/api/activity/getActDateCount').then(res => { |
||||
|
if (!this.monthShow) { //按周展示 |
||||
|
this.weekDates.forEach(day=> { |
||||
|
const date = this.formatDate(this.getNowTime(day)) |
||||
|
day.flag = 0 |
||||
|
res.data.forEach(item=> { |
||||
|
if (date == item) { |
||||
|
day.flag = 1 |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} else{ //按月展示 |
||||
|
this.everyDay.forEach(day=> { |
||||
|
day.flag = 0 |
||||
|
res.data.forEach(item=> { |
||||
|
if (this.formatDate(day.date) == item) { |
||||
|
day.flag = 1 |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取当前日期 |
||||
|
getNowTime(time, type) { |
||||
|
var date = time, |
||||
|
year = date.getFullYear(), |
||||
|
month = date.getMonth() + 1, |
||||
|
day = date.getDate(), |
||||
|
hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), |
||||
|
minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(), |
||||
|
second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); |
||||
|
month >= 1 && month <= 9 ? (month = "0" + month) : ""; |
||||
|
day >= 0 && day <= 9 ? (day = "0" + day) : ""; |
||||
|
if (type == 1) { |
||||
|
if(uni.getSystemInfoSync().platform == 'ios'){ |
||||
|
var timer = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second; |
||||
|
}else{ |
||||
|
var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; |
||||
|
} |
||||
|
} else { |
||||
|
var timer = year + '/' + month + '/' + day; |
||||
|
} |
||||
|
|
||||
|
return timer; |
||||
|
}, |
||||
|
// 遍历月份日期 |
||||
|
getEveryDay(data) { |
||||
|
let date = new Date(data); |
||||
|
let month = date.getMonth(); |
||||
|
//设置月份 |
||||
|
date.setMonth(month + 1); |
||||
|
//设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天（比如，二月份就是28或29，其他月份就是30或31），方便下边的循环 |
||||
|
date.setDate(0); |
||||
|
let dayArry = []; |
||||
|
let day = date.getDate(); //获取当前月最后一天是几号 |
||||
|
for (let i = 1; i <= day; i++) { |
||||
|
date.setDate(i); //如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天 |
||||
|
dayArry.push({ day: i, week: this.getWeekday(date.getDay()), date: this.getNowTime(date), flag: 0 }); //选中月份的每一天和当天是星期几 |
||||
|
} |
||||
|
|
||||
|
this.everyDay = dayArry; |
||||
|
console.log(this.everyDay) |
||||
|
this.getActivityCalendarCount(); |
||||
|
this.resetDay(); |
||||
|
}, |
||||
|
getWeekday(day) { |
||||
|
return ['日', '一', '二', '三', '四', '五', '六'][day]; |
||||
|
}, |
||||
|
//重置日期与顶部周期相对应 |
||||
|
resetDay() { |
||||
|
let arr = this.weekList; |
||||
|
let w = this.everyDay[0].week; |
||||
|
arr.forEach((v, index) => { |
||||
|
if (v == w) { |
||||
|
let id = index; |
||||
|
if (id != 0) { |
||||
|
for (let i = 0; i < id; i++) { |
||||
|
this.everyDay.unshift({ day: '', week: '' }); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 获取周 |
||||
|
getWeekDates(day){ |
||||
|
const currentDayOfWeek = day.getDay(); // 获取今天是星期几( 0 = 周日,...6 = 周六 |
||||
|
const startDate = new Date(day); |
||||
|
startDate.setDate(day.getDate() - currentDayOfWeek); |
||||
|
const weekDates = []; |
||||
|
for (let i = 0; i < 7; i++) { |
||||
|
const date = new Date(startDate); |
||||
|
date.setDate(startDate.getDate() + i); |
||||
|
weekDates.push(date) |
||||
|
} |
||||
|
this.weekDates = weekDates |
||||
|
|
||||
|
if(this.weekDates.length > 0) this.getActivityCalendarCount(); |
||||
|
}, |
||||
|
// 切换上一周月、下一周月 |
||||
|
preNextDate(e){ |
||||
|
if(this.monthShow){ |
||||
|
if(e){ |
||||
|
// 下一月 |
||||
|
this.month += 1; |
||||
|
if (this.month > 12) { |
||||
|
this.year += 1; |
||||
|
this.month = 1; |
||||
|
} |
||||
|
if(uni.getSystemInfoSync().platform == 'ios'){ |
||||
|
this.getEveryDay(this.year + '/' + this.month + '/' + 1); |
||||
|
}else{ |
||||
|
this.getEveryDay(this.year + '-' + this.month); |
||||
|
} |
||||
|
}else{ |
||||
|
// 上一月 |
||||
|
this.month -= 1; |
||||
|
if (this.month == 0) { |
||||
|
this.year -= 1; |
||||
|
this.month = 12; |
||||
|
} |
||||
|
if(uni.getSystemInfoSync().platform == 'ios'){ |
||||
|
this.getEveryDay(this.year + '/' + this.month + '/' + 1); |
||||
|
}else{ |
||||
|
this.getEveryDay(this.year + '-' + this.month); |
||||
|
} |
||||
|
} |
||||
|
}else{ |
||||
|
if(e){ |
||||
|
// 下一周 |
||||
|
this.getNextWeekDates() |
||||
|
}else{ |
||||
|
// 上一周 |
||||
|
this.getPreviousWeekDates() |
||||
|
} |
||||
|
} |
||||
|
this.getActivityCalendarCount() |
||||
|
}, |
||||
|
getPreviousWeekDates() { |
||||
|
const today = this.weekDates[0] |
||||
|
const previousWeekStartDate = new Date(today); |
||||
|
previousWeekStartDate.setDate(today.getDate() - 7); // 上周的开始日期 |
||||
|
|
||||
|
const previousWeekDates = []; |
||||
|
for (let i = 0; i < 7; i++) { |
||||
|
const date = new Date(previousWeekStartDate); |
||||
|
date.setDate(previousWeekStartDate.getDate() + i); |
||||
|
previousWeekDates.push(date); |
||||
|
} |
||||
|
|
||||
|
this.weekDates = previousWeekDates; |
||||
|
this.year = Number(this.getNowTime(this.weekDates[0], 2).slice(0, 4)); |
||||
|
this.month = Number(this.getNowTime(this.weekDates[0], 2).slice(5, 7)); |
||||
|
}, |
||||
|
getNextWeekDates() { |
||||
|
const today = this.weekDates[0] |
||||
|
const nextWeekStartDate = new Date(today); |
||||
|
nextWeekStartDate.setDate(today.getDate() + 7); // 下周的开始日期 |
||||
|
|
||||
|
const nextWeekDates = []; |
||||
|
for (let i = 0; i < 7; i++) { |
||||
|
const date = new Date(nextWeekStartDate); |
||||
|
date.setDate(nextWeekStartDate.getDate() + i); |
||||
|
nextWeekDates.push(date); |
||||
|
} |
||||
|
|
||||
|
this.weekDates = nextWeekDates; |
||||
|
this.year = Number(this.getNowTime(this.weekDates[0], 2).slice(0, 4)); |
||||
|
this.month = Number(this.getNowTime(this.weekDates[0], 2).slice(5, 7)); |
||||
|
}, |
||||
|
// 更换周/月 |
||||
|
changeWeekMonth() { |
||||
|
this.monthShow = !this.monthShow |
||||
|
|
||||
|
this.month = Number(this.selectDay.slice(5, 7)); |
||||
|
|
||||
|
if(this.monthShow) { |
||||
|
this.year = Number(this.selectDay.slice(0, 4)) |
||||
|
if(uni.getSystemInfoSync().platform == 'ios'){ |
||||
|
this.getEveryDay(this.year + '/' + this.month + '/' + 1); |
||||
|
}else{ |
||||
|
this.getEveryDay(this.year + '/' + this.month); |
||||
|
} |
||||
|
} else { |
||||
|
this.getWeekDates(new Date(this.selectDay)) |
||||
|
} |
||||
|
}, |
||||
|
// 选中日期 |
||||
|
changeDate(item){ |
||||
|
if(this.nowDay <= item ){ |
||||
|
|
||||
|
this.year = Number(item.slice(0, 4)); |
||||
|
this.month = Number(item.slice(5, 7)); |
||||
|
this.day = Number(item.slice(8, 10)); |
||||
|
this.selectDay = item |
||||
|
this.pageNo = 0 |
||||
|
this.list = [] |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
viewDetail (item) { |
||||
|
uni.navigateTo({ |
||||
|
url:'/subPackages/eventCalendar/detail?id='+item.id |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
overflow-x: hidden; |
||||
|
// background: url('https://static.ticket.sz-trip.com/yandu/images/eventCalendar/topBg.png') no-repeat; |
||||
|
// background-size: 100%; |
||||
|
background: #A2E0DB; |
||||
|
padding-bottom: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.topLeft { |
||||
|
position: absolute; |
||||
|
left: 26rpx; |
||||
|
top: 101rpx; |
||||
|
font-size: 40rpx; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.topBg { |
||||
|
width: 750rpx; |
||||
|
height: 520rpx; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.topImg { |
||||
|
width: 750rpx; |
||||
|
height: 310.67rpx; |
||||
|
} |
||||
|
|
||||
|
.calendar{ |
||||
|
padding: 0 26rpx; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
position: relative; |
||||
|
margin-top: -20rpx; |
||||
|
// background: #F5F5F5; |
||||
|
background: #A2E0DB; |
||||
|
|
||||
|
.calendar-top{ |
||||
|
height: 109rpx; |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
|
||||
|
view:nth-child(2){ |
||||
|
font-size: 31rpx; |
||||
|
font-weight: bold; |
||||
|
|
||||
|
span { |
||||
|
font-size: 40rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.iconfont{ |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
vertical-align: inherit; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.calendar-bottom{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
padding: 33rpx 0 40rpx; |
||||
|
width: 697rpx; |
||||
|
height: auto; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.week-item{ |
||||
|
width: 14%; |
||||
|
text-align: center; |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.day-box{ |
||||
|
width: 14%; |
||||
|
height: 100rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.day-item{ |
||||
|
font-size: 29rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
|
||||
|
.day-point{ |
||||
|
width: 5rpx; |
||||
|
height: 5rpx; |
||||
|
background: #FF3615; |
||||
|
border-radius: 50%; |
||||
|
margin: 5rpx auto 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.daySelect{ |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
text-align: center; |
||||
|
line-height: 80rpx; |
||||
|
background: #00AEA0; |
||||
|
font-size: 29rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #fff; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.grayDate{ |
||||
|
.day-item{ |
||||
|
color: #999999; |
||||
|
|
||||
|
.day-point{ |
||||
|
background: #CCCCCC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.iconfont{ |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
// position: absolute; |
||||
|
// left: 50%; |
||||
|
// right: 0; |
||||
|
// margin-left: -18rpx; |
||||
|
// bottom: 36rpx; |
||||
|
display: block; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
width: 697rpx; |
||||
|
height: auto; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
margin: 26.67rpx auto 0; |
||||
|
padding: 27rpx 13rpx; |
||||
|
|
||||
|
.search-box { |
||||
|
width: 670rpx; |
||||
|
height: 53rpx; |
||||
|
background: #F7F7F7; |
||||
|
border-radius: 27rpx; |
||||
|
padding: 0 12rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.search-img { |
||||
|
width: 26.67rpx; |
||||
|
height: 26.67rpx; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
margin-left: 11rpx; |
||||
|
width: 610rpx; |
||||
|
line-height: 53rpx; |
||||
|
font-weight: 400; |
||||
|
font-size: 25rpx; |
||||
|
color: #000; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.type-box { |
||||
|
height: 134rpx; |
||||
|
|
||||
|
.type-item { |
||||
|
line-height: 45rpx; |
||||
|
border-radius: 22rpx; |
||||
|
border: 1rpx solid #999999; |
||||
|
padding: 0 20rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
.type-active { |
||||
|
background: #00AEA0; |
||||
|
font-weight: bold; |
||||
|
color: #fff; |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
.item-img { |
||||
|
width: 227rpx; |
||||
|
height: 227rpx; |
||||
|
border-radius: 13rpx; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: 410rpx; |
||||
|
height: 227rpx; |
||||
|
padding: 15rpx 0; |
||||
|
margin-left: 12rpx; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.title { |
||||
|
width: 410rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.tag { |
||||
|
padding: 0 10rpx; |
||||
|
width: fit-content; |
||||
|
max-width: 400rpx; |
||||
|
line-height: 36rpx; |
||||
|
border-radius: 7rpx; |
||||
|
border: 1rpx solid #515150; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #515150; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
width: 447rpx; |
||||
|
font-weight: 400; |
||||
|
font-size: 24rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,657 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="top-bg"> |
||||
|
<view class="search-box"> |
||||
|
<view class="left"> |
||||
|
<image src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png" mode="aspectFill"></image> |
||||
|
<input v-model="keywords" type="text" placeholder="请输入关键字" @confirm="search()" /> |
||||
|
</view> |
||||
|
|
||||
|
<!-- <view class="btn" @click="search()">搜索</view> --> |
||||
|
</view> |
||||
|
<view class="common-box"> |
||||
|
<view class="common-types com-flex-tao"> |
||||
|
<view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id" :class="['common-type', typeIndex == index ? 'active' : '']"> |
||||
|
{{ item.name }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="list-common-empty" v-if="list.length == 0"> |
||||
|
<img :src="showImg('/uploads/20221201/8f97261b8eddffcc55342eca0ed0249c.png')" /> |
||||
|
<p class="list-common-empty-tip">暂无订单~</p> |
||||
|
</view> |
||||
|
<view class="trade-list" v-if="list.length > 0"> |
||||
|
<view v-for="(item, key) in list" :key="item.id" class="trade-items" v-if="showItem(item)" @click="() => choseType(item)"> |
||||
|
<view class="trade-item-head"> |
||||
|
<view class="trade-item-head-tid">订单号:{{ item.order_id }}</view> |
||||
|
<view class="trade-item-head-state">{{ item.status_text }}</view> |
||||
|
</view> |
||||
|
<view class="trade-item-pros"> |
||||
|
<view |
||||
|
class="trade-item-pro" |
||||
|
v-for="(pro, proIndex) in item.order_child" |
||||
|
:key="pro.child_id" |
||||
|
> |
||||
|
<view class="trade-item-pro-img" v-if="pro.specifications_image"><image :src="showImg(pro.specifications_image)" mode="aspectFill"></image></view> |
||||
|
<view class="trade-item-pro-title">{{ pro.goods_title + pro.specifications_name }}</view> |
||||
|
<view class="trade-item-pro-price"> |
||||
|
<view class="trade-item-pro-price-pri">￥{{ pro.pay_money / 100 }}</view> |
||||
|
<view class="trade-item-pro-num">x{{ pro.num }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="trade-item-info"> |
||||
|
合计￥ |
||||
|
<text>{{ item.pay_money / 100 }}</text> |
||||
|
</view> |
||||
|
<view class="trade-item-btns"> |
||||
|
<view @click.stop="() => refund(item.order_id, key)" v-if="item.status == 'PAYMENT_SUCCESSFULLY'">申请退款</view> |
||||
|
<view @click.stop="() => closeOrder(item.order_id, item)" v-if="item.status == 'WAIT_PAYMENT'">关闭订单</view> |
||||
|
<view @click.stop="confirmpost(item.order_id, key)" v-if="item.postFlag">确认收货</view> |
||||
|
<view class="pay-btn" @click.stop="setOrderId(item.order_id)" v-if="item.status == 'WAIT_PAYMENT'">立即支付</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- <view v-if="list.length === 0 && finished" class="noDate"> |
||||
|
<view>暂无订单</view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Trades', |
||||
|
data() { |
||||
|
return { |
||||
|
finished: false, |
||||
|
list: [], |
||||
|
typeList: [ |
||||
|
{ |
||||
|
id: 'ALL', |
||||
|
name: '全部' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'WAIT_PAYMENT', |
||||
|
name: '待付款' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'PAYMENT_SUCCESSFULLY', |
||||
|
name: '待使用' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'PAYMENT_SUCCESSFULLY', |
||||
|
name: '待发货' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'POST', |
||||
|
name: '待收货' |
||||
|
}, |
||||
|
// { |
||||
|
// id: 'WAIT_COMMENT', |
||||
|
// name: '待评价' |
||||
|
// }, |
||||
|
{ |
||||
|
id: 'WAIT_REFUND,REFUND_SUCCESS,REFUND_REFUSAL,REFUND_ERROR,REFUND_PART', |
||||
|
name: '退款/售后' |
||||
|
} |
||||
|
], |
||||
|
typeIndex: 0, |
||||
|
ajaxFlag: true, |
||||
|
keywords: '', |
||||
|
orderId: null, |
||||
|
dateRange: [], |
||||
|
type: '' |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
console.log(options); |
||||
|
if (options.type) this.typeIndex = this.typeList.findIndex(vm => vm.name === options.type); |
||||
|
this.getList(); |
||||
|
|
||||
|
uni.$on("updateDataByConnect",this.getDataByConnect) |
||||
|
}, |
||||
|
onUnload () { |
||||
|
uni.$off("updateDataByConnect",this.getDataByConnect) |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
if (this.finished) return false; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getDataByConnect(data) { |
||||
|
if (data.msgType == "updateOrderTrades") { |
||||
|
this.list = []; |
||||
|
this.finished = false; |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
emptyFunc() { |
||||
|
|
||||
|
}, |
||||
|
showItem(item) { |
||||
|
let flag = true; |
||||
|
// if (this.typeIndex == 2 && item.order_child[0] && !item.order_child[0].consignee) flag = false |
||||
|
return flag; |
||||
|
}, |
||||
|
onReload() { |
||||
|
this.list = []; |
||||
|
this.finished = false; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
setType(index) { |
||||
|
this.typeIndex = index; |
||||
|
this.onReload(); |
||||
|
}, |
||||
|
setOrderId(id) { |
||||
|
let that = this; |
||||
|
that.orderId = id; |
||||
|
that.Post( |
||||
|
{ |
||||
|
order_id: 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() { |
||||
|
that.list = []; |
||||
|
that.finished = false; |
||||
|
that.getList() |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 确认收货 |
||||
|
confirmpost(id, index) { |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否确认收货？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post( |
||||
|
{ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/confirmPost' |
||||
|
).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
list[index].order_child.map(item => { |
||||
|
item.status = 'WAIT_COMMENT'; |
||||
|
}); |
||||
|
list[index].status = 'WAIT_COMMENT'; |
||||
|
list[index].postFlag = false; |
||||
|
that.list = list; |
||||
|
uni.showToast({ |
||||
|
title: '操作成功' |
||||
|
}); |
||||
|
that.$forceUpdate(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 关闭订单 |
||||
|
closeOrder(id, index) { |
||||
|
console.log(id); |
||||
|
console.log(index); |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否关闭订单？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post( |
||||
|
{ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/closeOrder' |
||||
|
).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
uni.showToast({ |
||||
|
title: '关闭成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
that.list = []; |
||||
|
that.finished = false; |
||||
|
that.getList(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//删除订单 |
||||
|
deletOrder(id) { |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否删除订单？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post( |
||||
|
{ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/delOrder' |
||||
|
).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
uni.showToast({ |
||||
|
title: '删除成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
that.list = []; |
||||
|
that.finished = false; |
||||
|
that.getList(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 申请退款 |
||||
|
refund(id, index) { |
||||
|
console.log(id); |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否申请退款？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post( |
||||
|
{ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/applyRefund' |
||||
|
).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
uni.showToast({ |
||||
|
title: '申请成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
that.onReload(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
search(e) { |
||||
|
this.list = []; |
||||
|
this.getList(); |
||||
|
// if (e.keyCode == 13) { |
||||
|
// // 提交 |
||||
|
// this.keywords = e.target.value; |
||||
|
// } |
||||
|
}, |
||||
|
getList() { |
||||
|
let data = { |
||||
|
status: this.typeList[this.typeIndex].id == 'ALL' ? '' : this.typeList[this.typeIndex].true_id || this.typeList[this.typeIndex].id, |
||||
|
offset: this.list.length, |
||||
|
limit: 5, |
||||
|
name: this.keywords, |
||||
|
type: this.typeList[this.typeIndex].name == '待使用' ? 1 : (this.typeList[this.typeIndex].name == '待发货' ? 2 : '') |
||||
|
}; |
||||
|
this.Post(data, '/api/order/orderList').then(res => { |
||||
|
this.list = [...this.list, ...res.data] |
||||
|
if (res.data.length < 5) { |
||||
|
this.finished = true; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
UpdateOrder(id) { |
||||
|
this.ajaxFlag = false; |
||||
|
let list = this.list; |
||||
|
this.Post( |
||||
|
{ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/orderDetail' |
||||
|
).then(res => { |
||||
|
this.ajaxFlag = true; |
||||
|
list.map(item => { |
||||
|
if (item.order_id == id) { |
||||
|
item = res.data; |
||||
|
} |
||||
|
}); |
||||
|
this.list = list; |
||||
|
}); |
||||
|
}, |
||||
|
choseType(item) { |
||||
|
uni.navigateTo({ |
||||
|
url:'/subPackages/order/detail?id='+item.order_id |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
view { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.common-box { |
||||
|
height: 90rpx; |
||||
|
} |
||||
|
|
||||
|
.common-types { |
||||
|
background: white; |
||||
|
height: 90rpx; |
||||
|
font-size: 31rpx; |
||||
|
z-index: 10; |
||||
|
margin: auto; |
||||
|
color: #666; |
||||
|
overflow-x: scroll; |
||||
|
overflow-y: hidden; |
||||
|
padding: 0 27rpx; |
||||
|
} |
||||
|
|
||||
|
.common-types::-webkit-scrollbar { |
||||
|
width: 0rpx; |
||||
|
height: 0; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.common-type { |
||||
|
flex-shrink: 0; |
||||
|
margin: 0 26rpx; |
||||
|
line-height: 90rpx; |
||||
|
height: 90rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.common-type.active { |
||||
|
font-size: 31rpx; |
||||
|
font-weight: bold; |
||||
|
color: #00AEA0; |
||||
|
} |
||||
|
|
||||
|
.common-type.active:after { |
||||
|
display: block; |
||||
|
width: 60%; |
||||
|
background-color: rgba(0, 215, 237, 1); |
||||
|
font-size: 0; |
||||
|
content: '1'; |
||||
|
margin: auto; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 1rpx; |
||||
|
height: 4rpx; |
||||
|
background: #71B580; |
||||
|
border-radius: 2rpx; |
||||
|
} |
||||
|
|
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
background-color: #f7f7f7; |
||||
|
} |
||||
|
|
||||
|
.noDate { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-top: 200rpx; |
||||
|
} |
||||
|
|
||||
|
.noDate img { |
||||
|
width: 514rpx; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.noDate view { |
||||
|
font-size: 24rpx; |
||||
|
color: #777777; |
||||
|
} |
||||
|
|
||||
|
.trade-list { |
||||
|
padding: 28rpx 26rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-items { |
||||
|
background-color: white; |
||||
|
margin-bottom: 28rpx; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 28rpx 20rpx; |
||||
|
border-bottom: 1rpx solid #d8d8d8; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head-tid { |
||||
|
font-size: 24rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head-state { |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #00AEA0; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head-name { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
font-size: 31rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
|
||||
|
image { |
||||
|
width: 33rpx; |
||||
|
height: 31rpx; |
||||
|
} |
||||
|
|
||||
|
view { |
||||
|
margin-left: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.trade-item-pros { |
||||
|
display: flex; |
||||
|
/* background-color: #F2F2F2; */ |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro { |
||||
|
display: flex; |
||||
|
padding: 20rpx; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-img { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-img image { |
||||
|
width: 180rpx; |
||||
|
height: 180rpx; |
||||
|
border-radius: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-price { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-title { |
||||
|
text-align: left; |
||||
|
flex: 1; |
||||
|
padding: 0 20rpx; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-price view { |
||||
|
display: flex; |
||||
|
flex-wrap: nowrap; |
||||
|
text-wrap: none; |
||||
|
white-space: nowrap; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-price-pri { |
||||
|
font-size: 27rpx; |
||||
|
color: #fc514b; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-num { |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
margin-top: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-info { |
||||
|
font-size: 28rpx; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
background-color: white; |
||||
|
padding: 0rpx 20rpx; |
||||
|
margin-top: -6rpx; |
||||
|
/* border-bottom: 1px solid #B6B6B6; */ |
||||
|
} |
||||
|
|
||||
|
.trade-item-info text { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.trade-item-btns { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-btns view { |
||||
|
margin-left: 20rpx; |
||||
|
background: rgba(237, 237, 237, 0); |
||||
|
border: 1rpx solid #999999; |
||||
|
border-radius: 27rpx; |
||||
|
padding: 8rpx 16rpx; |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.trade-item-btns .pay-btn { |
||||
|
color: #FFFFFF; |
||||
|
background: linear-gradient(90deg, #FD6F34, #F4A61F); |
||||
|
border: none; |
||||
|
padding: 10rpx 16rpx; |
||||
|
} |
||||
|
|
||||
|
.comment-btn { |
||||
|
width: 100rpx; |
||||
|
text-align: center; |
||||
|
line-height: 40rpx; |
||||
|
border-radius: 20rpx; |
||||
|
border: 1px solid #999999; |
||||
|
color: #333333; |
||||
|
justify-content: center !important; |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.list-common-empty { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
min-height: 50vh; |
||||
|
} |
||||
|
|
||||
|
.list-common-empty img { |
||||
|
width: 483rpx; |
||||
|
height: 254rpx; |
||||
|
} |
||||
|
|
||||
|
.list-common-empty-tip { |
||||
|
margin-top: 61rpx; |
||||
|
|
||||
|
font-size: 29rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #8599b5; |
||||
|
} |
||||
|
|
||||
|
.com-flex-tao { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.search-box { |
||||
|
width: 697rpx; |
||||
|
height: 67rpx; |
||||
|
background: #f2f2f2; |
||||
|
border-radius: 33rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 8rpx 0 28rpx; |
||||
|
margin: 0 auto; |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
image { |
||||
|
width: 28rpx; |
||||
|
height: 30rpx; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
margin-left: 20rpx; |
||||
|
font-size: 31rpx; |
||||
|
font-weight: 400; |
||||
|
color: #333; |
||||
|
width: 450rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 107rpx; |
||||
|
height: 53rpx; |
||||
|
background: #71B580; |
||||
|
border-radius: 27rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
line-height: 53rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.top-bg { |
||||
|
background: #fff; |
||||
|
padding-top: 20rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,439 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<swiper class="swiper" :indicator-dots="true" v-if="detail.list_images" :autoplay="true" :interval="2000" :duration="300"> |
||||
|
<block v-for="(item, index) in detail.list_images.split(',')" :key="index"> |
||||
|
<swiper-item> |
||||
|
<image :src="showImg(item)" mode="aspectFill" class="swiper-img"></image> |
||||
|
</swiper-item> |
||||
|
</block> |
||||
|
</swiper> |
||||
|
|
||||
|
<view class="box"> |
||||
|
<view class="info"> |
||||
|
<view class="title">{{ detail.title }}</view> |
||||
|
<view class="location"> |
||||
|
<image src="https://static.ticket.sz-trip.com/changshu/images/venue/location.png" mode=""></image> |
||||
|
{{ detail.address }} |
||||
|
</view> |
||||
|
<view class="location" style="margin-bottom: 0"> |
||||
|
<image src="https://static.ticket.sz-trip.com/changshu/images/venue/tel.png" mode=""></image> |
||||
|
{{ detail.tel }} |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="titles">场馆预约</view> |
||||
|
|
||||
|
<!-- 日期和分时 --> |
||||
|
<DateSelector |
||||
|
v-if="dateList.length > 0" |
||||
|
:dateList="dateList" |
||||
|
:dateIndex="dateIndex" |
||||
|
:stockList="stockList" |
||||
|
:stockIndex="stockIndex" |
||||
|
@changeDate="changeDate" |
||||
|
@changeStock="changeStock" |
||||
|
@openCal="openCal" |
||||
|
ref="childRef" |
||||
|
/> |
||||
|
</view> |
||||
|
|
||||
|
<view style="padding: 0 25rpx;"> |
||||
|
<view class="titles">场馆介绍</view> |
||||
|
<view v-html="formateRichText(detail.feature_content)"></view> |
||||
|
|
||||
|
<view class="titles">接待时间</view> |
||||
|
<view v-html="formateRichText(detail.cost_content)"></view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="fixed-btn flex-center" v-if="dateList && dateList.length > 0"> |
||||
|
<view @tap="order" class="btn" > |
||||
|
参观预约 |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 日历弹框 --> |
||||
|
<uni-calendar |
||||
|
ref="calendar" |
||||
|
:insert="false" |
||||
|
:start-date="dateList[0].date" |
||||
|
:end-date="dateList[dateList.length-1].date" |
||||
|
:date="dateList[0].date" |
||||
|
:selected="selected" |
||||
|
:clearDate="false" |
||||
|
:disabledDay="disabledDay" |
||||
|
@confirm="confirm" |
||||
|
v-if="dateList && dateList.length > 0" |
||||
|
/> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import DateSelector from '@/components/DateSelector.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
DateSelector |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
id: '', |
||||
|
detail: {}, |
||||
|
goodsInfo: '', |
||||
|
skuInfo: '', |
||||
|
dateList: [], |
||||
|
dateIndex: null, |
||||
|
price: '', |
||||
|
date: '', |
||||
|
isTime: false, |
||||
|
stockList: [], |
||||
|
stockIndex: null, |
||||
|
selected: [], |
||||
|
start_time: '', |
||||
|
end_time: '', |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.id = option.id |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getDetail() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取景点详情 |
||||
|
getDetail() { |
||||
|
this.Post({ |
||||
|
id: this.id |
||||
|
},'/api/scenic/getScenicById').then(res => { |
||||
|
if(res.data.status == 0){ |
||||
|
setTimeout(() => { |
||||
|
uni.showToast({ |
||||
|
title: '商品不存在或已下架', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
},0) |
||||
|
setTimeout(() => { |
||||
|
this.goBack() |
||||
|
},2000) |
||||
|
} |
||||
|
this.detail = res.data |
||||
|
this.getGoodsList() |
||||
|
}) |
||||
|
}, |
||||
|
// 根据景点id获取商品列表、取第一个商品下的第一个规格 |
||||
|
getGoodsList(){ |
||||
|
this.Post({ |
||||
|
scenic_id: this.id |
||||
|
},'/api/scenic/getGoodsByScenicId').then(res => { |
||||
|
if(res) { |
||||
|
this.goodsInfo = res.data[0] |
||||
|
this.skuInfo = res.data[0].specifications[0] |
||||
|
|
||||
|
// 是否配置价格日历 0否 1是 |
||||
|
if(!res.data[0].specifications[0].is_price_calendar) return; |
||||
|
|
||||
|
// 是否配置分时 0否 1是 |
||||
|
if(res.data[0].specifications[0].is_time_stock) { |
||||
|
this.isTime = true |
||||
|
}else { |
||||
|
this.isTime = false |
||||
|
} |
||||
|
|
||||
|
this.getPriceCal() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取价格日历列表 |
||||
|
getPriceCal() { |
||||
|
this.Post({ |
||||
|
specifications_id: this.skuInfo.id, |
||||
|
goods_id: this.goodsInfo.id, |
||||
|
limit: 60 |
||||
|
}, '/api/goods/getPriceCalendarListBySpecifications').then(res => { |
||||
|
res.data.forEach(item => { |
||||
|
if (item.store != 0) { |
||||
|
this.dateList.push(item) |
||||
|
} |
||||
|
}) |
||||
|
console.log(this.dateList, this.dateList.length) |
||||
|
// this.dateList = res.data |
||||
|
this.dateList.forEach(item => { |
||||
|
this.selected.push({ |
||||
|
date: item.date, |
||||
|
info: '￥' + item.money / 100 |
||||
|
}) |
||||
|
}) |
||||
|
this.dateIndex = this.dateList.findIndex(item => item.store != 0) |
||||
|
this.price = this.dateList[this.dateIndex].money |
||||
|
this.date = this.dateList[this.dateIndex].date |
||||
|
this.getTimeStock(this.dateList[this.dateIndex].date) |
||||
|
}) |
||||
|
}, |
||||
|
// 获取规格分时库存 |
||||
|
getTimeStock(date) { |
||||
|
if(!this.isTime) return; |
||||
|
this.Post({ |
||||
|
specifications_id: this.skuInfo.id, |
||||
|
date: date |
||||
|
}, '/api/goods/getTimeStock').then(res => { |
||||
|
if (res.data.length > 0) { |
||||
|
this.stockList = res.data |
||||
|
this.stockIndex = this.stockList.findIndex(item => item.stock_number != 0) |
||||
|
console.log('this.stockIndex', this.stockIndex) |
||||
|
if (this.stockIndex > -1) { |
||||
|
this.start_time = this.stockList[this.stockIndex].start_time |
||||
|
this.end_time = this.stockList[this.stockIndex].end_time |
||||
|
this.date = this.stockList[this.stockIndex].sale_date |
||||
|
this.price = this.stockList[this.stockIndex].money |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 打开日历 |
||||
|
openCal(){ |
||||
|
this.$refs.calendar.open(); |
||||
|
}, |
||||
|
// 确定日历日期 |
||||
|
confirm(e){ |
||||
|
console.log(e) |
||||
|
for (let i = 0; i < this.dateList.length; i++) { |
||||
|
if (this.dateList[i].date == e.fulldate) { |
||||
|
console.log(this.dateList[i]) |
||||
|
this.dateIndex = i; |
||||
|
this.date = e.fulldate |
||||
|
this.getTimeStock(e.fulldate) |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 选择日期 |
||||
|
changeDate(data){ |
||||
|
let item = data.item |
||||
|
let index = data.index |
||||
|
if(item.stock!=0){ |
||||
|
console.log(item) |
||||
|
this.dateIndex = index |
||||
|
this.date = item.date |
||||
|
this.getTimeStock(item.date) |
||||
|
} |
||||
|
}, |
||||
|
// 选择入园时间 |
||||
|
changeStock(data){ |
||||
|
let item = data.item |
||||
|
let index = data.index |
||||
|
if(item.stock_number!=0){ |
||||
|
this.stockIndex = index |
||||
|
this.date = item.sale_date |
||||
|
this.start_time = item.start_time |
||||
|
this.end_time = item.end_time |
||||
|
} |
||||
|
}, |
||||
|
// 预约 |
||||
|
order() { |
||||
|
let data = { |
||||
|
goodsInfo: this.goodsInfo, |
||||
|
skuInfo: this.skuInfo, |
||||
|
dateIndex: this.dateIndex, |
||||
|
stockIndex: this.stockIndex |
||||
|
} |
||||
|
|
||||
|
this.$store.commit('changeOrderInfo', data) |
||||
|
uni.navigateTo({ |
||||
|
url: "/subPackages/venue/venueOrder" |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
padding-bottom: 200rpx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.swiper{ |
||||
|
width: 100%; |
||||
|
height: 413rpx; |
||||
|
display: block; |
||||
|
position: relative; |
||||
|
|
||||
|
.swiper-img{ |
||||
|
width: 100%; |
||||
|
height: 413rpx; |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
padding: 0 25rpx 30rpx; |
||||
|
border-bottom: 1rpx solid #CCCCCC; |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
margin-top: -50rpx; |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
background: #ffffff; |
||||
|
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1); |
||||
|
border-radius: 13rpx; |
||||
|
padding: 30rpx; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 31rpx; |
||||
|
color: #000; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.location { |
||||
|
color: #999999; |
||||
|
font-size: 24rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
image { |
||||
|
margin-right: 10rpx; |
||||
|
width: 29.33rpx; |
||||
|
height: 29.33rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.titles { |
||||
|
margin: 30rpx 0; |
||||
|
font-weight: bold; |
||||
|
font-size: 35rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.date-box{ |
||||
|
height: auto; |
||||
|
position: relative; |
||||
|
|
||||
|
.ticket-title{ |
||||
|
padding-left: 20rpx; |
||||
|
border-bottom: 1rpx solid #CCCCCC; |
||||
|
font-size: 33rpx; |
||||
|
font-family: PingFangSC; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
height: 113rpx; |
||||
|
line-height: 113rpx; |
||||
|
} |
||||
|
|
||||
|
.dateList{ |
||||
|
height: 164rpx; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-right: 120rpx; |
||||
|
overflow-x: auto; |
||||
|
|
||||
|
.date{ |
||||
|
width: 120rpx; |
||||
|
height: 133rpx; |
||||
|
border-radius: 10rpx; |
||||
|
justify-content: space-around; |
||||
|
background: #F5F5F5; |
||||
|
margin-right: 15rpx; |
||||
|
flex-shrink: 0; |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
.dateNum{ |
||||
|
|
||||
|
} |
||||
|
.price{ |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #EE3E3B; |
||||
|
} |
||||
|
.noPrice{ |
||||
|
font-size: 24rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.active{ |
||||
|
background: #00AEA0; |
||||
|
color: #FFFFFF; |
||||
|
border: none; |
||||
|
.dateNum{ |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.price{ |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.more{ |
||||
|
width: 120rpx; |
||||
|
height: 133rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 27rpx; |
||||
|
color: #00AEA0; |
||||
|
position: absolute; |
||||
|
right: -5rpx; |
||||
|
padding-left: 20rpx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
} |
||||
|
.dateList::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.stock-box{ |
||||
|
margin-top: 34rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.stockItem{ |
||||
|
width: 340rpx; |
||||
|
height: 64rpx; |
||||
|
background: #F5F5F5; |
||||
|
border-radius: 10rpx; |
||||
|
text-align: center; |
||||
|
line-height: 64rpx; |
||||
|
font-weight: 400; |
||||
|
font-size: 25rpx; |
||||
|
color: #000000; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.active{ |
||||
|
background: #00AEA0; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.disabled{ |
||||
|
color: #999999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fixed-btn { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
height: 133rpx; |
||||
|
background: #ffffff; |
||||
|
box-shadow: -1rpx 1rpx 16rpx 0px rgba(6, 0, 1, 0.1); |
||||
|
z-index: 3; |
||||
|
|
||||
|
.btn { |
||||
|
width: 697rpx; |
||||
|
line-height: 80rpx; |
||||
|
background: #ED1C18; |
||||
|
border-radius: 40rpx; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
font-size: 31rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,141 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="search-box flex-center"> |
||||
|
<view class="search flex-center"> |
||||
|
<uni-icons type="search" size="25" color="#B3B3B3"></uni-icons> |
||||
|
<input type="text" @confirm="getList()" placeholder="搜索场馆" v-model="title" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item" v-for="(item,index) in list" :key="index" :style="{backgroundImage: 'url('+showImg(item.image)+')'}"> |
||||
|
<view> |
||||
|
<view class="point"></view> |
||||
|
<view class="content"> |
||||
|
<view class="title text-overflow">{{item.title}}</view> |
||||
|
<view class="subtitle text-overflow">{{item.subtitle}}</view> |
||||
|
<view class="btn">立即预约 ></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [], |
||||
|
limit: 10, |
||||
|
title: '', |
||||
|
isLoading: false |
||||
|
} |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getList() |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
setTimeout(() => { |
||||
|
if (!this.isLoading) this.getList(); |
||||
|
}, 500); |
||||
|
}, |
||||
|
methods: { |
||||
|
getList() { |
||||
|
this.Post({ |
||||
|
offset: this.list.length, |
||||
|
limit: this.limit, |
||||
|
scenic_type_id: 1, |
||||
|
title: this.title |
||||
|
}, '/api/scenic/getScenicByType').then(res => { |
||||
|
if(res) { |
||||
|
if(res.data.length < this.limit) this.isLoading = true |
||||
|
this.list = this.list.concat(res.data) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
background: #F3FFFF; |
||||
|
padding-bottom: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.search-box { |
||||
|
width: 750rpx; |
||||
|
height: 93rpx; |
||||
|
background: #FFFFFF; |
||||
|
|
||||
|
.search { |
||||
|
width: 697rpx; |
||||
|
height: 67rpx; |
||||
|
background: #F2F2F2; |
||||
|
border-radius: 33rpx; |
||||
|
padding: 0 26.67rpx; |
||||
|
|
||||
|
input { |
||||
|
flex: 1; |
||||
|
line-height: 67rpx; |
||||
|
font-size: 31rpx; |
||||
|
margin-left: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
margin: 30rpx auto 0; |
||||
|
width: 696.67rpx; |
||||
|
height: 266.67rpx; |
||||
|
border-radius: 15rpx; |
||||
|
|
||||
|
&>view { |
||||
|
height: 100%; |
||||
|
background-image: url('https://static.ticket.sz-trip.com/changshu/images/venue/itemBg.png'); |
||||
|
background-size: 100% 100%; |
||||
|
padding: 45rpx 28rpx 40rpx; |
||||
|
display: flex; |
||||
|
|
||||
|
.point { |
||||
|
width: 13rpx; |
||||
|
height: 13rpx; |
||||
|
background: rgba(255, 255, 255, .5); |
||||
|
border-radius: 50%; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
margin-left: 14rpx; |
||||
|
height: 100%; |
||||
|
|
||||
|
.title { |
||||
|
font-weight: bold; |
||||
|
font-size: 35rpx; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-weight: 400; |
||||
|
font-size: 23rpx; |
||||
|
color: #FFFFFF; |
||||
|
margin-top: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
margin-top: 45rpx; |
||||
|
width: 180rpx; |
||||
|
height: 47rpx; |
||||
|
line-height: 47rpx; |
||||
|
text-align: center; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 23rpx; |
||||
|
background: rgba(255, 255, 255, .7); |
||||
|
font-weight: bold; |
||||
|
font-size: 25rpx; |
||||
|
color: #009286; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,458 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="top-box flex-between"> |
||||
|
<view class="top-left"> |
||||
|
<view class="text-overflow">{{ orderInfo.goodsInfo.title }}</view> |
||||
|
<view> |
||||
|
<view class="left-subtitle" v-if="dateList.length > 0">{{dateList[dateIndex].date}} {{ShowDateDay(new Date(dateList[dateIndex].date).getDay())}}</view> |
||||
|
<view class="left-subtitle" v-if="stockList.length > 0">{{ stockList[stockIndex].start_time }}-{{ stockList[stockIndex].end_time }} 入园</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-center" style="flex: 1;" @click="$refs.popup.open()">修改 ></view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="info flex-column"> |
||||
|
<view class="flex-between"> |
||||
|
<view class="title text-overflow">{{orderInfo.skuInfo.title}}</view> |
||||
|
<view class="price">{{(stockList[stockIndex].money * buyNum) / 100 }}</view> |
||||
|
<view style="display: flex;"> |
||||
|
<view class="btn" @click="changeBuyNum(-1)">-</view> |
||||
|
<view class="num">{{buyNum}}</view> |
||||
|
<view class="btn" @click="changeBuyNum(1)">+</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="tag text-overflow" @click="showpopRule(true)"> |
||||
|
<span v-for="(item,index) in orderInfo.skuInfo.specifications_new_tag.split(',').slice(0,3)" :key="index"> |
||||
|
{{item}}<span style="padding: 0 3rpx;">|</span> |
||||
|
</span> |
||||
|
<span>预订须知 ></span> |
||||
|
</view> |
||||
|
<view class="noCard">无需身份证</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="travel-info"> |
||||
|
<view style="border-bottom: 1rpx solid #CCCCCC;">出行人信息</view> |
||||
|
<view class="flex-between"> |
||||
|
<view>联系电话</view> |
||||
|
<input type="number" placeholder="请输入手机号" v-model="phone" maxlength="11"/> |
||||
|
<uni-icons v-if="phone.length>0" |
||||
|
type="closeempty" size="14" @click="phone = ''"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="fixed-btn flex-center"> |
||||
|
<view @tap="order" class="btn" > |
||||
|
立即预约 |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<uni-popup ref="popup" type="bottom" background-color="rgba(0,0,0,0)" :safe-area="false" :is-mask-click="false"> |
||||
|
<view class="calendar-box"> |
||||
|
<!-- 日期和分时 --> |
||||
|
<DateSelector |
||||
|
v-if="dateList.length > 0" |
||||
|
:dateList="dateList" |
||||
|
:dateIndex="dateIndex" |
||||
|
:stockList="stockList" |
||||
|
:stockIndex="stockIndex" |
||||
|
@changeDate="changeDate" |
||||
|
@changeStock="changeStock" |
||||
|
@openCal="openCal" |
||||
|
/> |
||||
|
<view class="calendar-btn" @click="$refs.popup.close()">确定</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
|
||||
|
<!-- 日历弹框 --> |
||||
|
<uni-calendar |
||||
|
ref="calendar" |
||||
|
:insert="false" |
||||
|
:start-date="dateList[0].date" |
||||
|
:end-date="dateList[dateList.length-1].date" |
||||
|
:date="dateList[0].date" |
||||
|
:selected="selected" |
||||
|
:clearDate="false" |
||||
|
:disabledDay="disabledDay" |
||||
|
@confirm="confirm" |
||||
|
v-if="dateList && dateList.length > 0" |
||||
|
/> |
||||
|
|
||||
|
<!-- 预订须知的弹窗 --> |
||||
|
<uni-popup ref="popupRule" type="bottom" :safe-area="false"> |
||||
|
<view class="popup-content-date flex-column flex" > |
||||
|
<view class="popup-content-title flex-between"> |
||||
|
<view class="flex-1 w-1rpx text-overflow"> |
||||
|
{{orderInfo.skuInfo.title}} |
||||
|
</view> |
||||
|
<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="showpopRule(null)" |
||||
|
style="width: 20rpx;height: 20rpx;" class="flex-shrink-0"> |
||||
|
</view> |
||||
|
<view class="content flex-1 h-1rpx no-scrollbar"> |
||||
|
<view class="detail-content" v-html="formateRichText(orderInfo.skuInfo.reserve_content)"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import DateSelector from '@/components/DateSelector.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
DateSelector |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
orderInfo: this.$store.state.user.orderInfo, |
||||
|
dateList: [], |
||||
|
dateIndex: null, |
||||
|
price: '', |
||||
|
date: '', |
||||
|
isTime: false, |
||||
|
stockList: [], |
||||
|
stockIndex: null, |
||||
|
selected: [], |
||||
|
start_time: '', |
||||
|
end_time: '', |
||||
|
isShowCalendar: false, |
||||
|
buyNum: 1, |
||||
|
phone: '' |
||||
|
} |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getPriceCal() |
||||
|
}, |
||||
|
onShow() { |
||||
|
console.log(this.orderInfo) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 下单 |
||||
|
order() { |
||||
|
if (!this.IsTel(this.phone)) { |
||||
|
uni.showToast({ |
||||
|
title:'请输入正确的手机号', |
||||
|
icon:'none' |
||||
|
}) |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let goods = [] |
||||
|
let param = { |
||||
|
specifications_id: this.orderInfo.skuInfo.id, |
||||
|
num: this.buyNum, |
||||
|
date: this.dateList[this.dateIndex].date, |
||||
|
start_time: this.stockList[this.stockIndex].start_time || '', |
||||
|
end_time: this.stockList[this.stockIndex].end_time || '', |
||||
|
reserve_mobile: this.phone, |
||||
|
} |
||||
|
goods.push(param) |
||||
|
|
||||
|
let data = { |
||||
|
goods: goods, |
||||
|
} |
||||
|
|
||||
|
this.Post({ |
||||
|
method: 'POST', |
||||
|
data: JSON.stringify(data) |
||||
|
}, '/api/order/place').then(res => { |
||||
|
if (res.code == 200) { |
||||
|
let order_id = res.data.order_id |
||||
|
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' |
||||
|
}) |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 选择购买数量 |
||||
|
changeBuyNum(num) { |
||||
|
this.buyNum += num |
||||
|
if(this.buyNum < 1){ |
||||
|
this.buyNum = 1 |
||||
|
} |
||||
|
}, |
||||
|
// 预定须知 |
||||
|
showpopRule(flag) { |
||||
|
if (flag) { |
||||
|
this.$refs.popupRule.open('bottom'); |
||||
|
} else { |
||||
|
this.$refs.popupRule.close(); |
||||
|
} |
||||
|
}, |
||||
|
// 获取价格日历列表 |
||||
|
getPriceCal() { |
||||
|
this.Post({ |
||||
|
specifications_id: this.orderInfo.skuInfo.id, |
||||
|
goods_id: this.orderInfo.goodsInfo.id, |
||||
|
limit: 60 |
||||
|
}, '/api/goods/getPriceCalendarListBySpecifications').then(res => { |
||||
|
res.data.forEach(item => { |
||||
|
if (item.store != 0) { |
||||
|
this.dateList.push(item) |
||||
|
} |
||||
|
}) |
||||
|
console.log(this.dateList, this.dateList.length) |
||||
|
// this.dateList = res.data |
||||
|
this.dateList.forEach(item => { |
||||
|
this.selected.push({ |
||||
|
date: item.date, |
||||
|
info: '￥' + item.money / 100 |
||||
|
}) |
||||
|
}) |
||||
|
this.dateIndex = this.orderInfo.dateIndex |
||||
|
this.getTimeStock(this.dateList[this.dateIndex].date) |
||||
|
}) |
||||
|
}, |
||||
|
// 获取规格分时库存 |
||||
|
getTimeStock(date) { |
||||
|
this.Post({ |
||||
|
specifications_id: this.orderInfo.skuInfo.id, |
||||
|
date: date |
||||
|
}, '/api/goods/getTimeStock').then(res => { |
||||
|
if (res.data.length > 0) { |
||||
|
this.stockList = res.data |
||||
|
this.stockIndex = this.orderInfo.stockIndex |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 打开日历 |
||||
|
openCal(){ |
||||
|
this.$refs.calendar.open(); |
||||
|
}, |
||||
|
// 确定日历日期 |
||||
|
confirm(e){ |
||||
|
console.log(e) |
||||
|
for (let i = 0; i < this.dateList.length; i++) { |
||||
|
if (this.dateList[i].date == e.fulldate) { |
||||
|
console.log(this.dateList[i]) |
||||
|
this.dateIndex = i; |
||||
|
console.log(this.fulldate) |
||||
|
this.date = e.fulldate |
||||
|
this.getTimeStock(e.fulldate) |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 选择日期 |
||||
|
changeDate(data){ |
||||
|
let item = data.item |
||||
|
let index = data.index |
||||
|
if(item.stock!=0){ |
||||
|
console.log(item) |
||||
|
this.dateIndex = index |
||||
|
this.date = item.date |
||||
|
this.getTimeStock(item.date) |
||||
|
} |
||||
|
}, |
||||
|
// 选择入园时间 |
||||
|
changeStock(data){ |
||||
|
let item = data.item |
||||
|
let index = data.index |
||||
|
if(item.stock_number!=0){ |
||||
|
this.stockIndex = index |
||||
|
this.date = item.sale_date |
||||
|
this.start_time = item.start_time |
||||
|
this.end_time = item.end_time |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
padding: 30rpx 0 200rpx; |
||||
|
background-color: #f5f5f5; |
||||
|
} |
||||
|
|
||||
|
.fixed-btn { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
height: 133rpx; |
||||
|
background: #ffffff; |
||||
|
box-shadow: -1rpx 1rpx 16rpx 0px rgba(6, 0, 1, 0.1); |
||||
|
z-index: 3; |
||||
|
|
||||
|
.btn { |
||||
|
width: 697rpx; |
||||
|
line-height: 80rpx; |
||||
|
background: #ED1C18; |
||||
|
border-radius: 40rpx; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
font-size: 31rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.top-box { |
||||
|
width: 697rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
padding: 40rpx 20rpx; |
||||
|
margin: auto; |
||||
|
font-weight: bold; |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
.top-left { |
||||
|
width: 560rpx; |
||||
|
|
||||
|
.left-subtitle { |
||||
|
font-weight: 500; |
||||
|
font-size: 25rpx; |
||||
|
color: #999999; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.flex-center { |
||||
|
font-weight: bold; |
||||
|
font-size: 27rpx; |
||||
|
color: #00AEA0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
width: 697rpx; |
||||
|
height: 215rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
margin: 20rpx auto; |
||||
|
justify-content: space-around; |
||||
|
padding: 20rpx; |
||||
|
|
||||
|
.title { |
||||
|
width: 350rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.price { |
||||
|
font-weight: bold; |
||||
|
font-size: 36rpx; |
||||
|
color: #ED1C18; |
||||
|
} |
||||
|
.price::before { |
||||
|
font-size: 24rpx; |
||||
|
content: '￥' |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 47rpx; |
||||
|
line-height: 47rpx; |
||||
|
text-align: center; |
||||
|
background: #00AEA0; |
||||
|
border-radius: 50%; |
||||
|
font-weight: bold; |
||||
|
font-size: 34rpx; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
width: 65rpx; |
||||
|
line-height: 47rpx; |
||||
|
text-align: center; |
||||
|
font-weight: bold; |
||||
|
font-size: 29rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.tag { |
||||
|
font-weight: 500; |
||||
|
font-size: 23rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.noCard { |
||||
|
font-weight: 500; |
||||
|
font-size: 23rpx; |
||||
|
color: #00AEA0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.calendar-box { |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
padding: 25rpx; |
||||
|
background: #fff; |
||||
|
padding-bottom: 80rpx; |
||||
|
|
||||
|
.calendar-btn { |
||||
|
width: 697rpx; |
||||
|
line-height: 80rpx; |
||||
|
background: #ED1C18; |
||||
|
border-radius: 40rpx; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
font-size: 31rpx; |
||||
|
font-weight: 500; |
||||
|
margin: 50rpx auto 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.popup-content-date { |
||||
|
background-color: white; |
||||
|
padding: 0rpx 28rpx 166rpx; |
||||
|
height: 70vh; |
||||
|
border-radius: 20rpx 20rpx 0 0 ; |
||||
|
.popup-content-title{ |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
font-size: 37rpx; |
||||
|
color: #000000; |
||||
|
padding: 39rpx 0; |
||||
|
align-items: center; |
||||
|
border-bottom: 1px solid #CCCCCC; |
||||
|
} |
||||
|
// 预定须知 |
||||
|
.content{ |
||||
|
padding-top: 48rpx; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.travel-info { |
||||
|
width: 697rpx; |
||||
|
height: 233rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
margin: auto; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
&>view { |
||||
|
height: 50%; |
||||
|
padding: 0 18rpx; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
flex: 1; |
||||
|
margin-left: 50rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue