Leadfyy.co
/
uniapp-qxk
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

【修改】 我的订单页面

master
邓平艺 4 years ago
parent
c02ed8ff60
commit
be51d4952a
13 changed files with 3799 additions and 333 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      App.vue
  2. 2
      manifest.json
  3. 4
      packages/addAddress/addAddress-副本.vue
  4. 11
      packages/address/address.vue
  5. 3
      pages/index/index.vue
  6. 329
      pages/order/order-副本.vue
  7. 685
      pages/order/order.vue
  8. 227
      pages/order/wodedingdan_daiqueren-副本2.vue
  9. 349
      pages/order/wodedingdan_shaixuan-副本.vue
  10. BIN
      static/icon/filter.png
  11. BIN
      static/images/nomore.png
  12. 2275
      styles/common.css
  13. 0
      styles/iconFont.css

7
App.vue
View File

@ -13,15 +13,14 @@
</script>
<style>
@import url("styles/common.css");
@import url("styles/lanhu.css");
@import url("styles/iconFont.css");
/*每个页面公共css */
page{
background-color: #F6F6F6;
}
view{
display: flex;
background-color: #FFFFFF;
}
.splitLine{
background-color: rgba(0,0,0,0.06);
height: 1rpx;

2
manifest.json
View File

@ -50,7 +50,7 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx071aaf375bb6d680",
"appid" : "wx8c794acc7c3067b6",
"setting" : {
"urlCheck" : false
},

4
packages/addAddress/addAddress-副本.vue
View File

@ -1,6 +1,6 @@
<template>
<view class="pages">
<u--form
<u-form
labelPosition="left"
labelWidth="100"
:model="model1"
@ -58,7 +58,7 @@
border="none"
></u--input>
</u-form-item>
</u--form>
</u-form>
</view>
</template>

11
packages/address/address.vue
View File

@ -83,7 +83,12 @@
}
</script>
<style>
<style scoped class="scss">
/deep/view{
display: flex;
background-color: #FFFFFF;
}
.checkBtn{
width: 44rpx;
height: 44rpx;
@ -136,11 +141,13 @@
}
.addNewAddr{
height: 96rpx;
width: 90%;
/* width: 90%; */
width: 686rpx;
border: #E7A23F 1rpx solid;
border-radius: 8rpx;
position: fixed;
bottom: 200rpx;
left: calc(50% - 343rpx);
justify-content: center;
align-items: center;
align-self: center;

3
pages/index/index.vue
View File

@ -2,7 +2,7 @@
<view class="flex-col page">
<lf-header :spreadOut="true" :diy="true" :boderBottom="true" bgColor="#ffffff">
<view class="header-nav">
<image class="searchIcon" src="../../static/搜索.png" @click="$url('/pages/ratingQuery/ratingQuery')"></image>
<image class="searchIcon" src="@/static/搜索.png" @click="$url('/pages/ratingQuery/ratingQuery')"></image>
<text class="title">评级中心</text>
</view>
</lf-header>
@ -203,6 +203,7 @@
top: 6rpx;
width: 38rpx;
height: 36rpx;
z-index: 999999;
}
}

329
pages/order/order-副本.vue
View File

