pifa
fanfan
2 months ago
parent
1a9235a23a
commit
e7464a86d5
@ -0,0 +1,625 @@ |
||||
<template> |
||||
<view class="park" :style="{backgroundImage:`url(${indexBackgroundImage})`}"> |
||||
<view class="park-navbar"> |
||||
<u-navbar title="审单" :border-bottom="false" :background="background"></u-navbar> |
||||
</view> |
||||
<view class="park-title"> |
||||
您的反馈<br>订单安心交付 |
||||
</view> |
||||
<view class="park-tips"> |
||||
拒绝一切平台单 |
||||
</view> |
||||
<view class="park-content"> |
||||
为了更好的维护市场秩序，遵守渠道规则，也为了更好的服务客户，请您耐心按照渠道商要求进行审单页面的填写。 |
||||
</view> |
||||
<view class="park-card"> |
||||
<view class="shenbox"> |
||||
<view class="shendan"> |
||||
订单审单明细 |
||||
</view> |
||||
<view class="shendan" style="font-size: 24rpx;"> |
||||
请填写真实信息 |
||||
</view> |
||||
</view> |
||||
<view class="title"> |
||||
您的这单客户来自:<text style="color: #FF1F1F;font-size: 28rpx;">*</text> |
||||
</view> |
||||
<view class="shenRoide" style="border-top: none;"> |
||||
<u-radio-group v-model="value_1" @change="radioChange_1"> |
||||
<view class="radio-group"> |
||||
<u-radio v-for="(item, index) in list_1" activeColor="red" :key="index" :name="item"> |
||||
{{item.name}} |
||||
</u-radio> |
||||
</view> |
||||
</u-radio-group> |
||||
</view> |
||||
<view class="title"> |
||||
收件地址的所在城市与您的营业执照认证地址是否为同一城市:<text style="color: #FF1F1F;font-size: 28rpx;">*</text> |
||||
</view> |
||||
<view class="shenRoide" style="border-top: none;"> |
||||
<u-radio-group v-model="value_2" @change="radioChange_2"> |
||||
<view class="radio-group"> |
||||
<u-radio v-for="(item, index) in list_2" activeColor="red" :key="index" :name="item"> |
||||
{{item.name}} |
||||
</u-radio> |
||||
</view> |
||||
</u-radio-group> |
||||
</view> |
||||
<view class="title"> |
||||
您与本订单用户的微信聊天截图<text style="color: #FF1F1F;font-size: 28rpx;">*</text> |
||||
</view> |
||||
<view class="tips"> |
||||
须体现产品型号和收件信息 |
||||
</view> |
||||
<view class="card"> |
||||
<u-upload :action="action" :header="header" @on-uploaded="orderSuccess" @on-remove="orderRemove" |
||||
:file-list="justList" :custom-btn="true" width="180" height="180" max-count="3"> |
||||
<template v-slot:addBtn> |
||||
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> |
||||
<image :src="$picUrl+'/static/news/icon-upload.png'"></image> |
||||
<view class="1">上传图片</view> |
||||
</view> |
||||
</template> |
||||
</u-upload> |
||||
</view> |
||||
<view class="title" style="margin-top: 30rpx;"> |
||||
您与本订单用户的交易转账截图<text style="color: #FF1F1F;font-size: 28rpx;">*</text> |
||||
</view> |
||||
<view class="tips"> |
||||
须体现本订单的转账截图 |
||||
</view> |
||||
<view class="card"> |
||||
<u-upload :action="action" :header="header" @on-uploaded="transferSuccess" @on-remove="transferRemove" |
||||
:file-list="proveList" :custom-btn="true" width="180" height="180" max-count="3"> |
||||
<template v-slot:addBtn> |
||||
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> |
||||
<image :src="$picUrl+'/static/news/icon-upload.png'"></image> |
||||
<view class="1">上传图片</view> |
||||
</view> |
||||
</template> |
||||
</u-upload> |
||||
</view> |
||||
</view> |
||||
<view class="agreement"> |
||||
<u-checkbox active-color="#08CC57" v-model="isCheckout" style="margin-right: -20rpx"></u-checkbox> |
||||
已阅读并同意<text @click="toTextPage(4)">《平台审单协议》》</text> |
||||
</view> |
||||
<view class="park-button" @click="nextSumbit()"> |
||||
提交审核 |
||||
</view> |
||||
<view class="shendanCode" v-if="storeInfo.standard_image"> |
||||
<image |
||||
@click="previewImage(storeInfo.standard_image.preview_url)" |
||||
:src="storeInfo.standard_image.preview_url" mode=""></image> |
||||
<view class="name"> |
||||
审单疑问 欢迎咨询 |
||||
</view> |
||||
</view> |
||||
<view class="button-fixed" @click="toTextPage(5)"> |
||||
审<br>单<br>规<br>则 |
||||
</view> |
||||
<view class="selfMask" v-if="popShow"> |
||||
<view class="self_popup"> |
||||
<image :src="$picUrl + '/static/news1/pop.png'" class="popimg" mode="widthFix"></image> |
||||
<view class="popcontent"> |
||||
<view class="poptitle"> |
||||
您已提交审单! |
||||
</view> |
||||
<view class="poptext"> |
||||
我们会尽快审核哦! |
||||
</view> |
||||
<view class="knowBtn" @click="popShow = false"> |
||||
我知道了 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<addShuiyin /> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
import * as help from '@/api/help' |
||||
import Config from '@/core/config' |
||||
export default { |
||||
data() { |
||||
return { |
||||
background: { |
||||
background: 'none' |
||||
}, |
||||
indexBackgroundImage: 'https://www.amiami.com.cn/static/standard.png?t=1', |
||||
action: '', |
||||
header: '', |
||||
justList: [], |
||||
proveList: [], |
||||
order_image_ids: [], |
||||
transfer_image_ids: [], |
||||
isCheckout: false, |
||||
storeInfo: '', |
||||
list_1: [{ |
||||
name: '本地同城线下真实零售客户', |
||||
val: 10 |
||||
}, |
||||
{ |
||||
name: '电商平台客户', |
||||
val: 20 |
||||
}, |
||||
{ |
||||
name: '短视频平台客户', |
||||
val: 30 |
||||
} |
||||
], |
||||
list_2: [{ |
||||
name: '是', |
||||
val: 10 |
||||
}, |
||||
{ |
||||
name: '否', |
||||
val: 20 |
||||
}, |
||||
], |
||||
value_1: '', |
||||
value_2: '', |
||||
popShow: false, |
||||
orderId: '' |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.orderId = options.orderId |
||||
this.storeInfo = JSON.parse(uni.getStorageSync("storeInfo")); |
||||
}, |
||||
onShow() { |
||||
|
||||
}, |
||||
onReady() { |
||||
this.action = (Config.get('apiUrl') + 'upload/image').replace("index.php?s=/", "") |
||||
this.header = { |
||||
'Storeid': uni.getStorageSync('Store').storeInfo.store_id, |
||||
'Access-Token': uni.getStorageSync('AccessToken'), |
||||
'platform': "MP-WEIXIN", |
||||
} |
||||
}, |
||||
/** |
||||
* 分享当前页面 |
||||
*/ |
||||
onShareAppMessage() { |
||||
// 构建页面参数 |
||||
const params = this.$getShareUrlParams() |
||||
return { |
||||
// title: '诚挚邀请，欢迎入驻！', |
||||
// path: `/pages/news1/MerchantSupplier` |
||||
} |
||||
}, |
||||
methods: { |
||||
previewImage(image_url) { |
||||
// 调用预览图片API |
||||
uni.previewImage({ |
||||
current: 0, // 当前显示图片索引 |
||||
urls: [image_url] // 需要预览的图片URL列表 |
||||
}); |
||||
}, |
||||
// 选中某个单选框时，由radio时触发 |
||||
radioChange_1(e) { |
||||
}, |
||||
// 选中任一radio时，由radio-group触发 |
||||
radioChange_2(e) { |
||||
}, |
||||
toTextPage(type) { |
||||
uni.navigateTo({ |
||||
url: '/pages/news1/text?pageFlag=' + type |
||||
}) |
||||
}, |
||||
async nextSumbit() { |
||||
let that = this |
||||
if (!that.value_1) { |
||||
uni.showToast({ |
||||
title: "请选择您的这单客户来源", |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
if (!that.value_2) { |
||||
uni.showToast({ |
||||
title: "请选择您的这单收件地址的所在城市与您的营业执照认证地址是否为同一城市", |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
if (that.order_image_ids.length == 0) { |
||||
uni.showToast({ |
||||
title: "请上传您与本订单用户的微信聊天截图", |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
if (that.transfer_image_ids.length == 0) { |
||||
uni.showToast({ |
||||
title: "请上传您与本订单用户的交易转账截图", |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
if (!this.isCheckout) { |
||||
uni.showToast({ |
||||
title: "请阅读平台审单协议", |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
uni.showLoading({ |
||||
title: "加载中" |
||||
}) |
||||
let { |
||||
status, |
||||
message, |
||||
data |
||||
} = await help.submitStandard({ |
||||
orderId: that.orderId, |
||||
form: { |
||||
from: that.value_1.val, |
||||
is_city: that.value_2.val, |
||||
order_image: that.order_image_ids, |
||||
transfer_image: that.transfer_image_ids |
||||
} |
||||
}); |
||||
if (status == 200) { |
||||
uni.hideLoading(); |
||||
that.popShow = true |
||||
} |
||||
}, |
||||
// 正面 |
||||
orderSuccess(list) { |
||||
if (list.length > 0) { |
||||
const { |
||||
response |
||||
} = list[0]; |
||||
if (response.status == 200) { |
||||
uni.showToast({ |
||||
title: "上传成功" |
||||
}) |
||||
let idList = [] |
||||
list.forEach(item => { |
||||
idList.push(item.response.data.fileInfo.file_id) |
||||
}); |
||||
this.order_image_ids = idList.join(','); |
||||
} |
||||
} |
||||
}, |
||||
orderRemove(file, fileList) { |
||||
this.order_image_ids = this.handleRemove(file, fileList); |
||||
}, |
||||
transferSuccess(list) { |
||||
if (list.length > 0) { |
||||
const { |
||||
response |
||||
} = list[0]; |
||||
if (response.status == 200) { |
||||
uni.showToast({ |
||||
title: "上传成功" |
||||
}) |
||||
let idList = [] |
||||
list.forEach(item => { |
||||
idList.push(item.response.data.fileInfo.file_id) |
||||
}); |
||||
this.transfer_image_ids = idList.join(','); |
||||
} |
||||
} |
||||
}, |
||||
transferRemove(file, fileList) { |
||||
this.transfer_image_ids = this.handleRemove(file, fileList); |
||||
}, |
||||
handleRemove: function(file, fileList) { |
||||
let idList = [] |
||||
fileList.forEach(item => { |
||||
idList.push(item.response.data.fileInfo.file_id) |
||||
}); |
||||
return idList.join(',') |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
<style> |
||||
page { |
||||
background: #fff; |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
.park { |
||||
overflow: hidden; |
||||
width: 100%; |
||||
background-size: 100% auto; |
||||
min-height: 100vh; |
||||
padding-bottom: 68rpx; |
||||
background-size: cover; |
||||
|
||||
.park-title { |
||||
padding: 20rpx 98rpx 20rpx 48rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: bold; |
||||
font-size: 56rpx; |
||||
color: #000; |
||||
line-height: 80rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.park-tips { |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-size: 32rpx; |
||||
color: #000; |
||||
font-weight: bold; |
||||
text-align: center; |
||||
} |
||||
|
||||
.park-content { |
||||
width: 400rpx; |
||||
padding: 24rpx 32rpx; |
||||
background-color: #bdbbeb; |
||||
line-height: 34rpx; |
||||
margin: 30rpx auto 24rpx auto; |
||||
} |
||||
|
||||
.park-button { |
||||
width: 686rpx; |
||||
height: 88rpx; |
||||
border-radius: 44rpx; |
||||
margin: 32rpx auto 0 auto; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
font-size: 28rpx; |
||||
color: #fff; |
||||
background: #ff6b73; |
||||
line-height: 88rpx; |
||||
text-align: center; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
|
||||
.agreement { |
||||
font-size: 24rpx; |
||||
font-weight: 400; |
||||
color: #222222; |
||||
margin-left: 48rpx; |
||||
|
||||
text { |
||||
color: #999; |
||||
} |
||||
|
||||
::v-deep .u-checkbox__icon-wrap--square { |
||||
border-radius: 50% !important; |
||||
width: 17px !important; |
||||
height: 17px !important; |
||||
} |
||||
} |
||||
|
||||
.park-card { |
||||
overflow: hidden; |
||||
background: #fff; |
||||
border-radius: 16rpx; |
||||
margin: 24rpx 32rpx 24rpx 32rpx; |
||||
padding: 30rpx 24rpx; |
||||
|
||||
.shenRoide { |
||||
margin: 30rpx 0 40rpx 0; |
||||
overflow: hidden; |
||||
border: 1rpx solid #D1D1D1; |
||||
border-radius: 16rpx; |
||||
|
||||
::v-deep .u-radio { |
||||
width: 100% !important; |
||||
height: 80rpx !important; |
||||
border-top: 1rpx solid #D1D1D1; |
||||
} |
||||
|
||||
::v-deep .u-radio__icon-wrap--circle { |
||||
margin-left: 30rpx; |
||||
} |
||||
|
||||
::v-deep .u-radio__label { |
||||
width: calc(100% - 100rpx) !important |
||||
} |
||||
} |
||||
|
||||
.shenbox { |
||||
overflow: hidden; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-bottom: 30rpx; |
||||
|
||||
.shendan { |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 700; |
||||
font-size: 32rpx; |
||||
color: #333; |
||||
} |
||||
} |
||||
|
||||
.card { |
||||
overflow: hidden; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.slot-btn { |
||||
width: 180rpx; |
||||
height: 180rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 10rpx; |
||||
border: 1px solid #C0C0C0; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
font-weight: 500; |
||||
color: #D1D1D1; |
||||
|
||||
image { |
||||
width: 50rpx; |
||||
height: 50rpx; |
||||
margin-top: 45rpx; |
||||
} |
||||
} |
||||
|
||||
.card-box { |
||||
width: 202rpx; |
||||
height: 192rpx; |
||||
padding-top: 24rpx; |
||||
background: #EEEEEE; |
||||
border-radius: 16rpx; |
||||
|
||||
image { |
||||
display: block; |
||||
width: 96rpx !important; |
||||
width: 96rpx !important; |
||||
margin: 0rpx auto 16rpx auto; |
||||
} |
||||
|
||||
.card-tips { |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
font-size: 24rpx; |
||||
color: #999999; |
||||
text-align: center; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.title { |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
font-size: 28rpx; |
||||
color: #222222; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
} |
||||
|
||||
.tips { |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
font-size: 28rpx; |
||||
color: #222222; |
||||
text-align: left; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
margin: 6rpx 0 20rpx 0; |
||||
} |
||||
} |
||||
|
||||
.button-fixed { |
||||
width: 44rpx; |
||||
padding: 10rpx 0; |
||||
background: #9a2430; |
||||
border-radius: 16rpx 0rpx 0rpx 16rpx; |
||||
position: fixed; |
||||
top: 400rpx; |
||||
right: 0; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
font-size: 20rpx; |
||||
color: #FFFFFF; |
||||
line-height: 32rpx; |
||||
text-align: center; |
||||
font-style: normal; |
||||
text-transform: none; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.popcontent { |
||||
width: 520upx; |
||||
height: 400upx; |
||||
background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%); |
||||
border-radius: 6px; |
||||
opacity: 1; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 0 40upx; |
||||
align-items: center; |
||||
|
||||
.poptitle { |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: bold; |
||||
margin-top: 118upx; |
||||
color: #000000; |
||||
|
||||
} |
||||
|
||||
.poptext { |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #727272; |
||||
margin-top: 32upx; |
||||
line-height: 36upx; |
||||
|
||||
} |
||||
|
||||
.knowBtn { |
||||
width: 400upx; |
||||
height: 72upx; |
||||
line-height: 72upx; |
||||
text-align: center; |
||||
background: #F55349; |
||||
border-radius: 72upx; |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
margin-top: 58upx; |
||||
} |
||||
|
||||
} |
||||
|
||||
.selfMask { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: 999; |
||||
background: rgba(60, 60, 60, 0.52); |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.self_popup { |
||||
position: relative; |
||||
padding-top: 56rpx; |
||||
} |
||||
|
||||
.popimg { |
||||
position: absolute; |
||||
width: 112upx; |
||||
left: 50%; |
||||
height: 128upx; |
||||
margin-left: -56upx; |
||||
top: 0; |
||||
z-index: 2; |
||||
} |
||||
|
||||
::v-deep .u-mode-center-box { |
||||
background: transparent; |
||||
} |
||||
|
||||
.shendanCode { |
||||
overflow: hidden; |
||||
|
||||
image { |
||||
display: block; |
||||
width: 250rpx; |
||||
height: 250rpx; |
||||
margin: 30rpx auto; |
||||
} |
||||
|
||||
.name { |
||||
text-align: center; |
||||
width: 100%; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #333; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue