123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363 |
- <template>
- <view class="integral">
- <!-- 标题栏 -->
- <view class="nav">
- <image src="http://t9.9026.com/imgs/integralbg.png" style="width: 100%; height: 100%;"></image>
- <view class="PointsColumn">
- <image src="/static/icon/integralicon.png"></image>
- <text>{{userIntegral}}</text>
- </view>
- <view class="titletext">
- <view class="textitem" @click="gointegralRecord">
- <image src="/static/icon/integralrecord.png"></image>
- <text>积分记录</text>
- </view>
- <view class="textitem" @click="goMyorder">
- <image src="/static/icon/lament.png"></image>
- <text>我的兑换</text>
- </view>
- <view class="textitem" @click="gointegralRule">
- <image src="/static/icon/integralrule.png"></image>
- <text>积分规则</text>
- </view>
- </view>
- </view>
-
- <!-- 占位 -->
- <view style="width: 100%; height: 238rpx; "></view>
-
-
- <!-- 积分商品 -->
- <view class="shopList">
- <view class="listTop">
- <text>积分兑换</text>
- </view>
- <view class="ListContent">
- <!-- <view :class="item.short?'[contentItemShort,contentItem]':'[contentItemLong,contentItem]'" v-for="item in integralList" @click="goIntegralDetail(item.id)" >
- <image :src="item.cover_img?item.cover_img:'http://t9.9026.com/imgs/loginBg.png'" ></image>
- <view class="itemName">{{item.name}}</view>
- <view class="itemPrice">{{item.integral}}积分</view>
- </view> -->
- <view class="home-hotel-img-content">
-
- <view @click="goIntegralDetail(item.id)" class="home-hotel-img-content-item" v-for="(item,index) in integralList" :key="index"
- :style="{marginTop:item.marginTop || 0 }" >
- <image class="home-hotel-img-content-item-img"
- :class="item.short?'home-hotel-img-content-item-img': 'home-hotel-img-content-item-img-long' "
- :src="item.cover_img" mode=""></image>
- <view class="text">
- <text class="text-top">{{item.name}}</text>
- <text class="text-main">{{item.hotel.name}}</text>
- </view>
- </view>
-
- </view>
- </view>
-
- <!-- 触底 -->
- <view class="home-bottom">
- <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
- </view>
-
- </view>
- </view>
- </template>
- <script>
-
- export default{
- data(){
- return{
- // 用户积分
- userIntegral:0,
- // 组件uni-load-more
- status: 'noMore',
- contentText: {
- contentdown: '查看更多',
- contentrefresh: '加载中',
- contentnomore: '—— 已经到底啦 ——'
- },
- // 积分产品列表
- integralList:[],
- arr:[],
-
- }
- },
- onLoad() {
- this.getProductList()
- console.log(this.$store.getters.userInfo)
- this.userIntegral=this.$store.getters.userInfo.integral
- },
- methods:{
- // 获取积分产品列表
- getProductList(){
- this.$api.product.getProducts({
- page:0,
- type:2,
- }).then(res=>{
- console.log(res,"积分产品")
- if(res.code==0){
- this.integralList=res.data.data
- this.shortLong()
- }
- })
- },
-
- shortLong() {
- this.integralList.forEach((item, index, arr) => {
- if (index % 4 === 0) {
- item.short = true
- }
- if (index % 4 === 1) {
- item.long = true
- }
- if (index % 4 === 2) {
- item.long = true
- item.marginTop = -68 + "rpx"
- }
- if (index % 4 === 3) {
- item.short = true
- }
- })
- console.log(this.goodsList);
- },
-
-
-
- // 跳转积分规则
- gointegralRule(){
- uni.navigateTo({
- url:'/pages/my/integral/integralRule'
- })
- },
- // 跳转积分记录
- gointegralRecord(){
- uni.navigateTo({
- url:'/pages/my/integral/integralRecord'
- })
- },
- // 跳转积分产品详情
- goIntegralDetail(id){
- uni.navigateTo({
- url:`/pages/goods/goods-detail/index?id=${id}&type=2`
- })
- },
- // 跳转订单记录
- goMyorder(){
- uni.navigateTo({
- url:'/pages/my/myorders/orders'
- })
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- $pageColor:#F9F9F9;
- $bgColor:#FFFFFF;
- // flex布局居中对齐
- @mixin flexlayout {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .integral{
- height: 100%;
- background:$bgColor ;
- }
- .home-bottom {
- background-color: #FFF;
- padding-bottom: 84rpx;
- }
- .nav{
- width: 100%;
- height: 238rpx;
- position: fixed;
- z-index: 100;
- background-color: #F9F9F9;
- .PointsColumn{
- position: absolute;
- width: 690rpx;
- border-radius: 8rpx;
- height: 74rpx;
- background: #FFFFFF;
- border-radius: $bgColor;
- left:30rpx;
- top:32rpx;
- display: flex;
- align-items: center;
- image{
- margin-left: 30rpx;
- width: 46rpx;
- height: 46rpx;
- }
- text{
- margin-left: 16rpx;
- font-size: 48rpx;
- font-family: DINAlternate-Bold, DINAlternate;
- font-weight: 500;
- color: #333333;
- }
- }
- .titletext{
- position: absolute;
- bottom:30rpx;
- left: 30rpx;
- width: 690rpx;
- height: 74rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .textitem{
- display: flex;
- align-items: center;
- image{
- width: 44rpx;
- height: 44rpx;
- }
- text{
- margin-left: 8rpx;
- font-size: 30rpx;
- font-family: PingFang-SC-Bold, PingFang-SC;
- font-weight: bold;
- color: $bgColor;
- }
- }
- }
- }
- .shopList{
- padding-top: 24rpx;
- width: 100%;
- background: $bgColor;
- border-radius: 16rpx 16rpx 0px 0px;
- padding: 0 30rpx;
- box-sizing: border-box;
- padding-top: 32rpx;
- .listTop{
- @include flexlayout;
- margin-bottom: 40rpx;
- text{
- font-size: 36rpx;
- font-family: PingFang-SC-Bold, PingFang-SC;
- font-weight: bold;
- color: #333333;
- }
- }
- .ListContent{
-
- .home-hotel-img-content {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- flex-wrap: wrap;
-
- .home-hotel-img-content-item {
- width: 332rpx;
- background: #FFFFFF;
- box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
- border-radius: 12rpx;
- margin-bottom: 26rpx;
-
- .home-hotel-img-content-item-img {
- width: 332rpx;
- height: 332rpx;
- object-fit: cover;
- object-position: center;
- }
-
- .home-hotel-img-content-item-img-long {
- width: 332rpx;
- height: 400rpx;
- object-fit: cover;
- object-position: center;
- }
-
- .text {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
- padding: 18rpx 22rpx 32rpx;
-
- .text-top {
- font-size: 28rpx;
- font-weight: bold;
- color: #333;
- }
-
- .text-main {
- margin-top: 20rpx;
- font-size: 24rpx;
- color: #999999;
- }
- }
- }
- }
- }
-
- // display: flex;
- // flex-wrap: wrap;
- // .contentItemShort{
- // width: 332rpx;
- // background: $bgColor;
- // box-sizing: border-box;
- // box-shadow: 0px 4rpx 8rpx 0px rgba(0,0,0,0.04);
- // border-radius: 12rpx;
- // display: inline-block;
- // margin-bottom: 24rpx;
- // image{
- // width: 332rpx;
- // height: 332rpx;
- // }
- // .itemName{
- // margin:0 18rpx 20rpx 22rpx ;
- // font-size: 28rpx;
- // font-family: PingFang-SC-Bold, PingFang-SC;
- // font-weight: bold;
- // color: #333333;
- // overflow: hidden;
- // }
- // .itemPrice{
- // margin-left: 22rpx;
- // font-size: 28rpx;
- // font-family: PingFang-SC-Bold, PingFang-SC;
- // font-weight: bold;
- // color: #FF6200;
- // }
- // }
- // .contentItemLong{
- // width: 332rpx;
- // background: $bgColor;
- // box-sizing: border-box;
- // box-shadow: 0px 4rpx 8rpx 0px rgba(0,0,0,0.04);
- // border-radius: 12rpx;
- // margin-bottom: 24rpx;
- // display: inline-block;
- // clear: both;
- // image{
- // width: 332rpx;
- // height: 400rpx;
- // }
- // .itemName{
- // margin:0 18rpx 20rpx 22rpx ;
- // font-size: 28rpx;
- // font-family: PingFang-SC-Bold, PingFang-SC;
- // font-weight: bold;
- // color: #333333;
- // overflow: hidden;
- // }
- // .itemPrice{
- // margin-left: 22rpx;
- // font-size: 28rpx;
- // font-family: PingFang-SC-Bold, PingFang-SC;
- // font-weight: bold;
- // color: #FF6200;
- // }
- // }
- // .contentItem:nth-child(odd){
- // margin-right: 26rpx;
- // }
- // }
- }
- </style>
|