|
|
@@ -1,922 +1,1058 @@
|
|
|
<template>
|
|
|
- <view class="goods-detail-wrapper">
|
|
|
- <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="fw700 title">{{detailData.goods_name}}</view>
|
|
|
- <view class="fs12 sub-title">{{detailData.remark}}</view>
|
|
|
- <view class="display-flex-between mb10">
|
|
|
- <view>
|
|
|
- <text
|
|
|
- class="fs16 color-red fw600 mr10">￥{{goodsType == 'msGoods' ? detailData.price_seckill : detailData.price_selling}}</text>
|
|
|
- <text class="text-through fs12 color-ca">￥{{detailData.price_market}}</text>
|
|
|
- </view>
|
|
|
- <view class="display-flex-center">
|
|
|
- <view class="display-flex-center" @click="showPoster = true" style="margin-right: 20rpx;flex:1">
|
|
|
- <image style="width: 40rpx;height: 40rpx;" src="/static/icon_share.png" mode="aspectFill">
|
|
|
- </image>
|
|
|
- </view>
|
|
|
- <u-icon @click="collectHandler" name="star" size="26"
|
|
|
- :color="goodsCollected ? '#F39800' : '#717171’'"></u-icon>
|
|
|
- </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 class="color-71">销量：{{detailData.stock_sales+detailData.stock_virtual}}件</view>
|
|
|
-
|
|
|
- <!-- <view class="display-flex-between color-71">
|
|
|
- <view class="display-flex-center" @click="showPoster = true">
|
|
|
- <image style="width: 30rpx;height: 30rpx;" src="/static/icon_share.png" mode="aspectFill">
|
|
|
- </image>
|
|
|
- <text class="ml5">分享</text>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <view class="display-flex-center" @click="collectHandler">
|
|
|
- <u-icon name="star" size="22" :color="goodsCollected ? '#F39800' : '#717171’'"></u-icon>
|
|
|
- <text class="ml5">收藏</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- <!-- 运费 -->
|
|
|
- <view v-if="detailData.truck_type == 1" class="common-card display-flex-between display-flex-center">
|
|
|
- <view>
|
|
|
- <text class="mr10">运费</text>
|
|
|
- <text>￥{{truckData.firstAmt || 0}}</text>
|
|
|
- </view>
|
|
|
- <!-- <view class="color-7a fs13">已售1 | 剩余150</view> -->
|
|
|
- <!-- <u1-icon name="arrow-right" color="#3A3A3A"></u1-icon> -->
|
|
|
- </view>
|
|
|
- <!-- 套装 -->
|
|
|
- <view @click="suitHandler" class="common-card display-flex-between display-flex-center">
|
|
|
- <view>
|
|
|
- <text class="mr10">已选</text>
|
|
|
- <text>{{selectSuitDisplay}}</text>
|
|
|
- </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="#F39800" :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-part">
|
|
|
- <view class="bar-list">
|
|
|
- <template v-for="(item, index) in barList">
|
|
|
- <view v-if="item.text=='购物车' && goodsType != 'msGoods' || item.text != '购物车'" :key="index"
|
|
|
- class="bar-list-icon" @click="toJump(item, index)">
|
|
|
- <image style="width: 45rpx;height: 45rpx;" :src="item.iconUrl" mode="aspectFill"></image>
|
|
|
- <view>{{item.text}}</view>
|
|
|
- <u-badge v-if="item.text=='购物车'" :absolute="true" :offset="[-5,-10]" :value="cartNumber">
|
|
|
- </u-badge>
|
|
|
- <button style="position: absolute;width: 100%;height: 100%;z-index: 999;opacity: 0;top:0"
|
|
|
- v-if="item.text == '客服'" open-type="contact"></button>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view class="common-btn common-btn-border ml10" :style="{color:`${btn_color ? btn_color : null}`}"
|
|
|
- @click="toAddCert" v-if="['common', 'gift'].includes(goodsType)">加入购物车</view>
|
|
|
- <view class="common-btn ml10" v-if="goodsType !='gift'"
|
|
|
- :style="{background:`${btn_color ? btn_color : null}`,border:`none`,width: !(['common', 'gift'].includes(goodsType)) ? '360rpx' : null}"
|
|
|
- @click="toApply">立即购买</view>
|
|
|
- </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 mt15">
|
|
|
- <u--image :src="detailData.cover" width="130rpx" height="130rpx" mode="widthFix"></u--image>
|
|
|
- <view class="ml10">
|
|
|
- <view v-if="pageOptions.type == 'msGoods'">
|
|
|
- 售价 <text class="fs16 color-orange fw600 mr20">￥{{detailData.price_seckill}}</text>
|
|
|
- </view>
|
|
|
- <view v-else>
|
|
|
- 售价 <text class="fs16 color-orange fw600 mr20">￥{{detailData.price_selling}}</text>
|
|
|
- </view>
|
|
|
- <view class="color-7a mt5">已选 {{selectSuitDisplay}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 普通商品规格 -->
|
|
|
- <template v-if="pageOptions.type == 'common'">
|
|
|
- <view class="mb30" v-for="(item, pIndex) in goodsSpecData" :key="pIndex">
|
|
|
- <view class="fw700 mb15">{{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="mb30" v-if="pageOptions.type == 'msGoods'">
|
|
|
- <view class="fw700 mb20">数量</view>
|
|
|
- <view class="display-flex-center">
|
|
|
- <u-number-box :min="1" integer :max="totalDetailData.max_buy" v-model="suitNum"></u-number-box>
|
|
|
- <text class="color-red ml10">每人限购{{totalDetailData.max_buy}}件</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="mb30" v-else>
|
|
|
- <view class="fw700 mb20">数量</view>
|
|
|
- <u-number-box :min="1" integer v-model="suitNum"></u-number-box>
|
|
|
- </view>
|
|
|
- <view class="mb30">
|
|
|
- 小计: <text class="color-orange fw700 ml5 fs15">￥{{(goodSuitPriceData.price || 0) * suitNum}}</text>
|
|
|
- </view>
|
|
|
- <view class="common-btn" @click="submit">提交</view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
-
|
|
|
- <login-pop v-model="showUserRegister" @updateUserInfo="reUserInfo"></login-pop>
|
|
|
- </view>
|
|
|
+ <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 mt15">
|
|
|
+ <u--image :src="detailData.cover" width="130rpx" height="130rpx" mode="widthFix"></u--image>
|
|
|
+ <view class="ml10">
|
|
|
+ <view v-if="pageOptions.type == 'msGoods'">
|
|
|
+ 售价
|
|
|
+ <text class="fs16 color-orange fw600 mr20">￥{{ (goodSuitPriceData.price || 0) * suitNum }}</text>
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ 售价
|
|
|
+ <text class="fs16 color-orange fw600 mr20">￥{{ (goodSuitPriceData.price || 0) * suitNum }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="color-7a mt5">已选 {{ selectSuitDisplay }}</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: '售后保障'
|
|
|
- }],
|
|
|
- barList: [{
|
|
|
- text: '首页',
|
|
|
- iconUrl: `/static/bottom-home.png`,
|
|
|
- url: '/pages/home/index'
|
|
|
- },
|
|
|
- {
|
|
|
- text: '客服',
|
|
|
- iconUrl: `/static/bottom-menu-kf.png`
|
|
|
- },
|
|
|
- {
|
|
|
- text: '购物车',
|
|
|
- iconUrl: `/static/bottom-menu-cert.png`,
|
|
|
- url: '/pages/shoppingCart/shoppingCart',
|
|
|
- isVip: true
|
|
|
- },
|
|
|
- ],
|
|
|
- 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
|
|
|
- }
|
|
|
- },
|
|
|
- toApply() {
|
|
|
- // 立即购买去选择规格
|
|
|
- if (!this.isUserRegister) {
|
|
|
- this.showUserRegister = true
|
|
|
- return
|
|
|
- }
|
|
|
- this.currentOperateType = 2
|
|
|
- this.show = true
|
|
|
- },
|
|
|
- toJump(item, index) {
|
|
|
- if (item.isVip) {
|
|
|
- if (!this.isUserRegister) {
|
|
|
- this.showUserRegister = true
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- if (item.url) {
|
|
|
- uni.switchTab({
|
|
|
- url: item.url
|
|
|
- })
|
|
|
- } else if (index == 3) {
|
|
|
- this.handlePoster(true)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+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 {
|
|
|
- background-color: $primary-bg-color;
|
|
|
- padding-bottom: 146rpx;
|
|
|
-
|
|
|
- ::v-deep {
|
|
|
- .u-swiper-indicator {
|
|
|
- padding: 0 !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;
|
|
|
-
|
|
|
- .common-btn {
|
|
|
- width: 160rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .suit-content {
|
|
|
- padding: 0 20rpx 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: 20rpx;
|
|
|
-
|
|
|
- &-active {
|
|
|
- color: #F39800;
|
|
|
- border-color: #F39800;
|
|
|
- font-weight: bold;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- &-disabled {
|
|
|
- background-color: #fffafa;
|
|
|
- border-color: #d0d0d0;
|
|
|
- color: #ababab;
|
|
|
- }
|
|
|
-
|
|
|
- &-column {
|
|
|
- width: 100%;
|
|
|
- text-align: left;
|
|
|
- padding: 0 10rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+::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>
|
lkg
