民意通静态页完成

master
吃肉的饺子 2022-07-30 16:05:50 +08:00
commit cc5785ffbc
54 changed files with 3636 additions and 0 deletions

9
.gitignore vendored Normal file
View File

@ -0,0 +1,9 @@
/vendor
/node_modules
/public/storage
/unpackage
/.hbuilderx
Homestead.yaml
Homestead.json
.env
.idea

42
App.vue Normal file
View File

@ -0,0 +1,42 @@
<script>
export default {
globalData:{
projectname:'', //
lat:'', //
lng:'' ,//
hostapi:'https://www.baidu.com' //
},
// show
onLaunch: function() {
},
onShow: function() {
if(uni.getStorageSync('token')){
}
},
onHide: function() {
}
};
</script>
<style>
/*每个页面公共css */
/* 阿里巴巴矢量图标库 start */
@import url("./commons/icon-font.css");
/* 阿里巴巴矢量图标库 end */
/* 项目基础样式 start */
@import url("./commons/base.css");
/* 项目基础样式 end */
/* 项目页面样式 start */
@import url("./commons/style.css");
/* 项目页面样式 end */
/* 动画样式 start */
@import url("./commons/animate.min.css");
/* 动画样式 end */
page {background-color: #FFFFFF;}
</style>

12
commons/animate.min.css vendored Normal file

File diff suppressed because one or more lines are too long

419
commons/base.css Normal file
View File

@ -0,0 +1,419 @@
/* @media screen and (height:812px){
}
@media screen and (height:844px){
}
@media screen and (height:896px){
}
@media screen and (min-height:926px){
}
*/
.bottoc{margin-top: 6rpx;color: #414141;}
.opc{opacity: 0.7;}
.width100{width: 100%;}
.width55{width: 55%;}
.width50{width: 50%;}
.width49{width: 49%;}
.width48_5{width: 48.5%;}
.width48{width: 48%;}
.width47{width: 47%;}
.width46{width: 46%;}
.width45{width: 45%;}
.width33{width: 33%;}
.width30{width: 30%;}
.width29{width: 29%;}
.width28{width: 28%;}
.width27{width: 27%;}
.width26{width: 26%;}
.width25{width: 25%;}
.posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;}
.posir{position: relative;}
.posia{position: absolute;}
.poszy{position: fixed;left: 0;right: 0;z-index: 3;}
.posiszy{position: fixed;left: 0;right: 0;z-index: 5;}
.posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}
.posia-op{position: absolute;top: 0;right: 0;left: 0;bottom: 0;opacity: 0;}
.syxzo{top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
.posi-sticky{position: sticky;top: 0;z-index: 1;background-color: #FFFFFF;}
.dis{display: flex;}
.disac{display: flex;align-items: center;}
.disja{display: flex;justify-content: space-around;}
.disjb{display: flex;justify-content: space-between;}
.disje{display: flex;justify-content: flex-end;}
.disjbac{display: flex;justify-content: space-between;align-items: center;}
.disjcac{display: flex;justify-content: center;align-items: center;}
.fc{flex-direction: column;}
.fw{flex-wrap: wrap;}
.fe{justify-content: flex-end;}
.flexs{flex-shrink: 0;}
.wh42{width: 42rpx;height: 42rpx;}
.wh44{width: 44rpx;height: 44rpx;}
button:after{content: none!important;}
.borbot{border-bottom: 2rpx solid #EEEEEE;}
.borbot:last-child{border-bottom: none;}
.bbot{border-bottom: 2rpx solid #EEEEEE;}
.tbot{border-top: 2rpx solid #EEEEEE;}
.borbot-df{border: 2rpx solid #DFDFDF;}
.borbot-cc{border: 2rpx solid #CCCCCC;}
.bleft {border-left: 2rpx solid #EEEEEE;}
.bbt-d9{border-bottom: 2rpx solid #d9d9d9;}
.border-r{border-right: 2rpx solid #EEEEEE;}
/* 行高 */
.line-h30{line-height: 30rpx;}
.line-h32{line-height: 32rpx;}
.line-h34{line-height: 34rpx;}
.line-h36{line-height: 36rpx;}
.line-h38{line-height: 38rpx;}
.line-h40{line-height: 40rpx;}
.line-h42{line-height: 42rpx;}
.line-h44{line-height: 44rpx;}
.line-h46{line-height: 46rpx;}
.line-h48{line-height: 48rpx;}
.line-h50{line-height: 50rpx;}
.line-h52{line-height: 52rpx;}
.line-h54{line-height: 54rpx;}
.line-h56{line-height: 56rpx;}
.line-h58{line-height: 58rpx;}
.line-h60{line-height: 60rpx;}
.line-h62{line-height: 62rpx;}
.line-h64{line-height: 64rpx;}
.line-h66{line-height: 66rpx;}
.line-h68{line-height: 60rpx;}
.line-h70{line-height: 70rpx;}
.line-h72{line-height: 72rpx;}
.line-h74{line-height: 74rpx;}
.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;}
.clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips7{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips8{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 8;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips9{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 9;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
.clips10{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 10;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
/* 字体大小 */
.fon20{font-size: 20rpx;}
.fon22{font-size: 22rpx;}
.fon24{font-size: 24rpx;}
.fon25{font-size: 25rpx;}
.fon26{font-size: 26rpx;}
.fon27{font-size: 27rpx;}
.fon28{font-size: 28rpx;}
.fon30{font-size: 30rpx;}
.fon32{font-size: 32rpx;}
.fon34{font-size: 34rpx;}
.fon36{font-size: 36rpx;}
.fon38{font-size: 38rpx;}
.fon40{font-size: 40rpx;}
.fon42{font-size: 42rpx;}
.fon44{font-size: 44rpx;}
.fon46{font-size: 46rpx;}
.fon48{font-size: 48rpx;}
.fon50{font-size: 50rpx;}
.fon52{font-size: 52rpx;}
.fon54{font-size: 54rpx;}
.fon56{font-size: 56rpx;}
.fon58{font-size: 58rpx;}
.fon60{font-size: 60rpx;}
.fon62{font-size: 62rpx;}
.fon64{font-size: 64rpx;}
.fon66{font-size: 66rpx;}
.fon68{font-size: 68rpx;}
.fon70{font-size: 70rpx;}
.fon72{font-size: 72rpx;}
/* 字体颜色 */
.colf{color: #FFFFFF;}
.colf6{color: #f6f6f6;}
.colb{color: #000000;}
.colc{color: #CCCCCC;}
.col3{color: #333333;}
.col34{color: #343434;}
.col6{color: #666666;}
.colf8{color: #F85050;}
.col9{color: #999999;}
.pcol{color: #3875F6;}
.col2c{color: #2C2C2C;}
.col80{color: #808080;}
.col7D{color: #7D7D7D;}
.colB3{color: #B3B3B3;}
.col5b{color: #5B5B5B;}
.colpeili{color: #868695;}
/* 字体位置 */
.tright{text-align: right;}
.tcenter{text-align: center;}
/* 文字空两格 */
.tindent{text-indent: 2em;}
/* 元素缩小 */
.scal13{transform: scale(1.3);}
.scal12{transform: scale(1.2);}
.scal11{transform: scale(1.1);}
.scal10{transform: scale(1);}
.scal09{transform: scale(.9);}
.scal08{transform: scale(.8);}
.scal07{transform: scale(.7);}
.scal06{transform: scale(.6);}
.scal05{transform: scale(.5);}
/* 行间距 */
.linh40{line-height: 40rpx;}
.linh50{line-height: 50rpx;}
.linh60{line-height: 60rpx;}
.linh70{line-height: 70rpx;}
/* 粗体 */
.bold{font-weight: bold;}
.bold400{font-weight: 400;}
.bold500{font-weight: 500;}
/* 背景颜色 */
.pbackc{background-color: #3875F6;}
.bacf{background-color: #FFFFFF;}
.bac0{background-color: #000000;}
.bcdb{background-color: #DBDBDB;}
.bcf8{background: #F85050;}
.bacf5{background: #F5F5F5;}
.bacf6{background-color: #f6f6f6;}
/* 圆角 */
.radius10{border-radius: 10rpx;}
.radius15{border-radius: 15rpx;}
.radius20{border-radius: 20rpx;}
.radius30{border-radius: 30rpx;}
.radius35{border-radius: 35rpx;}
.radius40{border-radius: 40rpx;}
.radius45{border-radius: 45rpx;}
/* 上下左右---外边距 */
.mar10{margin: 10rpx;}
.mar20{margin: 20rpx;}
.mar25{margin: 25rpx;}
.mar30{margin: 30rpx;}
.mar32{margin: 32rpx;}
.mar36{margin: 36rpx;}
.mar40{margin: 40rpx;}
.mar50{margin: 50rpx;}
/* 上下---外边距 */
.mar-sx10{margin-top: 10rpx;margin-bottom: 10rpx;}
.mar-sx20{margin-top: 20rpx;margin-bottom: 20rpx;}
.mar-sx25{margin-top: 25rpx;margin-bottom: 25rpx;}
.mar-sx30{margin-top: 30rpx;margin-bottom: 30rpx;}
.mar-sx32{margin-top: 32rpx;margin-bottom: 32rpx;}
.mar-sx36{margin-top: 36rpx;margin-bottom: 36rpx;}
.mar-sx40{margin-top: 40rpx;margin-bottom: 40rpx;}
.mar-sx50{margin-top: 50rpx;margin-bottom: 50rpx;}
/* 左右---外边距 */
.mar-zy10{margin-left: 10rpx;margin-right: 10rpx;}
.mar-zy20{margin-left: 20rpx;margin-right: 20rpx;}
.mar-zy25{margin-left: 25rpx;margin-right: 25rpx;}
.mar-zy30{margin-left: 30rpx;margin-right: 30rpx;}
.mar-zy32{margin-left: 32rpx;margin-right: 32rpx;}
.mar-zy36{margin-left: 36rpx;margin-right: 36rpx;}
.mar-zy40{margin-left: 40rpx;margin-right: 40rpx;}
.mar-zy50{margin-left: 50rpx;margin-right: 50rpx;}
.mar-zy85{margin-left: 85rpx;margin-right: 85rpx;}
/* 上---外边距 */
.mar-s10{margin-top: 10rpx;}
.mar-s20{margin-top: 20rpx;}
.mar-s25{margin-top: 25rpx;}
.mar-s30{margin-top: 30rpx;}
.mar-s32{margin-top: 32rpx;}
.mar-s36{margin-top: 36rpx;}
.mar-s40{margin-top: 40rpx;}
.mar-s50{margin-top: 50rpx;}
.mar-s60{margin-top: 60rpx;}
.mar-s70{margin-top: 70rpx;}
.mar-s80{margin-top: 80rpx;}
.mar-s90{margin-top: 90rpx;}
.mar-s100{margin-top: 100rpx;}
.mar-s120{margin-top: 120rpx;}
.mar-s140{margin-top: 140rpx;}
.mar-s160{margin-top: 160rpx;}
.mar-s180{margin-top: 180rpx;}
/* 下---外边距 */
.mar-x10{margin-bottom: 10rpx;}
.mar-x20{margin-bottom: 20rpx;}
.mar-x25{margin-bottom: 25rpx;}
.mar-x30{margin-bottom: 30rpx;}
.mar-x32{margin-bottom: 32rpx;}
.mar-x36{margin-bottom: 36rpx;}
.mar-x40{margin-bottom: 40rpx;}
.mar-x50{margin-bottom: 50rpx;}
.mar-x60{margin-bottom: 60rpx;}
.mar-x70{margin-bottom: 70rpx;}
.mar-x80{margin-bottom: 80rpx;}
.mar-x90{margin-bottom: 90rpx;}
.mar-x100{margin-bottom: 100rpx;}
.mar-x120{margin-bottom: 120rpx;}
.mar-x140{margin-bottom: 140rpx;}
.mar-x160{margin-bottom: 160rpx;}
.mar-x180{margin-bottom: 180rpx;}
/* 左---外边距 */
.mar-z10{margin-left: 10rpx;}
.mar-z20{margin-left: 20rpx;}
.mar-z25{margin-left: 25rpx;}
.mar-z30{margin-left: 30rpx;}
.mar-z32{margin-left: 32rpx;}
.mar-z36{margin-left: 36rpx;}
.mar-z40{margin-left: 40rpx;}
.mar-z50{margin-left: 50rpx;}
/* 右---外边距 */
.mar-y10{margin-right: 10rpx;}
.mar-y20{margin-right: 20rpx;}
.mar-y25{margin-right: 25rpx;}
.mar-y30{margin-right: 30rpx;}
.mar-y32{margin-right: 32rpx;}
.mar-y36{margin-right: 36rpx;}
.mar-y40{margin-right: 40rpx;}
.mar-y50{margin-right: 50rpx;}
/* 上下左右---内边距 */
.pad10{padding: 10rpx;}
.pad20{padding: 20rpx;}
.pad25{padding: 25rpx;}
.pad30{padding: 30rpx;}
.pad32{padding: 32rpx;}
.pad36{padding: 36rpx;}
.pad40{padding: 40rpx;}
.pad50{padding: 50rpx;}
/* 上下---内边距 */
.pad-sx10{padding-top: 10rpx;padding-bottom: 10rpx;}
.pad-sx20{padding-top: 20rpx;padding-bottom: 20rpx;}
.pad-sx25{padding-top: 25rpx;padding-bottom: 25rpx;}
.pad-sx30{padding-top: 30rpx;padding-bottom: 30rpx;}
.pad-sx32{padding-top: 32rpx;padding-bottom: 32rpx;}
.pad-sx36{padding-top: 36rpx;padding-bottom: 36rpx;}
.pad-sx40{padding-top: 40rpx;padding-bottom: 40rpx;}
.pad-sx50{padding-top: 50rpx;padding-bottom: 50rpx;}
/* 左右---内边距 */
.pad-zy10{padding-left: 10rpx;padding-right: 10rpx;}
.pad-zy20{padding-left: 20rpx;padding-right: 20rpx;}
.pad-zy25{padding-left: 25rpx;padding-right: 25rpx;}
.pad-zy30{padding-left: 30rpx;padding-right: 30rpx;}
.pad-zy32{padding-left: 32rpx;padding-right: 32rpx;}
.pad-zy36{padding-left: 36rpx;padding-right: 36rpx;}
.pad-zy40{padding-left: 40rpx;padding-right: 40rpx;}
.pad-zy50{padding-left: 50rpx;padding-right: 50rpx;}
/* 上---内边距 */
.pad-s10{padding-top: 10rpx;}
.pad-s20{padding-top: 20rpx;}
.pad-s25{padding-top: 25rpx;}
.pad-s30{padding-top: 30rpx;}
.pad-s32{padding-top: 32rpx;}
.pad-s36{padding-top: 36rpx;}
.pad-s40{padding-top: 40rpx;}
.pad-s50{padding-top: 50rpx;}
.pad-s120{padding-top: 120rpx;}
.pad-s140{padding-top: 140rpx;}
.pad-s160{padding-top: 160rpx;}
.pad-s180{padding-top: 180rpx;}
/* 下---内边距 */
.pad-x10{padding-bottom: 10rpx;}
.pad-x20{padding-bottom: 20rpx;}
.pad-x25{padding-bottom: 25rpx;}
.pad-x30{padding-bottom: 30rpx;}
.pad-x32{padding-bottom: 32rpx;}
.pad-x36{padding-bottom: 36rpx;}
.pad-x40{padding-bottom: 40rpx;}
.pad-x50{padding-bottom: 50rpx;}
.pad-x120{padding-bottom: 120rpx;}
.pad-x140{padding-bottom: 140rpx;}
.pad-x160{padding-bottom: 160rpx;}
.pad-x180{padding-bottom: 180rpx;}
.pad-x260{padding-bottom: 260rpx;}
/* 左---内边距 */
.pad-z10{padding-left: 10rpx;}
.pad-z20{padding-left: 20rpx;}
.pad-z25{padding-left: 25rpx;}
.pad-z30{padding-left: 30rpx;}
.pad-z32{padding-left: 32rpx;}
.pad-z36{padding-left: 36rpx;}
.pad-z40{padding-left: 40rpx;}
.pad-z50{padding-left: 50rpx;}
/* 右---内边距 */
.pad-y10{padding-right: 10rpx;}
.pad-y20{padding-right: 20rpx;}
.pad-y25{padding-right: 25rpx;}
.pad-y30{padding-right: 30rpx;}
.pad-y32{padding-right: 32rpx;}
.pad-y36{padding-right: 36rpx;}
.pad-y40{padding-right: 40rpx;}
.pad-y50{padding-right: 50rpx;}
.pad-sx27-zy20{padding: 27rpx 20rpx;}
scroll-view ::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
/* 圆圈中间一个原点 start */
.mo-item {
width: 30rpx;
height: 30rpx;
border-radius: 100%;
border: 2rpx solid #000000;
box-sizing: border-box;
}
.active-item{
position: relative;
display: flex;
justify-content: center;
align-items: center;
border: 2rpx solid #FF0000;
}
.active-item::before{
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 20rpx;
height: 20rpx;
border-radius: 100%;
background-color: #FF0000;
}
/* 圆圈中间一个原点 end */

214
commons/icon-font.css Normal file
View File

@ -0,0 +1,214 @@
@font-face {
font-family: "iconfont"; /* Project id 3180711 */
src: url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff2?t=1651830764889') format('woff2'),
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff?t=1651830764889') format('woff'),
url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.ttf?t=1651830764889') format('truetype');
}
.icon {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-add01:before {
content: "\e637";
}
.icon-add02:before {
content: "\e622";
}
.icon-add03:before {
content: "\e63b";
}
.icon-add04:before {
content: "\e614";
}
.icon-shouye:before {
content: "\e618";
}
.icon-back:before {
content: "\e617";
}
.icon-fenlei:before {
content: "\e62f";
}
.icon-shop:before {
content: "\e65a";
}
.icon-sj-left-top:before {
content: "\e603";
}
.icon-sj-top:before {
content: "\e604";
}
.icon-sj-right-top:before {
content: "\e605";
}
.icon-sj-bottom:before {
content: "\e606";
}
.icon-sj-right-bottom:before {
content: "\e607";
}
.icon-sj-left:before {
content: "\e60d";
}
.icon-zsj:before {
content: "\e6bd";
}
.icon-del:before {
content: "\e718";
}
.icon-cut:before {
content: "\e609";
}
.icon-add:before {
content: "\e60a";
}
.icon-add-picture05:before {
content: "\e639";
}
.icon-add-picture04:before {
content: "\e636";
}
.icon-add-picture03:before {
content: "\e642";
}
.icon-add-picture02:before {
content: "\e8bc";
}
.icon-add-picture01:before {
content: "\e62c";
}
.icon-sandian:before {
content: "\e769";
}
.icon-nothing-collection:before {
content: "\e610";
}
.icon-nothing-more:before {
content: "\e624";
}
.icon-nothing-data:before {
content: "\e60c";
}
.icon-address-check:before {
content: "\e6c2";
}
.icon-address-unchecked:before {
content: "\e623";
}
.icon-navigate-now:before {
content: "\e640";
}
.icon-send-goods:before {
content: "\e601";
}
.icon-payment:before {
content: "\e602";
}
.icon-finish:before {
content: "\e63f";
}
.icon-take:before {
content: "\e649";
}
.icon-refund:before {
content: "\e613";
}
.icon-customer-black:before {
content: "\ec2e";
}
.icon-customer:before {
content: "\e628";
}
.icon-check:before {
content: "\e61e";
}
.icon-del-white:before {
content: "\e61f";
}
.icon-screen:before {
content: "\e60b";
}
.icon-search:before {
content: "\e653";
}
.icon-caidan-mo:before {
content: "\e73e";
}
.icon-renwu-mo:before {
content: "\e73f";
}
.icon-shop-cart:before {
content: "\e73d";
}
.icon-caidan-active:before {
content: "\e608";
}
.icon-renwu-acitve:before {
content: "\e67c";
}
.icon-home-mo:before {
content: "\e673";
}
.icon-home-active:before {
content: "\e674";
}
.icon-return:before {
content: "\e600";
}
.icon-next:before {
content: "\e60e";
}

9
commons/style.css Normal file
View File

@ -0,0 +1,9 @@
.enter-btn{
width: 94%;padding: 20rpx 0;
margin: 340rpx 0 64rpx 0;
border: 6rpx solid #30b67d;
background-color: #39d091;
color: #FFFFFF;
border-radius: 30rpx;
}
.cricle-box{width: 32rpx;height: 32rpx;background-color: #39d091;border-radius: 100%;}

View File

@ -0,0 +1,37 @@
第一步:引入组件
import statusContainer from '@/components/containers/status-container.vue';
第二步:注册组件
export default {
components:{
statusContainer
}
}
第三步:使用组件
<template>
<view>
<status-container
:ifReturn="true"
:ifTitle="true"
titlet="首页"
:ifTitleCenter="true"
titlec="#000000"
returnc="#333333"
backgroundc="#FFFFFF"
></status-container>
</view>
</template>
参数说明
ifTitle是否显示标题默认true
titlet标题文字默认标题
ifTitleCenter标题是否居中默认居中
titlec标题颜色默认#000000
ifReturn是否显示返回键默认显示
returnc返回键颜色默认#333333
backgroundc导航栏背景色默认#FFFFFF

View File

@ -0,0 +1,71 @@
<template>
<view>
<status-nav
:ifReturn="ifReturn"
:returnColor="returnc"
:titleColor="titlec"
:navBarTitle="titlet"
:ifTitle="ifTitle"
:ifCenter="ifTitleCenter"
:backgroudColor="backgroundc"></status-nav>
<view class="pad-zy20" :style="{paddingBottom: '70px'}">
<slot name="content"></slot>
</view>
</view>
</template>
<script>
import statusNav from '../status-navs/status-nav.vue';
export default {
name:"status-container",
components:{
statusNav
},
props:{
//
ifTitle:{
type:Boolean,
default:true
},
//
titlet:{
type:String,
default:'标题'
},
//
ifTitleCenter:{
type:Boolean,
default:true
},
//
titlec:{
type:String,
default:'#000000'
},
//
ifReturn:{
type:Boolean,
default:true
},
//
returnc:{
type:String,
default:"#333333"
},
//
backgroundc:{
type:String,
default:"#FFFFFF"
}
},
data() {
return {
};
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,41 @@
<template>
<view class="nothing">
<view class="nothing-box">
<image v-if="imgSrc!=''" class="nothing-img" :src="imgSrc" mode="aspectFill" lazy-load></image>
<i class="iconImg icon"
:class="['icon-nothing-more','icon-nothing-data','icon-nothing-collection'][currentType]"></i>
<view v-if="currentType!=1" class="nothing-con">{{content}}</view>
</view>
</view>
</template>
<script>
export default {
name:"nothing-page",
props:{
imgSrc:{ //
type:String,
default:''
},
content:{ //
type:String,
default:'暂无内容'
},
currentType:{ // icon
type:Number,
default: 0
}
},
data() {
return {};
}
}
</script>
<style scoped>
.nothing{position: fixed;top: 0;bottom: 0;left: 0;right: 0;display: flex;justify-content: center;align-items: center;}
.nothing-box{display: flex;justify-content: center;flex-direction: column;align-items: center;}
.nothing-box .nothing-img{width: 470rpx;height: 270rpx;}
.iconImg {font-size: 280rpx;color: #999999;}
.nothing-con{font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #999999;}
</style>

View File

@ -0,0 +1,54 @@
<template>
<view :style="{
color: textColor,
fontSize: textFontSize,
fontWeight: `${ ifBold ? 'bold' : 0 }`,
textAlign: `${ ifCenter ? 'center' : 'left' }`,
padding: paddingStr
}">{{textStr}}</view>
</template>
<script>
export default {
name:"pitera",
props:{
//
textStr: {
type:String,
default:'-- NO MORE --'
},
//
textColor: {
type:String,
default:'#999999'
},
//
textFontSize: {
type: String,
default: '24rpx'
},
//
ifBold: {
type:Boolean,
default:false
},
//
ifCenter: {
type:Boolean,
default: true
},
//
paddingStr: {
type:String,
default:'20rpx'
}
},
data() {
return {};
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,19 @@
<!-- 暂无更多组件参数的使用
组件一
<nothing-page
:imgSrc="图片路径可相对、可绝对、可网络"
:currentType="0,1,2,..."
:content="'-- NO MORE --'"></nothing-page>
组件二
<pitera
:textColor="'#999999'"
:textStr="'-- NO MORE --'"
:textFontSize="'24rpx'"
:ifBold="false"
:ifCenter="true"
:paddingStr="'20rpx'"></pitera>
-->

View File

@ -0,0 +1,43 @@
第一步:引入组件
import statusNav from '@/components/status-navs/status-nav.vue';
第二步:注册组件
export default {
components:{
statusNav
}
}
第三步:使用组件
<template>
<view>
<status-nav
:ifReturn="true"
:ifTitle="true"
navBarTitle=""
:ifCenter="true"
titleColor="#000000"
returnc="#333333"
backgroudColor="#FFFFFF"
navBarHeight="40px"
clipNumber="1"
marginBottom="20rpx"
></status-nav>
</view>
</template>
参数说明
ifTitle是否显示标题默认true
navBarTitle导航栏标题默认空值
ifCenter标题是否居中默认居中
titleColor标题颜色默认#000000
ifReturn是否显示返回键默认显示
returnc返回键颜色默认#333333
backgroudColor状态栏、导航栏背景颜色默认#FFFFFF
navBarHeight导航栏高度默认40px
clipNumber标题最多几行显示默认1
marginBottom底部距离内容多高默认20rpx

View File

@ -0,0 +1,151 @@
<template>
<view class="status-box" :style="{marginBottom: marginBottom}">
<!-- 网络电量栏 start -->
<view :style="{height: statusBarHeight+'px',background: backgroudColor}"></view>
<!-- 网络电量栏 end -->
<!-- 头部状态栏 start -->
<view class="status-nav disac" :style="{background: backgroudColor,height:navBarHeight}">
<!-- 返回键 start -->
<view class="disjcac left-box" @tap="backEv" v-if="ifReturn" :style="{height: navBarHeight}" >
<slot name="leftcontent">
<i class="icon icon-return" style="font-size: 38rpx;" :style="{color: returnColor}"></i>
</slot>
</view>
<!-- 返回键 end -->
<!-- 标题 start -->
<view class=" tab-title "
:style="{
color: titleColor,
justifyContent: ifCenter ? 'center' : '',
padding: ifCenter ? '0px' : `${ifReturn ? '0 38' : '0 15'}px`}">
<view class="title-box" :class="['','clips1','clips2'][clipNumber*1]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">
<!-- 有网络 -->
<view v-if="ifTitle && ifNet" >{{navBarTitle}}</view>
<!-- 无网络 -->
<view v-if="!ifNet">{{netText}}<text @tap="refreshEv" style="color: #3875F6;margin-left: 20rpx;">刷新</text></view>
</view>
</view>
<!-- 标题 end -->
<!-- 右侧图标 start -->
<view class="right-box disjcac" :style="{height: navBarHeight}">
<slot name="rightcontent"></slot>
</view>
<!-- 右侧图标 end -->
</view>
<!-- 头部状态栏 end -->
</view>
</template>
<script>
export default {
name:'status-nav',
props:{
//
backgroudColor:{
type:String,
default:'#FFFFFF'
},
//
navBarHeight: {
type:String,
default:'42px'
},
//
ifReturn:{
type:Boolean,
default:true
},
//
returnColor: {
type:String,
default:'#000'
},
//
ifTitle:{
type:Boolean,
default:true
},
//
navBarTitle: {
type:String,
default:''
},
//
clipNumber: {
type:String,
default:'1'
},
//
titleColor:{
type:String,
default:'#333333'
},
//
ifCenter: {
type:Boolean,
default: true
},
//
marginBottom: {
type:String,
default:'20rpx'
},
},
data(){
return {
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
ifNet:true ,//
netText:'当前无网络',
netTimer:null
}
},
mounted() {
//
this.$toolAll.tools.networkStatus();
//
this.$toolAll.tools.obtainPagePath();
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(){
uni.navigateBack({delta:1})
}
}
}
</script>
<style scoped>
.disjcac{display: flex;justify-content: center;align-items: center;}
.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: sticky;top: 0;left: 0;right: 0;z-index: 10;}
.status-nav{width: 100%;position: relative;}
.left-box {position: absolute;padding: 0 20rpx;}
.right-box {position: absolute;right: 0; padding: 0 20rpx;}
.tab-title {width: 100%;font-size: 32rpx;display: flex;font-weight: bold;}
.tab-title .title-box {margin-top: -4rpx;}
</style>

4
jsFile/public-api.js Normal file
View File

@ -0,0 +1,4 @@
import request from './requst.js';
export function uploadImg(data) {
return request.upload("/universal/api.upload/upload", data);
}

180
jsFile/requst.js Normal file
View File

@ -0,0 +1,180 @@
// 清理所有缓存并前往登录授权页
const goLogin = () => {
uni.clearStorageSync();
uni.navigateTo({
url: '/pages/login/login'
})
}
let flag = true;
// 刷新token并跳转到当前页面
const refreshTokenPage = () => {
uni.login({
provider: 'weixin',
success: (result)=> {
uni.request({
url: `${getApp().globalData.hostapi}user/login`,
method: 'post',
data: {code:result.code},
success: res => {
if(res.data.data.token!=''){
flag = true;
uni.setStorageSync('token',res.data.data.token); // 缓存token
uni.setStorageSync('openid',res.data.data.openid)//缓存openid
uni.setStorageSync('expire',res.data.data.expire); // 缓存失效时间(时间戳格式)
uni.reLaunch({ // 重新进入当前页面
url:uni.getStorageSync('page-path-options')
})
}
}
})
},
});
}
// 请求错误处理
const checkError = (e) => {
// console.error("----接口错误----", e)
if (e.data) {
if (e.data.code) {
switch (Number(e.data.code)) {
case 500:
// 接口错误
console.log('500接口错误');
case 4003:
// 参数错误
console.log('4003参数错误');
break;
case 4004:
// 记录不存在
console.log('4004记录不存在');
break;
case 5001:
// xxx错误
console.log('5001xxx错误');
break;
case 5050:
// 服务器错误,请稍后重试
console.log('5050服务器错误请稍后重试');
// 调用到登录页
goLogin();
break;
case 5051:
// 未知错误
console.log('5051未知错误');
break;
case 6001:
// token验证失败或已失效
console.log('6001token验证失败或已失效');
if(flag) {
flag = false;
// 调用刷新token事件并跳转到当前页面
refreshTokenPage();
}
break;
}
}
}
}
// 封装request的(GET、POST)请求
const request = (method, url, options) => {
let methods = '';
let headers = {};
switch (method) {
case 'get':
methods = 'GET'
headers = {
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
}
break;
case 'post':
methods = 'POST'
headers = {
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
}
break;
case 'postForm':
methods = 'POST'
headers = {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
}
break;
}
return new Promise((resolve, reject) => {
uni.request({
url: `${getApp().globalData.hostapi}${url}`,
method: methods,
data: options,
header: headers,
success: res => {
console.log(`${url}返的结果===>`,res);
if (res.statusCode == 200) {
if (res.data.code == 0) {
// 接口调用成功
resolve(res.data);
} else {
// 接口返回错误信息
checkError(res);
}
} else {
// 接口返回错误信息
checkError(res);
}
},
fail: e => {
// 接口请求错误
checkError(e, reject);
},
complete: rest => {
// 是否成功,都会执行
console.log(rest,100);
}
})
})
}
// 上传文件 封装请求
const uploadFile = (url, options) => {
let tempData = options || {}
return new Promise((resolve, reject) => {
uni.uploadFile({
url: `${getApp().globalData.hostapi}${url}`,
filePath: tempData.path,
name: 'image',
fileType:'image',
formData: tempData,
header: {
'Content-Type': 'multipart/form-data;charset=UTF-8',
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
},
success: res => {
if (res.statusCode == 200) {
let temp = JSON.parse(res.data)
if (temp.code == 0) {
resolve(temp)
}
}
}
});
})
}
export default {
get: (url, options) => {
return request('get', url, options)
},
// JOSN格式
post: (url, options) => {
return request('post', url, options)
},
// form-data格式
postForm: (url, options) => {
return request('postForm', url, options)
},
// 上传
upload: (url, options) => {
return uploadFile(url, options)
}
}

530
jsFile/tools.js Normal file
View File

@ -0,0 +1,530 @@
const tools = {
timer:'',
/**
* @description 埋点倒计时
*/
daoTime(){
let daoTime = uni.getStorageSync('daoTime')
if(daoTime==''){//初次判断倒计时是否为空
uni.setStorageSync('daoTime',60)//设置倒计时
daoTime = uni.getStorageSync('daoTime')
this.timer = setInterval(()=>{
uni.setStorageSync('daoTime',daoTime--)//设置倒计时
if(uni.getStorageSync('daoTime')<=0 || uni.getStorageSync('maiList').length==5){
uni.removeStorageSync('daoTime')//清空倒计时
clearInterval(this.timer)//关闭倒计时
// console.log('上/报,埋点');
uni.removeStorageSync('maiList')//清空上报参数
this.daoTime()//重新倒计时
}
},1000)
} else {//继续当前倒计时倒计
this.timer = setInterval(()=>{
uni.setStorageSync('daoTime',daoTime--)//设置倒计时
if(uni.getStorageSync('daoTime')<=0 || uni.getStorageSync('maiList').length==5){
uni.removeStorageSync('daoTime')//清空倒计时
clearInterval(this.timer)//关闭倒计时
// console.log('上报,埋点');
uni.removeStorageSync('maiList')//清空上报参数
this.daoTime()//重新倒计时
}
},1000)
}
},
/**
* @description 关闭倒计时
*/
closeTimer(){
clearInterval(this.timer)
console.log('倒计时清空了');
},
/**
* @description 获取字符串中的数字
*/
obtainCount(str) {
return parseInt(str.replace(/[^0-9]/ig,""))
},
/**
* @description 获取微信扫码后的结果并解析
*/
unescapeEv(op) {
let str = unescape(op.q);
return str;
},
/**
* @description 手机号验证
*/
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}$/;
return !reg_tel.test(phone);
},
/**
* @description 电子邮箱验证
*/
isEmail(email){
let reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
return !reg_email.test(email);
},
/**
* @description 身份证验证
*/
isIdentity(identity) {
let reg_identity = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return !reg_identity.test(identity);
},
/**
* @description 手机号中间四位用"****"带替
*/
hideMPhone(phone){
return `${phone.substr(0, 3)}****${phone.substr(7)}`
},
/**
* @description 手机号中间加字符
*/
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;
},
/**
* @description 昵称从第一个字开始后面的都用"*"代替
*/
hideName(name,num){
return `${name.substr(0, 1)}****${name.substr(name.length-1)}`
},
/**
* @description 金额转换各三位数使用英文","隔开
*/
changeNum(num){
if (num) {
// 针对整数部分进行格式化处理,这是此方法的核心,也是稍难理解的一个地方,逆向的来思考或者采用简单的事例来实现就容易多了
/*
也可以这样想象现在有一串数字字符串在你面前如果让你给他家千分位的逗号的话你是怎么来思考和操作的?
字符串长度为0/1/2/3时都不用添加
字符串长度大于3的时候从右往左数有三位字符就加一个逗号然后继续往前数直到不到往前数少于三位字符为止
*/
num = num+''; // 数字转换为字符串,数字是没有.length属性的
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3))
}
// 将数据(符号、整数部分、小数部分)整体组合返回
return num;
}
},
/**
* @description 整数添加.00小数就不添加
*/
addXiaoShu(num){
// console.log(num,'添加小数点后两位小数');
let str = num.toString();
str = str*1;
str = str.toFixed(2);
str = str+'';
return str.includes('.') ? str : str = num + '.00';
},
// type:+加、-减、*乘、/除
// len:小数后保留几位
/**
* @description 数字换算解决失精度问题
*/
operationEv(num1,num2,type,len=0){
// 将数字转化成字符串
num1 = num1.toString();
num2 = num2.toString();
// 获取小数点的位置
var index1 = num1.indexOf(".");
var index2 = num2.indexOf(".");
// 如果小数点存在,那么就再获取各自的小数位数
var ws1 = 0;
var ws2 = 0;
if(index1 != -1){
ws1 = num1.split(".")[1].length;
}
if(index2 != -1){
ws2 = num2.split(".")[1].length;
}
// 看谁的小数位数大,谁的小数位数小
var bigger = (ws1 > ws2) ? ws1 : ws2;
var smaller = (ws1 < ws2) ? ws1 : ws2;
// 计算得到需要补齐的0的个数
var zerosCount = bigger - smaller;
// 好了,现在不管三七二十,全部去除小数点
num1 = num1.replace(".","");
num2 = num2.replace(".","");
// 比较num1和num2谁大比较方法就是看谁是smaller是smaller的一方就补0
if(ws1 == smaller){
for (var i = 0; i < zerosCount; i++) {
num1 += "0";
}
} else {
for (var i = 0; i < zerosCount; i++) {
num2 += "0";
}
}
// 开始计算
var sum = "";
if(type=="+"){
// 加
sum = parseInt(num1) + parseInt(num2);
}
if(type=="-"){
// 减
sum = parseInt(num1) - parseInt(num2);
}
if(type=="*"){
// 乘
sum = parseInt(num1) * parseInt(num2);
}
if(type=="/"){
// 除
sum = parseInt(num1) / parseInt(num2);
}
// 根据较大的小数位数计算倍数
var beishu = 1;
for (var i = 0; i < bigger; i++) {
beishu = beishu*10;
}
sum = sum/beishu;
if(type=="*"){
switch (bigger){
case 1:
sum = sum / 10;
break;
case 2:
sum = sum / 100;
break;
case 3:
sum = sum / 1000;
break;
}
}
if(type=="/"){
switch (bigger){
case 1:
sum = sum * 10;
break;
case 2:
sum = sum * 100;
break;
case 3:
sum = sum * 1000;
break;
}
}
len!=0 ? sum = sum.toFixed(len) : '';
return sum;
},
/**
* @description 金额输入框验证
*/
checkPrice(number,zong){
let reg = /^[0-9]*$/;//数字正则表达式
let newObj = {}
zong = parseInt(zong).toString()//取小数点左边的整数
if(!reg.test(number)){//不是数字时
newObj = {
len:zong.length,//动态设置长度
val:zong//动态设置值正整数的总金额
}
} else {//是数字时
newObj = {
len:zong.length,
val:number//动态设置当前输入的值
}
if(number*1 > zong*1){//输入的金额大于总金额
newObj.val = zong//赋值总金额
}
}
return newObj
},
/**
* @description 文本提示
*/
showToast: function(msg, icon='none',time) {
// 弹框显示时间默认2秒
var newTime = 2000
if (time) {newTime = time;}
return uni.showToast({
title: msg,
icon: icon,
duration:newTime
})
},
/**
* @description 富文本处理
*/
escape2Html(str) {
var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
return str.replace(/&(lt|gt|nbsp|amp|quot|src);/ig, function (all, t) {
return arrEntities[t];
})
.replace('<section', '<div')
.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, p1) => {
return `<img mode="widthFix" style="max-width:100%!important;height:auto" src='${p1.indexOf('http') > -1 ? p1 : 'https://oss.hmzfyy.cn' + p1}' />`
})
},
/**
* @description 检查网络状态
*/
networkStatus(){
uni.getNetworkType({
success: (res)=> {
console.log('当前网络状态:',res.networkType);//none当前无网络连接
if(res.networkType=='none'){
uni.setStorageSync('isNet',false)
} else {
uni.setStorageSync('isNet',true);
// 微信小程序原生API性能优化
// #ifdef MP-WEIXIN
// 连网下,检测小程序是否有更新
this.checkUpdate();
// #endif
}
}
});
},
/**
* @description 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: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~',
})
})
},
/**
* @description 文本复制
*/
clickCopy(data){
uni.setClipboardData({
data: data,
success: ()=> {
uni.showToast({title: '复制成功',duration: 2000,icon: 'none'});
}
});
},
authTimer:null,
/**
* @description 判断是否授权没授权前往登录页面授权
*/
judgeAuth(){
let auth = false;
clearTimeout(this.authTimer);
if(!uni.getStorageSync('token')) {
this.showToast('请登录');
this.authTimer = setTimeout(()=>{
uni.navigateTo({url:'/pages/login/login'});
},2000)
} else {
auth = true;
}
return auth;
},
/**
* @description 判断当前环境清空日志输出
*/
currentContext(){
// #ifdef APP-PLUS
if(uni.getSystemInfoSync().platform != "devtools"){//devtools开发版 值域为ios、android、mac3.1.10+、windows3.1.10+、linux3.1.10+
// console.log = () =>{}
}
// #endif
// 微信小程序原生API性能优化
// #ifdef MP-WEIXIN
let hInfo = wx.getAccountInfoSync();
// console.log(hInfo.envVersion);//develop:开发版 trial体验版 release正式版
if(hInfo.miniProgram.envVersion == "release"){
// 清除所有输出日志
console.log = () =>{};
// 开启埋点倒计时
// this.daoTime();
}
// #endif
},
/**
* @description 禁止小程序使用右上角分享
*/
disableShareEv(){
// #ifdef MP-WEIXIN
wx.hideShareMenu({
menus: ['shareAppMessage', 'shareTimeline']
})
// #endif
},
/**
* @description 获取当前页面完整url
*/
obtainPagePath(){
let pages = getCurrentPages();
// 获取纯页面路径
let route = pages[pages.length - 1].route;
uni.setStorageSync('url',route);
// 获取当前页面url带参数
let routeParam = pages[pages.length - 1].$page.fullPath;
// console.log(routeParam.options,'获取当前url参数');
uni.setStorageSync('page-path-options',routeParam);
console.log(uni.getStorageSync('page-path-options'),'当前页面完整路径');
},
/**
* @description 拨打电话
* @param {Number} phone
*/
countCustomer(phone=10086){
const res = uni.getSystemInfoSync();
if(res.platform=='ios'){
uni.makePhoneCall({
phoneNumber:phone*1,
success: () => {},
fail: () => {}
})
} else {
uni.showActionSheet({
itemList:[phone,'立即呼叫'],
itemColor:'#3875F6',
success: (res) => {
if(res.tapIndex==1){
uni.makePhoneCall({
phoneNumber:phone
})
}
}
})
}
},
/**
* @description 图片选择
* @param {Number} count
*/
uploadImg(count=1) {
let imgArr = [];
uni.chooseImage({
count:count,
sizeType:['compressed'],
sourceType:['album','camera'],
success: (res) => {
let files = res.tempFilePaths
console.log(files);
files.forEach(item=>{
imgArr.push(item);
})
}
})
return imgArr;
},
/**
* @description 打开小程序获取用户信息权限
*/
wxOpenSet() {
// #ifdef MP-WEIXIN
// 用户信息
uni.authorize({
scope:'scope.userInfo',
success: (res) => {},
fail: (res) => {
uni.showModal({
content:'检测到您没打开获取信息功能权限,是否去设置打开?',
confirmText: "确认",
cancelText:'取消',
success: (res) => {
if(res.confirm){
uni.openSetting({
success: (res) => {
console.log(res);
}
})
}else{
console.log('取消');
}
}
})
}
})
// #endif
}
}
export default {
tools
}

20
main.js Normal file
View File

@ -0,0 +1,20 @@
import Vue from 'vue';
import App from './App';
import store from './store'
Vue.prototype.$store = store
// 常用便捷式公共方法
import tools from '@/jsFile/tools.js';
Vue.prototype.$toolAll = tools;
// 响应数据
import requst from '@/jsFile/requst.js';
Vue.prototype.$requst = requst;
App.mpType = 'app';
const app = new Vue({
store,
...App
})
app.$mount()

87
manifest.json Normal file
View File

@ -0,0 +1,87 @@
{
"name" : "app适配微信小程序",
"appid" : "__UNI__768F35C",
"description" : "这是一款基于uniapp开发的app和微信小程序的模板框架",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
"usingComponents" : true,
"compilerVersion" : 3,
/* 5+App */
"modules" : {
"Payment" : {},
"Share" : {}
},
/* */
"distribute" : {
/* */
"android" : {
/* android */
"permissions" : [
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
"ios" : {},
/* ios */
"sdkConfigs" : {
"maps" : {},
"payment" : {
"weixin" : {
"__platform__" : [ "ios", "android" ],
"appid" : "wx2654bc27c419ada6",
"UniversalLinks" : ""
}
},
"push" : {},
"geolocation" : {},
"share" : {
"weixin" : {
"appid" : "wx2654bc27c419ada6",
"UniversalLinks" : ""
}
},
"ad" : {}
}
},
"splashscreen" : {
"alwaysShowBeforeRender" : false,
"waiting" : false
}
},
/* SDK */
"quickapp" : {},
/* */
"mp-weixin" : {
/* */
"appid" : "wx705dfb975654e53a",
"setting" : {
"urlCheck" : true,
"es6" : true
},
"usingComponents" : true,
"permission" : {
"scope.userLocation" : {
"desc" : "您的位置信息将用于小程序位置接口的效果展示"
}
}
},
"mp-baidu" : {
"appid" : "24346353"
}
}

15
package-lock.json generated Normal file
View File

@ -0,0 +1,15 @@
{
"name": "轮播视频和图片",
"version": "1.0.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "轮播视频和图片",
"version": "1.0.1",
"dependencies": {
"moment": "^2.29.3"
}
}
}
}

11
package.json Normal file
View File

@ -0,0 +1,11 @@
{
"id": "zhuge-swiper",
"name": "轮播视频和图片",
"version": "1.0.1",
"description": "自动轮播视频和图片组件。播放视频时停止轮播手动滑动swiper时视频停止播放",
"keywords": [
"vue",
"swiper",
"zhuge"
]
}

111
pages.json Normal file
View File

@ -0,0 +1,111 @@
{
"pages": [
{
"path" : "pages/welcome-page/welcome-page",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom" //
}
}
],
"subPackages": [{ //A
"root": "pagesA",
"pages": [
{
"path" : "passageway/passageway",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom" //
}
}
,{
"path" : "login/login",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom" //
}
}
,{
"path" : "opinion-submit/opinion-submit",
"style" :
{
"navigationBarTitleText": "民意提交",
"enablePullDownRefresh": false
}
}
,{
"path" : "my-opinion-list/my-opinion-list",
"style" :
{
"navigationBarTitleText": "我的民意提交",
"enablePullDownRefresh": false,
"disableSwipeBack": false,
"navigationStyle": "custom"
}
}
,{
"path" : "feedback/feedback",
"style" :
{
"navigationBarTitleText": "反馈记录",
"enablePullDownRefresh": false
}
}
,{
"path" : "community/opinion-handle/opinion-handle",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
,{
"path" : "community/handle/handle",
"style" :
{
"navigationBarTitleText": "民意办理",
"enablePullDownRefresh": false
}
}
,{
"path" : "manager/examine-list/examine-list",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
,{
"path" : "detail/detail",
"style" :
{
"navigationBarTitleText": "详情查看",
"enablePullDownRefresh": false
}
}
]
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFFFFF", //
"backgroundColor":"#FFFFFF",//
"backgroundTextStyle":"light"// loading dark / light
}
}

View File

@ -0,0 +1,131 @@
<template>
<view>
<image class="width100" src="/static/icon/welcome-img.jpg" mode="widthFix"></image>
<view class="fon60 bold mar-s50 mar-x50 tcenter" style="color: #010101;">洛河民意通</view>
<view class="fon30 col6 tcenter" style="max-width: 560rpx;margin: 0 auto;">
我是说明文案我是说明文案我是说明文案我是说明文案我是说明文案我是说明文案
</view>
<view class="disjcac mar-s120">
<view class="disjcac enter-btn posir" @tap="goLogin">
进入
</view>
<!-- <view class="disjcac enter-btn posir">
进入
<button :disabled="ifFlag" @click="bindGetUserInfo" class="posia syxzo">立即授权</button>
</view> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo:'',
ifFlag:false
}
},
methods: {
//
goLogin(){
// uni.navigateTo({
// url:'/pagesA/login/login'
// })
//
// uni.navigateTo({
// url:'/pagesA/my-opinion-list/my-opinion-list'
// })
//
uni.navigateTo({
url:'/pagesA/community/opinion-handle/opinion-handle'
})
//
// uni.navigateTo({
// url:'/pagesA/manager/examine-list/examine-list'
// })
},
//
bindGetUserInfo() {
if(!this.ifFlag){
this.$toolAll.tools.showToast('正在调起授权','none',6000);
this.ifFlag = true;
wx.getSetting({
success: (result)=> {
uni.hideToast();
//
if (result.authSetting['scope.userInfo']) {
//
this.getUserInfoEv();
} else {
//
this.getUserInfoEv();
}
}
})
}
},
//
getUserInfoEv(){
// #ifdef MP-WEIXIN
//
wx.getUserProfile({
lang:'zh_CN',
desc:'获取亲的昵称、头像及性别',
success: (resEnd)=> {
//
uni.login({
provider: 'weixin',
success: (rescode)=> {
uni.reLaunch({
url:'/pagesA/passageway/passageway'
})
// this.updateUserInfo(rescode.code);
},
});
},
complete: () => {
this.ifFlag = false;
}
});
// #endif
},
//
updateUserInfo(code) {
var params = {
code:code,
nickname: this.userInfo.nickName,//
headimgurl: this.userInfo.avatarUrl,//
country: this.userInfo.country,//
province: this.userInfo.province,//
city: this.userInfo.city,//
gender: this.userInfo.gender,//
language:this.userInfo.language,//
is_active:1
}
this.$requst.post('user/login',params).then(res => {
if(res.data.token!=''){
if(uni.getStorageSync('urlparams')) {
uni.reLaunch({ //
url:uni.getStorageSync('urlparams')
})
} else {
uni.reLaunch({
url:'/pages/tabbar/pagehome/pagehome'
})
}
}
},error => {})
}
}
}
</script>
<style>
</style>
<style>
.enter-btn{
width: 480rpx;padding: 20rpx 0;
margin: 0;
}
</style>

View File

@ -0,0 +1,138 @@
<template>
<view>
<view class="pad-zy20 fon24">
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs">序号</view>
<view class="col9">LH20220729130234</view>
</view>
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs">审核状态</view>
<view class="col9">待审核</view>
</view>
<view class="disjbac bbot pad-sx20">
<view class="fon30 colb bold flexs">真实姓名</view>
<view class="col9">测试村</view>
</view>
<view class="disjbac bbot pad-sx20">
<view class="fon30 colb bold flexs">联系方式</view>
<view class="col9">测试村</view>
</view>
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs">社区</view>
<view class="col9">新华社区</view>
</view>
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs"></view>
<view class="col9">测试村</view>
</view>
<view class="dis fon30 bbot pad-sx30">
<view class="colb bold flexs">图片</view>
<view class="disac width100 fe">
<image src="" mode="aspectFill" class="width155 radius30 mar-z20"></image>
</view>
</view>
<view class="dis fon30 bbot pad-sx30">
<view class="colb bold flexs">视频</view>
<view class="disac width100 fe">
<image src="" mode="aspectFill" class="width155 radius30 mar-z20"></image>
</view>
</view>
<view class="disjb bbot pad-sx20">
<view class="fon30 colb bold flexs">描述文案</view>
<view class="col9 tright line-h40" style="max-width: 60%;">我想问下我们村的机耕道什么 时候可以弄好当前以及严重 影响我们出行了</view>
</view>
<view class="dis fon30 bbot pad-sx30">
<view class="colb bold flexs">语音</view>
<view class="disac col9 width100 fe">
<view @tap="playVoice" class="col9 radius30 disjcac fc posir mar-y20 item-box width155" style="border: 1px solid #d9d9d9;">
<image src="/static/icon/icon-audio.png" mode="aspectFill" style="width: 74rpx;height: 85rpx;"></image>
</view>
</view>
</view>
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs">类别</view>
<view class="col9">测试村</view>
</view>
<view class="" style="margin: 0 -20rpx;">
<view class="disac pad-zy20 pad-x30 pad-s40">
<view class="cricle-box"></view>
<view class="fon36 mar-z20 bold">处理反馈</view>
</view>
<view class="pad-zy20 fon30" style="background-color: #f5f5f5;">
<view class="col9 pad-sx30">2021年7月19日 2130</view>
<view class="disjb bbot pad-x30">
<view class="">调查情况</view>
<view class="col9 tright" style="max-width: 50%;">情况属实马上安排人员 处理请耐心等待</view>
</view>
<view class="disjb bbot pad-sx30">
<view class="">处理结果</view>
<view class="col9 tright" style="max-width: 50%;">情况属实马上安排人员 处理请耐心等待</view>
</view>
</view>
<view class="disac pad-zy20 pad-x30 pad-s40">
<view class="cricle-box"></view>
<view class="fon36 mar-z20 bold">群众反馈</view>
</view>
<view class="pad-zy20 fon30" style="background-color: #f5f5f5;">
<view class="col9 pad-sx30">2021年7月19日 2130</view>
<view class="disjb bbot pad-x30">
<view class="">反馈意见不满意</view>
<view class="col9 tright" style="max-width: 50%;">等了好久了还没有上门 处理</view>
</view>
</view>
</view>
</view>
<view class="disjcac pad-sx50" v-if="ifManager==0">
<view class="disjcac enter-btn" style="margin: 0;" @tap="handleEv"></view>
</view>
<view class="disjcac pad-sx50" v-if="ifManager==1">
<view class="disjcac enter-btn" style="margin: 0;background-color: #f71200;border-color: #f71200;" @tap="handleEv"></view>
</view>
</view>
</template>
<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
data() {
return {
audioText:'',
ifManager:0//
}
},
onLoad(op) {
if(op.manager) this.ifManager = op.manager;
},
onHide() {
innerAudioContext.stop();
},
methods: {
//
playVoice() {
if (this.audioText) {
innerAudioContext.src = this.audioText;
innerAudioContext.play();
}
},
//
handleEv(id){
uni.navigateTo({
url:`/pagesA/community/handle/handle?id=${id}`
})
},
}
}
</script>
<style>
.del-btn{
background-color: #39d091;width: 45rpx;height: 45rpx;border-radius: 100%;top: -20rpx;right: -20rpx;
}
.width155{
width: 155rpx;
height: 150rpx;
}
.item-box{border: 1px solid #FFFFFF;}
</style>

View File

@ -0,0 +1,36 @@
<template>
<view class="pad-x50 pad-zy30">
<view class="disac fon36 pad-sx30">调查情况</view>
<view class="disjcac">
<view class="disjbac radius30 width100 pad-sx20 pad-zy30" style="border: 2rpx solid #d9d9d9;box-sizing: border-box;">
<textarea class="col9 fon30" style="height: 272rpx;" placeholder="请输入调查结果"></textarea>
</view>
</view>
<view class="disac fon36 pad-sx30">处理结果</view>
<view class="disjcac">
<view class="disjbac radius30 width100 pad-sx20 pad-zy30" style="border: 2rpx solid #d9d9d9;box-sizing: border-box;">
<textarea class="col9 fon30" style="height: 272rpx;" placeholder="请输入处理结果"></textarea>
</view>
</view>
<view class="disjbac mar-s70">
<view class="enter-btn disjcac" style="width: 45%;margin: 0;">立即提交</view>
<view class="enter-btn disjcac" style="width: 45%;margin: 0;color: #000000;background-color: #e5e5e5;border-color: #d9d9d9;">无效</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,62 @@
<template>
<view>
<statusContainer titlet="民意办理" :ifReturn="false">
<view slot="content">
<view class="bacf disja pad-sx20 fon30" :style="{top:newtop+42+'px'}" style="margin: -20rpx -20rpx 0 -20rpx;position: sticky;z-index: 10;">
<view @tap="switchEv(0)" class="pad-sx20 disjcac radius20" :style="switchIndex==0?'background-color:#39d091;color:#FFFFFF;':''" style="width: 288rpx;">待办理</view>
<view @tap="switchEv(1)" class="pad-sx20 disjcac radius20" :style="switchIndex==1?'background-color:#39d091;color:#FFFFFF;':''" style="width: 288rpx;">已办理</view>
</view>
<view class="mar-s20 radius20 fon24 bacf posir" v-for="(item,index) in 50" :key="index">
<view class="pad-sx20 pad-zy50 status-box" :style="{backgroundColor:['#f8bf00','#39d091'][switchIndex]}">{{['待办理','已办理'][switchIndex]}}</view>
<view class="pad20 bbot line-h46 pad-x40">
<view class="fon30">LH20220729130234</view>
<view class="">用户名匿名提交</view>
<view class="">金牛社区A村</view>
<view class="">反馈问题我就是想问下我们村的路多久能修好</view>
</view>
<view class="dis fon30 disjcac" v-if="switchIndex==0">
<view @tap="handleEv(0)" class="pad-sx30 disac">
<image class="mar-y20" src="/static/icon/icon-handle.png" mode="" style="width: 34rpx;height: 34rpx;"></image>
立即办理
</view>
</view>
</view>
</view>
</statusContainer>
</view>
</template>
<script>
import statusContainer from '@/components/containers/status-container.vue';
export default {
components:{
statusContainer
},
data() {
return {
switchIndex:0,
newtop:uni.getSystemInfoSync().statusBarHeight
}
},
methods: {
//
switchEv(index){
console.log(index);
this.switchIndex = index;
},
//
handleEv(id){
uni.navigateTo({
url:`/pagesA/detail/detail?id=${id}&manager=0`
})
},
}
}
</script>
<style>
page{
background-color: #f5f5f5;
}
.status-box{position: absolute;right: 0;top: 0;border-radius: 0 0 0 30rpx;}
</style>

138
pagesA/detail/detail.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<view>
<view class="pad-zy20 fon24">
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs">序号</view>
<view class="col9">LH20220729130234</view>
</view>
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs">审核状态</view>
<view class="col9">待审核</view>
</view>
<view class="disjbac bbot pad-sx20">
<view class="fon30 colb bold flexs">真实姓名</view>
<view class="col9">测试村</view>
</view>
<view class="disjbac bbot pad-sx20">
<view class="fon30 colb bold flexs">联系方式</view>
<view class="col9">测试村</view>
</view>
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs">社区</view>
<view class="col9">新华社区</view>
</view>
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs"></view>
<view class="col9">测试村</view>
</view>
<view class="dis fon30 bbot pad-sx30">
<view class="colb bold flexs">图片</view>
<view class="disac width100 fe">
<image src="" mode="aspectFill" class="width155 radius30 mar-z20"></image>
</view>
</view>
<view class="dis fon30 bbot pad-sx30">
<view class="colb bold flexs">视频</view>
<view class="disac width100 fe">
<image src="" mode="aspectFill" class="width155 radius30 mar-z20"></image>
</view>
</view>
<view class="disjb bbot pad-sx20">
<view class="fon30 colb bold flexs">描述文案</view>
<view class="col9 tright line-h40" style="max-width: 60%;">我想问下我们村的机耕道什么 时候可以弄好当前以及严重 影响我们出行了</view>
</view>
<view class="dis fon30 bbot pad-sx30">
<view class="colb bold flexs">语音</view>
<view class="disac col9 width100 fe">
<view @tap="playVoice" class="col9 radius30 disjcac fc posir mar-y20 item-box width155" style="border: 1px solid #d9d9d9;">
<image src="/static/icon/icon-audio.png" mode="aspectFill" style="width: 74rpx;height: 85rpx;"></image>
</view>
</view>
</view>
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs">类别</view>
<view class="col9">测试村</view>
</view>
<view class="" style="margin: 0 -20rpx;" v-if="ifManager!=2">
<view class="disac pad-zy20 pad-x30 pad-s40">
<view class="cricle-box"></view>
<view class="fon36 mar-z20 bold">处理反馈</view>
</view>
<view class="pad-zy20 fon30" style="background-color: #f5f5f5;">
<view class="col9 pad-sx30">2021年7月19日 2130</view>
<view class="disjb bbot pad-x30">
<view class="">调查情况</view>
<view class="col9 tright" style="max-width: 50%;">情况属实马上安排人员 处理请耐心等待</view>
</view>
<view class="disjb bbot pad-sx30">
<view class="">处理结果</view>
<view class="col9 tright" style="max-width: 50%;">情况属实马上安排人员 处理请耐心等待</view>
</view>
</view>
<view class="disac pad-zy20 pad-x30 pad-s40">
<view class="cricle-box"></view>
<view class="fon36 mar-z20 bold">群众反馈</view>
</view>
<view class="pad-zy20 fon30" style="background-color: #f5f5f5;">
<view class="col9 pad-sx30">2021年7月19日 2130</view>
<view class="disjb bbot pad-x30">
<view class="">反馈意见不满意</view>
<view class="col9 tright" style="max-width: 50%;">等了好久了还没有上门 处理</view>
</view>
</view>
</view>
</view>
<view class="disjcac pad-sx50" v-if="ifManager==0">
<view class="disjcac enter-btn" style="margin: 0;" @tap="handleEv"></view>
</view>
<view class="disjcac pad-sx50" v-if="ifManager==1">
<view class="disjcac enter-btn" style="margin: 0;background-color: #f71200;border-color: #f71200;" @tap="handleEv"></view>
</view>
</view>
</template>
<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
data() {
return {
audioText:'',
ifManager:0//
}
},
onLoad(op) {
if(op.manager) this.ifManager = op.manager;
},
onHide() {
innerAudioContext.stop();
},
methods: {
//
playVoice() {
if (this.audioText) {
innerAudioContext.src = this.audioText;
innerAudioContext.play();
}
},
//
handleEv(id){
uni.navigateTo({
url:`/pagesA/community/handle/handle?id=${id}`
})
},
}
}
</script>
<style>
.del-btn{
background-color: #39d091;width: 45rpx;height: 45rpx;border-radius: 100%;top: -20rpx;right: -20rpx;
}
.width155{
width: 155rpx;
height: 150rpx;
}
.item-box{border: 1px solid #FFFFFF;}
</style>

View File

@ -0,0 +1,73 @@
<template>
<view class="pad-x50">
<view class="disac pad-zy20 pad-sx30">
<view class="cricle-box"></view>
<view class="fon36 mar-z20">处理反馈</view>
</view>
<view class="pad-zy20 fon30" style="background-color: #f5f5f5;">
<view class="col9 pad-sx30">2021年7月19日 2130</view>
<view class="disjb bbot pad-x30">
<view class="">调查情况</view>
<view class="col9 tright" style="max-width: 50%;">情况属实马上安排人员 处理请耐心等待</view>
</view>
<view class="disjb bbot pad-sx30">
<view class="">处理结果</view>
<view class="col9 tright" style="max-width: 50%;">情况属实马上安排人员 处理请耐心等待</view>
</view>
</view>
<view class="disac pad-zy20 pad-sx30">
<view class="cricle-box"></view>
<view class="fon36 mar-z20">历史反馈</view>
</view>
<view class="pad-zy20 fon30" style="background-color: #f5f5f5;">
<view class="col9 pad-sx30">2021年7月19日 2130</view>
<view class="disjb pad-x30">
<view class="">反馈意见不满意</view>
<view class="col9 tright" style="max-width: 50%;">等了好久了还没有上门 处理</view>
</view>
</view>
<view class="disac pad-zy20 pad-sx30">
<view class="cricle-box"></view>
<view class="fon36 mar-z20">反馈提交</view>
</view>
<view class="disjcac pad-zy20">
<view @tap="chooseType" class="disjbac radius30 width100 pad-sx20 pad-zy30" style="border: 2rpx solid #d9d9d9;">
<view class="col9 fon30">{{typeText}}</view>
<i class="icon icon-next colb fon24" style="transform: rotate(90deg);"></i>
</view>
</view>
<view class="disjcac pad-zy20 mar-s30">
<view class="disjbac radius30 width100 pad-sx20 pad-zy30" style="border: 2rpx solid #d9d9d9;box-sizing: border-box;">
<textarea class="col9 fon30" style="height: 272rpx;" placeholder="请输入反馈信息"></textarea>
</view>
</view>
<view class="disjcac mar-s70">
<view class="disjcac enter-btn" style="margin: 0;" @tap="submitEv"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
typeList:['满意','不满意'],
typeText:'满意'
}
},
methods: {
//
chooseType(){
uni.showActionSheet({
itemList:this.typeList,
success: (res) => {
this.typeText = this.typeList[res.tapIndex];
}
})
}
}
}
</script>
<style>
</style>

102
pagesA/login/login.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<view class="disjcac fc">
<image src="/static/icon/icon-login.png" style="width: 220rpx;height: 220rpx;margin: 320rpx 0 70rpx 0;" mode=""></image>
<view class="fon36 bold">洛河民意通</view>
<view class="disjcac enter-btn posir">
授权登录
<button :disabled="ifFlag" @click="bindGetUserInfo" class="posia syxzo">立即授权</button>
</view>
<view class="fon30" style="color: #484848;">如您点击授权您将同意授权免责声明</view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo:'',
ifFlag:false
}
},
methods: {
//
bindGetUserInfo() {
if(!this.ifFlag){
this.$toolAll.tools.showToast('正在调起授权','none',6000);
this.ifFlag = true;
wx.getSetting({
success: (result)=> {
uni.hideToast();
//
if (result.authSetting['scope.userInfo']) {
//
this.getUserInfoEv();
} else {
//
this.getUserInfoEv();
}
}
})
}
},
//
getUserInfoEv(){
// #ifdef MP-WEIXIN
//
wx.getUserProfile({
lang:'zh_CN',
desc:'获取亲的昵称、头像及性别',
success: (resEnd)=> {
this.userInfo = resEnd.userInfo;
console.log(resEnd,7777);
//
uni.login({
provider: 'weixin',
success: (rescode)=> {
uni.reLaunch({
url:'/pagesA/passageway/passageway'
})
// this.updateUserInfo(rescode.code);
},
});
},
complete: () => {
this.ifFlag = false;
}
});
// #endif
},
//
updateUserInfo(code) {
var params = {
code:code,
nickname: this.userInfo.nickName,//
headimgurl: this.userInfo.avatarUrl,//
country: this.userInfo.country,//
province: this.userInfo.province,//
city: this.userInfo.city,//
gender: this.userInfo.gender,//
language:this.userInfo.language,//
is_active:1
}
this.$requst.post('user/login',params).then(res => {
if(res.data.token!=''){
if(uni.getStorageSync('urlparams')) {
uni.reLaunch({ //
url:uni.getStorageSync('urlparams')
})
} else {
uni.reLaunch({
url:'/pagesA/passageway/passageway'
})
}
}
},error => {})
}
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,70 @@
<template>
<view>
<statusContainer titlet="民意审核" :ifReturn="false">
<view slot="content">
<view class="bacf disja pad-sx20 fon30" :style="{top:newtop+42+'px'}" style="margin: -20rpx -20rpx 0 -20rpx;position: sticky;z-index: 10;">
<view @tap="switchEv(0)" class="pad-sx20 disjcac radius20" :style="switchIndex==0?'background-color:#39d091;color:#FFFFFF;':''" style="width: 288rpx;">已处理</view>
<view @tap="switchEv(1)" class="pad-sx20 disjcac radius20" :style="switchIndex==1?'background-color:#39d091;color:#FFFFFF;':''" style="width: 288rpx;">未处理</view>
</view>
<view class="mar-s20 radius20 fon24 bacf posir" v-for="(item,index) in 50" :key="index">
<view class="pad-sx20 pad-zy50 status-box" :style="{backgroundColor:['#39d091','#f8bf00','#f41500'][switchIndex]}">{{['已处理','待处理','已督办'][switchIndex]}}</view>
<view class="pad20 bbot line-h46 pad-x40">
<view class="fon30">LH20220729130234</view>
<view class="">用户名匿名提交</view>
<view class="">金牛社区A村</view>
<view class="">反馈问题我就是想问下我们村的路多久能修好</view>
</view>
<view class="dis fon30" v-if="switchIndex==0">
<view @tap="goDetail(0)" class="width50 pad-sx30 disjcac border-r">
<image class="mar-y20" src="/static/icon/icon-check.png" mode="" style="width: 34rpx;height: 34rpx;"></image>查看处理详情
</view>
<view class="width50 pad-sx30 disjcac">
<image class="mar-y20" src="/static/icon/icon-revie.png" mode="" style="width: 34rpx;height: 34rpx;"></image>
督办复审
</view>
</view>
<view class="dis fon30 disjcac" v-if="switchIndex==1">
<view @tap="goDetail(0)" class="pad-sx30 disac">
<image class="mar-y20" src="/static/icon/icon-check.png" mode="" style="width: 34rpx;height: 34rpx;"></image>
查看处理详情
</view>
</view>
</view>
</view>
</statusContainer>
</view>
</template>
<script>
import statusContainer from '@/components/containers/status-container.vue';
export default {
components:{
statusContainer
},
data() {
return {
switchIndex:0,
newtop:uni.getSystemInfoSync().statusBarHeight
}
},
methods: {
//
switchEv(index){
this.switchIndex = index;
},
//
goDetail(id){
uni.navigateTo({
url:`/pagesA/detail/detail?id=${id}&manager=1`
})
},
}
}
</script>
<style>
page{
background-color: #f5f5f5;
}
.status-box{position: absolute;right: 0;top: 0;background-color: #39d091;border-radius: 0 0 0 30rpx;}
</style>

View File

@ -0,0 +1,84 @@
<template>
<view>
<statusContainer titlet="我的民意提交" :ifReturn="false">
<view slot="content">
<view class="bacf disja pad-sx20 fon30" :style="{top:newtop+42+'px'}" style="margin: -20rpx -20rpx 0 -20rpx;position: sticky;z-index: 10;">
<view @tap="switchEv(0)" class="pad-sx20 disjcac radius20" :style="switchIndex==0?'background-color:#39d091;color:#FFFFFF;':''" style="width: 288rpx;">已发起</view>
<view @tap="switchEv(1)" class="pad-sx20 disjcac radius20" :style="switchIndex==1?'background-color:#39d091;color:#FFFFFF;':''" style="width: 288rpx;">已办理</view>
</view>
<view class="mar-s20 radius20 fon24 bacf posir" v-for="(item,index) in 50" :key="index">
<view class="pad-sx20 pad-zy50 status-box">{{['待处理','已办理'][switchIndex]}}</view>
<view class="pad20 bbot line-h46 pad-x40">
<view class="fon30">LH20220729130234</view>
<view class="">用户名匿名提交</view>
<view class="">金牛社区A村</view>
<view class="">反馈问题我就是想问下我们村的路多久能修好</view>
</view>
<view class="dis fon30">
<view @tap="goDetail(0)" class="width50 pad-sx30 disjcac border-r">
<image class="mar-y20" src="/static/icon/icon-check.png" mode="" style="width: 34rpx;height: 34rpx;"></image>查看
</view>
<view v-if="switchIndex==0" class="width50 pad-sx30 disjcac">
<image class="mar-y20" src="/static/icon/icon-revoke.png" mode="" style="width: 34rpx;height: 34rpx;"></image>
撤诉
</view>
<view @tap="goFeedback(0)" v-if="switchIndex==1" class="width50 pad-sx30 disjcac">
<image class="mar-y20" src="/static/icon/icon-feedback.png" mode="" style="width: 34rpx;height: 34rpx;"></image>
反馈
</view>
</view>
</view>
<view class="posixzy disjcac bacf pad-sx20" style="box-shadow: 0rpx -4rpx 30rpx rgba(0, 0, 0, .2);">
<view class="disjcac enter-btn" style="margin: 0;" @tap="goOpinionSubmit"></view>
</view>
</view>
</statusContainer>
</view>
</template>
<script>
import statusContainer from '@/components/containers/status-container.vue';
export default {
components:{
statusContainer
},
data() {
return {
switchIndex:0,
newtop:uni.getSystemInfoSync().statusBarHeight
}
},
methods: {
//
switchEv(index){
console.log(index);
this.switchIndex = index;
},
//
goOpinionSubmit(){
uni.navigateTo({
url:'/pagesA/opinion-submit/opinion-submit'
})
},
//
goDetail(id){
uni.navigateTo({
url:`/pagesA/detail/detail?id=${id}&manager=2`
})
},
//
goFeedback(id){
uni.navigateTo({
url:`/pagesA/feedback/feedback?id=${id}`
})
}
}
}
</script>
<style>
page{
background-color: #f5f5f5;
}
.status-box{position: absolute;right: 0;top: 0;background-color: #39d091;border-radius: 0 0 0 30rpx;}
</style>

View File

@ -0,0 +1,181 @@
<template>
<view>
<view class="pad-zy20">
<view class="" v-if="ifAnonymous">
<view class="disjbac bbot pad-sx20">
<view class="fon30 colb bold flexs">真实姓名</view>
<input class="fon30 col9 tright width100" type="text" maxlength="16" placeholder="请输入姓名">
</view>
<view class="disjbac bbot pad-sx20">
<view class="fon30 colb bold flexs">联系方式</view>
<input class="fon30 col9 tright width100" type="text" maxlength="11" placeholder="请填写手机号码">
</view>
</view>
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs">社区</view>
<view class="disac col9 width100 fe">
<view class="mar-y10">请选择社区</view>
<i class="icon icon-next fon24" style="margin-top: 6rpx;"></i>
</view>
</view>
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs"></view>
<view class="disac col9 width100 fe">
<view class="mar-y10">请选择村</view>
<i class="icon icon-next fon24" style="margin-top: 6rpx;"></i>
</view>
</view>
<view class="dis fon30 bbot pad-sx30">
<view class="colb bold flexs">图片上传</view>
<view class="disac col9 width100 fe fw">
<view v-for="(item,index) in imgArr" :key="index" class="col9 radius30 disjcac fc posir mar-y20 item-box width155">
<image :src="item" mode="aspectFill" class="width155 radius30"></image>
<view @tap="imgArr.splice(index,1)" class="posia disjcac del-btn">
<i class="icon icon-del-white fon24 colf" style="transform: scale(.8);"></i>
</view>
</view>
<view v-if="imgArr.length!=3" @tap="chooseImg" class="col9 radius30 disjcac fc width155" style="border: 1px solid #d9d9d9;">
<i class="icon icon-add04 fon72" style="color: #d9d9d9;"></i>
<view class="fon24">图片添加</view>
</view>
</view>
</view>
<view class="dis fon30 bbot pad-sx30">
<view class="colb bold flexs">视频上传</view>
<view class="disac col9 width100 fe">
<view v-for="(item,index) in vedioArr" :key="index" class="col9 radius30 disjcac fc posir mar-y20 item-box width155">
<image :src="item" mode="aspectFill" class="width155 radius30"></image>
<view @tap="vedioArr.splice(index,1)" class="posia disjcac del-btn">
<i class="icon icon-del-white fon24 colf" style="transform: scale(.8);"></i>
</view>
</view>
<view v-if="vedioArr.length!=3" @tap="chooseVedio" class="col9 radius30 disjcac fc width155" style="border: 1px solid #d9d9d9;">
<i class="icon icon-add04 fon72" style="color: #d9d9d9;"></i>
<view class="fon24">视频添加</view>
</view>
</view>
</view>
<view class="disjbac bbot pad-sx20">
<view class="fon30 colb bold flexs">描述文案</view>
<input class="fon30 col9 tright width100" type="text" placeholder="请输入描述文案">
</view>
<view class="dis fon30 bbot pad-sx30">
<view class="colb bold flexs">语音上传</view>
<view class="disac col9 width100 fe">
<view v-if="audioText" @tap="playVoice" class="col9 radius30 disjcac fc posir mar-y20 item-box width155" style="border: 1px solid #d9d9d9;">
<image src="/static/icon/icon-audio.png" mode="aspectFill" style="width: 74rpx;height: 85rpx;"></image>
<view @tap.stop="clearAudio" class="posia disjcac del-btn">
<i class="icon icon-del-white fon24 colf" style="transform: scale(.8);"></i>
</view>
</view>
<view @tap="audioEv" @longpress="startRecord" @touchend="endRecord" class="col9 radius30 disjcac fc width155" style="border: 1px solid #d9d9d9;">
<i class="icon icon-add04 fon72" style="color: #d9d9d9;"></i>
<view class="fon24">添加语音</view>
</view>
</view>
</view>
<view class="disjbac fon30 bbot pad-sx30">
<view class="colb bold flexs">类别</view>
<view class="disac col9 width100 fe">
<view class="mar-y10">请选择类别</view>
<i class="icon icon-next fon24" style="margin-top: 6rpx;"></i>
</view>
</view>
</view>
<view class="disjcac pad-sx50">
<view class="disjcac enter-btn" style="margin: 0;" @tap="submitEv"></view>
</view>
</view>
</template>
<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
data() {
return {
ifAnonymous:false,//
imgArr:[],
vedioArr:[],
audioText:''
}
},
onLoad(op) {
this.ifAnonymous = op.flag;
},
methods: {
//
submitEv(){
uni.reLaunch({
url:'/pagesA/my-opinion-list/my-opinion-list'
})
},
//
chooseImg(){
uni.chooseImage({
count:1,
success: (tempFile) => {
this.imgArr = [...this.imgArr,...tempFile.tempFilePaths]
}
})
},
//
chooseVedio(){
uni.chooseVideo({
sourceType:['album','camera'],
success: (tempFile) => {
this.vedioArr.push(tempFile.tempFilePath);
}
})
},
audioEv(){
uni.showToast({
title:'长按进行录音',
icon:'none'
})
},
//
startRecord() {
this.audioText = '';
uni.showToast({
title:'录音中...',
icon:'none',
duration:1000*120
})
recorderManager.start();
},
//
endRecord() {
recorderManager.stop();
recorderManager.onStop((res)=> {
this.audioText = res.tempFilePath;
});
uni.hideToast();
},
//
playVoice() {
if (this.audioText) {
innerAudioContext.src = this.audioText;
innerAudioContext.play();
}
},
//
clearAudio(){
this.audioText = '';
recorderManager.stop();
}
}
}
</script>
<style>
.del-btn{
background-color: #39d091;width: 45rpx;height: 45rpx;border-radius: 100%;top: -20rpx;right: -20rpx;
}
.width155{
width: 155rpx;
height: 150rpx;
}
.item-box{border: 1px solid #FFFFFF;}
</style>

View File

@ -0,0 +1,58 @@
<template>
<view class="disjcac fc">
<view @tap="passagewayModeEv(1)" class="way-item-box disjcac fc">
<view class="posir">
<image class="way-head" src="/static/icon/icon-head.png" mode=""></image>
<view class="posir disjcac icon-box">
<image class="posia" src="../../static/icon/icon-green.png" mode=""></image>
<image class="posia" src="../../static/icon/icon-sussess.png" style="width: 34rpx;height: 22rpx;z-index: 1;" mode=""></image>
</view>
</view>
<view class="colf fon42 mar-s30">实名通道</view>
</view>
<view @tap="passagewayModeEv(0)" class="way-item-box disjcac fc" style="margin: 0;">
<view class="posir">
<image class="way-head" src="/static/icon/icon-head.png" mode=""></image>
<view class="posir disjcac icon-box">
<image class="posia" src="../../static/icon/icon-gray.png" mode=""></image>
<image class="posia" src="../../static/icon/icon-close.png" style="width: 26rpx;height: 26rpx;z-index: 1;" mode=""></image>
</view>
</view>
<view class="colf fon42 mar-s30">匿名通道</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
//
passagewayModeEv(index){
uni.navigateTo({
url:`/pagesA/opinion-submit/opinion-submit?flag=${index==1}`
})
}
}
}
</script>
<style lang="scss">
.way-item-box{
width: 484rpx;
height: 280rpx;
border-radius: 30rpx;
margin: 290rpx 0 176rpx 0;
background: linear-gradient(to top right,#c0c0c0 0%, #9c9c9c 100%);
}
.way-head{width: 144rpx;height: 144rpx;vertical-align: middle;}
.icon-box{width: 67rpx;height: 67rpx;top: 10rpx; right: -100rpx;margin-top: -67rpx;}
.icon-box image:first-child{width: 67rpx;height: 67rpx;z-index: 0;}
.way-item-box:first-child{
background: linear-gradient(to top right,#38e3ad 0%, #55d3c3 100%);
}
</style>

77
project.config.json Normal file
View File

@ -0,0 +1,77 @@
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"enhance": true,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": false,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"lazyloadPlaceholderEnable": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"useIsolateContext": false,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"disableUseStrict": false,
"minifyWXML": true,
"showES6CompileOption": false,
"useCompilerPlugins": false,
"ignoreUploadUnusedFiles": true
},
"compileType": "miniprogram",
"libVersion": "2.22.0",
"appid": "wx987dc41899f719e8",
"projectname": "%E4%BD%A9%E4%B8%BD%E5%95%86%E5%9F%8E",
"debugOptions": {
"hidedInDevtools": []
},
"scripts": {},
"staticServerOptions": {
"baseURL": "",
"servePath": ""
},
"isGameTourist": false,
"condition": {
"search": {
"list": []
},
"conversation": {
"list": []
},
"game": {
"list": []
},
"plugin": {
"list": []
},
"gamePlugin": {
"list": []
},
"miniprogram": {
"list": []
}
}
}

19
readme.md Normal file
View File

@ -0,0 +1,19 @@
<!-- 暂无更多组件参数的使用
组件一
<nothing-page
:imgSrc="图片路径可相对、可绝对、可网络"
:currentType="0,1,2,..."
:content="'-- NO MORE --'"></nothing-page>
组件二
<pitera
:textColor="'#999999'"
:textStr="'-- NO MORE --'"
:textFontSize="'24rpx'"
:ifBold="false"
:ifCenter="true"
:paddingStr="'20rpx'"></pitera>
-->

BIN
static/icon/icon-audio.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
static/icon/icon-check.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/icon/icon-close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 932 B

BIN
static/icon/icon-gray.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/icon/icon-green.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
static/icon/icon-handle.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1022 B

BIN
static/icon/icon-head.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
static/icon/icon-login.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/icon/icon-revie.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/icon/icon-revoke.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 281 B

BIN
static/icon/welcome-img.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

1
store/actions.js Normal file
View File

@ -0,0 +1 @@
// 根级别的 action

16
store/index.js Normal file
View File

@ -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

88
store/modules/moduleA.js Normal file
View File

@ -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)
}
}
}

87
store/modules/moduleB.js Normal file
View File

@ -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)
// }
}
}

1
store/mutations.js Normal file
View File

@ -0,0 +1 @@
// 根级别的 mutation

119
store/readme.md Normal file
View File

@ -0,0 +1,119 @@
#引入vuex状态机
在根目录创建store目录
#在main.js引入store、注册store、挂载store在程序上
import Vue from 'vue';
import App from './App';
#import store from './store'
#Vue.prototype.$store = store
const app = new Vue({
# store,
...App
})
app.$mount()
#在页面内使用store的属性
<view @tap="add"></view>
import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
export default {
data() {
return {}
},
#单纯访问属性值
computed:{
tokenEv() {
return this.$store.state.token;
}
},
<!--
需要引入 import { mapState } from 'vuex'//引入mapState
-->
computed:mapState({
// 从state中拿到数据 箭头函数可使代码更简练
token: state => state.token,
}),
computed:mapState(['token']),
computed: {
...mapState({
token: function (state) {
return '追加的' + state.token
},
userInfo: state => state.userInfo,
})
},
computed:{
...mapState([
'token',
'userInfo',
'count',
'obj'
])
},
computed: {
...mapState({
token: state => state.moduleA.token,
count: state => state.moduleB.count
}),
},
#单纯访问方法
computed: {
todos() {
return this.$store.getters.doneTodos
}
},
computed: {
doneTodosCount() {
return this.$store.getters.doneTodosCount
}
},
<!-- 方法传值 -->
computed: {
getTodoById() {
return this.$store.getters.getTodoById(1)
}
},
<!--
需要引入 import { mapGetters } from 'vuex'//引入mapState
-->
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodos',
'doneTodosCount',
'getTodoById'
// ...
])
},
onLoad(options) {
#改变状态机里面的值
<!-- 传递字符串改变 -->
this.$store.commit('setToken', 'token已改变');
<!-- 传递对象 -->
this.$store.commit('updateUserInfo',{userInfo:'用户信息'})
this.$store.commit({
type: 'updateUserInfo',
userInfo: '新方式更新用户信息'
})
this.$store.commit('newProp',{c:'吃火锅'})
<!-- 输出值 -->
console.log(this.token);
<!-- 调用方法 -->
this.add();
<!-- 必须是同步方法 -->
this.$store.dispatch('addCountAction')
this.$store.dispatch('addCountAction2',{amount:10})
<!-- 异步方法 -->
this.$store.dispatch('addCountAction3',{amount:30})
setTimeout(()=>{
console.log(this.count,388);
},3000)
},
methods: {
<!--
需要引入 import { mapMutations } from 'vuex'//引入mapState
-->
...mapMutations(['add']),//对象展开运算符直接拿到add
}
}

76
uni.scss Normal file
View File

@ -0,0 +1,76 @@
/**
* uni-app
*
* uni-app https://ext.dcloud.net.cn使
* 使scss使 import 便App
*
*/
/**
* App使
*
* 使scss scss 使 import
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//
$uni-text-color-inverse:#fff;//
$uni-text-color-grey:#999;//
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:24upx;
$uni-font-size-base:28upx;
$uni-font-size-lg:32upx;
/* 图片尺寸 */
$uni-img-size-sm:40upx;
$uni-img-size-base:52upx;
$uni-img-size-lg:80upx;
/* Border Radius */
$uni-border-radius-sm: 4upx;
$uni-border-radius-base: 6upx;
$uni-border-radius-lg: 12upx;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20upx;
$uni-spacing-row-lg: 30upx;
/* 垂直间距 */
$uni-spacing-col-sm: 8upx;
$uni-spacing-col-base: 16upx;
$uni-spacing-col-lg: 24upx;
/* 透明度 */
$uni-opacity-disabled: 0.3; //
/* 文章场景相关 */
$uni-color-title: #2C405A; //
$uni-font-size-title:40upx;
$uni-color-subtitle: #555555; //
$uni-font-size-subtitle:36upx;
$uni-color-paragraph: #3F536E; //
$uni-font-size-paragraph:30upx;