update
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
<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>
|
||||
<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">
|
||||
@@ -27,10 +27,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toggleCollect } from '@/api';
|
||||
import { toggleCollect } from "@/api";
|
||||
|
||||
export default {
|
||||
name: 'buddha-process',
|
||||
name: "buddha-process",
|
||||
props: {
|
||||
data: {
|
||||
required: true,
|
||||
@@ -38,7 +38,7 @@ export default {
|
||||
showGoodsBtn: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
@@ -56,8 +56,8 @@ export default {
|
||||
computed: {
|
||||
covers: {
|
||||
get() {
|
||||
const type = Object.prototype.toString.call(this.privateData.covers);
|
||||
return type === '[object Object]' ? []: this.privateData.covers.slice(0, 3);
|
||||
const type = Object.prototype.toString.call(this.privateData.covers);
|
||||
return type === "[object Object]" ? [] : this.privateData.covers.slice(0, 3);
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -65,26 +65,26 @@ export default {
|
||||
async onCollect() {
|
||||
await toggleCollect(this.data.id);
|
||||
this.privateData.is_collected = this.privateData.is_collected === 1 ? 0 : 1;
|
||||
this.$emit('collection', this.data.id);
|
||||
this.$emit("collection", this.data.id);
|
||||
},
|
||||
onProcessDetail() {
|
||||
const { id } = this.privateData;
|
||||
this.$router.push({
|
||||
name: 'buddha-detail',
|
||||
query: { id }
|
||||
})
|
||||
name: "buddha-detail",
|
||||
query: { id },
|
||||
});
|
||||
},
|
||||
onGoodsDetail(){
|
||||
onGoodsDetail() {
|
||||
const { goods_type, goods_id, temple_id, spec_ids } = this.privateData;
|
||||
this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids)
|
||||
}
|
||||
this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.panel-body {
|
||||
.buddha-process{
|
||||
.buddha-process {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
@@ -94,7 +94,7 @@ export default {
|
||||
position: relative;
|
||||
padding: 0 0.4rem;
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
height: 1px;
|
||||
width: 200%;
|
||||
background: #ededed;
|
||||
@@ -131,9 +131,9 @@ export default {
|
||||
|
||||
@extend .text-multiple-3;
|
||||
}
|
||||
.detail-text{
|
||||
font-size: .4rem;
|
||||
padding-top: .2rem;
|
||||
.detail-text {
|
||||
font-size: 0.4rem;
|
||||
padding-top: 0.2rem;
|
||||
color: #b74100;
|
||||
}
|
||||
.image-group {
|
||||
@@ -180,7 +180,7 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
vertical-align: middle;
|
||||
font-size: 0.4rem;
|
||||
margin-top: -3px;
|
||||
@@ -195,7 +195,7 @@ export default {
|
||||
}
|
||||
.collect {
|
||||
.iconfont {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
.un-collect {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="detail-content-expand">
|
||||
<div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{ height: (show ? contentHeight : defaultContentHeight) + 'px' }">
|
||||
<div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{ height: show ? 'auto' : defaultContentHeight + 'px' }">
|
||||
<div ref="content" class="ref-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@@ -41,7 +41,8 @@ export default {
|
||||
mounted() {
|
||||
this.wrapperHeight = this.$refs.wrapper.offsetHeight;
|
||||
this.$nextTick(() => {
|
||||
this.contentHeight = this.$refs.content.offsetHeight;
|
||||
console.log(this.$refs.content.clientHeight);
|
||||
this.contentHeight = this.$refs.content.clientHeight;
|
||||
this.wrapperContainerHeight = this.wrapperHeight;
|
||||
this.refresh();
|
||||
});
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<van-popup :value.sync="visible" position="bottom" @close="onClose" @click-overlay="onClose" safe-area-inset-bottom
|
||||
style="min-height: 50vh">
|
||||
<div class="add-merit-name" >
|
||||
<van-popup :value.sync="visible" position="bottom" @close="onClose" @click-overlay="onClose" safe-area-inset-bottom style="min-height: 50vh">
|
||||
<div class="add-merit-name">
|
||||
<h3 class="title">心愿</h3>
|
||||
<div class="desire-input">
|
||||
<textarea class="desire-textarea" v-model="desire" type="text" :max-length="maxLength" placeholder="请输入您的心愿" />
|
||||
<span>{{desire.length}}/{{maxLength}}</span>
|
||||
<span>{{ desire.length }}/{{ maxLength }}</span>
|
||||
</div>
|
||||
<div class="desire-quike">
|
||||
<div class="bar">
|
||||
@@ -13,7 +12,7 @@
|
||||
<span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
|
||||
</div>
|
||||
<div class="name-group">
|
||||
<span class="name" v-for="(dream, index) in dreamList" :key="index" @click="onFill(dream)">{{dream}}</span>
|
||||
<span class="name" v-for="(dream, index) in dreamList" :key="index" @click="onFill(dream)">{{ dream }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="confirm" @click="onConfirmDream">确认</button>
|
||||
@@ -22,80 +21,80 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDreamList } from '@/api';
|
||||
import { getDreamList } from "@/api";
|
||||
|
||||
export default {
|
||||
name: 'merit-desire',
|
||||
name: "merit-desire",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'increment', // increment | single
|
||||
default: "increment", // increment | single
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
maxLength: {
|
||||
type: Number,
|
||||
default: 50
|
||||
}
|
||||
default: 50,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
desire: '',
|
||||
dreamList: []
|
||||
name: "",
|
||||
desire: "",
|
||||
dreamList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(value){
|
||||
if(value){
|
||||
this.selectedName = this.selected.map(v => v.id)
|
||||
visible(value) {
|
||||
if (value) {
|
||||
this.selectedName = this.selected.map((v) => v.id);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getDreamList();
|
||||
},
|
||||
methods: {
|
||||
onFill(dream){
|
||||
if(this.mode === 'single'){
|
||||
return this.desire = dream;
|
||||
onFill(dream) {
|
||||
if (this.mode === "single") {
|
||||
return (this.desire = dream);
|
||||
}
|
||||
this.desire += dream + '，';
|
||||
this.desire = this.desire.slice(0, this.maxLength)
|
||||
this.desire += dream + "，";
|
||||
this.desire = this.desire.slice(0, this.maxLength);
|
||||
},
|
||||
onClose() {
|
||||
this.$emit('update:visible', false);
|
||||
this.$emit("update:visible", false);
|
||||
},
|
||||
//获取心愿列表
|
||||
async getDreamList(){
|
||||
async getDreamList() {
|
||||
const list = await getDreamList();
|
||||
this.dreamList = list;
|
||||
},
|
||||
onConfirmDream(){
|
||||
onConfirmDream() {
|
||||
this.showDialog = false;
|
||||
this.dream = this.desire;
|
||||
this.$emit('update:visible', false);
|
||||
this.$emit('change', this.dream)
|
||||
this.$emit("update:visible", false);
|
||||
this.$emit("change", this.dream);
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.add-merit-name {
|
||||
padding: .4rem;
|
||||
padding: 0.4rem;
|
||||
|
||||
.title {
|
||||
font-size: .4rem;
|
||||
margin-bottom: .4rem;
|
||||
font-size: 0.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.add-name {
|
||||
@@ -103,49 +102,49 @@ export default {
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
padding-left: .3rem;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
padding-left: 0.3rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .11rem;
|
||||
font-size: .4rem;
|
||||
border-radius: 0.11rem;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .2rem .6rem;
|
||||
background: $primary-color;
|
||||
padding: 0.2rem 0.6rem;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
font-size: .4rem;
|
||||
border-radius: .11rem;
|
||||
margin-left: .3rem;
|
||||
border: 1px solid #cf9e3b;
|
||||
font-size: 0.4rem;
|
||||
border-radius: 0.11rem;
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .5rem 0;
|
||||
padding: 0.5rem 0;
|
||||
height: 30vh;
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: .2rem .3rem;
|
||||
padding: 0.2rem 0.3rem;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .08rem;
|
||||
border-radius: 0.08rem;
|
||||
position: relative;
|
||||
margin-right: .2rem;
|
||||
margin-bottom: .2rem;
|
||||
font-size: .35rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
font-size: 0.35rem;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: -.25rem;
|
||||
top: -.25rem;
|
||||
font-size: .5rem;
|
||||
right: -0.25rem;
|
||||
top: -0.25rem;
|
||||
font-size: 0.5rem;
|
||||
color: red;
|
||||
}
|
||||
input[type=checkbox]{
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -153,25 +152,24 @@ export default {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
&.selected{
|
||||
background: $primary-color;
|
||||
&.selected {
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.desire-input {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .13rem;
|
||||
border-radius: 0.13rem;
|
||||
overflow: hidden;
|
||||
|
||||
.desire-textarea {
|
||||
border: none;
|
||||
display: block;
|
||||
font-size: .35rem;
|
||||
width: calc(100% - .5rem);
|
||||
padding: .25rem;
|
||||
font-size: 0.35rem;
|
||||
width: calc(100% - 0.5rem);
|
||||
padding: 0.25rem;
|
||||
height: 2rem;
|
||||
resize: none;
|
||||
line-height: 1.4;
|
||||
@@ -180,8 +178,8 @@ export default {
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding: .2rem;
|
||||
font-size: .35rem;
|
||||
padding: 0.2rem;
|
||||
font-size: 0.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,34 +190,33 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: .4rem;
|
||||
margin-bottom: .3rem;
|
||||
font-size: 0.4rem;
|
||||
margin-bottom: 0.3rem;
|
||||
|
||||
.update {
|
||||
font-size: .35rem;
|
||||
color: $primary-color;
|
||||
font-size: 0.35rem;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .1rem 0;
|
||||
padding: 0.1rem 0;
|
||||
|
||||
.name {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid #cf9e3b;
|
||||
width: 100%;
|
||||
padding: .3rem 0;
|
||||
padding: 0.3rem 0;
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,74 +1,74 @@
|
||||
<template>
|
||||
<div class="merit-goods" @click="onJoin">
|
||||
<img class="goods" :src="data.cover_url" alt="">
|
||||
<div class="info">
|
||||
<h3 class="title">{{data.title}}</h3>
|
||||
<div class="bar">
|
||||
<span class="join-number">已有{{data.sales}}人参与</span>
|
||||
<button class="join" >参与</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merit-goods" @click="onJoin">
|
||||
<img class="goods" :src="data.cover_url" alt="" />
|
||||
<div class="info">
|
||||
<h3 class="title">{{ data.title }}</h3>
|
||||
<div class="bar">
|
||||
<span class="join-number">已有{{ data.sales }}人参与</span>
|
||||
<button class="join">参与</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'merit-goods',
|
||||
props: ['data'],
|
||||
name: "merit-goods",
|
||||
props: ["data"],
|
||||
methods: {
|
||||
onJoin(){
|
||||
onJoin() {
|
||||
this.$router.push({
|
||||
name: 'goods-detail',
|
||||
name: "goods-detail",
|
||||
query: {
|
||||
goods_id: this.data.id,
|
||||
temple_id: this.data.temple_id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
temple_id: this.data.temple_id,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.merit-goods{
|
||||
.merit-goods {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.4rem;
|
||||
border-bottom: 0.01rem solid #f2f2f2;
|
||||
.goods {
|
||||
width: 2.93rem;
|
||||
height: 2.93rem;
|
||||
margin-right: 0.4rem;
|
||||
border-radius: 0.11rem;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: .4rem;
|
||||
border-bottom: .01rem solid #f2f2f2;
|
||||
.goods{
|
||||
width: 2.93rem;
|
||||
height: 2.93rem;
|
||||
margin-right: .4rem;
|
||||
border-radius: .11rem;
|
||||
.title {
|
||||
font-size: 0.4rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.info{
|
||||
flex: 1;
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
line-height: 1.3;
|
||||
align-items: center;
|
||||
.join-number {
|
||||
font-size: 0.35rem;
|
||||
color: #666;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.join {
|
||||
height: 0.67rem;
|
||||
padding: 0 0.4rem;
|
||||
background: #cf9e3b;
|
||||
border: 0.01rem solid #cf9e3b;
|
||||
color: white;
|
||||
border-radius: 0.05rem;
|
||||
font-size: 0.37rem;
|
||||
line-height: 0.67rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
<template>
|
||||
<van-popup :value.sync="visible" position="bottom" @close="onClose" @click-overlay="onClose" safe-area-inset-bottom
|
||||
style="min-height: 50vh">
|
||||
<van-popup :value.sync="visible" position="bottom" @close="onClose" @click-overlay="onClose" safe-area-inset-bottom style="min-height: 50vh">
|
||||
<div class="add-merit-name">
|
||||
<h3 class="title">功德芳名</h3>
|
||||
<div class="add-name">
|
||||
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名">
|
||||
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名" />
|
||||
<button class="btn" @click="addName">添加</button>
|
||||
</div>
|
||||
<div class="name-group">
|
||||
<span class="name" :class="[selectedName.includes(name.id) && 'selected']" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
|
||||
{{ name.name }}
|
||||
<input type="checkbox" v-model="selectedName" :value="name.id" >
|
||||
<input type="checkbox" v-model="selectedName" :value="name.id" />
|
||||
<i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
|
||||
</span>
|
||||
</div>
|
||||
@@ -20,52 +19,52 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deleteMeritName, getMeritName, postMeritName } from '@/api';
|
||||
import { deleteMeritName, getMeritName, postMeritName } from "@/api";
|
||||
|
||||
export default {
|
||||
name: 'merit-name',
|
||||
name: "merit-name",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
name: '',
|
||||
name: "",
|
||||
names: [],
|
||||
selectedName: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(value){
|
||||
if(value){
|
||||
this.selectedName = this.selected.map(v => v.id)
|
||||
visible(value) {
|
||||
if (value) {
|
||||
this.selectedName = this.selected.map((v) => v.id);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getName();
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
this.$emit('update:visible', false);
|
||||
this.$emit("update:visible", false);
|
||||
},
|
||||
onSelectName(name){
|
||||
onSelectName(name) {
|
||||
this.person = name;
|
||||
this.showDialog = false;
|
||||
},
|
||||
async addName() {
|
||||
if (!this.name) return;
|
||||
await postMeritName(this.name);
|
||||
this.name = '';
|
||||
this.name = "";
|
||||
await this.getName();
|
||||
},
|
||||
async onDeleteName(name) {
|
||||
@@ -77,29 +76,29 @@ export default {
|
||||
this.names = data;
|
||||
},
|
||||
async onConfirmMeritName() {
|
||||
if(this.name){
|
||||
if (this.name) {
|
||||
const name = this.name;
|
||||
await this.addName(this.name);
|
||||
const selected = this.names.filter(item => item.name === name);
|
||||
const selected = this.names.filter((item) => item.name === name);
|
||||
this.onClose();
|
||||
this.$emit('change', selected);
|
||||
return ;
|
||||
this.$emit("change", selected);
|
||||
return;
|
||||
}
|
||||
const selected = this.names.filter(item => this.selectedName.includes(item.id));
|
||||
const selected = this.names.filter((item) => this.selectedName.includes(item.id));
|
||||
this.onClose();
|
||||
this.$emit('change', selected);
|
||||
}
|
||||
}
|
||||
this.$emit("change", selected);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.add-merit-name {
|
||||
padding: .4rem;
|
||||
padding: 0.4rem;
|
||||
|
||||
.title {
|
||||
font-size: .4rem;
|
||||
margin-bottom: .4rem;
|
||||
font-size: 0.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.add-name {
|
||||
@@ -107,50 +106,50 @@ export default {
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
padding-left: .3rem;
|
||||
font-size: .35rem;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
padding-left: 0.3rem;
|
||||
font-size: 0.35rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .11rem;
|
||||
font-size: .4rem;
|
||||
border-radius: 0.11rem;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .2rem .6rem;
|
||||
background: $primary-color;
|
||||
padding: 0.2rem 0.6rem;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
font-size: .4rem;
|
||||
border-radius: .11rem;
|
||||
margin-left: .3rem;
|
||||
border: 1px solid #cf9e3b;
|
||||
font-size: 0.4rem;
|
||||
border-radius: 0.11rem;
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .5rem 0;
|
||||
padding: 0.5rem 0;
|
||||
height: 30vh;
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: .3rem .6rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .08rem;
|
||||
border-radius: 0.08rem;
|
||||
position: relative;
|
||||
margin-right: .2rem;
|
||||
margin-bottom: .2rem;
|
||||
font-size: .4rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
font-size: 0.4rem;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: -.25rem;
|
||||
top: -.25rem;
|
||||
font-size: .7rem;
|
||||
right: -0.25rem;
|
||||
top: -0.25rem;
|
||||
font-size: 0.7rem;
|
||||
color: red;
|
||||
}
|
||||
input[type=checkbox]{
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -158,25 +157,24 @@ export default {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
&.selected{
|
||||
background: $primary-color;
|
||||
&.selected {
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.desire-input {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .13rem;
|
||||
border-radius: 0.13rem;
|
||||
overflow: hidden;
|
||||
|
||||
.desire-textarea {
|
||||
border: none;
|
||||
display: block;
|
||||
font-size: .35rem;
|
||||
width: calc(100% - .5rem);
|
||||
padding: .25rem;
|
||||
font-size: 0.35rem;
|
||||
width: calc(100% - 0.5rem);
|
||||
padding: 0.25rem;
|
||||
height: 2rem;
|
||||
resize: none;
|
||||
}
|
||||
@@ -184,8 +182,8 @@ export default {
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding: .2rem;
|
||||
font-size: .35rem;
|
||||
padding: 0.2rem;
|
||||
font-size: 0.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -196,34 +194,33 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: .4rem;
|
||||
margin-bottom: .3rem;
|
||||
font-size: 0.4rem;
|
||||
margin-bottom: 0.3rem;
|
||||
|
||||
.update {
|
||||
font-size: .35rem;
|
||||
color: $primary-color;
|
||||
font-size: 0.35rem;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .1rem 0;
|
||||
padding: 0.1rem 0;
|
||||
|
||||
.name {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid #cf9e3b;
|
||||
width: 100%;
|
||||
padding: .3rem 0;
|
||||
padding: 0.3rem 0;
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
<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="">
|
||||
<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>
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<van-checkbox v-model="anonymous" checked-color="#CF9E3B;" @change="onAnonymous">匿名参与</van-checkbox>
|
||||
</span>
|
||||
<span>查看服务协议</span>
|
||||
</div> -->
|
||||
@@ -29,152 +29,151 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRandMoney, getUserData } from '@/api';
|
||||
import VueNumberScroll from '../vue-number-scroll'
|
||||
import { getRandMoney, getUserData } from "@/api";
|
||||
import VueNumberScroll from "../vue-number-scroll";
|
||||
|
||||
export default {
|
||||
name: 'random-money',
|
||||
name: "random-money",
|
||||
components: {
|
||||
VueNumberScroll
|
||||
VueNumberScroll,
|
||||
},
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
avatar: require('@/assets/img/xiaoheshang.jpg'),
|
||||
avatar: require("@/assets/img/xiaoheshang.jpg"),
|
||||
edit: false,
|
||||
anonymous: false,
|
||||
numberArr: ['3', '.', '9','9'],
|
||||
numberArr: ["3", ".", "9", "9"],
|
||||
number: 0,
|
||||
money: 0,
|
||||
user: null,
|
||||
privateUser: null,
|
||||
inputNickname: '',
|
||||
inputNickname: "",
|
||||
randList: [],
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
mounted(){
|
||||
this.getRandMoney()
|
||||
|
||||
mounted() {
|
||||
this.getRandMoney();
|
||||
this.getUserData();
|
||||
},
|
||||
methods: {
|
||||
onAnonymous(checked){
|
||||
onAnonymous(checked) {
|
||||
this.anonymous = checked;
|
||||
if(checked){
|
||||
this.user.nickname = '匿名用户'
|
||||
if (checked) {
|
||||
this.user.nickname = "匿名用户";
|
||||
} else {
|
||||
this.user.nickname = this.privateUser.nickname
|
||||
this.user.nickname = this.privateUser.nickname;
|
||||
}
|
||||
},
|
||||
onEdit(){
|
||||
onEdit() {
|
||||
this.edit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.focus();
|
||||
})
|
||||
});
|
||||
},
|
||||
async getUserData(){
|
||||
async getUserData() {
|
||||
const res = await getUserData();
|
||||
this.user = res;
|
||||
this.privateUser = Object.assign({}, res);
|
||||
this.inputNickname = res.nickname;
|
||||
},
|
||||
onMoneyInput(e){
|
||||
this.number = e.target.value
|
||||
onMoneyInput(e) {
|
||||
this.number = e.target.value;
|
||||
},
|
||||
changeMoney(){
|
||||
changeMoney() {
|
||||
const rand = Math.floor(Math.random() * this.randList.length);
|
||||
this.number = Number(this.randList[rand])
|
||||
this.money = this.number;
|
||||
this.number = Number(this.randList[rand]);
|
||||
this.money = this.number;
|
||||
},
|
||||
async getRandMoney(){
|
||||
async getRandMoney() {
|
||||
const res = await getRandMoney();
|
||||
this.randList = res;
|
||||
this.money = Number(res[0])
|
||||
this.number = Number(res[0])
|
||||
this.money = Number(res[0]);
|
||||
this.number = Number(res[0]);
|
||||
},
|
||||
onNext(){
|
||||
this.$emit('change', {
|
||||
onNext() {
|
||||
this.$emit("change", {
|
||||
anonymous: this.anonymous,
|
||||
money: this.number
|
||||
})
|
||||
this.$emit('update:value', false)
|
||||
}
|
||||
}
|
||||
money: this.number,
|
||||
});
|
||||
this.$emit("update:value", false);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.red-packet{
|
||||
.red-packet {
|
||||
min-height: 60vh;
|
||||
background: #e85042 url('~@/assets/img/red-packet.jpg') top center no-repeat;
|
||||
background: #e85042 url("~@/assets/img/red-packet.jpg") top center no-repeat;
|
||||
background-size: contain;
|
||||
overflow: hidden;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.avatar{
|
||||
.avatar {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: block;
|
||||
border-radius: 1.5rem;
|
||||
border: 2px solid yellow;
|
||||
margin: 2rem auto .1rem;
|
||||
margin: 2rem auto 0.1rem;
|
||||
}
|
||||
.username-container{
|
||||
padding-top: .3rem;
|
||||
.username-container {
|
||||
padding-top: 0.3rem;
|
||||
height: 1rem;
|
||||
.username{
|
||||
.username {
|
||||
color: white;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
text-align: center;
|
||||
margin-top: .3rem;
|
||||
span{
|
||||
padding-right: .1rem;
|
||||
margin-top: 0.3rem;
|
||||
span {
|
||||
padding-right: 0.1rem;
|
||||
}
|
||||
}
|
||||
.input-username{
|
||||
.input-username {
|
||||
border: 1px solid yellow;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
background: transparent;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
height: 1rem;
|
||||
color: white;
|
||||
padding: .1rem .3rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.money{
|
||||
|
||||
.money {
|
||||
color: yellow;
|
||||
text-align: center;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: 1rem;
|
||||
overflow: hidden;
|
||||
margin-top: .6rem;
|
||||
margin-bottom: .8rem;
|
||||
ul{
|
||||
li{
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.8rem;
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bar{
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
color: white;
|
||||
padding: .3rem .6rem;
|
||||
margin-top: .6rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
.money-input{
|
||||
.money-input {
|
||||
border: 1px solid yellow;
|
||||
height: 1.2rem;
|
||||
width: 60%;
|
||||
@@ -184,48 +183,48 @@ export default {
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
justify-content: space-between;
|
||||
input{
|
||||
input {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding-left: .5rem;
|
||||
font-size: .5rem;
|
||||
padding-left: 0.5rem;
|
||||
font-size: 0.5rem;
|
||||
width: 50%;
|
||||
}
|
||||
span{
|
||||
padding: 0 .2rem;
|
||||
font-size: .5rem;
|
||||
span {
|
||||
padding: 0 0.2rem;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
.van-checkbox__label{
|
||||
.van-checkbox__label {
|
||||
color: white;
|
||||
}
|
||||
.random-button-group{
|
||||
.random-button-group {
|
||||
text-align: center;
|
||||
font-size: .5rem;
|
||||
margin-top: .7rem;
|
||||
font-size: 0.5rem;
|
||||
margin-top: 0.7rem;
|
||||
display: flex;
|
||||
padding: 0 .4rem;
|
||||
margin-bottom: .5rem;
|
||||
button{
|
||||
padding: 0 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
button {
|
||||
background: transparent;
|
||||
margin: 0 .2rem;
|
||||
margin: 0 0.2rem;
|
||||
height: 1.3rem;
|
||||
border: 1px solid transparent;
|
||||
color: white;
|
||||
}
|
||||
.change{
|
||||
.change {
|
||||
color: yellow;
|
||||
border: 1px solid yellow;
|
||||
border-radius: 4px;
|
||||
flex: 1.3;
|
||||
}
|
||||
.next{
|
||||
.next {
|
||||
background: yellow;
|
||||
color: rgb(224, 61, 61);
|
||||
border-radius: 4px;
|
||||
flex: 2
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="input-box">
|
||||
<div class="input-content" @keydown="keydown" @keyup="keyup" @paste="paste" @mousewheel="mousewheel" @input="inputEvent">
|
||||
<input max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="input[0]" type="number" ref="firstinput"/>
|
||||
<input max="9" min="0" maxlength="1" data-index="1" v-model.trim.number="input[1]" type="number"/>
|
||||
<input max="9" min="0" maxlength="1" data-index="2" v-model.trim.number="input[2]" type="number"/>
|
||||
<input max="9" min="0" maxlength="1" data-index="3" v-model.trim.number="input[3]" type="number"/>
|
||||
<input max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="input[0]" type="number" ref="firstinput" />
|
||||
<input max="9" min="0" maxlength="1" data-index="1" v-model.trim.number="input[1]" type="number" />
|
||||
<input max="9" min="0" maxlength="1" data-index="2" v-model.trim.number="input[2]" type="number" />
|
||||
<input max="9" min="0" maxlength="1" data-index="3" v-model.trim.number="input[3]" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -22,7 +22,7 @@
|
||||
font-family: inherit;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
border-bottom: 2px solid $primary-color;
|
||||
border-bottom: 2px solid #cf9e3b;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
font-size: 1rem;
|
||||
@@ -48,27 +48,27 @@ export default {
|
||||
pasteResult: [],
|
||||
};
|
||||
},
|
||||
props: ['code'],
|
||||
props: ["code"],
|
||||
computed: {
|
||||
input() {
|
||||
if (this.code && Array.isArray(this.code) && this.code.length === this.codeCount) {
|
||||
return this.code;
|
||||
} else if (/^\d{this.codeCount}$/.test(this.code.toString())) {
|
||||
return this.code.toString().split('');
|
||||
return this.code.toString().split("");
|
||||
} else if (this.pasteResult.length === this.codeCount) {
|
||||
return this.pasteResult;
|
||||
} else {
|
||||
return new Array(this.codeCount);
|
||||
}
|
||||
},
|
||||
is_weixn(){
|
||||
is_weixn() {
|
||||
const ua = navigator.userAgent.toLowerCase();
|
||||
if(ua.match(/MicroMessenger/i)=="micromessenger") {
|
||||
if (ua.match(/MicroMessenger/i) == "micromessenger") {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 解决一个输入框输入多个字符
|
||||
@@ -76,48 +76,48 @@ export default {
|
||||
var index = e.target.dataset.index * 1;
|
||||
var el = e.target;
|
||||
// el.value = el.value.replace(/Digit|Numpad/i, '').replace(/1/g, '').slice(0, 1);
|
||||
this.$set(this.input, index, el.value)
|
||||
this.$set(this.input, index, el.value);
|
||||
},
|
||||
keydown(e) {
|
||||
var index = e.target.dataset.index * 1;
|
||||
var el = e.target;
|
||||
if (e.key === 'Backspace') {
|
||||
if (e.key === "Backspace") {
|
||||
if (this.input[index].length > 0) {
|
||||
this.$set(this.input, index, '')
|
||||
this.$set(this.input, index, "");
|
||||
} else {
|
||||
if (el.previousElementSibling) {
|
||||
el.previousElementSibling.focus()
|
||||
this.$set(this.input, index - 1, '')
|
||||
el.previousElementSibling.focus();
|
||||
this.$set(this.input, index - 1, "");
|
||||
}
|
||||
}
|
||||
} else if (e.key === 'Delete') {
|
||||
} else if (e.key === "Delete") {
|
||||
if (this.input[index].length > 0) {
|
||||
this.$set(this.input, index, '')
|
||||
this.$set(this.input, index, "");
|
||||
} else {
|
||||
if (el.nextElementSibling) {
|
||||
this.$set(this.input, index = 1, '')
|
||||
this.$set(this.input, (index = 1), "");
|
||||
}
|
||||
}
|
||||
if (el.nextElementSibling) {
|
||||
el.nextElementSibling.focus()
|
||||
el.nextElementSibling.focus();
|
||||
}
|
||||
} else if (e.key === 'Home') {
|
||||
el.parentElement.children[0] && el.parentElement.children[0].focus()
|
||||
} else if (e.key === 'End') {
|
||||
el.parentElement.children[this.input.length - 1] && el.parentElement.children[this.input.length - 1].focus()
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
} else if (e.key === "Home") {
|
||||
el.parentElement.children[0] && el.parentElement.children[0].focus();
|
||||
} else if (e.key === "End") {
|
||||
el.parentElement.children[this.input.length - 1] && el.parentElement.children[this.input.length - 1].focus();
|
||||
} else if (e.key === "ArrowLeft") {
|
||||
if (el.previousElementSibling) {
|
||||
el.previousElementSibling.focus()
|
||||
el.previousElementSibling.focus();
|
||||
}
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
} else if (e.key === "ArrowRight") {
|
||||
if (el.nextElementSibling) {
|
||||
el.nextElementSibling.focus()
|
||||
el.nextElementSibling.focus();
|
||||
}
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
} else if (e.key === "ArrowUp") {
|
||||
if (this.input[index] * 1 < 9) {
|
||||
this.$set(this.input, index, (this.input[index] * 1 + 1).toString());
|
||||
}
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
} else if (e.key === "ArrowDown") {
|
||||
if (this.input[index] * 1 > 0) {
|
||||
this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
|
||||
}
|
||||
@@ -129,20 +129,20 @@ export default {
|
||||
// 解决输入e的问题
|
||||
var reg = /Digit|Numpad/i;
|
||||
this.eventObj = JSON.stringify(e);
|
||||
el.value = el.value.replace(reg, '').slice(0, 1);
|
||||
el.value = el.value.replace(reg, "").slice(0, 1);
|
||||
if (reg.test(e) || this.is_weixn) {
|
||||
// 必须在这里符直，否则输入框会是空值
|
||||
this.$set(this.input, index, el.value);
|
||||
el.nextElementSibling && el.nextElementSibling.focus();
|
||||
if (index === this.codeCount-1) {
|
||||
if (this.input.join('').length === this.codeCount) {
|
||||
if (index === this.codeCount - 1) {
|
||||
if (this.input.join("").length === this.codeCount) {
|
||||
document.activeElement.blur();
|
||||
this.$emit('complete', this.input);
|
||||
this.$emit("complete", this.input);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.input[index] === '') {
|
||||
this.$set(this.input, index, '');
|
||||
if (this.input[index] === "") {
|
||||
this.$set(this.input, index, "");
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -156,33 +156,33 @@ export default {
|
||||
if (this.input[index] * 1 > 0) {
|
||||
this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
|
||||
}
|
||||
} else if (e.key === 'Enter') {
|
||||
if (this.input.join('').length === this.codeCount) {
|
||||
} else if (e.key === "Enter") {
|
||||
if (this.input.join("").length === this.codeCount) {
|
||||
document.activeElement.blur();
|
||||
this.$emit('complete', this.input);
|
||||
this.$emit("complete", this.input);
|
||||
}
|
||||
}
|
||||
},
|
||||
paste(e) {
|
||||
// 当进行粘贴时
|
||||
e.clipboardData.items[0].getAsString(str => {
|
||||
e.clipboardData.items[0].getAsString((str) => {
|
||||
if (str.toString().length === this.codeCount) {
|
||||
this.pasteResult = str.split('');
|
||||
this.pasteResult = str.split("");
|
||||
document.activeElement.blur();
|
||||
this.$emit('complete', this.input);
|
||||
this.$emit("complete", this.input);
|
||||
this.pasteResult = [];
|
||||
} else {
|
||||
// 如果粘贴内容不合规，清除所有内容
|
||||
this.input[0] = new Array(6)
|
||||
this.input[0] = new Array(6);
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 等待dom渲染完成，在执行focus,否则无法获取到焦点
|
||||
this.$nextTick(() => {
|
||||
this.$refs.firstinput.focus()
|
||||
})
|
||||
this.$refs.firstinput.focus();
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,88 +1,90 @@
|
||||
<template>
|
||||
<div class="user-merit border-bottom" v-if="data">
|
||||
<img
|
||||
:src="data.avatar || data.user_info.avatar"
|
||||
alt=""
|
||||
/>
|
||||
<div class="profile">
|
||||
<div>
|
||||
<div class="name">
|
||||
<span>{{data.merit_name || data.nickname || data.user_info.nickname}}</span>
|
||||
<!-- <span>{{data.user_info.region}}</span>-->
|
||||
</div>
|
||||
<p class="goods_name">{{data.goods_name}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result">
|
||||
<p class="money">{{data.order_amount || data.sum_money}}元</p>
|
||||
<span class="date">{{data.paid_at}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-merit border-bottom" v-if="data">
|
||||
<img :src="avatar" alt="" />
|
||||
<div class="profile">
|
||||
<div>
|
||||
<div class="name">
|
||||
<span>{{ data.merit_name || data.nickname || data.user_info.nickname }}</span>
|
||||
<!-- <span>{{data.user_info.region}}</span>-->
|
||||
</div>
|
||||
<p class="goods_name">{{ data.goods_name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result">
|
||||
<p class="money">{{ data.order_amount || data.sum_money }}元</p>
|
||||
<span class="date">{{ data.paid_at }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "user-merit",
|
||||
props: ['data']
|
||||
name: "user-merit",
|
||||
props: ["data"],
|
||||
data() {
|
||||
return {
|
||||
avatar: "/touxiang.png",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
padding: 0.27rem 0.4rem;
|
||||
img {
|
||||
width: 1.17rem;
|
||||
height: 1.17rem;
|
||||
border-radius: 1.17rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
.profile {
|
||||
flex: 1;
|
||||
padding-top: 0.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;
|
||||
margin-bottom: 0.27rem;
|
||||
span:first-child {
|
||||
font-size: 0.4rem;
|
||||
color: #222;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-right: 0.4rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
span:last-child {
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
vertical-align: text-bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
p.goods_name{
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
span:last-child {
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
vertical-align: text-bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
p.goods_name {
|
||||
font-size: 0.32rem;
|
||||
max-width: 4rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.result {
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
}
|
||||
.result {
|
||||
font-size: 0.32rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: .13rem 0;
|
||||
padding: 0.13rem 0;
|
||||
text-align: right;
|
||||
.money {
|
||||
font-size: 0.37rem;
|
||||
color: $primary-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.date {
|
||||
font-size: 0.3rem;
|
||||
.money {
|
||||
font-size: 0.37rem;
|
||||
color: #cf9e3b;
|
||||
font-weight: bold;
|
||||
}
|
||||
.date {
|
||||
font-size: 0.3rem;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user