123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005 |
- <template>
- <view class="container">
- <navbar :config="config" backColor="#666"></navbar>
- <view id="page-top">
- <view class="product">
- <view class="u-bg-fff pb40">
- <view class="pic">
- <!-- <image src="../../../static/delImg/product2.png" mode="aspectFill"></image> -->
- <!-- <j-video class="jvideo" :url="dataForm.video_url" width="750rpx" height="620rpx"></j-video> -->
- <swiper class="swiper" indicator-dots="true" :autoplay="true" interval="5000" duration="1500"
- circular="true">
- <swiper-item v-if="dataForm.video_url">
- <j-video class="jvideo" :url="dataForm.video_url" width="750rpx" height="620rpx"></j-video>
- </swiper-item>
- <swiper-item v-for="(item, index) in imglist" :key="index">
- <image :src="item" mode="aspectFill"></image>
- </swiper-item>
- </swiper>
- <view class="p-price">
- <view class="pd24 u-flex-center" style="align-items: baseline;">
- <view class="u-FFF u-font36">
- <rich-text :nodes="$mUtil.priceBigSmallTwo(dataForm.min_price)"></rich-text>
- </view>
- <text class="discount u-font24 u-ml20 u-del">¥{{ dataForm.max_sale_price }}</text>
- <!-- <text class="discount u-font24 u-ml15"
- >{{ dataForm.discount }}折</text
- > -->
- </view>
- <view class="p-ab u-flex-center">
- <view class="triangle-bottomright"></view>
- <view class="seckill u-text-center u-font28">
- <!-- active_state 0:未开始 * 1:进行中 * 2:已结束 -->
- <!-- <view class="u-bold" style="padding: 20rpx;" v-if="dataForm.active_state == 2"
- >已结束</view -->
- <view class="u-bold" v-if="dataForm.active_state == 1">距结束</view>
- <view class="u-bold" v-if="dataForm.active_state == 0||dataForm.active_state == 2">已结束</view>
- <view v-if="dataForm.active_state != 2">
- <uni-countdown :backgroundColor="'none'" @timeup="overDown1" :color="'#3775F6'"
- :splitorColor="'#3775F6'" :show-day="time1[0] > 0" :day="time1[0]" :hour="time1[1]"
- :minute="time1[2]" :second="time1[3]"></uni-countdown>
- </view>
- </view>
- </view>
- </view>
- <view class="mt10 u-plr30">
- <view>
- <view v-if="shop.platform_shop" class="tipsStatus" style="vertical-align: middle;">自营</view>
- <text class="u-font34 u-bold u-1A1A1A">{{ dataForm.title }}</text>
- </view>
- <view class="u-font24 u-mt15 u-999">
- <text>已售
- <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>件,仅剩<text class="u-FF0000">{{
- dataForm.residue_stock_total
- }}</text>件</text>
- </view>
- <!--优惠-->
- <!-- <view
- class="bg-FFF6EE pd20 u-mt20 u-flex-center br-rd10"
- v-if="shopDiscounts.is_use == true"
- >
- <view class="u-FF0000 br-FF0000 u-font24">首单优惠</view>
- <view class="u-ml15 u-font24 u-CA7E57"
- >满{{ shopDiscounts.full }}元减{{
- shopDiscounts.reduction
- }}元</view
- >
- </view> -->
- </view>
- </view>
- </view>
- <view class="u-bg-fff u-mt10">
- <view class="u-plr30 u-flex-center-sb pt-pb35">
- <view class="u-flex-center">
- <view @click="goShop">
- <image class="u-avatar104" :src="shop.logo"></image>
- </view>
- <view class="u-ml25">
- <view class="u-font28 u-1A1A1A u-bold">{{ shop.shop_name }} </view>
- <view class="u-999 u-font24 u-mt5 u-text2" @click="goLocal">
- <text class="iconfont" style="color: #FA6138;"></text>
- {{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
- }}{{ shop.address }}
- </view>
- </view>
- </view>
- <view class="iconfont" @click="goShop"></view>
- </view>
- </view>
- </view>
- <view class="u-bg-fff u-mt10">
- <view class="tab u-flex-center-sa u-font30 u-1A1A1A u-border-one-one"
- :style="`top: calc(${statusBarHeight}px + 44px)`">
- <view @tap="change(0)" class="pb30" :class="{ active: isChecked == 0 }">商品详情</view>
- <view @tap="change(1)" class="pb30" :class="{ active: isChecked == 1 }">用户评论({{ commentList.length }})</view>
- </view>
- <view class="u-mt10">
- <!--商品详情-->
- <view v-if="isChecked == 0">
- <view class="richText ql-editor-box">
- <rich-text :nodes="goodsInfo.mobile_detail"></rich-text>
- <!-- <jyf-parser :html="$mUtil.formatRichText(goodsInfo.mobile_detail)" ref="article"></jyf-parser> -->
- </view>
- </view>
- <!--评论-->
- <view class="u-plr30" v-else>
- <comment :value="commentList"></comment>
- </view>
- </view>
- </view>
- </view>
- <view style="height:170rpx;background-color:white"></view>
- <view class="bottom-btn u-bg-fff">
- <view class="pt-pb30 u-plr30 u-flex-center-sb">
- <button @click="share" class="u-text-center" style="line-height: normal;margin-left: 25rpx;">
- <view class="iconfont2 u-font44 u-999"></view>
- <view class="u-font28 u-1A1A1A">分享</view>
- </button>
- <!--秒杀按钮-->
- <view class="seckill-btn" v-if="dataForm.active_state==0">
- <button v-if="ispay" class="u-btn-two u-DCCDA4" @click="notStarted()">
- 立即购买
- </button>
- </view>
- <view class="seckill-btn" v-if="dataForm.active_state==1">
- <button v-if="ispay" class="u-btn-two u-DCCDA4 " @click="buy(1, dataForm.id)">
- 立即购买
- </button>
- </view>
- <view class="seckill-btn" v-if="dataForm.active_state==2">
- <button v-if="ispay" class="u-btn-two u-DCCDA4 " @click="itSover(1, dataForm.id)">
- 立即购买
- </button>
- </view>
- </view>
- </view>
- <!--规格-->
- <uniPopup type="bottom" ref="specOpen">
- <view class="u-bg-fff spec">
- <view class="u-plr30 flex-sb u-border-one-one pb30">
- <view class="u-flex-center">
- <image class="u-goods200" :src="choseConfig.cover ? choseConfig.cover : cover"></image>
- <view class="u-ml20">
- <view class="u-999 u-font24 u-flex-center">
- <view class="u-FF0000 u-font36">
- <rich-text :nodes="
- $mUtil.priceBigSmall(
- choseConfig.activity_price
- ? choseConfig.activity_price
- : moPrice
- )
- "></rich-text>
- </view>
- <!-- choseConfig.market_price ? choseConfig.market_price : moDelPrice -->
- <text class="u-del u-ml15">¥{{ choseConfig.market_price ? choseConfig.market_price : moDelPrice }}
- </text>
- <!-- <text class="u-ml10">{{ dataForm.discount }}折</text> -->
- </view>
- <view class="u-font22 u-999 u-mt5">活动库存 {{ stock }} 件
- <text>商品库存{{choseConfig.able_stock?choseConfig.able_stock:goods_total_stock}}</text>
- </view>
- <view class="u-1A1A1A u-mt25">{{
- choseConfig.sku_set_name ? choseConfig.sku_set_name : "请选择"
- }}
- </view>
- </view>
- </view>
- <view class="iconfont u-999 closeIcon" @click="specOpenClose"></view>
- </view>
- <view>
- <view class="">
- <view class="u-mt30" v-for="(item, index) in skuTab" :key="item.head.id">
- <view class="u-plr30">{{ item.head.name }}</view>
- <view class="u-mt20 u-border-one-one pb30">
- <view class="u-plr30 u-flex u-flex-warp">
- <view class="spec-item" :class="childrenItem.flag ? 'activeColor' : ''"
- @click="chonseSku(index, childrenItem.id)" v-for="childrenItem in item.values"
- :key="childrenItem.id">{{ childrenItem.name }}</view>
- </view>
- </view>
- </view>
- </view>
- <view class="u-plr30 u-mt30">
- <view class="u-flex-center-sb">
- <view>购买数量</view>
- <view class="u-flex-center">
- <view class="iconfont minus" @click="resNum"></view>
- <view class="num">{{ add_num }}</view>
- <view class="iconfont plus-sign" @click="addNum"></view>
- </view>
- </view>
- <view class="specOpen-btn">
- <view v-if="btnType == 0">
- <button class="u-btn-two" @click="btnBuy(btnType)">
- {{ btnName }}
- </button>
- </view>
- <view v-else>
- <button class="u-btn-two" @click="btnBuy(btnType)">
- {{ btnName }}
- </button>
- </view>
- </view>
- </view>
- </view>
- </view>
- </uniPopup>
- <!--页面加载动画-->
- <ldLoading isFullScreen :active="loading"></ldLoading>
- <share ref="shares" :contentHeight="580" v-if="isvisible"></share>
- </view>
- </template>
- <script>
- import uniPopup from "../../../components/uni-popup/uni-popup.vue";
- import comment from "../../../components/ld-comment/ld-comment.vue";
- import jyfParser from "../../../components/jyf-parser/jyf-parser";
- import ImgUpload from "../../../components/uploadImg/imgUpload.vue";
- import share from "./../../public/share";
- import jVideo from "../../../components/j-video/j-video.vue"
- let app = getApp()
- export default {
- components: {
- uniPopup,
- comment,
- jyfParser,
- ImgUpload,
- share,
- jVideo
- },
- data() {
- return {
- //手机状态栏高度
- statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
- config: {
- back: true, //false是tolbar页面 是则不写
- title: "商品详情",
- color: "#1a1a1a",
- //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
- backgroundColor: [1, "#fff"],
- backTabPage: "",
- },
- imglist: [], //详情图片数组
- isChecked: 0,
- btnName: "",
- btnType: "", //0 购物车,1 立即购买
- dataForm: {}, //商品详情
- shop: {}, //店铺信息
- shopDiscounts: {}, //店铺首单优惠
- stock: 0,
- goods_total_stock: 0,
- cover: "",
- loading: true,
- moDelPrice: "",
- moPrice: "",
- goodsSkuList: [], //sku组合值
- skuTab: [], //sku二位数组
- goods_id: null,
- limit_buy_num: 0,
- choseConfig: {},
- hasId: "",
- add_num: 1,
- goStatus: 0, //0:购物车,1下单
- shop_id: 0,
- commentList: [],
- goodsInfo: {},
- isvisible: false,
- time1: [0, 0, 0, 0],
- ispay: app.globalData.openPay
- };
- },
- onShow() {
- var pages = getCurrentPages();
- var prevPage = pages[pages.length - 2];
- if (prevPage == undefined) {
- // this.config.backTabPage = "/pages/research/homepage/lidaPage";
- }
- },
- onLoad(options) {
- //当用户进来有缓存店铺
- //店铺推荐(商品)
- if (options.id) {
- this.getDetailInfo(options.id);
- }
- if (options.shareId) {
- this.recordSave(options.shareId, options.id);
- }
- },
- onShareAppMessage(res) {
- if (res.from === "button") {
- // 来自页面内分享按钮
- console.log(res.target);
- }
- return {
- title: this.shareTitle,
- imageUrl: this.shareImg,
- path: `/pages/product/goods/seckillGoods?id=${this.dataForm.id}`,
- };
- },
- methods: {
- notStarted() {
- this.$mUtil.toast("活动尚未开始")
- },
- itSover() {
- this.$mUtil.toast("活动已结束")
- },
- goLocal() {
- uni.openLocation({
- latitude: Number(this.shop.tx_latitude),
- longitude: Number(this.shop.tx_longitude),
- name: this.shop.name,
- address: this.shop.address,
- success: function() {
- console.log("success");
- },
- });
- },
- goShop() {
- uni.navigateTo({
- url: "/pages/convenienceService/shopDetails?shopId=" + this.shop_id,
- });
- },
- recordSave(share_user_id, goods_id) {
- this.$http
- .post("/share/record/save", {
- share_user_id: share_user_id,
- goods_id: goods_id,
- })
- .then((res) => {});
- },
- share() {
- this.isvisible = false
- let token = uni.getStorageSync("apiToken");
- if (!token) {
- uni.navigateTo({
- url: "/pages/login/index",
- });
- } else {
- let user = uni.getStorageSync("personal");
- this.isvisible = true;
- this.$nextTick(() => {
- this.$refs.shares.shareInfo(
- "/?pageType=1&type=2&id=" + this.dataForm.id + "&shareId=" + user.id,
- 'pages/down',
- this.dataForm.title,
- "",
- this.dataForm.cover
- );
- });
- }
- },
- // 获取主页数据
- getIndexList(shopid) {
- this.$http.get("/yxt/shop/info/" + shopid).then((res) => {
- uni.stopPullDownRefresh();
- this.loading = false;
- if (res.data && res.code == 200) {
- this.shop = res.data;
- }
- });
- },
- getByShop(id) {
- //店铺优惠查询
- this.$http.get("/marketing/firstOrder/getByShop/" + id).then((res) => {
- if (res && res.code == 200) {
- this.shopDiscounts = res.data;
- }
- });
- },
- getDetailInfo(id) {
- this.$http
- .get("/marketing/seckillActivityGoods/info/" + id)
- .then((res) => {
- this.loading = false;
- if (res && res.code == 200) {
- this.dataForm = res.data;
- this.shop_id = res.data.shop_id;
- this.$http
- .get("/marketing/firstOrder/getByShop/" + this.shop_id)
- .then((res) => {
- if (res && res.code == 200) {
- this.shopDiscounts = res.data;
- }
- });
- this.$http.get("/yxt/shop/info/" + this.shop_id).then((res) => {
- if (res.data && res.code == 200) {
- this.shop = res.data;
- }
- });
- this.imglist = res.data.cover.split(",");
- // active_state 0:未开始 * 1:进行中 * 2:已结束
- if (res.data.active_state == 0 || res.data.active_state == 2) {
- this.time1 = this.$mUtil
- .countDown(res.data.will_start_time)
- .split(":").map(val => Number(val));
- } else {
- this.time1 = this.$mUtil
- .countDown(res.data.finish_time)
- .split(":").map(val => Number(val));
- }
- this.$http
- .get(`/goods/content/${this.dataForm.goods_id}`)
- .then((res) => {
- if (res && res.code == 200) {
- this.goodsInfo = res.data;
- }
- });
- this.$http
- .get(
- `/comment/orderGoods/getgoodscomments/${this.dataForm.goods_id}`
- )
- .then((res) => {
- if (res && res.code == 200) {
- this.commentList = res.list;
- }
- });
- }
- });
- },
- goTocart() {
- uni.navigateTo({
- url: "/pages/index/shop",
- });
- },
- //点击拼团更多
- goGb() {
- this.$refs.gbOpen.open();
- },
- //点击关闭
- gbClose() {
- this.$refs.gbOpen.close();
- },
- //评论,商品详情切换
- change(i) {
- this.isChecked = i;
- },
- //点购物车,立即购买
- buy(i, id) {
- this.btnType = i;
- this.checkSku(id);
- if (i == 0) {
- this.btnName = "加入购物车";
- } else {
- this.btnName = "立即购买";
- }
- },
- // 减数量
- resNum() {
- if (this.add_num > 1) {
- this.add_num--;
- }
- },
- //加数量
- addNum() {
- this.add_num++;
- },
- chonseSku(index, id) {
- this.skuTab[index].values.forEach((res) => {
- res.flag = false;
- if (res.id == id) {
- res.flag = true;
- }
- });
- let choseId = [];
- this.skuTab.forEach((res) => {
- res.values.forEach((Key) => {
- if (Key.flag) {
- choseId.push(Key.id);
- }
- });
- });
- let totalId = choseId.join("|");
- this.hasId = totalId;
- this.goodsSkuList.forEach((res) => {
- if (res.sku_hash_code == totalId) {
- this.choseConfig = res;
- this.stock = this.dataForm.real_stock_total;
- this.able_stock = res.able_stock;
- }
- });
- },
- //查询sku
- checkSku(id) {
- this.$http
- .get(`/marketing/seckillActivityGoods/skus/${this.dataForm.id}`)
- .then((res) => {
- this.loading = false;
- // console.log(res.data.goods_total_stock)
- this.goods_total_stock = res.data.goods_total_stock
- if (res && res.code == 200) {
- this.choseConfig = {};
- this.hasId = ''
- res.data.goods.sku_table.forEach((keys) => {
- keys.values.forEach((val) => {
- val.flag = false;
- });
- });
- this.limit_buy_num = this.dataForm.limit_buy_num;
- this.goods_id = this.dataForm.goods_id;
- this.goodsSkuList = res.data.goods_sku_list;
- this.moPrice = this.dataForm.min_price;
- this.moDelPrice = this.dataForm.min_sale_price;
- this.cover = this.imglist[0];
- this.stock = this.dataForm.real_stock_total;
- if (res.data.goods_auth) {
- if (res.data.goods_auth.added) {
- this.$refs.specOpen.open();
- } else {
- this.$mUtil.toast("该商品已经下架");
- }
- } else {
- this.$mUtil.toast("没有经营权限");
- }
- //只有没数据才去重新渲染sku的数据
- if (this.skuTab.length == 0) {
- this.skuTab = res.data.goods.sku_table;
- for (let i in this.skuTab) {
- //默认选中第一个可选项
- this.skuTab[i].values[0].flag = true;
- }
- //显示选中的sku信息
- //this.chonseSku(0, this.skuTab[0].values[0].id);
- }
- //显示选中的sku信息
- this.chonseSku(0, this.skuTab[0].values[0].id);
- // if(res.data.goods.sku_table.length>0){
- // this.$refs.specOpen.open()
- // }else{
- // this.hasId = ''
- // this.btnBuy()
- // }
- }
- });
- },
- //关闭规格弹窗
- specOpenClose() {
- this.$refs.specOpen.close();
- },
- //加入购物车
- btnBuys() {
- // 判断是否选中sku
- if (this.skuTab.length > 0 && this.hasId == "") {
- this.$mUtil.toast("请选中sku");
- return false;
- }
- // 判断限购
- if (this.add_num > this.limit_buy_num && this.limit_buy_num != 0) {
- this.$mUtil.toast("商品限购" + this.limit_buy_num + "件");
- return false;
- }
- //判断库存
- if (this.goodsSkuList.length > 0 && this.able_stock < this.add_num) {
- this.$mUtil.toast("商品库存只有" + this.able_stock + "件");
- this.$http.post(`/singlegoods/understockrecord/save`, {
- shop_id: this.shop_id,
- goods_id: this.goods_id,
- single_goods_id: this.choseConfig.single_goods_id,
- sku_set_name: this.choseConfig.sku_set_name,
- buy_num: this.add_num
- }).then((res) => {
- });
- return false;
- }
- if (this.goStatus == 0) {
- let data = {
- goods_id: this.goods_id,
- sku_hash_code: this.hasId,
- add_num: this.add_num,
- source_shop_id: this.shop_id.toString(),
- };
- this.$http.post(`/cart/add`, data).then((res) => {
- if (res && res.code == 200) {
- this.$mUtil.toast("添加成功");
- this.$refs.specOpen.close();
- this.choseConfig = {};
- this.add_num = 1;
- this.cartList();
- }
- });
- } else {
- this.psotJson();
- }
- },
- //组合数据
- psotJson() {
- // this.loading = true;
- let dataJson = {};
- let childArr = [];
- let parendArr = [];
- // let shop = uni.getStorageSync('shop')
- // let shopid = shop.id ? shop.id : ''
- this.choseConfig;
- childArr.push({
- user_cart_id: 0,
- activity_goods_id: this.choseConfig.activity_goods_id,
- goods_id: this.goods_id,
- num: this.add_num,
- sku_hash_code: this.hasId,
- });
- parendArr.push({
- shop_id: this.shop.id,
- source_shop_id: this.shop.id,
- activity_id: this.dataForm.seckill_id, //活动id
- sponsor_activity_id: 0, //拼团id
- user_remark: "",
- items: childArr,
- });
- dataJson = {
- is_cart: false, //是否来源于购物车
- receipt_id: null, //收货地址ID
- shipment_mode: 0, //0物流,1自提
- shop_orders: parendArr,
- marketing_type: 1, //0无活动,1秒杀,2拼团
- };
- uni.setStorageSync("dataJson", dataJson);
- uni.navigateTo({
- url: "../surePay/surePaySechill",
- });
- // let shop = uni.getStorageSync('shop')
- // let shopid=shop.id?shop.id:''
- // this.loading = false;
- // this.$http.post(`/order/build`, dataJson).then(res => {
- // if (res && res.code == 200) {
- // uni.setStorageSync('sureData', res.data)
- // uni.navigateTo({
- // url: '../surePay/surePay'
- // })
- // }
- // })
- },
- //
- btnBuy(i) {
- this.goStatus = i;
- let token = uni.getStorageSync("apiToken");
- //判断是否微信授权登录(没有授权登录进wx-login,授权了但没有注册进login)
- if (!token) {
- uni.navigateTo({
- url: "/pages/login/index",
- });
- } else {
- this.btnBuys();
- }
- //0 购物车,1 立即购买
- },
- },
- };
- </script>
- <style lang="scss">
- page {
- background-color: #f5f5f5;
- }
- </style>
- <style lang="scss" scoped>
- .pd24 {
- padding: 24rpx;
- }
- .pd20 {
- padding: 20rpx;
- }
- .pt20-pb14 {
- padding-top: 20rpx;
- padding-bottom: 14rpx;
- }
- .pt28-pb18 {
- padding-top: 28rpx;
- padding-bottom: 18rpx;
- }
- .pb30 {
- padding-bottom: 30rpx;
- }
- .pb40 {
- padding-bottom: 40rpx;
- }
- .pb50 {
- padding-bottom: 50rpx;
- }
- .pt-pb30 {
- padding-top: 30rpx;
- padding-bottom: 30rpx;
- }
- .pt-pb35 {
- padding-top: 35rpx;
- padding-bottom: 35rpx;
- }
- .ml54 {
- margin-left: 54rpx;
- }
- .ml138 {
- margin-left: 138rpx;
- }
- .br-rd10 {
- border-radius: 10rpx;
- }
- .br-rd20 {
- border-radius: 20rpx;
- }
- .stb-btn {
- padding: 8rpx 18rpx;
- border-radius: 10rpx;
- }
- .br-FF0000 {
- border: 1rpx solid #ff0000;
- border-radius: 24rpx;
- padding: 6rpx 12rpx;
- }
- .bg-FFF6EE {
- background-color: #fff6ee;
- }
- .mt80 {
- margin-top: 80rpx;
- }
- .mt10 {
- margin-top: 10rpx;
- }
- .product {
- // padding-bottom: 150rpx;
- }
- .pic {
- width: 100%;
- position: relative;
- .swiper {
- // height: 620rpx;
- height: 100vw;
- video {
- width: 100%;
- // height: 620rpx;
- height: 100vw;
- }
- image {
- width: 100%;
- // height: 620rpx;
- height: 100vw;
- }
- }
- .p-price {
- width: 100%;
- // position: absolute;
- top: 460rpx;
- // background: linear-gradient(90deg,#20a733, #0a824b);
- background: #FA6138;
- border-radius: 20rpx 20rpx 0px 0px;
- position: relative;
- top: -16rpx;
- .discount {
- color: #ffffff;
- }
- }
- }
- .richText {
- padding: 30rpx;
- /deep/ img {
- margin-top: 0 !important;
- }
- }
- //秒杀,拼团样式
- .p-ab {
- position: absolute;
- top: 0;
- right: 0;
- height: 100%;
- }
- .stb-list {
- padding-bottom: 10rpx;
- }
- .triangle-bottomright {
- width: 0;
- height: 0;
- border-bottom: 105rpx solid #dccda4;
- border-left: 60rpx solid transparent;
- }
- .seckill {
- background-color: #dccda4;
- color: #FA6138;
- padding: 12rpx 15rpx;
- box-sizing: border-box;
- border-radius: 5rpx 20rpx 0px 0px;
- text-align: center;
- // width: 150rpx;
- }
- .seckill-btn {
- width: 76%;
- }
- .br-284534 {
- border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
- }
- .gb-te {
- padding-top: 20rpx;
- padding-bottom: 15rpx;
- }
- .gb-btn {
- padding: 18rpx 80rpx 8rpx;
- line-height: 30rpx;
- }
- .btn-bg-dccda4 {
- background: #dccda4;
- border-radius: 48rpx 0rpx 0rpx 48rpx;
- }
- .btn-bg-00321E {
- background: #0B844A;
- border-radius: 0px 48px 48px 0px;
- }
- .tab {
- position: sticky;
- top: 0;
- background-color: #fff;
- padding-top: 38rpx;
- z-index: 9;
- .pb30 {
- position: relative;
- &::before {
- content: '';
- position: absolute;
- left: 50%;
- bottom: 0;
- transform: translateX(-50%);
- width: 0;
- height: 2px;
- background: #FA6138;
- transition: all 0.3s;
- }
- &.active {
- font-size: 30rpx;
- color: #FA6138;
- font-weight: 700;
- &::before {
- width: 100%;
- }
- }
- }
- }
- .bottom-btn {
- width: 100%;
- position: fixed;
- bottom: 0;
- z-index: 9;
- border-top: 1rpx solid #e6e6e6;
- .cart {
- position: relative;
- .number {
- position: absolute;
- top: -10rpx;
- left: 45rpx;
- padding: 4rpx 8rpx;
- background-color: #ff0000;
- border: 4rpx solid #ffffff;
- border-radius: 40rpx;
- }
- }
- .cart-btn {
- width: 230rpx;
- height: 85rpx;
- background: #dccda4;
- border-radius: 43rpx 0rpx 0rpx 43rpx;
- }
- .buy-btn {
- width: 230rpx;
- height: 85rpx;
- line-height: 85rpx;
- background: #0B844A;
- border-radius: 0rpx 43rpx 43rpx 0rpx;
- }
- }
- .flex-sb {
- display: flex;
- justify-content: space-between;
- }
- //弹窗
- .spec {
- border-radius: 18rpx 18rpx 0rpx 0rpx;
- padding-top: 30rpx;
- max-height: 900rpx;
- overflow-y: auto;
- .spec-item {
- background-color: #f6f6f6;
- border: 1px solid #f6f6f6;
- padding: 12rpx 30rpx;
- font-size: 24rpx;
- color: #1a1a1a;
- border-radius: 4px;
- }
- .activeColor {
- background-color: #e1e6e3;
- border: 1px solid #3775F6;
- color: #FA6138;
- border-radius: 4px;
- }
- .spec-item:not(:last-child) {
- margin-right: 24rpx;
- }
- //减号
- .minus {
- width: 50rpx;
- height: 50rpx;
- line-height: 50rpx;
- text-align: center;
- background: #dedede;
- border-radius: 8rpx 0rpx 0rpx 8rpx;
- }
- .num {
- width: 74rpx;
- height: 46rpx;
- line-height: 46rpx;
- text-align: center;
- border: 1px solid #dedede;
- }
- //加号
- .plus-sign {
- width: 50rpx;
- height: 50rpx;
- line-height: 50rpx;
- text-align: center;
- background: #dedede;
- border-radius: 0rpx 8rpx 8rpx 0rpx;
- }
- .specOpen-btn {
- margin-top: 68rpx;
- padding-bottom: 34rpx;
- button {
- background-color: #FA6138;
- color: #ffffff;
- }
- }
- }
- </style>
|