球星卡微信小程序
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.
 
 
 
 

364 lines
9.4 KiB

<template>
<view class="flex-col page">
<view class="flex-col group_3">
<view class="flex-col">
<view class="bottom-group flex-col view_3">
<view class="flex-row equal-division">
<view class="equal-division-item flex-col items-center">
<image
src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497893751612328.png"
class="image_7"
/>
<text class="text_2">填写信息</text>
</view>
<view class="equal-division-item flex-col items-center">
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497774314812625.png"
class="image_9"
/>
<text class="text_2">藏品寄送</text>
</view>
<view class="equal-division-item flex-col items-center">
<image
src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497893767537982.png"
class="image_7"
/>
<text class="text_2">评级</text>
</view>
</view>
<view class="justify-between group_8">
<view class="left-section"> </view>
<view class="left-section"> </view>
</view>
</view>
<view class="flex-col section_2">
<picker mode="selector" :range="expressList" range-key="label" @change="pickerChange">
<view class="justify-between">
<view class="flex-row">
<text class="text_6">快递公司</text>
<text class="text_7">{{ expressIndex !== '' ? expressList[expressIndex].label : '请选择快递公司' }}</text>
</view>
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497774758380231.png"
class="image_11"
/>
</view>
</picker>
<view class="justify-between group_11">
<view class="flex-row" style="align-items: center;">
<text class="text_8">快递单号</text>
<!-- <text class="text_9">请填写快递单号</text> -->
<u-input v-model="oddNumber" placeholder="请填写快递单号" maxlength="18"></u-input>
</view>
<image
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497774389520756.png"
class="image_5 image_12"
@click="scan"
/>
</view>
</view>
<view class="flex-col section_3">
<view class="justify-between">
<text class="text_10">寄送地址</text>
<text class="text_11" @click="setClipboardData">一键复制</text>
</view>
<view class="flex-row group_14">
<text class="text_12">收货人:</text>
<text class="text_13">评分卡部</text>
</view>
<view class="flex-row group_15">
<text class="text_14">联系电话:</text>
<text class="text_15">18268905349</text>
</view>
<view class="flex-row group_16">
<text class="text_16">收货地址:</text>
<text class="text_17">北京北京市西城区5号设计总院A座203室</text>
</view>
</view>
</view>
<view class="flex-col group_17">
<view class="flex-col items-center button" @click="submit">
<text>送评</text>
</view>
<text class="text_19" @click="$toBack(2)">稍后填写</text>
<view style="width: 100%; height: 30rpx;"></view>
</view>
</view>
</view>
</template>
<script>
import { addGrading } from '@/service/grading.js';
export default {
data() {
return {
oddNumber: '',
expressList: [{
label: '中通快递',
value: '1'
},{
label: '圆通快递',
value: '2'
}],
expressIndex: ''
};
},
methods: {
setClipboardData(){
uni.setClipboardData({
data: '复制'
})
},
scan(){
uni.scanCode({
complete: result => {
this.oddNumber = result.result;
}
})
},
pickerChange(event){
this.expressIndex = event.detail.value;
},
submit(){
if(this.expressIndex === '') return this.$msg('请选择快递公司');
if(!this.oddNumber) return this.$msg('请输入快递单号');
let pages = getCurrentPages();
let page = pages[pages.length - 2]; // 访问上一个页面
let preData = page.data;
let data = {
express_type: this.expressList[this.expressIndex].label,
express_numb: this.oddNumber,
note: preData.remarks,
is_fast: Number(preData.isQuickReview),
num: preData.sonpingInfo.number,
tel: preData.sonpingInfo.phone,
owner: preData.sonpingInfo.name,
addr_id: preData.address.id,
images: preData.fileList.map(item => item.url).join(',') // todo 上传的打包照片
};
addGrading(data).then(res => {
// let id = res.data.datas.id; // 详情需要用到id TODO
let id = '';
this.$msg('提交成功', {icon: 'success'}).then(() => {
this.$url('/packages/sonpingDetail/sonpingDetail?id='+ id, {type: 'launch'}); // 关闭所有页面跳转到详情
})
})
}
}
};
</script>
<style scoped lang="css">
.bottom-group {
position: relative;
}
.image_5 {
width: 36rpx;
height: 36rpx;
}
.equal-division-item {
flex: 1 1 240rpx;
padding: 10rpx 0;
}
.left-section {
background-image: repeating-linear-gradient(
90deg,
rgb(209, 161, 28),
rgb(209, 161, 28) 2.4691358024691357%,
transparent 2.4691358024691357%,
transparent 14.814814814814815%
);
width: 162rpx;
height: 2rpx;
}
.image_7 {
border-radius: 50%;
width: 80rpx;
height: 80rpx;
}
.text_2 {
margin-top: 20rpx;
}
.page {
background-color: #f6f6f6;
width: 100%;
overflow-y: auto;
height: 100%;
}
.group_3 {
padding: 2rpx 0 16rpx;
flex: 1 1 auto;
overflow-y: auto;
}
.group_17 {
margin-top: 60rpx;
padding: 0 32rpx;
}
.view_3 {
color: rgb(85, 85, 85);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.section_2 {
margin-top: 30rpx;
padding: 40rpx 30rpx 40rpx 32rpx;
background-color: rgb(255, 255, 255);
}
.section_3 {
margin-top: 30rpx;
padding: 40rpx 32rpx 44rpx;
background-color: rgb(255, 255, 255);
}
.button {
padding: 26rpx 0;
color: rgb(255, 255, 255);
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
white-space: nowrap;
background-color: rgb(231, 162, 63);
border-radius: 10rpx;
}
.text_19 {
margin-top: 30rpx;
align-self: center;
color: rgb(119, 119, 119);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.equal-division {
padding: 30rpx 14rpx;
background-color: rgb(255, 255, 255);
}
.group_8 {
width: 404rpx;
position: absolute;
right: 166rpx;
top: 79rpx;
}
.group_11 {
margin-top: 50rpx;
align-items: center;
}
.group_14 {
margin-top: 40rpx;
}
.group_15 {
margin-top: 50rpx;
}
.group_16 {
margin-right: 26rpx;
margin-top: 48rpx;
}
.image_11 {
margin: 10rpx 0 8rpx;
width: 16rpx;
height: 26rpx;
}
.image_12 {
margin: 4rpx 0;
}
.text_10 {
color: rgb(51, 51, 51);
font-size: 36rpx;
font-weight: 600;
line-height: 50rpx;
white-space: nowrap;
}
.text_11 {
margin: 6rpx 0 4rpx;
color: rgb(231, 162, 63);
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
white-space: nowrap;
}
.text_12 {
color: rgb(119, 119, 119);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.text_13 {
margin-left: 42rpx;
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.text_14 {
color: rgb(119, 119, 119);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.text_15 {
margin-left: 10rpx;
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.text_16 {
color: rgb(119, 119, 119);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.text_17 {
margin-left: 10rpx;
flex: 1 1 auto;
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 48rpx;
text-align: left;
}
.image_9 {
width: 80rpx;
height: 80rpx;
}
.text_6 {
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.text_7 {
margin-left: 10rpx;
color: rgb(119, 119, 119);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.text_8 {
color: rgb(51, 51, 51);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
.text_9 {
margin-left: 10rpx;
color: rgb(119, 119, 119);
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
white-space: nowrap;
}
</style>