25 changed files with 1494 additions and 568 deletions
-
162library-activity/package-lock.json
-
3library-activity/package.json
-
26library-activity/src/assets/css/reset.css
-
163library-activity/src/assets/css/style.scss
-
BINlibrary-activity/src/assets/images/192logo.png
-
BINlibrary-activity/src/assets/images/address-icon1.png
-
BINlibrary-activity/src/assets/images/address-icon2.png
-
BINlibrary-activity/src/assets/images/address-icon3.png
-
BINlibrary-activity/src/assets/images/address-icon4.png
-
BINlibrary-activity/src/assets/images/address-icon5-1.png
-
BINlibrary-activity/src/assets/images/address-icon5.png
-
BINlibrary-activity/src/assets/images/address-icon6.png
-
BINlibrary-activity/src/assets/images/order-icon.png
-
16library-activity/src/components/tabBar/index.vue
-
12library-activity/src/main.js
-
138library-activity/src/router/index.js
-
93library-activity/src/views/aboutUs/aboutUs.vue
-
176library-activity/src/views/cart/cart.vue
-
43library-activity/src/views/cart/result.vue
-
97library-activity/src/views/feedback/feedback.vue
-
63library-activity/src/views/index.vue
-
152library-activity/src/views/mine/mine.vue
-
182library-activity/src/views/myAddress/addAddress.vue
-
170library-activity/src/views/myAddress/myAddress.vue
-
566library-activity/src/views/order/order.vue
@ -0,0 +1,163 @@ |
|||
.main { |
|||
width: 100%; |
|||
overflow-x: hidden; |
|||
background-color: #F4F4FC; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.overflow-txt-only{ |
|||
word-break: break-all; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
.overflow-txt{ |
|||
word-break: break-all; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.top-header{ |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 .32rem; |
|||
height: 1rem; |
|||
background-color: #fff; |
|||
box-shadow: 0 .06rem .1rem 1px #EFECEC; |
|||
z-index: 999; |
|||
.back{ |
|||
display: block; |
|||
width: .5rem; |
|||
height: .5rem; |
|||
background: url('@assets/images/back.png') no-repeat transparent; |
|||
background-size: .5rem .5rem; |
|||
} |
|||
P{ |
|||
flex: 1; |
|||
text-align: center; |
|||
font-size: .4rem; |
|||
} |
|||
.setting-header{ |
|||
font-size: .32rem; |
|||
} |
|||
} |
|||
|
|||
.list-top{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
.top-info{ |
|||
display: flex; |
|||
flex: 1; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.active-name{ |
|||
position: relative; |
|||
padding: 0 0.375rem; |
|||
font-size: .34rem; |
|||
font-weight: bold; |
|||
background: url('@assets/images/gift.png') no-repeat left center; |
|||
background-size: 0.3rem 0.3rem; |
|||
&::after{ |
|||
position: absolute; |
|||
right: 0; |
|||
top: 50%; |
|||
content: ""; |
|||
width: .16rem; |
|||
height: .16rem; |
|||
background: url('@assets/images/arrow.png') no-repeat center center; |
|||
background-size:.16rem .16rem; |
|||
transform: translateY(-50%) |
|||
} |
|||
} |
|||
} |
|||
|
|||
.dealer{ |
|||
padding-left: .3rem; |
|||
font-size: .28rem; |
|||
background: url('@assets/images/dealer.png') no-repeat left center; |
|||
background-size: .22rem .22rem; |
|||
} |
|||
|
|||
.product-cont{ |
|||
flex: 1; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
.product-img{ |
|||
width: 1.2rem; |
|||
height: 1.6rem; |
|||
margin: 0 0.16rem 0 0; |
|||
background-color: #f1f1f1; |
|||
border-radius: 0.04rem; |
|||
overflow: hidden; |
|||
} |
|||
.product-txt{ |
|||
flex: 1; |
|||
.product-info{ |
|||
h4{ |
|||
font-size: .28rem; |
|||
} |
|||
.author-date{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
margin: .06rem 0; |
|||
p{ |
|||
font-size: .2rem; |
|||
padding: 0 .08rem; |
|||
margin-right: 0.1rem; |
|||
background-color: #FFF5E2; |
|||
color: #C47925; |
|||
} |
|||
} |
|||
.intro{ |
|||
font-size: .24rem; |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
.product-bottom{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
color: #757676; |
|||
.product-price{ |
|||
span{ |
|||
display: inline-block; |
|||
font-size: .36rem; |
|||
font-weight: bold; |
|||
color: #000; |
|||
margin-right: 0.13rem; |
|||
.rmb{ |
|||
font-style: normal; |
|||
font-size: .24rem; |
|||
text-decoration: none; |
|||
color: #000; |
|||
} |
|||
} |
|||
i{ |
|||
font-style: normal; |
|||
text-decoration: line-through; |
|||
color: #FF3871; |
|||
} |
|||
} |
|||
.item-delt{ |
|||
width: .36rem; |
|||
height: .36rem; |
|||
background: url('@assets/images/address-icon5-1.png') no-repeat center center #FF3871; |
|||
background-size: .26rem .26rem; |
|||
border-radius: 0.04rem; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
After Width: 192 | Height: 192 | Size: 4.3 KiB |
|
After Width: 28 | Height: 28 | Size: 2.0 KiB |
|
After Width: 40 | Height: 40 | Size: 1.2 KiB |
|
After Width: 26 | Height: 26 | Size: 929 B |
|
After Width: 26 | Height: 26 | Size: 903 B |
|
After Width: 26 | Height: 26 | Size: 1.6 KiB |
|
After Width: 26 | Height: 26 | Size: 660 B |
|
After Width: 32 | Height: 32 | Size: 674 B |
|
After Width: 48 | Height: 20 | Size: 831 B |
@ -0,0 +1,93 @@ |
|||
<template> |
|||
<div class="main"> |
|||
<div class="top-header"> |
|||
<span class="back" @click="toBack"></span> |
|||
<p>关于我们</p> |
|||
</div> |
|||
<div class="about-main"> |
|||
<img src="@assets/images/192logo.png" alt="" /> |
|||
<p>爱图图书馆</p> |
|||
<span class="verinfo">Version 10.00.1</span> |
|||
<!-- <div class="go-evaluate" @click="toFeedback">去评价</div> --> |
|||
<div class="about-bottom"> |
|||
<span>版权信息</span> |
|||
<span>《软件许可使用协议》</span> |
|||
</div> |
|||
</div> |
|||
<!-- <TabBar :tabCur.sync="tabCur" /> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, onMounted, getCurrentInstance, toRefs } from 'vue' |
|||
export default { |
|||
name: 'AboutUs', |
|||
setup() { |
|||
const { proxy } = getCurrentInstance() |
|||
let data = reactive({ |
|||
tabCur: 1 |
|||
}) |
|||
onMounted(() => {}) |
|||
let toBack = () => { |
|||
proxy.$router.go(-1); |
|||
} |
|||
let toFeedback = () => { |
|||
proxy.$router.push({ path: '/Feedback' }) |
|||
} |
|||
return { |
|||
...toRefs(data), |
|||
toBack, |
|||
toFeedback |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.about-main{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
height: calc(100vh - 1rem); |
|||
padding: 1rem 0.32rem 0 0.32rem; |
|||
background-color: #fff; |
|||
img{ |
|||
display: block; |
|||
width: 2.2rem; |
|||
margin-top: 1.6rem; |
|||
border-radius: 0.15rem; |
|||
} |
|||
p{ |
|||
font-size: .4rem; |
|||
font-weight: bold; |
|||
margin-top: 0.26rem; |
|||
} |
|||
.verinfo{ |
|||
font-size: .3rem; |
|||
opacity: 0.6; |
|||
} |
|||
.go-evaluate{ |
|||
font-size: .3rem; |
|||
width: 100%; |
|||
padding: 0.16rem 0; |
|||
margin: 1rem .26rem 0 .26rem; |
|||
border-top: 1px solid #C6C6E2; |
|||
border-bottom: 1px solid #C6C6E2; |
|||
background: url('@assets/images/arrow.png') no-repeat right center; |
|||
background-size: .16rem .16rem; |
|||
} |
|||
.about-bottom{ |
|||
position: fixed; |
|||
bottom: 1.2rem; |
|||
left: 50%; |
|||
font-size: .24rem; |
|||
opacity: 0.4; |
|||
text-align: center; |
|||
transform: translateX(-50%); |
|||
span{ |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,97 @@ |
|||
<template> |
|||
<div class="main"> |
|||
<div class="top-header"> |
|||
<span class="back" @click="toBack"></span> |
|||
<p>反馈或建议</p> |
|||
</div> |
|||
<div class="feedBack-main"> |
|||
<div class="feedBack-cont"> |
|||
<div class="feedBack-user"> |
|||
<div class="user-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<p>张秀才</p> |
|||
</div> |
|||
<div class="fb-input"> |
|||
<textarea placeholder="HI，请留下您的反馈或建议吧!"></textarea> |
|||
</div> |
|||
</div> |
|||
<div class="feedback-btn">提交</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, onMounted, getCurrentInstance, toRefs } from 'vue' |
|||
export default { |
|||
name: 'Feedback', |
|||
setup() { |
|||
const { proxy } = getCurrentInstance() |
|||
let data = reactive({ |
|||
}) |
|||
onMounted(() => {}) |
|||
let toBack = () => { |
|||
proxy.$router.go(-1); |
|||
} |
|||
return { |
|||
...toRefs(data), |
|||
toBack |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.feedBack-main{ |
|||
height: calc(100vh - 1rem); |
|||
padding: 1rem 0.32rem 0 0.32rem; |
|||
background-color: #fff; |
|||
.feedBack-cont{ |
|||
margin-top: 1.14rem; |
|||
background-color: #fff; |
|||
box-shadow: 0px 0.03rem .6rem 1px rgba(0,0,0,0.08); |
|||
border-radius: .08rem; |
|||
.feedBack-user{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
.user-img{ |
|||
width: 1.24rem; |
|||
height: 1.24rem; |
|||
margin: -.4rem .24rem 0 .36rem; |
|||
border-radius: 50%; |
|||
background-color: #f1f1f1; |
|||
overflow: hidden; |
|||
} |
|||
p{ |
|||
font-size: .4rem; |
|||
padding-top: .1rem; |
|||
} |
|||
} |
|||
.fb-input{ |
|||
margin-top: .24rem; |
|||
padding: .3rem .32rem; |
|||
border-top: 1px solid #C6C6E2; |
|||
textarea{ |
|||
width: calc(100% - .48rem); |
|||
height: 2.4rem; |
|||
padding: .24rem; |
|||
font-size: .24rem; |
|||
background-color: #F1F1F9; |
|||
color: #717274; |
|||
border-radius: .08rem; |
|||
} |
|||
} |
|||
} |
|||
.feedback-btn{ |
|||
width: 4.48rem; |
|||
height: .98rem; |
|||
line-height: .98rem; |
|||
margin: 1.2rem auto 0 auto; |
|||
text-align: center; |
|||
background: #5A86F4; |
|||
border-radius: .5rem; |
|||
font-size: .36rem; |
|||
color: #fff; } |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,182 @@ |
|||
<template> |
|||
<div class="main"> |
|||
<div class="top-header"> |
|||
<span class="back" @click="toBack"></span> |
|||
<p>添加收货地址</p> |
|||
</div> |
|||
<div class="address-form"> |
|||
<van-form ref="form" @submit="onSubmit"> |
|||
<van-cell-group inset> |
|||
<div class="form01"> |
|||
<van-field |
|||
v-model="username" |
|||
name="收货人" |
|||
label="收货人" |
|||
placeholder="用户名" |
|||
:rules="[{ required: true, message: '请填写用户名' }]" |
|||
/> |
|||
<van-field |
|||
v-model="phone" |
|||
type="number" |
|||
name="手机号码" |
|||
label="手机号码" |
|||
placeholder="手机号码" |
|||
:rules="[{ required: true, message: '请填写手机号码' }]" |
|||
/> |
|||
<van-field |
|||
v-model="area" |
|||
is-link |
|||
readonly |
|||
name="area" |
|||
label="所在地区" |
|||
placeholder="省市区县、乡镇" |
|||
:rules="[{ required: true, message: '请选择所在地区' }]" |
|||
@click="showArea = true" |
|||
> |
|||
<template v-slot:right-icon> |
|||
<img style="width: 0.32rem; height: 0.32rem" |
|||
src="@assets/images/address-icon6.png" alt=""> |
|||
<span style="color: #1C202D;">定位</span> |
|||
</template> |
|||
</van-field> |
|||
<van-popup v-model:show="showArea" position="bottom"> |
|||
<van-area |
|||
:area-list="areaList" |
|||
@confirm="onConfirm" |
|||
@cancel="showArea = false" |
|||
/> |
|||
</van-popup> |
|||
<van-field |
|||
v-model="place" |
|||
rows="2" |
|||
autosize |
|||
type="textarea" |
|||
name="详细地址" |
|||
label="详细地址" |
|||
maxlength="50" |
|||
placeholder="楼道、街牌号等" |
|||
:rules="[{ required: true, message: '请填写详细地址' }]" |
|||
/> |
|||
</div> |
|||
<div class="form02"> |
|||
<van-field name="place" label="设为默认收货地址"> |
|||
<template #input> |
|||
<van-checkbox v-model="isChecked" shape="square" /> |
|||
</template> |
|||
</van-field> |
|||
</div> |
|||
</van-cell-group> |
|||
<div style="position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);"> |
|||
<van-button round block type="primary" native-type="submit"> |
|||
提交 |
|||
</van-button> |
|||
</div> |
|||
</van-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, getCurrentInstance, toRefs, ref } from 'vue' |
|||
import { areaList } from '@vant/area-data' |
|||
export default { |
|||
name: 'AddAddress', |
|||
setup() { |
|||
const { proxy } = getCurrentInstance() |
|||
let data = reactive({ |
|||
isSetting: false, |
|||
username: '', |
|||
phone: '', |
|||
area: '', |
|||
place: '', |
|||
isChecked: false, |
|||
showArea: false, |
|||
}) |
|||
let toBack = () => { |
|||
proxy.$router.go(-1) |
|||
} |
|||
let onConfirm = (value) => { |
|||
data.showArea = false |
|||
data.area = value.map((item) => item.name).join(' ') |
|||
} |
|||
let onSubmit = (values) => { |
|||
console.log('submit',values) |
|||
} |
|||
return { |
|||
...toRefs(data), |
|||
areaList, |
|||
toBack, |
|||
onConfirm, |
|||
onSubmit |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.address-form { |
|||
height: calc(100vh - 1rem); |
|||
padding: 1.3rem 0.32rem 0 0.32rem; |
|||
background-color: #fff; |
|||
.form01{ |
|||
padding: 0 .3rem; |
|||
background-color: #fff; |
|||
box-shadow: 0px .03rem .6rem 1px rgba(0,0,0,0.08); |
|||
border-radius: .08rem; |
|||
:deep(.van-icon){ |
|||
&::before{ |
|||
display: none; |
|||
} |
|||
} |
|||
:deep(.van-field__right-icon){ |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: .28rem; |
|||
} |
|||
} |
|||
.form02{ |
|||
margin-top: .2rem; |
|||
padding: 0 .3rem; |
|||
background-color: #fff; |
|||
box-shadow: 0px .03rem .6rem 1px rgba(0,0,0,0.08); |
|||
border-radius: .08rem; |
|||
:deep(.van-field__label){ |
|||
width: auto; |
|||
} |
|||
:deep(.van-field__control--custom){ |
|||
justify-content: flex-end; |
|||
} |
|||
:deep(.van-checkbox__icon .van-icon){ |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:deep(.van-cell-group--inset){ |
|||
background: transparent; |
|||
border-radius: 0; |
|||
margin: 0; |
|||
overflow: visible; |
|||
} |
|||
:deep(.van-cell){ |
|||
padding: .32rem 0; |
|||
font-size: .28rem; |
|||
background: transparent; |
|||
&::after{ |
|||
right: 0; |
|||
left: 0; |
|||
border-color:#C6C6E2; |
|||
} |
|||
|
|||
.van-field__label{ |
|||
color: #1C202D; |
|||
} |
|||
} |
|||
|
|||
:deep(.van-button--block){ |
|||
width: 4.4rem; |
|||
height: .98rem; |
|||
font-size: .36rem; |
|||
background: #5A86F4; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,170 @@ |
|||
<template> |
|||
<div class="main"> |
|||
<div class="top-header"> |
|||
<span class="back" @click="toBack"></span> |
|||
<p>我的收货地址</p> |
|||
<span class="setting-header" @click="isSetting = !isSetting">{{ !isSetting ? '管理' : '完成'}}</span> |
|||
</div> |
|||
<div class="address-main"> |
|||
<div class="address-list"> |
|||
<div class="address-item"> |
|||
<div class="address-cont"> |
|||
<div class="address-icon"> |
|||
<img src="@assets/images/address-icon1.png" alt="" /> |
|||
</div> |
|||
<div class="address-txt"> |
|||
<div class="txt-info"> |
|||
<span>收货人：是路飞啊</span> |
|||
<span class="address-phone">15376587658</span> |
|||
</div> |
|||
<div class="place">洪山科技创业中心C栋武汉哈哈科技有限公司5栋2单元这是俩拍的地址</div> |
|||
</div> |
|||
<span class="edit-btn" @click="toAddOrEdit"></span> |
|||
</div> |
|||
<div class="setting-handle" v-if="isSetting"> |
|||
<span class="active">默认地址</span> |
|||
<span>删除</span> |
|||
</div> |
|||
<span class="mr-flag">默认</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="address-bottom" @click="toAddOrEdit">添加收货地址</div> |
|||
</div> |
|||
<!-- <TabBar :tabCur.sync="tabCur" /> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reactive, onMounted, getCurrentInstance, toRefs } from 'vue' |
|||
export default { |
|||
name: 'MyAddress', |
|||
setup() { |
|||
const { proxy } = getCurrentInstance() |
|||
let data = reactive({ |
|||
isSetting: false |
|||
}) |
|||
onMounted(() => {}) |
|||
let toBack = () => { |
|||
proxy.$router.go(-1); |
|||
} |
|||
let toAddOrEdit = () => { |
|||
proxy.$router.push({ path: '/AddAddress' }) |
|||
} |
|||
return { |
|||
...toRefs(data), |
|||
toBack, |
|||
toAddOrEdit |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.address-main{ |
|||
height: calc(100vh - 1rem); |
|||
padding: 1.3rem 0.32rem 0 0.32rem; |
|||
background-color: #fff; |
|||
} |
|||
.address-item{ |
|||
position: relative; |
|||
margin-bottom: .2rem; |
|||
background: #fff; |
|||
box-shadow: 0px 0.03rem .6rem 1px rgba(0,0,0,0.08); |
|||
border-radius: 0.08rem; |
|||
.address-cont{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: .3rem .24rem; |
|||
.address-icon{ |
|||
width: .58rem; |
|||
height: .58rem; |
|||
border-radius: 50%; |
|||
background-color: #83EEFF; |
|||
img{ |
|||
display: block; |
|||
width: .28rem; |
|||
margin: 0 auto; |
|||
transform: translateY(50%); |
|||
} |
|||
} |
|||
.address-txt{ |
|||
flex: 1; |
|||
margin: 0 .29rem 0 .24rem; |
|||
.txt-info{ |
|||
font-size: .3rem; |
|||
.address-phone{ |
|||
margin-left: .4rem; |
|||
|
|||
} |
|||
} |
|||
.place{ |
|||
font-size: .26rem; |
|||
opacity: 0.6; |
|||
margin-top: .1rem; |
|||
} |
|||
} |
|||
.edit-btn{ |
|||
width: .4rem; |
|||
height: .4rem; |
|||
background: url('@assets/images/address-icon2.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
.setting-handle{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-top: 1px solid #C6C6E2; |
|||
padding: .2rem .24rem; |
|||
span{ |
|||
display: block; |
|||
font-size: .26rem; |
|||
padding-left: .42rem; |
|||
&:first-child{ |
|||
background: url('@assets/images/address-icon4.png') no-repeat left center; |
|||
background-size: .26rem .26rem; |
|||
&.active{ |
|||
color: #5A86F4; |
|||
background: url('@assets/images/address-icon3.png') no-repeat left center; |
|||
background-size: .26rem .26rem; |
|||
} |
|||
} |
|||
&:last-child{ |
|||
background: url('@assets/images/address-icon5.png') no-repeat left center; |
|||
background-size: .26rem .26rem; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
.mr-flag{ |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
display: block; |
|||
height: .38rem; |
|||
line-height: .38rem; |
|||
padding: 0 .1rem; |
|||
font-size: .22rem; |
|||
color: #fff; |
|||
background-color: #5A86F4; |
|||
border-radius: 0 .08rem 0 .08rem; |
|||
} |
|||
} |
|||
.address-bottom{ |
|||
position: fixed; |
|||
bottom: 1.2rem; |
|||
left: 50%; |
|||
width: 4.48rem; |
|||
height: .98rem; |
|||
line-height: .98rem; |
|||
transform: translateX(-50%); |
|||
font-size: .36rem; |
|||
text-align: center; |
|||
color: #fff; |
|||
background-color: #5A86F4; |
|||
border-radius: .5rem; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,566 @@ |
|||
<template> |
|||
<div class="main"> |
|||
<div class="top-header"> |
|||
<span class="back" @click="toBack"></span> |
|||
<p>我的订单</p> |
|||
</div> |
|||
<div class="order-main"> |
|||
<van-tabs v-model:active="active" swipeable> |
|||
<van-tab v-for="item in tabTitle" :title="item.name"> |
|||
<div v-show="active === 0" class="all-order"> |
|||
<div class="order-item"> |
|||
<div class="list-top"> |
|||
<div class="top-info"> |
|||
<p class="active-name"> |
|||
你选书，我买单<i></i> |
|||
</p> |
|||
</div> |
|||
<div class="order-status dshe">待审核</div> |
|||
</div> |
|||
<div class="product-cont"> |
|||
<div class="product-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="product-txt"> |
|||
<div class="product-info"> |
|||
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4> |
|||
<div class="author-date"> |
|||
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p> |
|||
<p class="date overflow-txt-only">2023年07月</p> |
|||
</div> |
|||
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div> |
|||
</div> |
|||
</div> |
|||
<div class="order-book-price"> |
|||
<span><i>￥</i>29.0</span> |
|||
<span>X1</span> |
|||
</div> |
|||
</div> |
|||
<div class="order-dealer"> |
|||
<p class="dealer">京东商城</p> |
|||
<p class="order-pay">实付款<span><i>￥</i>0</span></p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="order-item"> |
|||
<div class="list-top"> |
|||
<div class="top-info"> |
|||
<p class="active-name"> |
|||
你选书，我买单<i></i> |
|||
</p> |
|||
</div> |
|||
<div class="order-status dhuo">待发货</div> |
|||
</div> |
|||
<div class="product-cont"> |
|||
<div class="product-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="product-txt"> |
|||
<div class="product-info"> |
|||
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4> |
|||
<div class="author-date"> |
|||
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p> |
|||
<p class="date overflow-txt-only">2023年07月</p> |
|||
</div> |
|||
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div> |
|||
</div> |
|||
</div> |
|||
<div class="order-book-price"> |
|||
<span><i>￥</i>29.0</span> |
|||
<span>X1</span> |
|||
</div> |
|||
</div> |
|||
<div class="order-dealer"> |
|||
<p class="dealer">京东商城</p> |
|||
<p class="order-pay">实付款<span><i>￥</i>0</span></p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="order-item"> |
|||
<div class="list-top"> |
|||
<div class="top-info"> |
|||
<p class="active-name"> |
|||
你选书，我买单<i></i> |
|||
</p> |
|||
</div> |
|||
<div class="order-status dhuo">待收货</div> |
|||
</div> |
|||
<div class="product-cont"> |
|||
<div class="product-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="product-txt"> |
|||
<div class="product-info"> |
|||
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4> |
|||
<div class="author-date"> |
|||
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p> |
|||
<p class="date overflow-txt-only">2023年07月</p> |
|||
</div> |
|||
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div> |
|||
</div> |
|||
</div> |
|||
<div class="order-book-price"> |
|||
<span><i>￥</i>29.0</span> |
|||
<span>X1</span> |
|||
</div> |
|||
</div> |
|||
<div class="order-dealer"> |
|||
<p class="dealer">京东商城</p> |
|||
<p class="order-pay">实付款<span><i>￥</i>0</span></p> |
|||
</div> |
|||
<div class="order-bottom"> |
|||
<span class="order-btn01">查看物流</span> |
|||
<span class="order-btn02">确认收货</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="order-item"> |
|||
<div class="list-top"> |
|||
<div class="top-info"> |
|||
<p class="active-name"> |
|||
你选书，我买单<i></i> |
|||
</p> |
|||
</div> |
|||
<div class="order-status">已完成</div> |
|||
</div> |
|||
<div class="product-cont"> |
|||
<div class="product-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="product-txt"> |
|||
<div class="product-info"> |
|||
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4> |
|||
<div class="author-date"> |
|||
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p> |
|||
<p class="date overflow-txt-only">2023年07月</p> |
|||
</div> |
|||
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div> |
|||
</div> |
|||
</div> |
|||
<div class="order-book-price"> |
|||
<span><i>￥</i>29.0</span> |
|||
<span>X1</span> |
|||
</div> |
|||
</div> |
|||
<div class="order-dealer"> |
|||
<p class="dealer">京东商城</p> |
|||
<p class="order-pay">实付款<span><i>￥</i>0</span></p> |
|||
</div> |
|||
<div class="order-bottom"> |
|||
<span class="order-btn01">查看物流</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="order-item"> |
|||
<div class="list-top"> |
|||
<div class="top-info"> |
|||
<p class="active-name"> |
|||
你选书，我买单<i></i> |
|||
</p> |
|||
</div> |
|||
<div class="order-status">已取消</div> |
|||
</div> |
|||
<div class="product-cont"> |
|||
<div class="product-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="product-txt"> |
|||
<div class="product-info"> |
|||
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4> |
|||
<div class="author-date"> |
|||
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p> |
|||
<p class="date overflow-txt-only">2023年07月</p> |
|||
</div> |
|||
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div> |
|||
</div> |
|||
</div> |
|||
<div class="order-book-price"> |
|||
<span><i>￥</i>29.0</span> |
|||
<span>X1</span> |
|||
</div> |
|||
</div> |
|||
<div class="order-dealer"> |
|||
<p class="dealer">京东商城</p> |
|||
<p class="order-pay">实付款<span><i>￥</i>0</span></p> |
|||
</div> |
|||
<div class="order-bottom"> |
|||
<span class="order-btn01">删除订单</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-show="active === 1" class="all-order"> |
|||
<div class="order-item"> |
|||
<div class="list-top"> |
|||
<div class="top-info"> |
|||
<p class="active-name"> |
|||
你选书，我买单<i></i> |
|||
</p> |
|||
</div> |
|||
<div class="order-status dshe">待审核</div> |
|||
</div> |
|||
<div class="product-cont"> |
|||
<div class="product-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="product-txt"> |
|||
<div class="product-info"> |
|||
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4> |
|||
<div class="author-date"> |
|||
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p> |
|||
<p class="date overflow-txt-only">2023年07月</p> |
|||
</div> |
|||
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div> |
|||
</div> |
|||
</div> |
|||
<div class="order-book-price"> |
|||
<span><i>￥</i>29.0</span> |
|||
<span>X1</span> |
|||
</div> |
|||
</div> |
|||
<div class="order-dealer"> |
|||
<p class="dealer">京东商城</p> |
|||
<p class="order-pay">实付款<span><i>￥</i>0</span></p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div v-show="active === 2" class="all-order"> |
|||
<div class="order-item"> |
|||
<div class="list-top"> |
|||
<div class="top-info"> |
|||
<p class="active-name"> |
|||
你选书，我买单<i></i> |
|||
</p> |
|||
</div> |
|||
<div class="order-status dhuo">待发货</div> |
|||
</div> |
|||
<div class="product-cont"> |
|||
<div class="product-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="product-txt"> |
|||
<div class="product-info"> |
|||
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4> |
|||
<div class="author-date"> |
|||
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p> |
|||
<p class="date overflow-txt-only">2023年07月</p> |
|||
</div> |
|||
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div> |
|||
</div> |
|||
</div> |
|||
<div class="order-book-price"> |
|||
<span><i>￥</i>29.0</span> |
|||
<span>X1</span> |
|||
</div> |
|||
</div> |
|||
<div class="order-dealer"> |
|||
<p class="dealer">京东商城</p> |
|||
<p class="order-pay">实付款<span><i>￥</i>0</span></p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-show="active === 3" class="all-order"> |
|||
<div class="order-item"> |
|||
<div class="list-top"> |
|||
<div class="top-info"> |
|||
<p class="active-name"> |
|||
你选书，我买单<i></i> |
|||
</p> |
|||
</div> |
|||
<div class="order-status dhuo">待收货</div> |
|||
</div> |
|||
<div class="product-cont"> |
|||
<div class="product-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="product-txt"> |
|||
<div class="product-info"> |
|||
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4> |
|||
<div class="author-date"> |
|||
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p> |
|||
<p class="date overflow-txt-only">2023年07月</p> |
|||
</div> |
|||
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div> |
|||
</div> |
|||
</div> |
|||
<div class="order-book-price"> |
|||
<span><i>￥</i>29.0</span> |
|||
<span>X1</span> |
|||
</div> |
|||
</div> |
|||
<div class="order-dealer"> |
|||
<p class="dealer">京东商城</p> |
|||
<p class="order-pay">实付款<span><i>￥</i>0</span></p> |
|||
</div> |
|||
<div class="order-bottom"> |
|||
<span class="order-btn01">查看物流</span> |
|||
<span class="order-btn02">确认收货</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-show="active === 4" class="all-order"> |
|||
<div class="order-item"> |
|||
<div class="list-top"> |
|||
<div class="top-info"> |
|||
<p class="active-name"> |
|||
你选书，我买单<i></i> |
|||
</p> |
|||
</div> |
|||
<div class="order-status">已完成</div> |
|||
</div> |
|||
<div class="product-cont"> |
|||
<div class="product-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="product-txt"> |
|||
<div class="product-info"> |
|||
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4> |
|||
<div class="author-date"> |
|||
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p> |
|||
<p class="date overflow-txt-only">2023年07月</p> |
|||
</div> |
|||
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div> |
|||
</div> |
|||
</div> |
|||
<div class="order-book-price"> |
|||
<span><i>￥</i>29.0</span> |
|||
<span>X1</span> |
|||
</div> |
|||
</div> |
|||
<div class="order-dealer"> |
|||
<p class="dealer">京东商城</p> |
|||
<p class="order-pay">实付款<span><i>￥</i>0</span></p> |
|||
</div> |
|||
<div class="order-bottom"> |
|||
<span class="order-btn01">查看物流</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-show="active === 5" class="all-order"> |
|||
<div class="order-item"> |
|||
<div class="list-top"> |
|||
<div class="top-info"> |
|||
<p class="active-name"> |
|||
你选书，我买单<i></i> |
|||
</p> |
|||
</div> |
|||
<div class="order-status">已取消</div> |
|||
</div> |
|||
<div class="product-cont"> |
|||
<div class="product-img"> |
|||
<img src="" alt="" /> |
|||
</div> |
|||
<div class="product-txt"> |
|||
<div class="product-info"> |
|||
<h4 class="overflow-txt-only">秒懂AI提问：让人工智能开发大脑</h4> |
|||
<div class="author-date"> |
|||
<p class="author overflow-txt-only">秋叶 刘进新 姜梅 定秋枫</p> |
|||
<p class="date overflow-txt-only">2023年07月</p> |
|||
</div> |
|||
<div class="intro overflow-txt">精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个案例带你玩</div> |
|||
</div> |
|||
</div> |
|||
<div class="order-book-price"> |
|||
<span><i>￥</i>29.0</span> |
|||
<span>X1</span> |
|||
</div> |
|||
</div> |
|||
<div class="order-dealer"> |
|||
<p class="dealer">京东商城</p> |
|||
<p class="order-pay">实付款<span><i>￥</i>0</span></p> |
|||
</div> |
|||
<div class="order-bottom"> |
|||
<span class="order-btn01">删除订单</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</van-tab> |
|||
</van-tabs> |
|||
</div> |
|||
|
|||
<!-- <TabBar :tabCur.sync="tabCur" /> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// import { Toast } from 'vant' |
|||
import { reactive, computed, onMounted, getCurrentInstance, toRefs } from 'vue' |
|||
// import TabBar from '@/components/tabBar/index.vue' |
|||
export default { |
|||
name: 'Order', |
|||
// components: { TabBar }, |
|||
setup() { |
|||
const { proxy } = getCurrentInstance() |
|||
let data = reactive({ |
|||
tabCur: 1, |
|||
active: 0, |
|||
tabTitle: [ |
|||
{ |
|||
value: '0', |
|||
name: '全部', |
|||
}, |
|||
{ |
|||
value: '1', |
|||
name: '待审核', |
|||
}, |
|||
{ |
|||
value: '2', |
|||
name: '待发货', |
|||
}, |
|||
{ |
|||
value: '3', |
|||
name: '待收货', |
|||
}, |
|||
{ |
|||
value: '4', |
|||
name: '已完成', |
|||
}, |
|||
{ |
|||
value: '5', |
|||
name: '已取消', |
|||
}, |
|||
], |
|||
}) |
|||
onMounted(() => {}) |
|||
let toBack = () => { |
|||
proxy.$router.go(-1) |
|||
} |
|||
let toMoreOrder = () => { |
|||
location.href = './' |
|||
} |
|||
return { |
|||
...toRefs(data), |
|||
toBack, |
|||
toMoreOrder, |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.order-main { |
|||
padding: 2rem 0.32rem 0 0.32rem; |
|||
:deep(.van-tabs__wrap){ |
|||
position: fixed; |
|||
top: 1rem; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 99; |
|||
background-color: #fff; |
|||
} |
|||
:deep(.van-tab) { |
|||
font-size: 0.32rem; |
|||
color: #858585; |
|||
// margin-left: -0.18rem; |
|||
} |
|||
:deep(.van-tab--grow) { |
|||
padding: 0 0.18rem; |
|||
z-index: 222; |
|||
} |
|||
:deep(.van-tabs__nav) { |
|||
background: transparent; |
|||
padding: 0; |
|||
.van-tab--active { |
|||
font-weight: bold; |
|||
color: #000; |
|||
} |
|||
} |
|||
:deep(.van-tabs__line) { |
|||
width: 0.48rem; |
|||
height: 0.2rem; |
|||
bottom: 10px; |
|||
background: url('@assets/images/order-icon.png') no-repeat; |
|||
background-size: 0.48rem 0.2rem; |
|||
} |
|||
:deep(.van-tabs__content--animated) { |
|||
overflow: auto; |
|||
} |
|||
} |
|||
|
|||
.order-item { |
|||
padding: 0.2rem 0.24rem 0.26rem 0.24rem; |
|||
margin-bottom: .2rem; |
|||
background: #fff; |
|||
// box-shadow: 0px 0.03rem 0.6rem 1px rgba(0, 0, 0, 0.08); |
|||
border-radius: 0.08rem; |
|||
.product-cont { |
|||
margin-top: 0.3rem; |
|||
} |
|||
.order-book-price { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
text-align: right; |
|||
span { |
|||
&:first-child { |
|||
font-size: 0.32rem; |
|||
font-weight: bold; |
|||
i { |
|||
font-style: normal; |
|||
font-size: 0.2rem; |
|||
} |
|||
} |
|||
&:last-child { |
|||
font-size: 0.24rem; |
|||
} |
|||
} |
|||
} |
|||
.order-dealer{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: .26rem 0 0 0; |
|||
.order-pay{ |
|||
font-size: .32rem; |
|||
span { |
|||
font-size: .4rem; |
|||
i{ |
|||
font-style: normal; |
|||
font-size: 0.24rem; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.order-bottom{ |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
margin-top: .3rem; |
|||
padding-top: .3rem; |
|||
border-top: 1px solid #C6C6E2; |
|||
span{ |
|||
display: block; |
|||
padding: 0 .24rem; |
|||
margin-left: .3rem; |
|||
height: .6rem; |
|||
line-height: .64rem; |
|||
font-size: .28rem; |
|||
border: 0.02rem solid #000; |
|||
border-radius: .5rem; |
|||
&.order-btn02{ |
|||
color: #5A86F4; |
|||
border-color: #5A86F4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.order-status { |
|||
font-size: 0.28rem; |
|||
color: #666; |
|||
&.dshe { |
|||
color: #5a86f4; |
|||
} |
|||
&.dhuo { |
|||
color: #ffb625; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue