1276 lines
33 KiB
Vue
1276 lines
33 KiB
Vue
<template>
|
||
<div class="page-body">
|
||
<div class="product-image">
|
||
<block v-if="good.List">
|
||
<swiper scroll-x="true" circular="true" class="banner" @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"></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: baseline;
|
||
justify-content: space-between;
|
||
">
|
||
<div class="price-box">
|
||
<block v-if="good.PAY_METHOD !== 1000">
|
||
<span style="font-weight: bold">{{ good.COMMODITY_POINT }}</span>
|
||
<span class="colorRed">积分</span>
|
||
</block>
|
||
<block v-if="good.PAY_METHOD == 1000">
|
||
<div class="vip-price">
|
||
<span style="font-weight: bold">
|
||
{{ good.COMMODITY_MEMBERPRICE }}</span>
|
||
<span class="colorRed">元</span>
|
||
</div>
|
||
<!-- <span class="vip-card-ico">会员</span> -->
|
||
</block>
|
||
<block v-else-if="good.PAY_METHOD == 2000">
|
||
<div class="vip-price" style="
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
text-decoration: line-through;
|
||
">
|
||
<span> {{ good.COMMODITY_MEMBERPRICE }}</span>
|
||
<span style="color: #666; font-size: 24rpx">元</span>
|
||
</div>
|
||
</block>
|
||
<block v-else-if="good.PAY_METHOD == 3000">
|
||
<div class="vip-price" style="color: #666; font-size: 24rpx">
|
||
<span> {{ good.COMMODITY_MEMBERPRICE }}</span>
|
||
<span style="color: #666; font-size: 24rpx">元</span>
|
||
</div>
|
||
<!-- <span class="vip-card-ico">会员</span> -->
|
||
</block>
|
||
</div>
|
||
<div>
|
||
<span class="sale-count">
|
||
{{
|
||
good.COMMODITY_STOCK > 0 ? "库存 " + good.COMMODITY_STOCK : "售罄"
|
||
}}</span>
|
||
<span class="sale-count">已售 {{ good.SALE_COUNT }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="join-vip" v-if="!user.MEMBERSHIP_MOBILEPHONE">
|
||
<div class="vip-left">
|
||
<!-- <span class="colorRed">¥{{good.COMMODITY_MEMBERPRICE}}</span> -->
|
||
<div class="vip-title">
|
||
<span class="vip-card-ico">会员卡</span>会员卡专享
|
||
</div>
|
||
<div class="vip-des">专属优惠券、商品折扣</div>
|
||
</div>
|
||
<navigator hover-class="navigator-hover" class="vip-right" url="/pages/register/index">
|
||
加入会员
|
||
<van-icon name="arrow" size="24rpx" color="#333" />
|
||
</navigator>
|
||
</div>
|
||
<div class="product-title">
|
||
{{ good.COMMODITY_NAME }}
|
||
</div>
|
||
<div class="product-brand">
|
||
<!-- <image mode="aspectFit" lazy-load="true" :src="good.IMAGE_PATH || 'https://eshangtech.com/ShopICO/no-picture.png'"></image> -->
|
||
<span v-show="good.SUPPLIER_NAME">供应商：{{ good.SUPPLIER_NAME }}</span>
|
||
<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="https://eshangtech.com/wanmeiyizhanImg/home/share.svg" />
|
||
</div>
|
||
<div>分享</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-detail">
|
||
<div class="detail-unit" v-if="good.COMMODITY_DESC">
|
||
<span class="detail-title">商品简介</span>
|
||
<span>{{ good.COMMODITY_DESC || "暂无" }}</span>
|
||
</div>
|
||
<div class="">
|
||
<div class="detail-unit rate-title">
|
||
<div class="detail-title desc-ico">
|
||
评价
|
||
<!-- <span class="small-title">好评97%</span> -->
|
||
</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 class="rate-box" v-if="rateList.length > 0">
|
||
<block v-for="(item, o) in rateList" :key="o">
|
||
<rateItem :item="item" />
|
||
</block>
|
||
</div>
|
||
</div>
|
||
<block v-if="good.ContentImgList && good.ContentImgList.length > 0">
|
||
<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 mode="aspectFill" lazy-load="true" :src="img.IMAGE_URL" @load="loadDetailImg($event, i)" :style="'width:' +
|
||
detailImgList[i].width +
|
||
'rpx; height:' +
|
||
detailImgList[i].height +
|
||
'rpx;'
|
||
"></image>
|
||
</block>
|
||
</div>
|
||
</block>
|
||
</div>
|
||
|
||
<!-- 分享商品页面 -->
|
||
<van-popup :show="showSharePro" closeable close-icon-position="top-left" position="bottom"
|
||
:custom-style="'height:' + (windowMsg.height + 280) + 'rpx'" @close="showSharePro = false">
|
||
<div class="share-pop-body" catchtouchmove="function(){return;}">
|
||
<canvas canvas-id="pro" class="canvas-content" :style="{
|
||
width: windowMsg.width + 'rpx',
|
||
height: windowMsg.height + 'rpx',
|
||
}" disable-scroll="true" bindtouchstart="" bindtouchmove="" bindtouchend=""></canvas>
|
||
|
||
<view class="down-img-btn">
|
||
<van-button icon="down" round color="linear-gradient(to right, #1f1f1f, #62605f)"
|
||
custom-style="width:300rpx;padding:32rpx auto;" @click="saveImage">保存到本地</van-button>
|
||
</view>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<div class="product-btn-box">
|
||
<navigator class="home-btn" url="/pages/home/index" open-type="switchTab">首页</navigator>
|
||
<!-- <div class="shopcart-btn" @click="goShop">购物车<span class="shopcart-count" v-if="totalNum>0">{{totalNum}}</span></div> -->
|
||
<div class="buynow-btn" @click="getMemberPoint(1)" v-if="good.COMMODITY_STOCK > 0 && good.PAY_METHOD !== 1000">
|
||
立即兑换
|
||
</div>
|
||
<!-- @click="addGoodToCartFn" -->
|
||
<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 class="buynow-btn" @click="isShowCount = true">立即购买</div> -->
|
||
</div>
|
||
<van-popup :show="isShowCount == 1 || isShowCount == 2" position="bottom" overlay="false" @close="isShowCount = 0">
|
||
<div class="popup-box">
|
||
<div style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
">
|
||
<div>购买数量：</div>
|
||
<view class="cartcontrol">
|
||
<span @click="
|
||
pageMsg.buyCount > 1
|
||
? pageMsg.buyCount--
|
||
: (pageMsg.buyCount = 1)
|
||
" class="cart-decrease"></span>
|
||
<span class="cart-count">{{ pageMsg.buyCount }}</span>
|
||
<span @click="pageMsg.buyCount++" class="cart-add icon-add_circle"></span>
|
||
</view>
|
||
</div>
|
||
<div style="margin-top: 20rpx" v-if="isShowCount == 1">
|
||
您的可用积分为：{{ pageMsg.memberPoint }}积分
|
||
</div>
|
||
|
||
<div class="buy-it-btn" @click="buyNow">确认购买</div>
|
||
</div>
|
||
</van-popup>
|
||
<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>
|
||
</div>
|
||
</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,
|
||
},
|
||
};
|
||
},
|
||
components: {
|
||
rateItem,
|
||
UniPopup,
|
||
},
|
||
computed: {
|
||
...mapGetters("shoppingCart", {
|
||
totalNum: "goodNum",
|
||
}),
|
||
...mapGetters(["user"]),
|
||
},
|
||
methods: {
|
||
...mapActions("shoppingCart", {
|
||
addGood: "ADDGOOD",
|
||
addCate: "ADDCATE",
|
||
}),
|
||
...mapMutations("shoppingCart", {
|
||
setOrder: "ORDERGOOD",
|
||
}),
|
||
...mapMutations(["setInvitedCode"]),
|
||
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" });
|
||
},
|
||
getDetail() {
|
||
let _this = this;
|
||
this.$api
|
||
.getCoop({
|
||
action_type: "GetGoodsDetail",
|
||
commodityId: _this.pageMsg.goodId,
|
||
})
|
||
.then(function (res) {
|
||
console.log('resresresresresresresresresresresresresresresres', res);
|
||
|
||
_this.good = res.Data;
|
||
_this.pageMsg.current = 0;
|
||
_this.pageMsg.imgeCount = res.Data.List.length || 0;
|
||
|
||
if (_this.good.COMMODITY_DESC.indexOf("</br>") > -1) {
|
||
let desArr = _this.good.COMMODITY_DESC.split("</br>");
|
||
_this.good.COMMODITY_DESC = [];
|
||
desArr.forEach((element) => {
|
||
_this.good.COMMODITY_DESC.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) => {
|
||
console.log('resresresresresresresresres', 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_MEMBERPRICE,
|
||
ORDER_AMOUNT: this.pageMsg.buyCount * el.COMMODITY_MEMBERPRICE,
|
||
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_MEMBERPRICE;
|
||
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 = {};
|
||
},
|
||
onShow() {
|
||
this.getDetail();
|
||
},
|
||
onLoad(option) {
|
||
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();
|
||
this.$utils.addUserBehaviorNew();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|
||
<style lang="stylus" scoped>
|
||
.page-body {
|
||
height: 100%;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
hr {
|
||
color: #E9E9E9;
|
||
height: 2rpx;
|
||
}
|
||
|
||
.product-image {
|
||
height: 488rpx;
|
||
width: 100%;
|
||
// padding-top 20rpx
|
||
background: #fff;
|
||
|
||
.banner {
|
||
height: 488rpx;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
|
||
image {
|
||
height: 488rpx;
|
||
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: 38rpx;
|
||
color: #EA3323;
|
||
|
||
// 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: 24rpx 32rpx 16rpx 32rpx;
|
||
}
|
||
|
||
.product-brand {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
padding: 8rpx 16rpx 32rpx 32rpx;
|
||
|
||
image {
|
||
height: 38rpx;
|
||
width: 38rpx;
|
||
border-radius: 38rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
|
||
.product-detail {
|
||
margin-top: 32rpx;
|
||
font-size: 26rpx;
|
||
padding-bottom: 100rpx;
|
||
}
|
||
|
||
.detail-unit {
|
||
padding: 32rpx;
|
||
display: flex;
|
||
align-items: top;
|
||
justify-content: space-between;
|
||
background: #ffffff;
|
||
margin-top: 32rpx;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
}
|
||
|
||
.detail-unit+.detail-unit {
|
||
border-top: 2rpx solid #e9e9e9;
|
||
}
|
||
|
||
.detail-title {
|
||
color: #262626;
|
||
font-size: 32rpx;
|
||
min-width: 116rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.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: 750rpx;
|
||
overflow-x: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
|
||
.product-btn-box {
|
||
height: 100rpx;
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
z-index: 1;
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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>
|