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

<script setup>
// 店铺首页
import {
	computed,
	reactive,
	ref,
	defineExpose,
} from 'vue'
import {
	onLoad,
	onPageScroll
} from '@dcloudio/uni-app';

// 工具库
import util from '@/common/js/util.js'
// 顶部
import apex from '@/components/header/apex.vue'
// 商品列表
import productList from '@/components/shop/productList/productList'

import api from '@/api/index.js'

// 分类选项
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('')
// 详情
const detail = reactive({})
// 参数
const listPrototype = reactive({
	pageSize: 10,
	pageNum: 1,
	total: 0,
	// 商户主键
	merId: '',
	data: [],
})

// 用户信息
const userinfo = computed(() => uni.$store.state.userinfo || {})
onLoad((option) => {
	if (option.storeId) storeId.value = option.storeId
	getDetail()
	listPrototype.merId = storeId.value
	getList()
})

onPageScroll((ev) => {
	apexBgColor.value = ev.scrollTop > 44 ? '#fff' : '#ffffff00'
})

// 获取店铺详情
function getDetail() {
	api.shop.merchant({
		query: {
			merId: storeId.value,
			userId: userinfo.value.id,
		}
	}).then(rs => {
		if (rs.code == 200) {
			Object.assign(detail, {}, rs.data)
			return
		}
		util.alert({
			content: rs.msg,
			showCancel: false
		});
	})
}
// 收藏店铺
function handleCollectStore() {
	api.shop.followShop({
		data: {
			shopId: storeId.value,
			status: {
				0: 1,
				1: 0,
			}[detail.isFollow]
		}
	}).then(rs => {
		if (rs.code == 200) {
			// 关注状态
			detail.isFollow = {
				0: 1,
				1: 0,
			}[detail.isFollow]
			// 关注数量
			detail.followNum = rs.data

			getDetail()
			return
		}
		util.alert({
			content: rs.msg,
			showCancel: false,
		})
	})
}
// 客服
function toCustomer() {
	uni.navigateTo({
		url: util.setUrl('/pages/mine/setting/feedback')
	})
	// api.shop.getCustomerService({ merchantId: storeId.value }).then(rs => {
	// 	if (rs.code == 200) {
	// 		let param = {};
	// 		param.type = 'C2C'
	// 		param.name = `${detail.name}`
	// 		param.msgId = `${rs.data.serviceId}`
	// 		param.isCustomer = true

	// 		util.toChat(param)

	// 		uni.navigateTo({
	// 			url: util.setUrl('/pages/news/chat/chat', param)
	// 		})
	// 	} else {
	// 		util.alert(rs.msg)
	// 	}
	// })

}
// 商品列表
function getList() {

	api.shop.getProduct({
		data: {
			pageSize: listPrototype.pageSize,
			pageNum: listPrototype.pageNum,
			// 商户主键
			merId: listPrototype.merId,
		},
	}).then(rs => {
		if (rs.code == 200) {
			if (listPrototype.pageNum == 1) listPrototype.data.length = []
			listPrototype.data.push(...rs.rows)
			listPrototype.total = rs.total
			return
		}
		util.alert({
			content: rs.msg,
			showCancel: false,
		})
	}).finally(rs => {
		uni.stopPullDownRefresh()
	})
}
// 点击列表项
function handleItem(item) {
	uni.navigateTo({
		url: util.setUrl('/pages/shop/commodity/index', {
			productId: item.id
		})
	})
}
// 重载列表
function refreshList() {
	listPrototype.pageNum = 1
	listPrototype.total = 0
	getList()
}

// 加载更多列表
function getMoreList() {
	if (listPrototype.total <= listPrototype.data.length) return
	listPrototype.pageNum++
	getList()
}

defineExpose({
	refreshList,
	getMoreList,
})
</script>

<template>
	<view class="app">
		<!-- 个人中心 我的卡片 -->
		<apex :bgColor="apexBgColor" mode="flex">
			<template #content>
				<view class="search df jcr">
					<view class="" v-if="0">
						<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="detail.rectangleLogo" mode="aspectFill" />
			<!-- 店铺信息 名称 评分 关注数量 -->
			<view class="info f1 ml20">
				<!-- 店铺名称 -->
				<view class="c333 f28">
					<text>{{ detail.name }}</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>{{ detail.followNum }}关注</text>
					</view>
				</view>
			</view>

			<!-- 按钮区 -->
			<view class="btns w150">
				<view>
					<view @click="handleCollectStore" class="btn sm warm fmid fdr plr30">
						<uni-icons class="mr10" color="#fff" type="plusempty" size="13" v-if="detail.isFollow != 1" />
						<text class="cfff f28" v-else>已</text>
						<text class="cfff f28">关注</text>
					</view>
				</view>

				<view class="mt10" @click="toCustomer">
					<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">
			<view class="list">
				<view class="item oh bfff br20" v-for="(item, index) in listPrototype.data" :key="index"
					@click="handleItem(item)">
					<!-- 需要展示的图 -->
					<image class="poster" :src="item.sliderImage.split(',')[0]" mode="aspectFill" />

					<!-- 标题 -->
					<view class="main plr20">
						<view class="title mtb10 thd c333 f30">{{ item.name }}</view>
						<view class="info mtb10 df aic">
							<!-- 价格 -->
							<view class="price thd wsn cFF9B27">
								<text class="txt f20">￥</text>
								<text class="txt f36">{{ item.price }}</text>
							</view>
							<!-- 销量 -->
							<view class="sales fs0 thd wsn ml10 c999 f26">销量：{{ item.sales }}</view>
							<view class="f1"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
// 卡片
.list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20rpx;

	// 单个
	.item {
		.poster {
			width: 100%;
			height: 340rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
	}
}
</style>