kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

天府星

Browse Source
This commit is contained in:
yanran200730
2022-11-07 17:35:37 +08:00
parent e6b1e2ec10
commit fa36ed8082
8 changed files with 1274 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
src/project/tianfuxing/AppHome/ActivityList.vue Normal file
View File

@@ -0,0 +1,221 @@
<template>
<div class="home">
<div class="wrapper">
<image class="banner" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/banner.png" />
<div class="activity-wrapper">
<h2>线下活动</h2>
<div class="activity-list">
<div class="activity-item" @click="$linkTo('./Activity?id=' + item.id)" hover-class="bg-hover" v-for="(item, index) in list" :key="index">
<div class="top">
<h2>{{ item.title }}</h2>
<p>{{ item.detail }}</p>
</div>
<div class="bottom">
<div class="item">
<h3>进场时间：</h3>
<div class="right">
<p>{{ item.intoBegintime }} 至</p>
<p>{{ item.intoEndtime }}</p>
</div>
</div>
<div class="item">
<h3>离场时间：</h3>
<div class="right">
<p>{{ item.exitBegintime }} 至</p>
<p>{{ item.exitEndtime }}</p>
</div>
</div>
</div>
</div>
<AiEmpty v-if="!list.length"></AiEmpty>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
appName: '活动签到',
navigationBarTitleText: '活动签到',
name: 'ActivityList',
data () {
return {
current: 1,
list: [],
isMore: false,
isFixed: false,
statusBarHeight: 20,
}
},
computed: {
...mapState(['user', 'token'])
},
onLoad () {
this.getList()
if (!this.token) {
this.autoLogin()
} else {
this.getUserInfo()
}
},
methods: {
...mapActions(['autoLogin', 'getUserInfo']),
getList () {
if (this.isMore) return
this.$loading()
this.$instance.post(`/api/appactivityinfo/list`, null, {
withoutToken: true,
params: {
current: this.current,
size: 10
}
}).then(res => {
if (res.code === 0) {
this.$hideLoading()
if (this.current > 1) {
this.list = [...this.list, ...res.data.records]
} else {
this.list = res.data.records
}
if (res.data.records.length < 10) {
this.isMore = true
return false
}
this.current = this.current + 1
} else {
this.isMore = true
}
}).catch(() => {
this.$hideLoading()
})
}
},
onReachBottom () {
this.getList()
}
}
</script>
<style lang="scss" scoped>
.home {
position: relative;
padding: 32px 0 40px;
.bg-img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 512px;
}
.wrapper {
position: relative;
z-index: 11;
}
.back-wrapper {
position: fixed;
z-index: 11;
left: 20px;
top: 24px;
width: 40px;
height: 40px;
image {
width: 40px;
height: 40px;
}
}
.banner {
display: block;
width: 686px;
height: 240px;
margin: 0 auto 32rpx;
border-radius: 10px;
}
.activity-wrapper {
padding: 0 32px;
& > h2 {
margin-bottom: 26px;
color: #1D2229;
font-size: 34px;
font-weight: 600;
}
.activity-item {
margin-bottom: 24px;
padding: 24px;
background: #FCFCFC;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
border-radius: 16px;
.bottom {
padding-top: 24px;
.item {
display: flex;
line-height: 1.3;
margin-bottom: 8px;
h3 {
font-size: 28px;
color: #999999;
}
div {
flex: 1;
p {
font-size: 28px;
color: #333333;
}
}
}
}
.top {
padding-bottom: 24px;
border-bottom: 1px solid #eee;
h2 {
margin-bottom: 14px;
font-weight: 500;
font-size: 34px;
color: #333333;
}
p {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.3;
font-size: 30px;
color: #999999;
text-align: justify;
}
}
}
}
}
</style>

314
src/project/tianfuxing/AppHome/AppHome.vue
View File

