123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- <template>
- <view class="spotCheckDetails-wrap">
- <view class="item-con" v-for="(item,index) in list" :key="index">
- <view class="item-header">
- <view class="header-l">
- <text class="item-sub">{{index + 1}}、</text>
- <view class="item-c">
- <text class="item-c-tit">{{item.name}}:</text>
- <text class="item-c-txt">{{item.content}}</text>
- </view>
- </view>
- <text v-if="item.state == 0" class="header-r green">合格</text>
- <text v-if="item.state == 1" class="header-r red">不合格</text>
- <text v-if="item.state == 2" class="header-r yellow">不适用</text>
- </view>
- <view class="comment-con">
- <u-row gutter="16" class="pic-con">
- <u-col span="3" v-for="(pic, ind) in item.picList" :key="ind">
- <u-image class="pic" width="100%" height="150upx" :src="pic" @click="clickPic(index, ind)"></u-image>
- </u-col>
- </u-row>
- <view class="comment-main">
- <text class="comment-tit">{{item.userName}}:</text>
- <text class="comment-txt">{{item.remarks}}</text>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default{
- data(){
- return{
- list: [ // 列表数据
- {
- name: '着装标准',
- content: '服装干净、整洁、无污渍服装干净、整',
- picList: [
- '', '', ''
- ],
- userName: '测试账号',
- remarks: '未穿工服、办公桌面不整洁',
- state: 0
- },
- {
- name: '着装标准',
- content: '服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍服装干净、整洁、无污渍',
- picList: [
- '', '', ''
- ],
- userName: '测试账号',
- remarks: '未穿工服、办公桌面不整洁,未穿工服、办公桌面不整洁,未穿工服、办公桌面不整洁,未穿工服、办公桌面不整洁',
- state: 1
- },
- {
- name: '着装标准',
- content: '服装干净、整洁、无污渍服装干净、整',
- picList: [
- '', '', ''
- ],
- userName: '测试账号',
- remarks: '未穿工服、办公桌面不整洁',
- state: 2
- },
- ]
- }
- },
- methods: {
- // 查看评论大图
- clickPic(index,ind){
- // 预览图片
- uni.previewImage({
- current: ind,
- urls: this.list[index].picList[ind],
- longPressActions: {
- itemList: ['发送给朋友', '保存图片', '收藏'],
- success: function(data) {
- console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
- },
- fail: function(err) {
- console.log(err.errMsg);
- }
- }
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- page {
- background-color: #f8f8f8;
- height: calc(100vh - 44px);
- }
- .spotCheckDetails-wrap{
- padding-top: 20upx;
- .item-con{
- background-color: #fff;
- margin: 0 20upx 20upx;
- padding: 16upx 20upx 20upx;
- .item-header{
- display: flex;
- justify-content: space-between;
- .header-l{
- flex-grow: 1;
- position: relative;
- .item-sub{
- position: absolute;
- left: 0;
- top: 0;
- width: 66upx;
- text-align: center;
- }
- .item-c{
- padding-left: 66upx;
- .item-c-tit{
- font-weight: bold;
- }
- .item-c-txt{
-
- }
- }
- }
- .header-r{
- flex-shrink: 0;
- }
- .header-r.green{
- color: #19be6b;
- }
- .header-r.yellow{
- color: #ff9900;
- }
- .header-r.red{
- color: #fa3534;
- }
- }
- .comment-con{
- .pic-con{
- margin: 20upx 0;
- }
- .comment-main{
- font-size: 26upx;
- padding: 16upx 20upx;
- line-height: 1.5em;
- border-radius: 12upx;
- background-color: #f8f8f8;
- .comment-tit{
- font-weight: bold;
- }
- .comment-txt{
-
- }
- }
- }
- }
- }
- </style>
|