<template>
<view class="box">
<view class="spwBox">
<swiper class="swiper" circular :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
<swiper-item v-for="(item,index) in info.ImgList">
<view class="swiper-item">
<img mode="aspectFit" :src="item.url" alt="" class="swiper-itemImg" v-if="item.bizType==1">
<video :src="item.url" v-if="item.bizType==2" show-fullscreen-btn controls style="width: 100%;height: 100%;"></video>
</view>
</swiper-item>
</swiper>
</view>
<view class="shopCont">
<view class="shopCtop">
<view class="goodsPrice">
<view class="goodsPrice1" v-if="info.saleLabel">{{info.saleLabel}}</view>
<view class="goodsPrice2">￥</view>
<view class="goodsPrice3">{{info.salePrice?info.salePrice:info.scribingPrice}}
<span v-if="info.categoryIds=='7B97D114-C419-42B2-9C1E-0B4CA284CDA0'">万</span>
</view>
<view class="goodsPrice4" v-if="info.showLabel&&info.scribingPrice&&info.showLabel.indexOf('1')!=-1">￥{{info.scribingPrice}}</view>
</view>
<view class="Sold" v-if="info.showLabel&&info.showLabel.indexOf('3')!=-1">已售 {{info.saleQty>0?info.saleQty:0}}</view>
</view>
<view class="goodsName">{{info.name}}</view>
<view class="goodsMd" v-if="info.sellingPoint">{{info.sellingPoint}}</view>
</view>
<view class="modeBox">
<view class="modeline">
<view class="modelineLeft">配送方式</view>
<view class="modeLineRight">{{info.distributionType==1?'到店取货':'到店使用'}}</view>
</view>
<view class="modeline" v-if="info.oneQty">
<view class="modelineLeft">限购数量</view>
<view class="modeLineRight" >{{info.oneQty}}</view>
</view>
<view class="modeline" v-if="info.afterService">
<view class="modelineLeft">售后服务</view>
<view class="modeLineRight">{{info.afterService}}</view>
</view>
</view>
<!-- 服务流程 -->
<view class="fuwuliucBox" v-if="info.showLabel&&info.showLabel.indexOf('4')!=-1">
<view class="fwlcTitle">服务流程</view>
<view class="fwlcxian">
<view class="fwlcyuan"></view>
<view class="fwHx"></view>
<view class="fwlcyuan"></view>
<view class="fwHx"></view>
<view class="fwlcyuan"></view>
<view class="fwHx"></view>
<view class="fwlcyuan"></view>
</view>
<view class="fwTxt">
<view class="fwTxtline">选择商品</view>
<view class="fwTxtline">选择门店</view>
<view class="fwTxtline">在线支付</view>
<view class="fwTxtline">到店服务</view>
</view>
</view>
<!-- 套餐内容 -->
<view class="mealBox" v-if="info.bizType==3">
<view class="fwlcTitle">套餐内容</view>
<view class="mealLine" v-if="info.itemPackTimesDetails">
<view class="mealTop">
<view class="mealName">项目名称</view>
<view class="mealTopRight">
<view>数量</view>
<view style="padding-left: 60rpx;">有效期</view>
</view>
</view>
<view class="itemlinebOX">
<view class="itemline" v-for="(item,index) in info.itemPackTimesDetails">
<view class="itemname">{{item.flowName}}</view>
<view>{{item.flowQty}}</view>
<view class="expireNumber" v-if="item.expireNumber">{{item.expireNumber}}个月</view>
<view class="expireNumber" v-else>永久</view>
</view>
</view>
</view>
<view class="mealLine" v-if="info.goodsPackTimesDetails">
<view class="mealTop">
<view class="mealName">商品名称</view>
<view class="mealTopRight">
<view>数量</view>
<view style="padding-left: 60rpx;">有效期</view>
</view>
</view>
<view class="itemlinebOX">
<view class="itemline" v-for="(item,index) in info.goodsPackTimesDetails">
<view class="itemname">{{item.flowName}}</view>
<view>{{item.flowQty}}</view>
<view class="expireNumber" v-if="item.expireNumber">{{item.expireNumber}}个月</view>
<view class="expireNumber" v-else>永久</view>
</view>
</view>
</view>
</view>
<!-- 商品详情 -->
<view class="goodsDetail" v-if="info.details">
<view class="goodsDetailTitle">商品详情</view>
<!-- <view v-html="info.details" style="background: #fff;"></view> -->
<rich-text :nodes="info.details" style="background: #fff;"></rich-text>
</view>
<view style="height: 200rpx;padding-bottom: env(safe-area-inset-bottom)"></view>
<view class="bottomHz">
<view class="timeTbox" v-if="!activityEnd">
<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="timeTbox2" v-if="activityEnd"></view>
<view class="bottomBox">
<view class="bottomImgBox" @click="goINdex">
<image src="../../static/timg/home.png" mode="" class="bottomImg"></image>
<view class="bottomTxt">首页</view>
</view>
<view class="bottomImgBox" style="margin-left: 20rpx;" @click="sharewx">
<image src="../../static/timg/share.png" mode="" class="bottomImg"></image>
<view class="bottomTxt">分享</view>
</view>
<!-- <button open-type="share" class="bottomImgBox shareBtn" >
<image src="../../static/timg/share.png" mode="" class="bottomImg"></image>
<view class="bottomTxt">分享</view>
</button> -->
<view class="bottomBtn" :style="{background:'#'+themeColor}" @click="ljbuy" v-if="!activityEnd&&info.goodsDownTime">立即购买</view>
<view class="bottomBtn" :style="{background:'#'+themeColor}" @click="ljbuy" v-if="activityEnd&&!info.goodsDownTime">立即购买</view>
<view class="bottomBtn2" v-if="activityEnd&&info.goodsDownTime">抢购结束</view>
</view>
</view>
<!-- 立即购买 -->
<view class="buyBox" v-if="buyShow" @click="buyShow=false">
<view class="buyCont" @click.stop="">
<image src="../../static/timg/chahao.png" mode="" class="buyContCh" @click="buyShow=false"></image>
<view class="goodsBox">
<view class="hotGoodsLine" >
<view>
<image :src="info.ImgList[0].url" mode="" v-if="info.ImgList.length>0" class="hotGoodsLineImg"></image>
<image src="../../static/timg/noimg.png" class="hotGoodsLineImg" v-else></image>
</view>
<view class="hotGoodsLineRIght">
<view class="goodsName2">{{info.name}}</view>
<view class="Sold" v-if="info.showLabel&&info.showLabel.indexOf('3')!=-1">
已售 {{info.saleQty>0?info.saleQty:0}}</view>
<view class="goodsPrice">
<view class="goodsPrice11" v-if="info.saleLabel">{{info.saleLabel}}</view>
<view class="goodsPrice22">￥</view>
<view class="goodsPrice33">{{info.salePrice?info.salePrice:info.scribingPrice}}
<span v-if="info.categoryIds=='7B97D114-C419-42B2-9C1E-0B4CA284CDA0'">万</span>
</view>
<view class="goodsPrice44" v-if="info.showLabel&&info.scribingPrice&&info.showLabel.indexOf('1')!=-1">￥{{info.scribingPrice}}</view>
</view>
</view>
</view>
</view>
<view class="buyNumBox">
<view class="bugNUm">
<view class="bugNUmLeft">
<view class="buySl">数量</view>
<view class="buyXg" v-if="info.oneQty">限购{{info.oneQty}}件</view>
</view>
<view class="numJsbox">
<view class="numJj" @click="calculation(1)">-</view>
<view class="goodsnum">
<input type="number" value="" v-model="goodsnum" class="goodsnumInput"/>
</view>
<view class="numJj" @click="calculation(2)">+</view>
</view>
</view>
<view class="buySHop" @click="ckShop">
<view>服务门店</view>
<view class="buyShopRight" >
<view v-if="shopInfo.shopId">{{shopInfo.shopName}}</view>
<view v-else>请选择</view>
<image src="../../static/timg/icon_arrow_right.png" mode="" class="buyShopRightJt"></image>
</view>
</view>
</view>
<view class="buybtnBox">
<view class="buyBtn" @click="goBuy" :style="{background:'#'+themeColor}">立即购买</view>
</view>
</view>
</view>
<!-- 手机号授权 -->
<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
<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" mode="" class="authorizCloseImg"></image>
</view>
</view>
<!-- <view :style="{color:colorX}">asdfas</view> -->
<view class="shareBox" v-if="shareShow" @click="shareShow=false">
<img :src="shareQrCode" alt=""style="width: 300rpx;height:300rpx">
<view class="shareCont" @click.stop="">
<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>
</template>
<script>
export default {
components: {
},
data() {
return {
userInfo:'',
goodsnum:1,
buyShow:false,
id:'',
info:'',
shopInfo:{
shopName:'',
shopId:''
},
authorizShow:false,
code:'',
wxOpenData:'',
categoryIds:'',
thenShow:false,
activityEnd:true,
shengyuD:1,
shengyuH:12,
shengyuM:21,
shareShow:false,
ext:'',
shareId:'',
shareQrCode:'',
scene:'',
themeColor:'',
}
},
onLoad(opt) {
var ext=this.$common.getExtStoreId();
this.ext=ext
this.id=opt.id;
if(opt.shareId){
this.shareId=opt.shareId
}
//this.userInfo = uni.getStorageSync("userInfo");
this.userInfo=this.$store.state.userInfo;
this.ext=this.$common.getExtStoreId();
//opt.scene='10003'
console.log(opt)
if(this.userInfo){
this.themeColor = uni.getStorageSync("themeColor");
this.wxOpenData=this.$store.state.wxOpenData;
if(opt.scene&&opt.scene!='undefined'){
this.scene=opt.scene;
this.getShareParams()
}else{
this.openGoodsDetailById();
}
}else{
this.$common.automaticlogin().then(val => {
this.userInfo=this.$store.state.userInfo;
this.wxOpenData=this.$store.state.wxOpenData;
this.themeColor = uni.getStorageSync("themeColor");
if(opt.scene&&opt.scene!='undefined'){
this.scene=opt.scene;
this.getShareParams()
}else{
this.openGoodsDetailById();
}
})
}
},
onShow() {
this.shopInfo=this.$store.state.ckshopInfo;
//console.log(this.shopInfo)
},
onPullDownRefresh(){
this.openGoodsDetailById();
setTimeout(() => {
uni.stopPullDownRefresh(); // 关闭下拉刷新
}, 2000);
},
methods: {
getShareParams(){
this.$http('openMall/getShareParams', {
scene:this.scene,
},'GET').then(res => {
this.id=res.data.goodsID;
this.shareId=res.data.operatorID
this.openGoodsDetailById();
})
},
gowp(){
// uni.scanCode({
// success: function (res) {
// console.log('条码类型：' + res.scanType);
// console.log(res)
// }
// });
// return false
var time=''
if(this.info.goodsDownTime){
var time = this.info.createTime.slice(0,10) + '~' +this.info.goodsDownTime.slice(0,10)
}else{
}
this.shareShow=false;
uni.navigateTo({
url:'wp?img='+this.info.ImgList[0].url+'&name='+this.info.name+'&time='+time+'&sellingPoint'+this.info.sellingPoint+'&id='+this.id
})
},
sharewx(){
this.shareShow=true;
},
ckShop(){
uni.navigateTo({
url:'ckshopList?goodsId='+this.id
})
},
openGoodsDetailById(){
this.$http('openMall/openGoodsDetailById', {
id:this.id,
GoodsID:this.id,
},'GET').then(res => {
this.info=res.data;
if(this.info.details){
this.info.details = this.info.details.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
}
this.shopInfo='';
this.$store.commit('mutationsckshopInfo', '')
//this.szShop()
if(this.info.goodsDownTime){
if (Number(new Date().getTime()) > (Number(new Date(this.info.goodsDownTime.replace(/-/g, '/')).getTime()) || 0)) {
console.log("现在时间大于结束时间")
this.activityEnd = true
} else {
this.activityEnd=false;
//this.info.goodsDownTime="2022-08-18 11:57:00"
this.clock()
}
}
})
},
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.goodsDownTime.replace(/-/g, '/')) // 结束时间
if (Number(new Date().getTime()) >(Number(new Date(this.info.goodsDownTime.replace(/-/g, '/')).getTime()) || 0) ) {
this.activityEnd = true
return false;
}
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)
},
ljbuy(){
if(!this.userInfo){
this.authorizShow=true
}else{
this.buyShow=true
}
},
szShop(){
if(this.userInfo){
this.$http('openMall/openStoreList', {
goodsId:this.id,
// lat: '',
// lng: '',
}, 'GET').then(res => {
var queryShopList = res.data
//console.log('list+=', this.queryShopList);
queryShopList.forEach(item=>{
if(item.shopId==this.info.shopId){
var item={
shopId:this.info.shopId,
shopName:this.info.shopName
}
this.shopInfo=item
this.$store.commit('mutationsckshopInfo', item)
}
})
})
}
},
goINdex(){
uni.switchTab({
url:'../index/index'
})
},
goBuy(){
if(!this.shopInfo.shopId){
uni.showToast({
title: '请选择服务门店',
icon: 'none',
duration: 3000
});
return false;
}
var that=this;
uni.setStorage({
key: 'goodsDetail',
data: that.info,
success: function () {
uni.navigateTo({
url:'confirm?itemQty='+that.goodsnum+'&shopID='+that.shopInfo.shopId+'&shopName='+that.shopInfo.shopName+'&shareId='+that.shareId
})
}
});
},
calculation(type){
if(type==1){
if(this.goodsnum>1){
this.goodsnum--
}
}else{
console.log("+++")
if(this.info.oneQty!=null){
if(this.info.oneQty>this.goodsnum){
this.goodsnum++
}
}else{
this.goodsnum++
}
}
},
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.newCustomer){
uni.showModal({
title: '提示',
content: data.newCustomerMsg,
success: function(resTK) {
}
});
var token=res.data.token
data.loginInfo={}
data.loginInfo.token=token
this.$store.commit('mutationswxOpenData', data);
return false;
}
if(data.loginInfo){
this.userInfo=data.loginInfo.openUser;
this.wxOpenData=data.loginInfo;
this.$store.commit('mutationswxOpenData', data)
this.$store.commit('mutationsuserInfo', this.userInfo)
//this.szShop()
}
})
},
},
onShareAppMessage(res) {
var img='';
if(this.info.ImgList.length>0){
img=this.info.ImgList[0].url
}
return {
title: this.info.name,
imageUrl:img,
path: 'pages/shop/goodsDetail?id=' + this.id+'&shareId='+this.userInfo.openId,
success(res){
uni.showToast({
title:'分享成功'
})
},
fail(res){
uni.showToast({
title:'分享失败',
icon:'none',
duration: 3000
})
}
}
},
}
</script>
<style scoped lang="less">
.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;
}
.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;
}
.timeTbox2{
height: 60rpx;
}
.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;
}
.bottomHz{
width: 750rpx;
/* height: 180rpx; */
position: fixed;left: 0;
bottom: 0;
border-radius: 24rpx 24rpx 0px 0px;
}
.box{
background: #F4F5F7;
min-height: 100vh;
}
.buySHop{
display: flex;
justify-content: space-between;
font-size:28rpx ;
color: #666666;
padding-top: 30rpx;
}
.buybtnBox{
width: 750rpx;
height: 120rpx;
background: #FFFFFF;
box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.2000);
padding-top: 20rpx;
}
.buyBox{
width: 750rpx;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background: rgba(0,0,0,0.5);
}
.buyBtn{
width: 690rpx;
height: 74rpx;
background: #D53533;
border-radius: 37rpx;
text-align: center;
line-height: 74rpx;
color: #FFFFFF;
font-size: 30rpx;
margin-left: 30rpx;
}
.buyShopRightJt{
width: 12rpx;
height: 20rpx;
margin-top: 8rpx;
margin-left: 10rpx;
}
.buyShopRight{
display: flex;
}
.bugNUm{
border-top: 1px solid #EEEEEE;
border-Bottom: 1px solid #EEEEEE;
padding: 28rpx 0;
display: flex;
justify-content: space-between;
}
.buyXg{
width: 110rpx;
height: 36rpx;
border-radius: 4rpx;
border: 1px solid #F19D01;
text-align: center;
line-height: 36rpx;
color: #F19D01;
font-size: 24rpx;
}
.numJj{
width: 44rpx;
height: 44rpx;
background: #F4F5F7;
border-radius: 0px 6rpx 6rpx 0px;
text-align: center;
line-height: 44rpx;
font-size: 32rpx;
color: #999999;
}
.bugNUmLeft{
display: flex;
}
.buySl{
color: #666666;font-size: 28rpx;padding-right: 30rpx;
}
.goodsnum{
width: 88rpx;
height: 44rpx;
background: #F4F5F7;
line-height: 44rpx;
text-align: center;
font-weight: 500;
color: #333333;
font-size: 24rpx;
margin: 0 4rpx;
}
.goodsnumInput{
width: 88rpx;
height: 44rpx;
background: #F4F5F7;
line-height: 44rpx;
text-align: center;
font-weight: 500;
color: #333333;
font-size: 24rpx;
}
.numJsbox{
display: flex;
}
.buyCont{
position: absolute;
left: 0;
bottom: 0;
width: 750rpx;
height: 688rpx;
background: #FFFFFF;
border-radius: 26rpx 26rpx 0px 0px;
}
.buyNumBox{
padding: 30rpx;
padding-top: 10rpx;
padding-bottom: 70rpx;
}
.buyContCh{
position: absolute;
top: 53rpx;
right: 36rpx;
width: 36rpx;
height: 36rpx;
}
.hotGoodsLine{
margin-top: 30rpx;
padding: 20rpx;
background: #FFFFFF;
border-radius: 16rpx;
display: flex;
}
.hotGoodsLineImg{
width: 208rpx;
height: 194rpx;
border-radius: 16rpx;
border: 1px solid #EEEEEE;
}
.goodsName2{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 40rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 80rpx;
width: 370rpx;
}
.hotGoodsLineRIght{
padding-left: 24rpx;
}
.goodsPrice{
display: flex;
padding-top: 10rpx;
}
.goodsPrice11{
font-size: 24rpx;
font-weight: 400;
color: #FF0000;
padding-top: 8rpx;
padding-right: 10rpx;
}
.goodsPrice22{
font-size: 22rpx;
font-weight: 400;
color: #FF0000;
padding-top: 8rpx;
}
.goodsPrice33{
font-size: 32rpx;
font-weight: 500;
color: #FF0000;
}
.goodsPrice44{
font-size: 24rpx;
font-weight: 400;
color: #999999;
padding-top: 8rpx;
padding-left: 5rpx;
text-decoration:line-through;
}
.bottomBox{
width: 750px;
height: 120rpx;
background: #FFFFFF;
box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.2000);
padding-bottom: env(safe-area-inset-bottom);
background: #FFFFFF;
display: flex;
}
.bottomTxt{
color: #666666;font-size: 22rpx;
}
.bottomImg{
width: 48rpx;height: 48rpx;
}
.bottomImgBox{
text-align: center;
padding-top: 20rpx;
padding-left: 40rpx;
}
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;
// font-size: 18px;
text-align: center;
text-decoration: none;
// line-height: 1;
line-height: 1.35;
// border-radius: 5px;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
color: #000000;
background-color: #fff;
height: 100%;
}
.bottomBtn{
width: 450rpx;
height: 74rpx;
background: #D53533;
border-radius: 37rpx;
line-height: 74rpx;
text-align: center;
color: #FFFFFF;
font-size: 30rpx;
margin-top: 23rpx;
margin-left: 70rpx;
}
.bottomBtn2{
width: 450rpx;
height: 74rpx;
background: #DDDDDD;
border-radius: 37rpx;
line-height: 74rpx;
text-align: center;
color: #FFFFFF;
font-size: 30rpx;
margin-top: 23rpx;
margin-left: 70rpx;
}
.goodsDetailTitle{
color: #333333;
font-size: 30rpx;
font-weight: 500;
background: #FFFFFF;
padding: 20rpx 24rpx;
}
.goodsDetail{
margin-top: 20rpx;
padding-bottom: 30rpx;
background: #FFFFFF;
}
.goodsDetail img{
width: 750rpx;
}
.goodsDetail image{
width: 750rpx;
}
.mealBox{
background: #FFFFFF;
padding: 20rpx 24rpx;
margin-top: 20rpx;
}
.mealTopRight{
display: flex;
}
.mealLine{
margin-top: 20rpx;
}
.itemname{
width: 441rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.itemline{
display: flex;
padding: 10rpx 20rpx;
justify-content: space-between;
line-height: 37rpx;
font-size: 26rpx;
color: #333333;
}
.itemlinebOX{
border-radius: 0px 0px 10px 10px;
border: 2Rpx solid #EEEEEE;
padding: 10rpx 0;
}
.mealTop{
display: flex;
justify-content: space-between;
height: 72rpx;
background: #F19D01 linear-gradient(90deg, #FFF7EB 0%, #FFEFD5 100%);
border-radius: 10rpx 10rpx 0px 0px;
line-height: 72rpx;
color: #333333;
font-size: 26rpx;
padding: 0 20rpx;
}
.fwlcTitle{
color: #333333;font-size: 30rpx;font-weight: 500;
}
.fuwuliucBox{
background: #FFFFFF;
padding: 20rpx 24rpx;
margin-top: 20rpx;
}
.fwlcxian{
padding:30rpx 42rpx 10rpx 42rpx ;
display: flex;
}
.fwlcyuan{
width: 16rpx;
height: 16rpx;
background: #FF0000;
border-radius: 50%;
}
.fwHx{
height: 4rpx;
background: #FF0000;
width: 186rpx;
margin-top: 7rpx;
}
.fwTxt{
display: flex;
justify-content: space-between;
}
.fwTxtline{
color: #333333;
line-height: 37px;
font-size: 26rpx;
}
.swiper{
width: 750rpx;
height: 700rpx;
background: #FFFFFF;
border-bottom: 1px solid #EEEEEE;
}
.swiper-item{
width: 750rpx;
height: 700rpx;
}
.swiper-itemImg{
width: 750rpx;
height: 700rpx;
}
.shopCtop{
display: flex;
padding: 20rpx 24rpx;
justify-content: space-between;
background: #FFFFFF;
}
.goodsPrice{
display: flex;
}
.goodsPrice1{
font-size: 24rpx;
font-weight: 400;
color: #FF0000;
padding-top: 14rpx;
padding-right: 14rpx;
}
.goodsPrice2{
font-size: 28rpx;
font-weight: 400;
color: #FF0000;
padding-top: 10rpx;
}
.goodsPrice3{
font-size: 40rpx;
font-weight: 500;
color: #FF0000;
}
.goodsPrice4{
font-size: 24rpx;
font-weight: 400;
color: #999999;
padding-top: 14rpx;
text-decoration:line-through;
padding-left: 10rpx;
}
.Sold{
font-weight: 400;
color: #999999;
font-size: 24rpx;
padding-top: 18rpx;
}
.goodsName{
font-size: 30rpx;
line-height: 42rpx;
font-weight: 500;
color: #333333;
padding: 20rpx 24rpx;
padding-top: 0;
padding-bottom: 16rpx;
}
.goodsMd{
font-weight: 400;
color: #999999;
font-size: 26rpx;
padding: 0 24rpx;
padding-bottom: 20rpx;
}
.shopCont{
background: #FFFFFF;
}
.modeBox{
margin-top:20rpx ;
padding: 5rpx 0;
background: #FFFFFF;
}
.modeline{
display: flex;
padding: 15rpx 24rpx;
}
.modelineLeft{
color: #999999;
font-size: 26rpx;
width: 150rpx;
}
.modeLineRight{
color: #333333;
font-size: 26rpx;
width: 550rpx;
}
.expireNumber{
width: 110rpx;
text-align: right;
}
.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;
}
</style>