parent
7fbd4b23df
commit
3fbcbb518c
@ -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> |
||||
File diff suppressed because one or more lines are too long
@ -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 |
Loading…
Reference in new issue