From f09c736d261e1ad41d97b6e974a81bb014ef1265 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 23 十月 2025 17:45:50 +0800
Subject: [PATCH] 页面调整
---
seller/src/views/activity/store-prize-proof.vue | 330 +++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 236 insertions(+), 94 deletions(-)
diff --git a/seller/src/views/activity/store-prize-proof.vue b/seller/src/views/activity/store-prize-proof.vue
index 9dfd315..1769d56 100644
--- a/seller/src/views/activity/store-prize-proof.vue
+++ b/seller/src/views/activity/store-prize-proof.vue
@@ -8,57 +8,6 @@
:label-width="75"
class="search-form mb_10"
>
- <Form-item label="浼樻儬鍒稿悕绉�" prop="couponName">
- <Input
- type="text"
- v-model="searchForm.couponName"
- placeholder="璇疯緭鍏ヤ紭鎯犲埜鍚嶇О"
- clearable
- style="width: 200px"
- />
- </Form-item>
- <Form-item label="浼氬憳鍚嶇О" prop="memberName">
- <Input
- type="text"
- v-model="searchForm.memberName"
- placeholder="璇疯緭鍏ヤ細鍛樺悕绉�"
- clearable
- style="width: 200px"
- />
- </Form-item>
- <Form-item label="鑾峰彇鏂瑰紡" prop="getType">
- <Select
- v-model="searchForm.getType"
- placeholder="璇烽�夋嫨"
- clearable
- style="width: 200px"
- >
- <Option value="FREE">鍏嶈垂鑾峰彇</Option>
- <Option value="ACTIVITY">娲诲姩鑾峰彇</Option>
- </Select>
- </Form-item>
- <Form-item label="浼樻儬鍒哥姸鎬�" prop="memberCouponStatus">
- <Select
- v-model="searchForm.memberCouponStatus"
- placeholder="璇烽�夋嫨"
- clearable
- style="width: 200px"
- >
- <Option value="NEW">宸查鍙�</Option>
- <Option value="USED">宸蹭娇鐢�</Option>
- <Option value="EXPIRE">宸茶繃鏈�</Option>
- <Option value="CLOSED">宸蹭綔搴�</Option>
- </Select>
- </Form-item>
- <Form-item label="娲诲姩鏃堕棿">
- <DatePicker
- v-model="selectDate"
- type="daterange"
- clearable
- placeholder="閫夋嫨璧峰鏃堕棿"
- style="width: 200px"
- ></DatePicker>
- </Form-item>
<Button
@click="handleSearch"
type="primary"
@@ -66,12 +15,6 @@
class="search-btn"
>鎼滅储</Button
>
- <Button
- @click="queryExportCoupon"
- type="primary"
- class="search-btn">
- 瀵煎嚭棰嗗彇璁板綍
- </Button>
</Form>
<Table
v-if="refreshTable"
@@ -81,8 +24,21 @@
:data="data"
ref="table"
class="mt_10"
- @on-selection-change="changeSelect"
>
+ <template slot-scope="{ row }" slot="action">
+ <Button
+ @click="supplementaryMaterials(row)"
+ type="primary"
+ class="add-btn"
+ v-if="row.material === 'NOT_GENERATE' && row.claimStatus ==='CLAIM'"
+ >琛ュ厖鏉愭枡</Button>
+ <Button
+ style="margin-left: 10px"
+ @click="generalQrCode(row)"
+ type="primary"
+ class="add-btn"
+ >鏌ョ湅浜岀淮鐮�</Button>
+ </template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
@@ -99,53 +55,227 @@
></Page>
</Row>
</Card>
+
+ <Modal
+ title="琛ュ厖鏉愭枡"
+ v-model="showModal"
+ width="1200"
+ :mask-closable="false"
+ @on-cancel="handleCancel">
+
+
+ <Upload
+ v-if="!tempUrl"
+ :before-upload="(file) => handleBeforeUpload(file)"
+ :format="['jpg','jpeg','png','gif']"
+ :max-size="20480"
+ action=""
+ accept="image/*"
+ >
+ <Button icon="ios-cloud-upload-outline" >涓婁紶鍥剧墖</Button>
+ </Upload>
+ <div v-if="tempUrl" class="upload-file-info">
+ <img :src="tempUrl" alt="鍥剧墖" class="preview-image-limit">
+ <Button type="text" @click="handleRemove('content')">鍒犻櫎</Button>
+ </div>
+
+ <Input
+ v-model="form.content"
+ style="width: 300px"
+ :rows="4"
+ type="textarea"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ />
+ <div slot="footer">
+ <Button @click="handleCancel">鍙栨秷</Button>
+ <Button type="primary" :loading="submitLoading" @click="save">鎻愪氦</Button>
+ </div>
+ </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>
+ </div>
+ </Modal>
+
</div>
</template>
<script>
-import { getPage } from "@/api/prize-store.js"
+import vueQr from "vue-qr";
+import { uploadFileByLmk, delByKey } from "@/api/common.js"
+import { getPage,add } from "@/api/prize-store.js"
export default {
+ components:{
+ "vue-qr": vueQr,
+ },
name: "store-prize-proof",
data() {
return {
+ QRCodeUrl:"",
+ showGeneralQrCode:false,
+ codeLoading:false,
+ submitLoading:false,
+ file: null,
+ tempUrl:null,
+ showModal:false,
loading: true, // 琛ㄥ崟鍔犺浇鐘舵��
+ form:{
+ storePrizeClaimId:null,
+ urlPath:null,
+ content:""
+ },
searchForm: {
// 鎼滅储妗嗗垵濮嬪寲瀵硅薄
pageNumber: 1, // 褰撳墠椤垫暟
pageSize: 10, // 椤甸潰澶у皬
},
- selectList: [], // 澶氶�夋暟鎹�
- selectCount: 0, // 澶氶�夎鏁�
columns: [
- // 琛ㄥご
{
- title: "浼氬憳鍚嶇О",
- key: "memberName",
- minWidth: 130,
- fixed: "left",
+ title: "娲诲姩鍚�",
+ key: "prizeActivityName",
+ align: "center",
+ tooltip: true
},
{
- title: "浼樻儬鍒稿悕绉�",
- key: "couponName",
- minWidth: 100,
+ title: "缂栧彿",
+ key: "no",
+ align: "center",
+ tooltip: true
+ },
+ {
+ title: "鏉愭枡琛ュ厖鐘舵��",
+ key: "material",
+ align: "center",
tooltip: true,
+ render: (h, params) => {
+ const status = params.row.material;
+ const color = status === 'GENERATE' ? 'success' : status === 'NOT_GENERATE' ? 'default' : 'warning';
+ const text = status === 'GENERATE' ? '宸茶ˉ鍏�' : status === 'NOT_GENERATE' ? '鏈ˉ鍏�' : '鏈煡';
+
+ return h('Tag', {
+ props: {
+ color: color
+ }
+ }, text);
+ }
+ },
+
+ {
+ title: "棰嗗彇鐘舵��",
+ key: "claimStatus",
+ align: "center",
+ tooltip: true,
+ render: (h, params) => {
+ const status = params.row.claimStatus;
+ const color = status === 'CLAIM' ? 'success' : status === 'NOT_CLAIM' ? 'default' : 'warning';
+ const text = status === 'CLAIM' ? '宸查鍙�' : status === 'NOT_CLAIM' ? '鏈鍙�' : '鏈煡';
+
+ return h('Tag', {
+ props: {
+ color: color
+ }
+ }, text);
+ }
},
{
- title: "鍙戝竷搴楅摵",
- key: "storeName",
- minWidth: 100,
- render: (h, params) => {
- return h("div", (params.row.storeName === 'platform' && "骞冲彴") || params.row.storeName);
- },
- },
+ title: "鎿嶄綔",
+ slot: "action",
+ align: "center",
+ fixed: "right"
+ }
],
data: [], // 琛ㄥ崟鏁版嵁
total: 0, // 琛ㄥ崟鏁版嵁鎬绘暟
refreshTable: true, // 淇敼閫変腑鐘舵�佸悗鍒锋柊琛ㄦ牸
- selectDate: [], //閫変腑鐨勪俊鎭�
};
},
methods: {
+ closeGeneralQrCode(){
+ this.showGeneralQrCode = false;
+ this.QRCodeUrl = '';
+ },
+ generalQrCode(row){
+ this.QRCodeUrl = '';
+ this.showGeneralQrCode = true
+ this.codeLoading = true;
+ this.QRCodeUrl = this.QRcodeBaseUrl+"/scanpage/prize?id="+ row.id;
+
+ },
+ // 鏂囦欢涓婁紶鍓嶅鐞�
+ handleBeforeUpload(file) {
+ this.file = file;
+ this.tempUrl = URL.createObjectURL(file);
+ return false;
+ },
+ handleRemove(type) {
+ this.file = null;
+ this.tempUrl = null;
+ },
+ async save(){
+ await this.myUploadFileByLmk();
+ let fileState = false;
+ let contentState = false;
+ if (this.form.url_path === '' || this.form.url_path=== null) {
+ fileState= true;
+ }
+ if (this.form.content === '' || this.form.content=== null){
+ contentState = true;
+ }
+ if (fileState && contentState){
+ this.$Message.error("璇烽�夋嫨鍥剧墖鎴栬緭鍏ユ枃鏈唴瀹硅ˉ鍏ㄦ潗鏂欙紒")
+ }
+ this.submitLoading = true
+ add(this.form).then(res =>{
+ this.submitLoading = false
+ if (res.code === 200){
+ this.$Message.success("鎴愬姛")
+ }
+ this.showModal = false;
+ })
+ this.getDataList();
+ },
+ async myUploadFileByLmk(){
+ if (this.file){
+ const formData = new FormData()
+ formData.append('file', this.file)
+ await uploadFileByLmk(formData).then(res => {
+ this.submitLoading = false
+ if (res.code === 200) {
+ this.form.urlPath = res.data.fileKey;
+ }else{
+
+ }
+ }).catch(() => {
+ this.submitLoading = false
+ })
+ }
+ },
+
+ supplementaryMaterials(row){
+ this.form ={
+ storePrizeClaimId:null,
+ urlPath:null,
+ content:""
+ }
+ this.file = null;
+ this.tempUrl = null;
+ this.showModal = true;
+ this.form.storePrizeClaimId = row.id;
+ },
// 鍒濆鍖栨暟鎹�
init() {
this.getDataList();
@@ -167,30 +297,18 @@
this.searchForm.pageSize = 10;
this.getDataList();
},
- /**
- * 閫夋嫨浼樻儬鍒�
- */
- changeSelect(e) {
- this.selectList = e;
- this.selectCount = e.length;
- if (this.getType === "ACTIVITY") this.check();
+ handleCancel(){
+ this.showModal =false;
},
+
getDataList() {
// 鑾峰彇鏁版嵁
this.loading = true;
- if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
- this.searchForm.startTime = this.selectDate[0].getTime();
- this.searchForm.endTime = this.selectDate[1].getTime();
- } else {
- this.searchForm.startTime = null;
- this.searchForm.endTime = null;
- }
getPage(this.searchForm).then((res) => {
this.loading = false;
if (res.code === 200) {
- console.log(res);
- this.data = res.data.records;
- this.total = res.data.total;
+ this.data = res.data;
+ this.total = res.total;
}
});
this.total = this.data.length;
@@ -202,3 +320,27 @@
},
};
</script>
+<style lang="scss" scoped>
+.preview-image{
+ width: 200px;
+ height: auto;
+ object-fit: contain
+}
+.preview-image {
+ max-width: 100%;
+ max-height: 70vh;
+ object-fit: contain;
+ border-radius: 4px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ display: block;
+ margin: 0 auto;
+}
+.preview-image-limit{
+ max-width: 100%;
+ max-height: 200px;
+ object-fit: contain;
+ border-radius: 4px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ display: block;
+}
+</style>
--
Gitblit v1.8.0