456 lines
8.8 KiB
Vue
456 lines
8.8 KiB
Vue
<template>
|
||
<div class="wrapper" :style="'top:'+statusBarHeight+'px'">
|
||
<div class="header">
|
||
<view class="back_div">
|
||
<image class="back_img" @click="back_city()" src="https://img.agrimedia.cn/chwl%2Fv2%2Fsearch.png" mode=""></image>
|
||
</view>
|
||
<view class="input-wrap">
|
||
<input :class="inputActive? 'input':'input inputActive'" @input="onInput" :placeholder="type == 0? '搜索电影名':'搜索电影院'" v-model="searchValue" />
|
||
<view class="cancel">
|
||
<text v-show="searchValue" @click="searchValue = ''">清空</text>
|
||
<text v-show="!searchValue" @click="cancels">取消</text>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
<scroll-view class="calendar-list" scroll-y="true" :scroll-into-view="scrollIntoId">
|
||
<!-- 搜索结果 -->
|
||
<!-- 电影组件 -->
|
||
<view class="city-div" v-for="(item, index) in searchList" :key="index" v-if="type == 0">
|
||
<film-item :data="item" :key="index"></film-item>
|
||
</view>
|
||
|
||
<!-- 影院组件 -->
|
||
<view class="city-div" v-for="(item, index) in searchList" :key="index" v-if="type == 1">
|
||
<movies-item :data="item" :key="index" :isFilm='true'></movies-item>
|
||
</view>
|
||
</scroll-view>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import MoviesItem from '@/components/movies-item/movies-item.vue';
|
||
import { getFilmList, getFilmYuan } from '@/request/film/index.js';
|
||
import { mapGetters, mapMutations } from 'vuex';
|
||
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
|
||
data() {
|
||
return {
|
||
type: 0,
|
||
|
||
statusBarHeight: this.statusBarHeight,
|
||
ImgUrl: this.ImgUrl,
|
||
letter: [],
|
||
selectLetter: '',
|
||
searchValue: '',
|
||
scrollIntoId: '',
|
||
list: [],
|
||
tId: null,
|
||
searchList: [],
|
||
showMask: false,
|
||
disdingwei: true,
|
||
position: '',
|
||
seconds: 3,
|
||
citys:[],
|
||
hotCity:[],
|
||
inputActive: true,
|
||
listYuan: []
|
||
}
|
||
},
|
||
|
||
onLoad(option) {
|
||
this.type = option.type;
|
||
},
|
||
|
||
computed: {
|
||
...mapGetters({
|
||
// 获取用户自主改变的地址
|
||
UserArae1: 'GetUserArae',
|
||
// 获取用户自主选择的电影城市信息
|
||
UserFilmArae: 'GetFilmData',
|
||
// 获取用户设备定位的地址
|
||
UserArae2: 'GetcityInfor',
|
||
}),
|
||
},
|
||
|
||
watch: {
|
||
UserFilmArae(val) {
|
||
this.getYuanData()
|
||
},
|
||
},
|
||
|
||
created() {
|
||
if (this.type == 0) {
|
||
getFilmList().then(data=>{
|
||
this.citys = data.data;
|
||
})
|
||
} else {
|
||
this.getYuanData();
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
...mapMutations({
|
||
SETFILMDATA: 'SETFILMDATA',
|
||
}),
|
||
|
||
/**
|
||
* @获取电影院
|
||
* */
|
||
getYuanData() {
|
||
const params = {
|
||
cityId: this.UserFilmArae.cityId,
|
||
regionId: this.UserFilmArae.regionId
|
||
}
|
||
getFilmYuan(params).then((res) => {
|
||
this.citys = res.data;
|
||
});
|
||
},
|
||
|
||
getId(index) {
|
||
return this.letter[index];
|
||
},
|
||
|
||
// 遍历搜索
|
||
query(source, text) {
|
||
let res = [];
|
||
var self = this;
|
||
let resultList = [];
|
||
if (this.type == 0) {
|
||
source.forEach((item) => {
|
||
if (item.movieName.indexOf(text) > -1) {
|
||
resultList.push(item);
|
||
}
|
||
});
|
||
} else {
|
||
source.forEach((item) => {
|
||
if (item.cinemaName.indexOf(text) > -1) {
|
||
resultList.push(item);
|
||
}
|
||
});
|
||
}
|
||
return resultList
|
||
},
|
||
|
||
cancels() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
|
||
isString(obj) {
|
||
return typeof obj === 'string';
|
||
},
|
||
|
||
onInput(e) {
|
||
const value = e.target.value;
|
||
if (value !== '' && this.citys && this.citys.length > 0) {
|
||
const queryData = this.query(this.citys, String(value).trim());
|
||
this.searchList = queryData;
|
||
this.disdingwei = false;
|
||
this.inputActive = false;
|
||
} else {
|
||
this.searchList = [];
|
||
this.disdingwei = true;
|
||
this.inputActive = true;
|
||
}
|
||
}
|
||
},
|
||
|
||
back_city(item, ind) {
|
||
console.log(item, ind)
|
||
if (item) {
|
||
const FilmCity = {
|
||
cityId: item.cityId,
|
||
cityName: item.cityName
|
||
}
|
||
|
||
//unshift 把数据插入到首位，与push相反
|
||
if(this.Visit == null){
|
||
this.Visit = []
|
||
}
|
||
|
||
this.Visit.unshift(FilmCity)
|
||
this.searchValue = "";
|
||
this.disdingwei = true
|
||
var arr = this.Visit
|
||
//数组去重
|
||
function distinct(arr) {
|
||
let newArr = []
|
||
for (let i = 0; i < arr.length; i++) {
|
||
if (newArr.indexOf(arr[i]) < 0) {
|
||
newArr.push(arr[i])
|
||
}
|
||
}
|
||
return newArr
|
||
}
|
||
this.Visit = distinct(arr)
|
||
console.log(this.Visit, "---最近访问")
|
||
uni.setStorage({
|
||
key: 'Visit_key',
|
||
data: this.Visit
|
||
});
|
||
|
||
this.SETFILMDATA(FilmCity);
|
||
|
||
// 保存之后退页
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wrapper {
|
||
position: fixed;
|
||
z-index: 999999;
|
||
background: #F5F5F5;
|
||
height: 100%;
|
||
width: 100%;
|
||
top: 0px;
|
||
left: 0px;
|
||
}
|
||
|
||
.mask {
|
||
position: absolute;
|
||
bottom: 0upx;
|
||
top: 83upx;
|
||
left: 0upx;
|
||
right: 0upx;
|
||
width: 750upx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: rgba(0, 0, 0, 0);
|
||
}
|
||
|
||
.mask-r {
|
||
height: 120upx;
|
||
width: 120upx;
|
||
border-radius: 60upx;
|
||
display: flex;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 40upx;
|
||
color: #FFFFFF
|
||
}
|
||
|
||
.content {
|
||
height: 100%;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.header {
|
||
height: 85upx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
display: flex;
|
||
margin: 20rpx 0rpx;
|
||
}
|
||
|
||
.back_div {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: 44rpx;
|
||
left: 70rpx;
|
||
}
|
||
.input-wrap {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0rpx 40rpx;
|
||
.cancel {
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
line-height: 88rpx;
|
||
padding-left: 20rpx;
|
||
}
|
||
}
|
||
.back_img {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
}
|
||
.input {
|
||
font-size: 24upx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
border-radius: 44rpx;
|
||
background-color: #EDEDED;
|
||
padding-left: 20upx;
|
||
padding-right: 20upx;
|
||
box-sizing: border-box;
|
||
text-align: left;
|
||
margin: 0 auto;
|
||
color: #333333;
|
||
padding-left: 80rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.inputActive {
|
||
text-align: left !important;
|
||
}
|
||
|
||
.title {
|
||
font-size: 30upx;
|
||
color: white;
|
||
}
|
||
|
||
.show {
|
||
left: 0;
|
||
width: 100%;
|
||
transition: left 0.3s ease;
|
||
}
|
||
|
||
.hide {
|
||
left: 100%;
|
||
width: 100%;
|
||
transition: left 0.3s ease;
|
||
}
|
||
|
||
|
||
.title {
|
||
font-size: 30upx;
|
||
color: white;
|
||
}
|
||
|
||
.calendar-list {
|
||
position: absolute;
|
||
top: 120rpx;
|
||
bottom: 0upx;
|
||
width: 100%;
|
||
}
|
||
|
||
.letters {
|
||
position: absolute;
|
||
right: 30upx;
|
||
bottom: 0px;
|
||
width: 50upx;
|
||
top: 260upx;
|
||
color: #2f9bfe;
|
||
text-align: center;
|
||
font-size: 24upx;
|
||
}
|
||
|
||
.letters-item {
|
||
margin-bottom: 5upx;
|
||
color: #666666;
|
||
}
|
||
|
||
.letter-header {
|
||
height: 45upx;
|
||
font-size: 22upx;
|
||
color: #333333;
|
||
padding-left: 24upx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
/* background-color: #ebedef; */
|
||
|
||
}
|
||
|
||
.city-div {
|
||
width: 100%;
|
||
padding: 0rpx 20rpx 0rpx 20rpx;
|
||
border-bottom-width: 0.5upx;
|
||
border-bottom-color: #ebedef;
|
||
border-bottom-style: solid;
|
||
align-items: center;
|
||
margin-right: 35upx;
|
||
.regionName {
|
||
width: 100%;
|
||
padding: 20rpx 30rpx;
|
||
margin: 0upx 24upx;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.city {
|
||
padding-left: 30upx;
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
}
|
||
|
||
.dingwei {
|
||
width: 100%;
|
||
padding-top: 25upx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 26upx;
|
||
}
|
||
|
||
.dingwei_Tips {
|
||
margin-left: 24upx;
|
||
margin-bottom: 24upx;
|
||
font-size: 24upx;
|
||
color: #A5A5A5;
|
||
}
|
||
|
||
.dingwei_refresh {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
.dingwei_city {
|
||
width: 100%;
|
||
padding-left: 55upx;
|
||
padding-right: 70upx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
}
|
||
|
||
.dingwei_city_one {
|
||
width: 218rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #DEDEDE;
|
||
border-radius: 44rpx;
|
||
margin-right: 6rpx;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow:ellipsis;
|
||
text-align: center;
|
||
padding: 0rpx 20rpx;
|
||
}
|
||
|
||
.dingweis_div {
|
||
display: flex;
|
||
align-content: flex-end;
|
||
align-items: center;
|
||
font-size: 24upx;
|
||
color: #FD5745;
|
||
}
|
||
|
||
.dingweis {
|
||
width: 32upx;
|
||
height: 32upx;
|
||
}
|
||
|
||
.dingwei_city_zuijin {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.toright {
|
||
margin-right: 25upx;
|
||
}
|
||
</style>
|