share_h5/pages/goods.vue

<template>
  <view class="container">

    <view class="product">
      <view class="u-bg-fff pb40">
        <view class="pic">
          <!-- <image src="../../../static/delImg/product2.png" mode="aspectFill"></image> -->
          <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500" circular="true">
            <swiper-item v-if="dataForm.video_url">
              <video :src="dataForm.video_url" style="height:100%"></video>
            </swiper-item>
            <swiper-item v-for="(item, index) in imglist" :key="index">
              <image :src="item" mode="aspectFill"></image>
            </swiper-item>
          </swiper>

          <view class="p-price">
            <view class="pd24 u-flex-center">
              <view class="u-FFF u-font36" v-if="type == 1">
                <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"></rich-text>
              </view>
              <view class="u-FFF u-font36" v-if="type == 2 || type == 3">
                <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_price)"></rich-text>
              </view>
              <view class="u-FFF u-font36" v-if="type == 5">
                {{ dataForm.min_exchange_point }}积分
                <!-- <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"></rich-text> -->
              </view>
              <text class="discount u-font24 u-ml20 u-del" v-if="type == 1">￥{{ dataForm.max_market_price }}</text>
              <text class="discount u-font24 u-ml20 u-del"
                v-if="type == 2 || type == 3">￥{{ dataForm.max_sale_price }}</text>
            </view>
            <view class="p-ab u-flex-center" v-if="type == 2 || type == 3">
              <view class="triangle-bottomright"></view>
              <view class="seckill u-text-center u-font28">
                <!-- active_state 0：未开始 * 1：进行中 * 2：已结束 -->
                <view class="u-bold" v-if="dataForm.active_state == 2">已结束</view>
                <view class="u-bold" v-if="dataForm.active_state == 1">距结束</view>

                <view class="u-bold" v-if="dataForm.active_state == 0">离开抢</view>
                <view v-if="dataForm.active_state != 2">
                  <uni-countdown :backgroundColor="'none'" @timeup="overDown1" :color="'#00321e'"
                    :splitorColor="'#00321e'" :show-day="time1[0] > 0" :day="time1[0]" :hour="time1[1]"
                    :minute="time1[2]" :second="time1[3]"></uni-countdown>
                </view>
              </view>
            </view>
          </view>

          <view class="mt80 u-plr30">
            <view>
              <text class="u-font34 u-bold u-1A1A1A">{{ dataForm.title }}</text>
            </view>
            <view class="u-font24 u-mt15 u-999" v-if="type==1 ">
              <text>已售
                <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>件，仅剩<text class="u-FF0000">{{
                  dataForm.residual_inventory
                }}</text>件</text>
            </view>
            <view class="u-font24 u-mt15 u-999" v-else>
              <text>已售
                <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>件</text>
            </view>
          </view>
        </view>
      </view>

      <view class="u-bg-fff u-mt10">
        <view class="u-plr30 u-flex-center-sb pt-pb35">
          <view class="u-flex-center">
            <view>
              <image class="u-avatar104" :src="shop.logo"></image>
            </view>
            <view class="u-ml25">
              <view class="u-font28 u-1A1A1A u-bold">{{ shop.shop_name }}</view>
              <view class="u-999 u-font24 u-mt5 u-text2">
                <text class="iconfont u-193E2C">&#xe64b;</text>
                {{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
                }}{{ shop.address }}
              </view>
            </view>
          </view>
          <!-- <view class="iconfont">&#xe6c7;</view> -->
        </view>
      </view>
    </view>

    <view class="bottom-btn u-bg-fff">
      <view class="pt-pb30 u-plr30 u-flex-center-sb">
        <view class="u-flex-center">
          <button class="buy-btn u-DCCDA4 u-font30" @click="open(0)">
            查看更多
          </button> <button class="buy-btn u-DCCDA4 u-font30" @click="open(1)">
            下载App
          </button>
        </view>

      </view>
    </view>

    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        config: {
          back: false, //false是tolbar页面 是则不写
          title: "商品详情",
          color: "#FFFFFF",
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#00321E"],
          statusBarFontColor: "#FFFFFF",
          backTabPage: "",
        },
        imglist: [], //详情图片数组
        dataForm: {}, //商品详情
        shop: {}, //店铺信息
        cover: "",
        loading: true,
        btnText: "打开App",
        time1: [0, 0, 0, 0],
        type: null,
      };
    },
    props: {
      options: {
        type: Object,
        default: null,
      },
    },
    watch: {
      options(n) {
        this.options = n;
      },
    },
    created() {
      this.type = this.options.type;
      if ((this.options.type == 1 || this.options.type == 5) && this.options.id) {
        this.getDefaultDetailInfo(this.options.id);
      }
      if (this.options.type == 2 && this.options.id) {
        this.getSeckillDetail(this.options.id);
      }
      if (this.options.type == 3 && this.options.id) {
        this.getGroupsDetailInfo(this.options.id);
      }
      if (this.options.type == 4 && this.options.id) {
        this.getserviceDetailInfo(this.options.id);
      }
    },
    onShow() {},
    onLoad(options) {},

    methods: {
      open(number) {
        if (number == 0) {
          window.location.href = "lida://&pageType=1&type=" + this.type + "&id=" + this.goodsId + "&shareId=" + this
            .options.shareId + '&teamId=' + this.options.teamId;
        } else {
          uni.navigateTo({
            url: "/pages/down",
          });
        }
      },

      // 获取主页数据
      getIndexList(shopid) {
        this.$http.get("/yxt/shop/info/" + shopid).then((res) => {
          uni.stopPullDownRefresh();
          this.loading = false;
          if (res.data && res.code == 200) {
            this.shop = res.data;
          }
        });
      },

      //普通商品
      getDefaultDetailInfo(id) {
        this.$http.get("/goods/info/" + id).then((res) => {
          this.loading = false;
          if (res && res.code == 200) {
            this.dataForm = res.data;
            this.goodsId = res.data.id;
            this.imglist = res.data.images;
            this.shareImg = res.data.cover;
            this.shareTitle = res.data.title;

            if (res.data.point_goods) {
              this.type = 5;
            }
            this.getIndexList(res.data.shop_id);
          }
        });
      },
      /**组团商品*/
      getGroupsDetailInfo(id) {
        this.$http.get("/groupbuy/activitygoods/goodsInfo/" + id).then((res) => {
          this.loading = false;

          if (res && res.code == 200) {
            this.dataForm = res.data;
            this.goodsId = res.data.id;
            this.imglist = res.data.cover.split(",");

            this.getIndexList(res.data.shop_id);

            if (res.data.active_state == 0) {
              this.time1 = this.$mUtil
                .countDown(res.data.activity_start_time)
                .split(":");
            } else {
              this.time1 = this.$mUtil
                .countDown(res.data.finish_time)
                .split(":")
                .map((val) => Number(val));
            }
          }
        });
      },
      getSeckillDetail(id) {
        this.$http
          .get("/marketing/seckillActivityGoods/info/" + id)
          .then((res) => {
            this.loading = false;
            if (res && res.code == 200) {
              this.dataForm = res.data;
              this.goodsId = res.data.id;
              this.$http.get("/yxt/shop/info/" + res.data.shop_id).then((res) => {
                if (res.data && res.code == 200) {
                  this.shop = res.data;
                }
              });
              this.imglist = res.data.cover.split(",");

              if (res.data.active_state == 0) {
                this.time1 = this.$mUtil
                  .countDown(res.data.activity_start_time)
                  .split(":");
              } else {
                this.time1 = this.$mUtil
                  .countDown(res.data.finish_time)
                  .split(":");
              }
            }
          });
      },
      getserviceDetailInfo(id) {
        this.$http.get("/service/goods/info/" + id).then((res) => {
          this.loading = false;
          if (res && res.code == 200) {
            this.dataForm = res.data;
            this.goodsId = res.data.id;
            this.imglist = res.data.images;
            this.shareImg = res.data.cover;
            this.shareTitle = res.data.title;

            this.getIndexList(res.data.shop_id);
          }
        });
      },
    },
  };
