|
|
@@ -1,271 +1,267 @@
|
|
|
<!-- order -->
|
|
|
<template>
|
|
|
- <view class="order">
|
|
|
- <view class="header-warp">
|
|
|
- <view class="header-search">
|
|
|
- <view class="uni-list-cell">
|
|
|
- <view class="uni-list-cell-db">
|
|
|
- <picker @change="bindPickerChange" :value="index" :range="array">
|
|
|
- <view class="uni-input">{{ array[index] }}</view>
|
|
|
- </picker>
|
|
|
- <image src="../../static/images/garydownicon.png" mode="" class="icon"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="search">
|
|
|
- <input type="text" placeholder-style="color:#a3a8a8;font-size:10px;" placeholder="请输入订单号或手机号、身份证号" class="cellphone" />
|
|
|
- <text class="txt">搜索</text>
|
|
|
- </view>
|
|
|
- <view class="btn-time">
|
|
|
- <image src="../../static/images/timeIcon.png" class="timeicon"></image>
|
|
|
- <text class="screen">按时间</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="header-bar">
|
|
|
- <view class="item" @tap="changeTab(1)" :class="{ active: isactive === 1 }">
|
|
|
- <view class="ordertype">已付款</view>
|
|
|
- <view class="heng"></view>
|
|
|
- </view>
|
|
|
- <view class="item" @tap="changeTab(2)" :class="{ active: isactive === 2 }">
|
|
|
- <view class="ordertype">已完成</view>
|
|
|
- <view class="heng"></view>
|
|
|
- </view>
|
|
|
- <view class="item" @tap="changeTab(3)" :class="{ active: isactive === 3 }">
|
|
|
- <view class="ordertype">退款</view>
|
|
|
- <view class="heng"></view>
|
|
|
- </view>
|
|
|
- <view class="line"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view style="height: 192upx;"></view>
|
|
|
- <view class="order-content" v-if="isactive === 1">
|
|
|
- <view class="order-list" @tap='todetail'>
|
|
|
- <view class="order-title">
|
|
|
- <text class="ordernum">订单号：<text class="num">15648464184616</text></text>
|
|
|
- <text class="ordertime">09:26</text>
|
|
|
- </view>
|
|
|
- <view class="order-detail">
|
|
|
- <view class="name">仙女山成人票</view>
|
|
|
- <view class="door">门店：<text class="message">1</text></view>
|
|
|
- <view class="num">门店：<text class="message">2</text></view>
|
|
|
- <view class="status">门店：<text class="message">3</text></view>
|
|
|
- <view class="playtime">门店：<text class="message">4</text></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- 1
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="order">
|
|
|
+ <view class="header-warp">
|
|
|
+ <view class="header-search">
|
|
|
+ <view class="uni-list-cell">
|
|
|
+ <view class="uni-list-cell-db">
|
|
|
+ <picker @change="bindPickerChange" :value="index" :range="array">
|
|
|
+ <view class="uni-input">{{ array[index] }}</view>
|
|
|
+ </picker>
|
|
|
+ <image
|
|
|
+ src="../../static/images/garydownicon.png"
|
|
|
+ mode=""
|
|
|
+ class="icon"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="search">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder-style="color:#a3a8a8;font-size:10px;"
|
|
|
+ placeholder="请输入订单号或手机号、身份证号"
|
|
|
+ class="cellphone"
|
|
|
+ />
|
|
|
+ <text class="txt">搜索</text>
|
|
|
+ </view>
|
|
|
+ <view class="btn-time">
|
|
|
+ <image
|
|
|
+ src="../../static/images/timeIcon.png"
|
|
|
+ class="timeicon"
|
|
|
+ ></image>
|
|
|
+ <text class="screen">按时间</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="header-bar">
|
|
|
+ <view
|
|
|
+ class="item"
|
|
|
+ @tap="changeTab(1)"
|
|
|
+ :class="{ active: isactive === 1 }"
|
|
|
+ >
|
|
|
+ <view class="ordertype">已付款</view>
|
|
|
+ <view class="heng"></view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="item"
|
|
|
+ @tap="changeTab(2)"
|
|
|
+ :class="{ active: isactive === 2 }"
|
|
|
+ >
|
|
|
+ <view class="ordertype">已完成</view>
|
|
|
+ <view class="heng"></view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="item"
|
|
|
+ @tap="changeTab(3)"
|
|
|
+ :class="{ active: isactive === 3 }"
|
|
|
+ >
|
|
|
+ <view class="ordertype">退款</view>
|
|
|
+ <view class="heng"></view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="height: 192upx;"></view>
|
|
|
+ <view class="order-content" v-if="isactive === 1">
|
|
|
+ <view class="order-list" @tap='todetail'>
|
|
|
+ <view class="order-title">
|
|
|
+ <text class="ordernum"
|
|
|
+ >订单号：<text class="num">15648464184616</text></text
|
|
|
+ >
|
|
|
+ <text class="ordertime">09:26</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-detail">
|
|
|
+ <view class="name">仙女山成人票</view>
|
|
|
+ <view class="door">门店：<text class="message">1</text></view>
|
|
|
+ <view class="num">门店：<text class="message">2</text></view>
|
|
|
+ <view class="status">门店：<text class="message">3</text></view>
|
|
|
+ <view class="playtime">门店：<text class="message">4</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- name: 'order',
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- //这里存放数据
|
|
|
- return {
|
|
|
- array: ['中国', '美国', '巴西', '日本'],
|
|
|
- index: 0,
|
|
|
- isactive: 1,
|
|
|
- };
|
|
|
- },
|
|
|
- //方法集合
|
|
|
- methods: {
|
|
|
- bindPickerChange: function(e) {
|
|
|
- console.log('picker发送选择改变，携带值为', e.target.value);
|
|
|
- this.index = e.target.value;
|
|
|
- },
|
|
|
- // tab
|
|
|
- changeTab(type) {
|
|
|
- this.isactive = type;
|
|
|
- },
|
|
|
+export default {
|
|
|
+ name: 'order',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ array: ['中国', '美国', '巴西', '日本'],
|
|
|
+ index: 0,
|
|
|
+ isactive: 1,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ bindPickerChange: function (e) {
|
|
|
+ console.log('picker发送选择改变，携带值为', e.target.value);
|
|
|
+ this.index = e.target.value;
|
|
|
+ },
|
|
|
+ // tab
|
|
|
+ changeTab(type) {
|
|
|
+ this.isactive = type;
|
|
|
+ },
|
|
|
|
|
|
- // 跳转详情
|
|
|
- todetail() {
|
|
|
- console.log(1);
|
|
|
- this.$mRouter.push({
|
|
|
- route: '/pages/order/orderdetail'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- };
|
|
|
+ // 跳转详情
|
|
|
+ todetail() {
|
|
|
+ console.log(1);
|
|
|
+ this.$mRouter.push({route: ""})
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
- .order {
|
|
|
- background-color: #f4f4f4;
|
|
|
+.order {
|
|
|
+ background-color: #f4f4f4;
|
|
|
+ .header-warp {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 15upx 33upx 0;
|
|
|
+ position: fixed;
|
|
|
+ .header-search {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .uni-list-cell {
|
|
|
+ width: 92upx;
|
|
|
+ .uni-list-cell-db {
|
|
|
+ height: 80upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #8f8f8f;
|
|
|
+ .icon {
|
|
|
+ width: 17upx;
|
|
|
+ height: 12upx;
|
|
|
+ margin-left: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 80upx;
|
|
|
+ margin-left: 20upx;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ border-radius: 10upx;
|
|
|
+ .cellphone {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ color: $titleColor;
|
|
|
+ padding-left: 20upx;
|
|
|
+ }
|
|
|
+ .search-holder {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ height: 72upx;
|
|
|
+ width: 90upx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 72upx;
|
|
|
+ color: #a95cff;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-time {
|
|
|
+ width: 130upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .timeicon {
|
|
|
+ width: 25upx;
|
|
|
+ height: 28upx;
|
|
|
+ }
|
|
|
+ .screen {
|
|
|
+ margin-left: 5upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #8f8f8f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .header-bar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ .item {
|
|
|
+ position: relative;
|
|
|
+ width: 33.33%;
|
|
|
+ height: 99upx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .ordertype {
|
|
|
+ position: relative;
|
|
|
+ font-size: 30upx;
|
|
|
+ letter-spacing: 3upx;
|
|
|
+ color: #7a7c7c;
|
|
|
+ }
|
|
|
+ .heng {
|
|
|
+ position: absolute;
|
|
|
+ display: none;
|
|
|
+ bottom: 0;
|
|
|
+ width: 40upx;
|
|
|
+ height: 6upx;
|
|
|
+ border-radius: 4upx;
|
|
|
+ background-color: #a95cff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .header-warp {
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- padding: 15upx 33upx 0;
|
|
|
- position: fixed;
|
|
|
-
|
|
|
- .header-search {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .uni-list-cell {
|
|
|
- width: 92upx;
|
|
|
-
|
|
|
- .uni-list-cell-db {
|
|
|
- height: 80upx;
|
|
|
- font-size: 28upx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background-color: #fff;
|
|
|
- color: #8f8f8f;
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 17upx;
|
|
|
- height: 12upx;
|
|
|
- margin-left: 10upx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .search {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 80upx;
|
|
|
- margin-left: 20upx;
|
|
|
- background-color: #f7f7f7;
|
|
|
- border-radius: 10upx;
|
|
|
-
|
|
|
- .cellphone {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- color: $titleColor;
|
|
|
- padding-left: 20upx;
|
|
|
- }
|
|
|
-
|
|
|
- .search-holder {
|
|
|
- color: #f00;
|
|
|
- }
|
|
|
-
|
|
|
- .txt {
|
|
|
- height: 72upx;
|
|
|
- width: 90upx;
|
|
|
- text-align: center;
|
|
|
- line-height: 72upx;
|
|
|
- color: #a95cff;
|
|
|
- font-size: 28upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn-time {
|
|
|
- width: 130upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .timeicon {
|
|
|
- width: 25upx;
|
|
|
- height: 28upx;
|
|
|
- }
|
|
|
-
|
|
|
- .screen {
|
|
|
- margin-left: 5upx;
|
|
|
- font-size: 24upx;
|
|
|
- color: #8f8f8f;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .header-bar {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .item {
|
|
|
- position: relative;
|
|
|
- width: 33.33%;
|
|
|
- height: 99upx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .ordertype {
|
|
|
- position: relative;
|
|
|
- font-size: 30upx;
|
|
|
- letter-spacing: 3upx;
|
|
|
- color: #7a7c7c;
|
|
|
- }
|
|
|
-
|
|
|
- .heng {
|
|
|
- position: absolute;
|
|
|
- display: none;
|
|
|
- bottom: 0;
|
|
|
- width: 40upx;
|
|
|
- height: 6upx;
|
|
|
- border-radius: 4upx;
|
|
|
- background-color: #a95cff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .active .ordertype {
|
|
|
- color: #a95cff;
|
|
|
- }
|
|
|
-
|
|
|
- .active .heng {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .order-content {
|
|
|
- padding: 24upx 32upx 0;
|
|
|
-
|
|
|
- .order-list {
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10upx;
|
|
|
- padding: 30upx 24upx 33upx;
|
|
|
- margin-bottom: 24upx;
|
|
|
-
|
|
|
- .order-title {
|
|
|
- border-bottom: 1px solid $bordrColor;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding-bottom: 22upx;
|
|
|
-
|
|
|
- .ordernum {
|
|
|
- font-size: 30upx;
|
|
|
- color: #232828;
|
|
|
-
|
|
|
- .num {
|
|
|
- margin-left: 10upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ordertime {
|
|
|
- color: #a3a8a8;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .order-detail {
|
|
|
- margin-top: 24upx;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 34upx;
|
|
|
- }
|
|
|
-
|
|
|
- .door,
|
|
|
- .num,
|
|
|
- .status,
|
|
|
- .playtime {
|
|
|
- font-size: 26upx;
|
|
|
- color: #7a7c7c;
|
|
|
- margin-top: 14upx;
|
|
|
- }
|
|
|
-
|
|
|
- .message {
|
|
|
- margin-left: 10upx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+ .active .ordertype {
|
|
|
+ color: #a95cff;
|
|
|
+ }
|
|
|
+ .active .heng {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-content {
|
|
|
+ padding: 24upx 32upx 0;
|
|
|
+ .order-list {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10upx;
|
|
|
+ padding: 30upx 24upx 33upx;
|
|
|
+ margin-bottom: 24upx;
|
|
|
+ .order-title {
|
|
|
+ border-bottom: 1px solid $bordrColor;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 22upx;
|
|
|
+ .ordernum {
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #232828;
|
|
|
+ .num {
|
|
|
+ margin-left: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ordertime {
|
|
|
+ color: #a3a8a8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-detail {
|
|
|
+ margin-top: 24upx;
|
|
|
+ .name {
|
|
|
+ font-size: 34upx;
|
|
|
+ }
|
|
|
+ .door,
|
|
|
+ .num,
|
|
|
+ .status,
|
|
|
+ .playtime {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #7a7c7c;
|
|
|
+ margin-top: 14upx;
|
|
|
+ }
|
|
|
+ .message {
|
|
|
+ margin-left: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
