Skip to content

J
jiedao-app-customer-new-master
Commit 8d5a1705 authored by lizhan's avatar lizhan
Browse files
Options

📝 【TASK-20240809-01】TASK:APP确定订单页静态页面完成

parent 36dd8d58
Show whitespace changes
Inline Side-by-side
Showing with 471 additions and 33 deletions
src/pages.json
View file @ 8d5a1705
......@@ -291,6 +291,12 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/order_mail/order_mail",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
src/pages/activity_detail/activity_detail.vue
View file @ 8d5a1705
......@@ -14,25 +14,25 @@
>
<view class="activity-cell">
<view class="cell-label">积分说明</view>
<view class="cell-centent">
<view class="cell-content">
<image class="cell-image" src="../../static/img/score_b.png"></image>
<view class="cell-text">10</view>
</view>
</view>
<view class="activity-cell">
<view class="cell-label">累计最高积分</view>
<view class="cell-centent">
<view class="cell-content">
<image class="cell-image" src="../../static/img/score_b.png"></image>
<view class="cell-text">100</view>
</view>
</view>
<view class="activity-cell">
<view class="cell-label">有效期</view>
<view class="cell-centent"> 2024-12-12 12:12:12 </view>
<view class="cell-content"> 2024-12-12 12:12:12 </view>
</view>
<view class="activity-cell">
<view class="cell-label">规则说明</view>
<view class="cell-centent"> 每转发并邀请1人成功注册并登录获得10积久300 </view>
<view class="cell-content"> 每转发并邀请1人成功注册并登录获得10积久300 </view>
</view>
</view>
</view>
......@@ -99,7 +99,7 @@ page {
font-size: 24upx;
color: #7f7f7f;
}
.cell-centent {
.cell-content {
max-width: 60%;
display: flex;
align-items: center;
......
src/pages/integral/components/gift.vue
View file @ 8d5a1705
......@@ -18,7 +18,7 @@
</view>
</view>
<view class="gift-content">
<view class="gift-item" v-for="item in 7" :key="item">
<view class="gift-item" v-for="item in 7" :key="item" @click="toMail">
<view class="gift-image-box">
<image class="gift-image" mode="cover" src="../../../static/img/wallet.png"></image>
<view class="gift-tag">
......@@ -41,7 +41,18 @@
</template>
<script>
export default {}
export default {
data() {
return {}
},
methods: {
toMail() {
uni.navigateTo({
url: '/pages/order_mail/order_mail'
})
}
}
}
</script>
<style lang="scss" scoped>
......
src/pages/integral/components/points.vue
View file @ 8d5a1705
<template>
<view class="int">
<view class="int-centent" v-for="item in 6" :key="item" @click="toDetail">
<view class="int-centent-left">
<view class="centent-tag">
<view class="int-content" v-for="item in 6" :key="item" @click="toDetail">
<view class="int-content-left">
<view class="content-tag">
<view class="tag-text">APP注册</view>
</view>
<image class="centent-image" src="../../../static/img/company.png"></image>
<image class="content-image" src="../../../static/img/company.png"></image>
</view>
<view class="int-centent-right">
<view class="centent-title">此处是活动标题</view>
<view class="centent-text"
<view class="int-content-right">
<view class="content-title">此处是活动标题</view>
<view class="content-text"
>此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，</view
>
</view>
......@@ -35,7 +35,7 @@ export default {
height: inherit;
overflow-y: auto;
}
.int-centent {
.int-content {
margin-bottom: 20upx;
width: 100%;
height: 220upx;
......@@ -47,32 +47,32 @@ export default {
margin-bottom: 0;
}
}
.int-centent-left {
.int-content-left {
position: relative;
width: 200upx;
height: inherit;
.centent-image {
.content-image {
width: 200upx;
height: 200upx;
}
}
.int-centent-right {
.int-content-right {
flex: 1;
height: inherit;
padding-left: 20upx;
box-sizing: border-box;
.centent-title {
.content-title {
font-size: 28upx;
color: #333;
margin-bottom: 20upx;
}
.centent-text {
.content-text {
font-size: 20upx;
color: #666;
line-height: 36upx;
}
}
.centent-tag {
.content-tag {
position: absolute;
top: 0;
left: 0;
......
src/pages/log/exchange.vue
View file @ 8d5a1705
......@@ -11,11 +11,11 @@
:src="item == 3 ? '../../static/img/log_type2.png' : '../../static/img/log_type1.png'"
></image>
</div>
<div class="box-centent">
<div class="centent-text">
<div class="box-content">
<div class="content-text">
购买/充值满1000元即可赠送50积 分，满2000元送80积分不可看加满2000元送80积分
</div>
<div class="centent-time">2024-01-01 11:11:11</div>
<div class="content-time">2024-01-01 11:11:11</div>
</div>
<div class="box-right">
<view class="box-right-num">X1</view>
......@@ -82,12 +82,12 @@ page {
object-fit: cover;
}
}
.box-centent {
.box-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.centent-text {
.content-text {
font-size: 24upx;
color: #7f7f7f;
display: -webkit-box;
......@@ -96,7 +96,7 @@ page {
line-clamp: 2;
overflow: hidden;
}
.centent-time {
.content-time {
font-size: 20upx;
color: #7f7f7f;
}
......
src/pages/log/integral.vue
View file @ 8d5a1705
......@@ -11,11 +11,11 @@
:src="item == 3 ? '../../static/img/log_type2.png' : '../../static/img/log_type1.png'"
></image>
</div>
<div class="box-centent">
<div class="centent-text">
<div class="box-content">
<div class="content-text">
购买/充值满1000元即可赠送50积 分，满2000元送80积分不可看加满2000元送80积分
</div>
<div class="centent-time">2024-01-01 11:11:11</div>
<div class="content-time">2024-01-01 11:11:11</div>
</div>
<div class="box-right">
<view class="box-right-num" v-if="item == 2">X1</view>
......@@ -85,12 +85,12 @@ page {
object-fit: cover;
}
}
.box-centent {
.box-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.centent-text {
.content-text {
font-size: 24upx;
color: #7f7f7f;
display: -webkit-box;
......@@ -99,7 +99,7 @@ page {
line-clamp: 2;
overflow: hidden;
}
.centent-time {
.content-time {
font-size: 20upx;
color: #7f7f7f;
}
......
src/pages/order_mail/components/count.vue 0 → 100644
View file @ 8d5a1705
<template>
<view class="count">
<div class="count-btn" @click="reduce" :class="{ 'count-btn-disabled': num <= 1 }">-</div>
<div class="count-text">{{ num }}</div>
<div class="count-btn" :class="{ 'count-btn-disabled': num >= max }" @click="add">+</div>
</view>
</template>
<script>
export default {
props: {
value: {
type: Number,
default: 1
},
max: {
type: Number,
default: 99
}
},
watch: {
value: {
handler(val) {
this.num = val
},
immediate: true
},
num(val) {
this.$emit('input', val)
}
},
data() {
return {
num: 1
}
},
methods: {
add() {
if (this.num < this.max) {
this.num++
}
},
reduce() {
if (this.num > 1) {
this.num--
}
}
}
}
</script>
<style lang="scss" scoped>
.count {
margin: 0;
padding: 0;
display: flex;
width: 130upx;
height: 40upx;
box-sizing: border-box !important;
border-radius: 8upx;
overflow: hidden;
border: 2upx solid #2373ea;
background-color: #045fe7;
.count-btn {
margin: 0;
padding: 0;
display: flex;
width: 28%;
color: #fff;
font-size: 24upx;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.count-text {
margin: 0;
padding: 0;
display: flex;
flex: 1;
font-size: 24upx;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: #fff;
}
.count-btn-disabled {
background-color: #2373ea;
}
}
</style>
src/pages/order_mail/order_mail.vue 0 → 100644
View file @ 8d5a1705
<template>
<view class="mail">
<dHeader :title="'确定订单'"></dHeader>
<view class="container">
<view class="header">
<view class="header-item" @click="menuChange(item)" v-for="item in menu" :key="item.id">
<text class="header-text" :class="{ 'header-active': item.id == current }">
{{ item.text }}
</text>
</view>
</view>
<view class="address">
<view class="address-image">
<image class="img" src="../../static/img/site_address.png"></image>
</view>
<view class="address-content">
<view class="content-text">
美国蒙大拿州中山路朱诺小区911号楼4单元朱诺小区911号楼4单元401
</view>
<view class="content-info">
<view class="info-name">张三</view>
<view class="info-phone">+86 13888888888</view>
</view>
</view>
<view class="address-icon">
<uni-icons type="right" color="#B7B7B7" size="20"></uni-icons>
</view>
</view>
<div class="main">
<div class="main-gift">
<div class="gift">
<div class="gift-image">
<image class="img" src="../../static/img/site_address.png"></image>
</div>
<div class="gift-content">
<div class="gift-content-text">小米官旗米家体脂秤S400智能精准减肥电子称</div>
<div class="gift-cell">
<div class="cell-label">兑换方式</div>
<div class="cell-text">上门领取/包邮到家/邮寄到付</div>
</div>
<div class="gift-cell">
<div class="cell-label">活动时间</div>
<div class="cell-text">2023-10-1至2024-11-01</div>
</div>
</div>
</div>
<div class="main-count">
<count v-model="num"></count>
</div>
</div>
<div class="main-footer">
<input class="inp" placeholder="请输入验证码" />
<view class="btn" @click="handleCode">获取验证码</view>
</div>
</div>
</view>
<view class="remark">
<uni-easyinput
class="input"
type="textarea"
:trim="true"
autoHeight
:inputBorder="false"
:maxlength="100"
v-model.trim="remark"
placeholder="请输入备注"
>
</uni-easyinput>
<view class="placeholder">最多输入100字</view>
</view>
<div class="container-text">
已选{{ num }}件，合计积分：<view class="container-num">{{ num * 10 }}</view
>积分
</div>
<div class="container-btn">提交订单</div>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
import count from './components/count.vue'
export default {
components: {
dHeader,
count
},
data() {
return {
menu: [
{
id: 1,
text: '包邮到家'
},
{
id: 2,
text: '邮寄到付'
},
{
id: 3,
text: '上门领取'
}
],
current: 1,
num: 1,
remark: ''
}
},
methods: {
menuChange(item) {
this.current = item.id
},
handleCode() {
console.log('获取验证码')
}
}
}
</script>
<style lang="scss">
page {
/* #ifdef H5 */
padding-top: 140upx;
/* #endif */
/* #ifdef APP-PLUS */
padding-top: calc(var(--status-bar-height) + 100upx);
/* #endif */
// box-sizing: border-box;
// height: 100%;
// background: linear-gradient(#317beb, #d3e5fe);
}
.mail {
padding: 0 32upx;
}
.container {
background-color: #fff;
border-radius: 20upx;
overflow: hidden;
box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.12), 0 0 12upx rgba(0, 0, 0, 0.04);
}
.header {
display: flex;
height: 72upx;
align-items: center;
justify-content: space-around;
background-color: #d3e6ff;
}
.header-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 24upx;
}
.header-text {
font-size: 24upx !important;
color: #333;
}
.header-active {
padding: 8upx 30upx;
color: #fff;
border-radius: 40upx;
font-size: 28upx;
font-weight: 600;
background-color: #045fe7;
}
.address {
display: flex;
height: 160upx;
align-items: center;
justify-content: space-between;
}
.address-image {
width: 100upx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10upx;
.img {
width: 64upx;
height: 64upx;
object-fit: cover;
}
}
.address-content {
padding: 20upx 0;
flex: 1;
height: inherit;
display: flex;
box-sizing: border-box;
flex-direction: column;
justify-content: space-between;
.content-text {
font-size: 24upx;
color: #333;
}
.content-info {
width: 100%;
display: flex;
color: var(--cb7b);
font-size: 24upx;
align-items: center;
justify-content: space-between;
}
}
.address-icon {
padding-right: 20upx;
width: 80upx;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: right;
}
.main-gift {
padding: 20upx 30upx;
border-top: 1px solid var(--cb7b);
border-bottom: 1px solid var(--cb7b);
.gift {
width: 100%;
display: flex;
}
.gift-image {
position: relative;
margin-right: 8upx;
width: 174upx;
height: 174upx;
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.gift-content {
flex: 1;
display: flex;
height: inherit;
flex-direction: column;
justify-content: space-between;
.gift-content-text {
width: 70%;
font-size: 22upx;
color: var(--cb7b);
}
.gift-cell {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.cell-label {
font-size: 22upx;
color: #333;
}
.cell-text {
font-size: 22upx;
color: var(--cb7b);
}
}
}
.main-count {
display: flex;
height: 100upx;
align-items: center;
justify-content: right;
}
.main-footer {
box-sizing: border-box;
font-size: 24upx;
padding: 0 64upx;
width: 100%;
display: flex;
height: 84upx;
align-items: center;
justify-content: space-between;
.btn {
font-weight: 600;
color: #045fe7;
}
.inp {
font-size: 24upx;
}
}
.remark {
position: relative;
padding: 20upx 30upx;
overflow: hidden;
margin-top: 40upx;
border-radius: 20upx;
background-color: #fff;
box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.12), 0 0 12upx rgba(0, 0, 0, 0.04);
.input {
font-size: 24upx;
}
}
.placeholder {
position: absolute;
bottom: 20upx;
right: 20upx;
font-size: 20upx;
color: #b3b3b3;
}
.container-text {
margin-top: 80upx;
padding: 0 30upx;
width: 100%;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: flex-end;
font-size: 24upx;
color: #333;
}
.container-num {
font-size: 28upx;
color: red;
}
.container-btn {
margin: 20upx auto 0;
width: 470upx;
height: 80upx;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
font-size: 28upx;
color: #fff;
background-color: #045fe7;
border-radius: 40upx;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment