Skip to content

Y
yongxinda-h5
提交 5484b168 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

首页80%

上级 a2bab482
隐藏空白字符变更
内嵌 并排
正在显示 包含 612 行增加 和 587 行删除
src/api/index.ts 0 → 100644
浏览文件 @ 5484b168
import { request } from '@/utils/request';
export const homeIndex = () => request('/wx/home/index', 'GET');
export const indexDetails = (data: any) => request('/wx/goods/detail', 'GET', data);
src/pages/goods/index.vue
浏览文件 @ 5484b168
<template> <template>
<view class="goods-detail"> <view class="goods-detail">
<view class="goods-img"> <!-- 轮播图 -->
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="false"> <view class="wrap"><u-swiper :list="detailData?.info.gallery" img-mode="scaleToFill" height="700"></u-swiper></view>
<swiper-item v-for="(item, index) in goodsInfo.imgList" :key="index">
<view class="swiper-item"> <!-- 商品详情 -->
<image class="banner" :src="item.img"/> <view class="goods-info">
</view> <uni-row>
</swiper-item> <uni-col :span="24">
</swiper> <text class="goods-title">{{ detailData?.info.name }}</text>
</view> </uni-col>
</uni-row>
<view class="goods-info"> <uni-row style="margin: 4rpx 0 10rpx;">
<uni-row> <uni-col :span="24">
<uni-col :span="24"> <text class="goods-sub">{{ detailData?.info.brief }}</text>
<text class="goods-title">{{ goodsInfo.title }}</text> </uni-col>
</uni-col> </uni-row>
</uni-row> <uni-row>
<uni-row> <uni-col :span="3">
<uni-col :span="24"> <text class="goods-price">
<text class="goods-price"> <text class="unit">￥</text>
<text class="unit">￥</text> <text class="price">{{ detailData?.info.retailPrice }}</text>
<text class="price">{{ goodsInfo.price }}</text> </text>
</text> </uni-col>
</uni-col> <uni-col :span="21" style="margin-top: 18rpx;">
</uni-row> <text class="goods-cost-price">
</view> <text class="unit">￥</text>
<text class="price">{{ detailData?.info.counterPrice }}</text>
<view class="goods-detail-item"> </text>
<uni-row> </uni-col>
<view> </uni-row>
<view @click="openPopup"> </view>
<uni-col :span="24">
<text v-if="!selectedGoodsItem.specName">选择规格</text> <u-cell-group style="margin-top: 20rpx;">
<text v-else> <u-cell-item v-if="!selectedGoodsItem.specName" icon="" title="规格" value="请选择" :index="0" @click="clickGroup"></u-cell-item>
已选：{{selectedGoodsItem.specName}} * {{selectedGoodsItem.num}} <u-cell-item v-else icon="" :title="'已选：' + selectedGoodsItem.specName + '*' + selectedGoodsItem.num" :arrow="false" :index="0" @click="clickGroup"></u-cell-item>
</text> <u-cell-item icon="" title="属性" :index="1" @click="clickGroup"></u-cell-item>
</uni-col> <u-cell-item icon="" title="运费" value="满88免邮费" :arrow="false" :border-bottom="false"></u-cell-item>
</view> </u-cell-group>
<uni-popup ref="popup" type="bottom" :safe-area="true" background-color="#FFFFFF">
<view class="popup-selected-spec"> <!-- 规格弹窗 -->
<view class="goods-item"> <view class="goods-detail-item">
<image class="goods-mini-img" :src="selectedGoodsItem.img"/> <uni-row>
<view class="goods-text"> <view>
<text class="goods-price"> <uni-popup ref="popup" type="bottom" :safe-area="true" background-color="#FFFFFF">
<text class="unit">￥</text> <view class="popup-selected-spec">
<text class="price">{{ selectedGoodsItem.price }}</text> <view class="goods-item">
</text> <image class="goods-mini-img" :src="selectedGoodsItem.img" />
<text class="goods-selected"> <view class="goods-text">
<text>已选：</text> <text class="goods-price">
<text v-if="selectedGoodsItem.specName"> <text class="unit">￥</text>
{{selectedGoodsItem.specName}} * {{selectedGoodsItem.num}} <text class="price">{{ selectedGoodsItem.price }}</text>
</text> </text>
</text> <text class="goods-selected">
</view> <text>已选：</text>
<text v-if="selectedGoodsItem.specName">{{ selectedGoodsItem.specName }} * {{ selectedGoodsItem.num }}</text>
</view> </text>
<uni-section class="mb-10" title="颜色"> </view>
<view class="goods-spec"> </view>
<uni-data-checkbox mode="tag" v-model="radioValue" :localdata="goodsInfo.spec" @change="changeColor"/> <uni-section class="mb-10" title="颜色">
</view> <view class="goods-spec"><uni-data-checkbox mode="tag" v-model="radioValue" :localdata="goodsInfo.spec" @change="changeColor" /></view>
</uni-section> </uni-section>
<uni-section class="mb-10" title="数量"> <uni-section class="mb-10" title="数量">
<view class="goods-spec"> <view class="goods-spec"><uni-number-box :min="1" :max="99" @change="changeBuyNum" /></view>
<uni-number-box :min="1" :max="99" @change="changeBuyNum" /> </uni-section>
</view> </view>
</uni-section> <view class="popup-bottom-button">
</view> <view v-if="showPopupButton === 0" class="add-to-cart" @click="addToCart"><text>确定</text></view>
<view class="popup-bottom-button"> <view v-else class="buy-now" @click="buyNow"><text>购买</text></view>
<view v-if="showPopupButton === 0" class="add-to-cart" @click="addToCart"> </view>
<text>确定</text> </uni-popup>
</view> </view>
<view v-else class="buy-now" @click="buyNow"> </uni-row>
<text>购买</text> </view>
</view>
</view> <!-- <view class="shop-info">
</uni-popup> <view class="shop-logo-box"><image class="shop-logo" src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png" /></view>
</view> <view class="shop-desc">
</uni-row> <view class="shop-name"><text>Apple官方旗舰店</text></view>
</view> </view>
<view class="shop-enter-button"><text>进店逛逛</text></view>
<view class="shop-info"> </view> -->
<view class="shop-logo-box">
<image class="shop-logo" src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png"/> <view class="goods-intro">
</view> <uni-segmented-control :current="current" :values="tabButtons" @clickItem="onClickItem" styleType="text" activeColor="#e43d33"></uni-segmented-control>
<view class="shop-desc"> <view class="content">
<view class="shop-name"> <view v-show="current === 0"><u-parse :html="detailData?.info.detail" :show-with-animation="true" lazy-load style="font-size: 0" /></view>
<text>Apple官方旗舰店</text> <view v-show="current === 1">选项卡2的内容</view>
</view> </view>
</view> </view>
<view class="shop-enter-button"> <!-- 提交订单栏 -->
<text>进店逛逛</text> <view class="bottom-bar"><uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view>
</view>
</view> <!-- 属性弹窗 -->
<u-popup v-model="attrPopup" mode="bottom" height="50%" closeable>
<view class="goods-intro"> <view class="attr-content">
<!-- <scroll-view scroll-y="{{true}}" style="width:100%;height:{{sysheight}}px;">--> <view class="title">商品属性</view>
<!-- <view class="img-size">--> <view v-for="(item, index) in detailData?.attribute" :key="item.id" class="details">
<!-- <image src="/static/img/goods/detail.png" mode="widthFix" class="liucheng-img"></image>--> <text class="left">{{ item.attribute }}</text>
<!-- </view>--> <text class="right">{{ item.value }}</text>
<!-- </scroll-view>--> <u-line v-show="detailData?.attribute.length-1 !== index" />
<uni-segmented-control :current="current" :values="tabButtons" @clickItem="onClickItem" styleType="text" activeColor="#e43d33"></uni-segmented-control> </view>
<view class="content"> </view>
<view v-show="current === 0"> </u-popup>
<rich-text :nodes="goodsInfo.detail" /> </view>
</view>
<view v-show="current === 1">
选项卡2的内容
</view>
</view>
</view>
<view class="bottom-bar">
<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick"
@buttonClick="buttonClick"/>
</view>
</view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref} from "vue"; import { ref } from 'vue';
import {GoodsItem} from "@/types/goods"; import { onLoad } from '@dcloudio/uni-app';
import { indexDetails } from '@/api/index';
const attrPopup = ref(false);
const detailData = ref();
onLoad((options: any) => {
console.log(options.id);
indexDetails({ id: options.id }).then((res: any) => {
if (res.data.code === 200) {
}
for (let s in res.data.data?.attribute) {
const value = res.data.data?.attribute[s].value.split('\n')
if(value.length > 1) {
let str: string = ''
value.forEach((item : string) => {
str += ' ' + item
})
res.data.data!.attribute[s].value = str
}
}
detailData.value = res.data.data;
console.log(detailData.value, '商品详情数据');
});
});
const clickGroup = (index: number) => {
switch (index) {
case 0:
popup.value.open('bottom');
resetSelected();
break;
case 1:
attrPopup.value = true;
}
};
const indicatorDots = ref(true); const indicatorDots = ref(true);
const popup = ref(); const popup = ref();
const tabButtons = ref(['详情','评论']) const tabButtons = ref(['商品详情']);
let current = ref(0) let current = ref(0);
const goodsInfo = ref({ const goodsInfo = ref({
id: 1, id: 1,
title: 'Iphone 13 Pro Max 256G 全网通 国行正品', title: 'Iphone 13 Pro Max 256G 全网通 国行正品',
price: '5000.00', price: '5000.00',
star: true, star: true,
detail: '<img style="max-width: 100%; height: auto" src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/detail.png" mode="widthFix"/>', detail: '<img style="max-width: 100%; height: auto" src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/detail.png" mode="widthFix"/>',
imgList: [ imgList: [
{ {
id: 1, id: 1,
img: `https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg` img: `https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg`
}, { },
id: 2, {
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_2.jpg' id: 2,
}, { img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_2.jpg'
id: 3, },
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_3.jpg' {
} id: 3,
], img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_3.jpg'
spec: [ }
{ ],
value: 1, spec: [
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg', {
text: '石墨色', value: 1,
price: '5000.00' img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg',
}, { text: '石墨色',
value: 2, price: '5000.00'
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_2.jpg', },
text: '远峰蓝', {
price: '5100.00' value: 2,
}, { img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_2.jpg',
value: 3, text: '远峰蓝',
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_3.jpg', price: '5100.00'
text: '银色', },
price: '5099.00' {
} value: 3,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_3.jpg',
] text: '银色',
price: '5099.00'
}
]
}); });
const selectedGoodsItem = ref({ const selectedGoodsItem = ref({
id: '', id: '',
specName: '', specName: '',
img: '', img: '',
price: '', price: '',
num: 1 num: 1
}) });
const radioValue = ref(selectedGoodsItem.value.id) const radioValue = ref(selectedGoodsItem.value.id);
const options = ref([ const options = ref([
{ {
icon: 'chat', icon: 'chat',
text: '客服' text: '客服'
}, { },
icon: 'shop', {
text: '店铺' icon: 'shop',
}, { text: '店铺'
icon: goodsInfo.value.star ? 'star-filled' : 'star', },
text: '收藏' {
} icon: goodsInfo.value.star ? 'star-filled' : 'star',
text: '收藏'
}
]); ]);
const buttonGroup = ref([ const buttonGroup = ref([
{ {
text: '加入购物车', text: '加入购物车',
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)', backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
color: '#fff' color: '#fff'
}, },
{ {
text: '立即购买', text: '立即购买',
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)', backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff' color: '#fff'
} }
]); ]);
const onClick = (e: any) => { const onClick = (e: any) => {
if (e.index === 0) { if (e.index === 0) {
console.log('客服') console.log('客服');
} }
if (e.index === 1) { if (e.index === 1) {
console.log('店铺') console.log('店铺');
} }
if (e.index === 2) { if (e.index === 2) {
console.log('收藏') console.log('收藏');
goodsInfo.value.star = !goodsInfo.value.star goodsInfo.value.star = !goodsInfo.value.star;
e.content.icon = goodsInfo.value.star ? 'star-filled' : 'star' e.content.icon = goodsInfo.value.star ? 'star-filled' : 'star';
let text = '' let text = '';
text = goodsInfo.value.star ? '已收藏' : '已取消收藏' text = goodsInfo.value.star ? '已收藏' : '已取消收藏';
uni.showToast({ uni.showToast({
title: text, title: text,
icon: "none" icon: 'none'
}) });
} }
};
}
/** /**
* popup中按钮展示状态 * popup中按钮展示状态
*/ */
const showPopupButton = ref(0) const showPopupButton = ref(0);
const buttonClick = (e: any) => { const buttonClick = (e: any) => {
if (e.index === 0) {
if (e.index === 0) { console.log('加入购物车');
console.log('加入购物车') showPopupButton.value = 0;
showPopupButton.value = 0 }
} if (e.index === 1) {
if (e.index === 1) { console.log('立即购买');
console.log('立即购买') showPopupButton.value = 1;
showPopupButton.value = 1 }
} openPopup();
openPopup() };
}
const openPopup = () => { const openPopup = () => {
console.log('打开popup', popup) popup.value.open('bottom');
popup.value.open('bottom')
resetSelected() resetSelected();
};
}
const addToCart = () => { const addToCart = () => {
console.log('添加至购物车', selectedGoodsItem.value) console.log('添加至购物车', selectedGoodsItem.value);
popup.value.close() popup.value.close();
uni.showToast({ uni.showToast({
title: '已添加至购物车', title: '已添加至购物车',
icon: "success" icon: 'success'
}) });
} };
const buyNow = () => { const buyNow = () => {
console.log('立即购买', selectedGoodsItem.value) console.log('立即购买', selectedGoodsItem.value);
popup.value.close() popup.value.close();
} };
const resetSelected = () => { const resetSelected = () => {
selectedGoodsItem.value.id = goodsInfo.value.id; selectedGoodsItem.value.id = goodsInfo.value.id;
selectedGoodsItem.value.img = goodsInfo.value.imgList[0].img; selectedGoodsItem.value.img = goodsInfo.value.imgList[0].img;
selectedGoodsItem.value.price = goodsInfo.value.price; selectedGoodsItem.value.price = goodsInfo.value.price;
selectedGoodsItem.value.specName = ''; selectedGoodsItem.value.specName = '';
selectedGoodsItem.value.num = 1; selectedGoodsItem.value.num = 1;
radioValue.value = ''; radioValue.value = '';
} };
const changeColor = (e: any) => { const changeColor = (e: any) => {
console.log(e) console.log(e);
const selected = e.detail.data const selected = e.detail.data;
selectedGoodsItem.value.id = selected.id selectedGoodsItem.value.id = selected.id;
selectedGoodsItem.value.img = selected.img selectedGoodsItem.value.img = selected.img;
selectedGoodsItem.value.price = selected.price selectedGoodsItem.value.price = selected.price;
selectedGoodsItem.value.specName = selected.text selectedGoodsItem.value.specName = selected.text;
};
}
const changeBuyNum = (value: number) => { const changeBuyNum = (value: number) => {
selectedGoodsItem.value.num = value selectedGoodsItem.value.num = value;
} };
const onClickItem = (e: any) => { const onClickItem = (e: any) => {
if (current.value != e.currentIndex) { if (current.value != e.currentIndex) {
current.value = e.currentIndex; current.value = e.currentIndex;
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.goods-detail { .goods-detail {
//height: 800rpx; //height: 800rpx;
//background-color: #FFFFFF; //background-color: #FFFFFF;
.goods-img { .goods-img {
.swiper { .swiper {
height: 600rpx; height: 600rpx;
.swiper-item { .swiper-item {
display: block; display: block;
height: 100%; height: 100%;
line-height: 600rpx; line-height: 600rpx;
text-align: center; text-align: center;
.banner { .banner {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
} }
.goods-info { .goods-info {
//height: 200rpx; //height: 200rpx;
background-color: #FFFFFF; background-color: #ffffff;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
font-family: arial, sans-serif; font-family: arial, sans-serif;
border-bottom-left-radius: 30rpx; border-bottom-left-radius: 30rpx;
border-bottom-right-radius: 30rpx; border-bottom-right-radius: 30rpx;
.goods-title { .goods-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
display: -webkit-box; display: -webkit-box;
word-break: break-all; word-break: break-all;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.goods-price { .goods-sub {
color: #dd524d; font-size: 12px;
margin-top: 10rpx; color: #ccc;
//position: absolute; display: -webkit-box;
display: flex; word-break: break-all;
text-overflow: ellipsis;
.unit { overflow: hidden;
font-size: 10px; -webkit-box-orient: vertical;
} -webkit-line-clamp: 2;
}
.price { .goods-price {
font-size: 16px; color: #dd524d;
font-weight: bold //position: absolute;
} font-size: 40rpx;
} display: flex;
.unit {
} // font-size: 10px;
}
.goods-detail-item {
margin-top: 20rpx; .price {
background-color: #FFFFFF; // font-size: 16px;
padding: 20rpx 30rpx; font-weight: bold;
font-size: 30rpx; }
font-family: arial, sans-serif; }
color: rgb(192, 192, 192); .goods-cost-price {
border-radius: 30rpx; color: #ccc;
text-decoration: line-through;
.popup-selected-spec { font-size: 24rpx;
height: 800rpx; margin-left: 10rpx;
//background-color: #FFFFFF; }
}
.goods-item { .cell-group {
padding: 40rpx; margin-top: 20rpx;
display: flex; border-radius: 30rpx;
border-bottom: 1px solid #ebeef5; }
//position: absolute; .goods-detail-item {
.goods-mini-img { margin-top: 20rpx;
width: 100rpx; background-color: #ffffff;
height: 100rpx; // padding: 20rpx 30rpx;
border-radius: 10rpx; font-size: 30rpx;
//border: 2rpx soild black; font-family: arial, sans-serif;
} color: rgb(192, 192, 192);
// border-radius: 30rpx;
.goods-text {
margin-top: 10rpx; .popup-selected-spec {
margin-left: 50rpx; height: 800rpx;
.goods-price { //background-color: #FFFFFF;
color: #dd524d;
display: flex; .goods-item {
.unit { padding: 40rpx;
font-size: 10px; display: flex;
} border-bottom: 1px solid #ebeef5;
.price { //position: absolute;
font-size: 16px; .goods-mini-img {
font-weight: bold width: 100rpx;
} height: 100rpx;
} border-radius: 10rpx;
.goods-selected { //border: 2rpx soild black;
margin-top: 20rpx; }
display: flex;
} .goods-text {
} margin-top: 10rpx;
} margin-left: 50rpx;
.goods-spec { .goods-price {
margin-left: 30rpx; color: #dd524d;
} display: flex;
} .unit {
.popup-bottom-button { font-size: 10px;
height: 80rpx; }
display: flex; .price {
flex: 1; font-size: 16px;
color: rgb(255, 255, 255); font-weight: bold;
.add-to-cart { }
display: flex; }
flex: 1; .goods-selected {
margin: 0 30rpx 0 50rpx; margin-top: 20rpx;
justify-content: center; display: flex;
align-items: center; }
overflow: hidden; }
border-radius: 50rpx; }
background: linear-gradient(90deg, rgb(255, 205, 30), rgb(255, 138, 24)); .goods-spec {
} margin-left: 30rpx;
.buy-now { }
display: flex; }
flex: 1; .popup-bottom-button {
margin: 0 50rpx 0 30rpx; height: 80rpx;
justify-content: center; display: flex;
align-items: center; flex: 1;
overflow: hidden; color: rgb(255, 255, 255);
border-radius: 50rpx; .add-to-cart {
background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36)); display: flex;
} flex: 1;
margin: 0 30rpx 0 50rpx;
} justify-content: center;
} align-items: center;
overflow: hidden;
.shop-info { border-radius: 50rpx;
height: 160rpx; background: linear-gradient(90deg, rgb(255, 205, 30), rgb(255, 138, 24));
background-color: #FFFFFF; }
margin-top: 20rpx; .buy-now {
border-radius: 30rpx; display: flex;
display: flex; flex: 1;
.shop-logo-box { margin: 0 50rpx 0 30rpx;
padding: 30rpx; justify-content: center;
height: 100rpx; align-items: center;
width: 100rpx; overflow: hidden;
border-radius: 10rpx; border-radius: 50rpx;
overflow: hidden; background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
.shop-logo { }
width: 100%; }
height: 100%; }
object-fit: cover;
} .shop-info {
} height: 160rpx;
background-color: #ffffff;
.shop-desc { margin-top: 20rpx;
flex: 1; border-radius: 30rpx;
.shop-name { display: flex;
font-weight: bold; .shop-logo-box {
font-family: 'Helvetica Neue', Helvetica, sans-serif; padding: 30rpx;
line-height: 160rpx; height: 100rpx;
} width: 100rpx;
border-radius: 10rpx;
} overflow: hidden;
.shop-enter-button { .shop-logo {
line-height: 160rpx; width: 100%;
padding-right: 30rpx; height: 100%;
text { object-fit: cover;
color: rgb(255, 138, 24); }
font-size: 24rpx; }
padding: 5rpx 15rpx;
border: 1rpx solid rgb(254, 96, 53); .shop-desc {
border-radius: 10rpx; flex: 1;
} .shop-name {
} font-weight: bold;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
} line-height: 160rpx;
.goods-intro { }
//height: 160rpx; }
background-color: #FFFFFF; .shop-enter-button {
margin-top: 20rpx; line-height: 160rpx;
border-radius: 30rpx; padding-right: 30rpx;
text {
.content { color: rgb(255, 138, 24);
margin-top: 30rpx; font-size: 24rpx;
margin-bottom: calc(100rpx + env(safe-area-inset-bottom)); padding: 5rpx 15rpx;
display: inline-block; border: 1rpx solid rgb(254, 96, 53);
} border-radius: 10rpx;
} }
}
.bottom-bar { }
display: flex; .goods-intro {
flex-direction: column; //height: 160rpx;
position: fixed; background-color: #ffffff;
left: var(--window-left); margin-top: 20rpx;
right: var(--window-right); border-radius: 30rpx;
bottom: 0;
padding-bottom: constant(safe-area-inset-bottom); .content {
background-color: #FFFFFF; margin-top: 30rpx;
padding-bottom: env(safe-area-inset-bottom); margin-bottom: calc(100rpx + env(safe-area-inset-bottom));
} display: inline-block;
}
}
.bottom-bar {
display: flex;
flex-direction: column;
position: fixed;
left: var(--window-left);
right: var(--window-right);
bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
background-color: #ffffff;
padding-bottom: env(safe-area-inset-bottom);
}
} }
.attr-content {
padding: 32rpx 40rpx;
.title {
text-align: center;
margin-bottom: 100rpx;
}
.details {
width: 100%;
font-size: 14px;
.left {
display: inline-block;
width: 40%;
padding: 20rpx 0;
}
.right {
padding: 20rpx 0;
}
}
}
</style> </style>
src/pages/index/index.vue
浏览文件 @ 5484b168
<template> <template>
<!-- 搜索 -->
<view><uni-search-bar placeholder="输入搜索商品" bgColor="#EEEEEE" clearButton="auto" cancelButton="none" @blur="blur" @focus="focus" @confirm="search" /></view> <view><uni-search-bar placeholder="输入搜索商品" bgColor="#EEEEEE" clearButton="auto" cancelButton="none" @blur="blur" @focus="focus" @confirm="search" /></view>
<!-- 轮播图 -->
<view> <view class="wrap"><u-swiper :list="indexData?.banner" name="url" height="400"></u-swiper></view>
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"> <!-- 宫格布局 -->
<swiper-item v-for="(item, index) in bannerList" :key="index"> <u-grid :col="4" class="grid" @click="clickGrid">
<view class="swiper-item"><image class="banner" :src="item.img" /></view> <u-grid-item v-for="(item, index) in indexData?.channel" :key="item.id" :index="item.id">
</swiper-item> <u-icon :name="item.iconUrl" :size="46"></u-icon>
</swiper> <view class="grid-text">{{ item.name }}</view>
</view> </u-grid-item>
</u-grid>
<view>
<uni-grid :column="4" :showBorder="false">
<uni-grid-item v-for="(item, index) in gridList" :key="index">
<uni-icons :type="item.icon" :size="30" color="#777" />
<text class="text">{{ item.text }}</text>
</uni-grid-item>
</uni-grid>
</view>
<view class="goods"> <view class="goods">
<uni-row> <uni-row>
<uni-col :span="12" v-for="(item, index) in goodsList" :key="index"> <uni-col :span="12" v-for="(item, index) in indexData?.newGoodsList" :key="item.id">
<view class="goods-item" @click="viewGoods(item)"> <view class="goods-item" @click="viewGoods(item)">
<image class="goods-img" :src="item.img"></image> <image class="goods-img" :src="item.picUrl"></image>
<view class="goods-infos"> <view class="goods-infos">
<uni-row> <uni-row>
<uni-col :span="24"> <uni-col :span="24">
<text class="goods-title">{{ item.title }}</text> <text class="goods-title">{{ item.name }}</text>
</uni-col> </uni-col>
<uni-col> <uni-col>
<uni-row> <uni-row>
<uni-col :span="12"> <uni-col :span="24">
<text class="goods-price"> <text class="goods-price">
<text class="unit">￥</text> <text class="unit">￥</text>
<text class="price">{{ item.price }}</text> <text class="price">{{ item.counterPrice }}</text>
</text> </text>
</uni-col> </uni-col>
<uni-col :span="12"> <!-- <uni-col :span="12">
<text class="goods-sales-count"> <text class="goods-sales-count">
<text>销量</text> <text>销量</text>
<text>{{ item.sales }}</text> <text>{{ item.sales }}</text>
</text> </text>
</uni-col> </uni-col> -->
</uni-row> </uni-row>
</uni-col> </uni-col>
</uni-row> </uni-row>
...@@ -54,90 +47,34 @@ ...@@ -54,90 +47,34 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { GoodsItem } from '@/types/goods'; import { homeIndex } from '@/api/index';
// import { GoodsItem } from '@/types/goods';
const indicatorDots = ref(true); const indexData = ref();
const autoplay = ref(true);
const interval = ref(3000);
const duration = ref(1500);
const bannerList = ref([ const clickGrid = (index: any) => {
{ console.log(index);
id: 1, };
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/banner/banner1.jpg'
},
{
id: 2,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/banner/banner2.jpg'
},
{
id: 3,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/banner/banner3.jpg'
}
]);
const gridList = ref([
{
icon: 'phone-filled',
text: '手机'
},
{
icon: 'phone',
text: '电脑'
},
{
icon: 'phone',
text: '家电'
},
{
icon: 'phone',
text: '更多'
}
]);
const goodsList = ref([ const viewGoods = (row: any) => {
{ uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
id: 1, };
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg',
title: 'Iphone 13 Pro Max 256G 全网通 国行正品',
price: '5000.00',
sales: 1000
},
{
id: 2,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_2.jpg',
title: 'Iphone 13 Pro Max',
price: '5000.00',
sales: 1000
},
{
id: 3,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_3.jpg',
title: 'Iphone 13 Pro Max',
price: '5000.00',
sales: 1000
}
]);
const viewGoods = (row: GoodsItem) => { const initIndex = () => {
console.log('查看商品', row.id); homeIndex().then((res: any) => {
uni.navigateTo({ url: '/pages/goods/index?goodsId=' + row.id }); // console.log(res);
// if (res.data.code === 200) {
indexData.value = res.data.data;
console.log(res, '首页数据');
// }
});
}; };
initIndex();
</script> </script>
<style lang="scss"> <style lang="scss">
.swiper { .grid {
height: 300rpx; padding: 16rpx;
.swiper-item {
display: block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
.banner {
width: 100%;
height: 100%;
}
}
} }
.text { .text {
...@@ -160,7 +97,7 @@ const viewGoods = (row: GoodsItem) => { ...@@ -160,7 +97,7 @@ const viewGoods = (row: GoodsItem) => {
overflow: hidden; overflow: hidden;
.goods-img { .goods-img {
width: 100%; width: 100%;
height: 350rpx; height: 300rpx;
} }
.goods-infos { .goods-infos {
margin: 6rpx 10rpx; margin: 6rpx 10rpx;
...@@ -171,17 +108,19 @@ const viewGoods = (row: GoodsItem) => { ...@@ -171,17 +108,19 @@ const viewGoods = (row: GoodsItem) => {
word-break: break-all; word-break: break-all;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
margin-bottom: 30rpx;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
} }
.goods-price { .goods-price {
color: #dd524d; color: #dd524d;
font-family: arial, sans-serif; font-family: arial, sans-serif;
.unit { display: flex;
font-size: 10px; justify-content: flex-end;
} font-size: 10px;
.price { .price {
font-size: 14px; margin: 40rpx 20rpx 0 0;
font-size: 16px;
font-weight: bold; font-weight: bold;
} }
} }
...@@ -193,16 +132,4 @@ const viewGoods = (row: GoodsItem) => { ...@@ -193,16 +132,4 @@ const viewGoods = (row: GoodsItem) => {
} }
} }
} }
//.grid-item-box {
// flex: 1;
// // position: relative;
// /* #ifndef APP-NVUE */
// display: flex;
// /* #endif */
// flex-direction: column;
// align-items: center !important;
// justify-content: center !important;
// padding: 15px 0;
//}
</style> </style>
src/utils/auth.ts 0 → 100644
浏览文件 @ 5484b168
export const TokenKey: string = 'X-Litemall-Admin-Token'
// 获取指定缓存
export const getCache= (key: string) => {
uni.getStorage({
key: key,
success: (res: any) => {
return res.data
}
})
}
// 获取缓存信息
export const getAllCache= () => {
uni.getStorageInfo({
success: (res: any) => {
return res
}
})
}
// 修改指定缓存
export const setCache = (key: string, data: any) => {
uni.setStorage({
key: key,
data
})
}
// 移除制定缓存
export const renoveCache = (key: any) => {
uni.removeStorage({
key
})
}
// 清除本地缓存
export const clearCache = () => {
uni.clearStorage()
}
\ No newline at end of file
src/utils/config.ts
浏览文件 @ 5484b168
const CONFIG: any = { const CONFIG: any = {
// 开发环境配置 // 开发环境配置
development: { development: {
assetsPath: 'https://m.siccat.com/public/static/images/', // 静态资源路径 assetsPath: 'http://192.168.2.210:8080', // 静态资源路径
baseUrl: 'https://api.test.siccat.com/api/graphql', // 后台接口请求地址 baseUrl: 'http://193.112.67.73:81', // 后台接口请求地址
hostUrl: 'http://m.test.siccat.com/', // H5地址(前端运行地址) hostUrl: 'http://192.168.2.210:8080', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址 websocketUrl: '', // websocket服务端地址
weixinAppId: 'wx47469e48cd51018c' // 微信公众号appid
}, },
// 生产环境配置 // 生产环境配置
production: { production: {
...@@ -14,7 +13,6 @@ const CONFIG: any = { ...@@ -14,7 +13,6 @@ const CONFIG: any = {
// baseUrl: 'https://api.test.siccat.com/api/graphql', // baseUrl: 'https://api.test.siccat.com/api/graphql',
hostUrl: 'https://m.siccat.com/', // H5地址(前端运行地址) hostUrl: 'https://m.siccat.com/', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址 websocketUrl: '', // websocket服务端地址
weixinAppId: 'wx47469e48cd51018c' // 微信公众号appid
} }
}; };
......
src/utils/request.ts
浏览文件 @ 5484b168
...@@ -13,17 +13,17 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?: ...@@ -13,17 +13,17 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
} else { } else {
let pages = getCurrentPages(); let pages = getCurrentPages();
let curRoute = pages[pages.length - 1].route; let curRoute = pages[pages.length - 1].route;
if (curRoute != 'pages/login/login') { // if (curRoute != 'pages/login/login') {
uni.showToast({ // uni.showToast({
icon: 'none', // icon: 'none',
title: '请重新登录', // title: '请重新登录',
success() { // success() {
uni.navigateTo({ // uni.navigateTo({
url: '/pages/login/login' // url: '/pages/login/login'
}); // });
} // }
}); // });
} // }
} }
uni.request({ uni.request({
url: baseUrl + url, url: baseUrl + url,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论