feat: 增加界面
This commit is contained in:
@@ -16,6 +16,8 @@ export default {
|
||||
font-size: .3rem;
|
||||
color: #999;
|
||||
display: flex;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
align-items: center;
|
||||
em{
|
||||
line-height: .32rem;
|
||||
|
||||
@@ -1,189 +1,203 @@
|
||||
<template>
|
||||
<div class="process" v-if="privateData" @click="onProcessDetail">
|
||||
<span class="date">{{privateData.time || privateData.date}}</span>
|
||||
<span class="date">{{ privateData.time || privateData.date }}</span>
|
||||
<div class="process-detail">
|
||||
<h1 class="title">{{privateData.title}}</h1>
|
||||
<p class="desc">{{privateData.description}}</p>
|
||||
<div class="image-group">
|
||||
<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">已有{{privateData.sales}}人参与</span>
|
||||
<div class="btn-group">
|
||||
<span class="btn" :class="[privateData.collect === 1 ? 'collect': 'un-collect']" @click.stop="onCollect">
|
||||
<i class="iconfont icon-guanzhu-yiguanzhu"></i>
|
||||
<b>关注</b>
|
||||
</span>
|
||||
<span class="btn">
|
||||
<i class="iconfont icon-zhuanfa"></i>
|
||||
<b>转发</b>
|
||||
</span>
|
||||
<h1 class="title">{{ privateData.title }}</h1>
|
||||
<p class="desc">{{ privateData.description }}</p>
|
||||
<p class="detail-text" v-if="privateData.length > 40">详情</p>
|
||||
<div class="image-group">
|
||||
<img :src="cover" v-for="(cover, index) in covers" :key="index" alt="" />
|
||||
</div>
|
||||
<button class="purchase" v-if="showGoodsBtn" @click.stop="onGoodsDetail">{{privateData.btn_title}}</button>
|
||||
<div class="bar">
|
||||
<span class="join">已有{{ privateData.sales }}人参与</span>
|
||||
<div class="btn-group">
|
||||
<span class="btn" :class="[privateData.is_collected === 1 ? 'collect' : 'un-collect']" @click.stop="onCollect">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toggleCollect } from "@/api"
|
||||
import { toggleCollect } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'buddha-process',
|
||||
props: ['data'],
|
||||
watch: {
|
||||
data: {
|
||||
handler(val){
|
||||
this.privateData = val;
|
||||
props: {
|
||||
data: {
|
||||
required: true,
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
showGoodsBtn: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
privateData: null,
|
||||
}
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
this.privateData = val;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
privateData: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
covers: {
|
||||
get() {
|
||||
const type = Object.prototype.toString.call(this.privateData.covers);
|
||||
return type === '[object Object]' ? []: this.privateData.covers.slice(0, 3);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async onCollect(){
|
||||
const res = await toggleCollect(this.data.id);
|
||||
console.log(res)
|
||||
this.privateData.is_collected = this.privateData.is_collected === 1 ? 0 : 1;
|
||||
this.$emit('collection', this.data.id)
|
||||
},
|
||||
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
|
||||
async onCollect() {
|
||||
await toggleCollect(this.data.id);
|
||||
this.privateData.is_collected = this.privateData.is_collected === 1 ? 0 : 1;
|
||||
this.$emit('collection', this.data.id);
|
||||
},
|
||||
onProcessDetail() {
|
||||
const { id } = this.privateData;
|
||||
this.$router.push({
|
||||
name: 'buddha-detail',
|
||||
query: { id }
|
||||
})
|
||||
},
|
||||
onGoodsDetail(){
|
||||
const { goods_type, goods_id, temple_id } = this.privateData;
|
||||
this.onPushToGoodsDetail(goods_type, goods_id, temple_id)
|
||||
}
|
||||
this.$router.push({
|
||||
name: 'goods-detail',
|
||||
query: {
|
||||
goods_type,
|
||||
goods_id,
|
||||
temple_id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</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;
|
||||
.process {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 0 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;
|
||||
}
|
||||
.desc{
|
||||
font-size: .37rem;
|
||||
line-height: .53rem;
|
||||
color: #333;
|
||||
& ~ .process {
|
||||
padding-top: 0.53rem;
|
||||
}
|
||||
.image-group{
|
||||
white-space: nowrap;
|
||||
margin-top: .27rem;
|
||||
img{
|
||||
width: 2.16rem;
|
||||
height: 2.16rem;
|
||||
vertical-align: top;
|
||||
border-radius: .05rem;
|
||||
& ~ img{
|
||||
margin-left: .27rem;
|
||||
.date {
|
||||
font-size: 0.35rem;
|
||||
color: #666666;
|
||||
display: inline-block;
|
||||
width: 2.19rem;
|
||||
margin-top: 0.07rem;
|
||||
}
|
||||
.process-detail {
|
||||
flex: 1;
|
||||
.title {
|
||||
font-size: 0.43rem;
|
||||
color: #222;
|
||||
margin-bottom: 0.32rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
align-items: center;
|
||||
|
||||
.iconfont{
|
||||
color:$primary-color;
|
||||
vertical-align: middle;
|
||||
.desc {
|
||||
font-size: 0.37rem;
|
||||
line-height: 0.53rem;
|
||||
color: #5a5a5a;
|
||||
text-align: justify;
|
||||
|
||||
@extend .text-multiple-3;
|
||||
}
|
||||
.detail-text{
|
||||
font-size: .4rem;
|
||||
margin-top: -3px;
|
||||
}
|
||||
b{
|
||||
font-size: .35rem;
|
||||
padding-left: .1rem;
|
||||
color: #888;
|
||||
padding-top: .2rem;
|
||||
color: #b74100;
|
||||
}
|
||||
.image-group {
|
||||
white-space: nowrap;
|
||||
margin-top: 0.27rem;
|
||||
img {
|
||||
width: 2.16rem;
|
||||
height: 2.16rem;
|
||||
vertical-align: top;
|
||||
border-radius: 0.05rem;
|
||||
& ~ img {
|
||||
margin-left: 0.27rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.purchase {
|
||||
background: #cf9e3b;
|
||||
height: 0.77rem;
|
||||
color: white;
|
||||
padding: 0 0.27rem;
|
||||
line-height: 0.77rem;
|
||||
border-radius: 0.07rem;
|
||||
font-size: 0.35rem;
|
||||
border: 1px solid #cf9e3b;
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
vertical-align: top;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
.collect{
|
||||
.iconfont{
|
||||
color: $primary-color;
|
||||
}
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 0.37rem;
|
||||
margin-top: 0.32rem;
|
||||
.join {
|
||||
font-size: 0.3rem;
|
||||
color: #666;
|
||||
}
|
||||
.btn-group {
|
||||
display: flex;
|
||||
.btn {
|
||||
display: flex;
|
||||
margin-left: 0.5rem;
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
color: $primary-color;
|
||||
vertical-align: middle;
|
||||
font-size: 0.4rem;
|
||||
margin-top: -3px;
|
||||
}
|
||||
b {
|
||||
font-size: 0.35rem;
|
||||
padding-left: 0.1rem;
|
||||
color: #888;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.collect {
|
||||
.iconfont {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
.un-collect {
|
||||
.iconfont {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.un-collect{
|
||||
.iconfont{
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="fixed-bottom" ref="fixedBottom">
|
||||
<safe-area>
|
||||
<slot></slot>
|
||||
</safe-area>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'fixed-bottom',
|
||||
methods: {
|
||||
getOffsetHeight(){
|
||||
return this.$refs.fixedBottom.offsetHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.fixed-bottom{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: .01rem solid #ddd;
|
||||
background: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -12,6 +12,9 @@ import UserDynamic from './user-dynamic';
|
||||
import RandomMoney from './random-money'
|
||||
import ThankGiving from './Thanksgiving'
|
||||
import ArrowMore from './arrow-more'
|
||||
import SafeArea from './safe-area';
|
||||
import FixedBottom from './fixed-bottom';
|
||||
|
||||
|
||||
Vue.component(UserMerit.name, UserMerit)
|
||||
Vue.component(Temple.name, Temple)
|
||||
@@ -25,3 +28,5 @@ Vue.component(UserDynamic.name, UserDynamic)
|
||||
Vue.component(RandomMoney.name, RandomMoney)
|
||||
Vue.component(ThankGiving.name, ThankGiving)
|
||||
Vue.component(ArrowMore.name, ArrowMore)
|
||||
Vue.component(SafeArea.name, SafeArea)
|
||||
Vue.component(FixedBottom.name, FixedBottom)
|
||||
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="order">
|
||||
<div class="order-head">
|
||||
<span class="temple-name">重庆石林寺<i class="iconfont icon-arrow-right"></i></span>
|
||||
<span class="status">已处理</span>
|
||||
<span class="temple-name" @click="onTemple">{{data.temple_name}}<i class="iconfont icon-arrow-right"></i></span>
|
||||
<span class="status">{{data.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="">
|
||||
<img class="goods-picture" :src="data.picture" alt="">
|
||||
<div class="order-flex">
|
||||
<h4 class="name">功德箱捐赠</h4>
|
||||
<span class="date">2021-10-3</span>
|
||||
<h4 class="name">{{data.goods_name}}</h4>
|
||||
<span class="date">{{data.created_at}}</span>
|
||||
</div>
|
||||
<div class="order-flex-quantity">
|
||||
<span class="amount">￥ 200.01</span>
|
||||
<span class="quantity">数量： 1</span>
|
||||
<span class="amount">￥ {{data.order_amount}}</span>
|
||||
<span class="quantity">数量：{{data.buy_total}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -20,7 +20,13 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'order'
|
||||
name: 'order',
|
||||
props: ['data'],
|
||||
methods: {
|
||||
onTemple(){
|
||||
this.$router.push({ name: 'temple-home', query: { temple_id: this.data.temple_id} })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -55,8 +61,13 @@ export default {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: .13rem 0;
|
||||
margin-right: .2rem;
|
||||
.name{
|
||||
font-size: .43rem;
|
||||
font-size: .35rem;
|
||||
line-height: 1.3;
|
||||
color: #19282E;
|
||||
margin-top: -.12rem;
|
||||
@extend .text-multiple-2;
|
||||
}
|
||||
.date{
|
||||
color: #555;
|
||||
|
||||
@@ -116,6 +116,7 @@ export default {
|
||||
background: #e85042 url('~@/assets/img/red-packet.jpg') top center no-repeat;
|
||||
background-size: contain;
|
||||
overflow: hidden;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.avatar{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div :class="['safe-area', 'safe-area--'+offset, isFullScreen ? 'full-screen':'small-screen']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'safe-area',
|
||||
props: {
|
||||
offset: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
isFullScreen: this.getHasFullScreen()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.safe-area--bottom{
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.safe-area--top{
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
.safe-area.small-screen{
|
||||
padding-bottom: .3rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user