123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- <template>
- <view>
- <view class="page-content clearfix" v-for="(page, index) in list" :key="index">
- <view class="tui-group-title">
- <view class="tui-group-name">{{ page.floorTitle }}</view>
- <view class="tui-group-tabs">
- <view class="tui-group-tabs-left">
- <view class="tui-tabs-item" @click="handleNavTo(page,1)">产品</view>
- <view class="tui-tabs-item" @click="handleNavTo(page,2)">仪器</view>
- <view class="tui-tabs-item" @click="handleNavTo(page,3)">耗材配件</view>
- </view>
- <view class="tui-group-tabs-right" @click="handleNavTo(page,0)">
- <text>更多</text>
- <text class="iconfont icon-xiayibu"></text>
- </view>
- </view>
- </view>
- <templateZ :pageData="page" :userIdentity="userIdentity"></templateZ>
- </view>
- </view>
- </template>
- <script>
- import templateZ from './template-page/templateZ.vue'
- export default {
- name: 'zoneFloor',
- components: {
- templateZ
- },
- props: {
- list: {
- type: Array
- },
- pageType: {
- type: Number
- },
- userIdentity: {
- type: Number
- }
- },
- data() {
- return {
- pageFloorList: []
- }
- },
- created() {
-
- },
- watch: {
- list: {
- handler: function (el) {//监听对象的变换使用 function,箭头函数容易出现this指向不正确
- this.list = el
- },
- deep: true
- }
- },
- methods: {
- handleNavTo(page,typeSort) {
- //跳转
- this.$api.navigateTo(`/pages/goods/good-floor-zone?zoneId=${page.id}&typeSort=${typeSort}&floorTitle=${page.floorTitle}`)
- }
- }
- }
- </script>
- <style lang="scss">
- .page-content {
- background-color: #F7F7F7;
- width: 100%;
- height: auto;
- box-sizing: border-box;
- padding: 0 24rpx;
- }
- .tui-group-title {
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 100rpx;
- box-sizing: border-box;
- .tui-group-name {
- font-size: $font-size-36;
- font-weight: bold;
- color: #333333;
- }
- .tui-group-tabs{
- height: 100rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .tui-group-tabs-left{
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-right: 20rpx;
- .tui-tabs-item{
- display: flex;
- font-size: $font-size-28;
- line-height: 100rpx;
- color: #333;
- margin: 0 15rpx;
- }
- }
- .tui-group-tabs-right{
- font-size: $font-size-24;
- line-height: 100rpx;
- color: #999999;
- .icon-xiayibu {
- font-size: $font-size-30;
- color: #999999;
- }
- }
- }
- }
- </style>
|