139 lines
2.8 KiB
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> |