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.
 
 
 
 
 

966 lines
22 KiB

<template>
<z-paging ref="paging" v-model="list" @query="queryList">
<view class="" v-for="(item,index) in list" :key="index">
<view class="Order-details">
<view class="Order-status">
<div class="df jcsb Order-head">
<div>订单状态</div>
<div class="df aic">
<text>{{data.order_status_name}}</text>
<image style="width: 28rpx;height: 28rpx;margin: 0 4rpx;" :src="$util.img(`/upload/weapp/user/you.png`)"></image>
</div>
</div>
<div class="Order-thread"></div>
<div class="Order-number">订单编号<span>{{data.order_no}}</span> </div>
<div class="Order-time">下单时间<span>{{data.create_time | time}}</span></div>
</view>
<view class="connection">
<div class="df jcsb">
<div class="connection-head">客户<span>私人医院</span></div>
<div class="df">
<div class="connection-Rearf">后付</div>
<image style="width: 28rpx;height: 28rpx;margin: 36rpx 4rpx 0 4rpx;" :src="$util.img(`/upload/weapp/user/you.png`)"></image>
</div>
</div>
<div class="line"></div>
<div class="Good-doctor">{{data.address}}</div>
<div class="connection-address">
<span>{{data.full_address}}</span>
<span>{{data.name}}&ensp;{{data.mobile}}</span>
</div>
<div class="line"></div>
<div class="df Shipping-address">
<div class="">收货地址:</div>
<div>
<view class="Shipping-telephone">{{data.name}}<span>{{data.mobile}}</span></view>
<view class="Shipping-telephona">{{data.full_address}}</view>
</div>
</div>
</view>
<view class="Commodity-list">
<div class="df jcsb Commodity-ten" @click="btn">
<div>商品清单</div>
<div class="df aic">
<text>{{data.goods_num}}种</text>
<image style="width: 28rpx;height: 28rpx;margin: 0 4rpx;" :src="$util.img(`/upload/weapp/user/you.png`)"></image>
</div>
</div>
<div class="dotted-line"></div>
<div class="Commodity-money">
<div class="df jcsb money">
<div>订单金额</div>
<div>¥{{data.order_money}}</div>
</div>
<div class="df jcsb money">
<div>商品金额</div>
<div>¥{{data.goods_money}}</div>
</div>
<div class="df jcsb money">
<div>特批优惠</div>
<div class="money-koude">-¥{{data.coupon_money}}</div>
</div>
<div class="df jcsb money">
<div>运费</div>
<div class="money-koude">¥{{data.delivery_money}}</div>
</div>
<div class="df jcsb money">
<div>优惠卷</div>
<div>-¥{{data.coupon_money}}</div>
</div>
</div>
<div class="df transportation-expenses">
<!-- <div class="df aic jcsa" @click="show1=true">
<image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/revise.png`)"></image>
修改运费</div>
<div class="df aic jcsa" @click="show2=true">
<image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/form.png`)"></image>
修改特批价</div> -->
</div>
</view>
<view class="Collection-record">
<div class="df jcsb" @click="Collection">
<div>收款记录</div>
<div class="df">
<div>待收款</div>
<image style="width: 28rpx;height: 28rpx;margin: 10rpx 0rpx;" :src="$util.img(`/upload/weapp/user/you.png`)"></image>
</div>
</div>
<div class="copper-coin">代付¥488.00</div>
<div class="dotted-line"></div>
<div class="Order-message">订单留言</div>
<div class="Order-departure">{{data.buyer_message}}</div>
<div class="dotted-line"></div>
<!-- <div class="Order-remarks df jcsb">订单备注
<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
</div>
<div class="importance">这是大客户</div> -->
<div class="dotted-line"></div>
<div class="df jcsb Delivery-method">
<text>配送方式</text>
<text>{{data.delivery_type_name}}</text>
</div>
<div class="dotted-line"></div>
<div class="df jcsb Delivery-methoda">
<div>发票信息</div>
<div class="df">
<text v-if="data.invoice_type==0">纸质发票({{data.invoice_rate}}%税点)</text>
<text v-if="data.invoice_type==1">电子发票({{data.invoice_rate}}%税点)</text>
<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
</div>
</div>
</view>
<u-overlay :show="show" @click="show = true">
<div class="notification">
<div class="point-out">提示</div>
<div class="Text-field">
<u-textarea maxlength=100 v-model="value2" placeholder="请输入内容" count ></u-textarea>
</div>
<div class="define df">
<div class="f1 df aic jcsa">取消</div>
<div class="f1 df aic jcsa">确定</div>
</div>
</div>
</u-overlay>
<u-overlay :show="show1">
<view class="transportation">
<div>修改运费</div>
<div class="df">
<text>运费:</text>
<text>¥50.00</text>
</div>
<div class="df aic">
<div class="df aic">修改运费</div>
<div><input type="text"><span>元</span></div>
</div>
<div class="fill-in">请填写修改后运费</div>
<div class="df definea">
<div class="df aic jcsa" @click="show1 = false">取消</div>
<div class="df aic jcsa" @click="one">确定</div>
</div>
</view>
</u-overlay>
<u-overlay :show="show2">
<view class="Special-rating">
<div>申请特批价</div>
<div>订单价格<span>50.00</span></div>
<div class="df aic">
<div class="df aic empty-fixed"><span>*</span>特批价</div>
<div>
<input type="text">
<span></span>
</div>
</div>
<div class="df">
<div cladd="empty-fixed">申请原因</div>
<div><u-textarea v-model="value1" height="124rpx" ></u-textarea></div>
</div>
<div class="">特批价是指通过客户与业务员之间得沟通后,同意对本地订单总价进行优惠,在此修改优惠后得订单总价</div>
<div class="df">
<div class="df aic jcsa" @click="show2 = false">取消</div>
<div class="df aic jcsa" @click="two">确认</div>
</div>
</view>
</u-overlay>
<view class="nav df jcsa aic">
<!-- <div class="df aic jcsa" @click="passthrough">再次订购</div> -->
<div style="border: 0rpx;"></div>
<div class="df aic jcsa" @click="cancel">取消订单</div>
<div class="df aic jcsa" @click="through">确认收货</div>
</view>
</view>
</view>
</z-paging>
</template>
<script>
const timesfm = require('@/common/js/map/message.js')
export default {
data() {
return {
show: false,
show1: false,
show2: false,
value2: '请输入订单备注',
value1: '',
list:[1],
order:'',//订单id
member:'',//下单客户id
data:[]//详情数据
};
},
onLoad(e) {
// order 订单id member 下单客户id
console.log(e,'id');
this.order=e.or
this.member=e.me
},
onShow() {
this.$api.sendRequest({
url:'/api/salasmanorder/detail',
data:{
order_id:this.order,
member_id:this.member
},
success:res=>{
this.data=res.data
console.log(this.data,'1111111111');
}
})
},
methods: {
queryList(pageNo, pageSize) {
this.$refs.paging.complete(this.list);
},
btn(item) {
// this.show=true
uni.navigateTo({
// url:this.list[this.current.URL]
url:'../Commodity_list/Commodity_list'
})
},
Collection(){
uni.navigateTo({
// url:this.list[this.current.URL]
url:'../Collection_record/Collection_record'
})
},
one(){
this.show1=false
this.$util.showToast({
title: '修改成功'
});
},
two(){
this.show2=false
this.$util.showToast({
title: '修改成功'
});
},
passthrough(){
this.$util.showToast({
title: '订购成功'
});
},
cancel(){
this.$util.showToast({
title: '取消成功'
});
},
through(){
this.$util.showToast({
title: '通过审核成功'
});
}
},
filters:{
time(num){
return timesfm(num*1000)
}
}
}
</script>
<style lang="scss">
.Special-rating{
width: 630rpx;
background: #FFFFFF;
border-radius: 24px;
position: fixed;
top: 240rpx;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
padding-bottom: 32rpx;
}
.empty-fixed{
margin-top: 0 !important;
}
.Special-rating div:nth-child(1){
margin-top: 40rpx;
text-align: center;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 44rpx;
}
.Special-rating div:nth-child(2){
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 40rpx;
margin-top: 30rpx;
margin-left: 28rpx;
}
.Special-rating div:nth-child(3){
margin-top: 24rpx;
height: 70rpx;
div:nth-child(1){
height: 70rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgb(88, 88, 88);
line-height: 40rpx;
margin-left: 28rpx;
span{
color: #FF3030;
}
}
div:nth-child(2){
width: 438rpx;
height: 70rpx;
background: #F6F6F6;
border-radius: 16rpx;
position: relative;
margin-left: 30rpx;
margin-top: 0;
input{
width: 438rpx;
height: 70rpx;
background: #F6F6F6;
border-radius: 16rpx;
}
span{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 24rpx;
}
}
}
.Special-rating div:nth-child(4){
height: 160rpx;
margin-top: 24rpx;
div:nth-child(1){
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 40rpx;
margin-left: 28rpx;
margin-right: -12rpx;
margin-top: 0;
}
div:nth-child(2){
width: 438rpx;
height: 124rpx;
background: #F6F6F6;
border-radius: 16rpx;
text-align: left;
margin-top: 0;
}
}
.Special-rating div:nth-child(5){
width: 570rpx;
height: 68rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 34rpx;
margin: 0 auto;
margin-top: 16rpx;
}
.Special-rating div:nth-child(6){
margin-top: 44rpx;
div:nth-child(1){
margin: 0;
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 94rpx;
}
div:nth-child(2){
margin: 0;
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;
}
}
.transportation{
width: 540rpx;
height: 448rpx;
background: #FFFFFF;
border-radius: 24px;
position: fixed;
top: 418rpx;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
.definea{
margin-top: 38rpx;
}
.definea 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-top: 0;
margin-left: 48rpx;
}
.definea 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;
margin-top: 0;
margin-left: 32rpx;
padding: 0;
}
}
.transportation div:nth-child(1){
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 44rpx;
text-align: center;
margin-top: 40rpx;
}
.transportation div:nth-child(2){
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 40rpx;
margin-top: 30rpx;
padding-left: 38rpx;
text:nth-child(2){
margin-left: 16rpx;
}
}
.transportation div:nth-child(3){
div:nth-child(1){
width: 112rpx;
height: 40rpx;
margin-left: 38rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 40rpx;
}
div:nth-child(2){
width: 288rpx;
height: 70rpx;
background: #F6F6F6;
border-radius: 16rpx;
margin-left: 20rpx;
position: relative;
input{
width: 288rpx;
height: 70rpx;
background: #F6F6F6;
border-radius: 16rpx;
}
span{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 24rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
}
}
}
.fill-in{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 34rpx;
margin: 20rpx 0 0 36rpx;
}
.nav{
width: 750rpx;
height: 100rpx;
background: #F7F7F7;
margin-top: 32rpx;
div{
width: 192rpx;
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;
}
}
.nav div:nth-child(3){
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 40rpx;
width: 192rpx;
height: 72rpx;
background: #21BBF3;
border-radius: 40rpx;
}
.Order-details {
padding: 24rpx;
.Order-status {
width: 702rpx;
height: 270rpx;
background: #FFFFFF;
border-radius: 24rpx;
.Order-head div:nth-child(1) {
padding: 32rpx 0 28rpx 32rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 44rpx;
}
.Order-head div:nth-child(2) {
padding: 32rpx 0;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FF3B67;
line-height: 40rpx;
}
.Order-thread {
width: 638rpx;
height: 2rpx;
background: #F2F2F2;
border-radius: 16rpx;
margin: 0 auto;
}
.Order-number {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
padding: 28rpx 0 0 32rpx;
span {
margin-left: 42rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
}
}
.Order-time {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
padding: 24rpx 0 0 32rpx;
}
.Order-time span:nth-child(1) {
margin-left: 42rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
}
}
.connection {
width: 702rpx;
height: 464rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin-top: 24rpx;
.Shipping-telephona {
margin-top: 16rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
}
.Shipping-telephone {
padding: 28rpx 0 0 0;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
span {
margin-left: 24rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
}
}
.Shipping-address div:nth-child(1) {
width: 170rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 40rpx;
padding: 28rpx 0 0 32rpx;
}
.connection-address {
padding: 24rpx 0 0 32rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 40rpx;
margin-bottom: 28rpx;
}
.connection-address span:nth-child(1) {
margin-right: 40rpx;
}
.Good-doctor {
padding: 32rpx 0 0 32rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 40rpx;
}
.line {
width: 638rpx;
height: 2rpx;
background: #F2F2F2;
border-radius: 16rpx;
margin: 0 auto;
}
.connection-Rearf {
padding-top: 32rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 40rpx;
}
.connection-head {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 44rpx;
padding: 32rpx;
span {
width: 92rpx;
height: 36rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF7D02;
line-height: 28rpx;
background-color: rgb(255, 240, 226);
margin-left: 16rpx;
}
}
}
.Commodity-list {
width: 702rpx;
height: 542rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin-top: 24rpx;
.transportation-expenses {
margin-top: 32rpx;
div {
width: 174rpx;
height: 48rpx;
background: #FFFFFF;
border-radius: 28rpx;
border: 2rpx solid #E8E8E8;
text-align: center;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 34rpx
}
image{
width: 32rpx;
height: 32rpx;
}
}
.transportation-expenses div:nth-child(1) {
margin-left: 274rpx;
margin-right: 24rpx;
}
.Commodity-money {
padding: 0 32rpx;
.money {
margin-top: 24rpx;
.money-koude {
color: red !important;
}
}
.money div:nth-child(1) {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
}
.money div:nth-child(2) {
font-size: 24rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #222222;
line-height: 40rpx;
}
}
.dotted-line {
width: 638rpx;
height: 2rpx;
background: #F2F2F2;
border-radius: 16rpx;
margin: 0 auto;
margin-top: 28rpx;
margin-bottom: 4rpx;
}
.Commodity-ten div:nth-child(1) {
padding: 32rpx 0 0 32rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 44rpx;
}
.Commodity-ten div:nth-child(2) {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 44rpx;
margin-top: 32rpx;
}
}
.Collection-record {
width: 702rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin-top: 24rpx;
padding: 32rpx;
box-sizing: border-box;
.Delivery-method {
padding: 28rpx 48rpx 28rpx 0;
}
.Delivery-methoda {
padding: 28rpx 0rpx 28rpx 0;
}
.Delivery-method div:nth-child(1) {
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 44rpx;
}
.Delivery-method div:nth-child(2) {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 44rpx;
}
.Delivery-methoda div:nth-child(1) {
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 44rpx;
}
.Delivery-methoda div:nth-child(2) {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 44rpx;
}
.copper-coin {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 40rpx;
margin-top: 24rpx;
margin-bottom: 28rpx;
}
.dotted-line {
width: 638rpx;
height: 2rpx;
background: #F2F2F2;
border-radius: 16rpx;
}
.Order-message {
margin-top: 28rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 40rpx;
}
.Order-departure {
margin-top: 24rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 40rpx;
margin-bottom: 28rpx;
}
.Order-remarks {
margin-top: 28rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
line-height: 40rpx;
}
.importance {
margin-top: 24rpx;
margin-bottom: 28rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 40rpx;
}
}
.notification{
width: 540rpx;
height: 416rpx;
background: #FFFFFF;
position: fixed;
top: 572rpx;
left: 106rpx;
right: 104rpx;
border-radius: 20rpx;
box-sizing: border-box;
.define{
border: 2rpx solid #E8E8E8;
border-bottom: none;
height: 96rpx;
margin-top: 36rpx;
}
.define div:nth-child(1){
border-left: none;
}
.define div:nth-child(2){
color: #21BBF3;
border-right: none;
}
.point-out{
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 44rpx;
margin: 0 auto;
text-align: center;
margin: 40rpx 0 24rpx 0;
}
.Text-field{
padding: 0;
padding: 0 50rpx 0 46rpx;
}
}
}
</style>