首次完整推送，
V：1.20240808.006
This commit is contained in:
fm453
43
pages/common/textview/index.vue
Normal file
43
pages/common/textview/index.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-card class="view-title" :title="title">
|
||||
<text class="uni-body view-content">{{ content }}</text>
|
||||
</uni-card>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.title = options.title
|
||||
this.content = options.content
|
||||
uni.setNavigationBarTitle({
|
||||
title: options.title
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.view-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.view-content {
|
||||
font-size: 26rpx;
|
||||
padding: 12px 5px 0;
|
||||
color: #333;
|
||||
line-height: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
104
pages/common/webview/index.vue
Normal file
104
pages/common/webview/index.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<uni-nav-bar class="status_bar" dark :fixed="true" shadow status-bar left-icon="left" left-text="" title=""
|
||||
right-icon="refresh" @clickLeft="goBack" @clickRight="goRefresh" />
|
||||
<!-- #endif -->
|
||||
<view v-if="params.url">
|
||||
<web-view :webview-styles="webviewStyles" :src="`${params.url}`"></web-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/index.js';
|
||||
import utils from "@/utils/common.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
params: {},
|
||||
oldUrl: '', //储存传参的url
|
||||
webviewStyles: {
|
||||
progress: {
|
||||
color: "#FF3333"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
//接收父组件的数据
|
||||
src: {
|
||||
type: [String],
|
||||
default: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goRefresh() {
|
||||
//TBD
|
||||
}
|
||||
},
|
||||
onLoad(event) {
|
||||
// store.commit('user/login'); //调用登陆user的函数
|
||||
this.params = event
|
||||
if (!event.url) {
|
||||
uni.showToast({
|
||||
title: "未提供网址链接",
|
||||
complete: () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
let url = event.url;
|
||||
this.oldUrl = url;
|
||||
var user = store.state.userCloud;
|
||||
if (url.substring(0, 4) === 'http') {
|
||||
//打开网址
|
||||
if (event.title) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: event.title
|
||||
})
|
||||
}
|
||||
if (user.hasLogin) {
|
||||
var openid = user.openid;
|
||||
utils.debug(openid)
|
||||
this.params.url = url + '?&open_id=' + openid;
|
||||
}
|
||||
} else if (url.substring(0, 7) === '/pages/') {
|
||||
//打开指定页面
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: "错误",
|
||||
content: '不是一个有效的网站链接,' + '"' + url + '"',
|
||||
showCancel: false,
|
||||
confirmText: "知道了",
|
||||
complete: () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
});
|
||||
uni.setNavigationBarTitle({
|
||||
title: "页面路径错误"
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
// #ifdef APP-PLUS
|
||||
let currentWebview = this.$mp.page.$getAppWebview().children()[0]; //获取当前页面的webview对象
|
||||
utils.debug(currentWebview);
|
||||
// #endif
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import url('../../ctms/statusBar.css');
|
||||
|
||||
/*针对 webview进行的设置*/
|
||||
uni-app {
|
||||
margin-top: 88rpx;
|
||||
}
|
||||
</style>
|
||||
270
pages/ctms/about/about.vue
Normal file
270
pages/ctms/about/about.vue
Normal file
@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<view class="about">
|
||||
<view class="content">
|
||||
<view class="qrcode">
|
||||
<image src="@/static/logo.png" @longtap="save"></image>
|
||||
<text class="tip">{{userinfo.username}}</text>
|
||||
</view>
|
||||
<view class="desc">
|
||||
欢迎登陆使用本系统（APP），如果您在使用过程中遇到问题，欢迎您及时向我们反馈，我们将第一时间响应，并及时根据情况进行优化或升级。
|
||||
</view>
|
||||
<view class="source">
|
||||
<view class="title">软件系统：</view>
|
||||
<view class="source-list">
|
||||
<view class="source-cell">
|
||||
<text space="nbsp">1. </text>
|
||||
<text>
|
||||
<text class="code">应用版本</text> ： {{config.version}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="source-cell">
|
||||
<text space="nbsp">2. </text>
|
||||
<text>
|
||||
<text class="code">运营主体</text> ：{{config.poweredBy}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="source-cell">
|
||||
<text space="nbsp">3. </text>
|
||||
<text>
|
||||
<text class="code">技术支持</text> ：{{config.supportedBy}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="source-cell">
|
||||
<text space="nbsp">4. </text>
|
||||
<text>
|
||||
感谢 {{thanks}} 等公司/平台提供的云服务器、开发文档等支持。
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="source">
|
||||
<view class="title">隐私安全：</view>
|
||||
<view class="source-list">
|
||||
<view class="source-cell">
|
||||
<text space="nbsp">1. </text>
|
||||
<text>
|
||||
<text class="code">用户服务协议</text> ：
|
||||
<text @click="xieyi('fuwu')">
|
||||
>>>点击查看
|
||||
</text>
|
||||
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="source-cell">
|
||||
<text space="nbsp">2. </text>
|
||||
<text>
|
||||
<text class="code">隐私条款协议</text> ：
|
||||
<text @click="xieyi('yinsi')">
|
||||
>>>点击查看
|
||||
</text>
|
||||
|
||||
</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="source">
|
||||
<view class="title">数据空间：</view>
|
||||
<view class="source-list">
|
||||
<view class="source-cell">
|
||||
<text space="nbsp">1. </text>
|
||||
<text>
|
||||
<text class="code">缓存大小</text> ： {{cacheSize}}
|
||||
<button type="default" @click="clearCache">清除缓存</button>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<button type="primary" @click="share">分享</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="version">
|
||||
当前版本：{{version}}
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/ctms.config.js";
|
||||
import utils from "@/utils/common.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
version: config.version,
|
||||
thanks: '',
|
||||
cacheSize: '计算中',
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.userinfo = ctms.user.getInfo();
|
||||
var configApp = getApp().globalData.config;
|
||||
//使用扩展运算符合并对象
|
||||
var _cfg = {
|
||||
...configApp,
|
||||
...config
|
||||
};
|
||||
this.config = _cfg;
|
||||
this.thanks = _cfg.thanksFor.join(' , ');
|
||||
},
|
||||
onShow() {
|
||||
var size = ctms.cache.size();
|
||||
var m = size.m,
|
||||
kb = size.kb;
|
||||
this.cacheSize = '';
|
||||
if (m > 0) this.cacheSize += m + ' M ';
|
||||
this.cacheSize += kb + ' KB ';
|
||||
},
|
||||
|
||||
methods: {
|
||||
clearCache() {
|
||||
var res = ctms.cache.clear();
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '已清除,请刷新页面',
|
||||
icon: "success"
|
||||
})
|
||||
}
|
||||
},
|
||||
// #ifdef APP-PLUS
|
||||
save() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['保存图片到相册'],
|
||||
success: () => {
|
||||
plus.gallery.save(
|
||||
'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/app_download.png',
|
||||
function() {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
function() {
|
||||
uni.showToast({
|
||||
title: '保存失败，请重试！',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
share(e) {
|
||||
plus.share.sendWithSystem();
|
||||
uni.shareWithSystem({
|
||||
summary: "安邮车联运车平台，一个专门服务于汽车托运的系统，致力于推动轿运市场标准化、现代化发展。",
|
||||
href: "http://ctms.hiluker.cn",
|
||||
success() {
|
||||
// 分享完成，请注意此时不一定是成功分享
|
||||
},
|
||||
fail() {
|
||||
// 分享失败
|
||||
}
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
|
||||
goTo(page) {
|
||||
page = config.pageDir + page;
|
||||
uni.navigateTo({
|
||||
url: page
|
||||
});
|
||||
},
|
||||
|
||||
xieyi(op) {
|
||||
var url;
|
||||
switch (op) {
|
||||
case 'fuwu':
|
||||
url = this.config.about.agreements.serviceUrl;
|
||||
break;
|
||||
case 'yinsi':
|
||||
url = this.config.about.agreements.privacyUrl;
|
||||
break;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/webview/index?url=' + url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page,
|
||||
view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
page {
|
||||
min-height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.about {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 30rpx;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.qrcode .tip {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 30rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.code {
|
||||
color: #e96900;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.version {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
justify-content: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.source {
|
||||
margin-top: 30rpx;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.source-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #007AFF;
|
||||
}
|
||||
</style>
|
||||
148
pages/ctms/index/index.vue
Normal file
148
pages/ctms/index/index.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 轮播图 -->
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="500">
|
||||
<swiper-item v-for="(item, index) in banner" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)" :data-link="item.link">
|
||||
<image class="swiper-image" :src="item.image" mode="aspectFill" :draggable="true" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<image class="logo" src="@/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">安邮车联</text>
|
||||
</view>
|
||||
<view class="text-area">
|
||||
<text class="title">运车助手</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
import utils from "@/utils/common.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
swiperDotIndex: 0,
|
||||
banner: [{
|
||||
image: '/static/img/banner/banner.jpg',
|
||||
link: ""
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickBannerItem(item) {
|
||||
if (item.link) {
|
||||
var link = item.link;
|
||||
uni.navigateTo({
|
||||
url: "/pages/common/webview/index?url=" + link
|
||||
})
|
||||
}
|
||||
},
|
||||
changeSwiper(e) {
|
||||
this.current = e.detail.current
|
||||
},
|
||||
getBanner() {
|
||||
ctms.ads.banner().then((res) => {
|
||||
var _data = res;
|
||||
if (_data) {
|
||||
this.banner = _data;
|
||||
}
|
||||
});
|
||||
},
|
||||
checkSplash() {
|
||||
var ls = "splashShowed";
|
||||
var a = uni.getStorageSync(ls);
|
||||
if (!a) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad: function() {
|
||||
this.checkSplash();
|
||||
},
|
||||
onShow: function() {
|
||||
this.getBanner();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.uni-margin-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uni-padding-wrap {
|
||||
width: 550rpx;
|
||||
padding: 0 100rpx;
|
||||
}
|
||||
|
||||
/*轮播幻灯*/
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-list {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
/*滑动区*/
|
||||
.swiper-box {
|
||||
height: 370rpx;
|
||||
background: #fff;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
</style>
|
||||
95
pages/ctms/login/login.css
Normal file
95
pages/ctms/login/login.css
Normal file
@ -0,0 +1,95 @@
|
||||
body {
|
||||
/* background-color: #e6e6e60e; */
|
||||
}
|
||||
|
||||
radio,
|
||||
checkbox,
|
||||
switch {
|
||||
transform: scale(1.5);
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
margin-top: 66rpx;
|
||||
border-bottom: 1upx #333 dashed;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header>image {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.uni-form {
|
||||
width: 94%;
|
||||
margin: 0rpx 3% 0 3%;
|
||||
}
|
||||
|
||||
.uni-form-item {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
}
|
||||
|
||||
.uni-form-item .title,
|
||||
.uni-form-item .data {}
|
||||
|
||||
/**不生效**/
|
||||
.uni-form-item .title {
|
||||
width: 180rpx;
|
||||
padding: 40rpx 20rpx;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.uni-form .uni-btn-v {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 40rpx 30rpx;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #09BB07;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-error {
|
||||
background-color: #fc0107;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: block;
|
||||
/* width: 100%; */
|
||||
font-size: 1rem;
|
||||
height: 1rem;
|
||||
line-height: 1.5rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #666666;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
281
pages/ctms/login/login.vue
Normal file
281
pages/ctms/login/login.vue
Normal file
@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="header">
|
||||
<image src="@/static/logo.png" mode="aspectFit"></image>
|
||||
<text v-if="userinfo.mobile" class="tip">您当前已登陆账号：{{userinfo.username}}</text>
|
||||
</view>
|
||||
<uni-notice-bar text="在这里,您可以通过邮箱或手机号进行登陆。" />
|
||||
<view class="uni-common-mt uni-form">
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">账号</view>
|
||||
<input class="uni-input" name="username" v-model="FormData.username" placeholder="您的手机号或用户名" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">密码</view>
|
||||
<input class="uni-input" name="passwd" v-model="FormData.passwd" type="password" placeholder="" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">持久登陆</view>
|
||||
<view>
|
||||
<switch name="isLong" :checked="isLong==1?true:false" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item">
|
||||
<view class="help-block">
|
||||
启用后，只有您主动点击退出按钮后，你的登陆状态才会被取消。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-button-group">
|
||||
<uni-row class="demo-uni-row" width="100%">
|
||||
<uni-col :span="12">
|
||||
<button class="btn btn-success" form-type="submit">登陆</button>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<button class="btn btn-default" type="default" form-type="reset">重置</button>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
|
||||
<view class="uni-button-group">
|
||||
<button class="btn btn-info" type="default" @click="goToSms">使用验证码登陆</button>
|
||||
<button class="btn btn-info" type="warn" @click="logout">注销</button>
|
||||
<button :hidden="true" class="btn btn-success" type="primary" @click="authApp">一键授权</button>
|
||||
<button class="btn btn-primary" type="primary" @click="goToReg">注册</button>
|
||||
<button class="btn btn-info" type="default" @click="callMe">技术支持</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
|
||||
<uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
|
||||
:vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
|
||||
|
||||
<view class="footer" v-if="FormData.username">
|
||||
您好，您刚填写的用户名是：{{FormData.username}}。如果您在登陆过程中遇到任何问题，请联系技术部门或您的直属管理人员解决。
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import graceChecker from "@/common/graceChecker.js";
|
||||
import config from "@/config/ctms.config.js";
|
||||
import utils from "@/utils/common.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
import hi from '@/common/util.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
FormData: {
|
||||
username: '',
|
||||
passwd: ''
|
||||
},
|
||||
isLong: 1,
|
||||
uniIdRedirectUrl: '',
|
||||
|
||||
//悬浮按钮
|
||||
fabs: {
|
||||
horizontal: 'left',
|
||||
vertical: 'bottom',
|
||||
direction: 'horizontal', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#fff',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fff',
|
||||
iconColor: '#aaa'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/fab/home.png',
|
||||
selectedIconPath: '/static/fab/homeactive.png',
|
||||
text: '首页',
|
||||
active: false,
|
||||
diyfn: 'home'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/guanzhu.png',
|
||||
selectedIconPath: '/static/fab/guanzhuactive.png',
|
||||
text: '关注',
|
||||
active: false,
|
||||
diyfn: 'news'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/me.png',
|
||||
selectedIconPath: '/static/fab/meactive.png',
|
||||
text: '用户',
|
||||
active: false,
|
||||
diyfn: 'user'
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/news.png',
|
||||
selectedIconPath: '/static/fab/newsactive.png',
|
||||
text: '公告',
|
||||
active: false,
|
||||
diyfn: 'notice'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async authApp() {
|
||||
//TODO 主包内单独设计一个授权页面，子项目则调用并确认，后端接收用户数据并自动注册绑定到子项目。
|
||||
var res = await ctms.user.oneKeyAuth();
|
||||
if (res) {
|
||||
this.userinfo = res;
|
||||
utils.toast('授权完成！');
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
formSubmit: function(e) {
|
||||
var _that = this;
|
||||
//定义表单规则
|
||||
var rule = [{
|
||||
name: "username",
|
||||
checkType: "notnull",
|
||||
checkRule: "",
|
||||
errorMsg: "用户名不能为空"
|
||||
},
|
||||
{
|
||||
name: "passwd",
|
||||
checkType: "string",
|
||||
checkRule: "8,32",
|
||||
errorMsg: "密码不对"
|
||||
}
|
||||
];
|
||||
//进行表单检查
|
||||
var formData = e.detail.value;
|
||||
var checkRes = graceChecker.check(formData, rule);
|
||||
if (!checkRes) {
|
||||
uni.showToast({
|
||||
title: graceChecker.error,
|
||||
icon: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
//请求封装
|
||||
ctms.user.login(formData).then((res) => {
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "登陆成功!",
|
||||
icon: "success"
|
||||
});
|
||||
if (this.uniIdRedirectUrl) {
|
||||
uni.redirectTo({
|
||||
url: this.uniIdRedirectUrl
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
formReset: function(e) {
|
||||
// utils.debug('清空登陆表单数据')
|
||||
},
|
||||
async logout() {
|
||||
var res = await ctms.user.logout();
|
||||
if (res) {
|
||||
uni.reLaunch({
|
||||
url: '../tabbar/index/index'
|
||||
})
|
||||
}
|
||||
this.userinfo = {};
|
||||
},
|
||||
goToReg() {
|
||||
uni.navigateTo({
|
||||
url: './reg'
|
||||
})
|
||||
},
|
||||
goToSms() {
|
||||
uni.navigateTo({
|
||||
url: './loginSms?uniIdRedirectUrl=' + encodeURIComponent(this.uniIdRedirectUrl)
|
||||
})
|
||||
},
|
||||
callMe: function(e) {
|
||||
var phone = config.kfPhone;
|
||||
// hi.tel(phone);
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
},
|
||||
|
||||
//浮窗按钮相关操作
|
||||
fabClick(e) {
|
||||
// utils.debug('点击了悬浮按钮')
|
||||
},
|
||||
fabTrigger(e) {
|
||||
var eindex = e.index;
|
||||
this.fabs.content[e.index].active = !e.item.active;
|
||||
|
||||
if (!e.item.diyfn) {
|
||||
//未设置这个difyfn字段的，无操作
|
||||
return false;
|
||||
}
|
||||
var diyfn = e.item.diyfn,
|
||||
dir = config.pageDir,
|
||||
page;
|
||||
switch (diyfn) {
|
||||
case 'home':
|
||||
page = 'tabbar/index/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
case 'news':
|
||||
page = 'news/list/list';
|
||||
break;
|
||||
case 'user':
|
||||
page = 'me/index';
|
||||
break;
|
||||
case 'notice':
|
||||
page = 'tabbar/notice/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
}
|
||||
return uni.navigateTo({
|
||||
url: dir + page
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
|
||||
},
|
||||
onLoad: function(o) {
|
||||
var user = ctms.user.checkLogin();
|
||||
this.userinfo = user;
|
||||
// 自动跳转到登录页面时会携带uniIdRedirectUrl参数
|
||||
if (o.uniIdRedirectUrl) {
|
||||
this.uniIdRedirectUrl = decodeURIComponent(o.uniIdRedirectUrl)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("login.css");
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tip {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 30rpx;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
391
pages/ctms/login/loginSms.vue
Normal file
391
pages/ctms/login/loginSms.vue
Normal file
@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-notice-bar text="手机号及验证码是必填的;为了防止机器恶意注册,获取手机短信前前您需要先进行人机验证。" />
|
||||
<view class="uni-common-mt uni-form">
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item ">
|
||||
<view class="title"><code>*</code>手机号</view>
|
||||
<input class="uni-input" name="mobile" v-model="FormData.mobile" placeholder="您的手机号" type="text"
|
||||
@blur="checkMobile" @input="checkMobile" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<uni-row class="demo-uni-row" width="100%">
|
||||
<uni-col :span="6">
|
||||
<view class="demo-uni-col dark">
|
||||
<view @tap="captchaGet" class="captcha">{{captcha}}
|
||||
</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="18">
|
||||
<view class="demo-uni-col">
|
||||
<input class="uni-col-input" @input="captchaInput" placeholder="人机验证,输入左侧数字" type="text"
|
||||
autocomplete="off" />
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
|
||||
<uni-section title="短信验证码" type="circle" :subTitle="mobileErr">
|
||||
<view class="example-body">
|
||||
<uni-row v-show="FormData.mobile" class="demo-uni-row" width="100%">
|
||||
<uni-col :span="14">
|
||||
<view class="demo-uni-col">
|
||||
<view class="uni-form-item ">
|
||||
<input class="uni-col-input" placeholder="请输入验证码" v-model="FormData.vcode"
|
||||
name="vcode" type="text" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="10">
|
||||
<view :class='"demo-uni-col vcode-button "+ (captchaPassed?"primary":"dark")'>
|
||||
<view @tap="getVcode" v-show="!vcode_again">获取验证码
|
||||
</view>
|
||||
<view v-show="vcode_again">重新获取 {{leftSecond}}</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">持久登陆</view>
|
||||
<view>
|
||||
<switch name="isLong" :checked="isLong==1?true:false" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item">
|
||||
<view class="help-block">
|
||||
启用后，只有您主动点击退出按钮后，你的登陆状态才会被取消。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-button-group">
|
||||
<uni-row class="demo-uni-row" width="100%">
|
||||
<uni-col :span="12">
|
||||
<button class="btn btn-success" form-type="submit">确认</button>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<button class="btn btn-default" type="default" form-type="reset">取消</button>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
|
||||
<uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
|
||||
:vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import graceChecker from "@/common/graceChecker.js";
|
||||
import config from "@/config/ctms.config.js";
|
||||
import utils from "@/utils/common.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
import hi from "@/common/util.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
FormData: {
|
||||
mobile: '',
|
||||
vcode: ''
|
||||
},
|
||||
isLong: 1,
|
||||
vcode_again: false,
|
||||
vcode_time: 90,
|
||||
leftSecond: 90,
|
||||
captcha: '8888',
|
||||
captchaPassed: false,
|
||||
mobileErr: '填写手机号后获取验证码并输入',
|
||||
timer: null,
|
||||
|
||||
//悬浮按钮
|
||||
fabs: {
|
||||
horizontal: 'left',
|
||||
vertical: 'bottom',
|
||||
direction: 'horizontal', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#fff',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fff',
|
||||
iconColor: '#aaa'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/fab/home.png',
|
||||
selectedIconPath: '/static/fab/homeactive.png',
|
||||
text: '首页',
|
||||
active: false,
|
||||
diyfn: 'home'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/guanzhu.png',
|
||||
selectedIconPath: '/static/fab/guanzhuactive.png',
|
||||
text: '关注',
|
||||
active: false,
|
||||
diyfn: 'news'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/me.png',
|
||||
selectedIconPath: '/static/fab/meactive.png',
|
||||
text: '用户',
|
||||
active: false,
|
||||
diyfn: 'user'
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/news.png',
|
||||
selectedIconPath: '/static/fab/newsactive.png',
|
||||
text: '公告',
|
||||
active: false,
|
||||
diyfn: 'notice'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formSubmit: function(e) {
|
||||
var _that = this;
|
||||
//定义表单规则
|
||||
var rule = [{
|
||||
name: "mobile",
|
||||
checkType: "phoneno",
|
||||
checkRule: "",
|
||||
errorMsg: "手机号必填"
|
||||
},
|
||||
{
|
||||
name: "vcode",
|
||||
checkType: "notnull",
|
||||
checkRule: "",
|
||||
errorMsg: "验证码必填"
|
||||
}
|
||||
];
|
||||
//进行表单检查
|
||||
var formData = e.detail.value;
|
||||
var checkRes = graceChecker.check(formData, rule);
|
||||
if (!checkRes) {
|
||||
uni.showToast({
|
||||
title: graceChecker.error,
|
||||
icon: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
//请求封装
|
||||
ctms.user.smsLogin(formData).then((res) => {
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "登陆成功!",
|
||||
icon: "success"
|
||||
});
|
||||
if (_that.uniIdRedirectUrl) {
|
||||
uni.reLaunch({
|
||||
url: _that.uniIdRedirectUrl
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
formReset: function(e) {
|
||||
// utils.debug('清空登陆表单数据')
|
||||
},
|
||||
captchaGet: function() {
|
||||
var code = hi.captcha.get('login');
|
||||
this.captcha = code;
|
||||
},
|
||||
captchaInput: function(e) {
|
||||
if (e.detail.value === this.captcha) this.captchaPassed = true;
|
||||
},
|
||||
checkMobile: function() {
|
||||
var res = hi.isPhone(this.FormData.mobile);
|
||||
if (!res) {
|
||||
this.mobileErr = '请输入正确的手机号码';
|
||||
} else {
|
||||
this.FormData.mobile = res;
|
||||
this.mobileErr = '您的手机号码是：' + res;
|
||||
}
|
||||
},
|
||||
getVcode: function() {
|
||||
if (!this.captchaPassed) {
|
||||
uni.showToast({
|
||||
title: "请先通过人机验证",
|
||||
icon: "none"
|
||||
})
|
||||
return false;
|
||||
}
|
||||
let timer = setInterval(() => {
|
||||
if (this.leftSecond == 0) {
|
||||
clearInterval(this.timer)
|
||||
this.leftSecond = this.vcode_time;
|
||||
this.vcode_again = false;
|
||||
} else {
|
||||
this.leftSecond--;
|
||||
}
|
||||
}, 1000);
|
||||
this.timer = timer;
|
||||
this.vcode_again = true;
|
||||
this.requestVcode();
|
||||
},
|
||||
requestVcode: function() {
|
||||
ctms.vcode.get('login', this.FormData.mobile).then(function(res) {
|
||||
if (res) {
|
||||
switch (res.errorcode) {
|
||||
case 0:
|
||||
utils.toast('短信已发送');
|
||||
break;
|
||||
default:
|
||||
var msg = res.msg || '短信发送失败';
|
||||
utils.toast(msg);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
callMe: function(e) {
|
||||
var phone = config.kfPhone;
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
},
|
||||
//浮窗按钮相关操作
|
||||
fabClick(e) {
|
||||
// utils.debug('点击了悬浮按钮')
|
||||
},
|
||||
fabTrigger(e) {
|
||||
var eindex = e.index;
|
||||
this.fabs.content[e.index].active = !e.item.active;
|
||||
|
||||
if (!e.item.diyfn) {
|
||||
//未设置这个difyfn字段的，无操作
|
||||
return false;
|
||||
}
|
||||
var diyfn = e.item.diyfn,
|
||||
dir = config.pageDir,
|
||||
page;
|
||||
switch (diyfn) {
|
||||
case 'home':
|
||||
page = 'tabbar/index/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
case 'news':
|
||||
page = 'news/list/list';
|
||||
break;
|
||||
case 'user':
|
||||
page = 'me/index';
|
||||
break;
|
||||
case 'notice':
|
||||
page = 'tabbar/notice/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
}
|
||||
return uni.navigateTo({
|
||||
url: dir + page
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
var code = hi.captcha.get('login');
|
||||
this.captcha = code;
|
||||
},
|
||||
onLoad: function(o) {
|
||||
// 自动跳转到登录页面时会携带uniIdRedirectUrl参数
|
||||
if (o.uniIdRedirectUrl) {
|
||||
this.uniIdRedirectUrl = decodeURIComponent(o.uniIdRedirectUrl)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("login.css");
|
||||
|
||||
/* 以下是组合输入框 */
|
||||
.demo-uni-row {
|
||||
margin-bottom: 10px;
|
||||
|
||||
/* 组件在小程序端display为inline */
|
||||
/* QQ、抖音小程序文档写有 :host，但实测不生效 */
|
||||
/* 百度小程序没有 :host */
|
||||
/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* 支付宝小程序没有 demo-uni-row 层级 */
|
||||
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
|
||||
/* #ifdef MP-ALIPAY || MP-WEIXIN */
|
||||
::v-deep .uni-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.demo-uni-col {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.uni-col-input {
|
||||
margin: 1rem 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dark_deep {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background-color: #0095F6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.light {
|
||||
background-color: #e5e9f2;
|
||||
}
|
||||
|
||||
.uni-section {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
padding: 5rpx 10rpx 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vcode-button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 验证码区域 */
|
||||
.captcha {
|
||||
color: #fd8208;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.captcha:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
347
pages/ctms/login/reg.vue
Normal file
347
pages/ctms/login/reg.vue
Normal file
@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-notice-bar text="您正在注册新用户,手机号及验证码是必填的;为了防止机器恶意注册,或者手机短信前前您需要先进行人机验证。" />
|
||||
<view class="uni-common-mt uni-form">
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">昵称</view>
|
||||
<input class="uni-input" name="username" v-model="FormData.username" placeholder="您的姓名或昵称"
|
||||
type="text" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">邮箱</view>
|
||||
<input class="uni-input" name="email" v-model="FormData.email" placeholder="邮箱号,可用于登陆"
|
||||
type="text" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title"><code>*</code>手机号</view>
|
||||
<input class="uni-input" name="mobile" v-model="FormData.mobile" placeholder="您的手机号" type="text"
|
||||
@blur="checkMobile" @input="checkMobile" />
|
||||
</view>
|
||||
|
||||
<uni-section title="短信验证码" type="circle" :subTitle="mobileErr" v-show="FormData.mobile">
|
||||
<view class="example-body">
|
||||
<uni-row v-show="!captchaPassed" class="demo-uni-row" width="100%">
|
||||
<uni-col :span="6">
|
||||
<view class="demo-uni-col dark">
|
||||
<view @tap="captchaGet" class="captcha">{{captcha}}
|
||||
</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="demo-uni-col ">
|
||||
<view class="help-block">人机验证,输入左侧数字</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="6">
|
||||
<view class="demo-uni-col light">
|
||||
<view class="uni-form-item ">
|
||||
<input class="uni-col-input" @input="captchaInput" placeholder=" " type="text"
|
||||
autocomplete="off" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
|
||||
<uni-row v-show="captchaPassed" class="demo-uni-row" width="100%">
|
||||
<uni-col :span="14">
|
||||
<view class="demo-uni-col light">
|
||||
<view class="uni-form-item ">
|
||||
<input class="uni-col-input" placeholder="请输入验证码" v-model="FormData.vcode"
|
||||
type="text" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="10">
|
||||
<view class="demo-uni-col dark">
|
||||
<view @tap="getVcode" v-show="!vcode_again">获取验证码
|
||||
</view>
|
||||
<view v-show="vcode_again">重新获取 {{leftSecond}}</view>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">密码</view>
|
||||
<input class="uni-input" name="passwd" type="password" v-model="FormData.passwd" placeholder="" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">记住我</view>
|
||||
<radio-group name="isKeep" class="radio">
|
||||
<label>
|
||||
<radio value="1" :checked="isKeep==1?true:false" /><text>是</text>
|
||||
</label>
|
||||
<label>
|
||||
<radio value="-1" :checked="isKeep==-1?true:false" /><text>否</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">持久登陆</view>
|
||||
<view>
|
||||
<switch name="isLong" :checked="isLong==1?true:false" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item">
|
||||
<view class="help-block">
|
||||
启用后，只有您主动点击退出按钮后，你的登陆状态才会被取消。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-button-group">
|
||||
<uni-row class="demo-uni-row" width="100%">
|
||||
<uni-col :span="12">
|
||||
<button class="btn btn-success" form-type="submit">确认</button>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<button class="btn btn-default" type="default" form-type="reset">取消</button>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import graceChecker from "@/common/graceChecker.js";
|
||||
import config from "@/config/ctms.config.js";
|
||||
import utils from "@/utils/common.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
import hi from "@/common/util.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
logoImage: '@/static/logo.png',
|
||||
FormData: {
|
||||
username: '',
|
||||
passwd: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
vcode: ''
|
||||
},
|
||||
ls: 'fansRegFormData',
|
||||
isKeep: -1,
|
||||
isLong: 1,
|
||||
vcode_again: false,
|
||||
vcode_time: 90,
|
||||
leftSecond: 90,
|
||||
captcha: '8888',
|
||||
captchaPassed: true,
|
||||
mobileErr: '填写手机号后获取验证码并输入',
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formSubmit: function(e) {
|
||||
var _that = this;
|
||||
//定义表单规则
|
||||
var rule = [{
|
||||
name: "passwd",
|
||||
checkType: "string",
|
||||
checkRule: "8,32",
|
||||
errorMsg: "密码要求8~32位"
|
||||
},
|
||||
{
|
||||
name: "mobile",
|
||||
checkType: "phoneno",
|
||||
checkRule: "",
|
||||
errorMsg: "手机号必填"
|
||||
},
|
||||
{
|
||||
name: "vcode",
|
||||
checkType: "notnull",
|
||||
checkRule: "",
|
||||
errorMsg: "验证码必填"
|
||||
},
|
||||
{
|
||||
name: "isKeep",
|
||||
checkType: "in",
|
||||
checkRule: "1,-1",
|
||||
errorMsg: "是否记住密码"
|
||||
},
|
||||
];
|
||||
//进行表单检查
|
||||
var formData = e.detail.value;
|
||||
var checkRes = graceChecker.check(formData, rule);
|
||||
if (!checkRes) {
|
||||
uni.showToast({
|
||||
title: graceChecker.error,
|
||||
icon: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//验证通过，缓存表单、请求登陆
|
||||
if (formData.isKeep == 1) {
|
||||
var lsIndex = _that.ls;
|
||||
var data = {
|
||||
username: formData.username,
|
||||
mobile: formData.mobile,
|
||||
email: formData.email,
|
||||
passwd: formData.passwd,
|
||||
};
|
||||
uni.setStorageSync(lsIndex, data);
|
||||
} else {
|
||||
uni.removeStorageSync(lsIndex);
|
||||
}
|
||||
|
||||
//请求封装
|
||||
ctms.user.reg(formData).then((res) => {
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "注册成功!",
|
||||
icon: "success"
|
||||
});
|
||||
uni.navigateBack()
|
||||
}
|
||||
});
|
||||
},
|
||||
formReset: function(e) {
|
||||
// utils.debug('清空登陆表单数据')
|
||||
},
|
||||
captchaGet: function() {
|
||||
var code = hi.captcha.get('reg');
|
||||
this.captcha = code;
|
||||
},
|
||||
captchaInput: function(e) {
|
||||
if (e.detail.value === this.captcha) this.captchaPassed = true;
|
||||
},
|
||||
// captchaCheck: function() {
|
||||
// var res = hi.captcha.check('reg', this.captcha);
|
||||
// },
|
||||
checkMobile: function() {
|
||||
var res = hi.isPhone(this.FormData.mobile);
|
||||
if (!res) {
|
||||
this.mobileErr = '请输入正确的手机号码';
|
||||
} else {
|
||||
this.FormData.mobile = res;
|
||||
this.mobileErr = '您的手机号码是：' + res;
|
||||
}
|
||||
},
|
||||
getVcode: function() {
|
||||
let timer = setInterval(() => {
|
||||
if (this.leftSecond == 0) {
|
||||
clearInterval(this.timer)
|
||||
this.leftSecond = this.vcode_time;
|
||||
this.vcode_again = false;
|
||||
} else {
|
||||
this.leftSecond--;
|
||||
}
|
||||
}, 1000);
|
||||
this.timer = timer;
|
||||
this.vcode_again = true;
|
||||
this.requestVcode();
|
||||
},
|
||||
requestVcode: function() {
|
||||
ctms.vcode.get('reg', this.FormData.mobile).then(function(res) {
|
||||
if (res) {
|
||||
switch (res.errorcode) {
|
||||
case 0:
|
||||
utils.toast('短信已发送');
|
||||
break;
|
||||
default:
|
||||
var msg = res.msg || '短信发送失败';
|
||||
utils.toast(msg);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
callMe: function(e) {
|
||||
var phone = config.kfPhone;
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
var code = hi.captcha.get('reg');
|
||||
this.captcha = code;
|
||||
},
|
||||
onLoad: function() {
|
||||
// ctms.user.checkLogin();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("login.css");
|
||||
|
||||
/* 以下是组合输入框 */
|
||||
.demo-uni-row {
|
||||
margin-bottom: 10px;
|
||||
|
||||
/* 组件在小程序端display为inline */
|
||||
/* QQ、抖音小程序文档写有 :host，但实测不生效 */
|
||||
/* 百度小程序没有 :host */
|
||||
/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* 支付宝小程序没有 demo-uni-row 层级 */
|
||||
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
|
||||
/* #ifdef MP-ALIPAY || MP-WEIXIN */
|
||||
::v-deep .uni-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.demo-uni-col {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.uni-col-input {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.dark_deep {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
|
||||
.light {
|
||||
background-color: #e5e9f2;
|
||||
}
|
||||
|
||||
.uni-section {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
padding: 5rpx 10rpx 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 验证码区域 */
|
||||
.captcha {
|
||||
color: #fd8208;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.captcha:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
261
pages/ctms/me/index.vue
Normal file
261
pages/ctms/me/index.vue
Normal file
@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="about">
|
||||
<view class="content">
|
||||
<view class="qrcode">
|
||||
<image src="@/static/logo.png"></image>
|
||||
<text class="tip">{{userinfo.username}}</text>
|
||||
</view>
|
||||
<view class="desc">
|
||||
{{config.about.slogan}}
|
||||
</view>
|
||||
|
||||
<view class="uni-card">
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell-divider">
|
||||
|
||||
</view>
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<navigator v-for="item in menus" :url="item.url" class="uni-list-cell"
|
||||
hover-class="uni-list-cell-hover">
|
||||
<view class="uni-list-cell-navigate uni-navigate-right">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</navigator>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view v-for="item in menus" class="uni-list-cell" hover-class="uni-list-cell-hover"
|
||||
@click="go(item.url)">
|
||||
<view class="uni-list-cell-navigate uni-navigate-right">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<button type="primary" @click="reload">加载数据资源</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<button type="primary" @click="share">分享</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="version">
|
||||
当前版本：{{version}}
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from "@/utils/common.js";
|
||||
import config from "@/config/ctms.config.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
menus: {
|
||||
orderpre: {
|
||||
title: '我的询价',
|
||||
url: '../orderpre/list/list'
|
||||
},
|
||||
order: {
|
||||
title: '运单记录',
|
||||
url: '../order/list/list'
|
||||
},
|
||||
news: {
|
||||
title: '资讯报道',
|
||||
url: '../news/list/list'
|
||||
},
|
||||
about: {
|
||||
title: '关于App',
|
||||
url: '../about/about'
|
||||
},
|
||||
login: {
|
||||
title: '切换登陆',
|
||||
url: '../login/login'
|
||||
}
|
||||
},
|
||||
version: '',
|
||||
config: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
var configApp = getApp().globalData.config;
|
||||
//使用扩展运算符合并对象
|
||||
var _cfg = {
|
||||
...configApp,
|
||||
...config
|
||||
};
|
||||
this.config = _cfg;
|
||||
this.version = _cfg.version;
|
||||
},
|
||||
onShow() {
|
||||
this.userinfo = ctms.user.getInfo();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// #ifdef APP-PLUS
|
||||
save() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['保存图片到相册'],
|
||||
success: () => {
|
||||
plus.gallery.save(
|
||||
'https://public.hiluker.com/luker_fm2.png',
|
||||
function() {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
function() {
|
||||
uni.showToast({
|
||||
title: '保存失败，请重试！',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
share(e) {
|
||||
var msg = "运车助手"
|
||||
plus.share.sendWithSystem();
|
||||
uni.shareWithSystem({
|
||||
summary: "安邮车联运车平台，一个专门服务于汽车托运的系统，致力于推动轿运市场标准化、现代化发展。",
|
||||
href: "http://ctms.hiluker.cn",
|
||||
success() {
|
||||
// 分享完成，请注意此时不一定是成功分享
|
||||
},
|
||||
fail() {
|
||||
// 分享失败
|
||||
}
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
|
||||
go(e) {
|
||||
uni.navigateTo({
|
||||
url: e
|
||||
});
|
||||
},
|
||||
reload() {
|
||||
uni.switchTab({
|
||||
url: '../tabbar/me/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page,
|
||||
view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
page {
|
||||
min-height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.about {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 30rpx;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.qrcode .tip {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 30rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.code {
|
||||
color: #e96900;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.version {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
justify-content: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.source {
|
||||
margin-top: 30rpx;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.source-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.uni-list-cell-navigate {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
navigator {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.uni-navigator.uni-list-cell-navigate.uni-navigate-right:after {
|
||||
font-family: uniicons;
|
||||
content: '\e583';
|
||||
position: relative;
|
||||
right: 0.75rem;
|
||||
top: 50%;
|
||||
color: #bbb;
|
||||
transform: translateY(-50%);
|
||||
width: 15rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.uni-list .uni-list-cell:last-child::after {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.uni-list-cell::after {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0.9375rem;
|
||||
height: 1px;
|
||||
content: '';
|
||||
transform: scaleY(.5);
|
||||
background-color: #c8c7cc;
|
||||
}
|
||||
</style>
|
||||
50
pages/ctms/news/detail/detail.css
Normal file
50
pages/ctms/news/detail/detail.css
Normal file
@ -0,0 +1,50 @@
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-cover {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.cover-image {
|
||||
flex: 1;
|
||||
height: 150px;
|
||||
}
|
||||
.no-border {
|
||||
border-width: 0;
|
||||
}
|
||||
360
pages/ctms/news/detail/detail.vue
Normal file
360
pages/ctms/news/detail/detail.vue
Normal file
@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="banner">
|
||||
<image class="banner-img" :src="detail.thumb"></image>
|
||||
<view class="banner-title">{{detail.title}}</view>
|
||||
</view>
|
||||
<view class="article-meta">
|
||||
<text class="article-author">
|
||||
<uni-icons type="contact"></uni-icons>{{detail.author_name}}
|
||||
</text>
|
||||
<text class="article-text">更新于</text>
|
||||
<text class="article-time">{{detail.updateTime}}</text>
|
||||
</view>
|
||||
<view v-if="detail.des" class="des">
|
||||
<text>内容摘要：</text>
|
||||
{{detail.des}}
|
||||
</view>
|
||||
<view class="article-content">
|
||||
<rich-text :nodes="htmlNodes" @itemclick="nodeClick"></rich-text>
|
||||
</view>
|
||||
<view class="article-meta">
|
||||
<text class="article-footer">
|
||||
<uni-icons type="eye">浏览</uni-icons>
|
||||
{{detail.viewed}}
|
||||
</text>
|
||||
|
||||
<text :class="'article-footer '+ activeReading" @click="actionReading">
|
||||
<uni-icons type="hand-up" :style="styleReading">赞</uni-icons>
|
||||
{{detail.reading}}
|
||||
</text>
|
||||
<text :class="'article-footer '+ activeLike" @click="actionLike">
|
||||
<uni-icons type="heart" :style="styleLike">喜欢</uni-icons>
|
||||
{{detail.liked}}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
|
||||
:vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/ctms.config.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
import htmlParser from '@/common/html-parser.js'
|
||||
const DETAIL_PAGE_PATH = config.pageDir + 'news/detail/detail';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
id: 0,
|
||||
detail: {
|
||||
id: 1,
|
||||
viewed: 0,
|
||||
liked: 0,
|
||||
reading: 0
|
||||
},
|
||||
htmlNodes: [],
|
||||
imgs: [], //可用于预览的图片
|
||||
activeStyle: 'color:#fd8208;',
|
||||
activeReading: '', //active
|
||||
styleReading: '',
|
||||
activeLike: '', //active
|
||||
styleLike: '',
|
||||
h5_url: '',
|
||||
|
||||
//悬浮按钮
|
||||
fabs: {
|
||||
horizontal: 'left',
|
||||
vertical: 'bottom',
|
||||
direction: 'horizontal', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#fff',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fff',
|
||||
iconColor: '#aaa'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/fab/home.png',
|
||||
selectedIconPath: '/static/fab/homeactive.png',
|
||||
text: '首页',
|
||||
active: false,
|
||||
diyfn: 'home'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/guanzhu.png',
|
||||
selectedIconPath: '/static/fab/guanzhuactive.png',
|
||||
text: '关注',
|
||||
active: false,
|
||||
diyfn: 'news'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/me.png',
|
||||
selectedIconPath: '/static/fab/meactive.png',
|
||||
text: '用户',
|
||||
active: false,
|
||||
diyfn: 'user'
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/news.png',
|
||||
selectedIconPath: '/static/fab/newsactive.png',
|
||||
text: '公告',
|
||||
active: false,
|
||||
diyfn: 'notice'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getNewsDetail: function() {
|
||||
var _that = this;
|
||||
ctms.news.checkDetail(this.id).then((res) => {
|
||||
if (res) {
|
||||
_that.detail = res.data;
|
||||
_that.htmlNodes = htmlParser(_that.detail.content);
|
||||
uni.showToast({
|
||||
title: "查询完成!",
|
||||
icon: "success"
|
||||
});
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
});
|
||||
},
|
||||
checkRecords: function() {
|
||||
// 检查文章在读等本地记录
|
||||
if (ctms.news.mark(this.id, 'reading', 'get')) {
|
||||
this.activeReading = "active";
|
||||
this.styleReading = this.activeStyle;
|
||||
}
|
||||
if (ctms.news.mark(this.id, 'liked', 'get')) {
|
||||
this.activeLike = 'active';
|
||||
this.styleLike = this.activeStyle;
|
||||
}
|
||||
},
|
||||
actionReading(e) {
|
||||
var op = this.activeReading ? 'del' : 'set';
|
||||
this.activeReading = !this.activeReading ? 'active' : false;
|
||||
this.styleReading = !this.styleReading ? this.activeStyle : false;
|
||||
ctms.news.mark(this.id, 'reading', op);
|
||||
},
|
||||
actionLike(e) {
|
||||
var op = this.activeLike ? 'del' : 'set';
|
||||
this.activeLike = !this.activeLike ? 'active' : '';
|
||||
this.styleLike = !this.styleLike ? this.activeStyle : '';
|
||||
ctms.news.mark(this.id, 'liked', op);
|
||||
},
|
||||
nodeClick(e) {
|
||||
var _that = this;
|
||||
// console.log(e.detail);
|
||||
var url = e.detail.node.attrs.src;
|
||||
_that.imgs.push(url)
|
||||
uni.previewImage({
|
||||
urls: _that.imgs,
|
||||
indicator: "default",
|
||||
current: url,
|
||||
longPressActions: {
|
||||
itemList: ['保存图片'],
|
||||
success: function(data) {
|
||||
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
||||
uni.showToast({
|
||||
title: '平台禁止保存图片到本地！',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
// console.log(err.errMsg);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
callTo(tel) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: tel
|
||||
})
|
||||
},
|
||||
|
||||
//浮窗按钮相关操作
|
||||
fabClick(e) {
|
||||
// utils.debug('点击了悬浮按钮')
|
||||
},
|
||||
fabTrigger(e) {
|
||||
var eindex = e.index;
|
||||
this.fabs.content[e.index].active = !e.item.active;
|
||||
|
||||
if (!e.item.diyfn) {
|
||||
//未设置这个difyfn字段的，无操作
|
||||
return false;
|
||||
}
|
||||
var diyfn = e.item.diyfn,
|
||||
dir = config.pageDir,
|
||||
page;
|
||||
switch (diyfn) {
|
||||
case 'home':
|
||||
page = 'tabbar/index/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
case 'news':
|
||||
page = 'news/list/list';
|
||||
break;
|
||||
case 'user':
|
||||
page = 'me/index';
|
||||
break;
|
||||
case 'notice':
|
||||
page = 'tabbar/notice/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
}
|
||||
return uni.navigateTo({
|
||||
url: dir + page
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
this.id = o.id;
|
||||
var res = ctms.news.detail(this.id);
|
||||
if (res) {
|
||||
this.detail = res;
|
||||
} else {
|
||||
this.getNewsDetail();
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.detail.title
|
||||
})
|
||||
ctms.news.viewed(this.id);
|
||||
},
|
||||
onReady() {
|
||||
var nodes = this.htmlNodes = htmlParser(this.detail.content);
|
||||
// for (var i in nodes) {
|
||||
// var ps = nodes[i].children;
|
||||
// for (var j in ps) {
|
||||
// var p = ps[j];
|
||||
// if (p.name === 'img') {
|
||||
// console.log(p.attrs.src)
|
||||
// p.attrs.mode = 'aspectFit';
|
||||
// };
|
||||
// }
|
||||
// }
|
||||
// console.log(nodes)
|
||||
},
|
||||
onShow: function() {
|
||||
this.checkRecords();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getNewsDetail();
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.detail.title,
|
||||
path: DETAIL_PAGE_PATH + '?id=' + this.id
|
||||
}
|
||||
},
|
||||
//标题栏按钮响应,仅在APP-PLUS下支持
|
||||
onNavigationBarButtonTap(e) {
|
||||
//#ifdef APP-PLUS
|
||||
uni.shareWithSystem({
|
||||
summary: this.detail.des + "登陆APP查看更多信息",
|
||||
href: this.h5_url + "?id=" + this.id,
|
||||
success() {
|
||||
// 分享完成，请注意此时不一定是成功分享
|
||||
},
|
||||
fail() {
|
||||
// 分享失败
|
||||
}
|
||||
})
|
||||
//#endif
|
||||
//#ifdef H5
|
||||
var summary = this.detail.des + "登陆APP查看更多信息";
|
||||
uni.setClipboardData({
|
||||
data: summary
|
||||
})
|
||||
//#endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("detail.css");
|
||||
|
||||
.des {
|
||||
text-align: left;
|
||||
text-indent: 2rem;
|
||||
padding: 2rem 1rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.banner {
|
||||
height: 360rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
max-height: 84rpx;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
bottom: 30rpx;
|
||||
width: 90%;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
line-height: 42rpx;
|
||||
color: white;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
padding: 20rpx 40rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.article-text {
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.article-author,
|
||||
.article-time {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
padding: 0 30rpx;
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.article-footer {
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.article-footer.active,
|
||||
.article-footer.active>span {
|
||||
color: #fd8208;
|
||||
}
|
||||
|
||||
/* 修复详情内图片显示问题 */
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
54
pages/ctms/news/list/list.css
Normal file
54
pages/ctms/news/list/list.css
Normal file
@ -0,0 +1,54 @@
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-cover {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.cover-image {
|
||||
flex: 1;
|
||||
height: 150px;
|
||||
}
|
||||
.no-border {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.pagination{
|
||||
margin:20px 20px;
|
||||
}
|
||||
310
pages/ctms/news/list/list.vue
Normal file
310
pages/ctms/news/list/list.vue
Normal file
@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-search-bar class="uni-mt-10" radius="5" placeholder="点击快速搜索标题" clearButton="auto" cancelButton="none"
|
||||
@clear="clearSearch" @confirm="search" />
|
||||
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<uni-segmented-control :current="current" :values="catsArr" style-type="button" @clickItem="changeCat" />
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<view class="nodata" v-if="!totalCount">
|
||||
没有相关的内容
|
||||
</view>
|
||||
|
||||
<view v-else :id="'newsCar-'+detail.id" v-for="(detail,index) in news" :data-id="detail.id"
|
||||
:data-cid="detail.cid" :key="detail.id" :index="index">
|
||||
|
||||
<uni-card padding="10px 0">
|
||||
<template v-if="detail.thumb" v-slot:cover :isFull="true">
|
||||
<view class="custom-cover">
|
||||
<image class="cover-image" mode="aspectFill" :src="detail.thumb">
|
||||
</image>
|
||||
<view class="cover-content">
|
||||
<text class="uni-subtitle uni-white">{{detail.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else v-slot:title>
|
||||
<uni-list>
|
||||
<uni-list-item :show-switch="false" :title="detail.title" />
|
||||
</uni-list>
|
||||
</template>
|
||||
<view class="uni-body">
|
||||
<view>
|
||||
<text>{{detail.des}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="actions" class="card-actions">
|
||||
|
||||
<view class="card-actions-item" @click="showCheck(detail.id)">
|
||||
<uni-icons type="heart" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">{{detail.liked}}</text>
|
||||
</view>
|
||||
|
||||
<view class="card-actions-item" @click="actionsRemark(detail.id)">
|
||||
<uni-icons type="fire" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">{{detail.reading}}</text>
|
||||
</view>
|
||||
|
||||
<view class="card-actions-item" @click="actionsDetail(detail.id)">
|
||||
<uni-icons type="link" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pagination">
|
||||
<uni-pagination :show-icon="false" :total="totalCount" :pageSize='psize' v-model='page' title="分页栏"
|
||||
@change="newPage" />
|
||||
</view>
|
||||
|
||||
<uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
|
||||
:vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from "@/utils/common.js";
|
||||
import config from "@/config/ctms.config.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
||||
news: {},
|
||||
cats: {},
|
||||
catsArr: ['全部'],
|
||||
catIds: {
|
||||
'0': {
|
||||
id: 0
|
||||
}
|
||||
}, //与catsArr键对应的,单条完整cat的数据集
|
||||
catid: 0, //当前分类ID
|
||||
current: 0, //分段器对应当前分类
|
||||
|
||||
stitle: '',
|
||||
totalCount: 0, //一共多少条数据
|
||||
psize: 10,
|
||||
page: 1,
|
||||
|
||||
//悬浮按钮
|
||||
fabs: {
|
||||
horizontal: 'left',
|
||||
vertical: 'bottom',
|
||||
direction: 'horizontal', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#fff',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fff',
|
||||
iconColor: '#aaa'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/fab/home.png',
|
||||
selectedIconPath: '/static/fab/homeactive.png',
|
||||
text: '首页',
|
||||
active: false,
|
||||
diyfn: 'home'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/guanzhu.png',
|
||||
selectedIconPath: '/static/fab/guanzhuactive.png',
|
||||
text: '关注',
|
||||
active: false,
|
||||
diyfn: 'news'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/me.png',
|
||||
selectedIconPath: '/static/fab/meactive.png',
|
||||
text: '用户',
|
||||
active: false,
|
||||
diyfn: 'user'
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/news.png',
|
||||
selectedIconPath: '/static/fab/newsactive.png',
|
||||
text: '公告',
|
||||
active: false,
|
||||
diyfn: 'notice'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//搜索框响应
|
||||
search(res) {
|
||||
this.stitle = res.value;
|
||||
this.getNews();
|
||||
},
|
||||
clearSearch() {
|
||||
this.stitle = '';
|
||||
this.getNews();
|
||||
},
|
||||
//切换分类
|
||||
changeCat(e) {
|
||||
var i = e.currentIndex;
|
||||
this.catid = this.catIds[i].id;
|
||||
this.getNews();
|
||||
},
|
||||
actionsDetail(e) {
|
||||
uni.navigateTo({
|
||||
url: '../detail/detail?id=' + e
|
||||
})
|
||||
},
|
||||
//分页器动作
|
||||
newPage(e) {
|
||||
var page = e.current;
|
||||
this.page = page;
|
||||
var res = ctms.news.list(this.page);
|
||||
if (res) {
|
||||
this.news = res.news;
|
||||
} else {
|
||||
this.getNews();
|
||||
}
|
||||
},
|
||||
getCats: function() {
|
||||
var _that = this;
|
||||
ctms.news.cats().then(
|
||||
(res) => {
|
||||
_that.cats = res;
|
||||
for (var i in res) {
|
||||
var r = res[i];
|
||||
if (r.is_show) {
|
||||
_that.catsArr.push(r.title);
|
||||
_that.catIds[Number(i) + 1] = r;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
//刷新列表
|
||||
getNews() {
|
||||
var _that = this;
|
||||
var searchData = {
|
||||
title: this.stitle,
|
||||
cid: this.catid
|
||||
};
|
||||
|
||||
ctms.news.search(searchData, this.page, this.psize).then(
|
||||
function(res) {
|
||||
if (res) {
|
||||
_that.news = res.news;
|
||||
_that.totalCount = res.total;
|
||||
} else {
|
||||
_that.news = {}
|
||||
_that.totalCount = 0;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//浮窗按钮相关操作
|
||||
fabClick(e) {
|
||||
// utils.debug('点击了悬浮按钮')
|
||||
},
|
||||
fabTrigger(e) {
|
||||
var eindex = e.index;
|
||||
this.fabs.content[e.index].active = !e.item.active;
|
||||
|
||||
if (!e.item.diyfn) {
|
||||
//未设置这个difyfn字段的，无操作
|
||||
return false;
|
||||
}
|
||||
var diyfn = e.item.diyfn,
|
||||
dir = config.pageDir,
|
||||
page;
|
||||
switch (diyfn) {
|
||||
case 'home':
|
||||
page = 'tabbar/index/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
case 'news':
|
||||
page = 'news/list/list';
|
||||
break;
|
||||
case 'user':
|
||||
page = 'me/index';
|
||||
break;
|
||||
case 'notice':
|
||||
page = 'tabbar/notice/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
}
|
||||
return uni.navigateTo({
|
||||
url: dir + page
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
// utils.debug('运单列表页启动')
|
||||
var res = ctms.news.list(this.page);
|
||||
if (res) {
|
||||
this.news = res.news;
|
||||
this.totalCount = res.total;
|
||||
} else {
|
||||
this.getNews();
|
||||
}
|
||||
this.getCats();
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.page = 1;
|
||||
this.getNews();
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import url("list.css");
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nodata {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.uni-body,
|
||||
.uni-list-item {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.custom-cover {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
467
pages/ctms/order/create/create.vue
Normal file
467
pages/ctms/order/create/create.vue
Normal file
@ -0,0 +1,467 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-notice-bar show-icon scrollable text="平台上新季,全路线大力优惠,欢迎来询！！！。" />
|
||||
|
||||
<view class="order-form">
|
||||
<!-- 自定义表单校验 -->
|
||||
<uni-forms ref="customForm" :rules="formRules" :modelValue="FormData">
|
||||
<uni-section title="您要发运的车辆信息" type="line">
|
||||
<uni-forms-item label="品牌车型" name="car_title">
|
||||
<uni-easyinput type="text" v-model="FormData.car_title" placeholder="填写品牌车型" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="车牌号" name="car_no">
|
||||
<uni-easyinput type="text" v-model="FormData.car_no" placeholder="无车牌时可填写车架号后六位" />
|
||||
</uni-forms-item>
|
||||
<text class="uniui-h6 help-block">无车牌时可填写车架号(至少后六位)</text>
|
||||
<uni-forms-item label="是否临牌" name="isTempCarno">
|
||||
<uni-data-checkbox v-model="FormData.isTempCarno" :multiple="false" :localdata="isTempCarno" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="车辆保价(万元)" required name="car_value">
|
||||
<uni-easyinput type="number" v-model="FormData.car_value" placeholder="单位：万元;默认20" />
|
||||
</uni-forms-item>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="从哪里出发 - 运到哪儿去" type="line">
|
||||
<uni-forms-item label="出发省份" required name="start_province">
|
||||
<uni-data-picker placeholder="请选择省份" popup-title="请选择出发省份" :localdata="provinces"
|
||||
v-model="FormData.start_province">
|
||||
</uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="始发城市" required name="start_city">
|
||||
<uni-easyinput v-model="FormData.start_city" placeholder="请填写出发城市名称" />
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item label="目标省份" required name="aim_province">
|
||||
<uni-data-picker placeholder="请选择省份" popup-title="请选择运达省份" :localdata="provinces"
|
||||
v-model="FormData.aim_province">
|
||||
</uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="目标城市" required name="aim_city">
|
||||
<uni-easyinput v-model="FormData.aim_city" placeholder="请填写目标运达城市名称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="计划日期" name="date">
|
||||
<uni-datetime-picker type="date" return-type="timestamp" v-model="FormData.date" />
|
||||
</uni-forms-item>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="联系信息" type="line">
|
||||
<uni-forms-item label="您的姓名" name="from_name">
|
||||
<uni-easyinput v-model="FormData.from_name" placeholder="请输入姓名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="手机号" required name="from_mobile">
|
||||
<uni-easyinput v-model="FormData.from_mobile" placeholder="请输入联系电话" />
|
||||
</uni-forms-item>
|
||||
</uni-section>
|
||||
|
||||
<uni-forms-item label="备注" name="remark">
|
||||
<uni-easyinput type="textarea" v-model="FormData.remark" placeholder="对运单做一些备注，比如 从哪里提车的；根据实际情况" />
|
||||
</uni-forms-item>
|
||||
|
||||
</uni-forms>
|
||||
|
||||
<view class="button-group">
|
||||
<button type="primary" size="mini" @click="formCheck('customForm')">确认提交</button>
|
||||
<button type="default" size="mini" @click="draft">我再想想</button>
|
||||
</view>
|
||||
|
||||
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
|
||||
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
|
||||
<uni-notice-bar
|
||||
text="温馨提示: 请不要随车放置 贵重小件物品(如 眼镜\无线充电器\数据线\U盘\手表\Zipporr火机等)、精密仪器设备(如 电脑等)、易燃易爆物品，车内不得放置违规违禁物品(如 燃料油\火机\酒精\散装酒等)，否则司机有权拒载、平台有权拒单。" />
|
||||
<uni-notice-bar text="炎热天气，不要随车装运水果，一定会闷坏的。" />
|
||||
<text class="uniui-h6 help-block"></text>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import province from '@/common/province.js';
|
||||
import letter from '@/common/letter.js';
|
||||
import carP from '@/common/car-p.js';
|
||||
import config from "@/config/ctms.config.js";
|
||||
import store from '@/store/index.js';
|
||||
import utils from "@/utils/common.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
FormData: {
|
||||
start_province: '', //默认 460000
|
||||
start_city: '',
|
||||
aim_province: '', //默认 230000
|
||||
aim_city: '',
|
||||
date: Date(+7).now, //计划发运日期
|
||||
car_value: 20, //单位：万。默认含20万运输险
|
||||
car_title: '',
|
||||
carno: '', //车牌/架号
|
||||
isTempCarno: 0,
|
||||
username: '',
|
||||
mobile: '',
|
||||
remark: ''
|
||||
},
|
||||
lsIndex: 'OrderCreateDraft',
|
||||
//悬浮按钮
|
||||
horizontal: 'right',
|
||||
vertical: 'bottom',
|
||||
direction: 'vertical', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#fff',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fd8008',
|
||||
iconColor: '#fff'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/fab/c5.png',
|
||||
selectedIconPath: '/static/fab/c5.png',
|
||||
text: '草稿-5',
|
||||
active: false,
|
||||
diyfn: '-5' //自定义添加的一个字段
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/c4.png',
|
||||
selectedIconPath: '/static/fab/c4.png',
|
||||
text: '草稿-4',
|
||||
active: false,
|
||||
diyfn: '-4' //自定义添加的一个字段
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/c3.png',
|
||||
selectedIconPath: '/static/fab/c3.png',
|
||||
text: '草稿-3',
|
||||
active: false,
|
||||
diyfn: '-3' //自定义添加的一个字段
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/c2.png',
|
||||
selectedIconPath: '/static/fab/c2.png',
|
||||
text: '草稿-2',
|
||||
active: false,
|
||||
diyfn: '-2' //自定义添加的一个字段
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/c1.png',
|
||||
selectedIconPath: '/static/fab/c1.png',
|
||||
text: '草稿-1',
|
||||
active: false,
|
||||
diyfn: '-1' //自定义添加的一个字段
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/draft.png',
|
||||
selectedIconPath: '/static/fab/draft-active.png',
|
||||
text: '保存草稿',
|
||||
active: false,
|
||||
diyfn: false
|
||||
},
|
||||
],
|
||||
|
||||
// 单选性别数据源
|
||||
sexs: [{
|
||||
text: '男',
|
||||
value: 0
|
||||
}, {
|
||||
text: '女',
|
||||
value: 1
|
||||
}, {
|
||||
text: '保密',
|
||||
value: 2
|
||||
}],
|
||||
|
||||
//默认省份数据
|
||||
provinces: [{
|
||||
value: '460000',
|
||||
text: "海南省"
|
||||
},
|
||||
{
|
||||
value: '340000',
|
||||
text: "安徽"
|
||||
}
|
||||
],
|
||||
//车辆省份标识
|
||||
carPs: carP.list,
|
||||
letters: letter.list,
|
||||
//是否临牌
|
||||
isTempCarno: [{
|
||||
text: '否',
|
||||
value: 0
|
||||
}, {
|
||||
text: '是',
|
||||
value: 1
|
||||
}],
|
||||
|
||||
// 自定义表单校验规则
|
||||
formRules: {
|
||||
start_province: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '出发省份不能为空'
|
||||
}]
|
||||
},
|
||||
aim_province: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '运达省份不能为空'
|
||||
}]
|
||||
},
|
||||
start_city: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '出发城市不能为空'
|
||||
}]
|
||||
},
|
||||
aim_city: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '运达城市不能为空'
|
||||
}]
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
// console.log(province.listByTitle['海南省']); //显示海南代码
|
||||
var user = ctms.user.getInfo();
|
||||
this.FormData.phone = user.mobile;
|
||||
},
|
||||
onReady() {
|
||||
// 设置自定义表单校验规则，必须在节点渲染完毕后执行
|
||||
this.$refs.customForm.setRules(this.formRules)
|
||||
},
|
||||
onShow: function() {
|
||||
var lsIndex = this.lsIndex;
|
||||
var res = uni.getStorageSync(lsIndex);
|
||||
if (res) {
|
||||
this.FormData = res;
|
||||
}
|
||||
this.provinces = province.listDatacom;
|
||||
this.userinfo = getApp().globalData;
|
||||
utils.debug(this.userinfo);
|
||||
},
|
||||
onHide() {
|
||||
this.draft(); //界面隐藏时自动保存草稿
|
||||
},
|
||||
methods: {
|
||||
//表单校验
|
||||
formCheck(ref) {
|
||||
this.$refs[ref].validate().then(res => {
|
||||
utils.debug(res);
|
||||
this.formSubmit();
|
||||
}).catch(err => {
|
||||
utils.debug(err);
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: err['0'].errorMessage
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
formSubmit: function(e) {
|
||||
uni.showLoading({
|
||||
title: '网络请求中'
|
||||
})
|
||||
var FormData,
|
||||
_that = this;
|
||||
if (e) {
|
||||
//直接使用表单内建的提交机制
|
||||
// uitls.debug('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
|
||||
FormData = e.detail.value;
|
||||
} else {
|
||||
FormData = this.FormData;
|
||||
}
|
||||
ctms.order.book(FormData).then(
|
||||
function(res) {
|
||||
if (res) {
|
||||
var oid = res.data.id;
|
||||
uni.showModal({
|
||||
title: '提交成功',
|
||||
content: '是否前往查看详情',
|
||||
success: function(res) {
|
||||
//清空本次缓存，避免用户重复提交
|
||||
uni.removeStorageSync(_that.lsIndex);
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '../detail/detail?oid=' + oid
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
//将缓存存入历史草稿模板
|
||||
uni.setStorageSync(_that.lsIndex + '-0',
|
||||
FormData);
|
||||
//重新载入页面
|
||||
uni.redirectTo({
|
||||
url: 'create'
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "操作失败",
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
uni.hideLoading();
|
||||
},
|
||||
//存储与取用草稿
|
||||
/*TD：草稿逻辑
|
||||
当前页面正在录入的内容，视为默认草稿数据，即时更新、主动保存；
|
||||
索引-1~5：追加应用模板草稿或设置当前草稿为对应模板；后期考虑加入固定模板
|
||||
*/
|
||||
draft(e) {
|
||||
//e是索引后缀
|
||||
var lsIndex = this.lsIndex;
|
||||
if (e) {
|
||||
lsIndex = lsIndex + e;
|
||||
}
|
||||
uni.setStorageSync(lsIndex, this.FormData);
|
||||
uni.showToast({
|
||||
title: '草稿已保存'
|
||||
})
|
||||
},
|
||||
useDraft(e) {
|
||||
var _that = this;
|
||||
//e为缓存索引
|
||||
uni.showModal({
|
||||
title: '覆盖提醒',
|
||||
content: '即将应用该草稿中的临时数据',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
var lsIndex = _that.lsIndex + e;
|
||||
_that.FormData = uni.getStorageSync(lsIndex);
|
||||
} else if (res.cancel) {
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//浮窗按钮相关操作
|
||||
fabClick(e) {
|
||||
utils.debug('点击了悬浮按钮')
|
||||
},
|
||||
trigger(e) {
|
||||
//检查是否存在模板，有则提示应用，无则创建保存
|
||||
var eindex = e.index;
|
||||
// this.content[e.index].active = !e.item.active;
|
||||
var hasDraft = false;
|
||||
var lsIndex = this.lsIndex;
|
||||
if (!e.item.diyfn) {
|
||||
//未设置这个difyfn字段的，是“保存草稿”按钮
|
||||
return this.draft();
|
||||
}
|
||||
lsIndex = lsIndex + e.item.diyfn;
|
||||
var res = uni.getStorageSync(lsIndex);
|
||||
// console.log(e.item.diyfn);
|
||||
// console.log('error',lsIndex);
|
||||
// console.log(res);
|
||||
var _that = this;
|
||||
if (!res) {
|
||||
//该按钮对应的缓存不存在，追加模板
|
||||
return uni.showModal({
|
||||
title: '提示',
|
||||
content: `${e.item.text}对应的草稿不存在，创建吗？`,
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
_that.content[e.index].active = true;
|
||||
return _that.draft(e.item.diyfn);
|
||||
} else if (res.cancel) {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: '操作已取消'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
}
|
||||
//缓存存在
|
||||
return this.useDraft(e.item.diyfn);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
/* #ifndef APP-NVUE */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.order-form {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/*级联选择器*/
|
||||
.data-pickerview {
|
||||
height: 400px;
|
||||
border: 1px #e5e5e5 solid;
|
||||
}
|
||||
|
||||
.popper__arrow {
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.popper__arrow {
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
/*自定义样式*/
|
||||
.help-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #666666;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1rem;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.uni-section {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
409
pages/ctms/order/detail/check.vue
Normal file
409
pages/ctms/order/detail/check.vue
Normal file
@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-section title="基础信息" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view>车辆：{{order.car_title}} -- {{order.car_number}}</view>
|
||||
<view>运单号：{{order.sn}}</view>
|
||||
<view>日期：{{order.signdate}}</view>
|
||||
<view>起运地：{{order.from_province}}-{{order.start_city}} =>
|
||||
目的地：{{order.to_province}}-{{order.aim_city}}
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
<uni-section title="链接" subTitle="使用系统浏览器打开" type="line" padding>
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">
|
||||
<uni-link :href="h5_url+'?oid='+oid" :text="h5_url"></uni-link>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
|
||||
<view class="container">
|
||||
<view class="uni-common-mt uni-form">
|
||||
<uni-section title="（*）验车备注" type="line">
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">验车人</view>
|
||||
<view class="data">
|
||||
<input class="uni-input" name="checker" v-model="order_up.checker" placeholder="验车人的名字" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">公里数</view>
|
||||
<view class="data">
|
||||
<input class="uni-input" name="start_km" v-model="order_up.start_km" placeholder="当前仪表盘公里数" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">行驶证</view>
|
||||
<radio-group name="is_driving_lisence" class="radio" @change="radioChangeDriving">
|
||||
<label>
|
||||
<radio value="1" :checked="order_up.is_driving_lisence==1?true:false" /><text>未随车</text>
|
||||
</label>
|
||||
<label>
|
||||
<radio value="0" :checked="order_up.is_driving_lisence==-1?true:false" /><text>不确定</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">随车物品</view>
|
||||
<view class="data">
|
||||
<textarea name="car_extra" auto-height placeholder-style="color:#F76260" placeholder=""
|
||||
v-model="order_up.car_extra" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-section>
|
||||
</view>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="driving_lisence" :auto-upload="false" file-mediatype="image" mode="grid"
|
||||
file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="行驶证照片" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_f" :auto-upload="false" file-mediatype="image" mode="grid"
|
||||
file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="正面车身照片" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_b" :auto-upload="false" file-mediatype="image" mode="grid"
|
||||
file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="尾部车身照" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_l" :auto-upload="false" file-mediatype="image" mode="grid"
|
||||
file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="左侧车身照" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_r" :auto-upload="false" file-mediatype="image" mode="grid"
|
||||
file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="右侧车照" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="fileLists" ref="thumbs" :auto-upload="false" file-mediatype="image"
|
||||
mode="grid" file-extname="png,jpg,gif" :limit="fileLists.length" @select="multiSelect"
|
||||
title="其他验车照片" :image-styles="imageStyles" :delIcon="null" />
|
||||
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/ctms.config.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
import Hi from '@/common/util.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
oid: 0,
|
||||
order: {
|
||||
id: 0,
|
||||
remark: '备注',
|
||||
},
|
||||
|
||||
h5_url: '',
|
||||
//要上传修改的订单数据部分（留空的则服务端不覆盖）
|
||||
order_up: {
|
||||
driving_lisence: '',
|
||||
thumb_f: '',
|
||||
thumb_b: '',
|
||||
thumb_l: '',
|
||||
thumb_r: '',
|
||||
thumbs: [],
|
||||
start_km: 0,
|
||||
is_driving_lisence: 0,
|
||||
car_extra: '',
|
||||
checker: ''
|
||||
},
|
||||
driving_lisence: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '行驶证'
|
||||
},
|
||||
thumb_f: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '车头照'
|
||||
},
|
||||
thumb_b: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '车尾照'
|
||||
},
|
||||
thumb_r: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '右车身'
|
||||
},
|
||||
thumb_l: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '左车身'
|
||||
},
|
||||
//订单详情thumbs转换为可显部分 //该字段未启用
|
||||
thumbs: [{
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: 'thumbs[]'
|
||||
}],
|
||||
thumbs_files: [], //多图待上传
|
||||
//呈现多图列表 //通过组件内加号选择上传的多图列表也加入到这
|
||||
fileLists: [],
|
||||
/*{
|
||||
url: '//public.hiluker.com/fm.jpg',
|
||||
extname: 'jpg',
|
||||
name: 'thumbs[]',
|
||||
_src: '/pics/X/Y/Z/.test.jpg' //BY FM453，自行添加的一个属性，将图片原始目录数据保存，备用
|
||||
}*/
|
||||
//所有已选多图 //该字段未启用
|
||||
tmpfiles: [{}], //{'blob:http://localhost:3000/4c9d3b56-041b-40fb-8c2b-221ae9d56a56'}
|
||||
|
||||
//图片上传组件样式定义
|
||||
imageStyles: {
|
||||
width: 128,
|
||||
height: 128,
|
||||
border: {
|
||||
radius: '2%',
|
||||
color: '#ddd',
|
||||
},
|
||||
},
|
||||
listStyles: {
|
||||
// 是否显示边框
|
||||
border: true,
|
||||
// 是否显示分隔线
|
||||
dividline: true,
|
||||
// 线条样式
|
||||
borderStyle: {
|
||||
width: 1,
|
||||
color: 'blue',
|
||||
style: 'dashed',
|
||||
radius: 2
|
||||
},
|
||||
},
|
||||
|
||||
//悬浮按钮
|
||||
horizontal: 'right',
|
||||
vertical: 'bottom',
|
||||
direction: 'vertical', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#eef',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fd8008',
|
||||
iconColor: '#fff'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/c1.png',
|
||||
selectedIconPath: '/static/c1.png',
|
||||
text: '保存草稿',
|
||||
active: false,
|
||||
diyfn: '1' //自定义添加的一个字段
|
||||
},
|
||||
{
|
||||
iconPath: '/static/submit.png',
|
||||
selectedIconPath: '/static/submit-active.png',
|
||||
text: '确认上传',
|
||||
active: false,
|
||||
diyfn: false
|
||||
}
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getOderDetail: function(e) {
|
||||
var _that = this;
|
||||
ctms.order.checkDetail(this.oid).then((res) => {
|
||||
if (res) {
|
||||
var order = res;
|
||||
_that.oid = order.id;
|
||||
order = Hi._that.formatOrder(order, false);
|
||||
_that.order = order;
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
});
|
||||
},
|
||||
//order,订单详情原始数据; restore,是否重新存储
|
||||
formatOrder: function(order, restore = false) {
|
||||
if (order.driving_lisence) {
|
||||
Hi._that.driving_lisence.url = order.driving_lisence_url;
|
||||
}
|
||||
if (order.thumb_f) {
|
||||
Hi._that.thumb_f.url = order.thumb_f_url;
|
||||
}
|
||||
if (order.thumb_b) {
|
||||
Hi._that.thumb_b.url = order.thumb_b_url;
|
||||
}
|
||||
if (order.thumb_r) {
|
||||
Hi._that.thumb_r.url = order.thumb_r_url;
|
||||
}
|
||||
if (order.thumb_l) {
|
||||
Hi._that.thumb_l.url = order.thumb_l_url;
|
||||
}
|
||||
|
||||
if (order.thumbs) {
|
||||
var f, l;
|
||||
const t = [];
|
||||
for (let fi in order.thumbs_url) {
|
||||
f = order.thumbs_url[fi];
|
||||
l = {
|
||||
url: f.url,
|
||||
extname: 'jpg',
|
||||
name: 'thumbs',
|
||||
_src: f.src
|
||||
};
|
||||
// console.log(l)
|
||||
t.push(l);
|
||||
}
|
||||
Hi._that.fileLists = t;
|
||||
}
|
||||
|
||||
// console.log(Hi._that.fileLists);
|
||||
if (order.checker) {
|
||||
Hi._that.order_up.checker = order.checker;
|
||||
} else {
|
||||
Hi._that.order_up.checker = Hi._that.userinfo.username;
|
||||
}
|
||||
if (order.car_extra) {
|
||||
Hi._that.order_up.car_extra = order.car_extra;
|
||||
}
|
||||
if (order.start_km) {
|
||||
Hi._that.order_up.start_km = order.start_km;
|
||||
}
|
||||
if (order.no_driving_lisence) {
|
||||
Hi._that.order_up.is_driving_lisence = order
|
||||
.no_driving_lisence; //确认行驶证未随车
|
||||
}
|
||||
if (restore) {
|
||||
var lsIndex = Hi._that.orderLsIndex + '-' + Hi._that.oid;
|
||||
uni.setStorageSync(lsIndex, order);
|
||||
}
|
||||
return order;
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(o) {
|
||||
Hi._that = this; //在部分函数内部，无法再直接调用this，所以改用该方法赋值后再调用，效果等同于this
|
||||
this.oid = o.oid;
|
||||
this.h5_url = config.h5_view;
|
||||
this.userinfo = ctms.user.getInfo();
|
||||
},
|
||||
onShow() {
|
||||
var res = ctms.order.detail(this.oid);
|
||||
if (res) {
|
||||
this.order = res;
|
||||
this.formatOrder(res, false);
|
||||
} else {
|
||||
this.getOderDetail();
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getOderDetail();
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.example-body {
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.custom-image-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-form-item .title {
|
||||
width: 150rpx;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn[size='mini'] {
|
||||
margin-right: 10rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #42b983;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #fc8105;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #f00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0095f6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
border: #bbb solid 1rpx;
|
||||
}
|
||||
|
||||
/*调整下上传组件样式*/
|
||||
.icon-add {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.file-image {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
}
|
||||
|
||||
.file-image>image {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #f00;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
50
pages/ctms/order/detail/detail.css
Normal file
50
pages/ctms/order/detail/detail.css
Normal file
@ -0,0 +1,50 @@
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-cover {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.cover-image {
|
||||
flex: 1;
|
||||
height: 150px;
|
||||
}
|
||||
.no-border {
|
||||
border-width: 0;
|
||||
}
|
||||
163
pages/ctms/order/detail/detail.vue
Normal file
163
pages/ctms/order/detail/detail.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-section title="基础信息" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view>车辆：{{order.car_title}} -- {{order.car_number}}</view>
|
||||
<view>运单号：{{order.sn}}</view>
|
||||
<view>日期：{{order.signdate}}</view>
|
||||
<view>起运地：{{order.from_province}}-{{order.start_city}} =>
|
||||
目的地：{{order.to_province}}-{{order.aim_city}}</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="联系信息" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view @click="callTo(order.sender_mobiles)"> <uni-icons type="phone" size="20" color="#0095F6" />
|
||||
发车人：{{order.sender_name}} <em> {{order.sender_mobiles}} </em></view>
|
||||
<view @click="callTo(order.receiver_mobiles)"> <uni-icons type="phone" size="20"
|
||||
color="#0095F6" />接车人：{{order.receiver_name}}<em>{{order.receiver_mobiles}}</em></view>
|
||||
<view>送车地址：{{order.aim_address}}</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="费用信息" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view>总运费：{{order.fee_total}} 元</view>
|
||||
<view>现付：<text class="error">{{order.pay_send}} </text>元</view>
|
||||
<view>到付：<text class="error">{{order.pay_receive}} </text>元</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="链接" subTitle="使用系统浏览器打开" type="line">
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">
|
||||
<uni-link :href="h5_url+'?oid='+oid" :text="h5_url"></uni-link>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="操作提示" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view>订单详情页首次打开时需要联网搜索运单信息；</view>
|
||||
<view>打开过一次的运单信息将会缓存在APP内一段时间，在这期间即使手机没有网络也能查看</view>
|
||||
<view>如果需要查看该运单的最新信息，可通过下拉本页面进行刷新（手机需要联网）</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">
|
||||
<button class="btn btn-warning" @click="actCheck()">查看验车记录</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/ctms.config.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
oid: 0,
|
||||
order: {
|
||||
id: 1,
|
||||
car_id: 1,
|
||||
car_number: '车牌号',
|
||||
car_title: '车型号',
|
||||
start_city: "起运城市",
|
||||
from_province: '起运省份',
|
||||
aim_city: "目的城市",
|
||||
to_province: '目标省份',
|
||||
signdate: '下单日期',
|
||||
car_extra: '随车物品',
|
||||
checker: '验车人',
|
||||
receiver_name: '收车人姓名',
|
||||
receiver_mobiles: '收车人电话',
|
||||
sender_name: '发车人姓名',
|
||||
sender_mobiles: '发车人电话',
|
||||
},
|
||||
h5_url: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getOderDetail: function(e) {
|
||||
var _that = this;
|
||||
ctms.order.checkDetail(this.oid).then((res) => {
|
||||
if (res) {
|
||||
_that.order = res;
|
||||
uni.showToast({
|
||||
title: "查询完成!",
|
||||
icon: "success"
|
||||
});
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
});
|
||||
},
|
||||
actCheck() {
|
||||
uni.navigateTo({
|
||||
url: './check?oid=' + this.oid
|
||||
})
|
||||
},
|
||||
callTo(tel) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: tel
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
this.oid = o.oid;
|
||||
this.h5_url = config.h5_view;
|
||||
this.userinfo = ctms.user.getInfo();
|
||||
},
|
||||
onShow: function() {
|
||||
var res = ctms.order.detail(this.oid);
|
||||
if (res) {
|
||||
this.order = res;
|
||||
} else {
|
||||
this.getOderDetail();
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getOderDetail();
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
//标题栏按钮响应,仅在APP-PLUS下支持
|
||||
onNavigationBarButtonTap(e) {
|
||||
//#ifdef APP-PLUS
|
||||
uni.shareWithSystem({
|
||||
summary: '运单【 ' + this.order.sn + ' 】摘要：' + this.order.signdate + '，由' + this.order
|
||||
.from_province + this.order.start_city + '-->发往-->' + this.order.to_province + this.order
|
||||
.aim_city + "的车辆：" + this.order.car_title + "--" + this.order.car_number + "。点击链接可查阅更多信息",
|
||||
href: this.h5_url + "?oid=" + this.oid,
|
||||
success() {
|
||||
// 分享完成，请注意此时不一定是成功分享
|
||||
},
|
||||
fail() {
|
||||
// 分享失败
|
||||
}
|
||||
})
|
||||
//#endif
|
||||
//#ifdef H5
|
||||
var summary = '运单【 ' + this.order.sn + ' 】摘要：' + this.order.signdate + '，由' + this.order
|
||||
.from_province + this.order.start_city + '-->发往-->' + this.order.to_province + this.order
|
||||
.aim_city + "的车辆：" + this.order.car_title + "--" + this.order.car_number + "。点击链接可查阅更多信息:" + this
|
||||
.h5_url + "?oid=" + this.oid;
|
||||
uni.setClipboardData({
|
||||
data: summary
|
||||
})
|
||||
//#endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("detail.css");
|
||||
</style>
|
||||
207
pages/ctms/order/index/index.vue
Normal file
207
pages/ctms/order/index/index.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="uni-common-mt uni-form">
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">车牌号:</view>
|
||||
<input class="uni-input" name="carno" v-model="search.carno"
|
||||
:placeholder="'车牌号或车架号,如 '+demoCarno" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">手机号:</view>
|
||||
<input class="uni-input" name="phone" readonly="readonly" disabled="disabled" :value="search.phone"
|
||||
type="text" placeholder="发车人或收车人的手机号" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item" v-if="false">
|
||||
<view class="title">运单号:</view>
|
||||
<input class="uni-input" name="ordersn" v-model="search.ordersn" type="text"
|
||||
placeholder="完整的运单号码" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item">
|
||||
<view class="help-block">
|
||||
如果搜索不出结果，可尝试检查一下搜索条件是否正确无误。
|
||||
</view>
|
||||
</view>
|
||||
<uni-notice-bar text="手机号为自动获取您登陆时使用的手机号，如果需要更换查询用的手机号，请退出账号并使用新手机号登陆."></uni-notice-bar>
|
||||
|
||||
<view class="uni-btn-v">
|
||||
<button class="btn btn-success" form-type="submit">查询</button>
|
||||
<button class="btn btn-error" type="default" form-type="reset">重置</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/ctms.config.js";
|
||||
import store from '@/store/index.js';
|
||||
import utils from "@/utils/common.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
carno: '',
|
||||
phone: '',
|
||||
ordersn: ''
|
||||
},
|
||||
demoCarno: config.demoCarno,
|
||||
lsIndex: 'OrderSearchTabbar'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
checkLogin() {
|
||||
return ctms.user.checkLogin()
|
||||
},
|
||||
formSubmit: function(e) {
|
||||
var _that = this;
|
||||
// utils.debug('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
|
||||
//进行表单检查
|
||||
var formData = e.detail.value;
|
||||
|
||||
ctms.order.search(formData, 0, 5).then(
|
||||
function(res) {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: "查询完成!",
|
||||
icon: "success"
|
||||
});
|
||||
_that.goTo('order/list/list');
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "没有查询到相关订单!",
|
||||
icon: "fail"
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
formReset: function(e) {
|
||||
// utils.debug('清空数据')
|
||||
},
|
||||
goTo(page) {
|
||||
page = config.pageDir + page;
|
||||
uni.navigateTo({
|
||||
url: page
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
var user = ctms.user.checkLogin();
|
||||
var user = store.state.userCloud;
|
||||
this.search.phone = user.mobile;
|
||||
},
|
||||
onShow: function() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #e6e6e60e;
|
||||
}
|
||||
|
||||
radio,
|
||||
checkbox,
|
||||
switch {
|
||||
transform: scale(1.5);
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
margin-top: 66rpx;
|
||||
border-bottom: 1upx #333 dashed;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header>image {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.uni-form {
|
||||
width: 94%;
|
||||
margin: 0rpx 3% 0 3%;
|
||||
}
|
||||
|
||||
.uni-form-item {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
}
|
||||
|
||||
.uni-form-item .title,
|
||||
.uni-form-item .data {}
|
||||
|
||||
/**不生效**/
|
||||
.uni-form-item .title {
|
||||
width: 150rpx;
|
||||
padding: 40rpx 20rpx;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.uni-form .uni-btn-v {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 40rpx 30rpx;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #09BB07;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-error {
|
||||
background-color: #fc0107;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: block;
|
||||
/* width: 100%; */
|
||||
font-size: 1rem;
|
||||
height: 1rem;
|
||||
line-height: 1.5rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #666666;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
54
pages/ctms/order/list/list.css
Normal file
54
pages/ctms/order/list/list.css
Normal file
@ -0,0 +1,54 @@
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-cover {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.cover-image {
|
||||
flex: 1;
|
||||
height: 150px;
|
||||
}
|
||||
.no-border {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.pagination{
|
||||
margin:20px 20px;
|
||||
}
|
||||
232
pages/ctms/order/list/list.vue
Normal file
232
pages/ctms/order/list/list.vue
Normal file
@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card v-if="!totalCount" title="查询结果" sub-title="" extra="" padding="10px 0">
|
||||
<view class="uni-body uni-mt-5">
|
||||
<view>
|
||||
<text>没有查询到相关运单</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<uni-section v-else :title="'运单'+order.id" type="line" v-for="order in orders" :data-oid="order.id"
|
||||
:data-carid="order.car_id">
|
||||
<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0" :thumbnail="avatar">
|
||||
<template v-slot:title>
|
||||
<uni-list>
|
||||
<uni-list-item :show-switch="false" :title="order.car_title + ' ' + order.car_number" />
|
||||
</uni-list>
|
||||
</template>
|
||||
<view class="uni-body uni-mt-5">
|
||||
<view>
|
||||
<text>日期：{{order.signdate}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>起运地：{{order.start_city}} => 目的地：{{order.aim_city}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>验车人：{{order.checker}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="actions" class="card-actions">
|
||||
|
||||
<view v-if="order.is_checked" class="card-actions-item" @click="showCheck(order.id)">
|
||||
<uni-icons type="images" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">验车情况</text>
|
||||
</view>
|
||||
<view class="card-actions-item" @click="actionsCheck(order.id)">
|
||||
<uni-icons type="cloud-upload" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">上传验车</text>
|
||||
</view>
|
||||
|
||||
<view class="card-actions-item" @click="actionsDetail(order.id)">
|
||||
<uni-icons type="link" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
<view class="pagination">
|
||||
<uni-pagination :show-icon="false" :total="totalCount" :pageSize='psize' v-model='page' title="分页栏"
|
||||
@change="newPage" />
|
||||
</view>
|
||||
|
||||
<uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
|
||||
:vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from "@/utils/common.js";
|
||||
import config from "@/config/ctms.config.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
orders: {},
|
||||
employees: {},
|
||||
stores: {},
|
||||
totalCount: 0, //一共多少条数据
|
||||
psize: 10,
|
||||
page: 1,
|
||||
avatar: '@/static/logo.png',
|
||||
|
||||
//悬浮按钮
|
||||
fabs: {
|
||||
horizontal: 'left',
|
||||
vertical: 'bottom',
|
||||
direction: 'horizontal', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#fff',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fff',
|
||||
iconColor: '#aaa'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/fab/home.png',
|
||||
selectedIconPath: '/static/fab/homeactive.png',
|
||||
text: '首页',
|
||||
active: false,
|
||||
diyfn: 'home'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/guanzhu.png',
|
||||
selectedIconPath: '/static/fab/guanzhuactive.png',
|
||||
text: '关注',
|
||||
active: false,
|
||||
diyfn: 'news'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/me.png',
|
||||
selectedIconPath: '/static/fab/meactive.png',
|
||||
text: '用户',
|
||||
active: false,
|
||||
diyfn: 'user'
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/news.png',
|
||||
selectedIconPath: '/static/fab/newsactive.png',
|
||||
text: '公告',
|
||||
active: false,
|
||||
diyfn: 'notice'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showCheck(e) {
|
||||
uni.navigateTo({
|
||||
url: '../detail/check?oid=' + e
|
||||
})
|
||||
},
|
||||
actionsDetail(e) {
|
||||
uni.navigateTo({
|
||||
url: '../detail/detail?oid=' + e
|
||||
})
|
||||
},
|
||||
actionsCheck(e) {
|
||||
uni.navigateTo({
|
||||
url: '../yanche/yanche?oid=' + e
|
||||
})
|
||||
},
|
||||
//分页器动作
|
||||
newPage(e) {
|
||||
var page = e.current;
|
||||
this.page = page;
|
||||
var res = ctms.order.list(this.page);
|
||||
if (res) {
|
||||
this.orders = res.orders;
|
||||
} else {
|
||||
this.checkOrder();
|
||||
}
|
||||
},
|
||||
//刷新列表
|
||||
checkOrder() {
|
||||
var _that = this;
|
||||
ctms.order.search(null, this.page, this.psize).then(
|
||||
function(res) {
|
||||
if (res) {
|
||||
_that.orders = res.orders;
|
||||
_that.totalCount = res.total;
|
||||
uni.showToast({
|
||||
title: "查询完成!",
|
||||
icon: "success"
|
||||
});
|
||||
} else {
|
||||
_that.orders = {}
|
||||
_that.totalCount = 0;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//浮窗按钮相关操作
|
||||
fabClick(e) {
|
||||
// utils.debug('点击了悬浮按钮')
|
||||
},
|
||||
fabTrigger(e) {
|
||||
var eindex = e.index;
|
||||
this.fabs.content[e.index].active = !e.item.active;
|
||||
|
||||
if (!e.item.diyfn) {
|
||||
//未设置这个difyfn字段的，无操作
|
||||
return false;
|
||||
}
|
||||
var diyfn = e.item.diyfn,
|
||||
dir = config.pageDir,
|
||||
page;
|
||||
switch (diyfn) {
|
||||
case 'home':
|
||||
page = 'tabbar/index/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
case 'news':
|
||||
page = 'news/list/list';
|
||||
break;
|
||||
case 'user':
|
||||
page = 'me/index';
|
||||
break;
|
||||
case 'notice':
|
||||
page = 'tabbar/notice/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
}
|
||||
return uni.navigateTo({
|
||||
url: dir + page
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
// utils.debug('运单列表页启动')
|
||||
},
|
||||
onShow() {
|
||||
var res = ctms.order.list(this.page);
|
||||
if (res) {
|
||||
this.orders = res.orders;
|
||||
this.totalCount = res.total;
|
||||
}
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.page = 1;
|
||||
this.checkOrder();
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("list.css");
|
||||
@import url("../../statusBar.css");
|
||||
</style>
|
||||
938
pages/ctms/order/yanche/yanche.vue
Normal file
938
pages/ctms/order/yanche/yanche.vue
Normal file
@ -0,0 +1,938 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-section title="基础信息" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view>车辆：{{order.car_title}} -- {{order.car_number}}</view>
|
||||
<view>运单号：{{order.sn}}</view>
|
||||
<view>日期：{{order.signdate}}</view>
|
||||
<view>起运地：{{order.from_province}}-{{order.start_city}} =>
|
||||
目的地：{{order.to_province}}-{{order.aim_city}}
|
||||
</view>
|
||||
<view>随车物品：{{order.car_extra}}</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
<uni-section title="链接" subTitle="使用系统浏览器打开" type="line" padding>
|
||||
<uni-link :href="h5_url+'?oid='+oid" :text="h5_url"></uni-link>
|
||||
</uni-section>
|
||||
</view>
|
||||
<view class="container">
|
||||
<view class="uni-common-mt uni-form">
|
||||
<uni-section title="（*）验车备注" type="line">
|
||||
<view class="uni-form-item ">
|
||||
<text class="help-block">请确认提醒客户，取下ETC卡并妥善放置</text>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">验车人</view>
|
||||
<view class="data">
|
||||
<input class="uni-input" name="checker" v-model="order_up.checker" placeholder="验车人的名字" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">公里数</view>
|
||||
<view class="data">
|
||||
<input class="uni-input" name="start_km" v-model="order_up.start_km" placeholder="当前仪表盘公里数" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">行驶证</view>
|
||||
<radio-group name="is_driving_lisence" class="radio" @change="radioChangeDriving">
|
||||
<label>
|
||||
<radio value="1" :checked="order_up.is_driving_lisence==1?true:false" /><text>未随车</text>
|
||||
</label>
|
||||
<label>
|
||||
<radio value="0" :checked="order_up.is_driving_lisence==-1?true:false" /><text>不确定</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">随车物品</view>
|
||||
<view class="data">
|
||||
<textarea name="car_extra" auto-height placeholder-style="color:#F76260"
|
||||
placeholder="点击即可填写；请简要备注一下" v-model="order_up.car_extra" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<button class="btn btn-success" @click="updata">上传数据</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
|
||||
<uni-section title="选择验车图片并点击上传" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="driving_lisence" :auto-upload="false" file-mediatype="image" mode="grid"
|
||||
:limit="1" :delIcon="null" title="行驶证照片" />
|
||||
<input hidden="true" class="uni-input" v-model="order_up.driving_lisence"
|
||||
placeholder="直接在此处填写图片地址也可以" />
|
||||
<uni-file-picker ref="files" :auto-upload="true" file-mediatype="image" mode="grid" :limit="1" title=""
|
||||
:image-styles="imageStyles" @select="select1" @progress="progress1" @success="success1"
|
||||
@fail="fail1" />
|
||||
<button hidden="true" class="btn btn-primary" size="mini" @click="upload1">上传</button>
|
||||
<button :hidden="order_up.driving_lisence == '' ? true : false" class="btn btn-danger" size="mini"
|
||||
@click="reset1">重置</button>
|
||||
<button class="btn btn-warning" size="mini" @click="recovery1">还原</button>
|
||||
<button :hidden="order_up.driving_lisence == '' ? true : false" class="btn btn-success" size="mini"
|
||||
@click="save1">保存</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="选择验车图片并点击上传" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_f" :auto-upload="false" file-mediatype="image" mode="grid" :limit="1"
|
||||
:delIcon="null" title="正面车身照片" />
|
||||
<input hidden="true" class="uni-input" v-model="order_up.thumb_f" placeholder="直接在此处填写图片地址也可以" />
|
||||
<uni-file-picker ref="files" :auto-upload="true" file-mediatype="image" mode="grid" :limit="1" title=""
|
||||
:image-styles="imageStyles" @select="select2" @progress="progress2" @success="success2"
|
||||
@fail="fail2" />
|
||||
<button :hidden="order_up.thumb_f == '' ? true : false" class="btn btn-danger" size="mini"
|
||||
@click="reset2">重置</button>
|
||||
<button class="btn btn-warning" size="mini" @click="recovery2">还原</button>
|
||||
<button :hidden="order_up.thumb_f == '' ? true : false" class="btn btn-success" size="mini"
|
||||
@click="save2">保存</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="选择验车图片并点击上传" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_b" :auto-upload="false" file-mediatype="image" mode="grid" :limit="1"
|
||||
:delIcon="null" title="尾部车身照" />
|
||||
<input hidden="true" class="uni-input" v-model="order_up.thumb_b" placeholder="直接在此处填写图片地址也可以" />
|
||||
<uni-file-picker ref="files" :auto-upload="true" file-mediatype="image" mode="grid" :limit="1"
|
||||
:image-styles="imageStyles" @select="select3" @progress="progress3" @success="success3"
|
||||
@fail="fail3" />
|
||||
<button :hidden="order_up.thumb_b == '' ? true : false" class="btn btn-danger" size="mini"
|
||||
@click="reset3">重置</button>
|
||||
<button class="btn btn-warning" size="mini" @click="recovery3">还原</button>
|
||||
<button :hidden="order_up.thumb_b == '' ? true : false" class="btn btn-success" size="mini"
|
||||
@click="save3">保存</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="选择验车图片并点击上传" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_l" :auto-upload="false" file-mediatype="image" mode="grid" :limit="1"
|
||||
:delIcon="null" title="左侧车身照" />
|
||||
<input hidden="true" class="uni-input" v-model="order_up.thumb_l" placeholder="直接在此处填写图片地址也可以" />
|
||||
<uni-file-picker ref="files" :auto-upload="true" file-mediatype="image" mode="grid" :limit="1"
|
||||
:image-styles="imageStyles" @select="select4" @progress="progress4" @success="success4"
|
||||
@fail="fail4" />
|
||||
<button :hidden="order_up.thumb_l == '' ? true : false" class="btn btn-danger" size="mini"
|
||||
@click="reset4">重置</button>
|
||||
<button class="btn btn-warning" size="mini" @click="recovery4">还原</button>
|
||||
<button :hidden="order_up.thumb_l == '' ? true : false" class="btn btn-success" size="mini"
|
||||
@click="save4">保存</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="选择验车图片并点击上传" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_r" :auto-upload="false" file-mediatype="image" mode="grid" :limit="1"
|
||||
:delIcon="null" title="右侧车照" />
|
||||
<input hidden="true" class="uni-input" v-model="order_up.thumb_r" placeholder="直接在此处填写图片地址也可以" />
|
||||
<uni-file-picker ref="files" :auto-upload="true" file-mediatype="image" mode="grid" :limit="1"
|
||||
:image-styles="imageStyles" @select="select5" @progress="progress5" @success="success5"
|
||||
@fail="fail5" />
|
||||
<button :hidden="order_up.thumb_r == '' ? true : false" class="btn btn-danger" size="mini"
|
||||
@click="reset5">重置</button>
|
||||
<button class="btn btn-warning" size="mini" @click="recovery5">还原</button>
|
||||
<button :hidden="order_up.thumb_r == '' ? true : false" class="btn btn-success" size="mini"
|
||||
@click="save5">保存</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="选择剩余验车图片并点击上传" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="fileLists" ref="thumbs" :auto-upload="true" file-mediatype="image" mode="grid"
|
||||
:limit="99" title="其他验车照片" :image-styles="imageStyles" @select="multiSelect"
|
||||
@progress="multiProgress" @success="multiSuccess" @fail="multiFail" />
|
||||
|
||||
<button hidden="true" class="btn btn-danger" size="mini" @click="multiSelectAdd">添加照片至列表</button>
|
||||
<button hidden="true" class="btn btn-default" size="mini" @click="multiSelectCover">重选照片并覆盖</button>
|
||||
|
||||
<button class="btn btn-primary" size="mini" @click="uploadThumbs">上传所选图片</button>
|
||||
<button class="btn btn-success" size="mini" @click="saveThumbs">保存验车图片</button>
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<button class="btn btn-warning" @click="saveAll">保存并上传全部验车信息</button>
|
||||
|
||||
|
||||
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
|
||||
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/ctms.config.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
import Hi from '@/common/util.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
oid: 0,
|
||||
order: {
|
||||
id: 0,
|
||||
remark: '备注',
|
||||
},
|
||||
|
||||
h5_url: '',
|
||||
//要上传修改的订单数据部分（留空的则服务端不覆盖）
|
||||
order_up: {
|
||||
driving_lisence: '',
|
||||
thumb_f: '',
|
||||
thumb_b: '',
|
||||
thumb_l: '',
|
||||
thumb_r: '',
|
||||
thumbs: [],
|
||||
start_km: 0,
|
||||
is_driving_lisence: 0,
|
||||
car_extra: '',
|
||||
checker: ''
|
||||
},
|
||||
driving_lisence: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '行驶证'
|
||||
},
|
||||
thumb_f: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '车头照'
|
||||
},
|
||||
thumb_b: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '车尾照'
|
||||
},
|
||||
thumb_r: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '右车身'
|
||||
},
|
||||
thumb_l: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '左车身'
|
||||
},
|
||||
//订单详情thumbs转换为可显部分 //该字段未启用
|
||||
thumbs: [{
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: 'thumbs[]'
|
||||
}],
|
||||
thumbs_files: [], //多图待上传
|
||||
//呈现多图列表 //通过组件内加号选择上传的多图列表也加入到这
|
||||
fileLists: [],
|
||||
/*{
|
||||
url: '//public.hiluker.com/fm.jpg',
|
||||
extname: 'jpg',
|
||||
name: 'thumbs[]',
|
||||
_src: '/pics/X/Y/Z/.test.jpg' //BY FM453，自行添加的一个属性，将图片原始目录数据保存，备用
|
||||
}*/
|
||||
//所有已选多图 //该字段未启用
|
||||
tmpfiles: [{}], //{'blob:http://localhost:3000/4c9d3b56-041b-40fb-8c2b-221ae9d56a56'}
|
||||
|
||||
//图片上传组件样式定义
|
||||
imageStyles: {
|
||||
width: 128,
|
||||
height: 128,
|
||||
border: {
|
||||
radius: '2%',
|
||||
color: '#ddd',
|
||||
},
|
||||
},
|
||||
listStyles: {
|
||||
// 是否显示边框
|
||||
border: true,
|
||||
// 是否显示分隔线
|
||||
dividline: true,
|
||||
// 线条样式
|
||||
borderStyle: {
|
||||
width: 1,
|
||||
color: 'blue',
|
||||
style: 'dashed',
|
||||
radius: 2
|
||||
},
|
||||
},
|
||||
|
||||
//悬浮按钮
|
||||
horizontal: 'right',
|
||||
vertical: 'bottom',
|
||||
direction: 'vertical', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#eef',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fd8008',
|
||||
iconColor: '#fff'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/c1.png',
|
||||
selectedIconPath: '/static/c1.png',
|
||||
text: '保存草稿',
|
||||
active: false,
|
||||
diyfn: '1' //自定义添加的一个字段
|
||||
},
|
||||
{
|
||||
iconPath: '/static/submit.png',
|
||||
selectedIconPath: '/static/submit-active.png',
|
||||
text: '确认上传',
|
||||
active: false,
|
||||
diyfn: false
|
||||
}
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
//行驶证随车按钮切换
|
||||
radioChangeDriving(e) {
|
||||
// console.log(e.detail);
|
||||
Hi._that.order_up.is_driving_lisence = e.detail.value;
|
||||
},
|
||||
|
||||
//仅上传验车数据
|
||||
updata() {
|
||||
this.submit('data');
|
||||
},
|
||||
|
||||
// 文件选择与上传
|
||||
//行驶证
|
||||
select1(e) {
|
||||
//缓存文件
|
||||
Hi._that.driving_lisence_files = e.tempFiles;
|
||||
},
|
||||
progress1(e) {
|
||||
console.log('上传中...', e);
|
||||
},
|
||||
fail1(e) {
|
||||
console.log('上传失败...', e);
|
||||
},
|
||||
success1(e) {
|
||||
console.log('上传成功...', e);
|
||||
var files = e.tempFiles;
|
||||
var file = files[0];
|
||||
var callback = 'driving_lisence';
|
||||
Hi._that.order_up[callback] = file.url;
|
||||
uni.setStorageSync(callback, file.url);
|
||||
},
|
||||
recovery1() {
|
||||
//还原，恢复使用刚上传的图片
|
||||
uni.showToast({
|
||||
title: "操作成功",
|
||||
icon: "success"
|
||||
});
|
||||
var ls = uni.getStorageSync('driving_lisence');
|
||||
if (ls) Hi._that.order_up.driving_lisence = ls;
|
||||
},
|
||||
reset1() {
|
||||
//重置，使用最初的图片
|
||||
uni.showToast({
|
||||
title: "操作成功",
|
||||
icon: "success"
|
||||
});
|
||||
Hi._that.order_up.driving_lisence = '';
|
||||
},
|
||||
save1() {
|
||||
var callback = 'driving_lisence';
|
||||
if (!Hi._that.order_up[callback]) {
|
||||
uni.showToast({
|
||||
title: "未选择照片",
|
||||
icon: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//仅提交该项数据
|
||||
this.submit(callback);
|
||||
},
|
||||
upload1() {
|
||||
console.log('准备开始上传')
|
||||
},
|
||||
|
||||
//车前
|
||||
select2(e) {
|
||||
console.log('选择文件：', e);
|
||||
//缓存文件
|
||||
Hi._that.thumb_f_files = e.tempFiles;
|
||||
},
|
||||
progress2(e) {
|
||||
console.log('上传中...');
|
||||
console.log(e);
|
||||
},
|
||||
fail2(e) {
|
||||
console.log('上传失败...');
|
||||
console.log(e);
|
||||
},
|
||||
success2(e) {
|
||||
console.log('上传成功...');
|
||||
console.log(e);
|
||||
var files = e.tempFiles;
|
||||
var file = files[0];
|
||||
var callback = 'thumb_f';
|
||||
Hi._that.order_up[callback] = file.url;
|
||||
uni.setStorageSync(callback, file.url);
|
||||
},
|
||||
recovery2() {
|
||||
//还原，恢复使用刚上传的图片
|
||||
uni.showToast({
|
||||
title: "操作成功",
|
||||
icon: "success"
|
||||
});
|
||||
var ls = uni.getStorageSync('thumb_f');
|
||||
if (ls) Hi._that.order_up.thumb_f = ls;
|
||||
},
|
||||
reset2() {
|
||||
//重置，使用最初的图片
|
||||
uni.showToast({
|
||||
title: "操作成功",
|
||||
icon: "success"
|
||||
});
|
||||
Hi._that.order_up.thumb_f = '';
|
||||
},
|
||||
save2() {
|
||||
var callback = 'thumb_f';
|
||||
if (!Hi._that.order_up[callback]) {
|
||||
uni.showToast({
|
||||
title: "未选择照片",
|
||||
icon: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//仅提交该项数据
|
||||
this.submit(callback);
|
||||
},
|
||||
|
||||
//车尾
|
||||
select3(e) {
|
||||
console.log('选择文件：', e);
|
||||
//缓存文件
|
||||
Hi._that.thumb_b_files = e.tempFiles;
|
||||
},
|
||||
progress3(e) {
|
||||
console.log('上传中...');
|
||||
console.log(e);
|
||||
},
|
||||
fail3(e) {
|
||||
console.log('上传失败...');
|
||||
console.log(e);
|
||||
},
|
||||
success3(e) {
|
||||
console.log('上传成功...');
|
||||
console.log(e);
|
||||
var files = e.tempFiles;
|
||||
var file = files[0];
|
||||
var callback = 'thumb_b';
|
||||
Hi._that.order_up[callback] = file.url;
|
||||
uni.setStorageSync(callback, file.url);
|
||||
},
|
||||
recovery3() {
|
||||
//还原，恢复使用刚上传的图片
|
||||
uni.showToast({
|
||||
title: "操作成功",
|
||||
icon: "success"
|
||||
});
|
||||
var ls = uni.getStorageSync('thumb_b');
|
||||
if (ls) Hi._that.order_up.thumb_b = ls;
|
||||
},
|
||||
reset3() {
|
||||
//重置，使用最初的图片
|
||||
uni.showToast({
|
||||
title: "操作成功",
|
||||
icon: "success"
|
||||
});
|
||||
Hi._that.order_up.thumb_b = '';
|
||||
},
|
||||
save3() {
|
||||
var callback = 'thumb_b';
|
||||
if (!Hi._that.order_up[callback]) {
|
||||
uni.showToast({
|
||||
title: "未选择照片",
|
||||
icon: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//仅提交该项数据
|
||||
this.submit(callback);
|
||||
},
|
||||
|
||||
//车左
|
||||
select4(e) {
|
||||
console.log('选择文件：', e);
|
||||
//缓存文件
|
||||
Hi._that.thumb_l_files = e.tempFiles;
|
||||
},
|
||||
progress4(e) {
|
||||
console.log('上传中...');
|
||||
console.log(e);
|
||||
},
|
||||
fail4(e) {
|
||||
console.log('上传失败...');
|
||||
console.log(e);
|
||||
},
|
||||
success4(e) {
|
||||
console.log('上传成功...');
|
||||
console.log(e);
|
||||
var files = e.tempFiles;
|
||||
var file = files[0];
|
||||
var callback = 'thumb_l';
|
||||
Hi._that.order_up[callback] = file.url;
|
||||
uni.setStorageSync(callback, file.url);
|
||||
},
|
||||
|
||||
recovery4() {
|
||||
//还原，恢复使用刚上传的图片
|
||||
uni.showToast({
|
||||
title: "操作成功",
|
||||
icon: "success"
|
||||
});
|
||||
var ls = uni.getStorageSync('thumb_l');
|
||||
if (ls) Hi._that.order_up.thumb_l = ls;
|
||||
},
|
||||
reset4() {
|
||||
//重置，使用最初的图片
|
||||
uni.showToast({
|
||||
title: "操作成功",
|
||||
icon: "success"
|
||||
});
|
||||
Hi._that.order_up.thumb_l = '';
|
||||
},
|
||||
save4() {
|
||||
var callback = 'thumb_l';
|
||||
if (!Hi._that.order_up[callback]) {
|
||||
uni.showToast({
|
||||
title: "未选择照片",
|
||||
icon: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//仅提交该项数据
|
||||
this.submit(callback);
|
||||
},
|
||||
|
||||
//车右
|
||||
select5(e) {
|
||||
console.log('选择文件：', e);
|
||||
//缓存文件
|
||||
Hi._that.thumb_r_files = e.tempFiles;
|
||||
},
|
||||
progress5(e) {
|
||||
console.log('上传中...');
|
||||
console.log(e);
|
||||
},
|
||||
fail5(e) {
|
||||
console.log('上传失败...');
|
||||
console.log(e);
|
||||
},
|
||||
success5(e) {
|
||||
console.log('上传成功...');
|
||||
console.log(e);
|
||||
var files = e.tempFiles;
|
||||
var file = files[0];
|
||||
var callback = 'thumb_r';
|
||||
Hi._that.order_up[callback] = file.url;
|
||||
uni.setStorageSync(callback, file.url);
|
||||
},
|
||||
recovery5() {
|
||||
//还原，恢复使用刚上传的图片
|
||||
uni.showToast({
|
||||
title: "操作成功",
|
||||
icon: "success"
|
||||
});
|
||||
var ls = uni.getStorageSync('thumb_r');
|
||||
if (ls) Hi._that.order_up.thumb_r = ls;
|
||||
},
|
||||
reset5() {
|
||||
//重置，使用最初的图片
|
||||
uni.showToast({
|
||||
title: "操作成功",
|
||||
icon: "success"
|
||||
});
|
||||
Hi._that.order_up.thumb_r = '';
|
||||
},
|
||||
save5() {
|
||||
var callback = 'thumb_r';
|
||||
if (!Hi._that.order_up[callback]) {
|
||||
uni.showToast({
|
||||
title: "未选择照片",
|
||||
icon: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//仅提交该项数据
|
||||
this.submit(callback);
|
||||
},
|
||||
|
||||
//多图同时上传，限定只在APP端使用;
|
||||
multiSelect(e) {
|
||||
//点上传组件的加号选择图片的方式;该方式下选择临时图片后并不会将预览结果添加到fileLists中;
|
||||
console.log('选择文件：', e);
|
||||
// 缓存文件
|
||||
// Hi._that.fileLists.push.apply(Hi._that.fileLists,e.tempFiles);
|
||||
// console.log(Hi._that.fileLists);
|
||||
Hi._that.thumbs_files = e.tempFiles;
|
||||
// console.log(Hi._that.thumbs_files);
|
||||
},
|
||||
multiProgress(e) {
|
||||
// console.log('多选上传进度>>>');
|
||||
// console.log(e);
|
||||
},
|
||||
multiSuccess(e) {
|
||||
//上传成功后会合并到对应的fileLists数据中
|
||||
console.log('多选上传成功');
|
||||
console.log(e);
|
||||
var files = e.tempFiles;
|
||||
var callback = 'thumbs';
|
||||
var list = [];
|
||||
for (let i in files) {
|
||||
var f = files[i];
|
||||
var t = f.url;
|
||||
list.push(t);
|
||||
}
|
||||
Hi._that.order_up[callback] = list;
|
||||
uni.setStorageSync(callback, list);
|
||||
},
|
||||
multiFail(e) {
|
||||
console.log('多选上传失败');
|
||||
console.log(e);
|
||||
},
|
||||
uploadThumbs() {
|
||||
const files = Hi._that.thumbs_files;
|
||||
if (!files) {
|
||||
uni.showToast({
|
||||
title: "请先选择照片",
|
||||
icon: "error"
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.$refs.thumbs.upload();
|
||||
},
|
||||
saveThumbs() {
|
||||
var callback = 'thumbs';
|
||||
// console.log(Hi._that.order_up.thumbs);
|
||||
// console.log('上传成功返回结果的待保存文件列表');
|
||||
// console.log(Hi._that.order_up[callback]);
|
||||
|
||||
//先检测文件列表fileLists----eg:上传成功后又有删除了部分图片的情况,不能使用前面的上传成功返回结果作为此处待保存的数据
|
||||
// console.log('有增/删后的文件显现列表');
|
||||
// console.log(Hi._that.fileLists);
|
||||
var files = Hi._that.fileLists;
|
||||
var list = [];
|
||||
var f, t;
|
||||
for (let i in files) {
|
||||
f = files[i];
|
||||
t = f.url;
|
||||
list.push(t);
|
||||
}
|
||||
Hi._that.order_up[callback] = list;
|
||||
this.submit('thumbs');
|
||||
},
|
||||
|
||||
//以下两个功能在启用自动上传后不启用 Start
|
||||
multiSelectCover() {
|
||||
//覆盖方式
|
||||
uni.chooseImage({
|
||||
count: 99, //限制99张，但不是对所有客户端或浏览器都有效
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: function(res) {
|
||||
// console.log(JSON.stringify(res.tempFilePaths));
|
||||
var files = res.tempFiles;
|
||||
var fs = [];
|
||||
for (var i in files) {
|
||||
var file = files[i];
|
||||
var _fs = {
|
||||
url: file.path,
|
||||
extname: 'jpg',
|
||||
name: ''
|
||||
}
|
||||
fs.push(_fs);
|
||||
}
|
||||
Hi._that.fileLists = fs; //用于呈现
|
||||
Hi._that.tmpfiles = files; //替换储存待传
|
||||
}
|
||||
});
|
||||
},
|
||||
multiSelectAdd() {
|
||||
//追加方式
|
||||
uni.chooseImage({
|
||||
count: 99, //限制99张，但不是对所有客户端或浏览器都有效
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: function(res) {
|
||||
// console.log(JSON.stringify(res.tempFilePaths));
|
||||
var files = res.tempFiles;
|
||||
var fs = [];
|
||||
for (var i in files) {
|
||||
var file = files[i];
|
||||
Hi._that.tmpfiles.push(file); //追加储存待传
|
||||
var _fs = {
|
||||
url: file.path,
|
||||
extname: 'jpg',
|
||||
name: ''
|
||||
}
|
||||
fs.push(_fs);
|
||||
}
|
||||
for (var j in Hi._that.fileLists) {
|
||||
var _fs = Hi._that.fileLists[j];
|
||||
fs.push(_fs);
|
||||
}
|
||||
Hi._that.fileLists = fs; //用于展示已选与已有
|
||||
}
|
||||
});
|
||||
},
|
||||
//以上两个功能在启用自动上传后不启用 End
|
||||
|
||||
saveAll() {
|
||||
//多选上传的图片组数据为异步保存,要先做一次编排
|
||||
var callback = 'thumbs';
|
||||
var files = Hi._that.fileLists;
|
||||
var list = [];
|
||||
for (let i in files) {
|
||||
var f = files[i];
|
||||
var t = f.url;
|
||||
list.push(t);
|
||||
}
|
||||
Hi._that.order_up[callback] = list;
|
||||
|
||||
this.submit('all');
|
||||
},
|
||||
|
||||
//浮窗按钮相关操作
|
||||
fabClick(e) {
|
||||
console.log('点击了悬浮按钮')
|
||||
},
|
||||
trigger(e) {
|
||||
var eindex = e.index;
|
||||
var hasDraft = false;
|
||||
var lsIndex = this.lsIndex + '-' + this.oid;
|
||||
if (!e.item.diyfn) {
|
||||
//全部保存
|
||||
this.submit('all');
|
||||
uni.setStorageSync(lsIndex, this.order_up);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '暂不支持',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
submit: function(op) {
|
||||
var _that = this;
|
||||
return ctms.order.yanche(this.oid, this.order_up, op).then(
|
||||
function(res) {
|
||||
if (!res) {
|
||||
return uni.showToast({
|
||||
title: "提交失败!",
|
||||
icon: "fail"
|
||||
});
|
||||
}
|
||||
|
||||
if (op == 'driving_lisence') {
|
||||
Hi._that.driving_lisence.url = Hi._that.driving_lisence_files[0].url;
|
||||
}
|
||||
if (op == 'thumb_f') {
|
||||
Hi._that.thumb_f.url = Hi._that.thumb_f_files[0].url;
|
||||
}
|
||||
if (op == 'thumb_b') {
|
||||
Hi._that.thumb_b.url = Hi._that.thumb_b_files[0].url;
|
||||
}
|
||||
if (op == 'thumb_l') {
|
||||
Hi._that.thumb_l.url = Hi._that.thumb_l_files[0].url;
|
||||
}
|
||||
if (op == 'thumb_r') {
|
||||
Hi._that.thumb_r.url = Hi._that.thumb_r_files[0].url;
|
||||
}
|
||||
|
||||
return uni.showToast({
|
||||
title: "保存成功!",
|
||||
icon: "success"
|
||||
});
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
getOderDetail: function(e) {
|
||||
var _that = this;
|
||||
ctms.order.checkDetail(this.oid).then((res) => {
|
||||
if (res) {
|
||||
var order = res;
|
||||
_that.oid = order.id;
|
||||
order = _that.formatOrder(order, false);
|
||||
_that.order = order;
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//order,订单详情原始数据; restore,是否重新存储
|
||||
formatOrder: function(order, restore = false) {
|
||||
if (order.driving_lisence) {
|
||||
Hi._that.driving_lisence.url = order.driving_lisence_url;
|
||||
}
|
||||
if (order.thumb_f) {
|
||||
Hi._that.thumb_f.url = order.thumb_f_url;
|
||||
}
|
||||
if (order.thumb_b) {
|
||||
Hi._that.thumb_b.url = order.thumb_b_url;
|
||||
}
|
||||
if (order.thumb_r) {
|
||||
Hi._that.thumb_r.url = order.thumb_r_url;
|
||||
}
|
||||
if (order.thumb_l) {
|
||||
Hi._that.thumb_l.url = order.thumb_l_url;
|
||||
}
|
||||
|
||||
if (order.thumbs) {
|
||||
var f, l;
|
||||
const t = [];
|
||||
for (let fi in order.thumbs_url) {
|
||||
f = order.thumbs_url[fi];
|
||||
l = {
|
||||
url: f.url,
|
||||
extname: 'jpg',
|
||||
name: 'thumbs',
|
||||
_src: f.src
|
||||
};
|
||||
// console.log(l)
|
||||
t.push(l);
|
||||
}
|
||||
Hi._that.fileLists = t;
|
||||
}
|
||||
|
||||
// console.log(Hi._that.fileLists);
|
||||
if (order.checker) {
|
||||
Hi._that.order_up.checker = order.checker;
|
||||
} else {
|
||||
Hi._that.order_up.checker = Hi._that.userinfo.username;
|
||||
}
|
||||
if (order.car_extra) {
|
||||
Hi._that.order_up.car_extra = order.car_extra;
|
||||
}
|
||||
if (order.start_km) {
|
||||
Hi._that.order_up.start_km = order.start_km;
|
||||
}
|
||||
if (order.no_driving_lisence) {
|
||||
Hi._that.order_up.is_driving_lisence = order
|
||||
.no_driving_lisence; //确认行驶证未随车
|
||||
}
|
||||
if (restore) {
|
||||
var lsIndex = Hi._that.orderLsIndex + '-' + Hi._that.oid;
|
||||
uni.setStorageSync(lsIndex, order);
|
||||
}
|
||||
return order;
|
||||
},
|
||||
},
|
||||
|
||||
onLoad(o) {
|
||||
Hi._that = this; //在部分函数内部，无法再直接调用this，所以改用该方法赋值后再调用，效果等同于this
|
||||
this.oid = o.oid;
|
||||
this.h5_url = config.h5_view;
|
||||
this.userinfo = ctms.user.getInfo();
|
||||
|
||||
var res = ctms.order.detail(this.oid);
|
||||
if (res) {
|
||||
this.order = res;
|
||||
this.formatOrder(res, false);
|
||||
} else {
|
||||
this.getOderDetail();
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getOderDetail();
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.example-body {
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.custom-image-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-form-item .title {
|
||||
width: 150rpx;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn[size='mini'] {
|
||||
margin-right: 10rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #42b983;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #fc8105;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #f00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0095f6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
border: #bbb solid 1rpx;
|
||||
}
|
||||
|
||||
/*调整下上传组件样式*/
|
||||
.icon-add {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.file-image {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
}
|
||||
|
||||
.file-image>image {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #f00;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
517
pages/ctms/orderpre/create/create.vue
Normal file
517
pages/ctms/orderpre/create/create.vue
Normal file
@ -0,0 +1,517 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-notice-bar show-icon scrollable text="平台上新季,全路线大力优惠,欢迎来询！！！。" />
|
||||
|
||||
<view class="order-form">
|
||||
<!-- 自定义表单校验 -->
|
||||
<uni-forms ref="customForm" :rules="formRules" :modelValue="FormData">
|
||||
<uni-section title="您要发运的车辆信息" type="line">
|
||||
<uni-forms-item label="品牌车型" name="car_title">
|
||||
<uni-easyinput type="text" v-model="FormData.car_title" placeholder="填写品牌车型" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="车牌号" name="car_no">
|
||||
<uni-easyinput type="text" v-model="FormData.car_no" placeholder="无车牌时可填写车架号后六位" />
|
||||
</uni-forms-item>
|
||||
<text class="uniui-h6 help-block">无车牌时可填写车架号(至少后六位)</text>
|
||||
<uni-forms-item label="是否临牌" name="isTempCarno">
|
||||
<uni-data-checkbox v-model="FormData.isTempCarno" :multiple="false" :localdata="isTempCarno" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="车辆保价(万元)" required name="car_value">
|
||||
<uni-easyinput type="number" v-model="FormData.car_value" placeholder="单位：万元;默认20" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="计划日期" name="plan_date">
|
||||
<uni-datetime-picker type="date" return-type="timestamp" v-model="FormData.plan_date" />
|
||||
</uni-forms-item>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="从哪里出发 - 运到哪儿去" type="line">
|
||||
<uni-forms-item label="出发省份" required name="start_province">
|
||||
<uni-data-picker placeholder="请选择省份" popup-title="请选择出发省份" :localdata="provinces"
|
||||
v-model="FormData.start_province">
|
||||
</uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="始发城市" required name="start_city">
|
||||
<uni-easyinput v-model="FormData.start_city" placeholder="请填写出发城市名称" />
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item label="目标省份" required name="aim_province">
|
||||
<uni-data-picker placeholder="请选择省份" popup-title="请选择运达省份" :localdata="provinces"
|
||||
v-model="FormData.aim_province">
|
||||
</uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="目标城市" required name="aim_city">
|
||||
<uni-easyinput v-model="FormData.aim_city" placeholder="请填写目标运达城市名称" />
|
||||
</uni-forms-item>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="联系信息" type="line">
|
||||
<uni-forms-item label="您的姓名" name="from_name">
|
||||
<uni-easyinput v-model="FormData.from_name" placeholder="请输入姓名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="手机号" required name="from_mobile">
|
||||
<uni-easyinput v-model="FormData.from_mobile" placeholder="请输入发车人电话" />
|
||||
</uni-forms-item>
|
||||
</uni-section>
|
||||
|
||||
<uni-forms-item label="备注" name="remark">
|
||||
<uni-easyinput type="textarea" v-model="FormData.remark" placeholder="对运单做一些备注，比如 从哪里提车的；根据实际情况" />
|
||||
</uni-forms-item>
|
||||
|
||||
</uni-forms>
|
||||
|
||||
<view class="button-group">
|
||||
<button type="primary" size="mini" @click="formCheck('customForm')">确认提交</button>
|
||||
<button type="default" size="mini" @click="draft">我再想想</button>
|
||||
</view>
|
||||
|
||||
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
|
||||
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
|
||||
<uni-notice-bar
|
||||
text="温馨提示: 请不要随车放置 贵重小件物品(如 眼镜\无线充电器\数据线\U盘\手表\Zipporr火机等)、精密仪器设备(如 电脑等)、易燃易爆物品，车内不得放置违规违禁物品(如 燃料油\火机\酒精\散装酒等)，否则司机有权拒载、平台有权拒单。" />
|
||||
<uni-notice-bar text="炎热天气，不要随车装运水果，一定会闷坏的。" />
|
||||
<text class="uniui-h6 help-block"></text>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import province from '@/common/province.js';
|
||||
import letter from '@/common/letter.js';
|
||||
import carP from '@/common/car-p.js';
|
||||
import config from "@/config/ctms.config.js";
|
||||
import store from '@/store/index.js';
|
||||
import utils from "@/utils/common.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
oid: 0, //源订单
|
||||
order: {},
|
||||
NotNew: 0, //是否不新增 0 否(更新订单) 1 是(增加订单)
|
||||
FormData: {
|
||||
start_province: '', //默认 460000
|
||||
start_city: '',
|
||||
aim_province: '', //默认 230000
|
||||
aim_city: '',
|
||||
date: '', //计划发运日期
|
||||
plan_date: '2017-04-03', //计划发运日期
|
||||
car_value: 20, //单位：万。默认含20万运输险
|
||||
car_title: '',
|
||||
carno: '', //车牌/架号
|
||||
isTempCarno: 0,
|
||||
from_name: '',
|
||||
from_mobile: '',
|
||||
remark: ''
|
||||
},
|
||||
|
||||
//悬浮按钮
|
||||
horizontal: 'right',
|
||||
vertical: 'bottom',
|
||||
direction: 'vertical', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#fff',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fd8008',
|
||||
iconColor: '#fff'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/fab/c5.png',
|
||||
selectedIconPath: '/static/fab/c5.png',
|
||||
text: '草稿-5',
|
||||
active: false,
|
||||
diyfn: '5' //自定义添加的一个字段
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/c4.png',
|
||||
selectedIconPath: '/static/fab/c4.png',
|
||||
text: '草稿-4',
|
||||
active: false,
|
||||
diyfn: '4' //自定义添加的一个字段
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/c3.png',
|
||||
selectedIconPath: '/static/fab/c3.png',
|
||||
text: '草稿-3',
|
||||
active: false,
|
||||
diyfn: '3' //自定义添加的一个字段
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/c2.png',
|
||||
selectedIconPath: '/static/fab/c2.png',
|
||||
text: '草稿-2',
|
||||
active: false,
|
||||
diyfn: '2' //自定义添加的一个字段
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/c1.png',
|
||||
selectedIconPath: '/static/fab/c1.png',
|
||||
text: '草稿-1',
|
||||
active: false,
|
||||
diyfn: '1' //自定义添加的一个字段
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/draft.png',
|
||||
selectedIconPath: '/static/fab/draft-active.png',
|
||||
text: '保存草稿',
|
||||
active: false,
|
||||
diyfn: false
|
||||
},
|
||||
],
|
||||
|
||||
// 单选性别数据源
|
||||
sexs: [{
|
||||
text: '男',
|
||||
value: 0
|
||||
}, {
|
||||
text: '女',
|
||||
value: 1
|
||||
}, {
|
||||
text: '保密',
|
||||
value: 2
|
||||
}],
|
||||
|
||||
//默认省份数据
|
||||
provinces: [{
|
||||
value: '460000',
|
||||
text: "海南省"
|
||||
},
|
||||
{
|
||||
value: '340000',
|
||||
text: "安徽"
|
||||
}
|
||||
],
|
||||
|
||||
//是否临牌
|
||||
isTempCarno: [{
|
||||
text: '否',
|
||||
value: 0
|
||||
}, {
|
||||
text: '是',
|
||||
value: 1
|
||||
}],
|
||||
|
||||
// 自定义表单校验规则
|
||||
formRules: {
|
||||
start_province: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '出发省份不能为空'
|
||||
}]
|
||||
},
|
||||
aim_province: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '运达省份不能为空'
|
||||
}]
|
||||
},
|
||||
start_city: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '出发城市不能为空'
|
||||
}]
|
||||
},
|
||||
aim_city: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '运达城市不能为空'
|
||||
}]
|
||||
},
|
||||
mobile: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请填写手机号'
|
||||
}]
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad(o) {
|
||||
// console.log(province.listByTitle['海南省']); //显示海南代码
|
||||
// console.log(o);
|
||||
if (o.oid) {
|
||||
this.oid = o.oid;
|
||||
}
|
||||
if (o.NotNew) {
|
||||
this.NotNew = true;
|
||||
uni.setNavigationBarTitle({
|
||||
title: '更新咨询'
|
||||
})
|
||||
}
|
||||
var user = ctms.user.getInfo();
|
||||
this.userinfo = {
|
||||
...this.userinfo,
|
||||
...user
|
||||
}
|
||||
this.FormData.from_mobile = user.mobile;
|
||||
this.FormData.from_name = user.username;
|
||||
|
||||
this.provinces = province.listDatacom;
|
||||
|
||||
this.setDate();
|
||||
},
|
||||
onReady() {
|
||||
// 设置自定义表单校验规则，必须在节点渲染完毕后执行
|
||||
this.$refs.customForm.setRules(this.formRules)
|
||||
//取订单详情，如果有的话
|
||||
if (this.oid) {
|
||||
if (!this.getOderDetail(true)) this.getOderDetail(false);
|
||||
}
|
||||
},
|
||||
onShow: function() {
|
||||
|
||||
},
|
||||
onHide() {
|
||||
this.draft(null); //界面隐藏时自动保存草稿
|
||||
},
|
||||
methods: {
|
||||
//设置日期
|
||||
setDate: function() {
|
||||
var _that = this;
|
||||
|
||||
var timestamp = this.order.date ? this.order.date * 1000 : Date.now() + 7 * 24 * 3600 * 1000;
|
||||
var time = new Date(timestamp);
|
||||
var date = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
|
||||
_that.FormData.plan_date = date;
|
||||
},
|
||||
|
||||
// 获取订单详情
|
||||
getOderDetail: function(cache = null) {
|
||||
/* cache 是否读取缓存 */
|
||||
var _that = this;
|
||||
return ctms.orderpre.detail(this.oid, cache).then((res) => {
|
||||
if (res) {
|
||||
if (!_that.NotNew) {
|
||||
delete res['id']; //是新建而不是更新，删除ID
|
||||
}
|
||||
_that.order = res;
|
||||
_that.FormData = {
|
||||
..._that.FormData,
|
||||
..._that.order
|
||||
};
|
||||
_that.setDate()
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//表单校验
|
||||
formCheck(ref) {
|
||||
this.$refs[ref].validate().then(res => {
|
||||
// utils.debug(res);
|
||||
this.formSubmit();
|
||||
}).catch(err => {
|
||||
utils.debug(err);
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: err['0'].errorMessage
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
formSubmit: function(e) {
|
||||
uni.showLoading({
|
||||
title: '网络请求中'
|
||||
})
|
||||
var FormData,
|
||||
_that = this;
|
||||
if (e) {
|
||||
//直接使用表单内建的提交机制
|
||||
// uitls.debug('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
|
||||
FormData = e.detail.value;
|
||||
} else {
|
||||
FormData = _that.FormData;
|
||||
}
|
||||
|
||||
ctms.orderpre.create(FormData).then(
|
||||
function(res) {
|
||||
if (res) {
|
||||
var oid = res.data.id;
|
||||
ctms.orderpre.delDetail(oid)
|
||||
uni.showModal({
|
||||
title: '提交成功',
|
||||
content: '是否前往查看详情',
|
||||
success: function(res) {
|
||||
//清空本次缓存，避免用户重复提交
|
||||
ctms.orderpre.delDraft()
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '../detail/detail?oid=' + oid
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
//重新载入页面
|
||||
uni.redirectTo({
|
||||
url: 'create'
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "操作失败",
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
uni.hideLoading();
|
||||
},
|
||||
//存储与取用草稿
|
||||
/*TD：草稿逻辑
|
||||
当前页面正在录入的内容，视为默认草稿数据，即时更新、主动保存；
|
||||
索引-1~5：追加应用模板草稿或设置当前草稿为对应模板；后期考虑加入固定模板
|
||||
*/
|
||||
draft(e) {
|
||||
//e是索引后缀
|
||||
ctms.orderpre.draft(this.FormData, e)
|
||||
if (e !== null) {
|
||||
uni.showToast({
|
||||
title: '草稿已保存'
|
||||
})
|
||||
}
|
||||
},
|
||||
useDraft(e, data = null) {
|
||||
var _that = this;
|
||||
//e为缓存索引
|
||||
uni.showModal({
|
||||
title: '覆盖提醒',
|
||||
content: '即将应用该草稿中的临时数据',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
if (data) {
|
||||
_that.FormData = data;
|
||||
} else {
|
||||
_that.FormData = ctms.orderpre.getDraft(e)
|
||||
}
|
||||
|
||||
} else if (res.cancel) {
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//浮窗按钮相关操作
|
||||
fabClick(e) {
|
||||
// utils.debug('点击了悬浮按钮')
|
||||
},
|
||||
trigger(e) {
|
||||
//检查是否存在模板，有则提示应用，无则创建保存
|
||||
var eindex = e.index;
|
||||
this.content[e.index].active = !e.item.active;
|
||||
var hasDraft = false;
|
||||
if (!e.item.diyfn) {
|
||||
//未设置这个difyfn字段的，是“保存草稿”按钮
|
||||
return this.draft();
|
||||
}
|
||||
var index = e.item.diyfn;
|
||||
var res = ctms.orderpre.getDraft(index)
|
||||
|
||||
var _that = this;
|
||||
if (!res) {
|
||||
//该按钮对应的缓存不存在，追加模板
|
||||
return uni.showModal({
|
||||
title: '提示',
|
||||
content: `${e.item.text}对应的草稿不存在，创建吗？`,
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
_that.content[e.index].active = true;
|
||||
_that.draft(e.item.diyfn);
|
||||
} else if (res.cancel) {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: '操作已取消'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//缓存存在
|
||||
return this.useDraft(e.item.diyfn, res);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
/* #ifndef APP-NVUE */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.order-form {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/*级联选择器*/
|
||||
.data-pickerview {
|
||||
height: 400px;
|
||||
border: 1px #e5e5e5 solid;
|
||||
}
|
||||
|
||||
.popper__arrow {
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.popper__arrow {
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
/*自定义样式*/
|
||||
.help-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #666666;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1rem;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.uni-section {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
50
pages/ctms/orderpre/detail/detail.css
Normal file
50
pages/ctms/orderpre/detail/detail.css
Normal file
@ -0,0 +1,50 @@
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-cover {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.cover-image {
|
||||
flex: 1;
|
||||
height: 150px;
|
||||
}
|
||||
.no-border {
|
||||
border-width: 0;
|
||||
}
|
||||
152
pages/ctms/orderpre/detail/detail.vue
Normal file
152
pages/ctms/orderpre/detail/detail.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-section title="基础信息" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view>车辆：{{order.car_title}} -- {{order.car_no}}</view>
|
||||
<view>计划日期：{{order.date_plan}}</view>
|
||||
<view>起运地：{{order.from_province}}-{{order.start_city}} =>
|
||||
目的地：{{order.to_province}}-{{order.aim_city}}</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="联系信息" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view>
|
||||
联系人：{{order.from_name}}
|
||||
</view>
|
||||
<view>
|
||||
联系电话：{{order.from_mobile}}
|
||||
</view>
|
||||
<view>
|
||||
接待员：{{order.receptionist}}
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="费用信息" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view>{{order.price}} </view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="我的备注" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view>{{order.remark}} </view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="操作提示" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view>详情页首次打开时需要联网搜索运单信息；</view>
|
||||
<view>打开过一次的运单信息将会缓存在APP内一段时间，在这期间即使手机没有网络也能查看</view>
|
||||
<view>如果需要查看该运单的最新信息，可通过下拉本页面进行刷新（手机需要联网）</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/ctms.config.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
oid: 0,
|
||||
order: {
|
||||
id: 1,
|
||||
car_id: 1,
|
||||
car_number: '车牌号',
|
||||
car_title: '车型号',
|
||||
start_city: "起运城市",
|
||||
from_province: '起运省份',
|
||||
aim_city: "目的城市",
|
||||
to_province: '目标省份',
|
||||
signdate: '下单日期',
|
||||
car_extra: '随车物品',
|
||||
checker: '验车人',
|
||||
receiver_name: '收车人姓名',
|
||||
receiver_mobiles: '收车人电话',
|
||||
sender_name: '发车人姓名',
|
||||
sender_mobiles: '发车人电话',
|
||||
},
|
||||
h5_url: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getOderDetail: function(cache = null) {
|
||||
/* cache 是否读取缓存 */
|
||||
var _that = this;
|
||||
return ctms.orderpre.detail(this.oid, cache).then((res) => {
|
||||
if (res) {
|
||||
_that.order = res;
|
||||
uni.showToast({
|
||||
title: "查询完成!",
|
||||
icon: "success"
|
||||
});
|
||||
uni.stopPullDownRefresh();
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
callTo(tel) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: tel
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.oid = option.oid;
|
||||
if (!this.getOderDetail(true)) this.getOderDetail(false);
|
||||
},
|
||||
onShow: function() {
|
||||
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getOderDetail();
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
//标题栏按钮响应,仅在APP-PLUS下支持
|
||||
onNavigationBarButtonTap(e) {
|
||||
//#ifdef APP-PLUS
|
||||
uni.shareWithSystem({
|
||||
summary: '运单【 ' + this.order.sn + ' 】摘要：' + this.order.signdate + '，由' + this.order
|
||||
.from_province + this.order.start_city + '-->发往-->' + this.order.to_province + this.order
|
||||
.aim_city + "的车辆：" + this.order.car_title + "--" + this.order.car_number + "。点击链接可查阅更多信息",
|
||||
href: this.h5_url + "?oid=" + this.oid,
|
||||
success() {
|
||||
// 分享完成，请注意此时不一定是成功分享
|
||||
},
|
||||
fail() {
|
||||
// 分享失败
|
||||
}
|
||||
})
|
||||
//#endif
|
||||
//#ifdef H5
|
||||
var summary = '运单【 ' + this.order.sn + ' 】摘要：' + this.order.signdate + '，由' + this.order
|
||||
.from_province + this.order.start_city + '-->发往-->' + this.order.to_province + this.order
|
||||
.aim_city + "的车辆：" + this.order.car_title + "--" + this.order.car_number + "。点击链接可查阅更多信息:" + this
|
||||
.h5_url + "?oid=" + this.oid;
|
||||
uni.setClipboardData({
|
||||
data: summary
|
||||
})
|
||||
//#endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("detail.css");
|
||||
</style>
|
||||
54
pages/ctms/orderpre/list/list.css
Normal file
54
pages/ctms/orderpre/list/list.css
Normal file
@ -0,0 +1,54 @@
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-cover {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.cover-image {
|
||||
flex: 1;
|
||||
height: 150px;
|
||||
}
|
||||
.no-border {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.pagination{
|
||||
margin:20px 20px;
|
||||
}
|
||||
239
pages/ctms/orderpre/list/list.vue
Normal file
239
pages/ctms/orderpre/list/list.vue
Normal file
@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-card v-if="!totalCount" title="查询结果" sub-title="" extra="" padding="10px 0">
|
||||
<view class="uni-body uni-mt-5">
|
||||
<view>
|
||||
<text>没有查询到相关询价记录</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<uni-section v-else :title="'询价单'+order.id" type="line" v-for="(order, index) in orders" :data-oid="order.id"
|
||||
:key="index">
|
||||
<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0">
|
||||
<template v-slot:title>
|
||||
<uni-list>
|
||||
<uni-list-item :show-switch="false" :title="order.car_title + ' ' + order.car_no" />
|
||||
</uni-list>
|
||||
</template>
|
||||
<view class="uni-body uni-mt-5">
|
||||
<view>
|
||||
<text>计划日期：{{order.date_plan}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>起运地：{{order.start_city}} => 目的地：{{order.aim_city}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>价格：{{order.price}} </text>
|
||||
</view>
|
||||
<view>
|
||||
<text>状态：{{order.status}} </text>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="actions" class="card-actions">
|
||||
<view class="card-actions-item" @click="actionsCancel(order.id,index)" v-if="order.status_code>-1">
|
||||
<uni-icons type="refresh-filled" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">取消</text>
|
||||
</view>
|
||||
|
||||
<view class="card-actions-item" @click="actionsUpdate(order.id)">
|
||||
<uni-icons type="compose" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">更新咨询</text>
|
||||
</view>
|
||||
|
||||
<view class="card-actions-item" @click="actionsDetail(order.id)">
|
||||
<uni-icons type="link" size="18" color="#999"></uni-icons>
|
||||
<text class="card-actions-item-text">详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
<view class="pagination">
|
||||
<uni-pagination :show-icon="false" :total="totalCount" :pageSize='psize' v-model='page' title="分页栏"
|
||||
@change="newPage" />
|
||||
</view>
|
||||
|
||||
<uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
|
||||
:vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from "@/utils/common.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
orders: {},
|
||||
totalCount: 0, //一共多少条数据
|
||||
psize: 10,
|
||||
page: 1,
|
||||
|
||||
//悬浮按钮
|
||||
fabs: {
|
||||
horizontal: 'left',
|
||||
vertical: 'bottom',
|
||||
direction: 'horizontal', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#fff',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fff',
|
||||
iconColor: '#aaa'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/fab/home.png',
|
||||
selectedIconPath: '/static/fab/homeactive.png',
|
||||
text: '首页',
|
||||
active: false,
|
||||
diyfn: 'home'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/guanzhu.png',
|
||||
selectedIconPath: '/static/fab/guanzhuactive.png',
|
||||
text: '关注',
|
||||
active: false,
|
||||
diyfn: 'news'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/fab/me.png',
|
||||
selectedIconPath: '/static/fab/meactive.png',
|
||||
text: '用户',
|
||||
active: false,
|
||||
diyfn: 'user'
|
||||
},
|
||||
|
||||
{
|
||||
iconPath: '/static/fab/news.png',
|
||||
selectedIconPath: '/static/fab/newsactive.png',
|
||||
text: '公告',
|
||||
active: false,
|
||||
diyfn: 'notice'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkLogin() {
|
||||
return ctms.user.getInfo();
|
||||
},
|
||||
|
||||
actionsCancel(e, i) {
|
||||
var _that = this;
|
||||
return ctms.orderpre.cancel(e).then((res) => {
|
||||
if (res) {
|
||||
_that.orders[i].status_code = res.status_code;
|
||||
uni.showToast({
|
||||
title: "已取消",
|
||||
icon: "success"
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
actionsDetail(e) {
|
||||
uni.navigateTo({
|
||||
url: '../detail/detail?oid=' + e
|
||||
})
|
||||
},
|
||||
actionsUpdate(e) {
|
||||
uni.navigateTo({
|
||||
url: '../create/create?oid=' + e + '&NotNew=1'
|
||||
})
|
||||
},
|
||||
//分页器动作
|
||||
newPage(e) {
|
||||
var page = e.current;
|
||||
this.page = page;
|
||||
var res = ctms.orderpre.list(this.page);
|
||||
if (res) {
|
||||
this.orders = res.orders;
|
||||
} else {
|
||||
this.checkOrder();
|
||||
}
|
||||
},
|
||||
//刷新列表
|
||||
checkOrder() {
|
||||
var _that = this;
|
||||
ctms.orderpre.list(null, this.page, this.psize).then(
|
||||
function(res) {
|
||||
if (res) {
|
||||
_that.orders = res.orders;
|
||||
_that.totalCount = res.total;
|
||||
uni.showToast({
|
||||
title: "查询完成!",
|
||||
icon: "success"
|
||||
});
|
||||
} else {
|
||||
_that.orders = {}
|
||||
_that.totalCount = 0;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//浮窗按钮相关操作
|
||||
fabClick(e) {
|
||||
// utils.debug('点击了悬浮按钮')
|
||||
},
|
||||
fabTrigger(e) {
|
||||
var eindex = e.index;
|
||||
this.fabs.content[e.index].active = !e.item.active;
|
||||
|
||||
if (!e.item.diyfn) {
|
||||
//未设置这个difyfn字段的，无操作
|
||||
return false;
|
||||
}
|
||||
var diyfn = e.item.diyfn,
|
||||
dir = config.pageDir,
|
||||
page;
|
||||
switch (diyfn) {
|
||||
case 'home':
|
||||
page = 'tabbar/index/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
case 'news':
|
||||
page = 'news/list/list';
|
||||
break;
|
||||
case 'user':
|
||||
page = 'me/index';
|
||||
break;
|
||||
case 'notice':
|
||||
page = 'tabbar/notice/index';
|
||||
return uni.reLaunch({
|
||||
url: dir + page
|
||||
})
|
||||
break;
|
||||
}
|
||||
return uni.navigateTo({
|
||||
url: dir + page
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
// this.checkLogin();
|
||||
// utils.debug('询价记录列表页启动')
|
||||
this.checkOrder()
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.page = 1;
|
||||
this.checkOrder();
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("list.css");
|
||||
@import url("../../statusBar.css");
|
||||
</style>
|
||||
21
pages/ctms/price/index.vue
Normal file
21
pages/ctms/price/index.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
功能正在开发中……
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
text-align: center;
|
||||
height: 400upx;
|
||||
margin-top: 200upx;
|
||||
}
|
||||
</style>
|
||||
166
pages/ctms/scan/scan.vue
Normal file
166
pages/ctms/scan/scan.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
</view>
|
||||
<view class="tabbar-box-wrap">
|
||||
<view class="tabbar-box">
|
||||
|
||||
|
||||
<view class="tabbar-box-item" @click="scan">
|
||||
<image class="box-image" src="@/static/img/tabbar/more/scan.png" mode="aspectFit"></image>
|
||||
<text class="explain">扫码</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/ctms.config.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: false
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
setTimeout(() => {
|
||||
this.active = true;
|
||||
}, 500);
|
||||
},
|
||||
onHide() {
|
||||
this.active = false;
|
||||
},
|
||||
methods: {
|
||||
goToPage(url) {
|
||||
if (!url) return;
|
||||
url = config.pageDir + url;
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
tel() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: config.kfPhone
|
||||
})
|
||||
},
|
||||
scan() {
|
||||
console.log('开始扫码')
|
||||
uni.scanCode({
|
||||
scanType: ['barCode', 'qrCode'],
|
||||
success(res) {
|
||||
console.log('扫码结果', res);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - var(--window-bottom) - var(--window-top));
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
height: 100vh;
|
||||
/* #endif */
|
||||
transition: opacity 0.3s;
|
||||
|
||||
background-image: url('@/static/logo.png');
|
||||
background-size: 30%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
opacity: 0.5;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 创建一个伪元素来覆盖整个元素，并设置透明度 */
|
||||
.content::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
/* 设置白色半透明遮罩 */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.tabbar-box-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 50upx;
|
||||
box-sizing: border-box;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.tabbar-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 15upx 20upx;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -16upx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
transform: rotate(45deg);
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 20upx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tabbar-box-item {
|
||||
// position: relative;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
margin: 10upx;
|
||||
color: $uni-color-subtitle;
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-base;
|
||||
|
||||
.box-image {
|
||||
width: 100%;
|
||||
height: $uni-img-size-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
15
pages/ctms/statusBar.css
Normal file
15
pages/ctms/statusBar.css
Normal file
@ -0,0 +1,15 @@
|
||||
/*导航条配置*/
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/*使用导航条需要调整占用高度*/
|
||||
.container,
|
||||
page {
|
||||
padding-top: 44rpx;
|
||||
}
|
||||
148
pages/ctms/tabbar/index/index.vue
Normal file
148
pages/ctms/tabbar/index/index.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 轮播图 -->
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="500">
|
||||
<swiper-item v-for="(item, index) in banner" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)" :data-link="item.link">
|
||||
<image class="swiper-image" :src="item.image" mode="aspectFill" :draggable="true" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<image class="logo" src="@/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">安邮车联</text>
|
||||
</view>
|
||||
<view class="text-area">
|
||||
<text class="title">运车助手</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
import utils from "@/utils/common.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
swiperDotIndex: 0,
|
||||
banner: [{
|
||||
image: '/static/img/banner/banner.jpg',
|
||||
link: ""
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickBannerItem(item) {
|
||||
if (item.link) {
|
||||
var link = item.link;
|
||||
uni.navigateTo({
|
||||
url: "/pages/common/webview/index?url=" + link
|
||||
})
|
||||
}
|
||||
},
|
||||
changeSwiper(e) {
|
||||
this.current = e.detail.current
|
||||
},
|
||||
getBanner() {
|
||||
ctms.ads.banner().then((res) => {
|
||||
var _data = res;
|
||||
if (_data) {
|
||||
this.banner = _data;
|
||||
}
|
||||
});
|
||||
},
|
||||
checkSplash() {
|
||||
var ls = "splashShowed";
|
||||
var a = uni.getStorageSync(ls);
|
||||
if (!a) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad: function() {
|
||||
this.checkSplash();
|
||||
},
|
||||
onShow: function() {
|
||||
this.getBanner();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.uni-margin-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uni-padding-wrap {
|
||||
width: 550rpx;
|
||||
padding: 0 100rpx;
|
||||
}
|
||||
|
||||
/*轮播幻灯*/
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-list {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
/*滑动区*/
|
||||
.swiper-box {
|
||||
height: 370rpx;
|
||||
background: #fff;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
</style>
|
||||
264
pages/ctms/tabbar/me/index.vue
Normal file
264
pages/ctms/tabbar/me/index.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="about">
|
||||
<view class="content">
|
||||
<view class="qrcode">
|
||||
<image src="@/static/logo.png"></image>
|
||||
<text class="tip">{{userinfo.username}}</text>
|
||||
</view>
|
||||
<view class="desc">
|
||||
{{config.about.slogan}}
|
||||
</view>
|
||||
|
||||
<view class="uni-card">
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell-divider">
|
||||
|
||||
</view>
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<navigator v-for="item in menus" :url="item.url" class="uni-list-cell"
|
||||
hover-class="uni-list-cell-hover">
|
||||
<view class="uni-list-cell-navigate uni-navigate-right">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</navigator>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view v-for="item in menus" class="uni-list-cell" hover-class="uni-list-cell-hover"
|
||||
@click="go(item.url)">
|
||||
<view class="uni-list-cell-navigate uni-navigate-right">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<button type="primary" @click="share">分享</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="version">
|
||||
当前版本：{{version}}
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from "@/utils/common.js";
|
||||
import config from "@/config/ctms.config.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
menus: {
|
||||
// cloud: {
|
||||
// title: '我的资料',
|
||||
// url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
|
||||
// },
|
||||
orderpre: {
|
||||
title: '我的询价',
|
||||
url: '../../orderpre/list/list'
|
||||
},
|
||||
order: {
|
||||
title: '运单记录',
|
||||
url: '../../order/list/list'
|
||||
},
|
||||
news: {
|
||||
title: '资讯报道',
|
||||
url: '../../news/list/list'
|
||||
},
|
||||
// yinsi: {
|
||||
// title: '隐私协议',
|
||||
// url: '/pages/uni-agree/uni-agree'
|
||||
// },
|
||||
about: {
|
||||
title: '关于App',
|
||||
url: '../../about/about'
|
||||
},
|
||||
login: {
|
||||
title: '切换登陆',
|
||||
url: '../../login/login'
|
||||
}
|
||||
},
|
||||
version: '',
|
||||
config: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
var configApp = getApp().globalData.config;
|
||||
//使用扩展运算符合并对象
|
||||
var _cfg = {
|
||||
...configApp,
|
||||
...config
|
||||
};
|
||||
this.config = _cfg;
|
||||
this.version = _cfg.version;
|
||||
},
|
||||
onShow() {
|
||||
this.userinfo = ctms.user.getInfo();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// #ifdef APP-PLUS
|
||||
save() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['保存图片到相册'],
|
||||
success: () => {
|
||||
plus.gallery.save(
|
||||
'https://public.hiluker.com/luker_fm2.png',
|
||||
function() {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
function() {
|
||||
uni.showToast({
|
||||
title: '保存失败，请重试！',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
share(e) {
|
||||
var msg = "运车助手"
|
||||
plus.share.sendWithSystem();
|
||||
uni.shareWithSystem({
|
||||
summary: "安邮车联运车平台，一个专门服务于汽车托运的系统，致力于推动轿运市场标准化、现代化发展。",
|
||||
href: "http://ctms.hiluker.cn",
|
||||
success() {
|
||||
// 分享完成，请注意此时不一定是成功分享
|
||||
},
|
||||
fail() {
|
||||
// 分享失败
|
||||
}
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
|
||||
go(e) {
|
||||
uni.navigateTo({
|
||||
url: e
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page,
|
||||
view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
page {
|
||||
min-height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.about {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 30rpx;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.qrcode .tip {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 30rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.code {
|
||||
color: #e96900;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.version {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
justify-content: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.source {
|
||||
margin-top: 30rpx;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.source-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.uni-list-cell-navigate {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
navigator {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.uni-navigator.uni-list-cell-navigate.uni-navigate-right:after {
|
||||
font-family: uniicons;
|
||||
content: '\e583';
|
||||
position: relative;
|
||||
right: 0.75rem;
|
||||
top: 50%;
|
||||
color: #bbb;
|
||||
transform: translateY(-50%);
|
||||
width: 15rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.uni-list .uni-list-cell:last-child::after {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.uni-list-cell::after {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0.9375rem;
|
||||
height: 1px;
|
||||
content: '';
|
||||
transform: scaleY(.5);
|
||||
background-color: #c8c7cc;
|
||||
}
|
||||
</style>
|
||||
203
pages/ctms/tabbar/mid/index.vue
Normal file
203
pages/ctms/tabbar/mid/index.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="content" :class="active">
|
||||
|
||||
</view>
|
||||
<view class="tabbar-box-wrap">
|
||||
<view class="tabbar-box">
|
||||
<view class="tabbar-box-item" @click="goToPage('order/create/create')">
|
||||
<image class="box-image" src="@/static/img/tabbar/more/edit.png" mode="aspectFit"></image>
|
||||
<text class="explain">在线下单</text>
|
||||
</view>
|
||||
|
||||
<view class="tabbar-box-item" @click="tel()">
|
||||
<image class="box-image" src="@/static/img/tabbar/more/qa.png" mode="aspectFit"></image>
|
||||
<text class="explain">电话沟通</text>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef APP -->
|
||||
<!-- <view class="tabbar-box-item" @click="scan">
|
||||
<image class="box-image" src="@/static/img/tabbar/more/scan.png" mode="aspectFit"></image>
|
||||
<text class="explain">扫码</text>
|
||||
</view> -->
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="tabbar-box-item" @click="goToPage('orderpre/create/create')">
|
||||
<image class="box-image" src="@/static/img/tabbar/more/search.png" mode="aspectFit"></image>
|
||||
<text class="explain">询问价格</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/ctms.config.js";
|
||||
import hi from '@/common/util.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: false
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
// setTimeout(() => {
|
||||
this.active = true;
|
||||
// }, 500);
|
||||
},
|
||||
onHide() {
|
||||
this.active = false;
|
||||
},
|
||||
methods: {
|
||||
goToPage(url) {
|
||||
if (!url) return;
|
||||
url = config.pageDir + url;
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
tel() {
|
||||
var phone = config.kfPhone;
|
||||
// hi.tel(phone);
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
},
|
||||
|
||||
//扫码
|
||||
scan() {
|
||||
var _that = this;
|
||||
uni.scanCode({
|
||||
scanType: ['barCode', 'qrCode'],
|
||||
success(res) {
|
||||
console.log('扫码结果', res);
|
||||
_that.scanRes(res);
|
||||
},
|
||||
fail() {
|
||||
uni.showToast({
|
||||
title: '扫码错误'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
//扫码结果处理
|
||||
scanRes(res) {
|
||||
var _r = res.result;
|
||||
//'https://u.wechat.com/ME4no24MU8DO0ark5TS5PEc' 微信个人二维码
|
||||
// https://w.url.cn/s/AKB4Eje?cak=GvVLZD6AkOhHn_usbiFQxQ 微信发票二维码
|
||||
// https://qr.4pyun.com/discount?token=5381321504173D00AD1866439E6A39D6 瑞都停车场优惠券二维码
|
||||
var _path = res.path; //二维码携带的路径
|
||||
///storage/emulated/0/Android/data/cn.hiluker.ctmsclient/apps/__UNI__B63B6BD/doc/uniapp_temp/compressed/1722789622562_mmexport1722789546405.jpg
|
||||
if (_r.substring(0, 4) === 'http') {
|
||||
console.log('应该跳转', _r)
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/webview/index?url=' + _r,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - var(--window-bottom) - var(--window-top));
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
height: 100vh;
|
||||
/* #endif */
|
||||
transition: opacity 0.3s;
|
||||
|
||||
background-image: url('@/static/logo.png');
|
||||
background-size: 30%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
opacity: 0.5;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 创建一个伪元素来覆盖整个元素，并设置透明度 */
|
||||
.content::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
/* 设置白色半透明遮罩 */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.tabbar-box-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 50upx;
|
||||
box-sizing: border-box;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.tabbar-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 15upx 20upx;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -16upx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
transform: rotate(45deg);
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 20upx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tabbar-box-item {
|
||||
// position: relative;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
margin: 10upx;
|
||||
color: $uni-color-subtitle;
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-base;
|
||||
|
||||
.box-image {
|
||||
width: 100%;
|
||||
height: $uni-img-size-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
pages/ctms/tabbar/notice/index.vue
Normal file
83
pages/ctms/tabbar/notice/index.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="!totalCount" class="content">
|
||||
暂时没有消息通知
|
||||
</view>
|
||||
|
||||
<uni-collapse v-else v-model="showIndexs">
|
||||
<uni-collapse-item :name='"notice-"+index' :title='"（"+(index+1)+"）"+notice.title'
|
||||
v-for="(notice,index) in notices" :data-nid="notice.id" :key="index" thumb="./static/logo.png">
|
||||
<uni-list>
|
||||
<uni-list-item :title="notice.content" :note="'更新于 : '+notice.updateTime"></uni-list-item>
|
||||
</uni-list>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
|
||||
<view class="pagination">
|
||||
<uni-pagination :show-icon="false" :total="totalCount" :pageSize='psize' v-model='page' title="分页栏"
|
||||
@change="newPage" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from "@/utils/common.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showIndexs: [],
|
||||
notices: {},
|
||||
totalCount: 0,
|
||||
psize: 10,
|
||||
page: 1
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.checkNotice()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.page = 1;
|
||||
this.checkNotice();
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 3000);
|
||||
},
|
||||
methods: {
|
||||
//刷新列表
|
||||
checkNotice() {
|
||||
var _that = this;
|
||||
ctms.notice.list(this.page, this.psize).then(
|
||||
function(res) {
|
||||
if (res) {
|
||||
_that.notices = res.notices;
|
||||
for (var index in res.notices) {
|
||||
if (res.notices[index]['is_show']) {
|
||||
_that.showIndexs.push('notice-' + index);
|
||||
}
|
||||
}
|
||||
_that.totalCount = res.total;
|
||||
} else {
|
||||
_that.orders = {}
|
||||
_that.totalCount = 0;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
//分页器动作
|
||||
newPage(e) {
|
||||
var page = e.current;
|
||||
this.page = page;
|
||||
this.checkNotice();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
text-align: center;
|
||||
height: 400upx;
|
||||
margin-top: 200upx;
|
||||
}
|
||||
</style>
|
||||
211
pages/ctms/tabbar/order/index.vue
Normal file
211
pages/ctms/tabbar/order/index.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="uni-common-mt uni-form">
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">车牌号:</view>
|
||||
<input class="uni-input" name="carno" v-model="search.carno"
|
||||
:placeholder="'车牌号或车架号,如 '+demoCarno" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">手机号:</view>
|
||||
<input class="uni-input" name="phone" readonly="readonly" disabled="disabled" :value="search.phone"
|
||||
type="text" placeholder="发车人或收车人的手机号" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item" v-if="false">
|
||||
<view class="title">运单号:</view>
|
||||
<input class="uni-input" name="ordersn" v-model="search.ordersn" type="text"
|
||||
placeholder="完整的运单号码" />
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item">
|
||||
<view class="help-block">
|
||||
如果搜索不出结果，可尝试检查一下搜索条件是否正确无误。
|
||||
</view>
|
||||
</view>
|
||||
<uni-notice-bar text="手机号为自动获取您登陆时使用的手机号，如果需要更换查询用的手机号，请退出账号并使用新手机号登陆."></uni-notice-bar>
|
||||
|
||||
<view class="uni-btn-v">
|
||||
<button class="btn btn-success" form-type="submit">查询</button>
|
||||
<button class="btn btn-error" type="default" @click="reset">重置</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/ctms.config.js";
|
||||
import store from '@/store/index.js';
|
||||
import utils from "@/utils/common.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
search: {
|
||||
carno: '',
|
||||
phone: '',
|
||||
ordersn: ''
|
||||
},
|
||||
demoCarno: config.demoCarno,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
checkLogin() {
|
||||
return ctms.user.checkLogin()
|
||||
},
|
||||
formSubmit: function(e) {
|
||||
var _that = this;
|
||||
// utils.debug('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
|
||||
//进行表单检查
|
||||
var formData = e.detail.value;
|
||||
|
||||
ctms.order.search(formData).then(
|
||||
function(res) {
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "查询完成!",
|
||||
icon: "success"
|
||||
});
|
||||
_that.goTo('order/list/list');
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "查询结束，没有数据!",
|
||||
icon: "success"
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
formReset: function(e) {
|
||||
// utils.debug('清空数据')
|
||||
},
|
||||
reset: function() {
|
||||
this.search = {};
|
||||
this.search.phone = this.userinfo.mobile;
|
||||
},
|
||||
goTo(page) {
|
||||
page = config.pageDir + page;
|
||||
uni.navigateTo({
|
||||
url: page
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
var user = ctms.user.getInfo();
|
||||
this.userinfo = user;
|
||||
this.search.phone = user.mobile;
|
||||
},
|
||||
onShow: function() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #e6e6e60e;
|
||||
}
|
||||
|
||||
radio,
|
||||
checkbox,
|
||||
switch {
|
||||
transform: scale(1.5);
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
margin-top: 66rpx;
|
||||
border-bottom: 1upx #333 dashed;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header>image {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.uni-form {
|
||||
width: 94%;
|
||||
margin: 0rpx 3% 0 3%;
|
||||
}
|
||||
|
||||
.uni-form-item {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
}
|
||||
|
||||
.uni-form-item .title,
|
||||
.uni-form-item .data {}
|
||||
|
||||
/**不生效**/
|
||||
.uni-form-item .title {
|
||||
width: 150rpx;
|
||||
padding: 40rpx 20rpx;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.uni-form .uni-btn-v {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 40rpx 30rpx;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #09BB07;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-error {
|
||||
background-color: #fc0107;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: block;
|
||||
/* width: 100%; */
|
||||
font-size: 1rem;
|
||||
height: 1rem;
|
||||
line-height: 1.5rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #666666;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
167
pages/index/index.vue
Normal file
167
pages/index/index.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<!-- 直接使用做好的开屏广告组件 -->
|
||||
<!-- <m-start-ad :list="kaipingAds" /> -->
|
||||
<view class="midTop">
|
||||
<uni-badge class="rbt uni-badge-right-margin" :text="leftSecond" type="info" size="normal" absolute="rightTop"
|
||||
:offset="[-3, -3]">
|
||||
<view class="box" @click="timeup"><text class="box-text">点击<br>跳过</text></view>
|
||||
</uni-badge>
|
||||
</view>
|
||||
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="500">
|
||||
<swiper-item v-for="item in kaipingAds">
|
||||
<view class="swiper-item">
|
||||
<image :src="item"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
import config from '@/app.config.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
second: 6,
|
||||
leftSecond: 0,
|
||||
kaipingAds: {
|
||||
0: "/static/img/kp/kp1.png"
|
||||
},
|
||||
ls: "splashShowed"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// leftSecond(val) {
|
||||
// if (val <= 0) {
|
||||
// this.timeup()
|
||||
// clearInterval(this.timer)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
// let splashShowed = uni.getStorageSync(this.ls);
|
||||
// if (splashShowed) {
|
||||
// return this.timeup();
|
||||
// }
|
||||
// if (this.hasTabbar) {
|
||||
// uni.hideTabBar()
|
||||
// }
|
||||
// const timer = setInterval(() => {
|
||||
// if (this.leftSecond == 0) {
|
||||
// clearInterval(this.timer)
|
||||
// this.leftSecond = this.second;
|
||||
// return this.timeup();
|
||||
// }
|
||||
// this.leftSecond--;
|
||||
// }, 1000);
|
||||
// this.timer = timer;
|
||||
},
|
||||
methods: {
|
||||
timeup() {
|
||||
//开屏倒计时结束，清除计时器
|
||||
this.leftSecond = 0;
|
||||
uni.setStorageSync(this.ls, true)
|
||||
clearTimeout(this.timer)
|
||||
var url = config.mainPage || "/pages/uni-starter/ucenter/ucenter"
|
||||
uni.reLaunch({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
getAds: function() {
|
||||
ctms.ads.splash().then((res) => {
|
||||
var _data = res;
|
||||
if (_data) {
|
||||
this.kaipingAds = _data;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
onLoad: function() {
|
||||
this.getAds();
|
||||
if (config.isDebug) {
|
||||
this.second = 60; //调试期间将时长设置为60秒
|
||||
}
|
||||
this.leftSecond = this.second;
|
||||
|
||||
let splashShowed = uni.getStorageSync(this.ls); //查看是否显示过开屏
|
||||
if (splashShowed) {
|
||||
return this.timeup();
|
||||
}
|
||||
if (this.hasTabbar) {
|
||||
uni.hideTabBar()
|
||||
}
|
||||
const timer = setInterval(() => {
|
||||
if (this.leftSecond == 0) {
|
||||
clearInterval(this.timer)
|
||||
this.leftSecond = this.second;
|
||||
return this.timeup();
|
||||
}
|
||||
this.leftSecond--;
|
||||
}, 1000);
|
||||
this.timer = timer;
|
||||
},
|
||||
onUnload() {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.midTop {
|
||||
position: fixed;
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
align-items: right;
|
||||
justify-content: center;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.midTop .rbt {
|
||||
position: fixed;
|
||||
right: 100rpx;
|
||||
top: 164rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #00000050;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.box-text {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*———swiper———*/
|
||||
.swiper {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 100vh;
|
||||
line-height: 10vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swiper-item>image {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.swiper-list {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
140
pages/uni-agree/uni-agree.nvue
Normal file
140
pages/uni-agree/uni-agree.nvue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view>
|
||||
<text class="title">个人信息保护指引</text>
|
||||
</view>
|
||||
<view class="text-item">
|
||||
<text class="tl">1.在浏览使用时，我们会收集、使用设备标识信息用于推荐。</text>
|
||||
</view>
|
||||
<view class="text-item">
|
||||
<text class="tl">2.我们可能会申请位置权限，用于演示 uni-app 的地图、定位能力。</text>
|
||||
</view>
|
||||
<view class="text-item">
|
||||
<text class="tl">3.你可以查看完整版</text>
|
||||
</view>
|
||||
<view class="text-item flex-r">
|
||||
<text class="tl hl" @click="openprotocol">《用户协议》</text>
|
||||
<text class="tl"> 和 </text>
|
||||
<text class="tl hl" @click="openPrivacyPolicy">《隐私政策》</text>
|
||||
</view>
|
||||
<view class="text-item">
|
||||
<text class="tl">以便了解我们收集、使用、共享、存储信息的情况，以及对信息的保护措施。</text>
|
||||
</view>
|
||||
<view class="text-item">
|
||||
<text class="service">如果你同意请点击下面的按钮以接受我们的服务</text>
|
||||
</view>
|
||||
<view class="text-item confirm">
|
||||
<button class="btn-privacy" type="primary" @click="agree">同意</button>
|
||||
<button class="btn-privacy btn-disagree" @click="disagree">暂不使用</button>
|
||||
</view>
|
||||
<view class="exit-area">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/app.config.js';
|
||||
const {
|
||||
about
|
||||
} = config
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onLoad() {
|
||||
this._canBack = false;
|
||||
},
|
||||
onBackPress() {
|
||||
return !this._canBack;
|
||||
},
|
||||
methods: {
|
||||
openprotocol(e) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/common/webview/index?url=" + about.agreements.serviceUrl
|
||||
})
|
||||
},
|
||||
openPrivacyPolicy(e) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/common/webview/index?url=" + about.agreements.privacyUrl
|
||||
})
|
||||
},
|
||||
agree(e) {
|
||||
uni.setStorageSync("userprotocol", 1);
|
||||
this._canBack = true;
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
animationDuration: 0
|
||||
});
|
||||
}, 100)
|
||||
},
|
||||
disagree() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.quit();
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
uni.showModal({
|
||||
content: '确定退出本应用？',
|
||||
cancelText: "退出",
|
||||
confirmText: "取消",
|
||||
success: (e) => {
|
||||
if (!e.confirm) {
|
||||
window.location.href = "about:blank";
|
||||
window.close();
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
padding: 80px 30px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.flex-r {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.text-item {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tl {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.hl {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.service {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
margin-top: 50px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.btn-privacy {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-disagree {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
11
pages/uni-agree/utils/uni-agree.js
Normal file
11
pages/uni-agree/utils/uni-agree.js
Normal file
@ -0,0 +1,11 @@
|
||||
export default function(){
|
||||
console.log(uni.getSystemInfoSync().platform)
|
||||
let userprotocol = uni.getStorageSync('userprotocol');
|
||||
console.log('userprotocol',userprotocol);
|
||||
if(!userprotocol){
|
||||
uni.navigateTo({
|
||||
url:'/pages/uni-agree/uni-agree',
|
||||
animationType:"none"
|
||||
})
|
||||
}
|
||||
}
|
||||
385
pages/uni-starter/list/detail.vue
Normal file
385
pages/uni-starter/list/detail.vue
Normal file
@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<view class="article">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<uni-nav-bar :statusBar="true" :border="false"></uni-nav-bar>
|
||||
<!-- #endif -->
|
||||
<view class="article-title">{{ title }}</view>
|
||||
<unicloud-db v-slot:default="{data, loading, error, options}" :options="formData"
|
||||
collection="uni-cms-articles,uni-id-users" :field="field" :getone="true" :where="where" :manual="true"
|
||||
ref="detail" foreignKey="uni-cms-articles.user_id" @load="loadData">
|
||||
<template v-if="!loading && data">
|
||||
<uni-list :border="false">
|
||||
<uni-list-item thumbSize="lg" :thumb="data.image">
|
||||
<!-- 通过body插槽定义作者信息内容 -->
|
||||
<template v-slot:body>
|
||||
<view class="header-content">
|
||||
<view class="uni-title">
|
||||
{{data.user_id && data.user_id[0] && data.user_id[0].nickname || '未知'}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<view class="footer">
|
||||
<view class="uni-note">更新于
|
||||
<uni-dateformat :date="data.last_modify_date" format="yyyy-MM-dd hh:mm"
|
||||
:threshold="[60000, 2592000000]" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
<view class="banner">
|
||||
<!-- 文章开头，缩略图 -->
|
||||
<image class="banner-img" :src="data.thumbnail" mode="widthFix"></image>
|
||||
<!-- 文章摘要 -->
|
||||
<view class="banner-title">
|
||||
<text class="uni-ellipsis">{{data.excerpt}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="article-content">
|
||||
<rich-text :nodes="data.content"></rich-text>
|
||||
</view>
|
||||
</template>
|
||||
</unicloud-db>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP
|
||||
import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
|
||||
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
|
||||
const uniShare = new UniShare()
|
||||
// #endif
|
||||
const db = uniCloud.database();
|
||||
const readNewsLog = db.collection('read-news-log')
|
||||
export default {
|
||||
// #ifdef APP
|
||||
components: {
|
||||
"uni-nav-bar": uniNavBar
|
||||
},
|
||||
onBackPress({
|
||||
from
|
||||
}) {
|
||||
if (from == 'backbutton') {
|
||||
if (uniShare.isShow) {
|
||||
this.$nextTick(function() {
|
||||
console.log(uniShare);
|
||||
uniShare.hide()
|
||||
})
|
||||
}
|
||||
return uniShare.isShow;
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
data() {
|
||||
return {
|
||||
// 当前显示 _id
|
||||
id: "",
|
||||
title: 'title',
|
||||
// 数据表名
|
||||
// 查询字段，多个字段用 , 分割
|
||||
field: 'user_id.nickname,user_id._id,avatar,excerpt,last_modify_date,comment_count,like_count,title,content',
|
||||
formData: {
|
||||
noData: '<p style="text-align:center;color:#666">详情加载中...</p>'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uniStarterConfig() {
|
||||
return getApp().globalData.config
|
||||
},
|
||||
where() {
|
||||
//拼接where条件 查询条件 ,更多详见 ：https://uniapp.dcloud.net.cn/uniCloud/unicloud-db?id=jsquery
|
||||
return `_id =="${this.id}"`
|
||||
}
|
||||
},
|
||||
onLoad(event) {
|
||||
//获取真实新闻id，通常 id 来自上一个页面
|
||||
if (event.id) {
|
||||
this.id = event.id
|
||||
}
|
||||
//若上一页传递了标题过来，则设置导航栏标题
|
||||
if (event.title) {
|
||||
this.title = event.title
|
||||
uni.setNavigationBarTitle({
|
||||
title: event.title
|
||||
})
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// 开始加载数据，修改 where 条件后才开始去加载 clinetDB 的数据 ，需要等组件渲染完毕后才开始执行 loadData，所以不能再 onLoad 中执行
|
||||
if (this.id) { // ID 不为空，则发起查询
|
||||
this.$refs.detail.loadData()
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: this.$t('listDetail.newsErr')
|
||||
})
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap(event) {
|
||||
if (event.type == 'share') {
|
||||
this.shareClick();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
$log(...args) {
|
||||
console.log('args', ...args, this.id)
|
||||
},
|
||||
setReadNewsLog() {
|
||||
let item = {
|
||||
"article_id": this.id,
|
||||
"last_time": Date.now()
|
||||
},
|
||||
readNewsLog = uni.getStorageSync('readNewsLog') || [],
|
||||
index = -1;
|
||||
readNewsLog.forEach(({
|
||||
article_id
|
||||
}, i) => {
|
||||
if (article_id == item.article_id) {
|
||||
index = i
|
||||
}
|
||||
})
|
||||
if (index === -1) {
|
||||
readNewsLog.push(item)
|
||||
} else {
|
||||
readNewsLog.splice(index, 1, item)
|
||||
}
|
||||
uni.setStorageSync('readNewsLog', readNewsLog)
|
||||
console.log(readNewsLog);
|
||||
},
|
||||
setFavorite() {
|
||||
if (uniCloud.getCurrentUserInfo().tokenExpired < Date.now()) {
|
||||
return console.log('未登录用户');
|
||||
}
|
||||
let article_id = this.id,
|
||||
last_time = Date.now();
|
||||
console.log({
|
||||
article_id,
|
||||
last_time
|
||||
});
|
||||
readNewsLog.where(`"article_id" == "${article_id}" && "user_id"==$env.uid`)
|
||||
.update({
|
||||
last_time
|
||||
})
|
||||
.then(({
|
||||
result: {
|
||||
updated
|
||||
}
|
||||
}) => {
|
||||
console.log('updated', updated);
|
||||
if (!updated) {
|
||||
readNewsLog.add({
|
||||
article_id
|
||||
}).then(e => {
|
||||
console.log(e);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
},
|
||||
loadData(data) {
|
||||
//如果上一页未传递标题过来（如搜索直达详情），则从新闻详情中读取标题
|
||||
if (this.title == '' && data[0].title) {
|
||||
this.title = data[0].title
|
||||
uni.setNavigationBarTitle({
|
||||
title: data[0].title
|
||||
});
|
||||
|
||||
}
|
||||
this.setReadNewsLog();
|
||||
},
|
||||
/**
|
||||
* followClick
|
||||
* 点击关注
|
||||
*/
|
||||
followClick() {
|
||||
uni.showToast({
|
||||
title: this.$t('listDetail.follow'),
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 分享该文章
|
||||
*/
|
||||
// #ifdef APP
|
||||
shareClick() {
|
||||
let {
|
||||
_id,
|
||||
title,
|
||||
excerpt,
|
||||
avatar
|
||||
} = this.$refs.detail.dataList
|
||||
console.log(JSON.stringify({
|
||||
_id,
|
||||
title,
|
||||
excerpt,
|
||||
avatar
|
||||
}));
|
||||
uniShare.show({
|
||||
content: { //公共的分享类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
|
||||
type: 0,
|
||||
href: this.uniStarterConfig.h5.url +
|
||||
`/#/pages/uni-starter/list/detail?id=${_id}&title=${title}`,
|
||||
title: this.title,
|
||||
summary: excerpt,
|
||||
imageUrl: avatar +
|
||||
'?x-oss-process=image/resize,m_fill,h_100,w_100' //压缩图片解决，在ios端分享图过大导致的图片失效问题
|
||||
},
|
||||
menus: [{
|
||||
"img": "/static/app-plus/sharemenu/wechatfriend.png",
|
||||
"text": this.$t('common.wechatFriends'),
|
||||
"share": {
|
||||
"provider": "weixin",
|
||||
"scene": "WXSceneSession"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/wechatmoments.png",
|
||||
"text": this.$t('common.wechatBbs'),
|
||||
"share": {
|
||||
"provider": "weixin",
|
||||
"scene": "WXSceneTimeline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/mp_weixin.png",
|
||||
"text": this.$t('common.wechatApplet'),
|
||||
"share": {
|
||||
provider: "weixin",
|
||||
scene: "WXSceneSession",
|
||||
type: 5,
|
||||
miniProgram: {
|
||||
id: this.uniStarterConfig.mp.weixin.id,
|
||||
path: `/pages/uni-starter/list/detail?id=${_id}&title=${title}`,
|
||||
webUrl: this.uniStarterConfig.h5.url +
|
||||
`/#/pages/uni-starter/list/detail?id=${_id}&title=${title}`,
|
||||
type: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/weibo.png",
|
||||
"text": this.$t('common.weibo'),
|
||||
"share": {
|
||||
"provider": "sinaweibo"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/qq.png",
|
||||
"text": "QQ",
|
||||
"share": {
|
||||
"provider": "qq"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/copyurl.png",
|
||||
"text": this.$t('common.copy'),
|
||||
"share": "copyurl"
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/more.png",
|
||||
"text": this.$t('common.more'),
|
||||
"share": "shareSystem"
|
||||
}
|
||||
],
|
||||
cancelText: this.$t('common.cancelShare'),
|
||||
}, e => { //callback
|
||||
console.log(e);
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.uni-title {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #3b4144;
|
||||
}
|
||||
|
||||
/* 描述 额外文本 */
|
||||
.uni-note {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
background-color: #ff5a5f;
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
margin: 0 15px;
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
padding: 0 15px;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uni-ellipsis {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
padding: 20px 15px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
padding: 15px;
|
||||
font-size: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
256
pages/uni-starter/list/list.nvue
Normal file
256
pages/uni-starter/list/list.nvue
Normal file
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="pages">
|
||||
<!-- #ifndef H5 -->
|
||||
<statusBar></statusBar>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 搜索功能 -->
|
||||
<view class="uni-search-box">
|
||||
<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled
|
||||
:placeholder="inputPlaceholder" />
|
||||
<view class="cover-search-bar" @click="searchClick"></view>
|
||||
</view>
|
||||
|
||||
<unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}" @error="onqueryerror"
|
||||
:collection="colList" :page-size="10">
|
||||
<!-- 基于 uni-list 的页面布局 field="user_id.nickname"-->
|
||||
<uni-list class="uni-list" :border="false" :style="{height:listHight}">
|
||||
|
||||
<!-- 作用于app端nvue页面的下拉加载 -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<refreshBox @refresh="refresh" :loading="loading"></refreshBox>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 列表渲染 -->
|
||||
<uni-list-item :to="'./detail?id='+item._id+'&title='+item.title" v-for="(item,index) in data"
|
||||
:key="index">
|
||||
<!-- 通过header插槽定义列表左侧图片 -->
|
||||
<template v-slot:header>
|
||||
<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
|
||||
</template>
|
||||
<!-- 通过body插槽定义布局 -->
|
||||
<template v-slot:body>
|
||||
<view class="main">
|
||||
<text class="title">{{item.title}}</text>
|
||||
<view class="info">
|
||||
<text class="author">{{item.user_id[0]?item.user_id[0].nickname:''}}</text>
|
||||
<uni-dateformat class="last_modify_date" :date="item.last_modify_date"
|
||||
format="yyyy-MM-dd" :threshold="[60000, 2592000000]" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<uni-list-item>
|
||||
<template v-slot:body>
|
||||
<!-- #endif -->
|
||||
<uni-load-state @networkResume="refresh" :state="{data,pagination,hasMore, loading, error}"
|
||||
@loadMore="loadMore">
|
||||
</uni-load-state>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
</template>
|
||||
</uni-list-item>
|
||||
<!-- #endif -->
|
||||
</uni-list>
|
||||
</unicloud-db>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let cdbRef;
|
||||
import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
|
||||
|
||||
import Gps from '@/uni_modules/json-gps/js_sdk/gps.js';
|
||||
const gps = new Gps();
|
||||
|
||||
const db = uniCloud.database();
|
||||
const articleDBName = 'opendb-news-articles';
|
||||
const userDBName = 'uni-id-users';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
statusBar,
|
||||
},
|
||||
computed: {
|
||||
// 根据当前语言返回不同的搜索框占位符
|
||||
inputPlaceholder(e) {
|
||||
if (uni.getStorageSync('CURRENT_LANG') == "en") {
|
||||
return 'Please enter the search content'
|
||||
} else {
|
||||
return '请输入搜索内容'
|
||||
}
|
||||
},
|
||||
// 连表查询，返回两个集合的查询结果
|
||||
colList() {
|
||||
return [
|
||||
db.collection(articleDBName).where(this.where).field('thumbnail,title,publish_date,user_id')
|
||||
.getTemp(), // 文章集合
|
||||
db.collection(userDBName).field('_id,nickname').getTemp() // 用户集合
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
where: '"article_status" == 1',
|
||||
keyword: "",
|
||||
showRefresh: false,
|
||||
listHight: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyword(keyword, oldValue) {
|
||||
let where = '"article_status" == 1 '
|
||||
if (keyword) {
|
||||
this.where = where + `&& /${keyword}/.test(title)`;
|
||||
} else {
|
||||
this.where = where;
|
||||
}
|
||||
}
|
||||
},
|
||||
async onReady() {
|
||||
// #ifdef APP-NVUE
|
||||
/* 可用窗口高度 - 搜索框高 - 状态栏高 */
|
||||
this.listHight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50 +
|
||||
'px';
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.listHight = 'auto'
|
||||
// #endif
|
||||
cdbRef = this.$refs.udb
|
||||
},
|
||||
async onShow() {
|
||||
this.keyword = getApp().globalData.searchText
|
||||
getApp().globalData.searchText = ''
|
||||
//这里仅演示如何，在onShow生命周期获取设备位置，并在设备或者应用没有权限时自动引导。设置完毕自动重新获取。
|
||||
//你可以基于他做自己的业务，比如：根据距离由近到远排序列表数据等
|
||||
// uni.showLoading({
|
||||
// title:"获取定位中"
|
||||
// });
|
||||
//默认h5端不获取定位
|
||||
// #ifndef H5
|
||||
let location = await gps.getLocation({
|
||||
geocode: true
|
||||
})
|
||||
// console.log(location);
|
||||
// #endif
|
||||
// if(location){
|
||||
// uni.showToast({
|
||||
// title: JSON.stringify(location),
|
||||
// icon: 'none'
|
||||
// });
|
||||
// }
|
||||
// uni.hideLoading()
|
||||
},
|
||||
methods: {
|
||||
searchClick(e) { //点击搜索框
|
||||
uni.hideKeyboard();
|
||||
uni.navigateTo({
|
||||
url: './search/search',
|
||||
animationType: 'fade-in'
|
||||
});
|
||||
},
|
||||
retry() {
|
||||
this.refresh()
|
||||
},
|
||||
refresh() {
|
||||
cdbRef.loadData({
|
||||
clear: true
|
||||
}, () => {
|
||||
uni.stopPullDownRefresh()
|
||||
// #ifdef APP-NVUE
|
||||
this.showRefresh = false
|
||||
// #endif
|
||||
console.log('end');
|
||||
})
|
||||
console.log('refresh');
|
||||
},
|
||||
loadMore() {
|
||||
cdbRef.loadMore()
|
||||
},
|
||||
onqueryerror(e) {
|
||||
console.error(e);
|
||||
},
|
||||
onpullingdown(e) {
|
||||
console.log(e);
|
||||
this.showRefresh = true
|
||||
if (e.pullingDistance > 100) {
|
||||
this.refresh()
|
||||
}
|
||||
}
|
||||
},
|
||||
// #ifndef APP-NVUE
|
||||
onPullDownRefresh() {
|
||||
this.refresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.loadMore()
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* #ifndef APP-NVUE */
|
||||
view {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.pages {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.main {
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.author,
|
||||
.last_modify_date {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.uni-search-box {
|
||||
background-color: #FFFFFF;
|
||||
position: sticky;
|
||||
height: 50px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* #ifndef APP-PLUS */
|
||||
z-index: 9;
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
width: 580rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.cover-search-bar {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
top: -50px;
|
||||
margin-bottom: -50px;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 999;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
505
pages/uni-starter/list/search/search.nvue
Normal file
505
pages/uni-starter/list/search/search.nvue
Normal file
@ -0,0 +1,505 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-container">
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-container-bar">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<uni-icons class="search-icons" :color="iconColor" size="22" type="mic-filled" @click="speech" />
|
||||
<!-- #endif -->
|
||||
<!-- :cancelText="keyBoardPopup ? '取消' : '搜索'" -->
|
||||
<uni-search-bar ref="searchBar" style="flex:1;" radius="100" v-model="searchText" :focus="focus" :placeholder="hotWorld"
|
||||
clearButton="auto" cancelButton="always" @clear="clear" @confirm="confirm" @cancel="cancel" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-body">
|
||||
<!-- 搜索历史 -->
|
||||
<view class="word-container" v-if="localSearchList.length">
|
||||
<view class="word-container_header">
|
||||
<text class="word-container_header-text">搜索历史</text>
|
||||
<uni-icons v-if="!localSearchListDel" @click="localSearchListDel = true" class="search-icons" style="padding-right: 0;"
|
||||
:color="iconColor" size="18" type="trash"></uni-icons>
|
||||
<view v-else class="flex-center flex-row" style="font-weight: 500;justify-content: space-between;">
|
||||
<text style="font-size: 22rpx;color: #666;padding-top:4rpx;padding-bottom:4rpx;padding-right:20rpx;" @click="LocalSearchListClear">全部删除</text>
|
||||
<text style="font-size: 22rpx;color: #c0402b;padding-top:4rpx;padding-bottom:4rpx;padding-left:20rpx;" @click="localSearchListDel = false">完成</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="word-container_body">
|
||||
<view class="flex-center flex-row word-container_body-text" v-for="(word,index) in localSearchList" :key="index"
|
||||
@click="LocalSearchlistItemClick(word,index)">
|
||||
<text class="word-display" :key="word">{{word}}</text>
|
||||
<uni-icons v-if="localSearchListDel" size="12" type="closeempty" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索发现 -->
|
||||
<view class="word-container">
|
||||
<view class="word-container_header">
|
||||
<view class="flex-center flex-row">
|
||||
<text class="word-container_header-text">搜索发现</text>
|
||||
<uni-icons v-if="!netHotListIsHide" class="search-icons" :color="iconColor" size="14" type="reload" @click="searchHotRefresh"></uni-icons>
|
||||
</view>
|
||||
<uni-icons class="search-icons" style="padding-right: 0;" :color="iconColor" size="18" :type="netHotListIsHide ? 'eye-slash' : 'eye'"
|
||||
@click="netHotListIsHide = !netHotListIsHide"></uni-icons>
|
||||
</view>
|
||||
|
||||
<unicloud-db ref="udb" #default="{data, loading, error, options}" field="content" collection="opendb-search-hot"
|
||||
orderby="create_date desc,count desc" page-data="replace" :page-size="10">
|
||||
<text v-if="loading && !netHotListIsHide" class="word-container_body-info">正在加载...</text>
|
||||
<view v-else class="word-container_body">
|
||||
<template v-if="!netHotListIsHide">
|
||||
<text v-if="error" class="word-container_body-info">{{error.message}}</text>
|
||||
<template v-else>
|
||||
<text v-for="(word,index) in data" class="word-container_body-text" :key="index" @click="search(word.content)">{{word.content}}</text>
|
||||
</template>
|
||||
</template>
|
||||
<view v-else style="flex:1;">
|
||||
<text class="word-container_body-info">当前搜索发现已隐藏</text>
|
||||
</view>
|
||||
</view>
|
||||
</unicloud-db>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索联想 -->
|
||||
<view class="search-associative" v-if="associativeShow">
|
||||
<uni-list>
|
||||
<uni-list-item v-for="(item,index) in associativeList" :key="item._id" :ellipsis="1" :title="item.name" @click="associativeClick(item)" show-extra-icon
|
||||
clickable :extra-icon="{size:18,color:iconColor,type:'search'}" >
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 云端一体搜索模板
|
||||
* @description uniCloud云端一体搜索模板，自带下拉候选、历史搜索、热搜。无需再开发服务器代码
|
||||
*/
|
||||
const searchLogDbName = 'opendb-search-log'; // 搜索记录数据库
|
||||
const mallGoodsDbName = 'opendb-news-articles'; // 文章数据库
|
||||
const associativeSearchField = 'title'; // 联想时，搜索框值检索数据库字段名
|
||||
const associativeField = '_id,title'; // 联想列表每一项携带的字段
|
||||
const localSearchListKey = '__local_search_history'; // 本地历史存储字段名
|
||||
|
||||
// 数组去重
|
||||
const arrUnique = arr => {
|
||||
for (let i = arr.length - 1; i >= 0; i--) {
|
||||
const curIndex = arr.indexOf(arr[i]);
|
||||
const lastIndex = arr.lastIndexOf(arr[i])
|
||||
curIndex != lastIndex && arr.splice(lastIndex, 1)
|
||||
}
|
||||
return arr
|
||||
} // 节流
|
||||
// 防抖
|
||||
function debounce(fn, interval, isFirstAutoRun) {
|
||||
/**
|
||||
*
|
||||
* @param {要执行的函数} fn
|
||||
* @param {在操作多长时间后可再执行，第一次立即执行} interval
|
||||
*/
|
||||
var _self = fn;
|
||||
var timer = null;
|
||||
var first = true;
|
||||
|
||||
if (isFirstAutoRun) {
|
||||
_self();
|
||||
}
|
||||
|
||||
return function() {
|
||||
var args = arguments;
|
||||
var _me = this;
|
||||
if (first) {
|
||||
first = false;
|
||||
_self.apply(_me, args);
|
||||
}
|
||||
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
// return false;
|
||||
}
|
||||
|
||||
timer = setTimeout(function() {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
_self.apply(_me, args);
|
||||
}, interval || 200);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mallGoodsDbName,
|
||||
searchLogDbName,
|
||||
statusBarHeight:'0px',
|
||||
localSearchList: uni.getStorageSync(localSearchListKey),
|
||||
localSearchListDel: false,
|
||||
netHotListIsHide: false,
|
||||
searchText: '',
|
||||
iconColor: '#999999',
|
||||
associativeList: [],
|
||||
keyBoardPopup: false,
|
||||
hotWorld: 'DCloud', // 搜索热词，如果没有输入即回车，则搜索热词，但是不会加入搜索记录
|
||||
focus: true, // 是否自动聚焦
|
||||
speechEngine: 'iFly' // 语音识别引擎 iFly 讯飞 baidu 百度
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.db = uniCloud.database();
|
||||
this.searchLogDb = this.db.collection(this.searchLogDbName);
|
||||
this.mallGoodsDb = this.db.collection(this.mallGoodsDbName);
|
||||
// #ifndef H5
|
||||
uni.onKeyboardHeightChange((res) => {
|
||||
this.keyBoardPopup = res.height !== 0;
|
||||
})
|
||||
// #endif
|
||||
|
||||
this.searchText = getApp().globalData.searchText;
|
||||
},
|
||||
computed: {
|
||||
associativeShow() {
|
||||
return this.searchText && this.associativeList.length;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
//#ifdef APP-PLUS
|
||||
this.statusBarHeight = `${uni.getSystemInfoSync().statusBarHeight}px`;
|
||||
//#endif
|
||||
},
|
||||
methods: {
|
||||
clear(res) {
|
||||
console.log("res: ", res);
|
||||
},
|
||||
confirm(res) {
|
||||
// 键盘确认
|
||||
this.search(res.value);
|
||||
},
|
||||
cancel(res) {
|
||||
uni.hideKeyboard();
|
||||
this.searchText = '';
|
||||
this.loadList();
|
||||
},
|
||||
search(value) {
|
||||
if (!value && !this.hotWorld) {
|
||||
return;
|
||||
}
|
||||
if (value) {
|
||||
if (this.searchText !== value) {
|
||||
this.searchText = value
|
||||
}
|
||||
|
||||
this.localSearchListManage(value);
|
||||
|
||||
this.searchLogDbAdd(value)
|
||||
} else if (this.hotWorld) {
|
||||
this.searchText = this.hotWorld
|
||||
}
|
||||
|
||||
uni.hideKeyboard();
|
||||
this.loadList(this.searchText);
|
||||
},
|
||||
localSearchListManage(word) {
|
||||
let list = uni.getStorageSync(localSearchListKey);
|
||||
if (list.length) {
|
||||
this.localSearchList.unshift(word);
|
||||
arrUnique(this.localSearchList);
|
||||
if (this.localSearchList.length > 10) {
|
||||
this.localSearchList.pop();
|
||||
}
|
||||
} else {
|
||||
this.localSearchList = [word];
|
||||
}
|
||||
uni.setStorageSync(localSearchListKey, this.localSearchList);
|
||||
},
|
||||
LocalSearchListClear() {
|
||||
uni.showModal({
|
||||
content: "确认清空搜索历史吗",
|
||||
confirmText: "删除",
|
||||
confirmColor: 'red',
|
||||
cancelColor: '#808080',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.localSearchListDel = false;
|
||||
this.localSearchList = [];
|
||||
uni.removeStorageSync(localSearchListKey)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
LocalSearchlistItemClick(word, index) {
|
||||
if (this.localSearchListDel) {
|
||||
this.localSearchList.splice(index, 1);
|
||||
uni.setStorageSync(localSearchListKey, this.localSearchList);
|
||||
if (!this.localSearchList.length) {
|
||||
this.localSearchListDel = false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.search(word);
|
||||
},
|
||||
searchHotRefresh() {
|
||||
this.$refs.udb.refresh();
|
||||
},
|
||||
speech() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.speech.startRecognize({
|
||||
engine: this.speechEngine,
|
||||
punctuation: false, // 标点符号
|
||||
timeout: 10000
|
||||
}, word => {
|
||||
word = word instanceof Array ? word[0] : word;
|
||||
this.search(word)
|
||||
}, err => {
|
||||
console.error("语音识别错误: ", err);
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
searchLogDbAdd(value) {
|
||||
/*
|
||||
在此处存搜索记录，如果登录则需要存 user_id，若未登录则存device_id
|
||||
*/
|
||||
this.getDeviceId().then(device_id => {
|
||||
this.searchLogDb.add({
|
||||
// user_id: device_id,
|
||||
device_id,
|
||||
content: value,
|
||||
create_date: Date.now()
|
||||
})
|
||||
})
|
||||
},
|
||||
getDeviceId() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const uniId = uni.getStorageSync('uni_id');
|
||||
if (!uniId) {
|
||||
// #ifdef APP-PLUS
|
||||
plus.device.getInfo({
|
||||
success: (deviceInfo) => {
|
||||
resolve(deviceInfo.uuid)
|
||||
},
|
||||
fail: () => {
|
||||
resolve(uni.getSystemInfoSync().system + '_' + Math.random().toString(36).substr(2))
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
resolve(uni.getSystemInfoSync().system + '_' + Math.random().toString(36).substr(2))
|
||||
// #endif
|
||||
} else {
|
||||
resolve(uniId)
|
||||
}
|
||||
})
|
||||
},
|
||||
associativeClick(item) {
|
||||
/**
|
||||
* 注意：这里用户根据自己的业务需要，选择跳转的页面即可
|
||||
*/
|
||||
console.log("associativeClick: ", item);
|
||||
this.loadList(item.title);
|
||||
},
|
||||
loadList(text = '') {
|
||||
getApp().globalData.searchText = text;
|
||||
uni.switchTab({
|
||||
url:'/pages/list/list'
|
||||
})
|
||||
},
|
||||
backPage(){
|
||||
uni.navigateBack();
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
searchText: debounce(function(value) {
|
||||
if (value) {
|
||||
this.mallGoodsDb.where({
|
||||
[associativeSearchField]: new RegExp(value, 'gi'),
|
||||
}).field(associativeField).get().then(res => {
|
||||
this.associativeList = res.result.data;
|
||||
})
|
||||
} else {
|
||||
this.associativeList.length = 0;
|
||||
getApp().globalData.searchText = '';
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$search-bar-height:52px;
|
||||
$word-container_header-height:72rpx;
|
||||
.status-bar{
|
||||
background-color: #fff;
|
||||
}
|
||||
.container {
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.search-body {
|
||||
background-color: #fff;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
|
||||
@mixin uni-flex {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
@mixin words-display {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
@include uni-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
@include uni-flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
/* #ifndef APP-NVUE || VUE3*/
|
||||
::v-deep
|
||||
/* #endif */
|
||||
.uni-searchbar {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE || VUE3*/
|
||||
::v-deep
|
||||
/* #endif */
|
||||
.uni-searchbar__box {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE || VUE3 */
|
||||
::v-deep
|
||||
/* #endif */
|
||||
.uni-input-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
height: $search-bar-height;
|
||||
@include uni-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
|
||||
@at-root {
|
||||
#{&}-bar {
|
||||
@include uni-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-associative {
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow-y: auto;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
top: $search-bar-height;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
margin-top: 10rpx;
|
||||
padding-left: 10rpx;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
.search-icons {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.word-display {
|
||||
@include words-display;
|
||||
}
|
||||
|
||||
.word-container {
|
||||
padding: 20rpx;
|
||||
|
||||
@at-root {
|
||||
#{&}_header {
|
||||
@include uni-flex;
|
||||
height: $word-container_header-height;
|
||||
line-height: $word-container_header-height;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@at-root {
|
||||
#{&}-text {
|
||||
color: #3e3e3e;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{&}_body {
|
||||
@include uni-flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
|
||||
@at-root {
|
||||
#{&}-text {
|
||||
@include uni-flex;
|
||||
@include words-display;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f6f6f6;
|
||||
padding: 10rpx 20rpx;
|
||||
margin: 20rpx 30rpx 0 0;
|
||||
border-radius: 30rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#{&}-info {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #808080;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
223
pages/uni-starter/news/detail/detail.uvue
Normal file
223
pages/uni-starter/news/detail/detail.uvue
Normal file
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<scroll-view :scroll-y="true" v-if="!loading">
|
||||
<view class="meta">
|
||||
<view class="title">
|
||||
<text class="text">{{ articleDetail.title }}</text>
|
||||
</view>
|
||||
<view class="excerpt">
|
||||
<text class="text">{{ articleDetail.excerpt }}</text>
|
||||
</view>
|
||||
<view class="author">
|
||||
<template v-if="articleDetail.user_id != null">
|
||||
<text class="at">{{ articleDetail.user_id?.nickname ?? '' }}</text>
|
||||
<text class="split">·</text>
|
||||
</template>
|
||||
<text class="date">{{ publishTime(articleDetail.publish_date as number) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content" v-if="articleDetail.content != null">
|
||||
<template v-for="(block, index) in articleDetail.content" :key="index">
|
||||
<view v-if="block.type == 'mediaVideo'">
|
||||
<video
|
||||
style="width: 300px; height: 200px; margin: 0 auto 20px;"
|
||||
:src="(block.data as UTSJSONObject).getJSON('attributes')!.getString('src')!"
|
||||
:poster="(block.data as UTSJSONObject).getJSON('attributes')!.getString('poster')!"
|
||||
></video>
|
||||
</view>
|
||||
<view v-if="block.type == 'divider'" class="divider"></view>
|
||||
<view v-if="block.type == 'unlockContent'" class="unlock-content">
|
||||
<button @click="unlockContent">请观看广告后解锁全文</button>
|
||||
</view>
|
||||
<rich-text v-if="block.type == 'rich-text'" :selectable="false" :nodes="block.data" @itemclick="richTextItemClick"></rich-text>
|
||||
<render-image-component v-if="block.type == 'image'" :deltaOp="block.data" @image-preview="onImagePreview"></render-image-component>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time";
|
||||
import RenderImageComponent from '@/uni_modules/uni-cms-article/components/render-article-detail/image.uvue'
|
||||
|
||||
type Author = {
|
||||
_id: string
|
||||
nickname: string
|
||||
}
|
||||
type Content = {
|
||||
type: string
|
||||
data: any
|
||||
}
|
||||
type Article = {
|
||||
_id: string | null
|
||||
title: string | null
|
||||
content: Content[] | null
|
||||
excerpt: string | null
|
||||
publish_date: number | null
|
||||
user_id: Author | null
|
||||
thumbnail: string[] | null
|
||||
content_images: string[] | null
|
||||
}
|
||||
|
||||
const db = uniCloud.databaseForJQL()
|
||||
const articleDBName = 'uni-cms-articles'
|
||||
const userDBName = 'uni-id-users'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
RenderImageComponent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
id: "", // 文章ID
|
||||
title: "", // 文章标题
|
||||
articleDetail: {} as Article, // 文章详情
|
||||
// 广告相关配置
|
||||
adpId: "", // TODO: 请填写广告位ID
|
||||
watchAdUniqueType: "device" // TODO: 观看广告的唯一标识类型，可选值为 user 或者 device，user 表示用户唯一，device 表示设备唯一
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
where(): string {
|
||||
//拼接where条件 查询条件 ,更多详见 ：https://uniapp.dcloud.net.cn/uniCloud/unicloud-db?id=jsquery
|
||||
return `_id =="${this.id}"`
|
||||
},
|
||||
collection(): any[] {
|
||||
return [
|
||||
db.collection(articleDBName).where(this.where).field('user_id,thumbnail,excerpt,publish_date,title,content').getTemp(),
|
||||
db.collection(userDBName).field('_id, nickname').getTemp()
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad(event: OnLoadOptions) {
|
||||
if (event.has('id')) {
|
||||
this.id = event.get('id') as string
|
||||
this.load()
|
||||
}
|
||||
|
||||
if (event.has('title')) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: event.get('title') as string
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async load (): Promise<void> {
|
||||
uni.showLoading({
|
||||
title: "加载中..."
|
||||
})
|
||||
const articledb = db.collection(articleDBName).where(this.where).field('user_id,thumbnail,excerpt,publish_date,title,content').getTemp()
|
||||
const userdb = db.collection(userDBName).field('_id, nickname').getTemp()
|
||||
const res = await db.collection(articledb, userdb).get()
|
||||
|
||||
this.loadData(res.data)
|
||||
this.loading = false
|
||||
uni.hideLoading()
|
||||
},
|
||||
// 格式化发布时间
|
||||
publishTime(timestamp: number): string {
|
||||
return translatePublishTime(timestamp)
|
||||
},
|
||||
loadData(data: UTSJSONObject[]) {
|
||||
if (data.length <= 0) return
|
||||
const detail = data[0]
|
||||
|
||||
const user_id = detail.getArray<Author>('user_id')!;
|
||||
|
||||
this.articleDetail = {
|
||||
title: detail.getString('title'),
|
||||
content: detail.getArray<Content>('content'),
|
||||
excerpt: detail.getString('excerpt'),
|
||||
publish_date: detail.getNumber('publish_date'),
|
||||
thumbnail: detail.getArray<string>('thumbnail'),
|
||||
user_id: user_id.length > 0 ? user_id[0]: null,
|
||||
content_images: detail.getArray<string>('content_images')
|
||||
} as Article
|
||||
|
||||
this.title = detail.getString('title')!
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.title
|
||||
})
|
||||
},
|
||||
unlockContent () {
|
||||
uni.showModal({
|
||||
content: 'uni-app-x 暂不支持观看广告解锁全文',
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
richTextItemClick (e: RichTextItemClickEvent) {
|
||||
if (e.detail.href != null) {
|
||||
uni.navigateTo({
|
||||
url: `/uni_modules/uni-cms-article/pages/webview/webview?url=${encodeURIComponent(e.detail.href as string)}`
|
||||
})
|
||||
}
|
||||
},
|
||||
onImagePreview (url: string) {
|
||||
const contentImages = this.articleDetail.content_images != null ? this.articleDetail.content_images: [] as string[]
|
||||
|
||||
uni.previewImage({
|
||||
current: url, // 当前显示图片的http链接
|
||||
urls: contentImages as string[] // 需要预览的图片http链接列表
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.meta {
|
||||
padding: 20rpx 30rpx 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.title {
|
||||
.text {
|
||||
font-size: 40rpx;
|
||||
line-height: 66rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
margin-top: 10rpx;
|
||||
|
||||
.text {
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.at,
|
||||
.split,
|
||||
.date {
|
||||
font-size: 26rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.split {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin-top: 40rpx;
|
||||
padding: 0 30rpx 80rpx;
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
217
pages/uni-starter/news/detail/detail.vue
Normal file
217
pages/uni-starter/news/detail/detail.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<unicloud-db v-slot:default="{data, loading, error, options}" :collection="collection" :options="formData"
|
||||
:getone="true" :where="where" :manual="true" ref="detail" foreignKey="uni-cms-articles.user_id"
|
||||
@load="loadData"
|
||||
class="article">
|
||||
<template v-if="!loading && data">
|
||||
<view class="meta">
|
||||
<view class="title">
|
||||
<text class="text">{{ data.title }}</text>
|
||||
</view>
|
||||
<view class="excerpt">
|
||||
<text class="text">{{ data.excerpt }}</text>
|
||||
</view>
|
||||
<view class="author">
|
||||
<template v-if="data.user_id[0]">
|
||||
<text class="at">{{ data.user_id[0].nickname || '' }}</text>
|
||||
<text class="split">·</text>
|
||||
</template>
|
||||
<text class="date">{{ publishTime(data.publish_date) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<render-article-detail
|
||||
:content="data.content"
|
||||
:content-images="data.content_images"
|
||||
:ad-config="{ adpId, watchAdUniqueType }"
|
||||
></render-article-detail>
|
||||
</template>
|
||||
<view class="detail-loading" v-else>
|
||||
<uni-icons type="spinner-cycle" size="35px"/>
|
||||
</view>
|
||||
</unicloud-db>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
|
||||
import renderArticleDetail from "@/uni_modules/uni-cms-article/components/render-article-detail/index.vue";
|
||||
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time";
|
||||
|
||||
const db = uniCloud.database()
|
||||
const articleDBName = 'uni-cms-articles'
|
||||
const userDBName = 'uni-id-users'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniNavBar,
|
||||
renderArticleDetail
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: "", // 文章ID
|
||||
title: "", // 文章标题
|
||||
formData: {}, // 表单数据
|
||||
|
||||
// 广告相关配置
|
||||
adpId: "", // TODO: 请填写广告位ID
|
||||
watchAdUniqueType: "device" // TODO: 观看广告的唯一标识类型，可选值为 user 或者 device，user 表示用户唯一，device 表示设备唯一
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
where() {
|
||||
//拼接where条件 查询条件 ,更多详见 ：https://uniapp.dcloud.net.cn/uniCloud/unicloud-db?id=jsquery
|
||||
return `_id =="${this.id}"`
|
||||
},
|
||||
collection() {
|
||||
return [
|
||||
db.collection(articleDBName).where(this.where).field('user_id,thumbnail,excerpt,publish_date,title,content').getTemp(),
|
||||
db.collection(userDBName).field('_id, nickname').getTemp()
|
||||
]
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// 开始加载数据，修改 where 条件后才开始去加载 clinetDB 的数据 ，需要等组件渲染完毕后才开始执行 loadData，所以不能再 onLoad 中执行
|
||||
if (this.id) { // ID 不为空，则发起查询
|
||||
this.$refs.detail.loadData()
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: 'id 不能为空'
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(event) {
|
||||
//获取文章id，通常 id 来自上一个页面
|
||||
if (event.id) {
|
||||
this.id = event.id
|
||||
}
|
||||
|
||||
// 监听解锁内容事件
|
||||
uni.$on('onUnlockContent', this.onUnlockContent)
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时，移除监听事件
|
||||
uni.$off('onUnlockContent', this.onUnlockContent)
|
||||
},
|
||||
onPageScroll(e) {
|
||||
// 根据滚动位置判断是否显示导航栏
|
||||
if (e.scrollTop > 100) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.title
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: ''
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 将时间戳转换为可读的时间格式
|
||||
publishTime(timestamp) {
|
||||
return translatePublishTime(timestamp)
|
||||
},
|
||||
// 将文章加入阅读历史
|
||||
setReadHistory() {
|
||||
// 获取阅读历史缓存，如果不存在则为空数组
|
||||
const historyCache = uni.getStorageSync('readHistory') || []
|
||||
// 过滤掉当前文章的阅读历史
|
||||
const readHistory = historyCache.filter(item => item.article_id !== this.id)
|
||||
// 将当前文章的阅读历史添加到数组最前面
|
||||
readHistory.unshift({
|
||||
article_id: this.id,
|
||||
last_time: Date.now()
|
||||
})
|
||||
// 将更新后的阅读历史缓存到本地
|
||||
uni.setStorageSync('readHistory', readHistory)
|
||||
|
||||
},
|
||||
// 加载数据
|
||||
loadData(data) {
|
||||
// 设置文章标题
|
||||
this.title = data.title
|
||||
|
||||
// 将文章添加进阅读历史
|
||||
this.setReadHistory()
|
||||
},
|
||||
// 监听解锁内容事件，解锁内容后重新加载数据
|
||||
async onUnlockContent() {
|
||||
this.$refs.detail.loadData()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* #ifdef APP-NVUE */
|
||||
.article {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
@mixin cp {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.detail-loading {
|
||||
margin: 100rpx auto 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
animation: rotate360 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate360 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
@include cp;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-top: 20rpx;
|
||||
.title {
|
||||
.text {
|
||||
font-size: 40rpx;
|
||||
line-height: 66rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
margin-top: 10rpx;
|
||||
.text {
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.at,
|
||||
.split,
|
||||
.date {
|
||||
font-size: 26rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.split {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
255
pages/uni-starter/news/detail/preview.vue
Normal file
255
pages/uni-starter/news/detail/preview.vue
Normal file
@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<unicloud-db v-slot:default="{loading, error, options}" :collection="collection" :options="formData"
|
||||
:getone="true" :where="where" :manual="true" ref="detail" foreignKey="uni-cms-articles.user_id"
|
||||
@load="loadData"
|
||||
class="article">
|
||||
<template v-if="!loading && articleData">
|
||||
<view class="preview-tip">此页面仅用于临时预览文章，链接将会在短期内失效。</view>
|
||||
<view class="meta">
|
||||
<view class="title">
|
||||
<text class="text">{{ articleData.title }}</text>
|
||||
</view>
|
||||
<view class="excerpt">
|
||||
<text class="text">{{ articleData.excerpt }}</text>
|
||||
</view>
|
||||
<view class="author">
|
||||
<template v-if="articleData.user_id && articleData.user_id[0]">
|
||||
<text class="at">{{ articleData.user_id[0].nickname || '' }}</text>
|
||||
<text class="split">·</text>
|
||||
</template>
|
||||
<text class="date">{{ publishTime(articleData.publish_date) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<render-article-detail
|
||||
:content="articleData.content"
|
||||
:content-images="articleData.content_images"
|
||||
:ad-config="{ adpId, watchAdUniqueType }"
|
||||
></render-article-detail>
|
||||
</template>
|
||||
<view class="detail-loading" v-else>
|
||||
<uni-icons type="spinner-cycle" size="35px"/>
|
||||
</view>
|
||||
</unicloud-db>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
|
||||
import renderArticleDetail from "@/uni_modules/uni-cms-article/components/render-article-detail/index.vue";
|
||||
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time";
|
||||
|
||||
const db = uniCloud.database()
|
||||
const articleDBName = 'uni-cms-articles'
|
||||
const userDBName = 'uni-id-users'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniNavBar,
|
||||
renderArticleDetail
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: "", // 文章ID
|
||||
title: "", // 文章标题
|
||||
secret: "", // 文章预览密钥
|
||||
formData: {}, // 表单数据
|
||||
articleData: null, // 文章数据
|
||||
|
||||
// 广告相关配置
|
||||
adpId: "", // TODO: 请填写广告位ID
|
||||
watchAdUniqueType: "device" // TODO: 观看广告的唯一标识类型，可选值为 user 或者 device，user 表示用户唯一，device 表示设备唯一
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
where() {
|
||||
//拼接where条件 查询条件 ,更多详见 ：https://uniapp.dcloud.net.cn/uniCloud/unicloud-db?id=jsquery
|
||||
return `_id =="${this.id}" && preview_secret =="${this.secret}"`
|
||||
},
|
||||
collection() {
|
||||
return [
|
||||
db.collection(articleDBName).where(this.where).field('user_id,thumbnail,excerpt,publish_date,title,content,preview_secret,preview_expired,article_status').getTemp(),
|
||||
db.collection(userDBName).field('_id, nickname').getTemp()
|
||||
]
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// 开始加载数据，修改 where 条件后才开始去加载 clinetDB 的数据 ，需要等组件渲染完毕后才开始执行 loadData，所以不能再 onLoad 中执行
|
||||
if (this.id) { // ID 不为空，则发起查询
|
||||
this.$refs.detail.loadData()
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: 'id 不能为空'
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(event) {
|
||||
//获取文章id，通常 id 来自上一个页面
|
||||
if (event.id) {
|
||||
this.id = event.id
|
||||
this.secret = event.secret
|
||||
}
|
||||
|
||||
// 监听解锁内容事件
|
||||
uni.$on('onUnlockContent', this.onUnlockContent)
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时，移除监听事件
|
||||
uni.$off('onUnlockContent', this.onUnlockContent)
|
||||
},
|
||||
onPageScroll(e) {
|
||||
// 根据滚动位置判断是否显示导航栏
|
||||
if (e.scrollTop > 100) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.title
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: ''
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 将时间戳转换为可读的时间格式
|
||||
publishTime(timestamp) {
|
||||
return translatePublishTime(timestamp)
|
||||
},
|
||||
// 加载数据
|
||||
loadData(data) {
|
||||
if (!data) {
|
||||
return uni.showModal({
|
||||
content: "文章不存在/预览密钥不存在",
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
// #ifdef H5
|
||||
window.close()
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
uni.navigateBack()
|
||||
// #endif
|
||||
}
|
||||
})
|
||||
}
|
||||
// 文章已发布，跳转到文章详情页
|
||||
if (data.article_status === 1) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '文章已发布'
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: `/uni_modules/uni-cms-article/pages/detail/detail?id=${this.id}`
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 预览已过期，提示用户
|
||||
if (data.preview_expired < Date.now()) {
|
||||
return uni.showModal({
|
||||
content: "预览已失效",
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
// #ifdef H5
|
||||
window.close()
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
uni.navigateBack()
|
||||
// #endif
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 设置文章标题
|
||||
this.title = data.title
|
||||
this.articleData = data
|
||||
},
|
||||
// 监听解锁内容事件，解锁内容后重新加载数据
|
||||
async onUnlockContent() {
|
||||
this.$refs.detail.loadData()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* #ifdef APP-NVUE */
|
||||
.article {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
@mixin cp {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.detail-loading {
|
||||
margin: 100rpx auto 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
animation: rotate360 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate360 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
@include cp;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-top: 20rpx;
|
||||
.title {
|
||||
.text {
|
||||
font-size: 40rpx;
|
||||
line-height: 66rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
margin-top: 10rpx;
|
||||
.text {
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.at,
|
||||
.split,
|
||||
.date {
|
||||
font-size: 26rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.split {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-tip {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
background: #fcd791;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
295
pages/uni-starter/news/list/list.nvue
Normal file
295
pages/uni-starter/news/list/list.nvue
Normal file
@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<view class="pages">
|
||||
<view class="placeholder-bar">
|
||||
<statusBar></statusBar>
|
||||
<view :style="{ height: `${navBarHeight}px` }"></view>
|
||||
</view>
|
||||
|
||||
<view class="nav-box">
|
||||
<!-- #ifndef H5 -->
|
||||
<statusBar></statusBar>
|
||||
<!-- #endif -->
|
||||
<view class="nav" :style="{ height: `${navBarHeight}px` }">
|
||||
<!-- #ifdef MP -->
|
||||
<view class="mp-button-left-placeholder" :style="{ width: `${mpButtonLeftPlaceholderSize}px` }"></view>
|
||||
<!-- #endif -->
|
||||
<!-- 搜索功能 -->
|
||||
<view class="uni-search-box">
|
||||
<uni-search-bar ref="searchBar" radius="100" cancelButton="none" disabled
|
||||
:placeholder="inputPlaceholder" />
|
||||
<view class="cover-search-bar" @click="searchClick"></view>
|
||||
</view>
|
||||
<!-- #ifdef MP -->
|
||||
<view class="mp-button-placeholder" :style="{ width: `${mpButtonPlaceholderSize}px` }"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<unicloud-db ref='udb' v-slot:default="{ pagination, hasMore, loading, error, options }" @error="onqueryerror"
|
||||
:collection="colList" :page-size="10" orderby="publish_date desc" @load="listLoad">
|
||||
<!-- 基于 uni-list 的页面布局 field="user_id.nickname"-->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<list class="uni-list" :border="false" :style="{ height: listHeight }">
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<scroll-view scroll-y class="uni-list" refresher-enabled :refresher-triggered="loadType=== 'refresh'"
|
||||
:style="{ height: listHeight }" @refresherrefresh="refresh" @scrolltolower="loadMore">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<refresh-box :loading="loading" @refresh="refresh"></refresh-box>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 列表渲染 -->
|
||||
<template v-for="item in listData">
|
||||
<not-cover v-if="item.thumbnail && item.thumbnail.length === 0" :data="item"></not-cover>
|
||||
<right-small-cover v-else-if="item.thumbnail && item.thumbnail.length === 1"
|
||||
:data="item"></right-small-cover>
|
||||
<three-cover v-else-if="item.thumbnail && item.thumbnail.length === 3"
|
||||
:data="item"></three-cover>
|
||||
</template>
|
||||
|
||||
<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<uni-list-item>
|
||||
<template v-slot:body>
|
||||
<!-- #endif -->
|
||||
<uni-load-state @networkResume="refresh"
|
||||
:state="{ data: listData, pagination, hasMore, loading, error }" @loadMore="loadMore">
|
||||
</uni-load-state>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
</template>
|
||||
</uni-list-item>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
</scroll-view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
</list>
|
||||
<!-- #endif -->
|
||||
</unicloud-db>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
|
||||
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time";
|
||||
import refreshBox from "@/uni_modules/uni-cms-article/components/refresh-box/refreshBox.nvue";
|
||||
|
||||
import notCover from "@/uni_modules/uni-cms-article/components/list-template/not-cover.vue";
|
||||
import rightSmallCover from "@/uni_modules/uni-cms-article/components/list-template/right-small-cover.vue";
|
||||
import threeCover from "@/uni_modules/uni-cms-article/components/list-template/three-cover.vue";
|
||||
import {
|
||||
parseImageUrl
|
||||
} from "@/uni_modules/uni-cms-article/common/parse-image-url";
|
||||
|
||||
const db = uniCloud.database();
|
||||
const articleDBName = 'uni-cms-articles'
|
||||
const userDBName = 'uni-id-users'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
statusBar,
|
||||
refreshBox,
|
||||
notCover,
|
||||
rightSmallCover,
|
||||
threeCover
|
||||
},
|
||||
computed: {
|
||||
// 根据当前语言返回不同的搜索框占位符
|
||||
inputPlaceholder(e) {
|
||||
if (uni.getStorageSync('CURRENT_LANG') == "en") {
|
||||
return 'Please enter the search content' // 英文
|
||||
} else {
|
||||
return '请输入搜索内容' // 中文
|
||||
}
|
||||
},
|
||||
// 连表查询，返回两个集合的查询结果
|
||||
colList() {
|
||||
return [
|
||||
db.collection(articleDBName).where(this.where).field('thumbnail,title,publish_date,user_id')
|
||||
.getTemp(), // 文章集合
|
||||
db.collection(userDBName).field('_id,nickname').getTemp() // 用户集合
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
where: '"article_status" == 1', // 查询条件
|
||||
showRefresh: false, // 是否显示刷新按钮
|
||||
listHeight: 0, // 列表高度
|
||||
mpButtonLeftPlaceholderSize: 0, // 小程序左侧icon占位大小
|
||||
mpButtonPlaceholderSize: 87, // 小程序导航栏按钮占位大小
|
||||
navBarHeight: 44, // 导航栏高度
|
||||
refreshStatus: 0, // 刷新状态 0: 未刷新 1: 刷新中 2: 刷新完成
|
||||
listData: [], // 列表数据
|
||||
loadType: null
|
||||
}
|
||||
},
|
||||
async onReady() {
|
||||
// #ifdef MP
|
||||
this.initNavBarSize() // 初始化导航栏大小
|
||||
// #endif
|
||||
/* 可用窗口高度 - 搜索框高 - 状态栏高 */
|
||||
this.listHeight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - this
|
||||
.navBarHeight + 'px'; // 计算列表高度
|
||||
},
|
||||
methods: {
|
||||
async listLoad(data) {
|
||||
const listData = data.map(item => {
|
||||
if (typeof item.thumbnail === 'string') {
|
||||
item.thumbnail = [item.thumbnail]
|
||||
}
|
||||
|
||||
return item
|
||||
})
|
||||
|
||||
// 处理腾讯云文件链接
|
||||
for (const article of listData) {
|
||||
const parseImages = await parseImageUrl(article.thumbnail)
|
||||
|
||||
article.thumbnail = parseImages ? parseImages.map(image => image.src) : []
|
||||
}
|
||||
|
||||
this.listData = this.loadType === 'loadMore' ? this.listData.concat(listData) : listData
|
||||
this.loadType = null
|
||||
},
|
||||
// 初始化导航栏大小
|
||||
initNavBarSize() {
|
||||
// 获取小程序导航栏按钮信息
|
||||
// #ifdef MP-TOUTIAO
|
||||
let menuButtonInfo = tt.getCustomButtonBoundingClientRect()
|
||||
menuButtonInfo.width = menuButtonInfo.capsule.width // 小程序按钮区域中使用的按钮宽度
|
||||
this.mpButtonLeftPlaceholderSize = menuButtonInfo.leftIcon.width + 10
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
// #endif
|
||||
// 计算小程序导航栏按钮占位大小
|
||||
this.mpButtonPlaceholderSize = menuButtonInfo.width + 10
|
||||
// 获取系统信息，判断是否为 iOS 系统，设置导航栏高度
|
||||
this.navBarHeight = uni.getSystemInfoSync().system.toLowerCase().includes('ios') ? 44 : 48
|
||||
},
|
||||
// 格式化时间戳
|
||||
publishTime(timestamp) {
|
||||
return translatePublishTime(timestamp)
|
||||
},
|
||||
// 点击搜索框
|
||||
searchClick(e) {
|
||||
uni.hideKeyboard();
|
||||
uni.navigateTo({
|
||||
url: '../search/search'
|
||||
});
|
||||
},
|
||||
// 重试
|
||||
retry() {
|
||||
this.refresh()
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
this.loadType = 'refresh'
|
||||
this.$refs.udb.loadData({
|
||||
clear: true
|
||||
}, () => {
|
||||
uni.stopPullDownRefresh()
|
||||
// #ifdef APP-NVUE
|
||||
this.showRefresh = false
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
// 加载更多
|
||||
loadMore() {
|
||||
this.loadType = 'loadMore'
|
||||
this.$refs.udb.loadMore()
|
||||
},
|
||||
// 查询出错
|
||||
onqueryerror(e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
// #ifdef H5
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.refresh()
|
||||
},
|
||||
// #endif
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* #ifndef APP-NVUE */
|
||||
.pages view {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.pages {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.refresh {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-box {
|
||||
background-color: #FFFFFF;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
/* #ifndef APP-PLUS */
|
||||
z-index: 9;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.pages .nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-search-box {
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.uni-search-box ::v-deep .uni-searchbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.uni-search-box ::v-deep .uni-searchbar__box {
|
||||
height: 32px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cover-search-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 999;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.pages .uni-list ::v-deep .uni-list-item__container {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pages .uni-list ::v-deep .uni-list-item {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.pages .uni-list ::v-deep .uni-load-more {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pages .uni-list ::v-deep .uni-list--border:after {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
33
pages/uni-starter/news/list/list.uvue
Normal file
33
pages/uni-starter/news/list/list.uvue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<uni-cms-article-search-bar :show-placeholder="true"></uni-cms-article-search-bar>
|
||||
<uni-cms-article-list
|
||||
:collectionList="colList"
|
||||
:refresherEnabled="true"
|
||||
style="flex: 1;"
|
||||
></uni-cms-article-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
const db = uniCloud.databaseForJQL()
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
colList(): any[] {
|
||||
return [
|
||||
db.collection('uni-cms-articles').where("\"article_status\" == 1").field('thumbnail,title,publish_date,user_id').getTemp(), // 文章集合
|
||||
db.collection('uni-id-users').field('_id,nickname').getTemp() // 用户集合
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
738
pages/uni-starter/news/search/search.nvue
Normal file
738
pages/uni-starter/news/search/search.nvue
Normal file
@ -0,0 +1,738 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-container">
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-container-bar">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<uni-icons class="search-icons" :color="iconColor" size="22" type="mic-filled" @click="speech" />
|
||||
<!-- #endif -->
|
||||
<!-- :cancelText="keyBoardPopup ? '取消' : '搜索'" -->
|
||||
<uni-search-bar ref="searchBar" style="flex:1;" radius="100" v-model="searchText" :focus="focus"
|
||||
:placeholder="hotWorld" clearButton="auto" cancelButton="none" @clear="clear" @confirm="confirm"
|
||||
@cancel="cancel" />
|
||||
<uni-icons class="scan-icons" :color="iconColor" size="22" type="scan" @click="scanEvent"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-body">
|
||||
<unicloud-db ref='listUdb' v-slot:default="{ data, pagination, hasMore, loading, error, options }"
|
||||
@error="onqueryerror" :collection="colList" :page-size="10" orderby="publish_date desc" @load="onDbLoad"
|
||||
loadtime="manual">
|
||||
<template v-if="!isLoadData">
|
||||
<!-- 搜索历史 -->
|
||||
<view class="word-container" v-if="localSearchList.length">
|
||||
<view class="word-container_header">
|
||||
<text class="word-container_header-text">搜索历史</text>
|
||||
<uni-icons v-if="!localSearchListDel" @click="localSearchListDel = true" class="search-icons"
|
||||
style="padding-right: 0;" :color="iconColor" size="18" type="trash"></uni-icons>
|
||||
<view v-else class="flex-center flex-row"
|
||||
style="font-weight: 500;justify-content: space-between;">
|
||||
<text
|
||||
style="font-size: 22rpx;color: #666;padding-top:4rpx;padding-bottom:4rpx;padding-right:20rpx;"
|
||||
@click="LocalSearchListClear">全部删除</text>
|
||||
<text
|
||||
style="font-size: 22rpx;color: #c0402b;padding-top:4rpx;padding-bottom:4rpx;padding-left:20rpx;"
|
||||
@click="localSearchListDel = false">完成</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="word-container_body">
|
||||
<view class="flex-center flex-row word-container_body-text"
|
||||
v-for="(word, index) in localSearchList" :key="index"
|
||||
@click="LocalSearchlistItemClick(word, index)">
|
||||
<text class="word-display" :key="word">{{ word }}</text>
|
||||
<uni-icons v-if="localSearchListDel" size="12" type="closeempty" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索发现 -->
|
||||
<view class="word-container">
|
||||
<view class="word-container_header">
|
||||
<view class="flex-center flex-row">
|
||||
<text class="word-container_header-text">搜索发现</text>
|
||||
<uni-icons v-if="!netHotListIsHide" class="search-icons" :color="iconColor" size="14"
|
||||
type="reload" @click="searchHotRefresh"></uni-icons>
|
||||
</view>
|
||||
<uni-icons class="search-icons" style="padding-right: 0;" :color="iconColor" size="18"
|
||||
:type="netHotListIsHide ? 'eye-slash' : 'eye'"
|
||||
@click="netHotListIsHide = !netHotListIsHide"></uni-icons>
|
||||
</view>
|
||||
<unicloud-db ref="udb" #default="{ data, loading, error, options }" field="content"
|
||||
collection="opendb-search-hot" orderby="create_date desc,count desc" page-data="replace"
|
||||
:page-size="10">
|
||||
<text v-if="loading && !netHotListIsHide" class="word-container_body-info">正在加载...</text>
|
||||
<view v-else class="word-container_body">
|
||||
<template v-if="!netHotListIsHide">
|
||||
<text v-if="error" class="word-container_body-info">{{ error.message }}</text>
|
||||
<template v-else>
|
||||
<text v-for="(word, index) in data" class="word-container_body-text" :key="index"
|
||||
@click="search(word.content)">{{ word.content }}</text>
|
||||
</template>
|
||||
</template>
|
||||
<view v-else style="flex:1;">
|
||||
<text class="word-container_body-info">当前搜索发现已隐藏</text>
|
||||
</view>
|
||||
</view>
|
||||
</unicloud-db>
|
||||
</view>
|
||||
</template>
|
||||
<uni-list v-else class="uni-list" :border="false" :style="{ height: listHeight }">
|
||||
<!-- 列表渲染 -->
|
||||
<uni-list-item :to="'/uni_modules/uni-cms-article/pages/detail/detail?id=' + item._id"
|
||||
v-for="(item, index) in data" :key="index">
|
||||
<!-- 通过header插槽定义列表左侧图片 -->
|
||||
<template v-slot:header>
|
||||
<image class="thumbnail" :src="typeof item.thumbnail === 'string' ? item.thumbnail: item.thumbnail[0]" mode="aspectFill"></image>
|
||||
</template>
|
||||
<!-- 通过body插槽定义布局 -->
|
||||
<template v-slot:body>
|
||||
<view class="main">
|
||||
<text class="title">{{ item.title }}</text>
|
||||
<view class="info">
|
||||
<text class="author">{{ item.user_id[0] ? item.user_id[0].nickname : '' }}</text>
|
||||
<text class="publish_date">{{ publishTime(item.publish_date) }}</text>
|
||||
<!-- -->
|
||||
<!-- <uni-dateformat class="publish_date" :date="item.publish_date"-->
|
||||
<!-- format="yyyy-MM-dd" :threshold="[60000, 2592000000]"/>-->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<uni-list-item>
|
||||
<template v-slot:body>
|
||||
<!-- #endif -->
|
||||
<uni-load-state @networkResume="refresh" :state="{ data, pagination, hasMore, loading, error }"
|
||||
@loadMore="loadMore">
|
||||
</uni-load-state>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
</template>
|
||||
</uni-list-item>
|
||||
<!-- #endif -->
|
||||
</uni-list>
|
||||
</unicloud-db>
|
||||
</view>
|
||||
<!-- 搜索联想 -->
|
||||
<view class="search-associative" v-if="associativeShow">
|
||||
<uni-list>
|
||||
<uni-list-item v-for="(item, index) in associativeList" :key="item._id" :ellipsis="1" :title="item.title"
|
||||
@click="associativeClick(item)" show-extra-icon clickable
|
||||
:extra-icon="{ size: 18, color: iconColor, type: 'search' }">
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 云端一体搜索模板
|
||||
* @description uniCloud云端一体搜索模板，自带下拉候选、历史搜索、热搜。无需再开发服务器代码
|
||||
*/
|
||||
|
||||
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time";
|
||||
import parseScanResult from "@/uni_modules/uni-cms-article/common/parse-scan-result";
|
||||
|
||||
const searchLogDbName = 'opendb-search-log'; // 搜索记录数据库
|
||||
const articleDbName = 'uni-cms-articles'; // 文章数据库
|
||||
const associativeSearchField = 'title'; // 联想时，搜索框值检索数据库字段名
|
||||
const associativeField = '_id,title'; // 联想列表每一项携带的字段
|
||||
const localSearchListKey = '__local_search_history'; // 本地历史存储字段名
|
||||
|
||||
const db = uniCloud.database();
|
||||
const articleDBName = 'uni-cms-articles'
|
||||
const userDBName = 'uni-id-users'
|
||||
|
||||
// 数组去重
|
||||
const arrUnique = arr => {
|
||||
for (let i = arr.length - 1; i >= 0; i--) {
|
||||
const curIndex = arr.indexOf(arr[i]);
|
||||
const lastIndex = arr.lastIndexOf(arr[i])
|
||||
curIndex != lastIndex && arr.splice(lastIndex, 1)
|
||||
}
|
||||
return arr
|
||||
} // 节流
|
||||
// 防抖
|
||||
function debounce(fn, interval, isFirstAutoRun) {
|
||||
/**
|
||||
*
|
||||
* @param {要执行的函数} fn
|
||||
* @param {在操作多长时间后可再执行，第一次立即执行} interval
|
||||
*/
|
||||
var _self = fn;
|
||||
var timer = null;
|
||||
var first = true;
|
||||
|
||||
if (isFirstAutoRun) {
|
||||
_self();
|
||||
}
|
||||
|
||||
return function () {
|
||||
var args = arguments;
|
||||
var _me = this;
|
||||
if (first) {
|
||||
first = false;
|
||||
_self.apply(_me, args);
|
||||
}
|
||||
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
// return false;
|
||||
}
|
||||
|
||||
timer = setTimeout(function () {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
_self.apply(_me, args);
|
||||
}, interval || 200);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
// 组件数据
|
||||
data() {
|
||||
return {
|
||||
// 文章数据库名称
|
||||
articleDbName,
|
||||
// 搜索记录数据库名称
|
||||
searchLogDbName,
|
||||
// 状态栏高度
|
||||
statusBarHeight: '0px',
|
||||
// 本地搜索列表
|
||||
localSearchList: uni.getStorageSync(localSearchListKey),
|
||||
// 是否删除本地搜索列表
|
||||
localSearchListDel: false,
|
||||
// 是否隐藏网络热搜列表
|
||||
netHotListIsHide: false,
|
||||
// 搜索文本
|
||||
searchText: '',
|
||||
// 图标颜色
|
||||
iconColor: '#999999',
|
||||
// 联想列表
|
||||
associativeList: [],
|
||||
// 是否弹出键盘
|
||||
keyBoardPopup: false,
|
||||
// 搜索热词
|
||||
hotWorld: 'DCloud', // 搜索热词，如果没有输入即回车，则搜索热词，但是不会加入搜索记录
|
||||
// 是否自动聚焦
|
||||
focus: true,
|
||||
// 语音识别引擎
|
||||
speechEngine: 'iFly', // 语音识别引擎 iFly 讯飞 baidu 百度
|
||||
// 是否正在加载数据
|
||||
isLoadData: false,
|
||||
// 数据库查询条件
|
||||
where: '"article_status" == 1',
|
||||
// 列表高度
|
||||
listHeight: 0,
|
||||
// 是否显示联想列表
|
||||
associativeShow: false,
|
||||
// 是否显示无联想列表
|
||||
noAssociativeShow: false
|
||||
}
|
||||
},
|
||||
// 组件创建时执行
|
||||
created() {
|
||||
// 初始化数据库
|
||||
this.db = uniCloud.database();
|
||||
this.searchLogDb = this.db.collection(this.searchLogDbName);
|
||||
this.articleDbName = this.db.collection(this.articleDbName);
|
||||
// #ifndef H5
|
||||
// 监听键盘高度变化
|
||||
uni.onKeyboardHeightChange((res) => {
|
||||
this.keyBoardPopup = res.height !== 0;
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
colList() {
|
||||
// 返回文章和用户列表
|
||||
return [
|
||||
db.collection(articleDBName).where(this.where).field('thumbnail,title,publish_date,user_id').getTemp(),
|
||||
db.collection(userDBName).field('_id,nickname').getTemp()
|
||||
]
|
||||
}
|
||||
},
|
||||
// 页面初次渲染完成时执行
|
||||
onReady() {
|
||||
// #ifdef APP-NVUE
|
||||
/* 可用窗口高度 - 搜索框高 - 状态栏高 */
|
||||
this.listHeight = uni.getSystemInfoSync().windowHeight + 'px';
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.listHeight = 'auto'
|
||||
// #endif
|
||||
},
|
||||
// 页面加载时执行
|
||||
onLoad() {
|
||||
//#ifdef APP-PLUS
|
||||
// 获取状态栏高度
|
||||
this.statusBarHeight = `${uni.getSystemInfoSync().statusBarHeight}px`;
|
||||
//#endif
|
||||
},
|
||||
// 组件方法
|
||||
methods: {
|
||||
// 清空搜索框
|
||||
clear(res) {
|
||||
console.log("res: ", res);
|
||||
},
|
||||
// 确认搜索
|
||||
confirm(res) {
|
||||
// 键盘确认
|
||||
this.search(res.value);
|
||||
},
|
||||
// 取消搜索
|
||||
cancel(res) {
|
||||
uni.hideKeyboard();
|
||||
this.searchText = '';
|
||||
this.isLoadData = false
|
||||
this.associativeShow = false
|
||||
// this.loadList();
|
||||
},
|
||||
// 执行搜索
|
||||
search(value) {
|
||||
if (!value && !this.hotWorld) {
|
||||
return;
|
||||
}
|
||||
if (value) {
|
||||
if (this.searchText !== value) {
|
||||
this.searchText = value
|
||||
}
|
||||
|
||||
this.localSearchListManage(value);
|
||||
|
||||
this.searchLogDbAdd(value)
|
||||
} else if (this.hotWorld) {
|
||||
this.searchText = this.hotWorld
|
||||
}
|
||||
|
||||
uni.hideKeyboard();
|
||||
this.loadList(this.searchText);
|
||||
},
|
||||
// 管理本地搜索列表
|
||||
localSearchListManage(word) {
|
||||
let list = uni.getStorageSync(localSearchListKey);
|
||||
if (list.length) {
|
||||
this.localSearchList.unshift(word);
|
||||
arrUnique(this.localSearchList);
|
||||
if (this.localSearchList.length > 10) {
|
||||
this.localSearchList.pop();
|
||||
}
|
||||
} else {
|
||||
this.localSearchList = [word];
|
||||
}
|
||||
uni.setStorageSync(localSearchListKey, this.localSearchList);
|
||||
},
|
||||
// 清空本地搜索列表
|
||||
LocalSearchListClear() {
|
||||
uni.showModal({
|
||||
content: "确认清空搜索历史吗",
|
||||
confirmText: "删除",
|
||||
confirmColor: 'red',
|
||||
cancelColor: '#808080',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.localSearchListDel = false;
|
||||
this.localSearchList = [];
|
||||
uni.removeStorageSync(localSearchListKey)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击本地搜索列表项
|
||||
LocalSearchlistItemClick(word, index) {
|
||||
if (this.localSearchListDel) {
|
||||
this.localSearchList.splice(index, 1);
|
||||
uni.setStorageSync(localSearchListKey, this.localSearchList);
|
||||
if (!this.localSearchList.length) {
|
||||
this.localSearchListDel = false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.noAssociativeShow = true;
|
||||
this.search(word);
|
||||
},
|
||||
// 刷新搜索热词
|
||||
searchHotRefresh() {
|
||||
this.$refs.udb.refresh();
|
||||
},
|
||||
// 语音搜索
|
||||
speech() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.speech.startRecognize({
|
||||
engine: this.speechEngine,
|
||||
punctuation: false, // 标点符号
|
||||
timeout: 10000
|
||||
}, word => {
|
||||
word = word instanceof Array ? word[0] : word;
|
||||
this.search(word)
|
||||
}, err => {
|
||||
console.error("语音识别错误: ", err);
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 添加搜索记录
|
||||
searchLogDbAdd(value) {
|
||||
/*
|
||||
在此处存搜索记录，如果登录则需要存 user_id，若未登录则存device_id
|
||||
*/
|
||||
this.getDeviceId().then(device_id => {
|
||||
this.searchLogDb.add({
|
||||
// user_id: device_id,
|
||||
device_id,
|
||||
content: value,
|
||||
create_date: Date.now()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取设备ID
|
||||
getDeviceId() {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 从本地缓存中获取uni_id
|
||||
const uniId = uni.getStorageSync('uni_id');
|
||||
// 如果uni_id不存在，则获取设备信息
|
||||
if (!uniId) {
|
||||
// #ifdef APP-PLUS
|
||||
plus.device.getInfo({
|
||||
success: (deviceInfo) => {
|
||||
resolve(deviceInfo.uuid)
|
||||
},
|
||||
fail: () => {
|
||||
// 如果获取设备信息失败，则返回一个随机字符串
|
||||
resolve(uni.getSystemInfoSync().system + '_' + Math.random().toString(36).substr(2))
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
// 如果不是APP-PLUS，则返回一个随机字符串
|
||||
resolve(uni.getSystemInfoSync().system + '_' + Math.random().toString(36).substr(2))
|
||||
// #endif
|
||||
} else {
|
||||
// 如果uni_id存在，则直接返回uni_id
|
||||
resolve(uniId)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击联想词
|
||||
associativeClick(item) {
|
||||
/**
|
||||
* 注意：这里用户根据自己的业务需要，选择跳转的页面即可
|
||||
*/
|
||||
console.log("associativeClick: ", item, item.title);
|
||||
// 隐藏联想词
|
||||
this.noAssociativeShow = true;
|
||||
// 将搜索框的文本设置为联想词的标题
|
||||
this.searchText = item.title;
|
||||
// 加载列表
|
||||
this.loadList(item.title);
|
||||
},
|
||||
// 加载列表
|
||||
loadList(text = '') {
|
||||
// 设置查询条件
|
||||
let where = '"article_status" == 1 '
|
||||
if (text) {
|
||||
this.where = where + `&& /${text}/.test(title)`;
|
||||
} else {
|
||||
this.where = where;
|
||||
}
|
||||
|
||||
// 隐藏联想词
|
||||
this.associativeList = [];
|
||||
this.associativeShow = false;
|
||||
|
||||
// 延迟0ms后加载数据
|
||||
setTimeout(() => {
|
||||
this.$refs.listUdb.loadData({
|
||||
clear: true
|
||||
})
|
||||
}, 0)
|
||||
},
|
||||
// 数据库加载完成
|
||||
onDbLoad() {
|
||||
console.log('onDbLoad')
|
||||
// 设置数据已加载标志
|
||||
this.isLoadData = true
|
||||
// 显示联想词
|
||||
this.noAssociativeShow = false;
|
||||
},
|
||||
// 查询错误
|
||||
onqueryerror(e) {
|
||||
console.error(e);
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
// 刷新数据
|
||||
this.$refs.listUdb.loadData({
|
||||
clear: true
|
||||
}, () => {
|
||||
// 停止下拉刷新
|
||||
uni.stopPullDownRefresh()
|
||||
// #ifdef APP-NVUE
|
||||
// 隐藏刷新按钮
|
||||
this.showRefresh = false
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
// 加载更多
|
||||
loadMore() {
|
||||
// 加载更多数据
|
||||
this.$refs.listUdb.loadMore()
|
||||
},
|
||||
// 格式化发布时间
|
||||
publishTime(timestamp) {
|
||||
return translatePublishTime(timestamp)
|
||||
},
|
||||
scanEvent () {
|
||||
uni.scanCode({
|
||||
onlyFromCamera: true,
|
||||
scanType: ["qrCode"],
|
||||
success: (e) => parseScanResult(e.result),
|
||||
fail: (e) => {
|
||||
console.error(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
// 当滚动到底部时，加载更多数据
|
||||
this.loadMore()
|
||||
},
|
||||
watch: {
|
||||
searchText: debounce(function (value, oldValue) {
|
||||
// 当搜索框的文本发生变化时，执行以下操作
|
||||
if (value === oldValue) return
|
||||
if (this.noAssociativeShow) return
|
||||
|
||||
if (value) {
|
||||
// 根据搜索框的文本，查询联想词
|
||||
this.articleDbName.where({
|
||||
[associativeSearchField]: new RegExp(value, 'gi'),
|
||||
}).field(associativeField).get().then(res => {
|
||||
// 将查询结果赋值给联想词列表，并显示联想词
|
||||
this.associativeList = res.result.data;
|
||||
this.associativeShow = true
|
||||
})
|
||||
} else {
|
||||
// 如果搜索框的文本为空，则清空联想词列表
|
||||
this.associativeList = [];
|
||||
}
|
||||
|
||||
}, 100)
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$search-bar-height: 52px;
|
||||
$word-container_header-height: 72rpx;
|
||||
|
||||
.status-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.search-body {
|
||||
background-color: #fff;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
|
||||
@mixin uni-flex {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
@mixin words-display {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
@include uni-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
@include uni-flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
/* #ifndef APP-NVUE || VUE3*/
|
||||
::v-deep
|
||||
|
||||
/* #endif */
|
||||
.uni-searchbar {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE || VUE3*/
|
||||
::v-deep
|
||||
|
||||
/* #endif */
|
||||
.uni-searchbar__box {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE || VUE3 */
|
||||
::v-deep
|
||||
|
||||
/* #endif */
|
||||
.uni-input-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
height: $search-bar-height;
|
||||
@include uni-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
|
||||
@at-root {
|
||||
#{&}-bar {
|
||||
@include uni-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-associative {
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow-y: auto;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
top: $search-bar-height;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
margin-top: 10rpx;
|
||||
padding-left: 10rpx;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
.search-icons, .scan-icons {
|
||||
padding: 16rpx;
|
||||
}
|
||||
.scan-icons {
|
||||
padding-left: 0;
|
||||
}
|
||||
.word-display {
|
||||
@include words-display;
|
||||
}
|
||||
|
||||
.word-container {
|
||||
padding: 20rpx;
|
||||
|
||||
@at-root {
|
||||
#{&}_header {
|
||||
@include uni-flex;
|
||||
height: $word-container_header-height;
|
||||
line-height: $word-container_header-height;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@at-root {
|
||||
#{&}-text {
|
||||
color: #3e3e3e;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{&}_body {
|
||||
@include uni-flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
|
||||
@at-root {
|
||||
#{&}-text {
|
||||
@include uni-flex;
|
||||
@include words-display;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f6f6f6;
|
||||
padding: 10rpx 20rpx;
|
||||
margin: 20rpx 30rpx 0 0;
|
||||
border-radius: 30rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#{&}-info {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #808080;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 240rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.main {
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.author,
|
||||
.publish_date {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
363
pages/uni-starter/news/search/search.uvue
Normal file
363
pages/uni-starter/news/search/search.uvue
Normal file
@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search">
|
||||
<uni-cms-article-search-bar
|
||||
ref="searchBar"
|
||||
v-model="searchVal"
|
||||
:show-placeholder="false"
|
||||
:focus="true"
|
||||
@clear="showSearchResultPanel = false"
|
||||
@confirm="search"
|
||||
></uni-cms-article-search-bar>
|
||||
</view>
|
||||
<view class="search-result" v-if="showSearchResultPanel">
|
||||
<uni-cms-article-list
|
||||
ref="articleList"
|
||||
:collectionList="colList"
|
||||
:refresherEnabled="false"
|
||||
loadTime="manual"
|
||||
style="flex: 1;"
|
||||
></uni-cms-article-list>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="panel history-panel" v-if="searchHistory.length > 0">
|
||||
<view class="panel__title">
|
||||
<view class="panel__title-text">
|
||||
<text class="text">搜索历史</text>
|
||||
</view>
|
||||
|
||||
<view class="delete-history-btns" v-if="deleteHistoryLoading">
|
||||
<text class="text" @click="deleteAllSearchHistory">全部删除</text>
|
||||
<text class="text danger" @click="deleteHistoryLoading = false">完成</text>
|
||||
</view>
|
||||
<uni-cms-article-icons
|
||||
class="panel__after-icon"
|
||||
type="trash"
|
||||
:size="18"
|
||||
color="#999"
|
||||
@click="deleteHistoryLoading = true"
|
||||
v-else
|
||||
></uni-cms-article-icons>
|
||||
</view>
|
||||
<view class="panel__list">
|
||||
<view class="panel__list-item" v-for="text in searchHistory">
|
||||
<text class="text" @click="search(text)">{{text}}</text>
|
||||
<uni-cms-article-icons
|
||||
class="icon"
|
||||
type="closeempty"
|
||||
:size="12"
|
||||
color="#999"
|
||||
v-if="deleteHistoryLoading"
|
||||
@click="deleteSearchHistory(text)"
|
||||
></uni-cms-article-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<unicloud-db ref="udb" #default="{ data, loading, error }" field="content"
|
||||
collection="opendb-search-hot" orderby="create_date desc,count desc" page-data="replace"
|
||||
:page-size="10">
|
||||
<view class="panel recommend-panel">
|
||||
<view class="panel__title">
|
||||
<view class="panel__title-text">
|
||||
<text class="text">搜索发现</text>
|
||||
<uni-cms-article-icons
|
||||
class="icon"
|
||||
type="reload"
|
||||
:size="14"
|
||||
color="#999"
|
||||
v-if="!hideSearchRecommend"
|
||||
@click="reLoadSearchRecommend"
|
||||
></uni-cms-article-icons>
|
||||
</view>
|
||||
<uni-cms-article-icons
|
||||
class="panel__after-icon"
|
||||
:type="hideSearchRecommend ? 'eye-slash': 'eye'"
|
||||
:size="18"
|
||||
color="#999"
|
||||
@click="hideSearchRecommend = !hideSearchRecommend"
|
||||
></uni-cms-article-icons>
|
||||
</view>
|
||||
<view class="panel__list">
|
||||
<view class="panel__list-tip" v-if="loading">
|
||||
<text class="text">正在加载...</text>
|
||||
</view>
|
||||
<view class="panel__list-tip" v-else-if="error != null">
|
||||
<text class="text">{{error.message}}</text>
|
||||
</view>
|
||||
<view class="panel__list-tip" v-else-if="hideSearchRecommend">
|
||||
<text class="text">当前搜索发现已隐藏</text>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view
|
||||
class="panel__list-item"
|
||||
v-for="(word, index) in data"
|
||||
:key="index"
|
||||
@click="search(word.getString('content')!)"
|
||||
>
|
||||
<text class="text">{{ word.getString('content') }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</unicloud-db>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
type ArticleAuthor = {
|
||||
_id: string
|
||||
nickname: string
|
||||
}
|
||||
type ArticleItem = {
|
||||
_id: string
|
||||
title: string
|
||||
publish_date: number
|
||||
thumbnail: string[]
|
||||
user_id: ArticleAuthor[]
|
||||
}
|
||||
|
||||
const db = uniCloud.databaseForJQL()
|
||||
const searchLogDB = db.collection('opendb-search-log')
|
||||
const cmsArticleDB = db.collection('uni-cms-articles')
|
||||
const uniIdUsersDB = db.collection('uni-id-users')
|
||||
const localSearchHistoryKey = '__local_search_history'; // 本地历史存储字段名
|
||||
const localSearchRecommendHiddenKey = '__local_search_recommend_hidden'; // 本地搜索发现开关字段名
|
||||
const localSearchHistoryMax = 10; // 本地历史存储最大值
|
||||
export default {
|
||||
data() {
|
||||
const localSearchRecommendHidden = uni.getStorageSync(localSearchRecommendHiddenKey)
|
||||
|
||||
return {
|
||||
searchVal: "",
|
||||
searchHistory: [] as string[],
|
||||
searchRecommend: [] as string[],
|
||||
deleteHistoryLoading: false,
|
||||
hideSearchRecommend: (localSearchRecommendHidden == "" ? false : localSearchRecommendHidden) as boolean,
|
||||
showSearchResultPanel: false,
|
||||
searchResult: [] as ArticleItem[]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
hideSearchRecommend(newValue) {
|
||||
uni.setStorageSync(localSearchRecommendHiddenKey, newValue)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasSearchValue(): boolean {
|
||||
return this.searchVal != ""
|
||||
},
|
||||
where(): string {
|
||||
let where = "\"article_status\" == 1"
|
||||
|
||||
if (this.searchVal != "") {
|
||||
where += `&& /${this.searchVal}/.test(title)`
|
||||
}
|
||||
|
||||
return where
|
||||
},
|
||||
colList(): any[] {
|
||||
// 返回文章和用户列表
|
||||
return [
|
||||
cmsArticleDB.where(this.where).field('thumbnail,title,publish_date,user_id').getTemp(),
|
||||
uniIdUsersDB.field('_id,nickname').getTemp()
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 本地历史存储
|
||||
const localSearchHistory = uni.getStorageSync(localSearchHistoryKey)
|
||||
this.searchHistory = (localSearchHistory == "" ? [] as string[] : localSearchHistory) as string[]
|
||||
},
|
||||
methods: {
|
||||
deleteAllSearchHistory() {
|
||||
uni.showModal({
|
||||
title: "确定清空搜索历史吗",
|
||||
confirmText: "删除",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.deleteSearchHistory(null)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteSearchHistory(searchText: string | null) {
|
||||
let history: string[] = []
|
||||
if (searchText != null) {
|
||||
history = this.searchHistory.filter((item: string): boolean => item != searchText)
|
||||
}
|
||||
|
||||
this.searchHistory = history
|
||||
uni.setStorageSync(localSearchHistoryKey, history)
|
||||
|
||||
console.log(history.length, 'history.length')
|
||||
if (history.length <= 0) {
|
||||
this.deleteHistoryLoading = false
|
||||
}
|
||||
},
|
||||
search(searchText: string) {
|
||||
searchText = searchText.trim()
|
||||
|
||||
if (searchText == "" || this.deleteHistoryLoading) return
|
||||
// 隐藏键盘
|
||||
;(this.$refs['searchBar'] as UniCmsArticleSearchBarComponentPublicInstance)!.hideKeyboard()
|
||||
|
||||
// 保存搜索历史
|
||||
this.setLocalSearchHistory(searchText)
|
||||
// 显示搜索结果Panel
|
||||
this.showSearchResultPanel = true
|
||||
// 搜索
|
||||
this.loadSearchResult(searchText)
|
||||
// 添加搜索记录
|
||||
this.addSearchRecord(searchText)
|
||||
},
|
||||
loadSearchResult(searchText: string) {
|
||||
// 设置查询条件
|
||||
this.searchVal = searchText
|
||||
|
||||
// 延迟0ms后加载数据
|
||||
setTimeout(() => {
|
||||
(this.$refs['articleList'] as UniCmsArticleListComponentPublicInstance)!.reLoadList()
|
||||
}, 0)
|
||||
},
|
||||
addSearchRecord(searchText: string) {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
/*
|
||||
在此处存搜索记录，如果登录则需要存 user_id，若未登录则存device_id
|
||||
*/
|
||||
searchLogDB.add({
|
||||
// user_id: device_id,
|
||||
device_id: systemInfo.deviceId,
|
||||
// device_uuid: systemInfo.deviceId,
|
||||
content: searchText,
|
||||
create_date: Date.now()
|
||||
})
|
||||
},
|
||||
setLocalSearchHistory(searchText: string) {
|
||||
const history = this.searchHistory.filter((item: string): boolean => item != searchText)
|
||||
|
||||
history.unshift(searchText)
|
||||
|
||||
if (history.length > localSearchHistoryMax) {
|
||||
history.pop()
|
||||
}
|
||||
|
||||
this.searchHistory = history
|
||||
this.deleteHistoryLoading = false
|
||||
uni.setStorageSync(localSearchHistoryKey, history)
|
||||
},
|
||||
reLoadSearchRecommend() {
|
||||
(this.$refs['udb'] as UniCloudDBElement)!.loadData({
|
||||
clear: true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.search-result {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-top: 40rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
color: #3e3e3e;
|
||||
font-size: 30rpx;
|
||||
line-height: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__after-icon {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
&__list {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-item {
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 30rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&-tip {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.text {
|
||||
font-size: 26rpx;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-history-btns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.text {
|
||||
color: #666;
|
||||
font-size: 22rpx;
|
||||
margin-left: 20rpx;
|
||||
|
||||
&.danger {
|
||||
color: #c0402b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
246
pages/uni-starter/ucenter/about/about.vue
Normal file
246
pages/uni-starter/ucenter/about/about.vue
Normal file
@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<view class="about">
|
||||
<view class="box">
|
||||
<image class="logoImg" :src="about.logo"></image>
|
||||
<text class="tip appName">{{about.appName}}</text>
|
||||
<text class="tip">Version {{version}}</text>
|
||||
<view class="qrcode">
|
||||
<!--uqrcode 组件来源，插件Sansnn-uQRCode 链接地址：https://ext.dcloud.net.cn/plugin?id=1287-->
|
||||
<uqrcode :size="100" canvas-id="qrcode" :value="about.download"></uqrcode>
|
||||
</view>
|
||||
|
||||
<text class="tip">{{$t('about.sacnQR')}} {{about.appName}} {{$t('about.client')}}</text>
|
||||
</view>
|
||||
<view class="copyright">
|
||||
<view class="agreement-box" v-for="(agreement,index) in agreements" :key="index">
|
||||
<text class="agreement" @click="navigateTo(agreement)">《{{agreement.title}}》</text>
|
||||
<text class="hint" v-if="agreements.length-1>index">{{$t('about.and')}}</text>
|
||||
</view>
|
||||
<text class="hint">Copyright © {{year}}</text>
|
||||
<text class="hint">{{about.company}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// #ifdef APP
|
||||
import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
|
||||
const uniShare = new UniShare()
|
||||
// #endif
|
||||
import uniIdPagesConfig from '@/uni_modules/uni-id-pages/config.js';
|
||||
import uqrcode from "@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode"
|
||||
import extConfig from "@/app.config.js";
|
||||
export default {
|
||||
components: {
|
||||
uqrcode
|
||||
},
|
||||
// #ifdef APP
|
||||
onBackPress({
|
||||
from
|
||||
}) {
|
||||
if (from == 'backbutton') {
|
||||
this.$nextTick(function() {
|
||||
uniShare.hide()
|
||||
})
|
||||
return uniShare.isShow;
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS
|
||||
this.version = plus.runtime.version
|
||||
// #endif
|
||||
},
|
||||
computed: {
|
||||
uniStarterConfig() {
|
||||
let config = getApp().globalData.config;
|
||||
config.about = extConfig.about;
|
||||
return config
|
||||
},
|
||||
agreements() {
|
||||
if (!uniIdPagesConfig.agreements) {
|
||||
return []
|
||||
}
|
||||
let {
|
||||
serviceUrl,
|
||||
privacyUrl
|
||||
} = uniIdPagesConfig.agreements
|
||||
return [{
|
||||
url: serviceUrl,
|
||||
title: "用户服务协议"
|
||||
},
|
||||
{
|
||||
url: privacyUrl,
|
||||
title: "隐私政策条款"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
version: "V1.0.0",
|
||||
year: "2020",
|
||||
about: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.about = this.uniStarterConfig.about
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$t('about.about') + " " + this.about.appName
|
||||
})
|
||||
this.year = (new Date).getFullYear()
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
let {
|
||||
download,
|
||||
appName,
|
||||
slogan,
|
||||
logo
|
||||
} = this.about
|
||||
uniShare.show({
|
||||
content: { //公共的分享类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
|
||||
type: 0,
|
||||
href: download,
|
||||
title: appName,
|
||||
summary: slogan,
|
||||
imageUrl: logo +
|
||||
'?x-oss-process=image/resize,m_fill,h_100,w_100' //压缩图片解决，在ios端分享图过大导致的图片失效问题
|
||||
},
|
||||
menus: [{
|
||||
"img": "/static/app-plus/sharemenu/wechatfriend.png",
|
||||
"text": this.$t('common.wechatFriends'),
|
||||
"share": {
|
||||
"provider": "weixin",
|
||||
"scene": "WXSceneSession"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/wechatmoments.png",
|
||||
"text": this.$t('common.wechatBbs'),
|
||||
"share": {
|
||||
"provider": "weixin",
|
||||
"scene": "WXSceneTimeline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/weibo.png",
|
||||
"text": this.$t('common.weibo'),
|
||||
"share": {
|
||||
"provider": "sinaweibo"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/qq.png",
|
||||
"text": "QQ",
|
||||
"share": {
|
||||
"provider": "qq"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/copyurl.png",
|
||||
"text": this.$t('common.copy'),
|
||||
"share": "copyurl"
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/more.png",
|
||||
"text": this.$t('common.more'),
|
||||
"share": "shareSystem"
|
||||
}
|
||||
],
|
||||
cancelText: this.$t('common.cancelShare'),
|
||||
}, e => { //callback
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
navigateTo({
|
||||
url,
|
||||
title
|
||||
}) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/common/webview/index?url=' + url + '&title=' +
|
||||
title,
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/* #ifndef APP-NVUE */
|
||||
view {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.about {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 60px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logoImg {
|
||||
margin-bottom: 10rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10px;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.appName {
|
||||
margin-top: 20px;
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.qrcode,
|
||||
.qrcode .uqrcode {
|
||||
margin: 10px 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 32rpx;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
bottom: 20px;
|
||||
// left: 0;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.agreement-box {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
color: #2285ff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.hint {
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
179
pages/uni-starter/ucenter/invite/invite.vue
Normal file
179
pages/uni-starter/ucenter/invite/invite.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="about">
|
||||
<view class="box">
|
||||
<image class="logoImg" :src="about.logo"></image>
|
||||
<text class="tip appName">{{about.appName}}</text>
|
||||
<text class="tip">{{about.slogan}}</text>
|
||||
<view @click="download" id="download">
|
||||
<image v-if="isIos" class="icon" src="@/static/h5/download-app/ios.png" mode="widthFix"></image>
|
||||
<image v-else class="icon" src="@/static/h5/download-app/android.png" mode="widthFix"></image>
|
||||
<text class="download-text">{{$t('invite.download')}}</text>
|
||||
</view>
|
||||
<text class="tip">version {{about.version}}</text>
|
||||
</view>
|
||||
<view class="copyright">
|
||||
<text class="hint">{{about.company}}</text>
|
||||
</view>
|
||||
<view class="mask" v-if="showMask">
|
||||
<image src="@/static/h5/download-app/openImg.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
uniStarterConfig() {
|
||||
return getApp().globalData.config
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
about: {},
|
||||
code: "",
|
||||
isIos: "",
|
||||
showMask: false,
|
||||
downloadUrl: {
|
||||
"ios": "",
|
||||
"android": ""
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.about = this.uniStarterConfig.about
|
||||
this.downloadUrl = this.uniStarterConfig.download
|
||||
this.year = (new Date).getFullYear()
|
||||
|
||||
//判断是否在微信中打开
|
||||
var userAgent = navigator.userAgent;
|
||||
var ua = userAgent.toLowerCase();
|
||||
this.isWeixin = ua.indexOf('micromessenger') != -1;
|
||||
//判断是否在ios或者安卓打开
|
||||
this.isIos = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
||||
},
|
||||
onLoad({
|
||||
code
|
||||
}) {
|
||||
this.code = code
|
||||
document.getElementById("openApp").style.display = 'none'
|
||||
document.getElementsByTagName("body")[0].style = ""
|
||||
},
|
||||
methods: {
|
||||
download() {
|
||||
if (this.code) {
|
||||
uni.setClipboardData({
|
||||
data: this.code,
|
||||
complete: (e) => {
|
||||
console.log(e);
|
||||
uni.hideToast()
|
||||
/* 以下临时解决setClipboardData h5端样式和键盘弹出端错误解决方案，后续会直接内置*/
|
||||
document.getElementById("#clipboard").style.top = '-999px';
|
||||
uni.hideKeyboard()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (this.isIos) {
|
||||
window.location.href = this.downloadUrl.ios
|
||||
} else {
|
||||
if (this.isWeixin) {
|
||||
//显示浮层
|
||||
this.showMask = true
|
||||
} else {
|
||||
window.location.href = this.downloadUrl.android
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
view {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.about {
|
||||
width: 750rpx;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 100px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logoImg {
|
||||
margin-bottom: 10upx;
|
||||
width: 160upx;
|
||||
height: 160upx;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 24rpx;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.appName {
|
||||
margin-top: 20px;
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
width: 750upx;
|
||||
font-size: 32rpx;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 34rpx;
|
||||
}
|
||||
|
||||
#download {
|
||||
background-color: #2A9839;
|
||||
color: #FFFFFF;
|
||||
margin: 55rpx;
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
width: 160rpx;
|
||||
border-radius: 100px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.download-text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
height: 100vh;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.mask image {
|
||||
width: 600rpx;
|
||||
}
|
||||
</style>
|
||||
77
pages/uni-starter/ucenter/read-news-log/read-news-log.vue
Normal file
77
pages/uni-starter/ucenter/read-news-log/read-news-log.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :where="udbWhere"
|
||||
collection="opendb-news-articles" @load="isLoading == false" @error="isLoading == false"
|
||||
field="title,_id" :page-size="10">
|
||||
<uni-list>
|
||||
<uni-list-item v-for="(item, index) in data" :key="index" :clickable="true"
|
||||
@click="handleItemClick(item)">
|
||||
<template v-slot:body>
|
||||
<view class="item">
|
||||
<text>{{item.title}}</text>
|
||||
<uni-dateformat class="article-date" :date="readNewsLog[index].last_time" format="yyyy-MM-dd hh:mm"
|
||||
:threshold="[0, 0]" />
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
<uni-load-state @networkResume="refreshData" :state="{data,pagination,hasMore, loading, error}"></uni-load-state>
|
||||
</unicloud-db>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
loadMore: {
|
||||
contentdown: '',
|
||||
contentrefresh: '',
|
||||
contentnomore: '',
|
||||
},
|
||||
readNewsLog:[],
|
||||
udbWhere:''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.readNewsLog = uni.getStorageSync('readNewsLog')||[];
|
||||
let readNewsLogIds = this.readNewsLog.map(({article_id})=>article_id)
|
||||
console.log(typeof readNewsLogIds,readNewsLogIds);
|
||||
this.udbWhere = `"_id" in ${JSON.stringify(readNewsLogIds)}`
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$t('newsLog.navigationBarTitle')
|
||||
})
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.refreshData();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.$refs.udb.loadMore()
|
||||
},
|
||||
methods: {
|
||||
refreshData() {
|
||||
this.$refs.udb.loadData({
|
||||
clear: true
|
||||
}, (res) => {
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
handleItemClick(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/list/detail?id=' + item._id + '&title=' + item.title
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.article-date {
|
||||
color: #C8C7CC;
|
||||
}
|
||||
</style>
|
||||
118
pages/uni-starter/ucenter/settings/dc-push/push.js
Normal file
118
pages/uni-starter/ucenter/settings/dc-push/push.js
Normal file
@ -0,0 +1,118 @@
|
||||
/**
|
||||
* 判断Push是否开启
|
||||
*/
|
||||
function isTurnedOnPush(){
|
||||
var isOn = undefined;
|
||||
try{
|
||||
if('iOS' == plus.os.name){
|
||||
var types = 0;
|
||||
var app = plus.ios.invoke('UIApplication', 'sharedApplication');
|
||||
var settings = plus.ios.invoke(app, 'currentUserNotificationSettings');
|
||||
if(settings){
|
||||
types = settings.plusGetAttribute('types');
|
||||
plus.ios.deleteObject(settings);
|
||||
}else{
|
||||
types = plus.ios.invoke(app, 'enabledRemoteNotificationTypes');
|
||||
}
|
||||
plus.ios.deleteObject(app);
|
||||
isOn = (0!=types);
|
||||
}else{
|
||||
var main = plus.android.runtimeMainActivity();
|
||||
var manager = plus.android.invoke('com.igexin.sdk.PushManager', 'getInstance');
|
||||
isOn = plus.android.invoke(manager, 'isPushTurnedOn', main);
|
||||
}
|
||||
}catch(e){
|
||||
console.error('exception in isTurnedOnPush@dc-push!!');
|
||||
}
|
||||
return isOn;
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开Push
|
||||
* Android平台 - 打开个推（UniPush）的推送通道
|
||||
* iOS平台 - 如果开启通知功能，则打开应用的设置页面引导用户开启通知
|
||||
*/
|
||||
function turnOnPush(){
|
||||
try{
|
||||
if('iOS' == plus.os.name){
|
||||
// 如果设置中没有开启通知，则打开应用的设置界面
|
||||
if(!isTurnedOnPush()){
|
||||
settingInIos();
|
||||
}
|
||||
}else{
|
||||
var main = plus.android.runtimeMainActivity();
|
||||
var manager = plus.android.invoke('com.igexin.sdk.PushManager', 'getInstance');
|
||||
plus.android.invoke(manager, 'turnOnPush', main);
|
||||
}
|
||||
}catch(e){
|
||||
console.error('exception in turnOnPush@dc-push!!');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭Push
|
||||
* Android平台 - 关闭个推（UniPush）的推送通道
|
||||
* iOS平台 - 不做任何操作
|
||||
*/
|
||||
function trunOffPush(){
|
||||
try{
|
||||
if('iOS' == plus.os.name){
|
||||
// 这里不做任何操作（不引导用户关闭应用的推送能力），应该通知业务服务器不向此用户下发推送消息
|
||||
}else{
|
||||
var main = plus.android.runtimeMainActivity();
|
||||
var manager = plus.android.invoke('com.igexin.sdk.PushManager', 'getInstance');
|
||||
plus.android.invoke(manager, 'turnOffPush', main);
|
||||
}
|
||||
}catch(e){
|
||||
console.error('exception in trunOffPush@dc-push!!');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* iOS平台打开应用设置界面
|
||||
*/
|
||||
function settingInIos(){
|
||||
try{
|
||||
if('iOS' == plus.os.name){
|
||||
var app = plus.ios.invoke('UIApplication', 'sharedApplication');
|
||||
var setting = plus.ios.invoke('NSURL', 'URLWithString:', 'app-settings:');
|
||||
plus.ios.invoke(app, 'openURL:', setting);
|
||||
plus.ios.deleteObject(setting);
|
||||
plus.ios.deleteObject(app);
|
||||
}
|
||||
}catch(e){
|
||||
console.error('exception in settingInIos@dc-push!!');
|
||||
}
|
||||
}
|
||||
/**
|
||||
* android打开应用设置页面
|
||||
*/
|
||||
function settingInAndroid(){
|
||||
if (uni.getSystemInfoSync().platform == "android") {
|
||||
var main = plus.android.runtimeMainActivity();
|
||||
var Intent = plus.android.importClass('android.content.Intent');
|
||||
var Settings = plus.android.importClass('android.provider.Settings');
|
||||
var intent = new Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
|
||||
// 安卓跳转设置页面详细查看(https://ask.dcloud.net.cn/question/14732)
|
||||
main.startActivity(intent);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 打开应用设置界面
|
||||
*/
|
||||
function setting(){
|
||||
if (uni.getSystemInfoSync().platform == "ios") {
|
||||
settingInIos();
|
||||
}
|
||||
if (uni.getSystemInfoSync().platform == "android") {
|
||||
settingInAndroid();
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
isOn: isTurnedOnPush,
|
||||
iosSetting: settingInIos,
|
||||
on: turnOnPush,
|
||||
off: trunOffPush,
|
||||
setting:setting
|
||||
}
|
||||
325
pages/uni-starter/ucenter/settings/settings.vue
Normal file
325
pages/uni-starter/ucenter/settings/settings.vue
Normal file
@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 功能列表 -->
|
||||
<uni-list class="mt10" :border="false">
|
||||
<uni-list-item :title="$t('settings.userInfo')" to="/uni_modules/uni-id-pages/pages/userinfo/userinfo"
|
||||
link="navigateTo"></uni-list-item>
|
||||
<uni-list-item v-if="userInfo.mobile" :title="$t('settings.changePassword')"
|
||||
:to="'/pages/ucenter/login-page/pwd-retrieve/pwd-retrieve?phoneNumber='+ userInfo.mobile"
|
||||
link="navigateTo"></uni-list-item>
|
||||
</uni-list>
|
||||
<uni-list class="mt10" :border="false">
|
||||
<!-- #ifndef H5 -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<!-- 检查push过程未结束不显示，push设置项 -->
|
||||
<uni-list-item :title="$t('settings.clearTmp')" @click="clearTmp" link></uni-list-item>
|
||||
<uni-list-item v-show="pushIsOn != 'wait'" :title="$t('settings.pushServer')"
|
||||
@click.native="pushIsOn?pushServer.off():pushServer.on()" showSwitch
|
||||
:switchChecked="pushIsOn"></uni-list-item>
|
||||
<!-- #endif -->
|
||||
<uni-list-item v-if="supportMode.includes('fingerPrint')" :title="$t('settings.fingerPrint')"
|
||||
@click.native="startSoterAuthentication('fingerPrint')" link></uni-list-item>
|
||||
<uni-list-item v-if="supportMode.includes('facial')" :title="$t('settings.facial')"
|
||||
@click="startSoterAuthentication('facial')" link></uni-list-item>
|
||||
<!-- #endif -->
|
||||
<uni-list-item v-if="i18nEnable" :title="$t('settings.changeLanguage')" @click="changeLanguage"
|
||||
:rightText="currentLanguage" link></uni-list-item>
|
||||
</uni-list>
|
||||
|
||||
<!-- 退出/登录 按钮 -->
|
||||
<view class="bottom-back" @click="changeLoginState">
|
||||
<text class="bottom-back-text" v-if="hasLogin">{{$t('settings.logOut')}}</text>
|
||||
<text class="bottom-back-text" v-else>{{$t('settings.login')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pushServer from './dc-push/push.js';
|
||||
import {
|
||||
store,
|
||||
mutations
|
||||
} from '@/uni_modules/uni-id-pages/common/store.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pushServer: pushServer,
|
||||
supportMode: [],
|
||||
pushIsOn: "wait",
|
||||
currentLanguage: "",
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasLogin() {
|
||||
return store.hasLogin
|
||||
},
|
||||
i18nEnable() {
|
||||
return getApp().globalData.config.i18n.enable
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.currentLanguage = uni.getStorageSync('CURRENT_LANG') == "en" ? 'English' : '简体中文'
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$t('settings.navigationBarTitle')
|
||||
})
|
||||
// #ifdef APP-PLUS || MP-WEIXIN
|
||||
uni.checkIsSupportSoterAuthentication({
|
||||
success: (res) => {
|
||||
this.supportMode = res.supportMode
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
onShow() {
|
||||
// 检查手机端获取推送是否开启
|
||||
//#ifdef APP-PLUS
|
||||
setTimeout(() => {
|
||||
this.pushIsOn = pushServer.isOn();
|
||||
}, 300)
|
||||
//#endif
|
||||
},
|
||||
methods: {
|
||||
async changeLoginState() {
|
||||
if (this.hasLogin) {
|
||||
await mutations.logout()
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd',
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 开始生物认证
|
||||
*/
|
||||
startSoterAuthentication(checkAuthMode) {
|
||||
console.log(checkAuthMode);
|
||||
let title = {
|
||||
"fingerPrint": this.$t('settings.fingerPrint'),
|
||||
"facial": this.$t('settings.facial')
|
||||
} [checkAuthMode]
|
||||
// 检查是否开启认证
|
||||
this.checkIsSoterEnrolledInDevice({
|
||||
checkAuthMode,
|
||||
title
|
||||
})
|
||||
.then(() => {
|
||||
console.log(checkAuthMode, title);
|
||||
// 开始认证
|
||||
uni.startSoterAuthentication({
|
||||
requestAuthModes: [checkAuthMode],
|
||||
challenge: '123456', // 微信端挑战因子
|
||||
authContent: this.$t('settings.please') + " " + `${title}`,
|
||||
complete: (res) => {
|
||||
console.log(res);
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
if (res.errCode == 0) {
|
||||
/**
|
||||
* 验证成功后开启自己的业务逻辑
|
||||
*
|
||||
* app端以此为依据 验证成功
|
||||
*
|
||||
* 微信小程序需要再次通过后台验证resultJSON与resultJSONSignature获取最终结果
|
||||
*/
|
||||
return uni.showToast({
|
||||
title: `${title}` + this.$t('settings.successText'),
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
uni.showToast({
|
||||
title: this.$t('settings.failTip'),
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
console.log(`认证失败:${err.errCode}`);
|
||||
uni.showToast({
|
||||
title: this.$t('settings.authFailed'),
|
||||
// title: `认证失败`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
checkIsSoterEnrolledInDevice({
|
||||
checkAuthMode,
|
||||
title
|
||||
}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.checkIsSoterEnrolledInDevice({
|
||||
checkAuthMode,
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
if (res.isEnrolled) {
|
||||
return resolve(res);
|
||||
}
|
||||
uni.showToast({
|
||||
title: this.$t('settings.deviceNoOpen') + `${title}`,
|
||||
icon: 'none'
|
||||
});
|
||||
reject(res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err);
|
||||
uni.showToast({
|
||||
title: `${title}` + this.$t('settings.fail'),
|
||||
icon: 'none'
|
||||
});
|
||||
reject(err);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
clearTmp() {
|
||||
uni.showLoading({
|
||||
title: this.$t('settings.clearing'),
|
||||
mask: true
|
||||
});
|
||||
/*
|
||||
任何临时存储或删除不直接影响程序运行逻辑（清除缓存必定造成业务逻辑的变化，如：打开页面的图片不从缓存中读取而从网络请求）的内容都可以视为缓存。主要有storage、和file写入。
|
||||
缓存分为三部分
|
||||
原生层（如：webview、x5播放器的、第三方sdk的、地图组件等）
|
||||
前端框架（重启就会自动清除）
|
||||
开发者自己的逻辑（如：
|
||||
本示例的 检测更新功能下载了apk安装包，
|
||||
其他逻辑需要根据开发者自己的业务设计
|
||||
比如：有聊天功能的应用，聊天记录是否视为缓存，还是单独提供清除聊天记录的功能由开发者自己设计
|
||||
）
|
||||
*/
|
||||
uni.getSavedFileList({
|
||||
success: res => {
|
||||
if (res.fileList.length > 0) {
|
||||
uni.removeSavedFile({
|
||||
filePath: res.fileList[0].filePath,
|
||||
complete: res => {
|
||||
console.log(res);
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: this.$t('settings.clearedSuccessed'),
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: this.$t('settings.clearedSuccessed'),
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
complete: e => {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
},
|
||||
changeLanguage() {
|
||||
console.log('语言切换')
|
||||
uni.showActionSheet({
|
||||
itemList: ["English", "简体中文"],
|
||||
success: res => {
|
||||
console.log(res.tapIndex);
|
||||
let language = uni.getStorageSync('CURRENT_LANG')
|
||||
if (
|
||||
!res.tapIndex && language == 'zh-Hans' || res.tapIndex && language == 'en'
|
||||
) {
|
||||
const globalData = getApp().globalData
|
||||
if (language === 'en') {
|
||||
language = globalData.locale = 'zh-Hans'
|
||||
} else {
|
||||
language = globalData.locale = 'en'
|
||||
}
|
||||
uni.setStorageSync('CURRENT_LANG', language)
|
||||
getApp().globalData.$i18n.locale = language
|
||||
this.currentLanguage = res.tapIndex ? '简体中文' : 'English'
|
||||
if (uni.setLocale) {
|
||||
uni.setLocale(language)
|
||||
}
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',
|
||||
complete: () => {
|
||||
uni.$emit("changeLanguage", language)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
uni-button:after {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 750rpx;
|
||||
height: 100vh;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.bottom-back {
|
||||
margin-top: 10px;
|
||||
width: 750rpx;
|
||||
height: 44px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
border: none;
|
||||
/* #endif */
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.bottom-back-text {
|
||||
font-size: 33rpx;
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE || VUE3 */
|
||||
.content ::v-deep .uni-list {
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.content ::v-deep .uni-list-item--disabled,
|
||||
.list-item {
|
||||
height: 50px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
506
pages/uni-starter/ucenter/ucenter.vue
Normal file
506
pages/uni-starter/ucenter/ucenter.vue
Normal file
@ -0,0 +1,506 @@
|
||||
<template>
|
||||
<view class="center">
|
||||
<uni-sign-in ref="signIn"></uni-sign-in>
|
||||
<view class="userInfo" @click.capture="toUserInfo">
|
||||
<cloud-image width="150rpx" height="150rpx" v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url"
|
||||
:src="userInfo.avatar_file.url"></cloud-image>
|
||||
|
||||
<view v-else class="defaultAvatarUrl">
|
||||
<uni-icons color="#ffffff" size="50" type="person-filled" />
|
||||
</view>
|
||||
|
||||
<view class="logo-title">
|
||||
<text class="uer-name" v-if="hasLogin">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</text>
|
||||
<text class="uer-name" v-else>{{$t('mine.notLogged')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-grid class="grid" :column="4" :showBorder="false" :square="true">
|
||||
<uni-grid-item class="item" v-for="(item,index) in gridList" @click.native="tapGrid(index)" :key="index">
|
||||
<uni-icons class="icon" color="#007AFF" :type="item.icon" size="26"></uni-icons>
|
||||
<text class="text">{{item.text}}</text>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
<uni-list class="center-list" v-for="(sublist , index) in ucenterList" :key="index">
|
||||
<uni-list-item v-for="(item,i) in sublist" :title="item.title" link :rightText="item.rightText" :key="i"
|
||||
:clickable="true" :to="item.to" @click="ucenterListClick(item)" :show-extra-icon="true"
|
||||
:extraIcon="{type:item.icon,color:'#999'}">
|
||||
<template v-slot:footer>
|
||||
<view v-if="item.showBadge" class="item-footer">
|
||||
<text class="item-footer-text">{{item.rightText}}</text>
|
||||
<view class="item-footer-badge"></view>
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update';
|
||||
import callCheckVersion from '@/uni_modules/uni-upgrade-center-app/utils/call-check-version';
|
||||
// #ifdef APP
|
||||
import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
|
||||
const uniShare = new UniShare()
|
||||
// #endif
|
||||
const db = uniCloud.database();
|
||||
import {
|
||||
store,
|
||||
mutations
|
||||
} from '@/uni_modules/uni-id-pages/common/store.js'
|
||||
export default {
|
||||
// #ifdef APP
|
||||
onBackPress({
|
||||
from
|
||||
}) {
|
||||
if (from == 'backbutton') {
|
||||
this.$nextTick(function() {
|
||||
uniShare.hide()
|
||||
})
|
||||
return uniShare.isShow;
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
data() {
|
||||
return {
|
||||
gridList: [{
|
||||
"text": this.$t('mine.noticeText'),
|
||||
"icon": "email"
|
||||
},
|
||||
{
|
||||
"text": this.$t('mine.appsText'),
|
||||
"icon": "cloud-upload"
|
||||
},
|
||||
{
|
||||
"text": this.$t('mine.scanText'),
|
||||
"event": "toScan",
|
||||
"icon": "scan"
|
||||
},
|
||||
{
|
||||
"text": this.$t('mine.scoreText'),
|
||||
"icon": "shop"
|
||||
}
|
||||
],
|
||||
ucenterList: [
|
||||
[
|
||||
// #ifdef APP-PLUS
|
||||
{
|
||||
"title": this.$t('mine.signInByAd'),
|
||||
"event": 'signInByAd',
|
||||
"icon": "compose"
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
"title": this.$t('mine.signIn'),
|
||||
"event": 'signIn',
|
||||
"icon": "compose"
|
||||
},
|
||||
// #ifdef APP-PLUS
|
||||
{
|
||||
"title": this.$t('mine.toEvaluate'),
|
||||
"event": 'gotoMarket',
|
||||
"icon": "star"
|
||||
},
|
||||
//#endif
|
||||
{
|
||||
"title": this.$t('mine.readArticles'),
|
||||
"to": './read-news-log/read-news-log',
|
||||
"icon": "flag"
|
||||
},
|
||||
{
|
||||
"title": this.$t('mine.myScore'),
|
||||
"to": '',
|
||||
"event": 'getScore',
|
||||
"icon": "paperplane"
|
||||
}
|
||||
// #ifdef APP-PLUS
|
||||
, {
|
||||
"title": this.$t('mine.invite'),
|
||||
"event": 'share',
|
||||
"icon": "redo"
|
||||
}
|
||||
// #endif
|
||||
],
|
||||
[{
|
||||
"title": this.$t('mine.feedback'),
|
||||
"to": '/uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback',
|
||||
"icon": "help"
|
||||
}, {
|
||||
"title": this.$t('mine.newsList'),
|
||||
"to": '/uni_modules/uni-cms-article/pages/list/list',
|
||||
"icon": "list"
|
||||
}, {
|
||||
"title": this.$t('mine.articleList'),
|
||||
"to": '/pages/uni-starter/list/list',
|
||||
"icon": "settings"
|
||||
}, {
|
||||
"title": this.$t('mine.settings'),
|
||||
"to": './settings/settings',
|
||||
"icon": "gear"
|
||||
}]
|
||||
// #ifdef APP-PLUS
|
||||
,
|
||||
[{
|
||||
"title": this.$t('mine.about'),
|
||||
"to": './about/about',
|
||||
"icon": "info"
|
||||
}]
|
||||
// #endif
|
||||
],
|
||||
listStyles: {
|
||||
"height": "150rpx", // 边框高度
|
||||
"width": "150rpx", // 边框宽度
|
||||
"border": { // 如果为 Boolean 值，可以控制边框显示与否
|
||||
"color": "#eee", // 边框颜色
|
||||
"width": "1px", // 边框宽度
|
||||
"style": "solid", // 边框样式
|
||||
"radius": "100%" // 边框圆角，支持百分比
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
//#ifdef APP-PLUS
|
||||
this.ucenterList[this.ucenterList.length - 2].unshift({
|
||||
title: this.$t('mine.checkUpdate'), // this.this.$t('mine.checkUpdate')"检查更新"
|
||||
rightText: this.appVersion.version + '-' + this.appVersion.versionCode,
|
||||
event: 'checkVersion',
|
||||
icon: 'loop',
|
||||
showBadge: this.appVersion.hasNew
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
onShow() {},
|
||||
computed: {
|
||||
userInfo() {
|
||||
return store.userInfo
|
||||
},
|
||||
hasLogin() {
|
||||
return store.hasLogin
|
||||
},
|
||||
// #ifdef APP-PLUS
|
||||
appVersion() {
|
||||
return getApp().appVersion
|
||||
},
|
||||
// #endif
|
||||
appConfig() {
|
||||
return getApp().globalData.config
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toSettings() {
|
||||
uni.navigateTo({
|
||||
url: "./settings/settings"
|
||||
})
|
||||
},
|
||||
signIn() { //普通签到
|
||||
this.$refs.signIn.open()
|
||||
},
|
||||
signInByAd() { //看激励视频广告签到
|
||||
this.$refs.signIn.showRewardedVideoAd()
|
||||
},
|
||||
/**
|
||||
* 个人中心项目列表点击事件
|
||||
*/
|
||||
ucenterListClick(item) {
|
||||
if (!item.to && item.event) {
|
||||
this[item.event]();
|
||||
}
|
||||
},
|
||||
async checkVersion() {
|
||||
let res = await callCheckVersion()
|
||||
console.log(res);
|
||||
if (res.result.code > 0) {
|
||||
checkUpdate()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.result.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
toUserInfo() {
|
||||
uni.navigateTo({
|
||||
url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
|
||||
})
|
||||
},
|
||||
//TODO,扫码识别后的相应操作
|
||||
toScan() {
|
||||
uni.scanCode({
|
||||
onlyFromCamera: true,
|
||||
scanType: ["qrCode"],
|
||||
success: (e) => {
|
||||
console.log(e.result)
|
||||
},
|
||||
fail: (e) => {
|
||||
console.error(e)
|
||||
}
|
||||
})
|
||||
},
|
||||
tapGrid(index) {
|
||||
if (!this.gridList[index].event) {
|
||||
uni.showToast({
|
||||
// title: '你点击了，第' + (index + 1) + '个',
|
||||
title: this.$t('mine.clicked') + " " + (index + 1),
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
// console.log(this.gridList[index]);
|
||||
this[this.gridList[index].event]();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 去应用市场评分
|
||||
*/
|
||||
gotoMarket() {
|
||||
// #ifdef APP-PLUS
|
||||
if (uni.getSystemInfoSync().platform == "ios") {
|
||||
// 这里填写appstore应用id
|
||||
let appstoreid = this.appConfig.marketId.ios; // 'id1417078253';
|
||||
console.log({
|
||||
appstoreid
|
||||
});
|
||||
plus.runtime.openURL("itms-apps://" + 'itunes.apple.com/cn/app/wechat/' + appstoreid + '?mt=8',
|
||||
err => {
|
||||
console.log('plus.runtime.openURL err:' + JSON.stringify(err));
|
||||
});
|
||||
}
|
||||
if (uni.getSystemInfoSync().platform == "android") {
|
||||
var Uri = plus.android.importClass("android.net.Uri");
|
||||
var uri = Uri.parse("market://details?id=" + this.appConfig.marketId.android);
|
||||
var Intent = plus.android.importClass('android.content.Intent');
|
||||
var intent = new Intent(Intent.ACTION_VIEW, uri);
|
||||
var main = plus.android.runtimeMainActivity();
|
||||
main.startActivity(intent);
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 获取积分信息
|
||||
*/
|
||||
getScore() {
|
||||
if (!this.userInfo) return uni.showToast({
|
||||
title: this.$t('mine.checkScore'),
|
||||
icon: 'none'
|
||||
});
|
||||
uni.showLoading({
|
||||
mask: true
|
||||
})
|
||||
db.collection("uni-id-scores")
|
||||
.where('"user_id" == $env.uid')
|
||||
.field('score,balance')
|
||||
.orderBy("create_date", "desc")
|
||||
.limit(1)
|
||||
.get()
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
const data = res.result.data[0];
|
||||
let msg = '';
|
||||
msg = data ? (this.$t('mine.currentScore') + data.balance) : this.$t('mine.noScore');
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
icon: 'none'
|
||||
});
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
async share() {
|
||||
let {
|
||||
result
|
||||
} = await db.collection('uni-id-users').where("'_id' == $cloudEnv_uid").field('my_invite_code')
|
||||
.get()
|
||||
let myInviteCode = result.data[0].my_invite_code
|
||||
if (!myInviteCode) {
|
||||
return uni.showToast({
|
||||
title: '请检查uni-config-center中uni-id配置，是否已启用 autoSetInviteCode',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
console.log({
|
||||
myInviteCode
|
||||
});
|
||||
let {
|
||||
appName,
|
||||
logo,
|
||||
company,
|
||||
slogan
|
||||
} = this.appConfig.about
|
||||
// #ifdef APP-PLUS
|
||||
uniShare.show({
|
||||
content: { //公共的分享类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
|
||||
type: 0,
|
||||
href: this.appConfig.h5.url +
|
||||
`/#/pages/ucenter/invite/invite?code=uniInvitationCode:${myInviteCode}`,
|
||||
title: appName,
|
||||
summary: slogan,
|
||||
imageUrl: logo +
|
||||
'?x-oss-process=image/resize,m_fill,h_100,w_100' //压缩图片解决，在ios端分享图过大导致的图片失效问题
|
||||
},
|
||||
menus: [{
|
||||
"img": "/static/app-plus/sharemenu/wechatfriend.png",
|
||||
"text": this.$t('common.wechatFriends'),
|
||||
"share": {
|
||||
"provider": "weixin",
|
||||
"scene": "WXSceneSession"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/wechatmoments.png",
|
||||
"text": this.$t('common.wechatBbs'),
|
||||
"share": {
|
||||
"provider": "weixin",
|
||||
"scene": "WXSceneTimeline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/weibo.png",
|
||||
"text": this.$t('common.weibo'),
|
||||
"share": {
|
||||
"provider": "sinaweibo"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/qq.png",
|
||||
"text": "QQ",
|
||||
"share": {
|
||||
"provider": "qq"
|
||||
}
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/copyurl.png",
|
||||
"text": this.$t('common.copy'),
|
||||
"share": "copyurl"
|
||||
},
|
||||
{
|
||||
"img": "/static/app-plus/sharemenu/more.png",
|
||||
"text": this.$t('common.more'),
|
||||
"share": "shareSystem"
|
||||
}
|
||||
],
|
||||
cancelText: this.$t('common.cancelShare'),
|
||||
}, e => { //callback
|
||||
console.log(e);
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* #ifndef APP-NVUE */
|
||||
view {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/* #endif*/
|
||||
|
||||
.center {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
// padding: 20rpx;
|
||||
padding-top: 60px;
|
||||
background-image: url(@/static/uni-center/headers.png);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.defaultAvatarUrl {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
background-color: #007aff;
|
||||
border-radius: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uer-name {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 38rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.center-list {
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.center-list-cell {
|
||||
width: 750rpx;
|
||||
background-color: #007AFF;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.grid {
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.uni-grid .text {
|
||||
font-size: 16px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
color: #817f82;
|
||||
}
|
||||
|
||||
.uni-grid .item ::v-deep .uni-grid-item__box {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
/*修改边线粗细示例*/
|
||||
/* #ifndef APP-NVUE */
|
||||
.center-list ::v-deep .uni-list--border:after {
|
||||
-webkit-transform: scaleY(0.2);
|
||||
transform: scaleY(0.2);
|
||||
margin-left: 80rpx;
|
||||
}
|
||||
|
||||
.center-list ::v-deep .uni-list--border-top,
|
||||
.center-list ::v-deep .uni-list--border-bottom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.item-footer {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-footer-text {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
.item-footer-badge {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
border-radius: 50%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
border-radius: 10rpx;
|
||||
/* #endif */
|
||||
background-color: #DD524D;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user