轮播图
<view class="price-content-style">
<view class="price-style">
￥350.00
</view>
<view class="content-style">
【官方正品】全新Dior迪奥烈焰蓝金唇膏红色传奇新色丝绒992548
</view>
</view>
<view class="btn-background">
<image @click="collection" v-if="collection_status==0" src="/static/collection.png" mode=""></image>
<image @click="collection" v-if="collection_status==1" src="/static/collection-two.png" mode=""></image>
<button style="background-color: #44f8ff;" type="default">立即试妆</button>
<button type="primary" @click="buyNow()" style="background-color: #FF7272;" >立即购买</button>
</view>
<uni-popup id="popupGoods" ref="popupGoods" type="share" @change="change">
<uni-popup-share title="选择类型" @select="select"></uni-popup-share>
</uni-popup>
</view>
</template>
<script>
var that;
export default {
data() {
return {
indicatorDots: true,
circular:true,
autoplay: true,
interval: 1500,
duration: 500,
indicatorColor:"#DD524D",
indicatorActiveColor: "#ffffff",
collection_status:0,
}
},
created(){
that = this;
},
onLoad() {
},
methods: {
collection(){
var collection_status = that.collection_status;
if(collection_status==0){
that.collection_status = 1
}else{
that.collection_status = 0
}
},
buyNow(){
this.$refs.popupGoods.open()
},
/**
* popup 状态发生变化触发
* @param {Object} e
*/
change(e) {
console.log('popup ' + e.type + ' 状态', e.show)
},
/**
* 选择内容
*/
select(e, done) {
uni.showToast({
title: `您选择了第${e.index+1}项：${e.item.text}`,
icon: 'none'
})
done()
},
}
}
</script>
<style>
.background-style{
width: 100%;
height:900px;
}
.background-style swiper{
width: 100%;
height: 700px;
}
.background-style swiper-item{
width: 100%;
}
.background-style image{
width: 100%;
height: 100%;
}
.price-content-style{
width: 100%;
height: 120px;
}
.price-style{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #FF7272;
font-weight: 800;
height: 100px;
}
.content-style{
width: 100%;
height: 50px;
display: flex;
justify-content: center;
color: #000000;
font-size: 16px;
}
.btn-background{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
bottom: 0;
position: absolute;
}
.btn-background image{
width: 7%;
height: 50%;
margin-left: 5%;
}
.background-style button{
width: 35%;
border-radius: 50px;
height: 55%;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
}
</style>
关注我的公众号SpaceObj 领取idea系列激活码
