fangliaoxiaochengxv/subPages/goodsDetail/goodsDetail.vue

<template>
  <view class="goods-detail-wrapper">
    <!--    <view @click="toHome" class="to-home-img">-->
    <!--      <u-icon size="24rpx" name="arrow-left" bold="true" color="#666666"></u-icon>-->
    <!--    </view>-->
    <u-swiper :list="detailData.slider" keyName="url"
              :indicatorStyle="{right: '20rpx', bottom: '20rpx', width: '100px',marginLeft: 'auto'}" indicator
              indicatorMode="number" height="100vw" imgMode="aspectFit">
    </u-swiper>
    <view class="content-box">
      <!-- 详情 -->
      <view class="common-card">
        <view class="display-flex-between ">
          <text class="fw700 title">
            {{ detailData.goods_name }}
          </text>
          <view class="display-flex-center">
            <view @click="collectHandler" style="display: flex;flex-direction: column;  align-items: center;">
              <u-icon name="heart" size="50rpx"
                      :color="goodsCollected ? '#F39800' : '#717171’'"></u-icon>
              <text class="fenxiang">
                收藏
              </text>
            </view>
            <view @click="showPoster = true"
                  style="margin-left: 30rpx;flex:1;display: flex;flex-direction: column;  align-items: center;">
              <image style="width: 36rpx;height: 36rpx;margin: 8rpx 0" src="/static/fenxiang.png" mode="aspectFill">
              </image>
              <text class="fenxiang">
                分享
              </text>
            </view>
          </view>
        </view>
        <view class="fs12 sub-title">{{ detailData.remark }}</view>
        <view class="display-flex-between">
          <view>
            <text class="fs12 fw400 color-556">
              ￥
            </text>
            <text
                class="fs20 color-556 fw700">
              {{ goodsType == 'msGoods' ? detailData.price_seckill : detailData.price_selling }}
            </text>
          </view>
        </view>
        <view class="display-flex-between">
          <view>
            <text class="text-through fs12 color-666">￥{{ detailData.price_market }}</text>
          </view>
          <view class="fs12 color-666">销量:{{ detailData.stock_sales + detailData.stock_virtual }}件</view>
        </view>
        <!--				<view class="display-flex-center">-->
        <!--					<view class="tag-red mb5 mr5" v-if="detailData.limit_money">满额赠品(满{{detailData.limit_money}}元赠)-->
        <!--					</view>-->
        <!--					<view v-for="(item, index) in freeData" :key="index" class="tag-red mb5 mr5">{{item.sNum}}件包邮</view>-->
        <!--				</view>-->

      </view>
      <!-- 运费 -->
      <view v-if="detailData.truck_type == 1" class="common-card  ">
        <view class="display-flex-between display-flex-center">
          <view>
            <text class="mr10 color-777 fs14">运费</text>
            <text class="color-333 fs14">￥{{ truckData.firstAmt || 0 }}</text>
          </view>
          <view class="color-777 fs14">已售 {{ detailData.stock_sales + detailData.stock_virtual }} | 剩余 {{ detailData.stock_total }}</view>
        </view>
        <u-divider></u-divider>
        <view @click="suitHandler" class=" display-flex-between display-flex-center">
          <view>
            <text class="mr10 color-777 fs14 ">已选</text>
            <text class="color-333 fs14">{{ selectSuitDisplay }}</text>
          </view>
          <u1-icon name="arrow-right" color="#3A3A3A"></u1-icon>
        </view>
        <!--				 <view class="color-7a fs13">已售1 | 剩余150</view> -->
        <!-- <u1-icon name="arrow-right" color="#3A3A3A"></u1-icon> -->
      </view>

      <!-- 参数 -->
      <view class="common-card" style="padding: 0;">
        <u-sticky zIndex="90">
          <view style="background-color: #fff;">
            <u-tabs lineColor="#C29556 " line-width="36" lineHeight="3" :inactiveStyle="{
                      fontWeight: '400',
              fontSize: '24rpx',
              color: '#333333',
              lineHeight: '40rpx'
						}" :activeStyle="{
              fontWeight: '400',
              fontSize: '28rpx',
              color: '#333333',
              lineHeight: '40rpx'
}" :list="detailList" @click="detailClick"></u-tabs>
          </view>
        </u-sticky>
        <view style="padding: 40rpx 40rpx;">
          <view class="mb5 display-flex-center fw600" id="detail_0">
            <image src="/static/good_detail1.png" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
                   mode=""></image>
            <text>商品详情</text>
          </view>
          <u-parse :content="detailData.content"></u-parse>
          <view id="detail_1" class="mb5 mt10 display-flex-center fw600">
            <image src="/static/good_detail2.png" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
                   mode=""></image>
            <text>商品规格</text>
          </view>
          <u-parse :content="detailData.info"></u-parse>
          <view class="mb5 mt10  display-flex-center fw600" id="detail_2">
            <image src="/static/good_detail3.png" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
                   mode=""></image>
            <text>售后保障</text>
          </view>
          <u-parse :content="sell_serv"></u-parse>
        </view>
      </view>
    </view>
    <view class="bottom-navigation">
      <view class="bottom-navigation-div">
        <view  style="width: 40rpx;margin-right: 30rpx"   @click="toJump( 1)" >
          <van-image
              height="36rpx"
              src="/static/hd-icon-a.png"
              width="36rpx"
              style="display: flex;align-items: center;  justify-content: center;"
          />
          <span>
        首页
      </span>
        </view>
        <view  style="width: 40rpx;position:relative;margin-right: 30rpx"  open-type="contact">
          <van-image
              height="36rpx"
              src="/static/hd-icon-c.png"
              width="36rpx"
              style="display: flex;align-items: center;  justify-content: center;"
          />
          <span>
          客服
      </span>
          <button style="position: absolute;width: 100%;height: 100%;z-index: 999;opacity: 0;top:0;"
                  open-type="contact" ></button>
        </view>
        <view style="width: 60rpx;margin-right: 30rpx;position:relative;" @click="toJump( 3)" >
          <van-image
              height="36rpx"
              src="/static/bottom-menu-cert.png"
              width="36rpx"
              style="display: flex;align-items: center;  justify-content: center;"
          />
          <u-badge  :absolute="true" bgColor="#CA9359" :offset="[-5,-5]" :value="cartNumber">
          </u-badge>
          <span>
         购物车
      </span>
        </view>

      </view>
      <button  class="add-cart-button" @click="toAddCert">加入购物车</button>
      <button  class="submit-order-button" @click="toApply">提交订单</button>
    </view>
    <u-toast ref="createPosterLoading"></u-toast>
    <u-overlay :show="showPoster" :mask-click-able="false">
      <view class="poster-wrap">
        <image :src="posterImgSrc" mode="widthFix"></image>
      </view>
      <view class="poster-box">
        <view class="poster-btn">
          <view class="poster-btn-left">
            <image style="height: 26px;width 26px;" src="@/static/icon-wechat.png" mode="heightFix"/>
            <view>分享好友</view>
            <u-button open-type="share"
                      customStyle="position: absolute;top:0;bottom:0;left:0;right:0;opacity: 0;">
            </u-button>
          </view>
          <view class="poster-btn-right" @click="downloadPoster">
            <u-icon name="download" color="#815BFF" size="36"></u-icon>
            <view>保存海报</view>
          </view>
        </view>
        <view class="cancel-btn" @click="showPoster = false">取消</view>
      </view>
    </u-overlay>
    <!-- 海报生成器 -->
    <l-painter ref="painter" isCanvasToTempFilePath @success="posterImgSrc = $event"
               css="width: 750rpx; background: #fff;padding: 20rpx" v-if="detailData.goods_name" hidden>
      <l-painter-image :src="`${imageUrl}home_logo.png`" css="display: block; width: 100%; height: 146rpx;"/>
      <l-painter-view css="display: block; padding: 43rpx 0 22rpx 0;">
        <l-painter-text :text="detailData.goods_name"
                        css=" color: #1D161F; font-size: 36rpx; fontWeight: 500; line-height: 42rpx;"/>
      </l-painter-view>
      <l-painter-view css="position: relative; height: 580rpx;">
        <l-painter-image :src="detailData.cover" css="object-fit: contain; width: 100%; height: 100%;"/>
      </l-painter-view>

      <l-painter-view
          css="display: flex; align-items: center; justify-content: space-between; padding-top: 38rpx;">
        <l-painter-view css="flex: 1;">
          <l-painter-view>
            <l-painter-text css="font-size: 32rpx; font-weight: 500; color: #858585; line-height: 38rpx;"
                            text="售价："></l-painter-text>
            <l-painter-text css="font-size: 32rpx; font-weight: 500; color: #7B52C8; line-height: 38rpx;"
                            :text="`￥${detailData.price_selling}`"></l-painter-text>
          </l-painter-view>
          <l-painter-view css="margin-top: 11rpx;">
            <l-painter-text
                css="display: block; font-size: 28rpx; font-weight: 500; color: #858585; line-height: 33rpx;"
                text="长按小程序码参与"></l-painter-text>
          </l-painter-view>
        </l-painter-view>
        <l-painter-image :src="erCodeImg" css="width: 200rpx; height: 200rpx;"/>
      </l-painter-view>
    </l-painter>
    <!-- 选套装 -->
    <u-popup :show="show" mode="bottom" :safeAreaInsetTop="true" round="10" closeable @close="close" @open="open">
      <view class="suit-content">
        <view class="display-flex-center mr20 mb30 ">
          <u--image :src="detailData.cover" width="176rpx" height="176rpx" ></u--image>
          <view class="ml15">
            <view v-if="pageOptions.type == 'msGoods'">
              <text class="fs12 color-556 fw400">￥</text>
              <text class="fs20 color-556 fw700 mr20">{{ (goodSuitPriceData.price || 0) * suitNum }}</text>
            </view>
            <view v-else>
              <text class="fs12 color-556 fw400">￥</text>
              <text class="fs20 color-556 fw700 mr20">{{ (goodSuitPriceData.price || 0) * suitNum }}</text>
            </view>
            <view class="color-777 mt5">
              <text>已选择  {{ selectSuitDisplay }}</text>
            </view>
          </view>
        </view>
        <!-- 普通商品规格 -->
        <template v-if="pageOptions.type == 'common'">
          <view  v-for="(item, pIndex) in goodsSpecData" :key="pIndex">
            <view class="fw700 mb10">{{ item.name }}</view>
            <view class="suit-btn-box">
              <view class="suit-btn" @click="suitChange(suit, item)" :key="index"
                    :class="[suit.isChecked ? 'suit-btn-active' : '']" v-for="(suit, index) in item.list">
                {{ suit.name }}
              </view>
            </view>
          </view>
        </template>
        <!-- 秒杀商品规格 -->
        <template v-else>
          <view class="suit-btn-box">
            <view class="suit-btn suit-btn-column" @click="suitChange(suit, item)" :key="index"
                  :class="[suit.isChecked ? 'suit-btn-active' : '', suit.disabled ? 'suit-btn-disabled' : '']"
                  v-for="(suit, index) in goodsSpecData">
              {{ suit.spec }}
            </view>
          </view>
        </template>
        <view class="common-btn" @click="submit">提交</view>
      </view>
    </u-popup>

    <login-pop v-model="showUserRegister" @updateUserInfo="reUserInfo"></login-pop>
  </view>
</template>

<script>
import LoginPop from '@/components/LoginPop.vue'
import {
  makeErCode
} from "@/common/api/task.js";
import {
  getGoodsDetail,
  getGiftGoodsDetail,
  getMsGoodsDetail,
  getPointsGoodsDetail,
  msGoodsCreateOrder,
  giftAddCart,
  addCollect,
  delCollect,
  checkCollect
} from '@/common/api/good.js'

export default {
  components: {
    LoginPop
  },
  data() {
    return {
      erCodeImg: '',
      pageOptions: {},
      totalDetailData: {},
      selectSuitData: {},
      currentSuitIndex: 0,
      suitNum: 1,
      show: false,
      freeData: [],
      imageUrl: this.$C.imageUrl,
      detailList: [{
        name: '商品详情'
      }, {
        name: '商品规格'
      }, {
        name: '售后保障'
      }],

      currentNum: 0,
      detailData: {},
      goodsSpecData: [],
      truckData: {},
      showPoster: false,
      posterImgSrc: "",
      selectedSuitPriceData: [],
      goodSuitPriceData: {
        price: 0
      },
      goodsType: 'common',
      currentOperateType: '', // 1:购物车,2:立即购买
      cartNumber: 0,
      sell_serv: '',
      isUserRegister: false,
      showUserRegister: false,
      goodsCollected: false,
      btn_color: null,
    }
  },
  computed: {
    beUsedCode() {
      return this.detailData.code
    },
    selectSuitDisplay() {
      console.log(2333, this.selectedSuitPriceData)
      if (this.goodsType == 'common') {
        let tempData = this.selectedSuitPriceData.map(item => {
          return `${item.group_name}:${item.spec_name}`
        })
        return tempData.join(',')
      } else if (this.goodsType == 'gift') {
        return this.detailData.goods_spec
      } else {
        return this.goodSuitPriceData.goods_spec
      }
    },
    currentTypeApi() {
      let result = {
        detailApi: getGoodsDetail,
        params: {
          goods_code: this.pageOptions.code
        }
      }
      switch (this.pageOptions.type) {
        case 'gift':
          result.detailApi = getGiftGoodsDetail
          break;
        case 'points':
          result.detailApi = getPointsGoodsDetail
          break;
        case 'msGoods':
          result = {
            detailApi: getMsGoodsDetail,
            params: {
              id: this.pageOptions.code
            }
          }
          break;
        default:
          break;

      }
      return result
    }
  },
  onLoad(options) {
    console.log("optionssuboacge==", options)
    this.pageOptions = options
    this.goodsType = options.type
    this.getAfterSalePage()
    this.maekErImg(options.code)
    const configs = uni.getStorageSync('configs')
    if (configs) {
      this.btn_color = configs.btn_color
    }
    this.$nextTick(() => {
      this.getDetail()
      this.getCartNumber()
    })
  },
  onShow() {
    this.reUserInfo()
  },
  onShareAppMessage(res) {
    if (res.from === 'button') { // 来自页面内分享按钮
      console.log(res.target)
    }
    let userInfo = uni.getStorageSync('userInfo')
    userInfo = userInfo && JSON.parse(userInfo) || {}
    if (userInfo.id) {
      this.pageOptions.id = userInfo.id
    }
    return {
      title: this.detailData.goods_name,
      path: `/subPages/goodsDetail/goodsDetail${this.$stringPageOptions(this.pageOptions)}`
    }
  },
  onShareTimeline() {
    let userInfo = uni.getStorageSync('userInfo')
    userInfo = userInfo && JSON.parse(userInfo) || {}
    const posterImage = this.detailData.video && this.detailData.slider.length > 1 ? this.detailData.slider[1]
        .url : this.detailData.slider[0].url
    if (userInfo.id) {
      this.pageOptions.id = userInfo.id
    }
    return {
      title: this.detailData.goods_name,
      path: `/subPages/goodsDetail/goodsDetail${this.$stringPageOptions(this.pageOptions)}`,
      imageUrl: posterImage
    }
  },
  watch: {
    goodsSpecData: {
      handler(nv) {
        console.log(9999, nv)
        let priceSuit = []
        if (this.goodsType == 'common') {
          nv.forEach(pItem => {
            let tempList = pItem.list.filter(item => item.isChecked)
            tempList = tempList.map(item => {
              return {
                group_name: item.group,
                spec_name: item.name
              }
            })
            priceSuit = priceSuit.concat(tempList)
          })
          this.selectedSuitPriceData = priceSuit
          this.getSuitPrice()
        } else if (this.goodsType == 'msGoods') {
          const checkedData = nv.find(item => item.isChecked)
          this.goodSuitPriceData = {
            price: checkedData.price_seckill,
            goods_spec: checkedData.goods_spec,
            sku_id: checkedData.id,
          }
        }
      },
      deep: true
    }
  },
  methods: {
    checkCollect() {
      checkCollect({
        code: this.detailData.code
      }).then(res => {
        this.goodsCollected = !!(res.data && res.data.id)
        console.log(this.goodsCollected)
      })
    },
    collectHandler() {
      if (!this.isUserRegister) {
        this.showUserRegister = true
        return
      }
      if (this.goodsCollected) {
        // 取消收藏
        delCollect({
          code: this.detailData.code
        }).then(res => {
          this.goodsCollected = false
          uni.showToast({
            title: '取消收藏'
          })
        })
      } else {
        // 收藏
        addCollect({
          code: this.detailData.code
        }).then(res => {
          this.goodsCollected = true
          uni.showToast({
            title: '收藏成功'
          })
        })
      }
    },
    detailClick(item) {
      console.log(item.index)
      uni.pageScrollTo({
        selector: `#detail_${item.index}`
      })
    },
    reUserInfo() {
      const userInfo = uni.getStorageSync("userInfo");
      if (
          userInfo &&
          JSON.parse(userInfo).vip_code == 1 &&
          JSON.parse(userInfo).nickname != "" &&
          JSON.parse(userInfo).headimg != ""
      ) {
        this.isUserRegister = true;
      } else {
        this.isUserRegister = false;
      }
    },
    getAfterSalePage() {
      this.$api.getData({
        id: 4
      }).then(res => {
        this.sell_serv = res.data.content
      })
    },
    suitHandler() {
      this.currentOperateType = ''
      if (this.goodsType != 'gift') {
        this.show = true
      }
    },
    getCartNumber() {
      this.$api.getCartNumber().then(res => {
        this.cartNumber = res.data.cart_num
      })
    },
    getSuitPrice() {
      this.$api.getPriceBySuit({
        goods_code: this.pageOptions.code,
        spec: this.selectedSuitPriceData
      }).then(res => {
        this.goodSuitPriceData = res.data
      })
    },
    toAddCert() {
      // 加入购物车
      if (!this.isUserRegister) {
        this.showUserRegister = true
        return
      }
      if (this.goodsType == 'gift') {
        giftAddCart({
          code: this.detailData.code
        }).then(res => {
          uni.showToast({
            title: '已加入购物车'
          })
          this.getCartNumber()
        })
      } else {
        this.currentOperateType = 1
        this.show = true
      }
    },
    maekErImg(code) {
      let that = this;
      const data = {
        path: '/subPages/goodsDetail/goodsDetail?code=' + code,
        type: 'file'
        // ['api-name']: 'wxapp',
        // ['api-token']: uni.getStorageSync(`token`)
      }
      this.$api.getQRCode(data).then(res => {
        console.log("base64==", res.data.base64)
        this.erCodeImg = res.data.url
      })
    },
    downloadPoster() {
      // console.log(222, this.posterImgSrc)
      // uni.saveImageToPhotosAlbum({
      // 	filePath: this.posterImgSrc,
      // 	complete:() => {
      // 		this.showPoster = false
      // 	}
      // })
      let _this = this
      this.$refs.painter.canvasToTempFilePathSync({
        fileType: "jpg",
        // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
        pathType: 'url',
        quality: 1,
        success: (res) => {
          console.log(res.tempFilePath);
          // 非H5 保存到相册
          // H5 提示用户长按图另存
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function () {
              uni.showToast({
                title: '保存成功'
              })
              _this.showPoster = false
            }
          });
        },
      })
    },
    handlePoster(showPoster) {
      if (showPoster) {
        this.$refs.createPosterLoading.show({
          type: 'loading',
          message: "海报生成中...",
          duration: 1000,
          complete: () => {
            this.showPoster = showPoster;
          }
        })
        return
      }
      this.showPoster = showPoster;
      // uni.showLoading({
      // 	title: '海报生成中...',

      // })
      // setTimeout(function () {
      // 	uni.hideLoading();
      // 	this.showPoster = true;
      // }, 1000);

    },
    suitChange(item, pItem) {
      if (item.disabled) return
      if (this.goodsType == 'common') {
        pItem.list.forEach(spec => [
          spec.isChecked = false
        ])
      } else {
        this.goodsSpecData.forEach(spec => {
          spec.isChecked = false
        })
      }
      item.isChecked = true
      // this.selectSuitData = item
      // this.currentSuitIndex = index
    },
    close() {
      this.show = false
    },
    open() {
    },
    getDetail() {
      this.currentTypeApi.detailApi(this.currentTypeApi.params).then(res => {
        const {
          goods = {}, items = [], truck = {}
        } = res.data
        this.totalDetailData = res.data
        // this.sell_serv = res.data.sell_serv
        this.detailData = goods
        console.log(res.data.free)
        this.freeData = res.data.free || []
        this.truckData = truck.content && truck.content.length ? truck.content[0].rule : {}
        this.selectSuitData = items || []
        let data_specs = []
        if (this.goodsType == 'common') {
          data_specs = this.detailData.data_specs
          if (Array.isArray(data_specs)) {
            data_specs.forEach(pItem => {
              pItem.list = pItem.list.map((item, index) => {
                if (index === 0) {
                  this.$set(item, 'isChecked', true)
                } else {
                  this.$set(item, 'isChecked', false)
                }
                return item
              })
            })
          }
        } else if (this.goodsType == 'msGoods') {
          data_specs = res.data.items
          this.detailData.price_seckill = res.data.price_seckill
          if (Array.isArray(data_specs)) {
            data_specs.forEach((pItem, index) => {
              const {
                status,
                stock_sale,
                stock
              } = pItem

              if (index === 0) {
                this.$set(pItem, 'isChecked', true)
              } else {
                this.$set(pItem, 'isChecked', false)
              }
              this.$set(pItem, 'disabled', !(status == 1 && stock_sale < stock))
            })
          }
        }
        this.goodsSpecData = data_specs
        console.log(99999, this.detailData)
        this.detailData.slider = this.detailData.slider.map(item => {
          return {
            url: item
          }
        })
        if (this.detailData.video) {
          this.detailData.slider.unshift({
            url: this.detailData.video
          })
        }
        this.checkCollect()
      }).catch(() => {
        uni.hideLoading()
      })
    },
    submit() {
      // console.log(2345, ths.selectSuitData)
      if (!this.isUserRegister) {
        this.showUserRegister = true
        return
      }
      if (this.currentOperateType === 1) {
        // 添加购物车
        this.$api.addToShoppingCart({
          sku_id: this.goodSuitPriceData.sku_id,
          num: this.suitNum
        }).then(res => {
          this.show = false
          uni.showToast({
            title: '已加入购物车'
          })
          this.getCartNumber()
        })
      } else if (this.currentOperateType === 2) {
        // this.show = false
        if (this.goodsType == 'common') {
          let specText = this.selectedSuitPriceData.map(item => {
            return `${item.group_name}::${item.spec_name}`
          })
          const sendData = {
            items: [{
              code: this.pageOptions.code,
              count: this.suitNum,
              spec: specText.join(';;')
            }]
          }
          this.$api.createOrder(sendData).then(res => {
            uni.showToast({
              title: '订单创建成功'
            })
            uni.navigateTo({
              url: `/subPages/settleCenter/settleCenter?orderNo=${res.data.order_no}`
            })
          })
        } else {
          // 秒杀下单
          const sendData = {
            sk_goods_id: this.pageOptions.code,
            goods_spec: this.goodSuitPriceData.goods_spec,
            num: this.suitNum
          }
          msGoodsCreateOrder(sendData).then(res => {
            uni.showToast({
              title: '订单创建成功'
            })
            uni.navigateTo({
              url: `/subPages/settleCenter/settleCenter?orderNo=${res.data.order_no}&type=msGoods`
            })
          })
        }
      } else {
        this.show = false
      }
    },
    toHome() {
      uni.navigateBack({
        delta: 1
      })
    },
    toApply() {
      // 立即购买去选择规格
      if (!this.isUserRegister) {
        this.showUserRegister = true
        return
      }
      this.currentOperateType = 2
      this.show = true
    },

    toJump( index) {
      if(index==1){
        uni.switchTab({
          url:'/pages/home/index'
        });
      }else if(index==3){
        if (!this.isUserRegister) {
          this.showUserRegister = true
          return
        }
        uni.switchTab({
          url:'/pages/shoppingCart/shoppingCart'
        });
      }
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  img {
    width: 100%;
  }
}

.poster-wrap {
  text-align: center;
  margin-top: 40rpx;
}

.poster-box {
  background-color: #F5F6F8;
  width: calc(100% - 120rpx);
  padding: 20rpx 60rpx 60rpx;
  position: absolute;
  bottom: 0;
}

.poster-btn {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  font-size: 28rpx;
  text-align: center;

  &-left {
    position: relative
  }

  &-right {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.cancel-btn {
  height: 72rpx;
  border-radius: 80rpx;
  text-align: center;
  line-height: 72rpx;
  background-color: #fff;
  margin-top: 16rpx;
}

.goods-detail-wrapper {
  //margin-top: 60rpx;
  background-color: $primary-bg-color;
  padding-bottom: 146rpx;

  ::v-deep {
    .u-swiper-indicator {
      padding: 0 !important
    }
  }

  .to-home-img {
    position: absolute;
    left: 30rpx;
    top: 100rpx;
    border-radius: 52rpx;
    width: 52rpx;
    height: 52rpx;
    background-color: #F0F0F2;
    z-index: 1;
    // 上下左右居中
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700 !important;


  }

  .content-box {
    padding: 20rpx 20rpx 0;

    .title {
      line-height: 36rpx;
      font-size: 30rpx;
    }

    .sub-title {
      color: #717171;
      margin: 30rpx 0 24rpx;
    }

    .detail-title {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 600;
      margin-bottom: 18rpx;

      .title-icon {
        width: 3rpx;
        height: 24rpx;
        background: linear-gradient(180deg, #9276FE 0%, rgba(217, 217, 217, 0) 100%);
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        margin-right: 8rpx;
      }
    }
  }

  .bottom-part {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: calc(100% - 60rpx);
    padding: 14rpx 30rpx 30rpx;
    display: flex;
    justify-content: space-between;
    z-index: 100;

    .bar-list {
      display: flex;
      width: calc(100% - 340rpx);
      // justify-content: space-between;
      font-size: 22rpx;
      text-align: center;
      color: #525051;
    }

    .bar-list-icon {
      position: relative;
      margin-right: 15rpx;
    }
  }
}

.common-btn {
  //width: 160rpx;
  //flex-shrink: 0;
  background: linear-gradient( 315deg, #CA9359 0%, #E2B98E 100%)!important;
  border-radius: 292rpx 292rpx 292rpx 292rpx!important;
  border:0;
}

.suit-content {
  padding: 0 40rpx 60rpx;
  max-height: 80vh;
  box-sizing: border-box;
  overflow-y: auto;
  .suit-btn-box {
    display: flex;

    // justify-content: space-between;
    .suit-btn {
      background-color: #F6F6F6;
      border-radius: 8rpx;
      border: 1rpx solid transparent;
      height: 76rpx;
      line-height: 76rpx;
      text-align: center;
      width: calc(33% - 20rpx);
      color: #232323;
      margin-right: 20rpx;
      box-sizing: border-box;
      margin-bottom: 40rpx;
      &-active {
        color: #C29556;
        background-color: #F9F2E6 ;
      }
      &-disabled {
        background-color: #fffafa;
        border-color: #d0d0d0;
        color: #ababab;
      }

      &-column {
        width: 100%;
        text-align: left;
        padding: 0 10rpx;
        flex-shrink: 0;
      }

    }
  }
}
.bottom-navigation{
  position: fixed;
  // 文字垂直居中
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  height: 100rpx;
  width: calc(100% - 40rpx);
  background: #FFFFFF;
  box-shadow: 0rpx -2rpx 0rpx 0rpx #F1F3F6;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  border: 0rpx solid #979797;
  padding: 20rpx 20rpx 68rpx 20rpx ;
  z-index: 100;
  &-div{
    height: 76rpx;
    width: 270rpx;
    // 文字垂直居中
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    padding-top: 10rpx;

    span{
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #333333;
      line-height: 32rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

  }
  .add-cart-button {
    width: 216rpx;
    height: 76rpx;
    background:  linear-gradient( 315deg, #323130 0%, #575757 100%);;
    border-radius: 292rpx 292rpx 292rpx 292rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    // 文字垂直居中
    display: flex;
    margin-right: 20rpx;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .submit-order-button {
    width: 216rpx;
    height: 76rpx;
    background: linear-gradient(315deg, #CA9359 0%, #E2B98E 100%);
    border-radius: 292rpx 292rpx 292rpx 292rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    // 文字垂直居中
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}



.fenxiang {
  font-weight: 400;
  font-size: 18rpx;
  color: #333333;
  line-height: 24rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>