274 lines
11 KiB
Vue
274 lines
11 KiB
Vue
<template>
|
||
<view class="mian">
|
||
<view id="top-layout">
|
||
<!-- 轮播图区域 -->
|
||
<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-item class="shop_swiper_marquees" v-if="imglist.length" v-for="(item,index) in imglist" :key="index">
|
||
<view class="shop_swiper_img">
|
||
<image class="shop_swiper_imgUrl" :src="item" @load="onImageLoad" @click="previewImage(index)"></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="currentNumber">
|
||
<view class="item_currentNumber item_currentNumber_width" v-if="imglist.length"><text>{{currentIndex+1}}/{{imglist.length}}</text></view>
|
||
</view>
|
||
</view>
|
||
<!-- 价格标题区域 -->
|
||
<view class="shop_head">
|
||
<view class="shop_price price">49.9<text class="market_name prices">79.9</text></view>
|
||
<view class="shop_title">新鲜黄牛牛肉200g+9g/份</view>
|
||
<view class="shop_desc">外红里黑属于牛肉内部缺氧导致，切开氧化静置会逐步 氧化发红，不影响食用</view>
|
||
</view>
|
||
<!-- 评论区域 -->
|
||
<view class="shop_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">2025-02-25 来自上海</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">
|
||
<view class="shop_comment_head">
|
||
<view class="shop_comment_head_title">常见问题(2)</view>
|
||
<view class="shop_comment_head_arrow">全部</view>
|
||
</view>
|
||
<view class="shop_ask shop_padding"><text>有的虾头发黑是为什么?</text></view>
|
||
<view class="shop_ask shop_padding"><text>如何判定虾是否新鲜?</text></view>
|
||
<!-- <view class="shop_answer shop_padding">这里填写回答</view> -->
|
||
</view>
|
||
<!-- 图文详情 -->
|
||
<view class="shop_detail">
|
||
<view class="shop_detail_title">图文详情</view>
|
||
<view class="shop_detail_img">
|
||
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20241105-b286a4cf0d1148158e166b858112125a.jpg" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 推荐区域 -->
|
||
<view class="user_title">
|
||
<text class="user_name">为您推荐</text>
|
||
</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 style="height: 200rpx;"></view>
|
||
<!-- 底部 -->
|
||
<view class="footer">
|
||
<view class="footer_cont">
|
||
<view class="footer_l">
|
||
<view class="footer_li">
|
||
<view class="footer_icon">
|
||
<image class="footer_icon_img" src="../../static/shopdetail/collect.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="footer_name">收藏</view>
|
||
</view>
|
||
<view class="footer_li" @click="goCart()">
|
||
<view class="footer_icon">
|
||
<view class="footer_amount">45</view>
|
||
<image class="footer_icon_img" src="../../static/shopdetail/cart.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="footer_name">购物车</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_r">
|
||
<view class="footer_btn border_l">加入购物车</view>
|
||
<view class="footer_btn footer_btn_bcg border_r">立即下单</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed,ref } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
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 imgheights = ref([])
|
||
const currentIndex = ref(0)
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
// const { count,doubleCount } = storeToRefs(counterStore);
|
||
|
||
//获取图片真实宽度
|
||
const onImageLoad = (event) => {
|
||
const { width, height } = event.detail;
|
||
const imageHeight = 750 / (height / width);
|
||
swiperHeight.value = imageHeight;
|
||
};
|
||
const onSwiperChange=(event)=>{
|
||
currentIndex.value = event.detail.current;
|
||
};
|
||
const previewImage=(i)=>{
|
||
uni.previewImage({
|
||
current: i,
|
||
urls:imglist.value
|
||
});
|
||
};
|
||
const goCart=()=>{
|
||
uni.switchTab({
|
||
url:`/pages/cart/cart`
|
||
})
|
||
};
|
||
|
||
onLoad((options) => {
|
||
|
||
});
|
||
onShow(() => {
|
||
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
|
||
})
|
||
onReachBottom(()=>{
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |