|
|
@@ -0,0 +1,975 @@
|
|
|
+<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="goodsName">{{info.name}}</view>
|
|
|
+ <view class="jfNumBox">
|
|
|
+ <span class="jfspan1">759</span> <span class="jfspan2">积分</span>
|
|
|
+ <span class="marketvalue">市场价 ￥893</span>
|
|
|
+ </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: 120rpx;padding-bottom: env(safe-area-inset-bottom)"></view>
|
|
|
+
|
|
|
+ <view class="bottomBox">
|
|
|
+ <view class="ktyong">可用 <span class="ktyong1">759</span><span class="ktyong2">积分</span> </view>
|
|
|
+ <view class="bottomBtn" @click="ljbuy">立即兑换</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="goodsPriceTk">
|
|
|
+ <view class="jfNumBox">
|
|
|
+ <span class="jfspan1">759</span> <span class="jfspan2">积分</span>
|
|
|
+ <span class="marketvalue">市场价 ￥893</span>
|
|
|
+ </view>
|
|
|
+ <view class="surplus">剩余999个</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">立即购买</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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userInfo:'',
|
|
|
+ goodsnum:1,
|
|
|
+ buyShow:true,
|
|
|
+ id:'',
|
|
|
+ info:'',
|
|
|
+ shopInfo:{
|
|
|
+ shopName:'',
|
|
|
+ shopId:''
|
|
|
+ },
|
|
|
+ authorizShow:false,
|
|
|
+ code:'',
|
|
|
+ wxOpenData:'',
|
|
|
+ ext:'',
|
|
|
+ categoryIds:'',
|
|
|
+ thenShow:false,
|
|
|
+ activityEnd:true,
|
|
|
+ shengyuD:1,
|
|
|
+ shengyuH:12,
|
|
|
+ shengyuM:21,
|
|
|
+ //snapup:
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.id=opt.id;
|
|
|
+ this.id='F58D6DEA-726A-4E28-93FA-EE6E5D6E3BDF'
|
|
|
+ //this.userInfo = uni.getStorageSync("userInfo");
|
|
|
+ this.userInfo=this.$store.state.userInfo;
|
|
|
+ this.ext=this.$common.getExtStoreId();
|
|
|
+ if(this.userInfo){
|
|
|
+ this.wxOpenData=this.$store.state.wxOpenData;
|
|
|
+ this.openGoodsDetailById();
|
|
|
+ }else{
|
|
|
+ this.$common.automaticlogin().then(val => {
|
|
|
+ this.userInfo=this.$store.state.userInfo;
|
|
|
+ this.wxOpenData=this.$store.state.wxOpenData;
|
|
|
+ this.openGoodsDetailById();
|
|
|
+ console.log(this.userInfo)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.shopInfo=this.$store.state.ckshopInfo;
|
|
|
+
|
|
|
+ //console.log(this.shopInfo)
|
|
|
+ },
|
|
|
+ onPullDownRefresh(){
|
|
|
+ this.openGoodsDetailById();
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.stopPullDownRefresh(); // 关闭下拉刷新
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ sharewx(){
|
|
|
+
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ 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.loginInfo){
|
|
|
+ this.userInfo=data.loginInfo.openUser;
|
|
|
+ this.wxOpenData=data.loginInfo;
|
|
|
+ this.$store.commit('mutationswxOpenData', data.loginInfo)
|
|
|
+ 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,
|
|
|
+ success(res){
|
|
|
+ uni.showToast({
|
|
|
+ title:'分享成功'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail(res){
|
|
|
+ uni.showToast({
|
|
|
+ title:'分享失败',
|
|
|
+ icon:'none',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ .surplus{
|
|
|
+ color: #FF0000;font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .ktyong{
|
|
|
+ line-height: 45px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ }
.ktyong1{
|
|
|
+ color: #FF0000;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .ktyong2{
|
|
|
+ color: #FF0000;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .jfspan1{
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF0000;
|
|
|
+ font-size:32rpx;
|
|
|
+ line-height: 45rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+ .jfspan2{
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FF0000;
|
|
|
+ font-size:24rpx;
|
|
|
+ line-height: 45rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ }
|
|
|
+ .marketvalue{
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ font-size:24rpx;
|
|
|
+ line-height: 45rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+.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: 750rpx;
|
|
|
+ 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;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ justify-content: space-between;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
+.bottomTxt{
|
|
|
+ color: #666666;font-size: 22rpx;
|
|
|
+}
|
|
|
+.bottomImg{
|
|
|
+ width: 48rpx;height: 48rpx;
|
|
|
+}
|
|
|
+.bottomImgBox{
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
+}
|
|
|
+.shareBtn{
|
|
|
+ width: 100rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+}
|
|
|
+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: 204rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: #D53533;
|
|
|
+ border-radius: 37rpx;
|
|
|
+ line-height: 74rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-top: 23rpx;
|
|
|
+ margin-left: 70rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+}
|
|
|
+.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>
|
