|
|
@@ -1,1132 +1,1306 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <view class="carousel">
|
|
|
- <swiper indicator-dots :circular="true" duration="400">
|
|
|
- <swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
|
|
|
- <view class="image-wrapper"><image :src="item" class="loaded" mode="aspectFill"></image></view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
- <view class="introduce-section">
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="carousel">
|
|
|
+ <swiper indicator-dots :circular="true" duration="400">
|
|
|
+ <swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
|
|
|
+ <view class="image-wrapper">
|
|
|
+ <image :src="item" class="loaded" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <view class="introduce-section">
|
|
|
<view class="price-box" v-if="goodsType == 0">
|
|
|
- <image src="../../static/icon/xfq.png" mode=""></image>
|
|
|
+ <image src="../../static/icon/xfq.png" mode=""></image>
|
|
|
<text class="price">{{ goodsObjact.price }}</text><text class="jftit"> 消费券</text>
|
|
|
- <text class="old-price">￥{{goodsObjact.ot_price}}</text>
|
|
|
- </view>
|
|
|
- <text class="title" v-if="goodsType == 0">{{ goodsObjact.store_name }}</text>
|
|
|
+ <text class="old-price">￥{{goodsObjact.ot_price}}</text>
|
|
|
+ </view>
|
|
|
+ <text class="title" v-if="goodsType == 0">{{ goodsObjact.store_name }}</text>
|
|
|
<view class="bot-row">
|
|
|
- <text>快递: {{ goodsObjact.postage }}</text>
|
|
|
- <text style="text-align: center;">销量: {{ goodsObjact.sales }}</text>
|
|
|
- <text style="text-align: right;">{{ storeObjact.address | address}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 评价 -->
|
|
|
- <view class="eva-section" v-if="reply" @click="navTo('/pages/product/reply?id=' + goodsid)">
|
|
|
- <view class="e-header">
|
|
|
- <text class="tit">评价</text>
|
|
|
- <text>({{ details.replyCount }})</text>
|
|
|
- <text class="tip">好评率 {{ details.replyChance }}%</text>
|
|
|
- <text class="iconfont iconenter"></text>
|
|
|
- </view>
|
|
|
- <view class="eva-box">
|
|
|
- <image class="portrait" :src="reply.avatar" mode="aspectFill"></image>
|
|
|
- <view class="right">
|
|
|
- <text class="name">{{ reply.nickname }}</text>
|
|
|
- <text class="con">{{ reply.comment }}</text>
|
|
|
- <view class="con_box">
|
|
|
- <view class="con_image" v-for="item in reply.pics"><image :src="item"></image></view>
|
|
|
- </view>
|
|
|
- <view class="bot">
|
|
|
- <text class="attr"></text>
|
|
|
- <text class="time">{{ reply.add_time }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="eva-boxs" v-if="reply.merchant_reply_content">
|
|
|
- <view class="right">
|
|
|
- <text class="con">
|
|
|
- <text style="color: #FD5B23;margin-right: 8rpx;">商家回复 :</text>
|
|
|
- {{ reply.merchant_reply_content }}
|
|
|
- </text>
|
|
|
- <view class="bot">
|
|
|
- <text class="attr"></text>
|
|
|
- <text class="time">{{ reply.merchant_reply_time }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="c-list">
|
|
|
- <view class="c-row b-b" @click="toggleSpec">
|
|
|
- <text class="tit">购买数量</text>
|
|
|
- <view class="con">
|
|
|
- <text class="selected-text">{{ goodsNumber }}</text>
|
|
|
- </view>
|
|
|
- <text class="iconfont iconenter"></text>
|
|
|
- </view>
|
|
|
- <view class="c-row b-b" v-if="goodsType == 1">
|
|
|
- <text class="tit">限购数量</text>
|
|
|
- <view class="con">
|
|
|
- <text class="selected-text">{{ goodsObjact.num + goodsObjact.unit_name }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="shop-box flex" v-if="goodsType == 0 && shopId > 0">
|
|
|
- <view class="flex">
|
|
|
- <image :src="shopInfo.logo" mode=" aspectFit" class="shop-img"></image>
|
|
|
- <text class="font-size-lg">{{ shopInfo.title }}</text>
|
|
|
- </view>
|
|
|
- <navigator :url="'/pages/shoping/index?merid=' + shopId"><view class="shop-button">进店逛逛</view></navigator>
|
|
|
- </view>
|
|
|
- <view class="detail-desc">
|
|
|
- <view class="d-header"><text>图文详情</text></view>
|
|
|
- <rich-text class="detail-centent" :nodes="goodsObjact.description"></rich-text>
|
|
|
- <view :class="{ contentBottomHeight: goodsType == 1 || goodsType == 2, goodsBottom: goodsType == 0 }"></view>
|
|
|
- </view>
|
|
|
- <!-- 底部操作菜单 -->
|
|
|
- <view class="page-bottom" v-if="goodsType == 0">
|
|
|
- <view class="action-btn-group">
|
|
|
- <button type="primary" class=" action-btn no-border add-cart-btn" @click="toggleSpec(1)">立即兑换</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 规格-模态层弹窗 -->
|
|
|
- <view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
|
|
|
- <!-- 遮罩层 -->
|
|
|
- <view class="mask"></view>
|
|
|
- <view class="layer attr-content" @click.stop="stopPrevent">
|
|
|
- <view class="a-t">
|
|
|
- <image :src="actionImage"></image>
|
|
|
+ <text>快递: {{ goodsObjact.postage }}</text>
|
|
|
+ <text style="text-align: center;">销量: {{ goodsObjact.sales }}</text>
|
|
|
+ <text style="text-align: right;">{{ storeObjact.address | address}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 评价 -->
|
|
|
+ <view class="eva-section" v-if="reply" @click="navTo('/pages/product/reply?id=' + goodsid)">
|
|
|
+ <view class="e-header">
|
|
|
+ <text class="tit">评价</text>
|
|
|
+ <text>({{ details.replyCount }})</text>
|
|
|
+ <text class="tip">好评率 {{ details.replyChance }}%</text>
|
|
|
+ <text class="iconfont iconenter"></text>
|
|
|
+ </view>
|
|
|
+ <view class="eva-box">
|
|
|
+ <image class="portrait" :src="reply.avatar" mode="aspectFill"></image>
|
|
|
+ <view class="right">
|
|
|
+ <text class="name">{{ reply.nickname }}</text>
|
|
|
+ <text class="con">{{ reply.comment }}</text>
|
|
|
+ <view class="con_box">
|
|
|
+ <view class="con_image" v-for="item in reply.pics">
|
|
|
+ <image :src="item"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bot">
|
|
|
+ <text class="attr"></text>
|
|
|
+ <text class="time">{{ reply.add_time }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="eva-boxs" v-if="reply.merchant_reply_content">
|
|
|
+ <view class="right">
|
|
|
+ <text class="con">
|
|
|
+ <text style="color: #FD5B23;margin-right: 8rpx;">商家回复 :</text>
|
|
|
+ {{ reply.merchant_reply_content }}
|
|
|
+ </text>
|
|
|
+ <view class="bot">
|
|
|
+ <text class="attr"></text>
|
|
|
+ <text class="time">{{ reply.merchant_reply_time }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="c-list">
|
|
|
+ <view class="c-row b-b" @click="toggleSpec">
|
|
|
+ <text class="tit">购买数量</text>
|
|
|
+ <view class="con">
|
|
|
+ <text class="selected-text">{{ goodsNumber }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont iconenter"></text>
|
|
|
+ </view>
|
|
|
+ <view class="c-row b-b" v-if="goodsType == 1">
|
|
|
+ <text class="tit">限购数量</text>
|
|
|
+ <view class="con">
|
|
|
+ <text class="selected-text">{{ goodsObjact.num + goodsObjact.unit_name }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="shop-box flex" v-if="goodsType == 0 && shopId > 0">
|
|
|
+ <view class="flex">
|
|
|
+ <image :src="shopInfo.logo" mode=" aspectFit" class="shop-img"></image>
|
|
|
+ <text class="font-size-lg">{{ shopInfo.title }}</text>
|
|
|
+ </view>
|
|
|
+ <navigator :url="'/pages/shoping/index?merid=' + shopId">
|
|
|
+ <view class="shop-button">进店逛逛</view>
|
|
|
+ </navigator>
|
|
|
+ </view>
|
|
|
+ <view class="detail-desc">
|
|
|
+ <view class="d-header"><text>图文详情</text></view>
|
|
|
+ <rich-text class="detail-centent" :nodes="goodsObjact.description"></rich-text>
|
|
|
+ <view :class="{ contentBottomHeight: goodsType == 1 || goodsType == 2, goodsBottom: goodsType == 0 }">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部操作菜单 -->
|
|
|
+ <view class="page-bottom" v-if="goodsType == 0">
|
|
|
+ <view class="action-btn-group">
|
|
|
+ <button type="primary" class=" action-btn no-border add-cart-btn" @click="toggleSpec(1)">立即兑换</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 规格-模态层弹窗 -->
|
|
|
+ <view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
|
|
|
+ <!-- 遮罩层 -->
|
|
|
+ <view class="mask"></view>
|
|
|
+ <view class="layer attr-content" @click.stop="stopPrevent">
|
|
|
+ <view class="a-t">
|
|
|
+ <image :src="actionImage"></image>
|
|
|
<view class="right">
|
|
|
- <view class="good-name clamp">{{goodsObjact.store_name}}</view>
|
|
|
- <text class="price"><image src="../../static/icon/xfq.png"></image>{{ actionPrice }}</text>
|
|
|
- <!-- <text class="stock">库存：{{ goodsObjact.stock }}件</text> -->
|
|
|
- <!-- <view class="selected" v-if="goodsType == 0">
|
|
|
- 已选：
|
|
|
- <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem }}</text>
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-for="(item, index) in specList" :key="index" class="attr-list">
|
|
|
- <text>{{ item.attr_name }}</text>
|
|
|
- <view class="item-list">
|
|
|
- <text
|
|
|
- v-for="(childItem, childIndex) in item.attr_value"
|
|
|
- :key="childIndex"
|
|
|
- class="tit"
|
|
|
- :class="{ selected: childItem.check }"
|
|
|
- @click="selectSpec(childItem, item, index)"
|
|
|
- >
|
|
|
- {{ childItem.attr }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="attr-list">
|
|
|
- <text>购买数量</text>
|
|
|
- <view class="item-list">
|
|
|
- <uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <button class="btn" @click.stop="buy">完成</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view :class="{ seckillBottom: goodsType == 1, goodsBottom: goodsType == 0 }"></view>
|
|
|
- <!-- 分享 -->
|
|
|
- <!-- <share ref="share" :contentHeight="580" :shareList="shareList"></share> -->
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import share from '@/components/share';
|
|
|
-import uniNumberBox from '@/components/uni-number-box.vue';
|
|
|
-import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
|
|
|
-import { goodsDetail, cartAdd, collectAdd, collectDel, seckillGoods, groupGoods } from '@/api/product.js';
|
|
|
-import { getShoping } from '@/api/shoping.js';
|
|
|
-// #ifdef H5
|
|
|
-import { weixindata } from '@/utils/wxAuthorized';
|
|
|
-import { mapState } from 'vuex';
|
|
|
-// #endif
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- share,
|
|
|
- uniNumberBox,
|
|
|
- uniCountdown
|
|
|
- },
|
|
|
- filters: {
|
|
|
- address(val) {
|
|
|
- let str = ''
|
|
|
- if(val) {
|
|
|
- str = val[0] + ' ' + val[1]
|
|
|
+ <view class="good-name clamp">{{goodsObjact.store_name}}</view>
|
|
|
+ <text class="price">
|
|
|
+ <image src="../../static/icon/xfq.png"></image>{{ actionPrice }}
|
|
|
+ </text>
|
|
|
+ <!-- <text class="stock">库存：{{ goodsObjact.stock }}件</text> -->
|
|
|
+ <!-- <view class="selected" v-if="goodsType == 0">
|
|
|
+ 已选：
|
|
|
+ <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem }}</text>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-for="(item, index) in specList" :key="index" class="attr-list">
|
|
|
+ <text>{{ item.attr_name }}</text>
|
|
|
+ <view class="item-list">
|
|
|
+ <text v-for="(childItem, childIndex) in item.attr_value" :key="childIndex" class="tit"
|
|
|
+ :class="{ selected: childItem.check }" @click="selectSpec(childItem, item, index)">
|
|
|
+ {{ childItem.attr }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="attr-list">
|
|
|
+ <text>购买数量</text>
|
|
|
+ <view class="item-list">
|
|
|
+ <uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax"
|
|
|
+ @eventChange="numberChange"></uni-number-box>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <button class="btn" @click.stop="buy">完成</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view :class="{ seckillBottom: goodsType == 1, goodsBottom: goodsType == 0 }"></view>
|
|
|
+ <!-- 分享 -->
|
|
|
+ <!-- <share ref="share" :contentHeight="580" :shareList="shareList"></share> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import share from '@/components/share';
|
|
|
+ import uniNumberBox from '@/components/uni-number-box.vue';
|
|
|
+ import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
|
|
|
+ import {
|
|
|
+ goodsDetail,
|
|
|
+ cartAdd,
|
|
|
+ collectAdd,
|
|
|
+ collectDel,
|
|
|
+ seckillGoods,
|
|
|
+ groupGoods
|
|
|
+ } from '@/api/product.js';
|
|
|
+ import {
|
|
|
+ getShoping
|
|
|
+ } from '@/api/shoping.js';
|
|
|
+
|
|
|
+ // import { weixindata } from '@/utils/wxAuthorized';
|
|
|
+ import {
|
|
|
+ mapState
|
|
|
+ } from 'vuex';
|
|
|
+
|
|
|
+
|
|
|
+ // #ifdef H5
|
|
|
+ import {
|
|
|
+ weixindata,
|
|
|
+ weixinlocation,
|
|
|
+ shareLoad
|
|
|
+ } from '@/utils/wxAuthorized';
|
|
|
+ // #endif
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ share,
|
|
|
+ uniNumberBox,
|
|
|
+ uniCountdown
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ address(val) {
|
|
|
+ let str = ''
|
|
|
+ if (val) {
|
|
|
+ str = val[0] + ' ' + val[1]
|
|
|
+ }
|
|
|
+ return str
|
|
|
}
|
|
|
- return str
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- details: '',
|
|
|
- reply: '', //评论
|
|
|
- type: 1, //默认支付方式add为
|
|
|
- goodsNumber: 1, //购买数量
|
|
|
- goodsid: '', //商品id
|
|
|
- specClass: 'none', //显示隐藏弹窗
|
|
|
- shareList: [], //分享列表
|
|
|
- goodsObjact: {}, //保存商品数据
|
|
|
- storeObjact: {},//保存店铺数据
|
|
|
- //图片循环
|
|
|
- imgList: [],
|
|
|
- specList: [],
|
|
|
- // 对比对象
|
|
|
- productValue: [],
|
|
|
- actionPrice: 0, //默认选中商品价格
|
|
|
- actionImage: '', //默认选中图片
|
|
|
- uniqueId: '', //选中的商品分类
|
|
|
- specSelected: [], //选中的分类
|
|
|
- specSelectedName: '', //选中分类名称
|
|
|
- goodsNumberMax: 0, //最大可购买数量
|
|
|
- shopId: '', //商店id
|
|
|
- //商店信息
|
|
|
- shopInfo: {
|
|
|
- logo: '',
|
|
|
- title: ''
|
|
|
- }, //商店信息
|
|
|
- goodsType: 0, //商品类型1秒杀商品0为普通商品2为拼团商品
|
|
|
- // 秒杀数据保存
|
|
|
- seckillObj: {
|
|
|
- stopTime: 0, //结束时间
|
|
|
- stop: false, //是否结束
|
|
|
- stopTimeH: 0, //小时
|
|
|
- stopTimeM: 0, //分钟
|
|
|
- stopTimeS: 0 //秒钟
|
|
|
- },
|
|
|
- // 拼团数据保存
|
|
|
- pink: {
|
|
|
- id: '', //拼团编号
|
|
|
- uid: '', //用户编号
|
|
|
- people: '', //拼团人数
|
|
|
- price: '', //拼团价格
|
|
|
- stop_time: '', //拼团结束时间
|
|
|
- nickname: '', //团长昵称
|
|
|
- avatar: '', //团长头像
|
|
|
- count: '', //拼团剩余人数
|
|
|
- h: '', //时
|
|
|
- i: '', //分
|
|
|
- s: '' //秒
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ details: '',
|
|
|
+ reply: '', //评论
|
|
|
+ type: 1, //默认支付方式add为
|
|
|
+ goodsNumber: 1, //购买数量
|
|
|
+ goodsid: '', //商品id
|
|
|
+ specClass: 'none', //显示隐藏弹窗
|
|
|
+ shareList: [], //分享列表
|
|
|
+ goodsObjact: {}, //保存商品数据
|
|
|
+ storeObjact: {}, //保存店铺数据
|
|
|
+ //图片循环
|
|
|
+ imgList: [],
|
|
|
+ specList: [],
|
|
|
+ // 对比对象
|
|
|
+ productValue: [],
|
|
|
+ actionPrice: 0, //默认选中商品价格
|
|
|
+ actionImage: '', //默认选中图片
|
|
|
+ uniqueId: '', //选中的商品分类
|
|
|
+ specSelected: [], //选中的分类
|
|
|
+ specSelectedName: '', //选中分类名称
|
|
|
+ goodsNumberMax: 0, //最大可购买数量
|
|
|
+ shopId: '', //商店id
|
|
|
+ //商店信息
|
|
|
+ shopInfo: {
|
|
|
+ logo: '',
|
|
|
+ title: ''
|
|
|
+ }, //商店信息
|
|
|
+ goodsType: 0, //商品类型1秒杀商品0为普通商品2为拼团商品
|
|
|
+ // 秒杀数据保存
|
|
|
+ seckillObj: {
|
|
|
+ stopTime: 0, //结束时间
|
|
|
+ stop: false, //是否结束
|
|
|
+ stopTimeH: 0, //小时
|
|
|
+ stopTimeM: 0, //分钟
|
|
|
+ stopTimeS: 0 //秒钟
|
|
|
+ },
|
|
|
+ // 拼团数据保存
|
|
|
+ pink: {
|
|
|
+ id: '', //拼团编号
|
|
|
+ uid: '', //用户编号
|
|
|
+ people: '', //拼团人数
|
|
|
+ price: '', //拼团价格
|
|
|
+ stop_time: '', //拼团结束时间
|
|
|
+ nickname: '', //团长昵称
|
|
|
+ avatar: '', //团长头像
|
|
|
+ count: '', //拼团剩余人数
|
|
|
+ h: '', //时
|
|
|
+ i: '', //分
|
|
|
+ s: '' //秒
|
|
|
+ },
|
|
|
+ detype: '1', // 1为积分商品 2为兑换券商品
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async onLoad(options) {
|
|
|
+ let obj = this;
|
|
|
+ if (options.detype) {
|
|
|
+ obj.detype = options.detype
|
|
|
+ }
|
|
|
+ //保存商品id
|
|
|
+ this.goodsid = options.id;
|
|
|
+ // 判断有无人邀请
|
|
|
+ if (options.spread) {
|
|
|
+ // 存储邀请人
|
|
|
+ uni.setStorageSync('spread', options.spread);
|
|
|
+ }
|
|
|
+ // 判断是否为秒杀商品
|
|
|
+ if (options.type == 1) {
|
|
|
+ // 保存商品类型
|
|
|
+ this.goodsType = 1;
|
|
|
+ // 保存结束时间
|
|
|
+ this.seckillObj.stopTime = options.stoptime;
|
|
|
+ // 获取当前时间毫秒数
|
|
|
+ let stoptime = options.stoptime * 1000;
|
|
|
+ // 获取当前时间
|
|
|
+ let acitonTime = new Date();
|
|
|
+ // 判断当前时间是否大于结束时间
|
|
|
+ if (acitonTime.getTime() > stoptime) {
|
|
|
+ // 当前秒杀时间已经结束
|
|
|
+ this.seckillObj.stop = true;
|
|
|
+ } else {
|
|
|
+ // 计算倒计时
|
|
|
+ this.timeComputed(stoptime, this.seckillObj);
|
|
|
+ }
|
|
|
+ this.seckillGoods();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (options.type == 2) {
|
|
|
+ // 保存当前拼团商品类型
|
|
|
+ this.goodsType = 2;
|
|
|
+ // 家在数据
|
|
|
+ this.groupGoods();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.goodsType == 0) {
|
|
|
+ // 加载普通商品详情
|
|
|
+ this.goodsDetail();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // #ifdef H5
|
|
|
+ ...mapState(['weichatObj', 'baseURL', 'urlFile']),
|
|
|
+ ...mapState('user', ['userInfo'])
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 分享
|
|
|
+ // #ifdef H5
|
|
|
+ IndexShare() {
|
|
|
+ let obj = this
|
|
|
+ // console.log('dddddddffffffffffffff')
|
|
|
+ // 设置菜单中的转发按钮触发转发事件时的转发内容
|
|
|
+ let pages = getCurrentPages(); //获取加载的页面
|
|
|
+ let currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
|
|
+ let url = '/#/' + currentPage.route; //当前页面url
|
|
|
+ let item = currentPage.options; //如果要获取url中所带的参数可以查看options
|
|
|
+ let shareObj = {
|
|
|
+ title: obj.goodsObjact.store_name, // 默认是小程序的名称(可以写slogan等)
|
|
|
+ link: obj.baseURL + url + '?id=' + item.id + '&spread=' + obj.userInfo
|
|
|
+ .uid, // 默认是当前页面，必须是以‘/’开头的完整路径
|
|
|
+ desc: obj.goodsObjact.store_name + ' 价格：' + obj.goodsObjact.price,
|
|
|
+ imgUrl: obj.goodsObjact.image,
|
|
|
+ success: function(res) {
|
|
|
+ // 转发成功之后的回调
|
|
|
+ if (res.errMsg == 'shareAppMessage:ok') {}
|
|
|
+ },
|
|
|
+ fail: function() {
|
|
|
+ // 转发失败之后的回调
|
|
|
+ if (res.errMsg == 'shareAppMessage:fail cancel') {
|
|
|
+ // 用户取消转发
|
|
|
+ } else if (res.errMsg == 'shareAppMessage:fail') {
|
|
|
+ // 转发失败，其中 detail message 为详细失败信息
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ console.log(shareObj, '8888888888888888888');
|
|
|
+ shareLoad(shareObj);
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
+ navTo(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取商店信息
|
|
|
+ getShoping() {
|
|
|
+ let obj = this;
|
|
|
+ getShoping({
|
|
|
+ mer_id: this.shopId
|
|
|
+ })
|
|
|
+ .then(function({
|
|
|
+ data
|
|
|
+ }) {
|
|
|
+ console.log(data);
|
|
|
+ obj.shopInfo = data;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 转换字符串为数字
|
|
|
+ moneyNum: function(value) {
|
|
|
+ return +value;
|
|
|
+ },
|
|
|
+ navToProductGoods() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/product/product?id=' + this.goodsObjact.product_id
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取商品信息
|
|
|
+ goodsDetail() {
|
|
|
+ let obj = this;
|
|
|
+ goodsDetail({}, this.goodsid).then(function({
|
|
|
+ data
|
|
|
+ }) {
|
|
|
+ obj.details = data;
|
|
|
+ let goods = data.storeInfo;
|
|
|
+ let store_info = data.system_store // 保存店铺信息
|
|
|
+ console.log(store_info)
|
|
|
+ obj.storeObjact = store_info
|
|
|
+ obj.goodsObjact = goods;
|
|
|
+ obj.reply = data.reply; //保存评论列表
|
|
|
+ obj.imgList = goods.slider_image; //保存轮播图
|
|
|
+ obj.specList = data.productAttr; //保存分类列表
|
|
|
+ obj.productValue = data.productValue; //保存分类查询数据
|
|
|
+ obj.actionPrice = goods.price; //保存默认选中商品价格
|
|
|
+ obj.actionImage = goods.image_base; //保存默认选中商品价格
|
|
|
+ obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
|
|
|
+ obj.shopId = data.mer_id; //保存商店id
|
|
|
+ if (obj.shopId > 0) {
|
|
|
+ obj.getShoping();
|
|
|
+ }
|
|
|
+ // #ifdef H5
|
|
|
+ obj.shareDate();
|
|
|
+ obj.IndexShare()
|
|
|
+ // #endif
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // #ifdef H5
|
|
|
+ // 加载微信html5页面分享方法
|
|
|
+ shareDate() {
|
|
|
+ let obj = this;
|
|
|
+ // 保存分享人id链接
|
|
|
+ let url = window.location.href + '&spread=' + this.userInfo.uid;
|
|
|
+ // 判断是否微信浏览器
|
|
|
+ let bool = uni.getStorageSync('weichatBrowser') || '';
|
|
|
+ if (bool) {
|
|
|
+ // 过滤微信强制添加的链接地址
|
|
|
+ url = url.replace(/[\?,&]from=singlemessage/g, '');
|
|
|
+ let data = {
|
|
|
+ link: url, // 分享链接
|
|
|
+ imgUrl: obj.goodsObjact.image, // 分享图标
|
|
|
+ desc: obj.goodsObjact.store_info,
|
|
|
+ title: obj.goodsObjact.store_name,
|
|
|
+ success: function(e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ weixindata(data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
+ // 购买数量变化
|
|
|
+ numberChange(e) {
|
|
|
+ this.goodsNumber = e.number;
|
|
|
+ },
|
|
|
+ //规格弹窗开关
|
|
|
+ toggleSpec(str) {
|
|
|
+ if (this.specClass === 'show') {
|
|
|
+ this.specClass = 'hide';
|
|
|
+ setTimeout(() => {
|
|
|
+ this.specClass = 'none';
|
|
|
+ }, 250);
|
|
|
+ } else if (this.specClass === 'none') {
|
|
|
+ this.specClass = 'show';
|
|
|
+ }
|
|
|
+ // 保存当前购买类型
|
|
|
+ this.type = str;
|
|
|
+ },
|
|
|
+ //选择规格
|
|
|
+ selectSpec(item, arr, ind) {
|
|
|
+ arr.attr_value.forEach(function(e) {
|
|
|
+ e.check = false;
|
|
|
+ });
|
|
|
+ item.check = true;
|
|
|
+ this.specSelected[ind] = item.attr;
|
|
|
+ let str = this.specSelected.join(',');
|
|
|
+ this.specSelectedName = this.specSelected.join(' ');
|
|
|
+ if (this.productValue[str]) {
|
|
|
+ let data = this.productValue[str];
|
|
|
+ this.actionPrice = data.price;
|
|
|
+ this.goodsNumberMax = data.stock;
|
|
|
+ this.actionImage = data.image;
|
|
|
+ this.uniqueId = data.unique;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //分享
|
|
|
+ share() {
|
|
|
+ this.$refs.share.toggleMask();
|
|
|
},
|
|
|
- detype: '1',// 1为积分商品 2为兑换券商品
|
|
|
- };
|
|
|
- },
|
|
|
- async onLoad(options) {
|
|
|
- let obj = this;
|
|
|
- if(options.detype) {
|
|
|
- obj.detype = options.detype
|
|
|
- }
|
|
|
- //保存商品id
|
|
|
- this.goodsid = options.id;
|
|
|
- // 判断有无人邀请
|
|
|
- if (options.spread) {
|
|
|
- // 存储邀请人
|
|
|
- uni.setStorageSync('spread', options.spread);
|
|
|
- }
|
|
|
- // 判断是否为秒杀商品
|
|
|
- if (options.type == 1) {
|
|
|
- // 保存商品类型
|
|
|
- this.goodsType = 1;
|
|
|
- // 保存结束时间
|
|
|
- this.seckillObj.stopTime = options.stoptime;
|
|
|
- // 获取当前时间毫秒数
|
|
|
- let stoptime = options.stoptime * 1000;
|
|
|
- // 获取当前时间
|
|
|
- let acitonTime = new Date();
|
|
|
- // 判断当前时间是否大于结束时间
|
|
|
- if (acitonTime.getTime() > stoptime) {
|
|
|
- // 当前秒杀时间已经结束
|
|
|
- this.seckillObj.stop = true;
|
|
|
- } else {
|
|
|
- // 计算倒计时
|
|
|
- this.timeComputed(stoptime, this.seckillObj);
|
|
|
- }
|
|
|
- this.seckillGoods();
|
|
|
- return;
|
|
|
- }
|
|
|
- if (options.type == 2) {
|
|
|
- // 保存当前拼团商品类型
|
|
|
- this.goodsType = 2;
|
|
|
- // 家在数据
|
|
|
- this.groupGoods();
|
|
|
- return;
|
|
|
- }
|
|
|
- if (this.goodsType == 0) {
|
|
|
- // 加载普通商品详情
|
|
|
- this.goodsDetail();
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // #ifdef H5
|
|
|
- ...mapState(['weichatObj', 'baseURL', 'urlFile']),
|
|
|
- ...mapState('user', ['userInfo'])
|
|
|
- // #endif
|
|
|
- },
|
|
|
- methods: {
|
|
|
- navTo(url) {
|
|
|
- uni.navigateTo({
|
|
|
- url
|
|
|
- });
|
|
|
- },
|
|
|
- //获取商店信息
|
|
|
- getShoping() {
|
|
|
- let obj = this;
|
|
|
- getShoping({
|
|
|
- mer_id: this.shopId
|
|
|
- })
|
|
|
- .then(function({ data }) {
|
|
|
- console.log(data);
|
|
|
- obj.shopInfo = data;
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- },
|
|
|
- // 转换字符串为数字
|
|
|
- moneyNum: function(value) {
|
|
|
- return +value;
|
|
|
- },
|
|
|
- navToProductGoods() {
|
|
|
- uni.redirectTo({
|
|
|
- url: '/pages/product/product?id=' + this.goodsObjact.product_id
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取商品信息
|
|
|
- goodsDetail() {
|
|
|
- let obj = this;
|
|
|
- goodsDetail({}, this.goodsid).then(function({ data }) {
|
|
|
- obj.details = data;
|
|
|
- let goods = data.storeInfo;
|
|
|
- let store_info = data.system_store// 保存店铺信息
|
|
|
- console.log(store_info)
|
|
|
- obj.storeObjact = store_info
|
|
|
- obj.goodsObjact = goods;
|
|
|
- obj.reply = data.reply; //保存评论列表
|
|
|
- obj.imgList = goods.slider_image; //保存轮播图
|
|
|
- obj.specList = data.productAttr; //保存分类列表
|
|
|
- obj.productValue = data.productValue; //保存分类查询数据
|
|
|
- obj.actionPrice = goods.price; //保存默认选中商品价格
|
|
|
- obj.actionImage = goods.image_base; //保存默认选中商品价格
|
|
|
- obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
|
|
|
- obj.shopId = data.mer_id; //保存商店id
|
|
|
- if (obj.shopId > 0) {
|
|
|
- obj.getShoping();
|
|
|
- }
|
|
|
- // #ifdef H5
|
|
|
- obj.shareDate();
|
|
|
- // #endif
|
|
|
- });
|
|
|
- },
|
|
|
- // #ifdef H5
|
|
|
- // 加载微信html5页面分享方法
|
|
|
- shareDate() {
|
|
|
- let obj = this;
|
|
|
- // 保存分享人id链接
|
|
|
- let url = window.location.href + '&spread=' + this.userInfo.uid;
|
|
|
- // 判断是否微信浏览器
|
|
|
- let bool = uni.getStorageSync('weichatBrowser') || '';
|
|
|
- if (bool) {
|
|
|
- // 过滤微信强制添加的链接地址
|
|
|
- url = url.replace(/[\?,&]from=singlemessage/g, '');
|
|
|
- let data = {
|
|
|
- link: url, // 分享链接
|
|
|
- imgUrl: obj.goodsObjact.image, // 分享图标
|
|
|
- desc: obj.goodsObjact.store_info,
|
|
|
- title: obj.goodsObjact.store_name,
|
|
|
- success: function(e) {
|
|
|
- console.log(e);
|
|
|
- }
|
|
|
- };
|
|
|
- weixindata(data);
|
|
|
- }
|
|
|
- },
|
|
|
- // #endif
|
|
|
- // 购买数量变化
|
|
|
- numberChange(e) {
|
|
|
- this.goodsNumber = e.number;
|
|
|
- },
|
|
|
- //规格弹窗开关
|
|
|
- toggleSpec(str) {
|
|
|
- if (this.specClass === 'show') {
|
|
|
- this.specClass = 'hide';
|
|
|
- setTimeout(() => {
|
|
|
- this.specClass = 'none';
|
|
|
- }, 250);
|
|
|
- } else if (this.specClass === 'none') {
|
|
|
- this.specClass = 'show';
|
|
|
- }
|
|
|
- // 保存当前购买类型
|
|
|
- this.type = str;
|
|
|
- },
|
|
|
- //选择规格
|
|
|
- selectSpec(item, arr, ind) {
|
|
|
- arr.attr_value.forEach(function(e) {
|
|
|
- e.check = false;
|
|
|
- });
|
|
|
- item.check = true;
|
|
|
- this.specSelected[ind] = item.attr;
|
|
|
- let str = this.specSelected.join(',');
|
|
|
- this.specSelectedName = this.specSelected.join(' ');
|
|
|
- if (this.productValue[str]) {
|
|
|
- let data = this.productValue[str];
|
|
|
- this.actionPrice = data.price;
|
|
|
- this.goodsNumberMax = data.stock;
|
|
|
- this.actionImage = data.image;
|
|
|
- this.uniqueId = data.unique;
|
|
|
- }
|
|
|
- },
|
|
|
- //分享
|
|
|
- share() {
|
|
|
- this.$refs.share.toggleMask();
|
|
|
- },
|
|
|
- //收藏
|
|
|
- toFavorite(item) {
|
|
|
- let obj = this;
|
|
|
- item.userCollect = !item.userCollect;
|
|
|
- if (!item.userCollect) {
|
|
|
- collectDel({ id: obj.goodsid, category: 'product' }).then(function(e) {
|
|
|
- uni.showToast({
|
|
|
- title: '成功取消收藏',
|
|
|
- type: 'top',
|
|
|
- duration: 1500
|
|
|
- });
|
|
|
- });
|
|
|
- } else {
|
|
|
- collectAdd({ id: obj.goodsid, category: 'product' }).then(function(e) {
|
|
|
- uni.showToast({
|
|
|
- title: '成功加入收藏',
|
|
|
- type: 'top',
|
|
|
- duration: 1500
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // 立即购买
|
|
|
- buy() {
|
|
|
- let obj = this;
|
|
|
- let data = {
|
|
|
- cartNum: obj.goodsNumber, //商品数量
|
|
|
- uniqueId: obj.uniqueId, //商品标签
|
|
|
- new: '1', //商品是否新增加到购物车1为不加入0为加入
|
|
|
- mer_id: obj.shopId,
|
|
|
- is_consumer: 1,
|
|
|
- };
|
|
|
- if (obj.type == 2) {
|
|
|
- data.new = 0;
|
|
|
- }
|
|
|
- if (obj.goodsType == 0) {
|
|
|
- data.productId = obj.goodsid; //商品编号
|
|
|
- }
|
|
|
- // 判断是否为秒杀商品
|
|
|
- if (obj.goodsType == 1) {
|
|
|
- data.secKillId = obj.goodsid; //秒杀商品编号
|
|
|
- data.productId = obj.goodsObjact.product_id; //商品编号
|
|
|
- // 判断是否秒杀已经结束
|
|
|
- if (obj.seckillObj.stop) {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '当前活动已经结束',
|
|
|
- showCancel: false
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- // 判断是否为拼团商品
|
|
|
- if (obj.goodsType == 2) {
|
|
|
- data.combinationId = obj.goodsid; //拼团编号
|
|
|
- data.productId = obj.goodsObjact.product_id; //商品编号
|
|
|
- }
|
|
|
- cartAdd(data)
|
|
|
- .then(function({ data }) {
|
|
|
- if (obj.type == 1) {
|
|
|
- // 跳转到支付页
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/order/createOrder?id=' + data.cartId + '&goodsType=' + obj.goodsType + '&consumer=1'
|
|
|
- });
|
|
|
- }
|
|
|
- if (obj.type == 2) {
|
|
|
- uni.showToast({
|
|
|
- title: '成功加入购物车',
|
|
|
- type: 'top',
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- obj.toggleSpec();
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- },
|
|
|
- stopPrevent() {}
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-page {
|
|
|
- background: $page-color-base;
|
|
|
-}
|
|
|
-//秒杀底部高度
|
|
|
-.seckillBottom {
|
|
|
- height: 110rpx;
|
|
|
-}
|
|
|
-// 文章页底部高度撑开
|
|
|
-.contentBottomHeight {
|
|
|
- height: 110rpx;
|
|
|
-}
|
|
|
-//默认商品底部高度
|
|
|
-.goodsBottom {
|
|
|
- height: 160rpx;
|
|
|
-}
|
|
|
-.iconenter {
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: #888;
|
|
|
-}
|
|
|
-.carousel {
|
|
|
- /* #ifdef APP-PLUS */
|
|
|
- padding-top: var(--status-bar-height);
|
|
|
- /* #endif */
|
|
|
- height: 722rpx;
|
|
|
- position: relative;
|
|
|
- swiper {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .image-wrapper {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .swiper-item {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-content: center;
|
|
|
- // height: 750rpx;
|
|
|
- height: 710rpx;
|
|
|
- overflow: hidden;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-// 秒杀
|
|
|
-.seckill-box-title {
|
|
|
- background: linear-gradient(90deg, rgba(239, 78, 81, 1) 0%, rgba(244, 113, 59, 1) 100%) !important;
|
|
|
- .price,
|
|
|
- .price-tip,
|
|
|
- .timeStop,
|
|
|
- .m-price {
|
|
|
- color: #ffffff !important;
|
|
|
- }
|
|
|
- .price-tip {
|
|
|
- font-size: $font-base;
|
|
|
- }
|
|
|
- .price {
|
|
|
- font-size: 45rpx !important;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .timeStop {
|
|
|
- }
|
|
|
-}
|
|
|
-// 底部拼团、秒杀支付按钮
|
|
|
-.goods-pay-box {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 95;
|
|
|
- width: 750rpx;
|
|
|
- height: 100rpx;
|
|
|
- line-height: 1;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-lg;
|
|
|
- .bgLine {
|
|
|
- background: linear-gradient(90deg, rgba(239, 78, 81, 1) 0%, rgba(244, 113, 59, 1) 100%);
|
|
|
- }
|
|
|
- // 拼团支付按钮
|
|
|
- .goods-pay {
|
|
|
- display: flex;
|
|
|
- align-content: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: center;
|
|
|
- .goods-buttom,
|
|
|
- .goods-buttom-money {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .goods-buttom-money {
|
|
|
- font-size: $font-base;
|
|
|
- }
|
|
|
- }
|
|
|
- .goods-pay-stop,
|
|
|
- .goods-pay {
|
|
|
- padding: 15rpx 0;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .goods-pay-stop {
|
|
|
- background: $color-gray;
|
|
|
- line-height: 70rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-/* 标题简介 */
|
|
|
-.introduce-section {
|
|
|
- background: #fff;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- .title {
|
|
|
- font-size: 32rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- }
|
|
|
- .price-box {
|
|
|
- display: flex;
|
|
|
- align-items: baseline;
|
|
|
- height: 64rpx;
|
|
|
- padding: 10rpx 0;
|
|
|
- font-size: 26rpx;
|
|
|
- color: $uni-color-primary;
|
|
|
- image {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
+ //收藏
|
|
|
+ toFavorite(item) {
|
|
|
+ let obj = this;
|
|
|
+ item.userCollect = !item.userCollect;
|
|
|
+ if (!item.userCollect) {
|
|
|
+ collectDel({
|
|
|
+ id: obj.goodsid,
|
|
|
+ category: 'product'
|
|
|
+ }).then(function(e) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '成功取消收藏',
|
|
|
+ type: 'top',
|
|
|
+ duration: 1500
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ collectAdd({
|
|
|
+ id: obj.goodsid,
|
|
|
+ category: 'product'
|
|
|
+ }).then(function(e) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '成功加入收藏',
|
|
|
+ type: 'top',
|
|
|
+ duration: 1500
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 立即购买
|
|
|
+ buy() {
|
|
|
+ let obj = this;
|
|
|
+ let data = {
|
|
|
+ cartNum: obj.goodsNumber, //商品数量
|
|
|
+ uniqueId: obj.uniqueId, //商品标签
|
|
|
+ new: '1', //商品是否新增加到购物车1为不加入0为加入
|
|
|
+ mer_id: obj.shopId,
|
|
|
+ is_consumer: 1,
|
|
|
+ };
|
|
|
+ if (obj.type == 2) {
|
|
|
+ data.new = 0;
|
|
|
+ }
|
|
|
+ if (obj.goodsType == 0) {
|
|
|
+ data.productId = obj.goodsid; //商品编号
|
|
|
+ }
|
|
|
+ // 判断是否为秒杀商品
|
|
|
+ if (obj.goodsType == 1) {
|
|
|
+ data.secKillId = obj.goodsid; //秒杀商品编号
|
|
|
+ data.productId = obj.goodsObjact.product_id; //商品编号
|
|
|
+ // 判断是否秒杀已经结束
|
|
|
+ if (obj.seckillObj.stop) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '当前活动已经结束',
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 判断是否为拼团商品
|
|
|
+ if (obj.goodsType == 2) {
|
|
|
+ data.combinationId = obj.goodsid; //拼团编号
|
|
|
+ data.productId = obj.goodsObjact.product_id; //商品编号
|
|
|
+ }
|
|
|
+ cartAdd(data)
|
|
|
+ .then(function({
|
|
|
+ data
|
|
|
+ }) {
|
|
|
+ if (obj.type == 1) {
|
|
|
+ // 跳转到支付页
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/order/createOrder?id=' + data.cartId + '&goodsType=' + obj
|
|
|
+ .goodsType + '&consumer=1'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (obj.type == 2) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '成功加入购物车',
|
|
|
+ type: 'top',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ obj.toggleSpec();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ stopPrevent() {}
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ background: $page-color-base;
|
|
|
+ }
|
|
|
+
|
|
|
+ //秒杀底部高度
|
|
|
+ .seckillBottom {
|
|
|
+ height: 110rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 文章页底部高度撑开
|
|
|
+ .contentBottomHeight {
|
|
|
+ height: 110rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ //默认商品底部高度
|
|
|
+ .goodsBottom {
|
|
|
+ height: 160rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconenter {
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: #888;
|
|
|
+ }
|
|
|
+
|
|
|
+ .carousel {
|
|
|
+ /* #ifdef APP-PLUS */
|
|
|
+ padding-top: var(--status-bar-height);
|
|
|
+ /* #endif */
|
|
|
+ height: 722rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ swiper {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: center;
|
|
|
+ // height: 750rpx;
|
|
|
+ height: 710rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 秒杀
|
|
|
+ .seckill-box-title {
|
|
|
+ background: linear-gradient(90deg, rgba(239, 78, 81, 1) 0%, rgba(244, 113, 59, 1) 100%) !important;
|
|
|
+
|
|
|
+ .price,
|
|
|
+ .price-tip,
|
|
|
+ .timeStop,
|
|
|
+ .m-price {
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-tip {
|
|
|
+ font-size: $font-base;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 45rpx !important;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeStop {}
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部拼团、秒杀支付按钮
|
|
|
+ .goods-pay-box {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 95;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 1;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-lg;
|
|
|
+
|
|
|
+ .bgLine {
|
|
|
+ background: linear-gradient(90deg, rgba(239, 78, 81, 1) 0%, rgba(244, 113, 59, 1) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 拼团支付按钮
|
|
|
+ .goods-pay {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .goods-buttom,
|
|
|
+ .goods-buttom-money {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-buttom-money {
|
|
|
+ font-size: $font-base;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-pay-stop,
|
|
|
+ .goods-pay {
|
|
|
+ padding: 15rpx 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
- .jftit {
|
|
|
- padding-left: 4rpx;
|
|
|
- font-size: 23rpx;
|
|
|
+
|
|
|
+ .goods-pay-stop {
|
|
|
+ background: $color-gray;
|
|
|
+ line-height: 70rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 标题简介 */
|
|
|
+ .introduce-section {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ height: 64rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: $uni-color-primary;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jftit {
|
|
|
+ padding-left: 4rpx;
|
|
|
+ font-size: 23rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF6F0F;
|
|
|
+ }
|
|
|
+
|
|
|
+ .old-price {
|
|
|
+ padding-left: 8rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 45rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #FF6F0F;
|
|
|
- }
|
|
|
- .old-price {
|
|
|
- padding-left: 8rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
+ // font-size: $font-lg + 2rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .m-price {
|
|
|
+ margin: 0 12rpx;
|
|
|
+ color: $font-color-light;
|
|
|
text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- .price {
|
|
|
- font-size: 45rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #FF6F0F;
|
|
|
- // font-size: $font-lg + 2rpx;
|
|
|
- }
|
|
|
- .m-price {
|
|
|
- margin: 0 12rpx;
|
|
|
- color: $font-color-light;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- .coupon-tip {
|
|
|
- align-items: center;
|
|
|
- padding: 4rpx 10rpx;
|
|
|
- background: $uni-color-primary;
|
|
|
- font-size: $font-sm;
|
|
|
- color: #fff;
|
|
|
- border-radius: 6rpx;
|
|
|
- line-height: 1;
|
|
|
- transform: translateY(-4rpx);
|
|
|
- }
|
|
|
- .bot-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 50rpx;
|
|
|
- font-size: $font-sm;
|
|
|
- color: $font-color-light;
|
|
|
- text {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-/* 分享 */
|
|
|
-.share-section {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: $font-color-base;
|
|
|
- background: linear-gradient(left, #fdf5f6, #fbebf6);
|
|
|
- padding: 12rpx 30rpx;
|
|
|
- .share-icon {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 70rpx;
|
|
|
- height: 30rpx;
|
|
|
- line-height: 1;
|
|
|
- border: 1px solid $uni-color-primary;
|
|
|
- border-radius: 4rpx;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 22rpx;
|
|
|
- color: $uni-color-primary;
|
|
|
- &:after {
|
|
|
- content: '';
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- border-radius: 50%;
|
|
|
- left: -20rpx;
|
|
|
- top: -12rpx;
|
|
|
- position: absolute;
|
|
|
- background: $uni-color-primary;
|
|
|
- }
|
|
|
- }
|
|
|
- .iconfavorfill {
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- font-size: 24rpx;
|
|
|
- margin-left: 2rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- color: #fff;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
- .tit {
|
|
|
- font-size: $font-base;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- .iconprompt {
|
|
|
- padding: 10rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
- .share-btn {
|
|
|
- flex: 1;
|
|
|
- text-align: right;
|
|
|
- font-size: $font-sm;
|
|
|
- color: $uni-color-primary;
|
|
|
- }
|
|
|
- .iconenter {
|
|
|
- font-size: $font-sm;
|
|
|
- margin-left: 4rpx;
|
|
|
- color: $uni-color-primary;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.c-list {
|
|
|
- margin-top: 20rpx;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: $font-color-base;
|
|
|
- background: #fff;
|
|
|
- .c-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .tit {
|
|
|
- width: 140rpx;
|
|
|
- }
|
|
|
- .con {
|
|
|
- flex: 1;
|
|
|
- color: $font-color-dark;
|
|
|
- .selected-text {
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .bz-list {
|
|
|
- height: 40rpx;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- text {
|
|
|
- display: inline-block;
|
|
|
- margin-right: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .con-list {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- color: $font-color-dark;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- .red {
|
|
|
- color: $uni-color-primary;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 评价 */
|
|
|
-.eva-section {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- background: #fff;
|
|
|
- margin-top: 16rpx;
|
|
|
- .e-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 70rpx;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: $font-color-light;
|
|
|
- .tit {
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- margin-right: 4rpx;
|
|
|
- }
|
|
|
- .tip {
|
|
|
- flex: 1;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .iconenter {
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.eva-box {
|
|
|
- display: flex;
|
|
|
- padding: 20rpx 0;
|
|
|
- .portrait {
|
|
|
- flex-shrink: 0;
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- border-radius: 100px;
|
|
|
- }
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- font-size: $font-base;
|
|
|
- color: $font-color-base;
|
|
|
- padding-left: 26rpx;
|
|
|
- .con {
|
|
|
- font-size: $font-base;
|
|
|
- color: $font-color-dark;
|
|
|
- padding: 20rpx 0;
|
|
|
- }
|
|
|
- .bot {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: $font-sm;
|
|
|
- color: $font-color-light;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.eva-boxs {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- padding: 10px 28rpx;
|
|
|
- background: #f4f4f4;
|
|
|
- border-radius: 12rpx;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: #333;
|
|
|
- .portrait {
|
|
|
- flex-shrink: 0;
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- border-radius: 100px;
|
|
|
- }
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- font-size: $font-base;
|
|
|
- color: $font-color-base;
|
|
|
- .con {
|
|
|
- font-size: $font-base;
|
|
|
- color: $font-color-dark;
|
|
|
- }
|
|
|
- .bot {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: $font-sm;
|
|
|
- color: $font-color-light;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-/* 详情 */
|
|
|
-.detail-desc {
|
|
|
- background: #fff;
|
|
|
- margin-top: 16rpx;
|
|
|
- /deep/ img {
|
|
|
- max-width: 100% !important;
|
|
|
- display: inline !important;
|
|
|
- }
|
|
|
- /deep/ div {
|
|
|
- max-width: 100% !important;
|
|
|
- }
|
|
|
- .d-header {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 80rpx;
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- text {
|
|
|
- padding: 0 20rpx;
|
|
|
- background: #fff;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- &:after {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 300rpx;
|
|
|
- height: 0;
|
|
|
- content: '';
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 规格选择弹窗 */
|
|
|
-.attr-content {
|
|
|
- padding: 10rpx 30rpx;
|
|
|
- .a-t {
|
|
|
- display: flex;
|
|
|
- image {
|
|
|
- width: 170rpx;
|
|
|
- height: 170rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- margin-top: -40rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding-left: 24rpx;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: $font-color-base;
|
|
|
- line-height: 42rpx;
|
|
|
- .good-name {
|
|
|
- padding-top: 20rpx;
|
|
|
- max-width: 320rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #1D2023;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-tip {
|
|
|
+ align-items: center;
|
|
|
+ padding: 4rpx 10rpx;
|
|
|
+ background: $uni-color-primary;
|
|
|
+ font-size: $font-sm;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ line-height: 1;
|
|
|
+ transform: translateY(-4rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .bot-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 50rpx;
|
|
|
+ font-size: $font-sm;
|
|
|
+ color: $font-color-light;
|
|
|
+
|
|
|
+ text {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 分享 */
|
|
|
+ .share-section {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: $font-color-base;
|
|
|
+ background: linear-gradient(left, #fdf5f6, #fbebf6);
|
|
|
+ padding: 12rpx 30rpx;
|
|
|
+
|
|
|
+ .share-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 70rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ line-height: 1;
|
|
|
+ border: 1px solid $uni-color-primary;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: $uni-color-primary;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ left: -20rpx;
|
|
|
+ top: -12rpx;
|
|
|
+ position: absolute;
|
|
|
+ background: $uni-color-primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfavorfill {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-left: 2rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ font-size: $font-base;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconprompt {
|
|
|
+ padding: 10rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-btn {
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ font-size: $font-sm;
|
|
|
+ color: $uni-color-primary;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconenter {
|
|
|
+ font-size: $font-sm;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ color: $uni-color-primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .c-list {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: $font-sm + 2rpx;
|
|
|
+ color: $font-color-base;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .c-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ width: 140rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con {
|
|
|
+ flex: 1;
|
|
|
+ color: $font-color-dark;
|
|
|
+
|
|
|
+ .selected-text {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bz-list {
|
|
|
+ height: 40rpx;
|
|
|
+ font-size: $font-sm + 2rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+
|
|
|
+ text {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .con-list {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ color: $font-color-dark;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: $uni-color-primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 评价 */
|
|
|
+ .eva-section {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 16rpx;
|
|
|
+
|
|
|
+ .e-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 70rpx;
|
|
|
+ font-size: $font-sm + 2rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconenter {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .eva-box {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 0;
|
|
|
+
|
|
|
+ .portrait {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: $font-base;
|
|
|
+ color: $font-color-base;
|
|
|
+ padding-left: 26rpx;
|
|
|
+
|
|
|
+ .con {
|
|
|
+ font-size: $font-base;
|
|
|
+ color: $font-color-dark;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: $font-sm;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .eva-boxs {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 10px 28rpx;
|
|
|
+ background: #f4f4f4;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ font-size: $font-sm + 2rpx;
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ .portrait {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: $font-base;
|
|
|
+ color: $font-color-base;
|
|
|
+
|
|
|
+ .con {
|
|
|
+ font-size: $font-base;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: $font-sm;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 详情 */
|
|
|
+ .detail-desc {
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 16rpx;
|
|
|
+
|
|
|
+ /deep/ img {
|
|
|
+ max-width: 100% !important;
|
|
|
+ display: inline !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ div {
|
|
|
+ max-width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .d-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 300rpx;
|
|
|
+ height: 0;
|
|
|
+ content: '';
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 规格选择弹窗 */
|
|
|
+ .attr-content {
|
|
|
+ padding: 10rpx 30rpx;
|
|
|
+
|
|
|
+ .a-t {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 170rpx;
|
|
|
+ height: 170rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-top: -40rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ font-size: $font-sm + 2rpx;
|
|
|
+ color: $font-color-base;
|
|
|
line-height: 42rpx;
|
|
|
- margin-bottom: 15rpx;
|
|
|
- }
|
|
|
- .price {
|
|
|
- font-size: 60rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #FF6F0F;
|
|
|
- // font-size: $font-lg;
|
|
|
- // color: $uni-color-primary;
|
|
|
- // margin-bottom: 10rpx;
|
|
|
- image {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .selected-text {
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .attr-list {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: $font-color-base;
|
|
|
- padding-top: 30rpx;
|
|
|
- padding-left: 10rpx;
|
|
|
- }
|
|
|
- .item-list {
|
|
|
- padding: 20rpx 0 0;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- text {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: #eee;
|
|
|
- margin-right: 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- border-radius: 100rpx;
|
|
|
- min-width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- font-size: $font-base;
|
|
|
- color: $font-color-dark;
|
|
|
- }
|
|
|
- .selected {
|
|
|
- background: #fbebee;
|
|
|
- color: $uni-color-primary;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 弹出层 */
|
|
|
-.popup {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 99;
|
|
|
-
|
|
|
- &.show {
|
|
|
- display: block;
|
|
|
- .mask {
|
|
|
- animation: showPopup 0.2s linear both;
|
|
|
- }
|
|
|
- .layer {
|
|
|
- animation: showLayer 0.2s linear both;
|
|
|
- }
|
|
|
- }
|
|
|
- &.hide {
|
|
|
- .mask {
|
|
|
- animation: hidePopup 0.2s linear both;
|
|
|
- }
|
|
|
- .layer {
|
|
|
- animation: hideLayer 0.2s linear both;
|
|
|
- }
|
|
|
- }
|
|
|
- &.none {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .mask {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 1;
|
|
|
- background-color: rgba(0, 0, 0, 0.4);
|
|
|
- }
|
|
|
- .layer {
|
|
|
- position: fixed;
|
|
|
- z-index: 99;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- min-height: 30vh;
|
|
|
- border-radius: 10rpx 10rpx 0 0;
|
|
|
- background-color: #fff;
|
|
|
- .btn {
|
|
|
- height: 66rpx;
|
|
|
- line-height: 66rpx;
|
|
|
- border-radius: 100rpx;
|
|
|
- // background: $uni-color-primary;
|
|
|
- background: $base-color;
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: #fff;
|
|
|
- margin: 30rpx auto 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes showPopup {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes hidePopup {
|
|
|
- 0% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes showLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(120%);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(0%);
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes hideLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(120%);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 底部操作菜单 */
|
|
|
-.page-bottom {
|
|
|
- position: fixed;
|
|
|
- left: 0rpx;
|
|
|
- bottom: 0rpx;
|
|
|
- z-index: 95;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 750rpx;
|
|
|
- height: 98rpx;
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
- box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
|
|
|
- // border-radius: 16rpx;
|
|
|
- .p-b-btn {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: $font-sm;
|
|
|
- color: $font-color-base;
|
|
|
- width: 100rpx;
|
|
|
- height: 98rpx;
|
|
|
- .iconfont {
|
|
|
- font-size: 40rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- color: $font-color-light;
|
|
|
- }
|
|
|
- &.active,
|
|
|
- &.active .iconfont {
|
|
|
- color: $uni-color-primary;
|
|
|
- }
|
|
|
- .icon-fenxiang2 {
|
|
|
- font-size: 42rpx;
|
|
|
- transform: translateY(-2rpx);
|
|
|
- }
|
|
|
- .iconlikefill {
|
|
|
- font-size: 46rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .action-btn-group {
|
|
|
- display: flex;
|
|
|
- height: 98rpx;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- .action-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 750rpx;
|
|
|
- height: 100%;
|
|
|
- font-size: $font-base;
|
|
|
- padding: 0;
|
|
|
- border-radius: 0;
|
|
|
- // background: transparent;
|
|
|
- background: #31332D;
|
|
|
- &.buy-now-btn {
|
|
|
- background-color: #303e49;
|
|
|
- }
|
|
|
- &.add-cart-btn {
|
|
|
- background-color: $base-color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-// 商店头
|
|
|
-.shop-box {
|
|
|
- background-color: #ffffff;
|
|
|
- margin-top: 20rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- padding: 20rpx;
|
|
|
- .shop-img {
|
|
|
- border-radius: 300rpx;
|
|
|
- height: 80rpx;
|
|
|
- width: 80rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
- .shop-button {
|
|
|
- border-radius: 100rpx;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- color: $color-red;
|
|
|
- border: 1px solid $color-red;
|
|
|
- font-size: $font-lg;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
+ .good-name {
|
|
|
+ padding-top: 20rpx;
|
|
|
+ max-width: 320rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1D2023;
|
|
|
+ line-height: 42rpx;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 60rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF6F0F;
|
|
|
+
|
|
|
+ // font-size: $font-lg;
|
|
|
+ // color: $uni-color-primary;
|
|
|
+ // margin-bottom: 10rpx;
|
|
|
+ image {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .selected-text {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .attr-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: $font-color-base;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-list {
|
|
|
+ padding: 20rpx 0 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #eee;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ min-width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ font-size: $font-base;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selected {
|
|
|
+ background: #fbebee;
|
|
|
+ color: $uni-color-primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 弹出层 */
|
|
|
+ .popup {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ &.show {
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ .mask {
|
|
|
+ animation: showPopup 0.2s linear both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer {
|
|
|
+ animation: showLayer 0.2s linear both;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.hide {
|
|
|
+ .mask {
|
|
|
+ animation: hidePopup 0.2s linear both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer {
|
|
|
+ animation: hideLayer 0.2s linear both;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.none {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 30vh;
|
|
|
+ border-radius: 10rpx 10rpx 0 0;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ height: 66rpx;
|
|
|
+ line-height: 66rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ // background: $uni-color-primary;
|
|
|
+ background: $base-color;
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: #fff;
|
|
|
+ margin: 30rpx auto 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes showPopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes hidePopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes showLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(120%);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes hideLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateY(120%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部操作菜单 */
|
|
|
+ .page-bottom {
|
|
|
+ position: fixed;
|
|
|
+ left: 0rpx;
|
|
|
+ bottom: 0rpx;
|
|
|
+ z-index: 95;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+ box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
|
|
|
+
|
|
|
+ // border-radius: 16rpx;
|
|
|
+ .p-b-btn {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: $font-sm;
|
|
|
+ color: $font-color-base;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 98rpx;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 40rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active,
|
|
|
+ &.active .iconfont {
|
|
|
+ color: $uni-color-primary;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-fenxiang2 {
|
|
|
+ font-size: 42rpx;
|
|
|
+ transform: translateY(-2rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconlikefill {
|
|
|
+ font-size: 46rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-btn-group {
|
|
|
+ display: flex;
|
|
|
+ height: 98rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 100%;
|
|
|
+ font-size: $font-base;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ // background: transparent;
|
|
|
+ background: #31332D;
|
|
|
+
|
|
|
+ &.buy-now-btn {
|
|
|
+ background-color: #303e49;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.add-cart-btn {
|
|
|
+ background-color: $base-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 商店头
|
|
|
+ .shop-box {
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .shop-img {
|
|
|
+ border-radius: 300rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ width: 80rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-button {
|
|
|
+ border-radius: 100rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ color: $color-red;
|
|
|
+ border: 1px solid $color-red;
|
|
|
+ font-size: $font-lg;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
-
|
