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
* @Date: 2022-04-02 09:54:53
* @LastEditors: ch
* @LastEditTime: 2022-04-07 15:06:26
* @LastEditTime: 2022-04-09 15:28:08
* @Description: file content
*/
import {ToAsyncAwait, MsbRequest} from '@/common/utils';
@ -14,6 +14,12 @@ const BASE_URL = '/mall/product';
*/
export const ApiGetGoodsList = (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

6
pages/account/index.vue
Unescape View File

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

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

@ -537,8 +537,10 @@ export default {
height: 72rpx;
line-height: 72rpx;
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">
<!-- 搜索框 -->
<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
placeholder="请输入您想要搜索的商品名称"
@focus="$Router.push('/search')"/>
@ -111,7 +111,7 @@ export default {
},
};
</script>
<style>
<style lang="scss">
page {
background: $color-grey0;
}
@ -134,7 +134,7 @@ page {
.cate-content {
background: $color-grey0;
height: calc(100vh - 220rpx);
height: calc(100vh - 180rpx);
display: flex;
}

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

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

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

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

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

@ -2,12 +2,12 @@
* @Author: ch
* @Date: 2022-03-23 10:31:12
* @LastEditors: ch
* @LastEditTime: 2022-04-09 14:22:44
* @LastEditTime: 2022-04-09 15:35:25
* @Description: file content
-->
<template>
<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>
<view class="desc">
@ -38,7 +38,7 @@ export default {
}
},
props:{
bannerList : {
data : {
type : Array,
default : []
}

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

@ -2,19 +2,62 @@
* @Author: ch
* @Date: 2022-03-23 10:29:07
* @LastEditors: ch
* @LastEditTime: 2022-04-09 15:03:51
* @LastEditTime: 2022-04-09 17:18:09
* @Description: file content
-->
<template>
<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 class="pick-min"></view>
<view class="pick-min"></view>
</view>
</template>
<script>
export default {
data(){
return{}
},
props:{
data : {
type : Array,
default : []
}
}
}
</script>
<style lang="scss" scoped>
.pick{
@ -23,17 +66,56 @@
display: flex;
flex-flow: column wrap;
justify-content: space-between;
&-max{
width: 335rpx;
height: 450rpx;
background: $color-grey0;
border-radius: 8rpx;
}
&-min{
width: 335rpx;
height: 215rpx;
background: $color-grey0;
border-radius: 8rpx;
.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;
height: 450rpx;
background: $color-grey0;
border-radius: 8rpx;
.img-box{
display: flex;
justify-content: end;
}
.img{
width: 260rpx;
height: 260rpx;
}
}
.min{
width: 335rpx;
height: 215rpx;
background: $color-grey0;
border-radius: 8rpx;
&--info-box{
display: flex;
justify-content: space-between;
}
&--info-box-right{
width: 180rpx;
}
.img{
width: 160rpx;
height: 160rpx;
}
}
</style>

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

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

28
pages/index/index.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save