sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

适配博客插件

master
gongfuxiang 2021-11-14 21:44:03 +08:00
parent 0ce5f13b6b
commit 0b66783a14
6 changed files with 835 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
pages/plugins/blog/detail/detail.css Normal file
View File

@ -0,0 +1,27 @@
/**
* 推荐博文
*/
.blog-list .blog-img {
width: 200rpx !important;
height: 170rpx !important;
}
.blog-list .base {
width: calc(100% - 220rpx);
}
/**
* 商品
*/
.goods-list .item {
width: calc(50% - 10rpx);
}
.goods-list .item:nth-child(2n) {
float: right;
}
.goods-list .item:nth-child(2n+1) {
float: left;
}
.goods-list .item .goods-img {
width: 100%;
height: 380rpx !important;
}

199
pages/plugins/blog/detail/detail.vue Normal file
View File

@ -0,0 +1,199 @@
<template>
<view>
<view v-if="(data || null) != null" class="padding-horizontal-main padding-top-main">
<view class="padding-main border-radius-main bg-white spacing-mb">
<view class="fw-b text-size-xl">{{data.title}}</view>
<view class="cr-grey margin-top-lg oh br-t padding-top-main">
<view class="fl">
<text>发布时间：</text>
<text>{{data.add_time}}</text>
</view>
<view class="fr">
<text class="margin-left-xxxl">浏览次数：</text>
<text>{{data.access_count}}</text>
</view>
</view>
</view>
<view v-if="(data.content || null) != null" class="padding-main border-radius-main bg-white oh spacing-mb">
<rich-text :nodes="data.content"></rich-text>
</view>
<!-- 推荐博文 -->
<view v-if="right_list.length > 0" class="blog-list">
<view class="spacing-nav-title">
<text class="text-wrapper">推荐博文</text>
<navigator url="/pages/plugins/blog/search/search" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
</view>
<view v-for="(item, index) in right_list" class="item oh padding-main border-radius-main bg-white spacing-mb">
<navigator :url="item.url" hover-class="none">
<image class="blog-img fl radius" :src="item.cover" mode="aspectFill"></image>
<view class="base fr">
<view class="single-text">{{item.title}}</view>
<view class="cr-gray margin-top-sm">{{item.add_time_date_cn}}</view>
<view class="cr-grey multi-text margin-top-sm">{{item.describe}}</view>
</view>
</navigator>
</view>
</view>
<!-- 相关商品 -->
<view v-if="(data.goods_list || null) != null && data.goods_list.length > 0" class="goods-list oh">
<view class="spacing-nav-title">
<text class="text-wrapper">相关商品</text>
<navigator url="/pages/goods-search/goods-search" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
</view>
<view class="goods-list oh">
<view v-for="(item, index) in data.goods_list" :key="index" class="item padding-bottom-sm border-radius-main bg-white margin-bottom-main oh">
<navigator :url="'/pages/goods-detail/goods-detail?goods_id=' + item.id" hover-class="none">
<image class="goods-img dis-block" :src="item.images" mode="aspectFit"></image>
<view class="base padding-horizontal-main margin-top-sm">
<view class="multi-text">{{item.title}}</view>
<view class="price margin-top">
<text class="sales-price">{{currency_symbol}}{{item.min_price}}</text>
</view>
</view>
</navigator>
</view>
</view>
</view>
</view>
<view v-else>
<!-- 提示信息 -->
<component-no-data :prop-status="data_list_loding_status" :prop-msg="data_list_loding_msg"></component-no-data>
</view>
<!-- 结尾 -->
<component-bottom-line :prop-status="data_bottom_line_status"></component-bottom-line>
</view>
</template>
<script>
const app = getApp();
import componentNoData from "../../../../components/no-data/no-data";
import componentBottomLine from "../../../../components/bottom-line/bottom-line";
export default {
data() {
return {
data_list_loding_status: 1,
data_list_loding_msg: '',
data_bottom_line_status: false,
params: null,
data_base: null,
data: null,
right_list: [],
currency_symbol: app.globalData.data.currency_symbol
};
},
components: {
componentNoData,
componentBottomLine
},
props: {},
onLoad(params) {
// 启动参数处理
params = app.globalData.launch_params_handle(params);
this.setData({
params: params
});
// 初始化配置
this.init_config();
// 数据加载
this.get_data();
// 显示分享菜单
app.globalData.show_share_menu();
},
// 下拉刷新
onPullDownRefresh() {
this.get_data();
},
// 自定义分享
onShareAppMessage() {
var user_id = app.globalData.get_user_cache_info('id', 0) || 0;
var blog_id = this.params.id || 0;
return {
title: this.data.seo_title || this.data.title || app.globalData.data.application_title,
desc: this.data.seo_desc || app.globalData.data.application_describe,
path: '/pages/plugins/blog/detail/detail?id='+blog_id+'&referrer=' + user_id
};
},
// 分享朋友圈
onShareTimeline() {
var user_id = app.globalData.get_user_cache_info('id', 0) || 0;
var blog_id = this.params.id || 0;
return {
title: this.data.seo_title || this.data.title || app.globalData.data.application_title,
query: 'id='+blog_id+'&referrer=' + user_id
};
},
methods: {
// 初始化配置
init_config(status) {
if ((status || false) == true) {
this.setData({
currency_symbol: app.globalData.get_config('currency_symbol'),
});
} else {
app.globalData.is_config(this, 'init_config');
}
},
// 初始化
get_data() {
uni.showLoading({
title: "加载中..."
});
uni.request({
url: app.globalData.get_request_url("detail", "index", "blog"),
method: "POST",
data: {
id: this.params.id || 0,
},
dataType: "json",
success: res => {
uni.hideLoading();
uni.stopPullDownRefresh();
var data = res.data.data;
if (res.data.code == 0 && (data.data || null) != null) {
this.setData({
data_bottom_line_status: true,
data_list_loding_status: 3,
data_base: data.base || null,
data: data.data,
right_list: data.right_list || []
});
// 标题
uni.setNavigationBarTitle({title: data.data.title});
} else {
this.setData({
data_list_loding_status: 0,
data_list_loding_msg: res.data.msg
});
app.globalData.showToast(res.data.msg);
}
},
fail: () => {
uni.hideLoading();
uni.stopPullDownRefresh();
this.setData({
data_list_loding_status: 2
});
app.globalData.showToast("服务器请求出错");
}
});
}
}
};
</script>
<style>
@import './detail.css';
</style>

57
pages/plugins/blog/index/index.css Normal file
View File

@ -0,0 +1,57 @@
/*
* 分类
*/
.nav-list {
height: 38rpx;
line-height: 38rpx;
width: calc(100% - 155rpx);
}
/**
* 博客列表
*/
.blog-list .blog-img {
width: 200rpx !important;
height: 170rpx !important;
}
.blog-list .base {
width: calc(100% - 220rpx);
}
/*
* 博客滚动
*/
.hot-list swiper,
.hot-list .item .blog-img {
height: 180rpx !important;
}
.hot-list .item .blog-title {
left: 0;
bottom: 0;
width: calc(100% - 36rpx);
background-color: rgba(0,0,0,.5);
}
/**
* 推荐博文
*/
.right-list .item .blog-title {
width: calc(100% - 210rpx);
}
/**
* 商品
*/
.goods-list .item {
width: calc(50% - 10rpx);
}
.goods-list .item:nth-child(2n) {
float: right;
}
.goods-list .item:nth-child(2n+1) {
float: left;
}
.goods-list .item .goods-img {
width: 100%;
height: 380rpx !important;
}

243
pages/plugins/blog/index/index.vue Normal file
View File

@ -0,0 +1,243 @@
<template>
<view>
<view v-if="(data_base || null) != null">
<!-- 搜索框 -->
<view class="nav-search padding-horizontal-main padding-top-main">
<component-search prop-br-color="#efefef" prop-bg-color="#fff" prop-url="/pages/plugins/blog/search/search"></component-search>
</view>
<!-- 轮播 -->
<view v-if="slide_list.length > 0" class="padding-horizontal-main padding-top-main">
<component-banner :prop-data="slide_list"></component-banner>
</view>
<!-- 分类 -->
<view class="spacing-nav-title padding-horizontal-main">
<text class="text-wrapper va-m">所有博文</text>
<scroll-view v-if="(category || null) != null && category.length > 0" class="nav-list scroll-view-horizontal dis-inline-block oh va-m margin-left-sm" scroll-x="true">
<block v-for="(item, index) in category" :key="index">
<view class="item cr-base dis-inline-block padding-horizontal-main" :data-value="item.url" @tap="url_event">{{item.name}}</view>
</block>
</scroll-view>
</view>
<!-- 博文列表 -->
<view v-if="data_list.length > 0" class="blog-list padding-horizontal-main">
<view v-for="(item, index) in data_list" class="item oh padding-main border-radius-main bg-white spacing-mb">
<navigator :url="item.url" hover-class="none">
<image class="blog-img fl radius" :src="item.cover" mode="aspectFill"></image>
<view class="base fr">
<view class="single-text">{{item.title}}</view>
<view class="cr-gray margin-top-sm">{{item.add_time_date_cn}}</view>
<view class="cr-grey multi-text margin-top-sm">{{item.describe}}</view>
</view>
</navigator>
</view>
</view>
<!-- 热门博文-滚动 -->
<view v-if="hot_list.length > 0" class="padding-horizontal-main spacing-mb">
<view class="spacing-nav-title">
<text class="text-wrapper">热门博文</text>
<navigator url="/pages/plugins/blog/search/search" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
</view>
<view class="hot-list scroll-view-horizontal border-radius-main oh">
<swiper :vertical="false" :autoplay="(data_base.is_home_hot_auto_play || 0) == 1" :circular="true" :display-multiple-items="hot_list.length < 3 ? hot_list.length : 3" interval="3000">
<block v-for="(item, index) in hot_list" :key="index">
<swiper-item class="padding-right-main">
<view class="item bg-white border-radius-main oh pr ht-auto pr">
<navigator :url="item.url" hover-class="none">
<image class="blog-img dis-block wh-auto" :src="item.cover" mode="aspectFill"></image>
<view class="blog-title pa single-text cr-white padding-horizontal-main padding-top-sm padding-bottom-sm">{{item.title}}</view>
</navigator>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
<!-- 推荐博文 -->
<view v-if="right_list.length > 0" class="padding-horizontal-main spacing-mb">
<view class="spacing-nav-title">
<text class="text-wrapper">推荐博文</text>
<navigator url="/pages/plugins/blog/search/search" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
</view>
<view class="right-list padding-horizontal-main border-radius-main bg-white">
<block v-for="(item, index) in right_list" :key="index">
<view :class="'item padding-vertical-main oh '+(index > 0 ? 'br-t' : '')">
<navigator :url="item.url" hover-class="none">
<view class="blog-title single-text fl">{{item.title}}</view>
<text class="cr-grey fr">浏览{{item.access_count}}次</text>
</navigator>
</view>
</block>
</view>
</view>
<!-- 推荐商品 -->
<view v-if="goods_list.length > 0" class="goods-list oh padding-horizontal-main">
<view class="spacing-nav-title">
<text class="text-wrapper">推荐商品</text>
<navigator url="/pages/goods-search/goods-search" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
</view>
<view class="goods-list oh">
<view v-for="(item, index) in goods_list" :key="index" class="item padding-bottom-sm border-radius-main bg-white margin-bottom-main oh">
<navigator :url="'/pages/goods-detail/goods-detail?goods_id=' + item.id" hover-class="none">
<image class="goods-img dis-block" :src="item.images" mode="aspectFit"></image>
<view class="base padding-horizontal-main margin-top-sm">
<view class="multi-text">{{item.title}}</view>
<view class="price margin-top">
<text class="sales-price">{{currency_symbol}}{{item.min_price}}</text>
</view>
</view>
</navigator>
</view>
</view>
</view>
<!-- 结尾 -->
<component-bottom-line :prop-status="data_bottom_line_status"></component-bottom-line>
</view>
<view v-else>
<!-- 提示信息 -->
<component-no-data :prop-status="data_list_loding_status" :prop-msg="data_list_loding_msg"></component-no-data>
</view>
</view>
</template>
<script>
const app = getApp();
import componentSearch from "../../../../components/search/search";
import componentBanner from "../../../../components/slider/slider";
import componentCountdown from "../../../../components/countdown/countdown";
import componentNoData from "../../../../components/no-data/no-data";
import componentBottomLine from "../../../../components/bottom-line/bottom-line";
export default {
data() {
return {
data_bottom_line_status: false,
data_list_loding_status: 1,
data_list_loding_msg: '',
data_base: null,
category: [],
data_list: [],
slide_list: [],
goods_list: [],
hot_list: [],
right_list: [],
currency_symbol: app.globalData.data.currency_symbol
};
},
components: {
componentSearch,
componentBanner,
componentCountdown,
componentNoData,
componentBottomLine
},
props: {},
onLoad() {},
onShow() {
// 初始化配置
this.init_config();
// 获取数据
this.get_data();
// 显示分享菜单
app.globalData.show_share_menu();
},
// 下拉刷新
onPullDownRefresh() {
this.get_data();
},
// 自定义分享
onShareAppMessage() {
var user_id = app.globalData.get_user_cache_info('id', 0) || 0;
return {
title: this.data_base.seo_title || this.data_base.application_name || '博客 - ' + app.globalData.data.application_title,
desc: this.data_base.seo_desc || '博客 - ' + app.globalData.data.application_describe,
path: '/pages/plugins/blog/index/index?referrer=' + user_id
};
},
// 分享朋友圈
onShareTimeline() {
var user_id = app.globalData.get_user_cache_info('id', 0) || 0;
return {
title: this.data_base.seo_title || this.data_base.application_name || '博客 - ' + app.globalData.data.application_title,
query: 'referrer=' + user_id
};
},
methods: {
// 初始化配置
init_config(status) {
if ((status || false) == true) {
this.setData({
currency_symbol: app.globalData.get_config('currency_symbol'),
});
} else {
app.globalData.is_config(this, 'init_config');
}
},
// 获取数据
get_data() {
uni.request({
url: app.globalData.get_request_url("index", "index", "blog"),
method: "POST",
data: {},
dataType: "json",
success: res => {
uni.stopPullDownRefresh();
if (res.data.code == 0) {
var data = res.data.data;
this.setData({
data_base: data.base || null,
category: data.category || [],
data_list: data.data_list || [],
slide_list: data.slide_list || [],
goods_list: data.goods_list || [],
hot_list: data.hot_list || [],
right_list: data.right_list || [],
data_list_loding_msg: '',
data_list_loding_status: 0,
data_bottom_line_status: true
});
} else {
this.setData({
data_bottom_line_status: false,
data_list_loding_status: 2,
data_list_loding_msg: res.data.msg
});
}
},
fail: () => {
uni.stopPullDownRefresh();
this.setData({
data_bottom_line_status: false,
data_list_loding_status: 2,
data_list_loding_msg: '服务器请求出错'
});
app.globalData.showToast("服务器请求出错");
}
});
},
// url事件
url_event(e) {
app.globalData.url_event(e);
}
}
};
</script>
<style>
@import './index.css';
</style>

