12.05前端
This commit is contained in:
@QQNZX
parent
abe9969d75
commit
72519e32b8
@ -7,21 +7,25 @@
|
||||
<view class="my-icons"></view>
|
||||
</view>
|
||||
<!-- 顶部区域 -->
|
||||
<u-empty text="积分明细" icon="http://cdn.uviewui.com/uview/empty/list.png">
|
||||
<view class="m-box" v-for="(item,index) in mingList" :key="index">
|
||||
<view class="">
|
||||
<view class="title">积分增加</view>
|
||||
<view class="times">2023-07-30 12:00:00</view>
|
||||
</view>
|
||||
<view class="sr-nmb">+ 7</view>
|
||||
</view>
|
||||
<view class="m-box" v-for="(item,index) in mingList" :key="index">
|
||||
<view class="">
|
||||
<view class="title" style="color: #F52D22;">积分支出</view>
|
||||
<view class="times">2023-07-30 12:00:00</view>
|
||||
</view>
|
||||
<view class="sc-nmb">+ 7</view>
|
||||
</view>
|
||||
<!-- 判断根据实际情况而改 -->
|
||||
<u-empty text="积分明细" v-if="mingList.length == 0" icon="http://cdn.uviewui.com/uview/empty/list.png">
|
||||
</u-empty>
|
||||
|
||||
<u-waterfall v-model="flowList">
|
||||
<template v-slot:left="{leftList}">
|
||||
<view v-for="(item, index) in leftList" :key="index">
|
||||
<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right="{rightList}">
|
||||
<view v-for="(item, index) in rightList" :key="index">
|
||||
<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
|
||||
</view>
|
||||
</template>
|
||||
</u-waterfall>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -31,8 +35,9 @@
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
|
||||
|
||||
mingList: [
|
||||
"3", "4", "5", "6",
|
||||
],
|
||||
subTitle: '2020-05-15',
|
||||
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
|
||||
}
|
||||
@ -81,4 +86,41 @@
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.m-box {
|
||||
width: 95%;
|
||||
margin: 10px auto;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
color: #0D2E8D;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.times {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.sr-nmb {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #3CBC6F;
|
||||
}
|
||||
|
||||
.sc-nmb {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #F52D22;
|
||||
}
|
||||
</style>
|
||||
@ -14,6 +14,36 @@
|
||||
<view class="gang" v-if="actinput == index"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-box">
|
||||
<view class="goods-top">
|
||||
<view class="goods-img">
|
||||
<image src="../../static/imgs/xp.jpg" mode=""></image>
|
||||
</view>
|
||||
<view class="nr-tip">
|
||||
<view class="title-s">这是我用积分买的老婆啊啊啊啊啊啊啊啊</view>
|
||||
<view class="hui-s">165 - 90 嗨丝儿</view>
|
||||
<view class="right-size">
|
||||
<view class="jg">￥648.00</view>
|
||||
<view class="">X8</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-bottom" v-if="actinput == 1 ">
|
||||
<view class="sh-anniu">
|
||||
<text>确认收货</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-bottom" v-if="actinput == 2 ">
|
||||
<view class="sh-anniu">
|
||||
<text>点击退款</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-bottom" v-if="actinput == 3 ">
|
||||
<view class="sh-anniu">
|
||||
<text>去付款</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-empty v-if="arrList.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
|
||||
</u-empty>
|
||||
@ -36,14 +66,16 @@
|
||||
{
|
||||
title: '已完成'
|
||||
},
|
||||
{
|
||||
title: '已退款'
|
||||
},
|
||||
|
||||
{
|
||||
title: '待支付'
|
||||
},
|
||||
{
|
||||
title: '已退款'
|
||||
},
|
||||
|
||||
],
|
||||
arrList: [],
|
||||
arrList: ["1"],
|
||||
actinput: 0,
|
||||
}
|
||||
},
|
||||
@ -54,6 +86,7 @@
|
||||
getindex(index) {
|
||||
this.actinput = index
|
||||
},
|
||||
|
||||
goback() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
@ -121,4 +154,82 @@
|
||||
border-radius: 8px;
|
||||
margin: 2px auto;
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
width: 95%;
|
||||
border-radius: 8px;
|
||||
margin: 10px auto;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.goods-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 175rpx;
|
||||
height: 175rpx;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nr-tip {
|
||||
width: 70%;
|
||||
|
||||
}
|
||||
|
||||
.title-s {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.hui-s {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
.right-size {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.jg {
|
||||
font-weight: bold;
|
||||
color: #FF1800 !important;
|
||||
}
|
||||
|
||||
.goods-bottom {
|
||||
box-sizing: border-box;
|
||||
padding: 5px 0px;
|
||||
border-top: 1px solid #F4F4F4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.sh-anniu {
|
||||
box-sizing: border-box;
|
||||
padding: 5px 10px;
|
||||
border-radius: 50px;
|
||||
border: 1px solid #2979ff;
|
||||
color: #2979ff;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user