@ -0,0 +1,402 @@ |
|||||||
|
<template> |
||||||
|
<!-- 城市选择--> |
||||||
|
<view class="city-select"> |
||||||
|
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="city-select-main" id="city-select-main" |
||||||
|
:scroll-into-view="toView"> |
||||||
|
<!-- 预留搜索--> |
||||||
|
<view class="city-serach" v-if="isSearch"><input @input="keyInput" :placeholder="placeholder" |
||||||
|
class="city-serach-input" /></view> |
||||||
|
<!-- 当前定位城市 --> |
||||||
|
<view class="hot-title" v-if="activeCity && !serachCity">当前定位城市</view> |
||||||
|
<view class="hot-city" v-if="activeCity && !serachCity"> |
||||||
|
<view class="hot-item" @click="cityTrigger(activeCity)">{{ activeCity[formatName] }}</view> |
||||||
|
</view> |
||||||
|
<!-- 热门城市 --> |
||||||
|
<!-- <view class="hot-title" v-if="hotCity.length > 0 && !serachCity">热门城市</view> |
||||||
|
<view class="hot-city" v-if="hotCity.length > 0 && !serachCity"> |
||||||
|
<template v-for="(item, index) in hotCity"> |
||||||
|
<view :key="index" @click="cityTrigger(item, 'hot')" class="hot-item">{{ item[formatName] }}</view> |
||||||
|
</template> |
||||||
|
</view> --> |
||||||
|
<!-- 城市列表(搜索前) --> |
||||||
|
<view class="citys" v-if="!serachCity"> |
||||||
|
<view v-for="(city, index) in sortItems" :key="index" v-show="city.isCity" class="citys-row"> |
||||||
|
<view class="citys-item-letter" :id="'city-letter-' + (city.name === '#' ? '0' : city.name)"> |
||||||
|
{{ city.name }}</view> |
||||||
|
<view class="citys-item" v-for="(item, inx) in city.citys" :key="inx" @click="cityTrigger(item)"> |
||||||
|
{{ item.cityName }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 城市列表(搜索后) --> |
||||||
|
<view class="citys" v-if="serachCity"> |
||||||
|
<view v-for="(item, index) in searchDatas" :key="index" class="citys-row"> |
||||||
|
<view class="citys-item" :key="inx" @click="cityTrigger(item)">{{ item.name }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
<!-- 城市选择索引--> |
||||||
|
<view class="city-indexs-view" v-if="!serachCity"> |
||||||
|
<view class="city-indexs"> |
||||||
|
<view v-for="(cityIns, index) in handleCity" class="city-indexs-text" v-show="cityIns.isCity" |
||||||
|
:key="index" @click="cityindex(cityIns.forName)"> |
||||||
|
{{ cityIns.name }} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import citySelect from './citySelect.js'; |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
//查询提示文字 |
||||||
|
placeholder: { |
||||||
|
type: String, |
||||||
|
default: '请输入城市名称' |
||||||
|
}, |
||||||
|
//传入要排序的名称 |
||||||
|
formatName: { |
||||||
|
type: String, |
||||||
|
default: 'cityName' |
||||||
|
}, |
||||||
|
//当前定位城市 |
||||||
|
activeCity: { |
||||||
|
type: Object, |
||||||
|
default: () => null |
||||||
|
}, |
||||||
|
//热门城市 |
||||||
|
hotCity: { |
||||||
|
type: Array, |
||||||
|
default: () => [] |
||||||
|
}, |
||||||
|
//城市数据 |
||||||
|
obtainCitys: { |
||||||
|
type: Array, |
||||||
|
default: () => [] |
||||||
|
}, |
||||||
|
//是否有搜索 |
||||||
|
isSearch: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
toView: 'city-letter-Find', //锚链接 初始值 |
||||||
|
scrollTop: 0, //scroll-view 滑动的距离 |
||||||
|
cityindexs: [], // 城市索引 |
||||||
|
activeCityIndex: '', // 当前所在的城市索引 |
||||||
|
handleCity: [], // 处理后的城市数据 |
||||||
|
serachCity: '', // 搜索的城市 |
||||||
|
cityData: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
/** |
||||||
|
* @desc 城市列表排序 |
||||||
|
* @return Array |
||||||
|
*/ |
||||||
|
sortItems() { |
||||||
|
for (let index = 0; index < this.handleCity.length; index++) { |
||||||
|
if (this.handleCity[index].isCity) { |
||||||
|
let cityArr = this.handleCity[index].citys; |
||||||
|
cityArr = cityArr.sort(function(a, b) { |
||||||
|
var value1 = a.unicode; |
||||||
|
var value2 = b.unicode; |
||||||
|
return value1 - value2; |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
return this.handleCity; |
||||||
|
}, |
||||||
|
/** |
||||||
|
* @desc 搜索后的城市列表 |
||||||
|
* @return Array |
||||||
|
*/ |
||||||
|
searchDatas() { |
||||||
|
var searchData = []; |
||||||
|
for (let i = 0; i < this.cityData.length; i++) { |
||||||
|
if (this.cityData[i][this.formatName].indexOf(this.serachCity) !== -1) { |
||||||
|
searchData.push({ |
||||||
|
oldData: this.cityData[i], |
||||||
|
name: this.cityData[i][this.formatName] |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
return searchData; |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 初始化城市数据 |
||||||
|
this.cityData = this.obtainCitys; |
||||||
|
this.initializationCity(); |
||||||
|
this.buildCityindexs(); |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
obtainCitys(newData) { |
||||||
|
this.updateCitys(newData); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** |
||||||
|
* @desc 初始化 |
||||||
|
*/ |
||||||
|
updateCitys(data) { |
||||||
|
if (data && data.length) { |
||||||
|
this.cityData = data; |
||||||
|
this.initializationCity(); |
||||||
|
this.buildCityindexs(); |
||||||
|
} |
||||||
|
}, |
||||||
|
/** |
||||||
|
* @desc 监听输入框的值 |
||||||
|
*/ |
||||||
|
keyInput(event) { |
||||||
|
this.serachCity = event.detail.value; |
||||||
|
}, |
||||||
|
/** |
||||||
|
* @desc 初始化城市数据 |
||||||
|
* @return undefind |
||||||
|
*/ |
||||||
|
initializationCity() { |
||||||
|
this.handleCity = []; |
||||||
|
const cityLetterArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', |
||||||
|
'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#' |
||||||
|
]; |
||||||
|
for (let index = 0; index < cityLetterArr.length; index++) { |
||||||
|
this.handleCity.push({ |
||||||
|
name: cityLetterArr[index], |
||||||
|
isCity: false, // 用于区分是否含有当前字母开头的城市 |
||||||
|
citys: [], // 存放城市首字母含是此字母的数组 |
||||||
|
forName: 'city-letter-' + (cityLetterArr[index] == '#' ? '0' : cityLetterArr[ |
||||||
|
index]) //label的绑定 |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
/** |
||||||
|
* @desc 得到城市的首字母 |
||||||
|
* @param str String |
||||||
|
*/ |
||||||
|
getLetter(str) { |
||||||
|
return citySelect.getFirstLetter(str[0]); |
||||||
|
}, |
||||||
|
/** |
||||||
|
* @desc 构建城市索引 |
||||||
|
* @return undefind |
||||||
|
*/ |
||||||
|
buildCityindexs() { |
||||||
|
this.cityindexs = []; |
||||||
|
for (let i = 0; i < this.cityData.length; i++) { |
||||||
|
// 获取首字母 |
||||||
|
const cityLetter = this.getLetter(this.cityData[i][this.formatName]).firstletter; |
||||||
|
// 获取当前城市首字母的unicode,用作后续排序 |
||||||
|
const unicode = this.getLetter(this.cityData[i][this.formatName]).unicode; |
||||||
|
|
||||||
|
const index = this.cityIndexPosition(cityLetter); |
||||||
|
if (this.cityindexs.indexOf(cityLetter) === -1) { |
||||||
|
this.handleCity[index].isCity = true; |
||||||
|
this.cityindexs.push(cityLetter); |
||||||
|
} |
||||||
|
|
||||||
|
this.handleCity[index].citys.push({ |
||||||
|
cityName: this.cityData[i][this.formatName], |
||||||
|
unicode: unicode, |
||||||
|
oldData: this.cityData[i] |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
/** |
||||||
|
* @desc 滑动到城市索引所在的地方 |
||||||
|
* @param id String 城市索引 |
||||||
|
*/ |
||||||
|
cityindex(id) { |
||||||
|
this.toView = id; |
||||||
|
// //创建节点查询器 |
||||||
|
// const query = uni.createSelectorQuery().in(this) |
||||||
|
// var that = this |
||||||
|
// that.scrollTop = 0 |
||||||
|
// //滑动到指定位置(解决方法:重置到顶部,重新计算,影响:页面会闪一下) |
||||||
|
// setTimeout(() => { |
||||||
|
// query |
||||||
|
// .select('#city-letter-' + (id === '#' ? '0' : id)) |
||||||
|
// .boundingClientRect(data => { |
||||||
|
// // console.log("得到布局位置信息" + JSON.stringify(data)); |
||||||
|
// // console.log("节点离页面顶部的距离为" + data.top); |
||||||
|
// data ? (that.scrollTop = data.top) : void 0 |
||||||
|
// }) |
||||||
|
// .exec() |
||||||
|
// }, 0) |
||||||
|
}, |
||||||
|
/** |
||||||
|
* @desc 获取城市首字母的unicode |
||||||
|
* @param letter String 城市索引 |
||||||
|
*/ |
||||||
|
cityIndexPosition(letter) { |
||||||
|
if (!letter) { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
const ACode = 65; |
||||||
|
return letter === '#' ? 26 : letter.charCodeAt(0) - ACode; |
||||||
|
}, |
||||||
|
/** @desc 城市列表点击事件 |
||||||
|
* @param Object |
||||||
|
*/ |
||||||
|
cityTrigger(item) { |
||||||
|
// 传值到父组件 |
||||||
|
this.$emit('cityClick', item.oldData ? item.oldData : item); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
//宽度转换vw |
||||||
|
@function vww($number) { |
||||||
|
@return ($number / 375) * 750+rpx; |
||||||
|
} |
||||||
|
|
||||||
|
view { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.city-serach { |
||||||
|
width: 100%; |
||||||
|
color: #4a4a4a; |
||||||
|
padding: 0 vww(10); |
||||||
|
|
||||||
|
&-input { |
||||||
|
margin: 20rpx 0; |
||||||
|
height: 80rpx; |
||||||
|
line-height: 80rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
padding: 0 25rpx; |
||||||
|
background-color: white; |
||||||
|
border-radius: 25px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.city-select-main { |
||||||
|
position: relative; |
||||||
|
// overflow: scroll; |
||||||
|
// -webkit-overflow-scrolling: touch; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #f6f5fa; |
||||||
|
// overflow-y: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.city-select { |
||||||
|
position: relative; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
background: #f6f5fa; |
||||||
|
|
||||||
|
// 热门城市 |
||||||
|
.hot-title { |
||||||
|
padding-left: vww(23); |
||||||
|
width: 100vw; |
||||||
|
font-size: 14px; |
||||||
|
line-height: vww(40); |
||||||
|
color: #9b9b9b; |
||||||
|
} |
||||||
|
|
||||||
|
.hot-city { |
||||||
|
padding-left: vww(23); |
||||||
|
padding-right: vww(20); |
||||||
|
overflow: hidden; |
||||||
|
width: 100vw; |
||||||
|
|
||||||
|
.hot-item { |
||||||
|
float: left; |
||||||
|
padding: 0 vww(5); |
||||||
|
margin-right: vww(16); |
||||||
|
margin-bottom: vww(6); |
||||||
|
overflow: hidden; |
||||||
|
width: vww(100); |
||||||
|
height: vww(38); |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
display: -webkit-box; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
-webkit-line-clamp: 1; |
||||||
|
|
||||||
|
line-height: vww(38); |
||||||
|
color: #4a4a4a; |
||||||
|
background: #fff; |
||||||
|
border-radius: 5px; |
||||||
|
border: 1px solid #ebebf0; |
||||||
|
|
||||||
|
&:nth-child(3n) { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.hot-hidden { |
||||||
|
display: none; |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.citys { |
||||||
|
.citys-row { |
||||||
|
padding-left: vww(18); |
||||||
|
width: 100%; |
||||||
|
font-size: 14px; |
||||||
|
background: #fff; |
||||||
|
|
||||||
|
.citys-item-letter { |
||||||
|
margin-left: vww(-18); |
||||||
|
padding-left: vww(18); |
||||||
|
margin-top: -1px; |
||||||
|
width: 100vw; |
||||||
|
line-height: vww(30); |
||||||
|
color: #9b9b9b; |
||||||
|
background: #f6f5fa; |
||||||
|
border-top: none; |
||||||
|
} |
||||||
|
|
||||||
|
.citys-item { |
||||||
|
width: 100%; |
||||||
|
line-height: vww(50); |
||||||
|
color: #4a4a4a; |
||||||
|
border-bottom: 1px solid #ebebf0; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.city-indexs-view { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
z-index: 999; |
||||||
|
display: flex; |
||||||
|
width: vww(20); |
||||||
|
height: 100%; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
.city-indexs { |
||||||
|
width: vww(20); |
||||||
|
text-align: center; |
||||||
|
vertical-align: middle; |
||||||
|
align-self: center; |
||||||
|
|
||||||
|
.city-indexs-text { |
||||||
|
margin-bottom: vww(10); |
||||||
|
width: vww(20); |
||||||
|
font-size: 12px; |
||||||
|
color: #4d8cfd; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,89 @@ |
|||||||
|
<template> |
||||||
|
<!--组件--> |
||||||
|
<scroll-view scroll-x='false' scroll-with-animation |
||||||
|
:scroll-into-view=" 'tab-' + scrollIntoView" |
||||||
|
:style="{ height:currentSwiperHeight + 'rpx' }"> |
||||||
|
<view class="swiperTab" v-for="(item,index) in swiperTabList" :key='index' |
||||||
|
:style="{ width:currentSwiperWidth,lineHeight:currentSwiperHeight + 'rpx' }" |
||||||
|
:id=" 'tab-' + index " @tap="CurrentTab(index,item)"> |
||||||
|
|
||||||
|
<!--导航标题--> |
||||||
|
<text :style="{ color:swiperTabIdx == index ? swiperCurrentColor:swiperColor, fontSize:swiperCurrentSize }"> |
||||||
|
{{ item }} |
||||||
|
</text> |
||||||
|
<!--导航标题--> |
||||||
|
|
||||||
|
<!--线条--> |
||||||
|
<view class="swiperLine" v-show="currentSwiperLineShow"> |
||||||
|
<view class="swiperLineActive" |
||||||
|
:class="[ swiperTabIdx == index && currentSwiperLineAnimatie ?'currentLine':'' ]" |
||||||
|
:style="{ |
||||||
|
width:currentSwiperLineActiveWidth, |
||||||
|
height:currentSwiperLineActiveHeight, |
||||||
|
background:currentSwiperLineActiveBg |
||||||
|
}" v-if=" swiperTabIdx == index "> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!--线条--> |
||||||
|
|
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default{ |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad() { }, |
||||||
|
props:{ |
||||||
|
scrollIntoView:{ type:Number },//设置哪个方向可滚动,则在哪个方向滚动到该元素 |
||||||
|
swiperTabList:{ type:Array },//导航列表 |
||||||
|
swiperTabIdx:{ type:Number },//导航对应列表下标 |
||||||
|
swiperCurrentSize:{ type:String },//导航的字体大小 |
||||||
|
swiperColor:{ type:String },//导航栏字体未选中前颜色 |
||||||
|
swiperCurrentColor:{ type:String },//选中当前导航栏字体颜色 |
||||||
|
currentSwiperWidth:{ type:String },//当前导航的宽度 % upx rpx px |
||||||
|
currentSwiperHeight:{ type:Number },//当前导航的高度度 rpx px |
||||||
|
currentSwiperLineShow:{ type:Boolean },//是否显示线条 |
||||||
|
currentSwiperLineActiveWidth:{ type:String },//当前选中的导航栏线条的宽度 |
||||||
|
currentSwiperLineActiveHeight:{ type:String },//当前选中的导航栏线条的高度度 |
||||||
|
currentSwiperLineActiveBg:{ type:String },//当前选中的导航栏线条颜色 |
||||||
|
currentSwiperLineAnimatie:{ type:Number },//当前选中的导航栏线条过渡效果 |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
|
||||||
|
CurrentTab:function (index,item){ |
||||||
|
this.$emit('change',index,item); |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
.swiperHead scroll-view{ |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: nowrap; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
.swiperTab{ |
||||||
|
display: inline-flex; |
||||||
|
flex-direction: column; |
||||||
|
text-align: center; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.swiperLine{ position: absolute;bottom: 10upx;left: 0;width: 100%;z-index: 10; } |
||||||
|
.swiperLineActive{ margin: 0 auto;border-radius: 30upx; } |
||||||
|
@keyframes currentLine{ |
||||||
|
0%{ |
||||||
|
transform: scale(0.5); |
||||||
|
} |
||||||
|
100%{ |
||||||
|
transform: scale(1); |
||||||
|
} |
||||||
|
} |
||||||
|
.currentLine{ animation:currentLine 300ms forwards; } |
||||||
|
</style> |
@ -0,0 +1,224 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
|
||||||
|
<view class="swiperMain"> |
||||||
|
<view class="swiperHead"> |
||||||
|
<!--组件--> |
||||||
|
<swiperNavBar :scrollIntoView="scrollIntoView" :swiperTabList='swiperTabList' |
||||||
|
:swiperTabIdx='swiperTabIdx' :currentSwiperWidth='currentSwiperWidth' |
||||||
|
:currentSwiperHeight='currentSwiperHeight' :swiperCurrentSize='swiperCurrentSize' |
||||||
|
:swiperColor='swiperColor' :swiperCurrentColor='swiperCurrentColor' |
||||||
|
:currentSwiperLineShow="currentSwiperLineShow" |
||||||
|
:currentSwiperLineActiveWidth="currentSwiperLineActiveWidth" |
||||||
|
:currentSwiperLineActiveHeight="currentSwiperLineActiveHeight" |
||||||
|
:currentSwiperLineActiveBg="currentSwiperLineActiveBg" |
||||||
|
:currentSwiperLineAnimatie="currentSwiperLineAnimatie" v-if=" swiperTabList.length > 1 " |
||||||
|
@change="CurrentTab"> |
||||||
|
</swiperNavBar> |
||||||
|
<!--组件--> |
||||||
|
</view> |
||||||
|
<!--内容--> |
||||||
|
<view class="swiperCont" :style="{ paddingTop:currentSwiperHeight + 'rpx' }"> |
||||||
|
<swiper class="swiper" :style="{ height:mainHeight + 'px' }" :current="swiperTabIdx" |
||||||
|
@change="SwiperChange"> |
||||||
|
<swiper-item class="swiperItem" v-for="(item,index) in swiperTabList" :key='index'> |
||||||
|
<!-- {{ item }} --> |
||||||
|
<view class="contsitem" v-for="(item,index) in productList" :key='index' |
||||||
|
:class="[producval == item ? 'activecol' : 'contsitem']" @click="changepro(item)"> |
||||||
|
<view class="title">连续包月</view> |
||||||
|
<view class="price">¥<text style="font-size: 24px;">12.2</text></view> |
||||||
|
<view class="fgprice">¥12.2</view> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
|
||||||
|
<view class="subbtn" @click="jumpcom()">提交</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import swiperNavBar from '../../components/swiperNavBar.vue'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
//导航 |
||||||
|
scrollIntoView: 0, //设置哪个方向可滚动,则在哪个方向滚动到该元素 |
||||||
|
swiperTabList: ['腾讯视频', '爱奇艺视频', '优酷视频', '酷狗音乐', 'QQ音乐', '芒果TV'], //导航列表 |
||||||
|
swiperTabIdx: 0, |
||||||
|
swiperCurrentSize: '26rpx', //导航的字体大小 |
||||||
|
swiperColor: '#333333', //导航栏字体未选中前颜色 |
||||||
|
swiperCurrentColor: '#1D63FF', //选中当前导航栏字体颜色 |
||||||
|
currentSwiperWidth: '23%', //当前导航的宽度 % upx rpx px (导航超出可左右滑动 ) |
||||||
|
currentSwiperHeight: 100, //当前导航的高度度 rpx px |
||||||
|
mainHeight: 200, //全屏或者局部滑动设置的高度 |
||||||
|
currentSwiperLineShow: true, //是否显示导航栏的线条 (线条距离标题太近的话可自行修改.swiperLine的css) |
||||||
|
currentSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色 |
||||||
|
currentSwiperLineActiveWidth: '30rpx', //当前选中的导航栏线条的宽度 upx rpx px |
||||||
|
currentSwiperLineActiveHeight: '6rpx', //当前选中的导航栏线条的高度度 upx rpx px |
||||||
|
currentSwiperLineAnimatie: 300, //当前选中的导航栏线条过渡效果 |
||||||
|
productList: [1, 2, 3, 4, 5, 6, 7, 8], |
||||||
|
producval: '1' |
||||||
|
|
||||||
|
//(全屏出现滚动条 去掉paddingTop 但导航栏会遮住部分内容 自行改.swiperCont .swiper里css) |
||||||
|
//也可获取导航栏的高度 屏幕高度减去导航栏高度 = 你的内容全屏高度 不会出现滚动条 |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad() { |
||||||
|
|
||||||
|
}, |
||||||
|
components: { |
||||||
|
swiperNavBar |
||||||
|
}, |
||||||
|
onReady() { |
||||||
|
|
||||||
|
this.mainHeight = uni.getSystemInfoSync().windowHeight; //获取屏幕的高度使得全屏左右滑动 |
||||||
|
console.log(this.mainHeight) |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
//tab点击事件 自行完善需要的代码 |
||||||
|
CurrentTab: function(index, item) { |
||||||
|
this.swiperTabIdx = index; |
||||||
|
this.scrollIntoView = Math.max(0, index - 1); |
||||||
|
//console.log(index + '----' + item) |
||||||
|
}, |
||||||
|
//滑动事件 自行完善需要的代码 |
||||||
|
SwiperChange: function(e) { |
||||||
|
//console.log(e) |
||||||
|
//console.log(e.detail) |
||||||
|
console.log(e.detail.current); |
||||||
|
this.swiperTabIdx = e.detail.current; |
||||||
|
this.scrollIntoView = Math.max(0, e.detail.current - 1); |
||||||
|
}, |
||||||
|
//选择充值 |
||||||
|
changepro(item) { |
||||||
|
this.producval = item; |
||||||
|
}, |
||||||
|
//跳转确定订单 |
||||||
|
jumpcom(){ |
||||||
|
uni.navigateTo({ |
||||||
|
url:'../rec-confirmation/rec-confirmation' |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss"> |
||||||
|
page { |
||||||
|
background: #F8F8F8; |
||||||
|
} |
||||||
|
|
||||||
|
.swiperMain { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.swiperHead { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
z-index: 10; |
||||||
|
width: 100%; |
||||||
|
background: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.swiperHead scroll-view { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: nowrap; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.swiperTab { |
||||||
|
display: inline-flex; |
||||||
|
flex-direction: column; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.swiperCont { |
||||||
|
width: 100%; |
||||||
|
padding-top: 70rpx; |
||||||
|
background-color: #f0f0f0; |
||||||
|
} |
||||||
|
|
||||||
|
/* #ifdef H5 */ |
||||||
|
.swiperHead { |
||||||
|
position: fixed; |
||||||
|
top: 44px; |
||||||
|
z-index: 10; |
||||||
|
width: 100%; |
||||||
|
background: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
/* #endif */ |
||||||
|
|
||||||
|
.swiper { |
||||||
|
width: 100%; |
||||||
|
height: 400rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.swiperItem { |
||||||
|
overflow: auto; |
||||||
|
background: #ffffff; |
||||||
|
text-align: center; |
||||||
|
color: #333333; |
||||||
|
font-size: 30upx; |
||||||
|
} |
||||||
|
|
||||||
|
.contsitem { |
||||||
|
width: 20%; |
||||||
|
height: 110px; |
||||||
|
border-radius: 5px; |
||||||
|
margin-top: 20px; |
||||||
|
display: inline-block; |
||||||
|
text-align: center; |
||||||
|
margin-left: 4%; |
||||||
|
background-color: #f0f0f0; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
color: #333333; |
||||||
|
font-size: 14px; |
||||||
|
padding-top: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.price { |
||||||
|
font-size: 14px; |
||||||
|
padding-top: 5px; |
||||||
|
font-weight: bold; |
||||||
|
color: #caba60; |
||||||
|
} |
||||||
|
|
||||||
|
.fgprice { |
||||||
|
color: #999999; |
||||||
|
text-decoration: line-through; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.activecol { |
||||||
|
background-color: #edd076; |
||||||
|
} |
||||||
|
|
||||||
|
.swiperItem image { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.subbtn { |
||||||
|
width: 80%; |
||||||
|
height: 45px; |
||||||
|
line-height: 45px; |
||||||
|
margin-left: 10%; |
||||||
|
background-color: #1D63FF; |
||||||
|
color: #FFFFFF; |
||||||
|
border-radius: 20px; |
||||||
|
margin-top: 80px; |
||||||
|
position: absolute; |
||||||
|
bottom: 40px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,184 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view class="concont width94 mart10 backcorfff height45 alijusstart paddtop5 paddbotm5"> |
||||||
|
<input class="width100 padleft15 " placeholder="请输入充值手机号" /> |
||||||
|
</view> |
||||||
|
<view class="concont width94 mart10 backcorfff"> |
||||||
|
<view class="width94 paddtop10 font14 fcor333"> |
||||||
|
充值详情 |
||||||
|
</view> |
||||||
|
<view class="width100 bor-botm1 mart10 marb10"></view> |
||||||
|
<view class="width100 "> |
||||||
|
<view class="width100 alijusstart paddbotm15 mart10 bor-botm1"> |
||||||
|
<view class="width10"> |
||||||
|
</view> |
||||||
|
<view class="width50 font14 fcor333 fontwig6">腾讯一月会员</view> |
||||||
|
<view class="width20 font12 fcor999">x1</view> |
||||||
|
<view class="width20"> |
||||||
|
<view class="width100 fcor333 font13">¥16.8</view> |
||||||
|
<view class="width100 fcor999 font13" style="text-decoration: line-through;">¥17.8</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="width90 fotrt height50 font13 fcor999"> |
||||||
|
共 <text class="fcor333 fontwig6" style="margin: 0px 5px;"> 1 </text> 件 小计: |
||||||
|
<text class="font16 colorc3 fontwig6 margle"> ¥16.8</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="width94 concont mart10 backcorfff"> |
||||||
|
<view class="width92 alijusstart paddtop20"> |
||||||
|
<view class="width30 fcor333 fontwig6 font16"> |
||||||
|
积分抵扣 |
||||||
|
</view> |
||||||
|
<view class="cj-slider"> |
||||||
|
<view class="flleft fotct font14 fcor666" style="width: 15%;">0</view> |
||||||
|
<cj-slider style="width: 60%; float:left;" v-model="priceValue" :min="0" :max="availIntegal" |
||||||
|
:step="1" :blockWidth="40" @end="blockEnd" /> |
||||||
|
<view class="flright fotrt font14 fcor666" style="width: 25%;">{{availIntegal}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="width94 line1 mart15 marb5"></view> |
||||||
|
<view class="height50 width100 backcorfff"> |
||||||
|
<view class="width70 flleft fcor666 font16 text1" style="padding-left: 4%;"> |
||||||
|
抵扣金额 |
||||||
|
</view> |
||||||
|
<view class="width20 flright fotrt paddtright10 font15 fcor666 alijun" style="align-items: center;"> |
||||||
|
¥{{priceValue[1] / 100}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="height50 width100"> |
||||||
|
<view class="width100 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> |
||||||
|
支付方式 |
||||||
|
<!-- : |
||||||
|
<text class="jfrecharge" style="background-color: #c72a20;" v-if="typeid == 1" @click="jumpdeposits">积分充值</text> |
||||||
|
<text class="jfrecharge backcorf2f6" v-if="typeid == 2" @click="jumpdeposits">积分充值</text> --> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="height50 width100" @tap="paytype='weixin'"> |
||||||
|
<view class="width50 flleft fcor333 font16" style="padding-left: 4%;"> |
||||||
|
微信支付 |
||||||
|
</view> |
||||||
|
<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun" |
||||||
|
style="align-items: center;"> |
||||||
|
<radio :checked="paytype=='weixin'" color="#c72a20" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="height50 width100" @tap="paytype='gonghuika'"> |
||||||
|
<view class="width70 flleft fcor333 font16 text1" style="padding-left: 4%;"> |
||||||
|
汇联通工会卡<text class="font14 fcor666 margle">可用余额: 13.1元</text> |
||||||
|
</view> |
||||||
|
<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun" |
||||||
|
style="align-items: center;"> |
||||||
|
<radio :checked="paytype=='gonghuika'" @click="changeRiado()" color="#c72a20" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- <view class="concont width94 mart10 backcorfff"> |
||||||
|
<view class="width94 alijusstart paddtop10 font14 fcor666"> |
||||||
|
<view class="width40">联系电话</view> |
||||||
|
<input class="width60 fotrt" placeholder="请输入联系人手机号"/> |
||||||
|
</view> |
||||||
|
<view class="width94 font12 fcor999 mart5 paddbotm10">经用于接收取餐码,请正确填写</view> |
||||||
|
</view> |
||||||
|
--> |
||||||
|
|
||||||
|
<view class="footbtn width100 height50 backcor33"> |
||||||
|
<view class="width94 alijusstart"> |
||||||
|
<view class="width70 fcorfff"> |
||||||
|
合计: ¥<text class="font16 fontwig6" style="margin: 0px 6px;">16.8</text> <text class="font12">已省¥1.7</text> |
||||||
|
</view> |
||||||
|
<view class="width30 fotrt"> |
||||||
|
<view class="btnpay fotct font13 fcorfff" style="background-color: #c72a20;">去支付</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import cjSlider from '@/components/cj-slider/cj-slider.vue'; |
||||||
|
let app = getApp(); |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
cjSlider |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
orderList: [1, 2, 3, 4, 5], |
||||||
|
sttypeid: 1, |
||||||
|
paytype: '', //支付方式 |
||||||
|
priceValue: [0, 2000], // 积分可以指定默认值 |
||||||
|
availIntegal: '2000', // 可用积分 |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//选择方式 |
||||||
|
changedissr(item) { |
||||||
|
this.sttypeid = item; |
||||||
|
}, |
||||||
|
//滑动结束 |
||||||
|
blockEnd() { |
||||||
|
this.payPrice = this.priceValue[1]; |
||||||
|
if (this.payPrice == 0) { |
||||||
|
this.isUse = false; |
||||||
|
this.paytype = ''; |
||||||
|
} else { |
||||||
|
this.isUse = true; |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
page { |
||||||
|
background-color: #f0f0f0; |
||||||
|
} |
||||||
|
|
||||||
|
.headsbg { |
||||||
|
border-radius: 0 0 30px 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.concont { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.jfrecharge { |
||||||
|
padding: 3px 20rpx; |
||||||
|
color: #fff; |
||||||
|
margin-left: 50%; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 30rpx; |
||||||
|
border-radius: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.footbtn { |
||||||
|
bottom: 0px; |
||||||
|
position: fixed; |
||||||
|
} |
||||||
|
|
||||||
|
.btnpay { |
||||||
|
width: 90px; |
||||||
|
border-radius: 22px; |
||||||
|
height: 36px; |
||||||
|
line-height: 36px; |
||||||
|
} |
||||||
|
|
||||||
|
.takemode { |
||||||
|
width: 48%; |
||||||
|
border-radius: 5px; |
||||||
|
border: 1px solid #999999; |
||||||
|
} |
||||||
|
|
||||||
|
.aftermode { |
||||||
|
background-color: #faf1f1; |
||||||
|
color: #c72a20; |
||||||
|
} |
||||||
|
|
||||||
|
.cj-slider { |
||||||
|
width: 100%; |
||||||
|
align-items: center; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
</style> |
After Width: | Height: | Size: 691 B |
After Width: | Height: | Size: 35 KiB |
After Width: | Height: | Size: 613 B |
After Width: | Height: | Size: 649 B |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 3.3 KiB |
@ -0,0 +1,117 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<city-select @cityClick="cityClick" :formatName="formatName" :activeCity="activeCity" :hotCity="hotCity" |
||||||
|
:obtainCitys="obtainCitys" :isSearch="true" ref="citys"></city-select> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import citySelect from '@/components/city-select/city-select.vue' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
//需要构建索引参数的名称(注意:传递的对象里面必须要有这个名称的参数) |
||||||
|
formatName: 'cityName', |
||||||
|
//当前城市 |
||||||
|
activeCity: { |
||||||
|
id: 1, |
||||||
|
cityName: '南京市' |
||||||
|
}, |
||||||
|
//热门城市 |
||||||
|
hotCity: [{ |
||||||
|
id: 0, |
||||||
|
cityName: '南京市' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
cityName: '南京市' |
||||||
|
} |
||||||
|
], |
||||||
|
//显示的城市数据 |
||||||
|
obtainCitys: [{ |
||||||
|
"cityInitial": "N", |
||||||
|
"cityName": "内江市", |
||||||
|
"provinceCode": "510000", |
||||||
|
"cityCode": "511000000000", |
||||||
|
"provinceName": "四川省", |
||||||
|
"cityId": 528 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"cityInitial": "L", |
||||||
|
"cityName": "乐山市", |
||||||
|
"provinceCode": "510000", |
||||||
|
"cityCode": "511100000000", |
||||||
|
"provinceName": "四川省", |
||||||
|
"cityId": 141 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"cityInitial": "N", |
||||||
|
"cityName": "南充市", |
||||||
|
"provinceCode": "510000", |
||||||
|
"cityCode": "511300000000", |
||||||
|
"provinceName": "四川省", |
||||||
|
"cityId": 130 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"cityInitial": "M", |
||||||
|
"cityName": "眉山市", |
||||||
|
"provinceCode": "510000", |
||||||
|
"cityCode": "511400000000", |
||||||
|
"provinceName": "四川省", |
||||||
|
"cityId": 228 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"cityInitial": "Y", |
||||||
|
"cityName": "宜宾市", |
||||||
|
"provinceCode": "510000", |
||||||
|
"cityCode": "511500000000", |
||||||
|
"provinceName": "四川省", |
||||||
|
"cityId": 144 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"cityInitial": "G", |
||||||
|
"cityName": "广安市", |
||||||
|
"provinceCode": "510000", |
||||||
|
"cityCode": "511600000000", |
||||||
|
"provinceName": "四川省", |
||||||
|
"cityId": 5 |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
components: { |
||||||
|
citySelect |
||||||
|
}, |
||||||
|
onLoad() { |
||||||
|
|
||||||
|
this.activeCity = { |
||||||
|
id: 1, |
||||||
|
cityName: '南京市', |
||||||
|
cityCode: 110100 |
||||||
|
} |
||||||
|
//热门城市 |
||||||
|
this.hotCity = [{ |
||||||
|
id: 0, |
||||||
|
cityName: '南京市', |
||||||
|
cityCode: 110100 |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
cityName: '北京市', |
||||||
|
cityCode: 110102 |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
cityClick(item) { |
||||||
|
uni.showToast({ |
||||||
|
icon: 'none', |
||||||
|
title: 'item: ' + JSON.stringify(item), |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style></style> |
@ -0,0 +1,83 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<image mode="widthFix" class="width100 imgs" src="../static/imgs/skhome.png"></image> |
||||||
|
<view class="width94 heads alijusstart"> |
||||||
|
<view class="width48 backcorfff height280 fotct paddtop15"> |
||||||
|
<view class="fcor333 fontwig6 font20">星专享</view> |
||||||
|
<view class="color2f6f43 font16 mart10">低至8折</view> |
||||||
|
<image class="width80p mart20" mode="widthFix" src="../static/imgs/sk1.png"></image> |
||||||
|
<view class="mart20 width80 height30 border-15 fcorfff backcorf2f6 font13" @click="jumpbuffert()"> |
||||||
|
立即点餐(堂食/外带) |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="foots fotct marb20"> |
||||||
|
<view class="width90 mart30 colorbe font12"> 本产品为第三方代点餐/代配送服务!</view> |
||||||
|
<view class="width90 mart5 colorbe font12"> 即第三方代点餐,一切商业行为与星巴克无关。</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
let app = getApp(); |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//跳转自助点餐 |
||||||
|
jumpbuffert() { |
||||||
|
app.globalData.distinguishid = 2; |
||||||
|
uni.navigateTo({ |
||||||
|
url: '/qianzhu-KFC/buffet-order/buffet-order' |
||||||
|
}) |
||||||
|
}, |
||||||
|
//跳转外卖 |
||||||
|
jumpaddress() { |
||||||
|
uni.navigateTo({ |
||||||
|
url: '../address/address' |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
page { |
||||||
|
background-color: #f0f0f0; |
||||||
|
} |
||||||
|
|
||||||
|
.imgs { |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
|
||||||
|
.width48 { |
||||||
|
width: 60%; |
||||||
|
margin-left: 20%; |
||||||
|
border-radius: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.margitle { |
||||||
|
margin-left: 4%; |
||||||
|
} |
||||||
|
|
||||||
|
.heads { |
||||||
|
position: relative; |
||||||
|
top: 440rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.border-15 { |
||||||
|
border-radius: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.colorbe { |
||||||
|
color: #beac7c; |
||||||
|
} |
||||||
|
|
||||||
|
.foots { |
||||||
|
position: relative; |
||||||
|
top: 450rpx; |
||||||
|
} |
||||||
|
</style> |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 159 KiB |