UNi-APP多端商品列表瀑布流页商品详情页

<template>
  <view class="container">
    <!-- 消息提醒 -->
    <u-toast ref="uToast" />
    <!-- end -->
    <view v-if="IsSkelttion">
      <easy-skeleton :SkelttionType="SkelttionType"> </easy-skeleton>
    </view>
    <!-- 气泡弹窗 -->
    <view class="" v-else>
      <!--banner-->
      <view class="tui-banner-swiper">
        <swiper
          :autoplay="true"
          style="min-height: 600rpx"
          :duration="1000"
          :circular="true"
          :style="{ height: scrollH + 'px' }"
          @change="bannerChange"
        >
          <block v-for="(item, index) in shopList.picArr" :key="index">
            <swiper-item :data-index="index" style="min-height: 600rpx">
              <u-image
                :src="item"
                :show-error="true"
                height="650"
                mode="widthFix"
                :style="{ minheight: scrollH + 'px' }"
                duration="450"
              >
                <!-- <view slot="error" style="font-size: 24rpx;"></view> -->
              </u-image>
            </swiper-item>
          </block>
        </swiper>
        <!-- 弹幕 -->
        <view class="barrageView">
          <swiper
            :autoplay="true"
            :interval="3000"
            vertical="true"
            :duration="1500"
            :circular="true"
            :style="{ height: 45 + 'px' }"
          >
            <block v-for="(item, index) in list" :key="index">
              <swiper-item :data-index="index">
                <view class="barrview">
                  <image :src="item.avatar" class="barrviewImg"></image>
                  <view class="">
                    {
    
    { item.address }}{
    
    { item.phone }}已抢购
                  </view>
                </view>
              </swiper-item>
            </block>
          </swiper>
        </view>
        <!-- 弹幕 -->
        <view class="tui-banner-tag">
          <tui-tag
            padding="12rpx 18rpx"
            type="translucent"
            shape="circleLeft"
            :scaleMultiple="0.82"
            originRight
            >{
    
    { bannerIndex + 1 }}/{
    
    { picArrNum }}</tui-tag
          >
        </view>
      </view>
      <!--banner-->
      <!-- 特价标签 -->
      <view class="tui-pro-detail">
        <view class="">
          <view class="promBanner">
            <view class="bannerContent">
              <view class="col1">
                <view class="contentse mt12" v-if="shopList.attributeArr != ''"
                  ><span
                    class="mr8"
                    v-for="(item, index) in shopList.attributeArr"
                    >{
    
    { item.name }}</span
                  ></view
                >
                <view class="price"
                  ><span class="fz24" style="font-weight: normal">¥</span
                  >{
    
    { shopList.endprice
                  }}<span class="original fz24"
                    >¥{
    
    { shopList.price }}</span
                  ></view
                >
              </view>
              <view>
                <view class="status">
                  <view class="txt">正在抢购中</view>
                </view>
              </view>
            </view>
          </view>
          <!-- end -->
        </view>
        <!--  -->
        <view class="content">
          <view class="baseInfo">
            <view class="info">
              <view class="name">{
    
    { shopList.title }}</view>
              <button type="default" open-type="share" class="shareBtn">
                <a
                  class="J_ping share"
                  id="anchorShareBtn2"
                  @click="getshare"
                  v-if="isWeiXinID != 1"
                  >分享</a
                >
              </button>
              <view class="desc" v-if="shopList.introduceArr != ''"
                >推荐理由</view
              >
            </view>
            <view class="comment single-line"> </view>
          </view>
          <!-- <van-button plain type="primary">朴素按钮</van-button> -->
          <view class="rcmdBanner" v-if="shopList.introduceArr != ''">
            <view class="angleTop">
              <span class="angleContent"></span>
            </view>
            <view>
              <view class="li" v-for="(item, index) in shopList.introduceArr">
                <view class="recommendReason">
                  <view class="key">{
    
    { index + 1 }}</view
                  >{
    
    { item }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- cellView -->
        <view class="cellView" v-cloak>
          <view class="zgview">
            <image
              src=""
              mode="widthFix"
            ></image>
            <!-- <img src="../../static/img/zgimg.jpg" /> -->
          </view>
        </view>
        <!-- cellView -->
        <view class="cellView" v-cloak>
          <!--已经选择属性 -->
          <view class="cellsect" @click="showPopup">
            <view
              ><span
                style="font-weight: bolder; color: #fa3534; margin-right: 8rpx"
                >已选
              </span>
              {
    
    { skutext }} x {
    
    { num }}</view
            >
            <view class="arrow-right">
              <u-icon name="arrow-right" color="#999"></u-icon>
            </view>
          </view>
          <!--                    <u-cell-item style="font-weight: bolder;color: color:#fa3534;" :title-style="{'color':'#fa3534;'}" title="优惠券" @click="couponShow=true"></u-cell-item> -->
          <u-cell-item
            style="font-weight: bolder; color: #333"
            title="备注偏远地区先联系售后服务>>"
            @click="tellshow = true"
          ></u-cell-item>
          <!-- 限制 -->
          <!-- <van-cell>限制:该商品不可使用优惠券</van-cell> -->
          <!-- 服务 -->
          <view class="Entry">
            <view class="left" style="font-weight: bolder; color: #333"
              >服务：</view
            >
            <view class="right">
              <view class="right-item-wraper">
                <view class="right-item">不享受学生折扣</view>
                <view class="right-item">免费配送到家</view>
              </view>
              <view class="right-item-wraper">
                <view class="right-item">30天无忧退换</view>
                <view class="right-item">不享受活动优惠</view>
              </view>
              <view class="right-item-wraper">
                <view class="right-item">不可用券/红包</view>
                <view class="right-item">不享受企业折扣</view>
              </view>
              <view class="right-item-wraper">
                <view class="right-item">国内部分地区不可配送</view>
              </view> </view
            ><i class="icon u-icon u-address-right"></i>
          </view>
        </view>
        <!-- end -->
        <!-- 评价模块 -->
        <view class="tui-cmt-box tui-mtop tui-radius-all">
          <view
            class="tui-list-cell tui-last tui-between"
            v-if="evaluateList.length > 0"
          >
            <view class="tui-bold tui-cell-title">用户评价</view>
          </view>
          <view class="evaluate" v-if="evaluateList.length > 0" v-cloak>
            <view
              class="pjevaluateViews"
              v-for="(item, index) in evaluateList"
              :key="index"
              v-cloak
            >
              <view class="mdetail">
                <view class="mdrainageEntry">
                  <header class="">
                    <view class="left">
                      <!-- <van-image class="avatar" :src="item.logo">
                                                </van-image> -->
                      <image class="avatar" :src="item.logo"></image>
                      <span class="name">{
    
    { item.name }}</span
                      ><i class="u-icon u-icon-v6"></i>
                      <view class="commentRate">
                        <u-rate
                          active-color="#ffd21e"
                          v-model="item.rate"
                        ></u-rate>
                      </view>
                    </view>
                  </header>
                  <view class="extraInfo"
                    ><span class="time">{
    
    { item.dates }}</span>
                    <p class="skus">{
    
    { item.sku }}</p>
                  </view>
                  <view class="pjcontent">
                    <view class="inner">{
    
    { item.content }}</view>
                  </view>
                  <view class="commentPics">
                    <view class="mcommentPics">
                      <ul class="uli">
                        <li
                          class="item-wrap"
                          v-for="(items, index) in item.listimgs"
                        >
                          <view class="itemes">
                            <img
                              class="uimge"
                              mode="widthFix"
                              @click="getPrevew(items, index)"
                              :src="items"
                            />
                            <!-- <van-image class="uimge" @click="getPrevew(items,indexs)" :src="items">
                                                            </van-image> -->
                          </view>
                        </li>
                      </ul>
                    </view>
                  </view>
                </view>
              </view>
              <!-- <van-image-preview v-model="shoe" :images="item.listimgs" @change="onChange">
                                    <template v-slot:index>第{
    
    { Positionindex }}页</template>
                                </van-image-preview> -->
            </view>
          </view>
          <!-- end -->
        </view>

        <!-- 评价模块end -->
        <!-- /商品详情 -->
        <view class="evaluate">
          <view class="cellsect" @click="showPopup">
            <view
              ><span
                style="font-weight: bolder; color: #333; margin-right: 5rpx"
                >商品详情
              </span>
            </view>
          </view>
        </view>
        <!-- /商品参数 -->
        <view class="dtsection">
          <view class="m-attrCon">
            <u-parse :html="shopList.details"></u-parse>
          </view>
        </view>
        <!-- end -->
        <!-- 常见问题 -->
        <!-- 常见问题问答 -->
        <view class="mquestion">
          <view class="tt">
            <view class="line"> </view><span class="text">常见问题</span>
          </view>
          <view class="list">
            <view class="item">
              <p class="qu">
                <i class="u-icon u-detail-redNum"></i
                ><span>购买运费如何收取？</span>
              </p>
              <p class="an">全国包邮</p>
            </view>
            <view class="item">
              <p class="qu">
                <i class="u-icon u-detail-redNum"></i
                ><span>订单如何配送？</span>
              </p>
              <p class="an">
                根据商品所在地、顾客所在地和商品的尺寸重量优选物流配送商，确保优质用户体验。目前暂不支持自选快递，具体物流信息可在下单成功后“我的订单-追踪物流”中查看。
              </p>
            </view>
            <view class="item">
              <p class="qu">
                <i class="u-icon u-detail-redNum"></i
                ><span>如何申请退换货？</span>
              </p>
              <p class="an">
                1.支持无忧退换货的商品，自收到商品之日起在无忧退换货期限内，顾客可申请无忧退换货；食品、定作类商品、贴身衣物、积分兑换等特殊商品，无质量问题不支持退换货；<br />2.如果是退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；<br />3.退货流程：确认收
                货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；<br />4.换货流程：确认收货-申请换货-客服审核通过-用户寄回商品-仓库签收验货-客服确认-换货完成；<br />5.质量问题和平台问题退换货运费由商家承担，个人原因退货运费由用户自行承担。上门取件费用由商家统一与快递服务商结算，顾客只需将退换货商品交给上门取件快递员寄回。如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，将以现金券形式为用户报销运费，不接受单方面到付件。
              </p>
            </view>
            <view class="item">
              <p class="qu">
                <i class="u-icon u-detail-redNum"></i
                ><span>食品类商品什么情况下支持退换货？</span>
              </p>
              <p class="an">
                1.
                为了维护消费者的权益，出售的食品一经售出非质量原因，不予退货，敬请谅解；<br />2.
                生鲜食品及部分酒类产品不支持任何形式的拒签，因客户原因如联系方式有误、电话停机、不接电话、无理由拒收等造成快件无法正常签收的情况，不在赔付范围内；<br />3.
                请在签收后，第一时间检查商品。如果商品有腐坏、破损等情况请把商品和快递面单一起拍照并在24小时内联系客服申请理赔，不能提供符合要求的照片或未能在24小时内联系客服，将不予退货退款处理；<br />4.
                因喜好不同，要求退货退款者将不予受理。
              </p>
            </view>
            <view class="item">
              <p class="qu">
                <i class="u-icon u-detail-redNum"></i
                ><span>如何开具发票？</span>
              </p>
              <p class="an">
                1.请在下单时选择“我要开发票”并填写相关信息。开具增值税专用发票需在下单时填写增票资质信息。温馨提示：请确保增票资质信息与贵司税务登记证信息一致，避免因开票信息错误给贵司带来损失。
                <br />2.可选开票内容：<br />
                依照国税总局开票法规，订单开具纸质发票、电子发票，开票内容为明细；礼品卡开票内容为预付卡；增值税专用发票开票内容为明细。
              </p>
            </view>
            <view class="item">
              <p class="qu">
                <i class="u-icon u-detail-redNum"></i
                ><span>关于价格说明？</span>
              </p>
              <p class="an">
                1.划线价、指导价：商品展示的划线价或指导价可能是商品制造厂商的零售市场指导价、品牌专柜价、商品吊牌价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。<br />2.活动价：如无特殊说明，促销价是商家在划线价、指导价基础上给予的优惠价格。如有疑问，您可以在购买前与客服联系。
                <br />4.会员价：在价的基础上给予不同类型会员用户的优惠价格，仅该类会员用户可以以会员价购买该商品。<br />5.价格异常：因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺利购物。
              </p>
            </view>
          </view>
        </view>
        <!-- end -->
      </view>
      <!-- 特价标签end -->
      <!--底部操作栏-->
      <view class="tui-operation">
        <view class="tui-operation-left tui-col-5">
          <view
            class="tui-operation-item"
            hover-class="tui-opcity"
            :hover-stay-time="150"
            @click="getIndex"
          >
            <u-icon name="home" :size="53"></u-icon>
            <view class="tui-operation-text tui-scale-small">首页</view>
          </view>
          <view
            class="tui-operation-item"
            hover-class="tui-opcity"
            :hover-stay-time="150"
            @click="tellshow = true"
          >
            <u-icon
              name="kefu"
              custom-prefix="custom-icon"
              :class="[tellshow == true ? 'svg' : '']"
            ></u-icon>
            <view class="tui-operation-text tui-scale-small">客服</view>
          </view>
          <view
            class="tui-operation-item"
            hover-class="tui-opcity"
            :hover-stay-time="150"
          >
            <u-icon
              name="shoucanged"
              custom-prefix="custom-icon"
              :class="[collecId == 1 ? 'svg' : '']"
              v-if="collecId == 1"
              @click="getCollec(0)"
            ></u-icon>
            <u-icon
              name="shoucang"
              custom-prefix="custom-icon"
              v-if="collecId == 0"
              @click="getCollec(1)"
            ></u-icon>
            <view
              class="tui-operation-text tui-scale-small"
              v-if="collecId == 1"
              style="position: relative; bottom: 6rpx"
              @click="getCollec(0)"
              >{
    
    { collecId == 1 ? "收藏" : "收藏" }}</view
            >
            <view
              class="tui-operation-text tui-scale-small"
              v-else
              @click="getCollec(1)"
              >{
    
    { collecId == 1 ? "收藏" : "收藏" }}</view
            >
            <!-- <tui-badge type="red" absolute :scaleRatio="0.8" right="10rpx" top="-4rpx">9</tui-badge> -->
          </view>
        </view>
        <view class="tui-operation-right tui-right-flex tui-col-7 tui-btnbox-4">
          <view
            class="tui-flex-1"
            v-if="provider != '' && provider != 'weixin'"
          >
            <!-- <tui-button height="68rpx" :size="26" type="warning" shape="circle" @click="submit">去购买</tui-button> -->
            <!-- <u-button :custom-style="goStyle">去购买</u-button> -->
            <view class="shopbtn"> 去淘买 </view>
          </view>
          <view class="tui-flex-1">
            <view class="gbtn" @click="getShop"> 立即购买 </view>
            <!-- <u-button :custom-style="customStyle">立即购买</u-button> -->
            <!-- <tui-button height="68rpx" :size="26" type="danger" shape="circle" @click="showPopup">立即购买</tui-button> -->
          </view>
        </view>
      </view>
      <!--底部操作栏end --->

      <!--底部选择层-->
      <!-- 拨打电话弹窗 -->
      <view class="tellView" v-if="tellshow">
        <u-mask :show="tellshow" style="position: fixed; z-index: 999">
          <view
            class="tellListView"
            :class="[tellshow == true ? 'tellshowactive' : '']"
          >
            <view class="teltextView">
              <view
                class="tellList"
                v-for="(item, index) in tellList"
                :key="index"
              >
                <view @click="getTell(item, index)"
                  >咨询客服{
    
    { item.name }}：{
    
    { item.tel }}</view
                >
              </view>
              <view
                class="tellLists"
                @click="tellshow = false"
                style="color: #999"
                @click.stop
                >取消</view
              >
            </view>
          </view>
        </u-mask>
      </view>
      <!-- 拨打电话弹窗end -->
      <!-- 选择规格属性 -->
      <u-popup
        v-model="popupShow"
        mode="bottom"
        :mask-close-able="false"
        :closeable="true"
        border-radius="25"
        width="100%"
        height="65%"
      >
        <view class="tui-popup-box">
          <view class="tui-product-box tui-padding">
            <image style="width: 200rpx; height: 200rpx" :src="picArrs"></image>
            <view class="tui-popup-price">
              <view class="tui-amount tui-bold">价格：¥{
    
    { moneys }}</view>
              <view class="tui-number">已选择：</view>
              <view class="tui-number"
                ><span class="it">{
    
    { skutext }}</span></view
              >
            </view>
          </view>
          <scroll-view scroll-y class="tui-popup-scroll">
            <view class="tui-scrollview-box">
              <view class="tui-bold tui-attr-title">商品规格</view>
              <view class="tui-attr-box">
                <view
                  class="tui-attr-item"
                  v-for="(item, index) in shopList.specslist"
                  :key="index"
                  @click="getActive(item, index)"
                  :class="[item.active == true ? 'active' : '']"
                >
                  {
    
    { item.specs_name }}</view
                >
              </view>
              <view class="sktitleview">
                <span>数量</span>
              </view>
              <!-- 输入框 -->
              <view style="margin-left: 0rpx">
                <u-number-box
                  v-model="num"
                  :min="1"
                  :max="10"
                  @change="getnumber"
                ></u-number-box>
              </view>
              <view class="sumbu">
                <view class="buttonget" @click="getShop">确认</view>
              </view>
            </view>
          </scroll-view>
          <view class="tui-right">
            <tui-icon
              name="close-fill"
              color="#999"
              :size="20"
              @click="hidePopup"
            ></tui-icon>
          </view>
        </view>
      </u-popup>
      <!-- end -->
      <!-- 选择规格属性 -->
      <u-popup
        v-model="couponShow"
        mode="bottom"
        :mask-close-able="false"
        :closeable="true"
        border-radius="25"
        width="100%"
        height="65%"
      >
        <view class="speciatitle-view">
          <span class="speciatitle-title">领取优惠券</span>
          <van-icon
            class="speciatitle-close"
            name="cross"
            @click="specialpup = false"
          ></van-icon>
        </view>
        <view class="specview" v-cloak>
          <!-- 数据 -->
          <view
            class="specList"
            v-for="(item, index) in shopCopunList"
            :key="index"
          >
            <img
              class="imglist"
              src=""
            />
            <view class="imgname"><span>¥</span>{
    
    { item.money }}</view>
            <view class="imgtypeview">
              <view class="imgtitles">{
    
    { item.title }}</view>
              <view class="imgdesc" v-if="item.dates != ''">{
    
    {
                item.dates
              }}</view>
            </view>
            <view v-if="item.stats == 0">
              <view class="receive" @click="getReceive(item, index)">领取</view>
            </view>
            <view v-if="item.stats == 1">
              <img
                class="specslabel"
                src=""
              />
            </view>
          </view>
        </view>
      </u-popup>
      <!-- end -->
      <!--底部选择层-->
      <u-back-top
        :scroll-top="scrollTop"
        :icon-style="iconStyle"
        :custom-style="bgStyle"
        icon="arrow-upward"
      ></u-back-top>
    </view>
  </view>
</template>

<script>
import tRtPopup from "@/components/views/t-rt-popup/t-rt-popup";
import tuiTag from "@/components/thorui/tui-tag/tui-tag";
import uRate from "uview-ui/components/u-rate/u-rate";
import easySkeleton from "@/components/skeleton/skeleton.vue";
export default {
  components: {
    tRtPopup,
    tuiTag,
    uRate,
    easySkeleton,
  },
  data() {
    return {
      couponShow: false,
      IsSkelttion: true,
      topShow: false,
      SkelttionType: "prouct",
      iconStyle: {
        fontSize: "32rpx",
        color: "#fff",
      },
      bgStyle: {
        "background-color": "rgb(000,000,000,0.4)",
      },
      provider: "",
      loading: true,
      evaluateList: [],
      scrollTop: 0,
      height: 64, //header高度
      top: 100, //标题图标距离顶部距离
      scrollH: 0, //滚动总高度
      opcity: 0,
      iconOpcity: 0.5,
      picArrNum: 0,
      rbshow: false,
      // 商品详情数据
      shopList: {},
      shopCopunList: [],
      isWeiXinID: 0,
      listid: 0,
      itemList: [
        {
          title: "首页",
          icon: "home",
        },
        {
          title: "收藏",
          icon: "star",
        },
        {
          title: "分享",
          icon: "partake",
        },
      ],
      bannerIndex: 0,
      topMenu: [],
      popupShow: false,
      value: 1,
      collected: false,
      customStyle: {
        backgroundColor: "#FF0036!important",
        color: "#fff!important",
        fontSize: "13px",
        border: "0px!important",
        height: "100%!important",
        borderRadius: "0px!important",
      },
      goStyle: {
        backgroundColor: "#FF9500!important",
        color: "#fff!important",
        fontSize: "13px",
        border: "0px!important",
        height: "100%!important",
        borderRadius: "0px!important",
      },
      shopList: {},
      picArrs: "",
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      moneys: 0,
      duration: 500,
      show: false,
      tellshow: false,
      // 登录弹窗状态
      loginshow: false,
      skushow: false,
      ppmoney: 0,
      shopStats: 0,
      tellList: [
        {
          name: "o文",
          tel: "176115925648",
        }
      ],
      sendShow: false,
      num: 1,
      index: 0,
      title: "",
      skutext: "",
      collecId: 0,
      // 弹幕
      bottom: 120,
      left: 35,
      color: "#ffffff",
      current: 0,
      mode: "round",
      msec: 2000,
      list: [
        {
          id: 1,
          username: "马修",
          avatar:"192455.jpg",
          phone: "135****5612",
          address: "北京用户",
        },
    
      ],
    };
  },
  onLoad: function (options) {
    var that = this;
    console.log("options", options);
    /**商品详情**/
    that.getBase(options.pid);
    that.shopid = options.pid;
    let obj = {};
    // #ifdef MP-WEIXIN
    obj = wx.getMenuButtonBoundingClientRect();
    // #endif
    // #ifdef MP-BAIDU
    obj = swan.getMenuButtonBoundingClientRect();
    // #endif
    // #ifdef MP-ALIPAY
    my.hideAddToDesktopMenu();
    // #endif

    setTimeout(() => {
      uni.getSystemInfo({
        success: (res) => {
          this.width = obj.left || res.windowWidth;
          this.height = obj.top
            ? obj.top + obj.height + 8
            : res.statusBarHeight + 44;
          this.top = obj.top
            ? obj.top + (obj.height - 32) / 2
            : res.statusBarHeight + 6;
          this.scrollH = res.windowWidth;
        },
      });
    }, 0);
    var that = this;
    uni.getProvider({
      service: "oauth",
      success(res) {
        console.log("res", res);
        console.log("res", res.provider[0]);
        that.provider = res.provider[0];
      },
    });
    /**商品详情**/

    wx.getSetting({
      sucsess: (res) => {
        //调用成功的回调函数

        if (res.authSetting["scope.userInfo"]) {
          console.log("111");
        } else {
          //没有授权
          console.log("222");
        }
      },
    });
  },
  mounted() {
    var that = this;
    // that.articleBase();
    // 判断商品是否收藏
    that.initShopCollect();
    // 获取优惠券
    // that.getCoupon();
    //调用初始化计算方法
    // that.initShop();
    // // 初始化验证用户是否登录
    // that.getUserStats(1, {});
    // that.getCoupon(1);

    wx.login({
      success: function (res) {
        if (res.code) {
          //如果调用wx.login后获取到code
          console.error("res", res);
        }
      },
      fail: function (res) {},
    });
  },
  methods: {
    onGetuserinfo(e) {
      console.error("e", e);
    },
    getUserProfile(e) {
      // 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
      // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
        desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.error("res", res);
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true,
          });
        },
      });
    },
    /**拨打电话去**/
    getTell(item, index) {
      // console.log("item",item);
      var that = this;
      uni.makePhoneCall({
        phoneNumber: item.tel,
      });
      // window.location.href = "tel:" + item.tel;
      that.tellshow = false;
    },
    /**获取优惠券数据**/
    getCoupon(type) {
      var that = this;
      var param = {
        pid: that.shopid,
      };
      var provider;
      uni.getProvider({
        service: "oauth",
        success: function (res) {
          provider = res.provider[0];
        },
      });

      var openid = uni.getStorageSync("openid");
      if (provider == "weixin") {
        param.openid = openid;
      } else if (provider == "alipay") {
        param.user_id = openid;
      }
      uni.request({
        url: config.proccoupon,
        method: "post",
        data: param,
        success: (res) => {
          console.log("res", res);
          that.shopCopunList = res.data.shopCopunList;
        },
        fail: (err) => {
          console.log("err", err);
          that.Toasts("网络异常,请稍后再试~");
        },
      });
    },
    /**
     * 点击收藏
     * @params{type}1收藏 0取消
     * **/
    getCollec(type) {
      var that = this;
      var timestamp = Date.parse(new Date());
      var param = {};
      if (type == 1) {
        that.collecId = 1;
        param = {
          pid: that.shopid,
          // 1文章 2产品
          // type: 2,
          // 1收藏 0取消
          // stats: 1,
        };
      } else {
        that.collecId = 0;
        param = {
          pid: that.shopid,
          // 1文章 2产品
          // type: 2,
          // 1收藏 0取消
          // stats: 0,
        };
      }
      var provider;
      uni.getProvider({
        service: "oauth",
        success: function (res) {
          provider = res.provider[0];
        },
      });
      var openid = uni.getStorageSync("openid");
      if (provider == "weixin") {
        param.openid = openid;
      } else if (provider == "alipay") {
        param.user_id = openid;
      }

      that.$http("", "POST", param, {}).then((res) => {
        console.log("数据", res);
        if (res.code ==200) {
          if (type == 1) {
            that.collecId = 1;
            that.showToast("已收藏~", "primary");
          } else {
            that.showToast("已取消~", "primary");
            that.collecId = 0;
          }
        } else {
          that.showToast(res.data.msg, "error");
        }
      });
    },
    /**评论数据
     * pid   @param{产品ID}
     * nums  @param{数量}
     * page  @param{页数}
     * **/
    articleBase() {
      var that = this;
      var page = 1;
      var num = 1;
      uni.request({
        url:
          config.articleUrl +
          "?pid=" +
          that.shopid +
          "&nums=" +
          num +
          "&page=" +
          page,
        method: "post",
        data: {},
        success: (res) => {
          if (res.data.code == 0) {
            var evaluateList = res.data.evaluateList;
            console.log("评论数据==》", res);
            for (var i in evaluateList) {
              evaluateList[i].rate = parseInt(evaluateList[i].rate);
            }
            that.evaluateList = evaluateList;
          }
        },
        fail: (err) => {},
      });
    },
    rtBubble() {
      this.$refs.rtBubble.toggle();
    },
    /**点击领取优惠券**/
    getReceive(item, index) {
      console.log(item);
      var that = this;
      that.$forceUpdate();
      // receivecoupon
      var param = {
        coupon_id: item.coupon_id,
      };

      var provider;
      uni.getProvider({
        service: "oauth",
        success: function (res) {
          provider = res.provider[0];
        },
      });
      var openid = uni.getStorageSync("openid");
      if (provider == "weixin") {
        param.openid = openid;
      } else if (provider == "alipay") {
        param.user_id = openid;
      }
      uni.request({
        url: config.receivecoupon,
        method: "post",
        data: param,
        success: (res) => {
          if (res.data.code == 0) {
            that.shopCopunList[index].stats = 1;
          } else if (res.data.code == 6) {
            that.showToast(res.data.msg, "success");
          } else {
            that.showToast(res.data.msg, "error");
          }
        },
        fail: (err) => {
          console.log("err", err);
          that.showToast("网络异常,请稍后再试~");
        },
      });
    },
    topBubble() {
      console.log("5454545454");
      this.show = !this.show;
    },
    itemClick(e) {
      let text = ["首页", "收藏", "分享"][e.index];
      this.tui.toast(`您点击了：${text}`);
    },
    onNavigationBarButtonTap(e) {
      if (e.index === 0) {
        this.$refs.rtBubble.toggle();
      }
    },
    /**
     * 回到首页
     * @param {Object} e
     */
    getIndex() {
      uni.navigateBack({});
    },
    /**加购商品**/
    getnumber(e) {
      console.log(e.value);
      var that = this;
      var num = e.value;
      that.moneys = (that.ppmoney * num).toFixed(2);
    },
    /**用户点击立即购买**/
    getShop() {
      var that = this;
      var shopList = [];
      shopList.push({
        num: that.num,
        price: that.ppmoney,
        moneys: that.moneys,
        pid: that.shopid,
        skutext: that.skutext,
        shopimg: that.picArrs,
        title: that.title,
        listid: that.listid,
      });

      console.log("选中的商品->", shopList);
      uni.navigateTo({
        url: "/pages/order/order?shopList=" + JSON.stringify(shopList),
      });
      // this.$refs.uToast.show({
      // title: that.num+"价格==>"+that.moneys,
      // type: 'success'
      // 			})
    },
    /**选中**/
    getActive(item, index) {
      var that = this;
      var list = that.shopList.specslist;
      console.log(index);
      // 判断是否选中
      list[index].selected = !list[index].selected;
      for (var i = 0; i < list.length; i++) {
        if (i != index) {
          list[i].active = false;
        } else {
          list[i].active = true;
          that.skutext = list[i].specs_name;
          that.listid = list[i].id;
          console.log(list[i]);
          that.moneys = (list[i].price * that.num).toFixed(2);
          that.ppmoney = list[i].price;
        }
      }
      this.$forceUpdate();
    },
    /**商品详情**/
    getBase(shopid) {
      var that = this;
      var timestamp = Date.parse(new Date());

      var that = this;
      that
        .$http(
          "" + "?t=" + timestamp,
          "POST",
          { pid: shopid },
          {}
        )
        .then((res) => {
          console.log("数据", res);
          console.log("获取商品详情数据==>", res);
          if (res.code == 0) {
            that.IsSkelttion = false;
            for (var i in res.detailsRow) {
              if (res.detailsRow.specslist != "") {
                res.detailsRow.specslist[0].active = true;
              }
            }
            that.skutext = res.detailsRow.specslist[0].specs_name;
            var prices = res.detailsRow.endprice;
            that.moneys = prices.toFixed(2);
            that.ppmoney = prices.toFixed(2);
            that.picArrs = res.detailsRow.picArr[0];
            that.picArrNum = res.detailsRow.picArr.length;
            that.shopList = res.detailsRow;
            that.title = res.detailsRow.title;
            that.listid = res.detailsRow.specslist[0].id;
          } else {
            uni.showToast({
              title: "接口异常！",
              icon: "none",
              duration: 2000,
            });
          }
        });
    },
    /**轮播索引**/
    bannerChange: function (e) {
      this.bannerIndex = e.detail.current;
    },
    /**查询商品是否收藏**/
    initShopCollect() {
      var that = this;
      var param = {
        pid: that.shopid,
      };
      var provider;
      uni.getProvider({
        service: "oauth",
        success: function (res) {
          provider = res.provider[0];
        },
      });
      var openid = uni.getStorageSync("openid");
      if (provider == "weixin") {
        param.openid = openid;
      } else if (provider == "alipay") {
        param.user_id = openid;
      }
      var that = this;
      that.$http("", "POST", param, {}).then((res) => {
        console.log("是否数据", res.data);
        if (res.code == 200) {
          that.collecId = 1;
        } else {
          that.collecId = 0;
        }
      });
    },
    /**
     * 点击轮播查看大图
     * @param {Object} e
     */
    previewImage: function (e) {
      let index = e.currentTarget.dataset.index;
      uni.previewImage({
        current: this.shopList.picArr[index],
        urls: this.shopList.picArr,
      });
    },
    showPopup: function () {
      console.log("454545");
      this.popupShow = true;
    },
    hidePopup: function () {
      this.popupShow = false;
    },

    btnTopMenu(index) {
      this.closeMenu();
      if (index == 4) {
        uni.makePhoneCall({
          phoneNumber: "10086",
        });
      } else if (index == 6) {
        // #ifdef MP
        this.common();
        // #endif

        // #ifndef MP
        this.onShare();
        // #endif
      } else {
        let url = {
          0: "../message/message",
          1: "../mall/mall",
          2: "../my/my",
          3: "../shopcart/shopcart",
          5: "/pages/my/feedback/feedback?page=mall",
        }[index];
        url && this.tui.href(url);
      }
    },
    submit() {
      this.popupShow = false;
      uni.navigateTo({
        url: "../submitOrder/submitOrder",
      });
    },
    coupon() {
      uni.navigateTo({
        url: "../coupon/coupon",
      });
    },
    showToast(msg, type) {
      this.$refs.uToast.show({
        title: msg,
        type: type,
      });
    },
    getshare() {
      console.log("分享事件");
      var that = this;
      // that.onShareAppMessage();
      this.$u.mpShare = {
        title: "111", // 默认为小程序名称，可自定义
        path: "", // 默认为当前页面路径，一般无需修改，QQ小程序不支持
        // 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
        // 支持PNG及JPG，默认为当前页面的截图
        imageUrl: "",
      };
      return;
    },
  },
  // 这里如果写成onShareAppMessage: res => { ... }形式的箭头函数，在内部会无法获得this
  onShareAppMessage() {
    var that=this;
    return {
      title: that.title,
      path: "/pages/shopbase/shopbase?pid="+ that.shopid,
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
</script>

<style>
@import url("../../static/css/shopbase.css");
@import url("../../static/css/tuibase.css");
@import url("../../static/css/all.css");
@import url("../../static/css/animation.css");

page {
  background-color: #f7f7f7;
}

.backTop {
  position: fixed;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: rgba(000, 000, 000, 0.6);
  text-align: center;
  right: 30rpx;
  bottom: 10%;
  z-index: 3;
  line-height: 60rpx;
}

/* 弹幕 */
.barrageView {
  position: absolute;
  top: 100rpx;
  z-index: 3;
  left: 30rpx;
  width: 470rpx;
  height: 260rpx;
}

.shareBtn {
  position: absolute;
  width: 100rpx;
  right: 10rpx;
  height: 80rpx;
  top: 60rpx;
  background-color: #fff !important;
  line-height: 80rpx;
  border: 0px !important;
}

.shareBtn::after {
  border: 0px !important;
}

/* 优惠券样式 */
.speciatitle-view {
  position: relative;
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  border-bottom: 1px solid #f5f5f5;
}

.speciatitle-title {
  position: absolute;
  left: 0;
  font-size: 15px;
}

.speciatitle-close {
  position: absolute;
  right: 0;
  top: 15px;
  font-size: 22px;
  color: #777;
}

.specview {
  position: relative;
  width: 100%;
  height: 85%;
  margin-top: 9px;
  overflow: auto;
  /* padding-bottom: 88px; */
}

.specList {
  position: relative;
  /* margin-bottom: 15px; */
  width: 95%;
  height: 100px;
  margin: 0 auto;
  margin-bottom: 11px;
}

.specList .imglist {
  position: relative;
  width: 100%;
  height: 100%;
}

.imgname {
  position: absolute;
  left: 20px;
  z-index: 2;
  top: 23px;
  font-size: 38px;
  color: #dd1a21;
}

.imgname span {
  font-size: 13px;
}

.imgtypeview {
  position: absolute;
  z-index: 2;
  width: 156px;
  top: 22px;
  height: 50px;
  left: 106px;
}

.imgtitles {
  position: relative;
  width: 100%;
  color: #dd1a21;
  margin-bottom: 6px;
  font-size: 15px;
  text-align: left;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: elipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.imgdesc {
  position: relative;
  width: 100%;
  color: #dd1a21;
  font-size: 12px;
  text-align: left;
}

.receive {
  position: absolute;
  /* width: 58px; */
  color: #fff;
  height: 23px;
  line-height: 23px;
  text-align: center;
  z-index: 2;
  padding: 0px 8px;
  font-size: 13px;
  right: 17px;
  background-color: #dd1a21;
  top: 26px;
  border-radius: 30px;
}

.specslabel {
  position: absolute;
  right: 0;
  bottom: -4px;
  width: 50px;
  z-index: 1;
  transform: rotate(-26deg);
  height: 51px;
  overflow: hidden;
}

.radioShow {
  font-size: 28px;
  position: absolute;
  right: 20px;
  top: 32px;
  border-radius: 50%;
  color: #fff;
  background: #dd1a21;
}

.radioNone {
  font-size: 28px;
  position: absolute;
  right: 20px;
  top: 32px;
  border-radius: 50%;
  color: #fff;
  background: #999;
}

/* end */
</style>

这两个页面用的UI组件库是uView - 多平台快速开发的UI框架 - uni-app UI框架

 

 商品列表瀑布流页面

<template>
	<view class="wrap">
		<u-button @click="clear">清空列表</u-button>
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{
   
   {item.title}}
					</view>
					<view class="demo-price">
						{
   
   {item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<view class="demo-shop">
						{
   
   {item.shop}}
					</view>
					<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{
   
   {item.title}}
					</view>
					<view class="demo-price">
						{
   
   {item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
					<view class="demo-shop">
						{
   
   {item.shop}}
					</view>
					<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				list: [
					{
						price: 35,
						title: '北国风光，千里冰封，万里雪飘',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
					},
					{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
					{
						price: 385,
						title: '大河上下，顿失滔滔',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
					},
					{
						price: 784,
						title: '欲与天公试比高',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
					},
					{
						price: 7891,
						title: '须晴日，看红装素裹，分外妖娆',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
					},
					{
						price: 2341,
						shop: '李白杜甫白居易旗舰店',
						title: '江山如此多娇，引无数英雄竞折腰',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
					},
					{
						price: 661,
						shop: '李白杜甫白居易旗舰店',
						title: '惜秦皇汉武，略输文采',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
					},
					{
						price: 1654,
						title: '唐宗宋祖，稍逊风骚',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
					{
						price: 1678,
						title: '一代天骄，成吉思汗',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
					{
						price: 924,
						title: '只识弯弓射大雕',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
					{
						price: 8243,
						title: '俱往矣，数风流人物，还看今朝',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
				]
			}
		},
		onLoad() {
			this.addRandomData();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			addRandomData() {
				for(let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>