Skip to content

U
uni-pdtravel
Commit 4638ede3 authored by 潘永坪's avatar 潘永坪
Browse files
Options

页面新增

parent aa1f7685
Hide whitespace changes
Inline Side-by-side
Showing with 923 additions and 2 deletions
pages.json
View file @ 4638ede3
......@@ -148,6 +148,13 @@
"navigationBarTitleText": "个人中心",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/common/cityList/cityList",
"style" :
{
"navigationBarTitleText" : "城市列表"
}
}
],
//分包加载配置，此配置为小程序的分包加载机制。
......@@ -540,14 +547,15 @@
"path" : "chooseProduct/chooseProduct",
"style" :
{
"navigationBarTitleText" : ""
"navigationBarTitleText" : "",
"navigationStyle": "custom"
}
},
{
"path" : "albumLogin/albumLogin",
"style" :
{
"navigationBarTitleText" : ""
"navigationBarTitleText" : "登录"
}
}
......
pages/album/albumLogin/albumLogin.vue 0 → 100644
View file @ 4638ede3
<template>
<view class="wrap">
<view class="top">
<view class="top1">获取拍摄照片</view>
<view class="top2">摄影时预留手机号</view>
</view>
<view class="middle">
<view class="input-wrap">
<image src="/pages/album/static/img/account.png"></image>
<input type="number" maxlength="11" placeholder="请输入摄影时预留手机号" />
</view>
<view class="input-wrap">
<image src="/pages/album/static/img/code.png"></image>
<input placeholder="请输入验证码" />
<view>
<text v-if="number==60" @click="getCode()">获取验证码</text>
<text v-else>{{number}}s</text>
</view>
</view>
</view>
<view class="bottom">
登录
</view>
</view>
</template>
<script>
export default {
data() {
return {
number:60
}
},
methods: {
//---获取验证码
getCode(){
let timer=setInterval(()=>{
this.number--
if(this.number<1){
this.number=60
clearInterval(timer)
}
},1000)
}
}
}
</script>
<style lang="scss" scoped>
.wrap{
padding: 90rpx 56rpx;
min-height: 100vh;
background: #ffffff;
}
.top1{
font-size: 40rpx;
font-weight: 600;
}
.top2{
margin-top: 20rpx;
color: #999999;
}
.middle{
margin-top: 100rpx;
}
.input-wrap{
height: 100rpx;
background: #F9F9F9;
border-radius: 50rpx;
padding:0 50rpx;
display: flex;
align-items: center;
input{
flex: 1;
}
image{
width: 44rpx;
height: 44rpx;
margin-right: 16rpx;
}
}
.middle>view:last-child{
margin-top: 40rpx;
}
.bottom{
margin-top: 80rpx;
height: 100rpx;
text-align: center;
line-height: 100rpx;
background: #FE6600;
border-radius: 50rpx;
color: #ffffff;
font-size: 32rpx;
font-weight: 600;
}
</style>
pages/album/chooseProduct/chooseProduct.vue 0 → 100644
View file @ 4638ede3
<template>
<view class="wrap">
<view class="top">
<view class="head" :style="{marginTop:headPosition+'px'}">
<view @click="goReturn()">
<u-icon name="arrow-left" color="#333333" size='36' bold></u-icon>
</view>
<view class="head-address" @click="goCity()">
<text style="margin-right: 10rpx;">重庆</text>
<u-icon name="arrow-down-fill" color="#333333" size='32'></u-icon>
</view>
<view></view>
</view>
<view class="tabbar">
<view class="tab-list" v-for="(item,index) in tabList" :key="index" @click="tabClick(index)" :class="{on:active==index}">
<view>{{item}}</view>
<view class="tab-line"></view>
</view>
</view>
</view>
<view class="middle" :style="{paddingTop:(headPosition+104)+'px'}">
<view v-for="(item,index) in photoList" :key="index" class="photo-list" @click="photoClick(item)">
<image src="/static/img/common/travalphoto.png"></image>
<view class="check-box">
<view class="checked" v-if="item.checked">
<u-icon name="checkmark" color="#ffffff" size='28'></u-icon>
</view>
<view class="no-checked" v-else>
</view>
</view>
</view>
</view>
<view class="bottom">
<view class="bottom-choose">
<view class="bottom-choose-left" @click="allChoose()">
<view class="checked" v-if="allChecked" style="width: 36rpx;height: 36rpx;">
<u-icon name="checkmark" color="#ffffff" size='28'></u-icon>
</view>
<view class="no-checked" v-else style="width: 36rpx;height: 36rpx;">
</view>
<view style="margin-left: 20rpx;">
<text style="margin-right: 10rpx;">全选</text>
<text>¥</text>
<text style="font-size: 36rpx;font-weight: bold;">99</text>
</view>
</view>
<view class="bottom-choose-right" @click="showKnow=true">
<text>购买须知</text>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
</view>
</view>
<view class="bottom-pay">
<view class="bottom-pay-left">
<text class="pay-price1">
¥<text style="font-size: 40rpx;">260</text>
</text>
<text class="pay-price2">¥190</text>
</view>
<view class="bottom-pay-right">
<template>
<text @click="clickDetail()">明细</text>
<view style="margin: 0 10rpx;">
<u-icon name="arrow-up" size="32"></u-icon>
</view>
</template>
<text class="pay-btn">去支付</text>
</view>
</view>
</view>
<!-- 购买须知弹窗 -->
<view class="buy-know" v-if="showKnow">
<view class="know-wrap">
<view class="know-title">购买须知</view>
<view class="know-content">
<view>
1、订单付款后，照片自动保存至手机相册。
</view>
<view>
2、若相册未找到,可在【我的订单-订单详情】中重新下载,照片保留7天。
</view>
<view>
3、已下载照片系统自动删除,不可重复购买;未下载照片系统保留7天。
</view>
</view>
<view class="know-bottom">
<text @click="showKnow=false">我知道了</text>
</view>
</view>
</view>
<!-- 明细弹窗 -->
<view class="photo-detail" :style="{height:detailHeight}">
<view class="detail-wrap">
<view class="detail-title" @click="detailHeight='0px'">
<text></text>
<text>金额明细</text>
<u-icon name="close"></u-icon>
</view>
<view class="detail-total">
<text>商品总价</text>
<text>
¥
<text style="font-size: 48rpx;">20</text>
</text>
</view>
<view class="detail-list">
<text>免费照片</text>
<text>5张</text>
</view>
<view class="detail-list">
<text>精修照片</text>
<text>5张</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
showKnow:false,//是否显示购买须知
showDetail:false,//是否显示明细弹窗
tabList:['旅拍','常规'],//导航列表
active:0,//导航下标
photoList:[],//相片列表
allChecked:false,//是否全选中
headPosition:0,//头部位置
cityName: '重庆',
areaId:'100500000',//城市ID
detailHeight:'0px',
}
},
onLoad() {
let localShowKnow=uni.getStorageSync('localShowKnow')||''
if(!localShowKnow){
//本地存储一个字段，跟登录的缓存一样保留7天，7天之内不会主动弹窗，7天之后主动弹出购票须知
uni.setStorageSync('localShowKnow',true)
this.showKnow=true
}
let statusBarHeight = uni.getWindowInfo().statusBarHeight||0 // 状态栏高度
let capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.headPosition=statusBarHeight+(capsule.top-statusBarHeight)
for(let i=0;i<30;i++){
this.photoList.push({
checked:false
})
}
},
methods: {
//---返回上一个页面
goReturn(){
uni.navigateBack({
delta:1
})
},
//---跳转城市列表页面
goCity(){
uni.navigateTo({
url:'/pages/common/cityList/cityList'
})
},
//---导航切换
tabClick(index){
this.active=index
console.log(this.active)
},
//---相片点击
photoClick(item){
item.checked=!item.checked
let number=0
this.photoList.forEach(item=>{
if(item.checked){
number++
}
})
//判断是否全部选中
if(number==this.photoList.length){
this.allChecked=true
}else{
this.allChecked=false
}
},
//---全选
allChoose(){
this.allChecked=!this.allChecked
if(this.allChecked){
this.photoList.forEach(item=>{
item.checked=true
})
}else{
this.photoList.forEach(item=>{
item.checked=false
})
}
},
//---明细点击
clickDetail(){
let windowHeight=uni.getWindowInfo().screenHeight
if(this.detailHeight=='0px'){
this.detailHeight=(windowHeight-50)+'px'
}else{
this.detailHeight='0px'
}
}
}
}
</script>
<style lang="scss" scoped>
.top{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
background: #ffffff;
}
.head{
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 32rpx;
}
.head-address{
font-size: 36rpx;
display: flex;
align-items: center;
font-weight: 600;
}
.tabbar{
display: flex;
justify-content: space-around;
height: 50px;
color: #999999;
align-items: center;
}
.tab-list{
padding: 0 20rpx;
}
.tab-line{
height: 6rpx;
background: #000000;
border-radius: 4rpx;
margin-top: 2rpx;
display: none;
}
.tabbar .on{
font-size: 30rpx;
color: #333333;
.tab-line{
display: block;
}
}
.middle{
padding:0 24rpx 240rpx 24rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.photo-list{
width: 23%;
margin-bottom: 16rpx;
aspect-ratio: 3/4;
position: relative;
image{
width: 100%;
height: 100%;
}
}
.check-box{
position: absolute;
left: 20rpx;
bottom: 20rpx;
}
.no-checked{
width: 28rpx;
height: 28rpx;
background: #ffffff;
border-radius: 9rpx;
border: 2rpx solid #dcdcdc;
}
.checked{
width: 28rpx;
height: 28rpx;
background: #FE6600;
border-radius: 7rpx;
display: flex;
justify-content: center;
align-items: center;
}
.bottom{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #ffffff;
}
.bottom-choose{
height: 100rpx;
padding: 0 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.bottom-choose-left{
display: flex;
align-items: center;
}
.bottom-choose-right{
display: flex;
align-items: center;
}
.bottom-pay{
display: flex;
justify-content: space-between;
height: 120rpx;
background: #ffffff;
padding: 0 40rpx;
align-items: center;
border-top: 1px solid #ededed;
}
.pay-price1{
color: #FE6600;
font-weight: bold;
margin-right: 10rpx;
}
.pay-price2{
color: #999999;
text-decoration: line-through;
}
.bottom-pay-right{
display: flex;
align-items: center;
}
.pay-btn{
display: inline-block;
text-align: center;
line-height: 80rpx;
color: #ffffff;
font-size: 32rpx;
width: 200rpx;
height: 80rpx;
background: #FE6600;
border-radius: 40rpx;
}
// 购买须知
.buy-know{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(51, 51, 51, 0.5);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 0 92rpx;
}
.know-wrap{
background:#ffffff;
border-radius: 16rpx;
padding: 40rpx;
}
.know-title{
font-size: 36rpx;
font-weight: 600;
text-align: center;
}
.know-content{
margin-top: 20rpx;
view{
margin-top: 40rpx;
font-size: 24rpx;
}
}
.know-bottom{
margin-top: 60rpx;
padding: 0 40rpx;
text{
display: inline-block;
width: 100%;
height: 88rpx;
line-height: 88rpx;
text-align: center;
background: linear-gradient( 119deg, #FFA000 0%, #FE6600 100%);
border-radius: 44rpx;
font-size: 32rpx;
color: #ffffff;
}
}
// 明细弹窗
.photo-detail{
position: fixed;
bottom: 120rpx;
left: 0;
right:0;
background: rgba(51, 51, 51, 0.5);
z-index: 2;
transition:0.6s;
height: 0;
overflow: hidden;
}
.detail-wrap{
padding: 40rpx 40rpx 400rpx 40rpx;
background: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
border-radius: 16rpx 16rpx 0 0;
}
.detail-title{
font-size: 36rpx;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.detail-total{
margin-top: 80rpx;
display: flex;
justify-content: space-between;
font-size: 36rpx;
font-weight: 600;
}
.detail-list{
display: flex;
justify-content: space-between;
margin-top: 32rpx;
}
</style>
pages/common/cityList/cityList.vue 0 → 100644
View file @ 4638ede3
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
this.obtainProvince()
},
methods: {
obtainProvince(){//获取省列表
let data={
areaLevel:2,
inChina:0
}
this.$request('scenic/search/loadAreaByCity',data).then((res)=>{
if(res.code=='00'){
console.log(res.data)
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
}
}
</script>
<style>
</style>
pages/indexs/index/index - 副本.vue 0 → 100644
View file @ 4638ede3
<template>
<view class="wrap">
<!-- #ifdef MP-WEIXIN -->
<view class="search">
<text>重庆</text>
<view class="search-right">
<u-icon name="search" style="margin-right: 10rpx;"></u-icon>
<input placeholder="商品/用户/关键词搜索" disabled/>
</view>
</view>
<!-- #endif -->
<view class="middle">
<view class="tabbar">
<view @click="jumpPage(item.projectLinkUrl)" v-for="(item,index) in iconList" :key='index' v-show="item.projectStatus==0">
<image :src="item.projectImgUrl"></image>
<view>
{{item.merchantExtendProjectName}}
</view>
</view>
</view>
<view class="banner">
<u-swiper :list="swiperList" @change="e => currentNum = e.current" indicatorStyle="right: 20px" height="300" circular @click='swiperClick(currentNum)'>
<view slot="indicator" class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
</view>
</u-swiper>
</view>
</view>
<view class="product-list">
<view class="list-wrap" @click="goProduct(item.pageUrl)" v-for="(item,index) in productList" :key='index'>
<view class="list-head">
<image :src='item.imgUrl' mode="widthFix">
</image>
<view class="address">
<u-icon name="map" color="#ffffff" size="24"></u-icon>
重庆
</view>
</view>
<view class="list-bottom">
<view style="font-size: 32rpx;">
{{item.merchantName}}
</view>
<view class="bottom-price">
<view class="price-left">
<text>
¥
</text>
<text>
{{item.price}}
</text>
<text>
起
</text>
</view>
<view>
5分
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentNum:0,//轮播图下标
swiperList: [//轮播图图片
{
url: 'http://lx.pangdly.com/img/home1.69efcf8.jpg'
},
{
url: 'http://lx.pangdly.com/img/home2.2ec1a04.jpg'
},
{
url: 'http://lx.pangdly.com/img/home3.df60ec3.jpg'
}
],
suodaoUrl:'/pages/combination/distributionCombiChoose/distributionCombiChoose?channelId=1&merchantId=z0015605022691a5945bbe463141668c&groupId=z0016038113016708b8ad38c637b2f26&groupChannelId=z00160423712018998e6260ffcaf3369&companyId=6da527f930be4aa1904fe17fcb41874f',//长江索道
yunduanUrl:'/pages/scenic/scenicProduct/scenicProduct?merchantId=z00160128940329482da6bd94d443a91',//云端之眼
liangjiangUrl:'/pages/scenic/scenicProduct/scenicProduct?merchantId=z001578652229233acd0134cf825fdbe',//两江游
huguangUrl:'/pages/scenic/scenicProduct/scenicProduct?merchantId=cdd4da5d154a4512bd5f3bec2797557b',//湖广会馆
iconList:[//图标列表
{
merchantExtendProjectName:'景区名称',
projectImgUrl:'/static/img/index/classify1.png',
projectLinkUrl:'/pages/scenic/scenicIndex/scenicIndex',
projectStatus:0
},
{
merchantExtendProjectName:'酒店民宿',
projectImgUrl:'/static/img/index/classify2.png',
projectLinkUrl:'/pages/hotel/hotelIndex/hotelIndex',
projectStatus:0
},
{
merchantExtendProjectName:'周边游',
projectImgUrl:'/static/img/index/classify4.png',
projectLinkUrl:'/pages/scenic/scenicIndex/scenicIndex',
projectStatus:0
},
{
merchantExtendProjectName:'跟团游',
projectImgUrl:'/static/img/index/classify5.png',
projectLinkUrl:'/pages/scenic/scenicIndex/scenicIndex',
projectStatus:0
},
{
merchantExtendProjectName:'亲子游',
projectImgUrl:'/static/img/index/classify6.png',
projectLinkUrl:'/pages/scenic/scenicIndex/scenicIndex',
projectStatus:0
},
{
merchantExtendProjectName:'行程订制',
projectImgUrl:'/static/img/index/classify7.png',
projectLinkUrl:'/pages/my/travelList/travelList/travelList',
projectStatus:0
},
],
productList:[]
}
},
onLoad(option){
// 首次进入时执行
let companyId=this.$commonjs.getKey(option,'companyId')||''
if(!companyId){
this.getCompanyId()
}
this.productList=[//产品列表
{
merchantName:'长江索道',
pageUrl:this.suodaoUrl,
imgUrl:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
price:30
},
{
merchantName:'云端之眼',
pageUrl:this.yunduanUrl,
imgUrl:'http://lx.pangdly.com/img/yunduan.331a774.jpg',
price:68
},
{
merchantName:'两江游金碧系列',
pageUrl:this.liangjiangUrl,
imgUrl:'http://lx.pangdly.com/img/liangjiang.097258e.jpg',
price:138
},
{
merchantName:'重庆湖广会馆',
pageUrl:this.huguangUrl,
imgUrl:'http://lx.pangdly.com/img/huiguan.c00da69.jpg',
price:32
},
]
},
onShow() {
// 首次进入、后台切入前台时会执行
this.loadIcon()
},
methods: {
//---获取公司Id
getCompanyId(){
let openid=uni.getStorageSync('openid')||''
let data={openid}
this.$request('wechatUser/wxUser/getLastRecord',data).then((res) => {
if (res.code == '00'){
//公司Id,用于入口判断，跳入公众号页面时需要传入到公众号
let companyId=res.data.companyId||''
uni.setStorageSync('companyId',companyId)
}
})
},
//---轮播图点击
swiperClick(index){
//长江索道
if(index==0){
uni.navigateTo({
url:this.suodaoUrl
})
}
//湖广会馆
if(index==1){
uni.navigateTo({
url:this.huguangUrl
})
}
//云端之眼
if(index==2){
uni.navigateTo({
url:this.yunduanUrl
})
}
},
//---加载图标
loadIcon(){
let data={
merchantType:0,//商户类型，其他
}
this.$request('scenic/merchantExtendProject/loadList',data).then((res)=>{
if(res.code=='00'){
this.iconList=res.data
}
})
},
//---图片页面跳转
jumpPage(url){
uni.navigateTo({
url
})
},
//---产品跳转
goProduct(url){
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.search{
position: fixed;
width: 100%;
height:100rpx;
top: 0;
display: flex;
align-items: center;
padding:24rpx;
background: #f5f5f5;
z-index: 10;
}
.search-right{
flex: 1;
display: flex;
margin-left: 20rpx;
background: #fff;
padding:12rpx 24rpx;
border-radius:48rpx;
}
.middle{
padding: 0 24rpx;
margin-top: 110rpx;
}
.tabbar{
padding: 10rpx 0;
display: flex;
flex-wrap: wrap;
background: #fff;
border-radius:16rpx;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
justify-content: space-between;
>view{
width: 25%;
text-align: center;
margin: 24rpx 0;
}
image{
width: 64rpx;
height: 64rpx;
}
}
.banner{
margin-top: 20rpx;
}
.product-list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 20rpx;
border-radius: 24rpx 24rpx 0 0;
}
.list-wrap{
width: 49%;
margin-top: 30rpx;
}
.list-head{
position: relative;
image{
width: 100%;
border-radius: 16rpx 16rpx 0 0;
}
}
.address{
position: absolute;
left: 20rpx;
bottom: 20rpx;
display: flex;
background: rgba(0,0,0,0.5);
padding: 8rpx 20rpx 12rpx 10rpx;
border-radius: 24rpx;
color: #FFFFFF;
font-size: 22rpx;
}
.list-bottom{
padding:16rpx 20rpx;
background: #fff;
}
.bottom-price{
display: flex;
justify-content: space-between;
margin-top: 10rpx;
}
.price-left{
color:$red;
font-size: 24rpx;
}
.price-left text:nth-child(2){
color: $red;
font-size: 36rpx;
font-weight: bold;
margin: 0 6rpx;
}
.price-left text:nth-child(3){
color: $grey;
}
</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