updated

pages/goods/components/procurement_card.vue

@@ -1,45 +1,58 @@
 <template>
     <view class="card">
-        <view class="card_title">
-            <view class="card_user_icon">发起者</view>
-            <view class="card_user">{{ procuretInfo.clubName }}</view>
-        </view>
-        <view class="card_time">{{ procuretInfo.saveTime }}</view>
-        <view class="card_content">
-            <image class="card_content_img" :src="procuretInfo.productImage" mode="aspectFill"></image>
-            <view class="card_content_title">{{ procuretInfo.productName }}</view>
-        </view>
-        <view class="card_form">
-            <view class="form">
-                <view class="form_title">期望单价：</view>
-                <view class="form_price">￥{{ procuretInfo.price }}</view>
+        <view @click="$emit('procureDetail', procuretInfo)">
+            <view class="card_title" @click="$emit('procureDetail', procuretInfo)">
+                <view class="card_user_icon">发起者</view>
+                <view class="card_user">{{ procuretInfo.userName | subText(12) }}</view>
             </view>
-        </view>
-        <view class="card_form">
-            <view class="form">
-                <view class="form_title">采购数量：</view>
-                <view class="form_price">{{ procuretInfo.number }}</view>
+            <view class="card_time">{{ procuretInfo.saveTime }}</view>
+            <view class="card_content" @click="$emit('procureDetail', procuretInfo)">
+                <image class="card_content_img" :src="procuretInfo.productImage" mode="aspectFill"></image>
+                <view class="card_content_title">{{ procuretInfo.productName | subText(22) }}</view>
             </view>
-            <view class="form_title">></view>
-        </view>
-        <view class="card_form">
-            <view class="form">
-                <view class="form_title">参与机构数：</view>
-                <view class="form_price">{{ procuretInfo.partNumber || 0 }}</view>
+            <view class="card_form">
+                <view class="form">
+                    <view class="form_title">期望单价：</view>
+                    <view class="form_price">￥{{ procuretInfo.price }}</view>
+                </view>
             </view>
-        </view>
-        <view class="card_foot" v-if="!procurementStatus('isAllTab') && procurementStatus('isInvolved')">
-            <view class="foot_title">您已参与</view>
-            <view class="foot_continue">
-                <view class="foot_change" @click="procurementChange">修改</view>
-                <view class="foot_delete" @click="procurementDelete">删除</view>
-                <view class="foot_exit" @click="procurementExit">退出</view>
+            <view class="card_form">
+                <view class="form">
+                    <view class="form_title">采购数量：</view>
+                    <view class="form_price">{{ procuretInfo.number }}</view>
+                </view>
+                <view class="form_title">></view>
+            </view>
+            <view class="card_form">
+                <view class="form">
+                    <view class="form_title">参与机构数：</view>
+                    <view class="form_price">{{ procuretInfo.partNumber || 0 }}</view>
+                </view>
             </view>
         </view>
-        <view class="card_foot_2" @click="procurementAdd" v-if="procurementStatus('isInvolved')">
-            <view class="foot_title">我要参与</view>
+        
+        <view v-if="!procurementStatus('isDelFlag') && !procurementStatus('isAchieve')">
+            <view class="card_foot" v-if="procurementStatus('isSelfParticipationTab')">
+                <view class="foot_continue">
+                    <view class="foot_change" @click="procurementChange">修改</view>
+                    <view class="foot_delete" @click="procurementDelete" v-if="proTabId === 2">删除</view>
+                    <view class="foot_exit" @click="procurementExit" v-if="proTabId === 1">退出</view>
+                </view>
+                <view class="foot_title" v-if="proTabId === 1">您已参与</view>
+            </view>
+            <view v-if="procurementStatus('isAllTab') && !procurementStatus('isInvolved', 2)">
+                <view
+                    class="card_foot_2"
+                    @click="procurementAdd"
+                    v-if="procurementStatus('isInvolved', 0)"
+                >
+                    <view class="foot_title">我要参与</view>
+                </view>
+                <view class="card_foot_2" v-else>
+                    <view class="foot_title_2" >您已参与</view>
+                </view>
+            </view>
         </view>
-        <view class="card_foot_2" v-if="procurementStatus('isAllTab') && procurementStatus('isInvolved')"><view class="foot_title_2">您已参与</view></view>
         <view class="card_status">
             <image
                 v-if="procurementStatus('isAchieve')"
@@ -54,7 +67,7 @@
                 mode="aspectFill"
             ></image>
         </view>
-        <view class="card_bg" v-if="procurementStatus('isDelFlag')"></view>
+        <view class="card_bg" v-if="procurementStatus('isDelFlag')" @click="$emit('procureDetail', procuretInfo)"></view>
     </view>
 </template>
 
@@ -76,19 +89,24 @@ export default {
             card: {}
         }
     },
