115 lines
2.7 KiB
Vue
115 lines
2.7 KiB
Vue
<template>
|
||
<view>
|
||
<view class="picker-container">
|
||
<view v-for="(item, idx) in pickerList" :key="item.id" class="single-picker">
|
||
<picker mode="selector" :value="item.value" :range="item.range" range-key="name" @change="bindPickerChange($event, idx, item)">
|
||
<view class="picker">当前选择：{{item.range[item.value].name || '请选择'}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<block v-if="answerName">
|
||
<view style="font-size:32rpx;color:#ff0000;text-align:center;">
|
||
<view style="color:#ff0000;">选型结果：</view>{{answerName}}
|
||
</view>
|
||
</block>
|
||
<block v-if="files_url">
|
||
<view class="pdfcss" style="text-align:center;">
|
||
<view @tap="onTapDoc" class="graphic-nav-item">
|
||
<view style="display:flex;margin:10rpx;">
|
||
<view style="flex:1;">
|
||
<image style="width:50rpx;height:50rpx;" :src="g0" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="file_title">结果文件</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
pickerList: [],
|
||
answerName: '',
|
||
files_url: '',
|
||
g0: ''
|
||
};
|
||
},
|
||
computed: {
|
||
themeColor() {
|
||
return '#ffffff';
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 初始化数据
|
||
this.files_url = '';
|
||
this.g0 = this.files_url ? this.$util.img('addon/personnel/shop/view/enterprise/fileicon.png') : null;
|
||
},
|
||
methods: {
|
||
bindPickerChange(e, idx, item) {
|
||
// 处理选择器变化
|
||
item.value = e.detail.value;
|
||
this.$set(this.pickerList, idx, item);
|
||
// 可以在这里添加逻辑，根据选择结果更新 answerName
|
||
},
|
||
onTapDoc() {
|
||
// 处理文档点击事件
|
||
if (this.files_url) {
|
||
uni.downloadFile({
|
||
url: this.files_url,
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
uni.openDocument({
|
||
filePath: res.tempFilePath,
|
||
success: (res) => {
|
||
console.log('打开文档成功');
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.picker-container {
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.single-picker {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
border: solid 2rpx red;
|
||
border-radius: 16rpx;
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.picker {
|
||
flex: 1;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 32rpx;
|
||
width: 100%;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.file_title {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.graphic-nav-item {
|
||
padding: 20rpx;
|
||
text-align: center;
|
||
}
|
||
</style> |