605 lines
17 KiB
Plaintext
605 lines
17 KiB
Plaintext
<template>
|
||
<view class="content">
|
||
<view class="" style="width: 100%;height: 800rpx;">
|
||
|
||
</view>
|
||
<view class="Commodity-Area">
|
||
<view class="Commodity-Area-Menu">
|
||
<scroll-view scroll-with-animation :scroll-y="true" class="scroll-Y">
|
||
<template v-for="ClassificationMenuvalue,ClassificationMenuKey,ClassificationMenuIndex in List">
|
||
<view class="Commodity-Area-Menu-Item" :key="ClassificationMenuKey"
|
||
@tap="MenuClick(ClassificationMenuIndex)"
|
||
:class="{CommodityAreaMenuItem:current == ClassificationMenuIndex?true:false}">
|
||
{{ClassificationMenuKey}}
|
||
</view>
|
||
</template>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="Commodity-Area-Commodity">
|
||
// <!-- 注意加KEY/注意加KEY/注意加KEY -->
|
||
<scroll-view scroll-with-animation :scroll-top="scrolltop" :scroll-y="true" class="scroll-Y">
|
||
<template v-for="ClassificationTitleValue,ClassificationTitleKey,ClassificationTitleIndex in List">
|
||
<view class="Commodity-Area-Commodity-Item-Class">
|
||
<view v-for="TwoCommodityItemValue,TwoCommodityItemKey,TwoCommodityItemIndex in ClassificationTitleValue" class="Commodity-Area-Commodity-Item">
|
||
<view class="Commodity-Area-Commodity-Item-Title">
|
||
<view class="Title">
|
||
//<!-- {{ClassificationTitleKey}} -->
|
||
{{TwoCommodityItemKey}}
|
||
</view>
|
||
<view class="Winnow">
|
||
<view class="Winnow-Item">
|
||
<text class="">优惠</text>
|
||
<image class="img" v-if="false"
|
||
src="https://img.agrimedia.cn/chwl/v2/ascendingorder.png" mode="aspectFit">
|
||
</image>
|
||
<image class="img" src="https://img.agrimedia.cn/chwl/v2/ascendingorder.png"
|
||
mode="aspectFit"></image>
|
||
</view>
|
||
<view class="Winnow-Item">
|
||
<text class="">销量</text>
|
||
<image class="img" v-if="false"
|
||
src="https://img.agrimedia.cn/chwl/v2/ascendingorder.png" mode="aspectFit">
|
||
</image>
|
||
<image class="img" src="https://img.agrimedia.cn/chwl/v2/ascendingorder.png"
|
||
mode="aspectFit"></image>
|
||
</view>
|
||
<view class="Winnow-Item">
|
||
<text class="">价格</text>
|
||
<image class="img" v-if="false"
|
||
src="https://img.agrimedia.cn/chwl/v2/ascendingorder.png" mode="aspectFit">
|
||
</image>
|
||
<image class="img" src="https://img.agrimedia.cn/chwl/v2/ascendingorder.png"
|
||
mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="Goods"
|
||
v-for="CommodityValue,CommodityKey,CommodityIndex in TwoCommodityItemValue">
|
||
<view class="Goods-Itme">
|
||
<view class="Goods-Itme-Img">
|
||
<image v-if="CommodityValue['is_kill']" class="skill-icon"
|
||
src="https://img.agrimedia.cn/chwl%2Fv2%2FskilIcon.png"></image>
|
||
<image class="img" :src="CommodityValue['goodsImg']" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="Goods-Itme-Infor">
|
||
<view class="Goods-Itme-Infor-Title">
|
||
<!-- <view class="subsidy">
|
||
补贴
|
||
</view> -->
|
||
<text class="Title">{{CommodityValue['goodsTitle']}}</text>
|
||
</view>
|
||
<view class="Goods-Itme-Infor-Remarks">
|
||
<text>{{CommodityValue['not_use_time']}}</text>
|
||
</view>
|
||
<view class="Price-Content">
|
||
<view class="Subsidy-Price" v-if="CommodityValue['deduction_prop']">
|
||
<text class="Subsidy-Price-priceNum"
|
||
style="font-size: 37rpx;">{{ __amount((CommodityValue['price'] / 100) - _deduction_prop(CommodityValue['deduction_prop'],CommodityValue['price']))}}</text>
|
||
<text class="Subsidy-Price-Text">补贴价</text>
|
||
</view>
|
||
<view class="Price-Content-Offering-Price">
|
||
<text
|
||
class="Price-Content-Offering-Price-PriceNum">售价：￥{{_amount(CommodityValue['price'])}}</text>
|
||
<text
|
||
class="Price-Content-Offering-Price-PriceOld">￥{{_amount(CommodityValue['originalPrice'])}}</text>
|
||
</view>
|
||
</view>
|
||
//<!-- <view class="Goods-Itme-Infor-Subsidy-Limit">
|
||
//<view class="Subsidy" v-if="item['deduction_prop']">
|
||
// 补贴：￥{{_deduction_prop(item['deduction_prop'],item['price'])}}
|
||
//</view>
|
||
//<view class="Limit">
|
||
//限购2份
|
||
//</view>
|
||
//</view> -->
|
||
//<!-- <view class="Goods-Itme-Infor-Price">
|
||
//<text class="priceNum" v-if="item['deduction_prop']">￥{{ __amount((item['price'] / 100) - _deduction_prop(item['deduction_prop'],item['price']))}}</text>
|
||
//<text class="priceNum" v-else>￥{{_amount(item['price'])}}</text>
|
||
//<text class="priceOld">￥{{_amount(item['originalPrice'])}}</text>
|
||
//</view> -->
|
||
</view>
|
||
//<!-- <view class="Goods-Itme-Infor-Purchase">
|
||
//抢购
|
||
//</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
current: 0,
|
||
List: {},
|
||
seatArr: [],
|
||
scrolltop: 0
|
||
}
|
||
},
|
||
onLoad(parameters) {
|
||
console.log(400/(uni.upx2px(100)/100));
|
||
let list = {};
|
||
for(let index = 0; index<50; index++){
|
||
if(index % 2 == 0){
|
||
list[`${index}婚庆/摄影`] = {
|
||
"婚庆1": [{
|
||
"goods_id": 1294,
|
||
"goodsTitle": "夕阳观赏（测试勿拍）",
|
||
"goodsImg": "https://img.agrimedia.cn/chwl/20221101160340723122.jpg",
|
||
"originalPrice": 20000,
|
||
"price": 10000,
|
||
"not_use_time": "不限制使用日期",
|
||
"is_about": 0,
|
||
"deduction_prop": 10,
|
||
"class_pid": 562,
|
||
"class_id": 580,
|
||
"class_pid_name": "婚庆/摄影/摄像",
|
||
"class_id_name": "婚庆/摄影/摄像服务其他",
|
||
"deduction_price": "9000"
|
||
}],
|
||
"摄影2": [{
|
||
"goods_id": 1412,
|
||
"goodsTitle": "测试团餐",
|
||
"goodsImg": "https://img.agrimedia.cn/chwl/20221226105205337025.jpg",
|
||
"originalPrice": 10100,
|
||
"price": 10000,
|
||
"not_use_time": "不限制使用日期",
|
||
"is_about": 1,
|
||
"deduction_prop": 10,
|
||
"class_pid": 521,
|
||
"class_id": 522,
|
||
"class_pid_name": "爱车服务",
|
||
"class_id_name": "电动车/自行车",
|
||
"deduction_price": "9000"
|
||
},
|
||
{
|
||
"goods_id": 1413,
|
||
"goodsTitle": "测试服务员",
|
||
"goodsImg": "https://img.agrimedia.cn/chwl/20221227120010146084.jpg",
|
||
"originalPrice": 1,
|
||
"price": 10000,
|
||
"not_use_time": "不限制使用日期",
|
||
"is_about": 1,
|
||
"deduction_prop": 10,
|
||
"class_pid": 521,
|
||
"class_id": 522,
|
||
"class_pid_name": "爱车服务",
|
||
"class_id_name": "电动车/自行车",
|
||
"deduction_price": "9000"
|
||
}
|
||
]
|
||
}
|
||
}else{
|
||
list[`${index}爱车服务`] = {
|
||
"飞机/大炮": [{
|
||
"goods_id": 1294,
|
||
"goodsTitle": "夕阳观赏（测试勿拍）",
|
||
"goodsImg": "https://img.agrimedia.cn/chwl/20221101160340723122.jpg",
|
||
"originalPrice": 20000,
|
||
"price": 10000,
|
||
"not_use_time": "不限制使用日期",
|
||
"is_about": 0,
|
||
"deduction_prop": 10,
|
||
"class_pid": 562,
|
||
"class_id": 580,
|
||
"class_pid_name": "婚庆/摄影/摄像",
|
||
"class_id_name": "婚庆/摄影/摄像服务其他",
|
||
"deduction_price": "9000"
|
||
}],
|
||
"电动车/自行车": [{
|
||
"goods_id": 1412,
|
||
"goodsTitle": "测试团餐",
|
||
"goodsImg": "https://img.agrimedia.cn/chwl/20221226105205337025.jpg",
|
||
"originalPrice": 10100,
|
||
"price": 10000,
|
||
"not_use_time": "不限制使用日期",
|
||
"is_about": 1,
|
||
"deduction_prop": 10,
|
||
"class_pid": 521,
|
||
"class_id": 522,
|
||
"class_pid_name": "爱车服务",
|
||
"class_id_name": "电动车/自行车",
|
||
"deduction_price": "9000"
|
||
},
|
||
{
|
||
"goods_id": 1413,
|
||
"goodsTitle": "测试服务员",
|
||
"goodsImg": "https://img.agrimedia.cn/chwl/20221227120010146084.jpg",
|
||
"originalPrice": 1,
|
||
"price": 10000,
|
||
"not_use_time": "不限制使用日期",
|
||
"is_about": 1,
|
||
"deduction_prop": 10,
|
||
"class_pid": 521,
|
||
"class_id": 522,
|
||
"class_pid_name": "爱车服务",
|
||
"class_id_name": "电动车/自行车",
|
||
"deduction_price": "9000"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
};
|
||
this['List'] = list;
|
||
this.$nextTick(() => {
|
||
this.getMenuItemTop()
|
||
})
|
||
},
|
||
onShow() {},
|
||
methods: {
|
||
_deduction_prop(deduction, amount) {
|
||
return this.RetainDecimalPoints({
|
||
num: (deduction / 100) * amount,
|
||
iscarry: true,
|
||
toFixed: 2
|
||
})
|
||
},
|
||
MenuClick(index) {
|
||
this['current'] = index;
|
||
this['scrolltop'] = this['seatArr'][index]
|
||
},
|
||
RetainDecimalPoints({
|
||
num = 0,
|
||
iscarry = true,
|
||
toFixed = 2
|
||
}) {
|
||
if (num.__proto__.constructor.name !== 'string' && typeof num !== 'string') {
|
||
num = String(num);
|
||
}
|
||
// 保留小数点后几位
|
||
toFixed = Number(toFixed)
|
||
// 因为该函数分为用户手动输入和后台传入方式
|
||
// 当用户手动输入的价格则不需要除以100
|
||
// 后台传入的价格是以分传入,所以需要除以一百
|
||
if (iscarry) {
|
||
num = '' + (num / 100);
|
||
};
|
||
// 检测传入参数是否为带小数点参数
|
||
let index = num.indexOf('.');
|
||
// 传入数据携带小数点
|
||
if (index != -1) {
|
||
// 返回数据是否需要携带小数点
|
||
if (toFixed > 0) {
|
||
// 拿到现有数据小数点之后存在几位
|
||
let _l = num.substring(index + 1, num.length);
|
||
// 如果当前数据小数点之后现存位数大于给定返回位数则截取
|
||
if (_l['length'] > toFixed) {
|
||
num = num.substring(0, (index + 1) + toFixed);
|
||
} else {
|
||
// 如果当前数据小数点之后现存位数小于给定返回位数则循环补位
|
||
for (let _i = 0; _i < toFixed - _l['length']; _i++) {
|
||
num += '0';
|
||
}
|
||
}
|
||
} else {
|
||
num = num.substring(0, index);
|
||
}
|
||
} else {
|
||
// 是否正数
|
||
let number = /(^[1-9]\d*$)/;
|
||
// 是否为正数
|
||
if (number.test(num)) {
|
||
// 定义数组
|
||
let a = [];
|
||
// 结果
|
||
let n = '';
|
||
// 将初始数值赋值至数组
|
||
a = num.split("");
|
||
// 取最终值
|
||
for (let i = 0; i < a.length; i++) {
|
||
n += a[i];
|
||
if (i >= a.length - 1) {
|
||
n += '.';
|
||
for (let i = 0; i < toFixed; i++) {
|
||
n += '0';
|
||
}
|
||
}
|
||
};
|
||
num = n;
|
||
}
|
||
};
|
||
return num;
|
||
},
|
||
|
||
// 佣金格式化
|
||
_commission(num) {
|
||
return this.RetainDecimalPoints({
|
||
num,
|
||
iscarry: false,
|
||
toFixed: 4
|
||
})
|
||
},
|
||
|
||
// 金额格式化(iscarry：true)
|
||
_amount(num) {
|
||
return this.RetainDecimalPoints({
|
||
num,
|
||
iscarry: true,
|
||
toFixed: 2
|
||
})
|
||
},
|
||
|
||
// 金额格式化(iscarry：false)
|
||
__amount(num) {
|
||
return this.RetainDecimalPoints({
|
||
num,
|
||
iscarry: false,
|
||
toFixed: 2
|
||
})
|
||
},
|
||
|
||
// 获取右边菜单每个item到顶部的距离
|
||
getMenuItemTop() {
|
||
let selectorQuery = uni.createSelectorQuery();
|
||
selectorQuery.selectAll('.Commodity-Area-Commodity-Item-Class').boundingClientRect((rects) => {
|
||
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
||
if (!rects['length']) {
|
||
setTimeout(() => {
|
||
this.getMenuItemTop();
|
||
}, 10);
|
||
return;
|
||
}
|
||
rects.forEach(item => {
|
||
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
||
this['seatArr'].push(item['top'] - rects[0]['top']);
|
||
});
|
||
console.log(this['seatArr']);
|
||
}).exec()
|
||
}
|
||
},
|
||
onHide() {},
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
width: 750rpx;
|
||
background-color: rgba(245, 245, 245, 1);
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.Commodity-Area {
|
||
width: 100%;
|
||
height: 100vh;
|
||
flex-direction: row;
|
||
|
||
.Commodity-Area-Menu,
|
||
.Commodity-Area-Commodity,
|
||
.scroll-Y {
|
||
height: 100vh;
|
||
}
|
||
|
||
&-Menu {
|
||
width: 190rpx;
|
||
text-align: center;
|
||
|
||
&-Item {
|
||
line-height: 85rpx;
|
||
width: 100%;
|
||
height: 85rpx;
|
||
font-size: 26rpx;
|
||
word-break: break-all;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.CommodityAreaMenuItem {
|
||
background-color: rgba(255, 255, 255, 1);
|
||
color: rgba(153, 153, 153, 1);
|
||
}
|
||
}
|
||
|
||
&-Commodity {
|
||
flex: 1;
|
||
max-width: 75%;
|
||
.Commodity-Area-Commodity-Item-Class:last-child{
|
||
height: 100vh;
|
||
}
|
||
&-Item {
|
||
background-color: #ffffff;
|
||
|
||
&-Title {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
height: 85rpx;
|
||
line-height: 85rpx;
|
||
padding: 0 15rpx;
|
||
|
||
.Title {
|
||
font-size: 23rpx;
|
||
color: rgba(153, 153, 153, 1);
|
||
}
|
||
|
||
.Winnow {
|
||
flex-direction: row;
|
||
|
||
&-Item {
|
||
width: 80rpx;
|
||
text-align: center;
|
||
align-items: center;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-size: 23rpx;
|
||
flex-direction: row;
|
||
|
||
.img {
|
||
width: 10rpx;
|
||
height: 14rpx;
|
||
min-width: 10rpx;
|
||
min-height: 10rpx;
|
||
max-width: 14rpx;
|
||
max-height: 14rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.Goods {
|
||
padding: 0 15rpx;
|
||
|
||
.Goods-Itme {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
flex-direction: row;
|
||
|
||
&-Img {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-Infor {
|
||
padding-left: 15rpx;
|
||
flex: 1;
|
||
|
||
&-Title {
|
||
margin-bottom: 10rpx;
|
||
|
||
.subsidy {
|
||
width: 80rpx;
|
||
height: 40rpx;
|
||
color: #ffffff;
|
||
background-color: #ec6464;
|
||
font-size: 25rpx;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.Title {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
&-Subsidy-Limit {
|
||
margin-bottom: 10rpx;
|
||
display: flex;
|
||
|
||
.Subsidy {
|
||
color: #ED5757;
|
||
font-size: 23rpx;
|
||
padding: 2rpx 15rpx;
|
||
border-radius: 10rpx;
|
||
font-weight: 600;
|
||
border: 1rpx solid rgba(237, 87, 87, 0.6);
|
||
}
|
||
}
|
||
|
||
&-Remarks {
|
||
margin-bottom: 10rpx;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
&-Price {
|
||
.priceOld {
|
||
font-size: 30rpx;
|
||
text-decoration: line-through;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
padding-left: 10rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.priceNum {
|
||
font-size: 30rpx;
|
||
color: #FF7700;
|
||
font-weight: 400;
|
||
line-height: 36rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
&-Purchase {
|
||
background: #FF7700;
|
||
height: 60rpx;
|
||
width: 120rpx;
|
||
max-width: 120rpx;
|
||
min-width: 140rpx;
|
||
border-radius: 10rpx;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// 要删除的
|
||
.Price-Content {
|
||
.Subsidy-Price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
flex-direction: row;
|
||
|
||
&-priceNum {
|
||
font-size: 48rpx;
|
||
color: rgba(254, 40, 37, 1);
|
||
font-weight: 600;
|
||
|
||
&::before {
|
||
content: '￥';
|
||
color: rgba(254, 40, 37, 1);
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
&-Text {
|
||
color: rgba(254, 40, 37, 1);
|
||
font-size: 24rpx;
|
||
margin-left: 15rpx;
|
||
|
||
}
|
||
}
|
||
|
||
&-Offering-Price {
|
||
flex-direction: row;
|
||
|
||
&-PriceNum {
|
||
color: rgba(254, 40, 37, 1);
|
||
font-size: 24rpx;
|
||
flex-direction: row;
|
||
}
|
||
|
||
&-PriceOld {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
text-decoration: line-through;
|
||
margin-left: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|