Browse Source

完成3.1样式修改

master
Gao xiaosong 5 years ago
parent
commit
655c426c40
  1. 2
      assets/css/style.css
  2. 2
      assets/css/style.css.map
  3. 587
      assets/css/style.less
  4. 291
      components/PromotionGood.vue
  5. 84
      components/sh-activity-goods.vue
  6. 260
      components/sh-adv.vue
  7. 197
      components/sh-groupon.vue
  8. 4
      config/index.js
  9. 8
      pages/Loading/index.vue
  10. 904
      pages/activity/DargainDetails/index.vue
  11. 375
      pages/activity/GoodsSeckill/index.vue
  12. 341
      pages/authorization/index.vue
  13. 72
      pages/home/index.vue
  14. BIN
      static/images/logo_bg.png
  15. BIN
      static/images/title1.png
  16. 510
      uni.css
  17. 9
      uni.css.map
  18. 1
      uni.min.css
  19. 56
      uni.scss
  20. 5
      utils/index.js

2
assets/css/style.css

File diff suppressed because one or more lines are too long

2
assets/css/style.css.map

File diff suppressed because one or more lines are too long

587
assets/css/style.less

@ -1,5 +1,19 @@
view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
box-sizing: border-box;
}
page { page {
background: #f5f5f5; background: #f5f5f5;
height: 100%;
} }
.newsList .newsSwitch .van-hairline--top-bottom::after { .newsList .newsSwitch .van-hairline--top-bottom::after {
@ -6947,7 +6961,7 @@ page {
} }
.flash-sale .list .item .text { .flash-sale .list .item .text {
width: 5*100rpx; width: 4.7*100rpx;
font-size: 0.3*100rpx; font-size: 0.3*100rpx;
color: #333; color: #333;
height: 1.66*100rpx; height: 1.66*100rpx;
@ -8612,3 +8626,574 @@ rich-text {
} }
/*单行文本溢出省略号*/
.one-t {
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;
}
/* ==================
flex布局(colorui里面也有相关基础样式)
==================== */
/* x水平排列*/
.x-f {
display: flex;
align-items: center;
}
/*x两端且水平居中*/
.x-bc {
display: flex;
justify-content: space-between;
align-items: center;
}
/*x平分且水平居中*/
.x-ac {
display: flex;
justify-content: space-around;
align-items: center;
}
/*x水平靠上对齐*/
.x-start {
display: flex;
align-items: flex-start;
}
/*x水平靠下对齐*/
.x-end {
display: flex;
align-items: flex-end;
}
/*上下左右居中*/
.x-c {
display: flex;
justify-content: center;
align-items: center;
}
/*y竖直靠左*/
.y-start {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/*y竖直靠右*/
.y-end {
display: flex;
flex-direction: column;
align-items: flex-end;
}
/*y竖直居中*/
.y-f {
display: flex;
flex-direction: column;
align-items: center;
}
// y竖直两端
.y-b {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/*y竖直两端居中*/
.y-bc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
/* ==================
自定义变量
==================== */
/*盒子模型*/
.mt2 {
margin-top: 2rpx;
}
.mr2 {
margin-right: 2rpx;
}
.mb2 {
margin-bottom: 2rpx;
}
.ml2 {
margin-left: 2rpx;
}
.mx2 {
margin-left: 2rpx;
margin-right: 2rpx;
}
.my2 {
margin-top: 2rpx;
margin-bottom: 2rpx;
}
.ma2 {
margin: 2rpx;
}
.mt4 {
margin-top: 4rpx;
}
.mr4 {
margin-right: 4rpx;
}
.mb4 {
margin-bottom: 4rpx;
}
.ml4 {
margin-left: 4rpx;
}
.mx4 {
margin-left: 4rpx;
margin-right: 4rpx;
}
.my4 {
margin-top: 4rpx;
margin-bottom: 4rpx;
}
.ma4 {
margin: 4rpx;
}
.mt8 {
margin-top: 8rpx;
}
.mr8 {
margin-right: 8rpx;
}
.mb8 {
margin-bottom: 8rpx;
}
.ml8 {
margin-left: 8rpx;
}
.mx8 {
margin-left: 8rpx;
margin-right: 8rpx;
}
.my8 {
margin-top: 8rpx;
margin-bottom: 8rpx;
}
.ma8 {
margin: 8rpx;
}
.mt10 {
margin-top: 10rpx;
}
.mr10 {
margin-right: 10rpx;
}
.mb10 {
margin-bottom: 10rpx;
}
.ml10 {
margin-left: 10rpx;
}
.mx10 {
margin-left: 10rpx;
margin-right: 10rpx;
}
.my10 {
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.ma10 {
margin: 10rpx;
}
.mt15 {
margin-top: 15rpx;
}
.mr15 {
margin-right: 15rpx;
}
.mb15 {
margin-bottom: 15rpx;
}
.ml15 {
margin-left: 15rpx;
}
.mx15 {
margin-left: 15rpx;
margin-right: 15rpx;
}
.my15 {
margin-top: 15rpx;
margin-bottom: 15rpx;
}
.ma15 {
margin: 15rpx;
}
.mt20 {
margin-top: 20rpx;
}
.mr20 {
margin-right: 20rpx;
}
.mb20 {
margin-bottom: 20rpx;
}
.ml20 {
margin-left: 20rpx;
}
.mx20 {
margin-left: 20rpx;
margin-right: 20rpx;
}
.my20 {
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.ma20 {
margin: 20rpx;
}
.mt24 {
margin-top: 24rpx;
}
.mr24 {
margin-right: 24rpx;
}
.mb24 {
margin-bottom: 24rpx;
}
.ml24 {
margin-left: 24rpx;
}
.mx24 {
margin-left: 24rpx;
margin-right: 24rpx;
}
.my24 {
margin-top: 24rpx;
margin-bottom: 24rpx;
}
.ma24 {
margin: 24rpx;
}
.mt30 {
margin-top: 30rpx;
}
.mr30 {
margin-right: 30rpx;
}
.mb30 {
margin-bottom: 30rpx;
}
.ml30 {
margin-left: 30rpx;
}
.mx30 {
margin-left: 30rpx;
margin-right: 30rpx;
}
.my30 {
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.ma30 {
margin: 30rpx;
}
.pt2 {
padding-top: 2rpx;
}
.pr2 {
padding-right: 2rpx;
}
.pb2 {
padding-bottom: 2rpx;
}
.pl2 {
padding-left: 2rpx;
}
.px2 {
padding-left: 2rpx;
padding-right: 2rpx;
}
.py2 {
padding-top: 2rpx;
padding-bottom: 2rpx;
}
.pa2 {
padding: 2rpx;
}
.pt4 {
padding-top: 4rpx;
}
.pr4 {
padding-right: 4rpx;
}
.pb4 {
padding-bottom: 4rpx;
}
.pl4 {
padding-left: 4rpx;
}
.px4 {
padding-left: 4rpx;
padding-right: 4rpx;
}
.py4 {
padding-top: 4rpx;
padding-bottom: 4rpx;
}
.pa4 {
padding: 4rpx;
}
.pt8 {
padding-top: 8rpx;
}
.pr8 {
padding-right: 8rpx;
}
.pb8 {
padding-bottom: 8rpx;
}
.pl8 {
padding-left: 8rpx;
}
.px8 {
padding-left: 8rpx;
padding-right: 8rpx;
}
.py8 {
padding-top: 8rpx;
padding-bottom: 8rpx;
}
.pa8 {
padding: 8rpx;
}
.pt10 {
padding-top: 10rpx;
}
.pr10 {
padding-right: 10rpx;
}
.pb10 {
padding-bottom: 10rpx;
}
.pl10 {
padding-left: 10rpx;
}
.px10 {
padding-left: 10rpx;
padding-right: 10rpx;
}
.py10 {
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.pa10 {
padding: 10rpx;
}
.pt15 {
padding-top: 15rpx;
}
.pr15 {
padding-right: 15rpx;
}
.pb15 {
padding-bottom: 15rpx;
}
.pl15 {
padding-left: 15rpx;
}
.px15 {
padding-left: 15rpx;
padding-right: 15rpx;
}
.py15 {
padding-top: 15rpx;
padding-bottom: 15rpx;
}
.pa15 {
padding: 15rpx;
}
.pt20 {
padding-top: 20rpx;
}
.pr20 {
padding-right: 20rpx;
}
.pb20 {
padding-bottom: 20rpx;
}
.pl20 {
padding-left: 20rpx;
}
.px20 {
padding-left: 20rpx;
padding-right: 20rpx;
}
.py20 {
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.pa20 {
padding: 20rpx;
}
.pt24 {
padding-top: 24rpx;
}
.pr24 {
padding-right: 24rpx;
}
.pb24 {
padding-bottom: 24rpx;
}
.pl24 {
padding-left: 24rpx;
}
.px24 {
padding-left: 24rpx;
padding-right: 24rpx;
}
.py24 {
padding-top: 24rpx;
padding-bottom: 24rpx;
}
.pa24 {
padding: 24rpx;
}
.pt30 {
padding-top: 30rpx;
}
.pr30 {
padding-right: 30rpx;
}
.pb30 {
padding-bottom: 30rpx;
}
.pl30 {
padding-left: 30rpx;
}
.px30 {
padding-left: 30rpx;
padding-right: 30rpx;
}
.py30 {
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.pa30 {
padding: 30rpx;
}

291
components/PromotionGood.vue

@ -1,142 +1,211 @@
<template> <template>
<view class="promotionGood" v-if="benefit.length > 0"> <view>
<view class="goods-box" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex" @tap="routerGo(item)"> <view class="sh-title-card mb10">
<view class="img-box"> <view class="title-box">
<!-- <image class="tag-img" :src="item.image" mode=""></image> --> <image class="title-bg" src="@/static/images/title1.png" mode="aspectFill"></image>
<image class="img" :src="item.image" lazy-load mode="aspectFill"></image> <view class="title-text" :style="{ color: detail.color }">为你推荐</view>
</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 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>
<view class="x-f tag-box">
<!-- <view class="discount">新人礼</view>
<view class="discount">满100减60</view> -->
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template> </template>
<script> <script>
export default { export default {
name: 'PromotionGood', name: 'PromotionGood',
props: ['benefit'], props: ['benefit'],
data: function() { data: function () {
return {}; return {};
}, },
methods: { methods: {
routerGo(item) { routerGo(item) {
this.$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } }); this.$yrouter.push({
} path: '/pages/shop/GoodsCon/index',
}, query: {
mounted() { id: item.id
} }
}; });
}
},
mounted() {}
};
</script> </script>
<style lang="scss"> <style lang="scss">
.goods-box {
width: 345rpx; .sh-title-card {
background: #fff; width: 750rpx;
padding-bottom: 20rpx; }
border-radius: 20rpx; .title-box {
overflow: hidden; width: 710rpx;
height: 88rpx;
.img-box { 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; width: 345rpx;
height: 345rpx; background: #fff;
padding-bottom: 20rpx;
border-radius: 20rpx;
overflow: hidden; overflow: hidden;
position: relative;
.tag-img {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 80rpx;
height: 40rpx;
}
.img { .img-box {
width: 345rpx; width: 345rpx;
height: 345rpx; height: 345rpx;
background-color: #ccc; overflow: hidden;
} position: relative;
}
.tip { .tag-img {
width: 346rpx; position: absolute;
line-height: 56rpx; left: 0;
background: rgba(246, 242, 234, 1); top: 0;
font-size: 22rpx; z-index: 2;
font-family: PingFang SC; width: 80rpx;
font-weight: 400; height: 40rpx;
color: rgba(168, 112, 13, 1); }
padding: 0 20rpx;
}
.title { .img {
font-size: 24rpx; width: 345rpx;
font-family: PingFang SC; height: 345rpx;
font-weight: 500; background-color: #ccc;
line-height: 36rpx; }
height: 72rpx; }
margin: 20rpx 20rpx 10rpx;
}
.price-box { .tip {
padding: 10rpx 20rpx 0; width: 346rpx;
width: 344rpx; line-height: 56rpx;
.sales { background: rgba(246, 242, 234, 1);
font-size: 20rpx; font-size: 22rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: rgba(153, 153, 153, 1); color: rgba(168, 112, 13, 1);
line-height: 20rpx; padding: 0 20rpx;
margin-bottom: 20rpx;
} }
.current {
font-size: 30rpx; .title {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: rgba(225, 33, 43, 1); line-height: 36rpx;
line-height: 30rpx; height: 72rpx;
margin-bottom: 20rpx; margin: 20rpx 20rpx 10rpx;
&:before {
content: '¥';
font-size: 26rpx;
}
} }
.original { .price-box {
font-size: 22rpx; padding: 10rpx 20rpx 0;
font-weight: 400; width: 344rpx;
text-decoration: line-through; box-sizing: border-box;
color: rgba(153, 153, 153, 1);
margin-left: 14rpx; .sales {
line-height: 22rpx;
margin-bottom: 10rpx;
&:before {
content: '¥';
font-size: 20rpx; font-size: 20rpx;
font-family: PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
line-height: 20rpx;
margin-bottom: 20rpx;
} }
}
.tag-box { .current {
.discount { font-size: 30rpx;
line-height: 28rpx;
border: 1rpx solid rgba(225, 33, 43, 1);
border-radius: 8rpx;
font-size: 18rpx;
font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: rgba(225, 33, 43, 1); color: rgba(225, 33, 43, 1);
padding: 0 8rpx; line-height: 30rpx;
margin-right: 10rpx; margin-bottom: 20rpx;
&:before {
content: '¥';
font-size: 26rpx;
}
}
.original {
font-size: 22rpx;
font-weight: 400;
text-decoration: line-through;
color: rgba(153, 153, 153, 1);
margin-left: 14rpx;
line-height: 22rpx;
margin-bottom: 10rpx;
&:before {
content: '¥';
font-size: 20rpx;
}
}
.tag-box {
.discount {
line-height: 28rpx;
border: 1rpx solid rgba(225, 33, 43, 1);
border-radius: 8rpx;
font-size: 18rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(225, 33, 43, 1);
padding: 0 8rpx;
margin-right: 10rpx;
}
}
}
}
//
.hot-goods {
background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6);
border-radius: 20rpx;
.goods-list {
flex-wrap: wrap;
width: 710rpx;
.goods-item {
margin-right: 20rpx;
margin-bottom: 20rpx;
width: 345rpx;
box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
border-radius: 20rpx;
&:nth-child(2n) {
margin-right: 0;
}
} }
} }
} }
}
</style> </style>

84
components/sh-activity-goods.vue

@ -0,0 +1,84 @@
<template>
<view class="min-goods" @tap="jump('/pages/goods/detail/index', { id: detail.id })">
<view class="img-box">
<view class="tag" >{{ detail.people}}人团</view>
<image class="img" :src="detail.image" mode="widthFix"></image>
</view>
<view class="price-box">
<view class="y-f">
<text class="seckill-current">{{ detail.price }}</text>
<text class="original">{{ detail.browse }}人浏览</text>
</view>
</view>
<view class="title"><slot name="titleText"></slot></view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {};
},
props: {
detail: Object
},
computed: {},
methods: {
//
jump(path, parmas) {
this.$Router.push({ path: path, query: parmas });
}
}
};
</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>

260
components/sh-adv.vue

@ -0,0 +1,260 @@
<template>
<view class="adv-box mx20 mb10">
<!-- 模板1-->
<view class="x-f" v-if="detail.style == 1">
<image style="width:710rpx;height: 220rpx;" @tap="jump(detail.list[0].path)" :src="detail.list[0].image"
mode="aspectFill"></image>
</view>
<!-- 模板2-->
<view class="type1 x-f" v-if="detail.style == 2">
<image class="type1-img" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill">
</image>
<image class="type1-img" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill">
</image>
</view>
<!-- 模板3-->
<view class="type2 x-bc" v-if="detail.style == 3">
<image class="type2-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill">
</image>
<view class="y-f type2-box">
<image class="type2-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"
style="border-bottom:1rpx solid #f6f6f6"></image>
<image class="type2-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image"
mode="aspectFill"></image>
</view>
</view>
<!-- 模板4-->
<view class="type3 x-bc" v-if="detail.style == 4">
<view class="type3-box y-f">
<image class="type3-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image"
mode="aspectFill"></image>
<image class="type3-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image"
mode="aspectFill"></image>
</view>
<image class="type3-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill">
</image>
</view>
<!-- 模板5-->
<view class="type4 y-f" v-if="detail.style == 5">
<view class="type4-box x-f">
<image class="type4-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image"
mode="aspectFill"></image>
<image class="type4-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image"
mode="aspectFill"></image>
</view>
<image class="type4-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill">
</image>
</view>
<!-- 模板6-->
<view class="type5 y-f" v-if="detail.style == 6">
<image class="type5-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill">
</image>
<view class="type5-box x-bc">
<image class="type5-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"
style="border-bottom:1rpx solid #f6f6f6"></image>
<image class="type5-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image"
mode="aspectFill"></image>
</view>
</view>
<!-- 模板7-->
<view class="type6 y-f" v-if="detail.style == 7">
<view class="x-f type6-box1">
<image class="type6-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image"
mode="aspectFill"></image>
<image class="type6-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image"
mode="aspectFill"></image>
</view>
<view class="x-f type6-box2">
<image class="type6-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image"
mode="aspectFill"></image>
<image class="type6-img2" @tap="jump(detail.list[3].path)" :src="detail.list[3].image"
mode="aspectFill"></image>
<image class="type6-img2" @tap="jump(detail.list[4].path)" :src="detail.list[4].image"
mode="aspectFill"></image>
</view>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
detail: {
"list": [{
"image": "https:\/\/shopro-1253949872.file.myqcloud.com\/uploads\/20200704\/0669a6adec3f35d45ec66a082e03774f.png",
"name": "",
"path": "\/pages\/app\/coupon\/list",
"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_type": 1
}, {
"image": "https:\/\/shopro-1253949872.file.myqcloud.com\/uploads\/20200704\/e047d312fb5930de972ae288b9b3bae7.png",
"name": "",
"path": "\/pages\/app\/score\/list",
"path_name": "应用-积分商城",
"path_type": 1
}],
"name": "",
"style": 3
}
};
},
props: {},
computed: {},
created() {},
methods: {
//
jump(path) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: item.id
}
});
this.$tools.routerTo(path);
}
}
};
</script>
<style lang="scss">
.adv-box {
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
image{
width: 100%;
}
.type1 {
.type1-img {
flex: 1;
height: 220rpx;
&:first-child {
border-right: 1rpx solid #f6f6f6;
}
}
}
.type2 {
.type2-img1 {
width: (710rpx/2);
height: 340rpx;
border-right: 1rpx solid #f6f6f6;
}
.type2-box {
flex: 1;
height: 340rpx;
width: (710rpx/2);
.type2-img2 {
height: (340rpx/2);
}
}
}
.type3 {
.type3-box {
width: (710rpx/2);
border-right: 1rpx solid #f6f6f6;
.type3-img1 {
flex: 1;
height: (340rpx/2);
&:first-child {
border-bottom: 1rpx solid #f6f6f6;
}
}
}
.type3-img2 {
flex: 1;
height: 340rpx;
width: (710rpx/2);
}
}
.type4 {
.type4-box {
border-bottom: 1rpx solid #f6f6f6;
.type4-img1 {
flex: 1;
height: (340rpx/2);
&:first-child {
border-right: 1rpx solid #f6f6f6;
}
}
}
.type4-img2 {
flex: 1;
height: (340rpx/2);
width: 710rpx;
}
}
.type5 {
.type5-img1 {
width: 710rpx;
height: (340rpx/2);
border-bottom: 1rpx solid #f6f6f6;
}
.type5-box {
flex: 1;
height: (340rpx/2);
width: 710rpx;
.type5-img2 {
height: (340rpx/2);
&:first-child {
border-right: 1rpx solid #f6f6f6;
}
}
}
}
.type6 {
.type6-box1 {
.type6-img1 {
width: (710rpx/2);
height: (340rpx/2);
&:first-child {
border-right: 1rpx solid #f6f6f6;
}
}
}
.type6-box2 {
border-top: 1rpx solid #f6f6f6;
.type6-img2 {
width: (710rpx/3);
height: (340rpx/2);
border-right: 1rpx solid #f6f6f6;
&:last-child {
border-right: 0;
}
}
}
}
image {
// background-color: #ccc;
}
}
</style>

