cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

拼团和秒杀商品增加规格选择

Browse Source
This commit is contained in:
Gao xiaosong
2020-09-06 03:21:50 +08:00
parent 3289e30dad
commit c7d20dbf8e
18 changed files with 2605 additions and 1405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/style.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/style.css.map
View File

File diff suppressed because one or more lines are too long

177
assets/css/style.less
View File

@ -1,4 +1,3 @@
view, view,
scroll-view, scroll-view,
swiper, swiper,
@ -8,7 +7,7 @@ textarea,
label, label,
navigator, navigator,
image { image {
box-sizing: border-box; box-sizing: border-box;
} }
page { page {
@ -2738,12 +2737,24 @@ page {
background-image: -moz-linear-gradient(to right, #eb3729 0%, #eb3729 100%); background-image: -moz-linear-gradient(to right, #eb3729 0%, #eb3729 100%);
} }
.product-con .footer .bnt .buy { .product-con .footer .bnt .buy {
border-radius: 0 0.5*100rpx 0.5*100rpx 0; border-radius: 0 0.5*100rpx 0.5*100rpx 0;
background-image: linear-gradient(to right, #eb3729 0%, #eb3729 100%); background-image: linear-gradient(to right, #eb3729 0%, #eb3729 100%);
background-image: -moz-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 { .order-submission .line {
width: 100%; width: 100%;
@ -7021,8 +7032,7 @@ page {
/*抢购详情页*/ /*抢购详情页*/
.product-con .nav { .product-con .nav {
box-sizing: border-box; box-sizing: border-box;
background-image: url('https://h5.yixiang.co/static/images/rushBuy.jpg'); background: url('https://h5.yixiang.co/static/images/rushBuy.jpg') #fc4141 no-repeat;
background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 100%; width: 100%;
height: 1*100rpx; height: 1*100rpx;
@ -8630,19 +8640,20 @@ rich-text {
/*单行文本溢出省略号*/ /*单行文本溢出省略号*/
.one-t { .one-t {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: all linear 0.2s; transition: all linear 0.2s;
} }
/*多行文本溢出省略号*/ /*多行文本溢出省略号*/
.more-t { .more-t {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
transition: all linear 0.2s; transition: all linear 0.2s;
} }
/* ================== /* ==================
@ -8650,67 +8661,77 @@ rich-text {
==================== */ ==================== */
/* x水平排列*/ /* x水平排列*/
.x-f { .x-f {
display: flex; display: flex;
align-items: center; align-items: center;
} }
/*x两端且水平居中*/ /*x两端且水平居中*/
.x-bc { .x-bc {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
/*x平分且水平居中*/ /*x平分且水平居中*/
.x-ac { .x-ac {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
} }
/*x水平靠上对齐*/ /*x水平靠上对齐*/
.x-start { .x-start {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
} }
/*x水平靠下对齐*/ /*x水平靠下对齐*/
.x-end { .x-end {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }
/*上下左右居中*/ /*上下左右居中*/
.x-c { .x-c {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
/*y竖直靠左*/ /*y竖直靠左*/
.y-start { .y-start {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
/*y竖直靠右*/ /*y竖直靠右*/
.y-end { .y-end {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
} }
/*y竖直居中*/ /*y竖直居中*/
.y-f { .y-f {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
// y竖直两端 // y竖直两端
.y-b { .y-b {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
/*y竖直两端居中*/ /*y竖直两端居中*/
.y-bc { .y-bc {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
@ -9197,3 +9218,69 @@ rich-text {
.pa30 { .pa30 {
padding: 30rpx; 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;
}

8
components/Menu.vue
View File

@ -39,7 +39,7 @@ export default {
default: [] default: []
}, },
menu: { menu: {
default: 5 default: 4
}, },
imgW: { imgW: {
type: Number, type: Number,
@ -78,14 +78,14 @@ export default {
}, },
// 路由跳转 // 路由跳转
routerTo(item) { routerTo(item) {
this.$yrouter.push(item.uniapp_url); this.$yrouter.push(item.uniapp_url);
} }
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
// 产品分类 // 产品分类
.y-f { .y-f {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -101,7 +101,7 @@ export default {
.menu-category-box { .menu-category-box {
padding: 30rpx 30rpx 0 30rpx; padding: 30rpx 30rpx 0 30rpx;
background: #fff; background: #fff;
box-sizing: border-box; box-sizing: border-box;
} }
.menu-category-box, .menu-category-box,

100
components/PromotionGood.vue
View File

@ -1,39 +1,39 @@
<template> <template>
<view> <view>
<view class="sh-title-card mb10"> <view class="sh-title-card mb10">
<view class="title-box"> <view class="title-box">
<image class="title-bg" src="@/static/images/title1.png" mode="aspectFill"></image> <image class="title-bg" src="@/static/images/title1.png" mode="aspectFill"></image>
<view class="title-text">为你推荐</view> <view class="title-text">为你推荐</view>
<!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> --> <!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> -->
</view>
</view> </view>
</view> <view class="hot-goods mx20 mb10" v-if="benefit.length">
<view class="hot-goods mx20 mb10" v-if="benefit.length"> <view class="goods-list x-f">
<view class="goods-list x-f"> <view class="goods-item" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex">
<view class="goods-item" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex"> <view class="goods-box" @tap="routerGo(item)">
<view class="goods-box" @tap="routerGo(item)"> <view class="img-box">
<view class="img-box"> <!-- <image class="tag-img" :src="item.image" mode=""></image> -->
<!-- <image class="tag-img" :src="item.image" mode=""></image> --> <image class="img" :src="item.image" lazy-load mode="aspectFill"></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> </view>
<view class="x-f tag-box"> <view class="tip one-t">{{ item.storeName }}</view>
<!-- <view class="discount">新人礼</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 class="discount">满100减60</view> -->
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view>
</template> </template>
<script> <script>
export default { export default {
@ -57,29 +57,31 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.sh-title-card {
.sh-title-card { width: 750rpx;
width: 750rpx;
}
.title-box {
width: 710rpx;
height: 88rpx;
margin: 0 auto;
position: relative;
border-radius: 30rpx;
.title-bg {
width: 100%;
height: 100%;
} }
.title-text {
position: absolute; .title-box {
top: 50%; width: 710rpx;
left: 50%; height: 88rpx;
transform: translate(-50%, -50%); margin: 0 auto;
font-weight: bold; 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 { .goods-box {
width: 345rpx; width: 345rpx;
background: #fff; background: #fff;
@ -132,7 +134,7 @@
.price-box { .price-box {
padding: 10rpx 20rpx 0; padding: 10rpx 20rpx 0;
width: 344rpx; width: 344rpx;
box-sizing: border-box; box-sizing: border-box;
.sales { .sales {
font-size: 20rpx; font-size: 20rpx;
@ -189,8 +191,8 @@ box-sizing: border-box;
// 为你推荐 // 为你推荐
.hot-goods { .hot-goods {
background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6); // background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6);
border-radius: 20rpx; // border-radius: 20rpx;
.goods-list { .goods-list {
flex-wrap: wrap; flex-wrap: wrap;

80
components/UserEvaluation.vue
View File

@ -1,50 +1,52 @@
<template> <template>
<view class="evaluateWtapper"> <view class="evaluateWtapper" v-if="reply&&reply.length>0">
<view <view v-for="(item, evaluateWtapperIndex) in reply" :key="evaluateWtapperIndex">
class="evaluateItem" <view class="evaluateItem" v-if="item">
v-for="(item, evaluateWtapperIndex) in reply" <view class="pic-text acea-row row-middle">
:key="evaluateWtapperIndex" <view class="pictrue">
> <image :src="item.avatar" class="image" />
<view class="pic-text acea-row row-middle"> </view>
<view class="pictrue"> <view class="acea-row row-middle">
<image :src="item.avatar" class="image" /> <view class="name line1">{{ item.nickname }}</view>
<view class="start" :class="'star' + item.star"></view>
</view>
</view> </view>
<view class="acea-row row-middle"> <view class="time">{{ item.createTime }} {{ item.sku||'' }}</view>
<view class="name line1">{{ item.nickname }}</view> <view class="evaluate-infor">{{ item.comment }}</view>
<view class="start" :class="'star' + item.star"></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> <view class="reply" v-if="item.merchantReplyContent">
<view class="time">{{ item.createTime }} {{ item.sku||'' }}</view> <span class="font-color-red">yshop店员</span>
<view class="evaluate-infor">{{ item.comment }}</view> ：{{item.merchantReplyContent}}
<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>
<view class="reply" v-if="item.merchantReplyContent">
<span class="font-color-red">yshop店员</span>
：{{item.merchantReplyContent}}
</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { dataFormat } from "@/utils"; import {
export default {
name: "UserEvaluation",
props: {
reply: {
type: Array,
default: () => []
}
},
data: function() {
return {};
},
mounted: function() {},
methods: {
dataFormat dataFormat
} } from "@/utils";
};
export default {
name: "UserEvaluation",
props: {
reply: {
type: Array,
default: () => []
}
},
data: function () {
return {};
},
mounted: function () {
console.log(this)
},
methods: {
dataFormat
}
};
</script> </script>

49
components/sh-activity-goods.vue
View File

@ -7,7 +7,7 @@
<view class="price-box"> <view class="price-box">
<view class="y-f"> <view class="y-f">
<text class="seckill-current">￥{{ detail.price }}</text> <text class="seckill-current">￥{{ detail.price }}</text>
<text class="original">{{ detail.browse }}人浏览</text> <text class="original">销量{{ detail.sales }}{{detail.unitName}}</text>
</view> </view>
</view> </view>
<view class="title"><slot name="titleText"></slot></view> <view class="title"><slot name="titleText"></slot></view>
@ -37,51 +37,4 @@ export default {
</script> </script>
<style lang="scss"> <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> </style>

18
components/sh-adv.vue
View File

@ -85,20 +85,20 @@
"list": [{ "list": [{
"image": "https:\/\/shopro-1253949872.file.myqcloud.com\/uploads\/20200704\/0669a6adec3f35d45ec66a082e03774f.png", "image": "https:\/\/shopro-1253949872.file.myqcloud.com\/uploads\/20200704\/0669a6adec3f35d45ec66a082e03774f.png",
"name": "", "name": "",
"path": "\/pages\/app\/coupon\/list", "path": "/pages/user/coupon/UserCoupon/index",
"path_name": "优惠券-优惠劵中心", "path_name": "优惠券",
"path_type": 1 "path_type": 1
}, { }, {
"image": "https:\/\/shopro-1253949872.file.myqcloud.com\/uploads\/20200704\/cddb5d90a4241f6235d16368534bc730.png", "image": "https:\/\/shopro-1253949872.file.myqcloud.com\/uploads\/20200704\/cddb5d90a4241f6235d16368534bc730.png",
"name": "", "name": "",
"path": "\/pages\/activity\/groupon\/list", "path": "/pages/shop/GoodsList/index",
"path_name": "活动-今日必拼", "path_name": "商品",
"path_type": 1 "path_type": 1
}, { }, {
"image": "https:\/\/shopro-1253949872.file.myqcloud.com\/uploads\/20200704\/e047d312fb5930de972ae288b9b3bae7.png", "image": "https:\/\/shopro-1253949872.file.myqcloud.com\/uploads\/20200704\/e047d312fb5930de972ae288b9b3bae7.png",
"name": "", "name": "",
"path": "\/pages\/app\/score\/list", "path": "/pages/user/signIn/Integral/index",
"path_name": "应用-积分商城", "path_name": "积分",
"path_type": 1 "path_type": 1
}], }],
"name": "", "name": "",
@ -113,12 +113,8 @@
// 路由跳转 // 路由跳转
jump(path) { jump(path) {
this.$yrouter.push({ this.$yrouter.push({
path: '/pages/shop/GoodsCon/index', path
query: {
id: item.id
}
}); });
this.$tools.routerTo(path);
} }
} }
}; };

6
pages.json
View File

@ -419,9 +419,9 @@
"borderStyle": "black", "borderStyle": "black",
"backgroundColor": "#ffffff", "backgroundColor": "#ffffff",
"height": "50px", "height": "50px",
"fontSize": "10px", "fontSize": "8px",
"iconWidth": "24px", "iconWidth": "16px",
"spacing": "3px", "spacing": "-3px",
"list": [{ "list": [{
"pagePath": "pages/home/index", "pagePath": "pages/home/index",
"iconPath": "static/icon-home.png", "iconPath": "static/icon-home.png",

33
pages/activity/GoodsSeckill/index.vue
View File

@ -38,7 +38,7 @@
<view class="line1" v-text="itemSeckill.title"></view> <view class="line1" v-text="itemSeckill.title"></view>
<view class="money"> <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>
<view class="progress cart-color"> <view class="progress cart-color">
<view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view> <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" <view class="grab bg-color-red" v-if="item.status === 1 && itemSeckill.stock > 0"
@click="goDetail(itemSeckill.id)">马上抢</view> @click="goDetail(itemSeckill.id)">马上抢</view>
<view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</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 class="grab bg-color-red" v-if="item.status === 0">已结束</view>
</view> </view>
</view> </view>
@ -191,7 +191,7 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.flash-sale { .flash-sale {
background: #f5f5f5!important; background: #f5f5f5 !important;
height: 100%; height: 100%;
} }
@ -200,18 +200,21 @@
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
} }
.list{
padding: 0 20rpx; .list {
.item{ padding: 0 20rpx;
padding: .25*100rpx;
border-bottom: 1px solid #f0f0f0; .item {
height: auto; padding: .25*100rpx;
position: relative; border-bottom: 1px solid #f0f0f0;
background: #fff; height: auto;
margin-bottom: .2*100rpx; position: relative;
border-radius: .2*100rpx; background: #fff;
margin-bottom: .2*100rpx;
border-radius: .2*100rpx;
}
} }
}
.logoPic { .logoPic {
width: 75rpx; width: 75rpx;
height: 70rpx; height: 70rpx;
@ -238,7 +241,7 @@
} }
.state { .state {
background: linear-gradient(90deg,#00c17b,#00c17b); background: linear-gradient(90deg, #00c17b, #00c17b);
color: #fff; color: #fff;
opacity: 1; opacity: 1;
border-radius: 30rpx; border-radius: 30rpx;

642
pages/activity/GroupDetails/index.vue
View File

@ -1,12 +1,15 @@
<template> <template>
<view :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" v-show="domStatus"> <view :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" v-show="domStatus">
<!-- 商品轮播 -->
<product-con-swiper :imgUrls="imgUrls"></product-con-swiper> <product-con-swiper :imgUrls="imgUrls"></product-con-swiper>
<!-- 商品信息描述 -->
<view class="wrapper"> <view class="wrapper">
<view class="share acea-row row-between row-bottom"> <view class="share acea-row row-between row-bottom">
<view class="money font-color-red"> <view class="money font-color-red">
￥ ￥
<text class="num" v-text="storeInfo.price"></text> <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> </view>
<view class="introduce" v-text="storeInfo.title"></view> <view class="introduce" v-text="storeInfo.title"></view>
@ -16,11 +19,22 @@
<view v-text="'已拼:' + storeInfo.sales + storeInfo.unitName"></view> <view v-text="'已拼:' + storeInfo.sales + storeInfo.unitName"></view>
</view> </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="notice acea-row row-middle">
<view class="num font-color-red"> <view class="num font-color-red">
<text class="iconfont icon-laba"></text> <text class="iconfont icon-laba"></text>
已拼{{ storeInfo.sales 已拼{{ storeInfo.sales }}{{ storeInfo.unitName }}
}}{{ storeInfo.unitName }}
<text class="line">|</text> <text class="line">|</text>
</view> </view>
<view class="swiper-no-swiping swiper"> <view class="swiper-no-swiping swiper">
@ -33,6 +47,8 @@
</swiper> </swiper>
</view> </view>
</view> </view>
<!-- 拼团人数，头像 -->
<view class="assemble"> <view class="assemble">
<view v-for="(item, groupListindex) in groupList" :key="groupListindex"> <view v-for="(item, groupListindex) in groupList" :key="groupListindex">
<view class="item acea-row row-between-wrapper" v-if="groupListindex < groupListCount"> <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 class="font-color-red" v-text="item.count"></text>
<text>人成团</text> <text>人成团</text>
</view> </view>
<count-down <count-down :isDay="false" :tipText="'剩余 '" :dayText="false" :hourText="':'" :minuteText="':'"
:isDay="false" :secondText="false" :datatime="item.stopTime/1000"></count-down>
:tipText="'剩余 '"
:dayText="false"
:hourText="':'"
:minuteText="':'"
:secondText="false"
:datatime="item.stopTime/1000"
></count-down>
</view> </view>
<view class="spellBnt" @click="groupRule(item.id)"> <view class="spellBnt" @click="groupRule(item.id)">
去拼单 去拼单
@ -71,6 +80,8 @@
<text class="iconfont icon-xiangxia"></text> <text class="iconfont icon-xiangxia"></text>
</view> </view>
</view> </view>
<!-- 拼团规则 -->
<view class="playWay"> <view class="playWay">
<view class="title acea-row row-between-wrapper"> <view class="title acea-row row-between-wrapper">
<view>拼团玩法</view> <view>拼团玩法</view>
@ -91,6 +102,8 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 用户评价 -->
<view class="userEvaluation"> <view class="userEvaluation">
<view class="title acea-row row-between-wrapper"> <view class="title acea-row row-between-wrapper">
<view v-text="'用户评价(' + replyCount + ')'"></view> <view v-text="'用户评价(' + replyCount + ')'"></view>
@ -101,278 +114,387 @@
</view> </view>
<UserEvaluation :reply="reply"></UserEvaluation> <UserEvaluation :reply="reply"></UserEvaluation>
</view> </view>
<!-- 产品介绍 -->
<view class="product-intro"> <view class="product-intro">
<view class="title">产品介绍</view> <view class="title">产品介绍</view>
<view class="conter" v-html="storeInfo.description"></view> <view class="conter" v-html="storeInfo.description"></view>
<!-- <view class="conter" v-html=""></view> --> <!-- <view class="conter" v-html=""></view> -->
</view> </view>
<!-- 操作栏 -->
<view style="height:100rpx;"></view> <view style="height:100rpx;"></view>
<view class="footer-group acea-row row-between-wrapper"> <view class="footer acea-row row-between-wrapper">
<!-- <view class="customerSer acea-row row-center-wrapper row-column"> <view class="item">
<view class="iconfont icon-kefu"></view> <button open-type="contact" class='contacButton'>
<view>客服</view> <view style="padding-bottom: 8rpx;" class="item">
</view>--> <view class="iconfont icon-kefu"></view>
<view class="customerSer acea-row row-center-wrapper row-column" @click="setCollect"> <text>客服</text>
<view class="iconfont" :class="userCollect ? 'icon-shoucang1' : 'icon-shoucang'"></view> </view>
</button>
</view>
<view class="item" @click="setCollect" v-if="userCollect">
<view class="iconfont icon-shoucang1"></view>
<text>收藏</text> <text>收藏</text>
</view> </view>
<view class="bnt bg-color-violet" @click="openAlone">单独购买</view> <view class="item" @click="setCollect" v-if="!userCollect">
<view class="bnt bg-color-red" @click="openTeam">立即开团</view> <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> </view>
<!-- 商品信息弹窗 -->
<ProductWindow v-if="cartNum" v-on:changeFun="changeFun" :attr="attr" :cartNum="cartNum"></ProductWindow> <ProductWindow v-if="cartNum" v-on:changeFun="changeFun" :attr="attr" :cartNum="cartNum"></ProductWindow>
<StorePoster <StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
v-on:setPosterImageStatus="setPosterImageStatus" :posterData="posterData"></StorePoster>
:posterImageStatus="posterImageStatus"
:posterData="posterData"
></StorePoster>
</view> </view>
</template> </template>
<script> <script>
// import { swiper, swiperSlide } from "vue-awesome-swiper"; // import { swiper, swiperSlide } from "vue-awesome-swiper";
import ProductConSwiper from "@/components/ProductConSwiper"; import ProductConSwiper from "@/components/ProductConSwiper";
import CountDown from "@/components/CountDown"; import CountDown from "@/components/CountDown";
import UserEvaluation from "@/components/UserEvaluation"; import UserEvaluation from "@/components/UserEvaluation";
import ProductWindow from "@/components/ProductWindow"; import ProductWindow from "@/components/ProductWindow";
import StorePoster from "@/components/StorePoster"; import StorePoster from "@/components/StorePoster";
import { getCombinationDetail } from "@/api/activity"; import {
import { postCartAdd } from "@/api/store"; getCombinationDetail
import { imageBase64 } from "@/api/public"; } from "@/api/activity";
import { import {
getCoupon, postCartAdd
getCollectAdd, } from "@/api/store";
getCollectDel, import {
getUserInfo imageBase64
} from "@/api/user"; } from "@/api/public";
const NAME = "GroupDetails"; import {
getCoupon,
getCollectAdd,
getCollectDel,
getUserInfo
} from "@/api/user";
const NAME = "GroupDetails";
export default { export default {
name: "GroupDetails", name: "GroupDetails",
components: { components: {
ProductConSwiper, ProductConSwiper,
CountDown, CountDown,
UserEvaluation, UserEvaluation,
// swiper, // swiper,
// swiperSlide, // swiperSlide,
ProductWindow, ProductWindow,
StorePoster StorePoster
}, },
props: {}, props: {},
data: function() { data: function () {
return { return {
domStatus: false, domStatus: false,
posterData: { 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: {
image: "", image: "",
store_name: "", title: "",
price: "", price: "",
stock: "", code: ""
unique: "", },
cart_num: 1 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, mountedStart: function () {
userCollect: false var that = this;
}; let id = that.$yroute.query.id;
}, getCombinationDetail(id).then(res => {
watch: { that.userCollect = res.data.userCollect;
$yroute: function(n) { res.data.storeInfo.description = res.data.storeInfo.description.replace(
var that = this; /\<img/gi,
if (n.name === NAME) { '<img style="max-width:100%;height:auto;"'
that.mountedStart(); );
} that.$set(that.attr, "productAttr", res.data.productAttr);
} that.$set(that, "productValue", res.data.productValue);
}, that.$set(that, "storeInfo", res.data.storeInfo);
onShow: function() { that.$set(that, "imgUrls", res.data.storeInfo.sliderImageArr);
this.mountedStart(); that.$set(that, "itemNew", res.data.pinkOkList);
}, that.$set(that, "groupList", res.data.pink);
methods: { that.$set(that, "reply", [res.data.reply]);
openAlone: function() { that.$set(that, "replyCount", res.data.replyCount);
this.$yrouter.push({ that.$set(that, "replyChance", res.data.replyChance);
path: "/pages/shop/GoodsCon/index", that.posterData.image = that.storeInfo.image;
query: { id: this.storeInfo.productId } if (that.storeInfo.title.length > 30) {
}); that.posterData.title = that.storeInfo.title.substring(0, 30) + "...";
// this.$yrouter.replace({ path: "/detail/" + this.storeInfo.productId }); } else {
}, that.posterData.title = that.storeInfo.title;
//收藏商品 }
setCollect: function() { that.posterData.price = that.storeInfo.price;
let that = this, that.posterData.code = that.storeInfo.code_base;
id = that.storeInfo.id, that.domStatus = true;
category = "product"; console.log(this.storeInfo)
if (that.userCollect) { that.DefaultSelect();
getCollectDel(id, category).then(function() {
that.userCollect = !that.userCollect;
}); });
} else { },
getCollectAdd(id, category).then(function() { DefaultSelect: function () {
that.userCollect = !that.userCollect; let productAttr = this.attr.productAttr;
}); let value = [];
} for (let i = 0; i < productAttr.length; i++) {
}, this.$set(productAttr[i], "index", 0);
mountedStart: function() { value.push(productAttr[i].attrValueArr[0]);
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;
} }
that.posterData.price = that.storeInfo.price; //sort();排序函数:数字-英文-汉字；
that.posterData.code = that.storeInfo.code_base; let productSelect = this.productValue[value.sort().join(",")];
that.domStatus = true; console.log(productSelect)
console.log(this.storeInfo) if (productSelect && productAttr.length) {
//that.getImageBase64(); this.$set(
}); this.attr.productSelect,
}, "store_name",
getImageBase64: function() { this.storeInfo.storeName
let that = this; );
imageBase64(this.posterData.image, that.posterData.code).then(res => { this.$set(this.attr.productSelect, "image", productSelect.image);
that.posterData.image = res.data.image; this.$set(this.attr.productSelect, "price", productSelect.price);
that.posterData.code = res.data.code; this.$set(this.attr.productSelect, "stock", productSelect.stock);
}); this.$set(this.attr.productSelect, "unique", productSelect.unique);
}, this.$set(this.attr.productSelect, "cart_num", 1);
setPosterImageStatus: function() { this.$set(this, "attrValue", value.sort().join(","));
// var sTop = document.body || document.documentElement; this.$set(this, "attrTxt", "已选择");
// sTop.scrollTop = 0; } else if (!productSelect && productAttr.length) {
this.posterImageStatus = !this.posterImageStatus; this.$set(
}, this.attr.productSelect,
groupRule: function(id) { "store_name",
var that = this; this.storeInfo.storeName
that.$yrouter.push({ );
path: "/pages/activity/GroupRule/index", this.$set(this.attr.productSelect, "image", this.storeInfo.image);
query: { id } this.$set(this.attr.productSelect, "price", this.storeInfo.price);
}); this.$set(this.attr.productSelect, "stock", 0);
}, this.$set(this.attr.productSelect, "unique", "");
goReply: function() { this.$set(this.attr.productSelect, "cart_num", 0);
var that = this; this.$set(this, "attrValue", "");
that.$yrouter.push({ this.$set(this, "attrTxt", "请选择");
path: "/pages/shop/EvaluateList/index", } else if (!productSelect && !productAttr.length) {
query: { id: that.storeInfo.product_id } this.$set(
}); this.attr.productSelect,
}, "store_name",
setGroupListCount: function() { this.storeInfo.storeName
this.groupListCount = this.groupListCount + 2; );
}, this.$set(this.attr.productSelect, "image", this.storeInfo.image);
//将父级向子集多次传送的函数合二为一； this.$set(this.attr.productSelect, "price", this.storeInfo.price);
changeFun: function(opt) { this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
if (typeof opt !== "object") opt = {}; this.$set(
let action = opt.action || ""; this.attr.productSelect,
let value = opt.value === undefined ? "" : opt.value; "unique",
this[action] && this[action](value); this.storeInfo.unique || ""
}, );
changeattr: function(res) { this.$set(this.attr.productSelect, "cart_num", 1);
var that = this; this.$set(this, "attrValue", "");
that.attr.cartAttr = res; this.$set(this, "attrTxt", "请选择");
}, }
ChangeCartNum: function(res) { },
var that = this; getImageBase64: function () {
that.attr.productSelect.cart_num = 1; let that = this;
that.cartNum = 1; imageBase64(this.posterData.image, that.posterData.code).then(res => {
uni.showToast({ that.posterData.image = res.data.image;
title: "每人每次限购1" + that.storeInfo.unitName, that.posterData.code = res.data.code;
icon: "none", });
duration: 2000 },
}); setPosterImageStatus: function () {
}, // var sTop = document.body || document.documentElement;
setProductSelect: function() { // sTop.scrollTop = 0;
var that = this; this.posterImageStatus = !this.posterImageStatus;
var attr = that.attr; },
attr.productSelect.image = that.storeInfo.image; groupRule: function (id) {
attr.productSelect.store_name = that.storeInfo.title; var that = this;
attr.productSelect.price = that.storeInfo.price+''; that.$yrouter.push({
attr.productSelect.stock = that.storeInfo.stock; path: "/pages/activity/GroupRule/index",
attr.cartAttr = false; query: {
console.log(that.storeInfo) id
that.$set(that, "attr", attr); }
console.log(this) });
}, },
openTeam: function() { goReply: function () {
var that = this; var that = this;
if (that.attr.cartAttr == false) { that.$yrouter.push({
that.attr.cartAttr = !this.attr.cartAttr; path: "/pages/shop/EvaluateList/index",
} else { query: {
var data = {}; id: that.storeInfo.product_id
data.productId = that.storeInfo.productId; }
data.cartNum = that.attr.productSelect.cart_num; });
data.uniqueId = that.attr.productSelect.unique; },
data.combinationId = that.storeInfo.id; setGroupListCount: function () {
data.new = 1; this.groupListCount = this.groupListCount + 2;
postCartAdd(data) },
.then(res => { //将父级向子集多次传送的函数合二为一；
that.$yrouter.push({ changeFun: function (opt) {
path: "/pages/order/OrderSubmission/index", if (typeof opt !== "object") opt = {};
query: { id: res.data.cartId } 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: selecAttrTap: function () {
err.msg || err.response.data.msg || err.response.data.message, this.attr.cartAttr = true;
icon: "none", this.isOpen = true;
duration: 2000 },
});
});
}
} }
} };
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.product-con .wrapper { .product-con .wrapper {
padding-bottom: 0.26 * 100rpx; padding-bottom: 0.26 * 100rpx;
} }
.noscroll {
height: 100%; .noscroll {
overflow: hidden; height: 100%;
} overflow: hidden;
.product-con .footer-group .bnt { }
// flex:1;
width: 43%; .product-con .footer-group .bnt {
} // flex:1;
.product-con .footer-group .bnt.bg-color-violet { width: 43%;
background-color: #fa8013; }
}
.footer-group {
button {
border: 0;
background: none;
}
}
.product-con .footer-group .bnt.bg-color-violet {
background-color: #fa8013;
}
</style> </style>

485
pages/activity/SeckillDetails/index.vue
View File

@ -10,19 +10,22 @@
<view class="acea-row row-middle"> <view class="acea-row row-middle">
<view class="times"> <view class="times">
<view>距秒杀结束仅剩</view> <view>距秒杀结束仅剩</view>
<count-down <count-down :isDay="false" :tipText="false" :dayText="false" :hourText="' : '" :minuteText="' : '"
:isDay="false" :secondText="false" :datatime="datatime"></count-down>
:tipText="false"
:dayText="false"
:hourText="' : '"
:minuteText="' : '"
:secondText="false"
:datatime="datatime"
></count-down>
</view> </view>
<view class="iconfont icon-jiantou"></view> <view class="iconfont icon-jiantou"></view>
</view> </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="wrapperRush">
<view class="introduce acea-row row-between"> <view class="introduce acea-row row-between">
<view class="infor" v-text="storeInfo.title"></view> <view class="infor" v-text="storeInfo.title"></view>
@ -39,197 +42,315 @@
</view> </view>
<view style="height:100rpx;"></view> <view style="height:100rpx;"></view>
<view class="footerRush acea-row row-between-wrapper"> <view class="footerRush acea-row row-between-wrapper">
<!-- <view <view class="item">
class="customerSer acea-row row-center-wrapper row-column" <button open-type="contact" class='contacButton'>
@click="routerGo()" <view style="padding-bottom: 8rpx;" class="item">
> <view class="iconfont icon-kefu"></view>
<view class="iconfont icon-kefu"></view> <text>客服</text>
<view>客服</view> </view>
</view> --> </button>
<view class="bnt bg-color-red" @click="tapBuy">立即购买</view> </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 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> <ProductWindow v-on:changeFun="changeFun" :attr="attr" :cartNum="cartNum"></ProductWindow>
<StorePoster <StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
v-on:setPosterImageStatus="setPosterImageStatus" :posterData="posterData"></StorePoster>
:posterImageStatus="posterImageStatus"
:posterData="posterData"
></StorePoster>
</view> </view>
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.noscroll { .noscroll {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script> <script>
import ProductConSwiper from "@/components/ProductConSwiper"; import ProductConSwiper from "@/components/ProductConSwiper";
import CountDown from "@/components/CountDown"; import CountDown from "@/components/CountDown";
import ProductWindow from "@/components/ProductWindow"; import ProductWindow from "@/components/ProductWindow";
import StorePoster from "@/components/StorePoster"; import StorePoster from "@/components/StorePoster";
import { getSeckillDetail } from "@/api/activity"; import {
import { postCartAdd } from "@/api/store"; getSeckillDetail
import { imageBase64 } from "@/api/public"; } from "@/api/activity";
const NAME = "SeckillDetails"; import {
postCartAdd
} from "@/api/store";
import {
imageBase64
} from "@/api/public";
const NAME = "SeckillDetails";
export default { export default {
name: "SeckillDetails", name: "SeckillDetails",
components: { components: {
ProductConSwiper, ProductConSwiper,
CountDown, CountDown,
ProductWindow, ProductWindow,
StorePoster StorePoster
}, },
props: {}, props: {},
data: function() { data: function () {
return { return {
domStatus: false, domStatus: false,
posterData: { posterData: {
image: "",
title: "",
price: "",
code: ""
},
posterImageStatus: false,
action: "",
imgUrls: [],
storeInfo: [],
replyCount: 0,
reply: [],
cartNum: 1,
attr: {
cartAttr: false,
productSelect: {
image: "", image: "",
store_name: "", title: "",
price: "", price: "",
stock: "", code: ""
unique: "", },
cart_num: 1 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 //将父级向子集多次传送的函数合二为一；
}; changeFun: function (opt) {
}, if (typeof opt !== "object") opt = {};
watch: { let action = opt.action || "";
$yroute: function(n) { let value = opt.value === undefined ? "" : opt.value;
var that = this; this[action] && this[action](value);
if (n.name === NAME) { },
that.mountedStart(); changeattr: function (res) {
} var that = this;
} that.attr.cartAttr = res;
}, },
mounted: function() { ChangeCartNum: function (res) {
this.mountedStart(); var that = this;
}, if (res) {
methods: { if (that.attr.productSelect.cart_num < that.storeInfo.stock) {
routerGo(item) { that.attr.productSelect.cart_num++;
this.$yrouter.push({ path: '/pages/user/CustomerList/index' }) this.cartNum++;
}, }
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) + "...";
} else { } 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(); ChangeAttr: function (res) {
that.domStatus = true; // 修改了规格
}); let productSelect = this.productValue[res.value];
}, if (productSelect) {
updateTitle() { this.attr.productAttr[res.indexw].index = res.indexn;
// document.title = this.storeInfo.title || this.$yroute.meta.title; this.$set(this.attr.productSelect, "image", productSelect.image);
}, this.$set(this.attr.productSelect, "price", productSelect.price);
setPosterImageStatus: function() { this.$set(this.attr.productSelect, "stock", productSelect.stock);
// var sTop = document.body || document.documentElement; this.$set(this.attr.productSelect, "unique", productSelect.unique);
// sTop.scrollTop = 0; this.$set(this.attr.productSelect, "cart_num", 1);
this.posterImageStatus = !this.posterImageStatus; this.$set(this, "attrValue", res.value);
}, this.$set(this, "attrTxt", "已选择");
//将父级向子集多次传送的函数合二为一； } else {
changeFun: function(opt) { this.$set(this.attr.productSelect, "image", this.storeInfo.image);
if (typeof opt !== "object") opt = {}; this.$set(this.attr.productSelect, "price", this.storeInfo.price);
let action = opt.action || ""; this.$set(this.attr.productSelect, "stock", 0);
let value = opt.value === undefined ? "" : opt.value; this.$set(this.attr.productSelect, "unique", "");
this[action] && this[action](value); this.$set(this.attr.productSelect, "cart_num", 0);
}, this.$set(this, "attrValue", "");
changeattr: function(res) { this.$set(this, "attrTxt", "请选择");
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 { },
if (that.attr.productSelect.cart_num > 1) { selecAttrTap: function () {
that.attr.productSelect.cart_num--; this.attr.cartAttr = true;
this.cartNum--; this.isOpen = true;
} },
} tapBuy: function () {
}, var that = this;
setProductSelect: function() { if (that.attr.cartAttr == false) {
var that = this; that.attr.cartAttr = !this.attr.attrcartAttr;
var attr = that.attr; } else {
attr.productSelect.image = that.storeInfo.image; var data = {};
attr.productSelect.store_name = that.storeInfo.title; data.productId = that.storeInfo.productId;
attr.productSelect.price = that.storeInfo.price; data.cartNum = that.attr.productSelect.cart_num;
attr.productSelect.stock = that.storeInfo.stock; data.uniqueId = that.attr.productSelect.unique;
attr.cartAttr = false; data.secKillId = that.storeInfo.id;
that.$set(that, "attr", attr); data.new = 1;
}, postCartAdd(data)
selecAttrTap: function() { .then(res => {
this.cartAttr = true; that.$yrouter.push({
}, path: "/pages/order/OrderSubmission/index",
tapBuy: function() { query: {
var that = this; id: res.data.cartId
if (that.attr.cartAttr == false) { }
that.attr.cartAttr = !this.attr.attrcartAttr; });
} else { })
var data = {}; .catch(err => {
data.productId = that.storeInfo.productId; uni.showToast({
data.cartNum = that.attr.productSelect.cart_num; title: err.msg || err.response.data.msg || err.response.data.message,
data.uniqueId = that.attr.productSelect.unique; icon: 'none',
data.secKillId = that.storeInfo.id; duration: 2000
data.new = 1; });
postCartAdd(data)
.then(res => {
that.$yrouter.push({
path: "/pages/order/OrderSubmission/index",
query: { id: res.data.cartId }
}); });
}) }
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg|| err.response.data.message,
icon: 'none',
duration: 2000
});
});
} }
} }
} };
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.product-con .nav { .product-con .nav {
padding: 0 0.2*100rpx; padding: 0 0.2*100rpx;
} }
</style> </style>

217
pages/home/components/FirstNewProduct.vue Normal file
View 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
View 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
View 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
View 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>

44
pages/home/index.vue
View File

@ -3,8 +3,7 @@
<!-- 导航栏 --> <!-- 导航栏 -->
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }"> <view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
<view class="cu-custom" :style="[{height:CustomBar+ 'px',}]"> <view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">
<view class="cu-bar fixed" :style="customStyle" <view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">
:class="[bgcolor]">
<view class="action"> <view class="action">
<text class="nav-title shopro-selector-rect">{{ 'yshop商城' }}</text> <text class="nav-title shopro-selector-rect">{{ 'yshop商城' }}</text>
</view> </view>
@ -24,7 +23,7 @@
</view> </view>
</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> <canvas canvas-id="colorThief" class="hide-canvas"></canvas>
<swiper class="banner-carousel shopro-selector-rect" circular @change="swiperChange" :autoplay="true"> <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 " <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> v-for="(dot, index) in banner.length" :key="index"></text>
</view> </view>
</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> <Menu :list="menus"></Menu>
<!-- 滚动新闻 -->
<!-- 广告 -->
<Adv /> <Adv />
<!-- 热门榜单 -->
<HotCommodity :detail="likeInfo"></HotCommodity>
<!-- 超值拼团 -->
<Groupon :detail="combinationList" /> <Groupon :detail="combinationList" />
<!-- 首发新品->秒杀 -->
<FirstNewProduct :detail="firstList"></FirstNewProduct>
<!-- 精品推荐 -->
<ProductsRecommended :detail="bastList"></ProductsRecommended>
<!-- 促销单品
<PromoteProduct :detail="benefit"></PromoteProduct> -->
<!-- 为您推荐 -->
<PromotionGood :benefit="benefit"></PromotionGood> <PromotionGood :benefit="benefit"></PromotionGood>
</view> </view>
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"> <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 UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
import Adv from '@/components/sh-adv' import Adv from '@/components/sh-adv'
import Groupon from '@/components/sh-groupon.vue' import Groupon from '@/components/sh-groupon.vue'
import HotCommodity from './components/HotCommodity';
import FirstNewProduct from './components/FirstNewProduct';
import ProductsRecommended from './components/ProductsRecommended';
import { import {
getHomeData, getHomeData,
getShare getShare
@ -86,7 +106,10 @@
CouponWindow, CouponWindow,
Menu, Menu,
Adv, Adv,
Groupon Groupon,
HotCommodity,
FirstNewProduct,
ProductsRecommended
}, },
props: {}, props: {},
data: function () { data: function () {
@ -96,7 +119,7 @@
formatMenus: [], formatMenus: [],
bgcolorAry: [], bgcolorAry: [],
categoryCurrent: 0, categoryCurrent: 0,
menuNum: 5, menuNum: 4,
bgcolor: '', bgcolor: '',
bgColor: '', bgColor: '',
swiperCurrent: 0, //轮播下标 swiperCurrent: 0, //轮播下标
@ -174,7 +197,7 @@
observer: true, observer: true,
observeParents: true observeParents: true
}, },
bgImage:'' bgImage: ''
}; };
}, },
computed: { computed: {
@ -357,7 +380,7 @@
}, },
}, },
created: async function () { created: async function () {
await this.doColorThief(); // await this.doColorThief();
}, },
}; };
</script> </script>
@ -452,7 +475,7 @@
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
bottom: 20rpx; bottom: 20rpx;
z-index: 66; z-index: 5;
.banner-dot { .banner-dot {
width: 14rpx; width: 14rpx;
@ -508,4 +531,7 @@
font-size: 15px; font-size: 15px;
} }
} }
.home_content_box{
margin-top: -10rpx;
}
</style> </style>

1498
pages/shop/GoodsCon/index.vue
View File

File diff suppressed because it is too large Load Diff