From c29c852bfe5541106461e0b6a05383f679602dfa Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 23 十月 2025 16:16:19 +0800
Subject: [PATCH] 页面调整
---
manager/src/views/order/order/orderList.vue | 346 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 335 insertions(+), 11 deletions(-)
diff --git a/manager/src/views/order/order/orderList.vue b/manager/src/views/order/order/orderList.vue
index 7b793fd..42256b7 100644
--- a/manager/src/views/order/order/orderList.vue
+++ b/manager/src/views/order/order/orderList.vue
@@ -18,16 +18,43 @@
style="width: 160px"
/>
</Form-item>
- <Form-item label="浼氬憳鍚嶇О" prop="buyerName">
+ <Form-item label="浼氬憳id" prop="memberId">
<Input
type="text"
- v-model="searchForm.buyerName"
- placeholder="璇疯緭鍏ヤ細鍛樺悕绉�"
+ v-model="searchForm.memberId"
+ placeholder="璇疯緭鍏ヤ細鍛榠d"
clearable
style="width: 160px"
/>
</Form-item>
-
+<!-- <Form-item label="浼氬憳鍚嶇О" prop="buyerName">-->
+<!-- <Input-->
+<!-- type="text"-->
+<!-- v-model="searchForm.buyerName"-->
+<!-- placeholder="璇疯緭鍏ヤ細鍛樺悕绉�"-->
+<!-- clearable-->
+<!-- style="width: 160px"-->
+<!-- />-->
+<!-- </Form-item>-->
+ <Form-item label="浼氬憳鏄电О" prop="nickName">
+ <Input
+ type="text"
+ v-model="searchForm.nickName"
+ placeholder="璇疯緭鍏ヤ細鍛樻樀绉�"
+ clearable
+ style="width: 160px"
+ />
+ </Form-item>
+ <Form-item label="瀹氬埗鍟嗗搧" prop="customizeFlag">
+ <Select
+ v-model="searchForm.customizeFlag"
+ placeholder="璇烽�夋嫨"
+ clearable
+ style="width: 160px"
+ >
+ <Option value="CUSTOMIZE">瀹氬埗鍟嗗搧</Option>
+ </Select>
+ </Form-item>
<Form-item label="璁㈠崟绫诲瀷" prop="orderType">
<Select
v-model="searchForm.orderPromotionType"
@@ -42,11 +69,29 @@
<Option value="KANJIA">鐮嶄环璁㈠崟</Option>
</Select>
</Form-item>
+ <Form-item label="搴楅摵" prop="store">
+ <Select
+ v-model="searchForm.storeSelectId"
+ placeholder="璇烽�夋嫨"
+ clearable
+ style="width: 160px"
+ filterable
+ >
+ <Option
+ v-for="store in storeSelectList"
+ :key="store.id"
+ :label="store.label"
+ :value="store.id"
+ >
+ {{ store.label }}
+ </Option>
+ </Select>
+ </Form-item>
<Form-item label="涓嬪崟鏃堕棿">
<DatePicker
v-model="selectDate"
type="datetimerange"
- format="yyyy-MM-dd"
+ format="yyyy-MM-dd HH:mm:ss"
clearable
@on-change="selectDateRange"
placeholder="閫夋嫨璧峰鏃堕棿"
@@ -102,7 +147,7 @@
</div>
</template>
<template slot="nickName" slot-scope="{ row }">
- <div style="width: 100%" @click="handleNickNameClick(row)">
+ <div style="width: 100%;height:20px;min-width: 50px" @click="handleNickNameClick(row)">
<span >{{row.nickName}}</span>
</div>
@@ -124,20 +169,117 @@
show-sizer
></Page>
</Row>
+
+ <!-- 淇敼妯℃�佹 -->
+ <Modal v-model="descFlag" width="500">
+
+ <!-- 鑷畾涔夋爣棰樻彃妲� -->
+ <div slot="header" :style="{ color: titleColor, fontSize: '16px', fontWeight: 'bold' }">
+ {{ descTitle }}
+ </div>
+ <Form ref="form" :model="form" :rules="ruleValidate" :label-width="80">
+
+ <Input v-model="form.id" v-show="false" />
+
+ <FormItem label="澶村儚">
+ <img :src="form.face || defaultPic" class="face" />
+ <Button type="text" class="upload" @click="() => {
+ this.picModelFlag = true;
+ this.$refs.ossManage.selectImage = true;
+ }">淇敼</Button>
+ <input type="file" style="display: none" id="file" />
+ </FormItem>
+ <FormItem label="鐢ㄦ埛鍚�" prop="name">
+ <Input v-model="form.username" style="width: 200px" disabled />
+ </FormItem>
+ <FormItem label="鐢ㄦ埛鏄电О" prop="name">
+ <Input v-model="form.nickName" style="width: 200px" />
+ </FormItem>
+ <FormItem label="鏍囩" prop="tags">
+ <Select v-model="selectTagIds" multiple filterable :loading="selectLoading" style="width:200px;">
+ <Option v-for="item in options" :key="item.id" :label="item.tagName" :value="item.id"></Option>
+ </Select>
+ </FormItem>
+ <FormItem label="鎬у埆" prop="sex">
+ <RadioGroup type="button" button-style="solid" v-model="form.sex">
+ <Radio :label="1">
+ <span>鐢�</span>
+ </Radio>
+ <Radio :label="0">
+ <span>濂�</span>
+ </Radio>
+ </RadioGroup>
+ </FormItem>
+ <!-- <FormItem label="淇敼瀵嗙爜" prop="password">-->
+ <!-- <Input type="password" style="width: 220px" password v-model="form.newPassword" />-->
+ <!-- </FormItem>-->
+ <FormItem label="鐢熸棩" prop="birthday">
+ <DatePicker type="date" format="yyyy-MM-dd" v-model="form.birthday" style="width: 220px"></DatePicker>
+ </FormItem>
+ <FormItem label="鎵�鍦ㄥ湴" prop="mail">
+ {{ form.region || '鏆傛棤鍦板潃' }}
+
+
+ <Button style="margin-left: 10px;" @click="$refs.map.open()">閫夋嫨</Button>
+
+ </FormItem>
+
+ </Form>
+ <div slot="footer">
+ <Button @click="descFlag = false">鍙栨秷</Button>
+ <Button type="primary" @click="handleSubmitModal" :disabled="submitDisabled">
+ 纭畾
+ </Button>
+ </div>
+ </Modal>
+ <Modal width="1200px" v-model="picModelFlag">
+ <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
+ </Modal>
+ <Modal
+ v-model="showGeneralQrCode"
+ title="浜岀淮鐮�"
+ width="800"
+ :mask-closable="false"
+ :loading="codeLoading"
+ >
+ <vue-qr
+ :text="QRCodeUrl"
+ :margin="0"
+ colorDark="#000"
+ colorLight="#fff"
+ :size="150"
+ ></vue-qr>
+ <div slot="footer">
+ <Button type="text" @click="closeGeneralQrCode">鍏抽棴</Button>
+ <!-- <Button type="primary" @click="generalQrCode">纭</Button>-->
+ </div>
+ </Modal>
+ <multipleMap ref="map" @callback="selectedRegion" />
</Card>
</div>
</template>
<script>
+import multipleMap from "@/components/map/multiple-map";
+import ossManage from "@/views/sys/oss-manage/ossManage";
import * as API_Order from "@/api/order";
import JsonExcel from "vue-json-excel";
+import * as API_Member from "@/api/member.js";
+import { getTags } from "@/api/tag.js";
+import vueQr from "vue-qr";
+import {getStoreSelect} from "../../../api/order";
export default {
name: "orderList",
components: {
"download-excel": JsonExcel,
+ ossManage,
+ multipleMap,
+ "vue-qr": vueQr,
},
data() {
return {
+ //涓嬫媺妗嗘暟鎹�
+ storeSelectList:[],
// 琛ㄦ牸鐨勮〃澶翠互鍙婂唴瀹�
fields: {
璁㈠崟缂栧彿: "sn",
@@ -184,10 +326,17 @@
orderType: "",
orderSn: "",
buyerName: "",
+ nickName:"",
orderStatus: "",
},
selectDate: null,
columns: [
+ {
+ title: "浼氬憳id",
+ key: "memberId",
+ minWidth: 240,
+ tooltip: true
+ },
{
title: "璁㈠崟鍙�",
key: "sn",
@@ -260,7 +409,23 @@
},
},
-
+ {
+ title: "瀹氬埗鍟嗗搧",
+ key: "customizeFlag",
+ minWidth: 120,
+ tooltip: true,
+ render: (h, params) => {
+ if (params.row.customizeFlag == "CUSTOMIZE") {
+ return h("div", [
+ h("tag", { props: { color: "blue" } }, "瀹氬埗鍟嗗搧"),
+ ]);
+ } else {
+ return h("div", [
+ h("tag", { props: { color: "volcano" } }, "鏅�氬晢鍝�"),
+ ]);
+ }
+ },
+ },
{
title: "璁㈠崟鐘舵��",
key: "orderStatus",
@@ -360,6 +525,24 @@
)
);
}
+ // // 鏍规嵁璁㈠崟鐘舵�佷负'PAID'鏃舵樉绀洪澶栨搷浣滄寜閽�
+ // if (params.row.deliverStatus === 'UNDELIVERED') {
+ // buttons.push(
+ // h(
+ // "Button",
+ // {
+ // props: { type: "primary", size: "small" },
+ // style: { marginRight: "5px" },
+ // on: {
+ // click: () => {
+ // this.handlerEditorQrcode(params.row);
+ // },
+ // },
+ // },
+ // "淇敼鍦板潃浜岀淮鐮�"
+ // )
+ // );
+ // }
return h('div', buttons);
},
@@ -381,16 +564,152 @@
{title: '宸插叧闂�', value: 'CANCELLED'},
],
- currentStatus: ''
+ currentStatus: '',
+ descTitle: "", // modal鏍囬
+ descFlag: false, //缂栬緫鏌ョ湅妗�
+ form:{},
+ ruleValidate:{},
+
+ selectTagIds: [],
+ selectTags: [],
+ defaultPic: require('@/assets/default.png'),
+ selectLoading:false,
+ picModelFlag: false, // 閫夋嫨鍥剧墖
+ options: [],
+ titleColor:'#333', // 榛樿鏍囬棰滆壊
+ submitDisabled:false,
+ QRCodeUrl:'',
+ showGeneralQrCode:false,
+ codeLoading:false,
};
},
methods: {
- handleNickNameClick(row){
- this.$options.filters.customRouterPush({ name: "member-detail", query: { id: row.memberId } })
+ getStoreSelect(){
+ API_Order.getStoreSelect().then(res =>{
+ if (res.result){
+ this.storeSelectList = res.result;
+ }
+ })
},
+ closeGeneralQrCode(){
+ this.showGeneralQrCode = false;
+ },
+ // handlerEditorQrcode(row){
+ // this.QRCodeUrl = '';
+ // this.showGeneralQrCode = true
+ // this.codeLoading = true;
+ //
+ // //鑾峰緱鍟嗗搧瀵瑰簲鐨勭涓�涓猻kuid
+ // this.codeLoading = false;
+ // this.QRCodeUrl = this.QRcodeBaseUrl+ '/scanpage/editOrderAddress'+'?orderSn='+row.sn
+ // console.log(this.QRCodeUrl);
+ //
+ // },
+ // 閫変腑鐨勫浘鐗�
+ callbackSelected(val) {
+ console.log(val)
+ this.picModelFlag = false;
+ this.form.face = val.url;
+ },
+ handleNickNameClick(row){
+ this.titleColor = '#333'
+ this.form = {};
+ this.selectTagIds = [];
+ this.selectTags= [];
+ this.descTitle ='';
+ this.descFlag = true;
+ this.getMemberInfo(row.memberId);
+ },
+ /**
+ * 鏌ヨ鏌ョ湅浼氬憳璇︽儏
+ */
+ async getMemberInfo(id) {
+ this.submitDisabled = false;
+ var that = this;
+ await API_Member.getMemberInfoData(id).then((res) => {
+ if (res.result) {
+ debugger
+ that.selectTags = []
+ that.selectTagIds = []
+ res.result.tags.forEach(element => {
+ that.selectTags.push(element.tagName)
+ that.selectTagIds.push(element.tagId)
+ });
+ this.descTitle = res.result.nickName;
+ this.$set(this, "form", res.result);
+ }else{
+ //鏌ヨ鍒扮敤鎴蜂笉瀛樺湪锛屾垨宸插垹闄ゆ儏鍐�
+ this.descTitle = "鐢ㄦ埛宸插垹闄�"
+ this.titleColor ='#ff4d4f';
+ this.submitDisabled = true;
+ }
+ console.log(this.form)
+
+ });
+ },
+ remoteMethod(query) {
+ this.selectLoading = true;
+ var params = {
+ "tagTypeKey": "USER",
+ "pageNumber": 1,
+ "pageSize": 500
+ }
+ getTags(params).then(res => {
+ this.options = res.data;
+ this.selectLoading = false;
+ });
+ },
+ handleSubmitModal(){
+ debugger
+ const { nickName, sex, username, face, newPassword, id, regionId, region } = this.form;
+ let time = new Date(this.form.birthday);
+ let birthday = this.form.birthday === undefined ? '' :
+ time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
+ let submit = {
+ regionId,
+ region,
+ nickName,
+ username,
+ sex,
+ birthday,
+ face,
+ id
+ };
+
+ submit.tags = this.selectTagIds
+ if (newPassword) {
+ submit.password = this.md5(newPassword);
+ }
+ API_Member.updateMember(submit).then((res) => {
+ if (res.result) {
+ this.$Message.success("淇敼鎴愬姛锛�");
+ this.descFlag = false;
+ this.getDataList();
+ }
+ });
+ },
+
+// 閫変腑鐨勫湴鍧�
+ selectedRegion(val) {
+ if (val.type === 'select') {
+ const paths = val.data.map(item => item.name).join(',')
+ const ids = val.data.map(item => item.id).join(',')
+
+ this.$set(this.form, 'region', paths)
+ this.$set(this.form, 'regionId', ids)
+
+ }
+ else {
+ this.$set(this.form, 'region', val.data.addr)
+ this.$set(this.form, 'regionId', val.data.addrId)
+ }
+ },
+
// 鍒濆鍖栨暟鎹�
init() {
this.getDataList();
+ this.remoteMethod("")
+
},
// 鍒嗛〉 鏀瑰彉椤电爜
changePage(v) {
@@ -426,7 +745,6 @@
this.total = res.result.total;
}
});
- this.total = this.data.length;
this.loading = false;
},
// 璺宠浆璇︽儏椤甸潰
@@ -515,6 +833,7 @@
},
mounted() {
this.init();
+ this.getStoreSelect();
},
};
</script>
@@ -544,4 +863,9 @@
background-color: #ffffff;
}
}
+.face {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%; // 鍦嗗舰澶村儚
+}
</style>
--
Gitblit v1.8.0