Skip to content

S
self-support
Commit 98eac386 authored by Facius's avatar Facius
Browse files
Options

Merge branch 'master' of https://git.banshouhui.com/lijundan/self-support

parents 1d47f797 d8dc5dd7
Hide whitespace changes
Inline Side-by-side
Showing with 524 additions and 5 deletions
src/pages.json
View file @ 98eac386
......@@ -167,7 +167,7 @@
"enablePullDownRefresh": false
}
}
],
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
......@@ -255,8 +255,8 @@
"query": "" //启动参数，在页面的onLoad函数里面得到
},
{
"name": "缴纳保证金", //模式名称
"path": "pages/settle/pay-ensure", //启动页面，必选
"name": "订单列表", //模式名称
"path": "pages/order/index", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
},
{
......
src/pages/order/index.vue
View file @ 98eac386
<template>
<view>
<view class="wrap">
<view class="tools-box">
<view class="search-sub">
<u-subsection
:current="0"
:list="['待受理', '待完工']"
active-color="white"
bg-color="white"
inactive-color="#666"
button-color="#2272FF"
border-radius="36"
></u-subsection>
</view>
<view class="search-btn">
<u-icon name="search" color="#666" size="32"></u-icon>
<text class="search-btn-text">搜订单</text>
</view>
</view>
<view class="u-tabs-box">
<u-tabs-swiper
activeColor="#2272FF"
bg-color="none"
inactive-color="#999"
bar-height="4" bar-width="44"
:offset="[-1,10]"
ref="tabs"
:list="list"
:current="current"
@change="change"
:is-scroll="false"
swiperWidth="750"
></u-tabs-swiper>
</view>
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<view class="page-box">
<view class="order" v-for="(res, index) in orderList[0]" :key="res.id">
<view class="top">
<view class="left">
<view class="tag">安装</view>
<view class="store">{{ res.store }}</view>
</view>
<view class="right">{{ res.deal }}</view>
</view>
<view class="item" v-for="(item, idx) in res.goodsList" :key="idx">
<view class="content">
<view class="title u-line-2">
<text>工单编号：</text><text>{{ "OR2021041809827" }}</text>
</view>
<view class="title u-line-2">
<text>客户信息：</text><text>{{ "王先生" }}</text>
</view>
<view class="title u-line-2">
<text>联系方式：</text><text>{{ '189xxxxxxxx' }}</text>
</view>
</view>
<view class="address u-line-2">
<view class="left">
<u-icon name="map" size="32"></u-icon>
<text style="margin-left: 8rpx;">深圳市龙岗区南湾街道荔枝花园D座125号</text>
</view>
<view class="right">10.01km</view>
</view>
</view>
<u-divider margin-top="16" half-width="630" border-color="#F4F5F7" :use-slot="false">
</u-divider>
<view class="bottom">
<view class="left">
<view class="tag">剩</view>
<u-count-down :timestamp="timestamp" font-size="44" color="#FF930D"></u-count-down>
</view>
<view class="right-btn">
去预约
</view>
</view>
</view>
<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box">
<view>
<view class="centre">
<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
<view class="explain">
您还没有相关的订单
<view class="tips">可以去看看有那些想买的</view>
</view>
<view class="btn">随便逛逛</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
timestamp: 6666,
orderList: [[], [], [], []],
dataList: [
{
id: 1,
store: '夏日流星限定贩卖',
deal: '交易成功',
goodsList: [
{
goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
type: '灰色;M',
deliveryTime: '付款后30天内发货',
price: '348.58',
number: 2
}
]
},
{
id: 2,
store: '江南皮革厂',
deal: '交易失败',
goodsList: [
{
goodsUrl: '//img14.360buyimg.com/n7/jfs/t1/60319/15/6105/406802/5d43f68aE9f00db8c/0affb7ac46c345e2.jpg',
title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
type: '粉色;M',
deliveryTime: '付款后7天内发货',
price: '128.05',
number: 1
}
]
},
{
id: 3,
store: '三星旗舰店',
deal: '交易失败',
goodsList: [
{
goodsUrl: '//img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
title: '三星（SAMSUNG）京品家电 UA65RUF70AJXXZ 65英寸4K超高清 HDR 京东微联 智能语音 教育资源液晶电视机',
type: '4K，广色域',
deliveryTime: '保质5年',
price: '1998',
number: 3
}
]
},
{
id: 4,
store: '三星旗舰店',
deal: '交易失败',
goodsList: [
{
goodsUrl: '//img10.360buyimg.com/n7/jfs/t22300/31/1505958241/171936/9e201a89/5b2b12ffNe6dbb594.jpg!q90.jpg',
title: '法国进口红酒 拉菲（LAFITE）传奇波尔多干红葡萄酒750ml*6整箱装',
type: '4K，广色域',
deliveryTime: '珍藏10年好酒',
price: '1543',
number: 3
}
]
},
{
id: 5,
store: '三星旗舰店',
deal: '交易成功',
goodsList: [
{
goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/52408/35/3554/78293/5d12e9cfEfd118ba1/ba5995e62cbd747f.jpg!q90.jpg',
title: '企业微信 中控人脸指纹识别考勤机刷脸机 无线签到异地多店打卡机WX108',
type: '识别效率高',
deliveryTime: '使用方便',
price: '451',
number: 9
}
]
}
],
list: [
{
name: '待预约',
count: 3
},
{
name: '待签到',
count: 2
},
{
name: '待完工',
count: 2
},
{
name: '待审核',
count: 10
},
{
name: '异常单',
count: 2
}
],
current: 0,
swiperCurrent: 0,
tabsHeight: 0,
dx: 0,
loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore']
};
},
onLoad() {
this.getOrderList(0);
this.getOrderList(1);
this.getOrderList(3);
},
computed: {
// 价格小数
priceDecimal() {
return val => {
if (val !== parseInt(val)) return val.slice(-2);
else return '00';
};
},
// 价格整数
priceInt() {
return val => {
if (val !== parseInt(val)) return val.split('.')[0];
else return val;
};
}
},
methods: {
reachBottom() {
// 此tab为空数据
if (this.current != 2) {
this.loadStatus.splice(this.current, 1, 'loading');
setTimeout(() => {
this.getOrderList(this.current);
}, 1200);
}
},
// 页面数据
getOrderList(idx) {
for (let i = 0; i < 5; i++) {
let index = this.$u.random(0, this.dataList.length - 1);
let data = JSON.parse(JSON.stringify(this.dataList[index]));
data.id = this.$u.guid();
this.orderList[idx].push(data);
}
this.loadStatus.splice(this.current, 1, 'loadmore');
},
// 总价
totalPrice(item) {
let price = 0;
item.map(val => {
price += parseFloat(val.price);
});
return price.toFixed(2);
},
// 总件数
totalNum(item) {
let num = 0;
item.map(val => {
num += val.number;
});
return num;
},
// tab栏切换
change(index) {
this.swiperCurrent = index;
this.getOrderList(index);
},
transition({ detail: { dx } }) {
this.$refs.tabs.setDx(dx);
},
animationfinish({ detail: { current } }) {
this.$refs.tabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
}
}
};
</script>
<style>
/* #ifndef H5 */
page {
height: 100%;
background-color: #f2f2f2;
}
/* #endif */
</style>
<style lang="scss" scoped>
.order {
width: 710rpx;
background-color: #ffffff;
margin: 20rpx auto;
border-radius: 20rpx;
box-sizing: border-box;
padding: 20rpx;
font-size: 28rpx;
.top {
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
align-items: center;
.tag {
text-align: center;
width: 84rpx;
height: 40rpx;
background: linear-gradient(270deg, #47ABFF 0%, #2272FF 100%);
border-radius: 8rpx;
font-size: 22rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 40rpx;
}
.store {
margin: 0 10rpx;
font-size: 36rpx;
font-weight: bold;
color: #333333;
line-height: 36px;
}
}
.right {
height: 40rpx;
background: #F4F5F7;
border-radius: 22rpx;
padding: 8rpx 16rpx 8rpx 16rpx;
font-size: 22rpx;
line-height: 24rpx;
font-weight: 400;
color: #333333;
}
}
.item {
display: flex;
flex-direction: column;
margin: 20rpx 0 0;
.content {
.title {
font-size: 26rpx;
font-weight: 400;
color: #333333;
line-height: 52rpx;
}
}
.address {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
font-weight: 400;
color: #333333;
line-height: 52rpx;
.left {
}
.right {
}
}
}
.total {
margin-top: 20rpx;
text-align: right;
font-size: 24rpx;
.total-price {
font-size: 32rpx;
}
}
.bottom {
display: flex;
margin-top: 30rpx;
padding: 0 10rpx;
justify-content: space-between;
align-items: center;
.left {
display: flex;
align-items: center;
justify-content: space-between;
.tag {
text-align: center;
width: 54rpx;
height: 54rpx;
background: #FF930D;
font-size: 26rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 54rpx;
border-radius: 50%;
margin-right: 20rpx;
}
}
.right-btn {
text-align: center;
width: 200rpx;
height: 80rpx;
background: #2272FF;
border-radius: 40rpx;
font-size: 32rpx;
font-weight: 600;
color: #FFFFFF;
line-height: 80rpx;
font-family: PingFangSC-Semibold, PingFang SC;
}
}
}
.centre {
text-align: center;
margin: 200rpx auto;
font-size: 32rpx;
image {
width: 164rpx;
height: 164rpx;
border-radius: 50%;
margin-bottom: 20rpx;
}
.tips {
font-size: 24rpx;
color: #999999;
margin-top: 20rpx;
}
.btn {
margin: 80rpx auto;
width: 200rpx;
border-radius: 32rpx;
line-height: 64rpx;
color: #ffffff;
font-size: 26rpx;
background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
}
}
.wrap {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top));
width: 100%;
}
.swiper-box {
flex: 1;
}
.swiper-item {
height: 100%;
}
.tools-box {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20rpx 30rpx 18rpx 34rpx;
.search-sub {
height: 72rpx;
width: 320rpx;
}
.search-btn {
height: 72rpx;
width: 220rpx;
background-color: #ffffff;
border-radius: 36rpx;
color: #666666;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
.search-btn-text {
line-height: 36rpx;
font-weight: 400;
font-size: 26rpx;
}
}
}
.order-taps {
height: 80rpx;
padding: 8rpx 30rpx 20rpx 30rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.order-taps-item {
font-size: 28rpx;
font-weight: 400;
color: #999999;
line-height: 20px;
.taps-count {
position: absolute;
font-size: 16rpx;
font-weight: 400;
line-height: 16rpx;
width: 36rpx;
height: 24rpx;
background: #FFFFFF;
border-radius: 16rpx;
border: 2rpx solid #FA5A49;
text-align: center;
color: #FA5A49;
}
}
}
</style>
src/uview-ui/components/u-subsection/u-subsection.vue
View file @ 98eac386
......@@ -24,6 +24,7 @@
* @property {Boolean} bold 激活选项的字体是否加粗（默认true）
* @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
* @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
* @property {String Number} border-radius 圆角值，单位rpx（默认5）
* @event {Function} change 分段器选项发生改变时触发
* @example <u-subsection active-color="#ff9900"></u-subsection>
*/
......@@ -91,7 +92,12 @@
vibrateShort: {
type: Boolean,
default: false
}
},
// 圆角值
borderRadius: {
type: [Number, String],
default: 5
},
},
data() {
return {
......@@ -105,7 +111,7 @@
},
currentIndex: this.current,
buttonPadding: 3, // mode = button 时，组件的内边距
borderRadius: 5, // 圆角值
// borderRadius: 5, // 圆角值
firstTimeVibrateShort: true // 组件初始化时，会触发current变化，此时不应震动
};
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment