<template>
<div
:class="[posterImageStatus ? 'noscroll product-con' : 'product-con']"
v-show="domStatus"
@scroll.native="onScroll"
>
<div
class="header acea-row row-center-wrapper"
:style="'opacity:' + opacity"
ref="header"
>
<div
class="item"
:class="navActive === index ? 'on' : ''"
v-for="(item, index) in navList"
:key="index"
@click="asideTap(index)"
>
{{ item }}
</div>
</div>
<div id="title0">
<ProductConSwiper :imgUrls="imgUrls"></ProductConSwiper>
<div class="wrapper">
<div class="share acea-row row-between row-bottom">
<div class="money font-color-red">
¥<span class="num" v-text="storeInfo.price"></span
><span
class="y-money"
v-text="'¥' + storeInfo.product_price"
></span>
</div>
<div
class="iconfont icon-fenxiang"
@click="setPosterImageStatus"
></div>
</div>
<div class="introduce" v-text="storeInfo.title"></div>
<div class="label acea-row row-between-wrapper">
<div v-text="'类型:' + storeInfo.people + '人团'"></div>
<div>累计销量:{{ storeInfo.total ? storeInfo.total : 0 }} 件</div>
<div>
限量: {{ storeInfo.quota_show ? storeInfo.quota_show : 0 }}件
</div>
</div>
</div>
<div
class="attribute acea-row row-between-wrapper"
@click="selecAttrTap"
v-if="attr.productAttr.length !== 0"
>
<div>
{{ attrTxt }}:<span class="atterTxt">{{ attrValue }}</span>
</div>
<div class="iconfont icon-jiantou"></div>
</div>
<div class="notice acea-row row-middle">
<div class="num font-color-red">
<span class="iconfont icon-laba"></span>已拼{{ storeInfo.sales
}}{{ storeInfo.unit_name }}<span class="line">|</span>
</div>
<div class="swiper-no-swiping swiper">
<swiper class="swiper-wrapper" :options="swiperTip">
<swiperSlide
class="swiper-slide"
v-for="(item, index) in itemNew"
:key="index"
>
<div class="line1">{{ item }}</div>
</swiperSlide>
</swiper>
</div>
</div>
<div class="assemble">
<div v-if="groupList">
<div v-for="(item, index) in groupList" :key="index">
<div
class="item acea-row row-between-wrapper"
v-if="index < groupListCount"
>
<div class="pictxt acea-row row-between-wrapper">
<div class="pictrue">
< img :src="item.avatar" class="image" />
</div>
<div class="text line1" v-text="item.nickname"></div>
</div>
<div class="right acea-row row-middle">
<div>
<div class="lack">
还差<span class="font-color-red" v-text="item.count"></span
>人成团
</div>
<CountDown
:is-day="false"
:tip-text="'剩余 '"
:day-text="''"
:hour-text="':'"
:minute-text="':'"
:second-text="''"
:datatime="item.stop_time"
></CountDown>
</div>
<div class="spellBnt" @click="groupRule(item.id)">
去拼单<span class="iconfont icon-jiantou"></span>
</div>
</div>
</div>
</div>
</div>
<div
class="more"
v-if="groupList.length > groupListCount"
@click="setGroupListCount"
>
查看更多<span class="iconfont icon-xiangxia"></span>
</div>
</div>
<div class="playWay">
<div class="title acea-row row-between-wrapper">
<div>拼团玩法</div>
</div>
<div class="way acea-row row-middle">
<div class="item way_font"><span class="num">①</span>开团/参团</div>
<div class="iconfont icon-arrow"></div>
<div class="item way_font"><span class="num">②</span>邀请好友</div>
<div class="iconfont icon-arrow"></div>
<div class="item way_font">
<div><span class="num">③</span>满员发货</div>
</div>
</div>
</div>
</div>
<div class="userEvaluation" id="title1">
<div class="title acea-row row-between-wrapper">
<div v-text="'用户评价(' + replyCount + ')'"></div>
<div class="praise" @click="goReply">
<span class="font-color-red" v-text="replyChance + '%'"></span
>好评率<span class="iconfont icon-jiantou"></span>
</div>
</div>
<UserEvaluation :reply="reply" v-if="reply.length !== 0"></UserEvaluation>
</div>
<div class="product-intro" id="title2">
<div class="title">产品介绍</div>
<div class="conter" v-html="storeInfo.description"></div>
</div>
<div style="height:1.2rem;"></div>
<div class="footer-group product-con acea-row row-between-wrapper">
<div
class="customerSer acea-row row-center-wrapper row-column"
@click="$router.push({ path: '/customer/list' })"
>
<div class="iconfont icon-kefu"></div>
<div>客服</div>
</div>
<div
class="item acea-row row-center-wrapper row-column"
@click="setCollect"
>
<div
class="iconfont"
:class="storeInfo.userCollect ? 'icon-shoucang1' : 'icon-shoucang'"
></div>
<div>收藏</div>
</div>
<div
class="bnt acea-row"
v-if="
attr.productSelect.quota > 0 && attr.productSelect.product_stock > 0
"
>
<div class="joinCart" @click="openAlone">单独购买</div>
<div class="buy" @click="openTeam">立即开团</div>
</div>
<div
class="bnt acea-row"
v-if="
attr.productSelect.quota <= 0 || attr.productSelect.product_stock <= 0
"
>
<div class="joinCart" @click="openAlone">单独购买</div>
<div class="buy bg-color-hui">已售罄</div>
</div>
</div>
<ProductWindow v-on:changeFun="changeFun" :attr="attr"></ProductWindow>
<StorePoster
v-on:setPosterImageStatus="setPosterImageStatus"
:posterImageStatus="posterImageStatus"
:posterData="posterData"
></StorePoster>
</div>
</template>
唐古拉优选拼团系统开发部分核心代码分享:
最新推荐文章于 2022-09-22 17:27:13 发布
这是一个关于唐古拉优选拼团系统的前端页面模板代码展示,包括商品展示、价格、销量信息、用户评价、产品介绍等模块。用户可以查看商品详情、拼团状态、参与拼团或单独购买,并提供了收藏和客服功能。
摘要由CSDN通过智能技术生成