Skip to content

J
jz_Travel
Commit c6019f9e authored by 罗超's avatar 罗超
Browse files
Options

1

parent 3e7ebd05
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1795 additions and 0 deletions
pages.json
View file @ c6019f9e
......@@ -712,6 +712,16 @@
},{
"path": "components/time/index"
}]
},
//门票
{
"root": "pages/ticketCoupons",
"pages": [
{
"path": "list"
},{
"path": "components/time/index"
}]
}
],
"globalStyle": {
......
pages/ticketCoupons/components/range-slider.vue 0 → 100644
View file @ c6019f9e
<template>
<view class="range-slider" :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
<view class="range-bar" :style="'width:100%;height:' + barHeight + 'rpx'">
<view class="range-bar-bg" :style="'background-color:' + backgroundColor + ''"></view>
<view class="range-bar-progress" :style="'margin-left:' + progressBarLeft + 'rpx;width:' + progressBarWidth + 'rpx;background-color:' + activeColor + ''"></view>
</view>
<view
class="block"
:class="{ active: isMinActive }"
:style="'width:' + blockSize + 'rpx;height:' + blockSize + 'rpx;margin-left:' + minBlockLeft + 'rpx;'"
@touchstart="_onBlockTouchStart"
@touchmove.stop="_onBlockTouchMove"
@touchend="_onBlockTouchEnd"
:data-left="minBlockLeft"
data-tag="minBlock"
>
<slot name="minBlock"></slot>
</view>
<view
class="block"
:class="{ active: isMaxActive }"
:style="'width:' + blockSize + 'rpx;height:' + blockSize + 'rpx;margin-left:' + maxBlockLeft + 'rpx;'"
@touchstart="_onBlockTouchStart"
@touchmove.stop="_onBlockTouchMove"
@touchend="_onBlockTouchEnd"
:data-left="maxBlockLeft"
data-tag="maxBlock"
>
<slot name="maxBlock"></slot>
</view>
</view>
</template>
<script>
/**
* range-slider v1.0.6
*/
const _windowWidth = uni.getSystemInfoSync().windowWidth;
export default {
data() {
return {
isMinActive: false,
isMaxActive: false,
//#ifdef H5
MAX_LENGTH: 294,
maxBlockLeft: 300,
//#endif
// #ifndef H5
MAX_LENGTH: 700,
maxBlockLeft: 350,
// #endif
minBlockLeft: 0,
progressBarLeft: 0,
progressBarWidth: 350,
originalMinValue: 0,
originalMaxValue: 0
};
},
components: {},
props: {
//组件宽度
width: {
type: Number,
default: 750
},
//组件高度
height: {
type: Number,
default: 100
},
//滑块大小
blockSize: {
type: Number,
default: 50
},
//区间进度条高度
barHeight: {
type: Number,
default: 5
},
//背景条颜色
backgroundColor: {
type: String,
default: '#e9e9e9'
},
//已选择的颜色
activeColor: {
type: String,
default: '#1aad19'
},
//最小值
min: {
type: Number,
default: 0
},
//最大值
max: {
type: Number,
default: 100
},
//设置初始值
values: {
type: Array,
default: function() {
return [0, 100];
}
},
//步长值
step: {
type: Number,
default: 1
},
//live模式，是否动态更新
liveMode: {
type: Boolean,
default: true
}
},
created: function() {
//使用自定义组件编译模式时，支持生命周期为：created
this._refresh();
},
onLoad: function(option) {
//不使用自定义组件编译模式时，支持生命周期为：onload
this._refresh();
},
onUnload: function() {},
watch: {
//组件宽度
width: function(newVal, oldVal, changedPath) {
var that = this;
if (newVal != that.width) {
this._refresh();
}
},
//滑块大小
blockSize: function(newVal, oldVal, changedPath) {
var that = this;
if (newVal != that.blockSize) {
this._refresh();
}
},
//最小值
min: function(newVal, oldVal, changedPath) {
var that = this;
if (newVal != that.min) {
that._refresh();
}
},
//最大值
max: function(newVal, oldVal, changedPath) {
var that = this;
if (newVal != that.max) {
that._refresh();
}
},
//设置初始值
values: function(newVal, oldVal, changedPath) {
var that = this;
var values = that.values;
console.log('refresh', newVal, oldVal);
if (that._isValuesValid(newVal) && that._isValuesValid(values)) {
if (values[0] != oldVal[0] || values[1] != oldVal[1]) that._refresh();
}
}
},
methods: {
//补0
_pad: function(num, n) {
return Array(n - ('' + num).length + 1).join(0) + num;
},
_pxToRpx: function(px) {
return (750 * px) / _windowWidth;
},
_onBlockTouchStart: function(e) {
let tag = e.target.dataset.tag;
if (tag == 'minBlock' || tag == 'maxBlock') {
this.isMinActive = tag == 'minBlock';
this.isMaxActive = tag == 'maxBlock';
//兼容h5平台及某版本微信
if (e.hasOwnProperty('changedTouches')) {
this._blockDownX = e.changedTouches[0].pageX;
} else {
this._blockDownX = e.pageX;
}
//#ifdef H5
this._blockLeft = parseFloat(e.target.dataset.left);
//#endif
// #ifndef H5
this._blockLeft = e.target.dataset.left;
// #endif
this._curBlock = e.target.dataset.tag;
}
},
_onBlockTouchMove: function(e) {
let tag = e.target.dataset.tag;
if (tag == 'minBlock' || tag == 'maxBlock') {
var that = this;
var values = that._calculateValues(e);
that._refreshProgressBar(values[2], values[3]);
that._refreshBlock(values[2], values[3]);
//拖动时也触发事件
var eventDetail = {
minValue: this.formatNumber(values[0], this.step),
maxValue: this.formatNumber(values[1], this.step),
fromUser: true,
originalValue: {
minValue: values[0],
maxValue: values[1]
}
};
this.originalMinValue = values[0];
this.originalMaxValue = values[1];
var eventOption = {};
//
if (this.liveMode) that.$emit('rangechange', eventDetail, eventOption);
}
},
_onBlockTouchEnd: function(e) {
let tag = e.target.dataset.tag;
this.isMinActive = false;
this.isMaxActive = false;
if (tag == 'minBlock' || tag == 'maxBlock') {
var that = this;
var values = that._calculateValues(e.mp.changedTouches[0]);
that._refreshProgressBar(values[2], values[3]);
that._refreshBlock(values[2], values[3]);
var eventDetail = {
minValue: this.formatNumber(values[0], this.step),
maxValue: this.formatNumber(values[1], this.step),
fromUser: true,
originalValue: {
minValue: values[0],
maxValue: values[1]
}
};
this.originalMinValue = values[0];
this.originalMaxValue = values[1];
var eventOption = {};
that.$emit('rangechange', eventDetail, eventOption);
}
},
_isValuesValid: function(values) {
return values != null && values != undefined && values.length == 2;
},
/**
* 根据手势计算相关数据
*/
_calculateValues: function(e) {
var pageX = e.pageX;
//兼容h5平台
if (e.hasOwnProperty('changedTouches')) {
pageX = e.changedTouches[0].pageX;
}
var that = this;
var moveLength = pageX - that._blockDownX;
var left = that._blockLeft + that._pxToRpx(moveLength);
left = Math.max(0, left);
left = Math.min(left, that.MAX_LENGTH);
var minBlockLeft = that.minBlockLeft;
var maxBlockLeft = that.maxBlockLeft;
if (that._curBlock == 'minBlock') {
minBlockLeft = left;
} else {
maxBlockLeft = left;
}
var range = that.max - that.min;
var minLeft = Math.min(minBlockLeft, maxBlockLeft);
var maxLeft = Math.max(minBlockLeft, maxBlockLeft);
var minValue = (minLeft / that.MAX_LENGTH) * range + that.min;
var maxValue = (maxLeft / that.MAX_LENGTH) * range + that.min;
return [minValue, maxValue, minLeft, maxLeft];
},
/**
* 计算滑块坐标
*/
_calculateBlockLeft: function(minValue, maxValue) {
var that = this;
var blockSize = that.blockSize;
var range = that.max - that.min;
var minLeft = ((minValue - that.min) / range) * that.MAX_LENGTH;
var maxLeft = ((maxValue - that.min) / range) * that.MAX_LENGTH;
return [minLeft, maxLeft];
},
/**
* 刷新进度条视图
*/
_refreshProgressBar: function(minBlockLeft, maxBlockLeft) {
var that = this;
var blockSize = that.blockSize;
that.progressBarLeft = minBlockLeft + blockSize / 2;
that.progressBarWidth = Math.abs(maxBlockLeft - minBlockLeft);
},
/**
* 刷新滑块视图
*/
_refreshBlock: function(minBlockLeft, maxBlockLeft) {
var that = this;
that.minBlockLeft = minBlockLeft;
that.maxBlockLeft = maxBlockLeft;
},
/**
* 刷新整个视图
*/
_refresh: function() {
var that = this;
var MAX_LENGTH = that.width - that.blockSize;
that.MAX_LENGTH = MAX_LENGTH;
that.maxBlockLeft = MAX_LENGTH;
that.progressBarWidth = MAX_LENGTH;
var values = that.values;
if (this.originalMinValue && this.originalMinValue) {
values = [this.originalMinValue || values[0], this.originalMaxValue || values[1]];
}
if (that._isValuesValid(values)) {
values[0] = Math.max(that.min, values[0]);
values[0] = Math.min(values[0], that.max);
values[1] = Math.max(that.min, values[1]);
values[1] = Math.min(values[1], that.max);
var leftValues = that._calculateBlockLeft(values[0], values[1]);
that._refreshProgressBar(leftValues[0], leftValues[1]);
that._refreshBlock(leftValues[0], leftValues[1]);
}
},
formatNumber(num, step) {
//格式化数字，保留几位小数
let stepStr = '' + step;
let index = stepStr.indexOf('.');
let len = index > -1 ? stepStr.length - index - 1 : 0;
let offestNum = parseInt(1 + Array(('' + len).length + 1).join(0)) * 0.1;
let tmpNum = num * offestNum;
return ((parseInt(tmpNum / step + (step > 1 ? 1 : step) * 0.5) * step) / offestNum).toFixed(len);
}
}
};
</script>
<style>
.range-slider {
position: relative;
}
.range-bar {
position: absolute;
}
.range-bar {
position: absolute;
top: 50%;
transform: translate(0, -50%);
border-radius: 10000rpx;
}
.range-bar-bg {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10000rpx;
}
.range-bar-progress {
position: absolute;
width: 100%;
height: 100%;
background-color: blueviolet;
}
.block {
position: absolute;
top: 50%;
transform: translate(0, -50%);
background: #fff;
border-radius: 50%;
box-shadow: 0rpx 0rpx 6rpx #ccc;
}
.block.active {
transform: translate(0, -50%) scale(1.5);
}
</style>
pages/ticketCoupons/components/time/day.js 0 → 100644
View file @ c6019f9e
//节假日信息
const day=[
{
year:2022,
month:1,
festival:[
{name:'元旦',day:1},
{name:'除夕',day:31},
]
},
{
year:2022,
month:2,
festival:[
{name:'春节',day:1},
{name:'元宵',day:15},
{name:'情人节',day:14}
]
},
{
year:2022,
month:3,
festival:[
{name:'妇女节',day:8},
]
},
{
year:2022,
month:4,
festival:[
{name:'清明',day:4},
]
},
{
year:2022,
month:5,
festival:[
{name:'劳动节',day:1},
{name:'青年节',day:4},
{name:'母亲节',day:10},
]
},
{
year:2021,
month:6,
festival:[
{name:'儿童节',day:1},
{name:'父亲节',day:21},
{name:'端午',day:14},
]
},
{
year:2021,
month:7,
festival:[
{name:'建党节',day:1}
]
},
{
year:2021,
month:8,
festival:[
{name:'建军节',day:1},
{name:'七夕',day:14},
{name:'中元节',day:22},
]
},
{
year:2021,
month:9,
festival:[
{name:'教师节',day:10},
{name:'中秋',day:21}
]
},
{
year:2021,
month:10,
festival:[
{name:'国庆',day:1},
{name:'重阳',day:14}
]
},
{
year:2021,
month:11,
festival:[
{name:'感恩节',day:26}
]
},
{
year:2021,
month:12,
festival:[
{name:'平安夜',day:24},
{name:'圣诞节',day:25}
]
}
]
export default day
\ No newline at end of file
pages/ticketCoupons/components/time/index.vue 0 → 100644
View file @ c6019f9e
This diff is collapsed.
pages/ticketCoupons/list.vue 0 → 100644
View file @ c6019f9e
<template>
<view class="hotel-list">
<view class="search-box">
<view style="width: 1px; flex: 1;">
<u-search placeholder="目的地/景点/主题" v-model="msg.Name" input-align="left" :value="searchObj.searchKey"
text-color="#111" bg-color="rgba(0,0,0,0)" :show-action="false"></u-search>
</view>
</view>
<view>
<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#000" inactive-color="#444">
<!-- 推荐排序 -->
<u-dropdown-item v-model="msg.OrderBy" :title="optionsTitle[0]" :options="options1" @change="change">
</u-dropdown-item>
<!-- 景点类型 -->
<u-dropdown-item v-model="searchObj.enclosure" :title="optionsTitle[1]" :options="options2" @change="change2"></u-dropdown-item>
<u-dropdown-item v-model="searchObj.sort" :title="optionsTitle[2]" :options="options1" @change="change">
</u-dropdown-item>
</u-dropdown>
</view>
<u-popup v-model="showTimePopup" mode="bottom" border-radius="20" length="95%" :safe-area-inset-bottom="true">
<canlendar @finish="chosenDateResult"></canlendar>
</u-popup>
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' }"
>
<view class="ticket-list">
<view v-for="(item,index) in dataList" :key="item.ID" class="ticket-list-item">
<view class="left-box">
<image class="ticket-img" :src="item.CoverImg" mode="aspectFit"></image>
</view>
<view class="right-box">
<view class="ticket-name">
{{item.Name}}
</view>
<view class="rate-box">
<u-rate v-model="item.ScoreNum" active-color="#FEB969"></u-rate>
<view class="rate">
{{item.ScoreNum}}
<text v-if="item.ScoreNum.length==1">.0</text>
</view>
</view>
</view>
</view>
</view>
<u-loadmore
:status="status"
:load-text="loadText"
:font-size="24"
:margin-top="20"
:margin-bottom="20"
bg-color="#FFF"
/>
</scroll-view>
<!-- 加载中 -->
<view class="loading" v-if="loading">
<u-loading mode="flower" size="48"></u-loading>
<Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
</view>
</view>
</template>
<script>
import rangeSlider from "./components/range-slider.vue"
import canlendar from "./components/time/index.vue"
export default {
data() {
return {
dataList:[],
msg:{
pageIndex:1,
pageSize:10,
Name:"",
FoodTypeIds:"",
IsFree:-1,
IsSameDayBuy:-1,
IsWorryFreeRefund:-1,
OrderBy:1,
},
page_count:1,
loading: false,
status: "loadmore",
count:0,
loadText: {
loadmore: "轻轻上拉，加载更多",
loading: "努力加载中",
nomore: "没有更多了",
},
showTimePopup:false,
value1: 1,
value2: 2,
searchObj:{
searchKey:"",
sort:1,
enclosure:-1,
rateAndPrice:{
price:{},
priceText:"不限",
rate:[]
},
date:{}
},
tempRateAndPrice:{
price:{},
priceText:"不限",
rate:[]
},
optionsTitle: [
"推荐排序",
"景点类型",
"筛选"
],
rates: [
{
label:"二星/经济",
value:1
},
{
label:"三星/舒适",
value:2
},
{
label:"四星/高档",
value:3
},
{
label:"五星/豪华",
value:4
}
],
options1: [
{
label: '销量最高',
value: 1,
},
],
options2: [
{
label: '不限',
value: -1,
},
{
label: '宝镜岩',
value: 1,
},
{
label: '盆景滩',
value: 2,
},
{
label: '芦苇海',
value: 3,
},
{
label: '五彩池',
value: 4,
},
{
label: '镜海',
value: 5,
},
{
label: '犀牛海',
value: 6,
},
{
label: '诺日朗瀑布',
value: 7,
},
{
label: '火花海',
value: 8,
},
],
btnStyle:{
borderRadius: '16rpx',
color: '#111',
fontSize: '30rpx',
width: '100%',
border:"1px solid #111",
background:"#FFF"
},
btnStyle2:{
borderRadius: '16rpx',
color: '#fff',
fontSize: '30rpx',
width: '100%',
background:"#111"
}
}
},
components: {
rangeSlider,
canlendar
},
created() {
uni.setNavigationBarTitle({
title: "门票",
});
this.getScenicType();// 获取景点类型
this.getList();// 获取景点门票类型
},
methods: {
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++;
this.status = "loading";
this.getList();
} else {
this.status = "nomore";
}
},
chosenDateResult(obj){
this.searchObj.date=obj
this.showTimePopup=false
},
chosenDate(){
// uni.navigateTo({
// url:"/pages/hotel/components/time/index"
// })
this.showTimePopup=true
},
setHotelRate(rateId){
let temp=this.tempRateAndPrice.rate.indexOf(rateId)
if(temp==-1){
this.tempRateAndPrice.rate.push(rateId)
}else{
this.tempRateAndPrice.rate.splice(temp,1)
}
},
resetPrice(){
this.optionsTitle[2]="价格/星级"
this.searchObj.rateAndPrice={
price:{
minValue:0,
maxValue:1000
},
priceText:"不限",
rate:[]
}
this.closeDropdown();
},
surePrice(){
let result=""
if(this.tempRateAndPrice.rate.length>0){
this.rates.forEach(x=>{
if(this.tempRateAndPrice.rate.indexOf(x.value)!=-1){
result+=x.label+","
}
})
}
if(this.tempRateAndPrice.priceText!="不限"){
result+=this.tempRateAndPrice.priceText
}
result=result==""?"价格/星级":result
console.log(result)
this.optionsTitle[2]=result
this.$forceUpdate()
this.searchObj.rateAndPrice=this.tempRateAndPrice
this.closeDropdown();
},
rangechange4(e){
if(e.minValue==0){
if(e.maxValue==1000){
this.tempRateAndPrice.priceText="不限"
}else{
this.tempRateAndPrice.priceText=`￥${e.maxValue}以下`
}
}else if(e.maxValue==1000){
this.tempRateAndPrice.priceText=`￥${e.minValue}以上`
}else{
this.tempRateAndPrice.priceText=`￥${e.minValue} - ￥${e.maxValue}之间`
}
},
closeDropdown() {
this.$refs.uDropdown.close();
},
open(index) {
// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
// 同时内部会自动给当前展开项进行高亮
this.$refs.uDropdown.highlight();
if(index==2){
this.tempRateAndPrice=this.searchObj.rateAndPrice
}
},
close(index) {
// 关闭的时候，给当前项加上高亮
// 当然，您也可以通过监听dropdown-item的@change事件进行处理
this.$refs.uDropdown.highlight(index);
},
change(index) {
let temp = this.options1.find(x => {
if (x.value == index) {
return x
} else {
return false
}
})
this.optionsTitle[0] = temp.label
},
change2(index){
if(index!=-1){
let temp = this.options2.find(x => {
if (x.value == index) {
return x
} else {
return false
}
})
this.optionsTitle[1] = temp.label
}else{
this.optionsTitle[1] = "附近"
}
},
// 获取景点类型
getScenicType(){
this.request2({
url: '/api/AppletDining/GetFoodType',
data: {
ClassType:1
}
},
res => {
console.log(325,res.data)
}
);
},
//获取景区门票列表
getList(){
this.request2({
url: '/api/AppletDining/GetTicketCouponsPage',
data: this.msg
},
res => {
this.page_count = res.data.pageCount;
this.dataList=res.data.pageData;
if (this.page_count == 1) {
this.status = "nomore";
}
console.log(336,res.data)
}
);
}
},
}
</script>
<style lang="scss" scoped>
.hotel-list {
height: 100vh;
}
.hotel-list .search-box {
height: 88rpx;
background: #ECF1F4;
border-radius: 44rpx;
display: flex;
align-items: center;
padding: 19rpx 30rpx;
margin: 0 30rpx;
}
.hotel-list .search-box .date {
width: 104rpx;
height: 50rpx;
font-size: 22rpx;
font-weight: 500;
color: #111111;
line-height: 29rpx;
}
.hotel-list .search-box .days {
height: 40rpx;
padding: 8rpx 30rpx 8rpx 19rpx;
color: #DFBE6E;
border-right: 1px solid #E2E2E2;
font-size: 24rpx;
}
.hotel-rate-box{
display: flex;
align-items: center;
}
.hotel-rate{
width: 160rpx;
height: 60rpx;
background: #ECF1F4;
border-radius: 10rpx;
font-size: 26rpx;
color: #999999;
line-height: 60rpx;
margin-right: 15rpx;
text-align: center;
}
.hotel-rate:last-child{
margin-right: 0;
}
.hotel-rate.active{
background: #111111;
color: #FFFFFF;
}
.ticket-list{
padding: 0 30rpx;
.ticket-list-item{
height: 340rpx;
padding: 30rpx 0;
display: flex;
// justify-content: space-between;
.left-box{
width: 220rpx;
height: 280rpx;
// background-color: #CFCFCF;
box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
border-radius: 20rpx;
overflow: hidden;
.ticket-img{
width: 100%;
height: 100%;
}
}
.right-box{
margin-left: 30rpx;
.ticket-name{
height: 70rpx;
line-height: 70rpx;
// display: flex;
// align-items: center;
// justify-content: center;
}
.rate-box{
display: flex;
align-items: center;
.rate{
margin-left: 10rpx;
color: #999999;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment