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

富文本处理、细节优化

master
gongfuxiang 2021-11-17 22:57:34 +08:00
parent 5a87b2562a
commit e9377a9156
7 changed files with 81 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
pages/article-detail/article-detail.vue
View File

@ -5,16 +5,16 @@
<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>时间：</text>
<text>{{data.add_time}}</text>
</view>
<view class="fr">
<text class="margin-left-xxxl">浏览次数：</text>
<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">
<view class="padding-main border-radius-main bg-white oh spacing-mb">
<rich-text :nodes="data.content"></rich-text>
</view>
<view v-if="(last_next || null) != null" class="last-next-data spacing-mb">
@ -35,7 +35,8 @@
</view>
</template>
<script>
const app = getApp();
const app = getApp();
import htmlParser from '../../common/js/lib/html-parser.js';
import componentNoData from "../../components/no-data/no-data";
import componentBottomLine from "../../components/bottom-line/bottom-line";
@ -114,16 +115,20 @@
uni.hideLoading();
uni.stopPullDownRefresh();
var data = res.data.data;
if (res.data.code == 0 && (data.data || null) != null) {
if (res.data.code == 0 && (data.data || null) != null) {
var article = data.data;
if((article.content || null) != null) {
article['content'] = htmlParser(article.content);
}
this.setData({
data_bottom_line_status: true,
data_list_loding_status: 3,
data: data.data,
data: article,
last_next: data.last_next || null
});
// 标题
uni.setNavigationBarTitle({title: data.data.title});
uni.setNavigationBarTitle({title: article.title});
} else {
this.setData({
data_list_loding_status: 0,

19
pages/goods-category/goods-category.css
View File

@ -2,19 +2,20 @@
* 导航搜索、内容区域
*/
.nav-search {
padding-right: 240rpx;
padding-right: 250rpx;
/* #ifdef MP-ALIPAY */
padding-right: 255rpx;
/* #endif */
padding-bottom: 10px;
}
.category-content {
position: relative;
height: calc(100vh - 65px);
height: calc(100vh - 68px);
}
/**
* 左侧导航
*/
.left-nav {
background: #fff;
width: 210rpx;
height: 100%;
overflow-x: hidden;
@ -25,8 +26,6 @@
line-height: 100rpx;
font-size: 32rpx;
padding: 0 10rpx;
text-align: center;
color: #666;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
overflow: hidden;
@ -49,20 +48,15 @@
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
right: 0;
background: #f5f5f5;
}
.one-vice-name {
font-weight: bold;
}
.content-item {
display: -webkit-inline-box;
width: calc(33.33% - 20rpx);
}
.content-item .content {
margin: 0 auto;
padding: 15rpx 0;
}
.content-item .text {
@ -73,9 +67,6 @@
width: 100%;
height: 120rpx;
}
.model-one {
padding: 10rpx;
}
.model-one .content-item:nth-child(3n) {
border-right: 0;
}

16
pages/goods-category/goods-category.vue
View File

@ -1,18 +1,18 @@
<template>
<view>
<!-- 搜索框 -->
<view class="nav-search padding-horizontal-main bg-white" :style="'padding-top:'+(status_bar_height+5)+'px;'">
<view class="nav-search padding-horizontal-main bg-white" :style="'padding-top:'+(status_bar_height+8)+'px;'">
<component-search propPlaceholder="输入商品名称搜索"></component-search>
</view>
<!-- 分类内容 -->
<view v-if="data_list.length > 0" class="category-content" :style="'height:calc(100vh - '+(status_bar_height+45)+'px);'">
<view v-if="data_list.length > 0" class="category-content pr" :style="'height:calc(100vh - '+(status_bar_height+48)+'px);'">
<block v-if="category_show_level == 1">
<!-- 一级模式 -->
<view class="model-one oh">
<view class="model-one padding-sm oh">
<block v-for="(v, index) in data_list" :key="index">
<view class="content-item padding-sm tc" :data-value="v.id" @tap="category_event">
<view class="content bg-white wh-auto border-radius-main">
<view class="content auto bg-white wh-auto border-radius-main">
<image v-if="(v.icon || null) != null" :src="v.icon" mode="aspectFit" class="icon radius"></image>
<view class="text single-text">{{v.name}}</view>
</view>
@ -22,19 +22,19 @@
</block>
<block v-else>
<!-- 一级内导航 -->
<view class="left-nav">
<view class="left-nav bg-white">
<block v-for="(item, index) in data_list" :key="index">
<view :class="'items ' + (item.active || '')" :data-index="index" @tap="nav_event">
<view :class="'items tc cr-base ' + (item.active || '')" :data-index="index" @tap="nav_event">
<text>{{item.name}}</text>
</view>
</block>
</view>
<view class="right-container">
<view class="right-container pa">
<!-- 一级内基础容 -->
<view v-if="(data_content || null) != null" class="right-content padding-top-main padding-left-main padding-right-main">
<!-- 一级基础信息 -->
<view v-if="(data_content.vice_name || null) != null || (data_content.describe || null) != null" class="one-content bg-white padding-main border-radius-main spacing-mb" :data-value="data_content.id" @tap="category_event">
<view v-if="(data_content.vice_name || null) != null" class="one-vice-name text-size" :style="'color:' + data_content.bg_color + ';'">{{data_content.vice_name}}</view>
<view v-if="(data_content.vice_name || null) != null" class="text-size fw-b" :style="'color:' + data_content.bg_color + ';'">{{data_content.vice_name}}</view>
<view v-if="(data_content.describe || null) != null" class="cr-grey margin-top-sm">{{data_content.describe}}</view>
</view>
<!-- 一二级数据渲染 -->

59
pages/goods-detail/goods-detail.vue
View File

@ -262,19 +262,17 @@
<!-- 是否详情展示相册 -->
<block v-if="common_is_goods_detail_show_photo == 1 && goods_photo.length > 0">
<view v-for="(item, index) in goods_photo" :key="index" class="goods-detail-photo">
<image v-if="(item.images || null) != null" @tap="goods_detail_images_view_event" :data-value="item.images" class="wh-auto dis-block" :src="item.images" mode="widthFix">
</image>
<image v-if="(item.images || null) != null" @tap="goods_detail_images_view_event" :data-value="item.images" class="wh-auto dis-block" :src="item.images" mode="widthFix"></image>
</view>
</block>
<!-- web详情 -->
<view v-if="common_app_is_use_mobile_detail == 0">
<rich-text :nodes="goods.content_web || ''"></rich-text>
<view v-if="common_app_is_use_mobile_detail == 0" class="padding-main">
<rich-text :nodes="goods.content_web"></rich-text>
</view>
<!-- 手机独立详情 -->
<block v-if="common_app_is_use_mobile_detail == 1 && goods_content_app.length > 0">
<view v-for="(item, index) in goods_content_app" :key="index" class="goods-detail-app">
<image v-if="(item.images || null) != null" @tap="goods_detail_images_view_event" :data-value="item.images" class="wh-auto dis-block" :src="item.images" mode="widthFix">
</image>
<image v-if="(item.images || null) != null" @tap="goods_detail_images_view_event" :data-value="item.images" class="wh-auto dis-block" :src="item.images" mode="widthFix"></image>
<view v-if="(item.content || null) != null" class="content-items">
<view v-for="(items, index2) in item.content" :key="index2">{{items}}</view>
</view>
@ -501,9 +499,9 @@
<component-quick-nav :propIsNav="true"></component-quick-nav>
</view>
</template>
<script>
const app = getApp();
import htmlParser from '../../common/js/lib/html-parser.js';
import componentQuickNav from "../../components/quick-nav/quick-nav";
import componentPopup from "../../components/popup/popup";
import componentBadge from "../../components/badge/badge";
@ -765,28 +763,33 @@
uni.hideLoading();
if (res.data.code == 0) {
var data = res.data.data;
var goods = data.goods;
// 富文本转nodes数组
if((goods.content_web || null) != null) {
goods['content_web'] = htmlParser(goods.content_web);
}
this.setData({
data_bottom_line_status: true,
data_list_loding_status: 3,
goods: data.goods,
indicator_dots: data.goods.photo.length > 1,
autoplay: data.goods.photo.length > 1,
goods_photo: data.goods.photo,
goods: goods,
indicator_dots: goods.photo.length > 1,
autoplay: goods.photo.length > 1,
goods_photo: goods.photo,
nav_more_list: data.nav_more_list || [],
goods_specifications_choose: data.goods.specifications.choose || [],
goods_content_app: data.goods.content_app || [],
buy_number: data.goods.buy_min_number || 1,
goods_specifications_choose: goods.specifications.choose || [],
goods_content_app: goods.content_app || [],
buy_number: goods.buy_min_number || 1,
nav_favor_button_info: {
"text": (data.goods.is_favor == 1 ? '已' : '') + '收藏',
"status": data.goods.is_favor
"text": (goods.is_favor == 1 ? '已' : '') + '收藏',
"status": goods.is_favor
},
buy_button: data.buy_button || null,
top_nav_title_data: data.middle_tabs_nav || [],
goods_spec_base_price: data.goods.price,
goods_spec_base_original_price: data.goods.original_price,
goods_spec_base_inventory: data.goods.inventory,
goods_spec_base_images: data.goods.images,
show_field_price_text: data.goods.show_field_price_text == '价格' ? null : data.goods.show_field_price_text.replace(/<[^>]+>/g, "") || null,
goods_spec_base_price: goods.price,
goods_spec_base_original_price: goods.original_price,
goods_spec_base_inventory: goods.inventory,
goods_spec_base_images: goods.images,
show_field_price_text: goods.show_field_price_text == '价格' ? null : goods.show_field_price_text.replace(/<[^>]+>/g, "") || null,
plugins_seckill_data: data.plugins_seckill_data || null,
plugins_seckill_is_valid: (data.plugins_seckill_data || null) != null && (data.plugins_seckill_data.is_valid || 0) == 1 ? 1 : 0,
plugins_coupon_data: data.plugins_coupon_data || null,
@ -800,15 +803,15 @@
// 好物分享
this.setData({
share_product: {
'item_code': data.goods.id.toString(),
'title': data.goods.title,
'image_list': data.goods.photo.map(function(v) {
'item_code': goods.id.toString(),
'title': goods.title,
'image_list': goods.photo.map(function(v) {
return v.images;
}),
'desc': data.goods.simple_desc,
'category_list': data.goods.category_names || [],
'src_mini_program_path': '/pages/goods-detail/goods-detail?goods_id=' + data.goods.id,
'brand_info.name': data.goods.brand_name,
'desc': goods.simple_desc,
'category_list': goods.category_names || [],
'src_mini_program_path': '/pages/goods-detail/goods-detail?goods_id=' + goods.id,
'brand_info.name': goods.brand_name,
}
});

4
pages/index/index.css
View File

@ -43,12 +43,14 @@
*/
.article-list .left-content {
width: calc(25% - 40rpx);
height: 68rpx;
line-height: 68rpx;
}
.article-list .right-content {
width: calc(75% - 30rpx);
}
.article-list .right-content swiper {
height: 38rpx;
height: 28rpx;
}
/**

16
pages/index/index.vue
View File

@ -34,13 +34,13 @@
<!-- 推荐文章 -->
<view v-if="article_list.length > 0" class="article-list border-radius-main bg-main oh br-main spacing-mb">
<view class="left-content fl text-size-sm va-m tc fw-b cr-white padding-top-lg padding-bottom-lg padding-horizontal-main" data-value="/pages/article-category/article-category" @tap="url_event">商城资讯</view>
<view class="left-content fl text-size-sm va-m tc fw-b cr-white padding-horizontal-main" data-value="/pages/article-category/article-category" @tap="url_event">商城资讯</view>
<view class="right-content fr bg-white va-m padding-left-lg padding-vertical-main">
<swiper :vertical="true" :autoplay="true" :circular="true" display-multiple-items="1" interval="3000">
<block v-for="(item, index) in article_list" :key="index">
<swiper-item class="single-text">
<text class="cr-base" :data-value="item.category_url" @tap="url_event">[{{item.article_category_name}}]</text>
<text class="margin-left-xs cr-base" :style="(item.title_color || null) != null ? 'color:'+item.title_color+' !important;' : ''" :data-value="item.url" @tap="url_event">{{item.title}}</text>
<text class="cr-base text-size-sm" :data-value="item.category_url" @tap="url_event">[{{item.article_category_name}}]</text>
<text class="cr-base text-size-sm margin-left-xs" :style="(item.title_color || null) != null ? 'color:'+item.title_color+' !important;' : ''" :data-value="item.url" @tap="url_event">{{item.title}}</text>
</swiper-item>
</block>
</swiper>
@ -338,7 +338,7 @@
// 名称
application_title: app.globalData.data.application_title,
// 顶部+搜索样式配置
top_content_style: 'background-image: url("'+static_url+'nav-top.png");'+'padding-top:'+(parseInt(app.globalData.get_system_info('statusBarHeight'))+5)+'px;',
top_content_style: 'background-image: url("'+static_url+'nav-top.png");'+'padding-top:'+(parseInt(app.globalData.get_system_info('statusBarHeight'))+8)+'px;',
search_style: '',
search_is_fixed: 0,
// 限时秒杀插件
@ -505,8 +505,12 @@
// 页面滚动监听
onPageScroll(e) {
var top = e.scrollTop > 35 ? 35 : e.scrollTop;
var num = top*7;
var val = (num > 220) ? 220 : num;
var num = top*7;
var base = 230;
// #ifdef MP-ALIPAY
base = 235
// #endif
var val = (num > base) ? base : num;
this.setData({
search_style: 'width: calc(100% - '+val+'rpx);',
search_is_fixed: (top >= 35) ? 1 : 0,

19
pages/plugins/blog/detail/detail.vue
View File

@ -5,16 +5,16 @@
<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>时间：</text>
<text>{{data.add_time}}</text>
</view>
<view class="fr">
<text class="margin-left-xxxl">浏览次数：</text>
<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">
<view class="padding-main border-radius-main bg-white oh spacing-mb">
<rich-text :nodes="data.content"></rich-text>
</view>
@ -67,7 +67,8 @@
</view>
</template>
<script>
const app = getApp();
const app = getApp();
import htmlParser from '../../../../common/js/lib/html-parser.js';
import componentNoData from "../../../../components/no-data/no-data";
import componentBottomLine from "../../../../components/bottom-line/bottom-line";
@ -162,17 +163,21 @@
uni.hideLoading();
uni.stopPullDownRefresh();
var data = res.data.data;
if (res.data.code == 0 && (data.data || null) != null) {
if (res.data.code == 0 && (data.data || null) != null) {
var blog = data.data;
if((blog.content || null) != null) {
blog['content'] = htmlParser(blog.content);
}
this.setData({
data_bottom_line_status: true,
data_list_loding_status: 3,
data_base: data.base || null,
data: data.data,
data: blog,
right_list: data.right_list || []
});
// 标题
uni.setNavigationBarTitle({title: data.data.title});
uni.setNavigationBarTitle({title: blog.title});
} else {
this.setData({
data_list_loding_status: 0,