<template>
|
<view class="box">
|
<view class="box_bg" :style="{backgroundImage: 'url(' + Config.resourcePath + Config.bgImg + ')'}"></view>
|
<view class="box_user">
|
<text>{{User.username}}</text>
|
<image src="@/static/ic_logout@2x.png" mode="widthFix" @click="loginOut"></image>
|
</view>
|
<view class="box_content" :style="{maxWidth: Config.rangeSize + 'px', minWidth: Config.rangeSize + 'px'}">
|
<!-- 广告图 -->
|
<view class="advertisement">
|
<image :src="Config.resourcePath + Config.topImg" mode="widthFix"></image>
|
</view>
|
|
<view class="box_content_left" v-if="status > 0" @click="fanhuiPage">
|
<image src="@/static/ic_left@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="box_content_right" @click="xiaPage" v-if="status > 0 && status !== 2">
|
<image src="@/static/ic_right@2x.png" mode="widthFix"></image>
|
</view>
|
|
<!-- 一键清空按钮 -->
|
<view class="box_content_close" v-if="status === 0" @click="empty">
|
一键清空
|
</view>
|
|
<!-- 首页 -->
|
<template v-if="status === 0">
|
<view class="commodityFrom" v-if="shopList && shopList.length > 0">
|
<view class="commodityFrom_head">
|
<view class="commodityFrom_head_item">类别</view>
|
<view class="commodityFrom_head_item">品牌</view>
|
<view class="commodityFrom_head_item">型号</view>
|
<view class="commodityFrom_head_item">指导价</view>
|
<view class="commodityFrom_head_item">入手价</view>
|
</view>
|
<view class="commodityFrom_body">
|
<view class="commodityFrom_body_content">
|
<view class="commodityFrom_body_content_item" v-for="(item, index) in shopList" :key="index">
|
<view class="commodityFrom_body_content_item_num">
|
<view class="commodityFrom_body_content_item_num_img">
|
<image :src="item.categoryImgurl" mode="widthFix"></image>
|
</view>
|
<text>{{item.categoryName}}</text>
|
<!-- {{stringOperations(item.categoryName, 4)}} -->
|
</view>
|
<!-- @click="open(index, 1)" -->
|
<view class="commodityFrom_body_content_item_num" @mouseenter.stop="mouseenterP(index, item.categoryId)" @mouseleave.stop="mouseleaveP(index)">
|
<!-- {{stringOperations(item.brandName, 4)}} brandData -->
|
<text>{{item.brandName}}</text>
|
<view class="drop-down" :style="{ opacity: item.ppShow ? opacity : '0', zIndex: item.ppShow ? zIndex : '-1' }">
|
<view class="drop-down-item" v-for="(child, i) in item.ppData" :key="i" @click.stop="clickBrand(item, child, index)">
|
<text>{{child.name}}</text>
|
</view>
|
</view>
|
</view>
|
<!-- @click="open(index, 2)" -->
|
<view class="commodityFrom_body_content_item_num" @mouseenter.stop="mouseenterX(index)" @mouseleave.stop="mouseleaveX(index)">
|
<!-- {{stringOperations(item.name, 16)}} -->
|
<text>{{item.name}}</text>
|
|
<view class="drop-top" v-show="item.name">
|
{{item.name}}
|
</view>
|
<view class="drop-down" :style="{ opacity: item.xhShow ? opacity : '0', zIndex: item.xhShow ? zIndex : '-1' }">
|
<view class="drop-down-item" v-for="(data, s) in item.xhData" :key="s" @click.stop="clickXH(data, index)">
|
<!-- {{ stringOperations(data.name, 7)}} -->
|
<text>{{data.name}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="commodityFrom_body_content_item_num">
|
<text>{{ item.zdPrice }}</text>
|
</view>
|
<view class="commodityFrom_body_content_item_num">
|
<input
|
type="number"
|
v-model="item.price"
|
@onkeyup="checkInput(this)"
|
@input="changePrice(item.price, index)" />
|
</view>
|
<view class="commodityFrom_body_content_item_tips">
|
<image src="@/static/ic_img@2x.png" mode="widthFix" @click="openImg(index)"></image>
|
<image src="@/static/ic_copy@2x.png" mode="widthFix" @click="copyItem(item)"></image>
|
<image src="@/static/ic_delete@2x.png" mode="widthFix" @click="deleItem(index)"></image>
|
</view>
|
</view>
|
</view>
|
<view class="commodityFrom_body_total">
|
<view class="commodityFrom_body_total_item">总计：</view>
|
<view class="commodityFrom_body_total_item">
|
{{simplifyNum(zdj)}}
|
<!-- {{unitConvert(zdTotalPrice).num}}{{unitConvert(zdTotalPrice).unit}} -->
|
</view>
|
<view class="commodityFrom_body_total_item">
|
{{simplifyNum(totalPrices)}}
|
<!-- {{unitConvert(totalPrice).num}}{{unitConvert(totalPrice).unit}} -->
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="productCategory">
|
<view class="productCategory_list">
|
<view
|
class="productCategory_list_item"
|
v-for="(item, index) in category"
|
:key="index"
|
@click="clickItem(index, item.id, item.name)">
|
<image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
|
<text>{{item.name}}</text>
|
</view>
|
<view class="productCategory_list_zw"></view>
|
<view class="productCategory_list_zw"></view>
|
<view class="productCategory_list_zw"></view>
|
<view class="productCategory_list_zw"></view>
|
<view class="productCategory_list_zw"></view>
|
</view>
|
</view>
|
</template>
|
|
<!-- 商品列表 -->
|
<template v-if="status === 1 || status === 2">
|
<view class="productPage">
|
<view class="productPage_head">
|
<view class="productPage_head_item" v-if="attrFirstList && attrFirstList.length > 0">
|
<text>{{attributeOne.name ? attributeOne.name : attrFirstName}}</text>
|
<image src="@/static/ar_open@2x.png" mode="widthFix"></image>
|
<view class="productPage_xl" v-if="attrFirstList.length > 0">
|
<view class="productPage_xl_iten" v-for="(item, index) in attrFirstList" :key="index" @click="clickShopPageCheck(item, 1)">
|
<text>{{item.name}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="productPage_head_item" v-if="attrSecondList && attrSecondList.length > 0">
|
<text>{{attributeTwo.name ? attributeTwo.name : attrSecondName}}</text>
|
<image src="@/static/ar_open@2x.png" mode="widthFix"></image>
|
<view class="productPage_xl" v-if="attrSecondList.length > 0">
|
<view class="productPage_xl_iten" v-for="(item, index) in attrSecondList" :key="index" @click="clickShopPageCheck(item, 2)">
|
<text>{{item.name}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="productPage_head_item">
|
<text v-if="budget.type == 1 || budget.type == 2">{{budget.name}}</text>
|
<text v-else>{{budget.max && budget.min ? budget.min + '~' + budget.max : '预算'}}</text>
|
<image src="@/static/ar_open@2x.png" mode="widthFix"></image>
|
<view class="productPage_xl" v-if="budgetList.length > 0">
|
<view class="productPage_xl_iten" v-for="(item, index) in budgetList" :key="index" @click="clickShopPageCheck(item, 3)">
|
<template v-if="!item.name">
|
<text>{{item.minamount}}~{{item.maxamount}}</text>
|
</template>
|
<template v-else>
|
<text>{{item.name}}</text>
|
</template>
|
</view>
|
</view>
|
</view>
|
<view class="productPage_head_item">
|
<text>{{shopPageBrand.name ? shopPageBrand.name : '品牌'}}</text>
|
<image src="@/static/ar_open@2x.png" mode="widthFix"></image>
|
<view class="productPage_xl" v-if="brandData1.length > 0">
|
<view class="productPage_xl_iten" v-for="(item, index) in brandData1" :key="index" @click="clickShopPageCheck(item, 4)">
|
<text>{{item.name}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="productPage_pk" v-if="isPK || status === 2">
|
<view class="productPage_pk_shop">
|
<view class="productPage_pk_shop_sp" @click="openSearch('left')" v-if="JSON.stringify(leftShop) == '{}'">
|
<image src="@/static/ic_add@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="productPage_pk_shop_sp1" @click="clickPKshop(leftShop)" v-else>
|
<view class="productPage_pk_shop_sp1_img">
|
<image :src="leftShop.imgurl ? leftShop.prefixUrl + leftShop.imgurl : ''" mode="widthFix"></image>
|
</view>
|
<text>{{leftShop.name}}</text>
|
</view>
|
<view class="productPage_pk_shop_t">
|
<image :src="Config.resourcePath + Config.pkImg" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="productPage_pk_z" @click="jumpPK">
|
<image src="@/static/ic_pk@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="productPage_pk_shop">
|
<view class="productPage_pk_shop_sp" @click="openSearch('right')" v-if="JSON.stringify(rightShop) == '{}'">
|
<image src="@/static/ic_add@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="productPage_pk_shop_sp1" @click="clickPKshop(rightShop)" v-else>
|
<view class="productPage_pk_shop_sp1_img">
|
<image :src="rightShop.imgurl ? rightShop.prefixUrl + rightShop.imgurl : ''" mode="widthFix"></image>
|
</view>
|
<text>{{rightShop.name}}</text>
|
</view>
|
<view class="productPage_pk_shop_t">
|
<image :src="Config.resourcePath + Config.pkImg" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
<view class="productPage_shop" v-if="status === 1 && !pkcontent">
|
<noData v-if="shopPageData.length === 0 && shopPageDataSou.length === 0" />
|
<template v-else>
|
<view class="productPage_shop_item" v-for="(item, index) in isSOU ? shopPageDataSou : shopPageData" :key="index" @click="clickshoppageItem(item)">
|
<view class="productPage_shop_item_img">
|
<image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
|
</view>
|
<!-- stringOperations(item.name, 6) -->
|
<text>{{item.name}}</text>
|
</view>
|
<view class="productPage_shop_zw"></view>
|
<view class="productPage_shop_zw"></view>
|
<view class="productPage_shop_zw"></view>
|
</template>
|
</view>
|
<!-- v-if="status === 2" -->
|
<view class="productPage_parameter" v-if="isPK && pkcontent">
|
<view class="productPage_parameter_item" v-for="(item, index) in [leftShop, rightShop]" :key="index">
|
<view class="productPage_parameter_item_head">
|
<text>{{item.name}}</text>
|
</view>
|
<view class="productPage_parameter_item_content">
|
<view class="productPage_parameter_item_content_price">
|
<view class="zdj">
|
<text>指导价：</text>
|
<text>¥{{item.zdPrice}}</text>
|
</view>
|
<view class="rsj">
|
<text>建议入手价：</text>
|
<text>¥{{item.price}}</text>
|
</view>
|
</view>
|
<view class="productPage_parameter_item_content_nr">
|
<view class="item" v-if="item.param1" v-for="(child, i) in item.param1" :key="child.index">
|
<view class="label">{{child.name}}：</view>
|
<view class="value">{{child.val}}</view>
|
</view>
|
<view v-if="item.param2.length>0" class="paramline"></view>
|
<view class="item" v-if="item.param2" v-for="(child, j) in item.param2" :key="child.index">
|
<view class="label">{{child.name}}：</view>
|
<view class="value">{{child.val}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<!-- 搜索组件 -->
|
<search
|
ref="search"
|
:categoryList="category"
|
:shopList="shopData"
|
:status="status"
|
:categoryName="categoryName"
|
:categoryid="categoryId"
|
@result="result" />
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import search from '@/components/search.vue'
|
import noData from '@/components/noData.vue'
|
import { mapState } from 'vuex'
|
import { categoryList, goodsList, brandList, h5Image, goodsPage, listForH5 } from '@/apis/index.js'
|
export default {
|
data() {
|
return {
|
status: 0, // 0首页 1商品列表 2pk页
|
|
img: '',
|
|
opacity: 1,
|
zIndex: 2,
|
|
index: '',
|
|
val: '',
|
|
isPK: false,
|
pkcontent: false,
|
|
imgList: [], // 查看图片数据集合
|
i: 0,
|
|
categoryId: '', // 类别id
|
categoryName: '', // 类别名称
|
category: [], // 类别数据
|
shopList: [], // 首页已选商品
|
shopData: [], // 商品数据
|
brandData: [], // 品牌数据
|
brandData1: [], // 商品列表页查询搜索
|
|
attrFirstName: '',
|
attrSecondName: '',
|
attrFirstList: [], // 属性1
|
attrSecondList: [], // 属性2
|
budgetList: [], // 预算
|
isSOU: false,
|
shopPageData: [], // 商品列表页面数据
|
shopPageDataSou: [], // 商品列表页面搜索数据
|
attributeOne: { // 商品页面属性一
|
id: '',
|
name: ''
|
},
|
attributeTwo: { // 商品页面属性二
|
id: '',
|
name: ''
|
},
|
budget: { // 商品页面预算
|
id: '',
|
max: '',
|
min: '',
|
type: ''
|
},
|
shopPageBrand: { // 商品页面品牌
|
id: '',
|
name: ''
|
},
|
|
leftShop: {}, // pk左侧商品
|
rightShop: {}, // pk右侧商品
|
|
totalPrices: 0,
|
zdj: 0,
|
|
select: [], // 已选
|
|
model: { // 商品查询数据
|
attrFirst: '',
|
attrSecond: '',
|
brandId: '',
|
categoryId: '',
|
eprice: '',
|
sprice: '',
|
keyword: ''
|
},
|
|
page: 1
|
}
|
},
|
components: { search, noData },
|
onLoad() {
|
var that = this
|
// 监听键盘组合键
|
document.onkeydown = function(e) {
|
var keyCode = e.keyCode || e.which || e.charCode;
|
var ctrlKey = e.ctrlKey || e.metaKey;
|
if (!that.$refs.search.show) {
|
if (ctrlKey && keyCode == 70) {
|
if (that.status === 0) {
|
that.$refs.search.index = 0
|
that.$refs.search.open()
|
}
|
e.preventDefault();
|
return false;
|
} else if (keyCode === 37) {
|
that.fanhuiPage()
|
e.preventDefault();
|
return false;
|
} else if (keyCode === 39) {
|
that.xiaPage()
|
e.preventDefault();
|
return false;
|
}
|
} else {
|
console.log('已经打开搜索框', keyCode)
|
if (keyCode === 38) {
|
that.$refs.search.changeTop()
|
} else if (keyCode === 40) {
|
that.$refs.search.changeBottom()
|
} else if (keyCode === 13) {
|
that.$refs.search.confirm()
|
}
|
}
|
}
|
this.getCategoryList()
|
// this.getGoodsList()
|
this.getbrandList()
|
this.h5Images()
|
},
|
onReady() {
|
var that = this
|
let divs = document.getElementsByClassName('box')
|
let start = 0
|
divs[0].onmousedown = function(ev){
|
if (that.status === 1) {
|
start = ev.pageY
|
//event的兼容性
|
var ev = ev || event;
|
//获取鼠标按下的坐标
|
var x1 = ev.clientX;
|
var y1 = ev.clientY;
|
//获取元素的left，top值
|
var l = divs.offsetLeft;
|
var t = divs.offsetTop;
|
//给可视区域添加鼠标的移动事件
|
document.onmousemove = function(ev) {
|
//event的兼容性
|
var ev = ev || event;
|
//获取鼠标移动时的坐标
|
var x2 = ev.clientX;
|
var y2 = ev.clientY;
|
//计算出鼠标的移动距离
|
var x = x2 - x1;
|
var y = y2 - y1;
|
//移动的数值与元素的left，top相加，得出元素的移动的距离
|
var lt = y + t;
|
var ls = x + l;
|
let num = start - ev.pageY
|
if (num < -100) {
|
that.isPK = true
|
} else if (num > 100) {
|
that.leftShop = {}
|
that.rightShop = {}
|
that.isPK = false
|
}
|
}
|
//清除
|
document.onmouseup = function(ev){
|
document.onmousemove = null;
|
}
|
}
|
}
|
},
|
computed: {
|
// 指导价总计
|
zdTotalPrice() {
|
let num = 0
|
this.shopList.forEach(item => {
|
// num = num + Number(item.zdPrice)
|
num = this.addPrice(num, Number(item.zdPrice))
|
})
|
return num || 0
|
},
|
// 入手价
|
totalPrice() {
|
let num = 0
|
this.shopList.forEach(item => {
|
// num = num + Number(item.price)
|
num = this.addPrice(num, Number(item.price))
|
})
|
return num || 0
|
},
|
...mapState(['Cookies', 'Config', 'User'])
|
},
|
watch: {
|
status: {
|
handler(news, old) {
|
if (news === 0) {
|
this.page = 1
|
this.categoryName = ''
|
this.categoryId = ''
|
this.shopPageData = []
|
}
|
}
|
},
|
shopList: {
|
deep: true,
|
handler(news, old) {
|
let rsj = 0
|
let zdj = 0
|
this.shopList.forEach(item => {
|
// rsj = rsj + Number(item.price)
|
rsj = this.addPrice(rsj, Number(item.price))
|
// zdj = zdj + Number(item.zdPrice)
|
zdj = this.addPrice(zdj, Number(item.zdPrice))
|
})
|
// console.log('rsj', rsj)
|
// console.log('zdj', zdj)
|
this.totalPrices = rsj
|
this.zdj = zdj
|
}
|
}
|
},
|
methods: {
|
async mouseenterP(index, categoryId) {
|
this.shopList[index].ppShow = true
|
if (!this.shopList[index].ppData || this.shopList[index].ppData.length == 0) {
|
let res = await brandList({ categoryId })
|
if (res.code === 200) {
|
this.shopList[index].ppData = res.data
|
}
|
}
|
this.$forceUpdate()
|
},
|
mouseleaveP(index) {
|
this.shopList[index].ppShow = false
|
this.$forceUpdate()
|
},
|
async mouseenterX(index) {
|
this.shopList[index].xhShow = true
|
if (this.shopList[index].xhData && this.shopList[index].xhData.length > 0) {
|
|
this.$forceUpdate()
|
} else {
|
let res = await listForH5({
|
categoryId: this.shopList[index].categoryId,
|
brandId: this.shopList[index].brandId
|
})
|
if (res.code === 200) {
|
this.shopList[index].xhData = res.data;
|
// this.shopList[index].xhShow = true
|
this.$forceUpdate()
|
}
|
}
|
// this.shopList[index].xhShow = true
|
// this.$forceUpdate()
|
},
|
mouseleaveX(index) {
|
this.shopList[index].xhShow = false
|
this.$forceUpdate()
|
// listForH5({
|
// categoryId: this.shopList[index].categoryId,
|
// brandId: this.shopList[index].brandId
|
// }).then(res => {
|
// this.shopList[index].xhData = res.data;
|
// this.shopList[index].xhShow = false
|
// this.$forceUpdate()
|
// })
|
// this.shopList[index].ppShow = false
|
// this.$forceUpdate()
|
},
|
addPrice (arg1, arg2) {
|
let r1, r2, m;
|
try {
|
r1 = arg1.toString().split('.')[1].length; // 获取arg1小数位的长度
|
} catch (e) {
|
r1 = 0;
|
}
|
try {
|
r2 = arg2.toString().split('.')[1].length; // 获取arg2小数位的长度
|
} catch (e) {
|
r2 = 0;
|
}
|
m = Math.pow(10, Math.max(r1, r2)); // max()函数是选出小数点位最大的参数的长度，保证将两个参数都化为整数，pow()函数是将10做指数幂操作,将参数都化为整数
|
return (arg1 * m + arg2 * m )/m;
|
},
|
// 退出
|
loginOut() {
|
this.$store.commit('clean')
|
uni.redirectTo({ url: '/pages/login/login' });
|
},
|
// 查询商品数据
|
getShopList(type) {
|
if (type === 1) {
|
this.page = 1
|
this.shopPageData = []
|
}
|
goodsPage({
|
capacity: 20,
|
page: this.page,
|
model: this.model
|
}).then(res => {
|
if (this.shopPageData.length === res.data.total) return
|
let arr = [...this.shopPageData, ...res.data.records]
|
this.shopPageData = arr
|
this.page = this.page + 1
|
})
|
},
|
checkInput(_this) {
|
if (_this.value != '' && _this.value.substr(0, 1) == '.') {
|
_this.value = 0
|
}
|
if (_this.value == '') {
|
_this.value = 0
|
}
|
_this.value = _this.value.replace(/^0*(0\.|[1-9])/, '$1') // 禁止粘贴
|
_this.value = _this.value.replace(/[^\d.]/g, '0.00') // 禁止输入非数字
|
_this.value = _this.value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
|
_this.value = _this.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
|
_this.value = _this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
|
|
if (_this.value.indexOf('.') < 0 && _this.value != '') {
|
// 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
|
if (_this.value.substr(0, 1) == '0' && _this.value.length == 2) {
|
_this.value = _this.value.substr(1, _this.value.length)
|
}
|
}
|
if (!_this.value) {
|
_this.value = 0
|
}
|
},
|
changePrice(price, index) {
|
if (price.indexOf('-') !== -1) {
|
console.log('-')
|
this.shopList[index].price = ''
|
return
|
}
|
// if (!/^\d[0,9]$/.test(price)) {
|
// this.shopList[index].price = JSON.parse(JSON.stringify(price.replace(/-/g, '')))
|
// return
|
// }
|
let rsj = 0
|
this.shopList.forEach(item => {
|
rsj = rsj + Number(item.price)
|
})
|
console.log('rsj', rsj)
|
this.totalPrices = rsj
|
},
|
simplifyNum(number) {
|
if (!number && number != 0) return number;
|
let test = number.toFixed(0)
|
// console.log(test)
|
if(test.length >= 7){
|
const moneys = number / 10000
|
const realVal = parseFloat(moneys).toFixed(0);
|
return realVal + "w"
|
} else {
|
return number
|
}
|
},
|
// 获取海报图
|
h5Images() {
|
h5Image({})
|
.then(res => {
|
this.img = res.data
|
})
|
},
|
xiaPage() {
|
if (this.status === 2 || this.status === 0) return
|
this.status = this.status + 1
|
},
|
// 返回上一页
|
fanhuiPage() {
|
if (this.status === 0) return
|
this.status = this.status - 1
|
if (this.status === 0) {
|
this.leftShop = {}
|
this.rightShop = {}
|
this.isPK = false,
|
this.pkcontent = false
|
this.attributeOne = {
|
id: '',
|
name: ''
|
},
|
this.attributeTwo = {
|
id: '',
|
name: ''
|
},
|
this.budget = {
|
id: '',
|
max: '',
|
min: ''
|
}
|
this.shopPageBrand = {
|
id: '',
|
name: ''
|
}
|
} else if (this.status === 1) {
|
this.leftShop = {}
|
this.rightShop = {}
|
this.isPK = false,
|
this.pkcontent = false
|
}
|
},
|
// 点击型号
|
clickXH(item, index) {
|
let obj = JSON.parse(JSON.stringify(this.shopList[index]))
|
obj.name = JSON.parse(JSON.stringify(item.name))
|
obj.zdPrice = JSON.parse(JSON.stringify(item.zdPrice))
|
obj.price = JSON.parse(JSON.stringify(item.price))
|
obj.multifileList = JSON.parse(JSON.stringify(item.multifileList))
|
obj.xhShow = false
|
// this.shopList.splice(index, 1)
|
this.shopList[index] = JSON.parse(JSON.stringify(obj))
|
console.log(this.shopList[index])
|
console.log(JSON.parse(JSON.stringify(obj)))
|
let rsj = 0
|
let zdj = 0
|
this.shopList.forEach(item => {
|
rsj = this.addPrice(rsj, Number(item.price))
|
zdj = this.addPrice(zdj, Number(item.zdPrice))
|
})
|
this.totalPrices = rsj
|
this.zdj = zdj
|
this.$forceUpdate()
|
},
|
// 点击pk商品带回首页
|
clickPKshop(item) {
|
this.shopList.push(item)
|
this.status = 0
|
this.isPK = false
|
this.pkcontent = false
|
this.leftShop = {}
|
this.rightShop = {}
|
},
|
// 查看大图
|
openImg(i) {
|
this.imgList = []
|
this.shopList.forEach((item, index) => {
|
if (index === i) {
|
item.multifileList.forEach(child => {
|
this.imgList.push(item.prefixUrl + child.fileurl)
|
})
|
}
|
})
|
// console.log(this.imgList)
|
this.$viewerApi({
|
images: this.imgList,
|
})
|
// this.$refs.bigImg.open(0)
|
// this.$refs.bigImg1.open(0)
|
},
|
empty() {
|
this.shopList = []
|
},
|
// 跳转pk
|
jumpPK() {
|
if (JSON.stringify(this.leftShop) !== '{}' && JSON.stringify(this.rightShop) !== '{}') {
|
this.isPK = true
|
this.pkcontent = true
|
this.status = 2
|
}
|
},
|
// 点击加入pk商品
|
openSearch(type) {
|
if (type === 'left') {
|
this.$refs.search.open('left')
|
} else if (type === 'right') {
|
this.$refs.search.open('right')
|
}
|
},
|
// 点击商品列表页面查询
|
clickShopPageCheck(item, type) {
|
this.leftShop = {}
|
this.rightShop = {}
|
// this.isSOU = true
|
// this.shopPageDataSou = []
|
if (type === 1) {
|
this.attributeOne.name = item.name === '全部' ? '' : item.name
|
this.attributeOne.id = item.id
|
|
if (item.name === '全部') {
|
this.model.attrFirst = ''
|
} else {
|
this.model.attrFirst = item.id
|
}
|
|
this.getShopList(1)
|
|
} else if (type === 2) {
|
this.attributeTwo.name = item.name === '全部' ? '' : item.name
|
this.attributeTwo.id = item.id
|
|
if (item.name === '全部') {
|
this.model.attrSecond = ''
|
} else {
|
this.model.attrSecond = item.id
|
}
|
|
this.getShopList(1)
|
} else if (type === 3) {
|
console.log(item)
|
this.budget.id = item.id
|
this.budget.max = item.maxamount
|
this.budget.min = item.minamount
|
this.budget.type = item.type
|
if (item.name) {
|
this.budget.name = item.name
|
}
|
if (item.name === '全部') {
|
this.model.sprice = ''
|
this.model.eprice = ''
|
} else {
|
this.model.sprice = item.minamount || 0
|
this.model.eprice = item.maxamount || 99999
|
}
|
|
this.getShopList(1)
|
} else if (type === 4) {
|
this.shopPageBrand.id = item.id
|
this.shopPageBrand.name = item.name === '全部' ? '' : item.name
|
|
if (item.name === '全部') {
|
this.model.brandId = ''
|
} else {
|
this.model.brandId = item.id
|
}
|
|
this.getShopList(1)
|
}
|
this.isPK = false
|
this.pkcontent = false
|
this.status = 1
|
this.shopPageData.forEach(item => {
|
if (
|
(this.attributeOne.id ? item.attrFirstIds.indexOf(String(this.attributeOne.id)) !== -1 : true) &&
|
(this.attributeTwo.id ? item.attrSecodIds.indexOf(String(this.attributeTwo.id)) !== -1 : true) &&
|
(this.budget.type == 3 ? (item.price <= Number(this.budget.max)) && (item.price >= Number(this.budget.min)) : true) &&
|
(this.budget.type == 1 ? (item.price <= Number(this.budget.max)) : true) &&
|
(this.budget.type == 2 ? (item.price >= Number(this.budget.min)) : true) &&
|
(this.shopPageBrand.id ? item.brandId === this.shopPageBrand.id : true)
|
) {
|
this.shopPageDataSou.push(item)
|
}
|
})
|
},
|
// 点击商品列表页面商品
|
clickshoppageItem(item) {
|
this.shopList.push(item)
|
this.attrFirstList = []
|
this.attrSecondList = []
|
this.budgetList = []
|
this.status = 0
|
this.isPK = false
|
this.pkcontent = false
|
},
|
// 获取搜索结果
|
getSelectShop(categoryId, brandId) {
|
this.select = []
|
this.shopData.forEach(item => {
|
if (item.categoryId === categoryId && item.brandId === brandId) {
|
this.select.push(JSON.parse(JSON.stringify(item)))
|
}
|
})
|
},
|
// 选择品牌
|
clickBrand(item, val, index) {
|
// let res = await listForH5({
|
// categoryId: this.shopList[index].categoryId,
|
// brandId: this.shopList[index].brandId
|
// })
|
// if (res.code === 200) {
|
// this.shopList[index].xhData = res.data;
|
// }
|
this.shopList[index].brandName = JSON.parse(JSON.stringify(val.name))
|
this.shopList[index].brandId = JSON.parse(JSON.stringify(val.id))
|
this.shopList[index].name = ''
|
this.shopList[index].zdPrice = ''
|
this.shopList[index].price = ''
|
this.shopList[index].xhData = []
|
this.shopList[index].ppShow = false
|
this.$forceUpdate()
|
},
|
// 品牌
|
getbrandList() {
|
// brandList({})
|
// .then(res => {
|
// this.brandData = JSON.parse(JSON.stringify(res.data))
|
// this.brandData1 = JSON.parse(JSON.stringify(res.data))
|
// this.brandData1.unshift({ name: '全部', id: '' })
|
// })
|
},
|
// 获取选中商品
|
result(val) {
|
val.ppShow = false
|
val.xhShow = false
|
if (this.$refs.search.typeName === 'left') {
|
this.leftShop = JSON.parse(JSON.stringify(val))
|
} else if (this.$refs.search.typeName === 'right') {
|
this.rightShop = JSON.parse(JSON.stringify(val))
|
let leftParamList = this.leftShop.goodsParamList;
|
let rightParamList = this.rightShop.goodsParamList;
|
let leftList1 = new Array();
|
let leftList2 = new Array();
|
let rightList1 = new Array();
|
let rightList2 = new Array();
|
if(leftParamList && leftParamList.length>0){
|
leftParamList.forEach(item => {
|
let flag =0;
|
let rightTemp = null;
|
if(rightParamList && rightParamList.length>0){
|
rightParamList.forEach(item1 => {
|
if (item.name === item1.name ) {
|
flag =1;
|
rightTemp = item1;
|
return;
|
}
|
})
|
}
|
if(flag === 1){
|
leftList1.push(item);
|
rightList1.push(rightTemp);
|
}else{
|
leftList2.push(item);
|
}
|
})
|
}
|
if(rightParamList && rightParamList.length>0){
|
rightParamList.forEach(item=> {
|
let flag1 = 0;
|
rightList1.forEach(item1 => {
|
if (item.name === item1.name ) {
|
flag1 =1;
|
//return;
|
}
|
})
|
if(flag1 === 0){
|
rightList2.push(item);
|
}
|
})
|
}
|
Reflect.set(this.leftShop, "param1",leftList1);
|
Reflect.set(this.leftShop, "param2",leftList2);
|
Reflect.set(this.rightShop, "param1",rightList1);
|
Reflect.set(this.rightShop, "param2",rightList2);
|
} else {
|
this.shopList.push(JSON.parse(JSON.stringify(val)))
|
}
|
},
|
// 获取全部商品
|
getGoodsList() {
|
goodsList({})
|
.then(res => {
|
this.shopData = res.data
|
})
|
},
|
// 获取全部品类
|
getCategoryList() {
|
categoryList({})
|
.then(res => {
|
res.data.forEach(item => {
|
item.active = false
|
})
|
this.category = res.data
|
})
|
},
|
stringOperations(val, num) {
|
if (!val) return
|
if (val.length <= num) return val
|
return val.substring(0, num) + '...'
|
},
|
copyItem(item) {
|
let obj = JSON.parse(JSON.stringify(item))
|
obj.brandId = ''
|
obj.brand = ''
|
obj.brandName = ''
|
obj.name = ''
|
obj.zdPrice = ''
|
obj.price = ''
|
this.shopList.push(obj)
|
},
|
deleItem(i) {
|
this.shopList.splice(i, 1)
|
},
|
// 首页已选列表品牌下拉
|
open(index, type) {
|
this.shopList.forEach((item, i) => {
|
item.ppShow = false
|
item.xhShow = false
|
})
|
|
this.shopList.forEach((item, i) => {
|
if (i === index) {
|
if (type === 1) {
|
item.ppShow = true
|
} else {
|
listForH5({
|
categoryId: this.shopList[index].categoryId,
|
brandId: this.shopList[index].brandId
|
}).then(res => {
|
this.shopList[index].xhData = res.data;
|
item.xhShow = true
|
this.$forceUpdate()
|
})
|
|
// let arr = []
|
// this.shopData.forEach(element => {
|
// // console.log(element.categoryId === item.categoryId && element.brandId === item.brandId)
|
// if (
|
// (item.categoryId ? element.categoryId === item.categoryId : true) &&
|
// (item.brandId ? element.brandId === item.brandId : true)) {
|
// arr.push(JSON.parse(JSON.stringify(element)))
|
// }
|
// })
|
// this.shopList[index].xhData = arr;
|
// item.xhShow = true
|
}
|
}
|
})
|
this.$forceUpdate()
|
},
|
// 点击类别
|
clickItem(index, id, name) {
|
this.categoryId = id
|
this.model.categoryId = id
|
this.categoryName = name
|
|
this.getShopList()
|
|
brandList({ categoryId: id })
|
.then(res => {
|
this.brandData1 = JSON.parse(JSON.stringify(res.data))
|
this.brandData1.unshift({ name: '全部', id: '' })
|
console.log(this.brandData1)
|
})
|
|
this.category.forEach((item, num) => {
|
if (index === num) {
|
item.active = true
|
|
this.attrSecondList = []
|
this.attrFirstList = []
|
this.budgetList = []
|
|
this.attrFirstName = item.attrFirst
|
this.attrSecondName = item.attrSecond
|
if (item.cateParamFirstList) {
|
this.attrFirstList = JSON.parse(JSON.stringify(item.cateParamFirstList))
|
this.attrFirstList.unshift({ name: '全部', id: '' })
|
}
|
if (item.cateParamSecondList) {
|
this.attrSecondList = JSON.parse(JSON.stringify(item.cateParamSecondList))
|
this.attrSecondList.unshift({ name: '全部', id: '' })
|
}
|
// this.budgetList = JSON.parse(JSON.stringify(item.budgetList))
|
// console.log(item.budgetList)
|
let arr = []
|
item.budgetList.forEach(item => {
|
// 没有最小金额
|
if (!item.minamount) {
|
arr.push({
|
id: JSON.parse(JSON.stringify(item.id)),
|
type: 1,
|
maxamount: JSON.parse(JSON.stringify(item.maxamount)),
|
minamount: JSON.parse(JSON.stringify(item.minamount)),
|
name: `${JSON.parse(JSON.stringify(item.maxamount))}以内`
|
})
|
// 没有最大金额
|
} else if (!item.maxamount) {
|
arr.push({
|
id: JSON.parse(JSON.stringify(item.id)),
|
type: 2,
|
maxamount: JSON.parse(JSON.stringify(item.maxamount)),
|
minamount: JSON.parse(JSON.stringify(item.minamount)),
|
name: `${JSON.parse(JSON.stringify(item.minamount))}以上`
|
})
|
} else {
|
arr.push({
|
id: JSON.parse(JSON.stringify(item.id)),
|
type: 3,
|
maxamount: JSON.parse(JSON.stringify(item.maxamount)),
|
minamount: JSON.parse(JSON.stringify(item.minamount))
|
})
|
}
|
})
|
arr.unshift({ name: '全部', id: '' })
|
this.budgetList = arr
|
// console.log(this.budgetList)
|
} else {
|
item.active = false
|
}
|
})
|
// this.shopPageData = []
|
// this.shopData.forEach(item => {
|
// if (item.categoryId === id) {
|
// this.shopPageData.push(JSON.parse(JSON.stringify(item)))
|
// }
|
// })
|
this.attributeOne = {
|
id: '',
|
name: ''
|
},
|
this.attributeTwo = {
|
id: '',
|
name: ''
|
},
|
this.budget = {
|
id: '',
|
max: '',
|
min: ''
|
},
|
this.shopPageBrand = {
|
id: '',
|
name: ''
|
},
|
this.status = 1
|
},
|
mousemove(e) {
|
if (e === this.index) return
|
this.index = e
|
}
|
},
|
onReachBottom() {
|
if (this.status == 1) {
|
this.getShopList()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100vw;
|
min-height: 100vh;
|
display: flex;
|
justify-content: center;
|
.box_bg {
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: -1;
|
width: 100vw;
|
height: 100vh;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
.box_user {
|
z-index: 9;
|
position: fixed;
|
top: 30px;
|
right: 40px;
|
display: flex;
|
align-items: center;
|
text {
|
font-size: 16px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
image {
|
width: 18px;
|
height: 18px;
|
cursor: pointer;
|
margin-left: 10px;
|
}
|
}
|
.box_content {
|
// max-width: 750px;
|
// min-width: 750px;
|
.box_content_left {
|
position: fixed;
|
left: 50px;
|
top: 50%;
|
cursor: pointer;
|
transform: translate(-50%, 0);
|
width: 80px;
|
height: 80px;
|
z-index: 9;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.box_content_right {
|
position: fixed;
|
right: 50px;
|
top: 50%;
|
cursor: pointer;
|
transform: translate(-50%, 0);
|
width: 80px;
|
height: 80px;
|
z-index: 9;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.box_content_close {
|
position: fixed;
|
right: 0;
|
bottom: 30px;
|
cursor: pointer;
|
transform: translate(-50%, 0);
|
width: 80px;
|
height: 80px;
|
border-radius: 50%;
|
background-color: rgba(0, 224, 255, 0.18);
|
color: #FFFFFF;
|
font-size: 16px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.advertisement {
|
width: 100%;
|
// height: 300px;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.commodityFrom {
|
width: 100%;
|
padding: 0 22px;
|
box-sizing: border-box;
|
margin-top: 16px;
|
.commodityFrom_head {
|
width: 100%;
|
height: 45px;
|
padding: 10px 8px;
|
box-sizing: border-box;
|
background: rgba(0,224,255,0.24) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 100%);
|
border-radius: 8px 8px 0px 0px;
|
display: flex;
|
align-items: center;
|
.commodityFrom_head_item {
|
// flex: 1;
|
width: 126px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 16px;
|
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
font-weight: 500;
|
color: #FFFFFF;
|
margin-right: 6px;
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
&:nth-child(3) {
|
flex: 1 !important;
|
}
|
&:nth-child(4) {
|
width: 100px !important;
|
}
|
&:nth-child(5) {
|
width: 100px !important;
|
}
|
}
|
}
|
.commodityFrom_body {
|
width: 100%;
|
padding: 10px 8px;
|
box-sizing: border-box;
|
background: rgba(0,224,255,0.3);
|
border-radius: 0 0 8px 8px;
|
display: flex;
|
flex-direction: column;
|
.commodityFrom_body_content {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.commodityFrom_body_content_item {
|
width: 100%;
|
height: 45px;
|
display: flex;
|
align-items: center;
|
margin-bottom: 6px;
|
position: relative;
|
transition: .5s;
|
&:hover .commodityFrom_body_content_item_tips {
|
transform: translate(100%, 0%);
|
opacity: 1;
|
z-index: 1;
|
}
|
.commodityFrom_body_content_item_tips {
|
transition: .5s;
|
position: absolute;
|
padding: 0 4px;
|
box-sizing: border-box;
|
right: -16px;
|
top: 0;
|
opacity: 0;
|
transform: translate(0%, 0%);
|
z-index: -1;
|
height: 45px;
|
display: flex;
|
align-items: center;
|
background: rgba(0,224,255,0.3);
|
border-radius: 8px;
|
image {
|
width: 32px;
|
height: 32px;
|
cursor: pointer;
|
}
|
}
|
.commodityFrom_body_content_item_num {
|
width: 126px;
|
height: 100%;
|
padding: 0 15px;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 8px;
|
margin-right: 6px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
&:hover {
|
.drop-top {
|
z-index: 5;
|
opacity: 1;
|
}
|
}
|
&:nth-child(4) {
|
width: 100px !important;
|
}
|
&:nth-child(5) {
|
width: 100px !important;
|
margin-right: 0 !important;
|
}
|
&:nth-child(2) {
|
cursor: pointer;
|
}
|
&:nth-child(3) {
|
cursor: pointer;
|
flex: 1 !important;
|
}
|
text {
|
text-align: center;
|
width: 100%;
|
font-size: 16px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #111111;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
.drop-top {
|
transition: .5s;
|
z-index: -2;
|
opacity: 0;
|
position: absolute;
|
top: 0;
|
left: 0;
|
white-space: nowrap;
|
transform: translate(0, -100%);
|
padding: 5px 15px;
|
box-sizing: border-box;
|
line-height: 40px;
|
background: rgba(0, 0, 0, 0.8);
|
border-radius: 10px;
|
color: #FFFFFF;
|
font-size: 16px;
|
font-weight: 500;
|
}
|
.commodityFrom_body_content_item_num_img {
|
width: 24px;
|
height: 24px;
|
margin-right: 4px;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
input {
|
font-size: 16px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #111111;
|
text-align: center;
|
}
|
.drop-down::-webkit-scrollbar {
|
width: 6px;
|
background: rgba(255,255,255,0.5);
|
border-radius: 4px;
|
}
|
.drop-down::-webkit-scrollbar-thumb {
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
background: rgba(255,255,255,0.8);
|
}
|
.drop-down {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
min-height: 0;
|
max-height: 260px;
|
overflow-y: scroll;
|
overflow-x: hidden;
|
height: auto;
|
transform: translate(0%, 100%);
|
background: linear-gradient(180deg, #518198 0%, #033B58 100%);
|
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.19);
|
border-radius: 0px 0px 8px 8px;
|
// display: flex;
|
// flex-direction: column;
|
transition: .5s;
|
.drop-down-item {
|
width: 100%;
|
height: 52px;
|
// padding: 0 10px;
|
// box-sizing: border-box;
|
// overflow: hidden;
|
// white-space: nowrap;
|
// text-overflow: ellipsis;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
&:hover {
|
text {
|
color: #FFF200;
|
}
|
}
|
text {
|
width: 100%;
|
text-align: center;
|
font-size: 16px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
}
|
}
|
}
|
.commodityFrom_body_total {
|
width: 100%;
|
height: 45px;
|
display: flex;
|
align-items: center;
|
.commodityFrom_body_total_item {
|
width: 100px;
|
height: 100%;
|
background: rgba(255,255,255,0.4);
|
border-radius: 8px;
|
margin-right: 6px;
|
font-size: 16px;
|
font-family: SourceHanSansSC-Bold, SourceHanSansSC;
|
font-weight: bold;
|
color: #FFF200;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
input {
|
font-size: 16px;
|
font-family: SourceHanSansSC-Bold, SourceHanSansSC;
|
font-weight: bold;
|
color: #FFF200;
|
text-align: center;
|
}
|
&:first-child {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
font-size: 16px;
|
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
}
|
}
|
}
|
}
|
.productCategory {
|
width: 100%;
|
padding: 0 22px;
|
box-sizing: border-box;
|
margin-top: 10px;
|
.productCategory_list {
|
width: 100%;
|
padding: 10px 20px 0px 20px;
|
box-sizing: border-box;
|
background: rgba(0,224,255,0.18);
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
margin-bottom: 30px;
|
.productCategory_list_zw {
|
width: 20%;
|
height: 0;
|
}
|
.productCategory_active {
|
background: rgba(255,255,255,0.24) !important;
|
border-radius: 8px !important;
|
}
|
.productCategory_list_item {
|
width: 20% ;
|
height: 108px;
|
display: flex;
|
transition: .5s;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 12px;
|
cursor: pointer;
|
&:hover {
|
background: rgba(255,255,255,0.24) !important;
|
border-radius: 8px !important;
|
}
|
image {
|
width: 52px;
|
height: 52px;
|
margin-bottom: 4px;
|
}
|
text {
|
font-size: 16px;
|
font-family: SourceHanSansSC-Normal, SourceHanSansSC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
.productPage {
|
width: 100%;
|
padding: 0 22px;
|
box-sizing: border-box;
|
margin-top: 16px;
|
.productPage_head {
|
width: 100%;
|
height: 45px;
|
display: flex;
|
align-items: center;
|
background: rgba(0,224,255,0.34) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 100%);
|
border-radius: 8px 8px 0px 0px;
|
.productPage_head_item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
position: relative;
|
&:hover {
|
border-radius: 8px 8px 0px 0px;
|
background: linear-gradient(360deg, #025170 0%, #529DB9 100%) !important;
|
}
|
&:hover image {
|
transform: rotate(180deg);
|
}
|
&:hover .productPage_xl {
|
transform: translate(0%, 100%);
|
display: block;
|
animation: move 0.5s 0s;
|
}
|
@keyframes move {
|
0%{
|
opacity: 0;
|
}
|
100%{
|
opacity: 1;
|
}
|
}
|
.productPage_xl::-webkit-scrollbar {
|
width: 6px;
|
background: rgba(255,255,255,0.5);
|
border-radius: 4px;
|
}
|
.productPage_xl::-webkit-scrollbar-thumb {
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
background: rgba(255,255,255,0.8);
|
}
|
.productPage_xl {
|
transition: .3s;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
min-height: 0;
|
max-height: 260px;
|
overflow-y: scroll;
|
overflow-x: hidden;
|
height: auto;
|
display: none;
|
z-index: 3;
|
transform: translate(0%, 90%);
|
width: 100%;
|
background: linear-gradient(180deg, #518198 0%, #033B58 100%);
|
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.19);
|
border-radius: 0px 0px 8px 8px;
|
.productPage_xl_iten {
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
cursor: pointer;
|
&:hover {
|
text {
|
color: #FFF200;
|
}
|
}
|
text {
|
width: 100%;
|
text-align: center;
|
font-size: 16px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
text {
|
font-size: 16px;
|
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
image {
|
transition: .3s;
|
width: 14px;
|
height: 10px;
|
margin-left: 4px;
|
margin-top: 7px;
|
transform: rotate(0deg);
|
}
|
}
|
}
|
.productPage_pk {
|
width: 100%;
|
margin-bottom: 32px;
|
display: flex;
|
align-items: center;
|
.productPage_pk_shop {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
.productPage_pk_shop_sp {
|
width: 100px;
|
height: 100px;
|
margin-top: 84px;
|
cursor: pointer;
|
margin-bottom: 52px;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.productPage_pk_shop_sp1 {
|
width: 184px;
|
height: 200px;
|
background: linear-gradient(180deg, rgba(225,255,252,0.8) 0%, rgba(179,255,252,0.61) 36%, rgba(0,255,251,0.36) 100%);
|
border-radius: 8px;
|
border: 2px solid #FFFFFF;
|
display: flex;
|
padding: 0 15px;
|
box-sizing: border-box;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
margin-bottom: 12px;
|
margin-top: 24px;
|
cursor: pointer;
|
.productPage_pk_shop_sp1_img {
|
width: 100px;
|
height: 100px;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
text {
|
width: 100%;
|
font-size: 16px;
|
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
font-weight: 500;
|
color: #FFFFFF;
|
margin-top: 18px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
}
|
.productPage_pk_shop_t {
|
width: 254px;
|
height: 76px;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.productPage_pk_z {
|
flex-shrink: 0;
|
width: 100px;
|
height: 50px;
|
cursor: pointer;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.productPage_shop {
|
width: 100%;
|
margin-top: 12px;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.productPage_shop_zw {
|
width: 168px;
|
height: 0;
|
}
|
.productPage_shop_item {
|
width: 168px;
|
// height: 204px;
|
margin-bottom: 12px;
|
cursor: pointer;
|
background: rgba(0,224,255,0.18);
|
border-radius: 8px;
|
display: flex;
|
transition: .5s;
|
padding: 15px;
|
box-sizing: border-box;
|
flex-direction: column;
|
// justify-content: center;
|
align-items: center;
|
box-sizing: border-box;
|
white-space: pre-wrap;
|
word-break: break-all;
|
text-align: center;
|
&:hover {
|
background: linear-gradient(180deg, rgba(0,224,255,0.3) 0%, rgba(255,255,255,0.41) 100%);
|
border-radius: 8px;
|
border: 2px solid #FFFFFF;
|
box-sizing: border-box;
|
}
|
.productPage_shop_item_img {
|
width: 136px;
|
height: 136px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
text {
|
width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
font-size: 16px;
|
font-family: SourceHanSansSC-Normal, SourceHanSansSC;
|
font-weight: 400;
|
color: #FFFFFF;
|
margin-top: 12px;
|
}
|
}
|
}
|
.productPage_parameter {
|
width: 100%;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
margin-bottom: 30px;
|
.productPage_parameter_item {
|
width: 49%;
|
&:first-child {
|
margin-right: 18px;
|
}
|
.productPage_parameter_item_head {
|
width: 100%;
|
height: 40px;
|
background: rgba(0,224,255,0.34) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 100%);
|
border-radius: 8px 8px 0px 0px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
text {
|
width: 100%;
|
text-align: center;
|
font-size: 16px;
|
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
font-weight: 500;
|
color: #FFFFFF;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
}
|
.productPage_parameter_item_content {
|
width: 100%;
|
padding: 14px;
|
box-sizing: border-box;
|
background: rgba(0,224,255,0.3);
|
border-radius: 0px 0px 8px 8px;
|
display: flex;
|
flex-direction: column;
|
.productPage_parameter_item_content_price {
|
padding: 16px 0;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
.zdj {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
justify-content: center;
|
margin-left: 20px;
|
text {
|
&:first-child {
|
font-size: 16px;
|
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
|
font-weight: 400;
|
color: #333333;
|
}
|
&:last-child {
|
font-size: 16px;
|
font-family: SourceHanSansSC-Bold, SourceHanSansSC;
|
font-weight: bold;
|
color: #222222;
|
margin-top: 10px;
|
}
|
}
|
}
|
.rsj {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
justify-content: center;
|
text {
|
&:first-child {
|
font-size: 16px;
|
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
|
font-weight: 400;
|
color: #333333;
|
}
|
&:last-child {
|
font-size: 16px;
|
font-family: SourceHanSansSC-Bold, SourceHanSansSC;
|
font-weight: bold;
|
color: #F10000;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
.productPage_parameter_item_content_nr {
|
padding: 16px 18px;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 8px;
|
margin-top: 12px;
|
display: flex;
|
flex-direction: column;
|
.paramline{
|
border-bottom: #c7c9ce 2px dashed;
|
margin-bottom: 15px;
|
}
|
.item {
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 15px;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
.label {
|
flex-shrink: 0;
|
font-size: 16px;
|
font-family: SourceHanSansSC-Normal, SourceHanSansSC;
|
font-weight: 400;
|
color: #222222;
|
}
|
.value {
|
flex: 1;
|
font-size: 16px;
|
font-family: SourceHanSansSC-Normal, SourceHanSansSC;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
