|
|
@@ -2,31 +2,29 @@
|
|
|
<view class="content">
|
|
|
<!-- 不同条件筛选 -->
|
|
|
<view class="select">
|
|
|
- <view class="select_k" :class="selected==0? 'selected':''" @click="selece(0)">全部</view>
|
|
|
- <view class="select_k" :class="selected==1? 'selected':''" @click="selece(1)">已支付</view>
|
|
|
- <view class="select_k" :class="selected==2? 'selected':''" @click="selece(2)">使用中</view>
|
|
|
- <view class="select_k" :class="selected==3? 'selected':''" @click="selece(3)">已使用</view>
|
|
|
- <view class="select_k" :class="selected==4? 'selected':''" @click="selece(4)">已过期</view>
|
|
|
+ <view class="select_k" :class="selected == 0 ? 'selected' : ''" @click="selece(0)">全部</view>
|
|
|
+ <view class="select_k" :class="selected == 1 ? 'selected' : ''" @click="selece(1)">已支付</view>
|
|
|
+ <view class="select_k" :class="selected == 2 ? 'selected' : ''" @click="selece(2)">使用中</view>
|
|
|
+ <view class="select_k" :class="selected == 3 ? 'selected' : ''" @click="selece(3)">已使用</view>
|
|
|
+ <view class="select_k" :class="selected == 4 ? 'selected' : ''" @click="selece(4)">已过期</view>
|
|
|
</view>
|
|
|
<!-- 订单列表 -->
|
|
|
<view class="order">
|
|
|
<view class="order_l1">
|
|
|
<view>已支付</view>
|
|
|
- <view style="font-size: 24rpx;font-weight: 400;">2025-08-11 12:21:21</view>
|
|
|
+ <view style="font-size: 24rpx; font-weight: 400">2025-08-11 12:21:21</view>
|
|
|
</view>
|
|
|
<view class="order_line"></view>
|
|
|
- <view class="title title2" style="margin-top: 23rpx;">
|
|
|
+ <view class="title title2" style="margin-top: 23rpx">
|
|
|
<view class="cicle"></view>
|
|
|
- <view style="margin-left: 16rpx;">创海便利店(二食堂1楼) 13267827921</view>
|
|
|
- </view>
|
|
|
- <view class="xiangnei" v-for="(item,index) in 2" :key="index">
|
|
|
- 例假期每天一杯红糖姜茶
|
|
|
+ <view style="margin-left: 16rpx">创海便利店(二食堂1楼) 13267827921</view>
|
|
|
</view>
|
|
|
+ <view class="xiangnei" v-for="(item, index) in 2" :key="index">例假期每天一杯红糖姜茶</view>
|
|
|
<!-- 订单数据 -->
|
|
|
<view class="order_list">
|
|
|
- <view v-for="(item,index) in 7" :key="index" class="list_time">
|
|
|
+ <view v-for="(item, index) in 7" :key="index" class="list_time">
|
|
|
2025-08-11 10:21:21
|
|
|
- <view style="margin-top: 5rpx;font-size: 24rpx;">64874983774848987484</view>
|
|
|
+ <view style="margin-top: 5rpx; font-size: 24rpx">64874983774848987484</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 按钮 -->
|
|
|
@@ -35,38 +33,32 @@
|
|
|
<view class="button2" @click="bianji">编辑</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<!-- 编辑时间弹框 -->
|
|
|
<u-popup v-model="changeShow" mode="center" :closeable="true" border-radius="20">
|
|
|
<view style="width: 700rpx">
|
|
|
<view class="text-center text-lg text-bold padding-tb">编辑</view>
|
|
|
<view class="popup-list">
|
|
|
- <view style="padding-top: 20rpx;">第1笔</view>
|
|
|
+ <view style="padding-top: 20rpx">第1笔</view>
|
|
|
<view class="popup-yell">2025-08-11 10:21:21</view>
|
|
|
- <view style="padding-top: 20rpx;">第2笔</view>
|
|
|
+ <view style="padding-top: 20rpx">第2笔</view>
|
|
|
<view class="popup-red">2025-08-11 10:21:21</view>
|
|
|
- <view style="padding-top: 20rpx;">第3笔</view>
|
|
|
+ <view style="padding-top: 20rpx">第3笔</view>
|
|
|
<view class="custom-item">
|
|
|
- <view class="item-label">
|
|
|
- <uni-datetime-picker
|
|
|
- v-model="datetimerange" :border="false"
|
|
|
- type="datetimerange"
|
|
|
- rangeSeparator="~" />
|
|
|
+ <view class="item-label">
|
|
|
+ <uni-datetime-picker v-model="datetimerange" :border="false" type="datetimerange" rangeSeparator="~" />
|
|
|
</view>
|
|
|
- <view class="item-value">
|
|
|
+ <view class="item-value">
|
|
|
<!-- 箭头图标,可使用 uni-app 内置图标或自定义图片 -->
|
|
|
<uni-icons type="calendar" color="#000000" />
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view style="padding-top: 20rpx;">第4笔</view>
|
|
|
+ <view style="padding-top: 20rpx">第4笔</view>
|
|
|
<view class="custom-item">
|
|
|
- <view class="item-label">
|
|
|
- <uni-datetime-picker
|
|
|
- v-model="datetimerange" :border="false"
|
|
|
- type="datetimerange"
|
|
|
- rangeSeparator="~" />
|
|
|
+ <view class="item-label">
|
|
|
+ <uni-datetime-picker v-model="datetimerange" :border="false" type="datetimerange" rangeSeparator="~" />
|
|
|
</view>
|
|
|
- <view class="item-value">
|
|
|
+ <view class="item-value">
|
|
|
<!-- 箭头图标,可使用 uni-app 内置图标或自定义图片 -->
|
|
|
<uni-icons type="calendar" color="#000000" />
|
|
|
</view>
|
|
|
@@ -77,235 +69,243 @@
|
|
|
<view class="button4" @click="bianji">确定</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- selected:0,//0全部,1已支付,2使用中,3已使用,4已过期
|
|
|
- changeShow: false,
|
|
|
- datetimerange:[],
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selected: 0, //0全部,1已支付,2使用中,3已使用,4已过期
|
|
|
+ changeShow: false,
|
|
|
+ datetimerange: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ let data = {
|
|
|
+ page: 1,
|
|
|
+ limit: 6
|
|
|
}
|
|
|
+ this.$Request.getT('/app/lover-set/page', data).then((res) => {
|
|
|
+ console.log(res, 966)
|
|
|
+ })
|
|
|
},
|
|
|
- onLoad() {
|
|
|
-
|
|
|
- },
|
|
|
- methods:{
|
|
|
- // 选择条件
|
|
|
- selece(e){
|
|
|
- this.selected=e
|
|
|
- },
|
|
|
- //编辑时间
|
|
|
- bianji(){
|
|
|
- this.changeShow=true
|
|
|
- },
|
|
|
+ // 选择条件
|
|
|
+ selece(e) {
|
|
|
+ this.selected = e
|
|
|
},
|
|
|
+ //编辑时间
|
|
|
+ bianji() {
|
|
|
+ this.changeShow = true
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
- .content{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #F2F2F2;
|
|
|
- }
|
|
|
- /* 不同条件筛选 */
|
|
|
- .select{
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .select_k{
|
|
|
- margin: 20rpx 0 0 15rpx;
|
|
|
- width: 140rpx;
|
|
|
- height: 60rpx;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 9rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- color: rgba(128, 128, 128, 1);
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .selected{
|
|
|
- font-weight: 700;
|
|
|
- color: rgba(255, 141, 26, 1);
|
|
|
- }
|
|
|
- /* 订单列表 */
|
|
|
- .order{
|
|
|
- margin: 30rpx 0 0 20rpx;
|
|
|
- width: 710rpx;
|
|
|
- height: 100%;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 9rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- }
|
|
|
- .order_l1{
|
|
|
- display: flex;
|
|
|
- padding: 19rpx 19rpx 0 19rpx;
|
|
|
- /* 让子元素两端对齐,价格居左,按钮居右 */
|
|
|
- justify-content: space-between;
|
|
|
- /* 垂直方向居中(可选,根据需求调整) */
|
|
|
- align-items: center;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- }
|
|
|
- .order_line{
|
|
|
- margin-top: 31rpx;
|
|
|
- width: 100%;
|
|
|
- height: 1rpx;
|
|
|
- opacity: 1;
|
|
|
- background-color: rgba(230, 230, 230, 1);
|
|
|
- }
|
|
|
- .title{
|
|
|
- margin: 13rpx 0 0 23rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- }
|
|
|
- .cicle{
|
|
|
- margin: 12rpx 0 0 0;
|
|
|
- width: 10rpx;
|
|
|
- height: 10rpx;
|
|
|
- background: #CCCCCC;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- .title2{
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .xiangnei{
|
|
|
- width: 633rpx;
|
|
|
- display: flex;
|
|
|
- /* 让子元素两端对齐,价格居左,按钮居右 */
|
|
|
- justify-content: space-between;
|
|
|
- /* 垂直方向居中(可选,根据需求调整) */
|
|
|
- margin: 0 0 0 45rpx;
|
|
|
- padding-top: 10rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: rgba(102, 102, 102, 1);
|
|
|
- }
|
|
|
- .order_list{
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- width: 583rpx;
|
|
|
- height: 100%;
|
|
|
- /* 让子元素两端对齐,价格居左,按钮居右 */
|
|
|
- justify-content: space-between;
|
|
|
- /* 垂直方向居中(可选,根据需求调整) */
|
|
|
- margin: 10rpx 0 0 41rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- word-wrap: break-word;
|
|
|
- word-break: break-all;
|
|
|
- }
|
|
|
- .list_time{
|
|
|
- margin-top: 10rpx;
|
|
|
- width: 260rpx;
|
|
|
- height: 71rpx;
|
|
|
- /* 核心属性:强制文字在一行显示,不自动换行 */
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- /* 按钮 */
|
|
|
- .button{
|
|
|
- display: flex;
|
|
|
- margin: 39rpx 0 0 278rpx;
|
|
|
- height: 100rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 75rpx;
|
|
|
- }
|
|
|
- .button1{
|
|
|
- width: 190rpx;
|
|
|
- height: 75rpx;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 105rpx;
|
|
|
- background: rgba(242, 242, 242, 1);
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .button2{
|
|
|
- margin: 0 0 0 29rpx;
|
|
|
- width: 190rpx;
|
|
|
- height: 75rpx;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 105rpx;
|
|
|
- background: rgba(255, 141, 26, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- /* 编辑时间弹框 */
|
|
|
- .popup-list{
|
|
|
- margin: 25rpx 0 0 41rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- }
|
|
|
- .popup-yell{
|
|
|
- color: rgba(255, 141, 26, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 500;
|
|
|
- padding-top: 20rpx;
|
|
|
- }
|
|
|
- .popup-red{
|
|
|
- color: rgba(212, 48, 48, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 500;
|
|
|
- padding-top: 20rpx;
|
|
|
- }
|
|
|
- .custom-item {
|
|
|
- margin: 17rpx 0 0 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 12rpx 16rpx;
|
|
|
- width: 651rpx;
|
|
|
- height: 83rpx;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 130rpx;
|
|
|
- background: rgba(242, 242, 242, 1);
|
|
|
- }
|
|
|
- .item-label {
|
|
|
- font-size: 28rpx;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- }
|
|
|
- .item-value {
|
|
|
- display: flex;
|
|
|
- font-size: 28rpx;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- }
|
|
|
- /* 按钮 */
|
|
|
- .popup_butt{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 54rpx 0 0 0;
|
|
|
- height: 200rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 99rpx;
|
|
|
- }
|
|
|
- .button3{
|
|
|
- width: 250rpx;
|
|
|
- height: 99rpx;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 138rpx;
|
|
|
- border: 1px solid rgba(255, 141, 26, 1);
|
|
|
- color: rgba(255, 141, 26, 1);
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .button4{
|
|
|
- width: 250rpx;
|
|
|
- height: 99rpx;
|
|
|
- opacity: 1;
|
|
|
- border-radius: 105rpx;
|
|
|
- background: rgba(255, 141, 26, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-</style>
|
|
|
+.content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+}
|
|
|
+/* 不同条件筛选 */
|
|
|
+.select {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.select_k {
|
|
|
+ margin: 20rpx 0 0 15rpx;
|
|
|
+ width: 140rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 9rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ color: rgba(128, 128, 128, 1);
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.selected {
|
|
|
+ font-weight: 700;
|
|
|
+ color: rgba(255, 141, 26, 1);
|
|
|
+}
|
|
|
+/* 订单列表 */
|
|
|
+.order {
|
|
|
+ margin: 30rpx 0 0 20rpx;
|
|
|
+ width: 710rpx;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 9rpx;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+.order_l1 {
|
|
|
+ display: flex;
|
|
|
+ padding: 19rpx 19rpx 0 19rpx;
|
|
|
+ /* 让子元素两端对齐,价格居左,按钮居右 */
|
|
|
+ justify-content: space-between;
|
|
|
+ /* 垂直方向居中(可选,根据需求调整) */
|
|
|
+ align-items: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+}
|
|
|
+.order_line {
|
|
|
+ margin-top: 31rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 1rpx;
|
|
|
+ opacity: 1;
|
|
|
+ background-color: rgba(230, 230, 230, 1);
|
|
|
+}
|
|
|
+.title {
|
|
|
+ margin: 13rpx 0 0 23rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+}
|
|
|
+.cicle {
|
|
|
+ margin: 12rpx 0 0 0;
|
|
|
+ width: 10rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ background: #cccccc;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.title2 {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.xiangnei {
|
|
|
+ width: 633rpx;
|
|
|
+ display: flex;
|
|
|
+ /* 让子元素两端对齐,价格居左,按钮居右 */
|
|
|
+ justify-content: space-between;
|
|
|
+ /* 垂直方向居中(可选,根据需求调整) */
|
|
|
+ margin: 0 0 0 45rpx;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+}
|
|
|
+.order_list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 583rpx;
|
|
|
+ height: 100%;
|
|
|
+ /* 让子元素两端对齐,价格居左,按钮居右 */
|
|
|
+ justify-content: space-between;
|
|
|
+ /* 垂直方向居中(可选,根据需求调整) */
|
|
|
+ margin: 10rpx 0 0 41rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+.list_time {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ width: 260rpx;
|
|
|
+ height: 71rpx;
|
|
|
+ /* 核心属性:强制文字在一行显示,不自动换行 */
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+/* 按钮 */
|
|
|
+.button {
|
|
|
+ display: flex;
|
|
|
+ margin: 39rpx 0 0 278rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 75rpx;
|
|
|
+}
|
|
|
+.button1 {
|
|
|
+ width: 190rpx;
|
|
|
+ height: 75rpx;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 105rpx;
|
|
|
+ background: rgba(242, 242, 242, 1);
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.button2 {
|
|
|
+ margin: 0 0 0 29rpx;
|
|
|
+ width: 190rpx;
|
|
|
+ height: 75rpx;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 105rpx;
|
|
|
+ background: rgba(255, 141, 26, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+/* 编辑时间弹框 */
|
|
|
+.popup-list {
|
|
|
+ margin: 25rpx 0 0 41rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+}
|
|
|
+.popup-yell {
|
|
|
+ color: rgba(255, 141, 26, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ padding-top: 20rpx;
|
|
|
+}
|
|
|
+.popup-red {
|
|
|
+ color: rgba(212, 48, 48, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ padding-top: 20rpx;
|
|
|
+}
|
|
|
+.custom-item {
|
|
|
+ margin: 17rpx 0 0 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 12rpx 16rpx;
|
|
|
+ width: 651rpx;
|
|
|
+ height: 83rpx;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 130rpx;
|
|
|
+ background: rgba(242, 242, 242, 1);
|
|
|
+}
|
|
|
+.item-label {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+}
|
|
|
+.item-value {
|
|
|
+ display: flex;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+}
|
|
|
+/* 按钮 */
|
|
|
+.popup_butt {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 54rpx 0 0 0;
|
|
|
+ height: 200rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 99rpx;
|
|
|
+}
|
|
|
+.button3 {
|
|
|
+ width: 250rpx;
|
|
|
+ height: 99rpx;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 138rpx;
|
|
|
+ border: 1px solid rgba(255, 141, 26, 1);
|
|
|
+ color: rgba(255, 141, 26, 1);
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.button4 {
|
|
|
+ width: 250rpx;
|
|
|
+ height: 99rpx;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 105rpx;
|
|
|
+ background: rgba(255, 141, 26, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|