推拿小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

110 lines
2.1 KiB

  1. <template>
  2. <view class="card flex store">
  3. <image class="store-img" :src="data.imgUrl"></image>
  4. <view class="store-info">
  5. <view class="store-name">{{ data.name }}</view>
  6. <view class="store-desc">{{ `地址:${data.address}` }}</view>
  7. <view class="store-desc">{{ `联系方式:${data.phone}` }}</view>
  8. <view class="store-contact">
  9. <button plain class="flex btn" @click="onCall(data.phone)">
  10. <image class="btn-icon" src="../../static/voucher/icon-phone.png" mode="widthFix"></image>
  11. <text>电话</text>
  12. </button>
  13. <button plain class="flex btn" @click="openLocation(data.latitude, data.longitude)">
  14. <image class="btn-icon" src="../../static/voucher/icon-address.png" mode="widthFix"></image>
  15. <text>导航</text>
  16. </button>
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. const TEST_DATA = {
  23. id: '001',
  24. imgUrl: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
  25. name: '推拿馆',
  26. address: '湖南省长沙市岳麓区麓云路268号',
  27. latitude: 0,
  28. longitude: 0,
  29. phone: '13425992900'
  30. }
  31. export default {
  32. props: {
  33. data: {
  34. type: Object,
  35. default() {
  36. return TEST_DATA
  37. }
  38. },
  39. },
  40. methods: {
  41. onCall(phoneNumber) {
  42. uni.makePhoneCall({
  43. phoneNumber,
  44. success() {
  45. console.log('安卓拨打成功');
  46. },
  47. fail() {
  48. console.log('安卓拨打失败');
  49. }
  50. })
  51. },
  52. },
  53. }
  54. </script>
  55. <style lang="scss" scoped>
  56. .store {
  57. padding: 22rpx 38rpx 30rpx 30rpx;
  58. &-img {
  59. width: 155rpx;
  60. height: 155rpx;
  61. margin-right: 23rpx;
  62. }
  63. &-info {
  64. flex: 1;
  65. }
  66. &-name {
  67. color: #3B3B3B;
  68. font-size: 28rpx;
  69. font-weight: 700;
  70. }
  71. &-desc {
  72. color: #999999;
  73. font-size: 22rpx;
  74. margin-top: 13rpx;
  75. }
  76. &-contact {
  77. margin-top: 3rpx;
  78. text-align: right;
  79. }
  80. }
  81. .btn {
  82. display: inline-flex;
  83. border: none;
  84. color: $uni-color-light;
  85. font-size: 22rpx;
  86. line-height: 30rpx;
  87. & + & {
  88. margin-left: 44rpx;
  89. }
  90. &-icon {
  91. width: 23rpx;
  92. height: 23rpx;
  93. margin-right: 6rpx;
  94. }
  95. }
  96. </style>