瑶都万能墙
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.
 
 
 

147 lines
2.6 KiB

<template>
<view>
<view class="createDetail">
<!-- 添加内容 -->
<view @click="open">
<uv-icon size="40rpx" color="#fff" name="plus"></uv-icon>
</view>
<!-- 联系我们 -->
<view>
<button @click="$emit('customerServiceOpen')">
<uv-icon size="40rpx"
color="#fff"
name="server-man"></uv-icon>
</button>
</view>
<!-- 积分规则 -->
<view>
<button @click="$emit('integralDetailsOpen')">
<uv-icon size="40rpx"
color="#fff"
name="question-circle"></uv-icon>
</button>
</view>
</view>
<uv-popup ref="createDetailPopup" :round="30">
<view class="createDetailPopup">
<view class="" :key="index" @click="clickItem(item)" v-for="(item, index) in createDetail">
<image :src="item.image" style="width: 90rpx;height: 90rpx;" mode="aspectFill"></image>
<view class="info">
<view class="title">
{{ item.name }}
</view>
<view class="desc">
{{ item.context }}
</view>
</view>
<view class="icon">
<uv-icon size="30rpx" name="arrow-right"></uv-icon>
</view>
</view>
</view>
</uv-popup>
</view>
</template>
<script>
export default {
components : {
},
data() {
return {
createDetail: [],
}
},
created() {
this.getData()
},
methods: {
open(){
if(!uni.getStorageSync('token')){
uni.navigateTo({
url: '/pages_order/auth/wxLogin'
})
return
}
this.$refs.createDetailPopup.open('bottom')
},
getData() {
this.$api('getPublishList', res => {
if (res.code == 200) {
this.createDetail = res.result
}
})
},
clickItem(item) {
this.$utils.navigateTo(item.url)
this.$refs.createDetailPopup.close()
},
}
}
</script>
<style scoped lang="scss">
.createDetail {
position: fixed;
top: 60vh;
right: 50rpx;
z-index: 999;
button{
all : unset;
}
button::after{
all : unset;
}
&>view{
width: 100rpx;
height: 100rpx;
background-color: $uni-color;
border-radius: 50rpx;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 10rpx 10rpx rgba(#000, 0.1);
margin-bottom: 30rpx;
}
}
.createDetailPopup {
padding: 20rpx;
background-color: #ffffff;
&>view {
display: flex;
align-items: center;
padding: 24rpx;
background-color: #f7f7f7;
margin: 20rpx;
border-radius: 20rpx;
image {
width: 100rpx;
height: 100rpx;
margin-right: 20rpx;
}
.info {
.title {
font-size: 30rpx;
}
.desc {
font-size: 24rpx;
}
}
.icon {
margin-left: auto;
}
}
}
</style>