新增vuex状态管理
parent
6474f606f4
commit
9ec15c0272
2
App.vue
2
App.vue
|
|
@ -20,7 +20,7 @@
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
onShow: function() {
|
onShow: function() {
|
||||||
if(uni.getStorageSync('phone_active')){
|
if(uni.getStorageSync('token')){
|
||||||
// 刷新token
|
// 刷新token
|
||||||
this.$toolAll.tools.refreshToken();
|
this.$toolAll.tools.refreshToken();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,295 @@
|
||||||
|
<template>
|
||||||
|
<view class="datetime-picker">
|
||||||
|
<view class="mask" :class="{ show: open }" @touchmove.stop.prevent catchtouchmove="true"></view>
|
||||||
|
<view class="wrap" :class="{ show: open }">
|
||||||
|
<view class="picker-header" @touchmove.stop.prevent catchtouchmove="true">
|
||||||
|
<view class="btn-picker cancel" @click="open = false">取消</view>
|
||||||
|
<view class="btn-picker submit" @click="_onSubmit">确定</view>
|
||||||
|
</view>
|
||||||
|
<view class="picker-body">
|
||||||
|
<picker-view :value="value" @change="_onChange">
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="column-item" v-for="item in years" :key="item">
|
||||||
|
{{ item + "年" }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="column-item" v-for="item in months" :key="item">
|
||||||
|
{{ formatNum(item) + "月" }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="column-item" v-for="item in days" :key="item">
|
||||||
|
{{ formatNum(item) + "日" }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="column-item" v-for="item in hours" :key="item">
|
||||||
|
{{ formatNum(item) + "时" }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="column-item" v-for="item in minutes" :key="item">
|
||||||
|
{{ formatNum(item) + "分" }}
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "buuug7-simple-datetime-picker",
|
||||||
|
props: {
|
||||||
|
startYear: {
|
||||||
|
type: Number,
|
||||||
|
default: 2000,
|
||||||
|
},
|
||||||
|
endYear: {
|
||||||
|
type: Number,
|
||||||
|
default: 2030,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
open: false,
|
||||||
|
years: [],
|
||||||
|
months: [],
|
||||||
|
days: [],
|
||||||
|
hours: [],
|
||||||
|
minutes: [],
|
||||||
|
currentDate: new Date(),
|
||||||
|
year: "",
|
||||||
|
month: "",
|
||||||
|
day: "",
|
||||||
|
hour: "",
|
||||||
|
minute: "",
|
||||||
|
value: [0, 0, 0, 0, 0],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
month() {
|
||||||
|
this.initDays();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.initYears();
|
||||||
|
this.initMonths();
|
||||||
|
this.initDays();
|
||||||
|
this.initHours();
|
||||||
|
this.initMinutes();
|
||||||
|
this.setSelectValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
initYears() {
|
||||||
|
const years = [];
|
||||||
|
for (let year = this.startYear; year <= this.endYear; year++) {
|
||||||
|
years.push(year);
|
||||||
|
if (this.currentDate.getFullYear() === year) {
|
||||||
|
this.$set(this.value, 0, year - this.startYear);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.years = years;
|
||||||
|
},
|
||||||
|
|
||||||
|
initMonths() {
|
||||||
|
const months = [];
|
||||||
|
for (let month = 1; month <= 12; month++) {
|
||||||
|
months.push(month);
|
||||||
|
if (this.currentDate.getMonth() + 1 === month) {
|
||||||
|
this.$set(this.value, 1, month - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.months = months;
|
||||||
|
},
|
||||||
|
|
||||||
|
initDays() {
|
||||||
|
const value = this.value;
|
||||||
|
const selectedYear = this.years[value[0]];
|
||||||
|
const selectedMonth = this.months[value[1]];
|
||||||
|
const days = [];
|
||||||
|
const totalDays = new Date(selectedYear, selectedMonth, 0).getDate();
|
||||||
|
for (let day = 1; day <= totalDays; day++) {
|
||||||
|
days.push(day);
|
||||||
|
if (this.currentDate.getDate() === day) {
|
||||||
|
this.$set(value, 2, day - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.days = days;
|
||||||
|
},
|
||||||
|
|
||||||
|
initHours() {
|
||||||
|
const hours = [];
|
||||||
|
for (let hour = 0; hour <= 23; hour++) {
|
||||||
|
hours.push(hour);
|
||||||
|
if (this.currentDate.getHours() === hour) {
|
||||||
|
this.$set(this.value, 3, hour);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.hours = hours;
|
||||||
|
},
|
||||||
|
|
||||||
|
initMinutes() {
|
||||||
|
const minutes = [];
|
||||||
|
for (let minute = 0; minute < 60; minute++) {
|
||||||
|
minutes.push(minute);
|
||||||
|
if (this.currentDate.getMinutes() === minute) {
|
||||||
|
this.$set(this.value, 4, minute);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.minutes = minutes;
|
||||||
|
},
|
||||||
|
|
||||||
|
show() {
|
||||||
|
this.open = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
this.open = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
_onChange(e) {
|
||||||
|
this.value = e.detail.value;
|
||||||
|
this.setSelectValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
setSelectValue() {
|
||||||
|
const v = this.value;
|
||||||
|
|
||||||
|
this.year = this.years[v[0]];
|
||||||
|
this.month = this.months[v[1]];
|
||||||
|
this.day = this.days[v[2]];
|
||||||
|
this.hour = this.hours[v[3]];
|
||||||
|
this.minute = this.minutes[v[4]];
|
||||||
|
},
|
||||||
|
|
||||||
|
_onSubmit() {
|
||||||
|
const {
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day,
|
||||||
|
hour,
|
||||||
|
minute,
|
||||||
|
formatNum
|
||||||
|
} = this;
|
||||||
|
const result = {
|
||||||
|
year: formatNum(year),
|
||||||
|
month: formatNum(month),
|
||||||
|
day: formatNum(day),
|
||||||
|
hour: formatNum(hour),
|
||||||
|
minute: formatNum(minute),
|
||||||
|
};
|
||||||
|
this.$emit("submit", result);
|
||||||
|
this.hide();
|
||||||
|
},
|
||||||
|
|
||||||
|
formatNum(num) {
|
||||||
|
return num < 10 ? "0" + num : num + "";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$transition: all 0.3s ease;
|
||||||
|
$primary: #488ee9;
|
||||||
|
|
||||||
|
.datetime-picker {
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
picker-view {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1000;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: $transition;
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
z-index: 1001;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
transition: $transition;
|
||||||
|
transform: translateY(100%);
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 8px;
|
||||||
|
background-color: darken(#fff, 2%);
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-body {
|
||||||
|
width: 100%;
|
||||||
|
height: 420rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-item {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-picker {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 2;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #eee;
|
||||||
|
font-size: 14px;
|
||||||
|
// border-radius: 2px;
|
||||||
|
color: #000;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-picker.submit {
|
||||||
|
background-color: $primary;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
<template>
|
|
||||||
<view id="main-img">
|
|
||||||
<!-- <view class="mar-x40" v-for="(item,index) in list" :key="index"> -->
|
|
||||||
<!-- 活动商品 start -->
|
|
||||||
<view v-for="(item,index) in activityList" :key="index" class="mar-x50">
|
|
||||||
<h1 class="fon36 bold">{{item.name}}</h1>
|
|
||||||
<view class="colpeili fon26 mar-s20 mar-x40 clips1">{{item.subtitle}}</view>
|
|
||||||
<view class="posir" @tap="goDetail(item.id)">
|
|
||||||
<image class="radius30 animated fadeIn" :src="item.cover" mode="aspectFill" lazy-load style="height: 425rpx;width: 100%;" :style="{height:activityHeight + 'px'}"></image>
|
|
||||||
<view v-if="item.tag!=''" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 活动商品 end -->
|
|
||||||
|
|
||||||
<!-- 子商品 start -->
|
|
||||||
<view class="disjbac fw">
|
|
||||||
<view @tap="goDetail(item.id)" class="width47 mar-x50 posir" v-for="(item,index) in list" :key="index">
|
|
||||||
<image :src="item.cover" mode="aspectFill" lazy-load style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
|
||||||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.name}}</view>
|
|
||||||
<view class="fon30 colpeili">￥{{item.price}}</view>
|
|
||||||
<view v-if="item.tag!=''" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 子商品 end -->
|
|
||||||
<!-- </view> -->
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name:"list-one",
|
|
||||||
props:{
|
|
||||||
list:{
|
|
||||||
type:Array,
|
|
||||||
default:()=>{
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
activityList:{
|
|
||||||
type:Array,
|
|
||||||
default:()=>{
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
check:uni.getStorageSync('is_active'),
|
|
||||||
activityHeight:''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
uni.createSelectorQuery().in(this).select('#main-img').boundingClientRect().exec(rect => {
|
|
||||||
this.activityHeight = rect[0].width;
|
|
||||||
console.log(this.activityHeight,55);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
goDetail(id){//前往详情页
|
|
||||||
if(this.check){
|
|
||||||
uni.navigateTo({
|
|
||||||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
uni.navigateTo({
|
|
||||||
url:`/pages/login/login`
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,163 +0,0 @@
|
||||||
<template>
|
|
||||||
<scroll-view scroll-y @scrolltolower="scrollBottomEv" :style="{height: scrollHeight +'px'}">
|
|
||||||
<view class="disjbac fw">
|
|
||||||
<view @tap="goDetail(item.id)" class="width48_5 mar-x50 posir" v-for="(item,index) in dataList" :key="index">
|
|
||||||
<image class="animated fadeIn" :src="item.imgSrc" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
|
||||||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.title}}</view>
|
|
||||||
<view class="fon30 colpeili">￥{{item.price}}</view>
|
|
||||||
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 暂无更多数据 -->
|
|
||||||
<pitera v-if="showpitera"></pitera>
|
|
||||||
</scroll-view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// 暂无更多组件
|
|
||||||
import pitera from '@/components/nothing/pitera.vue';
|
|
||||||
export default {
|
|
||||||
name:"list-two",
|
|
||||||
components:{
|
|
||||||
pitera
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
// 高度类型
|
|
||||||
scrollCate:{
|
|
||||||
type:Number,
|
|
||||||
default:1
|
|
||||||
},
|
|
||||||
// 页面来源
|
|
||||||
pageSource: {
|
|
||||||
type:Number,
|
|
||||||
default:1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
scrollHeight:uni.getStorageSync('scrollHeight'),
|
|
||||||
// 数据
|
|
||||||
dataList:[
|
|
||||||
{
|
|
||||||
id:1,
|
|
||||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
||||||
title:'于亿年宝藏中臻选1的宝',
|
|
||||||
price:'2,000',
|
|
||||||
isActivity:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id:1,
|
|
||||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
||||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数级钻石每年开采数',
|
|
||||||
price:'2,000',
|
|
||||||
isActivity:false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id:1,
|
|
||||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
||||||
title:'于亿年宝藏中臻选',
|
|
||||||
price:'2,000',
|
|
||||||
isActivity:false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id:1,
|
|
||||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
||||||
title:'于亿年宝藏中臻选',
|
|
||||||
price:'2,000',
|
|
||||||
isActivity:true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id:1,
|
|
||||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
||||||
title:'于亿年宝藏中臻选',
|
|
||||||
price:'2,000',
|
|
||||||
isActivity:false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id:1,
|
|
||||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
||||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
||||||
price:'2,000',
|
|
||||||
isActivity:false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id:1,
|
|
||||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
||||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数的宝石级钻石每年开采数',
|
|
||||||
price:'2,000',
|
|
||||||
isActivity:false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id:1,
|
|
||||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
||||||
title:'于亿年宝藏中臻选',
|
|
||||||
price:'2,000',
|
|
||||||
isActivity:false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id:1,
|
|
||||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
||||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数的宝石级钻石每年开采数',
|
|
||||||
price:'2,000',
|
|
||||||
isActivity:false,
|
|
||||||
}
|
|
||||||
],
|
|
||||||
page:1, // 第几页
|
|
||||||
size:10, // 数量
|
|
||||||
total:0, // 总数
|
|
||||||
showpitera:true, // 是否显示暂无数据
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
switch (this.scrollCate){
|
|
||||||
case 1:
|
|
||||||
this.scrollHeight = uni.getStorageSync('scrollHeight-one'); // App.vue缓存的数据
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
this.scrollHeight = uni.getStorageSync('scrollHeight-two'); // App.vue缓存的数据
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
this.scrollHeight = uni.getStorageSync('scrollHeight-three'); // App.vue缓存的数据
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
this.scrollHeight = uni.getStorageSync('scrollHeight-four'); // App.vue缓存的数据
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
switch (this.pageSource){
|
|
||||||
case 1:
|
|
||||||
this.checkList();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
checkList(){
|
|
||||||
console.log('列表事件')
|
|
||||||
},
|
|
||||||
// 视图容器触底事件
|
|
||||||
scrollBottomEv(){
|
|
||||||
console.log('触底了',55)
|
|
||||||
// 判断总数是否等于数组长度，如果相等显示暂无更多，否则继续执行列表事件
|
|
||||||
if(this.total!=this.dataList.length){
|
|
||||||
// 页数每次+1
|
|
||||||
this.page++
|
|
||||||
switch (this.pageSource){
|
|
||||||
case 1:
|
|
||||||
// this.checkList();// 调用列表事件
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 显示暂无数据
|
|
||||||
this.pitera = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
goDetail(id){//前往详情页
|
|
||||||
uni.navigateTo({
|
|
||||||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
<template>
|
|
||||||
<text :style="{ color: color, 'font-size': size + 'rpx' }" :class="{isTheme:isTheme}" class="lw-icons"
|
|
||||||
@click="_onClick">{{icons[icon]}}</text>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import icons from './icons.js';
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
var domModule = weex.requireModule('dom');
|
|
||||||
domModule.addRule('fontFace', {
|
|
||||||
'fontFamily': 'iconfont',
|
|
||||||
'src': 'url(\'https://at.alicdn.com/t/font_2294175_vq7ymlkpbtm.ttf\')',
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
export default {
|
|
||||||
name: 'UniIcons',
|
|
||||||
props: {
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: '#333333'
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 50
|
|
||||||
},
|
|
||||||
isTheme: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
icons: icons
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
_onClick() {
|
|
||||||
this.$emit('click')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
@font-face {
|
|
||||||
font-family: iconfont;
|
|
||||||
src: url('https://at.alicdn.com/t/font_2294175_vq7ymlkpbtm.ttf')
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #endif */
|
|
||||||
.lw-icons {
|
|
||||||
font-family: iconfont;
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
export default {
|
|
||||||
'aixin':'\ue8ab',
|
|
||||||
'rules':'\ue909',
|
|
||||||
'sound':'\ue8ea',
|
|
||||||
'arrowright':'\uee02'
|
|
||||||
}
|
|
||||||
|
|
@ -1,373 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view class="contentBox" v-if="list.length" @click="toEmit()"
|
|
||||||
:style="'color:' + color + ';background-color:' + backgroundColor + ';height:' + height+'rpx;'">
|
|
||||||
<view v-if="showIcon" class="supBox">
|
|
||||||
<lwIcon :size="32" :color="iconColor" icon="sound"></lwIcon>
|
|
||||||
</view>
|
|
||||||
<view v-if="list.length > 1" class="content">
|
|
||||||
<view v-for="(item, index) in list" :key="index" @tap.stop="dangGao(index)">
|
|
||||||
<view class="loopItemBase" :class="index==0&&firstIn?'fistInClass':''"
|
|
||||||
:animation="realAnimation(index)" v-if="aindexArr.includes(index)"
|
|
||||||
:style="'line-height:'+height+'rpx;'">
|
|
||||||
{{ item }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view v-if="list.length == 1" class="content">
|
|
||||||
<view :style="'line-height:'+height+'rpx;'" @tap.stop="dangGao(0)" class="loopItemBaseShow">{{ list[0] }}</view>
|
|
||||||
</view>
|
|
||||||
<view v-if="showMore" class="offBox">
|
|
||||||
<lwIcon :size="32" :color="moreColor" icon="arrowright"></lwIcon>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/*
|
|
||||||
lw-notice公告上下轮询组件（组件内依赖了自有的字体图标组件，可自行替换为uni或自身项目的图标组件）
|
|
||||||
color:字体颜色
|
|
||||||
backgroundColor:背景色
|
|
||||||
list:要循环的列表数据
|
|
||||||
height:组件高度
|
|
||||||
showScale:是否有缩放动画
|
|
||||||
runTime:间隔切换时间
|
|
||||||
showIcon:是否显示头部小喇叭
|
|
||||||
iconColor:小喇叭的颜色
|
|
||||||
showMore:是否显示尾部更多
|
|
||||||
moreColor:显示更多的颜色
|
|
||||||
*/
|
|
||||||
import lwIcon from './iconFont.vue'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
lwIcon
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: '#666666'
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#f5f5f5'
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
type: Array,
|
|
||||||
default: function(){
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 40
|
|
||||||
},
|
|
||||||
showScale: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
runTime: {
|
|
||||||
type: Number,
|
|
||||||
default: 4000
|
|
||||||
},
|
|
||||||
showIcon: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showMore: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
iconColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#aaaaaa'
|
|
||||||
},
|
|
||||||
moreColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#aaaaaa'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 第一次展示
|
|
||||||
firstIn: true,
|
|
||||||
// 当前显示的项
|
|
||||||
aindexArr: [],
|
|
||||||
// 创建动画的实例
|
|
||||||
animation: null,
|
|
||||||
// 动画对象一
|
|
||||||
animationData: null,
|
|
||||||
// 动画对象二
|
|
||||||
animationDataTwo: null,
|
|
||||||
// 显示项和动画之间的映射关系
|
|
||||||
indexLinkAnimationObj: {},
|
|
||||||
setTimerOne: null,
|
|
||||||
setTimerTwo: null,
|
|
||||||
setTimerThree: null,
|
|
||||||
setTimerFour: null,
|
|
||||||
setTimerFive: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.resetPage()
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// 计算展示项应该展示的动画
|
|
||||||
realAnimation() {
|
|
||||||
return function(value) {
|
|
||||||
if (this.indexLinkAnimationObj[value]) {
|
|
||||||
return this[this.indexLinkAnimationObj[value]]
|
|
||||||
} else {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 开始 按3000毫秒的运行示例图
|
|
||||||
// 1.a显示 执行动画1 锁定动画1 0ms
|
|
||||||
// 2.b显示 执行动画2 锁定动画2 200ms
|
|
||||||
// 3.a隐藏 停止动画1 释放动画1 300ms
|
|
||||||
// 4.c显示 执行动画1 锁定动画1 400ms
|
|
||||||
// 5.b隐藏 停止动画2 释放动画2 500ms
|
|
||||||
// 6.a显示 执行动画2 锁定动画2 600ms
|
|
||||||
// 7.c隐藏 停止动画1 释放动画1 700ms
|
|
||||||
// 8.b显示 执行动画1 锁定动画1 800ms
|
|
||||||
// 9.a隐藏 停止动画2 释放动画2 900ms
|
|
||||||
// 10.c显示 执行动画2 锁定动画2 1000ms
|
|
||||||
initPage() {
|
|
||||||
this.resetPage();
|
|
||||||
if (this.list && this.list.length) {
|
|
||||||
if (this.list.length > 1) {
|
|
||||||
this.aindexArr.push(0);
|
|
||||||
this.animation = uni.createAnimation({
|
|
||||||
timingFunction: 'linear',
|
|
||||||
})
|
|
||||||
// #ifdef H5
|
|
||||||
this.animationDataH5 = this.animation.translateY(-100).step({
|
|
||||||
duration: 10000
|
|
||||||
}).export()
|
|
||||||
// #endif
|
|
||||||
this.runAnimation(0, true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 重置页面动画
|
|
||||||
resetPage() {
|
|
||||||
// 移除所有定时器
|
|
||||||
clearTimeout(this.setTimerOne);
|
|
||||||
clearTimeout(this.setTimerTwo);
|
|
||||||
clearTimeout(this.setTimerThree);
|
|
||||||
clearTimeout(this.setTimerFour);
|
|
||||||
clearTimeout(this.setTimerFive);
|
|
||||||
// 重置页面属性
|
|
||||||
this.aindexArr = [];
|
|
||||||
this.animation = null;
|
|
||||||
this.animationData = null;
|
|
||||||
this.animationDataTwo = null;
|
|
||||||
this.indexLinkAnimationObj = {};
|
|
||||||
},
|
|
||||||
// 执行动画方法(此方法内不要清除赋值的定时器)
|
|
||||||
runAnimation(value, firstIn) {
|
|
||||||
let that = this;
|
|
||||||
if (!firstIn) {
|
|
||||||
that.aindexArr.push(value);
|
|
||||||
}
|
|
||||||
// 获取执行动画对象
|
|
||||||
let lockText = that.createAni(firstIn);
|
|
||||||
// 延迟50毫秒执行(等待dom渲染)
|
|
||||||
that.setTimerOne = setTimeout(() => {
|
|
||||||
// 创建执行动画和执行方之间的映射关系
|
|
||||||
that.indexLinkAnimationObj[value] = lockText;
|
|
||||||
// console.log('已经创建完成绑定关系')
|
|
||||||
// console.log(that.indexLinkAnimationObj)
|
|
||||||
// 获取基础执行时间单位
|
|
||||||
let unitRunTime = (that.runTime - 50) / 6;
|
|
||||||
let waitTime = firstIn ? unitRunTime * 4 : unitRunTime * 5;
|
|
||||||
let waitTimeTwo = firstIn ? (that.runTime - unitRunTime) : that.runTime;
|
|
||||||
// #ifdef H5
|
|
||||||
waitTimeTwo = firstIn ? (that.runTime - (1.5 * unitRunTime)) : that.runTime;
|
|
||||||
//H5重新刷新一下动画绑定关系
|
|
||||||
if (firstIn) {
|
|
||||||
that.aindexArr.splice(0, 1);
|
|
||||||
that.aindexArr.push(0);
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// 开启下一个动画
|
|
||||||
that.setTimerTwo = setTimeout(() => {
|
|
||||||
let Index = value == that.list.length - 1 ? 0 : value + 1;
|
|
||||||
that.runAnimation(Index)
|
|
||||||
}, waitTime)
|
|
||||||
// 释放上一个执行方
|
|
||||||
that.setTimerThree = setTimeout(() => {
|
|
||||||
let index = that.aindexArr.indexOf(value);
|
|
||||||
that.aindexArr.splice(index, 1)
|
|
||||||
that.firstIn = false;
|
|
||||||
delete that.indexLinkAnimationObj[value]
|
|
||||||
}, waitTimeTwo)
|
|
||||||
}, 50)
|
|
||||||
},
|
|
||||||
// 创建动画方法
|
|
||||||
createAni(firstIn) {
|
|
||||||
let that = this;
|
|
||||||
let unitRunTime = (that.runTime - 50) / 6;
|
|
||||||
|
|
||||||
let delayTime = unitRunTime * 4;
|
|
||||||
let durationTime = unitRunTime;
|
|
||||||
let dispairTime = unitRunTime;
|
|
||||||
// #ifdef H5
|
|
||||||
delayTime = unitRunTime * 3.5;
|
|
||||||
dispairTime = unitRunTime * 1.5;
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
let showTransformHeight = -uni.upx2px(that.height);
|
|
||||||
let hideTransformHeight = showTransformHeight * 2;
|
|
||||||
// 创建动画
|
|
||||||
if (that.showScale) {
|
|
||||||
if (firstIn) {
|
|
||||||
// that.animation.translateY(1).scale(1,1).step({ duration: 5 });
|
|
||||||
that.animation.translateY(showTransformHeight).scale(0.5, 0.5).step({
|
|
||||||
delay: delayTime,
|
|
||||||
duration: dispairTime
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
that.animation.translateY(showTransformHeight).scale(1, 1).step({
|
|
||||||
duration: durationTime
|
|
||||||
});
|
|
||||||
that.animation.translateY(hideTransformHeight).scale(0.5, 0.5).step({
|
|
||||||
delay: delayTime,
|
|
||||||
duration: dispairTime
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (firstIn) {
|
|
||||||
// that.animation.translateY(1).step({ duration: 5 });
|
|
||||||
that.animation.translateY(showTransformHeight).step({
|
|
||||||
delay: delayTime,
|
|
||||||
duration: dispairTime
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
that.animation.translateY(showTransformHeight).step({
|
|
||||||
duration: durationTime
|
|
||||||
});
|
|
||||||
that.animation.translateY(hideTransformHeight).step({
|
|
||||||
delay: delayTime,
|
|
||||||
duration: dispairTime
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 判断动画赋值项并赋值
|
|
||||||
if (!that.animationData) {
|
|
||||||
that.animationData = that.animation.export()
|
|
||||||
that.setTimerFour = setTimeout(() => {
|
|
||||||
clearTimeout(that.setTimerFour)
|
|
||||||
that.animationData = false;
|
|
||||||
}, that.runTime)
|
|
||||||
return 'animationData'
|
|
||||||
} else {
|
|
||||||
that.animationDataTwo = that.animation.export()
|
|
||||||
that.setTimerFive = setTimeout(() => {
|
|
||||||
clearTimeout(that.setTimerFive)
|
|
||||||
that.animationDataTwo = false;
|
|
||||||
}, that.runTime)
|
|
||||||
return 'animationDataTwo'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 抛出点击事件
|
|
||||||
toEmit() {
|
|
||||||
let that = this
|
|
||||||
if (that.list.length == 1) {
|
|
||||||
that.$emit('itemClick', that.list[0])
|
|
||||||
} else {
|
|
||||||
that.$emit('itemClick', that.list[that.aindexArr[0]])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dangGao(index){
|
|
||||||
let that = this
|
|
||||||
if (that.list.length != 0) {
|
|
||||||
that.$emit('dangGao', index)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// 判断list有值后开启动画
|
|
||||||
// setTimeout()
|
|
||||||
this.initPage()
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
list(value) {
|
|
||||||
this.initPage()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.contentBox {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
// padding: 0 20rpx;
|
|
||||||
align-items: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 24rpx;
|
|
||||||
.supBox {
|
|
||||||
width: 50rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.offBox {
|
|
||||||
width: 50rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
width: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
align-items: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.loopItemBase {
|
|
||||||
left: 0;
|
|
||||||
top: 100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 28rpx;
|
|
||||||
text-align: left;
|
|
||||||
position: absolute;
|
|
||||||
white-space: nowrap;
|
|
||||||
align-items: center;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
&.fistInClass {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loopItemBaseShow {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
// height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 28rpx;
|
|
||||||
text-align: left;
|
|
||||||
white-space: nowrap;
|
|
||||||
align-items: center;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,292 @@
|
||||||
|
<template>
|
||||||
|
<view class="xzw_notice" :style="{color:getColor(theme),backgroundColor:getBgColor(theme)}">
|
||||||
|
<uni-icons v-if="showIcon === true || showIcon === 'true'" class="notice_left" type="sound" :color="getColor(theme)" size="22" />
|
||||||
|
<swiper class="notice_center" vertical v-if="direction=='column'" :autoplay="true" :interval="4000" :duration="500" :circular="true" disable-touch>
|
||||||
|
<swiper-item v-for="(item, index) in list" :key="index" class="swiperIn" @click="goItem(item)">
|
||||||
|
<view>{{item[theKey]}}</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<view :class="['','notice_center1','notice_center2','notice_center3','notice_center4','notice_center5'][speedTime]" v-else><view class="content">{{list[0][theKey]}}</view></view>
|
||||||
|
<view class="notice_right" v-if="showMore">
|
||||||
|
<view @click="goMore">更多</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"notice-one",
|
||||||
|
props:{
|
||||||
|
// 速度
|
||||||
|
speed: {
|
||||||
|
type:Number,
|
||||||
|
default:1
|
||||||
|
},
|
||||||
|
//主题色,default|primary|error|warning|success|info
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
|
},
|
||||||
|
// 是否显示左侧icon
|
||||||
|
showIcon: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 是否显示更多
|
||||||
|
showMore: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [{id:1,title:'公告1'},{id:2,title:'公告2'}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//公告数组的键名
|
||||||
|
theKey:{
|
||||||
|
type: String,
|
||||||
|
default: 'title'
|
||||||
|
},
|
||||||
|
//方向，column垂直，row水平时取第一条公告
|
||||||
|
direction:{
|
||||||
|
type: String,
|
||||||
|
default: 'column'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
text:'',
|
||||||
|
speedTime:1
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 缓存状态栏+标题栏的高度
|
||||||
|
const query = wx.createSelectorQuery().in(this)
|
||||||
|
query.select('.content').boundingClientRect((rect) => {
|
||||||
|
console.log(rect.width);
|
||||||
|
let newWidth = rect.width;
|
||||||
|
if(newWidth <=420) {
|
||||||
|
this.speedTime = 1;
|
||||||
|
}
|
||||||
|
if(newWidth >= 420 && newWidth < 720) {
|
||||||
|
this.speedTime = 2;
|
||||||
|
}
|
||||||
|
if(newWidth >= 720 && newWidth < 820) {
|
||||||
|
this.speedTime = 3;
|
||||||
|
}
|
||||||
|
if(newWidth >= 820 && newWidth < 920) {
|
||||||
|
this.speedTime = 4;
|
||||||
|
}
|
||||||
|
if(newWidth >= 920) {
|
||||||
|
this.speedTime = 5;
|
||||||
|
}
|
||||||
|
}).exec()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
getColor(theme){
|
||||||
|
if(theme=="primary"){
|
||||||
|
return "#2979FF"
|
||||||
|
}else if(theme=="error"){
|
||||||
|
return "#FA3534"
|
||||||
|
}else if(theme=="warning"){
|
||||||
|
return "#FF9A43"
|
||||||
|
}else if(theme=="success"){
|
||||||
|
return "#1BBF6C"
|
||||||
|
}else if(theme=="info"){
|
||||||
|
return "#909399"
|
||||||
|
}else{
|
||||||
|
return "#303133"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getBgColor(theme){
|
||||||
|
if(theme=="primary"){
|
||||||
|
return "#ECF5FF"
|
||||||
|
}else if(theme=="error"){
|
||||||
|
return "#FEF0F0"
|
||||||
|
}else if(theme=="warning"){
|
||||||
|
return "#FDF6EC"
|
||||||
|
}else if(theme=="success"){
|
||||||
|
return "#DBF1E1"
|
||||||
|
}else if(theme=="info"){
|
||||||
|
return "#F4F4F5"
|
||||||
|
}else{
|
||||||
|
return "#FFFFFF"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
goItem(item){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/pagesB/notice-detail/notice-detail?id=${item.id}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goMore(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/pagesB/notice-list/notice-list`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.xzw_notice {
|
||||||
|
font-size: 26upx;
|
||||||
|
height: 40upx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
.notice_left{
|
||||||
|
margin: 0 20upx 0 0;
|
||||||
|
}
|
||||||
|
.notice_center{
|
||||||
|
flex:1;
|
||||||
|
height:90upx;
|
||||||
|
.swiperIn{
|
||||||
|
height:80upx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
view{
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_center1{
|
||||||
|
flex:1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height:90upx;
|
||||||
|
overflow: hidden;
|
||||||
|
view{
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-left: 100%;
|
||||||
|
animation: notice 5s 0s linear infinite both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_right {
|
||||||
|
margin: 0 0 0 20upx;
|
||||||
|
}
|
||||||
|
@keyframes notice {
|
||||||
|
100% {
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_center1{
|
||||||
|
flex:1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height:90upx;
|
||||||
|
overflow: hidden;
|
||||||
|
view{
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-left: 100%;
|
||||||
|
animation: notice 5s 0s linear infinite both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_right {
|
||||||
|
margin: 0 0 0 20upx;
|
||||||
|
}
|
||||||
|
@keyframes notice {
|
||||||
|
100% {
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_center2{
|
||||||
|
flex:1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height:90upx;
|
||||||
|
overflow: hidden;
|
||||||
|
view{
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-left: 100%;
|
||||||
|
animation: notice 10s 0s linear infinite both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_right {
|
||||||
|
margin: 0 0 0 20upx;
|
||||||
|
}
|
||||||
|
@keyframes notice {
|
||||||
|
100% {
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_center3{
|
||||||
|
flex:1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height:90upx;
|
||||||
|
overflow: hidden;
|
||||||
|
view{
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-left: 100%;
|
||||||
|
animation: notice 15s 0s linear infinite both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_right {
|
||||||
|
margin: 0 0 0 20upx;
|
||||||
|
}
|
||||||
|
@keyframes notice {
|
||||||
|
100% {
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_center4{
|
||||||
|
flex:1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height:90upx;
|
||||||
|
overflow: hidden;
|
||||||
|
view{
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-left: 100%;
|
||||||
|
animation: notice 20s 0s linear infinite both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_right {
|
||||||
|
margin: 0 0 0 20upx;
|
||||||
|
}
|
||||||
|
@keyframes notice {
|
||||||
|
100% {
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_center5{
|
||||||
|
flex:1;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height:90upx;
|
||||||
|
overflow: hidden;
|
||||||
|
view{
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-left: 100%;
|
||||||
|
animation: notice 25s 0s linear infinite both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notice_right {
|
||||||
|
margin: 0 0 0 20upx;
|
||||||
|
}
|
||||||
|
@keyframes notice {
|
||||||
|
100% {
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
### 安装方式
|
||||||
|
|
||||||
|
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||||
|
|
||||||
|
### 说明
|
||||||
|
由于官方公告组件uni-notice-bar没有垂直滚动的功能, 所以利用swiper加入了垂直滚动, 加入了常用主题色, 可以自己去添加, 需要用到uni-icons
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 默认垂直滚动 -->
|
||||||
|
<xzw-notice/>
|
||||||
|
<!-- 水平滚动,取数组第一条 -->
|
||||||
|
<xzw-notice theme="info" direction="row"/>
|
||||||
|
<!-- theme主题色,default|primary|error|warning|success|info -->
|
||||||
|
<xzw-notice theme="error" direction="row"/>
|
||||||
|
<!-- 点击公告,点击更多 -->
|
||||||
|
<xzw-notice theme="warning" @goItem="goItem" @goMore="goMore"/>
|
||||||
|
<!-- 绑定公告数组,默认取每一项的title字段,可以通过theKey改变读取的字段 -->
|
||||||
|
<xzw-notice theme="success" :list="list2" theKey="name"/>
|
||||||
|
<!-- 是否显示左侧喇叭,是否显示更多 -->
|
||||||
|
<xzw-notice theme="primary" :list="list2" theKey="name" :showIcon="false" :showMore="false"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list:[{id:1,title:'公告1'},{id:2,title:'公告2'}]
|
||||||
|
list2:[{id:1,name:'公告3'},{id:2,name:'公告4'}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goItem(item){
|
||||||
|
uni.showToast({
|
||||||
|
title:'你点击的公告id是'+item.id,
|
||||||
|
icon:'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goMore(){
|
||||||
|
uni.showToast({
|
||||||
|
title:'点击更多',
|
||||||
|
icon:'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Tag Props
|
||||||
|
|
||||||
|
|属性名 |类型 |默认值 |说明 |
|
||||||
|
|:-: |:-: |:-: |:-: |
|
||||||
|
|list |Array | |公告数组 |
|
||||||
|
|theme |String |default |主题 |
|
||||||
|
|showIcon |Boolean |true |是否显示左侧icon |
|
||||||
|
|showMore |Boolean |true |是否显示更多 |
|
||||||
|
|theKey |String |title |公告数组的键名 |
|
||||||
|
|direction |String |column |滚动的方向 |
|
||||||
|
|
||||||
|
|
||||||
|
### Tag Events
|
||||||
|
|
||||||
|
|事件称名 |说明 |返回值 |
|
||||||
|
|:-: |:-: |:-: |
|
||||||
|
|@goItem |点击公告 |- |
|
||||||
|
|@goMore |点击更多 |- |
|
||||||
|
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
export default {
|
||||||
|
"pulldown": "\ue588",
|
||||||
|
"refreshempty": "\ue461",
|
||||||
|
"back": "\ue471",
|
||||||
|
"forward": "\ue470",
|
||||||
|
"more": "\ue507",
|
||||||
|
"more-filled": "\ue537",
|
||||||
|
"scan": "\ue612",
|
||||||
|
"qq": "\ue264",
|
||||||
|
"weibo": "\ue260",
|
||||||
|
"weixin": "\ue261",
|
||||||
|
"pengyouquan": "\ue262",
|
||||||
|
"loop": "\ue565",
|
||||||
|
"refresh": "\ue407",
|
||||||
|
"refresh-filled": "\ue437",
|
||||||
|
"arrowthindown": "\ue585",
|
||||||
|
"arrowthinleft": "\ue586",
|
||||||
|
"arrowthinright": "\ue587",
|
||||||
|
"arrowthinup": "\ue584",
|
||||||
|
"undo-filled": "\ue7d6",
|
||||||
|
"undo": "\ue406",
|
||||||
|
"redo": "\ue405",
|
||||||
|
"redo-filled": "\ue7d9",
|
||||||
|
"bars": "\ue563",
|
||||||
|
"chatboxes": "\ue203",
|
||||||
|
"camera": "\ue301",
|
||||||
|
"chatboxes-filled": "\ue233",
|
||||||
|
"camera-filled": "\ue7ef",
|
||||||
|
"cart-filled": "\ue7f4",
|
||||||
|
"cart": "\ue7f5",
|
||||||
|
"checkbox-filled": "\ue442",
|
||||||
|
"checkbox": "\ue7fa",
|
||||||
|
"arrowleft": "\ue582",
|
||||||
|
"arrowdown": "\ue581",
|
||||||
|
"arrowright": "\ue583",
|
||||||
|
"smallcircle-filled": "\ue801",
|
||||||
|
"arrowup": "\ue580",
|
||||||
|
"circle": "\ue411",
|
||||||
|
"eye-filled": "\ue568",
|
||||||
|
"eye-slash-filled": "\ue822",
|
||||||
|
"eye-slash": "\ue823",
|
||||||
|
"eye": "\ue824",
|
||||||
|
"flag-filled": "\ue825",
|
||||||
|
"flag": "\ue508",
|
||||||
|
"gear-filled": "\ue532",
|
||||||
|
"reload": "\ue462",
|
||||||
|
"gear": "\ue502",
|
||||||
|
"hand-thumbsdown-filled": "\ue83b",
|
||||||
|
"hand-thumbsdown": "\ue83c",
|
||||||
|
"hand-thumbsup-filled": "\ue83d",
|
||||||
|
"heart-filled": "\ue83e",
|
||||||
|
"hand-thumbsup": "\ue83f",
|
||||||
|
"heart": "\ue840",
|
||||||
|
"home": "\ue500",
|
||||||
|
"info": "\ue504",
|
||||||
|
"home-filled": "\ue530",
|
||||||
|
"info-filled": "\ue534",
|
||||||
|
"circle-filled": "\ue441",
|
||||||
|
"chat-filled": "\ue847",
|
||||||
|
"chat": "\ue263",
|
||||||
|
"mail-open-filled": "\ue84d",
|
||||||
|
"email-filled": "\ue231",
|
||||||
|
"mail-open": "\ue84e",
|
||||||
|
"email": "\ue201",
|
||||||
|
"checkmarkempty": "\ue472",
|
||||||
|
"list": "\ue562",
|
||||||
|
"locked-filled": "\ue856",
|
||||||
|
"locked": "\ue506",
|
||||||
|
"map-filled": "\ue85c",
|
||||||
|
"map-pin": "\ue85e",
|
||||||
|
"map-pin-ellipse": "\ue864",
|
||||||
|
"map": "\ue364",
|
||||||
|
"minus-filled": "\ue440",
|
||||||
|
"mic-filled": "\ue332",
|
||||||
|
"minus": "\ue410",
|
||||||
|
"micoff": "\ue360",
|
||||||
|
"mic": "\ue302",
|
||||||
|
"clear": "\ue434",
|
||||||
|
"smallcircle": "\ue868",
|
||||||
|
"close": "\ue404",
|
||||||
|
"closeempty": "\ue460",
|
||||||
|
"paperclip": "\ue567",
|
||||||
|
"paperplane": "\ue503",
|
||||||
|
"paperplane-filled": "\ue86e",
|
||||||
|
"person-filled": "\ue131",
|
||||||
|
"contact-filled": "\ue130",
|
||||||
|
"person": "\ue101",
|
||||||
|
"contact": "\ue100",
|
||||||
|
"images-filled": "\ue87a",
|
||||||
|
"phone": "\ue200",
|
||||||
|
"images": "\ue87b",
|
||||||
|
"image": "\ue363",
|
||||||
|
"image-filled": "\ue877",
|
||||||
|
"location-filled": "\ue333",
|
||||||
|
"location": "\ue303",
|
||||||
|
"plus-filled": "\ue439",
|
||||||
|
"plus": "\ue409",
|
||||||
|
"plusempty": "\ue468",
|
||||||
|
"help-filled": "\ue535",
|
||||||
|
"help": "\ue505",
|
||||||
|
"navigate-filled": "\ue884",
|
||||||
|
"navigate": "\ue501",
|
||||||
|
"mic-slash-filled": "\ue892",
|
||||||
|
"search": "\ue466",
|
||||||
|
"settings": "\ue560",
|
||||||
|
"sound": "\ue590",
|
||||||
|
"sound-filled": "\ue8a1",
|
||||||
|
"spinner-cycle": "\ue465",
|
||||||
|
"download-filled": "\ue8a4",
|
||||||
|
"personadd-filled": "\ue132",
|
||||||
|
"videocam-filled": "\ue8af",
|
||||||
|
"personadd": "\ue102",
|
||||||
|
"upload": "\ue402",
|
||||||
|
"upload-filled": "\ue8b1",
|
||||||
|
"starhalf": "\ue463",
|
||||||
|
"star-filled": "\ue438",
|
||||||
|
"star": "\ue408",
|
||||||
|
"trash": "\ue401",
|
||||||
|
"phone-filled": "\ue230",
|
||||||
|
"compose": "\ue400",
|
||||||
|
"videocam": "\ue300",
|
||||||
|
"trash-filled": "\ue8dc",
|
||||||
|
"download": "\ue403",
|
||||||
|
"chatbubble-filled": "\ue232",
|
||||||
|
"chatbubble": "\ue202",
|
||||||
|
"cloud-download": "\ue8e4",
|
||||||
|
"cloud-upload-filled": "\ue8e5",
|
||||||
|
"cloud-upload": "\ue8e6",
|
||||||
|
"cloud-download-filled": "\ue8e9",
|
||||||
|
"headphones":"\ue8bf",
|
||||||
|
"shop":"\ue609"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<template>
|
||||||
|
<text :style="{ color: color, 'font-size': size + 'px' }" class="uni-icons" :class="[customIcons,customIcons?type:'']" @click="_onClick">{{icons[type]}}</text>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import icons from './icons.js';
|
||||||
|
export default {
|
||||||
|
name: 'UniIcons',
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#333333'
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 16
|
||||||
|
},
|
||||||
|
customIcons:{
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
icons: icons
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_onClick() {
|
||||||
|
this.$emit('click')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
@font-face {
|
||||||
|
font-family: uniicons;
|
||||||
|
src: url('./uni.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
.uni-icons {
|
||||||
|
font-family: uniicons;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
|
@ -1,42 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view v-if="showShare" @tap="closeShare" style="position: fixed;top: 0;right: 0;left: 0;bottom: 0;background-color: rgba(0,0,0,.5);z-index: 10;">
|
|
||||||
</view>
|
|
||||||
<view v-if="showShare" style="display: flex;flex-direction: column;justify-content: space-around;
|
|
||||||
position: fixed;bottom: 0;left: 0;right: 0;z-index: 100; background-color: #FFFFFF;padding: 40rpx;">
|
|
||||||
<view class="posir" v-for="(item,index) in cateArr" :key="index" style="display: flex;justify-content: center;align-items: center;flex-direction: column;width: 25%;">
|
|
||||||
<image style="width: 100rpx;height: 100rpx;margin-bottom: 10rpx;" :src="item.src" mode=""></image>
|
|
||||||
<view class="fon28 color33">{{item.title}}</view>
|
|
||||||
<button data-name="shareBtn" open-type="share" plain="true" class="posia" style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;">分享</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name:'shareAll',
|
|
||||||
props:{
|
|
||||||
showShare:{
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
cateArr:[
|
|
||||||
{src:'/static/img/share/weix.png',title:'微信好友'},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
closeShare(){
|
|
||||||
this.$emit('closeShare')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,188 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="status-box statusHNH">
|
|
||||||
<!-- 网络、电量栏 start -->
|
|
||||||
<view :style="{height: statusBarHeight+'px',background: backgroudColor}"></view>
|
|
||||||
<!-- 网络、电量栏 end -->
|
|
||||||
|
|
||||||
<!-- 头部状态栏 start -->
|
|
||||||
<view class="status-nav"
|
|
||||||
:style="{background: backgroudColor,height: navBarHeight+'px'}">
|
|
||||||
<!-- 返回键 -->
|
|
||||||
<view class="return-box" @tap="backEv" v-if="ifReturn"
|
|
||||||
:style="{height: navBarHeight+'px'}">
|
|
||||||
<slot name="leftContent">
|
|
||||||
<i class="icon icon-return" style="font-size: 32rpx;"
|
|
||||||
:style="{color: returnColor}"></i>
|
|
||||||
</slot>
|
|
||||||
</view>
|
|
||||||
<!-- 标题 -->
|
|
||||||
<view class="tab-title" v-if="ifTitle && ifNet"
|
|
||||||
:style="{
|
|
||||||
color: titleColor,
|
|
||||||
justifyContent: ifCenter ? 'center' : '',
|
|
||||||
padding: ifCenter ? '0px' : `${ifReturn ? '0 38' : '0 15'}px`}">
|
|
||||||
<view class="title-box" :class="['','clips1','clips2'][clipNumber]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">{{navBarTitle}}</view>
|
|
||||||
</view>
|
|
||||||
<view class="tab-title" v-if="!ifNet"
|
|
||||||
:style="{
|
|
||||||
color: titleColor,
|
|
||||||
justifyContent: ifCenter ? 'center' : '',
|
|
||||||
padding: ifCenter ? '0px' : `${ifReturn ? '0 38' : '0 15'}px`}">
|
|
||||||
<view class="title-box" :class="['','clips1','clips2'][clipNumber]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">{{netText}}<text @tap="refreshEv" style="color: #3875F6;margin-left: 20rpx;">刷新</text></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 头部状态栏 end -->
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name:'status-nav',
|
|
||||||
props:{
|
|
||||||
//状态栏、导航栏背景颜色
|
|
||||||
backgroudColor:{
|
|
||||||
type:String,
|
|
||||||
default:'#FFFFFF'
|
|
||||||
},
|
|
||||||
// 默认导航栏高度
|
|
||||||
navBarHeight: {
|
|
||||||
type:Number,
|
|
||||||
default:40
|
|
||||||
},
|
|
||||||
//是否显示返回键
|
|
||||||
ifReturn:{
|
|
||||||
type:Boolean,
|
|
||||||
default:true
|
|
||||||
},
|
|
||||||
// 返回键颜色
|
|
||||||
returnColor: {
|
|
||||||
type:String,
|
|
||||||
default:'#000'
|
|
||||||
},
|
|
||||||
//是否显示标题
|
|
||||||
ifTitle:{
|
|
||||||
type:Boolean,
|
|
||||||
default:true
|
|
||||||
},
|
|
||||||
// 导航栏标题
|
|
||||||
navBarTitle: {
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
},
|
|
||||||
// 标题最多几行显示
|
|
||||||
clipNumber: {
|
|
||||||
type:Number,
|
|
||||||
default:1
|
|
||||||
},
|
|
||||||
//标题颜色
|
|
||||||
titleColor:{
|
|
||||||
type:String,
|
|
||||||
default:'#333333'
|
|
||||||
},
|
|
||||||
// 标题是否居中
|
|
||||||
ifCenter: {
|
|
||||||
type:Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 来自哪里
|
|
||||||
fromWhere: {
|
|
||||||
type:Number,
|
|
||||||
default:0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
|
||||||
ifNet:true ,// 是否有网络
|
|
||||||
netText:'当前无网络',
|
|
||||||
netTimer:null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// 网络监测
|
|
||||||
this.$toolAll.tools.networkStatus();
|
|
||||||
// 缓存状态栏+标题栏的高度
|
|
||||||
// const query = wx.createSelectorQuery().in(this)
|
|
||||||
// query.select('.statusHNH').boundingClientRect((rect) => {
|
|
||||||
// uni.setStorageSync('statusHNH',rect.height)
|
|
||||||
// }).exec();
|
|
||||||
|
|
||||||
// 获取当前页面路径
|
|
||||||
this.$toolAll.tools.obtainUrl();
|
|
||||||
this.$toolAll.tools.obtainUrlParam();
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.ifNet = uni.getStorageSync('isNet');
|
|
||||||
},500)
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
// 刷新网络事件
|
|
||||||
refreshEv(){
|
|
||||||
this.netText = '正在刷新...';
|
|
||||||
let outTime = 0;//十秒超时
|
|
||||||
this.netTimer = setInterval(()=>{
|
|
||||||
outTime++;
|
|
||||||
this.$toolAll.tools.networkStatus();
|
|
||||||
if(uni.getStorageSync('isNet')) {
|
|
||||||
clearInterval(this.netTimer);
|
|
||||||
this.ifNet = true;
|
|
||||||
}
|
|
||||||
if(outTime==10) {
|
|
||||||
clearInterval(this.netTimer);
|
|
||||||
this.netText = '刷新失败';
|
|
||||||
outTime = 0;
|
|
||||||
}
|
|
||||||
},1000)
|
|
||||||
},
|
|
||||||
//返回事件
|
|
||||||
backEv(){
|
|
||||||
if(uni.getStorageSync('outside')*1==2){
|
|
||||||
this.fromWhere = uni.getStorageSync('outside')*1;
|
|
||||||
}
|
|
||||||
switch (this.fromWhere){
|
|
||||||
case 1:
|
|
||||||
case 2:
|
|
||||||
uni.navigateTo({
|
|
||||||
url:'/pages/tabbar/pagehome/pagehome'
|
|
||||||
})
|
|
||||||
uni.setStorageSync('outside',0)
|
|
||||||
break;
|
|
||||||
case 0:
|
|
||||||
uni.navigateBack({
|
|
||||||
delta:1
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
||||||
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
||||||
|
|
||||||
.status-box{
|
|
||||||
position: fixed;top: 0;left: 0;right: 0;z-index: 10;
|
|
||||||
}
|
|
||||||
.status-nav{
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.return-box {
|
|
||||||
display: flex;justify-content: center;align-items: center;flex-shrink: 0;
|
|
||||||
position: absolute;
|
|
||||||
padding: 0rpx 10rpx;
|
|
||||||
}
|
|
||||||
.return-box i {font-size: 56rpx;}
|
|
||||||
.tab-title{
|
|
||||||
width: 100%;
|
|
||||||
font-size: 32rpx;
|
|
||||||
display: flex;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.tab-title .title-box{margin-top: -4rpx;}
|
|
||||||
</style>
|
|
||||||
252
jsFile/tools.js
252
jsFile/tools.js
|
|
@ -1,6 +1,6 @@
|
||||||
|
const app = getApp();
|
||||||
const tools = {
|
const tools = {
|
||||||
timer:'',
|
timer:'',
|
||||||
timerNot:'',
|
|
||||||
// 埋点倒计时
|
// 埋点倒计时
|
||||||
daoTime(){
|
daoTime(){
|
||||||
let daoTime = uni.getStorageSync('daoTime')
|
let daoTime = uni.getStorageSync('daoTime')
|
||||||
|
|
@ -9,13 +9,10 @@ const tools = {
|
||||||
daoTime = uni.getStorageSync('daoTime')
|
daoTime = uni.getStorageSync('daoTime')
|
||||||
this.timer = setInterval(()=>{
|
this.timer = setInterval(()=>{
|
||||||
uni.setStorageSync('daoTime',daoTime--)//设置倒计时
|
uni.setStorageSync('daoTime',daoTime--)//设置倒计时
|
||||||
// console.log('埋点倒计时初次：',daoTime);
|
|
||||||
// console.log('埋点长度初次：',uni.getStorageSync('maiList').length);
|
|
||||||
if(uni.getStorageSync('daoTime')<=0 || uni.getStorageSync('maiList').length==5){
|
if(uni.getStorageSync('daoTime')<=0 || uni.getStorageSync('maiList').length==5){
|
||||||
uni.removeStorageSync('daoTime')//清空倒计时
|
uni.removeStorageSync('daoTime')//清空倒计时
|
||||||
clearInterval(this.timer)//关闭倒计时
|
clearInterval(this.timer)//关闭倒计时
|
||||||
// console.log('上/报，埋点');
|
// console.log('上/报，埋点');
|
||||||
// reportBuriedPoint(uni.getStorageSync('maiList'))//上报事件
|
|
||||||
uni.removeStorageSync('maiList')//清空上报参数
|
uni.removeStorageSync('maiList')//清空上报参数
|
||||||
this.daoTime()//重新倒计时
|
this.daoTime()//重新倒计时
|
||||||
}
|
}
|
||||||
|
|
@ -23,13 +20,10 @@ const tools = {
|
||||||
} else {//继续当前倒计时倒计
|
} else {//继续当前倒计时倒计
|
||||||
this.timer = setInterval(()=>{
|
this.timer = setInterval(()=>{
|
||||||
uni.setStorageSync('daoTime',daoTime--)//设置倒计时
|
uni.setStorageSync('daoTime',daoTime--)//设置倒计时
|
||||||
// console.log('埋点倒计时：',daoTime);
|
|
||||||
// console.log('埋点长度：',uni.getStorageSync('maiList').length);
|
|
||||||
if(uni.getStorageSync('daoTime')<=0 || uni.getStorageSync('maiList').length==5){
|
if(uni.getStorageSync('daoTime')<=0 || uni.getStorageSync('maiList').length==5){
|
||||||
uni.removeStorageSync('daoTime')//清空倒计时
|
uni.removeStorageSync('daoTime')//清空倒计时
|
||||||
clearInterval(this.timer)//关闭倒计时
|
clearInterval(this.timer)//关闭倒计时
|
||||||
// console.log('上报，埋点');
|
// console.log('上报，埋点');
|
||||||
// reportBuriedPoint(uni.getStorageSync('maiList'))//上报事件
|
|
||||||
uni.removeStorageSync('maiList')//清空上报参数
|
uni.removeStorageSync('maiList')//清空上报参数
|
||||||
this.daoTime()//重新倒计时
|
this.daoTime()//重新倒计时
|
||||||
}
|
}
|
||||||
|
|
@ -39,15 +33,6 @@ const tools = {
|
||||||
closeTimer(){
|
closeTimer(){
|
||||||
clearInterval(this.timer)//关闭倒计时
|
clearInterval(this.timer)//关闭倒计时
|
||||||
console.log('倒计时清空了');
|
console.log('倒计时清空了');
|
||||||
clearInterval(this.timerNot)//关闭倒计时
|
|
||||||
},
|
|
||||||
maiDian(data){//埋点事件
|
|
||||||
let maiList = uni.getStorageSync('maiList')
|
|
||||||
// console.log(maiList);
|
|
||||||
if(maiList==''){
|
|
||||||
maiList = [data]
|
|
||||||
} else maiList.push(data)
|
|
||||||
uni.setStorageSync('maiList',maiList)
|
|
||||||
},
|
},
|
||||||
weekDate(){//获取未来七天星期几，几号
|
weekDate(){//获取未来七天星期几，几号
|
||||||
let date = new Date()
|
let date = new Date()
|
||||||
|
|
@ -63,10 +48,6 @@ const tools = {
|
||||||
isPhone:function(phone){
|
isPhone:function(phone){
|
||||||
// 手机号正则表达式
|
// 手机号正则表达式
|
||||||
let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
|
let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
|
||||||
// if(!reg_tel.test(phone)){
|
|
||||||
// return true
|
|
||||||
// }
|
|
||||||
// return false
|
|
||||||
return !reg_tel.test(phone);
|
return !reg_tel.test(phone);
|
||||||
},
|
},
|
||||||
// 电子邮箱验证
|
// 电子邮箱验证
|
||||||
|
|
@ -82,6 +63,21 @@ const tools = {
|
||||||
// 手机号中间四位用"****"带替
|
// 手机号中间四位用"****"带替
|
||||||
hideMPhone(phone){
|
hideMPhone(phone){
|
||||||
return `${phone.substr(0, 3)}****${phone.substr(7)}`
|
return `${phone.substr(0, 3)}****${phone.substr(7)}`
|
||||||
|
},
|
||||||
|
// 手机号中间加字符
|
||||||
|
phoneAddChat(phone,startNum=3,endNum=7,character=' '){
|
||||||
|
let phoneStr = phone;
|
||||||
|
phoneStr = phoneStr.replace(/\s*/g, "");
|
||||||
|
var phoneArr = [];
|
||||||
|
for(var i = 0; i < phoneStr.length; i++){
|
||||||
|
if (i==startNum||i==endNum){
|
||||||
|
phoneArr.push(`${character}` + phoneStr.charAt(i));
|
||||||
|
} else {
|
||||||
|
phoneArr.push(phoneStr.charAt(i));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
phone = phoneArr.join("");
|
||||||
|
return phone;
|
||||||
},
|
},
|
||||||
// 昵称从第一个字开始，后面的都用"*"代替
|
// 昵称从第一个字开始，后面的都用"*"代替
|
||||||
hideName(name,num){
|
hideName(name,num){
|
||||||
|
|
@ -113,7 +109,7 @@ const tools = {
|
||||||
str = str.toFixed(2);
|
str = str.toFixed(2);
|
||||||
str = str+'';
|
str = str+'';
|
||||||
}
|
}
|
||||||
return str.includes('.') ? str*1 : str = num + '.00';
|
return str.includes('.') ? str : str = num + '.00';
|
||||||
},
|
},
|
||||||
// type:+加、-减、*乘、/除
|
// type:+加、-减、*乘、/除
|
||||||
// len:小数后保留几位
|
// len:小数后保留几位
|
||||||
|
|
@ -229,6 +225,65 @@ const tools = {
|
||||||
// console.log(time2);//1398250549123
|
// console.log(time2);//1398250549123
|
||||||
// console.log(time3);//1398250549000
|
// console.log(time3);//1398250549000
|
||||||
},
|
},
|
||||||
|
// 返回当前时间
|
||||||
|
returnCurrentTime(format,type) {
|
||||||
|
let date = new Date();
|
||||||
|
let year = date.getFullYear(); // 年
|
||||||
|
let month = date.getMonth() + 1; // 月
|
||||||
|
let day = date.getDate(); // 日
|
||||||
|
let time = date.getHours(); // 时
|
||||||
|
let minu = date.getSeconds(); // 分
|
||||||
|
let second = date.getMinutes(); // 秒
|
||||||
|
|
||||||
|
let newTime = '';
|
||||||
|
switch (type){
|
||||||
|
case 0:
|
||||||
|
newTime = `${year}${format}${month < 10? '0' + month : month}${format}${day < 10 ? '0' + day : day} ${time < 10 ? '0' + time : time}:${minu < 10 ? '0' + minu : minu}`; // 2022-03-31 16:05
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
newTime = `${year}${format}${month < 10? '0' + month : month}${format}${day < 10 ? '0' + day : day} ${time < 10 ? '0' + time : time}:${minu < 10 ? '0' + minu : minu}:${second < 10 ? '0' + second : second}`; // 2022-03-31 16:10:07
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return newTime;
|
||||||
|
},
|
||||||
|
// 返回时间xx天xx小时xx分钟
|
||||||
|
returnTimeFormat(startTime,endTime){
|
||||||
|
console.log(startTime,endTime);
|
||||||
|
let newTimeFormat = '';
|
||||||
|
let currentTimestamp = this.timeToTimestamp(endTime) - this.timeToTimestamp(startTime);
|
||||||
|
return this.returnTimestampToTime(currentTimestamp);
|
||||||
|
},
|
||||||
|
// 返回时间戳转时、分对象
|
||||||
|
returnTimestampToTime(timestamp){
|
||||||
|
let timeStr = '';
|
||||||
|
var day = parseInt((timestamp % (1000 * 60 * 60 * 24 * 12)) / (1000 * 60 * 60 * 24));
|
||||||
|
var hours = parseInt((timestamp % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||||
|
var seconds = parseInt((timestamp % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
day = day < 10 ? ('0' + day) : day;
|
||||||
|
hours = hours < 10 ? ('0' + hours) : hours;
|
||||||
|
seconds = seconds < 10 ? ('0' + seconds) : seconds;
|
||||||
|
if(day*1==0) {
|
||||||
|
if(hours*1==0) {
|
||||||
|
seconds*1==0 ? timeStr = 0 : timeStr = `${seconds}分钟`;
|
||||||
|
} else {
|
||||||
|
timeStr = `${hours}小时${seconds}分钟`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
timeStr = `${day}天${hours}小时${seconds}分钟`;
|
||||||
|
}
|
||||||
|
return timeStr;
|
||||||
|
},
|
||||||
|
// 时间戳转时分秒 00 : 00 : 00
|
||||||
|
formatDuring: function(mss) {
|
||||||
|
// let dangTime = Math.round(new Date()/1000)//获取当前时间戳
|
||||||
|
var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||||
|
var seconds = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
var minutes = (mss % (1000 * 60)) / 1000;
|
||||||
|
hours = hours < 10 ? ('0' + hours) : hours;
|
||||||
|
seconds = seconds < 10 ? ('0' + seconds) : seconds;
|
||||||
|
minutes = minutes < 10 ? ('0' + minutes) : minutes;
|
||||||
|
return hours + ' : ' + seconds + ' : ' + minutes;
|
||||||
|
},
|
||||||
// 随机数生成
|
// 随机数生成
|
||||||
randomStr(){
|
randomStr(){
|
||||||
var strData = "";
|
var strData = "";
|
||||||
|
|
@ -268,30 +323,18 @@ const tools = {
|
||||||
return newObj
|
return newObj
|
||||||
},
|
},
|
||||||
// 提示方法
|
// 提示方法
|
||||||
showToast: function(msg, icon,time) {
|
showToast: function(msg, icon='none',time) {
|
||||||
// 弹框图标：none默认无图标、loading、success
|
|
||||||
var newIncon = 'none';
|
|
||||||
if (icon) {newIncon = icon;}
|
|
||||||
// 弹框显示时间：默认2秒
|
// 弹框显示时间：默认2秒
|
||||||
var newTime = 2000
|
var newTime = 2000
|
||||||
if (time) {newTime = time;}
|
if (time) {newTime = time;}
|
||||||
return uni.showToast({
|
return uni.showToast({
|
||||||
title: msg,
|
title: msg,
|
||||||
icon: newIncon,
|
icon: icon,
|
||||||
duration:newTime
|
duration:newTime
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
formatDuring: function(mss) {
|
// 富文本
|
||||||
// let dangTime = Math.round(new Date()/1000)//获取当前时间戳
|
escape2Html(str) {
|
||||||
var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
||||||
var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
|
|
||||||
var seconds = (mss % (1000 * 60)) / 1000;
|
|
||||||
hours = hours < 10 ? ('0' + hours) : hours;
|
|
||||||
minutes = minutes < 10 ? ('0' + minutes) : minutes;
|
|
||||||
seconds = seconds < 10 && seconds >= 1 ? ('0' + seconds) : seconds;
|
|
||||||
return hours + ' : ' + minutes + ' : ' + seconds;
|
|
||||||
},
|
|
||||||
escape2Html(str) {//富文本
|
|
||||||
var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
|
var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
|
||||||
return str.replace(/&(lt|gt|nbsp|amp|quot|src);/ig, function (all, t) {
|
return str.replace(/&(lt|gt|nbsp|amp|quot|src);/ig, function (all, t) {
|
||||||
return arrEntities[t];
|
return arrEntities[t];
|
||||||
|
|
@ -300,39 +343,10 @@ const tools = {
|
||||||
.replace(/\<img/g, '<img @tap="pre" style="max-width:100%!important;height:auto" ')
|
.replace(/\<img/g, '<img @tap="pre" style="max-width:100%!important;height:auto" ')
|
||||||
.replace(/src=\"/g,'src="https://oss.hmzfyy.cn');
|
.replace(/src=\"/g,'src="https://oss.hmzfyy.cn');
|
||||||
},
|
},
|
||||||
updaX(){//检测小程序版本以及更新小程序
|
// 检查网络状态
|
||||||
// #ifdef MP-WEIXIN
|
networkStatus(){
|
||||||
// 获取小程序的运行环境、版本号、appId 注意：线上小程序版本号仅支持在正式版小程序中获取，开发版和体验版中无法获取。
|
|
||||||
const accountInfo = wx.getAccountInfoSync();//使用详情：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html
|
|
||||||
var version = accountInfo.miniProgram.version;
|
|
||||||
console.log(version,319);
|
|
||||||
// 检测小程序的更新
|
|
||||||
const updateManager = wx.getUpdateManager()//以下使用详情：https://developers.weixin.qq.com/miniprogram/dev/api/base/update/UpdateManager.html#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81
|
|
||||||
updateManager.onCheckForUpdate(function (res) {
|
|
||||||
// 请求完新版本信息的回调
|
|
||||||
// console.log('检测是否有更新：',res.hasUpdate)
|
|
||||||
})
|
|
||||||
updateManager.onUpdateReady(function (res) {
|
|
||||||
wx.showModal({
|
|
||||||
title: `更新`,
|
|
||||||
content: `新版本${version}已上线，是否重启应用`,
|
|
||||||
success:(res)=> {
|
|
||||||
if (res.confirm) {
|
|
||||||
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
|
|
||||||
updateManager.applyUpdate()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
updateManager.onUpdateFailed(function (res) {
|
|
||||||
// 新版本下载失败
|
|
||||||
// console.log('新版本下载失败:',res);
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
networkStatus(){//检查网络状态
|
|
||||||
uni.getNetworkType({
|
uni.getNetworkType({
|
||||||
success: function (res) {
|
success: (res)=> {
|
||||||
console.log('当前网络状态：',res.networkType);//none：当前无网络连接
|
console.log('当前网络状态：',res.networkType);//none：当前无网络连接
|
||||||
if(res.networkType=='none'){
|
if(res.networkType=='none'){
|
||||||
uni.setStorageSync('isNet',false)
|
uni.setStorageSync('isNet',false)
|
||||||
|
|
@ -341,12 +355,84 @@ const tools = {
|
||||||
// 微信小程序原生API性能优化
|
// 微信小程序原生API性能优化
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
// 连网下，检测小程序是否有更新
|
// 连网下，检测小程序是否有更新
|
||||||
tools.updaX();
|
this.checkUpdate();
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// app、小程序的检测版本并更新
|
||||||
|
checkUpdate(){
|
||||||
|
// 检测app
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
//检测小程序
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
var self = this;
|
||||||
|
// 获取小程序更新机制兼容
|
||||||
|
if (wx.canIUse('getUpdateManager')) {
|
||||||
|
const updateManager = wx.getUpdateManager();//1. 检查小程序是否有新版本发布
|
||||||
|
updateManager.onCheckForUpdate(function(res) {// 请求完新版本信息的回调
|
||||||
|
if (res.hasUpdate) {
|
||||||
|
//检测到新版本，需要更新，给出提示
|
||||||
|
wx.showModal({
|
||||||
|
title: '更新提示',
|
||||||
|
content: '检测到新版本，是否下载新版本并重启小程序？',
|
||||||
|
success: function(res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
//2. 用户确定下载更新小程序，小程序下载及更新静默进行
|
||||||
|
self.downLoadAndUpdate(updateManager)
|
||||||
|
// 清除所有缓存
|
||||||
|
uni.clearStorage();
|
||||||
|
uni.clearStorageSync();
|
||||||
|
} else if (res.cancel) {
|
||||||
|
//用户点击取消按钮的处理，如果需要强制更新，则给出二次弹窗，如果不需要，则这里的代码都可以删掉了
|
||||||
|
wx.showModal({
|
||||||
|
title: '温馨提示~',
|
||||||
|
content: '本次版本更新涉及到新的功能添加，旧版本无法正常访问的哦~',
|
||||||
|
showCancel:false,//隐藏取消按钮
|
||||||
|
confirmText:"确定更新",//只保留确定更新按钮
|
||||||
|
success: function(res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
//下载新版本，并重新应用
|
||||||
|
self.downLoadAndUpdate(updateManager)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else { // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
|
||||||
|
wx.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 下载小程序新版本并重启应用
|
||||||
|
* */
|
||||||
|
downLoadAndUpdate(updateManager){
|
||||||
|
var self = this;
|
||||||
|
wx.showLoading(); //静默下载更新小程序新版本
|
||||||
|
updateManager.onUpdateReady(function () {
|
||||||
|
wx.hideLoading(); //新的版本已经下载好，调用 applyUpdate 应用新版本并重启
|
||||||
|
updateManager.applyUpdate();
|
||||||
|
// 清除缓存
|
||||||
|
uni.clearStorageSync();
|
||||||
|
uni.clearStorage();
|
||||||
|
})
|
||||||
|
updateManager.onUpdateFailed(function () { // 新的版本下载失败
|
||||||
|
wx.showModal({
|
||||||
|
title: '已经有新版本了哟~',
|
||||||
|
content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
// 文本复制
|
// 文本复制
|
||||||
clickCopy(data){
|
clickCopy(data){
|
||||||
uni.setClipboardData({
|
uni.setClipboardData({
|
||||||
|
|
@ -405,7 +491,7 @@ const tools = {
|
||||||
if (res.code) {
|
if (res.code) {
|
||||||
var params = {code:res.code}
|
var params = {code:res.code}
|
||||||
uni.request({
|
uni.request({
|
||||||
url: `${uni.getStorageSync('hostapi')}/api/user/login`,
|
url: `${app.globalData.hostapi}/api/user/login`,
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: params,
|
data: params,
|
||||||
header: {
|
header: {
|
||||||
|
|
@ -430,16 +516,17 @@ const tools = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 判断是否授权，没授权，前往登录页面授权
|
// 判断是否授权，没授权，前往登录页面授权
|
||||||
|
authTimer:null,
|
||||||
judgeAuth(){
|
judgeAuth(){
|
||||||
let auth = true;
|
let auth = false;
|
||||||
switch (uni.getStorageSync('phone_active')*1){
|
clearTimeout(this.authTimer);
|
||||||
case 0: // 未注册
|
if(!uni.getStorageSync('token')) {
|
||||||
|
this.showToast('请登录');
|
||||||
|
this.authTimer = setTimeout(()=>{
|
||||||
uni.navigateTo({url:'/pages/login/login'});
|
uni.navigateTo({url:'/pages/login/login'});
|
||||||
auth = false
|
},2000)
|
||||||
break;
|
} else {
|
||||||
case 1: // 已注册
|
auth = true;
|
||||||
auth = true
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
return auth;
|
return auth;
|
||||||
},
|
},
|
||||||
|
|
@ -456,13 +543,10 @@ const tools = {
|
||||||
// console.log(hInfo.envVersion);//develop:开发版 trial：体验版 release：正式版
|
// console.log(hInfo.envVersion);//develop:开发版 trial：体验版 release：正式版
|
||||||
// if(hInfo.miniProgram.envVersion == "develop"){
|
// if(hInfo.miniProgram.envVersion == "develop"){
|
||||||
if(hInfo.miniProgram.envVersion == "develop" || hInfo.miniProgram.envVersion == "trial"){
|
if(hInfo.miniProgram.envVersion == "develop" || hInfo.miniProgram.envVersion == "trial"){
|
||||||
// (开发版,体验版)-配置全局域名
|
|
||||||
// uni.setStorageSync('hostapi','https://hengmei.scdxtc.cn/api/');
|
|
||||||
} else {
|
} else {
|
||||||
// 清除所有输出日志
|
// 清除所有输出日志
|
||||||
console.log = () =>{};
|
console.log = () =>{};
|
||||||
// 正式版-配置全局域名
|
|
||||||
// uni.setStorageSync('hostapi','https://hm.hmzfyy.cn/api/');
|
|
||||||
// 开启埋点倒计时
|
// 开启埋点倒计时
|
||||||
this.daoTime();//开启埋点倒计时
|
this.daoTime();//开启埋点倒计时
|
||||||
}
|
}
|
||||||
|
|
@ -523,7 +607,7 @@ const tools = {
|
||||||
const res = uni.getSystemInfoSync();
|
const res = uni.getSystemInfoSync();
|
||||||
if(res.platform=='ios'){
|
if(res.platform=='ios'){
|
||||||
uni.makePhoneCall({
|
uni.makePhoneCall({
|
||||||
phoneNumber:phone,
|
phoneNumber:phone*1,
|
||||||
success: () => {},
|
success: () => {},
|
||||||
fail: () => {}
|
fail: () => {}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
7
main.js
7
main.js
|
|
@ -1,5 +1,7 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
|
import store from './store'
|
||||||
|
Vue.prototype.$store = store
|
||||||
|
|
||||||
import nothingPage from './components/nothing/nothing-page.vue';//引入无内容组件
|
import nothingPage from './components/nothing/nothing-page.vue';//引入无内容组件
|
||||||
Vue.component('nothing-page',nothingPage);//全局注册无内容组件
|
Vue.component('nothing-page',nothingPage);//全局注册无内容组件
|
||||||
|
|
@ -10,10 +12,12 @@ Vue.component('status-nav',statusNav);//全局注册头部状态栏与导航栏
|
||||||
import containerSubgroupTwo from './components/containers/container-subgroup-two.vue';//引入头部状态栏与导航栏组件
|
import containerSubgroupTwo from './components/containers/container-subgroup-two.vue';//引入头部状态栏与导航栏组件
|
||||||
Vue.component('container-subgroup',containerSubgroupTwo);//全局注册头部状态栏与导航栏组件
|
Vue.component('container-subgroup',containerSubgroupTwo);//全局注册头部状态栏与导航栏组件
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
import share from './jsFile/share.js';// 全局注册分享事件
|
import share from './jsFile/share.js';// 全局注册分享事件
|
||||||
Vue.mixin(share);
|
Vue.mixin(share);
|
||||||
|
// #endif
|
||||||
|
|
||||||
// 常用工具
|
// 常用便捷式公共方法
|
||||||
import tools from '@/jsFile/tools.js';
|
import tools from '@/jsFile/tools.js';
|
||||||
Vue.prototype.$toolAll = tools;
|
Vue.prototype.$toolAll = tools;
|
||||||
// 响应数据
|
// 响应数据
|
||||||
|
|
@ -23,6 +27,7 @@ Vue.prototype.$requst = requst;
|
||||||
App.mpType = 'app';
|
App.mpType = 'app';
|
||||||
|
|
||||||
const app = new Vue({
|
const app = new Vue({
|
||||||
|
store,
|
||||||
...App
|
...App
|
||||||
})
|
})
|
||||||
app.$mount()
|
app.$mount()
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,6 @@
|
||||||
<view class="disac pad-s30 pad-x10">
|
<view class="disac pad-s30 pad-x10">
|
||||||
<image class="mar-zy20" style="width: 64rpx;height: 27rpx;" src="/static/public/icon-home-notice.png" mode=""></image>
|
<image class="mar-zy20" style="width: 64rpx;height: 27rpx;" src="/static/public/icon-home-notice.png" mode=""></image>
|
||||||
<view class="fon24 color6 mar-y20 width100 bleft pad-z20">
|
<view class="fon24 color6 mar-y20 width100 bleft pad-z20">
|
||||||
<lwNotice @dangGao="goNoticeDetail" :list="noticeList" :backgroundColor="'#FFFFFF'"></lwNotice>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -228,14 +227,13 @@
|
||||||
// 暂无更多组件
|
// 暂无更多组件
|
||||||
import pitera from '@/components/nothing/pitera.vue';
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
// 公告
|
// 公告
|
||||||
import lwNotice from '@/components/lw-notice/lw-notice.vue';
|
|
||||||
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
||||||
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
||||||
|
import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
pitera,
|
pitera,
|
||||||
statusNavSlot,
|
statusNavSlot,
|
||||||
lwNotice,
|
|
||||||
'foot-tab' :footTabOne,
|
'foot-tab' :footTabOne,
|
||||||
containerSubgroupTwo
|
containerSubgroupTwo
|
||||||
},
|
},
|
||||||
|
|
@ -313,6 +311,62 @@
|
||||||
faultsList:[],
|
faultsList:[],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// computed:{
|
||||||
|
// tokenEv() {
|
||||||
|
// return this.$store.state.token;
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// computed:mapState({
|
||||||
|
// // 从state中拿到数据 箭头函数可使代码更简练
|
||||||
|
// token: state => state.token,
|
||||||
|
// }),
|
||||||
|
// computed:mapState(['token']),
|
||||||
|
// computed: {
|
||||||
|
// ...mapState({
|
||||||
|
// token: function (state) {
|
||||||
|
// return '追加的' + state.token
|
||||||
|
// },
|
||||||
|
// userInfo: state => state.userInfo,
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// computed: {
|
||||||
|
// todos() {
|
||||||
|
// return this.$store.getters.doneTodos
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// computed: {
|
||||||
|
// doneTodosCount() {
|
||||||
|
// return this.$store.getters.doneTodosCount
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// computed: {
|
||||||
|
// getTodoById() {
|
||||||
|
// return this.$store.getters.getTodoById(1)
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// computed: {
|
||||||
|
// // 使用对象展开运算符将 getter 混入 computed 对象中
|
||||||
|
// ...mapGetters([
|
||||||
|
// 'doneTodos',
|
||||||
|
// 'doneTodosCount',
|
||||||
|
// 'getTodoById'
|
||||||
|
// // ...
|
||||||
|
// ])
|
||||||
|
// },
|
||||||
|
// computed:{
|
||||||
|
// ...mapState([
|
||||||
|
// 'token',
|
||||||
|
// 'userInfo',
|
||||||
|
// 'count',
|
||||||
|
// 'obj'
|
||||||
|
// ])
|
||||||
|
// },
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
token: state => state.moduleA.token,
|
||||||
|
count: state => state.moduleB.count
|
||||||
|
}),
|
||||||
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
// 获取当前页面url
|
// 获取当前页面url
|
||||||
this.$toolAll.tools.obtainUrl();
|
this.$toolAll.tools.obtainUrl();
|
||||||
|
|
@ -322,8 +376,29 @@
|
||||||
// this.getIncrementServiceType();
|
// this.getIncrementServiceType();
|
||||||
// 调用获取常见故障列表事件
|
// 调用获取常见故障列表事件
|
||||||
this.getFaultsList();
|
this.getFaultsList();
|
||||||
|
// this.$store.commit('setToken', 'token已改变');
|
||||||
|
// this.$store.commit('updateUserInfo',{userInfo:'用户信息'})
|
||||||
|
// this.$store.commit({
|
||||||
|
// type: 'updateUserInfo',
|
||||||
|
// userInfo: '新方式更新用户信息'
|
||||||
|
// })
|
||||||
|
// console.log(this.userInfo,374);
|
||||||
|
// this.add();
|
||||||
|
// console.log(this.obj);
|
||||||
|
// this.$store.commit('newProp',{c:'吃火锅'})
|
||||||
|
// console.log(this.obj,382);
|
||||||
|
// this.$store.dispatch('addCountAction')
|
||||||
|
// this.$store.dispatch('addCountAction2',{amount:10})
|
||||||
|
// this.$store.dispatch('addCountAction3',{amount:30})
|
||||||
|
// setTimeout(()=>{
|
||||||
|
// console.log(this.count,388);
|
||||||
|
// },3000)
|
||||||
|
// console.log(this.count,390);
|
||||||
|
console.log(this.token,397);
|
||||||
|
console.log(this.count,398);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// ...mapMutations(['add']),//对象展开运算符直接拿到add
|
||||||
// 工单跳转
|
// 工单跳转
|
||||||
goWorkOrder(index){
|
goWorkOrder(index){
|
||||||
if(index==0){
|
if(index==0){
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
|
<notice-one direction="row"></notice-one>
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
<foot-tab :current="1"></foot-tab>
|
<foot-tab :current="1"></foot-tab>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import noticeOne from '@/components/notices/notice-one/notice-one.vue';
|
||||||
// 底部组件
|
// 底部组件
|
||||||
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
'foot-tab' :footTabOne
|
'foot-tab' :footTabOne,
|
||||||
|
noticeOne
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -24,8 +24,8 @@
|
||||||
<view class="bacf fon28 pad-sx30 pad-zy40 mar-s20">
|
<view class="bacf fon28 pad-sx30 pad-zy40 mar-s20">
|
||||||
<view class="fon30 bold mar-sx30">您的评价</view>
|
<view class="fon30 bold mar-sx30">您的评价</view>
|
||||||
<view class="mar-s40 mar-x50" style="color: #545454;">
|
<view class="mar-s40 mar-x50" style="color: #545454;">
|
||||||
<view class="mar-x40 disac"><text class="mar-y40">技术服务</text><rate :size="42" :gutter="40" :curentClick="0" v-model="rateNum" @change="chooseRate"></rate></view>
|
<view class="mar-x40 disac"><text class="mar-y40">技术服务</text><rate-one :size="42" :gutter="40" :curentClick="0" v-model="rateNum" @change="chooseRate"></rate-one></view>
|
||||||
<view class="disac"><text class="mar-y40">客服态度</text><rate :size="42" :gutter="40" :curentClick="1" v-model="attitudeNum" @change="chooseRate"></rate></view>
|
<view class="disac"><text class="mar-y40">客服态度</text><rate-one :size="42" :gutter="40" :curentClick="1" v-model="attitudeNum" @change="chooseRate"></rate-one></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 提交保存 -->
|
<!-- 提交保存 -->
|
||||||
|
|
@ -36,10 +36,10 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import rate from '@/components/rate.vue';
|
import rateOne from '@/components/rates/rate-one.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
rate
|
rateOne
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
// 根级别的 action
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
// 组装模块并导出 store 的地方
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
import moduleA from '@/store/modules/moduleA'
|
||||||
|
import moduleB from '@/store/modules/moduleB'
|
||||||
|
|
||||||
|
Vue.use(Vuex);//vue的插件机制
|
||||||
|
|
||||||
|
//Vuex.modules 模块选项
|
||||||
|
const store = new Vuex.Store({
|
||||||
|
modules: {
|
||||||
|
moduleA,
|
||||||
|
moduleB
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export default store
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
// 购物车模块
|
||||||
|
export default {
|
||||||
|
state:{//存放状态
|
||||||
|
token:'token已生成',
|
||||||
|
userInfo:{},
|
||||||
|
count:0,
|
||||||
|
publicColor:'',
|
||||||
|
todos: [{
|
||||||
|
id: 1,
|
||||||
|
text: '我是内容一',
|
||||||
|
done: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
text: '我是内容二',
|
||||||
|
done: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
obj:{
|
||||||
|
a:'吃鸡腿',
|
||||||
|
b:'吃自助餐'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Vuex中store数据改变的唯一方法就是mutations 不适合异步方法
|
||||||
|
mutations: {
|
||||||
|
add(state) {
|
||||||
|
state.count = 7;
|
||||||
|
},
|
||||||
|
add2(state, payload) {
|
||||||
|
state.count = payload.amount;
|
||||||
|
},
|
||||||
|
// 单个属性处理方法
|
||||||
|
setToken(state,str) {
|
||||||
|
state.token = str;
|
||||||
|
},
|
||||||
|
// 对象处理方法
|
||||||
|
updateUserInfo(state, payload) {
|
||||||
|
// 变更状态
|
||||||
|
state.userInfo = payload.userInfo;
|
||||||
|
},
|
||||||
|
// 新增字段方法
|
||||||
|
newProp(state,payload) {
|
||||||
|
state.obj = { ...state.obj, c: payload.c };
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 可以执行任意的同步和异步操作
|
||||||
|
actions:{
|
||||||
|
addCountAction ({commit}) {
|
||||||
|
commit('add')
|
||||||
|
},
|
||||||
|
addCountAction2 (context , payload) {
|
||||||
|
context.commit('add2', payload)
|
||||||
|
},
|
||||||
|
// 异步方法
|
||||||
|
addCountAction3 (context , payload) {
|
||||||
|
setTimeout(function () {
|
||||||
|
context.commit('add2', payload)
|
||||||
|
}, 2000)
|
||||||
|
},
|
||||||
|
actionA ({ commit }) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
commit('someMutation')
|
||||||
|
resolve()
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
actionB ({ dispatch, commit }) {
|
||||||
|
return dispatch('actionA').then(() => {
|
||||||
|
commit('someOtherMutation')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），对 state 的加工，是派生出来的数据。 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。
|
||||||
|
getters: {
|
||||||
|
doneTodos: state => {
|
||||||
|
return state.todos.filter(todo => todo.done)
|
||||||
|
},
|
||||||
|
doneTodosCount: (state, getters) => {
|
||||||
|
//state ：可以访问数据
|
||||||
|
//getters：访问其他函数，等同于 store.getters
|
||||||
|
return getters.doneTodos.length
|
||||||
|
},
|
||||||
|
getTodoById: (state) => (id) => {
|
||||||
|
return state.todos.find(todo => todo.id === id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
export default {
|
||||||
|
state:{//存放状态
|
||||||
|
token:'token已生成',
|
||||||
|
userInfo:{},
|
||||||
|
count:0,
|
||||||
|
publicColor:'',
|
||||||
|
todos: [{
|
||||||
|
id: 1,
|
||||||
|
text: '我是内容一',
|
||||||
|
done: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
text: '我是内容二',
|
||||||
|
done: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
obj:{
|
||||||
|
a:'吃鸡腿',
|
||||||
|
b:'吃自助餐'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Vuex中store数据改变的唯一方法就是mutations 不适合异步方法
|
||||||
|
mutations: {
|
||||||
|
add(state) {
|
||||||
|
state.count = 7;
|
||||||
|
},
|
||||||
|
add2(state, payload) {
|
||||||
|
state.count = payload.amount;
|
||||||
|
},
|
||||||
|
// 单个属性处理方法
|
||||||
|
setToken(state,str) {
|
||||||
|
state.token = str;
|
||||||
|
},
|
||||||
|
// 对象处理方法
|
||||||
|
updateUserInfo(state, payload) {
|
||||||
|
// 变更状态
|
||||||
|
state.userInfo = payload.userInfo;
|
||||||
|
},
|
||||||
|
// 新增字段方法
|
||||||
|
newProp(state,payload) {
|
||||||
|
state.obj = { ...state.obj, c: payload.c };
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 可以执行任意的同步和异步操作
|
||||||
|
actions:{
|
||||||
|
addCountAction ({commit}) {
|
||||||
|
commit('add')
|
||||||
|
},
|
||||||
|
addCountAction2 (context , payload) {
|
||||||
|
context.commit('add2', payload)
|
||||||
|
},
|
||||||
|
// 异步方法
|
||||||
|
addCountAction3 (context , payload) {
|
||||||
|
setTimeout(function () {
|
||||||
|
context.commit('add2', payload)
|
||||||
|
}, 2000)
|
||||||
|
},
|
||||||
|
actionA ({ commit }) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
commit('someMutation')
|
||||||
|
resolve()
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
actionB ({ dispatch, commit }) {
|
||||||
|
return dispatch('actionA').then(() => {
|
||||||
|
commit('someOtherMutation')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），对 state 的加工，是派生出来的数据。 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。
|
||||||
|
getters: {
|
||||||
|
doneTodos: state => {
|
||||||
|
return state.todos.filter(todo => todo.done)
|
||||||
|
},
|
||||||
|
doneTodosCount: (state, getters) => {
|
||||||
|
//state ：可以访问数据
|
||||||
|
//getters：访问其他函数，等同于 store.getters
|
||||||
|
return getters.doneTodos.length
|
||||||
|
},
|
||||||
|
getTodoById: (state) => (id) => {
|
||||||
|
return state.todos.find(todo => todo.id === id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
// 根级别的 mutation
|
||||||
Loading…
Reference in New Issue