Browse Source

有感商店

dev_xrcc
jiazhipeng 4 months ago
parent
commit
9473018662
  1. 6
      static/js/CommonFunction.js
  2. 112
      subPackages/haveFeeling/shopDetail.vue

6
static/js/CommonFunction.js

@ -87,11 +87,11 @@ Vue.prototype.IsCode = code => {
// 图片显示判断
Vue.prototype.showImg = img => {
if (!img) return;
let timeStamp = new Date().getTime()
if (img.indexOf('https://') != -1 || img.indexOf('http://') != -1) {
return img+"?timestamp="+timeStamp;
return img;
} else {
return Vue.prototype.NEWAPIURL + img +"?timestamp="+timeStamp;
return Vue.prototype.NEWAPIURL + img ;
}
}

112
subPackages/haveFeeling/shopDetail.vue

@ -2,17 +2,41 @@
<view class="bg">
<headerVue></headerVue>
<view class="banner-content">
<swiper class="top-banner" :circular="true" :interval="6000" :duration="800"
:indicator-dots="false" :autoplay="true" v-if="topBanner && topBanner.length > 0">
:indicator-dots="false" :autoplay="true" @change="swiperChange" >
<swiper-item v-for="(item, index) in topBanner" :key="index" @click.stop="gotoUrlNew(item)">
<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill" lazy-load="true"></image>
<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class="dot-container">
<view :class="['dot-line',index==swiperIndex?'active':'']" v-for="(item, index) in topBanner" :key="index"></view>
</view>
</view>
<image style="margin-top: 63rpx;" class="head-img" src="https://static.ticket.sz-trip.com/uploads/20250625/e3112c280ef9761af741907a737ef221.png"></image>
<view class="product-content">
<image class="head-img" src="https://static.ticket.sz-trip.com/uploads/20250625/e3112c280ef9761af741907a737ef221.png"></image>
<view class="product">
<view class="item" v-for="(item,i) in list" :key="item.goods.id">
<image class="item-img" :src="showImg(item.goods.image)"></image>
<view class="content">
<view class="title text-overflow">{{item.goods.title}}</view>
<view class="bottom">
<view class="price">{{item.goods.money/100}}</view>
<image src="https://static.ticket.sz-trip.com/epicSoul/readingBody/gwc.png" class="buy-cart"></image>
</view>
</view>
</view>
</view>
<image style="margin: 53rpx 0 35rpx;" class="head-img" src="https://static.ticket.sz-trip.com/uploads/20250625/e3112c280ef9761af741907a737ef221.png"></image>
<view class="img-container">
<image v-for="i in 3" :key="i" src="https://cgc.js-dyyj.com/uploads/20250619/839df8a6ffaa539b213551577b6fc388.png?timestamp=1750841365993"></image>
</view>
</view>
<CustomTabBar :currentTab="2" />
</view>
@ -25,13 +49,16 @@
components: {CustomTabBar,headerVue},
data() {
return {
topBanner: []
topBanner: [],
list: [],
swiperIndex: 0,
}
},
onLoad() {
},
onReady() {
this.getProduct()
this.getList()
},
@ -39,6 +66,10 @@
},
methods: {
swiperChange(e) {
this.swiperIndex = e.detail.current
},
viewDetail(item) {
if (item.url) {
uni.navigateTo({
@ -51,6 +82,16 @@
})
},
getProduct () {
this.Post({
tag_id: 45,
offset: 0,
limit: 3,
},'/api/tag/getGoodsByTagId').then(res => {
this.list = res.data;
})
},
getList() {
//
this.Post({
@ -110,14 +151,34 @@
.bg {
min-height: 100vh;
background: #FFFFFF;
padding-bottom: 200rpx;
}
.banner-content{
width: 100%;
height: 496.4rpx;
position: relative;
.top-banner {
width: 100%;
height: 100%;
}
.dot-container{
position: absolute;
bottom: 43rpx;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
left: 0;
.dot-line{
width: 52rpx;
height: 4rpx;
margin: 0 8rpx;
background: RGBA(189, 170, 173, 0.8);
&.active{
background: RGBA(255, 255, 255, 0.8);
}
}
}
}
.head-img{
@ -127,7 +188,48 @@
display: block;
}
.product-content{
padding: 0 26rpx;
padding: 63rpx 26rpx 0;
.product{
padding: 36rpx 0 0;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
.item{
width: 214.69rpx;
}
.item-img{
width: 214.69rpx;
height: 286.33rpx;
}
.content{
height: 80rpx;
padding: 0rpx 4rpx;
font-weight: 400;
font-size: 24rpx;
color: #000000;
}
.bottom{
display: flex;
padding-top: 13rpx;
justify-content: space-between;
align-items: center;
}
.buy-cart{
width: 28rpx;
height: 24rpx;
}
}
}
.img-container{
width: 100%;
image{
display: block;
width: 100%;
height: 314rpx;
border-radius: 40rpx;
margin-bottom: 20rpx;
}
}
</style>

Loading…
Cancel
Save