购物车 添加为你精选

merge-requests/32/merge
ch 3 years ago
parent 303e9e1d28
commit ce37efec56

@ -1,81 +1,81 @@
<template> <template>
<div class="chosen"> <div class="chosen">
<div class="chosen-title flex flex-between flex-middle"> <div class="chosen-title flex flex-between flex-middle">
<h3 class="chosen-title--txt">为你精选</h3> <h3 class="chosen-title--txt">为你精选</h3>
<div class="chosen-title--btn flex" @click="getRecommendedGoodsList()"> <div class="chosen-title--btn flex" @click="getRecommendedGoodsList()">
<img src="@/assets/img/goods/each.png" alt="切换推荐" /> <img src="@/assets/img/goods/each.png" alt="切换推荐" />
<span>换一组</span> <span>换一组</span>
</div> </div>
</div> </div>
<div class="chosen-list"> <div class="chosen-list">
<UiGoodsItem <UiGoodsItem
:item="item" :item="item"
v-for="item in recommendedData" v-for="item in recommendedData"
:key="item.id" :key="item.id"
></UiGoodsItem> ></UiGoodsItem>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { ApiGetRecommendedGoodsList } from "@/plugins/api/goods"; import { ApiGetRecommendedGoodsList } from "@/plugins/api/goods";
import UiGoodsItem from "@/components/UiGoodsItem.vue"; import UiGoodsItem from "@/components/UiGoodsItem.vue";
export default { export default {
components: { UiGoodsItem }, components: { UiGoodsItem },
data() { data() {
return { return {
recommendedData: [], recommendedData: [],
}; };
}, },
created() { created() {
this.getRecommendedGoodsList(); this.getRecommendedGoodsList();
}, },
methods: { methods: {
async getRecommendedGoodsList() { async getRecommendedGoodsList() {
let vm = this; let vm = this;
let res = await ApiGetRecommendedGoodsList(); let res = await ApiGetRecommendedGoodsList();
vm.recommendedData = res.result; vm.recommendedData = res.result;
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.chosen { .chosen {
width: 100%; width: 100%;
padding: 30px 0 40px; padding: 30px 0 40px;
background: #f8f8f8; background: #f8f8f8;
&-title { &-title {
@include layout-box; @include layout-box;
&--txt { &--txt {
font-size: 24px; font-size: 24px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei; font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
} }
&--btn { &--btn {
width: 140px; width: 140px;
cursor: pointer; cursor: pointer;
img { img {
width: 27px; width: 27px;
height: 27px; height: 27px;
margin-right: 5px; margin-right: 5px;
} }
span { span {
font-size: 18px; font-size: 18px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei; font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
} }
} }
} }
&-list { &-list {
@include layout-box; @include layout-box;
padding-top: 40px; padding-top: 40px;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 232px); grid-template-columns: repeat(auto-fill, 232px);
justify-content: space-between; justify-content: space-between;
grid-row-gap: 10px; grid-row-gap: 10px;
} }
} }
</style> </style>

@ -1,10 +0,0 @@
<!--
* @Author: ch
* @Date: 2022-05-07 22:57:24
* @LastEditors: ch
* @LastEditTime: 2022-05-07 22:57:39
* @Description: file content
-->
<template>
<el-radio/>
</template>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-03 22:41:15 * @Date: 2022-05-03 22:41:15
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-12 18:03:12 * @LastEditTime: 2022-05-12 18:11:55
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -72,19 +72,21 @@
</div> </div>
</div> </div>
</div> </div>
<BsChosen></BsChosen>
</div> </div>
</template> </template>
<script> <script>
import {ApiGetCartList, ApiDeleteCartGoods, ApiPutCartNum} from '@/plugins/api/cart'; import {ApiGetCartList, ApiDeleteCartGoods, ApiPutCartNum} from '@/plugins/api/cart';
import {Debounce} from '@/plugins/utils'; import {Debounce} from '@/plugins/utils';
import UIGoodsInfo from '../../components/UIGoodsInfo.vue'; import UIGoodsInfo from '@/components/UIGoodsInfo.vue';
import UiButton from '../../components/UiButton.vue'; import UiButton from '@/components/UiButton.vue';
import UiMoney from '../../components/UiMoney.vue'; import UiMoney from '@/components/UiMoney.vue';
import UiEmpty from '../../components/UiEmpty.vue'; import UiEmpty from '@/components/UiEmpty.vue';
import UiLoading from '../../components/UiLoading.vue'; import UiLoading from '@/components/UiLoading.vue';
import BsChosen from '@/components/BsChosen.vue';
export default { export default {
components: { UIGoodsInfo, UiButton, UiMoney, UiEmpty, UiLoading }, components: { UIGoodsInfo, UiButton, UiMoney, UiEmpty, UiLoading, BsChosen },
data(){ data(){
return { return {
isLoading : false, isLoading : false,
@ -104,7 +106,6 @@ export default {
tempPrice += unitPrice * (item.number || 0) tempPrice += unitPrice * (item.number || 0)
}); });
return (tempPrice / 100).toFixed(2); return (tempPrice / 100).toFixed(2);
}, },
// //
normalList(){ normalList(){

@ -153,21 +153,21 @@
</div> </div>
</div> </div>
</section> </section>
<UiChosen v-else></UiChosen> <BsChosen v-else></BsChosen>
</div> </div>
</template> </template>
<script> <script>
import UiMoney from "@/components/UiMoney.vue"; import UiMoney from "@/components/UiMoney.vue";
import UiButton from "@/components/UiButton.vue"; import UiButton from "@/components/UiButton.vue";
import UiGoodsItem from "@/components/UiGoodsItem.vue"; import UiGoodsItem from "@/components/UiGoodsItem.vue";
import UiChosen from "@/components/UiChosen.vue"; import BsChosen from "@/components/BsChosen.vue";
import { import {
ApiGetGoodsDetail, ApiGetGoodsDetail,
ApiGetGoodsSkus, ApiGetGoodsSkus,
ApiGetRecommendedGoodsList, ApiGetRecommendedGoodsList,
} from "@/plugins/api/goods"; } from "@/plugins/api/goods";
export default { export default {
componetns: { UiMoney, UiButton, UiGoodsItem, UiChosen }, componetns: { UiMoney, UiButton, UiGoodsItem, BsChosen },
data() { data() {
return { return {
curBuyNum: 1, curBuyNum: 1,

@ -70,7 +70,7 @@
<img class="main-none-img" src="@/assets/img/goods/none.png" alt="" /> <img class="main-none-img" src="@/assets/img/goods/none.png" alt="" />
<p class="main-none-txt">没有搜到你想要的商品哦换个关键词试试</p> <p class="main-none-txt">没有搜到你想要的商品哦换个关键词试试</p>
</main> </main>
<UiChosen></UiChosen> <BsChosen></BsChosen>
</div> </div>
</template> </template>
<script> <script>
@ -81,9 +81,9 @@ import {
} from "@/plugins/api/goods"; } from "@/plugins/api/goods";
import Sort from "./module/SortItem.vue"; import Sort from "./module/SortItem.vue";
import UiGoodsItem from "@/components/UiGoodsItem.vue"; import UiGoodsItem from "@/components/UiGoodsItem.vue";
import UiChosen from '@/components/UiChosen.vue'; import BsChosen from '@/components/BsChosen.vue';
export default { export default {
components: { Sort, UiGoodsItem,UiChosen }, components: { Sort, UiGoodsItem,BsChosen },
data() { data() {
return { return {
navActive: 0, navActive: 0,

Loading…
Cancel
Save