12.05前端
This commit is contained in:
@QQNZX
parent
abe9969d75
commit
72519e32b8
@ -7,21 +7,25 @@
|
|||||||
<view class="my-icons"></view>
|
<view class="my-icons"></view>
|
||||||
</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-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>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -31,10 +35,11 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: '',
|
title: '',
|
||||||
|
mingList: [
|
||||||
|
"3", "4", "5", "6",
|
||||||
subTitle: '2020-05-15',
|
],
|
||||||
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
|
subTitle: '2020-05-15',
|
||||||
|
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -81,4 +86,41 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0px;
|
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>
|
</style>
|
||||||
@ -14,6 +14,36 @@
|
|||||||
<view class="gang" v-if="actinput == index"></view>
|
<view class="gang" v-if="actinput == index"></view>
|
||||||
</view>
|
</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 v-if="arrList.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
|
||||||
</u-empty>
|
</u-empty>
|
||||||
@ -36,14 +66,16 @@
|
|||||||
{
|
{
|
||||||
title: '已完成'
|
title: '已完成'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: '已退款'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: '待支付'
|
title: '待支付'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '已退款'
|
||||||
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
arrList: [],
|
arrList: ["1"],
|
||||||
actinput: 0,
|
actinput: 0,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -54,6 +86,7 @@
|
|||||||
getindex(index) {
|
getindex(index) {
|
||||||
this.actinput = index
|
this.actinput = index
|
||||||
},
|
},
|
||||||
|
|
||||||
goback() {
|
goback() {
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
@ -121,4 +154,82 @@
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin: 2px auto;
|
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>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user