chenkainan
/
flavorOfTimeSz
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

dev_delivery
jiazhipeng 1 month ago
parent
ceafa2a812
commit
3298713b8e
1 changed files with 207 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 241
      subPackages/pointsMall/index.vue

241
subPackages/pointsMall/index.vue
View File

@ -29,10 +29,7 @@
<view :class="['sign-btn', !isSign?'active':'']">
点击签到
</view>
<view>
<image src="https://static.ticket.sz-trip.com/uploads/20250917/c7aa588b22b5710fcf61f5c109153157.png"></image>
</view>
</view>
<view class="product-box">
@ -56,7 +53,46 @@
</view>
</view>
</view>
<view class="flex">
<scroll-view class="type-box no-scrollbar" :scroll-into-view="scrollView"
enable-flex scroll-x scroll-with-animation :show-scrollbar="false">
<view :id="`scroll${i}`" :class="['type-item',typeIndex==i?'active':'']" v-for="(type,i) in typeList"
:key="i" @click="changeType(item,i)">
{{type.title}}
</view>
</scroll-view>
<view class="search-box flex-between">
<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/c7aa588b22b5710fcf61f5c109153157.png"></image>
<text style="height: 100%;">搜索</text>
</view>
</view>
<view class="prod-box2">
<view class="jx-item" v-for="(item,i) in JXList" :key="i">
<image class="jx-head-image" :src="showImg(item.headimg)" mode="aspectFill"></image>
<view class="jx-content" >
<view class="title text-overflowRows">{{item.title}}</view>
<view style="font-weight: 500;font-size: 24rpx;color: #999999;">已兑14100件</view>
<view class="flex-between">
<view class="flex-between">
<text class="price" style="padding-right: 6rpx;">{{item.price}}</text>
<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image>
</view>
<view class="btn">兑换</view>
</view>
</view>
</view>
</view>
</view>
<uni-popup ref="signPop" type="center">
<view class="signPop">
<image class="close-pop" src="https://static.ticket.sz-trip.com/uploads/20250918/730cffbd6032bad9e6f87d4a5f20724b.png"></image>
<view class="sign-content">+5</view>
</view>
</uni-popup>
</view>
</template>
@ -77,6 +113,19 @@
{num:7, active:false},
],
JXList: [],
typeIndex:0,
scrollView: "scroll0",
typeList: [
{title:"分类",value:"",},
{title:"分类",value:"",},
{title:"分类",value:"",},
{title:"分类",value:"",},
{title:"分类",value:"",},
{title:"分类",value:"",},
{title:"分类",value:"",},
{title:"分类",value:"",},
],
}
},
onReady () {
@ -95,11 +144,25 @@
this.JXList = res.data.list
})
},
changeType (item,index) {
if (index == this.typeIndex) {
return
}
this.typeIndex = index;
let i = (index-1)>0?(index-1):0;
this.scrollView = "scroll"+i;
},
},
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.bg{
width: 750rpx;
min-height: 100vh;
@ -253,43 +316,153 @@
padding: 22rpx 0 80rpx;
display: flex;
flex-wrap: nowrap;
overflow-y: auto;
.jx-item{
overflow-x: auto;
}
.jx-item{
width: 253rpx;
font-weight: bold;
font-size: 31rpx;
color: #000000;
margin-right: 25rpx;
flex-shrink: 0;
.jx-content{
width: 100%;
height: 150rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.jx-head-image{
width: 253rpx;
height: 253rpx;
border-radius: 13rpx;
}
.price{
font-weight: bold;
font-size: 31rpx;
font-size: 32rpx;
color: #FB2A54;
}
.btn{
width: 93rpx;
height: 47rpx;
background: #FB2A54;
border-radius: 23rpx;
font-weight: bold;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
line-height: 47rpx;
}
}
.type-box{
display: flex;
flex-wrap: nowrap;
width: 1px;
flex: 1;
padding-right: 43rpx;
.type-item{
margin: 0 26rpx;
position: relative;
font-weight: 500;
font-size: 35rpx;
color: #000000;
margin-right: 25rpx;
flex-shrink: 0;
.jx-content{
width: 100%;
height: 150rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.jx-head-image{
width: 253rpx;
height: 253rpx;
border-radius: 13rpx;
}
.price{
height: 46rpx;
&.active{
font-weight: bold;
font-size: 32rpx;
color: #FB2A54;
font-size: 35rpx;
color: #6E3D1D;
}
.btn{
width: 93rpx;
height: 47rpx;
background: #FB2A54;
border-radius: 23rpx;
font-weight: bold;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
line-height: 47rpx;
&.active:after {
display: block;
width: 60%;
font-size: 0;
content: '1';
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: -6rpx;
height: 5rpx;
background: #6E3D1D;
}
}
.type-item:first-of-type{
margin-left: 0;
}
}
.search-box{
width: 110rpx;
flex-shrink: 0;
font-weight: 500;
font-size: 32rpx;
color: #6E3D1D;
height: 46rpx;
}
.prod-box2{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.jx-item{
width: 333rpx;
margin-right: 0;
margin-bottom: 40rpx;
}
.jx-content{
width: 100%;
height: 180rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.jx-head-image{
width: 100%;
height: 333.33rpx;
border-radius: 13rpx;
}
.price{
font-weight: bold;
font-size: 32rpx;
color: #FB2A54;
}
.btn{
width: 93rpx;
height: 47rpx;
background: #FB2A54;
border-radius: 23rpx;
font-weight: bold;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
line-height: 47rpx;
}
}
.signPop{
width: 100%;
height: 809.33rpx;
background-image: url("https://static.ticket.sz-trip.com/uploads/20250918/07ba19980d9fe9b934097ce01a14a085.png");
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.sign-content{
width: 400.67rpx;
height: 400.67rpx;
background-image: url("https://static.ticket.sz-trip.com/uploads/20250918/6832749da7b1aa0795f8389539ed7ecd.png");
background-size: 100% 100%;
font-weight: bold;
font-size: 64rpx;
color: #FB2A54;
}
.close-pop{
width: 34rpx;
height: 34rpx;
}
}
</style>
Write Preview
Loading…
Cancel
Save