giftCard.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <div class="gift_card">
  3. <van-row
  4. style="border-bottom: solid 1px #e4e4e4; padding:5px"
  5. >
  6. <van-col span="8">
  7. <img :src="presentImg" style="max-width: 100%"/>
  8. </van-col>
  9. <van-col span="16">
  10. <van-row type="flex" justify="space-between">
  11. <van-col class="c"><p><strong>{{owner ? '对方' : '我'}}的礼物</strong></p></van-col>
  12. <van-col class="c"><p>{{place[placeId]}}</p></van-col>
  13. </van-row>
  14. <van-row type="flex" justify="space-between">
  15. <van-col class="c"><p>匹配性别</p></van-col>
  16. <van-col class="c"><p>{{genders[gender]}}</p></van-col>
  17. </van-row>
  18. <van-row type="flex" justify="space-between">
  19. <van-col class="c"><p>礼物状态</p></van-col>
  20. <van-col class="c" ><p :style="{ color: statusColor[status] }">{{statusString[status]}}</p></van-col>
  21. </van-row>
  22. <van-row type="flex" justify="space-between">
  23. <van-col class="c"><p>微信</p></van-col>
  24. <van-col class="c">
  25. <p :style="owner ? 'color: #778899' : 'color: #191970' + '; float: left'" @click="toMe">
  26. {{wechat}}</p>
  27. <van-button round size="mini"
  28. v-if="owner" style="margin-left: 5px"
  29. v-clipboard:copy="wechat"
  30. v-clipboard:success="onCopy"
  31. v-clipboard:error="onError"
  32. >复制</van-button>
  33. </van-col>
  34. </van-row>
  35. </van-col>
  36. </van-row>
  37. <p style="text-align: left; font-size: 100%"><strong>{{presentName}}</strong></p>
  38. <p style="text-align: left">{{presentDesc}}</p>
  39. </div>
  40. </template>
  41. <script>
  42. import { Card, Row, Col, Button } from 'vant';
  43. export default {
  44. name: "giftCard", //gift-card
  45. // luaOps 'lua-ops
  46. components: {
  47. [Card.name]: Card,
  48. [Row.name]: Row, [Col.name]: Col,
  49. [Button.name]: Button,
  50. },
  51. data() {
  52. return {
  53. place: ['南区', '斋区', '西南', '桂庙', '西丽'],
  54. statusString: ['审核中', '匹配中', '匹配成功', '交换成功', '审核失败'],
  55. statusColor: ['#fd6740', '#00ff00', '#00bfff', '#00fa9a', '#ff0000'],
  56. genders: ['未知', '男', '女']
  57. }
  58. },
  59. props: {
  60. presentImg: {
  61. type: String,
  62. default: "http://pjczv6ygf.bkt.clouddn.com/image_load_fail.jpg"
  63. },
  64. presentName: {
  65. type: String,
  66. default: "礼物名称"
  67. },
  68. presentDesc: {
  69. type: String,
  70. default: '这是一本我很喜欢的书,我曾经把这本书反反复复看了三遍,真的非常推荐。如果你也是科幻迷,你肯定会喜欢哒。圣诞快乐,喜欢这本书可以和我一起讨论哦!'
  71. },
  72. owner: {
  73. type: Number,
  74. default: 0 // 0: 我的; 1: 对方的
  75. },
  76. placeId: {
  77. type: Number,
  78. default: 0
  79. },
  80. gender: {
  81. type: Number,
  82. default: 0
  83. },
  84. status: {
  85. type: Number,
  86. default: 0
  87. },
  88. wechat: {
  89. type: String,
  90. default: 'undefined id'
  91. }
  92. },
  93. methods: {
  94. onCopy: function (e) {
  95. alert('You just copied: ' + e.text)
  96. },
  97. onError: function (e) {
  98. alert('Failed to copy texts')
  99. },
  100. toMe: function () {
  101. if (this.owner === 0) this.$router.push('me');
  102. }
  103. }
  104. }
  105. </script>
  106. <style scoped>
  107. .c {
  108. height: 25px;
  109. margin-left: 10px;
  110. margin-right: 5px;
  111. }
  112. p {
  113. margin: 0;
  114. font-size: 80%;
  115. }
  116. .gift_card {
  117. margin: 20px 20px;
  118. background-color: white;
  119. padding: 10px;
  120. }
  121. </style>