discounts-minapp/detail/goodsDetail/index.vue

<template>
  <view class="goodsDetail">
    <view class="good-img-box">
      <image class="good-img" :src="info.goodsPath" ></image>
    </view>
    <view class="goods-info">
      <view class="price-box">
        <view class="left">
          <view class="unit"> ￥ </view>
          <view class="price">
            {{ info.realPrice }}
          </view>
          <view class="old-price"> 市场价 ￥{{ info.marketPrice }} </view>
        </view>

        <view class="right"> 销量{{ info.saleNum }} </view>
      </view>
      <view class="goods-name">
        {{ info.goodsName }}
      </view>
      <view class="desc">
        {{ info.goodsDescribe }}
      </view>
    </view>
    <template v-if="info.specs[0].specValues.length">
      <view class="type-box" v-for="item in info.specs" :key="item.specId">
        <view class="type-title">
          {{ item.specName }}
        </view>
        <view class="type-list">
          <view
            class="type-item"
            :class="[active == d ? 'active' : '']"
            v-for="(i, d) in item.specValues"
            @click="handleSpec(item, i, d)"
            :key="i.specId"
          >
            {{ i.specValue }}
          </view>
        </view>
      </view>
    </template>
    <!-- 		
		<view class="shop-limit" @click="jump('/detail/shopList/index')">
			<view class="info">
				<view class="shop-name">
				
					{{shopInfo.shopVo.shopName}}
				</view>
				<view class="address">
					
					{{shopInfo.district}}  {{(shopInfo.shopVo.distance/1000).toFixed(2)}} KM
				</view>
			</view>
			<view class="num">
				{{shopList.length}}家店适用
				<image class="icon" src="../../static/shop-desc.png" mode=""></image>
			</view>
		</view> -->

    <view class="tab-group">
      <view
        class="tab"
        :class="[tab == 1 ? 'active' : '']"
        @click="handleTab(1)"
      >
        商品详情
      </view>
      <view
        class="tab"
        :class="[tab == 2 ? 'active' : '']"
        @click="handleTab(2)"
      >
        购买须知
      </view>
    </view>
    <view class="desc-box" v-show="tab == 1">
      <rich-text class="goods-desc" :nodes="info.goodsDetail"></rich-text>
    </view>
    <view class="list" v-show="tab == 2">
      <view class="item" v-for="(item, index) in info.attrs" :key="index">
        <view class="label">
          {{ item.attrName == "validDay" ? "有效期" : item.attrName }}
        </view>
        <view class="value" v-html="filterMsg(item.attrValue)"> </view>
      </view>
      <!-- <view class="item">
				<view class="label">
					使用时间
				</view>
				<view class="value">
					营业时间内可用
				</view>
			</view> -->
    </view>

    <view class="buy-box">
      <!-- <image class="head" :src="shopInfo.logoPath" @click="goShopDetail(shopInfo)" mode=""></image> -->
      <view class="btn-box">
        <!-- 	<view class="group-btn" @click="handleBuy">
					<view class="label">
						团购
					</view>
					<view class="price">
						￥{{info.realPrice}}
					</view>
				</view> -->

        <view
          class="buy-btn"
          :class="[info.realStockNum ? '' : 'none']"
          @click="handleBuy"
        >
          <view class="label">
            {{ info.realStockNum ? "购买" : "售罄" }}
          </view>
          <view class="price"> ￥{{ info.realPrice }} </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { detail } from "@/api/goods.js";
import { search } from "@/api/shop.js";
export default {
  data() {
    return {
      active: 0,
      tab: 1,
      shopList: [],
      info: {
        specs: [{ specValues: [] }],
      },
      shopInfo: {},
    };
  },
  methods: {
    filterMsg(val) {
      if(!isNaN(val)){
        val=val + "天";
      }
      return val.replace(/\n/g, "<br>");
    },
    jump(url) {
      uni.navigateTo({
        url,
      });
    },
    handleTab(val) {
      this.tab = val;
    },
    handleBuy() {
      if (!this.info.realStockNum) return;
      let that = this;
      if (uni.getStorageSync("token")) {
        uni.navigateTo({
          url: `/pay/pay`,
          success: function (res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit("pay", that.info);
          },
        });
      } else {
        uni.showModal({
          title: "请登录",
          confirmText: "去登录",
          success(res) {
            console.log(res);
            if (res.confirm) {
              uni.navigateTo({
                url: `/login/login/login?redirect=/detail/goodsDetail/index&id=${that.info.goodsId}`,
              });
            }
          },
        });
      }
    },
    handleSpec(item,i,d){
      this.active = d
    },
    detail(goodsId) {
      detail({ goodsId, resource: 2 }).then((res) => {
        if (res.state == "Success") {
          this.info = res.content;
          this.info.goodsDetail = res.content.goodsDetail.replace(
            /<img/gi,
            '<img class="img_class" '
          );
        }
      });
    },
    goShopDetail(shopInfo) {
      uni.setStorageSync("shopInfo", JSON.stringify(shopInfo));
      uni.navigateTo({
        url: `../../detail/shopDetail/shopDetail`,
      });
    },
    getShopList(goodsId) {
      let location = JSON.parse(uni.getStorageSync("location"));
      let obj = {
        goodsId,
        pageCurrent: 1,
        pageSize: 99,
      };
      obj["location.lat"] = location.latitude;
      obj["location.lon"] = location.longitude;
      search(obj).then((res) => {
        if (res.state == "Success") {
          this.shopList = res.content.records;
          uni.setStorageSync("shopList", JSON.stringify(this.shopList));
        }
      });
    },
  },
  onLoad(option) {
    this.shopInfo = JSON.parse(uni.getStorageSync("shopInfo"));
    this.detail(option.id);
    this.getShopList(option.id);
    let that = this;
    // this.info = JSON.parse(uni.getStorageSync('goodsInfo'))
    // const eventChannel = this.getOpenerEventChannel();
    // if(JSON.stringify(eventChannel) !=='{}'){
    // 	eventChannel.on('goodsInfo', function(data) {
    // 		that.info = data
    // 	})
    // }
  },
};
</script>

<style lang="scss">
.goodsDetail {
  background: #f9f9f9;
  padding-bottom: 200rpx;
  min-height: 100vh;
  .good-img-box {
    width: 100%;
    height: 660rpx;
    .good-img{
      width: 100%;
      height: 100%;
    }
  }
  .goods-info {
    padding: 24rpx;
    margin-bottom: 20rpx;
    background: #fff;
    .price-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: flex-end;
        .unit {
          font-size: 20rpx;
          color: #ff4d3a;
          font-weight: bold;
        }
        .price {
          font-size: 32rpx;
          color: #ff4d3a;
          font-weight: bold;
        }
        .old-price {
          font-size: 20rpx;
          color: #aaaaaa;
          text-decoration: line-through;
          margin-left: 12rpx;
        }
      }
      .right {
        font-size: 24rpx;
        color: #aaaaaa;
      }
    }
    .goods-name {
      font-size: 32rpx;
      color: #222222;
      font-weight: bold;
      margin-top: 20rpx;
    }
    .desc {
      font-size: 24rpx;
      color: #aaaaaa;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 12rpx;
    }
  }
  .type-box {
    padding: 24rpx;
    background: #fff;
    margin-bottom: 20rpx;
    .type-title {
      font-size: 28rpx;
      color: #222222;
    }
    .type-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .type-item {
        width: 316rpx;
        height: 52rpx;
        text-align: center;
        line-height: 52rpx;
        background: #f0f0f0;
        border-radius: 26rpx 26rpx 26rpx 26rpx;
        font-weight: 300;
        font-size: 24rpx;
        color: #aaaaaa;
        margin-top: 28rpx;
      }
      .type-item.active {
        background: #ee4320;
        color: #ffffff;
      }
    }
  }

  .shop-limit {
    padding: 24rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    .info {
      .shop-name {
        font-size: 28rpx;
        color: #222222;
      }
      .address {
        font-size: 24rpx;
        color: #aaaaaa;
        margin-top: 16rpx;
      }
    }
    .num {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #aaaaaa;
      .icon {
        width: 48rpx;
        height: 48rpx;
        transform: rotate(-90deg);
      }
    }
  }

  .tab-group {
    display: flex;
    background: #fff;
    .tab {
      flex: 1;
      padding: 24rpx 0;
      text-align: center;
      font-size: 28rpx;
      color: #222222;
    }
    .tab.active {
      font-weight: 600;
    }
  }

  .desc-box {
    .goods-desc {
      color: #222222;
      font-size: 24rpx;
      .img_class {
        max-width: 100% !important;
      }
    }
  }

  .list {
    background: #fff;
    .item {
      padding: 24rpx;
      border-top: 1rpx solid #f0f0f0;
      .label {
        font-weight: 600;
        font-size: 28rpx;
        color: #222222;
      }
      .value {
        font-size: 24rpx;
        color: #aaaaaa;
        margin-top: 16rpx;
        line-height: 40rpx;
      }
    }
  }

  .buy-box {
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    background: #fff;
    padding: 10rpx 24rpx 76rpx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .head {
      width: 80rpx;
      height: 80rpx;
      background: #aaa;
      border-radius: 50%;
    }
    .btn-box {
      display: flex;
      text-align: center;
      .group-btn {
        width: 280rpx;
        height: 80rpx;
        background: #6499ff;
        border-radius: 40rpx 0rpx 0rpx 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .label {
          font-weight: 600;
          font-size: 28rpx;
          color: #ffffff;
        }
        .price {
          font-size: 24rpx;
          color: #ffffff;
        }
      }
      .buy-btn.none {
        filter: grayscale(1);
      }
      .buy-btn {
        // width: 280rpx;

        margin: 0 auto;
        width: 690rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        background: $uni-color-primary;
        color: #fff;
        .label {
          font-weight: 600;
          font-size: 28rpx;
          color: #ffffff;
        }
        .price {
          font-size: 24rpx;
          color: #ffffff;
        }
      }
    }
  }
}
</style>