@@ -9,42 +9,63 @@
<div></div>
<image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" /> -->
<div class="wrapper">
<image class="banner" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/banner.png" />
<div class="nav">
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./ActivityList')">
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home1.png" />
<span>活动签到</span>
</div>
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./PhotoReport')">
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/ssp.png" />
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home2.png" />
<span>随手拍</span>
</div>
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./Culture')">
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/wmcd.png" />
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home3.png" />
<span>海报接力</span>
</div>
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./Ranking')">
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home4.png" />
<span>文明榜单</span>
</div>
</div>
<div class="activity-wrapper">
<h2>线下活动</h2>
<div class="activity-list">
<div class="activity-item" @click="$linkTo('./Activity?id=' + item.id)" hover-class="bg-hover" v-for="(item, index) in list" :key="index">
<div class="top">
<h2>{{ item.title }}</h2>
<p>{{ item.detail }}</p>
</div>
<div class="bottom">
<div class="item">
<h3>进场时间：</h3>
<div class="right">
<p>{{ item.intoBegintime }} 至</p>
<p>{{ item.intoEndtime }}</p>
</div>
</div>
<div class="item">
<h3>离场时间：</h3>
<div class="right">
<p>{{ item.exitBegintime }} 至</p>
<p>{{ item.exitEndtime }}</p>
</div>
</div>
<image class="banner" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/banner.png" />
<div class="section yh">
<h2>商家优惠</h2>
<div class="yh-list">
<div class="yh-item" v-for="(item, index) in 4" :key="index" hover-class="text-hover" @click="$linkTo('./StoreDetail')">
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/banner.png" />
<div class="right">
<h2>实惠超市</h2>
<p>Lv.1会员进店享受9折优惠</p>
</div>
</div>
<AiEmpty v-if="!list.length"></AiEmpty>
</div>
<div class="more" @click="$linkTo('./Store')" hover-class="text-hover">查看更多优惠</div>
</div>
<div class="section rz">
<h2>商家入驻</h2>
<div class="rz-info">
<div class="rz-item">
<h3>商家权益</h3>
<span>成都市金牛区xxxx大厦成都…</span>
</div>
<div class="rz-item">
<h3>免费入驻</h3>
<span>面对50万新区市民免费展示推荐</span>
</div>
<div class="rz-item">
<h3>宣传报道</h3>
<span>分批次获得媒体公开点名</span>
</div>
<div class="rz-item">
<h3>出席仪式</h3>
<span>邀请重点协会与商家代表参与启动仪式、颁奖仪式</span>
</div>
<div class="rz-item">
<h3>直通车</h3>
<span>商家诉求收集汇总反馈</span>
</div>
</div>
<div class="more" @click="$linkTo('./Ranking')" hover-class="text-hover">查看更多优惠</div>
</div>
</div>
</div>
@@ -83,45 +104,7 @@
},
methods: {
...mapActions(['autoLogin', 'getUserInfo']),
getList () {
if (this.isMore) return
this.$loading()
this.$instance.post(`/api/appactivityinfo/list`, null, {
withoutToken: true,
params: {
current: this.current,
size: 10
}
}).then(res => {
if (res.code === 0) {
this.$hideLoading()
if (this.current > 1) {
this.list = [...this.list, ...res.data.records]
} else {
this.list = res.data.records
}
if (res.data.records.length < 10) {
this.isMore = true
return false
}
this.current = this.current + 1
} else {
this.isMore = true
}
}).catch(() => {
this.$hideLoading()
})
}
},
onReachBottom () {
this.getList()
...mapActions(['autoLogin', 'getUserInfo'])
}
}
</script>
@@ -129,7 +112,7 @@
<style lang="scss" scoped>
.home {
position: relative;
padding: 32px 0 40px;
padding: 32px 0 60px;
.bg-img {
position: absolute;
@@ -143,7 +126,115 @@
.wrapper {
position: relative;
z-index: 11;
padding-top: 30px;
margin: 0 32px 32px;
}
.yh {
.more {
width: 100%;
height: 88px;
line-height: 88px;
text-align: center;
color: #687DA6;
font-size: 28px;
}
.yh-list {
padding: 0 24px;
}
.yh-item {
display: flex;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid #EEEEEE;
image {
width: 112px;
height: 112px;
margin-right: 12px;
border-radius: 8px;
}
.right {
flex: 1;
h2 {
line-height: 48px;
margin-bottom: 8px;
font-size: 34px;
color: #333333;
}
p {
color: #FFB94C;
font-size: 26px;
}
}
}
}
.rz {
padding-bottom: 48px;
.rz-info {
padding: 0 24px;
}
.rz-item {
display: flex;
margin-bottom: 24px;
&:last-child {
margin-bottom: 0;
}
h3 {
width: 120px;
line-height: 40px;
margin-right: 40px;
color: #999999;
font-size: 28px;
text-align: justify;
}
span {
flex: 1;
line-height: 40px;
color: #333333;
font-size: 28px;
}
}
.more {
width: 638px;
height: 88px;
line-height: 88px;
margin: 36px auto 0;
font-size: 34px;
color: #FFFFFF;
text-align: center;
background-image: linear-gradient(90deg, #75BDFF 0%, #4783FF 100%);
box-shadow: 0 8px 12px -4px rgba(133,196,255,0.65);
border-radius: 8px;
}
}
.section {
margin-bottom: 24px;
background: #FFFFFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
border-radius: 16px;
overflow: hidden;
& > h2 {
height: 96px;
line-height: 96px;
padding: 0 24px;
font-size: 34px;
color: #1D2229;
background-image: linear-gradient(180deg, #DCEFFF 0%, rgba(220,239,255,0.00) 100%);
}
}
.back-wrapper {
@@ -201,94 +292,37 @@
}
}
}
.banner {
display: block;
width: 686px;
height: 240px;
height: 352px;
margin: 0 auto 32rpx;
border-radius: 10px;
border-radius: 8px;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 32rpx 58rpx;
margin: 0 0 32px;
padding: 0 36px;
.nav-item {
width: 328px;
height: 122px;
width: 112px;
line-height: 1;
text-align: center;
image {
width: 100%;
height: 100%;
border-radius: 10px;
}
}
}
.activity-wrapper {
padding: 0 32px;
& > h2 {
margin-bottom: 26px;
color: #1D2229;
font-size: 34px;
font-weight: 600;
}
.activity-item {
margin-bottom: 24px;
padding: 24px;
background: #FCFCFC;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
border-radius: 16px;
.bottom {
padding-top: 24px;
.item {
display: flex;
line-height: 1.3;
margin-bottom: 8px;
h3 {
font-size: 28px;
color: #999999;
}
div {
flex: 1;
p {
font-size: 28px;
color: #333333;
}
}
}
width: 112px;
height: 116px;
}
.top {
padding-bottom: 24px;
border-bottom: 1px solid #eee;
h2 {
margin-bottom: 14px;
font-weight: 500;
font-size: 34px;
color: #333333;
}
p {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.3;
font-size: 30px;
color: #999999;
text-align: justify;
}
span {
display: block;
text-align: center;
color: #333;
font-size: 28px;
}
}
}

9
src/project/tianfuxing/AppHome/Culture.vue
View File

@@ -4,7 +4,7 @@
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
<div class="nav-bar">
<image src="/static/img/left.png" @click="back"/>
<h2>文明倡导</h2>
<h2>海报接力</h2>
</div>
</div>
<div class="back-wrapper" @click="back" v-show="!isFixed" :style="{marginTop : statusBarHeight + 'px'}">
@@ -12,7 +12,7 @@
</div>
<div class="photo-header">
<image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/wm-bg.png" />
<h2>文明倡导</h2>
<h2>海报接力</h2>
<p>将文明倡导公益海报分享在微信朋友圈、50人以上的微信群、微博群，即可获得积分奖励</p>
<image class="right-icon" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/right1.png" />
</div>
@@ -34,15 +34,14 @@
<div class="btn" @click="upload(1)" hover-class="text-hover">上传朋友圈截图</div>
<div class="btn" @click="upload(2)" hover-class="text-hover">上传群聊截图</div>
</div>
<AiLogin ref="login"/>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'PhotoReport',
appName: '随手拍',
name: 'Culture',
appName: '海报接力',
customNavigation: true,
data () {

387
src/project/tianfuxing/AppHome/PhotoReport.vue
View File

@@ -31,6 +31,11 @@
<AiEmpty v-if="!list.length"></AiEmpty>
</div>
<div class="btn-wrapper">
<div class="top">
<i v-show="!isChoose" @click="isChoose = !isChoose"></i>
<image class="bg-img" @click="isChoose = !isChoose" v-show="isChoose" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/Selected.png" />
<span>同意将上传的内容公开分享到文明广场</span>
</div>
<div class="btn" @click="upload" hover-class="text-hover">拍照上传</div>
</div>
</div>
@@ -51,7 +56,8 @@
hideStatus: false,
pageShow: false,
current: 1,
isMore: false
isMore: false,
isChoose: true
}
},
@@ -208,196 +214,221 @@
</script>
<style lang="scss" socped>
.photo {
width: 100vw;
overflow-x: hidden;
padding-bottom: 130px;
.photo {
width: 100vw;
overflow-x: hidden;
padding-bottom: 200px;
div {
box-sizing: border-box;
}
.btn {
background: #2D7DFF;
}
.back-wrapper {
position: fixed;
z-index: 11;
left: 20px;
top: 24px;
width: 40px;
height: 40px;
image {
width: 40px;
height: 40px;
}
}
.header {
position: fixed;
left: 0;
top: 0;
z-index: 0;
width: 100%;
opacity: 0;
transition: all 0.2s ease;
&.header-active {
z-index: 1111;
opacity: 1;
background: linear-gradient(180deg, #2D7DFF 0%, #2D7DFF 40%);
}
.nav-bar {
position: relative;
height: 88px;
line-height: 88px;
color: #fff;
font-size: 32px;
text-align: center;
image {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 40px;
height: 40px;
padding: 24px 20px 0 20px;
box-sizing: content-box;
}
}
}
.photo-header {
position: relative;
height: 448px;
padding: 150px 48px 0;
.bg-img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 448px;
}
.right-icon {
position: absolute;
top: 105px;
right: 0;
z-index: 2;
width: 304px;
height: 240px;
}
h2 {
position: relative;
z-index: 2;
margin-bottom: 16px;
font-weight: 700;
font-size: 64px;
color: #333333;
}
p {
z-index: 2;
width: 420px;
height: 80px;
line-height: 1.3;
font-size: 28px;
color: #658DC1;
}
}
.phone-wrapper {
margin-top: 26px;
padding: 0 32px;
& > h2 {
margin-bottom: 42px;
font-size: 34px;
font-weight: 600;
color: #333333;
}
.list {
.top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 32px 20px;
.item {
image {
width: 32px;
height: 32px;
margin-right: 8px;
}
i {
width: 32px;
height: 32px;
border: 1px solid #2D7DFF;
box-sizing: border-box;
margin-right: 8px;
}
span {
font-size: 26px;
color: #333333;
}
}
div {
box-sizing: border-box;
}
.btn {
background: #2D7DFF;
}
.back-wrapper {
position: fixed;
z-index: 11;
left: 20px;
top: 24px;
width: 40px;
height: 40px;
image {
width: 40px;
height: 40px;
}
}
.header {
position: fixed;
left: 0;
top: 0;
z-index: 0;
width: 100%;
opacity: 0;
transition: all 0.2s ease;
&.header-active {
z-index: 1111;
opacity: 1;
background: linear-gradient(180deg, #2D7DFF 0%, #2D7DFF 40%);
}
.nav-bar {
position: relative;
width: 336px;
height: 252px;
margin-bottom: 20px;
border-radius: 16px;
overflow: hidden;
& > span {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 26px;
text-align: center;
color: #FF883C;
background: rgba($color: #000000, $alpha: 0.8);
border-radius: 8px;
&.status-1 {
color: #3BBC37;
}
&.status-2 {
color: red;
}
}
.bottom {
display: flex;
position: absolute;
justify-content: space-between;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
height: 80px;
padding: 28px 16px 0;
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #000000 100%);
border-radius: 0 0 16px 16px;
text-align: center;
color: #FF883C;
border-radius: 8px;
i {
font-size: 26px;
color: #FFFFFF;
}
span {
font-size: 26px;
color: #FFB94C;
}
}
height: 88px;
line-height: 88px;
color: #fff;
font-size: 32px;
text-align: center;
image {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
width: 40px;
height: 40px;
padding: 24px 20px 0 20px;
box-sizing: content-box;
}
}
}
.photo-header {
position: relative;
height: 448px;
padding: 150px 48px 0;
.bg-img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 448px;
}
.right-icon {
position: absolute;
top: 105px;
right: 0;
z-index: 2;
width: 304px;
height: 240px;
}
h2 {
position: relative;
z-index: 2;
margin-bottom: 16px;
font-weight: 700;
font-size: 64px;
color: #333333;
}
p {
z-index: 2;
width: 420px;
height: 80px;
line-height: 1.3;
font-size: 28px;
color: #658DC1;
}
}
.phone-wrapper {
margin-top: 26px;
padding: 0 32px;
& > h2 {
margin-bottom: 42px;
font-size: 34px;
font-weight: 600;
color: #333333;
}
.list {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.item {
position: relative;
width: 336px;
height: 252px;
margin-bottom: 20px;
border-radius: 16px;
overflow: hidden;
& > span {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 26px;
text-align: center;
color: #FF883C;
background: rgba($color: #000000, $alpha: 0.8);
border-radius: 8px;
&.status-1 {
color: #3BBC37;
}
&.status-2 {
color: red;
}
}
.bottom {
display: flex;
position: absolute;
justify-content: space-between;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
height: 80px;
padding: 28px 16px 0;
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #000000 100%);
border-radius: 0 0 16px 16px;
text-align: center;
color: #FF883C;
border-radius: 8px;
i {
font-size: 26px;
color: #FFFFFF;
}
span {
font-size: 26px;
color: #FFB94C;
}
}
image {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
}
}
}
}
}
</style>

453
src/project/tianfuxing/AppHome/Ranking.vue Normal file
View File

@@ -0,0 +1,453 @@
<template>
<div class="photo">
<div class="header" :class="[isFixed ? 'header-active' : '']">
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
<div class="nav-bar">
<image src="/static/img/left.png" @click="back"/>
<h2>海报接力</h2>
</div>
</div>
<div class="back-wrapper" @click="back" v-show="!isFixed" :style="{marginTop : statusBarHeight + 'px'}">
<image src="/static/img/left.png"/>
</div>
<div class="photo-header">
<image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/wm-bg.png" />
<h2>文明榜单</h2>
<p>评选并展示当前积分最多的个人、社区和小区榜单</p>
<image class="right-icon" mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/right3.png" />
</div>
<div class="ranking-wrapper">
<div class="tab">
<span @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">个人榜单</span>
<span @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">社区榜单</span>
<span @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">小区榜单</span>
</div>
<div class="ranking-list">
<div class="title">
<span>排行</span>
<span>个人</span>
<span>积分</span>
</div>
<div class="list-wrapper">
<div class="item" v-for="(item, index) in 10" :key="index">
<span>{{ index + 1 }}</span>
<div class="userinfo">
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png" />
<h3>卓嘉娣</h3>
</div>
<i>1,325</i>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'Ranking',
appName: '文明榜单',
customNavigation: true,
data () {
return {
isFixed: false,
statusBarHeight: 20,
list: [],
currIndex: 0,
hideStatus: false,
pageShow: false,
current: 1,
isMore: false
}
},
computed: {
...mapState(['user', 'token'])
},
onLoad () {
this.getList()
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
},
methods: {
back () {
uni.navigateBack({
delta: 1
})
},
preview (url) {
let imgs = this.list.map(v => v.accessUrl)
uni.previewImage({
urls: imgs,
current: url
})
},
mapStatus (status) {
return {
'0': '待审核',
'1': '审核通过',
'2': '审核拒绝'
}[status]
},
upload (type) {
this.imgList = []
this.hideStatus = false
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
if (res.tempFilePaths.length > 9) {
this.$toast(`图片不能超过9张`)
return false
}
this.$loading('上传中')
res.tempFilePaths.forEach((item, index) => {
if (index === res.tempFilePaths.length - 1) {
this.hideStatus = true
}
this.$nextTick(() => {
this.uploadFile(item, res.tempFilePaths.length, type)
})
})
},
})
},
uploadFile (img, total, type) {
uni.uploadFile({
url: this.$instance.defaults.baseURL + (process.env.NODE_ENV == 'production' ? 'api' : '') + '/file/add',
filePath: img,
name: 'file',
header: {
'Content-Type': 'multipart/form-data',
Authorization: uni.getStorageSync('token'),
},
success: (res) => {
const data = JSON.parse(res.data)
if (data.code === 0) {
this.imgList.push(data.data[0].split(';')[0])
} else {
this.$toast(data.msg)
}
},
complete: () => {
this.$nextTick(() => {
if (this.imgList.length === total && this.hideStatus) {
this.$instance.post(`/api/appwechatescalation/addOrUpdate`, {
type: type,
openId: this.user.openId,
accessUrl: this.imgList[0]
}).then(res => {
if (res.code == 0) {
this.$toast('上传成功！请等待后台人员审核')
this.isMore = false
this.current = 1
this.getList()
}
this.$hideLoading()
this.hideStatus = false
})
}
})
}
})
},
getList () {
if (this.isMore) return
this.$instance.post(`/api/appwechatescalation/list`, null, {
params: {
current: this.current,
size: 10,
listType: 1
}
}).then(res => {
if (res.code === 0) {
this.$hideLoading()
if (this.current > 1) {
this.list = [...this.list, ...res.data.records]
} else {
this.list = res.data.records
}
if (res.data.records.length < 10) {
this.isMore = true
return false
}
this.current = this.current + 1
} else {
this.isMore = true
}
}).catch(() => {
this.$hideLoading()
})
}
},
onPageScroll (params) {
this.isFixed = params.scrollTop > 60
},
onReachBottom () {
this.getList()
}
}
</script>
<style lang="scss" socped>
.photo {
width: 100vw;
overflow-x: hidden;
padding-bottom: 40px;
div {
box-sizing: border-box;
}
.ranking-wrapper {
margin: 0 32px;
.ranking-list {
.title {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
padding: 0 32px;
span {
font-size: 28px;
color: #999999;
&:nth-of-type(1) {
width: 130px;
}
&:nth-of-type(2) {
flex: 1;
}
&:nth-of-type(3) {
width: 100px;
}
}
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
margin-bottom: 16px;
padding: 0 32px;
background: #FFFFFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
border-radius: 16px;
span {
width: 130px;
font-size: 34px;
color: #DDDDDD;
font-style: oblique;
font-weight: 600;
}
&:nth-of-type(1) span {
color: #2D7DFF;
}
&:nth-of-type(2) span {
color: #3BBC37;
}
&:nth-of-type(3) span {
color: #FF883C;
}
image {
width: 48px;
height: 48px;
}
.userinfo {
display: flex;
align-items: center;
flex: 1;
h3 {
margin-left: 16px;
font-size: 28px;
color: #333333;
}
}
i {
width: 100px;
font-size: 32px;
color: #FFB94C;
font-weight: 600;
}
}
}
.tab {
display: flex;
align-items: center;
margin-bottom: 24px;
border-radius: 8px;
overflow: hidden;
span {
flex: 1;
height: 68px;
line-height: 68px;
text-align: center;
color: #333333;
font-size: 28px;
background: #E1EAF7;
&.active {
color: #fff;
border-radius: 8px;
background-image: linear-gradient(90deg, #75BDFF 0%, #4783FF 100%);
box-shadow: 0 8px 12px -4px rgba(133,196,255,0.65);
}
}
}
}
.btn-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 32px!important;
.btn {
width: 328px;
background: #2D7DFF;
&:first-child {
background: #3BBC37;
}
}
}
.back-wrapper {
position: fixed;
z-index: 11;
left: 20px;
top: 24px;
width: 40px;
height: 40px;
image {
width: 40px;
height: 40px;
}
}
.header {
position: fixed;
left: 0;
top: 0;
z-index: 0;
width: 100%;
opacity: 0;
transition: all 0.2s ease;
&.header-active {
z-index: 1111;
opacity: 1;
background: linear-gradient(180deg, #2D7DFF 0%, #2D7DFF 40%);
}
.nav-bar {
position: relative;
height: 88px;
line-height: 88px;
color: #fff;
font-size: 32px;
text-align: center;
image {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 40px;
height: 40px;
padding: 24px 20px 0 20px;
box-sizing: content-box;
}
}
}
.photo-header {
position: relative;
height: 448px;
padding: 150px 48px 0;
.bg-img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 448px;
}
.right-icon {
position: absolute;
top: 105px;
right: 0;
z-index: 2;
width: 304px;
height: 240px;
}
h2 {
position: relative;
z-index: 2;
margin-bottom: 16px;
font-weight: 700;
font-size: 64px;
color: #333333;
}
p {
z-index: 2;
width: 420px;
height: 80px;
line-height: 1.3;
font-size: 28px;
color: #658DC1;
}
}
.phone-wrapper {
margin-top: 26px;
padding: 0 32px;
& > h2 {
margin-bottom: 42px;
font-size: 34px;
font-weight: 600;
color: #333333;
}
}
}
</style>

67
src/project/tianfuxing/AppHome/Store.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<div class="Store">
<div class="store-list">
<div class="store-item" v-for="(item, index) in 4" :key="index" hover-class="text-hover" @click="$linkTo('./StoreDetail')">
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png" />
<div class="middle">
<h2>实惠超市</h2>
<p>Lv.1会员进店享受9折优惠</p>
</div>
<image class="right" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/ContentRightArrow@2x.png" />
</div>
</div>
</div>
</template>
<script>
export default {
appName: '商家优惠',
name: 'Store',
}
</script>
<style lang="scss" scoped>
.Store {
margin: 0 32px;
padding: 32px 0 20px;
}
.store-item {
display: flex;
align-items: center;
margin-bottom: 24px;
padding: 24px;
background: #FFFFFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
border-radius: 16px;
image {
width: 112px;
height: 112px;
margin-right: 24px;
}
.middle {
flex: 1;
}
.right {
width: 32px;
height: 32px;
margin-right: 0;
}
h2 {
line-height: 48px;
margin-bottom: 8px;
font-weight: 500;
font-size: 34px;
color: #333333;
}
p {
font-size: 26px;
color: #FFB94C;
}
}
</style>

132
src/project/tianfuxing/AppHome/StoreDetail.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<div class="StoreDetail">
<div class="header" :class="[isFixed ? 'header-active' : '']">
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
<div class="nav-bar">
<image src="/static/img/left.png" @click="back"/>
<h2>优惠详情</h2>
</div>
</div>
<div class="back-wrapper" @click="back" v-show="!isFixed" :style="{marginTop : statusBarHeight + 'px'}">
<image src="/static/img/left.png"/>
</div>
<div class="photo-header">
<image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/photo-bg.png" />
<h2>随手拍</h2>
<p>将身边文明或不文明行为拍照上传即可获得积分奖励</p>
<image class="right-icon" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/right2.png" />
</div>
<div class="wrapper">
<h2>我上传的</h2>
<div class="list">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'StoreDetail',
appName: '优惠详情',
customNavigation: true,
data () {
return {
isFixed: false,
statusBarHeight: 20,
list: [],
hideStatus: false,
pageShow: false,
current: 1,
isMore: false,
isChoose: true
}
},
onLoad () {
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
},
methods: {
back () {
uni.navigateBack({
delta: 1
})
},
preview (url) {
let imgs = this.list.map(v => v.accessUrl)
uni.previewImage({
urls: imgs,
current: url
})
}
},
onPageScroll (params) {
this.isFixed = params.scrollTop > 60
},
}
</script>
<style lang="scss" socped>
.StoreDetail {
width: 100vw;
overflow-x: hidden;
padding-bottom: 200px;
div {
box-sizing: border-box;
}
.back-wrapper {
position: fixed;
z-index: 11;
left: 20px;
top: 24px;
width: 40px;
height: 40px;
image {
width: 40px;
height: 40px;
}
}
.header {
position: fixed;
left: 0;
top: 0;
z-index: 0;
width: 100%;
opacity: 0;
transition: all 0.2s ease;
&.header-active {
z-index: 1111;
opacity: 1;
background: linear-gradient(180deg, #2D7DFF 0%, #2D7DFF 40%);
}
.nav-bar {
position: relative;
height: 88px;
line-height: 88px;
color: #fff;
font-size: 32px;
text-align: center;
image {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 40px;
height: 40px;
padding: 24px 20px 0 20px;
box-sizing: content-box;
}
}
}
}
</style>

14
src/project/tianfuxing/AppSquare/AppSquare.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div class="Square"></div>
</template>
<script>
export default {
appName: '文明广场',
name: 'AppSquare',
}
</script>
<style>
</style>