mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-18 16:35:53 +08:00
perf: 🎨 改善促销部分荣誉代码 封装为组件使用 更加便捷以及好看。 优化部分页面显示问题
删除部分原有的老样式 更新新版促销样式 页面更加好看 删除冗余代码 封装多种方法以及组件
This commit is contained in:
lemon橪
@@ -1,155 +1,133 @@
|
||||
<template>
|
||||
<view class="wrapper">
|
||||
<view class="wrapper">
|
||||
<u-navbar :border-bottom="false" :title="title">
|
||||
<!-- 中间 -->
|
||||
<view class="slot-wrap container-wrap">
|
||||
<view v-if="search">
|
||||
<u-search @search="searchFun()" @custom="searchFun()" v-model="params.goodsName"></u-search>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右侧 -->
|
||||
<view slot="right">
|
||||
<view style="margin-right: 24rpx;" @click="searchFlag()">
|
||||
<view v-if="search">取消</view>
|
||||
<u-icon v-if="!search" size="44rpx" name="search"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<!-- 顶部栏 -->
|
||||
<div class='header-wraper'>
|
||||
<image src="/static/join-buy.png"></image>
|
||||
</div>
|
||||
<!-- 商品栏 -->
|
||||
<div class="swiper">
|
||||
<goodsTemplate v-if="goodsList.length" :res="goodsList" />
|
||||
|
||||
<u-empty v-else style="margin-top:20%" text="暂无拼团活动" mode="data"></u-empty>
|
||||
</div>
|
||||
|
||||
<u-navbar :border-bottom="false" :background="background" class="unavbar" :title="title">
|
||||
<!-- 中间 -->
|
||||
<view class="slot-wrap container-wrap">
|
||||
|
||||
<view v-if="search">
|
||||
<u-search @search="searchFun()" @custom="searchFun()" v-model="params.goodsName"></u-search>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 右侧 -->
|
||||
<view slot="right">
|
||||
<view style="margin-right: 24rpx;" @click="searchFlag()">
|
||||
<view v-if="search">取消</view>
|
||||
<u-icon v-if="!search" size="44rpx" name="search"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<!-- 顶部栏 -->
|
||||
|
||||
<!-- 商品栏 -->
|
||||
<div class="swiper">
|
||||
|
||||
<div v-if="groupBuy.length !=0">
|
||||
<view class="view-item" v-for="(groupItem, groupIndex) in groupBuy" :key="groupIndex">
|
||||
<view class="view-left">
|
||||
<u-image border-radius="10" shape="square" :src="groupItem.thumbnail" width="186rpx" height="186rpx">
|
||||
|
||||
<view slot="error" style="font-size: 24rpx;">加载失败</view>
|
||||
</u-image>
|
||||
</view>
|
||||
<view class="view-content">
|
||||
<view class="view-content-name">
|
||||
{{ groupItem.goodsName }}
|
||||
</view>
|
||||
<view class="view-content-bottom">
|
||||
<view>
|
||||
<view class="view-content-price">
|
||||
<!-- ￥{{groupItem.sales_price | unitPrice }} <span v-if="groupItem.point">+{{groupItem.point}}积分</span> -->
|
||||
￥{{groupItem.price | unitPrice }}
|
||||
</view>
|
||||
<view class="view-content-original_price">
|
||||
￥{{ groupItem.originalPrice | unitPrice }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="btn-group" @click="toHref(groupItem)"> 去拼团 </view>
|
||||
<view class="buy-content">已售{{groupItem.num || 0}}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore bg-color='#f8f8f8' :status="status" />
|
||||
</div>
|
||||
<u-empty v-else style="margin-top:20%" text="暂无拼团活动" mode="data"></u-empty>
|
||||
|
||||
</div>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Promotions from "@/api/promotions";
|
||||
import * as API_Goods from "@/api/goods";
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
status: "loadmore",
|
||||
is_empty: false,
|
||||
search: false,
|
||||
title: "拼团活动",
|
||||
background: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
empty: false,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
categoryPath: "",
|
||||
goodsName: "",
|
||||
},
|
||||
groupBuy: [],
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
search(val) {
|
||||
val ? (this.title = "") : (this.title = "拼团活动");
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.loadMore();
|
||||
},
|
||||
// 点击搜索按钮
|
||||
onNavigationBarButtonTap(e) {
|
||||
this.popupFlag = !this.popupFlag;
|
||||
},
|
||||
async onLoad() {
|
||||
this.GET_AssembleGoods();
|
||||
},
|
||||
import * as API_Promotions from "@/api/promotions";
|
||||
import * as API_Goods from "@/api/goods";
|
||||
import goodsTemplate from '@/components/m-goods-list/promotion.vue'
|
||||
export default {
|
||||
components: {
|
||||
goodsTemplate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
is_empty: false,
|
||||
search: false,
|
||||
title: "拼团活动",
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.params.pageNumber++;
|
||||
this.GET_AssembleGoods();
|
||||
},
|
||||
searchFlag() {
|
||||
this.search = !this.search;
|
||||
},
|
||||
empty: false,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
categoryPath: "",
|
||||
goodsName: "",
|
||||
},
|
||||
goodsList: [],
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
search(val) {
|
||||
val ? (this.title = "") : (this.title = "拼团活动");
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.loadMore();
|
||||
},
|
||||
// 点击搜索按钮
|
||||
onNavigationBarButtonTap(e) {
|
||||
this.popupFlag = !this.popupFlag;
|
||||
},
|
||||
async onLoad() {
|
||||
this.GET_AssembleGoods();
|
||||
},
|
||||
|
||||
toHref(goods) {
|
||||
this.$navigateTo({
|
||||
url: `/pages/product/goods?id=${goods.skuId}&goodsId=${goods.goodsId}`,
|
||||
});
|
||||
},
|
||||
searchFun() {
|
||||
this.groupBuy = [];
|
||||
this.GET_AssembleGoods();
|
||||
},
|
||||
// 请求拼团数据
|
||||
GET_AssembleGoods() {
|
||||
this.status = "loading";
|
||||
const params = JSON.parse(JSON.stringify(this.params));
|
||||
if (params.category_id === 0) delete params.category_id;
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.params.pageNumber++;
|
||||
this.GET_AssembleGoods();
|
||||
},
|
||||
searchFlag() {
|
||||
this.search = !this.search;
|
||||
},
|
||||
|
||||
API_Promotions.getAssembleList(params)
|
||||
.then((response) => {
|
||||
const data = response.data.result.records;
|
||||
toHref(goods) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${goods.skuId}&goodsId=${goods.goodsId}`,
|
||||
});
|
||||
},
|
||||
searchFun() {
|
||||
this.goodsList = [];
|
||||
this.GET_AssembleGoods();
|
||||
},
|
||||
// 请求拼团数据
|
||||
GET_AssembleGoods() {
|
||||
|
||||
if (!data || !data.length) {
|
||||
this.is_empty = true;
|
||||
this.status = "nomore";
|
||||
} else {
|
||||
if (data.length <= this.params.pageSize) {
|
||||
this.status = "nomore";
|
||||
} else {
|
||||
this.status = "loadmore";
|
||||
}
|
||||
this.is_empty = false;
|
||||
this.groupBuy.push(...(data || []));
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
const params = JSON.parse(JSON.stringify(this.params));
|
||||
if (params.category_id === 0) delete params.category_id;
|
||||
|
||||
API_Promotions.getAssembleList(params)
|
||||
.then((response) => {
|
||||
const data = response.data.result.records;
|
||||
|
||||
if (!data || !data.length) {
|
||||
this.is_empty = true;
|
||||
|
||||
} else {
|
||||
if (data.length <= this.params.pageSize) {
|
||||
|
||||
} else {
|
||||
|
||||
}
|
||||
this.is_empty = false;
|
||||
this.goodsList.push(...(data || []));
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./style.scss";
|
||||
.header-wraper {
|
||||
background: url('/static/bg.png');
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
>image{
|
||||
width: 188rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user