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.
366 lines
13 KiB
366 lines
13 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="false" :dayText="false" :hourText="' : '" :minuteText="' : '" |
|
:secondText="false" :datatime="datatime"></count-down> |
|
</view> |
|
<view class="iconfont icon-jiantou"></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="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="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"> |
|
<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> |
|
<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"> |
|
<view class="joinCart" @click="openAlone"> |
|
<text>单独购买</text> |
|
</view> |
|
<view class="buy" @click="tapBuy"> |
|
<text>立即购买</text> |
|
</view> |
|
</view> |
|
</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 { |
|
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 |
|
}; |
|
}, |
|
watch: { |
|
$yroute: function (n) { |
|
var that = this; |
|
if (n.name === NAME) { |
|
that.mountedStart(); |
|
} |
|
} |
|
}, |
|
mounted: function () { |
|
this.mountedStart(); |
|
}, |
|
methods: { |
|
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; |
|
let id = that.$yroute.query.id; |
|
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++; |
|
this.cartNum++; |
|
} |
|
} else { |
|
if (that.attr.productSelect.cart_num > 1) { |
|
that.attr.productSelect.cart_num--; |
|
this.cartNum--; |
|
} |
|
} |
|
}, |
|
//选择属性； |
|
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; |
|
} |
|
</style>
|
|
|