|
@@ -1,68 +1,544 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <view class="">
|
|
|
- <view class="">
|
|
|
- 新增
|
|
|
+ <view>
|
|
|
+ <u-navbar
|
|
|
+ title="我的证件"
|
|
|
+ @leftClick="leftClick"
|
|
|
+ >
|
|
|
+ </u-navbar>
|
|
|
+ <view style="margin-top:70px;" class="flex">
|
|
|
+ <!-- <view :style="{'margin-top':navHeight +'px'}" class="flex"> -->
|
|
|
+ <view @click='addclick' class="button">新增</view>
|
|
|
+ <view @click='share' class="button">分享</view>
|
|
|
+ <!-- <button ref='share' open-type="share" class="button">分享</button> -->
|
|
|
+ <view @click='imageOCR' class="button">识别号码</view>
|
|
|
</view>
|
|
|
- <view class="">
|
|
|
- 分享
|
|
|
- </view>
|
|
|
- <view class="">
|
|
|
- 识别号码
|
|
|
- </view>
|
|
|
- <view class="">
|
|
|
- <view class="">
|
|
|
+
|
|
|
+
|
|
|
+ <mescroll-body v-if='!addstatus&&cardList.length==0||cardList.length>0' :up="upOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
|
|
|
+ <view v-if='cardList.length>0' class="">
|
|
|
+ <view v-for='(item,index) in cardList' class="">
|
|
|
+ <view v-if='!item.editstatus'>{{item.certificateName}}</view>
|
|
|
+ <u--input v-else
|
|
|
+ v-model="item.certificateName"
|
|
|
+ placeholder="输入证件名称"
|
|
|
+ border="none"
|
|
|
+
|
|
|
+ ></u--input>
|
|
|
+ <view @click='edit(item)'>{{!item.editstatus?'编辑':'完成'}}</view>
|
|
|
<u-checkbox-group
|
|
|
- v-model="checkboxValue1"
|
|
|
+ v-model="item.checked"
|
|
|
placement="column"
|
|
|
- @change="checkboxChange">
|
|
|
- <u-checkbox :customStyle="{marginBottom: '8px'}" >
|
|
|
+ @change="checkboxChange($event,index,item)">
|
|
|
+ <u-checkbox :name='index+1' :customStyle="{marginBottom: '8px'}" >
|
|
|
</u-checkbox>
|
|
|
</u-checkbox-group>
|
|
|
|
|
|
+ <image v-if='!item.editstatus' :src="item.certificateImage" mode=""></image>
|
|
|
+ <u-upload
|
|
|
+ v-else
|
|
|
+ @afterRead="afterRead"
|
|
|
+ :fileList="fileList2"
|
|
|
+ @delete="deletePic"
|
|
|
+ name="2"
|
|
|
+ multiple
|
|
|
+ :maxCount="1"
|
|
|
+ ></u-upload>
|
|
|
+ <u-icon @click="del(item)" name="trash-fill" color="#2979ff" size="28"></u-icon>
|
|
|
</view>
|
|
|
<view></view>
|
|
|
</view>
|
|
|
- <view class="">
|
|
|
+ </mescroll-body>
|
|
|
+ <view v-if='addstatus' class="">
|
|
|
<view class="">
|
|
|
+ <u--input
|
|
|
+ v-model="cardData.certificateName"
|
|
|
+ placeholder="输入证件名称"
|
|
|
+ border="none"
|
|
|
|
|
|
+ ></u--input>
|
|
|
</view>
|
|
|
- <view>提交</view>
|
|
|
+ <view @click='add'>提交</view>
|
|
|
<view>
|
|
|
<u-upload
|
|
|
- :fileList="fileList1"
|
|
|
- @afterRead="afterRead"
|
|
|
- @delete="deletePic"
|
|
|
- name="1"
|
|
|
- multiple
|
|
|
- :maxCount="10"
|
|
|
- ></u-upload>
|
|
|
+ @afterRead="afterRead"
|
|
|
+ :fileList="fileList1"
|
|
|
+ @delete="deletePic"
|
|
|
+ name="1"
|
|
|
+ multiple
|
|
|
+ :maxCount="1"
|
|
|
+ ></u-upload>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <u-picker :show="show" :columns="columns"></u-picker>
|
|
|
- <u-modal :show="modalshow" title="提示" content='确定删除证件?'></u-modal>
|
|
|
+ <u-picker @cancel='show=false' @confirm='pickerConfirm' title='识别类型' :show="show" :columns="columns"></u-picker>
|
|
|
+ <u-popup :show="popupshow" mode="bottom" >
|
|
|
+ <view>
|
|
|
+ <view class="share-to">
|
|
|
+ <text>分享到</text>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="block">
|
|
|
+ <button class="wechat" open-type="share">
|
|
|
+ <text class="iconfont icon-pengyouquan"></text>
|
|
|
+ <!-- <image src="/static/img/wechat.png" mode="aspectFill"></image> -->
|
|
|
+ <text>微信</text>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <view class="block" @click="toUrl()">
|
|
|
+ <button class="moment">
|
|
|
+ <text class="iconfont icon-weixin"></text>
|
|
|
+ <!-- <image src="/static/img/moment.png" mode="aspectFill"></image> -->
|
|
|
+ <text>朋友圈</text>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cancel" @click.stop="handleHiddenShare">
|
|
|
+ <text>取消</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-modal @cancel='modalshow=false' confirmText='删除' showCancelButton='true' @confirm='delConfirm' :show="modalshow" title="提示" content='确定删除证件?'></u-modal>
|
|
|
+ <u-modal @cancel='modalshow=false' confirmText='删除' showCancelButton='true' @confirm='delConfirm' :show="modalshow" title="提示" content='确定删除证件?'></u-modal>
|
|
|
+ <u-modal :show="modalstatusshow" confirmText='继续返回' cancelText='取消' @confirm='confirm' @cancel='cancel' showCancelButton='true' title="提示" content='有证件处于编辑状态未提交。'></u-modal>
|
|
|
+ <u-toast ref="uToast"></u-toast>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {systemInfo} from '@/mixin.js';
|
|
|
+ import uploadImage from '@/components/ossutil/uploadFile.js';
|
|
|
+ import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
|
export default {
|
|
|
+ mixins: [MescrollMixin,systemInfo],
|
|
|
+
|
|
|
data() {
|
|
|
return {
|
|
|
show:false,
|
|
|
modalshow:false,
|
|
|
- columns:['选择名片111','识别身份证号','识别1银行卡号']
|
|
|
+ modalstatusshow:false,
|
|
|
+ popupshow:false,
|
|
|
+ columns:[['识别身份证号','识别银行卡号']],
|
|
|
+ userInfo:{},
|
|
|
+ cardData:{},
|
|
|
+ cardList:[],
|
|
|
+ fileList1:[],
|
|
|
+ fileList2:[],
|
|
|
+ checkedList:[],
|
|
|
+ addstatus:false,
|
|
|
+ id:'',
|
|
|
+ credentialsShow:false
|
|
|
};
|
|
|
},
|
|
|
+ onLoad() {
|
|
|
+ console.log(this.statusBarHeight,this.navigationBarHeight ,this.windowHeight ,this.navHeight)
|
|
|
+ // this.getList()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.userInfo = uni.getStorageSync("userInfo")
|
|
|
+ this.cardData.commonId=uni.getStorageSync("userInfo").id
|
|
|
+ },
|
|
|
methods: {
|
|
|
- del(){
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ return {
|
|
|
+ title: '页面分享的标题',
|
|
|
+ path: '/pages/my/my',
|
|
|
+ imageUrl: '/static/imgs/mylogo.png'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ return {
|
|
|
+ title: '页面分享的标题',
|
|
|
+ path: '/pages/my/my',
|
|
|
+ imageUrl: '/static/imgs/mylogo.png'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShareTimeline() {
|
|
|
+ return {
|
|
|
+ title: '商通线上商城',
|
|
|
+ path: '/pages/index/index',
|
|
|
+ imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ edit(item){
|
|
|
+ if(item.editstatus){
|
|
|
+ this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'update',{certificateManagementInfo:JSON.stringify(item)}, failres => {
|
|
|
+ console.log('res+++++', failres.errmsg)
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'error',
|
|
|
+ message: failres.errmsg,
|
|
|
+ })
|
|
|
+ uni.hideLoading()
|
|
|
+ }).then(res => {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'success',
|
|
|
+ message: '编辑成功',
|
|
|
+ })
|
|
|
+ this.modalshow=false
|
|
|
+ this.checkedList=[]
|
|
|
+ uni.hideLoading()
|
|
|
+ this.mescroll.resetUpScroll( )
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ item.editstatus=true
|
|
|
+ this.fileList2=[{url:item.certificateImage}]
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ delConfirm(){
|
|
|
+ this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'delete',{id:this.id}, failres => {
|
|
|
+ console.log('res+++++', failres.errmsg)
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'error',
|
|
|
+ message: failres.errmsg,
|
|
|
+ })
|
|
|
+ uni.hideLoading()
|
|
|
+ }).then(res => {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功',
|
|
|
+ })
|
|
|
+ this.modalshow=false
|
|
|
+ this.checkedList=[]
|
|
|
+ uni.hideLoading()
|
|
|
+ this.mescroll.resetUpScroll( )
|
|
|
+ })
|
|
|
+ },
|
|
|
+ pickerConfirm(e){
|
|
|
+ this.show=false
|
|
|
+ console.log(e)
|
|
|
+ var type='',type1=''
|
|
|
+ if(e.value[0]=='识别身份证号'){
|
|
|
+ type='admin.unimall.certificateManagementInfo'
|
|
|
+ type1='personShibie'
|
|
|
+ }else if(e.value[0]=='识别银行卡号'){
|
|
|
+ type='admin.unimall.certificateManagementInfo'
|
|
|
+ type1='bankShibie'
|
|
|
+ }
|
|
|
+ this.$request.baseRequest(type, type1,{certificateImage:this.cardList[this.checkedList[0]].certificateImage}, failres => {
|
|
|
+ console.log('res+++++', failres.errmsg)
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'error',
|
|
|
+ message: failres.errmsg,
|
|
|
+ })
|
|
|
+ uni.hideLoading()
|
|
|
+ }).then(res => {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'success',
|
|
|
+ message: '识别成功',
|
|
|
+ })
|
|
|
+ uni.hideLoading()
|
|
|
+ this.credentialsShow
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkboxChange(e,i){
|
|
|
+ console.log(e[0],i)
|
|
|
+ if(e[0]){
|
|
|
+ this.checkedList.push(i)
|
|
|
+ }else{
|
|
|
+ var index=this.checkedList.findIndex((item)=>{return item==i})
|
|
|
+ this.checkedList.splice(index,1)
|
|
|
+ }
|
|
|
+ // for(var i=0;i<this.cardList.length;i++){
|
|
|
+ // console.log(this.cardList[i].checked)
|
|
|
+ // // if(this.cardList[i].checkedList.length>0){
|
|
|
+ // // this.checkedList.push(i)
|
|
|
+ // // }
|
|
|
+ // }
|
|
|
+ console.log(this.checkedList)
|
|
|
+ },
|
|
|
+ share(){
|
|
|
+ if(this.checkedList.length==0){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'error',
|
|
|
+ message: '请勾选想要识别的证件!',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.popupshow=true
|
|
|
+ },
|
|
|
+ imageOCR(){
|
|
|
+ console.log(this.cardList,this.checkedList)
|
|
|
+ if(this.checkedList.length==0){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'error',
|
|
|
+ message: '请勾选想要识别的证件!',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.checkedList.length>1){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'error',
|
|
|
+ message: '一次只能勾选一张证件!',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.show=true
|
|
|
+ },
|
|
|
+ confirm(){
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+ cancel(){
|
|
|
+ this.modalstatusshow=false
|
|
|
+ },
|
|
|
+ leftClick(){
|
|
|
+ if(this.cardData.certificateImage){
|
|
|
+ console.log(22222)
|
|
|
+ this.modalstatusshow=true
|
|
|
+ }else{
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ del(item){
|
|
|
this.modalshow=true
|
|
|
+ this.id=item.id
|
|
|
+ },
|
|
|
+ addclick(){
|
|
|
+ this.addstatus=true
|
|
|
+ },
|
|
|
+ add(){
|
|
|
+ if(!this.cardData.certificateImage){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'error',
|
|
|
+ message: '请上传证件照片!',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: '数据加载中'
|
|
|
+ })
|
|
|
+ this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'add',{
|
|
|
+ certificateManagementInfo:JSON.stringify(this.cardData)
|
|
|
+ }, failres => {
|
|
|
+ console.log('res+++++', failres.errmsg)
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'error',
|
|
|
+ message: failres.errmsg,
|
|
|
+ })
|
|
|
+ uni.hideLoading()
|
|
|
+ }).then(res => {
|
|
|
+
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'success',
|
|
|
+ message: '提交成功',
|
|
|
+ })
|
|
|
+ // if (res.errno == 200) {
|
|
|
+ uni.hideLoading()
|
|
|
+ this.fileList1=[]
|
|
|
+ this.addstatus=false
|
|
|
+ this.cardData={commonId:uni.getStorageSync("userInfo").id}
|
|
|
+ this.mescroll.resetUpScroll()
|
|
|
+
|
|
|
+ // }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ deletePic(event) {
|
|
|
+ this[`fileList${event.name}`].splice(event.index, 1)
|
|
|
+ this.cardData.certificateImage =this[`fileList${event.name}`].toString()
|
|
|
+ },
|
|
|
+ // 新增图片
|
|
|
+ async afterRead(event) {
|
|
|
+ // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
|
|
|
+ let lists = [].concat(event.file)
|
|
|
+ let fileListLen = this[`fileList${event.name}`].length
|
|
|
+ lists.map((item) => {
|
|
|
+ this[`fileList${event.name}`].push({
|
|
|
+ ...item,
|
|
|
+ status: 'uploading',
|
|
|
+ message: '上传中'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // console.log(event,111111,fileListLen)
|
|
|
+ for (let i = 0; i < lists.length; i++) {
|
|
|
+ const result = await this.uploadFilePromise(lists[i].url)
|
|
|
+ this.cardData.certificateImage = result
|
|
|
+ this[`fileList${event.name}`][fileListLen]={}
|
|
|
+ let item = this[`fileList${event.name}`][fileListLen]
|
|
|
+ console.log(item)
|
|
|
+ this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
|
+ status: 'success',
|
|
|
+ message: '',
|
|
|
+ url: result
|
|
|
+ }))
|
|
|
+ fileListLen++
|
|
|
+ }
|
|
|
+ console.log(this[`fileList${event.name}`])
|
|
|
+ },
|
|
|
+ uploadFilePromise(url) {
|
|
|
+ console.log(url)
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ uploadImage(url, 'cardImages/',
|
|
|
+ result => {
|
|
|
+ console.log(result,22222)
|
|
|
+
|
|
|
+ resolve(result)
|
|
|
+ }
|
|
|
+ )
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mescrollInit(){
|
|
|
+
|
|
|
+ },
|
|
|
+ downCallback(){
|
|
|
+ var that = this
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // mescroll.endSuccess(data.result);
|
|
|
+ that.mescroll.resetUpScroll()
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ upCallback(page){
|
|
|
+ var that = this
|
|
|
+ uni.showLoading({
|
|
|
+ title: '数据加载中'
|
|
|
+ })
|
|
|
+ this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'list',{
|
|
|
+ page:page.num,
|
|
|
+ limit:page.size,
|
|
|
+ commonId:uni.getStorageSync("userInfo").id
|
|
|
+ }, failres => {
|
|
|
+ console.log('res+++++', failres.errmsg)
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type: 'error',
|
|
|
+ message: failres.errmsg,
|
|
|
+ })
|
|
|
+ this.mescroll.endBySize(curPageLen, totalPage)
|
|
|
+ uni.hideLoading()
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if(page.num == 1) this.cardList = [];
|
|
|
+ let curPageLen = res.data.items.length;
|
|
|
+ let totalPage = res.data.total;
|
|
|
+ if(res.data.items.length>0){
|
|
|
+ for(var i=0;i<res.data.items.length;i++){
|
|
|
+ res.data.items[i].editstatus=false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.cardList=this.cardList.concat(res.data.items)
|
|
|
+ this.cardData.certificateName='证件'+'-'+(this.cardList.length+1)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ console.log(that)
|
|
|
+ // mescroll.endSuccess(data.result);
|
|
|
+ that.mescroll.endBySize(curPageLen, totalPage)
|
|
|
+ });
|
|
|
+
|
|
|
+ // if (res.errno == 200) {
|
|
|
+ uni.hideLoading()
|
|
|
+
|
|
|
+ // }
|
|
|
+ })
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss" scoped>
|
|
|
+button::after{border: initial;}
|
|
|
+ .share {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0rpx;
|
|
|
+ left: 0rpx;
|
|
|
+ bottom: 0rpx;
|
|
|
+ right: 0rpx;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ transition: .3s;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .block>button {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: white;
|
|
|
+ border-style: none;
|
|
|
+ width: 300rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ // outline:none;
|
|
|
+ // opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 进入分享动画
|
|
|
+ .share-show {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ transform: translateY(0%) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 离开分享动画
|
|
|
+ .share-item {
|
|
|
+
|
|
|
+ .share-to {
|
|
|
+ width: 100%;
|
|
|
+ height: 3rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ width: 240rpx;
|
|
|
+ height: 0rpx;
|
|
|
+ border-top: 1px solid #E4E7ED;
|
|
|
+ -webkit-transform: scaleY(0.5);
|
|
|
+ transform: scaleY(0.5);
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 240rpx;
|
|
|
+ height: 0rpx;
|
|
|
+ border-top: 1px solid #E4E7ED;
|
|
|
+ -webkit-transform: scaleY(0.5);
|
|
|
+ transform: scaleY(0.5);
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .block {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 180rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancel {
|
|
|
+ width: 100%;
|
|
|
+ height: 3rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-top: 1rpx solid #E4E7ED;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
</style>
|