<template>
<view class="content">
<homenav :iStatusBarHeight="iStatusBarHeight" :title="'活动详情'"></homenav>
<view class="top">
<img :src="mainImg" alt="" class="topimg" mode="widthFix">
</view>
<view class="cont" v-if="info">
<view class="name">
<view class="ptNameBz" v-if="info.groupType">
{{info.groupNumber}}人团
</view>
<view style="width: 550rpx;"> {{info.activityName}}</view>
</view>
<view class="name2">{{info.startTime.slice(0,10)}}~{{info.endTime.slice(0,10)}}</view>
<view class="name3">{{info.activityContent}}</view>
</view>
<!-- 拼团 -->
<view class="ptBox" v-if="info.groupList&&info.groupList.length>0">
<view class="ptBoxtop">
<view class="ptNum">{{info.groupList.length}}人正在拼团，可直接参与</view>
<view class="ptMore" @click="ptMore">
<sapn>查看更多</sapn>
<img src="../../static/timg/jt2.png" alt="" class="shopjt">
</view>
</view>
<view class="ptLine" v-for="(item,index) in info.groupList" v-if="index<3">
<view class="FirstMobilePhone">{{item.FirstMobilePhone?item.FirstMobilePhone:'***'}}</view>
<view class="ptlineRight">
<view class="ptlinexx">
<view class="DiffBNumber">还差 <span>{{item.DiffBNumber}}人</span>拼成 </view>
<view class="ptdjs">剩余{{item.EndTime | limitTimeFilter }}</view><!-- | limitTimeFilter -->
</view>
<button open-type="share" class=" shareBtn" :data-obj="item" v-if="item.IfMyself">
<view class="ptBtn" >邀请好友 </view>
</button>
<view class="ptBtn" @click="join(item)" v-else>去拼团 </view>
</view>
</view>
</view>
<view class="shopBox">
<view class="shopBoxTop">
<view class="shopMs">活动门店</view>
<view class="shopTy" @click="useShow">
<view class="shopTyTxt">{{info.shopCount}}家门店通用</view>
<img src="../../static/timg/jt2.png" alt="" class="shopjt">
</view>
</view>
<view class="shopCont">
<view class="shopContLeft">
<view class="shopName">{{shopInfo.shopName}}</view>
<view class="shopaddress">{{shopInfo.address?shopInfo.address:''}}</view>
</view>
<view class="shopContRight">
<view class="shopContRightLine" @click="getmap">
<image src="../../static/timg/icon_map.png" alt="" class="shopRightIcon"></image>
<view class="shopRightTxt">地图</view>
</view>
<view class="shopRightSx"></view>
<view class="shopContRightLine" @click="call">
<image src="../../static/timg/icon_phone.png" alt="" class="shopRightIcon"></image>
<view class="shopRightTxt">电话</view>
</view>
</view>
</view>
</view>
<!-- 多少人报名 -->
<view class="signupBox" v-if="info.signUserList.length">
<view class="signupTop">
<span class="signupTops1">{{info.signUserList.length}}</span>
<span class="signupTops1">人已报名</span>
</view>
<view class="signupCont">
<view class="signupLine" v-for="(item,index) in info.signUserList">
<view class="signupLineL">
<img :src="item.headImg" alt="" class="signupLineLImg">
<view class="signupLineLName" v-if="item.nickName!='null'">{{item.nickName?item.nickName:'微信用户'}}</view>
<view class="signupLineLName" v-else>微信用户</view>
</view>
<view class="signupLineM">{{item.plateNumber?item.plateNumber:''}}</view>
<view class="signupLineR">{{item.signTime}}</view>
</view>
</view>
</view>
<!-- 多少人报名 -->
<!-- 多少人看过 -->
<view class="signupBox" v-if="info.lookCount">
<view class="signupTop">
<span class="signupTops1">{{info.lookCount}}</span>
<span class="signupTops1">人看过</span>
</view>
<!-- <view class="seeBox">
<view class="seeLine" v-for="(item,index) in 15">
<img src="http://dmsphoto.66km.com.cn/marketing//accompany/3885B510-6405-4A5E-BD64-B6C09CEE070E.jpg" alt="" class="signupLineLImg">
</view>
</view> -->
</view>
<view class="detailBOx" v-if="dimgList.length>0">
<view class="detailTitle">活动详情</view>
<view class="detailImgBox" v-for="(item,index) in dimgList">
<img :src="item.img" alt="" class="detailImg" mode="widthFix">
</view>
</view>
<view class="companyName">©{{info.supportInfo}}</view>
<view style="height: 200rpx;padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);"></view>
<view class="bottom">
<view class="timeTbox" v-if="!activityEnd">
<view class="timeviewTxt" v-if="activityNoOpen"> 距开始</view>
<view class="timeviewTxt" v-if="!activityNoOpen"> 距结束</view>
<view class="timeK">{{shengyuD}}</view>
<view class="timeviewTxt" > 天</view>
<view class="timeK">{{shengyuH}}</view>
<view class="timeviewTxt"> 时</view>
<view class="timeK">{{shengyuM}}</view>
<view class="timeviewTxt" > 分</view>
</view>
<view class="bottomBtnBox">
<view class="bottomBtnBoxLeft" @click="shareShowzs">
<image src="../../static/timg/share.png" alt="" class="shareIcon"></image>
<view class="shareTxt">分享</view>
</view>
<!-- <button open-type="share" class="bottomBtnBoxLeft shareBtn" >
<image src="../../static/timg/share.png" mode="" class="shareIcon"></image>
<view class="shareTxt">分享</view>
</button> -->
<!-- 状态1未开始 2进行中3已结束 -->
<view class="bottomBtn" v-if="info.state==2&&info.groupType!=1" @click="signUp" :style="{background:'#'+themeColor}">
<span v-if="info.payType==1">￥{{info.money}} 立即抢购</span>
<span v-else>立即报名</span>
</view>
<view class="bottomPtBox" v-if="info.state==2&&info.groupType==1" >
<view class="separate" @click="signUp">
<view class="separateTop">￥{{info.money}}</view>
<view class="separateTxt">单独购买</view>
</view>
<view class="groupBtn" @click="groupFn">
<view class="groupBtnTop">￥{{info.groupMoney}}</view>
<view class="groupBtnTxt">发起拼团</view>
</view>
</view>
<view class="bottomBtn2" v-if="info.state==1">报名未开始</view>
<view class="bottomBtn2" v-if="info.state==3">报名已结束</view>
</view>
</view>
<!-- 报名弹框 -->
<view class="baomingBox" v-if="bmShow" @click="nobmshow">
<view class="baomingCont applicationTk" @click.stop="" :style="{bottom: jpHeight}">
<view class="bmTop">
<view class="bmTitle">登记信息</view>
<image src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="nobmshow"></image>
</view>
<view style="padding: 0 24rpx;">
<view class="bmshopLine" @click="showCkshop">
<view class="bmshopname" v-if="!shopName">请选择门店</view>
<view class="bmshopname" style="color: #333333;">{{shopName}}</view>
<image src="../../static/timg/icon_arrow_right.png" alt="" class="bmshopjt"></image>
</view>
<!-- clWhere报名凭证1,2,3,4 1手机号2车牌号3姓名4单位 -->
<view class="bmLine" v-if="info.clWhere.indexOf(1)!=-1" @click="focusState1cl">
<!-- :focus="focusState1" --> <input type="number" :hold-keyboard="true" :adjust-position="false" @blur="inputBindBlur" @focus="inputBindFocus" v-model="mobilePhone" class="bmlineInput" placeholder="输入手机号" placeholder-style="color:#999999">
</view>
<view class="bmLine" v-if="info.clWhere.indexOf(2)!=-1" @click="focusState2cl">
<input type="text" :hold-keyboard="true" :adjust-position="false" @blur="inputBindBlur" @focus="inputBindFocus" v-model="plateNumber" class="bmlineInput" placeholder="输入车牌号" placeholder-style="color:#999999">
</view>
<view class="bmLine" v-if="info.clWhere.indexOf(3)!=-1" @click="focusState3cl">
<input type="text" :hold-keyboard="true" :adjust-position="false" @blur="inputBindBlur" @focus="inputBindFocus" v-model="customerName" class="bmlineInput" placeholder="输入姓名" placeholder-style="color:#999999">
</view>
<view class="bmLine" v-if="info.clWhere.indexOf(4)!=-1" @click="focusState4cl">
<input type="text" :adjust-position="false" :hold-keyboard="true" @blur="inputBindBlur" @focus="inputBindFocus" v-model="unit" class="bmlineInput" placeholder="输入单位" placeholder-style="color:#999999">
</view>
</view>
<view class="bmTtnBox">
<view style="height: 1rpx;"></view>
<view class="bmBtn" @click="submitOrder" :style="{background:'#'+themeColor}">
<span v-if="groupOwner">
￥{{info.groupMoney}} {{groupOwner==1?'发起拼团':'立即拼团'}}
</span>
<span v-else>
<span v-if="info.payType==1">￥{{info.money}} {{info.groupType==1?'单独购买':'立即抢购'}} </span>
<span v-else>立即报名</span>
</span>
</view>
</view>
</view>
</view>
<!-- 门店弹框 -->
<view class="baomingBox ckshopBox" v-if="ckshopShow">
<view class="baomingCont">
<view class="bmTop">
<view class="bmTitle">选择门店</view>
<image src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="noShowShop"></image>
</view>
<view style="padding: 0 24rpx; height: 65vh;overflow-y: scroll;">
<view class="ckshopLine" v-for="(item,index) in info.shopList" @click="ckshop(item)">
<view class="shoplineLeft">
<image :src="item.photoPath" mode="" class="shopImg" v-if="item.photoPath"></image>
<image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
</view>
<view class="shopright" style="padding-left: 20rpx;">
<view class="shopTop">
<view class="shopName">{{item.shopName}}</view>
</view>
<view class="brandsBg" v-if="item.brands">
<view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
</view>
<view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
v-if="item.endTime">{{item.endTime}}</span> </view>
<view class="shopBottomLeft">
<span class="shopaddress"
v-if="item.address">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
<span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 适用门店 -->
<view class="baomingBox ckshopBox" v-if="useShopShow" @click="noShowShop2">
<view class="baomingCont" @click.stop="">
<view class="bmTop">
<view class="bmTitle">选择门店</view>
<image src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="noShowShop2"></image>
</view>
<view style="padding: 0 24rpx; height: 65vh;overflow-y: scroll;">
<view class="ckshopLine" v-for="(item,index) in info.shopList" @click="ckshop(item)">
<view class="shoplineLeft">
<image :src="item.photoPath" mode="" class="shopImg" v-if="item.photoPath"></image>
<image src="../../static/timg/noimg.png" mode="" class="shopImg" v-else></image>
</view>
<view class="shopright" style="padding-left: 20rpx;">
<view class="shopTop">
<view class="shopName">{{item.shopName}}</view>
</view>
<view class="brandsBg" v-if="item.brands">
<view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
</view>
<view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
v-if="item.endTime">{{item.endTime}}</span> </view>
<view class="shopBottomLeft">
<span class="shopaddress"
v-if="item.address">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
<span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
</view>
</view>
</view>
</view>
</view>
</view>
<image src="../../static/timg/mp3.png" class="mp3Img" @click="play()" v-if="!payshow&mp3Url!=''"></image>
<image src=".../../static/timg/mp31.png" class="mp3Img" @click="play2()" id="bofang" v-if="payshow&mp3Url!=''"></image>
<view class="shareBox" v-if="shareShow" @click="shareShowyc">
<img :src="shareQrCode" alt=""style="width: 300rpx;height:300rpx">
<view class="shareCont" >
<button open-type="share" class=" shareBtn" >
<image src="../../static/timg/icon_wxhy.png" mode="" class="shareBimg"></image>
<view class="bottomTxtshare">分享</view>
</button>
<view @click="gowp">
<img src="../../static/timg/icon_haibao.png" alt="" class="shareBimg">
<view class="bottomTxtshare">生成海报</view>
</view>
</view>
</view>
<!-- 手机号授权 -->
<view class="authorizBox" v-if="authorizShow" @click="authorizShowno">
<view class="authorizCont" @click.stop="">
<view class="authorizName">{{wxOpenData.miniAppName}}</view>
<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
</view>
<view style="text-align: center;padding-top: 56rpx;">
<image src="../../static/timg/icon_guanbi@2x.png" @click="authorizShowno" mode="" class="authorizCloseImg"></image>
</view>
</view>
<!-- 拼单更多 -->
<view class="baomingBox" v-if="djsMoreShow">
<view class="djsCont">
<view class="bmTop">
<view class="bmTitle">{{info.groupList.length}}人正在拼团，可直接参与</view>
<image src="../../static/timg/chahao.png" alt="" class="bmChimg" @click="ptMorehide"></image>
</view>
<view class="djsLineBox">
<view class="ptLine" v-for="(item,index) in info.groupList">
<view class="FirstMobilePhone">{{item.FirstMobilePhone?item.FirstMobilePhone:'***'}}</view>
<view class="ptlineRight">
<view class="ptlinexx">
<view class="DiffBNumber">还差 <span>{{item.DiffBNumber}}人</span>拼成 </view>
<view class="ptdjs">剩余{{item.EndTime | limitTimeFilter }}</view><!-- | limitTimeFilter -->
</view>
<button open-type="share" class=" shareBtn" :data-obj="item" v-if="item.IfMyself">
<view class="ptBtn" >邀请好友 </view>
</button>
<view class="ptBtn" @click="join(item)" v-else>去拼团</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import homenav from "../../components/homenav/nav.vue"
let that;
export default {
components: {
homenav
},
data() {
return {
info:'',
type:'',
shopNum:'',
shopInfo:'',
activityEnd:true,
activityNoOpen:true,
shengyuD:'',
shengyuH:'',
shengyuM:'',
queryShopList:'',
collectingID:'',
bmShow:false,
ckshopShow:false,
mainImg:'',
dimgList:[],
shopName:'',
ckshopdata:'',
customerName:'',
mobilePhone:'',
unit:'',
plateNumber:'',
comment:'',
userInfo:'',
useShopShow:false,
jpHeight:0,
isPlay: false,
mp3Url:'',
payshow:false,
jpNum:1,
focusState1:false,
focusState2:false,
focusState3:false,
focusState4:false,
shareShow:false,
ext:'',
shareId:'',
scene:'',
themeColor:'',
authorizShow:false,
wxOpenData:'',
ext:'',
iStatusBarHeight:'',
groupOwner:'',
groupID:'',
ticker: null,
djsMoreShow:false,
isgo:true,
}
},
onLoad(opt) {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
console.log(opt)
if(opt.shareId){
this.shareId=opt.shareId
}
this.ext=this.$common.getExtStoreId();
// opt.scene='10002'
if(this.userInfo){
this.userInfo=this.$store.state.userInfo;
this.wxOpenData=this.$store.state.wxOpenData;
this.themeColor = uni.getStorageSync("themeColor");
this.queryGoodsLook()
if(opt.scene&&opt.scene!='undefined'){
this.scene=opt.scene;
this.getShareParams()
}else{
this.collectingID=opt.id;
//this.getInfo();
this.queryActivityInfo();
this.queryGoodsLook()
}
}else{
this.$common.automaticlogin().then(val => {
this.themeColor = uni.getStorageSync("themeColor");
this.userInfo=this.$store.state.userInfo;
this.wxOpenData=this.$store.state.wxOpenData;
if(opt.scene&&opt.scene!='undefined'){
this.scene=opt.scene;
this.getShareParams()
}else{
this.collectingID=opt.id;
//this.getInfo();
this.queryActivityInfo();
this.queryGoodsLook()
}
//this.queryActivityInfo();
})
}
this.shopckList= uni.getStorageSync("shopckList");
//this.ckmusic=uni.getStorageSync("ckmusic");
//这一段是防止进入页面出去后再进来计时器重复启动
if (this.ticker) {
clearInterval(this.ticker);
}
},
onShow() {
this.shopName=this.$store.state.ckshopInfo.shopName;
this.ckshopdata=this.$store.state.ckshopInfo
this.shopInfo=this.$store.state.ckshopInfo
//console.log(this.shopInfo)
},
onPullDownRefresh(){
//this.getInfo();
this.queryActivityInfo();
setTimeout(() => {
uni.stopPullDownRefresh(); // 关闭下拉刷新
}, 1000);
},
onHide(){
this.bgmMusic.stop(()=>{
console.log('背景音乐停止了');
});
if (this.ticker) {
clearInterval(this.ticker);
}
},
onUnload(){
this.bgmMusic.stop()
},
methods: {
ptMore(){
this.djsMoreShow=true;
},
ptMorehide(){
this.djsMoreShow=false;
},
beginTimer() { //这个计时器是每秒减去数组中指定字段的时间
// console.log("??????????????????"+this.info.groupType)
if(this.info.groupType){
this.ticker = setInterval(() => {
this.info.groupList= JSON.parse(JSON.stringify( this.info.groupList))
/* for (let i = 0, len = this.info.groupList.length; i < len; i++) {
const item = this.info.groupList[i];
if (item.EndTime) {
}
} */
}, 1000);
}
},
setDate(time) {
var t_s = Date.parse(new Date(time)); //转化为时间戳毫秒数
// console.log(t_s)
var newt=t_s - 1000; //设置新时间比旧时间少一秒
return this.formatDate(newt)
} ,
formatDate(time) {
let date = new Date(time);
let YY = date.getFullYear();
let MM = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
let DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
// 这里可以修改返回的日期格式
return YY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
},
authorizShowno(){
this.authorizShow=false
},
getShareParams(){
this.$http('openMall/getShareParams', {
scene:this.scene,
},'GET').then(res => {
this.collectingID=res.data.goodsID;
this.shareId=res.data.operatorID
this.queryActivityInfo();
this.queryGoodsLook()
})
},
gowp(){
var time=''
if(this.info.startTime){
var time = this.info.startTime.slice(0,10) + '~' +this.info.endTime.slice(0,10)
}else{
}
var sellingPoint='';
if(this.info.activityContent){
sellingPoint=this.info.activityContent
}
//console.log(sellingPoint)
this.shareShow=false;
uni.navigateTo({
url:'../shop/wp?img='+this.mainImg+'&name='+this.info.activityName+'&time='+time+'&sellingPoint='+sellingPoint+'&id='+this.collectingID+'&type=2'+'&groupType='+this.info.groupType
})
},
shareShowyc(){
this.shareShow=false;
},
shareShowzs(){
this.shareShow=true;
},
focusState1cl(){
this.focusState1=true;
},
focusState2cl(){
this.focusState2=true;
},
focusState3cl(){
this.focusState3=true;
},
focusState4cl(){
this.focusState4=true;
},
inputBindFocus(e){
//console.log( e.detail.height);
this.jpHeight=e.detail.height+ "px";
//console.log(this.jpHeight)
},
inputBindBlur(){
//return false;
uni.onKeyboardHeightChange((obj)=>{
console.log("inputBindBlur"+obj.height)
let _sysInfo = uni.getSystemInfoSync();
let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
let _diff = obj.height - _heightDiff;
console.log(_diff)
if(_diff<0||_diff==0){
this.jpHeight=0
}
// 键盘高度
//this.jpHeight = (_diff > 0 ? _diff : 0) - 2 + "px";
})
if(this.jpNum==1){
this.jpHeight=0
}
this.jpNum++;
},
queryGoodsLook(){
this.$http('openmy/queryGoodsLook', {
goodsId:this.collectingID,
openId:this.userInfo.openId
},'POST').then(res => {
})
},
noShowShop2(){
this.useShopShow=false;
},
useShow(){
this.useShopShow=true;
},
submitOrder(){
uni.hideKeyboard()
var jsonArray={
itemId:this.collectingID,
itemName:this.info.activityName,
itemQty:1,
salePrice:this.info.money?this.info.money:0,
totalPrice:this.info.money?this.info.money:0,
}
if(this.ckshopdata==''){
uni.showToast({
title: '请选择服务门店',
icon: 'none',
duration: 3000
});
return false;
}
if(this.info.clWhere.indexOf(1)!=-1&&this.mobilePhone==''){
uni.showToast({
title: '请输入手机号',
icon: 'none',
duration: 3000
});
return false;
}
if(this.info.clWhere.indexOf(2)!=-1&&this.plateNumber==''){
uni.showToast({
title: '请输入车牌号',
icon: 'none',
duration: 3000
});
return false;
}
if(this.info.clWhere.indexOf(3)!=-1&&this.customerName==''){
uni.showToast({
title: '请输入姓名',
icon: 'none',
duration: 3000
});
return false;
}
if(this.info.clWhere.indexOf(4)!=-1&&this.unit==''){
uni.showToast({
title: '请输入单位',
icon: 'none',
duration: 3000
});
return false;
}
var arr=[]
arr.push(jsonArray)
var params={
sheetType:'6',
sheetContent:this.info.activityName,
customerName:this.customerName,
mobilePhone:this.mobilePhone,
unit:this.unit,
plateNumber:this.plateNumber,
//carModel:this.carInfo.carModel,
totalMoney:this.info.money?this.info.money:0,
shopId:this.ckshopdata.id,
comment:this.comment,
sheetDetail:JSON.stringify(arr),
payType:this.info.payType,
shareId:this.shareId,
groupType:0,
}
if(this.groupOwner==1){
params.groupOwner=1;
params.groupType=1;
params.totalMoney=this.info.groupMoney
}
if(this.groupOwner==2){
params.groupOwner=2;
params.groupType=1;
params.groupID=this.groupID;
params.totalMoney=this.info.groupMoney
}
uni.showLoading({
title: '加载中'
})
if(!this.isgo){
return false
}
this.isgo=false;
this.$http('openMallOrder/submitOrder', params,'POST').then(res => {
uni.hideLoading();
this.isgo=true;
if(res.code==0){
this.orderData=res.data
if(this.info.payType==1){
this.unifiedPay(res.data)
}else{
uni.showToast({
title: '报名成功',
icon: 'none',
duration: 3000
});
uni.redirectTo({
url: "../user/myOrder/activityOrderDetail?id=" + this.orderData.id +"&SheetType=" + this.orderData.sheetType
})
}
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration: 3000
});
}
})
},
unifiedPay(res){
this.$http('openMallOrder/unifiedPay', {
sheetId:res.id
},'POST').then(res => {
if(res.code==0){
this.requestPayment(res.data)
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration: 3000
});
}
})
},
requestPayment(res){
var payInfo=res;
//console.log(payInfo)
//console.log(String(Date.now()))
var that=this;
uni.requestPayment({
provider: 'wxpay',
//timeStamp: String(Date.now()),
timeStamp: payInfo.timeStamp,
nonceStr: payInfo.nonceStr,
package:payInfo.package,
signType: payInfo.signType,
paySign: payInfo.paySign,
appid:payInfo.appId,
success: function (res) {
console.log('success:' + JSON.stringify(res));
uni.showToast({
title: '支付成功',
icon:'none',
duration: 2000
});
uni.redirectTo({
url: "../user/myOrder/activityOrderDetail?id=" + that.orderData.id +"&SheetType=" + that.orderData.sheetType
})
},
fail: function (err) {
console.log(err)
uni.showToast({
title: '支付失败',
icon:'none',
duration: 2000
});
console.log(that.orderData)
uni.redirectTo({
url: "../user/myOrder/activityOrderDetail?id=" + that.orderData.id +"&SheetType=" + that.orderData.sheetType
})
}
});
},
signUp(){
this.groupOwner=0;
if(this.userInfo){
/* this.info.shopList.forEach(item=>{
if(item.id == this.shopInfo.id){
this.ckshopdata=item;
this.shopName=item.shopName;
}
}) */
this.bmShow=true;
}else{
this.authorizShow=true
}
},
groupFn(){
this.groupOwner=1;
if(this.userInfo){
this.bmShow=true;
}else{
this.authorizShow=true
}
},
join(e){
this.groupOwner=2;
this.groupID=e.ID
if(this.userInfo){
this.bmShow=true;
}else{
this.authorizShow=true
}
},
nobmshow(){
this.bmShow=false;
},
ckshop(item){
this.ckshopdata=item;
this.shopName=item.shopName;
this.ckshopShow=false;
this.shopInfo=item
this.useShopShow=false;
},
showCkshop(){
console.log("选择门店")
//this.ckshopShow=true;
uni.navigateTo({
url:'/pages/shop/ckshopList?goodsId='+this.collectingID+'&type=5'
})
},
noShowShop(){
this.ckshopShow=false;
},
queryActivityInfo(){
uni.showLoading({
title: '加载中'
})
this.$http('openHome/queryActivityInfo', {
collectingID:this.collectingID
}, 'GET').then(res => {
//uni.hideLoading();
this.info = res.data;
console.log(this.info)
this.getInfo();
this.dimgList=[]
if(this.info.imgList){
this.info.imgList.forEach(item=>{
if(item.imgType==1){
this.mainImg=item.img
}else{
this.dimgList.push(item)
}
})
}
if (this.info.endTime < this.info.startTime) {
// this.$vux.toast.text('时间设置错误')
return
}
// this.activityNoOpen
if (Number(new Date().getTime()) > (Number(new Date(this.info.startTime.replace(/-/g, '/')).getTime()) || 0)) {
console.log("现在时间大于开始时间")
this.activityNoOpen = false
} else {
this.activityNoOpen = true
}
if (Number(new Date().getTime()) > Number(new Date(this.info.endTime.replace(/-/g, '/')).getTime())) {
console.log("现在时间大于结束时间")
this.activityEnd = true
} else {
this.activityEnd = false
}
if (!this.activityNoOpen && !this.activityEnd) {
this.clock()
}
if (this.activityNoOpen && !this.activityEnd) {
this.clock2()
}
if(this.info.music){
this.bgmMusic = uni.createInnerAudioContext();
this.bgmMusic.autoplay = true;//自动播放
this.bgmMusic.loop = true;//循环播放
this.mp3Url='http://dmsimg.66km.com/music/sakuratears.mp3';
this.bgmMusic.src ='http://dmsimg.66km.com/music/sakuratears.mp3'//, mp3Url;//背景音乐地址
this.bgmMusic.onPlay(function(){
console.log('背景音乐播放中');
});
this.bgmMusic.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});
}
})
},
play2(){
this.bgmMusic.play();
this.payshow=false;
},
play(){
this.payshow=true;
this.bgmMusic.stop(()=>{
console.log('背景音乐停止了');
});
},
getInfo(){
this.$http('openreservation/getInfo', {
lat: '',
lng: '',
}, 'GET').then(res => {
uni.hideLoading();
//this.shopInfo = res.data.shopInfo
var shopinfo=res.data.shopInfo;
this.info.shopList.forEach(item=>{
//console.log(item.id)
//console.log(shopinfo.id)
if(item.id==shopinfo.id){
this.shopInfo=shopinfo
}
})
if(this.shopInfo==''){
this.shopInfo=this.info.shopList[0]
}
this.beginTimer();
})
},
call() {
uni.makePhoneCall({
phoneNumber: this.shopInfo.mobilePhone
});
},
getmap() {
console.log("打开地图")
var that = this;
if (!that.shopInfo.lat || !that.shopInfo.lng) {
uni.showToast({
title: '该店铺未设置定位',
icon: 'none',
duration: 3000
});
} else {
uni.openLocation({
latitude: Number(that.shopInfo.lat),
longitude: Number(that.shopInfo.lng),
name: that.shopInfo.shopName,
address: that.shopInfo.provinceName + that.shopInfo.cityName + that.shopInfo.areaName + that.shopInfo.address,
success: function() {
console.log('success');
},
fail(err) {
console.log(err)
}
});
}
},
clock () {
let _this = this
let today = new Date() // 当前时间
let h = today.getHours()
let m = today.getMinutes()
let s = today.getSeconds()
let stopTime = new Date(_this.info.endTime.replace(/-/g, '/')) // 结束时间
if (Number(new Date(_this.info.endTime).getTime()) < Number(new Date().getTime())) {
this.activityEnd = true
return
}
let stopH = stopTime.getHours()
let stopM = stopTime.getMinutes()
let stopS = stopTime.getSeconds()
let shenyu = stopTime.getTime() - today.getTime() // 倒计时毫秒数
let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
let shengyuH = parseInt(D / (60 * 60 * 1000)) // 除去天的毫秒数转换成小时
let H = D - shengyuH * 60 * 60 * 1000 // 除去天、小时的毫秒数
let shengyuM = parseInt(H / (60 * 1000)) // 除去天的毫秒数转换成分钟
let M = H - shengyuM * 60 * 1000// 除去天、小时、分的毫秒数
let S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)// 除去天、小时、分的毫秒数转化为秒
this.daojishi = '报名倒计时:' + shengyuD + '天' + shengyuH + '小时' + shengyuM + '分' + S + '秒'
// setTimeout("clock()",500);
this.shengyuM=shengyuM;
this.shengyuD=shengyuD;
this.shengyuH=shengyuH;
setTimeout(_this.clock, 500)
},
clock2(){
let _this = this
let today = new Date() // 当前时间
let h = today.getHours()
let m = today.getMinutes()
let s = today.getSeconds()
let startTime = new Date(_this.info.startTime.replace(/-/g, '/')) // 结束时间
if (Number(new Date(_this.info.startTime).getTime()) < Number(new Date().getTime())) {
this.activityNoOpen = true
return
}
let stopH = startTime.getHours()
let stopM = startTime.getMinutes()
let stopS = startTime.getSeconds()
let shenyu = startTime.getTime() - today.getTime() // 倒计时毫秒数
let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
let shengyuH = parseInt(D / (60 * 60 * 1000)) // 除去天的毫秒数转换成小时
let H = D - shengyuH * 60 * 60 * 1000 // 除去天、小时的毫秒数
let shengyuM = parseInt(H / (60 * 1000)) // 除去天的毫秒数转换成分钟
let M = H - shengyuM * 60 * 1000// 除去天、小时、分的毫秒数
let S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)// 除去天、小时、分的毫秒数转化为秒
this.daojishi = '报名倒计时:' + shengyuD + '天' + shengyuH + '小时' + shengyuM + '分' + S + '秒'
// setTimeout("clock()",500);
this.shengyuM=shengyuM;
this.shengyuD=shengyuD;
this.shengyuH=shengyuH;
setTimeout(_this.clock2, 500)
},
decryptPhoneNumber: function(e) {
console.log(e);
this.code=e.detail.code
this.wxPhoneLogin()
this.authorizShow=false;
},
wxPhoneLogin(){
var that=this;
this.$http('miniApp2/sys/wxPhoneLogin', {
appId:this.ext.appId,
unionId:this.ext.unionId,
code:this.code,
openId:this.wxOpenData.openid
},'POST').then(res => {
var data = res.data;
if(data.loginInfo){
this.userInfo=data.loginInfo.openUser;
this.wxOpenData=data.loginInfo;
this.$store.commit('mutationswxOpenData', data)
this.$store.commit('mutationsuserInfo', this.userInfo)
this.getInfo()
}
})
},
},
filters: {
// 拼团有效期的filter
limitTimeFilter (val) {
//console.log('limitTimeFilter')
//https://blog.csdn.net/qq_39905409/article/details/104478623
if (val) {
//console.log(val)
let formateLimitTimes = that.$common.formateTimeStamp(val);
let txt = `${formateLimitTimes.hour} : ${formateLimitTimes.min} : ${formateLimitTimes.seconds} `;
/* if (formateLimitTimes.day != '00') {
txt = `${Number(formateLimitTimes.day)*24} 时 ${formateLimitTimes.min} 分 ${formateLimitTimes.seconds} 秒`;
} */
return txt;
} else {
const twtxt = `0 : 0 : 0 `
return twtxt;
}
}
},
beforeCreate: function () {
that = this;
},
onShareAppMessage(res) {
console.log(this.userInfo)
var img='';
/* if(this.info.ImgList.length>0){
img=this.info.ImgList[0].url
} */
console.log(this.info.groupType)
if(this.info.groupType){
//console.log(res.target.dataset.obj.ID)
var url= 'pages/subPack/jkDetail?id=' + this.collectingID+'&shareId='+this.userInfo.openId+'&shareName='+this.userInfo.nickName+'&groupID='+res.target.dataset.obj.ID
}else{
var url= 'pages/activity/jkDetail?id=' + this.collectingID+'&shareId='+this.userInfo.openId
}
return {
title: this.info.activityName,
//imageUrl:this.mainImg,
imageUrl:'http://dmsphoto.66km.com.cn/thFiles/83074F71-F5C9-4C8E-B23F-2D195788960B.png',
path:url,
success(res){
uni.showToast({
title:'分享成功'
})
},
fail(res){
uni.showToast({
title:'分享失败',
icon:'none',
duration: 3000
})
}
}
},
}
</script>
<style scoped>
.ptNameBz{
font-weight: 500;line-height: 34rpx;
font-size: 22rpx;height: 32rpx;
color: #FD0F00;margin-top: 6rpx;margin-right: 10rpx;
background: url('http://dmsphoto.66km.com.cn/thFiles/2AF1130F-C318-45D3-B057-FA0728B41046.png') no-repeat;
background-size: 100% 100%;
padding-left: 64rpx;padding-right: 4rpx;
}
.name{
display: flex;
}
.djsCont{
width: 638rpx;
height: 50vh;
background: #fff;
margin-top: 20vh;
margin-left:56rpx ;border-radius: 15rpx;
}
.djsCont .ptLine{
border-top:0;
border-bottom: 1px solid #EEEEEE;
}
.djsCont .bmTop{
border-bottom: 1px solid #EEEEEE;
padding: 24rpx;
}
.djsLineBox{
height: calc(60vh - 120rpx);
overflow-y: scroll;
}
.ptLine{
display: flex;
justify-content: space-between;
padding: 26rpx 24rpx;border-top: 1px solid #EEEEEE;
}
.FirstMobilePhone{
font-weight: 400;
color: #222222;font-size: 28rpx;line-height: 60rpx;
}
.DiffBNumber{
font-weight: 400;text-align: right;
color: #222222;font-size: 26rpx;
}
.ptlineRight{
display: flex;
}
.ptlinexx{
padding-right: 12rpx;
}
.ptBtn{
width: 137rpx;font-weight: 400;
color: #FFFFFF;font-size: 26rpx;
height: 60rpx;text-align: center;
background: #E02E24;line-height: 60rpx;
border-radius: 6rpx;
margin-top: 4rpx;
}
.ptdjs{
font-weight: 400;
color: #666666;font-size: 24rpx;
}
.ptBox{
background: #ffffff;margin-top: 20rpx;
}
.bottomPtBox{
display: flex;padding-top: 24rpx;
}
.ptNum{
font-weight: 400;
color: #222222;font-size: 28rpx;
}
.ptBoxtop{
display: flex;justify-content: space-between;
padding: 20rpx 24rpx;
}
.ptMore{
font-weight: 400;
color: #666666;font-size: 24rpx;
}
.separate{
width: 284rpx;margin-left: 30rpx;
height: 74rpx;
background: #FFE4E2;
border-radius: 37rpx;
text-align: center;color:#D53533;
}
.separate .separateTop{
color:#D53533;
}
.separate .separateTxt{
color:#D53533;
}
.groupBtn{
width: 284rpx;text-align: center;color: #ffffff;
height: 74rpx;margin-left: 30rpx;
background: #D53533;
border-radius: 37rpx;
}
.separateTop{
font-weight: 500;font-size: 28rpx;
color: #FFFFFF;padding-top: 2rpx;
}
.separateTxt{
color: #FFFFFF;font-size: 26rpx;line-height: 26rpx;
}
.companyName{
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #666666;
line-height: 33rpx;
text-align: center;
padding: 40rpx;
}
.shareBtn{
/* width: 100rpx; */
background: #F4F5F7;
}
.shareBimg{
width: 102rpx;
height: 102rpx;
}
.bottomTxtshare{
color: #333333;
font-size: 22rpx;
padding-top: 20rpx;
}
.shareBox{
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
bottom: 0;
z-index: 11;
}
.shareCont{
width: 100%;
background: #F4F5F7;
position: absolute;
left: 0;
bottom: 0;
display: flex;
justify-content: space-around;
padding: 50rpx 0;
border-radius: 40rpx 40rpx 0px 0px;
}
.mp3Img{
/* transform: translate(-1584.4%, 121.5%) scale(1); */
position: fixed;
top: 40rpx;
right: 40rpx;
width: 60rpx;
height: 60rpx;
}
.ckshopBox{
z-index: 111 !important;
}
.shopline {
padding: 20rpx 0;
background-color: #FFFFFF;
border-radius: 10rpx;
display: flex;
}
.baomingBox{
width: 750rpx;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
left: 0;
z-index: 11;
/* display: flex;
align-items: center; */
}
.bmTtnBox{
width: 750rpx;
height: 120rpx;
background: #FFFFFF;
box-shadow: 0px -2px 10rpx 0px rgba(153,153,153,0.2000);
position: absolute;
left: 0;
bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.bmBtn{
width: 690rpx;
height: 74rpx;
background: #D53533;
border-radius: 37rpx;
text-align: center;
line-height: 74rpx;
color: #ffffff;
font-size: 30rpx;
margin-top: 23rpx;
margin-left: 30rpx;
margin-top: 20rpx;
}
.bmshopjt{
width: 12rpx;
height: 20rpx;
margin-top: 10rpx;
}
.bmlineInput{
color: #333333;
font-size: 28rpx;
height: 98rpx;
line-height: 98rpx;
}
.bmshopname{
font-weight: 400;
color: #999999;
font-size: 28rpx;
line-height: 40rpx;
width: 500rpx;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.bmshopLine{
display: flex;
justify-content: space-between;
padding: 26rpx 0;
border-bottom: 1px solid #EEEEEE;
}
.bmLine{
border-bottom: 1px solid #EEEEEE;
}
.bmTop{
display: flex;
justify-content: space-between;
padding: 30rpx 24rpx 10rpx 24rpx;
}
.bmTitle{
font-weight: 500;
color: #3C3C3C;
font-size: 30rpx;
line-height: 36rpx;
}
.bmChimg{
width: 36rpx;
height: 36rpx;
}
.baomingCont{
position: absolute;
width: 750rpx;
/* height:850rpx; */
/* padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); */
left: 0;
bottom: 0;
background: #ffffff;
border-radius: 24rpx 24rpx 0px 0px;
padding-bottom: 10rpx;
}
.shareIcon{
width: 48rpx;
height: 48rpx;
display: block;
}
.bottomBtnBox{
display: flex;
}
.bottomBtnBoxLeft{
padding-left: 40rpx;
padding-top: 21rpx;
}
.shareTxt{
color: #666666;font-size: 20rpx;
text-align: center;
}
.bottomBtn{
width: 598rpx;
height: 74rpx;
background: #D53533;
border-radius: 37rpx;
line-height: 74rpx;
text-align: center;
color: #ffffff;
font-size: 30rpx;
margin-top: 24rpx;
margin-left: 34rpx;
}
.bottomBtn2{
width: 598rpx;
height: 74rpx;
background: #DDDDDD;
border-radius: 37rpx;
line-height: 74rpx;
text-align: center;
color: #ffffff;
font-size: 30rpx;
margin-top: 24rpx;
margin-left: 34rpx;
}
.timeTbox{
width: 750rpx;
height: 60rpx;
background:#FFF5F0;
border-radius: 24rpx 24rpx 0px 0px;
border: 1px solid #EFE1D5;
display: flex;
justify-content: center;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #764D49;
}
.timeviewTxt{
line-height: 41rpx;
padding-top: 10rpx;
}
.timeDivTxt{
line-height: 60rpx;
padding: 0 10rpx;
}
.timeK{
height: 41rpx;
line-height: 41rpx;
color: #FFFFFF;
width: 41rpx;
text-align: center;
background: #F03B3B;
border-radius: 6rpx;
margin-top: 9rpx;
margin-left: 15rpx;
margin-right: 15rpx;
}
.bottom{
width: 750rpx;
height: 180rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 0px 0px;
position: fixed;
left: 0;
bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.signupBox{
background: #ffffff;
margin-top: 20rpx;
}
.seeBox{
display: flex;
flex-wrap: wrap;
padding-left: 24rpx;
padding-bottom: 20rpx;
}
.seeLine{
padding-top: 14rpx;
padding-right: 16rpx;
}
.signupLine{
display: flex;
justify-content: space-between;
padding: 11rpx 0;
border-bottom: 1px solid #DDDDDD;
}
.signupLineM{
color: #3C3C3C;font-size: 26rpx;
line-height: 56rpx;
}
.signupLineR{
color: #999999;
font-size: 26rpx;
line-height: 56rpx;
}
.signupLineLName{
font-weight: 400;
color: #3C3C3C;
font-size: 26rpx;
padding-left: 16rpx;
line-height: 56rpx;
width: 150rpx;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.signupCont{
padding: 0 24rpx;
}
.signupLineLImg{
width: 56rpx;
height: 56rpx;
border-radius: 8rpx;
}
.signupLineL{
display: flex;
}
.signupTop{
width: 750rpx;
height: 78rpx;
background: url(http://dmsphoto.66km.com.cn/thFiles/FF582E15-1971-4C04-8AB3-F7618FFB961D.png);
background-size: 100% 100%;
text-align: center;
line-height: 78rpx;
}
.signupTops1{
color: #FF0000;font-weight: 500;
font-size: 28rpx;
}
.signupTops1{
color: #703917;font-weight: 500;
font-size: 28rpx;
}
.shopRightIcon{
width: 44rpx;
height: 44rpx;
display: block;
margin: 0 auto;
margin-bottom: 10rpx;
}
.shopName{
color: #3C3C3C;
font-size: 28rpx;
width: 500rpx;
}
.shopaddress{
font-weight: 400;
color: #999999;
font-size: 24rpx;
padding-top: 10rpx;
width: 500rpx;
}
.shopRightSx{
width: 2rpx;
height: 69rpx;
background:#EEEEEE ;
margin-left: 34rpx;
margin-right: 34rpx;
margin-top: 14rpx;
}
.shopCont{
display: flex;
justify-content: space-between;
padding-top: 25rpx;
}
.shopContRight{
display: flex;
}
.shopContRightLine{
text-align: center;
color: #999999;
font-size: 24rpx;
}
.content{
min-height: 100vh;
background:#F4F5F7;
}
.detailImg{
width: 750rpx;
display: block;
}
.detailBOx{
background: #ffffff;
margin-top: 20rpx;
}
.detailTitle{
color: #222222;
font-weight: 500;
padding: 20rpx 24rpx;
font-size: 30rpx;
}
.topimg{
width: 750rpx;
}
.shopMs{
font-weight: 500;
color: #222222;
line-height: 42rpx;
font-size: 30rpx;
}
.shopBox{
background: #ffffff;
margin-top: 20rpx;
padding: 20rpx 24rpx;
}
.shopBoxTop{
display: flex;
justify-content: space-between;
}
.shopTy{
display: flex;
}
.shopTyTxt{
font-weight: 400;
color: #666666;
font-size: 24rpx;
line-height: 42rpx;
}
.shopjt{
width: 14rpx;
height: 23rpx;
margin-top: 10rpx;
margin-left: 10rpx;
}
.cont{
background: #ffffff;
border-radius: 24rpx 24rpx 0px 0px;
margin-top: -30rpx;
padding: 30rpx 24rpx;
position: relative;
}
.name{
color: #3C3C3C;
line-height: 42rpx;
font-weight: 500;
font-size: 30rpx;
}
.name2{
color: #3C3C3C;
line-height: 36rpx;
font-weight: 400;
font-size: 26rpx;
padding-top: 16rpx;
}
.name3{
color: #999999;
line-height: 36rpx;
font-weight: 400;
font-size: 26rpx;
padding-top: 16rpx;
}
.shopImg {
width: 146rpx;
height: 146rpx;
border-radius: 6rpx;
}
.shopBox2 {
padding-top: 30rpx;
display: flex;
}
.flex {
display: flex;
justify-content: space-between;
}
.shopCont2 {
padding-left: 22rpx;
width: 520rpx;
}
.shopName {
color: #333333;
font-size: 26rpx;
font-weight: 600;
}
.span1 {
color: #FF4F00;
font-size: 36rpx;
}
.span2 {
color: #FF4F00;
font-size: 22rpx;
}
.span3 {
color: #333333;
font-size: 22rpx;
padding-left: 22rpx;
}
.shopBq {
color: #FF4F00;
font-size: 22rpx;
border-radius: 4rpx;
border: 1px solid #FF4F00;
line-height: 30rpx;
height: 30rpx;
padding: 0rpx 5rpx;
margin-top: 10rpx;
}
.brandsBg {
display: flex;
height: 38rpx;
flex-wrap: wrap;
align-items: center;
overflow: hidden;
padding: 5rpx 0rpx;
}
.brands {
border-radius: 4rpx;
padding: 0 5rpx;
color: #F19D01;
height: 28rpx;
border: 1px solid #F19D01;
font-size: 20rpx;
line-height: 28rpx;
margin: 5rpx 10rpx 5rpx 0rpx;
}
.timeBg {
display: flex;
}
.shopTime {
color: #666666;
font-size: 22rpx;
}
.addressBox {
color: #666666;
font-size: 22rpx;
}
.ckshopLine{
display: flex;
padding: 20rpx 0;
border-bottom: 1px solid #EEEEEE;
}
button::after{
border: none;
}
button{
position: relative;
display: block;
margin-left: 0;
margin-right: 0;
padding-left: 0px;
padding-right: 0px;
box-sizing: border-box;
text-align: center;
text-decoration: none;
line-height: 1.35;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
color: #000000;
background-color: #fff;
height: 100%;
}
.authorizBox{
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
}
.authorizCont{
margin-top: 30vh;
width: 564rpx;
height: 408rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin-left: 93rpx;
position: relative;
}
.authorizCloseImg{
width: 62rpx;
height: 62rpx;
}
.sqLogoBox{
width: 180rpx;
height: 180rpx;
background: #FFFFFF;
border-radius: 90rpx;
text-align: center;
position: absolute;
top: -50rpx;
left: 192rpx;
}
.authorizName{
color: #333333;
line-height: 42rpx;
font-size: 30rpx;
text-align: center;
padding-top: 58rpx;
}
.authorizMs{
color: #999999;
line-height: 36rpx;
font-size: 26rpx;
width: 452rpx;
padding-top: 24rpx;
text-align: center;
margin-left: 56rpx;
}
.authorizContbutton{
width: 422rpx;
height: 88rpx;
background: #D53533;
border-radius: 44rpx;
line-height: 88rpx;
text-align: center;
font-size:30rpx;
color: #FFFFFF;
margin-top: 62rpx;
margin-left:71rpx;
}
.applicationTk{
height: 60vh;
}
.groupBtnTxt{
color: #FFFFFF;font-size: 26rpx;line-height: 26rpx;
}
.groupBtnTop{
font-weight: 500;font-size: 28rpx;
color: #FFFFFF;padding-top: 2rpx;
}
</style>