1255 lines
30 KiB
Vue
1255 lines
30 KiB
Vue
<template>
|
||
<view style="font-size: 28upx;padding-top: 75rpx;">
|
||
<view v-if="pageNum==1">
|
||
<view v-if="selected==1">
|
||
<view class="home_bg">
|
||
<view class="" style=" ">
|
||
<view class="icon_hua">
|
||
<image src="../../static/logo.png" mode="aspectFit" class="icon_hua_1"></image>
|
||
</view>
|
||
<!-- <view class="hehan">
|
||
<image src="../../static/icon/hehan.png" mode="aspectFit" class="icon_hua_1"></image>
|
||
</view> -->
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="head_line" style="background-color: #fff;">
|
||
<b></b>
|
||
<text>新书上市</text>
|
||
<!-- <i @click="onBookMore('New')">查看更多 ></i> -->
|
||
</view>
|
||
|
||
<view class="newBook">
|
||
<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="10"
|
||
style="margin-top: 0 !important;">
|
||
<view :class="['item']" v-for="(item,index) in newBookList" :key="index">
|
||
<view class="videoBox" @click="goDetail(item.productId)">
|
||
<image v-if="item.productImages != ''" :src="item.productImages" mode="scaleToFill">
|
||
</image>
|
||
<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill"></image>
|
||
</view>
|
||
<text class="bookName">{{item.productName}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
|
||
<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="0">
|
||
<view class="ProTabs">
|
||
<text v-for="item in tagList" :key="item.splId" :class="[tabsid == item.splId ? 'cur' :'']"
|
||
@click="tabsChange(item)">{{item.labelName}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 商品展示 -->
|
||
<view class="goods">
|
||
<!-- 精选 -->
|
||
<view class="">
|
||
<view v-if="tjProList.length > 0">
|
||
<view class="flexbox" style="flex-wrap: wrap;">
|
||
<view class="goodsItem" v-for="(item,index) in tjProList" :key="index"
|
||
@click="goDetail(item.productId)">
|
||
<image :src="item.productImages" mode="" class="goodsImg"></image>
|
||
<view class="goodsContent">
|
||
<view class="goodsName">
|
||
{{item.productName}}
|
||
</view>
|
||
<view class="goodsPrice">
|
||
<span class="price"
|
||
v-if="item.activityPrice && item.activityPrice > 0">￥{{item.activityPrice}}</span>
|
||
<span class="price" v-else>￥{{item.price}}</span>
|
||
<span class="Salesnum">已售：{{item.sumSales}} 件</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<view v-if="status==0" style="text-align: center;">
|
||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||
<font
|
||
style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>
|
||
努力加载中
|
||
</font>
|
||
</view>
|
||
<view v-if="status==1">
|
||
<u-divider text="全部加载完成"></u-divider>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-divider v-else text="暂无数据哦~"></u-divider>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view v-if="selected==4" style="padding: 0 40rpx;font-size: 28rpx;">
|
||
<view style="height: 50rpx;"></view>
|
||
<view class="per_mes">
|
||
|
||
<image src="../../static/icon/home_icon_1.png" class="per_mes_img"></image>
|
||
<view @click="onLoginJump">
|
||
<text class="name">点击登录</text>
|
||
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
|
||
<view class="xiugai">
|
||
<view class="nav_list" @click="newOnShare">
|
||
<text>分享App</text>
|
||
</view>
|
||
<view class="nav_list" @click="onPageJump('../peanut/aboutUs')">
|
||
<text>关于我们</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view>
|
||
<view class="footer_box footer_bg">
|
||
<view class="footer_item">
|
||
<view class="footer_nav_item" @click="selected=1">
|
||
<image v-if="selected == 1" class="footer_nav_item_image footer_nav_item_image_scale"
|
||
src="/static/tab/icon1_y.png" mode="aspectFit"></image>
|
||
<image v-else class="footer_nav_item_image" src="/static/tab/icon1_n.png" mode="aspectFit">
|
||
</image>
|
||
<text class="footer_nav_item_text"
|
||
:class="[selected == 1 ? 'footer_item_text_active' : '']">首页</text>
|
||
</view>
|
||
</view>
|
||
<view class="footer_item">
|
||
<view class="footer_nav_item" @click="onYouAlert()">
|
||
<image class="footer_nav_item_image" src="/static/tab/icon3_n.png" mode="aspectFit"></image>
|
||
<text class="footer_nav_item_text">我的图书</text>
|
||
</view>
|
||
</view>
|
||
<view class="footer_item">
|
||
<view class="footer_nav_item" @click="onYouAlert()">
|
||
<image class="footer_nav_item_image" src="/static/tab/icon2_n.png" mode="aspectFit"></image>
|
||
<text class="footer_nav_item_text">我的订单</text>
|
||
</view>
|
||
</view>
|
||
<view class="footer_item">
|
||
<view class="footer_nav_item" @click="selected=4">
|
||
<image v-if="selected == 4" class="footer_nav_item_image footer_nav_item_image_scale"
|
||
src="/static/tab/icon4_y.png" mode="aspectFit"></image>
|
||
<image v-else class="footer_nav_item_image" src="/static/tab/icon4_n.png" mode="aspectFit">
|
||
</image>
|
||
<text class="footer_nav_item_text"
|
||
:class="[selected == 4 ? 'footer_item_text_active' : '']">首页</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_station"></view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view v-if="pageNum==2">
|
||
<view class="shXiang">
|
||
<image src="../../static/icon/me_lise_more.png" @click="pageNum=1"></image>
|
||
<view style="height: 20rpx;"></view>
|
||
<view>商品详情</view>
|
||
</view>
|
||
<view style="height: 80rpx;"></view>
|
||
<view class="swiperBox">
|
||
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
|
||
style="width: 100%;height: 100%;">
|
||
<swiper-item v-for="(item,index) in swiperlist" :key="index" style="width: 100%;height: 100%;">
|
||
<image :src="item" mode="aspectFit" style="width: 100%;height: 100%;"
|
||
@click="previewImage(item)">
|
||
</image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<view class="commodityContent">
|
||
<view class="commodityPrice" v-if="productInfo.activityPrice && productInfo.activityPrice > 0">
|
||
<span style="font-size: 28rpx;">￥</span><em>{{productInfo.activityPrice}}</em>
|
||
<span class="oldPrice ">原价<span
|
||
style="font-size: 20rpx;padding-left:10rpx;">￥</span>{{productInfo.price}}</span>
|
||
</view>
|
||
<view class="commodityPrice" v-else>
|
||
<span style="font-size: 28rpx;">￥</span><em>{{productInfo.price}}</em>
|
||
</view>
|
||
<view class="commodityyName">
|
||
{{productInfo.productName}}
|
||
<span v-if="productInfo.productStock==0" style="color: #aaa;font-size:26rpx;">（无货）</span>
|
||
<view><text class="SoldNumber">已售<span
|
||
style="padding-left:10rpx;">{{productInfo.sumSales}}</span>件</text></view>
|
||
</view>
|
||
<view class="pingjia" v-if="linkProducts && linkProducts.length > 0 && linkProducts[0]">
|
||
<view class="">
|
||
<view style="font-weight: 600;margin-bottom: 30rpx;">商品列表</view>
|
||
<!-- <view class="icon-del rotate"></view> -->
|
||
</view>
|
||
<!-- 商品包含 -->
|
||
<view v-if="linkProducts && linkProducts.length > 0 && linkProducts[0]">
|
||
<view class="spbh" v-for="(item, index) in linkProducts" :key="item.id">
|
||
<view class="flexbox aligncenter" @click="previewProduct(item,index)">
|
||
<view class="spbhimg">
|
||
<image :src="item.productImages" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="username nowrap ">{{item.productName}}</text>
|
||
<text class="price"
|
||
v-if="item.activityPrice && item.activityPrice > 0">￥{{item.activityPrice}}</text>
|
||
<text class="price" v-else>￥{{item.price}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="quesheng" v-else>
|
||
<text>暂无关联商品~</text>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="contentButton">
|
||
<u-tabs :scrollable="false" :list="contentButtonList" @click="contentButtonClick" :activeStyle="{
|
||
color: '#303133',
|
||
fontWeight: 'bold',
|
||
fontSize: '28rpx'
|
||
}" :inactiveStyle="{
|
||
color: '#606266',
|
||
fontSize: '28rpx'
|
||
}"></u-tabs>
|
||
</view>
|
||
<!-- 详情 + 评价1 -->
|
||
<view v-if="contentShow == 0">
|
||
<view class="pingjia">
|
||
<!-- <h4></h4> -->
|
||
<view class="" v-if="listenList.length > 0 && listenList[0]&&iosHide" style="margin:0rpx 0rpx 30rpx;">
|
||
<view class="">
|
||
<view style="font-weight: 700;margin-bottom: 30rpx;color:#71d5a1;">赠送听书权益</view>
|
||
</view>
|
||
<view class="item flexbox aligncenter" v-for="item in listenList" :key="item.id"
|
||
style="padding-bottom:10rpx;">
|
||
<view class="spbhimg" @click="previewImage(item.images)">
|
||
<image :src="item.images" mode="aspectFit"></image>
|
||
</view>
|
||
<text style="padding-right: 10rpx;">{{item.name}}</text>
|
||
<u-icon v-if="item.canListen == true" name="volume" color="#71d5a1" size="24"
|
||
@click="onYouAlert()"></u-icon>
|
||
<u-icon v-else name="volume" color="#71d5a1" size="24"
|
||
@click="onYouAlert()"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<view style="font-weight: 700;margin:0rpx 0rpx 30rpx;">商品详情</view>
|
||
</view>
|
||
<view class="bookInfo">
|
||
<u-row customStyle="margin-bottom: 10px">
|
||
<u-col><span>书名：{{productInfo.productName}}</span></u-col>
|
||
</u-row>
|
||
<u-row customStyle="margin-bottom: 10px">
|
||
<u-col v-if="productInfo.author"><span>作者：{{productInfo.author}}</span></u-col>
|
||
</u-row>
|
||
<u-row customStyle="margin-bottom: 10px">
|
||
<u-col span="12"
|
||
v-if="productInfo.publisher"><span>出版社：{{productInfo.publisher}}</span></u-col>
|
||
</u-row>
|
||
<u-row customStyle="margin-bottom: 10px">
|
||
<u-col span="12"
|
||
v-if="productInfo.pubDate"><span>出版时间：{{ productInfo.pubDate | formatDate }}</span></u-col>
|
||
</u-row>
|
||
<u-row customStyle="margin-bottom: 10px">
|
||
<u-col span="6" v-if="productInfo.format"><span>开本：{{productInfo.format}}</span></u-col>
|
||
<u-col span="6"
|
||
v-if="productInfo.pageNum"><span>页数：{{productInfo.pageNum}}</span></u-col>
|
||
</u-row>
|
||
<u-row customStyle="margin-bottom: 10px">
|
||
<u-col span="6"
|
||
v-if="productInfo.quality"><span>内文用纸材质：{{productInfo.quality}}</span></u-col>
|
||
</u-row>
|
||
</view>
|
||
<view class="commodityIntroduce">
|
||
<view v-if="productInfo.productDetails">
|
||
<rich-text v-if="productInfo.productDetails" class="xiangqing" @itemclick="showImg"
|
||
:nodes="productInfo.productDetails|formatRichText"></rich-text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pingjia" v-else>
|
||
<view class="">
|
||
<view style="font-weight: 700;margin-bottom: 30rpx;">评价({{commentsList?commentsList.length:0}})
|
||
</view>
|
||
<!-- <view class="icon-del rotate"></view> -->
|
||
</view>
|
||
<!-- 商品评价 -->
|
||
<view class="" v-if="commentsList && commentsList.length > 0">
|
||
<view class="pingjiaBox" v-for="(item, index) in commentsList" :key="index">
|
||
<view class="flexbox aligncenter">
|
||
<view class="touxiang">
|
||
<image :src="item.avatar" mode="aspectFit"></image>
|
||
<text class="username nowrap ">{{item.name}}</text>
|
||
</view>
|
||
<view class="mb30" style="padding: 6rpx 0rpx 0rpx 20rpx;">
|
||
<span :class="['star',item.starlevel >= 1 ? 'starLight':'starGray']"></span>
|
||
<span :class="['star',item.starlevel >= 2 ? 'starLight':'starGray']"></span>
|
||
<span :class="['star',item.starlevel >= 3 ? 'starLight':'starGray']"></span>
|
||
<span :class="['star',item.starlevel >= 4 ? 'starLight':'starGray']"></span>
|
||
<span :class="['star',item.starlevel >= 5 ? 'starLight':'starGray']"></span>
|
||
</view>
|
||
</view>
|
||
<view class="contentBox">
|
||
<div class="pjimgs flexbox">
|
||
<view class="item" v-for="(item1,index) in item.images">
|
||
<image v-if="item1.length > 10" @click="previewImage(item1)" :src="item1"
|
||
mode="aspectFill" style="width:100%; height: 50px;"></image>
|
||
</view>
|
||
</div>
|
||
<view class="content" v-html="item.phtml"></view>
|
||
<text class="time">{{item.createdate}}</text>
|
||
</view>
|
||
<!-- 显示追平 -->
|
||
<view class="zhuiping item" v-if="item.zphtml != ''" style="padding-left: 60rpx;">
|
||
<h5 style="color: #dbdbdb;padding: 30rpx 10rpx 10rpx 0rpx;">追评内容：</h5>
|
||
<view class="flexbox">
|
||
<view class="contentBox">
|
||
<view class="content" v-html="item.zphtml"></view>
|
||
<text class="time">{{item.followUpdate}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="quesheng" v-else>
|
||
<text>暂无评价~</text>
|
||
</view>
|
||
</view>
|
||
<view style="height: 120rpx;"></view>
|
||
</view>
|
||
<uni-goods-nav class="goods_nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
|
||
@buttonClick="onYouAlert" />
|
||
</view>
|
||
<!-- 分享弹窗 -->
|
||
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
|
||
<uni-popup-share @select="haveSelected"></uni-popup-share>
|
||
</uni-popup>
|
||
|
||
<!-- 登录弹窗 -->
|
||
<u-modal :show="youkeShow" @confirm="onLoginJump" @cancel="youkeShow=false" :show-cancel-button="true"
|
||
cancel-text="再逛逛~" confirm-text="去登录">
|
||
<view>
|
||
您还未登录，请先登录~
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import $http from '@/config/requestConfig.js';
|
||
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
|
||
import {
|
||
|
||
} from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
selected: 1,
|
||
pageNum: 1,
|
||
newBookList: [],
|
||
tjProList: [],
|
||
tagList: [], // 推荐标签列表
|
||
loadingNow: false,
|
||
pageSize: 10,
|
||
page: 1,
|
||
totalPage: 0,
|
||
status: 3,
|
||
path: '',
|
||
youkeShow: false,
|
||
contentShow: 0,
|
||
swiperlist: [],
|
||
productInfo: {},
|
||
listenList: [],
|
||
linkProducts: [],
|
||
commentsList: [],
|
||
options: [],
|
||
buttonGroup: [{
|
||
text: '加入购物车',
|
||
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
|
||
color: '#fff'
|
||
},
|
||
{
|
||
text: '立即购买',
|
||
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
|
||
color: '#fff'
|
||
}
|
||
],
|
||
contentButtonList: [{
|
||
name: '商品详情'
|
||
},
|
||
{
|
||
name: '商品评价'
|
||
}
|
||
],
|
||
};
|
||
},
|
||
|
||
//第一次加载
|
||
onLoad(e) {
|
||
|
||
|
||
},
|
||
onHide() {
|
||
this.page = 1
|
||
this.tjProList = []
|
||
},
|
||
//页面显示
|
||
onShow() {
|
||
// 隐藏原生的tabbar
|
||
this.tjProList = []
|
||
this.getData();
|
||
this.getTags()
|
||
},
|
||
// 页面加载完毕
|
||
onReady() {
|
||
// this.requestIapOrder()
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.page = 1
|
||
this.tjProList = []
|
||
this.getData()
|
||
this.getTags()
|
||
uni.stopPullDownRefresh()
|
||
|
||
},
|
||
onReachBottom() {
|
||
this.loadingNow = true
|
||
console.log('到底了')
|
||
if (this.page + 1 <= this.totalPage) {
|
||
this.status = 0
|
||
this.page++
|
||
this.getJtData()
|
||
} else {
|
||
this.status = 1
|
||
}
|
||
|
||
},
|
||
|
||
filters: {
|
||
formatRichText(html) { //控制小程序中图片大小
|
||
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
|
||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
||
return match;
|
||
});
|
||
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
|
||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
|
||
'max-width:100%;');
|
||
return match;
|
||
});
|
||
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
||
newContent = newContent.replace(/\<img/gi,
|
||
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
|
||
return newContent;
|
||
},
|
||
},
|
||
|
||
//方法
|
||
methods: {
|
||
// 获取列表数据
|
||
getData() {
|
||
this.getNewBook()
|
||
},
|
||
|
||
|
||
// 新书上市
|
||
getNewBook() {
|
||
this.$http
|
||
.post('visitor/getNewBook', {
|
||
'limit': 4,
|
||
'page': 1
|
||
})
|
||
.then(res => {
|
||
console.log(res, 'xinshu')
|
||
this.newBookList = res.page.list
|
||
}).catch(e => {
|
||
console.log(e, '新书上市报错')
|
||
});
|
||
},
|
||
|
||
// 获取商品标签
|
||
getTags() {
|
||
this.loadingNow = false
|
||
this.$http
|
||
.post('visitor/getLabels')
|
||
.then(res => {
|
||
console.log(res, '标签列表')
|
||
if (res.code == 0 && res.result.labels.length > 0) {
|
||
this.tagList = res.result.labels
|
||
this.tabsid = this.tagList[0].splId
|
||
this.getJtData()
|
||
}
|
||
}).catch(e => {
|
||
console.log(e, 'e')
|
||
});
|
||
},
|
||
|
||
tabsChange(item) {
|
||
this.tjProList = []
|
||
this.tabsid = item.splId
|
||
this.page = 1
|
||
// 获取推荐数据
|
||
this.getJtData()
|
||
},
|
||
getJtData() {
|
||
this.$http
|
||
.post('visitor/getProductsByLabel', {
|
||
'splId': this.tabsid,
|
||
'limit': this.pageSize,
|
||
'page': this.page
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0 && res.page.records.length > 0) {
|
||
this.tjProList = this.tjProList.concat(res.page.records)
|
||
this.totalPage = res.page.pages
|
||
this.status = 3
|
||
console.log(this.tjProList, '按标签检索结果')
|
||
} else {
|
||
this.tjProList = []
|
||
this.totalPage = 0
|
||
}
|
||
}).catch(e => {
|
||
console.log(e, '标签检索报错')
|
||
});
|
||
},
|
||
|
||
// 页面跳转跳转
|
||
onPageJump(e) {
|
||
uni.navigateTo({
|
||
url: e
|
||
});
|
||
},
|
||
|
||
// 商品详情页
|
||
goDetail(id) {
|
||
this.pageNum = 2
|
||
// 获取商品详情
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
this.swiperlist=[]
|
||
this.$http
|
||
.post('/visitor/info/' + id)
|
||
.then(res => {
|
||
this.productInfo = res.shopProduct
|
||
this.listenList = res.shopProduct.bookidsimages
|
||
if (this.productInfo.productImageList == null || this.productInfo.productImageList == '') {
|
||
this.swiperlist.push(this.productInfo.productImages)
|
||
} else {
|
||
let imgList = this.productInfo.productImageList.split(",")
|
||
for (var i = 0; i < imgList.length; i++) {
|
||
this.swiperlist.push(imgList[i])
|
||
}
|
||
}
|
||
uni.hideLoading();
|
||
}).catch(e => {
|
||
uni.hideLoading();
|
||
if (e.msg == '该商品不存在，看看其他商品吧') {
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}, 2000)
|
||
}
|
||
})
|
||
|
||
|
||
// 获取评价详情
|
||
$http.request({
|
||
url: "visitor/All",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档1
|
||
data: {
|
||
'bookid': id
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.commentsList = res.list.map(item => {
|
||
var imgList = []
|
||
if (item.images !== null) {
|
||
imgList = item.images.split(',')
|
||
item.images = imgList
|
||
return item
|
||
} else {
|
||
return item
|
||
}
|
||
})
|
||
// 评论格式化
|
||
var newarr = []
|
||
this.commentsList.forEach((item1) => {
|
||
var pjstr = ''
|
||
var zpstr = ''
|
||
pjstr = this.getHtmlComment(item1.content)
|
||
item1.followUpcontent == '' ? zpstr = '' : zpstr = this.getHtmlComment(item1
|
||
.followUpcontent)
|
||
item1.phtml = pjstr
|
||
item1.zphtml = zpstr
|
||
newarr.push(item1)
|
||
})
|
||
this.commentsList = newarr
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
// 获取html格式的评论1
|
||
getHtmlComment(comment) {
|
||
// 格式化html
|
||
// 这里处理 链接 换行符
|
||
let replacedStr = comment.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
|
||
var indexss = emojiList1.findIndex(item1 => item1.alt === item)
|
||
return '<img src="https://www.nuttyreading.com/emojis/emojis/qq/' + emojiList1[indexss].url +
|
||
'" width="18rpx">';
|
||
});
|
||
return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');
|
||
},
|
||
|
||
|
||
formatRichText(html) { //控制图片大小
|
||
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
|
||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
||
return match;
|
||
});
|
||
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
|
||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
|
||
'max-width:100%;');
|
||
return match;
|
||
});
|
||
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
||
newContent = newContent.replace(/\<img/gi,
|
||
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
|
||
return newContent;
|
||
},
|
||
|
||
contentButtonClick(e) {
|
||
this.contentShow = e.index
|
||
},
|
||
|
||
// 分享
|
||
newOnShare() {
|
||
this.$refs.share.open()
|
||
},
|
||
|
||
|
||
haveSelected(data) {
|
||
if (data.index == 0) {
|
||
// 分享到好友
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene: "WXSceneSession",
|
||
type: 0,
|
||
href: this.$apkUrl,
|
||
title: "吴门医述",
|
||
summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
|
||
imageUrl: "static/icon/home_icon_logo.png",
|
||
success: function(res) {
|
||
console.log("success:" + JSON.stringify(res));
|
||
},
|
||
fail: function(err) {
|
||
console.log("fail:" + JSON.stringify(err));
|
||
}
|
||
});
|
||
} else if (data.index == 1) {
|
||
// 分享到朋友圈
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene: "WXSceneTimeline",
|
||
type: 0,
|
||
href: this.$apkUrl,
|
||
title: "吴门医述",
|
||
summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
|
||
imageUrl: "static/icon/home_icon_logo.png",
|
||
success: function(res) {
|
||
console.log("success:" + JSON.stringify(res));
|
||
},
|
||
fail: function(err) {
|
||
console.log("fail:" + JSON.stringify(err));
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
|
||
|
||
// 游客跳转
|
||
onYouAlert() {
|
||
// uni.showToast({
|
||
// icon: 'none',
|
||
// title: '请先登录'
|
||
// })
|
||
this.youkeShow = true
|
||
},
|
||
|
||
|
||
// 点击去登录
|
||
onLoginJump(e) {
|
||
uni.navigateTo({
|
||
url: '/pages/user/login'
|
||
});
|
||
},
|
||
|
||
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/style/mixin.scss';
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
|
||
.aligncenter {
|
||
align-items: center;
|
||
}
|
||
|
||
.home_bg {
|
||
background-image: url('@/static/icon/home_bg.jpg');
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
padding: 20rpx;
|
||
position: relative;
|
||
|
||
.icon_hua_1 {
|
||
width: 100%;
|
||
text-align: center;
|
||
height: 80rpx;
|
||
|
||
image {
|
||
width: 150rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
|
||
.icon_hua {
|
||
width: 100%;
|
||
text-align: center;
|
||
display: block;
|
||
|
||
image {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.head_line {
|
||
padding-top: 8rpx;
|
||
margin: 12rpx 0 0 0;
|
||
|
||
|
||
b {
|
||
display: inline-block;
|
||
width: 12rpx;
|
||
height: 40rpx;
|
||
background-color: #54a966;
|
||
vertical-align: bottom;
|
||
margin: 0 20rpx 0 0;
|
||
}
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
i {
|
||
float: right;
|
||
font-style: normal;
|
||
color: #8b8a91;
|
||
font-size: 24rpx;
|
||
margin: 5rpx 35rpx 0 0;
|
||
}
|
||
}
|
||
|
||
|
||
.scroll-view_H {
|
||
background-color: #fff;
|
||
white-space: nowrap;
|
||
padding: 10rpx;
|
||
margin-top: 12rpx;
|
||
|
||
.item {
|
||
padding: 10rpx;
|
||
overflow: hidden;
|
||
display: inline-block;
|
||
padding-bottom: 0;
|
||
width: 180rpx !important;
|
||
margin-right: 20rpx;
|
||
border-radius: 10rpx;
|
||
|
||
.videoBox {
|
||
image {
|
||
display: block;
|
||
width: 150rpx;
|
||
height: 170rpx;
|
||
}
|
||
}
|
||
|
||
.bookName {
|
||
display: block;
|
||
margin-top: 6rpx;
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
white-space: nowrap;
|
||
overflow-x: hidden;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
// .item.active{margin-right: 20rpx; border: 1px solid #55aa00; border-radius: 10rpx;}
|
||
}
|
||
|
||
|
||
|
||
.ProTabs {
|
||
// margin: 20rpx 0;
|
||
padding: 0 20rpx;
|
||
|
||
text {
|
||
padding: 8rpx 14rpx;
|
||
font-size: 32rpx;
|
||
display: inline-block;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
// background-color: #eee;
|
||
color: #55aa7f;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
text.cur {
|
||
background-color: #55aa7f;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.goods {
|
||
width: 100%;
|
||
margin: 0 0 50rpx 0;
|
||
background-color: #fff;
|
||
|
||
.goodsItem {
|
||
display: inline-block;
|
||
width: 46%;
|
||
border-radius: 20rpx;
|
||
padding: 25rpx;
|
||
padding-bottom: 5rpx;
|
||
margin: 0 20rpx 20rpx 20rpx;
|
||
background-color: #fff;
|
||
border: 1px solid #eee;
|
||
|
||
.goodsImg {
|
||
width: 98%;
|
||
height: 380rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.goodsContent {
|
||
|
||
.goodsName {
|
||
margin-top: 10rpx;
|
||
font-size: 28rpx;
|
||
// font-weight: bold;
|
||
}
|
||
|
||
.goodsPrice {
|
||
font-size: 28rpx;
|
||
margin: 5rpx 0 0 3rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.price {
|
||
font-weight: bold;
|
||
color: #ff0000;
|
||
}
|
||
|
||
.Salesnum {
|
||
color: #9b9b9b;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.goodsItem:nth-child(2n) {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
.per_mes {
|
||
margin: 0 0 50rpx 0;
|
||
align-items: center;
|
||
|
||
.per_mes_img {
|
||
width: 120upx;
|
||
height: 120upx;
|
||
background-color: #fff;
|
||
border-radius: 120upx;
|
||
margin: 0 30upx 0 0;
|
||
float: left;
|
||
}
|
||
|
||
view {
|
||
float: left;
|
||
margin-top: 20rpx;
|
||
|
||
.name {
|
||
display: inline-block;
|
||
font-weight: bold;
|
||
font-size: 38upx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.tong {
|
||
color: #999;
|
||
font-size: 25upx;
|
||
}
|
||
|
||
.per_user_img {
|
||
display: inline-block;
|
||
width: 40upx;
|
||
height: 40upx;
|
||
margin-left: 10rpx;
|
||
vertical-align: super;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.shXiang {
|
||
background-color: #fff;
|
||
height: 80rpx;
|
||
text-align: center;
|
||
position: fixed;
|
||
top: 80rpx;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
|
||
view {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
image {
|
||
width: 18rpx;
|
||
height: 25rpx;
|
||
transform: scale(-1);
|
||
position: fixed;
|
||
top: 105rpx;
|
||
left: 40rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.xiugai {
|
||
|
||
.nav_list {
|
||
background-color: #fff;
|
||
padding: 30upx 0 30upx 20upx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
font-weight: bold;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
|
||
&:active {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
text {
|
||
color: #333;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 20upx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 40upx;
|
||
height: 40upx;
|
||
background-image: url('../../static/icon/icon_right.png');
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
}
|
||
|
||
.nav_list:nth-last-child(1) {
|
||
border-bottom: 0;
|
||
}
|
||
}
|
||
|
||
|
||
.swiperBox {
|
||
width: 100%;
|
||
height: 375px;
|
||
|
||
}
|
||
|
||
.commodityContent {
|
||
background-color: #fff;
|
||
padding: 30rpx 30rpx 10rpx 30rpx;
|
||
height: auto;
|
||
font-size: 26rpx;
|
||
|
||
.commodityPrice {
|
||
// background-image: linear-gradient(0deg, #f7fffc 0%, #def0ea 100%);
|
||
// border-top: 1px solid #fff;
|
||
// background-color: #f7faf9;
|
||
// border-top-left-radius: 20rpx;
|
||
// border-top-right-radius: 20rpx;
|
||
color: #ffa200;
|
||
padding: 0rpx 0rpx 0rpx 16rpx;
|
||
|
||
em {
|
||
font-size: 40rpx;
|
||
font-style: normal;
|
||
}
|
||
|
||
.oldPrice {
|
||
background-color: #ff000013;
|
||
;
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 20rpx;
|
||
margin-left: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #ff0000;
|
||
}
|
||
}
|
||
|
||
.commodityyName {
|
||
margin-top: -20rpx;
|
||
padding: 30rpx 20rpx 40rpx 20rpx;
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
border-top-left-radius: 20rpx;
|
||
border-top-right-radius: 20rpx;
|
||
background-color: #fff;
|
||
|
||
.SoldNumber {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 16rpx;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.commodityIntroduce {
|
||
font-size: 30rpx;
|
||
// background-color: #fff;
|
||
// padding: 0 20rpx 30rpx 20rpx;
|
||
}
|
||
|
||
|
||
.pingjia {
|
||
background-color: #f5f5f5;
|
||
border-radius: 20rpx;
|
||
// margin-top: 20rpx;
|
||
padding: 30rpx 30rpx 20rpx;
|
||
|
||
.pingjiaBox {
|
||
color: #555;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.touxiang {
|
||
width: 100rpx;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
|
||
image {
|
||
width: 40px !important;
|
||
padding: 3px;
|
||
height: 40px !important;
|
||
border: 1px solid #eee;
|
||
border-radius: 64px;
|
||
overflow: hidden;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.username {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 6rpx;
|
||
}
|
||
}
|
||
|
||
.contentBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0rpx 10rpx 30rpx 6rpx;
|
||
|
||
.content {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
padding-top: 6rpx;
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
.star {
|
||
display: inline-block;
|
||
width: 15px;
|
||
height: 15px;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.starGray {
|
||
background: url(../../static/icon/star_greey.png) no-repeat;
|
||
background-size: contain;
|
||
}
|
||
|
||
.starLight {
|
||
background: url(../../static/icon/star_light.png) no-repeat;
|
||
background-size: contain;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.spbh {
|
||
padding-bottom: 10rpx;
|
||
font-size: 26rpx;
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.spbhimg {
|
||
width: 40px;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
|
||
image {
|
||
width: 40px !important;
|
||
padding: 3px;
|
||
height: 40px !important;
|
||
border: 1px solid #eee;
|
||
border-radius: 6rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.goods_nav {
|
||
z-index: 1;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
|
||
.footer_station {
|
||
height: 110rpx;
|
||
box-sizing: content-box;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.footer_box {
|
||
height: 110rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
z-index: 502;
|
||
box-sizing: content-box;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.footer_bg {
|
||
background-color: #FFF;
|
||
box-shadow: 0 0px 10px 1px #0000001a;
|
||
}
|
||
|
||
.footer_item {
|
||
position: relative;
|
||
flex: 1;
|
||
}
|
||
|
||
.footer_nav_item {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.footer_nav_item:active {
|
||
background-color: rgba($color: #fff, $alpha: 0.1);
|
||
}
|
||
|
||
.footer_nav_item_text {
|
||
font-size: 26rpx;
|
||
color: #909090;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.footer_nav_item_text_active {
|
||
color: #f9a633;
|
||
}
|
||
|
||
.footer_nav_item_image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
|
||
}
|
||
|
||
.footer_nav_item_image_scale {
|
||
animation: mescrollUpRotate 0.6s linear 1;
|
||
}
|
||
|
||
@keyframes mescrollUpRotate {
|
||
0% {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.footer_item_text_active {
|
||
color: #079307;
|
||
font-weight: bold;
|
||
}
|
||
</style> |