唐古拉优选拼团系统开发部分核心代码分享:

这是一个关于唐古拉优选拼团系统的前端页面模板代码展示,包括商品展示、价格、销量信息、用户评价、产品介绍等模块。用户可以查看商品详情、拼团状态、参与拼团或单独购买,并提供了收藏和客服功能。
摘要由CSDN通过智能技术生成

<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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值