Skip to content

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

景区单产品小程序页面开发

parent 8cc154cf
Hide whitespace changes
Inline Side-by-side
Showing with 473 additions and 262 deletions
pages/scenic/scenicProduct/scenicProduct-new.vue deleted 100644 → 0
View file @ 8cc154cf
<template>
<view>
<view class="banner" v-if="detailData">
<u-swiper :list="detailData.imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<view slot="indicator" class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{detailData.imgList.length}}</text>
</view>
</u-swiper>
</view>
<view class="middle">
<view class="middle-introduce">
<view class="introduce-one">
<view class="merchantname">
重庆湖广会馆
</view>
<view class="businesstime">
<view style="font-size: 24rpx;">
<text style="color: #3688ff;margin-right: 20rpx;">开园中</text>
<text style="color: #999;">09:00~18:30</text>
</view>
<view style="display: flex;">
<text>详情</text>
<u-icon name='arrow-right'></u-icon>
</view>
</view>
</view>
<view class='introduce-two'>
<text>
5分
</text>
<text>
0条好评
</text>
</view>
<view class="introduce-three">
<view style="flex: 1;margin-right: 20rpx;">
重庆市市辖区渝中区联合国际大厦
</view>
<view class="introduce-icon">
<u-icon name='map-fill' color='#3688ff' size='44'></u-icon>
<text></text>
<u-icon name='phone-fill' color='#3688ff' size='44'></u-icon>
</view>
</view>
</view>
<view class="middle-list">
<view>
<view>
景区门票
</view>
<view>
<text>无需换票</text>
<text></text>
<text>随时可退</text>
</view>
</view>
<view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
ticketList:[],//门票列表
detailData:'',//详情数据
currentNum:0,//轮播图下标
}
},
onLoad(option) {
this.nowTime=parseInt(new Date().Format('hhmm'))
this.companyId=this.$commonjs.getCompanyId(option)||''
this.merchantId = this.$commonjs.getKey(option,'merchantId')|| ''
this.channelType = this.$commonjs.getKey(option,'channelType')|| 0
this.initProduct()
this.initDetail()
},
methods: {
//---产品加载
initProduct(){
this.ticketList=[]
let data={
merchantId:this.merchantId,//商户id
type:1,//类型：1景区、2酒店、3餐饮
channelType:this.channelType,//渠道Id
}
this.$request('scenic/user/product/findProductList',data).then((res)=>{
if(res.code=='00'){
let list=res.data.list||[]
list.forEach((item,index)=>{
//营业时间重新组成
if(item.businessTime){
item.businessTime=item.businessTime.split(';')
}
//等于7为特价
if(item.channelType!=7){
this.ticketList.push(item)
}
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---详情加载
initDetail(){
let data={
userId:uni.getStorageSync('userId')||'',
openid:uni.getStorageSync('openid')||'',
id:this.merchantId,//商户id
isDetail:1,//商户详情
}
this.$request('scenic/user/merchant/findDetailInfo',data).then((res)=>{
if(res.code=='00'){
this.detailData=res.data
if(this.detailData.tag){
this.tagArr=this.detailData.tag.split(',')
}
let start=''
let end=''
if(this.detailData.businessStart){
start=parseInt(this.$commonjs.changeTime(this.detailData.businessStart.substr(0,5)))
}
if(this.detailData.businessEnd){
end=parseInt(this.$commonjs.changeTime(this.detailData.businessEnd.substr(0,5)))
}
if(start<this.nowTime<end){
this.status='开园中'
}else{
this.status='闭园中'
}
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
}
}
</script>
<style scoped lang="scss">
.middle{
position: relative;
top: -40rpx;
}
.middle-introduce{
background: #FFFFFF;
padding: 30rpx 20rpx 0 20rpx;
border-radius: 24rpx 24rpx 0 0;
}
.introduce-one{
border-bottom: 1px solid #e5e5e5;
padding-bottom: 20rpx;
}
.merchantname{
font-size:30rpx;
font-weight: bold;
}
.businesstime{
display: flex;
justify-content: space-between;
margin-top: 10rpx;
}
.introduce-two{
border-bottom: 1px solid #e5e5e5;
padding: 20rpx 0;
font-size: 24rpx;
}
.introduce-two text:first-child{
color:$red;
font-weight: bold
}
.introduce-two text:first-child::after{
display: inline-block;
width: 2rpx;
height: 20rpx;
background: #999999;
content: '';
margin: 0 10rpx;
}
.introduce-two text:last-child{
color:#999999;
}
.introduce-three{
display: flex;
justify-content: space-between;
padding: 20rpx 0;
color: #666666;
font-size: 24rpx;
align-items: center;
}
.introduce-icon{
display: flex;
align-items: center;
}
.introduce-icon text{
display: inline-block;
margin: 0 12rpx;
width: 1px;
background: #e5e5e5;
height: 30rpx;
}
.middle-list{
background: #FFFFFF;
margin-top: 20rpx;
}
</style>
\ No newline at end of file
pages/scenic/scenicProduct/scenicProduct-old.vue 0 → 100644
View file @ 976df0c3
<template>
<view>
<web-view :src="outUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
enterUrl:'',//进入页面路由
outUrl:'',//跳出页面路由
}
},
onLoad(option) {
//#ifdef MP-WEIXIN
this.enterUrl=option.q
//#endif
//#ifdef MP-ALIPAY
this.enterUrl=uni.getStorageSync('alipayQrCode')
//#endif
if(this.enterUrl){//普通二维码扫码进入
let merchantId=this.getUrlKey('merchantId')
let companyId=this.getUrlKey('companyId')
let channelType=this.getUrlKey('channelType')
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let baseUrl=this.$wxurl+'scenicProduct?pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
let url='&merchantId='+merchantId+'&companyId='+companyId+'&channelType='+channelType
this.outUrl=baseUrl+url
}else{//小程序页面跳转进入
let merchantId=option.merchantId||''
let companyId=option.companyId||''
let channelType=option.channelType||0
let ifyukuaiCode=option.ifyukuaiCode||''//是否是渝快码跳入，渝快码跳入需要在H5端另外走流程
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let baseUrl=this.$wxurl+'scenicProduct?pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
let url='&merchantId='+merchantId+'&companyId='+companyId+'&ifyukuaiCode='+ifyukuaiCode+'&channelType='+channelType
this.outUrl=baseUrl+url
}
},
methods: {
getUrlKey(name){//---------------------------------------------------------------获取url
return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ''])[1].replace(/\+/g, '%20') || ''
},
}
}
</script>
<style>
</style>
\ No newline at end of file
pages/scenic/scenicProduct/scenicProduct.vue
View file @ 976df0c3
<template>
<view>
<web-view :src="outUrl"></web-view>
<view class="banner" v-if="detailData">
<u-swiper :list="detailData.imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<view slot="indicator" class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{detailData.imgList.length}}</text>
</view>
</u-swiper>
</view>
<view class="middle">
<view class="middle-introduce">
<view class="introduce-one" @click="showDetail()">
<view class="merchantname">
{{detailData.name}}
</view>
<view class="businesstime">
<view style="font-size: 24rpx;">
<text style="color: #3688ff;margin-right: 20rpx;">{{status}}</text>
<text style="color: #999;">
{{detailData.businessStart?detailData.businessStart.substr(0,5):""}}~{{detailData.businessStart?detailData.businessEnd.substr(0,5):""}}
</text>
</view>
<view style="display: flex;">
<text>详情</text>
<u-icon name='arrow-right'></u-icon>
</view>
</view>
</view>
<view class='introduce-two'>
<text>
{{detailData.score||5}}分
</text>
<text>
{{detailData.comments?detailData.comments.length:0}}条好评
</text>
</view>
<view class="introduce-three">
<view style="flex: 1;margin-right: 20rpx;">
{{detailData.address}}
</view>
<view class="introduce-icon">
<u-icon name='map-fill' color='#3688ff' size='44' @click="navigation()"></u-icon>
<text></text>
<u-icon name='phone-fill' color='#3688ff' size='44' @click="makePhone()"></u-icon>
</view>
</view>
</view>
<view class="middle-product">
<view class="product-title">
<view>
景区门票
</view>
<view class="title-tag">
<text v-for="(item,index) of tagArr" :key='index'>
{{item}}
<text class="tag-line" v-if="index != tagArr.length-1">|</text>
</text>
</view>
</view>
<view class="product-list" @click="goOrder(item)" v-for="(item,index) of ticketList" :key="index">
<view class="list-left">
<view>{{item.name}}</view>
<view class="list-buyknow" @click.stop="showBuyKnow(item.id)">
购票须知
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
</view>
</view>
<view class="list-right">
<view>
<text class="small-price">
¥{{parseFloat(parseFloat(item.originalPrice).toFixed(2))}}
</text>
<text class="big-price">
<text style="font-size: 28rpx;">¥</text>
{{parseFloat(parseFloat(item.sellingPrice).toFixed(2))}}
</text>
</view>
<view style="margin-top: 15rpx;">
<text class="btn">购买</text>
</view>
</view>
<view v-if="item.status==2" class="sellout">
已售罄
</view>
</view>
<view class="nomore" v-if="ticketList.length>0">
没有更多了
</view>
<view style="padding: 30rpx;" v-else>
<u-empty iconSize='180' textSize='28'>
</u-empty>
</view>
</view>
</view>
<!-- 购买须知 -->
<buyKnow :buyKnowData="buyKnowData" ref="buyKnow"></buyKnow>
<!-- 商户详情 -->
<merchantDetail :detailData='detailData' ref='merchantDetail'></merchantDetail>
</view>
</template>
<script>
import buyKnow from '@/components/buyKnow.vue' //购买须知
import merchantDetail from '@/components/merchantDetail' //详情弹窗
export default {
components: {
buyKnow,
merchantDetail
},
data() {
return {
enterUrl:'',//进入页面路由
outUrl:'',//跳出页面路由
ticketList:[],//门票列表
detailData:'',//详情数据
currentNum:0,//轮播图下标
tagArr:[],//标签数组
status:'',//标签状态,开园或者闭园
buyKnowData:'',//购票须知数据
companyId:'',//公司Id
openid:uni.getStorageSync('openid')||'',//openid
}
},
onLoad(option) {
//#ifdef MP-WEIXIN
this.enterUrl=option.q
//#endif
//#ifdef MP-ALIPAY
this.enterUrl=uni.getStorageSync('alipayQrCode')
//#endif
if(this.enterUrl){//普通二维码扫码进入
let merchantId=this.getUrlKey('merchantId')
let companyId=this.getUrlKey('companyId')
let channelType=this.getUrlKey('channelType')
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let baseUrl=this.$wxurl+'scenicProduct?pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
let url='&merchantId='+merchantId+'&companyId='+companyId+'&channelType='+channelType
this.outUrl=baseUrl+url
}else{//小程序页面跳转进入
let merchantId=option.merchantId||''
let companyId=option.companyId||''
let channelType=option.channelType||0
let ifyukuaiCode=option.ifyukuaiCode||''//是否是渝快码跳入，渝快码跳入需要在H5端另外走流程
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let baseUrl=this.$wxurl+'scenicProduct?pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
let url='&merchantId='+merchantId+'&companyId='+companyId+'&ifyukuaiCode='+ifyukuaiCode+'&channelType='+channelType
this.outUrl=baseUrl+url
}
this.nowTime=parseInt(new Date().Format('hhmm'))
this.companyId=this.$commonjs.getCompanyId(option)||''
this.merchantId = this.$commonjs.getKey(option,'merchantId')|| ''
this.channelType = this.$commonjs.getKey(option,'channelType')|| 0
this.initProduct()
this.initDetail()
},
methods: {
getUrlKey(name){//---------------------------------------------------------------获取url
return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ''])[1].replace(/\+/g, '%20') || ''
//---展示详情
showDetail(){
this.$refs.merchantDetail.showPop=true
},
//---导航
navigation(){
uni.openLocation({
latitude:this.detailData.latitude,
longitude:this.detailData.longitude,
name:this.detailData.name,
address:this.detailData.address,
success: function () {
}
})
},
//---拨打电话
makePhone() {
uni.makePhoneCall({
phoneNumber:this.detailData.phone
})
},
//---跳转订单页面
goOrder(item){
if(item.status!='2'){//未售罄
let data={
chooseGroupGoodList:[{
productId:item.id,
merchantCode:item.merchantCode,
extendContent:'{"openid":'+'"'+this.openid+'"'+'}'
}],
companyId:this.companyId,
}
this.$request('scenic/groupGood/checkProductChangeList',data).then((res)=>{
if(res.code=='00'){
let jumpType=''
if(res.data.length>0){
jumpType=res.data[0].jumpType
}
let productId=''
if(jumpType===0){//变产品id
productId=res.data[0].afterProductId||item.id
}else{//不变
productId=item.id
}
if(item.ticketType==2){//景区联票
let query=`?merchantId=${this.merchantId}&productId=${productId}`
uni.navigateTo({
url: '/pages/scenic/scenicJointOrder/scenicJointOrder'+ query
})
}
if(item.ticketType!=2){//景区单票
let query=`?merchantId=${this.merchantId}&productId=${productId}`
uni.navigateTo({
url: '/pages/scenic/scenicSingleOrder/scenicSingleOrder'+ query
})
}
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
}
},
//---展示购买须知
showBuyKnow(id) {
let data={id}
this.$request('scenic/groupGood/loadProduct',data).then((res)=>{
if(res.code=='00'){
this.buyKnowData = res.data
this.$refs.buyKnow.showPop = true
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---产品加载
initProduct(){
this.ticketList=[]
let data={
merchantId:this.merchantId,//商户id
type:1,//类型：1景区、2酒店、3餐饮
channelType:this.channelType,//渠道Id
}
this.$request('scenic/user/product/findProductList',data).then((res)=>{
if(res.code=='00'){
let list=res.data.list||[]
list.forEach((item,index)=>{
//营业时间重新组成
if(item.businessTime){
item.businessTime=item.businessTime.split(';')
}
//等于7为特价
if(item.channelType!=7){
this.ticketList.push(item)
}
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---详情加载
initDetail(){
let data={
userId:uni.getStorageSync('userId')||'',
openid:this.openid,
id:this.merchantId,//商户id
isDetail:1,//商户详情
}
this.$request('scenic/user/merchant/findDetailInfo',data).then((res)=>{
if(res.code=='00'){
this.detailData=res.data
if(this.detailData.tag){
this.tagArr=this.detailData.tag.split(',')
}
let start=''
let end=''
if(this.detailData.businessStart){
start=parseInt(this.$commonjs.changeTime(this.detailData.businessStart.substr(0,5)))
}
if(this.detailData.businessEnd){
end=parseInt(this.$commonjs.changeTime(this.detailData.businessEnd.substr(0,5)))
}
if(start<this.nowTime<end){
this.status='开园中'
}else{
this.status='闭园中'
}
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
}
}
</script>
<style>
<style scoped lang="scss">
.middle{
position: relative;
top: -40rpx;
}
.middle-introduce{
background: #FFFFFF;
padding: 30rpx 20rpx 0 20rpx;
border-radius: 24rpx 24rpx 0 0;
}
.introduce-one{
border-bottom: 1px solid #e5e5e5;
padding-bottom: 20rpx;
}
.merchantname{
font-size:30rpx;
font-weight: bold;
}
.businesstime{
display: flex;
justify-content: space-between;
margin-top: 10rpx;
}
.introduce-two{
border-bottom: 1px solid #e5e5e5;
padding: 20rpx 0;
font-size: 24rpx;
}
.introduce-two text:first-child{
color:$red;
font-weight: bold
}
.introduce-two text:first-child::after{
display: inline-block;
width: 2rpx;
height: 20rpx;
background: #999999;
content: '';
margin: 0 10rpx;
}
.introduce-two text:last-child{
color:#999999;
}
.introduce-three{
display: flex;
justify-content: space-between;
padding: 20rpx 0;
color: #666666;
font-size: 24rpx;
align-items: center;
}
.introduce-icon{
display: flex;
align-items: center;
}
.introduce-icon text{
display: inline-block;
margin: 0 12rpx;
width: 1px;
background: #e5e5e5;
height: 30rpx;
}
.middle-list{
background: #FFFFFF;
margin-top: 20rpx;
}
.middle-product{
background: #FFFFFF;
margin-top: 20rpx;
}
.product-title{
padding: 24rpx 20rpx;
font-size:30rpx;
font-weight: bold;
border-bottom: 1rpx solid #e6e6e6;
}
.title-tag{
font-size: 24rpx;
color: #999;
font-weight: 400;
margin-top: 10rpx;
}
.title-tag>text:first-child{
color: #f9690e;
}
.tag-line{
color: #e5e5e5;
margin: 0 10rpx;
}
.product-list{
display: flex;
padding: 30rpx 20rpx;
border-bottom: 1rpx solid #e6e6e6;
align-items: center;
position: relative;
}
.sellout{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: $red;
font-weight: bold;
}
.list-left{
flex: 1;
padding-right: 20rpx;
}
.list-buyknow{
display: flex;
margin-top:25rpx;
align-items: center;
width: 160rpx;
}
.list-right{
text-align: right;
}
.small-price{
font-size: 24rpx;
color: $grey;
text-decoration: line-through;
}
.big-price{
font-size: 32rpx;
color: $red;
font-weight: bold;
margin-left: 10rpx;
}
.btn{
width: 120rpx;
height: 60rpx;
line-height: 60rpx;
}
.nomore{
padding: 30rpx;
text-align: center;
color: $red;
}
</style>
\ No newline at end of file
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