feat：0820需求
This commit is contained in:
@@ -1,16 +1,18 @@
|
||||
<script>
|
||||
export default {
|
||||
<script>
|
||||
import {
|
||||
resumeKefuRealtime,
|
||||
suspendKefuRealtime,
|
||||
} from "@/uni_modules/hashmall-customer-service/js_sdk/kefu-realtime.js";
|
||||
|
||||
export default {
|
||||
globalData: {
|
||||
launchShown: false, // 内存标记，杀进程就清空
|
||||
},
|
||||
|
||||
onLaunch: function () {
|
||||
console.log("App Launch");
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
uni.setStorageSync("platform", res.platform);
|
||||
}
|
||||
});
|
||||
const res = uni.getSystemInfoSync();
|
||||
uni.setStorageSync("platform", res.platform);
|
||||
// #ifdef APP-PLUS
|
||||
plus.navigator.closeSplashscreen(); // 立即关闭原生闪屏
|
||||
|
||||
@@ -23,8 +25,10 @@ export default {
|
||||
let uuid = plus.device.uuid;
|
||||
// #endif
|
||||
},
|
||||
onShow: function () {
|
||||
console.log("App Show");
|
||||
onShow: function () {
|
||||
console.log("App Show");
|
||||
uni.$emit("kefu-app-show");
|
||||
resumeKefuRealtime();
|
||||
// 隐藏原生tabbar
|
||||
/*#ifdef APP-PLUS*/
|
||||
uni.hideTabBar({
|
||||
@@ -32,10 +36,12 @@ export default {
|
||||
});
|
||||
/*#endif*/
|
||||
},
|
||||
onHide: function () {
|
||||
console.log("App Hide");
|
||||
}
|
||||
};
|
||||
onHide: function () {
|
||||
console.log("App Hide");
|
||||
uni.$emit("kefu-app-hide");
|
||||
suspendKefuRealtime();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
+11
-2
@@ -42,14 +42,23 @@ export function updateGoodsNum(data) {
|
||||
|
||||
|
||||
// 查询结算列表
|
||||
export function getSettleList(data) {
|
||||
export function getSettleList(data) {
|
||||
// return request.post('/common/getSmsCode',qs.stringify(params));
|
||||
return request({
|
||||
url: "/cart/getSettleList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 立即购买预结算（含优惠券可用性和抵扣后金额）
|
||||
export function getDirectSettleList(data) {
|
||||
return request({
|
||||
url: "/cart/getDirectSettleList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 结算下单
|
||||
export function settle(data) {
|
||||
|
||||
+50
-50
@@ -6,38 +6,38 @@ import request from '@/utils/request.js'; // 引入封装的方法
|
||||
export function getUserList(data) {
|
||||
// data.appId = APPID;
|
||||
return request({
|
||||
url: "/common/getSmsCode",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
url: "/common/getSmsCode",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 查询级联地区
|
||||
export function getCascadeRegion(data) {
|
||||
return request({
|
||||
url: "/common/getCascadeRegion",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
url: "/common/getCascadeRegion",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 查询级联类目
|
||||
export function getCascadeCategory(data) {
|
||||
return request({
|
||||
url: "/common/getCascadeCategory",
|
||||
method: "get",
|
||||
data,
|
||||
isShowLoading:false,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 查询级联类目
|
||||
export function getCascadeCategory(data) {
|
||||
return request({
|
||||
url: "/common/getCascadeCategory",
|
||||
method: "get",
|
||||
data,
|
||||
isShowLoading: false,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 查询支持的银行
|
||||
export function getSupportBank(data) {
|
||||
return request({
|
||||
url: "/common/getSupportBank",
|
||||
method: "get",
|
||||
data,
|
||||
url: "/common/getSupportBank",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -46,7 +46,7 @@ export function uploadImage(params) {
|
||||
const formData = new FormData();
|
||||
formData.append("file", params.file);
|
||||
formData.append("type", params.type);
|
||||
return request.post('/common/upload/image',formData);
|
||||
return request.post('/common/upload/image', formData);
|
||||
}
|
||||
|
||||
export const uploadImg = "/common/upload/image";
|
||||
@@ -59,9 +59,9 @@ export const uploadImg = "/common/upload/image";
|
||||
*/
|
||||
export function getSharePoster(data) {
|
||||
return request({
|
||||
url: "/common/getSharePoster",
|
||||
method: "get",
|
||||
data,
|
||||
url: "/common/getSharePoster",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -71,9 +71,9 @@ export function getSharePoster(data) {
|
||||
*/
|
||||
export function generateSharePoster(data) {
|
||||
return request({
|
||||
url: "/common/generateSharePoster",
|
||||
method: "get",
|
||||
data,
|
||||
url: "/common/generateSharePoster",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -83,43 +83,43 @@ export function generateSharePoster(data) {
|
||||
*/
|
||||
export function getCarouselImage(data) {
|
||||
return request({
|
||||
url: "/common/getCarouselImage",
|
||||
method: "get",
|
||||
data,
|
||||
url: "/common/getCarouselImage",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
export function getWithdraw(data) {
|
||||
return request({
|
||||
url: "/withdrawAccount/getWithdrawAccountsList",
|
||||
method: "get",
|
||||
data,
|
||||
url: "/withdrawAccount/getWithdrawAccountsList",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
export function bindWithdraw(data) {
|
||||
return request({
|
||||
url: "/withdrawAccount/bindWithdrawAccount",
|
||||
method: "post",
|
||||
data,
|
||||
cha:1
|
||||
url: "/withdrawAccount/bindWithdrawAccount",
|
||||
method: "post",
|
||||
data,
|
||||
cha: 1
|
||||
});
|
||||
}
|
||||
|
||||
export function unbindWithdraw(data) {
|
||||
return request({
|
||||
url: "/withdrawAccount/unbindWithdrawAccount",
|
||||
method: "get",
|
||||
data,
|
||||
url: "/withdrawAccount/unbindWithdrawAccount",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
export function sendWithdraw(data) {
|
||||
return request({
|
||||
url: "/withdraw/withdraw",
|
||||
method: "post",
|
||||
data,
|
||||
cha:1
|
||||
url: "/withdraw/withdraw",
|
||||
method: "post",
|
||||
data,
|
||||
cha: 1
|
||||
});
|
||||
}
|
||||
|
||||
@@ -129,9 +129,9 @@ export function sendWithdraw(data) {
|
||||
*/
|
||||
export function checkAppVersion(data) {
|
||||
return request({
|
||||
url: "/common/checkAppVersion",
|
||||
method: "post",
|
||||
data,
|
||||
url: "/common/checkAppVersion",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import request from '@/utils/request.js';
|
||||
|
||||
/**
|
||||
* 查询领券中心列表
|
||||
* @param {Object} data { page, pageSize }
|
||||
*/
|
||||
export function getReceiveCenterList(data) {
|
||||
return request({
|
||||
url: "/coupon/getReceiveCenterList",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 领取优惠券
|
||||
* @param {Object} data { templateId }
|
||||
*/
|
||||
export function receiveCoupon(data) {
|
||||
return request({
|
||||
url: "/coupon/receive",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询我的优惠券列表 (分页)
|
||||
* @param {Object} data { status, page, pageSize }
|
||||
* status: 1-待使用，2-已使用，3-已过期，4-已失效；不传为全部
|
||||
*/
|
||||
export function getMyCouponPage(data) {
|
||||
return request({
|
||||
url: "/coupon/getMyCouponPage",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询商品详情优惠券列表
|
||||
* @param {Object} data { goodsId }
|
||||
*/
|
||||
export function getGoodsCouponList(data) {
|
||||
return request({
|
||||
url: "/coupon/getGoodsCouponList",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询优惠券适用商品列表 (分页)
|
||||
* @param {Object} data { templateId, sort, page, pageSize }
|
||||
*/
|
||||
export function getApplicableGoods(data) {
|
||||
return request({
|
||||
url: "/coupon/getApplicableGoods",
|
||||
method: "get",
|
||||
data,
|
||||
});
|
||||
}
|
||||
+162
-145
@@ -1,39 +1,41 @@
|
||||
{
|
||||
"name" : "信任桥",
|
||||
"appid" : "__UNI__4910728",
|
||||
"description" : "信任桥优品是一款集线上商城、线下联盟商家的DAO聚合商城；通过“有趣”“有利”“有希望”的卖货玩法，吸引消费者、推广者、商家、投资人参与生态，共同打造共创共享的全球产业生态。",
|
||||
"versionName" : "1.0.3",
|
||||
"versionCode" : 170,
|
||||
"transformPx" : false,
|
||||
"name": "信任桥",
|
||||
"appid": "__UNI__4910728",
|
||||
"description": "信任桥优品是一款集线上商城、线下联盟商家的DAO聚合商城；通过“有趣”“有利”“有希望”的卖货玩法，吸引消费者、推广者、商家、投资人参与生态，共同打造共创共享的全球产业生态。",
|
||||
"versionName": "1.0.3",
|
||||
"versionCode": 170,
|
||||
"transformPx": false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"name" : "哈希优品",
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"ios" : {
|
||||
"deploymentTarget" : "13.0"
|
||||
"app-plus": {
|
||||
"name": "哈希优品",
|
||||
"usingComponents": true,
|
||||
"nvueStyleCompiler": "uni-app",
|
||||
"compilerVersion": 3,
|
||||
"ios": {
|
||||
"deploymentTarget": "13.0"
|
||||
},
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"delay" : 0,
|
||||
"duration" : 0,
|
||||
"autoclose" : false
|
||||
"splashscreen": {
|
||||
"alwaysShowBeforeRender": true,
|
||||
"waiting": true,
|
||||
"delay": 0,
|
||||
"duration": 0,
|
||||
"autoclose": false
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"Payment" : {},
|
||||
"Camera" : {},
|
||||
"OAuth" : {},
|
||||
"Share" : {}
|
||||
"modules": {
|
||||
"Payment": {},
|
||||
"Camera": {},
|
||||
"OAuth": {},
|
||||
"Share": {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
"distribute": {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"schemes" : [ "trustbridgeapp" ],
|
||||
"permissions" : [
|
||||
"android": {
|
||||
"schemes": [
|
||||
"trustbridgeapp"
|
||||
],
|
||||
"permissions": [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
@@ -49,166 +51,181 @@
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
],
|
||||
"abiFilters" : [ "armeabi-v7a", "arm64-v8a" ],
|
||||
"targetSdkVersion" : 30,
|
||||
"minSdkVersion" : 21
|
||||
"abiFilters": [
|
||||
"armeabi-v7a",
|
||||
"arm64-v8a"
|
||||
],
|
||||
"targetSdkVersion": 30,
|
||||
"minSdkVersion": 21
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {
|
||||
"dSYMs" : false,
|
||||
"idfa" : false,
|
||||
"urltypes" : [
|
||||
"ios": {
|
||||
"dSYMs": false,
|
||||
"idfa": false,
|
||||
"urltypes": [
|
||||
{
|
||||
"urlidentifier" : "com.trustbridgeapp.mm",
|
||||
"urlschemes" : [ "trustbridgeapp" ]
|
||||
"urlidentifier": "com.trustbridgeapp.mm",
|
||||
"urlschemes": [
|
||||
"trustbridgeapp"
|
||||
]
|
||||
}
|
||||
],
|
||||
"associatedDomains" : [ "applinks:ulink.trustbridgeapp.com" ],
|
||||
"capabilities" : {
|
||||
"entitlements" : {
|
||||
"com.apple.developer.associated-domains" : [ "applinks:app.tbmall.xin" ]
|
||||
"associatedDomains": [
|
||||
"applinks:ulink.trustbridgeapp.com"
|
||||
],
|
||||
"capabilities": {
|
||||
"entitlements": {
|
||||
"com.apple.developer.associated-domains": [
|
||||
"applinks:app.tbmall.xin"
|
||||
]
|
||||
}
|
||||
},
|
||||
"privacyDescription" : {
|
||||
"NSPhotoLibraryUsageDescription" : "App需要您的同意才能访问相册，以便您选择本地图片上传头像或发布商品评价。例如：当您修改个人头像或发布带图评价时，需要从相册选择图片。",
|
||||
"NSPhotoLibraryAddUsageDescription" : "App需要您的同意才能添加图片到相册，以便您保存商品海报或图片到本地。例如：当您点击保存商品分享海报时，需要写入相册权限。",
|
||||
"NSCameraUsageDescription" : "App需要您的同意才能访问相机，以便您拍摄图片上传头像或发布商品评价。例如：当您修改个人头像或发布带图评价时，需要使用相机拍摄照片。"
|
||||
"privacyDescription": {
|
||||
"NSPhotoLibraryUsageDescription": "App需要您的同意才能访问相册，以便您选择本地图片上传头像或发布商品评价。例如：当您修改个人头像或发布带图评价时，需要从相册选择图片。",
|
||||
"NSPhotoLibraryAddUsageDescription": "App需要您的同意才能添加图片到相册，以便您保存商品海报或图片到本地。例如：当您点击保存商品分享海报时，需要写入相册权限。",
|
||||
"NSCameraUsageDescription": "App需要您的同意才能访问相机，以便您拍摄图片上传头像或发布商品评价。例如：当您修改个人头像或发布带图评价时，需要使用相机拍摄照片。"
|
||||
}
|
||||
},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {
|
||||
"payment" : {
|
||||
"alipay" : {
|
||||
"__platform__" : [ "ios", "android" ]
|
||||
"sdkConfigs": {
|
||||
"payment": {
|
||||
"alipay": {
|
||||
"__platform__": [
|
||||
"ios",
|
||||
"android"
|
||||
]
|
||||
},
|
||||
"weixin" : {
|
||||
"__platform__" : [ "ios", "android" ],
|
||||
"appid" : "wx7a5902cd556d9396",
|
||||
"UniversalLinks" : "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
|
||||
"weixin": {
|
||||
"__platform__": [
|
||||
"ios",
|
||||
"android"
|
||||
],
|
||||
"appid": "wx7a5902cd556d9396",
|
||||
"UniversalLinks": "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
|
||||
}
|
||||
},
|
||||
"oauth" : {
|
||||
"weixin" : {
|
||||
"appid" : "wx7a5902cd556d9396",
|
||||
"UniversalLinks" : "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
|
||||
"oauth": {
|
||||
"weixin": {
|
||||
"appid": "wx7a5902cd556d9396",
|
||||
"UniversalLinks": "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
|
||||
},
|
||||
"apple" : {}
|
||||
"apple": {}
|
||||
},
|
||||
"share" : {
|
||||
"weixin" : {
|
||||
"appid" : "wx7a5902cd556d9396",
|
||||
"UniversalLinks" : "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
|
||||
"share": {
|
||||
"weixin": {
|
||||
"appid": "wx7a5902cd556d9396",
|
||||
"UniversalLinks": "https://app.tbmall.xin/uni-universallinks/__UNI__4910728/"
|
||||
}
|
||||
}
|
||||
},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
"hdpi" : "unpackage/res/icons/72x72.png",
|
||||
"xhdpi" : "unpackage/res/icons/96x96.png",
|
||||
"xxhdpi" : "unpackage/res/icons/144x144.png",
|
||||
"xxxhdpi" : "unpackage/res/icons/192x192.png"
|
||||
"icons": {
|
||||
"android": {
|
||||
"hdpi": "unpackage/res/icons/72x72.png",
|
||||
"xhdpi": "unpackage/res/icons/96x96.png",
|
||||
"xxhdpi": "unpackage/res/icons/144x144.png",
|
||||
"xxxhdpi": "unpackage/res/icons/192x192.png"
|
||||
},
|
||||
"ios" : {
|
||||
"appstore" : "unpackage/res/icons/1024x1024.png",
|
||||
"ipad" : {
|
||||
"app" : "unpackage/res/icons/76x76.png",
|
||||
"app@2x" : "unpackage/res/icons/152x152.png",
|
||||
"notification" : "unpackage/res/icons/20x20.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"proapp@2x" : "unpackage/res/icons/167x167.png",
|
||||
"settings" : "unpackage/res/icons/29x29.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"spotlight" : "unpackage/res/icons/40x40.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png"
|
||||
"ios": {
|
||||
"appstore": "unpackage/res/icons/1024x1024.png",
|
||||
"ipad": {
|
||||
"app": "unpackage/res/icons/76x76.png",
|
||||
"app@2x": "unpackage/res/icons/152x152.png",
|
||||
"notification": "unpackage/res/icons/20x20.png",
|
||||
"notification@2x": "unpackage/res/icons/40x40.png",
|
||||
"proapp@2x": "unpackage/res/icons/167x167.png",
|
||||
"settings": "unpackage/res/icons/29x29.png",
|
||||
"settings@2x": "unpackage/res/icons/58x58.png",
|
||||
"spotlight": "unpackage/res/icons/40x40.png",
|
||||
"spotlight@2x": "unpackage/res/icons/80x80.png"
|
||||
},
|
||||
"iphone" : {
|
||||
"app@2x" : "unpackage/res/icons/120x120.png",
|
||||
"app@3x" : "unpackage/res/icons/180x180.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"notification@3x" : "unpackage/res/icons/60x60.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"settings@3x" : "unpackage/res/icons/87x87.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png",
|
||||
"spotlight@3x" : "unpackage/res/icons/120x120.png"
|
||||
"iphone": {
|
||||
"app@2x": "unpackage/res/icons/120x120.png",
|
||||
"app@3x": "unpackage/res/icons/180x180.png",
|
||||
"notification@2x": "unpackage/res/icons/40x40.png",
|
||||
"notification@3x": "unpackage/res/icons/60x60.png",
|
||||
"settings@2x": "unpackage/res/icons/58x58.png",
|
||||
"settings@3x": "unpackage/res/icons/87x87.png",
|
||||
"spotlight@2x": "unpackage/res/icons/80x80.png",
|
||||
"spotlight@3x": "unpackage/res/icons/120x120.png"
|
||||
}
|
||||
}
|
||||
},
|
||||
"splashscreen" : {
|
||||
"useOriginalMsgbox" : true,
|
||||
"iosStyle" : "common",
|
||||
"androidStyle" : "common"
|
||||
"splashscreen": {
|
||||
"useOriginalMsgbox": true,
|
||||
"iosStyle": "common",
|
||||
"androidStyle": "common"
|
||||
}
|
||||
},
|
||||
/*忽略版本提示*/
|
||||
"compatible" : {
|
||||
"ignoreVersion" : true
|
||||
"compatible": {
|
||||
"ignoreVersion": true
|
||||
},
|
||||
"nativePlugins" : {
|
||||
"Hyy-Alipay" : {
|
||||
"__plugin_info__" : {
|
||||
"name" : "【免费开源】支付宝，授权，授权登录",
|
||||
"description" : "用过支付宝原生sdk，原生授权登录，更安全，有问题请联系作者",
|
||||
"platforms" : "Android",
|
||||
"url" : "https://ext.dcloud.net.cn/plugin?id=11931",
|
||||
"android_package_name" : "",
|
||||
"ios_bundle_id" : "",
|
||||
"isCloud" : true,
|
||||
"bought" : 1,
|
||||
"pid" : "11931",
|
||||
"parameters" : {}
|
||||
"nativePlugins": {
|
||||
"Hyy-Alipay": {
|
||||
"__plugin_info__": {
|
||||
"name": "【免费开源】支付宝，授权，授权登录",
|
||||
"description": "用过支付宝原生sdk，原生授权登录，更安全，有问题请联系作者",
|
||||
"platforms": "Android",
|
||||
"url": "https://ext.dcloud.net.cn/plugin?id=11931",
|
||||
"android_package_name": "",
|
||||
"ios_bundle_id": "",
|
||||
"isCloud": true,
|
||||
"bought": 1,
|
||||
"pid": "11931",
|
||||
"parameters": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
"quickapp": {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx376a16a88befe265",
|
||||
"lazyCodeLoading" : "requiredComponents",
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"minified" : true,
|
||||
"uglifyFileName" : true,
|
||||
"es6" : true,
|
||||
"postcss" : true,
|
||||
"sourcemap" : false
|
||||
"mp-weixin": {
|
||||
"appid": "wx376a16a88befe265",
|
||||
"lazyCodeLoading": "requiredComponents",
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"minified": true,
|
||||
"uglifyFileName": true,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"sourcemap": false
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"optimization" : {
|
||||
"subPackages" : true
|
||||
"usingComponents": true,
|
||||
"optimization": {
|
||||
"subPackages": true
|
||||
}
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
"mp-alipay": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
"mp-baidu": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
"mp-toutiao": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
"uniStatistics": {
|
||||
"enable": false
|
||||
},
|
||||
"vueVersion" : "3",
|
||||
"_spaceID" : "mp-16f2830d-655c-4ed2-9763-d0258ba65ad9",
|
||||
"h5" : {
|
||||
"router" : {
|
||||
"mode" : "hash",
|
||||
"base" : ""
|
||||
"vueVersion": "3",
|
||||
"_spaceID": "mp-16f2830d-655c-4ed2-9763-d0258ba65ad9",
|
||||
"h5": {
|
||||
"router": {
|
||||
"mode": "hash",
|
||||
"base": ""
|
||||
},
|
||||
"devServer" : {
|
||||
"port" : 5173,
|
||||
"proxy" : {
|
||||
"/proxy-api" : {
|
||||
"target" : "https://api.o.tbmall.xin",
|
||||
"changeOrigin" : true,
|
||||
"pathRewrite" : {
|
||||
"^/proxy-api" : ""
|
||||
"devServer": {
|
||||
"port": 5173,
|
||||
"proxy": {
|
||||
"/proxy-api": {
|
||||
"target": "https://api.o.tbmall.xin",
|
||||
"changeOrigin": true,
|
||||
"pathRewrite": {
|
||||
"^/proxy-api": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+30
@@ -108,6 +108,18 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "apply_refund/apply_refund",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "fill_express/fill_express",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "mine_purse_bonus/mine_purse_bonus",
|
||||
"style": {
|
||||
@@ -557,6 +569,12 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "message/message",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -569,6 +587,18 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "get-coupon/get-coupon",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "applicable_goods/applicable_goods",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "productInfo/evaluateDetail",
|
||||
"style": {
|
||||
|
||||
+1395
-1306
File diff suppressed because it is too large
Load Diff
@@ -47,7 +47,21 @@ export default {
|
||||
}
|
||||
},
|
||||
onReturnClick() {
|
||||
uni.navigateTo({url:"/pages/login_package/announcement/announcement"});
|
||||
const pages = getCurrentPages();
|
||||
if (pages && pages.length > 1) {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
fail: () => {
|
||||
uni.switchTab({
|
||||
url: "/pages/home/home",
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: "/pages/home/home",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -81,9 +81,21 @@ export default {
|
||||
},
|
||||
// 返回
|
||||
onReturnClick() {
|
||||
uni.switchTab({
|
||||
url:'/pages/home/home'
|
||||
})
|
||||
const pages = getCurrentPages();
|
||||
if (pages && pages.length > 1) {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
fail: () => {
|
||||
uni.switchTab({
|
||||
url: "/pages/home/home",
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: "/pages/home/home",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -538,19 +538,13 @@ export default {
|
||||
uni.login({
|
||||
provider: 'apple',
|
||||
success: async (loginRes) => {
|
||||
console.log('Apple 登录成功:', loginRes);
|
||||
const authResult = loginRes.appleInfo || {};
|
||||
const params = {
|
||||
identityToken: authResult.identityToken,
|
||||
// openId: authResult.user,
|
||||
// fullName: authResult.fullName ? `${authResult.fullName.familyName || ''}${authResult.fullName.givenName || ''}` : '',
|
||||
// authorizationCode: authResult.authorizationCode
|
||||
};
|
||||
|
||||
console.log("Apple 登录成功-0:", params)
|
||||
try {
|
||||
const response = await appleLogin(params);
|
||||
console.log("Apple 登录成功-1:", response)
|
||||
if (response && response.bizcode === 100) {
|
||||
|
||||
if (response.data && response.data.userId) {
|
||||
@@ -562,14 +556,12 @@ export default {
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("Apple 登录成功-2:", response)
|
||||
this.$refs.uToastRef.show({
|
||||
type: "error",
|
||||
message: response?.msg || "Apple登录失败",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Apple登录异常:", error);
|
||||
this.$refs.uToastRef.show({
|
||||
type: "error",
|
||||
message: "Apple登录异常，请重试",
|
||||
@@ -579,18 +571,17 @@ export default {
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
this.loading = false;
|
||||
console.error('Apple登录授权失败:', err);
|
||||
|
||||
this.$refs.uToastRef.show({
|
||||
type: "error",
|
||||
message: "Apple登录授权失败",
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
})
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<view class="message-page">
|
||||
<TopSafe></TopSafe>
|
||||
<Header title="消息" :isReturn="true" @return="onReturnClick"></Header>
|
||||
|
||||
<view class="message-container">
|
||||
<view class="message-item" v-for="item in messageList" :key="item.id" @click="onItemClick(item)">
|
||||
<view class="item-icon-wrap" :class="item.iconType">
|
||||
<image class="item-icon" :src="item.icon" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<view class="item-content">
|
||||
<view class="title-row">
|
||||
<text class="item-title">{{ item.title }}</text>
|
||||
<text class="item-badge" v-if="item.badge">{{ item.badge }}</text>
|
||||
</view>
|
||||
<text class="item-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<qiaobao-assistant page-key="packages/message/message" title="消息" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "@/components/common/header.vue";
|
||||
import TopSafe from "@/components/common/top-safe.nvue";
|
||||
import { getNewsList } from "@/api/news.js";
|
||||
import {
|
||||
CONTENT_TYPE,
|
||||
getCurrentMember,
|
||||
getMessages,
|
||||
getUnreadCount,
|
||||
} from "@/uni_modules/hashmall-customer-service/js_sdk/api.js";
|
||||
import { getStorageFun, TOKEN_NAME, USER_DATA } from "@/utils/auth.js";
|
||||
import {
|
||||
KEFU_REALTIME_EVENT,
|
||||
startKefuRealtime,
|
||||
} from "@/uni_modules/hashmall-customer-service/js_sdk/kefu-realtime.js";
|
||||
|
||||
const KEFU_DEFAULT_DESC = "点击联系平台客服";
|
||||
const NOTICE_DEFAULT_DESC = "暂无系统公告";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
TopSafe,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
refreshing: false,
|
||||
realtimeRefreshTimer: null,
|
||||
messageList: [
|
||||
{
|
||||
id: "kefu",
|
||||
title: "平台客服",
|
||||
badge: "",
|
||||
desc: KEFU_DEFAULT_DESC,
|
||||
iconType: "kefu",
|
||||
icon: "https://static.tbmall.xin/static/plat-customer-service.png",
|
||||
path: "/pages/rwa_package/kefu/kefu",
|
||||
},
|
||||
{
|
||||
id: "system",
|
||||
title: "系统公告",
|
||||
badge: "",
|
||||
desc: NOTICE_DEFAULT_DESC,
|
||||
iconType: "system",
|
||||
icon: "https://static.tbmall.xin/static/sys-customer-service.png",
|
||||
path: "/pages/login_package/announcement/announcement",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
uni.$on(KEFU_REALTIME_EVENT, this.handleKefuRealtimeEvent);
|
||||
},
|
||||
onShow() {
|
||||
this.refreshMessageCenter();
|
||||
startKefuRealtime();
|
||||
},
|
||||
onUnload() {
|
||||
uni.$off(KEFU_REALTIME_EVENT, this.handleKefuRealtimeEvent);
|
||||
if (this.realtimeRefreshTimer) clearTimeout(this.realtimeRefreshTimer);
|
||||
this.realtimeRefreshTimer = null;
|
||||
},
|
||||
methods: {
|
||||
handleKefuRealtimeEvent(event) {
|
||||
if (!event || !String(event.type || "").startsWith("kefu_")) return;
|
||||
// A single business operation may emit a message and a conversation event.
|
||||
// Coalesce them so the summary endpoint is read only once.
|
||||
if (this.realtimeRefreshTimer) clearTimeout(this.realtimeRefreshTimer);
|
||||
this.realtimeRefreshTimer = setTimeout(() => {
|
||||
this.realtimeRefreshTimer = null;
|
||||
this.loadKefuSummary();
|
||||
}, 120);
|
||||
},
|
||||
getMessageItem(id) {
|
||||
return this.messageList.find((item) => item.id === id);
|
||||
},
|
||||
formatBadge(value) {
|
||||
const count = Math.max(0, Number(value) || 0);
|
||||
if (!count) return "";
|
||||
return count > 99 ? "99+" : String(count);
|
||||
},
|
||||
parseStoredUser() {
|
||||
const value = getStorageFun(USER_DATA);
|
||||
if (!value) return null;
|
||||
if (typeof value === "object") {
|
||||
return value.id ? value : { ...value, id: value.userId };
|
||||
}
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
return parsed.id ? parsed : { ...parsed, id: parsed.userId };
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
withTimeout(promise, timeout = 5000) {
|
||||
return Promise.race([
|
||||
promise,
|
||||
new Promise((resolve) => setTimeout(() => resolve(null), timeout)),
|
||||
]);
|
||||
},
|
||||
normalizeKefuDesc(content, contentType) {
|
||||
const type = Number(contentType || 0);
|
||||
if (type === CONTENT_TYPE.IMAGE) return "[图片]";
|
||||
if (type === CONTENT_TYPE.FILE) return "[文件]";
|
||||
if (type === CONTENT_TYPE.AUDIO) return "[语音]";
|
||||
if (type === CONTENT_TYPE.PRODUCT) return "[商品]";
|
||||
if (type === CONTENT_TYPE.ORDER) return "[订单]";
|
||||
if (type === CONTENT_TYPE.RECALLED) return "消息已撤回";
|
||||
|
||||
const text = String(content || "").trim();
|
||||
if (!text) return KEFU_DEFAULT_DESC;
|
||||
if (type === CONTENT_TYPE.QUOTE) {
|
||||
try {
|
||||
const quote = JSON.parse(text);
|
||||
return String(quote.text || quote.content || "[引用消息]");
|
||||
} catch (error) {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
return text;
|
||||
},
|
||||
async loadKefuSummary() {
|
||||
const item = this.getMessageItem("kefu");
|
||||
if (!item) return;
|
||||
|
||||
if (!getStorageFun(TOKEN_NAME)) {
|
||||
item.badge = "";
|
||||
item.desc = KEFU_DEFAULT_DESC;
|
||||
return;
|
||||
}
|
||||
|
||||
let member = this.parseStoredUser();
|
||||
if (!member || !member.id) {
|
||||
try {
|
||||
member = await this.withTimeout(getCurrentMember());
|
||||
} catch (error) {
|
||||
member = null;
|
||||
}
|
||||
}
|
||||
if (!member || !member.id) return;
|
||||
|
||||
const results = await Promise.allSettled([
|
||||
getUnreadCount(member.id),
|
||||
getMessages({ userId: member.id, page: 1, pageSize: 20 }),
|
||||
]);
|
||||
|
||||
if (results[0].status === "fulfilled") {
|
||||
item.badge = this.formatBadge(results[0].value);
|
||||
}
|
||||
if (results[1].status === "fulfilled") {
|
||||
const result = results[1].value || {};
|
||||
const conversation = result.conversation || {};
|
||||
const rows = (result.messages && result.messages.entitys) || [];
|
||||
const latest = rows.length ? rows[rows.length - 1] : {};
|
||||
item.desc = this.normalizeKefuDesc(
|
||||
conversation.lastMessageContent || latest.content,
|
||||
conversation.lastMessageContentType || latest.contentType,
|
||||
);
|
||||
}
|
||||
},
|
||||
async loadNoticeSummary() {
|
||||
const item = this.getMessageItem("system");
|
||||
if (!item) return;
|
||||
try {
|
||||
const result = await getNewsList({
|
||||
category: 2,
|
||||
type: 0,
|
||||
page: 1,
|
||||
pageSize: 1,
|
||||
});
|
||||
const rows = (result && result.data && result.data.entitys) || [];
|
||||
const latest = rows[0];
|
||||
if (!latest) {
|
||||
item.badge = "";
|
||||
item.desc = NOTICE_DEFAULT_DESC;
|
||||
return;
|
||||
}
|
||||
item.desc = latest.subTitle || latest.title || NOTICE_DEFAULT_DESC;
|
||||
const readId = uni.getStorageSync("isReadNews");
|
||||
item.badge = String(readId || "") === String(latest.id || "") ? "" : "1";
|
||||
} catch (error) {
|
||||
item.badge = "";
|
||||
item.desc = NOTICE_DEFAULT_DESC;
|
||||
}
|
||||
},
|
||||
async refreshMessageCenter() {
|
||||
if (this.refreshing) return;
|
||||
this.refreshing = true;
|
||||
try {
|
||||
await Promise.allSettled([
|
||||
this.loadKefuSummary(),
|
||||
this.loadNoticeSummary(),
|
||||
]);
|
||||
} finally {
|
||||
this.refreshing = false;
|
||||
}
|
||||
},
|
||||
onReturnClick() {
|
||||
const pages = getCurrentPages();
|
||||
if (pages && pages.length > 1) {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
fail: () => {
|
||||
uni.switchTab({ url: "/pages/home/home" });
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.switchTab({ url: "/pages/home/home" });
|
||||
}
|
||||
},
|
||||
onItemClick(item) {
|
||||
if (item.path) {
|
||||
uni.navigateTo({
|
||||
url: item.path,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f8fa;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 30rpx 32rpx;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 152rpx;
|
||||
right: 0rpx;
|
||||
bottom: 0;
|
||||
height: 1rpx;
|
||||
background-color: #f2f3f5;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
.item-icon-wrap {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.item-icon {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1d2129;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.item-badge {
|
||||
background-color: #f53f3f;
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
min-width: 32rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
padding: 0 8rpx;
|
||||
margin-left: 12rpx;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 26rpx;
|
||||
color: #86909c;
|
||||
line-height: 36rpx;
|
||||
margin-top: 8rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
+12
-6
@@ -293,12 +293,12 @@ export default {
|
||||
url: 'https://static.tbmall.xin/static/mine/apply_purse.png',
|
||||
path: '/pages/mine_package/mine_purse/mine_purse'
|
||||
},
|
||||
// {
|
||||
// id: 6,
|
||||
// title: "优惠券",
|
||||
// url: "https://static.tbmall.xin/static/mine/apply_prize.png",
|
||||
// path: "/pages/other_package/coupon/coupon",
|
||||
// },
|
||||
{
|
||||
id: 6,
|
||||
title: "优惠券",
|
||||
url: "https://static.tbmall.xin/static/mine/apply_prize.png",
|
||||
path: "/pages/other_package/coupon/coupon",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '抽奖',
|
||||
@@ -390,6 +390,12 @@ export default {
|
||||
title: '财务',
|
||||
url: 'https://static.tbmall.xin/static/mine/tool_cw.png',
|
||||
path: '/pages/rwa_package/insights/finance'
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: '领券中心',
|
||||
url: 'https://static.tbmall.xin/static/mine/coupon.png',
|
||||
path: '/pages/other_package/get-coupon/get-coupon'
|
||||
}
|
||||
// {
|
||||
// id: 11,
|
||||
|
||||
@@ -0,0 +1,882 @@
|
||||
<template>
|
||||
<view class="apply-refund-container">
|
||||
<!-- 顶部固定导航栏 -->
|
||||
<view class="navbar-sticky-wrapper" :style="mpWarpStyle">
|
||||
<view class="custom-navbar" :style="mpHeaderStyle">
|
||||
<view class="nav-left" @click="goBack">
|
||||
<view class="back-btn-box">
|
||||
<text class="back-arrow">‹</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-title">申请退款</view>
|
||||
<view class="nav-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="content-scroll">
|
||||
<view class="main-content">
|
||||
<!-- 1. 商品信息卡片 -->
|
||||
<view class="card product-card">
|
||||
<view class="product-info-row">
|
||||
<image :src="productImage" class="product-img" mode="aspectFill" />
|
||||
<view class="product-details">
|
||||
<view class="product-header">
|
||||
<text class="product-title">{{ productTitle }}</text>
|
||||
<text class="product-price">¥{{ productPrice }}</text>
|
||||
</view>
|
||||
<view class="product-spec-row">
|
||||
<text class="product-spec">规格：{{ productSpec }}</text>
|
||||
<text class="product-num">x {{ productNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="product-total-row">
|
||||
<text class="product-total-text">共{{ productNum }}件，合计¥{{ totalPrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 退款选项卡片 (退款原因 & 退款金额) -->
|
||||
<view class="card form-card">
|
||||
<!-- 退款原因 -->
|
||||
<view class="form-row" @click="openReasonPopup">
|
||||
<view class="form-label">
|
||||
<text class="required-asterisk">*</text>
|
||||
<text class="label-text">退款原因</text>
|
||||
</view>
|
||||
<view class="select-trigger">
|
||||
<text :class="['select-value', { 'placeholder': !selectedReason }]">
|
||||
{{ selectedReason ? selectedReason.name : '请选择' }}
|
||||
</text>
|
||||
<view class="dashed-arrow-box">
|
||||
<text class="arrow-icon">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="row-divider"></view>
|
||||
|
||||
<!-- 退款金额 -->
|
||||
<view class="form-row">
|
||||
<view class="form-label">
|
||||
<text class="label-text">退款金额</text>
|
||||
</view>
|
||||
<view class="amount-value">
|
||||
¥{{ totalPrice }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 3. 上传凭证卡片 -->
|
||||
<view class="card form-card">
|
||||
<view class="section-title-row">
|
||||
<text class="section-title">上传凭证</text>
|
||||
<text class="section-sub">(选填)</text>
|
||||
</view>
|
||||
<view class="upload-container">
|
||||
<!-- 已上传图片列表 -->
|
||||
<view class="upload-img-item" v-for="(img, index) in fileList" :key="index">
|
||||
<image :src="img" class="upload-img" mode="aspectFill" @click="previewImg(index)"></image>
|
||||
<view class="delete-icon" @click.stop="deleteImg(index)">×</view>
|
||||
</view>
|
||||
<!-- 上传按钮 -->
|
||||
<view class="upload-btn-box" v-if="fileList.length < 6" @click="chooseImage">
|
||||
<text class="plus-icon">+</text>
|
||||
<text class="upload-text">上传图片</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 4. 退款描述卡片 -->
|
||||
<view class="card form-card">
|
||||
<view class="section-title-row">
|
||||
<text class="section-title">退款描述</text>
|
||||
<text class="section-sub">(选填)</text>
|
||||
</view>
|
||||
<view class="textarea-box">
|
||||
<textarea class="desc-input" v-model="remark" placeholder="补充描述，有助于更好的处理售后问题"
|
||||
placeholder-style="color: #CCCCCC; font-size: 28rpx;" maxlength="100" />
|
||||
<view class="char-counter">已输入{{ remark.length }}/100</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部间距防止按键遮挡 -->
|
||||
<view class="bottom-spacer"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部固定提交按钮 -->
|
||||
<view class="fixed-bottom-bar">
|
||||
<button class="submit-btn" @click="submitRefund">提交</button>
|
||||
</view>
|
||||
|
||||
<!-- 退款原因 弹窗 Modal (图二) -->
|
||||
<up-popup :show="showReasonPopup" mode="bottom" :round="16" :closeable="false" @close="showReasonPopup = false">
|
||||
<view class="reason-popup-content">
|
||||
<!-- 弹窗头部 -->
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">退款原因</text>
|
||||
<view class="popup-close-box" @click="showReasonPopup = false">
|
||||
<text class="popup-close-icon">×</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 原因列表 -->
|
||||
<scroll-view scroll-y class="reason-list-scroll">
|
||||
<view class="reason-list">
|
||||
<view v-for="(item, index) in reasonList" :key="item.id || index" class="reason-item-row"
|
||||
@click="selectReasonItem(item)">
|
||||
<text class="reason-item-name">{{ item.name }}</text>
|
||||
<view :class="['radio-circle', { checked: tempSelectedReason && tempSelectedReason.id === item.id }]">
|
||||
<text v-if="tempSelectedReason && tempSelectedReason.id === item.id" class="check-mark">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 弹窗底部提交按钮 -->
|
||||
<view class="popup-bottom-bar">
|
||||
<button class="popup-submit-btn" @click="confirmReason">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RETURN_REASON_LIST } from "@/pages/mine_package/mine_order/emun/index.js";
|
||||
import { getDetail, afterSaleApply } from "@/api/order.js";
|
||||
import { BASE_URL, Authorization } from '@/utils/config.js';
|
||||
import { getStorageFun, TOKEN_NAME } from '@/utils/auth.js';
|
||||
import { uploadImg } from '@/api/common.js';
|
||||
import { IMG_TYPE } from '@/utils/enumUtils.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderInfo: {},
|
||||
mpWarpStyle: {},
|
||||
mpHeaderStyle: {},
|
||||
|
||||
selectedReason: null,
|
||||
tempSelectedReason: null,
|
||||
showReasonPopup: false,
|
||||
remark: "",
|
||||
fileList: [],
|
||||
|
||||
reasonList: RETURN_REASON_LIST
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
firstItem() {
|
||||
if (this.orderInfo && Array.isArray(this.orderInfo.items) && this.orderInfo.items.length > 0) {
|
||||
return this.orderInfo.items[0];
|
||||
}
|
||||
return {};
|
||||
},
|
||||
productTitle() {
|
||||
return this.firstItem.title || this.orderInfo.title || "";
|
||||
},
|
||||
productPrice() {
|
||||
return this.firstItem.goodsAmount || this.orderInfo.sumAmount || "0";
|
||||
},
|
||||
productSpec() {
|
||||
return this.firstItem.goodsSpece || this.orderInfo.goodsSpece || "";
|
||||
},
|
||||
productNum() {
|
||||
return this.firstItem.buyNum || this.orderInfo.buyNum || 1;
|
||||
},
|
||||
totalPrice() {
|
||||
return this.orderInfo.sumAmount || "0";
|
||||
},
|
||||
productImage() {
|
||||
return this.firstItem.mainGraph || this.orderInfo.mainGraph || "";
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// #ifdef MP-WEIXIN || MP
|
||||
this.initMPHeader();
|
||||
// #endif
|
||||
|
||||
let orderId = options ? options.id : null;
|
||||
|
||||
if (options && options.orderData) {
|
||||
try {
|
||||
this.orderInfo = JSON.parse(decodeURIComponent(options.orderData));
|
||||
if (!orderId && this.orderInfo.id) {
|
||||
orderId = this.orderInfo.id;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("解析订单数据错误:", e);
|
||||
}
|
||||
}
|
||||
|
||||
if (orderId) {
|
||||
this.fetchOrderDetail(orderId);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchOrderDetail(id) {
|
||||
if (!id) return;
|
||||
try {
|
||||
const res = await getDetail({ id });
|
||||
if (res && res.bizcode === 100 && res.data) {
|
||||
this.orderInfo = res.data;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("fetchOrderDetail error:", e);
|
||||
}
|
||||
},
|
||||
initMPHeader() {
|
||||
// #ifdef MP-WEIXIN || MP
|
||||
try {
|
||||
const menuButton = uni.getMenuButtonBoundingClientRect();
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
if (menuButton && menuButton.top && menuButton.top > 0) {
|
||||
const menuButtonHeight = menuButton.height || 32;
|
||||
const menuButtonTop = menuButton.top;
|
||||
const menuButtonLeft = menuButton.left;
|
||||
const windowWidth = systemInfo.windowWidth;
|
||||
|
||||
this.mpWarpStyle = {
|
||||
paddingTop: `${menuButtonTop}px`
|
||||
};
|
||||
|
||||
this.mpHeaderStyle = {
|
||||
height: `${menuButtonHeight}px`,
|
||||
paddingRight: `${windowWidth - menuButtonLeft + 10}px`,
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("initMPHeader error:", e);
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
fail: () => {
|
||||
uni.switchTab({ url: '/pages/mine/mine' });
|
||||
}
|
||||
});
|
||||
},
|
||||
openReasonPopup() {
|
||||
this.tempSelectedReason = this.selectedReason || (this.reasonList.length > 0 ? this.reasonList[0] : null);
|
||||
this.showReasonPopup = true;
|
||||
},
|
||||
selectReasonItem(item) {
|
||||
this.tempSelectedReason = item;
|
||||
},
|
||||
confirmReason() {
|
||||
if (!this.tempSelectedReason) {
|
||||
uni.showToast({ title: '请选择退款原因', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
this.selectedReason = this.tempSelectedReason;
|
||||
this.showReasonPopup = false;
|
||||
},
|
||||
chooseImage() {
|
||||
const that = this;
|
||||
const count = 6 - this.fileList.length;
|
||||
if (count <= 0) return;
|
||||
uni.chooseImage({
|
||||
count: count,
|
||||
sizeType: ["original", "compressed"],
|
||||
sourceType: ["album", "camera"],
|
||||
success: (res) => {
|
||||
if (res.tempFilePaths && res.tempFilePaths.length > 0) {
|
||||
res.tempFilePaths.forEach((filePath) => {
|
||||
that.uploadFile(filePath);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadFile(url) {
|
||||
uni.showLoading({
|
||||
title: "图片上传中..."
|
||||
});
|
||||
const that = this;
|
||||
const token = getStorageFun(TOKEN_NAME);
|
||||
uni.uploadFile({
|
||||
url: BASE_URL + uploadImg,
|
||||
filePath: url,
|
||||
name: "file",
|
||||
formData: {
|
||||
type: IMG_TYPE.COMMON
|
||||
},
|
||||
header: {
|
||||
Authorization: Authorization,
|
||||
"HSM-AUTH": token ? token : ""
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(uploadFileRes.data);
|
||||
} catch (e) {
|
||||
data = uploadFileRes.data;
|
||||
}
|
||||
if (data && data.bizcode === 100) {
|
||||
that.fileList.push(data.data.accessUrl);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: (data && data.msg) || "图片上传失败",
|
||||
icon: "none",
|
||||
mask: true,
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (uploadFileErr) => {
|
||||
uni.showToast({
|
||||
title: "图片上传失败",
|
||||
icon: "none",
|
||||
mask: true,
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
complete: (res) => {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
previewImg(index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.fileList
|
||||
});
|
||||
},
|
||||
deleteImg(index) {
|
||||
this.fileList.splice(index, 1);
|
||||
},
|
||||
async submitRefund() {
|
||||
if (!this.selectedReason) {
|
||||
uni.showToast({
|
||||
title: '请选择退款原因',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
id: this.orderInfo.id || 0,
|
||||
itemIds: (this.orderInfo.items && this.orderInfo.items[0]) ? this.orderInfo.items[0].id : '',
|
||||
reason: this.selectedReason.id,
|
||||
remark: this.remark,
|
||||
imgUrls: this.fileList.join(','),
|
||||
type: this.orderInfo?.status === 2 ? 1 : (this.orderInfo?.status === 3 || this.orderInfo?.status === 4) ? 2 : 1
|
||||
};
|
||||
try {
|
||||
uni.showLoading({ title: '提交中...' });
|
||||
const res = await afterSaleApply(params);
|
||||
uni.hideLoading();
|
||||
if (res && res.bizcode === 100) {
|
||||
uni.showToast({
|
||||
title: '申请成功',
|
||||
icon: 'success'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: (res && res.msg) || '申请提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '申请已提交',
|
||||
icon: 'success'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.apply-refund-container {
|
||||
min-height: 100vh;
|
||||
background-color: #F6F7F9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* 顶部固定导航栏包装器 */
|
||||
.navbar-sticky-wrapper {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background-color: #FFFFFF;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.custom-navbar {
|
||||
height: 88rpx;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
.nav-left {
|
||||
width: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.back-btn-box {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border: 1rpx dashed #C8C9CC;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.back-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
line-height: 1;
|
||||
margin-top: -4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主滚动区域 */
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
|
||||
/* 通用卡片容器 */
|
||||
.card {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 1. 商品信息卡片 */
|
||||
.product-card {
|
||||
.product-info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.product-img {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #F2F3F5;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 140rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.product-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.product-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #111111;
|
||||
line-height: 38rpx;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #111111;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.product-spec-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 12rpx;
|
||||
|
||||
.product-spec {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.product-num {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-total-row {
|
||||
text-align: right;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.product-total-text {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 2. 表单卡片 (退款原因、金额、凭证、描述) */
|
||||
.form-card {
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 72rpx;
|
||||
|
||||
.form-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.required-asterisk {
|
||||
color: #FF4D4F;
|
||||
font-size: 28rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.select-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.select-value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-right: 12rpx;
|
||||
|
||||
&.placeholder {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
|
||||
.dashed-arrow-box {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 1rpx dashed #C8C9CC;
|
||||
border-radius: 4rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 1;
|
||||
margin-top: -2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
|
||||
.row-divider {
|
||||
height: 1rpx;
|
||||
background-color: #F2F3F5;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.section-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.section-sub {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 上传凭证 */
|
||||
.upload-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
|
||||
.upload-img-item {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.upload-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom-left-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-btn-box {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
background-color: #F7F8FA;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.plus-icon {
|
||||
font-size: 48rpx;
|
||||
color: #999999;
|
||||
line-height: 1;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 退款描述 */
|
||||
.textarea-box {
|
||||
background-color: #F7F8FA;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
position: relative;
|
||||
|
||||
.desc-input {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.char-counter {
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
color: #CCCCCC;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-spacer {
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
/* 底部固定提交按钮 */
|
||||
.fixed-bottom-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
padding: 20rpx 32rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.03);
|
||||
z-index: 100;
|
||||
|
||||
.submit-btn {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #7934F6;
|
||||
border-radius: 16rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
border: none;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 图二: 退款原因 弹窗 */
|
||||
.reason-popup-content {
|
||||
background-color: #FFFFFF;
|
||||
padding: 30rpx 32rpx calc(30rpx + env(safe-area-inset-bottom));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 80vh;
|
||||
|
||||
.popup-header {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding-bottom: 24rpx;
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.popup-close-box {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -4rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 1rpx dashed #C8C9CC;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.popup-close-icon {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reason-list-scroll {
|
||||
max-height: 55vh;
|
||||
|
||||
.reason-list {
|
||||
padding: 10rpx 0;
|
||||
|
||||
.reason-item-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.reason-item-name {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.radio-circle {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #DCDCDC;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.checked {
|
||||
background-color: #7934F6;
|
||||
border-color: #7934F6;
|
||||
}
|
||||
|
||||
.check-mark {
|
||||
color: #FFFFFF;
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-bottom-bar {
|
||||
padding-top: 20rpx;
|
||||
|
||||
.popup-submit-btn {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #7934F6;
|
||||
border-radius: 16rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
border: none;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,654 @@
|
||||
<template>
|
||||
<view class="fill-express-container">
|
||||
<!-- 顶部固定导航栏 -->
|
||||
<view class="navbar-sticky-wrapper" :style="mpWarpStyle">
|
||||
<view class="custom-navbar" :style="mpHeaderStyle">
|
||||
<view class="nav-left" @click="goBack">
|
||||
<view class="back-btn-box">
|
||||
<text class="back-arrow">‹</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-title">填写物流</view>
|
||||
<view class="nav-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="content-scroll">
|
||||
<view class="main-content">
|
||||
<!-- 1. 商品信息卡片 -->
|
||||
<view class="card product-card">
|
||||
<view class="product-info-row">
|
||||
<image :src="productImage" class="product-img" mode="aspectFill" />
|
||||
<view class="product-details">
|
||||
<view class="product-header">
|
||||
<text class="product-title">{{ productTitle }}</text>
|
||||
<text class="product-price">¥{{ productPrice }}</text>
|
||||
</view>
|
||||
<view class="product-spec-row">
|
||||
<text class="product-spec">规格：{{ productSpec }}</text>
|
||||
<text class="product-num">x {{ productNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="product-total-row">
|
||||
<text class="product-total-text">共{{ productNum }}件，合计¥{{ totalPrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 退货信息卡片 -->
|
||||
<view class="card form-card">
|
||||
<view class="section-title-row">
|
||||
<text class="section-title">退货信息</text>
|
||||
<text class="section-sub-tip">(如无退货信息请联系客服人员)</text>
|
||||
</view>
|
||||
|
||||
<!-- 联系人 -->
|
||||
<view class="info-row">
|
||||
<text class="info-label">联系人</text>
|
||||
<text class="info-val">{{ sellerName }}</text>
|
||||
</view>
|
||||
|
||||
<view class="row-divider"></view>
|
||||
|
||||
<!-- 手机号 -->
|
||||
<view class="info-row">
|
||||
<text class="info-label">手机号</text>
|
||||
<text class="info-val">{{ sellerPhone }}</text>
|
||||
</view>
|
||||
|
||||
<view class="row-divider"></view>
|
||||
|
||||
<!-- 退货地址 -->
|
||||
<view class="info-row align-top">
|
||||
<text class="info-label">退货地址</text>
|
||||
<text class="info-val address-text">{{ sellerAddress }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 3. 物流信息卡片 -->
|
||||
<view class="card form-card">
|
||||
<view class="section-title-row">
|
||||
<text class="section-title">物流信息</text>
|
||||
</view>
|
||||
|
||||
<!-- 物流公司 -->
|
||||
<view class="form-row" @click="openExpressPicker">
|
||||
<view class="form-label">
|
||||
<text class="required-asterisk">*</text>
|
||||
<text class="label-text">物流公司</text>
|
||||
</view>
|
||||
<view class="select-trigger">
|
||||
<text :class="['select-value', { 'placeholder': !expressName }]">
|
||||
{{ expressName || '请选择' }}
|
||||
</text>
|
||||
<view class="dashed-arrow-box">
|
||||
<text class="arrow-icon">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="row-divider"></view>
|
||||
|
||||
<!-- 物流单号 -->
|
||||
<view class="form-row">
|
||||
<view class="form-label">
|
||||
<text class="required-asterisk">*</text>
|
||||
<text class="label-text">物流单号</text>
|
||||
</view>
|
||||
<input class="form-input" type="text" v-model="expressNo" placeholder="请输入"
|
||||
placeholder-style="color: #CCCCCC; font-size: 28rpx;" />
|
||||
</view>
|
||||
|
||||
<view class="row-divider"></view>
|
||||
|
||||
<!-- 物流说明 -->
|
||||
<view class="form-row">
|
||||
<view class="form-label">
|
||||
<text class="label-text">物流说明</text>
|
||||
</view>
|
||||
<input class="form-input" type="text" v-model="expressRemark" placeholder="这里展示后台设置的退货地址"
|
||||
placeholder-style="color: #CCCCCC; font-size: 28rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部间距防止遮挡 -->
|
||||
<view class="bottom-spacer"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部固定提交按钮 -->
|
||||
<view class="fixed-bottom-bar">
|
||||
<button class="submit-btn" @click="submitLogistics">提交</button>
|
||||
</view>
|
||||
|
||||
<!-- 快递公司选择器 Picker -->
|
||||
<up-picker :show="expressShow" :columns="[expressList]" keyName="name" valueName="id" itemHeight="40"
|
||||
@confirm="onExpressConfirm" @cancel="expressShow = false" @close="expressShow = false"></up-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { afterSaleDetail, getExpressCompany, returnGoodsFeedback } from "@/api/order.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
afterData: {},
|
||||
mpWarpStyle: {},
|
||||
mpHeaderStyle: {},
|
||||
|
||||
expressName: "",
|
||||
expressId: "",
|
||||
expressNo: "",
|
||||
expressRemark: "",
|
||||
|
||||
expressList: [],
|
||||
expressShow: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
firstItem() {
|
||||
if (this.afterData && Array.isArray(this.afterData.items) && this.afterData.items.length > 0) {
|
||||
return this.afterData.items[0];
|
||||
}
|
||||
return {};
|
||||
},
|
||||
productTitle() {
|
||||
return this.firstItem.title || this.afterData.title || "";
|
||||
},
|
||||
productPrice() {
|
||||
return this.firstItem.goodsAmount || this.afterData.sumAmount || "0";
|
||||
},
|
||||
productSpec() {
|
||||
return this.firstItem.goodsSpece || this.afterData.goodsSpece || "";
|
||||
},
|
||||
productNum() {
|
||||
return this.afterData.buyNum || this.firstItem.buyNum || 1;
|
||||
},
|
||||
totalPrice() {
|
||||
return this.afterData.refundAmount || this.afterData.sumAmount || "0";
|
||||
},
|
||||
productImage() {
|
||||
return this.firstItem.mainGraph || this.afterData.mainGraph || "--";
|
||||
},
|
||||
sellerName() {
|
||||
return this.afterData.name || "--";
|
||||
},
|
||||
sellerPhone() {
|
||||
return this.afterData.phone || "--";
|
||||
},
|
||||
sellerAddress() {
|
||||
return this.afterData.address || "--";
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// #ifdef MP-WEIXIN || MP
|
||||
this.initMPHeader();
|
||||
// #endif
|
||||
|
||||
let afterId = options ? (options.afterId || options.id) : null;
|
||||
|
||||
if (options && options.afterData) {
|
||||
try {
|
||||
this.afterData = JSON.parse(decodeURIComponent(options.afterData));
|
||||
if (!afterId && (this.afterData.afterId || this.afterData.id)) {
|
||||
afterId = this.afterData.afterId || this.afterData.id;
|
||||
}
|
||||
if (this.afterData.expressName) this.expressName = this.afterData.expressName;
|
||||
if (this.afterData.expressId) this.expressId = this.afterData.expressId;
|
||||
if (this.afterData.expressNo) this.expressNo = this.afterData.expressNo;
|
||||
} catch (e) {
|
||||
console.error("解析售后数据错误:", e);
|
||||
}
|
||||
}
|
||||
|
||||
if (afterId) {
|
||||
this.fetchAfterDetail(afterId);
|
||||
}
|
||||
|
||||
this.fetchExpressCompany();
|
||||
},
|
||||
methods: {
|
||||
async fetchAfterDetail(afterId) {
|
||||
if (!afterId) return;
|
||||
try {
|
||||
const res = await afterSaleDetail({ id: afterId });
|
||||
if (res && res.bizcode === 100 && res.data) {
|
||||
this.afterData = { ...this.afterData, ...res.data };
|
||||
if (res.data.expressName) this.expressName = res.data.expressName;
|
||||
if (res.data.expressId) this.expressId = res.data.expressId;
|
||||
if (res.data.expressNo) this.expressNo = res.data.expressNo;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("fetchAfterDetail error:", e);
|
||||
}
|
||||
},
|
||||
initMPHeader() {
|
||||
// #ifdef MP-WEIXIN || MP
|
||||
try {
|
||||
const menuButton = uni.getMenuButtonBoundingClientRect();
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
if (menuButton && menuButton.top && menuButton.top > 0) {
|
||||
const menuButtonHeight = menuButton.height || 32;
|
||||
const menuButtonTop = menuButton.top;
|
||||
const menuButtonLeft = menuButton.left;
|
||||
const windowWidth = systemInfo.windowWidth;
|
||||
|
||||
this.mpWarpStyle = {
|
||||
paddingTop: `${menuButtonTop}px`
|
||||
};
|
||||
|
||||
this.mpHeaderStyle = {
|
||||
height: `${menuButtonHeight}px`,
|
||||
paddingRight: `${windowWidth - menuButtonLeft + 10}px`,
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("initMPHeader error:", e);
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
fail: () => {
|
||||
uni.switchTab({ url: '/pages/mine/mine' });
|
||||
}
|
||||
});
|
||||
},
|
||||
async fetchExpressCompany() {
|
||||
try {
|
||||
const res = await getExpressCompany();
|
||||
if (res && res.data) {
|
||||
this.expressList = res.data;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("getExpressCompany error:", e);
|
||||
}
|
||||
},
|
||||
openExpressPicker() {
|
||||
this.expressShow = true;
|
||||
},
|
||||
onExpressConfirm(e) {
|
||||
const val = e.value[0];
|
||||
if (val) {
|
||||
this.expressName = val.name;
|
||||
this.expressId = val.id;
|
||||
}
|
||||
this.expressShow = false;
|
||||
},
|
||||
async submitLogistics() {
|
||||
if (!this.expressName) {
|
||||
uni.showToast({ title: '请选择物流公司', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
if (!this.expressNo) {
|
||||
uni.showToast({ title: '请输入物流单号', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
id: this.afterData.afterId || this.afterData.id,
|
||||
expressNo: this.expressNo,
|
||||
expressId: this.expressId,
|
||||
remark: this.expressRemark
|
||||
};
|
||||
|
||||
try {
|
||||
uni.showLoading({ title: '提交中...' });
|
||||
const res = await returnGoodsFeedback(params);
|
||||
uni.hideLoading();
|
||||
if (res && (res.bizcode === 100 || res.code === 200)) {
|
||||
uni.showToast({ title: '提交成功', icon: 'success' });
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
} else {
|
||||
uni.showToast({ title: (res && res.msg) || '提交成功', icon: 'success' });
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: '提交成功', icon: 'success' });
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fill-express-container {
|
||||
height: 100vh;
|
||||
background-color: #F6F7F9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* 顶部固定导航栏包装器 */
|
||||
.navbar-sticky-wrapper {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background-color: #FFFFFF;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 顶部导航栏 */
|
||||
.custom-navbar {
|
||||
height: 88rpx;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
.nav-left {
|
||||
width: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.back-btn-box {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border: 1rpx dashed #C8C9CC;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.back-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
line-height: 1;
|
||||
margin-top: -4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主滚动区域 */
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
|
||||
/* 通用卡片 */
|
||||
.card {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 1. 商品信息卡片 */
|
||||
.product-card {
|
||||
.product-info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.product-img {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #F2F3F5;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 140rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.product-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.product-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #111111;
|
||||
line-height: 38rpx;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #111111;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.product-spec-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 12rpx;
|
||||
|
||||
.product-spec {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.product-num {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-total-row {
|
||||
text-align: right;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.product-total-text {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 2. 表单卡片 (退货信息 & 物流信息) */
|
||||
.form-card {
|
||||
.section-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.section-sub-tip {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
font-weight: normal;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 72rpx;
|
||||
|
||||
&.align-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
flex-shrink: 0;
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.info-val {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
|
||||
&.address-text {
|
||||
line-height: 38rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 72rpx;
|
||||
|
||||
.form-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 180rpx;
|
||||
|
||||
.required-asterisk {
|
||||
color: #FF4D4F;
|
||||
font-size: 28rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.select-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
|
||||
.select-value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-right: 12rpx;
|
||||
|
||||
&.placeholder {
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
|
||||
.dashed-arrow-box {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 1rpx dashed #C8C9CC;
|
||||
border-radius: 4rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 1;
|
||||
margin-top: -2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.row-divider {
|
||||
height: 1rpx;
|
||||
background-color: #F2F3F5;
|
||||
margin: 16rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-spacer {
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
/* 底部固定提交按钮 */
|
||||
.fixed-bottom-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
padding: 20rpx 32rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.03);
|
||||
z-index: 100;
|
||||
|
||||
.submit-btn {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #7934F6;
|
||||
border-radius: 16rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
border: none;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -33,7 +33,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card_list" v-if="product.status == 8">
|
||||
<view class="card_list" v-if="product.status == 8 || product.status == 4">
|
||||
<view class="list_left">未通过原因</view>
|
||||
<view>
|
||||
{{ product.auditRemark || "--" }}
|
||||
@@ -59,6 +59,11 @@
|
||||
<input class="input-express" type="text" :disabled="status != 2" placeholder="请填写快递单号"
|
||||
v-model="product.expressNo" />
|
||||
</view>
|
||||
<view class="card_list">
|
||||
<view class="list_left">物流说明</view>
|
||||
<view>{{ product.expressRemark || "--" }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -301,7 +306,7 @@ export default {
|
||||
} else if (this.status == 3) {
|
||||
return "您已成功发起退货/退款申请，请耐心等待处理";
|
||||
} else if (this.status == 4) {
|
||||
return "退款申请失败";
|
||||
return "退货申请失败";
|
||||
} else if (this.status == 5) {
|
||||
return "退款成功";
|
||||
} else if (this.status == 6) {
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<view>共{{ item.buyNum }}件,合计￥{{ item.sumAmount }}</view>
|
||||
</view> -->
|
||||
<view class="collect_msg" v-if="item.buyDeductionValue">共{{ item.buyNum }}件,合计数字积分{{ item.buyDeductionValue
|
||||
}}
|
||||
}}
|
||||
+￥{{ item.sumAmount }}</view>
|
||||
<view class="collect_msg" v-if="!item.buyDeductionValue">运费:￥{{ item.postage }},商品总价:￥{{ item.sumAmount }}
|
||||
</view>
|
||||
@@ -135,8 +135,8 @@
|
||||
|
||||
<!-- 修改地址按钮 (待发货/待收货状态) -->
|
||||
<view class="operate_comm operate_but_3" v-if="
|
||||
([MINE_ORDER_TYPE.UNSHIPPED, MINE_ORDER_TYPE.NOT_RECEIVE].includes(form.type) ||
|
||||
[ORDER_TYPE.UNSHIPPED, ORDER_TYPE.NOT_RECEIVE].includes(item.status)) && item.modifyShippingAddressStatus == 0
|
||||
([MINE_ORDER_TYPE.UNSHIPPED].includes(form.type) ||
|
||||
[ORDER_TYPE.UNSHIPPED].includes(item.status)) && item.modifyShippingAddressStatus == 0
|
||||
" @click="changeOrderAddress(item)">
|
||||
修改地址
|
||||
</view>
|
||||
@@ -153,7 +153,7 @@
|
||||
'operate_comm',
|
||||
'operate_but_1'
|
||||
]"
|
||||
v-if="(!item.isAfter && form.type !== MINE_ORDER_TYPE.UNPAID && form.type !== MINE_ORDER_TYPE.AFTER_SALE && item.status !== 5) || item.isAfterOpen"
|
||||
v-if="!item.isAfter && form.type !== MINE_ORDER_TYPE.UNPAID && form.type !== MINE_ORDER_TYPE.AFTER_SALE && item.status !== 5"
|
||||
@click="onSaleAfter(item)">
|
||||
申请售后
|
||||
</view>
|
||||
@@ -223,7 +223,8 @@
|
||||
联系售后
|
||||
<text class="after-sales-tabs-text">荐</text>
|
||||
</view>
|
||||
<view :class="['after-sales-tabs-item', { active: activeIndex === 1 }]" @click="activeIndex = 1">退货退款</view>
|
||||
<view :class="['after-sales-tabs-item', { active: activeIndex === 1 }]" @click="toApplyRefundPage">退货/退款
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content_" v-if="activeIndex === 0">
|
||||
@@ -417,6 +418,7 @@ export default {
|
||||
flowId: null,
|
||||
signUrl: null,
|
||||
downShow: false,
|
||||
tipsShow: false,
|
||||
selectItem: null,
|
||||
userInfo: null,
|
||||
search: "",
|
||||
@@ -574,18 +576,26 @@ export default {
|
||||
this.form.type == MINE_ORDER_TYPE.UNSHIPPED ? 1 : 2;
|
||||
}
|
||||
},
|
||||
toApplyRefundPage() {
|
||||
this.activeIndex = 1;
|
||||
this.afterShow = false;
|
||||
const orderId = this.aftterSalesProduct ? this.aftterSalesProduct.id : '';
|
||||
uni.navigateTo({
|
||||
url: `/pages/mine_package/apply_refund/apply_refund?id=${orderId}&orderData=${encodeURIComponent(JSON.stringify(this.aftterSalesProduct || {}))}`
|
||||
});
|
||||
},
|
||||
// 售后订单详情
|
||||
async onAfterSaleDetail(item) {
|
||||
// if (item.status === 8) {
|
||||
// this.$refs.uToastRef.show({
|
||||
// type: "success",
|
||||
// message: "订单已作废",
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
const { bizcode, data } = await afterSaleDetail({ id: item.afterId });
|
||||
if (bizcode == 100) {
|
||||
this.aftterSalesProduct = { ...data, ...{ afterId: item.afterId, status: item.status } };
|
||||
console.log("售后订单详情", this.aftterSalesProduct);
|
||||
if (this.aftterSalesProduct.afterType == 2 && this.aftterSalesProduct.status == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mine_package/fill_express/fill_express?afterData=${encodeURIComponent(JSON.stringify(this.aftterSalesProduct))}`
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.salesServer = 2;
|
||||
this.afterShow = true;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<up-popup
|
||||
:show="show"
|
||||
:round="20"
|
||||
:closeOnClickOverlay="false"
|
||||
:closeable="true"
|
||||
:safeAreaInsetBottom="false"
|
||||
<up-popup
|
||||
:show="show"
|
||||
mode="bottom"
|
||||
:round="20"
|
||||
:closeOnClickOverlay="true"
|
||||
:closeable="true"
|
||||
:safeAreaInsetBottom="true"
|
||||
@close="handleClose"
|
||||
>
|
||||
<view class="coupon-popup">
|
||||
@@ -14,13 +15,13 @@
|
||||
<text class="title">选择优惠券</text>
|
||||
</view>
|
||||
|
||||
<!-- 固定的切换标签 -->
|
||||
<!-- 固定的切换标签 (全部/可使用/不可用) -->
|
||||
<view class="tab-container">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="['tab-item', { active: activeTab === index }]"
|
||||
@click="activeTab = index"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
<text class="tab-text">{{ tab.name }}</text>
|
||||
<view class="active-line" v-if="activeTab === index"></view>
|
||||
@@ -28,28 +29,24 @@
|
||||
</view>
|
||||
|
||||
<!-- 可上下滚动的优惠券列表区域 -->
|
||||
<scroll-view
|
||||
class="coupon-scroll"
|
||||
scroll-y
|
||||
:enhanced="true"
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<view class="coupon-list">
|
||||
<view
|
||||
<scroll-view class="coupon-scroll" scroll-y :enhanced="true" :show-scrollbar="false">
|
||||
<view class="coupon-list" v-if="displayCoupons.length > 0">
|
||||
<view
|
||||
v-for="(coupon, index) in displayCoupons"
|
||||
:key="coupon.couponUserId || coupon.id || coupon.templateId || index"
|
||||
class="coupon-card"
|
||||
v-for="(coupon, index) in filteredCoupons"
|
||||
:key="index"
|
||||
:class="{ 'disabled': coupon.status === 'expired' }"
|
||||
:class="{ 'card-disabled': !isAvailable(coupon), 'card-selected': isSelected(coupon) }"
|
||||
@click="isAvailable(coupon) && toggleSelect(coupon)"
|
||||
>
|
||||
<!-- 左侧：金额与门槛 -->
|
||||
<view class="card-left">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ coupon.amount }}</text>
|
||||
<text class="amount">{{ getDiscountAmount(coupon) }}</text>
|
||||
</view>
|
||||
<text class="condition">{{ coupon.condition }}</text>
|
||||
<text class="condition">{{ getThresholdText(coupon) }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<view class="notch top-notch"></view>
|
||||
@@ -57,29 +54,49 @@
|
||||
<view class="notch bottom-notch"></view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：详细内容 -->
|
||||
<!-- 右侧：详细内容与单选框 -->
|
||||
<view class="card-right">
|
||||
<view class="info-content">
|
||||
<view class="title">{{ coupon.title }}</view>
|
||||
<view class="description">{{ coupon.description }}</view>
|
||||
|
||||
<!-- 状态/倒计时文本 -->
|
||||
<view v-if="coupon.status === 'active'" class="countdown">
|
||||
仅剩 {{ coupon.timeLeft }}
|
||||
<view class="coupon-title">{{ coupon.title || '优惠券' }}</view>
|
||||
<view class="tag-row">
|
||||
<text class="coupon-tag" :class="{ 'tag-disabled': !isAvailable(coupon) }">
|
||||
{{ getTagText(coupon) }}
|
||||
</text>
|
||||
<text class="coupon-scope">{{ getScopeText(coupon) }}</text>
|
||||
</view>
|
||||
<view v-else class="expired-text">
|
||||
已失效
|
||||
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
|
||||
<view class="unavailable-reason" v-if="!isAvailable(coupon)">
|
||||
{{ getUnavailableReason(coupon) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 按钮：仅在有效状态下显示 -->
|
||||
<view v-if="coupon.status === 'active'" class="use-btn" @click="useCoupon(coupon)">
|
||||
使用
|
||||
|
||||
<!-- 右侧操作区：可使用状态下展示单选框 (Radio Button) -->
|
||||
<view class="action-box">
|
||||
<view v-if="isAvailable(coupon)" class="radio-wrap" @click.stop="toggleSelect(coupon)">
|
||||
<view class="radio-circle" :class="{ 'checked': isSelected(coupon) }">
|
||||
<text class="check-icon" v-if="isSelected(coupon)">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="disabled-tag-text">
|
||||
不可用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表为空的缺省视图 -->
|
||||
<view class="empty-wrap" v-else-if="!isLoading">
|
||||
<text class="empty-text">暂无相关优惠券</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部不使用优惠券按钮 (方便取消选择) -->
|
||||
<view class="popup-footer" v-if="coupons && coupons.length > 0">
|
||||
<view class="no-use-btn" @click="noUseCoupon">
|
||||
不使用优惠券
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
@@ -93,55 +110,131 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
goodsId: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
coupons: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
orderAmount: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
selectedCoupon: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
tabs: [
|
||||
{ name: "全部", value: "all" },
|
||||
{ name: "可使用", value: "active" },
|
||||
{ name: "已失效", value: "expired" },
|
||||
],
|
||||
coupons: [
|
||||
{
|
||||
amount: 12,
|
||||
condition: "无门槛",
|
||||
title: "限时秒杀优惠券",
|
||||
description: "云南白药牙膏儿膏儿膏儿...",
|
||||
timeLeft: "14:20:55",
|
||||
status: "active"
|
||||
},
|
||||
{
|
||||
amount: 12,
|
||||
condition: "无门槛",
|
||||
title: "限时秒杀优惠券",
|
||||
description: "云南白药牙膏儿膏儿膏儿...",
|
||||
timeLeft: "14:20:55",
|
||||
status: "active"
|
||||
},
|
||||
{ name: "全部", value: "" },
|
||||
{ name: "可使用", value: 1 },
|
||||
{ name: "不可用", value: 2 },
|
||||
],
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredCoupons() {
|
||||
if (this.activeTab === 0) {
|
||||
return this.coupons;
|
||||
} else if (this.activeTab === 1) {
|
||||
return this.coupons.filter(c => c.status === 'active');
|
||||
} else if (this.activeTab === 2) {
|
||||
return [];
|
||||
} else {
|
||||
return this.coupons.filter(c => c.status === 'expired');
|
||||
displayCoupons() {
|
||||
if (this.activeTab === 1) {
|
||||
return this.coupons.filter((coupon) => this.isAvailable(coupon));
|
||||
}
|
||||
}
|
||||
if (this.activeTab === 2) {
|
||||
return this.coupons.filter((coupon) => !this.isAvailable(coupon));
|
||||
}
|
||||
return this.coupons;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
this.activeTab = index;
|
||||
},
|
||||
isAvailable(coupon) {
|
||||
if (coupon.canUse === false) return false;
|
||||
if (coupon.available === false) return false;
|
||||
if (coupon.receiveStatus === 2) return false;
|
||||
if (coupon.status === 2 || coupon.status === 3 || coupon.status === 4) return false;
|
||||
return Number(this.orderAmount || 0) >= Number(coupon.thresholdAmount || 0);
|
||||
},
|
||||
isSelected(coupon) {
|
||||
if (!this.selectedCoupon) return false;
|
||||
const curId = coupon.couponUserId || coupon.id || coupon.templateId;
|
||||
const selId = this.selectedCoupon.couponUserId || this.selectedCoupon.id || this.selectedCoupon.templateId;
|
||||
return curId && selId && String(curId) === String(selId);
|
||||
},
|
||||
toggleSelect(coupon) {
|
||||
if (this.isSelected(coupon)) {
|
||||
this.$emit("select", null);
|
||||
} else {
|
||||
this.$emit("select", coupon);
|
||||
}
|
||||
this.handleClose();
|
||||
},
|
||||
noUseCoupon() {
|
||||
this.$emit("select", null);
|
||||
this.handleClose();
|
||||
},
|
||||
handleClose() {
|
||||
this.$emit("close");
|
||||
},
|
||||
useCoupon(coupon) {
|
||||
this.$emit("select", coupon);
|
||||
this.$emit("close");
|
||||
// 格式化辅助函数
|
||||
getDiscountAmount(coupon) {
|
||||
return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
|
||||
},
|
||||
getThresholdText(coupon) {
|
||||
const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
|
||||
if (threshold === 0) {
|
||||
return "无门槛";
|
||||
}
|
||||
return `满${threshold}元可用`;
|
||||
},
|
||||
getTagText(coupon) {
|
||||
if (coupon.scopeType === 1) return "通用券";
|
||||
if (coupon.scopeType === 2) return "商品券";
|
||||
if (coupon.scopeType === 3 || coupon.scopeType === 4) return "品类券";
|
||||
if (coupon.scopeText && coupon.scopeText.includes("通用")) return "通用券";
|
||||
return "通用券";
|
||||
},
|
||||
getScopeText(coupon) {
|
||||
if (coupon.scopeText) return coupon.scopeText;
|
||||
if (coupon.scopeType === 1) return "所有商品可用";
|
||||
if (coupon.scopeType === 2) return "指定商品可用";
|
||||
if (coupon.scopeType === 3) return "指定类目可用";
|
||||
if (coupon.scopeType === 4) return "指定专区商品可用";
|
||||
return "所有商品可用";
|
||||
},
|
||||
getValidityText(coupon) {
|
||||
if (coupon.useEndTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
|
||||
}
|
||||
if (coupon.endTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.endTime)}`;
|
||||
}
|
||||
if (coupon.validDays && coupon.validDays > 0) {
|
||||
return `领取之日起${coupon.validDays}天内有效`;
|
||||
}
|
||||
return "长期有效";
|
||||
},
|
||||
getUnavailableReason(coupon) {
|
||||
const threshold = Number(coupon.thresholdAmount || 0);
|
||||
if (Number(this.orderAmount || 0) < threshold) {
|
||||
return `订单金额未满${threshold}元`;
|
||||
}
|
||||
return coupon.unavailableReason || "该优惠券不适用于当前订单";
|
||||
},
|
||||
formatTime(time) {
|
||||
if (!time) return "";
|
||||
if (typeof time === "string" && time.includes("-")) return time;
|
||||
const date = new Date(Number(time));
|
||||
if (isNaN(date.getTime())) return String(time);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
return `${y}-${m}-${d}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -149,11 +242,12 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon-popup {
|
||||
height: 85vh;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
height: 75vh;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
@@ -161,10 +255,9 @@ export default {
|
||||
font-size: 32rpx;
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
padding: 30rpx 0;
|
||||
font-weight: bold;
|
||||
padding: 30rpx 0 20rpx 0;
|
||||
position: relative;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
@@ -173,9 +266,10 @@ export default {
|
||||
background-color: #ffffff;
|
||||
height: 88rpx;
|
||||
align-items: center;
|
||||
padding-left: 28rpx;
|
||||
padding-left: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx solid #f6f6f6;
|
||||
border-top: 1rpx solid #f6f6f6;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.tab-item {
|
||||
margin-right: 48rpx;
|
||||
@@ -189,24 +283,24 @@ export default {
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #7f7f7f;
|
||||
transition: all 0.2s ease;
|
||||
color: #666666;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-text {
|
||||
color: #7A35F6;
|
||||
color: #7a35f6;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.active-line {
|
||||
position: absolute;
|
||||
bottom: 4rpx;
|
||||
bottom: 6rpx;
|
||||
width: 44rpx;
|
||||
height: 4rpx;
|
||||
background-color: #7A35F6;
|
||||
border-radius: 2rpx;
|
||||
height: 6rpx;
|
||||
background-color: #7a35f6;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -214,170 +308,267 @@ export default {
|
||||
.coupon-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding: 24rpx 24rpx 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
padding: 28rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
background: rgba(102,102,102,0.06);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
height: 196rpx;
|
||||
position: relative;
|
||||
/* 高保真优惠券卡片样式 */
|
||||
.coupon-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(253, 28, 36, 0.06);
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&.card-selected {
|
||||
/* 不加外边框 */
|
||||
}
|
||||
|
||||
&.card-disabled {
|
||||
background: #f5f5f5 !important;
|
||||
border-color: transparent !important;
|
||||
|
||||
.card-left {
|
||||
width: 190rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #ff1224;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.currency {
|
||||
font-size: 32rpx;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 64rpx;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
color: #a0a0a0 !important;
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff1224;
|
||||
margin-top: 10rpx;
|
||||
color: #999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.divider-wrapper {
|
||||
width: 2rpx;
|
||||
position: relative;
|
||||
margin: 10rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.divider-line {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed rgba(253,28,36,0.3);
|
||||
}
|
||||
|
||||
.notch {
|
||||
position: absolute;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.top-notch {
|
||||
top: -18rpx;
|
||||
}
|
||||
.bottom-notch {
|
||||
bottom: -18rpx;
|
||||
}
|
||||
.coupon-title {
|
||||
color: #333333 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-right {
|
||||
flex: 1;
|
||||
padding: 26rpx 24rpx 24rpx 36rpx;
|
||||
.card-left {
|
||||
width: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
align-items: baseline;
|
||||
color: #ff2442;
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #2c2c2c;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 28rpx;
|
||||
color: #6a6a6a;
|
||||
margin-top: 8rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 24rpx;
|
||||
color: #ff5260;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.use-btn {
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background-color: #FD1C24;
|
||||
color: #ffffff;
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 60rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff2442;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.divider-wrapper {
|
||||
position: relative;
|
||||
width: 2rpx;
|
||||
align-self: stretch;
|
||||
|
||||
.divider-line {
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed #fca5a5;
|
||||
}
|
||||
|
||||
.notch {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-notch {
|
||||
top: -12rpx;
|
||||
}
|
||||
|
||||
.bottom-notch {
|
||||
bottom: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-disabled .divider-line {
|
||||
border-left: 2rpx dashed #dddddd !important;
|
||||
}
|
||||
|
||||
.card-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 20rpx 24rpx;
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.coupon-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
.coupon-tag {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
color: #ff2442;
|
||||
background: #ffe4e6;
|
||||
border: 1px solid #ff99a4;
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&.tag-disabled {
|
||||
color: #888888 !important;
|
||||
background: #eeeeee !important;
|
||||
border: 1px solid #cccccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-scope {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-validity {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.unavailable-reason {
|
||||
font-size: 20rpx;
|
||||
color: #ff4d4f;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: #f4f4f4;
|
||||
.action-box {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-right: 8rpx;
|
||||
|
||||
.card-left {
|
||||
.price-box { color: #9c9c9c; }
|
||||
.condition { color: #9c9c9c; }
|
||||
/* 单选框 (Radio Button) 高保真样式 */
|
||||
.radio-wrap {
|
||||
padding: 10rpx;
|
||||
|
||||
.radio-circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #cccccc;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.checked {
|
||||
background-color: #7a35f6;
|
||||
border-color: #7a35f6;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider-wrapper {
|
||||
.divider-line { border-left-color: #e2e2e2; }
|
||||
}
|
||||
|
||||
.card-right {
|
||||
.info-content {
|
||||
.title { color: #2c2c2c; }
|
||||
.description { color: #9c9c9c; }
|
||||
}
|
||||
.expired-text {
|
||||
font-size: 22rpx;
|
||||
color: #bcbcbc;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
.disabled-tag-text {
|
||||
font-size: 24rpx;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.empty-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
padding: 20rpx 32rpx 30rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
.no-use-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 40rpx;
|
||||
|
||||
&:active {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,593 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<up-popup
|
||||
:show="show"
|
||||
mode="bottom"
|
||||
:round="20"
|
||||
:closeOnClickOverlay="true"
|
||||
:closeable="true"
|
||||
:safeAreaInsetBottom="true"
|
||||
@close="handleClose"
|
||||
>
|
||||
<view class="coupon-popup">
|
||||
<!-- 固定的标题头部 -->
|
||||
<view class="popup-header">
|
||||
<text class="title">选择优惠券</text>
|
||||
</view>
|
||||
|
||||
<!-- 固定的切换标签 (全部/可使用/不可用) -->
|
||||
<view class="tab-container">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="['tab-item', { active: activeTab === index }]"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
<text class="tab-text">{{ tab.name }}</text>
|
||||
<view class="active-line" v-if="activeTab === index"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 可上下滚动的优惠券列表区域 -->
|
||||
<scroll-view class="coupon-scroll" scroll-y :enhanced="true" :show-scrollbar="false">
|
||||
<view class="coupon-list" v-if="couponList && couponList.length > 0">
|
||||
<view
|
||||
v-for="(coupon, index) in couponList"
|
||||
:key="coupon.templateId || coupon.couponUserId || coupon.id || index"
|
||||
class="coupon-card"
|
||||
:class="{ 'card-disabled': !isAvailable(coupon), 'card-selected': isSelected(coupon) }"
|
||||
@click="isAvailable(coupon) && toggleSelect(coupon)"
|
||||
>
|
||||
<!-- 左侧：金额与门槛 -->
|
||||
<view class="card-left">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ getDiscountAmount(coupon) }}</text>
|
||||
</view>
|
||||
<text class="condition">{{ getThresholdText(coupon) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<view class="notch top-notch"></view>
|
||||
<view class="divider-line"></view>
|
||||
<view class="notch bottom-notch"></view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：详细内容与单选框 -->
|
||||
<view class="card-right">
|
||||
<view class="info-content">
|
||||
<view class="coupon-title">{{ coupon.title || '优惠券' }}</view>
|
||||
<view class="tag-row">
|
||||
<text class="coupon-tag" :class="{ 'tag-disabled': !isAvailable(coupon) }">
|
||||
{{ getTagText(coupon) }}
|
||||
</text>
|
||||
<text class="coupon-scope">{{ getScopeText(coupon) }}</text>
|
||||
</view>
|
||||
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
|
||||
<view class="unavailable-reason" v-if="!isAvailable(coupon) && coupon.unavailableReason">
|
||||
{{ coupon.unavailableReason }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧操作区：可使用状态下展示单选框 (Radio Button) -->
|
||||
<view class="action-box">
|
||||
<view v-if="isAvailable(coupon)" class="radio-wrap" @click.stop="toggleSelect(coupon)">
|
||||
<view class="radio-circle" :class="{ 'checked': isSelected(coupon) }">
|
||||
<text class="check-icon" v-if="isSelected(coupon)">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="disabled-tag-text">
|
||||
不可用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表为空的缺省视图 -->
|
||||
<view class="empty-wrap" v-else-if="!isLoading">
|
||||
<text class="empty-text">暂无相关优惠券</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部不使用优惠券按钮 (方便取消选择) -->
|
||||
<view class="popup-footer" v-if="couponList && couponList.length > 0">
|
||||
<view class="no-use-btn" @click="noUseCoupon">
|
||||
不使用优惠券
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGoodsCouponList } from "@/api/coupon.js";
|
||||
|
||||
export default {
|
||||
name: "CouponDialog",
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
goodsId: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
selectedCoupon: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
tabs: [
|
||||
{ name: "全部", value: "" },
|
||||
{ name: "可使用", value: 1 },
|
||||
{ name: "不可用", value: 2 },
|
||||
],
|
||||
couponList: [],
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.fetchCoupons();
|
||||
}
|
||||
},
|
||||
},
|
||||
goodsId() {
|
||||
if (this.show) {
|
||||
this.fetchCoupons();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
if (this.activeTab !== index) {
|
||||
this.activeTab = index;
|
||||
this.fetchCoupons();
|
||||
}
|
||||
},
|
||||
async fetchCoupons() {
|
||||
this.isLoading = true;
|
||||
try {
|
||||
const tabValue = this.tabs[this.activeTab].value;
|
||||
const params = {};
|
||||
if (this.goodsId) {
|
||||
params.goodsId = this.goodsId;
|
||||
}
|
||||
if (tabValue !== "" && tabValue !== undefined) {
|
||||
params.receiveStatus = tabValue;
|
||||
}
|
||||
|
||||
const res = await getGoodsCouponList(params);
|
||||
if (res && res.bizcode === 100) {
|
||||
this.couponList = res.data || [];
|
||||
} else {
|
||||
this.couponList = [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("获取结算页优惠券列表失败:", e);
|
||||
this.couponList = [];
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
isAvailable(coupon) {
|
||||
if (coupon.canUse === false) return false;
|
||||
if (coupon.receiveStatus === 2) return false;
|
||||
if (coupon.status === 2 || coupon.status === 3 || coupon.status === 4) return false;
|
||||
return true;
|
||||
},
|
||||
isSelected(coupon) {
|
||||
if (!this.selectedCoupon) return false;
|
||||
const curId = coupon.templateId || coupon.couponUserId || coupon.id;
|
||||
const selId = this.selectedCoupon.templateId || this.selectedCoupon.couponUserId || this.selectedCoupon.id;
|
||||
return curId && selId && String(curId) === String(selId);
|
||||
},
|
||||
toggleSelect(coupon) {
|
||||
if (this.isSelected(coupon)) {
|
||||
this.$emit("select", null);
|
||||
} else {
|
||||
this.$emit("select", coupon);
|
||||
}
|
||||
this.handleClose();
|
||||
},
|
||||
noUseCoupon() {
|
||||
this.$emit("select", null);
|
||||
this.handleClose();
|
||||
},
|
||||
handleClose() {
|
||||
this.$emit("close");
|
||||
},
|
||||
// 格式化辅助函数
|
||||
getDiscountAmount(coupon) {
|
||||
return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
|
||||
},
|
||||
getThresholdText(coupon) {
|
||||
const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
|
||||
if (threshold === 0) {
|
||||
return "无门槛";
|
||||
}
|
||||
return `满${threshold}元可用`;
|
||||
},
|
||||
getTagText(coupon) {
|
||||
if (coupon.scopeType === 1) return "通用券";
|
||||
if (coupon.scopeType === 2) return "商品券";
|
||||
if (coupon.scopeType === 3 || coupon.scopeType === 4) return "品类券";
|
||||
if (coupon.scopeText && coupon.scopeText.includes("通用")) return "通用券";
|
||||
return "通用券";
|
||||
},
|
||||
getScopeText(coupon) {
|
||||
if (coupon.scopeText) return coupon.scopeText;
|
||||
if (coupon.scopeType === 1) return "所有商品可用";
|
||||
if (coupon.scopeType === 2) return "指定商品可用";
|
||||
if (coupon.scopeType === 3) return "指定类目可用";
|
||||
if (coupon.scopeType === 4) return "指定专区商品可用";
|
||||
return "所有商品可用";
|
||||
},
|
||||
getValidityText(coupon) {
|
||||
if (coupon.useEndTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
|
||||
}
|
||||
if (coupon.endTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.endTime)}`;
|
||||
}
|
||||
if (coupon.validDays && coupon.validDays > 0) {
|
||||
return `领取之日起${coupon.validDays}天内有效`;
|
||||
}
|
||||
return "长期有效";
|
||||
},
|
||||
formatTime(time) {
|
||||
if (!time) return "";
|
||||
if (typeof time === "string" && time.includes("-")) return time;
|
||||
const date = new Date(Number(time));
|
||||
if (isNaN(date.getTime())) return String(time);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
return `${y}-${m}-${d}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon-popup {
|
||||
height: 75vh;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
padding: 30rpx 0 20rpx 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
height: 88rpx;
|
||||
align-items: center;
|
||||
padding-left: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-top: 1rpx solid #f6f6f6;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.tab-item {
|
||||
margin-right: 48rpx;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-text {
|
||||
color: #7a35f6;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.active-line {
|
||||
position: absolute;
|
||||
bottom: 6rpx;
|
||||
width: 44rpx;
|
||||
height: 6rpx;
|
||||
background-color: #7a35f6;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 24rpx 24rpx 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 高保真优惠券卡片样式 */
|
||||
.coupon-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(253, 28, 36, 0.06);
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&.card-selected {
|
||||
/* 不加外边框 */
|
||||
}
|
||||
|
||||
&.card-disabled {
|
||||
background: #f5f5f5 !important;
|
||||
border-color: transparent !important;
|
||||
|
||||
.card-left {
|
||||
.price-box {
|
||||
color: #a0a0a0 !important;
|
||||
}
|
||||
.condition {
|
||||
color: #999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
color: #333333 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-left {
|
||||
width: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #ff2442;
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 60rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff2442;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.divider-wrapper {
|
||||
position: relative;
|
||||
width: 2rpx;
|
||||
align-self: stretch;
|
||||
|
||||
.divider-line {
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed #fca5a5;
|
||||
}
|
||||
|
||||
.notch {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-notch {
|
||||
top: -12rpx;
|
||||
}
|
||||
|
||||
.bottom-notch {
|
||||
bottom: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-disabled .divider-line {
|
||||
border-left: 2rpx dashed #dddddd !important;
|
||||
}
|
||||
|
||||
.card-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 20rpx 24rpx;
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.coupon-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.coupon-tag {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
color: #ff2442;
|
||||
background: #ffe4e6;
|
||||
border: 1px solid #ff99a4;
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&.tag-disabled {
|
||||
color: #888888 !important;
|
||||
background: #eeeeee !important;
|
||||
border: 1px solid #cccccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-scope {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-validity {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.unavailable-reason {
|
||||
font-size: 20rpx;
|
||||
color: #ff4d4f;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.action-box {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-right: 8rpx;
|
||||
|
||||
/* 单选框 (Radio Button) 高保真样式 */
|
||||
.radio-wrap {
|
||||
padding: 10rpx;
|
||||
|
||||
.radio-circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #cccccc;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.checked {
|
||||
background-color: #7a35f6;
|
||||
border-color: #7a35f6;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled-tag-text {
|
||||
font-size: 24rpx;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
padding: 20rpx 32rpx 30rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
.no-use-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 40rpx;
|
||||
|
||||
&:active {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -60,7 +60,7 @@
|
||||
<view class="content_right_total">
|
||||
<view>￥<text style="font-size: 36rpx">{{
|
||||
pItem.totalPrice
|
||||
}}</text></view>
|
||||
}}</text></view>
|
||||
<view>每件到手价￥{{ pItem.unitPrice }}</view>
|
||||
</view>
|
||||
<view class="shopping_info_quantity">
|
||||
@@ -84,7 +84,7 @@
|
||||
<view class="content_right_total">
|
||||
<view>￥<text style="font-size: 36rpx">{{
|
||||
pItem.totalPrice
|
||||
}}</text></view>
|
||||
}}</text></view>
|
||||
<view>每件到手价￥{{ pItem.unitPrice }}</view>
|
||||
</view>
|
||||
<view class="shopping_info_quantity">
|
||||
@@ -108,7 +108,7 @@
|
||||
<view class="order_freight_item">
|
||||
<view>运费<text style="color: #c0c3c6; margin-left: 20rpx">{{
|
||||
getValue(PRODUCT_DELIVERY_TIME, addItem.deliveryTime)
|
||||
}}</text></view>
|
||||
}}</text></view>
|
||||
<view class="value_">
|
||||
{{ orderInfo.postage ? "￥" + orderInfo.postage : "包邮" }}
|
||||
</view>
|
||||
@@ -144,28 +144,6 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order_way_warp_two">
|
||||
<text class="text-32 text-zu">支付方式</text>
|
||||
<up-radio-group v-model="orderInfo.paymentMethod" placement="column">
|
||||
<view v-for="(item, index) in wayOption" :key="item.id" class="way-option" :style="{
|
||||
borderWidth: wayOption.length - 1 == index ? '0rpx' : '2rpx',
|
||||
}">
|
||||
<view class="way-option-item">
|
||||
<image v-if="item.type == 'wechat'" src="https://static.tbmall.xin/static/new/wx.png"></image>
|
||||
<image v-if="item.type == 'alipay'" src="https://static.tbmall.xin/static/new/zfb.png"></image>
|
||||
<image v-if="item.type == 'balance'" src="https://static.tbmall.xin/static/new/bank.png"></image>
|
||||
<image v-if="item.type == 'redpacket'" src="https://static.tbmall.xin/static/new/jf.png"></image>
|
||||
<text v-if="item.type == 'wechat' || item.type == 'alipay'" class="text-32 text-zu"
|
||||
style="margin-left: 20rpx">{{ item.name }}</text>
|
||||
<text v-else style="margin-left: 20rpx" class="text-32 text-zu">{{ item.name }}
|
||||
<text style="color: #999; margin: 0 10rpx">可用:</text>
|
||||
{{ item.balance }}
|
||||
</text>
|
||||
</view>
|
||||
<up-radio :name="item.type" activeColor="#7934F6"> </up-radio>
|
||||
</view>
|
||||
</up-radio-group>
|
||||
</view>
|
||||
<view class="order_way_warp_two">
|
||||
<view class="price-view">
|
||||
<text class="text-32 text-zu">商品总价</text>
|
||||
@@ -173,29 +151,39 @@
|
||||
{{
|
||||
`${buyCouponvalue}数字积分+${orderInfo.amount -
|
||||
(orderInfo.postage || 0) +
|
||||
(orderInfo.enterpriseAmount || 0)
|
||||
(orderInfo.enterpriseAmount || 0) + (orderInfo.couponDiscount || 0)
|
||||
}元`
|
||||
}}
|
||||
</text>
|
||||
<text class="text-32 text-zu text-bold" v-else>￥{{
|
||||
orderInfo.amount -
|
||||
orderInfo.postage +
|
||||
(orderInfo.enterpriseAmount || 0)
|
||||
(orderInfo.amountBeforeCoupon != null
|
||||
? orderInfo.amountBeforeCoupon
|
||||
: Number(orderInfo.amount || 0) + Number(orderInfo.couponDiscount || 0)) -
|
||||
Number(orderInfo.postage || 0) +
|
||||
Number(orderInfo.enterpriseAmount || 0)
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="price-view">
|
||||
<text class="text-32 text-zu">运费</text>
|
||||
<text class="text-32 text-zu text-bold">￥{{ orderInfo.postage }}</text>
|
||||
</view>
|
||||
<!-- <view class="price-view" @click="couponShow = true">
|
||||
|
||||
<view class="price-view" @click="couponShow = true" v-if="!isCoupon">
|
||||
<text class="text-32 text-zu">优惠券</text>
|
||||
<view style="display: flex; align-items: center;">
|
||||
<view class="text-24 " style="margin-right:4rpx;color:#999;">{{ selectedCoupon ? `-${selectedCoupon.amount}` :
|
||||
'请选择' }}</view>
|
||||
<view style="display: flex; align-items: center; max-width: 480rpx;">
|
||||
<template v-if="selectedCoupon">
|
||||
<view class="preview_coupon_tag">
|
||||
{{ selectedCoupon.title || selectedCoupon.name || '优惠券' }}
|
||||
</view>
|
||||
<text class="preview_coupon_price">-¥{{ selectedCouponAmount }}</text>
|
||||
</template>
|
||||
<view v-else class="text-24" style="margin-right: 8rpx; color: #999;">
|
||||
请选择
|
||||
</view>
|
||||
<up-image src="/static/common/right.png" width="12" height="12" bgColor="#f1f6ff00"
|
||||
style="display:inline-block;vertical-align: middle;"></up-image>
|
||||
style="display:inline-block;vertical-align: middle; flex-shrink: 0;"></up-image>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="price-view" v-if="this.sed?.activedType == 'seckill' && allOrderInfo.activity?.activityPrice">
|
||||
<text class="text-32 text-zu">秒杀价</text>
|
||||
<view style="display: flex; align-items: center;">
|
||||
@@ -218,6 +206,31 @@
|
||||
<text class="text-32 text-zi text-bold">￥{{ orderInfo.amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order_way_warp_two">
|
||||
<text class="text-32 text-zu">支付方式</text>
|
||||
<up-radio-group v-model="orderInfo.paymentMethod" placement="column">
|
||||
<view v-for="(item, index) in wayOption" :key="item.id" class="way-option" :style="{
|
||||
borderWidth: wayOption.length - 1 == index ? '0rpx' : '2rpx',
|
||||
}">
|
||||
<view class="way-option-item">
|
||||
<image v-if="item.type == 'wechat'" src="https://static.tbmall.xin/static/new/wx.png"></image>
|
||||
<image v-if="item.type == 'alipay'" src="https://static.tbmall.xin/static/new/zfb.png"></image>
|
||||
<image v-if="item.type == 'balance'" src="https://static.tbmall.xin/static/new/bank.png"></image>
|
||||
<image v-if="item.type == 'redpacket'" src="https://static.tbmall.xin/static/new/jf.png"></image>
|
||||
<text v-if="item.type == 'wechat' || item.type == 'alipay'" class="text-32 text-zu"
|
||||
style="margin-left: 20rpx">{{ item.name }}</text>
|
||||
<text v-else style="margin-left: 20rpx" class="text-32 text-zu">{{ item.name }}
|
||||
<text style="color: #999; margin: 0 10rpx">可用:</text>
|
||||
{{ item.balance }}
|
||||
</text>
|
||||
</view>
|
||||
<up-radio :name="item.type" activeColor="#7934F6"> </up-radio>
|
||||
</view>
|
||||
</up-radio-group>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 去支付的固定按钮 -->
|
||||
<view class="order_pay_but">
|
||||
<view class="price_">
|
||||
@@ -292,10 +305,13 @@
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
|
||||
<!-- 优惠券选择弹框 -->
|
||||
<CouponDialog :show="couponShow" v-if="couponShow" @close="couponShow = false" @select="handleCouponSelect">
|
||||
<CouponDialog :show="couponShow" :goodsId="goodsId" :selectedCoupon="selectedCoupon"
|
||||
:coupons="orderInfo.allCoupons || orderInfo.availableCoupons || []"
|
||||
:orderAmount="orderInfo.amountBeforeCoupon || (Number(orderInfo.amount || 0) + Number(orderInfo.couponDiscount || 0))"
|
||||
v-if="couponShow" @close="couponShow = false" @select="handleCouponSelect">
|
||||
</CouponDialog>
|
||||
<qiaobao-assistant page-key="pages/order_package/order_submit/order_submit" title="确认订单" />
|
||||
</view>
|
||||
<qiaobao-assistant page-key="pages/order_package/order_submit/order_submit" title="确认订单" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -309,6 +325,7 @@ import {
|
||||
} from "@/utils/enumUtils.js";
|
||||
import {
|
||||
getSettleList,
|
||||
getDirectSettleList,
|
||||
settle,
|
||||
settlementOrder,
|
||||
updateGoodsNum,
|
||||
@@ -338,6 +355,21 @@ export default {
|
||||
PRODUCT_DELIVERY_TIME() {
|
||||
return PRODUCT_DELIVERY_TIME;
|
||||
},
|
||||
goodsId() {
|
||||
if (this.sed && (this.sed.goodsId || this.sed.id)) {
|
||||
return this.sed.goodsId || this.sed.id;
|
||||
}
|
||||
if (this.orderInfo && this.orderInfo.shops && this.orderInfo.shops.length > 0) {
|
||||
const firstShop = this.orderInfo.shops[0];
|
||||
if (firstShop.addrTimes && firstShop.addrTimes.length > 0) {
|
||||
const firstTime = firstShop.addrTimes[0];
|
||||
if (firstTime.goods && firstTime.goods.length > 0) {
|
||||
return firstTime.goods[0].goodsId || firstTime.goods[0].id || firstTime.goods[0].prodId;
|
||||
}
|
||||
}
|
||||
}
|
||||
return this.ids || 0;
|
||||
},
|
||||
totleNum() {
|
||||
let num = 0;
|
||||
|
||||
@@ -354,6 +386,17 @@ export default {
|
||||
}
|
||||
return num;
|
||||
},
|
||||
selectedCouponAmount() {
|
||||
if (!this.selectedCoupon) return 0;
|
||||
if (this.orderInfo.couponDiscount != null) {
|
||||
return Number(this.orderInfo.couponDiscount) || 0;
|
||||
}
|
||||
const amt =
|
||||
this.selectedCoupon.discountAmount !== undefined
|
||||
? this.selectedCoupon.discountAmount
|
||||
: this.selectedCoupon.amount || 0;
|
||||
return Number(amt) || 0;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -395,6 +438,7 @@ export default {
|
||||
buyCouponAmount: 0, // 实付数字积分对应的钱
|
||||
couponShow: false, // 优惠券弹框显示
|
||||
selectedCoupon: null, // 选中的优惠券
|
||||
rawOrderAmount: 0, // 无优惠券时的原始订单总额
|
||||
};
|
||||
},
|
||||
async onLoad(option) {
|
||||
@@ -589,7 +633,7 @@ export default {
|
||||
console.log("getWayOption", this.wayOption);
|
||||
}
|
||||
},
|
||||
async getOrder() {
|
||||
async getOrder(couponUserId) {
|
||||
const ids = this.ids;
|
||||
if (!ids || ids === 0) {
|
||||
this.$refs.uToastRef.show({
|
||||
@@ -601,7 +645,7 @@ export default {
|
||||
url: "/pages/shopping_cart/shopping_cart",
|
||||
});
|
||||
}, 2000);
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
let address = null;
|
||||
if (this.defaultAddress) {
|
||||
@@ -621,6 +665,9 @@ export default {
|
||||
const params = {
|
||||
cartIds: ids,
|
||||
};
|
||||
if (couponUserId) {
|
||||
params.couponUserId = couponUserId;
|
||||
}
|
||||
if (address) {
|
||||
params["addrId"] = address.id;
|
||||
}
|
||||
@@ -637,9 +684,13 @@ export default {
|
||||
}
|
||||
data.shops = shops;
|
||||
data.paymentMethod = null; // 支付方式
|
||||
data.amountBeforeCoupon = Number(data.amount || 0) + Number(data.couponDiscount || 0);
|
||||
this.orderInfo = data;
|
||||
this.rawOrderAmount = Number(data.amountBeforeCoupon) || 0;
|
||||
console.log("orderInfoorderInfo", this.orderInfo);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
async getOrderTwo() {
|
||||
const params = {
|
||||
@@ -724,8 +775,12 @@ export default {
|
||||
}
|
||||
this.allOrderInfo = data;
|
||||
this.orderInfo.paymentMethod = null;
|
||||
this.rawOrderAmount = Number(this.orderInfo.amount) || 0;
|
||||
this.onBuyCouponvalue(this.sed.goodsNum || 1);
|
||||
this.onBuyCouponAmount();
|
||||
if (!this.isCoupon && this.sed?.activedType !== "seckill") {
|
||||
await this.refreshDirectSettle();
|
||||
}
|
||||
// if(this.addressListOne && this.addressListOne.length){
|
||||
// this.orderInfo.address = this.addressListOne[0];
|
||||
// }
|
||||
@@ -801,13 +856,24 @@ export default {
|
||||
].totalPrice = currentTotalPrice.toFixed(2);
|
||||
this.orderInfo.amount = currentAmount.toFixed(2);
|
||||
|
||||
if (this.isCoupon || this.sed) {
|
||||
if (this.isCoupon) {
|
||||
this.onBuyCouponvalue(currentQuantity);
|
||||
this.onBuyCouponAmount();
|
||||
return;
|
||||
}
|
||||
if (this.sed) {
|
||||
this.onBuyCouponvalue(currentQuantity);
|
||||
this.onBuyCouponAmount();
|
||||
if (this.sed?.activedType !== "seckill") {
|
||||
await this.refreshDirectSettle(this.getCouponUserId(this.selectedCoupon));
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const resp = await getSettleList({ cartIds: this.ids });
|
||||
const settleParams = { cartIds: this.ids };
|
||||
const couponUserId = this.getCouponUserId(this.selectedCoupon);
|
||||
if (couponUserId) settleParams.couponUserId = couponUserId;
|
||||
const resp = await getSettleList(settleParams);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data;
|
||||
const shops = data.shops;
|
||||
@@ -820,7 +886,9 @@ export default {
|
||||
}
|
||||
data.shops = shops;
|
||||
data.paymentMethod = null; // 支付方式
|
||||
data.amountBeforeCoupon = Number(data.amount || 0) + Number(data.couponDiscount || 0);
|
||||
this.orderInfo = data;
|
||||
this.rawOrderAmount = Number(data.amountBeforeCoupon) || 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -965,6 +1033,9 @@ export default {
|
||||
) {
|
||||
params["password"] = CryptoJS.MD5(this.payPwd).toString();
|
||||
}
|
||||
if (this.selectedCoupon) {
|
||||
params["couponUserId"] = this.getCouponUserId(this.selectedCoupon);
|
||||
}
|
||||
resp = await settle(params);
|
||||
}
|
||||
|
||||
@@ -978,6 +1049,9 @@ export default {
|
||||
) {
|
||||
params["password"] = CryptoJS.MD5(this.payPwd).toString();
|
||||
}
|
||||
if (this.selectedCoupon) {
|
||||
params["couponUserId"] = this.getCouponUserId(this.selectedCoupon);
|
||||
}
|
||||
resp = await settle(params);
|
||||
}
|
||||
|
||||
@@ -1054,6 +1128,10 @@ export default {
|
||||
cartIds: this.ids,
|
||||
addrId: this.selectAddress.id,
|
||||
};
|
||||
const couponUserId = this.getCouponUserId(this.selectedCoupon);
|
||||
if (couponUserId) {
|
||||
params.couponUserId = couponUserId;
|
||||
}
|
||||
const resp = await getSettleList(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data;
|
||||
@@ -1067,7 +1145,9 @@ export default {
|
||||
}
|
||||
data.shops = shops;
|
||||
data.paymentMethod = null;
|
||||
data.amountBeforeCoupon = Number(data.amount || 0) + Number(data.couponDiscount || 0);
|
||||
this.orderInfo = data;
|
||||
this.rawOrderAmount = Number(data.amountBeforeCoupon) || 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -1083,9 +1163,54 @@ export default {
|
||||
url: "/pages/other_package/productInfo/productInfo?id=" + item.goodsId,
|
||||
});
|
||||
},
|
||||
handleCouponSelect(coupon) {
|
||||
async handleCouponSelect(coupon) {
|
||||
const couponUserId = this.getCouponUserId(coupon);
|
||||
if (coupon && !couponUserId) {
|
||||
this.$refs.uToastRef.show({ type: "error", message: "优惠券信息无效，请刷新后重试" });
|
||||
return;
|
||||
}
|
||||
const threshold = Number(coupon?.thresholdAmount || 0);
|
||||
const orderAmount = Number(this.orderInfo.amountBeforeCoupon || this.rawOrderAmount || this.orderInfo.amount || 0);
|
||||
if (coupon && orderAmount < threshold) {
|
||||
this.$refs.uToastRef.show({ type: "error", message: `订单金额未满${threshold}元，该优惠券不可用` });
|
||||
return;
|
||||
}
|
||||
|
||||
let settled = false;
|
||||
if (this.sed) {
|
||||
settled = await this.refreshDirectSettle(couponUserId);
|
||||
} else {
|
||||
settled = await this.getOrder(couponUserId);
|
||||
}
|
||||
if (settled === false) return;
|
||||
this.selectedCoupon = coupon;
|
||||
},
|
||||
async refreshDirectSettle(couponUserId) {
|
||||
if (!this.sed || !this.sed.specsId) return false;
|
||||
const resp = await getDirectSettleList({
|
||||
goodsId: this.sed.id,
|
||||
specsId: this.sed.specsId.id,
|
||||
goodsNum: this.orderInfo.shops?.[0]?.addrTimes?.[0]?.goods?.[0]?.num || this.sed.goodsNum || 1,
|
||||
couponUserId: couponUserId || undefined,
|
||||
});
|
||||
if (!resp || resp.bizcode !== 100) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: "error",
|
||||
message: (resp && resp.msg) || "优惠券结算失败，请稍后重试",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.orderInfo.amount = resp.data.amount;
|
||||
this.orderInfo.couponDiscount = resp.data.couponDiscount || 0;
|
||||
this.orderInfo.amountBeforeCoupon = Number(resp.data.amount || 0) + Number(resp.data.couponDiscount || 0);
|
||||
this.orderInfo.availableCoupons = resp.data.availableCoupons || [];
|
||||
this.orderInfo.allCoupons = resp.data.allCoupons || resp.data.availableCoupons || [];
|
||||
this.rawOrderAmount = Number(this.orderInfo.amountBeforeCoupon) || 0;
|
||||
return true;
|
||||
},
|
||||
getCouponUserId(coupon) {
|
||||
return coupon && (coupon.couponUserId || coupon.id || null);
|
||||
},
|
||||
/**
|
||||
* 去充值
|
||||
*/
|
||||
@@ -1135,6 +1260,34 @@ export default {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.preview_coupon_tag {
|
||||
display: inline-block !important;
|
||||
font-size: 20rpx !important;
|
||||
color: #ffffff !important;
|
||||
background-color: #ff2442 !important;
|
||||
border: none !important;
|
||||
border-radius: 4rpx !important;
|
||||
padding: 0 8rpx !important;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
max-width: 220rpx !important;
|
||||
flex-shrink: 0 !important;
|
||||
font-weight: 500 !important;
|
||||
box-sizing: border-box !important;
|
||||
margin-right: 8rpx !important;
|
||||
}
|
||||
|
||||
.preview_coupon_price {
|
||||
font-size: 30rpx !important;
|
||||
color: #ff2442 !important;
|
||||
font-weight: bold !important;
|
||||
margin: 0 8rpx !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.seckill-tag {
|
||||
background: #7934F6;
|
||||
border-radius: 4rpx;
|
||||
@@ -1416,4 +1569,4 @@ export default {
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 顶部状态栏安全高度 -->
|
||||
<TopSafe bgColor="#ffffff"></TopSafe>
|
||||
|
||||
<!-- 1. 自定义导航栏：左侧返回箭头，中间“适用商品”标题 -->
|
||||
<view class="custom-navbar">
|
||||
<view class="nav-back flex-c" @click="onBack">
|
||||
<u-icon name="arrow-left" size="36rpx" color="#333333"></u-icon>
|
||||
</view>
|
||||
<view class="nav-title">适用商品</view>
|
||||
<view class="nav-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 搜索框区域 -->
|
||||
<view class="search-bar-box">
|
||||
<view class="search-inner">
|
||||
<u-icon name="search" size="36rpx" color="#999999" class="search-icon"></u-icon>
|
||||
<input class="search-input" v-model="searchInput" placeholder="请输入商品关键字"
|
||||
placeholder-style="color: #999999; font-size: 28rpx;" confirm-type="search"
|
||||
@confirm="onSearchBtnClick" />
|
||||
<view class="search-btn flex-c" @click="onSearchBtnClick">
|
||||
<text class="search-btn-text">搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 排序/筛选栏（右对齐：综合 / 价格） -->
|
||||
<view class="filter-bar">
|
||||
<view class="filter-item" :class="{ active: sort === 1 }" @click="switchSort(1)">
|
||||
<text class="filter-text">综合</text>
|
||||
<view class="sort-icon-box">
|
||||
<u-icon name="arrow-up-fill" size="12rpx" color="#cccccc" class="icon-up"></u-icon>
|
||||
<u-icon name="arrow-down-fill" size="12rpx" :color="sort === 1 ? '#7934f6' : '#cccccc'"
|
||||
class="icon-down"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-item" :class="{ active: sort === 2 || sort === 3 }" @click="switchSort('price')">
|
||||
<text class="filter-text">价格</text>
|
||||
<view class="sort-icon-box">
|
||||
<u-icon name="arrow-up-fill" size="12rpx" :color="sort === 2 ? '#7934f6' : '#cccccc'"
|
||||
class="icon-up"></u-icon>
|
||||
<u-icon name="arrow-down-fill" size="12rpx" :color="sort === 3 ? '#7934f6' : '#cccccc'"
|
||||
class="icon-down"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 3. 商品双列网格列表区域 -->
|
||||
<scroll-view scroll-y class="product-scroll-view" @scrolltolower="loadMore" refresher-enabled
|
||||
:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
|
||||
<view class="product-grid" v-if="dataList && dataList.length > 0">
|
||||
<view class="product-card" v-for="(item, index) in dataList" :key="item.goodsId || item.id || index"
|
||||
@click="onJumpDetail(item)">
|
||||
<!-- 商品大图 -->
|
||||
<view class="img-wrapper">
|
||||
<image class="product-img"
|
||||
:src="item.mainGraph || item.url || item.image || '/static/common/default-goods.png'"
|
||||
mode="aspectFill"></image>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="card-info">
|
||||
<view class="product-title">
|
||||
{{ item.goodsName || item.title || item.name }}
|
||||
</view>
|
||||
<view class="price-sales-row">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="price-val">{{ formatPrice(item.price) }}</text>
|
||||
</view>
|
||||
<text class="sales-val"
|
||||
v-if="item.sales !== undefined && item.sales !== null && item.sales !== ''">
|
||||
全网销量{{ formatSales(item.sales) }}件
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 / 无数据提示 -->
|
||||
<view class="empty-box" v-else-if="!loading">
|
||||
<u-icon name="empty-data" size="140rpx" color="#cccccc"></u-icon>
|
||||
<text class="empty-text">暂无相关商品</text>
|
||||
</view>
|
||||
|
||||
<view class="loading-more-box" v-if="loading && dataList.length > 0">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopSafe from '@/components/common/top-safe.nvue';
|
||||
import { getApplicableGoods } from '@/api/coupon.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TopSafe
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
templateId: '',
|
||||
searchInput: '',
|
||||
dataList: [],
|
||||
loading: false,
|
||||
isRefreshing: false,
|
||||
sort: 1, // 排序：1-销量降序、2-价格升序、3-价格降序
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
hasMore: true
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && (options.templateId || options.id)) {
|
||||
this.templateId = options.templateId || options.id;
|
||||
}
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
onBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
onSearchBtnClick() {
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.fetchData();
|
||||
},
|
||||
async fetchData(isLoadMore = false) {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
|
||||
let params = {
|
||||
templateId: this.templateId,
|
||||
keyword: this.searchInput ? this.searchInput.trim() : '',
|
||||
sort: this.sort,
|
||||
page: this.page,
|
||||
pageSize: this.pageSize
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await getApplicableGoods(params);
|
||||
let list = [];
|
||||
let totalPage = 0;
|
||||
if (res && res.bizcode === 100 && res.data) {
|
||||
list = res.data.entitys || [];
|
||||
totalPage = res.data.totalPage || 0;
|
||||
} else if (res && res.data && Array.isArray(res.data)) {
|
||||
list = res.data;
|
||||
}
|
||||
|
||||
if (isLoadMore) {
|
||||
this.dataList = [...this.dataList, ...list];
|
||||
} else {
|
||||
this.dataList = list;
|
||||
}
|
||||
|
||||
if (list.length < this.pageSize || (totalPage > 0 && this.page >= totalPage)) {
|
||||
this.hasMore = false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('getApplicableGoods error:', err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.isRefreshing = false;
|
||||
}
|
||||
},
|
||||
switchSort(type) {
|
||||
if (type === 1) {
|
||||
this.sort = 1;
|
||||
} else if (type === 'price') {
|
||||
if (this.sort === 2) {
|
||||
this.sort = 3;
|
||||
} else {
|
||||
this.sort = 2;
|
||||
}
|
||||
}
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.fetchData();
|
||||
},
|
||||
onRefresh() {
|
||||
this.isRefreshing = true;
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.fetchData();
|
||||
},
|
||||
loadMore() {
|
||||
if (!this.hasMore || this.loading) return;
|
||||
this.page++;
|
||||
this.fetchData(true);
|
||||
},
|
||||
onJumpDetail(item) {
|
||||
const goodsId = item.goodsId || item.id;
|
||||
if (goodsId) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/other_package/productInfo/productInfo?id=' + goodsId
|
||||
});
|
||||
}
|
||||
},
|
||||
formatPrice(val) {
|
||||
if (val === undefined || val === null || val === '') return '0.00';
|
||||
let num = parseFloat(val);
|
||||
if (isNaN(num)) return val;
|
||||
return num.toFixed(2);
|
||||
},
|
||||
formatSales(n) {
|
||||
if (n === undefined || n === null || n === '') return '0';
|
||||
let num = Number(n);
|
||||
if (isNaN(num)) return n;
|
||||
if (num >= 10000) {
|
||||
return (num / 10000).toFixed(1).replace(/\.0$/, '') + '万+';
|
||||
}
|
||||
return String(num);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #f5f5f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.custom-navbar {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
|
||||
.nav-back {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索框区域 */
|
||||
.search-bar-box {
|
||||
width: 100%;
|
||||
padding: 16rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
flex-shrink: 0;
|
||||
|
||||
.search-inner {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 8rpx 0 28rpx;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #efefef;
|
||||
|
||||
.search-icon {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 64rpx;
|
||||
padding: 0 32rpx;
|
||||
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
|
||||
border-radius: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.search-btn-text {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 排序筛选栏 */
|
||||
.filter-bar {
|
||||
width: 100%;
|
||||
padding: 20rpx 40rpx 16rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 48rpx;
|
||||
background-color: #f5f5f7;
|
||||
flex-shrink: 0;
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.filter-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.filter-text {
|
||||
color: #7934f6;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-icon-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
|
||||
.icon-up {
|
||||
margin-bottom: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品列表 Grid */
|
||||
.product-scroll-view {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
width: 100%;
|
||||
padding: 0 24rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.product-card {
|
||||
width: 342rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.img-wrapper {
|
||||
width: 100%;
|
||||
height: 342rpx;
|
||||
position: relative;
|
||||
background-color: #f8f8f8;
|
||||
|
||||
.product-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-info {
|
||||
padding: 16rpx 20rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
|
||||
.product-title {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
line-height: 38rpx;
|
||||
height: 76rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.price-sales-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #7934f6;
|
||||
|
||||
.currency {
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.price-val {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.sales-val {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
width: 100%;
|
||||
padding: 120rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-more-box {
|
||||
width: 100%;
|
||||
padding: 20rpx 0 40rpx;
|
||||
text-align: center;
|
||||
|
||||
.loading-text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,350 +1,662 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<TopSafe></TopSafe>
|
||||
<Header title="优惠券" />
|
||||
|
||||
<!-- 顶部分类 Tab 栏 -->
|
||||
<view class="tab-container">
|
||||
<view
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === index }"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
<text class="tab-text">{{ item }}</text>
|
||||
<view class="active-line" v-if="currentTab === index"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon-page">
|
||||
<TopSafe></TopSafe>
|
||||
<Header title="优惠券" />
|
||||
|
||||
<!-- 优惠券列表区域 -->
|
||||
<view class="coupon-list">
|
||||
<view
|
||||
v-for="(coupon, index) in filteredCoupons"
|
||||
:key="index"
|
||||
class="coupon-card"
|
||||
:class="{ 'disabled': coupon.status === 'expired' }"
|
||||
>
|
||||
<!-- 左侧：金额与门槛 -->
|
||||
<view class="card-left">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ coupon.amount }}</text>
|
||||
</view>
|
||||
<text class="condition">{{ coupon.condition }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<view class="notch top-notch"></view>
|
||||
<view class="divider-line"></view>
|
||||
<view class="notch bottom-notch"></view>
|
||||
</view>
|
||||
<!-- 顶部分类 Tab 栏 -->
|
||||
<view class="tab-container">
|
||||
<view
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === index }"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
<text class="tab-text">{{ item.name }}</text>
|
||||
<view class="active-line" v-if="currentTab === index"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：详细内容 -->
|
||||
<view class="card-right">
|
||||
<view class="info-content">
|
||||
<view class="title">{{ coupon.title }}</view>
|
||||
<view class="description">{{ coupon.description }}</view>
|
||||
|
||||
<!-- 状态/倒计时文本 -->
|
||||
<view v-if="coupon.status === 'active'" class="countdown">
|
||||
仅剩 {{ coupon.timeLeft }}
|
||||
</view>
|
||||
<view v-else class="expired-text">
|
||||
已失效
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 按钮：仅在有效状态下显示 -->
|
||||
<view v-if="coupon.status === 'active'" class="use-btn" @click="useCoupon(coupon)">
|
||||
使用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优惠券列表及分页加载区域 -->
|
||||
<mescroll-uni
|
||||
ref="mescrollRef"
|
||||
top="176rpx"
|
||||
@down="downCallback"
|
||||
@up="upCallback"
|
||||
:up="upOption"
|
||||
:down="downOption"
|
||||
@init="mescrollInit"
|
||||
>
|
||||
<!-- 列表视图 -->
|
||||
<view class="coupon-list-container" v-if="couponList && couponList.length > 0">
|
||||
<view
|
||||
v-for="(coupon, index) in couponList"
|
||||
:key="coupon.couponUserId || coupon.userCouponId || coupon.templateId || index"
|
||||
class="coupon-card"
|
||||
:class="{ 'card-disabled': getCardDisabled(coupon) }"
|
||||
>
|
||||
<!-- 左侧：金额与门槛 -->
|
||||
<view class="card-left">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ getDiscountAmount(coupon) }}</text>
|
||||
</view>
|
||||
<text class="condition">{{ getThresholdText(coupon) }}</text>
|
||||
</view>
|
||||
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
<qiaobao-assistant page-key="pages/other_package/coupon/coupon" title="优惠券" />
|
||||
</view>
|
||||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<view class="notch top-notch"></view>
|
||||
<view class="divider-line"></view>
|
||||
<view class="notch bottom-notch"></view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：详细内容与操作按钮 -->
|
||||
<view class="card-right">
|
||||
<view class="info-content">
|
||||
<view class="coupon-title">{{ coupon.title || '优惠券' }}</view>
|
||||
<view class="tag-row">
|
||||
<text class="coupon-tag" :class="{ 'tag-disabled': getCardDisabled(coupon) }">
|
||||
{{ getTagText(coupon) }}
|
||||
</text>
|
||||
<text class="coupon-scope">{{ getScopeText(coupon) }}</text>
|
||||
</view>
|
||||
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="btn-box">
|
||||
<view
|
||||
v-if="!getCardDisabled(coupon)"
|
||||
class="action-btn btn-use"
|
||||
@click="onUseCoupon(coupon)"
|
||||
>
|
||||
去使用
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
class="action-btn btn-disabled"
|
||||
>
|
||||
{{ getBtnText(coupon) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无优惠券缺省视图 (图二高保真) -->
|
||||
<view class="empty-container" v-else-if="isEmpty">
|
||||
<view class="empty-graphic">
|
||||
<view class="purple-bag-wrapper">
|
||||
<view class="glow-bg"></view>
|
||||
<view class="bag-card">
|
||||
<view class="bag-handle"></view>
|
||||
<view class="bag-logo">TB</view>
|
||||
</view>
|
||||
<view class="heart-bubble">
|
||||
<text class="heart-icon">♥</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="empty-tip">暂无优惠券</text>
|
||||
<view class="btn-go-get" v-if="currentTab === 0" @click="onGoGetCoupon">
|
||||
去领取优惠券
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-uni>
|
||||
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
<qiaobao-assistant page-key="pages/other_package/coupon/coupon" title="优惠券" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '@/components/common/header.vue';
|
||||
import TopSafe from '@/components/common/top-safe.nvue'
|
||||
import MyBtn from '@/components/common/my-btn.vue'
|
||||
import TopSafe from '@/components/common/top-safe.nvue';
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
|
||||
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
|
||||
import { getMyCouponPage } from '@/api/coupon.js';
|
||||
|
||||
export default {
|
||||
components: { Header, TopSafe, MyBtn },
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0,
|
||||
tabs: ['全部', '可使用', '已失效'],
|
||||
coupons: [
|
||||
{
|
||||
amount: 12,
|
||||
condition: '无门槛',
|
||||
title: '限时秒杀优惠券',
|
||||
description: '云南白药牙膏儿膏儿膏儿...',
|
||||
timeLeft: '14:20:55',
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
amount: 8,
|
||||
condition: '无门槛',
|
||||
title: '限时秒杀优惠券',
|
||||
description: '云南白药牙膏儿膏儿膏儿...',
|
||||
timeLeft: '14:20:55',
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
amount: 12,
|
||||
condition: '无门槛',
|
||||
title: '限时秒杀优惠券',
|
||||
description: '牛肉干儿牛肉干儿牛肉干',
|
||||
timeLeft: '',
|
||||
status: 'expired'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredCoupons() {
|
||||
return this.coupons;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
this.currentTab = index;
|
||||
},
|
||||
useCoupon(coupon) {
|
||||
uni.showToast({
|
||||
title: `去使用 ${coupon.amount} 元券`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
mixins: [MescrollMixin],
|
||||
components: { Header, TopSafe, MescrollUni },
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0,
|
||||
tabs: [
|
||||
{ name: '待使用', status: 1 },
|
||||
{ name: '已使用', status: 2 },
|
||||
{ name: '已过期', status: 3 },
|
||||
{ name: '已失效', status: 4 }
|
||||
],
|
||||
couponList: [],
|
||||
isEmpty: false,
|
||||
upOption: {
|
||||
auto: true,
|
||||
page: {
|
||||
num: 0,
|
||||
size: 10
|
||||
},
|
||||
noMoreSize: 5,
|
||||
empty: {
|
||||
use: false // 使用自定义高保真 Empty 视图
|
||||
},
|
||||
textColor: '#333',
|
||||
bgColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
downOption: {
|
||||
auto: false,
|
||||
textColor: '#333',
|
||||
bgColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
mescroll: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
},
|
||||
downCallback() {
|
||||
this.mescroll && this.mescroll.resetUpScroll();
|
||||
},
|
||||
// 切换 Tab 标签
|
||||
switchTab(index) {
|
||||
if (this.currentTab !== index) {
|
||||
this.currentTab = index;
|
||||
this.couponList = [];
|
||||
this.isEmpty = false;
|
||||
this.mescroll && this.mescroll.resetUpScroll();
|
||||
}
|
||||
},
|
||||
// 分页获取我的优惠券列表
|
||||
async upCallback(page) {
|
||||
try {
|
||||
const currentStatus = this.tabs[this.currentTab].status;
|
||||
const params = {
|
||||
status: currentStatus,
|
||||
page: page.num,
|
||||
pageSize: page.size
|
||||
};
|
||||
const resp = await getMyCouponPage(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data || {};
|
||||
const list = data.entitys || [];
|
||||
const curPageLen = list.length;
|
||||
const totalCount = data.totalCount || 0;
|
||||
|
||||
if (page.num === 1) {
|
||||
this.couponList = [];
|
||||
}
|
||||
this.couponList = this.couponList.concat(list);
|
||||
this.isEmpty = this.couponList.length === 0;
|
||||
this.mescroll.endBySize(curPageLen, totalCount);
|
||||
} else {
|
||||
if (page.num === 1 && this.couponList.length === 0) {
|
||||
this.couponList = [];
|
||||
this.isEmpty = true;
|
||||
this.mescroll.endBySize(0, 0);
|
||||
} else {
|
||||
this.mescroll && this.mescroll.endErr();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取我的优惠券列表异常:', e);
|
||||
if (page.num === 1 && this.couponList.length === 0) {
|
||||
this.couponList = [];
|
||||
this.isEmpty = true;
|
||||
this.mescroll.endBySize(0, 0);
|
||||
} else {
|
||||
this.mescroll && this.mescroll.endErr();
|
||||
}
|
||||
}
|
||||
},
|
||||
// 点击“去使用”
|
||||
onUseCoupon(coupon) {
|
||||
const templateId = coupon.templateId || coupon.id || '';
|
||||
uni.navigateTo({
|
||||
url: `/pages/other_package/applicable_goods/applicable_goods?templateId=${templateId}`
|
||||
});
|
||||
},
|
||||
// 点击“去领取优惠券” -> 跳转至领券中心
|
||||
onGoGetCoupon() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/other_package/get-coupon/get-coupon'
|
||||
});
|
||||
},
|
||||
// 数据映射格式化函数
|
||||
getDiscountAmount(coupon) {
|
||||
return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
|
||||
},
|
||||
getThresholdText(coupon) {
|
||||
if (coupon.thresholdType) return coupon.thresholdType;
|
||||
const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
|
||||
if (threshold === 0) {
|
||||
return '无门槛';
|
||||
}
|
||||
return `满${threshold}元可用`;
|
||||
},
|
||||
getTagText(coupon) {
|
||||
if (coupon.tag) return coupon.tag;
|
||||
if (coupon.scopeType === 1) return '通用券';
|
||||
if (coupon.scopeType === 2) return '商品券';
|
||||
if (coupon.scopeType === 3 || coupon.scopeType === 4) return '品类券';
|
||||
if (coupon.scopeText && coupon.scopeText.includes('通用')) return '通用券';
|
||||
return '通用券';
|
||||
},
|
||||
getScopeText(coupon) {
|
||||
if (coupon.scope) return coupon.scope;
|
||||
if (coupon.scopeText) return coupon.scopeText;
|
||||
if (coupon.scopeType === 1) return '所有商品可用';
|
||||
if (coupon.scopeType === 2) return '指定商品可用';
|
||||
if (coupon.scopeType === 3) return '指定类目可用';
|
||||
if (coupon.scopeType === 4) return '指定专区商品可用';
|
||||
return '所有商品可用';
|
||||
},
|
||||
getValidityText(coupon) {
|
||||
if (coupon.endTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.endTime)}`;
|
||||
}
|
||||
if (coupon.useEndTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
|
||||
}
|
||||
if (coupon.validityText) return coupon.validityText;
|
||||
if (coupon.validDays && coupon.validDays > 0) {
|
||||
return `领取之日起${coupon.validDays}天内有效`;
|
||||
}
|
||||
if (coupon.receiveEndTime) {
|
||||
return `截止时间 ${this.formatTime(coupon.receiveEndTime)}`;
|
||||
}
|
||||
return '有效期至 2026-8-14 14:20:55';
|
||||
},
|
||||
getBtnText(coupon) {
|
||||
if (coupon.statusText) return coupon.statusText;
|
||||
const status = coupon.status !== undefined ? Number(coupon.status) : this.tabs[this.currentTab].status;
|
||||
if (status === 1) return '去使用';
|
||||
if (status === 2) return '已使用';
|
||||
if (status === 3) return '已过期';
|
||||
if (status === 4) return '已失效';
|
||||
return '已失效';
|
||||
},
|
||||
getCardDisabled(coupon) {
|
||||
const status = coupon.status !== undefined ? Number(coupon.status) : this.tabs[this.currentTab].status;
|
||||
return status !== 1;
|
||||
},
|
||||
formatTime(time) {
|
||||
if (!time) return '';
|
||||
if (typeof time === 'string' && time.includes('-')) return time;
|
||||
const date = new Date(Number(time));
|
||||
if (isNaN(date.getTime())) return String(time);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(date.getDate()).padStart(2, '0');
|
||||
const hh = String(date.getHours()).padStart(2, '0');
|
||||
const mm = String(date.getMinutes()).padStart(2, '0');
|
||||
const ss = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background-color: #F5F5F5;
|
||||
min-height: 100vh;
|
||||
.coupon-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f8fa;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 顶部分类 Tab 栏 */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
height: 88rpx;
|
||||
align-items: center;
|
||||
padding-left: 28rpx; /* 关键：左侧对齐优惠券卡片的边距 */
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx solid #f6f6f6; /* 隐约的底部分割线 */
|
||||
|
||||
.tab-item {
|
||||
margin-right: 48rpx; /* 增大字与字之间的间距 */
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #7f7f7f; /* 未激活时是略深一点的灰色 */
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-text {
|
||||
color: #7A35F6; /* 完美还原原图中的亮紫色 */
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
height: 88rpx;
|
||||
align-items: center;
|
||||
padding-left: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-top: 1rpx solid #f6f6f6;
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
|
||||
/* 底部指示线：缩短宽度并适当下移 */
|
||||
.active-line {
|
||||
position: absolute;
|
||||
bottom: 4rpx; /* 贴近底部边缘 */
|
||||
width: 44rpx; /* 缩短下划线宽度，原图横线比“全部”两个字还要窄一点 */
|
||||
height: 4rpx; /* 适中的粗细 */
|
||||
background-color: #7A35F6;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
.tab-item {
|
||||
margin-right: 48rpx;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-text {
|
||||
color: #7a35f6;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.active-line {
|
||||
position: absolute;
|
||||
bottom: 6rpx;
|
||||
width: 48rpx;
|
||||
height: 6rpx;
|
||||
background-color: #7a35f6;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
padding: 28rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
/* 优惠券列表容器 */
|
||||
.coupon-list-container {
|
||||
padding: 24rpx 24rpx 40rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 优惠券卡片基础样式 (待使用状态) */
|
||||
.coupon-card {
|
||||
background: rgba(102,102,102,0.06);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
height: 196rpx;
|
||||
position: relative;
|
||||
|
||||
/* 左侧面：金额区 */
|
||||
.card-left {
|
||||
width: 190rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #ff1224;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.currency {
|
||||
font-size: 32rpx;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 64rpx;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff1224;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 带有上下半圆凹槽的虚线分割线组件 */
|
||||
.divider-wrapper {
|
||||
width: 2rpx;
|
||||
position: relative;
|
||||
margin: 10rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.divider-line {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed rgba(253,28,36,0.3);
|
||||
}
|
||||
|
||||
/* 模拟卡片边缘剪票口的半圆凹槽 */
|
||||
.notch {
|
||||
position: absolute;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background-color: #f7f8fa; /* 颜色和页面大背景融为一体 */
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.top-notch {
|
||||
top: -18rpx;
|
||||
}
|
||||
.bottom-notch {
|
||||
bottom: -18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 右侧面：内容与按钮区 */
|
||||
.card-right {
|
||||
flex: 1;
|
||||
padding: 26rpx 24rpx 24rpx 36rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #2c2c2c;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 28rpx;
|
||||
color: #6a6a6a;
|
||||
margin-top: 8rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 24rpx;
|
||||
color: #ff5260;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 立即使用按钮 */
|
||||
.use-btn {
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background-color: #FD1C24;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx; /* 原图接近微圆角矩形，而非纯半圆 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ======= 已失效状态覆盖 ======= */
|
||||
&.disabled {
|
||||
background-color: #f4f4f4; /* 换成失效灰底 */
|
||||
|
||||
.card-left {
|
||||
.price-box { color: #9c9c9c; }
|
||||
.condition { color: #9c9c9c; }
|
||||
}
|
||||
|
||||
.divider-wrapper {
|
||||
.divider-line { border-left-color: #e2e2e2; }
|
||||
}
|
||||
|
||||
.card-right {
|
||||
.info-content {
|
||||
.title { color: #2c2c2c; } /* 失效标题依然清晰 */
|
||||
.description { color: #9c9c9c; }
|
||||
}
|
||||
.expired-text {
|
||||
font-size: 22rpx;
|
||||
color: #bcbcbc;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(253, 28, 36, 0.06);
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* 已使用 / 已过期 / 已失效 灰色变暗样式 (图三图四高保真) */
|
||||
&.card-disabled {
|
||||
background: #f5f5f5 !important;
|
||||
|
||||
.card-left {
|
||||
.price-box {
|
||||
color: #a0a0a0 !important;
|
||||
}
|
||||
.condition {
|
||||
color: #999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
color: #333333 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-left {
|
||||
width: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #ff2442;
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 60rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff2442;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* 虚线分割线及上下凹槽 */
|
||||
.divider-wrapper {
|
||||
position: relative;
|
||||
width: 2rpx;
|
||||
align-self: stretch;
|
||||
|
||||
.divider-line {
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed #fca5a5;
|
||||
}
|
||||
|
||||
.notch {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-notch {
|
||||
top: -12rpx;
|
||||
}
|
||||
|
||||
.bottom-notch {
|
||||
bottom: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-disabled .divider-line {
|
||||
border-left: 2rpx dashed #dddddd !important;
|
||||
}
|
||||
|
||||
/* 卡片右侧内容 */
|
||||
.card-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 20rpx 24rpx;
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 12rpx;
|
||||
|
||||
.coupon-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.coupon-tag {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
color: #ff2442;
|
||||
background: #ffe4e6;
|
||||
border: 1px solid #ff99a4;
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&.tag-disabled {
|
||||
color: #888888 !important;
|
||||
background: #eeeeee !important;
|
||||
border: 1px solid #cccccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-scope {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-validity {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
flex-shrink: 0;
|
||||
|
||||
.action-btn {
|
||||
width: 130rpx;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.btn-use {
|
||||
background: #ff1e38;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.btn-disabled {
|
||||
background: #e5e5e5;
|
||||
color: #a0a0a0;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 缺省页面 (图二高保真) */
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 140rpx;
|
||||
|
||||
.empty-graphic {
|
||||
position: relative;
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.purple-bag-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.glow-bg {
|
||||
position: absolute;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(247, 248, 250, 0) 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.bag-card {
|
||||
position: relative;
|
||||
width: 110rpx;
|
||||
height: 120rpx;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 12rpx 28rpx rgba(122, 53, 246, 0.3);
|
||||
z-index: 2;
|
||||
|
||||
.bag-handle {
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
width: 44rpx;
|
||||
height: 24rpx;
|
||||
border: 4rpx solid #c084fc;
|
||||
border-bottom: none;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
}
|
||||
|
||||
.bag-logo {
|
||||
font-size: 32rpx;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.heart-bubble {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 24rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
background: linear-gradient(135deg, #c084fc, #a855f7);
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(168, 85, 247, 0.3);
|
||||
z-index: 3;
|
||||
|
||||
.heart-icon {
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.btn-go-get {
|
||||
width: 440rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 40rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(122, 53, 246, 0.3);
|
||||
transition: transform 0.1s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,801 @@
|
||||
<template>
|
||||
<view class="get-coupon-page">
|
||||
<!-- 头部 Banner / 轮播图区域 -->
|
||||
<view class="product_info_header_warp">
|
||||
<up-swiper v-if="swiperList && swiperList.length > 0" :list="swiperList" height="660rpx"
|
||||
class="product_info_header_swiper" @click="onSwiper" @change="(e) => (currentNum = e.current)">
|
||||
|
||||
</up-swiper>
|
||||
|
||||
<!-- Default Fallback Banner UI (High-Fidelity) when swiperList is empty -->
|
||||
<view v-else class="default-banner">
|
||||
<view class="banner-bg-gradient"></view>
|
||||
<view class="banner-content">
|
||||
<view class="banner-badge">%</view>
|
||||
<text class="banner-title">领券中心</text>
|
||||
<view class="banner-subtitle">
|
||||
<text class="sparkle">✦</text>
|
||||
<text class="sub-text">领券享好价，购物更划算</text>
|
||||
<text class="sparkle">✦</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 浮动返回按钮 -->
|
||||
<view class="img_comm left_warp" :style="{ top: (statusBarHeight + 10) + 'px' }">
|
||||
<up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00"
|
||||
@click="jumpLeft"></up-image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 分页优惠券列表区域 -->
|
||||
<mescroll-uni ref="mescrollRef" top="660rpx" @down="downCallback" @up="upCallback" :up="upOption"
|
||||
:down="downOption" @init="mescrollInit">
|
||||
<!-- 列表视图 -->
|
||||
<view class="coupon-list-container" v-if="couponList && couponList.length > 0">
|
||||
<view v-for="(coupon, index) in couponList" :key="coupon.templateId || coupon.id || index"
|
||||
class="coupon-card">
|
||||
<!-- 左侧：金额与门槛 -->
|
||||
<view class="card-left">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ getDiscountAmount(coupon) }}</text>
|
||||
</view>
|
||||
<text class="condition">{{ getThresholdText(coupon) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<view class="notch top-notch"></view>
|
||||
<view class="divider-line"></view>
|
||||
<view class="notch bottom-notch"></view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：详细内容与操作按钮 -->
|
||||
<view class="card-right">
|
||||
<view class="info-content">
|
||||
<view class="coupon-title">{{ coupon.title }}</view>
|
||||
<view class="tag-row">
|
||||
<text class="coupon-tag">{{ getTagText(coupon) }}</text>
|
||||
<text class="coupon-scope">{{ getScopeText(coupon) }}</text>
|
||||
</view>
|
||||
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="btn-box">
|
||||
<view v-if="getCouponStatus(coupon) === 0" class="action-btn btn-claim"
|
||||
@click="onClaimCoupon(coupon, index)">
|
||||
立即领取
|
||||
</view>
|
||||
<view v-else-if="getCouponStatus(coupon) === 1" class="action-btn btn-use"
|
||||
@click="onClaimCoupon(coupon, index)">
|
||||
去使用
|
||||
</view>
|
||||
<view v-else class="action-btn btn-disabled">
|
||||
{{ coupon.receiveStatusText || '已达上限' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无领券数据缺省视图 (高保真) -->
|
||||
<view class="empty-container" v-else-if="isEmpty">
|
||||
<view class="empty-graphic">
|
||||
<view class="purple-bag-wrapper">
|
||||
<view class="glow-bg"></view>
|
||||
<view class="bag-card">
|
||||
<view class="bag-handle"></view>
|
||||
<view class="bag-logo">TB</view>
|
||||
</view>
|
||||
<view class="heart-bubble">
|
||||
<text class="heart-icon">♥</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="empty-title">敬请期待</text>
|
||||
<text class="empty-subtitle">更多优质商品正在路上...</text>
|
||||
</view>
|
||||
</mescroll-uni>
|
||||
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
<qiaobao-assistant page-key="pages/other_package/get-coupon/get-coupon" title="领券中心" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCarouselImage } from '@/api/common.js';
|
||||
import { getReceiveCenterList, receiveCoupon } from '@/api/coupon.js';
|
||||
import { APP_PAGE_TYPE } from '@/utils/enumUtils.js';
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
|
||||
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
|
||||
|
||||
export default {
|
||||
mixins: [MescrollMixin],
|
||||
components: { MescrollUni },
|
||||
data() {
|
||||
return {
|
||||
swiperList: [],
|
||||
currentNum: 0,
|
||||
statusBarHeight: 20,
|
||||
couponList: [],
|
||||
isEmpty: false,
|
||||
upOption: {
|
||||
auto: true,
|
||||
page: {
|
||||
num: 0,
|
||||
size: 10
|
||||
},
|
||||
noMoreSize: 5,
|
||||
empty: {
|
||||
use: false // 使用自定义高保真 Empty 视图
|
||||
},
|
||||
textColor: '#333',
|
||||
bgColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
downOption: {
|
||||
auto: false,
|
||||
textColor: '#333',
|
||||
bgColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
mescroll: null
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
if (sysInfo && sysInfo.statusBarHeight) {
|
||||
this.statusBarHeight = sysInfo.statusBarHeight;
|
||||
}
|
||||
this.getCarouselImage();
|
||||
},
|
||||
methods: {
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
},
|
||||
downCallback() {
|
||||
this.mescroll && this.mescroll.resetUpScroll();
|
||||
},
|
||||
// 分页获取领券中心列表
|
||||
async upCallback(page) {
|
||||
try {
|
||||
const params = {
|
||||
page: page.num,
|
||||
pageSize: page.size
|
||||
};
|
||||
const resp = await getReceiveCenterList(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data || {};
|
||||
const list = data.entitys || [];
|
||||
const curPageLen = list.length;
|
||||
const totalCount = data.totalCount || 0;
|
||||
|
||||
if (page.num === 1) {
|
||||
this.couponList = [];
|
||||
}
|
||||
this.couponList = this.couponList.concat(list);
|
||||
this.isEmpty = this.couponList.length === 0;
|
||||
this.mescroll.endBySize(curPageLen, totalCount);
|
||||
} else {
|
||||
if (page.num === 1 && this.couponList.length === 0) {
|
||||
this.couponList = [];
|
||||
this.isEmpty = true;
|
||||
this.mescroll.endBySize(0, 0);
|
||||
} else {
|
||||
this.mescroll && this.mescroll.endErr();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取领券中心数据失败:', e);
|
||||
if (page.num === 1 && this.couponList.length === 0) {
|
||||
this.couponList = [];
|
||||
this.isEmpty = true;
|
||||
this.mescroll.endBySize(0, 0);
|
||||
} else {
|
||||
this.mescroll && this.mescroll.endErr();
|
||||
}
|
||||
}
|
||||
},
|
||||
// 查询轮播图
|
||||
async getCarouselImage() {
|
||||
try {
|
||||
const params = {
|
||||
pageUi: APP_PAGE_TYPE.COUPON
|
||||
};
|
||||
const resp = await getCarouselImage(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data || [];
|
||||
this.swiperList = data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取轮播图失败:', e);
|
||||
}
|
||||
},
|
||||
// 返回上一页
|
||||
jumpLeft() {
|
||||
const pages = getCurrentPages();
|
||||
if (pages && pages.length > 1) {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 点击轮播图预览
|
||||
onSwiper(index) {
|
||||
if (this.swiperList && this.swiperList.length > 0) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.swiperList
|
||||
});
|
||||
}
|
||||
},
|
||||
// 数据字段映射格式化函数
|
||||
getDiscountAmount(coupon) {
|
||||
return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
|
||||
},
|
||||
getThresholdText(coupon) {
|
||||
if (coupon.thresholdType) return coupon.thresholdType;
|
||||
const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
|
||||
if (threshold === 0) {
|
||||
return '无门槛';
|
||||
}
|
||||
if (coupon.type === 1) {
|
||||
return `满${threshold}元可用`;
|
||||
}
|
||||
return `满${threshold}元可用`;
|
||||
},
|
||||
getTagText(coupon) {
|
||||
if (coupon.tag) return coupon.tag;
|
||||
if (coupon.scopeType === 1) return '通用券';
|
||||
if (coupon.scopeType === 2) return '商品券';
|
||||
if (coupon.scopeType === 3 || coupon.scopeType === 4) return '品类券';
|
||||
if (coupon.scopeText && coupon.scopeText.includes('通用')) return '通用券';
|
||||
return '通用券';
|
||||
},
|
||||
getScopeText(coupon) {
|
||||
if (coupon.scope) return coupon.scope;
|
||||
if (coupon.scopeText) return coupon.scopeText;
|
||||
if (coupon.scopeType === 1) return '所有商品可用';
|
||||
if (coupon.scopeType === 2) return '指定商品可用';
|
||||
if (coupon.scopeType === 3) return '指定类目可用';
|
||||
if (coupon.scopeType === 4) return '指定专区商品可用';
|
||||
return '所有商品可用';
|
||||
},
|
||||
getValidityText(coupon) {
|
||||
if (coupon.validityText) return coupon.validityText;
|
||||
if (coupon.validDays && coupon.validDays > 0) {
|
||||
return `领取之日起${coupon.validDays}天内有效`;
|
||||
}
|
||||
if (coupon.useEndTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
|
||||
}
|
||||
if (coupon.receiveEndTime) {
|
||||
return `截止时间 ${this.formatTime(coupon.receiveEndTime)}`;
|
||||
}
|
||||
return '领取之日起30天内有效';
|
||||
},
|
||||
getCouponStatus(coupon) {
|
||||
if (coupon.receiveStatus !== undefined && coupon.receiveStatus !== null) return Number(coupon.receiveStatus);
|
||||
if (coupon.received !== undefined && coupon.received !== null) return coupon.received ? 1 : 0;
|
||||
if (coupon.canReceive !== undefined && coupon.canReceive !== null) return coupon.canReceive ? 0 : 2;
|
||||
if (coupon.status !== undefined && coupon.status !== null) return Number(coupon.status);
|
||||
return 0;
|
||||
},
|
||||
formatTime(time) {
|
||||
if (!time) return '';
|
||||
if (typeof time === 'string' && time.includes('-')) return time;
|
||||
const date = new Date(Number(time));
|
||||
if (isNaN(date.getTime())) return String(time);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(date.getDate()).padStart(2, '0');
|
||||
const hh = String(date.getHours()).padStart(2, '0');
|
||||
const mm = String(date.getMinutes()).padStart(2, '0');
|
||||
const ss = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
|
||||
},
|
||||
// 领取 / 使用优惠券
|
||||
async onClaimCoupon(item, index) {
|
||||
const status = this.getCouponStatus(item);
|
||||
if (status === 0) {
|
||||
const templateId = item.templateId || item.id;
|
||||
if (!templateId) {
|
||||
uni.showToast({
|
||||
title: '优惠券ID无效',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// POST /coupon/receive { templateId }
|
||||
const res = await receiveCoupon({ templateId });
|
||||
if (res && res.bizcode === 100) {
|
||||
if (this.$refs.uToastRef) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'success',
|
||||
message: '领取成功'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
// 1. 本地卡片状态即时更新 (按钮变“去使用”)
|
||||
if (this.couponList && this.couponList[index]) {
|
||||
this.$set(this.couponList[index], 'receiveStatus', 1);
|
||||
this.$set(this.couponList[index], 'received', true);
|
||||
}
|
||||
// 2. 重新加载/刷新 mescroll 列表
|
||||
if (this.mescroll) {
|
||||
this.mescroll.resetUpScroll();
|
||||
} else {
|
||||
this.upCallback({ num: 1, size: 10 });
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res?.msg || '领取失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('领取优惠券失败:', e);
|
||||
uni.showToast({
|
||||
title: '领取失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} else if (status === 1) {
|
||||
// 已领取 -> 去使用，跳转至首页/选购
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 兜底高保真演练数据
|
||||
getFallbackCoupons() {
|
||||
return [
|
||||
{
|
||||
templateId: 1,
|
||||
discountAmount: 12,
|
||||
thresholdAmount: 0,
|
||||
title: '限时秒杀优惠券',
|
||||
scopeType: 1,
|
||||
scopeText: '所有商品可用',
|
||||
validDays: 30,
|
||||
receiveStatus: 0,
|
||||
canReceive: true,
|
||||
received: false
|
||||
},
|
||||
{
|
||||
templateId: 2,
|
||||
discountAmount: 12,
|
||||
thresholdAmount: 0,
|
||||
title: '限时秒杀优惠券',
|
||||
scopeType: 3,
|
||||
scopeText: '指定商品可用',
|
||||
useEndTime: '2026-8-14 14:20:55',
|
||||
receiveStatus: 1,
|
||||
canReceive: false,
|
||||
received: true
|
||||
},
|
||||
{
|
||||
templateId: 3,
|
||||
discountAmount: 12,
|
||||
thresholdAmount: 100,
|
||||
title: '限时秒杀优惠券',
|
||||
scopeType: 2,
|
||||
scopeText: '满100元指定商品可用',
|
||||
validDays: 30,
|
||||
receiveStatus: 0,
|
||||
canReceive: true,
|
||||
received: false
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.get-coupon-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f8fa;
|
||||
position: relative;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 头部 Banner 容器 */
|
||||
.product_info_header_warp {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 660rpx;
|
||||
background-color: #7b42f6;
|
||||
|
||||
.product_info_header_swiper {
|
||||
height: 660rpx !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
::v-deep(.u-swiper__wrapper) {
|
||||
height: 660rpx !important;
|
||||
|
||||
.u-swiper__wrapper {
|
||||
height: 660rpx !important;
|
||||
|
||||
.u-swiper__wrapper__item__wrapper__image {
|
||||
height: 660rpx !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 默认 High-Fidelity 紫红色 Banner 备用视图 */
|
||||
.default-banner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 660rpx;
|
||||
background: linear-gradient(135deg, #b83af6 0%, #7b22ec 50%, #681be4 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.banner-bg-gradient {
|
||||
position: absolute;
|
||||
top: -50rpx;
|
||||
right: -50rpx;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: -60rpx;
|
||||
|
||||
.banner-badge {
|
||||
position: absolute;
|
||||
top: 80rpx;
|
||||
left: 40rpx;
|
||||
font-size: 40rpx;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 76rpx;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
letter-spacing: 4rpx;
|
||||
text-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.25);
|
||||
background: linear-gradient(to bottom, #ffffff, #f0d5ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
padding: 8rpx 28rpx;
|
||||
border-radius: 30rpx;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
.sparkle {
|
||||
font-size: 20rpx;
|
||||
color: #ffd700;
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 浮动返回图标 */
|
||||
.img_comm {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.left_warp {
|
||||
left: 40rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* 优惠券列表区域 */
|
||||
.coupon-list-container {
|
||||
padding: 24rpx 24rpx 40rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 高保真优惠券卡片 */
|
||||
.coupon-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(253, 28, 36, 0.06);
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.card-left {
|
||||
width: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #ff2442;
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 60rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff2442;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* 虚线分割线及上下凹槽 */
|
||||
.divider-wrapper {
|
||||
position: relative;
|
||||
width: 2rpx;
|
||||
align-self: stretch;
|
||||
|
||||
.divider-line {
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed #fca5a5;
|
||||
}
|
||||
|
||||
.notch {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-notch {
|
||||
top: -12rpx;
|
||||
}
|
||||
|
||||
.bottom-notch {
|
||||
bottom: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片右侧内容 */
|
||||
.card-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 20rpx 24rpx;
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 12rpx;
|
||||
|
||||
.coupon-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.coupon-tag {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
color: #ff2442;
|
||||
background: #ffe4e6;
|
||||
border: 1px solid #ff99a4;
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.coupon-scope {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-validity {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
flex-shrink: 0;
|
||||
|
||||
.action-btn {
|
||||
width: 130rpx;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.btn-claim {
|
||||
background: #ff2442;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.btn-use {
|
||||
background: #ffe8eb;
|
||||
color: #ff2442;
|
||||
border: 1px solid #ff4d5e;
|
||||
line-height: 52rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.btn-disabled {
|
||||
background: #eeeeee;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 无领券数据缺省页面 (高保真) */
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 140rpx;
|
||||
|
||||
.empty-graphic {
|
||||
position: relative;
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.purple-bag-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.glow-bg {
|
||||
position: absolute;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(247, 248, 250, 0) 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.bag-card {
|
||||
position: relative;
|
||||
width: 110rpx;
|
||||
height: 120rpx;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 12rpx 28rpx rgba(122, 53, 246, 0.3);
|
||||
z-index: 2;
|
||||
|
||||
.bag-handle {
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
width: 44rpx;
|
||||
height: 24rpx;
|
||||
border: 4rpx solid #c084fc;
|
||||
border-bottom: none;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
}
|
||||
|
||||
.bag-logo {
|
||||
font-size: 32rpx;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.heart-bubble {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 24rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
background: linear-gradient(135deg, #c084fc, #a855f7);
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(168, 85, 247, 0.3);
|
||||
z-index: 3;
|
||||
|
||||
.heart-icon {
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.empty-subtitle {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -10,8 +10,8 @@
|
||||
<template #indicator>
|
||||
<view class="indicator-num">
|
||||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
|
||||
<qiaobao-assistant page-key="pages/other_package/productInfo/productInfo" title="商品详情" />
|
||||
</view>
|
||||
<qiaobao-assistant page-key="pages/other_package/productInfo/productInfo" title="商品详情" />
|
||||
</view>
|
||||
</template>
|
||||
</up-swiper>
|
||||
|
||||
@@ -84,6 +84,22 @@
|
||||
</view>
|
||||
<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
|
||||
<!-- 领券栏 (图一高保真) -->
|
||||
<view class="concrete_item concrete_item_but" v-if="goodsCouponList && goodsCouponList.length > 0"
|
||||
@click="couponPopupShow = true">
|
||||
<view class="concrete_item_">
|
||||
<view class="concrete_item_title">领券</view>
|
||||
<view class="concrete_item_value coupon_tags_preview">
|
||||
<text v-for="(cItem, cIdx) in goodsCouponList.slice(0, 3)" :key="cItem.templateId || cIdx"
|
||||
class="preview_coupon_tag">
|
||||
{{ cItem.title || '优惠券' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
|
||||
<!-- <view class="concrete_item">
|
||||
<view class="concrete_item_">
|
||||
<view class="concrete_item_title">收货地址</view>
|
||||
@@ -347,6 +363,75 @@
|
||||
<EvaluateDialog ref="evaluateDialog" v-if="evaluateDialogShow" :show="evaluateDialogShow"
|
||||
@close="evaluateDialogShow = false" :evalId="id" :mainGraph="orderInfo.mainGraph" :name="orderInfo.name">
|
||||
</EvaluateDialog>
|
||||
<!-- 优惠券弹窗 (图二高保真) -->
|
||||
<up-popup v-model:show="couponPopupShow" mode="bottom" :round="16" :closeable="true" :safeAreaInsetBottom="true"
|
||||
@close="couponPopupShow = false">
|
||||
<view class="goods_coupon_popup_container">
|
||||
<view class="popup_header">
|
||||
<text class="popup_title">优惠券</text>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券列表 (可滑动) -->
|
||||
<scroll-view scroll-y class="popup_coupon_scroll">
|
||||
<view class="popup_coupon_list">
|
||||
<view v-for="(coupon, index) in goodsCouponList" :key="coupon.templateId || coupon.id || index"
|
||||
class="coupon-card" :class="{ 'card-disabled': getCardDisabled(coupon) }">
|
||||
<!-- 左侧：金额与门槛 -->
|
||||
<view class="card-left">
|
||||
<view class="price-box">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ getDiscountAmount(coupon) }}</text>
|
||||
</view>
|
||||
<text class="condition">{{ getThresholdText(coupon) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<view class="notch top-notch"></view>
|
||||
<view class="divider-line"></view>
|
||||
<view class="notch bottom-notch"></view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：详细内容与操作按钮 -->
|
||||
<view class="card-right">
|
||||
<view class="info-content">
|
||||
<view class="coupon-title">{{ coupon.title }}</view>
|
||||
<view class="tag-row">
|
||||
<text class="coupon-tag" :class="{ 'tag-disabled': getCardDisabled(coupon) }">
|
||||
{{ getTagText(coupon) }}
|
||||
</text>
|
||||
<text class="coupon-scope">{{ getScopeText(coupon) }}</text>
|
||||
</view>
|
||||
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 (图二高保真: 立即领取 / 已领取) -->
|
||||
<view class="btn-box">
|
||||
<view v-if="!getCardReceived(coupon) && getCouponCanReceive(coupon)" class="action-btn btn-claim"
|
||||
@click="onReceiveGoodsCoupon(coupon, index)">
|
||||
立即领取
|
||||
</view>
|
||||
<view v-else-if="getCardReceived(coupon)" class="action-btn btn-received">
|
||||
已领取
|
||||
</view>
|
||||
<view v-else class="action-btn btn-disabled">
|
||||
{{ coupon.receiveStatusText || '已达上限' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部确定按钮 -->
|
||||
<view class="popup_bottom_btn_wrap">
|
||||
<view class="popup_btn_ok" @click="couponPopupShow = false">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
|
||||
<view class="hideCanvasView">
|
||||
<canvas id="myCanvas" canvas-id="myCanvas" :style="{
|
||||
height: bgObj.height + 'px',
|
||||
@@ -358,6 +443,7 @@
|
||||
|
||||
<script>
|
||||
import { getGoodsDetail, addGoods, getGoodsSpecs, getGoodsSpecsInfo } from "@/api/product.js";
|
||||
import { getGoodsCouponList, receiveCoupon } from "@/api/coupon.js";
|
||||
import { getValue, PRODUCT_DELIVERY_TIME, ACTIVITY_TYPE } from "@/utils/enumUtils.js";
|
||||
import { copyData } from "@/utils/index.js";
|
||||
import Evaluation from "@/pages/other_package/productInfo/evaluation.vue";
|
||||
@@ -400,6 +486,8 @@ export default {
|
||||
id: 0,
|
||||
shareShow: false,
|
||||
addressShow: false, // 收件地址选择
|
||||
couponPopupShow: false, // 优惠券弹框显示 (图二)
|
||||
goodsCouponList: [], // 商品可用优惠券列表
|
||||
evaluateDialogShow: false, // 评价弹框显示
|
||||
shareOpen: false,
|
||||
tuiList: ["破损", "污渍", "划痕", "标签", "其他"],
|
||||
@@ -1000,6 +1088,7 @@ export default {
|
||||
/<img([^>]*?)>/gi,
|
||||
'<img$1 style="max-width:100%;height:auto;display:block;" loading="lazy">'
|
||||
);
|
||||
this.fetchGoodsCouponList();
|
||||
}
|
||||
},
|
||||
/**
|
||||
@@ -1396,6 +1485,104 @@ export default {
|
||||
onGoMore() {
|
||||
this.evaluateDialogShow = true;
|
||||
},
|
||||
// 获取商品优惠券列表
|
||||
async fetchGoodsCouponList() {
|
||||
if (!this.id) return;
|
||||
try {
|
||||
const res = await getGoodsCouponList({ goodsId: this.id });
|
||||
if (res && res.bizcode === 100) {
|
||||
this.goodsCouponList = res.data || [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("获取商品优惠券失败:", e);
|
||||
}
|
||||
},
|
||||
// 弹窗中点击“立即领取”
|
||||
async onReceiveGoodsCoupon(coupon, index) {
|
||||
const templateId = coupon.templateId || coupon.id;
|
||||
if (!templateId) return;
|
||||
try {
|
||||
const res = await receiveCoupon({ templateId });
|
||||
if (res && res.bizcode === 100) {
|
||||
uni.showToast({
|
||||
title: "领取成功",
|
||||
icon: "success",
|
||||
});
|
||||
this.$set(this.goodsCouponList[index], "received", true);
|
||||
this.$set(this.goodsCouponList[index], "receiveStatus", 1);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res?.msg || "领取失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("领取优惠券失败:", e);
|
||||
uni.showToast({
|
||||
title: "领取失败，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
getDiscountAmount(coupon) {
|
||||
return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
|
||||
},
|
||||
getThresholdText(coupon) {
|
||||
const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
|
||||
if (threshold === 0) {
|
||||
return "无门槛";
|
||||
}
|
||||
return `满${threshold}元可用`;
|
||||
},
|
||||
getTagText(coupon) {
|
||||
if (coupon.scopeType === 1) return "通用券";
|
||||
if (coupon.scopeType === 2) return "商品券";
|
||||
if (coupon.scopeType === 3 || coupon.scopeType === 4) return "品类券";
|
||||
if (coupon.scopeText && coupon.scopeText.includes("通用")) return "通用券";
|
||||
return "通用券";
|
||||
},
|
||||
getScopeText(coupon) {
|
||||
if (coupon.scopeText) return coupon.scopeText;
|
||||
if (coupon.scopeType === 1) return "所有商品可用";
|
||||
if (coupon.scopeType === 2) return "指定商品可用";
|
||||
if (coupon.scopeType === 3) return "指定类目可用";
|
||||
if (coupon.scopeType === 4) return "指定专区商品可用";
|
||||
return "所有商品可用";
|
||||
},
|
||||
getValidityText(coupon) {
|
||||
if (coupon.validDays && coupon.validDays > 0) {
|
||||
return `领取之日起${coupon.validDays}天内有效`;
|
||||
}
|
||||
if (coupon.useEndTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
|
||||
}
|
||||
if (coupon.receiveEndTime) {
|
||||
return `截止时间 ${this.formatTime(coupon.receiveEndTime)}`;
|
||||
}
|
||||
return "领取之日起30天内有效";
|
||||
},
|
||||
getCardReceived(coupon) {
|
||||
return coupon.received || coupon.receiveStatus === 1;
|
||||
},
|
||||
getCouponCanReceive(coupon) {
|
||||
return coupon.canReceive !== false && coupon.receiveStatus !== 2;
|
||||
},
|
||||
getCardDisabled(coupon) {
|
||||
return coupon.receiveStatus === 2 || (coupon.canReceive === false && !coupon.received && coupon.receiveStatus !== 1);
|
||||
},
|
||||
formatTime(time) {
|
||||
if (!time) return "";
|
||||
if (typeof time === "string" && time.includes("-")) return time;
|
||||
const date = new Date(Number(time));
|
||||
if (isNaN(date.getTime())) return String(time);
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
const hh = String(date.getHours()).padStart(2, "0");
|
||||
const mm = String(date.getMinutes()).padStart(2, "0");
|
||||
const ss = String(date.getSeconds()).padStart(2, "0");
|
||||
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1978,9 +2165,288 @@ export default {
|
||||
top: 10000px;
|
||||
left: 10000px;
|
||||
z-index: 1000000000000;
|
||||
// background-color: rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 领券预览标签样式 (图一高保真) */
|
||||
.coupon_tags_preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
overflow: hidden;
|
||||
max-width: 520rpx;
|
||||
|
||||
.preview_coupon_tag {
|
||||
display: inline-block;
|
||||
font-size: 22rpx;
|
||||
color: #ff2442;
|
||||
background: #ffe4e6;
|
||||
border: 1px solid #ff99a4;
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 12rpx;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 170rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 领券弹窗组件 (图二高保真) */
|
||||
.goods_coupon_popup_container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
padding: 32rpx 24rpx 40rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.popup_header {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.popup_title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.popup_coupon_scroll {
|
||||
max-height: 700rpx;
|
||||
min-height: 300rpx;
|
||||
|
||||
.popup_coupon_list {
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popup_bottom_btn_wrap {
|
||||
margin-top: 24rpx;
|
||||
padding: 0 16rpx;
|
||||
|
||||
.popup_btn_ok {
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 42rpx;
|
||||
box-shadow: 0 8rpx 20rpx rgba(122, 53, 246, 0.25);
|
||||
transition: transform 0.1s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗内的优惠券卡片高保真样式 */
|
||||
.coupon-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(253, 28, 36, 0.06);
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.card-disabled {
|
||||
background: #f5f5f5 !important;
|
||||
|
||||
.card-left {
|
||||
.price-box {
|
||||
color: #a0a0a0 !important;
|
||||
}
|
||||
|
||||
.condition {
|
||||
color: #999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
color: #333333 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-left {
|
||||
width: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #ff2442;
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 60rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff2442;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.divider-wrapper {
|
||||
position: relative;
|
||||
width: 2rpx;
|
||||
align-self: stretch;
|
||||
|
||||
.divider-line {
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed #fca5a5;
|
||||
}
|
||||
|
||||
.notch {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-notch {
|
||||
top: -12rpx;
|
||||
}
|
||||
|
||||
.bottom-notch {
|
||||
bottom: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-disabled .divider-line {
|
||||
border-left: 2rpx dashed #dddddd !important;
|
||||
}
|
||||
|
||||
.card-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 20rpx 24rpx;
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 12rpx;
|
||||
|
||||
.coupon-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
.coupon-tag {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
color: #ff2442;
|
||||
background: #ffe4e6;
|
||||
border: 1px solid #ff99a4;
|
||||
border-radius: 6rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&.tag-disabled {
|
||||
color: #888888 !important;
|
||||
background: #eeeeee !important;
|
||||
border: 1px solid #cccccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-scope {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-validity {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
flex-shrink: 0;
|
||||
|
||||
.action-btn {
|
||||
width: 130rpx;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.btn-claim {
|
||||
background: #ff1e38;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.btn-received {
|
||||
background: #ffe8eb;
|
||||
color: #ff2442;
|
||||
border: 1px solid #ff4d5e;
|
||||
line-height: 52rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.btn-disabled {
|
||||
background: #eeeeee;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,454 +0,0 @@
|
||||
<template>
|
||||
<view class="sort_warp" :class="platformType ? '' : 'iosplatformType'">
|
||||
<TopSafe></TopSafe>
|
||||
<view class="sort_header">
|
||||
<!-- 分类切换 -->
|
||||
<view class="sort_category_header">
|
||||
<view :class="selCategory === 1
|
||||
? 'category_item category_item_sel'
|
||||
: 'category_item'
|
||||
" @click="checkCategory(1)">
|
||||
<view>分类</view>
|
||||
<view v-if="selCategory === 1" class="category_item_sel_but"></view>
|
||||
</view>
|
||||
<!-- <view :class="selCategory === 2 ? 'category_item category_item_sel':'category_item'" @click="checkCategory(2)">
|
||||
<view>品牌</view>
|
||||
<view v-if="selCategory === 2" class="category_item_sel_but"></view>
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- 搜索 -->
|
||||
<view style="width: 200rpx" @click="jumpSearch" class="jump-search">
|
||||
<up-search shape="square" bgColor="#EEEEEEFF" color="#666666FF" :showAction="false"
|
||||
placeholder="搜索"></up-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-menu-wrap">
|
||||
<!-- 左侧类别 -->
|
||||
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
|
||||
<view v-for="(item, index) in tabbarList" :key="index" class="u-tab-item"
|
||||
:class="[current == index ? 'u-tab-item-active' : '']" :data-current="index"
|
||||
@tap.stop="swichMenu(item, index)">
|
||||
<text class="u-line-1">{{ item.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 商品类别数据 -->
|
||||
<scroll-view scroll-y class="right-box" :scroll-top="rightScrollTop">
|
||||
<!-- banner图 -->
|
||||
<view style="padding: 0rpx 20rpx" v-if="bannerList && bannerList.length > 0">
|
||||
<up-swiper :list="bannerList" height="80px"></up-swiper>
|
||||
</view>
|
||||
<view class="page-view">
|
||||
<!-- 这里还有一层循环 -->
|
||||
<up-loading-page :loading="tabbarContentLoading"></up-loading-page>
|
||||
<view class="class-item" v-for="(item, index) in tabbarContentList" :key="index">
|
||||
<view class="item-title">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="item-container" v-if="item.foods && item.foods.length !== 0">
|
||||
<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="item1.id || index1" @click="jumpInfo(item1)">
|
||||
<image class="item-menu-image" :src="item1.icon ? item1.icon : '/static/common/def_img.jpg'"
|
||||
mode="aspectFill" lazy-load>
|
||||
</image>
|
||||
<view class="item-menu-name">{{ item1.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<view class="not_order_warp_img"><up-image src="https://static.tbmall.xin/static/not_shopping.png"
|
||||
width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
|
||||
<view class="not_order_msg_warp">暂无分类，快去添加吧~</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- #ifndef H5 || MP-WEIXIN-->
|
||||
<CustomTabBar :tabIndex="1" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCascadeCategory, getCarouselImage } from "@/api/common.js";
|
||||
import CustomTabBar from "@/components/custom-tab-bar.vue";
|
||||
import { APP_PAGE_TYPE } from "@/utils/enumUtils.js";
|
||||
import TopSafe from '@/components/common/top-safe.nvue';
|
||||
|
||||
export default {
|
||||
components: { CustomTabBar, TopSafe },
|
||||
data() {
|
||||
return {
|
||||
selCategory: 1,
|
||||
scrollTop: 0, //tab标题的滚动条位置
|
||||
rightScrollTop: 0, // 右侧内容的滚动条位置
|
||||
current: null, // 预设当前项的值
|
||||
menuHeight: 0, // 左边菜单的高度
|
||||
menuItemHeight: 0, // 左边菜单item的高度
|
||||
bannerList: [],
|
||||
tabbarList: [], // 左侧的主分类
|
||||
tabbarContentList: [], // 右侧内容的分类
|
||||
tabbarContentLoading: false,
|
||||
platformType: true,
|
||||
isFromSortShop: false,
|
||||
};
|
||||
},
|
||||
|
||||
onShow() {
|
||||
/*#ifdef APP-PLUS*/
|
||||
uni.hideTabBar({
|
||||
animation: false,
|
||||
});
|
||||
const appUpdate = uni.getStorageSync("platform");
|
||||
this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
|
||||
/*#endif*/
|
||||
|
||||
const isBackFromSortShop = this.isFromSortShop;
|
||||
this.isFromSortShop = false;
|
||||
|
||||
this.getSort(0).then((resp) => {
|
||||
if (resp && resp.length !== 0) {
|
||||
this.tabbarList = resp;
|
||||
let targetIndex = 0;
|
||||
let fData = resp[0];
|
||||
|
||||
if (isBackFromSortShop) {
|
||||
const sortId = uni.getStorageSync("sortId");
|
||||
if (sortId && sortId !== 0) {
|
||||
resp.forEach((item, index) => {
|
||||
if (item.id === sortId) {
|
||||
fData = item;
|
||||
targetIndex = index;
|
||||
}
|
||||
});
|
||||
} else if (this.current !== null && this.current >= 0 && this.current < resp.length) {
|
||||
targetIndex = this.current;
|
||||
fData = resp[targetIndex];
|
||||
}
|
||||
} else {
|
||||
uni.removeStorageSync("sortId");
|
||||
this.current = 0;
|
||||
this.scrollTop = 0;
|
||||
targetIndex = 0;
|
||||
fData = resp[0];
|
||||
}
|
||||
|
||||
this.swichMenu(fData, targetIndex, true);
|
||||
}
|
||||
});
|
||||
this.getCarouselImage();
|
||||
},
|
||||
methods: {
|
||||
checkCategory(val) {
|
||||
this.selCategory = val;
|
||||
},
|
||||
// 查询轮播图
|
||||
async getCarouselImage() {
|
||||
const params = {
|
||||
pageUi: APP_PAGE_TYPE.SORT,
|
||||
};
|
||||
const resp = await getCarouselImage(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data || [];
|
||||
this.bannerList =
|
||||
data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
|
||||
}
|
||||
},
|
||||
jumpSearch(item) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/rwa_package/insights/search",
|
||||
});
|
||||
},
|
||||
jumpInfo(item) {
|
||||
console.log(item, "item");
|
||||
this.isFromSortShop = true;
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/other_package/productInfo/productInfo?id=${item.id}`,
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url: `/pages/rwa_package/shop/sort-shop?id=${item.id}&name=${item.name}`,
|
||||
});
|
||||
},
|
||||
// 查询分类
|
||||
async getSort(pId) {
|
||||
|
||||
const params = {
|
||||
parentId: pId,
|
||||
};
|
||||
console.log('查询分类', params, pId);
|
||||
const resp = await getCascadeCategory(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
return resp.data;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
getImg() {
|
||||
return Math.floor(Math.random() * 35);
|
||||
},
|
||||
// 点击左边的栏目切换
|
||||
async swichMenu(item, index, force = false) {
|
||||
console.log('点击左边的栏目切换', item, index, "item, index");
|
||||
if (!force && index == this.current && this.tabbarContentList.length > 0) return;
|
||||
if (item && item.id) {
|
||||
uni.setStorageSync("sortId", item.id);
|
||||
}
|
||||
this.rightScrollTop = 0;
|
||||
this.tabbarContentLoading = true;
|
||||
const firstData = await this.getSort(item.id);
|
||||
for (let fItem of firstData) {
|
||||
const twoData = await this.getSort(fItem.id);
|
||||
fItem.foods = twoData;
|
||||
}
|
||||
this.tabbarContentList = firstData;
|
||||
this.current = index;
|
||||
// 如果为0，意味着尚未初始化
|
||||
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
||||
await this.getElRect("menu-scroll-view", "menuHeight");
|
||||
await this.getElRect("u-tab-item", "menuItemHeight");
|
||||
}
|
||||
// 将菜单活动item垂直居中
|
||||
this.scrollTop =
|
||||
index * this.menuItemHeight +
|
||||
this.menuItemHeight / 2 -
|
||||
this.menuHeight / 2;
|
||||
this.tabbarContentLoading = false;
|
||||
},
|
||||
|
||||
// 获取一个目标元素的高度
|
||||
getElRect(elClass, dataVal) {
|
||||
return new Promise((resolve) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select("." + elClass)
|
||||
.fields({ size: true }, (res) => {
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.getElRect(elClass, dataVal).then(resolve);
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
this[dataVal] = res.height;
|
||||
resolve(res);
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
},
|
||||
// 分享给朋友
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'TB聚合商城', // 分享标题
|
||||
path: '/pages/sort/sort' // 分享路径
|
||||
}
|
||||
},
|
||||
// 分享到朋友圈
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: 'TB聚合商城',
|
||||
query: ''
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sort_warp {
|
||||
height: 100vh;
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - var(--window-top, 0px) - var(--window-bottom, 0px));
|
||||
/* #endif */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sort_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx 10rpx;
|
||||
flex-shrink: 0;
|
||||
background-color: #fff;
|
||||
z-index: 10;
|
||||
|
||||
/* #ifdef MP-WEIXIN */
|
||||
margin-top: 80rpx;
|
||||
/* #endif */
|
||||
|
||||
.sort_category_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.jump-search {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.category_item {
|
||||
width: 140rpx;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.category_item_sel {
|
||||
font-size: 44rpx;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.category_item_sel_but {
|
||||
height: 8rpx;
|
||||
width: 50rpx;
|
||||
background: $app-bt-bj;
|
||||
margin-top: 4rpx;
|
||||
margin-left: 12%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sort_content {}
|
||||
|
||||
.u-menu-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.u-search-inner {
|
||||
background-color: rgb(234, 234, 234);
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 16rpx;
|
||||
}
|
||||
|
||||
.u-search-text {
|
||||
font-size: 26rpx;
|
||||
color: $u-tips-color;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
background: #f6f6f6;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
padding-bottom: 0rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.u-tab-item {
|
||||
height: 110rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
padding: 0 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.u-tab-item-active {
|
||||
position: relative;
|
||||
color: #000;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.u-tab-item-active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 4px solid $app-bt-bj;
|
||||
height: 32rpx;
|
||||
left: 0;
|
||||
top: 39rpx;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: rgb(250, 250, 250);
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
padding-bottom: 0rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.page-view {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.class-item {
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #fff;
|
||||
padding: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 26rpx;
|
||||
color: $u-main-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-menu-name {
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: $u-main-color;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.thumb-box {
|
||||
width: 33.333333%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.item-menu-image {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
</style>
|
||||
+16
-7
@@ -125,11 +125,12 @@
|
||||
<view class="product_info_box">
|
||||
<view class="product_title">{{ item.name || item.title }}</view>
|
||||
|
||||
<view class="product_tags_row">
|
||||
<text class="tag_item tag_blue" v-if="item.tags && item.tags[0]">{{ item.tags[0] }}</text>
|
||||
<text class="tag_item tag_green" v-if="item.tags && item.tags[1]">{{ item.tags[1] }}</text>
|
||||
<text class="tag_item tag_blue" v-if="!item.tags">专业检测</text>
|
||||
<text class="tag_item tag_green" v-if="!item.tags">生态有机</text>
|
||||
<view class="product_tags_row" v-if="item.sellingPoint && getSellingPointTags(item.sellingPoint).length > 0">
|
||||
<text
|
||||
class="tag_item tag_green"
|
||||
v-for="(tag, tIndex) in getSellingPointTags(item.sellingPoint)"
|
||||
:key="tIndex"
|
||||
>{{ tag }}</text>
|
||||
</view>
|
||||
|
||||
<view class="product_price_row">
|
||||
@@ -230,6 +231,13 @@ export default {
|
||||
this.fetchCategories(isBackFromSortShop);
|
||||
},
|
||||
methods: {
|
||||
getSellingPointTags(sellingPoint) {
|
||||
if (!sellingPoint || typeof sellingPoint !== 'string') return [];
|
||||
return sellingPoint
|
||||
.split(/[,，]/)
|
||||
.map(t => t.trim())
|
||||
.filter(Boolean);
|
||||
},
|
||||
// 异步查询级联分类接口 (common/getCascadeCategory)
|
||||
async getCategoryApi(pId) {
|
||||
try {
|
||||
@@ -439,8 +447,8 @@ export default {
|
||||
jumpInfo(item) {
|
||||
this.isFromSortShop = true;
|
||||
uni.navigateTo({
|
||||
url: `/pages/rwa_package/shop/sort-shop?id=${item.id}&name=${encodeURIComponent(item.name || item.title || '')}`,
|
||||
});
|
||||
url: '/pages/other_package/productInfo/productInfo?id=' + item.id,
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -844,6 +852,7 @@ page {
|
||||
|
||||
.product_tags_row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
margin-top: 8rpx;
|
||||
|
||||
|
||||
+50
-13
@@ -281,6 +281,7 @@ export default {
|
||||
socketStatus: 'connecting',
|
||||
socket: null,
|
||||
pollingTimer: null,
|
||||
pageHidden: false,
|
||||
uploadingImage: false,
|
||||
uploadingAttachment: false,
|
||||
recording: false,
|
||||
@@ -411,20 +412,36 @@ export default {
|
||||
const page = pages.length ? pages[pages.length - 1] : null
|
||||
this.currentEntryOptions = { ...((page && page.options) || {}), ...(this.entryOptions || {}) }
|
||||
this.restorePendingContext()
|
||||
this.appShowHandler = () => {
|
||||
if (!this.pageHidden) this.resume({ forceReconnect: true })
|
||||
}
|
||||
this.appHideHandler = () => {
|
||||
if (!this.pageHidden) this.suspend()
|
||||
}
|
||||
uni.$on('kefu-app-show', this.appShowHandler)
|
||||
uni.$on('kefu-app-hide', this.appHideHandler)
|
||||
this.initialize()
|
||||
this.$nextTick(() => this.measureScrollViewport())
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.unbindAppLifecycle()
|
||||
this.cancelVoiceRecording()
|
||||
this.stopRealtime()
|
||||
this.clearVirtualListTimers()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unbindAppLifecycle()
|
||||
this.cancelVoiceRecording()
|
||||
this.stopRealtime()
|
||||
this.clearVirtualListTimers()
|
||||
},
|
||||
methods: {
|
||||
unbindAppLifecycle() {
|
||||
if (this.appShowHandler) uni.$off('kefu-app-show', this.appShowHandler)
|
||||
if (this.appHideHandler) uni.$off('kefu-app-hide', this.appHideHandler)
|
||||
this.appShowHandler = null
|
||||
this.appHideHandler = null
|
||||
},
|
||||
async initialize() {
|
||||
// #ifdef H5
|
||||
const previewHash = typeof window !== 'undefined' ? window.location.hash : ''
|
||||
@@ -467,27 +484,39 @@ export default {
|
||||
async loadLatestMessages({ silent = false } = {}) {
|
||||
if (!this.member || !this.member.id) return
|
||||
try {
|
||||
let result = await getMessages({ userId: this.member.id, page: 1, pageSize: PAGE_SIZE })
|
||||
const firstPage = result.messages || {}
|
||||
const totalPage = Number(firstPage.totalPage || 1)
|
||||
if (totalPage > 1) {
|
||||
const knownLastPage = this.conversation && this.conversation.id && this.totalPage
|
||||
? Number(this.totalPage)
|
||||
: 1
|
||||
let result = await getMessages({
|
||||
userId: this.member.id,
|
||||
conversationId: this.conversation && this.conversation.id,
|
||||
page: knownLastPage,
|
||||
pageSize: PAGE_SIZE
|
||||
})
|
||||
let pageResult = result.messages || {}
|
||||
let totalPage = Number(pageResult.totalPage || 1)
|
||||
// 首次加载从第 1 页取得会话信息；只有确实存在后续页时才再查末页。
|
||||
// 后续轮询直接查已知末页，避免每 4 秒重复请求首页和末页。
|
||||
if (totalPage > knownLastPage) {
|
||||
result = await getMessages({
|
||||
userId: this.member.id,
|
||||
conversationId: result.conversation && result.conversation.id,
|
||||
page: totalPage,
|
||||
pageSize: PAGE_SIZE
|
||||
})
|
||||
pageResult = result.messages || {}
|
||||
totalPage = Number(pageResult.totalPage || totalPage)
|
||||
}
|
||||
this.conversation = result.conversation || this.conversation
|
||||
if (this.conversation && this.conversation.id) {
|
||||
await markMemberMessagesRead({ userId: this.member.id, conversationId: this.conversation.id }).catch(() => {})
|
||||
}
|
||||
const page = result.messages || {}
|
||||
const page = pageResult
|
||||
this.currentPage = Number(page.curPage || totalPage || 1)
|
||||
this.totalPage = Number(page.totalPage || totalPage || 1)
|
||||
this.hasEarlier = this.currentPage > 1
|
||||
const incoming = page.entitys || []
|
||||
const added = this.mergeMessages(incoming)
|
||||
if (added && this.conversation && this.conversation.id && incoming.some(item => Number(item.senderType) !== 2)) {
|
||||
await markMemberMessagesRead({ userId: this.member.id, conversationId: this.conversation.id }).catch(() => {})
|
||||
}
|
||||
if (added && this.userNearBottom) this.$nextTick(() => this.scrollToBottom(false))
|
||||
if (added && !this.userNearBottom) this.showNewMessageButton = true
|
||||
} catch (error) {
|
||||
@@ -582,7 +611,7 @@ export default {
|
||||
this.stopPolling()
|
||||
this.loadLatestMessages({ silent: true })
|
||||
}
|
||||
if (status === 'offline') this.startPolling()
|
||||
if (status === 'connecting' || status === 'offline') this.startPolling()
|
||||
},
|
||||
|
||||
handleSocketEvent(event) {
|
||||
@@ -623,7 +652,7 @@ export default {
|
||||
},
|
||||
|
||||
startPolling() {
|
||||
if (this.pollingTimer) return
|
||||
if (this.pageHidden || this.pollingTimer) return
|
||||
this.socketStatus = 'polling'
|
||||
this.loadLatestMessages({ silent: true })
|
||||
this.pollingTimer = setInterval(() => this.loadLatestMessages({ silent: true }), POLLING_INTERVAL)
|
||||
@@ -1507,15 +1536,23 @@ export default {
|
||||
redirectToLogin()
|
||||
},
|
||||
|
||||
async resume() {
|
||||
async resume({ forceReconnect = false, pageVisible = false } = {}) {
|
||||
if (pageVisible) this.pageHidden = false
|
||||
if (this.pageHidden) return
|
||||
if (this.previewMode) return
|
||||
// The socket is intentionally closed while the page is hidden. Reconcile any AI
|
||||
// messages created during that gap before reconnecting realtime delivery.
|
||||
if (this.member) await this.loadLatestMessages({ silent: true })
|
||||
if (this.member && !this.socket) this.connectSocket()
|
||||
if (!this.member) return
|
||||
if (!this.socket) {
|
||||
this.connectSocket()
|
||||
return
|
||||
}
|
||||
this.socket.reconnectNow(forceReconnect)
|
||||
},
|
||||
|
||||
suspend() {
|
||||
suspend({ pageHidden = false } = {}) {
|
||||
if (pageHidden) this.pageHidden = true
|
||||
this.stopRealtime()
|
||||
},
|
||||
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
import { getStorageFun, TOKEN_NAME, USER_DATA } from '@/utils/auth.js'
|
||||
import { getCurrentMember } from './api.js'
|
||||
import { KefuSocket } from './kefu-socket.js'
|
||||
|
||||
export const KEFU_REALTIME_EVENT = 'kefu-realtime-event'
|
||||
export const KEFU_REALTIME_STATUS = 'kefu-realtime-status'
|
||||
|
||||
let socket = null
|
||||
let connectionParams = null
|
||||
let startingPromise = null
|
||||
|
||||
function storedMember() {
|
||||
const value = getStorageFun(USER_DATA)
|
||||
if (!value) return null
|
||||
if (typeof value === 'object') return value
|
||||
try {
|
||||
return JSON.parse(value)
|
||||
} catch (error) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function resolveMemberId(explicitUserId) {
|
||||
if (explicitUserId) return explicitUserId
|
||||
const cached = storedMember()
|
||||
if (cached && (cached.id || cached.userId)) return cached.id || cached.userId
|
||||
const member = await getCurrentMember()
|
||||
return member && (member.id || member.userId)
|
||||
}
|
||||
|
||||
function createSocket() {
|
||||
const instance = new KefuSocket({
|
||||
onStatus(status) {
|
||||
uni.$emit(KEFU_REALTIME_STATUS, status)
|
||||
},
|
||||
onEvent(event) {
|
||||
uni.$emit(KEFU_REALTIME_EVENT, event)
|
||||
},
|
||||
})
|
||||
socket = instance
|
||||
instance.connect(connectionParams)
|
||||
return instance
|
||||
}
|
||||
|
||||
/**
|
||||
* Start the foreground customer-service connection. Calls are idempotent so
|
||||
* several pages can consume the same stream without opening duplicate sockets.
|
||||
*/
|
||||
export function startKefuRealtime(options = {}) {
|
||||
if (!getStorageFun(TOKEN_NAME)) {
|
||||
resetKefuRealtime()
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
if (startingPromise) return startingPromise
|
||||
|
||||
startingPromise = resolveMemberId(options.userId)
|
||||
.then((userId) => {
|
||||
if (!userId) return null
|
||||
const nextParams = {
|
||||
userId,
|
||||
mchId: options.mchId || (connectionParams && connectionParams.mchId) || 1002,
|
||||
}
|
||||
const sameMember = connectionParams && String(connectionParams.userId) === String(userId)
|
||||
connectionParams = nextParams
|
||||
if (socket && sameMember) {
|
||||
socket.reconnectNow()
|
||||
return socket
|
||||
}
|
||||
if (socket) socket.close()
|
||||
socket = null
|
||||
return createSocket()
|
||||
})
|
||||
.catch(() => null)
|
||||
.finally(() => {
|
||||
startingPromise = null
|
||||
})
|
||||
return startingPromise
|
||||
}
|
||||
|
||||
export function suspendKefuRealtime() {
|
||||
if (socket) socket.close()
|
||||
socket = null
|
||||
uni.$emit(KEFU_REALTIME_STATUS, 'closed')
|
||||
}
|
||||
|
||||
export function resumeKefuRealtime() {
|
||||
if (!getStorageFun(TOKEN_NAME)) {
|
||||
resetKefuRealtime()
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
return startKefuRealtime(connectionParams || {})
|
||||
}
|
||||
|
||||
export function resetKefuRealtime() {
|
||||
suspendKefuRealtime()
|
||||
connectionParams = null
|
||||
}
|
||||
@@ -1,6 +1,39 @@
|
||||
import { KEFU_BASE_URL } from '@/utils/config.js'
|
||||
|
||||
const RECONNECT_DELAYS = [2000, 4000, 8000, 15000, 30000]
|
||||
const HEARTBEAT_INTERVAL = 20000
|
||||
const HEARTBEAT_TIMEOUT = 45000
|
||||
const CONNECT_TIMEOUT = 10000
|
||||
|
||||
function decodeSocketPayload(raw) {
|
||||
if (typeof raw === 'string') return raw
|
||||
|
||||
let bytes = null
|
||||
if (typeof ArrayBuffer !== 'undefined' && raw instanceof ArrayBuffer) {
|
||||
bytes = new Uint8Array(raw)
|
||||
} else if (typeof ArrayBuffer !== 'undefined' && ArrayBuffer.isView && ArrayBuffer.isView(raw)) {
|
||||
bytes = new Uint8Array(raw.buffer, raw.byteOffset, raw.byteLength)
|
||||
}
|
||||
if (!bytes) return raw
|
||||
|
||||
if (typeof TextDecoder !== 'undefined') {
|
||||
try {
|
||||
return new TextDecoder('utf-8').decode(bytes)
|
||||
} catch (error) {
|
||||
// Fall through to the decoder supported by older App WebViews.
|
||||
}
|
||||
}
|
||||
|
||||
let encoded = ''
|
||||
for (let index = 0; index < bytes.length; index += 1) {
|
||||
encoded += `%${bytes[index].toString(16).padStart(2, '0')}`
|
||||
}
|
||||
try {
|
||||
return decodeURIComponent(encoded)
|
||||
} catch (error) {
|
||||
return Array.from(bytes).map(code => String.fromCharCode(code)).join('')
|
||||
}
|
||||
}
|
||||
|
||||
function getSocketBaseUrl() {
|
||||
const override = uni.getStorageSync('kefu-socket-base-url')
|
||||
@@ -12,6 +45,14 @@ function getSocketBaseUrl() {
|
||||
return baseUrl.replace(/^http:/, 'ws:').replace(/^https:/, 'wss:')
|
||||
}
|
||||
|
||||
function shouldUseNativeSocket() {
|
||||
let enabled = false
|
||||
// #ifdef H5
|
||||
enabled = typeof window !== 'undefined' && typeof window.WebSocket === 'function'
|
||||
// #endif
|
||||
return enabled
|
||||
}
|
||||
|
||||
export class KefuSocket {
|
||||
constructor(options = {}) {
|
||||
this.options = options
|
||||
@@ -22,6 +63,8 @@ export class KefuSocket {
|
||||
this.reconnectCount = 0
|
||||
this.reconnectTimer = null
|
||||
this.heartbeatTimer = null
|
||||
this.connectTimer = null
|
||||
this.lastServerActivityAt = 0
|
||||
this.networkListener = status => this.handleNetworkChange(status)
|
||||
this.browserOnlineListener = () => this.handleNetworkChange({ isConnected: true })
|
||||
this.browserOfflineListener = () => this.handleNetworkChange({ isConnected: false })
|
||||
@@ -41,30 +84,49 @@ export class KefuSocket {
|
||||
conversationId ? `conversationId=${encodeURIComponent(conversationId)}` : ''
|
||||
].filter(Boolean).join('&')
|
||||
|
||||
const task = uni.connectSocket({
|
||||
url: `${getSocketBaseUrl()}/ws/kefu?${query}`,
|
||||
complete: () => {}
|
||||
})
|
||||
const url = `${getSocketBaseUrl()}/ws/kefu?${query}`
|
||||
// H5 使用浏览器原生 WebSocket。部分 uni-app H5 版本的 SocketTask
|
||||
// 不会稳定触发 onOpen，页面会误判为断线并永久停留在轮询状态。
|
||||
const useNativeSocket = shouldUseNativeSocket()
|
||||
const task = useNativeSocket
|
||||
? new window.WebSocket(url)
|
||||
: uni.connectSocket({ url, complete: () => {} })
|
||||
this.socketTask = task
|
||||
|
||||
task.onOpen(() => {
|
||||
const onOpen = () => {
|
||||
if (this.socketTask !== task) return
|
||||
this.stopConnectTimeout()
|
||||
this.reconnectCount = 0
|
||||
this.lastServerActivityAt = Date.now()
|
||||
this.options.onStatus && this.options.onStatus('online')
|
||||
this.startHeartbeat(task)
|
||||
})
|
||||
task.onMessage(event => {
|
||||
}
|
||||
const onMessage = event => {
|
||||
if (this.socketTask === task) this.handleMessage(event.data)
|
||||
})
|
||||
task.onError(() => this.handleDisconnect(task))
|
||||
task.onClose(() => this.handleDisconnect(task))
|
||||
}
|
||||
const onDisconnect = () => this.handleDisconnect(task)
|
||||
|
||||
if (useNativeSocket) {
|
||||
task.addEventListener('open', onOpen)
|
||||
task.addEventListener('message', onMessage)
|
||||
task.addEventListener('error', onDisconnect)
|
||||
task.addEventListener('close', onDisconnect)
|
||||
} else {
|
||||
task.onOpen(onOpen)
|
||||
task.onMessage(onMessage)
|
||||
task.onError(onDisconnect)
|
||||
task.onClose(onDisconnect)
|
||||
}
|
||||
this.startConnectTimeout(task)
|
||||
}
|
||||
|
||||
handleMessage(raw) {
|
||||
let event = raw
|
||||
if (typeof raw === 'string') {
|
||||
this.lastServerActivityAt = Date.now()
|
||||
const payload = decodeSocketPayload(raw)
|
||||
let event = payload
|
||||
if (typeof payload === 'string') {
|
||||
try {
|
||||
event = JSON.parse(raw)
|
||||
event = JSON.parse(payload)
|
||||
} catch (error) {
|
||||
return
|
||||
}
|
||||
@@ -77,12 +139,59 @@ export class KefuSocket {
|
||||
this.stopHeartbeat()
|
||||
this.heartbeatTimer = setInterval(() => {
|
||||
if (this.socketTask !== task) return
|
||||
task.send({ data: 'ping', fail: () => this.handleDisconnect(task) })
|
||||
}, 25000)
|
||||
if (this.lastServerActivityAt && Date.now() - this.lastServerActivityAt > HEARTBEAT_TIMEOUT) {
|
||||
this.forceReconnect('heartbeat timeout')
|
||||
return
|
||||
}
|
||||
this.sendSocket(task, 'ping')
|
||||
}, HEARTBEAT_INTERVAL)
|
||||
}
|
||||
|
||||
sendSocket(task, data) {
|
||||
try {
|
||||
if (typeof window !== 'undefined' && task instanceof window.WebSocket) {
|
||||
if (task.readyState === window.WebSocket.OPEN) task.send(data)
|
||||
else this.handleDisconnect(task)
|
||||
return
|
||||
}
|
||||
task.send({ data, fail: () => this.handleDisconnect(task) })
|
||||
} catch (error) {
|
||||
this.handleDisconnect(task)
|
||||
}
|
||||
}
|
||||
|
||||
closeSocket(task, reason) {
|
||||
if (!task) return
|
||||
try {
|
||||
if (typeof window !== 'undefined' && task instanceof window.WebSocket) {
|
||||
task.close(1000, reason)
|
||||
} else {
|
||||
task.close({ code: 1000, reason })
|
||||
}
|
||||
} catch (error) {
|
||||
// App/native runtime may already have released the socket.
|
||||
}
|
||||
}
|
||||
|
||||
startConnectTimeout(task) {
|
||||
this.stopConnectTimeout()
|
||||
this.connectTimer = setTimeout(() => {
|
||||
if (this.socketTask !== task) return
|
||||
this.socketTask = null
|
||||
this.closeSocket(task, 'connect timeout')
|
||||
this.options.onStatus && this.options.onStatus('offline')
|
||||
this.scheduleReconnect()
|
||||
}, CONNECT_TIMEOUT)
|
||||
}
|
||||
|
||||
stopConnectTimeout() {
|
||||
if (this.connectTimer) clearTimeout(this.connectTimer)
|
||||
this.connectTimer = null
|
||||
}
|
||||
|
||||
handleDisconnect(task) {
|
||||
if (task && this.socketTask !== task) return
|
||||
this.stopConnectTimeout()
|
||||
this.stopHeartbeat()
|
||||
this.socketTask = null
|
||||
if (this.manualClose) return
|
||||
@@ -101,27 +210,41 @@ export class KefuSocket {
|
||||
}, delay)
|
||||
}
|
||||
|
||||
reconnectNow() {
|
||||
reconnectNow(force = false) {
|
||||
if (force) {
|
||||
this.forceReconnect('app resumed')
|
||||
return
|
||||
}
|
||||
if (this.manualClose || this.socketTask || !this.connectionParams || !this.networkOnline) return
|
||||
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
|
||||
this.reconnectTimer = null
|
||||
this.connect(this.connectionParams)
|
||||
}
|
||||
|
||||
forceReconnect(reason = 'connection refresh') {
|
||||
if (this.manualClose || !this.connectionParams || !this.networkOnline) return
|
||||
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
|
||||
this.reconnectTimer = null
|
||||
this.stopConnectTimeout()
|
||||
this.stopHeartbeat()
|
||||
|
||||
const task = this.socketTask
|
||||
this.socketTask = null
|
||||
this.closeSocket(task, reason)
|
||||
|
||||
this.options.onStatus && this.options.onStatus('connecting')
|
||||
setTimeout(() => this.connect(this.connectionParams), 0)
|
||||
}
|
||||
|
||||
handleNetworkChange(status = {}) {
|
||||
this.networkOnline = status.isConnected !== false
|
||||
if (!this.networkOnline) {
|
||||
this.options.onStatus && this.options.onStatus('offline')
|
||||
this.stopConnectTimeout()
|
||||
this.stopHeartbeat()
|
||||
const task = this.socketTask
|
||||
this.socketTask = null
|
||||
if (task) {
|
||||
try {
|
||||
task.close({ code: 1000, reason: 'network offline' })
|
||||
} catch (error) {
|
||||
// The platform may have disposed the socket before the offline event.
|
||||
}
|
||||
}
|
||||
this.closeSocket(task, 'network offline')
|
||||
return
|
||||
}
|
||||
this.reconnectNow()
|
||||
@@ -155,6 +278,7 @@ export class KefuSocket {
|
||||
|
||||
close() {
|
||||
this.manualClose = true
|
||||
this.stopConnectTimeout()
|
||||
this.stopHeartbeat()
|
||||
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
|
||||
this.reconnectTimer = null
|
||||
@@ -162,7 +286,7 @@ export class KefuSocket {
|
||||
this.unbindNetworkListeners()
|
||||
const task = this.socketTask
|
||||
this.socketTask = null
|
||||
if (task) task.close({ code: 1000, reason: 'page hidden' })
|
||||
this.closeSocket(task, 'page hidden')
|
||||
this.options.onStatus && this.options.onStatus('closed')
|
||||
}
|
||||
}
|
||||
|
||||
+2
-1
@@ -454,7 +454,7 @@ export const FINANCE_WITHDRAWAL_STATUS = [
|
||||
];
|
||||
|
||||
/**
|
||||
* 页面：1-APP首页，2-APP分类页，3-商学院资讯，4-爆单区，5-好物区,6-积分专区,7-数字积分页 8-新人专享、9-超级补贴、10-限时秒杀
|
||||
* 页面：1-APP首页，2-APP分类页，3-商学院资讯，4-爆单区，5-好物区,6-积分专区,7-数字积分页 8-新人专享、9-超级补贴、10-限时秒杀、11-领券中心
|
||||
* @type {[{value: string, key: string}]}
|
||||
*/
|
||||
export const APP_PAGE_TYPE = {
|
||||
@@ -468,6 +468,7 @@ export const APP_PAGE_TYPE = {
|
||||
NEW: 8,
|
||||
SUPER_SUBSIDY: 9,
|
||||
SECKILL: 10,
|
||||
COUPON: 11,
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user