|
|
@@ -0,0 +1,1522 @@
|
|
|
+<template>
|
|
|
+ <view class="content" style="padding-bottom: 144rpx;">
|
|
|
+ <!-- 商品轮播图片 -->
|
|
|
+ <view class="shop-banner" @click="showImg()">
|
|
|
+ <swiper class="swiper" :indicator-dots="false" :circular="true" :autoplay="true" :interval="3000"
|
|
|
+ :duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff"
|
|
|
+ @change="swiperChange">
|
|
|
+ <swiper-item class="swiper-item" v-for="(item,index) in banner" :key="index">
|
|
|
+ <image :src="item" mode="aspectFill"></image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <!-- 底部遮罩 -->
|
|
|
+ <view class="banner-mask"></view>
|
|
|
+ <!-- 数量 -->
|
|
|
+ <view class="num-box">{{ activeBanner }}/{{ banner.length }}</view>
|
|
|
+ </view>
|
|
|
+ <!-- 详细信息 -->
|
|
|
+ <view class="det-info">
|
|
|
+ <view class="price-box">
|
|
|
+ <view class="price">
|
|
|
+ <text class="label" style="color: #FF5C03;">会员价</text>
|
|
|
+ <text class="unit">¥</text>
|
|
|
+ <text class="num">{{product.price}}</text>
|
|
|
+ <text class="label">零售价</text>
|
|
|
+ <text class="old">¥{{product.otPrice}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="share-box">
|
|
|
+ <text class="text">分享</text>
|
|
|
+ <image
|
|
|
+ src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/share1.png"
|
|
|
+ mode=""></image>
|
|
|
+ <button class="share" data-name="shareBtn" open-type="share">分享</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="name-box">
|
|
|
+ <view class="tag" :style="{background:_background(product.productType)}">
|
|
|
+ {{$getDictLabelName("storeProductType",product.productType)}}</view>
|
|
|
+ {{product.commonName&&product.commonName!=='-'?product.commonName:product.productName}}
|
|
|
+ </view>
|
|
|
+ <u-parse class="intro" v-if="product.productInfo!=null" :content="product.productInfo.replace(/\n/g,'<br>')">
|
|
|
+ </u-parse>
|
|
|
+ </view>
|
|
|
+ <view class="other-box">
|
|
|
+ <view class="other-box-item">
|
|
|
+ <view class="label">商品名称</view>
|
|
|
+ <view class="text">{{product.productName||''}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="other-box-item" v-if="!_showTxt">
|
|
|
+ <view class="label">通用名称</view>
|
|
|
+ <view class="text">{{product.commonName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="other-box-item">
|
|
|
+ <view class="label">包装规格</view>
|
|
|
+ <view class="text">{{product.prescribeSpec||'--'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="other-box-item">
|
|
|
+ <view class="label">包装单位</view>
|
|
|
+ <view class="text">{{product.unitName||'--'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="other-box-item">
|
|
|
+ <view class="label">批准文号</view>
|
|
|
+ <view class="text">{{product.drugRegCertNo||'--'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="other-box-item" v-if="!_showTxt">
|
|
|
+ <view class="label">规格</view>
|
|
|
+ <view class="text">{{product.specification||'--'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="other-box-item">
|
|
|
+ <view class="label">商品条码</view>
|
|
|
+ <view class="text">{{product.barCode||'--'}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 购买人数、库存 -->
|
|
|
+ <!-- <view class="inventor">
|
|
|
+ <view class="left">
|
|
|
+ <view class="head-box">
|
|
|
+ <view class="head" v-for="(item,j) in 5" :key="j">
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/head.jpg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="num-box">
|
|
|
+ 已有 <text class="text">{{product.sales}}</text> 人购买
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ 库存 <text class="text">{{product.stock}}{{product.unitName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <text class="text">库存{{product.stock>0?'充足':'售罄'}} </text>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <!-- 功效 -->
|
|
|
+ <view class="effect" v-if="product.instructionManual">
|
|
|
+ <view class="label">{{product.commonName&&product.commonName!=='-'?product.commonName:product.productName}}药品说明书</view>
|
|
|
+ <view :class="product.productType ==2&&isView==0 ? 'hiddenbox':''" style="margin-top: 20rpx;">
|
|
|
+ <u-parse :content="product.instructionManual" :style="{display: 'block'}"></u-parse>
|
|
|
+ </view>
|
|
|
+ <view class="shadowbox" v-if="product.productType ==2&&isView==0">
|
|
|
+ <view class="shadowbox-btn x-ac" @click="handleShow">
|
|
|
+ <text style="margin-right: 10rpx;">点击查看说明书全文</text>
|
|
|
+ <u-icon name="arrow-down" color="#999" size="14"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-popup :show="show" mode="center" :round="10" @close="show=false" :closeOnClickOverlay="false">
|
|
|
+ <view class="popupbox">
|
|
|
+ <view class="popupbox-title">如何查看说明书</view>
|
|
|
+ <view class="popupbox-body">
|
|
|
+ 需要先问诊获得处方后才能查看说明书,请点<text class="confirm" @click="addCart('buy')">问诊开药</text>开处方!
|
|
|
+ </view>
|
|
|
+ <view class="popupbox-footer" @click="show=false">我知道了</view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <!-- 商品评价 -->
|
|
|
+ <view class="det-box evaluate">
|
|
|
+ <view class="title">商品评价({{evaluateTotal}})</view>
|
|
|
+ <view class="evaluate">
|
|
|
+ <evaluateItem v-for="(item,index) in evaluate" :key="index" :item="item"></evaluateItem>
|
|
|
+ <view class="footer-desc" v-if="evaluate&&evaluate.length>0">
|
|
|
+ <text @click="moreEvaluate">查看更多评价</text>
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/arrow_gray.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 图文详情 -->
|
|
|
+ <view class="det-box">
|
|
|
+ <view class="title">图文详情</view>
|
|
|
+ <view class="inner">
|
|
|
+ <u-parse :content="product.description" :tagStyle="tagStyle"></u-parse>
|
|
|
+ </view>
|
|
|
+ <view class="other-box product-other-box" style="margin: 0;padding: 24rpx 0;">
|
|
|
+ <view v-if="_showTxt&&product.medicalRegCertNo">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">【医疗器械注册证编号/备案凭证编号】</text>
|
|
|
+ <text class="text">{{product.medicalRegCertNo}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="_showTxt&&product.prodLicenseNo">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">【生产许可证/备案凭证编号】</text>
|
|
|
+ <text class="text">{{product.prodLicenseNo}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="_showTxt&&product.prodTechReqNo">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">【产品技术要求编号】</text>
|
|
|
+ <text class="text">{{product.prodTechReqNo}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="_showTxt&&product.productStructure">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">【结构及组成】</text>
|
|
|
+ <text class="text">{{product.productStructure}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="product.dosageForm&&!_showTxt">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">【剂型】</text>
|
|
|
+ <text class="text">{{product.dosageForm}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="product.mah">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">{{_showTxt?'【注册人/备案人】':'【上市许可证持有人】'}}</text>
|
|
|
+ <text class="text">{{product.mah}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="product.mahAddress">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">{{_showTxt?'【注册人/备案人地址】':'【上市许可证持有人地址】'}}</text>
|
|
|
+ <text class="text">{{product.mahAddress}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="product.manufacturer">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">【生产企业】</text>
|
|
|
+ <text class="text">{{product.manufacturer}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="product.manufacturerAddress">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">【生产企业地址】</text>
|
|
|
+ <text class="text">{{product.manufacturerAddress}}</text>
|
|
|
+ </view>
|
|
|
+ <template v-if="product.productType !=2||isView==1">
|
|
|
+ <view v-if="product.indications">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">【功能主治/适用范围】</text>
|
|
|
+ <text class="text">{{product.indications}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="product.dosage">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">【用法用量】</text>
|
|
|
+ <text class="text">{{product.dosage}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="product.adverseReactions">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">【不良反应】</text>
|
|
|
+ <text class="text">{{product.adverseReactions}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="product.contraindications">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">{{_showTxt?'【禁忌症】':'【禁忌】'}}</text>
|
|
|
+ <text class="text">{{product.contraindications}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="product.precautions">
|
|
|
+ <text class="label" style="margin-right: 16rpx;">【注意事项】</text>
|
|
|
+ <text class="text">{{product.precautions}}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="storebox" v-if="chooseStore.storeId">
|
|
|
+ <view class="x-bc">
|
|
|
+ <view class="x-f">
|
|
|
+ <image class="logo" :src="chooseStore.logoUrl" mode="aspectFill"></image>
|
|
|
+ <view class="storebox-r" @click="goStoreDetail(chooseStore)">
|
|
|
+ <view class="storename ellipsis2">{{chooseStore.storeName||''}}</view>
|
|
|
+ <!-- <view class="storedesc">24小时营业 销售{{$formatSalesNum(chooseStore.salesCount) }}</view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="storebox-btn" @click="goStoreDetail(chooseStore)">进店</view>
|
|
|
+ </view>
|
|
|
+ <detail :source="'product'" ref="getStoreInfo" :storeInfo="storeInfo"></detail>
|
|
|
+ </view>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <view class="btn-foot">
|
|
|
+ <view class="menu-box">
|
|
|
+ <!-- <view class="item" @click="goHome">
|
|
|
+ <image
|
|
|
+ src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/back_home.png"
|
|
|
+ mode=""></image>
|
|
|
+ <text class="label">首页</text>
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="item" style="position: relative;">
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/consult_small.png" mode=""></image>
|
|
|
+ <text class="label">咨询</text>
|
|
|
+ <button class="contact-btn" open-type="contact"></button>
|
|
|
+ </view> -->
|
|
|
+ <view class="item" @click="navgetTo('./cart')">
|
|
|
+ <view class="img-item">
|
|
|
+ <u-badge type="error" max="99" :value="cartCount" :offset="[-10,-10]"
|
|
|
+ :absolute="true"></u-badge>
|
|
|
+ <image
|
|
|
+ src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/fs/20250929/73574822bab04a86ae77b772b4e28952.png"
|
|
|
+ mode=""></image>
|
|
|
+ </view>
|
|
|
+ <text class="label">购物车</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="btn cart" @click="addCart('cart')">加入购物车</view>
|
|
|
+ <!-- <view class="btn buy" @click="addCart('buy')">{{buyText}}</view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 选择药品规格弹窗 -->
|
|
|
+ <popupBottom ref="popup" :visible.sync="specVisible" title=" " radius="32" maxHeight="1024">
|
|
|
+ <view class="product-spec">
|
|
|
+ <!-- 商品信息 -->
|
|
|
+ <view class="pro-info">
|
|
|
+ <view class="img-box" @click="showImg(productValueSelect.image)">
|
|
|
+ <image
|
|
|
+ :src="productValueSelect.image==null||productValueSelect.image==''?product.image:productValueSelect.image"
|
|
|
+ mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="info-text">
|
|
|
+ <view class="price">
|
|
|
+ <text class="unit">¥</text>
|
|
|
+ <text class="num">{{ productValueSelect.price.toFixed(2) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="desc-box">
|
|
|
+ <text class="text">已选:{{ productValueSelect.sku }}</text>
|
|
|
+ <text class="text">库存{{ productValueSelect.stock?'充足':'售罄' }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 规格 -->
|
|
|
+ <view class="spec-box">
|
|
|
+ <view v-for="(item,index) in attrs">
|
|
|
+ <view class="title">{{item.attrName}}</view>
|
|
|
+ <view class="spec-list">
|
|
|
+ <view v-for="(subItem,subindex) in item.values" :key="subindex"
|
|
|
+ :class="subindex==item.index?'item active':'item'" @click="choseSpec(index,subindex)">
|
|
|
+ {{ subItem }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 数量 -->
|
|
|
+ <view class="price-num">
|
|
|
+ <view class="label">数量</view>
|
|
|
+ <view class="num-box">
|
|
|
+ <view class="img-box" @click="lessNum()">
|
|
|
+ <image v-if="specNum <= 1"
|
|
|
+ src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/jian.png"
|
|
|
+ mode=""></image>
|
|
|
+ <image v-else
|
|
|
+ src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/jian2.png"
|
|
|
+ mode=""></image>
|
|
|
+ </view>
|
|
|
+ <input type="number" @change="changeNum" v-model="specNum" />
|
|
|
+ <view class="img-box" @click="addNum()">
|
|
|
+ <image
|
|
|
+ src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/add.png"
|
|
|
+ mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="sub-btn" @click="submit">确定</view>
|
|
|
+ </view>
|
|
|
+ </popupBottom>
|
|
|
+ <view class="loadding" v-if="loadding==true">
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/logo.png"></image>
|
|
|
+ <text class="text">加载中...</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import detail from '@/components/storeDetail.vue'
|
|
|
+ import {getCartCount,storeDetail} from '@/api/index.js'
|
|
|
+ import {getDicts} from '@/api/common.js'
|
|
|
+ import { getProductDetails, addCart,instructionsViewable } from '@/pages_shopping/api/product.js'
|
|
|
+ import {selectCommentByUser} from '@/api/myStoreOrder.js'
|
|
|
+ import popupBottom from '@/components/px-popup-bottom.vue'
|
|
|
+ import evaluateItem from '@/components/evaluateItem.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ popupBottom,
|
|
|
+ evaluateItem,
|
|
|
+ detail
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loadding: true,
|
|
|
+ buyText: "立即购买",
|
|
|
+ type: null,
|
|
|
+ productValueSelect: {
|
|
|
+ price: 0,
|
|
|
+ },
|
|
|
+ banner: [],
|
|
|
+ productId: null,
|
|
|
+ attrs: [],
|
|
|
+ values: [],
|
|
|
+ product: {
|
|
|
+ price: 0,
|
|
|
+ otPrice: 0,
|
|
|
+ },
|
|
|
+
|
|
|
+ // 当前轮播的图片
|
|
|
+ activeBanner: 1,
|
|
|
+ // 购物车数量
|
|
|
+ cartCount: 0,
|
|
|
+ // 规格弹窗
|
|
|
+ specVisible: false,
|
|
|
+ // 规格数量
|
|
|
+ specNum: 1,
|
|
|
+ chooseStore: {},
|
|
|
+ storeList: [],
|
|
|
+ storeId: '',
|
|
|
+ evaluateTotal: 0,
|
|
|
+ evaluate: [],
|
|
|
+ show: false,
|
|
|
+ isView: 0,
|
|
|
+ storeInfo: {},
|
|
|
+ stockNum: 0,
|
|
|
+ tagStyle: {
|
|
|
+ img: 'display: block;'
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ _background() {
|
|
|
+ //productType: 1:OTC,2:Rx,3:非药品,4:器械
|
|
|
+ return (productType) => {
|
|
|
+ switch (productType) {
|
|
|
+ case 1:
|
|
|
+ return '#37E2EA' // OTC
|
|
|
+ case 2:
|
|
|
+ return 'red' // Rx
|
|
|
+ case 3:
|
|
|
+ return '#2583EB' // 非药品
|
|
|
+ case 4:
|
|
|
+ return '#999' // 器械
|
|
|
+ default:
|
|
|
+ return '#ccc'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ _showTxt() {
|
|
|
+ if(this.product&&this.product.productType) {
|
|
|
+ const name = this.$getDictLabelName("storeProductType",this.product.productType)
|
|
|
+ return name.includes('器械');
|
|
|
+ }else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ if (options.userId != null) {
|
|
|
+ uni.setStorageSync('tuiUserId', options.userId);
|
|
|
+ } else if (options.hasOwnProperty('q') && options.q) {
|
|
|
+ // 通过下面这步解码,可以拿到url的值
|
|
|
+ const url = decodeURIComponent(options.q)
|
|
|
+ this.url = url;
|
|
|
+ // // 对url中携带的参数提取处理
|
|
|
+ const obj = this.$urlToObj(url)
|
|
|
+ uni.setStorageSync('tuiUserId', obj.userId);
|
|
|
+ }
|
|
|
+ this.storeId = options.storeId || '';
|
|
|
+ uni.showShareMenu({
|
|
|
+ withShareTicket: true,
|
|
|
+ //小程序的原生菜单中显示分享按钮,才能够让发送给朋友与分享到朋友圈两个按钮可以点击
|
|
|
+ menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
|
|
|
+ })
|
|
|
+ this.getDicts();
|
|
|
+ this.productId = options.productId;
|
|
|
+ this.$isLogin().then(res => {
|
|
|
+ if (res) {
|
|
|
+ this.getCartCount();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getProductDetails();
|
|
|
+ },
|
|
|
+ //发送给朋友
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ this.$isLogin().then(res => {
|
|
|
+ if (res) {
|
|
|
+ var user = JSON.parse(uni.getStorageSync('userInfo'))
|
|
|
+ return {
|
|
|
+ title: this.commonName&&this.product.commonName!=='-'?this.product.commonName:this.product.productName,
|
|
|
+ path: '/pages_shopping/productDetails?productId=' + this.product.productId + "&userId=" +
|
|
|
+ user.userId,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //分享到朋友圈
|
|
|
+ onShareTimeline(res) {
|
|
|
+ this.$isLogin().then(res => {
|
|
|
+ if (res) {
|
|
|
+ var user = JSON.parse(uni.getStorageSync('userInfo'))
|
|
|
+ return {
|
|
|
+ title: this.commonName&&this.product.commonName!=='-'?this.product.commonName:this.product.productName,
|
|
|
+ query: 'productId=' + this.product.productId + "&userId=" + user.userId, //页面参数
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getStoreInfo() {
|
|
|
+ storeDetail(this.storeId).then(res=>{
|
|
|
+ if(res.code==200) {
|
|
|
+ this.storeInfo =res.data || {}
|
|
|
+ this.storeInfo.doctorList = this.storeInfo.doctorList.map(doctor => {
|
|
|
+ return {
|
|
|
+ ...doctor,
|
|
|
+ // 假设images字段是逗号分隔的图片字符串
|
|
|
+ imagesArray: doctor.practiseImages ?
|
|
|
+ doctor.practiseImages.split(',').map(img => img.trim()).filter(img => img) : []
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.$refs.getStoreInfo.getDescHeight()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleShow() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ instructionsViewable({productId: this.productId}).then(
|
|
|
+ res => {
|
|
|
+ uni.hideLoading()
|
|
|
+ if(res.code==200){
|
|
|
+ this.isView = res.data ? 1 : 0
|
|
|
+ this.show = this.isView == 0
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "请求失败",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ goStoreDetail(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_store/storeIndex?storeId=' + item.storeId
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getDicts: function() {
|
|
|
+ getDicts().then(
|
|
|
+ res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.setStorageSync('dicts', JSON.stringify(res));
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ showImg(img) {
|
|
|
+ if (img != null) {
|
|
|
+ var imgs = [];
|
|
|
+ imgs.push(img)
|
|
|
+ //预览图片
|
|
|
+ uni.previewImage({
|
|
|
+ urls: imgs,
|
|
|
+ current: imgs[0]
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ //预览图片
|
|
|
+ uni.previewImage({
|
|
|
+ urls: this.banner,
|
|
|
+ current: this.banner[0]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ doAddCart(type) {
|
|
|
+ if (this.specNum == 0) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: "库存不足",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var isBuy = type == "buy" ? 1 : 0;
|
|
|
+ let data = {
|
|
|
+ isBuy: isBuy,
|
|
|
+ cartNum: this.specNum,
|
|
|
+ productId: this.productValueSelect.productId,
|
|
|
+ attrValueId: this.productValueSelect.id,
|
|
|
+ type: 1
|
|
|
+ };
|
|
|
+ addCart(data).then(
|
|
|
+ res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ if (type == "buy") {
|
|
|
+ const selectCarts = [{
|
|
|
+ storeId: this.storeId,
|
|
|
+ data: {
|
|
|
+ type: this.type,
|
|
|
+ cartIds: res.id,
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_shopping/confirmOrder?type=' + this.type + '&orderType=' +
|
|
|
+ this.orderType + '&confirmParam=' + encodeURIComponent(JSON.stringify(
|
|
|
+ selectCarts))
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.getCartCount()
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'success',
|
|
|
+ title: "添加成功",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ this.getProductDetails()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ getProductDetails() {
|
|
|
+ let data = {
|
|
|
+ productId: this.productId
|
|
|
+ };
|
|
|
+ getProductDetails(data).then(
|
|
|
+ res => {
|
|
|
+ this.loadding = false
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.stockNum = res.num || 0;
|
|
|
+ this.product = res.product;
|
|
|
+ if (this.product.productType == 1) {
|
|
|
+ this.buyText = "立即购买"
|
|
|
+ } else if (this.product.productType == 2) {
|
|
|
+ this.buyText = "开方购买"
|
|
|
+ }
|
|
|
+ this.product.otPrice = this.product.otPrice.toFixed(2);
|
|
|
+ this.product.price = this.product.price.toFixed(2);
|
|
|
+ if (this.product.sliderImage != null) {
|
|
|
+ this.banner = this.product.sliderImage.split(',');
|
|
|
+ } else {
|
|
|
+ this.banner = []
|
|
|
+ }
|
|
|
+ this.attrs = res.productAttr;
|
|
|
+ this.attrs.forEach((item, index, arr) => {
|
|
|
+ item.values = item.attrValues.split(',');
|
|
|
+ item.index = 0
|
|
|
+ })
|
|
|
+ console.log(this.attrs)
|
|
|
+ this.values = res.productValues;
|
|
|
+ this.storeId = res.store.storeId || ''
|
|
|
+ this.storeList = [res.store] || [];
|
|
|
+ if (this.storeList && this.storeList.length > 0) {
|
|
|
+ const idx = this.storeList.indexOf(Number(this.storeId || 0));
|
|
|
+ if (this.storeId && idx > -1) {
|
|
|
+ this.chooseStore = this.storeList[idx]
|
|
|
+ } else {
|
|
|
+ this.chooseStore = this.storeList[0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.choseSpec(0, 0)
|
|
|
+ this.getCommentByUser()
|
|
|
+ this.getStoreInfo();
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/index/index',
|
|
|
+ })
|
|
|
+ }, 2000)
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ getCartCount() {
|
|
|
+ let data = {};
|
|
|
+ getCartCount(data).then(
|
|
|
+ cartRes => {
|
|
|
+ if (cartRes.code == 200) {
|
|
|
+ this.cartCount = cartRes.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+
|
|
|
+ },
|
|
|
+ // swiper变化事件
|
|
|
+ swiperChange(event) {
|
|
|
+ this.activeBanner = event.detail.current + 1
|
|
|
+ },
|
|
|
+ // 回到首页
|
|
|
+ goHome() {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 跳转页面
|
|
|
+ navgetTo(url) {
|
|
|
+ this.$isLogin().then(res => {
|
|
|
+ if (res) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 加入购物车
|
|
|
+ addCart(type) {
|
|
|
+ this.show=false
|
|
|
+ this.$isLogin().then(res => {
|
|
|
+ if (res) {
|
|
|
+ this.type = type;
|
|
|
+ this.specVisible = true
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/auth/login'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 规格选择
|
|
|
+ choseSpec(index, subIndex) {
|
|
|
+ this.attrs[index].index = subIndex;
|
|
|
+ this.$forceUpdate();
|
|
|
+ let productAttr = this.attrs;
|
|
|
+ let values = [];
|
|
|
+ for (let i = 0; i < productAttr.length; i++) {
|
|
|
+ for (let j = 0; j < productAttr[i].values.length; j++) {
|
|
|
+ if (productAttr[i].index === j) {
|
|
|
+ values.push(productAttr[i].values[j]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var selectVal = values.sort().join(",");
|
|
|
+ console.log('selectVal',selectVal,this.values)
|
|
|
+ var valueSelect = this.values.filter((item) => {
|
|
|
+ return item.sku == selectVal;
|
|
|
+ })
|
|
|
+ if (valueSelect != null && valueSelect.length == 1) {
|
|
|
+ this.productValueSelect = valueSelect[0];
|
|
|
+ }
|
|
|
+ this.updateSpecNum();
|
|
|
+
|
|
|
+ },
|
|
|
+ //更新数量
|
|
|
+ updateSpecNum() {
|
|
|
+ if (this.productValueSelect.stock == 0) {
|
|
|
+ this.specNum = 0;
|
|
|
+ } else {
|
|
|
+ this.specNum = 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeNum(e) {
|
|
|
+ this.specNum = e.detail.value.replace(/\D/g, '')
|
|
|
+ if (this.specNum < 1) {
|
|
|
+ this.specNum = 1
|
|
|
+ }
|
|
|
+ if (this.specNum >= this.productValueSelect.stock) {
|
|
|
+ this.specNum = this.productValueSelect.stock
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 数量减法
|
|
|
+ lessNum() {
|
|
|
+ this.specNum--
|
|
|
+ if (this.specNum < 1) {
|
|
|
+ this.specNum = 1
|
|
|
+ }
|
|
|
+ if (this.specNum >= this.productValueSelect.stock) {
|
|
|
+ this.specNum = this.productValueSelect.stock
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 数量加法
|
|
|
+ addNum() {
|
|
|
+ if (this.specNum < 10) {
|
|
|
+ this.specNum++
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '限购10盒',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (this.specNum >= this.productValueSelect.stock) {
|
|
|
+ this.specNum = this.productValueSelect.stock
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 确定选择该规格
|
|
|
+ submit() {
|
|
|
+ this.specVisible = false
|
|
|
+ this.doAddCart(this.type);
|
|
|
+
|
|
|
+ },
|
|
|
+ moreEvaluate() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_shopping/evaluate?storeId='+this.storeId+ '&productIds='+this.productId,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCommentByUser(){
|
|
|
+ const param = {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 2,
|
|
|
+ storeId:this.storeId,
|
|
|
+ orderId: null,
|
|
|
+ productIds:this.productId,
|
|
|
+ userId: uni.getStorageSync('userId') || null,
|
|
|
+ showSelf: 0
|
|
|
+ }
|
|
|
+ selectCommentByUser(param).then(res=>{
|
|
|
+ if(res.code==200) {
|
|
|
+ this.evaluate = res.data.list
|
|
|
+ this.evaluateTotal = res.data.total
|
|
|
+ } else {
|
|
|
+ this.evaluate = []
|
|
|
+ this.evaluateTotal = 0
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .product-other-box {
|
|
|
+ .other-box-item {
|
|
|
+ .label {
|
|
|
+ // width: 6em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hiddenbox {
|
|
|
+ height: 240rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .popupbox {
|
|
|
+ width: 80vw;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #333333;
|
|
|
+ &-title{
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ &-body {
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
+ line-height: 2;
|
|
|
+ }
|
|
|
+ .confirm {
|
|
|
+ background-color: #2583EB;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ color: #fff;
|
|
|
+ padding: 10rpx 24rpx;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ }
|
|
|
+ &-footer {
|
|
|
+ border-top: 1rpx solid #F7F7F7;
|
|
|
+ padding: 30rpx;
|
|
|
+ color: red;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shadowbox{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255,0.5) 50%,rgb(255, 255, 255) 80%);
|
|
|
+ padding-top: 240rpx;
|
|
|
+ margin-top: -240rpx;
|
|
|
+ position: relative;
|
|
|
+ &-btn {
|
|
|
+ padding: 10rpx 40rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 1rpx solid #ccc;
|
|
|
+ display: inline-flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-item {
|
|
|
+ position: relative;
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ margin: 0 20rpx 0 10rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .other-box {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
+ margin: 24rpx;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ line-height: 1.3;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ min-width: 4em;
|
|
|
+ text-align: justify;
|
|
|
+ /* 两端对齐 */
|
|
|
+ text-align-last: justify;
|
|
|
+ /* 最后一行也撑满 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .safe-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-banner {
|
|
|
+ height: 756upx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper,
|
|
|
+ .swiper-item,
|
|
|
+ .swiper-item image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-mask {
|
|
|
+ width: 100%;
|
|
|
+ height: 44upx;
|
|
|
+ // background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
|
|
|
+ // opacity: 0.8;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 9;
|
|
|
+ background-image: url('https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/black_mask.png');
|
|
|
+ background-size: 20upx 44upx;
|
|
|
+ background-repeat: repeat-x;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num-box {
|
|
|
+ width: 80upx;
|
|
|
+ height: 44upx;
|
|
|
+ line-height: 44upx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: rgba(0, 0, 0, .3);
|
|
|
+ border-radius: 22upx;
|
|
|
+ position: absolute;
|
|
|
+ right: 30upx;
|
|
|
+ bottom: 30upx;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .det-info {
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 36upx 30upx 25upx;
|
|
|
+ margin: 20rpx 24rpx;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ line-height: 1.3;
|
|
|
+ margin-right: 5upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF6633;
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 40upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF6633;
|
|
|
+ margin: 0 20upx 0 0;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .old {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-box {
|
|
|
+ width: 120upx;
|
|
|
+ height: 46upx;
|
|
|
+ border: 1px solid #2583EB;
|
|
|
+ border-radius: 23upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #2583EB;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ margin-left: 2rpx;
|
|
|
+ width: 25upx;
|
|
|
+ height: 24upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share {
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .spec {
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 36upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name-box {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 44upx;
|
|
|
+ margin-top: 32upx;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 6upx;
|
|
|
+ height: 30upx;
|
|
|
+ background: linear-gradient(90deg, #2583EB 0%, #92C1F5 100%);
|
|
|
+ border-radius: 4upx;
|
|
|
+ margin-right: 10upx;
|
|
|
+ font-size: 22upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 30upx;
|
|
|
+ float: left;
|
|
|
+ margin-top: 7upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro {
|
|
|
+ display: block;
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 36upx;
|
|
|
+ padding-top: 18upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .inventor {
|
|
|
+ height: 88upx;
|
|
|
+ padding: 0 39upx 0 30upx;
|
|
|
+ margin-top: 10upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .head-box {
|
|
|
+ margin-right: 27upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .head {
|
|
|
+ width: 48upx;
|
|
|
+ height: 48upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 0 0 1px #fff;
|
|
|
+ margin-right: -10upx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .num-box {
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .effect {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 30rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 1.8;
|
|
|
+ margin: 24rpx 24rpx 0 24rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 30upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .det-box {
|
|
|
+ padding: 30upx 30upx 0 30upx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ margin: 24rpx 24rpx 0 24rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 1;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label,
|
|
|
+ .text {
|
|
|
+ font-size: 30upx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-foot {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 121upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 0 32upx 0 28upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ .menu-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-right: 48upx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 36upx;
|
|
|
+ height: 36upx;
|
|
|
+ margin-bottom: 10upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 20upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep.uni-badge--x {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep.uni-badge {
|
|
|
+ border: none;
|
|
|
+ background-color: #FF3636;
|
|
|
+ font-family: Roboto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: relative;
|
|
|
+ width: 200upx;
|
|
|
+ height: 88upx;
|
|
|
+ line-height: 88upx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 44upx;
|
|
|
+ margin-left: 20upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.cart {
|
|
|
+ background: #FF6633;
|
|
|
+
|
|
|
+ .share {
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.buy {
|
|
|
+ background: #2583EB;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-spec {
|
|
|
+ .pro-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .img-box {
|
|
|
+ width: 200upx;
|
|
|
+ height: 200upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16upx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 30upx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-text {
|
|
|
+ height: 200upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF6633;
|
|
|
+ line-height: 1.2;
|
|
|
+ margin-right: 10upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 50upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF6633;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-bottom: 9upx;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 27upx;
|
|
|
+ line-height: 1;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .spec-box {
|
|
|
+ padding-top: 50upx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 34upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spec-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 30upx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 64upx;
|
|
|
+ padding: 0 30upx;
|
|
|
+ line-height: 64upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ background: #F7F7F7;
|
|
|
+ border: 1px solid #F7F7F7;
|
|
|
+ border-radius: 32upx;
|
|
|
+ margin-right: 20upx;
|
|
|
+ margin-bottom: 30upx;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #F1FFFE;
|
|
|
+ border: 1px solid #2583EB;
|
|
|
+ color: #2583EB;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-num {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 14upx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 34upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #111111;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .img-box {
|
|
|
+ width: 60upx;
|
|
|
+ height: 60upx;
|
|
|
+ // border-radius: 4upx;
|
|
|
+ border: 1px solid #dddddd;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 25rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ width: 60upx;
|
|
|
+ height: 60upx;
|
|
|
+ line-height: 60upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ // border-radius: 4upx;
|
|
|
+ border-top: 1px solid #dddddd;
|
|
|
+ border-bottom: 1px solid #dddddd;
|
|
|
+ text-align: center;
|
|
|
+ // margin: 0 16upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 88upx;
|
|
|
+ line-height: 88upx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #2583EB;
|
|
|
+ border-radius: 44upx;
|
|
|
+ margin-top: 30upx;
|
|
|
+ // margin-bottom: 30upx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact-btn {
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loadding {
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+ image {
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: load linear 1s infinite;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .storebox {
|
|
|
+ margin: 24rpx;
|
|
|
+ padding: 28rpx 26rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ color: #333;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 104rpx;
|
|
|
+ height: 104rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+ margin-right: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .storename {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .storedesc {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .storebox-r {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .storebox-btn {
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding: 10rpx 24rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
|
+ border: 2rpx solid #FF5C03;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FF5C03;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .evaluate {
|
|
|
+ .title {
|
|
|
+ margin: 0;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer-desc {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 32rpx 24rpx 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+ image{
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width:15rpx;
|
|
|
+ height:20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|