ProductDesc.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <view class="div ui-detail" ref="mbBody">
  3. <view class="title" id="mbBody"><text class="border"></text><text class="titleinfo">宝贝详情</text><text class="border"></text></view>
  4. <view class="div">
  5. <desc-item
  6. :mbBody="mbBody"
  7. :detailInfo="detailInfo"
  8. v-if="detailInfo"
  9. ></desc-item>
  10. </view>
  11. <v-back-top v-if="isshowBacktop" :target="target"></v-back-top>
  12. </view>
  13. </template>
  14. <script>
  15. import { mapState } from 'vuex'
  16. import DescItem from './DescItem'
  17. import BackTop from './DetailBackTop'
  18. export default {
  19. data () {
  20. return {
  21. isshowBacktop: false
  22. }
  23. },
  24. mounted () {
  25. setTimeout(() => {
  26. const mbBodyinfo = uni.createSelectorQuery().in(this)
  27. mbBodyinfo.select('#mbBody').boundingClientRect(res =>{
  28. this.$emit('mbBodyposition',res.top - res.height);
  29. }).exec();
  30. }, 500);
  31. },
  32. components: {
  33. 'desc-item': DescItem,
  34. 'v-back-top': BackTop
  35. },
  36. computed: mapState({
  37. detailInfo: state => state.goodsdetail.detailInfo,
  38. mbBody: state => state.goodsdetail.mbBody
  39. }),
  40. methods: {
  41. }
  42. }
  43. </script>
  44. <style lang="scss" scoped>
  45. .ui-detail {
  46. margin: .5rem 0;
  47. min-height: 10rem;
  48. position: relative;
  49. .title{
  50. font-size: .8rem;
  51. text-align: center;
  52. padding: 0.3rem 0;
  53. display: flex;
  54. align-items: center;
  55. justify-content: center;
  56. .border{
  57. width: 3rem;
  58. height: 1px;
  59. background-color: #eee;
  60. margin: 0 .5rem;
  61. }
  62. }
  63. }
  64. </style>