OfficeApp/subpkg/merchantDetails/merchantDetails.vue

<template>
  <view class="">
    <view class="p_list">
      <view class="card">
        <view class="nav_bar">
          <view class="left">
            <image src="../../static/img/company/company.png"></image>
            <view>爱读蛋糕</view>
          </view>
        </view>
        <view class="body">
          <view class="b_item name">
            <view class="text"><view>商户分类:</view> <view>商超</view></view>
            <view class="type">
              <text v-if="true" style="color: #ff7c32;">未审核</text>
              <text v-else-if="true" style="color: #47be62;">已通过</text>
              <text v-else style="color: #FF0000;">未通过</text>
            </view>
          </view>
          <view class="b_item"><view>商户分类:</view> <view>商超</view></view>
          <view class="b_item"><view>店铺类型:</view> <view>镇街店铺</view></view>
          <view class="b_item"><view>申请时间:</view> <view>1999999999</view></view>
          <view class="b_item"><view>联系方式:</view> <view>2023-09-18  14:00:01</view></view>
          <view class="b_item"><view>店铺所在地:</view> <view>泸州市江阳区通滩镇通滩社区</view></view>
          <view class="b_item"><view>详细地址:</view> <view>泸州市江阳区通滩镇通滩社区龙南路125号</view></view>
          <view class="b_item"><view>公司名称:</view> <view>2023-09-09</view></view>
          <view class="b_item"><view>法人姓名:</view> <view>2023-09-09</view></view>
          <view class="b_item"><view>社会代码:</view> <view>1515616516516516516565465</view></view>
        </view>
      </view>
      <view class="card">
        <view class="nav_bar">
          <view class="left">
            <image src="../../static/img/company/SHZZ.png"></image>
            <view>商户资质信息</view>
          </view>
        </view>
        <view class="body">
          <image @click="priview('../../uni_modules/guyue-updater/assets/bg1.png')" src="../../uni_modules/guyue-updater/assets/bg1.png"></image>
          <view style="border-top: 1px dashed #0022c7;margin: 28rpx 0;"></view>
          <image @click="priview('../../uni_modules/guyue-updater/assets/bg1.png')" src="../../uni_modules/guyue-updater/assets/bg1.png"></image>
        </view>
      </view>
    </view>
    <button class="btn">通过</button>
    <button class="btn" style="background-color: #fff;color: #0122c7;">拒绝</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
       
    }
  },
  onLoad() {},
  onShow() {},
  methods: {
    priview(url) {
    	uni.previewImage({
    		urls: [url],
    		longPressActions: {
    			itemList: ['保存图片'],
    			success: function(data) {
    				if (data.tapIndex === 0) {
    					uni.saveImageToPhotosAlbum({
    						filePath: url,
    						success: function() {
    							uni.showToast({
    								title: '保存成功',
    								icon: 'success'
    							})
    						},
    						fail: function() {
    							uni.showToast({
    								title: '保存失败',
    								icon: 'none'
    							})
    						}
    					})
    				}
    			}
    		}
    	})
    },
  },
  onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
.p_list{
  padding-top: 28rpx;
  .card{
    margin: 0 auto;
    margin-bottom: 28rpx;
    width: 694rpx;
    background-color: #fff;
    border-radius: 26rpx;
    overflow: hidden;
    .nav_bar{
      background-color: #0122c7;
      padding: 28rpx;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        display: flex;
        font-size: 32rpx;
        image{
          width: 40rpx;
          height: 40rpx;
          margin-right: 16rpx;
        }
      }
      .right{
        display: flex;
        font-size: 28rpx;
        align-items: center;
      }
    }
    .body{
      font-size: 28rpx;
      padding: 28rpx;
      .b_item{
        padding-bottom: 16rpx;
        display: flex;
        view:nth-child(1){
          flex-shrink: 0;
          padding-right: 10rpx;
        }
      }
      .name{
        display: flex;
        justify-content: space-between;
        .text{
          flex: 1;
          display: flex;
          view:nth-child(1){
            flex-shrink: 0;
          }
        }
        .type{
          flex-shrink: 0;
        }
      }
      image{
        width: 638rpx;
        height: 400rpx;
      }
    }
  }
}
.btn{
  width: 694rpx;
  height: 100rpx;
  margin: 28rpx auto;
  background-color: #0122c7;
  border: 1rpx solid #0122c7;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>