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

Merge branch 'feature/task1.0.0-0505-ch' into feature/task1.0.0

Browse Source
merge-requests/57/head
ch 2 years ago
parent 191f13df5a 879a7bd04d
commit a7b5be58ba
6 changed files with 133 additions and 119 deletions
Show Stats Download Patch File Download Diff File

162
components/UiChosen.vue → components/BsChosen.vue
Unescape View File

@ -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>

10
components/UiRadio.vue
Unescape View File

@ -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
pages/account/index.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-08 17:48:36 * @Date: 2022-05-08 17:48:36
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-10 12:19:04 * @LastEditTime: 2022-05-12 19:42:49
* @Description: file content * @Description: file content
--> -->
<template> <template>

42
pages/cart/index.vue
Unescape View File

@ -2,12 +2,13 @@
* @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 17:36:08 * @LastEditTime: 2022-05-12 19:40:43
* @Description: file content * @Description: file content
--> -->
<template> <template>
<div> <div>
<UiEmpty v-if="!isLoading && !list.length" desc="购物车空空如也，去挑点喜欢的好货吧~" :icon="require('@/assets/img/cart/empty.png')"> <UiEmpty v-if="!isLoading && !list.length" desc="购物车空空如也，去挑点喜欢的好货吧~"
:icon="require('@/assets/img/cart/empty.png')">
<UiButton type="grey" @click="$router.push('/')">去逛逛</UiButton> <UiButton type="grey" @click="$router.push('/')">去逛逛</UiButton>
</UiEmpty> </UiEmpty>
<UiLoading v-if="isLoading" ></UiLoading> <UiLoading v-if="isLoading" ></UiLoading>
@ -32,22 +33,21 @@
<tbody> <tbody>
<tr v-for="item in list" :key="item.id" :class="item.status !== 'normal' && 'disable'"> <tr v-for="item in list" :key="item.id" :class="item.status !== 'normal' && 'disable'">
<td width="50"> <td width="50">
<el-checkbox v-if="item.status === 'normal'" :label="item.id" class="checkbox"></el-checkbox> <el-checkbox v-if="item.status === 'normal'" :label="item.id" class="checkbox" />
<span v-else class="tag">失效</span> <span v-else class="tag">失效</span>
</td> </td>
<td> <td>
<UIGoodsInfo :goods="item"></UIGoodsInfo> <UIGoodsInfo :goods="item" />
</td> </td>
<td width="115"> <td width="115">
<UiMoney :money="item.productSku ? item.productSku.sellPrice : 0"></UiMoney> <UiMoney :money="item.productSku ? item.productSku.sellPrice : 0" />
</td> </td>
<td width="115"> <td width="115">
<el-input-number :value="item.number" @change="onChangeStepper($event, item)" <el-input-number :value="item.number" @change="onChangeStepper($event, item)"
:min="1" :max="item.maxBuyNum" size="mini"> :min="1" :max="item.maxBuyNum" size="mini" />
</el-input-number>
</td> </td>
<td width="115"> <td width="115">
<UiMoney :money="item.totalPrice"></UiMoney> <UiMoney :money="item.totalPrice" />
</td> </td>
<td width="115"> <td width="115">
<a @click="handleDelete(item.id)" class="del">删除</a> <a @click="handleDelete(item.id)" class="del">删除</a>
@ -58,33 +58,35 @@
</el-checkbox-group> </el-checkbox-group>
<div class="operation"> <div class="operation">
<div> <div>
<el-checkbox label="全选" @change="handleCheckAll" <el-checkbox label="全选" @change="handleCheckAll" v-model="checkAll" :indeterminate="isIndeterminate" />
v-model="checkAll" :indeterminate="isIndeterminate"></el-checkbox>
<a @click="handleDelete()" class="operation--del">批量删除</a> <a @click="handleDelete()" class="operation--del">批量删除</a>
</div> </div>
<div class="operation--right"> <div class="operation--right">
<p>已选<span class="operation--count">{{checkedIds.length}}</span>件</p> <p>已选<span class="operation--count">{{checkedIds.length}}</span>件</p>
<p class="operation--total">总计： <p class="operation--total">
<UiMoney class="operation--total-price" :money="totalPrice" 总计：
size="20px" float prefix preSize="14px"/> <UiMoney class="operation--total-price" size="20px" float prefix preSize="14px"
:money="totalPrice"/>
</p> </p>
<UiButton class="operation--settlement" @click="settlement" :disabled="!checkedIds.length">去结算</UiButton> <UiButton class="operation--settlement" @click="settlement" :disabled="!checkedIds.length">去结算</UiButton>
</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(){
@ -276,6 +277,7 @@ export default {
td{ td{
text-align: center; text-align: center;
padding: 40px 0; padding: 40px 0;
border-bottom: 1px solid #ddd;
} }
} }
.operation{ .operation{

30
pages/goods/detail/_id.vue
Unescape View File

@ -136,7 +136,7 @@
<span>此商品暂无库存啦~看看其他的吧</span> <span>此商品暂无库存啦~看看其他的吧</span>
</div> </div>
<div class="main__details-pay"> <div class="main__details-pay">
<UiButton type="yellow_line">加入购物车</UiButton> <UiButton type="yellow_line" @click="addCart">加入购物车</UiButton>
<UiButton type="yellow_panel" @click="buyNow">立即购买</UiButton> <UiButton type="yellow_panel" @click="buyNow">立即购买</UiButton>
</div> </div>
</article> </article>
@ -168,21 +168,22 @@
</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 {ApiPutAddCart} from "@/plugins/api/cart";
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,
@ -424,6 +425,27 @@ export default {
query, query,
}); });
}, },
/**
* 加入购物车
*/
async addCart(){
if(!this.curSku.skuId){
this.$message.error("请选择规格~");
return false;
}
const {error, result} = await ApiPutAddCart({
productSkuId : this.curSku.skuId,
productId : this.detailData.id,
number : this.curBuyNum
});
if(error){
this.$message.error(error.message);
return false;
}
this.$message.success('加入购物车成功~');
// this.$Router.push('/cart');
},
}, },
}; };
</script> </script>

6
pages/goods/list/index.vue
Unescape View File

@ -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,

Write Preview
Loading…
Cancel
Save