bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/Activity.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<div class="activity">
<van-nav-bar
:title="$route.query.title"
left-text=""
left-arrow
@click-left="onClickLeft"
/>
<ul class="title">
<li v-for="(v,i) in activity" :key="i" @click="toinfo(v)">
<img :src="v.wares_masterimg[0]" alt="">
<div class="titlec">{{v.wares_title}}</div>
<div class="info">{{v.wares_info}}</div>
<div class="price">{{v.wares_oldprice}}</div>
</li>
</ul>
</div>
</template>
<script>
import router from "@/router";
export default {
name: "activity",
data() {
return {
activity:[]
}
},
created() {
this.getactivity()
},
methods: {
async getactivity() {
this.activity = await this.$http.index.activity({
id:this.$route.query.id,
});
console.log(this.activity)
},
onClickLeft(){
this.$utils.back()
},
toinfo(item){
console.log(item)
this.$router.push({
name: 'info',
query: {
id: item.wares_id
}
})
}
}
}
</script>
<style scoped lang="less">
.title{
display: flex;
padding-left: 10px;
padding-right: 10px;
justify-content: space-between;
flex-wrap: wrap;
li{
margin-bottom: 10px;
width: 45%;
.titlec{
font-size: 16px;
text-align: center;
width: 100%;
}
img{
width: 150px;
height: 150px;
}
.info{
.ellipsis();
width: 100%;
font-size: 13px;
color: #d2d1d1;
text-align: center;
}
.price{
text-align: center;
font-size: 16px;
}
}
}
</style>

203
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/Car.vue Normal file
View File

@@ -0,0 +1,203 @@
<template>
<div class="Car">
<van-nav-bar
title="购物车"
left-text="返回"
:right-text="status ? '管理' : '完成'"
left-arrow
fixed
@click-left="$utils.back()"
@click-right="status =! status"
/>
<div class="shiplist" v-if="carList.length != 0">
<van-checkbox-group v-model="selectCarItem" ref="checkboxGroup" @change="checkboxGroupchange">
<van-checkbox :name="v.wares_id" v-for="(v,i) in carList" :key="i">
<van-card
@click.stop="gotoinfo(v)"
:price="v.wares_oldprice"
:desc="v.wares_info"
:title="v.wares_title"
:thumb="v.wares_masterimg[0]"
>
<template #num>
<van-stepper
v-model="v.car_num"
@change="updateNums(v)"
theme="round"
button-size="22"
disable-input/>
</template>
</van-card>
</van-checkbox>
</van-checkbox-group>
</div>
<div class="shiplist nodata" v-else>
<p>暂时无数据</p>
</div>
<van-submit-bar :price="totalMoney">
<van-checkbox v-model="isSelectAll" @click="changeSelectAllStatus">全选</van-checkbox>
<template #button v-if="status">
<van-button round type="danger" @click="submitorder()">结算</van-button>
</template>
<template #button v-else>
<van-button round type="warning" @click="deleteCar()">删除</van-button>
</template>
</van-submit-bar>
</div>
</template>
<script>
import {mapGetters, mapActions, mapMutations} from 'vuex'
export default {
name: "Car",
data() {
return {
status: true,//T是管理F是删除
selectCarItem: [],/*储存选择对象的*/
isSelectAll: false,//是否点击全选按钮f没有
}
},
async created() {
if (this.carList.length == 0) {
await this.getcarl()
}
},
computed: {
...mapGetters({
carList: "GET_CARLIST",
getserOder:"GET_ORDERLIST"
}),
totalMoney() {
var total = 0;
this.selectCarItem.forEach(vid => {
this.carList.forEach(item => {
if (vid == item.wares_id) {
total += item.car_num * item.wares_oldprice
}
})
})
return total * 100
},
},
methods: {
...mapActions({
getcarl: "GET_CARLISTDATA"
}),
...mapMutations({
serOder: "SET_ORDERLIST"
}),
submitorder() {
var carIdArr = []
this.selectCarItem.forEach(vid => {
this.carList.forEach(item => {
if (vid == item.wares_id) {
carIdArr.push(item)
}
})
})
this.serOder(carIdArr)
console.log("this.ordered",this.getserOder)
this.$router.push({
name:"order"
})
},
gotoinfo(item) {
this.$router.push({
name: 'info',
query: {
id: item.wares_id
}
})
},
async updateNums(item) {
event.stopPropagation()
let res = await this.$http.car.updateCarNum({
carid: item.car_id,
quantity: item.car_num
})
console.log(item)
},
checkboxGroupchange() {
var Order = [];
this.selectCarItem.forEach(vid => {
this.carList.forEach(item => {
if (vid == item.wares_id) {
Order.push(item)
}
})
})
},
changeSelectAllStatus() {
if (this.isSelectAll) {
this.$refs.checkboxGroup.toggleAll(true);
} else {
this.$refs.checkboxGroup.toggleAll();
}
},
async deleteCar() {
var carIdArr = []
this.selectCarItem.forEach(vid => {
this.carList.forEach(item => {
if (vid == item.wares_id) {
carIdArr.push(item.car_id)
}
})
})
let res = await this.$http.car.deleteCar({carid: carIdArr})
await this.getcarl()
},/*购物车删除方法*/
},
}
</script>
<style scoped lang="less">
.nodata {
text-align: center;
align-items: center;
justify-content: center;
height: calc(100vh - 145px);
}
.Car {
.shiplist {
margin-top: 45px;
margin-bottom: 120px;
/deep/ .van-checkbox__icon {
margin-left: 16px;
}
/deep/ .van-checkbox__label {
width: 90%;
margin-left: 0;
}
/deep/ .van-card {
background-color: #ffffff;
}
}
/deep/ .van-submit-bar {
bottom: 50px;
}
/deep/ .van-button--danger,
/deep/ .van-button--warning {
width: 90px;
span {
font-size: 16px;
}
}
}
</style>

127
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/Home.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<div class="home">
<div class="header">
<img src="/img/logo.png" alt="">
<div class="search" @click="gosearch">
<van-icon name="search" size="16"/>
<span>请输入搜索关键词</span>
</div>
<div class="search_text" @click="gosearch">搜索</div>
</div>
<div class="content">
<swiper :data="BannerList">
<template v-slot:default="slot">
<img :src="slot.item.banner" alt="" @click="toInfo(slot.item)">
</template>
</swiper>
<div class="hot">
<van-grid :border="false" :column-num="4">
<van-grid-item class="hot-item" @click="toActivity(item)" v-for="(item,index) in hotArr">
<van-image width="0.85333rem" :src="item.icon" />
<span>{{ item.title }}</span>
</van-grid-item>
</van-grid>
</div>
<van-row class="remm">
<van-col span="12">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32b5d24417b673008f386592c4d17046.jpg?thumb=1&w=358&h=508" alt="">
</van-col>
<van-col span="12">
<van-row>
<van-col span="24">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1480d862e1f5a41e5adae8c030eef511.jpg?thumb=1&w=358&h=252" alt="">
</van-col>
<van-col span="24">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1480d862e1f5a41e5adae8c030eef511.jpg?thumb=1&w=358&h=252" alt="">
</van-col>
</van-row>
</van-col>
</van-row>
<div class="adb">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3ca39ff880dfbcbc0e45314782c39fff.jpg?thumb=1&w=720&h=280" alt="">
</div>
<van-row class="shop-list">
<van-col span="12" @click="toInfo(item)" v-for="(item,index) in HomeList" :key="index">
<img :src="item.wares_masterimg[0]" alt="">
<div class="title">{{ item.wares_title }}</div>
<div class="desc">{{ item.wares_info }}</div>
<div class="price">{{ item.wares_oldprice }}</div>
</van-col>
</van-row>
</div>
</div>
</template>
<script>
import swiper from '@c/swiper.vue'
export default {
name: 'Home',
data() {
return {
HomeList: [],
BannerList: [],//保存banner数据
hotArr: [
{ id: 1, title: '限时白嫖', icon: '/img/type_1.png' },
{ id: 2, title: '新品推荐', icon: '/img/type_2.png' },
{ id: 3, title: '低价高配', icon: '/img/type_3.png' },
{ id: 4, title: '超值特卖', icon: '/img/type_4.png' },
]
}
},
created() {
this.getHome();
this.getBanner()
},
methods: {
gosearch(){
this.$router.push({
name: 'search',
})
},/*跳转搜索页面*/
toInfo(item) {
console.log(item)
this.$router.push({
name: 'info',
query: {
id: item.wares_id
}
})
},
toActivity(item) {
this.$router.push({
name: 'activity',
query: {
id: item.id,
title:item.title
}
})
},
async getBanner() {
this.BannerList = await this.$http.index.banner();
console.log(this.BannerList)
},
async getHome() {
this.HomeList = await this.$http.index.home();
console.log(this.HomeList)
}
},
components: {
swiper
}
}
</script>
<style lang="less" scoped>
@import "~@page/Home.less";
</style>

193
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/Info.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<div class="Info">
<div class="header" :style="{ background: `rgba(255,255,255,${opacity})` }"></div>
<van-icon @click="$router.back()" :class="isShowTabs ? 'back' : 'noback' " name="arrow-left" />
<van-icon @click="$router.push('/car')" :class="isShowTabs ? 'back' : 'noback' " name="shopping-cart-o"/>
<div class="tabs">
<van-tabs ref="tabs" :class="{ hidden: isShowTabs }" v-model="active" scrollspy sticky>
<van-tab>
<template #title>
商品
</template>
<div class="shop_title">
<swiper ref="vswiper" :data="info.wares_masterimg" :show-indicator="true">
<template v-slot:default="slot">
<img @click="showImagePreview(slot.index)" :src="slot.item" alt="">
</template>
</swiper>
<div class="info_content">
<div class="top">
<div class="title">{{ info.wares_title }}</div>
<div class="desc">{{ info.wares_info }}</div>
<div class="price">
￥ {{info.wares_oldprice}}
<del>{{info.wares_nowprice}}</del>
</div>
</div>
<div class="norms">
<p class="status">已选</p>
<p class="conf">全网公开版，碳纤黑，6+128...</p>
<p class="right">
<span>x1</span>
<van-icon name="arrow" />
</p>
</div>
<div class="quality" @click="isShow = true">
<div class="left">
<div class="item_1">
<img src="/img/icon_1.png" alt="" />
<span>品质保障</span>
</div>
<div class="item_1">
<img src="/img/icon_1.png" alt="" />
<span>顺丰发货</span>
</div>
<div class="item_1">
<img src="/img/icon_1.png" alt="" />
<span >7天无理由退货</span>
</div>
</div>
<van-icon name="arrow" />
</div>
</div>
</div>
</van-tab>
<van-tab>
<template #title>
详情
</template>
<div class="shop_info">
<div v-for="(v,i) in info.wares_infoimg"
@click="showImage(i)"
:key="i">
<img :src="v" alt="">
</div>
</div>
</van-tab>
</van-tabs>
</div>
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="收藏"/>
<van-goods-action-icon icon="cart-o" text="购物车" :badge=carList.length @click="$router.push('/car')"/>
<van-goods-action-button
type="warning"
:class="isAddCar ? 'noAddCar' : '' "
@click="isAddCar ? '' : addCar()"
text="加入购物车" />
<van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
<van-popup v-model="isShow" round position="bottom" :style="{ height: '60%' }" />
</div>
</template>
<script>
import swiper from '@c/swiper.vue'
import { ImagePreview } from 'vant';
import { mapGetters, mapActions } from 'vuex'
export default {
name: "Info",
data() {
return {
active: 0,
isShowTabs: true, // true 隐藏 false 显示
opacity: 0,
isShow: false,// 品质保证的弹出层控制
isAddCar: false, // 判断商品是否被添加购物车
info: {}
}
},
async created() {
if(this.carList.length == 0){
await this.getcarl()
}
console.log("数据",this.carList)
this.checkCar()
this.getInfo()
},
computed:{
...mapGetters({
carList:"GET_CARLIST",
})
},
mounted(){
window.addEventListener('scroll',this.handleScroll)
},
beforeRouteLeave(to, from, next) {
this.handleScroll = null;
next()
},
methods: {
...mapActions({
getcarl:"GET_CARLISTDATA"
}),
async checkCar() {
let res = await this.$http.car.checkCar({
waresid: this.$route.query.id
});
this.isAddCar = res.isAddCar
console.log(res)
},
async addCar() {
let res = await this.$http.car.addCar({
waresid: this.$route.query.id
});
await this.getcarl()
console.log(res)
this.$toast("添加成功")
this.isAddCar = true
},
showImage(index) {
ImagePreview({
images: this.info.wares_infoimg,
startPosition: index,
});
},
showImagePreview(index) {
ImagePreview({
images: this.info.wares_masterimg,
startPosition: index,
onChange: (index) => {
this.$refs.vswiper.$children[0].swipeTo(index)
}
});
},
async getInfo() {
this.info = await this.$http.index.info({
id: this.$route.query.id
});
console.log(this.info)
},
handleScroll() {
try {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.opacity = scrollTop.toFixed() / 45;
if (this.opacity >= 0.5) {
this.isShowTabs = false;
this.$refs.tabs.resize();
} else {
this.isShowTabs = true
}
} catch (e) {
}
}
},
components: {
swiper
}
}
</script>
<style scoped lang="less">
@import "~@page/Info.less";
</style>