197
components/sh-groupon.vue

@ -0,0 +1,197 @@
<template>
<!-- 今日必拼 -->
<view class="group-goods pa20 mx20 mb10">
<view class="title-box x-bc" @tap="jump('/pages/activity/GoodsGroup/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">
<sh-activity-goods :detail="mgoods" class="goods-item">
<!-- <block slot="titleText">立减8.5</block> -->
</sh-activity-goods>
</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 './sh-activity-goods.vue';
export default {
name: 'shGroupon',
components: {
shActivityGoods
},
data() {
return {
goodsList: [],
swiperCurrent: 0
};
},
props: {
detail: Array
},
computed: {},
created() {},
watch: {
detail(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">
.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>

4
config/index.js

@ -1,5 +1,5 @@
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api'; // export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api';
// export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api'; export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api';
export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api'; // export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';
export const VUE_APP_RESOURCES_URL = 'https://h5.yixiang.co/static'; export const VUE_APP_RESOURCES_URL = 'https://h5.yixiang.co/static';

8
pages/Loading/index.vue

@ -44,7 +44,7 @@ export default {
} }
cookie.get("spread"); cookie.get("spread");
// this.toLaunch(); // this.toLaunch();
if (this.$deviceType == "app") { if (this.$deviceType == "app"||this.$deviceType == "h5") {
// this.toLaunch(); // this.toLaunch();
this.$yrouter.switchTab({ this.$yrouter.switchTab({
path: "/pages/home/index" path: "/pages/home/index"
@ -52,9 +52,9 @@ export default {
return; return;
} }
login().finally(() => { login().finally(() => {
// this.$yrouter.switchTab({ this.$yrouter.switchTab({
// path: "/pages/home/index" path: "/pages/home/index"
// }); });
}); });
}, },
methods: { methods: {

904
pages/activity/DargainDetails/index.vue

File diff suppressed because it is too large Load Diff

375
pages/activity/GoodsSeckill/index.vue

@ -5,6 +5,9 @@
</view> </view>
<scroll-view scroll-y="false" scroll-x="true"> <scroll-view scroll-y="false" scroll-x="true">
<view class="timeScroll"> <view class="timeScroll">
<div class="logoPic">
<image src="https://wx.yixiang.co/h5/img/baokuan.6313c8c8.png">
</div>
<view v-for="(item, index) in timeList" :key="index"> <view v-for="(item, index) in timeList" :key="index">
<view v-if="active==index" class="timeItem active" @click="setTime(index)"> <view v-if="active==index" class="timeItem active" @click="setTime(index)">
<view class="time">{{ item.time }}</view> <view class="time">{{ item.time }}</view>
@ -19,26 +22,15 @@
</scroll-view> </scroll-view>
<view v-for="(item, index) in timeList" :key="index"> <view v-for="(item, index) in timeList" :key="index">
<view v-if="active == index"> <view v-if="active == index">
<view class="countDown font-color-red acea-row row-center-wrapper"> <!-- <view class="countDown font-color-red acea-row row-center-wrapper">
<view v-if="item.status === 0" class="activity">活动已结束</view> <view v-if="item.status === 0" class="activity">活动已结束</view>
<count-down <count-down :isDay="false" :tipText="'距结束仅剩 '" :dayText="false" :hourText="' : '" :minuteText="' : '"
:isDay="false" :secondText="false" :datatime="datatime" v-if="item.status === 1"></count-down>
:tipText="'距结束仅剩 '"
:dayText="false"
:hourText="' : '"
:minuteText="' : '"
:secondText="false"
:datatime="datatime"
v-if="item.status === 1"
></count-down>
<view v-if="item.status === 2" class="activity">活动即将开始</view> <view v-if="item.status === 2" class="activity">活动即将开始</view>
</view> </view> -->
<view class="list"> <view class="list">
<view <view class="item acea-row row-between-wrapper" v-for="(itemSeckill, indexSeckill) in seckillList"
class="item acea-row row-between-wrapper" :key="indexSeckill">
v-for="(itemSeckill, indexSeckill) in seckillList"
:key="indexSeckill"
>
<view class="pictrue"> <view class="pictrue">
<image :src="itemSeckill.image" /> <image :src="itemSeckill.image" />
</view> </view>
@ -53,21 +45,14 @@
<view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view> <view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view>
</view> </view>
</view> </view>
<view <view class="grab bg-color-red" v-if="item.status === 1 && itemSeckill.stock > 0"
class="grab bg-color-red" @click="goDetail(itemSeckill.id)">马上抢</view>
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" 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" 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>
<view <view class="noCommodity" style="background-color: #f5f5f5;" v-if="seckillList.length === 0 && page > 1">
class="noCommodity"
style="background-color: #fff;"
v-if="seckillList.length === 0 && page > 1"
>
<view class="noPictrue"> <view class="noPictrue">
<image src="@/static/images/noGood.png" class="image" /> <image src="@/static/images/noGood.png" class="image" />
</view> </view>
@ -77,185 +62,211 @@
</view> </view>
</template> </template>
<script> <script>
import { getSeckillConfig, getSeckillList } from "@/api/activity"; import {
import CountDown from "@/components/CountDown"; getSeckillConfig,
// import { Tab, Tabs } from "vant-weapp"; getSeckillList
import Loading from "@/components/Loading"; } from "@/api/activity";
import CountDown from "@/components/CountDown";
// import { Tab, Tabs } from "vant-weapp";
import Loading from "@/components/Loading";
export default { export default {
name: "GoodsSeckill", name: "GoodsSeckill",
components: { components: {
CountDown CountDown
}, },
props: {}, props: {},
data: function() { data: function () {
return { return {
headerImg: "", headerImg: "",
timeList: [], timeList: [],
sticky: false, sticky: false,
loading: false, loading: false,
datatime: 0, datatime: 0,
active: 0, active: 0,
seckillList: [], seckillList: [],
status: false, // false true status: false, // false true
loadingList: false, // false true loadingList: false, // false true
page: 1, // page: 1, //
limit: 5, // limit: 5, //
title: [] title: []
}; };
}, },
mounted: function() { mounted: function () {
this.mountedStart(); this.mountedStart();
}, },
onReachBottom() { onReachBottom() {
!this.loadingList && this.getSeckillList(); !this.loadingList && this.getSeckillList();
},
methods: {
changeTime: function(index) {
this.active = index;
this.getSeckillList();
}, },
mountedStart: function() { methods: {
var that = this; changeTime: function (index) {
uni.showLoading(); this.active = index;
getSeckillConfig().then(res => { this.getSeckillList();
that.$set(that, "headerImg", res.data.lovely); },
that.$set(that, "timeList", res.data.seckillTime); mountedStart: function () {
that.$set(that, "active", res.data.seckillTimeIndex); var that = this;
uni.showLoading();
getSeckillConfig().then(res => {
that.$set(that, "headerImg", res.data.lovely);
that.$set(that, "timeList", res.data.seckillTime);
that.$set(that, "active", res.data.seckillTimeIndex);
let title = []; let title = [];
title = res.data.seckillTime.map((item, index) => { title = res.data.seckillTime.map((item, index) => {
return { return {
name: "div", name: "div",
attrs: { attrs: {
class: "timeItem" class: "timeItem"
}, },
children: [ children: [{
{ name: "div",
name: "div", attrs: {
attrs: { class: "time"
class: "time" },
}, children: [{
children: [
{
type: "text", type: "text",
text: item.time text: item.time
} }]
]
},
{
name: "div",
attrs: {
class: "state"
}, },
children: [ {
{ name: "div",
attrs: {
class: "state"
},
children: [{
type: "text", type: "text",
text: item.state text: item.state
} }]
] }
} ]
] };
}; });
that.$set(that, "title", title);
that.datatime = that.timeList[that.active].stop;
that.getSeckillList();
that.$nextTick(function () {
that.sticky = true;
uni.hideLoading();
});
}); });
that.$set(that, "title", title); },
setTime: function (index) {
var that = this;
that.page = 1;
that.loadingList = false;
that.status = false;
that.active = index;
that.datatime = that.timeList[that.active].stop; that.datatime = that.timeList[that.active].stop;
this.seckillList = [];
that.getSeckillList(); that.getSeckillList();
that.$nextTick(function() { },
that.sticky = true; getSeckillList: function () {
var that = this;
if (that.loadingList) return;
if (that.status) return;
var time = that.timeList[that.active].id;
getSeckillList(time, {
page: that.page,
limit: that.limit
}).then(res => {
that.status = res.data.length < that.limit;
that.seckillList.push.apply(that.seckillList, res.data);
that.page++;
uni.hideLoading(); uni.hideLoading();
}); });
}); },
}, goDetail: function (id) {
setTime: function(index) { var that = this;
var that = this; var time = that.timeList[that.active].stop;
that.page = 1; this.$yrouter.push({
that.loadingList = false; path: "/pages/activity/SeckillDetails/index",
that.status = false; query: {
that.active = index; id,
that.datatime = that.timeList[that.active].stop; time
this.seckillList = []; }
that.getSeckillList(); });
}, }
getSeckillList: function() {
var that = this;
if (that.loadingList) return;
if (that.status) return;
var time = that.timeList[that.active].id;
getSeckillList(time, {
page: that.page,
limit: that.limit
}).then(res => {
that.status = res.data.length < that.limit;
that.seckillList.push.apply(that.seckillList, res.data);
that.page++;
uni.hideLoading();
});
},
goDetail: function(id) {
var that = this;
var time = that.timeList[that.active].stop;
this.$yrouter.push({
path: "/pages/activity/SeckillDetails/index",
query: {
id,
time
}
});
} }
} };
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.timeScroll { .flash-sale {
display: flex; background: #f5f5f5!important;
align-items: center; height: 100%;
flex-direction: row; }
}
.timeItem { .timeScroll {
font-size: 0.22 * 100rpx; display: flex;
color: #282828; align-items: center;
width: 150rpx; flex-direction: row;
text-align: center; }
padding: 0.11 * 100rpx 0; .list{
background-color: none; 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;
margin-left: 20rpx;
margin-right: 20rpx;
&.active { image {
.time { width: 75rpx;
color: #eb3729; height: 70rpx;
} }
}
.timeItem {
font-size: 0.22 * 100rpx;
color: #282828;
width: 150rpx;
text-align: center;
padding: 20rpx 0;
background-color: none;
.state { &.active {
background-color: #eb3729; .time {
color: #fff; color: #eb3729;
opacity: 1; }
border-radius: 30rpx;
padding: 0 0.2 * 100rpx; .state {
font-weight: 800; background: linear-gradient(90deg,#00c17b,#00c17b);
height: 0.37 * 100rpx; color: #fff;
line-height: 0.37 * 100rpx; opacity: 1;
border-radius: 30rpx;
padding: 0 0.2 * 100rpx;
font-weight: 800;
height: 0.37 * 100rpx;
line-height: 0.37 * 100rpx;
}
} }
} }
}
.timeItem .time { .timeItem .time {
font-size: 0.32 * 100rpx; font-size: 0.32 * 100rpx;
font-weight: bold; font-weight: bold;
height: 0.37 * 100rpx; height: .5 * 100rpx;
line-height: 0.37 * 100rpx; line-height: .5 * 100rpx;
} }
.timeItem .state { .timeItem .state {
height: 0.37 * 100rpx; height: 0.37 * 100rpx;
line-height: 0.37 * 100rpx; line-height: 0.37 * 100rpx;
} }
.activity { .activity {
color: #333; color: #333;
} }
.flash-sale .list .item .grab { .flash-sale .list .item .grab {
background-color: #999; background-color: #999;
} }
</style> </style>

341
pages/authorization/index.vue

@ -1,219 +1,192 @@
<template> <template>
<view class="container"> <view class="container">
<view v-if="!token"> <!-- #ifdef MP-WEIXIN -->
<!-- #ifdef MP-WEIXIN --> <view v-if="!token" class="force-login-wrap">
<view> <image class="logo-bg" src="@/static/images/logo_bg.png" mode="aspectFill"></image>
<view class="getUserInfo"> <view class="force-login__content y-f">
<text>您还未允许微信登录授权请点击下方按钮允许微信授权登录</text> <open-data class="user-avatar" type="userAvatarUrl"></open-data>
<button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">允许微信登录授权</button> <open-data class="user-name" type="userNickName"></open-data>
<view style="height:20rpx"></view> <view class="login-notice">为了提供更优质的服务需要获取您的头像昵称</view>
<button @click="back">取消微信登录授权</button> <button class="cu-btn author-btn" @getuserinfo="getUserInfo" open-type="getUserInfo">授权并查看</button>
</view> <button class="cu-btn close-btn" @tap="back">暂不授权</button>
</view> </view>
<!-- #endif --> </view>
<!-- #ifndef MP-WEIXIN --> <!-- #endif -->
<view> <!-- #ifndef MP-WEIXIN -->
<view class="getUserInfo"> <view>
<text>请先登录</text> <view class="getUserInfo">
<button type="primary" @tap="toLogin">登录</button> <text>请先登录</text>
</view> <button type="primary" @tap="toLogin">去登录</button>
</view> </view>
<!-- #endif -->
</view> </view>
<!-- #endif -->
</view> </view>
</template> </template>
<script> <script>
import { mapState, mapMutations, mapActions } from "vuex"; import {
import { wxappAuth, getUser } from "@/api/user"; mapState,
import dayjs from "dayjs"; mapMutations,
import cookie from "@/utils/store/cookie"; mapActions
import { login, authorize } from "@/utils"; } from "vuex";
import {
export default { wxappAuth,
data() { getUser
return { } from "@/api/user";
authorize: false, import dayjs from "dayjs";
}; import cookie from "@/utils/store/cookie";
}, import {
computed: { login,
...mapState(["isAuthorization", "$deviceType", "token"]), authorize
}, } from "@/utils";
onShow() {
// // export default {
}, data() {
onHide() { return {
this.updateAuthorizationPage(false); authorize: false,
this.changeAuthorization(false); };
}, },
onUnload() { computed: {
this.updateAuthorizationPage(false); ...mapState(["isAuthorization", "$deviceType", "token"]),
this.changeAuthorization(false); },
}, onShow() {
methods: { // //
...mapActions(["changeAuthorization", "setUserInfo"]), },
...mapMutations(["updateAuthorizationPage"]), onHide() {
toLogin() { this.updateAuthorizationPage(false);
this.$yrouter.push({ this.changeAuthorization(false);
path: "/pages/user/Login/index",
query: {},
});
}, },
back() { onUnload() {
this.$yrouter.switchTab({ this.updateAuthorizationPage(false);
path: "/pages/home/index", this.changeAuthorization(false);
query: {},
});
}, },
getUserInfo(data) { methods: {
if (data.detail.errMsg == "getUserInfo:fail auth deny") { ...mapActions(["changeAuthorization", "setUserInfo"]),
uni.showToast({ ...mapMutations(["updateAuthorizationPage"]),
title: "取消授权", toLogin() {
icon: "none", this.$yrouter.push({
duration: 2000, path: "/pages/user/Login/index",
query: {},
}); });
return; },
} back() {
uni.showLoading({ this.$yrouter.switchTab({
title: "登录中", path: "/pages/home/index",
}); query: {},
login() });
.then((res) => { },
this.$yrouter.replace({ path: cookie.get("redirect") }); getUserInfo(data) {
}) if (data.detail.errMsg == "getUserInfo:fail auth deny") {
.catch((error) => {
console.log(error);
uni.showToast({ uni.showToast({
title: error, title: "取消授权",
icon: "none", icon: "none",
duration: 2000, duration: 2000,
}); });
return;
}
uni.showLoading({
title: "登录中",
}); });
login()
.then((res) => {
this.$yrouter.replace({
path: cookie.get("redirect")
});
})
.catch((error) => {
console.log(error);
uni.showToast({
title: error,
icon: "none",
duration: 2000,
});
});
},
}, },
}, mounted() {},
mounted() {}, };
};
</script> </script>
<style lang="less"> <style lang="less">
.sp-cell { .container {
height: 20rpx;
}
.getUserInfo {
display: flex;
align-items: center;
flex-direction: column;
padding: 30px;
text {
font-size: 30rpx;
text-align: center;
margin-bottom: 20px;
}
}
.container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
}
.tab-bar {
font-size: 0;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.9);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
border-top: 1px solid rgba(248, 248, 248, 1);
.tab-bar-item {
flex: 1; flex: 1;
height: 49px;
display: flex; display: flex;
justify-content: center;
align-items: center;
flex-direction: column; flex-direction: column;
justify-content: flex-start;
position: relative;
}
&.active { .force-login-wrap {
text { position: fixed;
color: #ee7559; width: 100vw;
} height: 100vh;
overflow: hidden;
.tab-bar-pic { z-index: 11111;
display: none; top: 0;
background: #f9f9f9; background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 25%, rgba(255, 255, 255, 1) 98%);
.logo-bg {
width: 640rpx;
height: 300rpx;
}
&.active { .force-login__content {
display: block; position: absolute;
} left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.user-avatar {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
overflow: hidden;
margin-bottom: 40rpx;
} }
}
.tab-bar-pic { .user-name {
display: block; font-size: 35rpx;
background: #f9f9f9; font-family: PingFang SC;
font-weight: bold;
color: rgba(132, 87, 8, 1);
margin-bottom: 30rpx;
}
&.active { .login-notice {
display: none; font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: rgba(200, 150, 61, 1);
line-height: 44rpx;
width: 400rpx;
text-align: center;
margin-bottom: 80rpx;
} }
}
}
.tab-bar-pic { .author-btn {
width: 25px; width: 630rpx;
height: 25px; height: 80rpx;
background: #f9f9f9; background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
border-radius: 40rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
image { .close-btn {
width: 25px; width: 630rpx;
height: 25px; height: 80rpx;
margin-top: 30rpx;
border-radius: 40rpx;
border: 2rpx solid rgba(233, 180, 97, 1);
background: none;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(233, 180, 97, 1);
}
} }
} }
.tab-bar-pic-active {
}
text {
font-size: 10px;
color: rgb(160, 160, 160);
line-height: 10px;
margin-top: 5px;
}
}
.tab-bar-bg {
padding-top: 46px;
width: 100%;
}
.view-item {
display: none;
width: 100%;
}
.view-item-active {
display: block;
}
.getUserInfo {
display: flex;
align-items: center;
flex-direction: column;
padding: 30px;
p {
margin-bottom: 20px;
}
}
._van-dialog {
z-index: 99999999999;
}
</style> </style>

72
pages/home/index.vue

@ -3,7 +3,8 @@
<!-- 导航栏 --> <!-- 导航栏 -->
<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" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]"> <view class="cu-bar fixed" :style="customStyle"
:class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
<view class="action"> <view class="action">
<text class="nav-title shopro-selector-rect">{{ info.name || '商城' }}</text> <text class="nav-title shopro-selector-rect">{{ info.name || '商城' }}</text>
</view> </view>
@ -26,20 +27,25 @@
<view class="banner-swiper-box mb10" v-if="banner.length>0"> <view class="banner-swiper-box mb10" 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 " @tap="routerTo(item.path)"> <swiper-item v-for="(item, index) in banner" :key="index" class="carousel-item "
<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load></image> @tap="routerTo(item.path)">
<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load>
</image>
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="banner-swiper-dots"> <view class="banner-swiper-dots">
<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'" v-for="(dot, index) in banner.length" <text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'"
:key="index"></text> v-for="(dot, index) in banner.length" :key="index"></text>
</view> </view>
</view> </view>
<view class="content_box">
<Menu :list="menus"></Menu> <Menu :list="menus"></Menu>
<Adv />
<PromotionGood :benefit="benefit"></PromotionGood> <Groupon :detail="combinationList" />
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"></Coupon-window> <PromotionGood :benefit="benefit"></PromotionGood>
</view>
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose">
</Coupon-window>
</view> </view>
</template> </template>
<script> <script>
@ -52,9 +58,11 @@
} from 'vuex'; } from 'vuex';
import GoodList from '@/components/GoodList'; import GoodList from '@/components/GoodList';
import PromotionGood from '@/components/PromotionGood'; import PromotionGood from '@/components/PromotionGood';
import CouponWindow from '@/components/CouponWindow'; import CouponWindow from '@/components/CouponWindow';
import Menu from '@/components/Menu'; import Menu from '@/components/Menu';
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 Groupon from '@/components/sh-groupon.vue'
import { import {
getHomeData, getHomeData,
getShare getShare
@ -72,14 +80,16 @@
components: { components: {
// swiper, // swiper,
// swiperSlide, // swiperSlide,
uniNoticeBar, UniNoticeBar,
GoodList, GoodList,
PromotionGood, PromotionGood,
CouponWindow, CouponWindow,
Menu, Menu,
Adv,
Groupon
}, },
props: {}, props: {},
data: function() { data: function () {
return { return {
CustomBar: this.CustomBar, CustomBar: this.CustomBar,
StatusBar: this.StatusBar, StatusBar: this.StatusBar,
@ -93,8 +103,8 @@
showCoupon: false, showCoupon: false,
logoUrl: '', logoUrl: '',
banner: [], banner: [],
menus: [], menus: [],
combinationList: [],
roll: [], roll: [],
activity: [], activity: [],
activityOne: {}, activityOne: {},
@ -180,7 +190,7 @@
}, },
}, },
onShow: function() { onShow: function () {
this.getLocation() this.getLocation()
let that = this; let that = this;
uni.showLoading({ uni.showLoading({
@ -198,6 +208,7 @@
that.$set(that, 'lovely', res.data.lovely); that.$set(that, 'lovely', res.data.lovely);
that.$set(that, 'benefit', res.data.benefit); that.$set(that, 'benefit', res.data.benefit);
that.$set(that, 'couponList', res.data.couponList); that.$set(that, 'couponList', res.data.couponList);
that.$set(that, 'combinationList', res.data.combinationList);
uni.hideLoading(); uni.hideLoading();
that.setOpenShare(); that.setOpenShare();
that.doColorThief() that.doColorThief()
@ -236,7 +247,7 @@
goGoodsPromotion() { goGoodsPromotion() {
this.$yrouter.push('/pages/shop/GoodsPromotion/index'); this.$yrouter.push('/pages/shop/GoodsPromotion/index');
}, },
setOpenShare: function() { setOpenShare: function () {
if (this.$deviceType == 'weixin') { if (this.$deviceType == 'weixin') {
getShare().then(res => { getShare().then(res => {
var data = res.data.data; var data = res.data.data;
@ -250,7 +261,7 @@
}) })
} }
}, },
startQr: function() { startQr: function () {
uni.scanCode({ uni.scanCode({
success: (res) => { success: (res) => {
let option = handleUrlParam(res.result) let option = handleUrlParam(res.result)
@ -307,9 +318,9 @@
that.webviewId = ctx.webviewId; that.webviewId = ctx.webviewId;
uni.getImageInfo({ uni.getImageInfo({
src: bannerItem.pic, src: bannerItem.pic,
success: function(image) { success: function (image) {
ctx.drawImage(image.path, 0, 0, image.width, image.height); ctx.drawImage(image.path, 0, 0, image.width, image.height);
ctx.draw(true, function(e) { ctx.draw(true, function (e) {
uni.canvasGetImageData({ uni.canvasGetImageData({
canvasId: 'colorThief', canvasId: 'colorThief',
x: 0, x: 0,
@ -317,7 +328,8 @@
width: parseInt(image.width), width: parseInt(image.width),
height: parseInt(image.height), height: parseInt(image.height),
success(res) { success(res) {
let bgcolor = colorThief(res.data).color().getHex(); let bgcolor = colorThief(res.data).color()
.getHex();
that.bgcolorAry[that.swiperCurrent] = bgcolor that.bgcolorAry[that.swiperCurrent] = bgcolor
that.getbgcolor(bgcolor) that.getbgcolor(bgcolor)
@ -342,12 +354,16 @@
this.bgcolor = e; this.bgcolor = e;
}, },
}, },
created: async function() { created: async function () {
await this.doColorThief(); await this.doColorThief();
}, },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.content_box {
background: #f6f6f6;
}
.index { .index {
background-color: #fff; background-color: #fff;
} }
@ -490,6 +506,4 @@
font-size: 15px; font-size: 15px;
} }
} }
</style>
</style>

BIN
static/images/logo_bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
static/images/title1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

510
uni.css

@ -0,0 +1,510 @@
@charset "UTF-8";
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场https://ext.dcloud.net.cn上很多三方插件均使用了这些样式变量
* 如果你是插件开发者建议你使用scss预处理并在插件代码中直接使用这些变量无需 import 这个文件方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者插件使用者你可以通过修改这些变量来定制自己的插件主题实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理你也可以直接在你的 scss 代码中使用如下变量同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
/* ==================
自定义变量
==================== */
/*盒子模型*/
.mt2 {
margin-top: 2rpx;
}
.mr2 {
margin-right: 2rpx;
}
.mb2 {
margin-bottom: 2rpx;
}
.ml2 {
margin-left: 2rpx;
}
.mx2 {
margin-left: 2rpx;
margin-right: 2rpx;
}
.my2 {
margin-top: 2rpx;
margin-bottom: 2rpx;
}
.ma2 {
margin: 2rpx;
}
.mt4 {
margin-top: 4rpx;
}
.mr4 {
margin-right: 4rpx;
}
.mb4 {
margin-bottom: 4rpx;
}
.ml4 {
margin-left: 4rpx;
}
.mx4 {
margin-left: 4rpx;
margin-right: 4rpx;
}
.my4 {
margin-top: 4rpx;
margin-bottom: 4rpx;
}
.ma4 {
margin: 4rpx;
}
.mt8 {
margin-top: 8rpx;
}
.mr8 {
margin-right: 8rpx;
}
.mb8 {
margin-bottom: 8rpx;
}
.ml8 {
margin-left: 8rpx;
}
.mx8 {
margin-left: 8rpx;
margin-right: 8rpx;
}
.my8 {
margin-top: 8rpx;
margin-bottom: 8rpx;
}
.ma8 {
margin: 8rpx;
}
.mt10 {
margin-top: 10rpx;
}
.mr10 {
margin-right: 10rpx;
}
.mb10 {
margin-bottom: 10rpx;
}
.ml10 {
margin-left: 10rpx;
}
.mx10 {
margin-left: 10rpx;
margin-right: 10rpx;
}
.my10 {
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.ma10 {
margin: 10rpx;
}
.mt15 {
margin-top: 15rpx;
}
.mr15 {
margin-right: 15rpx;
}
.mb15 {
margin-bottom: 15rpx;
}
.ml15 {
margin-left: 15rpx;
}
.mx15 {
margin-left: 15rpx;
margin-right: 15rpx;
}
.my15 {
margin-top: 15rpx;
margin-bottom: 15rpx;
}
.ma15 {
margin: 15rpx;
}
.mt20 {
margin-top: 20rpx;
}
.mr20 {
margin-right: 20rpx;
}
.mb20 {
margin-bottom: 20rpx;
}
.ml20 {
margin-left: 20rpx;
}
.mx20 {
margin-left: 20rpx;
margin-right: 20rpx;
}
.my20 {
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.ma20 {
margin: 20rpx;
}
.mt24 {
margin-top: 24rpx;
}
.mr24 {
margin-right: 24rpx;
}
.mb24 {
margin-bottom: 24rpx;
}
.ml24 {
margin-left: 24rpx;
}
.mx24 {
margin-left: 24rpx;
margin-right: 24rpx;
}
.my24 {
margin-top: 24rpx;
margin-bottom: 24rpx;
}
.ma24 {
margin: 24rpx;
}
.mt30 {
margin-top: 30rpx;
}
.mr30 {
margin-right: 30rpx;
}
.mb30 {
margin-bottom: 30rpx;
}
.ml30 {
margin-left: 30rpx;
}
.mx30 {
margin-left: 30rpx;
margin-right: 30rpx;
}
.my30 {
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.ma30 {
margin: 30rpx;
}
.pt2 {
padding-top: 2rpx;
}
.pr2 {
padding-right: 2rpx;
}
.pb2 {
padding-bottom: 2rpx;
}
.pl2 {
padding-left: 2rpx;
}
.px2 {
padding-left: 2rpx;
padding-right: 2rpx;
}
.py2 {
padding-top: 2rpx;
padding-bottom: 2rpx;
}
.pa2 {
padding: 2rpx;
}
.pt4 {
padding-top: 4rpx;
}
.pr4 {
padding-right: 4rpx;
}
.pb4 {
padding-bottom: 4rpx;
}
.pl4 {
padding-left: 4rpx;
}
.px4 {
padding-left: 4rpx;
padding-right: 4rpx;
}
.py4 {
padding-top: 4rpx;
padding-bottom: 4rpx;
}
.pa4 {
padding: 4rpx;
}
.pt8 {
padding-top: 8rpx;
}
.pr8 {
padding-right: 8rpx;
}
.pb8 {
padding-bottom: 8rpx;
}
.pl8 {
padding-left: 8rpx;
}
.px8 {
padding-left: 8rpx;
padding-right: 8rpx;
}
.py8 {
padding-top: 8rpx;
padding-bottom: 8rpx;
}
.pa8 {
padding: 8rpx;
}
.pt10 {
padding-top: 10rpx;
}
.pr10 {
padding-right: 10rpx;
}
.pb10 {
padding-bottom: 10rpx;
}
.pl10 {
padding-left: 10rpx;
}
.px10 {
padding-left: 10rpx;
padding-right: 10rpx;
}
.py10 {
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.pa10 {
padding: 10rpx;
}
.pt15 {
padding-top: 15rpx;
}
.pr15 {
padding-right: 15rpx;
}
.pb15 {
padding-bottom: 15rpx;
}
.pl15 {
padding-left: 15rpx;
}
.px15 {
padding-left: 15rpx;
padding-right: 15rpx;
}
.py15 {
padding-top: 15rpx;
padding-bottom: 15rpx;
}
.pa15 {
padding: 15rpx;
}
.pt20 {
padding-top: 20rpx;
}
.pr20 {
padding-right: 20rpx;
}
.pb20 {
padding-bottom: 20rpx;
}
.pl20 {
padding-left: 20rpx;
}
.px20 {
padding-left: 20rpx;
padding-right: 20rpx;
}
.py20 {
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.pa20 {
padding: 20rpx;
}
.pt24 {
padding-top: 24rpx;
}
.pr24 {
padding-right: 24rpx;
}
.pb24 {
padding-bottom: 24rpx;
}
.pl24 {
padding-left: 24rpx;
}
.px24 {
padding-left: 24rpx;
padding-right: 24rpx;
}
.py24 {
padding-top: 24rpx;
padding-bottom: 24rpx;
}
.pa24 {
padding: 24rpx;
}
.pt30 {
padding-top: 30rpx;
}
.pr30 {
padding-right: 30rpx;
}
.pb30 {
padding-bottom: 30rpx;
}
.pl30 {
padding-left: 30rpx;
}
.px30 {
padding-left: 30rpx;
padding-right: 30rpx;
}
.py30 {
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.pa30 {
padding: 30rpx;
}
/*# sourceMappingURL=uni.css.map */

9
uni.css.map

File diff suppressed because one or more lines are too long

1
uni.min.css vendored

@ -0,0 +1 @@
.mt2{margin-top:2rpx}.mr2{margin-right:2rpx}.mb2{margin-bottom:2rpx}.ml2{margin-left:2rpx}.mx2{margin-left:2rpx;margin-right:2rpx}.my2{margin-top:2rpx;margin-bottom:2rpx}.ma2{margin:2rpx}.mt4{margin-top:4rpx}.mr4{margin-right:4rpx}.mb4{margin-bottom:4rpx}.ml4{margin-left:4rpx}.mx4{margin-left:4rpx;margin-right:4rpx}.my4{margin-top:4rpx;margin-bottom:4rpx}.ma4{margin:4rpx}.mt8{margin-top:8rpx}.mr8{margin-right:8rpx}.mb8{margin-bottom:8rpx}.ml8{margin-left:8rpx}.mx8{margin-left:8rpx;margin-right:8rpx}.my8{margin-top:8rpx;margin-bottom:8rpx}.ma8{margin:8rpx}.mt10{margin-top:10rpx}.mr10{margin-right:10rpx}.mb10{margin-bottom:10rpx}.ml10{margin-left:10rpx}.mx10{margin-left:10rpx;margin-right:10rpx}.my10{margin-top:10rpx;margin-bottom:10rpx}.ma10{margin:10rpx}.mt15{margin-top:15rpx}.mr15{margin-right:15rpx}.mb15{margin-bottom:15rpx}.ml15{margin-left:15rpx}.mx15{margin-left:15rpx;margin-right:15rpx}.my15{margin-top:15rpx;margin-bottom:15rpx}.ma15{margin:15rpx}.mt20{margin-top:20rpx}.mr20{margin-right:20rpx}.mb20{margin-bottom:20rpx}.ml20{margin-left:20rpx}.mx20{margin-left:20rpx;margin-right:20rpx}.my20{margin-top:20rpx;margin-bottom:20rpx}.ma20{margin:20rpx}.mt24{margin-top:24rpx}.mr24{margin-right:24rpx}.mb24{margin-bottom:24rpx}.ml24{margin-left:24rpx}.mx24{margin-left:24rpx;margin-right:24rpx}.my24{margin-top:24rpx;margin-bottom:24rpx}.ma24{margin:24rpx}.mt30{margin-top:30rpx}.mr30{margin-right:30rpx}.mb30{margin-bottom:30rpx}.ml30{margin-left:30rpx}.mx30{margin-left:30rpx;margin-right:30rpx}.my30{margin-top:30rpx;margin-bottom:30rpx}.ma30{margin:30rpx}.pt2{padding-top:2rpx}.pr2{padding-right:2rpx}.pb2{padding-bottom:2rpx}.pl2{padding-left:2rpx}.px2{padding-left:2rpx;padding-right:2rpx}.py2{padding-top:2rpx;padding-bottom:2rpx}.pa2{padding:2rpx}.pt4{padding-top:4rpx}.pr4{padding-right:4rpx}.pb4{padding-bottom:4rpx}.pl4{padding-left:4rpx}.px4{padding-left:4rpx;padding-right:4rpx}.py4{padding-top:4rpx;padding-bottom:4rpx}.pa4{padding:4rpx}.pt8{padding-top:8rpx}.pr8{padding-right:8rpx}.pb8{padding-bottom:8rpx}.pl8{padding-left:8rpx}.px8{padding-left:8rpx;padding-right:8rpx}.py8{padding-top:8rpx;padding-bottom:8rpx}.pa8{padding:8rpx}.pt10{padding-top:10rpx}.pr10{padding-right:10rpx}.pb10{padding-bottom:10rpx}.pl10{padding-left:10rpx}.px10{padding-left:10rpx;padding-right:10rpx}.py10{padding-top:10rpx;padding-bottom:10rpx}.pa10{padding:10rpx}.pt15{padding-top:15rpx}.pr15{padding-right:15rpx}.pb15{padding-bottom:15rpx}.pl15{padding-left:15rpx}.px15{padding-left:15rpx;padding-right:15rpx}.py15{padding-top:15rpx;padding-bottom:15rpx}.pa15{padding:15rpx}.pt20{padding-top:20rpx}.pr20{padding-right:20rpx}.pb20{padding-bottom:20rpx}.pl20{padding-left:20rpx}.px20{padding-left:20rpx;padding-right:20rpx}.py20{padding-top:20rpx;padding-bottom:20rpx}.pa20{padding:20rpx}.pt24{padding-top:24rpx}.pr24{padding-right:24rpx}.pb24{padding-bottom:24rpx}.pl24{padding-left:24rpx}.px24{padding-left:24rpx;padding-right:24rpx}.py24{padding-top:24rpx;padding-bottom:24rpx}.pa24{padding:24rpx}.pt30{padding-top:30rpx}.pr30{padding-right:30rpx}.pb30{padding-bottom:30rpx}.pl30{padding-left:30rpx}.px30{padding-left:30rpx;padding-right:30rpx}.py30{padding-top:30rpx;padding-bottom:30rpx}.pa30{padding:30rpx}

56
uni.scss

@ -73,4 +73,58 @@ $uni-font-size-title:40upx;
$uni-color-subtitle: #555555; // 二级标题颜色 $uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36upx; $uni-font-size-subtitle:36upx;
$uni-color-paragraph: #3F536E; // 文章段落颜色 $uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30upx; $uni-font-size-paragraph:30upx;
/* ==================
自定义变量
==================== */
$spaceTypes: (
m: margin,
p: padding
);
$spaceDirections: (
t: top,
r: right,
b: bottom,
l: left
);
$spaceSizes: (
2: 2rpx,
4: 4rpx,
8: 8rpx,
10: 10rpx,
15: 15rpx,
20: 20rpx,
24: 24rpx,
30: 30rpx
);
/*盒子模型*/
@each $typeKey, $type in $spaceTypes {
@each $sizeKey, $size in $spaceSizes {
// margin-top:10rpx
@each $directionKey, $direction in $spaceDirections {
.#{$typeKey}#{$directionKey}#{$sizeKey} {
#{$type}-#{$direction}: $size;
}
}
// margin: 10rpx 0;
.#{$typeKey}x#{$sizeKey} {
#{$type}-left: $size;
#{$type}-right: $size;
}
.#{$typeKey}y#{$sizeKey} {
#{$type}-top: $size;
#{$type}-bottom: $size;
}
// margin: 10rpx ;
.#{$typeKey}a#{$sizeKey} {
#{$type}: $size;
}
}
}

5
utils/index.js

@ -62,7 +62,10 @@ export function isType(arg, type) {
} }
export function isWeixin() { export function isWeixin() {
return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1; if(navigator&&navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1){
return true
}
return false
} }
export function parseQuery() { export function parseQuery() {

Loading…
Cancel
Save