feat(uniapp_v2): 二开功能迁移与小程序主包优化

- 从 uniapp 迁移 HJF 页面、API、组件及用户/订单相关改动
- queue、assets 使用独立分包以降低主包体积
- 修复首页单根节点与支付结果页 v-if 链
- 关闭 HjfDemoPanel 全局注册;uniNoticeBar 注释 $getAppWebview 避免 __webviewId__ 报错
- 配置域名与 manifest 应用名称;cache/store 防御性处理

Made-with: Cursor
This commit is contained in:
apple
2026-03-26 12:16:01 +08:00
parent c84aeda062
commit 8e17762510
742 changed files with 184117 additions and 0 deletions

View File

@@ -0,0 +1,3 @@
<temlate>
<view></view>
</temlate>

View File

@@ -0,0 +1,51 @@
<template>
<view v-if="shareInfoStatus" class="poster-first">
<view class="mask-share">
<image :src="imgHost + '/statics/images/share-info.png'"
@click="shareInfoClose"
@touchmove.stop.prevent="false"></image>
</view>
</view>
</template>
<script>
import {HTTP_REQUEST_URL} from '@/config/app';
export default {
props: {
shareInfoStatus: {
type: Boolean,
default:false,
}
},
data: function() {
return {
imgHost:HTTP_REQUEST_URL,
};
},
mounted: function() {},
methods: {
shareInfoClose: function() {
this.$emit("setShareInfoStatus");
}
}
};
</script>
<style scoped lang="scss">
.poster-first {
overscroll-behavior: contain;
}
.mask-share {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
}
.mask-share image {
width: 100%;
height:100%;
}
</style>

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,180 @@
<template>
<view class="feedback-wrapper">
<!-- #ifdef H5 -->
<view class="goPage">
<view class="iconfont icon-fanhui1 acea-row row-center-wrapper" @click="gotoPre"></view>
</view>
<!-- #endif -->
<view class="head">
<view class="left-wrapper">
<view class="title">商城客服已离线</view>
<view class="txt">{{feedback}}</view>
</view>
<view class="img-box"><image src="../static/feed-icon.png" mode=""></image></view>
</view>
<view class="main">
<view class="title">我要反馈</view>
<view class="input-box">
<input type="text" placeholder="请输入您的姓名" v-model="name">
</view>
<view class="input-box">
<input type="text" placeholder="请输入您的联系电话" v-model="phone">
</view>
<view class="input-box">
<textarea type="text" placeholder="请填写内容" v-model="con" />
</view>
<view class="sub_btn" @click="subMit">提交</view>
</view>
</view>
</template>
<script>
import { serviceFeedBack,feedBackPost } from '@/api/kefu.js'
export default{
name:'feedback',
data(){
return {
name:'',
phone:'',
con:'',
feedback:''
}
},
onLoad(){
this.getInfo()
},
onShow(){
uni.removeStorageSync('form_type_cart');
},
methods:{
// 返回上一页
gotoPre(){
uni.navigateBack();
},
getInfo(){
serviceFeedBack().then(res=>{
this.feedback = res.data.feedback
})
},
subMit(){
if(!this.name){
return this.$util.Tips({
title:'请填写姓名'
})
}
if(!this.phone || !(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.phone))){
return this.$util.Tips({
title:'请填写正确的手机号码'
})
}
if(!this.con){
return this.$util.Tips({
title:'请填写内容'
})
}
feedBackPost({
rela_name:this.name,
phone:this.phone,
content:this.con
}).then(res=>{
this.$util.Tips({
title:res.msg,
icon:'success'
},{
tab:3
})
}).catch(function(res) {
that.$util.Tips({ title: res });
});
}
}
}
</script>
<style lang="stylus">
.goPage{
background-color #3A3A3A;
padding 20rpx 0 0 20rpx;
.icon-fanhui1{
background-color #fff;
color #333;
width 50rpx;
height 50rpx;
border-radius 50%;
font-size 20rpx
}
}
.feedback-wrapper
.head
display flex
align-items center
justify-content space-between
height 215rpx
padding 0rpx 30rpx
background-color #3A3A3A
.left-wrapper
width 456rpx
color #fff
font-size 24rpx
.title
margin-bottom 15rpx
font-size 32rpx
.img-box
image
width 173rpx
height 156rpx
.info
display flex
background-color #fff
.info-item
flex 1
display flex
flex-direction column
align-items center
justify-content center
height 138rpx
border-right 1px solid #F0F1F2
&:last-child
border:none
.big-txt
font-size 32rpx
font-weight bold
color #282828
.small
margin-top 10rpx
font-size 24rpx
color #9F9F9F
.main
margin-top 16rpx
padding 30rpx 30rpx 68rpx
background-color #FFF
.title
font-size 30rpx
font-weight bold
.input-box
margin-top 20rpx
input
display block
width 100%
height 78rpx
background #F5F5F5
font-size 28rpx
padding-left 20rpx
textarea
display block
width 100%
height 260rpx
padding 20rpx
background #F5F5F5
font-size 28rpx
.sub_btn
margin-top 130rpx
width 100%
height 86rpx
line-height 86rpx
font-size 30rpx
text-align center
color #fff
border-radius 43rpx
background-color #3875EA
</style>

View File

@@ -0,0 +1,494 @@
<template>
<view class="">
<view class="invite" v-if="inviteShow && loading">
<view class="invite-header" :style="{backgroundImage:'url('+imgHost+'/statics/images/extension.jpg'+')'}">
<view class='swipers'>
<swiper :indicator-dots="false" autoplay="true" interval="2500" duration="500" vertical="true"
circular="true">
<block v-for="(item,index) in agentInfoData.list" :key='index'>
<swiper-item @touchmove.stop="stopTouchMove">
<view class='line1'>恭喜{{item.nickname}} <text class="color_ye">
成功赚取{{item.price}}</text> </view>
</swiper-item>
</block>
</swiper>
</view>
</view>
<view class="box">
<view class="box-title-sty">
<view class="box-title" :style="{backgroundImage:'url('+imgHost+'/statics/images/title-bag.png'+')'}">
我的收益
</view>
<view class="benefit">
<text class="iconfont icon-zhu"></text>
<text>获得收益</text>
<text class="num">{{agentInfoData.price || 0}}</text>
<text></text>
</view>
</view>
<view class="tab">
<view class="item" @click="getList(0)">
<view class="text" :class="sel == 0?'on':''">已邀请好友</view>
<view class="line" :class="sel == 0?'on':''"></view>
</view>
<view class="item" @click="getList(1)">
<view class=" text" :class="sel == 1 ?'on':''">已下单好友</view>
<view class="line" :class="sel == 1 ?'on':''"></view>
</view>
</view>
<view class="list" v-if="userList.length">
<view class="item" v-for="(item,index) in userList" :key="index">
<view class="item-l">
<view class="avatar">
<image :src="item.avatar" mode=""></image>
</view>
<view class="">{{item.nickname}}</view>
</view>
<view class="item-r">{{item.spread_time}}</view>
</view>
<template v-if="userList.length">
<view class='more' @tap='showAll' v-if="userList.length < total">查看更多
<text class='iconfont icon-xiangxia'></text>
</view>
</template>
</view>
<view class="no-thing" v-if="(!userList.length && sel == 0) || (!userList.length && sel == 1)">
<view class="no-thing-img">
<image :src="imgHost + '/statics/images/no-thing.png'" mode="aspectFit"></image>
</view>
<view class="pl20">
{{sel == 0?'暂无已邀请好友,快去邀请吧':'暂无下单好友,快去邀请下单吧'}}
</view>
</view>
</view>
<view class="box">
<view class="box-title-sty white">
<view class="box-title" :style="{backgroundImage:'url('+imgHost+'/statics/images/title-bag.png'+')'}">活动规则</view>
</view>
<view class="agreement" v-html="agentInfoData.agreement"></view>
</view>
<view class="footer">
<view class="click">
<image src="../static/click.png" mode=""></image>
</view>
<view class="cancellation flex-aj-center" @click="invite">
立即邀请
</view>
</view>
</view>
<view class="no-invite" v-else-if="!inviteShow && loading">
<image :src="imgHost + '/statics/images/no-thing.png'" mode="aspectFit"></image>
<text>商家暂未上架活动哦</text>
</view>
<!-- #ifdef MP -->
<authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
<!-- #endif -->
</view>
</template>
<script>
import {
getUserInfo,
agentUserList,
agentInfo
} from '@/api/user.js';
import colors from '@/mixins/color.js'
import {toLogin} from '@/libs/login.js';
import {mapGetters} from "vuex";
import {HTTP_REQUEST_URL} from '@/config/app';
const app = getApp();
export default {
mixins: [colors],
data() {
return {
inviteShow: true,
loading: true,
sel: 0,
userList: [],
agentInfoData: {},
page: 1,
limit: 5,
total: 0,
imgHost:HTTP_REQUEST_URL,
isShowAuth: false
}
},
computed: mapGetters(['isLogin']),
watch: {
isLogin: {
handler: function(newV, oldV) {
if (newV) {}
},
deep: true
}
},
onLoad(option) {
this.type = option.type;
if (this.isLogin) {
this.getAgentList(0);
this.getAgentInfo();
}
},
onShow(){
uni.removeStorageSync('form_type_cart');
if(!this.isLogin){
toLogin()
}
},
methods: {
/**
* 授权回调
*/
onLoadFun: function() {
this.getAgentList(0);
this.getAgentInfo();
this.isShowAuth = false;
},
// 授权关闭
authColse: function(e) {
this.isShowAuth = e
},
//#ifdef H5
ShareInfo(data) {
let href = location.href;
if (this.$wechat.isWeixin()) {
getUserInfo().then(res => {
href = href.indexOf('?') === -1 ? href + '?spid=' + res.data.uid : href + '&spid=' +
res.data.uid;
let configAppMessage = {
desc: data.name,
title: data.name,
link: href,
imgUrl: data.image
};
this.$wechat
.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData',
'onMenuShareAppMessage',
'onMenuShareTimeline'
], configAppMessage)
.then(res => {})
.catch(err => {});
});
}
},
//#endif
getList(index) {
this.sel = index;
this.userList = [];
this.page = 1;
this.getAgentList(index);
},
invite() {
uni.navigateTo({
url: '/pages/users/user_spread_code/index'
})
},
getAgentList(type) {
agentUserList(type, this.page, this.limit).then(res => {
this.total = res.data.count;
let len = res.data.list.length;
let userListNew = [];
let userListData = res.data.list;
userListNew = this.userList.concat(userListData);
this.$set(this, 'userList', userListNew);
})
},
getAgentInfo() {
agentInfo().then(res => {
this.agentInfoData = res.data;
})
},
showAll: function() {
this.page++;
this.getAgentList(this.sel);
},
}
}
</script>
<style lang="scss" scoped>
@import "../static/click.css";
.invite {
background-color: #E74435;
min-height: 100vh;
padding: 0 0 80rpx 0;
.invite-header {
width: 100%;
height: 584rpx;
margin: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 1;
.swipers {
width: 544rpx;
height: 40rpx;
line-height: 40rpx;
background: rgba(183, 4, 0, 1);
border-radius: 24rpx;
margin: auto;
overflow: hidden;
position: absolute;
left: 50%;
top: 14%;
transform: translate(-50%);
/* 50%为自身尺寸的一半 */
.line1 {
text-align: center;
}
swiper {
height: 100%;
width: 100%;
overflow: hidden;
font-size: 24rpx;
color: #FFFFFF;
}
.color_ye {
color: #FFE39F;
}
}
}
.notice {
position: absolute;
}
.box {
margin: -100rpx 30rpx 160rpx 30rpx;
width: 690rpx;
background-color: #fff;
z-index: 999;
border-radius: 12rpx;
.agreement {
padding: 0 30rpx 30rpx 30rpx;
word-wrap: break-word;
text-align: justify;
/deep/p{
margin-bottom: 8rpx;
line-height: 60rpx;
}
}
.box-title-sty {
background-color: #FEF7F6;
padding-bottom: 42rpx;
border-radius: 12rpx 12rpx 0 0;
.benefit {
text-align: center;
color: #333333;
font-size: 24rpx;
.icon-zhu {
color: #E93323;
padding-right: 16rpx;
}
.num {
color: #E93323;
font-size: 54rpx;
padding: 0 8rpx;
font-weight: bold;
}
}
}
.white {
background-color: #fff;
}
.tab {
display: flex;
padding: 36rpx;
color: #E93323;
font-size: 32rpx;
.item {
width: 100%;
text-align: center;
.line {
margin: 20rpx auto 0 auto;
width: 106rpx;
height: 2px;
border-radius: 1px;
}
.line.on {
background: #E93323;
}
.on {
font-weight: bold;
}
}
}
.no-thing {
display: flex;
align-items: center;
justify-content: center;
padding: 16rpx 0 52rpx;
color: #333;
.no-thing-img {
width: 48rpx;
height: 48rpx;
image {
width: 100%;
height: 100%;
}
}
.pl20 {
padding-left: 20rpx;
}
}
.list {
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14rpx 30rpx;
.item-l {
display: flex;
align-items: center;
color: #333333;
font-size: 28rpx;
.avatar {
width: 56rpx;
height: 56rpx;
margin-right: 18rpx;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
.item-r {
color: #999999;
font-size: 22rpx;
}
}
.more {
font-size: 24rpx;
color: #282828;
text-align: center;
height: 90rpx;
line-height: 90rpx;
}
}
.box-title {
transform: translateY(-20rpx);
margin: 0 auto;
width: 380rpx;
height: 76rpx;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
font-weight: 500;
}
}
.footer {
text-align: center;
z-index: 999;
width: 100%;
background-color: #E93323;
position: fixed;
padding: 36rpx 30rpx;
box-sizing: border-box;
bottom: 0rpx;
.trip {
color: #999999;
font-size: 24rpx;
margin: 24rpx 0;
}
.click {
width: 66rpx;
height: 74rpx;
position: absolute;
right: 44rpx;
bottom: 8rpx;
image {
width: 100%;
height: 100%;
}
}
.cancellation {
height: 45px;
color: #E93323;
font-weight: bold;
font-size: 36rpx;
background: linear-gradient(180deg, #FFFCF6 0%, #FFE297 100%);
border-radius: 25px;
}
}
}
// .mask {
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// background-color: rgba(0, 0, 0, 0.8);
// z-index: 9;
// }
// .share-box {
// z-index: 1300;
// position: fixed;
// left: 0;
// top: 0;
// width: 100%;
// height: 100%;
// image {
// width: 100%;
// height: 100%;
// }
// }
.no-invite {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-size: 28rpx;
color: #ccc;
}
[v-cloak] {
display: none;
}
</style>

View File

@@ -0,0 +1,258 @@
<template>
<view :style="colorStyle">
<view class="px-32">
<view class="fs-36 fw-500 lh-54rpx mt-44">{{ articleInfo.title }}</view>
<view class="flex fs-24 text--w111-999 mt-16">
<text>{{ articleInfo.catename }}</text>
<text class="px-16">|</text>
<text>{{ articleInfo.add_time }}</text>
</view>
<view class="content fs-30 text--w111-333 lh-52rpx mt-32">
<jyf-parser :html="content" ref="article" :tag-style="tagStyle"></jyf-parser>
</view>
<view class="bg--w111-f5f5f5 rd-24rpx w-full flex-between-center p-20 mt-32" @tap="goDetail" v-if="store_info.id">
<image :src="store_info.image" class="w-160 h-160 rd-16rpx" mode="aspectFill"></image>
<view class="flex-1 h-160 flex-col justify-between pl-20">
<view class="w-full fs-28 lh-40rpx line2">{{ store_info.store_name }}</view>
<view class="flex justify-between items-end">
<baseMoney :money="store_info.price" symbolSize="28" integerSize="44" decimalSize="28" weight></baseMoney>
<view class="w-136 h-52 rd-30rpx flex-center fs-22 text--w111-fff bg-gradient">立即购买</view>
</view>
</view>
</view>
</view>
<view class="h-200"></view>
<view class="bg--w111-fff w-full z-99 fixed-lb pb-safe">
<view class="w-full h-128 px-32 flex-y-center" v-if="store_info.id">
<view class="w-346 h-72 px-24 rd-36rpx flex-center bg--w111-f5f5f5" @tap="goDetail">
<image :src="store_info.image" class="w-48 h-48 rd-8rpx"></image>
<view class="pl-12">
<view class="fs-22 fw-500 w-238 line1">{{ store_info.store_name }}</view>
<view class="fs-20 SemiBold">¥{{ store_info.price }}</view>
</view>
</view>
<view class="flex-1 flex-between-center ml-38">
<view class=" flex-y-center">
<text class="iconfont icon-ic_Eyes fs-38"></text>
<text class="fs-26 pl-12">{{ articleInfo.visit }}</text>
</view>
<view class=" flex-y-center" :class="{ active: articleInfo.is_like }" @tap="giveLike">
<text class="iconfont icon-ic_Like fs-38"></text>
<text class="fs-26 pl-12">{{ articleInfo.likes }}</text>
</view>
<!-- #ifdef H5 -->
<text class="iconfont icon-ic_share fs-44" @tap="listenerActionSheet"></text>
<!-- #endif -->
<!-- #ifdef MP -->
<button open-type="share" hover-class="none">
<text class="iconfont icon-ic_share fs-38"></text>
</button>
<!-- #endif -->
</view>
</view>
<view class="w-full px-120 h-128 flex-between-center" v-else>
<view class="flex-y-center" :class="{ active: articleInfo.is_like }" @tap="giveLike">
<text class="iconfont icon-ic_Like fs-38"></text>
<text class="fs-26 pl-12">{{ articleInfo.likes }}</text>
</view>
<view class="flex-y-center">
<text class="iconfont icon-ic_Eyes fs-38"></text>
<text class="fs-26 pl-12">{{ articleInfo.visit }}</text>
</view>
<!-- #ifdef H5 -->
<text class="iconfont icon-ic_share fs-38" @tap="listenerActionSheet"></text>
<!-- #endif -->
<!-- #ifdef MP -->
<button open-type="share" hover-class="none">
<text class="iconfont icon-ic_share fs-44"></text>
</button>
<!-- #endif -->
</view>
</view>
<shareInfo @setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></shareInfo>
<home></home>
</view>
</template>
<script>
import { getArticleDetails } from '@/api/api.js';
import { articleStarApi, userShare } from '@/api/user.js';
import shareInfo from '../components/shareInfo/index.vue';
import parser from '@/components/jyf-parser/jyf-parser';
import colors from '@/mixins/color';
import { mapGetters } from 'vuex';
import { toLogin } from '@/libs/login.js';
import { HTTP_REQUEST_URL } from '@/config/app';
export default {
components: {
shareInfo,
'jyf-parser': parser
},
mixins: [colors],
data() {
return {
id: 0,
articleInfo: {},
store_info: {},
content: '',
shareInfoStatus: false,
tagStyle: {
img: 'width:100%;display:block;border-radius:8px;',
table: 'width:100%',
video: 'width:100%;'
}
};
},
computed: mapGetters(['isLogin', 'uid']),
onPageScroll(object) {
uni.$emit('scroll');
},
/**
* 用户点击右上角分享
*/
// #ifdef MP
onShareAppMessage: function() {
let that = this;
return {
title: that.articleInfo.title,
imageUrl: that.articleInfo.image_input[0] || '',
path: '/pages/extension/news_details/index?id=' + that.id + '&spid=' + that.uid
};
},
onShareTimeline() {
let that = this;
return {
title: that.articleInfo.title,
imageUrl: that.articleInfo.image_input[0] || '',
path: '/pages/extension/news_details/index?id=' + that.id + '&spid=' + that.uid
};
},
// #endif
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if (options.hasOwnProperty('id')) {
this.id = options.id;
} else {
// #ifndef H5
uni.navigateBack({ delta: 1 });
// #endif
// #ifdef H5
history.back();
// #endif
}
},
onShow: function () {
uni.removeStorageSync('form_type_cart');
this.getArticleOne();
},
methods: {
getArticleOne: function () {
let that = this;
getArticleDetails(that.id).then((res) => {
uni.setNavigationBarTitle({
title: res.data.title
});
that.$set(that, 'articleInfo', res.data);
that.$set(that, 'store_info', res.data.store_info ? res.data.store_info : {});
that.content = res.data.content;
// #ifdef H5
if (this.$wechat.isWeixin()) {
this.setShareInfo();
}
// #endif
});
},
giveLike() {
if (!this.isLogin) {
toLogin();
} else {
articleStarApi(this.id, {
status: this.articleInfo.is_like ? 0 : 1
}).then((res) => {
let that = this;
uni.showToast({
title: this.articleInfo.is_like ? '取消点赞' : '点赞成功',
icon: 'none',
success: () => {
if (this.articleInfo.is_like) {
that.articleInfo.likes = that.articleInfo.likes - 1;
that.articleInfo.is_like = 0;
} else {
that.articleInfo.likes = that.articleInfo.likes + 1;
that.articleInfo.is_like = 1;
}
}
});
});
}
},
goDetail() {
uni.navigateTo({
url: '/pages/goods_details/index?id=' + this.store_info.id
});
},
listenerActionSheet() {
if (this.$wechat.isWeixin()) {
this.shareInfoStatus = true;
} else {
let that = this;
uni.setClipboardData({
data: HTTP_REQUEST_URL + '/pages/extension/news_details/index?id=' + that.id,
success: () => {
uni.showToast({
title: '已复制页面链接'
});
}
});
}
},
setShareInfoStatus() {
this.shareInfoStatus = false;
},
setShareInfo: function () {
let href = location.href;
let configAppMessage = {
desc: this.articleInfo.synopsis,
title: this.articleInfo.title,
link: href,
imgUrl: this.articleInfo.image_input.length ? this.articleInfo.image_input[0] : ''
};
this.$wechat.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData'], configAppMessage);
}
}
};
</script>
<style>
page {
background-color: #ffffff;
}
</style>
<style lang="scss">
.active {
color: var(--view-theme);
}
.content {
// text-indent: 2em;
}
.ml-52 {
margin-left: 52rpx;
}
.ml-80 {
margin-left: 80rpx;
}
.abs-num {
position: absolute;
right: -26rpx;
top: -10rpx;
}
.likes-num {
position: absolute;
right: -16rpx;
top: -10rpx;
}
.SemiBold {
font-family: 'SemiBold';
}
</style>

View File

@@ -0,0 +1,246 @@
<template>
<!-- 咨询模块 -->
<view :style="colorStyle">
<view class='newsList'>
<view class="w-full h-392 relative" v-if="imgUrls.length > 0">
<swiper
indicator-dots="true"
autoplay
circular
:interval="3000"
:duration="500"
indicator-color="rgba(255,255,255,0.1)"
indicator-active-color="#fff"
class="w-full h-392 relative">
<block v-for="(item,index) in imgUrls" :key="index">
<swiper-item>
<navigator :url="'/pages/extension/news_details/index?id='+item.id">
<image :src="item.image_input[0]" class="w-full h-392" mode="aspectFill" />
</navigator>
</swiper-item>
</block>
</swiper>
</view>
<view class="bg--w111-f5f5f5 relative rd-t-32rpx pt-12 content">
<view class="nab-box w-full flex-between-center">
<scroll-view scroll-x="true"
scroll-with-animation :scroll-left="scrollLeft"
class="white-nowrap vertical-middle w-662 pl-32"
show-scrollbar="false">
<view class="inline-block fs-30 h-88 lh-88rpx mr-40 "
v-for="(item, index) in navList" :key="index"
:class="active == item.id ? 'active' : 'text--w111-999'"
@tap="tabSelect(item.id,index)">{{item.title}}</view>
</scroll-view>
<view class="h-88 w-88 flex-center" @tap="checkGrid">
<text class="iconfont icon-a-ic_Imageandtextsorting fs-32 text--w111-999"></text>
</view>
</view>
<view class="mt-24 grid-column-2 grid-gap-18rpx px-24" v-show="grid">
<view v-for="(item,index) in articleList" :key="index" @tap="getDetail(item.id)">
<easy-loadimage
:image-src="item.image_input[0]"
width="100%"
height="216rpx"
borderRadius="16rpx 16rpx 0 0"></easy-loadimage>
<view class="bg--w111-fff rd-b-16rpx p-20">
<view class="w-full fs-28 h-80 lh-40rpx line2">{{item.title}}</view>
<view class="flex-between-center mt-12 fs-24 text--w111-999">
<text>{{item.add_time}}</text>
<view class="flex-y-center">
<text class="iconfont icon-ic_Eyes fs-28"></text>
<text class="pl-8">{{item.visit}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="mt-24 px-24" v-show="!grid">
<view class="flex justify-between mb-40" v-for="(item,index) in articleList" :key="index"
@tap="getDetail(item.id)">
<easy-loadimage
:image-src="item.image_input[0]"
width="240rpx"
height="152rpx"
borderRadius="16rpx"></easy-loadimage>
<view class="flex-1 pl-24 h-152 flex-col justify-between">
<view class="w-full line2 fs-30 lh-42rpx h-84">{{item.title}}</view>
<view class="flex-between-center mt-12 fs-24 text--w111-999">
<text>{{item.add_time}}</text>
<view class="flex-y-center">
<text class="iconfont icon-ic_Eyes fs-28"></text>
<text class="pl-8">{{item.visit}}</text>
</view>
</view>
</view>
</view>
</view>
<view class='px-20' v-if="!articleList.length">
<emptyPage title="暂无新闻信息~" src="/statics/images/noNews.gif"></emptyPage>
</view>
</view>
</view>
<home></home>
</view>
</template>
<script>
import {
getArticleCategoryList,
getArticleList,
getArticleHotList,
getArticleBannerList
} from '@/api/api.js';
import colors from "@/mixins/color";
import {HTTP_REQUEST_URL} from '@/config/app';
import emptyPage from '@/components/emptyPage.vue';
export default {
components: {
emptyPage
},
mixins: [colors],
data() {
return {
imgUrls: [],
articleList: [],
navList: [],
active: 0,
page: 1,
limit: 10,
status: false,
scrollLeft: 0,
imgHost:HTTP_REQUEST_URL,
grid:true,
};
},
onLoad(){
this.getArticleHot();
this.getArticleBanner();
this.getArticleCate();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.getCidArticle();
},
onPageScroll(object) {
uni.$emit('scroll');
},
methods: {
getDetail(id){
uni.navigateTo({
url:'/pages/extension/news_details/index?id=' + id
})
},
checkGrid(){
this.grid = !this.grid;
},
getArticleHot: function() {
let that = this;
getArticleHotList().then(res => {
that.$set(that, 'articleList', res.data);
});
},
getArticleBanner: function() {
let that = this;
getArticleBannerList().then(res => {
that.imgUrls = res.data;
});
},
getCidArticle: function() {
let that = this;
if (that.active == 0) return;
let articleList = that.articleList;
if (that.status) return;
getArticleList(that.active, {
page: that.page,
limit: that.limit
}).then(res => {
let len = res.data.length;
that.articleList = that.articleList.concat(res.data);
that.page++;
that.status = that.limit > len;
});
},
getArticleCate: function() {
let that = this;
getArticleCategoryList().then(res => {
that.$set(that, 'navList', res.data);
});
},
tabSelect(active,e) {
this.active = active;
this.scrollLeft = e * 60;
// this.scrollLeft = (active - 1) * 50;
if (this.active == 0) this.getArticleHot();
else {
this.$set(this, 'articleList', []);
this.page = 1;
this.status = false;
this.getCidArticle();
}
}
}
}
</script>
<style lang="scss">
.h-392{
height: 392rpx;
}
.content{
left: 0;
top: -32rpx;
}
.active{
color: #333;
font-size: 32rpx;
font-weight: 500;
position: relative;
&::after{
position: absolute;
content: '';
width: 36rpx;
height: 10rpx;
background-image: url('@/static/images/titleBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
left:50%;
bottom: 10rpx;
margin-left: -18rpx;
}
}
// #ifdef APP-PLUS || H5
.newsList /deep/uni-swiper .uni-swiper-dots-horizontal{
bottom: 50rpx;
}
.newsList /deep/uni-swiper .uni-swiper-dots-horizontal .uni-swiper-dot{
width: 10rpx;
height: 10rpx;
border-radius: 50%;
}
.newsList /deep/uni-swiper .uni-swiper-dots-horizontal .uni-swiper-dot-active{
width: 18rpx;
height: 10rpx;
border-radius: 6rpx;
background-color: #fff;
}
.newsList .swiper /deep/.uni-swiper-dot ~ .uni-swiper-dot {
margin-left: 5rpx;
}
// #endif
// #ifdef MP
.newsList /deep/wx-swiper .wx-swiper-dots-horizontal{
bottom: 50rpx;
}
.newsList .swiper /deep/.wx-swiper-dot~.wx-swiper-dot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
margin-left: 5rpx;
}
// #endif
</style>

View File

@@ -0,0 +1,119 @@
/**
* 按钮的点击动画效果,2018年1月12日09:36:48
**/
.click {
-webkit-transition: -webkit-box-shadow .8s;
transition: box-shadow .8s;
}
.click {
-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
-webkit-animation: gelatine 0.5s;
animation: gelatine 1s;
animation-iteration-count: infinite;
/* -webkit-box-shadow: 0 0 0 2px #cff09e, 0 0 0 4px #ff0364;
box-shadow: 0 0 0 2px #cff09e, 0 0 0 4px #ff0364;
-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
-webkit-animation: gelatine 0.5s 1;
animation: gelatine 0.5s 1; */
}
.click {
-webkit-transition-duration: 0;
transition-duration: 0;
}
/**
* $keyframes \ gelatine
**/
@keyframes gelatine {
from,
to {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0.5);
transform: scale(0.8);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
from,
to {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@-webkit-keyframes gelatine {
from,
to {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0.5);
transform: scale(0.8);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
from,
to {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB