H5端齐采药项目,uniapp框架
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

625 lines
12 KiB

<template>
<view>
<view class="body" v-for="(item,index) in list" :key="index" @click="btn">
<view class="df jcsb">
<div>2022090120001</div>
<div class="df">
08-12 18:12:21发起退款
<image style="width: 28rpx;height: 28rpx;" :src="$util.img(`/upload/weapp/pageSalesman/reportForm/renovate.png`)"></image>
</div>
</view>
<view class=""></view>
<view class="df">
<div>客户名称</div>
<div>好大夫诊所</div>
<div class="df aic jcsa">私人医院</div>
</view>
<view class="df">
<div>下单时间</div>
<div>2021-09-12 18:20:21</div>
</view>
<view class="df">
<div>
合计1种商品,
</div>
<div>退款金额¥1000</div>
</view>
<view class=""></view>
<view class="df">
<div class="df aic jcsa">
<image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/suona.png`)" mode=""></image>
</div>
<div class="df aic">药品潮湿退货</div>
</view>
<view class="df jcsb">
<div class="df">
<div class="df aic jcsa">
<image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/rectangle.png`)" mode=""></image>
</div>
<div class="df aic">
点击添加备注
</div>
</div>
<div>
<u-icon name="arrow-right"></u-icon>
</div>
</view>
<view class="df status" v-if="item.sex==1">
<div class="status-one df aic jcsa" @click="show2=true">拒绝退款</div>
<div class="status-two df aic jcsa" @click="show=true">同意退款</div>
<div class="status-three df aic jcsa" @click="customer">联系顾客</div>
</view>
<view class="df status" v-if="item.sex==2">
<div class="status-three df aic jcsa">提醒退货</div>
</view>
<view class="df status" v-if="item.sex==3">
<div class="status-two df aic jcsa">查看物流</div>
<div class="status-three df aic jcsa">完成退款</div>
</view>
</view>
<u-overlay :show="show" @click="show = false">
<view class="Confirm-refund">
<div class="df aic jcsa">提示</div>
<div class="df aic jcsa">确认同意退款吗?</div>
<div class="df">
<div class="df aic jcsa" @click="show=false">取消</div>
<div class="df aic jcsa" @click="show1=true">同意</div>
</div>
</view>
</u-overlay>
<u-overlay :show="show1">
<view class="original-road">
<div class="df aic jcsa">提示</div>
<div v-for="(item,index) in radiolist1" :key="index">
<div class="arr df aic jcsa" @click="four(index)">
<div class="df aic jcsa arr2" >
<image v-if="index==indexa" :src="$util.img(`/upload/weapp/user/gou.png`)" mode=""></image>
<image v-else :src="$util.img(`/upload/weapp/user/un_gou.png`)" mode=""></image>
<div class="df aic arr1">
<text>{{item.name}}</text>
</div>
</div>
</div>
</div>
<div class="df bnt">
<div class="df aic jcsa bnt1" @click="show1 = false">取消</div>
<div class="df aic jcsa bnt2" @click="show1=true">同意</div>
</div>
</view>
</u-overlay>
<u-overlay :show="show2">
<view class="refuse">
<div class="df aic jcsa">提示</div>
<div class="df aic jcsa">确认拒绝退款吗?</div>
<div class="df">
<div class="df aic jcsa" @click="show2 = false">取消</div>
<div class="df aic jcsa" >同意</div>
</div>
</view>
</u-overlay>
<selectPopup ref="selectPopup"></selectPopup>
</view>
</template>
<script>
import selectPopup from "./select.vue"
export default {
components: {
selectPopup
},
data() {
return {
indexa:0,
show2: false,
show: false,
show1: false,
radiovalue1: '原路返回',
radiolist1: [{
name: '原路退款',
},
{
name: '线下退款',
},
],
list2: [{
name: '仅退款'
},
{
name: '退货退款'
},
{
name: '待退货'
},
{
name: '已退货'
},
{
name: '拒绝退款'
}
],
list: [{
sex: 4
},
{
sex: 4
}
]
};
},
methods: {
groupChange(n) {
console.log('groupChange', n);
},
radioChange(n) {
console.log('radioChange', n);
},
four(index){
this.indexa=index
},
customer(){
uni.navigateTo({
url: '/pages_tool/news/news'
})
},
btn(){
uni.navigateTo({
url: '/page_salesman_index/Order_details/Order_details?sex=5'
})
}
}
}
</script>
<style lang="scss">
.refuse{
width: 540rpx;
height: 300rpx;
background: #FFFFFF;
border-radius: 24rpx;
box-sizing: border-box;
position: fixed;
top: 662rpx;
left: 50%;
transform: translateX(-50%);
div:nth-child(1){
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 44rpx;
margin-top: 40rpx;
}
div:nth-child(2){
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 44rpx;
margin-top: 8rpx;
}
div:nth-child(3){
margin-top: 56rpx;
div:nth-child(1) {
width: 206rpx;
height: 72rpx;
border-radius: 40rpx;
border: 2rpx solid #E8E8E8;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin: 0 32rpx 0 42rpx;
}
div:nth-child(2) {
width: 206rpx;
height: 72rpx;
background: #21BBF3;
border-radius: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 40rpx;
}
}
}
.original-road {
width: 540rpx;
height: 342rpx;
background: #FFFFFF;
border-radius: 24rpx;
box-sizing: border-box;
position: fixed;
top: 662rpx;
left: 50%;
transform: translateX(-50%);
.arr{
margin: 0 !important;
image{
width: 30rpx;
height: 30rpx;
margin-right:18rpx;
}
div{
margin: 0 !important;
}
div:nth-child(1){
}
.arr1{
margin-top:0 !important;
}
.arr2{
margin-top:16rpx !important;
}
}
.bnt{
margin-top:38rpx;
.bnt1{
width: 206rpx;
height: 72rpx;
border-radius: 40rpx;
border: 2rpx solid #E8E8E8;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin-top:0;
margin: 0 32rpx 0 48rpx;
}
.bnt2{
width: 206rpx;
height: 72rpx;
background: #21BBF3;
border-radius: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 40rpx;
}
}
div:nth-child(1) {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 44rpx;
margin-top: 40rpx;
}
.check{
margin-top: 8rpx;
margin-left: 194rpx;
}
}
.Confirm-refund {
width: 540rpx;
height: 300rpx;
background: #FFFFFF;
border-radius: 24rpx;
box-sizing: border-box;
position: fixed;
top: 662rpx;
left: 50%;
transform: translateX(-50%);
div:nth-child(1) {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 44rpx;
margin-top: 40rpx;
}
div:nth-child(2) {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 44rpx;
}
div:nth-child(3) {
margin-top: 56rpx;
div:nth-child(1) {
width: 206rpx;
height: 72rpx;
border-radius: 40rpx;
border: 2rpx solid #E8E8E8;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin: 0 32rpx 0 42rpx;
}
div:nth-child(2) {
width: 206rpx;
height: 72rpx;
background: #21BBF3;
border-radius: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 40rpx;
}
}
}
.head {
width: 750rpx;
height: 72rpx;
margin-top: 16rpx;
}
.head div:nth-child(1) {
position: relative;
width: 612rpx;
height: 72rpx;
background: #F6F6F6;
border-radius: 36rpx;
margin-left: 30rpx;
margin-right: 30rpx;
input {
background: #F6F6F6;
border-radius: 36rpx;
padding: 0 72rpx;
}
.placeholder {
color: rgb(194, 194, 194);
}
.icon {
margin-top: 16rpx;
position: absolute;
color: red;
top: 4rpx;
left: 30rpx;
font-size: 32rpx;
}
}
.body {
width: 702rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 auto;
margin-top: 24rpx;
box-sizing: border-box;
padding: 32rpx;
.status {
margin-top: 32rpx;
float: right;
.status-one {
width: 176rpx;
height: 60rpx;
border-radius: 30rpx;
border: 2rpx solid #E8E8E8;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 34rpx;
}
.status-two {
width: 176rpx;
height: 60rpx;
border-radius: 30rpx;
border: 2rpx solid #E8E8E8;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 34rpx;
margin: 0 24rpx;
}
.status-three {
width: 176rpx;
height: 60rpx;
background: #21BBF3;
border-radius: 30rpx;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 34rpx;
}
}
}
.body view:nth-child(1) {
div:nth-child(1) {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 34rpx;
}
div:nth-child(2) {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
}
}
.body view:nth-child(2) {
width: 638rpx;
height: 2rpx;
background: #F2F2F2;
border-radius: 16rpx;
margin-top: 28rpx;
}
.body view:nth-child(3) {
margin-top: 30rpx;
div:nth-child(1) {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
}
div:nth-child(2) {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
margin: 0 16rpx 0 42rpx;
}
div:nth-child(3) {
background: #FFF0E2;
border-radius: 4rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF7D02;
line-height: 28rpx;
padding: 4rpx 6rpx 4rpx 6rpx;
}
}
.body view:nth-child(4) {
margin-top: 24rpx;
div:nth-child(1) {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
margin-right: 42rpx;
}
div:nth-child(2) {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
}
}
.body view:nth-child(5) {
margin-top: 24rpx;
div:nth-child(1) {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
margin-right: 14rpx;
}
div:nth-child(2) {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgb(57, 57, 57);
line-height: 34rpx;
}
}
.body view:nth-child(6) {
width: 638rpx;
height: 2rpx;
background: #F2F2F2;
border-radius: 16rpx;
margin-top: 28rpx;
}
.body view:nth-child(7) {
margin-top: 28rpx;
div:nth-child(1) {
width: 48rpx;
height: 48rpx;
background: linear-gradient(141deg, #86D8F5 0%, #00B2F2 100%);
margin-right: 24rpx;
image {
width: 24rpx;
height: 24rpx;
}
}
div:nth-child(2) {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
}
}
.body view:nth-child(8) {
margin-top: 28rpx;
div:nth-child(1) {
div:nth-child(1) {
width: 48rpx;
height: 48rpx;
background: linear-gradient(141deg, #FFAC73 0%, #FE6E0B 100%);
image {
width: 24rpx;
height: 24rpx;
}
}
div:nth-child(2) {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
margin-left: 24rpx;
}
}
}
</style>