73
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/Me.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<div class="Me">
<div class="hader">
<img src="img/me_settin_2.png" alt="" class="set">
<div class="user">
<img src="img/user_head.png" alt="">
<span>sadsadsa</span>
</div>
</div>
<div class="type">
<ul>
<li v-for="(v,i) in inorderdata" :key="i" @click="infoorderdata(i)">
<img :src="v.img" alt="">
<span>{{v.span}}</span>
</li>
</ul>
</div>
<div class="setting">
<ul>
<li>
<img src="img/me_address.png" alt="">
<span>收获地址</span>
</li>
<li>
<img src="img/me_like.png" alt="">
<span>我的收藏</span>
</li>
<li>
<img src="img/me_settin_2.png" alt="">
<span>我的设置</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "Me",
data() {
return {
inorderdata:[
{span:"全部订单",img: "img/me_1.png"},
{span:"待付款",img: "img/me_2.png"},
{span:"代发货",img: "img/me_3.png"},
{span:"待收货",img: "img/me_4.png"},
{span:"退款/售后",img: "img/me_5.png"},
]
}
},
created() {
},
methods: {
infoorderdata(item){
this.$router.push({
name: 'orderdata',
query: {
active: item,
}
})
}
},
components: {
}
}
</script>
<style scoped lang="less">
@import "~@page/Me.less";
</style>

97
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/Search.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<div class="Search">
<div class="top">
<van-icon name="arrow-left" size="20px" @click="toback"/>
<van-search v-model="data" placeholder="请输入搜索关键词" @click="oncontent"/>
<span @click="todata">搜索</span>
</div>
<div class="content" v-if="content">
<div class="title1">热门搜索</div>
<ul>
<li v-for="(v,i) in itemdata" :key="i" @click="dataup(v)">
{{v.title}}
</li>
</ul>
</div>
<div class="title12" v-else-if="datasearc.length==0">
<van-icon name="bag-o" />
<span>暂无数据</span>
</div>
<div v-else>
<ul class="title">
<li v-for="(v,i) in datasearc" :key="i" @click="toinfo(v)">
<img :src="v.wares_masterimg[0]" alt="">
<div class="titlec">{{v.wares_title}}</div>
<div class="info">{{v.wares_info}}</div>
<div class="price">{{v.wares_oldprice}}</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import { Toast } from 'vant'
export default {
name: "Search",
data() {
return {
data: '',/*输入框返回值*/
itemdata:[{title:"小米"},{title:"华为"},{title:"16t"},{title:"11Pro"},{title:"锤子"},{title:"三星"}],
datasearc: [],/*ajax数据*/
content:true,/*显示标签 t 为显示*/
}
},
created() {
},
methods: {
async getsearch() {
this.datasearc = await this.$http.Search.search(
{
keyword:this.data
}
);
console.log(this.datasearc)
},
todata(){
if(this.data){
this.getsearch()
}else {
Toast('请输入搜索内容');
this.datasearc=[]
}
this.content=false
},
toback(){
this.$router.go(-1)
},/*回退上一页*/
oncontent(){
this.content=true
},/*标签控制显示隐藏*/
toinfo(item){
console.log(item)
this.$router.push({
name: 'info',
query: {
id: item.wares_id
}
})
},
dataup(v){
this.data=v.title
this.todata()
},
},
components: {},
}
</script>
<style scoped lang="less">
@import "~@page/Search.less";
</style>

