434 lines
10 KiB
Vue
434 lines
10 KiB
Vue
<template>
|
|
<view class="pb100">
|
|
<!-- 废弃 -->
|
|
<view class="form-title redtitle">会员复购信息</view>
|
|
<view class="form-group mb20">
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
复购编号
|
|
</view>
|
|
<input class="form-input" type="text" value="" placeholder="请输入收货人姓名" />
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
复购姓名
|
|
</view>
|
|
<view class="disabled-input">张三</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
发货方式
|
|
</view>
|
|
<input class="form-input" disabled type="text" value="快递发货" placeholder="" />
|
|
<text class="icon iconfont icon-jiantou"></text>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
运输方式
|
|
</view>
|
|
<input class="form-input" disabled type="text" value="快递发货" placeholder="" />
|
|
<text class="icon iconfont icon-jiantou"></text>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
发货仓库
|
|
</view>
|
|
<input class="form-input" disabled type="text" value="快递发货" placeholder="" />
|
|
<text class="icon iconfont icon-jiantou"></text>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
所属店铺
|
|
</view>
|
|
<input class="form-input" disabled type="text" value="快递发货" placeholder="" />
|
|
<text class="icon iconfont icon-jiantou"></text>
|
|
</view>
|
|
</view>
|
|
<view class="form-title d-b-c">
|
|
<text>收货人信息</text>
|
|
<view class="d-c-c">
|
|
<u-icon name="plus-circle-fill" size="38rpx" color="#FB3024"></u-icon>
|
|
<text class="ml10">添加</text>
|
|
</view>
|
|
</view>
|
|
<view class="form-group mb20">
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
复购编号
|
|
</view>
|
|
<input class="form-input" type="text" value="" placeholder="" />
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
联系方式
|
|
</view>
|
|
<input class="form-input" type="text" value="" placeholder="" />
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
收货地址
|
|
</view>
|
|
<input class="form-input" disabled type="text" value="" placeholder="" />
|
|
<text class="icon iconfont icon-jiantou"></text>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
详细地址
|
|
</view>
|
|
<textarea auto-height class="form-textarea" value="" placeholder="" />
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
邮费
|
|
</view>
|
|
<input class="form-input" disabled type="text" value="" placeholder="" />
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">
|
|
<text class="domation mr10">*</text>
|
|
备注
|
|
</view>
|
|
<textarea auto-height class="form-textarea" value="" placeholder="" />
|
|
</view>
|
|
</view>
|
|
<view class="form-title">历史地址</view>
|
|
<view class="form-group mb20">
|
|
<view class="d-b-s address-item">
|
|
<view class="">
|
|
<view class="f28 gray3 fb mb10 d-s-s">
|
|
张涛
|
|
<text class="small-text-btn">默认</text>
|
|
</view>
|
|
<view class="f26 gray3 mb10">134**2132123</view>
|
|
<view class="f24 gray9">湖南长沙</view>
|
|
</view>
|
|
<view class="d-c-c">
|
|
<view class="icon-box plus d-c-c ml30" @click="editAddress(item)">
|
|
<image class="add_icon_img edit" src="/static/icon/add-edit.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="icon-box plus d-c-c ml30" @click="delAddress(item)">
|
|
<image class="add_icon_img delete" src="/static/icon/add-delete.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="product-box">
|
|
<view class="product-title">商品信息</view>
|
|
<view class="product-list order-product">
|
|
<view v-for="(item, index) in 4" :key="index" class="product-item">
|
|
<view class="d-b-s mb20">
|
|
<image class="product-img" src="/static/default.png" mode=""></image>
|
|
<view class="product-info d-c d-b-s flex-1">
|
|
<view class="text-ellipsis-2 f28 gray3">海之圣超饱和富氢水杯（粉色）</view>
|
|
<view class="price-color f24">
|
|
{{currencyIcon()}}
|
|
<text class="f32 fb">3960.00</text>
|
|
</view>
|
|
</view>
|
|
<view class="f24 gray9 ml20">X2</view>
|
|
</view>
|
|
<view class="secend-product">
|
|
<view class="d-b-s mb20">
|
|
<view class="d-s-c">
|
|
<image src="/static/default.png" mode="" class="s-product-img"></image>
|
|
<view class="f28">
|
|
苹果14Pro 暗夜紫
|
|
<text class="ml20">规格名</text>
|
|
</view>
|
|
</view>
|
|
<view class="f24 gray9 ml20">X1</view>
|
|
</view>
|
|
<view class="d-b-s mb20">
|
|
<view class="f28 gray3 text-ellipsis-2">
|
|
<text class="domation">赠品：</text>
|
|
海之圣超饱和富氢水杯
|
|
<text>（绿色</text>
|
|
</view>
|
|
<view class="f24 gray9 ml20">X1</view>
|
|
</view>
|
|
<view class="d-b-c mb10">
|
|
<view class="flex-1 f26 gray9">商品业绩</view>
|
|
<view class="f26 gray3">1400</view>
|
|
</view>
|
|
<view class="d-b-c">
|
|
<view class="flex-1 f26 gray9">金额小计</view>
|
|
<view class="f26 gray3">1400</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ww100 pt30">
|
|
<view class="d-b-c mb10">
|
|
<view class="flex-1 f26 gray9">商品金额总计</view>
|
|
<view class="f26 gray3">{{currencyIcon()}}1400</view>
|
|
</view>
|
|
<view class="d-b-c mb10">
|
|
<view class="flex-1 f26 gray9">邮费</view>
|
|
<view class="f26 gray3">{{currencyIcon()}}1400</view>
|
|
</view>
|
|
<view class="d-b-c mb10">
|
|
<view class="flex-1 f26 gray9">复购券抵扣</view>
|
|
<view class="f26 gray3">{{currencyIcon()}}1400</view>
|
|
</view>
|
|
<view class="d-b-c mb10">
|
|
<view class="flex-1 f26 gray9">总价</view>
|
|
<view class="f26 gray3">{{currencyIcon()}}1400</view>
|
|
</view>
|
|
<view class="d-b-c">
|
|
<view class="flex-1 f26 gray9">业绩</view>
|
|
<view class="f26 gray3">{{currencyIcon()}}1400</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="f26 gray9 d-c-c radiogroup">
|
|
<radio color="#FB3024" style="transform:scale(0.7)" @click="isRead = !isRead" :checked="isRead" value="" />
|
|
请阅读并同意
|
|
<text class="" style="color: #FB3024;">《购买协议》</text>
|
|
</view>
|
|
<button class="normal-sub-btn" style="margin-top: 37rpx;">购买</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isRead: false
|
|
};
|
|
},
|
|
methods: {
|
|
delAddress(e) {},
|
|
editAddress() {}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.agreement-box {
|
|
width: 750rpx;
|
|
background: #ffffff;
|
|
padding: 28rpx 22rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 2rpx;
|
|
margin-bottom: 20rpx;
|
|
.agreement-content {
|
|
font-size: 24rpx;
|
|
font-family: SourceHanSansCN;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 32rpx;
|
|
word-break: break-all;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
.agreement-btn {
|
|
min-width: 320rpx;
|
|
height: 76rpx;
|
|
line-height: 1.5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
background: #282828;
|
|
border-radius: 38rpx;
|
|
color: #ffffff;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.form-title {
|
|
width: 750rpx;
|
|
height: 106rpx;
|
|
background: #fb3024;
|
|
padding-left: 44rpx;
|
|
padding-right: 25rpx;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
line-height: 106rpx;
|
|
font-weight: bold;
|
|
z-index: 1;
|
|
}
|
|
.form-title.redtitle {
|
|
width: 750rpx;
|
|
height: 106rpx;
|
|
background: #fb3024;
|
|
padding-left: 44rpx;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
line-height: 106rpx;
|
|
font-weight: bold;
|
|
z-index: 1;
|
|
}
|
|
.form-title::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
left: 25rpx;
|
|
width: 6rpx;
|
|
height: 24rpx;
|
|
background-color: #fb3024;
|
|
z-index: 1;
|
|
}
|
|
.redtitle.form-title::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
left: 25rpx;
|
|
width: 6rpx;
|
|
height: 24rpx;
|
|
background-color: #fff;
|
|
z-index: 1;
|
|
}
|
|
.form-group {
|
|
padding: 0 22rpx;
|
|
background: #ffffff;
|
|
.form-item {
|
|
min-height: 104rpx;
|
|
box-sizing: border-box;
|
|
padding: 15rpx 0;
|
|
line-height: 1.5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #eee;
|
|
.icon-jiantou {
|
|
font-size: 32rpx;
|
|
color: 090000;
|
|
}
|
|
.form-tips {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
.form-label {
|
|
width: 220rpx;
|
|
flex-shrink: 0;
|
|
word-break: break-all;
|
|
margin-right: 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.disabled-input {
|
|
width: 450rpx;
|
|
height: 78rpx;
|
|
padding: 0 18rpx;
|
|
line-height: 78rpx;
|
|
background: #f5f5f5;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
flex: 1;
|
|
}
|
|
.form-textarea {
|
|
width: 450rpx;
|
|
padding: 0 18rpx;
|
|
line-height: 1.5;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
background: #fff;
|
|
}
|
|
.form-input {
|
|
width: 450rpx;
|
|
height: 78rpx;
|
|
padding: 0 18rpx;
|
|
line-height: 78rpx;
|
|
background: #fff;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
}
|
|
.form-item:last-child {
|
|
border: none;
|
|
}
|
|
}
|
|
.form-upload {
|
|
padding: 30rpx 23rpx;
|
|
}
|
|
.form-upload-name {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.form-upload-tips {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.form-upload-tips2 {
|
|
font-size: 24rpx;
|
|
color: #fb3024;
|
|
line-height: 1.5;
|
|
}
|
|
.upload-add {
|
|
width: 142rpx;
|
|
height: 142rpx;
|
|
margin-right: 18rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
.radiogroup::v-deep uni-radio:not([disabled]) .uni-radio-input:hover {
|
|
border-color: #eee;
|
|
}
|
|
|
|
/* address */
|
|
.address-item {
|
|
padding: 20rpx 25rpx;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
.address-item:last-child {
|
|
border: none;
|
|
}
|
|
.add_icon_img.edit {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
}
|
|
.add_icon_img.delete {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
}
|
|
.small-text-btn {
|
|
// width: 59rpx;
|
|
font-size: 20rpx;
|
|
padding: 0 9rpx;
|
|
box-sizing: border-box;
|
|
height: 31rpx;
|
|
color: #fff;
|
|
background: #181818;
|
|
border-radius: 16rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
.product-box {
|
|
padding: 26rpx 18rpx 36rpx 20rpx;
|
|
background: #ffffff;
|
|
margin-bottom: 20rpx;
|
|
.product-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 5rpx;
|
|
font-weight: bold;
|
|
border-bottom: 1rpx solid #eee;
|
|
padding-bottom: 28rpx;
|
|
}
|
|
|
|
}
|
|
</style>
|