cf_cloud/shop_app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
shop_app/pages/groups/index.vue

5356 lines
144 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="whole" @touchmove="preventD">
<div v-if="loading_box" class="loadBox">
<div style="height: 430rpx;position: relative;"></div>
<div class="top_box">
<div class="top_box_left flex1">
<div class="imgs box"></div>
<div class="top_box_right">
<div class="li box"></div>
<view style="width: 10rpx;height: 10rpx;"></view>
<div class="li box"></div>
</div>
</div>
<div class="desc box"></div>
<div class="desc box"></div>
</div>
<div class="text_box">
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div style="height: 150rpx;" class="box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
<div class="text box"></div>
</div>
</div>
<template v-else>
<view class="goods">
<!-- 导航栏 -->
<view class="goods-bar" :style="{backgroundColor: 'rgba(255, 255, 255, ' + opacityStyle + ')', padding: statusBarHeight + 'px 15px 10px', height: statusBarHeight + 40 + 'px'}">
<view class="goods-bar-icon">
<view class="backBox flex">
<view class="back flex" @click="toBack('back')"><up-icon name="arrow-left" size="18" color="#333" /></view>
<zb-popover placement="bottom-start" :options="actions" @select="selectPop">
<view class="home"><up-icon name="list-dot" size="20" color="#333" /></view>
</zb-popover>
</view>
<!-- 店铺操作按钮 -->
<view class="shop-icon">
<!-- 收藏 -->
<view class="shop-icon-item flex" @click="handleCollection()">
<up-icon v-if="!is_collect" name="heart" size="20" />
<up-icon v-else name="heart-fill" size="20" :color="Color" />
</view>
<!-- 朋友圈 -->
<view class="shop-icon-item flex" @click="showImg = true">
<text class="iconfont icon-pengyouquan"></text>
</view>
<!-- 分享 -->
<button class="shop-icon-item flex" @click="handleShare()">
<text class="iconfont icon-share"></text>
</button>
</view>
</view>
</view>
<view class="tabsBox" v-if="showTabs" :style="{top: barHeight + 'px'}">
<view class="col" v-for="it in tabsList" :key="it.id" :class="it.id == tabVal ? 'active' : ''" @click="handleTabs(it.id, it.selector)">{{it.name}}</view>
</view>
<view class="oneBox">
<!-- 背景图 -->
<view class="goods-top">
<image :src="item.background_image || item.shop.background_image + '?x-oss-process=image/format,webp'" :webp="true" class="bgImg" mode="aspectFill"></image>
<view v-if="total > 0 && !hasRemove" class="broadcast animate" style="transition:opacity 1s ease-out;" :style="{opacity: opacity}">
<img style='width: 50rpx;height: 50rpx;border-radius: 50%;' :src="msg" />
<view class="broadcast-time">{{t}}跟团下单</view>
</view>
<view class="linear"></view>
</view>
<!-- 店铺信息 -->
<view class="vanBox">
<view class="shop_info">
<view class="one">
<view class="logobox">
<image class="img" :src="item.shop.logo" mode="aspectFill" @click="toPage('/pages/index/index')"></image>
<view class="name">{{item.shop.name}}<template v-if="item.shop.name_desc">&nbsp;{{item.shop.name_desc}}</template></view>
</view>
<view class="sub_box">
<view class="row">
<view class="row2" @click="toSubscribe()" v-if="!item.is_subscribe">
<up-icon name="plus" size="10" color="#fff" />&nbsp;<text>订阅</text>
</view>
<view class="row2 bai" @click="cancelSubscribe()" v-else>已订阅</view>
<view class="redBox" v-if="showPopOverRed">
<view class="img" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
<text>领红包</text>
</view>
</view>
<view style="width: 10rpx;height: 10rpx;"></view>
<view class="row row1" @click="openService()">
<text class="iconfont icon-msg"></text>&nbsp;<text>客服</text>
</view>
</view>
</view>
<template v-if="is_subscribe === 0">
<div style="padding: 20rpx 0 0;" v-if="closure">
<div class="guanzhu flex1">
<div class="txt">关注公众号接收最新开团消息</div>
<div class="anniu" @click="followSubscribe()">关注</div>
<div class="chacha" @click="closure = false">
<up-icon name="close" size='15' />
</div>
</div>
</div>
</template>
<view class="desc" v-if="item.shop.describe">{{item.shop.describe}}</view>
<view class="vip_desc" v-if="vip_on === 0 && score_on === 0" @click="showDirect = true">
<view class="tit"><up-icon name="level" size="16" color="#A3A3A3" />&nbsp;合作商直销</view>
<view class="text">快递发货<up-icon name="arrow-right" color="#D3D3D3" /></view>
</view>
<view class="vip_desc er" v-if="vip_on === 1 || score_on === 1">
<view class="tit" @click="to_VipPage()" v-if="vip_on === 1">
<view style="display: flex;"><view class="hg" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>会员权益</view>
<up-icon name="arrow-right" size="14" color="#D3D3D3" />
</view>
<view class="tit" @click="toPage('/pages/mine/scoreShop/index', 1)" v-if="score_on === 1" :class="vip_on === 1 ? 'score' : ''">
<view style="display: flex;">
<text class="iconfont icon-score" style="font-size: 16px;color: #A3A3A3;"></text>&nbsp;积分商城
</view>
<up-icon name="arrow-right" size="14" color="#D3D3D3" />
</view>
<view class="tit score" @click="showDirect = true">
<view style="display: flex;"><up-icon name="level" size="16" color="#A3A3A3" />&nbsp;合作商直销</view>
<up-icon name="arrow-right" size="14" color="#D3D3D3" />
</view>
</view>
</view>
<view class="new_person" v-if="item.shop && item.shop.extendInfo && item.shop.extendInfo.new_user_ad_banner_url && item.shop.extendInfo.new_user_ad_banner_link && !userInfo.is_purchase">
<image :src="item.shop.extendInfo.new_user_ad_banner_url" mode="widthFix" @click="toPage(item.shop.extendInfo.new_user_ad_banner_link, item.shop.extendInfo.new_user_ad_banner_link.indexOf('index/index') > -1 ? 0 : 1)"></image>
</view>
</view>
<view class="empty" v-if="hasRemove">
<up-empty mode="data" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="该团购已经删除"></up-empty>
</view>
<template v-if="!hasRemove">
<!-- 团购信息 -->
<view class="goods-info">
<text class="description" :class="fontSize == 'small' ? '' : 'large'" user-select v-if="item.description">{{item.description}}</text>
<template v-if="item.group_goods.length">
<view class="vip_advert" v-if="vip_on == 1 && !is_vip" @tap="to_VipPage">
<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/05/26/bACLVRl4jIRw77jmz3Mg3Uz64sYk3sR3OR8Ms9l5.png" alt="" class='vip_advert_img'>
</view>
<view class="item" @click="jumpFloor" v-if="item.types.length < 5" :class="vip_on == 1 && !is_vip ? '' : 'martop'">
<view class="left">
<text>本团</text>
<text>商品</text>
</view>
<view class="right" @click="jumpFloor">
<block v-for="(goods, index) in item.group_goods" :key="goods.id">
<view class="right-item" :class="goodsClass" v-if="index < 15">
<image :src="goods.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill"></image>
<view class="right-text">
<view class="text">{{goods.title}}</view>
<view class="vip">
<view v-if="item.group_goods.length == 1" style="display: flex;white-space: nowrap;align-items: center;">
<!-- 仅显示普通价格：
开启会员功能&&会员价大于0时：1、非会员&&不隐藏会员价&&多商品；2、非会员&&隐藏会员价
未开启会员&&没有会员价
-->
<template v-if="vipOn && goods.vip_price > 0 && !is_vip && ((vip_price_show && goods.specs_type !== 0) || !vip_price_show)">
<div class="">
<text class="icon">￥</text>
<text v-if="goods.specs_type === 0">{{goods.price}}</text>
<text v-else>
<text v-if="goods.max_price === goods.min_price">{{goods.min_price}}</text>
<text v-else>{{goods.min_price}}<text class="st">起</text></text>
</text>
</div>
</template>
<template v-else-if="!vipOn || !goods.vip_price">
<div>
<text class="icon">￥</text>
<text v-if="goods.specs_type === 0">{{goods.price}}</text>
<text v-else>
<text v-if="goods.max_price === goods.min_price">{{goods.min_price}}</text>
<text v-else>{{goods.min_price}}<text class="st">起</text></text>
</text>
</div>
</template>
<!-- 仅显示会员价：
开启会员功能&&会员价大于0&&是会员&&多商品
-->
<template v-else-if="vipOn && goods.vip_price > 0 && is_vip && goods.specs_type !== 0">
<view class="vip-tag"><text>会员价&nbsp;￥</text>{{goods.vip_price}}</view>
</template>
<!-- 显示会员价与普通价格：
开启会员功能&&会员价大于0&&（（是会员&&单商品）|| （非会员&&显示会员价&&单商品））
-->
<template v-else-if="vipOn && goods.vip_price > 0 && ((is_vip && goods.specs_type === 0) || (!is_vip && vip_price_show && goods.specs_type === 0))">
<div class="black" style="margin-right: 10rpx;">
<text class="icon">￥</text>
<text v-if="goods.specs_type === 0">{{goods.price}}</text>
<text v-else>
<text v-if="goods.max_price === goods.min_price">{{goods.min_price}}</text>
<text v-else>{{goods.min_price}}<text class="st">起</text></text>
</text>
</div>
<view class="vip-tag"><text>会员价&nbsp;￥</text>{{goods.vip_price}}</view>
</template>
<template v-else>
<div class="" style="display: inline-block;">
<text class="icon">￥</text>
<text v-if="goods.specs_type === 0">{{goods.price}}</text>
<text v-else>
<text v-if="goods.max_price === goods.min_price">{{goods.min_price}}</text>
<text v-else>{{goods.min_price}}<text class="st">起</text></text>
</text>
</div>
</template>
</view>
<view v-else style="display: flex;white-space: nowrap;align-items: center;">
<!-- 仅显示普通价格：
开启会员功能&&会员价大于0时：1、非会员&&不隐藏会员价&&多商品；2、非会员&&隐藏会员价
未开启会员&&没有会员价
-->
<template v-if="vipOn && goods.vip_price > 0 && !is_vip && ((vip_price_show && goods.specs_type !== 0) || !vip_price_show)">
<text class="icon">￥</text>
<text v-if="goods.specs_type === 0">{{goods.price}}</text>
<text v-else>
<text v-if="goods.max_price === goods.min_price">{{goods.min_price}}</text>
<text v-else>{{goods.min_price}}<text class="st">起</text></text>
</text>
</template>
<template v-else-if="!vipOn || !goods.vip_price">
<text class="icon">￥</text>
<text v-if="goods.specs_type===0">{{goods.price}}</text>
<text v-else>
<text v-if="goods.max_price === goods.min_price">{{goods.min_price}}</text>
<text v-else>{{goods.min_price}}<text class="st">起</text></text>
</text>
</template>
<!-- 仅显示会员价：
开启会员功能&&会员价大于0&&是会员&&多商品
-->
<template v-else-if="vipOn && goods.vip_price > 0 && is_vip && goods.specs_type !== 0">
<text>￥{{goods.vip_price}}</text>
</template>
<!-- 显示会员价与普通价格：
开启会员功能&&会员价大于0&&（（是会员&&单商品）|| （非会员&&显示会员价&&单商品））
-->
<template v-else-if="vipOn && goods.vip_price > 0 && ((is_vip && goods.specs_type === 0) || (!is_vip && vip_price_show && goods.specs_type === 0))">
<div class="black" style="margin-right: 10rpx;">
<text class="icon">￥</text>
<text v-if="goods.specs_type === 0">{{goods.price}}</text>
<text v-else>
<text v-if="goods.max_price === goods.min_price">{{goods.min_price}}</text>
<text v-else>{{goods.min_price}}<text class="st">起</text></text>
</text>
</div>
<view class="vip-tag"><text>会员价&nbsp;￥</text>{{goods.vip_price}}</view>
</template>
<template v-else>
<text class="icon">￥</text>
<text v-if="goods.specs_type === 0">{{goods.price}}</text>
<text v-else>
<text v-if="goods.max_price === goods.min_price">{{goods.min_price}}</text>
<text v-else>{{goods.min_price}}<text class="st">起</text></text>
</text>
</template>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
</template>
<view class="rankBox flex1"
v-if="item.shop && item.shop.extendInfo && item.shop.extendInfo.top_of_shop_group_goods && item.top_on_shop_group && item.top_on_shop_group.shop_group"
@click="toPage('/pages/mine/other/ranking?id=' + item.top_on_shop_group.shop_group_id, 1)">
<view class="text flex">
<view class="icon" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>&nbsp;{{item.top_on_shop_group.shop_group.name}}热销榜&nbsp;&nbsp;&nbsp;<text>第{{item.top_on_shop_group.sort}}名</text>
</view>
<up-icon name="arrow-right" color="#999" />
</view>
<template v-if="item.status !== 3 && item.group_goods.length">
<view class="time">
<view class="time-item" style="display: flex; align-items: center;">
<text class="title" style="padding: 0;">{{item.created_at}} 发布</text>
<text class="boder"></text>
<view class="text" v-if="endtime">
<up-count-down use-slot :time="endtime" @change="offTimeChange" @finish="offtimeFinish">
<text>距下架还剩</text>
<text v-if="offtimeData.days > 0">{{ offtimeData.days }}天</text>
<text>{{ offtimeData.hours }}时</text>
<text>{{ offtimeData.minutes }}分</text>
<text>{{ offtimeData.seconds }}秒</text>
</up-count-down>
</view>
<!-- <view class="text" v-if="item.sold_status === 0 && startTime">
距开始<up-count-down :color1="Color" format="DD天HH:mm:ss" :time="startTime" />
</view> -->
<view class="text" v-if="item.sold_status === 0 && startTime">
<text>{{parseTime(item.sold_start_time)}}开团</text>
</view>
</view>
<view class="time-item" v-if="is_show_sales">
<text class="title">{{item.visitor * 1 + item.virtual_visitor * 1}}人查看</text>
<text class="boder"></text>
<text>{{total}}次跟团</text>
</view>
<view class="red_label" v-if="item.red_status === 1">
<template v-if="item.is_receive_red">
<view class="red_col red_col1">本团专享红包{{item.red_amount}}元</view>
<view class="red_col red_col2 disable">已领</view>
</template>
<template v-else-if="item.is_red_could_receive">
<view class="red_col red_col1 receive1">本团专享红包{{item.red_amount}}元</view>
<view class="red_col red_col2 receive2" @click="receiveRed()">领取</view>
</template>
</view>
<view class="couBox">
<view class="itm" v-for="it in groupCoupons" :key="it.id">
<view class="sign flex">￥<text class="money">{{it.amount * 1}}</text></view>
<view class="mid">
<view v-if="it.scene_type == 2" class="tit">新人劵减{{it.amount * 1}}元</view>
<template v-else>
<view class="tit" v-if="it.type == 13">满{{it.full_amount * 1}}元立减{{it.amount * 1}}</view>
<view class="tit" v-else>无门槛</view>
</template>
<text>领取后{{it.valid_days}}天内有效</text>
</view>
<template v-if="it.scene_type == 2">
<template v-if="it.receive_coupon_type">
<view class="recv flex" v-if="it.user_coupon_status == 1" @click="jumpFloor(0)">去使用</view>
<button open-type="share" id="invite" class="recv flex" v-else>去邀请</button>
</template>
<view v-else class="recv flex" @click="recvCoupon(it)">领取</view>
</template>
<template v-else>
<view class="recv flex" v-if="it.receive_coupon_type" @click="jumpFloor(0)">去使用</view>
<view class="recv flex" v-else @click="recvCoupon(it)">领取</view>
</template>
</view>
</view>
</view>
</template>
<view class="new_person" v-if="is_crop_user && crop_user_img">
<image :src="crop_user_img" mode="widthFix" @click="toPage('/pages/mine/aboutUs/service', 1)"></image>
</view>
</view>
</template>
</view>
<template v-if="!hasRemove">
<!-- 简单编辑器 -->
<view class="edition good-detail" id="goodDetail">
<template v-for="itm in textModules" :key="itm.id">
<view class="edition_box" :class="item.pic_padding_type ? '' : 'verbtm'" v-if="itm.type == 1 && (is_crop_user || (!is_crop_user && !itm.only_crop))">
<template v-for="(imgs, index) in itm.imgs" :key="index">
<image :src="imgs + '?x-oss-process=image/format,webp'" :webp="true" mode="widthFix" style="width:100%;" @click="preViewImg(imgs, $event)" :lazy-load="true"></image>
</template>
</view>
<view class="edition_box" v-if="itm.type == 2 && (is_crop_user || (!is_crop_user && !itm.only_crop))">
<view class="small_img">
<view v-for="(it, index) in itm.img" :key="index" class="imgs">
<image :src="it + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" @click="viewSmallImg(itm.img, it)"></image>
</view>
</view>
</view>
<view class="edition_box" v-if="itm.type == 3 && (is_crop_user || (!is_crop_user && !itm.only_crop))" @longpress="showSaveVideo(itm.video_convert || itm.video[0])">
<view class="background flex">
<up-icon name="play-right-fill" size="42" color="#fff" @click="viewVideo(itm.video_convert || itm.video[0], $event)" />
</view>
<image :src="itm.video_img" mode="widthFix" style="width:100%"></image>
</view>
<view class="edition_box text1_box" :class="fontSize == 'small' ? '' : 'large'" v-if="itm.type == 4 && (is_crop_user || (!is_crop_user && !itm.only_crop))">
<rich-text :nodes="parseText(itm.text)" :user-select="true"></rich-text>
</view>
<view class="baseInfo" v-if="itm.type == 5 && (is_crop_user || (!is_crop_user && !itm.only_crop))" :class="fontSize == 'small' ? '' : 'large'">
<view class="tit"><up-icon name="grid" size="22" :color="Color" />&nbsp;&nbsp;基础信息</view>
<view>
<view class="row" v-if="itm.spmc"><view class="txt"><view class="span">商品名称</view></view><text>{{itm.spmc}}</text></view>
<view class="row" v-if="itm.spgg"><view class="txt"><view class="span">商品规格</view></view><text>{{itm.spgg}}</text></view>
<view class="row" v-if="itm.plb"><view class="txt"><view class="span">配料表</view></view><text>{{itm.plb}}</text></view>
<view class="row" v-if="itm.yfyl"><view class="txt"><view class="span">用法用量</view></view><text>{{itm.yfyl}}</text></view>
<view class="row" v-if="itm.cz"><view class="txt"><view class="span">材质</view></view><text>{{itm.cz}}</text></view>
<view class="row" v-if="itm.scrq"><view class="txt"><view class="span">生产日期</view></view><text>{{itm.scrq}}</text></view>
<view class="row" v-if="itm.bzq"><view class="txt"><view class="span">保质期</view></view><text>{{itm.bzq}}</text></view>
<view class="row" v-if="itm.cd"><view class="txt"><view class="span">产地</view></view><text>{{itm.cd}}</text></view>
<view class="row" v-if="itm.fhd"><view class="txt"><view class="span">发货地</view></view><text>{{itm.fhd}}</text></view>
<view class="row" v-if="itm.fhwl"><view class="txt"><view class="span">发货物流</view></view><text>{{itm.fhwl}}</text></view>
<view class="row" v-if="itm.bfhqy"><view class="txt"><view class="span">不发货区域</view></view><text>{{itm.bfhqy}}</text></view>
<view class="row" v-if="itm.jyfqy"><view class="txt"><view class="span">加运费区域</view></view><text>{{itm.jyfqy}}</text></view>
<view class="row" v-if="itm.fhsx"><view class="txt"><view class="span">发货时效</view></view><text>{{itm.fhsx}}</text></view>
<view class="row" v-if="itm.shzc"><view class="txt"><view class="span">售后政策</view></view><text>{{itm.shzc}}</text></view>
</view>
</view>
<view class="lightBox" v-if="itm.type == 6 && itm.text && (is_crop_user || (!is_crop_user && !itm.only_crop))" :class="fontSize == 'small' ? '' : 'large'">
<view class="tit"><text class="iconfont icon-lighting"></text>&nbsp;&nbsp;温馨提示</view>
<view class="txt">
<rich-text :nodes="parseText(itm.text)" :user-select="true"></rich-text>
</view>
</view>
</template>
</view>
<!-- 团购商品 -->
<view class="goods-group" id="goodsGroup" v-if="item.types.length > 0">
<view class="tit_msg">本团商品
<template v-if="item.limit_type === 1">{{item.start_sale_num}}件起购</template>
<template v-if="item.limit_type === 2">限购{{item.limit}}件</template>
<template v-if="item.actives && item.actives.length">
<view v-for="(it, i) in item.actives" class="move_img" :key="i">{{it.name}}</view>
</template>
</view>
<view class="bbox" ref="container" id="container" :class="item.types.length > 4 ? 'shux' : ''">
<view class="left" :class="item.types.length > 4 ? 'shux' : ''" v-if="item.types.length > 1">
<view class="typeBox" :class="item.types.length > 4 ? 'shux' : ''" :style="{'top': showGroups ? (statusBarHeight + 77) + 'px' : '37px'}">
<block v-for="(t_item, t_index) in item.types" :key="t_item.id">
<view
v-if="t_item.list && t_item.list.length > 0"
class="col"
:class="typeId === t_item.id ? 'active' : ''"
@click="changeType(t_item.id)">
{{t_item.name}}
</view>
</block>
</view>
</view>
<view class="goodBox" :class="item.types.length > 4 ? 'shux' : ''">
<view v-for="(t_item, i) in item.types" :key="t_item.id" :class="'group' + t_item.id">
<up-sticky :id="t_item.id" @scroll="changeTest" :z-index="i + 1" :offset-top="barHeight + 37"
v-if="item.types.length > 1 && t_item.id > 0 && t_item.list && t_item.list.length > 0">
<view class="goods-group-name">{{t_item.name}}</view>
</up-sticky>
<block v-for="goods in t_item.list" :key="goods.id">
<view class="goods-item" v-if="t_item.id > 0 || showZero">
<template v-if="goods.specs_type === 1">
<view class="left" @click="getGoodsSkus(goods)">
<view class="tip" v-if="goods.goods.stock <= 0">已抢光</view>
<image class="img" :src="goods.face_img" mode="aspectFill"></image>
</view>
</template>
<template v-else>
<view class="left" @click="can_buy ? getGoodsSkus1(goods) : ''">
<view class="tip" v-if="goods.goods.stock <= 0">已抢光</view>
<image class="img" :src="goods.face_img" mode="aspectFill"></image>
<view class="tag" v-if="goods.goods.is_gift == 1">赠品</view>
</view>
</template>
<view class="right">
<view @click="getGoodsSkus(goods)">
<view class="title" :class="fontSize == 'small' ? '' : 'large'">
<view class="kuajing" v-if="goods.goods.is_cross_border === 1">跨境包税</view>
<view class="kuajing" v-else-if="goods.goods.overseas_direct_mail === 1">海外直邮</view>{{goods.title}}
</view>
<view>
<span v-if="goods.goods.limit_type == 1" class="box_number1">{{goods.goods.start_sale_num}}件起购</span>
<span v-if="goods.goods.limit_type == 2" class="box_number1">限购{{goods.goods.limit}}件</span>
</view>
<view style="display: flex;align-items: center;justify-content: space-between;padding: 10rpx 0;">
<span class="tites" v-if="show_stock === 1">库存：{{goods.goods.stock <= 0 ? 0 : goods.goods.stock}}</span>
<text class="total" v-if="is_show_sales && item.copy_shared_on === 0">已团{{goods.sales + (goods.goods.virtual_sales * 1)}}</text>
<text class="total" v-if="is_show_sales && item.copy_shared_on === 1">已团{{goods.goods.sales + (goods.goods.virtual_sales * 1)}}</text>
</view>
</view>
<view style="display: flex;align-items: center;justify-content: space-between;">
<view style="display: flex;align-items: center;flex-wrap: wrap;">
<!-- 会员下普通价格 -->
<view class="text text2" v-if="vipOn && goods.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))">
<view class="price">
<text class="icon">￥</text>
<text v-if="goods.specs_type === 0">{{goods.price * 1}}</text>
<text v-else>
<text v-if="goods.max_price === goods.min_price">{{goods.min_price * 1}}</text>
<text v-else>{{goods.min_price * 1}}<text class="st">起</text></text>
</text>
</view>
</view>
<view class="text">
<!-- 显示会员价 -->
<view v-if="vipOn && goods.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))" class="vip">
<!-- <view class="price">
<text><text class="icon">￥</text>{{goods.vip_price}}</text>
</view>
<text class="vip-tag" v-if="vipOn && goods.vip_price > 0 && vip_price_show">会员价</text> -->
<view class="vip-tag"><text>会员价&nbsp;￥</text>{{goods.vip_price * 1}}</view>
</view>
<!-- 显示普通价格 -->
<view v-else class="vip">
<view class="price">
<text class="icon">￥</text>
<text v-if="goods.specs_type === 0">{{goods.price * 1}}</text>
<text v-else>
<text v-if="goods.max_price === goods.min_price">{{goods.min_price * 1}}</text>
<text v-else>{{goods.min_price * 1}}<text class="st">起</text></text>
</text>
</view>
</view>
</view>
</view>
<template v-if="goods.show2 && goods.goods.is_gift == 0">
<text class="right1" :class="(goods.goods.stock <= 0 || !can_buy) ? 'dis' : ''"
v-if="item.status !== 3 && item.sold_status !== 2"
@click="(goods.goods.stock > 0 && can_buy) ? getGoodsSkus(goods) : ''">加入购物车</text>
</template>
<template v-if="goods.show1 && goods.goods.is_gift == 0">
<up-number-box
v-model="goods.num"
:min="goods.goods.limit_type == 1 ? parseInt(goods.goods.start_sale_num) : goods.goods.limit_type == 0 ? 1 : 1"
:max="goods.goods.limit_type == 2 ? parseInt(goods.goods.limit) : goods.goods.limit_type == 0 ? (goods.goods.stock <= 0 ? 0 : goods.goods.stock) : 0"
@overlimit="plusBtn(goods.goods.limit_type == 1 ? 0 : goods.goods.limit_type == 2 ? 1 : 2, goods.num, goods.goods.limit, (goods.goods.stock <= 0 ? 0 : goods.goods.stock))"
disabledInput
bgColor="#f2f3f5"
:longPress="false"
:asyncChange="true"
@change="changeNumOne($event, goods)">
</up-number-box>
</template>
</view>
</view>
</view>
</block>
</view>
<view class="goods-group-more" v-if="zeroList.length > 0" @click="showZero = !showZero">
<text v-if="showZero">收起全部</text>
<text v-else>有{{zeroList.length}}款商品被抢光，点击查看</text>
<up-icon :name="showZero ? 'arrow-up' : 'arrow-down'" />
</view>
</view>
</view>
</view>
<view class="supplyBox" v-if="item.service_provider">
<image :src="item.service_provider.logo" mode="aspectFill" @click="showDirect = true"></image>
<view class="text" @click="showDirect = true">
<view class="tit">{{item.service_provider.name}}</view>
<view class="num" v-if="item.service_provider.sub_num"><text>{{item.service_provider.sub_num}}万</text>人关注</view>
</view>
<view class="shouc" @click="collectShop()">
<template v-if="collect_shop[item.service_provider.id]">
<up-icon name="star-fill" :color="Color" />
<text>已关注</text>
</template>
<template v-else>
<up-icon name="star" :color="Color" />
<text>关注店铺</text>
</template>
</view>
</view>
<!-- 评价 -->
<view class="commentBox" v-if="commentTotal > 0">
<view class="toptitle">
<text class="num">宝贝评价({{commentTotal}})</text>
<view class="more" @click="toPage(`/pages/groups/comment?id=${item.id}&is_show_sales=${is_show_sales}`, 1)">
好评率{{goodCommentRate}}<up-icon name="arrow-right" color="#444" size="14" />
</view>
</view>
<view class="commentlist">
<view class="item" v-for="itm in commentList" :key="itm.id">
<view class="itemtop">
<view class="user">
<image :src="itm.user.avatar" class="avatar"></image>
<view class="right">
<view>
<text class="name">{{itm.user && itm.user.nickname}}</text>
<text class="border">已购{{itm.report && itm.report.total_trade_count}}次</text>
</view>
<view class="rate">
<view class="star" v-for="i in 5" :key="i">
<up-icon v-if="i <= Math.ceil(itm.stars)" name="star-fill" color="#FFD81E" size="14" />
<up-icon v-else name="star" color="#ccc" size="14" />
</view>
</view>
</view>
</view>
<view class="date">{{itm.date.replace(/-/g, '/')}}发布于{{provTxt[itm.order.province_id]}}</view>
</view>
<view v-if="itm.item.sku_name" style="font-size: 24rpx;color: #999;margin-top: 16rpx;">
规格：{{itm.item.sku_name}}
</view>
<view class="text">{{itm.comment}}</view>
<div class="box_zong" v-if="itm.material.length">
<view class="box_imgs" v-for="(it, index) in itm.material" :key="index">
<div v-show="index < 3">
<image :src="it.url" mode="aspectFill" v-if="it.type === 1" @click="hanleImgs(it, itm.material)"></image>
</div>
</view>
</div>
</view>
</view>
</view>
<div class="recomBox" v-if="recommendGroup.length && item.status === 1 && item.sold_status !== 2">
<view class="title">团购推荐</view>
<up-scroll-list :indicatorActiveColor="Color">
<div class="row" v-for="(item, index) in recommendGroup" :key="index" @click="toPage('/pages/groups/index?id=' + item.id, 1)">
<image :src="item.face_img" mode="aspectFill" class="img"></image>
<div class="tit">{{item.title}}</div>
<div class="price">
<text class="icon">￥</text>
<block v-if="item.group_goods.length === 1">
<text v-if="item.group_goods[0].specs_type === 0">{{item.group_goods[0].price}}</text>
<text v-else>
<text v-if="item.group_goods[0].max_price === item.group_goods[0].min_price">{{item.group_goods[0].min_price * 1}}</text>
<text v-else>{{item.group_goods[0].min_price * 1}}~{{item.group_goods[0].max_price * 1}}</text>
</text>
</block>
<block v-else>
<text v-if="item.max_price === item.min_price">{{item.min_price * 1}}</text>
<text v-else>{{item.min_price * 1}}~{{item.max_price * 1}}</text>
</block>
</div>
</div>
</up-scroll-list>
</div>
<!-- 跟团记录 -->
<view class="goods-record" v-if="total > 0" id="record">
<view class="title">跟团记录</view>
<view class="list">
<view class="item" v-for="(item, index) in buyList" :key="item.id">
<text class="id" v-if="is_show_sales">{{total - index}}</text>
<image v-if="item.user" :src="item.user.avatar"></image>
<view class="text">
<view class="">{{item.buy_time}}<text class="border" v-if="item.purchase_count * 1 > 1">购买{{item.purchase_count }}次</text></view>
<view class="bottom">
<view class="name">
<text>{{item.goods_name}}</text>
<text v-if="item.sku_name">（{{item.sku_name}}）</text>
</view>
<text class="num">{{' +' + item.number}}</text>
</view>
</view>
</view>
</view>
<view class="more" v-if="page < lastPage" @click="moreRecord">查看更多<up-icon name="arrow-down" /></view>
</view>
<view style="height: 30rpx;"></view>
<cf-cloud></cf-cloud>
<view class="payTips" v-if="(endtime && offtimeData.days == 0) || (item.limit_type == 1 && cartNum < item.start_sale_num && cartNum > 0)">
<swiper class="swiper" :autoplay="true" :interval="5000" :duration="500" :indicator-dots="false" :circular="true" :vertical="true">
<swiper-item v-if="endtime && offtimeData.days == 0">
<view class="timeTips flex">
<up-icon name="clock-fill" color="#f66d2d" />&nbsp;
<up-count-down use-slot :time="endtime">
<text>距下架还剩</text>
<text>{{ offtimeData.days }}天</text>
<text>{{ offtimeData.hours }}时</text>
<text>{{ offtimeData.minutes }}分</text>
<text>{{ offtimeData.seconds }}秒</text>
</up-count-down>
</view>
</swiper-item>
<swiper-item v-if="item.limit_type == 1 && cartNum < item.start_sale_num && cartNum > 0">
<view class="timeTips flex">
<up-icon name="bell-fill" color="#f66d2d" />&nbsp;
<text>尚未满足起购件数，{{item.start_sale_num}}件起购</text>
</view>
</swiper-item>
</swiper>
</view>
<view class="goods-btn">
<view class="goods-btn-icon" @click="toPage('/pages/index/index')">
<up-icon name="home" size="22" />
<view>首页</view>
</view>
<view class="goods-btn-icon" @click.stop="openService()">
<up-icon name="kefu-ermai" size="22" />
<view>客服</view>
<view class="addtip" v-if="item.add_cs_tips">
<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/07/zbR6z0xICjDKjWEcGwTUHBKPTiQZ9dDLfU8eFmTy.png" mode="aspectFit" class="hand"></image>
<view class="txt">{{item.add_cs_tips}}</view>
<view class="cross flex" @click.stop="item.add_cs_tips = ''">
<up-icon name="close" size="20" color="#999" />
</view>
</view>
</view>
<view class="goods-btn-icon" @click="openCart()">
<view class="badge" v-if="number">{{number}}</view>
<up-icon name="shopping-cart" size="24" />
<view>购物车</view>
</view>
<template v-if="item.group_goods.length !== 0">
<!-- 开团中-（开团、隐藏） -->
<view class="btn" :class="can_buy ? '' : 'disabled'" @click="can_buy ? toPay() : ''" v-if="item.status !== 3 && item.sold_status === 1 && parseInt(item.total_stock) > 0">
<!-- 没有购买记录且购物车无商品 -->
<view class="aux" v-if="cartPrice * 1 == 0 && total < 4">
<text class="large">跟团购买</text>
</view>
<!-- 没有购买记录且购物车有商品 -->
<view class="aux" v-else-if="cartPrice * 1 > 0 && total < 4" style="flex-direction: column;">
<view class="price">
<view class="mid" v-if="discountAmount">券后</view>
<view class="icon">¥</view>
<text class="txt">{{cartPrice * 1}}</text>
<text v-if="discountAmount" class="yh">&nbsp;共优惠¥{{discountAmount}}</text>
</view>
<view class="mid">{{discountAmount ? '立即抢购' : '跟团购买'}}</view>
</view>
<!-- 有购买记录且购物车无商品 -->
<view class="aux" v-else-if="cartPrice * 1 == 0 && total > 3">
<view class="scrBox">
<view class="row" v-for="(it, index) in avatarsList" :key="index"
:class="isAnimate && it.class == 'enter' ? 'enter' : isAnimate && it.class == 'leave' ? 'leave' : isAnimate && it.class == 'animate' ? 'animate' : ''">
<img :src="it.url" alt="" class="img" />
</view>
</view>
<view>
<view class="large">跟团购买</view>
<view class="renshu">{{total}}人已跟团</view>
</view>
</view>
<!-- 有购买记录且购物车有商品 -->
<view class="aux" v-else-if="cartPrice * 1 > 0 && total > 3">
<view class="scrBox">
<view class="row" v-for="(it, index) in avatarsList" :key="index"
:class="isAnimate && it.class == 'enter' ? 'enter' : isAnimate && it.class == 'leave' ? 'leave' : isAnimate && it.class == 'animate' ? 'animate' : ''">
<img :src="it.url" alt="" class="img" />
</view>
</view>
<view>
<view class="price">
<view class="mid" v-if="discountAmount">券后</view>
<view class="icon">¥</view>
<text class="txt">{{cartPrice * 1}}</text>
<text v-if="discountAmount" class="yh">&nbsp;共优惠¥{{discountAmount}}</text>
</view>
<view class="mid">{{discountAmount ? '立即抢购' : '跟团购买'}}</view>
</view>
</view>
<view class="aux" v-else>
<view class="flex">
<text v-if="discountAmount" class="quanhou">券后</text>
<text class="total">¥{{cartPrice}}</text>
<text v-if="discountAmount" class="yh">（共优惠¥{{discountAmount}}）</text>
</view>
<text>跟团购买</text>
</view>
</view>
<!-- 开团状态为开团中库存为0 或 开团状态为已结束都显示为到货提醒-->
<view v-else-if="orign_status == 2" class="btn" :class="item.is_subscribe_remind_stock ? 'hui' : ''" @click="arrivalNotice()">
<text v-if="!item.is_subscribe_remind_stock">到货提醒</text>
<text v-else>取消到货提醒</text>
</view>
<!-- 预览 -->
<view class="btn disabled" v-else-if="item.status === 3">
<text>团购未发布</text>
</view>
<!-- 未开团-（开团、隐藏） -->
<view class="btn" v-if="item.status !== 3 && item.sold_status === 0"
@click="!item.is_subscribe_remind ? handleSubscrip() : ''" :class="item.is_subscribe_remind ? 'disabled' : ''">
<view class="item">
<image
src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/07/01/cuOPd5R1X6MBOOPo7Whc3wfErkvFD3raT9sZnbv9.png"
mode="widthFix" v-if="!item.is_subscribe_remind"></image>
<text v-if="!item.is_subscribe_remind">预约提醒</text>
<text v-else>已提醒</text>
</view>
<view class="countDown">
<up-count-down use-slot :time="startTime" @change="onTimeChange" @finish="timeFinish">
<text>距开售</text>
<text v-if="timeData.days > 0">{{ timeData.days }}天</text>
<text>{{ timeData.hours }}时</text>
<text>{{ timeData.minutes }}分</text>
<text>{{ timeData.seconds }}秒</text>
</up-count-down>
</view>
</view>
</template>
<!-- 团购没有商品 -->
<view v-else class="btn disabled">
<text>团购已下架</text>
</view>
</view>
</template>
<!-- 查看商品 -->
<view class="viewBox" v-show="showJump && imageList.length && !hasRemove" @click="viewGoods()">
<swiper class="swiperBox" :autoplay="true" :interval="3000" :duration="500" :indicator-dots="false" :circular="true" @change="swiperChange">
<swiper-item v-for="(it, index) in imageList" :key="index">
<image class="img" :src="it" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class="num" v-if="imageList.length > 1">{{swiperIndex + 1}}</view>
<view class="text">查看商品</view>
</view>
<view class="goods-tip" v-if="item.status === 3 || !item.group_goods.length && !hasRemove">
<div>该团购已下架或临时下架</div>
</view>
<!-- 选规格 -->
<choose-sku
:show-sku="showSku"
:skus_1="skus_1"
:sku-info="skuInfo"
@close="closeSku"
:type="type"
@getnum="getnum"
:show_stock="show_stock"
:showDetail="true"
:groupId="group_id"
:sourceId="source_id"
:sourceType="source_type"
:can-buy="can_buy"
:sold-status="orign_status"
:remind-stock="item.is_subscribe_remind_stock"
@remind="goodsRemind"
:sales="total"
:short-status="shortStatus"/>
<!-- 分享海报 -->
<share-img v-if="showImg" :goods="item" @closeShow="showImg = false" />
<!-- 单规格商品详情 -->
<up-popup :show="danguige" :round="10" mode="bottom" @close="hanleClose" catchtouchmove="preventD" :z-index="202">
<div class="sku-top">
<view class="sku-top-box">
<image
class="img"
mode="aspectFill"
:src="list_1.pic_url || list_1.face_img"
:style="{width: imgWidth + 'rpx', height: imgWidth + 'rpx'}"
@click="preViewImg(list_1.pic_url_800 || list_1.pic_url || list_1.face_img, $event)" />
<view class="goodcol" :style="{width: 'calc(100% - ' + (imgWidth + 30) + 'rpx)'}">
<view class="tit" :class="imgWidth == 150 ? '' : 'sml'" v-if="imgWidth == 150">{{list_1.title}}</view>
<view class="pricebox">
<!-- 会员下普通价格 -->
<view class="text1" v-if="vipOn && list_1.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))">
<text class="icon1">￥</text>
<text>{{list_1.price}}</text>
</view>
<view>
<!-- 显示会员价 -->
<view v-if="vipOn && list_1.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))" class="vip">
<!-- <text><text class="icon1">￥</text>{{list_1.vip_price}}</text>
<text class="vip-tag" v-if="vipOn && list_1.vip_price > 0 && vip_price_show">会员价</text> -->
<view class="vip-tag"><text>会员价&nbsp;￥</text>{{list_1.vip_price}}</view>
</view>
<!-- 显示普通价格 -->
<view v-else class="vip">
<text class="icon1">￥</text>
<text>{{list_1.price}}</text>
</view>
</view>
</view>
<view class="text" v-if="show_stock === 1">剩余{{list_1.goods && (list_1.goods.stock <= 0 ? 0 : list_1.goods.stock)}}件</view>
</view>
</view>
<scroll-view class="good_box" scroll-y="true" enhanced="true" @scroll="skuScroll">
<view style="box-sizing: border-box;">
<div class="sku_box" v-if="list_1.goods && list_1.goods.is_gift == 0">
<text>购买数量
<template v-if="show_stock === 1">(最多{{list_1.goods && (list_1.goods.stock <= 0 ? 0 : list_1.goods.stock)}}件)</template>
</text>
<text v-if="list_1.goods && list_1.goods.limit_type == 1" class="box_number">{{list_1.goods.start_sale_num}}件起购</text>
<text v-if="list_1.goods && list_1.goods.limit_type == 2" class="box_number">限购{{list_1.goods.limit}}件</text>
<up-number-box
v-model="number1"
:min="list_1.goods && list_1.goods.limit_type == 1 ? parseInt(list_1.goods.start_sale_num) : list_1.goods && list_1.goods.limit_type == 0 ? 1 : 1"
:max="(list_1.goods && list_1.goods.limit_type == 2) ? parseInt(list_1.goods.limit) : list_1.goods && list_1.goods.limit_type == 0 ? list_1.goods && (list_1.goods.stock <= 0 ? 0 : list_1.goods.stock) : 0"
@overlimit="plusBtn1(list_1.goods && list_1.goods.limit_type == 1 ? 0 : list_1.goods && list_1.goods.limit_type == 2 ? 1 : 2, number1, list_1.goods.limit, (list_1.goods.stock <= 0 ? 0 : list_1.goods.stock))"
disabledInput
bgColor="#f2f3f5"
:longPress="false"
:asyncChange="true"
@change="changeNumTwo($event, number1)">
</up-number-box>
</div>
<div class="sku-buy" v-if="list_1.sales > 0">
<view class="imgbb" v-for="(img, idx) in avatars" :key="idx">
<image :src="img"></image>
</view>
已有 <span class="red">{{list_1.sales}}</span> 个社群好友购买
</div>
<view class="edition" v-if="danTextModule.length != 0">
<view v-for="(item, index) in danTextModule" :key="item.id">
<!-- 大图 -->
<view v-if="item.type == 1" class="edition_box" @click="preViewImg(item.imgs[0], $event)">
<view v-for="(imgs, i) in item.imgs" :key="i">
<image :src="imgs" mode="widthFix" style="width:100%"></image>
</view>
</view>
<!-- 小图 -->
<view class="edition_box" v-if="item.type == 2">
<view class="small_img">
<view v-for="(list, i) in item.img" :key="i" class="imgs"
@click="viewSmallImg(item.img, list)">
<img :src="list" alt="">
</view>
</view>
</view>
<!-- 视频 -->
<view class="edition_box" v-if="item.type == 3">
<video :src="item.video[0]" height="100%" width="250" class="video_box" style="display: block;margin: 0 auto;"></video>
</view>
<!-- 文字 -->
<view class="edition_box text1_box" v-if="item.type == 4">
<text user-select="true" class="text">{{item.text}}</text>
</view>
</view>
</view>
<view v-if="mainImg.length !== 0" class="imgbox">
<image v-for="(img, idx) in mainImg" :key="idx" :src="img" class="img" mode="widthFix"></image>
</view>
</view>
</scroll-view>
<view class="addbtn" v-if="list_1.goods && list_1.goods.is_gift == 0">
<view class="btn"
:class="((list_1.goods && list_1.goods.stock <= 0) || !can_buy) ? 'btn1' : ''"
@click="((list_1.goods && list_1.goods.stock > 0) && can_buy) ? getGoodsSkus2(list_1):''">加入购物车
</view>
</view>
</div>
</up-popup>
<up-popup :show="showCouponBox && !hasRemove" :round="10" @touchmove.stop.prevent="moveHandle" :z-index="202" mode="center">
<view class="couponBox">
<view class="couponTitle">恭喜获得</view>
<scroll-view scroll-y="true" class="scrolly">
<view class="coupon-itme" v-for="(item, index) in couponList" :key="index">
<view class="coupon">
<image
src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/07/01/aK2hoeg7NSS3AcQcUfWz4uHsllFFUpi1S605FExI.png?x-oss-process=image/format,webp"
class="couponImg" :webp="true">
<view class="couponmoney">
<text class="sign">￥<text class="money">{{item.amount}}</text></text>
<view class="tit" v-if="item.use_type === 30 || item.use_type === 31">满{{item.full_amount}}元</view>
<view class="tit" v-else>无门槛</view>
</view>
<view class="coupontype">
<template v-if="item.use_type === 20 || item.use_type === 31">团购“{{item.extend && item.extend.title}}”可用</template>
<template class="tit" v-else>全场通用</template>
</view>
<view class="coupontime">有效期至{{item.finish_time}}</view>
</image>
</view>
</view>
</scroll-view>
<view class="couponBtn" @click="showCouponBox = false">立即领取</view>
</view>
</up-popup>
<up-popup :show="showDirect" :round="10" mode="bottom" @close="showDirect = false" catchtouchmove="preventD" :z-index="202">
<view class="sale-goods">
<view style="padding: 10px 0 5px;font-size: 30rpx;">合作商直销</view>
<view style="height: 50vh;">
<view style="font-size: 28rpx;color: #999;" class="flex1" @click="toDirect">
<text>该商品由合作方直销，由合作方提供货物及售后服务</text>
<up-icon name="arrow-right" size="14" color="#999" />
</view>
</view>
<view class="btnbox"><view class="btn flex" @click="showDirect = false">我知道了</view></view>
</view>
</up-popup>
</view>
</template>
<!-- 团购购物车 -->
<up-popup :show="showCart" :round="10" mode="bottom" @close="showCart = false" catchtouchmove="preventD" :z-index="200" closeable>
<view class="cartBox">
<view class="Tit">已选{{number}}件商品</view>
<view class="bbox">
<view class="item" v-for="itm in groupCartList" :key="itm.id">
<image :src="itm.goods.pic_url + '?x-oss-process=image/format,webp'" @click="viewSmallImg([itm.goods.pic_url], 0)" :webp="true" mode="aspectFill"></image>
<view class="info">
<view class="around">
<view class="name">
<view class="kuajing" v-if="itm.goods.is_cross_border === 1">跨境包税</view>
<view class="kuajing" v-else-if="itm.goods.overseas_direct_mail === 1">海外直邮</view>{{itm.goods.title}}
</view>
<view v-if="itm.goods.limit_type == 1" class="box_number">{{itm.goods.start_sale_num}}件起购</view>
<view v-if="itm.goods.limit_type == 2" class="box_number">限购{{itm.goods.limit}}件</view>
<view class="sku" v-if="itm.shop_goods_sku_id && itm.goods.specs_type && itm.goods.sku">
<text>{{itm.goods.sku.v1}}</text>
<text v-if="itm.goods.sku.v2">-{{itm.goods.sku.v2}}</text>
<text v-if="itm.goods.sku.v3">-{{itm.goods.sku.v3}}</text>
<text v-if="itm.goods.sku.v4">-{{itm.goods.sku.v4}}</text>
</view>
</view>
<view class="price flex1">
<view class="price-left">
<text class="icon">￥</text>
<text class="text" v-if="is_vip && vip_on === 1 && itm.goods.vip_price > 0">{{itm.goods.vip_price}}</text>
<text class="text" v-else>{{itm.goods.price}}</text>
</view>
<view @click.stop>
<up-number-box
v-model="itm.num"
:min="itm.goods.limit_type == 1 ? parseInt(itm.goods.start_sale_num) : itm.goods.limit_type === 0 ? (itm.goods.stock <= 0 ? itm.num : 0) : 0"
:max="itm.goods.limit_type == 2 ? parseInt(itm.goods.limit) : itm.goods.limit_type == 0 ? (itm.goods.stock <= 0 ? 0 : itm.goods.stock) : (itm.goods.stock <= 0 ? 0 : itm.goods.stock)"
@overlimit="plusCartBtn($event, itm.goods.limit_type, itm.num, itm.goods.limit, (itm.goods.stock <= 0 ? 0 : itm.goods.stock))"
disabledInput
bgColor="#f2f3f5"
:longPress="false"
:asyncChange="true"
@change="changeCartNum($event, itm)">
</up-number-box>
</view>
</view>
</view>
</view>
<view v-if="!groupCartList.length">
<up-empty mode="order" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/cart.png" text="购物车还是空的"></up-empty>
</view>
</view>
</view>
</up-popup>
<!-- 团购专享红包 -->
<up-overlay :show="showRedPaper && !hasRemove" :z-index="999">
<view class="red_paper">
<view class="block">
<view class="close_red_paper" @click="showRedPaper = false">
<up-icon name="close-circle" color="#fff" size="30" />
</view>
<image v-if="showRedOne" src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2023/10/16/UcEFMWggvafmivnSuPtEk2WIAwYdJGy7MdmVXNtr.png?x-oss-process=image/format,webp" :webp="true" mode="widthFix" class='red_paper_img' @click="openRedPaper()"></image>
<template v-if="showRedTwo">
<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/11/16/0RE5YpTsOMrZdlyO5fgT0tiKGkKpGghsAonyXSsC.png?x-oss-process=image/format,webp" :webp="true" mode="widthFix" class='red_paper_img'></image>
<view class="openbox">
<view class="tit">恭喜获得</view>
<view class="price">￥<text>{{item.red_amount}}</text></view>
<view class="text">{{item.title}}团购活动内下单立减</view>
<view class="btn" @click="toUseRedPaper()">立即使用</view>
</view>
</template>
</view>
</view>
</up-overlay>
<!-- 订阅红包 -->
<up-overlay :show="showDyRed" z-index="999">
<view class="red_paper">
<view class="block">
<view class="close_red_paper" @click="showDyRed = false">
<up-icon name="close-circle" color="#fff" size="30" />
</view>
<template v-if="showDyOne">
<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2023/04/10/AjOXc0U0pL83uJfXSc4ba0unT64ufhVGcjeoJQQv.png?x-oss-process=image/format,webp" :webp="true" mode="widthFix" class='red_paper_img'></image>
<view class="open"><image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2023/04/10/JmR8ZENpKOYTRbZ8s79LcGeZcqupVcCtIMQI951T.png" mode="widthFix" @click="openDyRed()" class='red_paper_img'></image></view>
</template>
<template v-if="showDyTwo">
<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2023/04/10/i6mFrDPyerUbIoBythnqgMA2s0hF9xX3l3lqhccA.png?x-oss-process=image/format,webp" :webp="true" mode="widthFix" class='red_paper_img'></image>
<view class="openbox1">
<view class="price">￥<text>{{dyRedData.amount}}</text></view>
<view class="text">有效期至{{dyRedData.finish_time}}</view>
<view class="btn" @click="showDyRed = false">立即使用</view>
</view>
</template>
</view>
</view>
</up-overlay>
<!-- 新人优惠券 -->
<new-vip :show-van="showVan" @close="showVan = false" :coupon-info="couponInfo" />
<!-- 隐私协议弹窗 -->
<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
<!-- 有任选几件活动并且与起购数量一致sku弹窗 -->
<multiple-sku
:show="showVanSku"
@close="closeSku"
@getnum="getnum"
:show_stock="show_stock"
:specs-num="specsNum"
:goodId="goodId"
:groupId="group_id"
:sourceId="source_id"
:sourceType="source_type"
:sold-status="orign_status"
:remind-stock="item.is_subscribe_remind_stock"
@remind="goodsRemind">
</multiple-sku>
<direct-pay
:show="showMorePay"
@close="showMorePay = false"
:sourceId="source_id"
:sourceType="source_type"
:show_stock="show_stock"
:groupId="group_id"
:skus_1="skus_1"
:goodId="goodId"
@back="payBack">
</direct-pay>
<!-- 赠送会员 -->
<gifts-vip :show-gifts="showGifts" @close="showGifts = false" :info="giftsInfo"></gifts-vip>
<!-- 客服 -->
<call-center :show="showService" @close="showService = false" :type="1" />
<!-- 视频讲解 -->
<movable-area class="movableArea">
<movable-view class="movableView" :animation="false" direction="all" :x="write[0]" :y="write[1]"
:style="{'height': 'auto','width': videoWid + 'px'}">
<view class="videoBox" v-if="showDialog && videoHg && video_url && !hasRemove">
<view @click="toJump('/pages/groups/video?id=' + group_id, $event)">
<view :style="{'height': videoHg + 'px','width': videoWid + 'px'}">
<DomVideoPlayer
ref="domVideoPlayer"
object-fit="contain"
:isLoading="true"
:muted="true"
:controls="false"
:autoplay="true"
:loop="true"
:poster="video_url + '?x-oss-process=video/snapshot,t_1000,m_fast'"
:src="video_url" />
</view>
<view class="text">商品讲解</view>
</view>
<view class="close" @click="showDialog = false"><up-icon name="close" color="#fff" /></view>
</view>
</movable-view>
</movable-area>
<video-dialog :url="videoUrl" :show="showVideo" @close="showVideo = false"></video-dialog>
</view>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
import { get, post } from '@/api/request.js'
import { goodsItem, getImg, showToast, formatDate, getUserPhone, getShopInfo, judgePrivacy, parseTime, downloadVideo, uniShare, whetherLogin, toMiniProgram } from '@/components/common.js'
import ChooseSku from '@/components/sku/ChooseSku.vue'
import shareImg from '@/components/shareImg/shareImg.vue'
import StickyCalculate from './StickyCalculate.js'
import { sp2 } from '@/components/img.js'
import { Style } from '@/utils/list.js'
import privacyPopup from '@/components/privacyPopup/index.vue'
import multipleSku from '@/components/sku/multiple.vue'
import directPay from '@/components/sku/directPay.vue'
import newVip from '@/components/newVip/index.vue'
import giftsVip from '@/components/giftsVip/index.vue'
import videoDialog from '@/components/videoDialog/index.vue'
import cfCloud from '@/components/cfCloud/index.vue'
import DomVideoPlayer from '@/components/DomVideoPlayer/index.vue'
import { provTxt } from '@/components/scene.js'
import callCenter from '@/components/callCenter/index.vue'
import zbPopover from '@/components/Popover/index.vue'
export default {
components: {
ChooseSku,
shareImg,
privacyPopup,
multipleSku,
directPay,
newVip,
giftsVip,
videoDialog,
cfCloud,
DomVideoPlayer,
callCenter,
zbPopover
},
setup() {
const data = reactive({
temp: {},
tabsList: [
{ id: 0, name: '详情', selector: 'goodDetail' },
{ id: 1, name: '商品', selector: 'goodsGroup' },
{ id: 2, name: '跟团记录', selector: 'record' }
],
tabVal: 0,
textModules: [],
sp2: sp2,
recommendGroup: [],
styleObject: {
height: '300rpx'
},
showCouponBox: false,
couponList: [],
is_collect: false,
is_subscribe: '',
is_vip: false,
vip_on: 0,
score_on: 0,
closure: true,
loading_box: true,
number1: 1,
show_stock: 0,
list_1: {},
group_id: '',
danguige: false,
number: '',
buyList: [],
page: 1,
lastPage: 0,
type: 1,
showImg: false,
shareUrl: '',
total: 0,
showJump: false,
imageUrl: '',
commentList: [],
goodCommentRate: '',
commentTotal: 0,
commentHg: 0,
skuList: [],
endtime: '',
startTime: '',
timeData: {},
offtimeData: {},
opacityStyle: 0,
pagesLength: 0,
openType: '',
cartList: [],
typeId: 0,
goodsClass: 'per50',
showGroups: true,
zeroList: [],
showZero: false,
show_1: true,
showVideo: false,
videoUrl: '',
curIndex: 0,
waitForTime: 1,
delayTime: 4,
opacity: 0,
msg: '',
t: '',
stickyCalculate: null,
lockScoll: false,
danTextModule: [],
imgWidth: 150,
textType: 1,
discountAmount: 0,
cartPrice: '0.00',
vip_price_show: false,
mainImg: [],
avatars: [],
sunList: [],
showRedPaper: false,
showRedOne: true,
showRedTwo: false,
hasReceive: false,
number: 0,
showVan: false,
couponInfo: [],
showGifts: false,
giftsInfo: {},
is_show_sales: false,
customVal: {
height: 32,
top: 24
},
imageList: [],
swiperIndex: 0,
showView: true,
showDyRed: false,
showDyOne: true,
showDyTwo: false,
dyRedData: {},
showPopOverRed: false,
userInfo: {},
scoreShareInfo: {},
can_buy: true,
canClick: true,
img_preview_suffix: '',
Color: '',
priceColor: '',
bgColor: '',
tagColor: '',
Theme: '',
showPrivacy: false,
source_id: 0,
source_type: 'normal',
showTabs: false,
barHeight: 0,
oneBoxHg: 0,
goodsHg: 0,
detailHg: 0,
interval: null,
timeOut: null,
showVanSku: false,
goodId: 0,
specsNum: 0,
vipOn: false,
onTimeOut: null,
orign_status: 0,
collect_shop: {},
video_url: '',
showDialog: false,
videoWid: 0,
videoHg: 0,
show_explain_video: false,
hasRemove: false,
shortStatus: 1,
write: [],
showMorePay: false,
statusBarHeight: 0,
is_crop_user: uni.getStorageSync('is_crop_user') || false,
crop_user_img: '',
showDirect: false,
groupCartList: [],
showCart: false,
groupCoupons: [],
showService: false,
backInfo: null,
fontSize: 'small',
actions: [
{ id: 0, text: '首页', icon: 'home-fill' },
{ id: 1, text: '联系团长', icon: 'chat-fill' },
{ id: 2, text: '搜索团购', icon: 'bag-fill' },
{ id: 3, text: '收藏与浏览', icon: 'heart-fill' },
{ id: 4, text: '购物车', icon: 'shopping-cart-fill' },
{ id: 5, text: '调大字体', icon: 'setting-fill' }
],
cartNum: 0,
avatarsList: [
{ url: 'http://ct-upimg.yx090.com/ju8hn6/shop/image/94fcfdd8-a998-49ef-a0ed-26405cf7853f_suffix.png', class: 'animate'},
{ url: 'http://ct-upimg.yx090.com/ju8hn6/shop/image/101e86e4-6fab-41cf-ac00-b4bcaa450610_suffix.png', class: 'animate'},
{ url: 'http://ct-upimg.yx090.com/ju8hn6/shop/image/e5ec20d5-d460-45dc-a8bf-79fa84b8ccbb_suffix.png', class: 'animate'}
],
avatarsAll: [
'http://ct-upimg.yx090.com/ju8hn6/shop/image/31b5ee50-2dc4-4d0f-86a8-43d63733b37a_suffix.png',
'http://ct-upimg.yx090.com/ju8hn6/shop/image/b7109d3a-fc56-41f0-8c68-1a68a56ecc17_suffix.png',
'http://ct-upimg.yx090.com/ju8hn6/shop/image/be1ab082-0a3a-4a70-960e-26bb0bfd5385_suffix.png',
'http://ct-upimg.yx090.com/ju8hn6/shop/image/fc7a9b1c-1c72-4d34-b7af-19c2d063b456_suffix.png',
'http://ct-upimg.yx090.com/ju8hn6/shop/image/853263fa-3edc-49f5-8607-7397718c7458_suffix.png',
'http://ct-upimg.yx090.com/ju8hn6/shop/image/e5ec20d5-d460-45dc-a8bf-79fa84b8ccbb_suffix.png',
'http://ct-upimg.yx090.com/ju8hn6/shop/image/ab4ecc1e-f8ef-45d4-a4b8-3d7f8737a928_suffix.png',
'http://ct-upimg.yx090.com/ju8hn6/shop/image/d7f4b8c3-cc9c-4ddc-922a-3a4dce9784c1_suffix.png',
'http://ct-upimg.yx090.com/ju8hn6/shop/image/1c77dc22-4092-49f4-8fda-8467d415c728_suffix.png',
'http://ct-upimg.yx090.com/ju8hn6/shop/image/7aa9622d-bc35-4737-a26e-2be9f579fec7_suffix.png'
],
avatarTimer: null,
isAnimate: false,
})
// 订阅活动提醒消息
const handleSubscrip = () => {
toMiniProgram('pages/groups/index?id=' + data.group_id)
}
const item = ref({})
// 编辑器查看图片
const viewSmallImg = (e, img) => {
uni.previewImage({
urls: e,
current: img
})
}
const startAnimate = () => {
let item = data.buyList[data.curIndex]
if (item == null || item == undefined) return;
(data.msg = item.user.avatar),
(data.t = item.buy_time),
(data.opacity = 1)
data.curIndex++
if (data.curIndex >= data.buyList.length) {
data.curIndex = 0
}
setTimeout(() => {
data.opacity = 0
setTimeout(() => {
startAnimate()
}, (data.waitForTime + 1) * 800)
}, data.delayTime * 800)
}
const moveHandle = () => {}
// 获取优惠券信息
const getNocheckList = () => {
post('/api/v1/UserCoupon/getNocheckList').then((res) => {
data.couponList = []
for (let i = 0; i < res.data.length; i++) {
if(res.data[i].type != 20) {
data.couponList.push(res.data[i])
}
}
if (data.couponList.length != 0) {
data.showCouponBox = true
}
})
}
const hanleClose = () => {
data.danguige = false
data.number1 = 1
}
const plusBtn = (number, index, e, sock) => {
if (number == 0) {
showToast('该商品不能低于起购件数')
} else if (number == 1) {
if (index == e) {
showToast('已达到商品限购件数')
} else if (index > e) {
showToast('已达到商品限购件数')
} else if (index != e) {
showToast('该商品不能低于1件')
}
} else {
if (sock <= 1) {
showToast('已达到该商品最大件数')
} else {
showToast('该商品不能低于1件')
}
}
}
const plusCartBtn = (number, index, e, sock) => {
if (number == 0) {
} else if (number == 1) {
if (index == e) {
showToast('已达到商品限购件数')
} else if (index > e) {
showToast('已达到商品限购件数')
} else if (index != e) {
showToast('该商品不能低于1件')
}
} else {
if (sock <= 1) {
showToast('已达到该商品最大件数')
} else {
showToast('该商品不能低于1件')
}
}
}
const plusBtn1 = (number, index, e, sock) => {
if (number == 0) {
showToast('该商品不能低于起购件数')
} else if (number == 1) {
if (index == e) {
showToast('已达到商品限购件数')
} else if (index > e) {
showToast('已达到商品限购件数')
} else if (index != e) {
showToast('该商品不能低于1件')
}
} else {
if (sock <= 1) {
showToast('已达到该商品最大件数')
} else {
showToast('该商品不能低于1件')
}
}
}
const followSubscribe = () => {
uni.navigateTo({
url: '/pages/article/index'
})
}
// 订阅
const toSubscribe = () => {
post(`/api/v1/goods/subscribe/${data.group_id}`).then((res) => {
item.value.is_subscribe = 1
showToast('订阅成功')
isOpenSubscribeRed()
if(data.is_subscribe === 0) {
uni.navigateTo({
url: '/pages/article/index'
})
}
})
}
// 取消订阅
const cancelSubscribe = () => {
post(`/api/v1/goods/subscribe/cancel/${data.group_id}`).then((res) => {
showToast('已退订')
item.value.is_subscribe = 0
isOpenSubscribeRed()
})
}
// 收藏团购
const handleCollection = () => {
if(data.is_collect) {
// 取消收藏
post('/api/v1/users/collect/cancel', { type: 1, extend_id: data.group_id }).then((res) => {
data.is_collect = false
showToast('已取消收藏')
})
} else {
post('/api/v1/users/collect', { type: 1, extend_id: data.group_id }).then((res) => {
data.is_collect = true
showToast('收藏成功')
})
}
}
const handleShare = async () => {
uniShare(item.value.title, data.imageUrl, data.shareUrl)
}
function handleTabs(val, selector) {
data.tabVal = val
uni.pageScrollTo({
selector: '#' + selector,
offsetTop: 150,
duration: 0
})
}
const hanleImgs = (e, list) => {
let img = []
list.forEach((res) => {
if (res.type == 1) {
img.push(res.url)
}
})
if (e.type === 1) {
uni.previewImage({
current: e.url,
urls: img
})
} else {
data.showVideo = true
data.videoUrl = e.url
}
}
const viewVideo = (video, e) => {
data.showVideo = true
data.videoUrl = video
}
// 跳转会员页
const to_VipPage = () => {
get('/api/v1/shop').then((res) => {
if(res.data.vip_detail_on === 1) {
uni.navigateTo({ url: '/pages/vip/intro/index' })
} else {
uni.navigateTo({ url: '/pages/vip/mine/index' })
}
})
}
async function getGoodsSkus1(e) {
await get(`/api/v1/goods/spec/${e.id}`).then((res) => {
data.danTextModule = res.data.text_modules || []
data.textType = res.data.text_type
data.mainImg = res.data.gallery
data.avatars = res.data.avatars
})
if (e.goods.limit_type == 1) {
data.number1 = e.goods.start_sale_num
}
data.danguige = true
data.list_1 = e
}
const getGoodsSkus2 = (res) => {
post('/api/v1/carts', {
shop_goods_id: res.pivot.shop_goods_id,
shop_goods_sku_id: 0,
num: data.number1,
shop_group_goods_id: res.pivot.shop_group_goods_id,
source_id: data.source_id,
source_type: data.source_type
}).then((res) => {
showToast('已加入购物车')
data.danguige = false
getCartList()
data.number1 = 1
}).catch((error) => {
showToast(error)
})
}
function changeNumOne(e, goods) {
// 减按钮
if(e.value < goods.num && goods.num > 0) {
if (!showBtn.value) {
showBtn.value = true
getStartTime()
}
var num = (goods.num -= 1)
data.cartList.forEach((res) => {
if (res.shop_goods_id === goods.id) {
post(`/api/v1/carts/${res.id}`, {
shop_goods_id: res.shop_goods_id,
shop_goods_sku_id: res.shop_goods_sku_id,
num: num,
shop_group_goods_id: res.shop_group_goods_id,
source_id: data.source_id,
source_type: data.source_type
}, 'PUT').then((res) => {
get('/api/v1/carts', { shop_group_goods_id: data.group_id }).then((res) => {
data.number = res.num
getCartList()
})
})
}
})
} else if(e.value > goods.num) { // 加按钮
if(item.value.limit_type === 2 && data.number >= item.value.limit) {
showToast('本团商品限购' + item.value.limit + '件')
return
}
if (!showBtn.value) {
showBtn.value = true
getStartTime()
}
let num = (goods.num += 1)
data.cartList.forEach((res) => {
if (res.shop_goods_id === goods.id) {
post(`/api/v1/carts/${res.id}`, {
shop_goods_id: res.shop_goods_id,
shop_goods_sku_id: res.shop_goods_sku_id,
num: num,
shop_group_goods_id: res.shop_group_goods_id,
source_id: data.source_id,
source_type: data.source_type
}, 'PUT').then((res) => {
get('/api/v1/carts', {
shop_group_goods_id: data.group_id
}).then((res) => {
data.number = res.num
data.cartPrice = res.total_price
data.discountAmount = res.active_discount_amount * 1
getCartList()
})
})
}
})
}
}
function changeNumTwo(e, number) {
// 减按钮
if(e.value < number && number > 0) {
data.number1 -= 1
} else if(e.value > number) { // 加按钮
if(item.value.limit_type === 2 && data.number >= item.value.limit) {
showToast('本团商品限购' + item.value.limit + '件')
return
}
data.number1 += 1
}
}
// 预览图片
const preViewImg = (img, e) => {
if(e.type === 'load') {
return
}
let imurl = img + data.img_preview_suffix
if(img.indexOf('.gif') >= 0 || img.indexOf('.GIF') >= 0) {
imurl = img
}
uni.previewImage({
urls: [imurl],
current: 0
})
}
async function getDetail() {
await get(`/api/v1/goods/group/detail/${data.group_id}`).then((res) => {
data.userInfo = res.user
if(res.data.status == 5) {
data.hasRemove = true
}
// 当前团购未设置仅新人可购 或 设置了仅新人可购并且当前用户是新人 才可以购买
data.can_buy = !res.data.is_new_purchase || (res.data.is_new_purchase && res.user.is_purchase === 0)
data.groupCoupons = res.data.groupCoupons || []
// 如果团购为已结束状态,改为和售罄状态一样
item.value = JSON.parse(JSON.stringify(res.data))
data.orign_status = res.data.sold_status
if(res.data.sold_status == 2) {
item.value.total_stock = 0
item.value.group_goods.forEach((it) => {
it.goods.stock = 0
})
}
if(res.data.sold_status == 1 && res.data.total_stock <= 0) {
data.orign_status = 2
}
// 商品短期下架,将商品库存设为0
item.value.group_goods.forEach((it) => {
if(it.goods && it.goods.short_status == 0) {
it.goods.stock = 0
}
})
if(item.value.service_provider) {
let collect = uni.getStorageSync('collect')
data.collect_shop = collect ? collect : {}
data.collect_shop[item.value.service_provider.id] = data.collect_shop[item.value.service_provider.id] || false
}
data.is_subscribe = res.user && res.user.is_subscribe
data.is_collect = res.data.is_collect
data.is_show_sales = res.data.is_show_sales === 1
data.show_stock = res.data.shop.show_stock
if(res.data.red_status === 1 && !res.data.is_receive_red && res.data.is_red_could_receive) {
data.showRedPaper = true
}
data.textModules = res.data.text_modules || []
data.stickyCalculate = new StickyCalculate(
res.data.types.map((i) => i.id)
)
item.value.created_at = res.data.created_at.split(' ')[0]
// 开团剩余时间
getSoldOffTime()
// 未到开团时间
getStartTime()
if(res.data.types.length !== 0) {
data.typeId = res.data.types[0].id
}
// 本团商品
if (item.value.group_goods.length === 1) {
data.goodsClass = 'per100'
} else if (item.value.group_goods.length === 2) {
data.goodsClass = 'per50'
} else {
data.goodsClass = 'per47'
}
// 分组下商品
let groupGoods = item.value.group_goods
for (let i = 0; i < groupGoods.length; i++) {
let itm = groupGoods[i]
item.value.types.forEach((it) => {
if (!it.list) {
it.list = []
}
if (itm.pivot.type_id === it.id) {
if (itm.length > 15 && itm.goods.stock <= 0) {
data.zeroList.push(itm)
} else {
it.list.push(itm)
}
}
})
data.imageList.push(itm.face_img)
}
item.value.types.forEach((it, i) => {
if(it.list && it.list.length === 0) {
item.value.types.splice(i, 1)
}
})
if(item.value.group_goods.length === 0) {
item.value.types = []
}
if (data.zeroList.length > 0){
item.value.types.push({
id: 0,
list: data.zeroList
})
}
uni.setNavigationBarTitle({
title: res.data.title
})
data.loading_box = false
// 判断是否显示订阅红包
isOpenSubscribeRed()
sourceId.value = data.source_id
sourceType.value = data.source_type
// 获取讲解视频
if(data.show_explain_video && res.data.explain_video && res.data.explain_video.explain_video) {
data.video_url = res.data.explain_video.explain_video_convert || res.data.explain_video.explain_video
uni.getImageInfo({
src: data.video_url + '?x-oss-process=video/snapshot,t_1000,m_fast',
success: function(req) {
let rate = req.width / req.height
data.videoWid = rate > 1 ? 130 : 88
data.videoHg = (data.videoWid / rate).toFixed(2)
uni.getSystemInfo({
success: (ress) => {
data.write[0] = ress.windowWidth - data.videoWid - 10
data.write[1] = ress.windowHeight - 375 - data.videoHg
}
})
setTimeout(() => {
data.showDialog = true
}, 200)
}
})
}
})
}
function onTimeChange(e) {
data.timeData = e
}
function timeFinish() {
item.value.sold_status = 1
getSoldOffTime()
}
function offTimeChange(e) {
data.offtimeData = e
}
function offtimeFinish() {
item.value.sold_status = 2
}
function getSoldOffTime() {
if (item.value.sold_off_time && item.value.sold_status === 1) {
let endAt = new Date(item.value.sold_off_time.replace(/-/g, '/')).getTime() // 结束时间
let nowAt = new Date().getTime() // 当前时间
let timestamp = endAt - nowAt //计算时间差
data.endtime = timestamp
}
}
function getStartTime() {
if (item.value.sold_status === 0 && item.value.sold_start_time) {
let startAt = new Date(
item.value.sold_start_time.replace(/-/g, '/')
).getTime() // 开始时间
let nowAt = new Date().getTime() // 当前时间
let timestamp = startAt - nowAt //计算时间差
data.startTime = timestamp
}
}
function isOpenSubscribeRed() {
if(!item.value.is_receive_subscribe_red) {
if(item.value.is_subscribe === 1 && data.userInfo.is_subscribe === 1) {
data.showDyRed = true
data.showPopOverRed = false
} else {
data.showPopOverRed = true
}
}
}
// 切换滑动
function changeTest(e) {
if (data.lockScoll) {
return
}
let actionId = data.stickyCalculate.opFixArr(e.currentTarget.id, e.detail.isFixed).getActionId()
if (actionId > 0) {
data.typeId = actionId
}
data.lockScoll = true
setTimeout(() => {
data.lockScoll = false
}, 400)
}
function skuScroll(e) {
if(e.detail.scrollTop > 200){
data.imgWidth = 100
} else {
data.imgWidth = 150
}
}
const getRecommendList = () => {
get(`/api/v1/goods/recommend/${data.group_id}`).then((res) => {
data.recommendGroup = res.data
})
}
// 切换分组
const changeType = (typeId) => {
if (typeId == data.typeId) {
return
}
data.typeId = typeId
uni.createSelectorQuery().select('.group' + typeId).boundingClientRect((req) => {
uni.createSelectorQuery().select('.goods').boundingClientRect((res) => {
uni.pageScrollTo({
scrollTop: req.top - res.top - (data.customVal.top * 2 - data.statusBarHeight + data.customVal.height) + 10,
duration: 0
})
}).exec()
}).exec()
}
// 跟团记录
async function getBuyList() {
let res = await get(`/api/v1/goods/record/${item.value.id}`, {
page: data.page,
pageSize: 5
})
res.data.forEach((item) => {
item.buy_time = formatDate(Date.parse(item.created_at.replace(/-/g, '/')))
})
data.buyList = data.buyList.concat(res.data)
data.lastPage = res.meta.last_page
data.total = res.meta.total
if(res.meta.total === 0) {
data.tabsList.splice(2, 1)
}
startAnimate()
}
function moreRecord() {
data.page += 1
getBuyList()
}
const getGoodsSkus = (goods) => {
data.shortStatus = goods.goods.short_status
if(!data.can_buy && goods.specs_type === 0) {
return
}
if(goods.goods.stock <= 0 && goods.specs_type === 0) {
showToast('商品已被抢光了')
return
}
if(item.value.limit_type === 2 && data.number >= item.value.limit) {
showToast('本团商品限购' + item.value.limit + '件')
return
}
if(data.can_buy && goods.specs_type === 0) {
getGoodsSkus1(goods)
return
}
if(goods.goods.show_sku_style == 1 || goods.goods.show_sku_style == 2) {
data.specsNum = item.value.group_goods[0].goods.show_sku_style == 1 ? 2 : 3
data.showVanSku = true
data.goodId = goods.id
} else {
getGoodsSku(goods).then((res) => {
if (goods.specs_type === 0) {
if (data.show_1) {
data.show_1 = false
getCartList()
}
setTimeout(() => {
showToast('已加入购物车')
data.show_1 = true
}, 1000)
}
})
}
}
const {
sourceId,
sourceType,
showSku,
getGoodsSku,
skuInfo,
getNum,
num,
showBtn,
getGoodsSpecs,
skus_1
} = goodsItem()
// 直接购买
async function toPay() {
let num = 0
if (data.cartList.length > 0) {
let cartList = []
for (let i = 0; i < data.cartList.length; i++) {
let obj = data.cartList[i]
if(obj.goods.status !== 1 || obj.goods.sold_status == 2 || (obj.goods.sku && obj.goods.sku.stock <= 0)){
} else {
num += obj.num
cartList.push(obj)
}
}
if(cartList.length) {
if(item.value.limit_type == 1 && num < item.value.start_sale_num) {
showToast('距离起购件数还差' + (item.value.start_sale_num - num) + '件')
jumpFloor()
if (item.value.group_goods.length === 1 && item.value.group_goods[0].specs_type == 1) {
data.type = 2
getGoodsSku(item.value.group_goods[0])
}
} else {
uni.setStorageSync('shopGoods', cartList)
uni.navigateTo({
url: '/pages/pay/index?type=1&source=' + data.source
})
}
}
} else if (item.value.group_goods.length === 1) {
if (item.value.group_goods[0].specs_type == 1) {
if(item.value.group_goods[0].goods.show_sku_style == 1 || item.value.group_goods[0].goods.show_sku_style == 2) {
data.specsNum = item.value.group_goods[0].goods.show_sku_style == 1 ? 2 : 3
data.showVanSku = true
data.goodId = item.value.group_goods[0].id
} else {
// 如果设置了团购起购数量&&没有添加任何商品&&团购仅有一个商品，拉起商品弹窗，否则可直接购买
if(item.value.limit_type == 1 && item.value.start_sale_num > 1) {
data.type = 2
getGoodsSku(item.value.group_goods[0])
} else {
data.goodId = item.value.group_goods[0].id
data.showMorePay = true
}
}
} else {
if(item.value.group_goods[0].goods.stock <= 0) {
return showToast('当前商品已经抢光啦')
}
data.goodId = item.value.group_goods[0].id
data.showMorePay = true
}
} else {
showToast('请选择商品')
jumpFloor()
}
}
// 到货提醒
async function arrivalNotice() {
if(item.value.is_subscribe_remind_stock) {
post(`/api/v1/goods/remind/cancel/${data.group_id}`, {type: 1}).then((res) => {
item.value.is_subscribe_remind_stock = false
showToast('已取消到货提醒')
})
} else {
toMiniProgram('pages/groups/index?id=' + data.group_id)
}
}
function closeSku(val) {
data.type = 1
showSku.value = false
data.showVanSku = false
}
function toPage(url, type) {
if (type === 1) {
uni.navigateTo({ url })
return
}
uni.switchTab({ url })
}
function toJump(url, e) {
if(e.type == 'tap' || e.type == 'click' || e.type == 'onClick') {
uni.navigateTo({ url })
}
}
const getnum = () => {
showBtn.value = true
getStartTime()
getCartList()
getNum()
}
// 分享路径
const getShareUrl = async () => {
await post('/api/v1/user/share', {
page: 'pages/groups/index',
query: `id=${data.group_id}`
}).then((res) => {
data.shareUrl = res.data.path
})
}
// 锚点跳转
const jumpFloor = (time = 300) => {
uni.pageScrollTo({
selector: '#goodsGroup',
offsetTop: -150,
duration: 0
})
}
function swiperChange(e) {
data.swiperIndex = e.detail.current
}
// 查看商品
function viewGoods() {
// 如果团购商品只有一个
if(item.value.group_goods.length === 1) {
jumpFloor(0)
// 单规格
if(item.value.group_goods[0].specs_type === 0) {
getGoodsSkus1(item.value.group_goods[0])
} else { // 多规格
getGoodsSkus(item.value.group_goods[0])
}
} else {
jumpFloor()
}
}
// 获取分享图
const getShareImage = async () => {
await post('/api/v1/sales/share', {
shop_goods_id: item.value.id
}).then((res) => {
data.imageUrl = res.data[0] && res.data[0].image
})
}
// 获取商品评论
const getComment = () => {
get(`/api/v1/goods/comment/${item.value.id}`, {
pageSize: 2,
page: 1,
type: 1,
is_home: 1
}).then((res) => {
data.commentList = res.data
data.goodCommentRate = res.goodCommentRate
data.commentTotal = !data.is_show_sales && res.meta.total > 20 ? 20 : res.meta.total
if(res.meta.total !== 0) {
setTimeout(() => {
uni.createSelectorQuery().select('.commentBox').boundingClientRect((res) => {
data.commentHg = res ? res.height : 0
}).exec()
}, 1000)
}
})
}
const preventD = () => {
return
}
let pages = getCurrentPages()
data.pagesLength = pages.length
// 获取当前团购购物车数据
const getCartList = async () => {
let shop_goods = []
await get('/api/v1/carts', {
shop_group_goods_id: data.group_id
}).then((res) => {
data.cartList = res.data
let list = []
let num = 0
res.data.forEach((itm) => {
shop_goods.push({
num: itm.num,
shop_goods_id: itm.shop_goods_id,
shop_goods_sku_id: itm.shop_goods_sku_id,
shop_group_goods_id: itm.shop_group_goods_id,
source_id: 0,
source_type: "normal"
})
if(itm.goods.status !== 1 || itm.goods.sold_status == 2 || (itm.goods.sku && itm.goods.sku.stock <= 0)){
} else {
num += itm.num
list.push(itm)
}
})
data.cartNum = num
data.groupCartList = list
data.number = list.length
isRepeat()
})
if(shop_goods.length) {
let params = {
shop_id: 1,
shop_goods: shop_goods,
address: null,
purchase_vip: 0,
use_coupons: [],
gift_goods_ids: null,
score_cash: 0
}
post('/api/v1/order/check', params).then((res) => {
data.cartPrice = res.data.sum.total_price
data.discountAmount = res.data.sum.total_discount_amount * 1
})
} else {
data.cartPrice = '0.00'
data.discountAmount = 0
}
}
// 判断有无重复的值
const isRepeat = () => {
var list = []
item.value.group_goods && item.value.group_goods.forEach((element, index) => {
list.push(element.id)
data.cartList.forEach((item) => {
if (element.id === item.shop_goods_id) {
element.num = item.num
}
})
})
data.cartList.forEach((item) => {
list.push(item.shop_goods_id)
})
Array.prototype.duplicate = function() {
let tmp = []
this.concat().sort().sort(function(a, b) {
if (a == b && tmp.indexOf(a) === -1) tmp.push(a)
})
return tmp
}
item.value.group_goods && item.value.group_goods.forEach((element) => {
if (list.duplicate().includes(element.id)) {
if (element.specs_type === 0) {
element.show1 = true
} else {
element.show2 = true
}
} else {
element.show2 = true
}
if (element.show1 === element.show2) {
element.show2 = false
}
})
}
const showSaveVideo = (url) => {
uni.showActionSheet({
itemList: ['保存视频'],
success: (res) => {
downloadVideo(url)
},
fail: (err) => {
// 取消
}
})
}
function selectPop(e) {
if(e.id == 0) {
toBack('home')
} else if(e.id == 1) {
openService({type: 'click'})
} else if(e.id == 2) {
toPage('/pages/search/index', 1)
} else if(e.id == 3) {
toPage('/pages/mine/collection/index', 1)
} else if(e.id == 4) {
toPage('/pages/cart/index')
} else if(e.id == 5) {
data.fontSize = data.fontSize == 'small' ? 'large' : 'small'
data.actions[5].text = data.fontSize == 'small' ? '调大字体' : '调小字体'
uni.setStorageSync('font', data.fontSize)
}
}
// 回退上一级
const toBack = (val) => {
if(val == 'back') {
if(data.pagesLength > 1) {
uni.navigateBack({ delta: 1 })
} else {
uni.switchTab({
url: '/pages/index/index'
})
}
} else {
uni.switchTab({
url: '/pages/index/index'
})
}
}
// 领取红包
function receiveRed() {
data.showRedPaper = true
}
// 拆红包
function openRedPaper() {
uni.showLoading({
title: '正在打开...'
})
post('/api/v1/UserCoupon/receiveGroupCoupon', {shop_goods_id: data.group_id}).then((res) => {
setTimeout(() => {
uni.hideLoading()
data.showRedOne = false
data.showRedTwo = true
item.value.is_receive_red = true
}, 1000)
})
}
// 打开订阅红包
function openDyRed() {
uni.showLoading({
title: '正在打开...'
})
post('/api/v1/userCoupon/subscribe/receive').then((res) => {
data.dyRedData = res.data
setTimeout(() => {
item.value.is_receive_subscribe_red = true
uni.hideLoading()
data.showDyOne = false
data.showDyTwo = true
data.showPopOverRed = false
}, 1000)
})
}
// 使用红包
function toUseRedPaper() {
data.showRedPaper = false
}
function judgeHasNewVip() {
let is_new = uni.getStorageSync('is_new')
if(is_new) {
uni.setStorageSync('is_new', false)
get('/api/v1/shopCoupon', { type: 30 }).then((res) => {
if(res.data.length !== 0) {
data.showVan = true
data.couponInfo = res.data
}
})
}
}
function getGiftsInfo() {
get('/api/v1/user/vip/getNoCheckList').then((res) => {
if(res.data.length != 0) {
data.showGifts = true
data.giftsInfo = res.data[0]
}
})
}
// 下载zip文件
async function downloadZip(it) {
if(await judgePrivacy()) {
data.showPrivacy = true
return false
}
uni.downloadFile({
url: it.url,
// filePath: wx.env.USER_DATA_PATH + '/test.doc',
fileName: it.name,
success: res => {
if(it.name.indexOf('.zip') !== -1) {
uni.shareFileMessage({
filePath: res.tempFilePath,
fileName: it.name,
success(ress) {
}
})
} else {
uni.openDocument({
filePath: res.tempFilePath,
showMenu: true,
success: function (res) {}
})
}
}
})
}
function getBarHeight() {
data.timeOut = setTimeout(() => {
data.barHeight = data.statusBarHeight + 40
uni.createSelectorQuery().select('.oneBox').boundingClientRect((res0) => {
data.oneBoxHg = res0 ? res0.height : 0
uni.createSelectorQuery().select('.goods-group').boundingClientRect((res1) => {
data.goodsHg = res1 ? res1.height : 0
}).exec()
}).exec()
}, 2000)
let num = 0
data.interval = setInterval(() => {
num += 1
if(num > 10) {
clearInterval(data.interval)
data.interval = null
} else {
uni.createSelectorQuery().select('.good-detail').boundingClientRect((res2) => {
data.detailHg = res2 ? res2.height : 0
}).exec()
}
}, 2000)
}
const container = ref(null)
function goodsRemind(flag) {
item.value.is_subscribe_remind_stock = flag
}
function collectShop() {
data.collect_shop[item.value.service_provider.id] = !data.collect_shop[item.value.service_provider.id]
uni.showToast({
title: data.collect_shop[item.value.service_provider.id] ? '关注成功' : '取消成功',
icon: 'success'
})
uni.setStorageSync('collect', data.collect_shop)
}
function parseText(text) {
let reg =/#(.+?)#/g;
let strBr = text.replace(/(\r\n|\n|\r)/gm, '<br />')
let strArr = strBr.match(reg)
if(strArr) {
for (let i = 0; i < strArr.length; i++) {
let txt = '<span style="color: red;">' + strArr[i] + '</span>'
strBr = strBr.replace(strArr[i], txt)
}
strBr = strBr.replace(/#/g, '')
}
return strBr
}
function toSupplier(sid, id) {
// if(sid) {
// uni.navigateTo({
// url: '/pages/mine/other/supplier?id=' + id
// })
// }
}
function toDirect() {
data.showDirect = false
if(item.value.group_goods && item.value.group_goods[0]) {
toPage('/pages/mine/other/directsales/validate?id=' + item.value.group_goods[0].goods_id, 1)
}
}
function openService() {
data.showService = true
}
function openCart() {
if(data.showCart) {
data.showCart = false
} else {
if(data.number) {
data.showCart = true
} else {
showToast('请选择商品')
jumpFloor(0)
}
}
}
function changeCartNum(e, itm) {
if(e.value == 0) {
itm.num = 1
uni.showModal({
title: '提示',
content: '确认删除该商品吗？',
confirmColor: '#42b983',
success(res) {
if (res.confirm) {
post('/api/v1/carts/' + itm.id, {}, 'DELETE').then((res) => {
getCartList()
getNum()
})
}
}
})
} else {
itm.num = e.value
post('/api/v1/carts/' + itm.id, {
shop_goods_id: itm.shop_goods_id,
shop_goods_sku_id: itm.shop_goods_sku_id,
num: itm.num,
shop_group_goods_id: itm.shop_group_goods_id,
source_id: 0,
source_type: 'normal'
}, 'PUT').then(() => {
getCartList()
getNum()
})
}
}
// 领取团购关联优惠券
function recvCoupon(it) {
post('/api/v1/userCoupon/normal/receive', {shop_coupon_id: it.id}).then((res) => {
if(it.scene_type == 2) {
it.user_coupon_status = 1
}
it.receive_coupon_type = 1
showToast('领取成功')
})
}
function avatarAnimate() {
setTimeout(() => {
let length = data.avatarsList.length
data.avatarsList[length - 1].class = 'leave'
let index = Math.floor(Math.random() * 10)
let st = {
class: 'enter',
url: data.avatarsAll[index]
}
data.avatarsList.unshift(st) // 顶部添加
data.isAnimate = true
setTimeout(() => {
data.isAnimate = false
data.avatarsList.pop() // 尾部移除
data.avatarsList[0].class = 'animate'
}, 500)
}, 1000)
}
// 支付返回信息
function payBack(itm) {
data.backInfo = itm
}
function isPayOrder() {
if(data.backInfo) {
uni.showLoading({
title: '加载中...',
mask: true
})
get(`/api/v1/pay/check/${data.backInfo.pay_id}`).then((res) => {
if(data.backInfo.source == 'direct') {
data.showMorePay = false
}
uni.hideLoading()
if(res.data.status) {
uni.redirectTo({
url: '/pages/success/index?id=' + data.backInfo.create_id + '&type=1&pay_id=' + data.backInfo.pay_id + '&from=' + data.backInfo.from
})
} else {
showToast('支付失败')
uni.redirectTo({ url: '/pages/order/list/index' })
}
})
}
}
return {
uniShare,
skus_1,
parseTime,
provTxt,
whetherLogin,
...toRefs(data),
sourceId,
sourceType,
container,
handleSubscrip,
getNocheckList,
moveHandle,
startAnimate,
item,
getDetail,
handleShare,
handleTabs,
toSubscribe,
handleCollection,
cancelSubscribe,
followSubscribe,
changeNumOne,
plusBtn,
plusBtn1,
changeNumTwo,
hanleClose,
getBuyList,
moreRecord,
toBack,
toPay,
toPage,
toJump,
showSku,
getGoodsSku,
skuInfo,
getNum,
num,
closeSku,
showBtn,
getnum,
getShareUrl,
jumpFloor,
viewGoods,
swiperChange,
getImg,
preViewImg,
getShareImage,
getComment,
preventD,
getGoodsSpecs,
getCartList,
getGoodsSkus,
changeType,
isRepeat,
showSaveVideo,
changeTest,
to_VipPage,
getGoodsSkus1,
getGoodsSkus2,
hanleImgs,
viewSmallImg,
viewVideo,
getRecommendList,
skuScroll,
receiveRed,
openRedPaper,
toUseRedPaper,
judgeHasNewVip,
getGiftsInfo,
arrivalNotice,
getShopInfo,
openDyRed,
isOpenSubscribeRed,
downloadZip,
getBarHeight,
onTimeChange,
timeFinish,
offTimeChange,
offtimeFinish,
getStartTime,
getSoldOffTime,
goodsRemind,
collectShop,
parseText,
toSupplier,
toDirect,
plusCartBtn,
openCart,
openService,
changeCartNum,
recvCoupon,
avatarAnimate,
toMiniProgram,
payBack,
isPayOrder,
selectPop
}
},
async onLoad(options) {
// // await this.$onLaunched
this.vip_on = uni.getStorageSync('vip_on') || 0
this.fontSize = uni.getStorageSync('font') || 'small'
this.actions[5].text = this.fontSize == 'small' ? '调大字体' : '调小字体'
this.is_vip = uni.getStorageSync('is_vip') || false
this.img_preview_suffix = uni.getStorageSync('img_preview_suffix') || ''
this.show_explain_video = uni.getStorageSync('show_explain_video')
this.group_id = options.id * 1
const _this = this
uni.getSystemInfo({
success: (res) => {
this.statusBarHeight = res.statusBarHeight
}
})
await _this.getDetail()
this.Color = uni.getStorageSync('theme_color')
this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
this.tagColor = Style[uni.getStorageSync('theme_index') * 1].tagColor
this.bgColor = Style[uni.getStorageSync('theme_index') * 1].bgColor
this.Theme = uni.getStorageSync('theme_index') * 1
_this.vipOn = uni.getStorageSync('vip_on') === 1
_this.vip_price_show = uni.getStorageSync('vip_price_show') || false
getShopInfo().then((res) => {
_this.score_on = Number(res.score_on)
_this.img_preview_suffix = res.img_preview_suffix
_this.crop_user_img = res.extendInfo && res.extendInfo.crop_user_ad_banner_url || ''
})
this.getShareImage()
this.getShareUrl()
if(whetherLogin()) {
this.getNum()
this.getCartList()
this.getNocheckList()
this.judgeHasNewVip()
this.getGiftsInfo()
}
_this.getBuyList() // 跟团记录
uni.removeStorageSync('shopGoods')
await _this.getComment() // 获取评论
_this.getRecommendList() // 推荐团购
_this.getBarHeight()
this.avatarTimer = setInterval(_this.avatarAnimate, 2000);
},
onShow() {
let args = plus.runtime.arguments
if (args) {
plus.runtime.arguments = null
this.isPayOrder()
}
},
onUnload() {
clearInterval(this.interval)
this.interval = null
clearInterval(this.timeOut)
this.timeOut = null
clearTimeout(this.onTimeOut)
this.onTimeOut = null
},
onHide() {
clearInterval(this.interval)
this.interval = null
clearInterval(this.timeOut)
this.timeOut = null
clearTimeout(this.onTimeOut)
this.onTimeOut = null
},
onPageScroll(e) {
if (e.scrollTop == 0) {
this.opacityStyle = 0
} else {
let opacity = e.scrollTop / 80
opacity = opacity > 1 ? 1 : opacity
this.opacityStyle = opacity
}
this.showTabs = e.scrollTop > this.oneBoxHg - 300 && this.oneBoxHg != 0
let hg1 = this.oneBoxHg + this.detailHg
this.showJump = e.scrollTop > (this.oneBoxHg > 0 ? this.oneBoxHg : 400) + 100 && e.scrollTop < hg1 - 600
clearTimeout(this.onTimeOut)
this.onTimeOut = setTimeout(() => {
uni.createSelectorQuery().select('.goods-group').boundingClientRect((req) => {
if(req) {
if(req.height + req.top > this.statusBarHeight + 85) {
this.showGroups = true
} else {
this.showGroups = false
}
}
}).exec()
uni.createSelectorQuery().select('#goodDetail').boundingClientRect((req) => {
if(req) {
this.detailHg = req.height
}
}).exec()
hg1 = this.oneBoxHg + this.detailHg
let hg2 = hg1 + this.goodsHg + this.commentHg
let hg3 = hg2 + 245
if(e.scrollTop + 160 < hg1) {
this.tabVal = 0
} else if(hg1 < e.scrollTop + 160 && e.scrollTop + 110 < hg2) {
this.tabVal = 1
} else if(e.scrollTop + 100 > hg3 && this.total > 0) {
this.tabVal = 2
}
}, 200)
},
onPullDownRefresh() {
this.getDetail()
this.getCartList()
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1000)
}
}
</script>
<style lang="scss" scoped>
.whole{
overflow-y: auto;
}
.flex{
display: flex;
align-items: center;
justify-content: center;
}
.flex1{
display: flex;
align-items: center;
justify-content: space-between;
}
.loadBox{
width: 100%;
height: 100vh;
}
.st{
font-size: 28rpx;
}
.black {
color: v-bind('priceColor');
font-weight: 600;
font-size: 36rpx;
.icon{
font-weight: normal;
font-size: 24rpx;
}
}
.text1_box {
margin: 10rpx 0 !important;
line-height: 55rpx;
font-size: 30rpx;
color: #222;
&.large{
font-size: 42rpx;
line-height: 64rpx;
}
}
.edition_box {
margin: 8rpx 0;
position: relative;
&.verbtm{
margin: 0;
image{
vertical-align: bottom;
}
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
image {
width: 30px;
height: 30px;
}
}
.img {
width: 100%;
}
.small_img {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.imgs {
width: calc(33% - 11rpx);
height: 220rpx;
margin: 16rpx 16rpx 0 0;
image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.imgs:nth-child(3n+3) {
margin: 16rpx 0 0 0;
}
}
.text {
line-height: 55rpx;
font-size: 30rpx;
color: #222;
}
}
.baseInfo{
background-color: #FaFaFa;
border-radius: 8rpx;
padding: 0 24rpx;
color: #333;
margin-bottom: 30rpx;
.tit{
font-size: 32rpx;
font-weight: bold;
line-height: 110rpx;
display: flex;
}
.row{
display: flex;
padding: 8rpx 0;
font-size: 30rpx;
line-height: 46rpx;
.txt{
width: 160rpx;
text-align: justify;
text-align-last: justify;
padding-right: 30rpx;
display: flex;
white-space: nowrap;
font-size: 26rpx;
}
.span{
display: inline-block;
text-align: justify;
text-align-last: justify;
width: 100%;
}
text{
// font-weight: bold;
flex: 1;
}
&:first-child{
padding-top: 36rpx;
border-top: 1px solid #E7E7E7;
}
&:last-child{
padding-bottom: 36rpx;
}
}
&.large{
.row{
font-size: 36rpx;
.span{font-size: 34rpx;}
}
}
}
.lightBox{
background-color: #FaFaFa;
border-radius: 8rpx;
padding: 0 24rpx;
color: #333;
margin-top: 30rpx;
.tit{
font-size: 32rpx;
font-weight: bold;
height: 110rpx;
border-bottom: 1px solid #e9e9e9;
display: flex;
align-items: center;
.iconfont{
font-size: 42rpx;
color: v-bind('Color');
}
}
.txt{
font-size: 30rpx;
line-height: 54rpx;
padding: 30rpx 0;
}
&.large{
.tit{
font-size: 42rpx;
}
.txt{
font-size: 36rpx;
}
}
}
.text2 {
font-size: 36rpx !important;
color: v-bind('priceColor');
font-weight: 600;
margin-right: 10rpx;
.icon{
font-weight: normal;
font-size: 24rpx;
}
}
.recomBox{
padding: 30rpx;
background: #fff;
border-top: 20rpx solid #F5F5F5;
position: relative;
z-index: 100;
.title{
font-size: 30rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.row{
padding: 0 10rpx;
box-sizing: border-box;
overflow: hidden;
flex-shrink: 0;
width: 33.33%;
.img{
width: 214rpx;
height: 214rpx;
}
.tit{
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #2c2c2c;
margin: 10rpx 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.price{
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: v-bind('priceColor');
.icon {
font-size: 25rpx;
}
}
}
}
.box_number {
margin-left: 20rpx;
color: #656565;
font-size: 25rpx;
}
.box_number1 {
padding: 2rpx 10rpx;
border: 1px solid #656565;
border-radius: 10rpx;
color: #656565;
font-size: 25rpx;
}
.guanzhu{
position: relative;
font-size: 27rpx;
background: v-bind('bgColor');
padding: 15rpx 30rpx;
.txt{
color: v-bind('Color');
}
.anniu {
background: v-bind('Color');
border-radius: 8rpx;
color: #fff;
font-size: 25rpx;
padding: 5rpx 25rpx;
margin-right: 50rpx;
}
.chacha{
position: absolute;
top: 50%;
right: 3%;
transform: translateY(-50%);
color: #a1a1a1;
}
}
.border{
height: 32rpx;
background: rgba(255, 255, 255, 0.39);
border: 1px solid v-bind('priceColor');
color: v-bind('priceColor');
padding: 0 10rpx;
border-radius: 5rpx;
margin-left: 10rpx;
font-size: 22rpx;
}
.box_zong {
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
.box_imgs {
width: 33.3%;
image {
width: 200rpx;
height: 200rpx;
margin-bottom: 30rpx;
}
}
}
.text_box {
background: #fff;
padding: 30rpx;
.text {
height: 50rpx;
margin-bottom: 20rpx;
background: #e1e1e1;
}
}
.topicon{
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 240rpx;
margin-top: 20px;
height: 70rpx;
.yuan{
width: 60rpx;
height: 60rpx;
margin: 0 20rpx;
border-radius: 50%;
}
}
.top_box{
background: #fff;
margin: -75rpx 30rpx 0;
box-sizing: border-box;
padding: 20rpx;
.top_box_left{
width: 100%;
.imgs {
width: 80rpx;
height: 80rpx;
border: 4px solid #fff;
background: #e1e1e1;
}
}
.desc{
width: 100%;
height: 34rpx;
margin: 10rpx 0;
}
.top_box_right {
width: 50%;
display: flex;
flex-direction: column;
align-items: flex-end;
.li {
width: 130rpx;
height: 48rpx;
background: #e1e1e1;
border-radius: 10rpx;
}
}
}
@keyframes fade {
from {
opacity: 1;
}
50% {
opacity: 0.5;
}
to {
opacity: 1;
}
}
.box {
background: #e1e1e1;
animation: fade 2s infinite;
}
.btn1 {
opacity: 0.65;
}
.right1 {
float: right;
background: v-bind('Color');
color: #fff;
padding: 15rpx 20rpx;
border-radius: 8rpx;
font-size: 24rpx;
white-space: nowrap;
}
.tites {
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
}
.goods{
min-height: 100%;
padding-bottom: 210rpx;
-webkit-overflow-scrolling: touch;
.vip-tag {
font-size: 32rpx;
color: #fbe6c3;
background: #353648;
border-radius: 20rpx 0 0 0;
padding: 8rpx 10rpx;
line-height: 1;
text{
font-size: 22rpx;
}
}
.goods-bar {
position: fixed;
width: 100%;
z-index: 102;
top: 0;
padding: 35px 15px 5px;
height: 70px;
box-sizing: border-box;
.backBox{
border-radius: 60rpx;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid #EAEAEA;
height: 60rpx;
box-sizing: border-box;
.back{
width: 74rpx;
height: 100%;
}
.home{
font-size: 26rpx;
display: flex;
align-items: center;
padding: 0 24rpx 0 20rpx;
white-space: nowrap;
border-left: 1px solid #eee;
text{
margin-left: 4rpx;
}
}
}
}
.oneBox{
position: relative;
z-index: 100;
}
.goods-top {
height: 430rpx;
width: 100%;
position: relative;
.bgImg{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.linear{
position: absolute;
bottom: 0;
height: 50rpx;
width: 100%;
background: linear-gradient(to bottom , rgba(255,255,255,0.01), #fff);
}
}
.shop-icon {
display: flex;
text-align: center;
width: calc(100% - 220rpx);
justify-content: flex-end;
box-sizing: border-box;
&-item {
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 60rpx;
height: 60rpx;
margin: 0 10rpx;
.iconfont{
font-size: 20px;
color: #444;
}
}
}
.goods-info {
position: relative;
padding: 1rpx 30rpx 0;
background-color: #fff;
.description {
font-size: 34rpx;
color: #222;
display: inline-block;
font-weight: bold;
line-height: 55rpx;
margin-top: 24rpx;
&.large{
font-size: 48rpx;
line-height: 64rpx;
}
}
.vip_advert {
width: 100%;
height: 67rpx;
margin: 30rpx 0rpx -20rpx;
.vip_advert_img {
width: 100%;
height: 100%;
}
}
.item {
display: flex;
align-items: center;
background: #f7f7f7;
height: 95rpx;
padding: 25rpx 40rpx;
border-radius: 10rpx;
&.martop{
margin-top: 30rpx;
}
.left {
display: flex;
justify-content: center;
flex-direction: column;
font-size: 30rpx;
padding-right: 25rpx;
border-right: 2rpx solid #d9d9d9;
margin-right: 30rpx;
color: #2c2c2c;
white-space: nowrap;
}
.right {
display: flex;
overflow: auto;
flex: 1;
.right-item {
display: flex;
overflow: hidden;
flex-shrink: 0;
padding-right: 24rpx;
}
image {
width: 80rpx;
height: 80rpx;
background: #999999;
border-radius: 10rpx;
margin-right: 20rpx;
}
&-text {
.text {
font-size: 28rpx;
color: #2c2c2c;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 230rpx;
}
.vip {
display: flex;
align-items: center;
font-size: 28rpx;
color: v-bind('priceColor');
.icon {
font-size: 24rpx;
}
}
.price {
font-size: 24rpx;
}
}
}
}
.rankBox{
margin-top: 24rpx;
background-color: #f7f7f7;
border-radius: 10rpx;
padding: 24rpx;
.icon{
width: 26px;
height: 26px;
background-repeat: no-repeat;
background-size: 678px 612px;
background-position: -496.5px -204.5px;
transform: scale(0.75);
}
.text{
font-size: 28rpx;
color: #333;
text{
color: v-bind('priceColor');
}
}
}
.time {
margin-top: 30rpx;
padding-bottom: 30rpx;
font-size: 28rpx;
border-bottom: 2rpx solid #efefef;
&-item {
color: #999999;
.title {
height: 40rpx;
padding: 20rpx 0;
box-sizing: border-box;
}
.boder {
display: inline-block;
height: 18rpx;
border-right: 2rpx solid #d1d1d1;
margin: 0 20rpx;
}
.text{
display: flex;
text{
color: v-bind('priceColor');
font-size: 26rpx;
}
}
}
}
}
.good-detail {
padding: 30rpx;
word-wrap: break-word;
background-color: #fff;
}
.goods-group {
margin-top: 20rpx;
.tit_msg{
font-size: 30rpx;
font-weight: bold;
padding: 20rpx 30rpx;
background: #fff;
}
&-name,
&-more {
background-color: #fff;
}
&-name {
padding: 30rpx;
font-size: 28rpx;
}
&-more {
text-align: center;
height: 90rpx;
line-height: 90rpx;
color: #b1acac;
font-size: 26rpx;
}
}
.goods-item {
display: flex;
background-color: #fff;
padding: 30rpx;
border-bottom: 1rpx solid #f0f0f0;
.left {
margin-right: 14rpx;
width: 240rpx;
height: 240rpx;
border-radius: 10rpx;
overflow: hidden;
position: relative;
.tip {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 24rpx;
width: 100%;
text-align: center;
height: 36rpx;
line-height: 36rpx;
}
.tag{
background: v-bind('Color');
position: absolute;
top: 0;
left: 0;
padding: 4rpx 8rpx;
font-size: 22rpx;
color: #fff;
border-radius: 10rpx 0 10rpx 0;
}
.img {
width: 100%;
height: 100%;
background: #999999;
}
}
.right {
flex-direction: column;
justify-content: space-between;
font-size: 30rpx;
flex: 1;
overflow: hidden;
.title {
color: #2c2c2c;
&.large{
font-size: 40rpx;
}
}
.vip {
display: flex;
align-items: center;
color: v-bind('priceColor');
.price {
font-size: 34rpx;
font-weight: bold;
.icon {
font-size: 24rpx;
}
}
}
.total {
font-size: 30rpx;
color: v-bind('priceColor');
}
.text {
display: flex;
justify-content: space-between;
font-size: 24rpx;
}
.btn {
display: flex;
justify-content: flex-end;
text {
font-size: 28rpx;
color: #fff;
background: $Color3;
border-radius: 5rpx;
height: 62rpx;
line-height: 62rpx;
width: 165rpx;
text-align: center;
}
}
}
}
.dis {
opacity: 0.65;
}
.goods-record {
background-color: #fff;
position: relative;
z-index: 100;
border-top: 20rpx solid #F5F5F5;
.title {
font-size: 30rpx;
font-weight: bold;
padding: 40rpx 30rpx;
}
.list {
padding: 0 30rpx;
.item {
display: flex;
align-items: center;
font-size: 26rpx;
padding-bottom: 30rpx;
.id {
font-size: 30rpx;
margin-right: 20rpx;
}
image {
width: 70rpx;
height: 70rpx;
background: #98989f;
margin-right: 15rpx;
}
.text {
color: #98989f;
overflow: hidden;
flex: 1;
.bottom {
display: flex;
}
.name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.num {
color: v-bind('priceColor');
flex-shrink: 0;
}
}
}
}
.more {
font-size: 30rpx;
text-align: center;
padding: 30rpx 0;
border-top: 2rpx solid #e9e9e9;
}
}
.goods-btn {
position: fixed;
bottom: 0;
display: flex;
align-items: center;
width: 100%;
height: 110rpx;
background: #ffffff;
box-shadow: 0rpx 3rpx 20rpx rgba(0, 0, 0, 0.16);
box-sizing: border-box;
z-index: 201;
&-icon {
font-size: 24rpx;
width: 100rpx;
position: relative;
text-align: center;
border-right: 2rpx solid #e9e9e9;
.badge{
position: absolute;
top: -10rpx;
left: 60rpx;
background-color: v-bind('tagColor');
color: #fff;
display: inline-block;
line-height: 1;
padding: 2px 4px;
border-radius: 10px;
}
.addtip{
position: absolute;
bottom: 120rpx;
left: 50%;
margin-left: -80rpx;
padding: 16rpx 0 16rpx 12rpx;
background-color: v-bind('bgColor');
display: flex;
align-items: center;
&::before{
width: 0;
height: 0;
left: 60rpx;
top: 100%;
border-left: 20rpx solid transparent;
border-right: 20rpx solid transparent;
border-top: 20rpx solid v-bind('bgColor');
content: '';
position: absolute;
}
.hand{
width: 46rpx;
height: 46rpx;
margin-right: 10rpx;
animation: myfirst 1s infinite;
margin-top: 5px;
}
@keyframes myfirst {
0% {
transform: translate(0px, 0px);
}
50% {
transform: translate(0px, -5px);
}
100% {
transform: translate(0px, 0px);
}
}
.txt{
max-width: 400rpx;
width: max-content;
font-size: 28rpx;
line-height: 50rpx;
text-align: left;
}
.cross{
width: 80rpx;
height: 50rpx;
}
}
}
&-icon:nth-child(3) {
border: none;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex: 1;
height: 100%;
color: #fff;
background: v-bind('Color');
font-size: 32rpx;
line-height: inherit;
border-radius: 0;
.aux{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.price{
display: flex;
align-items: baseline;
flex-wrap: wrap;
line-height: 1;
margin-bottom: 10rpx;
.icon{
font-size: 22rpx;
}
.txt{
font-size: 32rpx;
font-weight: 600;
}
.yh{
font-size: 24rpx;
opacity: 0.8;
}
}
.renshu{
font-size: 28rpx;
opacity: 0.8;
}
}
.mid{
font-size: 28rpx;
}
.large{
font-size: 38rpx;
}
.total{
font-weight: 600;
font-size: 34rpx;
}
&.hui{
opacity: 0.65;
color: #eee;
}
.item {
display: flex;
align-items: center;
image {
width: 35rpx;
}
}
}
.disabled{
opacity: 0.7;
}
.countDown{
text{
color: #fff;
font-size: 28rpx;
}
}
}
.goods-sale{
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #fff;
height: 110rpx;
z-index: 201;
&-item{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
font-size: 26rpx;
color: v-bind('priceColor');
position: relative;
&:after{
content: '';
position: absolute;
top: 50%;
width: 1px;
height: 36rpx;
margin-top: -18rpx;
background-color: #d8d8d8;
right: 0;
}
.icon{
background-repeat: no-repeat;
background-size: 900px 900px;
height: 21px;
width: 21px;
transform: scale(0.8);
&.icon1{
background-position: -193.5px -563px;
&.color0{
background-position: -193.5px -563px;
}
&.color1{
background-position: -193.5px -597.5px;
}
&.color2{
background-position: -193.5px -631.5px;
}
&.color3{
background-position: -193.5px -664px;
}
&.color4{
background-position: -193.5px -698.5px;
}
}
&.icon2{
background-position: -243.5px -563px;
&.color0{
background-position: -243.5px -563px;
}
&.color1{
background-position: -243.5px -597.5px;
}
&.color2{
background-position: -243.5px -631.5px;
}
&.color3{
background-position: -243.5px -664px;
}
&.color4{
background-position: -243.5px -698.5px;
}
}
&.icon4{
background-position: -293.5px -563px;
&.color0{
background-position: -293.5px -563px;
}
&.color1{
background-position: -293.5px -597.5px;
}
&.color2{
background-position: -293.5px -631.5px;
}
&.color3{
background-position: -293.5px -664px;
}
&.color4{
background-position: -293.5px -698.5px;
}
}
}
}
.volume{
flex-direction: column;
.sbl{
font-size: 24rpx;
.nub{
font-size: 26rpx;
}
}
.per{
font-size: 22rpx;
color: #666666;
}
}
&-item:last-child{
&:after{
width: 0;
}
}
}
.suspendBtn{
position: fixed;
left: 50%;
transform: translate(-50%, 0);
background-color: #fff;
font-size: 30rpx;
color: #999;
border-radius: 40rpx;
padding: 5rpx 20rpx;
box-shadow: 0rpx 3rpx 20rpx rgba(0, 0, 0, 0.16);
z-index: 101;
}
.commentBox{
padding: 30rpx;
background-color: #fff;
position: relative;
z-index: 100;
border-top: 20rpx solid #F5F5F5;
.toptitle{
display: flex;
align-items: center;
justify-content: space-between;
.num{
font-size: 30rpx;
font-weight: bold;
}
.more{
font-size: 28rpx;
}
}
.commentlist{
.item{
margin-top: 30rpx;
.itemtop{
display: flex;
justify-content: space-between;
.user{
display: flex;
flex: 1;
.avatar{
width: 70rpx;
height: 70rpx;
border-radius: 50%;
margin-right: 12rpx;
}
.right{
font-size: 24rpx;
flex: 1;
.time{
color: #98989f;
}
}
}
.date{
font-size: 24rpx;
color: #999;
white-space: nowrap;
line-height: 70rpx;
}
}
.text{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: break-spaces;
margin-top: 16rpx;
font-size: 28rpx;
}
.rate{
display: flex;
align-items: center;
margin-top: 5px;
.star{
margin-right: 3px;
}
}
}
}
}
.sale-goods{
padding: 30rpx;
box-sizing: border-box;
.vanbox{
max-height: 65vh;
overflow: auto;
margin-bottom: 30rpx;
.qaTxt{
color: #333;
font-size: 28rpx;
line-height: 46rpx;
margin-bottom: 30rpx;
}
}
.row{
font-size: 24rpx;
line-height: 50rpx;
.zip{
word-break: break-all;
}
.download{
color: #007aff;
margin-left: 20rpx;
}
}
&-item{
padding: 10rpx 0;
border-bottom: 1rpx solid #e5e5e5;
.share{
border: 1rpx solid v-bind('Color');
border-radius: 6rpx;
padding: 4rpx 10rpx;
margin-left: 20rpx;
font-size: 22rpx;
color: v-bind('Color');
display: inline;
line-height: 1;
}
}
.title{
font-size: 34rpx;
text-align: center;
padding-bottom: 30rpx;
font-weight: 600;
position: relative;
.icon{
position: absolute;
right: 0;
top: 0;
}
}
.price,
.item{
padding: 10rpx 0;
font-size: 28rpx;
}
.item {
.copy{
border: 1rpx solid #d3d3d3;
border-radius: 6rpx;
padding: 2rpx 10rpx;
margin-left: 20rpx;
font-size: 22rpx;
line-height: 1;
display: inline-block;
}
}
.price {
.commission {
color: v-bind('Color');
}
.sku {
margin-top: 10rpx;
}
}
.btnbox{
width: 100%;
.btn{
height: 86rpx;
width: 100%;
background-color: v-bind('Color');
color: #fff;
font-size: 30rpx;
border-radius: 49rpx;
}
}
}
&-tip{
position: fixed;
bottom: 110rpx;
width: 100%;
background-color: #fff3cd;
color: #f66d2d;
font-size: 28rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
z-index: 100;
}
}
.payTips{
position: fixed;
bottom: 110rpx;
width: 100%;
background-color: #fff3cd;
z-index: 100;
color: #f66d2d;
.swiper{
height: 70rpx;
}
&.btm{
bottom: 220rpx;
}
.timeTips{
height: 70rpx;
padding: 0 20rpx;
text-align: left;
text{
font-size: 28rpx;
}
}
}
.down{
width: 100rpx;
height: 100rpx;
background-color: #007aff;
color: #ffffff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video{
display: block;
}
.good_box{
height: calc(70vh - 270rpx);
.edition{
padding-bottom: 50rpx;
}
.edition_box{
margin: 8rpx 0;
position: relative;
padding: 0 20rpx;
.background{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
image{
width: 30px;
height: 30px;
}
}
.img{
width: 100%;
}
.small_img{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.imgs{
width: calc(33% - 11rpx);
height: 220rpx;
margin: 16rpx 16rpx 0 0;
image{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.imgs:nth-child(3n+3){
margin: 16rpx 0 0 0;
}
}
.text{
line-height: 55rpx;
font-size: 30rpx;
color: #222;
}
}
}
.sku-top{
height: 70vh;
overflow: hidden;
position: relative;
.img{
width: 150rpx;
height: 150rpx;
background: #bbbbbb;
border-radius: 8rpx;
margin-right: 30rpx;
transition: all 0.3s;
}
.sku-top-box{
border-bottom: 1rpx solid #eee;
padding-bottom: 10rpx;
display: flex;
padding: 30rpx;
justify-content: space-between;
.goodcol{
width: calc(100% - 180rpx);
.tit{
width: calc(100% - 70rpx);
margin-bottom: 8rpx;
}
}
.pricebox{
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20rpx;
.text1{
font-size: 34rpx;
color: #f66d2d;
font-weight: 600;
margin-right: 12rpx;
}
.icon1{
font-size: 24rpx;
}
.vip{
display: flex;
align-items: center;
font-size: 34rpx;
color: #f66d2d;
font-weight: bold;
}
}
.text{
font-size: 24rpx;
color: #999999;
}
}
.sku_box{
border-bottom: 1rpx solid #eee;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
.red{
color: #f56a18;
margin-left: 10rpx;
}
.item1{
display: inline-block;
image{
width: 50rpx;
height: 50rpx;
margin-right: 10rpx;
border-radius: 5rpx;
}
}
}
.sku-buy{
display: flex;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #eee;
font-size: 28rpx;
margin-bottom: 30rpx;
.imgbb{
width: 50rpx;
height: 50rpx;
margin-left: -10rpx;
border: 4rpx solid #fff;
box-sizing: border-box;
image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
.red{
color: v-bind('priceColor');
}
}
.addbtn{
background-color: #fff;
position: absolute;
bottom: 0;
left: 0;
height: 104rpx;
width: 100%;
}
.btn{
position: absolute;
height: 104rpx;
color: #fff;
font-size: 30rpx;
background: v-bind('Color');
width: 100%;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
left: 0;
}
}
.swiper-img{
width: 30px;
height: 30px;
}
.goods-bar-icon{
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.broadcast{
height: 60rpx;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
color: #fff;
font-size: 24rpx;
border-radius: 36px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10rpx;
box-sizing: border-box;
line-height: 60rpx;
position: absolute;
bottom: 40%;
left: 30rpx;
.broadcast-time{
margin-left: 10rpx;
}
}
.couponBox{
width: 640rpx;
background: #ffff;
border-radius: 15rpx;
.couponTitle{
text-align: center;
line-height: 110rpx;
font-size: 30rpx;
font-weight: bold;
}
.couponBtn{
width: 90%;
height: 80rpx;
background: #f14939;
margin: 30rpx auto;
border-radius: 15rpx;
text-align: center;
line-height: 80rpx;
color: #fff;
}
.coupon{
margin-bottom: 20rpx;
}
.couponImg{
width: 90%;
height: 180rpx;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.couponmoney{
position: absolute;
top: 50%;
left: 7%;
transform: translateY(-50%);
color: #f14939;
.sign{
font-size: 28rpx;
color: #f14939;
}
.money{
font-size: 48rpx;
font-weight: bold;
}
.tit{
font-size: 24rpx;
text-align: center;
}
}
.coupontype{
position: absolute;
left: 36%;
top: 40rpx;
font-size: 30rpx;
font-weight: bold;
color: #f14939;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 54%;
}
.coupontime{
position: absolute;
left: 36%;
top: 105rpx;
font-size: 22rpx;
color: #98989f;
}
}
.scrolly{
min-height: 160rpx;
max-height: calc(60vh - 200rpx);
}
.goodqa{
display: flex;
align-items: center;
}
.imgbox{
padding: 20rpx 0;
.img{
width: 100%;
border-radius: 0;
}
}
.sucai{
box-shadow: 0 -1px 9px #ebedf0;
border-radius: 6rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 20rpx 20rpx 30rpx;
margin-top: 24rpx;
.tit{
font-size: 30rpx;
font-weight: bold;
}
.right{
width: calc(100% - 150rpx);
display: flex;
justify-content: space-between;
align-items: center;
.itm{
height: 70rpx;
border-left: 1px solid #F2F2F2;
display: flex;
align-items: center;
.img{
width: 70rpx;
height: 70rpx;
margin-right: 20rpx;
border-radius: 6rpx;
vertical-align: bottom;
}
}
.btn{
background: v-bind('Color');
color: #fff;
font-size: 24rpx;
padding: 8rpx 16rpx;
border-radius: 8rpx;
display: flex;
}
}
}
.sunsheet{
padding: 20rpx 0;
background: #fff;
border-bottom: 1px solid #F2F2F2;
.tit{
display: flex;
font-size: 30rpx;
font-weight: bold;
align-items: center;
justify-content: space-between;
text{
font-size: 28rpx;
font-weight: normal;
}
}
.sunbox{
display: flex;
flex-wrap: wrap;
.itm{
width: 32%;
height: 0;
position: relative;
padding-top: 32%;
margin-right: 2%;
margin-top: 20rpx;
&:nth-child(3n+3){
margin-right: 0;
}
.img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
}
}
}
.qabox{
padding: 20rpx 0;
background: #fff;
border-bottom: 1px solid #F2F2F2;
.tit{
display: flex;
font-size: 30rpx;
font-weight: bold;
align-items: center;
justify-content: space-between;
text{
font-size: 28rpx;
font-weight: normal;
}
}
.god{
padding-top: 20rpx;
.tt{
font-size: 28rpx;
line-height: 60rpx;
}
}
}
.red_paper{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding-top: 80rpx;
box-sizing: border-box;
.block{
position: relative;
width: 76%;
.close_red_paper{
position: absolute;
right: 0;
top: -80rpx;
}
.red_paper_img{
width: 100%;
height: auto;
}
.openbox{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
padding-top: 25%;
box-sizing: border-box;
.tit{
font-size: 40rpx;
color: #6F3C20;
}
.price{
margin: 30rpx 0;
font-size: 50rpx;
font-weight: bold;
color: #6F3C20;
line-height: 1;
text{
font-size: 100rpx;
}
}
.text{
background: #F14939;
color: #FFDB62;
font-size: 30rpx;
line-height: 40rpx;
padding: 8rpx 20rpx;
max-width: 70%;
display: inline-block;
}
.btn{
color: #F14939;
font-size: 36rpx;
width: 80%;
height: 11.8%;
bottom: 12.3%;
position: absolute;
left: 10%;
display: flex;
align-items: center;
justify-content: center;
}
}
.open{
position: absolute;
width: 120px;
height: 120px;
top: 50%;
left: 50%;
margin-left: -60px;
text-align: center;
animation-name: scaleDraw;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
}
@keyframes scaleDraw {
0% {
transform: scale(1);
}
25% {
transform: scale(1.05);
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.05);
}
}
.openbox1{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
padding-top: 25%;
box-sizing: border-box;
.price{
margin: 30rpx 0;
font-size: 50rpx;
font-weight: bold;
color: #FC3733;
line-height: 1;
text{
font-size: 100rpx;
}
}
.text{
color: #C17C65;
font-size: 30rpx;
line-height: 40rpx;
padding: 8rpx 20rpx;
display: inline-block;
}
.btn{
color: #F14939;
font-size: 36rpx;
font-weight: bold;
width: 80%;
height: 14.8%;
bottom: 10.3%;
position: absolute;
left: 10%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.red_label{
margin-top: 20rpx;
.red_col{
font-size: 24rpx;
color: #F14939;
padding: 4rpx 14rpx;
background: rgba(241,73,57,0.1);
border: 1px solid #F14939;
display: inline-block;
border-radius: 6rpx;
&.red_col1{
border-right: none;
}
&.red_col2{
border-left: 1px dashed #F14939;
}
&.disable{
opacity: 0.7;
}
&.receive1{
background: linear-gradient(to right , rgba(241,73,57,0.8), #F14939);
color: #fff;
border: none;
}
&.receive2{
background: #F14939;
border: none;
border-left: 1px dashed #fff;
color: #fff;
}
}
}
.couBox{
display: flex;
flex-wrap: wrap;
.itm{
padding: 32rpx 24rpx 32rpx 0;
display: flex;
align-items: center;
background-color: #FFF8F1;
width: 100%;
margin-top: 20rpx;
position: relative;
border-radius: 10rpx;
border: 1px solid #F14939;
&::before{
position: absolute;
left: 25%;
top: -2rpx;
width: 28rpx;
height: 14rpx;
margin-left: -20rpx;
content: '';
background-color: #fff;
border: 1px solid #F14939;
border-top: none;
border-radius: 0 0 14rpx 14rpx;
z-index: 2;
box-sizing: border-box;
}
&::after{
position: absolute;
left: 25%;
bottom: -2rpx;
width: 28rpx;
height: 14rpx;
margin-left: -20rpx;
content: '';
background-color: #fff;
border: 1rpx solid #F14939;
border-bottom: none;
border-radius: 14rpx 14rpx 0 0;
z-index: 2;
box-sizing: border-box;
}
.sign{
font-weight: 600;
font-size: 30rpx;
color: #F14939;
width: 25%;
height: 100%;
border-right: 2rpx dashed rgba(241,73,57,0.5);
box-sizing: border-box;
.money{
font-size: 48rpx;
}
}
.mid{
flex: 1;
font-size: 30rpx;
color: #333;
padding-left: 24rpx;
.tit{
font-weight: 600;
}
text{
font-size: 24rpx;
color: #555;
}
}
.recv{
width: 140rpx;
height: 50rpx;
border-radius: 60rpx;
background-color: #F14939;
font-size: 28rpx;
color: #fff;
&.dis{
opacity: 0.5;
}
}
}
}
.per100{
width: 100%;
}
.per50{
min-width: 50%;
}
.per47{
min-width: 47%;
}
.typeBox{
height: 90rpx;
border-bottom: 1px solid #dfdfdf;
display: flex;
align-items: center;
justify-content: space-around;
background: #fff;
box-sizing: border-box;
.col{
color: #646566;
font-size: 28rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: relative;
&.active:after{
position: absolute;
bottom: 0;
left: 50%;
bottom: 0;
width: 40px;
height: 3px;
margin-left: -20px;
content: '';
background: v-bind('Color');
}
}
}
.bbox{
&.shux{
display: flex;
}
.left{
&.shux{
width: 200rpx;
background: #F5F5F5;
}
}
.typeBox{
&.shux{
display: block;
flex-direction: column;
background: transparent;
width: 200rpx;
border-bottom: none;
height: calc(100vh - 152px);
overflow: auto;
position: sticky;
.col{
height: auto;
padding: 30rpx 20rpx;
border-left: 3px solid #F5F5F5;
box-sizing: border-box;
width: 100%;
justify-content: flex-start;
&.active{
border-left: 3px solid v-bind('Color');
background: #fff;
&:after{
display: none;
}
}
}
}
}
.goodBox{
&.shux{
width: calc(100% - 200rpx);
position: relative;
z-index: 100;
.left{
width: 140rpx;
height: 140rpx;
}
}
}
}
.empty{
width: 100%;
}
.vvbox{
padding: 0 30rpx;
background: #fff;
}
.tabsBox{
width: 100%;
height: 37px;
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
top: 0;
background-color: #fff;
z-index: 101;
.col{
font-size: 30rpx;
color: #222;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
border-bottom: 2px solid #fff;
&.active{
border-bottom: 2px solid v-bind('Color');
color: v-bind('Color');
font-weight: 600;
}
}
}
.vanBox{
width: 100%;
margin-top: -75rpx;
padding: 0 30rpx;
position: relative;
z-index: 10;
box-sizing: border-box;
background: linear-gradient(to bottom , rgba(255,255,255,0.01), rgba(255,255,255,1));
.shop_info{
width: 100%;
padding: 30rpx 20rpx 20rpx;
box-sizing: border-box;
background: linear-gradient(to bottom , rgba(255,255,255,0.6), #f9f9f9);
border-radius: 10rpx;
.one{
display: flex;
align-items: center;
justify-content: space-between;
}
.logobox{
display: flex;
align-items: center;
.img{
width: 80rpx;
height: 80rpx;
background: #fff;
box-shadow: 0rpx 3rpx 6rpx rgba(0, 0, 0, 0.16);
border-radius: 10rpx;
margin-right: 20rpx;
}
.name{
font-size: 30rpx;
font-weight: bold;
}
}
.sub_box{
.row{
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
width: 120rpx;
height: 44rpx;
border-radius: 8rpx;
box-sizing: border-box;
position: relative;
.row2{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: v-bind('Color');
color: #fff;
border-radius: 8rpx;
&.bai{
opacity: 0.5;
}
}
&.row1{
background: #fff;
color: v-bind('Color');
border: 1px solid v-bind('Color');
.iconfont{
font-size: 12px;
}
}
.redBox{
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 24rpx;
display: flex;
align-items: center;
line-height: 1;
padding: 8rpx 12rpx;
top: -70rpx;
white-space: nowrap;
border-radius: 6rpx;
.img{
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: 452px 408px;
background-position: -259.67px -136.67px;
}
&:after{
content: "";
width: 0px;
height: 0px;
border-top: 10rpx solid rgba(0, 0, 0, 0.8);
border-left: 10rpx solid transparent;
border-right: 10rpx solid transparent;
position: absolute;
bottom: -10rpx;
left: 50%;
margin-left: -5rpx;
}
}
}
}
.desc{
font-size: 24rpx;
color: #666;
line-height: 42rpx;
padding: 12rpx 0;
}
.vip_desc{
font-size: 24rpx;
color: #666;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16rpx;
border-top: 1px solid #F2F2F2;
.tit{
display: flex;
align-items: center;
font-size: 24rpx;
color: #555;
&.score{
width: 50%;
padding-left: 20rpx;
box-sizing: border-box;
border-left: 1px solid #D1D1D1;
}
}
&.er{
.tit{
width: 50%;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-right: 10rpx;
}
}
.text{
font-size: 22rpx;
color: #999;
display: flex;
}
.hg{
width: 15px;
height: 15px;
margin-right: 6rpx;
background-repeat: no-repeat;
background-size: 226px 204px;
background-position: -136.67px -91.33px;
}
}
}
}
.new_person{
margin-top: 24rpx;
image{
width: 100%;
border-radius: 14rpx;
vertical-align: bottom;
}
}
.viewBox{
text-align: center;
padding: 10rpx;
position: fixed;
right: 20rpx;
bottom: 240rpx;
background-color: #fff;
font-size: 24rpx;
color: #888;
border-radius: 8rpx;
z-index: 101;
box-shadow: 0rpx 3rpx 20rpx rgba(0, 0, 0, 0.16);
.swiperBox{
width: 120rpx;
height: 120rpx;
.img {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
}
.num{
color: #fff;
background: rgba(0, 0, 0, 0.36);
width: 36rpx;
height: 36rpx;
top: 10rpx;
right: 10rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 8rpx 0 8rpx;
position: absolute;
}
.text{
margin-top: 8rpx;
}
}
.movableArea{
position: fixed;
top: 120px;
left: 20rpx;
width: calc(100% - 40rpx);
height: calc(100vh - 240px);
pointer-events: none;
z-index: 100;
}
.movableView{
pointer-events: auto;
}
.videoBox{
text-align: center;
// position: fixed;
// right: 20rpx;
background-color: #fff;
font-size: 24rpx;
color: #fff;
border-radius: 8rpx;
z-index: 101;
box-shadow: 0rpx 3rpx 20rpx rgba(0, 0, 0, 0.16);
overflow: hidden;
video{
vertical-align: bottom;
}
.text{
padding: 4rpx 0;
background-color: v-bind('Color');
}
.close{
position: absolute;
right: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.16);
padding: 0 2px;
z-index: 10;
}
}
.move_img {
display: inline-block;
font-size: 24rpx;
color: #fff;
margin: 3px 10px 3px 0;
background-image: url('@/static/image/move_img.png');
background-repeat: no-repeat;
padding: 0px 3px 0px 12px;
height: 40rpx;
background-size: 100% 100%;
line-height: 40rpx;
font-weight: normal;
}
.caseBox{
padding: 40rpx;
box-sizing: border-box;
.tit{
font-size: 30rpx;
color: #000;
font-weight: 600;
padding: 40rpx;
text-align: center;
line-height: 50rpx;
}
.copycase{
display: flex;
align-items: center;
justify-content: center;
height: 80rpx;
width: 100%;
border-radius: 8rpx;
background: #F14939;
font-size: 26rpx;
color: #fff;
}
.title{
font-size: 30rpx;
color: #000;
font-weight: 600;
padding: 20rpx 0 40rpx;
text-align: center;
}
.num{
text-align: center;
font-size: 28rpx;
padding-bottom: 40rpx;
text{
color: #F14939;
font-weight: 600;
font-size: 36rpx;
}
}
}
.supplyBox{
margin-top: 20rpx;
border-radius: 8rpx;
padding: 32rpx 24rpx;
display: flex;
align-items: center;
background-color: #fff;
image{
width: 46px;
height: 46px;
margin-right: 24rpx;
border-radius: 6rpx;
}
.text{
display: flex;
flex-direction: column;
color: #333;
font-size: 30rpx;
width: calc(100% - 250rpx);
.num{
font-size: 26rpx;
margin-top: 6rpx;
}
text{
font-weight: bold;
}
}
.shouc{
padding: 10rpx;
width: 180rpx;
height: 56rpx;
border: 1px solid v-bind('Color');
color: v-bind('Color');
font-size: 26rpx;
border-radius: 56rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
}
.cartBox{
.Tit{
font-size: 30rpx;
display: flex;
align-items: center;
height: 80rpx;
border-bottom: 1px solid #eee;
padding: 0 24rpx;
font-weight: 600;
}
.bbox{
height: 75vh;
overflow: auto;
padding: 0 24rpx 110rpx;
box-sizing: border-box;
.item{
display: flex;
justify-content: space-between;
padding: 24rpx 0;
border-bottom: 1px solid #F5F5F5;
image{
width: 200rpx;
height: 200rpx;
border-radius: 8rpx;
margin-right: 24rpx;
}
.info{
flex: 1;
display: flex;
flex-direction: column;
min-height: 200rpx;
justify-content: space-between;
.name{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 28rpx;
line-height: 36rpx;
margin-bottom: 6rpx;
}
.sku{
display: inline-block;
font-size: 24rpx;
color: #999999;
background: #f7f8fa;
border-radius: 5rpx;
padding: 4rpx 14rpx;
}
.price{
&-left{
color: v-bind('Color');
font-weight: 600;
.icon{
font-size: 24rpx;
}
.text{
font-size: 34rpx;
}
}
}
}
}
}
}
@keyframes animate {
0% {
transform: translateX(-15px);
}
100% {
transform: translateX(0);
}
}
@keyframes enter {
0% {
transform: translateX(-15px);
transform: scale(0);
}
100% {
transform: translateX(0);
transform: scale(1);
}
}
@keyframes leave {
0% {
transform: translateX(-15px);
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 0;
}
}
.scrBox{
display: flex;
align-items: center;
padding-left: 15px;
width: 66px;
margin-right: -10px;
.row{
width: 30px;
height: 30px;
border: 1px solid v-bind('Color');
position: relative;
margin-left: -15px;
border-radius: 50%;
box-sizing: border-box;
.img{
width: 100%;
height: 100%;
border-radius: 50%;
}
&:nth-child(1){
z-index: 4;
}
&:nth-child(2){
z-index: 3;
}
&:nth-child(3){
z-index: 2;
}
&:nth-child(4){
z-index: 1;
}
&.enter{
animation: enter 0.5s forwards;
}
&.leave{
animation: leave 0.5s forwards;
}
&.animate{
animation: animate 0.5s forwards;
}
}
}
</style>
<style scoped>
.goodBox.shux ::v-deep .up-sticky-wrap--fixed{
width: calc(100% - 200rpx);
left: 200rpx;
}
</style>
Reference in New Issue View Git Blame Copy Permalink