app-join-member.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <view class="app-goods-join-member">
  3. <app-jump-button url="/pages/member/index/index" open_type="navigate">
  4. <view class="member dir-left cross-center">
  5. <view class="box-grow-0">加入会员,享会员价</view>
  6. <view class="box-grow-1 price" :class="getTheme + '-m-text ' + getTheme">
  7. <app-price
  8. type="text-price-all"
  9. :max="memberMaxPrice"
  10. :min="memberMinPrice"
  11. :default-price="price"
  12. ></app-price>
  13. </view>
  14. <view class="dir-left cross-center box-grow-0">
  15. <view>了解更多</view>
  16. <image src="../../../static/image/icon/arrow-right.png" class="right"></image>
  17. </view>
  18. </view>
  19. </app-jump-button>
  20. </view>
  21. </template>
  22. <script>
  23. import {mapGetters} from 'vuex';
  24. import appPrice from "../../page-component/goods/app-price.vue";
  25. export default {
  26. name: "app-goods-join-member",
  27. components: {
  28. 'app-price': appPrice,
  29. },
  30. props: {
  31. memberMaxPrice: String,
  32. memberMinPrice: String,
  33. price: String,
  34. },
  35. computed: {
  36. ...mapGetters('mallConfig', {
  37. getTheme: 'getTheme',
  38. }),
  39. },
  40. }
  41. </script>
  42. <style scoped lang="scss">
  43. .member {
  44. background-color: #faf2d8;
  45. width: 100%;
  46. height: #{80rpx};
  47. padding: 0 #{24rpx};
  48. font-size: $uni-font-size-weak-one;
  49. margin: #{24rpx} 0;
  50. border-radius: #{16rpx};
  51. .right {
  52. width: #{12rpx};
  53. height: #{22rpx};
  54. margin-left: #{16rpx};
  55. }
  56. .price {
  57. font-size: $uni-font-size-general-one;
  58. }
  59. }
  60. </style>