347 lines
8.7 KiB
Vue
347 lines
8.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOptionx" :up="upOptionx">
|
|
<view class="list-Content">
|
|
<u-skeleton rowsHeight="153" rows="10" :loading="loading" :title="false" >
|
|
<view></view>
|
|
<template v-for="item,index in dataList">
|
|
<view class="list-Content-Item" :class="[index>=dataList['length']-1?'list-Content-Stykle':'']">
|
|
<view class="list-Content-Item-Img">
|
|
<image class="img" :src="item['goods_cover']">
|
|
</image>
|
|
<!-- mode="aspectFit" -->
|
|
</view>
|
|
<view class="list-Content-Item-Infor">
|
|
<view class="list-Content-Item-Infor-Title">
|
|
{{item['goods_name']}}
|
|
</view>
|
|
<view class="list-Content-Item-Infor-Sale">
|
|
销售：{{item['sales_num']}}份
|
|
</view>
|
|
<view class="list-Content-Item-Infor-Subsidy">
|
|
补贴卡最高抵扣￥{{_amount(item['deduction_price'])}}
|
|
</view>
|
|
<view class="list-Content-Item-Infor-Price">
|
|
<view class="list-Content-Item-Infor-Price-Left">
|
|
<view class="list-Content-Item-Infor-Price-Left-Subsidy-Price">
|
|
<view>补贴后价格：</view>
|
|
<view class="Price">
|
|
<view
|
|
style="font-weight: 800; color: #FF2A30;font-size: 36rpx;margin-right: 20rpx;">
|
|
<text style="color: #FF2A30;font-size: 22rpx;">￥{{_amount(item['pay_price'] - item['deduction_price'])}}</text></view>
|
|
<view class="xa">￥{{_amount(item['pay_price'])}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="list-Content-Item-Infor-Price-Right">
|
|
<navigator :url="`/pages/diy/commodity_home/commodity_home?goods_id=${item['id']}`" hover-class="none">
|
|
<button class="list-Content-Item-Infor-Price-Right-Btn">去定制</button>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</u-skeleton>
|
|
</view>
|
|
</mescroll-body>
|
|
<view class="notice-bar" v-if="notice">
|
|
<u-notice-bar :text="notice"></u-notice-bar>
|
|
</view>
|
|
<u-tabbar
|
|
:value="0"
|
|
:placeholder="false"
|
|
:safeAreaInsetBottom="false"
|
|
@change="change"
|
|
>
|
|
<u-tabbar-item text="首页" icon="home"></u-tabbar-item>
|
|
<u-tabbar-item text="订单" icon="account"></u-tabbar-item>
|
|
</u-tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 下拉组件混入
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
// 公用混入
|
|
import mixin from "@/static/js/mixin/mixin.js";
|
|
// 请求接口
|
|
import {goodsListAPI,noticeAPI} from '@/request/diy/index.js';
|
|
import { mapMutations } from 'vuex';
|
|
// 抵扣价格 deduction_price
|
|
// 抵扣后价格 pay_price - deduction_price
|
|
// 划线价格 pay_price
|
|
let self;
|
|
export default {
|
|
mixins: [MescrollMixin,mixin],
|
|
data() {
|
|
return {
|
|
dataList:[1,2,3,4,5,6,7,8,9],
|
|
// 是否展示骨架屏
|
|
// true:展示
|
|
// false:隐藏
|
|
loading:true,
|
|
// 下拉刷新数据
|
|
downOptionx:{
|
|
autoShowLoading:true
|
|
},
|
|
// 上拉加载数据
|
|
upOptionx:{
|
|
textNoMore:'没有更多了'
|
|
},
|
|
notice:''
|
|
};
|
|
},
|
|
onLoad() {
|
|
self = this;
|
|
this.SETBRANDINFOR({
|
|
brand_id: 30,
|
|
brand_name:'DIY'
|
|
});
|
|
noticeAPI().then(res=>{
|
|
this['notice'] = res['data'];
|
|
})
|
|
// // 设置微信分享标识
|
|
// wx.miniProgram.postMessage({ data: 30});
|
|
console.log('初始化');
|
|
console.log(this.calc(19.90,100,'*'),'计算');
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
SETBRANDINFOR: 'shopping/SETBRANDINFOR'
|
|
}),
|
|
// 上拉
|
|
upCallback(pagepara) {
|
|
console.log(pagepara,'页面upCallback');
|
|
// 页码
|
|
let page = pagepara['num'];
|
|
// 页长
|
|
let pageSize = pagepara['size'];
|
|
goodsListAPI({page}).then(res=>{
|
|
console.log(res,'res');
|
|
//设置列表数据
|
|
//如果是第一页需手动置空列表
|
|
if (pagepara['num'] == 1){
|
|
this['dataList'] = [];
|
|
};
|
|
// 接口返回的页数据列表 (数组)
|
|
const pagingDataList = res['data']['data'];
|
|
// 接口返回的页数据长度
|
|
const pagingDataLength = pagingDataList['length'];
|
|
// 接口返回的总页数
|
|
const pagingDataPage = res['data']['last_page'];
|
|
//追加新数据
|
|
this['dataList'].push(...pagingDataList);
|
|
// 关闭加载状态
|
|
this['mescroll'].endByPage(pagingDataLength, pagingDataPage);
|
|
// 关闭骨架屏 只有触发下拉刷新之后或者初次加载才会执行这个逻辑
|
|
this['loading'] = false;
|
|
// mescroll.lockUpScroll(false)
|
|
|
|
}).catch(res=>{
|
|
// 请求失败,隐藏加载状态
|
|
this.mescroll.endErr()
|
|
})
|
|
},
|
|
|
|
change(e){
|
|
uni.redirectTo({
|
|
url:'/pages/diy/orders/ersonal_order/ersonal_order'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F5F5F5;
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
.notice-bar {
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.list-Content {
|
|
margin-top: 100rpx;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
// background-color: #FFFFFF;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 90vh;
|
|
padding: 0 24rpx;
|
|
overflow: hidden;
|
|
// .u-skeleton{
|
|
|
|
// }
|
|
/deep/ &-Stykle::after {
|
|
display: none !important;
|
|
}
|
|
|
|
&-Item {
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 27rpx;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-shadow: 0 0 14rpx 1rpx rgba(174, 174, 174, 0.3300);
|
|
border-radius: 20rpx;
|
|
background-color: #FFFFFF;
|
|
margin-bottom: 32rpx;
|
|
// &::last-child{
|
|
// // display: none;
|
|
// }
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 1rpx;
|
|
background-color: #EDEDED;
|
|
transform: scale(1, 1);
|
|
|
|
}
|
|
|
|
&-Img {
|
|
width: 280rpx;
|
|
height: 280rpx;
|
|
min-width: 280rpx;
|
|
min-height: 280rpx;
|
|
max-width: 280rpx;
|
|
max-height: 280rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
|
|
.img {
|
|
border-radius: 20rpx;
|
|
min-height: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
&-Infor {
|
|
flex: 1;
|
|
padding-left: 20rpx;
|
|
|
|
&-Title {
|
|
font-size: 28rpx;
|
|
font-weight: 800;
|
|
word-break: break-all;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
min-height: 40rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
&-Sale {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
&-Subsidy {
|
|
display: inline-block;
|
|
font-size: 22rpx;
|
|
color: #FFFFFF;
|
|
background-color: #FF7700;
|
|
border-radius: 10rpx;
|
|
padding: 8rpx 30rpx;
|
|
position: relative;
|
|
// overflow: hidden;
|
|
margin: 20rpx 0 10rpx 0;
|
|
|
|
&::after {
|
|
content: '';
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 50rpx;
|
|
position: absolute;
|
|
left: -10rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 50rpx;
|
|
position: absolute;
|
|
right: -10rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
&-Price {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&-Left {
|
|
overflow: hidden;
|
|
|
|
&-Original-Price {
|
|
margin: 10rpx 0;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
&-Subsidy-Price {
|
|
margin: 10rpx 0;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
max-width: 220rpx;
|
|
|
|
.Price {
|
|
// display: flex;
|
|
align-items: flex-end;
|
|
flex-direction: row;
|
|
|
|
.xa {
|
|
text-decoraTion: line-through;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-Right {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&-Btn {
|
|
width: 176rpx;
|
|
height: 80rpx;
|
|
color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
line-height: 80rpx;
|
|
background: linear-gradient(180deg, #FFAF00 0%, #FF7700 100%);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|