yshop3.1正式发布
This commit is contained in:
xuwenbo
@@ -0,0 +1,207 @@
|
||||
<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 {};
|
||||
},
|
||||
props: {
|
||||
detail: {}
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
// 路由跳转
|
||||
jump(path) {
|
||||
this.$tools.routerTo(path);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.adv-box {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
.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>
|
||||
+10
-16
@@ -1,27 +1,21 @@
|
||||
<template>
|
||||
<view
|
||||
class="Loads acea-row row-center-wrapper"
|
||||
v-if="loading || !loaded"
|
||||
style="margin-top: 20rpx;"
|
||||
>
|
||||
<view class="Loads acea-row row-center-wrapper" v-if="loading || !loaded" style="margin-top: 20rpx;">
|
||||
<template v-if="loading">
|
||||
<view
|
||||
class="iconfont icon-jiazai loading acea-row row-center-wrapper"
|
||||
></view>
|
||||
<view class="iconfont icon-jiazai loading acea-row row-center-wrapper"></view>
|
||||
正在加载中
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="!loading">
|
||||
上拉加载更多
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Loading",
|
||||
props: {
|
||||
loaded: Boolean,
|
||||
loading: Boolean
|
||||
}
|
||||
};
|
||||
export default {
|
||||
name: "Loading",
|
||||
props: {
|
||||
loaded: Boolean,
|
||||
loading: Boolean
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<!-- 产品分类导航 -->
|
||||
<view class="menu-category-box mb10" v-if="carousel" :style="list.length <= menu ? `height:200rpx` : `height:360rpx`">
|
||||
<swiper
|
||||
class="menu-swiper-box"
|
||||
:style="list.length <= menu ? `height:160rpx` : `height:320rpx`"
|
||||
@change="onSwiper"
|
||||
circular
|
||||
:autoplay="false"
|
||||
:interval="3000"
|
||||
:duration="1000"
|
||||
>
|
||||
<swiper-item class="menu-swiper-item" v-for="(itemList, index) in carousel" :key="index" :style="list.length <= menu ? `height:200rpx` : `height:340rpx`">
|
||||
<view class="menu-tab-box">
|
||||
<view class="tab-list y-f" :style="{ width: 690 / menu + 'rpx' }" v-for="item in itemList" :key="item.name" @tap="routerTo(item)">
|
||||
<image class="tab-img Shop-selector-circular" :style="{ width: imgW + 'rpx', height: imgW + 'rpx' }" :src="item.pic"></image>
|
||||
<text class="Shop-selector-rect">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="menu-category-dots" v-if="carousel.length > 1">
|
||||
<text :class="categoryCurrent === index ? 'category-dot-active' : 'category-dot'" v-for="(dot, index) in carousel.length" :key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
categoryCurrent: 0 //分类轮播下标
|
||||
};
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
menu: {
|
||||
default: 4
|
||||
},
|
||||
imgW: {
|
||||
type: Number,
|
||||
default: 88
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
carousel() {
|
||||
if (this.list) {
|
||||
let list = this.sortData(this.list, this.menu * 2);
|
||||
return list;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
// 数据分层
|
||||
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;
|
||||
},
|
||||
// 轮播
|
||||
onSwiper(e) {
|
||||
this.categoryCurrent = e.detail.current;
|
||||
},
|
||||
// 路由跳转
|
||||
routerTo(item) {
|
||||
this.$yrouter.push(item.uniapp_url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 产品分类
|
||||
.y-f {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-category-box {
|
||||
padding: 30rpx 30rpx 0 30rpx;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.menu-category-box,
|
||||
.menu-swiper-box {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
.menu-swiper-item {
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.menu-tab-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.tab-list {
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
padding-bottom: 30rpx;
|
||||
|
||||
.tab-img {
|
||||
border-radius: 25rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-category-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 20rpx;
|
||||
|
||||
.category-dot {
|
||||
width: 40rpx;
|
||||
height: 3rpx;
|
||||
background: #eeeeee;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.category-dot-active {
|
||||
width: 40rpx;
|
||||
height: 3rpx;
|
||||
background: #a8700d;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+205
-27
@@ -1,36 +1,214 @@
|
||||
<template>
|
||||
<view class="promotionGood" v-if="benefit.length > 0">
|
||||
<view class="item acea-row row-between-wrapper" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex" @click="routerGo(item)">
|
||||
<view class="pictrue"><image :src="item.image" class="image" /></view>
|
||||
<view class="text">
|
||||
<view class="name line1">{{ item.storeName }}</view>
|
||||
<view class="sp-money acea-row">
|
||||
<view class="moneyCon">
|
||||
促销价: ￥
|
||||
<text class="num">{{ item.price }}</text>
|
||||
<view>
|
||||
<view class="sh-title-card mb10">
|
||||
<view class="title-box">
|
||||
<image class="title-bg" src="@/static/images/title1.png" mode="aspectFill"></image>
|
||||
<view class="title-text">为你推荐</view>
|
||||
<!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> -->
|
||||
</view>
|
||||
</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 class="acea-row row-between-wrapper">
|
||||
<view class="money">日常价：￥{{ item.otPrice }}</view>
|
||||
<view>仅剩：{{ item.stock }}{{ item.unitName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'PromotionGood',
|
||||
props: ['benefit'],
|
||||
data: function() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
routerGo(item) {
|
||||
this.$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } });
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
export default {
|
||||
name: 'PromotionGood',
|
||||
props: ['benefit'],
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
routerGo(item) {
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/GoodsCon/index',
|
||||
query: {
|
||||
id: item.id
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sh-title-card {
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
width: 710rpx;
|
||||
height: 88rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
border-radius: 30rpx;
|
||||
|
||||
.title-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
width: 345rpx;
|
||||
background: #fff;
|
||||
padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.img-box {
|
||||
width: 345rpx;
|
||||
height: 345rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.tag-img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
width: 80rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 345rpx;
|
||||
height: 345rpx;
|
||||
background-color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
width: 346rpx;
|
||||
line-height: 56rpx;
|
||||
background: rgba(246, 242, 234, 1);
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(168, 112, 13, 1);
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
line-height: 36rpx;
|
||||
height: 72rpx;
|
||||
margin: 20rpx 20rpx 10rpx;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
padding: 10rpx 20rpx 0;
|
||||
width: 344rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.sales {
|
||||
font-size: 20rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
line-height: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.current {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(225, 33, 43, 1);
|
||||
line-height: 30rpx;
|
||||
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>
|
||||
|
||||
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<view class="sp-live-card" :style="{ width: wh + 'rpx' }">
|
||||
<view class="live-content" @tap="goRoom" :style="{ width: wh + 'rpx' }">
|
||||
<image class="item-cover" :src="detail.shareImge" mode="aspectFill"></image>
|
||||
<view class="item-status">
|
||||
<image class="status-img" :src="liveStatus[detail.liveStatus].img" mode=""></image>
|
||||
<text class="status-text">{{ liveStatus[detail.liveStatus].title }}</text>
|
||||
</view>
|
||||
<view class="item-title" :style="{ width: wh + 'rpx' }">{{ detail.name }}</view>
|
||||
<!-- <image v-if="detail.liveStatus == 101" class="like-img" src="http://Shop.7wpp.com/imgs/live/zan.gif" mode=""></image> -->
|
||||
</view>
|
||||
<view class="live-bottom" :style="{ width: wh + 'rpx' }">
|
||||
<view class="live-info">
|
||||
<view class="info-box">
|
||||
<!-- <image class="info-avatar" :src="detail.anchor_img" mode=""></image> -->
|
||||
<view class="info-name">{{ detail.anchorName }}</view>
|
||||
</view>
|
||||
<!-- <text class="views">15W观看</text> -->
|
||||
</view>
|
||||
<slot name="liveGoods">
|
||||
<view class="live-goods" v-if="detail.product.length">
|
||||
<view class="live-goods__item" v-for="(goods, index) in detail.product" :key="goods.goodsId"
|
||||
v-if="index < 3">
|
||||
<image class="live-goods__img" :src="goods.coverImgeUrl" mode=""></image>
|
||||
<view class="live-goods__price" v-if="index < 2">￥{{ goods.price }}</view>
|
||||
<view class="live-goods__mark" v-else>
|
||||
<text>{{ detail.product.length }}+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
dataFormatL
|
||||
} from "@/utils";
|
||||
let HAS_LIVE = false
|
||||
// #ifdef MP-WEIXIN
|
||||
HAS_LIVE = true
|
||||
let livePlayer = null;
|
||||
if (HAS_LIVE) {
|
||||
livePlayer = requirePlugin('live-player-plugin');
|
||||
}
|
||||
// #endif
|
||||
let timer = null;
|
||||
export default {
|
||||
name: 'shopLiveCard',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
liveStatus: {
|
||||
'101': {
|
||||
img: 'https://wx.yixiang.co/static/images/live.png',
|
||||
title: '直播中'
|
||||
},
|
||||
'102': {
|
||||
img: 'https://wx.yixiang.co/static/images/prevue.png',
|
||||
title: '未开始'
|
||||
},
|
||||
'103': {
|
||||
img: 'https://wx.yixiang.co/static/images/playback.png',
|
||||
title: '已结束'
|
||||
},
|
||||
'104': {
|
||||
img: 'https://wx.yixiang.co/static/images/104.png',
|
||||
title: '禁播'
|
||||
},
|
||||
'105': {
|
||||
img: 'https://wx.yixiang.co/static/images/105.png',
|
||||
title: '暂停中'
|
||||
},
|
||||
'106': {
|
||||
img: 'https://wx.yixiang.co/static/images/106.png',
|
||||
title: '异常'
|
||||
},
|
||||
'107': {
|
||||
img: 'https://wx.yixiang.co/static/images/past.png',
|
||||
title: '已过期'
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
detail: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
wh: {
|
||||
type: Number,
|
||||
default: 345
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
created() {
|
||||
this.getLiveStatus();
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
timer = setInterval(() => {
|
||||
that.getLiveStatus();
|
||||
}, 60000);
|
||||
},
|
||||
beforeDestroy() {
|
||||
timer = null;
|
||||
},
|
||||
methods: {
|
||||
goRoom() {
|
||||
let that = this;
|
||||
wx.navigateTo({
|
||||
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${that.detail.roomId}`
|
||||
});
|
||||
},
|
||||
dateFormat(fmt, date) {
|
||||
let ret;
|
||||
const opt = {
|
||||
"Y+": date.getFullYear().toString(), // 年
|
||||
"m+": (date.getMonth() + 1).toString(), // 月
|
||||
"d+": date.getDate().toString(), // 日
|
||||
"H+": date.getHours().toString(), // 时
|
||||
"M+": date.getMinutes().toString(), // 分
|
||||
"S+": date.getSeconds().toString() // 秒
|
||||
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||||
};
|
||||
for (let k in opt) {
|
||||
ret = new RegExp("(" + k + ")").exec(fmt);
|
||||
if (ret) {
|
||||
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
||||
};
|
||||
};
|
||||
return fmt;
|
||||
},
|
||||
// 轮询liveStatus
|
||||
getLiveStatus() {
|
||||
if (HAS_LIVE) {
|
||||
let that = this;
|
||||
let date = '';
|
||||
if (that.detail.liveStatus == 102) {
|
||||
date = this.dateFormat('mm-dd HH:MM', new Date(that.detail.startTime * 1000)).replace('-','/');
|
||||
that.liveStatus['102'].title = '预告 ' + date;
|
||||
}
|
||||
// livePlayer
|
||||
// .getLiveStatus({
|
||||
// room_id: that.detail.roomId
|
||||
// })
|
||||
// .then(res => {
|
||||
// // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期
|
||||
// that.detail.liveStatus = res.liveStatus;
|
||||
// })
|
||||
// .catch(err => {
|
||||
// console.log('get live status', err);
|
||||
// });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sp-live-card {
|
||||
width: 344rpx;
|
||||
box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
|
||||
border-radius: 20rpx;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.live-content {
|
||||
position: relative;
|
||||
width: 344rpx;
|
||||
height: 344rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.item-cover {
|
||||
background-color: #eee;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.item-status {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 10rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.status-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
width: 345rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
line-height: 60rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background: linear-gradient(transparent, rgba(#000, 0.5));
|
||||
padding-right: 60rpx;
|
||||
}
|
||||
|
||||
.like-img {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
right: 10rpx;
|
||||
width: 60rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.live-bottom {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
width: 345rpx;
|
||||
|
||||
.live-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-avatar {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.info-name {
|
||||
width: 150rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.views {
|
||||
font-size: 20rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.live-goods {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border: 1rpx solid rgba(238, 238, 238, 1);
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 8rpx;
|
||||
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
background: #eee;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__price {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
line-height: 40rpx;
|
||||
width: 100%;
|
||||
background: linear-gradient(transparent, rgba(#000, 0.5));
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__mark {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background: rgba(#000, 0.3);
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+178
-165
@@ -29,19 +29,8 @@
|
||||
<view class="save-poster" @click="savePosterPath">生成图片</view>
|
||||
</view>-->
|
||||
<view class="poster-pop" v-show="canvasStatus">
|
||||
<img
|
||||
src="@/static/images/poster-close.png"
|
||||
class="close"
|
||||
@click="posterImageClose"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
:src="posterImage"
|
||||
alt="tp"
|
||||
class="poster-image"
|
||||
show-menu-by-longpress
|
||||
mode="widthFix"
|
||||
/>
|
||||
<img src="@/static/images/poster-close.png" class="close" @click="posterImageClose" mode="widthFix" />
|
||||
<image :src="posterImage" alt="tp" class="poster-image" show-menu-by-longpress mode="widthFix" />
|
||||
<view class="keep">长按图片可以保存到手机</view>
|
||||
</view>
|
||||
<view class="mask"></view>
|
||||
@@ -49,163 +38,187 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import html2canvas from "html2canvas";
|
||||
import { PosterCanvas } from "@/utils";
|
||||
import { getProductPoster } from "@/api/store";
|
||||
// import html2canvas from "html2canvas";
|
||||
import {
|
||||
PosterCanvas
|
||||
} from "@/utils";
|
||||
import {
|
||||
getProductPoster
|
||||
} from "@/api/store";
|
||||
|
||||
export default {
|
||||
name: "StorePoster",
|
||||
props: {
|
||||
posterImageStatus: Boolean,
|
||||
posterData: Object,
|
||||
goodId: String
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
canvasStatus: false,
|
||||
posterImage: ""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
posterImageStatus: function() {
|
||||
var that = this;
|
||||
if (that.posterImageStatus === true) {
|
||||
that.$nextTick(function() {
|
||||
that.savePosterPath();
|
||||
export default {
|
||||
name: "StorePoster",
|
||||
props: {
|
||||
posterImageStatus: Boolean,
|
||||
posterData: Object,
|
||||
goodId: String
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
canvasStatus: false,
|
||||
posterImage: ""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
posterImageStatus: function () {
|
||||
var that = this;
|
||||
if (that.posterImageStatus === true) {
|
||||
that.$nextTick(function () {
|
||||
that.savePosterPath();
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {},
|
||||
methods: {
|
||||
posterImageClose: function () {
|
||||
this.posterImageStatus = false;
|
||||
this.canvasStatus = false;
|
||||
this.$emit("setPosterImageStatus");
|
||||
},
|
||||
savePosterPath: function () {
|
||||
const that = this;
|
||||
|
||||
uni.showLoading({
|
||||
title: "海报生成中",
|
||||
mask: true
|
||||
});
|
||||
getProductPoster(this.goodId, {
|
||||
from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType
|
||||
})
|
||||
.then(res => {
|
||||
this.canvasStatus = true;
|
||||
this.posterImage = res.data;
|
||||
})
|
||||
.finally(() => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
// return;
|
||||
// //清空图片重新生成
|
||||
// that.posterImage = "";
|
||||
// uni.showLoading({ title: "海报生成中", mask: true });
|
||||
// console.log(this);
|
||||
// var prodId = that.$yrouter.currentRoute.query.id;
|
||||
// uni.downloadFile({
|
||||
// url:
|
||||
// this.$VUE_APP_API_URL +
|
||||
// "/shareImg/" +
|
||||
// prodId +
|
||||
// "?shareImgName=" +
|
||||
// this.posterData.code,
|
||||
// fail: function(res) {},
|
||||
// success: function(res) {
|
||||
// console.log(res);
|
||||
// that.canvasStatus = true;
|
||||
// that.posterImage = res.tempFilePath;
|
||||
// uni.hideLoading();
|
||||
// }
|
||||
// });
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function() {},
|
||||
methods: {
|
||||
posterImageClose: function() {
|
||||
this.posterImageStatus = false;
|
||||
this.canvasStatus = false;
|
||||
this.$emit("setPosterImageStatus");
|
||||
},
|
||||
savePosterPath: function() {
|
||||
const that = this;
|
||||
|
||||
uni.showLoading({ title: "海报生成中", mask: true });
|
||||
getProductPoster(this.goodId)
|
||||
.then(res => {
|
||||
this.canvasStatus = true;
|
||||
this.posterImage = res.data;
|
||||
})
|
||||
.finally(() => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
// return;
|
||||
// //清空图片重新生成
|
||||
// that.posterImage = "";
|
||||
// uni.showLoading({ title: "海报生成中", mask: true });
|
||||
// console.log(this);
|
||||
// var prodId = that.$yrouter.currentRoute.query.id;
|
||||
// uni.downloadFile({
|
||||
// url:
|
||||
// this.$VUE_APP_API_URL +
|
||||
// "/shareImg/" +
|
||||
// prodId +
|
||||
// "?shareImgName=" +
|
||||
// this.posterData.code,
|
||||
// fail: function(res) {},
|
||||
// success: function(res) {
|
||||
// console.log(res);
|
||||
// that.canvasStatus = true;
|
||||
// that.posterImage = res.tempFilePath;
|
||||
// uni.hideLoading();
|
||||
// }
|
||||
// });
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less" lang="less">
|
||||
.poster-first {
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
.poster-pop {
|
||||
width: 4.5 * 100rpx;
|
||||
height: 8 * 100rpx;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 99;
|
||||
top: 50%;
|
||||
margin-top: -4.6 * 100rpx;
|
||||
}
|
||||
.poster-pop .canvas {
|
||||
background-color: #ffffff;
|
||||
height: 8 * 100rpx;
|
||||
}
|
||||
.poster-pop .poster-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.poster-pop .canvas .image {
|
||||
width: 4.5 * 100rpx;
|
||||
height: 4.5 * 100rpx;
|
||||
display: block;
|
||||
}
|
||||
.poster-pop .canvas .text {
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
margin-top: 0.32 * 100rpx;
|
||||
}
|
||||
.poster-pop .canvas .text.black {
|
||||
height: 0.68 * 100rpx;
|
||||
}
|
||||
.poster-pop .canvas .text.rad {
|
||||
color: #ff0000;
|
||||
}
|
||||
.poster-pop .canvas .code {
|
||||
height: 1.4 * 100rpx;
|
||||
display: flex;
|
||||
}
|
||||
.poster-pop .canvas .code .code-img {
|
||||
width: 33%;
|
||||
padding: 0.06 * 100rpx;
|
||||
}
|
||||
.poster-pop .canvas .code .code-img image {
|
||||
width: 100%;
|
||||
}
|
||||
.poster-pop .canvas .code .code-text {
|
||||
width: 60%;
|
||||
font-size: 0.12 * 100rpx;
|
||||
line-height: 1.64 * 100rpx;
|
||||
}
|
||||
.poster-pop .close {
|
||||
width: 0.46 * 100rpx;
|
||||
height: 0.75 * 100rpx;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: -0.73 * 100rpx;
|
||||
display: block;
|
||||
}
|
||||
.poster-pop .save-poster {
|
||||
background-color: #df2d0a;
|
||||
font-size: 0.22 * 100rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
height: 0.76 * 100rpx;
|
||||
line-height: 0.76 * 100rpx;
|
||||
width: 100%;
|
||||
margin-top: -0.04 * 100rpx;
|
||||
}
|
||||
.poster-pop .keep {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 0.25 * 100rpx;
|
||||
margin-top: 0.1 * 100rpx;
|
||||
}
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
z-index: 9;
|
||||
}
|
||||
.poster-first {
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.poster-pop {
|
||||
width: 4.5 * 100rpx;
|
||||
height: 8 * 100rpx;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 99;
|
||||
top: 50%;
|
||||
margin-top: -4.6 * 100rpx;
|
||||
}
|
||||
|
||||
.poster-pop .canvas {
|
||||
background-color: #ffffff;
|
||||
height: 8 * 100rpx;
|
||||
}
|
||||
|
||||
.poster-pop .poster-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.poster-pop .canvas .image {
|
||||
width: 4.5 * 100rpx;
|
||||
height: 4.5 * 100rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.poster-pop .canvas .text {
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
margin-top: 0.32 * 100rpx;
|
||||
}
|
||||
|
||||
.poster-pop .canvas .text.black {
|
||||
height: 0.68 * 100rpx;
|
||||
}
|
||||
|
||||
.poster-pop .canvas .text.rad {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.poster-pop .canvas .code {
|
||||
height: 1.4 * 100rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.poster-pop .canvas .code .code-img {
|
||||
width: 33%;
|
||||
padding: 0.06 * 100rpx;
|
||||
}
|
||||
|
||||
.poster-pop .canvas .code .code-img image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.poster-pop .canvas .code .code-text {
|
||||
width: 60%;
|
||||
font-size: 0.12 * 100rpx;
|
||||
line-height: 1.64 * 100rpx;
|
||||
}
|
||||
|
||||
.poster-pop .close {
|
||||
width: 0.46 * 100rpx;
|
||||
height: 0.75 * 100rpx;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: -0.73 * 100rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.poster-pop .save-poster {
|
||||
background-color: #df2d0a;
|
||||
font-size: 0.22 * 100rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
height: 0.76 * 100rpx;
|
||||
line-height: 0.76 * 100rpx;
|
||||
width: 100%;
|
||||
margin-top: -0.04 * 100rpx;
|
||||
}
|
||||
|
||||
.poster-pop .keep {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 0.25 * 100rpx;
|
||||
margin-top: 0.1 * 100rpx;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
z-index: 9;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,50 +1,52 @@
|
||||
<template>
|
||||
<view class="evaluateWtapper">
|
||||
<view
|
||||
class="evaluateItem"
|
||||
v-for="(item, evaluateWtapperIndex) in reply"
|
||||
:key="evaluateWtapperIndex"
|
||||
>
|
||||
<view class="pic-text acea-row row-middle">
|
||||
<view class="pictrue">
|
||||
<image :src="item.avatar" class="image" />
|
||||
<view class="evaluateWtapper" v-if="reply&&reply.length>0">
|
||||
<view v-for="(item, evaluateWtapperIndex) in reply" :key="evaluateWtapperIndex">
|
||||
<view class="evaluateItem" v-if="item">
|
||||
<view class="pic-text acea-row row-middle">
|
||||
<view class="pictrue">
|
||||
<image :src="item.avatar" class="image" />
|
||||
</view>
|
||||
<view class="acea-row row-middle">
|
||||
<view class="name line1">{{ item.nickname }}</view>
|
||||
<view class="start" :class="'star' + item.star"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="acea-row row-middle">
|
||||
<view class="name line1">{{ item.nickname }}</view>
|
||||
<view class="start" :class="'star' + item.star"></view>
|
||||
<view class="time">{{ item.createTime }} {{ item.sku||'' }}</view>
|
||||
<view class="evaluate-infor">{{ item.comment }}</view>
|
||||
<view class="imgList acea-row">
|
||||
<view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq">
|
||||
<image :src="itemn" class="image" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time">{{ item.createTime }} {{ item.sku||'' }}</view>
|
||||
<view class="evaluate-infor">{{ item.comment }}</view>
|
||||
<view class="imgList acea-row">
|
||||
<view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq">
|
||||
<image :src="itemn" class="image" />
|
||||
<view class="reply" v-if="item.merchantReplyContent">
|
||||
<span class="font-color-red">yshop店员</span>
|
||||
：{{item.merchantReplyContent}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="reply" v-if="item.merchantReplyContent">
|
||||
<span class="font-color-red">yshop店员</span>
|
||||
：{{item.merchantReplyContent}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { dataFormat } from "@/utils";
|
||||
|
||||
export default {
|
||||
name: "UserEvaluation",
|
||||
props: {
|
||||
reply: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {};
|
||||
},
|
||||
mounted: function() {},
|
||||
methods: {
|
||||
import {
|
||||
dataFormat
|
||||
}
|
||||
};
|
||||
} from "@/utils";
|
||||
|
||||
export default {
|
||||
name: "UserEvaluation",
|
||||
props: {
|
||||
reply: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
mounted: function () {
|
||||
console.log(this)
|
||||
},
|
||||
methods: {
|
||||
dataFormat
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<view class="min-goods" @tap="jump('/pages/activity/GroupDetails/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.sales }}{{detail.unitName}}</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, query) {
|
||||
this.$yrouter.push({
|
||||
path,
|
||||
query
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -0,0 +1,256 @@
|
||||
<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:\/\/wx.yixiang.co\/static\/images\/index001.png",
|
||||
"name": "",
|
||||
"path": "/pages/user/coupon/GetCoupon/index",
|
||||
"path_name": "优惠券",
|
||||
"path_type": 1
|
||||
}, {
|
||||
"image": "https:\/\/wx.yixiang.co\/static\/images\/index002.png",
|
||||
"name": "",
|
||||
"path": "/pages/shop/GoodsList/index",
|
||||
"path_name": "商品",
|
||||
"path_type": 1
|
||||
}, {
|
||||
"image": "https:\/\/wx.yixiang.co\/static\/images\/index003.png",
|
||||
"name": "",
|
||||
"path": "/pages/user/signIn/Integral/index",
|
||||
"path_name": "积分",
|
||||
"path_type": 1
|
||||
}],
|
||||
"name": "",
|
||||
"style": 3
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {
|
||||
// 路由跳转
|
||||
jump(path) {
|
||||
this.$yrouter.push({
|
||||
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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user