小程序 好多样式 选择

<!-- 我的订单（tab） -->

<style lang="less">

.container {

height: 100%;

.dis_flex {

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

}

.youhui {

display: flex;

flex-direction: row;

align-items: stretch;

justify-content: space-around;

width: 750rpx;

height: 133rpx;

background: rgba(255, 255, 255, 1);

font-size: 28rpx;

font-family: PingFang-SC-Regular;

font-weight: 400;

color: #999999;

line-height: 133rpx;

position: fixed;

top: 0;

left: 0;

z-index: 100;

}

.active {

font-size: 34rpx;

font-family: PingFang-SC-Bold;

font-weight: bold;

color: #F83E4D;

line-height: 133rpx;

position: relative;

}

.active:before {

content: '';

position: absolute;

left: 0rpx;

bottom: 30rpx;

width: 100%;

height: 5rpx;

background: linear-gradient(88deg, rgba(249, 87, 56, 1) 0%, rgba(248, 39, 96, 1) 100%);

border-radius: 3rpx;

}

.yohui_article {

width: 750rpx;

}

.swiper-box {

height: 100vh;

}

.middle {

margin-top: 20rpx;

width: 710rpx;

height: 370rpx;

background: #fff;

border-radius: 12rpx;

margin-left: 20rpx;

.name {

height: 104rpx;

.dis_flex;

.left {

padding-left: 30rpx;

.dis_flex;

image {

width: 40rpx;

height: 36rpx;

}

text {

padding-left: 18rpx;

font-size: 30rpx;

font-family: PingFang-SC-Bold;

font-weight: bold;

color: #666;

}

}

.right {

padding-right: 30rpx;

font-size: 28rpx;

font-family: PingFang-SC-Bold;

font-weight: bold;

color: #F83E4D;

}

}

.info {

.dis_flex;

align-items: normal;

.left {

.dis_flex;

align-items: normal;

.img {

padding-left: 30rpx;

padding-right: 20rpx;

image {

width: 160rpx;

height: 160rpx;

border-radius: 20rpx;

}

}

.time {

font-size: 24rpx;

font-family: PingFang-SC-Regular;

font-weight: 400;

color: #999999;

margin-top: 20rpx;

}

}

.right {

padding-right: 30rpx;

padding-left: 40rpx;

.bigt {

font-size: 28rpx;

font-family: PingFang-SC-Bold;

font-weight: bold;

color: #666666;

}

.samllt {

font-size: 28rpx;

font-family: PingFang-SC-Bold;

font-weight: bold;

color: #BBBBBB;

text-align: right;

}

}

}

.price {

.button {

button {

width: 160rpx;

height: 65rpx;

background: linear-gradient(100deg, rgba(249, 87, 56, 1) 0%, rgba(248, 39, 96, 1) 100%);

border-radius: 33rpx;

font-size: 28rpx;

font-family: PingFang-SC-Bold;

font-weight: bold;

color: #FFFFFF;

text-align: center;

line-height: 65rpx;

float: right;

margin-right: 30rpx;

}

}

}

.price_use {

.button {

button {

width: 160rpx;

height: 65rpx;

border: 3rpx solid #F95738;

border-radius: 33rpx;

font-size: 28rpx;

font-family: PingFang-SC-Bold;

font-weight: bold;

color: #F83E4D;

text-align: center;

line-height: 65rpx;

float: right;

margin-right: 30rpx;

background: #fff;

}

}

}

.price_gray {

.button {

button {

width: 160rpx;

height: 65rpx;

border: 3rpx solid #DDDDDD;

border-radius: 33rpx;

font-size: 28rpx;

font-family: PingFang-SC-Bold;

font-weight: bold;

color: #999999;

text-align: center;

line-height: 65rpx;

float: right;

margin-right: 30rpx;

background: #fff;

}

}

}

.price_cancel {

.button {

button {

border: none;

float: right;

margin-right: 30rpx;

font-size: 28rpx;

font-family: PingFang-SC-Bold;

font-weight: bold;

color: #BBBBBB;

background: #fff;

}

button::after {

border: none !important;

}

}

}

}

.middle:last-child {

margin-bottom: 30rpx;

}

}

</style>

<template>

<view class="container">

<view class="youhui">

<view class="{{_num==0?'active':''}}" data-index='0' bindtap='toggle'>

全部订单

</view>

<view class="{{_num==1?'active':''}}" data-index='1' bindtap='toggle'>

待使用

</view>

