Augcl
/
popularize-front
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

更新

master
zheng_hb 2 months ago
parent
b668cde6fa
commit
0dd1a5df6d
8 changed files with 626 additions and 1 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +24
    -0
      pages.json
  2. +12
    -0
      pages/index/cart.vue
  3. +2
    -1
      pages/index/center.vue
  4. +242
    -0
      pages_my/activeList.vue
  5. +109
    -0
      pages_my/collection.vue
  6. +236
    -0
      pages_my/travelList.vue
  7. BIN
      static/image/icon.png
  8. +1
    -0
      uni.scss

+ 24
- 0
pages.json View File

@ -114,6 +114,30 @@
"navigationStyle": "custom" , "navigationStyle": "custom" ,
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
},
{
"path": "collection",
"style": {
"enablePullDownRefresh": true,
"navigationStyle": "custom" ,
"navigationBarTextStyle": "white"
}
},
{
"path": "travelList",
"style": {
"enablePullDownRefresh": true,
"navigationStyle": "custom" ,
"navigationBarTextStyle": "white"
}
},
{
"path": "activeList",
"style": {
"enablePullDownRefresh": true,
"navigationStyle": "custom" ,
"navigationBarTextStyle": "white"
}
} }
] ]
}], }],


+ 12
- 0
pages/index/cart.vue View File

