Commit ce47e9e8 authored by 王李辉's avatar 王李辉

Merge branch 'develop' of http://git.censoft.com.cn/BCDH-HSE/bcdh-app into develop

parents 4ace7efc bef64032
![](static-files/newbee-mall.png)
![Build Status](https://img.shields.io/badge/build-passing-green.svg)
![Version 2.0.0](https://img.shields.io/badge/version-2.0.0-yellow.svg)
[![License](https://img.shields.io/badge/license-GPL3.0-blue.svg)](https://github.com/newbee-ltd/newbee-mall-vue-app/blob/master/LICENSE)
newbee-mall 项目是一套电商系统,包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统,基于 Spring Boot 2.X 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。
本仓库中的源码为新蜂商城前后端分离版本的 Vue 项目(Vue 版本为 2.x),主要面向前端开发人员,后端 API 源码在另外一个仓库 [newbee-mall-api](https://github.com/newbee-ltd/newbee-mall-api)
新蜂商城 Vue 版本线上预览地址:[http://vue-app.newbee.ltd](http://47.99.134.126:5000),账号可自行注册,建议使用手机模式打开。
前后端分离版本包括四个仓库:
- [新蜂商城后端接口 newbee-mall-api](https://github.com/newbee-ltd/newbee-mall-api)
- [新蜂商城 Vue2 版本 newbee-mall-vue-app](https://github.com/newbee-ltd/newbee-mall-vue-app)
- [新蜂商城 Vue3 版本 newbee-mall-vue3-app](https://github.com/newbee-ltd/newbee-mall-vue3-app)
- [新蜂商城后台管理系统 Vue3 版本 vue3-admin](https://github.com/newbee-ltd/vue3-admin)
>Vue2 版本与 Vue3 版本分成两个仓库,大家需要哪个版本就去对应的仓库即可。
**坚持不易,如果觉得项目还不错的话可以给项目一个 Star 吧,也是对我一直更新代码的一种鼓励啦,谢谢各位的支持。**
![newbee-mall-info](https://newbee-mall.oss-cn-beijing.aliyuncs.com/poster/store/newbee-mall-star.png)
关注公众号:**程序员十三**,回复"勾搭"进群交流。
![wx-gzh](https://newbee-mall.oss-cn-beijing.aliyuncs.com/wx-gzh/%E7%A8%8B%E5%BA%8F%E5%91%98%E5%8D%81%E4%B8%89-%E5%85%AC%E4%BC%97%E5%8F%B7.png)
## 开发及部署文档
- [向“全栈”进发!大型线上商城实战项目,Spring Boot + Vue 前后端分离版本的商城来了!](https://juejin.im/book/6844733826191589390)
- [项目须知和课程约定](https://juejin.im/book/6844733826191589390)
- [全栈开发!你必须要知道的“前后端分离”](https://juejin.im/book/6844733826191589390)
- [前端模块化的发展历史](https://juejin.im/book/6844733826191589390)
- [传统页面和单页面的权衡与抉择](https://juejin.im/book/6844733826191589390)
- [准备工作及基础环境搭建(后端)](https://juejin.im/book/6844733826191589390)
- [Spring Boot 项目初体验--项目搭建及启动](https://juejin.im/book/6844733826191589390)
- [项目编码简化利器!Spring Boot 整合 Lombok](https://juejin.im/book/6844733826191589390)
- [Lombok 插件问题处理](https://juejin.im/book/6844733826191589390)
- [商城后端项目启动和运行注意事项](https://juejin.im/book/6844733826191589390)
- [VSCode 的相关配置及插件介绍](https://juejin.im/book/6844733826191589390)
- [基础篇:Vue 指令](https://juejin.im/book/6844733826191589390)
- [基础篇:Vue全局API及生命周期介绍](https://juejin.im/book/6844733826191589390)
- [基础篇: CSS 预处理工具Less的介绍及使用](https://juejin.im/book/6844733826191589390)
- [Vue 脚手架工具 Vue-Cli 配置介绍](https://juejin.im/book/6844733826191589390)
- [Vue-Router 浅析原理及使用](https://juejin.im/book/6844733826191589390)
- [全局状态管理插件 Vuex 介绍及使用](https://juejin.im/book/6844733826191589390)
- [商城前端 H5 开发环境搭建及项目启动](https://juejin.im/book/6844733826191589390)
- [前后端交互文档利器!Spring Boot 整合 Swagger](https://juejin.im/book/6844733826191589390)
- [接口参数处理和统一响应结果](https://juejin.im/book/6844733826191589390)
- [口设计规范及接口调用实践](https://juejin.im/book/6844733826191589390)
- [商城开发实战-用户登录接口开发](https://juejin.im/book/6844733826191589390)
- [商城开发实战-用户身份认证详解](https://juejin.im/book/6844733826191589390)
- [商城开发实战-首页模块接口开发](https://juejin.im/book/6844733826191589390)
- [商城开发实战-分类模块接口开发](https://juejin.im/book/6844733826191589390)
- [商城开发实战-商品搜索模块接口开发](https://juejin.im/book/6844733826191589390)
- [商城开发实战-购物车模块接口开发](https://juejin.im/book/6844733826191589390)
- [商城开发实战-个人信息及收货地址接口开发](https://juejin.im/book/6844733826191589390)
- [商城开发实战-下单流程接口开发](https://juejin.im/book/6844733826191589390)
- [商城开发实战-订单处理流程详解](https://juejin.im/book/6844733826191589390)
- [商城移动端开发实战-新蜂商城底部导航(抽离公共组件)](https://juejin.im/book/6844733826191589390)
- [商城移动端开发实战-新蜂商城登录注册页(前端鉴权)](https://juejin.im/book/6844733826191589390)
- [商城移动端开发实战-商城首页制作(轮播图、首页商品列表)](https://juejin.im/book/6844733826191589390)
- [商城移动端开发实战-商品分类页面制作(better-scrol的介绍及使用)](https://juejin.im/book/6844733826191589390)
- [商城移动端开发实战-商品列表页面制作(无限滚动加载)](https://juejin.im/book/6844733826191589390)
- [商城移动端开发实战-商品详情页面制作(Vuex 购物车数量全局管理)](https://juejin.im/book/6844733826191589390)
- [商城移动端开发实战-商城购物车页面制作(购物车页)](https://juejin.im/book/6844733826191589390)
- [商城移动端开发实战-确认订单页面制作](https://juejin.im/book/6844733826191589390)
- [商城移动端开发实战-地址栏管理页面制作](https://juejin.im/book/6844733826191589390)
- [商城移动端开发实战-我的订单页面制作](https://juejin.im/book/6844733826191589390)
- [Vue 3.x 新特性概览](https://juejin.im/book/6844733826191589390)
- [新蜂商城迁移至 Vue 3.x 流程讲解](https://juejin.im/book/6844733826191589390)
## 联系作者
> 大家有任何问题或者建议都可以在 [issues](https://github.com/newbee-ltd/newbee-mall-vue-app/issues) 中反馈给我,我会慢慢完善这个项目。
- 我的邮箱:2449207463@qq.com
- QQ技术交流群:932227898 719099151 796794009
## 软件著作权
>本系统已申请软件著作权,受国家版权局知识产权以及国家计算机软件著作权保护!
![](https://newbee-mall.oss-cn-beijing.aliyuncs.com/poster/store/newbee-mall-copyright-02.png)
## 页面展示
以下为新蜂商城 Vue 版本的页面预览:
- 登录页
![](static-files/登录.png)
- 首页
![](static-files/首页.png)
- 商品搜索
![](static-files/商品搜索.png)
- 商品详情页
![](static-files/详情页.png)
- 购物车
![](static-files/购物车.png)
- 生成订单
![](static-files/生成订单.png)
- 地址管理
![](static-files/地址管理.png)
- 订单列表
![](static-files/订单列表.png)
- 订单详情
![](static-files/订单详情.png)
## 感谢
- [Vue](https://github.com/vuejs/vue)
- [Vant](https://github.com/youzan/vant)
- [vue2-verify](https://github.com/mizuka-wu/vue2-verify)
- [better-scroll](https://github.com/ustbhuangyi/better-scroll)
- [Vuex](https://github.com/vuejs/vuex)
......@@ -11632,6 +11632,14 @@
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
"integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
},
"vue-esign": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/vue-esign/-/vue-esign-1.0.5.tgz",
"integrity": "sha512-XwJWnV3YJfilT1qIU8CbJgPRdUltONuv6fjCaMAbvkt6Juidm2m9g73H+2FhPbn7nEliB2q7kZEnQXhbWP4mCw==",
"requires": {
"vue": "^2.5.11"
}
},
"vue-eslint-parser": {
"version": "5.0.0",
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-5.0.0.tgz",
......
......@@ -19,6 +19,7 @@
"s": "^1.0.0",
"vant": "^2.12.30",
"vue": "^2.6.10",
"vue-esign": "^1.0.5",
"vue-router": "^3.0.7",
"vue2-verify": "^1.1.5",
"vuex": "^3.1.2"
......
......@@ -18,7 +18,8 @@ import { prefix } from '@/common/js/utils'
import { Divider, Popup, Overlay, Loading, Dialog, ContactCard, Form, AddressEdit, AddressList, Field, CellGroup, Cell, SwipeCell, Icon, Stepper, Card, Checkbox, CheckboxGroup, Button, Swipe, SwipeItem, PullRefresh, List, Tab, Tabs, GoodsAction, GoodsActionIcon, GoodsActionButton, SubmitBar, Toast ,Search,Picker,Uploader,Notify ,ContactList,Calendar,Radio,RadioGroup,Tag,Tabbar,TabbarItem,Sticky, Grid, GridItem,Skeleton,Col,Row, Image as VanImage, Badge,NoticeBar,DatetimePicker,
Step, Steps } from 'vant'
import 'lib-flexible/flexible'
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
Vue.use(Divider).use(Popup).use(Overlay).use(Loading).use(Dialog).use(Toast).use(ContactCard).use(Form).use(AddressEdit).use(AddressList).use(Field).use(CellGroup).use(Cell).use(SwipeCell).use(Icon).use(Stepper).use(Card).use(Button).use(Swipe).use(SwipeItem).use(PullRefresh).use(List).use(Tab).use(Tabs).use(GoodsAction).use(GoodsActionIcon).use(GoodsActionButton).use(SubmitBar).use(Checkbox).use(CheckboxGroup).use(Search).use(Picker).use(Uploader).use(Notify)
.use(ContactList).use(Calendar).use(Radio).use(RadioGroup).use(Tag).use(Tabbar).use(TabbarItem).use(Sticky)
.use(Grid).use(GridItem).use(Skeleton).use(Col).use(Row).use(VanImage).use(Badge).use(NoticeBar).use(DatetimePicker).use(Step).use(Steps)
......
......@@ -216,6 +216,15 @@ const routes = [
},
component: () => import(/* webpackChunkName: "create-order" */ '../views/notice/noticeList'),
},
{
path: '/sign',
name: 'sign',
meta: {
title:'电子签名',
index: 3
},
component: () => import(/* webpackChunkName: "create-order" */ '../views/notice/noticeList/sign'),
},
// 登录页
{
path: '/login2',
......
......@@ -27,6 +27,7 @@
<div>检查开始时间:{{item.planStartTime}}</div>
<div>检查结束时间:{{item.planEndTime}}</div>
<div>检查地点:{{item.address}}</div>
<div>是否提交:{{item.finish?'已提交':'未提交'}}</div>
</div>
</div>
</template>
......@@ -43,7 +44,8 @@ export default {
return {
value:'',//列表搜索关键字值
checkedList:[],//检查列表
text:'检查执行'//顶部文本
text:'检查执行',//顶部文本
finish:'',//问题是否提交
}
},
mounted() {
......@@ -69,13 +71,13 @@ export default {
},
/* 搜索查询列表接口 */
onSearch(){
console.log(111)
getFun('check/carry/user/list',{name:this.value}).then((Response)=>{
this.checkedList=Response.data
})
},
cardLocation(item){
sessionStorage.setItem('id',item.id)
sessionStorage.setItem('finish',item.finish)
this.$router.push({name:'problem',params:{id:item.id}})//此id来判断是否加载问题上报新数据
}
}
......
......@@ -30,7 +30,7 @@
<td align="center" v-text="item2.checkContent" style="width:20%"></td>
<td align="center" v-text="item2.checkBasis" style="width:30%"></td>
<td align="center">
<van-radio-group v-model="item2.checkStatus" :disabled="item2.isDisabled">
<van-radio-group v-model="item2.checkStatus" :disabled="finish=='true'?true:item2.isDisabled">
<van-radio name="0" >合格</van-radio>
<van-radio name="1" @click="noGrage(item2)" >不合格</van-radio>
</van-radio-group>
......@@ -62,12 +62,16 @@ export default {
id:'',//检查执行清单id
active:0,//tab默认选中状态
text:'问题上报表',//顶部文本
finish:'',//提交状态
}
},
mounted() {
if(this.$route.query.id){
this.id=this.$route.query.id
}
if(sessionStorage.getItem('finish')){
this.finish=sessionStorage.getItem('finish')
}
this.init()
},
methods: {
......
......@@ -19,10 +19,10 @@
<div>检查地点:{{nums.address}}</div>
</div>
<div class="button-more">
<van-button type="primary" round size="large" @click="problem">检查问题上报{{nums.troubleNumber}}</van-button>
<van-button type="primary" round size="large" @click="problem" :disabled="finish=='true'?true:false">检查问题上报{{nums.addTroubleNumber}}</van-button>
<van-button type="primary" round size="large" @click="formwork">检查清单模板{{nums.listNumber}}</van-button>
<van-button type="primary" round size="large" @click="note">检查问题记录{{nums.addTroubleNumber}}</van-button>
<van-button type="primary" round size="large" @click="end">结束上报</van-button>
<van-button type="primary" round size="large" @click="note" :disabled="nums.addTroubleNumber<1?true:false">检查问题记录{{nums.troubleNumber}}</van-button>
<van-button type="primary" round size="large" @click="end" :disabled="finish=='true'?true:false">结束上报</van-button>
</div>
</div>
</template>
......@@ -39,19 +39,27 @@ export default {
return {
id:'',//问题上报清单列表列表id
nums:{},//问题上报清单列表
text:'问题上报'//顶部文本
text:'问题上报',//顶部文本
finish:'',//提交状态
}
},
mounted() {
//请求新数据
if(this.$route.params.id){
this.id=sessionStorage.getItem('id')
this.finish=sessionStorage.getItem('finish')
this.init()
}
//缓存数据获取
//缓存数据获取---不更新检查执行id时,获取缓存执行id
else if(sessionStorage.getItem('id')){
this.id=sessionStorage.getItem('id')
this.nums=JSON.parse(sessionStorage.getItem('nums'))
this.finish=sessionStorage.getItem('finish')
if(this.$route.query.pageName){
this.init()
}else{
//当清单模板,问题列表,问题记录不进行提交操作返回该页面调用缓存数据
this.nums=JSON.parse(sessionStorage.getItem('nums'))
}
}
},
methods: {
......@@ -95,12 +103,13 @@ export default {
this.$router.push({
name:'note',
query:{
id:this.nums.id
id:this.nums.id,
finish:this.finish
}
})
},
formwork(){
this.$router.push({name:'formwork',query:{id:this.id}})
this.$router.push({name:'formwork',query:{id:this.id,finish:this.finish}})
}
}
}
......
......@@ -183,7 +183,12 @@ export default {
message:'提交成功',
duration: 2000
})
history.go(-1)
this.$router.push({
name:'problem',
query:{
pageName:'problemList'
}
})
}).catch(()=>{
this.$toast.clear()
this.$toast.fail('提交失败,请稍后再试')
......
......@@ -13,7 +13,7 @@
<LHeader v-bind:text="text"></LHeader>
<van-checkbox-group v-model="result" @change="checkedEvent" ref="checkboxGroup">
<div class="card" v-for="(item,index) in list" :key="index" >
<van-checkbox :name="item.id" :disabled="item.checkSubmitId?true:false">问题{{item.id}}</van-checkbox>
<van-checkbox :name="item.id" :disabled="finish=='true'?true:item.checkSubmitId?true:false">问题{{item.id}}</van-checkbox>
<div>问题名称:{{item.title}}</div>
<div>问题位置:{{item.address}}</div>
<div>问题内容:{{item.context}}</div>
......@@ -21,9 +21,9 @@
</div>
</van-checkbox-group>
<div class="page-footer">
<van-checkbox v-model="checkedAll" @change="checkedAllEvent" @click="checkedAllClick">全选</van-checkbox>
<van-button round type="defult" @click="cancel">取消</van-button>
<van-button round type="info" @click="commit">提交</van-button>
<van-checkbox v-model="checkedAll" @change="checkedAllEvent" @click="checkedAllClick" :disabled="finish=='true'?true:false">全选</van-checkbox>
<van-button round type="defult" @click="cancel" :disabled="finish=='true'?true:false">取消</van-button>
<van-button round type="info" @click="commit" :disabled="finish=='true'?true:false">提交</van-button>
</div>
</div>
</template>
......@@ -44,12 +44,16 @@ export default {
result: [],//问题记录复选数组
list:[],//列表数组
id:'',//检查执行id
finish:'',//提交状态
}
},
mounted() {
if(this.$route.query.id){
this.id=this.$route.query.id
}
if(this.$route.query.finish){
this.finish=this.$route.query.finish
}
this.init()
},
methods: {
......@@ -130,7 +134,12 @@ export default {
duration: 0
})
postFun('check/carry/trouble/submit',obj).then((Response)=>{
this.$router.push('/correct')
this.$router.push({
name:'problem',
query:{
pageName:'problemNote'
}
})
this.$toast.clear()
this.$toast.success('提交成功')
}).catch(()=>{
......
......@@ -35,7 +35,7 @@ export default {
data() {
return {
noticeList:[],//整改通知管理列表
text:'整改通知管理'
text:'整改通知管理',
}
},
mounted() {
......@@ -57,6 +57,8 @@ export default {
})
},
cardLocation(item){
sessionStorage.setItem('finish',item.finish)
sessionStorage.setItem('id',item.id)
this.$router.push({
name:'noticeList',
query:{
......
......@@ -11,8 +11,8 @@
<template>
<div>
<LHeader v-bind:text="text"></LHeader>
<van-tabs v-model="active">
<LHeader v-bind:text="text"></LHeader>
<van-tabs v-model="active" @click="tabClick">
<van-tab title="上报状态">
<table border="1" cellspacing="0">
<thead>
......@@ -36,7 +36,7 @@
<van-tab title="问题记录">
<van-checkbox-group v-model="result" @change="checkedEvent" ref="checkboxGroup">
<div class="card" v-for="(item,index) in noticeQuestionList" :key="index" >
<van-checkbox :name="item.id" :disabled="item.checkSubmitId?true:false">问题{{item.id}}</van-checkbox>
<van-checkbox :name="item.id" :disabled="finish=='true'?true:item.checkSubmitId?true:false">问题{{item.id}}</van-checkbox>
<div>负责人姓名:{{item.realName}}</div>
<div>问题名称:{{item.title}}</div>
<div>问题位置:{{item.address}}</div>
......@@ -45,7 +45,7 @@
</div>
</van-checkbox-group>
<div class="page-footer">
<van-checkbox v-model="checkedAll" @change="checkedAllEvent" @click="checkedAllClick">全选</van-checkbox>
<van-checkbox v-model="checkedAll" @change="checkedAllEvent" @click="checkedAllClick" :disabled="finish=='true'?true:false">全选</van-checkbox>
</div>
<van-field
readonly
......@@ -54,13 +54,13 @@
:value="value"
label="整改完成日期"
placeholder="请选择日期"
@click="showCalendar = true"
@click="calendarOpen"
/>
<van-calendar v-model="showCalendar" @confirm="onConfirm" />
<div class="sign"><span>检查组负责人签字确认:</span><van-tag color="#ffe1e1">电子签字</van-tag></div>
<div class="sign"><span>检查组负责人签字确认:</span><van-tag color="#ffe1e1" :disabled="finish=='true'?true:false"><p v-show="istext" @click="sign" >电子签字</p><img class="sign-img" v-show="isImg" :src="resultImg" alt=""></van-tag></div>
<div class="page-footer-button">
<van-button round type="info" size="large" @click="commit">生成整改通知单</van-button>
<van-button round type="defult" size="large" @click="cancel">取消</van-button>
<van-button round type="info" size="large" @click="commit" :disabled="finish=='true'?true:false">生成整改通知单</van-button>
<van-button round type="defult" size="large" @click="cancel" :disabled="finish=='true'?true:false">取消</van-button>
</div>
</van-tab>
</van-tabs>
......@@ -77,6 +77,9 @@ export default {
},
data() {
return {
istext:true,//是否显示文字
isImg:false,//是否显示图片
resultImg:'',//电子签名图片
noticeQuestionList:[],//整改通知问题记录列表
active: 0,//tab选中状态
checkedAll:false,//全选状态
......@@ -86,14 +89,32 @@ export default {
value: '',//日期值
id:'',//整改通知id
showCalendar: false,//弹出层状态
finish:'',//检查状态
}
},
watch:{
},
mounted() {
if(this.$route.query.id){
this.id=this.$route.query.id
//获取检查id
if(sessionStorage.getItem('id')){
this.id=sessionStorage.getItem('id')
}
//获取检查状态
if(sessionStorage.getItem('finish')){
this.finish=sessionStorage.getItem('finish')
}
this.init()
// this.$toast.clear()
//从session中获取签名生成的图片
if(sessionStorage.getItem('resultImg')){
console.log(sessionStorage.getItem('resultImg'))
this.resultImg=sessionStorage.getItem('resultImg')
}
//获取图片是否显示的布尔值
if(this.$route.query.isImg){
this.istext=false
this.isImg=true
}
},
methods: {
/* 同步请求上报状态列表问题记录列表 */
......@@ -119,7 +140,6 @@ export default {
problem(){
this.noticeQuestionList=[]
getFun('check/notify/trouble/list',{planId:this.id}).then((Response)=>{
this.noticeQuestionList=Response.data
this.noticeQuestionList=Response.data
this.noticeQuestionList.forEach((item)=>{
if(item.checkSubmitId){
......@@ -157,12 +177,35 @@ export default {
},
/* 时间戳转换 */
onConfirm(date) {
this.value = `${date.getMonth() + 1}/${date.getDate()}`;
this.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
console.log(this.value)
this.showCalendar = false;
},
cancel(){
this.$toast('取消')
},
//日期输入框点击事件
calendarOpen(){
if(this.finish=='false'){
this.showCalendar = true
}
},
//标签点击事件防止标签切换首次进入不执行复选框监听事件
tabClick(idx){
if(idx==1){
if(this.result.length==this.noticeQuestionList.length){
this.checkedAll=true
}else if(this.result.length<this.noticeQuestionList.length){
this.checkedAll=false
}
}
},
//电子签名
sign(){
if(this.finish=='false'){
this.$router.push('/sign')
}
},
//提交问题记录
commit(){
var checkedList=[]
......@@ -174,6 +217,12 @@ export default {
}
})
})
var obj={
planId:this.id,
troubleIds:checkedList,
finishTime:this.value,
leaderSign:this.resultImg
}
this.$dialog.confirm({
title: '提示',
message: '确定提交检查问题?',
......@@ -184,14 +233,14 @@ export default {
loadingType: 'spinner',
duration: 0
})
postFun('check/notify/trouble',{planId:this.id,troubleIds:checkedList,date:this.value}).then((Response)=>{
postFun('check/notify/trouble',obj).then((Response)=>{
this.$toast.clear()
this.$toast.success('提交成功')
this.$router.push('/notice')
}).catch(()=>{
this.$toast.clear()
this.$toast.fail('提交失败,请稍后再试')
})
// this.$router.push('/correct')
})
}
}
......@@ -224,6 +273,10 @@ export default {
text-align: center;
}
.sign{
width: 90%;
height: 2rem;
display: flex;
align-items: center;
margin-top: 0.5rem;
margin-left:0.4rem ;
font-size: 0.37333rem;
......@@ -231,4 +284,8 @@ export default {
.van-tag{
color: #323233
}
.sign-img{
width: 2rem;
height: 1rem;
}
</style>
<template>
<div>
<LHeader v-bind:text="text"></LHeader>
<div style="border: 2px solid #E6E6E6 ;background-color: white">
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
</div>
<div class="page-footer">
<p>请在上方空白处书写您的签字</p>
<van-button round type="primary" size="large" @click="handleReset">清空画板</van-button>
<van-button round type="info" size="large" @click="handleGenerate">生成图片</van-button>
</div>
</div>
</template>
<script>
import LHeader from '@/components/header.vue'
export default {
name: 'sign',
components: {
"LHeader":LHeader
},
data() {
return {
text:'电子签名',
lineWidth: 6,
lineColor: 'red',
bgColor: '',
resultImg: '',
isCrop: false
};
},
methods: {
handleReset () {
this.$refs.esign.reset()
},
// 生成base64格式
handleGenerate () {
this.$refs.esign.generate().then(res => {
this.resultImg = res //把base64赋给img
//生成图片后存储到session中并跳转把图片是否显示的boolean带过去
this.$router.push({name:'noticeList',query:{isImg:true}})
sessionStorage.setItem('resultImg',this.resultImg)
}).catch(err => {
// 画布没有签字时会执行这里
this.$dialog.alert({
title: '提示',
message: '不签名就想提交?做梦!',
theme: 'round-button',
})
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.van-button{
width: 90%;
margin-top: 0.3rem;
}
.page-footer{
text-align: center;
}
.page-footer p{
font-size: 0.3rem;
font-weight: bolder;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment