You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
189 lines
4.7 KiB
189 lines
4.7 KiB
<!-- 大礼包组件 -->
|
|
<template>
|
|
<view class="packages-container" :style="{'padding':isdiyPageStyle.margin+'px'}">
|
|
<view class="disCard1-box b-f dis-flex m-btm20 p-r" v-for="(giftItem,index) in giftList" :key="index" :class="!isdiyPage?'bor-radius-10upx':''"
|
|
:style="{padding:!isdiyPage?'20rpx':isdiyPageStyle.padding*2+'rpx'}" @click="navigateTo(giftItem['url'],giftItem)">
|
|
<view class="disCard1-left m-right20" style="padding-left: 20upx;">
|
|
<view>
|
|
<view class="dis-flex flex-x-between flex-y-center">
|
|
<view class="f-30 disCard1-store onelist-hidden" style="padding-bottom: 10upx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 320upx;">{{giftItem['name']}}</view>
|
|
<!-- <view class="f-24 col-9" v-if="!!giftItem['distance']" style="padding-bottom: 10upx;">{{giftItem['distance']}}</view> -->
|
|
</view>
|
|
<view class="f-24 disCard-notice-use twolist-hidden" style="color: #FF4444;">{{giftItem['newlimit']}} <text style="padding-left: 10upx;">当前剩余{{giftItem['surplus']}}次</text></view>
|
|
</view>
|
|
<!-- <view class="disCard-image" :style="{'background-image':'url('+giftItem['shop_logo']+')'}"></view> -->
|
|
<image :src="giftItem['shop_logo']" class="disCard-image" mode="aspectFill"></image>
|
|
<view class="dis-il-block f-28" style="vertical-align:top;line-height: 100upx;padding-left: 20upx;">
|
|
{{giftItem.storename}}
|
|
</view>
|
|
</view>
|
|
<view class="disCard1-right dis-flex flex-dir-column flex-x-between">
|
|
|
|
<view class="col-f4 f-24 t-r" style="margin-top: 20upx;">价值：¥<text class="f-36">{{giftItem['price']}}</text></view>
|
|
<view class="disCard-skip-btn col-f f-24 t-c p-r" style="margin-bottom: 20upx;" v-if="giftItem.use_where == 1">去使用</view>
|
|
<view class="disCard-skip-btns f-24 t-c p-r" style="margin-bottom: 20upx;color: #FFFFFF;width: 210upx;background-color: #999999;border: 2upx solid #999999;" v-if="giftItem.use_where == 0">当前等级无法使用</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import App from "@/common/js/app.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
components: {
|
|
|
|
},
|
|
props: {
|
|
giftData: {
|
|
type: Object,
|
|
default: function() {
|
|
return {}
|
|
}
|
|
},
|
|
giftData_two: {
|
|
type: Array,
|
|
default: function() {
|
|
return []
|
|
}
|
|
},
|
|
|
|
disType: {
|
|
type: Number,
|
|
default: function() {
|
|
return 1
|
|
}
|
|
},
|
|
isdiyPage: {
|
|
type: Boolean,
|
|
default: function() {
|
|
return false
|
|
}
|
|
},
|
|
isdiyPageStyle: {
|
|
type: Object,
|
|
default: function() {
|
|
return {}
|
|
}
|
|
},
|
|
isdiyPageParams: {
|
|
type: Object,
|
|
default: function() {
|
|
return {}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
giftList() {
|
|
return this.disType === 1 ? this.giftData['data'] : this.giftData_two
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
isUnfold_act(index) {
|
|
let _this = this,
|
|
giftDataInfo = _this.giftData.data || _this.giftData_two;
|
|
_this.$set(giftDataInfo[index], 'isUnfold', !giftDataInfo[index].isUnfold)
|
|
},
|
|
navigateTo(url,item) {
|
|
console.log(url);
|
|
// if(item.use_where == 0) return
|
|
App.navigationTo({
|
|
url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #F6F6F6;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.disCard1-box:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.disCard1-left {
|
|
.disCard-image {
|
|
width: 60upx;
|
|
height: 60upx;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 200upx 200upx;
|
|
flex-shrink: 0;
|
|
border-radius: 60upx;
|
|
margin-top: 20upx;
|
|
}
|
|
}
|
|
|
|
.disCard1-right {
|
|
flex: 1;
|
|
|
|
.disCard1-store {
|
|
width: 300upx;
|
|
}
|
|
|
|
.disCard-notice-use {
|
|
color: #bdbdbd;
|
|
}
|
|
|
|
.disCard2-notice-use {
|
|
width: 300upx;
|
|
}
|
|
|
|
.disCard-skip-btn {
|
|
position: absolute;
|
|
right: 20upx;
|
|
bottom: 24upx;
|
|
width: 130upx;
|
|
height: 50upx;
|
|
line-height: 50upx;
|
|
border-radius: 10upx;
|
|
// background-color: linear-gradient(direction, #FF8032, #ff4444);
|
|
background: -webkit-linear-gradient(right, #FF8032 , #ff4444); /* Safari 5.1 - 6.0 */
|
|
background: -o-linear-gradient(right, #FF8032 , #ff4444); /* Opera 11.1 - 12.0 */
|
|
background: -moz-linear-gradient(right, #FF8032 , #ff4444); /* Firefox 3.6 - 15 */
|
|
background: linear-gradient(right, #FF8032 , #ff4444); /* 标准的语法（必须放在最后） */
|
|
}
|
|
|
|
.disCard-skip-btns {
|
|
position: absolute;
|
|
right: 20upx;
|
|
bottom: 24upx;
|
|
width: 130upx;
|
|
height: 50upx;
|
|
line-height: 50upx;
|
|
border-radius: 10upx;
|
|
background-color: #999999;
|
|
}
|
|
|
|
.disCard2-skip {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 20upx;
|
|
}
|
|
|
|
.disCard2-skip-btn {
|
|
width: 70upx;
|
|
border-radius: 50%;
|
|
height: 70upx;
|
|
background: #d83a3a;
|
|
color: #FFF;
|
|
padding: 10upx;
|
|
}
|
|
}
|
|
</style>
|
|
|