@ -13,6 +13,8 @@
:inactiveStyle="{color: '#999', transform: 'scale(1)'}" :inactiveStyle="{color: '#999', transform: 'scale(1)'}"
itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"
></uv-tabs> ></uv-tabs>
<button class="mini-btn" size="mini" @click="travelList">旅行列表</button>
<button class="mini-btn" size="mini" @click="activeList">活动列表</button>
<cardList :cardListData="cardListData" @btnClick="btnClick" @toOrderDetails="toOrderDetails" /> <cardList :cardListData="cardListData" @btnClick="btnClick" @toOrderDetails="toOrderDetails" />
</view> </view>
<tabber select="cart" /> <tabber select="cart" />
@ -114,6 +116,16 @@
} }
}, },
methods: { methods: {
travelList() {
uni.navigateTo({
url: '/pages_my/travelList'
})
},
activeList() {
uni.navigateTo({
url: '/pages_my/activeList'
})
},
tabs(val) { tabs(val) {
console.log(val); console.log(val);
}, },


+ 2
- 1
pages/index/center.vue View File

@ -90,7 +90,8 @@
}, },
{ {
src:require('@/static/image/center/line-2.png'), src:require('@/static/image/center/line-2.png'),
name:'我的收藏'
name:'我的收藏',
url:'/pages_my/collection'
}, },
{ {
src:require('@/static/image/center/line-3.png'), src:require('@/static/image/center/line-3.png'),


+ 242
- 0
pages_my/activeList.vue View File

@ -0,0 +1,242 @@
<template>
<view class="travelList">
<view class="head-box"></view>
<Navbar title="活动列表" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
<view class="content contentPosition_">
<view class="drop">
<uv-drop-down
ref="dropDown"
text-color="#fff"
text-size="30rpx"
sign="dropDown_1"
text-active-color="#fff"
:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
:extra-active-icon="{name:'arrow-up-fill',color:'#fff',size:'26rpx'}"
:defaultValue="defaultValue"
:custom-style="{padding: '0 30rpx'}"
@click="selectMenu"
>
<uv-drop-down-item
name="order"
type="2"
:label="dropItem('order').label"
:value="dropItem('order').value">
</uv-drop-down-item>
<uv-drop-down-item
name="place"
type="2"
:label="dropItem('type').label"
:value="dropItem('type').value">
</uv-drop-down-item>
<uv-drop-down-item
name="type"
type="2"
:label="dropItem('type').label"
:value="dropItem('type').value">
</uv-drop-down-item>
</uv-drop-down>
<uv-drop-down-popup
sign="dropDown_1"
:click-overlay-on-close="true"
:currentDropItem="currentDropItem"
@clickItem="clickItem"
@popupChange="change"
></uv-drop-down-popup>
</view>
<view class="info cardStyle_">
<view class="left">
<image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031" alt="">
</view>
<view class="right">
<view class="detailed">
<view class="title">夏日去撒野旅游计划～</view>
<view class="date">2024.10.28 10:00</view>
<view class="address">成都市东丽湖露营地32号</view>
</view>
<view class="data">
<text>¥233.00</text>
<text>11/40</text>
<text class="btn">已开票</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import Navbar from '@/pages/components/Navbar.vue'
import { globalMixin } from '../pages/mixins/globalMixin';
export default{
onPageScroll() {
// 滚动后及时更新位置
this.$refs.dropDown.init();
},
mixins: [globalMixin],
components:{
Navbar
},
computed: {
dropItem(name) {
return (name) => {
const result = {};
const find = this.result.find(item => item.name === name);
if (find) {
result.label = find.label;
result.value = find.value;
} else {
result.label = this[name].label;
result.value = this[name].value;
}
return result;
}
},
// 获取当前下拉筛选项
currentDropItem() {
return this[this.activeName];
}
},
data() {
return {
// 表示value等于这些值，就属于默认值
defaultValue: [0, 'all', '0'],
// 筛选结果
result: [{ name: 'order', label: '全部', value: 'new' }],
// { name: 'order', label: '最新发布', value: 'new' }
activeName: 'order',
order: {
label: '全部',
value: 'all',
activeIndex: 0,
color: '#333',
activeColor: '#FF4546',
child: [{
label: '综合排序',
value: 'all'
}, {
label: '最新发布',
value: 'new'
}, {
label: '低价优先',
value: 'money'
}]
},
type: {
label: '时间',
value: 'all',
activeIndex: 0,
color: '#333',
activeColor: '#FF4546',
child: [{
label: '全部',
value: 'all'
}, {
label: 'PDF',
value: 'pdf'
}, {
label: 'WROD',
value: 'word'
}, {
label: 'PPT',
value: 'ppt'
}]
}
}
},
methods: {
change(e) {
console.log('弹窗打开状态：',e);
},
/**
* 点击每个筛选项回调
* @param {Object} e { name, active, type } = e
*/
selectMenu(e) {
const { name, active, type } = e;
this.activeName = name;
// type 等于1 的需要特殊处理：type不等于1可以忽略
if (type == 1) {
this.clickItem({
name: 'vip_type',
label: 'VIP文档',
value: e.active ? 1 : 0
});
} else {
const find = this.result.find(item => item.name == this.activeName);
if (find) {
const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value == find.value);
this[this.activeName].activeIndex = findIndex;
} else {
this[this.activeName].activeIndex = 0;
}
}
},
/**
* 点击菜单回调处理
* @param {Object} item 选中项 { label,value } = e
*/
clickItem(e) {
// 下面有重新赋值，所以用let
let { label, value } = e;
const findIndex = this.result.findIndex(item => item.name == this.activeName);
if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
label = this[this.activeName].label;
}
// 已经存在筛选项
if (findIndex > -1) {
this.$set(this.result, findIndex, {
name: this.activeName,
label,
value
})
} else {
this.result.push({
name: this.activeName,
label,
value
});
}
this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
uni.showModal({
content: `筛选的值：${JSON.stringify(this.result)}`
})
}
}
}
</script>
<style scoped lang="scss">
/deep/.uv-sticky__content{
.uv-drop-down {
justify-content: normal;
border: 0;
background: transparent;
}
}
.travelList {
margin-bottom: 500rpx;
.content {
.info {
position: relative;
margin: 10rpx 32rpx 36rpx;;
padding: 35rpx 0 35rpx 24rpx;
border-radius: 26rpx;
.right {
.data {
display: flex;
justify-content: space-between;
align-items: center;
.btn {
background: #381615;
color: $uni-color-primary;
padding: 10rpx 40rpx;
border-radius: 30rpx 0px 0px 30rpx;
}
}
}
}
}
}
</style>

