msb-mca
/
shop-app
2.1k
2
Code Issues Pull Requests Projects Releases Wiki Activity

修改一些全局样式影响到的文字颜色, 商品选择默认禁用状态

Browse Source
msb_beta
ch 3 years ago
parent 43addf3541
commit e25c2b9930
10 changed files with 212 additions and 63 deletions
Show Stats Download Patch File Download Diff File

8
common/api/goods.js
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-02 09:54:53 * @Date: 2022-04-02 09:54:53
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-07 15:06:26 * @LastEditTime: 2022-04-09 15:28:08
* @Description: file content * @Description: file content
*/ */
import {ToAsyncAwait, MsbRequest} from '@/common/utils'; import {ToAsyncAwait, MsbRequest} from '@/common/utils';
@ -14,6 +14,12 @@ const BASE_URL = '/mall/product';
*/ */
export const ApiGetGoodsList = (params) => export const ApiGetGoodsList = (params) =>
ToAsyncAwait(MsbRequest.get(`${BASE_URL}/app/product/page`, params)); ToAsyncAwait(MsbRequest.get(`${BASE_URL}/app/product/page`, params));
/**
* 获取推荐商品
* @param {*} params
*/
export const ApiGetRecommendedGoodsList = (params) =>
ToAsyncAwait(MsbRequest.get(`${BASE_URL}/app/product/recommended`, params));
/** /**
* 获取商品详情 * 获取商品详情
* @param {*} params * @param {*} params

6
pages/account/index.vue
Unescape View File

@ -3,7 +3,7 @@
components: { UiCell },: ch components: { UiCell },: ch
* @Date: 2019-08-22 19:41:20 * @Date: 2019-08-22 19:41:20
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-09 15:03:35 * @LastEditTime: 2022-04-11 10:44:18
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -122,8 +122,8 @@ page{
margin-right: 30rpx; margin-right: 30rpx;
} }
.order{ .order{
width: 630rpx; width: 690rpx;
height: 200rpx; height: 260rpx;
background: $color-grey0; background: $color-grey0;
border-radius: 16rpx; border-radius: 16rpx;
margin: 40rpx auto; margin: 40rpx auto;

4
pages/cart/components/PageCtx.vue
Unescape View File

@ -537,8 +537,10 @@ export default {
height: 72rpx; height: 72rpx;
line-height: 72rpx; line-height: 72rpx;
text-align: center; text-align: center;
color: $color-grey0;
border-radius: 50rpx; border-radius: 50rpx;
text{
color: $color-grey0;
}
} }
// 立即购买按钮 // 立即购买按钮

6
pages/goods/category.vue
Unescape View File

@ -2,7 +2,7 @@
<view class="container"> <view class="container">
<!-- 搜索框 --> <!-- 搜索框 -->
<UiPageHeader :back="false" class="search"> <UiPageHeader :back="false" class="search">
<u--input slot="custom" class="search--input" prefixIconStyle="font-size:48rpx;color:$color-grey3" <u--input slot="custom" class="search--input" prefixIconStyle="font-size:48rpx;color:#ccc"
prefixIcon="search" placeholderClass="search--input__placeholder" clearable prefixIcon="search" placeholderClass="search--input__placeholder" clearable
placeholder="请输入您想要搜索的商品名称" placeholder="请输入您想要搜索的商品名称"
@focus="$Router.push('/search')"/> @focus="$Router.push('/search')"/>
@ -111,7 +111,7 @@ export default {
}, },
}; };
</script> </script>
<style> <style lang="scss">
page { page {
background: $color-grey0; background: $color-grey0;
} }
@ -134,7 +134,7 @@ page {
.cate-content { .cate-content {
background: $color-grey0; background: $color-grey0;
height: calc(100vh - 220rpx); height: calc(100vh - 180rpx);
display: flex; display: flex;
} }

9
pages/goods/detail/components/SkuPopup.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-24 11:30:55 * @Date: 2022-03-24 11:30:55
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-09 15:10:11 * @LastEditTime: 2022-04-11 10:37:46
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -131,10 +131,11 @@ export default {
*/ */
setDefaultAttr(){ setDefaultAttr(){
const curSku = this.skuInfo.find(i => i.stock > 0); const curSku = this.skuInfo.find(i => i.stock > 0);
this.attributeGroupList.forEach(item => { this.attributeGroupList.forEach((item, index) => {
for(let i of item.attributes){ for(let i of item.attributes){
if(curSku.attributeSymbolList.includes(i.symbol)){ if(curSku.attributeSymbolList.includes(i.symbol)){
this.$set(i,'active', true); this.$set(i,'active', true);
this.setDisabledItem(i, index);
break; break;
} }
} }
@ -159,6 +160,10 @@ export default {
}); });
// 设置当前点击选项选中 // 设置当前点击选项选中
this.$set(item,'active', true); this.$set(item,'active', true);
this.setDisabledItem(item, groupIndex);
},
setDisabledItem(item, groupIndex){
// 找到有效SKU的symbol 有效定义：包含当前选项属性,且库存大于0的所有SKU， // 找到有效SKU的symbol 有效定义：包含当前选项属性,且库存大于0的所有SKU，
const symbols = this.skuInfo.filter(i => i.attributeSymbolList.includes(item.symbol) && i.stock > 0) const symbols = this.skuInfo.filter(i => i.attributeSymbolList.includes(item.symbol) && i.stock > 0)
.map(i => i.attributeSymbolList).join(','); .map(i => i.attributeSymbolList).join(',');

8
pages/goods/detail/index.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-23 17:27:21 * @Date: 2022-03-23 17:27:21
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-09 15:09:59 * @LastEditTime: 2022-04-11 10:22:17
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -136,13 +136,17 @@ page{
} }
} }
.pirce{ .pirce{
text{
color: $color-yellow3; color: $color-yellow3;
font-size: $font-size-base; font-size: $font-size-base;
&--max{ &.pirce--max{
font-size: 52rpx; font-size: 52rpx;
margin: 0 10rpx 24rpx 0; margin: 0 10rpx 24rpx 0;
} }
} }
}
.select{ .select{
margin: 20rpx 30rpx; margin: 20rpx 30rpx;
background: $color-grey0; background: $color-grey0;

6
pages/index/components/Banner.vue
Unescape View File

@ -2,12 +2,12 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-23 10:31:12 * @Date: 2022-03-23 10:31:12
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-09 14:22:44 * @LastEditTime: 2022-04-09 15:35:25
* @Description: file content * @Description: file content
--> -->
<template> <template>
<view class="banner"> <view class="banner">
<u-swiper keyName="img" :list="bannerList" height="240rpx" indicator indicatorMode="dot"> <u-swiper keyName="img" :list="data" height="240rpx" indicator indicatorMode="dot">
</u-swiper> </u-swiper>
<view class="desc"> <view class="desc">
@ -38,7 +38,7 @@ export default {
} }
}, },
props:{ props:{
bannerList : { data : {
type : Array, type : Array,
default : [] default : []
} }

96
pages/index/components/Pick.vue
Unescape View File

@ -2,19 +2,62 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-23 10:29:07 * @Date: 2022-03-23 10:29:07
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-09 15:03:51 * @LastEditTime: 2022-04-09 17:18:09
* @Description: file content * @Description: file content
--> -->
<template> <template>
<view class="pick"> <view class="pick">
<view class="pick-max"> <view class="max">
<view class="title">{{data[0].name}}</view>
<view class="desc">{{data[0].name}}</view>
<!-- <view class="tag"></view> -->
<view class="price">￥{{data[0].startingPrice}}</view>
<view class="img-box">
<image class="img" :src="data[0].mainPicture"/>
</view>
</view>
<view class="min">
<view class="title">{{data[1].name}}</view>
<view class="min--info-box">
<view class="min--info-box-right">
<view class="desc">{{data[1].name}}</view>
<!-- <view class="tag"></view> -->
<view class="price">￥{{data[1].startingPrice}}</view>
</view>
<view class="img-box">
<image class="img" :src="data[1].mainPicture"/>
</view>
</view>
</view>
<view class="min">
<view class="title">{{data[2].name}}</view>
<view class="min--info-box">
<view class="min--info-box-right">
<view class="desc">{{data[2].name}}</view>
<view class="tag"></view>
<view class="price">￥{{data[2].startingPrice}}</view>
</view>
<view class="img-box">
<image class="img" :src="data[2].mainPicture"/>
</view>
</view>
</view> </view>
<view class="pick-min"></view>
<view class="pick-min"></view>
</view> </view>
</template> </template>
<script>
export default {
data(){
return{}
},
props:{
data : {
type : Array,
default : []
}
}
}
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.pick{ .pick{
@ -23,17 +66,56 @@
display: flex; display: flex;
flex-flow: column wrap; flex-flow: column wrap;
justify-content: space-between; justify-content: space-between;
&-max{ .title,.desc{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 10rpx 20rpx;
}
.title{
margin-top: 20rpx;
}
.desc{
color: $color-grey4;
font-size: 22rpx;
}
.price{
margin: 24rpx 0 10rpx 20rpx;
color: $color-yellow4;
}
}
.max{
width: 335rpx; width: 335rpx;
height: 450rpx; height: 450rpx;
background: $color-grey0; background: $color-grey0;
border-radius: 8rpx; border-radius: 8rpx;
.img-box{
display: flex;
justify-content: end;
} }
&-min{ .img{
width: 260rpx;
height: 260rpx;
}
}
.min{
width: 335rpx; width: 335rpx;
height: 215rpx; height: 215rpx;
background: $color-grey0; background: $color-grey0;
border-radius: 8rpx; border-radius: 8rpx;
&--info-box{
display: flex;
justify-content: space-between;
}
&--info-box-right{
width: 180rpx;
}
.img{
width: 160rpx;
height: 160rpx;
} }
} }
</style> </style>

76
pages/index/components/Sekill.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-23 10:07:48 * @Date: 2022-03-23 10:07:48
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-09 15:03:52 * @LastEditTime: 2022-04-09 17:46:32
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -21,23 +21,55 @@
<image class="sekill-title--more-icon" src="@/static/common/arrow.png"></image> <image class="sekill-title--more-icon" src="@/static/common/arrow.png"></image>
</view> </view>
</view> </view>
<view class="sekill--group">
<view>
<image class="sekill--item-img"></image>
<view class="sekill--item-pirce-box">
<text class="sekill--item-pirce-title">秒杀价</text>
<text class="sekill--item-pirce">￥29</text>
</view>
<text class="sekill--item-original-pirce">￥50</text>
</view>
<view>
<image class="sekill--item-img"></image>
<view class="sekill--item-pirce-box">
<text class="sekill--item-pirce-title">秒杀价</text>
<text class="sekill--item-pirce">￥29</text>
</view>
<text class="sekill--item-original-pirce">￥50</text>
</view>
<view>
<image class="sekill--item-img"></image>
<view class="sekill--item-pirce-box">
<text class="sekill--item-pirce-title">秒杀价</text>
<text class="sekill--item-pirce">￥29</text>
</view>
<text class="sekill--item-original-pirce">￥50</text>
</view>
</view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
props : {
data : {
type : Array,
default : []
}
},
computed:{}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.sekill{ .sekill{
height: 384rpx; height: 424rpx;
width: 690rpx; width: 690rpx;
margin: 0 auto; margin: 0 auto;
padding: 30rpx; padding: 30rpx;
background: $color-grey0; background: #fff;
border-radius: 20rpx; border-radius: 20rpx;
&-title{ &-title{
height: 38rpx; height: 36rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -53,23 +85,23 @@ export default {
line-height: 36rpx; line-height: 36rpx;
border-radius: 18rpx; border-radius: 18rpx;
margin-left: 36rpx; margin-left: 36rpx;
background: $color-yellow0; background: #FFEDE9;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
} }
&--time-name{ &--time-name{
height: 100%; height: 100%;
padding: 0 22rpx 0 15rpx; padding: 0 22rpx 0 15rpx;
background: $color-yellow4; background: #FF512B;
font-size: 22rpx; font-size: 22rpx;
color: $color-grey0; color: #fff;
position: relative; position: relative;
&::after{ &::after{
display: block; display: block;
content: ''; content: '';
width: 16rpx; width: 16rpx;
height: 36rpx; height: 36rpx;
background: $color-yellow4; background: #FF512B;
transform: rotate(40deg); transform: rotate(40deg);
position: absolute; position: absolute;
right: -10rpx; right: -10rpx;
@ -80,14 +112,14 @@ export default {
&--time-time{ &--time-time{
margin-right: 15rpx; margin-right: 15rpx;
font-size: 22rpx; font-size: 22rpx;
color: $color-yellow4; color: #FF512B;
position: relative; position: relative;
&::before{ &::before{
display: block; display: block;
content: ''; content: '';
width: 14rpx; width: 14rpx;
height: 36rpx; height: 36rpx;
background: $color-yellow0; background: #FFEDE9;
transform: rotate(40deg); transform: rotate(40deg);
position: absolute; position: absolute;
left: -52rpx; left: -52rpx;
@ -103,8 +135,8 @@ export default {
} }
&--more{ &--more{
display: inline-block; display: inline-block;
font-size: $font-size-sm; font-size: 24rpx;
color: $color-grey4; color: #999;
} }
&--more-icon{ &--more-icon{
width: 10rpx; width: 10rpx;
@ -122,27 +154,29 @@ export default {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 200rpx;
border-radius: 8rpx; border-radius: 8rpx;
background: color-grey0-grey; background: #F8F8F8;
} }
&-pirce-box{ &-pirce-box{
width: 140rpx; width: 180rpx;
height: 44rpx; height: 44rpx;
line-height: 44rpx; line-height: 44rpx;
background: linear-gradient(90deg, #FFE7DE 0%, $color-grey0 100%); background: linear-gradient(90deg, #FFE7DE 0%, #FFFFFF 100%);
border-radius: 20rpx; border-radius: 20rpx;
padding-left:20rpx;
margin: 20rpx 0 10rpx 0;
}
&-pirce-title{
font-size: 22rpx; font-size: 22rpx;
color: $color-grey5; color: $color-grey5;
padding: 0 20rpx;
margin: 20rpx 0;
} }
&-pirce{ &-pirce{
color: $color-yellow4; color: #FF512B;
font-size: $font-size-lg; font-size: 32rpx;
} }
&-original-pirce{ &-original-pirce{
display: block; display: block;
font-size: 22rpx; font-size: 22rpx;
color: $color-grey4; color: #999;
text-decoration: line-through; text-decoration: line-through;
text-align: center; text-align: center;

26
pages/index/index.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2019-08-22 19:41:20 * @Date: 2019-08-22 19:41:20
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-09 14:46:42 * @LastEditTime: 2022-04-09 17:02:23
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -19,7 +19,7 @@
<view class="search" @click="$Router.push('/search')"> <view class="search" @click="$Router.push('/search')">
<text class="search--input">请输入您想搜索的商品名称</text> <text class="search--input">请输入您想搜索的商品名称</text>
</view> </view>
<Banner :bannerList="bannerList"></Banner> <Banner :data="bannerList"></Banner>
<view class="category"> <view class="category">
<view class="category--item" v-for="item in categoryList" :key="item.id" <view class="category--item" v-for="item in categoryList" :key="item.id"
@ -33,7 +33,7 @@
<Sekill></Sekill> <Sekill></Sekill>
<view class="title">甄选推荐</view> <view class="title">甄选推荐</view>
<Pick></Pick> <Pick :data="recommendedGoodsList"></Pick>
<view class="title">为您推荐</view> <view class="title">为您推荐</view>
<BsChoiceGoods ref="goodsGroup" ></BsChoiceGoods> <BsChoiceGoods ref="goodsGroup" ></BsChoiceGoods>
@ -45,7 +45,7 @@ import Sekill from './components/Sekill';
import Pick from './components/Pick'; import Pick from './components/Pick';
import Banner from './components/Banner'; import Banner from './components/Banner';
import {ApiGetBannerData} from '@/common/api/index.js'; import {ApiGetBannerData} from '@/common/api/index.js';
import {ApiGetCategoryNav} from '@/common/api/goods.js'; import {ApiGetCategoryNav, ApiGetRecommendedGoodsList} from '@/common/api/goods.js';
export default { export default {
components : {BsChoiceGoods, Pick, Banner, Sekill}, components : {BsChoiceGoods, Pick, Banner, Sekill},
data(){ data(){
@ -64,11 +64,13 @@ export default {
{ url : 'bz5.png', title : '数码周边'}, { url : 'bz5.png', title : '数码周边'},
{ url : 'bz6.png', title : '数码周边'}, { url : 'bz6.png', title : '数码周边'},
], ],
goodsData:[] recommendedGoodsList : []
} }
}, },
onLoad(){ onLoad(){
this.getCategoryList(); this.getCategoryList();
this.getRecommendedGoodsList();
}, },
onReachBottom(){ onReachBottom(){
this.$refs.goodsGroup.next() this.$refs.goodsGroup.next()
@ -90,8 +92,22 @@ export default {
methods : { methods : {
async getCategoryList(){ async getCategoryList(){
const {error, result} = await ApiGetCategoryNav(); const {error, result} = await ApiGetCategoryNav();
if(result){
this.categoryList = result; this.categoryList = result;
} }
},
async getRecommendedGoodsList(){
console.log('-right');
const {error, result} = await ApiGetRecommendedGoodsList({
pageIndex : 1,
length : 3
});
if(result){
this.recommendedGoodsList = result.records
}
}
} }
} }
</script> </script>

Write Preview
Loading…
Cancel
Save