86
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/Type.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<div class="Type">
<div class="top">
<div></div>
<span>分类</span>
<van-icon name="search" size="15px" color="#a2a2a2" @click="gosearch"/>
</div>
<van-tree-select class="type_list" height="100%" :items="items" :main-active-index.sync="active" @click-nav="getlistxioam()">
<template #content>
<content v-for="(v,i) in items" :key="i"><!--v是指每个items,循环遍历出来items,右边的每一个接口数据-->
<ul class="right_title" v-if="active==i"><!--当active等于右边的i下标的时候显示-->
<li v-for="(cont,item ) in v.content" :key="item" @click="toInfo(cont.wares_id)"><!--这个cont才是没个items里面contennt的数据-->
<img :src="cont.wares_masterimg" alt="">
<span>{{cont.wares_title}}</span>
</li>
</ul>
</content>
</template>
</van-tree-select>
</div>
</template>
<script>
export default {
name: "Type",
data() {
return {
active: 0,
items: [
{ text: '小米' ,content: []},
{ text: '魅族' ,content: []},
{ text: '华为' ,content: []},
{ text: 'iphone' ,content: []},
{ text: '三星' ,content: []},
{ text: '锤子' ,content: []},
{ text: '诺基亚' ,content: []}
],
listdataxiaomi:[]
}
},
created() {
this.getlistxioam()
},
methods: {
async getlistxioam() {
if(this.items[this.active].content.length==0){
let res = await this.$http.index.list({
typename:this.items[this.active].text
});
this.items[this.active].content=res
console.log(this.items[this.active].content)
}
},
toInfo(item) {
console.log(item)
this.$router.push({
name: 'info',
query: {
id: item
}
})
},/*跳转详情页面*/
gosearch(){
this.$router.push({
name: 'search',
})
},/*跳转搜索页面*/
},
components: {
}
}
</script>
<style scoped lang="less">
@import "~@page/Type.less";
.Type {
height: calc(100vh - 50px);
.van-tree-select__content {
flex: 4;
}
.van-tree-select__content{
margin-bottom: 50px;
}
}
</style>

145
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/User.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<div class="User">
<!--上边的圆-->
<div class="top_circular"></div>
<div class="right_circular">
<!--登录-->
<div class="login" v-if="status">
<div class="item">
<div class="icon">
<van-icon name="manager-o"/>
<span>用户名</span>
</div>
<input type="text" v-model="loginParams.name"/>
</div>
<div class="item">
<div class="icon">
<van-icon name="manager-o" />
<span>密码</span>
</div>
<input type="password" v-model="loginParams.pwd"/>
</div>
<div class="but login_but" @click="login">立即登录</div>
</div>
<!--注册-->
<div class="reg" v-else>
<div class="item">
<div class="icon">
<van-icon name="manager-o"/>
<span>手机号</span>
</div>
<input type="number" v-model="regParams.phone"/>
</div>
<div class="item">
<div class="icon">
<van-icon name="manager-o" />
<span>用户名</span>
</div>
<input type="text" v-model="regParams.name"/>
</div>
<div class="item">
<div class="icon">
<van-icon name="manager-o" />
<span>密码</span>
</div>
<input type="password" v-model="regParams.pwd"/>
</div>
<div class="but login_but" @click="Reg">立即注册</div>
</div>
</div>
<div class="bottom_circular">
<div class="one blue"></div>
<div class="two blue" @click="status = !status">{{ status ? '注册':'登录' }}</div>
<div class="three blue"></div>
</div>
</div>
</template>
<script>
export default {
name: "User",
data() {
return {
status: true, // true 显示登录，false 显示注册
loginParams: {
name: '',
pwd: '',
},
regParams: {
name: '',
pwd: '',
phone: ''
}
}
},
created() {
},
methods: {
async login() {
console.log(this.loginParams)
if (this.loginParams.name.length == 0) {
this.$toast('用户名不能为空');
return false;
}
if (this.loginParams.pwd.length == 0) {
this.$toast('密码不能为空');
return false;
}
let res = await this.$http.user.login(this.loginParams);
localStorage.setItem("token", res.token)
this.$toast.success({
message: '登录成功！',
onClose: () => {
if (this.$route.query.hasOwnProperty("from")) {
this.$router.push({
path: this.$route.query.from
})
} else {
this.$router.back()
}
}
});
},
async Reg() {
if(!(/^1[34578]\d{9}$/.test(this.regParams.phone))){
this.$toast('手机号格式不对');
return false;
}
if (this.regParams.name.length == 0) {
this.$toast('用户名不能为空');
return false;
}
if (this.regParams.pwd.length == 0) {
this.$toast('密码不能为空');
return false;
}
let res = await this.$http.user.add(this.regParams);
this.$toast.success({
message: '注册成功！',
onClose: () => {
this.status = true
}
});
}
}
}
</script>
<style scoped lang="less">
@import "~@page/User.less";
</style>

27
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/layout.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="layout">
<router-view></router-view>
<tabbar></tabbar>
</div>
</template>
<script>
import tabbar from '@c/tabbar.vue'
export default {
name: "layout",
data() {
return {}
},
created() {
},
methods: {},
components: {
tabbar
}
}
</script>
<style scoped>
</style>

