123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- <template>
- <div class="gift_card">
- <van-row
- style="border-bottom: solid 1px #e4e4e4; padding:5px"
- >
- <van-col span="8">
- <img :src="presentImg" style="max-width: 100%"/>
- </van-col>
- <van-col span="16">
- <van-row type="flex" justify="space-between">
- <van-col class="c"><p><strong>{{owner ? '对方' : '我'}}的礼物</strong></p></van-col>
- <van-col class="c"><p>{{place[placeId]}}</p></van-col>
- </van-row>
- <van-row type="flex" justify="space-between">
- <van-col class="c"><p>匹配性别</p></van-col>
- <van-col class="c"><p>{{genders[gender]}}</p></van-col>
- </van-row>
- <van-row type="flex" justify="space-between">
- <van-col class="c"><p>礼物状态</p></van-col>
- <van-col class="c" ><p :style="{ color: statusColor[status] }">{{statusString[status]}}</p></van-col>
- </van-row>
- <van-row type="flex" justify="space-between">
- <van-col class="c"><p>微信</p></van-col>
- <van-col class="c">
- <p :style="owner ? 'color: #778899' : 'color: #191970' + '; float: left'" @click="toMe">
- {{wechat}}</p>
- <van-button round size="mini"
- v-if="owner" style="margin-left: 5px"
- v-clipboard:copy="wechat"
- v-clipboard:success="onCopy"
- v-clipboard:error="onError"
- >复制</van-button>
- </van-col>
- </van-row>
- </van-col>
- </van-row>
- <p style="text-align: left; font-size: 100%"><strong>{{presentName}}</strong></p>
- <p style="text-align: left">{{presentDesc}}</p>
- </div>
- </template>
- <script>
- import { Card, Row, Col, Button } from 'vant';
- export default {
- name: "giftCard", //gift-card
- // luaOps 'lua-ops
- components: {
- [Card.name]: Card,
- [Row.name]: Row, [Col.name]: Col,
- [Button.name]: Button,
- },
- data() {
- return {
- place: ['南区', '斋区', '西南', '桂庙', '西丽'],
- statusString: ['审核中', '匹配中', '匹配成功', '交换成功', '审核失败'],
- statusColor: ['#fd6740', '#00ff00', '#00bfff', '#00fa9a', '#ff0000'],
- genders: ['未知', '男', '女']
- }
- },
- props: {
- presentImg: {
- type: String,
- default: "http://pjczv6ygf.bkt.clouddn.com/image_load_fail.jpg"
- },
- presentName: {
- type: String,
- default: "礼物名称"
- },
- presentDesc: {
- type: String,
- default: '这是一本我很喜欢的书,我曾经把这本书反反复复看了三遍,真的非常推荐。如果你也是科幻迷,你肯定会喜欢哒。圣诞快乐,喜欢这本书可以和我一起讨论哦!'
- },
- owner: {
- type: Number,
- default: 0 // 0: 我的; 1: 对方的
- },
- placeId: {
- type: Number,
- default: 0
- },
- gender: {
- type: Number,
- default: 0
- },
- status: {
- type: Number,
- default: 0
- },
- wechat: {
- type: String,
- default: 'undefined id'
- }
- },
- methods: {
- onCopy: function (e) {
- alert('You just copied: ' + e.text)
- },
- onError: function (e) {
- alert('Failed to copy texts')
- },
- toMe: function () {
- if (this.owner === 0) this.$router.push('me');
- }
- }
- }
- </script>
- <style scoped>
- .c {
- height: 25px;
- margin-left: 10px;
- margin-right: 5px;
- }
- p {
- margin: 0;
- font-size: 80%;
- }
- .gift_card {
- margin: 20px 20px;
- background-color: white;
- padding: 10px;
- }
- </style>
|