40
pages/plugins/blog/search/search.css Normal file
View File

@ -0,0 +1,40 @@
/**
* 搜索
*/
.search-keywords {
background: #f0f0f0;
}
.search-keywords icon {
position: absolute;
left: 30rpx;
top: calc(50% - 6px);
}
.search-keywords input {
font-size: 26rpx;
padding: 0 30rpx 0 76rpx;
box-sizing: border-box;
height: 30px;
line-height: 30px;
}
/**
* 分类导航
*/
.nav-list {
height: 80rpx;
line-height: 80rpx;
}
/**
* 数据列表
*/
.scroll-box {
height: calc(100vh - 100rpx - 30px);
}
.blog-list .blog-img {
width: 200rpx !important;
height: 170rpx !important;
}
.blog-list .base {
width: calc(100% - 220rpx);
}

269
pages/plugins/blog/search/search.vue Normal file
View File

@ -0,0 +1,269 @@
<template>
<view>
<view v-if="(data_base || null) != null">
<!-- 搜索关键字 -->
<view class="padding-horizontal-main padding-top-main bg-white">
<view class="search-keywords round pr">
<icon type="search" size="12"></icon>
<input type="text" confirm-type="search" placeholder="其实搜索很简单^_^ !" :value="search_keywords_value" @confirm="search_keywords_event" class="cr-base" placeholder-class="cr-grey">
</view>
</view>
<!-- 分类 -->
<scroll-view v-if="(category || null) != null && category.length > 0" class="nav-list scroll-view-horizontal bg-white oh" scroll-x="true">
<view :class="'item cr-gray dis-inline-block padding-horizontal-main ' + (nav_active_value == 0 ? 'cr-main' : '')" @tap="nav_event" data-value="0">全部</view>
<block v-for="(item, index) in category" :key="index">
<view :class="'item cr-gray dis-inline-block padding-horizontal-main ' + (nav_active_value == item.id ? 'cr-main' : '')" @tap="nav_event" :data-value="item.id">{{item.name}}</view>
</block>
</scroll-view>
<!-- 列表 -->
<scroll-view :scroll-y="true" class="scroll-box" @scrolltolower="scroll_lower" lower-threshold="30">
<view v-if="(data_list || null) != null && data_list.length > 0" class="blog-list padding-horizontal-main padding-top-main oh">
<view v-for="(item, index) in data_list" class="item oh padding-main border-radius-main bg-white spacing-mb">
<navigator :url="item.url" hover-class="none">
<image class="blog-img fl radius" :src="item.cover" mode="aspectFill"></image>
<view class="base fr">
<view class="single-text">{{item.title}}</view>
<view class="cr-gray margin-top-sm">{{item.add_time_date_cn}}</view>
<view class="cr-grey multi-text margin-top-sm">{{item.describe}}</view>
</view>
</navigator>
</view>
</view>
<view v-else>
<!-- 提示信息 -->
<component-no-data :prop-status="data_list_loding_status" :prop-msg="data_list_loding_msg"></component-no-data>
</view>
<!-- 结尾 -->
<component-bottom-line :prop-status="data_bottom_line_status"></component-bottom-line>
</scroll-view>
</view>
</view>
</template>
<script>
const app = getApp();
import componentNoData from "../../../../components/no-data/no-data";
import componentBottomLine from "../../../../components/bottom-line/bottom-line";
export default {
data() {
return {
data_list_loding_status: 1,
data_list_loding_msg: '',
data_bottom_line_status: false,
data_list: [],
data_total: 0,
data_page_total: 0,
data_page: 1,
params: null,
data_base: null,
category: [],
nav_active_value: 0,
search_keywords_value: ''
};
},
components: {
componentNoData,
componentBottomLine
},
props: {},
onLoad(params) {
// 启动参数处理
params = app.globalData.launch_params_handle(params);
this.setData({
params: params,
nav_active_value: params.id || 0,
search_keywords_value: params.keywords || '',
});
// 数据加载
this.get_data();
// 显示分享菜单
app.globalData.show_share_menu();
},
// 下拉刷新
onPullDownRefresh() {
this.setData({
data_page: 1
});
this.get_data_list(1);
},
// 自定义分享
onShareAppMessage() {
var user_id = app.globalData.get_user_cache_info('id', 0) || 0;
return {
title: this.data_base.seo_title || this.data_base.application_name || app.globalData.data.application_title,
desc: this.data_base.seo_desc || app.globalData.data.application_describe,
path: '/pages/plugins/blog/search/search?referrer=' + user_id+'&id=' +this.nav_active_value + '&keywords=' + this.search_keywords_value
};
},
// 分享朋友圈
onShareTimeline() {
var user_id = app.globalData.get_user_cache_info('id', 0) || 0;
return {
title: this.data_base.seo_title || this.data_base.application_name || app.globalData.data.application_title,
query: 'referrer=' + user_id+'&id='+this.nav_active_value + '&keywords=' + this.search_keywords_value
};
},
methods: {
// 初始化
get_data() {
uni.showLoading({
title: "加载中..."
});
uni.request({
url: app.globalData.get_request_url("index", "search", "blog"),
method: "POST",
data: {},
dataType: "json",
success: res => {
uni.hideLoading();
uni.stopPullDownRefresh();
if (res.data.code == 0) {
var data = res.data.data;
this.setData({
data_base: data.base || null,
category: data.category || []
});
// 获取列表数据
this.get_data_list(1);
} else {
this.setData({
data_list_loding_status: 0,
data_list_loding_msg: res.data.msg
});
app.globalData.showToast(res.data.msg);
}
},
fail: () => {
uni.hideLoading();
uni.stopPullDownRefresh();
this.setData({
data_list_loding_status: 2
});
app.globalData.showToast("服务器请求出错");
}
});
},
// 获取数据列表
get_data_list(is_mandatory) {
// 分页是否还有数据
if ((is_mandatory || 0) == 0) {
if (this.data_bottom_line_status == true) {
uni.stopPullDownRefresh();
return false;
}
}
// 加载loding
uni.showLoading({
title: "加载中..."
});
// 获取数据
uni.request({
url: app.globalData.get_request_url("datalist", "search", "blog"),
method: "POST",
data: {
page: this.data_page,
id: this.nav_active_value,
bwd: this.search_keywords_value
},
dataType: "json",
success: res => {
uni.hideLoading();
uni.stopPullDownRefresh();
if (res.data.code == 0) {
var data = res.data.data;
if (data.data.length > 0) {
if (this.data_page <= 1) {
var temp_data_list = data.data;
} else {
var temp_data_list = this.data_list;
var temp_data = data.data;
for (var i in temp_data) {
temp_data_list.push(temp_data[i]);
}
}
this.setData({
data_list: temp_data_list,
data_total: data.total,
data_page_total: data.page_total,
data_list_loding_status: 3,
data_page: this.data_page + 1
});
// 是否还有数据
this.setData({
data_bottom_line_status: (this.data_page > 1 && this.data_page > this.data_page_total)
});
} else {
this.setData({
data_list_loding_status: 0,
data_list_loding_msg: '没有相关数据'
});
if (this.data_page <= 1) {
this.setData({
data_list: [],
data_bottom_line_status: false
});
}
}
} else {
this.setData({
data_list_loding_status: 0,
data_list_loding_msg: res.data.msg
});
app.globalData.showToast(res.data.msg);
}
},
fail: () => {
uni.hideLoading();
uni.stopPullDownRefresh();
this.setData({
data_list_loding_status: 2
});
app.globalData.showToast("服务器请求出错");
}
});
},
// 滚动加载
scroll_lower(e) {
this.get_data_list();
},
// 导航事件
nav_event(e) {
this.setData({
nav_active_value: e.currentTarget.dataset.value || 0,
data_page: 1
});
this.get_data_list(1);
},
// 关键字输入事件
search_keywords_event(e) {
this.setData({
search_keywords_value: e.detail.value || '',
data_page: 1
});
this.get_data_list(1);
}
}
};
</script>
<style>
@import './search.css';
</style>