You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
455 lines
15 KiB
455 lines
15 KiB
<template> |
|
<view |
|
:class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" |
|
v-show="domStatus" |
|
> |
|
<product-con-swiper :imgUrls="imgUrls"></product-con-swiper> |
|
<view class="nav acea-row row-between-wrapper"> |
|
<view class="money"> |
|
￥ |
|
<text class="num" v-text="storeInfo.price"></text> |
|
<text class="y-money" v-text="'￥' + storeInfo.price"></text> |
|
</view> |
|
<view class="acea-row row-middle"> |
|
<view class="times"> |
|
<view>距秒杀结束仅剩</view> |
|
<count-down |
|
:isDay="false" |
|
:tipText="' '" |
|
:dayText="' '" |
|
:hourText="' : '" |
|
:minuteText="' : '" |
|
:secondText="' '" |
|
:datatime="datatime / 1000" |
|
></count-down> |
|
</view> |
|
<view class="iconfont icon-jiantou"></view> |
|
</view> |
|
</view> |
|
<view class="wrapperRush"> |
|
<view class="introduce acea-row row-between"> |
|
<view class="infor" v-text="storeInfo.title"></view> |
|
<!-- <view class="iconfont icon-fenxiang" @click="setPosterImageStatus"></view> --> |
|
</view> |
|
<view class="label acea-row row-middle"> |
|
<view class="stock" v-text="'库存:' + storeInfo.stock + '件'"></view> |
|
<view v-text="'销量:' + storeInfo.sales + '件'"></view> |
|
</view> |
|
</view> |
|
<!-- 规格 --> |
|
<view class="attribute acea-row row-between-wrapper" @click="selecAttrTap"> |
|
<view> |
|
<text>{{ attrTxt }}：</text> |
|
<text class="atterTxt">{{ attrValue }}</text> |
|
</view> |
|
<view class="iconfont icon-jiantou"></view> |
|
</view> |
|
<view class="product-intro"> |
|
<view class="title">产品介绍</view> |
|
<view class="conter" v-html="storeInfo.description"></view> |
|
</view> |
|
|
|
<!-- 操作栏 --> |
|
<view style="height: 100rpx"></view> |
|
<view class="footer acea-row row-between-wrapper"> |
|
<!-- #ifdef MP-WEIXIN --> |
|
<view class="item"> |
|
<button open-type="contact" class="contacButton"> |
|
<view style="padding-bottom: 8rpx" class="item"> |
|
<view class="iconfont icon-kefu"></view> |
|
<text>客服</text> |
|
</view> |
|
</button> |
|
</view> |
|
<!-- #endif --> |
|
<view class="item" @click="setCollect" v-if="userCollect"> |
|
<view class="iconfont icon-shoucang1"></view> |
|
<text>收藏</text> |
|
</view> |
|
<view class="item" @click="setCollect" v-if="!userCollect"> |
|
<view class="iconfont icon-shoucang"></view> |
|
<text>收藏</text> |
|
</view> |
|
<view |
|
class="bnt acea-row" |
|
v-if="seckillStatus == 1 && storeInfo.num > 0 && storeInfo.stock > 0" |
|
> |
|
<view class="joinCart" @click="openAlone"> |
|
<text>单独购买</text> |
|
</view> |
|
<view class="buy" @click="tapBuy"> |
|
<text>立即购买</text> |
|
</view> |
|
</view> |
|
|
|
<div |
|
class="bnt acea-row" |
|
v-if="seckillStatus == 1 && storeInfo.num <= 0 && storeInfo.stock <= 0" |
|
> |
|
<div class="joinCart" @click="openAlone">原价购买</div> |
|
<div class="buy bg-color-hui">已售罄</div> |
|
</div> |
|
<div class="bnt acea-row" v-if="seckillStatus == 2"> |
|
<div class="joinCart" @click="openAlone">原价购买</div> |
|
<div class="buy bg-color-hui">即将开始</div> |
|
</div> |
|
<div class="bnt acea-row" v-if="seckillStatus == 0"> |
|
<div class="joinCart" @click="openAlone">原价购买</div> |
|
<div class="buy bg-color-hui">已结束</div> |
|
</div> |
|
</view> |
|
|
|
<ProductWindow |
|
v-on:changeFun="changeFun" |
|
:attr="attr" |
|
:cartNum="cartNum" |
|
></ProductWindow> |
|
<StorePoster |
|
v-on:setPosterImageStatus="setPosterImageStatus" |
|
:posterImageStatus="posterImageStatus" |
|
:posterData="posterData" |
|
></StorePoster> |
|
</view> |
|
</template> |
|
<style scoped lang="less"> |
|
.noscroll { |
|
height: 100%; |
|
overflow: hidden; |
|
} |
|
</style> |
|
<script> |
|
import ProductConSwiper from "@/components/ProductConSwiper"; |
|
import CountDown from "@/components/CountDown"; |
|
import ProductWindow from "@/components/ProductWindow"; |
|
import StorePoster from "@/components/StorePoster"; |
|
import { getSeckillDetail } from "@/api/activity"; |
|
import { postCartAdd } from "@/api/store"; |
|
import { imageBase64 } from "@/api/public"; |
|
import { |
|
getCoupon, |
|
getCollectAdd, |
|
getCollectDel, |
|
getUserInfo, |
|
} from "@/api/user"; |
|
const NAME = "SeckillDetails"; |
|
|
|
export default { |
|
name: "SeckillDetails", |
|
components: { |
|
ProductConSwiper, |
|
CountDown, |
|
ProductWindow, |
|
StorePoster, |
|
}, |
|
props: {}, |
|
data: function () { |
|
return { |
|
seckillStatus: "", |
|
domStatus: false, |
|
posterData: { |
|
image: "", |
|
title: "", |
|
price: "", |
|
code: "", |
|
}, |
|
posterImageStatus: false, |
|
action: "", |
|
imgUrls: [], |
|
storeInfo: [], |
|
replyCount: 0, |
|
reply: [], |
|
cartNum: 1, |
|
attrTxt: "请选择", |
|
productValue: [], |
|
attrValue: "", |
|
attr: { |
|
cartAttr: false, |
|
productAttr: [], |
|
productSelect: {}, |
|
}, |
|
datatime: 0, |
|
userCollect: false, |
|
}; |
|
}, |
|
onShow: function () { |
|
this.mountedStart(); |
|
}, |
|
methods: { |
|
onShareAppMessage: function () { |
|
return { |
|
title: this.storeInfo.title, |
|
imageUrl: this.storeInfo.image, |
|
path: |
|
"pages/activity/GoodsSeckill/index?id=" + |
|
this.storeInfo.id + |
|
"&spread=" + |
|
uni.getStorageSync("uid") + |
|
"&pageType=good&codeType=routine", |
|
success(res) { |
|
uni.showToast({ |
|
title: "分享成功", |
|
}); |
|
}, |
|
fail(res) { |
|
uni.showToast({ |
|
title: "分享失败", |
|
icon: "none", |
|
}); |
|
}, |
|
}; |
|
}, |
|
openAlone: function () { |
|
this.$yrouter.push({ |
|
path: "/pages/shop/GoodsCon/index", |
|
query: { |
|
id: this.storeInfo.productId, |
|
}, |
|
}); |
|
// this.$yrouter.replace({ path: "/detail/" + this.storeInfo.productId }); |
|
}, |
|
routerGo(item) { |
|
this.$yrouter.push({ |
|
path: "/pages/user/CustomerList/index", |
|
}); |
|
}, |
|
//收藏商品 |
|
setCollect: function () { |
|
let that = this, |
|
id = that.storeInfo.id, |
|
category = "product"; |
|
if (that.userCollect) { |
|
getCollectDel(id, category).then(function () { |
|
that.userCollect = !that.userCollect; |
|
}); |
|
} else { |
|
getCollectAdd(id, category).then(function () { |
|
that.userCollect = !that.userCollect; |
|
}); |
|
} |
|
}, |
|
mountedStart: function () { |
|
var that = this; |
|
console.log(this); |
|
let id = that.$yroute.query.id; |
|
this.seckillStatus = that.$yroute.query.status; |
|
that.datatime = parseInt(that.$yroute.query.time); |
|
getSeckillDetail(id).then((res) => { |
|
that.userCollect = res.data.userCollect; |
|
res.data.storeInfo.description = res.data.storeInfo.description.replace( |
|
/\<img/gi, |
|
'<img style="max-width:100%;height:auto;"' |
|
); |
|
that.$set(that.attr, "productAttr", res.data.productAttr); |
|
that.$set(that, "productValue", res.data.productValue); |
|
that.$set(that, "storeInfo", res.data.storeInfo); |
|
that.$set(that, "imgUrls", res.data.storeInfo.sliderImageArr); |
|
that.$set(that, "replyCount", res.data.replyCount); |
|
that.$set(that, "reply", res.data.reply); |
|
that.posterData.image = that.storeInfo.image_base; |
|
that.updateTitle(); |
|
if (that.storeInfo.title.length > 30) { |
|
that.posterData.title = that.storeInfo.title.substring(0, 30) + "..."; |
|
} else { |
|
that.posterData.title = that.storeInfo.title; |
|
} |
|
that.posterData.price = that.storeInfo.price; |
|
that.posterData.code = that.storeInfo.code_base; |
|
// that.setProductSelect(); |
|
that.domStatus = true; |
|
that.DefaultSelect(); |
|
}); |
|
}, |
|
updateTitle() { |
|
// document.title = this.storeInfo.title || this.$yroute.meta.title; |
|
}, |
|
setPosterImageStatus: function () { |
|
// var sTop = document.body || document.documentElement; |
|
// sTop.scrollTop = 0; |
|
this.posterImageStatus = !this.posterImageStatus; |
|
}, |
|
DefaultSelect: function () { |
|
let productAttr = this.attr.productAttr; |
|
let value = []; |
|
for (let i = 0; i < productAttr.length; i++) { |
|
this.$set(productAttr[i], "index", 0); |
|
value.push(productAttr[i].attrValueArr[0]); |
|
} |
|
//sort();排序函数:数字-英文-汉字； |
|
let productSelect = this.productValue[value.sort().join(",")]; |
|
console.log(productSelect); |
|
if (productSelect && productAttr.length) { |
|
this.$set(this.attr.productSelect, "store_name", this.storeInfo.title); |
|
this.$set(this.attr.productSelect, "image", productSelect.image); |
|
this.$set(this.attr.productSelect, "price", productSelect.seckillPrice); |
|
this.$set(this.attr.productSelect, "stock", productSelect.seckillStock); |
|
this.$set(this.attr.productSelect, "unique", productSelect.unique); |
|
this.$set(this.attr.productSelect, "cart_num", 1); |
|
this.$set(this, "attrValue", value.sort().join(",")); |
|
this.$set(this, "attrTxt", "已选择"); |
|
} else if (!productSelect && productAttr.length) { |
|
this.$set(this.attr.productSelect, "store_name", this.storeInfo.title); |
|
this.$set(this.attr.productSelect, "image", this.storeInfo.image); |
|
this.$set( |
|
this.attr.productSelect, |
|
"price", |
|
this.storeInfo.seckillPrice |
|
); |
|
this.$set(this.attr.productSelect, "stock", 0); |
|
this.$set(this.attr.productSelect, "unique", ""); |
|
this.$set(this.attr.productSelect, "cart_num", 0); |
|
this.$set(this, "attrValue", ""); |
|
this.$set(this, "attrTxt", "请选择"); |
|
} else if (!productSelect && !productAttr.length) { |
|
this.$set(this.attr.productSelect, "store_name", this.storeInfo.title); |
|
this.$set(this.attr.productSelect, "image", this.storeInfo.image); |
|
this.$set( |
|
this.attr.productSelect, |
|
"price", |
|
this.storeInfo.seckillPrice |
|
); |
|
this.$set( |
|
this.attr.productSelect, |
|
"stock", |
|
this.storeInfo.seckillStock |
|
); |
|
this.$set( |
|
this.attr.productSelect, |
|
"unique", |
|
this.storeInfo.unique || "" |
|
); |
|
this.$set(this.attr.productSelect, "cart_num", 1); |
|
this.$set(this, "attrValue", ""); |
|
this.$set(this, "attrTxt", "请选择"); |
|
} |
|
}, |
|
//将父级向子集多次传送的函数合二为一； |
|
changeFun: function (opt) { |
|
if (typeof opt !== "object") opt = {}; |
|
let action = opt.action || ""; |
|
let value = opt.value === undefined ? "" : opt.value; |
|
this[action] && this[action](value); |
|
}, |
|
changeattr: function (res) { |
|
var that = this; |
|
that.attr.cartAttr = res; |
|
}, |
|
// ChangeCartNum: function (res) { |
|
// var that = this; |
|
// if (res) { |
|
// if (that.attr.productSelect.cart_num < that.storeInfo.seckillStock) { |
|
// that.attr.productSelect.cart_num += 1; |
|
// this.cartNum += 1; |
|
// console.log(this.cartNum) |
|
// } |
|
// } else { |
|
// if (that.attr.productSelect.cart_num > 1) { |
|
// that.attr.productSelect.cart_num -= 1; |
|
// this.cartNum -= 1; |
|
// } |
|
// } |
|
// }, |
|
ChangeCartNum: function (changeValue) { |
|
//changeValue:是否 加|减 |
|
//获取当前变动属性 |
|
let productSelect = this.productValue[this.attrValue]; |
|
//如果没有属性,赋值给商品默认库存 |
|
if (productSelect === undefined && !this.attr.productAttr.length) { |
|
productSelect = this.attr.productSelect; |
|
} |
|
//无属性值即库存为0；不存在加减； |
|
if (productSelect === undefined) return; |
|
let stock = productSelect.stock || 0; |
|
let num = this.attr.productSelect; |
|
if (changeValue) { |
|
num.cart_num++; |
|
if (num.cart_num > stock) { |
|
this.$set(this.attr.productSelect, "cart_num", stock); |
|
this.$set(this, "cartNum", stock); |
|
} else { |
|
this.$set(this.attr.productSelect, "cart_num", num.cart_num); |
|
this.$set(this, "cartNum", num.cart_num); |
|
} |
|
} else { |
|
num.cart_num--; |
|
if (num.cart_num < 1) { |
|
this.$set(this.attr.productSelect, "cart_num", 1); |
|
this.$set(this, "cartNum", 1); |
|
} else { |
|
this.$set(this.attr.productSelect, "cart_num", num.cart_num); |
|
this.$set(this, "cartNum", num.cart_num); |
|
} |
|
} |
|
}, |
|
//选择属性； |
|
ChangeAttr: function (res) { |
|
// 修改了规格 |
|
let productSelect = this.productValue[res.value]; |
|
if (productSelect) { |
|
this.attr.productAttr[res.indexw].index = res.indexn; |
|
this.$set(this.attr.productSelect, "image", productSelect.image); |
|
this.$set(this.attr.productSelect, "price", productSelect.seckillPrice); |
|
this.$set(this.attr.productSelect, "stock", productSelect.seckillStock); |
|
this.$set(this.attr.productSelect, "unique", productSelect.unique); |
|
this.$set(this.attr.productSelect, "cart_num", 1); |
|
this.$set(this, "attrValue", res.value); |
|
this.$set(this, "attrTxt", "已选择"); |
|
} else { |
|
this.$set(this.attr.productSelect, "image", this.storeInfo.image); |
|
this.$set( |
|
this.attr.productSelect, |
|
"price", |
|
this.storeInfo.seckillPrice |
|
); |
|
this.$set(this.attr.productSelect, "stock", 0); |
|
this.$set(this.attr.productSelect, "unique", ""); |
|
this.$set(this.attr.productSelect, "cart_num", 0); |
|
this.$set(this, "attrValue", ""); |
|
this.$set(this, "attrTxt", "请选择"); |
|
} |
|
}, |
|
selecAttrTap: function () { |
|
this.attr.cartAttr = true; |
|
this.isOpen = true; |
|
}, |
|
tapBuy: function () { |
|
var that = this; |
|
if (that.attr.cartAttr == false) { |
|
that.attr.cartAttr = !this.attr.attrcartAttr; |
|
} else { |
|
var data = {}; |
|
data.productId = that.storeInfo.productId; |
|
data.cartNum = that.attr.productSelect.cart_num; |
|
data.uniqueId = that.attr.productSelect.unique; |
|
data.secKillId = that.storeInfo.id; |
|
data.new = 1; |
|
postCartAdd(data) |
|
.then((res) => { |
|
that.$yrouter.push({ |
|
path: "/pages/order/OrderSubmission/index", |
|
query: { |
|
id: res.data.cartId, |
|
}, |
|
}); |
|
}) |
|
.catch((err) => { |
|
uni.showToast({ |
|
title: |
|
err.msg || err.response.data.msg || err.response.data.message, |
|
icon: "none", |
|
duration: 2000, |
|
}); |
|
}); |
|
} |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style scoped lang="less"> |
|
.product-con .nav { |
|
padding: 0 0.2 * 100rpx; |
|
} |
|
|
|
.product-con .footer .bnt .buy.bg-color-hui { |
|
background: #ccc; |
|
} |
|
</style>
|
|
|