xuchaoandClaude Opus 4.8
4190565eb7
从 xghmall（云闪付版湘工游）迁移民票模块，改造为微信公众号 H5： - 技术栈沿用 uni-app + Vue2 + uView（含定制版日历组件） - 登录/支付独立成层（common/auth.js、common/pay.js）： 一期假登录（测试手机号）+ 模拟支付，后端微信接口就绪后只换这两处 - 登录页重写：短信验证码 + 公众号网页授权（code 换用户信息）预留 - 门票列表页为入口页（进页必须登录），加订单悬浮按钮 - 支付成功页接通：查看订单/继续逛逛 + 订单状态轮询 - 详情页定位导航改用 uni.openLocation + 高德网页兜底 - 出行人页：身份证 18 位格式校验，删除死的删除按钮，修正证件类型回显笔误 - 清理云闪付 SDK、支付宝授权、死页面引用等残留 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
390 lines
10 KiB
Vue
390 lines
10 KiB
Vue
<template>
|
|
<view>
|
|
<view style="width: 750rpx;background-color: #fff;padding:15rpx 0rpx;" v-if="false">
|
|
<view style="width: 702rpx;margin-left: 24rpx;">
|
|
<u-search placeholder="搜景区名称" bg-color='#F8F9FC' search-icon-color='#7C7C7E' v-model="obj.name" @search='search()'
|
|
:show-action='false' height='72'></u-search>
|
|
</view>
|
|
</view>
|
|
<view v-if="false"
|
|
style="width: 750rpx;height: 88rpx;background: #fff;padding: 0rpx 24rpx;display: flex;align-items: center;color: #000;position: relative;">
|
|
<view @tap="selectArae" style="display: flex;gap: 10rpx;">
|
|
{{cityName}}<u-icon :style="{transform:transform}" style="transition: 500ms;" name="arrow-down-fill"
|
|
size='20'></u-icon>
|
|
</view>
|
|
|
|
<view @tap="selectType" style="display: flex;gap: 10rpx;margin-left: 72rpx;">
|
|
{{typeName}}
|
|
<u-icon :style="{transform:transform1}" style="transition: 500ms;" name="arrow-down-fill"
|
|
size='20'></u-icon>
|
|
</view>
|
|
<view style="position: absolute;right: 0rpx;">
|
|
<u-checkbox-group @change='search()'>
|
|
<u-checkbox v-model="obj.todayAvailable" :label-disabled="false" active-color="#3B94E6"><text style="color: #000;">今日可用</text></u-checkbox>
|
|
</u-checkbox-group>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class='nr_item' v-for="(item,index) in lookList" :key="index" @click="toDetail(item.id)" >
|
|
<image :src="item.mainPic||'https://aliyunoss.hn12301.net/sd/all_moren.png'" style="width: 268rpx;height: 268rpx;"></image>
|
|
<view class="nr_item_r">
|
|
<text class="n_text">{{item.name||''}}</text>
|
|
<view style="display: flex;gap: 12rpx;flex-wrap: wrap;">
|
|
<text :class="index1==0?'t_text1':index1==1?'t_text':index1==2?'t_text2':'t_text3'" v-for="(item1,index1) in ['节日福利/春游秋游','余额券','满减券']">{{item1}}</text>
|
|
</view>
|
|
<view class="r_text">{{item.subTypeId}}</view>
|
|
<!-- <u-tag :text="" bg-color='#FEEFC3' color='#D17516' mode="dark" /> -->
|
|
<view style="width: 380rpx;text-align: right;color:#4F4F4F;font-size: 12rpx;position: absolute;bottom: 60rpx;right:0rpx;">
|
|
原售价<text
|
|
style="font-size: 28rpx;text-decoration: line-through;font-weight: bold;">{{(item.price/100).toFixed(0)}}</text>元
|
|
</view>
|
|
<view class="p_text">工会补贴价￥<text
|
|
style="font-size: 32rpx;font-style: italic;font-weight: bold;margin-bottom: 8rpx;">{{(item.unitPrice/100).toFixed(0)}}</text>元
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore :status="status" />
|
|
<u-picker mode="selector" v-model="show" :range="selector1" @close='selectAraeInput' confirm-color='#3B94E6' range-key="name"
|
|
@confirm='araeConfirm'></u-picker>
|
|
<u-picker mode="selector" v-model="show1" :range="selector" @close='selectTypeInput' confirm-color='#3B94E6' range-key="label"
|
|
@confirm='typeConfirm'></u-picker>
|
|
<!-- xuchao: 订单悬浮按钮 -->
|
|
<gmy-float-touch :imgLists="imgLists" :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// xuchao: 门票列表页（启动页/入口页）—— 进页必须登录
|
|
import auth from '@/common/auth.js'
|
|
import gmyFloatTouch from "@/components/gmy-float-touch/gmy-float-touch.vue"
|
|
|
|
var that = ''
|
|
export default {
|
|
components: { gmyFloatTouch },
|
|
data() {
|
|
return {
|
|
mainImg: "../../static/logo4.png",
|
|
imgLists: ["../../static/logo1.png", "../../static/logo2.png", "../../static/logo3.png",
|
|
"../../static/logo3.png", "../../static/logo5.png"
|
|
],
|
|
status: 'loadmore',
|
|
keyword: '',
|
|
transform: 'rotate(0deg)',
|
|
transform1: 'rotate(0deg)',
|
|
cityName: '全部地区',
|
|
typeName: '全部类型',
|
|
icon: true,
|
|
show: false,
|
|
show1: false,
|
|
icon1: true,
|
|
selector1: [{id:'',name:'全部地区'}],
|
|
selector: [{id:'',label:'全部类型'}],
|
|
checked: false,
|
|
page: 1,
|
|
obj: {
|
|
"name": "",
|
|
"typeId": "",
|
|
"cityId": "",
|
|
"pageSize": 10,
|
|
"pageNum": 1,
|
|
"todayAvailable": false
|
|
},
|
|
pageAll:2,
|
|
isLoad:true,
|
|
lookList:[]
|
|
}
|
|
},
|
|
onLoad() {
|
|
that = this
|
|
// xuchao: 未登录则跳登录页，登录成功后回跳本页
|
|
if (!auth.requireLogin('/pages/ticket/scenic')) return
|
|
this.getTicketsTypesMethod()
|
|
this.getTicketsCitiesMethod()
|
|
this.queryTicketsPageMethod()
|
|
|
|
},
|
|
onReachBottom() {
|
|
this.queryTicketsPageMethod()
|
|
},
|
|
|
|
methods: {
|
|
getTicketsCitiesMethod(){
|
|
this.selector1=[{id:'',name:'全部地区'}]
|
|
this.$u.api.getTicketsCities().then(res => {
|
|
if (res) {
|
|
res.data.forEach(item=>{
|
|
this.selector1.push({id:item.id,name:item.name})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
getTicketsTypesMethod(){
|
|
this.selector=[{id:'',label:'全部类型'}]
|
|
this.$u.api.getTicketsTypes().then(res => {
|
|
if (res) {
|
|
console.log(res.data);
|
|
res.data.forEach(item=>{
|
|
this.selector.push({id:item.id,label:item.label})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
queryTicketsPageMethod() {
|
|
if (that.obj.pageNum <= that.pageAll&&this.isLoad) {
|
|
this.isLoad=false
|
|
this.$u.api.queryTicketsPage(this.obj).then(res => {
|
|
this.isLoad=true
|
|
that.obj.pageNum = that.obj.pageNum * 1 + 1;
|
|
that.total = res.data.total
|
|
that.pageAll = Math.ceil(res.data.total / 10)
|
|
if (that.page == 2) {
|
|
that.lookList = res.data.list
|
|
} else {
|
|
that.lookList = that.lookList.concat(res.data.list)
|
|
}
|
|
if (that.page > that.pageAll) {
|
|
that.status = "nomore"
|
|
}
|
|
})
|
|
}
|
|
},
|
|
toDetail(e) {
|
|
uni.navigateTo({
|
|
url: 'scenicdetail?id='+e
|
|
})
|
|
},
|
|
// xuchao: 悬浮按钮 —— 跳门票订单列表
|
|
floatTouchClick(e) {
|
|
if (e == 4) {
|
|
uni.navigateTo({
|
|
url: '/pages/ticket/orderlist'
|
|
})
|
|
}
|
|
},
|
|
selectArae() {
|
|
this.icon = !this.icon
|
|
this.show = !this.show
|
|
if (this.icon) {
|
|
this.transform = 'rotate(0deg)'
|
|
} else {
|
|
this.transform = 'rotate(180deg)'
|
|
}
|
|
},
|
|
selectAraeInput(e) {
|
|
console.log(e);
|
|
this.icon = !this.icon
|
|
this.show = e
|
|
if (this.icon) {
|
|
this.transform = 'rotate(0deg)'
|
|
} else {
|
|
this.transform = 'rotate(180deg)'
|
|
}
|
|
},
|
|
selectTypeInput(e) {
|
|
this.icon1 = !this.icon1
|
|
this.show1 = e
|
|
if (this.icon1) {
|
|
this.transform1 = 'rotate(0deg)'
|
|
} else {
|
|
this.transform1 = 'rotate(180deg)'
|
|
}
|
|
},
|
|
search(){
|
|
this.obj.pageNum=1
|
|
this.pageAll=2
|
|
this.lookList=[]
|
|
this.queryTicketsPageMethod()
|
|
},
|
|
selectType() {
|
|
this.icon1 = !this.icon1
|
|
this.show1 = !this.show1
|
|
if (this.icon1) {
|
|
this.transform1 = 'rotate(0deg)'
|
|
} else {
|
|
this.transform1 = 'rotate(180deg)'
|
|
}
|
|
|
|
},
|
|
typeConfirm(e) {
|
|
console.log(e);
|
|
this.typeName = this.selector[e[0]].label
|
|
this.obj.typeId= this.selector[e[0]].id
|
|
|
|
this.search()
|
|
|
|
|
|
},
|
|
araeConfirm(e) {
|
|
this.cityName=this.selector1[e[0]].name
|
|
this.obj.cityId=this.selector1[e[0]].id
|
|
this.search()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #FFEFD5;
|
|
}
|
|
</style>
|
|
<style scoped lang="less">
|
|
.nr_item {
|
|
width: 702rpx;
|
|
display: flex;
|
|
margin: 24rpx 24rpx 0rpx 24rpx;
|
|
background: #fff;
|
|
padding: 12rpx;
|
|
|
|
.nr_item_r {
|
|
width: 390rpx;
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
gap: 8rpx;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
.p_text {
|
|
position: absolute;
|
|
bottom: 0rpx;
|
|
width: 240rpx;
|
|
right: 0rpx;
|
|
height: 50rpx;
|
|
background: url('https://aliyunoss.hn12301.net/xgh/image_bj_text.png');
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 16rpx;
|
|
padding-left: 18rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.r_text {
|
|
width: 390rpx;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 20rpx;
|
|
}
|
|
.r_text1 {
|
|
width: 390rpx;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 20rpx;
|
|
}
|
|
.n_text {
|
|
color: #008F90;
|
|
font-weight: bolder;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 32rpx;
|
|
}
|
|
.n_text1{
|
|
color: #585858;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 24rpx;
|
|
}
|
|
.t_text {
|
|
background-color: #FDEEC3;
|
|
font-size: 18rpx;
|
|
padding: 5rpx 10rpx;
|
|
color: #D57817;
|
|
border-radius: 4rpx;
|
|
}
|
|
.t_text1 {
|
|
background-color: #FDF4ED;
|
|
font-size: 18rpx;
|
|
padding: 5rpx 10rpx;
|
|
color: #AF4744;
|
|
border-radius: 4rpx;
|
|
}
|
|
.t_text2 {
|
|
background-color: #cbebfb;
|
|
font-size: 18rpx;
|
|
padding: 5rpx 10rpx;
|
|
color: #6ba0b3;
|
|
border-radius: 4rpx;
|
|
}
|
|
.t_text3 {
|
|
background-color: #F0F1F5;
|
|
font-size: 18rpx;
|
|
padding: 5rpx 10rpx;
|
|
color: #525357;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.item {
|
|
width: 702rpx;
|
|
padding: 12rpx;
|
|
border-radius: 8rpx;
|
|
background-color: #fff;
|
|
position: relative;
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
margin-left: 24rpx;
|
|
|
|
.item_name {
|
|
width: 434rpx;
|
|
line-height: normal;
|
|
color: #000;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.tag {
|
|
font-size: 20rpx;
|
|
color: #fff;
|
|
padding: 6rpx 5rpx;
|
|
background: linear-gradient(180deg, #FF9E49 0%, #ED3B1A 100%);
|
|
border-radius: 4rpx;
|
|
margin-top: 12rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.tag1 {
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
padding: 5rpx;
|
|
border: 2rpx #999999 solid;
|
|
border-radius: 4rpx;
|
|
margin-top: 12rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.hot_tag {
|
|
height: 36rpx;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
position: absolute;
|
|
top: 12rpx;
|
|
left: 12rpx;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 0rpx 8rpx;
|
|
border-radius: 8rpx 0rpx 8rpx 0rpx;
|
|
line-height: 36rpx;
|
|
}
|
|
}
|
|
</style> |