2237 lines
57 KiB
Vue
2237 lines
57 KiB
Vue
<template>
|
||
<scroll-view
|
||
class="page-body"
|
||
scroll-y="true"
|
||
@scroll="handlePageScroll"
|
||
:scroll-into-view="scrollView"
|
||
>
|
||
<div class="product-image" :style="{ marginTop: menu.top - 4 + 'px' }">
|
||
<view
|
||
class="header"
|
||
:style="{
|
||
height: menu.bottom + 'px',
|
||
background: showTopFixed ? '#fff' : '',
|
||
}"
|
||
>
|
||
<view
|
||
class="headerBottom"
|
||
:style="{ bottom: 0, height: menu.height + 'px' }"
|
||
>
|
||
<view class="backArrowBox">
|
||
<image
|
||
class="img"
|
||
@click="handleBackIndex"
|
||
src="/static/images/home/backArrowblack.svg"
|
||
/>
|
||
<view class="line"></view>
|
||
<image
|
||
class="img"
|
||
src="/static/images/home/export.svg"
|
||
@click="handleShowExportBox"
|
||
/>
|
||
</view>
|
||
|
||
<view class="tabBox" v-if="showTopFixed">
|
||
<view
|
||
@click="handleChangePageTab(1)"
|
||
:class="pageTab === 1 ? 'tabItem selectTabItem' : 'tabItem'"
|
||
>商品</view
|
||
>
|
||
<view
|
||
@click="handleChangePageTab(2)"
|
||
:class="pageTab === 2 ? 'tabItem selectTabItem' : 'tabItem'"
|
||
>详情</view
|
||
>
|
||
</view>
|
||
<view class="rightContent"></view>
|
||
|
||
<view
|
||
class="moreFunBox"
|
||
:style="{ top: menu.top + 'px' }"
|
||
v-if="showExportFun"
|
||
>
|
||
<view class="triangle"></view>
|
||
<view class="funList">
|
||
<view
|
||
class="funItem"
|
||
v-for="(item, index) in funList"
|
||
:key="index"
|
||
@click="handleExpentGo(item)"
|
||
>
|
||
<image class="funItemIcon" :src="item.src" />
|
||
<text
|
||
class="funItemText"
|
||
:style="{
|
||
border: index + 1 === funList.length ? 'none' : '',
|
||
}"
|
||
>{{ item.label }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<block v-if="good.List">
|
||
<swiper
|
||
scroll-x="true"
|
||
circular="true"
|
||
class="banner"
|
||
indicator-dots="true"
|
||
indicator-active-color="#ff6d00"
|
||
autoplay
|
||
id="banner"
|
||
interval="3000"
|
||
@change="swiperChange"
|
||
:current="pageMsg.current"
|
||
>
|
||
<swiper-item v-for="(img, i) in good.List" :key="i">
|
||
<image
|
||
mode="aspectFill"
|
||
lazy-load="true"
|
||
:src="img.IMAGE_URL"
|
||
@click="handlePreviewSwiper(img, i)"
|
||
></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- <div class="swiper-dots" v-if="pageMsg.imgeCount > 0">
|
||
<div class="dot">
|
||
{{ pageMsg.current + 1 }}/{{ pageMsg.imgeCount }}
|
||
</div>
|
||
</div> -->
|
||
</block>
|
||
<block v-else>
|
||
<image
|
||
mode="aspectFill"
|
||
lazy-load="true"
|
||
:src="good.DEFAULT_IMG"
|
||
></image>
|
||
</block>
|
||
</div>
|
||
|
||
<hr />
|
||
<div class="product-info">
|
||
<div
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
"
|
||
>
|
||
<div class="price-box">
|
||
<div class="vip-price">
|
||
<span class="unit">¥</span>
|
||
<span style="font-weight: bold">
|
||
{{ good.bigNumber || "" }}.{{ good.smallNumber || "00" }}
|
||
<!-- {{ good.COMMODITY_MEMBERPRICE || "-" }} -->
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div v-if="false">
|
||
<button class="share-btn" @tap="handleShowPopup">
|
||
<!-- <van-icon name="share" color="#ea3323" size="20px" /> -->
|
||
<div style="width: 16px; height: 16px">
|
||
<image
|
||
style="width: 16px; height: 16px"
|
||
src="/static/images/home/share.svg"
|
||
/>
|
||
</div>
|
||
<div>分享</div>
|
||
</button>
|
||
<!-- <span class="sale-count">
|
||
{{
|
||
good.COMMODITY_STOCK > 0 ? "库存 " + good.COMMODITY_STOCK : "售罄"
|
||
}}</span
|
||
>
|
||
<span class="sale-count">已售 {{ good.SALE_COUNT }}</span> -->
|
||
</div>
|
||
</div>
|
||
<div class="product-title">
|
||
{{ good.COMMODITY_NAME || "-" }}
|
||
</div>
|
||
<div class="product-brand">
|
||
<view class="oldPrice"
|
||
>原价：¥ {{ good.RETbigNumber || "" }}.{{
|
||
good.RETsmallNumber || "00"
|
||
}}</view
|
||
>
|
||
<view class="inventory">库存：{{ good.COMMODITY_STOCK || "0" }}</view>
|
||
<view class="inventory">销量：{{ good.COMMODITY_EN || "0" }}</view>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-detail" style="padding-bottom: 16rpx">
|
||
<div
|
||
class="detail-unit"
|
||
style="flex-direction: column"
|
||
id="detail"
|
||
v-if="good.COMMODITY_DESC"
|
||
>
|
||
<div
|
||
class="detail-title desc-ico"
|
||
style="margin-bottom: 32rpx; box-sizing: border-box; padding: 0 32rpx"
|
||
>
|
||
商品备注
|
||
</div>
|
||
<div class="detail-right">
|
||
{{ good.COMMODITY_DESC || "暂无" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-detail">
|
||
<div
|
||
class="detail-unit"
|
||
style="flex-direction: column"
|
||
id="detail"
|
||
v-if="!(good.ContentImgList && good.ContentImgList.length > 0)"
|
||
>
|
||
<div
|
||
class="detail-title desc-ico"
|
||
style="margin-bottom: 32rpx; box-sizing: border-box; padding: 0 32rpx"
|
||
>
|
||
商品简介
|
||
</div>
|
||
<div class="detail-right">
|
||
<rich-text :nodes="good.COMMODITY_INTRO"></rich-text>
|
||
<!-- {{ good.COMMODITY_DESC || "暂无" }} -->
|
||
</div>
|
||
</div>
|
||
<!-- <div class="">
|
||
<div class="detail-unit rate-title">
|
||
<div class="detail-title desc-ico">
|
||
评价
|
||
</div>
|
||
<div class="rate-desc" @click="goRate" v-show="pageMsg.rateTotal > 0">
|
||
<span>共{{ pageMsg.rateTotal }}条评论</span>
|
||
<van-icon
|
||
name="arrow"
|
||
size="20rpx"
|
||
color="#262626"
|
||
custom-style="margin-left: 8rpx;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<block
|
||
v-if="good.ContentImgList && good.ContentImgList.length > 0"
|
||
id="detail"
|
||
>
|
||
<!-- ContentImgList -->
|
||
<div class="detail-unit">
|
||
<span class="detail-title desc-ico">产品介绍</span>
|
||
</div>
|
||
<div class="detail-image-box">
|
||
<block
|
||
v-for="(img, i) in good.ContentImgList"
|
||
:key="i"
|
||
v-show="detailImgList[i]"
|
||
>
|
||
<image
|
||
class="img"
|
||
mode="aspectFill"
|
||
lazy-load="true"
|
||
:src="img.IMAGE_URL"
|
||
@load="loadDetailImg($event, i)"
|
||
@click="handlePreviewDetailImg(img)"
|
||
></image>
|
||
<!-- :style="
|
||
'width:' +
|
||
detailImgList[i].width +
|
||
'rpx; height:' +
|
||
detailImgList[i].height +
|
||
'rpx;'
|
||
" -->
|
||
</block>
|
||
</div>
|
||
</block>
|
||
</div>
|
||
|
||
<div class="product-btn-box">
|
||
<view class="leftBtn">
|
||
<view class="btnItem" @click="handleBackIndex">
|
||
<image
|
||
class="btnItemImg"
|
||
src="https://eshangtech.com/ShopICO/shoppingMall/home.png"
|
||
/>
|
||
<text class="btnItemText">首页</text>
|
||
</view>
|
||
<view class="btnItem">
|
||
<image class="btnItemImg" src="/static/images/home/collect.svg" />
|
||
<text class="btnItemText">收藏</text>
|
||
</view>
|
||
<view class="btnItem" @click="handleShowShopCar">
|
||
<image class="btnItemImg" src="/static/images/home/shopCarIcon.svg" />
|
||
<text class="btnItemText">购物车</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="home-btn" url="/pages/home/index" open-type="switchTab"
|
||
>首页</view
|
||
> -->
|
||
<view class="rightBtn">
|
||
<div class="addCarBtn" @click="handleShowShopPopup(1)">加入购物车</div>
|
||
<div
|
||
class="addOrder"
|
||
@click="handleShowShopPopup(2)"
|
||
v-if="good.COMMODITY_STOCK > 0"
|
||
>
|
||
立即购买
|
||
</div>
|
||
<div
|
||
class="sellOut"
|
||
@click="handleShowShopPopup(3)"
|
||
v-if="good.COMMODITY_STOCK === 0"
|
||
>
|
||
已售罄
|
||
</div>
|
||
</view>
|
||
<!-- <div
|
||
class="buynow-btn"
|
||
@click="getMemberPoint(1)"
|
||
v-if="good.COMMODITY_STOCK > 0 && good.PAY_METHOD !== 1000"
|
||
>
|
||
立即兑换
|
||
</div>
|
||
<div
|
||
class="join-shopCart"
|
||
@click="getMemberPoint(2)"
|
||
v-if="good.COMMODITY_STOCK > 0 && good.PAY_METHOD !== 2000"
|
||
>
|
||
立即购买
|
||
</div>
|
||
<div
|
||
class="buynow-btn"
|
||
style="background: #eee; color: #999"
|
||
v-if="good.COMMODITY_STOCK < 1"
|
||
>
|
||
已售罄
|
||
</div> -->
|
||
</div>
|
||
|
||
<UniPopup
|
||
:show="showShareBox"
|
||
position="bottom"
|
||
overlay="false"
|
||
@close="handleClosePopup"
|
||
ref="popup"
|
||
>
|
||
<view class="share-popup" style="background-color: #fff">
|
||
<view class="share-divider">
|
||
<text>分享</text>
|
||
</view>
|
||
<!-- <van-divider contentPosition="center">分享</van-divider> -->
|
||
<view class="share-pop-btn">
|
||
<button open-type="share" @tap="handleClosePopup">
|
||
<image
|
||
src="https://eshangtech.com/ShopICO/icos/fxhy.png"
|
||
act
|
||
></image>
|
||
<text>分享给好友</text>
|
||
</button>
|
||
<button @tap="creatPageQR">
|
||
<image src="https://eshangtech.com/ShopICO/icos/fxpyq.png"></image>
|
||
<text>生成分享海报</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</UniPopup>
|
||
|
||
<uni-popup ref="shopPopup" :safe-area="false">
|
||
<view class="shopPopupBox">
|
||
<view class="shopPopupContent">
|
||
<div class="detailTop">
|
||
<image
|
||
class="detailImg"
|
||
:src="good.DEFAULT_IMG || '/static/images/home/defultImg.png'"
|
||
/>
|
||
<div class="box">
|
||
<div class="nameTop">
|
||
<text class="name">{{ good.COMMODITY_NAME }}</text>
|
||
<image
|
||
class="closeIcon"
|
||
@click="handleClosePop"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"
|
||
/>
|
||
</div>
|
||
<div class="priceBox">
|
||
<text class="priceIcon">￥</text>
|
||
<text class="price">{{ good.COMMODITY_MEMBERPRICE }}</text>
|
||
<text class="unit">/{{ good.COMMODITY_UNIT }}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detailMessage">
|
||
<p class="detailTitle">详细信息</p>
|
||
<text class="detailText"></text>
|
||
</div>
|
||
<div class="orderDetail">
|
||
<p class="orderTitle">下单信息</p>
|
||
<div class="numBox">
|
||
<text class="numTitle">购买数量</text>
|
||
<div class="cartcontrol">
|
||
<div
|
||
class="subtract"
|
||
@click="handleDetailSubtract($event, good)"
|
||
>
|
||
<image
|
||
class="img"
|
||
src="/static/images/home/subtract.svg"
|
||
></image>
|
||
</div>
|
||
<input
|
||
class="cart-count"
|
||
confirm-type="done"
|
||
type="digit"
|
||
:maxlength="inputMaxLength"
|
||
style="background: #fff; text-align: center; width: 100px"
|
||
placeholder="0"
|
||
:value="good.count"
|
||
@input="handleNumber"
|
||
/>
|
||
<div class="subtract" @click="handleDetailAdd($event, good)">
|
||
<image
|
||
class="img"
|
||
src="/static/images/home/addIcon.svg"
|
||
></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sizeBox">
|
||
<text class="sizeTitle">规格</text>
|
||
<div class="sizeList">
|
||
<div
|
||
:class="
|
||
good.COMMODITY_RULE === item.COMMODITY_MULTI_ID
|
||
? 'sizeItem selectSizeItem'
|
||
: 'sizeItem'
|
||
"
|
||
v-for="(item, index) in good.SKULIST"
|
||
:key="index"
|
||
@click="handleChangeSelectSKULIST(item.COMMODITY_MULTI_ID)"
|
||
>
|
||
{{ item.COMMODITY_NAME }}
|
||
</div>
|
||
<!-- <div class="sizeItem">{{ good.COMMODITY_UNIT }}</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="descBox">
|
||
<input
|
||
class="desc"
|
||
:value="good.SALEDETAIL_DESC"
|
||
placeholder="请填写商品备注"
|
||
@input="handleDesc($event, good)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
|
||
<view class="bottomBtn">
|
||
<view
|
||
class="shopCarBtn"
|
||
v-if="bottomBtnType === 1"
|
||
@click="handleAddShopCar"
|
||
>加入购物车</view
|
||
>
|
||
<view
|
||
class="makeOrderBtn"
|
||
v-if="bottomBtnType === 2"
|
||
@click="handleMakeOrder"
|
||
>立即购买</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</scroll-view>
|
||
</template>
|
||
<script>
|
||
// import rateItem from "../../rate/components/rateItem";
|
||
import { mapGetters, mapActions, mapMutations } from "vuex";
|
||
import UniPopup from "../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
|
||
export default {
|
||
data() {
|
||
const windows = uni.getSystemInfoSync();
|
||
|
||
return {
|
||
pageMsg: {
|
||
current: 0,
|
||
imgeCount: 0,
|
||
goodId: "",
|
||
buyCount: 1,
|
||
rateTotal: 0,
|
||
memberPoint: 0,
|
||
money: 0,
|
||
},
|
||
isShowCount: 0,
|
||
showSharePro: false, // 是否生成分享海报
|
||
showShareBox: false, // 是否展示分享选项
|
||
good: {},
|
||
rateList: [], // 评价列表
|
||
detailImgList: [],
|
||
windowMsg: {
|
||
width: 375,
|
||
height: 667,
|
||
ratio: 0.5,
|
||
scale: windows.pixelRatio,
|
||
},
|
||
menu: {},
|
||
bottomBtnType: 0,
|
||
shopCarList: [], // 当前的购物车
|
||
funList: [
|
||
{ label: "首页", value: 1, src: "/static/images/shopTabbar/home.png" },
|
||
{
|
||
label: "分类",
|
||
value: 2,
|
||
src: "/static/images/shopTabbar/classification.png",
|
||
},
|
||
{
|
||
label: "购物车",
|
||
value: 3,
|
||
src: "/static/images/shopTabbar/shopCar.png",
|
||
},
|
||
], // 展开来的方法列表
|
||
showExportFun: false, // 显示展开的悬浮框
|
||
showTopFixed: false, // 顶部显示的锚点tab
|
||
pageTab: 1, // 锚点tab的选中
|
||
scrollView: "", // 滚动的锚点
|
||
pageType: "", // 页面类型 UnionMall 为工会商城
|
||
};
|
||
},
|
||
components: {
|
||
// rateItem,
|
||
UniPopup,
|
||
},
|
||
computed: {
|
||
...mapGetters("shoppingCart", {
|
||
totalNum: "goodNum",
|
||
}),
|
||
...mapGetters(["user"]),
|
||
},
|
||
methods: {
|
||
...mapActions("shoppingCart", {
|
||
addGood: "ADDGOOD",
|
||
addCate: "ADDCATE",
|
||
}),
|
||
...mapMutations("shoppingCart", {
|
||
setOrder: "ORDERGOOD",
|
||
}),
|
||
...mapMutations(["setInvitedCode"]),
|
||
handleClosePop() {
|
||
this.good.COMMODITY_RULE = undefined;
|
||
this.$refs.shopPopup.close();
|
||
},
|
||
// 改变当前选中的规格
|
||
handleChangeSelectSKULIST(value) {
|
||
console.log("value", value);
|
||
this.good.COMMODITY_RULE = value;
|
||
console.log("this.good", this.good);
|
||
},
|
||
// 点击的锚点
|
||
handleChangePageTab(value) {
|
||
this.pageTab = value;
|
||
if (value === 1) {
|
||
this.scrollView = "banner";
|
||
} else {
|
||
this.scrollView = "detail";
|
||
}
|
||
},
|
||
// 预览轮播图
|
||
handlePreviewSwiper(obj) {
|
||
console.log("obj", obj);
|
||
let imgList = [];
|
||
if (this.good.List && this.good.List.length > 0) {
|
||
this.good.List.forEach((item) => {
|
||
imgList.push(item.IMAGE_URL);
|
||
});
|
||
}
|
||
uni.previewImage({
|
||
current: obj.IMAGE_URL, // 当前显示图片的http链接
|
||
urls: imgList, // 需要预览的图片http链接列表
|
||
});
|
||
},
|
||
// 预览详情图片
|
||
handlePreviewDetailImg(obj) {
|
||
console.log("obj", obj);
|
||
let imgList = [];
|
||
if (this.good.List && this.good.List.length > 0) {
|
||
this.good.List.forEach((item) => {
|
||
imgList.push(item.IMAGE_URL);
|
||
});
|
||
}
|
||
uni.previewImage({
|
||
current: obj.IMAGE_URL, // 当前显示图片的http链接
|
||
urls: imgList, // 需要预览的图片http链接列表
|
||
});
|
||
},
|
||
handlePageScroll(e) {
|
||
// console.log("handlePageScroll", e.detail.scrollTop);
|
||
let scrollTop = e.detail.scrollTop;
|
||
if (scrollTop < 80) {
|
||
this.showTopFixed = false;
|
||
this.scrollView = "";
|
||
} else {
|
||
this.showTopFixed = true;
|
||
}
|
||
if (scrollTop < 300) {
|
||
this.scrollView = "banner";
|
||
this.pageTab = 1;
|
||
} else {
|
||
this.scrollView = "detail";
|
||
this.pageTab = 2;
|
||
}
|
||
|
||
this.showExportFun = false;
|
||
},
|
||
// 显示展开功能
|
||
handleShowExportBox() {
|
||
this.showExportFun = !this.showExportFun;
|
||
},
|
||
// 跳转对应的
|
||
handleExpentGo(obj) {
|
||
if (obj.value === 1) {
|
||
uni.redirectTo({
|
||
url: "/pages/shopMallPage/index/index",
|
||
});
|
||
} else if (obj.value === 2) {
|
||
uni.redirectTo({
|
||
url: "/pages/shopMallPage/shopType/index",
|
||
});
|
||
} else if (obj.value === 3) {
|
||
uni.redirectTo({
|
||
url: "/pages/shopMallPage/shopCar/index",
|
||
});
|
||
}
|
||
},
|
||
// 返回首页
|
||
handleBackIndex() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
// 显示购物车
|
||
handleShowShopCar() {
|
||
uni.redirectTo({
|
||
url: "/pages/shopMallPage/shopCar/index",
|
||
});
|
||
},
|
||
// 加入购物车方法
|
||
handleAddShopCar() {
|
||
console.log("this.good", this.good);
|
||
if (this.shopCarList && this.shopCarList.length > 0) {
|
||
let nowShopList = [];
|
||
// 判断有没有一样的
|
||
let isSame = false;
|
||
this.shopCarList.forEach((item) => {
|
||
if (item.COMMODITY_BARCODE === this.good.COMMODITY_BARCODE) {
|
||
item.count += this.good.count;
|
||
item.COMMODITY_RULE = this.good.COMMODITY_RULE;
|
||
isSame = true;
|
||
}
|
||
});
|
||
if (isSame) {
|
||
nowShopList = this.shopCarList;
|
||
} else {
|
||
this.shopCarList.push(this.good);
|
||
nowShopList = this.shopCarList;
|
||
}
|
||
if (this.pageType === "UnionMall") {
|
||
this.$store.commit("unionMyShopCar", nowShopList);
|
||
} else {
|
||
this.$store.commit("myShopCar", nowShopList);
|
||
}
|
||
} else {
|
||
let nowShopList = [];
|
||
nowShopList.push(this.good);
|
||
if (this.pageType === "UnionMall") {
|
||
this.$store.commit("unionMyShopCar", nowShopList);
|
||
} else {
|
||
this.$store.commit("myShopCar", nowShopList);
|
||
}
|
||
}
|
||
uni.showToast({
|
||
title: "加入成功！",
|
||
duration: 2000,
|
||
});
|
||
|
||
setTimeout(() => {
|
||
this.$refs.shopPopup.close();
|
||
}, 2000);
|
||
},
|
||
// 立即购买方法
|
||
handleMakeOrder() {
|
||
console.log("this.good", this.good);
|
||
let nowShopList = [this.good];
|
||
|
||
if (nowShopList && nowShopList.length > 0) {
|
||
this.pageOut = true;
|
||
let orderList = [];
|
||
let noSelectList = [];
|
||
nowShopList.forEach((item) => {
|
||
item.ORDER_COUNT = item.count;
|
||
item.AVERAGE_PRICE = item.COMMODITY_RETAILPRICE;
|
||
item.cartItemAoumt = Number(
|
||
(item.AVERAGE_PRICE * item.ORDER_COUNT).toFixed(2)
|
||
);
|
||
item.ORDER_AMOUNT = Number(
|
||
(item.AVERAGE_PRICE * item.ORDER_COUNT).toFixed(2)
|
||
);
|
||
item.COMMODITY_INTRO = "";
|
||
orderList.push(item);
|
||
});
|
||
// this.$store.commit('shopcartOrder', orderList)
|
||
// 购物车改了后有些id不一样了 统一一下
|
||
if (orderList && orderList.length > 0) {
|
||
orderList.forEach((item) => {
|
||
let [big, small] = item.COMMODITY_RETAILPRICE.toString().split(".");
|
||
item.COMMODITY_INYEGER = big;
|
||
item.COMMODITY_DECIMAL = small;
|
||
// item.COMMODITY_ID = item.SELLERCOMMODITY_ID
|
||
});
|
||
}
|
||
console.log("noSelectList", noSelectList);
|
||
console.log("orderList", orderList);
|
||
let id = Number(
|
||
Math.random().toString().substr(3, 5) + Date.now()
|
||
).toString(36);
|
||
if (orderList.length > 0) {
|
||
uni.navigateTo({
|
||
url: `/pages/shopPages/settlement/index?pageType=shopCar&shopCarList=${JSON.stringify(
|
||
orderList
|
||
)}`,
|
||
});
|
||
} else {
|
||
uni.showToast({ title: "购物车内无勾选商品", icon: "none" });
|
||
}
|
||
}
|
||
},
|
||
// 减少当前商品
|
||
handleDetailSubtract(e, obj) {
|
||
if (obj.count > 0) {
|
||
obj.count -= 1;
|
||
this.good = obj;
|
||
this.$forceUpdate();
|
||
}
|
||
},
|
||
// 增加当前商品的数量
|
||
handleDetailAdd(e, obj) {
|
||
obj.count += 1;
|
||
this.good = obj;
|
||
this.$forceUpdate();
|
||
},
|
||
// 打开购物车 或 立即购买的悬浮框 1 打开购物车 2 立即购买 3售罄
|
||
handleShowShopPopup(type) {
|
||
if (type === 3) {
|
||
uni.showToast({
|
||
title: "商品已售罄",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
if (!this.user.MEMBERSHIP_ID) {
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您授权登录后再操作。",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
}
|
||
},
|
||
});
|
||
} else {
|
||
this.bottomBtnType = type;
|
||
this.$refs.shopPopup.open("bottom");
|
||
}
|
||
}
|
||
},
|
||
handleShowPopup() {
|
||
this.$refs.popup.open("bottom");
|
||
this.showShareBox = true;
|
||
},
|
||
handleClosePopup() {
|
||
this.$refs.popup.close();
|
||
this.showShareBox = false;
|
||
},
|
||
swiperChange(e) {
|
||
this.pageMsg.current = e.mp.detail.current;
|
||
},
|
||
goShop() {
|
||
uni.navigateTo({ url: "/pages/product/shopCart/index" });
|
||
},
|
||
decodeHTML(str) {
|
||
return str
|
||
.replace(/</g, "<")
|
||
.replace(/>/g, ">")
|
||
.replace(/&/g, "&")
|
||
.replace(/"/g, '"')
|
||
.replace(/ /g, " ");
|
||
},
|
||
getDetail(id) {
|
||
let _this = this;
|
||
this.$api
|
||
.getCoop({
|
||
action_type: "GetGoodsDetail",
|
||
commodityId: id,
|
||
})
|
||
.then(function (res) {
|
||
console.log("detail", res);
|
||
_this.good = res.Data;
|
||
_this.good.COMMODITY_CURRPRICE = _this.good.COMMODITY_RETAILPRICE;
|
||
_this.good.count = 1;
|
||
_this.pageMsg.current = 0;
|
||
_this.pageMsg.imgeCount = res.Data.List.length || 0;
|
||
_this.good.COMMODITY_INTRO = _this.decodeHTML(
|
||
res.Data.COMMODITY_INTRO
|
||
);
|
||
// _this.good.COMMODITY_DESC = _this.decodeHTML(res.Data.COMMODITY_DESC);
|
||
|
||
if (
|
||
_this.good.COMMODITY_MEMBERPRICE &&
|
||
_this.good.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
|
||
) {
|
||
_this.good.bigNumber =
|
||
_this.good.COMMODITY_MEMBERPRICE.toString().split(".")[0];
|
||
_this.good.smallNumber =
|
||
_this.good.COMMODITY_MEMBERPRICE.toString().split(".")[1];
|
||
} else {
|
||
_this.good.bigNumber = _this.good.COMMODITY_MEMBERPRICE;
|
||
}
|
||
|
||
if (
|
||
_this.good.COMMODITY_RETAILPRICE &&
|
||
_this.good.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
|
||
) {
|
||
_this.good.RETbigNumber =
|
||
_this.good.COMMODITY_RETAILPRICE.toString().split(".")[0];
|
||
_this.good.RETsmallNumber =
|
||
_this.good.COMMODITY_RETAILPRICE.toString().split(".")[1];
|
||
} else {
|
||
_this.good.RETbigNumber = _this.good.COMMODITY_RETAILPRICE;
|
||
}
|
||
console.log("_this.good", _this.good);
|
||
|
||
if (_this.good.COMMODITY_INTRO.indexOf("</br>") > -1) {
|
||
let desArr = _this.good.COMMODITY_INTRO.split("</br>");
|
||
_this.good.COMMODITY_INTRO = [];
|
||
desArr.forEach((element) => {
|
||
_this.good.COMMODITY_INTRO.push({
|
||
name: "p",
|
||
children: [{ type: "text", text: element }],
|
||
});
|
||
});
|
||
}
|
||
|
||
_this.good.ContentImgList.map((n) => {
|
||
_this.detailImgList.push({ width: 750, height: 400 });
|
||
});
|
||
});
|
||
},
|
||
getRate() {
|
||
// 获取商品评价
|
||
let _this = this;
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "getMallCommentList",
|
||
commodityId: this.pageMsg.goodId,
|
||
pageIndex: 1,
|
||
pageSize: 3,
|
||
})
|
||
.then((res) => {
|
||
_this.rateList = res.Data.List;
|
||
_this.pageMsg.rateTotal = res.Data.TotalCount;
|
||
});
|
||
},
|
||
goRate() {
|
||
uni.navigateTo({ url: "/pages/rate/index?id=" + this.pageMsg.goodId });
|
||
},
|
||
seePhoto(item, list) {
|
||
let u = [];
|
||
|
||
list.map((n) => {
|
||
u.push(n.IMAGE_URL);
|
||
});
|
||
uni.previewImage({
|
||
current: item, // 当前显示图片的http链接
|
||
urls: u, // 需要预览的图片http链接列表
|
||
});
|
||
},
|
||
addGoodToCartFn: function () {
|
||
// 添加商品到购物车
|
||
let cate = {
|
||
USERDEFINEDTYPE_NAME: this.good.USERDEFINEDTYPE_NAME,
|
||
USERDEFINEDTYPE_ID: this.good.USERDEFINEDTYPE_ID,
|
||
};
|
||
this.addGood(this.good);
|
||
this.addCate(cate);
|
||
this.$forceUpdate();
|
||
},
|
||
|
||
buyNow() {
|
||
let s = [];
|
||
let _this = this;
|
||
let el = this.good;
|
||
|
||
if (
|
||
_this.isShowCount === 1 &&
|
||
_this.pageMsg.memberPoint < this.pageMsg.buyCount * el.COMMODITY_POINT
|
||
) {
|
||
uni.showToast({
|
||
title: "您的积分不足",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
s.push({
|
||
COMMODITY_ID: el.COMMODITY_ID,
|
||
COMMODITY_CODE: el.COMMODITY_CODE,
|
||
COMMODITY_NAME: el.COMMODITY_NAME,
|
||
COMMODITY_BARCODE: el.COMMODITY_BARCODE,
|
||
COMMODITY_UNIT: el.COMMODITY_UNIT,
|
||
COMMODITY_RULE: el.COMMODITY_RULE,
|
||
COMMODITY_POINT: el.COMMODITY_POINT,
|
||
ORDER_COUNT: this.pageMsg.buyCount,
|
||
AVERAGE_PRICE: el.COMMODITY_RETAILPRICE,
|
||
ORDER_AMOUNT: this.pageMsg.buyCount * el.COMMODITY_RETAILPRICE,
|
||
DISCOUNT_AMOUNT: 0,
|
||
SUPPLIER_ID: el.SUPPLIER_ID,
|
||
SUPPLIER_NAME: el.SUPPLIER_NAME,
|
||
DEFAULT_IMG: el.DEFAULT_IMG,
|
||
PAY_TYPE: _this.isShowCount === 1 ? 3000 : 1000, // 支付方式 3000 积分支付
|
||
});
|
||
_this.isShowCount = 0;
|
||
_this.setOrder(s);
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/product/confirmOrder/index?type=1&nature=" +
|
||
el.COMMODITY_NATURE,
|
||
});
|
||
},
|
||
loadDetailImg(e, i) {
|
||
// 加载商品介绍图片指定原尺寸宽高
|
||
let $width = e.mp.detail.width; // 获取图片真实宽度
|
||
let $height = e.mp.detail.height;
|
||
// 将图片的datadata-index作为image对象的key,然后存储图片的宽高值
|
||
this.detailImgList[i] = {
|
||
width: $width,
|
||
height: $height,
|
||
};
|
||
this.$forceUpdate();
|
||
},
|
||
getMemberPoint(type) {
|
||
// 获取会员积分
|
||
let _this = this;
|
||
if (this.user.MEMBERSHIP_ID) {
|
||
this.$api
|
||
.getCoop({
|
||
action_type: "GetMemberPoint",
|
||
})
|
||
.then(function (rs) {
|
||
_this.pageMsg.memberPoint = rs.Data.MEMBERSHIP_POINT;
|
||
_this.pageMsg.money = rs.Data.MEMBERSHIP_POINT;
|
||
_this.isShowCount = type;
|
||
});
|
||
} else {
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "您还没有登录，快去登录吧",
|
||
confirmText: "一键登录",
|
||
confirmColor: "#498fe2",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
|
||
creatPageQR() {
|
||
// 生成当前页面小程序二维码
|
||
let _this = this;
|
||
_this.showShareBox = false;
|
||
uni.showLoading({ title: "正在加载" });
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "CreateWxCode",
|
||
page: "pages/product/productDetail/index",
|
||
scene: _this.pageMsg.goodId + "&" + _this.user.InviteCode, // 商品id & 当前用户邀请码
|
||
width: 280,
|
||
})
|
||
.then((res) => {
|
||
// let bin64 = res.Data.imgUrl
|
||
// 生成的base64二维码
|
||
// let fs = uni.getFileSystemManager()
|
||
|
||
// fs.writeFile({
|
||
// filePath: `${uni.env.USER_DATA_PATH}/` + _this.pageMsg.goodId + `pro.png`,
|
||
// data: bin64,
|
||
// encoding: 'base64',
|
||
// success (res) {
|
||
uni.getImageInfo({
|
||
src: res.Data.imgUrl,
|
||
success(res) {
|
||
let codePath = res.path;
|
||
let codeW = res.width;
|
||
|
||
uni.getImageInfo({
|
||
src: _this.good.DEFAULT_IMG, // _this.good.DEFAULT_IMG,
|
||
success: (rs) => {
|
||
let productPath = rs.path;
|
||
let productW = rs.width;
|
||
let productH = rs.height;
|
||
_this.showSharePro = true;
|
||
_this.drawImage(
|
||
productPath,
|
||
productW,
|
||
productH,
|
||
codePath,
|
||
codeW
|
||
);
|
||
},
|
||
});
|
||
},
|
||
fail(err) {
|
||
console.error(err);
|
||
},
|
||
});
|
||
// },
|
||
// fail (err) {
|
||
// console.error(err)
|
||
// }})
|
||
});
|
||
},
|
||
drawImage(productPath, productW, productH, codePath, codeW) {
|
||
// 才canvas上画海报
|
||
let _this = this;
|
||
|
||
let canv = uni.createCanvasContext("pro", this);
|
||
let ratio = uni.getSystemInfoSync().windowWidth / 750; // 适配不同机型的图片比例
|
||
let imgMaxW = _this.windowMsg.width;
|
||
// let imgMaxH = _this.windowMsg.width
|
||
let canvHeight = _this.windowMsg.height;
|
||
|
||
let paddL = 24 * ratio;
|
||
let paddT = 24;
|
||
let clipWidth = imgMaxW * ratio;
|
||
let clipHeight = ((productH * imgMaxW) / productW) * ratio;
|
||
let imgLeft = 0;
|
||
|
||
if (productH / productW > 1.5 || clipHeight > clipWidth) {
|
||
// 如果图片原图比例1：1.5则需要根据商品的高度调整适配
|
||
clipHeight = imgMaxW * ratio;
|
||
clipWidth = (clipHeight * productW) / productH;
|
||
imgLeft = (imgMaxW * ratio - clipWidth) / 2;
|
||
}
|
||
|
||
// 设置一个背景色
|
||
canv.fillStyle = "#fff";
|
||
canv.fillRect(0, 0, imgMaxW * ratio, canvHeight);
|
||
// canv.draw()
|
||
|
||
// 设置字体大小、文本颜色 （如果不先写文字 则图片无法写入）
|
||
canv.setFontSize(20 * ratio);
|
||
canv.setFillStyle("#454545");
|
||
// 简易绘制两行文本，多余...
|
||
_this.canvasTextAutoLine(
|
||
_this.good.COMMODITY_NAME,
|
||
canv,
|
||
paddL,
|
||
paddT,
|
||
28,
|
||
clipWidth - 24,
|
||
1
|
||
); // 标题
|
||
// 绘制价格
|
||
|
||
let text = _this.good.PAY_METHOD === 2000 ? "积分" : "元";
|
||
let price =
|
||
_this.good.PAY_METHOD === 2000
|
||
? _this.good.COMMODITY_POINT
|
||
: _this.good.COMMODITY_RETAILPRICE;
|
||
canv.setFontSize(30 * ratio);
|
||
canv.setFillStyle("#EA3323");
|
||
canv.fillText(price, paddL, paddT + 28 * ratio + 8);
|
||
|
||
let priceWidth = canv.measureText(price + "").width;
|
||
canv.setFontSize(16 * ratio);
|
||
canv.setFillStyle("#EA3323");
|
||
canv.fillText(text, paddL + priceWidth + 1, paddT + 28 * ratio + 8);
|
||
|
||
canv.setFontSize(16 * ratio);
|
||
canv.setFillStyle("#999");
|
||
canv.fillText(
|
||
"长按识别·去逛逛",
|
||
60 * ratio + 80,
|
||
(canvHeight - 92) * ratio
|
||
);
|
||
canv.draw();
|
||
|
||
canv.save();
|
||
// 绘制商品图片
|
||
canv.drawImage(
|
||
productPath,
|
||
0 + imgLeft,
|
||
paddT + 58 * ratio,
|
||
clipWidth,
|
||
clipHeight
|
||
);
|
||
|
||
// 绘制小程序二维码图片
|
||
|
||
canv.drawImage(codePath, 60 * ratio, (canvHeight - 164) * ratio, 72, 72);
|
||
canv.draw(true);
|
||
// canv.scale(ratio, ratio)
|
||
uni.hideLoading();
|
||
},
|
||
/*
|
||
* 绘制多行文本，自动换行，超出添加...
|
||
*
|
||
str:要绘制的字符串
|
||
canvas:canvas对象
|
||
initX:绘制字符串起始x坐标
|
||
initY:绘制字符串起始y坐标
|
||
lineHeight:字行高，自己定义个值即可
|
||
maxWidth: 文本最大宽度
|
||
row: 最大行数
|
||
*/
|
||
canvasTextAutoLine: function (
|
||
str,
|
||
ctx,
|
||
initX,
|
||
initY,
|
||
lineHeight,
|
||
maxWidth,
|
||
row = 1
|
||
) {
|
||
var lineWidth = 0;
|
||
var lastSubStrIndex = 0;
|
||
var currentRow = 1;
|
||
for (let i = 0; i < str.length; i++) {
|
||
lineWidth += ctx.measureText(str[i]).width;
|
||
if (lineWidth > maxWidth) {
|
||
currentRow++;
|
||
let newStr = str.substring(lastSubStrIndex, i);
|
||
if (currentRow > row && str.length > i) {
|
||
newStr = str.substring(lastSubStrIndex, i - 2) + "...";
|
||
}
|
||
ctx.fillText(newStr, initX, initY);
|
||
initY += lineHeight;
|
||
lineWidth = 0;
|
||
lastSubStrIndex = i;
|
||
|
||
if (currentRow > row) {
|
||
break;
|
||
}
|
||
}
|
||
if (i === str.length - 1) {
|
||
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
|
||
}
|
||
}
|
||
},
|
||
saveImage() {
|
||
// 将海报保存图片到
|
||
let _this = this;
|
||
uni.getSetting({
|
||
success(res) {
|
||
if (!res.authSetting["scope.writePhotosAlbum"]) {
|
||
uni.authorize({
|
||
scope: "scope.writePhotosAlbum",
|
||
|
||
success() {
|
||
// 用户已经同意小程序使用相册
|
||
|
||
_this.saveImageToPhotos();
|
||
},
|
||
|
||
fail() {
|
||
wx.openSetting({
|
||
success: (res) => {},
|
||
});
|
||
},
|
||
});
|
||
} else {
|
||
// 用户已经同意小程序使用相册
|
||
|
||
_this.saveImageToPhotos();
|
||
}
|
||
},
|
||
});
|
||
},
|
||
saveImageToPhotos(tempFilePath) {
|
||
let _this = this;
|
||
uni.showLoading({ title: "正在生成图片" });
|
||
uni.canvasToTempFilePath(
|
||
{
|
||
width: _this.windowMsg.width, // 导出图片的宽
|
||
height: _this.windowMsg.height, // 导出图片的高
|
||
destWidth: _this.windowMsg.width * _this.windowMsg.scale * 4, // 导出图片的宽
|
||
destHeight: _this.windowMsg.height * _this.windowMsg.scale * 4, // 导出图片的高
|
||
|
||
canvasId: "pro",
|
||
success: function (res) {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: res.tempFilePath,
|
||
success(result) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: "保存成功，从相册中分享到朋友圈吧",
|
||
icon: "none",
|
||
duration: 4000,
|
||
});
|
||
_this.showSharePro = false;
|
||
},
|
||
fail: function (res) {
|
||
uni.showToast({
|
||
title: "图片保存失败",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
},
|
||
});
|
||
},
|
||
fail: function (res) {
|
||
wx.showToast({
|
||
title: "图片生成失败",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
},
|
||
},
|
||
_this
|
||
);
|
||
},
|
||
},
|
||
onShareAppMessage() {
|
||
let _this = this;
|
||
|
||
return {
|
||
title: _this.good.COMMODITY_NAME,
|
||
path:
|
||
"/pages/product/productDetail/index?invite=" +
|
||
_this.user.InviteCode +
|
||
"&id=" +
|
||
_this.pageMsg.goodId,
|
||
imageUrl: _this.good.DEFAULT_IMG,
|
||
};
|
||
},
|
||
onUnload() {
|
||
this.isShowCount = false;
|
||
this.showSharePro = false;
|
||
this.good = {};
|
||
},
|
||
onLoad(option) {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
console.log("option", option);
|
||
if (option.pageType) {
|
||
this.pageType = option.pageType;
|
||
}
|
||
|
||
// 判断当前的购物车里面是否有东西
|
||
let shopCarList = [];
|
||
if (this.pageType === "UnionMall") {
|
||
shopCarList = this.$store.state.unionMyShopCar;
|
||
} else {
|
||
shopCarList = this.$store.state.myShopCar;
|
||
}
|
||
console.log("shopCarList", shopCarList);
|
||
if (shopCarList && shopCarList.length > 0) {
|
||
this.shopCarList = shopCarList;
|
||
}
|
||
|
||
this.getDetail(option.id);
|
||
// if (option.scene) {
|
||
// // 是否是商品分享码扫入的 带有他人的邀请码
|
||
// let scene = decodeURIComponent(option.scene);
|
||
// scene = scene.split("&");
|
||
// this.pageMsg.goodId = scene[0];
|
||
// this.setInvitedCode(scene[1]);
|
||
// } else {
|
||
// this.pageMsg.goodId = option.id;
|
||
// }
|
||
|
||
// if (option.invite) {
|
||
// this.setInvitedCode(option.invite);
|
||
// }
|
||
// this.pageMsg.buyCount = 1;
|
||
|
||
// this.getRate();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|
||
<style lang="less" scoped>
|
||
.page-body {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
overflow-x: hidden;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
hr {
|
||
color: #e9e9e9;
|
||
height: 2rpx;
|
||
}
|
||
|
||
.product-image {
|
||
height: 55vh;
|
||
width: 100%;
|
||
// padding-top 20rpx
|
||
background: #fff;
|
||
position: relative;
|
||
.header {
|
||
width: 100%;
|
||
position: fixed;
|
||
z-index: 10;
|
||
top: 0;
|
||
.headerBottom {
|
||
width: calc(100% - 64rpx);
|
||
position: absolute;
|
||
left: 32rpx;
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.backArrowBox {
|
||
width: 120rpx;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 32rpx;
|
||
border: 1px solid #faf6ec;
|
||
padding: 0 16rpx;
|
||
.img {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
.line {
|
||
width: 2rpx;
|
||
height: 32rpx;
|
||
background: #bbbbba;
|
||
margin: 0 8rpx;
|
||
}
|
||
}
|
||
|
||
.tabBox {
|
||
display: flex;
|
||
align-items: center;
|
||
.tabItem {
|
||
padding: 0 16rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
.selectTabItem {
|
||
position: relative;
|
||
}
|
||
.selectTabItem:after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -6rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 2rem;
|
||
height: 4rpx;
|
||
background: #ff8000;
|
||
}
|
||
}
|
||
.rightContent {
|
||
width: 120rpx;
|
||
}
|
||
|
||
.moreFunBox {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
position: absolute;
|
||
z-index: 10;
|
||
left: 50rpx;
|
||
box-sizing: border-box;
|
||
padding: 12rpx 0 12rpx 16rpx;
|
||
.triangle {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 5px solid transparent; /* 左边透明 */
|
||
border-right: 5px solid transparent; /* 右边透明 */
|
||
border-bottom: 10px solid #fff; /* 底边颜色 */
|
||
top: -10px;
|
||
left: 40px;
|
||
}
|
||
.funList {
|
||
width: 100%;
|
||
height: 100%;
|
||
.funItem {
|
||
width: 100%;
|
||
height: 70rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.funItemIcon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
.funItemText {
|
||
width: calc(100% - 50rpx);
|
||
height: 100%;
|
||
display: inline-block;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #dad6cb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.banner {
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
|
||
image {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiper-dots {
|
||
width: 100%;
|
||
height: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
bottom: 70rpx;
|
||
// flex-direction row
|
||
// position absolute
|
||
// left 50%
|
||
// transform translateX(-50%)
|
||
// bottom 100rpx
|
||
}
|
||
|
||
.dot {
|
||
width: 70rpx;
|
||
height: 32rpx;
|
||
border-radius: 32rpx;
|
||
line-height: 32rpx;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
// opacity .3
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
|
||
.product-info {
|
||
background: #fff;
|
||
}
|
||
|
||
.price-box {
|
||
color: #ea3323;
|
||
font-size: 40rpx;
|
||
height: 75rpx;
|
||
padding-bottom: 25rpx;
|
||
line-height: 1;
|
||
padding-left: 32rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
position: relative;
|
||
}
|
||
|
||
.sale-count {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
padding-right: 32rpx;
|
||
}
|
||
|
||
.vip-price {
|
||
font-size: 42rpx;
|
||
color: #ea3323;
|
||
.unit {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
// display flex
|
||
// align-items flex-end
|
||
// margin-left 24rpx
|
||
// justify-content center
|
||
|
||
// line-height 1
|
||
// padding-bottom 4rpx
|
||
.vip-card-ico {
|
||
background: url("https://eshangtech.com/ShopICO/shoppingMall/vip-text.png")
|
||
no-repeat center; // eshangtech.com/ShopICO/shoppingMall/vip-text.png) no-repeat center
|
||
background-size: contain;
|
||
font-size: 18rpx;
|
||
color: #e6e1cf;
|
||
height: 26rpx;
|
||
line-height: 26rpx;
|
||
width: 52rpx;
|
||
text-align: right;
|
||
padding-right: 10rpx;
|
||
margin-bottom: 2rpx;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
// .share-btn:before
|
||
// content ''
|
||
// height 31rpx
|
||
// width 32rpx
|
||
// background url(https://eshangtech.com/ShopICO/shoppingMall/share-btn.png) no-repeat center
|
||
// background-size contain
|
||
.share-btn {
|
||
position: relative;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #ea3323;
|
||
font-size: 20rpx;
|
||
// height 100rpx
|
||
width: 100rpx;
|
||
justify-content: center;
|
||
margin: 0;
|
||
padding: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
button:after {
|
||
border: none;
|
||
}
|
||
|
||
.colorRed {
|
||
color: #ea3323;
|
||
font-size: 24rpx;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.join-vip {
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 26rpx;
|
||
border: 1rpx solid #ebebeb;
|
||
|
||
.vip-left {
|
||
background: #f7f7f7;
|
||
flex: 1;
|
||
height: 120rpx;
|
||
padding-left: 32rpx;
|
||
padding-top: 16rpx;
|
||
box-sizing: border-box;
|
||
|
||
.vip-card-ico:before {
|
||
content: "";
|
||
background: url("https://eshangtech.com/ShopICO/shoppingMall/vip-ico.png")
|
||
no-repeat center; // eshangtech.com/ShopICO/shoppingMall/vip-ico.png) no-repeat center
|
||
width: 13rpx;
|
||
height: 12rpx;
|
||
margin-right: 4rpx;
|
||
background-size: contain;
|
||
}
|
||
|
||
.vip-card-ico {
|
||
font-size: 20rpx;
|
||
color: #e6e1cf;
|
||
border-radius: 20rpx;
|
||
height: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 30rpx;
|
||
background: #362f14;
|
||
width: 90rpx;
|
||
justify-content: center;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.vip-title {
|
||
color: #333;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.vip-des {
|
||
color: #999;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
|
||
.vip-right {
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #f4eee0;
|
||
width: 140rpx;
|
||
line-height: 1.5;
|
||
padding: 20rpx 20rpx 20rpx 36rpx;
|
||
color: #000;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
.product-title {
|
||
color: #333333;
|
||
line-height: 1.5;
|
||
font-weight: bolder;
|
||
font-size: 30rpx;
|
||
padding: 12rpx 24rpx;
|
||
}
|
||
|
||
.product-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8rpx 16rpx 16rpx 32rpx;
|
||
justify-content: space-between;
|
||
.oldPrice {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
text-decoration-line: line-through;
|
||
}
|
||
.inventory {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.product-detail {
|
||
margin-top: 32rpx;
|
||
font-size: 26rpx;
|
||
padding-bottom: 150rpx;
|
||
}
|
||
|
||
.detail-unit {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 0;
|
||
display: flex;
|
||
align-items: top;
|
||
justify-content: space-between;
|
||
background: #ffffff;
|
||
margin-top: 32rpx;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
.detail-title {
|
||
width: 240rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.detail-right {
|
||
// width: calc(100% - 240rpx);
|
||
}
|
||
}
|
||
|
||
.detail-unit + .detail-unit {
|
||
border-top: 2rpx solid #e9e9e9;
|
||
}
|
||
|
||
.detail-title .small-title {
|
||
font-size: 24rpx;
|
||
color: #ea3a3c;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.rate-desc {
|
||
color: #b2b2b2;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.rate-title {
|
||
align-items: center;
|
||
}
|
||
|
||
.rate-box {
|
||
background: #fff;
|
||
padding: 16rpx 32rpx;
|
||
}
|
||
|
||
.detail-image-box {
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
.img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.product-btn-box {
|
||
height: 124rpx;
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: space-between;
|
||
z-index: 1;
|
||
box-sizing: border-box;
|
||
padding-bottom: 24rpx;
|
||
background: #fff;
|
||
|
||
.leftBtn {
|
||
width: 38%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 0 0 0 12rpx;
|
||
.btnItem {
|
||
width: calc(100% / 3);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.btnItemImg {
|
||
height: 46rpx;
|
||
width: 46rpx;
|
||
}
|
||
.btnItemText {
|
||
color: #c6a773;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .home-btn:before {
|
||
// content: "";
|
||
// height: 45rpx;
|
||
// width: 47rpx;
|
||
// background: url("https://eshangtech.com/ShopICO/shoppingMall/home.png")
|
||
// no-repeat center; // eshangtech.com/ShopICO/shoppingMall/home.png) no-repeat center
|
||
// background-size: contain;
|
||
// }
|
||
|
||
// .home-btn {
|
||
// flex: 1;
|
||
// background: #fff;
|
||
// border-top: 2rpx solid #e9e9e9;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// align-items: center;
|
||
// color: #c6a773;
|
||
// font-size: 20rpx;
|
||
// height: 100rpx;
|
||
// justify-content: center;
|
||
// position: relative;
|
||
// }
|
||
|
||
.rightBtn {
|
||
width: 58%;
|
||
height: 100%;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 12rpx;
|
||
display: flex;
|
||
.addCarBtn {
|
||
width: 50%;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background: linear-gradient(90deg, #ffc500 0%, #ff8d00 100%);
|
||
border-radius: 16rpx 0 0 16rpx;
|
||
}
|
||
.addOrder {
|
||
width: 50%;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background: linear-gradient(90deg, #ff6d00 0%, #ff3a00 100%);
|
||
border-radius: 0 16rpx 16rpx 0;
|
||
}
|
||
.sellOut {
|
||
width: 50%;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background: #bbbbbb;
|
||
border-radius: 0 16rpx 16rpx 0;
|
||
}
|
||
}
|
||
|
||
.shopcart-btn:before {
|
||
content: "";
|
||
height: 45rpx;
|
||
width: 47rpx;
|
||
background: url("https://eshangtech.com/ShopICO/shoppingMall/shopcart.png")
|
||
no-repeat center; // eshangtech.com/ShopICO/shoppingMall/shopcart.png) no-repeat center
|
||
background-size: contain;
|
||
}
|
||
|
||
.shopcart-btn {
|
||
flex: 1;
|
||
background: #fff;
|
||
border-top: 2rpx solid #e9e9e9;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #c6a773;
|
||
font-size: 20rpx;
|
||
height: 100rpx;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
.shopcart-count {
|
||
position: absolute;
|
||
top: 10rpx;
|
||
right: 66rpx;
|
||
width: 42rpx;
|
||
height: 32rpx;
|
||
line-height: 32rpx;
|
||
text-align: center;
|
||
border-radius: 32rpx;
|
||
font-size: 18rpx;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
background: rgba(240, 20, 20, 0.808);
|
||
// box-shadow 0 0rpx 4rpx 0 rgba(0, 0, 0, 0.4)
|
||
}
|
||
|
||
.join-shopCart {
|
||
flex: 2;
|
||
background: #404040;
|
||
font-size: 30rpx;
|
||
line-height: 100rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.buynow-btn {
|
||
flex: 2;
|
||
font-size: 30rpx;
|
||
line-height: 100rpx;
|
||
color: #fff;
|
||
background: linear-gradient(to right, #c5a671, #dcc194);
|
||
}
|
||
}
|
||
|
||
.popup-box {
|
||
padding: 50rpx 40rpx 32rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.shopPopupBox {
|
||
width: 100%;
|
||
height: 70vh;
|
||
background: #fff;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
box-sizing: border-box;
|
||
padding: 16px;
|
||
.shopPopupContent {
|
||
width: 100%;
|
||
height: calc(70vh - 92rpx - 64rpx);
|
||
margin-bottom: 12rpx;
|
||
.detailTop {
|
||
display: flex;
|
||
border-bottom: 1px solid #f2f4f5;
|
||
.detailImg {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
.box {
|
||
width: calc(100% - 92px);
|
||
padding-bottom: 16px;
|
||
margin-left: 12px;
|
||
.nameTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.name {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #020e1a;
|
||
line-height: 18px;
|
||
display: block;
|
||
width: calc(100% - 56rpx);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.closeIcon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
.priceBox {
|
||
margin-top: 32px;
|
||
.priceIcon {
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #ff6219;
|
||
line-height: 20px;
|
||
}
|
||
.price {
|
||
font-size: 20px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #ff6219;
|
||
line-height: 20px;
|
||
}
|
||
.unit {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9fa3a8;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.detailMessage {
|
||
margin-top: 16px;
|
||
border-bottom: 1px solid #f2f4f5;
|
||
padding-bottom: 16px;
|
||
.detailTitle {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #020e1a;
|
||
line-height: 20px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.detailText {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #6c737a;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
.orderDetail {
|
||
margin-top: 16px;
|
||
.orderTitle {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #020e1a;
|
||
line-height: 20px;
|
||
}
|
||
.numBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 12px;
|
||
.numTitle {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #020e1a;
|
||
line-height: 20px;
|
||
}
|
||
.cartcontrol {
|
||
width: 150px;
|
||
height: 30px;
|
||
line-height: 24px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
border: 1px solid rgba(2, 14, 26, 0.06);
|
||
border-radius: 2px;
|
||
.subtract {
|
||
width: 30px;
|
||
height: 30px;
|
||
background: #f2f4f5;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 2px 0 0 2px;
|
||
font-size: 8px;
|
||
color: #9fa3a8;
|
||
.img {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
.cart-count {
|
||
height: 30px !important;
|
||
font-size: 16px;
|
||
line-height: 30px;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
.sizeBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 12px;
|
||
.sizeTitle {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #020e1a;
|
||
line-height: 20px;
|
||
}
|
||
.sizeList {
|
||
display: flex;
|
||
.sizeItem {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #000;
|
||
line-height: 18px;
|
||
padding: 4px 16px;
|
||
background: #dbdad6;
|
||
border-radius: 4px;
|
||
margin-left: 8px;
|
||
}
|
||
.selectSizeItem {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #1890ff;
|
||
line-height: 18px;
|
||
padding: 4px 16px;
|
||
background: #e7f3ff;
|
||
border-radius: 4px;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
.descBox {
|
||
width: 100%;
|
||
height: 76px;
|
||
background: #f2f4f5;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
padding: 8px 12px;
|
||
margin-top: 19px;
|
||
}
|
||
.submitBtn {
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
line-height: 22px;
|
||
width: 100%;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #1890ff;
|
||
border-radius: 4px;
|
||
margin-top: 24px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottomBtn {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
box-sizing: border-box;
|
||
.shopCarBtn {
|
||
width: 100%;
|
||
height: 76rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background: linear-gradient(90deg, #ffc500 0%, #ff8d00 100%);
|
||
border-radius: 16rpx;
|
||
}
|
||
.makeOrderBtn {
|
||
width: 100%;
|
||
height: 76rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background: linear-gradient(90deg, #ff6d00 0%, #ff3a00 100%);
|
||
border-radius: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cart-count {
|
||
width: 80rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
font-size: 20rpx;
|
||
color: #333;
|
||
height: 40rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.buy-it-btn {
|
||
text-align: center;
|
||
width: 674rpx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
border-radius: 6rpx;
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
margin-top: 100rpx;
|
||
background: linear-gradient(to right, #1f1f1f, #62605f);
|
||
}
|
||
|
||
.cartcontrol {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-left: 45rpx;
|
||
}
|
||
|
||
.cart-decrease {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border: 2rpx solid #eee;
|
||
position: relative;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.cart-decrease:before {
|
||
content: "";
|
||
height: 4rpx;
|
||
width: 25rpx;
|
||
background: #4d4d4d;
|
||
display: block;
|
||
position: absolute;
|
||
left: 12rpx;
|
||
top: 21rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.cart-add {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border: 2rpx solid #e6e6e6;
|
||
position: relative;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.cart-add:before {
|
||
content: "";
|
||
height: 4rpx;
|
||
width: 25rpx;
|
||
background: #4d4d4d;
|
||
display: block;
|
||
position: absolute;
|
||
left: 11rpx;
|
||
top: 21rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.cart-add:after {
|
||
content: "";
|
||
height: 25rpx;
|
||
width: 4rpx;
|
||
background: #4d4d4d;
|
||
display: block;
|
||
position: absolute;
|
||
top: 11rpx;
|
||
left: 21rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.desc-ico:before {
|
||
content: "";
|
||
height: 30rpx;
|
||
width: 6rpx;
|
||
background: linear-gradient(#dcb97e, #faefdd);
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
// 分享商品页弹出窗口
|
||
.share-pop-body {
|
||
width: 100%;
|
||
background: #f9f9f9;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
position: relative;
|
||
padding-top: 80rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.down-img-btn {
|
||
text-align: center;
|
||
padding: 32rpx 0;
|
||
background: #fff;
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
left: 0;
|
||
}
|
||
|
||
.canvas-content {
|
||
margin: auto;
|
||
display: hidden;
|
||
}
|
||
|
||
//
|
||
.share-pop-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.share-pop-btn button {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.share-pop-btn image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.share-popup {
|
||
padding: 16px;
|
||
border-radius: 12px 12px 0 0; /* 圆角设置 */
|
||
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.share-divider {
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.share-pop-btn {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.share-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: none;
|
||
border: none;
|
||
}
|
||
|
||
.share-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
margin-bottom: 8px;
|
||
}
|
||
</style>
|