外部点击待付款，进入我的订单待付款页面
我比较懒，我就直接粘贴代码了
index页面
<template>
<view>
<!-- -->
<view class="more" @tap="more">更多</view>
<!-- 用户信息 -->
<view class="user">
<!-- 头像 -->
<view class="left" @tap="info"><image :src="user.face"></image></view>
<!-- 昵称 -->
<view class="right">
<view class="username">
<label>昵称</label>
<label @tap="toLogin">{{ user.username }}</label>
<label>LV0</label>
</view>
<view class="signature">
<!-- <label>{{user.userphone}}</label> -->
<label>驴币数:{{ user.usernumber }}</label>
</view>
</view>
<!-- <view class="erweima">
<view class="icon qr"></view>
<view @tap="more">更多</view>
</view> -->
</view>
<!-- 必备工具 -->
<view class="toolbar">
<view class="title">必备工具</view>
<view class="list">
<view class="box" v-for="(row, index) in mytoolbarList" :key="index" @tap="toPage(row.url)">
<view class="img"><image :src="row.img"></image></view>
<view class="text">{{ row.text }}</view>
</view>
</view>
</view>
<!-- 我的订单 -->
<view class="toolbar">
<view class="title">我的订单</view>
<view class="list">
<view class="box" v-for="(row, index) in payList" :key="index" @tap="toOrderList(index)">
<view class="img"><image :src="row.imgpay"></image></view>
<view class="text">{{ row.textpay }}</view>
</view>
</view>
</view>
<!-- 推荐 -->
<view class="recommend">
<view class="recommendName">推荐</view>
<view class="recommendList">
<view class="recommendBox" v-for="(item, index) in recommendList" :key="index" @tap="commodityDetails">
<view class="recommendImg"></view>
<view class="recommendText">{{ item.name }}</view>
<view class="recommendText">LV1</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//个人信息,
user: {
username: 'Carina',
face: '../../static/logo.png',
userphone: '15978704153',
usernumber: '223344'
},
// 工具栏列表
mytoolbarList: [
{ url: '../User/collect', text: '收藏夹', img: '' },
{ url: '../User/orderPresentation', text: '转赠', img: '' },
{ url: '../User/news', text: '消息', img: '' },
{ url: '../User/customerService', text: '客服', img: '' }
],
payList: [
{textpay: '待支付', imgpay: '' },
{textpay: '待预约', imgpay: '' },
{textpay: '待使用', imgpay: '' },
{textpay: '待评价', imgpay: '' }
],
recommendList: [{ name: '套餐' }, { name: '套餐名称套餐名称套餐名' }, { name: '套餐名称' }]
};
},
onLoad() {},
onReady() {},
onShow() {},
methods: {
//点击登录
toLogin() {
uni.navigateTo({
url: '../Login/Login'
});
},
//达人信息
info() {
uni.navigateTo({
url: 'info'
});
},
//更多
more() {
uni.navigateTo({
url: 'more'
});
},
//商品详情
commodityDetails() {
uni.navigateTo({
url: '../Home/commodityDetails'
});
},
//必备工具
toPage(url) {
if (!url) {
uni.showToast({ title: '页面加载失败', icon: 'none' });
return;
}
uni.navigateTo({
url: url
});
},
//我的订单
toOrderList(index){
uni.setStorageSync('tbIndex',index);
uni.navigateTo({url:'../Order/index?tbIndex='+index})
}
}
};
</script>
<style lang="scss">
page {
position: relative;
background-color: #fff;
}
.more{
// border: #000000 1px solid;
width: 92%;
margin: 0 4% 0 4%;
display: flex;
// align-items: c;
justify-content: flex-end;
}
.user {
width: 92%;
padding: 30rpx 4%;
display: flex;
align-items: flex-start;
position: relative;
.left {
width: 150rpx;
height: 150rpx;
flex-shrink: 0;
margin-right: 20rpx;
// border: solid 1rpx black;
border-radius: 100%;
image {
width: 100%;
height: 100%;
border-radius: 100%;
}
}
.right {
width: 100%;
.username {
font-size: 36rpx;
color: black;
padding-bottom: 10rpx;
label {
margin: 0 15rpx 0 0;
&:nth-child(even) {
// border: 1px solid black;
// padding: 0 15rpx 0 15rpx;
// border-radius: 50rpx;
// background: #2c405a;
}
&:first-child {
// font-weight: bold;
}
}
}
.signature {
color: black;
font-size: 28rpx;
padding-top: 10rpx;
label {
padding: 0 20rpx 0 0;
}
}
}
.erweima {
flex-shrink: 0;
}
}
.toolbar {
width: 92%;
margin: 0 4% 4% 4%;
padding: 0 0 40rpx 0;
background-color: #fff;
box-shadow: 0rpx 0rpx 25rpx rgba(0,0,0,0.1);
border-radius: 15rpx;
// box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
.title{
padding-left: 15rpx;
margin: 0 15rpx 20rpx 15rpx;
font-size: 30rpx;
height: 80rpx;
display: flex;
align-items: center;
border-bottom: 1px solid #C8C7CC;
}
.list {
display: flex;
flex-wrap: wrap;
.box {
width: 25%;
// margin-bottom: 30upx;
.img {
width: 23vw;
height: 12vw;
display: flex;
justify-content: center;
// border: 1px solid #808080;
image {
width: 10vw;
height: 10vw;
border: 1px solid #808080;
border-radius: 50%;
}
}
.text {
width: 100%;
display: flex;
justify-content: center;
font-size: 26upx;
color: #3d3d3d;
}
}
}
}
.recommend {
margin: 0 4% 0 4%;
padding: 30rpx 0;
.recommendName {
text-align: center;
border-bottom: #C8C7CC 1px solid;
padding: 30rpx 0;
}
.recommendList {
display: flex;
flex-wrap: wrap;
// border: 1px solid black;
.recommendBox {
// border: 1px solid black;
width: 280rpx;
// height: 350rpx;
margin: 30rpx;
.recommendImg {
width: 280rpx;
height: 350rpx;
border: 1px solid #808080;
// margin:25rpx 30rpx;
}
.recommendText {
margin: 10rpx 0rpx;
}
}
}
}
</style>
order的index页面
<template>
<view>
<!-- 顶部导航 -->
<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
</view>
</view>
<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
<view class="order-list">
<view class="list">
<view class="onorder" v-if="list.length==0">
<image src="../../../static/img/noorder.png"></image>
<view class="text">
没有相关订单
</view>
</view>
<view class="row" v-for="(row,index) in list" :key="index">
<view class="type">{{row.type}}</view>
<view class="order-info">
<view class="left">
<image :src="row.img"></image>
</view>
<view class="right">
<view class="name">
{{row.name}}
</view>
<view class="spec">{{row.spec}}</view>
<view class="price-number">
<!-- ￥<view class="price">{{row.price}}</view>
x<view class="number">{{row.numner}}</view> -->
</view>
</view>
</view>
<view class="detail">
<view class="number">共{{row.numner}}件商品</view><view class="sum">合计￥<view class="price">{{row.payment}}</view></view><view class="nominal"></view>
</view>
<view class="btns">
<block v-if="row.type=='unpaid'"><view class="default" @tap="cancelOrder(row)">取消订单</view><view class="pay" @tap="toPayment(row)">付款</view></block>
<block v-if="row.type=='back'"><view class="default" @tap="remindDeliver(row)">提醒发货</view></block>
<block v-if="row.type=='unreceived'"><view class="default" @tap="showLogistics(row)">查看物流</view><view class="pay">确认收货</view><view class="pay">我要退货</view></block>
<block v-if="row.type=='received'"><view class="default">评价</view><view class="default">再次购买</view></block>
<block v-if="row.type=='completed'"><view class="default">再次购买</view></block>
<block v-if="row.type=='refunds'"><view class="default">查看进度</view></block>
<block v-if="row.state=='1'"><view class="pay">去支付</view></block>
<block v-if="row.state=='2'"><view class="pay">去预约</view></block>
<block v-if="row.state=='3'"><view class="pay">去使用</view></block>
<block v-if="row.state=='4'"><view class="pay">去评价</view></block>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
headerPosition:"fixed",
headerTop:"0px",
orderType: ['全部','待支付','待预约','待使用','待评价'],
//订单列表 演示数据
orderList:[
[
{state:1, type:"商家名称1",ordersn:0,goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: ' 22.00',payment: 22.00, spec:'备注',numner:1 },
{state:1, type:"商家名称2",ordersn:1,goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: ' 22.00',payment: 22.00, spec:'备注',numner:1 },
{state:2, type:"商家名称3",ordersn:2,goods_id: 1, img: '/static/img/goods/p3.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: ' 22.00',payment: 22.00, spec:'备注',numner:1 },
{state:3, type:"商家名称4",ordersn:3,goods_id: 1, img: '/static/img/goods/p4.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: ' 22.00',payment: 22.00, spec:'备注',numner:1 },
{state:1, type:"商家名称5",ordersn:4,goods_id: 1, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: ' 22.00',payment: 22.00, spec:'备注',numner:1 },
{state:1, type:"商家名称6",ordersn:5,goods_id: 1, img: '/static/img/goods/p6.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: ' 22.00',payment: 22.00, spec:'备注',numner:1 },
{state:1, type:"商家名称7",ordersn:6,goods_id: 1, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥ 22',payment: 22.00, spec:'备注',numner:1 },
{state:1, type:"商家名称8",ordersn:7,goods_id: 1, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥ 22',payment: 22.00, spec:'备注',numner:1 }
],
[
{state:1, type:"商家名称9",ordersn:0,goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥ 22',payment: 22.00, spec:'备注',numner:1 },
{state:1, type:"商家名称10",ordersn:1,goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥ 22',payment: 22.00, spec:'备注',numner:1 }
],
[
//无
],
[
{state:3, type:"商家名称11",ordersn:3,goods_id: 1, img: '/static/img/goods/p4.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥ 22',payment: 22.00, spec:'备注',numner:1 }
],
[
{state:4, type:"商家名称12",ordersn:4,goods_id: 1, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥ 22',payment: 22.00, spec:'备注',numner:1 }
],
],
list:[],
tabbarIndex:0
};
},
onLoad(option) {
//option为object类型，会序列化上个页面传递的参数
console.log("option: " + JSON.stringify(option));
let tbIndex = parseInt(option.tbIndex)+1;
this.list = this.orderList[tbIndex];
this.tabbarIndex = tbIndex;
//兼容H5下排序栏位置
// #ifdef H5
let Timer = setInterval(()=>{
let uniHead = document.getElementsByTagName('uni-page-head');
if(uniHead.length>0){
this.headerTop = uniHead[0].offsetHeight+'px';
clearInterval(Timer);//清除定时器
}
},1);
// #endif
},
onPageScroll(e){
return;
//兼容iOS端下拉时顶部漂移
this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
},
methods: {
showType(tbIndex){
this.tabbarIndex = tbIndex;
this.list = this.orderList[tbIndex];
},
showLogistics(row){
},
}
}
</script>
<style lang="scss">
page{
background-color: #f3f3f3;
}
.topTabBar{
width: 100%;
position: fixed;
top: 0;
z-index: 10;
background-color: #f8f8f8;
height: 80upx;
display: flex;
justify-content: space-around;
.grid{
width: 20%;
height: 80upx;
display: flex;
justify-content: center;
align-items: center;
color: #444;
font-size: 28upx;
.text{
height: 76upx;
display: flex;
align-items: center;
&.on{
color: #f23030;
border-bottom: solid 6upx #f23030;
}
}
}
}
.order-list{
margin-top: 80upx;
padding-top: 20upx;
width: 100%;
.list{
width: 94%;
margin: 0 auto;
.onorder{
width: 100%;
height: 50vw;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
image{
width: 20vw;
height: 20vw;
border-radius: 100%;
}
.text{
width: 100%;
height: 60upx;
font-size: 28upx;
color: #444;
display: flex;
justify-content: center;
align-items: center;
}
}
.row{
width: calc(100% - 40upx);
padding: 10upx 20upx;
border-radius: 10upx;
background-color: #fff;
margin-bottom: 20upx;
.type{
font-size: 26upx;
// color: #ec652f;
height: 50upx;
display: flex;
align-items: center;
}
.order-info{
width: 100%;
display: flex;
.left{
flex-shrink: 0;
width: 25vw;
height: 25vw;
border: 1px solid #C8C7CC;
image{
width: 25vw;
height: 25vw;
border-radius: 10upx;
}
}
.right{
width: 100%;
margin-left: 10upx;
position: relative;
.name{
width: 100%;
font-size: 28upx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.spec{
color: #a7a7a7;
font-size: 22upx;
}
.price-number{
position: absolute;
bottom: 0;
width: 100%;
display: flex;
justify-content: flex-end;
font-size: 22upx;
color: #333;
display: flex;
align-items: flex-end;
.price{
font-size: 24upx;
margin-right: 5upx;
}
}
}
}
.detail{
display: flex;
justify-content: flex-end;
align-items: flex-end;
height: 60upx;
font-size: 26upx;
.sum{
padding: 0 8upx;
display: flex;
align-items: flex-end;
.price{
font-size: 30upx;
}
}
}
.btns{
height: 80upx;
display: flex;
align-items: center;
justify-content: flex-end;
view{
min-width: 120upx;
height: 50upx;
padding: 0 20upx;
border-radius: 50upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28upx;
margin-left: 20upx;
}
.default{
border: solid 1upx #ccc;
color: #666;
}
.pay{
border: solid 1upx #ec652f;
color: #ec652f;
}
}
}
}
}
</style>
2774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
