|
@@ -0,0 +1,350 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="orders">
|
|
|
|
+ <view class="nav">
|
|
|
|
+ <!-- 搜索栏 -->
|
|
|
|
+ <view class="navbox">
|
|
|
|
+ <view class="search">
|
|
|
|
+ <u-input placeholder="搜索" border='none'>
|
|
|
|
+ <template slot="suffix" style='margin-right:40rpx;'>
|
|
|
|
+ <u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
|
|
|
|
+ height="32rpx"></u-image>
|
|
|
|
+ </template>
|
|
|
|
+ </u-input>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 分段器 -->
|
|
|
|
+ <view class="segmented">
|
|
|
|
+ <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
|
|
|
|
+ activeColor="#DDB15B"></uni-segmented-control>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 全部 -->
|
|
|
|
+ <view v-if="current === 0">
|
|
|
|
+ <view class="card" v-for="item in 2">
|
|
|
|
+ <view class="toptitle">
|
|
|
|
+ <view>订单号:62aae0eb9c6fd622</view>
|
|
|
|
+ <view>未核销</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="shopCard">
|
|
|
|
+ <image src="/static/icon/Kudosbg.png"></image>
|
|
|
|
+ <view style="margin-left: 24rpx;">
|
|
|
|
+ <text class="name">端午佳节五香肉粽子,仅限前</text>
|
|
|
|
+ <text class="tag">礼盒装 2000积分</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="points">
|
|
|
|
+ <text class="totalName" style="margin-right: 50rpx;">共一项</text>
|
|
|
|
+ <text class="totalName">共计:</text>
|
|
|
|
+ <text class="totalContent">2000积分</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btn">
|
|
|
|
+ <view class="btnitem" >
|
|
|
|
+ <text>核销码</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btnitem" v-if="false">
|
|
|
|
+ <text>取消</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btnitem" v-if="false">
|
|
|
|
+ <text>兑换</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btnitem" v-if="false">
|
|
|
|
+ <text>确认收货</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 待兑换 -->
|
|
|
|
+ <view v-if="current == 1">
|
|
|
|
+ <view class="card" v-for="item in 2">
|
|
|
|
+ <view class="toptitle">
|
|
|
|
+ <view>订单号:62aae0eb9c6fd622</view>
|
|
|
|
+ <view>未核销</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="shopCard">
|
|
|
|
+ <image src="/static/icon/Kudosbg.png"></image>
|
|
|
|
+ <view style="margin-left: 24rpx;">
|
|
|
|
+ <text class="name">端午佳节五香肉粽子,仅限前</text>
|
|
|
|
+ <text class="tag">礼盒装 2000积分</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="points">
|
|
|
|
+ <text class="totalName" style="margin-right: 50rpx;">共一项</text>
|
|
|
|
+ <text class="totalName">共计:</text>
|
|
|
|
+ <text class="totalContent">2000积分</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btn">
|
|
|
|
+
|
|
|
|
+ <view class="btnitem" >
|
|
|
|
+ <text>取消</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btnitem" >
|
|
|
|
+ <text>兑换</text>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 待发货 -->
|
|
|
|
+ <view v-if="current ==2">
|
|
|
|
+ <view class="card" v-for="item in 2">
|
|
|
|
+ <view class="toptitle">
|
|
|
|
+ <view>订单号:62aae0eb9c6fd622</view>
|
|
|
|
+ <view>未核销</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="shopCard">
|
|
|
|
+ <image src="/static/icon/Kudosbg.png"></image>
|
|
|
|
+ <view style="margin-left: 24rpx;">
|
|
|
|
+ <text class="name">端午佳节五香肉粽子,仅限前</text>
|
|
|
|
+ <text class="tag">礼盒装 2000积分</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="points">
|
|
|
|
+ <text class="totalName" style="margin-right: 50rpx;">共一项</text>
|
|
|
|
+ <text class="totalName">共计:</text>
|
|
|
|
+ <text class="totalContent">2000积分</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btn">
|
|
|
|
+
|
|
|
|
+ <view class="btnitem" v-if="false">
|
|
|
|
+ <text>取消</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btnitem" v-if="false">
|
|
|
|
+ <text>兑换</text>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 待收货 -->
|
|
|
|
+ <view v-if="current == 3">
|
|
|
|
+ <view class="card" v-for="item in 2">
|
|
|
|
+ <view class="toptitle">
|
|
|
|
+ <view>订单号:62aae0eb9c6fd622</view>
|
|
|
|
+ <view>未核销</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="shopCard">
|
|
|
|
+ <image src="/static/icon/Kudosbg.png"></image>
|
|
|
|
+ <view style="margin-left: 24rpx;">
|
|
|
|
+ <text class="name">端午佳节五香肉粽子,仅限前</text>
|
|
|
|
+ <text class="tag">礼盒装 2000积分</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="points">
|
|
|
|
+ <text class="totalName" style="margin-right: 50rpx;">共一项</text>
|
|
|
|
+ <text class="totalName">共计:</text>
|
|
|
|
+ <text class="totalContent">2000积分</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btn">
|
|
|
|
+ <view class="btnitem" >
|
|
|
|
+ <text>确认收货</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 已完成 -->
|
|
|
|
+ <view v-if="current == 4">
|
|
|
|
+ <view class="card" v-for="item in 2">
|
|
|
|
+ <view class="toptitle">
|
|
|
|
+ <view>订单号:62aae0eb9c6fd622</view>
|
|
|
|
+ <view>未核销</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="shopCard">
|
|
|
|
+ <image src="/static/icon/Kudosbg.png"></image>
|
|
|
|
+ <view style="margin-left: 24rpx;">
|
|
|
|
+ <text class="name">端午佳节五香肉粽子,仅限前</text>
|
|
|
|
+ <text class="tag">礼盒装 2000积分</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="points">
|
|
|
|
+ <text class="totalName" style="margin-right: 50rpx;">共一项</text>
|
|
|
|
+ <text class="totalName">共计:</text>
|
|
|
|
+ <text class="totalContent">2000积分</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="btn">
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText"/>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ export default{
|
|
|
|
+ data(){
|
|
|
|
+ return{
|
|
|
|
+ items: ['全部', '待兑换', '待发货','待收货','已完成'],
|
|
|
|
+ current: 0,
|
|
|
|
+ status: 'noMore',
|
|
|
|
+ contentText: {
|
|
|
|
+ contentdown: '查看更多',
|
|
|
|
+ contentrefresh: '加载中',
|
|
|
|
+ contentnomore: '—— 已经到底啦 ——'
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onLoad(o) {
|
|
|
|
+ if(o.current){
|
|
|
|
+ this.current=o.current
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods:{
|
|
|
|
+ onClickItem(e) {
|
|
|
|
+ if (this.current != e.currentIndex) {
|
|
|
|
+ this.current = e.currentIndex;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ $pageColor:#F9F9F9;
|
|
|
|
+ $bgColor:#FFFFFF;
|
|
|
|
+
|
|
|
|
+ // flex布局居中对齐
|
|
|
|
+ @mixin flexlayout {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+ .orders{
|
|
|
|
+ height: 100%;
|
|
|
|
+ background:$pageColor ;
|
|
|
|
+ }
|
|
|
|
+ ::v-deep .segmented-control__text {
|
|
|
|
+ font-size: 32rpx !important;
|
|
|
|
+ font-family: PingFang-SC-Heavy, PingFang-SC;
|
|
|
|
+ font-weight: 500 !important;
|
|
|
|
+ color: #666666 !important;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .segmented-control__item--text {
|
|
|
|
+ font-size: 32rpx !important;
|
|
|
|
+ font-family: PingFang-SC-Heavy, PingFang-SC;
|
|
|
|
+ font-weight: 800 !important;
|
|
|
|
+ padding: 10rpx 0 !important;
|
|
|
|
+ color: #D9A94D !important;
|
|
|
|
+ border-radius: 4rpx !important;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .nav {
|
|
|
|
+ height: 216rpx;
|
|
|
|
+ width: 750rpx;
|
|
|
|
+ background: $bgColor;
|
|
|
|
+
|
|
|
|
+ .navbox {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ padding: 0 30rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ // 搜索
|
|
|
|
+ .search {
|
|
|
|
+ height: 124rpx;
|
|
|
|
+ width: 690px;
|
|
|
|
+ background-color: $bgColor;
|
|
|
|
+ @include flexlayout;
|
|
|
|
+
|
|
|
|
+ ::v-deep .u-input {
|
|
|
|
+ width: 690rpx !important;
|
|
|
|
+ height: 68rpx !important;
|
|
|
|
+ background: #F1F1F1;
|
|
|
|
+ border-radius: 74rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ ::v-deep .u-input__content__field-wrapper {
|
|
|
|
+ padding-left: 36rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .card{
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
+ // width: 750rpx;
|
|
|
|
+ // height: 426rpx;
|
|
|
|
+ background: $bgColor;
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
+ padding:32rpx 28rpx 24rpx 28rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ .toptitle{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ font-family: PingFang-SC-Bold, PingFang-SC;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #080F18;
|
|
|
|
+ }
|
|
|
|
+ .shopCard{
|
|
|
|
+ margin-top: 28rpx;
|
|
|
|
+ width: 694rpx;
|
|
|
|
+ height: 164rpx;
|
|
|
|
+ background: #F4F5F6;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ image{
|
|
|
|
+ width: 132rpx;
|
|
|
|
+ height: 132rpx;
|
|
|
|
+ margin-left: 16rpx;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ }
|
|
|
|
+ .name{
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #080F18;
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ .tag{
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #666666;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .points{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-top: 30rpx;
|
|
|
|
+ .totalName{
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
+ font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #080F18;
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ .totalContent{
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ font-family: PingFang-SC-Heavy, PingFang-SC;
|
|
|
|
+ font-weight: 800;
|
|
|
|
+ color: #080F18;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .btn{
|
|
|
|
+ margin-top: 15rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
+ .btnitem{
|
|
|
|
+ margin-left: 16rpx;
|
|
|
|
+ width: 170rpx;
|
|
|
|
+ height: 60rpx;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ border-radius: 30rpx;
|
|
|
|
+ border: 2rpx solid #D0D0D0;
|
|
|
|
+ @include flexlayout()
|
|
|
|
+ text{
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
+ font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #080F18;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+</style>
|