| | |
| | | <template> |
| | | <GlobalWindow |
| | | :title="title" |
| | | :visible.sync="visible" |
| | | :confirm-working="isWorking" |
| | | @confirm="confirm" |
| | | :title="title" |
| | | width="100%" |
| | | :visible.sync="visible" |
| | | > |
| | | <el-tabs v-model="activeName" @tab-click="handleClick"> |
| | | <el-tab-pane label="订åä¿¡æ¯" name="first"> |
| | | <el-descriptions title="订åä¿¡æ¯" size="medium" direction="horizontal" :column="4"> |
| | | <el-descriptions-item label="订åç¼å·">{{ form.code }}</el-descriptions-item> |
| | | <el-descriptions-item label="订åç¶æ"> |
| | | <span :class="[0,1,2,5].indexOf(form.status) != -1 ? 'underway' : 'complete'"> |
| | | {{ |
| | | form.status==0 ? 'å¾
æ¯ä»' |
| | | : form.status==1 ? 'å¾
åè´§' |
| | | : form.status==2 ? 'å¾
æ¶è´§' |
| | | : form.status==3 ? '交æå®æ' |
| | | : form.status==4 ? 'å·²å
³é' : 'é¨ååè´§' |
| | | }} |
| | | </span> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="ä¸åæ¶é´">{{ form.createDate }}</el-descriptions-item> |
| | | <el-descriptions-item label="æ¯ä»æ¶é´">{{ form.payDate }}</el-descriptions-item> |
| | | <el-descriptions-item label="订åéé¢"> |
| | | <span v-if="isPlatform">ï¿¥</span>{{ form.price }}<span v-if="!isPlatform">åè±</span></el-descriptions-item> |
| | | <el-descriptions-item label="æ¯ä»è®¢åå·">{{ form.payOrderId }}</el-descriptions-item> |
| | | <el-descriptions-item label="宿æ¶é´" :span="2">{{ form.completeDate }}</el-descriptions-item> |
| | | |
| | | <el-descriptions-item label="ç¨æ·å¤æ³¨" :span="4">{{ form.memberInfo }}</el-descriptions-item> |
| | | <el-descriptions-item label="å¹³å°å¤æ³¨" :span="4">{{ form.sysInfo }}</el-descriptions-item> |
| | | |
| | | </el-descriptions> |
| | | <div style="height: 20px;"></div> |
| | | <el-descriptions title="订åä¿¡æ¯" size="medium" direction="horizontal" :column="4"> |
| | | <el-descriptions-item label="æ¶ä»¶å§å">{{ form.linkname }}</el-descriptions-item> |
| | | <el-descriptions-item label="èç³»çµè¯">{{ form.linkphone }}</el-descriptions-item> |
| | | <el-descriptions-item label="æ¶è·å°å">{{ form.linkaddr }}</el-descriptions-item> |
| | | </el-descriptions> |
| | | <div style="height: 20px;"></div> |
| | | <el-descriptions title="ååä¿¡æ¯" size="medium" direction="horizontal" :column="4"> |
| | | |
| | | </el-descriptions> |
| | | <el-table |
| | | :data="list" |
| | | stripe |
| | | border |
| | | > |
| | | <el-table-column prop="name" label="ååID" align="center" min-width="100px"></el-table-column> |
| | | <el-table-column prop="name" label="ååä¿¡æ¯" align="center" min-width="100px"></el-table-column> |
| | | <el-table-column prop="name" label="åç±»" align="center" width="100px"></el-table-column> |
| | | <el-table-column prop="name" label="è§æ ¼" align="center" min-width="100px"></el-table-column> |
| | | <el-table-column prop="name" :label="isPlatform?'ä»·æ ¼(å
)':'ä»·æ ¼(åè±)'" align="center" width="100px"></el-table-column> |
| | | </el-table> |
| | | <div v-if="isPlatform" class="statistics"> |
| | | <div>订åååéé¢ï¼{{ form.price }}å
</div> |
| | | <div>订å伿 éé¢ï¼-{{ form.price }}å
</div> |
| | | <div>宿¶æ¬¾ï¼{{ form.price }}å
</div> |
| | | <div style="display: block"> |
| | | <div class="header"> |
| | | <div class="header-b">订å详æ
</div> |
| | | <div v-if="info.status ==0" class="header-orange">å¾
æ¯ä»</div> |
| | | <div v-if="info.status ==1" class="header-orange">{{info.receiveType==1?'å¾
èªæ':'å¾
åè´§'}}</div> |
| | | <div v-if="info.status ==2" class="header-orange">å¾
æ¶è´§</div> |
| | | <span v-if="info.status ==3" class="header-grey ">交æå®æ</span> |
| | | <div v-if="info.status ==4" class="header-grey">å·²å
³é</div> |
| | | <div v-if="info.status ==6" class="header-grey">已鿬¾</div> |
| | | <div class="header-blue-btn" @click="showChangeRecord">åæ´è®°å½</div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="info-item-a">订åç¼å·ï¼<span>{{info.code}}</span></div> |
| | | <div class="info-item-a">å建æ¶é´ï¼<span>{{info.createDate}}</span></div> |
| | | <div class="info-item-a">æ¯ä»æ¶é´ï¼<span>{{info.payDate }}</span></div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="info-item-a">å®ä»éé¢ï¼<span class="orange">ï¿¥{{(info.price||0).toFixed(2)}}</span></div> |
| | | <div class="info-item-a">æ¯ä»æ¹å¼ï¼<span>{{info.payMethod==0?'微信æ¯ä»':'ç§¯åæµæ£'}}</span></div> |
| | | <div class="info-item-a">åè´§æ¹å¼ï¼<span>{{info.receiveType==1?'é¨åºèªæ':'å¿«éé
é'}}</span> |
| | | </div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="info-item-a" style="flex: 3">å½å±ç»éåï¼<span >{{ info.shopName }}</span></div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="info-item-a" style="flex: 3">夿³¨ï¼<span v-if="info.sysInfo" class="red">{{info.sysInfo}}</span></div> |
| | | </div> |
| | | <div class="info-item"></div> |
| | | <div class="header"> |
| | | <div class="header-b">ä¼åä¿¡æ¯</div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="info-item-a">å§åï¼<span class="el-icon-user">{{info.memberName}}</span></div> |
| | | <div class="info-item-a">ææºå·ï¼<span class="el-icon-phone-outline">{{info.phone}}</span></div> |
| | | <div class="info-item-a">ç¨æ·æµç§°ï¼<span>{{info.nickName }}</span></div> |
| | | </div> |
| | | <div class="info-item"></div> |
| | | <template v-if="info.receiveType!=1"> |
| | | <div class="header"> |
| | | <div class="header-b">å¿«éä¿¡æ¯</div> |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="ç©æµä¿¡æ¯" name="second"> |
| | | <el-descriptions title="å¿«éä¿¡æ¯" size="medium" direction="horizontal" :column="4"> |
| | | <el-descriptions-item label="è¿åå·">{{ form.createDate }}</el-descriptions-item> |
| | | <el-descriptions-item label="ç©æµå
¬å¸" :span="3">{{ form.kdName }}</el-descriptions-item> |
| | | <el-descriptions-item label="æ¶è´§å°å" :span="4">{{ form.linkaddr }}</el-descriptions-item> |
| | | <el-descriptions-item label="åè´§æ¶é´" :span="4">{{ form.kdDate }}</el-descriptions-item> |
| | | </el-descriptions> |
| | | <div class="kd-detail"> |
| | | <div class="kd-status">å·²ç¾æ¶</div> |
| | | <el-timeline> |
| | | <el-timeline-item |
| | | v-for="(item, index) in kdDetail" |
| | | :key="index" |
| | | hide-timestamp |
| | | :class="index==0&&'first'" |
| | | :size="index==0?'large':'normal'" |
| | | :timestamp="item.date" |
| | | > |
| | | <h4>{{ item.date }}</h4> |
| | | <p>{{ item.message }}</p> |
| | | </el-timeline-item> |
| | | </el-timeline> |
| | | <div class="info-item" > |
| | | <div class="info-item-a">æ¶è´§äººï¼<span class="el-icon-user">{{info.linkname}}</span></div> |
| | | <div class="info-item-a">èç³»çµè¯ï¼<span class="el-icon-phone-outline">{{info.linkphone}}</span></div> |
| | | <div class="info-item-a">æå¨ä½ç½®ï¼<span class="el-icon-location-outline">{{info.linkaddr }}</span></div> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <div slot="footer"></div> |
| | | <div class="info-item" > |
| | | <div class="info-item-a">å¿«éå
¬å¸ï¼<span >{{info.kdName}}</span></div> |
| | | <div class="info-item-a">å¿«éåå·ï¼<span >{{info.kdCode}}</span></div> |
| | | <div class="info-item-a" >å货人ï¼<span>{{info.kdUserName }}</span></div> |
| | | </div> |
| | | <div class="info-item" > |
| | | <div class="info-item-a">åè´§æ¶é´ï¼<span >{{info.kdDate }}</span></div> |
| | | <div class="info-item-a" style="flex: 2">å¿«é夿³¨ï¼<span>{{info.kdInfo }}</span></div> |
| | | </div> |
| | | <div class="info-item"></div> |
| | | </template> |
| | | |
| | | </div> |
| | | <template v-slot:footer> |
| | | <el-button @click="visible=false">è¿å</el-button> |
| | | </template> |
| | | <OperaChangeOrderRecordWindow ref="OperaChangeOrderRecordWindow"/> |
| | | <OperaChangeIntegralWindow ref="OperaChangeIntegralWindow" @success="successBiz"/> |
| | | </GlobalWindow> |
| | | </template> |
| | | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import OperaChangeOrderRecordWindow from '@/components/business/OperaChangeOrderRecordWindow' |
| | | import OperaChangeIntegralWindow from '@/components/business/OperaChangeIntegralWindow' |
| | | export default { |
| | | name: 'OperaGoodsOrderDetail', |
| | | name: 'OperaShopGoodsWindow', |
| | | extends: BaseOpera, |
| | | components: { GlobalWindow }, |
| | | components: { GlobalWindow, OperaChangeOrderRecordWindow, OperaChangeIntegralWindow }, |
| | | data () { |
| | | |
| | | return { |
| | | activeName: '0', |
| | | isPlatform: true, |
| | | // è¡¨åæ°æ® |
| | | form: { |
| | | id: '1', |
| | | code: '256302564258', |
| | | payOrderId: '256302564258', |
| | | createDate: '2022-11-01 22:30:43', |
| | | payDate: '2022-11-01 22:30:43', |
| | | soonTime: '2022-11-03 22:30:43', |
| | | completeDate: '2022-11-03 22:30:43', |
| | | imgurl: '', |
| | | goodsName: 'å塿¯', |
| | | attr: 'ç½è²ï¼å
¶å®è§æ ¼å
å®¹ï¼ 10L', |
| | | memberInfo: 'è¿éæ¯ç¨æ·å¤æ³¨', |
| | | sysInfo: 'è¿éæ¯å¹³å°å¤æ³¨', |
| | | linkname: 'ææè±', |
| | | linkphone: '18055151023', |
| | | linkaddr: 'åå·çæé½å¸éçåºï¼éæ³è¡é䏿µ·å½é
社åºè岸è¡98å·æ©é¡ä¸æ5-2-504', |
| | | price: '2333', |
| | | status: 1, |
| | | kdCode: 'SF01021213', |
| | | kdDate: '2022-11-03 23:30:43', |
| | | kdId: 'KD21312', |
| | | kdInfo: 'è¿æ¯åè´§å¤æ³¨', |
| | | kdName: '顺丰快é', |
| | | kdUser: '00190', |
| | | }, |
| | | list: [], |
| | | kdDetail: [ |
| | | { date: '2022-11-03 23:30:43', message: 'å·²åè´§' }, |
| | | { date: '2022-11-03 23:30:43', message: 'å·²åè´§' }, |
| | | { date: '2022-11-03 23:30:43', message: 'å·²åè´§' }, |
| | | { date: '2022-11-03 23:30:43', message: 'å·²åè´§' }, |
| | | { date: '2022-11-03 23:30:43', message: 'å·²åè´§' }, |
| | | ] |
| | | title: '', |
| | | visible: false, |
| | | tabelHeight: null, |
| | | info: {}, |
| | | // æç´¢ |
| | | searchForm: { |
| | | memberId: '', |
| | | userType: 0, |
| | | type: null |
| | | } |
| | | } |
| | | }, |
| | | |
| | | created () { |
| | | this.config({ |
| | | api: '/business/coupon', |
| | | 'field.id': 'id' |
| | | module: 'ç¨æ·ä¿¡æ¯è¡¨', |
| | | api: '/business/goodsorder', |
| | | 'field.id': 'id', |
| | | 'field.main': 'id' |
| | | }) |
| | | }, |
| | | methods: { |
| | | open(title, target, active, isPlatform=true) { |
| | | this.title = title |
| | | this.visible = true |
| | | this.activeName = active |
| | | this.isPlatform = isPlatform |
| | | // æ°å»º |
| | | if (target == null) { |
| | | this.$nextTick(() => { |
| | | this.type = '0' |
| | | this.$refs.form.resetFields() |
| | | this.form[this.configData['field.id']] = null |
| | | }) |
| | | return |
| | | } |
| | | // ç¼è¾ |
| | | this.$nextTick(() => { |
| | | for (const key in this.form) { |
| | | this.form[key] = target[key] |
| | | } |
| | | if (this.form.shopId) { |
| | | this.type = 0 |
| | | this.shops = [{ label: target.shopName, id: this.form.shopId }] |
| | | } else { |
| | | this.type = 1 |
| | | this.orgs = [{ label: target.orgName, id: this.form.orgId }] |
| | | } |
| | | successBiz () { |
| | | this.handlePageChange() |
| | | this.loadInfo() |
| | | this.$emit('success') |
| | | }, |
| | | loadInfo () { |
| | | this.api.detail(this.info.id).then(res => { |
| | | this.info = res || this.info |
| | | }) |
| | | }, |
| | | handleClick() {} |
| | | }, |
| | | showChangeRecord () { |
| | | if (this.info) { |
| | | this.$refs.OperaChangeOrderRecordWindow.open('订ååæ´è®°å½', this.info) |
| | | } |
| | | }, |
| | | changeIntegral () { |
| | | if (this.info) { |
| | | this.$refs.OperaChangeIntegralWindow.open('客æ·ç§¯åè°æ´', this.info, 0) |
| | | } |
| | | }, |
| | | open (title, info) { |
| | | this.title = title |
| | | this.visible = true |
| | | this.info = info || {} |
| | | this.loadInfo() |
| | | }, |
| | | handleClick (val) { |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .underway { |
| | | color: rgb(233, 165, 80) |
| | | <style scoped lang="scss"> |
| | | .table-pagination{ |
| | | position: fixed !important; |
| | | bottom: 50px; |
| | | } |
| | | .complete { |
| | | color: #ccc; |
| | | .header-b{ |
| | | display: inline-block; |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .first { |
| | | ::v-deep .el-timeline-item__node { |
| | | background-color: #fff !important; |
| | | width: 8px !important; |
| | | height: 8px !important; |
| | | transform: translateX(-3px); |
| | | border: #216EEE solid 6px !important; |
| | | } |
| | | .header-blue-btn{ |
| | | display: inline-block; |
| | | font-size: 12px; |
| | | background-color: #216EEE; |
| | | padding: 2px 10px; |
| | | margin-left: 20px; |
| | | color: white; |
| | | cursor: pointer; |
| | | border-radius: 5px ; |
| | | } |
| | | .kd-detail { |
| | | padding: 30px; |
| | | background-color: #f2f2f2; |
| | | .kd-status { |
| | | height: 30px; |
| | | line-height: 30px; |
| | | font-size: 20px; |
| | | font-weight: 500; |
| | | border-bottom: 1px solid #000; |
| | | margin-bottom: 20px; |
| | | } |
| | | .header-grey{ |
| | | display: inline-block; |
| | | font-size: 12px; |
| | | border: 1px solid grey; |
| | | padding: 2px 10px; |
| | | margin-left: 20px; |
| | | color: grey; |
| | | border-radius: 5px ; |
| | | } |
| | | .statistics { |
| | | text-align: right; |
| | | padding: 10px 5px; |
| | | .header-orange{ |
| | | display: inline-block; |
| | | font-size: 12px; |
| | | border: 1px solid orange; |
| | | padding: 2px 10px; |
| | | margin-left: 20px; |
| | | color: orange; |
| | | border-radius: 5px ; |
| | | } |
| | | .header-btn{ |
| | | display: inline-block; |
| | | border: none; |
| | | padding: 2px 10px; |
| | | margin-left: 20px; |
| | | } |
| | | .info-item{ |
| | | display: flex; |
| | | width: 100%; |
| | | margin: 15px; |
| | | } |
| | | .info-item-a{ |
| | | flex: 1; |
| | | font-size: 14px; |
| | | line-height: 24px; |
| | | :last-child { |
| | | color: rgb(232, 60,45); |
| | | } |
| | | |
| | | } |
| | | .info-item-a span{ |
| | | font-weight: 600; |
| | | } |
| | | .info-item-a .btn{ |
| | | font-size: 12px !important; |
| | | cursor: pointer !important; |
| | | } |
| | | </style> |