Skip to content

G
group-buy-ui
Commit ad8bbe65 authored by beisir's avatar beisir
Browse files
Options

feat:列表页头像轮播修改

parents 8818c350 b603184d
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 57 deletions
package.json
View file @ ad8bbe65
{
"name": "vcc-spider-center-ui",
"name": "group-buy-ui",
"version": "1.0.0",
"private": true,
"scripts": {
......
src/components/avatorGroup.vue
View file @ ad8bbe65
<template>
<div class="avator-group">
<div v-for="(item, index) in avators" :key="index" class="avator-item" :style="widthStyle">
<cr-image width="44px" :src="item" />
<cr-image :class="{ avator: index == 0 }" width="44px" :src="item" />
<div v-if="index == 0" class="is-leader">
<cr-image width="48px" src="@/assets/images/leader.png" />
</div>
......@@ -68,6 +68,12 @@ export default {
width: 20%;
height: 44px;
margin-top: @padding-lg;
.avator {
border: 2px solid #ffd93d;
// border: px solid rgba(255, 212, 0, 0.24);
border-radius: 50%;
box-sizing: border-box;
}
.is-new {
position: absolute;
top: 0;
......
src/components/bottomNav.vue
View file @ ad8bbe65
<template>
<div>
<div class="goods-bottom-container">
<div v-if="showGroupDesc" class="group-desc">
<cr-image width="14px" src="@/assets/images/groupIcon.png" />
<span class="red-text">[正在拼团]</span>
<span class="normal-text">拼团成功即可退款0元拿，拼团失败立即退款</span>
</div>
<div v-if="type === 'shoppingCar'" class="goods-bottom">
<div class="goods-bottom-icon" @click="goHome">
<span class="iconfont icon-home" />
......@@ -30,6 +35,10 @@
export default {
name: 'BottomNav',
props: {
showGroupDesc: {
type: Boolean,
default: true
},
type: {
type: String,
default: 'shopCar' // shoppingCar 购物车；settlement 结算;submitOrder 确认订单
......@@ -66,10 +75,29 @@ export default {
};
</script>
<style lang="less" scoped>
.goods-bottom {
.goods-bottom-container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
.group-desc {
display: flex;
align-items: center;
width: 100%;
height: 30px;
background: @white;
padding: 0 @padding-xs;
.text-12();
.red-text {
margin: 0 @padding-unit;
color: @red;
}
.normal-text {
color: @black;
}
}
}
.goods-bottom {
display: flex;
justify-content: space-evenly;
align-items: center;
......@@ -77,7 +105,7 @@ export default {
height: 30px;
padding: 10px 0;
background: @white;
border-top: 2px solid #f7f7f7;
border-top: 1px solid #f7f7f7;
&-radio {
display: flex;
align-items: center;
......
src/service/validation.service.js
View file @ ad8bbe65
......@@ -285,6 +285,9 @@ const ua = window.navigator.userAgent.toLowerCase();
// 判断微信环境
export const isWechat = ua.match(/MicroMessenger/i) == "micromessenger";
// 判断小程序
export const isWxMp = ua.match(/miniProgram/i) == 'miniprogram';
// 判断羊小咩（信用钱包）环境
export const isApp= ua.match(/xyqb/i) == "xyqb";
......
src/views/goodsDetail/index.vue
View file @ ad8bbe65
......@@ -139,7 +139,7 @@
</div>
</div>
<div class="goods-area-button">
<button class="goods-bottom-buy" @click="toOrder">立即购买</button>
<button class="goods-bottom-buy" @click="toOrder">确认</button>
</div>
</div>
<div v-if="currentPopupType === 'area'" class="goods-area">
......@@ -158,9 +158,9 @@
</div>
</div>
<span v-else class="goods-area-none">暂未添加地址哦～</span>
<!-- <div class="goods-area-button" @click="addAddress"> -->
<!-- <button class="goods-bottom-buy btn-absolute">添加新地址</button> -->
<!-- </div> -->
<div class="goods-area-button" @click="addAddress">
<button class="goods-bottom-buy btn-absolute">添加新地址</button>
</div>
</div>
</cr-popup>
<bottom-nav type="shoppingCar" :disabled="false" @buy="goVccOrDetail" />
......@@ -283,7 +283,15 @@ export default {
if (res.stock === 0) {
this.detailInfo.limitCount = 1;
this.detailInfo.activityLimitCount = 0;
this.$toast('库存不足！');
this.$dialog({
message: '哎呀，活动太火爆，该商品已经卖光，换一个商品试试吧！',
title: '',
showCancelButton: false,
confirmButtonText: '查看其他商品',
onConfirm: () => {
this.$router.push({ name: 'groupBuyList' });
}
});
}
this.selectedAddress = res.receiverInfo || {};
this.specList = res.skuAtts || [];
......@@ -312,19 +320,18 @@ export default {
if (addressInfo) {
this.addressList = (addressInfo && addressInfo.addrReceiverList) || [];
this.show = true;
} else {
this.addAddress();
}
},
addAddress() {
if (!this.hasLogin) {
this.$router.push({ name: 'login' });
return;
}
// else {
// this.addAddress();
// }
this.show = false;
this.$router.push({ name: 'addressManage' });
},
// addAddress() {
// if (!this.hasLogin) {
// this.$router.push({ name: 'login' });
// return;
// }
// this.show = false;
// this.$router.push({ name: 'addressManage' });
// },
toOrder() {
if (!this.hasLogin) {
this.$router.push({ name: 'login' });
......@@ -335,6 +342,7 @@ export default {
return;
}
this.show = false;
console.log(this.selectedAddress);
const order = {
addrReceiverId: this.selectedAddress.addrReceiverId || '',
selectedSkuList: [
......@@ -350,8 +358,9 @@ export default {
defaultUseActivityCoupon: true,
couponActivityUseIdList: []
};
window.localStorage.setItem('orderData', order);
window.localStorage.setItem('orderData', JSON.stringify(order));
window.localStorage.removeItem('addressList');
this.$router.push({ name: 'createOrder' });
},
changeAddress(address) {
// 选取规格需要清空，init会重新赋值
......@@ -430,12 +439,6 @@ export default {
case 'area':
this.areaPopup();
break;
case 'coupon':
this.show = true;
break;
case 'service':
this.show = true;
break;
default:
break;
}
......
src/views/goodsDetail/smallPic.less
View file @ ad8bbe65
......@@ -45,24 +45,15 @@
.goods {
&-red-bg{ // 用于小图详情页
width: 100%;
height: 270px;
overflow: hidden;
position: absolute;
left: 0;
position: fixed;
left: -5%;
top: 0;
z-index: -1;
&::after{
position: absolute;
left: -5%;
top: 0;
z-index: -1;
content: '';
width: 110%;
height: 270px;
border-radius: 0 0 10% 10%; //左上角，右上角，右下角，左下角
background-image: linear-gradient(269deg, #FF5D00 12%, #FF1900 86%);
}
content: '';
width: 110%;
height: 270px;
border-radius: 0 0 10% 10%; //左上角，右上角，右下角，左下角
background: linear-gradient(269deg, #FF5D00 12%, #FF1900 86%);
}
&-group-buy-head-content{
height: 64px;
......@@ -87,19 +78,10 @@
box-sizing: border-box;
font-size: 16px;
padding: 0 @padding-sd 60px;
&-lose {
&-container {
background: #fff;
padding: 45px 15px;
text-align: center;
img {
width: 150px;
}
}
}
}
// 头像组、团购规则等
&-product-info{
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: center;
......@@ -110,6 +92,20 @@
margin-bottom: @padding-sm;
padding: @padding-sm @padding-xs;
box-sizing: border-box;
&-tag{
position: absolute;
z-index: 2;
top: 0;
left: 0;
font-size: @font-size-12;
color: @white;
width: 45px;
height: 18px;
line-height: 18px;
text-align: center;
background-color: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
border-radius: 6px 0 6px 0;
}
&-img{
width: 108px;
height: 108px;
......
src/views/goodsDetail/smallPic.vue
View file @ ad8bbe65
......@@ -11,6 +11,7 @@
</div>
<div class="goods-product-info">
<div class="goods-product-info-img">
<span class="goods-product-info-tag">3人团</span>
<cr-image width="108px" :src="imgList[0]" />
</div>
<div class="goods-product-info-desc">
......
src/views/order/components/feeInfo.vue
View file @ ad8bbe65
......@@ -10,7 +10,7 @@
<span>¥{{ calcFeeInfo.totalFreightFee || '0.00' }}</span>
</div>
</div>
<div class="coupon">
<div v-if="showCoupon" class="coupon">
<div
v-for="(item, idx) in couponActivityInfoList"
:key="idx"
......@@ -55,6 +55,11 @@ import { DISCOUNT, FREIGHT, CASH, REDUCTION, HAS_DISCOUNT, TITLE_LIST } from '@/
export default {
name: 'CouponInfo',
props: {
showCoupon: {
// 团购订单隐藏优惠信息
type: Boolean,
default: false
},
couponActivityInfoList: {
type: Array,
default: () => []
......@@ -90,7 +95,12 @@ export default {
.mg-bottom-20 {
margin-bottom: @padding-lg;
}
.goods,
.goods {
background: @white;
padding: 0 @padding-xs;
border-radius: @border-radius-md;
margin-bottom: @padding-sm;
}
.coupon {
background: @white;
padding: @padding-sm @padding-xs;
......@@ -102,6 +112,8 @@ export default {
display: flex;
justify-content: flex-end;
align-items: center;
line-height: 36px;
height: 36px;
span {
.text-13();
&:first-child {
......
src/views/order/createOrder.vue
View file @ ad8bbe65
......@@ -135,6 +135,7 @@ export default {
},
// 选择完地址后触发更新
handleAddressChange(e) {
console.log(e);
if (e.noAddr) {
this.$set(this.orderData, 'addrReceiverId', '');
this.getConfirmOrderInfo();
......@@ -232,6 +233,88 @@ export default {
// 获取确认订单信息
async getConfirmOrderInfo() {
const [data] = await order.confirmOrder(this.orderData);
// const data = {
// addrReceiverInfo: {
// addrReceiverId: 682,
// receiverName: 'ndjnn',
// addrFullName: '北京，石景山区，八角街道，nsnn',
// receiverPhoneNo: '18511117191'
// },
// invalidSkuList: [
// {
// skuName: '[自营]Apple AirPods Pro 主动降噪无线蓝牙耳机 适用iPhone/iPad/Apple Watch',
// tagList: [],
// skuImg:
// 'http://img30.360buyimg.com/sku/jfs/t1/59411/33/15646/64951/5dd50baaE81702116/413160a74742f504.jpg',
// marketPrice: '1760.66',
// skuSource: 1,
// invalidStatus: 0,
// salePrice: '1599',
// count: 1,
// canAdd: true,
// invalidStatusDesc: '该地址暂无库存',
// skuId: 3732897275393,
// jumpUrl: 'xyqb://homepage/goodsdetail?skuNo=3732897275393'
// }
// ],
// shopSkuList: [
// {
// freightFee: '12.00运费',
// shopInfo: {
// shopId: 12,
// shopName: '店铺名称',
// shopImg: 'https://'
// },
// skuList: [
// {
// marketPrice: '35.60',
// invalidStatus: 0,
// salePrice: '34.4',
// count: 1,
// canAdd: true,
// invalidStatusDesc: '宝贝已失效，不能购买',
// jumpUrl: 'xyqb://homepage/goodsdetail?skuNo=7331961',
// skuName:
// '[别下单-开普勒]美加净 MAXAM 细嫩柔白隔离防晒乳100mlSPF30 PA+++ （面部身体户外鲜果防晒霜男女)',
// tagList: [],
// skuImg:
// 'http://img11.360buyimg.com/n1/jfs/t21367/129/509809607/84163/17b4ed2e/5b0f8bdfNba3c4b43.jpg',
// skuSource: 2,
// skuAttr: '【防晒】细嫩柔白100ml',
// skuId: 7331961,
// goodsTypeImage: 'https://kdspstatic.q-gp.com/kdsp/goods/icon/best-selected3x.png'
// }
// ]
// }
// ],
// calcFeeInfo: {
// couponFee: '0.00',
// totalFreightFee: '10.00',
// totalPayFee: '10.00',
// couponFreightFee: '0.00',
// totalSkuFee: '10.00'
// },
// hasNext: false,
// couponActivityInfoList: [
// {
// hasCouponActivity: 1,
// couponActivityType: 4
// },
// {
// hasCouponActivity: 1,
// couponActivityType: 3
// },
// {
// hasCouponActivity: 1,
// couponActivityType: 2
// },
// {
// hasCouponActivity: 1,
// couponActivityType: 1
// }
// ]
// };
if (data) {
const {
addrReceiverInfo,
......@@ -263,7 +346,12 @@ export default {
async handleBuy() {
if (!this.orderInfo.addrReceiverInfo?.addrReceiverId) {
this.$dialog({
message: '请选择地址信息'
message: '你还没有选择收货地址哦！',
showCancelButton: false,
confirmButtonText: '去添加',
onConfirm: () => {
this.handleToAddress();
}
});
return;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment