防抖登录,砍价优化,新增砍价记录,优化积分信息,优化组件复用。

master
lemon橪 2021-08-27 17:54:52 +08:00
parent c45a378665
commit c53af2fcc3
18 changed files with 564 additions and 62 deletions

View File

@ -0,0 +1,3 @@
## 购买组件
1.本组件是砍价,积分购买,参团等复用组
2.后续会将此组件和商品购买组件合并,文档后续再出

424
components/m-buy/goods.vue Normal file
View File

@ -0,0 +1,424 @@
<template>
<div class="wrapper">
<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode"
:mask-close-able="isClose" :mask="isMask" :border-radius="setup.radius" @close="closeMask()">
<!-- 商品 -->
<view class="goods-box bottom">
<view class="goods-header">
<view class="goods-img">
<u-image width="200rpx" border-radius="20" class="uimage" height="200rpx"
:src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
</view>
<view class="goods-skus">
<!-- 有活动商品价格 -->
<view class="goods-price " v-if="goodsDetail.promotionPrice">
<span>
<span class="goods-price-promotionShow goods-price-bigshow"
v-if="goodsDetail.promotionPrice">{{ formatPrice(goodsDetail.promotionPrice)[0] }}</span>
.{{ formatPrice(goodsDetail.promotionPrice)[1] }}
<span></span>
</span>
<div class="promotion-box">
<span class="goods-price-bigshow">{{
formatPrice(goodsDetail.price)[0]
}}</span>
.{{ formatPrice(goodsDetail.price)[1] }}
</div>
</view>
<!-- 正常商品的价格 -->
<view class="goods-price" v-else>
<span>
<span class="goods-price-bigshow">{{
formatPrice(goodsDetail.price)[0]
}}</span>
.{{ formatPrice(goodsDetail.price)[1] }}
</span>
</view>
<view class="goods-check-skus">
已选
<span class="goods-check-skus-name">
{{ selectName }}
<span>{{ num }}</span>
</span>
</view>
</view>
</view>
<!-- 商品信息 -->
<view class="goods-skus-box">
<!-- 规格 -->
<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
<view class="skus-view-list">
<view class="view-class-title">{{ spec.name }}</view>
<view :class="{ active: spec_val.value == currentSelceted[specIndex] }" class="skus-view-item"
v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
@click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}</view>
</view>
</view>
<!-- 数量 -->
<view class="goods-skus-number">
<view class="view-class-title">数量</view>
<u-number-box :bg-color="numberBox.bgColor" :color="numberBox.color" :input-width="numberBox.width"
:input-height="numberBox.height" :size="numberBox.size" :min="1" v-model="num">
</u-number-box>
</view>
</view>
<!-- 按钮 -->
<view class="btns">
<view class="box-btn card" v-if="buyType != 'PINTUAN' && goodsDetail.goodsType!='VIRTUAL_GOODS'"
@click="addToCartOrBuy('cart')">加入购物车</view>
<view class="box-btn buy" @click="addToCartOrBuy('buy')"></view>
</view>
</view>
</u-popup>
</div>
</template>
<script>
import * as API_trade from "@/api/trade.js";
import setup from "./popup";
export default {
data() {
return {
setup,
num: 1,
// rpx
numberBox: {
width: "50",
height: "50",
size: "22",
color: "#333",
bgColor: "#fff",
},
selectName: "", //
selectSkuList: "", //sku,
selectedSpecImg: "", //
buyType: "", //
parentOrder: "", // -
formatList: [],
currentSelceted: [],
skuList: "",
isMask: false, //
isClose: false, //
};
},
props: [
"goodsDetail", //
"buyMask",
"selectedSku",
"goodsSpec",
"addr",
],
watch: {
buyType: {
handler(val) {
this.buyType = val;
},
immediate: true,
},
selectSkuList: {
handler(val) {
this.$emit("changed", val);
},
deep: true,
},
},
methods: {
// 1999 --> [1999,00]
formatPrice(val) {
if (typeof val == "undefined") {
return val;
}
return val.toFixed(2).split(".");
},
closeMask() {
this.$emit("closeBuy", false);
},
/**点击规格 */
handleClickSpec(val, index, specValue) {
this.$set(this.currentSelceted, index, specValue.value);
let selectedSkuId = this.goodsSpec.find((i) => {
let matched = true;
let specValues = i.specValues.filter((j) => j.specName !== "images");
for (let n = 0; n < specValues.length; n++) {
if (specValues[n].specValue !== this.currentSelceted[n]) {
matched = false;
return;
}
}
if (matched) {
return i;
}
});
this.selectSkuList = {
spec: {
specName: val.name,
specValue: specValue.value,
},
data: this.goodsDetail,
};
this.selectName = specValue.value;
this.$emit("handleClickSku", {
skuId: selectedSkuId.skuId,
goodsId: this.goodsDetail.goodsId,
});
},
/**
* 添加到购物车或购买
*/
addToCartOrBuy(val) {
if (!this.selectSkuList) {
uni.showToast({
title: "请选择规格商品",
icon: "none",
});
return;
}
let data = {
skuId: this.goodsDetail.id,
num: this.num,
};
if (val == "cart") {
API_trade.addToCart(data).then((res) => {
if (res.data.code == 200) {
uni.showToast({
title: "商品已添加到购物车",
icon: "none",
});
this.$emit("queryCart");
this.closeMask();
}
});
} else {
//
if (this.buyType) {
data.cartType = "PINTUAN";
} else if (this.goodsDetail.goodsType == "VIRTUAL_GOODS") {
data.cartType = "VIRTUAL";
} else {
data.cartType = "BUY_NOW";
}
API_trade.addToCart(data).then((res) => {
if (res.data.code == 200) {
uni.navigateTo({
url: `/pages/order/fillorder?way=${data.cartType}&addr=${
this.addr.id || ""
}&parentOrder=${encodeURIComponent(
JSON.stringify(this.parentOrder)
)}`,
});
}
});
}
},
/**
* 直接购买
*/
buy(data) {
API_trade.addToCart(data).then((res) => {
if (res.data.success) {
uni.navigateTo({
url: `/pages/order/fillorder?way=${
data.cartType
}&addr=${""}&parentOrder=${encodeURIComponent(
JSON.stringify(this.parentOrder)
)}`,
});
}
});
},
formatSku(list) {
//
if (!Array.isArray(list)) return false;
let arr = [{}];
list.forEach((item, index) => {
item.specValues.forEach((spec, specIndex) => {
let name = spec.specName;
let values = {
value: spec.specValue,
quantity: item.quantity,
};
if (name === "images") {
return;
}
arr.forEach((arrItem, arrIndex) => {
if (
arrItem.name == name &&
arrItem.values &&
!arrItem.values.find((i) => i.value === values.value)
) {
arrItem.values.push(values);
}
let keys = arr.map((key) => {
return key.name;
});
if (!keys.includes(name)) {
arr.push({
name: name,
values: [values],
});
}
});
});
});
arr.shift();
this.formatList = arr;
list.forEach((item) => {
if (item.skuId === this.goodsDetail.id) {
item.specValues
.filter((i) => i.specName !== "images")
.forEach((value, _index) => {
this.currentSelceted[_index] = value.specValue;
this.selectName = value.specValue;
this.selectSkuList = {
spec: value,
data: this.goodsDetail,
};
});
}
});
this.skuList = list;
},
},
mounted() {
this.formatSku(this.goodsSpec);
console.log(this.goodsDetail);
},
};
</script>
<style lang="scss" scoped>
@import "./popup.scss";
.buy {
background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
}
.card {
background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
}
/deep/.u-icon-plus,
.u-icon-minus,
.u-icon-disabled {
height: 30rpx !important;
background: #fff !important;
}
.goods-skus-number {
justify-content: space-between;
display: flex;
}
/deep/ .uni-scroll-view {
overflow: hidden !important;
}
.active {
background: $price-light-color !important;
border: 2rpx solid $price-color;
font-weight: bold;
color: $price-color !important;
box-sizing: border-box;
}
.goods-skus-box {
overflow-y: auto;
height: 610rpx;
// #ifdef MP-WEIXIN
height: 570rpx;
// #endif
margin-bottom: 10rpx;
}
.goods-skus-view {
overflow: hidden;
.skus-view-list {
> .skus-view-item {
flex: 1;
padding: 0 36rpx;
overflow: hidden;
height: 60rpx;
line-height: 60rpx;
float: left;
text-align: center;
margin-left: 24rpx;
margin-bottom: 20rpx;
font-size: 22rpx;
color: #262626;
background: #f2f2f2;
border-radius: 30rpx;
}
}
}
.goods-header {
height: 200rpx;
display: flex;
align-items: center;
margin-bottom: 36rpx;
}
.goods-box {
padding: 50rpx 36rpx 0 36rpx;
}
.goods-skus {
padding: 0 20rpx;
}
.goods-price {
color: $price-color;
line-height: 80rpx;
display: flex;
}
.promotion-box {
line-height: 1;
display: flex;
align-items: center;
text-decoration: line-through;
color: #999;
margin-left: 10rpx;
/deep/ span {
font-size: 30rpx;
}
}
.promotion {
font-size: 30rpx;
}
.goods-price-promotionShow {
font-size: 48rpx;
}
.goods-check-skus {
font-size: 24rpx;
color: #999;
> .goods-check-skus-name {
margin-left: 4rpx;
}
> span {
color: #333;
}
}
</style>

View File

@ -0,0 +1,8 @@
export default {
height:"1000rpx", //弹出层高度
mode:"bottom", //弹出层位置
radius:"32", //圆角 rpx,
close:false //能否点击遮罩退出
}

View File

@ -0,0 +1,37 @@
.view-class-title {
font-size: 26rpx;
color: #262626;
font-weight: 700;
height: 80rpx;
line-height: 80rpx;
}
.confirmBtn {
width: 90%;
}
.confirmBtn,
.box-btn {
line-height: 80rpx;
height: 80rpx;
background: $price-color;
color: #fff;
border-radius: 200px;
text-align: center;
margin: 5rpx auto;
}
.btns {
display: flex;
width: 100%;
margin: 0 auto;
}
.goods-price-bigshow {
font-size: 48rpx;
font-weight: bold;
}
.box-btn {
flex: 1;
margin: 0 10rpx;
}

View File

@ -58,13 +58,6 @@ export default {
// typegoods,shop,pintuan)
props: ["thumbnail", "goodsName", "type", "goodsId", "link"],
// #ifdef MP-WEIXIN
onShareAppMessage(res) {
return {
imageUrl: this.thumbnail || require("@/static/logo.png"),
};
},
// #endif
methods: {
close() {
this.$emit("close");
@ -97,21 +90,24 @@ export default {
},
// #endif
shareTitle() {
let shareTitle;
if (this.type == "goods") {
shareTitle = `我发现了一个${this.goodsName}商品快来跟我一起看看吧`;
} else if (this.type == "shops") {
shareTitle = `我发现了一个${this.goodsName}店铺快来跟我一起看看吧`;
} else if (this.type == "pintuan") {
shareTitle = `我拼了一个${this.goodsName}快来跟我一起抢购吧!`;
} else if (this.type == "kanjia") {
shareTitle = `请快来帮我砍一刀${this.goodsName}`;
}
return shareTitle;
},
// #ifdef APP-PLUS
handleShare(val) {
console.log("12312312")
if (val.type <= 1) {
let shareTitle;
if (this.type == "goods") {
shareTitle = `我发现了一个${this.goodsName}商品快来跟我一起看看吧`;
} else if (this.type == "shops") {
shareTitle = `我发现了一个${this.goodsName}店铺快来跟我一起看看吧`;
} else if (this.type == "pintuan") {
shareTitle = `我拼了一个${this.goodsName}快来跟我一起抢购吧!`;
} else if (this.type == "kanjia") {
shareTitle = `请快来帮我砍一刀${this.goodsName}`;
}
let scene; // "WXSenceTimeline WXSceneSession "
val.type == 1
? (scene = "WXSenceTimeline")
@ -123,7 +119,7 @@ export default {
imageUrl: this.thumbnail,
type: 0,
summary: this.goodsName,
title: shareTitle,
title: this.shareTitle(),
success: function (res) {
uni.showToast({
title: "分享成功!",

View File

@ -67,7 +67,7 @@ import { getGoods } from "@/api/goods.js";
import { getPinTuanShare } from "@/api/order";
import shares from "@/components/m-share/index";
import storage from "@/utils/storage.js";
import popupGoods from "./popup/goods"; //
import popupGoods from "@/components/m-buy/goods"; //
export default {
data() {

View File

@ -80,7 +80,7 @@
<span class="ybname">{{ item.storeName }}</span>
</u-col>
</u-row>
<div class="promotionNotice">{{ item.promotionNotice }}</div>
<div class="promotionNotice">{{ item.promotionNotice || '' }}</div>
<u-row class="goodsBorder" v-for="(val, i) in item.skuList" :key="i">
<u-col class="tabL" :offset="0"
@click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" :span="3">

View File

@ -505,6 +505,9 @@ page,
.swiper-box {
height: calc(100vh - 40px);
// #ifdef H5
height: calc(100vh - 40px - 44px);
// #endif
}
.list-scroll-content {

View File

@ -134,11 +134,10 @@ export default {
getUserInfo().then((user) => {
storage.setUserInfo(user.data.result);
storage.setHasLogin(true);
setTimeout(() => {
uni.navigateBack({
delta: 1,
});
}, 500);
uni.navigateBack({
delta: 1,
});
});
});
},
@ -228,7 +227,6 @@ text.shop {
background: #fff !important;
}
.btn-auth {
width: 92%;
margin: 0 auto 40rpx;

View File

@ -81,7 +81,7 @@ page {
align-items: center;
}
.-goods-price {
flex: 8;
flex: 7;
color: $price-color;
font-size: 32rpx;
line-height: 1;

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<u-navbar :custom-back="back" back-icon-color="#fff" :background="background" :border-bottom="false" title="">
<u-navbar :custom-back="back" back-icon-color="#fff" :background="background" :border-bottom="false">
</u-navbar>
<div class="wrapper">
@ -36,12 +36,15 @@
</div>
</div>
<!-- 参与砍价 -->
<div class="bargaining" v-if="!activityData.pass" @click="shareBargain">
<div class="bargaining" v-if="!activityData.pass && activityData.status!='END'" @click="shareBargain">
邀请砍价
</div>
<!-- 立即购买 -->
<div class="buy" v-else @click="getGoodsDetail">
立即购买
<div v-else>
<div v-if="activityData.status!='END'" class="buy" @click="getGoodsDetail">
立即购买
</div>
</div>
<!-- 我要开团 -->
<div class="start" v-if="activityData.memberId != $options.filters.isLogin().id" @click="startOpenGroup">
@ -89,18 +92,17 @@
<u-modal :show-title="false" v-model="helpBargainFlage" :show-confirm-button="false">
<view class="help-bargain" @click="handleClickHelpBargain">
<u-image width="100%" height="600rpx" src="/pages/promotion/static/bargain.jpeg"></u-image>
<u-image width="100%" height="600rpx"
src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/91631d5a66c7426bbe3f7d644ee41946.jpeg"></u-image>
<u-image class="help" width="300rpx" height="80rpx" src="/pages/promotion/static/help-bargain.png"></u-image>
</view>
</u-modal>
<!-- 分享 -->
<shares @close="closeShare"
:link="'/pages/promotion/bargain/detail?id='+routerVal.id+'&activityId='+activityData.id" type="kanjia"
:thumbnail="bargainDetail.thumbnail" :goodsName="bargainDetail.goodsName" v-if="shareFlage " />
<shares @close="closeShare" :link="share()" type="kanjia" :thumbnail="bargainDetail.thumbnail"
:goodsName="bargainDetail.goodsName" v-if="shareFlage " />
<!-- 购买 -->
<popupGoods ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="bargainDetail"
:goodsSpec="goodsSpec" v-if="bargainDetail.id " @handleClickSku="getGoodsDetail" />
@ -113,7 +115,7 @@
</template>
<script>
import popupGoods from "@/pages/cart/payment/popup/goods"; //
import popupGoods from "@/components/m-buy/goods"; //
import {
getBargainDetail,
getBargainActivity,
@ -121,7 +123,6 @@ import {
getBargainLog,
helpBargain,
} from "@/api/promotions";
import { getGoods } from "@/api/goods.js";
import shares from "@/components/m-share/index";
export default {
components: {
@ -171,6 +172,17 @@ export default {
this.params.kanjiaActivityId = options.activityId;
}
},
// #ifdef MP-WEIXIN
onShareAppMessage(res) {
return {
path: this.share(),
title: `请快来帮我砍一刀${this.bargainDetail.goodsName}`,
imageUrl: this.thumbnail || require("@/static/logo.png"),
};
},
// #endif
onShow() {
this.init();
},
@ -209,6 +221,14 @@ export default {
},
},
methods: {
share() {
return (
"/pages/promotion/bargain/detail?id=" +
this.routerVal.id +
"&activityId=" +
this.activityData.id
);
},
//
back() {
//
@ -220,7 +240,7 @@ export default {
});
}
},
//
startOpenGroup() {
uni.redirectTo({
@ -332,7 +352,7 @@ page {
padding: 10rpx 0;
}
.wrapper {
background: url("../static/Bargaining.png");
background: url("https://lilishop-oss.oss-cn-beijing.aliyuncs.com/aac88f4e8eff452a8010af42c4560b04.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 700rpx;

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<u-navbar :custom-back="back" back-icon-color="#fff" :background="background" :border-bottom="false" title="">
<u-navbar :custom-back="back" back-icon-color="#fff" :background="background" :border-bottom="false" >
</u-navbar>
<div class="wrapper">
<!-- 砍价列表 -->
@ -59,7 +59,7 @@ export default {
//
back() {
uni.switchTab({
url:"/pages/tabbar/home/index"
url: "/pages/tabbar/home/index",
});
},
/**
@ -88,7 +88,7 @@ page {
</style>
<style lang="scss" scoped>
.wrapper {
background: url("../static/Bargaining.png");
background: url("https://lilishop-oss.oss-cn-beijing.aliyuncs.com/aac88f4e8eff452a8010af42c4560b04.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 700rpx;

View File

@ -3,7 +3,7 @@
<div v-if="bargainLog.length != 0">
<div v-for="(item,index) in bargainLog" class="flex" :key="index">
<div>
<u-image width='250' height="250" :src="item.thumbnail"></u-image>
<u-image border-radius="20" width='230' height="230" :src="item.thumbnail"></u-image>
</div>
<div class="goods">
<div class="wes-2">
@ -113,6 +113,7 @@ page {
color: $light-color;
}
.goods {
margin: 0 20rpx;
display: flex;
flex: 2;
flex-direction: column;

View File

@ -51,7 +51,7 @@
</template>
<script>
import popupGoods from "@/pages/cart/payment/popup/goods"; //
import popupGoods from "@/components/m-buy/goods"; //
import { getPointsGoodsDetail } from "@/api/promotions";
export default {
components: {

View File

@ -2,7 +2,8 @@
<div class="user-point">
<!-- <div class="point-rule">积分规则</div> -->
<div class="point-wrapper">
<u-image shape="circle" :lazy-load="true" width="100" height="100" :src="userInfo.face || '/static/missing-face.png'"></u-image>
<u-image shape="circle" :lazy-load="true" width="100" height="100"
:src="userInfo.face || '/static/missing-face.png'"></u-image>
<div class="whether-point">
<div>你的可用积分<span class="point">{{userInfo.point || 0}}</span></div>
</div>
@ -10,18 +11,22 @@
</div>
</template>
<script>
import { getUserInfo } from "@/api/members";
export default {
data() {
return {
userInfo: this.$options.filters.isLogin() || {},
userInfo: {},
};
},
mounted (){
this.init()
mounted() {
this.init();
},
methods: {
init() {
async init() {
let res = await getUserInfo();
if (res.data.success) {
this.userInfo = res.data.result;
}
},
},
};
@ -33,8 +38,8 @@ export default {
background: url("/static/point-bg.png") no-repeat;
background-size: 100%;
}
.point{
font-size: 40rpx;
.point {
font-size: 40rpx;
}
.point-rule {
color: #fff;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

View File

@ -4,7 +4,7 @@ import storage from "@/utils/storage.js";
import { md5 } from "@/utils/md5.js";
import Foundation from "@/utils/Foundation.js";
import api from "@/config/api.js";
import debounce from "@/uview-ui/libs/function/debounce.js";
import uuid from "@/utils/uuid.modified.js";
/**
@ -77,16 +77,22 @@ function cleanStorage() {
storage.setUuid("");
storage.setUserInfo({});
// 防抖处理跳转
// #ifdef MP-WEIXIN
uni.navigateTo({
url: "/pages/passport/wechatMPLogin",
});
debounce(() => {
console.log("防抖");
uni.navigateTo({
url: "/pages/passport/wechatMPLogin",
});
}, 1000);
// #endif
// #ifndef MP-WEIXIN
uni.navigateTo({
url: "/pages/passport/login",
});
debounce(() => {
uni.navigateTo({
url: "/pages/passport/login",
});
}, 1000);
// #endif
}
@ -211,6 +217,7 @@ http.interceptors.response.use(
response.data.code === 403
) {
cleanStorage();
// 如果当前状态码为正常但是success为不正常时
} else if (
(response.statusCode == 200 && !response.data.success) ||