wx-qhb/pageA/productdetails.vue

<template>
  <view>
    <scroll-view
      ref="scrollView"
      scroll-y="true"
      scroll-with-animation="true"
      style="min-height: 100%"
      :scroll-into-view="toView"
    >
      <!-- 页面内容 -->
      <!-- 自定义导航栏 -->
      <u-navbar :safeAreaInsetTop="true" :placeholder="true">
        <view class="u-nav-slot u-flex" slot="left" style="display: flex">
          <view class="u-flex">
            <u-icon
              name="arrow-left"
              size="19"
              @click="navigateBack()"
            ></u-icon>
            <u-tabs
              :duration="duration"
              @click="scrollToPosition"
              :list="list1"
              lineColor="#fff"
              :activeStyle="{ color: '#FF1515' }"
              :inactiveStyle="{
                color: ' #666666',
              }"
            ></u-tabs>
          </view>
          <!-- 				<view class="" style="margin-left: 184rpx;" @click="share = true">
					<image src="static/images/share.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
				</view> -->
        </view>
        <view class="u-nav-slot u-flex" slot="right" style="display: flex">
          <view class="" style="margin-left: 184rpx" @click="share = true">
            <image
              src="static/images/share.png"
              style="width: 38rpx; height: 38rpx"
              mode=""
            ></image>
          </view>
          <view class="" style="width: 180rpx"></view>
        </view>
      </u-navbar>
      <!-- 商品图片 -->
      <view class="uni-margin-wrap" id="scroll0">
        <swiper
          class="swiper"
          circular
          :indicator-dots="false"
          :autoplay="true"
        >
          <swiper-item v-if="goodinfo.video">
            <video
              style="width: 750rpx; height: 750rpx"
              :src="goodinfo.video"
            ></video>
          </swiper-item>
          <swiper-item
            v-for="(item, idx) in goodinfo.images.split(',')"
            :key="idx"
          >
            <image
              :src="goodinfo.image"
              style="width: 750rpx; height: 750rpx"
              mode=""
            ></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="back">
        <!-- 折扣 -->
        <view class="discount">
          <view class="top">
            <text class="count" v-if="goodinfo.is_discount == 0">{{
              i18n.Discounted
            }}</text>
            <text class="money">¥</text>
            <text class="money" style="font-size: 48rpx">{{
              goodinfo.is_discount == 0
                ? goodinfo.discount_price.slice(0, -3)
                : goodinfo.price.slice(0, -3)
            }}</text>
            <text class="money">{{
              goodinfo.is_discount == 0
                ? goodinfo.discount_price.slice(-3)
                : goodinfo.price.slice(-3)
            }}</text>
            <text class="right" v-if="goodinfo.is_discount == 0"
              >¥{{ goodinfo.price }}</text
            >
          </view>
          <view class="bottom">
            <text class="tabs">{{ i18n.sametype }}</text>
            <view class="title">
              <text
                class="title"
                selectable
                @longpress="onLongPress"
                v-if="language == 'zh-CN'"
              >
                {{ goodinfo.name_cn }}
              </text>
              <text
                class="title"
                selectable
                @longpress="onLongPress"
                v-if="language == 'en-US'"
              >
                {{ goodinfo.name_en }}
              </text>
              <text
                class="title"
                selectable
                @longpress="onLongPress"
                v-if="language == 'es-ES'"
              >
                {{ goodinfo.name_es }}
              </text>
              <text
                class="title"
                selectable
                @longpress="onLongPress"
                v-if="language == 'it-IT'"
              >
                {{ goodinfo.name_ita }}
              </text>
            </view>
          </view>
        </view>
        <!-- 服务 -->
        <view class="serve" style="margin-top: 20rpx">
          <view class="top u-flex u-row-between" @click="sele">
            <view class="u-flex">
              <view class="change">{{ i18n.Sele }}</view>
              <view class="" style="margin-left: 20rpx">
                {{ selectArr.length > 0 ? selectArr.join(",") : i18n.Sele }}
              </view>
            </view>
            <view class="">
              <u-icon name="arrow-right" size="16"></u-icon>
            </view>
          </view>
          <view
            class="top u-flex u-row-between"
            style="margin-top: 36rpx"
            @click="serve = true"
          >
            <view class="u-flex">
              <view class="change">{{ i18n.service }}</view>
              <view class="" style="margin-left: 20rpx"
                >正品保障 · 极速退款 · 7天无理由退</view
              >
            </view>
            <view class="">
              <u-icon name="arrow-right" size="16"></u-icon>
            </view>
          </view>
        </view>
        <!-- 评论 -->
        <view class="comment" ref="targetPosition" id="scroll1">
          <view class="u-flex u-row-between">
            <text class="ping">{{ i18n.review }}</text>
            <view class="u-flex" @click="tocomment">
              <text class="strip"
                >{{ total }}{{ i18n.article + i18n.review }}</text
              >
              <u-icon name="arrow-right" size="16"></u-icon>
            </view>
          </view>
          <view class="" v-for="(item, idx) in commentlist" :key="idx">
            <view class="uesr u-flex u-row-between" style="margin-top: 36rpx">
              <view class="u-flex">
                <image
                  src="../static/images/logo.png"
                  style="width: 52rpx; height: 52rpx"
                  mode=""
                >
                </image>
                <text class="name">{{ item.member.nickname }}</text>
              </view>
              <text class="strip">{{ item.created_at }}</text>
            </view>
            <view class="content">
              {{ item.content }}
            </view>
            <view class="sku" style="margin-top: 16rpx">{{
              item.sku_item.item
            }}</view>
          </view>
        </view>
        <!-- 店铺 -->
        <view class="store u-flex u-row-between">
          <view class="u-flex">
            <image
              :src="goodinfo.merchant.image"
              style="width: 112rpx; height: 112rpx"
              mode=""
            ></image>
            <view class="" style="margin-left: 20rpx">
              <view class="title">{{ goodinfo.merchant.merchant_name }}</view>
              <view class="redback u-flex">
                <uni-rate
                  network
                  allow-half
                  :readonly="true"
                  active-color="red"
                  color="rgba(255, 27, 0, 0.5)"
                  :size="8"
                  :value="5"
                  v-model="rate"
                />
                <text style="margin-left: 8rpx">{{ rate }}</text>
              </view>
              <view class="" style="margin-top: 20rpx"></view>
              <view class="u-flex" style="margin-top: 20rpx">
                <text class="num">{{ i18n.Salesvolume }} 2384w+</text>
                <view class="line"></view>
                <!-- 评价总数 -->
                <text class="num">{{ i18n.Salesvolume }} 2384w+</text>
              </view>
            </view>
          </view>
          <view class="goshop" @click="goshop">{{ i18n.stroll }}</view>
        </view>
        <!-- 推荐 -->
        <view class="recommend">
          <view class="title">
            {{ i18n.Recommended }}
          </view>
          <view class="">
            <swiper
              style="height: 400rpx"
              class="swiper"
              circular
              :indicator-dots="true"
              :autoplay="true"
            >
              <swiper-item v-for="(parent, index) in swiptlist" :key="index">
                <view class="u-flex swiper-item u-row-between">
                  <view
                    class=""
                    v-for="(child, idx) in parent"
                    @click="detail(child.id)"
                    :key="idx"
                  >
                    <image
                      :src="child.image"
                      style="width: 214rpx; height: 214rpx"
                      mode=""
                    >
                    </image>
                    <view
                      class="u-line-1"
                      style="
                        width: 214rpx;
                        margin-top: 14rpx;
                        font-style: normal;
                        font-size: 26rpx;
                      "
                      v-if="language == 'zh-CN'"
                    >
                      {{ child.name_cn }}
                    </view>
                    <view
                      class="u-line-1"
                      style="
                        width: 214rpx;
                        margin-top: 14rpx;
                        font-style: normal;
                        font-size: 26rpx;
                      "
                      v-if="language == 'en-US'"
                    >
                      {{ child.name_en }}
                    </view>
                    <view
                      class="u-line-1"
                      style="
                        width: 214rpx;
                        margin-top: 14rpx;
                        font-style: normal;
                        font-size: 26rpx;
                      "
                      v-if="language == 'es-ES'"
                    >
                      {{ child.name_es }}
                    </view>
                    <view
                      class="u-line-1"
                      style="
                        width: 214rpx;
                        margin-top: 14rpx;
                        font-style: normal;
                        font-size: 26rpx;
                      "
                      v-if="language == 'it-IT'"
                    >
                      {{ child.name_ita }}
                    </view>
                    <view class="" style="margin-top: 12rpx">
                      <span style="color: rgba(204, 51, 0, 1); font-size: 26rpx"
                        >¥{{ child.price }}</span
                      >
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
        <view class="recommend" id="scroll2">
          <view class="title">{{ i18n.Productdetails }}</view>
          <view class="" style="margin-top: 32rpx; margin-bottom: 28rpx">{{
            i18n.Specification
          }}</view>
          <view class="specification">
            <view
              class="item u-flex"
              style="margin-bottom: 28rpx"
              v-for="(item, idx) in goodinfo.parameter"
              :key="idx"
            >
              <view style="width: 150rpx">{{ item.name }}</view>
              <text style="margin-left: 58rpx">{{ item.value }}</text>
            </view>
          </view>
          <view class="">
            <image
              :src="goodinfo.image"
              style="width: 100%; height: 580rpx"
              mode=""
            ></image>
          </view>
        </view>
        <view class="" style="height: 158rpx"></view>
        <view class="fix u-flex u-row-between">
          <view class="u-flex" style="column-gap: 35rpx">
            <view
              class="u-flex"
              style="justify-content: center; flex-direction: column"
            >
              <image
                src="../static/images/index/service.png"
                style="width: 40rpx; height: 40rpx"
                mode=""
              >
              </image>
              <view class="ke">{{ i18n.Customer }}</view>
            </view>
            <view
              class="u-flex"
              style="justify-content: center; flex-direction: column"
              @click="shopping"
            >
              <image
                src="../static/cart1.png"
                style="width: 40rpx; height: 40rpx"
                mode=""
              ></image>
              <view class="ke">{{ i18n.Shopping }}</view>
            </view>
            <view
              class="u-flex"
              style="
                justify-content: center;
                flex-direction: column;
                width: 70rpx;
              "
              @click="fllow"
            >
              <image
                v-if="goodinfo.is_interest == 1"
                src="../static/images/index/attention.png"
                style="width: 40rpx; height: 40rpx"
                mode=""
              ></image>
              <image
                v-if="goodinfo.is_interest == 0"
                src="../static/images/index/bottom1.png"
                style="width: 40rpx; height: 40rpx"
                mode=""
              >
              </image>
              <view v-if="goodinfo.is_interest == 1" class="ke">{{
                i18n.follow
              }}</view>
              <view
                v-if="goodinfo.is_interest == 0"
                class="ke"
                style="color: rgba(248, 50, 36, 1)"
                >已关注
              </view>
            </view>
          </view>
          <view
            v-if="sku_info.stock_total == 0"
            class="tongzhi"
            @click="inform"
          >
            {{ i18n.notification }}
          </view>
          <view v-if="sku_info.stock_total != 0" class="join" @click="join(0)"
            >加入购物车</view
          >
          <view v-if="sku_info.stock_total != 0" class="pin" @click="join(1)"
            >立即拼团</view
          >
        </view>
      </view>
    </scroll-view>
    <!-- 加入购物车 -->
    <u-popup :round="10" :show="show">
      <view
        style="padding: 48rpx 28rpx; box-sizing: border-box; position: relative"
      >
        <view class="u-flex">
          <image
            :src="goodinfo.image"
            style="width: 192rpx; height: 192rpx"
            mode=""
          ></image>
          <view class="" style="margin-left: 20rpx">
            <view class="">
              <text class="read">¥</text>
              <text
                class="read"
                style="font-size: 40rpx"
                v-if="goodinfo.is_discount == 0"
                >{{
                  (Number(sku_info.discount_price * 100) *
                    Number(value * 100)) /
                    10000 ||
                  (Number(goodinfo.discount_price * 100) *
                    Number(value * 100)) /
                    10000
                }}</text
              >
              <!-- <text class="read" v-if="goodinfo.is_discount==0">{{(goodinfo.discount_price * value).slice(-3)}}</text> -->
              <text
                class="read"
                style="font-size: 40rpx"
                v-if="goodinfo.is_discount == 1"
                >{{
                  (Number(sku_info.price * 100) * Number(value * 100)) /
                    10000 ||
                  (Number(goodinfo.price * 100) * Number(value * 100)) / 10000
                }}</text
              >
              <!-- <text class="read" v-if="goodinfo.is_discount==1">{{(goodinfo.price * value).slice(-3)}}</text> -->
              <!-- <text class="read" style="font-size: 40rpx;" >{{(Number(goodinfo.price) * Number(value)).toString()}}</text> -->
            </view>
            <text class="guige"
              >已选：{{ selectArr.join(",") || i18n.selection }}</text
            >
          </view>
        </view>
        <view
          class=""
          style="position: absolute; top: 48rpx; right: 28rpx"
          @click="show = false"
        >
          <u-icon
            name="close"
            @click="show == false"
            color="#000"
            size="28"
          ></u-icon>
        </view>
        <view class="" v-for="(item, index) in goodinfo.sku">
          <view class="title1" style="margin-top: 40rpx; margin-bottom: 32rpx">
            {{ item.name }}
          </view>
          <view class="u-flex" style="column-gap: 18rpx; flex-wrap: wrap">
            <view
              class=""
              :class="selectArr[index] == child ? 'acttab' : 'tabs'"
              v-for="(child, idx) in item.values"
              :key="idx"
              @click="actabs(index, child, item)"
            >
              {{ child }}
            </view>
          </view>
        </view>
        <view class="u-flex u-row-between" style="margin-top: 30rpx">
          <text class="title1">数量</text>
          <u-number-box v-model="value" @change="valChange"></u-number-box>
        </view>
        <view class="" style="height: 200rpx"></view>
        <view class="bottoma">
          <view v-if="shopcar == 0" class="btn" @click="joincart">
            加入购物车
          </view>
          <view v-if="shopcar == 1" class="btn" @click="order"> 立即购买 </view>
          <view v-if="shopcar == 2" class="btn" @click="show = false">
            确定
          </view>
        </view>
      </view>
    </u-popup>
    <u-popup :show="serve" :round="20">
      <view
        style="
          padding: 48rpx 24rpx;
          box-sizing: border-box;
          background-color: #fff3e7;
          position: relative;
          border-radius: 20rpx 20rpx 0 0;
        "
      >
        <view
          class="u-flex"
          style="flex-direction: column; justify-content: center"
        >
          <image
            src="../static/images/index/serve.png"
            style="width: 138rpx; height: 34rpx"
            mode=""
          ></image>
          <text class="info"> 售前售后 安心无忧购物 </text>
        </view>
        <view
          class=""
          style="position: absolute; top: 48rpx; right: 24rpx"
          @click="serve = false"
        >
          <u-icon name="close" style="width: 22rpx; height: 22rpx"></u-icon>
        </view>
        <view class="contenta">
          <view class="">
            <view class="title">丢包丢件</view>
            <view class="content"
              >快件如果在运输过程中出现损毁，将按照保价</view
            >
          </view>
          <view class="" style="margin-top: 36rpx">
            <view class="title">丢包丢件</view>
            <view class="content"
              >快件如果在运输过程中出现损毁，将按照保价</view
            >
          </view>
          <view class="" style="margin-top: 36rpx">
            <view class="title">丢包丢件</view>
            <view class="content"
              >快件如果在运输过程中出现损毁，将按照保价</view
            >
          </view>
        </view>
        <view class="button" @click="serve = false">
          {{ i18n.know }}
        </view>
      </view>
    </u-popup>
    <u-popup :round="10" :show="share" bgColor=" rgba(244, 244, 244, 1);">
      <view
        style="
          padding: 48rpx 24rpx;
          box-sizing: border-box;
          background-color: rgba(244, 244, 244, 1);
          border-radius: 10px 10px 0 0;
        "
      >
        <view class="u-flex u-row-between" style="">
          <view class="" style="width: 28px; height: 28px"></view>
          <text class="info" style="font-size: 32rpx">
            {{ i18n.shar }}
          </text>
          <image
            src="../static/images/index/bottom2.png"
            style="width: 40rpx; height: 40rpx"
          >
          </image>
        </view>
        <!-- 				<view class="" style="position: absolute;top: 48rpx;right:24rpx;">
					
				</view> -->
        <view
          class="u-flex u-row-between"
          style="margin-top: 82rpx; padding: 0 140rpx"
        >
          <view class="">
            <image
              src="../static/images/index/link.png"
              style="width: 108rpx; height: 108rpx"
              mode=""
            >
            </image>
            <view class="link">{{ i18n.Copylink }}</view>
          </view>
          <view class="" @click="builder">
            <image
              src="../static/images/index/image.png"
              style="width: 108rpx; height: 108rpx"
              mode=""
            >
            </image>
            <view class="link">{{ i18n.Generatepicture }}</view>
          </view>
        </view>
        <view
          class="button"
          @click="share = false"
          style="background: #fff; color: #555555; margin-top: 58rpx"
        >
          {{ i18n.Cancel }}
        </view>
      </view>
    </u-popup>
    <u-popup
      :show="imagea"
      bgColor=" rgba(244, 244, 244, 0);"
      mode="center"
      :customStyle="{ alignItems: 'center' }"
    >
      <view
        class="u-fle"
        style="display: flex; justify-content: flex-end; width: 100%"
      >
        <u-icon
          name="close"
          @click="imagea == false"
          color="#fff"
          size="28"
        ></u-icon>
      </view>
      <view
        style="
          padding: 48rpx 24rpx;
          box-sizing: border-box;
          background-color: rgba(255, 255, 255, 1);
          border-radius: 16rpx;
          width: 538rpx;
        "
      >
        <view class="" style="">
          <image
            src="../static/images/index/bottom2.png"
            style="width: 490rpx; height: 490rpx"
          ></image>
        </view>
        <view class="money">
          <span>¥</span>
          <span style="font-size: 36rpx">258</span>
          <span>00</span>
        </view>
        <view class="title">布兰德低温烘焙猫粮全价通用高端鲜肉成猫幼</view>
        <view
          class=""
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 44rpx;
          "
        >
          <image
            src="../static/images/logo.png"
            style="width: 132rpx; height: 132rpx"
            mode=""
          ></image>
          <view class="view">长按识别查看</view>
        </view>
      </view>
      <view class="button" style="width: 658rpx">保存到相册</view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      toView: "",
      imagea: false,
      list1: [
        {
          name: "商品",
        },
        {
          name: "评价",
        },
        {
          name: "详情",
        },
      ],
      current: 0,
      // 购物车
      show: false,
      //服务
      serve: false,
      //分享
      share: false,
      value: 1, //步进器的值
      swiptlist: [], //推荐列表
      actab: 0,
      id: "", //商品id
      language: "",
      goodinfo: {}, //商品详情
      duration: 0, //tabs选项
      actidx: 0,
      subIndex: [],
      selectArr: [],
      shopcar: "",
      sku_info: {},
      commentlist: [],
      total: "",
      rate: 5,
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  onLoad(options) {
    this.id = options.id;
    this.comment();
  },
  onShow() {
    if (uni.getStorageSync("language") != "") {
      this.language = uni.getStorageSync("language");
    }
    this.detail(this.id);
    this.recommend();
  },
  methods: {
    //评论页面
    tocomment() {
      uni.navigateTo({
        url: "/pageA/comment?id=" + this.goodinfo.merchant_goods_id,
      });
    },
    //关注
    fllow() {
      uni.$u.http
        .post("/api/interest/follow", {
          interest_type: 0,
          interest_id: this.goodinfo.merchant_goods_id,
        })
        .then((res) => {
          if (res == "ok1") {
            this.$u.toast("取关成功");
            this.detail(this.id);
          } else {
            this.$u.toast("关注成功");
            this.detail(this.id);
          }
        })
        .catch(() => {});
    },
    sele() {
      this.shopcar = 2;
      this.show = true;
    },
    //跳转到购物车
    shopping() {
      uni.switchTab({
        url: "/pages/cart/cart",
      });
    },
    //评论接口
    comment() {
      uni.$u.http
        .post("/api/goods/goods_comment", {
          merchant_goods_id: this.goodinfo.merchant_goods_id,
          page: 1,
          limit: 2,
        })
        .then((res) => {
          this.commentlist = res.data;
          this.total = res.total;
        })
        .catch(() => {});
    },
    //商品推荐
    recommend() {
      uni.$u.http
        .post("/api/goods/recommend", {
          keyword: "",
        })
        .then((res) => {
          this.swiptlist = res.reduce(
            (a, b) => {
              let lastIndex = a.length - 1;
              if (a[lastIndex].length < 3) {
                a[lastIndex].push(b);
              } else {
                a.push([b]);
              }
              return a;
            },
            [[]]
          );
        })
        .catch(() => {});
    },
    scrollToPosition(e) {
      console.log(e);
      this.current = e.index;
      setTimeout(() => {
        this.toView = "scroll" + e.index;
      }, 200);
    },
    //逛逛
    goshop() {
      uni.navigateTo({
        url: "/pageD/homepage/homepage",
      });
    },
    detail(id) {
      uni.$u.http
        .get("/api/goods/detail/" + id)
        .then((res) => {
          console.log(res);
          this.goodinfo = res;
          this.comment();
          this.rate = res.merchant.score;
        })
        .catch(() => {});
    },
    // scrollToPosition() {
    // 	console.log(111);
    // 	// 使用$refs获取目标位置的DOM元素
    // 	const targetElement = this.$refs.targetPosition;
    // 	// 调用scrollToView方法滚动到目标位置
    // 	this.$refs.scrollView.scrollToView('targetPosition');
    // },
    actabs(index, child, idx) {
      // this.actidx = index
      // this.actab = child
      console.log(this.selectArr);
      if (this.selectArr[index] != child) {
        this.$set(this.selectArr, index, child);
        this.$set(this.subIndex, index, idx);
      } else {
        this.$set(this.selectArr, index, "");
        this.$set(this.subIndex, index, -1); //去掉选中颜色
      }
      this.goodinfo.sku_item.forEach((ite) => {
        console.log(ite.item);
        console.log(this.selectArr.join(","));
        if (ite.item == this.selectArr.join(",")) {
          this.sku_info = ite;
        }
      });
      console.log(this.sku_info);
    },
    order() {
      if (this.sku_info.stock_total != 0) {
        uni.navigateTo({
          url:
            "/pageA/order?sku=" +
            encodeURIComponent(JSON.stringify(this.sku_info)) +
            "&value=" +
            this.value +
            "&goodinfo=" +
            encodeURIComponent(JSON.stringify(this.goodinfo)),
        });
      } else {
        this.$u.toast("库存为0");
        this.show = false;
      }
      // console.log(JSON.stringify(this.sku_info));
    },
    //生成图片弹窗
    builder() {
      this.imagea = true;
      this.share = false;
    },
    //加入购物车
    joincart() {
      this.show = false;
      if (this.sku_info.stock_total == 0) {
        this.$u.toast("添加失败,库存为0");
      } else {
        uni.$u.http
          .post("/api/cart/save", {
            goods_id: this.id, //63 是 String 商品id
            goods_num: this.value, //1 是 String 商品数量
            sku_item_id: this.sku_info.id, //38 是 String 规格详情id
            merchant_goods_id: this.goodinfo.merchant_goods_id, //38 是 String 团长商品id
            belong: this.goodinfo.source, //是 String 商品归属 0 团长 1 平台自营 2 团长发布或者分享的平台自营商品、 供应链商品
            share_merchant_id: "", //是 String 分享团长id
          })
          .then((res) => {
            this.$u.toast("添加成功");
          })
          .catch(() => {});
      }
    },
    valChange(e) {
      return e.value;
    },
    navigateBack() {
      uni.navigateBack();
    },
    join(index) {
      this.show = true;
      this.shopcar = index;
    },
    //通知
    inform() {
      uni.showToast({
        title: this.i18n.shelves,
        icon: "none",
        duration: 2000,
      });
    },
    //复制
    onLongPress(e) {
      // 获取长按的文本内容
      let text = e.target.innerText;
      console.log(e);
      // 执行复制操作
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: this.i18n.Copiedpaste,
            duration: 2000,
          });
        },
        fail: () => {
          uni.showToast({
            title: this.i18n.Replicationfailure,
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.redback {
  background: rgba(255, 27, 0, 0.07);
  border-radius: 12rpx;
  padding: 6rpx 12rpx;
  box-sizing: border-box;
  font-family: HarmonyOS_Sans_Medium;
  font-size: 16rpx;
  color: #ff1515;
  line-height: 22rpx;
  text-align: left;
  font-style: normal;
  width: 200rpx;
}

.sku {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 20rpx;
  color: #888888;
  line-height: 28rpx;
  text-align: left;
  font-style: normal;
}

.acttab {
  height: 68rpx;
  padding: 14rpx 30rpx;
  text-align: center;
  box-sizing: border-box;
  display: inline;
  background: rgba(248, 50, 36, 0.06);
  border-radius: 6rpx;
  border: 2rpx solid #f83224;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #f83224;
  line-height: 40rpx;
}

.read {
  font-family: HarmonyOS_Sans_Medium;
  font-size: 26rpx;
  color: #f83224;
  line-height: 36rpx;
  text-align: left;
  font-style: normal;
}

// ::v-deep .u-popup__content{
// 	background-color: rgba(0,0,0,0) !important;
// }
.money {
  font-family: HarmonyOS_Sans_Medium;
  font-size: 20rpx;
  color: #f83224;
  line-height: 26rpx;
  text-align: left;
  font-style: normal;
}

.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #222222;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  margin-top: 16rpx;
}

.view {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 20rpx;
  color: #777777;
  line-height: 28rpx;
  text-align: left;
  font-style: normal;
  margin-top: 12rpx;
}

.actabs {
  width: 116rpx;
  height: 68rpx;
  background: rgba(248, 50, 36, 0.06);
  border-radius: 6rpx;
  border: 2rpx solid #f83224;
}

.bottoma {
  width: 750rpx;
  height: 166rpx;
  background: #ffffff;
  padding: 16rpx 44rpx 0;
  position: fixed;
  bottom: 0;
  left: 0;

  .btn {
    width: 662rpx;
    height: 84rpx;
    background: #f83224;
    border-radius: 44rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 84rpx;
    text-align: center;
    font-style: normal;
  }
}

.title1 {
  font-family: PingFangSC, PingFang SC;
  font-weight: 550;
  font-size: 32rpx;
  color: #222222;
  line-height: 44rpx;
  text-align: left;
  font-style: normal;
}

.tabs {
  // width: 276rpx;
  height: 68rpx;
  padding: 14rpx 30rpx;
  text-align: center;
  background: #f4f4f4;
  border-radius: 6rpx;
  box-sizing: border-box;
  display: inline;
  font-size: 28rpx;
  border: 2rpx solid rgba(151, 151, 151, 0);
  line-height: 40rpx;
  // line-height: 68rpx;
}

.link {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #555555;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  margin-top: 16rpx;
}

.tongzhi {
  width: 422rpx;
  height: 76rpx;
  background: #ffb515;
  border-radius: 40rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 76rpx;
  text-align: center;
  font-style: normal;
}

.info {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 20rpx;
  color: #222222;
  line-height: 28rpx;
  text-align: left;
  font-style: normal;
  margin-top: 18rpx;
}

.button {
  // width: 662rpx;
  height: 88rpx;
  background: #f83224;
  border-radius: 44rpx;
  margin-top: 24rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 88rpx;
  text-align: center;
  font-style: normal;
}

.contenta {
  width: 702rpx;
  // height: 590rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin-top: 26rpx;
  padding: 28rpx 24rpx;
  box-sizing: border-box;

  .title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #222222;
    line-height: 42rpx;
    text-align: left;
    font-style: normal;
  }

  .content {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: rgba(34, 34, 34, 0.5);
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
    margin-top: 20rpx;
  }
}

.back {
  background-color: #f4f4f4;
  padding: 20rpx;
  box-sizing: border-box;

  .guige {
  }

  .fix {
    width: 750rpx;
    height: 158rpx;
    background: #ffffff;
    padding: 14rpx 28rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;

    .ke {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #333333;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
    }

    .join {
      width: 208rpx;
      height: 76rpx;
      border-radius: 40rpx;
      border: 1rpx solid #ff1515;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #f83224;
      line-height: 76rpx;
      text-align: left;
      font-style: normal;
      text-align: center;
    }

    .pin {
      width: 208rpx;
      height: 76rpx;
      background: #f83224;
      border-radius: 40rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 76rpx;
      text-align: center;
      font-style: normal;
    }
  }

  // 规格
  .specification {
    width: 670rpx;
    // height: 280rpx;
    background: #f4f4f4;
    padding: 24rpx 22rpx;
    box-sizing: border-box;

    view:last-of-type {
      margin-bottom: 0rpx !important;
    }

    .item {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
    }
  }

  // 推荐
  .recommend {
    width: 710rpx;
    // height: 476rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx 20rpx;
    margin-top: 20rpx;
    box-sizing: border-box;

    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 550;
      font-size: 28rpx;
      color: #222222;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
    }
  }

  //店铺
  .store {
    width: 710rpx;
    height: 160rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .line {
      background: rgba(151, 151, 151, 1);
      width: 4rpx;
      height: 20rpx;
      margin: 0 18rpx;
    }

    .num {
      font-family: SFPro, SFPro;
      font-weight: 400;
      font-size: 20rpx;
      color: #777777;
      line-height: 24rpx;
      text-align: left;
      font-style: normal;
    }

    .goshop {
      // width: 108rpx;
      height: 52rpx;
      border-radius: 26rpx;
      border: 1rpx solid #ff1515;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #f83224;
      line-height: 52rpx;
      text-align: center;
      font-style: normal;
      padding: 0 20rpx;
      box-sizing: border-box;
    }
  }

  // 评论
  .comment {
    width: 710rpx;
    // height: 356rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin-top: 20rpx;
    padding: 24rpx 20rpx;
    box-sizing: border-box;

    .content {
      margin-top: 20rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #444444;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      max-height: 112rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: wrap;
      -webkit-line-clamp: 3;
    }

    .name {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 34rpx;
      text-align: left;
      font-style: normal;
      margin-left: 16rpx;
    }

    .ping {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
    }

    .strip {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #444444;
      line-height: 34rpx;
      text-align: left;
      font-style: normal;
    }
  }

  //服务
  .serve {
    width: 710rpx;
    height: 180rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx 20rpx;
    box-sizing: border-box;

    .top {
      .change {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }

  //折扣
  .discount {
    position: relative;
    height: 312rpx;

    .top {
      width: 710rpx;
      height: 124rpx;
      background: linear-gradient(295deg, #fb6662 0%, #fd403b 100%);
      border-radius: 16rpx 16rpx 0 0;
      padding: 20rpx;
      box-sizing: border-box;
      line-height: 98rpx;

      .count {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #ffffff;
        text-align: left;
        font-style: normal;
      }

      .money {
        font-size: 20rpx;
        font-family: HarmonyOS_Sans_Medium;
        font-size: 20rpx;
        color: #ffffff;
        text-align: left;
        font-style: normal;
        margin-left: 8rpx;
      }

      .right {
        font-family: HarmonyOS_Sans;
        font-size: 24rpx;
        color: #ffffff;
        text-align: left;
        font-style: normal;
        text-decoration-line: line-through;
        margin-left: 16rpx;
      }
    }

    .bottom {
      width: 710rpx;
      height: 208rpx;
      background: #ffffff;
      border-radius: 16rpx;
      position: absolute;
      top: 104rpx;
      z-index: 2;
      padding: 28rpx 20rpx;
      box-sizing: border-box;

      .title {
        margin-top: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 550;
        font-size: 32rpx;
        color: #222222;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }
    }

    .tabs {
      // width: 104rpx;
      height: 40rpx;
      background: rgba(255, 21, 21, 0.1);
      border-radius: 4rpx;
      padding: 4rpx 8rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 22rpx;
      color: #ff1515;
      line-height: 40rpx;
      text-align: center;
      font-style: normal;
    }
  }
}

// 轮播图
.uni-margin-wrap {
  width: 750rpx;
  width: 100%;

  .swiper {
    height: 750rpx;
  }

  .swiper-item {
    display: block;
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
  }

  .swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
  }

  .uni-common-mt {
    margin-top: 60rpx;
    position: relative;
  }

  .info {
    position: absolute;
    right: 20rpx;
  }

  .uni-padding-wrap {
    width: 550rpx;
    padding: 0 100rpx;
  }
}

::v-deep .u-popup__content data-v-17becaea {
  align-items: center !important;
}
</style>