mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 02:47:25 +08:00
refactor: 移动端升级 Vue3 + uView Plus
将 lilishop-uniapp 从 Vue2/uView 1.6 迁移到 Vue3/uview-plus，优先支持 H5/微商城与微信小程序；移除 vendored uview-ui，改用 npm 依赖、Vuex4 与迁移脚本/补丁，并补充 VUE3_MIGRATION.md 回归清单。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
pikachu1995@126.com
@@ -1,10 +1,17 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<u-navbar :is-back="false" title="购物车">
|
||||
<div slot="right">
|
||||
<div class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</div>
|
||||
</div>
|
||||
</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,29 +26,22 @@
|
||||
: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>
|
||||
<span>领劵</span>
|
||||
</view>
|
||||
</view>
|
||||
<u-swipe-action :show="skuItem.selected" @open="openAction(skuItem)" :options="options" bg-color="#fff"
|
||||
ref="swiperAction" class="cart-item" v-for="(skuItem, i) in item.skuList" :index="i" :key="skuItem.goodsSku.id"
|
||||
<u-swipe-action ref="swiperAction" class="cart-item" v-for="(skuItem, i) in item.skuList" :key="skuItem.goodsSku.id">
|
||||
<u-swipe-action-item :show="skuItem.selected" @open="openAction(skuItem)" :options="options"
|
||||
:name="i"
|
||||
@click="changeActionTab(skuItem)" @longpress="changeActionTab(skuItem)">
|
||||
<!-- 满减活动 -->
|
||||
<div v-if="Object.keys(skuItem.promotionMap).length != 0">
|
||||
@@ -55,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">
|
||||
<!-- 商品名称 -->
|
||||
@@ -83,8 +75,8 @@
|
||||
<view class="sp-price">
|
||||
<!-- <div class="default-color" :class="{'main-color':Object.keys(skuItem.promotionMap).length ==0 }"> -->
|
||||
<div class="main-color">
|
||||
￥<span>{{ $options.filters.goodsFormatPrice(skuItem.goodsSku.price)[0] }}</span>
|
||||
<span>.{{ $options.filters.goodsFormatPrice(skuItem.goodsSku.price)[1] }}</span>
|
||||
￥<span>{{ goodsFormatPrice(skuItem.goodsSku.price)[0] }}</span>
|
||||
<span>.{{ goodsFormatPrice(skuItem.goodsSku.price)[1] }}</span>
|
||||
</div>
|
||||
</view>
|
||||
<view>
|
||||
@@ -105,8 +97,8 @@
|
||||
<!-- 如果有活动 并且是选中的状态,显示预估到手价格 -->
|
||||
<!-- <div class="priceDetail-flowPrice" :class="{'main-color':skuItem.priceDetailDTO}"
|
||||
v-if="skuItem.priceDetailDTO && skuItem.invalid == 0 && Object.keys(skuItem.promotionMap).length != 0 && skuItem.checked && skuItem.checked">
|
||||
预估到手价 ￥<span>{{ $options.filters.goodsFormatPrice(skuItem.priceDetailDTO.flowPrice)[0]}}</span>
|
||||
<span>.{{ $options.filters.goodsFormatPrice(skuItem.priceDetailDTO.flowPrice)[1] }} </span>
|
||||
预估到手价 ￥<span>{{ goodsFormatPrice(skuItem.priceDetailDTO.flowPrice)[0]}}</span>
|
||||
<span>.{{ goodsFormatPrice(skuItem.priceDetailDTO.flowPrice)[1] }} </span>
|
||||
</div> -->
|
||||
<div style='margin-left: 20rpx;' v-if="!skuItem.checked && skuItem.errorMessage">
|
||||
{{skuItem.errorMessage}}
|
||||
@@ -115,29 +107,31 @@
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</u-swipe-action-item>
|
||||
</u-swipe-action>
|
||||
</div>
|
||||
</div>
|
||||
<u-modal v-model="deleteShow" :confirm-style="{'color':lightColor}" @confirm="deleteConfirm" show-cancel-button
|
||||
<u-modal v-model:show="deleteShow" :confirm-style="{'color':lightColor}" @confirm="deleteConfirm" show-cancel-button
|
||||
:content="deleteContent" :async-close="true"></u-modal>
|
||||
<!-- 结账 -->
|
||||
<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">
|
||||
总计:
|
||||
<span>¥{{ $options.filters.goodsFormatPrice(cartDetail.priceDetailDTO.flowPrice)[0] }}</span>.<span>{{ $options.filters.goodsFormatPrice(cartDetail.priceDetailDTO.flowPrice)[1] }}</span>
|
||||
<span>¥{{ goodsFormatPrice(cartDetail.priceDetailDTO.flowPrice)[0] }}</span>.<span>{{ goodsFormatPrice(cartDetail.priceDetailDTO.flowPrice)[1] }}</span>
|
||||
</span>
|
||||
<span class="number" v-else>总计:0.00</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="cartDetail.cartList && cartDetail.cartList.length!=0 && cartDetail.priceDetailDTO && cartDetail.priceDetailDTO.discountPrice!=0 "
|
||||
class="discountPrice">
|
||||
<span>优惠减:￥{{(cartDetail.priceDetailDTO.goodsPrice - cartDetail.priceDetailDTO.flowPrice) | unitPrice}}
|
||||
<span>优惠减:￥{{(cartDetail.priceDetailDTO.goodsPrice -unitPrice(cartDetail.priceDetailDTO.flowPrice))}}
|
||||
</span>
|
||||
<span class="discount-details" @click="discountDetails">优惠明细</span>
|
||||
</div>
|
||||
@@ -145,22 +139,22 @@
|
||||
</span>
|
||||
</view>
|
||||
<!-- 优惠详情 -->
|
||||
<u-popup z-index="3" close mode="bottom" height="50%" closeable v-model="discountDetailsFlag" border-radius="20">
|
||||
<u-popup z-index="3" close mode="bottom" height="50%" closeable v-model:show="discountDetailsFlag" border-radius="20">
|
||||
<div class="discount-list">
|
||||
<view class="discount-title">优惠明细</view>
|
||||
<div class="discount-way">
|
||||
<div class="discount-item" v-if="cartDetail.priceDetailDTO">
|
||||
<span>商品总额</span>
|
||||
<span>￥{{cartDetail.priceDetailDTO.goodsPrice | unitPrice}}</span>
|
||||
<span>￥{{unitPrice(cartDetail.priceDetailDTO.goodsPrice)}}</span>
|
||||
|
||||
</div>
|
||||
<div class="discount-item" v-if="cartDetail.priceDetailDTO">
|
||||
<span>优惠券</span>
|
||||
<span>-￥{{cartDetail.priceDetailDTO.couponPrice | unitPrice}}</span>
|
||||
<span>-￥{{unitPrice(cartDetail.priceDetailDTO.couponPrice)}}</span>
|
||||
</div>
|
||||
<div class="discount-item" v-if="cartDetail.priceDetailDTO">
|
||||
<span>其他优惠</span>
|
||||
<span>-￥{{cartDetail.priceDetailDTO.discountPrice | unitPrice}}</span>
|
||||
<span>-￥{{unitPrice(cartDetail.priceDetailDTO.discountPrice)}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -181,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() {
|
||||
@@ -212,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 });
|
||||
@@ -240,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;
|
||||
},
|
||||
|
||||
/**
|
||||
* 倒数计时
|
||||
*/
|
||||
@@ -266,11 +298,11 @@ export default {
|
||||
this.cartDetail.cartList.forEach((cartItem) => {
|
||||
if (cartItem.skuList) {
|
||||
cartItem.skuList.forEach((sku) => {
|
||||
this.$set(sku, "selected", false);
|
||||
sku["selected"] = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
this.$set(skuItem, "selected", true);
|
||||
skuItem["selected"] = true;
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -380,7 +412,7 @@ export default {
|
||||
* 验证是否选中商品
|
||||
*/
|
||||
whetherChecked() {
|
||||
this.$options.filters.forceLogin()
|
||||
this.forceLogin()
|
||||
|
||||
let canBuy = false;
|
||||
this.cartDetail.cartList.forEach((item) => {
|
||||
@@ -418,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;
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -438,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);
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -486,7 +516,7 @@ export default {
|
||||
* 获取购物车数据
|
||||
*/
|
||||
getCardData() {
|
||||
if (this.$options.filters.isLogin("auth")) {
|
||||
if (this.isLogin("auth")) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
@@ -499,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)
|
||||
@@ -533,15 +564,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 选中某个复选框时，由checkbox时触发
|
||||
*/
|
||||
checkboxChange(e) {
|
||||
// #ifdef MP-WEIXIN
|
||||
e.checked = !e.checked;
|
||||
// #endif
|
||||
this.updateSkuCheckedFun(e.goodsSku.id, e.checked);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -558,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;
|
||||
@@ -591,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;
|
||||
}
|
||||
|
||||
/* 空白页 */
|
||||
@@ -696,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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -716,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;
|
||||
@@ -744,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;
|
||||
@@ -760,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 {
|
||||
@@ -793,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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,28 @@
|
||||
<template>
|
||||
<view class="category-wrap">
|
||||
<u-navbar class="navbar" :is-back="false">
|
||||
<div class="title">商品分类</div>
|
||||
<!-- #ifdef H5 -->
|
||||
<u-search class="nav-search" @click.native="search" placeholder="搜索商品" :show-action="false"></u-search>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<u-search class="nav-search" disabled @click.native="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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<u-popup v-model="enableShowCoupon" mode="center" width="550rpx" height="400px">
|
||||
<u-popup v-model:show="enableShowCoupon" mode="center" width="550rpx" height="400px">
|
||||
<view style="height: 130rpx">
|
||||
<view
|
||||
style="
|
||||
@@ -32,14 +32,13 @@
|
||||
>{{ item.discount }}折</view
|
||||
>
|
||||
<view v-else
|
||||
>优惠金额：<span style="color: red; font-size: 32rpx">{{
|
||||
item.price | unitPrice
|
||||
>优惠金额：<span style="color: red; font-size: 32rpx">{{unitPrice(item.price)
|
||||
}}</span
|
||||
>元</view
|
||||
>
|
||||
<view
|
||||
>满<span style="color: red; font-size: 32rpx"
|
||||
>{{ item.consumeThreshold | unitPrice }}元</span
|
||||
>{{unitPrice(item.consumeThreshold) }}元</span
|
||||
>可用</view
|
||||
>
|
||||
<view v-if="item.scopeType == 'ALL' && item.storeId == '0'"
|
||||
@@ -100,7 +99,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
firstGetAuto() {
|
||||
if(!this.$options.filters.isLogin('auth')) return false
|
||||
if(!this.isLogin('auth')) return false
|
||||
let data = new Date();
|
||||
let now = data.getDate();
|
||||
let hours = data.getHours();
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<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>
|
||||
@@ -16,7 +28,7 @@ export default {
|
||||
watch: {
|
||||
res: {
|
||||
handler(newValue, oldValue) {
|
||||
this.$set(this, "res", newValue);
|
||||
this["res"] = newValue;
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
@@ -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>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<u-image width="140rpx" mode="aspectFit" height="140rpx" @click="modelNavigateTo(item)" class="image-mode" v-for="(item,index) in res.list" :key="index" :src="item.img" alt="">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<u-image height="175rpx" mode="aspectFit" width="175rpx" @click="modelNavigateTo(item)" class="image-mode" :src="item.img" v-for="(item,index) in res.list" :key="index">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
</template>
|
||||
@@ -29,7 +29,4 @@ export default {
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
}
|
||||
img {
|
||||
width: 84px;
|
||||
}
|
||||
</style>
|
||||
@@ -29,9 +29,5 @@ export default {
|
||||
width: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<u-image @click="modelNavigateTo(item)" height="240rpx" width="240rpx" class="image-mode" :src="item.img" v-for="(item, index) in res.list" :key="index">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
</template>
|
||||
@@ -33,7 +33,4 @@ export default {
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
}
|
||||
img {
|
||||
width: 111px;
|
||||
}
|
||||
</style>
|
||||
@@ -3,23 +3,21 @@
|
||||
<div class="flex-two">
|
||||
<div class="flex-item" @click="modelNavigateTo(res.list[0])">
|
||||
<u-image height="250rpx" width="100%" mode="scaleToFill" :src="res.list[0].img" alt>
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="flex-item" @click="modelNavigateTo(res.list[1])">
|
||||
<u-image height="250rpx" width="100%" mode="scaleToFill" :src="res.list[1].img" alt>
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import uImage from "@/uview-ui/components/u-image/u-image.vue";
|
||||
import { modelNavigateTo } from "./tpl";
|
||||
export default {
|
||||
components: { uImage },
|
||||
title: "两张横图",
|
||||
title: "两张横图",
|
||||
props: ["res"],
|
||||
mounted() {
|
||||
|
||||
@@ -40,10 +38,5 @@ export default {
|
||||
}
|
||||
.flex-item {
|
||||
width: 50%;
|
||||
> img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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%"
|
||||
>
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</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
|
||||
>{{ $options.filters.goodsFormatPrice(item.price)[0] }} </span
|
||||
>.{{ $options.filters.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%"
|
||||
>
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</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
|
||||
>{{ $options.filters.goodsFormatPrice(item.price)[0] }} </span
|
||||
>.{{ $options.filters.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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -3,18 +3,18 @@
|
||||
<div class="layout">
|
||||
<div class="view-height-150" @click="modelNavigateTo(res.list[0])">
|
||||
<u-image width="100%" height="340rpx" class="image-mode" :src="res.list[0].img">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="view-height-150">
|
||||
<div class="view-height-75" @click="modelNavigateTo(res.list[1])">
|
||||
<u-image width="100%" height="170rpx" class="image-mode" :src="res.list[1].img" alt>
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="view-height-75" @click="modelNavigateTo(res.list[2])">
|
||||
<u-image width="100%" height="170rpx" class="image-mode" :src="res.list[2].img" alt>
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<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"
|
||||
class="menu-img"
|
||||
:src="item.img"
|
||||
>
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<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>
|
||||
@@ -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;
|
||||
|
||||
@@ -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 slot="right" open-type="contact" 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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -3,18 +3,18 @@
|
||||
<div class="layout">
|
||||
<div class="view-width-100" @click="modelNavigateTo(res.list[0])">
|
||||
<u-image class="image-mode" width="100%" height="200rpx" :src="res.list[0].img">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="view-width-100" @click="modelNavigateTo(res.list[1])">
|
||||
<div class="view-height-85">
|
||||
<u-image class="image-mode" width="100%" height="170rpx" :src="res.list[1].img">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="view-height-85" @click="modelNavigateTo(res.list[2])">
|
||||
<u-image class="image-mode" width="100%" height="170rpx" :src="res.list[2].img">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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%;
|
||||
|
||||
@@ -8,8 +8,9 @@
|
||||
width="100%"
|
||||
:src="res.list[0].img"
|
||||
alt
|
||||
><u-loading slot="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 slot="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 slot="loading"></u-loading
|
||||
></u-image>
|
||||
>
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
</view>
|
||||
<u-cell-group v-if="current == 0">
|
||||
<view v-for="(item,index) in lists" :key="index">
|
||||
<u-cell-item :arrow="false" v-if="item.status =='UN_READY'" style="position: relative;"
|
||||
<u-cell :isLink="false" v-if="item.status =='UN_READY'" style="position: relative;"
|
||||
@click="linkMsgDetail(item)">
|
||||
<template slot="label">
|
||||
<template #label>
|
||||
<view style="display: inline-block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@@ -26,15 +26,15 @@
|
||||
</view>
|
||||
</template>
|
||||
<!-- <button style="width:100rpx;height:60rpx;float:right;font-size:20rpx;line-height:60rpx;background:#000000;color:white;">未读</button> -->
|
||||
</u-cell-item>
|
||||
</u-cell>
|
||||
</view>
|
||||
|
||||
</u-cell-group>
|
||||
<u-cell-group v-if="current == 1">
|
||||
<view v-for="(item,index) in lists" :key="index">
|
||||
<u-cell-item :arrow="false" v-if="item.status == 'ALREADY_READY'" style="position: relative;"
|
||||
<u-cell :isLink="false" v-if="item.status == 'ALREADY_READY'" style="position: relative;"
|
||||
@click="linkMsgDetail(item)">
|
||||
<template slot="label">
|
||||
<template #label>
|
||||
<view style="display: inline-block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@@ -51,7 +51,7 @@
|
||||
</view>
|
||||
</template>
|
||||
<!-- <button style="width:100rpx;height:60rpx;float:right;font-size:20rpx;line-height:60rpx;background:#F3F3FA;color:black;">已读</button> -->
|
||||
</u-cell-item>
|
||||
</u-cell>
|
||||
</view>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
@@ -150,7 +150,7 @@
|
||||
this.getMessage()
|
||||
},
|
||||
getMessage() {
|
||||
this.params.memberId = this.$options.filters.isLogin().id;
|
||||
this.params.memberId = this.isLogin().id;
|
||||
|
||||
messages(this.params).then(res => {
|
||||
console.log(res)
|
||||
|
||||
@@ -3,14 +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'" :is-back="false" :is-fixed="index === 1 ? false : true">
|
||||
<search style="width: 100%" :res="item.options" />
|
||||
<!-- #ifndef H5 -->
|
||||
<!-- 扫码功能 不兼容h5 详情文档: https://uniapp.dcloud.io/api/system/barcode?id=scancode -->
|
||||
<div slot="right" class="navbar-right">
|
||||
<u-icon name="scan" @click="scan()" color="#666" size="50"></u-icon>
|
||||
</div>
|
||||
<!-- #endif -->
|
||||
<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>
|
||||
</u-navbar>
|
||||
<carousel v-if="item.type == 'carousel'" :res="item.options" />
|
||||
<titleLayout v-if="item.type == 'title'" :res="item.options" />
|
||||
@@ -66,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 {
|
||||
@@ -77,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,
|
||||
@@ -102,6 +138,7 @@ export default {
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.setCapsuleInset();
|
||||
this.init();
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序默认分享
|
||||
@@ -110,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();
|
||||
},
|
||||
@@ -243,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>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<u-modal v-model="show" cancelText="不同意" confirmText="同意" showCancelButton title="服务协议和隐私政策" @confirm="confirm" @cancel="cancel">
|
||||
<u-modal v-model:show="show" cancelText="不同意" confirmText="同意" showCancelButton title="服务协议和隐私政策" @confirm="confirm" @cancel="cancel">
|
||||
<view class="u-update-content">
|
||||
请您务必审慎阅读,充分理解“服务协议”和“隐私政策”各条款，
|
||||
包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识,
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<search style="width: 100%" :res="item.options" />
|
||||
<!-- #ifndef H5 -->
|
||||
<!-- 扫码功能 不兼容h5 详情文档: https://uniapp.dcloud.io/api/system/barcode?id=scancode -->
|
||||
<div slot="right" class="navbar-right">
|
||||
<div class="navbar-right">
|
||||
<u-icon name="scan" @click="scan()" color="#666" size="50"></u-icon>
|
||||
</div>
|
||||
<!-- #endif -->
|
||||
|
||||
@@ -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">{{ walletNum | unitPrice }}</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>
|
||||
@@ -98,8 +96,8 @@ export default {
|
||||
},
|
||||
onLoad() { },
|
||||
onShow() {
|
||||
this.userInfo = this.$options.filters.isLogin() || {};
|
||||
if (this.$options.filters.isLogin("auth")) {
|
||||
this.userInfo = this.isLogin() || {};
|
||||
if (this.isLogin("auth")) {
|
||||
this.getUserOrderNum();
|
||||
} else {
|
||||
this.walletNum = 0;
|
||||
@@ -109,7 +107,7 @@ export default {
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getUserOrderNum();
|
||||
this.userInfo = this.$options.filters.isLogin();
|
||||
this.userInfo = this.isLogin();
|
||||
},
|
||||
// #ifndef MP
|
||||
onNavigationBarButtonTap(e) {
|
||||
@@ -134,7 +132,7 @@ export default {
|
||||
userDetail() {
|
||||
this.userInfo.id
|
||||
? this.navigateTo("/pages/mine/set/personMsg")
|
||||
: this.$options.filters.navigateToLogin();;
|
||||
: this.navigateToLogin();;
|
||||
},
|
||||
async getUserOrderNum() {
|
||||
uni.stopPullDownRefresh();
|
||||
@@ -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 {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<view class="goods-intro">
|
||||
<view>{{goods.goodsName}}</view>
|
||||
<view>{{goods.goods_sn}}</view>
|
||||
<view>¥{{goods.goods_price | unitPrice}}</view>
|
||||
<view>¥{{unitPrice(goods.goods_price)}}</view>
|
||||
</view>
|
||||
<!-- <button>找相似</button> -->
|
||||
</view>
|
||||
@@ -16,7 +16,7 @@
|
||||
<image :src="item.thumbnail" mode=""></image>
|
||||
<view class="nowrap">{{item.name}}</view>
|
||||
<view>
|
||||
<text>￥{{item.price | unitPrice}}
|
||||
<text>￥{{unitPrice(item.price)}}
|
||||
<!-- <text v-if="item.point">+{{item.point || 0}}积分</text> -->
|
||||
</text>
|
||||
<text>￥{{item.mktprice}}</text>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -111,10 +111,10 @@
|
||||
</div>
|
||||
|
||||
<template>
|
||||
<u-popup v-model="sharingShow" mode="bottom" border-radius="14">
|
||||
<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>
|
||||
|
||||
@@ -171,7 +171,7 @@ export default {
|
||||
'/pages/mine/set/feedBack'
|
||||
]
|
||||
if (!ignores.includes(url)) {
|
||||
if (this.$options.filters.tipsToLogin('normal')) {
|
||||
if (this.tipsToLogin('normal')) {
|
||||
this.handleNavigate(url)
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user