|
|
@@ -0,0 +1,1389 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <!-- 商品轮播图片 -->
|
|
|
+ <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>
|
|
|
+ <!-- <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">{{ activeBanner }}/{{ banner.length }}</view>
|
|
|
+ </view>
|
|
|
+ <!-- 详细信息 -->
|
|
|
+ <view class="det-info">
|
|
|
+ <view class="price-box">
|
|
|
+ <view class="price">
|
|
|
+ <text class="label" v-if="userinfo.isShow==1&&isuser==false">会员价</text>
|
|
|
+ <text class="label" v-else>零售价</text>
|
|
|
+ <text class="unit">¥</text>
|
|
|
+ <text class="num" v-if="userinfo.isShow==1&&isuser==false">{{product.price}}</text>
|
|
|
+ <text class="num" v-else>{{product.otPrice}}</text>
|
|
|
+ <text class="label" v-if="userinfo.isShow==1&&isuser==false">零售价</text>
|
|
|
+ <text class="old" v-if="userinfo.isShow==1&&isuser==false">¥{{product.otPrice}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="share-box" v-if="userinfo.isShow==1&&isuser==false">
|
|
|
+ <text class="text">分享</text>
|
|
|
+ <image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/share1.png" mode="">
|
|
|
+ </image>
|
|
|
+ <button class="share" data-name="shareBtn" open-type="share">分享</button>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="name-box">
|
|
|
+ <!-- <view class="tag">{{utils.getDictLabelName("storeProductType",product.productType)}}</view> -->
|
|
|
+ {{product.productName}}
|
|
|
+ </view>
|
|
|
+ <view class="intro" v-if="product.productInfo!=null" v-html="product.productInfo.replace(/\n/g,'<br>')">
|
|
|
+ </view>
|
|
|
+ <!-- <view class="safe-box">
|
|
|
+ <image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/safe.png" mode=""></image>
|
|
|
+ <text class="text" v-if="userinfo.isShow==1&&isuser==false">免邮发货</text>
|
|
|
+ <view class="line" v-if="userinfo.isShow==1&&isuser==false"></view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <text class="text">药师服务</text>
|
|
|
+ <view class="line"></view>
|
|
|
+ <text class="text">隐私保护</text>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <!-- 购买人数、库存 -->
|
|
|
+ <view class="inventor" v-if="userinfo.isShow==1&&isuser==false">
|
|
|
+ <view class="left">
|
|
|
+ <!-- <view class="head-box">
|
|
|
+ <view class="head" v-for="(item,j) in 5" :key="j">
|
|
|
+ <image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/head.jpg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="num-box">
|
|
|
+ 已有 <text class="text">{{product.sales}}</text> 人购买
|
|
|
+ <view v-if=" purchaseLimit > 0" class="limit-text">
|
|
|
+ 限购{{purchaseLimit}}件<text v-if="remainingPurchaseLimit !== null && remainingPurchaseLimit >= 0">,已购{{purchaseLimit - remainingPurchaseLimit}}件</text>
|
|
|
+ </view>
|
|
|
+ </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">
|
|
|
+ <view class="label">产品说明书</view>
|
|
|
+ <view class="label">查看</view>
|
|
|
+
|
|
|
+ </view> -->
|
|
|
+ <!-- 图文详情 -->
|
|
|
+ <view class="det-box">
|
|
|
+ <view class="title">图文详情</view>
|
|
|
+ <view class="inner">
|
|
|
+ <view v-html="product.description" style="font-size:0"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <!-- userinfo.isShow==1&& -->
|
|
|
+ <view class="btn-foot" v-if="isuser==false">
|
|
|
+ <view class="menu-box">
|
|
|
+ <!-- <view class="item" @click="goHome">
|
|
|
+ <image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/back_home.png"
|
|
|
+ mode=""></image>
|
|
|
+ <text class="label">首页</text>
|
|
|
+ </view>
|
|
|
+ <view class="item" style="position: relative;">
|
|
|
+ <image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/consult_small.png"
|
|
|
+ mode=""></image>
|
|
|
+ <text class="label">咨询</text>
|
|
|
+ <button class="contact-btn" open-type="contact"></button>
|
|
|
+ </view>
|
|
|
+ <view class="item" @click="toCart('./cart')">
|
|
|
+ <uni-badge size="small" :text="cartCount" absolute="rightTop" type="error">
|
|
|
+ <image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/cart36.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="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 form-item" v-if="stores.length>0">
|
|
|
+ <text class="label">所属门店</text>
|
|
|
+ <picker class="birth-picker" mode="selector" :value="storeIdx" :range="storeNames" @change="pickerChange" @columnchange="pickerColumnchange">
|
|
|
+ <view class="right-box">
|
|
|
+ <view class="input-box">
|
|
|
+ <input type="text" v-model="storeName" placeholder="请选择门店" class="form-input" disabled="disabled" />
|
|
|
+ </view>
|
|
|
+ <image class="arrow" src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/arrow_gray.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <!-- 规格 -->
|
|
|
+ <view class="spec-box">
|
|
|
+ <view v-for="(item,index) in attrs" :key="index">
|
|
|
+ <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://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/jian.png"
|
|
|
+ mode=""></image>
|
|
|
+ <image v-else
|
|
|
+ src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/jian2.png"
|
|
|
+ mode=""></image>
|
|
|
+ </view>
|
|
|
+ <input type="number" @change="changeNum" v-model="specNum" />
|
|
|
+ <view class="img-box" @click="addNum()">
|
|
|
+ <image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/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="../../static/logo.png"></image>
|
|
|
+ <text class="text">加载中...</text>
|
|
|
+ </view>
|
|
|
+ <CustomToast ref="customToast">
|
|
|
+ </CustomToast>
|
|
|
+ <!-- <u-modal :show="showModal" title="温馨提示" content="处方药须凭处方在药师指导下购买和使用" @confirm="hideModal()"></u-modal> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {CustomToast} from '@/components/custom-toast.vue';
|
|
|
+
|
|
|
+ import {
|
|
|
+ getDicts
|
|
|
+ } from '@/api/index'
|
|
|
+ import {
|
|
|
+ getUserInfo
|
|
|
+ } from '@/api/user'
|
|
|
+ import {
|
|
|
+ getProductDetails,
|
|
|
+ getCartCount,
|
|
|
+ addCart
|
|
|
+ } from '@/api/product'
|
|
|
+ import popupBottom from '@/components/px-popup-bottom/px-popup-bottom.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ item: {},
|
|
|
+ popupBottom,
|
|
|
+ CustomToast
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loadding: true,
|
|
|
+ buyText: "立即购买",
|
|
|
+ // mTitle:"温馨提示",
|
|
|
+ // mContent:"处方药须凭处方在药师指导下购买和使用",
|
|
|
+ type: null,
|
|
|
+ productValueSelect: {
|
|
|
+ price: 0,
|
|
|
+ serviceFee: 0
|
|
|
+ },
|
|
|
+ banner: [],
|
|
|
+ productId: null,
|
|
|
+ attrs: [],
|
|
|
+ values: [],
|
|
|
+ stores: [],
|
|
|
+ storeId: null,
|
|
|
+ storeNames: [],
|
|
|
+ storeIdx: 0,
|
|
|
+ storeName: "",
|
|
|
+ product: {
|
|
|
+ price: 0,
|
|
|
+ otPrice: 0,
|
|
|
+ },
|
|
|
+ showModal: false,
|
|
|
+ // 当前轮播的图片
|
|
|
+ activeBanner: 1,
|
|
|
+ // 购物车数量
|
|
|
+ cartCount: 0,
|
|
|
+ // 规格弹窗
|
|
|
+ specVisible: false,
|
|
|
+ // 规格数量
|
|
|
+ specNum: 1,
|
|
|
+ config: null,
|
|
|
+ showServiceFee: false,
|
|
|
+ selectVal: "",
|
|
|
+ userinfo: [],
|
|
|
+ isuser: false,
|
|
|
+ remainingPurchaseLimit:null,
|
|
|
+ purchaseLimit:0, // 总限购数量
|
|
|
+ courseId:null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ console.log("qxj options:" + JSON.stringify(options));
|
|
|
+ uni.setStorageSync('urlInfo', 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.utils.urlToObj(url)
|
|
|
+ uni.setStorageSync('tuiUserId', obj.userId);
|
|
|
+ }
|
|
|
+ if(options.courseId){
|
|
|
+ this.courseId=options.courseId
|
|
|
+ }
|
|
|
+ uni.showShareMenu({
|
|
|
+ withShareTicket: true,
|
|
|
+ //小程序的原生菜单中显示分享按钮,才能够让发送给朋友与分享到朋友圈两个按钮可以点击
|
|
|
+ menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
|
|
|
+ })
|
|
|
+ this.getDicts();
|
|
|
+ this.productId = options.productId;
|
|
|
+ if (this.utils.checkToken()) {
|
|
|
+ this.getCartCount();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getProductDetails();
|
|
|
+ if (uni.getStorageSync('AppToken')) {
|
|
|
+ this.getuser()
|
|
|
+ } else {
|
|
|
+ this.isuser = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //发送给朋友
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ if (this.utils.isLogin()) {
|
|
|
+ var user = JSON.parse(uni.getStorageSync('userInfo'))
|
|
|
+ return {
|
|
|
+ title: this.product.productName,
|
|
|
+ path: '/pages/shopping/productDetails?productId=' + this.product.productId + "&userId=" + user.userId,
|
|
|
+ imageUrl: '/static/logo.jpg' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //分享到朋友圈
|
|
|
+ onShareTimeline(res) {
|
|
|
+ if (this.utils.isLogin()) {
|
|
|
+ var user = JSON.parse(uni.getStorageSync('userInfo'))
|
|
|
+ return {
|
|
|
+ title: this.product.productName,
|
|
|
+ query: 'productId=' + this.product.productId + "&userId=" + user.userId, //页面参数
|
|
|
+ imageUrl: '/static/logo.jpg' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getuser() {
|
|
|
+ getUserInfo().then(
|
|
|
+ res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ if (res.user != null) {
|
|
|
+ this.userinfo = res.user;
|
|
|
+ console.log(this.userinfo)
|
|
|
+ uni.setStorageSync('userInfo', JSON.stringify(res.user));
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: "请求失败",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ 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.remainingPurchaseLimit !== null && typeof this.remainingPurchaseLimit === 'number') {
|
|
|
+ // 如果限购数量为0,提示库存不足
|
|
|
+ if (this.remainingPurchaseLimit === 0) {
|
|
|
+ this.$refs.customToast.show({
|
|
|
+ title: `该商品限购:${this.purchaseLimit}件\n已达购买上限`,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ // uni.showToast({
|
|
|
+ // icon: 'none',
|
|
|
+ // title: "该商品限购:" + this.purchaseLimit +",已达到购买上限",
|
|
|
+ // });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 如果购买数量超过限购数量,提示
|
|
|
+ if (this.specNum > this.remainingPurchaseLimit) {
|
|
|
+ this.$refs.customToast.show({
|
|
|
+ title: "购买数量不能超过限购数量:" + this.remainingPurchaseLimit,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ // uni.showToast({
|
|
|
+ // icon: 'none',
|
|
|
+ // title: "购买数量不能超过限购数量:" + this.remainingPurchaseLimit,
|
|
|
+ // });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.specNum == 0) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: "购买商品数量必须大于0",
|
|
|
+ });
|
|
|
+ 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") {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/shopping/confirmOrder?type=' + this.type + "&cartIds=" + res
|
|
|
+ .id + "&orderType=" + this.orderType + "&storeId=" + this.storeId +"&courseId="+this.courseId
|
|
|
+ })
|
|
|
+ } 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.product = res.product;
|
|
|
+ this.remainingPurchaseLimit = res.remainingPurchaseLimit;
|
|
|
+ // 如果接口返回了总限购数量和已购买数量,也保存
|
|
|
+ if (res.product.purchaseLimit !== null) {
|
|
|
+ this.purchaseLimit = res.product.purchaseLimit;
|
|
|
+ }
|
|
|
+ if (this.product.productType == 1) {
|
|
|
+ this.buyText = "立即购买"
|
|
|
+ } else if (this.product.productType == 2) {
|
|
|
+ this.showModal = true;
|
|
|
+ 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
|
|
|
+ });
|
|
|
+ this.values = res.productValues;
|
|
|
+ this.choseSpec(0, 0)
|
|
|
+ // this.stores=res.stores;
|
|
|
+ // this.storeNames=this.stores.map(store => store.storeName);
|
|
|
+ // if(this.stores.length>0){
|
|
|
+ // this.storeName=this.storeNames[this.storeIdx];
|
|
|
+ // this.storeId=this.stores[this.storeIdx].storeId;
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/home/index',
|
|
|
+ })
|
|
|
+ }, 2000)
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ getCartCount() {
|
|
|
+ let data = {
|
|
|
+ productId: this.productId
|
|
|
+ };
|
|
|
+ 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/home/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 跳转页面
|
|
|
+ navgetTo(url) {
|
|
|
+ this.utils.isLogin().then(res => {
|
|
|
+ if (res) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toCart(url) {
|
|
|
+ this.utils.isLogin().then(res => {
|
|
|
+ if (res) {
|
|
|
+ uni.switchTab({
|
|
|
+ url: url
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加入购物车
|
|
|
+ addCart(type) {
|
|
|
+ if (type == 'buy') {
|
|
|
+ let userInfoStr = uni.getStorageSync('userInfo');
|
|
|
+ if(Object.prototype.toString.call(userInfoStr) == '[object String]'){
|
|
|
+ userInfoStr = JSON.parse(userInfoStr)
|
|
|
+ }
|
|
|
+ if (!userInfoStr || userInfoStr && !userInfoStr.maOpenId) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/auth/login'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // this.utils.isLogin().then(res => {
|
|
|
+ if (this.$isLogin()) {
|
|
|
+ this.type = type;
|
|
|
+ this.specVisible = true
|
|
|
+ }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // 规格选择
|
|
|
+ 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]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let selectVal = values.sort().join(","); //返回值:默认
|
|
|
+ this.selectVal = selectVal;
|
|
|
+ // var valueSelect=this.values.filter((item)=>{
|
|
|
+ // return item.sku==selectVal;
|
|
|
+ // });
|
|
|
+ var valueSelect = this.getValueSelect();
|
|
|
+ console.log("qxj valueSelect:" + valueSelect);
|
|
|
+ if (valueSelect != null && valueSelect.length > 0) {
|
|
|
+ this.productValueSelect = valueSelect[0];
|
|
|
+ }
|
|
|
+ console.log("qxj productValueSelect:" + JSON.stringify(this.productValueSelect));
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ // 检查限购数量
|
|
|
+ if (this.remainingPurchaseLimit !== null && typeof this.remainingPurchaseLimit === 'number' && this.specNum > this.remainingPurchaseLimit) {
|
|
|
+ this.specNum = this.remainingPurchaseLimit;
|
|
|
+ this.$refs.customToast.show({
|
|
|
+ title: `该商品限购:${this.remainingPurchaseLimit}件\n已达购买上限`,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ // uni.showToast({
|
|
|
+ // icon: 'none',
|
|
|
+ // title: "该商品限购:" + this.remainingPurchaseLimit + "次,已达购买上限",
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 数量减法
|
|
|
+ lessNum() {
|
|
|
+ this.specNum--
|
|
|
+ if (this.specNum < 1) {
|
|
|
+ this.specNum = 1
|
|
|
+ }
|
|
|
+ if (this.specNum >= this.productValueSelect.stock) {
|
|
|
+ this.specNum = this.productValueSelect.stock
|
|
|
+ }
|
|
|
+ // 检查限购数量
|
|
|
+ if (this.remainingPurchaseLimit !== null && typeof this.remainingPurchaseLimit === 'number' && this.specNum > this.remainingPurchaseLimit) {
|
|
|
+ this.specNum = this.remainingPurchaseLimit;
|
|
|
+ this.$refs.customToast.show({
|
|
|
+ title: `该商品限购:${this.remainingPurchaseLimit}件\n已达购买上限`,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ // uni.showToast({
|
|
|
+ // icon: 'none',
|
|
|
+ // title: "该商品限购:" + this.remainingPurchaseLimit + "次,已达购买上限",
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 数量加法
|
|
|
+ addNum() {
|
|
|
+ this.specNum++
|
|
|
+ if (this.specNum >= this.productValueSelect.stock) {
|
|
|
+ this.specNum = this.productValueSelect.stock
|
|
|
+ }
|
|
|
+ // 检查限购数量
|
|
|
+ if (this.remainingPurchaseLimit !== null && typeof this.remainingPurchaseLimit === 'number' && this.specNum > this.remainingPurchaseLimit) {
|
|
|
+ this.specNum = this.remainingPurchaseLimit;
|
|
|
+ this.$refs.customToast.show({
|
|
|
+ title: `该商品限购:${this.remainingPurchaseLimit}件\n已达购买上限`,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ // uni.showToast({
|
|
|
+ // icon: 'none',
|
|
|
+ // title: "该商品限购:" + this.remainingPurchaseLimit + "次,已达购买上限",
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 确定选择该规格
|
|
|
+ submit() {
|
|
|
+ this.specVisible = false
|
|
|
+ this.doAddCart(this.type);
|
|
|
+ },
|
|
|
+ hideModal() {
|
|
|
+ this.showModal = false;
|
|
|
+ },
|
|
|
+ getValueSelect() {
|
|
|
+ var valueSelect = this.values.filter((item) => {
|
|
|
+ return item.sku == this.selectVal;
|
|
|
+ });
|
|
|
+ return valueSelect;
|
|
|
+ },
|
|
|
+ pickerChange(e) {
|
|
|
+ console.log("pickerChange index:" + e.detail.value);
|
|
|
+ var valueSelect = this.getValueSelect();
|
|
|
+ this.productValueSelect = valueSelect[0];
|
|
|
+
|
|
|
+ },
|
|
|
+ pickerColumnchange(e) {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .shop-banner {
|
|
|
+ height: 756upx;
|
|
|
+ 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: 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://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .det-info {
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 36upx 30upx 25upx;
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #333;
|
|
|
+ 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 10upx;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .old {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #BBBBBB;
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-box {
|
|
|
+ width: 120upx;
|
|
|
+ height: 46upx;
|
|
|
+ border: 1px solid #FF233C;
|
|
|
+ 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: #FF233C;
|
|
|
+ }
|
|
|
+
|
|
|
+ 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, #66b2ef 0%, #FF233C 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 {
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 36upx;
|
|
|
+ padding: 18upx 0 23upx;
|
|
|
+ border-bottom: 1px solid #f7f7f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .safe-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 24upx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 20upx;
|
|
|
+ height: 24upx;
|
|
|
+ margin-right: 20upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 22upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 1px;
|
|
|
+ height: 23upx;
|
|
|
+ background: #EDEEEF;
|
|
|
+ margin: 0 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .limit-text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF6633;
|
|
|
+ margin-left: 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: 20upx 30upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 1.8;
|
|
|
+ margin-top: 10upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 1.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .det-box {
|
|
|
+ margin-top: 10upx;
|
|
|
+ padding: 40upx 30upx 130upx 30upx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 1;
|
|
|
+ margin-bottom: 25upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.uni-badge--x) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.uni-badge) {
|
|
|
+ border: none;
|
|
|
+ background-color: #FF3636;
|
|
|
+ font-family: Roboto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.buy {
|
|
|
+ background: #FF233C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 #8AD5CE;
|
|
|
+ color: #FF233C;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: #FF233C;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item {
|
|
|
+ padding: 30upx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ border-bottom: 1px solid #F1F1F1;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ width: 180upx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 30upx;
|
|
|
+ line-height: 44upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222222;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-input {
|
|
|
+ font-size: 30upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-textarea {
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #999999;
|
|
|
+ height: 100upx;
|
|
|
+ padding: 4upx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .birth-picker {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .input-box {
|
|
|
+ width: 470upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow {
|
|
|
+ width: 13upx;
|
|
|
+ height: 23upx;
|
|
|
+ margin-left: 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|