126
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/order.vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<div class="order">
<van-nav-bar
title="用户结算"
left-text=""
left-arrow
@click-left="$utils.back()"
/>
<van-radio-group v-model="radio">
<van-cell-group>
<van-cell v-for="(v,i) in payment" :title="v.title" clickable @click="radio = i" :key="i">
<template #right-icon>
<van-radio :name=i />
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
<div class="opop"></div>
<div class="order-list">
<van-cell :value="v.wares_oldprice" v-for="(v,i) in getserOder" :key="i">
<template #title>
<img :src="v.wares_masterimg[0]" alt="">
<span>{{v.wares_title}}</span>
</template>
</van-cell>
</div>
<van-submit-bar :price="totalMoney" button-text="付款" @submit="openis">
<span>共计:{{getserOder.length}}件商品</span>
</van-submit-bar>
<van-popup v-model="isShowpay"
closeable
close-icon-position="top-left"
position="bottom"
:style="{ height: '60%' }">
<div class="vansad">
<div class="title">付款人</div>
<div class="price">
<span class="price_icon">￥</span>
<span class="price_num">{{totalMoney/100}}.00</span>
</div>
</div>
<van-cell title="单元格" is-link value="内容" />
<van-button type="info" block @click="submitcart">立即付款</van-button>
</van-popup>
</div>
</template>
<script>
import {mapGetters, mapActions, mapMutations} from 'vuex'
export default {
name: "order",
data() {
return {
payment: [
{title: "支付宝", img: ""},
{title: "小米钱包", img: ""},
{title: "微信支付", img: ""},
{title: "银联支付", img: ""},
{title: "翼支付", img: ""},
{title: "信用卡支付", img: ""}
],
radio: null,
isShowpay:false
}
},
created() {
console.log(this.getserOder)
},
computed: {
...mapGetters({
getserOder: "GET_ORDERLIST"
}),
totalMoney() {
var total = 0;
this.getserOder.forEach(vid => {
total += vid.car_num * vid.wares_oldprice
})
return total * 100
},
},
methods: {
async submitcart(){
var list=[]
this.getserOder.forEach(v=>{
list.push({
waresid: v.wares_id,
goodsnum:v.car_num,
goodsprice:v.wares_oldprice,
})
})
var res =await this.$http.car.submitCar(JSON.stringify({
carList:list
}))
var allorder=await this.$http.car.allOrder(
{status:0}
)
var buyOrder=await this.$http.car.buyOrder(
{goodsid:JSON.stringify(allorder.map(v=>v.goods_id))}
)
console.log(res)
this.$router.push({
name:"plaStetus"
})
},
openis(){
this.isShowpay=true
}
},
components: {},
}
</script>
<style scoped lang="less">
@import "~@page/order.less";
</style>

60
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/orderdata.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<div class="orderdata">
<van-nav-bar
title="订单状态"
left-arrow
@click-left="$router.back()"
/>
<van-tabs v-model="active" @change="getOrder()">
<van-tab v-for="(v,i) in tabs" :title="v.title" :key="i">
<Care :list="tabs[active].content"></Care>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import Care from "@/components/Care";
export default {
name: "orderdata",
data() {
return {
active:0,
tabs:[
{title:'全部订单',status:-1,content:[]},
{title:'待付款',status:0,content:[]},
{title:'待发货',status:1,content:[]},
{title:'待收货',status:2,content:[]},
{title:'退款/售后',status:3,content:[]},
]
}
},
created() {
this.active=this.$route.query.active==undefined
? 0
:Number(this.$route.query.active)
this.getOrder()
},
methods: {
async getOrder() {
if(this.tabs[this.active].content==0){
let res = await this.$http.car.allOrder({
status:this.tabs[this.active].status
})
this.tabs[this.active].content=res
console.log(res)
}
}
},
components: {
Care
},
}
</script>
<style scoped lang="less">
</style>

43
历届学生/吴欣阳/项目开发/练习项目/课程练习/8.1/电商App/src/views/plaStetus.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div class="play">
<van-icon name="success"/>
<span>恭喜支付成功</span>
<div class="butt">
<van-button plain type="primary" class="buttom_11" @click="$router.push({name:'home'})">回到首页</van-button>
<van-button plain type="info" @click="$router.push({name:'orderdata'})">查看订单</van-button>
</div>
</div>
</template>
<script>
export default {
name: "play",
data() {
return {}
},
created() {
},
methods: {},
components: {},
}
</script>
<style scoped lang="less">
.play {
display: flex;
align-items: center;
flex-direction: column;
height: 100vh;
justify-content: center;
}
.butt{
margin-top: 30px;
display: flex;
align-items: center;
}
.buttom_11{
margin-right: 20px;
}
</style>