187 lines
4.4 KiB
Vue
187 lines
4.4 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 图片展示部分 -->
|
||
<view class="container_qualifications" v-if="urlList.length">
|
||
<view class="container_qualifications_title">
|
||
<span class="margin_r">{{storeData.storeName}}</span>
|
||
<span>网店经营者资质信息</span>
|
||
</view>
|
||
<view class="image_list">
|
||
<!-- <view v-for="(item, index) in urlList" :key="index"><image :src="item" mode="widthFix"></image></view> -->
|
||
<jyf-parser :domain='domain' :html="content" ref="article" :tag-style="tagStyle"></jyf-parser>
|
||
</view>
|
||
<view class="bottom_tip">
|
||
注：以上信息，由商家依据《电子商务法》规定发布公示。如需进一步核实，可联系商家客服咨询。
|
||
</view>
|
||
</view>
|
||
<!-- 输入验证码部分 -->
|
||
<view class="container_vercode" v-else>
|
||
<view class="container_vercode_title"><text>输入验证码查看证件信息</text></view>
|
||
<view class="container_vercode_content" >
|
||
<view class="container_vercode_content_heightfix" >
|
||
<view class="container_vercode_content_input">
|
||
<input type="text" v-model="verCodeValue" placeholder="请输入验证码">
|
||
</view>
|
||
<!-- <view class="container_vercode_content_vercode" @click="getVerCodeImage" :style="{'background-image': `url(${captchaData.captcha})`}"> -->
|
||
<view class="container_vercode_content_vercode" @click="getVerCodeImage">
|
||
<image :src="captchaData.captcha" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="container_vercode_button"><view class="button" @click="submitCaptChaData">确定</view></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { getCaptcha, storeCertificate } from '@/api/store.js';
|
||
import { navigateTo, Toast, setStorage } from '@/libs/uniApi.js';
|
||
import parser from "@/components/jyf-parser/jyf-parser";
|
||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||
export default {
|
||
components:{
|
||
"jyf-parser": parser,
|
||
},
|
||
onLoad(opt) {
|
||
this.storeData = opt;
|
||
this.getVerCodeImage();
|
||
},
|
||
data() {
|
||
return {
|
||
storeData: {},
|
||
captchaData: {},
|
||
verCodeValue: '',
|
||
urlList: [],
|
||
tagStyle: {
|
||
img: 'width:100%;display:block;'
|
||
},
|
||
content: '',
|
||
domain: HTTP_REQUEST_URL,
|
||
};
|
||
},
|
||
methods:{
|
||
// 发送图片验证码，并请求资质图片列表
|
||
submitCaptChaData() {
|
||
if(this.verCodeValue) {
|
||
storeCertificate({merId: this.storeData.mer_id, key: this.captchaData.key, code: this.verCodeValue}).then(res => {
|
||
if(res.status == 200 && res.message == 'success') {
|
||
|
||
this.urlList = res.data;
|
||
this.content = '';
|
||
let imgTap = '';
|
||
this.urlList.forEach(item => {
|
||
imgTap+=this.setImgTap(item);
|
||
})
|
||
this.content = `<p>${imgTap}</p>`;
|
||
console.log(this.content);
|
||
}
|
||
}).catch(rej => {
|
||
Toast(rej);
|
||
this.getVerCodeImage();
|
||
this.verCodeValue = '';
|
||
})
|
||
} else {
|
||
Toast('请输入验证码');
|
||
}
|
||
},
|
||
//
|
||
setImgTap(url) {
|
||
return `<img style="width:auto;height:auto;max-width:100%;margin-bottom:15px" src="${url}"></img>`
|
||
},
|
||
// 获取图片验证码
|
||
getVerCodeImage() {
|
||
getCaptcha().then(res => {
|
||
if (res.status == 200 && res.message == 'success') {
|
||
this.captchaData = res.data;
|
||
console.log(this.captchaData);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container_vercode {
|
||
&_title {
|
||
text-align: center;
|
||
padding: 30px 0;
|
||
}
|
||
&_content {
|
||
width: 70%;
|
||
height: 40px;
|
||
margin: auto;
|
||
margin-bottom: 20px;
|
||
&_heightfix {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
max-height: 34px;
|
||
}
|
||
|
||
&_input {
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
input {
|
||
font-size: 12px;
|
||
padding: 0 20px;
|
||
}
|
||
}
|
||
&_vercode {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
image {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
&_button {
|
||
.button {
|
||
margin: auto;
|
||
width: 70%;
|
||
background: #e93323 !important;
|
||
border-radius: 4px;
|
||
padding: 12px;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
.container_qualifications {
|
||
&_title {
|
||
padding: 10px;
|
||
text-align: center;
|
||
span:nth-child(1) {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.image_list {
|
||
view {
|
||
width: 90%;
|
||
margin: auto;
|
||
image {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
.bottom_tip {
|
||
padding: 10px 0;
|
||
width: 90%;
|
||
margin: auto;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
.margin_r {
|
||
margin-right: 8px;
|
||
}
|
||
</style>
|