zsw-farm-bxg/pages/activity/SeckillDetails/index.vue

<template>
  <view
    :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']"
    v-show="domStatus"
  >
    <product-con-swiper :imgUrls="imgUrls"></product-con-swiper>
    <view class="nav acea-row row-between-wrapper">
      <view class="money">
        ￥
        <text class="num" v-text="storeInfo.price"></text>
        <text class="y-money" v-text="'￥' + storeInfo.price"></text>
      </view>
      <view class="acea-row row-middle">
        <view class="times">
          <view>距秒杀结束仅剩</view>
          <count-down
            :isDay="false"
            :tipText="' '"
            :dayText="' '"
            :hourText="' : '"
            :minuteText="' : '"
            :secondText="' '"
            :datatime="datatime"
          ></count-down>
        </view>
        <view class="iconfont icon-jiantou"></view>
      </view>
    </view>
    <view class="wrapperRush">
      <view class="introduce acea-row row-between">
        <view class="infor" v-text="storeInfo.title"></view>
        <!-- <view class="iconfont icon-fenxiang" @click="setPosterImageStatus"></view> -->
      </view>
      <view class="label acea-row row-middle">
        <view class="stock" v-text="'库存:' + storeInfo.stock + '件'"></view>
        <view v-text="'销量:' + storeInfo.sales + '件'"></view>
      </view>
    </view>
    <!-- 规格 -->
    <view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
      <view>
        <text>{{ attrTxt }}：</text>
        <text class="atterTxt">{{ attrValue }}</text>
      </view>
      <view class="iconfont icon-jiantou"></view>
    </view>
    <view class="product-intro">
      <view class="title">产品介绍</view>
      <view class="conter" v-html="storeInfo.description"></view>
    </view>

    <!-- 操作栏 -->
    <view style="height: 100rpx"></view>
    <view class="footer acea-row row-between-wrapper">
      <!-- #ifdef MP-WEIXIN -->
      <view class="item">
        <button open-type="contact" class="contacButton">
          <view style="padding-bottom: 8rpx" class="item">
            <view class="iconfont icon-kefu"></view>
            <text>客服</text>
          </view>
        </button>
      </view>
      <!-- #endif -->
      <view class="item" @click="setCollect" v-if="userCollect">
        <view class="iconfont icon-shoucang1"></view>
        <text>收藏</text>
      </view>
      <view class="item" @click="setCollect" v-if="!userCollect">
        <view class="iconfont icon-shoucang"></view>
        <text>收藏</text>
      </view>
      <view
        class="bnt acea-row"
        v-if="seckillStatus == 1 && storeInfo.num > 0 && storeInfo.stock > 0"
      >
        <view class="joinCart" @click="openAlone">
          <text>单独购买</text>
        </view>
        <view class="buy" @click="tapBuy">
          <text>立即购买</text>
        </view>
      </view>

      <div
        class="bnt acea-row"
        v-if="seckillStatus == 1 && storeInfo.num <= 0 && storeInfo.stock <= 0"
      >
        <div class="joinCart" @click="openAlone">原价购买</div>
        <div class="buy bg-color-hui">已售罄</div>
      </div>
      <div class="bnt acea-row" v-if="seckillStatus == 2">
        <div class="joinCart" @click="openAlone">原价购买</div>
        <div class="buy bg-color-hui">即将开始</div>
      </div>
      <div class="bnt acea-row" v-if="seckillStatus == 0">
        <div class="joinCart" @click="openAlone">原价购买</div>
        <div class="buy bg-color-hui">已结束</div>
      </div>
    </view>

    <ProductWindow
      v-on:changeFun="changeFun"
      :attr="attr"
      :cartNum="cartNum"
    ></ProductWindow>
    <StorePoster
      v-on:setPosterImageStatus="setPosterImageStatus"
      :posterImageStatus="posterImageStatus"
      :posterData="posterData"
    ></StorePoster>
  </view>
</template>
<style scoped lang="less">
.noscroll {
  height: 100%;
  overflow: hidden;
}
</style>
<script>
import ProductConSwiper from "@/components/ProductConSwiper";
import CountDown from "@/components/CountDown";
import ProductWindow from "@/components/ProductWindow";
import StorePoster from "@/components/StorePoster";
import { getSeckillDetail } from "@/api/activity";
import { postCartAdd } from "@/api/store";
import { imageBase64 } from "@/api/public";
import {
  getCoupon,
  getCollectAdd,
  getCollectDel,
  getUserInfo,
} from "@/api/user";
const NAME = "SeckillDetails";

export default {
  name: "SeckillDetails",
  components: {
    ProductConSwiper,
    CountDown,
    ProductWindow,
    StorePoster,
  },
  props: {},
  data: function () {
    return {
      seckillStatus: "",
      domStatus: false,
      posterData: {
        image: "",
        title: "",
        price: "",
        code: "",
      },
      posterImageStatus: false,
      action: "",
      imgUrls: [],
      storeInfo: [],
      replyCount: 0,
      reply: [],
      cartNum: 1,
      attrTxt: "请选择",
      productValue: [],
      attrValue: "",
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {},
      },
      datatime: 0,
      userCollect: false,
    };
  },
  onShow: function () {
    this.mountedStart();
  },
  methods: {
    onShareAppMessage: function () {
      return {
        title: this.storeInfo.title,
        imageUrl: this.storeInfo.image,
        path:
          "pages/activity/GoodsSeckill/index?id=" +
          this.storeInfo.id +
          "&spread=" +
          uni.getStorageSync("uid") +
          "&pageType=good&codeType=routine",
        success(res) {
          uni.showToast({
            title: "分享成功",
          });
        },
        fail(res) {
          uni.showToast({
            title: "分享失败",
            icon: "none",
          });
        },
      };
    },
    openAlone: function () {
      this.$yrouter.push({
        path: "/pages/shop/GoodsCon/index",
        query: {
          id: this.storeInfo.productId,
        },
      });
      // this.$yrouter.replace({ path: "/detail/" + this.storeInfo.productId });
    },
    routerGo(item) {
      this.$yrouter.push({
        path: "/pages/user/CustomerList/index",
      });
    },
    //收藏商品
    setCollect: function () {
      let that = this,
        id = that.storeInfo.id,
        category = "product";
      if (that.userCollect) {
        getCollectDel(id, category).then(function () {
          that.userCollect = !that.userCollect;
        });
      } else {
        getCollectAdd(id, category).then(function () {
          that.userCollect = !that.userCollect;
        });
      }
    },
    mountedStart: function () {
      var that = this;
      console.log(this);
      let id = that.$yroute.query.id;
      this.seckillStatus = that.$yroute.query.status;
      that.datatime = parseInt(that.$yroute.query.time);
      getSeckillDetail(id).then((res) => {
        that.userCollect = res.data.userCollect;
        res.data.storeInfo.description = res.data.storeInfo.description.replace(
          /\<img/gi,
          '<img style="max-width:100%;height:auto;"'
        );
        that.$set(that.attr, "productAttr", res.data.productAttr);
        that.$set(that, "productValue", res.data.productValue);
        that.$set(that, "storeInfo", res.data.storeInfo);
        that.$set(that, "imgUrls", res.data.storeInfo.sliderImageArr);
        that.$set(that, "replyCount", res.data.replyCount);
        that.$set(that, "reply", res.data.reply);
        that.posterData.image = that.storeInfo.image_base;
        that.updateTitle();
        if (that.storeInfo.title.length > 30) {
          that.posterData.title = that.storeInfo.title.substring(0, 30) + "...";
        } else {
          that.posterData.title = that.storeInfo.title;
        }
        that.posterData.price = that.storeInfo.price;
        that.posterData.code = that.storeInfo.code_base;
        // that.setProductSelect();
        that.domStatus = true;
        that.DefaultSelect();
      });
    },
    updateTitle() {
      // document.title = this.storeInfo.title || this.$yroute.meta.title;
    },
    setPosterImageStatus: function () {
      // var sTop = document.body || document.documentElement;
      // sTop.scrollTop = 0;
      this.posterImageStatus = !this.posterImageStatus;
    },
    DefaultSelect: function () {
      let productAttr = this.attr.productAttr;
      let value = [];
      for (let i = 0; i < productAttr.length; i++) {
        this.$set(productAttr[i], "index", 0);
        value.push(productAttr[i].attrValueArr[0]);
      }
      //sort();排序函数:数字-英文-汉字；
      let productSelect = this.productValue[value.sort().join(",")];
      console.log(productSelect);
      if (productSelect && productAttr.length) {
        this.$set(this.attr.productSelect, "store_name", this.storeInfo.title);
        this.$set(this.attr.productSelect, "image", productSelect.image);
        this.$set(this.attr.productSelect, "price", productSelect.seckillPrice);
        this.$set(this.attr.productSelect, "stock", productSelect.seckillStock);
        this.$set(this.attr.productSelect, "unique", productSelect.unique);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", value.sort().join(","));
        this.$set(this, "attrTxt", "已选择");
      } else if (!productSelect && productAttr.length) {
        this.$set(this.attr.productSelect, "store_name", this.storeInfo.title);
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(
          this.attr.productSelect,
          "price",
          this.storeInfo.seckillPrice
        );
        this.$set(this.attr.productSelect, "stock", 0);
        this.$set(this.attr.productSelect, "unique", "");
        this.$set(this.attr.productSelect, "cart_num", 0);
        this.$set(this, "attrValue", "");
        this.$set(this, "attrTxt", "请选择");
      } else if (!productSelect && !productAttr.length) {
        this.$set(this.attr.productSelect, "store_name", this.storeInfo.title);
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(
          this.attr.productSelect,
          "price",
          this.storeInfo.seckillPrice
        );
        this.$set(
          this.attr.productSelect,
          "stock",
          this.storeInfo.seckillStock
        );
        this.$set(
          this.attr.productSelect,
          "unique",
          this.storeInfo.unique || ""
        );
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", "");
        this.$set(this, "attrTxt", "请选择");
      }
    },
    //将父级向子集多次传送的函数合二为一；
    changeFun: function (opt) {
      if (typeof opt !== "object") opt = {};
      let action = opt.action || "";
      let value = opt.value === undefined ? "" : opt.value;
      this[action] && this[action](value);
    },
    changeattr: function (res) {
      var that = this;
      that.attr.cartAttr = res;
    },
    // ChangeCartNum: function (res) {
    //   var that = this;
    //   if (res) {
    //     if (that.attr.productSelect.cart_num < that.storeInfo.seckillStock) {
    //       that.attr.productSelect.cart_num += 1;
    //       this.cartNum += 1;
    //       console.log(this.cartNum)
    //     }
    //   } else {
    //     if (that.attr.productSelect.cart_num > 1) {
    //       that.attr.productSelect.cart_num -= 1;
    //       this.cartNum -= 1;
    //     }
    //   }
    // },
    ChangeCartNum: function (changeValue) {
        //changeValue:是否 加|减
        //获取当前变动属性
        let productSelect = this.productValue[this.attrValue];
        //如果没有属性,赋值给商品默认库存
        if (productSelect === undefined && !this.attr.productAttr.length) {
          productSelect = this.attr.productSelect;
        }
        //无属性值即库存为0；不存在加减；
        if (productSelect === undefined) return;
        let stock = productSelect.stock || 0;
        let num = this.attr.productSelect;
        if (changeValue) {
          num.cart_num++;
          if (num.cart_num > stock) {
            this.$set(this.attr.productSelect, "cart_num", stock);
            this.$set(this, "cartNum", stock);
          } else {
            this.$set(this.attr.productSelect, "cart_num", num.cart_num);
            this.$set(this, "cartNum", num.cart_num);
          }
        } else {
          num.cart_num--;
          if (num.cart_num < 1) {
            this.$set(this.attr.productSelect, "cart_num", 1);
            this.$set(this, "cartNum", 1);
          } else {
            this.$set(this.attr.productSelect, "cart_num", num.cart_num);
            this.$set(this, "cartNum", num.cart_num);
          }
        }
      },
    //选择属性；
    ChangeAttr: function (res) {
      // 修改了规格
      let productSelect = this.productValue[res.value];
      if (productSelect) {
        this.attr.productAttr[res.indexw].index = res.indexn;
        this.$set(this.attr.productSelect, "image", productSelect.image);
        this.$set(this.attr.productSelect, "price", productSelect.seckillPrice);
        this.$set(this.attr.productSelect, "stock", productSelect.seckillStock);
        this.$set(this.attr.productSelect, "unique", productSelect.unique);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", res.value);
        this.$set(this, "attrTxt", "已选择");
      } else {
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(
          this.attr.productSelect,
          "price",
          this.storeInfo.seckillPrice
        );
        this.$set(this.attr.productSelect, "stock", 0);
        this.$set(this.attr.productSelect, "unique", "");
        this.$set(this.attr.productSelect, "cart_num", 0);
        this.$set(this, "attrValue", "");
        this.$set(this, "attrTxt", "请选择");
      }
    },
    selecAttrTap: function () {
      this.attr.cartAttr = true;
      this.isOpen = true;
    },
    tapBuy: function () {
      var that = this;
      if (that.attr.cartAttr == false) {
        that.attr.cartAttr = !this.attr.attrcartAttr;
      } else {
        var data = {};
        data.productId = that.storeInfo.productId;
        data.cartNum = that.attr.productSelect.cart_num;
        data.uniqueId = that.attr.productSelect.unique;
        data.secKillId = that.storeInfo.id;
        data.new = 1;
        postCartAdd(data)
          .then((res) => {
            that.$yrouter.push({
              path: "/pages/order/OrderSubmission/index",
              query: {
                id: res.data.cartId,
              },
            });
          })
          .catch((err) => {
            uni.showToast({
              title:
                err.msg || err.response.data.msg || err.response.data.message,
              icon: "none",
              duration: 2000,
            });
          });
      }
    },
  },
};
</script>
<style scoped lang="less">
.product-con .nav {
  padding: 0 0.2 * 100rpx;
}

.product-con .footer .bnt .buy.bg-color-hui {
  background: #ccc;
}
</style>