1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801 |
- <template>
- <view class="">
- <view class="content">
- <!-- <view class="share-box centerV ">
- <image class="w48 h48 " src="" mode=""></image>
- <text class="color-text mt8 weight-500 fs20">微信分享</text>
- </view> -->
- <!-- 商品轮播图片 -->
- <!-- <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="">
- <swiper-item class="swiper-item" v-for="(item,index) in banner" :key="index">
- <image :src="item" mode="aspectFill"></image>
- <view class="cf-box" v-if="product.productType==2">
- <view class="title">处方药</view>
- <view class="subTitle">请在医师指导下使用</view>
- </view>
- </swiper-item>
- </swiper>
-
- 底部遮罩
- <view class="banner-mask"></view>
- 数量
- <view class="num-box"><text class="weight-500">{{ activeBanner }}</text>/{{ banner.length }}</view>
- </view> -->
- <view class="shop-banner">
- <view class="swiper">
- <view class="swiper-item">
- <image :src="goosDetail.imgUrl" mode="aspectFill"></image>
- <view class="cf-box" v-if="product.productType==2">
- <view class="title">处方药</view>
- <view class="subTitle">请在医师指导下使用</view>
- </view>
- </view>
- </view>
- </view>
- <!-- 详细信息 -->
- <view class="det-info">
- <view class="price-box">
- <view class="price">
- <text class="label">会员价</text>
- <text class="unit">¥</text>
- <text class="num">{{goosDetail.price}}</text>
- <text class="fs24 color-text2">零售价</text>
- <text class="old">¥{{goosDetail.otPrice}}</text>
- </view>
- <text class="fs24 color-text2">月售{{goosDetail.sales}}件</text>
- </view>
- <!-- <view class="name-box">
- <view class="tag"></view>
- {{product.productName}}
- </view> -->
- <!-- <view class="intro" v-if="product.productInfo!=null" v-html="product.productInfo.replace(/\n/g,'<br>')"> -->
- </view>
- </view>
- <view class="guige">
- <view class="guige-gg">
- <text class="gg-text">规格</text>
- <text class="gg-text2">云南白药气雾剂 85g+30g *1 、说明书*1</text>
- </view>
- <view class="safe-box">
- <text class="text">服务</text>
- <view class="box">
- <view v-for="(item,index) in serviceList" :key="index">
- <image src="/static/images/googs_service.png" mode=""></image>
- <text>{{item}}</text>
- </view>
- <view @click="openEditMoney()">
- <image class='w48 h48' src="/static/images/right_arrow.png"></image>
- </view>
- </view>
- </view>
- <!-- 点击服务,出现弹窗-->
- <view class="popup-box" v-if="editShow">
- <view class="info-mask" @tap="cancelEditMoney()"></view>
- <view class="info-form">
- <view class="top">
- <view class="title">服务</view>
- <view class="close" @click="cancelEditMoney()">
- <image class='w48 h48' src="" mode=""></image>
- </view>
- </view>
- <view class="line"></view>
- <view class="form-box">
- <view class="form-item2">
- <view class="form-item-box">
- <image class='w28 h28' src="" mode=""></image>
- <text>免邮发货</text>
- </view>
- <view class="form-content">
- 订单支付成功后48小时内发货,若未在48小时内发货,平台审核后消费者将会收到至少3元无门槛红包(特殊商品及不可抗力因素除外)
- </view>
- </view>
- <view class="form-item2">
- <view class="form-item-box">
- <image class='w28 h28' src="" mode=""></image>
- <text>药师服务</text>
- </view>
- <view class="form-content">
- 用药关怀认证药师,24小时专业用药咨询
- </view>
- </view>
- <view class="form-item2">
- <view class="form-item-box">
- <image class='w28 h28' src="" mode=""></image>
- <text>隐私保护</text>
- </view>
- <view class="form-content">
- 除患者本人或其授权的代理人外,其他人员未经允许不得随意查阅患者的医疗记录
- </view>
- </view>
- </view>
- <view class="btns">
- <view class="sub-btn" @click="cancelEditMoney()">确定</view>
- </view>
- </view>
- </view>
- </view>
- <!-- 购买人数、库存 -->
- <view class="shop-box">
- <view class=""
- style="flex: 1;overflow: hidden; display: flex; justify-content: space-between; align-items: center;">
- <!-- 店铺图片logo -->
- <!-- <view class="logo">
- <image src="" mode="aspectFill"></image>
- </view> -->
- <view class="txtBox">
- <view class="name">南泉达路店</view>
- <view class="desc">24小时营业 · 月售{{}} · 支持预订</view>
- </view>
- </view>
- <button class="goShop"
- @click="navgetTo('/pages_shop/store?liveId='+liveId)">进店</button>
- </view>
- <!-- 图文详情 -->
- <view class="det-box">
- <view class="title">药品详情</view>
- <view class="det-title">
- <view class="tt">说明书</view>
- <view class="det-right">
- <text>查看详情</text>
- <image class='w48 h48' src=""></image>
- </view>
- </view>
- <view class="det-table">
- <view class="row">
- <text class="cell cell-1">通用名称</text>
- <text class="cell cell-2">云南白药气雾剂</text>
- </view>
- <view class="row">
- <text class="cell cell-1">成份</text>
- <text class="cell cell-2">国家保密方,本品含草乌(制)、雪上一枝蒿(制),其余成份略。</text>
- </view>
- <view class="row">
- <text class="cell cell-1">性状</text>
- <text class="cell cell-2">云南白药气雾剂为非定量阀门气雾剂,在耐压容器中的药液为淡黄...</text>
- </view>
- </view>
- <view class="inner">
- <view v-html="product.description" style="font-size:0"></view>
- </view>
- </view>
- <!-- 底部按钮 -->
- <view class="btn-foot">
- <view class="menu-box">
- <view class="item" @click="navgetTo('./store')">
- <image src="/static/images/googs1.png" mode=""></image>
- <text class="label">店铺</text>
- </view>
- <!-- <view class="item" @click="navgetTo('pages/home/living')" style="position: relative;">
- <image src="/static/images/googs2.png" mode=""></image>
- <text class="label">直播间</text>
- <button class="contact-btn" open-type="contact"></button>
- </view> -->
- <!-- <view class="item" style="position: relative;">
- <image src="/static/images/googs2.png" mode=""></image>
- <text class="label">咨询</text>
- <button class="contact-btn" open-type="contact"></button>
- </view> -->
- <view class="item" @click="navgetTo('./cart')">
- <uni-badge size="small" :text="cartCount" absolute="rightTop" type="error">
- <image src="/static/images/googs3.png" mode=""></image>
- </uni-badge>
- <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="800">
- <view class="product-spec">
- <view class="pro-info">
- <view class="img-box">
- <image :src="goosDetail?.imgUrl ||$img.img " mode="aspectFill"></image>
- </view>
- <view class="info-text">
- <view class="info-title">{{goosDetail.productName}}</view>
- <view class="price">
- <view class="label">会员价</view>
- <text class="unit">¥</text>
- <text class="num">{{ goosDetail.price ? goosDetail.price.toFixed(2) : '0.00' }}</text>
- </view>
- <view class="desc-box">
- <text class="text">月售{{goosDetail.sales}}件</text>
- </view>
- </view>
- </view>
- <!-- 选择健康管理师 -->
- <!-- <view class="tech-pBox" style="margin-top: 20rpx;">
- <view class="label">选择健康管理师</view>
- <view v-for="(item,index) in storePriceList.slice(0,2)" :key="index"
- :class="productValueSelect.storeId == item.storeId ? 'item hover':'item'"
- @click="storeChange(item,index)">
- <image mode="aspectFill"
- :src="productValueSelect.image==null||productValueSelect.image==''?product.image:productValueSelect.image">
- </image>
- <view class="tech-right">
- <view class="tech-right-top">
- <text class="title-1">秦宇</text>
- <text class="title-2">健康管理师/执业药师</text>
- </view>
- <view class="tech-right-bottom">{{item.storeName}}</view>
- </view>
- </view>
- </view> -->
- <u-popup :show="showStorePicker" :round="16" mode="bottom">
- <view class="storepopup">
- <view class="storepopup-title">
- 选择店铺
- <image class="close-icon" src="" mode="widthFix"></image>
- </view>
- <scroll-view enable-flex class="shop-pBox storepopup-box" scroll-y="true">
- <view v-for="(item,index) in storePriceList" :key="index"
- :class="productValueSelect.storeId == item.storeId ? 'item hover':'item'"
- @click="pickerStore(item,index)">
- <view class="top x-bc">
- <view class="price"><text class="strong">¥</text>{{ item.price.toFixed(2) }}</view>
- <view class="num">销售{{utils.formatSalesNum(item.sales) }}</view>
- </view>
- <view class="bot x-bc shop-pBox-name">
- <view class="name">{{item.storeName}}</view>
- <u-icon name="arrow-right" color="#000" size="14"></u-icon>
- </view>
- </view>
- </scroll-view>
- </view>
- </u-popup>
- <!-- <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'">
- {{ subItem }}
- </view>
- </view>
- </view>
- </view> -->
- <view class="price-num">
- <view class="label">数量</view>
- <u-number-box bgColor="#ececec" v-model="goodsNum" @change="goodsNumChange"></u-number-box>
- </view>
- <view class="sub-btn" @click="submit">确定</view>
- </view>
- </popupBottom>
- <!-- <view class="loadding" v-if="loadding==true">
- <image src=""></image>
- <text class="text">加载中...</text>
- </view> -->
- <!-- <u-modal :show="showModal" title="温馨提示" content="处方药须凭处方在药师指导下购买和使用" @confirm="hideModal()"></u-modal> -->
- <!-- <view>
- <view @click="operateOrder(0)" style="background-color: aqua; padding: 100rpx;">取消</view>
- <view @click="operateOrder(1)" style="background-color: #ff0004;padding: 150rpx;">确认</view>
- </view> -->
- </view>
- </template>
- <script>
- import {
- updateConfirm, // 点击取消/支付订单
- updateLiveOrder, // 取消/支付订单
- liveOrderKey // 生成订单key
- } from "@/api/order.js"
- import popupBottom from '@/components/px-popup-bottom/px-popup-bottom.vue'
- import {
- liveGoodsDetail
- } from "@/api/live.js"
- export default {
- components: {
- popupBottom
- },
- data() {
- return {
- totalNum: 1,
- orderKey: null,
- type: null,
- liveOrderList: [], //下订单的 不在这个页面
- liveId: null,
- // storeId:uni.setStorageSync("storeId"),
- serviceList: ['免邮发货', '药师服务', '隐私保护'],
- editShow: false,
- productId: null,
- goosDetail: {}, //商品详情
- loadding: true,
- buyText: "立即购买",
- showStorePicker: false,
- goodsNum: 0, //商品选择数量
- productValueSelect: {
- price: 0,
- serviceFee: 0
- },
- attrs: [],
- values: [],
- stores: [],
- storeNames: [],
- storeIdx: 0,
- storeName: "",
- product: {
- price: 0,
- otPrice: 0,
- },
- showModal: false,
- // 当前轮播的图片
- activeBanner: 1,
- // 购物车数量
- cartCount: 0,
- // 规格弹窗
- specVisible: false,
- // 规格数量
- specNum: 1,
- config: null,
- showServiceFee: false,
- selectVal: "",
- // 链接带的storeId
- urlStoreId: undefined,
- // 所选规格门店店铺价格
- storePriceList: [],
- // 所选店铺
- storeSelectInfo: {},
- // 保存选的规格
- choseSpecSubIndex: 0,
- choseSpecIndex: 0,
- };
- },
- onLoad(options) {
- if (options.productId) {
- this.productId = options.productId;
- // this.productId = decodeURIComponent(options.productId);
- console.log("接收到的productId:", this.productId);
- }
- this.liveId = options.liveId
- // console.log("options", JSON.stringify(options))
- // if (options.param) {
- // console.log("param", JSON.stringify(param))
- // this.productId = options.param.productId;
- // this.liveId = options.param.liveId;
- // this.storeId = options.param.storeId;
- // // this.productId = decodeURIComponent(options.productId);
- // console.log("接收到的productId:", this.productId);
- // }
- },
- mounted() {
- this.getliveGoods()
- var userInfo = uni.getStorageSync("userInfo")
- console.log("之前的数据在这里", userInfo)
- },
- onShow() {
- },
- methods: {
- // 获得key
- getKey() {
- liveOrderKey().then(res => {
- if (res.code == 200) {
- console.log("下订单的key>>>>", res)
- this.orderKey = res.orderKey
- console.log("key>>>>", this.orderKey)
- uni.navigateTo({
- url: '/pages_shop/confirmCreateOrder?orderKey=' + this.orderKey + '&liveId=' +
- this.liveId + '&productId=' + this.productId + '&totalNum=' + this
- .totalNum + '&price=' + this.goosDetail.price
- })
- } else {
- uni.showToast({
- title: res.msg,
- icon: 'none'
- });
- }
- },
- rej => {}
- );
- },
- // 点击取消/支付订单
- operateOrder(type) {
- // console.log("this.liveOrderList" ,JSON.parse( this.liveOrderList.orderId));
- let orderId = this.liveOrderList
- console.log("orderId>>", orderId)
- // updateConfirm(orderId, type).then(res => {
- // if (res.code == 200) {
- // console.log("点击取消/支付订单>>>>", res)
- // } else {
- // uni.showToast({
- // title: res.msg,
- // icon: 'none'
- // });
- // }
- // },
- // rej => {}
- // );
- },
- // 选择商品数量
- goodsNumChange(e) {
- console.log('当前选择商品数量为: ' + e.value)
- this.totalNum = e.value
- },
- // 提交
- submit() {
- this.specVisible = false
- this.getKey()
- // this.doAddCart(this.type);
- },
- // 加入购物车
- addCart(type) {
- this.type = type;
- this.specVisible = true
- },
- // 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
- // };
- // 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 => {}
- // );
- // },
- // 跳转页面
- navgetTo(url) {
- console.log("跳转")
- uni.navigateTo({
- url: url
- })
- },
- openEditMoney() {
- this.editShow = true;
- },
- //商品详情
- getliveGoods() {
- liveGoodsDetail(this.productId).then(res => {
- if (res.code == 200) {
- console.log("小黄车 商品详情>>>>", res)
- this.goosDetail = res.data
- } else {
- uni.showToast({
- title: res.msg,
- icon: 'none'
- });
- }
- },
- rej => {}
- );
- },
- }
- }
- </script>
- <style lang="scss">
- .content {
- font-family: PingFang SC;
- }
- .share-box {
- position: fixed;
- right: 24rpx;
- top: 70%;
- z-index: 99;
- width: 112rpx;
- height: 112rpx;
- border-radius: 16rpx 16rpx 16rpx 16rpx;
- border: 1rpx solid #EFF3F7;
- background-color: #FFFFFF;
- }
- .shop-banner {
- height: 756rpx;
- background-color: #FFFFFF;
- position: relative;
- .swiper-item {
- box-sizing: border-box;
- position: relative;
- }
- .swiper,
- .swiper-item,
- .swiper-item image {
- width: 100%;
- height: 100%;
- }
- .banner-mask {
- width: 100%;
- height: 44rpx;
- position: absolute;
- left: 0;
- bottom: 0;
- z-index: 9;
- // background-image: url(../../static/images/black_mask.png);
- background-size: 20rpx 44rpx;
- background-repeat: repeat-x;
- }
- .num-box {
- width: 80rpx;
- height: 40rpx;
- line-height: 40rpx;
- text-align: center;
- font-size: 24rpx;
- color: #FFFFFF;
- background: rgba(0, 0, 0, .7);
- border-radius: 20rpx;
- position: absolute;
- right: 40rpx;
- bottom: 34rpx;
- z-index: 10;
- }
- .cf-box {
- position: absolute;
- z-index: 10;
- left: 0;
- right: 0;
- top: calc(50% - 200rpx);
- bottom: calc(50% - 200rpx);
- background-color: rgba(0, 0, 0, 0.3);
- backdrop-filter: blur(2rpx);
- /* 背景模糊度 */
- display: flex;
- flex-direction: column;
- flex: 1;
- justify-content: center;
- align-items: center;
- color: #EDEEEF;
- .title {
- font-size: 40rpx;
- font-weight: bold;
- }
- .subTitle {
- font-size: 28rpx;
- font-weight: bold;
- margin-top: 10rpx;
- }
- }
- }
- .guige {
- padding: 24rpx;
- border-radius: 16rpx;
- background: #fff;
- width: auto;
- font-size: 24rpx;
- color: #222426;
- margin: 24rpx;
- .guige-gg {
- .gg-text {
- color: #898E91;
- margin-right: 40rpx;
- }
- }
- .safe-box {
- display: flex;
- align-items: center;
- padding-top: 24rpx;
- font-size: 24rpx;
- color: #222426;
- .text {
- color: #999999;
- margin-right: 40rpx;
- }
- .box {
- display: flex;
- align-items: center;
- image {
- width: 28rpx;
- height: 28rpx;
- margin-right: 10rpx;
- }
- view {
- display: flex;
- align-items: center;
- margin-right: 40rpx;
- &:last-child {
- margin-right: 0;
- image {
- margin-right: 0;
- }
- }
- }
- }
- }
- .popup-box {
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- z-index: 999;
- display: flex;
- justify-content: center;
- align-items: flex-end;
- .info-mask {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: rgba($color: #000000, $alpha: 0.5);
- z-index: 999;
- }
- .info-form {
- z-index: 1000;
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- padding: 0 30rpx 60rpx;
- background: #FFFFFF;
- border-radius: 40rpx;
- .top {
- display: flex;
- }
- .line {
- border-top: 1px solid #F1F1F1;
- width: 100%;
- }
- .title {
- padding: 30rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 36rpx;
- font-weight: bold;
- line-height: 44rpx;
- color: #222222;
- }
- .close {
- padding-top: 30rpx;
- position: absolute;
- right: 30rpx;
- }
- .form-box {
- width: 100%;
- padding-top: 30rpx;
- .form-item2 {
- padding-bottom: 30rpx;
- // display: flex;
- // align-items: flex-start;
- // border-bottom: 1px solid #F1F1F1;
- .form-item-box {
- display: flex;
- align-items: center;
- text {
- font-size: 28rpx;
- color: #222426;
- margin-left: 10rpx;
- font-weight: bold;
- }
- }
- .form-content {
- font-size: 24rpx;
- text-align: left;
- color: #626468;
- margin-top: 20rpx;
- line-height: 40rpx;
- }
- }
- }
- .btns {
- width: 100%;
- height: 120rpx;
- padding: 20rpx 30rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- .sub-btn {
- width: 100%;
- height: 88rpx;
- line-height: 88rpx;
- text-align: center;
- font-size: 36rpx;
- font-weight: bold;
- color: #FFFFFF;
- background: #008FD3;
- border-radius: 44rpx;
- }
- }
- }
- }
- }
- .det-info {
- // background: #FFFFFF;
- // padding: 36rpx 30rpx 25rpx;
- background: #FFFFFF;
- padding: 24rpx;
- margin: 24rpx;
- border-radius: 16rpx;
- .price-box {
- display: flex;
- align-items: flex-end;
- justify-content: space-between;
- .price {
- display: flex;
- align-items: flex-end;
- .label {
- font-weight: 500;
- font-size: 24rpx;
- color: #FF5030;
- line-height: 1.3;
- margin-right: 10rpx;
- }
- .unit {
- font-size: 26rpx;
- font-weight: bold;
- color: #FF6633;
- line-height: 1.3;
- }
- .num {
- font-size: 48rpx;
- font-weight: bold;
- color: #FF5030;
- margin-right: 20rpx;
- line-height: 1;
- }
- .old {
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 400;
- // text-decoration: line-through;
- color: #898E91;
- margin-left: 10rpx;
- // line-height: 1.3;
- }
- }
- // .share-box{
- // width: 120rpx;
- // height: 46rpx;
- // border: 1px solid #0bb3f2;
- // border-radius: 23rpx;
- // display: flex;
- // align-items: center;
- // justify-content: center;
- // position: relative;
- // .text{
- // font-size: 26rpx;
- // font-family: PingFang SC;
- // font-weight: 500;
- // color: #0bb3f2;
- // }
- // image{
- // margin-left: 2rpx;
- // width: 25rpx;
- // height: 24rpx;
- // }
- // .share{
- // display: inline-block;
- // position: absolute;
- // top: 0;
- // left: 0;
- // width: 100%;
- // height: 100%;
- // opacity: 0;
- // }
- // }
- .spec {
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #999999;
- line-height: 36rpx;
- }
- }
- // .name-box {
- // font-size: 32rpx;
- // font-family: PingFang SC;
- // font-weight: bold;
- // color: #111111;
- // line-height: 44rpx;
- // margin-top: 32rpx;
- // .tag {
- // display: inline-block;
- // padding: 2rpx 8rpx;
- // height: 32rpx;
- // background: #F5A623;
- // border-radius: 4rpx;
- // margin-right: 10rpx;
- // font-weight: 400;
- // font-size: 20rpx;
- // color: #FFFFFF;
- // line-height: 30rpx;
- // float: left;
- // margin-top: 7rpx;
- // }
- // }
- .intro {
- font-size: 26rpx;
- font-weight: 500;
- color: #999999;
- line-height: 36rpx;
- padding: 18rpx 0 23rpx;
- }
- .intro-box {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 20rpx;
- border-radius: 16rpx;
- background: #F5F7FA;
- width: auto;
- .title-1 {
- font-size: 24rpx;
- color: #222426;
- font-weight: bold;
- width: 40%;
- text-align: center;
- }
- .title-2 {
- font-size: 24rpx;
- color: #222426;
- font-weight: bold;
- display: block;
- }
- .intro-text {
- // padding: 0 20rpx;
- }
- .intro-text2 {
- width: 50%;
- }
- .intro-content {
- color: #898E91;
- font-size: 24rpx;
- }
- .line {
- width: 1px;
- height: 40rpx;
- background: #EDEEEF;
- margin: 0 20rpx;
- }
- }
- .safe-box {
- display: flex;
- align-items: center;
- padding-top: 24rpx;
- image {
- width: 20rpx;
- height: 24rpx;
- margin-right: 20rpx;
- }
- .text {
- font-size: 22rpx;
- font-weight: 500;
- color: #999999;
- line-height: 1;
- }
- .line {
- width: 1px;
- height: 23rpx;
- background: #EDEEEF;
- margin: 0 20rpx;
- }
- }
- }
- .inventor {
- height: 88rpx;
- padding: 0 39rpx 0 30rpx;
- margin-top: 10rpx;
- background: #FFFFFF;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .left {
- display: flex;
- align-items: center;
- .head-box {
- margin-right: 27rpx;
- display: flex;
- align-items: center;
- .head {
- width: 48rpx;
- height: 48rpx;
- border-radius: 50%;
- overflow: hidden;
- box-shadow: 0 0 0 1px #fff;
- margin-right: -10rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- }
- .num-box {
- font-size: 24rpx;
- font-weight: 500;
- color: #999999;
- .text {
- font-size: 24rpx;
- font-weight: 500;
- color: #999999;
- }
- }
- }
- .right {
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #999999;
- .text {
- font-size: 24rpx;
- font-weight: 500;
- color: #666666;
- }
- }
- }
- .effect {
- box-sizing: border-box;
- padding: 20rpx 30rpx;
- background: #FFFFFF;
- font-size: 28rpx;
- font-weight: 500;
- color: #666666;
- line-height: 1.8;
- margin-top: 10rpx;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- .label {
- font-size: 28rpx;
- font-weight: 500;
- color: #111111;
- line-height: 1.8;
- }
- }
- .shop-box {
- // box-sizing: border-box;
- // padding: 20rpx 30rpx;
- // background: #FFFFFF;
- // font-size: 28rpx;
- // font-family: PingFang SC;
- // font-weight: 500;
- // color: #666666;
- // line-height: 1.8;
- // margin-top: 10rpx;
- // background: url(../../static/images/chu_query.png) no-repeat center center / cover;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background: #FFFFFF;
- font-size: 28rpx;
- font-weight: 500;
- color: #666666;
- line-height: 1.8;
- padding: 24rpx;
- margin: 24rpx;
- border-radius: 16rpx;
- .logo {
- flex-shrink: 0;
- width: 100rpx;
- height: 100rpx;
- border-radius: 16rpx;
- overflow: hidden;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .txtBox {
- flex: 1;
- overflow: hidden;
- margin: 0 30rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- .name {
- font-size: 32rpx;
- font-weight: 600;
- color: #333;
- text-align: left;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .desc {
- font-size: 24rpx;
- font-weight: normal;
- color: #222426;
- text-align: left;
- }
- .goShop {
- flex-shrink: 0;
- width: 96rpx;
- height: 56rpx;
- background: #fff;
- border-radius: 30rpx;
- color: #008FD3;
- font-size: 24rpx;
- margin: 0;
- border: 1px solid #008FD3;
- padding: 0;
- line-height: 56rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- .tech-pBox {
- box-sizing: border-box;
- padding: 0rpx 0rpx;
- background: #FFFFFF;
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #666666;
- .label {
- font-weight: bold;
- font-size: 26rpx;
- color: #222426;
- text-align: left;
- padding: 24rpx 0;
- }
- .item {
- border: 1px solid #fff;
- border-radius: 12rpx;
- padding: 30rpx;
- border: 1px solid #EFF3F7;
- display: flex;
- align-items: center;
- margin-bottom: 20rpx;
- .price {
- font-size: 42rpx;
- font-weight: bold;
- color: #FF6633;
- display: flex;
- flex: 1;
- b {
- font-size: 30rpx;
- line-height: 46rpx;
- margin-top: 14rpx;
- }
- }
- .num {
- font-size: 28rpx;
- font-weight: normal;
- color: #999;
- width: 200rpx;
- text-align: right;
- }
- .name {
- max-width: 60%;
- margin-right: 10rpx;
- font-size: 28rpx;
- font-weight: normal;
- color: #333;
- text-align: left;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- image {
- width: 100rpx;
- height: 100rpx;
- border-radius: 50%;
- margin-right: 30rpx;
- }
- .tech-right {
- flex: 1;
- &-bottom {
- color: #898E91;
- font-size: 24rpx;
- }
- &-top {
- display: flex;
- align-items: flex-end;
- margin-bottom: 10rpx;
- .title-1 {
- font-size: 32rpx;
- color: #222426;
- margin-right: 14rpx;
- }
- .title-2 {
- font-weight: 400;
- font-size: 24rpx;
- color: #222426;
- }
- }
- }
- }
- .hover {
- border: 1rpx solid #008FD3;
- background: #F0FAFF;
- }
- .shop-morebtn {
- margin-top: 14rpx;
- box-sizing: border-box;
- padding: 12rpx 30rpx;
- font-size: 28rpx;
- font-weight: 500;
- color: #111111;
- background: #F7F7F7;
- border-radius: 32rpx;
- text-align: center;
- text {
- color: #999;
- }
- }
- }
- .shop-pBox {
- box-sizing: border-box;
- padding: 0rpx 0rpx;
- background: #FFFFFF;
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #666666;
- .item {
- border: 1px solid #fff;
- border-radius: 12rpx;
- padding: 18rpx 20rpx 24rpx;
- .price {
- font-size: 42rpx;
- font-weight: bold;
- color: #FF6633;
- display: flex;
- flex: 1;
- .strong {
- font-size: 30rpx;
- line-height: 46rpx;
- margin-top: 14rpx;
- }
- }
- .num {
- font-size: 28rpx;
- font-weight: normal;
- color: #999;
- width: 200rpx;
- text-align: right;
- }
- .name {
- max-width: 60%;
- margin-right: 10rpx;
- font-size: 28rpx;
- font-weight: normal;
- color: #333;
- text-align: left;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- .hover {
- border: 1rpx solid #FF6633;
- }
- .shop-morebtn {
- margin-top: 14rpx;
- box-sizing: border-box;
- padding: 12rpx 30rpx;
- font-size: 28rpx;
- font-weight: 500;
- color: #111111;
- background: #F7F7F7;
- border-radius: 32rpx;
- text-align: center;
- text {
- color: #999;
- }
- }
- }
- .shop-pBox-name {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- }
- .storepopup {
- padding: 40rpx 20rpx 20rpx 20rpx;
- .storepopup-title {
- text-align: center;
- margin-bottom: 30rpx;
- position: relative;
- .close-icon {
- width: 40rpx;
- height: 40rpx;
- position: absolute;
- right: 0;
- top: 50%;
- transform: translate(0, -50%);
- }
- }
- .storepopup-box {
- height: 60vh;
- }
- }
- .det-box {
- // margin-top: 10rpx;
- // padding: 40rpx 30rpx 130rpx 30rpx;
- // background-color: #FFFFFF;
- margin-top: 10rpx;
- background-color: #FFFFFF;
- padding: 24rpx;
- margin: 24rpx 24rpx 175rpx 24rpx;
- border-radius: 16rpx;
- .title {
- font-size: 32rpx;
- font-weight: bold;
- color: #333333;
- line-height: 60rpx;
- margin-bottom: 30rpx;
- padding-bottom: 24rpx;
- border-bottom: 1px solid #ECECEC;
- }
- .det-title {
- display: flex;
- align-items: center;
- justify-content: space-between;
- .tt {
- font-size: 28rpx;
- font-weight: bold;
- color: #222426;
- }
- }
- .det-right {
- display: flex;
- font-size: 24rpx;
- color: #898E91;
- align-items: center;
- }
- .det-table {
- width: 100%;
- margin: 24rpx 0;
- background: #FFFFFF;
- border-radius: 16rpx 16rpx 16rpx 16rpx;
- border: 1rpx solid #ECECEC;
- overflow: hidden;
- font-size: 24rpx;
- .row {
- display: table-row;
- }
- .row:last-child .cell-1,
- .row:last-child .cell-2 {
- border-bottom: 0;
- }
- .cell {
- display: table-cell;
- padding: 24rpx;
- &.cell-1 {
- width: 30%;
- text-align: center;
- color: #626468;
- background: #F5F7FA;
- border-right: 1rpx solid #ECECEC;
- border-bottom: 1rpx solid #ECECEC;
- }
- &.cell-2 {
- color: #222426;
- text-align: center;
- border-bottom: 1rpx solid #ECECEC;
- }
- }
- }
- }
- .btn-foot {
- box-sizing: border-box;
- width: 100%;
- height: 151rpx;
- background: #FFFFFF;
- padding: 0 24rpx;
- 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: 48rpx;
- &:last-child {
- margin-right: 0;
- }
- image {
- width: 40rpx;
- height: 40rpx;
- margin-bottom: 10rpx;
- }
- .label {
- font-size: 20rpx;
- font-weight: 500;
- color: #626468;
- text-align: center;
- }
- }
- }
- .btn-box {
- display: flex;
- align-items: center;
- .btn {
- width: 200rpx;
- height: 88rpx;
- line-height: 88rpx;
- text-align: center;
- border-radius: 44rpx;
- margin-left: 20rpx;
- font-size: 28rpx;
- font-weight: bold;
- color: #FFFFFF;
- &:first-child {
- margin-left: 0;
- }
- &.cart {
- background: #FF5030;
- }
- &.buy {
- background: #008FD3;
- }
- }
- }
- }
- .product-spec {
- padding-bottom: 30rpx;
- .pro-info {
- display: flex;
- align-items: center;
- .img-box {
- width: 200rpx;
- height: 200rpx;
- background: #FFFFFF;
- border-radius: 16rpx;
- overflow: hidden;
- margin-right: 30rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .info-text {
- height: 200rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .info-title {
- font-family: PingFang SC;
- font-weight: 600;
- font-size: 28rpx;
- color: #222426;
- text-align: left;
- }
- .price {
- display: flex;
- align-items: flex-end;
- .label {
- font-weight: 500;
- font-size: 24rpx;
- color: #FF5030;
- line-height: 1.3;
- margin-right: 10rpx;
- }
- .unit {
- font-size: 32rpx;
- font-weight: bold;
- color: #FF6633;
- line-height: 1.2;
- margin-right: 10rpx;
- }
- .num {
- font-size: 50rpx;
- font-weight: bold;
- color: #FF6633;
- line-height: 1;
- }
- }
- .desc-box {
- display: flex;
- flex-direction: column;
- padding-bottom: 9rpx;
- .text {
- font-size: 26rpx;
- font-weight: 500;
- color: #999999;
- margin-top: 27rpx;
- line-height: 1;
- &:first-child {
- margin-top: 0;
- }
- }
- }
- }
- }
- .spec-box {
- padding-top: 50rpx;
- .title {
- font-size: 26rpx;
- font-weight: bold;
- color: #111111;
- line-height: 1;
- }
- .spec-list {
- display: flex;
- flex-wrap: wrap;
- margin-top: 30rpx;
- .item {
- box-sizing: border-box;
- height: 64rpx;
- padding: 0 30rpx;
- line-height: 64rpx;
- font-size: 24rpx;
- font-weight: 500;
- color: #111111;
- background: #F7F7F7;
- border: 1px solid #F7F7F7;
- border-radius: 32rpx;
- margin-right: 20rpx;
- margin-bottom: 30rpx;
- &.active {
- background: #F1FFFE;
- border: 1px solid #008FD3;
- color: #008FD3;
- }
- }
- }
- }
- .price-num {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 14rpx;
- .label {
- font-size: 26rpx;
- font-weight: bold;
- color: #111111;
- }
- // .num-box {
- // display: flex;
- // align-items: center;
- // .img-box {
- // width: 60rpx;
- // height: 60rpx;
- // border: 1px solid #dddddd;
- // display: flex;
- // align-items: center;
- // justify-content: center;
- // image {
- // width: 25rpx;
- // height: 25rpx;
- // }
- // }
- // input {
- // width: 60rpx;
- // height: 60rpx;
- // line-height: 60rpx;
- // font-size: 28rpx;
- // font-weight: 500;
- // color: #111111;
- // // border-radius: 4rpx;
- // border-top: 1px solid #dddddd;
- // border-bottom: 1px solid #dddddd;
- // text-align: center;
- // // margin: 0 16rpx;
- // }
- // }
- }
- .sub-btn {
- width: 100%;
- height: 88rpx;
- line-height: 88rpx;
- text-align: center;
- font-size: 32rpx;
- font-weight: bold;
- color: #FFFFFF;
- background: #008FD3;
- border-radius: 44rpx;
- margin-top: 30rpx;
- // margin-bottom: 30rpx;
- }
- }
- .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;
- }
- }
- .form-item {
- padding: 30rpx 0;
- display: flex;
- align-items: flex-start;
- border-bottom: 1px solid #F1F1F1;
- &:last-child {
- border-bottom: none;
- }
- .label {
- width: 180rpx;
- text-align: left;
- font-size: 30rpx;
- line-height: 44rpx;
- font-weight: 500;
- color: #222222;
- flex-shrink: 0;
- }
- input {
- text-align: left;
- }
- .form-input {
- font-size: 30rpx;
- font-weight: 500;
- color: #999999;
- text-align: left;
- }
- .form-textarea {
- font-size: 30rpx;
- color: #999999;
- height: 100rpx;
- padding: 4rpx 0;
- }
- .birth-picker {
- flex: 1;
- display: flex;
- align-items: center;
- .right-box {
- width: 100%;
- display: flex;
- align-items: center;
- .input-box {
- width: 470rpx;
- }
- .arrow {
- width: 13rpx;
- height: 23rpx;
- margin-left: 20rpx;
- }
- }
- }
- }
- </style>
|