123
This commit is contained in:
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="thanks-giving">
|
||||
<div class="head">
|
||||
<span class="title">感恩功德</span>
|
||||
<div class="list">
|
||||
<span :class="[nav.id === type_id && 'current']" v-for="nav in type_nav" :key="nav.id" >{{ nav.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<swiper :options="swiperOptions">
|
||||
<swiper-slide v-for="slide in type_nav" :key="slide.id">
|
||||
<scroll-view>
|
||||
<user-merit v-for="dynamic in slide.list" :key="dynamic.id" :data="dynamic" ></user-merit>
|
||||
</scroll-view>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="thanks-more" @click="onThankMore">查看更多</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrderCompare } from "@/api";
|
||||
export default {
|
||||
name: 'thanks-giving',
|
||||
props: {
|
||||
templeId: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
goodsType: {
|
||||
type: String,
|
||||
},
|
||||
goodsId: {
|
||||
type: [String, Number]
|
||||
},
|
||||
typeId: {
|
||||
type: [String, Number]
|
||||
}
|
||||
},
|
||||
|
||||
data(){
|
||||
return {
|
||||
type_id: this.typeId || 1,
|
||||
type_nav: [
|
||||
{ id: 1, title: "实时", list: [] },
|
||||
{ id: 2, title: "月榜", list: [] },
|
||||
{ id: 3, title: "总榜", list: [] },
|
||||
],
|
||||
swiperOptions: {
|
||||
onSlideChangeEnd: ({realIndex}) => {
|
||||
this.type_id = this.type_nav[realIndex].id;
|
||||
this.getOrderCompare();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getOrderCompare();
|
||||
},
|
||||
methods: {
|
||||
async getOrderCompare(){
|
||||
const res = await getOrderCompare(this.templeId, this.type_id, this.goodsId, this.goodsType)
|
||||
console.log(res)
|
||||
const current = this.type_nav.find(item => item.id === this.type_id);
|
||||
current.list = res.list
|
||||
},
|
||||
onThankMore(){
|
||||
this.$router.push({
|
||||
name: 'merit-box',
|
||||
query: {
|
||||
type_id: this.type_id,
|
||||
temple_id: this.templeId
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.thanks-giving {
|
||||
.head {
|
||||
padding: 0.53rem 0.4rem;
|
||||
padding-bottom: 0.13rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title {
|
||||
font-size: 0.43rem;
|
||||
color: #222222;
|
||||
}
|
||||
.list {
|
||||
display: flex;
|
||||
span {
|
||||
font-size: 0.37rem;
|
||||
color: #999999;
|
||||
display: inline-block;
|
||||
margin-left: 0.4rem;
|
||||
border-bottom: 0.03rem solid transparent;
|
||||
padding-bottom: 0.13rem;
|
||||
}
|
||||
span.current {
|
||||
color: #222;
|
||||
border-bottom-color: rgb(168, 28, 28);
|
||||
}
|
||||
}
|
||||
}
|
||||
.body{
|
||||
|
||||
.swiper-container{
|
||||
height: 5.33rem;
|
||||
}
|
||||
.thanks-more{
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: .4rem;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<span class="arrow-more" @click="$emit('click')">
|
||||
<em>更多</em>
|
||||
<i class="iconfont icon-arrow-right"></i>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'arrow-more'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.arrow-more{
|
||||
font-size: .3rem;
|
||||
color: #999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
em{
|
||||
line-height: .32rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,19 +1,17 @@
|
||||
<template>
|
||||
<div class="process" >
|
||||
<span class="date">1995.04.09</span>
|
||||
<div class="process" v-if="privateData" @click="onProcessDetail">
|
||||
<span class="date">{{privateData.time || privateData.date}}</span>
|
||||
<div class="process-detail">
|
||||
<h1 class="title">九月十九观音护法魔法会</h1>
|
||||
<p class="desc">套用模型省时省力，不用冥思苦想，但是，每一个需要设计的内容和体系应…</p>
|
||||
<h1 class="title">{{privateData.title}}</h1>
|
||||
<p class="desc">{{privateData.description}}</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="">
|
||||
<img :src="cover" v-for="(cover, index) in privateData.covers.slice(0, 3)" :key="index" alt="">
|
||||
</div>
|
||||
<button class="purchase">护膜祈福 功德圆满</button>
|
||||
<div class="bar">
|
||||
<span class="join">已有23784人参与</span>
|
||||
<span class="join">已有{{privateData.sales}}人参与</span>
|
||||
<div class="btn-group">
|
||||
<span class="btn">
|
||||
<span class="btn" :class="[privateData.is_collected === 1 ? 'collect': 'un-collect']" @click.stop="onCollect">
|
||||
<i class="iconfont icon-guanzhu-yiguanzhu"></i>
|
||||
<b>关注</b>
|
||||
</span>
|
||||
@@ -28,8 +26,53 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toggleCollect } from "@/api"
|
||||
|
||||
export default {
|
||||
name: 'buddha-process'
|
||||
name: 'buddha-process',
|
||||
props: ['data'],
|
||||
watch: {
|
||||
data: {
|
||||
handler(val){
|
||||
this.privateData = val;
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
privateData: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onCollect(){
|
||||
const res = await toggleCollect(this.data.id);
|
||||
console.log(res)
|
||||
this.privateData.is_collected = this.privateData.is_collected === 1 ? 0 : 1
|
||||
},
|
||||
onProcessDetail(){
|
||||
const { goods_type, goods_id, temple_id } = this.privateData;
|
||||
if(goods_type === 1 || goods_type === 2 || goods_type === 4){
|
||||
this.$router.push({
|
||||
name: 'everyday-donation',
|
||||
query: {
|
||||
goods_type,
|
||||
goods_id,
|
||||
temple_id
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$router.push({
|
||||
name: 'goods-detail',
|
||||
query: {
|
||||
goods_type,
|
||||
goods_id,
|
||||
temple_id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -79,7 +122,7 @@ export default {
|
||||
width: 2.16rem;
|
||||
height: 2.16rem;
|
||||
vertical-align: top;
|
||||
border-radius: .16rem;
|
||||
border-radius: .05rem;
|
||||
& ~ img{
|
||||
margin-left: .27rem;
|
||||
}
|
||||
@@ -112,17 +155,30 @@ export default {
|
||||
.btn{
|
||||
display: flex;
|
||||
margin-left: .5rem;
|
||||
line-height: .40rem;
|
||||
align-items: center;
|
||||
|
||||
.iconfont{
|
||||
color:$primary-color;
|
||||
vertical-align: middle;
|
||||
font-size: .3rem;
|
||||
font-size: .4rem;
|
||||
margin-top: -3px;
|
||||
}
|
||||
b{
|
||||
font-size: .3rem;
|
||||
padding-left: .07rem;
|
||||
font-size: .35rem;
|
||||
padding-left: .1rem;
|
||||
color: #888;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.collect{
|
||||
.iconfont{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
.un-collect{
|
||||
.iconfont{
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,10 @@ import Order from './order';
|
||||
import ScrollView from './scroll-view'
|
||||
import Uploader from './uploader'
|
||||
import ContentExpand from './content-expand'
|
||||
import UserDynamic from './user-dynamic';
|
||||
import RandomMoney from './random-money'
|
||||
import ThankGiving from './Thanksgiving'
|
||||
import ArrowMore from './arrow-more'
|
||||
|
||||
Vue.component(UserMerit.name, UserMerit)
|
||||
Vue.component(Temple.name, Temple)
|
||||
@@ -17,3 +21,7 @@ Vue.component(Order.name, Order)
|
||||
Vue.component(ScrollView.name, ScrollView)
|
||||
Vue.component(Uploader.name, Uploader)
|
||||
Vue.component(ContentExpand.name, ContentExpand)
|
||||
Vue.component(UserDynamic.name, UserDynamic)
|
||||
Vue.component(RandomMoney.name, RandomMoney)
|
||||
Vue.component(ThankGiving.name, ThankGiving)
|
||||
Vue.component(ArrowMore.name, ArrowMore)
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="merit-goods">
|
||||
<img class="goods" src="https://img1.baidu.com/it/u=1786251324,3168622427&fm=26&fmt=auto" alt="">
|
||||
<img class="goods" :src="data.cover_url" alt="">
|
||||
<div class="info">
|
||||
<h3 class="title">放生修复|观音出家月放生佛祖坚持护佑，第一迅猛的运转方法</h3>
|
||||
<h3 class="title">{{data.title}}</h3>
|
||||
<div class="bar">
|
||||
<span class="join-number">已有100000人参与</span>
|
||||
<button class="join">参与</button>
|
||||
<span class="join-number">已有{{data.sales}}人参与</span>
|
||||
<button class="join" @click="onJoin">参与</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -13,7 +13,19 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'merit-goods'
|
||||
name: 'merit-goods',
|
||||
props: ['data'],
|
||||
methods: {
|
||||
onJoin(){
|
||||
this.$router.push({
|
||||
name: 'goods-detail',
|
||||
query: {
|
||||
goods_id: this.data.id,
|
||||
temple_id: this.$route.query.temple_id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<van-popup v-model="value" position="bottom" @close="$emit('update:value', false)">
|
||||
<div class="red-packet" v-if="user">
|
||||
<img class="avatar" :src="anonymous ? avatar : user.avatar" alt="">
|
||||
<div class="username-container">
|
||||
<div class="username" v-if="!edit" @click="onEdit">
|
||||
<span>{{user.nickname}}</span>
|
||||
<i class="iconfont icon-bianjisekuai"></i>
|
||||
</div>
|
||||
<input class="input-username" ref="input" v-if="edit" v-model="user.nickname" @blur="edit = false">
|
||||
</div>
|
||||
<vue-number-scroll v-model="number"></vue-number-scroll>
|
||||
<div class="money-input">
|
||||
<input type="tel" v-model="money" v-number-only @change="onMoneyInput">
|
||||
<span>元</span>
|
||||
</div>
|
||||
<!-- <div class="bar">
|
||||
<span>
|
||||
<van-checkbox v-model="anonymous" checked-color="#CF9E3B" @change="onAnonymous">匿名参与</van-checkbox>
|
||||
</span>
|
||||
<span>查看服务协议</span>
|
||||
</div> -->
|
||||
<div class="random-button-group">
|
||||
<button class="change" @click="changeMoney">换个金额</button>
|
||||
<button class="next" @click="onNext">下一步</button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRandMoney, getUserData } from '@/api';
|
||||
import VueNumberScroll from '../vue-number-scroll'
|
||||
|
||||
export default {
|
||||
name: 'random-money',
|
||||
components: {
|
||||
VueNumberScroll
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
avatar: require('@/assets/img/xiaoheshang.jpg'),
|
||||
edit: false,
|
||||
anonymous: false,
|
||||
numberArr: ['3', '.', '9','9'],
|
||||
number: 0,
|
||||
money: 0,
|
||||
user: null,
|
||||
privateUser: null,
|
||||
inputNickname: '',
|
||||
randList: [],
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
mounted(){
|
||||
this.getRandMoney()
|
||||
this.getUserData();
|
||||
},
|
||||
methods: {
|
||||
onAnonymous(checked){
|
||||
this.anonymous = checked;
|
||||
if(checked){
|
||||
this.user.nickname = '匿名用户'
|
||||
} else {
|
||||
this.user.nickname = this.privateUser.nickname
|
||||
}
|
||||
},
|
||||
onEdit(){
|
||||
this.edit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.focus();
|
||||
})
|
||||
},
|
||||
async getUserData(){
|
||||
const res = await getUserData();
|
||||
this.user = res;
|
||||
this.privateUser = Object.assign({}, res);
|
||||
this.inputNickname = res.nickname;
|
||||
},
|
||||
onMoneyInput(e){
|
||||
console.log(e.target.value)
|
||||
this.number = this.money
|
||||
},
|
||||
changeMoney(){
|
||||
const rand = Math.floor(Math.random() * this.randList.length);
|
||||
this.number = Number(this.randList[rand])
|
||||
this.money = this.number;
|
||||
},
|
||||
async getRandMoney(){
|
||||
const res = await getRandMoney();
|
||||
this.randList = res;
|
||||
this.money = Number(res[0])
|
||||
this.number = Number(res[0])
|
||||
},
|
||||
onNext(){
|
||||
this.$emit('change', {
|
||||
anonymous: this.anonymous,
|
||||
money: this.number
|
||||
})
|
||||
this.$emit('update:value', false)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.red-packet{
|
||||
height: 60vh;
|
||||
background: #e85042 url('~@/assets/img/red-packet.jpg') top center no-repeat;
|
||||
background-size: contain;
|
||||
overflow: hidden;
|
||||
.avatar{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: block;
|
||||
border-radius: 1.5rem;
|
||||
border: 2px solid yellow;
|
||||
margin: 2rem auto .1rem;
|
||||
}
|
||||
.username-container{
|
||||
padding-top: .3rem;
|
||||
height: 2rem;
|
||||
.username{
|
||||
color: white;
|
||||
font-size: .4rem;
|
||||
text-align: center;
|
||||
margin-top: .3rem;
|
||||
span{
|
||||
padding-right: .1rem;
|
||||
}
|
||||
}
|
||||
.input-username{
|
||||
border: 1px solid yellow;
|
||||
font-size: .4rem;
|
||||
background: transparent;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
height: 1rem;
|
||||
color: white;
|
||||
padding: .1rem .3rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.money{
|
||||
color: yellow;
|
||||
text-align: center;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: 1rem;
|
||||
overflow: hidden;
|
||||
margin-top: .6rem;
|
||||
margin-bottom: .8rem;
|
||||
ul{
|
||||
li{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: .4rem;
|
||||
color: white;
|
||||
padding: .3rem .6rem;
|
||||
margin-top: .6rem;
|
||||
}
|
||||
.money-input{
|
||||
border: 1px solid yellow;
|
||||
height: 1.2rem;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
justify-content: space-between;
|
||||
input{
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding-left: .5rem;
|
||||
font-size: .5rem;
|
||||
width: 50%;
|
||||
}
|
||||
span{
|
||||
padding: 0 .2rem;
|
||||
font-size: .5rem;
|
||||
}
|
||||
}
|
||||
.van-checkbox__label{
|
||||
color: white;
|
||||
}
|
||||
.random-button-group{
|
||||
text-align: center;
|
||||
font-size: .5rem;
|
||||
margin-top: .7rem;
|
||||
display: flex;
|
||||
padding: 0 .4rem;
|
||||
button{
|
||||
background: transparent;
|
||||
margin: 0 .2rem;
|
||||
height: 1.3rem;
|
||||
border: 1px solid transparent;
|
||||
color: white;
|
||||
}
|
||||
.change{
|
||||
color: yellow;
|
||||
border: 1px solid yellow;
|
||||
border-radius: 4px;
|
||||
flex: 1.3;
|
||||
}
|
||||
.next{
|
||||
background: yellow;
|
||||
color: rgb(224, 61, 61);
|
||||
border-radius: 4px;
|
||||
flex: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="temple-card" @click="onTo">
|
||||
<img :src="data.url" alt="">
|
||||
<img :src="data.picture" alt="">
|
||||
<div class="info">
|
||||
<span class="name">{{data.name}}</span>
|
||||
<span class="visitor">{{data.visitor}} 人到访</span>
|
||||
<span class="name">{{data.unit_name}}</span>
|
||||
<span class="visitor">{{data.visit}} 人到访</span>
|
||||
<span class="iconfont icon-dingwei"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -17,16 +17,16 @@ export default {
|
||||
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
|
||||
picture: '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',
|
||||
unit_name: '重庆石林寺',
|
||||
visit: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTo(){
|
||||
this.$router.push({ name: 'temple-detail', query: { id: this.data.id }})
|
||||
this.$router.push({ name: 'temple-home', query: { temple_id: this.data.id }})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="user-dynamic">
|
||||
<img class="avatar" :src="data.avatar" alt="">
|
||||
<span class="username">{{data.nickname}}</span>
|
||||
<span class="content">{{data.goods_name}}</span>
|
||||
<span class="time">{{data.date}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'user-dynamic',
|
||||
props: ['data']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-dynamic{
|
||||
display: flex;
|
||||
border: 1px solid #f1f1f1;
|
||||
border-radius: .08rem;
|
||||
background: white;
|
||||
padding: .2rem .2rem;
|
||||
align-items: center;
|
||||
.avatar{
|
||||
width: .8rem;
|
||||
height: .8rem;
|
||||
border-radius: 1.07rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.username{
|
||||
padding: 0 .2rem;
|
||||
white-space: nowrap;
|
||||
max-width: 1.6rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: .37rem;
|
||||
}
|
||||
.content{
|
||||
flex: 1;
|
||||
font-size: .32rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: .4rem;
|
||||
}
|
||||
.time{
|
||||
font-size: .3rem;
|
||||
color: rgb(105, 105, 105);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<div class="user-merit border-bottom">
|
||||
<div class="user-merit border-bottom" v-if="data">
|
||||
<img
|
||||
src="https://img0.baidu.com/it/u=199023397,1701150760&fm=26&fmt=auto"
|
||||
:src="data.user_info.avatar"
|
||||
alt=""
|
||||
/>
|
||||
<div class="profile">
|
||||
<div>
|
||||
<div class="name">
|
||||
<span>李晓华</span>
|
||||
<span>湖南长沙</span>
|
||||
<span>{{data.user_info.nickname}}</span>
|
||||
<span>{{data.user_info.region}}</span>
|
||||
</div>
|
||||
<p>为佛像贴金身，菩萨护佑</p>
|
||||
<p>{{data.goods_name}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result">
|
||||
<p class="money">24212.23元</p>
|
||||
<span class="date">2021-10-3 21：58</span>
|
||||
<p class="money">{{data.order_amount || data.sum_money}}元</p>
|
||||
<span class="date">{{data.paid_at}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -23,6 +23,7 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "user-merit",
|
||||
props: ['data']
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -70,10 +71,12 @@ export default {
|
||||
text-align: right;
|
||||
.money {
|
||||
font-size: 0.37rem;
|
||||
color: $primary-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.date {
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
font-size: 0.3rem;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="vue-number-scroll">
|
||||
<div class="box-item">
|
||||
<li
|
||||
:class="{
|
||||
'number-item': !isNaN(item),
|
||||
'mark-item': isNaN(item),
|
||||
}"
|
||||
v-for="(item, index) in orderNum"
|
||||
:key="index"
|
||||
>
|
||||
<span v-if="!isNaN(item)">
|
||||
<i ref="numberItem">0123456789</i>
|
||||
</span>
|
||||
<span class="comma" v-else>{{ item }}</span>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val){
|
||||
if(!val) return;
|
||||
this.toOrderNum(val); // 这里输入数字即可调用
|
||||
this.$nextTick(() => {
|
||||
this.setNumberTransform()
|
||||
})
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderNum: ['0'],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 设置文字滚动
|
||||
setNumberTransform() {
|
||||
const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
|
||||
const numberArr = this.orderNum.filter((item) => !isNaN(item));
|
||||
// 结合CSS 对数字字符进行滚动,显示金额
|
||||
for (let index = 0; index < numberItems.length; index++) {
|
||||
const elem = numberItems[index];
|
||||
elem.style.transform = `translate(-50%, -${
|
||||
numberArr[index] * 10
|
||||
}%)`;
|
||||
}
|
||||
},
|
||||
// 处理总金额
|
||||
toOrderNum(num) {
|
||||
this.orderNum = num.toString().split(""); // 将其变成数据，渲染至滚动数组
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*金额滚动数字设置*/
|
||||
.vue-number-scroll{
|
||||
.box-item {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 1rem;
|
||||
padding: 2% 0;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
text-orientation: upright;
|
||||
/*文字禁止编辑*/
|
||||
-moz-user-select: none; /*火狐*/
|
||||
-webkit-user-select: none; /*webkit浏览器*/
|
||||
-ms-user-select: none; /*IE10*/
|
||||
-khtml-user-select: none; /*早期浏览器*/
|
||||
user-select: none;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 默认逗号设置 */
|
||||
.mark-item {
|
||||
width: .4rem;
|
||||
line-height: 10px;
|
||||
height: 30px;
|
||||
font-size: 24px;
|
||||
position: relative;
|
||||
color: yellow;
|
||||
display: inline-block;
|
||||
}
|
||||
.mark-item span {
|
||||
bottom: 0;
|
||||
}
|
||||
/*滚动数字设置*/
|
||||
.number-item {
|
||||
width: .6rem;
|
||||
height: 1.2rem;
|
||||
list-style: none;
|
||||
background-size: 100% 100%;
|
||||
color: yellow;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.number-item:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.number-item span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.number-item span i {
|
||||
font-style: normal;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
transition: transform 0.5s ease-in-out;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
|
||||
.number-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user