You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1994 lines
46 KiB
1994 lines
46 KiB
<template>
|
|
<view class="container" id="productPage">
|
|
<jumpBall :start.sync="num" :element.sync="element" @msg="jbMsg" :speed="animaTime" :index="9999"/>
|
|
|
|
<!-- 滑动图片 -->
|
|
<view class="carousel">
|
|
<swiper indicator-dots circular=true duration="400">
|
|
<swiper-item class="swiper-item" v-for="(item,index) in goodsInfoData.img" :key="index" @click="previewImg(item,goodsInfoData.img)">
|
|
<view class="image-wrapper">
|
|
<image
|
|
:src="item"
|
|
class="loaded"
|
|
mode="aspectFill"
|
|
></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<view class="container-box introduce-section" >
|
|
<text class="title">{{ goodsInfoData.mc }}</text>
|
|
<view class="tag-box">
|
|
<text class="tag-item">{{goodsInfoData.gg}}</text>
|
|
</view>
|
|
<!-- <view class="bot-row"> -->
|
|
<!-- <text>月售{{ goodsInfoData.monthly_sales ? goodsInfoData.monthly_sales : 0 }}</text> -->
|
|
<!-- <text>售量: {{ goodsInfoData.sellnum ? goodsInfoData.sellnum : 0 }}</text> -->
|
|
<!-- <text>库存: {{goodsInfoData.kcnum}}</text> -->
|
|
<!-- <text>浏览量: 768</text> -->
|
|
<!-- </view> -->
|
|
<!-- <text class="sdtext">{{goodsInfoData.sdtext}}</text> -->
|
|
</view>
|
|
<view class="container-box shopping-cart" :class="{'barBorder':showBorder}">
|
|
<view class="price-box" >
|
|
<text class="price-tip" v-if="price>0">¥</text>
|
|
<text class="price" v-if="price>0">{{ price }}</text>
|
|
<text class="price" v-else></text>
|
|
<text class="dw">{{goodsInfoData.dw}}</text>
|
|
<!-- 显示原价打折 -->
|
|
<!-- <block v-if="goodsInfoData.oldprice != 0 && goodsInfoData.oldprice > goodsInfoData.price">
|
|
<text class="m-price" >¥{{ goodsInfoData.oldprice }}</text>
|
|
<text class="coupon-tip" >{{(goodsInfoData.price/goodsInfoData.oldprice * 10).toFixed(1)}}折</text>
|
|
</block> -->
|
|
</view>
|
|
<!-- <view class="add-btn" v-if="goodsInfoData.kcnum" @click="addGoodsChange(1,goodsInfoData,true)">
|
|
<i class="hxicon icon-add" id="eleAdd"></i>
|
|
<text>加入购物车</text>
|
|
</view> -->
|
|
<view class="spbz" v-if="goodsInfoData.inputnum">
|
|
<input style="font-size: 28upx;color: #41A863;" type="text" :value="goodsInfoData.bz" @input="inputchangeBz($event,goodsInfoData.bz,goodsInfoData.id)" placeholder="输入备注">
|
|
<input style="font-size: 28upx;color: #41A863;" type="text" :value="goodsInfoData.fudw" @input="inputchangeFudw($event,goodsInfoData.fudw,goodsInfoData.id)" placeholder="输入副单位">
|
|
</view>
|
|
<view class="number" v-if="goodsInfoData.kcnum">
|
|
<view class="sub" @tap.stop="sub(goodsInfoData.id)" >
|
|
<view class="jian">-</view>
|
|
</view>
|
|
<view class="input" @tap.stop="discard" >
|
|
<input type="digit" v-model="goodsInfoData.inputnum==0?'':goodsInfoData.inputnum" @input="inputchange($event,goodsInfoData.inputnum,goodsInfoData.id,goodsInfoData.kcnum,0)" />
|
|
</view>
|
|
<view class="add" @tap.stop="add(goodsInfoData.id)">
|
|
<view class="jia">
|
|
<image src="../../static/img/addicon.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line-weight"></view>
|
|
|
|
<!-- <view class="c-list">
|
|
<view class="c-row b-b" @click="toggleSpec">
|
|
<text class="tit">规格选择</text>
|
|
<view class="con">
|
|
<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
|
|
{{sItem.name}}
|
|
</text>
|
|
</view>
|
|
<text class="hxicon icon-right"></text>
|
|
</view>
|
|
</view> -->
|
|
<view class="line-weight"></view>
|
|
|
|
<!-- 详情 -->
|
|
<view class="container-box">
|
|
<view class="tabs-box" >
|
|
<view class="" style="width: 210px;height: 100%;">
|
|
|
|
<view class="hx-tabs">
|
|
<view class="hx-tabs-item" v-for="(item,i) in tabs" :key="i" :class="{'hx-tabs-active': swiperCurrent == i}" @click="swiperChange(i,item.id)" >
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
<view class="hx-tabs-slider-box" :style="{left:swiperCurrentSliderLeft + 'px'}">
|
|
<view class="hx-tabs-slider"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="info-box" id="detail">
|
|
<view class="info-item" v-for="(item,i) in goodsInfoData.detail" :key="i">
|
|
<text class="left">{{item.tit}}：</text>
|
|
<text class="right">{{item.txt}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="line-weight"></view>
|
|
|
|
<view class="detail-desc" id="coll">
|
|
<view class="d-header">
|
|
<text>图文详情</text>
|
|
</view>
|
|
<rich-text :nodes="goodsInfoData.cpdesc"></rich-text>
|
|
</view>
|
|
|
|
<!-- 购物车 -->
|
|
<view class="foot" @touchmove.stop.prevent="mpClear" :style="{height: footHeight}" v-if="showFoot">
|
|
<view class="zz" @click="hideShoppingCar"></view>
|
|
<view class="btn-box">
|
|
<view class="btn-box-left" @click="contact">
|
|
<view class="imgBox">
|
|
<image src="../../static/img/boss.png" mode=""></image>
|
|
</view>
|
|
<text>返回首页</text>
|
|
</view>
|
|
<view class="btn-box-line"></view>
|
|
<view class="btn-box-center" @click="showShoppingCar">
|
|
<view class="cart" :animation="cartAnimationData">
|
|
<view class="tag cartNum" v-if="goodsTotalNumber>0">{{goodsTotalNumber}}</view>
|
|
<image :src="goodsTotalNumber ? '/static/img/cart.png' : '/static/img/cart1.png'" mode=""></image>
|
|
</view>
|
|
<view class="priceBox">
|
|
<view class="hx-txt-18 hx-color-white" v-if="goodsTotalPrice>0">
|
|
￥{{goodsTotalPrice|toFixed}}
|
|
</view>
|
|
<!-- <view class="hx-txt-10 hx-color-gray">
|
|
另需配送费￥{{shippingDees}}
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="btn-box-right">
|
|
<view class="jiesuan" v-if="goodsTotalPrice>0 && goodsTotalPrice >= startingPrice" @click="jiesuan">
|
|
去结算
|
|
</view>
|
|
<view class="pscj hx-txt-10 hx-color-gray" v-else>
|
|
<!-- <text v-if="startingPrice>=0">差￥{{-(goodsTotalPrice-startingPrice)|toFixed}}起送</text> -->
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="cart-box" :style="{display: showCar ? 'flex' : 'none'}">
|
|
<view class="box-container rebate-box" v-if="showDiscount">
|
|
<text>已加购列表</text>
|
|
</view>
|
|
<view class="box-container operating-box">
|
|
<view class="operating-box_right">
|
|
|
|
</view>
|
|
<view class="operating-box_left clear" @click="clearShoppingCart">
|
|
<i class="hxicon icon-delete"></i>
|
|
<text>清空购物车</text>
|
|
</view>
|
|
</view>
|
|
<view class=" goods-box">
|
|
<view class="" style="flex: 1;">
|
|
<scroll-view scroll-y="true" class="goods-list-scroll" :scroll-top="carGoodsScrollTop">
|
|
<view class="goods-list">
|
|
<view class="box" v-for="(rowData,i) in shoppCart" :key="i" v-if="rowData.num>0">
|
|
|
|
<view class="m-store-item">
|
|
<view class="m-img">
|
|
<image style="width: 100%;height: 100%;" :src="rowData.img" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="m-text">
|
|
<view class="m-title">
|
|
{{rowData.mc}}
|
|
</view>
|
|
<view class="m-descripe">
|
|
{{rowData.miaos}}
|
|
</view>
|
|
<view class="m-price-box" >
|
|
<view class="symbol">￥</view>
|
|
<view class="m-price">{{rowData.price}}</view>
|
|
<view class="m-old-price" v-if="rowData.oldprice">
|
|
<text>￥{{rowData.oldprice}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="m-distance" >
|
|
<view :class="'addEle2_' + i" class="jumpPosition">
|
|
</view>
|
|
<hx-number-box @change="addGoodsChange" :value="rowData.num" :rowData="rowData" :disabled="disabled" :clickTime="400" @addChange="touchOnAddGoods('.addEle2_' + i,rowData)"></hx-number-box>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<hx-preview-img :list.sync="previewImgList" :current.sync="currentImg" :start.sync="PINum"></hx-preview-img>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import jumpBall from '@/components/hx-jump-ball/hx-jump-ball.vue';
|
|
import hxNumberBox from "@/components/uni-number-box/uni-number-box.vue";
|
|
import hxPreviewImg from "@/components/hx-preview-img/hx-preview-img.vue";
|
|
//引入测试数据
|
|
import testData from "@/common/testdata.js";
|
|
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
|
export default{
|
|
components: {
|
|
hxNumberBox,
|
|
jumpBall,
|
|
hxPreviewImg
|
|
},
|
|
data() {
|
|
return {
|
|
specClass: 'none',
|
|
specSelected:[],
|
|
|
|
//tabs
|
|
tabs: [
|
|
{name:'详情',id: 'detail'},
|
|
{name:'图文',id: 'coll'},
|
|
],
|
|
swiperCurrent: 0,
|
|
swiperCurrentSliderLeft: 0,
|
|
showRing: true,
|
|
showTabs: true,
|
|
showBorder: false,
|
|
|
|
favorite: true,
|
|
|
|
//小球动画
|
|
num:1,
|
|
element: [],
|
|
animaTime: 300,
|
|
cartAnimation: {},
|
|
cartAnimationData: {},
|
|
|
|
//购物车
|
|
shoppingCartAll:[],
|
|
//商家信息
|
|
storeData: [],
|
|
//显示购物车
|
|
showFoot:true,
|
|
//配送费
|
|
shippingDees: 0,
|
|
//配送起步价
|
|
startingPrice:0,
|
|
//购物车商品价格合计
|
|
goodsTotalPrice: 0,
|
|
//购物车商品数量合计
|
|
goodsTotalNumber: 0,
|
|
//购物车
|
|
shoppCart: [],
|
|
//foot 高度
|
|
footHeight: '0',
|
|
//显示购物车
|
|
showCar: false,
|
|
//购物车中商品滚动条位置
|
|
carGoodsScrollTop: 0,
|
|
//购物车缓存 Storage 名称
|
|
shoppingCartStorageName: 'cartlist',
|
|
//购物车显示折扣
|
|
showDiscount:true,
|
|
|
|
//商品信息
|
|
goodsInfoData: {},
|
|
//商品评价
|
|
goodsEvaData: {},
|
|
|
|
currentImg: '',
|
|
previewImgList: [],
|
|
PINum: 0,
|
|
specList: [
|
|
{id: 1, name: '尺寸',},
|
|
{id: 2, name: '颜色',},
|
|
],
|
|
specChildList: [
|
|
{id: 1, pid: 1, name: 'XS',},
|
|
{id: 2, pid: 1, name: 'S',},
|
|
{id: 3, pid: 1, name: 'M',},
|
|
{id: 4,pid: 1,name: 'L',},
|
|
{id: 5,pid: 1,name: 'XL',},
|
|
{id: 6,pid: 1,name: 'XXL',},
|
|
{id: 7,pid: 2,name: '白色',},
|
|
{id: 8,pid: 2,name: '珊瑚粉',},
|
|
{id: 9,pid: 2,name: '草木绿',},
|
|
],
|
|
gid:0,
|
|
price:'',///传过来的价格
|
|
};
|
|
},
|
|
onShow(){
|
|
this.init();
|
|
},
|
|
filters: {
|
|
toFixed:function(x) {
|
|
return parseFloat(x).toFixed(2);
|
|
}
|
|
},
|
|
async onLoad(options){
|
|
let that = this;
|
|
//接收传值,id里面放的是商品id
|
|
this.gid = options.gid;
|
|
this.price=options.price;
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
|
|
this.gooddetail(this.gid)
|
|
//规格 默认选中第一条
|
|
this.specList.forEach(item=>{
|
|
for(let cItem of this.specChildList){
|
|
if(cItem.pid === item.id){
|
|
this.$set(cItem, 'selected', true);
|
|
this.specSelected.push(cItem);
|
|
break; //forEach不能使用break
|
|
}
|
|
}
|
|
})
|
|
|
|
this.cartAnimation = uni.createAnimation({
|
|
duration: 800,
|
|
timingFunction: "ease",
|
|
delay: 0
|
|
});
|
|
let userinfo=uni.getStorageSync('userinfo');
|
|
this.add_read_record(this.gid,userinfo.uid);
|
|
},
|
|
filters: {
|
|
toFixed:function(x) {
|
|
return parseFloat(x).toFixed(2);
|
|
}
|
|
},
|
|
methods:{
|
|
//减操作
|
|
sub(id) {
|
|
let getcartlist = uni.getStorageSync('cartlist');
|
|
let isexit = this.findidfromstor(id);
|
|
for (let i = 0; i < getcartlist.length; i++) {
|
|
if (isexit.id == getcartlist[i].id) { //找到商品一样的商品
|
|
getcartlist[i].num--; //数量减
|
|
if (getcartlist[i].num <= 0) {
|
|
//删除当前商品缓存
|
|
getcartlist.splice(i, 1);
|
|
uni.setStorageSync('cartlist', getcartlist)
|
|
break; //跳出循环
|
|
} else {
|
|
getcartlist[i].total = parseFloat((getcartlist[i].num * getcartlist[i].price) * 100) / 100
|
|
uni.setStorageSync('cartlist', getcartlist)
|
|
break; //跳出循环
|
|
}
|
|
}
|
|
}
|
|
this.checkshownum();
|
|
},
|
|
// 增加数量,type 0-推荐商品，1-猜你喜欢商品
|
|
add(id) {
|
|
|
|
let getcartlist = uni.getStorageSync('cartlist');
|
|
//首次加购物车
|
|
if (getcartlist == '') {
|
|
let setcart=[];
|
|
setcart[0]=this.goodsInfoData;
|
|
//计算每个商品的总价格
|
|
setcart.map((item, index) => {
|
|
item.total = parseFloat((item.price * item.num) * 100) / 100
|
|
});
|
|
uni.setStorageSync('cartlist', setcart);
|
|
} else {
|
|
//已有商品在购物车
|
|
let isexit = this.findidfromstor(id);
|
|
if (!isexit) {
|
|
//购物车中还没当前商品
|
|
//不存在
|
|
getcartlist.push(this.goodsInfoData);
|
|
|
|
for (let i = 0; i < getcartlist.length; i++) {
|
|
if (id == getcartlist[i].id) {
|
|
getcartlist[i].total = parseFloat((getcartlist[i].num * getcartlist[i].price) * 100) / 100
|
|
}
|
|
}
|
|
uni.setStorageSync('cartlist', getcartlist);
|
|
} else {
|
|
//存在
|
|
for (let i = 0; i < getcartlist.length; i++) {
|
|
if (isexit.id == getcartlist[i].id) { //找到商品一样的商品
|
|
getcartlist[i].num++; //数量自增
|
|
if (getcartlist[i].num > getcartlist[i].kcnum) {
|
|
uni.showToast({
|
|
title: '库存不足！',
|
|
icon: 'none'
|
|
})
|
|
break; //跳出循环
|
|
} else {
|
|
getcartlist[i].total = parseFloat((getcartlist[i].num * getcartlist[i].price) * 100) / 100
|
|
uni.setStorageSync('cartlist', getcartlist)
|
|
break; //跳出循环
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.checkshownum();
|
|
//更新本地储存
|
|
},
|
|
// input框直接加入购物车
|
|
inputadd(id, type,inputnum) {
|
|
let getcartlist = uni.getStorageSync('cartlist');
|
|
//首次加购物车
|
|
if (getcartlist == '') {
|
|
let goodsLists=[];
|
|
goodsLists[0]=this.goodsInfoData;
|
|
|
|
//计算每个商品的总价格
|
|
goodsLists.map((item, index) => {
|
|
item.total = parseFloat((item.price * inputnum) * 100) / 100;
|
|
item.num = parseFloat(inputnum);
|
|
});
|
|
uni.setStorageSync('cartlist', goodsLists);
|
|
|
|
} else {
|
|
//已有商品在购物车
|
|
let isexit = this.findidfromstor(id);
|
|
if (!isexit) {
|
|
//购物车中还没当前商品
|
|
//不存在
|
|
this.$set(this.goodsInfoData, 'inputnum', inputnum);
|
|
getcartlist.push(this.goodsInfoData);
|
|
for (let i = 0; i < getcartlist.length; i++) {
|
|
if (id == getcartlist[i].id) {
|
|
getcartlist[i].num=inputnum;
|
|
getcartlist[i].total = parseFloat((getcartlist[i].num * getcartlist[i].price) * 100) / 100
|
|
}
|
|
}
|
|
uni.setStorageSync('cartlist', getcartlist);
|
|
} else {
|
|
//存在
|
|
for (let i = 0; i < getcartlist.length; i++) {
|
|
if (isexit.id == getcartlist[i].id) { //找到商品一样的商品
|
|
getcartlist[i].num=inputnum; //数量自增
|
|
if (getcartlist[i].num > getcartlist[i].kcnum) {
|
|
uni.showToast({
|
|
title: '库存不足！',
|
|
icon: 'none'
|
|
})
|
|
break; //跳出循环
|
|
} else {
|
|
getcartlist[i].total = parseFloat((getcartlist[i].num * getcartlist[i].price) * 100) / 100
|
|
uni.setStorageSync('cartlist', getcartlist)
|
|
break; //跳出循环
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.checkshownum();
|
|
},
|
|
inputchange(inputsl,inputnum, id, kcnum,type) {
|
|
inputnum=parseFloat(inputsl.detail.value);
|
|
let getcartlist = uni.getStorageSync('cartlist');
|
|
if (inputnum > 0) {
|
|
if (inputnum > kcnum) {
|
|
uni.showToast({
|
|
title: '库存不足',
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
this.inputadd(id,type,inputnum);//input框直接添加购物车
|
|
} else {
|
|
for (let i = 0; i < getcartlist.length; i++) {
|
|
if (id == getcartlist[i].id) { //找到商品一样的商品
|
|
getcartlist[i].num = 0;
|
|
uni.setStorageSync('cartlist', getcartlist)
|
|
break; //跳出循环
|
|
}
|
|
}
|
|
this.checkshownum();
|
|
}
|
|
},
|
|
inputchangeBz(inputsl,inputnum, id) {
|
|
inputnum=inputsl.detail.value;
|
|
let getcartlist = uni.getStorageSync('cartlist');
|
|
for (let i = 0; i < getcartlist.length; i++) {
|
|
if (id == getcartlist[i].id) { //找到商品一样的商品
|
|
getcartlist[i].bz = inputnum;
|
|
uni.setStorageSync('cartlist', getcartlist)
|
|
break; //跳出循环
|
|
}
|
|
}
|
|
this.shoppCart=getcartlist;
|
|
},
|
|
inputchangeFudw(inputsl,inputnum, id) {
|
|
inputnum=inputsl.detail.value;
|
|
let getcartlist = uni.getStorageSync('cartlist');
|
|
for (let i = 0; i < getcartlist.length; i++) {
|
|
if (id == getcartlist[i].id) { //找到商品一样的商品
|
|
getcartlist[i].fudw = inputnum;
|
|
uni.setStorageSync('cartlist', getcartlist)
|
|
break; //跳出循环
|
|
}
|
|
}
|
|
this.shoppCart=getcartlist;
|
|
},
|
|
//初始化购物车数据
|
|
checkshownum() {
|
|
this.goodsTotalNumber=0;
|
|
this.goodsTotalPrice=0;
|
|
this.$set(this.goodsInfoData, 'inputnum', 0)
|
|
|
|
let getcartlist = uni.getStorageSync('cartlist');
|
|
|
|
for (let i = 0; i < getcartlist.length; i++) {
|
|
if(this.goodsInfoData.id==getcartlist[i]['id']){
|
|
this.$set(this.goodsInfoData, 'inputnum', getcartlist[i]['num'])
|
|
this.$set(this.goodsInfoData, 'bz', getcartlist[i]['bz'])
|
|
this.$set(this.goodsInfoData, 'fudw', getcartlist[i]['fudw'])
|
|
}
|
|
if(getcartlist[i]['num']<=0){
|
|
getcartlist.splice(i, 1);
|
|
break;
|
|
}else{
|
|
//计算商品总价
|
|
|
|
this.goodsTotalPrice +=parseFloat(getcartlist[i].total*100)/100 ;
|
|
|
|
//商品总数量
|
|
this.goodsTotalNumber += parseInt(getcartlist[i].num)
|
|
}
|
|
}
|
|
uni.setStorageSync('cartlist', getcartlist)
|
|
this.shoppCart=getcartlist;
|
|
},
|
|
//从本地存储中根据id获取数组
|
|
findidfromstor(id){
|
|
let arr=uni.getStorageSync('cartlist');
|
|
for(let i=0;i<arr.length;i++){
|
|
if(arr[i]['id']==id){
|
|
return arr[i];
|
|
break;//跳出循环
|
|
}
|
|
}
|
|
},
|
|
|
|
//添加浏览记录
|
|
async add_read_record(id,uid) {
|
|
await this.$api.add_read_record({action:'add_read_record',cpid:id,uid:uid});
|
|
},
|
|
async gooddetail(gid) {
|
|
let reinfo=await this.$api.gooddetail({action:'gooddetail',gid:gid});
|
|
this.goodsInfoData=reinfo.data;
|
|
this.$set(this.goodsInfoData, 'price', this.price)
|
|
this.checkshownum();
|
|
this.startingPrice=reinfo.data.lessmoney;
|
|
// this.init();
|
|
uni.hideLoading();
|
|
},
|
|
async checkkc() {
|
|
let that = this;
|
|
let carts = uni.getStorageSync(that.shoppingCartStorageName) || [];
|
|
|
|
// that.goodsTotalNumber=0;
|
|
|
|
let gids='';
|
|
for(let i in carts){
|
|
gids=gids+','+carts[i].id;
|
|
}
|
|
gids=gids.substr(1);
|
|
|
|
let userinfo=uni.getStorageSync('userinfo');
|
|
let reinfo=await this.$api.checkkc({action:'checkkc',gids:gids,uid:userinfo.uid});
|
|
let getcheckarr=reinfo.data;
|
|
if(getcheckarr){
|
|
for(let i=0;i<getcheckarr.length;i++){
|
|
for(let j=0;j<carts.length;j++){
|
|
if(getcheckarr[i].id==carts[j].id){
|
|
this.$set(carts[j],'kucun',getcheckarr[i].kucun);
|
|
this.$set(carts[j], 'price', getcheckarr[i].price);
|
|
this.$set(carts[j], 'total', getcheckarr[i].price*carts[i].num);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//根据缓存数据 获取购物车中属于本商店的商品
|
|
that.shoppCart=carts;
|
|
that.goodsTotalPrice=0;
|
|
for(let i in that.shoppCart){
|
|
if(that.shoppCart[i].num>0){
|
|
//计算商品总价
|
|
that.goodsTotalPrice +=parseFloat(that.shoppCart[i].total*100)/100 ;
|
|
//商品总数量
|
|
// that.goodsTotalNumber += parseInt(that.shoppCart[i].num)
|
|
}
|
|
}
|
|
|
|
//初始化起步价和配送费
|
|
//that.startingPrice = 0;
|
|
that.shippingDees = 0;
|
|
that.setLabelNumber();
|
|
},
|
|
init(){
|
|
this.checkkc();
|
|
},
|
|
//返回
|
|
backPage(){
|
|
var pages = getCurrentPages().length;
|
|
//console.log(pages);
|
|
if(pages == 1){
|
|
// uni.switchTab({
|
|
// url: '/pages/index/index'
|
|
// });
|
|
uni.redirectTo({
|
|
url: '/pages/index/index'
|
|
});
|
|
}else{
|
|
uni.navigateBack();
|
|
}
|
|
},
|
|
//tab 事件
|
|
swiperChange(index,idName) {
|
|
this.swiperCurrent = index;
|
|
this.swiperCurrentSliderLeft= 70 * index;
|
|
|
|
//滚动至指定位置
|
|
//最终位置 = 目标节点坐标 - 目标节点坐标 - 状态栏高度 - 导航栏高度44 - 价格栏高度
|
|
let view = uni.createSelectorQuery().select("#productPage");
|
|
view.boundingClientRect(data => {
|
|
let view2 = uni.createSelectorQuery().select("#" + idName);
|
|
view2.boundingClientRect(data2 => {
|
|
let view3 = uni.createSelectorQuery().select(".shopping-cart");
|
|
view3.fields({
|
|
size: true
|
|
}, res => {
|
|
uni.pageScrollTo({
|
|
duration:300,
|
|
scrollTop:data2.top - data.top - statusBarHeight - 44 - res.height
|
|
})
|
|
|
|
}).exec();
|
|
|
|
|
|
}).exec();
|
|
|
|
}).exec();
|
|
},
|
|
|
|
|
|
//导航栏滑动时的操作
|
|
navbarScroll(scroll){
|
|
let top = scroll.scrollTop
|
|
let that = this
|
|
this.pageScrollTop = scroll.scrollTop
|
|
|
|
let view = uni.createSelectorQuery().select(".shopping-cart");
|
|
view.fields({
|
|
rect: true
|
|
}, data => {
|
|
if(data.top - statusBarHeight<= 44){
|
|
that.showBorder = true;
|
|
}else{
|
|
that.showBorder = false;
|
|
}
|
|
}).exec();
|
|
if(top < 120){
|
|
|
|
that.showRing = true;
|
|
}else{
|
|
that.showRing = false;
|
|
this.navSearchBgOpacity = 1
|
|
this.navSearchColor = '#888888'
|
|
}
|
|
},
|
|
|
|
|
|
mpClear(e) {
|
|
// TODO nvue 取消冒泡
|
|
e.stopPropagation()
|
|
},
|
|
//显示购物车
|
|
showShoppingCar(){
|
|
if(this.goodsTotalNumber == 0){
|
|
return;
|
|
}
|
|
this.footHeight = '100%';
|
|
this.showCar = true;
|
|
this.carGoodsScrollTop = 0;
|
|
},
|
|
//隐藏购物车
|
|
hideShoppingCar(){
|
|
this.footHeight = '0';
|
|
this.showCar = false;
|
|
},
|
|
//清空购物车
|
|
clearShoppingCart(){
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '是否清空购物车?',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
that.shoppCart = [];
|
|
that.storeData.shoppingCart = [];
|
|
for(let i in that.shoppingCartAll){
|
|
if(that.shoppingCartAll[i].storeId == that.storeData.storeId){
|
|
that.shoppingCartAll[i] = that.storeData
|
|
}
|
|
}
|
|
uni.setStorageSync(that.shoppingCartStorageName,that.shoppingCartAll);
|
|
|
|
for(let i in that.goodsList){
|
|
that.goodsList[i].number = 0;
|
|
}
|
|
for(let i in that.categoryList){
|
|
that.categoryList[i].number = 0;
|
|
}
|
|
//购物车商品价格合计
|
|
that.goodsTotalPrice = 0;
|
|
//购物车商品数量合计
|
|
that.goodsTotalNumber = 0;
|
|
that.hideShoppingCar();
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
//增加商品后的回调事件
|
|
touchOnAddGoods(ele,data){
|
|
|
|
this.element = [ele,'.cart'];
|
|
if(this.num<0){
|
|
uni.showToast({
|
|
title:'库存0'
|
|
})
|
|
}
|
|
this.num ++;
|
|
},
|
|
//新增商品计算价格
|
|
addGoodsChange(number,dataArr,status){
|
|
number = Number(number)
|
|
var that = this;
|
|
let shoppCart = this.shoppCart;
|
|
let totalPrice = 0;
|
|
let totalNumber = 0;
|
|
let existedGoods = false;
|
|
//console.log(shoppCart,'当前shoppcart')
|
|
let rowData = {
|
|
id: dataArr.id,
|
|
mc: dataArr.mc,
|
|
miaos: dataArr.miaos,
|
|
img: dataArr.img[0],
|
|
price: this.price,
|
|
num:dataArr.num,
|
|
gg:dataArr.gg,
|
|
kcnum:dataArr.kcnum
|
|
}
|
|
var yes=0;//控制加入购物车小球
|
|
//检查该商品是否为第一次添加，如果为第二次添加，则直接修改商品数量，并计算出合计
|
|
for(var i in shoppCart){
|
|
//非第一次添加
|
|
if(shoppCart[i].id == rowData.id){
|
|
//如果为加入购物车则为叠加
|
|
if(status){
|
|
number = shoppCart[i].num + number
|
|
}
|
|
if(this.goodsInfoData.kcnum<number){
|
|
uni.showToast({
|
|
title:'库存不足！',
|
|
icon:'none'
|
|
});
|
|
yes=1;
|
|
break;
|
|
}
|
|
shoppCart[i].num = rowData.num = number;
|
|
shoppCart[i].total =parseFloat((number * shoppCart[i].price)*100)/100;
|
|
existedGoods = true;
|
|
break;
|
|
}
|
|
}
|
|
if(yes==0){
|
|
//点击添加购物车时生效
|
|
if(status){
|
|
that.element = ['#eleAdd','.cart'];
|
|
that.num ++;
|
|
}
|
|
|
|
//第一次添加
|
|
if(!existedGoods){
|
|
rowData.num = number;
|
|
rowData.total =parseFloat((number * rowData.price)*100)/100
|
|
shoppCart.push(rowData);
|
|
}
|
|
console.log(shoppCart);
|
|
//计算总商品数量和总价
|
|
for(var i in shoppCart){
|
|
//总价
|
|
totalPrice +=parseFloat(shoppCart[i].total*100)/100
|
|
totalNumber += parseInt(shoppCart[i].num)
|
|
|
|
}
|
|
//更改商品列表中的已购买数量
|
|
for(let i in that.goodsList){
|
|
if(that.goodsList[i].id == rowData.id){
|
|
that.goodsList[i] = rowData
|
|
break;
|
|
}
|
|
}
|
|
that.shoppCart = shoppCart;
|
|
if(that.goodsTotalPrice < totalPrice){
|
|
//更具小球动画延时更改数据
|
|
setTimeout(function(){
|
|
that.goodsTotalPrice = totalPrice
|
|
that.goodsTotalNumber = totalNumber
|
|
},that.animaTime + 150);
|
|
}else{
|
|
that.goodsTotalPrice = totalPrice
|
|
that.goodsTotalNumber = totalNumber
|
|
}
|
|
|
|
//门店第一次添加该商品
|
|
let isFirstAddGoods = true;
|
|
//that.storeData.shoppingCart = that.shoppCart;
|
|
if(that.shoppCart.length>0){
|
|
isFirstAddGoods=false;
|
|
}
|
|
|
|
// for(let i in that.shoppingCartAll){
|
|
// that.shoppingCartAll[i] = that.storeData
|
|
// isFirstAddGoods = false
|
|
// }
|
|
|
|
that.setLabelNumber();
|
|
// if(isFirstAddGoods === true){
|
|
// that.shoppingCartAll.push(that.storeData)
|
|
// }
|
|
if(that.goodsTotalNumber == 0){
|
|
that.hideShoppingCar();
|
|
}
|
|
|
|
//购物车商品数据缓存至本地
|
|
uni.setStorageSync(that.shoppingCartStorageName,that.shoppCart);
|
|
}
|
|
},
|
|
//计算每类商品购买的总数
|
|
setLabelNumber(){
|
|
let that = this;
|
|
//计算每一类购买商品的总数量
|
|
for(let j in that.categoryList){
|
|
let n = 0;
|
|
for(var i in that.shoppCart){
|
|
n += that.shoppCart[i].num;
|
|
}
|
|
that.categoryList[j].num = n;
|
|
}
|
|
},
|
|
//去结算
|
|
jiesuan(){
|
|
let userinfo=uni.getStorageSync('userinfo')
|
|
if(userinfo.uid==''||userinfo.uid==undefined){
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您还没登录，请登录',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
uni.navigateTo({
|
|
url:'/pages/user/login'
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
}else{
|
|
let tmpList=[];
|
|
// this.shoppCart = uni.getStorageSync(this.shoppingCartStorageName) || [];
|
|
let len = this.shoppCart.length;
|
|
for(let i=0;i<len;i++){
|
|
if(this.shoppCart[i].num>0){
|
|
tmpList.push(this.shoppCart[i]);
|
|
}
|
|
}
|
|
if(tmpList.length<1){
|
|
uni.showToast({
|
|
title:'请选择商品结算',
|
|
icon:'none'
|
|
});
|
|
return ;
|
|
}
|
|
//获取消息模板
|
|
// wx.requestSubscribeMessage({
|
|
// tmplIds: ['xrga_0YidesSMMfOxNaLmzvpfu42RdOYaA85D8ru88k'],
|
|
// success (res) {}
|
|
// })
|
|
uni.setStorage({
|
|
key:'buylist',
|
|
data:tmpList,
|
|
success: () => {
|
|
uni.navigateTo({
|
|
url:'../orderconfirmation/orderconfirmation'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
//联系商家
|
|
contact(){
|
|
uni.switchTab({
|
|
url:'../index/index'
|
|
})
|
|
},
|
|
//小球回调
|
|
jbMsg(res){
|
|
let that = this;
|
|
|
|
that.cartAnimation.matrix(1, 0, 0, 0.7, 0, 7).step({duration: 100})
|
|
that.cartAnimationData = that.cartAnimation.export();
|
|
//动画在app端有bug，所以必须写延迟才能解决
|
|
setTimeout(function() {
|
|
that.cartAnimation.matrix(1, 0, 0, 1, 0, 0).step({duration: 150});
|
|
that.cartAnimationData = that.cartAnimation.export();
|
|
},100);
|
|
},
|
|
|
|
//预览图片
|
|
previewImg(imgSrc,list){
|
|
|
|
this.currentImg = imgSrc
|
|
this.previewImgList = list
|
|
this.PINum++
|
|
},
|
|
|
|
|
|
//规格弹窗开关
|
|
toggleSpec() {
|
|
if(this.specClass === 'show'){
|
|
this.specClass = 'hide';
|
|
setTimeout(() => {
|
|
this.specClass = 'none';
|
|
}, 250);
|
|
}else if(this.specClass === 'none'){
|
|
this.specClass = 'show';
|
|
}
|
|
},
|
|
//选择规格
|
|
selectSpec(index, pid){
|
|
let list = this.specChildList;
|
|
list.forEach(item=>{
|
|
if(item.pid === pid){
|
|
this.$set(item, 'selected', false);
|
|
}
|
|
})
|
|
|
|
this.$set(list[index], 'selected', true);
|
|
//存储已选择
|
|
/**
|
|
* 修复选择规格存储错误
|
|
* 将这几行代码替换即可
|
|
* 选择的规格存放在specSelected中
|
|
*/
|
|
this.specSelected = [];
|
|
list.forEach(item=>{
|
|
if(item.selected === true){
|
|
this.specSelected.push(item);
|
|
}
|
|
})
|
|
|
|
},
|
|
//分享
|
|
share(){
|
|
this.$refs.share.toggleMask();
|
|
},
|
|
//收藏
|
|
toFavorite(){
|
|
this.favorite = !this.favorite;
|
|
},
|
|
buy(){
|
|
uni.navigateTo({
|
|
url: `/pages/shop/order/createOrder`
|
|
})
|
|
},
|
|
stopPrevent(){},
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
.sdtext{
|
|
padding: 5upx 10upx;
|
|
border-radius: 8upx;
|
|
color: #fff;
|
|
font-size: 25upx;
|
|
background-color: #31AA5A;
|
|
}
|
|
//主题颜色
|
|
$hx-theme-color: #FFC107;
|
|
$hx-theme-color-light: #FFEB3B;
|
|
page{
|
|
background: #ffffff;
|
|
padding-bottom: 160upx;
|
|
}
|
|
/*边框*/
|
|
.b-b:after,
|
|
.b-t:after {
|
|
position: absolute;
|
|
z-index: 3;
|
|
left: 0;
|
|
right: 0;
|
|
height: 0;
|
|
content: '';
|
|
transform: scaleY(.5);
|
|
border-bottom: 1px solid #E4E7ED;
|
|
}
|
|
|
|
.b-b:after {
|
|
bottom: 0;
|
|
}
|
|
|
|
.b-t:after {
|
|
top: 0;
|
|
}
|
|
.hx-txt-10{
|
|
font-size: 10px;
|
|
}
|
|
.hx-txt-12{
|
|
font-size: 12px;
|
|
}
|
|
.hx-txt-14{
|
|
font-size: 14px;
|
|
}
|
|
.hx-txt-16{
|
|
font-size: 16px;
|
|
}
|
|
.hx-txt-18{
|
|
font-size: 18px;
|
|
}
|
|
.hx-txt-22{
|
|
font-size: 22px;
|
|
}
|
|
.hx-color-gray{
|
|
color: #bbbbbb;
|
|
}
|
|
.hx-color-white{
|
|
color: #FFFFFF;
|
|
}
|
|
.hx-color-black{
|
|
color: #333333;
|
|
}
|
|
.hx-txt-weigth{
|
|
font-weight: bold;
|
|
}
|
|
.hx-mb-10{
|
|
margin-bottom: 10px;
|
|
}
|
|
.hx-mt-15{
|
|
margin-top: 15px;
|
|
}
|
|
.hx-shadow{
|
|
box-shadow: 0px 6upx 16upx rgba(173, 173, 173, 0.2);
|
|
}
|
|
|
|
|
|
.barBorder{
|
|
box-shadow: 0 1px 6px #ccc;
|
|
border-top: 1px solid #f1f1f1;
|
|
}
|
|
.icon-right{
|
|
font-size: 16px;
|
|
color: #888;
|
|
}
|
|
.carousel {
|
|
height: 722upx;
|
|
position:relative;
|
|
swiper{
|
|
height: 100%;
|
|
}
|
|
.image-wrapper{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.swiper-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
height: 750upx;
|
|
overflow: hidden;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
.line-weight{
|
|
background-color: #efefef;
|
|
height: 10px;
|
|
}
|
|
.container-box{
|
|
background: #fff;
|
|
padding: 10px 15px;
|
|
}
|
|
/* 标题简介 */
|
|
.introduce-section{
|
|
padding-bottom: 0;
|
|
.title{
|
|
font-size: 30upx;
|
|
color: #5A5A5A;
|
|
height: 50upx;
|
|
line-height: 50upx;
|
|
font-weight: bold;
|
|
}
|
|
.dw{
|
|
font-size: 28upx;
|
|
color: #303133;
|
|
}
|
|
.tag-box{
|
|
display: flex;
|
|
align-items:baseline;
|
|
margin: 6px 0 4px;
|
|
flex-wrap: wrap;
|
|
.tag-item{
|
|
align-items: center;
|
|
padding: 2px 5px;
|
|
background: #efefef;
|
|
margin-bottom: 8px;
|
|
font-size: 10px;
|
|
margin-right: 10px;
|
|
border-radius: 3px;
|
|
color: #555555;
|
|
}
|
|
}
|
|
.bot-row{
|
|
display:flex;
|
|
align-items:center;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
color: #909399;
|
|
text{
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
/* 价格 */
|
|
.shopping-cart{
|
|
|
|
position: sticky;
|
|
top: 0;
|
|
/* top: calc(44px + var(--status-bar-height)); */
|
|
padding-top: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #ffffff;
|
|
|
|
z-index: 10;
|
|
.price-box{
|
|
display:flex;
|
|
align-items:baseline;
|
|
font-size: 12px;
|
|
color:#ff582b;
|
|
|
|
.price{
|
|
font-size: 20px;
|
|
}
|
|
.m-price{
|
|
margin:0 6px;
|
|
color: #909399;
|
|
text-decoration: line-through;
|
|
font-size: 12px;
|
|
}
|
|
.coupon-tip{
|
|
align-items: center;
|
|
padding: 4upx 10upx;
|
|
background: #FF5722;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
border-radius: 3px;
|
|
line-height: 1;
|
|
transform: translateY(-4upx);
|
|
}
|
|
}
|
|
.add-btn{
|
|
border-radius: 50px;
|
|
background-color: #39A74D;
|
|
padding: 3px 10px;
|
|
display: flex;
|
|
height: 25px;
|
|
align-items: center;
|
|
color: #fff;
|
|
i{
|
|
font-weight: bold;
|
|
margin-left: -4px;
|
|
margin-right: 3px;
|
|
}
|
|
text{
|
|
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs-box{
|
|
width: 100%;
|
|
z-index: 10;
|
|
background-color: white;
|
|
height: 40px;
|
|
.hx-tabs{
|
|
position: relative;
|
|
display: flex;
|
|
height:100%;
|
|
&-item{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: left;
|
|
align-items: center;
|
|
width: 70px;
|
|
color:#666666;
|
|
text{
|
|
font-size: 16px;
|
|
}
|
|
|
|
}
|
|
&-active{
|
|
color:#333333;
|
|
font-weight: bold;
|
|
}
|
|
&-slider-box{
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: left;
|
|
bottom: 0;
|
|
width: 70px;
|
|
}
|
|
&-slider{
|
|
display: flex;
|
|
background: #FFC107;
|
|
width: 20px;
|
|
height: 2px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
}
|
|
/* 详情 */
|
|
.info-box{
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 12px;
|
|
.info-item{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
font-size: 13px;
|
|
margin-bottom: 6px;
|
|
.left{
|
|
color: #909399;
|
|
width: 84px;
|
|
}
|
|
.right{
|
|
font-size: 28upx;
|
|
color: #505050;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-list{
|
|
font-size: 13px;
|
|
color: #606266;
|
|
background: #fff;
|
|
.c-row{
|
|
display:flex;
|
|
align-items:center;
|
|
padding: 20upx 30upx;
|
|
position:relative;
|
|
}
|
|
.tit{
|
|
width: 140upx;
|
|
}
|
|
.con{
|
|
flex: 1;
|
|
color: #303133;
|
|
.selected-text{
|
|
margin-right: 10upx;
|
|
}
|
|
}
|
|
.bz-list{
|
|
height: 40upx;
|
|
font-size: 13px;
|
|
color: #303133;
|
|
text{
|
|
display: inline-block;
|
|
margin-right: 30upx;
|
|
}
|
|
}
|
|
.con-list{
|
|
flex: 1;
|
|
display:flex;
|
|
flex-direction: column;
|
|
color: #303133;
|
|
line-height: 40upx;
|
|
}
|
|
.red{
|
|
color: #fa436a;
|
|
}
|
|
}
|
|
|
|
.eva-box{
|
|
display: flex;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
.right{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
padding-left: 26upx;
|
|
.con{
|
|
font-size: 14px;
|
|
color: #303133;
|
|
padding: 10px 0 6px;
|
|
}
|
|
.bot{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
color:#909399;
|
|
}
|
|
.praise-box{
|
|
margin-top: 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
.hxicon{
|
|
color: #F0AD4E;
|
|
margin-right: 6px;
|
|
}
|
|
.tread{
|
|
color: #909399;
|
|
}
|
|
|
|
.praise-txt{
|
|
color:#909399;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
.imgs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-top: 4px;
|
|
.imgs-box {
|
|
width: 25%;
|
|
padding-right: 5px;
|
|
box-sizing: border-box;
|
|
image{
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* 详情 */
|
|
.detail-desc{
|
|
background: #fff;
|
|
margin-top: 16upx;
|
|
.d-header{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 80upx;
|
|
font-size: 15px;
|
|
color: #303133;
|
|
position: relative;
|
|
|
|
text{
|
|
padding: 0 20upx;
|
|
background: #fff;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
&:after{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%);
|
|
width: 300upx;
|
|
height: 0;
|
|
content: '';
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 规格选择弹窗 */
|
|
.attr-content{
|
|
padding: 10upx 30upx;
|
|
.a-t{
|
|
display: flex;
|
|
image{
|
|
width: 170upx;
|
|
height: 170upx;
|
|
flex-shrink: 0;
|
|
margin-top: -40upx;
|
|
border-radius: 8upx;;
|
|
}
|
|
.right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 24upx;
|
|
font-size: 13px;
|
|
color: #606266;
|
|
line-height: 42upx;
|
|
.price{
|
|
font-size: 17px;
|
|
color: #fa436a;
|
|
margin-bottom: 10upx;
|
|
}
|
|
.selected-text{
|
|
margin-right: 10upx;
|
|
}
|
|
}
|
|
}
|
|
.attr-list{
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 15px;
|
|
color: #606266;
|
|
padding-top: 30upx;
|
|
padding-left: 10upx;
|
|
}
|
|
.item-list{
|
|
padding: 20upx 0 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
text{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #eee;
|
|
margin-right: 20upx;
|
|
margin-bottom: 20upx;
|
|
border-radius: 100upx;
|
|
min-width: 60upx;
|
|
height: 60upx;
|
|
padding: 0 20upx;
|
|
font-size: 14px;
|
|
color: #303133;
|
|
}
|
|
.selected{
|
|
background: #fbebee;
|
|
color: #fa436a;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 弹出层 */
|
|
.popup {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
|
|
&.show {
|
|
display: block;
|
|
.mask{
|
|
animation: showPopup 0.2s linear both;
|
|
}
|
|
.layer {
|
|
animation: showLayer 0.2s linear both;
|
|
}
|
|
}
|
|
&.hide {
|
|
.mask{
|
|
animation: hidePopup 0.2s linear both;
|
|
}
|
|
.layer {
|
|
animation: hideLayer 0.2s linear both;
|
|
}
|
|
}
|
|
&.none {
|
|
display: none;
|
|
}
|
|
.mask{
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
.layer {
|
|
position: fixed;
|
|
z-index: 99;
|
|
bottom: 0;
|
|
width: 100%;
|
|
min-height: 40vh;
|
|
border-radius: 10upx 10upx 0 0;
|
|
background-color: #fff;
|
|
.btn{
|
|
height: 66upx;
|
|
line-height: 66upx;
|
|
border-radius: 100upx;
|
|
background: #fa436a;
|
|
font-size: 15px;
|
|
color: #fff;
|
|
margin: 30upx auto 20upx;
|
|
}
|
|
}
|
|
@keyframes showPopup {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes hidePopup {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes showLayer {
|
|
0% {
|
|
transform: translateY(120%);
|
|
}
|
|
100% {
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
@keyframes hideLayer {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
transform: translateY(120%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 底部操作菜单 */
|
|
.page-bottom{
|
|
position:fixed;
|
|
left: 30upx;
|
|
bottom:30upx;
|
|
z-index: 95;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 690upx;
|
|
height: 100upx;
|
|
background: rgba(255,255,255,.9);
|
|
box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
|
|
border-radius: 16upx;
|
|
|
|
.p-b-btn{
|
|
display:flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
color: #606266;
|
|
width: 96upx;
|
|
height: 80upx;
|
|
.hxicon{
|
|
font-size: 40upx;
|
|
line-height: 48upx;
|
|
color: #909399;
|
|
}
|
|
&.active, &.active .hxicon{
|
|
color: #fa436a;
|
|
}
|
|
.icon-fenxiang2{
|
|
font-size: 42upx;
|
|
transform: translateY(-2upx);
|
|
}
|
|
.icon-likefill{
|
|
font-size: 46upx;
|
|
}
|
|
}
|
|
.action-btn-group{
|
|
display: flex;
|
|
height: 76upx;
|
|
border-radius: 100px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20upx 40upx -16upx #fa436a;
|
|
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
|
|
margin-left: 20upx;
|
|
position:relative;
|
|
&:after{
|
|
content: '';
|
|
position:absolute;
|
|
top: 50%;
|
|
right: 50%;
|
|
transform: translateY(-50%);
|
|
height: 28upx;
|
|
width: 0;
|
|
border-right: 1px solid rgba(255,255,255,.5);
|
|
}
|
|
.action-btn{
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 180upx;
|
|
height: 100%;
|
|
font-size: 14px ;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* foot */
|
|
.foot{
|
|
position: fixed;
|
|
display: flex;
|
|
z-index: 12;
|
|
|
|
justify-content:center;
|
|
align-items : center;
|
|
bottom: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
/*width: calc(100% - 32px);*/
|
|
.btn-box{
|
|
position:absolute;
|
|
display: flex;
|
|
bottom: 6px;
|
|
justify-content:center;
|
|
align-items : center;
|
|
margin:0;
|
|
height: 45px;
|
|
width: calc(100% - 32px);
|
|
z-index: 9;
|
|
&-left{
|
|
background: #434846;
|
|
border-top-left-radius:50px;
|
|
border-top-right-radius:9px;
|
|
border-bottom-left-radius:50px;
|
|
border-bottom-right-radius:9px;
|
|
padding-left: 6upx;
|
|
display: flex;
|
|
flex-direction:column;
|
|
justify-content:center;
|
|
align-self: center;
|
|
width: 70px;
|
|
height: 100%;
|
|
color: #fff;
|
|
text-align: center;
|
|
.imgBox{
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content:center;
|
|
image{
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
text{
|
|
font-size: 20upx;
|
|
}
|
|
}
|
|
&-line{
|
|
background: #ffffff;
|
|
width: 2px;
|
|
height: 100%;
|
|
}
|
|
&-center{
|
|
height: 100%;
|
|
flex: auto;
|
|
display: flex;
|
|
justify-content:flex-start;
|
|
align-self: center;
|
|
align-items: center;
|
|
background: #434846;
|
|
border-top-left-radius:8upx;
|
|
border-bottom-left-radius:8upx;
|
|
padding-left: 10upx;
|
|
.cart{
|
|
position: relative;
|
|
width: 36px;
|
|
height: 36px;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.tag{
|
|
position: absolute;
|
|
right: 12upx;
|
|
top: 16upx;
|
|
height: 18px;
|
|
width: 18px;
|
|
background-color: #ff4000;
|
|
color: #ffffff;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
.priceBox{
|
|
flex: auto;
|
|
}
|
|
|
|
}
|
|
&-right{
|
|
width: 70px;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content:flex-start;
|
|
align-self: center;
|
|
align-items: center;
|
|
|
|
|
|
.pscj{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-top-right-radius:100upx;
|
|
border-bottom-right-radius:100upx;
|
|
background: #434846;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content:center;
|
|
align-self: center;
|
|
align-items: center;
|
|
}
|
|
.jiesuan{
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 28upx;
|
|
border-top-right-radius:100upx;
|
|
border-bottom-right-radius:100upx;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content:center;
|
|
align-self: center;
|
|
align-items: center;
|
|
background: linear-gradient(45deg, #67C979, #39A74D);
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.zz{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0,0,0,.7);
|
|
z-index: 1;
|
|
}
|
|
.cart-box{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-flow: column;
|
|
background: #ffffff;
|
|
position: absolute;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
max-height: 66%;
|
|
|
|
padding-bottom: 62px;
|
|
border-top-left-radius: 16px;
|
|
border-top-right-radius: 16px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
.rebate-box{
|
|
height: 30px;
|
|
background: #39A74D;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
font-size: 14px;
|
|
}
|
|
.box-container{
|
|
box-sizing: border-box;
|
|
padding:0 16px;
|
|
}
|
|
.operating-box{
|
|
font-size: 12px;
|
|
line-height: 40px;
|
|
height: 40px;
|
|
border-bottom: 1px solid #f6f6f6;
|
|
color: #666666;
|
|
display: flex;
|
|
flex-direction: row;
|
|
&_right{
|
|
flex: 1;
|
|
}
|
|
&_left{
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
}
|
|
.goods-box{
|
|
height: 100%;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
display: flex;
|
|
.goods-list-scroll{
|
|
height: 100%;
|
|
|
|
.goods-list{
|
|
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.box{
|
|
width: 100%;
|
|
border-bottom: 1px solid #f6f6f6;
|
|
box-sizing: border-box;
|
|
padding: 0 16px;
|
|
.m-store-item{
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
.m-img{
|
|
flex: 0 0 85px;
|
|
height: 85px;
|
|
background: #eee;
|
|
border-radius: 4px;
|
|
}
|
|
.m-text{
|
|
flex: 1;
|
|
position: relative;
|
|
height: 85px;
|
|
padding: 0 6px;
|
|
display: flex;
|
|
align-content: space-between;
|
|
flex-direction: column;
|
|
.m-title{
|
|
font-size: 16px;
|
|
color:#555555;
|
|
height: 21px;
|
|
font-weight: bold;
|
|
}
|
|
.m-descripe{
|
|
font-size: 12px;
|
|
color:#999999;
|
|
margin-top: 5px;
|
|
height: 35px;
|
|
}
|
|
.m-price-box{
|
|
height: 24px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
.symbol{
|
|
color:#ff582b;
|
|
font-size: 12px;
|
|
}
|
|
.m-price{
|
|
position: relative;
|
|
top: 2px;
|
|
font-size: 18px;
|
|
color:#ff582b;
|
|
}
|
|
.m-old-price{
|
|
margin-left: 3px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-size: 10px;
|
|
color:#999999;
|
|
margin-top: 5upx;
|
|
text-decoration: line-through;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
.m-distance{
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -4px;
|
|
z-index: 16;
|
|
color:#b2b2b2;
|
|
font-size: 20upx;
|
|
text-align: right;
|
|
.jumpPosition{
|
|
position: absolute;
|
|
bottom: 23px;
|
|
right: 0;
|
|
z-index: 2;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.spbz {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20upx;
|
|
margin-left: 36upx;
|
|
flex-direction:column;
|
|
background-color: #f1f1f1;
|
|
padding-left: 8upx;
|
|
}
|
|
.number {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-right: 30upx;
|
|
margin-bottom: 10upx;
|
|
|
|
.input {
|
|
width: 70upx;
|
|
height: 45upx;
|
|
margin: 0 10upx;
|
|
// background-color: #f3f3f3;
|
|
border-bottom: 1upx #ADADAD solid;
|
|
|
|
input {
|
|
width: 60upx;
|
|
height: 60upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
font-size: 26upx;
|
|
}
|
|
}
|
|
|
|
.sub,
|
|
.add {
|
|
width: 45upx;
|
|
height: 45upx;
|
|
border-radius: 5upx;
|
|
}
|
|
|
|
.jia {
|
|
display: flex;
|
|
width: 45upx;
|
|
height: 45upx;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
align-items: center;
|
|
background-color: #41A863;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
|
|
image {
|
|
width: 40upx;
|
|
height: 40upx;
|
|
padding: 7upx;
|
|
}
|
|
}
|
|
|
|
.jian {
|
|
display: flex;
|
|
width: 45upx;
|
|
height: 45upx;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
align-items: center;
|
|
background-color: #41A863;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
padding-bottom: 10upx;
|
|
}
|
|
}
|
|
</style>
|