<view class="{{_num==2?'active':''}}" data-index='2' bindtap='toggle'>

待分享

</view>

</view>

<view style="height:133rpx;"></view>

<!-- -->

<swiper current="{{_num}}" class="swiper-box" duration="200" bindchange="bindChange">

<!-- 未使用 -->

<swiper-item>

<scroll-view scroll-y scroll-with-animation style="height: 1201rpx;">

<view class="yohui_article">

<block wx:for="{{array}}" wx:key="item" wx:for-index="key">

<view class="middle">

<view class="name">

<view class="left">

<image src="../../images/shangdian.png" mode="aspectFill" lazy-load="false" />

<text>金地澜 · 海鑫生鲜</text>

</view>

</view>

<view class="info">

<view class="left">

<view class="img">

<image src="http://wx1.sinaimg.cn/large/006VtoKely1fjk4hsoeooj30dw0dw76f.jpg" mode="aspectFill" lazy-load="false" />

</view>

<view style="">

<wxc-elip line="2" style="font-size:30rpx;font-family:PingFang-SC-Bold;color:#333333;">这是一段 2 行截断的文字。这是一段 2 行截断的文字。这是一段 2 行截断的文字。这是一段 2 行截断的文字。这是一段 2 行截断的文字。这是一段 2 行截断的文字。</wxc-elip>

<view class="time">2018-12-09 14:05:18</view>

</view>

</view>

<view class="right">

<view class="bigt">￥79.9</view>

</view>

</view>

<!-- 待分享 -->

<view class="{{item.class}}">

<view class="button">

<form report-submit="true" @submit="submit" bindtap="showPopupshow">

<button form-type="submit" class="">

{{item.textname}}

</button>

</form>

</view>

</view>

</view>

</block>

</view>

</scroll-view>

<wxc-popup class="J_Popup_show" animation-mode="bottom" align="bottom" >

<view class="J_Popup_show">

<share></share>

</view>

</wxc-popup>

</swiper-item>

<!-- 已使用 -->

<swiper-item>

<view class="yohui_article youhui_article1">

222

</view>

</swiper-item>

<!-- 已过期 -->

<swiper-item>

<view class="yohui_article youhui_article2">

333

</view>

</swiper-item>

</swiper>

</view>

</template>

<script lang="TypeScript">

import wepy from 'wepy'

import {

debug,

api,

msg,

user,

lang,

utils

} from '../../libs/index'

import share from '../../components/share'

export default class MineOrder extends wepy.page {

config = {

navigationBarTitleText: '我的订单',

usingComponents: {

'wxc-elip': '../../packages/@minui/wxc-elip/dist/index',

'wxc-popup': './../packages/@minui/wxc-popup/dist/index'

}

}

data = {

state: 0,

_num: '0',

array: [{

name: '1100',

class: 'price',

textname: '待分享'

},

{

name: '1100',

class: 'price_use',

textname: '待使用'

},

{

name: '1100',

class: 'price_gray',

textname: '待评价'

},

{

name: '1100',

class: 'price_cancel',

textname: '已取消'

}, {

name: '1100',

class: 'price_use',

textname: '已取消'

}, {

name: '1100',

class: 'price_use',

textname: '已取消'

}, {

name: '1100',

class: 'price_use',

textname: '已取消'

},

]

}

events = {}

components = {

share

}

mixins = []

watch = {}

methods = {

// detailsSubmit(e) {

// console.log("你好")

// utils.sendFormIdAndNavigateTo(e, '../order/details')

// }

showPopupshow() {

let popupComponent = this.$wxpage.selectComponent('.J_Popup_show');

popupComponent && popupComponent.show();

},

}

onLoad() {}

onShow() {}

onRoute() {}

onReady() {}

onUnload() {}

onPullDownRefresh() {}

onReachBottom() {}

onPageScroll(e) {}

onShareAppMessage(e) {}

toggle(e) {

console.log(e.currentTarget.dataset.index);

if (this.data._num === e.currentTarget.dataset.index) {

return false;

} else {

// this.setData({

// _num: e.currentTarget.dataset.index

// })

this._num = e.currentTarget.dataset.index

this.$apply();

}

}

bindChange(e) {

var that = this;

console.log(e)

// that.setData({

// _num: e.detail.current

// });

that._num = e.detail.current

that.$apply();

switch (e.detail.current) {

case 0:

that.data.state = 0

break;

case 1:

that.data.state = 1

break;

case 2:

that.data.state = 2

break;

}

}

</script>