yunshangxie/pages/index/pizz.vue

165 lines
6.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view style="background-color: #EBF4F7;letter-spacing: 1rpx;min-height: 100vh;">
<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-center">
<view class="tn-margin-top" style="text-align: center;">
<text>发现</text>
</view>
</view>
</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}"
style="background-color: #ffffff;padding-bottom: 10rpx;">
<view style="padding:0rpx 20rpx">
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin"
style="background-color: #ffffff;">
<view class="justify-content-item align-content-item" style="width: 100%;">
<view class="tn-flex tn-flex-col-center"
style="border-radius: 100rpx;padding: 15rpx 20rpx;width: 100%;background-color:#F1F2F8;">
<text
class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
<input v-model="content" class="justify-content-item" placeholder="请输入协会名称进行搜索" name="input"
placeholder-style="color:#AAAAAA" style="width: 90%;"></input>
</view>
</view>
<!-- <view>
<view class="justify-content-item tn-text-center">
<tn-button backgroundColor="#3668fc" shape="round" padding="20rpx 20rpx" width="150rpx"
@click="onsubmit()">
<text class="tn-color-white">搜 索</text>
</tn-button>
</view>
</view> -->
</view>
</view>
<!-- <view class="tn-flex tn-flex-row-around tn-flex-center tn-flex-col-center" style="padding: 30rpx;">-->
<!-- <view style="color: #E15033;">-->
<!-- <text class="tn-icon-sequence-vertical" style="vertical-align: middle;"></text>-->
<!-- <text style="margin-left: 15rpx;vertical-align: middle;">全部排序</text>-->
<!-- </view>-->
<!-- <view style="height: 25rpx;width: 2rpx;background-color: #808080;"></view>-->
<!-- <view>-->
<!-- <text class="tn-icon-first" style="vertical-align: middle;"></text>-->
<!-- <text style="margin-left: 15rpx;vertical-align: middle;">人气榜</text>-->
<!-- </view>-->
<!-- <view style="height: 25rpx;width: 2rpx;background-color: #808080;"></view>-->
<!-- <view>-->
<!-- <text class="tn-icon-light" style="vertical-align: middle;"></text>-->
<!-- <text style="margin-left: 15rpx;vertical-align: middle;">最新入驻</text>-->
<!-- </view>-->
<!-- </view>-->
</view>
<!-- <view class="tn-flex tn-flex-row-between tn-flex-center tn-flex-col-center" style="padding: 30rpx;">-->
<!-- <view style="text-align: center;background-color: #FFF;padding:10rpx 30rpx;width: 48%;border-radius: 5rpx;">-->
<!-- <text>省协会</text>-->
<!-- <text class="tn-icon-down-triangle"></text>-->
<!-- </view>-->
<!-- <view style="text-align: center;background-color: #FFF;padding:10rpx 30rpx;width: 48%;border-radius: 5rpx;">-->
<!-- <text>市协会</text>-->
<!-- <text class="tn-icon-down-triangle"></text>-->
<!-- </view>-->
<!-- </view>-->
<view style="padding:20rpx 30rpx 180rpx 30rpx;">
<view style="position: relative;" @click="tn('/pages/index/pizz_info?id='+item.id)">
<view class="tn-flex tn-flex-center tn-flex-col-center"
style="box-shadow: 0rpx 4rpx 25rpx 0rpx rgba(5,171,129,0.25);background: linear-gradient(to bottom,rgba(19,194,150,0.7) 0%, #13C296 100%);padding:40rpx 30rpx;border-radius: 30rpx;margin-bottom: 20rpx;">
<view>
<image :src="apiImgUrl+item.association_image"
style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
</view>
<view style="margin-left: 20rpx;">
<view style="color:#ffffff;font-size: 32rpx;font-weight: 600;">洛阳市总商会
</view>
<view style="font-size: 28rpx;color: rgba(255,255,255,0.6);margin-top: 15rpx;">成立时间2021-10-01
</view>
</view>
</view>
<view
style="font-size: 20rpx;color: #09AE85;background-color: #B8EDE0;position: absolute;top: 0;right: 0;border-radius: 0px 15rpx 0px 15rpx;padding:10rpx 10rpx;">
<text class="tn-icon-success-circle-fill" style="vertical-align: middle;"></text>
<text style="vertical-align: middle;margin-left: 5rpx;">已认证</text>
</view>
</view>
<view v-for="(item,index) in list" style="position: relative;"
@click="tn('/pages/index/pizz_info?id='+item.id)">
<view class="tn-flex tn-flex-center tn-flex-col-center"
style="background-color: #ffffff;padding:60rpx 30rpx;border-radius: 15rpx;margin-bottom: 20rpx;">
<view>
<image :src="apiImgUrl+item.association_image"
style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
</view>
<view style="margin-left: 20rpx;">
<view style="font-size: 31rpx;font-weight: 600;letter-spacing: 5rpx;">{{item.association_name}}
</view>
<view style="font-size: 24rpx;color: #808080;margin-top: 15rpx;">成立时间:{{item.createtime}}</view>
</view>
</view>
<view
style="font-size: 20rpx;color: #43A9F8;background-color: #CAE5FF;position: absolute;top: 0;right: 0;border-radius: 0px 15rpx 0px 15rpx;padding:10rpx 10rpx;">
<text class="tn-icon-success-circle-fill" style="vertical-align: middle;"></text>
<text style="vertical-align: middle;margin-left: 5rpx;">已认证</text>
</view>
</view>
</view>
<!-- <view style="position: fixed;bottom: 13%;width: 100%;">-->
<!-- <view @click="tn('/pages/index/enter_in')"-->
<!-- style="margin: 0 auto;color: #fff;letter-spacing: 10rpx;line-height: 70rpx;;text-align: center;width: 70%;height: 70rpx;background: linear-gradient(270deg, #EE7E45, #EE9657);border-radius: 50rpx;">-->
<!-- 快速入驻</view>-->
<!-- </view>-->
</view>
</template>
<script>
import {
associationIndex
} from '@/util/api.js';
import store from '@/store/index.js'
export default {
data() {
return {
topCurrent: 0,
list: [],
apiImgUrl: this.$store.state.imgUrl,
content: ''
}
},
mounted() {
this.getAssociationIndex();
},
methods: {
onsubmit() {
this.page = 1;
this.list = [];
this.getAssociationIndex();
},
getAssociationIndex() {
associationIndex({
association_name: this.content
})
.then(res => {
console.log(res);
if (res.code == 1) {
this.list.push(...res.data);
}
})
.catch(error => {
uni.showToast({
title: error,
icon: 'none',
duration: 2000
});
})
},
tn(e) {
uni.navigateTo({
url: e
})
}
}
}
</script>
<style>
</style>