拼团和秒杀商品增加规格选择
This commit is contained in:
Gao xiaosong
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,4 +1,3 @@
|
||||
|
||||
view,
|
||||
scroll-view,
|
||||
swiper,
|
||||
@ -8,7 +7,7 @@ textarea,
|
||||
label,
|
||||
navigator,
|
||||
image {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
page {
|
||||
@ -2738,12 +2737,24 @@ page {
|
||||
background-image: -moz-linear-gradient(to right, #eb3729 0%, #eb3729 100%);
|
||||
}
|
||||
|
||||
|
||||
.product-con .footer .bnt .buy {
|
||||
border-radius: 0 0.5*100rpx 0.5*100rpx 0;
|
||||
background-image: linear-gradient(to right, #eb3729 0%, #eb3729 100%);
|
||||
background-image: -moz-linear-gradient(to right, #eb3729 0%, #eb3729 100%);
|
||||
}
|
||||
|
||||
.product-con .footer .bnt.seckill-bnt {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.buy {
|
||||
width: 100%;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*订单提交*/
|
||||
.order-submission .line {
|
||||
width: 100%;
|
||||
@ -7021,8 +7032,7 @@ page {
|
||||
/*抢购详情页*/
|
||||
.product-con .nav {
|
||||
box-sizing: border-box;
|
||||
background-image: url('https://h5.yixiang.co/static/images/rushBuy.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background: url('https://h5.yixiang.co/static/images/rushBuy.jpg') #fc4141 no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 1*100rpx;
|
||||
@ -8630,19 +8640,20 @@ rich-text {
|
||||
|
||||
/*单行文本溢出省略号*/
|
||||
.one-t {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transition: all linear 0.2s;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transition: all linear 0.2s;
|
||||
}
|
||||
|
||||
/*多行文本溢出省略号*/
|
||||
.more-t {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
transition: all linear 0.2s;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
transition: all linear 0.2s;
|
||||
}
|
||||
|
||||
/* ==================
|
||||
@ -8650,67 +8661,77 @@ rich-text {
|
||||
==================== */
|
||||
/* x水平排列*/
|
||||
.x-f {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*x两端且水平居中*/
|
||||
.x-bc {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*x平分且水平居中*/
|
||||
.x-ac {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*x水平靠上对齐*/
|
||||
.x-start {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/*x水平靠下对齐*/
|
||||
.x-end {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/*上下左右居中*/
|
||||
.x-c {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*y竖直靠左*/
|
||||
.y-start {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/*y竖直靠右*/
|
||||
.y-end {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/*y竖直居中*/
|
||||
.y-f {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// y竖直两端
|
||||
.y-b {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/*y竖直两端居中*/
|
||||
.y-bc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
@ -9197,3 +9218,69 @@ rich-text {
|
||||
.pa30 {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
|
||||
.min-goods {
|
||||
width: 152rpx;
|
||||
background: #fff;
|
||||
|
||||
.img-box {
|
||||
width: 152rpx;
|
||||
height: 152rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0rpx;
|
||||
z-index: 2;
|
||||
line-height: 35rpx;
|
||||
background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
|
||||
border-radius: 0px 18rpx 18rpx 0px;
|
||||
padding: 0 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: rgba(120, 79, 6, 1);
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
background-color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.price-box {
|
||||
width: 100%;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.seckill-current {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(225, 33, 43, 1);
|
||||
}
|
||||
|
||||
.original {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.contacButton {
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
line-height: 25rpx;
|
||||
}
|
||||
|
||||
.contacButton::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
default: []
|
||||
},
|
||||
menu: {
|
||||
default: 5
|
||||
default: 4
|
||||
},
|
||||
imgW: {
|
||||
type: Number,
|
||||
@ -78,14 +78,14 @@ export default {
|
||||
},
|
||||
// 路由跳转
|
||||
routerTo(item) {
|
||||
this.$yrouter.push(item.uniapp_url);
|
||||
this.$yrouter.push(item.uniapp_url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 产品分类
|
||||
// 产品分类
|
||||
.y-f {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -101,7 +101,7 @@ export default {
|
||||
|
||||
.menu-category-box {
|
||||
padding: 30rpx 30rpx 0 30rpx;
|
||||
background: #fff;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.menu-category-box,
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<view class="sh-title-card mb10">
|
||||
<view class="title-box">
|
||||
<image class="title-bg" src="@/static/images/title1.png" mode="aspectFill"></image>
|
||||
<view class="title-text">为你推荐</view>
|
||||
<!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> -->
|
||||
<view class="title-box">
|
||||
<image class="title-bg" src="@/static/images/title1.png" mode="aspectFill"></image>
|
||||
<view class="title-text">为你推荐</view>
|
||||
<!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hot-goods mx20 mb10" v-if="benefit.length">
|
||||
<view class="goods-list x-f">
|
||||
<view class="goods-item" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex">
|
||||
<view class="goods-box" @tap="routerGo(item)">
|
||||
<view class="img-box">
|
||||
<!-- <image class="tag-img" :src="item.image" mode=""></image> -->
|
||||
<image class="img" :src="item.image" lazy-load mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="tip one-t">{{ item.storeName }}</view>
|
||||
<view class="title more-t">{{ item.storeName }}</view>
|
||||
<view class="price-box">
|
||||
<view class="flex x-bc align-end">
|
||||
<view class="current">{{ item.activity_type === 'groupon' ? item.price : item.otPrice }}
|
||||
</view>
|
||||
<view class="sales miso-font">仅剩：{{ item.stock }}{{ item.unitName }}</view>
|
||||
<view class="hot-goods mx20 mb10" v-if="benefit.length">
|
||||
<view class="goods-list x-f">
|
||||
<view class="goods-item" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex">
|
||||
<view class="goods-box" @tap="routerGo(item)">
|
||||
<view class="img-box">
|
||||
<!-- <image class="tag-img" :src="item.image" mode=""></image> -->
|
||||
<image class="img" :src="item.image" lazy-load mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="x-f tag-box">
|
||||
<!-- <view class="discount">新人礼</view>
|
||||
<view class="tip one-t">{{ item.storeName }}</view>
|
||||
<view class="title more-t">{{ item.storeName }}</view>
|
||||
<view class="price-box">
|
||||
<view class="flex x-bc align-end">
|
||||
<view class="current">{{ item.activity_type === 'groupon' ? item.price : item.otPrice }}
|
||||
</view>
|
||||
<view class="sales miso-font">仅剩：{{ item.stock }}{{ item.unitName }}</view>
|
||||
</view>
|
||||
<view class="x-f tag-box">
|
||||
<!-- <view class="discount">新人礼</view>
|
||||
<view class="discount">满100减60</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
@ -57,29 +57,31 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.sh-title-card {
|
||||
width: 750rpx;
|
||||
}
|
||||
.title-box {
|
||||
width: 710rpx;
|
||||
height: 88rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
border-radius: 30rpx;
|
||||
|
||||
.title-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.sh-title-card {
|
||||
width: 750rpx;
|
||||
}
|
||||
.title-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bold;
|
||||
|
||||
.title-box {
|
||||
width: 710rpx;
|
||||
height: 88rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
border-radius: 30rpx;
|
||||
|
||||
.title-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
width: 345rpx;
|
||||
background: #fff;
|
||||
@ -132,7 +134,7 @@
|
||||
.price-box {
|
||||
padding: 10rpx 20rpx 0;
|
||||
width: 344rpx;
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
.sales {
|
||||
font-size: 20rpx;
|
||||
@ -189,8 +191,8 @@ box-sizing: border-box;
|
||||
|
||||
// 为你推荐
|
||||
.hot-goods {
|
||||
background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6);
|
||||
border-radius: 20rpx;
|
||||
// background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6);
|
||||
// border-radius: 20rpx;
|
||||
|
||||
.goods-list {
|
||||
flex-wrap: wrap;
|
||||
|
||||
@ -1,50 +1,52 @@
|
||||
<template>
|
||||
<view class="evaluateWtapper">
|
||||
<view
|
||||
class="evaluateItem"
|
||||
v-for="(item, evaluateWtapperIndex) in reply"
|
||||
:key="evaluateWtapperIndex"
|
||||
>
|
||||
<view class="pic-text acea-row row-middle">
|
||||
<view class="pictrue">
|
||||
<image :src="item.avatar" class="image" />
|
||||
<view class="evaluateWtapper" v-if="reply&&reply.length>0">
|
||||
<view v-for="(item, evaluateWtapperIndex) in reply" :key="evaluateWtapperIndex">
|
||||
<view class="evaluateItem" v-if="item">
|
||||
<view class="pic-text acea-row row-middle">
|
||||
<view class="pictrue">
|
||||
<image :src="item.avatar" class="image" />
|
||||
</view>
|
||||
<view class="acea-row row-middle">
|
||||
<view class="name line1">{{ item.nickname }}</view>
|
||||
<view class="start" :class="'star' + item.star"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="acea-row row-middle">
|
||||
<view class="name line1">{{ item.nickname }}</view>
|
||||
<view class="start" :class="'star' + item.star"></view>
|
||||
<view class="time">{{ item.createTime }} {{ item.sku||'' }}</view>
|
||||
<view class="evaluate-infor">{{ item.comment }}</view>
|
||||
<view class="imgList acea-row">
|
||||
<view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq">
|
||||
<image :src="itemn" class="image" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time">{{ item.createTime }} {{ item.sku||'' }}</view>
|
||||
<view class="evaluate-infor">{{ item.comment }}</view>
|
||||
<view class="imgList acea-row">
|
||||
<view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq">
|
||||
<image :src="itemn" class="image" />
|
||||
<view class="reply" v-if="item.merchantReplyContent">
|
||||
<span class="font-color-red">yshop店员</span>
|
||||
：{{item.merchantReplyContent}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="reply" v-if="item.merchantReplyContent">
|
||||
<span class="font-color-red">yshop店员</span>
|
||||
：{{item.merchantReplyContent}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { dataFormat } from "@/utils";
|
||||
|
||||
export default {
|
||||
name: "UserEvaluation",
|
||||
props: {
|
||||
reply: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {};
|
||||
},
|
||||
mounted: function() {},
|
||||
methods: {
|
||||
import {
|
||||
dataFormat
|
||||
}
|
||||
};
|
||||
} from "@/utils";
|
||||
|
||||
export default {
|
||||
name: "UserEvaluation",
|
||||
props: {
|
||||
reply: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
mounted: function () {
|
||||
console.log(this)
|
||||
},
|
||||
methods: {
|
||||
dataFormat
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<view class="price-box">
|
||||
<view class="y-f">
|
||||
<text class="seckill-current">￥{{ detail.price }}</text>
|
||||
<text class="original">{{ detail.browse }}人浏览</text>
|
||||
<text class="original">销量{{ detail.sales }}{{detail.unitName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title"><slot name="titleText"></slot></view>
|
||||
@ -37,51 +37,4 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.min-goods {
|
||||
width: 152rpx;
|
||||
background: #fff;
|
||||
.img-box {
|
||||
width: 152rpx;
|
||||
height: 152rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.tag {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0rpx;
|
||||
z-index: 2;
|
||||
line-height: 35rpx;
|
||||
background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
|
||||
border-radius: 0px 18rpx 18rpx 0px;
|
||||
padding: 0 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: rgba(120, 79, 6, 1);
|
||||
}
|
||||
.img {
|
||||
width: 100%;
|
||||
background-color: #ccc;
|
||||
}
|
||||
}
|
||||
.price-box {
|
||||
width: 100%;
|
||||
margin-top: 10rpx;
|
||||
.seckill-current {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(225, 33, 43, 1);
|
||||
}
|
||||
.original {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -85,20 +85,20 @@
|
||||
"list": [{
|
||||
"image": "https:\/\/shopro-1253949872.file.myqcloud.com\/uploads\/20200704\/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
"name": "",
|
||||
"path": "\/pages\/app\/coupon\/list",
|
||||
"path_name": "优惠券-优惠劵中心",
|
||||
"path": "/pages/user/coupon/UserCoupon/index",
|
||||
"path_name": "优惠券",
|
||||
"path_type": 1
|
||||
}, {
|
||||
"image": "https:\/\/shopro-1253949872.file.myqcloud.com\/uploads\/20200704\/cddb5d90a4241f6235d16368534bc730.png",
|
||||
"name": "",
|
||||
"path": "\/pages\/activity\/groupon\/list",
|
||||
"path_name": "活动-今日必拼",
|
||||
"path": "/pages/shop/GoodsList/index",
|
||||
"path_name": "商品",
|
||||
"path_type": 1
|
||||
}, {
|
||||
"image": "https:\/\/shopro-1253949872.file.myqcloud.com\/uploads\/20200704\/e047d312fb5930de972ae288b9b3bae7.png",
|
||||
"name": "",
|
||||
"path": "\/pages\/app\/score\/list",
|
||||
"path_name": "应用-积分商城",
|
||||
"path": "/pages/user/signIn/Integral/index",
|
||||
"path_name": "积分",
|
||||
"path_type": 1
|
||||
}],
|
||||
"name": "",
|
||||
@ -113,12 +113,8 @@
|
||||
// 路由跳转
|
||||
jump(path) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: item.id
|
||||
}
|
||||
path
|
||||
});
|
||||
this.$tools.routerTo(path);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -419,9 +419,9 @@
|
||||
"borderStyle": "black",
|
||||
"backgroundColor": "#ffffff",
|
||||
"height": "50px",
|
||||
"fontSize": "10px",
|
||||
"iconWidth": "24px",
|
||||
"spacing": "3px",
|
||||
"fontSize": "8px",
|
||||
"iconWidth": "16px",
|
||||
"spacing": "-3px",
|
||||
"list": [{
|
||||
"pagePath": "pages/home/index",
|
||||
"iconPath": "static/icon-home.png",
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
<view class="line1" v-text="itemSeckill.title"></view>
|
||||
<view class="money">
|
||||
限时价
|
||||
<text class="num font-color-red" v-text="'￥' + itemSeckill.price"></text>
|
||||
<text class="num font-color-red">￥{{itemSeckill.price||''}}</text>
|
||||
</view>
|
||||
<view class="progress cart-color">
|
||||
<view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view>
|
||||
@ -48,7 +48,7 @@
|
||||
<view class="grab bg-color-red" v-if="item.status === 1 && itemSeckill.stock > 0"
|
||||
@click="goDetail(itemSeckill.id)">马上抢</view>
|
||||
<view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</view>
|
||||
<view class="grab bg-color-red" v-if="item.status === 2">即将开始</view>
|
||||
<view class="grab bg-color-red" @click="goDetail(itemSeckill.id)" v-if="item.status === 2">即将开始</view>
|
||||
<view class="grab bg-color-red" v-if="item.status === 0">已结束</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -191,7 +191,7 @@
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.flash-sale {
|
||||
background: #f5f5f5!important;
|
||||
background: #f5f5f5 !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -200,18 +200,21 @@
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
.list{
|
||||
padding: 0 20rpx;
|
||||
.item{
|
||||
padding: .25*100rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
height: auto;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin-bottom: .2*100rpx;
|
||||
border-radius: .2*100rpx;
|
||||
|
||||
.list {
|
||||
padding: 0 20rpx;
|
||||
|
||||
.item {
|
||||
padding: .25*100rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
height: auto;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin-bottom: .2*100rpx;
|
||||
border-radius: .2*100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logoPic {
|
||||
width: 75rpx;
|
||||
height: 70rpx;
|
||||
@ -238,7 +241,7 @@
|
||||
}
|
||||
|
||||
.state {
|
||||
background: linear-gradient(90deg,#00c17b,#00c17b);
|
||||
background: linear-gradient(90deg, #00c17b, #00c17b);
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
border-radius: 30rpx;
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
<template>
|
||||
<view :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" v-show="domStatus">
|
||||
<!-- 商品轮播 -->
|
||||
<product-con-swiper :imgUrls="imgUrls"></product-con-swiper>
|
||||
|
||||
<!-- 商品信息描述 -->
|
||||
<view class="wrapper">
|
||||
<view class="share acea-row row-between row-bottom">
|
||||
<view class="money font-color-red">
|
||||
￥
|
||||
<text class="num" v-text="storeInfo.price"></text>
|
||||
<text class="y-money" v-text="'￥' + storeInfo.productPrice"></text>
|
||||
<!-- <text class="y-money" v-text="'￥' + storeInfo.productPrice"></text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="introduce" v-text="storeInfo.title"></view>
|
||||
@ -16,11 +19,22 @@
|
||||
<view v-text="'已拼:' + storeInfo.sales + storeInfo.unitName"></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="notice acea-row row-middle">
|
||||
<view class="num font-color-red">
|
||||
<text class="iconfont icon-laba"></text>
|
||||
已拼{{ storeInfo.sales
|
||||
}}{{ storeInfo.unitName }}
|
||||
已拼{{ storeInfo.sales }}{{ storeInfo.unitName }}
|
||||
<text class="line">|</text>
|
||||
</view>
|
||||
<view class="swiper-no-swiping swiper">
|
||||
@ -33,6 +47,8 @@
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 拼团人数，头像 -->
|
||||
<view class="assemble">
|
||||
<view v-for="(item, groupListindex) in groupList" :key="groupListindex">
|
||||
<view class="item acea-row row-between-wrapper" v-if="groupListindex < groupListCount">
|
||||
@ -49,15 +65,8 @@
|
||||
<text class="font-color-red" v-text="item.count"></text>
|
||||
<text>人成团</text>
|
||||
</view>
|
||||
<count-down
|
||||
:isDay="false"
|
||||
:tipText="'剩余 '"
|
||||
:dayText="false"
|
||||
:hourText="':'"
|
||||
:minuteText="':'"
|
||||
:secondText="false"
|
||||
:datatime="item.stopTime/1000"
|
||||
></count-down>
|
||||
<count-down :isDay="false" :tipText="'剩余 '" :dayText="false" :hourText="':'" :minuteText="':'"
|
||||
:secondText="false" :datatime="item.stopTime/1000"></count-down>
|
||||
</view>
|
||||
<view class="spellBnt" @click="groupRule(item.id)">
|
||||
去拼单
|
||||
@ -71,6 +80,8 @@
|
||||
<text class="iconfont icon-xiangxia"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 拼团规则 -->
|
||||
<view class="playWay">
|
||||
<view class="title acea-row row-between-wrapper">
|
||||
<view>拼团玩法</view>
|
||||
@ -91,6 +102,8 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户评价 -->
|
||||
<view class="userEvaluation">
|
||||
<view class="title acea-row row-between-wrapper">
|
||||
<view v-text="'用户评价(' + replyCount + ')'"></view>
|
||||
@ -101,278 +114,387 @@
|
||||
</view>
|
||||
<UserEvaluation :reply="reply"></UserEvaluation>
|
||||
</view>
|
||||
|
||||
<!-- 产品介绍 -->
|
||||
<view class="product-intro">
|
||||
<view class="title">产品介绍</view>
|
||||
<view class="conter" v-html="storeInfo.description"></view>
|
||||
<!-- <view class="conter" v-html=""></view> -->
|
||||
</view>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<view style="height:100rpx;"></view>
|
||||
<view class="footer-group acea-row row-between-wrapper">
|
||||
<!-- <view class="customerSer acea-row row-center-wrapper row-column">
|
||||
<view class="iconfont icon-kefu"></view>
|
||||
<view>客服</view>
|
||||
</view>-->
|
||||
<view class="customerSer acea-row row-center-wrapper row-column" @click="setCollect">
|
||||
<view class="iconfont" :class="userCollect ? 'icon-shoucang1' : 'icon-shoucang'"></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="bnt bg-color-violet" @click="openAlone">单独购买</view>
|
||||
<view class="bnt bg-color-red" @click="openTeam">立即开团</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="openTeam">
|
||||
<text>立即开团</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品信息弹窗 -->
|
||||
<ProductWindow v-if="cartNum" v-on:changeFun="changeFun" :attr="attr" :cartNum="cartNum"></ProductWindow>
|
||||
<StorePoster
|
||||
v-on:setPosterImageStatus="setPosterImageStatus"
|
||||
:posterImageStatus="posterImageStatus"
|
||||
:posterData="posterData"
|
||||
></StorePoster>
|
||||
<StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
|
||||
:posterData="posterData"></StorePoster>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { swiper, swiperSlide } from "vue-awesome-swiper";
|
||||
// import { swiper, swiperSlide } from "vue-awesome-swiper";
|
||||
|
||||
import ProductConSwiper from "@/components/ProductConSwiper";
|
||||
import CountDown from "@/components/CountDown";
|
||||
import UserEvaluation from "@/components/UserEvaluation";
|
||||
import ProductWindow from "@/components/ProductWindow";
|
||||
import StorePoster from "@/components/StorePoster";
|
||||
import { getCombinationDetail } from "@/api/activity";
|
||||
import { postCartAdd } from "@/api/store";
|
||||
import { imageBase64 } from "@/api/public";
|
||||
import {
|
||||
getCoupon,
|
||||
getCollectAdd,
|
||||
getCollectDel,
|
||||
getUserInfo
|
||||
} from "@/api/user";
|
||||
const NAME = "GroupDetails";
|
||||
import ProductConSwiper from "@/components/ProductConSwiper";
|
||||
import CountDown from "@/components/CountDown";
|
||||
import UserEvaluation from "@/components/UserEvaluation";
|
||||
import ProductWindow from "@/components/ProductWindow";
|
||||
import StorePoster from "@/components/StorePoster";
|
||||
import {
|
||||
getCombinationDetail
|
||||
} from "@/api/activity";
|
||||
import {
|
||||
postCartAdd
|
||||
} from "@/api/store";
|
||||
import {
|
||||
imageBase64
|
||||
} from "@/api/public";
|
||||
import {
|
||||
getCoupon,
|
||||
getCollectAdd,
|
||||
getCollectDel,
|
||||
getUserInfo
|
||||
} from "@/api/user";
|
||||
const NAME = "GroupDetails";
|
||||
|
||||
export default {
|
||||
name: "GroupDetails",
|
||||
components: {
|
||||
ProductConSwiper,
|
||||
CountDown,
|
||||
UserEvaluation,
|
||||
// swiper,
|
||||
// swiperSlide,
|
||||
ProductWindow,
|
||||
StorePoster
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
domStatus: false,
|
||||
posterData: {
|
||||
image: "",
|
||||
title: "",
|
||||
price: "",
|
||||
code: ""
|
||||
},
|
||||
posterImageStatus: false,
|
||||
reply: [],
|
||||
replyCount: 0,
|
||||
replyChance: 0,
|
||||
imgUrls: [],
|
||||
storeInfo: {},
|
||||
itemNew: {},
|
||||
groupListCount: 2,
|
||||
groupList: {},
|
||||
swiperTip: {
|
||||
direction: "vertical",
|
||||
autoplay: {
|
||||
disableOnInteraction: false,
|
||||
delay: 2000
|
||||
},
|
||||
loop: true,
|
||||
speed: 1000,
|
||||
observer: true,
|
||||
observeParents: true
|
||||
},
|
||||
attr: {
|
||||
cartAttr: false,
|
||||
productSelect: {
|
||||
export default {
|
||||
name: "GroupDetails",
|
||||
components: {
|
||||
ProductConSwiper,
|
||||
CountDown,
|
||||
UserEvaluation,
|
||||
// swiper,
|
||||
// swiperSlide,
|
||||
ProductWindow,
|
||||
StorePoster
|
||||
},
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
domStatus: false,
|
||||
posterData: {
|
||||
image: "",
|
||||
store_name: "",
|
||||
title: "",
|
||||
price: "",
|
||||
stock: "",
|
||||
unique: "",
|
||||
cart_num: 1
|
||||
code: ""
|
||||
},
|
||||
posterImageStatus: false,
|
||||
reply: [],
|
||||
replyCount: 0,
|
||||
replyChance: 0,
|
||||
imgUrls: [],
|
||||
storeInfo: {},
|
||||
itemNew: {},
|
||||
groupListCount: 2,
|
||||
groupList: {},
|
||||
attrTxt: "请选择",
|
||||
productValue: [],
|
||||
attrValue: "",
|
||||
swiperTip: {
|
||||
direction: "vertical",
|
||||
autoplay: {
|
||||
disableOnInteraction: false,
|
||||
delay: 2000
|
||||
},
|
||||
loop: true,
|
||||
speed: 1000,
|
||||
observer: true,
|
||||
observeParents: true
|
||||
},
|
||||
attr: {
|
||||
cartAttr: false,
|
||||
productAttr: [],
|
||||
productSelect: {},
|
||||
},
|
||||
cartNum: 1,
|
||||
userCollect: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$yroute: function (n) {
|
||||
var that = this;
|
||||
if (n.name === NAME) {
|
||||
that.mountedStart();
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow: 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 });
|
||||
},
|
||||
//收藏商品
|
||||
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;
|
||||
});
|
||||
}
|
||||
},
|
||||
cartNum: 1,
|
||||
userCollect: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$yroute: function(n) {
|
||||
var that = this;
|
||||
if (n.name === NAME) {
|
||||
that.mountedStart();
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow: 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 });
|
||||
},
|
||||
//收藏商品
|
||||
setCollect: function() {
|
||||
let that = this,
|
||||
id = that.storeInfo.id,
|
||||
category = "product";
|
||||
if (that.userCollect) {
|
||||
getCollectDel(id, category).then(function() {
|
||||
that.userCollect = !that.userCollect;
|
||||
mountedStart: function () {
|
||||
var that = this;
|
||||
let id = that.$yroute.query.id;
|
||||
getCombinationDetail(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, "itemNew", res.data.pinkOkList);
|
||||
that.$set(that, "groupList", res.data.pink);
|
||||
that.$set(that, "reply", [res.data.reply]);
|
||||
that.$set(that, "replyCount", res.data.replyCount);
|
||||
that.$set(that, "replyChance", res.data.replyChance);
|
||||
that.posterData.image = that.storeInfo.image;
|
||||
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.domStatus = true;
|
||||
console.log(this.storeInfo)
|
||||
that.DefaultSelect();
|
||||
});
|
||||
} else {
|
||||
getCollectAdd(id, category).then(function() {
|
||||
that.userCollect = !that.userCollect;
|
||||
});
|
||||
}
|
||||
},
|
||||
mountedStart: function() {
|
||||
var that = this;
|
||||
let id = that.$yroute.query.id;
|
||||
getCombinationDetail(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, "storeInfo", res.data.storeInfo);
|
||||
that.$set(that, "imgUrls", res.data.storeInfo.sliderImageArr);
|
||||
that.$set(that, "itemNew", res.data.pinkOkList);
|
||||
that.$set(that, "groupList", res.data.pink);
|
||||
that.$set(that, "reply", [res.data.reply]);
|
||||
that.$set(that, "replyCount", res.data.replyCount);
|
||||
that.$set(that, "replyChance", res.data.replyChance);
|
||||
that.setProductSelect();
|
||||
that.posterData.image = that.storeInfo.image;
|
||||
if (that.storeInfo.title.length > 30) {
|
||||
that.posterData.title = that.storeInfo.title.substring(0, 30) + "...";
|
||||
} else {
|
||||
that.posterData.title = that.storeInfo.title;
|
||||
},
|
||||
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]);
|
||||
}
|
||||
that.posterData.price = that.storeInfo.price;
|
||||
that.posterData.code = that.storeInfo.code_base;
|
||||
that.domStatus = true;
|
||||
console.log(this.storeInfo)
|
||||
//that.getImageBase64();
|
||||
});
|
||||
},
|
||||
getImageBase64: function() {
|
||||
let that = this;
|
||||
imageBase64(this.posterData.image, that.posterData.code).then(res => {
|
||||
that.posterData.image = res.data.image;
|
||||
that.posterData.code = res.data.code;
|
||||
});
|
||||
},
|
||||
setPosterImageStatus: function() {
|
||||
// var sTop = document.body || document.documentElement;
|
||||
// sTop.scrollTop = 0;
|
||||
this.posterImageStatus = !this.posterImageStatus;
|
||||
},
|
||||
groupRule: function(id) {
|
||||
var that = this;
|
||||
that.$yrouter.push({
|
||||
path: "/pages/activity/GroupRule/index",
|
||||
query: { id }
|
||||
});
|
||||
},
|
||||
goReply: function() {
|
||||
var that = this;
|
||||
that.$yrouter.push({
|
||||
path: "/pages/shop/EvaluateList/index",
|
||||
query: { id: that.storeInfo.product_id }
|
||||
});
|
||||
},
|
||||
setGroupListCount: function() {
|
||||
this.groupListCount = this.groupListCount + 2;
|
||||
},
|
||||
//将父级向子集多次传送的函数合二为一；
|
||||
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;
|
||||
that.attr.productSelect.cart_num = 1;
|
||||
that.cartNum = 1;
|
||||
uni.showToast({
|
||||
title: "每人每次限购1" + that.storeInfo.unitName,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
setProductSelect: function() {
|
||||
var that = this;
|
||||
var attr = that.attr;
|
||||
attr.productSelect.image = that.storeInfo.image;
|
||||
attr.productSelect.store_name = that.storeInfo.title;
|
||||
attr.productSelect.price = that.storeInfo.price+'';
|
||||
attr.productSelect.stock = that.storeInfo.stock;
|
||||
attr.cartAttr = false;
|
||||
console.log(that.storeInfo)
|
||||
that.$set(that, "attr", attr);
|
||||
console.log(this)
|
||||
},
|
||||
openTeam: function() {
|
||||
var that = this;
|
||||
if (that.attr.cartAttr == false) {
|
||||
that.attr.cartAttr = !this.attr.cartAttr;
|
||||
} else {
|
||||
var data = {};
|
||||
data.productId = that.storeInfo.productId;
|
||||
data.cartNum = that.attr.productSelect.cart_num;
|
||||
data.uniqueId = that.attr.productSelect.unique;
|
||||
data.combinationId = that.storeInfo.id;
|
||||
data.new = 1;
|
||||
postCartAdd(data)
|
||||
.then(res => {
|
||||
that.$yrouter.push({
|
||||
path: "/pages/order/OrderSubmission/index",
|
||||
query: { id: res.data.cartId }
|
||||
//sort();排序函数:数字-英文-汉字；
|
||||
let productSelect = this.productValue[value.sort().join(",")];
|
||||
console.log(productSelect)
|
||||
if (productSelect && productAttr.length) {
|
||||
this.$set(
|
||||
this.attr.productSelect,
|
||||
"store_name",
|
||||
this.storeInfo.storeName
|
||||
);
|
||||
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", 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.storeName
|
||||
);
|
||||
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, "attrValue", "");
|
||||
this.$set(this, "attrTxt", "请选择");
|
||||
} else if (!productSelect && !productAttr.length) {
|
||||
this.$set(
|
||||
this.attr.productSelect,
|
||||
"store_name",
|
||||
this.storeInfo.storeName
|
||||
);
|
||||
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", 1);
|
||||
this.$set(this, "attrValue", "");
|
||||
this.$set(this, "attrTxt", "请选择");
|
||||
}
|
||||
},
|
||||
getImageBase64: function () {
|
||||
let that = this;
|
||||
imageBase64(this.posterData.image, that.posterData.code).then(res => {
|
||||
that.posterData.image = res.data.image;
|
||||
that.posterData.code = res.data.code;
|
||||
});
|
||||
},
|
||||
setPosterImageStatus: function () {
|
||||
// var sTop = document.body || document.documentElement;
|
||||
// sTop.scrollTop = 0;
|
||||
this.posterImageStatus = !this.posterImageStatus;
|
||||
},
|
||||
groupRule: function (id) {
|
||||
var that = this;
|
||||
that.$yrouter.push({
|
||||
path: "/pages/activity/GroupRule/index",
|
||||
query: {
|
||||
id
|
||||
}
|
||||
});
|
||||
},
|
||||
goReply: function () {
|
||||
var that = this;
|
||||
that.$yrouter.push({
|
||||
path: "/pages/shop/EvaluateList/index",
|
||||
query: {
|
||||
id: that.storeInfo.product_id
|
||||
}
|
||||
});
|
||||
},
|
||||
setGroupListCount: function () {
|
||||
this.groupListCount = this.groupListCount + 2;
|
||||
},
|
||||
//将父级向子集多次传送的函数合二为一；
|
||||
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;
|
||||
that.attr.productSelect.cart_num = 1;
|
||||
that.cartNum = 1;
|
||||
uni.showToast({
|
||||
title: "每人每次限购1" + that.storeInfo.unitName,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
//选择属性；
|
||||
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.price);
|
||||
this.$set(this.attr.productSelect, "stock", productSelect.stock);
|
||||
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.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, "attrValue", "");
|
||||
this.$set(this, "attrTxt", "请选择");
|
||||
}
|
||||
},
|
||||
|
||||
openTeam: function () {
|
||||
var that = this;
|
||||
if (that.attr.cartAttr == false) {
|
||||
that.attr.cartAttr = !this.attr.cartAttr;
|
||||
} else {
|
||||
var data = {};
|
||||
data.productId = that.storeInfo.productId;
|
||||
data.cartNum = that.attr.productSelect.cart_num;
|
||||
data.uniqueId = that.attr.productSelect.unique;
|
||||
data.combinationId = 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
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title:
|
||||
err.msg || err.response.data.msg || err.response.data.message,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
//打开属性插件；
|
||||
selecAttrTap: function () {
|
||||
this.attr.cartAttr = true;
|
||||
this.isOpen = true;
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.product-con .wrapper {
|
||||
padding-bottom: 0.26 * 100rpx;
|
||||
}
|
||||
.noscroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.product-con .footer-group .bnt {
|
||||
// flex:1;
|
||||
width: 43%;
|
||||
}
|
||||
.product-con .footer-group .bnt.bg-color-violet {
|
||||
background-color: #fa8013;
|
||||
}
|
||||
.product-con .wrapper {
|
||||
padding-bottom: 0.26 * 100rpx;
|
||||
}
|
||||
|
||||
.noscroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-con .footer-group .bnt {
|
||||
// flex:1;
|
||||
width: 43%;
|
||||
}
|
||||
|
||||
.footer-group {
|
||||
button {
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.product-con .footer-group .bnt.bg-color-violet {
|
||||
background-color: #fa8013;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,19 +10,22 @@
|
||||
<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>
|
||||
<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>
|
||||
@ -39,197 +42,315 @@
|
||||
</view>
|
||||
<view style="height:100rpx;"></view>
|
||||
<view class="footerRush acea-row row-between-wrapper">
|
||||
<!-- <view
|
||||
class="customerSer acea-row row-center-wrapper row-column"
|
||||
@click="routerGo()"
|
||||
>
|
||||
<view class="iconfont icon-kefu"></view>
|
||||
<view>客服</view>
|
||||
</view> -->
|
||||
<view class="bnt bg-color-red" @click="tapBuy">立即购买</view>
|
||||
<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>
|
||||
|
||||
<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="bnt acea-row">
|
||||
<view class="buy seckill-bnt" @click="tapBuy">
|
||||
<text>立即购买</text>
|
||||
</view>
|
||||
</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="bnt seckill-bnt acea-row">
|
||||
<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>
|
||||
<StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
|
||||
:posterData="posterData"></StorePoster>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="less">
|
||||
.noscroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.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";
|
||||
const NAME = "SeckillDetails";
|
||||
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";
|
||||
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,
|
||||
attr: {
|
||||
cartAttr: false,
|
||||
productSelect: {
|
||||
export default {
|
||||
name: "SeckillDetails",
|
||||
components: {
|
||||
ProductConSwiper,
|
||||
CountDown,
|
||||
ProductWindow,
|
||||
StorePoster
|
||||
},
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
domStatus: false,
|
||||
posterData: {
|
||||
image: "",
|
||||
store_name: "",
|
||||
title: "",
|
||||
price: "",
|
||||
stock: "",
|
||||
unique: "",
|
||||
cart_num: 1
|
||||
code: ""
|
||||
},
|
||||
posterImageStatus: false,
|
||||
action: "",
|
||||
imgUrls: [],
|
||||
storeInfo: [],
|
||||
replyCount: 0,
|
||||
reply: [],
|
||||
cartNum: 1,
|
||||
attrTxt: "请选择",
|
||||
productValue: [],
|
||||
attrValue: "",
|
||||
attr: {
|
||||
cartAttr: false,
|
||||
productAttr: [],
|
||||
productSelect: {},
|
||||
},
|
||||
datatime: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$yroute: function (n) {
|
||||
var that = this;
|
||||
if (n.name === NAME) {
|
||||
that.mountedStart();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.mountedStart();
|
||||
},
|
||||
methods: {
|
||||
routerGo(item) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/user/CustomerList/index'
|
||||
})
|
||||
},
|
||||
mountedStart: function () {
|
||||
var that = this;
|
||||
let id = that.$yroute.query.id;
|
||||
that.datatime = parseInt(that.$yroute.query.time);
|
||||
getSeckillDetail(id).then(res => {
|
||||
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.storeName
|
||||
);
|
||||
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", 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.storeName
|
||||
);
|
||||
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, "attrValue", "");
|
||||
this.$set(this, "attrTxt", "请选择");
|
||||
} else if (!productSelect && !productAttr.length) {
|
||||
this.$set(
|
||||
this.attr.productSelect,
|
||||
"store_name",
|
||||
this.storeInfo.storeName
|
||||
);
|
||||
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", 1);
|
||||
this.$set(this, "attrValue", "");
|
||||
this.$set(this, "attrTxt", "请选择");
|
||||
}
|
||||
},
|
||||
datatime: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$yroute: function(n) {
|
||||
var that = this;
|
||||
if (n.name === NAME) {
|
||||
that.mountedStart();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.mountedStart();
|
||||
},
|
||||
methods: {
|
||||
routerGo(item) {
|
||||
this.$yrouter.push({ path: '/pages/user/CustomerList/index' })
|
||||
},
|
||||
mountedStart: function() {
|
||||
var that = this;
|
||||
let id = that.$yroute.query.id;
|
||||
that.datatime = parseInt(that.$yroute.query.time);
|
||||
getSeckillDetail(id).then(res => {
|
||||
res.data.storeInfo.description = res.data.storeInfo.description.replace(
|
||||
/\<img/gi,
|
||||
'<img style="max-width:100%;height:auto;"'
|
||||
);
|
||||
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) + "...";
|
||||
//将父级向子集多次传送的函数合二为一；
|
||||
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.stock) {
|
||||
that.attr.productSelect.cart_num++;
|
||||
this.cartNum++;
|
||||
}
|
||||
} else {
|
||||
that.posterData.title = that.storeInfo.title;
|
||||
if (that.attr.productSelect.cart_num > 1) {
|
||||
that.attr.productSelect.cart_num--;
|
||||
this.cartNum--;
|
||||
}
|
||||
}
|
||||
that.posterData.price = that.storeInfo.price;
|
||||
that.posterData.code = that.storeInfo.code_base;
|
||||
that.setProductSelect();
|
||||
that.domStatus = true;
|
||||
});
|
||||
},
|
||||
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;
|
||||
},
|
||||
//将父级向子集多次传送的函数合二为一；
|
||||
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.stock) {
|
||||
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.price);
|
||||
this.$set(this.attr.productSelect, "stock", productSelect.stock);
|
||||
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.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, "attrValue", "");
|
||||
this.$set(this, "attrTxt", "请选择");
|
||||
}
|
||||
} else {
|
||||
if (that.attr.productSelect.cart_num > 1) {
|
||||
that.attr.productSelect.cart_num--;
|
||||
this.cartNum--;
|
||||
}
|
||||
}
|
||||
},
|
||||
setProductSelect: function() {
|
||||
var that = this;
|
||||
var attr = that.attr;
|
||||
attr.productSelect.image = that.storeInfo.image;
|
||||
attr.productSelect.store_name = that.storeInfo.title;
|
||||
attr.productSelect.price = that.storeInfo.price;
|
||||
attr.productSelect.stock = that.storeInfo.stock;
|
||||
attr.cartAttr = false;
|
||||
that.$set(that, "attr", attr);
|
||||
},
|
||||
selecAttrTap: function() {
|
||||
this.cartAttr = 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 }
|
||||
},
|
||||
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
|
||||
});
|
||||
});
|
||||
})
|
||||
.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 .nav {
|
||||
padding: 0 0.2*100rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
217
pages/home/components/FirstNewProduct.vue
Normal file
217
pages/home/components/FirstNewProduct.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
|
||||
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:3} })">
|
||||
<text class="title">首发新品</text>
|
||||
<view class="group-people x-f">
|
||||
<text class="tip">更多</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-box swiper-box x-f">
|
||||
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
|
||||
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
|
||||
<view class="goods-list-box x-f">
|
||||
<block v-for="mgoods in goods" :key="mgoods.id">
|
||||
<view class="min-goods"
|
||||
@tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })">
|
||||
<view class="img-box">
|
||||
<view class="tag">new</view>
|
||||
<image class="img" :src="mgoods.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
<view class="y-f">
|
||||
<text class="seckill-current">￥{{ mgoods.price }}</text>
|
||||
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<slot name="titleText"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-dots" v-if="goodsList.length > 1">
|
||||
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
|
||||
:key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shActivityGoods from '@/components/sh-activity-goods.vue';
|
||||
|
||||
export default {
|
||||
name: "FirstNewProduct",
|
||||
components: {
|
||||
shActivityGoods
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
swiperCurrent: 0
|
||||
};
|
||||
},
|
||||
props: {
|
||||
detail: Array
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
watch: {
|
||||
detail(next) {
|
||||
console.log(next)
|
||||
this.goodsList = this.sortData(next, 4);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
},
|
||||
// 数据分层
|
||||
sortData(oArr, length) {
|
||||
let arr = [];
|
||||
let minArr = [];
|
||||
oArr.forEach(c => {
|
||||
if (minArr.length === length) {
|
||||
minArr = [];
|
||||
}
|
||||
if (minArr.length === 0) {
|
||||
arr.push(minArr);
|
||||
}
|
||||
minArr.push(c);
|
||||
});
|
||||
|
||||
return arr;
|
||||
},
|
||||
jump(path, query) {
|
||||
this.$yrouter.push({
|
||||
path,
|
||||
query,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-goods {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.swiper-box,
|
||||
.carousel {
|
||||
width: 700rpx;
|
||||
height: 240upx;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.carousel-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 28upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 10upx;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0rpx;
|
||||
z-index: 66;
|
||||
|
||||
.dot {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.dot-active {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #a8700d;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 今日必拼+限时抢购
|
||||
.group-goods {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.title-box {
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-people {
|
||||
.time-box {
|
||||
font-size: 26rpx;
|
||||
color: #edbf62;
|
||||
|
||||
.count-text-box {
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
background: #edbf62;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.head-box {
|
||||
.head-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 28rpx;
|
||||
padding-left: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cuIcon-right {
|
||||
font-size: 30rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods-item {
|
||||
margin-right: 22rpx;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
pages/home/components/HotCommodity.vue
Normal file
216
pages/home/components/HotCommodity.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
|
||||
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:2} })">
|
||||
<text class="title">热门榜单</text>
|
||||
<view class="group-people x-f">
|
||||
<text class="tip">更多</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-box swiper-box x-f">
|
||||
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
|
||||
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
|
||||
<view class="goods-list-box x-f">
|
||||
<block v-for="mgoods in goods" :key="mgoods.id">
|
||||
<view class="min-goods" @tap="jump('/pages/shop/GoodsCon/index',{id:mgoods.id})">
|
||||
<view class="img-box">
|
||||
<view class="tag">hot</view>
|
||||
<image class="img" :src="mgoods.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
<view class="y-f">
|
||||
<text class="seckill-current">￥{{ mgoods.price }}</text>
|
||||
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<slot name="titleText"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-dots" v-if="goodsList.length > 1">
|
||||
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
|
||||
:key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shActivityGoods from '@/components/sh-activity-goods.vue';
|
||||
|
||||
export default {
|
||||
name: "HotCommodity",
|
||||
components: {
|
||||
shActivityGoods
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
swiperCurrent: 0
|
||||
};
|
||||
},
|
||||
props: {
|
||||
detail: Array
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
watch: {
|
||||
detail(next) {
|
||||
console.log(next)
|
||||
this.goodsList = this.sortData(next, 4);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
},
|
||||
// 数据分层
|
||||
sortData(oArr, length) {
|
||||
let arr = [];
|
||||
let minArr = [];
|
||||
oArr.forEach(c => {
|
||||
if (minArr.length === length) {
|
||||
minArr = [];
|
||||
}
|
||||
if (minArr.length === 0) {
|
||||
arr.push(minArr);
|
||||
}
|
||||
minArr.push(c);
|
||||
});
|
||||
|
||||
return arr;
|
||||
},
|
||||
jump(path, query) {
|
||||
this.$yrouter.push({
|
||||
path,
|
||||
query,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-goods {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.swiper-box,
|
||||
.carousel {
|
||||
width: 700rpx;
|
||||
height: 240upx;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.carousel-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 28upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 10upx;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0rpx;
|
||||
z-index: 66;
|
||||
|
||||
.dot {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.dot-active {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #a8700d;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 今日必拼+限时抢购
|
||||
.group-goods {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.title-box {
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-people {
|
||||
.time-box {
|
||||
font-size: 26rpx;
|
||||
color: #edbf62;
|
||||
|
||||
.count-text-box {
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
background: #edbf62;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.head-box {
|
||||
.head-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 28rpx;
|
||||
padding-left: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cuIcon-right {
|
||||
font-size: 30rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods-item {
|
||||
margin-right: 22rpx;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
pages/home/components/ProductsRecommended.vue
Normal file
216
pages/home/components/ProductsRecommended.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
|
||||
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:1} })">
|
||||
<text class="title">精品推荐</text>
|
||||
<view class="group-people x-f">
|
||||
<text class="tip">更多</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-box swiper-box x-f">
|
||||
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
|
||||
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
|
||||
<view class="goods-list-box x-f">
|
||||
<block v-for="mgoods in goods" :key="mgoods.id">
|
||||
<view class="min-goods" @tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })">
|
||||
<view class="img-box">
|
||||
<!-- <view class="tag">{{ mgoods.people}}人团</view> -->
|
||||
<image class="img" :src="mgoods.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
<view class="y-f">
|
||||
<text class="seckill-current">￥{{ mgoods.price }}</text>
|
||||
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<slot name="titleText"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-dots" v-if="goodsList.length > 1">
|
||||
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
|
||||
:key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shActivityGoods from '@/components/sh-activity-goods.vue';
|
||||
|
||||
export default {
|
||||
name: "ProductsRecommended",
|
||||
components: {
|
||||
shActivityGoods
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
swiperCurrent: 0
|
||||
};
|
||||
},
|
||||
props: {
|
||||
detail: Array
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
watch: {
|
||||
detail(next) {
|
||||
console.log(next)
|
||||
this.goodsList = this.sortData(next, 4);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
},
|
||||
// 数据分层
|
||||
sortData(oArr, length) {
|
||||
let arr = [];
|
||||
let minArr = [];
|
||||
oArr.forEach(c => {
|
||||
if (minArr.length === length) {
|
||||
minArr = [];
|
||||
}
|
||||
if (minArr.length === 0) {
|
||||
arr.push(minArr);
|
||||
}
|
||||
minArr.push(c);
|
||||
});
|
||||
|
||||
return arr;
|
||||
},
|
||||
jump(path, query) {
|
||||
this.$yrouter.push({
|
||||
path,
|
||||
query,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-goods {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.swiper-box,
|
||||
.carousel {
|
||||
width: 700rpx;
|
||||
height: 240upx;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.carousel-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 28upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 10upx;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0rpx;
|
||||
z-index: 66;
|
||||
|
||||
.dot {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.dot-active {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #a8700d;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 今日必拼+限时抢购
|
||||
.group-goods {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.title-box {
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-people {
|
||||
.time-box {
|
||||
font-size: 26rpx;
|
||||
color: #edbf62;
|
||||
|
||||
.count-text-box {
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
background: #edbf62;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.head-box {
|
||||
.head-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 28rpx;
|
||||
padding-left: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cuIcon-right {
|
||||
font-size: 30rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods-item {
|
||||
margin-right: 22rpx;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
217
pages/home/components/PromoteProduct.vue
Normal file
217
pages/home/components/PromoteProduct.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
|
||||
<view class="title-box x-bc" @tap="$yrouter.push('/pages/shop/GoodsPromotion/index')">
|
||||
<text class="title">促销单品</text>
|
||||
<view class="group-people x-f">
|
||||
<text class="tip">更多</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-box swiper-box x-f">
|
||||
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
|
||||
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
|
||||
<view class="goods-list-box x-f">
|
||||
<block v-for="mgoods in goods" :key="mgoods.id">
|
||||
<view class="min-goods"
|
||||
@tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } })">
|
||||
<view class="img-box">
|
||||
<view class="tag">促销</view>
|
||||
<image class="img" :src="mgoods.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
<view class="y-f">
|
||||
<text class="seckill-current">日常价：￥{{ mgoods.price }}</text>
|
||||
<text class="original">仅剩：{{ mgoods.stock }}{{ mgoods.unitName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<slot name="titleText"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-dots" v-if="goodsList.length > 1">
|
||||
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
|
||||
:key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shActivityGoods from '@/components/sh-activity-goods.vue';
|
||||
|
||||
export default {
|
||||
name: "ProductsRecommended",
|
||||
components: {
|
||||
shActivityGoods
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
swiperCurrent: 0
|
||||
};
|
||||
},
|
||||
props: {
|
||||
detail: Array
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
watch: {
|
||||
detail(next) {
|
||||
console.log(next)
|
||||
this.goodsList = this.sortData(next, 4);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
},
|
||||
// 数据分层
|
||||
sortData(oArr, length) {
|
||||
let arr = [];
|
||||
let minArr = [];
|
||||
oArr.forEach(c => {
|
||||
if (minArr.length === length) {
|
||||
minArr = [];
|
||||
}
|
||||
if (minArr.length === 0) {
|
||||
arr.push(minArr);
|
||||
}
|
||||
minArr.push(c);
|
||||
});
|
||||
|
||||
return arr;
|
||||
},
|
||||
jump(path, query) {
|
||||
this.$yrouter.push({
|
||||
path,
|
||||
query,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-goods {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.swiper-box,
|
||||
.carousel {
|
||||
width: 700rpx;
|
||||
height: 240upx;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.carousel-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 28upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 10upx;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0rpx;
|
||||
z-index: 66;
|
||||
|
||||
.dot {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.dot-active {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #a8700d;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 今日必拼+限时抢购
|
||||
.group-goods {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.title-box {
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-people {
|
||||
.time-box {
|
||||
font-size: 26rpx;
|
||||
color: #edbf62;
|
||||
|
||||
.count-text-box {
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
background: #edbf62;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.head-box {
|
||||
.head-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 28rpx;
|
||||
padding-left: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cuIcon-right {
|
||||
font-size: 30rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods-item {
|
||||
margin-right: 22rpx;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,8 +3,7 @@
|
||||
<!-- 导航栏 -->
|
||||
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
|
||||
<view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">
|
||||
<view class="cu-bar fixed" :style="customStyle"
|
||||
:class="[bgcolor]">
|
||||
<view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">
|
||||
<view class="action">
|
||||
<text class="nav-title shopro-selector-rect">{{ 'yshop商城' }}</text>
|
||||
</view>
|
||||
@ -24,7 +23,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="banner-swiper-box mb10" v-if="banner.length>0">
|
||||
<view class="banner-swiper-box" v-if="banner.length>0">
|
||||
<canvas canvas-id="colorThief" class="hide-canvas"></canvas>
|
||||
<swiper class="banner-carousel shopro-selector-rect" circular @change="swiperChange" :autoplay="true">
|
||||
<swiper-item v-for="(item, index) in banner" :key="index" class="carousel-item "
|
||||
@ -38,10 +37,26 @@
|
||||
v-for="(dot, index) in banner.length" :key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_box">
|
||||
<uni-notice-bar scrollable="true" @click="goRoll(singNew)" single="true" :speed="10" showIcon="true"
|
||||
:text="singNew.info"></uni-notice-bar>
|
||||
<view class="content_box home_content_box">
|
||||
<!-- 菜单 -->
|
||||
<Menu :list="menus"></Menu>
|
||||
<!-- 滚动新闻 -->
|
||||
<!-- 广告 -->
|
||||
<Adv />
|
||||
<!-- 热门榜单 -->
|
||||
<HotCommodity :detail="likeInfo"></HotCommodity>
|
||||
<!-- 超值拼团 -->
|
||||
<Groupon :detail="combinationList" />
|
||||
<!-- 首发新品->秒杀 -->
|
||||
<FirstNewProduct :detail="firstList"></FirstNewProduct>
|
||||
<!-- 精品推荐 -->
|
||||
<ProductsRecommended :detail="bastList"></ProductsRecommended>
|
||||
<!-- 促销单品
|
||||
<PromoteProduct :detail="benefit"></PromoteProduct> -->
|
||||
|
||||
<!-- 为您推荐 -->
|
||||
<PromotionGood :benefit="benefit"></PromotionGood>
|
||||
</view>
|
||||
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose">
|
||||
@ -63,6 +78,11 @@
|
||||
import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
|
||||
import Adv from '@/components/sh-adv'
|
||||
import Groupon from '@/components/sh-groupon.vue'
|
||||
|
||||
import HotCommodity from './components/HotCommodity';
|
||||
import FirstNewProduct from './components/FirstNewProduct';
|
||||
import ProductsRecommended from './components/ProductsRecommended';
|
||||
|
||||
import {
|
||||
getHomeData,
|
||||
getShare
|
||||
@ -86,7 +106,10 @@
|
||||
CouponWindow,
|
||||
Menu,
|
||||
Adv,
|
||||
Groupon
|
||||
Groupon,
|
||||
HotCommodity,
|
||||
FirstNewProduct,
|
||||
ProductsRecommended
|
||||
},
|
||||
props: {},
|
||||
data: function () {
|
||||
@ -96,7 +119,7 @@
|
||||
formatMenus: [],
|
||||
bgcolorAry: [],
|
||||
categoryCurrent: 0,
|
||||
menuNum: 5,
|
||||
menuNum: 4,
|
||||
bgcolor: '',
|
||||
bgColor: '',
|
||||
swiperCurrent: 0, //轮播下标
|
||||
@ -174,7 +197,7 @@
|
||||
observer: true,
|
||||
observeParents: true
|
||||
},
|
||||
bgImage:''
|
||||
bgImage: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -357,7 +380,7 @@
|
||||
},
|
||||
},
|
||||
created: async function () {
|
||||
await this.doColorThief();
|
||||
// await this.doColorThief();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -452,7 +475,7 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 20rpx;
|
||||
z-index: 66;
|
||||
z-index: 5;
|
||||
|
||||
.banner-dot {
|
||||
width: 14rpx;
|
||||
@ -508,4 +531,7 @@
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.home_content_box{
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user