@ -0,0 +1,329 @@
<template>
<view class="flex-col page">
<view class="flex-col group_4">
<view class="flex-col">
<view class="flex-col section_2">
<view class="justify-center group_5">
<text class="text_2">全部</text>
<text class="text_3">待确认</text>
<text class="text_4">评级中</text>
<text class="text_5">待付款</text>
<text class="text_6">待收货</text>
<view class="section_3"> </view>
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497796432960040.png"
class="image_6"
/>
</view>
<view class="section_4"> </view>
</view>
<view class="flex-col group_6">
<view class="flex-col section_5">
<view class="justify-between">
<view class="flex-row group_8">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497803048201750.png"
class="image_7"
/>
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497802899488083.png"
class="image_7 image_9"
/>
<text class="text_7">定价</text>
</view>
<text class="text_8">待付款</text>
</view>
<view class="justify-between group_9">
<view class="flex-row">
<text>李丽丽</text>
<text class="text_10">15273936409</text>
</view>
<text>共2件</text>
</view>
<view class="group_11">
<text class="text_12">合计：</text>
<text class="text_13">¥120.00</text>
</view>
<view class="justify-between group_12">
<text class="text_14">更多</text>
<view class="flex-col items-center text-wrapper">
<text>付款</text>
</view>
</view>
</view>
<view class="flex-col section_6">
<view class="justify-between group_13">
<view class="flex-row group_14">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497802876916797.png"
class="image_10"
/>
<view class="group_15">
<text class="text_16">全选</text>
<text class="text_17">(已选 x1)</text>
</view>
</view>
<view class="flex-row group_16">
<view class="group_17">
<text class="text_18">合计</text>
<text class="text_19">:</text>
<text class="text_20">¥ 0</text>
</view>
<view class="flex-col items-center text-wrapper_1">
<text>合并结算</text>
</view>
</view>
</view>
<view class="section_7"> </view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style scoped lang="css">
.image_7 {
width: 40rpx;
height: 40rpx;
}
.page {
background-color: #f6f6f6;
width: 100%;
overflow-y: auto;
height: 100%;
}
.group_4 {
flex: 1 1 auto;
overflow-y: auto;
}
.section_2 {
padding-left: 38rpx;
padding-right: 32rpx;
background-color: rgb(255, 255, 255);
}
.group_6 {
padding-top: 2rpx;
}
.group_5 {
padding: 34rpx 0 14rpx;
}
.section_4 {
align-self: center;
background-color: rgb(231, 162, 63);
border-radius: 4rpx;
width: 68rpx;
height: 8rpx;
}
.section_5 {
padding: 40rpx 30rpx 0 32rpx;
background-color: rgb(255, 255, 255);
}
.section_6 {
margin-top: 828rpx;
padding: 0 32rpx 16rpx;
background-color: rgb(255, 255, 255);
}
.text_2 {
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_3 {
margin-left: 46rpx;
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_4 {
margin-left: 44rpx;
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_5 {
margin-left: 46rpx;
color: rgb(51, 51, 51);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_6 {
margin-left: 46rpx;
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.section_3 {
margin-left: 36rpx;
margin-top: 4rpx;
background-color: rgb(246, 246, 246);
border-radius: 1rpx;
width: 2rpx;
height: 34rpx;
}
.image_6 {
margin: 4rpx 0 4rpx 32rpx;
width: 36rpx;
height: 32rpx;
}
.group_9 {
margin-top: 30rpx;
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.group_11 {
margin-top: 20rpx;
align-self: flex-end;
white-space: nowrap;
}
.group_12 {
margin-top: 26rpx;
padding: 32rpx 2rpx 28rpx;
border-top: solid 2rpx rgb(239, 239, 239);
}
.group_13 {
padding: 18rpx 0 36rpx;
}
.section_7 {
align-self: center;
background-color: rgb(0, 0, 0);
border-radius: 4rpx;
width: 196rpx;
height: 8rpx;
}
.group_8 {
color: rgb(153, 153, 153);
font-size: 28rpx;
line-height: 40rpx;
white-space: nowrap;
}
.text_8 {
color: rgb(234, 43, 43);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_12 {
color: rgb(231, 162, 63);
font-size: 24rpx;
font-weight: 500;
line-height: 34rpx;
}
.text_13 {
color: rgb(231, 162, 63);
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
}
.text_14 {
align-self: center;
color: rgb(153, 153, 153);
font-size: 28rpx;
line-height: 40rpx;
white-space: nowrap;
}
.text-wrapper {
padding: 10rpx 0;
color: rgb(234, 43, 43);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
border-radius: 32rpx;
width: 160rpx;
height: 64rpx;
border: solid 2rpx rgb(234, 43, 43);
}
.group_14 {
align-self: center;
}
.group_16 {
width: 296rpx;
}
.image_9 {
margin-left: 20rpx;
}
.text_7 {
margin-left: 12rpx;
}
.text_10 {
margin-left: 21rpx;
}
.image_10 {
width: 44rpx;
height: 44rpx;
}
.group_15 {
margin-left: 10rpx;
white-space: nowrap;
height: 40rpx;
}
.group_17 {
align-self: center;
white-space: nowrap;
height: 44rpx;
}
.text-wrapper_1 {
margin-left: 20rpx;
padding: 16rpx 0;
color: rgb(255, 255, 255);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
background-color: rgb(231, 162, 63);
border-radius: 36rpx;
width: 172rpx;
height: 72rpx;
}
.text_16 {
color: rgb(51, 51, 51);
font-size: 28rpx;
line-height: 40rpx;
}
.text_17 {
color: rgb(51, 51, 51);
font-size: 24rpx;
line-height: 34rpx;
}
.text_18 {
color: rgb(51, 51, 51);
font-size: 24rpx;
font-weight: 500;
line-height: 34rpx;
}
.text_19 {
color: rgb(119, 119, 119);
font-size: 24rpx;
font-weight: 500;
line-height: 34rpx;
}
.text_20 {
color: rgb(209, 161, 28);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
}
</style>

685
pages/order/order.vue
View File

@ -1,188 +1,515 @@
<template>
<view class="flex-col page">
<view class="flex-col group_4">
<view>
<!-- tabs选项卡 -->
<view class="lf-flex">
<view style="width: 84%;">
<u-tabs
:current="tabIndex"
:list="tabList"
:lineWidth="34"
:scrollable="false"
:itemWidth="100 / tabList.length +'%'"
@change="switchTab"
>
</u-tabs>
</view>
<view class="filter-icon">
<image src="@/static/icon/filter.png" @click="showFilter = !showFilter"></image>
</view>
</view>
<!-- 筛选 -->
<view class="filter-box" v-if="showFilter">
<view class="flex-col group_6" >
<view class="flex-col section_5">
<view class="flex-col">
<view class="flex-col section_2">
<view class="justify-center group_5">
<text class="text_2">全部</text>
<text class="text_3">待确认</text>
<text class="text_4">评级中</text>
<text class="text_5">待付款</text>
<text class="text_6">待收货</text>
<view class="section_3"> </view>
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497796432960040.png"
class="image_6"
/>
<text class="text_7">按收货确认时间</text>
<view class="flex-col group_8">
<view class="flex-row">
<view class="flex-col items-center text-wrapper">
<text>1个月内</text>
</view>
<view class="text-wrapper_1 flex-col items-center">
<text>3个月内</text>
</view>
<view class="text-wrapper_1 flex-col items-center view_3">
<text>6个月内</text>
</view>
<view class="text-wrapper_1 flex-col items-center">
<text>今年</text>
</view>
</view>
<view class="flex-row group_10">
<view class="left-text-wrapper flex-col items-center">
<text>2021年</text>
</view>
<view class="left-text-wrapper flex-col items-center view_6">
<text>2020年</text>
</view>
<view class="left-text-wrapper flex-col items-center view_7">
<text>2019年</text>
</view>
</view>
</view>
</view>
<view class="flex-col group_11">
<text class="text_15">按送评信息</text>
<view class="flex-row group_12">
<view class="flex-col items-center text-wrapper_2">
<text>输入送评人姓名或手机号</text>
</view>
<view class="flex-col items-start text-wrapper_3">
<text class="text_17">输入标签</text>
</view>
</view>
</view>
<view class="flex-col group_13">
<text class="text_18">按送评信息</text>
<view class="flex-col items-start text-wrapper_4">
<text class="text_19">输入评级编号</text>
</view>
</view>
<view class="flex-row group_14">
<view class="flex-col items-center text-wrapper_5">
<text>重置</text>
</view>
<view class="flex-col items-center text-wrapper_6">
<text>确认</text>
</view>
</view>
</view>
<view class="flex-col items-center group_15">
<view class="section_6"> </view>
<view class="section_7"> </view>
</view>
<view class="section_4"> </view>
</view>
<view class="flex-col group_6">
</view>
<!-- 页面主体滚动区域 -->
<swiper :current="tabIndex" :style="{height: swiperContentHeight}" @change="swiperChange">
<swiper-item v-for="(tabItem, idx) in tabList" :key="idx" :item-id="tabItem.ident" @touchmove="stopTouchMove">
<scroll-view
:style="{height: swiperContentHeight, 'padding-top': '30rpx'}"
:scroll-y="true"
:refresher-enabled="true"
:refresher-triggered="tabItem.isRefresher"
@scrolltolower="scrolltolower"
@refresherrefresh="refresherrefresh"
>
<view class="item-box" v-for="(item, index) in tabItem.data" :key="index">
<view class="flex-col section_5">
<view class="justify-between">
<view class="flex-row group_8">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497803048201750.png"
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497798740970822.png"
class="image_7"
/>
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497802899488083.png"
class="image_7 image_9"
/>
<text class="text_7">定价</text>
<text class="text_7">在线送评</text>
</view>
<text class="text_8">待付款</text>
<text class="text_8">待确认</text>
</view>
<view class="justify-between group_9">
<view class="flex-row">
<text>李丽丽</text>
<text class="text_10">15273936409</text>
</view>
<text>共2件</text>
<text>共5件</text>
</view>
<view class="group_11">
<text class="text_12">合计：</text>
<text class="text_13">¥120.00</text>
</view>
<view class="justify-between group_12">
<text class="text_14">更多</text>
<view class="justify-between group_11">
<text class="text_12">更多</text>
<view class="flex-row">
<view class="flex-col items-center text-wrapper">
<text>付款</text>
</view>
</view>
</view>
<view class="flex-col section_6">
<view class="justify-between group_13">
<view class="flex-row group_14">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497802876916797.png"
class="image_10"
/>
<view class="group_15">
<text class="text_16">全选</text>
<text class="text_17">(已选 x1)</text>
</view>
</view>
<view class="flex-row group_16">
<view class="group_17">
<text class="text_18">合计</text>
<text class="text_19">:</text>
<text class="text_20">¥ 0</text>
<text>取消</text>
</view>
<view class="flex-col items-center text-wrapper_1">
<text>合并结算</text>
<text>寄送藏品</text>
</view>
</view>
</view>
<view class="section_7"> </view>
</view>
</view>
</view>
<!-- 当前tab下没有数据且无分页数据时，显示系统剪辑中 -->
<view class="nomore-box" v-if="tabItem.data.length <= 0 && !tabItem.isPage">
<image src="@/static/images/nomore.png"></image>
<view>暂无订单记录</view>
</view>
<!-- 加载中和暂无更多显示 -->
<u-loadmore :status="tabItem.status" margin-bottom="20" marginTop="20" v-else></u-loadmore>
<!-- 底部修饰，解决部分机型底部被挡住且padding和margin都不生效的BUG -->
<view class="additional"></view>
</scroll-view>
</swiper-item>
</swiper>
<!-- 轻提示 -->
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
export default {
data() {
return {};
data(){
let publicKey = {
page: 1,
pageSize: 5,
isPage: true,
status: 'loading', // loading加载，nomore没有更多了
isRefresher: false, // 下拉刷新状态，默认没有开启下拉
}
return {
showFilter: false,
tabList: [{
name: '全部',
ident: 'all',
data: [],
badge: {isDot: false},
requestFunction: 'getList',
...publicKey
},{
name: '待确认',
ident: 'video',
data: [],
badge: {isDot: false},
requestFunction: 'getList',
...publicKey
},{
name: '评级中',
ident: 'image',
data: [],
badge: {isDot: false},
requestFunction: 'getList',
...publicKey
},{
name: '待付款',
ident: 'share',
data: [],
badge: {isDot: false},
requestFunction: 'getList',
...publicKey
},{
name: '待收货',
ident: 'short',
data: [],
badge: {isDot: false},
requestFunction: 'getList',
...publicKey
}],
tabIndex: 4,
scenic: {}
}
},
computed: {
// 传入对应tab的ident值，在当前tabIndex下是否匹配，匹配上返回true，否则返回false，调用matchTabIdent(par1, par2, ...)
matchTabIdent(){
let that = this;
return function(){
let identList = Array.from(arguments);
let hasKey = identList.some(item => that.tabList[that.tabIndex].ident === item);
return hasKey;
}
},
// 计算获得swiper内容区域剩余高度
swiperContentHeight(){
return `calc(100vh - 80rpx - 10rpx)`;
}
},
onLoad(){
this.scenic = uni.getStorageSync("scenic_key") || {};
this[ this.tabList[this.tabIndex].requestFunction ](); // 获取当前tab下的数据列表
},
methods: {
// 获取数据
getList(options = {}){
let tabItem = this.tabList[this.tabIndex];
setTimeout(() => {
if(tabItem.page === 1){
tabItem.data = [1,2,3,4,5]
}else{
let arr = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];
tabItem.data.push(...arr);
if(tabItem.page === 4){
tabItem.isPage = false;
tabItem.status = "nomore";
}
}
if(options.refresher){
this.$refs.uToast.show({
title: '刷新成功',
type: 'success'
});
tabItem.isRefresher = false;
}
}, 800);
},
// 切换tab
switchTab(current){
this.tabIndex = current;
// 判断所切换到的tab下是否有数据并且isPage为true，如果没有再请求，否则啥也不干
let tabItem = this.tabList[this.tabIndex];
// todo 方法报错...
console.log("tabItem", tabItem, current)
if(tabItem.data.length === 0 && tabItem.isPage){
this[ tabItem.requestFunction ]();
}
},
// swiper滑动响应事件
swiperChange(event){
// 事件触发类型为触摸时才做处理，否则是因为switchTab方法执行导致的事件回调
if(event.detail.source === 'touch'){
this.tabIndex = event.detail.current;
// 判断所切换到的tab下是否有数据并且isPage为true，如果没有再请求，否则啥也不干
let tabItem = this.tabList[this.tabIndex];
if(tabItem.data.length === 0 && tabItem.isPage){
this[ tabItem.requestFunction ]();
}
}
console.log("swiperChange", event);
},
};
stopTouchMove(){
return false;
},
// 下拉刷新，重新获取页面数据，将状态置回初始值再请求
refresherrefresh(){
let tabItem = this.tabList[this.tabIndex];
tabItem.isRefresher = true;
tabItem.page = 1;
tabItem.isPage = true;
tabItem.status = 'loading';
tabItem.data = [];
this[tabItem.requestFunction]({refresher: true});
},
// 滚动到底部
scrolltolower(){
let tabItem = this.tabList[this.tabIndex];
if(tabItem.isPage){
tabItem.page++;
this[tabItem.requestFunction]();
}
}
}
}
</script>
<style scoped lang="css">
.image_7 {
width: 40rpx;
height: 40rpx;
<style>
/* 修复ios页面左右漂浮BUG */
page{
overflow: hidden;
}
.page {
background-color: #f6f6f6;
width: 100%;
overflow-y: auto;
height: 100%;
</style>
<style scoped lang="scss">
.filter-icon{
width: 16%;
height: 34rpx;
display: flex;
justify-content: center;
align-items: center;
border-left: 2rpx solid #F6F6F6;
image{
width: 36rpx;
height: 32rpx;
}
.group_4 {
flex: 1 1 auto;
overflow-y: auto;
}
.section_2 {
padding-left: 38rpx;
padding-right: 32rpx;
background-color: rgb(255, 255, 255);
.filter-box{
position: absolute;
z-index: 9999;
width: 750rpx;
.text-wrapper_1 {
margin-left: 16rpx;
flex: 1 1 160rpx;
color: rgb(51, 51, 51);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
padding: 14rpx 0;
background-color: rgb(246, 246, 246);
border-radius: 10rpx;
height: 68rpx;
}
.left-text-wrapper {
padding: 14rpx 0;
background-color: rgb(246, 246, 246);
border-radius: 10rpx;
width: 160rpx;
height: 68rpx;
}
.group_6 {
padding-top: 2rpx;
}
.group_5 {
padding: 34rpx 0 14rpx;
.section_5 {
padding: 40rpx 32rpx 50rpx;
background-color: rgb(255, 255, 255);
}
.section_4 {
align-self: center;
background-color: rgb(231, 162, 63);
.group_15 {
padding: 506rpx 0 16rpx;
position: relative;
}
.group_11 {
margin-top: 50rpx;
}
.group_13 {
margin-top: 50rpx;
}
.group_14 {
margin-top: 50rpx;
}
.section_6 {
background-color: rgb(0, 0, 0);
border-radius: 4rpx;
width: 68rpx;
width: 196rpx;
height: 8rpx;
}
.section_5 {
padding: 40rpx 30rpx 0 32rpx;
background-color: rgb(255, 255, 255);
.section_7 {
background-color: rgba(0, 0, 0, 0.5);
width: 750rpx;
height: 528rpx;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
.section_6 {
margin-top: 828rpx;
padding: 0 32rpx 16rpx;
background-color: rgb(255, 255, 255);
.text_7 {
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.text_2 {
color: rgb(153, 153, 153);
font-size: 28rpx;
.group_8 {
margin-top: 20rpx;
}
.text_15 {
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 40rpx;
line-height: 44rpx;
white-space: nowrap;
}
.text_3 {
margin-left: 46rpx;
color: rgb(153, 153, 153);
.group_12 {
margin-top: 20rpx;
color: rgb(195, 195, 195);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_4 {
margin-left: 44rpx;
color: rgb(153, 153, 153);
.text_18 {
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.text-wrapper_4 {
margin-top: 18rpx;
padding: 12rpx 0;
color: rgb(195, 195, 195);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
border-radius: 10rpx;
border: solid 2rpx rgb(195, 195, 195);
}
.text-wrapper_5 {
padding: 24rpx 0;
flex: 1 1 330rpx;
color: rgb(195, 195, 195);
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
white-space: nowrap;
border-radius: 10rpx;
height: 96rpx;
border: solid 2rpx rgb(195, 195, 195);
}
.text-wrapper_6 {
margin-left: 26rpx;
padding: 26rpx 0;
flex: 1 1 330rpx;
color: rgb(255, 255, 255);
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
white-space: nowrap;
background-color: rgb(231, 162, 63);
border-radius: 10rpx;
height: 96rpx;
}
.text_5 {
margin-left: 46rpx;
.group_10 {
margin-top: 20rpx;
color: rgb(51, 51, 51);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_6 {
margin-left: 46rpx;
color: rgb(153, 153, 153);
.text-wrapper_2 {
padding: 12rpx 0;
flex: 1 1 auto;
border-radius: 10rpx;
height: 68rpx;
border: solid 2rpx rgb(195, 195, 195);
}
.text-wrapper_3 {
margin-left: 28rpx;
padding: 12rpx 0;
border-radius: 10rpx;
width: 308rpx;
height: 68rpx;
border: solid 2rpx rgb(195, 195, 195);
}
.text_19 {
margin-left: 18rpx;
}
.text-wrapper {
padding: 14rpx 0;
flex: 1 1 160rpx;
color: rgb(255, 255, 255);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
background-color: rgb(231, 162, 63);
border-radius: 10rpx;
height: 68rpx;
}
.section_3 {
margin-left: 36rpx;
margin-top: 4rpx;
background-color: rgb(246, 246, 246);
border-radius: 1rpx;
width: 2rpx;
height: 34rpx;
.view_3 {
margin-left: 14rpx;
}
.image_6 {
margin: 4rpx 0 4rpx 32rpx;
width: 36rpx;
height: 32rpx;
.view_6 {
margin-left: 16rpx;
}
.view_7 {
margin-left: 14rpx;
}
.text_17 {
margin-left: 18rpx;
}
}
.item-box{
width: 686rpx;
// height: 300rpx;
margin: 0 auto;
background-color: #f6f6f6;
&:nth-child(n+2){
margin-top: 20rpx;
}
.section_5 {
padding: 40rpx 32rpx 0;
background-color: rgb(255, 255, 255);
}
.group_9 {
margin-top: 30rpx;
@ -193,25 +520,10 @@
white-space: nowrap;
}
.group_11 {
margin-top: 20rpx;
align-self: flex-end;
white-space: nowrap;
}
.group_12 {
margin-top: 26rpx;
padding: 32rpx 2rpx 28rpx;
padding: 32rpx 0 28rpx;
border-top: solid 2rpx rgb(239, 239, 239);
}
.group_13 {
padding: 18rpx 0 36rpx;
}
.section_7 {
align-self: center;
background-color: rgb(0, 0, 0);
border-radius: 4rpx;
width: 196rpx;
height: 8rpx;
}
.group_8 {
color: rgb(153, 153, 153);
font-size: 28rpx;
@ -219,34 +531,32 @@
white-space: nowrap;
}
.text_8 {
color: rgb(234, 43, 43);
color: rgb(43, 102, 234);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_12 {
color: rgb(231, 162, 63);
font-size: 24rpx;
font-weight: 500;
line-height: 34rpx;
}
.text_13 {
color: rgb(231, 162, 63);
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
}
.text_14 {
align-self: center;
color: rgb(153, 153, 153);
font-size: 28rpx;
line-height: 40rpx;
white-space: nowrap;
}
.image_7 {
width: 40rpx;
height: 40rpx;
}
.text_7 {
margin-left: 12rpx;
}
.text_10 {
margin-left: 21rpx;
}
.text-wrapper {
padding: 10rpx 0;
color: rgb(234, 43, 43);
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
@ -254,76 +564,45 @@
border-radius: 32rpx;
width: 160rpx;
height: 64rpx;
border: solid 2rpx rgb(234, 43, 43);
}
.group_14 {
align-self: center;
}
.group_16 {
width: 296rpx;
}
.image_9 {
margin-left: 20rpx;
}
.text_7 {
margin-left: 12rpx;
}
.text_10 {
margin-left: 21rpx;
}
.image_10 {
width: 44rpx;
height: 44rpx;
}
.group_15 {
margin-left: 10rpx;
white-space: nowrap;
height: 40rpx;
}
.group_17 {
align-self: center;
white-space: nowrap;
height: 44rpx;
border: solid 2rpx rgb(153, 153, 153);
}
.text-wrapper_1 {
margin-left: 20rpx;
padding: 16rpx 0;
color: rgb(255, 255, 255);
margin-left: 18rpx;
padding: 10rpx 0;
color: rgb(231, 162, 63);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
background-color: rgb(231, 162, 63);
border-radius: 36rpx;
width: 172rpx;
height: 72rpx;
}
.text_16 {
color: rgb(51, 51, 51);
font-size: 28rpx;
line-height: 40rpx;
border-radius: 32rpx;
width: 160rpx;
height: 64rpx;
border: solid 2rpx rgb(231, 162, 63);
}
.text_17 {
color: rgb(51, 51, 51);
font-size: 24rpx;
line-height: 34rpx;
}
.text_18 {
color: rgb(51, 51, 51);
font-size: 24rpx;
font-weight: 500;
line-height: 34rpx;
.nomore-box{
width: 686rpx;
height: 500rpx;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image{
width: 434rpx;
height: 260rpx;
}
view{
text-align: center;
color: #777777;
margin-top: 40rpx;
}
.text_19 {
color: rgb(119, 119, 119);
font-size: 24rpx;
font-weight: 500;
line-height: 34rpx;
}
.text_20 {
color: rgb(209, 161, 28);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
// 解决scroll-view底部padding和margin都不生效贴边的BUG
.additional{
height: calc( env(safe-area-inset-bottom) + 20rpx );
height: calc( constant(safe-area-inset-bottom) + 20rpx );
}
</style>

227
pages/order/wodedingdan_daiqueren-副本2.vue
View File

@ -0,0 +1,227 @@
<template>
<view class="flex-col page">
<view class="flex-col group_4">
<view class="flex-col">
<view class="flex-col section_2">
<view class="justify-center group_5">
<text class="text_2">全部</text>
<text class="text_3">待确认</text>
<text class="text_4">评级中</text>
<text class="text_5">待付款</text>
<text class="text_6">待收货</text>
<view class="section_3"> </view>
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497798644145968.png"
class="image_6"
/>
</view>
<view class="section_4"> </view>
</view>
<view class="flex-col group_6">
<view class="flex-col section_5">
<view class="justify-between">
<view class="flex-row group_8">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497798740970822.png"
class="image_7"
/>
<text class="text_7">在线送评</text>
</view>
<text class="text_8">待确认</text>
</view>
<view class="justify-between group_9">
<view class="flex-row">
<text>李丽丽</text>
<text class="text_10">15273936409</text>
</view>
<text>共5件</text>
</view>
<view class="justify-between group_11">
<text class="text_12">更多</text>
<view class="flex-row">
<view class="flex-col items-center text-wrapper">
<text>取消</text>
</view>
<view class="flex-col items-center text-wrapper_1">
<text>寄送藏品</text>
</view>
</view>
</view>
</view>
<view class="section_6"> </view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style scoped lang="css">
.page {
background-color: #f6f6f6;
width: 100%;
overflow-y: auto;
height: 100%;
}
.group_4 {
flex: 1 1 auto;
overflow-y: auto;
}
.section_2 {
padding-left: 38rpx;
padding-right: 32rpx;
background-color: rgb(255, 255, 255);
}
.group_6 {
padding: 2rpx 0 16rpx;
}
.group_5 {
padding: 34rpx 0 14rpx;
}
.section_4 {
margin-left: 110rpx;
background-color: rgb(231, 162, 63);
border-radius: 4rpx;
width: 68rpx;
height: 8rpx;
}
.section_5 {
padding: 40rpx 32rpx 0;
background-color: rgb(255, 255, 255);
}
.section_6 {
margin-top: 1018rpx;
align-self: center;
background-color: rgb(0, 0, 0);
border-radius: 4rpx;
width: 196rpx;
height: 8rpx;
}
.text_2 {
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_3 {
margin-left: 46rpx;
color: rgb(51, 51, 51);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_4 {
margin-left: 44rpx;
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_5 {
margin-left: 46rpx;
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_6 {
margin-left: 46rpx;
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.section_3 {
margin-left: 36rpx;
margin-top: 4rpx;
background-color: rgb(246, 246, 246);
border-radius: 1rpx;
width: 2rpx;
height: 34rpx;
}
.image_6 {
margin: 4rpx 0 4rpx 32rpx;
width: 36rpx;
height: 32rpx;
}
.group_9 {
margin-top: 30rpx;
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.group_11 {
margin-top: 26rpx;
padding: 32rpx 0 28rpx;
border-top: solid 2rpx rgb(239, 239, 239);
}
.group_8 {
color: rgb(153, 153, 153);
font-size: 28rpx;
line-height: 40rpx;
white-space: nowrap;
}
.text_8 {
color: rgb(43, 102, 234);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_12 {
align-self: center;
color: rgb(153, 153, 153);
font-size: 28rpx;
line-height: 40rpx;
white-space: nowrap;
}
.image_7 {
width: 40rpx;
height: 40rpx;
}
.text_7 {
margin-left: 12rpx;
}
.text_10 {
margin-left: 21rpx;
}
.text-wrapper {
padding: 10rpx 0;
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
border-radius: 32rpx;
width: 160rpx;
height: 64rpx;
border: solid 2rpx rgb(153, 153, 153);
}
.text-wrapper_1 {
margin-left: 18rpx;
padding: 10rpx 0;
color: rgb(231, 162, 63);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
border-radius: 32rpx;
width: 160rpx;
height: 64rpx;
border: solid 2rpx rgb(231, 162, 63);
}
</style>

349
pages/order/wodedingdan_shaixuan-副本.vue
View File

@ -0,0 +1,349 @@
<template>
<view class="flex-col page">
<view class="flex-col group_4">
<view class="flex-col">
<view class="flex-col section_2">
<view class="justify-center group_5">
<text class="text_2">全部</text>
<text class="text_3">待确认</text>
<text class="text_4">评级中</text>
<text class="text_5">待付款</text>
<text class="text_6">待收货</text>
<view class="section_3"> </view>
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497796432960040.png"
class="image_6"
/>
</view>
<view class="section_4"> </view>
</view>
<view class="flex-col group_6">
<view class="flex-col section_5">
<view class="flex-col">
<text class="text_7">按收货确认时间</text>
<view class="flex-col group_8">
<view class="flex-row">
<view class="flex-col items-center text-wrapper">
<text>1个月内</text>
</view>
<view class="text-wrapper_1 flex-col items-center">
<text>3个月内</text>
</view>
<view class="text-wrapper_1 flex-col items-center view_3">
<text>6个月内</text>
</view>
<view class="text-wrapper_1 flex-col items-center">
<text>今年</text>
</view>
</view>
<view class="flex-row group_10">
<view class="left-text-wrapper flex-col items-center">
<text>2021年</text>
</view>
<view class="left-text-wrapper flex-col items-center view_6">
<text>2020年</text>
</view>
<view class="left-text-wrapper flex-col items-center view_7">
<text>2019年</text>
</view>
</view>
</view>
</view>
<view class="flex-col group_11">
<text class="text_15">按送评信息</text>
<view class="flex-row group_12">
<view class="flex-col items-center text-wrapper_2">
<text>输入送评人姓名或手机号</text>
</view>
<view class="flex-col items-start text-wrapper_3">
<text class="text_17">输入标签</text>
</view>
</view>
</view>
<view class="flex-col group_13">
<text class="text_18">按送评信息</text>
<view class="flex-col items-start text-wrapper_4">
<text class="text_19">输入评级编号</text>
</view>
</view>
<view class="flex-row group_14">
<view class="flex-col items-center text-wrapper_5">
<text>重置</text>
</view>
<view class="flex-col items-center text-wrapper_6">
<text>确认</text>
</view>
</view>
</view>
<view class="flex-col items-center group_15">
<view class="section_6"> </view>
<view class="section_7"> </view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style scoped lang="css">
.text-wrapper_1 {
margin-left: 16rpx;
flex: 1 1 160rpx;
color: rgb(51, 51, 51);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
padding: 14rpx 0;
background-color: rgb(246, 246, 246);
border-radius: 10rpx;
height: 68rpx;
}
.left-text-wrapper {
padding: 14rpx 0;
background-color: rgb(246, 246, 246);
border-radius: 10rpx;
width: 160rpx;
height: 68rpx;
}
.page {
background-color: #f6f6f6;
width: 100%;
overflow-y: auto;
height: 100%;
}
.group_4 {
flex: 1 1 auto;
overflow-y: auto;
}
.section_2 {
padding-left: 38rpx;
padding-right: 32rpx;
background-color: rgb(255, 255, 255);
}
.group_6 {
padding-top: 2rpx;
}
.group_5 {
padding: 34rpx 0 14rpx;
}
.section_4 {
margin-right: 114rpx;
align-self: flex-end;
background-color: rgb(231, 162, 63);
border-radius: 4rpx;
width: 68rpx;
height: 8rpx;
}
.section_5 {
padding: 40rpx 32rpx 50rpx;
background-color: rgb(255, 255, 255);
}
.group_15 {
padding: 506rpx 0 16rpx;
position: relative;
}
.text_2 {
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_3 {
margin-left: 46rpx;
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_4 {
margin-left: 44rpx;
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_5 {
margin-left: 46rpx;
color: rgb(153, 153, 153);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_6 {
margin-left: 46rpx;
color: rgb(51, 51, 51);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.section_3 {
margin-left: 36rpx;
margin-top: 4rpx;
background-color: rgb(246, 246, 246);
border-radius: 1rpx;
width: 2rpx;
height: 34rpx;
}
.image_6 {
margin: 4rpx 0 4rpx 32rpx;
width: 36rpx;
height: 32rpx;
}
.group_11 {
margin-top: 50rpx;
}
.group_13 {
margin-top: 50rpx;
}
.group_14 {
margin-top: 50rpx;
}
.section_6 {
background-color: rgb(0, 0, 0);
border-radius: 4rpx;
width: 196rpx;
height: 8rpx;
}
.section_7 {
background-color: rgba(0, 0, 0, 0.5);
width: 750rpx;
height: 528rpx;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
.text_7 {
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.group_8 {
margin-top: 20rpx;
}
.text_15 {
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.group_12 {
margin-top: 20rpx;
color: rgb(195, 195, 195);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_18 {
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.text-wrapper_4 {
margin-top: 18rpx;
padding: 12rpx 0;
color: rgb(195, 195, 195);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
border-radius: 10rpx;
border: solid 2rpx rgb(195, 195, 195);
}
.text-wrapper_5 {
padding: 24rpx 0;
flex: 1 1 330rpx;
color: rgb(195, 195, 195);
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
white-space: nowrap;
border-radius: 10rpx;
height: 96rpx;
border: solid 2rpx rgb(195, 195, 195);
}
.text-wrapper_6 {
margin-left: 26rpx;
padding: 26rpx 0;
flex: 1 1 330rpx;
color: rgb(255, 255, 255);
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
white-space: nowrap;
background-color: rgb(231, 162, 63);
border-radius: 10rpx;
height: 96rpx;
}
.group_10 {
margin-top: 20rpx;
color: rgb(51, 51, 51);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text-wrapper_2 {
padding: 12rpx 0;
flex: 1 1 auto;
border-radius: 10rpx;
height: 68rpx;
border: solid 2rpx rgb(195, 195, 195);
}
.text-wrapper_3 {
margin-left: 28rpx;
padding: 12rpx 0;
border-radius: 10rpx;
width: 308rpx;
height: 68rpx;
border: solid 2rpx rgb(195, 195, 195);
}
.text_19 {
margin-left: 18rpx;
}
.text-wrapper {
padding: 14rpx 0;
flex: 1 1 160rpx;
color: rgb(255, 255, 255);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
background-color: rgb(231, 162, 63);
border-radius: 10rpx;
height: 68rpx;
}
.view_3 {
margin-left: 14rpx;
}
.view_6 {
margin-left: 16rpx;
}
.view_7 {
margin-left: 14rpx;
}
.text_17 {
margin-left: 18rpx;
}
</style>

BIN
static/icon/filter.png
View File

Side by Side

After

Width: 36  |  Height: 32  |  Size: 1.1 KiB

BIN
static/images/nomore.png
View File

Side by Side

After

Width: 434  |  Height: 260  |  Size: 28 KiB

2275
styles/common.css
File diff suppressed because it is too large
View File

0
styles/iconFont.css
View File

Write Preview
Loading…
Cancel
Save