+ 109
- 0
pages_my/collection.vue View File

@ -0,0 +1,109 @@
<template>
<view class="invoiceIssuance">
<view class="head-box"></view>
<Navbar title="订单详情" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
<view class="content contentPosition_">
<view class="info cardStyle_">
<view class="left">
<image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031" alt="">
</view>
<view class="right">
<view class="detailed">
<view class="title">夏日去撒野旅游计划～</view>
<view class="date">2024.10.28 10:00</view>
<view class="address">成都市东丽湖露营地32号</view>
</view>
<view class="data">
<view>12/30</view>
<button class="mini-btn" size="mini">立即报名</button>
</view>
</view>
<i class="icon"></i>
</view>
<view class="info cardStyle_">
<view class="left">
<image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031" alt="">
</view>
<view class="right">
<view class="detailed">
<view class="title">夏日去撒野旅游计划～</view>
<view class="date">2024.10.28 10:00</view>
<view class="address">成都市东丽湖露营地32号</view>
</view>
<view class="data">
<view>12/30</view>
<button class="mini-btn" size="mini">立即报名</button>
</view>
</view>
<i class="icon"></i>
</view>
</view>
</view>
</template>
<script>
import Navbar from '@/pages/components/Navbar.vue'
import { globalMixin } from '../pages/mixins/globalMixin';
export default{
mixins: [globalMixin],
components:{
Navbar
},
computed: {
customStyle1() {
return {
height: '30rpx',
color: '#FF4546',
}
}
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.invoiceIssuance {
margin-bottom: 500rpx;
.content {
.info {
position: relative;
margin: 10rpx 32rpx 36rpx;;
border-radius: 26rpx;
.icon {
position: absolute;
right: 0;
top: 0;
display: block;
width: 66rpx;
height: 56rpx;
background: red;
background: url('@/static/image/icon.png') no-repeat;
background-size: 100% 100%;
}
.right {
.data {
display: flex;
justify-content: space-between;
align-items: center;
.mini-btn {
margin: 0;
background: linear-gradient(to right, #FE5E5E, #E41522);
height: 45rpx;
line-height: 45rpx;
width: 181rpx;
color:#fff;
border-radius: 60rpx;
padding-bottom: 5rpx;
}
}
}
}
}
}
</style>

+ 236
- 0
pages_my/travelList.vue View File

@ -0,0 +1,236 @@
<template>
<view class="travelList">
<view class="head-box"></view>
<Navbar title="旅行列表" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
<view class="content contentPosition_">
<view class="drop">
<uv-drop-down
ref="dropDown"
text-color="#fff"
text-size="30rpx"
sign="dropDown_1"
text-active-color="#fff"
:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
:extra-active-icon="{name:'arrow-up-fill',color:'#fff',size:'26rpx'}"
:defaultValue="defaultValue"
:custom-style="{padding: '0 30rpx'}"
@click="selectMenu"
>
<uv-drop-down-item
name="order"
type="2"
:label="dropItem('order').label"
:value="dropItem('order').value">
</uv-drop-down-item>
<uv-drop-down-item
name="type"
type="2"
:label="dropItem('type').label"
:value="dropItem('type').value">
</uv-drop-down-item>
</uv-drop-down>
<uv-drop-down-popup
sign="dropDown_1"
:click-overlay-on-close="true"
:currentDropItem="currentDropItem"
@clickItem="clickItem"
@popupChange="change"
></uv-drop-down-popup>
</view>
<view class="info cardStyle_">
<view class="left">
<image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031" alt="">
</view>
<view class="right">
<view class="detailed">
<view class="title">夏日去撒野旅游计划～</view>
<view class="date">2024.10.28 10:00</view>
<view class="address">成都市东丽湖露营地32号</view>
</view>
<view class="data">
<text>¥233.00</text>
<text>11/40</text>
<text class="btn">已开票</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import Navbar from '@/pages/components/Navbar.vue'
import { globalMixin } from '../pages/mixins/globalMixin';
export default{
onPageScroll() {
// 滚动后及时更新位置
this.$refs.dropDown.init();
},
mixins: [globalMixin],
components:{
Navbar
},
computed: {
dropItem(name) {
return (name) => {
const result = {};
const find = this.result.find(item => item.name === name);
if (find) {
result.label = find.label;
result.value = find.value;
} else {
result.label = this[name].label;
result.value = this[name].value;
}
return result;
}
},
// 获取当前下拉筛选项
currentDropItem() {
return this[this.activeName];
}
},
data() {
return {
// 表示value等于这些值，就属于默认值
defaultValue: [0, 'all', '0'],
// 筛选结果
result: [{ name: 'order', label: '全部', value: 'new' }],
// { name: 'order', label: '最新发布', value: 'new' }
activeName: 'order',
order: {
label: '全部',
value: 'all',
activeIndex: 0,
color: '#333',
activeColor: '#FF4546',
child: [{
label: '综合排序',
value: 'all'
}, {
label: '最新发布',
value: 'new'
}, {
label: '低价优先',
value: 'money'
}]
},
type: {
label: '时间',
value: 'all',
activeIndex: 0,
color: '#333',
activeColor: '#FF4546',
child: [{
label: '全部',
value: 'all'
}, {
label: 'PDF',
value: 'pdf'
}, {
label: 'WROD',
value: 'word'
}, {
label: 'PPT',
value: 'ppt'
}]
}
}
},
methods: {
change(e) {
console.log('弹窗打开状态：',e);
},
/**
* 点击每个筛选项回调
* @param {Object} e { name, active, type } = e
*/
selectMenu(e) {
const { name, active, type } = e;
this.activeName = name;
// type 等于1 的需要特殊处理：type不等于1可以忽略
if (type == 1) {
this.clickItem({
name: 'vip_type',
label: 'VIP文档',
value: e.active ? 1 : 0
});
} else {
const find = this.result.find(item => item.name == this.activeName);
if (find) {
const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value == find.value);
this[this.activeName].activeIndex = findIndex;
} else {
this[this.activeName].activeIndex = 0;
}
}
},
/**
* 点击菜单回调处理
* @param {Object} item 选中项 { label,value } = e
*/
clickItem(e) {
// 下面有重新赋值，所以用let
let { label, value } = e;
const findIndex = this.result.findIndex(item => item.name == this.activeName);
if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
label = this[this.activeName].label;
}
// 已经存在筛选项
if (findIndex > -1) {
this.$set(this.result, findIndex, {
name: this.activeName,
label,
value
})
} else {
this.result.push({
name: this.activeName,
label,
value
});
}
this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
uni.showModal({
content: `筛选的值：${JSON.stringify(this.result)}`
})
}
}
}
</script>
<style scoped lang="scss">
/deep/.uv-sticky__content{
.uv-drop-down {
justify-content: normal;
border: 0;
background: transparent;
}
}
.travelList {
margin-bottom: 500rpx;
.content {
.info {
position: relative;
margin: 10rpx 32rpx 36rpx;;
padding: 35rpx 0 35rpx 24rpx;
border-radius: 26rpx;
.right {
.data {
display: flex;
justify-content: space-between;
align-items: center;
.btn {
background: #381615;
color: $uni-color-primary;
padding: 10rpx 40rpx;
border-radius: 30rpx 0px 0px 30rpx;
}
}
}
}
}
}
</style>

BIN
static/image/icon.png View File

Before After
Width: 99  |  Height: 85  |  Size: 4.9 KiB

+ 1
- 0
uni.scss View File

@ -15,6 +15,7 @@
$uni-color: #A3D250; $uni-color: #A3D250;
$uni-color-background: #060504; $uni-color-background: #060504;
$uni-color-card-background: #1B1713; $uni-color-card-background: #1B1713;
$uni--bg-color-btn: #381615;
/* 行为相关颜色 */ /* 行为相关颜色 */
$uni-color-primary: #FF4546; $uni-color-primary: #FF4546;


Write Preview
Loading…
Cancel
Save