441 lines
10 KiB
Vue
441 lines
10 KiB
Vue
<template>
|
||
<!-- 废弃 -->
|
||
<view class="pt10" style="padding-bottom: 150rpx;">
|
||
<template v-if="type == 0">
|
||
<view class="order-item">
|
||
<view class="order-title d-s-c">订单编号: WB1656325666232</view>
|
||
<view class="order-product-list">
|
||
<view class="order-product-item" v-for="(item, index) in 2" :key="index">
|
||
<view class="f24 gray9 mb20">HZS123456</view>
|
||
<view class="d-b-c mb20">
|
||
<view class="f28 gray3 flex-1">氢氧水杯</view>
|
||
<view class="f28 gray9">
|
||
<text class="f22">X</text>
|
||
2
|
||
</view>
|
||
</view>
|
||
<view class="f24 gray9 mb20">蓝色，500ml</view>
|
||
<view class="d-b-c">
|
||
<view class=" f32 price-color">
|
||
<text class="f24">{{currencyIcon()}}</text>
|
||
3960.00
|
||
</view>
|
||
<view class="f24 gray9">PV:1000</view>
|
||
<view class="f24 gray9">BV:1000</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="p-20-0">
|
||
<view class="mb20 d-b-c">
|
||
<view class="order-label-name flex-1">邮费({{currencyIcon()}})</view>
|
||
<view class="order-label-content">100.00</view>
|
||
</view>
|
||
<view class="mb20 d-b-c">
|
||
<view class="order-label-name flex-1">商品总价({{currencyIcon()}})</view>
|
||
<view class="order-label-content">100.00</view>
|
||
</view>
|
||
<view class="mb20 d-b-c">
|
||
<view class="order-label-name flex-1">商品业绩(pv)</view>
|
||
<view class="order-label-content">100.00</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view class="f30 product-list-title d-b-c bg-white">
|
||
<view class="gray6">列表</view>
|
||
<view class="domation">添加</view>
|
||
</view>
|
||
<view class="exchange-product-item d-b-s">
|
||
<view class="radio-check checked d-c-c"><u-icon name="checkbox-mark" color="#fff"
|
||
size="26rpx"></u-icon></view>
|
||
<view class="flex-1">
|
||
<view class="d-b-c exchange-product-name border-b mb20">
|
||
<view class="flex-1">氢氧水杯</view>
|
||
<view class="icon iconfont icon-jiantou"></view>
|
||
</view>
|
||
<view class="exchange-orderid">HZS1656325666232</view>
|
||
<view class="p-30-0 d-b-c border-b">
|
||
<view>蓝色 500ml</view>
|
||
<view class="icon iconfont icon-jiantou"></view>
|
||
</view>
|
||
<view class="d-b-c mt20">
|
||
<view class="counter-box">
|
||
<view class="d-c-c counter-add"><u-icon name="minus" size="26rpx" color="#666"></u-icon>
|
||
</view>
|
||
<view class="counter-num">1</view>
|
||
<view class="d-c-c counter-add"><u-icon name="plus" size="26rpx" color="#666"></u-icon>
|
||
</view>
|
||
</view>
|
||
<u-icon width="34rpx" height="36rpx" name="/static/icon/product/cart-delete.png"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="type == 1">
|
||
<view class="form-group">
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="domation mr10">*</text>
|
||
联系方式
|
||
</view>
|
||
<input class="form-input" type="text" value="" placeholder="请输入" />
|
||
</view>
|
||
<picker :range="list" @change="changeCardType" range-key="cardName">
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="domation mr10">*</text>
|
||
换货原因
|
||
</view>
|
||
<input class="form-input" disabled type="text"
|
||
:value="card_index == -1 ? '请选择' : list[card_index].cardName" placeholder="" />
|
||
<text class="icon iconfont icon-jiantou"></text>
|
||
</view>
|
||
</picker>
|
||
<view class="form-upload">
|
||
<view class="form-upload-name">
|
||
<text class="domation mr10">*</text>
|
||
法人身份证正反面
|
||
</view>
|
||
<view class="form-upload-tips">建议:图片大小为1MB以内</view>
|
||
<view class="d-s-c f-w">
|
||
<view>
|
||
<image class="upload-add" src="/static/icon/upload-add.png" mode=""></image>
|
||
<!-- <image class="upload-add" src="/static/icon/upload-add.png" mode=""></image> -->
|
||
</view>
|
||
</view>
|
||
<view class="form-upload-tips2">
|
||
<view>支持：jpg,png</view>
|
||
<view>建议：上传图片不要光线太暗</view>
|
||
<view>要清晰不能虚化，并且满画布显示，要保证亮要充足</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
<view class="order-btns-nav">
|
||
<template v-if="type == 0">
|
||
<button class="order-btn border-btn">取消</button>
|
||
<button class="order-btn" @click="type = 1">下一步</button>
|
||
</template>
|
||
<template v-else>
|
||
<button class="order-btn border-btn" @click="type = 0">上一步</button>
|
||
<button class="order-btn" @click="isPopup = true">下一步</button>
|
||
</template>
|
||
</view>
|
||
<Popup :show="isPopup" width="665" :padding="0" @hidePopup="hidePopupFunc">
|
||
<view class="d-e-c ww100">
|
||
<view class="p20" @click="hidePopupFunc(true)"><text class="icon iconfont icon-guanbi"></text></view>
|
||
</view>
|
||
<view class="ww100 box-s-b" style="padding: 0 60rpx;">
|
||
<view class="d-s-c" style="margin-bottom: 10rpx;">
|
||
<u-icon name="checkmark-circle-fill" color="#333333" size="38rpx"></u-icon>
|
||
<text class="ml20 fb f30">提交成功</text>
|
||
</view>
|
||
<view class="f24 gray6 line-h-2">我们将在24小时内完成业务受理！具体进度将会以 短信通知形式发送您，请注意查收！</view>
|
||
<view class="f24 gray6 line-h-2 mb40">售后电话：400-0000-8888</view>
|
||
<button class="s-pop-btn">确认</button>
|
||
</view>
|
||
</Popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Popup from '@/components/uni-popup.vue';
|
||
export default {
|
||
components: {
|
||
Popup
|
||
},
|
||
data() {
|
||
return {
|
||
type: 0,
|
||
list: [],
|
||
card_index: -1,
|
||
isPopup: false
|
||
};
|
||
},
|
||
methods: {
|
||
changeCardType(e) {},
|
||
hidePopupFunc() {
|
||
this.isPopup = false;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.icon.icon-guanbi {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.s-pop-btn {
|
||
width: 462rpx;
|
||
height: 78rpx;
|
||
background: #fb3024;
|
||
border-radius: 39rpx;
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
margin: 0 auto;
|
||
margin-bottom: 68rpx;
|
||
}
|
||
|
||
.order-item {
|
||
padding: 0 23rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 24rpx;
|
||
|
||
.order-title {
|
||
height: 84rpx;
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.order-product-list {
|
||
padding-top: 20rpx;
|
||
|
||
.order-product-item {
|
||
margin-bottom: 20rpx;
|
||
width: 704rpx;
|
||
background-color: #f5f5f5;
|
||
padding: 30rpx 22rpx 27rpx 22rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
}
|
||
|
||
.order-label-name {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.order-label-content {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.product-list-title {
|
||
height: 92rpx;
|
||
padding: 0 23rpx 0 26rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.exchange-product-item {
|
||
background-color: #fff;
|
||
margin-bottom: 6rpx;
|
||
padding: 20rpx 22rpx 30rpx 24rpx;
|
||
}
|
||
|
||
.radio-check {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
background: #ffffff;
|
||
border: 1rpx solid #dddddd;
|
||
border-radius: 50%;
|
||
box-sizing: border;
|
||
position: relative;
|
||
margin-right: 25rpx;
|
||
margin-top: 30rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.radio-check.checked {
|
||
border: 1rpx solid #fb3024;
|
||
background: #fb3024;
|
||
}
|
||
|
||
.exchange-product-name {
|
||
padding: 30rpx 0;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.icon.icon-jiantou {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.exchange-orderid {
|
||
width: 644rpx;
|
||
height: 68rpx;
|
||
background: #f5f5f5;
|
||
padding: 0 23rpx;
|
||
box-sizing: border-box;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.counter-box {
|
||
width: 168rpx;
|
||
height: 50rpx;
|
||
border-radius: 30rpx;
|
||
border: 1rpx solid #eeeeee;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.counter-num {
|
||
height: 50rpx;
|
||
min-width: 56rpx;
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
border-left: 1rpx solid #eeeeee;
|
||
border-right: 1rpx solid #eeeeee;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.counter-add {
|
||
height: 50rpx;
|
||
width: 56rpx;
|
||
flex-shrink: 0;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.order-btns-nav {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 96rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding: 0 23rpx;
|
||
background-color: #ffffff;
|
||
z-index: 20;
|
||
border-top: 1rpx solid #eee;
|
||
}
|
||
|
||
.order-btn {
|
||
min-width: 152rpx;
|
||
padding: 0 28rpx;
|
||
box-sizing: border-box;
|
||
height: 56rpx;
|
||
border-radius: 30rpx;
|
||
line-height: 56rpx;
|
||
background: #fb3024;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
margin-left: 23rpx;
|
||
}
|
||
|
||
.order-btn.border-btn {
|
||
background: #3d3d3d;
|
||
color: #fff;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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: 255rpx;
|
||
flex-shrink: 0;
|
||
word-break: break-all;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.disabled-input {
|
||
width: 450rpx;
|
||
height: 78rpx;
|
||
padding: 0 18rpx;
|
||
line-height: 78rpx;
|
||
background: #eee;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.upload-add {
|
||
width: 142rpx;
|
||
height: 142rpx;
|
||
margin-right: 18rpx;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
</style> |