code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-21 18:35:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 10:56:04 +08:00
commit ec3e958037
728 changed files with 132685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
buyer/src/components/goodsDetail/Promotion.vue Normal file
View File

@@ -0,0 +1,123 @@
<template>
<div>
<div class="wrapper" v-if="type === 'goodsDetail'">
<div class="wr-l"><Icon size="23" type="ios-alarm-outline" /> 秒杀活动</div>
<div class="count-down" v-if="end === ''">
<p>倒计时：</p><span>{{ hours }}</span><span>{{ minutes }}</span><span>{{ seconds }}</span>
</div>
<div v-else>{{end}}</div>
</div>
<span v-else class="cart-promotion">
<span v-if="end === ''">据活动结束：<span>{{ hours }}</span> : <span>{{ minutes }}</span> : <span>{{ seconds }}</span></span>
<span v-else>活动已结束</span>
</span>
</div>
</template>
<script>
export default {
props: {
time: { // 传入的初始时间
default: 1718977559428
},
type: {
default: 'goodsDetail', // 设置两个值，goodsDetail和cart，样式不同
type: String
}
},
data () {
return {
end: '', // 结束状态
hours: '', // 小时
minutes: '', // 分钟
seconds: '', // 秒
interval: '' // 定时器
};
},
mounted () {
this.init()
},
methods: {
countDown (val) {
function addZero (i) {
return i < 10 ? '0' + i : i + '';
}
var nowtime = new Date();
var endtime = new Date(val);
var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
var h = parseInt((lefttime / (60 * 60)) % 24);
var m = parseInt((lefttime / 60) % 60);
var s = parseInt(lefttime % 60);
h = addZero(h);
m = addZero(m);
s = addZero(s);
this.hours = h;
this.minutes = m
this.seconds = s;
if (lefttime <= 0) {
this.end = `活动已结束`;
clearInterval(this.interval)
}
},
init () {
this.interval = setInterval((item) => {
this.countDown(this.time);
}, 1000);
}
}
};
</script>
<style scoped lang="scss">
.cart-promotion{
font-size: 13px;
color: #999;
margin-left: 10px;
}
.wrapper {
background-image: linear-gradient(266deg, #ff0b33, #ff4257, #ff5f7c, #fa78a2);
height: 32px;
color: #fff;
line-height: 32px;
font-size: 16px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.wr-r{
font-size: 13px;
}
.count-down {
margin-right: -20px;
p{
float: left;
line-height: 20px;
}
> span {
position: relative;
float: left;
width: 20px;
height: 20px;
text-align: center;
background-color: #2f3430;
margin-right: 20px;
color: white;
font-size: 14px;
line-height: 20px;
&::after {
content: ":";
display: block;
position: absolute;
right: -20px;
font-weight: bolder;
font-size: 14px;
width: 20px;
height: 100%;
top: 0;
}
}
> span:last-child::after {
content: "";
}
}
</style>

658
buyer/src/components/goodsDetail/ShowGoods.vue Normal file
View File

@@ -0,0 +1,658 @@
<template>
<div class="wrapper">
<div class="item-detail-show">
<!-- 详情左侧展示数据、图片，收藏、举报 -->
<div class="item-detail-left">
<!-- 大图、放大镜 -->
<div class="item-detail-big-img">
<pic-zoom :url="imgList[imgIndex].url" :scale="2"></pic-zoom>
</div>
<div class="item-detail-img-row">
<div
class="item-detail-img-small"
@mouseover="imgIndex = index"
v-for="(item, index) in imgList"
:key="index"
>
<img :src="item.url" />
</div>
</div>
<div class="goodsConfig mt_10">
<span @click="collect" ><Icon type="ios-heart" :color="isCollected ? '#ed3f14' : '#666'" />{{isCollected?'已收藏':'收藏'}}</span>
<!-- <span>举报</span> -->
</div>
</div>
<!-- 右侧商品信息、活动信息、操作展示 -->
<div class="item-detail-right">
<div class="item-detail-title">
<p>
{{ skuDetail.goodsName }}
</p>
</div>
<!-- 限时秒杀 -->
<Promotion v-if="promotionMap['SECKILL']" :time="promotionMap['SECKILL'].endTime"></Promotion>
<!-- 商品详细 价格、优惠券、促销 -->
<div class="item-detail-price-row">
<div class="item-price-left">
<!-- 商品原价 -->
<div class="item-price-row" v-if="!skuDetail.promotionPrice">
<p>
<span class="item-price-title">价 &nbsp;&nbsp;&nbsp;&nbsp;格</span>
<span class="item-price">{{skuDetail.price | unitPrice("￥")}}</span>
</p>
</div>
<!-- 秒杀价格 -->
<div class="item-price-row" v-if="skuDetail.promotionPrice">
<p>
<span class="item-price-title" v-if="promotionMap['SECKILL']">秒 &nbsp;杀&nbsp;价</span>
<span class="item-price">{{skuDetail.promotionPrice | unitPrice("￥")}}</span>
<span class="item-price-old">{{skuDetail.price | unitPrice("￥")}}</span>
</p>
</div>
<!-- 优惠券展示 -->
<div class="item-price-row" v-if="promotionMap['COUPON'].length">
<p>
<span class="item-price-title">优 惠 券</span>
<span
class="item-coupon"
v-for="(item, index) in promotionMap['COUPON']"
:key="index"
@click="receiveCoupon(item.id)"
>
<span v-if="item.couponType == 'PRICE'">满{{ item.consumeThreshold }}减{{item.price}}</span>
<span v-if="item.couponType == 'DISCOUNT'">满{{ item.consumeThreshold }}打{{item.couponDiscount}}折</span>
</span>
</p>
</div>
<!-- 满减展示 -->
<div class="item-price-row" v-if="promotionMap['FULL_DISCOUNT']">
<p>
<span class="item-price-title">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
<span class="item-promotion">满减</span>
<span class="item-desc-pintuan" v-if="promotionMap['FULL_DISCOUNT'].fullMinus">满{{ promotionMap['FULL_DISCOUNT'].fullMoney }}元，立减现金{{ promotionMap['FULL_DISCOUNT'].fullMinus}}元</span>
<span class="item-desc-pintuan" v-if="promotionMap['FULL_DISCOUNT'].fullRate">满{{ promotionMap['FULL_DISCOUNT'].fullMoney }}元，立享{{ promotionMap['FULL_DISCOUNT'].fullRate}}折</span>
</p>
</div>
</div>
<div class="item-price-right">
<div class="item-remarks-sum">
<p>累计评价</p>
<p>
<span class="item-remarks-num">{{ skuDetail.commentNum || 0 }} 条</span>
</p>
</div>
</div>
</div>
<!-- 选择颜色 -->
<div class="item-select" v-for="(sku, index) in formatList" :key="sku.id">
<div class="item-select-title">
<p>{{ sku.name }}</p>
</div>
<div class="item-select-column">
<div class="item-select-row" v-for="(item) in sku.values" :key="item.id">
<div class="item-select-box" @click="select(index, sku.id, item.id)"
:class="{ 'item-select-box-active': item.id === currentSelceted[index] }"
>
<div class="item-select-intro">
<p>{{ item.value }}</p>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="add-buy-car-box">
<div class="item-select">
<div class="item-select-title">
<p>数量</p>
</div>
<div class="item-select-row">
<InputNumber :min="1" :disabled="skuDetail.quantity === 0" v-model="count"></InputNumber>
<span class="inventory"> 库存{{skuDetail.quantity}}</span>
</div>
</div>
<div class="item-select">
<div class="item-select-title">
<p>重量</p>
</div>
<div class="item-select-row">
<span class="inventory"> {{skuDetail.weight}}kg</span>
</div>
</div>
<div class="add-buy-car">
<Button type="error" :loading="loading" :disabled="skuDetail.quantity === 0" @click="addShoppingCartBtn">加入购物车</Button>
<Button type="warning" :loading="loading1" :disabled="skuDetail.quantity === 0" @click="buyNow">立即购买</Button>
</div>
</div>
</div>
<!-- <div class="item-detail-see">
<Divider>更多推荐</Divider>
<Row>
<Col :span="24" class="see-Item">
<img class="see-Img" src="https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489099128797.jpg" alt="" />
<p>
名龙堂i7 6700升7700 GTX1060 6G台式电脑主机DIY游戏组装整机
升6GB独显 送正版WIN10 一年上门
</p>
<p class="global_color">￥2500.00</p>
</Col>
<Col :span="24" class="see-Item">
<img
class="see-Img"
src="https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489099128797.jpg"
alt=""
/>
<p>
名龙堂i7 6700升7700 GTX1060 6G台式电脑主机DIY游戏组装整机
升6GB独显 送正版WIN10 一年上门
</p>
<p class="global_color">￥2500.00</p>
</Col>
</Row>
</div> -->
</div>
</div>
</template>
<script>
import Promotion from './Promotion.vue';
import PicZoom from 'vue-piczoom'; // 图片放大 https://github.com/826327700/vue-piczoom
import { collectGoods, isCollection, receiveCoupon, cancelCollect } from '@/api/member.js';
import { addCartGoods } from '@/api/cart.js';
export default {
name: 'ShowGoods',
props: {
detail: {
type: Object,
default: null
}
},
data () {
return {
count: 1, // 商品数量
imgIndex: 0, // 展示图片下标
currentSelceted: [], // 当前商品sku
imgList: this.detail.data.specList[0].specImage, // 商品图片列表
skuDetail: this.detail.data, // sku详情
goodsSpecList: this.detail.specs, // 商品spec
promotionMap: { // 活动状态
SECKILL: null,
FULL_DISCOUNT: null,
COUPON: []
}, // 促销活动
formatList: [], // 选择商品品类的数组
loading: false, // 立即购买loading
loading1: false, // 加入购物车loading
isCollected: false // 是否收藏
};
},
components: {
PicZoom,
Promotion
},
methods: {
select (index, id, valueId) { // 选择规格
this.$set(this.currentSelceted, index, valueId);
let selectedSkuId = this.goodsSpecList.find((i) => {
let matched = true;
let specValues = i.specValues.filter((j) => j.specName !== 'images');
for (let n = 0; n < specValues.length; n++) {
if (specValues[n].specValueId !== this.currentSelceted[n]) {
matched = false;
return;
}
}
if (matched) {
return i;
}
});
console.log(selectedSkuId);
this.$router.push({
path: '/goodsDetail',
query: { skuId: selectedSkuId.skuId, goodsId: this.skuDetail.goodsId }
});
},
addShoppingCartBtn () { // 添加购物车
const params = {
num: this.count,
skuId: this.skuDetail.id
};
this.loading = true;
addCartGoods(params).then(res => {
this.loading = false;
if (res.code === 200) {
this.$router.push({path: '/shoppingCart', query: {detail: this.skuDetail, count: this.count}});
} else {
this.$Message.warning(res.message);
}
});
},
buyNow () { // 立即购买
const params = {
num: this.count,
skuId: this.skuDetail.id,
cartType: 'BUY_NOW'
};
this.loading1 = true;
addCartGoods(params).then(res => {
this.loading1 = false;
if (res.code === 200) {
this.$router.push({path: '/pay', query: {way: 'BUY_NOW'}});
} else {
this.$Message.warning(res.message);
}
});
},
async collect () { // 收藏商品
if (this.isCollected) {
let cancel = await cancelCollect('GOODS', this.skuDetail.id)
if (cancel.success) {
this.$Message.success('取消收藏成功')
this.isCollected = false
}
} else {
let collect = await collectGoods('GOODS', this.skuDetail.id);
if (collect.code === 200) {
this.isCollected = true;
this.$Message.success('收藏商品成功,可以前往个人中心我的收藏查看');
}
}
},
formatSku (list) {
// 格式化数据
let arr = [{}];
list.forEach((item, index) => {
item.specValues.forEach((spec, specIndex) => {
let id = spec.specNameId;
let name = spec.specName;
let values = {
id: spec.specValueId,
value: spec.specValue,
quantity: item.quantity
};
if (name === 'images') {
return;
}
arr.forEach((arrItem, arrIndex) => {
if (
arrItem.name === name &&
arrItem.values &&
!arrItem.values.find((i) => i.id === values.id)
) {
arrItem.values.push(values);
}
let keys = arr.map((key) => {
return key.name;
});
if (!keys.includes(name)) {
arr.push({
id: id,
name: name,
values: [values]
});
}
});
});
});
arr.shift();
this.formatList = arr;
let cur = list.filter((i) => i.skuId === this.$route.query.skuId)[0];
if (cur) {
cur.specValues.filter((i) => i.specName !== 'images')
.forEach((value, _index) => {
this.currentSelceted[_index] = value.specValueId;
});
}
this.skuList = list;
},
receiveCoupon (id) { // 领取优惠券
receiveCoupon(id).then(res => {
if (res.success) {
this.$Message.success('优惠券领取成功')
} else {
this.$Message.warning(res.message)
}
})
},
promotion () { // 格式化促销活动，返回当前促销的对象
let keysArr = Object.keys(this.detail.promotionMap);
if (keysArr.length === 0) return false;
for (let i = 0; i < keysArr.length; i++) {
let key = keysArr[i].split('-')[0]
if (key === 'COUPON') {
this.promotionMap[key].push(this.detail.promotionMap[keysArr[i]])
} else {
this.promotionMap[key] = this.detail.promotionMap[keysArr[i]]
}
}
}
},
mounted () {
if (this.Cookies.getItem('userInfo')) {
isCollection('GOODS', this.skuDetail.id).then(res => {
if (res.success && res.result) {
this.isCollected = true;
}
})
}
this.formatSku(this.goodsSpecList);
this.promotion()
document.title = this.skuDetail.goodsName
}
};
</script>
<style scoped lang="scss">
/******************商品图片及购买详情开始******************/
.item-detail-see {
width: 175px;
margin-left: 30px;
}
.inventory {
padding-left: 4px;
@include sub_color($light_sub_color);
}
.global_color {
text-align: center;
}
.see-Img {
width: 100%;
height: 175px;
}
.see-Item {
> p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.Report {
color: $theme_color !important;
}
.wrapper {
@include white_background_color();
}
.item-sale-flex {
width: 29%;
padding: 0 3%;
}
.item-sale {
margin: 10px 0;
> h3 {
width: 13%;
text-align: center;
font-size: 20px;
line-height: 60px;
box-sizing: border-box;
border-right: 1px solid $border_color;
}
height: 60px;
justify-content: center;
align-items: center;
display: flex;
width: 1200px;
margin: 0 auto;
margin-bottom: 10px;
border: 1px solid $border_color;
background: #f7f7f7;
}
.item-detail-show {
width: 1200px;
margin: 0 auto;
padding: 30px;
display: flex;
flex-direction: row;
}
.item-detail-left {
width: 350px;
margin-right: 30px;
}
.item-detail-big-img {
width: 350px;
height: 350px;
box-shadow: 0px 0px 8px $border_color;
cursor: pointer;
}
.item-detail-big-img img {
width: 100%;
}
.item-detail-img-row {
margin-top: 15px;
display: flex;
}
.item-detail-img-small {
width: 68px;
height: 68px;
box-shadow: 0px 0px 8px #ccc;
cursor: pointer;
margin-left: 5px;
}
.item-detail-img-small img {
height: 100%;
width: 100%;
}
/*商品选购详情*/
.item-detail-right {
flex: 1;
display: flex;
flex-direction: column;
}
.item-detail-title p {
@include content_color($light_content_color);
font-weight: bold;
font-size: 20px;
padding: 8px 0;
}
.item-detail-express {
font-size: 14px;
padding: 2px 3px;
border-radius: 3px;
background-color: $theme_color;
color: #fff;
}
/*商品标签*/
.item-detail-tag {
padding: 8px 0;
font-size: 12px;
color: $theme_color;
}
/*价格详情等*/
.item-detail-price-row {
padding: 10px;
display: flex;
// width: 555px;
flex-direction: row;
justify-content: space-between;
// @include background_color($light_background_color);
background: url("../../assets/images/goodsDetail/price-bg.png");
}
.item-price-left {
display: flex;
flex-direction: column;
}
.item-price-title {
color: #999999;
font-size: 14px;
margin-right: 15px;
}
.item-price-row {
margin: 5px 0px;
}
.item-price {
color: $theme_color;
font-size: 20px;
cursor: pointer;
}
.item-price-old {
color: gray;
text-decoration: line-through;
font-size: 14px;
margin-left: 5px;
}
.item-coupon {
margin-right: 5px;
padding: 3px;
color: $theme_color;
font-size: 12px;
background-color: #ffdedf;
border: 1px dotted $theme_color;
cursor: pointer;
}
.item-promotion {
margin-right: 5px;
padding: 3px;
color: $theme_color;
font-size: 12px;
border: 1px solid $theme_color;
}
.item-remarks-sum {
padding-left: 8px;
border-left: 1px solid $border_color;
}
.item-remarks-sum p {
color: #999999;
font-size: 12px;
line-height: 10px;
text-align: center;
}
.item-remarks-num {
line-height: 18px;
color: #005eb7;
}
.item-select {
display: flex;
flex-direction: row;
margin-top: 15px;
}
.item-select-title {
@include content_color($light_content_color);
font-size: 14px;
margin-right: 15px;
width: 60px;
}
.item-select-column {
display: flex;
flex-wrap: wrap;
flex: 1;
}
.item-select-row {
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
margin-bottom: 8px;
}
.item-select-box {
display: flex;
flex-direction: row;
align-items: center;
}
.item-select-img {
width: 36px;
}
.item-select-box {
padding: 5px;
margin-right: 8px;
@include background_color($light_background_color);
border: 0.5px solid $border_color;
cursor: pointer;
@include content_color($light_content_color);
}
.item-select-box:hover {
border: 0.5px solid $theme_color;
}
.item-select-box-active {
border: 0.5px solid $theme_color;
}
.item-select-box-disabled {
background-color: gray;
}
.item-select-img img {
width: 100%;
}
.item-select-intro p {
margin: 0px;
padding: 5px;
}
.item-select-class {
padding: 5px;
margin-right: 8px;
@include sub_background_color($light_background_color);
border: 0.5px solid #ccc;
cursor: pointer;
}
.item-select-class:hover {
border: 0.5px solid $theme_color;
}
.add-buy-car-box {
width: 100%;
margin-top: 15px;
border-top: 1px dotted $border_color;
}
.add-buy-car {
margin-top: 15px;
}
.goodsConfig {
display: flex;
justify-content: space-between;
> span {
padding-right: 10px;
&:hover{
cursor: pointer;
color: $theme_color;
}
}
}
/******************商品图片及购买详情结束******************/
</style>

489
buyer/src/components/goodsDetail/ShowGoodsDetail.vue Normal file
View File

@@ -0,0 +1,489 @@
<template>
<div>
<div class="item-intro-show">
<!-- <div class="item-intro-recommend">
<div class="item-recommend-title">
<p>店铺热销</p>
</div>
<div class="item-intro-recommend-column">
<div class="item-recommend-column" v-for="(item, index) in hotList" :key="index">
<div class="item-recommend-img">
<img :src="item.img" alt="">
</div>
<div class="item-recommend-intro">
<span>
<span class="item-recommend-top-num">{{index + 1}}</span> 热销{{item.sale}}件</span>
<span class="item-recommend-price">￥{{item.price | unitPrice}}</span>
</div>
</div>
</div>
</div> -->
<div class="item-intro-detail" ref="itemIntroDetail">
<div class="item-intro-nav item-tabs">
<Tabs :animated="false" @on-click="tabClick">
<TabPane label="商品介绍">
<div class="item-intro-img" ref="itemIntroGoods">
<div v-html="skuDetail.intro" v-if="skuDetail.intro"></div>
<div v-else style="margin:20px;">暂无商品介绍</div>
</div>
</TabPane>
<TabPane label="商品评价">
<div class="remarks-container" ref="itemGoodsComment">
<div class="remarks-analyse-box">
<div class="remarks-analyse-goods">
<i-circle :percent="skuDetail.grade || 100" stroke-color="#5cb85c">
<span class="remarks-analyse-num">{{skuDetail.grade || 100}}%</span>
<p class="remarks-analyse-title">好评率</p>
</i-circle>
</div>
</div>
<div class="remarks-bar">
<span @click="searchByGrade('')" :class="{selectedBar: commentParams.grade === ''}">全部({{commentTypeNum.all}})</span>
<span @click="searchByGrade('GOOD')" :class="{selectedBar: commentParams.grade === 'GOOD'}">好评({{commentTypeNum.good}})</span>
<span @click="searchByGrade('MODERATE')" :class="{selectedBar: commentParams.grade === 'MODERATE'}">中评({{commentTypeNum.moderate}})</span>
<span @click="searchByGrade('WORSE')" :class="{selectedBar: commentParams.grade === 'WORSE'}">差评({{commentTypeNum.worse}})</span>
</div>
<div style="text-align: center;margin-top: 20px;" v-if="commentList.length === 0">
暂无评价数据
</div>
<div class="remarks-box" v-for="(item,index) in commentList" :key="index" v-else>
<div class="remarks-user">
<Avatar :src="item.memberProfile" />
<span class="remarks-user-name">{{item.memberName | secrecyMobile}}</span>
</div>
<div class="remarks-content-box">
<p>
<Rate disabled :value="Number(item.descriptionScore)" allow-half class="remarks-star"></Rate>
</p>
<p class="remarks-content">{{item.content}}</p>
<div class="comment-img" v-if="item.haveImage">
<div v-for="(img, imgIndex) in item.image.split(',')"
@click="previewImg(img, item)"
:class="{borderColor:img === item.previewImg}"
:key="imgIndex">
<img :src="img" alt="">
</div>
</div>
<div class="preview-img" v-if="item.previewImg" @click.prevent="hidePreviewImg(item)">
<div>
<span @click.stop="rotatePreviewImg(0, item)"><Icon type="md-refresh" />左转</span>
<span @click.stop="rotatePreviewImg(1, item)"><Icon type="md-refresh" />右转</span>
</div>
<img :src="item.previewImg" :style="{transform:`rotate(${item.deg}deg)`}" width="198" alt="">
</div>
<p class="remarks-sub">
<span class="remarks-item">{{item.goodsName}}</span>
<span class="remarks-time">{{item.createTime}}</span>
</p>
</div>
</div>
<div class="remarks-page">
<Page :total="commentTotal" size="small"
@on-change="changePageNum"
@on-page-size-change="changePageSize"
:page-size="commentParams.pageSize"
></Page>
</div>
</div>
</TabPane>
<!-- <TabPane label="商品问答">
<ShowGoodsQuestion/>
</TabPane> -->
</Tabs>
</div>
</div>
</div>
</div>
</template>
<script>
import ShowGoodsQuestion from '@/components/goodsDetail/ShowGoodsQuestion';
import { goodsComment, goodsCommentNum } from '@/api/member.js';
export default {
name: 'ShowGoodsDetail',
props: {
detail: { // 商品详情
type: Object,
default: null
}
},
data () {
return {
commentList: [], // 评论列表
commentParams: { // 评论传参
pageNumber: 1,
pageSize: 10,
grade: '',
goodsId: ''
},
commentTypeNum: {}, // 评论数量，包括好中差分别的数量
commentTotal: 0, // 评论总数
onceFlag: true // 只调用一次
};
},
computed: {
skuDetail () {
return this.detail.data;
}
},
methods: {
changeHeight (name) {
let heightCss = window.getComputedStyle(this.$refs[name]).height;
heightCss = parseInt(heightCss.substr(0, heightCss.length - 2)) + 89;
this.$refs.itemIntroDetail.style.height = heightCss + 'px';
},
changePageNum (val) {
this.commentParams.pageNumber = val;
this.getList();
},
changePageSize (val) {
this.commentParams.pageNumber = 1;
this.commentParams.pageSize = val;
this.getList();
},
getList () { // 获取评论列表
this.commentParams.goodsId = this.skuDetail.goodsId;
goodsComment(this.commentParams).then(res => {
if (res.code === 200) {
this.commentList = res.result.records;
this.commentTotal = res.result.total;
}
});
goodsCommentNum(this.skuDetail.goodsId).then(res => {
if (res.code === 200) {
this.commentTypeNum = res.result;
}
});
},
searchByGrade (grade) {
this.$set(this.commentParams, 'grade', grade);
this.commentParams.pageNumber = 1;
this.getList();
},
tabClick (name) {
if (name === 0) {
this.$nextTick(() => {
this.changeHeight('itemIntroGoods')
});
} else {
this.$nextTick(() => {
this.changeHeight('itemGoodsComment')
});
}
},
previewImg (img, item) { // 预览图片
this.$set(item, 'previewImg', img);
this.$nextTick(() => {
this.changeHeight('itemGoodsComment')
});
},
hidePreviewImg (item) { // 隐藏预览图片
this.$set(item, 'previewImg', '');
this.$nextTick(() => {
this.changeHeight('itemGoodsComment')
});
},
rotatePreviewImg (type, item) { // 图片旋转
if (type) {
if (item.deg) {
this.$set(item, 'deg', item.deg + 90);
} else {
this.$set(item, 'deg', 90);
}
} else {
if (item.deg) {
this.$set(item, 'deg', item.deg - 90);
} else {
this.$set(item, 'deg', -90);
}
}
},
handleScroll () {
if (this.onceFlag) {
this.$nextTick(() => {
this.changeHeight('itemIntroGoods')
});
this.onceFlag = false
}
}
},
mounted () {
this.$nextTick(() => {
setTimeout(this.changeHeight('itemIntroGoods'), 2000);
});
window.addEventListener('scroll', this.handleScroll)
this.getList();
},
components: {
ShowGoodsQuestion
}
};
</script>
<style scoped lang="scss">
/***************商品详情介绍和推荐侧边栏开始***************/
.item-intro-show{
width: 1200px;
margin: 15px auto;
display: flex;
flex-direction: row;
}
.item-intro-recommend{
width: 200px;
display: flex;
flex-direction: column;
}
.item-intro-recommend-column{
display: flex;
flex-direction: column;
box-shadow: 0px 0px 5px #999;
}
.item-recommend-title{
width: 100%;
height: 38px;
font-size: 16px;
line-height: 38px;
color: #fff;
background-color: $theme_color;
box-shadow: 0px 0px 5px $theme_color;
text-align: center;
}
.item-recommend-column{
margin-top: 15px;
}
.item-recommend-intro{
padding: 5px 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 12px;
color: #999;
cursor: pointer;
}
.item-recommend-img{
width: 80%;
margin: 0px auto;
cursor: pointer;
}
.item-recommend-img img{
width: 100%;
}
.item-recommend-top-num{
color: #fff;
margin: 0px 2px;
padding: 1px 5px;
border-radius: 12px;
background-color: $theme_color;
}
.item-recommend-price{
color: $theme_color;
font-weight: bolder;
}
.item-intro-detail{
margin: 0 30px;
// min-height: 1500px;
width: 100%;
}
.item-intro-nav{
width: 100%;
height: 38px;
background-color: #F7F7F7;
// border-bottom: 1px solid $theme_color;
}
.item-intro-nav ul{
margin: 0px;
padding: 0px;
list-style: none;
}
.item-intro-nav li{
float: left;
height: 100%;
width: 120px;
line-height: 38px;
text-align: center;
color: $theme_color;
}
.item-intro-nav li:first-child{
background-color: $theme_color;
color: #fff;
}
.item-intro-img {
width: 100%;
min-height: 300px;
}
.item-intro-img img{
max-width: 1000px;
}
/************* 商品参数 *************/
.item-param-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.item-param-box {
padding: 5px;
padding-left: 30px;
width: 240px;
height: 36px;
font-size: 14px;
/* text-align: center; */
/* background-color: #ccc; */
}
.item-param-title {
color: #232323;
}
.item-param-content {
color: #999;
}
.remarks-title {
padding-left: 15px;
height: 36px;
font-size: 16px;
font-weight: bolder;
line-height: 36px;
color: #666666;
background-color: #F7F7F7;
}
.remarks-analyse-box {
padding: 15px;
display: flex;
align-items: center;
}
.remarks-analyse-goods {
margin-left: 15px;
margin-right: 15px;
}
.remarks-analyse-num {
font-size: 26px;
}
.remarks-analyse-title {
font-size: 12px;
line-height: 20px;
}
.remarks-bar {
padding-left: 15px;
height: 36px;
line-height: 36px;
color: #666666;
background-color: #F7F7F7;
.selectedBar{
color: $theme_color;
}
}
.remarks-bar span {
margin-right: 15px;
&:hover{
color: $theme_color;
cursor: pointer;
}
}
.remarks-box {
padding: 15px;
display: flex;
flex-direction: row;
border-bottom: 1px #ccc dotted;
}
.remarks-user {
width: 180px;
}
.remarks-user-name {
padding-left: 15px;
}
.remarks-content-box {
width: calc(100% - 180px);
.comment-img{
display: flex;
.borderColor{
border-color: $theme_color;
}
div{
border: 1px solid #999;
margin-right: 5px;
width: 50px;
height: 50px;
img{width: 100%;}
}
}
.preview-img{
position: relative;
border: 1px solid #eee;
margin: 10px 0;
width: 200px;
div{
position: absolute;
top: 3px;
left: 3px;
z-index: 3;
span{
display: inline-block;
background-color: rgba(0,0,0,.5);
padding:3px 5px;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
span:nth-child(1) .ivu-icon {
transform: rotateY(180deg);
}
}
img:hover{
cursor: url(require('../../../static/small.cur')),auto;
}
}
}
.remarks-content {
font-size: 14px;
color: #232323;
line-height: 28px;
}
.remarks-sub {
margin-top: 5px;
color: #ccc;
}
.remarks-time {
margin-left: 15px;
}
.remarks-page {
margin: 15px;
display: flex;
justify-content:flex-end;
}
/***************商品详情介绍和推荐侧边栏结束***************/
/* 改变便签页样式 */
.ivu-tabs-ink-bar {
background-color: $theme_color !important;
}
/deep/.ivu-tabs-bar{
border: none;
}
.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab{
border-radius: 0px;
color: #999;
height: 38px;
// background: #F7F7F7;
}
.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active{
color: #fff;
background-color: $theme_color;
}
.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active:before{
content: '';
display: block;
width: 100%;
height: 1px;
color: #fff;
background: #F7F7F7;
position: absolute;
top: 0;
left: 0;
}
.ivu-rate-star-full:before, .ivu-rate-star-half .ivu-rate-star-content:before {
color: $theme_color;
}
</style>

53
buyer/src/components/goodsDetail/ShowGoodsQuestion.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<div class="wrapper">
<div v-if="true" class="question-list">
<div class="-item" v-for="index in 6" :key="index">
<!-- 提问 -->
<div class="-item-put -item-div">
<div class="-item-div-l blod">
<Tag color="warning">问</Tag>
有屏幕调节亮度吗
</div>
<div class="-item-div-r">2020年10月21日17:03:35</div>
</div>
<!-- 解答 -->
<div class="-item-reply -item-div">
<div class="-item-div-l">
<Tag color="success">答</Tag>
能调节，点屏幕上方有一条调整带，可正负2调整。
</div>
<div class="-item-div-r">2020年10月21日17:03:35</div>
</div>
</div>
</div>
<div v-else class="question-empty">
<empty></empty>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped lang="scss">
.-item-div {
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0;
}
.-item-div-l {
display: flex;
@include content_color($light_content_color);
}
.-item-div-r {
@include sub_color($light_content_color);
}
.blod {
font-weight: bold;
}
.-item {
margin: 10px 0;
border-bottom: 1px solid $border_color;
}
</style>

85
buyer/src/components/goodsDetail/ShowProductWarranty.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<div>
<div class="remarks-title">
<span>售后保障</span>
</div>
<div class="item-protect-container">
<div class="item-protect-box">
<p class="item-protect-title-box">
<Avatar style="background-color: #e4393c" icon="ribbon-a" />
<span class="item-protect-title">卖家服务</span>
</p>
<p class="item-protect-detail">
高品质敢承诺：7天无理由退货，30天免费换新，质量问题商家承担来回运费换新；如需发票，请在确认收货无误后联系商家开出。（注*发票不随货品一同发出）
</p>
</div>
<div class="item-protect-box">
<p class="item-protect-title-box">
<Avatar style="background-color: #e4393c" icon="cash" />
<span class="item-protect-title">平台承诺</span>
</p>
<p class="item-protect-detail">
平台卖家销售并发货的商品，由平台卖家提供发票和相应的售后服务。请您放心购买！<br> 注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
</p>
</div>
<div class="item-protect-box">
<p class="item-protect-title-box">
<Avatar style="background-color: #e4393c" icon="locked" />
<span class="item-protect-title">正品行货</span>
</p>
<p class="item-protect-detail">
BIT商城向您保证所售商品均为正品行货，BIT自营商品开具机打发票或电子发票。
</p>
</div>
<div class="item-protect-box">
<p class="item-protect-title-box">
<Avatar style="background-color: #e4393c" icon="settings" />
<span class="item-protect-title">全国联保</span>
</p>
<p class="item-protect-detail">
凭质保证书及BIT商城发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由BIT联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。BIT商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买！<br><br> 注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ShowProductWarranty'
};
</script>
<style scoped lang="scss">
.remarks-title {
padding-left: 15px;
height: 36px;
font-size: 16px;
font-weight: bolder;
line-height: 36px;
color: #666666;
background-color: #F7F7F7;
}
.item-protect-container {
padding: 15px;
}
.item-protect-box {
margin-bottom: 30px;
}
.item-protect-title-box {
display: flex;
align-items: center;
}
.item-protect-title {
padding-left: 15px;
font-size: 20px;
font-weight: bolder;
color: $theme_color;
}
.item-protect-detail {
padding-top: 5px;
padding-left: 46px;
font-size: 14px;
color: #999;
}
</style>