Skip to content

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

📝 【TASK-20240809-02】TASK:APP兑换详情静态页面完成

parent 8d5a1705
Show whitespace changes
Inline Side-by-side
Showing with 302 additions and 58 deletions
src/pages.json
View file @ e6bdbe88
......@@ -297,6 +297,12 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/exchange_detail/exchange_detail",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
src/pages/exchange_detail/exchange_detail.vue 0 → 100644
View file @ e6bdbe88
<template>
<view class="exchange_detail">
<dHeader :title="'兑换详情'"></dHeader>
<div class="container">
<div class="header">
<div class="header-image">
<image class="img" src="../../static/img/exchange.png"></image>
</div>
<div class="header-content">
<div class="header-content-title">兑换完成</div>
<div class="header-content-text">
<view class="header-content-small">共计</view>90积分
</div>
</div>
</div>
<div class="nav">
<div class="nav-image">
<image class="img" src="../../static/img/exchange.png"></image>
</div>
<div class="nav-content">
<div class="nav-content-text">小米官旗米家体脂秤S400智能精准减肥电子称</div>
<div class="nav-content-tag">
<div class="tag-image">
<image class="img" src="../../static/img/score_b.png"></image>10
</div>
<view class="tag-text">共9件</view>
</div>
</div>
</div>
<div class="main">
<div class="main-cell">
<div class="cell-label">活动时间</div>
<div class="cell-content">2023-10-1至2024-11-01</div>
</div>
<div class="main-cell">
<div class="cell-label">活动网点</div>
<div class="cell-content">中国大连中央大道店黄河路50号</div>
</div>
<div class="main-cell">
<div class="cell-label">兑换方式</div>
<div class="cell-content">邮寄到家</div>
</div>
<div class="main-cell">
<div class="cell-label">兑换方式</div>
<div class="cell-content">邮寄到家</div>
</div>
<div class="main-cell">
<div class="cell-label">收货地址</div>
<div class="cell-content">
孟佳程，+23583273669137中国 大连 中央大道黄河路50号
<view class="red">地址提交后无法修改，如需修改地址请联系客服</view>
</div>
</div>
<div class="main-cell">
<div class="cell-label">快递单号</div>
<div class="cell-content">SFSF88997261500218</div>
</div>
<div class="main-cell">
<div class="cell-label">快递公司</div>
<div class="cell-content">顺丰快递</div>
</div>
<div class="main-cell">
<div class="cell-label">快递日期</div>
<div class="cell-content">2024-01-01</div>
</div>
<div class="main-cell">
<div class="cell-label">备注</div>
<div class="cell-content">请尽快发货</div>
</div>
</div>
</div>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
export default {
components: {
dHeader
}
}
</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);
}
.exchange_detail {
padding: 50upx 40upx;
height: inherit;
box-sizing: border-box;
background-color: #fff;
border-top-right-radius: 20upx;
border-top-left-radius: 20upx;
background: linear-gradient(#fff, #d3e5fe);
}
.header {
display: flex;
box-sizing: border-box;
.header-image {
width: 90upx;
height: 90upx;
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.header-content {
margin-left: 20upx;
display: flex;
height: inherit;
flex-direction: column;
justify-content: space-between;
.header-content-title {
font-size: 26upx;
color: #333;
}
.header-content-text {
display: flex;
align-items: end;
font-size: 24upx;
color: #666;
.header-content-small {
margin-right: 10upx;
font-size: 20upx;
color: #999;
}
}
}
}
.nav {
margin-top: 60upx;
width: 100%;
display: flex;
.nav-image {
width: 140upx;
height: 140upx;
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.nav-content {
flex: 1;
margin-left: 20upx;
display: flex;
height: inherit;
flex-direction: column;
.nav-content-text {
width: 70%;
font-size: 24upx;
color: var(--cb7b);
}
.nav-content-tag {
width: 100%;
margin-top: 20upx;
display: flex;
align-items: center;
justify-content: space-between;
.tag-image {
display: flex;
align-items: center;
.img {
width: 32upx;
height: 32upx;
object-fit: cover;
}
}
.tag-text {
font-size: 24upx;
color: #666;
}
}
}
}
.main {
margin-top: 60upx;
width: 100%;
display: flex;
flex-direction: column;
.main-cell {
margin-top: 20upx;
width: 100%;
display: flex;
align-items: start;
justify-content: space-between;
.cell-label {
width: 30%;
font-size: 24upx;
color: #333;
}
.cell-content {
text-align: right;
width: 70%;
font-size: 24upx;
color: var(--cb7b);
.red {
color: red;
font-size: 16upx;
}
}
}
}
</style>
src/pages/log/exchange.vue
View file @ e6bdbe88
......@@ -2,7 +2,7 @@
<view>
<dHeader :title="'兑换日志'"></dHeader>
<view class="container">
<view class="item" v-for="item in 6" :key="item">
<view class="item" v-for="item in 6" :key="item" @click="toDetail">
<div class="item-title">订单V值</div>
<div class="item-box">
<div class="box-img">
......@@ -32,6 +32,13 @@ import dHeader from '../../components/dHeader/index.vue'
export default {
components: {
dHeader
},
methods: {
toDetail() {
uni.navigateTo({
url: '/pages/exchange_detail/exchange_detail'
})
}
}
}
</script>
......
src/pages/order_mail/order_mail.vue
View file @ e6bdbe88
......@@ -9,7 +9,7 @@
</text>
</view>
</view>
<view class="address">
<!-- <view class="address">
<view class="address-image">
<image class="img" src="../../static/img/site_address.png"></image>
</view>
......@@ -25,34 +25,44 @@
<view class="address-icon">
<uni-icons type="right" color="#B7B7B7" size="20"></uni-icons>
</view>
</view> -->
<view class="address">
<view class="address-image">
<image class="img" src="../../static/img/site_address.png"></image>
</view>
<div class="main">
<div class="main-gift">
<div class="gift">
<div class="gift-image">
<view class="address-content address-content2">
<view class="content-text">
美国蒙大拿州中山路朱诺小区911号楼4单元朱诺小区911号楼4单元401
</view>
</view>
</view>
<view class="main">
<view class="main-gift">
<view class="gift">
<view 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">
</view>
<view class="gift-content">
<view class="gift-content-text">小米官旗米家体脂秤S400智能精准减肥电子称</view>
<view class="gift-cell">
<view class="cell-label">兑换方式</view>
<view class="cell-text">上门领取/包邮到家/邮寄到付</view>
</view>
<view class="gift-cell">
<view class="cell-label">活动时间</view>
<view class="cell-text">2023-10-1至2024-11-01</view>
</view>
</view>
</view>
<view class="main-count">
<count v-model="num"></count>
</div>
</div>
<div class="main-footer">
</view>
</view>
<view class="main-footer">
<input class="inp" placeholder="请输入验证码" />
<view class="btn" @click="handleCode">获取验证码</view>
</div>
</div>
</view>
</view>
</view>
<view class="remark">
<uni-easyinput
......@@ -68,11 +78,11 @@
</uni-easyinput>
<view class="placeholder">最多输入100字</view>
</view>
<div class="container-text">
<view class="container-text">
已选{{ num }}件，合计积分：<view class="container-num">{{ num * 10 }}</view
>积分
</div>
<div class="container-btn">提交订单</div>
</view>
<view class="container-btn">提交订单</view>
</view>
</template>
......@@ -203,6 +213,11 @@ page {
justify-content: space-between;
}
}
.address-content2 {
flex-direction: row;
justify-content: center;
align-items: center;
}
.address-icon {
padding-right: 20upx;
width: 80upx;
......
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