2026-03-23 14:57:47 +08:00

1915 lines
51 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="product-con" :style="colorStyle">
<view class="product-con">
<!-- #ifndef APP-PLUS -->
<view class="navbar" :style="{ height: navH + 'rpx', opacity: opacity }">
<view class="navbarH" :style="'height:' + navH + 'rpx;'">
<view
class="navbarCon acea-row row-center-wrapper"
:style="{ paddingRight: navbarRight - 20 + 'px' }"
>
<view class="header acea-row row-center-wrapper">
<view class="item on">{{ $t(`商品详情`) }}</view>
</view>
</view>
</view>
</view>
<!-- #endif -->
<!-- <view class='iconfont icon-xiangzuo' :style="{top:navH/2+'rpx',opacity:(1-opacity)}" @tap='returns'></view> -->
<!-- #ifndef APP-PLUS -->
<view
id="home"
class="home acea-row row-center-wrapper"
:class="[opacity > 0.5 ? 'on' : '']"
:style="{ top: homeTop + 'rpx' }"
>
<view class="iconfont icon-fanhui2" @tap="returns"></view>
<!-- #ifdef MP -->
<view class="line"></view>
<view class="iconfont icon-gengduo5" @click="moreNav"></view>
<!-- #endif -->
</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view
id="home"
class="home right acea-row row-center-wrapper"
:class="[opacity > 0.5 ? 'on' : '']"
:style="{ top: homeTop + 'rpx' }"
>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="iconfont icon-gengduo2" @click="moreNav"></view>
</view>
<!-- #endif -->
<homeList
:navH="navH"
:returnShow="returnShow"
:currentPage="currentPage"
:sysHeight="sysHeight"
></homeList>
<view>
<view id="past0">
<!-- #ifdef APP-PLUS || MP -->
<view class="" :style="'width:100%;' + 'height:' + sysHeight"></view>
<!-- #endif -->
<PageDesign
:diyData="diyData"
:productData="storeInfo"
:priceData="realPriceData"
:skuList="skuArr"
:reply="reply"
:replyCount="replyCount"
:replyChance="replyChance"
:productId="id"
:couponList="couponList"
:activity="activity"
:attr="attr"
:attrTxt="attrTxt"
:attrValue="attrValue"
@bindSortId="bindSortId"
@changeSpec="onChangeSpecFromPageDesign"
@showSpecModal="onShowSpecModalFromPageDesign"
@share="listenerActionSheet"
@showCoupon="couponTap"
@openModal="openModal"
@goActivity="goActivity"
></PageDesign>
</view>
<view class="uni-p-b-98"></view>
</view>
<productBottom
:diyData="diyData"
:storeInfo="storeInfo"
:is_gift="is_gift"
:CartCount="CartCount"
:noGoods="noGoods"
:attr="attr"
:presale_pay_status="presale_pay_status"
:animated="animated"
@setCollect="setCollect"
@goCart="goCart"
@goGift="goGift"
@joinCart="joinCart"
@goBuy="goBuy"
@share="listenerActionSheet"
></productBottom>
<shareRedPackets
:sharePacket="sharePacket"
@listenerActionSheet="listenerActionSheet"
@closeChange="closeChange"
:showAnimate="showAnimate"
@boxStatus="boxStatus"
></shareRedPackets>
<!-- 组件 -->
<productWindow
:attr="attr"
:isShow="1"
:iSplus="1"
:limitNum="storeInfo.limit_num"
:minQty="storeInfo.min_qty"
:unitName="storeInfo.unit_name"
@myevent="onMyEvent"
@ChangeAttr="ChangeAttr"
@ChangeCartNum="ChangeCartNum"
@attrVal="attrVal"
@iptCartNum="iptCartNum"
id="product-window"
:is_vip="is_vip"
@getImg="showImg"
:is_virtual="storeInfo.is_virtual"
></productWindow>
<cus-previewImg
ref="cusPreviewImg"
:list="skuArr"
@changeSwitch="changeSwitch"
@shareFriend="listenerActionSheet"
/>
<swiperPrevie
ref="cusSwiperImg"
:list="storeInfo.slider_image"
></swiperPrevie>
<couponListWindow
:coupon="coupon"
v-if="coupon"
@ChangCouponsClone="ChangCouponsClone"
@ChangCoupons="ChangCoupons"
@ChangCouponsUseState="ChangCouponsUseState"
@tabCouponType="tabCouponType"
></couponListWindow>
<!-- 分享按钮 -->
<view
class="generate-posters acea-row row-middle"
:class="posters ? 'on' : ''"
>
<!-- #ifndef MP -->
<button
class="item"
hover-class="none"
v-if="weixinStatus === true"
@click="H5ShareBox = true"
>
<view class="iconfont icon-weixin3"></view>
<view class="">{{ $t(`发送给朋友`) }}</view>
</button>
<!-- #endif -->
<!-- #ifdef MP -->
<button
class="item"
open-type="share"
hover-class="none"
@click="goFriend"
>
<view class="iconfont icon-weixin3"></view>
<view class="">{{ $t(`发送给朋友`) }}</view>
</button>
<!-- #endif -->
<!-- #ifdef H5 -->
<div
class="item copy-data"
v-if="storeInfo.command_word != ''"
:data-clipboard-text="storeInfo.command_word"
>
<view class="iconfont icon-fuzhikouling"></view>
<text>{{ $t(`复制口令`) }}</text>
</div>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="item" @click="appShare('WXSceneSession')">
<view class="iconfont icon-weixin3"></view>
<view class="">{{ $t(`微信好友`) }}</view>
</view>
<view class="item" @click="appShare('WXSenceTimeline')">
<view class="iconfont icon-pengyouquan"></view>
<view class="">{{ $t(`微信朋友圈`) }}</view>
</view>
<!-- #endif -->
<button class="item" hover-class="none" @click="goPoster">
<view class="iconfont icon-haibao"></view>
<view class="">{{ $t(`生成海报`) }}</view>
</button>
</view>
<view class="mask" v-if="posters" @click="listenerActionClose"></view>
<!-- #ifdef MP -->
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
<!-- #endif -->
<!-- 海报展示 -->
<view class="poster-pop" v-if="posterImageStatus">
<image
src="../../static/images/poster-close.png"
class="close"
@click="posterImageClose"
></image>
<image class="poster-img" :src="posterImage"></image>
<!-- #ifndef H5 -->
<view class="save-poster" @click="savePosterPath">{{
$t(`保存到手机`)
}}</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="keep">{{ $t(`长按图片可以保存到手机`) }}</view>
<!-- #endif -->
</view>
<view class="mask" v-if="posterImageStatus"></view>
<canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
<!-- 发送给朋友图片 -->
<view class="share-box" v-if="H5ShareBox">
<image
:src="imgHost + '/statics/images/share-info.png'"
@click="H5ShareBox = false"
></image>
</view>
<kefuIcon
:ids="parseInt(id)"
:routineContact="routineContact"
:storeInfo="storeInfo"
:goodsCon="1"
></kefuIcon>
<!-- #ifdef H5 || APP-PLUS -->
<zb-code
ref="qrcode"
:show="codeShow"
:cid="cid"
:val="codeVal"
:size="size"
:unit="unit"
:background="background"
:foreground="foreground"
:pdground="pdground"
:icon="codeIcon"
:iconSize="iconsize"
:onval="onval"
:loadMake="loadMake"
@result="qrR"
/>
<!-- #endif -->
<specs
ref="specs"
:specsInfo="storeInfo.params_list"
@myevent="mySpecs"
></specs>
<!-- 服务抽屉 -->
<serviceModal
ref="protection"
:ensureInfo="storeInfo.protection_list"
></serviceModal>
</view>
</view>
</template>
<script>
let sysHeight = uni.getWindowInfo().statusBarHeight + "px";
import {
getProductDetail,
getProductCode,
collectAdd,
collectDel,
postCartAdd,
realPrice,
} from "@/api/store.js";
import { getUserInfo, userShare } from "@/api/user.js";
import { getCoupons, getThemeInfo } from "@/api/api.js";
import { getCartCounts } from "@/api/order.js";
import { toLogin } from "@/libs/login.js";
import { mapGetters } from "vuex";
import cusPreviewImg from "@/components/cusPreviewImg/index.vue";
import swiperPrevie from "@/components/cusPreviewImg/swiperPrevie.vue";
import couponListWindow from "@/components/couponListWindow";
import productWindow from "@/components/productWindow";
import shareRedPackets from "@/components/shareRedPackets";
import kefuIcon from "@/components/kefuIcon";
import menuIcon from "@/components/menuIcon.vue";
import { updateURLParameter } from "@/utils";
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
// #ifdef MP
import authorize from "@/components/Authorize";
// #endif
// #ifdef APP-PLUS
import { TOKENNAME } from "@/config/app.js";
// #endif
import { HTTP_REQUEST_URL } from "@/config/app";
let app = getApp();
import colors from "@/mixins/color";
import { sharePoster } from "@/mixins/sharePoster";
import homeList from "@/components/homeList";
import specs from "./components/specs/index.vue";
import serviceModal from "./components/serviceModal/index.vue";
import PageDesign from "@/subpackage/diyComponents/pageDesign.vue";
import productBottom from "@/subpackage/diyComponents/productBottom.vue";
export default {
components: {
couponListWindow,
productWindow,
shareRedPackets,
kefuIcon,
menuIcon,
cusPreviewImg,
swiperPrevie,
// #ifdef MP
authorize,
// #endif
homeList,
specs,
serviceModal,
PageDesign,
productBottom,
},
directives: {
trigger: {
inserted(el, binging) {
el.click();
},
},
},
mixins: [colors, sharePoster],
data() {
let that = this;
return {
diyData: {},
imgHost: HTTP_REQUEST_URL,
sysHeight: sysHeight,
noGoods: false,
showSkeleton: true, //骨架屏显示隐藏
isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
Active: false,
presale_pay_status: 1,
//属性是否打开
coupon: {
coupon: false,
type: -1,
list: [],
count: [],
},
showAnimate: false,
showMenuIcon: false,
attrTxt: this.$t(`请选择`), //属性页面提示
attrValue: "", //已选属性
animated: false, //购物车动画
id: 0, //商品id
replyCount: 0, //总评论数量
reply: [], //评论列表
storeInfo: {}, //商品详情
productValue: [], //系统属性
couponList: [], //优惠券
cart_num: 1, //购买数量
isAuto: false, //没有授权的不会自动授权
isShowAuth: false, //是否隐藏授权
isOpen: false, //是否打开属性组件
actionSheetHidden: true,
posterImageStatus: false,
storeImage: "", //海报产品图
PromotionCode: "", //二维码图片
canvasStatus: false, //海报绘图标签
posterImage: "", //海报路径
posterbackgd: "/static/images/posterbackgd.png",
sharePacket: {
isState: true, //默认不显示
}, //分销商详细
uid: 0, //用户uid
good_list: [],
replyChance: 0,
CartCount: 0,
ot_price: 0,
isDown: true,
storeSelfMention: true,
posters: false,
weixinStatus: false,
attr: {
cartAttr: false,
productAttr: [],
productSelect: {},
},
description: "",
H5ShareBox: false, //公众号分享图片
activity: [],
navH: "",
opacity: 0,
scrollY: 0,
returnShow: true, //判断顶部返回是否出现
diff: "",
is_money_level: 1,
is_vip: 0, //是否是会员
navbarRight: 0,
homeTop: 20,
routineContact: 0,
skuArr: [],
selectSku: {},
currentPage: false,
svip_price_open: 1,
is_gift: 0, // 是否支持送礼
isGiftOrder: 0,
realPriceData: {
is_vip: 0,
price: 0,
real_price: 0,
},
};
},
computed: {
...mapGetters(["isLogin", "cartNum"]),
},
watch: {
isLogin: {
handler: function (newV, oldV) {
if (newV == true) {
this.getCouponList();
this.getCartCount();
this.downloadFilePromotionCode();
// this.ShareInfo();
}
},
deep: true,
},
storeInfo: {
handler: function () {
this.$nextTick(() => {});
},
immediate: true,
},
},
onLoad(options) {
let that = this;
var pages = getCurrentPages();
that.returnShow = pages.length === 1 ? false : true;
// #ifdef MP
that.navH = app.globalData.navHeight;
// #endif
// #ifdef H5
that.navH = 96;
// #endif
// #ifdef APP-PLUS
that.navH = 30;
// #endif
that.id = options.id;
uni.getSystemInfo({
success: function (res) {
//res.windowHeight:获取整个窗口高度为px*2为rpx98为头部占据的高度
// #ifndef APP-PLUS || H5 || MP-ALIPAY
that.navbarRight =
res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
// #endif
},
});
//扫码携带参数处理
// #ifdef MP
if (options.scene) {
let value = that.$util.getUrlParams(decodeURIComponent(options.scene));
if (value.id) options.id = value.id;
//记录推广人uid
if (value.pid) app.globalData.spid = value.pid;
}
if (!options.id) {
this.showSkeleton = false;
return that.$util.Tips(
{
title: that.$t(`缺少参数无法查看商品`),
},
{
tab: 3,
url: 1,
},
);
} else {
that.id = options.id;
}
// #endif
that.getGoodsDetails();
that.getDiyData();
},
onReady: function () {
this.isNodes++;
this.$nextTick(function () {
// #ifdef MP
const menuButton = uni.getMenuButtonBoundingClientRect();
const query = uni.createSelectorQuery().in(this);
query
.select("#home")
.boundingClientRect((data) => {
this.homeTop =
menuButton.top * 2 + menuButton.height - data.height || 0;
})
.exec();
// #endif
// #ifdef H5
const clipboard = new ClipboardJS(".copy-data");
clipboard.on("success", () => {
this.$util.Tips({
title: this.$t(`复制成功`),
});
});
// #endif
});
},
/**
* 用户点击右上角分享
*/
// #ifdef MP
onShareAppMessage: function () {
let that = this;
that.$set(that, "actionSheetHidden", !that.actionSheetHidden);
userShare();
return {
title: that.storeInfo.store_name || "",
imageUrl: that.storeInfo.image || "",
path: "/pages/goods_details/index?id=" + that.id + "&spid=" + that.uid,
};
},
onShareTimeline() {
let that = this;
userShare();
return {
title: that.storeInfo.store_name,
query: {
id: that.id,
spid: that.uid || 0,
},
imageUrl: that.storeInfo.image,
};
},
// #endif
onNavigationBarButtonTap(e) {
this.currentPage = !this.currentPage;
},
onPageScroll(e) {
let scrollY = e.scrollTop;
let opacity = scrollY / 200;
opacity = opacity > 1 ? 1 : opacity;
this.opacity = opacity;
this.scrollY = scrollY;
this.showAnimate = false;
this.showMenuIcon = false;
this.currentPage = false;
uni.$emit("scroll");
},
methods: {
// 操作菜单
moreNav() {
this.currentPage = !this.currentPage;
},
onChangeSpecFromPageDesign(item) {
console.log(item, "111");
if (item && item.suk) {
let values = item.suk.split(",");
if (
this.attr.productAttr &&
this.attr.productAttr.length === values.length
) {
for (let i = 0; i < this.attr.productAttr.length; i++) {
this.$set(this.attr.productAttr[i], "index", values[i]);
}
}
console.log(item.suk);
this.ChangeAttr(item.suk);
}
},
onShowSpecModalFromPageDesign() {
this.$set(this.attr, "cartAttr", true);
this.$set(this, "isOpen", true);
},
getDiyData() {
let that = this;
let previewThemeId = uni.getStorageSync("previewThemeId");
let data = {};
if (previewThemeId) data.theme_id = previewThemeId;
getThemeInfo("detail", data).then((res) => {
that.diyData = res.data;
});
},
jumpUrl(url) {
uni.switchTab({
url,
});
},
videoPause() {
// this.$nextTick(() => {
// this.infoScroll();
// });
},
qrR(res) {
// #ifdef H5
if (!this.$wechat.isWeixin() || this.shareQrcode != "1") {
this.PromotionCode = res;
this.followCode = "";
}
// #endif
// #ifdef APP-PLUS
this.PromotionCode = res;
// #endif
},
// app分享
// #ifdef APP-PLUS
appShare(scene) {
let that = this;
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let curRoute = routes[routes.length - 1].$page.fullPath; // 获取当前页面路由,也就是最后一个打开的页面路由
uni.share({
provider: "weixin",
scene: scene,
type: 0,
href: `${HTTP_REQUEST_URL}${curRoute}&spread=${that.uid}`,
title: that.storeInfo.store_name,
summary: that.storeInfo.store_info,
imageUrl: that.storeInfo.small_image,
success: function (res) {
// uni.showToast({
// title: that.$t(`分享成功`),
// icon: "success",
// });
that.posters = false;
},
fail: function (err) {
uni.showToast({
title: that.$t(`分享失败`),
icon: "none",
duration: 2000,
});
that.posters = false;
},
});
},
// #endif
closeChange: function () {
this.$set(this.sharePacket, "isState", true);
},
boxStatus(data) {
this.showAnimate = data;
},
/**
* 购物车手动填写
*
*/
iptCartNum: function (e) {
if (e) {
let number = this.storeInfo.min_qty;
if (
Number.isInteger(parseInt(e)) &&
parseInt(e) >= this.storeInfo.min_qty
) {
number = parseInt(e);
}
this.$nextTick((e) => {
this.$set(
this.attr.productSelect,
"cart_num",
e < 0 ? this.storeInfo.min_qty : number,
);
});
}
},
// 后退
returns() {
// #ifdef H5
return history.back();
// #endif
// #ifndef H5
return uni.navigateBack({
delta: 1,
});
// #endif
},
/*
*去商品详情页
*/
goDetail(item) {
if (item.activity.length == 0) {
uni.redirectTo({
url: "/pages/goods_details/index?id=" + item.id,
});
return;
}
// 砍价
if (item.activity && item.activity.type == 2) {
uni.redirectTo({
url: `/pages/activity/goods_bargain_details/index?id=${item.activity.id}&bargain=${this.uid}`,
});
return;
}
// 拼团
if (item.activity && item.activity.type == 3) {
uni.redirectTo({
url: `/pages/activity/goods_combination_details/index?id=${item.activity.id}`,
});
return;
}
// 秒杀
if (item.activity && item.activity.type == 1) {
uni.redirectTo({
url: `/pages/activity/goods_seckill_details/index?id=${item.activity.id}&time_id=${item.activity.time_id}`,
});
return;
}
},
// 微信登录回调
onLoadFun: function (e) {
// this.getUserInfo();
// this.get_product_collect();
},
ChangCouponsClone: function () {
this.$set(this.coupon, "coupon", false);
},
/*
* 获取用户信息
*/
getUserInfo: function () {
let that = this;
getUserInfo().then((res) => {
that.$set(that, "uid", res.data.uid);
that.$set(that, "is_money_level", res.data.is_money_level);
});
},
/**
* 购物车数量加和数量减
*
*/
ChangeCartNum: function (changeValue) {
//changeValue:是否 加|减
//获取当前变动属性
let productSelect = this.productValue[this.attrValue];
//如果没有属性,赋值给商品默认库存
if (productSelect === undefined && !this.attr.productAttr.length)
productSelect = this.attr.productSelect;
//无属性值即库存为0不存在加减
let stock = productSelect.stock || 0;
let num = this.attr.productSelect;
if (
productSelect === undefined ||
(this.storeInfo.limit_num &&
num.cart_num >= this.storeInfo.limit_num &&
changeValue)
)
return;
if (changeValue) {
num.cart_num++;
if (num.cart_num > stock) {
this.$set(
this.attr.productSelect,
"cart_num",
stock ? stock : this.storeInfo.min_qty,
);
this.$set(this, "cart_num", stock ? stock : 1);
}
} else {
num.cart_num--;
if (num.cart_num < 1) {
this.$set(
this.attr.productSelect,
"cart_num",
this.storeInfo.min_qty,
);
this.$set(this, "cart_num", 1);
}
}
},
attrVal(val) {
this.$set(
this.attr.productAttr[val.indexw],
"index",
this.attr.productAttr[val.indexw].attr_values[val.indexn],
);
},
/**
* 属性变动赋值
*
*/
ChangeAttr: function (res) {
let productSelect = this.productValue[res];
if (!productSelect) {
this.$util.Tips({
title: this.$t(`重新选择`),
success: () => {
this.noGoods = true;
this.attr.productSelect.stock = 0;
this.attr.productSelect.quota = 0;
this.attr.productSelect.cart_num = 0;
},
});
} else {
this.noGoods = false;
}
this.$set(this, "selectSku", productSelect);
if (productSelect && productSelect.stock > 0) {
this.$set(this.attr.productSelect, "image", productSelect.image);
// this.$set(this.attr.productSelect, 'price', productSelect.price);
this.$set(this.attr.productSelect, "stock", productSelect.stock);
this.$set(this.attr.productSelect, "unique", productSelect.unique);
this.$set(this.attr.productSelect, "cart_num", this.storeInfo.min_qty);
// this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
this.$set(this, "attrValue", res);
this.$set(this, "attrTxt", this.$t(`已选择`));
this.setRealPrice(this.storeInfo.id, productSelect.unique);
} else {
this.$set(this.attr.productSelect, "image", productSelect.image);
this.$set(this.attr.productSelect, "price", productSelect.price);
this.$set(this.attr.productSelect, "stock", 0);
this.$set(this.attr.productSelect, "unique", "");
this.$set(this.attr.productSelect, "cart_num", 0);
this.$set(
this.attr.productSelect,
"vip_price",
this.storeInfo.vip_price,
);
this.$set(this, "attrValue", "");
this.$set(this, "attrTxt", this.$t(`请选择`));
}
},
setRealPrice(id, unique) {
realPrice(id, unique).then((res) => {
this.realPriceData = res.data;
this.$set(this.attr.productSelect, "price", res.data.real_price);
this.$set(this.attr.productSelect, "vip_price", res.data.member_price);
this.ot_price = res.data.ot_price;
});
},
/**
* 领取完毕移除当前页面领取过的优惠券展示
*/
ChangCoupons: function (e) {
let coupon = e;
let couponList = this.$util.ArrayRemove(this.couponList, "id", coupon.id);
this.$set(this, "couponList", couponList);
this.getCouponList();
},
/**
* 获取产品详情
*
*/
getGoodsDetails() {
let that = this;
uni.showLoading({
title: "加载中",
mask: true,
});
getProductDetail(that.id)
.then((res) => {
uni.hideLoading();
let storeInfo = res.data.storeInfo;
let good_list = res.data.good_list || [];
this.is_gift = res.data.storeInfo.is_gift;
that.$set(that, "storeInfo", storeInfo);
that.$set(
that,
"presale_pay_status",
res.data.storeInfo.presale_pay_status,
); // 1未开始; 2进行中; 3已结束
that.$set(that, "reply", res.data.reply ? [res.data.reply] : []);
that.$set(that, "replyCount", res.data.replyCount);
that.$set(that, "replyChance", res.data.replyChance);
that.$set(that.attr, "productAttr", res.data.productAttr);
that.$set(that, "productValue", res.data.productValue);
that.$set(that, "is_vip", res.data.storeInfo.is_vip);
that.$set(that.sharePacket, "priceName", res.data.priceName);
that.$set(
that.sharePacket,
"isState",
res.data.priceName != 0 ? true : false,
);
that.$set(that, "storeSelfMention", res.data.store_self_mention);
that.$set(that, "good_list", good_list);
if (!storeInfo.wechat_code) {
// #ifdef H5
this.codeVal =
window.location.origin +
"/pages/goods_details/index?id=" +
this.id +
"&spid=" +
this.$store.state.app.uid;
// #endif
// #ifdef APP-PLUS
this.codeVal =
HTTP_REQUEST_URL +
"/pages/goods_details/index?id=" +
this.id +
"&spid=" +
this.$store.state.app.uid;
// #endif
} else {
that.$set(that, "PromotionCode", storeInfo.wechat_code);
}
that.$set(
that,
"activity",
res.data.activity ? res.data.activity : [],
);
that.$set(that, "couponList", res.data.coupons);
that.$set(
that,
"routineContact",
Number(res.data.routine_contact_type),
);
uni.setNavigationBarTitle({
title: storeInfo.store_name.substring(0, 7) + "...",
});
for (let key in res.data.productValue) {
let obj = res.data.productValue[key];
that.skuArr.push(obj);
}
this.$set(this, "selectSku", that.skuArr[0]);
that.$set(
that,
"diff",
that.$util.$h.Sub(storeInfo.price, storeInfo.vip_price),
);
that.$set(that, "storeImage", that.storeInfo.image);
that.$set(that, "svip_price_open", res.data.svip_price_open);
if (that.isLogin) {
that.getUserInfo();
}
// #ifdef H5 || APP-PLUS
this.getImageBase64();
// #endif
// #ifdef H5
if (that.isLogin) {
that.ShareInfo();
}
// #endif
this.$nextTick(() => {
if (good_list.length) {
// #ifndef APP-PLUS
// #endif
// #ifdef APP-PLUS
setTimeout(() => {}, 1000);
// #endif
}
});
// #ifndef H5
that.downloadFilestoreImage();
// #endif
if (!res.data.productAttr.length) {
// 单规格
that.DefaultSelect();
this.setRealPrice(storeInfo.id, res.data.spec_unique);
} else {
// 多规格
that.DefaultSelect();
}
that.getCartCount();
this.showAnimate = true;
})
.catch((err) => {
uni.hideLoading();
//状态异常返回上级页面
return that.$util.Tips(
{
title: err.toString(),
},
{
tab: 3,
url: 1,
},
);
});
},
infoScroll: function () {
return;
},
/**
* 默认选中属性
*
*/
DefaultSelect: function () {
let productAttr = this.attr.productAttr;
let value = [];
if (this.storeInfo.default_sku) {
value = this.storeInfo.default_sku.split(",");
} else {
for (var key in this.productValue) {
if (this.productValue[key].stock > 0) {
value = this.attr.productAttr.length ? key.split(",") : [];
break;
}
}
}
for (let i = 0; i < productAttr.length; i++) {
this.$set(productAttr[i], "index", value[i]);
}
//sort();排序函数:数字-英文-汉字;
let productSelect = this.productValue[value.join(",")];
if (productSelect && productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeInfo.store_name,
);
this.$set(this.attr.productSelect, "image", productSelect.image);
// this.$set(this.attr.productSelect, 'price', productSelect.price);
this.$set(this.attr.productSelect, "stock", productSelect.stock);
this.$set(this.attr.productSelect, "unique", productSelect.unique);
this.$set(this.attr.productSelect, "cart_num", this.storeInfo.min_qty);
this.$set(this, "attrValue", value.join(","));
// this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
this.$set(this, "attrTxt", this.$t(`已选择`));
this.setRealPrice(this.storeInfo.id, productSelect.unique);
} else if (!productSelect && productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeInfo.store_name,
);
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
this.$set(this.attr.productSelect, "stock", 0);
this.$set(this.attr.productSelect, "unique", "");
this.$set(this.attr.productSelect, "cart_num", 0);
this.$set(
this.attr.productSelect,
"vip_price",
this.storeInfo.vip_price,
);
this.$set(this, "attrValue", "");
this.$set(this, "attrTxt", this.$t(`请选择`));
} else if (!productSelect && !productAttr.length) {
this.$set(
this.attr.productSelect,
"store_name",
this.storeInfo.store_name,
);
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
this.$set(
this.attr.productSelect,
"unique",
this.storeInfo.unique || "",
);
this.$set(this.attr.productSelect, "cart_num", this.storeInfo.min_qty);
this.$set(
this.attr.productSelect,
"vip_price",
this.storeInfo.vip_price,
);
this.$set(this, "attrValue", "");
this.$set(this, "attrTxt", this.$t(`请选择`));
}
},
/**
* 获取优惠券
*
*/
getCouponList(type) {
let that = this,
obj = {
page: 1,
limit: 20,
product_id: that.id,
};
if (type !== undefined || type !== null) {
obj.type = type;
}
getCoupons(obj).then((res) => {
that.$set(that.coupon, "count", res.data.count);
if (type === undefined || type === null) {
let count = [...that.coupon.count],
indexs = "";
let index = count.findIndex((item) => item);
let delCount = that.coupon.count,
newDelCount = [];
let countIndex = 0;
delCount.forEach((item, index) => {
if (item === 0) {
countIndex = index;
} else {
newDelCount.push(item);
}
});
if (newDelCount.length == 3) {
indexs = 2;
} else if (newDelCount.length == 2) {
if (countIndex === 2) {
indexs = 1;
} else {
indexs = 2;
}
} else {
indexs = delCount.findIndex((item) => item === count[index]);
}
that.$set(that.coupon, "type", indexs);
that.getCouponList(indexs);
} else {
that.$set(that.coupon, "list", res.data.list);
}
});
},
ChangCouponsUseState(index) {
let that = this;
that.coupon.list[index].is_use++;
// that.$set(that.coupon, "list", that.coupon.list);
that.$set(that.coupon, "coupon", false);
},
/**
*
*
* 收藏商品
*/
setCollect: function () {
if (this.isLogin === false) {
toLogin();
} else {
let that = this;
if (this.storeInfo.userCollect) {
collectDel([this.storeInfo.id]).then((res) => {
that.$set(
that.storeInfo,
"userCollect",
!that.storeInfo.userCollect,
);
return that.$util.Tips({
title: res.msg,
});
});
} else {
collectAdd(this.storeInfo.id).then((res) => {
that.$set(
that.storeInfo,
"userCollect",
!that.storeInfo.userCollect,
);
return that.$util.Tips({
title: res.msg,
});
});
}
}
},
onShowSpecModalFromPageDesign() {
this.selecAttr();
},
onChangeSpecFromPageDesign(item) {
if (item && item.suk) {
let values = item.suk.split(",");
if (
this.attr.productAttr &&
this.attr.productAttr.length === values.length
) {
for (let i = 0; i < this.attr.productAttr.length; i++) {
this.$set(this.attr.productAttr[i], "index", values[i]);
}
}
this.ChangeAttr(item.suk);
}
},
/**
* 打开属性插件
*/
selecAttr: function () {
// this.$refs.proSwiper.videoIsPause();
this.$set(this.attr, "cartAttr", true);
this.$set(this, "isOpen", true);
},
openModal(ref) {
this.$refs[ref].isShow = true;
},
/**
* 打开优惠券插件
*/
couponTap: function () {
let that = this;
if (that.isLogin === false) {
toLogin();
} else {
// this.$refs.proSwiper.videoIsPause();
that.getCouponList();
that.$set(that.coupon, "coupon", true);
}
},
goActivity(item) {
if (item.type === "1" && this.$permission("seckill")) {
uni.navigateTo({
url: `/pages/activity/goods_seckill_details/index?id=${item.id}&time_id=${item.time_id}`,
});
} else if (item.type === "2" && this.$permission("bargain")) {
uni.navigateTo({
url: `/pages/activity/goods_bargain_details/index?id=${item.id}&bargain=${this.uid}`,
});
} else if (item.type === "3" && this.$permission("combination")) {
uni.navigateTo({
url: `/pages/activity/goods_combination_details/index?id=${item.id}`,
});
}
},
onMyEvent: function () {
this.$set(this.attr, "cartAttr", false);
this.$set(this, "isOpen", false);
this.isGiftOrder = 0;
},
/**
* 打开属性加入购物车
*
*/
joinCart: function (e) {
//是否登录
if (this.isLogin === false) {
toLogin();
} else {
// this.$refs.proSwiper.videoIsPause();
this.goCat();
}
},
goCart() {
uni.reLaunch({
url: "/pages/order_addcart/order_addcart",
});
},
/*
* 加入购物车
*/
goCat(news) {
let that = this,
productSelect = that.productValue[this.attrValue];
that.currentPage = false;
//打开属性
if (that.attrValue) {
//默认选中了属性,但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
that.attr.cartAttr = !that.isOpen ? true : false;
} else {
if (that.isOpen) that.attr.cartAttr = true;
else that.attr.cartAttr = !that.attr.cartAttr;
}
//只有关闭属性弹窗时进行加入购物车
if (that.attr.cartAttr === true && that.isOpen === false)
return (that.isOpen = true);
//如果有属性,没有选择,提示用户选择
if (
that.attr.productAttr.length &&
productSelect === undefined &&
that.isOpen === true
)
return that.$util.Tips({
title: that.$t(`产品库存不足,请选择其它属性`),
});
if (that.attr.productSelect.cart_num <= 0) {
that.attr.productSelect.cart_num = 1;
that.isOpen = false;
return that.$util.Tips({
title: that.$t(`请选择数量`),
});
}
let q = {
productId: that.id,
cartNum: that.attr.productSelect.cart_num,
new: news === undefined ? 0 : 1,
uniqueId:
that.attr.productSelect !== undefined
? that.attr.productSelect.unique
: "",
virtual_type: that.storeInfo.virtual_type,
};
postCartAdd(q)
.then((res) => {
that.isOpen = false;
that.attr.cartAttr = false;
if (news) {
let url =
"/pages/goods/order_confirm/index?new=1&cartId=" +
res.data.cartId;
if (this.isGiftOrder) url += "&is_gift=" + this.isGiftOrder;
uni.navigateTo({
url,
});
} else {
that.$util.Tips({
title: that.$t(`添加成功`),
success: () => {
that.getCartCount(true);
},
});
}
this.isGiftOrder = 0;
})
.catch((err) => {
that.isOpen = false;
return that.$util.Tips({
title: err,
});
});
},
/**
* 获取购物车数量
* @param boolean 是否展示购物车动画和重置属性
*/
getCartCount: function (isAnima) {
let that = this;
const isLogin = that.isLogin;
if (isLogin) {
getCartCounts().then((res) => {
that.CartCount = res.data.count;
this.$store.commit(
"indexData/setCartNum",
that.CartCount > 99 ? "..." : that.CartCount + "",
);
// uni.setTabBarBadge({
// index: Number(uni.getStorageSync('FOOTER_ADDCART')) || 2,
// text: that.CartCount + ''
// })
//加入购物车后重置属性
if (isAnima) {
that.animated = true;
setTimeout(function () {
that.animated = false;
}, 500);
}
});
}
},
goGift() {
this.isGiftOrder = 1;
this.goBuy();
},
/**
* 立即购买
*/
goBuy() {
if (this.isLogin === false) {
toLogin();
} else {
// this.$refs.proSwiper.videoIsPause();
this.goCat(true);
}
},
open(data) {
this.showMenuIcon = data;
},
// 授权关闭
authColse: function (e) {
this.isShowAuth = e;
},
/**
* 分享打开
*
*/
listenerActionSheet() {
this.currentPage = false;
// #ifdef H5
if (this.$wechat.isWeixin()) {
this.weixinStatus = true;
}
// #endif
this.posters = true;
},
// 分享关闭
listenerActionClose: function () {
this.posters = false;
this.posterImageStatus = false;
},
//隐藏海报
posterImageClose: function () {
this.posterImageStatus = false;
},
// 小程序关闭分享弹窗;
goFriend: function () {
this.posters = false;
},
/*
* 保存到手机相册
*/
// #ifdef MP
savePosterPath: function () {
let that = this;
uni.getSetting({
success(res) {
if (!res.authSetting["scope.writePhotosAlbum"]) {
uni.authorize({
scope: "scope.writePhotosAlbum",
success() {
uni.saveImageToPhotosAlbum({
filePath: that.posterImage,
success: function (res) {
that.posterImageClose();
that.$util.Tips({
title: that.$t(`保存成功`),
icon: "success",
});
},
fail: function (res) {
that.$util.Tips({
title: that.$t(`保存失败`),
});
},
});
},
});
} else {
uni.saveImageToPhotosAlbum({
filePath: that.posterImage,
success: function (res) {
that.posterImageClose();
that.$util.Tips({
title: that.$t(`保存成功`),
icon: "success",
});
},
fail: function (res) {
that.$util.Tips({
title: that.$t(`保存失败`),
});
},
});
}
},
});
},
// #endif
//#ifdef APP-PLUS
savePosterPath() {
let that = this;
uni.saveImageToPhotosAlbum({
filePath: that.posterImage,
success: function (res) {
that.posterImageClose();
that.$util.Tips({
title: that.$t(`保存成功`),
icon: "success",
});
},
fail: function (res) {
that.$util.Tips({
title: that.$t(`保存失败`),
});
},
});
},
// #endif
//#ifdef H5
ShareInfo() {
let data = this.storeInfo;
let href = location.href;
if (this.$wechat.isWeixin()) {
getUserInfo().then((res) => {
href =
href.indexOf("?") === -1
? href + "?spread=" + res.data.uid
: updateURLParameter(href, "spread", res.data.uid);
let configAppMessage = {
desc: data.store_info,
title: data.store_name,
link: href,
imgUrl: data.image,
};
this.$wechat
.wechatEvevt(
[
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareAppMessage",
"onMenuShareTimeline",
],
configAppMessage,
)
.then((res) => {})
.catch((err) => {});
});
}
},
//#endif
tabCouponType: function (type) {
this.$set(this.coupon, "type", type);
this.getCouponList(type);
},
//点击sku图片打开轮播图
showImg(index) {
this.$refs.cusPreviewImg.open(this.selectSku.suk);
},
showSwiperImg(index) {
this.$refs.cusSwiperImg.open(index);
},
//滑动轮播图选择商品
changeSwitch(e) {
const productSelect = this.skuArr[e];
if (!productSelect) return;
this.$set(this, "selectSku", productSelect);
const skuList = productSelect.suk.split(",");
// 使用循环设置所有productAttr的index避免重复代码
skuList.forEach((sku, index) => {
if (this.attr.productAttr[index]) {
this.$set(this.attr.productAttr[index], "index", sku);
}
});
// 批量更新productSelect属性
const selectProps = ["image", "price", "stock", "unique", "vipPrice"];
selectProps.forEach((prop) => {
this.$set(this.attr.productSelect, prop, productSelect[prop]);
});
this.$set(this, "attrTxt", this.$t(`已选择`));
this.$set(this, "attrValue", productSelect.suk);
},
bindSortId(data) {
if (data.dataType.tabVal == 1) {
uni.navigateTo({
url: `/pages/goods/goods_list/index?cid=${data.classPage.id}&title=${data.classPage.name}`,
});
} else {
uni.navigateTo({
url: `/pages/annex/special/index?theme_id=${data.id}`,
});
}
},
},
};
</script>
<style scoped lang="scss">
.iconfonts {
color: #fff !important;
font-size: 28rpx;
}
.mask {
z-index: 300 !important;
}
.head-bar {
background: #fff;
}
.generate-posters {
width: 100%;
height: 170rpx;
background-color: #fff;
position: fixed;
left: 0;
bottom: 0;
z-index: 388;
transform: translate3d(0, 100%, 0);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
border-top: 1rpx solid #eee;
}
.generate-posters.on {
transform: translate3d(0, 0, 0);
}
.generate-posters .item {
flex: 1;
text-align: center;
font-size: 30rpx;
}
.generate-posters .item .iconfont {
font-size: 80rpx;
color: #5eae72;
}
.generate-posters .item .iconfont.icon-haibao {
color: #5391f1;
}
.generate-posters .item .iconfont.icon-haowuquan1 {
color: #ff954d;
}
// .product-con .footer {
// padding: 0 20rpx 0 30rpx;
// position: fixed;
// bottom: 0;
// width: 100%;
// box-sizing: border-box;
// background-color: rgba(255, 255, 255, 0.85);
// backdrop-filter: blur(10px);
// z-index: 277;
// border-top: 1rpx solid #f0f0f0;
// height: 100rpx;
// height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
// height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
// transform: translate3d(0, 100%, 0);
// transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
// .gift-icon {
// width: 40rpx;
// height: 40rpx;
// margin: 5rpx 0 5rpx;
// }
// }
// .product-con .footer .item {
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// font-size: 18rpx;
// color: #666;
// }
// .product-con .footer .item .iconfont {
// text-align: center;
// font-size: 40rpx;
// }
// .product-con .footer .item .iconfont.icon-shoucang1 {
// color: var(--view-theme);
// }
// .product-con .footer .item .iconfont.icon-gouwuche1 {
// font-size: 40rpx;
// position: relative;
// }
// .product-con .footer .item .iconfont.icon-gouwuche1 .num {
// color: #fff;
// position: absolute;
// font-size: 18rpx;
// padding: 2rpx 10rpx 3rpx;
// border-radius: 200rpx;
// top: -10rpx;
// right: -10rpx;
// }
.virbnt {
// width: 444rpx !important;
height: 76rpx !important;
border-radius: 50rpx !important;
overflow: hidden;
}
.virbnts {
width: 444rpx !important;
text-align: center;
line-height: 76rpx;
color: #fff;
font-size: 28rpx;
background-color: var(--view-bntColor);
border-radius: 50rpx !important;
}
.product-con .footer .bnt {
width: 444rpx;
height: 76rpx;
}
.product-con .footer .bnt .bnts {
width: 222rpx;
text-align: center;
line-height: 76rpx;
color: #fff;
font-size: 28rpx;
}
.product-con .footer .bnt .joinCart {
border-radius: 50rpx 0 0 50rpx;
background-color: var(--view-bntColor);
// background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
}
.product-con .footer .bnt .buy {
border-radius: 0 50rpx 50rpx 0;
background-color: var(--view-theme);
// background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
}
button {
padding: 0;
margin: 0;
line-height: normal;
background-color: #fff;
}
button::after {
border: 0;
}
action-sheet-item {
padding: 0;
height: 240rpx;
align-items: center;
display: flex;
}
.contact {
font-size: 16px;
width: 50%;
background-color: #fff;
padding: 8rpx 0;
border-radius: 0;
margin: 0;
line-height: 2;
}
.contact::after {
border: none;
}
.action-sheet {
font-size: 17px;
line-height: 1.8;
width: 50%;
position: absolute;
top: 0;
right: 0;
padding: 25rpx 0;
}
.canvas {
z-index: 300;
width: 750px;
height: 1190px;
}
.poster-pop {
width: 450rpx;
height: 714rpx;
position: fixed;
left: 50%;
transform: translateX(-50%);
z-index: 399;
top: 50%;
margin-top: -377rpx;
.poster-img {
border-radius: 6px;
}
}
.poster-pop image {
width: 100%;
height: 100%;
display: block;
}
.poster-pop .close {
width: 46rpx;
height: 75rpx;
position: fixed;
right: 0;
top: -73rpx;
display: block;
}
.poster-pop .save-poster {
background-color: #df2d0a;
font-size: 22rpx;
color: #fff;
text-align: center;
height: 76rpx;
line-height: 76rpx;
width: 100%;
border-radius: 40rpx;
margin-top: 28rpx;
}
.poster-pop .keep {
color: #fff;
text-align: center;
font-size: 25rpx;
margin-top: 10rpx;
}
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9;
}
.navbar .header {
height: 96rpx;
font-size: 30rpx;
color: #050505;
background-color: #fff;
/* #ifdef APP-PLUS */
width: 100%;
/* #endif */
}
.home {
/* #ifdef H5 */
top: 20rpx !important;
/* #endif */
}
.navbar .header .item {
position: relative;
margin: 0 25rpx;
}
.navbar .header .item.on:before {
position: absolute;
width: 60rpx;
height: 5rpx;
background-repeat: no-repeat;
content: "";
// background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
background-color: var(--view-theme);
bottom: -10rpx;
left: 50%;
margin-left: -28rpx;
}
.navbar {
position: fixed;
background-color: #fff;
top: 0;
left: 0;
z-index: 99;
width: 100%;
}
.navbar .navbarH {
position: relative;
}
.navbar .navbarH .navbarCon {
position: absolute;
bottom: 0;
height: 100rpx;
width: 100%;
/* #ifndef APP-PLUS || H5 || MP-ALIPAY */
// justify-content: flex-end;
padding-left: 48px;
/* #endif */
}
.home {
color: #333;
position: fixed;
/* #ifdef MP */
width: 126rpx;
left: 15rpx;
/* #endif */
/* #ifndef MP */
width: 56rpx;
left: 33rpx;
/* #endif */
height: 56rpx;
z-index: 99;
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 40rpx;
font-size: 33rpx;
&.right {
right: 33rpx;
left: unset;
}
&.on {
background: unset;
color: #333;
}
&.homeIndex {
/* #ifdef MP */
width: 98rpx;
/* #endif */
/* #ifndef MP */
border-color: rgba(255, 255, 255, 0);
/* #endif */
}
}
.home .iconfont {
width: 58rpx;
text-align: center;
}
.home .line {
width: 1rpx;
height: 34rpx;
background: #b3b3b3;
}
.home .icon-xiangzuo {
font-size: 28rpx;
}
.share-box {
z-index: 1000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
image {
width: 100%;
height: 100%;
}
}
.presale .bnts {
width: 444rpx;
height: 76rpx;
border-radius: 50rpx 50rpx;
background-color: var(--view-theme);
text-align: center;
line-height: 76rpx;
color: #fff;
font-size: 28rpx;
}
.delete-line {
text-decoration: line-through;
}
</style>