1252 lines
34 KiB
Vue
1252 lines
34 KiB
Vue
|
<template>
|
|||
|
|
<view class="main" v-if="isDone">
|
|||
|
|
<view class="header flex flex-align-center bg-w"
|
|||
|
|
:style="{ 'padding-top': statusBarHeight + wxBtnHeight + 'px' }">
|
|||
|
|
<text class="iconfont icon" @tap="$navigateBack()"></text>
|
|||
|
|
<v-tabs :tabs="tabs" v-show="!isFruit" lineHeight="6rpx" activeColor="#FA5151" lineColor="#FA5151"
|
|||
|
|
:bold="false" :scroll="false" fontSize="30rpx" v-model="current" @change="tabsChange"></v-tabs>
|
|||
|
|
<v-tabs :tabs="fruittabs" v-show="isFruit" lineHeight="6rpx" activeColor="#FA5151" lineColor="#FA5151"
|
|||
|
|
:bold="false" :scroll="false" fontSize="30rpx" v-model="current" @change="tabsChange"></v-tabs>
|
|||
|
|
<view class="iconfont icon" @click="showActive"></view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 商品详情 -->
|
|||
|
|
<block v-if="(isFruit && current == 0) || !isFruit">
|
|||
|
|
<swiper class="swiper" :style="{ 'marginTop': statusBarHeight + 50 + 'px' }" :indicator-dots="true"
|
|||
|
|
:autoplay="true">
|
|||
|
|
<swiper-item v-for="(item, i) in swiperList" :key="i">
|
|||
|
|
<image :src="item" mode="" class="img" @click="swiperViewPhotos(i)"></image>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
<view class="price flex flex-between" v-if="goodsInfo.goodsType === 2">
|
|||
|
|
<text class="price-text" style="color: aliceblue;">
|
|||
|
|
<text class="text-xs">¥</text> {{ rangePrice }}
|
|||
|
|
<!-- <text class="text-del color-b9 font26 del">¥{{goodsInfo.originalPrice}}</text> -->
|
|||
|
|
</text>
|
|||
|
|
<view class="flex flex-column flex-align-end">
|
|||
|
|
<view class="flex flex-align-center" style="margin-bottom: 6rpx;">
|
|||
|
|
<image :src="staticUrl + 'home/boutique.png'" mode="" class="icon"></image>
|
|||
|
|
<text class="font38 blod " style="color: aliceblue;">精 品 推 荐</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-align-center color-w">
|
|||
|
|
<text class="iconfont font34"></text>
|
|||
|
|
<text class="font26">该商品支持配送上门</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="price flex flex-between" v-if="goodsInfo.goodsType === 12">
|
|||
|
|
<text class="price-text" style="color: aliceblue;">
|
|||
|
|
<text class="text-xs">¥</text> {{ rangePrice }}
|
|||
|
|
</text>
|
|||
|
|
<view class="flex flex-column flex-align-end font24 color-w">
|
|||
|
|
<view class="flex flex-column align-center" v-if="time">
|
|||
|
|
<text>距结束还剩</text>
|
|||
|
|
<text class="text-cen">{{ time }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text v-else>秒杀已结束</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="new flex flex-between" v-else>
|
|||
|
|
<text class="price-text" v-if="qvyu != 3">
|
|||
|
|
<text class="text-xs">¥</text> {{ rangePrice }}
|
|||
|
|
<!-- <text class="text-del color-b9 font26" style="margin-left: 10rpx;">¥{{goodsInfo.originalPrice}}</text> -->
|
|||
|
|
</text>
|
|||
|
|
<text class="blod color-red font40" v-else>
|
|||
|
|
绿色积分：{{ greenText }} + ¥{{ rmbText }}
|
|||
|
|
<!-- <text class="text-del color-b9 font26" style="margin-left: 10rpx;">¥{{goodsInfo.originalPrice}}</text> -->
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 普通商品才可以使用优惠券 -->
|
|||
|
|
<view class="flex flex-between d-list"
|
|||
|
|
v-if="goodsInfo.goodsType == 1 && goodsInfo.discountList && goodsInfo.discountList.length > 0 && false"
|
|||
|
|
@click="collectCoupons(goodsInfo.discountList)">
|
|||
|
|
<view class="flex flex-align-center">
|
|||
|
|
<block v-for="(d, i) in goodsInfo.discountList" :key="i">
|
|||
|
|
<text class="d-item" v-if="i < 3">满{{ d.useStandardAmount }}减{{ d.discountAmount }}</text>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-align-center color-red">
|
|||
|
|
<text class="font28">领券</text>
|
|||
|
|
<text class="iconfont font34" style="margin-top: 4rpx;"></text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="wrap">
|
|||
|
|
<view class="name flex flex-align-center flex-between">
|
|||
|
|
<text class="line line-2">
|
|||
|
|
<text class="bg-base tips" v-if="goodsInfo.goodsType === 2">精品</text>
|
|||
|
|
<text class="bg-base tips" v-else-if="goodsInfo.goodsType === 11">新人大礼</text>
|
|||
|
|
<text class="bg-base tips" v-else-if="goodsInfo.goodsType === 12">秒杀</text>
|
|||
|
|
<text class="bg-base tips" v-else-if="goodsInfo.goodsType === 13">特价</text>
|
|||
|
|
<text class="bg-base tips" v-else-if="goodsInfo.goodsType === 14">拼团</text>
|
|||
|
|
<text class="bg-base tips" v-else-if="goodsInfo.goodsType === 15">积分</text>
|
|||
|
|
<text class="bg-base tips" v-else-if="goodsInfo.isNewProducts === 2">新品</text>
|
|||
|
|
{{ goodsInfo.titleName }}
|
|||
|
|
|
|||
|
|
</text>
|
|||
|
|
<view class="bg" v-if="goodsInfo.xfz">
|
|||
|
|
比例 {{ goodsInfo.ratio }}
|
|||
|
|
</view>
|
|||
|
|
<!-- <text class="line line-2" :class="{'txt':goodsInfo.goodsType === 2||goodsInfo.isNewProducts === 2}">{{goodsInfo.titleName}}</text> -->
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="font28 color-b9 line">{{goodsInfo.subTitle}}</view> -->
|
|||
|
|
<view class="flex flex-between color-b9 font28 other">
|
|||
|
|
<!-- <text>积分：{{ (parseInt((goodsInfo.bonusIntegral/100*goodsInfo.wholesalePrice)*100)/100).toFixed(2) }}</text> -->
|
|||
|
|
<view class="bg" v-if="goodsInfo.xfz">
|
|||
|
|
比例 {{ goodsInfo.xfz }}
|
|||
|
|
</view>
|
|||
|
|
<!-- <text>积分：{{ goodsInfo.bonusIntegral }}%</text> -->
|
|||
|
|
<text>已售：{{ goodsInfo.totalSales }}</text>
|
|||
|
|
<!-- <text v-if="dkUserFlag">附近的配送员：{{ dkUserSize }}</text> -->
|
|||
|
|
<text>浏览：{{ goodsInfo.visitBrowse }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="bg-w servies flex flex-align-center font28 color-b9">
|
|||
|
|
<text>服务说明：</text>
|
|||
|
|
<view class="flex flex-align-center">
|
|||
|
|
<text v-if="goodsInfo.deliveryPlatform == 1"><text class="b red">送</text>配送上门</text>
|
|||
|
|
<text v-if="goodsInfo.deliveryBusiness == 1"><text class="b blue">商</text>商家送货</text>
|
|||
|
|
<text v-if="goodsInfo.deliveryExpress == 1"><text class="b green">寄</text>快递邮寄</text>
|
|||
|
|
<text v-if="goodsInfo.deliveryNo == 1"><text class="b green">无</text>无实物，支付成功后自动确认收货</text>
|
|||
|
|
<!-- <text><text class="b blue">正</text>正品保证</text>
|
|||
|
|
<text v-if="goodsInfo.deliveryNo === 2 || goodsInfo.deliveryBusiness == 1 || goodsInfo.deliveryPlatform === 1">
|
|||
|
|
<text class="b green">送</text>配送上门
|
|||
|
|
</text> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="reward" v-if="goodsInfo.goodsRewardLevelRule">
|
|||
|
|
<text>大礼详情：</text>
|
|||
|
|
<view class="reward-wrap">
|
|||
|
|
<view class="reward-wrap-cell" v-if="goodsInfo.goodsRewardLevelRule.cardsByPlatform">
|
|||
|
|
<text class="iconfont iconchoiceO icon"></text>
|
|||
|
|
<text>{{ goodsInfo.goodsRewardLevelRule.cardsByPlatform.name }}¥{{
|
|||
|
|
goodsInfo.goodsRewardLevelRule.cardsByPlatform.amount }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="reward-wrap-cell">
|
|||
|
|
<text class="iconfont iconchoiceO icon"></text>
|
|||
|
|
<text>升级为{{ goodsInfo.goodsRewardLevelRule.roleManagerLevel | filterManager }}掌柜</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="reward-wrap-cell">
|
|||
|
|
<text class="iconfont iconchoiceO icon"></text>
|
|||
|
|
<text>购买当前商品时自身必须为{{ goodsInfo.goodsRewardLevelRule.limitRoleManagerLevel | filterManager }}掌柜级别</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="reward-wrap-cell">
|
|||
|
|
<text class="iconfont iconchoiceO icon"></text>
|
|||
|
|
<text v-if="goodsInfo.goodsRewardLevelRule.repeatBuyNumber === -1">不限制购买数量</text>
|
|||
|
|
<text v-else>人均限购{{ goodsInfo.goodsRewardLevelRule.repeatBuyNumber }}件</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="group" v-if="goodsInfo.goodsType === 14 && groupList.length > 0">
|
|||
|
|
<view class="title" @click="showSpellPopup()">
|
|||
|
|
<text class="font28">正在拼单，可直接参与</text>
|
|||
|
|
<text class="color-b9 font26">查看全部</text>
|
|||
|
|
</view>
|
|||
|
|
<block v-for="(item, i) in groupList" :key="i">
|
|||
|
|
<view class="flex flex-between group-item" v-if="item.groupTrueNumber > 0">
|
|||
|
|
<image :src="item.groupUserInfo.headPortrait" mode="" class="img"></image>
|
|||
|
|
<text class="line font28 flex-grow"
|
|||
|
|
style="width: 200rpx;">{{ item.groupUserInfo.nickname }}</text>
|
|||
|
|
<text class="font26 color-b6" style="margin-left: 10rpx;">还差{{ item.groupNumber -
|
|||
|
|
item.groupTrueNumber }}人拼成</text>
|
|||
|
|
<button type="primary" size="mini" class="bg-base btn"
|
|||
|
|
@click="addCartOrBuy(1, item)">去拼单</button>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
<view class="issue bg-w" @tap="goEvaluate" v-if="!isFruit">
|
|||
|
|
<view class="title flex flex-between">
|
|||
|
|
<text class="font34">商品评论({{ goodsInfo.totalEvaluate }})</text>
|
|||
|
|
<view class="flex flex-align-center color-red">
|
|||
|
|
<text class="font28">查看全部</text>
|
|||
|
|
<text class="iconfont font38"></text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="list">
|
|||
|
|
<block v-if="goodsInfo.totalEvaluate > 0">
|
|||
|
|
<block v-for="(item, i) in commentList" :key="i">
|
|||
|
|
<view class="list-item" v-if="i < 2">
|
|||
|
|
<view class="flex flex-align-center">
|
|||
|
|
<image :src="filterImg(item.evaluateUserInfo.headPortrait, 1)" mode=""
|
|||
|
|
class="avatar"></image>
|
|||
|
|
<view class="flex-grow flex flex-column">
|
|||
|
|
<text class="color-red font26">{{ item.evaluateUserInfo.nickname }}</text>
|
|||
|
|
<text class="font26 color-b9">{{ item.createTime }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<text class="line line-2 font30 txt">{{ item.evaluateGoodsComment }}</text>
|
|||
|
|
<view class="imgs"
|
|||
|
|
v-if="item.evaluateGoodsImages && item.evaluateGoodsImages.length > 0">
|
|||
|
|
<image :src="filterImg(img, 5)" mode="" class="pic"
|
|||
|
|
v-for="(img, index) in item.evaluateGoodsImages" :key="index"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</block>
|
|||
|
|
<text v-else class="font30 color-b6">暂无评论</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-between store bg-w" v-if="!isFruit">
|
|||
|
|
<view>
|
|||
|
|
<image :src="filterImg(storeInfo.logoImage, 1)" mode="" class="img"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-column" style="width: 380rpx;">
|
|||
|
|
<view class="flex flex-align-center">
|
|||
|
|
<text class="blod font34">{{ storeInfo.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="font26 color-b6 line line-2">{{ storeInfo.introduce }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="color-red btn font32" @tap="goStore">进店</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="detail">
|
|||
|
|
<view class="flex flex-center title">
|
|||
|
|
<text class="xian">—————</text>
|
|||
|
|
<text class="font26 color-b9">商品详情</text>
|
|||
|
|
<text class="xian">—————</text>
|
|||
|
|
</view>
|
|||
|
|
<rich-text :nodes="goodsInfo.detailsTextHtml"></rich-text>
|
|||
|
|
<view v-if="goodsInfo.detailsImgList">
|
|||
|
|
<image style="width: 750rpx; display: block;" :src="item"
|
|||
|
|
v-for="(item, i) in goodsInfo.detailsImgList" :key="i" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="fixed">
|
|||
|
|
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="navClick"
|
|||
|
|
@buttonClick="buttonClick" />
|
|||
|
|
</view>
|
|||
|
|
<view class="fixed-height"></view>
|
|||
|
|
<uni-popup ref="popup" type="bottom">
|
|||
|
|
<view class="popup bg-w">
|
|||
|
|
<view class="flex">
|
|||
|
|
<image :src="mainImage" mode="" class="img" @click="skuViewPhoto(mainImage)"></image>
|
|||
|
|
<text class="flex-grow color-red font44 blod">¥{{ money }}</text>
|
|||
|
|
<text class="iconfont font48 color-b9" @click="closePopup"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-column norms">
|
|||
|
|
<text class="color-b6 font30">商品规格</text>
|
|||
|
|
<view class="flex flex-align-center list" v-if="skuList">
|
|||
|
|
<block v-for="(sku, i) in skuList" :key="i">
|
|||
|
|
<text class="list-item" :class="{ 'active': sku.select }"
|
|||
|
|
v-if="sku.skuStock && sku.skuStock > 0"
|
|||
|
|
@click="skuSelect(i)">{{ sku.skuName }}</text>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-between mar" v-if="qvyu != 5">
|
|||
|
|
<text class="color-b6 font30">购买数量</text>
|
|||
|
|
<uni-number-box :min="1" :max="numberMax" :value="number"
|
|||
|
|
@change="numberChange"></uni-number-box>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-between mar" v-else>
|
|||
|
|
<text class="color-b6 font30">购买数量（最多只能购买一件）</text>
|
|||
|
|
<uni-number-box :min="1" :max="1" value="1" @change="numberChange"></uni-number-box>
|
|||
|
|
</view>
|
|||
|
|
<button type="primary" class="bg-base btn"
|
|||
|
|
@click="addCartOrBuy(btnClickIndex, null)">{{ btnTxt }}</button>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
<!-- 优惠明细 -->
|
|||
|
|
<uni-popup ref="discountPopup" type="bottom">
|
|||
|
|
<view class="discount">
|
|||
|
|
<text class="font32 color-red">优惠明细</text>
|
|||
|
|
<view class="d-list">
|
|||
|
|
<block v-for="(item, i) in discountList" :key="i">
|
|||
|
|
<view class="d-list-item" v-if="item.status === 1">
|
|||
|
|
<view class="left">
|
|||
|
|
<text class="font26 tip">¥</text>
|
|||
|
|
<text class="font46 blod">{{ item.discountAmount }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="right flex flex-column flex-grow">
|
|||
|
|
<text class="font28">{{ item.titleName }}</text>
|
|||
|
|
<text class="font30">满{{ item.useStandardAmount }}可用</text>
|
|||
|
|
<text
|
|||
|
|
class="font26">{{ item.expireTimeDay > 0 ? `有效期${item.expireTimeDay}天` : '永久有效' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="btn" v-if="item.number === 0">已领完</text>
|
|||
|
|
<text class="btn" v-else
|
|||
|
|
@tap.stop="onReceive(i)">{{ item.userReceiveFlag ? '立即领取' : '已领取' }}</text>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
<button type="primary" class="bg-base close" @click="closePopup">关闭</button>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
<!-- 拼团 -->
|
|||
|
|
<uni-popup ref="spellPopup" type="center">
|
|||
|
|
<view class="spell">
|
|||
|
|
<text class="title">正在拼单</text>
|
|||
|
|
<scroll-view scroll-y="true" style="height: 600rpx;" @scrolltolower="getGroupList()">
|
|||
|
|
<block v-for="(item, i) in groupList" :key="i">
|
|||
|
|
<view class="flex flex-between spell-item" v-if="item.groupTrueNumber > 0">
|
|||
|
|
<image :src="item.groupUserInfo.headPortrait" mode="" class="img"></image>
|
|||
|
|
<text class="line font28 flex-grow"
|
|||
|
|
style="width: 200rpx;">{{ item.groupUserInfo.nickname }}</text>
|
|||
|
|
<text class="font26 color-b6" style="margin-left: 10rpx;">还差{{ item.groupNumber -
|
|||
|
|
item.groupTrueNumber }}人拼成</text>
|
|||
|
|
<button type="primary" size="mini" class="bg-base btn"
|
|||
|
|
@click="addCartOrBuy(1, item)">去拼单</button>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
</block>
|
|||
|
|
<block v-if="isFruit && current == 1">
|
|||
|
|
<view :style="{height: tabHeight + 'px'}"></view>
|
|||
|
|
<FruitManage ref="FruitManage" />
|
|||
|
|
</block>
|
|||
|
|
<block v-if="isFruit && current == 2">
|
|||
|
|
<view :style="{height: tabHeight + 'px'}"></view>
|
|||
|
|
<FruitAward ref="FruitAward"></FruitAward>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
mapState
|
|||
|
|
} from "vuex"
|
|||
|
|
import {
|
|||
|
|
config
|
|||
|
|
} from '@/config/config.js';
|
|||
|
|
import url from "@/common/http/url.js"
|
|||
|
|
import publics from "@/common/utils/public.js"
|
|||
|
|
import {
|
|||
|
|
sendRequestJson
|
|||
|
|
} from "@/common/http/api.js"
|
|||
|
|
import uniGoodsNav from './components/uni-goods-nav/uni-goods-nav.vue'
|
|||
|
|
import vTabs from "@/components/v-tabs/v-tabs.vue"
|
|||
|
|
import uniPopup from "@/components/uni-popup/uni-popup.vue"
|
|||
|
|
import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
|
|||
|
|
import FruitManage from '@/pages/home/fruitCard.vue'
|
|||
|
|
import FruitAward from '@/pages/home/award.vue'
|
|||
|
|
let timer = null
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
vTabs,
|
|||
|
|
uniGoodsNav,
|
|||
|
|
uniPopup,
|
|||
|
|
uniNumberBox,
|
|||
|
|
FruitManage,
|
|||
|
|
FruitAward
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isFruit: false,
|
|||
|
|
staticUrl: this.$staticUrl,
|
|||
|
|
isDone: false,
|
|||
|
|
statusBarHeight: getApp().statusBarHeight,
|
|||
|
|
current: 0,
|
|||
|
|
tabs: ["商品", "评论", "详情"],
|
|||
|
|
fruittabs: ["购买", "领取", "奖励"],
|
|||
|
|
options: [{
|
|||
|
|
text: "店铺",
|
|||
|
|
icon: "\ue616",
|
|||
|
|
iconColor: "#333333"
|
|||
|
|
},
|
|||
|
|
// { text: "客服", icon: "\ue608", iconColor: "#333333" },
|
|||
|
|
{
|
|||
|
|
text: "收藏",
|
|||
|
|
icon: "\ue615",
|
|||
|
|
iconColor: "#333333"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
buttonGroup: [{
|
|||
|
|
text: "立即购买",
|
|||
|
|
color: "#fff",
|
|||
|
|
backgroundColor: "#F44646"
|
|||
|
|
}],
|
|||
|
|
btnTxt: "立即购买",
|
|||
|
|
btnClickIndex: null,
|
|||
|
|
myAddressData: {},
|
|||
|
|
id: "",
|
|||
|
|
swiperList: [],
|
|||
|
|
commentList: [],
|
|||
|
|
skuList: [],
|
|||
|
|
skuObj: {},
|
|||
|
|
mainImage: "",
|
|||
|
|
money: "",
|
|||
|
|
goodsInfo: {},
|
|||
|
|
storeInfo: {},
|
|||
|
|
isCollection: false, // 收藏
|
|||
|
|
distanceStoreFlag: false, // 是否支持配送上门
|
|||
|
|
dkUserFlag: false, // 附近是否有代理
|
|||
|
|
dkUserSize: 0, // 附近代理人数
|
|||
|
|
detailTop: 0, // 详情距离顶部的距离
|
|||
|
|
issueTop: 0, // 评论距离顶部的距离
|
|||
|
|
storeType: 0,
|
|||
|
|
number: 1,
|
|||
|
|
numberMax: 99,
|
|||
|
|
discountList: [],
|
|||
|
|
rangePrice: "",
|
|||
|
|
time: null,
|
|||
|
|
groupList: [],
|
|||
|
|
wxBtnHeight: 0,
|
|||
|
|
isInit: true,
|
|||
|
|
qvyu: null,
|
|||
|
|
greenText: null,
|
|||
|
|
rmbText: null,
|
|||
|
|
dpi: uni.getStorageSync('dpi'),
|
|||
|
|
tabHeight: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState(["userInfo"])
|
|||
|
|
},
|
|||
|
|
filters: {
|
|||
|
|
filterManager(val) {
|
|||
|
|
switch (val) {
|
|||
|
|
case 0:
|
|||
|
|
return "不是";
|
|||
|
|
case 1:
|
|||
|
|
return "初级";
|
|||
|
|
case 2:
|
|||
|
|
return "中级";
|
|||
|
|
case 3:
|
|||
|
|
return "高级";
|
|||
|
|
default:
|
|||
|
|
return "其他";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
console.log('6666');
|
|||
|
|
if (this.isFruit) {
|
|||
|
|
if (this.current == 1) this.$refs.FruitManage.loadMore()
|
|||
|
|
else if (this.current == 2) this.$refs.FruitAward.loadMore()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(opt) {
|
|||
|
|
this.qvyu = opt.qvyu || null;
|
|||
|
|
this.greenText = opt.greenText || null;
|
|||
|
|
this.rmbText = opt.rmbText || null;
|
|||
|
|
this.tabHeight = uni.getStorageSync('system').statusBarHeight + 100 / this.dpi
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
this.wxBtnHeight = wx.getMenuButtonBoundingClientRect().height
|
|||
|
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|||
|
|
// #endif
|
|||
|
|
let addressData = publics.getMyaddressLngLat()
|
|||
|
|
if (addressData) {
|
|||
|
|
this.myAddressData = JSON.parse(addressData)
|
|||
|
|
} else {
|
|||
|
|
// this.$msg("请先设置您当前的位置")
|
|||
|
|
// this.openMap()
|
|||
|
|
}
|
|||
|
|
let id = opt.id
|
|||
|
|
this.id = id
|
|||
|
|
if (id == 642) {
|
|||
|
|
this.isFruit = true
|
|||
|
|
}
|
|||
|
|
if (id) {
|
|||
|
|
this.getCommentList()
|
|||
|
|
} else {
|
|||
|
|
this.$msg("查找不到该商品信息,可能该商品已下架");
|
|||
|
|
this.$navigateBack(1, 1000);
|
|||
|
|
}
|
|||
|
|
this.getScrollTop()
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
// 初始化底部按钮
|
|||
|
|
this.buttonGroup = [{
|
|||
|
|
text: "立即购买",
|
|||
|
|
color: "#fff",
|
|||
|
|
backgroundColor: "#F44646"
|
|||
|
|
}]
|
|||
|
|
this.getGoodsDetail()
|
|||
|
|
},
|
|||
|
|
onHide() {
|
|||
|
|
this.clear()
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
this.clear()
|
|||
|
|
},
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
if (!this.isFruit) {
|
|||
|
|
if (e.scrollTop > 0 && e.scrollTop < this.issueTop) {
|
|||
|
|
this.current = 0
|
|||
|
|
}
|
|||
|
|
if (e.scrollTop > this.issueTop && e.scrollTop < this.detailTop) {
|
|||
|
|
this.current = 1
|
|||
|
|
}
|
|||
|
|
if (e.scrollTop > this.detailTop) {
|
|||
|
|
this.current = 2
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
filterImg(img, type) {
|
|||
|
|
return publics.filterImgUrl(img, type)
|
|||
|
|
},
|
|||
|
|
getScrollTop() {
|
|||
|
|
let _this = this
|
|||
|
|
setTimeout(() => {
|
|||
|
|
_this.$getRect(".detail").then(res => {
|
|||
|
|
if (res) {
|
|||
|
|
_this.detailTop = res.top - 60
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
_this.$getRect(".issue").then(res => {
|
|||
|
|
if (res) {
|
|||
|
|
_this.issueTop = res.top - 60
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}, 500)
|
|||
|
|
},
|
|||
|
|
getGoodsDetail() {
|
|||
|
|
let params = {
|
|||
|
|
goodsId: this.id,
|
|||
|
|
lng: this.myAddressData.longitude || "0", //经度
|
|||
|
|
lat: this.myAddressData.latitude || "0" //纬度
|
|||
|
|
}
|
|||
|
|
this.$http("GET", url.goods.goodsDetail, params).then(res => {
|
|||
|
|
this.goodsInfo = res.data
|
|||
|
|
this.storeInfo = res.data.storeInfo
|
|||
|
|
this.swiperList = this.goodsInfo.topImgList
|
|||
|
|
this.skuList = this.goodsInfo.skuList
|
|||
|
|
this.mainImage = this.goodsInfo.mainImage
|
|||
|
|
this.isDone = true
|
|||
|
|
// 是否收藏
|
|||
|
|
this.isCollection = res.data.isCollection
|
|||
|
|
if (this.isCollection) {
|
|||
|
|
this.options[1].icon = "\ue614"
|
|||
|
|
}
|
|||
|
|
// 是否具备进货资格(当前商品为精品商品，并且自己为配送员, 并且开启精品商品进货)
|
|||
|
|
if (res.data.goodsType === 2 && this.userInfo.distributorIsOpen === 1 && res.data
|
|||
|
|
.boutiqueBuyingStatus === 1) {
|
|||
|
|
// this.btnTxt = "进货"
|
|||
|
|
this.buttonGroup.push({
|
|||
|
|
text: "进货",
|
|||
|
|
color: "#fff",
|
|||
|
|
backgroundColor: "#764de8"
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 幅度价格
|
|||
|
|
this.rangePrice = this.goodsInfo.wholesalePrice
|
|||
|
|
if (res.data.skuList) {
|
|||
|
|
let skuList = res.data.skuList
|
|||
|
|
if (skuList.length > 1) {
|
|||
|
|
let maxArray = skuList.sort((a, b) => {
|
|||
|
|
return b.skuPrice - a.skuPrice
|
|||
|
|
})
|
|||
|
|
let maxPrice = maxArray[0].skuPrice
|
|||
|
|
let minPrice = maxArray[maxArray.length - 1].skuPrice
|
|||
|
|
this.rangePrice = minPrice + '-' + maxPrice
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.money = this.rangePrice
|
|||
|
|
if (res.data.goodsType === 12 && res.data.homeGoodsSeckill) {
|
|||
|
|
//this.countDown(res.data.homeGoodsSeckill.dueDateTime)
|
|||
|
|
this.time = this.countTime(res.data.homeGoodsSeckill.dueDateTime);
|
|||
|
|
}
|
|||
|
|
if (res.data.goodsType === 14) {
|
|||
|
|
this.btnTxt = "发起拼单"
|
|||
|
|
this.buttonGroup[0].text = this.btnTxt
|
|||
|
|
// this.buttonGroup.push({text: this.btnTxt, color: "#fff", backgroundColor: "#764de8"})
|
|||
|
|
this.getGroupList()
|
|||
|
|
}
|
|||
|
|
this.skuSelect(0)
|
|||
|
|
}).catch((err) => {
|
|||
|
|
console.log('err*********', err)
|
|||
|
|
this.$msg(err.msg)
|
|||
|
|
this.$navigateBack(1, 1000);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
countTime(dueDateTime) {
|
|||
|
|
let timeReplace = dueDateTime.replace(/\.|\-/g, '/')
|
|||
|
|
|
|||
|
|
let startTime = new Date(); // 开始时间
|
|||
|
|
let endTime = new Date(timeReplace); // 结束时间
|
|||
|
|
let usedTime = endTime - startTime; // 相差的毫秒数
|
|||
|
|
let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数
|
|||
|
|
let leavel = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的时间
|
|||
|
|
let hours = Math.floor(leavel / (3600 * 1000)); // 计算剩余的小时数
|
|||
|
|
let leavel2 = leavel % (3600 * 1000); // 计算剩余小时后剩余的毫秒数
|
|||
|
|
let minutes = Math.floor(leavel2 / (60 * 1000)); // 计算剩余的分钟数
|
|||
|
|
|
|||
|
|
let timer = days + '天' + hours + '时' + minutes + '分';
|
|||
|
|
return timer;
|
|||
|
|
},
|
|||
|
|
countDown(time) {
|
|||
|
|
if (timer) {
|
|||
|
|
this.clear()
|
|||
|
|
}
|
|||
|
|
timer = setInterval(() => {
|
|||
|
|
let timeReplace = time.replace(/\.|\-/g, '/')
|
|||
|
|
let oldTime = new Date(timeReplace).getTime()
|
|||
|
|
let newTime = new Date().getTime()
|
|||
|
|
let leftTime = parseInt(oldTime - newTime)
|
|||
|
|
if (leftTime >= 0) {
|
|||
|
|
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
|
|||
|
|
let m = Math.floor(leftTime / 1000 / 60 % 60);
|
|||
|
|
let s = Math.floor(leftTime / 1000 % 60);
|
|||
|
|
|
|||
|
|
function checkTime(i) {
|
|||
|
|
if (i < 10) {
|
|||
|
|
i = "0" + i;
|
|||
|
|
}
|
|||
|
|
return i;
|
|||
|
|
}
|
|||
|
|
h = checkTime(h)
|
|||
|
|
m = checkTime(m)
|
|||
|
|
s = checkTime(s)
|
|||
|
|
this.time = `${h}:${m}:${s}`
|
|||
|
|
} else {
|
|||
|
|
this.clear()
|
|||
|
|
}
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
clear() {
|
|||
|
|
if (timer) {
|
|||
|
|
clearInterval(timer)
|
|||
|
|
timer = null
|
|||
|
|
this.time = null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getCommentList() {
|
|||
|
|
this.$http("GET", url.goods.getEvaluateList, {
|
|||
|
|
goodsId: this.id,
|
|||
|
|
pageNum: 0
|
|||
|
|
}).then(res => {
|
|||
|
|
let list = res.data.data
|
|||
|
|
list.map(v => {
|
|||
|
|
if (v.sysStaticResources) {
|
|||
|
|
v.evaluateGoodsImages = []
|
|||
|
|
v.evaluateDistributionImages = []
|
|||
|
|
v.sysStaticResources.forEach(k => {
|
|||
|
|
if (k.type === 20) {
|
|||
|
|
v.evaluateGoodsImages.push(k.ossUrl)
|
|||
|
|
}
|
|||
|
|
if (k.type === 21) {
|
|||
|
|
v.evaluateDistributionImages.push(k.ossUrl)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.commentList = list
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getGroupList() {
|
|||
|
|
this.$http("GET", url.goods.getGroupById, {
|
|||
|
|
goodsId: this.id,
|
|||
|
|
pageNum: this.groupList.length
|
|||
|
|
}).then(res => {
|
|||
|
|
this.groupList = this.groupList.concat(res.data)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
openMap() {
|
|||
|
|
var _this = this;
|
|||
|
|
uni.chooseLocation({
|
|||
|
|
keyword: "",
|
|||
|
|
success: function(res) {
|
|||
|
|
publics.setMyaddressLngLat(JSON.stringify(res));
|
|||
|
|
//设置地址
|
|||
|
|
_this.myAddressData = res;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
navClick(e) {
|
|||
|
|
if (e.index === 0) {
|
|||
|
|
this.goStore()
|
|||
|
|
}
|
|||
|
|
// else if (e.index === 1) {
|
|||
|
|
// this.$navigateTo("../interaction/im-chat?type=3&&id=" + this.storeInfo.imAccount)
|
|||
|
|
// }
|
|||
|
|
else {
|
|||
|
|
this.isCollection = !this.isCollection
|
|||
|
|
this.options[1].icon = this.isCollection ? "\ue614" : "\ue615"
|
|||
|
|
this.$http("POST", url.goods.collectionGoods, {
|
|||
|
|
goodsId: this.id
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.isCollection = false
|
|||
|
|
this.options[1].icon = this.isCollection ? "\ue614" : "\ue615"
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
buttonClick(e) {
|
|||
|
|
this.btnClickIndex = e.index
|
|||
|
|
this.btnTxt = this.buttonGroup[e.index].text
|
|||
|
|
if (this.goodsInfo.skuList) {
|
|||
|
|
// if (this.goodsInfo.skuList.length === 1) { // 如果sku只有一个，那么默认选中
|
|||
|
|
// this.skuSelect(0)
|
|||
|
|
// }
|
|||
|
|
this.$refs.popup.open()
|
|||
|
|
} else {
|
|||
|
|
this.addCartOrBuy(0, null)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 立即购买 / 进货 / 发起拼单
|
|||
|
|
addCartOrBuy(index, row) {
|
|||
|
|
if (index === 1 && this.goodsInfo.goodsType === 14 && row && row.groupUserInfo.imAccount === this.userInfo
|
|||
|
|
.imAccount) { // 点击自己发起的拼单
|
|||
|
|
return this.$msg("不能拼自己发起的拼单")
|
|||
|
|
}
|
|||
|
|
if (this.goodsInfo.goodsType === 12 && !this.time) { // 如果是限时秒杀商品并且已结束
|
|||
|
|
return this.$msg("该商品秒杀已结束")
|
|||
|
|
}
|
|||
|
|
if (this.userInfo.userStoreId === this.goodsInfo.userStoreId) {
|
|||
|
|
return this.$msg("不能购买自己店铺的商品！");
|
|||
|
|
}
|
|||
|
|
if (JSON.stringify(this.skuObj) === "{}") {
|
|||
|
|
return this.$msg("请选择商品规格");
|
|||
|
|
}
|
|||
|
|
if (this.skuObj.skuStock < 1) {
|
|||
|
|
return this.$msg("库存不足！");
|
|||
|
|
}
|
|||
|
|
let params = {
|
|||
|
|
goodsId: this.id,
|
|||
|
|
number: this.number,
|
|||
|
|
goodsSkuId: this.skuObj.id,
|
|||
|
|
orderType: index === 0 ? this.goodsInfo.goodsType : 3, // 订单类型 1-普通 2-精品 3-进货
|
|||
|
|
groupParentId: 0 //默认拼团id为0，防止传null后台报错
|
|||
|
|
}
|
|||
|
|
if (this.goodsInfo.goodsType === 14) {
|
|||
|
|
params.orderType = this.goodsInfo.goodsType
|
|||
|
|
params.groupParentId = row ? row.id : 0
|
|||
|
|
}
|
|||
|
|
sendRequestJson("GET", url.order.getOrderInfo, params).then(res => {
|
|||
|
|
let data = res.data
|
|||
|
|
data.orderType = params.orderType
|
|||
|
|
uni.setStorageSync("commitOrderData", data)
|
|||
|
|
this.$navigateTo("/pages/order/createOrder")
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
showActive() {
|
|||
|
|
let _this = this
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
itemList: ['举报'],
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.tapIndex === 0) {
|
|||
|
|
_this.$navigateTo("/pages/report/index?type=4&configType=3&id=" + _this.id)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
swiperViewPhotos(i) {
|
|||
|
|
let _this = this
|
|||
|
|
uni.previewImage({
|
|||
|
|
current: i,
|
|||
|
|
urls: _this.swiperList
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
skuViewPhoto(url) {
|
|||
|
|
uni.previewImage({
|
|||
|
|
current: url,
|
|||
|
|
urls: [url]
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
showSpellPopup() {
|
|||
|
|
this.$refs.spellPopup.open()
|
|||
|
|
},
|
|||
|
|
closePopup() {
|
|||
|
|
this.$refs.popup.close()
|
|||
|
|
this.$refs.discountPopup.close()
|
|||
|
|
},
|
|||
|
|
numberChange(val) {
|
|||
|
|
console.log(val)
|
|||
|
|
// if (val > 1 && this.isInit) return this.$msg('最多只能购买一件');
|
|||
|
|
// this.isInit = true
|
|||
|
|
this.number = val
|
|||
|
|
},
|
|||
|
|
skuSelect(i) {
|
|||
|
|
this.skuList.map(v => {
|
|||
|
|
v.select = false
|
|||
|
|
})
|
|||
|
|
this.skuList[i].select = true
|
|||
|
|
this.skuObj = this.skuList[i]
|
|||
|
|
// if (this.skuObj.id == config.binLangSkuId) {
|
|||
|
|
// this.numberMax = config.binLangMax
|
|||
|
|
// } else {
|
|||
|
|
this.numberMax = this.skuList[i].skuStock
|
|||
|
|
// }
|
|||
|
|
this.mainImage = this.skuList[i].mainImage
|
|||
|
|
this.money = this.skuList[i].skuPrice
|
|||
|
|
},
|
|||
|
|
collectCoupons(list) {
|
|||
|
|
this.discountList = list
|
|||
|
|
this.$refs.discountPopup.open()
|
|||
|
|
},
|
|||
|
|
onReceive(index) {
|
|||
|
|
if (!this.discountList[index].userReceiveFlag) return
|
|||
|
|
let discountId = this.discountList[index].id
|
|||
|
|
this.$http("POST", url.user.receiveDiscount, {
|
|||
|
|
discountId: discountId
|
|||
|
|
}).then(res => {
|
|||
|
|
this.$msg("恭喜，抢到了")
|
|||
|
|
this.discountList[index].userReceiveFlag = false
|
|||
|
|
if (this.discountList[index].number !== -1) {
|
|||
|
|
this.discountList[index].number--
|
|||
|
|
}
|
|||
|
|
this.goodsInfo.discountList = this.discountList
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
tabsChange(i) {
|
|||
|
|
this.current = i
|
|||
|
|
if (!this.isFruit) {
|
|||
|
|
if (i === 0) {
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: 0
|
|||
|
|
})
|
|||
|
|
} else if (i === 1) {
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: this.issueTop
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: this.detailTop
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
goEvaluate() {
|
|||
|
|
let data = {
|
|||
|
|
id: this.id,
|
|||
|
|
all: this.goodsInfo.totalEvaluate,
|
|||
|
|
good: this.goodsInfo.evaluateGood,
|
|||
|
|
secondary: this.goodsInfo.evaluateSecondary,
|
|||
|
|
difference: this.goodsInfo.evaluateDifference
|
|||
|
|
}
|
|||
|
|
this.$navigateTo("evaluate?data=" + JSON.stringify(data))
|
|||
|
|
},
|
|||
|
|
goStore() {
|
|||
|
|
this.$navigateTo("store?id=" + this.goodsInfo.userStoreId)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
@import "@/font.css";
|
|||
|
|
|
|||
|
|
.color-red {
|
|||
|
|
color: #E40000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-text {
|
|||
|
|
font-family: 'Product-Sans-Bold';
|
|||
|
|
padding-left: 10rpx;
|
|||
|
|
padding-bottom: 10rpx;
|
|||
|
|
align-items: center !important;
|
|||
|
|
font-size: 70upx;
|
|||
|
|
color: #E40000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg {
|
|||
|
|
padding: 0 10rpx;
|
|||
|
|
background-color: rgba(255, 59, 71, 0.2);
|
|||
|
|
color: #E40000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main {
|
|||
|
|
background-color: #f4f5f6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
padding: 0rpx 30rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 99;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
font-size: 50rpx;
|
|||
|
|
width: 100rpx;
|
|||
|
|
margin-bottom: -10rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper {
|
|||
|
|
// margin-top: 100rpx;
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 700rpx;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
background-color: #E40000;
|
|||
|
|
padding: 20rpx 20rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
|
|||
|
|
.del {
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
width: 56rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.new {
|
|||
|
|
padding: 0rpx 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.d-list {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
|
|||
|
|
.d-item {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #E40000;
|
|||
|
|
background-color: rgba($color: #E40000, $alpha: .3);
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
padding: 4rpx 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wrap {
|
|||
|
|
margin: 0 20rpx;
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
position: relative;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
|
|||
|
|
.tips {
|
|||
|
|
color: white;
|
|||
|
|
font-weight: normal;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
padding: 0 10rpx;
|
|||
|
|
margin-right: 6rpx;
|
|||
|
|
// display: inline-block;
|
|||
|
|
// position: absolute;
|
|||
|
|
// left: 0;
|
|||
|
|
// top: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// .txt{
|
|||
|
|
// text-indent: 2.2em;
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.other {
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.servies {
|
|||
|
|
padding: 26rpx 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.b {
|
|||
|
|
width: 34rpx;
|
|||
|
|
height: 34rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: white;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 34rpx;
|
|||
|
|
display: inline-block;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
margin-right: 6rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blue {
|
|||
|
|
background-color: #007AFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.red {
|
|||
|
|
background-color: #ff342a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.green {
|
|||
|
|
background-color: #00a743;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.reward {
|
|||
|
|
background-color: white;
|
|||
|
|
padding: 26rpx 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
&-wrap {
|
|||
|
|
&-cell {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
color: #E40000;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group {
|
|||
|
|
background-color: white;
|
|||
|
|
padding: 20rpx 20rpx 0;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-item {
|
|||
|
|
border-top: 2rpx solid #EEEEEE;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
margin: 0;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.issue {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
|
|||
|
|
// margin-top: 30rpx;
|
|||
|
|
&-item {
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
border-bottom: 2rpx solid #eee;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
|
|||
|
|
.avatar {
|
|||
|
|
width: 110rpx;
|
|||
|
|
height: 110rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.txt {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.imgs {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
|
|||
|
|
.pic {
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-item:last-child {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.store {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tips {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
padding: 0 10rpx;
|
|||
|
|
font-weight: normal;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
transform: scale(0.9);
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
border: 2rpx solid #E40000;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail {
|
|||
|
|
margin-bottom: 100rpx;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
margin: 20rpx;
|
|||
|
|
|
|||
|
|
.xian {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #cccccc;
|
|||
|
|
margin: 0 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fixed {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fixed-height {
|
|||
|
|
height: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup {
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.norms {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
border-top: 2rpx solid #f6f4f8;
|
|||
|
|
border-bottom: 2rpx solid #f6f4f8;
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
&-item {
|
|||
|
|
color: #555555;
|
|||
|
|
background-color: #F5F5F5;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
padding: 10rpx 20rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
color: #E40000;
|
|||
|
|
background-color: rgba(#E40000, .3);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mar {
|
|||
|
|
margin: 20rpx 0 50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.discount {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 20rpx 20rpx 0 0;
|
|||
|
|
background-color: white;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
.d-list {
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
|
|||
|
|
&-item {
|
|||
|
|
width: 650rpx;
|
|||
|
|
background-color: rgba($color: #E40000, $alpha: .3);
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
color: #E40000;
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
|
|||
|
|
.tip {
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
margin-right: 6rpx;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close {
|
|||
|
|
width: 710rpx;
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spell {
|
|||
|
|
// width: 90%;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #444444;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-item {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
margin: 0;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|