</script>

<style lang="scss">
  page {
    background-color: #f5f5f5;
  }

  .pd24 {
    padding: 24rpx;
  }

  .pd20 {
    padding: 20rpx;
  }

  .pt20-pb14 {
    padding-top: 20rpx;
    padding-bottom: 14rpx;
  }

  .pt28-pb18 {
    padding-top: 28rpx;
    padding-bottom: 18rpx;
  }

  .pb30 {
    padding-bottom: 30rpx;
  }

  .pb40 {
    padding-bottom: 40rpx;
  }

  .pb50 {
    padding-bottom: 50rpx;
  }

  .pt-pb30 {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
  }

  .pt-pb35 {
    padding-top: 35rpx;
    padding-bottom: 35rpx;
  }

  .ml54 {
    margin-left: 54rpx;
  }

  .ml138 {
    margin-left: 138rpx;
  }

  .br-rd10 {
    border-radius: 10rpx;
  }

  .br-rd20 {
    border-radius: 20rpx;
  }

  .stb-btn {
    padding: 8rpx 18rpx;
    border-radius: 10rpx;
  }

  .br-FF0000 {
    border: 1rpx solid #ff0000;
    border-radius: 24rpx;
    padding: 6rpx 12rpx;
  }

  .bg-FFF6EE {
    background-color: #fff6ee;
  }

  .mt80 {
    margin-top: 80rpx;
  }

  .product {
    padding-bottom: 150rpx;
  }

  .pic {
    width: 100%;
    position: relative;

    .swiper {
      height: 620rpx;

      video {
        width: 100%;
        height: 620rpx;
      }

      image {
        width: 100%;
        height: 620rpx;
      }
    }

    .p-price {
      width: 100%;
      position: absolute;
      top: 580rpx;
      background: linear-gradient(left, #00321e, #284534);
      border-radius: 20rpx 20rpx 0px 0px;
      position: relative;
      top: 0px;
      z-index: 9999;

      .discount {
        color: #89a895;
      }

      .p-ab {
        position: absolute;
        top: -5px;
        right: 0;
      }
    }
  }

  .richText {
    padding: 30rpx;
  }

  //秒杀，拼团样式
  .p-ab {
    position: absolute;
    top: 448rpx;
  }

  .stb-list {
    padding-bottom: 10rpx;
  }

  .triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 108rpx solid #dccda4;
    border-left: 60rpx solid transparent;
  }

  .seckill {
    background-color: #dccda4;
    color: #00321e;
    padding: 16rpx;
    padding-right: 28rpx;
    border-radius: 5rpx 20rpx 0px 0px;
  }

  .seckill-btn {
    width: 86%;
  }

  .br-284534 {
    border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
  }

  .gb-te {
    padding-top: 20rpx;
    padding-bottom: 15rpx;
  }

  .gb-btn {
    padding: 18rpx 80rpx 8rpx;
    line-height: 30rpx;
  }

  .btn-bg-dccda4 {
    background: #dccda4;
    border-radius: 48rpx 0rpx 0rpx 48rpx;
  }

  .btn-bg-00321E {
    background: #00321e;
    border-radius: 0px 48px 48px 0px;
  }

  .tab {
    padding-top: 38rpx;

    .active {
      font-size: 30rpx;
      color: #00321e;
      font-weight: 700;
      border-bottom: 1rpx solid #00321e;
    }
  }

  .bottom-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    border-top: 1rpx solid #e6e6e6;

    .cart {
      position: relative;

      .number {
        position: absolute;
        top: -10rpx;
        left: 45rpx;
        padding: 4rpx 8rpx;
        background-color: #ff0000;
        border: 4rpx solid #ffffff;
        border-radius: 40rpx;
      }
    }

    .cart-btn {
      width: 230rpx;
      height: 85rpx;
      background: #dccda4;
      border-radius: 43rpx 0rpx 0rpx 43rpx;
    }

    .buy-btn {
      width: 340rpx;
      height: 85rpx;
      color: #fff;
      line-height: 85rpx;
      background: #3775F6;
      border-radius: 43rpx;
    }
  }

  .flex-sb {
    display: flex;
    justify-content: space-between;
  }

  //弹窗
  .spec {
    border-radius: 18rpx 18rpx 0rpx 0rpx;
    padding-top: 30rpx;
    max-height: 900rpx;
    overflow-y: auto;

    .spec-item {
      background-color: #f6f6f6;
      border: 1px solid #f6f6f6;
      padding: 12rpx 30rpx;
      font-size: 24rpx;
      color: #1a1a1a;
      border-radius: 4px;
    }

    .activeColor {
      background-color: #e1e6e3;
      border: 1px solid #01321d;
      color: #01321d;
      border-radius: 4px;
    }

    .spec-item:not(:last-child) {
      margin-right: 24rpx;
    }

    //减号
    .minus {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background: #dedede;
      border-radius: 8rpx 0rpx 0rpx 8rpx;
    }

    .num {
      width: 74rpx;
      height: 46rpx;
      line-height: 46rpx;
      text-align: center;
      border: 1px solid #dedede;
    }

    //加号
    .plus-sign {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background: #dedede;
      border-radius: 0rpx 8rpx 8rpx 0rpx;
    }

    .specOpen-btn {
      margin-top: 68rpx;
      padding-bottom: 34rpx;

      button {
        background-color: #01331f;
        color: #ffffff;
      }
    }
  }
</style>