111 lines
2.2 KiB
Vue
111 lines
2.2 KiB
Vue
<template>
|
||
<view class="license-page">
|
||
<hx-navbar
|
||
:fixed="true"
|
||
title="营业执照"
|
||
:background-color="[1, '#ffffff']"
|
||
color="#333333"
|
||
/>
|
||
<view class="content-wrap">
|
||
<view class="store-info">
|
||
<text class="label">商家名称：</text>
|
||
<text class="value">{{ storeName }}</text>
|
||
</view>
|
||
<view class="license-img-wrap" v-if="licenseImages.length">
|
||
<image
|
||
v-for="(img, index) in licenseImages"
|
||
:key="index"
|
||
:src="img"
|
||
class="license-img"
|
||
mode="widthFix"
|
||
@click="previewImage(index)"
|
||
/>
|
||
</view>
|
||
<view class="empty-tips" v-else>
|
||
暂无营业执照信息
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
storeName: '',
|
||
licenseImages: []
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.name) {
|
||
this.storeName = decodeURIComponent(options.name)
|
||
}
|
||
if (options.images) {
|
||
const imagesStr = decodeURIComponent(options.images)
|
||
// 处理可能是逗号分隔的多张图片，如果是单张也兼容
|
||
this.licenseImages = imagesStr.split(',').filter(item => item.trim())
|
||
}
|
||
},
|
||
methods: {
|
||
previewImage(index) {
|
||
uni.previewImage({
|
||
current: index,
|
||
urls: this.licenseImages
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.license-page {
|
||
min-height: 100vh;
|
||
background-color: #fff;
|
||
}
|
||
.content-wrap {
|
||
padding: 24rpx 0;
|
||
}
|
||
.store-info {
|
||
background-color: #ffffff;
|
||
padding: 0rpx 24rpx;
|
||
border-radius: 0;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 24rpx;
|
||
|
||
.label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
flex: 1;
|
||
}
|
||
}
|
||
.license-img-wrap {
|
||
background-color: #ffffff;
|
||
padding: 24rpx 0;
|
||
border-radius: 0;
|
||
|
||
.license-img {
|
||
width: 100%;
|
||
display: block;
|
||
margin-bottom: 24rpx;
|
||
border-radius: 8rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
.empty-tips {
|
||
text-align: center;
|
||
padding: 100rpx 0;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
</style> |