code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-08-06 10:57:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 更新项目配置与组件使用

Browse Source 
- 在入口文件中引入uview-plus的配置，优化字体加载逻辑
- 移除manifest.json中不必要的权限描述
- 更新package.json和package-lock.json，添加开发依赖
- 调整多个组件的样式和结构，提升用户体验
- 修复部分组件的逻辑和样式问题，确保兼容性
This commit is contained in:
pikachu1995@126.com
2026-06-30 16:02:40 +08:00
parent f4337fd030
commit e871509bf5
87 changed files with 3546 additions and 1506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
pages/tabbar/cart/cartList.vue
View File

@@ -1,10 +1,17 @@
<template>
<div class="wrapper">
<u-navbar :auto-back="false" title="购物车">
<template #right>
<div class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</div>
</template>
</u-navbar>
<u-navbar
class="cart-navbar"
:style="cartNavbarStyle"
:auto-back="false"
:fixed="true"
:placeholder="true"
:border="false"
left-icon=""
title="购物车"
:right-text="isEdit ? '完成' : '编辑'"
@rightClick="toggleEdit"
></u-navbar>
<!-- 空白页-->
<view v-if="!loading && (cartDetail.cartList == '' || cartDetail.cartList == [] || !cartDetail)" class="empty">
<image src="/static/emptyCart.png" mode="aspectFit"></image>
@@ -19,21 +26,13 @@
:key="index">
<view class="tab">
<view class="store-line">
<u-checkbox-group class="store-line-check">
<!-- #ifndef MP-WEIXIN -->
<u-checkbox shape="circle" :active-color="lightColor" v-model="item.checked"
@change="checkboxChangeDP(item)"></u-checkbox>
<!-- #endif -->
<!-- 微信小程序这里 v-model出现问题，改用:value -->
<!-- #ifdef MP-WEIXIN -->
<u-checkbox shape="circle" :active-color="lightColor" :value="item.checked"
@change="checkboxChangeDP(item)"></u-checkbox>
<!-- #endif -->
</u-checkbox-group>
<span class="store-name wes store-line-desc" @click.stop="navigateToStore(item)">{{
<view class="store-line-check">
<u-checkbox usedAlone shape="circle" :active-color="lightColor" v-model:checked="item.checked"
:label-size="14" @change="(checked) => onStoreCheckChange(item, checked)"></u-checkbox>
</view>
<text class="store-name wes" @click.stop="navigateToStore(item)">{{
item.storeName
}}</span>
<u-icon @click="navigateToStore(item)" size="24" style="margin-left:10rpx;" name="arrow-right"></u-icon>
}}</text>
</view>
<view class="right-col" v-if="item.canReceiveCoupon" @click="navigateToCoupon(item)">
<div class="right-line"></div>
@@ -56,21 +55,13 @@
<view class="goods-row" :class="{ invalid: isInvalid(skuItem) }">
<view class="goods-config">
<view>
<u-checkbox-group v-if="skuItem.invalid == 0 && !skuItem.errorMessage">
<!-- #ifndef MP-WEIXIN -->
<u-checkbox shape="circle" :active-color="lightColor" class="c-left" v-model="skuItem.checked"
@change="checkboxChange(skuItem)"></u-checkbox>
<!-- #endif -->
<!-- 微信小程序这里 v-model出现问题，改用:value -->
<!-- #ifdef MP-WEIXIN -->
<u-checkbox shape="circle" :active-color="lightColor" class="c-left" :value="skuItem.checked"
@change="checkboxChange(skuItem)"></u-checkbox>
<!-- #endif -->
</u-checkbox-group>
<u-checkbox v-if="skuItem.invalid == 0 && !skuItem.errorMessage" usedAlone shape="circle"
:active-color="lightColor" class="c-left" v-model:checked="skuItem.checked"
@change="(checked) => onSkuCheckChange(skuItem, checked)"></u-checkbox>
<span class="invalid" v-else style="font-size: 24rpx">失效</span>
</view>
<u-image border-radius="10" :fade="true" @click="navigateToGoods(skuItem)" width="160rpx" height="160rpx"
:src="skuItem.goodsSku.thumbnail" />
mode="aspectFill" :src="getSkuThumbnail(skuItem.goodsSku.thumbnail)" />
</view>
<view class="goods-content">
<!-- 商品名称 -->
@@ -125,9 +116,10 @@
<!-- 结账 -->
<div class="box box6">
<view class="navL">
<u-checkbox shape="circle" :active-color="lightColor" v-model="checkout" @change="checkOut()" label-size="24">全选
<u-checkbox class="checkout-all" usedAlone shape="circle" :active-color="lightColor" v-model:checked="checkout"
:label-size="12" label="全选" @change="checkOut">
</u-checkbox>
<span class="price">
<span class="price checkout-total">
<div class="prices">
<div class="fullPrice">
<span class="number" v-if="cartDetail && cartDetail.priceDetailDTO">
@@ -183,6 +175,7 @@
import * as API_Trade from "@/api/trade";
import { debounce } from "@/utils/tools.js";
import uniNumberBox from '@/components/uni-number-box'
import config from "@/config/config";
export default {
components:{uniNumberBox}, // 数量加减组件
data() {
@@ -214,10 +207,24 @@ export default {
isEdit: false, // 是否是编辑
checkout: false, //全选按钮
WEIXIN_num: "", //购物车兼容微信步进器
defaultGoodsImage: config.logo,
capsuleInsetRight: 0,
};
},
computed: {
cartNavbarStyle() {
if (!this.capsuleInsetRight) {
return {};
}
return {
"--cart-capsule-inset": `${this.capsuleInsetRight}px`,
};
},
},
mounted() {
this.setCapsuleInset();
// #ifdef MP-WEIXIN
// 小程序默认分享
uni.showShareMenu({ withShareTicket: true });
@@ -242,6 +249,29 @@ export default {
}
},
methods: {
setCapsuleInset() {
// #ifdef MP-WEIXIN
try {
const menuButton = uni.getMenuButtonBoundingClientRect();
const { windowWidth } = uni.getWindowInfo();
this.capsuleInsetRight = windowWidth - menuButton.left + uni.upx2px(8);
} catch (e) {
this.capsuleInsetRight = 90;
}
// #endif
},
toggleEdit() {
this.isEdit = !this.isEdit;
},
getSkuThumbnail(url) {
if (url && /^(https?:)?\/\//.test(String(url))) {
return url;
}
return this.defaultGoodsImage;
},
/**
* 倒数计时
*/
@@ -420,11 +450,11 @@ export default {
/**
* 全选
*/
checkOut() {
API_Trade.checkAll(this.checkout).then((result) => {
checkOut(checked) {
const selected = typeof checked === "boolean" ? checked : this.checkout;
API_Trade.checkAll(selected).then((result) => {
if (result.data.success) {
this.getCardData();
return true;
}
});
},
@@ -440,14 +470,12 @@ export default {
});
},
/**
* 店铺点击
*/
checkboxChangeDP(e) {
// #ifdef MP-WEIXIN
e.checked = !e.checked;
// #endif
this.checkStoreFun(e.storeId, e.checked);
onStoreCheckChange(storeItem, checked) {
this.checkStoreFun(storeItem.storeId, checked);
},
onSkuCheckChange(skuItem, checked) {
this.updateSkuCheckedFun(skuItem.goodsSku.id, checked);
},
/**
@@ -501,15 +529,16 @@ export default {
let checkOuted = true;
for (let i = 0; i < this.cartDetail.cartList.length; i++) {
let item = this.cartDetail.cartList[i];
console.log(item);
item.checked = item.checked == 1;
// 循环出当前商品是否全选
if (item.checked == 0) {
if (!item.checked) {
checkOuted = false;
}
// 如果有拼团活动顺便删除
item.skuList &&
item.skuList.forEach((sku) => {
if (sku.checked == 0) {
sku.checked = sku.checked == 1;
if (!sku.checked) {
checkOuted = false;
}
if(Object.keys(sku.promotionMap).length != 0)
@@ -535,15 +564,6 @@ export default {
}
},
/**
* 选中某个复选框时，由checkbox时触发
*/
checkboxChange(e) {
// #ifdef MP-WEIXIN
e.checked = !e.checked;
// #endif
this.updateSkuCheckedFun(e.goodsSku.id, e.checked);
},
},
};
</script>
@@ -560,9 +580,16 @@ page {
.u-image {
box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
}
.edit{
padding-right: 32rpx;
font-size: 28rpx;
.cart-navbar {
::v-deep .u-navbar__content__right {
padding-right: var(--cart-capsule-inset, 13px);
}
::v-deep .u-navbar__content__right__text {
color: $light-color;
font-size: 28rpx;
}
}
.promotion-notice {
margin-top: 10px;
@@ -593,16 +620,26 @@ page {
}
.store-name {
flex: 1;
min-width: 0;
font-weight: bold;
font-size: 28rpx;
margin-left: 8rpx;
}
.store-arrow {
flex-shrink: 0;
margin-left: 10rpx;
}
.invalid {
filter: grayscale(1);
}
.cart-item {
width: 100%;
border-radius: 0.4em;
transition: 0.35s;
overflow: hidden;
}
/* 空白页 */
@@ -698,11 +735,16 @@ page {
}
.goods-content {
width: 100%;
height: 100%;
flex: 1;
min-width: 0;
margin-left: 20rpx;
overflow: hidden;
> p {
padding-left: 20rpx;
> p,
.sp-name,
.sp-type,
.sp-number {
padding-left: 0;
}
}
@@ -718,25 +760,27 @@ page {
border-right: 1px solid $light-color;
}
.store-line-check,
.store-line-img,
.store-line-desc {
// #ifdef MP-WEIXIN
float: left;
// #endif
.store-line-check {
flex-shrink: 0;
::v-deep .u-checkbox {
margin: 0;
}
}
.store-line {
// #ifndef MP-WEIXIN
display: flex;
// #endif
align-items: center;
flex: 1;
min-width: 0;
overflow: hidden;
flex:10;
}
.goods-config {
display: flex;
align-items: center;
flex-shrink: 0;
::v-deep .invalid {
display: block;
width: 80rpx !important;
@@ -746,15 +790,17 @@ page {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 0 0 0;
padding: 24rpx 0 8rpx;
}
.right-col {
flex:2;
flex-shrink: 0;
display: flex;
align-items: center;
text-align: center;
width: 100rpx;
color: $light-color;
font-size: 26rpx;
margin-left: 16rpx;
> span {
margin-left: 20rpx;
@@ -762,14 +808,10 @@ page {
}
.right-line {
width: 3px;
float: left;
width: 2rpx;
height: 40rpx;
border-left: 1px solid #eeeeee;
::v-deep span {
margin-left: 20rpx;
}
margin-right: 20rpx;
}
.box6 {
@@ -795,6 +837,21 @@ page {
padding: 0 32rpx;
display: flex;
align-items: center;
flex: 1;
min-width: 0;
gap: 24rpx;
.checkout-all {
flex-shrink: 0;
}
::v-deep .u-checkbox {
margin: 0;
}
}
.checkout-total {
margin-left: 8rpx;
}
}

90
pages/tabbar/category/category.vue
View File

@@ -1,13 +1,28 @@
<template>
<view class="category-wrap">
<u-navbar class="navbar" :auto-back="false">
<div class="title">商品分类</div>
<!-- #ifdef H5 -->
<u-search class="nav-search" @click="search" placeholder="搜索商品" :show-action="false"></u-search>
<!-- #endif -->
<!-- #ifndef H5 -->
<u-search class="nav-search" disabled @click="search" placeholder="搜索商品" :show-action="false"></u-search>
<!-- #endif -->
<u-navbar
class="navbar"
:auto-back="false"
:fixed="true"
:placeholder="true"
:border="false"
left-icon=""
title=""
bg-color="#ffffff"
>
<template #left>
<view class="nav-content">
<text class="title">商品分类</text>
<view class="nav-search-wrap" :style="searchBarStyle">
<!-- #ifdef H5 -->
<u-search class="nav-search" @click="search" placeholder="搜索商品" :show-action="false"></u-search>
<!-- #endif -->
<!-- #ifndef H5 -->
<u-search class="nav-search" disabled @click="search" placeholder="搜索商品" :show-action="false"></u-search>
<!-- #endif -->
</view>
</view>
</template>
</u-navbar>
<view class="content">
<scroll-view scroll-y scroll-with-animation class="left-aside">
@@ -26,12 +41,14 @@
<text class="s-item">{{ item.name }}</text>
<!-- 分类详情 -->
<view class="t-list">
<view @click="navigateToList(item.id, children.id)" v-if="children.parentId === item.id" class="t-item" v-for="(children, cIndex) in item.children" :key="children.id"
<template v-for="(children, cIndex) in item.children" :key="children.id">
<view @click="navigateToList(item.id, children.id)" v-if="children.parentId === item.id" class="t-item"
:class="{ 'margin-right': (cIndex + 1) % 3 == 0 }">
<u-image width="70px" height="70px" :src="children.image" :lazy-load="true">
</u-image>
<text>{{ children.name }}</text>
</view>
</template>
</view>
</view>
</scroll-view>
@@ -48,8 +65,17 @@ export default {
tabList: [], //左侧标题列表
categoryList: [], //右侧分类数据列表
topImg: "", //顶部图片
searchBarWidth: 0, //导航栏搜索框宽度（避让微信胶囊）
};
},
computed: {
searchBarStyle() {
if (this.searchBarWidth) {
return { width: `${this.searchBarWidth}px` };
}
return { width: "460rpx" };
},
},
onLoad() {
this.loadData();
// #ifdef MP-WEIXIN
@@ -57,7 +83,29 @@ export default {
uni.showShareMenu({ withShareTicket: true });
// #endif
},
onReady() {
this.setSearchBarWidth();
},
methods: {
/**
* 根据微信胶囊位置计算搜索框宽度，避免被胶囊遮挡
*/
setSearchBarWidth() {
// #ifdef MP-WEIXIN
try {
const menuButton = uni.getMenuButtonBoundingClientRect();
const { windowWidth } = uni.getWindowInfo();
const capsuleInsetRight = windowWidth - menuButton.left;
const titleWidth = uni.upx2px(160); // “商品分类” 标题宽度
const leftPadding = uni.upx2px(60); // 左侧内边距
const gap = uni.upx2px(20); // 搜索框与胶囊间距
this.searchBarWidth =
windowWidth - capsuleInsetRight - titleWidth - leftPadding - gap;
} catch (e) {
this.searchBarWidth = 180;
}
// #endif
},
/**
* 查询
*/
@@ -124,22 +172,30 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
.s-list {
box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
}
.nav-content {
display: flex;
align-items: center;
}
.nav-search-wrap {
flex-shrink: 0;
}
.nav-search {
padding-left: 30rpx !important;
padding-right: 20rpx !important;
width: 100%;
}
.title {
display: block;
width: 259rpx;
flex-shrink: 0;
text-align: center;
font-size: 28rpx;
font-size: 28rpx;
padding-right: 16rpx;
white-space: nowrap;
}
.category-wrap {
height: 100%;
display: flex;
flex-direction: column;
.content {
height: calc(100vh - 94px);
flex: 1;
min-height: 0;
display: flex;
color: #333;
font-size: 28rpx;

10
pages/tabbar/home/template/advertising.scss
View File

@@ -7,7 +7,7 @@
display: flex;
}
.item-price {
> span {
.price-text {
font-size: 15px;
font-weight: 500;
color: #e1212b;
@@ -26,7 +26,7 @@
position: relative;
}
.item-line-through {
> span {
.price-text {
font-size: 10px;
font-weight: 400;
text-decoration: line-through;
@@ -46,12 +46,12 @@
align-items: center;
background: #fff;
height: 50px;
> div:nth-of-type(1) {
.join-title-name {
font-size: 16px;
font-weight: bold;
}
> div:nth-of-type(2) {
.join-title-more {
font-size: 12px;
color: #999;
}
}
}

5
pages/tabbar/home/template/tpl.scss
View File

@@ -4,8 +4,11 @@
display: block;
padding: 2rpx;
}
// 首页楼层模块统一左右边距（轮播图、宫格等 .layout 容器）
$home-layout-padding: 16rpx;
.layout {
padding: 16rpx;
padding: $home-layout-padding;
margin: 8rpx 0;
background: #fff;
}

43
pages/tabbar/home/template/tpl_banner.vue
View File

@@ -1,11 +1,23 @@
<template>
<div class="layout">
<div class="box">
<u-swiper @click="clickSwiper" interval="5000" duration="500" height="350" v-if="res" name="img" :list="res.list">
<view class="layout">
<view class="banner-box">
<u-swiper
v-if="res && res.list && res.list.length"
class="home-banner-swiper"
:list="res.list"
keyName="img"
height="350rpx"
imgMode="scaleToFill"
interval="5000"
duration="500"
circular
indicator
@click="clickSwiper"
>
<template #loading><u-loading></u-loading></template>
</u-swiper>
</div>
</div>
</view>
</view>
</template>
<script>
@@ -34,4 +46,25 @@ export default {
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.banner-box {
width: 100%;
overflow: hidden;
}
:deep(.home-banner-swiper),
:deep(.u-swiper),
:deep(.u-swiper__wrapper) {
width: 100%;
}
:deep(.u-swiper__wrapper__item),
:deep(.u-swiper__wrapper__item__wrapper) {
width: 100%;
}
:deep(.u-swiper__wrapper__item__wrapper__image) {
width: 100% !important;
display: block;
}
</style>

3
pages/tabbar/home/template/tpl_flex_four.vue
View File

@@ -29,7 +29,4 @@ export default {
justify-content: center;
background-size: cover;
}
img {
width: 84px;
}
</style>

4
pages/tabbar/home/template/tpl_flex_one.vue
View File

@@ -29,9 +29,5 @@ export default {
width: 100%;
display: block;
overflow: hidden;
> img {
width: 100%;
height: 100%;
}
}
</style>

3
pages/tabbar/home/template/tpl_flex_three.vue
View File

@@ -33,7 +33,4 @@ export default {
justify-content: center;
background-size: cover;
}
img {
width: 111px;
}
</style>

5
pages/tabbar/home/template/tpl_flex_two.vue
View File

@@ -38,10 +38,5 @@ export default {
}
.flex-item {
width: 50%;
> img {
display: block;
max-width: 100%;
height: 100%;
}
}
</style>

127
pages/tabbar/home/template/tpl_goods.vue
View File

@@ -10,76 +10,79 @@
:key="index"
>
<h4 class="h4">{{ title.title }}</h4>
<div>{{ title.desc }}</div>
<div class="title-desc">{{ title.desc }}</div>
</div>
</div>
</u-sticky>
<div class="goods-list">
<div
v-if="
item.___index != undefined
? selected.index == item.___index
: selected.val == item.type
"
@click="handleClick(item)"
class="goods-item"
v-for="(item, item_index) in res.list[0].listWay"
:key="item_index"
>
<div class="goods-img">
<u-image
:src="item.img"
height="350rpx"
mode="aspectFit"
width="100%"
>
<template #loading><u-loading></u-loading></template>
</u-image>
</div>
<div class="goods-desc">
<div class="goods-title">
{{ item.title }}
<template v-for="(item, item_index) in res.list[0].listWay" :key="item_index">
<div
v-if="
item.___index != undefined
? selected.index == item.___index
: selected.val == item.type
"
@click="handleClick(item)"
class="goods-item"
>
<div class="goods-img">
<u-image
:src="item.img"
height="350rpx"
mode="aspectFit"
width="100%"
>
<template #loading><u-loading></u-loading></template>
</u-image>
</div>
<div class="goods-bottom">
<div class="goods-price">
¥<span
>{{ goodsFormatPrice(item.price)[0] }} </span
>.{{ goodsFormatPrice(item.price)[1] }}
<div class="goods-desc">
<div class="goods-title">
{{ item.title }}
</div>
<div class="goods-bottom">
<div class="goods-price">
¥<span class="price-int"
>{{ goodsFormatPrice(item.price)[0] }} </span
>.{{ goodsFormatPrice(item.price)[1] }}
</div>
</div>
</div>
</div>
</div>
</template>
<div
<template
v-if="res.list[0].titleWay[selected.index].bindCategory && goodsData.length"
v-for="(item, index) in goodsData"
:key="index"
class="goods-item"
@click="handleClick(item)"
>
<div class="goods-img">
<u-image
:src="item.thumbnail"
height="350rpx"
mode="aspectFit"
width="100%"
>
<template #loading><u-loading></u-loading></template>
</u-image>
</div>
<div class="goods-desc">
<div class="goods-title">
{{ item.goodsName }}
<div
v-for="(item, index) in goodsData"
:key="index"
class="goods-item"
@click="handleClick(item)"
>
<div class="goods-img">
<u-image
:src="item.thumbnail"
height="350rpx"
mode="aspectFit"
width="100%"
>
<template #loading><u-loading></u-loading></template>
</u-image>
</div>
<div class="goods-bottom">
<div class="goods-price">
¥<span
>{{ goodsFormatPrice(item.price)[0] }} </span
>.{{ goodsFormatPrice(item.price)[1] }}
<div class="goods-desc">
<div class="goods-title">
{{ item.goodsName }}
</div>
<div class="goods-bottom">
<div class="goods-price">
¥<span class="price-int"
>{{ goodsFormatPrice(item.price)[0] }} </span
>.{{ goodsFormatPrice(item.price)[1] }}
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
@@ -170,12 +173,12 @@ $w_94: 94%;
}
.selected-title {
> h4 {
.h4 {
font-size: 30rpx;
color: #000 !important;
}
> div {
.title-desc {
font-weight: bold;
color: $main-color !important;
}
@@ -191,11 +194,11 @@ $w_94: 94%;
flex: 1;
text-align: center;
> h4 {
.h4 {
font-size: 32rpx;
}
> div {
.title-desc {
color: #999;
font-size: 24rpx;
}
@@ -223,10 +226,6 @@ $w_94: 94%;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow: hidden;
> img {
width: 100%;
height: 100%;
}
}
.goods-desc {
@@ -252,7 +251,7 @@ $w_94: 94%;
> .goods-price {
line-height: 2;
color: $main-color;
> span {
.price-int {
font-size: 42rpx;
}
}

8
pages/tabbar/home/template/tpl_group.vue
View File

@@ -2,8 +2,8 @@
<div class="layout">
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</div>
<div class="join-title-name">{{ res.list[0].title }}</div>
<div class="join-title-more">更多</div>
</div>
<div class="join-box">
<div class="join-item" @click="modelNavigateTo(item)" v-for="item in 4" :key="item">
@@ -11,10 +11,10 @@
<img class="item-img" src="https://picsum.photos/id/268/200/200" alt />
</div>
<div class="item-price">
<span>￥120.00</span>
<span class="price-text">￥120.00</span>
</div>
<div class="item-line-through">
<span>￥190.00</span>
<span class="price-text">￥190.00</span>
</div>
</div>
</div>

12
pages/tabbar/home/template/tpl_hot_zone.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="layout">
<div class="flex-one hot-image">
<image mode="widthFix" :src="res.list[0].img" alt=""></image>
<image class="hot-image-main" mode="widthFix" :src="res.list[0].img" alt=""></image>
<image
v-for="(area, index) in res.list[0].zoneInfo"
@@ -47,11 +47,9 @@ export default {
width: 100%;
display: block;
overflow: hidden;
image {
width: 100%;
min-height: 200rpx;
// height: 100%;
}
}
.hot-image-main {
width: 100%;
min-height: 200rpx;
}
</style>

16
pages/tabbar/home/template/tpl_integral.vue
View File

@@ -2,8 +2,8 @@
<div class="layout">
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</div>
<div class="join-title-name">{{ res.list[0].title }}</div>
<div class="join-title-more">更多</div>
</div>
<div class="join-box">
<div class="join-item" v-for="item in 4" :key="item">
@@ -11,10 +11,10 @@
<img class="item-img" src="https://picsum.photos/id/268/200/200" alt />
</div>
<div class="item-price">
<span>20积分</span>
<span class="price-text">20积分</span>
</div>
<div class="item-line-through">
<span>30积分</span>
<span class="price-text">30积分</span>
</div>
</div>
</div>
@@ -34,7 +34,7 @@ export default {
display: flex;
}
.item-price {
> span {
.price-text {
font-size: 15px;
font-weight: 500;
color: #e1212b;
@@ -53,7 +53,7 @@ export default {
position: relative;
}
.item-line-through {
> span {
.price-text {
font-size: 10px;
font-weight: 400;
text-decoration: line-through;
@@ -73,11 +73,11 @@ export default {
align-items: center;
background: #fff;
height: 50px;
> div:nth-of-type(1) {
.join-title-name {
font-size: 16px;
font-weight: bold;
}
> div:nth-of-type(2) {
.join-title-more {
font-size: 12px;
color: #999;
}

16
pages/tabbar/home/template/tpl_join_group.vue
View File

@@ -2,8 +2,8 @@
<div class="layout">
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</div>
<div class="join-title-name">{{ res.list[0].title }}</div>
<div class="join-title-more">更多</div>
</div>
<div class="join-box">
<div class="join-item" v-for="item in 4" :key="item">
@@ -16,10 +16,10 @@
<div class="item-position-tips">2人团</div>
</div>
<div class="item-price">
<span>￥120.00</span>
<span class="price-text">￥120.00</span>
</div>
<div class="item-line-through">
<span>￥120.00</span>
<span class="price-text">￥120.00</span>
</div>
</div>
</div>
@@ -39,7 +39,7 @@ export default {
display: flex;
}
.item-price {
> span {
.price-text {
font-size: 15px;
font-weight: 500;
color: #e1212b;
@@ -58,7 +58,7 @@ export default {
position: relative;
}
.item-line-through {
> span {
.price-text {
font-size: 10px;
font-weight: 400;
text-decoration: line-through;
@@ -78,11 +78,11 @@ export default {
align-items: center;
background: #fff;
height: 50px;
> div:nth-of-type(1) {
.join-title-name {
font-size: 16px;
font-weight: bold;
}
> div:nth-of-type(2) {
.join-title-more {
font-size: 12px;
color: #999;
}

53
pages/tabbar/home/template/tpl_menu.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="layout">
<div class="menu-list">
<div
<view class="layout">
<view class="menu-list">
<view
class="menu-item"
@click="modelNavigateTo(item)"
v-for="(item, index) in res.list"
:key="index"
>
<div>
<view class="menu-img-wrap">
<u-image
width="88rpx"
height="88rpx"
@@ -16,11 +16,11 @@
>
<template #loading><u-loading></u-loading></template>
</u-image>
</div>
<div class="menu-title">{{ item.title }}</div>
</div>
</div>
</div>
</view>
<view class="menu-title">{{ item.title }}</view>
</view>
</view>
</view>
</template>
<script>
import { modelNavigateTo } from "./tpl";
@@ -38,24 +38,45 @@ export default {
@import "./tpl.scss";
.menu-list {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
> .menu-item {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 20%;
// flex: 1;
flex: 0 0 20%;
box-sizing: border-box;
margin: 20rpx 0;
padding: 0 4rpx;
}
}
.menu-img {
display: flex;
margin: 0 auto;
.menu-img-wrap {
width: 88rpx;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
}
.menu-img {
flex-shrink: 0;
}
:deep(.menu-img .u-image) {
display: flex;
align-items: center;
justify-content: center;
}
.menu-title {
margin-top: 8rpx;
font-size: 24rpx;
line-height: 1.3;
width: 100%;
text-align: center;
}
</style>

13
pages/tabbar/home/template/tpl_promotions_detail.vue
View File

@@ -9,7 +9,7 @@
>
<div>
<div class="join-title">
<div>{{ item.title }}</div>
<div class="join-title-name">{{ item.title }}</div>
<div
class="sub"
v-if="item.type !== 'SECKILL'"
@@ -54,7 +54,7 @@
{{ i.goodsName ? i.goodsName : i.name }}
</div>
<div class="item-price">
<span>￥{{ i.price ? i.price : i.originalPrice }}</span>
<span class="price-text">￥{{ i.price ? i.price : i.originalPrice }}</span>
</div>
</div>
</div>
@@ -195,7 +195,7 @@ export default {
width: 316rpx !important;
}
.item-price {
> span {
.price-text {
font-size: 28rpx;
font-weight: 500;
color: #e1212b;
@@ -214,7 +214,7 @@ export default {
position: relative;
}
.item-line-through {
> span {
.price-text {
font-size: 20rpx;
font-weight: 400;
text-decoration: line-through;
@@ -234,11 +234,12 @@ export default {
align-items: center;
background: #fff;
height: 100rpx;
> div:nth-of-type(1) {
.join-title-name {
font-size: 30rpx;
font-weight: bold;
}
> div:nth-of-type(2) {
.sub,
.sub-seckill {
font-size: 20rpx;
line-height: 1.75;
border-radius: 16rpx;

51
pages/tabbar/home/template/tpl_search.vue
View File

@@ -1,25 +1,16 @@
<template>
<div class="layout">
<div class="search" @click="handleSearch">
<view class="layout">
<view class="search" @click="handleSearch">
<u-icon name="search"></u-icon>
{{ res.list[0].title }}
</div>
<div class="navbar-right message" @click="linkMsgDetail" style="border-style:none;background:rgb(234,234,234);">
<image style="width:53rpx;height:53rpx;margin-top:6rpx;" src="@/static/img/title.png"></image>
</div>
</div>
<text class="search-text">{{ res.list[0].title }}</text>
</view>
</view>
</template>
<script>
export default {
title:"搜索栏",
props: ["res","storeId"],
methods: {
linkMsgDetail(){
uni.navigateTo({
url:`/pages/tabbar/home/title`
})
},
handleSearch() {
if(this.storeId){
uni.navigateTo({
@@ -39,25 +30,33 @@ export default {
@import "./tpl.scss";
.search {
width: 100%;
height: 64rpx;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-start;
padding: 0 10rpx;
background: #ededed;
color: #999;
overflow: hidden;
box-sizing: border-box;
}
.search-text {
margin-left: 12rpx;
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.layout {
background: #fff;
padding: 0 16rpx;
position: relative;
}
.navbar-right{
position: absolute;
top: 0;
// right: 0;
}
.message{
right:40rpx;
display: flex;
align-items: center;
width: 100%;
background: transparent;
padding: 0;
box-sizing: border-box;
}
</style>

8
pages/tabbar/home/template/tpl_spike.vue
View File

@@ -2,8 +2,8 @@
<div class="layout">
<div class="join-list">
<div class="join-title">
<div>{{ res.list[0].title }}</div>
<div>更多</div>
<div class="join-title-name">{{ res.list[0].title }}</div>
<div class="join-title-more">更多</div>
</div>
<div class="join-box">
<div class="join-item" v-for="item in 4" :key="item">
@@ -15,10 +15,10 @@
/>
</div>
<div class="item-price">
<span>￥120.00</span>
<span class="price-text">￥120.00</span>
</div>
<div class="item-line-through">
<span>￥190.00</span>
<span class="price-text">￥190.00</span>
</div>
</div>
</div>

9
pages/tabbar/home/template/tpl_text_picture.vue
View File

@@ -58,13 +58,8 @@ export default {
background-size: cover;
padding: 0;
}
.-item-image{
padding: 10px ;
>img{
width: 100%;
}
.-item-image {
padding: 10px;
}
.-item-tilte {
background: $aider-light-color;

8
pages/tabbar/home/template/tpl_top_one_bottom_two.vue
View File

@@ -53,18 +53,10 @@ export default {
display: flex;
height: 200rpx;
width: 100%;
> img {
width: 100%;
height: 100%;
}
}
.view-height-85 {
padding: 0 1px;
width: 50%;
> img {
width: 100%;
height: 100%;
}
}
.image-mode{
width: 100%;

15
pages/tabbar/home/template/tpl_top_two_bottom_one.vue
View File

@@ -8,8 +8,9 @@
width="100%"
:src="res.list[0].img"
alt
><u-loading #loading></u-loading
></u-image>
>
<template #loading><u-loading></u-loading></template>
</u-image>
</div>
<div class="view-height-85" @click="modelNavigateTo(res.list[1])">
<u-image
@@ -18,8 +19,9 @@
width="100%"
:src="res.list[1].img"
alt
><u-loading #loading></u-loading
></u-image>
>
<template #loading><u-loading></u-loading></template>
</u-image>
</div>
</div>
<div class="view-width-100" @click="modelNavigateTo(res.list[2])">
@@ -28,8 +30,9 @@
height="200rpx"
width="100%"
:src="res.list[2].img"
><u-loading #loading></u-loading
></u-image>
>
<template #loading><u-loading></u-loading></template>
</u-image>
</div>
</div>
</template>

103
pages/tabbar/home/views.vue
View File

@@ -3,16 +3,26 @@
<!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
<div v-for="(item, index) in pageData.list" :key="index">
<!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
<u-navbar class="navbar" v-if="item.type == 'search'" :auto-back="false" :fixed="index === 1 ? false : true">
<search style="width: 100%" :res="item.options" />
<!-- #ifndef H5 -->
<!-- 扫码功能 不兼容h5 详情文档: https://uniapp.dcloud.io/api/system/barcode?id=scancode -->
<template #right>
<div class="navbar-right">
<u-icon name="scan" @click="scan()" color="#666" size="50"></u-icon>
</div>
<u-navbar
class="navbar"
v-if="item.type == 'search'"
:auto-back="false"
:fixed="index === 1 ? false : true"
:placeholder="index === 1 ? false : true"
left-icon=""
title=""
bg-color="#ffffff"
>
<template #left>
<view class="navbar-search-wrap" :style="searchBarStyle" @click.stop>
<search :res="item.options" />
</view>
</template>
<template #right>
<view class="navbar-message" :style="messageIconStyle" @click="linkMsgDetail">
<image class="message-icon" src="/static/img/title.png" mode="aspectFit"></image>
</view>
</template>
<!-- #endif -->
</u-navbar>
<carousel v-if="item.type == 'carousel'" :res="item.options" />
<titleLayout v-if="item.type == 'title'" :res="item.options" />
@@ -68,6 +78,8 @@ import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模
import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
import storage from "@/utils/storage.js";
import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon'
// 与 tpl.scss $home-layout-padding 保持一致
const HOME_LAYOUT_PADDING_RPX = 16;
// import {receiveCoupons} from "@/api/members"
export default {
@@ -79,8 +91,30 @@ export default {
pageData: "", //楼层页面数据
isIos: "",
enableLoad: false, //触底加载 针对于商品模块
capsuleInsetRight: 0,
searchBarWidth: 0,
};
},
computed: {
messageIconStyle() {
if (!this.capsuleInsetRight) {
return {};
}
return {
marginRight: `${this.capsuleInsetRight}px`,
};
},
searchBarStyle() {
if (this.searchBarWidth) {
return {
width: `${this.searchBarWidth}px`,
};
}
return {
width: '560rpx',
};
},
},
components: {
carousel: tpl_banner,
titleLayout: tpl_title,
@@ -104,6 +138,7 @@ export default {
},
mounted () {
this.setCapsuleInset();
this.init();
// #ifdef MP-WEIXIN
// 小程序默认分享
@@ -112,6 +147,28 @@ export default {
},
methods: {
setCapsuleInset() {
// #ifdef MP-WEIXIN
try {
const menuButton = uni.getMenuButtonBoundingClientRect();
const { windowWidth } = uni.getWindowInfo();
this.capsuleInsetRight = windowWidth - menuButton.left;
const messageWidth = uni.upx2px(20);
const leftPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX);
const gap = uni.upx2px(0);
this.searchBarWidth =
windowWidth - this.capsuleInsetRight - messageWidth - leftPadding - gap;
} catch (e) {
this.capsuleInsetRight = 90;
this.searchBarWidth = 260;
}
// #endif
},
linkMsgDetail() {
uni.navigateTo({
url: "/pages/tabbar/home/title",
});
},
fetchCoupon(){
this.$refs.coupon.firstGetAuto();
},
@@ -245,7 +302,31 @@ export default {
</script>
<style scoped lang="scss">
.navbar-right {
padding: 0 16rpx 0 0;
@import "@/pages/tabbar/home/template/tpl.scss";
.navbar {
width: 100%;
:deep(.u-navbar__content__left) {
width: auto !important;
padding: 0 0 0 $home-layout-padding !important;
}
}
.navbar-search-wrap {
box-sizing: border-box;
flex-shrink: 0;
}
.navbar-message {
display: flex;
align-items: center;
justify-content: center;
}
.message-icon {
width: 53rpx;
height: 53rpx;
display: block;
}
</style>

155
pages/tabbar/user/my.vue
View File

@@ -4,9 +4,9 @@
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<view class="header" @click="userDetail">
<view class="header" @click="userDetail">
<view class="head-1">
<image :src="userInfo.face || userImage"></image>
<image class="head-avatar" :src="userInfo.face || userImage"></image>
</view>
<view class="head-2" v-if="userInfo.id">
<view class="user-name">{{ userInfo.nickName }}</view>
@@ -14,57 +14,55 @@
<view class="head-2" v-else>
<view class="user-name">登录/注册</view>
</view>
<u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
<u-icon class="header-arrow" name="arrow-right"></u-icon>
</view>
<!-- 积分，优惠券，关注， -->
<div class="pointBox box">
<u-row text-align="center" gutter="16" class="point">
<u-col text-align="center" span="4" @click="navigateTo('/pages/mine/deposit/operation')">
<view>预存款</view>
<view class="money">{{unitPrice(walletNum) }}</view>
</u-col>
<u-col text-align="center" span="4" @click="navigateTo('/pages/cart/coupon/myCoupon')">
<view>优惠券</view>
<view>{{ couponNum || 0 }}</view>
</u-col>
<u-col text-align="center" span="4" @click="navigateTo('/pages/mine/myTracks')">
<view>足迹</view>
<view>{{ footNum || 0 }}</view>
</u-col>
</u-row>
<view class="point">
<view class="point-item" @click="navigateTo('/pages/mine/deposit/operation')">
<view class="point-label">预存款</view>
<view class="point-value money">{{ unitPrice(walletNum) }}</view>
</view>
<view class="point-item" @click="navigateTo('/pages/cart/coupon/myCoupon')">
<view class="point-label">优惠券</view>
<view class="point-value">{{ couponNum || 0 }}</view>
</view>
<view class="point-item" @click="navigateTo('/pages/mine/myTracks')">
<view class="point-label">足迹</view>
<view class="point-value">{{ footNum || 0 }}</view>
</view>
</view>
<!-- 我的订单，代付款 -->
<view class="order">
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=1')">
<div class="bag bag2">
<u-icon name="bag-fill" size="35" color="#fff"></u-icon>
</div>
<view>待付款</view>
<view class="bag bag2">
<u-icon name="bag-fill" size="22" color="#fff"></u-icon>
</view>
<view class="order-item-label">待付款</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=3')">
<div class="bag bag3">
<u-icon name="car-fill" size="35" color="#fff"></u-icon>
</div>
<view>待收货</view>
<view class="bag bag3">
<u-icon name="car-fill" size="22" color="#fff"></u-icon>
</view>
<view class="order-item-label">待收货</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
<div class="bag bag4">
<u-icon name="star-fill" size="35" color="#fff"></u-icon>
</div>
<view>待评价</view>
<view class="bag bag4">
<u-icon name="star-fill" size="22" color="#fff"></u-icon>
</view>
<view class="order-item-label">待评价</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/afterSales/afterSales')">
<div class="bag bag5">
<u-icon name="server-fill" size="35" color="#fff"></u-icon>
</div>
<view>售后</view>
<view class="bag bag5">
<u-icon name="server-fill" size="22" color="#fff"></u-icon>
</view>
<view class="order-item-label">售后</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=0')">
<div class="bag bag1">
<u-icon name="order" size="35" color="#fff"></u-icon>
</div>
<view>我的订单</view>
<view class="bag bag1">
<u-icon name="order" size="22" color="#fff"></u-icon>
</view>
<view class="order-item-label">我的订单</view>
</view>
</view>
</div>
@@ -179,21 +177,18 @@ body {
background-repeat: no-repeat;
color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
.head-1 {
text-align: center;
flex-shrink: 0;
width: 152rpx;
position: relative;
display: flex;
align-items: center;
image {
.head-avatar {
width: 152rpx;
height: 144rpx;
border-radius: 50%;
margin-bottom: 30rpx;
border: 3px solid #fff;
display: block;
}
.edti-head {
@@ -205,7 +200,7 @@ body {
top: 100rpx;
right: 0;
image {
.head-avatar {
width: 100%;
height: 100%;
}
@@ -215,13 +210,14 @@ body {
.head-2 {
flex: 1;
margin-left: 30rpx;
margin-top: 100rpx;
line-height: 1;
min-width: 0;
display: flex;
align-items: center;
}
::v-deep .u-icon,
.u-icon {
margin-top: 106rpx;
.header-arrow {
flex-shrink: 0;
margin-left: 20rpx;
}
}
@@ -234,47 +230,53 @@ body {
}
.point {
display: flex;
align-items: center;
text-align: center;
height: 160rpx;
font-size: $font-sm;
// #ifdef MP-WEIXIN
padding: 24rpx;
// #endif
.u-col {
view {
color: $u-main-color;
font-size: 28rpx;
}
view:last-child {
margin-top: 8rpx;
color: $main-color;
font-size: $font-lg;
}
.point-item {
flex: 1;
text-align: center;
}
.point-label {
color: $u-main-color;
font-size: 28rpx;
}
.point-value {
margin-top: 8rpx;
color: $main-color;
font-size: $font-lg;
}
}
.order {
height: 140rpx;
text-align: center;
font-size: $font-sm;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 3%;
color: #999;
.order-item {
position: relative;
line-height: 2em;
width: 96rpx;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
:first-child {
font-size: 48rpx;
margin-bottom: 10rpx;
}
.order-item-label {
margin-top: 10rpx;
line-height: 1.4;
font-size: $font-sm;
}
}
}
@@ -285,13 +287,18 @@ body {
.user-name {
font-size: 34rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bag {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.bag1 {

64
pages/tabbar/user/utils/tool.vue
View File

@@ -6,51 +6,51 @@
<div class="paddingBox">
<view class="interact-container">
<view class="interact-item" @click="navigateTo('/pages/mine/address/addressManage')">
<image src="/static/mine/myaddress.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/myaddress.png" mode=""></image>
<view>地址管理</view>
</view>
<view class="interact-item" @click="navigateTo('/pages/mine/myTracks')">
<image src="/static/mine/logistics.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/logistics.png" mode=""></image>
<view>我的足迹</view>
</view>
<view class="interact-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
<image src="/static/mine/feedback.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/feedback.png" mode=""></image>
<view>我的评价</view>
</view>
<!-- <view class="interact-item" @click="linkMsgDetail()">
<image src="/static/mine/mycommit.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/mycommit.png" mode=""></image>
<view>我的消息</view>
</view> -->
<view class="interact-item" @click="navigateTo('/pages/mine/myCollect')">
<image src="/static/mine/myfavorite.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/myfavorite.png" mode=""></image>
<view>我的关注</view>
</view>
<view class="interact-item" @click="navigateTo('/pages/mine/point/myPoint')">
<image src="/static/mine/mypoint.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/mypoint.png" mode=""></image>
<view>我的积分</view>
</view>
<view class="interact-item" @click="distribution">
<image src="/static/mine/distribution.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/distribution.png" mode=""></image>
<view>我的分销</view>
</view>
<view class="interact-item" @click="navigateTo('/pages/order/complain/complainList')">
<image src="/static/mine/shensu.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/shensu.png" mode=""></image>
<view>我的投诉</view>
</view>
<view class="interact-item" @click="navigateTo('/pages/cart/coupon/myCoupon')">
<image src="/static/mine/mycoupon.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/mycoupon.png" mode=""></image>
<view>优惠券</view>
</view>
@@ -58,7 +58,7 @@
<view class="interact-item" @click="navigateTo('/pages/mine/signIn')">
<image src="/static/mine/sign.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/sign.png" mode=""></image>
<view>每日签到</view>
</view>
@@ -68,41 +68,41 @@
<view class="interact-item" @click="navigateTo('/pages/cart/coupon/couponCenter')">
<image src="/static/mine/couponcenter.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/couponcenter.png" mode=""></image>
<view>领券中心</view>
</view>
<view class="interact-item" @click="navigateTo('/pages/promotion/bargain/log')">
<image src="/static/mine/kanjia.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/kanjia.png" mode=""></image>
<view>砍价记录</view>
</view>
<view class="interact-item" @click="navigateTo('/pages/mine/set/feedBack')">
<image src="/static/mine/feedback.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/feedback.png" mode=""></image>
<view>意见反馈</view>
</view>
<view class="interact-item" @click="navigateTo('/pages/mine/set/editionIntro')">
<image src="/static/mine/pointgift.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/pointgift.png" mode=""></image>
<view>关于</view>
</view>
<view class="interact-item" @click="navigateTo('/pages/passport/entry/seller/index')">
<image src="/static/mine/feedback.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/feedback.png" mode=""></image>
<view>店铺入驻</view>
</view>
<!-- <view class="interact-item" @click="inviter()">-->
<!-- <image src="/static/mine/share.png" mode=""></image>-->
<!-- <image class="interact-item-icon" src="/static/mine/share.png" mode=""></image>-->
<!-- <view>邀新</view>-->
<!-- </view>-->
<view class="interact-item" @click="navigateTo('/pages/mine/set/setUp')">
<image src="/static/mine/setting.png" mode=""></image>
<image class="interact-item-icon" src="/static/mine/setting.png" mode=""></image>
<view>设置</view>
</view>
@@ -114,7 +114,7 @@
<u-popup v-model:show="sharingShow" mode="bottom" border-radius="14">
<view style="margin: 10px; text-align: center;"> 请邀请用户扫描二维码或者将地址复制转发给其他用户 </view>
<view class='qrcode'>
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="sharingLink" :options="{ margin: 10 }">
<uqrcode v-if="sharingLink" ref="uqrcode" canvas-id="qrcode" :value="sharingLink" :options="{ margin: 10 }">
</uqrcode>
</view>
@@ -253,17 +253,10 @@ export default {
border-radius: 20rpx;
box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
.interact-item-img {
width: 52rpx !important;
height: 52rpx !important;
// margin-bottom: !important;
margin: 0 auto 6rpx auto !important;
}
image {
width: 52rpx;
height: 52rpx;
margin-bottom: 6rpx;
.interact-item-icon {
width: 56rpx;
height: 56rpx;
margin-bottom: 10rpx;
}
display: flex;
@@ -272,10 +265,17 @@ export default {
text-align: center;
.interact-item {
font-size: $font-sm;
font-size: 24rpx;
width: 25%;
height: 160rpx;
padding: 30rpx;
flex: 0 0 25%;
box-sizing: border-box;
height: 150rpx;
padding: 20rpx 8rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #666;
}
}
}