forked from angelo/web-retail-h5
352 lines
7.7 KiB
Vue
352 lines
7.7 KiB
Vue
|
<!--
|
||
|
|
* @Descripttion:
|
||
|
|
* @version:
|
||
|
|
* @Author: kBank
|
||
|
|
* @Date: 2022-11-21 15:11:22
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<!-- <backIcon v-if="user.registerShare!=0&&user.registerFans!=0"></backIcon>
|
||
|
|
<view class="index_header">
|
||
|
|
<view>{{ zoneList[0].label }}</view>
|
||
|
|
</view> -->
|
||
|
|
<view class="goods">
|
||
|
|
<view class="goods_item"
|
||
|
|
v-for="item in goodsList"
|
||
|
|
:key="item.pkId"
|
||
|
|
@tap="goDetails(item)">
|
||
|
|
<img :src="item.cover1"
|
||
|
|
class="goodImg"
|
||
|
|
alt="">
|
||
|
|
<view class="goods_item_bom">
|
||
|
|
<view class="tit1_flex">
|
||
|
|
<view class="tit2">{{ item.waresPrice | numberToCurrency | isLocal }}</view>
|
||
|
|
<!-- <img class="shareImg"
|
||
|
|
:src="shareImg"
|
||
|
|
@click.stop="openImg(item)"
|
||
|
|
alt=""> -->
|
||
|
|
</view>
|
||
|
|
<view class="disFlex">
|
||
|
|
<view class="tit3">
|
||
|
|
<span class="qzbq"
|
||
|
|
v-if="item.prefixLabelTarget != undefined">[{{ item.prefixLabelTarget.label }}]</span>
|
||
|
|
<span>{{ item.waresName }}</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="disFlex">
|
||
|
|
<view class="tit4">
|
||
|
|
{{$t('CK_KS_102')}}:{{ item.sales | numberToCurrency |seles}}
|
||
|
|
</view>
|
||
|
|
<view class="tit4"
|
||
|
|
style="margin-left:10px">{{$t('ENU_TOTAL_V_1')}}:{{ item.waresAchieve | numberToCurrency}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="addCar">{{ $t('N_I_192') }}</view> -->
|
||
|
|
<view class="md">
|
||
|
|
<img v-for="ctem in item.sellingLabelList"
|
||
|
|
v-show="item.sellingLabelList"
|
||
|
|
:key="ctem.pkId"
|
||
|
|
:src="ctem.labelImage||''"
|
||
|
|
alt="">
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import clTabbar from '@/components/cl-tabbar.vue'
|
||
|
|
import * as api from '@/config/goods'
|
||
|
|
import { mapGetters } from 'vuex'
|
||
|
|
import backIcon from '@/components/backIcon.vue'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
'cl-tabbar': clTabbar,
|
||
|
|
backIcon,
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapGetters(['user']),
|
||
|
|
},
|
||
|
|
filters:{
|
||
|
|
seles(value){
|
||
|
|
|
||
|
|
if(value>999){
|
||
|
|
return 999 + '+'
|
||
|
|
}else{
|
||
|
|
return value
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: '',
|
||
|
|
// 是否显示返回按钮
|
||
|
|
isBack: true,
|
||
|
|
backColor: 'rgba(165, 42, 42, 0)',
|
||
|
|
isKong: false,
|
||
|
|
shareImg: require('../../static/images/share.png'),
|
||
|
|
addCarImg1: require('../../static/images/addCar1.png'),
|
||
|
|
addCarImg2: require('../../static/images/addCar2.png'),
|
||
|
|
zoneList: [],
|
||
|
|
specialArea: 7,
|
||
|
|
goodsList: [],
|
||
|
|
source: '',
|
||
|
|
productCategory: '',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.specialArea = options.specialArea || 7
|
||
|
|
if (this.specialArea == 21) {
|
||
|
|
this.source = options.source
|
||
|
|
this.productCategory = options.productCategory
|
||
|
|
}
|
||
|
|
if (this.specialArea == 7) {
|
||
|
|
this.zoneList = [
|
||
|
|
{
|
||
|
|
label: this.$t('ENU_MENU_302'),
|
||
|
|
value: 7,
|
||
|
|
name: 'hiFans',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
this.getAllGoods()
|
||
|
|
} else {
|
||
|
|
this.zoneList = [
|
||
|
|
{
|
||
|
|
label: this.$t('ENU_MENU_303'),
|
||
|
|
value: 21,
|
||
|
|
name: 'welfare',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
this.getAllGoods1()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {},
|
||
|
|
methods: {
|
||
|
|
goSeach() {},
|
||
|
|
getArea(item) {
|
||
|
|
this.specialArea = item.value
|
||
|
|
this.getAllGoods()
|
||
|
|
},
|
||
|
|
openImg() {},
|
||
|
|
goDetails(item) {
|
||
|
|
if (this.specialArea == 7) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url:
|
||
|
|
'/pages/shareArea/details?waresCode=' +
|
||
|
|
item.waresCode +
|
||
|
|
'&specialArea=' +
|
||
|
|
item.specialArea,
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
uni.navigateTo({
|
||
|
|
url:
|
||
|
|
'/pages/shareArea/haiDetails?source=' +
|
||
|
|
this.source +
|
||
|
|
'&specialArea=21' +
|
||
|
|
'&pkId=' +
|
||
|
|
item.pkId,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getAllGoods() {
|
||
|
|
api
|
||
|
|
.getAllGoods({
|
||
|
|
specialArea: this.specialArea,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
this.goodsList = res.data
|
||
|
|
this.goodsList.forEach((item) => {
|
||
|
|
if (item.waresName.length > 8) {
|
||
|
|
item.waresName = item.waresName.substring(0, 8) + '...'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getAllGoods1() {
|
||
|
|
api
|
||
|
|
.sharingWares({
|
||
|
|
source: this.source,
|
||
|
|
productCategory: this.productCategory,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
this.goodsList = res.rows
|
||
|
|
this.goodsList.forEach((item) => {
|
||
|
|
if (item.waresName.length > 8) {
|
||
|
|
item.waresName = item.waresName.substring(0, 8) + '...'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.content {
|
||
|
|
background: #f9f9f9;
|
||
|
|
// position: relative;
|
||
|
|
min-height: 94vh;
|
||
|
|
}
|
||
|
|
.index_header {
|
||
|
|
background: #f9f9f9;;
|
||
|
|
height: 330rpx;
|
||
|
|
font-size: 18px;
|
||
|
|
font-family: PingFang SC-Semibold, PingFang SC;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333333;
|
||
|
|
text-align: center;
|
||
|
|
padding: 10px 0;
|
||
|
|
}
|
||
|
|
.seach {
|
||
|
|
background: #fff;
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 20rpx;
|
||
|
|
margin: 0 24rpx;
|
||
|
|
box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
|
||
|
|
border-radius: 10px 10px 10px 10px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
position: relative;
|
||
|
|
.seach_i {
|
||
|
|
// padding: 20rpx;
|
||
|
|
border-radius: 34rpx;
|
||
|
|
background: #fff;
|
||
|
|
flex: 1;
|
||
|
|
// margin-right: 40rpx;
|
||
|
|
border: 1px solid #f33131;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tabList {
|
||
|
|
}
|
||
|
|
.tab {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 24rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
.tab_i {
|
||
|
|
// width: 120rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #999999;
|
||
|
|
margin-right: 28rpx;
|
||
|
|
white-space: nowrap;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.actTab {
|
||
|
|
// width: 120rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: PingFang SC-Semibold, PingFang SC;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #ed1d25;
|
||
|
|
margin-right: 28rpx;
|
||
|
|
white-space: nowrap;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.heng {
|
||
|
|
width: 24px;
|
||
|
|
height: 2px;
|
||
|
|
background: #ed1d25;
|
||
|
|
border-radius: 1px 1px 1px 1px;
|
||
|
|
margin-top: 4rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0 24rpx;
|
||
|
|
// margin-top: -260rpx;
|
||
|
|
.goods_item {
|
||
|
|
background: #fff;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
border-radius: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
width: 49%;
|
||
|
|
}
|
||
|
|
.goods_item_bom {
|
||
|
|
padding: 6rpx 20rpx 10rpx 20rpx;
|
||
|
|
min-height: 248rpx;
|
||
|
|
box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
|
||
|
|
// border-radius: 10px;
|
||
|
|
margin-top: -8px;
|
||
|
|
}
|
||
|
|
.goodImg {
|
||
|
|
height: 274rpx;
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.shareImg {
|
||
|
|
height: 54rpx;
|
||
|
|
width: 54rpx;
|
||
|
|
}
|
||
|
|
.tit1_flex {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 16rpx;
|
||
|
|
}
|
||
|
|
.tit1 {
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
.tit2 {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #b42b2a;
|
||
|
|
}
|
||
|
|
.tit3 {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
.tit4 {
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
.disFlex {
|
||
|
|
// width: 278px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-bottom: 6rpx;
|
||
|
|
}
|
||
|
|
.qzbq {
|
||
|
|
color: #f33131;
|
||
|
|
}
|
||
|
|
.md {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-top: 5px;
|
||
|
|
// padding-bottom: 10px;
|
||
|
|
img {
|
||
|
|
height: 22px;
|
||
|
|
width: auto;
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.addCar {
|
||
|
|
border: 1px solid #f33131;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 12px;
|
||
|
|
font-family: PingFang SC-Semibold, PingFang SC;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #f33131;
|
||
|
|
text-align: center;
|
||
|
|
padding: 6rpx 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|