chenkainan
1 year ago
7 changed files with 1545 additions and 5 deletions
@ -0,0 +1,131 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="logo flex-center">LOGO</view> |
||||
|
|
||||
|
<view :class="['btn', 'flex-center', {'btns': flag}]" @click="getUserInfo()">快捷登录</view> |
||||
|
|
||||
|
<image src="https://static.ticket.sz-trip.com/yandu/images/user/tips.png" class="tips" v-show="!flag"></image> |
||||
|
<footer class="flex-between"> |
||||
|
<view @click="flag = !flag" :style="{border: flag ? 'none' : ''}"><image src="https://static.ticket.sz-trip.com/yandu/images/user/dui.png" v-show="flag"></image></view> |
||||
|
我已阅读并同意 <span @click="gotoPath('/subPackages/user/privacy')">《用户服务协议》、《隐私政策》</span> |
||||
|
</footer> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
flag: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getUserInfo() { |
||||
|
if(!this.flag) return; |
||||
|
|
||||
|
var _this = this |
||||
|
uni.login({ |
||||
|
provider: 'weixin', |
||||
|
success(loginRes) { |
||||
|
uni.getUserInfo({ |
||||
|
withCredentials: true, |
||||
|
success(res) { |
||||
|
_this.Post({ |
||||
|
code: loginRes.code, |
||||
|
userInfo: res.userInfo, |
||||
|
encryptedData: res.encryptedData, |
||||
|
iv: res.iv, |
||||
|
wechat_qrcode: uni.getStorageSync('wechat_qrcode')?uni.getStorageSync('wechat_qrcode'):'' |
||||
|
}, '/api/mini_program/login').then(resTwo => { |
||||
|
_this.$store.commit('changeUserInfo', resTwo.data.userinfo) |
||||
|
if (_this.$store.state.user.toPath.includes('user/user')) { |
||||
|
uni.switchTab({ |
||||
|
url: _this.$store.state.user.toPath |
||||
|
}) |
||||
|
} else { |
||||
|
uni.navigateBack({}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
fail(err) { |
||||
|
console.log(err); |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
width: 156rpx; |
||||
|
height: 156rpx; |
||||
|
background: #87CD93; |
||||
|
border-radius: 50%; |
||||
|
font-weight: 500; |
||||
|
font-size: 32rpx; |
||||
|
color: #FFFFFF; |
||||
|
position: absolute; |
||||
|
top: 66.67rpx; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, 0); |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 667rpx; |
||||
|
height: 93rpx; |
||||
|
background: #CCCCCC; |
||||
|
border-radius: 20rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 35rpx; |
||||
|
color: #FFFFFF; |
||||
|
position: absolute; |
||||
|
top: 301rpx; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%,0) |
||||
|
} |
||||
|
.btns { |
||||
|
background: #71B580; |
||||
|
} |
||||
|
|
||||
|
.tips { |
||||
|
position: absolute; |
||||
|
left: 54rpx; |
||||
|
bottom: 155rpx; |
||||
|
width: 293.33rpx; |
||||
|
height: 72.67rpx; |
||||
|
} |
||||
|
|
||||
|
footer { |
||||
|
padding: 0 68rpx; |
||||
|
position: absolute; |
||||
|
bottom: 94rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 25rpx; |
||||
|
color: #333333; |
||||
|
width: 100%; |
||||
|
|
||||
|
view { |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
border-radius: 50%; |
||||
|
overflow: hidden; |
||||
|
border: 1rpx solid #666666; |
||||
|
|
||||
|
image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
color: rgba(113, 181, 128, 1); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,681 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="title-box"> |
||||
|
<span class="iconfont" @click="goBack"></span> |
||||
|
<view>订单状态</view> |
||||
|
</view> |
||||
|
<view class="top-box"> |
||||
|
<view>{{info.status_text}}</view> |
||||
|
|
||||
|
<!-- 待支付时会显示自动取消时间 --> |
||||
|
<view v-if="info.status=='WAIT_PAYMENT'" class="close-time">订单将在{{info.close_time.slice(-8)}}自动取消</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 子订单里info.order_child[0].goods_genre：景点ticket、酒店hotel、美食food、邮寄自提pgoods、 --> |
||||
|
|
||||
|
<!-- 景点订单 --> |
||||
|
<view v-if="info.order_child[0].goods_genre == 'ticket'"> |
||||
|
<!-- 景点详情 --> |
||||
|
<view class="scenic-detail"> |
||||
|
<view> |
||||
|
<view class="scenic-title"> |
||||
|
{{info.order_child[0].goods_title}} |
||||
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/rightIcon.png"></image> |
||||
|
</view> |
||||
|
<view class="scenic-subtitle"> |
||||
|
出行时间：<span>{{info.order_child[0].use_date}}</span> |
||||
|
</view> |
||||
|
<view class="scenic-subtitle" v-if="info.order_child[0].scenic_data.open_description"> |
||||
|
开放时间：<span>{{info.order_child[0].scenic_data.open_description}}</span> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 子订单规格 --> |
||||
|
<view> |
||||
|
<view v-for="(item,index) in info.order_child" :key="index" class="specifications-item flex-between"> |
||||
|
<view>{{item.specifications_name}}</view> |
||||
|
<view class="flex-between" style="width: 150rpx;"> |
||||
|
<view>￥{{item.pay_money / 100}}</view> |
||||
|
<view>x{{item.num}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 商品价格 --> |
||||
|
<view class="public-price"> |
||||
|
<view class="flex-between"> |
||||
|
商品总额：<span>￥{{info.money / 100}}</span> |
||||
|
</view> |
||||
|
<view class="flex-between" v-if="info.discounts"> |
||||
|
优惠券：<span>-￥{{info.discounts / 100}}</span> |
||||
|
</view> |
||||
|
<view class="flex-between"> |
||||
|
实付金额：<span style="font-size: 35rpx;color: #EE3E3B;">￥{{info.pay_money / 100}}</span> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 出行人 --> |
||||
|
<view class="novice-box"> |
||||
|
出行人 |
||||
|
<view v-for="(item,index) in info.order_child" :key="index" class="novice-item"> |
||||
|
<view class="novice-title">{{item.specifications_name}}</view> |
||||
|
<view class="novice-subtitle"> |
||||
|
<span>姓名：</span>{{item.contact_name}} |
||||
|
</view> |
||||
|
<view class="novice-subtitle"> |
||||
|
<span>身份证：</span>{{item.id_number}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 邮寄、自提订单 --> |
||||
|
<view v-if="info.order_child[0].goods_genre == 'pgoods'"> |
||||
|
<view class="shipping-address" v-if="info.order_child[0].consignee_id"> |
||||
|
收货地址 |
||||
|
<view>{{info.order_child[0].consignee.name}} {{info.order_child[0].consignee.tel}}</view> |
||||
|
<view class="text-overflowRows">{{info.order_child[0].consignee.address}}</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 产品详情 --> |
||||
|
<view class="pgoods-detail" :style="{marginTop: info.order_child[0].consignee_id ? '20rpx' : '-66rpx'}"> |
||||
|
商家名称 |
||||
|
<view class="pgoods-product" v-for="(item,index) in info.order_child" :key="index"> |
||||
|
<image :src="showImg(item.specifications_image)" mode="aspectFill" class="product-img"></image> |
||||
|
<view class="product-content flex-column"> |
||||
|
<view class="product-title">{{item.goods_title}}</view> |
||||
|
<view class="product-subtitle flex-between"> |
||||
|
{{item.specifications_name}} |
||||
|
<span>x{{item.num}}</span> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 商品价格 --> |
||||
|
<view class="public-price"> |
||||
|
<view class="flex-between"> |
||||
|
商品总额：<span>￥{{info.money / 100}}</span> |
||||
|
</view> |
||||
|
<view class="flex-between" v-if="info.discounts"> |
||||
|
优惠券：<span>-￥{{info.discounts / 100}}</span> |
||||
|
</view> |
||||
|
<view class="flex-between"> |
||||
|
实付金额：<span style="font-size: 35rpx;color: #EE3E3B;">￥{{info.pay_money / 100}}</span> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 自提信息 --> |
||||
|
<view class="pickup-box" v-if="info.order_child[0].contact_id && info.order_child[0].extract_id"> |
||||
|
自提信息 |
||||
|
<view class="pickup-user"> |
||||
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/user.png" class="picker-userImg"></image> |
||||
|
<view>{{info.order_child[0].contact.name}}</view> |
||||
|
<view>{{info.order_child[0].contact.tel}}</view> |
||||
|
</view> |
||||
|
<view class="pickup-address"> |
||||
|
<image></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 订单信息 --> |
||||
|
<view class="order-info"> |
||||
|
订单信息 |
||||
|
<view class="order-subtitle" style="display: flex;align-items: center;"> |
||||
|
<span>订单账号：</span>{{info.order_id}} |
||||
|
<view class="copy flex-around" @click="clickCopy"> |
||||
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/copy.png" class="copy-img"></image> |
||||
|
复制 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="order-subtitle"> |
||||
|
<span>下单时间：</span>{{info.create_time}} |
||||
|
</view> |
||||
|
<view class="order-subtitle" v-if="info.pay_time"> |
||||
|
<span>支付时间：</span>{{info.pay_time}} |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 联系客服 --> |
||||
|
<view class="kefu-box" @click="clickPhone('110')"> |
||||
|
<image src="https://static.ticket.sz-trip.com/yandu/images/order/kefu.png" mode="" class="kefu-img"></image> |
||||
|
联系客服 |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部按钮 --> |
||||
|
<footer> |
||||
|
<view class="bottom-price" v-if="info.status == 'WAIT_PAYMENT'"> |
||||
|
合计： |
||||
|
<span class="price">{{info.pay_money/100}}</span> |
||||
|
</view> |
||||
|
<view class="btn-box"> |
||||
|
<view class="btn" v-if="['PAYMENT_SUCCESSFULLY','WAIT_PAYMENT'].includes(info.status)" @click="closeOrder(info.order_id)"> |
||||
|
取消订单 |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn" v-if="['WAIT_REFUND','REFUND_SUCCESS','WAIT_COMMENT','COMPLETE','CLOSED'].includes(info.status)" @click="gotoDetail"> |
||||
|
再次购买 |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn pay-btn" v-if="info.status == 'WAIT_PAYMENT'" @click="setOrderId(info.order_id)"> |
||||
|
立即支付 |
||||
|
</view> |
||||
|
</view> |
||||
|
</footer> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
order_id: '', |
||||
|
info: {}, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.order_id = option.id |
||||
|
this.getDetail() |
||||
|
}, |
||||
|
onShow() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取订单详情 |
||||
|
getDetail() { |
||||
|
this.Post({ |
||||
|
order_id: this.order_id |
||||
|
},'/api/order/orderDetail').then(res => { |
||||
|
this.info = res.data; |
||||
|
}) |
||||
|
}, |
||||
|
// 复制订单号 |
||||
|
clickCopy() { |
||||
|
uni.setClipboardData({ |
||||
|
data: this.info.order_id, //要被复制的内容 |
||||
|
success: () => { |
||||
|
//复制成功的回调函数 |
||||
|
uni.showToast({ |
||||
|
title: '复制成功', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 再次购买：跳转产品详情 |
||||
|
gotoDetail() { |
||||
|
|
||||
|
}, |
||||
|
// 取消订单 |
||||
|
closeOrder(id, index) { |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否关闭订单？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post({ |
||||
|
order_id: id |
||||
|
},'/api/order/closeOrder').then(res => { |
||||
|
if (res.code == 1) { |
||||
|
uni.showToast({ |
||||
|
title: '关闭成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
that.getDetail(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 立即支付 |
||||
|
setOrderId(id) { |
||||
|
let that = this; |
||||
|
that.orderId = id; |
||||
|
that.Post({ |
||||
|
order_id: id, |
||||
|
type: "miniprogram", |
||||
|
platform: 'miniprogram' |
||||
|
},'/api/pay/unify').then(res => { |
||||
|
if (res.data) { |
||||
|
uni.requestPayment({ |
||||
|
nonceStr: res.data.nonceStr, |
||||
|
package: res.data.package, |
||||
|
paySign: res.data.paySign, |
||||
|
signType: res.data.signType, |
||||
|
timeStamp: res.data.timeStamp, |
||||
|
success:()=>{ |
||||
|
that.getDetail(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
overflow-x: hidden; |
||||
|
min-height: 100vh; |
||||
|
background-color: #F7F7F7; |
||||
|
padding-bottom: 200rpx; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
position: absolute; |
||||
|
left: 5rpx; |
||||
|
top: 101rpx; |
||||
|
font-size: 40rpx; |
||||
|
padding: 0 26.67rpx; |
||||
|
z-index: 2; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
|
||||
|
view { |
||||
|
font-weight: 400; |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
margin-left: 245rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.top-box { |
||||
|
width: 750rpx; |
||||
|
height: 414rpx; |
||||
|
background: linear-gradient(180deg, #DDF2E2, #DDF2E2, #DDF2E2, #DDF2E2, #DDF2E2, #F7F7F7); |
||||
|
padding: 200rpx 0 0 50rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 43rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
.close-time { |
||||
|
font-weight: 400; |
||||
|
font-size: 27rpx; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 景点订单详情 |
||||
|
.scenic-detail { |
||||
|
width: 697rpx; |
||||
|
height: auto; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 26rpx; |
||||
|
margin: -66rpx auto 0; |
||||
|
|
||||
|
&>view:nth-child(2) { |
||||
|
margin: 30rpx 0; |
||||
|
border-top: 1rpx solid #D8D8D8; |
||||
|
border-bottom: 1rpx solid #D8D8D8; |
||||
|
} |
||||
|
|
||||
|
.scenic-title { |
||||
|
font-weight: bold; |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
image { |
||||
|
width: 17.33rpx; |
||||
|
height: 29.33rpx; |
||||
|
margin-left: 20rpx; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.scenic-subtitle { |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #666666; |
||||
|
margin-top: 20rpx; |
||||
|
|
||||
|
span { |
||||
|
color: #000; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.specifications-item { |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #000000; |
||||
|
margin: 25rpx 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.novice-box { |
||||
|
width: 697rpx; |
||||
|
height: auto; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 26rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 36rpx; |
||||
|
color: #010101; |
||||
|
margin: 20rpx auto; |
||||
|
|
||||
|
.novice-item { |
||||
|
view { |
||||
|
margin: 20rpx 0; |
||||
|
} |
||||
|
|
||||
|
.novice-title { |
||||
|
font-weight: 800; |
||||
|
font-size: 27rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.novice-subtitle { |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
span { |
||||
|
display: inline-block; |
||||
|
width: 130rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.novice-item:nth-child(n+2) { |
||||
|
border-top: 1rpx solid #D8D8D8; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 邮寄订单详情 |
||||
|
.shipping-address { |
||||
|
width: 697rpx; |
||||
|
height: 235rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 26rpx; |
||||
|
margin: -66rpx auto 0; |
||||
|
font-weight: bold; |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
&>view { |
||||
|
margin-top: 25rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
&>view:first-child { |
||||
|
font-size: 31rpx; |
||||
|
color: #222222; |
||||
|
} |
||||
|
|
||||
|
&>view:last-child { |
||||
|
font-size: 31rpx; |
||||
|
color: #222222; |
||||
|
font-size: 27rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pgoods-detail { |
||||
|
width: 697rpx; |
||||
|
height: auto; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 26rpx; |
||||
|
margin: 20rpx auto; |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
.pgoods-product { |
||||
|
display: flex; |
||||
|
margin-top: 24rpx; |
||||
|
padding-bottom: 33rpx; |
||||
|
border-bottom: 1rpx solid #D8D8D8; |
||||
|
|
||||
|
.product-img { |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
border-radius: 13rpx; |
||||
|
} |
||||
|
|
||||
|
.product-content { |
||||
|
width: 485rpx; |
||||
|
height: 140rpx; |
||||
|
margin-left: 18rpx; |
||||
|
padding: 5rpx 0 12rpx; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.product-title { |
||||
|
font-weight: bold; |
||||
|
font-size: 27rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.product-subtitle { |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 自提点信息 |
||||
|
.pickup-box { |
||||
|
width: 697rpx; |
||||
|
height: auto; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
margin: 20rpx auto; |
||||
|
padding: 33rpx 26rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
&>view { |
||||
|
margin-top: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.pickup-user { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
.picker-userImg { |
||||
|
width: 33.33rpx; |
||||
|
height: 33.33rpx; |
||||
|
} |
||||
|
|
||||
|
&>view:first-of-type { |
||||
|
margin: 0 63rpx 0 19rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pickup-address { |
||||
|
display: flex; |
||||
|
|
||||
|
.pickup-addressImg { |
||||
|
width: 33.33rpx; |
||||
|
height: 33.33rpx; |
||||
|
} |
||||
|
|
||||
|
&>view:first-of-type { |
||||
|
width: 305rpx; |
||||
|
margin-left: 18rpx; |
||||
|
} |
||||
|
|
||||
|
.picker-shopName { |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #222222; |
||||
|
} |
||||
|
|
||||
|
.picker-shopAddress { |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
margin-top: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.pickup-icon { |
||||
|
margin-left: auto; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
|
||||
|
&>view { |
||||
|
text-align: center; |
||||
|
} |
||||
|
&>view:last-child { |
||||
|
margin-left: 40rpx; |
||||
|
} |
||||
|
|
||||
|
image { |
||||
|
width: 56rpx; |
||||
|
height: 56rpx; |
||||
|
margin-bottom: 5rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 商品价格 |
||||
|
.public-price { |
||||
|
|
||||
|
view { |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #666666; |
||||
|
margin-top: 25rpx; |
||||
|
|
||||
|
span { |
||||
|
font-weight: bold; |
||||
|
font-size: 27rpx; |
||||
|
color: #111111; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 订单信息 |
||||
|
.order-info { |
||||
|
width: 697rpx; |
||||
|
height: auto; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
margin: 20rpx auto; |
||||
|
padding: 33rpx 26rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
.order-subtitle { |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #000; |
||||
|
margin: 30rpx 0; |
||||
|
|
||||
|
span { |
||||
|
display: inline-block; |
||||
|
width: 130rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.copy { |
||||
|
width: 93rpx; |
||||
|
height: 37rpx; |
||||
|
border-radius: 11rpx; |
||||
|
border: 1rpx solid #71B580; |
||||
|
font-weight: 500; |
||||
|
font-size: 22rpx; |
||||
|
color: #71B580; |
||||
|
margin-left: 30rpx; |
||||
|
|
||||
|
.copy-img { |
||||
|
width: 22rpx; |
||||
|
height: 23.33rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 客服 |
||||
|
.kefu-box { |
||||
|
width: 697rpx; |
||||
|
height: 96rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
margin: 20rpx auto; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-weight: 500; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
padding-left: 27rpx; |
||||
|
|
||||
|
.kefu-img { |
||||
|
width: 44rpx; |
||||
|
height: 44rpx; |
||||
|
margin-right: 14rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 底部按钮 |
||||
|
footer { |
||||
|
width: 750rpx; |
||||
|
height: 167rpx; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background-color: #fff; |
||||
|
border-top: 10rpx solid #F7F7F7; |
||||
|
padding: 0 26rpx; |
||||
|
|
||||
|
.bottom-price { |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
span { |
||||
|
font-weight: bold; |
||||
|
font-size: 48rpx; |
||||
|
color: #EE3E3B; |
||||
|
} |
||||
|
span::before { |
||||
|
content: '￥'; |
||||
|
font-size: 27rpx; |
||||
|
} |
||||
|
} |
||||
|
.btn-box { |
||||
|
margin-left: auto; |
||||
|
display: flex; |
||||
|
|
||||
|
.btn { |
||||
|
width: 213rpx; |
||||
|
line-height: 71rpx; |
||||
|
border-radius: 37rpx; |
||||
|
border: 1rpx solid #999999; |
||||
|
text-align: center; |
||||
|
margin-right: 14rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.btn:last-of-type { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
.pay-btn { |
||||
|
height: 73rpx; |
||||
|
background: linear-gradient(270deg, #FD6F34, #F4A61F); |
||||
|
border: none; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,701 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="top-bg"> |
||||
|
<view class="search-box"> |
||||
|
<view class="left"> |
||||
|
<image src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png" mode="aspectFill"></image> |
||||
|
<input v-model="keywords" type="text" placeholder="请输入关键字" @confirm="search()" /> |
||||
|
</view> |
||||
|
|
||||
|
<!-- <view class="btn" @click="search()">搜索</view> --> |
||||
|
</view> |
||||
|
<view class="common-box"> |
||||
|
<view class="common-types com-flex-tao"> |
||||
|
<view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id" :class="['common-type', typeIndex == index ? 'active' : '']"> |
||||
|
{{ item.name }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="list-common-empty" v-if="list.length == 0"> |
||||
|
<img :src="showImg('/uploads/20221201/8f97261b8eddffcc55342eca0ed0249c.png')" /> |
||||
|
<p class="list-common-empty-tip">暂无订单~</p> |
||||
|
</view> |
||||
|
<view class="trade-list" v-if="list.length > 0"> |
||||
|
<view v-for="(item, key) in list" :key="item.id" class="trade-items" v-if="showItem(item)" @click="() => choseType(item)"> |
||||
|
<view class="trade-item-head"> |
||||
|
<view class="trade-item-head-tid">订单号:{{ item.order_id }}</view> |
||||
|
<!-- <view class="trade-item-head-name" v-else> |
||||
|
<image src="https://testtaihu.https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20221209/49c148d8753ae5aaf50949b2b09e696e.png" mode="aspectFill"></image> |
||||
|
<view class="sj-name">{{ item.list_merchant_name }}</view> |
||||
|
</view> --> |
||||
|
<view class="trade-item-head-state">{{ item.status_text }}</view> |
||||
|
</view> |
||||
|
<view class="trade-item-pros"> |
||||
|
<view |
||||
|
class="trade-item-pro" |
||||
|
v-for="(pro, proIndex) in item.order_child" |
||||
|
:key="pro.child_id" |
||||
|
> |
||||
|
<view class="trade-item-pro-img" v-if="pro.specifications_image"><image :src="showImg(pro.specifications_image)" mode="aspectFill"></image></view> |
||||
|
<view class="trade-item-pro-title">{{ pro.goods_title + pro.specifications_name }}</view> |
||||
|
<view class="trade-item-pro-price"> |
||||
|
<view class="trade-item-pro-price-pri">￥{{ pro.pay_money / 100 }}</view> |
||||
|
<view class="trade-item-pro-num">x{{ pro.num }}</view> |
||||
|
<!-- <view v-if="pro.status=='WAIT_COMMENT'"> |
||||
|
<navigator catchtap="emptyFunc" |
||||
|
:url="'/subPackages1/order/rate?id='+pro.goods_id+'&tid='+pro.child_id+'&num='+pro.num" |
||||
|
tag="view" class="comment-btn">评价 |
||||
|
</navigator> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="trade-item-info"> |
||||
|
合计￥ |
||||
|
<text>{{ item.pay_money / 100 }}</text> |
||||
|
</view> |
||||
|
<view class="trade-item-btns"> |
||||
|
<view @click.stop="() => refund(item.order_id, key)" v-if="item.status == 'PAYMENT_SUCCESSFULLY'">申请退款</view> |
||||
|
<view @click.stop="() => closeOrder(item.order_id, item)" v-if="item.status == 'WAIT_PAYMENT'">关闭订单</view> |
||||
|
<view @click.stop="confirmpost(item.order_id, key)" v-if="item.postFlag">确认收货</view> |
||||
|
<view class="pay-btn" @click.native="setOrderId(item.order_id)" v-if="item.status == 'WAIT_PAYMENT'">立即支付</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- <view v-if="list.length === 0 && finished" class="noDate"> |
||||
|
<view>暂无订单</view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Trades', |
||||
|
data() { |
||||
|
return { |
||||
|
finished: false, |
||||
|
list: [], |
||||
|
typeList: [ |
||||
|
{ |
||||
|
id: 'ALL', |
||||
|
name: '全部' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'WAIT_PAYMENT', |
||||
|
name: '待付款' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'PAYMENT_SUCCESSFULLY', |
||||
|
name: '待使用' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'PAYMENT_SUCCESSFULLY', |
||||
|
name: '待发货' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'WAIT_CONFIRM', |
||||
|
name: '待收货' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'WAIT_COMMENT', |
||||
|
name: '待评价' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'WAIT_REFUND,REFUND_SUCCESS,REFUND_REFUSAL,REFUND_ERROR,REFUND_PART', |
||||
|
name: '退款/售后' |
||||
|
} |
||||
|
], |
||||
|
typeIndex: 0, |
||||
|
ajaxFlag: true, |
||||
|
keywords: '', |
||||
|
orderId: null, |
||||
|
dateRange: [], |
||||
|
type: '' |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
console.log(options); |
||||
|
if (options.type) this.typeIndex = this.typeList.findIndex(vm => vm.name === options.type); |
||||
|
this.getList(); |
||||
|
|
||||
|
uni.$on("updateDataByConnect",this.getDataByConnect) |
||||
|
}, |
||||
|
onUnload () { |
||||
|
uni.$off("updateDataByConnect",this.getDataByConnect) |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
if (this.finished) return false; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getDataByConnect(data) { |
||||
|
if (data.msgType == "updateOrderTrades") { |
||||
|
this.list = []; |
||||
|
this.finished = false; |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
emptyFunc() { |
||||
|
|
||||
|
}, |
||||
|
showItem(item) { |
||||
|
let flag = true; |
||||
|
// if (this.typeIndex == 2 && item.order_child[0] && !item.order_child[0].consignee) flag = false |
||||
|
return flag; |
||||
|
}, |
||||
|
onReload() { |
||||
|
this.list = []; |
||||
|
this.finished = false; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
setType(index) { |
||||
|
this.typeIndex = index; |
||||
|
this.onReload(); |
||||
|
}, |
||||
|
// 去详情 |
||||
|
goOrderDetail(item) { |
||||
|
console.log(item); |
||||
|
this.orderId = item.order_id; |
||||
|
// (item.order_child[0].consignee || item.order_child[0].extract) |
||||
|
let url = item.order_child[0] && item.order_child[0].consignee ? `/subPages/order/postOrderInfo?id=${item.order_id}` : `/subPages/order/orderInfo?id=${item.order_id}`; |
||||
|
if (item.status && item.status == 'WAIT_PAYMENT') url += `&status=WAIT_PAYMENT`; |
||||
|
console.log(url); |
||||
|
uni.navigateTo({ |
||||
|
url: url |
||||
|
}); |
||||
|
}, |
||||
|
setOrderId(id) { |
||||
|
let that = this; |
||||
|
that.orderId = id; |
||||
|
that.Post( |
||||
|
{ |
||||
|
order_id: id, |
||||
|
type: "miniprogram", |
||||
|
platform: 'miniprogram' |
||||
|
}, |
||||
|
'/api/pay/unify' |
||||
|
).then(res => { |
||||
|
if (res.data) { |
||||
|
uni.requestPayment({ |
||||
|
nonceStr: res.data.nonceStr, |
||||
|
package: res.data.package, |
||||
|
paySign: res.data.paySign, |
||||
|
signType: res.data.signType, |
||||
|
timeStamp: res.data.timeStamp |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 确认收货 |
||||
|
confirmpost(id, index) { |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否确认收货？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post( |
||||
|
{ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/confirmPost' |
||||
|
).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
list[index].order_child.map(item => { |
||||
|
item.status = 'WAIT_COMMENT'; |
||||
|
}); |
||||
|
list[index].status = 'WAIT_COMMENT'; |
||||
|
list[index].postFlag = false; |
||||
|
that.list = list; |
||||
|
uni.showToast({ |
||||
|
title: '操作成功' |
||||
|
}); |
||||
|
that.$forceUpdate(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 关闭订单 |
||||
|
closeOrder(id, index) { |
||||
|
console.log(id); |
||||
|
console.log(index); |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否关闭订单？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post( |
||||
|
{ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/closeOrder' |
||||
|
).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
uni.showToast({ |
||||
|
title: '关闭成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
that.list = []; |
||||
|
that.finished = false; |
||||
|
that.getList(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//删除订单 |
||||
|
deletOrder(id) { |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否删除订单？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post( |
||||
|
{ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/delOrder' |
||||
|
).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
uni.showToast({ |
||||
|
title: '删除成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
that.list = []; |
||||
|
that.finished = false; |
||||
|
that.getList(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 申请退款 |
||||
|
refund(id, index) { |
||||
|
console.log(id); |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否申请退款？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post( |
||||
|
{ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/applyRefund' |
||||
|
).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
uni.showToast({ |
||||
|
title: '申请成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
that.onReload(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
search(e) { |
||||
|
this.list = []; |
||||
|
this.getList(); |
||||
|
// if (e.keyCode == 13) { |
||||
|
// // 提交 |
||||
|
// this.keywords = e.target.value; |
||||
|
// } |
||||
|
}, |
||||
|
getList() { |
||||
|
let data = { |
||||
|
status: this.typeList[this.typeIndex].id == 'ALL' ? '' : this.typeList[this.typeIndex].true_id || this.typeList[this.typeIndex].id, |
||||
|
offset: this.list.length, |
||||
|
limit: 5, |
||||
|
name: this.keywords |
||||
|
}; |
||||
|
this.Post(data, '/api/order/orderList').then(res => { |
||||
|
// this.list = res.data; |
||||
|
// let arr = res.data; |
||||
|
// arr.forEach(item => { |
||||
|
// item.order_child.forEach((itemX, index) => { |
||||
|
// if (index > 0) { |
||||
|
// item.order_child[0].data = [...item.order_child[0].data, ...itemX.data]; |
||||
|
// } else { |
||||
|
// itemX.f_order_id = item.order_id; |
||||
|
// itemX.f_status_text = item.status_text; |
||||
|
// itemX.f_status = item.status; |
||||
|
// itemX.f_pay_money = item.pay_money; |
||||
|
// console.log(itemX); |
||||
|
// this.list.push(itemX); |
||||
|
// } |
||||
|
// }); |
||||
|
// }); |
||||
|
// console.log(this.list); |
||||
|
// res.data.map(item => { |
||||
|
// let num = 0, |
||||
|
// postFlag = true; |
||||
|
// item.order_child.map(order => { |
||||
|
// num = num + order.num; |
||||
|
// if (order.status != 'POST') { |
||||
|
// postFlag = false |
||||
|
// } |
||||
|
// }) |
||||
|
// item.postFlag = postFlag; |
||||
|
// item.totalNumber = num; |
||||
|
// }) |
||||
|
this.list = [...this.list, ...res.data] |
||||
|
if (res.data.length < 5) { |
||||
|
this.finished = true; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
UpdateOrder(id) { |
||||
|
this.ajaxFlag = false; |
||||
|
let list = this.list; |
||||
|
this.Post( |
||||
|
{ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/orderDetail' |
||||
|
).then(res => { |
||||
|
this.ajaxFlag = true; |
||||
|
list.map(item => { |
||||
|
if (item.order_id == id) { |
||||
|
item = res.data; |
||||
|
} |
||||
|
}); |
||||
|
this.list = list; |
||||
|
}); |
||||
|
}, |
||||
|
choseType(item) { |
||||
|
uni.navigateTo({ |
||||
|
url:'/subPackages/order/detail?id='+item.order_id |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
view { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.common-box { |
||||
|
height: 90rpx; |
||||
|
} |
||||
|
|
||||
|
.common-types { |
||||
|
background: white; |
||||
|
height: 90rpx; |
||||
|
font-size: 31rpx; |
||||
|
z-index: 10; |
||||
|
margin: auto; |
||||
|
color: #666; |
||||
|
overflow-x: scroll; |
||||
|
padding: 0 27rpx; |
||||
|
} |
||||
|
|
||||
|
.common-types::-webkit-scrollbar { |
||||
|
width: 0rpx; |
||||
|
height: 0; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.common-type { |
||||
|
flex-shrink: 0; |
||||
|
margin: 0 26rpx; |
||||
|
line-height: 90rpx; |
||||
|
height: 90rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.common-type.active { |
||||
|
font-size: 31rpx; |
||||
|
font-weight: bold; |
||||
|
color: #71B580; |
||||
|
} |
||||
|
|
||||
|
.common-type.active:after { |
||||
|
display: block; |
||||
|
width: 60%; |
||||
|
background-color: rgba(0, 215, 237, 1); |
||||
|
font-size: 0; |
||||
|
content: '1'; |
||||
|
margin: auto; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 1rpx; |
||||
|
height: 4rpx; |
||||
|
background: #71B580; |
||||
|
border-radius: 2rpx; |
||||
|
} |
||||
|
|
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
background-color: #f7f7f7; |
||||
|
} |
||||
|
|
||||
|
.noDate { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-top: 200rpx; |
||||
|
} |
||||
|
|
||||
|
.noDate img { |
||||
|
width: 514rpx; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.noDate view { |
||||
|
font-size: 24rpx; |
||||
|
color: #777777; |
||||
|
} |
||||
|
|
||||
|
.trade-list { |
||||
|
padding: 28rpx 26rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-items { |
||||
|
background-color: white; |
||||
|
margin-bottom: 28rpx; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 28rpx 20rpx; |
||||
|
border-bottom: 1rpx solid #d8d8d8; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head-tid { |
||||
|
font-size: 24rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head-state { |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #71B580; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head-name { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
font-size: 31rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
|
||||
|
image { |
||||
|
width: 33rpx; |
||||
|
height: 31rpx; |
||||
|
} |
||||
|
|
||||
|
view { |
||||
|
margin-left: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.trade-item-pros { |
||||
|
display: flex; |
||||
|
/* background-color: #F2F2F2; */ |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro { |
||||
|
display: flex; |
||||
|
padding: 20rpx; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-img { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-img image { |
||||
|
width: 180rpx; |
||||
|
height: 180rpx; |
||||
|
border-radius: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-price { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-title { |
||||
|
text-align: left; |
||||
|
flex: 1; |
||||
|
padding: 0 20rpx; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-price view { |
||||
|
display: flex; |
||||
|
flex-wrap: nowrap; |
||||
|
text-wrap: none; |
||||
|
white-space: nowrap; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-price-pri { |
||||
|
font-size: 27rpx; |
||||
|
color: #fc514b; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-num { |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
margin-top: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-info { |
||||
|
font-size: 28rpx; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
background-color: white; |
||||
|
padding: 0rpx 20rpx; |
||||
|
margin-top: -6rpx; |
||||
|
/* border-bottom: 1px solid #B6B6B6; */ |
||||
|
} |
||||
|
|
||||
|
.trade-item-info text { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.trade-item-btns { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-btns view { |
||||
|
margin-left: 20rpx; |
||||
|
background: rgba(237, 237, 237, 0); |
||||
|
border: 1rpx solid #999999; |
||||
|
border-radius: 27rpx; |
||||
|
padding: 8rpx 16rpx; |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.trade-item-btns .pay-btn { |
||||
|
color: #FFFFFF; |
||||
|
background: linear-gradient(90deg, #FD6F34, #F4A61F); |
||||
|
border: none; |
||||
|
padding: 10rpx 16rpx; |
||||
|
} |
||||
|
|
||||
|
.comment-btn { |
||||
|
width: 100rpx; |
||||
|
text-align: center; |
||||
|
line-height: 40rpx; |
||||
|
border-radius: 20rpx; |
||||
|
border: 1px solid #999999; |
||||
|
color: #333333; |
||||
|
justify-content: center !important; |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.list-common-empty { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
min-height: 50vh; |
||||
|
} |
||||
|
|
||||
|
.list-common-empty img { |
||||
|
width: 483rpx; |
||||
|
height: 254rpx; |
||||
|
} |
||||
|
|
||||
|
.list-common-empty-tip { |
||||
|
margin-top: 61rpx; |
||||
|
|
||||
|
font-size: 29rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #8599b5; |
||||
|
} |
||||
|
|
||||
|
.com-flex-tao { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.search-box { |
||||
|
width: 697rpx; |
||||
|
height: 67rpx; |
||||
|
background: #f2f2f2; |
||||
|
border-radius: 33rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 8rpx 0 28rpx; |
||||
|
margin: 0 auto; |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
image { |
||||
|
width: 28rpx; |
||||
|
height: 30rpx; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
margin-left: 20rpx; |
||||
|
font-size: 31rpx; |
||||
|
font-weight: 400; |
||||
|
color: #333; |
||||
|
width: 450rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 107rpx; |
||||
|
height: 53rpx; |
||||
|
background: #71B580; |
||||
|
border-radius: 27rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
line-height: 53rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.top-bg { |
||||
|
background: #fff; |
||||
|
padding-top: 20rpx; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue