paper-shopkeeper-app/pages/my-receipt-code/index.vue

<template>
  <view>
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="收款码"></uni-nav-bar>
    <view class="container">
      <view class="top-section flex-col" v-for="(item, index) in list" :key="item.mallSupplierId">
        <view class="flex-col section_1" v-show="item.payeeCodeUrl">
          <view class="flex-col items-center group_5">
            <image :src="item.payeeCodeUrl" mode="aspectFit" class="image_4" @click="previewCode(item.payeeCodeUrl)" />
            <view class="justify-evenly section_2" @click="deleteCode(index)">
              <image src="/static/imgs/general/close-icon.png" class="image_5" />
              <text>删除</text>
            </view>
          </view>
        </view>
        <view class="flex-col items-center section_3" v-show="!item.payeeCodeUrl" @click="uploadCode(item)">
          <view class="flex-col items-center image-wrapper">
            <image src="/static/imgs/general/camera-icon.png" class="image_6" />
          </view>
          <text class="text_9">点击上传收款码</text>
        </view>
        <view class="bottom-group flex-col">
          <text class="text_5">{{ item.name }}</text>
          <text class="text_7">收款码</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { back, uploadImage } from '@/utils/hook.js'
import { bindingReciptCode, getReciptCodeList } from '@/apis/commonApi'
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    back,
    uploadCode(item) {
      uploadImage().then((res) => {
        if (res.length > 0) {
          bindingReciptCode({
            mallSupplierId: item.mallSupplierId,
            payeeCodeUrl: res[0]
          }).then((result) => {
            if (result) {
              item.payeeCodeUrl = res[0]
              console.log('payeeCodeUrl', res[0])
            }
          })
        }
      })
    },
    deleteCode(item) {
      item.payeeCodeUrl = null
    },
    previewCode(url) {
      uni.previewImage({ urls: [url], current: url })
    },
    getList() {
      getReciptCodeList().then((res) => {
        if (res) {
          this.list = res
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  padding: 0 32rpx;
}
.top-section {
  margin-top: 20rpx;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 2rpx 14rpx 0px rgba(220, 220, 220, 0.5);
  border-radius: 32rpx;
  .section_1 {
    color: rgb(255, 255, 255);
    font-size: 30rpx;
    line-height: 42rpx;
    white-space: nowrap;
    border-radius: 32rpx 32rpx 0px 0px;
    .group_5 {
      overflow: hidden;
      border-radius: 32rpx 32rpx 0 0;
      height: 438rpx;
      width: 686rpx;
      position: relative;
      .image_4 {
        border-radius: 32rpx 32rpx 0 0;
        overflow: hidden;
        width: 686rpx;
        height: 438rpx;
      }
      .section_2 {
        padding: 7rpx 24rpx 7rpx 26rpx;
        background-color: rgba(255, 0, 0, 0.61);
        border-radius: 0px 10rpx 0px 10rpx;
        width: 154rpx;
        position: absolute;
        right: 0;
        top: 0;
        .image_5 {
          margin: 3rpx 0 4rpx;
          width: 35rpx;
          height: 35rpx;
        }
      }
    }
  }
  .bottom-group {
    padding: 28rpx 24rpx 29rpx;
    .text_5 {
      color: rgb(0, 0, 0);
      font-size: 36rpx;
      font-weight: 500;
      line-height: 50rpx;
      white-space: nowrap;
    }
    .text_7 {
      margin-top: 4rpx;
      color: rgb(136, 136, 136);
      font-size: 26rpx;
      line-height: 37rpx;
      white-space: nowrap;
    }
  }
}
.section_3 {
  padding: 131rpx 0;
  color: rgb(76, 74, 88);
  font-size: 26rpx;
  line-height: 37rpx;
  white-space: nowrap;
  border-radius: 32rpx 32rpx 0 0;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16472372926943168687.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .image-wrapper {
    padding: 39rpx 0 40rpx;
    background-color: rgba(0, 122, 255, 0.79);
    border-radius: 50%;
    width: 120rpx;
    .image_6 {
      width: 48rpx;
      height: 41rpx;
    }
  }
  .text_9 {
    margin-top: 20rpx;
  }
}
</style>