Files
xuwenbo 3a847ac185 升级小程序直播组件版本1.1.9
首页直播间列表点击全部进入一个直播bug
活动商品拼sku显示价格与库存为共享库存的bug
更改直播间id ->roomId
直播中开放轮询直播状态接口
直播回放不生效的问题,因为直播组件版本太低
2020-09-10 22:51:10 +08:00

367 lines
13 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="[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>