对接接口
This commit is contained in:
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="process" >
|
||||
<span class="date">1995.04.09</span>
|
||||
<div class="process-detail">
|
||||
<h1 class="title">九月十九观音护法魔法会</h1>
|
||||
<p class="desc">套用模型省时省力，不用冥思苦想，但是，每一个需要设计的内容和体系应…</p>
|
||||
<div class="image-group">
|
||||
<img src="https://img2.baidu.com/it/u=1300380272,3129731350&fm=26&fmt=auto" alt="">
|
||||
<img src="https://img2.baidu.com/it/u=1300380272,3129731350&fm=26&fmt=auto" alt="">
|
||||
<img src="https://img2.baidu.com/it/u=1300380272,3129731350&fm=26&fmt=auto" alt="">
|
||||
</div>
|
||||
<button class="purchase">护膜祈福 功德圆满</button>
|
||||
<div class="bar">
|
||||
<span class="join">已有23784人参与</span>
|
||||
<div class="btn-group">
|
||||
<span class="btn">
|
||||
<i class="iconfont icon-guanzhu-yiguanzhu"></i>
|
||||
<b>关注</b>
|
||||
</span>
|
||||
<span class="btn">
|
||||
<i class="iconfont icon-zhuanfa"></i>
|
||||
<b>转发</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'buddha-process'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.process{
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 0 .4rem;
|
||||
&::after{
|
||||
content: '';
|
||||
height: 1px;
|
||||
width: 200%;
|
||||
background: #ededed;
|
||||
transform: scale(0.5, 0.5);
|
||||
transform-origin: left top;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
& ~ .process{
|
||||
padding-top: .53rem;
|
||||
}
|
||||
.date{
|
||||
font-size: .35rem;
|
||||
color: #666666;
|
||||
display: inline-block;
|
||||
width: 2.19rem;
|
||||
margin-top: .07rem;
|
||||
}
|
||||
.process-detail{
|
||||
flex: 1;
|
||||
.title{
|
||||
font-size: .43rem;
|
||||
color: #222;
|
||||
margin-bottom: .32rem;
|
||||
}
|
||||
.desc{
|
||||
font-size: .37rem;
|
||||
line-height: .53rem;
|
||||
color: #333;
|
||||
}
|
||||
.image-group{
|
||||
white-space: nowrap;
|
||||
margin-top: .27rem;
|
||||
img{
|
||||
width: 2.16rem;
|
||||
height: 2.16rem;
|
||||
vertical-align: top;
|
||||
border-radius: .16rem;
|
||||
& ~ img{
|
||||
margin-left: .27rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.purchase{
|
||||
background: #CF9E3B;
|
||||
height: .77rem;
|
||||
color: white;
|
||||
padding: 0 .27rem;
|
||||
line-height: .77rem;
|
||||
border-radius: .07rem;
|
||||
font-size: .35rem;
|
||||
border:1px solid #CF9E3B;
|
||||
margin-bottom: .32rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: .4rem
|
||||
}
|
||||
.bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: .37rem;
|
||||
.join{
|
||||
font-size: .3rem;
|
||||
color: #666;
|
||||
}
|
||||
.btn-group{
|
||||
display: flex;
|
||||
.btn{
|
||||
display: flex;
|
||||
margin-left: .5rem;
|
||||
line-height: .40rem;
|
||||
|
||||
.iconfont{
|
||||
color:$primary-color;
|
||||
vertical-align: middle;
|
||||
font-size: .3rem;
|
||||
}
|
||||
b{
|
||||
font-size: .3rem;
|
||||
padding-left: .07rem;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import UserMerit from './user-merit';
|
||||
import Temple from './temple'
|
||||
import BuddhaProcess from './buddha-process';
|
||||
import MeritGoods from './merit-goods';
|
||||
import Order from './order';
|
||||
import ScrollView from './scroll-view'
|
||||
|
||||
Vue.component(UserMerit.name, UserMerit)
|
||||
Vue.component(Temple.name, Temple)
|
||||
Vue.component(BuddhaProcess.name, BuddhaProcess)
|
||||
Vue.component(MeritGoods.name, MeritGoods)
|
||||
Vue.component(Order.name, Order)
|
||||
Vue.component(ScrollView.name, ScrollView)
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="merit-goods">
|
||||
<img class="goods" src="https://img1.baidu.com/it/u=1786251324,3168622427&fm=26&fmt=auto" alt="">
|
||||
<div class="info">
|
||||
<h3 class="title">放生修复|观音出家月放生佛祖坚持护佑，第一迅猛的运转方法</h3>
|
||||
<div class="bar">
|
||||
<span class="join-number">已有100000人参与</span>
|
||||
<button class="join">参与</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'merit-goods'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.merit-goods{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .4rem;
|
||||
border-bottom: .01rem solid #f2f2f2;
|
||||
.goods{
|
||||
width: 2.93rem;
|
||||
height: 2.93rem;
|
||||
margin-right: .4rem;
|
||||
border-radius: .11rem;
|
||||
}
|
||||
.info{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.join-number{
|
||||
font-size: .35rem;
|
||||
color: #666;
|
||||
}
|
||||
.join{
|
||||
height: .67rem;
|
||||
padding: 0 .4rem;
|
||||
background: #CF9E3B;
|
||||
border: .01rem solid #CF9E3B;
|
||||
color: white;
|
||||
border-radius: .05rem;
|
||||
font-size: .37rem;
|
||||
line-height: .67rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="order">
|
||||
<div class="order-head">
|
||||
<span class="temple-name">重庆石林寺<i class="iconfont icon-arrow-right"></i></span>
|
||||
<span class="status">已处理</span>
|
||||
</div>
|
||||
<div class="order-body">
|
||||
<img class="goods-picture" src="https://img0.baidu.com/it/u=2890176269,287120071&fm=26&fmt=auto" alt="">
|
||||
<div class="order-flex">
|
||||
<h4 class="name">功德箱捐赠</h4>
|
||||
<span class="date">2021-10-3</span>
|
||||
</div>
|
||||
<div class="order-flex-quantity">
|
||||
<span class="amount">￥ 200.01</span>
|
||||
<span class="quantity">数量： 1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'order'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.order{
|
||||
font-size: .37rem;
|
||||
background: white;
|
||||
padding: .4rem;
|
||||
border-radius: .27rem;
|
||||
& ~ .order{
|
||||
margin-top: .4rem;
|
||||
}
|
||||
.order-head{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.temple-name{
|
||||
.iconfont{
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.status{
|
||||
font-size: .37rem;
|
||||
}
|
||||
}
|
||||
.order-body{
|
||||
display: flex;
|
||||
margin-top: .4rem;
|
||||
.order-flex{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: .13rem 0;
|
||||
.name{
|
||||
font-size: .43rem;
|
||||
}
|
||||
.date{
|
||||
color: #555;
|
||||
font-size: .37rem;
|
||||
}
|
||||
}
|
||||
.goods-picture{
|
||||
width: 1.87rem;
|
||||
height: 1.87rem;
|
||||
border-radius: .13rem;
|
||||
margin-right: .4rem;
|
||||
}
|
||||
.order-flex-quantity{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: .13rem 0;
|
||||
.amount{
|
||||
font-weight: bold;
|
||||
}
|
||||
.quantity{
|
||||
color: #666;
|
||||
font-size: .35rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="scroll-wrapper" ref="wrapper" :style="{height: wrapperHeight + 'px'}">
|
||||
<div class="scroll-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BScroll from "better-scroll";
|
||||
|
||||
export default {
|
||||
name: "scroll-view",
|
||||
data(){
|
||||
return {
|
||||
wrapperHeight: 0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
/**
|
||||
* 1 滚动的时候会派发scroll事件，会截流。
|
||||
* 2 滚动的时候实时派发scroll事件，不会截流。
|
||||
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
|
||||
*/
|
||||
probeType: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
/**
|
||||
* 点击列表是否派发click事件
|
||||
*/
|
||||
click: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* 是否开启横向滚动
|
||||
*/
|
||||
scrollX: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 是否派发滚动事件
|
||||
*/
|
||||
listenScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 列表的数据
|
||||
*/
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
/**
|
||||
* 是否派发滚动到底部的事件，用于上拉加载
|
||||
*/
|
||||
pullup: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 是否派发顶部下拉的事件，用于下拉刷新
|
||||
*/
|
||||
pulldown: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 是否派发列表滚动开始的事件
|
||||
*/
|
||||
beforeScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 当数据更新后，刷新scroll的延时。
|
||||
*/
|
||||
refreshDelay: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
height: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 保证在DOM渲染完毕后初始化better-scroll
|
||||
this.wrapperHeight = this.height || this.$parent.$el.offsetHeight
|
||||
setTimeout(() => {
|
||||
this._initScroll();
|
||||
}, 20);
|
||||
},
|
||||
|
||||
methods: {
|
||||
_initScroll() {
|
||||
if (!this.$refs.wrapper) {
|
||||
return;
|
||||
}
|
||||
|
||||
// better-scroll的初始化
|
||||
this.scroll = new BScroll(this.$refs.wrapper, {
|
||||
probeType: this.probeType,
|
||||
click: this.click,
|
||||
scrollX: this.scrollX,
|
||||
});
|
||||
|
||||
// 是否派发滚动事件
|
||||
if (this.listenScroll) {
|
||||
this.scroll.on("scroll", (pos) => {
|
||||
this.$emit("scroll", pos);
|
||||
});
|
||||
}
|
||||
|
||||
// 是否派发滚动到底部事件，用于上拉加载
|
||||
if (this.pullup) {
|
||||
this.scroll.on("scrollEnd", () => {
|
||||
// 滚动到底部
|
||||
console.log(this.scroll.y, this.scroll.maxScrollY + 50)
|
||||
if (this.scroll.y <= this.scroll.maxScrollY + 50) {
|
||||
this.$emit("pullup");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 是否派发顶部下拉事件，用于下拉刷新
|
||||
if (this.pulldown) {
|
||||
this.scroll.on("touchEnd", (pos) => {
|
||||
// 下拉动作
|
||||
if (pos.y > 50) {
|
||||
this.$emit("pulldown");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 是否派发列表滚动开始的事件
|
||||
if (this.beforeScroll) {
|
||||
this.scroll.on("beforeScrollStart", () => {
|
||||
this.$emit("beforeScroll");
|
||||
});
|
||||
}
|
||||
},
|
||||
disable() {
|
||||
// 代理better-scroll的disable方法
|
||||
this.scroll && this.scroll.disable();
|
||||
},
|
||||
enable() {
|
||||
// 代理better-scroll的enable方法
|
||||
this.scroll && this.scroll.enable();
|
||||
},
|
||||
refresh() {
|
||||
// 代理better-scroll的refresh方法
|
||||
this.scroll && this.scroll.refresh();
|
||||
},
|
||||
scrollTo() {
|
||||
// 代理better-scroll的scrollTo方法
|
||||
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
|
||||
},
|
||||
scrollToElement() {
|
||||
// 代理better-scroll的scrollToElement方法
|
||||
this.scroll &&
|
||||
this.scroll.scrollToElement.apply(this.scroll, arguments);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
|
||||
data() {
|
||||
setTimeout(() => {
|
||||
this.refresh();
|
||||
}, this.refreshDelay);
|
||||
},
|
||||
height: {
|
||||
handler(val){
|
||||
this.wrapperHeight = val;
|
||||
this.scroll && this.scroll.refresh();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="temple-card" @click="onTo">
|
||||
<img :src="data.url" alt="">
|
||||
<div class="info">
|
||||
<span class="name">{{data.name}}</span>
|
||||
<span class="visitor">{{data.visitor}} 人到访</span>
|
||||
<span class="iconfont icon-dingwei"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'temple',
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default(){
|
||||
return {
|
||||
url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F24237%2F24236884.jpg&refer=http%3A%2F%2Fimg8.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638518604&t=074af50479ac14ca13fc6616380fe0f5',
|
||||
name: '重庆石林寺',
|
||||
visitor: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTo(){
|
||||
this.$router.push({ name: 'temple-detail', query: { id: this.data.id }})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.temple-card{
|
||||
background: white;
|
||||
border-radius: .13rem;
|
||||
box-shadow: 0 0 .13rem rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
& ~ .temple-card{
|
||||
margin-top: .5rem;
|
||||
}
|
||||
img{
|
||||
height: 4rem;
|
||||
width: 100%;
|
||||
}
|
||||
.info{
|
||||
display: flex;
|
||||
height: 1.07rem;
|
||||
align-items: center;
|
||||
padding: 0 .4rem;
|
||||
.name{
|
||||
font-size: .37rem;
|
||||
flex: 1;
|
||||
}
|
||||
.visitor{
|
||||
font-size: .3rem;
|
||||
color: #666;
|
||||
margin-right: .4rem;
|
||||
}
|
||||
.iconfont{
|
||||
font-size: .4rem;
|
||||
padding: 0;
|
||||
color: rgb(60, 202, 60);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="user-merit border-bottom">
|
||||
<img
|
||||
src="https://img0.baidu.com/it/u=199023397,1701150760&fm=26&fmt=auto"
|
||||
alt=""
|
||||
/>
|
||||
<div class="profile">
|
||||
<div>
|
||||
<div class="name">
|
||||
<span>李晓华</span>
|
||||
<span>湖南长沙</span>
|
||||
</div>
|
||||
<p>为佛像贴金身，菩萨护佑</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result">
|
||||
<p class="money">24212.23元</p>
|
||||
<span class="date">2021-10-3 21：58</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "user-merit",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-merit {
|
||||
display: flex;
|
||||
padding: .27rem 0.4rem;
|
||||
img {
|
||||
width: 1.17rem;
|
||||
height: 1.17rem;
|
||||
border-radius: 1.17rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
.profile {
|
||||
flex: 1;
|
||||
padding-top: .13rem;
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: .27rem;
|
||||
span:first-child {
|
||||
font-size: 0.4rem;
|
||||
color: #222;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-right: .4rem;
|
||||
}
|
||||
span:last-child {
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
vertical-align: text-bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
}
|
||||
.result {
|
||||
font-size: 0.32rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: .13rem 0;
|
||||
text-align: right;
|
||||
.money {
|
||||
font-size: 0.37rem;
|
||||
}
|
||||
.date {
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user