雄安惠民卡
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
xahmk_app/pages/card/index.vue

788 lines
25 KiB

<template>
<view>
<view class="card-wrap">
<view class="card">
<image src="https://www.xnhmk.com/assets/img/banner/banner.jpg" mode="widthFix"></image>
</view>
<view class="card-info">
<!-- <view class="last" v-if="cardnum.remaincard == 0">已售罄</view> -->
<view class="expiry" >
<view class="tit">有效期</view>
<view class="text">2023-10-31</view>
</view>
</view>
</view>
<view class="bos">
<view class="bos-tit">
<view class="line left"></view>
<view class="tit">惠民卡专属优惠</view>
<view class="line right"></view>
</view>
<view class="bos-item">
<view class="item">
<view class="iconfont icon-send"></view>
<view class="tit">400元文化惠民金</view>
</view>
<view class="item">
<view class="iconfont icon-shop"></view>
<view class="tit">双重惠民福利</view>
</view>
<view class="item">
<view class="iconfont icon-ticket"></view>
<view class="tit">每人限购一张</view>
</view>
<view class="item">
<view class="iconfont icon-vip"></view>
<view class="tit">5个月效期</view>
</view>
</view>
</view>
<view class="about">
<view class="heading">
<view class="wrap">
<view class="tit">惠民卡简介</view>
<view class="hasline"></view>
</view>
</view>
<view class="para">
<view class="text">雄安文化惠民卡是雄安新区宣传网信局落实2022年河北省20项民生工程总体部署, 实施雄安新区文化惠民工程的重要举措,为人民群众提供更多更优惠的文化、旅游产品和服务,有效拉动文化和旅游消费,促进新区文化和旅游繁荣发展。</view>
</view>
<view class="para">
<view class="text">持雄安文化惠民卡,<text class="text-style">有效期</text>内可在惠民景区和商户享受到双重惠民福利:</view>
</view>
<view class="para">
<view class="text">一是内含400元文旅惠民金,无限制条件地用于消费结算,用完为止。</view>
</view>
<view class="para">
<view class="text">二是可享受商户为惠民卡用户推出的常态化优惠权益。</view>
</view>
<view class="para">
<view class="text text-style">两项惠民福利任选其一,不同时使用。</view>
</view>
</view>
<view class="about">
<view class="heading">
<view class="wrap">
<view class="tit">惠民商户一览表</view>
<view class="hasline"></view>
</view>
</view>
<view class="images">
<image :src="item" mode="widthFix" v-for="(item,index) in merchantimgs" :key="index"></image>
</view>
</view>
<view class="about">
<view class="heading">
<view class="wrap">
<view class="tit">购买须知</view>
<view class="hasline"></view>
</view>
</view>
<view class="para">
<view class="ser">1.</view>
<view class="text">本卡为线上虚拟卡面向雄安新区常住人口发行实行实名制注册购买<text class="text-style text-weight">雄安新区三县居民凭身份证购买非三县户籍居民凭身份证及新区常住证明居住证工作证单位证明等相关证明购买每人限购1张</text></view>
</view>
<view class="para">
<view class="ser">2.</view>
<view class="text">提交身份验证信息后需经平台工作人员审核<text class="text-style">审核通过后方可购买</text>非三县户籍居民如无常住证明无法审核通过</view>
</view>
<view class="para">
<view class="ser">3.</view>
<view class="text">本卡购买价格<text class="text-style">50</text>通过政府补贴内含惠民金<text class="text-style">400</text>在本卡合作商户可直接用于消费结算无任何限制要求<text class="text-style">不可提现</text>用完为止</view>
</view>
<view class="para">
<view class="ser">4.</view>
<view class="text">本卡有效期内用户可享受由合作商户提供的权益优惠优惠权益与惠民金不能同时使用</view>
</view>
<view class="para">
<view class="ser">5.</view>
<view class="text">本卡有效期自<text class="text-style">2023年6月</text><text class="text-style">2023年10月31日</text></view>
</view>
<view class="para">
<view class="ser">6.</view>
<view class="text">本卡有效期内用户若未使用任何惠民金和商户惠民权益无任何核销记录将在惠民卡到期后原路退还50元购卡费</view>
</view>
</view>
<view class="about pt-150">
<view class="heading">
<view class="wrap">
<view class="tit">使用须知</view>
<view class="hasline"></view>
</view>
</view>
<view class="para">
<view class="ser">1.</view>
<view class="text">本卡只在签约合作商户适用未合作商户不能使用本卡惠民福利</view>
</view>
<view class="para">
<view class="ser">2.</view>
<view class="text">在景区购买门票时在商户结账时须从<text class="text-style">雄安文化惠民卡</text>小程序出示本人惠民码商户通过扫码进行核销</view>
</view>
<view class="para">
<view class="ser">3.</view>
<view class="text">本卡惠民码出示时每分钟更新一次限本人使用有效期内不限使用次数请注意核对核销金额查看个人账单</view>
</view>
<view class="para">
<view class="ser">4.</view>
<view class="text">使用400元惠民金结算<text class="text-style">不能与商户的其他优惠活动同时使用</text>惠民金余额不够支付费用时需用户自行补齐差价</view>
</view>
<view class="para">
<view class="ser">5.</view>
<view class="text">本卡自用户开通成功之日起有效期至2023年10月31日<text class="text-style">到期时若400元惠民金有余额不可提现将自动清零</text>请注意使用时效</view>
</view>
<view class="para">
<view class="ser">6.</view>
<view class="text">如发生手机遗失为避免用户权益损失用户可通过客服电话申请冻结惠民卡使用<text class="text-style">惠民卡有效期不变</text>用户手机使用恢复正常后通过客服电话重新验证可再次启用惠民卡</view>
</view>
<view class="para">
<view class="ser">7.</view>
<view class="text">因用户手机保管不当或用户未及时申请冻结和重新启用而造成的权益损失不属于惠民卡平台责任</view>
</view>
<view class="para">
<view class="ser">8.</view>
<view class="text">在商户<text class="text-style">请遵守商户相关规定</text>如在使用过程中出现问题请及时拨打客服热线电话咨询投诉反馈意见和建议我们竭诚为您服务</view>
</view>
<!-- <view class="para">
<view class="ser">9.</view>
<view class="text">*号商户<text class="text-style">金棕榈惠友店</text><text class="text-style">容东言几又书店</text>不参与400元惠民金核销顾客到店支付享受会员价</view>
</view> -->
</view>
<!-- <block v-if="is_open == 0 && saling == 0">
<view class="pay-wrap" v-if="isSale== 0">
<view class="pay-btn reservation-btn" @click="goPay" hover-class="pay-btn-hover">
<view >马上预约</view>
</view>
</view>
<view class="pay-wrap" v-if="isSale== 1" >
<view class="pay-btn reservation-btn disable" hover-class="pay-btn-hover">
<view >已预约,等待购买...</view>
</view>
</view>
</block> -->
<block v-if="is_open == 1">
<view class="pay-wrap" >
<view class="pay-btn " @click="pay" hover-class="pay-btn-hover">
<view class="tip">支付金额:¥<text class="amount">50元</text></view>
<view class="text">购买惠民卡</view>
</view>
</view>
</block>
<block v-else>
<view class="pay-wrap" >
<view class="pay-btn reservation-btn" @click="pay" hover-class="pay-btn-hover">
{{appointment==1||userInfo.vip==1?'等待活动开始':'活动暂未开始,点我进行实名认证'}}
</view>
</view>
</block>
</view>
</template>
<script>
import { toLogin,showWarning } from '../../util/common.js';
export default {
data() {
return {
// isSale:0,
userInfo: [],
appointment:'',
card: [],
cardid:'',
time:'',
show_second:'',
cardnum:{},//卡剩余情况
// 发售倒计时
clock:'',//距发售倒计时
canbuy:0,//是否可购买:0不可1可以
saletimer:'',
is_open:0,//支付按钮是否显示
// saling:0,//支付按钮是否显示
merchantimgs:[],//商户一览表图片
}
},
onShow() {
// // 开售倒计时-兼容IOS系统
// var startdate = '2023-5-30 16:26:00';
// //预约倒计时
// var reservationDate = '2023-5-30 16:24:00'
// startdate = startdate.replace(/-/g, '/');
// reservationDate = reservationDate.replace(/-/g, '/');
// var starttime = new Date(startdate);
// var reservationTime = new Date(reservationDate);
// var nowtime = Date.parse(new Date());//当前时间戳(单位ms)
// var remaintime = starttime - nowtime;//距离购买还剩余时间
// var remaintime1 = reservationTime - nowtime;//距离预售还剩余时间
// if(remaintime > 0){
// this.saleDowntime();//显示倒计时
// }else{
// this.saling = 1; //可以购买
// this.close = false
// }
// if(remaintime1>0){
// this.is_open = 1;
// this.saleDowntime();//显示倒计时
// }else{
// this.is_open = 0; //可以预约
// this.close = false
// }
this.getRemainCard();//请求卡的数量
this.gettabStatus();//购买按钮是否显示
// 缓存中是否有剩余卡数,没有直接请求接口
var cardnum = uni.getStorageSync('cardnum');
if(cardnum != ''){
if(cardnum['remaincard'] > 0){//如果未出售卡数>0,每次打开页面刷新数据
this.getRemainCard();
}else{// 如果剩余卡数=0,需要判断支付中的卡数是否>0
//如果未购买成功中(支付中和审核中)的卡数>0,也要刷新数据,可能支付中变成未出售
if(cardnum['ordercard'] > 0){
//半小时刷新一次
var getRemainCardTime = uni.getStorageSync('getRemainCardTime');//获取上次刷新余卡的时间
var nowtime = Date.parse(new Date());//当前时间戳(单位ms)
if(getRemainCardTime){// 限制30分钟可请求一次
if(getRemainCardTime + 60*30*1000 > nowtime){
console.log('距上次刷新不足30分钟')
}else{// 已超过30分钟可请求刷新
uni.setStorageSync('getRemainCardTime',nowtime);// 更新余卡刷新时间
this.getRemainCard();
}
}else{
uni.setStorageSync('getRemainCardTime',nowtime);// 保存本次余卡刷新时间
this.getRemainCard();
}
}else{
console.log('卡已售罄')
}
}
}else{
this.getRemainCard();
}
let that = this
that.userInfo = uni.getStorageSync('userInfo');
that.appointment = uni.getStorageSync('appointment');
this.getMerchantimgs();//获取商户一览表图片
},
mounted(){
let that = this
// if(!that.userInfo.id){
// that.$nextTick(()=>{
// that.is_open = 1
// that.saling = 0
// that.close = true
// })
// }
// else if(that.userInfo&&that.userInfo.vip == 0&&that.appointment != 1){
// that.$nextTick(()=>{
// that.is_open = 1
// that.saling = 0
// that.close = true
// })
// }
// else if(that.userInfo&&that.saling!=1&&that.appointment == 1 || that.userInfo.vip == 1 ){
// that.$nextTick(()=>{
// that.is_open = 0
// that.isSale = 1
// that.close = false
// })
// }else if(that.userInfo&&that.saling==1&&that.appointment == 1 || that.userInfo.vip == 1 ){
// that.close = false
// }
// console.log(that.isSale,'ooopppp')
},
methods: {
// 获取商户一览表图片
getMerchantimgs(){
var that = this;
uni.showLoading({
title:'加载中'
})
that.$u.post('wxapp/card/getMerchantimgs').then(res => {
if (res.code == 1) {
that.merchantimgs = res.merchantimgs;
}else{
uni.showToast({
icon:'error',
title:'加载失败'
})
}
});
uni.hideLoading();
},
// 请求剩余卡数
getRemainCard(){
var that = this;
that.$u.post('wxapp/card/getRemainCard').then(res => {
if (res.code == 1) {
that.cardnum = res.cardnum;
uni.setStorageSync('cardnum',res.cardnum);
}else{
console.log('获取失败')
}
});
},
// // 请求购卡按钮是否显示
gettabStatus(){
var that = this;
that.$u.post('wxapp/card/isOpen').then(res => {
if (res.code == 1) {
that.is_open = res.is_open;
}else{
console.log('获取失败')
}
});
},
// // 发售倒计时
saleDowntime(){
// 开售倒计时-兼容IOS系统
var startdate = '2023-5-30 16:26:00';
startdate = startdate.replace(/-/g, '/');
var starttime = new Date(startdate);
var nowtime = Date.parse(new Date());//当前时间戳(单位ms)
var remaintime = starttime - nowtime;//还剩余时间
//预约倒计时
var reservationDate = '2023-5-30 16:24:00'
reservationDate = reservationDate.replace(/-/g, '/');
var reservationTime = new Date(reservationDate);
var remaintime1 = reservationTime - nowtime;//距离预售还剩余时间
var that = this;
that.saletimer = setInterval(function () {
let seconds = remaintime;
remaintime = seconds-1000;
if (remaintime == 0 || remaintime < 0) {//已到发售时间
//清空卡信息,清空计时器
that.saling = 1;
that.close = false;
clearInterval(that.saletimer)
}else{
that.date_format(remaintime);
}
}, 1000)
that.saletimer1 = setInterval(function () {
let second = remaintime1;
remaintime1 = second-1000;
if (remaintime1 == 0 || remaintime1 < 0) {//已到预约时间
//清空卡信息,清空计时器
that.is_open = 0;
that.close = false;
clearInterval(that.saletimer1)
}else{
that.is_open = 1;
that.date_format(remaintime1);
}
}, 1000)
},
goPay(e){
var that = this;
// 判断用户是否登录
if(!that.userInfo.id){
uni.showModal({
title:'提示',
content:'预约需先登录!',
cancelText:'取消',
confirmText:'登录',
confirmColor:'#34b16f',
cancelColor:'#999999',
success: (res) => {
if(res.confirm){
uni.navigateTo({
url:'../user/login'
})
}else{
console.log('暂不登录')
}
}
})
return false;
}
let data = {
uid: that.userInfo.id
}
that.$u.post('wxapp/card/getCardStatus', data).then(res => {
if (res.code == 1) {
if(res.is_begin == 0){
var content01 = res.content1;
console.log(res);
uni.showModal({
title:'公告',
content: content01,
showCancel:false
})
}else{
console.log(res);
// 剩余卡数量
if(res.remaincard <= 0 ){
uni.showModal({
'title': '提示',
'content': res.content2,
'showCancel': false
});
}else if (res.hasbuy == 1){
uni.showModal({
'title': '提示',
'content': '您已购买惠民卡,请勿重复购买',
'showCancel': false
});
return false;
}else{
uni.navigateTo({
'url': './pay'
})
}
}
}else{
console.log('获取失败')
}
});
// that.$u.post('wxapp/card/checkcard', data).then(res => {
// if (res.code == 1) {
// uni.setStorageSync('card',res.card);//存储卡信息
// uni.navigateTo({
// url:'pay'
// })
// }else{
// showWarning(res.msg);
// }
// });
},
pay(){
var that = this;
that.gettabStatus();
console.log(that.userInfo,'-=-=-=-=-=')
// 判断用户是否登录
if(!that.userInfo.id){
uni.showModal({
title:'提示',
content:'购买需先登录!',
cancelText:'取消',
confirmText:'登录',
confirmColor:'#34b16f',
cancelColor:'#999999',
success: (res) => {
if(res.confirm){
uni.navigateTo({
url:'../user/login'
})
}else{
console.log('暂不登录')
}
}
})
return false;
}
if(that.userInfo.vip == 0 && that.appointment !=1){
uni.showModal({
title:'提示',
content:'您还未进行实名认证,请先进行实名认证',
confirmText:'实名认证',
success: (res) => {
if(res.confirm){
uni.navigateTo({
url: './pay'
})
}else{
console.log('000')
}
}
})
return false
}
//下订单并唤起微信支付
var data = {
openid: that.userInfo.wxa_openid,
uid: that.userInfo.id,
}
if(that.is_open == 1){
that.$u.post('wxapp/card/getCardStatus', data).then(res => {
console.log(res,'------')
if (res.code == 1) {
if(res.is_begin == 0){
var content01 = res.content1;
console.log(res);
uni.showModal({
title:'公告',
content: content01,
showCancel:false
})
}else{
console.log(res);
// 剩余卡数量
if(res.remaincard <= 0 ){
uni.showModal({
'title': '提示',
'content': res.content2,
'showCancel': false
});
}else if (res.hasbuy == 1){
uni.showModal({
'title': '提示',
'content': '您已购买惠民卡,请勿重复购买',
'showCancel': false
});
return false;
}
else{
uni.requestSubscribeMessage({
tmplIds: ['FqhtEtsAcHn-bx1ucl0BSUhSvfsR8MnJwj6GvSDOdIg'],
success (res) {
console.log(res)
},
complete(res){
that.$u.post('wxapp/card/startPay', data).then(res => {
if (res.code == 1) {
that.orderinfo = res.orderinfo;
//客户单发起微信请求
uni.requestPayment({
'appId': res.orderinfo.appId,
'nonceStr': res.orderinfo.nonceStr,
'package': res.orderinfo.package,
'paySign': res.orderinfo.paySign,
'signType': res.orderinfo.signType,
'timeStamp': res.orderinfo.timeStamp,
'success': function (res) {
that.paydone(); // 支付成功后更新订单状态
},
'fail': function (res) {
if (res.errMsg == "requestPayment:fail cancel") {
var tipcontent = '您已取消支付!';
} else {
var tipcontent = '支付失败,请稍后重试!';
}
uni.showModal({
title:'提示',
content:tipcontent,
showCancel:false,
success(res) {
if(res.confirm){
that.is_open = 1;//启用支付
//释放卡
that.updateCard();
}
}
})
}
})
} else {
that.is_open = 1;//启用支付
that.showWarning(res.msg);
}
})
},
fail(res){
console.log(res)
}
})
}
}
}else{
console.log('获取失败')
}
});
}else{
uni.showToast({
icon:'none',
title:'活动暂未开始',
duration:2000
})
}
},
// 支付成功
paydone(){
var that = this;
let data = {
uid: that.userInfo.id,
order_sn: that.orderinfo.order_sn,//订单号
nonceStr: that.orderinfo.nonceStr,//交易单号
}
that.$u.post('wxapp/card/paydone', data).then(res => {
console.log('支付订单处理成功')
if (res.code == 1) {
uni.setStorageSync('userInfo',res.userInfo);//更新用户数据
uni.setStorageSync('card',res.card);//更新卡数据
uni.showModal({
title:'提示',
content:'您已支付成功,请到个人中心查看!',
showCancel:false,
success(res) {
if(res.confirm){
that.
uni.switchTab({
url: '/pages/user/index'
},1500);
}
}
})
}else{
console.log('数据更新失败')
}
})
},
// 支付失败
updateCard(){
var that = this;
let data = {
uid: that.userInfo.id,
}
that.$u.post('wxapp/card/updateCard', data).then(res => {
if (res.code == 1) {
console.log('已更新卡数据')
}else{
console.log('数据更新失败')
}
})
},
showWarning(msg){
uni.showModal({
title: '提示',
content: msg,
showCancel: false
})
},
//倒计时:其中time_canshu为传入的毫秒数
date_format(time_canshu) {
// 秒数
let second = Math.floor(time_canshu / 1000);
// 小时位
let hr = Math.floor(second / 3600);
// 分钟位
let min = Math.floor((second - hr * 3600) /60);
// 秒位
let sec = second % 60;// equal to => var sec = second % 60;
if (hr <= 9) hr ='0' + hr;
if (min <= 9) min ='0' + min;
if (sec <= 9) sec ='0' + sec;
let time = hr + " 时 " + min + " 分 " + sec + " 秒";
this.clock = time;
},
}
}
</script>
<style lang="scss">
page{ background: #f4F6F8; }
.card-wrap{ position: relative;
.card{ position: relative; margin: 30rpx 30rpx 20rpx;
image{ width: 100%; height: 380rpx; border-radius: 12rpx;box-shadow: 0rpx 0rpx 6rpx rgba(0,0,0,.05); }
}
.card-info{ margin: 0rpx 30rpx 30rpx; display: flex; justify-content: space-between; color: #454545; font-size: 30rpx; align-items: baseline;
.expiry{ display: flex;
.text{ color: #098e4f; padding-left: 12rpx; }
}
.last{
.num{ padding:0 6rpx 0; font-size: 34rpx; color: #098e4f; font-weight: 500; }
}
}
}
.bos{ background: #FFFFFF; margin: 20rpx 30rpx 20rpx; padding: 30rpx 10rpx 40rpx; border-radius: 12rpx; box-shadow: 0rpx 0rpx 6rpx rgba(0,0,0,.05);
.bos-tit{ display: flex; justify-content: center; padding-bottom: 40rpx; align-items: center;
.tit{ font-size: 32rpx; color: #333333;font-weight: bold; }
.line{ width: 100rpx; height: 6rpx; }
.left{ background-image: linear-gradient(to left, rgba(0,0,0,.6), rgba(0,0,0,0)); margin-right: 20rpx; }
.right{ background-image: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,0)); margin-left: 20rpx; }
}
.bos-item{ display: flex; justify-content: space-around;
.item{ text-align: center;
.iconfont{ background: #d7a26a; width: 96rpx; height: 96rpx;border-radius: 48rpx;color: #FFFFFF;font-size: 54rpx; line-height: 96rpx;text-align: center;
margin:auto; }
.tit{ font-size: 24rpx; line-height: 32rpx; color:#454545; padding-top: 18rpx; }
}
}
}
.about{ margin: 40rpx 34rpx 30rpx;
.heading{ display: flex;
.wrap{ position: relative;
.tit{ font-size: 36rpx; font-weight: bold; color: #333333; line-height: 54rpx; padding-bottom: 24rpx; position: relative;
text-shadow: 2rpx 2rpx 0rpx rgba(255,255,255,.9);
}
.hasline{ position: absolute;width: 96%; background: #12a861; opacity: .8; height: 20rpx; bottom: 24rpx; left: 12rpx;z-index: -10; }
}
}
.para{ display: flex; padding-bottom: 16rpx; font-size: 30rpx; line-height: 48rpx; color: #454545;
.ser{ width: 42rpx; }
.text{ flex:1; }
.text-style{ color: #df3033;text-decoration: underline;}
.text-weight{ font-weight: 800;}
}
.images{
image{ width: 100%;}
}
}
.pt-150{ padding-bottom: 150rpx; }
.pay-wrap{ position: fixed; bottom: 0; background: #FFFFFF; padding: 12rpx 30rpx 12rpx; height: 92rpx; box-shadow: 0rpx 0rpx 4rpx rgba(0,0,0,.3);
left: 0; right: 0;
.pay-btn{ background: #12a861; height: 92rpx; display: flex; justify-content: space-between; color: #FFFFFF;border-radius: 46rpx; align-items: center;
padding: 0rpx 46rpx 0rpx;
.tip{ font-size: 26rpx;
.amount{ font-size: 30rpx;font-weight: 600; }
}
.text{ font-size: 36rpx; }
}
.pay-btn-hover{ background: #098e4f; }
}
/* #ifdef H5 */
.pay-wrap{
position: fixed; bottom: 90rpx;
}
/* #endif */
.reservation-btn{
background: #ff9613 !important;
height: 46px;
display: flex;
justify-content: center !important;
color: #FFFFFF;
border-radius: 23px;
align-items: center;
padding: 0px 23px 0px;
font-size: 36rpx;
}
.disable{
opacity: 0.5;
justify-content: center !important;
}
</style>