首页/详情/评论列表/接口数据接入
This commit is contained in:
邝军华
parent
6d1bcc421c
commit
0b02dc7458
297
components/comment/comment.vue
Normal file
297
components/comment/comment.vue
Normal file
@ -0,0 +1,297 @@
|
|||||||
|
<template>
|
||||||
|
<view class="shop_comment" v-if="sumCount > 0" @click="evals()">
|
||||||
|
<view class="shop_comment_head">
|
||||||
|
<view class="shop_comment_head_title">商品评论({{sumCount >= 10000?'1万+':sumCount}})</view>
|
||||||
|
<view class="shop_comment_head_arrow">全部</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_comment_tag" v-if="reviewTags.length">
|
||||||
|
<view class="shop_comment_item" v-for="(item,index) in reviewTags" :key="index" @click.stop="evals(item.tag)">{{item.tag}}({{item.num}})</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_comment_cont">
|
||||||
|
<view class="shop_comment_cont_ul">
|
||||||
|
<view class="shop_comment_cont_l">
|
||||||
|
<image class="shop_comment_cont_userimg" :src="productReply.avatar" mode="widthFix"></image>
|
||||||
|
<view class="shop_comment_cont_username">{{productReply.nickname}}</view>
|
||||||
|
<view class="shop_comment_cont_amount">
|
||||||
|
<image class="shop_comment_cont_img" :src="productReply.evalImg" lazy-load mode="widthFix"></image>{{productReply.evalName}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_comment_cont_ip"></view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_comment_m">
|
||||||
|
<view class="shop_comment_title"><text>{{productReply.comment}}</text></view>
|
||||||
|
<view class="shop_comment_item" >
|
||||||
|
<image v-for="(img,index) in productReply.pics" :key="index" class="shop_comment_itemImg" :src="img" mode="widthFix" @click.stop="previewImage(index)"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 常见问题 -->
|
||||||
|
<view class="shop_comment" v-if="problemNum > 0" @click="faqList">
|
||||||
|
<view class="shop_comment_head">
|
||||||
|
<view class="shop_comment_head_title">常见问题({{problemNum}})</view>
|
||||||
|
<view class="shop_comment_head_arrow">全部</view>
|
||||||
|
</view>
|
||||||
|
<view class="faqlist">
|
||||||
|
<view class="shop_ask shop_padding"><text>{{productProblem.content}}</text></view>
|
||||||
|
<!-- <view class="shop_answer shop_padding"><text>虾头中含有一种叫做酪氨酸酶的酶，当虾死亡后，这种酶会催化虾体内的酪氨酸生成黑色素，导致虾头变黑。这是一种自然现象，通常不影响虾肉的食用安全。</text></view> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed,ref,onMounted } from 'vue';
|
||||||
|
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||||||
|
import { storeToRefs } from 'pinia';//实现解构付值
|
||||||
|
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||||||
|
const counterStore = useCounterStore(); // 使用 Store
|
||||||
|
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||||
|
const { token } = storeToRefs(counterStore);
|
||||||
|
//使用pinia：方法还是从原来的counterStore中解构赋值
|
||||||
|
const { replyconfig,replyproduct } = counterStore;
|
||||||
|
const problemNum = ref('');
|
||||||
|
const productProblem = ref({});
|
||||||
|
const productReply = ref({});
|
||||||
|
const replyChance = ref('');
|
||||||
|
const reviewTags = ref([]);
|
||||||
|
const picsCount = ref('');
|
||||||
|
const sumCount = ref('');
|
||||||
|
const props = defineProps({
|
||||||
|
apiType:{
|
||||||
|
type:Number,
|
||||||
|
default:1 //1为首页5为热门推荐
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const api_replyproduct=()=>{
|
||||||
|
const params = {}
|
||||||
|
return replyproduct(props.apiType,params,token.value).then(({data}) => {
|
||||||
|
problemNum.value = data.problemNum;
|
||||||
|
productProblem.value = data.productProblem;
|
||||||
|
if(data.sumCount){
|
||||||
|
if(data.productReply.score >= 4){
|
||||||
|
data.productReply.evalName = '好评';
|
||||||
|
data.productReply.evalImg = '../../static/eval/praise.png';
|
||||||
|
}else if(data.productReply.score > 2 && data.productReply.score < 4){
|
||||||
|
data.productReply.evalName = '中评';
|
||||||
|
data.productReply.evalImg = '../../static/eval/praise.png';
|
||||||
|
}else if(data.productReply.score <= 2){
|
||||||
|
data.productReply.evalName = '差评';
|
||||||
|
data.productReply.evalImg = '../../static/eval/praise.png';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
productReply.value = data.productReply;
|
||||||
|
replyChance.value = data.replyChance;
|
||||||
|
}).catch(({message}) => {
|
||||||
|
uni.showModal({
|
||||||
|
content:message,
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const api_replyconfig=()=>{
|
||||||
|
const params = {}
|
||||||
|
return replyconfig(props.apiType,params,token.value).then(({data}) => {
|
||||||
|
reviewTags.value = data.reviewTags;
|
||||||
|
picsCount.value = data.picsCount;
|
||||||
|
sumCount.value = data.sumCount;
|
||||||
|
})
|
||||||
|
.then(()=>api_replyproduct())
|
||||||
|
.catch(({message}) => {
|
||||||
|
uni.showModal({
|
||||||
|
content:message,
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const previewImage=(i)=>{
|
||||||
|
uni.previewImage({
|
||||||
|
current: i,
|
||||||
|
urls:productReply.value.pics
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const evals=(tag)=>{
|
||||||
|
let url = '';
|
||||||
|
if(tag){
|
||||||
|
url=`/shopProDetail/evallist/evallist?productId=${props.apiType}&tag=${tag}`
|
||||||
|
}else{
|
||||||
|
url=`/shopProDetail/evallist/evallist?productId=${props.apiType}`
|
||||||
|
}
|
||||||
|
console.log('url',url);
|
||||||
|
uni.navigateTo({
|
||||||
|
url
|
||||||
|
})
|
||||||
|
};
|
||||||
|
const faqList=()=>{
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/shopProDetail/faqList/faqList?productId=${props.apiType}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//生命周期钩子
|
||||||
|
onMounted(() => {
|
||||||
|
api_replyconfig();
|
||||||
|
});
|
||||||
|
onPullDownRefresh(()=>{
|
||||||
|
api_replyconfig();
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
})
|
||||||
|
onReachBottom(()=>{})
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.shop_comment{
|
||||||
|
background: #FFFFFF;
|
||||||
|
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||||
|
.shop_comment_head{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 40rpx 20rpx 20rpx;
|
||||||
|
.shop_comment_head_title{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.shop_comment_head_arrow{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.shop_comment_head_arrow::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 100%;
|
||||||
|
transform: translate3d(0, -50%, 0) rotate(45deg);
|
||||||
|
width: 13rpx;
|
||||||
|
height: 13rpx;
|
||||||
|
border-top: 3rpx solid #999999;
|
||||||
|
border-right: 3rpx solid #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_comment_tag{
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0rpx 20rpx 0rpx 20rpx;
|
||||||
|
border-bottom: 1rpx solid #f6f6f6;
|
||||||
|
.shop_comment_item{
|
||||||
|
padding: 0rpx 20rpx 0rpx 20rpx;
|
||||||
|
height: 45rpx;
|
||||||
|
background: #FFD7D7;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
border: 1px solid #FFA0A0;
|
||||||
|
color: #FF5D5D;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 23rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_comment_cont{
|
||||||
|
padding: 0rpx 20rpx 0rpx 20rpx;
|
||||||
|
.shop_comment_cont_ul{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
.shop_comment_cont_l{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.shop_comment_cont_userimg{
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
display: block;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
.shop_comment_cont_username{
|
||||||
|
color: #000000;
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
.shop_comment_cont_amount{
|
||||||
|
margin-left: 10rpx;
|
||||||
|
width: 95rpx;
|
||||||
|
height: 37rpx;
|
||||||
|
background: linear-gradient(90deg,#FAEAD3 0%,#FED4AE 100%);
|
||||||
|
border-radius: 4rpx;
|
||||||
|
color: #745030;
|
||||||
|
font-size: 22rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.shop_comment_cont_img{
|
||||||
|
width: 23rpx;
|
||||||
|
height: 23rpx;
|
||||||
|
display: block;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_comment_cont_ip{
|
||||||
|
color: #999;
|
||||||
|
font-size: 23rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_comment_m{
|
||||||
|
overflow: hidden;
|
||||||
|
.shop_comment_title{
|
||||||
|
font-size: 27rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.shop_comment_item{
|
||||||
|
margin: 20rpx 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.shop_comment_itemImg{
|
||||||
|
width: 155rpx;
|
||||||
|
height: 155rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: block;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.faqlist{
|
||||||
|
padding: 0rpx 20rpx 20rpx 20rpx;
|
||||||
|
.shop_ask{
|
||||||
|
font-size: 27rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.shop_answer{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
.shop_padding text{
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.shop_ask::before {
|
||||||
|
vertical-align: middle;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/shopdetail/ask.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10rpx; /* 调整图片与标题的间距 */
|
||||||
|
}
|
||||||
|
.shop_answer::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/shopdetail/answer.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10rpx; /* 调整图片与标题的间距 */
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
364
components/recomGoods/recomGoods.vue
Normal file
364
components/recomGoods/recomGoods.vue
Normal file
@ -0,0 +1,364 @@
|
|||||||
|
<template>
|
||||||
|
<view class="components">
|
||||||
|
<!-- 推荐区域 -->
|
||||||
|
<view class="user_title" v-if="apiType == 5">
|
||||||
|
<text class="user_name">为您推荐</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品区域 -->
|
||||||
|
<view class="shop_view" v-if="shopList.length">
|
||||||
|
<view class="shop_view_ul">
|
||||||
|
<block v-for="(item,index) in shopList" :key="item.id">
|
||||||
|
<block v-if="item.isEven">
|
||||||
|
<view class="shop_view_li shop_view_bcg" v-if="item.type == 1">
|
||||||
|
<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular >
|
||||||
|
<swiper-item class="shop_view_li_swiper_item" v-for="(swiperitem,swiperkey) in item.homeVos[0].items" :key="swiperkey" >
|
||||||
|
<image class="shop_view_li_swiper_img_url" :src="swiperitem.imgUrl" mode="widthFix" @load="imageLoad" lazy-load @click="JumpType(swiperitem)"></image>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_li" v-if="item.type == 0" @click="JumpType(item.id,1)">
|
||||||
|
<view class="shop_view_img">
|
||||||
|
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||||||
|
<view class="shop_view_img_u">
|
||||||
|
<image class="shop_view_img_url" :src="item.image" mode="widthFix" lazy-load="true"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont">
|
||||||
|
<view class="shop_view_cont_title"><text>{{item.storeName}}</text></view>
|
||||||
|
<view class="shop_view_cont_desc"><text>{{item.storeInfo}}</text></view>
|
||||||
|
<view class="shop_view_cont_tag">
|
||||||
|
<view class="shop_view_cont_tag_text" v-if="item.stock <= 10">仅剩{{item.stock}}份</view>
|
||||||
|
<view class="shop_view_cont_tag_text" v-for="(t,g) in item.tagList" :key="g">{{t}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont_bottom">
|
||||||
|
<view class="shop_view_cont_price price">{{item.price}}<text class="market_name prices">{{item.otPrice}}</text></view>
|
||||||
|
<view class="shop_view_cont_cart" @click.stop="addCart(item,1)">
|
||||||
|
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_ul">
|
||||||
|
<block v-for="(item,index) in shopList" :key="item.id">
|
||||||
|
<block v-if="!item.isEven">
|
||||||
|
<view class="shop_view_li shop_view_bcg" v-if="item.type == 1">
|
||||||
|
<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular >
|
||||||
|
<swiper-item class="shop_view_li_swiper_item" v-for="(swiperitem,swiperkey) in item.homeVos[0].items" :key="swiperkey" >
|
||||||
|
<image class="shop_view_li_swiper_img_url" :src="swiperitem.imgUrl" mode="widthFix" lazy-load @load="imageLoad" @click="JumpType(swiperitem)"></image>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_li" v-if="item.type == 0" @click="JumpType(item.id,1)">
|
||||||
|
<view class="shop_view_img">
|
||||||
|
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
||||||
|
<view class="shop_view_img_u">
|
||||||
|
<image class="shop_view_img_url" :src="item.image" mode="widthFix" lazy-load="true"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont">
|
||||||
|
<view class="shop_view_cont_title"><text>{{item.storeName}}</text></view>
|
||||||
|
<view class="shop_view_cont_desc"><text>{{item.storeInfo}}</text></view>
|
||||||
|
<view class="shop_view_cont_tag">
|
||||||
|
<view class="shop_view_cont_tag_text" v-if="item.stock <= 10">仅剩{{item.stock}}份</view>
|
||||||
|
<view class="shop_view_cont_tag_text" v-for="(t,g) in item.tagList" :key="g">{{t}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="shop_view_cont_bottom">
|
||||||
|
<view class="shop_view_cont_price price">{{item.price}}<text class="market_name prices">{{item.otPrice}}</text></view>
|
||||||
|
<view class="shop_view_cont_cart" @click.stop="addCart(item,1)">
|
||||||
|
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="load_desc">{{decs}}</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed,ref,onMounted } from 'vue';
|
||||||
|
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||||||
|
import { storeToRefs } from 'pinia';//实现解构付值
|
||||||
|
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||||||
|
const counterStore = useCounterStore(); // 使用 Store
|
||||||
|
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||||
|
const { token } = storeToRefs(counterStore);
|
||||||
|
//使用pinia：方法还是从原来的counterStore中解构赋值
|
||||||
|
const { frontproduct } = counterStore;
|
||||||
|
const shopList = ref([]);
|
||||||
|
const total = ref(0);
|
||||||
|
const decs = ref('');
|
||||||
|
const pages = ref(0);
|
||||||
|
const limits = ref(10);
|
||||||
|
const props = defineProps({
|
||||||
|
apiType:{
|
||||||
|
type:Number,
|
||||||
|
default:1 //1为首页5为热门推荐
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const api_product=()=>{
|
||||||
|
pages.value = pages.value + 1;
|
||||||
|
decs.value = "—— 加载中... ——";
|
||||||
|
if(shopList.value.length > 0 && shopList.value.length >= total.value){
|
||||||
|
decs.value = "—— 嗷呜，已经到底啦 ——";
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const params = {
|
||||||
|
page:pages.value,
|
||||||
|
limit:limits.value
|
||||||
|
}
|
||||||
|
return frontproduct(props.apiType,params,token.value).then(({data}) => {
|
||||||
|
total.value = data.total;
|
||||||
|
decs.value = '—— 上拉加载更多 ——'
|
||||||
|
data.list.forEach((item,index)=>{
|
||||||
|
item.isEven = index % 2 === 0
|
||||||
|
})
|
||||||
|
shopList.value = shopList.value.concat(data.list);
|
||||||
|
if(shopList.value < total.value){
|
||||||
|
decs.value = '—— 上拉加载更多 ——'
|
||||||
|
}else{
|
||||||
|
decs.value = '—— 嗷呜，已经到底啦 ——';
|
||||||
|
}
|
||||||
|
}).catch(({message}) => {
|
||||||
|
uni.showModal({
|
||||||
|
content:message,
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//跳转统一处理
|
||||||
|
const JumpType=(item,type)=>{
|
||||||
|
if(type == 1){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/shopProDetail/detail/detail?id=${item}`//商品详情
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
const { jumpUrl,jumpIds,jumpType } = item;
|
||||||
|
if(jumpType == 0 || jumpType == 2 || jumpType == 4) return false;
|
||||||
|
let url = "";
|
||||||
|
if(jumpType == 1){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/shopProDetail/detail/detail?id=${jumpIds}`//商品详情
|
||||||
|
})
|
||||||
|
}else if(jumpType == 3){
|
||||||
|
uni.switchTab({
|
||||||
|
url:`/pages/classify/classify`//商品列表
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//加购物车
|
||||||
|
const addCart=(i,type)=>{
|
||||||
|
const { jumpIds,productInfo,specType } = i;
|
||||||
|
let specTypes = false;
|
||||||
|
if(type){
|
||||||
|
specTypes = specType;
|
||||||
|
}else{
|
||||||
|
specTypes = productInfo.specType;
|
||||||
|
}
|
||||||
|
if(specTypes){
|
||||||
|
console.log('多规格弹窗选类加购');
|
||||||
|
}else{
|
||||||
|
console.log('单规格直接加购')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//生命周期钩子
|
||||||
|
onMounted(() => {
|
||||||
|
api_product();
|
||||||
|
});
|
||||||
|
onPullDownRefresh(()=>{
|
||||||
|
shopList.value = [];
|
||||||
|
total.value = 0;
|
||||||
|
decs.value = '';
|
||||||
|
pages.value = 0;
|
||||||
|
api_product();
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
})
|
||||||
|
onReachBottom(()=>{
|
||||||
|
api_product();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.user_title{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 60rpx;
|
||||||
|
.user_name{
|
||||||
|
color: #FF0000;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0 10rpx 0 10rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user_title::before{
|
||||||
|
content: "";
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/user/leftimg.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
.user_title::after{
|
||||||
|
vertical-align: middle;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('../../static/user/rightimg.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
// 商品区域样式
|
||||||
|
.shop_view{
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding: 13rpx 20rpx 0rpx 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.shop_view_ul{
|
||||||
|
width: 346rpx;
|
||||||
|
.shop_view_li{
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
.shop_view_li_swiper{
|
||||||
|
width: 100%;
|
||||||
|
height: 504rpx;
|
||||||
|
.shop_view_li_swiper_item{
|
||||||
|
width: 100%;
|
||||||
|
.shop_view_li_swiper_img_url{
|
||||||
|
width: 100%;
|
||||||
|
height: 504rpx;
|
||||||
|
display: block;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_view_img{
|
||||||
|
// width: 100%;
|
||||||
|
position: relative;
|
||||||
|
padding: 10rpx;
|
||||||
|
.shop_view_tag{
|
||||||
|
width: 66rpx;
|
||||||
|
height: 42rpx;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
right: -15rpx;
|
||||||
|
top: 20rpx;
|
||||||
|
background: url(../../static/tag_img.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.shop_view_tag_text{
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
height: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_view_img_u{
|
||||||
|
width: 100%;
|
||||||
|
.shop_view_img_url{
|
||||||
|
width: 100%;
|
||||||
|
height: 300rpx;
|
||||||
|
display: block;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_view_cont{
|
||||||
|
padding: 20rpx;
|
||||||
|
.shop_view_cont_title{
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #000000;
|
||||||
|
min-height: 80rpx;
|
||||||
|
}
|
||||||
|
.shop_view_cont_title text{
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.shop_view_cont_desc{
|
||||||
|
color: #666666;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
.shop_view_cont_desc text{
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.shop_view_cont_tag{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.shop_view_cont_tag_text{
|
||||||
|
border-radius: 6rpx;
|
||||||
|
border: 1px solid #FF6868;
|
||||||
|
padding: 0rpx 10rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
color: #ff6868;
|
||||||
|
font-size: 18rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_view_cont_bottom{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.shop_view_cont_price{
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: red;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.shop_view_cont_cart{
|
||||||
|
width: 65rpx;
|
||||||
|
height: 65rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.shop_view_cont_cart_img{
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop_view_bcg{
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.load_desc{
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #aaa;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 30rpx;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -87,7 +87,8 @@
|
|||||||
"path": "detail/detail",
|
"path": "detail/detail",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<view class="head_location head_location_active" @click="location()"><text class="location_title">人间都汇·汤泉养生</text></view>
|
<view class="head_location head_location_active" @click="location()"><text class="location_title">人间都汇·汤泉养生</text></view>
|
||||||
<view class="head_search" :style="{'height':statusHeight+8+'px'}" @click="onSearch">
|
<view class="head_search" :style="{'height':statusHeight+8+'px'}" @click="onSearch">
|
||||||
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
|
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
|
||||||
<input class="head_search_input" disabled="true" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
|
<input class="head_search_input" disabled="true" type="text" placeholder="请输入搜索内容" />
|
||||||
<view class="head_search_btn">搜索</view>
|
<view class="head_search_btn">搜索</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -38,242 +38,33 @@
|
|||||||
<!-- 滚动区域 -->
|
<!-- 滚动区域 -->
|
||||||
<view class="scroll_view">
|
<view class="scroll_view">
|
||||||
<scroll-view class="typescoll" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
<scroll-view class="typescoll" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||||||
<view class="scroll_view_li">
|
<view class="scroll_view_li" v-for="(item,index) in homeList" :key="index">
|
||||||
<view class="scroll_view_banner">
|
<view class="scroll_view_banner" @click="JumpType(item)">
|
||||||
<image class="scroll_view_bannerimg" src="../../static/Intersect@2x.jpg" mode="widthFix"></image>
|
<image class="scroll_view_bannerimg" :src="item.imgUrl" mode="widthFix" lazy-load="true"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll_view_shop" @click="goDetail()">
|
<view class="scroll_view_shop" v-for="(i,dex) in item.items" :key="dex" @click="JumpType(i)">
|
||||||
<view class="scroll_view_shop_l">
|
<view class="scroll_view_shop_l">
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no1.png"></image>
|
<image class="scroll_view_shop_no" :src="`../../static/index/no${dex+1}.png`"></image>
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
<image class="scroll_view_shop_img" :src="i.imgUrl" mode="widthFix" lazy-load="true"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll_view_shop_r">
|
<view class="scroll_view_shop_r">
|
||||||
<view class="scroll_view_shop_title">双人餐1<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
<view class="scroll_view_shop_title">{{i.name}}<text class="scroll_view_shop_desc">{{i.title}}</text></view>
|
||||||
<view class="scroll_view_shop_tag">
|
<view class="scroll_view_shop_tag" v-if="i.productInfo.tagList.length">
|
||||||
<view class="scroll_view_shop_li">半小时送达</view>
|
<view class="scroll_view_shop_li" v-for="(t,g) in i.productInfo.tagList" :key="g">{{t}}</view>
|
||||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
|
||||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll_view_shop_bottom">
|
<view class="scroll_view_shop_bottom">
|
||||||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
<view class="scroll_view_shop_price price">{{i.productInfo.price}}<text class="market_name prices">{{i.productInfo.otPrice}}</text></view>
|
||||||
<view class="scroll_view_shop_cart">
|
<view class="scroll_view_shop_cart" @click.stop="addCart(i)">
|
||||||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop" @click="goDetail()">
|
|
||||||
<view class="scroll_view_shop_l">
|
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no2.png"></image>
|
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop_r">
|
|
||||||
<view class="scroll_view_shop_title">双人餐2<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
|
||||||
<view class="scroll_view_shop_tag">
|
|
||||||
<view class="scroll_view_shop_li">半小时送达</view>
|
|
||||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop_bottom">
|
|
||||||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="scroll_view_shop_cart">
|
|
||||||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop" @click="goDetail()">
|
|
||||||
<view class="scroll_view_shop_l">
|
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no3.png"></image>
|
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop_r">
|
|
||||||
<view class="scroll_view_shop_title">双人餐3<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
|
||||||
<view class="scroll_view_shop_tag">
|
|
||||||
<view class="scroll_view_shop_li">半小时送达</view>
|
|
||||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop_bottom">
|
|
||||||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="scroll_view_shop_cart">
|
|
||||||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll_view_li">
|
|
||||||
<view class="scroll_view_banner">
|
|
||||||
<image class="scroll_view_bannerimg" src="../../static/image@2x.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop" @click="goDetail()">
|
|
||||||
<view class="scroll_view_shop_l">
|
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no1.png"></image>
|
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop_r">
|
|
||||||
<view class="scroll_view_shop_title">单人餐1<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
|
||||||
<view class="scroll_view_shop_tag">
|
|
||||||
<view class="scroll_view_shop_li">半小时送达</view>
|
|
||||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop_bottom">
|
|
||||||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="scroll_view_shop_cart">
|
|
||||||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop" @click="goDetail()">
|
|
||||||
<view class="scroll_view_shop_l">
|
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no2.png"></image>
|
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop_r">
|
|
||||||
<view class="scroll_view_shop_title">单人餐2<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
|
||||||
<view class="scroll_view_shop_tag">
|
|
||||||
<view class="scroll_view_shop_li">半小时送达</view>
|
|
||||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop_bottom">
|
|
||||||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="scroll_view_shop_cart">
|
|
||||||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop" @click="goDetail()">
|
|
||||||
<view class="scroll_view_shop_l">
|
|
||||||
<image class="scroll_view_shop_no" src="../../static/index/no3.png"></image>
|
|
||||||
<image class="scroll_view_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop_r">
|
|
||||||
<view class="scroll_view_shop_title">单人餐3<text class="scroll_view_shop_desc">（大盘鸡+番茄炒鸡蛋+米饭）</text></view>
|
|
||||||
<view class="scroll_view_shop_tag">
|
|
||||||
<view class="scroll_view_shop_li">半小时送达</view>
|
|
||||||
<view class="scroll_view_shop_li">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="scroll_view_shop_bottom">
|
|
||||||
<view class="scroll_view_shop_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="scroll_view_shop_cart">
|
|
||||||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 商品区域 -->
|
<!-- 商品区域 -->
|
||||||
<view class="shop_view">
|
<recomGoods v-if="token" :apiType="1"></recomGoods>
|
||||||
<view class="shop_view_ul">
|
|
||||||
<view class="shop_view_li shop_view_bcg">
|
|
||||||
<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular >
|
|
||||||
<swiper-item class="shop_view_li_swiper_item" >
|
|
||||||
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad" @click="goDetail()"></image>
|
|
||||||
</swiper-item>
|
|
||||||
<swiper-item class="shop_view_li_swiper_item" >
|
|
||||||
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad" @click="goDetail()"></image>
|
|
||||||
</swiper-item>
|
|
||||||
<swiper-item class="shop_view_li_swiper_item" >
|
|
||||||
<image class="shop_view_li_swiper_img_url" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250107-c8e67d36b17249b4822df152fd5ae546.png" mode="widthFix" @load="imageLoad" @click="goDetail()"></image>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_li" @click="goDetail()">
|
|
||||||
<view class="shop_view_img">
|
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
|
||||||
<view class="shop_view_img_u">
|
|
||||||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont">
|
|
||||||
<view class="shop_view_cont_title">糖醋排骨</view>
|
|
||||||
<view class="shop_view_cont_desc">乡下土猪</view>
|
|
||||||
<view class="shop_view_cont_tag">
|
|
||||||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
|
||||||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont_bottom">
|
|
||||||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="shop_view_cont_cart">
|
|
||||||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_li" @click="goDetail()">
|
|
||||||
<view class="shop_view_img">
|
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
|
||||||
<view class="shop_view_img_u">
|
|
||||||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont">
|
|
||||||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
|
||||||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
|
||||||
<view class="shop_view_cont_tag">
|
|
||||||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
|
||||||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
|
||||||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont_bottom">
|
|
||||||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="shop_view_cont_cart">
|
|
||||||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_ul">
|
|
||||||
<view class="shop_view_li" @click="goDetail()">
|
|
||||||
<view class="shop_view_img">
|
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
|
||||||
<view class="shop_view_img_u">
|
|
||||||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont">
|
|
||||||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
|
||||||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
|
||||||
<view class="shop_view_cont_tag">
|
|
||||||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
|
||||||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont_bottom">
|
|
||||||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="shop_view_cont_cart">
|
|
||||||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_li" @click="goDetail()">
|
|
||||||
<view class="shop_view_img">
|
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
|
||||||
<view class="shop_view_img_u">
|
|
||||||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont">
|
|
||||||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
|
||||||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
|
||||||
<view class="shop_view_cont_tag">
|
|
||||||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
|
||||||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont_bottom">
|
|
||||||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="shop_view_cont_cart">
|
|
||||||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view style="height: 200rpx;"></view>
|
<view style="height: 200rpx;"></view>
|
||||||
<view class="footer">
|
<view class="footer">
|
||||||
<view class="footer_cont">
|
<view class="footer_cont">
|
||||||
@ -284,7 +75,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="footer_cont_m">
|
<view class="footer_cont_m">
|
||||||
<view class="footer_cont_m_price">43.9</view>
|
<view class="footer_cont_m_price">43.9</view>
|
||||||
<!-- <view class="footer_cont_m_desc">已优惠20元</view> -->
|
<view class="footer_cont_m_desc">已优惠20元</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="footer_cont_btn" @click="orderConfirm">去下单</view>
|
<view class="footer_cont_btn" @click="orderConfirm">去下单</view>
|
||||||
@ -294,37 +85,92 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import recomGoods from '@/components/recomGoods/recomGoods.vue';
|
||||||
import { computed,ref } from 'vue';
|
import { computed,ref } from 'vue';
|
||||||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||||||
import { storeToRefs } from 'pinia';//实现解构付值
|
import { storeToRefs } from 'pinia';//实现解构付值
|
||||||
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
||||||
const counterStore = useCounterStore(); // 使用 Store
|
const counterStore = useCounterStore(); // 使用 Store
|
||||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||||
const {statusHeight,headerHeight } = storeToRefs(counterStore);
|
const {statusHeight,headerHeight,nikeName,key,token,phone,uid } = storeToRefs(counterStore);
|
||||||
//使用pinia：方法还是从原来的counterStore中解构赋值
|
//使用pinia：方法还是从原来的counterStore中解构赋值
|
||||||
const { clickSType } = counterStore;
|
const { wechatlogin,frontindex,frontproduct } = counterStore;
|
||||||
|
const homeList = ref([]);
|
||||||
const goDetail=()=>{
|
const shopList = ref([]);
|
||||||
uni.navigateTo({
|
const total = ref(0);
|
||||||
url:`/shopProDetail/detail/detail`
|
const pages = ref(0);
|
||||||
|
const limits = ref(10);
|
||||||
|
const decs = ref('')
|
||||||
|
//获取微信登录code
|
||||||
|
const wxlogin=()=>{
|
||||||
|
uni.login({
|
||||||
|
provider:'weixin',
|
||||||
|
success: ({code}) => {
|
||||||
|
console.log('code',code);
|
||||||
|
api_login(code);
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const classify=()=>{
|
//授权小程序登录api
|
||||||
let params ={
|
const api_login=(code)=>{
|
||||||
productImgUrl: "http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20240611-c7e219dab5864847bee8c3f0cffbb658.jpg"
|
const params = {}
|
||||||
}
|
return wechatlogin(params,code).then(({data}) => {
|
||||||
//链式调用
|
nikeName.value = data.nikeName
|
||||||
return clickSType(params).then(({message}) => {
|
key.value = data.key
|
||||||
console.log('message',message);
|
token.value = data.token
|
||||||
|
phone.value = data.phone
|
||||||
}).catch((err) => {
|
uid.value = data.uid
|
||||||
const {code,message } = err;
|
})
|
||||||
|
.then(()=>api_index())
|
||||||
|
.catch(({message}) => {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
content:message,
|
content:message,
|
||||||
showCancel: false
|
showCancel: false
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//首页楼层接口
|
||||||
|
const api_index=()=>{
|
||||||
|
return frontindex().then(({data}) => {
|
||||||
|
homeList.value = data.homeList;
|
||||||
|
})
|
||||||
|
.catch(({message}) => {
|
||||||
|
uni.showModal({
|
||||||
|
content:message,
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//跳转统一处理
|
||||||
|
const JumpType=(item)=>{
|
||||||
|
const { jumpUrl,jumpIds,jumpType } = item;
|
||||||
|
if(jumpType == 0 || jumpType == 2 || jumpType == 4) return false;
|
||||||
|
let url = "";
|
||||||
|
if(jumpType == 1){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/shopProDetail/detail/detail?id=${jumpIds}`//商品详情
|
||||||
|
})
|
||||||
|
}else if(jumpType == 3){
|
||||||
|
uni.switchTab({
|
||||||
|
url:`/pages/classify/classify`//商品列表
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//加购物车
|
||||||
|
const addCart=(i,type)=>{
|
||||||
|
const { jumpIds,productInfo,specType } = i;
|
||||||
|
let specTypes = false;
|
||||||
|
if(type){
|
||||||
|
specTypes = specType;
|
||||||
|
}else{
|
||||||
|
specTypes = productInfo.specType;
|
||||||
|
}
|
||||||
|
if(specTypes){
|
||||||
|
console.log('多规格弹窗选类加购');
|
||||||
|
}else{
|
||||||
|
console.log('单规格直接加购')
|
||||||
|
}
|
||||||
|
}
|
||||||
const orderConfirm=()=>{
|
const orderConfirm=()=>{
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:`/order/orderConfirm/orderConfirm`
|
url:`/order/orderConfirm/orderConfirm`
|
||||||
@ -355,18 +201,13 @@ const onSearch=()=>{
|
|||||||
url:`/userserve/SearchProduct/SearchProduct`
|
url:`/userserve/SearchProduct/SearchProduct`
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
onLoad((options) => {
|
onLoad((options) => {wxlogin()});
|
||||||
|
onShow(() => {});
|
||||||
});
|
|
||||||
onShow(() => {
|
|
||||||
|
|
||||||
});
|
|
||||||
onPullDownRefresh(()=>{
|
onPullDownRefresh(()=>{
|
||||||
|
api_index();
|
||||||
uni.stopPullDownRefresh();
|
uni.stopPullDownRefresh();
|
||||||
});
|
});
|
||||||
onReachBottom(()=>{
|
onReachBottom(()=>{});
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@ -319,123 +319,7 @@ page{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 商品区域样式
|
|
||||||
.shop_view{
|
|
||||||
padding: 13rpx 20rpx 0rpx 20rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.shop_view_ul{
|
|
||||||
width: 346rpx;
|
|
||||||
.shop_view_li{
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
width: 100%;
|
|
||||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
.shop_view_li_swiper{
|
|
||||||
width: 100%;
|
|
||||||
height: 504rpx;
|
|
||||||
.shop_view_li_swiper_item{
|
|
||||||
width: 100%;
|
|
||||||
.shop_view_li_swiper_img_url{
|
|
||||||
width: 100%;
|
|
||||||
height: 504rpx;
|
|
||||||
display: block;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_view_img{
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
height: 320rpx;
|
|
||||||
.shop_view_tag{
|
|
||||||
width: 66rpx;
|
|
||||||
height: 42rpx;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 2;
|
|
||||||
right: -15rpx;
|
|
||||||
top: 20rpx;
|
|
||||||
background: url(../../static/tag_img.png);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
.shop_view_tag_text{
|
|
||||||
font-size: 20rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
height: 30rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_view_img_u{
|
|
||||||
width: 300rpx;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
left: 20rpx;
|
|
||||||
top: 20rpx;
|
|
||||||
.shop_view_img_url{
|
|
||||||
width: 100%;
|
|
||||||
height: 300rpx;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_view_cont{
|
|
||||||
padding: 20rpx;
|
|
||||||
.shop_view_cont_title{
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #000000;
|
|
||||||
min-height: 80rpx;
|
|
||||||
}
|
|
||||||
.shop_view_cont_desc{
|
|
||||||
color: #666666;
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
.shop_view_cont_tag{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.shop_view_cont_tag_text{
|
|
||||||
border-radius: 6rpx;
|
|
||||||
border: 1px solid #FF6868;
|
|
||||||
padding: 0rpx 10rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
color: #ff6868;
|
|
||||||
font-size: 18rpx;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_view_cont_bottom{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
.shop_view_cont_price{
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: red;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.shop_view_cont_cart{
|
|
||||||
width: 65rpx;
|
|
||||||
height: 65rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
.shop_view_cont_cart_img{
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_view_bcg{
|
|
||||||
background-color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.footer{
|
.footer{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 888;
|
z-index: 888;
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import {signGen} from "@/utils"
|
|||||||
function _request(options, showErrorModal = true) {
|
function _request(options, showErrorModal = true) {
|
||||||
return new Promise((resolve, reject)=> {
|
return new Promise((resolve, reject)=> {
|
||||||
uni.request(options).then(({data}) => {
|
uni.request(options).then(({data}) => {
|
||||||
if(data.status === "OK"){
|
if(data.code === 200){
|
||||||
resolve(data)
|
resolve(data)
|
||||||
}else{
|
}else{
|
||||||
reject(data);
|
reject(data);
|
||||||
@ -16,23 +16,32 @@ function _request(options, showErrorModal = true) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const apiService = {
|
export const apiService = {
|
||||||
query(path, query, sign = false) {
|
query(path, query,token,sign = false) {
|
||||||
return _request({
|
return _request({
|
||||||
url: url + path,
|
url: url + path,
|
||||||
data: sign ? signGen(query) : query
|
data: sign ? signGen(query) : query,
|
||||||
|
header: {
|
||||||
|
'Authori-zation':token
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
get(path, query, sign = true) {
|
get(path, query,token,sign = false) {
|
||||||
return _request({
|
return _request({
|
||||||
url: url + path,
|
url: url + path,
|
||||||
data: sign ? signGen(query) : query
|
data:sign ? signGen(query) : query,
|
||||||
|
header: {
|
||||||
|
'Authori-zation':token
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
post(path, params, sign = true, showErrorModal = true) {
|
post(path,params,token,sign = false,showErrorModal = true) {
|
||||||
return _request({
|
return _request({
|
||||||
url: url + path,
|
url: url + path,
|
||||||
data: sign ? signGen(params) : params,
|
data:sign ? signGen(params) : params,
|
||||||
method: 'POST'
|
method: 'POST',
|
||||||
|
header: {
|
||||||
|
'Authori-zation':token
|
||||||
|
}
|
||||||
}, showErrorModal)
|
}, showErrorModal)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
// 环境接口域名变量
|
// 环境接口域名变量
|
||||||
let url = '';
|
let url = '';
|
||||||
// 手动切换环境
|
// 手动切换环境
|
||||||
const type = 'prod'
|
const type = 'dev'
|
||||||
/**
|
/**
|
||||||
* 环境配置地址
|
* 环境配置地址
|
||||||
* dev开发
|
* dev开发
|
||||||
@ -9,7 +9,7 @@ const type = 'prod'
|
|||||||
* prod生产
|
* prod生产
|
||||||
*/
|
*/
|
||||||
if(type === 'dev'){
|
if(type === 'dev'){
|
||||||
url = "https://japitest.3721zh.com/webapp";
|
url = "http://mnpzvv.natappfree.cc/";
|
||||||
}
|
}
|
||||||
if(type === 'test'){
|
if(type === 'test'){
|
||||||
url = "https://japiuat.3721zh.com/webapp";
|
url = "https://japiuat.3721zh.com/webapp";
|
||||||
|
|||||||
@ -22,196 +22,38 @@
|
|||||||
<view class="item">
|
<view class="item">
|
||||||
<view class="shop_swiper" :style="{'height':swiperHeight+'rpx'}" >
|
<view class="shop_swiper" :style="{'height':swiperHeight+'rpx'}" >
|
||||||
<swiper class="shop_swiper_wrap" interval="3000" :current="currentIndex" circular @change="onSwiperChange" :style="{'height':swiperHeight+'rpx'}">
|
<swiper class="shop_swiper_wrap" interval="3000" :current="currentIndex" circular @change="onSwiperChange" :style="{'height':swiperHeight+'rpx'}">
|
||||||
<swiper-item class="shop_swiper_marquees" v-if="imglist.length" v-for="(item,index) in imglist" :key="index">
|
<swiper-item class="shop_swiper_marquees" v-if="sliderImages.length" v-for="(item,index) in sliderImages" :key="index">
|
||||||
<view class="shop_swiper_img">
|
<view class="shop_swiper_img">
|
||||||
<image class="shop_swiper_imgUrl" :src="item" @load="onImageLoad" @click="previewImage(index)"></image>
|
<image class="shop_swiper_imgUrl" :src="item" lazy-load @load="onImageLoad" @click="previewImage(index)"></image>
|
||||||
</view>
|
</view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
<view class="currentNumber">
|
<view class="currentNumber" v-if="sliderImages.length > 1">
|
||||||
<view class="item_currentNumber item_currentNumber_width" v-if="imglist.length"><text>{{currentIndex+1}}/{{imglist.length}}</text></view>
|
<view class="item_currentNumber item_currentNumber_width"><text>{{currentIndex+1}}/{{sliderImages.length}}</text></view>
|
||||||
</view>
|
</view>
|
||||||
<image @click="Openqc" class="shop_qc" src="../../static/shopdetail/qc.png" mode="widthFix"></image>
|
<image @click="Openqc" class="shop_qc" src="../../static/shopdetail/qc.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
<!-- 价格标题区域 -->
|
<!-- 价格标题区域 -->
|
||||||
<view class="shop_head">
|
<view class="shop_head">
|
||||||
<view class="shop_price price">49.9<text class="market_name prices">79.9</text></view>
|
<view class="shop_price price">{{productInfo.price}}<text class="market_name prices">{{productInfo.otPrice}}</text></view>
|
||||||
<view class="shop_title">新鲜黄牛牛肉200g+9g/份</view>
|
<view class="shop_title">{{productInfo.storeName}}</view>
|
||||||
<view class="shop_desc">外红里黑属于牛肉内部缺氧导致，切开氧化静置会逐步 氧化发红，不影响食用</view>
|
<view class="shop_desc">{{productInfo.storeInfo}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 评论区域 -->
|
<!-- 评论区域 -->
|
||||||
<view class="item">
|
<view class="item">
|
||||||
<view class="shop_comment" @click="evals()">
|
<comment v-if="token && productId" :apiType="productId"></comment>
|
||||||
<view class="shop_comment_head">
|
|
||||||
<view class="shop_comment_head_title">商品评论(1万+)</view>
|
|
||||||
<view class="shop_comment_head_arrow">全部</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_comment_tag">
|
|
||||||
<view class="shop_comment_item">很好吃33</view>
|
|
||||||
<view class="shop_comment_item">肉新鲜21</view>
|
|
||||||
<view class="shop_comment_item">继续回购9</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_comment_cont">
|
|
||||||
<view class="shop_comment_cont_ul">
|
|
||||||
<view class="shop_comment_cont_l"><image class="shop_comment_cont_userimg" src="" mode="widthFix"></image><view class="shop_comment_cont_username">蓝**v</view><view class="shop_comment_cont_amount">买过3次</view></view>
|
|
||||||
<view class="shop_comment_cont_ip"></view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_comment_m">
|
|
||||||
<view class="shop_comment_title"><text>速度很快，品质保证，一如既往的支持！就不一一评价了，赞👍👍</text></view>
|
|
||||||
<view class="shop_comment_item">
|
|
||||||
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
|
|
||||||
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
|
|
||||||
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
|
|
||||||
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 常见问题 -->
|
|
||||||
<view class="shop_comment" @click="faqList">
|
|
||||||
<view class="shop_comment_head">
|
|
||||||
<view class="shop_comment_head_title">常见问题(2)</view>
|
|
||||||
<view class="shop_comment_head_arrow">全部</view>
|
|
||||||
</view>
|
|
||||||
<view class="faqlist">
|
|
||||||
<view class="shop_ask shop_padding"><text>有的虾头发黑是为什么?</text></view>
|
|
||||||
<view class="shop_answer shop_padding"><text>虾头中含有一种叫做酪氨酸酶的酶，当虾死亡后，这种酶会催化虾体内的酪氨酸生成黑色素，导致虾头变黑。这是一种自然现象，通常不影响虾肉的食用安全。</text></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
<!-- 图文详情 -->
|
<!-- 图文详情 -->
|
||||||
<view class="shop_detail item">
|
<view class="shop_detail item">
|
||||||
<view class="shop_detail_title">图文详情</view>
|
<view class="shop_detail_title">图文详情</view>
|
||||||
<view class="shop_detail_img">
|
<view class="shop_detail_img">
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20241105-b286a4cf0d1148158e166b858112125a.jpg" mode="widthFix"></image>
|
<rich-text :nodes="content" class='product-imgs'></rich-text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item">
|
<view class="item">
|
||||||
<!-- 推荐区域 -->
|
<recomGoods v-if="token" :apiType="5"></recomGoods>
|
||||||
<view class="user_title" >
|
|
||||||
<text class="user_name">为您推荐</text>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 商品区域 -->
|
|
||||||
<view class="shop_view">
|
|
||||||
<view class="shop_view_ul">
|
|
||||||
<view class="shop_view_li" @click="goDetail()">
|
|
||||||
<view class="shop_view_img">
|
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
|
||||||
<view class="shop_view_img_u">
|
|
||||||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont">
|
|
||||||
<view class="shop_view_cont_title">糖醋排骨</view>
|
|
||||||
<view class="shop_view_cont_desc">乡下土猪</view>
|
|
||||||
<view class="shop_view_cont_tag">
|
|
||||||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
|
||||||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont_bottom">
|
|
||||||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="shop_view_cont_cart">
|
|
||||||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_li" @click="goDetail()">
|
|
||||||
<view class="shop_view_img">
|
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
|
|
||||||
<view class="shop_view_img_u">
|
|
||||||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont">
|
|
||||||
<view class="shop_view_cont_title">糖醋排骨</view>
|
|
||||||
<view class="shop_view_cont_desc">乡下土猪</view>
|
|
||||||
<view class="shop_view_cont_tag">
|
|
||||||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
|
||||||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont_bottom">
|
|
||||||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="shop_view_cont_cart">
|
|
||||||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_li" @click="goDetail()">
|
|
||||||
<view class="shop_view_img">
|
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
|
|
||||||
<view class="shop_view_img_u">
|
|
||||||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont">
|
|
||||||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
|
||||||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
|
||||||
<view class="shop_view_cont_tag">
|
|
||||||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
|
||||||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
|
||||||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont_bottom">
|
|
||||||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="shop_view_cont_cart">
|
|
||||||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_ul">
|
|
||||||
<view class="shop_view_li" @click="goDetail()">
|
|
||||||
<view class="shop_view_img">
|
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
|
|
||||||
<view class="shop_view_img_u">
|
|
||||||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont">
|
|
||||||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
|
||||||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
|
||||||
<view class="shop_view_cont_tag">
|
|
||||||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
|
||||||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont_bottom">
|
|
||||||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="shop_view_cont_cart">
|
|
||||||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_li" @click="goDetail()">
|
|
||||||
<view class="shop_view_img">
|
|
||||||
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
|
|
||||||
<view class="shop_view_img_u">
|
|
||||||
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont">
|
|
||||||
<view class="shop_view_cont_title">泡椒田鸡</view>
|
|
||||||
<view class="shop_view_cont_desc">超大只田鸡</view>
|
|
||||||
<view class="shop_view_cont_tag">
|
|
||||||
<view class="shop_view_cont_tag_text">仅剩3份</view>
|
|
||||||
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
|
|
||||||
</view>
|
|
||||||
<view class="shop_view_cont_bottom">
|
|
||||||
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
|
|
||||||
<view class="shop_view_cont_cart">
|
|
||||||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view style="height: 200rpx;"></view>
|
<view style="height: 200rpx;"></view>
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
<view class="footer">
|
<view class="footer">
|
||||||
@ -249,6 +91,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import recomGoods from '@/components/recomGoods/recomGoods.vue';
|
||||||
|
import comment from '@/components/comment/comment.vue';
|
||||||
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
||||||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||||||
import { storeToRefs } from 'pinia';//实现解构付值
|
import { storeToRefs } from 'pinia';//实现解构付值
|
||||||
@ -258,11 +102,6 @@ const { proxy } = getCurrentInstance();
|
|||||||
const qcPopup = ref(null);
|
const qcPopup = ref(null);
|
||||||
const qcShow = ref(false);
|
const qcShow = ref(false);
|
||||||
const show = ref(false);
|
const show = ref(false);
|
||||||
const imglist = ref([
|
|
||||||
"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg",
|
|
||||||
"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-ebe6955a5db9476e9a525042eaba3d0e.jpg",
|
|
||||||
"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-ac78893d51e54074bb7b27227873907a.jpg"
|
|
||||||
])
|
|
||||||
const swiperHeight = ref(200);
|
const swiperHeight = ref(200);
|
||||||
const imgheights = ref([]);
|
const imgheights = ref([]);
|
||||||
const currentIndex = ref(0);
|
const currentIndex = ref(0);
|
||||||
@ -274,9 +113,16 @@ const currentTab = ref(0); // 当前选中的tab
|
|||||||
const scrollTop = ref(0); // 页面滚动的距离
|
const scrollTop = ref(0); // 页面滚动的距离
|
||||||
const scrollTimer = ref(null);
|
const scrollTimer = ref(null);
|
||||||
const sectionHeights = ref([0]);
|
const sectionHeights = ref([0]);
|
||||||
|
const productAttr = ref([]);
|
||||||
|
const productInfo = ref({});
|
||||||
|
const productValue = ref({});
|
||||||
|
const sliderImages = ref([]);
|
||||||
|
const content = ref('');
|
||||||
|
const productId = ref('');
|
||||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||||
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
|
const {statusHeight,headerHeight,statusBartop,token } = storeToRefs(counterStore);
|
||||||
|
//使用pinia：方法还是从原来的counterStore中解构赋值
|
||||||
|
const { frontdetail } = counterStore;
|
||||||
const Openqc =() =>{
|
const Openqc =() =>{
|
||||||
qcShow.value ? qcPopup.value.close():qcPopup.value.open()
|
qcShow.value ? qcPopup.value.close():qcPopup.value.open()
|
||||||
};
|
};
|
||||||
@ -309,11 +155,7 @@ const goCart=()=>{
|
|||||||
url:`/pages/cart/cart`
|
url:`/pages/cart/cart`
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
const evals=()=>{
|
|
||||||
uni.navigateTo({
|
|
||||||
url:`/shopProDetail/evallist/evallist`
|
|
||||||
})
|
|
||||||
};
|
|
||||||
const handleBack = () => {
|
const handleBack = () => {
|
||||||
if (getPages()) {
|
if (getPages()) {
|
||||||
// 如果有上一页，返回上一页
|
// 如果有上一页，返回上一页
|
||||||
@ -353,7 +195,6 @@ const handleBack = () => {
|
|||||||
};
|
};
|
||||||
const switchTab = (index) =>{
|
const switchTab = (index) =>{
|
||||||
if(currentTab.value == index) return false;
|
if(currentTab.value == index) return false;
|
||||||
console.log('000');
|
|
||||||
currentTab.value = index;
|
currentTab.value = index;
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
uni.pageScrollTo({
|
uni.pageScrollTo({
|
||||||
@ -367,14 +208,33 @@ const orderConfirm = ()=>{
|
|||||||
url:`/order/orderConfirm/orderConfirm`
|
url:`/order/orderConfirm/orderConfirm`
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const faqList=()=>{
|
|
||||||
uni.navigateTo({
|
|
||||||
url:`/shopProDetail/faqList/faqList`
|
const api_detail=(id)=>{
|
||||||
|
const params = {}
|
||||||
|
return frontdetail(id,params,token.value).then(({data}) => {
|
||||||
|
productAttr.value = data.productAttr;
|
||||||
|
productInfo.value = data;
|
||||||
|
productValue.value = data.productValue;
|
||||||
|
sliderImages.value = data.sliderImages;
|
||||||
|
if(data.content){
|
||||||
|
content.value = data.content.replace(/\<img|\width:[^;]+;/gi,'<img style="width:100%;height:auto;display:block;" ');
|
||||||
|
}
|
||||||
|
}).catch(({message}) => {
|
||||||
|
uni.showModal({
|
||||||
|
content:message,
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
|
const { id } = options;
|
||||||
//初始化时判断是否显示返回按钮
|
//初始化时判断是否显示返回按钮
|
||||||
showBack.value = getPages();
|
showBack.value = getPages();
|
||||||
|
if(id){
|
||||||
|
productId.value = id;
|
||||||
|
api_detail(id)
|
||||||
|
}
|
||||||
});
|
});
|
||||||
onShow(() => {});
|
onShow(() => {});
|
||||||
onPageScroll((e)=>{
|
onPageScroll((e)=>{
|
||||||
@ -398,15 +258,9 @@ onPageScroll((e)=>{
|
|||||||
getSectionHeights(1);
|
getSectionHeights(1);
|
||||||
}, 300)
|
}, 300)
|
||||||
}),
|
}),
|
||||||
onReady(()=>{
|
onReady(()=>{getSectionHeights()})
|
||||||
getSectionHeights();
|
onPullDownRefresh(()=>{})
|
||||||
})
|
onReachBottom(()=>{})
|
||||||
onPullDownRefresh(()=>{
|
|
||||||
|
|
||||||
})
|
|
||||||
onReachBottom(()=>{
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@ -155,155 +155,7 @@ page{
|
|||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.shop_comment{
|
|
||||||
background: #FFFFFF;
|
|
||||||
margin: 20rpx 20rpx 0rpx 20rpx;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
|
||||||
.shop_comment_head{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 20rpx 40rpx 20rpx 20rpx;
|
|
||||||
.shop_comment_head_title{
|
|
||||||
font-size: 30rpx;
|
|
||||||
color: #000000;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.shop_comment_head_arrow{
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #999999;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.shop_comment_head_arrow::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 100%;
|
|
||||||
transform: translate3d(0, -50%, 0) rotate(45deg);
|
|
||||||
width: 13rpx;
|
|
||||||
height: 13rpx;
|
|
||||||
border-top: 3rpx solid #999999;
|
|
||||||
border-right: 3rpx solid #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_comment_tag{
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 0rpx 20rpx 0rpx 20rpx;
|
|
||||||
border-bottom: 1rpx solid #f6f6f6;
|
|
||||||
.shop_comment_item{
|
|
||||||
padding: 0rpx 20rpx 0rpx 20rpx;
|
|
||||||
height: 45rpx;
|
|
||||||
background: #FFD7D7;
|
|
||||||
border-radius: 50rpx;
|
|
||||||
border: 1px solid #FFA0A0;
|
|
||||||
color: #FF5D5D;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 23rpx;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_comment_cont{
|
|
||||||
padding: 0rpx 20rpx 0rpx 20rpx;
|
|
||||||
.shop_comment_cont_ul{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 20rpx 0;
|
|
||||||
.shop_comment_cont_l{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.shop_comment_cont_userimg{
|
|
||||||
width: 60rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
background-color: #000000;
|
|
||||||
border-radius: 50rpx;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.shop_comment_cont_username{
|
|
||||||
color: #000000;
|
|
||||||
font-size: 26rpx;
|
|
||||||
margin-left: 15rpx;
|
|
||||||
}
|
|
||||||
.shop_comment_cont_amount{
|
|
||||||
padding: 0 10rpx;
|
|
||||||
height: 34rpx;
|
|
||||||
background: #FFF4CD;
|
|
||||||
border-radius: 4rpx;
|
|
||||||
border: 1px solid #F9D448;
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: #D0AA1B;
|
|
||||||
margin-left: 15rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_comment_cont_ip{
|
|
||||||
color: #999;
|
|
||||||
font-size: 23rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_comment_m{
|
|
||||||
overflow: hidden;
|
|
||||||
.shop_comment_title{
|
|
||||||
font-size: 27rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.shop_comment_item{
|
|
||||||
margin: 20rpx 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content:space-between;
|
|
||||||
.shop_comment_itemImg{
|
|
||||||
width: 155rpx;
|
|
||||||
height: 155rpx;
|
|
||||||
background-color: #666666;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.faqlist{
|
|
||||||
padding: 0rpx 20rpx 20rpx 20rpx;
|
|
||||||
.shop_ask{
|
|
||||||
font-size: 27rpx;
|
|
||||||
color: #333333;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.shop_answer{
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #666666;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
|
||||||
.shop_padding text{
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.shop_ask::before {
|
|
||||||
vertical-align: middle;
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
width: 30rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
background-image: url('../../static/shopdetail/ask.png');
|
|
||||||
background-size: cover;
|
|
||||||
margin-right: 10rpx; /* 调整图片与标题的间距 */
|
|
||||||
}
|
|
||||||
.shop_answer::before {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
width: 30rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
background-image: url('../../static/shopdetail/answer.png');
|
|
||||||
background-size: cover;
|
|
||||||
margin-right: 10rpx; /* 调整图片与标题的间距 */
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.shop_detail{
|
.shop_detail{
|
||||||
margin: 20rpx 20rpx 0rpx 20rpx;
|
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
@ -329,158 +181,7 @@ page{
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.user_title{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 60rpx;
|
|
||||||
.user_name{
|
|
||||||
color: #FF0000;
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
margin: 0 10rpx 0 10rpx;
|
|
||||||
vertical-align: middle;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.user_title::before{
|
|
||||||
content: "";
|
|
||||||
vertical-align: middle;
|
|
||||||
display: inline-block;
|
|
||||||
width: 30rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
background-image: url('../../static/user/leftimg.png');
|
|
||||||
background-size: cover;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
.user_title::after{
|
|
||||||
vertical-align: middle;
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
width: 30rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
background-image: url('../../static/user/rightimg.png');
|
|
||||||
background-size: cover;
|
|
||||||
margin-left: 10rpx;
|
|
||||||
}
|
|
||||||
// 商品区域样式
|
|
||||||
.shop_view{
|
|
||||||
margin-top: 10rpx;
|
|
||||||
padding: 13rpx 20rpx 0rpx 20rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.shop_view_ul{
|
|
||||||
width: 346rpx;
|
|
||||||
.shop_view_li{
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
width: 100%;
|
|
||||||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
.shop_view_li_swiper{
|
|
||||||
width: 100%;
|
|
||||||
height: 504rpx;
|
|
||||||
.shop_view_li_swiper_item{
|
|
||||||
width: 100%;
|
|
||||||
.shop_view_li_swiper_img_url{
|
|
||||||
width: 100%;
|
|
||||||
height: 504rpx;
|
|
||||||
display: block;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_view_img{
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
height: 320rpx;
|
|
||||||
.shop_view_tag{
|
|
||||||
width: 66rpx;
|
|
||||||
height: 42rpx;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 2;
|
|
||||||
right: -15rpx;
|
|
||||||
top: 20rpx;
|
|
||||||
background: url(../../static/tag_img.png);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
.shop_view_tag_text{
|
|
||||||
font-size: 20rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
height: 30rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_view_img_u{
|
|
||||||
width: 300rpx;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
left: 20rpx;
|
|
||||||
top: 20rpx;
|
|
||||||
.shop_view_img_url{
|
|
||||||
width: 100%;
|
|
||||||
height: 300rpx;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_view_cont{
|
|
||||||
padding: 20rpx;
|
|
||||||
.shop_view_cont_title{
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #000000;
|
|
||||||
min-height: 80rpx;
|
|
||||||
}
|
|
||||||
.shop_view_cont_desc{
|
|
||||||
color: #666666;
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
.shop_view_cont_tag{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.shop_view_cont_tag_text{
|
|
||||||
border-radius: 6rpx;
|
|
||||||
border: 1px solid #FF6868;
|
|
||||||
padding: 0rpx 10rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
color: #ff6868;
|
|
||||||
font-size: 18rpx;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_view_cont_bottom{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
.shop_view_cont_price{
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: red;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.shop_view_cont_cart{
|
|
||||||
width: 65rpx;
|
|
||||||
height: 65rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
.shop_view_cont_cart_img{
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop_view_bcg{
|
|
||||||
background-color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.footer{
|
.footer{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 88;
|
z-index: 88;
|
||||||
|
|||||||
@ -1,124 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="mian">
|
<view class="mian">
|
||||||
<view class="head">
|
<view class="head">
|
||||||
<view class="eval_tag eval_tag_active">全部<text>5000+</text></view>
|
<view class="eval_tag" v-for="(item,index) in reviewTags" :key="index" @click="referClick(item,index)" :class="act == index?'eval_tag_active':''" ><image v-if="item.imgUrl" class="eval_tag_img" :src="item.imgUrl" mode="widthFix"></image>{{item.tag}} <text v-if="item.num >= 1">{{item.num >= 5000?'5000+':item.num}}</text></view>
|
||||||
<view class="eval_tag"><image class="eval_tag_img" src="../../static/eval/img.png" mode="widthFix"></image>图片 <text>1000+</text></view>
|
</view>
|
||||||
<view class="eval_tag"><image class="eval_tag_img" src="../../static/eval/newest.png" mode="widthFix"></image>最新</view>
|
<view class="eval_item" v-for="(item,index) in List" :key="index">
|
||||||
<view class="eval_tag">品质好 <text>10</text></view>
|
|
||||||
<view class="eval_tag">肉新鲜 <text>1</text></view>
|
|
||||||
<view class="eval_tag">肥瘦均匀 <text>2</text></view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="eval_item">
|
|
||||||
<view class="eval_item_top">
|
<view class="eval_item_top">
|
||||||
<view class="eval_item_l">
|
<view class="eval_item_l">
|
||||||
<image class="eval_item_userimg" src="" mode="widthFix"></image>
|
<image class="eval_item_userimg" :src="item.avatar" mode="widthFix"></image>
|
||||||
<view class="eval_item_username">*林</view>
|
<view class="eval_item_username">{{item.nickname}}</view>
|
||||||
<view class="eval_item_userdesc">买过3次</view>
|
<!-- <view class="eval_item_userdesc">买过3次</view> -->
|
||||||
<view class="eval_item_usertext"><image class="eval_item_usertext_img" src="../../static/eval/praise.png" mode="widthFix"></image>好评</view>
|
<view class="eval_item_usertext"><image class="eval_item_usertext_img" :src="item.evalImg" lazy-load mode="widthFix"></image>{{item.evalName}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="eval_item_r"></view>
|
<view class="eval_item_r"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="eval_item_text"><text>强烈推荐，肉质感很新鲜很嫩，强烈推荐，肉质感 很新鲜很嫩</text></view>
|
<view class="eval_item_text"><text>{{item.comment}}</text></view>
|
||||||
<view class="eval_item_ul">
|
<view class="eval_item_ul">
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
<view class="eval_item_li" v-for="(pics,index) in item.pics" :key="index">
|
||||||
</view>
|
<image :src="pics" lazy-load mode="widthFix" @click.stop="previewImage(item,index)"></image>
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view class="eval_item_bottom">
|
<view class="eval_item_bottom">
|
||||||
<view class="eval_item_time">25/3/8</view>
|
<view class="eval_item_time">{{item.createTime}}</view>
|
||||||
<view class="eval_item_numa"><image src="../../static/eval/heart.png" mode="widthFix"></image>67</view>
|
<!-- <view class="eval_item_numa"><image src="../../static/eval/heart.png" lazy-load mode="widthFix"></image>67</view> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="eval_item">
|
|
||||||
<view class="eval_item_top">
|
|
||||||
<view class="eval_item_l">
|
|
||||||
<image class="eval_item_userimg" src="" mode="widthFix"></image>
|
|
||||||
<view class="eval_item_username">*林</view>
|
|
||||||
<view class="eval_item_userdesc">买过3次</view>
|
|
||||||
<view class="eval_item_usertext"><image class="eval_item_usertext_img" src="../../static/eval/praise.png" mode="widthFix"></image>好评</view>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_r"></view>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_text"><text>强烈推荐，肉质感很新鲜很嫩，强烈推荐，肉质感 很新鲜很嫩</text></view>
|
|
||||||
<view class="eval_item_ul">
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_bottom">
|
|
||||||
<view class="eval_item_time">25/3/8</view>
|
|
||||||
<view class="eval_item_numa"><image src="../../static/eval/heart.png" mode="widthFix"></image>67</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item">
|
|
||||||
<view class="eval_item_top">
|
|
||||||
<view class="eval_item_l">
|
|
||||||
<image class="eval_item_userimg" src="" mode="widthFix"></image>
|
|
||||||
<view class="eval_item_username">*林</view>
|
|
||||||
<view class="eval_item_userdesc">买过3次</view>
|
|
||||||
<view class="eval_item_usertext"><image class="eval_item_usertext_img" src="../../static/eval/praise.png" mode="widthFix"></image>好评</view>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_r"></view>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_text">强烈推荐，肉质感很新鲜很嫩，强烈推荐，肉质感 很新鲜很嫩</view>
|
|
||||||
<view class="eval_item_ul">
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_li">
|
|
||||||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="eval_item_bottom">
|
|
||||||
<view class="eval_item_time">25/3/8</view>
|
|
||||||
<view class="eval_item_numa"><image src="../../static/eval/heart.png" mode="widthFix"></image>67</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view style="height: 200rpx;"></view>
|
<view style="height: 200rpx;"></view>
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
<view class="footer">
|
<view class="footer">
|
||||||
@ -155,13 +62,178 @@ import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } fr
|
|||||||
const counterStore = useCounterStore(); // 使用 Store
|
const counterStore = useCounterStore(); // 使用 Store
|
||||||
const { proxy } = getCurrentInstance();
|
const { proxy } = getCurrentInstance();
|
||||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||||
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
|
const {statusHeight,headerHeight,statusBartop,token } = storeToRefs(counterStore);
|
||||||
|
//使用pinia：方法还是从原来的counterStore中解构赋值
|
||||||
onLoad((options) => {});
|
const { replyconfig,replylist } = counterStore;
|
||||||
|
const productId = ref('');//产品id
|
||||||
|
const havePics = ref('');//有图传1
|
||||||
|
const latest = ref('');//查最新传1
|
||||||
|
const limits = ref(10);//一页查多少条
|
||||||
|
const pages = ref(0);//第几页
|
||||||
|
const tag = ref('');//评论标名称
|
||||||
|
const type = ref(0);//评论等级:0全部，1好评，2中评，3差评
|
||||||
|
const total = ref(0);
|
||||||
|
const reviewTags = ref([]);
|
||||||
|
const picsCount = ref('');
|
||||||
|
const sumCount = ref('');
|
||||||
|
const decs = ref('');
|
||||||
|
const List = ref([]);
|
||||||
|
const act = ref(0);
|
||||||
|
const referClick=(item,index)=>{
|
||||||
|
if(act.value == index) return false;
|
||||||
|
act.value = index;
|
||||||
|
if(index == 0){
|
||||||
|
havePics.value = '';
|
||||||
|
latest.value = '';
|
||||||
|
tag.value = '';
|
||||||
|
type.type = 0;
|
||||||
|
}else if(index == 1){
|
||||||
|
havePics.value = 1;
|
||||||
|
latest.value = '';
|
||||||
|
tag.value = '';
|
||||||
|
type.type = 0;
|
||||||
|
}else if(index == 2){
|
||||||
|
havePics.value = '';
|
||||||
|
latest.value = 1;
|
||||||
|
tag.value = '';
|
||||||
|
type.type = 0;
|
||||||
|
}else{
|
||||||
|
havePics.value = '';
|
||||||
|
latest.value = '';
|
||||||
|
tag.value = item.tag;
|
||||||
|
type.type = 0;
|
||||||
|
}
|
||||||
|
List.value = [];
|
||||||
|
total.value = 0;
|
||||||
|
decs.value = '';
|
||||||
|
pages.value = 0;
|
||||||
|
api_replylist()
|
||||||
|
}
|
||||||
|
const api_replyconfig=()=>{
|
||||||
|
const params = {}
|
||||||
|
return replyconfig(productId.value,params,token.value).then(({data}) => {
|
||||||
|
let arr = [
|
||||||
|
{tag:"全部",num:data.sumCount},
|
||||||
|
{tag:'最新',num:0,imgUrl:'../../static/eval/newest.png'},
|
||||||
|
]
|
||||||
|
let imgArr = [
|
||||||
|
{tag:'图片',num:data.picsCount,imgUrl:'../../static/eval/img.png'}
|
||||||
|
]
|
||||||
|
if(data.picsCount >= 1){
|
||||||
|
arr.splice(1,0, ...imgArr); // 在索引 1 的位置插入，不删除任何元素
|
||||||
|
}
|
||||||
|
data.reviewTags.unshift(...arr);
|
||||||
|
if(tag.value){
|
||||||
|
data.reviewTags.forEach((item,index)=>{
|
||||||
|
if(tag.value == item.tag){act.value = index}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
reviewTags.value = data.reviewTags;
|
||||||
|
picsCount.value = data.picsCount;
|
||||||
|
sumCount.value = data.sumCount;
|
||||||
|
})
|
||||||
|
.then(()=>api_replylist())
|
||||||
|
.catch(({message}) => {
|
||||||
|
uni.showModal({
|
||||||
|
content:message,
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const previewImage=(item,i)=>{
|
||||||
|
uni.previewImage({
|
||||||
|
current: i,
|
||||||
|
urls:item.pics
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const api_replylist=()=>{
|
||||||
|
pages.value = pages.value + 1;
|
||||||
|
decs.value = "—— 加载中... ——";
|
||||||
|
if(List.value.length > 0 && List.value.length >= total.value){
|
||||||
|
decs.value = "—— 嗷呜，已经到底啦 ——";
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const params = {
|
||||||
|
productId:productId.value,
|
||||||
|
page:pages.value,
|
||||||
|
limit:limits.value
|
||||||
|
};
|
||||||
|
if(havePics.value){
|
||||||
|
params.havePics = havePics.value;
|
||||||
|
}
|
||||||
|
if(latest.value){
|
||||||
|
params.latest = latest.value;
|
||||||
|
}
|
||||||
|
if(tag.value){
|
||||||
|
params.tag = tag.value;
|
||||||
|
}
|
||||||
|
if(type.value == 1 || type.value == 2 || type.value == 3){
|
||||||
|
params.type = type.value
|
||||||
|
}else{
|
||||||
|
params.type = type.value;
|
||||||
|
}
|
||||||
|
return replylist(params,token.value).then(({data}) => {
|
||||||
|
total.value = data.total;
|
||||||
|
decs.value = '—— 上拉加载更多 ——'
|
||||||
|
data.list.forEach((item,index)=>{
|
||||||
|
if(item.score >= 4){
|
||||||
|
item.evalName = '好评',
|
||||||
|
item.evalImg = '../../static/eval/praise.png'
|
||||||
|
}else if(item.score > 2 && item.score < 4){
|
||||||
|
item.evalName = '中评',
|
||||||
|
item.evalImg = '../../static/eval/praise.png'
|
||||||
|
}else if(item.score <= 2){
|
||||||
|
item.evalName = '差评',
|
||||||
|
item.evalImg = '../../static/eval/praise.png'
|
||||||
|
}else{
|
||||||
|
item.evalName = '',
|
||||||
|
item.evalImg = ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
List.value = List.value.concat(data.list);
|
||||||
|
if(List.value < total.value){
|
||||||
|
decs.value = '—— 上拉加载更多 ——'
|
||||||
|
}else{
|
||||||
|
decs.value = '—— 嗷呜，已经到底啦 ——';
|
||||||
|
}
|
||||||
|
}).catch(({message}) => {
|
||||||
|
uni.showModal({
|
||||||
|
content:message,
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onLoad((options) => {
|
||||||
|
if(options.productId){
|
||||||
|
productId.value = options.productId;
|
||||||
|
}
|
||||||
|
if(options.havePics){
|
||||||
|
havePics.value = options.havePics;
|
||||||
|
}
|
||||||
|
if(options.latest){
|
||||||
|
latest.value = options.latest;
|
||||||
|
}
|
||||||
|
if(options.tag){
|
||||||
|
tag.value = options.tag;
|
||||||
|
}
|
||||||
|
if(options.type == 0 || options.type == 1 || options.type == 2 || options.type == 3){
|
||||||
|
type.value = options.type;;
|
||||||
|
}
|
||||||
|
api_replyconfig();
|
||||||
|
});
|
||||||
onShow(() => {});
|
onShow(() => {});
|
||||||
onReady(()=>{})
|
onReady(()=>{})
|
||||||
onPullDownRefresh(()=>{})
|
onPullDownRefresh(()=>{
|
||||||
onReachBottom(()=>{})
|
List.value = [];
|
||||||
|
total.value = 0;
|
||||||
|
decs.value = '';
|
||||||
|
pages.value = 0;
|
||||||
|
api_replyconfig();
|
||||||
|
uni.stopPullDownRefresh();
|
||||||
|
})
|
||||||
|
onReachBottom(()=>{
|
||||||
|
api_replylist();
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@ -64,7 +64,7 @@ page{
|
|||||||
width: 50rpx;
|
width: 50rpx;
|
||||||
height: 50rpx;
|
height: 50rpx;
|
||||||
border-radius: 50rpx;
|
border-radius: 50rpx;
|
||||||
background-color: #000;
|
background-color: #f6f6f6;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.eval_item_username{
|
.eval_item_username{
|
||||||
@ -117,15 +117,15 @@ page{
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
.eval_item_li{
|
.eval_item_li{
|
||||||
width: 212rpx;
|
width: 155rpx;
|
||||||
height: 212rpx;
|
height: 155rpx;
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
}
|
}
|
||||||
.eval_item_li image{
|
.eval_item_li image{
|
||||||
width: 212rpx;
|
width: 155rpx;
|
||||||
height: 212rpx;
|
height: 155rpx;
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,28 +4,64 @@ import { apiService } from "@/server/api.service";
|
|||||||
export const useCounterStore = defineStore('counter',()=>{
|
export const useCounterStore = defineStore('counter',()=>{
|
||||||
//定义数据（state)
|
//定义数据（state)
|
||||||
const openId = ref('');
|
const openId = ref('');
|
||||||
const cellPhone = ref('');
|
const nikeName = ref('');
|
||||||
const isLogin = ref('');
|
const key = ref('');
|
||||||
|
const phone = ref('');
|
||||||
|
const uid = ref('');
|
||||||
|
const token = ref('');
|
||||||
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height']);
|
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height']);
|
||||||
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight']);
|
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight']);
|
||||||
const statusBartop = ref(uni.getMenuButtonBoundingClientRect()['top']);
|
const statusBartop = ref(uni.getMenuButtonBoundingClientRect()['top']);
|
||||||
const ButtonWidth = ref(uni.getMenuButtonBoundingClientRect().width);
|
const ButtonWidth = ref(uni.getMenuButtonBoundingClientRect().width);
|
||||||
const ButtonHeight = ref(uni.getMenuButtonBoundingClientRect().height)
|
const ButtonHeight = ref(uni.getMenuButtonBoundingClientRect().height)
|
||||||
|
//登录授权
|
||||||
//定义数据修改的方法(action)
|
const wechatlogin = (params,query)=>{
|
||||||
const clickSType = (params)=>{
|
return apiService.post(`api/front/wechat/authorize/program/login?code=${query}`,params)
|
||||||
return apiService.post('/product/getPictureShareUrl',params)
|
}
|
||||||
|
//首页楼层
|
||||||
|
const frontindex = (params)=>{
|
||||||
|
return apiService.get('api/front/index',params)
|
||||||
|
}
|
||||||
|
//首页列表数据
|
||||||
|
const frontproduct = (type,params,token)=>{
|
||||||
|
return apiService.get(`api/front/product/${type}`,params,token)
|
||||||
|
}
|
||||||
|
//商品详情接口
|
||||||
|
const frontdetail = (type,params,token)=>{
|
||||||
|
return apiService.get(`api/front/product/detail/${type}`,params,token)
|
||||||
|
}
|
||||||
|
//商品详情评论列表
|
||||||
|
const replyproduct = (type,params,token)=>{
|
||||||
|
return apiService.get(`api/front/reply/product/${type}`,params,token)
|
||||||
|
}
|
||||||
|
//商品评论数量
|
||||||
|
const replyconfig = (type,params,token)=>{
|
||||||
|
return apiService.get(`api/front/reply/config/${type}`,params,token)
|
||||||
|
}
|
||||||
|
//商品评论数量
|
||||||
|
const replylist = (params,token)=>{
|
||||||
|
return apiService.get(`api/front/reply/list`,params,token)
|
||||||
}
|
}
|
||||||
//定义getters
|
|
||||||
// const doubleCount = computed(()=>count.value * 2)
|
|
||||||
|
|
||||||
|
|
||||||
//以对象的形式return供组件调用
|
//以对象的形式return供组件调用
|
||||||
return{
|
return{
|
||||||
|
nikeName,
|
||||||
|
key,
|
||||||
|
token,
|
||||||
|
phone,
|
||||||
|
uid,
|
||||||
ButtonWidth,
|
ButtonWidth,
|
||||||
ButtonHeight,
|
ButtonHeight,
|
||||||
statusHeight,
|
statusHeight,
|
||||||
headerHeight,
|
headerHeight,
|
||||||
statusBartop,
|
statusBartop,
|
||||||
clickSType
|
wechatlogin,
|
||||||
|
frontindex,
|
||||||
|
frontproduct,
|
||||||
|
frontdetail,
|
||||||
|
replyproduct,
|
||||||
|
replyconfig,
|
||||||
|
replylist
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
Loading…
Reference in New Issue
Block a user