-    computed: {
-        
-        
-    },
-    watch: {
-    },
-    mounted() {
+    filters: {
+        subText(str, index) {
+            if (str.length <= index) {
+                return str
+            }
+            return str.substring(0, index) + '...'
+        }
     },
+    computed: {},
+    watch: {},
+    mounted() {},
     methods: {
         handlerChange() {},
         handlerDelete() {},
         // 删除
-        procurementDelete() {},
+        procurementDelete() {
+            this.$emit('proDelete', this.procuretInfo)
+        },
         // 修改
         procurementChange() {
             this.$emit('popupChange', this.procuretInfo)
@@ -102,16 +120,18 @@ export default {
             this.$emit('modelData', this.procuretInfo)
         },
         // 各部分状态
-        procurementStatus(string) {
+        procurementStatus(string, res) {
             const procuretInfo = this.procuretInfo
             const status = {
-                'isDelFlag': () => procuretInfo.delFlag === 1, // 是否删除
-                'isAchieve': () => procuretInfo.isAchieve === 0, // 是否实现
-                'isAllTab': () => this.proTabId === 0, // 是否在全部的tab栏下
-                'isInvolved': () => procuretInfo.isInvolved === 1, // 是否参与 0 未参与 1已参与 2 我创建的
+                isDelFlag: () => procuretInfo.delFlag == 1, // 是否删除
+                isAchieve: () => procuretInfo.isAchieve == 1, // 是否实现
+                isAllTab: () => this.proTabId === 0, // 是否在全部的tab栏下
+                isInvolved: res => procuretInfo.isInvolved === res, // 是否参与 0 未参与 1已参与 2 我创建的
+                isAdd: () => procuretInfo.isInvolved === 2, // 是否是自身创建的
+                isSelfParticipationTab: () => this.proTabId > 0, // 是否在已参与tab栏 是否在自已发布的tab中
             }
-            return status[string]()
-        },
+            return status[string](res)
+        }
     }
 }
 </script>
@@ -211,6 +231,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-content: center;
+    flex-direction: row-reverse;
     border-top: 1px solid #e1e1e1;
 }
 .card_foot .foot_title {

pages/goods/components/upload.vue

@@ -29,6 +29,7 @@
         },
         watch: {
             imageData(val) {
+                console.log(val)
                 if (val) {
                     console.log(val)
                     this.imageUrl = val

pages/goods/procurement.vue

@@ -2,7 +2,7 @@
     <view class="proInit">
         <tui-skeleton
             v-if="skeletonShow"
-         	  backgroundColor="#fafafa"
+            backgroundColor="#fafafa"
             borderRadius="10rpx"
             :isLoading="true"
             :loadingType="5"
@@ -15,7 +15,15 @@
                 :key="index"
                 :style="{ marginTop: index === 0 ? '40px' : '' }"
             >
-                <proCard @modelData="modelData" :proTabId='currentTab' :procuretInfo="item" @popupAdd="popupAdd" @popupChange="popupChange" />
+                <proCard
+                    @modelData="modelData"
+                    :proTabId="currentTab"
+                    :procuretInfo="item"
+                    @popupAdd="popupAdd"
+                    @popupChange="popupChange"
+                    @proDelete='proDelete'
+                    @procureDetail='procureDetail'
+                />
             </view>
         </view>
         <!-- 弹窗提示 -->
@@ -25,9 +33,9 @@
             @cancel="hideMobel"
             :content="contentModalText"
             :button="modalButton"
-           	color="#333"
+            color="#333"
             :size="32"
-        	   shape="circle"
+            shape="circle"
             :maskClosable="false"
         ></tui-modal>
         <view class="add_btn" @click="procurementAdd">
@@ -39,14 +47,12 @@
                 <view class="popup_form">
                     <view class="popup_form_item">商品图片：</view>
                     <view class="popup_img">
-                        <image style="width: 100%;height: 100%;" src="" mode="aspectFill"></image>
+                        <image style="width: 100%;height: 100%;" :src="joinData.productImage" mode="aspectFill"></image>
                     </view>
                 </view>
                 <view class="popup_form">
                     <view class="popup_form_item">商品名称：</view>
-                    <view class="popup_form_name">
-                        韩国恩盛进口氢洁气小气泡清韩进口氢洁气小气泡清 口氢洁气小气泡清韩进口氢洁气小气泡
-                    </view>
+                    <view class="popup_form_name">{{ joinData.productName }}</view>
                 </view>
                 <form>
                     <view class="uni-form-item uni-column">
@@ -56,7 +62,7 @@
                         </view>
                         <view style="position: relative;">
                             <view class="input_icon">￥</view>
-                            <input class="uni-input" focus placeholder="自动获得焦点" />
+                            <input class="uni-input" type="number" focus v-model="joinData.price" />
                         </view>
                     </view>
                     <view class="uni-form-item uni-column">
@@ -65,17 +71,17 @@
                             采购数量：
                         </view>
                         <view style="position: relative;">
-                            <input class="uni-input" focus placeholder="自动获得焦点" />
+                            <input class="uni-input" type="number" focus v-model="joinData.number" />
                         </view>
                     </view>
                     <view class="submit_btn">
-                        <button class="popup_btn cancel">取消</button>
-                        <button class="popup_btn submit">确定</button>
+                        <button class="popup_btn cancel" @click="handlerPopupClose">取消</button>
+                        <button class="popup_btn submit" @click="procurementParticipate">确定</button>
                     </view>
                 </form>
             </view>
         </tui-bottom-popup>
-        <view :style="{marginTop: procurementList.length > 0 ? '0' : '88rpx'}">
+        <view :style="{ marginTop: procurementList.length > 0 ? '0' : '88rpx' }">
             <!--加载loadding-->
             <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
             <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
@@ -110,7 +116,7 @@ export default {
             ],
             currentTab: 0, // tab 当前所在栏
             modal: false, // 弹窗
-            contentModalText: '确定退出参与该需求吗？', // 弹窗内容
+            contentModalText: '', // 弹窗内容
             // 弹窗配置
             modalButton: [
                 {
@@ -142,18 +148,26 @@ export default {
                 userId: '',
                 procurementType: 0,
             },
+            // 删除退出
+            deleteData: {
+                id: 0,
+                userId: 0,
+                procurementType: 0
+            },
             // 所有数据
-            procurementList: [], 
+            procurementList: [],
             // 下拉刷新
             nomoreText: '已经被掏空了~',
             userInfo: {},
             isLastPage: false, // 是否是最后一页
+            joinData: {}, // 我要参与
         }
     },
     watch: {
         currentTab(val) {
             this.loadding = true
             this.pullUpOn = true
+            this.pageInfo.pageNo =1
             if (val>0) {
                 this.participate.procurementType = --val
                 this.procurementTabChange()
@@ -169,19 +183,30 @@ export default {
         ...mapState(['hasLogin'])
     },
     onShow() {
-        // if (this.hasLogin) {
+        if (uni.getStorageSync('userInfo')) {
             this.userInfo = uni.getStorageSync('userInfo')
             this.pageInfo.userId = this.userInfo.userId
             this.participate.userId = this.userInfo.userId
             this.procurementAllList()
-        // } else {
-        //     this.$api.redirectTo('/pages/login/login')
-        // }
+        } else {
+            this.$api.redirectTo('/pages/login/login')
+        }
+    },
+    onLoad() {
+        uni.$on('refreshAddData',() => {
+            this.procurementAllAddList()
+        })
+        uni.$on('refreshChangeData', () => {
+            this.procurementTabChange()
+        })
     },
     onReachBottom() {
-        this.pageInfo.pageNo+=1
-        this.procurementAllList()
+        if (!this.isLastPage) {
+            this.pageInfo.pageNo+=1
+            this.procurementAllList()
+        }
     },
+    
     methods: {
         // tab 切换
         handlerTabs($event) {
@@ -189,13 +214,21 @@ export default {
         },
         // 弹窗确认或取消
         handleClick($event) {
-            this.modal = false
             if ($event.index === 1) {
+                if(this.proDataInfo.isInvolved === 1) {
+                    // 退出参与
+                    this.procurementUpdate(1)
+                } else{
+                    // 删除
+                    this.procurementUpdate(0)
+                }
             }
+            this.modal = false
         },
         hideMobel($event) {},
-        // 组件传递商品详情
+        // 组件传递商品详情 退出
         modelData(proData) {
+            this.contentModalText = '确定退出参与该需求吗？'
             this.modal = true
             this.proDataInfo = proData
         },
@@ -205,19 +238,37 @@ export default {
         },
         // 我要参与
         popupAdd($event) {
-            console.log($event)
+            this.joinData = Object.assign($event, {number: '', price: '', userId: this.userInfo.userId})
             this.popupShow = true
         },
         // 修改
         popupChange($event) {
-            uni.navigateTo({
-                url: '/pages/goods/procurement_info'
-            })
+            this.joinData = $event
+            console.log($event)
+            if(this.joinData.isInvolved === 1) {
+                this.procurementEditData()
+            } else {
+                uni.navigateTo({
+                    url: '/pages/goods/procurementAdd?id='+$event.sid
+                })
+            }
         },
         // 发布
         procurementAdd() {
             uni.navigateTo({
-                url: '/pages/goods/procurementAdd'
+                url: `/pages/goods/procurementAdd?currentTab=${this.currentTab}`
+            })
+        },
+        // 删除
+        proDelete($event) {
+            this.contentModalText = '确定删除该需求吗？'
+            this.modal = true
+            this.proDataInfo = $event
+        },
+        // 详情
+        procureDetail($event) {
+            uni.navigateTo({
+                url: `/pages/goods/procurement_info?id=${$event.sid}&proTabId=${this.currentTab}`
             })
         },
         /**
@@ -228,7 +279,7 @@ export default {
             if (!this.isLastPage) {
                 try {
                     const {data} = await this.ProcurementService.procurementAllList(this.pageInfo)
-                    this.procurementList = [...this.procurementList, ...data.list]
+                    this.procurementList = data.list
                     this.isLastPage = data.isLastPage
                     this.loadding = !data.isLastPage
                     this.pullUpOn = !data.isLastPage
@@ -238,6 +289,23 @@ export default {
                 }
             }
         },
+        // 全部集采
+        async procurementAllAddList() {
+            const form = {
+                pageNo: 1,
+                userId: this.userInfo.userId,
+                pageSize: this.pageInfo.pageNo*this.pageInfo.pageSize
+            }
+            try {
+                const {data} = await this.ProcurementService.procurementAllList(form)
+                this.procurementList = data.list
+                this.isLastPage = data.isLastPage
+                this.loadding = !data.isLastPage
+                this.pullUpOn = !data.isLastPage
+            } catch (error) {
+                console.log(error)
+            }
+        },
         // 我参与的 | 我发起的
         async procurementTabChange() {
             try{
@@ -250,6 +318,70 @@ export default {
                 console.log(error)
             }
         },
+        // 我要参与
+        async procurementParticipate() {
+            if(this.joinData.price === '') {
+                return this.$util.msg('请输入期望单价', 2000)
+            }
+            if(this.joinData.number === '') {
+                return this.$util.msg('请输入期望数量', 2000)
+            }
+            const form = {
+                userId: this.userInfo.userId,
+                productImage: this.joinData.productImage,
+                productName: this.joinData.productName,
+                price: this.joinData.price,
+                number: this.joinData.number
+            }
+            try{
+                const data = await this.ProcurementService.procurementParticipate(form)
+                if (this.joinData.isInvolved === 0) {
+                    this.procurementAllAddList()
+                } else {
+                    this.procurementTabChange()
+                }
+                this.popupShow = false
+                uni.showToast({
+                    title:`${this.joinData.isInvolved === 0 ? '参与' : '修改'}成功`,
+                    icon: 'success'
+                })
+            }catch(error){
+                console.log(error)
+            }
+        },
+        // 删除 退出
+        async procurementUpdate(type) {
+            const form = {
+                id: `${this.proDataInfo.sid}`,
+                userId: this.userInfo.userId,
+                procurementType: type
+            }
+            try{
+                await this.ProcurementService.procurementUpdate(form)
+                this.procurementTabChange()
+                uni.showToast({
+                    title: `${type === 0 ? '删除' : '退出'}成功`,
+                    icon: 'success'
+                })
+            }catch(error){
+                console.log(error)
+            }
+        },
+        // 参与详情
+        async procurementEditData() {
+            const form = {
+                id: `${this.joinData.sid}`,
+                userId: this.userInfo.userId,
+                procurementType: 0
+            }
+            try{
+                const data = await this.ProcurementService.procurementEditData(form)
+                this.joinData = data.data
+                this.popupShow = true
+            }catch(error){
+                console.log(error)
+            }
+        }
     }
 }
 </script>
@@ -258,6 +390,9 @@ export default {
 page {
     background-color: #f7f7f7;
 }
+::v-deep .tui-tabs-view {
+    padding: 0 64rpx !important;
+}
 .proInit {
     background-color: #f7f7f7;
 }

pages/goods/procurementAdd.vue

@@ -4,163 +4,234 @@
             <view class="uni-form-item uni-column">
                 <view class="title">商品图片</view>
                 <view class="uploadComp">
-                    <proUpload @uploadDel='uploadDel' @uploadImg='uploadImg'/>
+                    <proUpload @uploadDel="uploadDel" @uploadImg="uploadImg" :imageData="formData.productImage" />
                 </view>
             </view>
             <view class="uni-form-item uni-column">
-                <view class="title"><span>*</span>商品名称</view>
+                <view class="title">
+                    <span>*</span>
+                    商品名称
+                </view>
                 <view>
-                    <input class="uni-input" focus placeholder="请输入想要采购的商品名称" v-model='formData.productName' />
+                    <input
+                        class="uni-input"
+                        focus
+                        placeholder="请输入想要采购的商品名称"
+                        v-model="formData.productName"
+                    />
                     <!-- <small>请输入商品名称</small> -->
                 </view>
             </view>
             <view class="uni-form-item uni-column">
-                <view class="title"><span>*</span>期望单价</view>
+                <view class="title">
+                    <span>*</span>
+                    期望单价
+                </view>
                 <view>
-                    <input class="uni-input" focus placeholder="请输入您对商品的期望单价" v-model="formData.price" />
+                    <input
+                        class="uni-input"
+                        type="number"
+                        focus
+                        placeholder="请输入您对商品的期望单价"
+                        v-model="formData.price"
+                    />
                 </view>
             </view>
             <view class="uni-form-item uni-column">
-                <view class="title"><span>*</span>采购数量</view>
+                <view class="title">
+                    <span>*</span>
+                    采购数量
+                </view>
                 <view>
-                    <input class="uni-input" focus placeholder="请输入您的采购数量" v-model="formData.number" />
+                    <input
+                        class="uni-input"
+                        type="number"
+                        focus
+                        placeholder="请输入您的采购数量"
+                        v-model="formData.number"
+                    />
                 </view>
             </view>
         </form>
         <view class="release_btn">
-            <proBtn width="600rpx" v-if='isActive' @click="handlerSave" height="90rpx" background='#F3B574' color='#FFFFFF' fontSize='32rpx'>发布</proBtn>
-            <proBtn width="600rpx" height="90rpx" v-else background='#E2E2E2' color='#999999' fontSize='32rpx'>发布</proBtn>
+            <proBtn
+                width="600rpx"
+                v-if="isActive"
+                @click="handlerSave"
+                height="90rpx"
+                background="#F3B574"
+                color="#FFFFFF"
+                fontSize="32rpx"
+            >
+                发布
+            </proBtn>
+            <proBtn width="600rpx" height="90rpx" v-else background="#E2E2E2" color="#999999" fontSize="32rpx">
+                发布
+            </proBtn>
         </view>
     </view>
 </template>
 
 <script>
-    import proBtn from './components/procurement-btn.vue'
-    import proUpload from './components/upload.vue'
-    import {mapState} from 'vuex'
-    export default {
-        components: {
-            proUpload,
-            proBtn
-        },
-        data() {
-            return {
-                // 发布需求
-                formData: {
-                    userId: 0,
-                    productImage: '',
-                    productName: '',
-                    price: '',
-                    number: '',
-                    userName: ''
-                },
-                userInfo: {}, // 用户详情
-                isActive: false
+import proBtn from './components/procurement-btn.vue'
+import proUpload from './components/upload.vue'
+import { mapState } from 'vuex'
+export default {
+    components: {
+        proUpload,
+        proBtn
+    },
+    data() {
+        return {
+            // 发布需求
+            formData: {
+                userId: 0,
+                productImage: '',
+                productName: '',
+                price: '',
+                number: '',
+                userName: ''
+            },
+            userInfo: {}, // 用户详情
+            isActive: false,
+            currentTab: 0, //上一页tab
+            detailData: {
+                id: '',
+                userId: '',
+                procurementType: 1
             }
+        }
+    },
+    watch: {
+        'formData.productName': {
+            handler() {
+                this.activeBtn()
+            },
+            deep: true
         },
-        watch: {
-            'formData.productName': {
-                handler() {
-                    this.activeBtn()
-                },
-                deep: true
+        'formData.price': {
+            handler() {
+                this.activeBtn()
             },
-            'formData.price': {
-                handler() {
-                    this.activeBtn()
-                },
-                deep: true
+            deep: true
+        },
+        'formData.number': {
+            handler() {
+                this.activeBtn()
             },
-            'formData.number': {
-                handler() {
-                    this.activeBtn()
-                },
-                deep: true
+            deep: true
+        }
+    },
+    onLoad(options) {
+        this.userInfo = uni.getStorageSync('userInfo')
+        if (options.id) {
+            this.detailData.id = options.id
+            this.handlerDetail()
+        } else {
+            this.currentTab = Number(options.currentTab)
+        }
+    },
+    mounted() {
+        this.userInfo = uni.getStorageSync('userInfo')
+        this.formData.userId = this.userInfo.userId
+        this.formData.userName = this.userInfo.userName
+    },
+    methods: {
+        // 发布按钮
+        activeBtn() {
+            if (this.formData.productName === '' || this.formData.price === '' || this.formData.number === '') {
+                this.isActive = false
+            } else {
+                this.isActive = true
             }
         },
-        onLoad(options) {
-            if (options.id) {
-                
+        // 图片上传
+        uploadImg(url) {
+            if (url !== '' && url !== null) {
+                this.formData.productImage = url
             }
         },
-        mounted() {
-            this.userInfo = uni.getStorageSync('userInfo')
-            this.formData.userId = this.userInfo.userId
-            this.formData.userName = this.userInfo.name
+        // 图片删除
+        uploadDel(e) {
+            this.formData.productImage = e
         },
-        methods: {
-            // 发布按钮
-            activeBtn() {
-                if (this.formData.productName === '' || this.formData.price === ''|| this.formData.number === '') {
-                    this.isActive = false
-                } else {
-                    this.isActive = true
-                }
-            },
-            // 图片上传
-            uploadImg(url) {
-                if (url !== '' || url !== null) {
-                    this.formData.productImage = url
+        // submit 发布
+        async handlerSave() {
+            console.log(this.formData)
+            if (this.detailData.id) {
+                this.formData.id = this.detailData.id
+            }
+            try {
+                const data = await this.ProcurementService.procurementSave(this.formData)
+                uni.showToast({
+                    title: `${this.detailData.id ? '修改' : '发布'}成功`,
+                    icon: 'success'
+                })
+                console.log(this.currentTab)
+                setTimeout(() => {
+                    uni.navigateBack({
+                        data: 1
+                    })
+                }, 2000)
+                if (this.currentTab === 0) {
+                    uni.$emit('refreshAddData') // 刷新修改的数据
                 }
-            },
-            // 图片删除
-            uploadDel(e) {
-                this.formData.productImage = e
-            },
-            // submit 发布
-            async handlerSave() {
-                console.log(this.formData)
-                try{
-                    const data = await this.ProcurementService.procurementSave(this.formData)
-                    console.log(data)
-                }catch(error){
-                    console.log(error)
+                if (this.currentTab > 0) {
+                    uni.$emit('refreshChangeData')
                 }
-            },
-            // 集采详情
-            async handlerDetail(id) {
-                try{
-                    const data = await this.ProcurementService.procurementSave()
-                }catch(e){
-                    //TODO handle the exception
+                if (this.detailData.id) {
+                    uni.$emit('refreshChangeData') // 刷新修改的数据
                 }
-            },
+            } catch (error) {
+                console.log(error)
+            }
         },
+        // 发布详情
+        async handlerDetail() {
+            this.detailData.userId = this.userInfo.userId
+            try {
+                const data = await this.ProcurementService.procurementEditData(this.detailData)
+                this.formData = data.data
+            } catch (error) {
+                console.log(error)
+            }
+        }
     }
+}
 </script>
 
 <style lang="scss" scoped>
-    .release {
-        padding: 24rpx;
-    }
-    span{
-        color: #F85050;
-        font-size: 28rpx;
-    }
-    .title {
-        font-size: 28rpx;
-        color: #666666;
-        margin-bottom: 24rpx;
-    }
-    .uploadComp {
-        margin-bottom: 40rpx;
-    }
-    .uni-input {
-        height: 90rpx;
-        border: 1px solid #B2B2B2;
-        border-radius: 6rpx 6rpx 6rpx 6rpx;
-        font-size: 28rpx;
-        padding-left: 47rpx;
-        margin-bottom: 40rpx;
-    }
-    .release_btn {
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        margin-bottom: 76rpx;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-    }
-</style>
+.release {
+    padding: 24rpx;
+}
+span {
+    color: #f85050;
+    font-size: 28rpx;
+}
+.title {
+    font-size: 28rpx;
+    color: #666666;
+    margin-bottom: 24rpx;
+}
+.uploadComp {
+    margin-bottom: 40rpx;
+}
+.uni-input {
+    height: 90rpx;
+    border: 1px solid #b2b2b2;
+    border-radius: 6rpx 6rpx 6rpx 6rpx;
+    font-size: 28rpx;
+    padding-left: 47rpx;
+    margin-bottom: 40rpx;
+}
+.release_btn {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    margin-bottom: 76rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+</style>

pages/goods/procurement_info.vue

@@ -1,116 +1,321 @@
 <template>
-   <view style="background-color: #fff;position: relative;">
-       <view class="procure_info">
-           <view class="info_card">
-               <view class="card_title">
-                   采购商品
-               </view>
-               <view class="card_line"></view>
-               <view class="card_store">
-                   <image class="img" src="" mode="aspectFill"></image>
-                   <view class="store_title">
-                      韩国恩盛进口氢洁气小气泡清韩进口氢洁气小气泡清...
-                   </view>
-               </view>
-               <view class="back-filter"></view>
-           </view>
-           <view class="info_Initiator">
-               <view class="card_title">
-                   发起者需求
-               </view>
-               <view class="card_line"></view>
-               <view class="Initiator_contant">
-                   <view class="Initiator_name">
-                       <view class="Initiator_icon">
-                           发起者
-                       </view>
-                       <view class="user">
-                           科医人医疗激光设备贸易公司
-                       </view>
-                   </view>
-                   <view class="Initiator_price">
-                       <view class="unit_price">
-                           <view class="title">
-                               期望单价：
-                           </view>
-                           <view class="price">
-                               ￥500.00
-                           </view>
-                       </view>
-                       <view class="unit_sum">
-                           <view class="title">
-                               采购数量：
-                           </view>
-                           <view class="price">
-                               50
-                           </view>
-                       </view>
-                   </view>
-               </view>
-               <view class="status">
-<!--                   <image style="width: 100%;height: 100%;" src="@/static/procurement/success.png" mode="aspectFill"></image> -->
-                    <image style="width: 100%;height: 100%;" src="@/static/procurement/delete.png" mode="aspectFill"></image>
-               </view>
-               <view class="back-filter"></view>
-           </view>
-           <view class="info_Participant">
-               <view class="card_title">
-                   参与者需求（3）
-               </view>
-               <view class="card_line"></view>
-               <view class="Initiator_contant" v-for="(item, index) in 3" :key="item" :style="{margin: index!== 0 ? '24rpx 8rpx 16rpx 8rpx' : '40rpx 8rpx 16rpx 8rpx'}">
-                   <view class="Initiator_name">
-                       <view class="Initiator_icon">
-                           参与者
-                       </view>
-                       <view class="user">
-                           科医人医疗激光设备贸易公司
-                       </view>
-                   </view>
-                   <view class="Initiator_price">
-                       <view class="unit_price">
-                           <view class="title">
-                               期望单价：
-                           </view>
-                           <view class="price">
-                               ￥500.00
-                           </view>
-                       </view>
-                       <view class="unit_sum">
-                           <view class="title">
-                               采购数量：
-                           </view>
-                           <view class="price">
-                               50
-                           </view>
-                       </view>
-                   </view>
-               </view>
-               <view class="empty" v-if='false'>
-                   暂无参与者~
-               </view>
-               <view class="back-filter"></view>
-           </view>
-       </view>
-       <view class="info_btn">
-           <proBtn>删除</proBtn>
-           <proBtn color='#FFFFFF' background='#F3B574'>修改</proBtn>
-       </view>
-   </view>
+    <view style="background-color: #fff;position: relative;">
+        <tui-skeleton
+            v-if="skeletonShow"
+            backgroundColor="#fafafa"
+            borderRadius="10rpx"
+            :isLoading="true"
+            :loadingType="5"
+        ></tui-skeleton>
+        <view class="procure_info" v-else>
+            <view class="info_card">
+                <view class="card_title">采购商品</view>
+                <view class="card_line"></view>
+                <view class="card_store">
+                    <image class="img" :src="procurement.productImage" mode="aspectFill"></image>
+                    <view class="store_title">{{procurement.productName}}</view>
+                </view>
+                <view class="back-filter" v-if="procurementStatus('isDelFlag')"></view>
+            </view>
+            <view class="info_Initiator">
+                <view class="card_title">发起者需求</view>
+                <view class="card_line"></view>
+                <view class="Initiator_contant">
+                    <view class="Initiator_name">
+                        <view class="Initiator_icon">发起者</view>
+                        <view class="user">{{procurement.userName}}</view>
+                    </view>
+                    <view class="Initiator_price">
+                        <view class="unit_price">
+                            <view class="title">期望单价：</view>
+                            <view class="price">￥{{procurement.price}}</view>
+                        </view>
+                        <view class="unit_sum">
+                            <view class="title">采购数量：</view>
+                            <view class="price">{{procurement.number}}</view>
+                        </view>
+                    </view>
+                </view>
+                <view class="status">
+                    <image
+                        style="width: 100%;height: 100%;"
+                        src="@/static/procurement/success.png"
+                        mode="aspectFill"
+                        v-if="procurementStatus('isAchieve')"
+                    ></image>
+                    <image
+                        style="width: 100%;height: 100%;"
+                        src="@/static/procurement/delete.png"
+                        mode="aspectFill"
+                        v-if="procurementStatus('isDelFlag')"
+                    ></image>
+                </view>
+                <view class="back-filter" v-if="procurementStatus('isDelFlag')"></view>
+            </view>
+            <view class="info_Participant">
+                <view class="card_title">参与者需求（{{ procurementList.length }}）</view>
+                <view class="card_line"></view>
+                <view v-if="procurementList.length !== 0">
+                    <view
+                        class="Initiator_contant"
+                        v-for="(item, index) in 3"
+                        :key="item"
+                        :style="{ margin: index !== 0 ? '24rpx 8rpx 16rpx 8rpx' : '40rpx 8rpx 16rpx 8rpx' }"
+                    >
+                        <view class="Initiator_name">
+                            <view class="Initiator_icon">参与者</view>
+                            <view class="user">{{item.userName}}</view>
+                        </view>
+                        <view class="Initiator_price">
+                            <view class="unit_price">
+                                <view class="title">期望单价：</view>
+                                <view class="price">￥{{procurement.price}}</view>
+                            </view>
+                            <view class="unit_sum">
+                                <view class="title">采购数量：</view>
+                                <view class="price">{{procurement.number}}</view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="empty" v-else>暂无参与者~</view>
+                <view class="back-filter" v-if="procurementStatus('isDelFlag')"></view>
+            </view>
+        </view>
+        <view v-if="!procurementStatus('isDelFlag') && !procurementStatus('isAchieve')">
+            <view class="info_btn" v-if="!procurementStatus('isInvolved') && !procurementStatus('isAdd')">
+                <proBtn color="#FFFFFF" background="#F3B574" width="640rpx" @click="popupAdd">我要参与</proBtn>
+            </view>
+            <view class="info_btn" v-else>
+                <proBtn @click="procurementDelete" v-if="procurementStatus('isInvolved')">删除</proBtn>
+                <proBtn @click="modelData" v-else>退出</proBtn>
+                <proBtn color="#FFFFFF" background="#F3B574" @click="procurementChange(procurementStatus('isInvolved'))">修改</proBtn>
+            </view>
+        </view>
+        <tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="handlerPopupClose">
+            <view class="popup_content">
+                <view class="pro_popup_title">参与需求</view>
+                <view class="popup_form">
+                    <view class="popup_form_item">商品图片：</view>
+                    <view class="popup_img">
+                        <image style="width: 100%;height: 100%;" :src="joinData.productImage" mode="aspectFill"></image>
+                    </view>
+                </view>
+                <view class="popup_form">
+                    <view class="popup_form_item">商品名称：</view>
+                    <view class="popup_form_name">{{ joinData.productName }}</view>
+                </view>
+                <form>
+                    <view class="uni-form-item uni-column">
+                        <view class="title">
+                            <text style="font-size: 26rpx;color: #F85050;">*</text>
+                            期望单价：
+                        </view>
+                        <view style="position: relative;">
+                            <view class="input_icon">￥</view>
+                            <input class="uni-input" type="number" focus v-model="joinData.price" />
+                        </view>
+                    </view>
+                    <view class="uni-form-item uni-column">
+                        <view class="title">
+                            <text style="font-size: 26rpx;color: #F85050;">*</text>
+                            采购数量：
+                        </view>
+                        <view style="position: relative;">
+                            <input class="uni-input" type="number" focus v-model="joinData.number" />
+                        </view>
+                    </view>
+                    <view class="submit_btn">
+                        <button class="popup_btn cancel" @click="handlerPopupClose">取消</button>
+                        <button class="popup_btn submit" @click="procurementParticipate">确定</button>
+                    </view>
+                </form>
+            </view>
+        </tui-bottom-popup>
+        <!-- 弹窗提示 -->
+        <tui-modal
+            :show="modal"
+            @click="handleClick"
+            @cancel="hideMobel"
+            :content="contentModalText"
+            :button="modalButton"
+            color="#333"
+            :size="32"
+            shape="circle"
+            :maskClosable="false"
+        ></tui-modal>
+    </view>
 </template>
 
 <script>
-    import proBtn from './components/procurement-btn.vue'
-    export default {
-        components: {
-            proBtn,
+import proBtn from './components/procurement-btn.vue'
+export default {
+    components: {
+        proBtn
+    },
+    data() {
+        return {
+            procurementList: [], // 参与者数量
+            procurement: {}, // 发起者需求
+            skeletonShow: true, // loading
+            joinData: {},
+            modal: false,
+            contentModalText: '',
+            // 弹窗配置
+            modalButton: [
+                {
+                    text: '取消',
+                    type: 'gray',
+                    plain: true //是否空心
+                },
+                {
+                    text: '确认',
+                    customStyle: {
+                        color: '#fff',
+                        bgColor: 'linear-gradient(90deg, #F28F31 0%, #F3B574 100%)'
+                    },
+                    plain: false
+                }
+            ],
+            joinData: {}, // 我要参与
+            userInfo: {},
+            popupShow: false, // 底部上移栏
+            proTabId: '', // tab id
+        }
+    },
+    onLoad(options) {
+        this.userInfo = uni.getStorageSync('userInfo')
+        this.procurementDetail(options.id)
+        this.proTabId = options.proTabId
+    },
+    methods: {
+        // 状态
+        procurementStatus(str) {
+            const userIdList = this.procurementList.map(i => i.userId)
+            const form = {
+                isDelFlag: () => this.procurement.delFlag == 1, // 是否删除
+                isAchieve: () => this.procurement.isAchieve == 1, // 是否实现
+                isAllTab: () => this.proTabId === 0, // 是否在全部的tab栏下
+                isSelfParticipationTab: () => this.proTabId > 0, // 是否在已参与tab栏 是否在自已发布的tab中
+                'isInvolved': () => this.procurement.createUserId === this.userInfo.userId, // 是否我创建的
+                'isAdd': () => userIdList.some(i => i === this.userInfo.userId), // 是否参与
+            }
+            return form[str]()
+        },
+        // 删除
+        procurementDelete() {
+            this.contentModalText = '确定删除该需求吗？'
+            this.modal = true
+            this.joinData = $event
+        },
+        handleClick($event) {
+            if ($event.index === 1) {
+                if(this.joinData.isInvolved === 1) {
+                    // 退出参与
+                    this.procurementUpdate(1)
+                } else{
+                    // 删除
+                    this.procurementUpdate(0)
+                }
+            }
+            this.modal = false
+        },
+        hideMobel() {},
+        // 关闭底部
+        handlerPopupClose() {
+            this.popupShow = false
+        },
+        // 我要参与
+        popupAdd() {
+            this.joinData = Object.assign(this.procurement, {number: '', price: '', userId: this.userInfo.userId})
+            this.popupShow = true
+        },
+        // 组件传递商品详情 退出
+        modelData(proData) {
+            this.contentModalText = '确定退出参与该需求吗？'
+            this.modal = true
+            this.proDataInfo = proData
+        },
+        procurementChange(status) {
+            if (status) {
+                uni.navigateTo({
+                    url: '/pages/goods/procurementAdd?id='+this.procurement.sid
+                })
+            } else {
+                this.procurementEditData()
+            }
+        },
+        // 详情
+        async procurementDetail(id) {
+            try {
+                const { data } = await this.ProcurementService.procurementDetail({ id: id })
+                this.procurement = data.procurement
+                this.procurementList = data.procurementList
+                this.skeletonShow = false
+            } catch (error) {
+                console.log(error)
+            }
         },
-        data() {
-            return {
-                
+        // 删除 退出
+        async procurementUpdate(type) {
+            const form = {
+                id: `${this.joinData.id}`,
+                userId: this.userInfo.userId,
+                procurementType: type
+            }
+            try{
+                await this.ProcurementService.procurementUpdate(form)
+                this.procurementTabChange()
+                uni.showToast({
+                    title: `${type === 0 ? '删除' : '退出'}成功`,
+                    icon: 'success'
+                })
+            }catch(error){
+                console.log(error)
+            }
+        },
+        // 我要参与
+        async procurementParticipate() {
+            if(this.joinData.price === '') {
+                return this.$util.msg('请输入期望单价', 2000)
+            }
+            if(this.joinData.number === '') {
+                return this.$util.msg('请输入期望数量', 2000)
+            }
+            const form = {
+                userId: this.userInfo.userId,
+                productImage: this.joinData.productImage,
+                productName: this.joinData.productName,
+                price: this.joinData.price,
+                number: this.joinData.number
+            }
+            try{
+                const data = await this.ProcurementService.procurementParticipate(form)
+                uni.showToast({
+                    title:`${this.procurement.isInvolved === 0 ? '参与' : '修改'}成功`,
+                    icon: 'success'
+                })
+            }catch(error){
+                console.log(error)
+            }
+        },
+        // 参与详情
+        async procurementEditData() {
+            const form = {
+                id: `${this.joinData.sid}`,
+                userId: this.userInfo.userId,
+                procurementType: 0
+            }
+            try{
+                const data = await this.ProcurementService.procurementEditData(form)
+                this.joinData = data.data
+                this.popupShow = true
+            }catch(error){
+                console.log(error)
             }
         }
     }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -121,7 +326,7 @@
     margin-right: 24rpx;
 }
 .procure_info {
-    background-color: #F7F7F7;
+    background-color: #f7f7f7;
     padding: 24rpx;
 }
 .procure_info .info_card {
@@ -138,13 +343,13 @@
     font-weight: bold;
 }
 .card_line {
-    border: 1rpx solid #E1E1E1;
+    border: 1rpx solid #e1e1e1;
     margin-top: 24rpx;
 }
 .info_card .card_store {
     margin: 40rpx 8px;
     padding: 12rpx;
-    background-color: #F7F7F7;
+    background-color: #f7f7f7;
     display: flex;
     align-items: center;
     border-radius: 8rpx 8rpx 8rpx 8rpx;
@@ -165,7 +370,7 @@
 }
 .Initiator_contant {
     height: 220rpx;
-    background-color: #F7F7F7;
+    background-color: #f7f7f7;
     margin: 40rpx 8rpx 16rpx 8rpx;
     border-radius: 8rpx 8rpx 8rpx 8rpx;
     padding: 40rpx 24rpx;
@@ -182,11 +387,11 @@
     font-size: 24rpx;
     text-align: center;
     color: #fff;
-    background-color: #F3B574;
+    background-color: #f3b574;
     border-radius: 8rpx;
     margin-right: 24rpx;
 }
-.Initiator_name .user{
+.Initiator_name .user {
     color: #333333;
     font-size: 32rpx;
     font-weight: bold;
@@ -197,7 +402,7 @@
     align-items: center;
 }
 .Initiator_price .unit_price,
-.Initiator_price .unit_sum{
+.Initiator_price .unit_sum {
     display: flex;
     align-items: center;
 }
@@ -226,7 +431,7 @@
     justify-content: center;
     align-items: center;
     font-size: 26rpx;
-    color: #B2B2B2;
+    color: #b2b2b2;
 }
 .info_btn {
     position: fixed;

services/config.env.js

@@ -3,7 +3,8 @@ if(process.env.NODE_ENV === 'development'){
     // 开发环境
     // URL_CONFIG = 'http://192.168.2.67:18002'	 //智捷联调地址
     // URL_CONFIG = 'http://192.168.2.68:18002'	 //涛涛联调地址
-    URL_CONFIG = 'http://192.168.2.102:18002' //志国联调地址
+    // URL_CONFIG = 'http://192.168.2.102:18002' //志国联调地址
+    URL_CONFIG = 'http://192.168.2.103:18002' // 陈凯联调
     // URL_CONFIG = 'https://core-b.caimei365.com'
     // URL_CONFIG = 'https://core.caimei365.com'  
 }else{

services/procurement.service.js

@@ -23,7 +23,7 @@ export default class ProcurementService {
      * @param {number} id 集采id
      */
     procurementDetail(data={}) {
-        return this.AjaxService.post({
+        return this.AjaxService.get({
             url: '/commodity/procurement/detail',
             data,
             isLoading: false,
@@ -38,7 +38,7 @@ export default class ProcurementService {
         return this.AjaxService.get({
             url: '/commodity/procurement/procurement',
             data,
-            isLoading: false,
+            isLoading: true,
         })
     }
     
@@ -56,7 +56,7 @@ export default class ProcurementService {
         return this.AjaxService.post({
             url: '/commodity/procurement/saveProcurement',
             data,
-            isLoading: false,
+            isLoading: true,
         })
     }
     /**
@@ -71,7 +71,7 @@ export default class ProcurementService {
         return this.AjaxService.post({
             url: '/commodity/procurement/pateProcurement',
             data,
-            isLoading: false,
+            isLoading: true,
         })
     }
     /**
@@ -84,7 +84,20 @@ export default class ProcurementService {
         return this.AjaxService.get({
             url: '/commodity/procurement/updateProcurement',
             data,
-            isLoading: false,
+            isLoading: true,
+        })
+    }
+    /**
+     * 修改集采信息回显
+     * @param id 集采id
+     * @param {number} userId 用户id
+     * @param {number} procurementType = [0, 1] 0 我参与的 1 我发起的
+     */
+    procurementEditData(data={}) {
+        return this.AjaxService.get({
+            url: '/commodity/procurement/editData',
+            data,
+            isLoading: true,
         })
     }
 }