首次完整推送，
V：1.20240808.006
This commit is contained in:
fm453
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>
|
||||
Reference in New Issue
Block a user