This commit is contained in:
THK3121 2023-09-13 16:38:50 +08:00
parent d6ed529c56
commit 81f60ba8a1
2 changed files with 153 additions and 126 deletions

View File

@ -18,28 +18,33 @@
<view class="price"><text>{{item.spu && item.spu.price}}</text></view> <view class="price"><text>{{item.spu && item.spu.price}}</text></view>
<view class="buy-btn">立即购买</view> <view class="buy-btn">立即购买</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</view>
<view class='mask' style="height: 100vh;" catchtouchmove="true" :hidden='popup.show==false' @tap="closePopup">
</view> </view>
<view class='mask' catchtouchmove="true" :hidden='popup.show==false' @tap="closePopup"></view>
</view> </view>
</template> </template>
<script> <script>
import { goShopDetail } from '@/libs/order.js' import {
import { mapGetters } from "vuex"; goShopDetail
} from '@/libs/order.js'
import {
mapGetters
} from "vuex";
export default { export default {
computed:{ computed: {
...mapGetters(['viewColor']), ...mapGetters(['viewColor']),
}, },
props:{ props: {
list: { list: {
type: Array, type: Array,
default: [] default: []
@ -50,9 +55,9 @@
isHome: { isHome: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
data() { data() {
return { return {
popup: { popup: {
show: false show: false
@ -63,11 +68,12 @@
// //
closePopup() { closePopup() {
this.$set(this.popup, 'show', false); this.$set(this.popup, 'show', false);
this.$emit("closes")
}, },
showPopup() { showPopup() {
this.$set(this.popup, 'show', true); this.$set(this.popup, 'show', true);
}, },
goDetail(item){ goDetail(item) {
if (item.product_type === 1) { if (item.product_type === 1) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/activity/goods_seckill_details/index?id=${item.product_id}&time=${item.stop_time}&spid=${this.uid}` url: `/pages/activity/goods_seckill_details/index?id=${item.product_id}&time=${item.stop_time}&spid=${this.uid}`
@ -79,130 +85,150 @@
} else if (item.product_type === 0) { } else if (item.product_type === 0) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/goods_details/index?id=${item.product_id}&spid=${this.uid}` url: `/pages/goods_details/index?id=${item.product_id}&spid=${this.uid}`
}) })
}else if (item.product_type === 4) { } else if (item.product_type === 4) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/activity/combination_details/index?id=${item.activity_id}&spid=${this.uid}` url: `/pages/activity/combination_details/index?id=${item.activity_id}&spid=${this.uid}`
}) })
}else if (item.product_type === 40) { } else if (item.product_type === 40) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/activity/combination_status/index?id=${item.activity_id}&spid=${this.uid}` url: `/pages/activity/combination_status/index?id=${item.activity_id}&spid=${this.uid}`
}) })
} }
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container{ .container {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
left: 0; left: 0;
background-color: #ffffff; background-color: #ffffff;
z-index: 77; z-index: 77;
border-radius: 16rpx 16rpx 0 0; border-radius: 16rpx 16rpx 0 0;
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
transition: all .3s cubic-bezier(.25, .5, .5, .9); transition: all .3s cubic-bezier(.25, .5, .5, .9);
max-height: 1000rpx; max-height: 1000rpx;
&.on {
transform: translate3d(0, 0, 0); &.on {
} transform: translate3d(0, 0, 0);
.header{
position: relative;
padding: 40rpx 30rpx;
.title{
color: #282828;
font-size: 30rpx;
} }
.iconfont{
color: #8A8A8A; .header {
font-size: 28rpx; position: relative;
position: absolute; padding: 40rpx 30rpx;
top: 0;
right: 0; .title {
} color: #282828;
.icon-guanbi5 { font-size: 30rpx;
right: 20rpx; }
color: #8a8a8a;
font-size: 30rpx; .iconfont {
line-height: 30rpx; color: #8A8A8A;
top: 20rpx; font-size: 28rpx;
background-color: transparent; position: absolute;
font-weight: normal; top: 0;
} right: 0;
} }
scroll-view{
max-height: 800rpx; .icon-guanbi5 {
} right: 20rpx;
.main_count{ color: #8a8a8a;
padding: 0 30rpx 30rpx; font-size: 30rpx;
max-height: 800rpx; line-height: 30rpx;
overflow-y: scroll; top: 20rpx;
/* #ifndef MP */ background-color: transparent;
&.mb90{ font-weight: normal;
margin-bottom: 90rpx;
}
/* #endif */
.list{
margin-bottom: 40rpx;
height: auto;
flex-direction: row;
&:last-child{
margin-bottom: 0;
} }
} }
.pro_list{
display: flex; scroll-view {
flex-direction: row; max-height: 800rpx;
.picture,.image,uni-image{ }
width: 200rpx;
height: 200rpx; .main_count {
border-radius: 16rpx; padding: 0 30rpx 30rpx;
max-height: 800rpx;
overflow-y: scroll;
/* #ifndef MP */
&.mb90 {
margin-bottom: 90rpx;
} }
.info{
margin-left: 30rpx; /* #endif */
position: relative; .list {
.bottom{ margin-bottom: 40rpx;
display: flex; height: auto;
justify-content: space-between; flex-direction: row;
align-items: center;
width: 460rpx; &:last-child {
position: absolute; margin-bottom: 0;
left: 0;
bottom: 10rpx;
flex-direction: row;
} }
.name{ }
color: #282828;
font-size: 30rpx; .pro_list {
line-height: 45rpx; display: flex;
display: -webkit-box; flex-direction: row;
width: 460rpx;
.picture,
.image,
uni-image {
width: 200rpx;
height: 200rpx;
border-radius: 16rpx;
} }
.price{
color: var(--view-priceColor); .info {
font-size: 26rpx; margin-left: 30rpx;
font-weight: bold; position: relative;
flex-direction: row;
align-items: flex-end; .bottom {
text{ display: flex;
font-size: 34rpx; justify-content: space-between;
align-items: center;
width: 460rpx;
position: absolute;
left: 0;
bottom: 10rpx;
flex-direction: row;
}
.name {
color: #282828;
font-size: 30rpx;
line-height: 45rpx;
display: -webkit-box;
width: 460rpx;
}
.price {
color: var(--view-priceColor);
font-size: 26rpx;
font-weight: bold;
flex-direction: row;
align-items: flex-end;
text {
font-size: 34rpx;
}
}
.buy-btn {
color: #fff;
background: var(--view-theme);
border-radius: 28.04rpx 28.04rpx 28.04rpx 28.04rpx;
width: 154.21rpx;
height: 57.83rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 22rpx;
} }
} }
.buy-btn{
color: #fff;
background: var(--view-theme);
border-radius: 26rpx;
width: 140rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 22rpx;
}
} }
} }
} }
} </style>
</style>

View File

@ -1,8 +1,8 @@
<template> <template>
<view class='product-bg'> <view class='product-bg'>
<swiper :indicator-dots="indicatorDots" indicator-active-color="#e93323" :circular="circular" <swiper :indicator-dots="indicatorDots" indicator-active-color="#e93323" :circular="circular"
:interval="interval" :duration="duration"> :interval="interval" :duration="duration">
<block v-for="(item,index) in imgUrls" :key='index'> <block v-for="(item,index) in imgUrls" :key='index'>
<swiper-item> <swiper-item>
<image :src="item" class="slide-image" mode="aspectFit" /> <image :src="item" class="slide-image" mode="aspectFit" />
@ -12,7 +12,7 @@
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
</view> </view>
</template> </template>
@ -56,8 +56,7 @@
videoContext: '' videoContext: ''
}; };
}, },
created() { created() {},
},
watch: { watch: {
}, },
@ -83,7 +82,7 @@
// #ifdef APP-PLUS // #ifdef APP-PLUS
this.isPlay = false this.isPlay = false
this.videoContext = uni.createVideoContext('myVideo', this); this.videoContext = uni.createVideoContext('myVideo', this);
this.$nextTick(()=>{ this.$nextTick(() => {
this.videoContext.play(); this.videoContext.play();
}) })
// #endif // #endif
@ -102,13 +101,15 @@
height: 710rpx; height: 710rpx;
position: relative; position: relative;
} }
.product-bg swiper { .product-bg swiper {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
} }
.product-bg .slide-image { .product-bg .slide-image {
width: 100%; width: 100vw;
height: 100%; height: 100%;
border-radius: 16rpx; border-radius: 16rpx;
} }
@ -166,4 +167,4 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>