jiuyiUniapp/jiuyi2/pages/shop/store/index.vue

139 lines
2.8 KiB
Vue

<script setup>
// 店铺首页
import {
ref
} from 'vue'
import {
onLoad,
onPageScroll
} from '@dcloudio/uni-app';
// 顶部
import apex from '@/components/header/apex.vue'
// 商品列表
import productList from '@/components/shop/productList/productList'
// 分类选项
const filteredList = ref([{
label: '默认',
value: 1,
isUpDown: false,
slot: null
}, {
label: '销量',
value: 2,
isUpDown: false,
slot: null
}, {
label: '新品',
value: 3,
isUpDown: false,
slot: null
}, {
label: '价格',
value: 4,
isUpDown: true,
slot: null
}])
// 顶部导航背景颜色
const apexBgColor = ref('#ffffff00')
// 店铺id
const storeId = ref('')
onLoad((option) => {
if (option.storeId) storeId.value = option.storeId
})
onPageScroll((ev) => {
apexBgColor.value = ev.scrollTop > 44 ? '#fff' : '#ffffff00'
})
// 获取店铺详情
function getDetail() {
//
api.shop.merchant({
path: [id.value],
}).then(rs => {
if (rs.code == 200) {
return
}
util.alert({
content: rs.msg,
showCancel: false
});
})
}
</script>
<template>
<view class="app">
<!-- 个人中心 我的卡片 -->
<apex :bgColor="apexBgColor" mode="flex">
<template #content>
<view class="search df jcr">
<view class="">
<image class="wh50" src="/static/share2.png" mode="aspectFit" />
</view>
</view>
</template>
</apex>
<!-- -->
<view class="shopHeaderBg"></view>
<!-- 店铺卡片 -->
<view class="store pr rows ptb25 plr25 mt40">
<!-- 店铺头像 -->
<image class="wh120 fs0 br10" src="/static/logo.png" mode="aspectFill" />
<!-- 店铺信息 名称 评分 关注数量 -->
<view class="info f1 ml20">
<!-- 店铺名称 -->
<view class="c333 f28">
<text>店铺名称</text>
</view>
<view class="df aic mt10">
<!-- 评分 -->
<view class="f24 c666 df aic" v-if="0">
<uni-rate class="mr10" :value="4.5" :size="12" activeColor="#FF9B27" readonly
:showScore="true"></uni-rate>
<text>4.5</text>
</view>
<!-- 关注数量 -->
<view class="c666 f24">
<text>123关注</text>
</view>
</view>
</view>
<!-- 按钮区 -->
<view class="btns w150">
<view>
<view class="btn ti warmHollow fmid" @click="followButton">
<uni-icons class="mr10" color="#FF9B27" type="plusempty" size="13" />
<text>关注</text>
</view>
</view>
<view class="mt10">
<view class="btn ti warmHollow fmid">
<image class="kefu wh30" src="/static/customer-service1.png" mode="aspectFit" />
<text>客服</text>
</view>
</view>
</view>
</view>
<!-- 商品列表 -->
<view class="product oh ptb30 plr30">
<productList ref="product" />
</view>
</view>
</template>
<style lang="scss" scoped>
//
.store {
// margin-top: -50rpx;
}
</style>