mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-21 09:55:53 +08:00
优化注释
This commit is contained in:
lemon橪
@@ -1,13 +1,6 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<view class="status_bar">
|
||||
<!-- 这里是状态栏 -->
|
||||
</view>
|
||||
|
||||
<u-navbar :isBack="false" title="购物车">
|
||||
|
||||
</u-navbar>
|
||||
|
||||
<u-navbar :isBack="false" title="购物车"></u-navbar>
|
||||
<!-- 空白页-->
|
||||
<view v-if="cartDetail.cartList == '' || cartDetail.cartList == [] || !cartDetail" class="empty">
|
||||
<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
|
||||
@@ -20,31 +13,28 @@
|
||||
<!-- 店铺商品信息 -->
|
||||
<div class="content">
|
||||
<div class="box box2" :class="{ invalid: isInvalid(item) }" v-for="(item, index) in cartDetail.cartList" :key="index">
|
||||
|
||||
<view class="tab">
|
||||
<view class="store-line">
|
||||
<u-checkbox-group class="store-line-check">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<u-checkbox shape="circle" active-color="rgb(255, 107, 53)" v-model="item.checked" @change="checkboxChangeDP(item)"></u-checkbox>
|
||||
<u-checkbox shape="circle" :active-color="$lightColor" v-model="item.checked" @change="checkboxChangeDP(item)"></u-checkbox>
|
||||
<!-- #endif -->
|
||||
<!-- 微信小程序这里 v-model出现问题，改用:value -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-checkbox shape="circle" active-color="rgb(255, 107, 53)" :value="item.checked" @change="checkboxChangeDP(item)"></u-checkbox>
|
||||
<u-checkbox shape="circle" :active-color="$lightColor" :value="item.checked" @change="checkboxChangeDP(item)"></u-checkbox>
|
||||
<!-- #endif -->
|
||||
</u-checkbox-group>
|
||||
<span class="ybname store-line-desc" @click.stop="tostore(item)">{{
|
||||
<span class="storeName store-line-desc" @click.stop="navigateToStore(item)">{{
|
||||
item.storeName
|
||||
}}</span>
|
||||
</view>
|
||||
<view class="right_Col" @click="toConpon(item)">
|
||||
<view class="right_Col" @click="navigateToConpon(item)">
|
||||
<div class="right_Line"></div>
|
||||
<span>领劵</span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<u-swipe-action :show="skuItem.selected" @open="openAction(skuItem)" :options="options" bg-color="#fff" ref="swiperAction" class="cartItem" v-for="(skuItem, i) in item.skuList" :index="i"
|
||||
:key="skuItem.goodsSku.id" @click="longtap(skuItem)" @longpress="longtap(skuItem)">
|
||||
:key="skuItem.goodsSku.id" @click="changeActionTab(skuItem)" @longpress="changeActionTab(skuItem)">
|
||||
<!-- 满减活动 -->
|
||||
<div v-if="skuItem.promotions" v-for="(fullDiscount,fullDiscountIndex) in skuItem.promotions" :key="fullDiscountIndex">
|
||||
<div v-if="fullDiscount.promotionType == 'FULL_DISCOUNT'">
|
||||
@@ -59,20 +49,20 @@
|
||||
<view>
|
||||
<u-checkbox-group v-if="skuItem.invalid == 0">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<u-checkbox shape="circle" active-color="rgb(255, 107, 53)" class="c-left" v-model="skuItem.checked" @change="checkboxChange(skuItem)"></u-checkbox>
|
||||
<u-checkbox shape="circle" :active-color="$lightColor" class="c-left" v-model="skuItem.checked" @change="checkboxChange(skuItem)"></u-checkbox>
|
||||
<!-- #endif -->
|
||||
<!-- 微信小程序这里 v-model出现问题，改用:value -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-checkbox shape="circle" active-color="rgb(255, 107, 53)" class="c-left" :value="skuItem.checked" @change="checkboxChange(skuItem)"></u-checkbox>
|
||||
<u-checkbox shape="circle" :active-color="$lightColor" class="c-left" :value="skuItem.checked" @change="checkboxChange(skuItem)"></u-checkbox>
|
||||
<!-- #endif -->
|
||||
</u-checkbox-group>
|
||||
<span class="invalid" v-else style="font-size: 24rpx">失效</span>
|
||||
</view>
|
||||
<u-image border-radius="20" :fade="true" @click.native="toProduct(skuItem)" width="200rpx" height="200rpx" :src="skuItem.goodsSku.thumbnail" @click="toProduct(skuItem)" />
|
||||
<u-image border-radius="20" :fade="true" @click.native="navigateToGoods(skuItem)" width="200rpx" height="200rpx" :src="skuItem.goodsSku.thumbnail" @click="navigateToGoods(skuItem)" />
|
||||
</view>
|
||||
<view class="goods-content">
|
||||
<!-- 商品名称 -->
|
||||
<p class="sp-name" @click="toProduct(skuItem)">
|
||||
<p class="sp-name" @click="navigateToGoods(skuItem)">
|
||||
{{ skuItem.goodsSku.goodsName }}
|
||||
</p>
|
||||
<!-- 规格 -->
|
||||
@@ -80,8 +70,8 @@
|
||||
<p class="sp-number">
|
||||
<view class="sp-price">
|
||||
<div class="default-color" :class="{'theme-color':skuItem.promotions.length <=0 }">
|
||||
￥<span>{{ Fixed(skuItem.goodsSku.price)[0] }}</span>
|
||||
<span>.{{ Fixed(skuItem.goodsSku.price)[1] }}</span>
|
||||
￥<span>{{ formatPrice(skuItem.goodsSku.price)[0] }}</span>
|
||||
<span>.{{ formatPrice(skuItem.goodsSku.price)[1] }}</span>
|
||||
</div>
|
||||
</view>
|
||||
<view>
|
||||
@@ -106,8 +96,8 @@
|
||||
<!-- 如果有活动 并且是选中的状态,显示预估到手价格 -->
|
||||
<div class="priceDetail-flowPrice" :class="{'theme-color':skuItem.priceDetailDTO}"
|
||||
v-if="skuItem.priceDetailDTO && skuItem.invalid == 0 && skuItem.promotions.length!=0 && skuItem.checked && skuItem.checked">
|
||||
预估到手价 ￥<span>{{ Fixed(skuItem.priceDetailDTO.flowPrice)[0]}}</span>
|
||||
<span>.{{ Fixed(skuItem.priceDetailDTO.flowPrice)[1] }} </span>
|
||||
预估到手价 ￥<span>{{ formatPrice(skuItem.priceDetailDTO.flowPrice)[0]}}</span>
|
||||
<span>.{{ formatPrice(skuItem.priceDetailDTO.flowPrice)[1] }} </span>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
@@ -116,17 +106,16 @@
|
||||
</u-swipe-action>
|
||||
</div>
|
||||
</div>
|
||||
<u-modal v-model="delshow" @confirm="confirm" show-cancel-button :content="delcontent" :async-close="true"></u-modal>
|
||||
<u-modal v-model="deleteShow" @delectConfirm="delectConfirm" show-cancel-button :content="deleteContent" :async-close="true"></u-modal>
|
||||
<!-- 结账 -->
|
||||
<div class="box box6">
|
||||
<view class="navL">
|
||||
|
||||
<u-checkbox shape="circle" active-color="rgb(255, 107, 53)" v-model="checkout" @change="checkOut()" label-size="24">全选</u-checkbox>
|
||||
<u-checkbox shape="circle" :active-color="$lightColor" v-model="checkout" @change="checkOut()" label-size="24">全选</u-checkbox>
|
||||
<span class="price">
|
||||
<div class="prices">
|
||||
<div class="fullPrice">
|
||||
<span class="number" v-if="cartDetail && cartDetail.priceDetailDTO">
|
||||
总计: <span>¥{{ Fixed(cartDetail.priceDetailDTO.flowPrice)[0] }}</span>.<span>{{ Fixed(cartDetail.priceDetailDTO.flowPrice)[1] }}</span>
|
||||
总计: <span>¥{{ formatPrice(cartDetail.priceDetailDTO.flowPrice)[0] }}</span>.<span>{{ formatPrice(cartDetail.priceDetailDTO.flowPrice)[1] }}</span>
|
||||
</span>
|
||||
<span class="number" v-else>总计:0.00</span>
|
||||
</div>
|
||||
@@ -137,7 +126,6 @@
|
||||
</div>
|
||||
</span>
|
||||
</view>
|
||||
|
||||
<!-- 优惠详情 -->
|
||||
<u-popup z-index="3" close mode="bottom" height="50%" closeable v-model="discountDetailsFlag" border-radius="20">
|
||||
<div class="discount-list">
|
||||
@@ -151,29 +139,24 @@
|
||||
<div class="discount-item" v-if="cartDetail.priceDetailDTO">
|
||||
<span>优惠券</span>
|
||||
<span>-￥{{cartDetail.priceDetailDTO.couponPrice | unitPrice}}</span>
|
||||
|
||||
</div>
|
||||
<div class="discount-item" v-if="cartDetail.priceDetailDTO">
|
||||
|
||||
<span>其他优惠</span>
|
||||
<span>-￥{{cartDetail.priceDetailDTO.discountPrice | unitPrice}}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
|
||||
<view v-if="isEdit" @click="delGoods()">
|
||||
<div class="navR">删除</div>
|
||||
<view v-if="isEdit" @click="deleteGoods()">
|
||||
<div class="settlement">删除</div>
|
||||
</view>
|
||||
|
||||
<view v-else @click="submitOrder()">
|
||||
<div class="navR">去结算</div>
|
||||
<div class="settlement">去结算</div>
|
||||
</view>
|
||||
</div>
|
||||
<u-toast ref="uToast" />
|
||||
|
||||
<u-select :default-value="singleDefaultValue" v-model="singleFlag" @confirm="singleConfirm" value-name="activity_id" label-name="title" :list="singleList"></u-select>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -181,56 +164,39 @@ import * as API_Trade from "@/api/trade";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
discountDetailsFlag: false,
|
||||
lightColor:this.$lightColor,
|
||||
discountDetailsFlag: false, //优惠明细开关
|
||||
// 商品栏右侧滑动按钮
|
||||
options: [
|
||||
{
|
||||
text: "删除",
|
||||
style: {
|
||||
backgroundColor: this.$lightColor,
|
||||
backgroundColor: this.$lightColor, //高亮颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
singleList: [],
|
||||
singleVal: "",
|
||||
singleDefaultValue: [], //默认选择第几个
|
||||
singleFlag: false, //选择器开关
|
||||
isInvalid(val) {
|
||||
//是否无效商品
|
||||
if (val.invalid == 1) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
delshow: false,
|
||||
delcontent: "删除该商品？",
|
||||
show: false,
|
||||
empty: false, //空白页现实 true|false,
|
||||
|
||||
cartDetail: "",
|
||||
|
||||
price: 0,
|
||||
point: 0,
|
||||
|
||||
goodsVal: "",
|
||||
|
||||
// 是否是编辑
|
||||
isEdit: false,
|
||||
|
||||
checkout: true,
|
||||
cartBackbtn: {
|
||||
from: "",
|
||||
id: "",
|
||||
},
|
||||
WEIXIN_num: "",
|
||||
deleteShow: false, //右滑删除
|
||||
deleteContent: "删除该商品？", //删除显示的信息
|
||||
cartDetail: "", //购物车详情
|
||||
goodsVal: "", //单个商品详情
|
||||
isEdit: false, // 是否是编辑
|
||||
checkout: true, //全选按钮
|
||||
WEIXIN_num: "", //购物车兼容微信步进器
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
onReady() {
|
||||
// this.windowChangeSize();
|
||||
},
|
||||
/**
|
||||
* 初始化信息
|
||||
*/
|
||||
onShow() {
|
||||
this.delshow ? (this.delshow = false) : true;
|
||||
this.deleteShow ? (this.deleteShow = false) : true;
|
||||
if (this.$refs.swiperAction) {
|
||||
this.$refs.swiperAction.forEach((item, index) => {
|
||||
item.show = false;
|
||||
@@ -241,162 +207,93 @@ export default {
|
||||
this.getCardData();
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
methods: {
|
||||
/**
|
||||
* 倒数计时
|
||||
*/
|
||||
getCountDownTime(val) {
|
||||
let date = new Date(val.replace(/-/g, "/"));
|
||||
let timeSimple = new Date(date).getTime() / 1000;
|
||||
return timeSimple - new Date().getTime() / 1000;
|
||||
},
|
||||
isPintuan(val) {
|
||||
val.forEach((item) => {
|
||||
if (item.promotionType == "PINTUAN") {
|
||||
delete val[item];
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 优惠明细
|
||||
|
||||
/**
|
||||
* 优惠明细开关
|
||||
*/
|
||||
discountDetails() {
|
||||
this.discountDetailsFlag = true;
|
||||
},
|
||||
|
||||
// 格式化金钱 1999 --> [1999,00]
|
||||
Fixed(val) {
|
||||
/**
|
||||
* 格式化金钱 1999 --> [1999,00]
|
||||
*/
|
||||
formatPrice(val) {
|
||||
if (typeof val == "undefined") {
|
||||
return val;
|
||||
}
|
||||
return val.toFixed(2).split(".");
|
||||
},
|
||||
|
||||
/**左滑打开删除 */
|
||||
/**
|
||||
* 左滑打开删除
|
||||
*/
|
||||
openAction(skuItem) {
|
||||
/**循环父级有多少个店铺 */
|
||||
this.cartDetail.cartList.forEach((cart_item, cart_index) => {
|
||||
if (cart_item.skuList) {
|
||||
cart_item.skuList.forEach((sku, sku_index) => {
|
||||
this.cartDetail.cartList.forEach((cartItem) => {
|
||||
if (cartItem.skuList) {
|
||||
cartItem.skuList.forEach((sku) => {
|
||||
this.$set(sku, "selected", false);
|
||||
});
|
||||
}
|
||||
});
|
||||
this.$set(skuItem, "selected", true);
|
||||
// skuItem.selected = true
|
||||
console.log(skuItem.selected);
|
||||
},
|
||||
// 点击选择活动
|
||||
singleConfirm(val) {
|
||||
console.log("val", val);
|
||||
if (val[0].value) {
|
||||
this.singleList.forEach((item) => {
|
||||
if (item.activity_id == val[0].value && item.title == val[0].label) {
|
||||
this.singleVal.activity_id = item.activity_id;
|
||||
this.singleVal.promotion_type = item.promotion_type;
|
||||
}
|
||||
});
|
||||
API_Trade.changeActivity(this.singleVal).then((res) => {
|
||||
if (res.statusCode == 200) {
|
||||
this.getCardData();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 选择活动框显示
|
||||
singleClick(val, data, index) {
|
||||
this.singleDefaultValue[0] = index;
|
||||
this.singleFlag = true;
|
||||
this.singleList = val;
|
||||
this.singleVal = {
|
||||
storeId: data.storeId,
|
||||
skuId: data.skuId,
|
||||
};
|
||||
},
|
||||
longtap(val) {
|
||||
this.delshow = true;
|
||||
|
||||
/**
|
||||
* 滑动删除
|
||||
*/
|
||||
changeActionTab(val) {
|
||||
this.deleteShow = true;
|
||||
this.goodsVal = val;
|
||||
},
|
||||
pointFormat(point, num) {
|
||||
if (num > 0) {
|
||||
var result = (point * 1000) / num / 1000;
|
||||
if (result && (result + "").indexOf(".") > 0) {
|
||||
return 0;
|
||||
}
|
||||
return result;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
windowChangeSize() {
|
||||
let topWidth;
|
||||
uni.getSystemInfo({
|
||||
success: function (res) {
|
||||
// res - 各种参数
|
||||
let search = uni.createSelectorQuery().select(".u-swipe-content");
|
||||
search
|
||||
.boundingClientRect(function (data) {
|
||||
//data - 各种参数
|
||||
if (data && data.width) {
|
||||
topWidth = data.width; // 获取元素宽度
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
});
|
||||
if (topWidth <= 100) {
|
||||
console.log(topWidth);
|
||||
this.reLaunch({
|
||||
url: "./cart",
|
||||
});
|
||||
}
|
||||
this.getCardData();
|
||||
},
|
||||
|
||||
// 点击编辑功能
|
||||
editCartMsg() {
|
||||
// 点击编辑出现删除功能
|
||||
this.isEdit = !this.isEdit;
|
||||
},
|
||||
|
||||
// 点击删除
|
||||
confirm() {
|
||||
/**
|
||||
* 点击删除
|
||||
*/
|
||||
delectConfirm() {
|
||||
API_Trade.deleteSkuItem(this.goodsVal.goodsSku.id).then((res) => {
|
||||
if (res.statusCode == 200) {
|
||||
uni.showToast({
|
||||
title: "此商品删除成功",
|
||||
duration: 2000,
|
||||
});
|
||||
this.delshow = false;
|
||||
this.deleteShow = false;
|
||||
this.getCardData();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 判断是 1 为true 0 为 false
|
||||
isOneOrZero(val) {
|
||||
return val == 1 ? true : false;
|
||||
},
|
||||
|
||||
// 删除商品
|
||||
delGoods() {
|
||||
if (this.Config()) {
|
||||
var delData = [];
|
||||
this.cartDetail.cartList.forEach((item, index) => {
|
||||
item.skuList.forEach((goodsItem, index) => {
|
||||
/**
|
||||
* 删除商品
|
||||
*/
|
||||
deleteGoods() {
|
||||
if (this.whetherChecked()) {
|
||||
var delGoodsData = [];
|
||||
this.cartDetail.cartList.forEach((item) => {
|
||||
item.skuList.forEach((goodsItem) => {
|
||||
if (goodsItem.checked) {
|
||||
delData.push(goodsItem.goodsSku.id);
|
||||
delGoodsData.push(goodsItem.goodsSku.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (delData && delData.length > 0) {
|
||||
if (delGoodsData && delGoodsData.length > 0) {
|
||||
// 执行删除
|
||||
API_Trade.deleteSkuItem(delData).then((res) => {
|
||||
API_Trade.deleteSkuItem(delGoodsData).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "删除成功!",
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
this.getCardData();
|
||||
}
|
||||
});
|
||||
@@ -409,20 +306,28 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到店铺
|
||||
tostore(val) {
|
||||
/**
|
||||
* 跳转到店铺
|
||||
*/
|
||||
navigateToStore(val) {
|
||||
uni.navigateTo({
|
||||
url: "../product/shopPage?id=" + val.storeId,
|
||||
});
|
||||
},
|
||||
// 跳转到优惠券
|
||||
toConpon(val) {
|
||||
|
||||
/**
|
||||
* 跳转到优惠券
|
||||
*/
|
||||
navigateToConpon(val) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/coupon/couponCenter?storeId=" + val.storeId,
|
||||
});
|
||||
},
|
||||
// 跳转到商品
|
||||
toProduct(val) {
|
||||
|
||||
/**
|
||||
* 跳转到商品
|
||||
*/
|
||||
navigateToGoods(val) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/product/goods?id=" +
|
||||
@@ -431,14 +336,18 @@ export default {
|
||||
val.goodsSku.goodsId,
|
||||
});
|
||||
},
|
||||
numChange_WEIXIN(callback) {
|
||||
console.log(callback);
|
||||
this.WEIXIN_num = callback.value;
|
||||
console.log(this.WEIXIN_num);
|
||||
|
||||
/**
|
||||
* 点击步进器微信回调
|
||||
*/
|
||||
numChange_WEIXIN(callback) {
|
||||
this.WEIXIN_num = callback.value;
|
||||
this.numChange(callback.data, "3");
|
||||
},
|
||||
// 点击
|
||||
|
||||
/**
|
||||
* 点击步进器回调
|
||||
*/
|
||||
numChange(val, nums) {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (nums && nums == "1") {
|
||||
@@ -448,32 +357,36 @@ export default {
|
||||
} else if (nums && nums == "3") {
|
||||
val.num = this.WEIXIN_num;
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
this.updateSkuNumFun(val.goodsSku.id, val.num);
|
||||
},
|
||||
|
||||
/**
|
||||
* 去结算
|
||||
*/
|
||||
submitOrder() {
|
||||
if (this.Config()) {
|
||||
if (this.whetherChecked()) {
|
||||
this.navigateTo("/pages/order/fillorder?way=CART");
|
||||
}
|
||||
},
|
||||
|
||||
Config() {
|
||||
let can_buy = false;
|
||||
/**
|
||||
* 验证是否选中商品
|
||||
*/
|
||||
whetherChecked() {
|
||||
let canBuy = false;
|
||||
this.cartDetail.cartList.forEach((item) => {
|
||||
if (item.checked) {
|
||||
can_buy = true;
|
||||
canBuy = true;
|
||||
} else {
|
||||
item.skuList.forEach((skuItem) => {
|
||||
if (skuItem.checked) {
|
||||
can_buy = true;
|
||||
canBuy = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
if (!can_buy) {
|
||||
if (!canBuy) {
|
||||
uni.showToast({
|
||||
title: "您还没有选择商品",
|
||||
duration: 2000,
|
||||
@@ -485,14 +398,18 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转
|
||||
/**
|
||||
* 跳转
|
||||
*/
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
},
|
||||
|
||||
// 全选
|
||||
/**
|
||||
* 全选
|
||||
*/
|
||||
checkOut() {
|
||||
API_Trade.checkAll(this.checkout).then((result) => {
|
||||
if (result.data.success) {
|
||||
@@ -502,7 +419,9 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
// 获取店铺选中信息
|
||||
/**
|
||||
* 获取店铺选中信息
|
||||
*/
|
||||
checkStoreFun(skuId, num) {
|
||||
API_Trade.checkStore(skuId, num).then((result) => {
|
||||
if (result.data.success) {
|
||||
@@ -511,7 +430,9 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
// 店铺点击
|
||||
/**
|
||||
* 店铺点击
|
||||
*/
|
||||
checkboxChangeDP(e) {
|
||||
// #ifdef MP-WEIXIN
|
||||
e.checked = !e.checked;
|
||||
@@ -519,7 +440,9 @@ export default {
|
||||
this.checkStoreFun(e.storeId, e.checked);
|
||||
},
|
||||
|
||||
// 获取购物车选中信息
|
||||
/**
|
||||
* 获取购物车选中信息
|
||||
*/
|
||||
updateSkuCheckedFun(skuId, num) {
|
||||
API_Trade.updateSkuChecked(skuId, num).then((result) => {
|
||||
if (result.data.success) {
|
||||
@@ -528,7 +451,9 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
// 更新商品购物车数量
|
||||
/**
|
||||
* 更新商品购物车数量
|
||||
*/
|
||||
updateSkuNumFun(skuId, num) {
|
||||
API_Trade.updateSkuNum(skuId, num).then((result) => {
|
||||
if (result.statusCode == 200) {
|
||||
@@ -542,7 +467,9 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
// 获取购物车数据
|
||||
/**
|
||||
* 获取购物车数据
|
||||
*/
|
||||
getCardData() {
|
||||
if (this.$options.filters.isLogin("auth")) {
|
||||
uni.showLoading({
|
||||
@@ -552,10 +479,10 @@ export default {
|
||||
.then((result) => {
|
||||
if (result.data.success) {
|
||||
this.cartDetail = result.data.result;
|
||||
|
||||
this.checkout = true;
|
||||
for (let i = 0; i < this.cartDetail.cartList.length; i++) {
|
||||
let item = this.cartDetail.cartList[i];
|
||||
// 循环出当前商品是否全选
|
||||
if (item.checked == 0) {
|
||||
this.checkout = false;
|
||||
}
|
||||
@@ -568,7 +495,6 @@ export default {
|
||||
sku.promotions.splice(proIndex, 1);
|
||||
}
|
||||
});
|
||||
console.log(sku);
|
||||
});
|
||||
}
|
||||
uni.stopPullDownRefresh();
|
||||
@@ -590,7 +516,9 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// 选中某个复选框时，由checkbox时触发
|
||||
/**
|
||||
* 选中某个复选框时，由checkbox时触发
|
||||
*/
|
||||
checkboxChange(e) {
|
||||
// #ifdef MP-WEIXIN
|
||||
e.checked = !e.checked;
|
||||
@@ -628,16 +556,6 @@ export default {
|
||||
.promotionNotice {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.sp_tag {
|
||||
display: inline;
|
||||
background: #f2f2f2;
|
||||
padding: 0 20rpx 0 10rpx;
|
||||
height: 20rpx;
|
||||
line-height: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #262626;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
.goods-row {
|
||||
padding: 30rpx 0;
|
||||
@@ -646,47 +564,13 @@ export default {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sp_promotion {
|
||||
margin: 4rpx 0;
|
||||
}
|
||||
|
||||
.sp_tag_plain {
|
||||
margin-left: 8rpx;
|
||||
padding: 0 6rpx 0 6rpx;
|
||||
background: #fff;
|
||||
border: 1px solid $main-color;
|
||||
font-size: 24rpx;
|
||||
color: $main-color;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.sp_tag_plain:nth-of-type(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sp_ingle {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.sp_ingle_icon {
|
||||
margin-left: 4rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.ybname {
|
||||
.storeName {
|
||||
font-weight: bold;
|
||||
}
|
||||
.invalid {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
position: fixed;
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.cartItem {
|
||||
border-radius: 0.4em;
|
||||
transition: 0.35s;
|
||||
@@ -696,47 +580,6 @@ export default {
|
||||
padding-top: var(--status-bar-height);
|
||||
}
|
||||
|
||||
.prohibition {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
top: var(--status-bar-height);
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #fff;
|
||||
position: relative;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
font-size: 34rpx;
|
||||
|
||||
.left,
|
||||
.right {
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 20rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 空白页 */
|
||||
/deep/ .u-number-input {
|
||||
background: #fff !important;
|
||||
@@ -784,7 +627,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.navR {
|
||||
.settlement {
|
||||
width: 180rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
|
||||
@@ -4,171 +4,87 @@
|
||||
<div class="title"> 商品分类</div>
|
||||
<u-search class="nav-search" disabled @click.native="search" placeholder="搜索商品" :show-action="false"></u-search>
|
||||
</u-navbar>
|
||||
|
||||
<view class="content">
|
||||
<scroll-view scroll-y :scroll-top="num" scroll-with-animation class="left-aside">
|
||||
<view v-for="(item, index) in flist" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item, index)">
|
||||
<scroll-view scroll-y scroll-with-animation class="left-aside">
|
||||
<view v-for="(item, index) in tabList" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item, index)">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-with-animation :scroll-top="rightNum" scroll-y class="right-aside" @scroll="asideScroll" @scrolltolower="nextList('bottom')" :upper-threshold="-100" :lower-threshold="-100"
|
||||
@scrolltoupper="nextList('top')">
|
||||
<!-- 右边显示区域顶部热门精选的图片 -->
|
||||
<!-- <view v-show="showTopTip" class="bottomTip">下拉浏览上一页</view> -->
|
||||
<scroll-view scroll-with-animation scroll-y class="right-aside" :upper-threshold="-100" :lower-threshold="-100">
|
||||
<!-- 头部图片 -->
|
||||
<view class="top-img" id="main-top">
|
||||
<u-image width="500rpx" height="230rpx" @click="navigateToList(topImg.id,topImg.id)" :src="topImg.image" mode="">
|
||||
</u-image>
|
||||
</view>
|
||||
<view v-for="item in tlist" :key="item.id" class="s-list" :id="'main-' + item.id">
|
||||
<view v-for="item in categoryList" :key="item.id" class="s-list" :id="'main-' + item.id">
|
||||
<!-- 分类标题 -->
|
||||
<text class="s-item">{{ item.name }}</text>
|
||||
<!-- 分类详情 -->
|
||||
<view class="t-list">
|
||||
<view @click="navigateToList(item.id, titem.id)" v-if="titem.parentId === item.id" class="t-item" v-for="(titem, cIndex) in item.children" :key="titem.id"
|
||||
<view @click="navigateToList(item.id, children.id)" v-if="children.parentId === item.id" class="t-item" v-for="(children, cIndex) in item.children" :key="children.id"
|
||||
:class="{ 'margin-right': (cIndex + 1) % 3 == 0 }">
|
||||
<u-image width="70px" height="70px" :src="titem.image" :lazy-load="true">
|
||||
|
||||
<u-image width="70px" height="70px" :src="children.image" :lazy-load="true">
|
||||
</u-image>
|
||||
<text>{{ titem.name }}</text>
|
||||
<text>{{ children.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #todo 暂未实现此功能 -->
|
||||
<!-- <view v-show="showBottomTip" class="bottomTip">上拉继续浏览</view> -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCategory, getCategoryList } from "@/api/goods.js";
|
||||
import { getCategoryList } from "@/api/goods.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sizeCalcState: false,
|
||||
tabScrollTop: 0,
|
||||
currentId: 0,
|
||||
flist: [],
|
||||
slist: [],
|
||||
tlist: [],
|
||||
topImg: "",
|
||||
showBottomTip: false,
|
||||
showTopTip: false,
|
||||
num: 0,
|
||||
rightNum: 0,
|
||||
tabList: [], //左侧标题列表
|
||||
categoryList: [], //右侧分类数据列表
|
||||
topImg: "", //顶部图片
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentId(val) {
|
||||
this.flist.forEach((item, index) => {
|
||||
if (item.id == val) {
|
||||
// console.log(index)
|
||||
this.showBottomTip = false;
|
||||
this.showTopTip = false;
|
||||
this.num = index * 30;
|
||||
if (index < 7) {
|
||||
this.num = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
search() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/navigation/search/searchPage",
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载图片
|
||||
*/
|
||||
async loadData() {
|
||||
let list = await getCategoryList(0);
|
||||
|
||||
this.flist = list.data.result;
|
||||
|
||||
this.tabList = list.data.result;
|
||||
this.currentId = list.data.result[0].id;
|
||||
this.loadListContent(0);
|
||||
// 获取右边显示区域顶部热门精选的图片
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载列表内容
|
||||
*/
|
||||
loadListContent(index) {
|
||||
console.log(this.flist[index]);
|
||||
this.topImg = this.flist[index];
|
||||
this.tlist = this.flist[index].children;
|
||||
this.topImg = this.tabList[index];
|
||||
this.categoryList = this.tabList[index].children;
|
||||
},
|
||||
nextList(type) {
|
||||
//通过type 判断是上拉还是下拉，top为加载上一页，bottom为下一页
|
||||
let list = JSON.parse(JSON.stringify(this.flist));
|
||||
if (type == "top") {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].id == this.currentId && i != 0) {
|
||||
this.currentId = list[i - 1].id;
|
||||
this.loadListContent();
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].id == this.currentId && i != list.length - 1) {
|
||||
this.currentId = list[i + 1].id;
|
||||
this.loadListContent();
|
||||
// this.rightNum = 250;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
//一级分类点击
|
||||
/**
|
||||
* 一级分类点击
|
||||
*/
|
||||
tabtap(item, i) {
|
||||
if (item.id != this.currentId) {
|
||||
this.currentId = item.id;
|
||||
this.loadListContent(i);
|
||||
}
|
||||
},
|
||||
//右侧栏滚动
|
||||
asideScroll(e) {
|
||||
let top = e.detail.scrollTop;
|
||||
if (top < 0 && this.currentId != this.flist[0].id) {
|
||||
this.showTopTip = true;
|
||||
}
|
||||
if (
|
||||
top > e.detail.scrollHeight - 500 &&
|
||||
this.currentId != this.flist[this.flist.length - 1].id
|
||||
) {
|
||||
this.showBottomTip = true;
|
||||
}
|
||||
},
|
||||
//计算右侧栏每个tab的高度等信息
|
||||
calcSize() {
|
||||
let h = 0;
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.select("#main-top")
|
||||
.fields(
|
||||
{
|
||||
size: true,
|
||||
},
|
||||
(data) => {
|
||||
h = data.height;
|
||||
}
|
||||
)
|
||||
.exec();
|
||||
this.slist.forEach((item) => {
|
||||
let view = uni.createSelectorQuery().select("#main-" + item.id);
|
||||
view
|
||||
.fields(
|
||||
{
|
||||
size: true,
|
||||
},
|
||||
(data) => {
|
||||
item.top = h;
|
||||
h += data.height;
|
||||
item.bottom = h;
|
||||
}
|
||||
)
|
||||
.exec();
|
||||
});
|
||||
this.sizeCalcState = true;
|
||||
},
|
||||
|
||||
navigateToList(sid, tid) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage?category=${tid}`,
|
||||
@@ -177,7 +93,8 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: #fdfaff;
|
||||
@@ -195,12 +112,8 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
background-color: #f1f1f1;
|
||||
width: 100%;
|
||||
.s-list{
|
||||
box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.nav-search {
|
||||
padding-left: 30rpx !important;
|
||||
@@ -225,14 +138,12 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
|
||||
font-size: 28rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.left-aside {
|
||||
flex-shrink: 0;
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.f-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -240,14 +151,12 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
|
||||
width: 100%;
|
||||
height: 97rpx;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: $light-color;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.right-aside {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
@@ -259,19 +168,11 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
|
||||
height: 230rpx;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.bottomTip {
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
margin: 10rpx;
|
||||
font-size: $font-sm;
|
||||
}
|
||||
|
||||
.s-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -279,7 +180,6 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
|
||||
padding-top: 16rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.t-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -294,12 +194,10 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
/* width: 33%; */
|
||||
width: 150rpx;
|
||||
margin-right: 25rpx;
|
||||
font-size: 24rpx;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
|
||||
@@ -1,667 +0,0 @@
|
||||
<template>
|
||||
<view class="new-goods">
|
||||
<view class="status_bar">
|
||||
<!-- 这里是状态栏 -->
|
||||
</view>
|
||||
<!-- 标题栏 -->
|
||||
<view class="header">
|
||||
<u-icon @click="leftBackBtn" size="40" name="arrow-left"></u-icon>
|
||||
<view class="head-bar">
|
||||
<view @click="currentIndex=0" :class="{'bar-active':currentIndex==0}">新品</view>
|
||||
<view @click="currentIndex=1" :class="{'bar-active':currentIndex==1}">预告</view>
|
||||
</view>
|
||||
<view @click="goCart" class="alifont icon-gouwuche1" style="font-weight: bold;"></view>
|
||||
</view>
|
||||
<swiper :current="currentIndex" class="swiper-box" @change="ontabchange" :interval="3000" :duration="500">
|
||||
<swiper-item>
|
||||
<scroll-view class="scroll-v" lower-threshold="200" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
|
||||
<!-- 推荐商品图 -->
|
||||
<image class="recommend-img" src="/pages/floor/imgs/recommend/head-sample.png"></image>
|
||||
<!-- 排序 start-->
|
||||
<view class="index-navs">
|
||||
<ms-dropdown-item class="index-nav" :class="{ 'index-nav-active': nav == 1 }" v-model="sortType" @click.native="handledropdown(1)"
|
||||
:hasSlot="true" :title="sortType || '综合排序'" :contentTopReduse="44" ref="dropdownItem1">
|
||||
<view class="dropdown-item-content">
|
||||
<view class="dropdown-list" :class="{ 'dropdown-list-active': sortType == '综合排序' }" @click="setSortType('综合排序')">综合排序</view>
|
||||
<view class="dropdown-list" :class="{ 'dropdown-list-active': sortType == '新品排序' }" @click="setSortType('新品排序')">新品排序</view>
|
||||
</view>
|
||||
</ms-dropdown-item>
|
||||
<view class="index-nav-divider"></view>
|
||||
<view class="index-nav" :class="{ 'index-nav-active': nav == 3 }" @click="setNav(3)">
|
||||
销量
|
||||
<view class="index-nav-arrows">
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-up-1.png" v-if="sale === 'asc'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-down.png" v-if="sale === 'dec'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-nav-divider"></view>
|
||||
<view class="index-nav" :class="{ 'index-nav-active': nav == 4 }" @click="setNav(4)">
|
||||
价格
|
||||
<view class="index-nav-arrows">
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-up-1.png" v-if="price === 'asc'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-down.png" v-if="price === 'dec'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-nav-divider"></view>
|
||||
<ms-dropdown-item class="index-nav" :class="{ 'index-nav-active': nav == 2 }" @click.native="handledropdown(2)"
|
||||
v-model="current_tag" :hasSlot="true" :title="current_tag || '分类'" :contentTopReduse="44" ref="dropdownItem2">
|
||||
<view class="dropdown-tags">
|
||||
<view class="dropdown-tag" :class="{ 'dropdown-tag-active': current_tag == item }" @click="setTags(item)" v-for="(item, index) in tags"
|
||||
:key="index">{{ item }}</view>
|
||||
<view class="dropdown-tag cancel-btn" @click="setTags('分类')">取消</view>
|
||||
</view>
|
||||
</ms-dropdown-item>
|
||||
</view>
|
||||
<!-- 排序 end-->
|
||||
<!-- 商品列表 -->
|
||||
<view class="index-items">
|
||||
<view class="index-item" v-for="(item, index) in goods" :key="index">
|
||||
<view class="index-item-tag">新品</view>
|
||||
<view class="index-item-img" @click="toProduct(item.goods_id)">
|
||||
<image :src="item.thumbnail" mode="aspectFill"></image>
|
||||
<view class="index-item-title">{{ item.goodsName }}</view>
|
||||
<view class="index-item-price">
|
||||
<!-- ¥{{ item.price | unitPrice }}{{ item.point ? '+' + item.point + '积分' : '' }} -->
|
||||
¥{{ item.price | unitPrice }}
|
||||
<span class="tipsMkt">¥{{ item.mktprice }}</span>
|
||||
</view>
|
||||
<view class="index-item-title-desc">
|
||||
<view>已售 {{ item.buy_count }}</view>
|
||||
<view>好评率 {{ item.grade }}%</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
|
||||
<swiper-item>
|
||||
<scroll-view class="scroll-v" lower-threshold="200" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
|
||||
<!-- 推荐商品图 -->
|
||||
<image class="recommend-img" src="/pages/floor/imgs/recommend/head-sample.png"></image>
|
||||
<!-- 排序 start-->
|
||||
<view class="index-navs">
|
||||
<ms-dropdown-item class="index-nav" :class="{ 'index-nav-active': nav == 1 }" v-model="sortType" @click.native="handledropdown(1)"
|
||||
:hasSlot="true" :title="sortType || '综合排序'" :contentTopReduse="44" ref="dropdownItem11">
|
||||
<view class="dropdown-item-content">
|
||||
<view class="dropdown-list" :class="{ 'dropdown-list-active': sortType == '综合排序' }" @click="setSortType('综合排序')">综合排序</view>
|
||||
<view class="dropdown-list" :class="{ 'dropdown-list-active': sortType == '新品排序' }" @click="setSortType('新品排序')">新品排序</view>
|
||||
</view>
|
||||
</ms-dropdown-item>
|
||||
<view class="index-nav-divider"></view>
|
||||
<view class="index-nav" :class="{ 'index-nav-active': nav == 3 }" @click="setNav(3)">
|
||||
销量
|
||||
<view class="index-nav-arrows">
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-up-1.png" v-if="sale === 'asc'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-down.png" v-if="sale === 'dec'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-nav-divider"></view>
|
||||
<view class="index-nav" :class="{ 'index-nav-active': nav == 4 }" @click="setNav(4)">
|
||||
价格
|
||||
<view class="index-nav-arrows">
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-up-1.png" v-if="price === 'asc'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-down.png" v-if="price === 'dec'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-nav-divider"></view>
|
||||
<ms-dropdown-item class="index-nav" :class="{ 'index-nav-active': nav == 2 }" @click.native="handledropdown(2)"
|
||||
v-model="current_tag" :hasSlot="true" :title="current_tag || '分类'" :contentTopReduse="44" ref="dropdownItem22">
|
||||
<view class="dropdown-tags">
|
||||
<view class="dropdown-tag" :class="{ 'dropdown-tag-active': current_tag == item }" @click="setTags(item)" v-for="(item, index) in tags"
|
||||
:key="index">{{ item }}</view>
|
||||
<view class="dropdown-tag cancel-btn" @click="setTags('分类')">取消</view>
|
||||
</view>
|
||||
</ms-dropdown-item>
|
||||
</view>
|
||||
<!-- 排序 end-->
|
||||
<!-- 商品列表 -->
|
||||
<view class="index-items">
|
||||
<view class="index-item" v-for="(item, index) in goods" :key="index">
|
||||
<view class="index-item-tag">即将上架</view>
|
||||
<view class="index-item-img" @click="toProduct(item.goods_id)">
|
||||
<image :src="item.thumbnail" mode="aspectFill"></image>
|
||||
<view class="index-item-title">{{ item.goodsName }}</view>
|
||||
<view class="index-item-price">
|
||||
<!-- ¥{{ item.price | unitPrice }}{{ item.point ? '+' + item.point + '积分' : '' }} -->
|
||||
¥{{ item.price | unitPrice }}
|
||||
<span class="tipsMkt">¥{{ item.mktprice }}</span>
|
||||
</view>
|
||||
<view class="index-item-title-desc">
|
||||
<view>已售 {{ item.buy_count }}</view>
|
||||
<view>好评率 {{ item.grade }}%</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue';
|
||||
import {
|
||||
getCategory,
|
||||
getTagGoods
|
||||
} from '@/api/goods.js';
|
||||
import storage from '@/utils/storage.js';
|
||||
export default {
|
||||
components: {
|
||||
msDropdownItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
goods: [],
|
||||
originalGoods:[],
|
||||
nav: 1,
|
||||
sale: '',
|
||||
price: '',
|
||||
sortType: '',
|
||||
tags: [],
|
||||
current_tag: '',
|
||||
typeSort1: true,
|
||||
typeSort2: false
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
currentIndex(val,oVal){
|
||||
this.nav = 1;
|
||||
this.originalGoods = []
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.getData()
|
||||
this.initCategory();
|
||||
},
|
||||
methods: {
|
||||
leftBackBtn() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
toProduct(goods_id) {//跳转商品详情
|
||||
uni.navigateTo({
|
||||
url: '/pages/product/goods?id=' + goods_id
|
||||
});
|
||||
},
|
||||
goCart() { //跳转购物车
|
||||
let obj = {
|
||||
from: 'newGoods',
|
||||
id: ''
|
||||
};
|
||||
storage.setCartBackbtn(obj);
|
||||
uni.switchTab({
|
||||
url: '/pages/tabbar/cart/cartList'
|
||||
});
|
||||
},
|
||||
ontabchange(e){ //swiper切换
|
||||
this.currentIndex = e.detail.current
|
||||
},
|
||||
handledropdown(val) {
|
||||
// 如果没有值的话就是全部关闭
|
||||
if (!val) {
|
||||
this.$refs.dropdownItem2.closePopup()
|
||||
this.$refs.dropdownItem1.closePopup()
|
||||
this.$refs.dropdownItem22.closePopup()
|
||||
this.$refs.dropdownItem11.closePopup()
|
||||
}
|
||||
this.sale = '';
|
||||
this.price = '';
|
||||
// 如果等于1点击综合排序
|
||||
if (val == 1) {
|
||||
this.nav = 1
|
||||
this.$refs.dropdownItem2.closePopup()
|
||||
this.$refs.dropdownItem22.closePopup()
|
||||
} else {
|
||||
this.nav = 2
|
||||
this.$refs.dropdownItem1.closePopup()
|
||||
this.$refs.dropdownItem11.closePopup()
|
||||
}
|
||||
},
|
||||
|
||||
async getData() { //获取数据
|
||||
let response = await getTagGoods(-1, this.mark, 9999);
|
||||
this.originalGoods.push(...response.data);
|
||||
this.reRank();
|
||||
},
|
||||
loadMore(){ //加载更多
|
||||
// this.getData()
|
||||
},
|
||||
|
||||
cateSort(type) { //按照所选分类过滤，返回过滤后展示列表
|
||||
let sortData = [];
|
||||
for (let i = 0; i < this.originalGoods.length; i++) {
|
||||
if (this.originalGoods[i].category_name == type) {
|
||||
sortData.push(this.originalGoods[i]);
|
||||
}
|
||||
}
|
||||
this.goods = sortData;
|
||||
},
|
||||
|
||||
// 降序
|
||||
sortDec(prop) {
|
||||
return function(obj1, obj2) {
|
||||
var val1 = obj1[prop];
|
||||
var val2 = obj2[prop];
|
||||
if (val1 < val2) {
|
||||
return 1;
|
||||
} else if (val1 > val2) {
|
||||
return -1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 升序
|
||||
sortAsc(prop) {
|
||||
return function(obj1, obj2) {
|
||||
var val1 = obj1[prop];
|
||||
var val2 = obj2[prop];
|
||||
if (val1 < val2) {
|
||||
return -1;
|
||||
} else if (val1 > val2) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
setNav(type) { //销量，价格的点击方法，升降序
|
||||
this.handledropdown();
|
||||
this.nav = type;
|
||||
if (type == 3) {
|
||||
// 销量 默认降序
|
||||
this.typeSort1 ? this.setSort('sale', 'dec') : this.setSort('sale', 'asc');
|
||||
|
||||
this.typeSort1 = !this.typeSort1;
|
||||
} else if (type == 4) {
|
||||
// 价格 默认升序
|
||||
this.typeSort2 ? this.setSort('price', 'asc') : this.setSort('price', 'dec');
|
||||
|
||||
this.typeSort2 = !this.typeSort2;
|
||||
}
|
||||
},
|
||||
setSort(key, type) {
|
||||
this.handledropdown();
|
||||
if (key === 'sale') {
|
||||
this.nav = 3;
|
||||
this.saleSort(type);
|
||||
|
||||
this.$set(this, 'price', '');
|
||||
}
|
||||
if (key === 'price') {
|
||||
this.nav = 4;
|
||||
this.priceSort(type);
|
||||
|
||||
this.$set(this, 'sale', '');
|
||||
}
|
||||
|
||||
if (this[key] === type) {
|
||||
this.$set(this, key, '');
|
||||
} else {
|
||||
this.$set(this, key, type);
|
||||
}
|
||||
},
|
||||
// 销量排序
|
||||
saleSort(type) {
|
||||
type == 'asc' ? this.originalGoods.sort(this.sortAsc('buy_count')) : this.originalGoods.sort(this.sortDec(
|
||||
'buy_count'));
|
||||
},
|
||||
|
||||
// 价格排序
|
||||
priceSort(type) {
|
||||
type == 'asc' ? this.originalGoods.sort(this.sortAsc('price')) : this.originalGoods.sort(this.sortDec('price'));
|
||||
},
|
||||
//
|
||||
setSortType(value) {
|
||||
this.nav = 1;
|
||||
this.sortType = value;
|
||||
// 新品排序
|
||||
if (value == '新品排序') {
|
||||
this.originalGoods.sort(this.sortDec('goods_id'));
|
||||
} else {
|
||||
this.getData();
|
||||
}
|
||||
this.$refs.dropdownItem1.closePopup();
|
||||
this.$refs.dropdownItem11.closePopup()
|
||||
},
|
||||
setTags(value) {
|
||||
this.current_tag = value;
|
||||
this.$refs.dropdownItem2.closePopup();
|
||||
this.$refs.dropdownItem22.closePopup()
|
||||
|
||||
if (value === '分类') {
|
||||
this.nav = 1;
|
||||
this.reRank();
|
||||
} else {
|
||||
this.nav = 2;
|
||||
this.cateSort(value);
|
||||
}
|
||||
},
|
||||
async initCategory() { //初始化分类列表项
|
||||
let res = await getCategory();
|
||||
if(res.statusCode != 200) return ;
|
||||
console.log(res)
|
||||
let tags = res.data;
|
||||
let result = [];
|
||||
for (let i = 0; i < tags.length; i++) {
|
||||
result.push(tags[i].name);
|
||||
}
|
||||
this.tags = this.unique(result);
|
||||
},
|
||||
unique(arr) { //去重
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
for (var j = i + 1; j < arr.length; j++) {
|
||||
if (arr[i] == arr[j]) {
|
||||
//第一个等同于第二个，splice方法删除第二个
|
||||
arr.splice(j, 1);
|
||||
j--;
|
||||
}
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
reRank() { //重置列表数据
|
||||
this.goods = this.originalGoods;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #1abc9c;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.new-goods {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
height: 88rpx;
|
||||
width: 750rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
// padding-top: var(--status-bar-height);
|
||||
position: relative;
|
||||
.u-icon,
|
||||
.alifont {
|
||||
width: 40rpx;
|
||||
margin: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.head-bar {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
view {
|
||||
width: 150rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
background-color: #8DDBCB;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
view:nth-child(1) {
|
||||
border-radius: 24rpx 0 0 24rpx;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
border-radius: 0 24rpx 24rpx 0;
|
||||
}
|
||||
|
||||
.bar-active {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: calc(100% - 88rpx - var(--status-bar-height));
|
||||
.scroll-v {
|
||||
width: 750rpx;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.recommend-img {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
.index-navs {
|
||||
height: 80rpx;
|
||||
padding: 0 52rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.index-nav {
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-active {
|
||||
color: #1abc9c;
|
||||
font-weight: 700;
|
||||
|
||||
.index-nav-desc {
|
||||
color: #1abc9c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-nav-desc {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.index-nav-divider {
|
||||
height: 64rpx;
|
||||
border-left: 1px solid #dddcdf;
|
||||
}
|
||||
|
||||
.index-items {
|
||||
margin-top: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
background-color: #f7f7f7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.index-item {
|
||||
width: 346rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 18rpx 20rpx 0;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
// overflow: hidden;
|
||||
position: relative;
|
||||
&-tag{
|
||||
position: absolute;
|
||||
right: -8rpx;
|
||||
top: -7rpx;
|
||||
z-index: 1;
|
||||
width: 98rpx;
|
||||
height: 40rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
line-height: 40rpx;
|
||||
background: linear-gradient(194deg,#ff9f0e 7%, #ffbb00 92%);
|
||||
border-radius: 0 0 0 20rpx;
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 8rpx solid #D95E00;
|
||||
border-right: 8rpx solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-item-img {
|
||||
image {
|
||||
width: 346rpx;
|
||||
height: 320rpx;
|
||||
border-radius: 8rpx 8rpx 0 0 ;
|
||||
}
|
||||
}
|
||||
|
||||
.index-item-title {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
padding: 20rpx 0 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.index-item-title-desc {
|
||||
font-size: 24rpx;
|
||||
color: #c0c4cc;
|
||||
margin: 10rpx 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.index-item-price {
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
color: #ff5a10;
|
||||
padding: 20rpx 0 0 20rpx;
|
||||
}
|
||||
|
||||
.tipsMkt {
|
||||
float: right;
|
||||
color: #c0c4cc;
|
||||
text-decoration: line-through;
|
||||
margin-right: 20rpx;
|
||||
font-size:24rpx;
|
||||
line-height:40rpx;
|
||||
}
|
||||
|
||||
.index-nav-arrows {
|
||||
margin-top: 4rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.index-nav-arrow {
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.index-nav-arrow:last-child {
|
||||
margin-top: -14rpx;
|
||||
}
|
||||
|
||||
.index-nav-arrow:first-child {
|
||||
margin-bottom: -14rpx;
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
padding-left: 40rpx;
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-active {
|
||||
color: #1abc9c;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-tags {
|
||||
padding:30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dropdown-tag {
|
||||
padding: 10rpx 20rpx;
|
||||
height: 60rpx;
|
||||
margin:0 22rpx 22rpx 0;
|
||||
border-radius: 60rpx;
|
||||
background-color: #f9f9f9;
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
&-active {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ed4743;
|
||||
color: #ed4743;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #e4e1e6;
|
||||
}
|
||||
</style>
|
||||
@@ -18,7 +18,6 @@ export default {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.res);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -20,7 +20,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.res);
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -14,7 +14,7 @@ export default {
|
||||
title: "三列单行图片模块",
|
||||
props: ["res"],
|
||||
mounted() {
|
||||
console.log(this.res);
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -22,7 +22,7 @@ export default {
|
||||
title: "两张横图",
|
||||
props: ["res"],
|
||||
mounted() {
|
||||
console.log("123");
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -55,7 +55,7 @@ export default {
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleClick(item) {
|
||||
console.log(item);
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
|
||||
});
|
||||
|
||||
@@ -44,7 +44,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.res);
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
|
||||
<!-- <u-navbar :is-back="false" title="首页"></u-navbar> -->
|
||||
<div v-for="(item,index) in pageData.list" :key="index">
|
||||
<u-navbar v-if="item.type == 'search'" :is-back="false">
|
||||
<search style="width:100%" :res="item.options" />
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
},
|
||||
onLoad(option) {
|
||||
this.goods = JSON.parse(decodeURIComponent(option.goods))
|
||||
console.log(this.goods)
|
||||
|
||||
this.getList()
|
||||
},
|
||||
onReachBottom() { //触底事件，页面整个滚动使用
|
||||
|
||||
Reference in New Issue
Block a user