jxc4_app_and_mini/src/components/goodCmp/good-cell-index/good-cell-big.vue

<template>
  <div class="good-cell-big" ref="" @click="toGoodDetail" >
     <div class="good-img" v-if="skuName.img">
      <img class="good-img-size" :src="skuName.img" alt="加载中..." />
    </div>
    <div class="good-name" v-if="skuName.name">{{skuName.name}}</div>
    <div class="countTime-wrap">
      <div class="countTime" v-if="skuName.actType===5 && skuName.actPrice!==0 && skuName.trendType !==0 && timeTen">{{skuName.trendType===2 ? '降价' :'升价'}}还剩 {{msg}}</div>
    </div>
    <div class="priceStyle" v-if="skuName.unit">
      <span>每</span>
      <!-- <span v-if="isB2B">斤</span> -->
      <span v-if="!isB2B || isMaterial">{{skuName.unit}}</span>
      <span v-else>斤</span>
      <span>约为</span>
      <!-- <span class="priceColor" v-if="isMaterial || isB2B">{{$filters.toFixed2(price*100)}}</span> -->
      <span class="priceColor" v-if="isMaterial">{{$filters.toFixed2(skuName.curPrice)}}</span>
      <span class="priceColor" v-else-if="isB2B">{{$filters.toFixed2(skuName.price*100)}}</span>
      <span class="priceColor" v-else>{{$filters.toFixed2(skuName.curPrice)}}</span>
      <span>元(以实际价格为准)</span>
    </div>
    <div class="good-price" v-if="newPrice">
      <div class="price">
        <div class="good-price" >
          <span>￥</span>
          <span class="good-price-font" >{{newPrice }}</span>
        </div>
        <span class="unit" v-if="isMaterial || isB2B">/{{skuName.unit}}</span>
        <!-- <span class="unit" v-if="isB2B">/{{skuName.unit}}</span> -->
        <span class="unit" v-else>/斤</span>
        <div class="ori-price" v-if="skuName.oriPrice && !isMaterial" >{{$filters.toFixed2(skuName.oriPrice)}}</div>
      </div>
      <div class="act-type-wrapper">
        <div class="act-type" v-if="skuName.actType">{{actTypeArr[skuName.actType]}}</div>
      </div>
    </div>
    <div class="add-cart" @click.stop="addCart" v-if="skuName.count===0 && isShowShop">加入购物车</div>
    <template v-if="skuName.count!==0 && isShowShop">
      <div class="handle-shopcar" @click.stop="clickStop" v-if="skuName.id !== 6031118">
        <plus-minus :skuName="skuName" :count="skuName.count" type="input" @clickPlus="handlePlus" @clickMinus="handleMinus" @countChange="countChange"></plus-minus>
      </div>
    </template> 
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { toast, modal, errToast,jumpPage } from "@/utils/uniapi.js";
import PlusMinus from "@/components/goodCmp/plus-minus/plus-minus";
import { msgData, actTypeArr } from "@/config";
// import orderPage from '@/apis/orderPage'
// import { handleCreatePay } from '@/utils/uniapi.js'
export default {
  components: {
    PlusMinus
  },
  props: {
    skuName: Object,
    index: {
      type: Number,
    }
  },
  data() {
    return {
      actTypeArr,
      fromTime: null,
      toTime: null,
      modalShow: false,
      msg: "",
      num: null,
      // price: null,
      price: 0,
      checked: false,
      preCreateData: {},
      highPrice: null,
      lowPrice: null
      // imgUrl:'https://image.jxc4.com/image/8a98a93946f9f70dd84960c06725f4fb.jpg'
    };
  },
  computed: {
    ...mapGetters({
      storeID:"indexPage/storeID",
      defaultAddress: "addressVue/defaultAddress",
      isB2B:'indexPage/isB2B',
      isLogin: "login/isLogin",
      isShowShop: "isShowShop",
      isMaterial: "indexPage/isMaterial",
      materialInfo:"indexPage/materialInfo"
    }),
    newPrice(){
      let priceStr = ''
      // let curPrice = this.isB2B ? this.skuName.curPrice : this.price * 100
      let curPrice = this.isMaterial ? this.skuName.curPrice : this.isB2B ? this.skuName.curPrice : this.price * 100
      // let curPrice = this.isB2B ? this.skuName.curPrice : this.price
      // console.log(this.isB2B,'打印当前的价格',curPrice,'skuName',this.skuName.curPrice,'this.price',this.price)
      if (curPrice !== 0) {
        priceStr = ((curPrice/100).toFixed(2)).split('.')[0] + '.' + ((curPrice/100).toFixed(2)).split('.')[1]
      }
      return priceStr
    }
  },
  created() {
    let weight = this.skuName.weight ? this.skuName.weight : 1
    this.price = ((this.skuName.curPrice / 100) / weight) * 500;
    // if (this.skuName.id === 6041958 ) {
    //   console.log(this.skuName.curPrice / 100,'this.price',this.price,'weight')
    // }
    
  },
  methods: {
    // // 设置图片信息
    // setImgInfo() {    // val
    //   this.imgUrl = this.skuName.img
    // },
    // 加入购物车
    addCart(){
      // console.log('添加购物车')
      if(!this.isLogin){
        toast('请登录')
        jumpPage('switchTab','/pages/mine/index',800)
        return
      }
      this.handlePlus()
    },
    // 阻止点击事传播
    clickStop(){
      // console.log('阻止点击事件传播')
    },
    //守家
    waitPriceDown(x) {
      this.modalShow = true;
      console.log(x);
    },
    close() {
      this.modalShow = false;
    },
    async handlePlus() {
      
      // #ifdef MP-WEIXIN
      // if (this.isMaterial && this.skuName.id === 6039382 && this.materialInfo && this.materialInfo.fromStoreInfo && this.materialInfo.fromStoreInfo.packageSwitch === 1) {
      //   toast('禁止购买物料袋，请联系运营')
      //   return
      // }
      // #endif

      this.$emit("handleSkuNamePlus", this.index);
    },
    async handleMinus() {
      if (this.skuName.count === 1) {
        let confirm = await modal("温馨提示", msgData.delGoods);
        if (!confirm) return 
      }
      this.$emit("handleSkuNameMinus", this.index);
    },
    async countChange(count) {
      try {
        // await this.changeCar({
        //   skuName: this.skuName,
        //   count,
        // });
        this.$emit("handleSkuNameChange", {
          index: this.index,
          count,
        });
      } catch (e) {
        console.error(e);
        errToast(e);
      }
    },
    // 跳转到商品详情页
    toGoodDetail() {
      if (this.shopCar) return false;
      jumpPage('navigateTo',`/pagesGoods/good-detail/index?skuID=${this.skuName.id}&storeID=${this.skuName.storeID}`)
    },
  },
};
</script>

<style lang="scss">
 @use "./good-cell-big.scss";
.red {
  flex: 1;
  color: #fe6263;
  margin: 10rpx 0;
  font-size: 28rpx;
}
.gray {
  flex: 1;
  color: #999;
  margin: 10rpx 0;
  font-size: 28rpx;
}
.priceStyle{
  color: rgb(149, 209,131);
  font-size: 25rpx;
  margin-bottom:10rpx;
}
.priceColor{
  color:#fe6263;
}


.good-price {
    font-size: 32rpx;
    color: #fe6263;
    font-weight: 500;
    // &:before {
    //   content: "￥";
    //   font-size: 28rpx;
    // }
    
    &-font{
      font-size: 38rpx;
      &:after{
        // content: ".";
        font-size: 28rpx;
        padding:0 5rpx;
    }
    }
}
</style>