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>
|