xiaokuaisong-shopapp/uniapp05/pages/money/money.vue

<template>
  <view class="container">
    <view class="history-list">
      <navigator class="history-item" :url="item.url" v-for="(item, index) in historyList" :key="index">
        <image class="history-img" :src="item.imgUrl"></image>
        <view class="history-info">
          <text class="history-title">{{ item.money }}</text>
          <text class="history-description">来自{{ item.description }}的付款</text>
          <text class="history-time">{{ item.time }}</text>
          <text class="history-author">订单号：{{ item.order }}</text>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const historyList = ref([
      {
        url: '/pages/activity/essay',
        imgUrl: 'https://img.zcool.cn/community/0105ec5b5ac3cba801206a35cf08a8.jpg@1280w_1l_2o_100sh.jpg',
        money: '+23',
        description: '18546252553',
        time: '2024-01-31',
        order: '1234656456466',
      },
      {
        url: '/pages/activity/essayTwo',
        imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.63e4b0a881283cbd46f07e77c2bbd491?rik=vWq%2fKkimZ5n2XQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50014%2f5917.jpg_wh1200.jpg&ehk=KCX2DzgqaiIJnMJZUyFc%2btT9ILzKGslHE8oaSAKORdE%3d&risl=&pid=ImgRaw&r=0',
        money: '+16',
        description: '18546252553',
        time: '2024-03-11',
       order: '1234656456466',
      },
	  {
	    url: '/pages/activity/essayTwo',
	    imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.63e4b0a881283cbd46f07e77c2bbd491?rik=vWq%2fKkimZ5n2XQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50014%2f5917.jpg_wh1200.jpg&ehk=KCX2DzgqaiIJnMJZUyFc%2btT9ILzKGslHE8oaSAKORdE%3d&risl=&pid=ImgRaw&r=0',
	    money: '+16',
	    description: '18546252553',
	    time: '2024-03-11',
	   order: '1234656456466',
	  },
	  {
	    url: '/pages/activity/essayTwo',
	    imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.63e4b0a881283cbd46f07e77c2bbd491?rik=vWq%2fKkimZ5n2XQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50014%2f5917.jpg_wh1200.jpg&ehk=KCX2DzgqaiIJnMJZUyFc%2btT9ILzKGslHE8oaSAKORdE%3d&risl=&pid=ImgRaw&r=0',
	    money: '+16',
	    description: '18546252553',
	    time: '2024-03-11',
	   order: '1234656456466',
	  },
	  {
	    url: '/pages/activity/essayTwo',
	    imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.63e4b0a881283cbd46f07e77c2bbd491?rik=vWq%2fKkimZ5n2XQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50014%2f5917.jpg_wh1200.jpg&ehk=KCX2DzgqaiIJnMJZUyFc%2btT9ILzKGslHE8oaSAKORdE%3d&risl=&pid=ImgRaw&r=0',
	    money: '+16',
	    description: '18546252553',
	    time: '2024-03-11',
	   order: '1234656456466',
	  },
	  {
	    url: '/pages/activity/essayTwo',
	    imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.63e4b0a881283cbd46f07e77c2bbd491?rik=vWq%2fKkimZ5n2XQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50014%2f5917.jpg_wh1200.jpg&ehk=KCX2DzgqaiIJnMJZUyFc%2btT9ILzKGslHE8oaSAKORdE%3d&risl=&pid=ImgRaw&r=0',
	    money: '+16',
	    description: '18546252553',
	    time: '2024-03-11',
	   order: '1234656456466',
	  },
	  {
	    url: '/pages/activity/essayTwo',
	    imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.63e4b0a881283cbd46f07e77c2bbd491?rik=vWq%2fKkimZ5n2XQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50014%2f5917.jpg_wh1200.jpg&ehk=KCX2DzgqaiIJnMJZUyFc%2btT9ILzKGslHE8oaSAKORdE%3d&risl=&pid=ImgRaw&r=0',
	    money: '+16',
	    description: '18546252553',
	    time: '2024-03-11',
	   order: '1234656456466',
	  },
	  {
	    url: '/pages/activity/essayTwo',
	    imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.63e4b0a881283cbd46f07e77c2bbd491?rik=vWq%2fKkimZ5n2XQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50014%2f5917.jpg_wh1200.jpg&ehk=KCX2DzgqaiIJnMJZUyFc%2btT9ILzKGslHE8oaSAKORdE%3d&risl=&pid=ImgRaw&r=0',
	    money: '+16',
	    description: '18546252553',
	    time: '2024-03-11',
	   order: '1234656456466',
	  },
	  {
	    url: '/pages/activity/essayTwo',
	    imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.63e4b0a881283cbd46f07e77c2bbd491?rik=vWq%2fKkimZ5n2XQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50014%2f5917.jpg_wh1200.jpg&ehk=KCX2DzgqaiIJnMJZUyFc%2btT9ILzKGslHE8oaSAKORdE%3d&risl=&pid=ImgRaw&r=0',
	    money: '+16',
	    description: '18546252553',
	    time: '2024-03-11',
	   order: '1234656456466',
	  },
      
     
    ])

    return {
      historyList,
    }
  },
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.history-list {
  width: 100%;
}

.history-item {
  display: flex;
  margin-bottom: 20rpx;
}

.history-img {
  width: 150rpx;
  height: 150rpx;
  margin-right: 20rpx;
  border-radius: 5px;
}

.history-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.history-title {
  font-size: 32rpx;
  font-weight: bold;
}

.history-description {
  font-size: 28rpx;
  color: #666;
}

.history-time,
.history-author {
  font-size: 24rpx;
  color: #999;
}
</style>