215 lines
6.9 KiB
Vue
215 lines
6.9 KiB
Vue
<template>
|
||
<view class="main">
|
||
<!-- 头部区域 -->
|
||
<view class="head" :style="{'padding-top':headerHeight+'px'}" >
|
||
<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">
|
||
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
|
||
<input class="head_search_input" disabled="true" type="text" placeholder="请输入搜索内容" />
|
||
<view class="head_search_btn">搜索</view>
|
||
</view>
|
||
</view>
|
||
<!-- 推荐区域 -->
|
||
<view class="grid_top">
|
||
<view class="head_fixed" :style="{'height':statusHeight+headerHeight+43+'px'}">下拉刷新...</view>
|
||
<view class="grid_wrap">
|
||
<view class="grid_wrap_l">
|
||
<image class="grid_wrap_live" src=""></image>
|
||
<view class="grid_wrap_live_title"><image class="grid_wrap_live_img" src="../../static/index/v.png"></image>直播</view>
|
||
</view>
|
||
<view class="grid_wrap_r">
|
||
<view class="grid_wrap_li" @click="goAi()">
|
||
<view class="grid_wrap_li_l">
|
||
<view class="grid_wrap_li_title"><text>学做菜</text></view>
|
||
<view class="grid_wrap_li_desc">简单又快捷</view>
|
||
</view>
|
||
<image class="grid_wrap_li_r" src="../../static/index/AI.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="grid_wrap_li grid_wrap_top" @click="goAssList()">
|
||
<view class="grid_wrap_li_l">
|
||
<view class="grid_wrap_li_title"><text>极速退款</text></view>
|
||
<view class="grid_wrap_li_desc">食材有问题？</view>
|
||
</view>
|
||
<image class="grid_wrap_li_r" src="../../static/index/refund_img.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 滚动区域 -->
|
||
<view class="scroll_view">
|
||
<scroll-view class="typescoll" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||
<view class="scroll_view_li" v-for="(item,index) in homeList" :key="index">
|
||
<view class="scroll_view_banner" @click="JumpType(item)">
|
||
<image class="scroll_view_bannerimg" :src="item.imgUrl" mode="widthFix" lazy-load="true"></image>
|
||
</view>
|
||
<view class="scroll_view_shop" v-for="(i,dex) in item.items" :key="dex" @click="JumpType(i)">
|
||
<view class="scroll_view_shop_l">
|
||
<image class="scroll_view_shop_no" :src="`../../static/index/no${dex+1}.png`"></image>
|
||
<image class="scroll_view_shop_img" :src="i.imgUrl" mode="widthFix" lazy-load="true"></image>
|
||
</view>
|
||
<view class="scroll_view_shop_r">
|
||
<view class="scroll_view_shop_title">{{i.name}}<text class="scroll_view_shop_desc">{{i.title}}</text></view>
|
||
<view class="scroll_view_shop_tag" v-if="i.productInfo.tagList.length">
|
||
<view class="scroll_view_shop_li" v-for="(t,g) in i.productInfo.tagList" :key="g">{{t}}</view>
|
||
</view>
|
||
<view class="scroll_view_shop_bottom">
|
||
<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" @click.stop="addCart(i)">
|
||
<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 商品区域 -->
|
||
<recomGoods v-if="token" :apiType="1"></recomGoods>
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="footer">
|
||
<view class="footer_cont">
|
||
<view class="footer_cont_l" @click="goCarts()">
|
||
<view class="footer_cont_cart">
|
||
<view class="footer_cont_num">3</view>
|
||
<image class="footer_cont_img" src="../../static/index/cart_img.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="footer_cont_m">
|
||
<view class="footer_cont_m_price">43.9</view>
|
||
<view class="footer_cont_m_desc">已优惠20元</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_cont_btn" @click="orderConfirm">去下单</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import recomGoods from '@/components/recomGoods/recomGoods.vue';
|
||
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
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,nikeName,key,token,phone,uid } = storeToRefs(counterStore);
|
||
//使用pinia：方法还是从原来的counterStore中解构赋值
|
||
const { wechatlogin,frontindex,frontproduct } = counterStore;
|
||
const homeList = ref([]);
|
||
const shopList = ref([]);
|
||
const total = ref(0);
|
||
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);
|
||
}
|
||
})
|
||
}
|
||
//授权小程序登录api
|
||
const api_login=(code)=>{
|
||
const params = {}
|
||
return wechatlogin(params,code).then(({data}) => {
|
||
nikeName.value = data.nikeName
|
||
key.value = data.key
|
||
token.value = data.token
|
||
phone.value = data.phone
|
||
uid.value = data.uid
|
||
})
|
||
.then(()=>api_index())
|
||
.catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
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=()=>{
|
||
uni.navigateTo({
|
||
url:`/order/orderConfirm/orderConfirm`
|
||
})
|
||
}
|
||
const goAi=()=>{
|
||
uni.navigateTo({
|
||
url:`/userserve/aiserve/aiserve`
|
||
})
|
||
};
|
||
const goAssList=()=>{
|
||
uni.navigateTo({
|
||
url:`/order/assList/assList`
|
||
})
|
||
}
|
||
const goCarts=()=>{
|
||
uni.switchTab({
|
||
url:`/pages/cart/cart`
|
||
})
|
||
}
|
||
const location=()=>{
|
||
uni.navigateTo({
|
||
url:`/userserve/location/location`
|
||
})
|
||
}
|
||
const onSearch=()=>{
|
||
uni.navigateTo({
|
||
url:`/userserve/SearchProduct/SearchProduct`
|
||
})
|
||
}
|
||
onLoad((options) => {wxlogin()});
|
||
onShow(() => {});
|
||
onPullDownRefresh(()=>{
|
||
api_index();
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
onReachBottom(()=>{});
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |