root/zyejMAll-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'Branch_ccc' (#10) from Branch_ccc into master

Browse Source 
Reviewed-on: #10
This commit is contained in:
root 2024-11-13 11:11:54 +08:00
commit 6703db7cc5
90 changed files with 9958 additions and 5813 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1236
README.md
View File

File diff suppressed because it is too large Load Diff

165
components/fui-icon/fui-icon.js Normal file
View File

@ -0,0 +1,165 @@
export default {
"addressbook":"\ue80c",
"addfriends-fill": "\ue80a",
"addfriends": "\ue80b",
"backspace-fill": "\ue808",
"backspace": "\ue809",
"bankcard-fill": "\ue806",
"bankcard": "\ue807",
"camera-fill": "\ue804",
"camera": "\ue805",
"captcha-fill": "\ue802",
"captcha": "\ue803",
"cart-fill": "\ue800",
"cart": "\ue801",
"classify": "\ue7fe",
"classify-fill": "\ue7ff",
"comment-fill": "\ue7fc",
"comment": "\ue7fd",
"community-fill": "\ue7fa",
"community": "\ue7fb",
"coupon-fill": "\ue7f8",
"coupon": "\ue7f9",
"delete": "\ue7f6",
"delete-fill": "\ue7f7",
"edit": "\ue7f4",
"edit-fill": "\ue7f5",
"fabulous-fill": "\ue7f2",
"fabulous": "\ue7f3",
"find": "\ue7f0",
"find-fill": "\ue7f1",
"help-fill": "\ue7ee",
"help": "\ue7ef",
"home-fill": "\ue7ec",
"home": "\ue7ed",
"idcard-fill": "\ue7ea",
"idcard": "\ue7eb",
"info": "\ue7e8",
"info-fill": "\ue7e9",
"invite-fill": "\ue7e6",
"invite": "\ue7e7",
"kefu-fill": "\ue7e4",
"kefu": "\ue7e5",
"like-fill": "\ue7e2",
"like": "\ue7e3",
"location": "\ue7e0",
"location-fill": "\ue7e1",
"lock": "\ue7de",
"lock-fill": "\ue7df",
"mail-fill": "\ue7dc",
"mail": "\ue7dd",
"message": "\ue7da",
"message-fill": "\ue7db",
"mobile-fill": "\ue7d8",
"mobile": "\ue7d9",
"more": "\ue7d6",
"more-fill": "\ue7d7",
"my-fill": "\ue7d4",
"my": "\ue7d5",
"principal":"\ue80d",
"notice-fill": "\ue7d2",
"notice": "\ue7d3",
"order": "\ue7d0",
"order-fill": "\ue7d1",
"picture": "\ue7ce",
"picture-fill": "\ue7cf",
"setup-fill": "\ue7cc",
"setup": "\ue7cd",
"share": "\ue7ca",
"share-fill": "\ue7cb",
"shop": "\ue7c8",
"shop-fill": "\ue7c9",
"star-fill": "\ue7c5",
"star": "\ue7c6",
"starhalf": "\ue7c7",
"stepon-fill": "\ue7c3",
"stepon": "\ue7c4",
"wait-fill": "\ue7c1",
"wait": "\ue7c2",
"warning": "\ue7bf",
"warning-fill": "\ue7c0",
"plus": "\ue7bc",
"plussign-fill": "\ue7bd",
"plussign": "\ue7be",
"minus": "\ue7b9",
"minussign": "\ue7ba",
"minussign-fill": "\ue7bb",
"close": "\ue7b8",
"clear": "\ue7b6",
"clear-fill": "\ue7b7",
"checkbox-fill": "\ue7b5",
"checkround": "\ue7b4",
"checkbox": "\ue7b3",
"check": "\ue7b2",
"pulldown-fill": "\ue7ae",
"pullup": "\ue7af",
"pullup-fill": "\ue7b0",
"pulldown": "\ue7b1",
"roundright-fill": "\ue7ac",
"roundright": "\ue7ad",
"arrowright": "\ue7a9",
"arrowleft": "\ue7aa",
"arrowdown": "\ue7ab",
"left": "\ue7a6",
"up": "\ue7a7",
"right": "\ue7a8",
"back": "\ue7a3",
"top": "\ue7a4",
"dropdown": "\ue7a5",
"turningleft": "\ue79f",
"turningup": "\ue7a0",
"turningright": "\ue7a1",
"turningdown": "\ue7a2",
"refresh": "\ue79c",
"loading": "\ue79d",
"search": "\ue79e",
"rotate": "\ue79b",
"screen": "\ue79a",
"signin": "\ue799",
"calendar": "\ue798",
"scan": "\ue797",
"qrcode": "\ue796",
"wallet": "\ue795",
"telephone": "\ue794",
"visible": "\ue793",
"invisible": "\ue792",
"menu": "\ue78e",
"operate": "\ue78f",
"slide": "\ue790",
"list": "\ue791",
"nonetwork": "\ue78d",
"partake": "\ue78c",
"qa": "\ue78b",
"barchart": "\ue788",
"piechart": "\ue789",
"linechart": "\ue78a",
"at": "\ue787",
"face": "\ue77f",
"redpacket": "\ue780",
"suspend": "\ue781",
"link": "\ue782",
"keyboard": "\ue783",
"play": "\ue784",
"video": "\ue785",
"voice": "\ue786",
"sina": "\ue77a",
"browser": "\ue77b",
"moments": "\ue77c",
"qq": "\ue77d",
"wechat": "\ue77e",
"balance": "\ue779",
"bankcardpay": "\ue778",
"wxpay": "\ue777",
"alipay": "\ue776",
"payment":"\ue818",
"receive":"\ue817",
"sendout":"\ue816",
"evaluate":"\ue815",
"aftersale":"\ue814",
"warehouse":"\ue813",
"transport":"\ue812",
"delivery":"\ue811",
"switch":"\ue810",
"goods":"\ue80f",
"goods-fill":"\ue80e"
}

BIN
components/fui-icon/fui-icon.ttf Normal file
View File

Binary file not shown.

150
components/fui-icon/fui-icon.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<!-- #ifndef APP-NVUE -->
<text :style="{ color:getColor, fontSize: getSize, fontWeight: fontWeight}" class="fui-icon"
:class="[!getColor && !primary?'fui-icon__color':'',primary && (!color || color===true)?'fui-icon__active-color':'',disabled?'fui-icon__not-allowed':'',customPrefix && customPrefix!==true?customPrefix:'',customPrefix && customPrefix!==true?name:'']"
@click="handleClick">{{ icons[name] || '' }}</text>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<text
:style="{ color: primary && (!color || color===true)?primaryColor:getColor, fontSize: getSize,lineHeight:getSize, fontWeight: fontWeight}"
class="fui-icon" :class="[customPrefix && customPrefix!==true?customPrefix:'']"
@click="handleClick">{{ customPrefix && customPrefix!==true?name:icons[name] }}</text>
<!-- #endif -->
</template>
<script>
import icons from './fui-icon.js';
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
import fuiicons from './fui-icon.ttf'
domModule.addRule('fontFace', {
'fontFamily': 'fuiFont',
'src': "url('" + fuiicons + "')"
});
// #endif
export default {
name: "fui-icon",
emits: ['click'],
// #ifdef MP-WEIXIN
options: {
addGlobalClass: true
},
// #endif
props: {
name: {
type: String,
default: ''
},
size: {
type: [Number, String],
default: 0
},
//rpx | px
unit: {
type: String,
default: ''
},
color: {
type: String,
default: ''
},
//字重
fontWeight: {
type: [Number, String],
default: 'normal'
},
//是否禁用点击
disabled: {
type: Boolean,
default: false
},
params: {
type: [Number, String],
default: 0
},
customPrefix: {
type: String,
default: ''
},
//是否显示为主色调，color为空时有效。【内部使用】
primary: {
type: Boolean,
default: false
}
},
computed: {
getSize() {
const size = (uni.$fui && uni.$fui.fuiIcon && uni.$fui.fuiIcon.size) || 64
const unit = (uni.$fui && uni.$fui.fuiIcon && uni.$fui.fuiIcon.unit) || 'rpx'
return (this.size || size) + (this.unit || unit)
},
primaryColor() {
const app = uni && uni.$fui && uni.$fui.color;
return (app && app.primary) || '#465CFF';
},
getColor() {
const app = uni && uni.$fui && uni.$fui.fuiIcon;
let color = this.color;
if (!color || (color && color === true)) {
color = (app && app.color)
}
// #ifdef APP-NVUE
if (!color || color === true) {
color = '#333333'
}
// #endif
return color;
}
},
data() {
return {
icons: icons
};
},
methods: {
handleClick() {
if (this.disabled) return;
this.$emit('click', {
params: this.params
});
}
}
}
</script>
<style scoped>
/* #ifndef APP-NVUE */
/* 头条小程序组件内不能引入字体，需要在父级页面引入字体文件*/
@font-face {
font-family: fuiFont;
src: url("./fui-icon.ttf") format("truetype");
}
/* #endif */
.fui-icon {
font-family: fuiFont;
text-decoration: none;
text-align: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
/* #ifndef APP-NVUE */
.fui-icon__color {
color: var(--fui-color-section, #333333) !important;
}
.fui-icon__active-color {
color: var(--fui-color-primary, #465CFF) !important;
}
/* #endif */
.fui-icon__not-allowed {
/* #ifdef H5 */
cursor: not-allowed !important;
/* #endif */
}
</style>

206
components/fui-toast/fui-toast.vue Normal file
View File

@ -0,0 +1,206 @@
<template>
<view class="fui-toast__wrap" :class="{'fui-toast__show':visible}" v-if="visible || !isNvue" ref="fui_toast_ani">
<view class="fui-toast__inner"
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,background:background,zIndex:zIndex}">
<slot></slot>
<view class="fui-toast__icon-box" v-if="src" :style="{width:width+'rpx',height:width+'rpx'}">
<image class="fui-toast__icon" :src="src" :style="{width:width+'rpx',height:width+'rpx'}">
</image>
</view>
<text class="fui-toast__text" :style="{fontSize:size+'rpx',color:color}" v-if="text">{{text}}</text>
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
export default {
name: "fui-toast",
props: {
padding: {
type: Array,
default () {
return ['32rpx', '32rpx']
}
},
background: {
type: String,
default: 'rgba(0,0,0,.6)'
},
//图标宽度（高度与宽度一致）rpx
width: {
type: [Number, String],
default: 64
},
size: {
type: [Number, String],
default: 30
},
color: {
type: String,
default: '#fff'
},
zIndex: {
type: Number,
default: 1001
}
},
data() {
let isNvue = false;
// #ifdef APP-NVUE
isNvue = true;
// #endif
return {
timer: null,
visible: false,
src: '',
text: '',
isNvue: isNvue
};
},
// #ifndef VUE3
beforeDestroy() {
clearTimeout(this.timer);
this.timer = null;
},
// #endif
// #ifdef VUE3
beforeUnmount() {
clearTimeout(this.timer);
this.timer = null;
},
// #endif
methods: {
// #ifdef APP-NVUE
_animation(type, duration = 2000) {
if (!this.$refs['fui_toast_ani']) return;
animation.transition(
this.$refs['fui_toast_ani'].ref, {
styles: {
opacity: type ? 1 : 0
},
duration: 300, //ms
timingFunction: 'ease-in-out',
needLayout: false,
delay: 0 //ms
},
() => {
if (!type) {
this.visible = false;
} else {
this.timer = setTimeout(() => {
this._animation(false)
clearTimeout(this.timer);
this.timer = null;
}, duration);
}
}
);
},
// #endif
show: function(options) {
clearTimeout(this.timer);
let {
duration = 2000,
src = '',
text = ''
} = options;
this.text = text;
this.src = src;
// #ifdef APP-NVUE
this.visible = true;
// #endif
this.$nextTick(() => {
setTimeout(() => {
// #ifdef APP-NVUE
this._animation(true, duration)
// #endif
// #ifndef APP-NVUE
this.visible = true;
this.timer = setTimeout(() => {
this.visible = false;
clearTimeout(this.timer);
this.timer = null;
}, duration);
// #endif
}, 50);
});
}
}
}
</script>
<style scoped>
.fui-toast__wrap {
position: fixed;
/* #ifdef APP-NVUE */
left: 64rpx;
right: 64rpx;
top: 0;
bottom: 0;
/* #endif */
/* #ifndef APP-NVUE */
left: 15%;
right: 15%;
top: 50%;
transform: translateY(-50%);
/* #endif */
background-color: rgba(0, 0, 0, 0);
z-index: 1002;
/* #ifndef APP-NVUE */
display: flex;
visibility: hidden;
/* #endif */
align-items: center;
justify-content: center;
/* #ifndef APP-NVUE */
transition-property: opacity, visibility;
transition-timing-function: ease-in-out;
transition-duration: 0.3s;
/* #endif */
opacity: 0;
}
.fui-toast__inner {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 16rpx;
}
/* #ifndef APP-NVUE */
.fui-toast__show {
visibility: visible;
opacity: 1;
}
/* #endif */
.fui-toast__icon-box {
padding-bottom: 20rpx;
/* #ifndef APP-NVUE */
box-sizing: content-box;
flex-shrink: 0;
/* #endif */
}
/* #ifndef APP-NVUE */
.fui-toast__icon {
display: block;
flex-shrink: 0;
}
/* #endif */
.fui-toast__text {
font-weight: 400;
text-align: center;
/* #ifndef APP-NVUE */
word-break: break-all;
/* #endif */
}
</style>

9
manifest.json
View File

@ -196,9 +196,14 @@
"plugins": {},
"lazyCodeLoading": "requiredComponents",
"usingComponents": {},
"permission": {},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于选择定位"
}
},
"requiredPrivateInfos": [
"chooseAddress"
"chooseAddress",
"getLocation"
]
},
"mp-alipay": {

119
package.json
View File

@ -1,105 +1,20 @@
{
"id": "shopro",
"name": "shopro",
"displayName": "芋道商城",
"version": "2.1.0",
"description": "芋道商城，一套代码，同时发行到iOS、Android、H5、微信小程序多个平台，请使用手机扫码快速体验强大功能",
"scripts": {
"prettier": "prettier --write \"{pages,sheep}/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"build:prod": "vue-cli-service build --mode prod",
"build:dev": "vue-cli-service build --mode dev"
},
"repository": "https://github.com/sheepjs/shop.git",
"keywords": [
"商城",
"B2C",
"商城模板"
],
"author": "",
"license": "MIT",
"bugs": {
"url": "https://github.com/sheepjs/shop/issues"
},
"homepage": "https://github.com/dcloudio/hello-uniapp#readme",
"dcloudext": {
"category": [
"前端页面模板",
"uni-app前端项目模板"
"id": "fui-toast",
"name": "Toast 轻提示（fui-toast）",
"version": "v2.3.0",
"description": "FirstUI Toast 轻提示，一种轻量级反馈/提示，适合用于页面转场、数据交互的等场景中。",
"keywords": [
"Toast",
"轻提示",
"组件",
"FirstUI",
"Nvue"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
"dcloudext": {
"category": [
"前端组件",
"通用组件"
]
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "u",
"aliyun": "u"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "u",
"vue3": "y"
}
}
}
},
"dependencies": {
"dayjs": "^1.11.7",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"luch-request": "^3.0.8",
"pinia": "^2.0.33",
"pinia-plugin-persist-uni": "^1.2.0",
"weixin-js-sdk": "^1.6.0"
},
"devDependencies": {
"prettier": "^2.8.7",
"vconsole": "^3.15.0"
}
}
"displayName": "Toast 轻提示（fui-toast）"
}

60
pages.json
View File

@ -46,6 +46,32 @@
"group": "商城"
}
},
{
"path": "pages/seeding/seeding",
"style": {
"navigationBarTitleText": "社区种草",
"enablePullDownRefresh": true
},
"meta": {
"auth": false,
"sync": true,
"title": "社区种草",
"group": "商城"
}
},
{
"path": "pages/subscribe/success_tolse",
"style": {
"navigationBarTitleText": "预约成功",
"enablePullDownRefresh": true
},
"meta": {
"auth": false,
"sync": true,
"title": "预约成功",
"group": "商城"
}
},
{
"path": "pages/reservation_record/reservation_record",
"style": {
@ -214,17 +240,6 @@
"group": "商品"
}
},
{
"path": "sales",
"style": {
"navigationBarTitleText": "促销商品"
},
"meta": {
"sync": true,
"title": "促销商品",
"group": "商品"
}
},
{
"path": "list",
"style": {
@ -366,6 +381,18 @@
"group": "用户中心"
}
},
{
"path": "user_vip/agreement",
"style": {
"navigationBarTitleText": "会员协议"
},
"meta": {
"auth": true,
"sync": true,
"title": "会员协议",
"group": "用户中心"
}
},
{
"path": "user_vip/index",
"style": {
@ -780,6 +807,17 @@
"group": "营销活动"
}
},
{
"path": "point/exchange_listall",
"style": {
"navigationBarTitleText": "兑换记录"
},
"meta": {
"sync": true,
"title": "兑换记录",
"group": "营销活动"
}
},
{
"path": "point/exchange_success",
"style": {

28
pages/activity/groupon/list.vue
View File

@ -1,7 +1,7 @@
<!-- 拼团活动列表 -->
<template>
<s-layout navbar="inner" :bgStyle="{ color: '#FE832A' }">
<view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" />
<view class="page-bg" :class="state.themeType ? `${state.themeType}v` : ''" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" />
<view class="list-content">
<!-- 参团会员统计 -->
<view class="content-header ss-flex-col ss-col-center ss-row-center">
@ -17,7 +17,7 @@
<i>···</i>
</span>
</view>
<text class="pic_count">{{ state.summaryData.userCount || 0 }}人参与</text>
<text class="pic_count" :class="state.themeType ? state.themeType : ''">{{ state.summaryData.userCount || 0 }}人参与</text>
</view>
</view>
<scroll-view
@ -36,7 +36,7 @@
@click="sheep.$router.go('/pages/goods/groupon', { id: item.id })"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn">去拼团</button>
<button class="ss-reset-button cart-btn" :class="state.themeType ? state.themeType : ''">去拼团</button>
</template>
</s-goods-column>
</view>
@ -53,11 +53,11 @@
</s-layout>
</template>
<script setup>
import { reactive } from 'vue';
import { reactive,computed } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import CombinationApi from '@/sheep/api/promotion/combination';
const app = computed(() => sheep.$store('app'));
const { safeAreaInsets, safeArea } = sheep.$platform.device;
const sysNavBar = sheep.$platform.navbar;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
@ -74,6 +74,7 @@
},
loadStatus: '',
summaryData: {},
themeType:app.value.platform.themeType
});
// 加载统计数据
@ -122,6 +123,22 @@
background: url('https://zysc.fjptzykj.com:3000/shangcheng/fea9ad54f32d4705a633874efd534e70e507030ea5a7604b0110fdf7292f1f4d.png');
background-size: 100% 100%;
}
.lvv{
background: url('https://zysc.fjptzykj.com:3000/shangcheng/ed254fe4a03c16933e608f8adeb3e700a24ec4620064746a516c10da395b9395.png') !important;
background-size: 100% 100% !important;
}
.bluev{
background: url('https://zysc.fjptzykj.com:3000/shangcheng/8728b7f2de5a0d2d8a74ef0c17a275f82b265a3d8d11993ec7c424c3ad454f0b.png') !important;
background-size: 100% 100% !important;
}
.pinkv{
background: url('https://zysc.fjptzykj.com:3000/shangcheng/b44a3035cd4f676504a7003607bfb9aa457ffe1335c12d1e26dcffb45e3bfec8.png') !important;
background-size: 100% 100% !important;
}
.orangev{
background: url('https://zysc.fjptzykj.com:3000/shangcheng/ebc89def2a0cf1db1ce6b5aec26407e24e49c85dcf81a1d1c759afe414da033f.png') !important;
background-size: 100% 100% !important;
}
.list-content {
position: relative;
z-index: 3;
@ -220,6 +237,7 @@
font-size: 24rpx;
color: #fff;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
// background: rgba(72,204,82);
}
}
}

4
pages/activity/point/exchange_detail.vue
View File

@ -34,7 +34,7 @@
{{item.properties.map((property) => property.valueName).join(' ')}}
</view>
<view class="b">
10积分（待对接接口）
{{state.orderInfo.usePoint}}积分
</view>
</view>
</view>
@ -74,7 +74,7 @@
支付积分
</view>
<view class="r">
10（待接口对接）
{{state.orderInfo.usePoint}}
</view>
</view>
</view>

2
pages/activity/point/exchange_list.vue
View File

@ -24,7 +24,7 @@
<!-- <text class="card-c">×</text> -->
<view class="card-r">-{{item.usePoint}} 积分</view>
</view>
<view class="r-cart" @click="sheep.$router.go('/pages/activity/point/exchange_detail', { id: '1' })">查看详情</view>
<view class="r-cart" @click="sheep.$router.go('/pages/activity/point/exchange_detail', { id: item.id })">查看详情</view>
</view>
</view>

48
pages/activity/point/exchange_listall.vue Normal file
View File

@ -0,0 +1,48 @@
<!-- 自定义页面：支持装修 -->
<template>
<s-layout title="商品列表" :bgStyle="{ color: '#fff' }">
<view style="margin-top:10px;">
<s-block v-for="(item, index) in state.components" :key="index">
<!-- <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" /> -->
<!-- 营销组件：积分商城 -->
<s-point-block v-if="item.id === 'PromotionPoint'" :data="item.property" :styles="item.property.style" />
</s-block>
</view>
</s-layout>
</template>
<script setup>
import { reactive } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import DiyApi from '@/sheep/api/promotion/diy';
const state = reactive({
name: '',
components: [],
navigationBar: {},
page: {},
});
onLoad(async (options) => {
let id = options.id
// #ifdef MP
// 小程序预览自定义页面
if (options.scene) {
const sceneParams = decodeURIComponent(options.scene).split('=');
id = sceneParams[1];
}
// #endif
const { code, data } = await DiyApi.getDiyPage(id);
if (code === 0) {
state.name = data.name;
state.components = data.property?.components;
state.navigationBar = data.property?.navigationBar;
state.page = data.property?.page;
}
});
onPageScroll(() => {});
</script>
<style></style>

235
pages/activity/point/exchange_success.vue
View File

@ -10,7 +10,7 @@
订单编号
</view>
<view class="r">
wx23556151561321321351213
{{ state.orderInfo.no }}
</view>
</view>
<view class="ddxx">
@ -18,7 +18,7 @@
兑换时间
</view>
<view class="r">
2024-10-18 15:46:03
{{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
</view>
</view>
<view class="ddxx">
@ -31,71 +31,212 @@
</view>
<view class="ddxx">
<view class="l">
支付方式
支付积分
</view>
<view class="r">
10
{{state.orderInfo.usePoint}}
</view>
</view>
<view class="fgx"></view>
<view class="ck-detail">
<view class="ck-detail" @click="sheep.$router.redirect('/pages/activity/point/exchange_detail',{id:state.id})">
查看详情
</view>
<view class="bk-home">
<view class="bk-home" @click="sheep.$router.redirect('/pages/index/index');">
返回首页
</view>
</view>
</s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import PointApi from '@/sheep/api/promotion/point';
import SLayout from '@/sheep/components/s-layout/s-layout.vue';
import sheep from '@/sheep';
import {
onLoad
} from '@dcloudio/uni-app';
import {
reactive,
ref
} from 'vue';
import {
isEmpty
} from 'lodash-es';
import {
fen2yuan,
formatOrderStatus,
formatOrderStatusDescription,
handleOrderButtons,
} from '@/sheep/hooks/useGoods';
import OrderApi from '@/sheep/api/trade/order';
import DeliveryApi from '@/sheep/api/trade/delivery';
import PickUpVerify from '@/pages/order/pickUpVerify.vue';
// 计算页面高度
const { safeAreaInsets, safeArea } = sheep.$platform.device;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const pageHeight =
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
const sPointCardRef = ref();
// 查询活动列表
const activityPageParams = reactive({
pageNo: 1, // 页码
pageSize: 5, // 每页数量
});
const state = reactive({
orderInfo: {},
merchantTradeNo: '', // 商户订单号
comeinType: '', // 进入订单详情的来源类型
id:0
});
const activityTotal = ref(0); // 活动总数
const activityCount = ref(0); // 已加载活动数量
const loadStatus = ref(''); // 页面加载状态
async function getActivityList() {
loadStatus.value = 'loading';
const { data } = await PointApi.getPointActivityPage(activityPageParams);
await sPointCardRef.value.concatActivity(data.list);
activityCount.value = sPointCardRef.value.getActivityCount();
activityTotal.value = data.total;
// ========== 门店自提（核销） ==========
const systemStore = ref({}); // 门店信息
loadStatus.value = activityCount.value < activityTotal.value ? 'more' : 'noMore';
}
// 复制
const onCopy = () => {
sheep.$helper.copyText(state.orderInfo.no);
};
// 加载更多
function loadMore() {
if (state.loadStatus !== 'noMore') {
activityPageParams.pageNo += 1;
getActivityList();
}
}
// 去支付
function onPay(payOrderId) {
sheep.$router.go('/pages/pay/index', {
id: payOrderId,
});
}
// 上拉加载更多
onReachBottom(() => {
loadMore();
});
onLoad(() => {
getActivityList();
});
// 查看商品
function onGoodsDetail(id) {
sheep.$router.go('/pages/goods/index', {
id,
});
}
// 取消订单
async function onCancel(orderId) {
uni.showModal({
title: '提示',
content: '确定要取消订单吗?',
success: async function(res) {
if (!res.confirm) {
return;
}
const {
code
} = await OrderApi.cancelOrder(orderId);
if (code === 0) {
await getOrderDetail(orderId);
}
},
});
}
// 查看物流
async function onExpress(id) {
sheep.$router.go('/pages/order/express/log', {
id,
});
}
// 确认收货 TODO 芋艿：待测试
async function onConfirm(orderId, ignore = false) {
// 需开启确认收货组件
// todo: 芋艿：待接入微信
// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
let isOpenBusinessView = true;
if (
sheep.$platform.name === 'WechatMiniProgram' &&
!isEmpty(state.orderInfo.wechat_extra_data) &&
isOpenBusinessView &&
!ignore
) {
mpConfirm(orderId);
return;
}
// 正常的确认收货流程
const {
code
} = await OrderApi.receiveOrder(orderId);
if (code === 0) {
await getOrderDetail(orderId);
}
}
// #ifdef MP-WEIXIN
// 小程序确认收货组件
function mpConfirm(orderId) {
if (!wx.openBusinessView) {
sheep.$helper.toast(`请升级微信版本`);
return;
}
wx.openBusinessView({
businessType: 'weappOrderConfirm',
extraData: {
merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
},
success(response) {
console.log('success:', response);
if (response.errMsg === 'openBusinessView:ok') {
if (response.extraData.status === 'success') {
onConfirm(orderId, true);
}
}
},
fail(error) {
console.log('error:', error);
},
complete(result) {
console.log('result:', result);
},
});
}
// #endif
// 评价
function onComment(id) {
sheep.$router.go('/pages/goods/comment/add', {
id,
});
}
const pickUpVerifyRef = ref();
async function getOrderDetail(id) {
// 对详情数据进行适配
let res;
if (state.comeinType === 'wechat') {
// TODO 芋艿：微信场景下
res = await OrderApi.getOrder(id, {
merchant_trade_no: state.merchantTradeNo,
});
} else {
res = await OrderApi.getOrder(id);
}
if (res.code === 0) {
state.orderInfo = res.data;
handleOrderButtons(state.orderInfo);
// 配送方式：门店自提
if (res.data.pickUpStoreId) {
const {
data
} = await DeliveryApi.getDeliveryPickUpStore(res.data.pickUpStoreId);
systemStore.value = data || {};
}
if (state.orderInfo.deliveryType === 2 && state.orderInfo.payStatus) {
pickUpVerifyRef.value && pickUpVerifyRef.value.markCode(res.data.pickUpVerifyCode);
}
} else {
sheep.$router.back();
}
}
onLoad(async (options) => {
let id = 0;
if (options.id) {
id = options.id;
state.id = options.id;
}
// TODO 芋艿：下面两个变量，后续接入
state.comeinType = options.comein_type;
if (state.comeinType === 'wechat') {
state.merchantTradeNo = options.merchant_trade_no;
}
await getOrderDetail(id);
});
</script>
<style lang="scss" scope>

785
pages/activity/seckill/list.vue
View File

@ -1,419 +1,426 @@
<!-- 秒杀活动列表 -->
<template>
<s-layout title="秒杀列表" navbar="normal" :bgStyle="{ color: 'rgb(245,28,19)' }">
<!--顶部背景图-->
<!-- <view
class="page-bg"
:style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
></view> -->
<!-- 时间段轮播图 -->
<view class="header" v-if="activeTimeConfig?.sliderPicUrls?.length > 0">
<swiper
indicator-dots="true"
autoplay="true"
:circular="true"
interval="3000"
duration="1500"
indicator-color="rgba(255,255,255,0.6)"
indicator-active-color="#fff"
>
<block v-for="(picUrl, index) in activeTimeConfig.sliderPicUrls" :key="index">
<swiper-item class="borRadius14">
<image :src="picUrl" class="slide-image borRadius14" lazy-load />
</swiper-item>
</block>
</swiper>
</view>
<!-- 时间段列表 -->
<view class="flex align-center justify-between ss-p-25">
<!-- 左侧图标 -->
<view class="time-icon">
<!-- TODO 芋艿：图片统一维护 -->
<image
class="ss-w-100 ss-h-100"
src="http://mall.yudao.iocoder.cn/static/images/priceTag.png"
/>
</view>
<scroll-view
class="time-list"
:scroll-into-view="activeTimeElId"
scroll-x
scroll-with-animation
>
<view
v-for="(config, index) in timeConfigList"
:key="index"
:class="['item', { active: activeTimeIndex === index }]"
:id="`timeItem${index}`"
@tap="handleChangeTimeConfig(index,config.id)"
>
<!-- 活动起始时间 -->
<view class="time">{{ config.startTime }}</view>
<!-- 活动状态 -->
<view class="status">{{ config.status }}</view>
</view>
</scroll-view>
</view>
<s-layout title="秒杀列表" navbar="normal" :bgStyle="{ color: 'rgb(245,28,19)' }">
<!--顶部背景图-->
<!-- <view
class="page-bg"
:style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
></view> -->
<!-- 时间段轮播图 -->
<view class="header" v-if="activeTimeConfig?.sliderPicUrls?.length > 0">
<swiper indicator-dots="true" autoplay="true" :circular="true" interval="3000" duration="1500"
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
<block v-for="(picUrl, index) in activeTimeConfig.sliderPicUrls" :key="index">
<swiper-item class="borRadius14">
<image :src="picUrl" class="slide-image borRadius14" lazy-load />
</swiper-item>
</block>
</swiper>
</view>
<!-- 时间段列表 -->
<view class="flex align-center justify-between ss-p-25">
<!-- 左侧图标 -->
<view class="time-icon">
<!-- TODO 芋艿：图片统一维护 -->
<image class="ss-w-100 ss-h-100" src="http://mall.yudao.iocoder.cn/static/images/priceTag.png" />
</view>
<scroll-view class="time-list" :scroll-into-view="activeTimeElId" scroll-x scroll-with-animation>
<view v-for="(config, index) in timeConfigList" :key="index"
:class="['item', { active: activeTimeIndex === index }]" :id="`timeItem${index}`"
@tap="handleChangeTimeConfig(index,config.id)">
<!-- 活动起始时间 -->
<view class="time">{{ config.startTime }}</view>
<!-- 活动状态 -->
<view class="status">{{ config.status }}</view>
</view>
</scroll-view>
</view>
<!-- 内容区 -->
<view class="list-content">
<!-- 活动倒计时 -->
<!-- <view class="content-header ss-flex-col ss-col-center ss-row-center">
<view class="content-header-box ss-flex ss-row-center">
<view
class="countdown-box ss-flex"
v-if="activeTimeConfig?.status === TimeStatusEnum.STARTED"
>
<view class="countdown-title ss-m-r-12">距结束</view>
<view class="ss-flex countdown-time">
<view class="ss-flex countdown-h">{{ countDown.h }}</view>
<view class="ss-m-x-4">:</view>
<view class="countdown-num ss-flex ss-row-center">{{ countDown.m }}</view>
<view class="ss-m-x-4">:</view>
<view class="countdown-num ss-flex ss-row-center">{{ countDown.s }}</view>
</view>
</view>
<view v-else> {{ activeTimeConfig?.status }} </view>
</view>
</view> -->
<!-- 内容区 -->
<view class="list-content">
<!-- 活动倒计时 -->
<!-- <view class="content-header ss-flex-col ss-col-center ss-row-center">
<view class="content-header-box ss-flex ss-row-center">
<view
class="countdown-box ss-flex"
v-if="activeTimeConfig?.status === TimeStatusEnum.STARTED"
>
<view class="countdown-title ss-m-r-12">距结束</view>
<view class="ss-flex countdown-time">
<view class="ss-flex countdown-h">{{ countDown.h }}</view>
<view class="ss-m-x-4">:</view>
<view class="countdown-num ss-flex ss-row-center">{{ countDown.m }}</view>
<view class="ss-m-x-4">:</view>
<view class="countdown-num ss-flex ss-row-center">{{ countDown.s }}</view>
</view>
</view>
<view v-else> {{ activeTimeConfig?.status }} </view>
</view>
</view> -->
<!-- 活动列表 -->
<scroll-view
class="scroll-box"
:style="{ height: pageHeight + 'rpx' }"
scroll-y="true"
:scroll-with-animation="false"
:enable-back-to-top="true"
>
<view class="goods-box ss-m-b-20" v-for="activity in activityList" :key="activity.id">
<s-goods-column
size="lg"
:data="{ ...activity, price: activity.seckillPrice }"
:goodsFields="goodsFields"
:seckillTag="true"
@click="sheep.$router.go('/pages/goods/seckill', { id: activity.id })"
>
<!-- 抢购进度 -->
<template #activity>
<view class="limit"
>限量
<text class="ss-m-l-5">{{ activity.stock }} {{ activity.unitName }}</text></view
>
<su-progress :percentage="activity.percent" strokeWidth="10" textInside isAnimate />
</template>
<!-- 抢购按钮 -->
<template #cart>
<button
:class="[
<!-- 活动列表 -->
<scroll-view class="scroll-box" :style="{ height: pageHeight + 'rpx' }" scroll-y="true"
:scroll-with-animation="false" :enable-back-to-top="true">
<view class="goods-box ss-m-b-20" v-for="activity in activityList" :key="activity.id">
<s-goods-column size="lg" :data="{ ...activity, price: activity.seckillPrice }"
:goodsFields="goodsFields" :seckillTag="true"
@click="sheep.$router.go('/pages/goods/seckill', { id: activity.id })">
<!-- 抢购进度 -->
<template #activity>
<view class="limit">限量
<text class="ss-m-l-5">{{ activity.stock }} {{ activity.unitName }}</text>
</view>
<su-progress :percentage="activity.percent" strokeWidth="10" textInside isAnimate />
</template>
<!-- 抢购按钮 -->
<template #cart>
<button :class="[
'ss-reset-button cart-btn',
{ disabled: activeTimeConfig.status === TimeStatusEnum.END },
]"
>
<span v-if="activeTimeConfig?.status === TimeStatusEnum.WAIT_START">未开始</span>
<span v-else-if="activeTimeConfig?.status === TimeStatusEnum.STARTED">马上抢</span>
<span v-else>已结束</span>
</button>
</template>
</s-goods-column>
</view>
<uni-load-more
v-if="activityTotal > 0"
:status="loadStatus"
:content-text="{
]">
<span v-if="activeTimeConfig?.status === TimeStatusEnum.WAIT_START">未开始</span>
<span v-else-if="activeTimeConfig?.status === TimeStatusEnum.STARTED">马上抢</span>
<span v-else>已结束</span>
</button>
</template>
</s-goods-column>
</view>
<uni-load-more v-if="activityTotal > 0" :status="loadStatus" :content-text="{
contentdown: '上拉加载更多',
}"
@tap="loadMore"
/>
</scroll-view>
</view>
</s-layout>
}" @tap="loadMore" />
</scroll-view>
</view>
</s-layout>
</template>
<script setup>
import { reactive, computed, ref, nextTick } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { useDurationTime } from '@/sheep/hooks/useGoods';
import SeckillApi from '@/sheep/api/promotion/seckill';
import dayjs from 'dayjs';
import { TimeStatusEnum } from '@/sheep/util/const';
import {
reactive,
computed,
ref,
nextTick
} from 'vue';
import {
onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import {
useDurationTime
} from '@/sheep/hooks/useGoods';
import SeckillApi from '@/sheep/api/promotion/seckill';
import dayjs from 'dayjs';
import {
TimeStatusEnum
} from '@/sheep/util/const';
// 计算页面高度
const { safeAreaInsets, safeArea } = sheep.$platform.device;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const pageHeight =
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-header.png');
// 计算页面高度
const {
safeAreaInsets,
safeArea
} = sheep.$platform.device;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const pageHeight =
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-header.png');
// 商品控件显示的字段（不显示库存、销量。改为显示自定义的进度条）
const goodsFields = {
name: { show: true },
introduction: { show: true },
price: { show: true },
marketPrice: { show: true },
};
// 商品控件显示的字段（不显示库存、销量。改为显示自定义的进度条）
const goodsFields = {
name: {
show: true
},
introduction: {
show: true
},
price: {
show: true
},
marketPrice: {
show: true
},
};
//#region 时间段
// 时间段列表
const timeConfigList = ref([]);
// 查询时间段
const getSeckillConfigList = async () => {
const { data } = await SeckillApi.getSeckillConfigList();
const now = dayjs();
const today = now.format('YYYY-MM-DD');
// 判断时间段的状态
data.forEach((config, index) => {
const startTime = dayjs(`${today} ${config.startTime}`);
const endTime = dayjs(`${today} ${config.endTime}`);
if (now.isBefore(startTime)) {
config.status = TimeStatusEnum.WAIT_START;
} else if (now.isAfter(endTime)) {
config.status = TimeStatusEnum.END;
} else {
config.status = TimeStatusEnum.STARTED;
activeTimeIndex.value = index;
}
});
timeConfigList.value = data;
console.log(timeConfigList.value[0]?.id,"timeConfigList.value[0]?.id");
// 默认选中进行中的活动
handleChangeTimeConfig(activeTimeIndex.value, timeConfigList.value[0]?.id);
// 滚动到进行中的时间段
scrollToTimeConfig(activeTimeIndex.value);
};
//#region 时间段
// 时间段列表
const timeConfigList = ref([]);
// 查询时间段
const getSeckillConfigList = async () => {
const {
data
} = await SeckillApi.getSeckillConfigList();
const now = dayjs();
const today = now.format('YYYY-MM-DD');
// 判断时间段的状态
data.forEach((config, index) => {
const startTime = dayjs(`${today} ${config.startTime}`);
const endTime = dayjs(`${today} ${config.endTime}`);
if (now.isBefore(startTime)) {
config.status = TimeStatusEnum.WAIT_START;
} else if (now.isAfter(endTime)) {
config.status = TimeStatusEnum.END;
} else {
config.status = TimeStatusEnum.STARTED;
activeTimeIndex.value = index;
}
});
timeConfigList.value = data;
console.log(timeConfigList.value[0]?.id, "timeConfigList.value[0]?.id");
// 默认选中进行中的活动
handleChangeTimeConfig(activeTimeIndex.value, timeConfigList.value[0]?.id);
// 滚动到进行中的时间段
scrollToTimeConfig(activeTimeIndex.value);
};
// 滚动到指定时间段
const activeTimeElId = ref(''); // 当前选中的时间段的元素ID
const scrollToTimeConfig = (index) => {
nextTick(() => (activeTimeElId.value = `timeItem${index}`));
};
// 滚动到指定时间段
const activeTimeElId = ref(''); // 当前选中的时间段的元素ID
const scrollToTimeConfig = (index) => {
nextTick(() => (activeTimeElId.value = `timeItem${index}`));
};
// 切换时间段
const activeTimeIndex = ref(0); // 当前选中的时间段的索引
const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]); // 当前选中的时间段
const handleChangeTimeConfig = (index, config) => {
activeTimeIndex.value = index;
console.log(config,'config')
// 查询活动列表
activityPageParams.pageNo = 1;
activityList.value = [];
getActivityList(config);
};
// 切换时间段
const activeTimeIndex = ref(0); // 当前选中的时间段的索引
const activeTimeConfig = computed(() => timeConfigList.value[activeTimeIndex.value]); // 当前选中的时间段
const handleChangeTimeConfig = (index, config) => {
activeTimeIndex.value = index;
console.log(config, 'config')
// 查询活动列表
activityPageParams.pageNo = 1;
activityList.value = [];
getActivityList(config);
};
// 倒计时
const countDown = computed(() => {
const endTime = activeTimeConfig.value?.endTime;
if (endTime) {
return useDurationTime(`${dayjs().format('YYYY-MM-DD')} ${endTime}`);
}
});
// 倒计时
const countDown = computed(() => {
const endTime = activeTimeConfig.value?.endTime;
if (endTime) {
return useDurationTime(`${dayjs().format('YYYY-MM-DD')} ${endTime}`);
}
});
//#endregion
//#endregion
//#region 分页查询活动列表
//#region 分页查询活动列表
// 查询活动列表
const activityPageParams = reactive({
configId: 0, // 时间段 ID
pageNo: 1, // 页码
pageSize: 5, // 每页数量
});
const activityTotal = ref(0); // 活动总数
const activityList = ref([]); // 活动列表
const loadStatus = ref(''); // 页面加载状态
async function getActivityList(id) {
loadStatus.value = 'loading';
activityPageParams.configId= id;
const { data } = await SeckillApi.getSeckillActivityPage(activityPageParams);
data.list.forEach((activity) => {
// 计算抢购进度
activity.percent = parseInt(
(100 * (activity.totalStock - activity.stock)) / activity.totalStock,
);
});
activityList.value = activityList.value.concat(...data.list);
activityTotal.value = data.total;
// 查询活动列表
const activityPageParams = reactive({
configId: 0, // 时间段 ID
pageNo: 1, // 页码
pageSize: 5, // 每页数量
});
const activityTotal = ref(0); // 活动总数
const activityList = ref([]); // 活动列表
const loadStatus = ref(''); // 页面加载状态
async function getActivityList(id) {
loadStatus.value = 'loading';
activityPageParams.configId = id;
const {
data
} = await SeckillApi.getSeckillActivityPage(activityPageParams);
data.list.forEach((activity) => {
// 计算抢购进度
activity.percent = parseInt(
(100 * (activity.totalStock - activity.stock)) / activity.totalStock,
);
});
activityList.value = activityList.value.concat(...data.list);
activityTotal.value = data.total;
loadStatus.value = activityList.value.length < activityTotal.value ? 'more' : 'noMore';
}
loadStatus.value = activityList.value.length < activityTotal.value ? 'more' : 'noMore';
}
// 加载更多
function loadMore() {
if (loadStatus.value !== 'noMore') {
activityPageParams.pageNo += 1;
getActivityList();
}
}
// 上拉加载更多
onReachBottom(() => loadMore());
// 加载更多
function loadMore() {
if (loadStatus.value !== 'noMore') {
activityPageParams.pageNo += 1;
getActivityList();
}
}
// 上拉加载更多
onReachBottom(() => loadMore());
//#endregion
//#endregion
// 页面初始化
onLoad(async () => {
await getSeckillConfigList();
});
// 页面初始化
onLoad(async () => {
await getSeckillConfigList();
});
</script>
<style lang="scss" scoped>
// 顶部背景图
.page-bg {
width: 100%;
height: 458rpx;
background: v-bind(headerBg) no-repeat;
background-size: 100% 100%;
}
// 顶部背景图
.page-bg {
width: 100%;
height: 458rpx;
background: v-bind(headerBg) no-repeat;
background-size: 100% 100%;
}
// 时间段轮播图
.header {
width: 100%;
height: 330rpx;
margin: 0 auto 0 auto;
border-radius: 14rpx;
overflow: hidden;
swiper {
height: 330rpx !important;
border-radius: 14rpx;
overflow: hidden;
}
// 时间段轮播图
.header {
width: 100%;
height: 330rpx;
margin: 0 auto 0 auto;
border-radius: 14rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
border-radius: 14rpx;
overflow: hidden;
img {
border-radius: 14rpx;
}
}
}
swiper {
height: 330rpx !important;
border-radius: 14rpx;
overflow: hidden;
}
// 时间段列表：左侧图标
.time-icon {
width: 75rpx;
height: 70rpx;
}
// 时间段列表
.time-list {
width: 596rpx;
white-space: nowrap;
// 时间段
.item {
display: inline-block;
font-size: 20rpx;
color: #666;
text-align: center;
box-sizing: border-box;
margin-right: 30rpx;
width: 130rpx;
// 开始时间
.time {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
// 选中的时间段
&.active {
.time {
color: var(--ui-BG-Main);
}
// 状态
.status {
height: 30rpx;
line-height: 30rpx;
border-radius: 15rpx;
width: 128rpx;
background: linear-gradient(90deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
color: #fff;
}
}
}
}
image {
width: 100%;
height: 100%;
border-radius: 14rpx;
overflow: hidden;
// 内容区
.list-content {
position: relative;
z-index: 3;
margin: 0 20rpx 0 20rpx;
// background: #fff;
border-radius: 20rpx 20rpx 0 0;
.content-header {
width: 100%;
border-radius: 20rpx 20rpx 0 0;
height: 150rpx;
background: linear-gradient(180deg, #fff4f7, #ffe6ec);
img {
border-radius: 14rpx;
}
}
}
.content-header-box {
width: 678rpx;
height: 64rpx;
background: rgba($color: #fff, $alpha: 0.66);
border-radius: 32px;
// 场次倒计时内容
.countdown-title {
font-size: 28rpx;
font-weight: 500;
color: #333333;
line-height: 28rpx;
}
// 场次倒计时
.countdown-time {
font-size: 28rpx;
color: rgba(#ed3c30, 0.23);
// 场次倒计时：小时部分
.countdown-h {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
padding: 0 4rpx;
height: 40rpx;
background: rgba(#ed3c30, 0.23);
border-radius: 6rpx;
}
// 场次倒计时：分钟、秒
.countdown-num {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
width: 40rpx;
height: 40rpx;
background: rgba(#ed3c30, 0.23);
border-radius: 6rpx;
}
}
}
}
// 活动列表
.scroll-box {
height: 900rpx;
// 活动
.goods-box {
position: relative;
// 抢购按钮
.cart-btn {
position: absolute;
bottom: 10rpx;
right: 20rpx;
z-index: 11;
height: 44rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
// 时间段列表：左侧图标
.time-icon {
width: 75rpx;
height: 70rpx;
}
&.disabled {
background: $gray-b;
color: #fff;
}
}
// 秒杀限量商品数
.limit {
font-size: 22rpx;
color: $dark-9;
margin-bottom: 5rpx;
}
}
}
}
</style>
// 时间段列表
.time-list {
width: 596rpx;
white-space: nowrap;
// 时间段
.item {
display: inline-block;
font-size: 20rpx;
color: #666;
text-align: center;
box-sizing: border-box;
margin-right: 30rpx;
width: 130rpx;
// 开始时间
.time {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
// 选中的时间段
&.active {
.time {
color: var(--ui-BG-Main);
}
// 状态
.status {
height: 30rpx;
line-height: 30rpx;
border-radius: 15rpx;
width: 128rpx;
background: linear-gradient(90deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
color: #fff;
}
}
}
}
// 内容区
.list-content {
position: relative;
z-index: 3;
margin: 0 20rpx 0 20rpx;
// background: #fff;
border-radius: 20rpx 20rpx 0 0;
.content-header {
width: 100%;
border-radius: 20rpx 20rpx 0 0;
height: 150rpx;
background: linear-gradient(180deg, #fff4f7, #ffe6ec);
.content-header-box {
width: 678rpx;
height: 64rpx;
background: rgba($color: #fff, $alpha: 0.66);
border-radius: 32px;
// 场次倒计时内容
.countdown-title {
font-size: 28rpx;
font-weight: 500;
color: #333333;
line-height: 28rpx;
}
// 场次倒计时
.countdown-time {
font-size: 28rpx;
color: rgba(#ed3c30, 0.23);
// 场次倒计时：小时部分
.countdown-h {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
padding: 0 4rpx;
height: 40rpx;
background: rgba(#ed3c30, 0.23);
border-radius: 6rpx;
}
// 场次倒计时：分钟、秒
.countdown-num {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
width: 40rpx;
height: 40rpx;
background: rgba(#ed3c30, 0.23);
border-radius: 6rpx;
}
}
}
}
// 活动列表
.scroll-box {
height: 900rpx;
// 活动
.goods-box {
position: relative;
// 抢购按钮
.cart-btn {
position: absolute;
bottom: 10rpx;
right: 20rpx;
z-index: 11;
height: 44rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
&.disabled {
background: $gray-b;
color: #fff;
}
}
// 秒杀限量商品数
.limit {
font-size: 22rpx;
color: $dark-9;
margin-bottom: 5rpx;
}
}
}
}
</style>

23
pages/app/sign.vue
View File

@ -68,8 +68,8 @@
</view>
</view>
<view style="clear: both;"></view>
</view>
<view style="clear: both;"></view>
</view>
<!-- 签到说明 -->
@ -572,15 +572,16 @@
position: relative;
.sign-list {
width: 86%;
margin: 0 auto;
padding: 20px;
background: white;
margin: 0 7px;
border-radius: 18px;
.new-top {
display: flex;
justify-content: space-between;
margin: 0 10px;
margin-bottom: 10px;
.left {
@ -612,12 +613,20 @@
}
.new-bottom {
width: 100%;
display: grid;
margin-top: 5px;
// grid-template-columns: repeat(auto-fill, 22%);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px;
grid-auto-rows: 100px;
justify-content: center;
grid-gap: 5px;
padding: 5px;
.new-l {
padding: 5px;
// padding: 5px;
float: left;
width: 21.9%;
width: 100%;
.new-list {
padding: 5px 5px;
@ -680,10 +689,10 @@
.new-7 {
position: relative;
width: 134px;
width: 178%;
padding: 5px 10px;
padding-bottom: 0;
height: 80px;
height: 80%;
display: flex;
flex-wrap: wrap;

17
pages/chat/components/messageList.vue
View File

@ -2,7 +2,6 @@
<!-- 聊天虚拟列表 -->
<z-paging
ref="pagingRef"
v-model="messageList"
use-chat-record-mode
use-virtual-list
cell-height-mode="dynamic"
@ -18,7 +17,7 @@
>
<template #top>
<!-- 撑一下顶部导航 -->
<view style="height: 45px"></view>
<view :style="{height:hei+'px'}"></view>
</template>
<!-- style="transform: scaleY(-1)"必须写，否则会导致列表倒置！！！ -->
<!-- 注意不要直接在chat-item组件标签上设置style，因为在微信小程序中是无效的，请包一层view -->
@ -28,7 +27,6 @@
<MessageListItem
:message="item"
:message-index="index"
:message-list="messageList"
></MessageListItem>
</view>
</template>
@ -48,8 +46,12 @@
import { reactive, ref } from 'vue';
import KeFuApi from '@/sheep/api/promotion/kefu';
import { isEmpty } from '@/sheep/helper/utils';
const messageList = ref([]); // 消息列表
const props = defineProps({
hei: {
type: [Object, String, Number],
default() {},
},
});
const showNewMessageTip = ref(false); // 显示有新消息提示
const backToTopStyle = reactive({
width: '100px',
@ -72,14 +74,17 @@
queryParams.pageSize = pageSize;
await getMessageList();
};
const msss = ref([]);
// 获得消息分页列表
const getMessageList = async () => {
const { data } = await KeFuApi.getKefuMessagePage(queryParams);
if (isEmpty(data.list)) {
return;
}
msss.value = data.list
pagingRef.value.completeByTotal(data.list, data.total);
};
const emits = defineEmits(['cc']);
/** 刷新消息列表 */
const refreshMessageList = (message = undefined) => {
if (queryParams.pageNo != 1 && message !== undefined) {
@ -89,6 +94,8 @@
return;
}
pagingRef.value.reload();
console.log("--data1---")
emits("cc", msss.value[msss.value.length-1].kefuName)
};
/** 滚动到最新消息 */
const onBackToTopClick = (event) => {

6
pages/chat/components/messageListItem.vue
View File

@ -93,7 +93,7 @@
class="chat-avatar ss-m-l-24"
:src="
sheep.$url.cdn(message.senderAvatar) ||
sheep.$url.static('/static/img/shop/chat/default.png')
sheep.$url.static('https://zysc.fjptzykj.com:3000/shangcheng/d1e722fb4a257a9ab28c7aca2df004d0159a8ee9cc1d02bccf7ef27b55fcc526.png')
"
mode="aspectFill"
>
@ -141,7 +141,7 @@
}
return false;
});
import { kefuPath } from '@/sheep/config';
// 处理表情
function replaceEmoji(data) {
let newData = data;
@ -154,7 +154,7 @@
newData = newData.replace(
item,
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${sheep.$url.cdn(
'/static/img/chat/emoji/' + emojiFile,
kefuPath + '/shangcheng/asserts/' + emojiFile,
)}"/>`,
);
});

10
pages/chat/components/toolsPopup.vue
View File

@ -20,7 +20,7 @@
v-for="item in emoji"
:key="item"
class="emoji-img"
:src="sheep.$url.cdn(`/static/img/chat/emoji/${item.file}`)"
:src="`${kefuPath}/shangcheng/asserts/${item.file}`"
@tap="onEmoji(item)"
>
</image>
@ -37,7 +37,7 @@
>
<image
class="icon"
:src="sheep.$url.static('/static/img/shop/chat/image.png')"
:src="sheep.$url.static('https://zysc.fjptzykj.com:3000/shangcheng/5f4b6964b144be9a309aa45560c2b82515f2b5557e4f44fcd1b9795b3cc28757.png')"
mode="aspectFill"
></image>
</s-uploader>
@ -46,7 +46,7 @@
<view class="goods" @tap="onShowSelect('goods')">
<image
class="icon"
:src="sheep.$url.static('/static/img/shop/chat/goods.png')"
:src="sheep.$url.static('https://zysc.fjptzykj.com:3000/shangcheng/b18fdf64dbe03b39290a0a96d5b90ae1cc6f9d80da13c1c47eaacc47c2710a7c.png')"
mode="aspectFill"
></image>
<view>商品</view>
@ -54,7 +54,7 @@
<view class="order" @tap="onShowSelect('order')">
<image
class="icon"
:src="sheep.$url.static('/static/img/shop/chat/order.png')"
:src="sheep.$url.static('https://zysc.fjptzykj.com:3000/shangcheng/f6c484a459e843baeb729603ae221b6d3ab384b56c2d891ae53b0ee4205477a9.png')"
mode="aspectFill"
></image>
<view>订单</view>
@ -71,7 +71,7 @@
*/
import { emojiPage } from '@/pages/chat/util/emoji';
import sheep from '@/sheep';
import { kefuPath } from '@/sheep/config';
const props = defineProps({
// 工具模式
toolsMode: {

15
pages/chat/index.vue
View File

@ -1,13 +1,15 @@
<template>
<!-- :title="!isReconnecting ? '连接客服成功' : '会话重连中'" -->
<!-- :title="kefuName" -->
<s-layout
class="chat-wrap"
:title="!isReconnecting ? '连接客服成功' : '会话重连中'"
title="众悦商城客服"
navbar="inner"
>
<!-- 覆盖头部导航栏背景颜色 -->
<div class="page-bg" :style="{ height: sys_navBar + 'px' }"></div>
<!-- 聊天区域 -->
<MessageList ref="messageListRef">
<MessageList ref="messageListRef" :hei="sys_navBar" @cc="ss">
<template #bottom>
<message-input
v-model="chat.msg"
@ -55,9 +57,12 @@
import FileApi from '@/sheep/api/infra/file';
import KeFuApi from '@/sheep/api/promotion/kefu';
import { useWebSocket } from '@/sheep/hooks/useWebSocket';
const kefuName = ref('众悦商城客服');
const sys_navBar = sheep.$platform.navbar;
function ss(val){
console.log('ss进来了',val)
kefuName.value = val;
}
const chat = reactive({
msg: '',
scrollInto: '',
@ -179,7 +184,9 @@
</script>
<style scoped lang="scss">
.chat-wrap {
.page-bg {
width: 100%;
position: absolute;

433
pages/commission/commission-ranking.vue
View File

File diff suppressed because one or more lines are too long

191
pages/commission/components/account-info-tow.vue Normal file
View File

@ -0,0 +1,191 @@
<!-- 分销账户：展示基本统计信息 -->
<template>
<view class="new-main">
<view class="account-card">
<view class="account-card-box">
<view class="ss-flex ss-row-between card-box-header">
<view class="ss-flex">
<!-- <view class="header-title ss-m-r-16">账户信息</view> -->
<button class="ss-reset-button look-btn ss-flex" @tap="state.showMoney = !state.showMoney">
<uni-icons :type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'" color="#A57A55"
size="20" />
</button>
</view>
<view class="ss-flex" @tap="sheep.$router.go('/pages/commission/wallet')">
<view class="header-title ss-m-r-4">提现记录</view>
<text class="cicon-play-arrow" />
</view>
</view>
<!-- 提现金额 -->
<view class="ss-flex new-cont">
<view class="ss-flex-1 ss-flex-col ">
<view class="item-title">可提现(元)</view>
<view class="item-detail">
{{ state.showMoney ? fen2yuan(state.brokerageInfo.brokeragePrice) : '***' }}
</view>
</view>
<view class="ss-flex-1 ss-flex-col ss-col-center new-btn"
@tap="sheep.$router.go('/pages/commission/withdraw')"
>
立即提现
</view>
</view>
<!-- 收益 -->
<view class="card-content ss-flex">
<view class="ss-flex-1 ss-flex-col ss-col-center">
<view class="item-title">当前收益(元)</view>
<view class="item-detail">
{{ state.showMoney ? fen2yuan(state.summary.brokeragePrice || 0) : '***' }}
</view>
</view>
<view class="ss-flex-1 ss-flex-col ss-col-center">
<view class="item-title">昨天收益(元)</view>
<view class="item-detail">
{{ state.showMoney ? fen2yuan(state.summary.yesterdayPrice || 0) : '***' }}
</view>
</view>
<view class="ss-flex-1 ss-flex-col ss-col-center">
<view class="item-title">累计已提(元)</view>
<view class="item-detail">
{{ state.showMoney ? fen2yuan(state.summary.withdrawPrice || 0) : '***' }}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import sheep from '@/sheep';
import {
computed,
reactive,
onMounted,
onBeforeMount
} from 'vue';
import BrokerageApi from '@/sheep/api/trade/brokerage';
import {
fen2yuan
} from '@/sheep/hooks/useGoods';
const userInfo = computed(() => sheep.$store('user').userInfo);
const state = reactive({
showMoney: false,
summary: {},
brokerageInfo: {}, // 分销信息
arr:{}
});
// 获得分销信息
async function getBrokerageUser() {
const { data, code } = await BrokerageApi.getBrokerageUser();
if (code === 0) {
state.brokerageInfo = data;
}
}
onMounted(async () => {
let {
code,
data
} = await BrokerageApi.getBrokerageUserSummary();
if (code === 0) {
state.summary = data || {};
}
});
onBeforeMount(() => {
getBrokerageUser();
});
</script>
<style lang="scss" scoped>
.new-main{
width: 100%;
}
.account-card {
width: 694rpx;
margin: 0 auto;
padding: 2rpx;
// background: linear-gradient(180deg, #ffffff 0.88%, #fff9ec 100%);
border-radius: 12rpx 12rpx 0 0;
z-index: 3;
position: relative;
background: url('https://zysc.fjptzykj.com:3000/shangcheng/423af1ff70d4e80ca7bd4ede17b9fe63800aaffd2e4e8b5b7584ab5bf5884996.png') no-repeat;
background-size: cover;
.account-card-box {
// background: #ffefd6;
.new-cont {
padding: 0 45rpx;
.new-btn {
background: rgba(178, 102, 67);
border-radius: 22px;
padding: 8px 0;
font-size: 16px;
color: white;
font-weight:700;
}
.item-title {
color: rgba(139, 105, 87, 1);
}
.item-detail {
color: rgba(81, 41, 24, 1);
font-size: 31px;
}
}
.card-box-header {
padding: 0 45rpx;
height: 72rpx;
// box-shadow: 0px 2px 6px #f2debe;
.header-title {
font-size: 24rpx;
font-weight: 500;
color: #a17545;
line-height: 30rpx;
}
.cicon-play-arrow {
color: #a17545;
font-size: 24rpx;
line-height: 30rpx;
}
}
.card-content {
height: 190rpx;
// background: #fdfae9;
.item-title {
font-size: 24rpx;
font-weight: 500;
color: rgba(139, 105, 87, 1);
line-height: 30rpx;
margin-bottom: 24rpx;
}
.item-detail {
font-size: 36rpx;
font-family: OPPOSANS;
font-weight: bold;
color: #692e04;
line-height: 30rpx;
}
}
}
}
</style>

233
pages/commission/components/account-info.vue
View File

@ -2,32 +2,71 @@
<template>
<view class="new-main">
<view class="account-card">
<view class="new-ljsy">
<view class="l dd">
<!-- <view class="l-img">
<image src="https://zysc.fjptzykj.com:3000/shangcheng/7624fd0e447748a5f8f4532d89a416cf7f962644e588c99d7e8c8baeab7ee91f.png" class="img"></image>
</view> -->
<view class="l-text">
<view class="l-text-b">
累计收益（元）
</view>
<view class="l-text-t">
{{
fen2yuan(state.summary2.withdrawPrice || 0)
}}
</view>
</view>
</view>
<view class="l r" @click="sheep.$router.go('/pages/commission/team')">
<!-- <view class="l-img">
<image src="https://zysc.fjptzykj.com:3000/shangcheng/6575e409f7656efb2821b2159ca0a26916f83f037fc533f9f19aa141c412ee2c.png" class="img"></image>
</view> -->
<view class="l-text">
<view class="l-text-b">
我的团队
</view>
<view class="l-text-t">
{{
state.arr2.firstBrokerageUserCount + state.arr2.secondBrokerageUserCount ||
0
}}
</view>
</view>
</view>
</view>
<view class="account-card-box">
<view class="ss-flex ss-row-between card-box-header">
<!--<view class="ss-flex ss-row-between card-box-header">
<view class="ss-flex">
<!-- <view class="header-title ss-m-r-16">账户信息</view> -->
<button class="ss-reset-button look-btn ss-flex" @tap="state.showMoney = !state.showMoney">
<uni-icons :type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'" color="#A57A55"
size="20" />
</button>
</view>
<view class="ss-flex" @tap="sheep.$router.go('/pages/commission/wallet')">
<view class="ss-flex" @tap="sheep.$router.go('/pages/commission/wallet')">
<view class="header-title ss-m-r-4">提现记录</view>
<text class="cicon-play-arrow" />
</view>
</view>
</view> -->
<!-- 提现金额 -->
<view class="ss-flex new-cont">
<view class="new-cont">
<view class="ss-flex-1 ss-flex-col ">
<view class="item-title">可提现(元)</view>
<view class="item-detail">
{{ state.showMoney ? fen2yuan(state.brokerageInfo.brokeragePrice) : '***' }}
</view>
</view>
<view class="ss-flex-1 ss-flex-col ss-col-center new-btn"
<!-- <view class="ss-flex-1 ss-flex-col ss-col-center new-btn"
@tap="sheep.$router.go('/pages/commission/withdraw')"
>
立即提现
</view> -->
<view class="sss" @tap="sheep.$router.go('/pages/commission/wallet')">
<view class="header-title ss-m-r-4">提现记录</view>
<image class="menu-icon-you" src="@/static/images/dayu.png" mode="aspectFill"></image>
</view>
</view>
<!-- 收益 -->
@ -51,15 +90,24 @@
</view>
</view>
</view>
<view class="ss-flex-1 ss-flex-col ss-col-center new-btn"
@tap="sheep.$router.go('/pages/commission/withdraw')">
立即提现
</view>
</view>
</view>
</view>
<!-- 菜单栏 -->
<commission-menu />
</view>
</template>
<script setup>
import commissionMenu from './commission-menu.vue';
import sheep from '@/sheep';
import {
computed,
@ -75,22 +123,46 @@
const userInfo = computed(() => sheep.$store('user').userInfo);
const state = reactive({
showMoney: false,
showMoney: true,
summary: {},
brokerageInfo: {}, // 分销信息
arr:{}
arr: {},
summary2: {},
arr2: {}
});
async function getAgentInfo() {
const {
code,
data
} = await BrokerageApi.getBrokerageUserSummary();
if (code !== 0) {
return;
}
state.summary2 = data;
}
onBeforeMount(async () => {
getAgentInfo();
// 概要数据
let {
data
} = await BrokerageApi.getBrokerageUserSummary();
state.arr2 = data;
});
// 获得分销信息
async function getBrokerageUser() {
const { data, code } = await BrokerageApi.getBrokerageUser();
if (code === 0) {
state.brokerageInfo = data;
}
const {
data,
code
} = await BrokerageApi.getBrokerageUser();
if (code === 0) {
state.brokerageInfo = data;
}
}
onMounted(async () => {
let {
code,
@ -101,49 +173,138 @@
}
});
onBeforeMount(() => {
getBrokerageUser();
getBrokerageUser();
});
</script>
<style lang="scss" scoped>
.new-main{
width: 100%;
.menu-icon-you {
width: 38rpx;
height: 38rpx;
}
.account-card {
width: 694rpx;
.new-btn {
width: 85%;
margin: 0 auto;
background: rgba(235, 70, 39);
padding: 12px 0;
border-radius: 20px;
color: white;
font-weight:700;
}
.new-ljsy {
// width: 100%;
// background:white;
padding: 8px 13px;
display: flex;
justify-content: center;
.l {
// background: rgba(254,244,237);
// background:url('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/8e878e15d22f68e0187a953aeba31b80423b7e3fafa8e4aa9f237477ac0fd519.png') rgba(254,244,237,1);
width: 43%;
height: 85px;
border-radius: 12px;
background-size: cover;
// position:relative;
display: flex;
align-items: center;
justify-content: left;
&.dd {
margin-right: 5%;
}
.l-text {
// position:absolute;
// top:50%;
// transform: translateY(-50%);
// left:70px;
.l-text-t {
font-size: 27px;
font-weight: 700;
}
.l-text-b {
font-size: 24rpx;
}
}
.l-img {
width: 40px;
height: 40px;
margin-right: 10px;
.img {
width: 100%;
height: 100%;
}
}
}
.r {
// background:url('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/b18f31e528ad0ab1026441faba07cb9e64723ffa511d103324fcd65fcaaf1557.png') rgba(254,244,237,1);
// background-size: cover;
.l-text {
// left:80px;
}
}
}
.new-main {
width: 100%;
margin: 15px auto !important;
}
.account-card {
// width: 694rpx;
margin: 0 15px;
padding: 2rpx;
// background: linear-gradient(180deg, #ffffff 0.88%, #fff9ec 100%);
border-radius: 12rpx 12rpx 0 0;
// border-radius: 12rpx 12rpx 0 0;
z-index: 3;
position: relative;
background: url('https://zysc.fjptzykj.com:3000/shangcheng/423af1ff70d4e80ca7bd4ede17b9fe63800aaffd2e4e8b5b7584ab5bf5884996.png') no-repeat;
background-size: cover;
background: url('https://zysc.fjptzykj.com:3000/shangcheng/cbbe23772e68ed5fc5c18d193f9f674d6e87ccddd422e0df6af6cab5dfea6c27.png') no-repeat;
background-size: 100%;
padding-bottom: 25px;
border-radius: 18px;
.account-card-box {
// background: #ffefd6;
.new-cont {
padding: 0 45rpx;
display: flex;
justify-content: space-between;
margin-top: 13px;
.sss{
display:flex;
height:20px;
align-items:center;
.header-title{
color:rgba(194,194,194);
}
}
.new-btn {
background: rgba(178, 102, 67);
border-radius: 22px;
padding: 8px 0;
font-size: 16px;
color: white;
font-weight:700;
font-weight: 700;
}
.item-title {
color: rgba(139, 105, 87, 1);
color: rgba(142, 144, 145, 1);
font-size: 24rpx;
}
.item-detail {
color: rgba(81, 41, 24, 1);
font-size: 31px;
color: rgba(231, 91, 79, 1);
font-size: 20px;
}
}
@ -173,16 +334,16 @@
.item-title {
font-size: 24rpx;
font-weight: 500;
color: rgba(139, 105, 87, 1);
color: rgba(142, 144, 145, 1);
line-height: 30rpx;
margin-bottom: 24rpx;
}
.item-detail {
font-size: 36rpx;
font-size: 20px;
font-family: OPPOSANS;
font-weight: bold;
color: #692e04;
color: rgba(80, 80, 80, 1);
line-height: 30rpx;
}
}

227
pages/commission/components/commission-info-tow.vue Normal file
View File

@ -0,0 +1,227 @@
<!-- 分销商信息 -->
<template>
<!-- 用户资料 -->
<view class="user-card ss-flex ss-col-bottom">
<view class="card-top ss-flex ss-row-between">
<view class="ss-flex">
<view class="head-img-box">
<image class="head-img" :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill"></image>
</view>
<view class="ss-flex-col">
<view class="user-name" style="color:white;">{{ userInfo.nickname }}</view>
</view>
</view>
</view>
<!-- 账户信息 -->
<account-info style="margin: 0 auto;" />
</view>
<view class="new-ljsy">
<view class="l dd">
<view class="l-img">
<image src="https://zysc.fjptzykj.com:3000/shangcheng/7624fd0e447748a5f8f4532d89a416cf7f962644e588c99d7e8c8baeab7ee91f.png" class="img"></image>
</view>
<view class="l-text">
<view class="l-text-t">
{{
fen2yuan(state.summary.withdrawPrice || 0)
}}
</view>
<view class="l-text-b">
累计收益（元）
</view>
</view>
</view>
<view class="l r" @click="sheep.$router.go('/pages/commission/team')">
<view class="l-img">
<image src="https://zysc.fjptzykj.com:3000/shangcheng/6575e409f7656efb2821b2159ca0a26916f83f037fc533f9f19aa141c412ee2c.png" class="img"></image>
</view>
<view class="l-text">
<view class="l-text-t">
{{
state.arr.firstBrokerageUserCount + state.arr.secondBrokerageUserCount ||
0
}}
</view>
<view class="l-text-b">
我的团队
</view>
</view>
</view>
</view>
</template>
<script setup>
import accountInfo from './account-info.vue';
import sheep from '@/sheep';
import BrokerageApi from '@/sheep/api/trade/brokerage';
import {
computed,
reactive,
onBeforeMount
} from 'vue';
import {
fen2yuan
} from '@/sheep/hooks/useGoods';
const userInfo = computed(() => sheep.$store('user').userInfo);
const headerBg = sheep.$url.css('/static/img/shop/commission/background.png');
const state = reactive({
showMoney: false,
summary:{},
arr:{}
});
async function getAgentInfo() {
const { code, data } = await BrokerageApi.getBrokerageUserSummary();
if (code !== 0) {
return;
}
state.summary = data;
}
onBeforeMount(async() => {
getAgentInfo();
// 概要数据
let { data } = await BrokerageApi.getBrokerageUserSummary();
state.arr = data;
});
</script>
<style lang="scss" scoped>
.new-ljsy {
width:100%;
background:white;
padding: 20px 0;
display: flex;
justify-content: center;
.l {
background: rgba(254,244,237);
// background:url('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/8e878e15d22f68e0187a953aeba31b80423b7e3fafa8e4aa9f237477ac0fd519.png') rgba(254,244,237,1);
width:43%;
height:85px;
border-radius: 12px;
background-size: cover;
// position:relative;
display:flex;
align-items:center;
justify-content: center;
&.dd{
margin-right: 5%;
}
.l-text{
// position:absolute;
// top:50%;
// transform: translateY(-50%);
// left:70px;
.l-text-t{
font-size:20px;
font-weight: 700;
}
.l-text-b{
font-size: 13px;
}
}
.l-img{
width:40px;
height:40px;
margin-right:10px;
.img{
width:100%;
height:100%;
}
}
}
.r {
// background:url('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/b18f31e528ad0ab1026441faba07cb9e64723ffa511d103324fcd65fcaaf1557.png') rgba(254,244,237,1);
// background-size: cover;
.l-text{
// left:80px;
}
}
}
// 用户资料卡片
.user-card {
width: 100%;
height: 580rpx;
// margin: -88rpx 20rpx 0 20rpx;
background: url('https://zysc.fjptzykj.com:3000/shangcheng/c4f941683d41701ac7f182824791ff43b5f7e70fb527b4d4d153416d6065c44f.png') no-repeat;
// background: url('https://zysc.fjptzykj.com:3000/shangcheng/4bcaa2803c9cc953353d22db804b952b333e97d2a0d57266a00baf0c07379efa.png') no-repeat;
// background:#ff3000;
background-size: 100% 100%;
display: flex;
flex-wrap: wrap;
.head-img-box {
margin-right: 20rpx;
width: 62rpx;
height: 62rpx;
border-radius: 50%;
position: relative;
background: #fce0ad;
.head-img {
width: 62rpx;
height: 62rpx;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.card-top {
box-sizing: border-box;
margin-top: 46px;
margin-left: 16px;
.user-name {
font-size: 32rpx;
font-weight: bold;
color: #692e04;
line-height: 30rpx;
}
.log-btn {
width: 84rpx;
height: 42rpx;
border: 2rpx solid rgba(#ffffff, 0.33);
border-radius: 21rpx;
font-size: 22rpx;
font-weight: 400;
color: #ffffff;
margin-bottom: 20rpx;
}
.look-btn {
color: #fff;
width: 40rpx;
height: 40rpx;
}
}
.user-info-box {
.tag-box {
background: #ff6000;
border-radius: 18rpx;
line-height: 36rpx;
.tag-img {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
margin-left: -2rpx;
}
.tag-title {
font-size: 24rpx;
padding: 0 10rpx;
font-weight: 500;
line-height: 36rpx;
color: #fff;
}
}
}
}
</style>

94
pages/commission/components/commission-info.vue
View File

@ -13,41 +13,10 @@
</view>
</view>
<!-- 账户信息 -->
<account-info style="margin: 0 auto;" />
</view>
<view class="new-ljsy">
<view class="l dd">
<view class="l-img">
<image src="https://zysc.fjptzykj.com:3000/shangcheng/7624fd0e447748a5f8f4532d89a416cf7f962644e588c99d7e8c8baeab7ee91f.png" class="img"></image>
</view>
<view class="l-text">
<view class="l-text-t">
{{
fen2yuan(state.summary.withdrawPrice || 0)
}}
</view>
<view class="l-text-b">
累计收益（元）
</view>
</view>
</view>
<view class="l r" @click="sheep.$router.go('/pages/commission/team')">
<view class="l-img">
<image src="https://zysc.fjptzykj.com:3000/shangcheng/6575e409f7656efb2821b2159ca0a26916f83f037fc533f9f19aa141c412ee2c.png" class="img"></image>
</view>
<view class="l-text">
<view class="l-text-t">
{{
state.arr.firstBrokerageUserCount + state.arr.secondBrokerageUserCount ||
0
}}
</view>
<view class="l-text-b">
我的团队
</view>
</view>
</view>
<account-info />
</view>
</template>
<script setup>
@ -68,8 +37,6 @@
const state = reactive({
showMoney: false,
summary:{},
arr:{}
});
async function getAgentInfo() {
@ -88,64 +55,15 @@
</script>
<style lang="scss" scoped>
.new-ljsy {
width:100%;
background:white;
padding: 20px 0;
display: flex;
justify-content: center;
.l {
background: rgba(254,244,237);
// background:url('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/8e878e15d22f68e0187a953aeba31b80423b7e3fafa8e4aa9f237477ac0fd519.png') rgba(254,244,237,1);
width:43%;
height:85px;
border-radius: 12px;
background-size: cover;
// position:relative;
display:flex;
align-items:center;
justify-content: center;
&.dd{
margin-right: 5%;
}
.l-text{
// position:absolute;
// top:50%;
// transform: translateY(-50%);
// left:70px;
.l-text-t{
font-size:20px;
font-weight: 700;
}
.l-text-b{
font-size: 13px;
}
}
.l-img{
width:40px;
height:40px;
margin-right:10px;
.img{
width:100%;
height:100%;
}
}
}
.r {
// background:url('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/b18f31e528ad0ab1026441faba07cb9e64723ffa511d103324fcd65fcaaf1557.png') rgba(254,244,237,1);
// background-size: cover;
.l-text{
// left:80px;
}
}
}
// 用户资料卡片
.user-card {
width: 100%;
height: 580rpx;
// margin: -88rpx 20rpx 0 20rpx;
background: url('https://zysc.fjptzykj.com:3000/shangcheng/c4f941683d41701ac7f182824791ff43b5f7e70fb527b4d4d153416d6065c44f.png') no-repeat;
background: url('https://zysc.fjptzykj.com:3000/shangcheng/ae736076156e99710f417fe5619cd0be47a2fad082a192dbbd6dcbc2bbc65eea.png') no-repeat;
// background: url('https://zysc.fjptzykj.com:3000/shangcheng/4bcaa2803c9cc953353d22db804b952b333e97d2a0d57266a00baf0c07379efa.png') no-repeat;
// background:#ff3000;
background-size: 100% 100%;

2
pages/commission/components/commission-log.vue
View File

@ -63,7 +63,7 @@
list: [],
total: 0,
pageNo: 1,
pageSize: 1,
pageSize: 8,
},
});

49
pages/commission/components/commission-menu.vue
View File

@ -8,9 +8,9 @@
<image class="menu-icon " :src="sheep.$url.static(item.img)" mode="aspectFill"></image>
<view>{{ item.title }}</view>
</view>
<view class="r">
<!-- <view class="r">
<image class="menu-icon-you" src="@/static/images/dayu.png" mode="aspectFill"></image>
</view>
</view> -->
</view>
</view>
</view>
@ -41,32 +41,32 @@
const state = reactive({
menuListnew: [{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/82255ab9cb8fa91b261a1976c81a7c761c34a8aa3d3fc12864b3b83158d22267.png',
img: 'https://zysc.fjptzykj.com:3000/shangcheng/38fcbd2619cac8f4134efdf6ddf98a098d7ec4920be09c399d3e05b26699cfc3.png',
title: '推广名片',
path: 'action:showShareModal',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/3aca872c5c25923b883b98364ca7525bcb7d176cf89769bab429fed090c75adb.png',
img: 'https://zysc.fjptzykj.com:3000/shangcheng/d6fd382e25839128b4231616b5414b09964f998faaed300fd71b093d0545b4c9.png',
title: '佣金明细',
path: '/pages/commission/wallet',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/512aaaf15aeedc1fd5ad6dc14161d83a4c4ecee33ae2428986c8ecbf0c420fa7.png',
img: 'https://zysc.fjptzykj.com:3000/shangcheng/fb1773e483bdf5889657ad0c6113327051a337514d5de0bce3d14a744d1f2b0c.png',
title: '分销订单',
path: '/pages/commission/order',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/6b61f1357f2f5a4a211c0bb4bac3d85c6e85958e0bfd04d0045d6c83e98085b7.png',
img: 'https://zysc.fjptzykj.com:3000/shangcheng/7553f1ef8dd48b2fce3fc3a56eb40fe04a6099fe7744f26b5e2481050ab940e7.png',
title: '推广商品',
path: '/pages/commission/goods',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/e488e0f84bd4da1edfe75ccfbcc16acf8c60073409f03406bb350573b43769a8.png',
img: 'https://zysc.fjptzykj.com:3000/shangcheng/59061d8cd61d6488f5ec24eb4e04b09308862c54cbde8e5e38d58cb38a0098d9.png',
title: '推广排行',
path: '/pages/commission/promoter',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/28d6bf4595172ed0a1cdc693483eef018f7f1242be35106bb12ce3ca21940753.png',
img: 'https://zysc.fjptzykj.com:3000/shangcheng/4207ccd490ee40e80c21a6bdf6df62cc89b20cf36cf26fed1559704b7e61b131.png',
title: '佣金排行',
path: '/pages/commission/commission-ranking',
},
@ -120,27 +120,30 @@
<style lang="scss" scoped>
.new-menu {
width: 100%;
margin:0 15px;
background: white;
margin-top:10px;
border-radius: 18px;
padding:25px 0;
padding-bottom:0;
.new-menu-list {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 20px;
// display: flex;
// flex-wrap: wrap;
// align-items: center;
// padding: 0 20px;
.new-menu-item {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: space-between;
margin-bottom:19px;
float: left;
width: 50%;
// margin-bottom:19px;
display: flex;
justify-content: center;
.l {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 50%;
margin-bottom: 25px;
// width: 50%;
.menu-icon{
margin-right: 10px;
}
@ -208,8 +211,8 @@
}
.menu-icon {
width: 45rpx;
height: 45rpx;
width: 35px;
height: 35px;
background: #ffffff;
border-radius: 50%;
}

226
pages/commission/components/commission-menu2.vue Normal file
View File

@ -0,0 +1,226 @@
<!-- 分销：商菜单栏 -->
<template>
<view class="ss-flex-col new-menu">
<view class="new-menu-list">
<view class="new-menu-item" v-for="(item, index) in state.menuListnew" :key="index"
@tap="sheep.$router.go(item.path)">
<view class="l">
<image class="menu-icon " :src="sheep.$url.static(item.img)" mode="aspectFill"></image>
<view>{{ item.title }}</view>
</view>
<view class="r">
<image class="menu-icon-you" src="@/static/images/dayu.png" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
<!-- <view class="menu-box ss-flex-col">
<view class="header-box">
<image class="header-bg"
src="https://zysc.fjptzykj.com:3000/shangcheng/eb9244a1f0662a699869d47287a477bd16147030ff25c9573395036192b86d91.png" />
<view class="ss-flex header-title">
<view class="title">功能专区</view>
<text class="cicon-forward"></text>
</view>
</view>
<view class="menu-list ss-flex ss-flex-wrap">
<view v-for="(item, index) in state.menuList" :key="index" class="item-box ss-flex-col ss-col-center"
@tap="sheep.$router.go(item.path)">
<image class="menu-icon ss-m-b-10" :src="sheep.$url.static(item.img)" mode="aspectFill"></image>
<view>{{ item.title }}</view>
</view>
</view>
</view> -->
</template>
<script setup>
import sheep from '@/sheep';
import {
reactive
} from 'vue';
const state = reactive({
menuListnew: [{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/82255ab9cb8fa91b261a1976c81a7c761c34a8aa3d3fc12864b3b83158d22267.png',
title: '推广名片',
path: 'action:showShareModal',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/3aca872c5c25923b883b98364ca7525bcb7d176cf89769bab429fed090c75adb.png',
title: '佣金明细',
path: '/pages/commission/wallet',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/512aaaf15aeedc1fd5ad6dc14161d83a4c4ecee33ae2428986c8ecbf0c420fa7.png',
title: '分销订单',
path: '/pages/commission/order',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/6b61f1357f2f5a4a211c0bb4bac3d85c6e85958e0bfd04d0045d6c83e98085b7.png',
title: '推广商品',
path: '/pages/commission/goods',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/e488e0f84bd4da1edfe75ccfbcc16acf8c60073409f03406bb350573b43769a8.png',
title: '推广排行',
path: '/pages/commission/promoter',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/28d6bf4595172ed0a1cdc693483eef018f7f1242be35106bb12ce3ca21940753.png',
title: '佣金排行',
path: '/pages/commission/commission-ranking',
},
],
menuList: [{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/ec41e4f5b45c087232aab8d088019a1e9d781b9bde0f54ddbb18e90230b83255.png',
title: '我的团队',
path: '/pages/commission/team',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/228c9cd847514f99ca1181b4d413c24e482ab46459a557e3b934facb32ab546d.png',
title: '佣金明细',
path: '/pages/commission/wallet',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/bb763f93be24f6d5c8c2948e512b95597d748f576277cc2d91f452fb3741e5a3.png',
title: '分销订单',
path: '/pages/commission/order',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/326f6fe148cd6c8328297731bd63674a3a86340f937dfd1a376e435e34b5073e.png',
title: '推广商品',
path: '/pages/commission/goods',
},
// {
// img: 'https://zysc.fjptzykj.com:3000/shangcheng/fe729044c3c0874d93435151bb204dede3d1dfbc0e2d03d09e2f76534e7cb8ba.png',
// title: '我的资料',
// path: '/pages/commission/apply',
// isAgentFrom: true,
// },
// todo @芋艿：邀请海报需要登录后的个人数据
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/f238f60d6e45080cdbbd294c344d3e2fc3a30c34ccb9345e931b0c5aa9e90645.png',
title: '邀请海报',
path: 'action:showShareModal',
},
// TODO @芋艿：缺少 icon
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/d6bc7dbec1333e554a4781cbfae023e590a555dfca12784615023ae43bd2bf46.png',
title: '推广排行',
path: '/pages/commission/promoter',
},
{
img: 'https://zysc.fjptzykj.com:3000/shangcheng/4332d64835bb4aedc05636950f7cd7dcbab085f0f72f42eee4d87799947a7108.png',
title: '佣金排行',
path: '/pages/commission/commission-ranking',
},
],
});
</script>
<style lang="scss" scoped>
.new-menu {
width: 100%;
background: white;
.new-menu-list {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 20px;
.new-menu-item {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: space-between;
margin-bottom:19px;
.l {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 50%;
.menu-icon{
margin-right: 10px;
}
}
.r {
width: 4%;
display: flex;
align-items: center;
}
}
}
}
.menu-box {
margin: 0 auto;
width: 690rpx;
margin-bottom: 20rpx;
margin-top: 20rpx;
border-radius: 12rpx;
z-index: 3;
position: relative;
}
.header-box {
width: 690rpx;
height: 76rpx;
position: relative;
.header-bg {
width: 690rpx;
height: 76rpx;
}
.header-title {
position: absolute;
left: 20rpx;
top: 24rpx;
}
.title {
font-size: 28rpx;
font-weight: 500;
color: #ffffff;
line-height: 30rpx;
}
.cicon-forward {
font-size: 30rpx;
font-weight: 400;
color: #ffffff;
line-height: 30rpx;
}
}
.menu-list {
padding: 50rpx 0 10rpx 0;
background: #fdfae9;
border-radius: 0 0 12rpx 12rpx;
}
.item-box {
width: 25%;
margin-bottom: 40rpx;
}
.menu-icon {
width: 45rpx;
height: 45rpx;
background: #ffffff;
border-radius: 50%;
}
.menu-icon-you{
width: 48rpx;
height: 48rpx;
}
.menu-title {
font-size: 26rpx;
font-weight: 500;
color: #ffffff;
}
</style>

15
pages/commission/goods.vue
View File

@ -78,11 +78,12 @@
// TODO 芋艿：分享的接入
function onShareGoods(goodsInfo) {
console.log(goodsInfo,"/pages/index/cart")
state.shareInfo = $share.getShareInfo(
{
title: goodsInfo.title,
image: sheep.$url.cdn(goodsInfo.image),
desc: goodsInfo.subtitle,
title: goodsInfo.name,
image: sheep.$url.cdn(goodsInfo.picUrl),
desc: goodsInfo.introduction,
params: {
page: '2',
query: goodsInfo.id,
@ -90,10 +91,10 @@
},
{
type: 'goods', // 商品海报
title: goodsInfo.title, // 商品标题
image: sheep.$url.cdn(goodsInfo.image), // 商品主图
price: goodsInfo.price[0], // 商品价格
original_price: goodsInfo.original_price, // 商品原价
title: goodsInfo.name, // 商品标题
image: sheep.$url.cdn(goodsInfo.picUrl), // 商品主图
price: fen2yuan(goodsInfo.price), // 商品价格
marketPrice: fen2yuan(goodsInfo.marketPrice), // 商品原价
},
);
showShareModal();

2
pages/commission/index.vue
View File

@ -13,7 +13,7 @@
<!-- 账户信息 -->
<!-- <account-info /> -->
<!-- 菜单栏 -->
<commission-menu />
<!-- <commission-menu /> -->
<!-- 分销记录 -->
<!-- <commission-log /> -->

4
pages/commission/order.vue
View File

@ -97,7 +97,7 @@
list: [],
total: 0,
pageNo: 1,
pageSize: 1,
pageSize: 8,
},
});
@ -128,7 +128,7 @@
state.loadStatus = 'loading';
let { code, data } = await BrokerageApi.getBrokerageRecordPage({
pageSize: state.pagination.pageSize,
pageNo: state.pagination.pageSize,
pageNo: state.pagination.pageNo,
bizType: 1, // 获得推广佣金
status: state.currentTab > 0 ? state.currentTab : undefined,
});

4
pages/commission/wallet.vue
View File

@ -150,7 +150,7 @@
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import dayjs from 'dayjs';
import _ from 'lodash';
import _ from 'lodash-es';
import BrokerageApi from '@/sheep/api/trade/brokerage';
import { fen2yuan } from '@/sheep/hooks/useGoods';
import { resetPagination } from '@/sheep/util';
@ -168,7 +168,7 @@
list: [],
total: 0,
pageNo: 1,
pageSize: 1,
pageSize: 8,
},
loadStatus: '',

3
pages/goods/comment/add.vue
View File

@ -80,7 +80,8 @@
await OrderApi.createOrderItemComment(comment);
}
// 都评论好，返回
sheep.$router.back();
// sheep.$router.back();
sheep.$router.redirect('/pages/order/list');
}
onLoad(async (options) => {

7
pages/goods/components/detail/detail-comment-card.vue
View File

@ -3,7 +3,7 @@
<view class="detail-comment-card bg-white">
<view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30">
<view class="ss-flex ss-col-center">
<view class="line"></view>
<view class="line" :class="state.themeType ? `${state.themeType}` : ''"></view>
<view class="title ss-m-l-20 ss-m-r-10">评价</view>
<view class="des">({{ state.total }})</view>
</view>
@ -32,11 +32,11 @@
</template>
<script setup>
import { reactive, onBeforeMount } from 'vue';
import { reactive, onBeforeMount,computed } from 'vue';
import sheep from '@/sheep';
import CommentApi from '@/sheep/api/product/comment';
import commentItem from './comment-item.vue';
const app = computed(() => sheep.$store('app'));
const props = defineProps({
goodsId: {
type: [Number, String],
@ -47,6 +47,7 @@
const state = reactive({
commentList: [], // 评论列表，只展示最近的 3 条
total: 0, // 总评论数
themeType: app.value.platform.themeType
});
async function getComment(id) {

91
pages/goods/components/detail/detail-content-card.vue
View File

@ -1,52 +1,63 @@
<!-- 商品详情：描述卡片 -->
<template>
<view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
<view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
<view class="line"></view>
<view class="title ss-m-l-20 ss-m-r-20">详情</view>
</view>
<view class="card-content">
<mp-html :content="content" />
</view>
</view>
<view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
<view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
<view class="line" :class="state.themeType ? `${state.themeType}` : ''"></view>
<view class="title ss-m-l-20 ss-m-r-20">详情</view>
</view>
<view class="card-content">
<mp-html :content="content" />
</view>
</view>
</template>
<script setup>
import sheep from '@/sheep';
const { safeAreaInsets } = sheep.$platform.device;
import {
reactive,
computed
} from 'vue';
import sheep from '@/sheep';
const app = computed(() => sheep.$store('app'));
const state = reactive({
themeType: app.value.platform.themeType
});
const props = defineProps({
content: {
type: String,
default: '',
},
});
const {
safeAreaInsets
} = sheep.$platform.device;
const props = defineProps({
content: {
type: String,
default: '',
},
});
</script>
<style lang="scss" scoped>
.detail-content-card {
.card-header {
.line {
width: 6rpx;
height: 30rpx;
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
border-radius: 3rpx;
}
.detail-content-card {
.card-header {
.line {
width: 6rpx;
height: 30rpx;
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
border-radius: 3rpx;
}
.title {
font-size: 30rpx;
font-weight: bold;
}
.title {
font-size: 30rpx;
font-weight: bold;
}
.des {
font-size: 24rpx;
color: $dark-9;
}
.des {
font-size: 24rpx;
color: $dark-9;
}
.more-btn {
font-size: 24rpx;
color: var(--ui-BG-Main);
}
}
}
</style>
.more-btn {
font-size: 24rpx;
color: var(--ui-BG-Main);
}
}
}
</style>

7
pages/goods/components/detail/detail-navbar.vue
View File

@ -29,7 +29,7 @@
<view class="tab-title" :class="state.curTab === item.value ? 'cur-tab-title' : ''">
{{ item.label }}
</view>
<view v-show="state.curTab === item.value" class="tab-line"></view>
<view v-show="state.curTab === item.value" class="tab-line" :class="state.themeType ? state.themeType : ''"></view>
</view>
</view>
</view>
@ -41,12 +41,12 @@
</template>
<script setup>
import { reactive } from 'vue';
import { reactive, computed } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import throttle from '@/sheep/helper/throttle.js';
import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
const app = computed(() => sheep.$store('app'));
const sys_statusBar = sheep.$platform.device.statusBarHeight;
const sys_navBar = sheep.$platform.navbar;
const capsuleStyle = {
@ -74,6 +74,7 @@
to: 'detail-content-selector',
},
],
themeType:app.value.platform.themeType
});
const emits = defineEmits(['clickLeft']);
const hasHistory = sheep.$router.hasHistory();

2
pages/goods/components/detail/detail-tabbar.vue
View File

@ -32,7 +32,7 @@
>
<image
class="item-icon"
src="/static/images/service.png"
src="https://zysc.fjptzykj.com:3000/shangcheng/2f8b9d197059eb62e9dc212392a42fb481275b31f2af9c35033070ea15b71167.png"
mode="aspectFit"
/>
<view class="item-title">客服</view>

62
pages/goods/groupon.vue
View File

File diff suppressed because one or more lines are too long

26
pages/goods/index.vue
View File

@ -101,22 +101,24 @@
/>
<!-- 活动跳转：拼团/秒杀/砍价活动 -->
<detail-activity-tip
<!-- <detail-activity-tip
v-if="state.activityList.length > 0"
:activity-list="state.activityList"
/>
/> -->
<!-- 详情 tabbar -->
<detail-tabbar v-model="state.goodsInfo">
<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
<button
class="ss-reset-button add-btn ui-Shadow-Main"
@tap="state.showSelectSku = true"
:class="state.themeType ? `${state.themeType}v` : ''"
@tap="state.showSelectSku = true"
>
加入购物车
</button>
<button
class="ss-reset-button buy-btn ui-Shadow-Main"
:class="state.themeType ? state.themeType : ''"
@tap="state.showSelectSku = true"
>
立即购买
@ -167,6 +169,7 @@
onPageScroll(() => {});
const isLogin = computed(() => sheep.$store('user').isLogin);
const app = computed(() => sheep.$store('app'));
const state = reactive({
goodsId: 0,
skeletonLoading: true, // SPU 加载中
@ -178,6 +181,7 @@
showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗
activityInfo: [], // 【满减送/限时折扣】可参与的 Activity 营销活动的列表
activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
themeType:app.value.platform.themeType
});
// 规格变更
@ -318,6 +322,22 @@
</script>
<style lang="scss" scoped>
.bluev{
background-color:rgba(33,202,254) !important;
color:white !important;
}
.lvv{
background-color:rgba(253,157,17) !important;
color:white !important;
}
.pinkv{
background-color:black !important;
color:white !important;
}
.orangev{
background-color:rgba(253,157,17) !important;
color:white !important;
}
.detail-card {
background-color: #ffff;
margin: 14rpx 20rpx;

14
pages/goods/list.vue
View File

@ -1,11 +1,15 @@
<template>
<!-- <s-layout
navbar="normal"
:leftWidth="0"
:rightWidth="0"
tools="search"
:defaultSearch="state.keyword"
@search="onSearch"
> -->
<s-layout
navbar="normal"
:leftWidth="0"
:rightWidth="0"
tools="search"
:defaultSearch="state.keyword"
@search="onSearch"
title="商品列表"
>
<!-- 筛选 -->
<su-sticky bgColor="#fff">

2
pages/goods/point.vue
View File

@ -388,7 +388,7 @@
font-size: 24rpx;
font-weight: 600;
margin-left: -36rpx;
background-image: v-bind(disabledBtnBg);
background-image: url('@/static/images/activity-btn-disabled.png');
background-repeat: no-repeat;
background-size: 100% 100%;
color: #999999;

389
pages/goods/sales.vue
View File

@ -1,389 +0,0 @@
<template>
<s-layout navbar="normal" :leftWidth="0" :rightWidth="0" >
<!-- 筛选 -->
<!-- <su-sticky bgColor="#fff">
<view class="ss-flex">
<view class="ss-flex-1">
<su-tabs :list="state.tabList" :scrollable="false" @change="onTabsChange"
:current="state.currentTab" />
</view>
<view class="list-icon" @tap="state.iconStatus = !state.iconStatus">
<text v-if="state.iconStatus" class="sicon-goods-list" />
<text v-else class="sicon-goods-card" />
</view>
</view>
</su-sticky> -->
<view class="title">
促销商品
</view>
<!-- 弹窗 -->
<su-popup :show="state.showFilter" type="top" round="10" :space="sys_navBar + 38" backgroundColor="#F6F6F6"
:zIndex="10" @close="state.showFilter = false">
<view class="filter-list-box">
<view class="filter-item" v-for="(item, index) in state.tabList[state.currentTab].list"
:key="item.value" :class="[{ 'filter-item-active': index === state.curFilter }]"
@tap="onFilterItem(index)">
{{ item.label }}
</view>
</view>
</su-popup>
<!-- 情况一：单列布局 -->
<view class="goods-list ss-m-t-20">
<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
<s-goods-column class="" size="lg" :data="item" :topRadius="10" :bottomRadius="10"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })" />
</view>
</view>
<!-- 情况二：双列布局 -->
<!-- <view v-if="!state.iconStatus && state.pagination.total > 0"
class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
<view class="goods-list-box">
<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
<s-goods-column class="goods-md-box" size="md" :data="item" :topRadius="10" :bottomRadius="10"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="mountMasonry($event, 'left')">
<template v-slot:cart>
<button class="ss-reset-button cart-btn" />
</template>
</s-goods-column>
</view>
</view>
<view class="goods-list-box">
<view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
<s-goods-column class="goods-md-box" size="md" :topRadius="10" :bottomRadius="10" :data="item"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="mountMasonry($event, 'right')">
<template v-slot:cart>
<button class="ss-reset-button cart-btn" />
</template>
</s-goods-column>
</view>
</view>
</view> -->
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
contentdown: '上拉加载更多',
}" @tap="loadMore" />
<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品" />
</s-layout>
</template>
<script setup>
import {
reactive
} from 'vue';
import {
onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import _ from 'lodash';
import {
resetPagination
} from '@/sheep/util';
import SpuApi from '@/sheep/api/product/spu';
const sys_navBar = sheep.$platform.navbar;
const emits = defineEmits(['close', 'change']);
const state = reactive({
pagination: {
list: [],
total: 0,
pageNo: 1,
pageSize: 6,
},
currentSort: undefined,
currentOrder: undefined,
currentTab: 0, // 当前选中的 tab
curFilter: 0, // 当前选中的 list 筛选项
showFilter: false,
iconStatus: false, // true - 单列布局；false - 双列布局
keyword: '',
categoryId: 0,
tabList: [{
name: '综合推荐',
list: [{
label: '综合推荐',
},
{
label: '价格升序',
sort: 'price',
order: true,
},
{
label: '价格降序',
sort: 'price',
order: false,
},
],
},
{
name: '销量',
sort: 'salesCount',
order: false,
},
{
name: '新品优先',
value: 'createTime',
order: false,
},
],
loadStatus: '',
leftGoodsList: [], // 双列布局 - 左侧商品
rightGoodsList: [], // 双列布局 - 右侧商品
});
// 加载瀑布流
let count = 0;
let leftHeight = 0;
let rightHeight = 0;
// 处理双列布局 leftGoodsList + rightGoodsList
function mountMasonry(height = 0, where = 'left') {
if (!state.pagination.list[count]) {
return;
}
if (where === 'left') {
leftHeight += height;
} else {
rightHeight += height;
}
if (leftHeight <= rightHeight) {
state.leftGoodsList.push(state.pagination.list[count]);
} else {
state.rightGoodsList.push(state.pagination.list[count]);
}
count++;
}
// 清空列表
function emptyList() {
resetPagination(state.pagination);
state.leftGoodsList = [];
state.rightGoodsList = [];
count = 0;
leftHeight = 0;
rightHeight = 0;
}
// 搜索
function onSearch(e) {
state.keyword = e;
emptyList();
getList(state.currentSort, state.currentOrder);
}
// 点击
function onTabsChange(e) {
// 如果点击的是【综合推荐】，则直接展开或者收起筛选项
if (state.tabList[e.index].list) {
state.currentTab = e.index;
state.showFilter = !state.showFilter;
return;
}
state.showFilter = false;
// 如果点击的是【销量】或者【新品优先】，则直接切换 tab
if (e.index === state.currentTab) {
return;
}
state.currentTab = e.index;
state.currentSort = e.sort;
state.currentOrder = e.order;
emptyList();
getList(e.sort, e.order);
}
// 点击 tab 的 list 筛选项
const onFilterItem = (val) => {
// 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据
// 这里选择 tabList[0] 的原因，是目前只有它有 list
if (
state.currentSort === state.tabList[0].list[val].sort &&
state.currentOrder === state.tabList[0].list[val].order
) {
state.showFilter = false;
return;
}
state.showFilter = false;
// 设置筛选条件
state.curFilter = val;
state.tabList[0].name = state.tabList[0].list[val].label;
state.currentSort = state.tabList[0].list[val].sort;
state.currentOrder = state.tabList[0].list[val].order;
// 清空 + 加载数据
emptyList();
getList();
};
async function getList() {
state.loadStatus = 'loading';
const {
code,
data
} = await SpuApi.getSpusales({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
sortField: state.currentSort,
sortAsc: state.currentOrder,
categoryId: state.categoryId,
keyword: state.keyword,
recommendBenefit:1
});
if (code !== 0) {
return;
}
state.pagination.list = _.concat(state.pagination.list, data.list);
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
mountMasonry();
}
// 加载更多
function loadMore() {
if (state.loadStatus === 'noMore') {
return;
}
state.pagination.pageNo++;
getList(state.currentSort, state.currentOrder);
}
// 获取促销列表
const getSpu = async (id) => {
const data = await SpuApi.getSpusales({recommendBenefit:1});
console.log(data, "我要留了")
};
onLoad((options) => {
state.categoryId = options.categoryId;
state.keyword = options.keyword;
getList(state.currentSort, state.currentOrder);
});
// 上拉加载更多
onReachBottom(() => {
loadMore();
});
</script>
<style lang="scss" scoped>
.title{
text-align: center;
padding: 10px 0;
position: relative;
&:after {
position: absolute;
content:'';
top: 50%;
left: 98px;
width: 100px;
height:2px;
background:#dadada;
transform: translateX(-50%);
}
&:before {
position: absolute;
content:'';
height:2px;
top: 50%;
right: 0;
width: 100px;
background:#dadada;
transform: translateX(-50%);
}
}
.goods-list-box {
width: 50%;
box-sizing: border-box;
.left-list {
margin-right: 10rpx;
margin-bottom: 20rpx;
}
.right-list {
margin-left: 10rpx;
margin-bottom: 20rpx;
}
}
.goods-box {
&:nth-last-of-type(1) {
margin-bottom: 0 !important;
}
&:nth-child(2n) {
margin-right: 0;
}
}
.list-icon {
width: 80rpx;
.sicon-goods-card {
font-size: 40rpx;
}
.sicon-goods-list {
font-size: 40rpx;
}
}
.goods-card {
margin-left: 20rpx;
}
.list-filter-tabs {
background-color: #fff;
}
.filter-list-box {
padding: 28rpx 52rpx;
.filter-item {
font-size: 28rpx;
font-weight: 500;
color: #333333;
line-height: normal;
margin-bottom: 24rpx;
&:nth-last-child(1) {
margin-bottom: 0;
}
}
.filter-item-active {
color: var(--ui-BG-Main);
}
}
.tab-item {
height: 50px;
position: relative;
z-index: 11;
.tab-title {
font-size: 30rpx;
}
.cur-tab-title {
font-weight: $font-weight-bold;
}
.tab-line {
width: 60rpx;
height: 6rpx;
border-radius: 6rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10rpx;
background-color: var(--ui-BG-Main);
z-index: 12;
}
}
</style>

103
pages/goods/seckill.vue
View File

File diff suppressed because one or more lines are too long

4
pages/index/cart.vue
View File

@ -90,7 +90,7 @@
</button>
<button
v-else
class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
class="ss-reset-button pay-btn ui-Shadow-Main"
@tap="onConfirm"
>
去结算
@ -216,6 +216,8 @@
line-height: 28rpx;
font-weight: 500;
border-radius: 40rpx;
background:#e93422;
color:white;
}
}

433
pages/index/category.vue
View File

@ -1,236 +1,245 @@
<!-- 商品分类列表 -->
<template>
<s-layout title="分类" tabbar="/pages/index/category" :bgStyle="{ color: '#fff' }">
<view class="s-category">
<view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]">
<!-- 商品分类（左） -->
<scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
<view
class="menu-item ss-flex"
v-for="(item, index) in state.categoryList"
:key="item.id"
:class="[{ 'menu-item-active': index === state.activeMenu }]"
@tap="onMenu(index)"
>
<view class="menu-title ss-line-1">
{{ item.name }}
</view>
</view>
</scroll-view>
<!-- 商品分类（右） -->
<scroll-view
class="goods-list-box"
scroll-y
:style="[{ height: pageHeight + 'px' }]"
v-if="state.categoryList?.length"
>
<!-- <image
v-if="state.categoryList[state.activeMenu].picUrl"
class="banner-img"
:src="sheep.$url.cdn(state.categoryList[state.activeMenu].picUrl)"
mode="widthFix"
/> -->
<first-one v-if="state.style === 'first_one'" :pagination="state.pagination" />
<first-two v-if="state.style === 'first_two'" :pagination="state.pagination" />
<second-one
v-if="state.style === 'second_one'"
:data="state.categoryList"
:activeMenu="state.activeMenu"
/>
<uni-load-more
v-if="
(state.style === 'first_one' || state.style === 'first_two') &&
state.pagination.total > 0
"
:status="state.loadStatus"
:content-text="{
contentdown: '点击查看更多',
}"
@tap="loadMore"
/>
</scroll-view>
</view>
</view>
</s-layout>
<s-layout title="分类" tabbar="/pages/index/category" :bgStyle="{ color: '#fff' }">
<view class="s-category">
<view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]">
<!-- 商品分类（左） -->
<scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
<view class="menu-item ss-flex" v-for="(item, index) in state.categoryList" :key="item.id"
:class="[{ 'menu-item-active': index === state.activeMenu }]" @tap="onMenu(index)">
<view class="menu-title ss-line-1">
{{ item.name }}
</view>
</view>
</scroll-view>
<!-- 商品分类（右） -->
<scroll-view class="goods-list-box" scroll-y :style="[{ height: pageHeight + 'px' }]"
v-if="state.categoryList?.length">
<!-- <image v-if="state.categoryList[state.activeMenu].picUrl" class="banner-img" :src="sheep.$url.cdn(state.categoryList[state.activeMenu].picUrl)" mode="widthFix"/> -->
<first-one v-if="state.style === 'first_one'" :pagination="state.pagination" />
<first-two v-if="state.style === 'first_two'" :pagination="state.pagination" />
<!-- 样式1 -->
<second-one v-show="state.typeId === '1'" :data="state.categoryList"
:activeMenu="state.activeMenu" />
<!-- 样式2 -->
<second-second ref="secondRef" v-show="state.typeId === '2'" :data="state.categoryList"
:activeMenu="state.activeMenu" />
<uni-load-more v-if="
(state.style === 'first_one' || state.style === 'first_two') &&
state.pagination.total > 0
" :status="state.loadStatus" :content-text="{
contentdown: '点击查看更多',
}" @tap="loadMore" />
</scroll-view>
</view>
</view>
</s-layout>
</template>
<script setup>
import secondOne from './components/second-one.vue';
import firstOne from './components/first-one.vue';
import firstTwo from './components/first-two.vue';
import sheep from '@/sheep';
import CategoryApi from '@/sheep/api/product/category';
import SpuApi from '@/sheep/api/product/spu';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import _ from 'lodash';
import { handleTree } from '@/sheep/util';
import secondOne from './components/second-one.vue';
import secondSecond from './components/second-second.vue';
import firstOne from './components/first-one.vue';
import firstTwo from './components/first-two.vue';
import sheep from '@/sheep';
import CategoryApi from '@/sheep/api/product/category';
import SpuApi from '@/sheep/api/product/spu';
import {
onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import {
computed,
reactive,
ref
} from 'vue';
import _ from 'lodash';
import {
handleTree
} from '@/sheep/util';
const state = reactive({
style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
categoryList: [], // 商品分类树
activeMenu: 0, // 选中的一级菜单，在 categoryList 的下标
const state = reactive({
style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
categoryList: [], // 商品分类树
activeMenu: 0, // 选中的一级菜单，在 categoryList 的下标
pagination: {
// 商品分页
list: [], // 商品列表
total: [], // 商品总数
pageNo: 1,
pageSize: 6,
},
loadStatus: '',
typeId:'1'
});
const app = computed(() => sheep.$store('app'));
state.typeId = app.value.platform.goodsType;//判断是什么样式
// console.log(app.value.platform.goodsType,"------------------------")
const secondRef = ref(null);
pagination: {
// 商品分页
list: [], // 商品列表
total: [], // 商品总数
pageNo: 1,
pageSize: 6,
},
loadStatus: '',
});
const {
safeArea
} = sheep.$platform.device;
const pageHeight = computed(() => safeArea.height - 44 - 50);
const { safeArea } = sheep.$platform.device;
const pageHeight = computed(() => safeArea.height - 44 - 50);
// 加载商品分类
async function getList() {
const {
code,
data
} = await CategoryApi.getCategoryList();
if (code !== 0) {
return;
}
state.categoryList = handleTree(data);
// console.log(state.categoryList,"ssssssssssssss")
}
// 加载商品分类
async function getList() {
const { code, data } = await CategoryApi.getCategoryList();
if (code !== 0) {
return;
}
state.categoryList = handleTree(data);
}
// 选中菜单
const onMenu = (val) => {
state.activeMenu = val;
if (state.style === 'second_one' && secondRef.value) {
secondRef.value.onFilterItem(state.categoryList[state.activeMenu].children[0].id);
}
if (state.style === 'first_one' || state.style === 'first_two') {
state.pagination.pageNo = 1;
state.pagination.list = [];
state.pagination.total = 0;
getGoodsList();
}
};
// 选中菜单
const onMenu = (val) => {
state.activeMenu = val;
if (state.style === 'first_one' || state.style === 'first_two') {
state.pagination.pageNo = 1;
state.pagination.list = [];
state.pagination.total = 0;
getGoodsList();
}
};
// 加载商品列表
async function getGoodsList() {
// 加载列表
state.loadStatus = 'loading';
const res = await SpuApi.getSpuPage({
categoryId: state.categoryList[state.activeMenu].id,
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
});
if (res.code !== 0) {
return;
}
// 合并列表
state.pagination.list = _.concat(state.pagination.list, res.data.list);
state.pagination.total = res.data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}
// 加载商品列表
async function getGoodsList() {
// 加载列表
state.loadStatus = 'loading';
const res = await SpuApi.getSpuPage({
categoryId: state.categoryList[state.activeMenu].id,
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
});
if (res.code !== 0) {
return;
}
// 合并列表
state.pagination.list = _.concat(state.pagination.list, res.data.list);
state.pagination.total = res.data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}
// 加载更多商品
function loadMore() {
if (state.loadStatus === 'noMore') {
return;
}
state.pagination.pageNo++;
getGoodsList();
}
// 加载更多商品
function loadMore() {
if (state.loadStatus === 'noMore') {
return;
}
state.pagination.pageNo++;
getGoodsList();
}
onLoad(async () => {
await getList();
// 如果是 first 风格，需要加载商品分页
if (state.style === 'first_one' || state.style === 'first_two') {
onMenu(0);
}
});
onLoad(async () => {
await getList();
// 如果是 first 风格，需要加载商品分页
if (state.style === 'first_one' || state.style === 'first_two') {
onMenu(0);
}
});
onReachBottom(() => {
loadMore();
});
onReachBottom(() => {
loadMore();
});
</script>
<style lang="scss" scoped>
.s-category {
:deep() {
.side-menu-wrap {
width: 200rpx;
height: 100%;
padding-left: 12rpx;
background-color: #f6f6f6;
.s-category {
:deep() {
.side-menu-wrap {
width: 170rpx;
height: 100%;
// padding-left: 12rpx;
background-color: #f6f6f6;
.menu-item {
width: 100%;
height: 88rpx;
position: relative;
transition: all linear 0.2s;
.menu-item {
width: 100%;
height: 88rpx;
position: relative;
transition: all linear 0.2s;
.menu-title {
line-height: 32rpx;
font-size: 30rpx;
font-weight: 400;
color: #333;
margin-left: 28rpx;
position: relative;
z-index: 0;
.menu-title {
line-height: 32rpx;
font-size: 14px;
font-weight: 400;
color: #333;
// margin-left: 28rpx;
position: relative;
z-index: 0;
text-align: center;
width: 100%;
&::before {
content: '';
width: 64rpx;
height: 12rpx;
background: linear-gradient(90deg,
var(--ui-BG-Main-gradient),
var(--ui-BG-Main-light)) !important;
position: absolute;
left: -64rpx;
bottom: 0;
z-index: -1;
transition: all linear 0.2s;
}
}
&::before {
content: '';
width: 64rpx;
height: 12rpx;
background: linear-gradient(
90deg,
var(--ui-BG-Main-gradient),
var(--ui-BG-Main-light)
) !important;
position: absolute;
left: -64rpx;
bottom: 0;
z-index: -1;
transition: all linear 0.2s;
}
}
&.menu-item-active {
background-color: #fff;
&.menu-item-active {
background-color: #fff;
border-radius: 20rpx 0 0 20rpx;
// border-radius: 20rpx 0 0 20rpx;
&::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 2px;
height: 100%;
// background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
background: rgba(236, 72, 29);
}
&::before {
content: '';
position: absolute;
right: 0;
bottom: -20rpx;
width: 20rpx;
height: 20rpx;
background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
}
&::after {
content: '';
position: absolute;
top: -20rpx;
right: 0;
width: 20rpx;
height: 20rpx;
background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
}
&::after {
content: '';
position: absolute;
top: -20rpx;
right: 0;
width: 20rpx;
height: 20rpx;
background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
}
.menu-title {
font-weight: 600;
color: rgba(236, 72, 29);
// &::before {
// left: 0;
// }
}
}
}
}
.menu-title {
font-weight: 600;
.goods-list-box {
background-color: #fff;
width: calc(100vw - 85px);
padding: 10px 0;
}
&::before {
left: 0;
}
}
}
}
}
.goods-list-box {
background-color: #fff;
width: calc(100vw - 100px);
padding: 10px;
}
.banner-img {
width: calc(100vw - 130px);
border-radius: 5px;
margin-bottom: 20rpx;
}
}
}
</style>
.banner-img {
width: calc(100vw - 130px);
border-radius: 5px;
margin-bottom: 20rpx;
}
}
}
</style>

4
pages/index/components/second-one.vue
View File

@ -1,8 +1,8 @@
<!-- 分类展示：second-one 风格 -->
<template>
<view>
<view style=" padding: 0 15px;">
<!-- 一级分类的名字 -->
<view class="title-box ss-flex ss-col-center ss-row-center ss-p-b-30">
<view class="second-one ss-flex ss-col-center ss-row-center ss-p-b-30">
<view class="title-line-left" />
<view class="title-text ss-p-x-20">{{ props.data[activeMenu].name }}</view>
<view class="title-line-right" />

328
pages/index/components/second-second.vue Normal file
View File

@ -0,0 +1,328 @@
<!-- 分类展示：second-one 风格 -->
<template>
<view>
<view class="top_class">
<scroll-view scroll-x class="scroll">
<view @click="onFilterItem(item.id)" class="list on"
v-for="(item, index) in props.data[activeMenu].children" :key="index">
{{item.name}}
</view>
<!-- 为了不让标按钮覆盖按钮 -->
<view v-if="props.data[activeMenu].children.length > 5" class="list" style="width:0;"> </view>
</scroll-view>
<view class="rit" v-if="props.data[activeMenu].children.length > 5">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/475ffa1c11d2bdb4997efb0ba4dfab0b971630ca9e140fa90686c7206db53c82.png"
class="img"></image>
</view>
</view>
<view class="" v-for="data in state.pagination.list" :key="data.id">
<!-- <s-goods-column class="" size="lg" :data="data" :topRadius="10" :bottomRadius="10"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })" /> -->
<view class="ss-goods-wrap">
<view class="lg-goods-card ss-flex ss-col-stretch" style=""
@click="sheep.$router.go('/pages/goods/index', { id: data.id })">
<image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill" />
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-p-b-10 ">
<view class="b">
<view class="lg-goods-title ss-line-2">
{{ data.title || data.name }}
</view>
</view>
<view class="pppp">
<view class="ss-flex ss-col-bottom font-OPPOSANS">
<view class="sl-goods-price ss-m-r-12">
<!-- 活动价格 -->
<text class="price-unit ss-font-24">￥</text>
<text class="price">
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</text>
</view>
</view>
<slot name="cart">
<view class="buy-box ss-flex ss-col-center ss-row-center"> 去购买</view>
</slot>
</view>
</view>
</view>
</view>
</view>
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
contentdown: '上拉加载更多',
}" @tap="loadMore" />
<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品" />
</view>
</template>
<script setup>
import {
fen2yuan,
formatExchange,
formatSales,
formatStock,
getRewardActivityRuleItemDescriptions,
} from '@/sheep/hooks/useGoods';
import {
isArray
} from 'lodash-es';
import {
onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
import {
reactive,
defineExpose
} from 'vue';
import _ from 'lodash';
const props = defineProps({
data: {
type: Object,
default: () => ({}),
},
activeMenu: [Number, String],
});
const state = reactive({
pagination: {
list: [],
total: 0,
pageNo: 1,
pageSize: 6,
},
currentSort: undefined,
currentOrder: undefined,
currentTab: 0, // 当前选中的 tab
curFilter: 0, // 当前选中的 list 筛选项
showFilter: false,
iconStatus: false, // true - 单列布局；false - 双列布局
keyword: '',
categoryId: 0,
loadStatus: ''
});
// 清空列表
function emptyList() {
state.pagination.list = [];
}
const onFilterItem = (id) => {
// 清空 + 加载数据
emptyList();
getList(id);
};
async function getList(id) {
console.log(id)
state.loadStatus = 'loading';
const {
code,
data
} = await SpuApi.getSpuPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
sortField: state.currentSort,
sortAsc: state.currentOrder,
categoryId: id,
keyword: state.keyword,
});
if (code !== 0) {
return;
}
state.pagination.list = _.concat(state.pagination.list, data.list);
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
};
// 加载更多
function loadMore() {
if (state.loadStatus === 'noMore') {
return;
}
state.pagination.pageNo++;
getList();
}
console.log(props.data[props.activeMenu].id, "state.pagination.list")
getList(props.data[props.activeMenu].id);
// onLoad((options) => {
// // state.categoryId = options.categoryId;
// // state.keyword = options.keyword;
// });
// 上拉加载更多
onReachBottom(() => {
loadMore();
});
defineExpose({
onFilterItem
});
</script>
<style lang="scss" scoped>
//lg
.lg-goods-card {
overflow: hidden;
position: relative;
z-index: 1;
background-color: $white;
// height: 280rpx;
border-radius: 10px !important;
padding: 10px;
.price-unit{
color:#df2f29;
font-weight:700;
}
.lg-img-box {
width: 150rpx;
height: 150rpx;
margin-right: 20rpx;
border-radius: 10px;
}
.price{
color:#df2f29;
font-weight:700;
}
.lg-goods-title {
font-size: 28rpx;
font-weight: 500;
color: #333333;
// margin-top:7px;
// line-height: 36rpx;
// width: 410rpx;
}
.lg-goods-subtitle {
font-size: 24rpx;
font-weight: 400;
color: #999999;
// line-height: 30rpx;
// width: 410rpx;
}
.lg-goods-price {
font-size: 30rpx;
color: $red;
line-height: 36rpx;
}
.tag-box {
width: 100%;
}
}
.top_class {
position: relative;
padding: 0 10px;
.scroll {
white-space: nowrap;
margin-bottom: 10px;
.list {
padding: 3px 15px;
background: rgba(248, 248, 248);
color: rgba(179, 179, 179);
display: inline-block;
border-radius: 13px;
margin-right: 10px;
&.on {
background: rgba(255, 235, 234);
color: rgba(223, 47, 41);
}
}
}
.rit {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 100%;
background-color: white;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
.img {
width: 15px;
height: 15px;
}
}
}
.title-box {
.title-line-left,
.title-line-right {
width: 15px;
height: 1px;
background: #d2d2d2;
}
}
.goods-item {
width: calc((100% - 20px) / 3);
margin-right: 10px;
margin-bottom: 10px;
&:nth-of-type(3n) {
margin-right: 0;
}
.goods-img {
width: calc((100vw - 140px) / 3);
height: calc((100vw - 140px) / 3);
}
.goods-title {
font-size: 26rpx;
font-weight: bold;
color: #333333;
line-height: 40rpx;
text-align: center;
}
.goods-price {
color: $red;
line-height: 40rpx;
}
}
.lg-goods-content{
.b{
min-height: 37px;
display:flex;
align-items:center;
}
.pppp{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
// padding-right: 10px;
.buy-box {
bottom: 20rpx;
right: 20rpx;
z-index: 2;
width: 58px;
padding:3px 0;
// background: linear-gradient(90deg, #fe8900, #ff5e00);
background: #df2f29;
border-radius: 25rpx;
font-size: 12px;
color: #ffffff;
}
}
}
</style>

172
pages/index/index.vue
View File

@ -1,106 +1,100 @@
<!-- 首页，支持店铺装修 -->
<template>
<view v-if="template">
<s-layout
title="首页"
navbar="normal"
tools="search"
tabbar="/pages/index/index"
:bgStyle="template.page"
:navbarStyle="template.navigationBar"
onShareAppMessage
@search="(e) => { console.log(e,'eeeeeeeeeeee') }"
headerBtns='headerBtns'
backgroundColor="rgba(248,83,42)"
opacityBgUi='ll'
:navBg="true"
>
<view class="new-bg"></view>
<s-block
v-for="(item, index) in template.components"
:key="index"
:styles="item.property.style"
>
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
</s-block>
</s-layout>
</view>
<view v-if="template">
<s-layout title="首页" navbar="normal" tools="search" tabbar="/pages/index/index" :bgStyle="template.page"
:navbarStyle="template.navigationBar" onShareAppMessage @search="(e) => { console.log(e,'eeeeeeeeeeee') }"
headerBtns='headerBtns' backgroundColor="#e93422" opacityBgUi='ll' :navBg="true">
<view class="new-bg"></view>
<s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" :fl="true" />
</s-block>
</s-layout>
</view>
</template>
<script setup>
import { computed } from 'vue';
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
// 隐藏原生tabBar
uni.hideTabBar();
import {
computed
} from 'vue';
import {
onLoad,
onPageScroll,
onPullDownRefresh
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
// 隐藏原生tabBar
uni.hideTabBar();
const template = computed(() => sheep.$store('app').template?.home);
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
// (async function() {
// console.log('原代码首页定制化数据',template)
// let {
// data
// } = await index2Api.decorate();
// console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
// 改变首页底部数据 但是没有通过数组id获取商品数据接口
// let {
// data: datas
// } = await index2Api.spids();
// template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
// template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
// return {
// src: item.picUrl,
// url: item.url,
// title: item.name,
// type: "image"
// }
// })
// }())
const template = computed(() => sheep.$store('app').template?.home);
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
// (async function() {
// console.log('原代码首页定制化数据',template)
// let {
// data
// } = await index2Api.decorate();
// console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
// 改变首页底部数据 但是没有通过数组id获取商品数据接口
// let {
// data: datas
// } = await index2Api.spids();
// template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
// template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
// return {
// src: item.picUrl,
// url: item.url,
// title: item.name,
// type: "image"
// }
// })
// }())
onLoad((options) => {
// #ifdef MP
// 小程序识别二维码
if (options.scene) {
const sceneParams = decodeURIComponent(options.scene).split('=');
console.log('sceneParams=>', sceneParams);
options[sceneParams[0]] = sceneParams[1];
}
// #endif
onLoad((options) => {
// #ifdef MP
// 小程序识别二维码
if (options.scene) {
const sceneParams = decodeURIComponent(options.scene).split('=');
console.log('sceneParams=>', sceneParams);
options[sceneParams[0]] = sceneParams[1];
}
// #endif
// 预览模板
if (options.templateId) {
sheep.$store('app').init(options.templateId);
}
// 预览模板
if (options.templateId) {
sheep.$store('app').init(options.templateId);
}
// 解析分享信息
if (options.spm) {
$share.decryptSpm(options.spm);
}
// 解析分享信息
if (options.spm) {
$share.decryptSpm(options.spm);
}
// 进入指定页面(完整页面路径)
if (options.page) {
sheep.$router.go(decodeURIComponent(options.page));
}
});
// 进入指定页面(完整页面路径)
if (options.page) {
sheep.$router.go(decodeURIComponent(options.page));
}
});
// 下拉刷新
onPullDownRefresh(() => {
sheep.$store('app').init();
setTimeout(function () {
uni.stopPullDownRefresh();
}, 800);
});
// 下拉刷新
onPullDownRefresh(() => {
sheep.$store('app').init();
setTimeout(function() {
uni.stopPullDownRefresh();
}, 800);
});
onPageScroll(() => {});
onPageScroll(() => {});
</script>
<style lang="scss">
.new-bg{
background:rgba(248,83,42);
width:100%;
height:50px;
.new-bg {
background: #e93422;
width: 100%;
height: 50px;
position: absolute;
}
</style>
</style>

3
pages/order/confirm.vue
View File

@ -277,9 +277,10 @@
id: data.id,
});
}else{
sheep.$router.redirect('/pages/activity/point/exchange_detail', {
sheep.$router.redirect('/pages/activity/point/exchange_success', {
id: data.id,
});
// sheep.$helper.toast('是这里');
}
}

1234
pages/order/detail.vue
View File

File diff suppressed because it is too large Load Diff

857
pages/order/list.vue
View File

@ -1,495 +1,466 @@
<!-- 订单列表 -->
<template>
<s-layout title="我的订单">
<su-sticky bgColor="#fff">
<su-tabs
:list="tabMaps"
:scrollable="false"
@change="onTabsChange"
:current="state.currentTab"
/>
</su-sticky>
<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
<view v-if="state.pagination.total > 0">
<view
class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
v-for="order in state.pagination.list"
:key="order.id"
@tap="onOrderDetail(order.id)"
>
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
<view class="order-no">订单号：{{ order.no }}</view>
<view class="order-state ss-font-26" :class="formatOrderColor(order)">
{{ formatOrderStatus(order) }}
</view>
</view>
<view class="border-bottom" v-for="item in order.items" :key="item.id">
<s-goods-item
:img="item.picUrl"
:title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price"
:num="item.count"
/>
</view>
<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
<view class="ss-flex ss-col-center">
<view class="discounts-title pay-color"
>共 {{ order.productCount }} 件商品,总金额:</view
>
<view class="discounts-money pay-color"> ￥{{ fen2yuan(order.payPrice) }} </view>
</view>
</view>
<view
class="order-card-footer ss-flex ss-col-center ss-p-x-20"
:class="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'"
>
<view class="ss-flex ss-col-center">
<button
v-if="order.buttons.includes('combination')"
class="tool-btn ss-reset-button"
@tap.stop="onOrderGroupon(order)"
>
拼团详情
</button>
<button
v-if="order.buttons.length === 0"
class="tool-btn ss-reset-button"
@tap.stop="onOrderDetail(order.id)"
>
查看详情
</button>
<button
v-if="order.buttons.includes('confirm')"
class="tool-btn ss-reset-button"
@tap.stop="onConfirm(order)"
>
确认收货
</button>
<button
v-if="order.buttons.includes('express')"
class="tool-btn ss-reset-button"
@tap.stop="onExpress(order.id)"
>
查看物流
</button>
<button
v-if="order.buttons.includes('cancel')"
class="tool-btn ss-reset-button"
@tap.stop="onCancel(order.id)"
>
取消订单
</button>
<button
v-if="order.buttons.includes('comment')"
class="tool-btn ss-reset-button"
@tap.stop="onComment(order.id)"
>
评价
</button>
<button
v-if="order.buttons.includes('delete')"
class="delete-btn ss-reset-button"
@tap.stop="onDelete(order.id)"
>
删除订单
</button>
<button
v-if="order.buttons.includes('pay')"
class="tool-btn ss-reset-button ui-BG-Main-Gradient"
@tap.stop="onPay(order.payOrderId)"
>
继续支付
</button>
</view>
</view>
</view>
</view>
<s-layout title="我的订单">
<su-sticky bgColor="#fff">
<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
</su-sticky>
<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
<view v-if="state.pagination.total > 0">
<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="order in state.pagination.list"
:key="order.id" @tap="onOrderDetail(order.id)">
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
<view class="order-no">订单号：{{ order.no }}</view>
<view class="order-state ss-font-26" :class="formatOrderColor(order)">
{{ formatOrderStatus(order) }}
</view>
</view>
<view class="border-bottom" v-for="item in order.items" :key="item.id">
<s-goods-item :img="item.picUrl" :title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')" :price="item.price"
:num="item.count" />
</view>
<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
<view class="ss-flex ss-col-center">
<view class="discounts-title pay-color">共 {{ order.productCount }} 件商品,总金额:</view>
<view class="discounts-money pay-color"> ￥{{ fen2yuan(order.payPrice) }} </view>
</view>
</view>
<view class="order-card-footer ss-flex ss-col-center ss-p-x-20"
:class="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'">
<view class="ss-flex ss-col-center">
<button v-if="order.buttons.includes('combination')" class="tool-btn ss-reset-button"
@tap.stop="onOrderGroupon(order)">
拼团详情
</button>
<button v-if="order.buttons.length === 0" class="tool-btn ss-reset-button"
@tap.stop="onOrderDetail(order.id)">
查看详情
</button>
<button v-if="order.buttons.includes('confirm')" class="tool-btn ss-reset-button"
@tap.stop="onConfirm(order)">
确认收货
</button>
<button v-if="order.buttons.includes('express')" class="tool-btn ss-reset-button"
@tap.stop="onExpress(order.id)">
查看物流
</button>
<button v-if="order.buttons.includes('cancel')" class="tool-btn ss-reset-button"
@tap.stop="onCancel(order.id)">
取消订单
</button>
<button v-if="order.buttons.includes('comment')" class="tool-btn ss-reset-button"
@tap.stop="onComment(order.id)">
评价
</button>
<button v-if="order.buttons.includes('delete')" class="delete-btn ss-reset-button"
@tap.stop="onDelete(order.id)">
删除订单
</button>
<button v-if="order.buttons.includes('pay')"
class="tool-btn ss-reset-button ui-BG-Main-Gradient" @tap.stop="onPay(order.payOrderId)">
继续支付
</button>
</view>
</view>
</view>
</view>
<!-- 加载更多 -->
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
<!-- 加载更多 -->
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
contentdown: '上拉加载更多',
}"
@tap="loadMore"
/>
</s-layout>
}" @tap="loadMore" />
</s-layout>
</template>
<script setup>
import { reactive } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import {
fen2yuan,
formatOrderColor,
formatOrderStatus,
handleOrderButtons,
} from '@/sheep/hooks/useGoods';
import sheep from '@/sheep';
import _ from 'lodash';
import { isEmpty } from 'lodash';
import OrderApi from '@/sheep/api/trade/order';
import { resetPagination } from '@/sheep/util';
import {
reactive
} from 'vue';
import {
onLoad,
onReachBottom,
onPullDownRefresh
} from '@dcloudio/uni-app';
import {
fen2yuan,
formatOrderColor,
formatOrderStatus,
handleOrderButtons,
} from '@/sheep/hooks/useGoods';
import sheep from '@/sheep';
import _ from 'lodash';
import {
isEmpty
} from 'lodash';
import OrderApi from '@/sheep/api/trade/order';
import {
resetPagination
} from '@/sheep/util';
// 数据
const state = reactive({
currentTab: 0, // 选中的 tabMaps 下标
pagination: {
list: [],
total: 0,
pageNo: 1,
pageSize: 5,
},
loadStatus: '',
});
// 数据
const state = reactive({
currentTab: 0, // 选中的 tabMaps 下标
pagination: {
list: [],
total: 0,
pageNo: 1,
pageSize: 5,
},
loadStatus: '',
});
const tabMaps = [
{
name: '全部',
},
{
name: '待付款',
value: 0,
},
{
name: '待发货',
value: 10,
},
{
name: '待收货',
value: 20,
},
{
name: '待评价',
value: 30,
},
];
const tabMaps = [{
name: '全部',
},
{
name: '待付款',
value: 0,
},
{
name: '待发货',
value: 10,
},
{
name: '待收货',
value: 20,
},
{
name: '待评价',
value: 30,
},
];
// 切换选项卡
function onTabsChange(e) {
if (state.currentTab === e.index) {
return;
}
// 重头加载代码
resetPagination(state.pagination);
state.currentTab = e.index;
getOrderList();
}
// 切换选项卡
function onTabsChange(e) {
if (state.currentTab === e.index) {
return;
}
// 重头加载代码
resetPagination(state.pagination);
state.currentTab = e.index;
getOrderList();
}
// 订单详情
function onOrderDetail(id) {
sheep.$router.go('/pages/order/detail', {
id,
});
}
// 订单详情
function onOrderDetail(id) {
sheep.$router.go('/pages/order/detail', {
id,
});
}
// 跳转拼团记录的详情
function onOrderGroupon(order) {
sheep.$router.go('/pages/activity/groupon/detail', {
id: order.combinationRecordId,
});
}
// 跳转拼团记录的详情
function onOrderGroupon(order) {
sheep.$router.go('/pages/activity/groupon/detail', {
id: order.combinationRecordId,
});
}
// 继续支付
function onPay(payOrderId) {
sheep.$router.go('/pages/pay/index', {
id: payOrderId,
});
}
// 继续支付
function onPay(payOrderId) {
sheep.$router.go('/pages/pay/index', {
id: payOrderId,
});
}
// 评价
function onComment(id) {
sheep.$router.go('/pages/goods/comment/add', {
id,
});
}
// 评价
function onComment(id) {
sheep.$router.go('/pages/goods/comment/add', {
id,
});
}
// 确认收货 TODO 芋艿：待测试
async function onConfirm(order, ignore = false) {
// 需开启确认收货组件
// todo: 芋艿：需要后续接入微信收货组件
// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
let isOpenBusinessView = true;
if (
sheep.$platform.name === 'WechatMiniProgram' &&
!isEmpty(order.wechat_extra_data) &&
isOpenBusinessView &&
!ignore
) {
mpConfirm(order);
return;
}
// 确认收货 TODO 芋艿：待测试
async function onConfirm(order, ignore = false) {
// 需开启确认收货组件
// todo: 芋艿：需要后续接入微信收货组件
// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
let isOpenBusinessView = true;
if (
sheep.$platform.name === 'WechatMiniProgram' &&
!isEmpty(order.wechat_extra_data) &&
isOpenBusinessView &&
!ignore
) {
mpConfirm(order);
return;
}
// 正常的确认收货流程
const { code } = await OrderApi.receiveOrder(order.id);
if (code === 0) {
resetPagination(state.pagination);
await getOrderList();
}
}
// 正常的确认收货流程
const {
code
} = await OrderApi.receiveOrder(order.id);
if (code === 0) {
resetPagination(state.pagination);
await getOrderList();
}
}
// #ifdef MP-WEIXIN
// 小程序确认收货组件 TODO 芋艿：后续再接入
function mpConfirm(order) {
if (!wx.openBusinessView) {
sheep.$helper.toast(`请升级微信版本`);
return;
}
wx.openBusinessView({
businessType: 'weappOrderConfirm',
extraData: {
merchant_id: '1481069012',
merchant_trade_no: order.wechat_extra_data.merchant_trade_no,
transaction_id: order.wechat_extra_data.transaction_id,
},
success(response) {
console.log('success:', response);
if (response.errMsg === 'openBusinessView:ok') {
if (response.extraData.status === 'success') {
onConfirm(order, true);
}
}
},
fail(error) {
console.log('error:', error);
},
complete(result) {
console.log('result:', result);
},
});
}
// #endif
// #ifdef MP-WEIXIN
// 小程序确认收货组件 TODO 芋艿：后续再接入
function mpConfirm(order) {
if (!wx.openBusinessView) {
sheep.$helper.toast(`请升级微信版本`);
return;
}
wx.openBusinessView({
businessType: 'weappOrderConfirm',
extraData: {
merchant_id: '1481069012',
merchant_trade_no: order.wechat_extra_data.merchant_trade_no,
transaction_id: order.wechat_extra_data.transaction_id,
},
success(response) {
console.log('success:', response);
if (response.errMsg === 'openBusinessView:ok') {
if (response.extraData.status === 'success') {
onConfirm(order, true);
}
}
},
fail(error) {
console.log('error:', error);
},
complete(result) {
console.log('result:', result);
},
});
}
// #endif
// 查看物流
async function onExpress(id) {
sheep.$router.go('/pages/order/express/log', {
id,
});
}
// 查看物流
async function onExpress(id) {
sheep.$router.go('/pages/order/express/log', {
id,
});
}
// 取消订单
async function onCancel(orderId) {
uni.showModal({
title: '提示',
content: '确定要取消订单吗?',
success: async function (res) {
if (!res.confirm) {
return;
}
const { code } = await OrderApi.cancelOrder(orderId);
if (code === 0) {
// 修改数据的状态
let index = state.pagination.list.findIndex((order) => order.id === orderId);
const orderInfo = state.pagination.list[index];
orderInfo.status = 40;
handleOrderButtons(orderInfo);
}
},
});
}
// 取消订单
async function onCancel(orderId) {
uni.showModal({
title: '提示',
content: '确定要取消订单吗?',
success: async function(res) {
if (!res.confirm) {
return;
}
const {
code
} = await OrderApi.cancelOrder(orderId);
if (code === 0) {
// 修改数据的状态
let index = state.pagination.list.findIndex((order) => order.id === orderId);
const orderInfo = state.pagination.list[index];
orderInfo.status = 40;
handleOrderButtons(orderInfo);
}
},
});
}
// 删除订单
function onDelete(orderId) {
uni.showModal({
title: '提示',
content: '确定要删除订单吗?',
success: async function (res) {
if (res.confirm) {
const { code } = await OrderApi.deleteOrder(orderId);
if (code === 0) {
// 删除数据
let index = state.pagination.list.findIndex((order) => order.id === orderId);
state.pagination.list.splice(index, 1);
}
}
},
});
}
// 删除订单
function onDelete(orderId) {
uni.showModal({
title: '提示',
content: '确定要删除订单吗?',
success: async function(res) {
if (res.confirm) {
const {
code
} = await OrderApi.deleteOrder(orderId);
if (code === 0) {
// 删除数据
let index = state.pagination.list.findIndex((order) => order.id === orderId);
state.pagination.list.splice(index, 1);
}
}
},
});
}
// 获取订单列表
async function getOrderList() {
state.loadStatus = 'loading';
let { code, data } = await OrderApi.getOrderPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
status: tabMaps[state.currentTab].value,
commentStatus: tabMaps[state.currentTab].value === 30 ? false : null,
});
if (code !== 0) {
return;
}
data.list.forEach((order) => handleOrderButtons(order));
state.pagination.list = _.concat(state.pagination.list, data.list);
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}
// 获取订单列表
async function getOrderList() {
state.loadStatus = 'loading';
let {
code,
data
} = await OrderApi.getOrderPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
status: tabMaps[state.currentTab].value,
commentStatus: tabMaps[state.currentTab].value === 30 ? false : null,
});
if (code !== 0) {
return;
}
data.list.forEach((order) => handleOrderButtons(order));
state.pagination.list = _.concat(state.pagination.list, data.list);
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}
onLoad(async (options) => {
if (options.type) {
state.currentTab = options.type;
}
await getOrderList();
});
onLoad(async (options) => {
if (options.type) {
state.currentTab = options.type;
}
await getOrderList();
});
// 加载更多
function loadMore() {
if (state.loadStatus === 'noMore') {
return;
}
state.pagination.pageNo++;
getOrderList();
}
// 加载更多
function loadMore() {
if (state.loadStatus === 'noMore') {
return;
}
state.pagination.pageNo++;
getOrderList();
}
// 上拉加载更多
onReachBottom(() => {
loadMore();
});
// 上拉加载更多
onReachBottom(() => {
loadMore();
});
// 下拉刷新
onPullDownRefresh(() => {
resetPagination(state.pagination);
getOrderList();
setTimeout(function () {
uni.stopPullDownRefresh();
}, 800);
});
// 下拉刷新
onPullDownRefresh(() => {
resetPagination(state.pagination);
getOrderList();
setTimeout(function() {
uni.stopPullDownRefresh();
}, 800);
});
</script>
<style lang="scss" scoped>
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.tool-btn {
width: 160rpx;
height: 60rpx;
background: #f6f6f6;
font-size: 26rpx;
border-radius: 30rpx;
margin-right: 10rpx;
.tool-btn {
width: 160rpx;
height: 60rpx;
background: #f6f6f6;
font-size: 26rpx;
border-radius: 30rpx;
margin-right: 10rpx;
&:last-of-type {
margin-right: 0;
}
}
&:last-of-type {
margin-right: 0;
}
}
.delete-btn {
width: 160rpx;
height: 56rpx;
color: #ff3000;
background: #fee;
border-radius: 28rpx;
font-size: 26rpx;
margin-right: 10rpx;
line-height: normal;
.delete-btn {
width: 160rpx;
height: 56rpx;
color: #ff3000;
background: #fee;
border-radius: 28rpx;
font-size: 26rpx;
margin-right: 10rpx;
line-height: normal;
&:last-of-type {
margin-right: 0;
}
}
&:last-of-type {
margin-right: 0;
}
}
.apply-btn {
width: 140rpx;
height: 50rpx;
border-radius: 25rpx;
font-size: 24rpx;
border: 2rpx solid #dcdcdc;
line-height: normal;
margin-left: 16rpx;
}
.apply-btn {
width: 140rpx;
height: 50rpx;
border-radius: 25rpx;
font-size: 24rpx;
border: 2rpx solid #dcdcdc;
line-height: normal;
margin-left: 16rpx;
}
.swiper-box {
flex: 1;
.swiper-box {
flex: 1;
.swiper-item {
height: 100%;
width: 100%;
}
}
.swiper-item {
height: 100%;
width: 100%;
}
}
.order-list-card-box {
.order-card-header {
height: 80rpx;
.order-list-card-box {
.order-card-header {
height: 80rpx;
.order-no {
font-size: 26rpx;
font-weight: 500;
}
.order-no {
font-size: 26rpx;
font-weight: 500;
}
.order-state {
}
}
.order-state {}
}
.pay-box {
.discounts-title {
font-size: 24rpx;
line-height: normal;
color: #999999;
}
.pay-box {
.discounts-title {
font-size: 24rpx;
line-height: normal;
color: #999999;
}
.discounts-money {
font-size: 24rpx;
line-height: normal;
color: #999;
font-family: OPPOSANS;
}
.discounts-money {
font-size: 24rpx;
line-height: normal;
color: #999;
font-family: OPPOSANS;
}
.pay-color {
color: #333;
}
}
.pay-color {
color: #333;
}
}
.order-card-footer {
height: 100rpx;
.order-card-footer {
height: 100rpx;
.more-item-box {
padding: 20rpx;
.more-item-box {
padding: 20rpx;
.more-item {
height: 60rpx;
.more-item {
height: 60rpx;
.title {
font-size: 26rpx;
}
}
}
.title {
font-size: 26rpx;
}
}
}
.more-btn {
color: $dark-9;
font-size: 24rpx;
}
.more-btn {
color: $dark-9;
font-size: 24rpx;
}
.content {
width: 154rpx;
color: #333333;
font-size: 26rpx;
font-weight: 500;
}
}
}
.content {
width: 154rpx;
color: #333333;
font-size: 26rpx;
font-weight: 500;
}
}
}
:deep(.uni-tooltip-popup) {
background: var(--ui-BG);
}
:deep(.uni-tooltip-popup) {
background: var(--ui-BG);
}
.warning-color {
color: #faad14;
}
.warning-color {
color: #faad14;
}
.danger-color {
color: #ff3000;
}
.danger-color {
color: #ff3000;
}
.success-color {
color: #52c41a;
}
.success-color {
color: #52c41a;
}
.info-color {
color: #999999;
}
</style>
.info-color {
color: #999999;
}
</style>

585
pages/pay/index.vue
View File

@ -1,290 +1,357 @@
<!-- 收银台 -->
<template>
<s-layout title="收银台">
<view class="bg-white ss-modal-box ss-flex-col">
<!-- 订单信息 -->
<view class="modal-header ss-flex-col ss-col-center ss-row-center">
<view class="money-box ss-m-b-20">
<text class="money-text">{{ fen2yuan(state.orderInfo.price) }}</text>
</view>
<view class="time-text">
<text>{{ payDescText }}</text>
</view>
</view>
<s-layout title="收银台">
<view class=" ss-modal-box ss-flex-col">
<!-- 订单信息 -->
<view class="modal-header ss-flex-col ss-col-center ss-row-center">
<view class="money-box ss-m-b-20">
<text class="money-text">{{ fen2yuan(state.orderInfo.price) }}</text>
</view>
<view class="time-text">
<text>{{ payDescText }}</text>
</view>
</view>
<!-- 支付方式 -->
<view class="modal-content ss-flex-1">
<view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
<radio-group @change="onTapPay">
<label class="pay-type-item" v-for="item in state.payMethods" :key="item.title">
<view
class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
:class="{ 'disabled-pay-item': item.disabled }"
>
<view class="ss-flex ss-col-center">
<image
class="pay-icon"
v-if="item.disabled"
:src="sheep.$url.static('/static/img/shop/pay/cod_disabled.png')"
mode="aspectFit"
/>
<image
class="pay-icon"
v-else
:src="sheep.$url.static(item.icon)"
mode="aspectFit"
/>
<text class="pay-title">{{ item.title }}</text>
</view>
<view class="check-box ss-flex ss-col-center ss-p-l-10">
<view class="userInfo-money ss-m-r-10" v-if="item.value === 'wallet'">
余额: {{ fen2yuan(userWallet.balance) }}元
</view>
<radio
:value="item.value"
color="var(--ui-BG-Main)"
style="transform: scale(0.8)"
:disabled="item.disabled"
:checked="state.payment === item.value"
/>
</view>
</view>
</label>
</radio-group>
</view>
<!-- 支付方式 -->
<view class="modal-content ss-flex-1">
<view class="pay-title ss-p-l-30 " style="margin-top: 15px;">支付方式</view>
<radio-group @change="onTapPay">
<label class="pay-type-item" v-for="item in state.payMethods" :key="item.title">
<view class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
:class="{ 'disabled-pay-item': item.disabled }"
v-if="!item.disabled">
<view class="ss-flex ss-col-center ggbon">
<image class="pay-icon"
v-if="item.value == 'wechat'"
src="https://zysc.fjptzykj.com:3000/shangcheng/f7abe1733a9f4377b85e5c289ac7925f88f3804e563695346549e08ae6086542.png"
mode="aspectFit" />
<image class="pay-icon"
v-if="item.value == 'wallet'"
src="https://zysc.fjptzykj.com:3000/shangcheng/0d7fbb299d587542189b204bcfd32e313340c0c956a8187884f7e544b2cad4ae.png"
mode="aspectFit" />
<view class="new-class">
<view class="pay-title">{{ item.title }}</view>
<view class="userInfo-money" v-if="item.value == 'wechat'">使用微信快捷支付</view>
<view class="userInfo-money ss-m-r-10" v-if="item.value === 'wallet'">
可用余额<text class="b">￥{{ fen2yuan(userWallet.balance) }}</text>
</view>
</view>
</view>
<view class="check-box ss-flex ss-col-center ss-p-l-10">
<radio :value="item.value" color="var(--ui-BG-Main)" style="transform: scale(0.8)"
:disabled="item.disabled" :checked="state.payment === item.value" />
</view>
</view>
</label>
</radio-group>
</view>
<!-- 工具 -->
<view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40">
<button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn">
检测支付环境中
</button>
<button v-else-if="state.payStatus === -1" class="ss-reset-button past-due-btn" disabled>
支付已过期
</button>
<button
v-else
class="ss-reset-button save-btn"
@tap="onPay"
:disabled="state.payStatus !== 1"
:class="{ 'disabled-btn': state.payStatus !== 1 }"
>
立即支付
</button>
</view>
</view>
</s-layout>
<!-- 工具 -->
<view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40">
<button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn">
检测支付环境中
</button>
<button v-else-if="state.payStatus === -1" class="ss-reset-button past-due-btn" disabled>
支付已过期
</button>
<button v-else class="ss-reset-button save-btn" @tap="onPay" :disabled="state.payStatus !== 1"
:class="{ 'disabled-btn': state.payStatus !== 1 }">
确定支付
</button>
</view>
</view>
</s-layout>
</template>
<script setup>
import { computed, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { fen2yuan, useDurationTime } from '@/sheep/hooks/useGoods';
import PayOrderApi from '@/sheep/api/pay/order';
import PayChannelApi from '@/sheep/api/pay/channel';
import { getPayMethods } from '@/sheep/platform/pay';
import {
computed,
reactive
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import {
fen2yuan,
useDurationTime
} from '@/sheep/hooks/useGoods';
import PayOrderApi from '@/sheep/api/pay/order';
import PayChannelApi from '@/sheep/api/pay/channel';
import {
getPayMethods
} from '@/sheep/platform/pay';
import request from '@/sheep/request';
import {
baseUrl,
apiPath
} from '@/sheep/config';
const userWallet = computed(() => sheep.$store('user').userWallet);
const userWallet = computed(() => sheep.$store('user').userWallet);
// 检测支付环境
const state = reactive({
orderType: 'goods', // 订单类型; goods - 商品订单, recharge - 充值订单
orderInfo: {}, // 支付单信息
payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
payMethods: [], // 可选的支付方式
payment: '', // 选中的支付方式
vip: '' ,//vip卡支付
vipid:'',//vip支付id需要
cardName:'',//vip卡类型
hideWalletPay:false//是否开启余额支付
});
// 检测支付环境
const state = reactive({
orderType: 'goods', // 订单类型; goods - 商品订单, recharge - 充值订单
orderInfo: {}, // 支付单信息
payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
payMethods: [], // 可选的支付方式
payment: '', // 选中的支付方式
});
const onPay = () => {
if (state.payment === '') {
console.log(state.vipid, "sssssssssssss")
sheep.$helper.toast('请选择支付方式');
return;
}
if (state.payment === 'wallet') {
if (state.vip == "vip") {
console.log("-------sssss----")
let data = {
id: state.vipid,
cardName: state.cardName,
payChannel: "wallet"
}
// 定义方法
request({
url: `${baseUrl}${apiPath}/pay/member/update`,
method: 'post',
data,
custom: {
showLoading: false,
},
}).then((res) => {
console.log(res, "sss")
if(res.data){
sheep.$helper.toast('开通成功');
setTimeout(()=>{
sheep.$router.go('/pages/index/user')
},1500)
}
});
} else {
uni.showModal({
title: '提示',
content: '确定要支付吗?',
success: function(res) {
if (res.confirm) {
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
}
},
});
}
const onPay = () => {
if (state.payment === '') {
sheep.$helper.toast('请选择支付方式');
return;
}
if (state.payment === 'wallet') {
uni.showModal({
title: '提示',
content: '确定要支付吗?',
success: function (res) {
if (res.confirm) {
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
}
},
});
} else {
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
}
};
} else {
sheep.$platform.pay(state.payment, state.orderType, state.orderInfo.id);
}
};
// 支付文案提示
const payDescText = computed(() => {
if (state.payStatus === 2) {
return '该订单已支付';
}
if (state.payStatus === 1) {
const time = useDurationTime(state.orderInfo.expireTime);
if (time.ms <= 0) {
state.payStatus = -1;
return '';
}
return `剩余支付时间 ${time.h}:${time.m}:${time.s} `;
}
if (state.payStatus === -2) {
return '未查询到支付单信息';
}
return '';
});
// 支付文案提示
const payDescText = computed(() => {
if (state.payStatus === 2) {
return '该订单已支付';
}
if (state.payStatus === 1) {
const time = useDurationTime(state.orderInfo.expireTime);
if (time.ms <= 0) {
state.payStatus = -1;
return '';
}
return `剩余支付时间 ${time.h}:${time.m}:${time.s} `;
}
if (state.payStatus === -2) {
return '未查询到支付单信息';
}
return '';
});
// 状态转换：payOrder.status => payStatus
function checkPayStatus() {
if (state.orderInfo.status === 10 || state.orderInfo.status === 20) {
// 支付成功
state.payStatus = 2;
return;
}
if (state.orderInfo.status === 30) {
// 支付关闭
state.payStatus = -1;
return;
}
state.payStatus = 1; // 待支付
}
// 状态转换：payOrder.status => payStatus
function checkPayStatus() {
if (state.orderInfo.status === 10 || state.orderInfo.status === 20) {
// 支付成功
state.payStatus = 2;
return;
}
if (state.orderInfo.status === 30) {
// 支付关闭
state.payStatus = -1;
return;
}
state.payStatus = 1; // 待支付
}
// 切换支付方式
function onTapPay(e) {
state.payment = e.detail.value;
}
// 切换支付方式
function onTapPay(e) {
state.payment = e.detail.value;
}
// 设置支付订单信息
async function setOrder(id) {
// 获得支付订单信息
const { data, code } = await PayOrderApi.getOrder(id);
if (code !== 0 || !data) {
state.payStatus = -2;
return;
}
state.orderInfo = data;
// 获得支付方式
await setPayMethods();
// 设置支付状态
checkPayStatus();
}
// 设置支付订单信息
async function setOrder(id) {
// 获得支付订单信息
const {
data,
code
} = await PayOrderApi.getOrder(id);
if (code !== 0 || !data) {
state.payStatus = -2;
return;
}
state.orderInfo = data;
// 获得支付方式
await setPayMethods();
// 设置支付状态
checkPayStatus();
}
// 获得支付方式
async function setPayMethods() {
const { data, code } = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId);
if (code !== 0) {
return;
}
state.payMethods = getPayMethods(data);
}
// 获得支付方式
async function setPayMethods() {
const {
data,
code
} = await PayChannelApi.getEnableChannelCodeList(state.orderInfo.appId, state.hideWalletPay);
if (code !== 0) {
return;
}
state.payMethods = getPayMethods(data);
console.log(state.payMethods,"state.payMethods")
}
onLoad((options) => {
if (
sheep.$platform.name === 'WechatOfficialAccount' &&
sheep.$platform.os === 'ios' &&
!sheep.$platform.landingPage.includes('pages/pay/index')
) {
location.reload();
return;
}
// 获得支付订单信息
let id = options.id;
if (options.orderType) {
state.orderType = options.orderType;
}
setOrder(id);
// 刷新钱包的缓存
sheep.$store('user').getWallet();
});
onLoad((options) => {
if (
sheep.$platform.name === 'WechatOfficialAccount' &&
sheep.$platform.os === 'ios' &&
!sheep.$platform.landingPage.includes('pages/pay/index')
) {
location.reload();
return;
}
// 获得支付订单信息
let id = options.id;
state.vip = options.type
state.vipid = options.vipid
state.cardName = options.cardName
state.hideWalletPay = options.hideWalletPay
if (options.orderType) {
state.orderType = options.orderType;
}
setOrder(id);
// 刷新钱包的缓存
sheep.$store('user').getWallet();
});
</script>
<style lang="scss" scoped>
.pay-icon {
width: 36rpx;
height: 36rpx;
margin-right: 26rpx;
}
.pay-icon {
width: 27px;
height: 27px;
margin-right: 26rpx;
}
.ss-modal-box {
// max-height: 1000rpx;
.ss-modal-box {
// max-height: 1000rpx;
.modal-header {
position: relative;
padding: 60rpx 20rpx 40rpx;
.modal-header {
position: relative;
padding: 60rpx 20rpx 40rpx;
.money-text {
color: $red;
font-size: 46rpx;
font-weight: bold;
font-family: OPPOSANS;
.money-text {
color: rgba(210, 79, 62);
font-size: 46rpx;
font-weight: bold;
font-family: OPPOSANS;
&::before {
content: '￥';
font-size: 30rpx;
}
}
&::before {
content: '￥';
font-size: 30rpx;
}
}
.time-text {
font-size: 26rpx;
color: $gray-b;
}
.time-text {
font-size: 26rpx;
color: rgba(210, 79, 62);
background: white;
border-radius: 13px;
padding:5px 15px;
}
.close-icon {
position: absolute;
top: 10rpx;
right: 20rpx;
font-size: 46rpx;
opacity: 0.2;
}
}
.close-icon {
position: absolute;
top: 10rpx;
right: 20rpx;
font-size: 46rpx;
opacity: 0.2;
}
}
.modal-content {
overflow-y: auto;
.modal-content {
overflow-y: auto;
margin:0 12px;
background:white;
border-radius:8px;
.pay-title {
font-size: 28rpx;
font-weight: 500;
color: rgba(157,157,157);
}
.pay-title {
font-size: 26rpx;
font-weight: 500;
color: #333333;
}
.pay-tip {
font-size: 26rpx;
color: #bbbbbb;
}
.pay-tip {
font-size: 26rpx;
color: #bbbbbb;
}
.pay-item {
height: 58px;
padding:10px 10px;
.ggbon{
.new-class{
.pay-title{
font-size:16px;
color:black;
}
}
}
}
.pay-item {
height: 86rpx;
}
.disabled-pay-item {
.pay-title {
color: #999999;
}
}
.disabled-pay-item {
.pay-title {
color: #999999;
}
}
.userInfo-money {
font-size: 26rpx;
color: #bbbbbb;
line-height: normal;
}
}
.userInfo-money {
font-size: 26rpx;
color: #bbbbbb;
line-height: normal;
.b{
margin-left:10px;
color:rgba(230,205,154);
}
}
}
.save-btn {
width: 710rpx;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: $white;
}
.disabled-btn {
background: #e5e5e5;
color: #999999;
}
.save-btn {
width: 710rpx;
height: 80rpx;
border-radius: 40rpx;
// background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
background: rgba(210, 79, 62);
color: $white;
}
.past-due-btn {
width: 710rpx;
height: 80rpx;
border-radius: 40rpx;
background-color: #999;
color: #fff;
}
}
</style>
.disabled-btn {
background: #e5e5e5;
color: #999999;
}
.past-due-btn {
width: 710rpx;
height: 80rpx;
border-radius: 40rpx;
background-color: #999;
color: #fff;
}
}
</style>

1
pages/pay/recharge.vue
View File

@ -101,6 +101,7 @@
sheep.$router.go('/pages/pay/index', {
id: data.payOrderId,
orderType: 'recharge',
hideWalletPay:true
});
}

524
pages/pay/result.vue
View File

@ -1,287 +1,287 @@
<!-- 支付结果页面 -->
<template>
<s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
<view class="pay-result-box ss-flex-col ss-row-center ss-col-center">
<!-- 信息展示 -->
<view class="pay-waiting ss-m-b-30" v-if="payResult === 'waiting'" />
<image
class="pay-img ss-m-b-30"
v-if="payResult === 'success'"
:src="sheep.$url.static('/static/img/shop/order/order_pay_success.gif')"
/>
<image
class="pay-img ss-m-b-30"
v-if="['failed', 'closed'].includes(payResult)"
:src="sheep.$url.static('/static/img/shop/order/order_paty_fail.gif')"
/>
<view class="tip-text ss-m-b-30" v-if="payResult === 'success'">支付成功</view>
<view class="tip-text ss-m-b-30" v-if="payResult === 'failed'">支付失败</view>
<view class="tip-text ss-m-b-30" v-if="payResult === 'closed'">该订单已关闭</view>
<view class="tip-text ss-m-b-30" v-if="payResult === 'waiting'">检测支付结果...</view>
<view class="pay-total-num ss-flex" v-if="payResult === 'success'">
<view>￥{{ fen2yuan(state.orderInfo.price) }}</view>
</view>
<!-- 操作区 -->
<view class="btn-box ss-flex ss-row-center ss-m-t-50">
<button class="back-btn ss-reset-button" @tap="sheep.$router.go('/pages/index/index')">
返回首页
</button>
<button
class="check-btn ss-reset-button"
v-if="payResult === 'failed'"
@tap="
sheep.$router.redirect('/pages/pay/index', { id: state.id, orderType: state.orderType })
"
>
重新支付
</button>
<button class="check-btn ss-reset-button" v-if="payResult === 'success'" @tap="onOrder">
查看订单
</button>
<!-- TODO 芋艿：拼团接入 -->
<button
class="check-btn ss-reset-button"
v-if="payResult === 'success' && state.tradeOrder.type === 3"
@tap="sheep.$router.redirect('/pages/activity/groupon/order')"
>
我的拼团
</button>
</view>
<!-- TODO 芋艿：订阅 -->
<!-- #ifdef MP -->
<view class="subscribe-box ss-flex ss-m-t-44">
<image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" />
<view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
<view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
</view>
<!-- #endif -->
</view>
</s-layout>
<s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
<view class="main">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/7bab925772a5b878b75dcc35e5ebd1d6e6c2e776752554526a71ecd1371c24db.png"
class="img" mode=""></image>
<view class="title" v-if="payResult === 'success'">订单支付成功</view>
<view class="title" v-if="payResult === 'failed'">支付失败</view>
<view class="title" v-if="payResult === 'closed'">该订单已关闭</view>
<view class="title" v-if="payResult === 'waiting'">检测支付结果...</view>
<!-- <view class="title">订单支付成功</view> -->
<view class="fgx"></view>
<view class="ddxx">
<view class="l">
订单号
</view>
<view class="r">
{{ state.orderInfo.no }}
</view>
</view>
<view class="ddxx">
<view class="l">
下单时间
</view>
<view class="r">
{{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
</view>
</view>
<view class="ddxx">
<view class="l">
支付方式
</view>
<view class="r">
支付余额
</view>
</view>
<view class="ddxx">
<view class="l">
支付余额
</view>
<view class="r">
￥{{ fen2yuan(state.orderInfo.price) }}
</view>
</view>
<view class="fgx"></view>
<view class="ck-detail" v-if="payResult === 'failed'" @tap="sheep.$router.redirect('/pages/pay/index', { id: state.id, orderType: state.orderType })">
重新支付
</view>
<view class="ck-detail" v-if="payResult === 'success' && state.tradeOrder.type === 3" @tap="sheep.$router.redirect('/pages/activity/groupon/order')">
我的拼团
</view>
<view class="ck-detail" v-if="payResult === 'success'" @tap="onOrder">
查看订单
</view>
<view class="bk-home" @click="sheep.$router.go('/pages/index/index');">
返回首页
</view>
<!-- TODO 芋艿：订阅 -->
<!-- #ifdef MP -->
<!-- <view class="subscribe-box ss-flex ss-m-t-44">
<image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" />
<view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
<view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
</view> -->
<!-- #endif -->
</view>
</s-layout>
</template>
<script setup>
import { onLoad, onHide, onShow } from '@dcloudio/uni-app';
import { reactive, computed } from 'vue';
import { isEmpty } from 'lodash';
import sheep from '@/sheep';
import PayOrderApi from '@/sheep/api/pay/order';
import { fen2yuan } from '../../sheep/hooks/useGoods';
import OrderApi from '@/sheep/api/trade/order';
import {
onLoad,
onHide,
onShow
} from '@dcloudio/uni-app';
import {
reactive,
computed
} from 'vue';
import {
isEmpty
} from 'lodash';
import sheep from '@/sheep';
import PayOrderApi from '@/sheep/api/pay/order';
import {
fen2yuan
} from '../../sheep/hooks/useGoods';
import OrderApi from '@/sheep/api/trade/order';
const state = reactive({
id: 0, // 支付单号
orderType: 'goods', // 订单类型
result: 'unpaid', // 支付状态
orderInfo: {}, // 支付订单信息
tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示
counter: 0, // 获取结果次数
});
const state = reactive({
id: 0, // 支付单号
orderType: 'goods', // 订单类型
result: 'unpaid', // 支付状态
orderInfo: {}, // 支付订单信息
tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示
counter: 0, // 获取结果次数
});
// 支付结果 result => payResult
const payResult = computed(() => {
if (state.result === 'unpaid') {
return 'waiting';
}
if (state.result === 'paid') {
return 'success';
}
if (state.result === 'failed') {
return 'failed';
}
if (state.result === 'closed') {
return 'closed';
}
});
// 支付结果 result => payResult
const payResult = computed(() => {
if (state.result === 'unpaid') {
return 'waiting';
}
if (state.result === 'paid') {
return 'success';
}
if (state.result === 'failed') {
return 'failed';
}
if (state.result === 'closed') {
return 'closed';
}
});
// 获得订单信息
async function getOrderInfo(id) {
state.counter++;
// 1. 加载订单信息
const { data, code } = await PayOrderApi.getOrder(id);
if (code === 0) {
state.orderInfo = data;
if (!state.orderInfo || state.orderInfo.status === 30) {
// 支付关闭
state.result = 'closed';
return;
}
if (state.orderInfo.status !== 0) {
// 非待支付，可能是已支付，可能是已退款
state.result = 'paid';
// #ifdef MP
subscribeMessage();
// #endif
// 特殊：获得商品订单信息
if (state.orderType === 'goods') {
const { data, code } = await OrderApi.getOrder(state.orderInfo.merchantOrderId);
if (code === 0) {
state.tradeOrder = data;
}
}
return;
}
}
// 2.1 情况三一：未支付，且轮询次数小于三次，则继续轮询
if (state.counter < 3 && state.result === 'unpaid') {
setTimeout(() => {
getOrderInfo(id);
}, 1500);
}
// 2.2 情况二：超过三次检测才判断为支付失败
if (state.counter >= 3) {
state.result = 'failed';
}
}
// 获得订单信息
async function getOrderInfo(id) {
state.counter++;
// 1. 加载订单信息
const {
data,
code
} = await PayOrderApi.getOrder(id);
if (code === 0) {
state.orderInfo = data;
if (!state.orderInfo || state.orderInfo.status === 30) {
// 支付关闭
state.result = 'closed';
return;
}
if (state.orderInfo.status !== 0) {
// 非待支付，可能是已支付，可能是已退款
state.result = 'paid';
// #ifdef MP
subscribeMessage();
// #endif
// 特殊：获得商品订单信息
if (state.orderType === 'goods') {
const {
data,
code
} = await OrderApi.getOrder(state.orderInfo.merchantOrderId);
if (code === 0) {
state.tradeOrder = data;
}
}
return;
}
}
// 2.1 情况三一：未支付，且轮询次数小于三次，则继续轮询
if (state.counter < 3 && state.result === 'unpaid') {
setTimeout(() => {
getOrderInfo(id);
}, 1500);
}
// 2.2 情况二：超过三次检测才判断为支付失败
if (state.counter >= 3) {
state.result = 'failed';
}
}
function onOrder() {
// TODO 芋艿：待测试
if (state.orderType === 'recharge') {
sheep.$router.redirect('/pages/pay/recharge-log');
} else {
sheep.$router.redirect('/pages/order/list');
}
}
function onOrder() {
// TODO 芋艿：待测试
if (state.orderType === 'recharge') {
sheep.$router.redirect('/pages/pay/recharge-log');
} else {
sheep.$router.redirect('/pages/order/list');
}
}
// TODO 芋艿：待测试
// #ifdef MP
function subscribeMessage() {
let event = ['order_dispatched'];
if (state.tradeOrder.type === 3) {
event.push('groupon_finish');
event.push('groupon_fail');
}
sheep.$platform.useProvider('wechat').subscribeMessage(event);
}
// #endif
// TODO 芋艿：待测试
// #ifdef MP
function subscribeMessage() {
let event = ['order_dispatched'];
if (state.tradeOrder.type === 3) {
event.push('groupon_finish');
event.push('groupon_fail');
}
sheep.$platform.useProvider('wechat').subscribeMessage(event);
}
// #endif
onLoad(async (options) => {
// 支付订单号
if (options.id) {
state.id = options.id;
}
// 订单类型
if (options.orderType) {
state.orderType = options.orderType;
}
onLoad(async (options) => {
// 支付订单号
if (options.id) {
state.id = options.id;
}
// 订单类型
if (options.orderType) {
state.orderType = options.orderType;
}
// 支付结果传值过来是失败，则直接显示失败界面
if (options.payState === 'fail') {
state.result = 'failed';
} else {
// 轮询三次检测订单支付结果
await getOrderInfo(state.id);
}
});
// 支付结果传值过来是失败，则直接显示失败界面
if (options.payState === 'fail') {
state.result = 'failed';
} else {
// 轮询三次检测订单支付结果
await getOrderInfo(state.id);
}
});
onShow(() => {
if (isEmpty(state.orderInfo)) {
return;
}
getOrderInfo(state.id);
});
onShow(() => {
if (isEmpty(state.orderInfo)) {
return;
}
getOrderInfo(state.id);
});
onHide(() => {
state.result = 'unpaid';
state.counter = 0;
});
onHide(() => {
state.result = 'unpaid';
state.counter = 0;
});
</script>
<style lang="scss" scope>
.main {
background: white;
width: 85%;
padding: 15px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 12px;
<style lang="scss" scoped>
@keyframes rotation {
0% {
transform: rotate(0deg);
}
.img {
width: 80px;
height: 80px;
display: block;
margin: 0 auto;
margin-top: -52px;
}
100% {
transform: rotate(360deg);
}
}
.title {
text-align: center;
font-size: 18px;
margin: 15px 0;
font-weight: 700;
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.ddxx {
display: flex;
justify-content: space-between;
margin: 10px 0;
.pay-result-box {
padding: 60rpx 0;
.l {
font-size: 17px;
}
.pay-waiting {
margin-top: 20rpx;
width: 60rpx;
height: 60rpx;
border: 10rpx solid rgb(233, 231, 231);
border-bottom-color: rgb(204, 204, 204);
border-radius: 50%;
display: inline-block;
// -webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
}
.r {
font-size: 16px;
color: rbga(102, 102, 102);
}
}
.pay-img {
width: 130rpx;
height: 130rpx;
}
.fgx {
margin: 20px 0;
height: 1px;
width: 100%;
background: rgba(239, 239, 239);
}
.tip-text {
font-size: 30rpx;
font-weight: bold;
color: #333333;
}
.ck-detail {
// background: rgba(254,92,45);
background: rgba(230, 50, 34);
padding: 10px 0;
color: white;
font-size: 19px;
text-align: center;
width: 100%;
margin-bottom: 15px;
border-radius: 31px;
}
.pay-total-num {
font-size: 36rpx;
font-weight: 500;
color: #333333;
font-family: OPPOSANS;
}
.bk-home {
border: 1px solid rgba(230, 50, 34);
padding: 10px 0;
color: rgba(230, 50, 34);
font-size: 19px;
text-align: center;
width: 100%;
border-radius: 31px;
}
.btn-box {
width: 100%;
.back-btn {
width: 190rpx;
height: 70rpx;
font-size: 28rpx;
border: 2rpx solid #dfdfdf;
border-radius: 35rpx;
font-weight: 400;
color: #595959;
}
.check-btn {
width: 190rpx;
height: 70rpx;
font-size: 28rpx;
border: 2rpx solid #dfdfdf;
border-radius: 35rpx;
font-weight: 400;
color: #595959;
margin-left: 32rpx;
}
}
.subscribe-box {
.subscribe-img {
width: 44rpx;
height: 44rpx;
}
.subscribe-title {
font-weight: 500;
font-size: 32rpx;
line-height: 36rpx;
color: #434343;
}
.subscribe-start {
color: var(--ui-BG-Main);
font-weight: 700;
font-size: 32rpx;
line-height: 36rpx;
}
}
}
}
</style>

26
pages/reservation_record/reservation_record.vue
View File

@ -5,17 +5,18 @@
<view class="card" v-for="(item, index) in reservationList" :key="index">
<view class="card-content">
<text class="type">预约信息</text>
<text class="time">订单日期：{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd') }}</text>
<text class="time">订单日期：{{ sheep.$helper.timeFormat(item.creatTime, 'yyyy-mm-dd') }}</text>
</view>
<view>
<text class="address">预约姓名：<text class="title">{{ item.technicianName }}</text></text>
<text class="address">预约电话：<text class="title">{{ item.memberphone }}</text></text>
<text class="address">预约姓名：<text class="title">{{ item.name }}</text></text>
<text class="address">预约电话：<text class="title">{{ item.phone }}</text></text>
<text class="address">预约时间：<text
class="title">{{ sheep.$helper.timeFormat(item.reAddTime, 'yyyy-mm-dd') }}</text></text>
<text class="address">门店名称：<text class="title">{{ item.brandName }}</text> </text>
<div class="address-container">
class="title">{{ item.timeQuantum }}</text></text>
<text class="address">项目名称：<text class="title">{{ item.projectName }}</text> </text>
<text class="address">项目套餐：<text class="title">{{ item.technicianName }}</text> </text>
<!-- <div class="address-container">
<text class="address">门店地址：<text class="title">{{ item.brandaddress }}</text></text>
</div>
</div> -->
<text class="address">备注留言：<text class="title">{{ item.remark }}</text></text>
</view>
<view>
@ -68,16 +69,17 @@
// 定义方法
function getList() {
request({
url: `${baseUrl}${apiPath}/h5/reservation/list`,
url: `${baseUrl}${apiPath}/h5/reservation/reservationInfo`,
method: 'GET',
params: {
userId: memberId.value,
},
// params: {
// userId: memberId.value,
// },
custom: {
showLoading: false,
},
}).then((res) => {
reservationList.value = res.data.list;
console.log(res,"-------------")
reservationList.value = res.data;
});
}

193
pages/seeding/seeding.vue Normal file
View File

@ -0,0 +1,193 @@
<template>
<s-layout title="社区种草" :bgStyle="{ color: '#fff' }">
<view class="seeding">
<view class="list" v-for="(item,index) in getData" :key="index">
<view class="top">
<view class="l">
<image :src="item.picUrl" class="img"></image>
</view>
<view class="r">
<view class="name">{{item.nickname}}</view>
<view class="time">{{sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
</view>
</view>
<view class="content">
{{item.content}}
</view>
<view class="bottom">
<view class="ck"><image src="https://zysc.fjptzykj.com:3000/shangcheng/fa998f749128876ceba66145c9c543f5650aaa16a71da8123c436ddb45071dc5.png" class="img"></image>{{item.lookCount}}</view>
<view class="ck"><image src="https://zysc.fjptzykj.com:3000/shangcheng/6141e7edbc442871fdf4fb321cbb842b41509d0b527338b1b02b6e96ff976dcb.png" class="img"></image>{{item.likeCount}}</view>
<view class="ck"><image src="https://zysc.fjptzykj.com:3000/shangcheng/88994efd6eec03acb0b09c38f43ad2b5f78744ec2a99f1ab2bbb6a70c20fd386.png" class="img"></image>{{item.commentCount}}</view>
</view>
</view>
<view class="btn" v-if="isShow">
<input class="content_cs" v-model="content"></input>
<input class="pic content_cs" v-model="picUrl"/>
</view>
<view class="dd" @click="fabu" v-if="!isShow">
我想发布动态
</view>
<view class="dd" @click="setlist" v-if="isShow">
确定
</view>
</view>
</s-layout>
</template>
<script setup>
import request from '@/sheep/request';
import sheep from '@/sheep';
import {
baseUrl,
apiPath
} from '@/sheep/config';
import {
ref
} from 'vue'
const getData = ref([]);
const content = ref('请输入要发送的内容');
const picUrl = ref('请输入路径');
const isShow = ref(false);
// 查询项目列表
function getlist() {
request({
url: `${baseUrl}${apiPath}/promotion/circle/page`,
method: 'GET',
params: {
// id: this.brandId
},
custom: {
showLoading: false,
},
}).then((res) => {
getData.value = res.data.list;
});
}
//发布动态按钮
function fabu(){
isShow.value = !isShow.value
}
// 添加数据
function setlist() {
console.log(content.value,"content.value")
if(!content.value){
sheep.$helper.toast('内容不能为空');
}else if(!picUrl.value){
sheep.$helper.toast('头像不能为空');
}else{
request({
url: `${baseUrl}${apiPath}/promotion/circle/create`,
method: 'post',
data: {
content: content.value,
picUrl:picUrl.value
},
custom: {
showLoading: false,
},
}).then((res) => {
console.log(res,"是否成功")
if(res.data){
isShow.value = false;
sheep.$helper.toast('提交成功')
getlist();
}else{
sheep.$helper.toast('提交失败')
}
});
}
}
getlist();
</script>
<style scoped lang="scss">
.seeding{
.list{
background:white;
margin:10px;
margin-bottom:5px;
padding:10px;
.top{
display:flex;
align-items:center;
.l{
margin-right: 10px;
.img{
width:40px;
height:40px;
}
}
.r{
.name{
font-weight:700;
}
.time{
font-size: 12px;
color: rgba(163, 163, 163);
}
}
}
.content{
margin-top: 10px;
}
.bottom{
display:flex;
justify-content: flex-end;
.ck{
display:flex;
align-items: center;
margin-right:20px;
color: rgba(163, 163, 163);
.img{
width:20px;
height:20px;
margin-right:8px;
}
}
}
}
}
.btn{
margin-top:50px;
background:white;
display:flex;
justify-content:center;
flex-wrap:wrap;
.content_cs{
width:100%;
text-align:center;
padding: 10px;
margin:20px 0;
margin-bottom:10px;
background-color: rgba(246, 246, 246);
}
.pic{
width:100%;
text-align:center;
}
}
.dd{
width:100%;
text-align:center;
background:red;
color:white;
width:50%;
margin:0 auto;
padding:10px;
margin-bottom:30px;
border-radius:15px;
}
</style>

519
pages/subscribe/subscribe.vue
View File

@ -32,46 +32,6 @@
<image src="@/static/images/dayu.png" class="img"></image>
</view>
</picker>
<!-- 项目选择列表 -->
<view class="new-project">
<view class="list" @click="onradio(item)" :class="this.techid == item.id ? 'on': ''"
v-for="(item, index) in techList" :key="index">
<view class="l">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/e940fb45cc53df01980b7069432d5101e104014fbb3cd24862d08c1ffba9df68.png"
class='img'></image>
</view>
<view class="r">
<view class="tt">
<image class='img img1'
src="https://zysc.fjptzykj.com:3000/shangcheng/d0a91de26065e4753357ed32f301d2ed9c8a9b10e789c9cddf5f5a93903af9da.png">
</image>
<image class='img img2'
src="https://zysc.fjptzykj.com:3000/shangcheng/f9e69fd9b1e60481f3ba926d1942d65e34c90916329823a16ce703f6fe36b2e9.png">
</image>
关于UI视觉设计方案需求评审
</view>
<view class="tt ttr">
<image class='img img1'
src="https://zysc.fjptzykj.com:3000/shangcheng/10b4a5f0abb36bb1a4ef71f36ffc867330d34844abd897a59889dc9a61b9c2af.png">
</image>
<image class='img img2'
src="https://zysc.fjptzykj.com:3000/shangcheng/a4a5541795df5e89912762bfb29900d8ab420abbda2753b2d22741e29e0ea150.png">
</image>
关于UI视觉设计方案需求评审
</view>
<view class="tt ttr">
<image class='img img1'
src="https://zysc.fjptzykj.com:3000/shangcheng/f197edf433c7c80703de38cf49f9bbef64192de14ec284950a023d68bcad792a.png">
</image>
<image class='img img2'
src="https://zysc.fjptzykj.com:3000/shangcheng/ca834c977ae99a35db90b5cef48c729c9ce953840a86847cb926d9752f58c0d7.png">
</image>
关于UI视觉设计方案需求评审
</view>
</view>
</view>
</view>
<view class="title">
<image
@ -79,7 +39,7 @@
class="img"></image>
<text class='text'>套餐选择</text>
</view>
<picker mode="selector" :range="brandNameList" @change="onClinicChange">
<picker mode="selector" :range="brandNameList3" @change="onClinicChange3">
<view class="clinic-select-value">
<text>{{ll3}}</text>
<image src="@/static/images/dayu.png" class="img"></image>
@ -96,15 +56,9 @@
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
<view class="scroll-view-item_H" v-for="(item, index) in dateList" :key="index"
@click="selectDate(index)">
<view class="date-item" v-if="addDate==item.addDate"
style="background-color: rgba(228,241,255);border: 1px solid rgba(3,150,248);">
<text class="date" style="color: black;">{{ item.formattedDate }}</text>
<text class="weekday" style="color: rgba(82,82,2,83);">{{ item.weekday }}</text>
</view>
<view class="date-item" v-if="addDate!=item.addDate">
<text class="date">{{ item.formattedDate }}</text>
<text class="weekday">{{ item.weekday }}</text>
<view class="date-item" :class="brandId4 == item.id ? 'on':''">
<text class="date" style="color: black;">{{ item.days.slice(5) }}</text>
<text class="weekday" style="color: rgba(82,82,2,83);">{{ item.week }}</text>
</view>
</view>
</scroll-view>
@ -119,27 +73,19 @@
</view>
<view class="date-list">
<view class="new-nei" v-for="(item, index) in serviceTime" :key="index">
<view class="date-list-new" @click="selecthsstr(index)" :class="hsstr==item.str ? 'on':''">
<view class="date-itemstr" v-if="hsstr==item.str">
<text class="weekday">{{ item.str }}</text>
</view>
<view class="new-nei" v-for="(item, index) in brandList4" :key="index">
<view class="date-list-new" @click="selecthsstr(index,item.status)"
:class="{'on' : brandId5 == item.id,'hui' : item.status == 0}" v-if="brandList3.length>0">
<view class="date-itemstr">
<view class="weekday">{{ item.timeQuantum }}</view>
<view v-if="item.ym==='true'" class="new-jk">
<view class="date-itemym" v-if="hsstr!=item.str">
<text class="weekdayym">约满</text><br />
<text class="weekday">{{ item.str }}</text>
</view>
</view>
<view v-if="item.ym==='false'" class="new-jk">
<view class="date-itemstr" v-if="hsstr!=item.str">
<text class="weekday">{{ item.str }}</text>
</view>
<view class="weekday">剩余{{item.residueNumber}}</view>
</view>
</view>
</view>
<view style="clear:both;"></view>
</view>
<view class="title" style="margin-top:10px;">
@ -151,43 +97,20 @@
<view class="yyxx-input">
<view class="name">
姓名:<input class="int" placeholder="请输入您的名字" placeholder-style="color:rgba(204,204,204)" />
姓名:<input class="int" v-model="name" placeholder="请输入您的名字"
placeholder-style="color:rgba(204,204,204)" />
</view>
<view class="phone">
电话:<input class="int" placeholder="请输入您的电话" placeholder-style="color:rgba(204,204,204)" />
电话:<input class="int" v-model="phone" placeholder="请输入您的电话"
placeholder-style="color:rgba(204,204,204)" />
</view>
</view>
</view>
<view class="footer" @click="handleSubmit">
<view class="footer" @click="brandlists9">
立即预约
</view>
</view>
<view class="container">
<radio-group>
<view class="doctor-list">
<!-- {{techList}} -->
<view class="doctor-card" v-for="(item, index) in techList" :key="index">
<view class="doctor-info">
<image class="doctor-avatar" :src="'https://sfyjk.com/api'+item.photo" mode="aspectFill">
</image>
<text class="doctor-name">{{ item.technicianName }}</text>
<text class="doctor-name" style="float: right;margin-right: 20px;">{{item.typeName}}</text>
<!-- <text class="doctor-specialty" v-if="item.content">介绍: {{item.content.substr(0, 20)}}...</text> -->
</view>
<radio style="float: right;" :value="item.id" @click="onradio(item)" :checked="index==0">
</radio>
<div v-if="techid == item.id">
<view class="info-title">服务范围</view>
<rich-text style="white-space: pre-wrap;" :nodes="item.serviceScope"></rich-text>
<view class="info-title">介绍</view>
<rich-text style="white-space: pre-wrap;" :nodes="item.content"></rich-text>
</div>
</view>
</view>
</radio-group>
</view>
<fui-toast ref="toast"></fui-toast>
</s-layout>
</template>
@ -234,10 +157,15 @@
brandList: [], //门店列表数据
brandList2: [], //项目列表数据
brandList3: [], //套餐列表数据
brandNameList: [],//门店列表
brandNameList2: [],//项目列表
brandNameList3: [],//套餐列表
brandId: "",//门店当前选中id
brandList4: [], //时段列表数据
brandNameList: [], //门店列表
brandNameList2: [], //项目列表
brandNameList3: [], //套餐列表
brandId: "", //门店当前选中id
brandId2: "", //项目当前选中id
brandId3: "", //套餐当前选中id
brandId4: "", //预约日期当前选中id
brandId5: "", //时段当前选中id
brandName: "",
selectedDayIndex: 0,
selecttypeIndex: 0,
@ -246,46 +174,75 @@
ll: '请选择',
ll2: '请选择',
ll3: '请选择',
gg: '请选择'
ll5: '请选择', //时间段日常显示
ll6: '请选择', //时间段日常显示
gg: '请选择',
dateIndex: '', //时间的状态
name: '',
phone: ''
};
},
created() {
this.isLogin = computed(() => sheep.$store('user').isLogin);
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
this.brandlists();//调用门店列表
// this.brandlists2();//调用项目列表
// this.brandlists3();//调用套餐列表
this.generateDateList();
this.addDate = this.dateList[0].addDate;
this.gettypeList();
console.log(apiPath, baseUrl, "import.meta.env.SHOPRO_API_PATH")
this.brandlists(); //调用门店列表
},
methods: {
onClinicChange(event) {
this.brandId = ''
this.brandId2 = ''
this.brandId3 = ''
this.brandId4 = ''
this.brandId5 = ''
this.name = ''
this.phone = ''
this.ll2 = '请选择'
this.ll3 = '请选择'
this.brandNameList2 = []
this.brandNameList3 = []
this.dateList = []
this.brandList3 = []
const selectedClinicIndex = event.detail.value;
this.selectedClinicIndex = selectedClinicIndex;
this.ll = this.brandList[selectedClinicIndex].name
// console.log("dddddddddddd")
// this.ll = this.brandList.list[selectedClinicIndex].name
this.brandId = this.brandList[selectedClinicIndex].id
this.brandlists2();
},
onClinicChange2(event) {
this.brandId3 = ''
this.brandId4 = ''
this.brandId5 = ''
this.name = ''
this.phone = ''
this.ll3 = '请选择'
this.brandNameList3 = []
this.dateList = []
this.brandList3 = []
const selectedClinicIndex = event.detail.value;
this.selectedClinicIndex2 = selectedClinicIndex;
this.ll2 = this.brandList2[selectedClinicIndex].name
// this.brandId = this.brandList.list[selectedClinicIndex].id
console.log("------onClinicChange2------")
// this.ll = this.brandList.list[selectedClinicIndex].name
// this.technicianList();
this.brandId2 = this.brandList2[selectedClinicIndex].id
this.setDate();
this.brandlists3();
},
onClinicChange3(event) {
const selectedClinicIndex = event.detail.value;
this.selectedClinicIndex3 = selectedClinicIndex;
this.ll3 = this.brandList3[selectedClinicIndex].name
this.brandId3 = this.brandList3[selectedClinicIndex].id
},
ontype(event) {
const selecttypeIndex = event.detail.value;
this.selecttypeIndex = selecttypeIndex;
this.typename = this.typeList[selecttypeIndex].dictValue
this.type = this.typeList[selecttypeIndex].value
console.log(this.type, "this.type")
this.gg = this.typeList[selecttypeIndex].label
this.technicianList();
},
@ -306,6 +263,8 @@
},
// 查询项目列表
brandlists2() {
this.brandNameList2 = [];
this.brandList2 = [];
request({
url: `${baseUrl}${apiPath}/h5/project/getProject`,
method: 'GET',
@ -316,231 +275,153 @@
showLoading: false,
},
}).then((res) => {
// this.brandList2 = res.data
console.log(res,"------brandList2------")
// for (var i = 0; i < this.brandList2.length; i++) {
// this.brandNameList2.push(this.brandList2[i].name)
// }
this.brandList2 = res.data
for (var i = 0; i < this.brandList2.length; i++) {
this.brandNameList2.push(this.brandList2[i].name)
}
});
},
// 查询套餐列表
brandlists3() {
// 查询日期列表
setDate() {
request({
url: `${baseUrl}${apiPath}/h5/technician/getTecchnician`,
url: `${baseUrl}${apiPath}/h5/projectday/getProjectday`,
method: 'GET',
params: {
id: this.brandId2
},
custom: {
showLoading: false,
},
}).then((res) => {
this.dateList = res.data;
});
},
// 查询套餐列表
brandlists3() {
this.brandList3 = []
this.brandNameList3 = []
request({
url: `${baseUrl}${apiPath}/h5/technician/getTechnician`,
method: 'GET',
params: {
id: this.brandId2
},
custom: {
showLoading: false,
},
}).then((res) => {
if (res) {
}
this.brandList3 = res.data
for (var i = 0; i < this.brandList3.length; i++) {
this.brandNameList3.push(this.brandList3[i].name)
}
});
},
gettypeList() {
// 查询预约时段列表
brandlists4() {
request({
url: `${baseUrl}${apiPath}/h5/reservation/type`,
method: 'GET',
custom: {
showLoading: false,
},
}).then((res) => {
console.log(res, "typeListtypeList")
this.typeList = res.data
for (var i = 0; i < this.typeList.length; i++) {
this.typenameList.push(this.typeList[i].label);
}
console.log(this.typenameList)
});
},
// 查询医生列表
technicianList() {
console.log("有没有进来technicianList");
this.techid = null,
this.serviceTime = []
this.hsstr = ""
request({
url: `${baseUrl}${apiPath}/h5/technician/list`,
url: `${baseUrl}${apiPath}/h5/configuration/getConfiguration`,
method: 'GET',
params: {
type: this.type,
brandId: this.brandId
projectdayId: this.brandId4,
technicianId: this.brandId3
},
custom: {
showLoading: false,
},
}).then((res) => {
console.log(res)
this.techList = res.data.list
console.log(this.techList)
if (this.techList.length > 0) {
this.techid = this.techList[0].id
var item = {
id: this.techid
}
this.onradio(item);
}
console.log(this.techList)
this.brandList4 = res.data
});
},
onradio(item) {
this.techid = item.id
this.serviceTime = []
this.hsstr = ""
request({
url: `${baseUrl}${apiPath}/h5/technician/h5xq`,
method: 'GET',
params: {
addDate: this.addDate,
id: this.techid
},
custom: {
showLoading: false,
},
}).then((res) => {
console.log(res);
var serviceTime = JSON.parse(res.data.serviceTime)
console.log(serviceTime, "serviceTimeserviceTimeserviceTime")
if (serviceTime) {
for (let i = 0; i < serviceTime.length; i++) {
console.log(serviceTime[i].end)
console.log(serviceTime[i].start)
console.log(serviceTime[i].ym)
if (serviceTime[i].end && serviceTime[i].start) {
this.sjd = {},
this.sjd.str = serviceTime[i].start.toString() + "-" + serviceTime[
i].end.toString()
this.sjd.ym = serviceTime[i].ym
this.serviceTime.push(this.sjd)
}
}
}
console.log(this.serviceTime, "this.serviceTime")
});
},
selectDay(index) {
this.selectedDayIndex = index;
},
handleSwiperChange(event) {
this.selectedDayIndex = event.mp.detail.current;
},
formatDate(date) {
const options = {
month: "2-digit",
day: "2-digit"
};
return date.toLocaleDateString("en-US", options);
},
handleSubmit() {
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
if (!this.memberId) {
if (sheep.$platform.name === 'WechatMiniProgram') {
// showAuthModal('wechatMiniLogin')
return;
}
showAuthModal('accountLogin')
// 提交表单接口
brandlists9() {
if (!this.brandId) {
sheep.$helper.toast('请选择门店')
} else if (!this.brandId2) {
sheep.$helper.toast('请选择项目')
} else if (!this.brandId3) {
sheep.$helper.toast('请选择套餐')
} else if (!this.brandId4) {
sheep.$helper.toast('请选择预约日期')
} else if (!this.brandId5) {
sheep.$helper.toast('请选择预约时段')
} else if (!this.name) {
sheep.$helper.toast('请填写姓名')
} else if (!this.phone) {
sheep.$helper.toast('请填写电话')
} else {
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
if (!this.brandId) {
sheep.$helper.toast('请选择医馆')
} else if (!this.techid) {
sheep.$helper.toast('请选择技师')
} else if (!this.addDate) {
sheep.$helper.toast('请选择预约时间')
} else if (!this.hsstr) {
sheep.$helper.toast('请选择预约时间段')
} else if (this.memberId) {
request({
url: `${baseUrl}/app-api/h5/reservation/add`,
method: 'post',
params: {
type: this.type,
brandId: this.brandId,
technicianId: this.techid,
reAddTime: this.addDate,
hsstr: this.hsstr,
userId: this.memberId,
},
custom: {
showLoading: false,
},
}).then((res) => {
uni.showModal({
title: '预约提示',
content: '预约成功！',
success: function(res) {
if (res.confirm) {
uni.switchTab({
url: '/pages/index/user'
});
} else {
uni.switchTab({
url: '/pages/index/user'
});
}
}
});
});
request({
url: `${baseUrl}${apiPath}/h5/reservation/addReservation`,
method: 'GET',
params: {
brandId: this.brandId,
projectId: this.brandId2,
technicianId: this.brandId3,
projectdayId: this.brandId4,
timeId: this.brandId5,
name: this.name,
phone: this.phone
},
custom: {
showLoading: false,
},
}).then((res) => {
if (res.code == 0) {
}
}
sheep.$router.go('/pages/subscribe/success_tolse', {
brandId: this.ll, //门店名称
projectId: this.ll2, //项目名称
technicianId: this.ll3, //套餐名称
projectdayId: this.ll5, //预约日期
timeId: this.ll6, //预约时段
name: this.name, //名字
phone: this.phone //电话
})
console.log("立即预约");
},
generateDateList() {
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const today = new Date();
for (let i = 0; i < 7; i++) {
const date = new Date(today);
date.setDate(date.getDate() + i);
const formattedDate =
// `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
`${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
const weekday = weekDays[date.getDay()];
const addDate =
`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
this.dateList.push({
date,
formattedDate,
addDate,
weekday
// let options = {}
//提示信息
// options.text = '提交成功';
//图标图片地址
// options.src = "https://zysc.fjptzykj.com:3000/shangcheng/44252dee36b3ba686967c33e911b15c565f5ccc4c7b2a9f56e43418da949b7c2.png";
// this.$refs.toast.show(options)
// setTimeout(()=>{
// sheep.$router.go('/pages/index/user')
// },1000)
}
});
}
},
// 删除前五位数字
delete(val) {},
//查看时段接口
selectDate(index) {
this.addDate = this.dateList[index].addDate
if (this.techid) {
var item = {
id: this.techid
}
this.onradio(item);
if (this.brandId3 == '') {
sheep.$helper.toast('请先选择套餐')
return;
}
// 处理选中日期的逻辑，例如触发事件、更新状态等
console.log('Selected date:', this.addDate);
this.dateIndex = index;
this.brandId4 = this.dateList[index].id;
this.ll5 = this.dateList[index].days;
this.brandlists4();
},
selecthsstr(index) {
console.log(this.serviceTime[index].str)
console.log(this.serviceTime[index].ym)
if (this.serviceTime[index].ym === "true") {
} else if (this.serviceTime[index].ym === "false") {
this.hsstr = this.serviceTime[index].str
selecthsstr(index, status) {
console.log(this.brandList4[index].timeQuantum, "查看时段")
if (status == 0) {
this.brandId5 = '';
sheep.$helper.toast('该时间段已约满')
return;
}
// 处理选中日期的逻辑，例如触发事件、更新状态等
console.log('this.serviceTimesss:', this.serviceTime[index].ym);
},
this.brandId5 = this.brandList4[index].id;
this.ll6 = this.brandList4[index].timeQuantum;
}
},
};
</script>
@ -728,21 +609,27 @@
border-radius: 6px;
&.on {
background: rgb(0, 149, 248);
background: #e4f1ff;
.date-itemstr {
// background-color: #ff5541;
.weekday {
color: white;
}
.weekday {}
}
}
&.hui {
user-select: none;
background: #f6f6f6;
}
.date-itemstr {
// background-color: #ff5541;
.weekday {}
.weekday {
color: black;
font-size: 14px;
}
}
.new-jk {
@ -766,27 +653,33 @@
border-radius: 8px;
float: left;
margin: 5px;
padding: 5px;
width: 26px;
height: 30px;
border: 1px solid rgba(229, 229, 229);
padding: 8px 0;
width: 59px;
height: 46px;
border: 1px solid #e5e5e5;
cursor: pointer;
display: flex;
background-color: white;
flex-direction: column;
align-items: center;
&:hover {
// background-color: #ff5541;
}
&.on {
background-color: rgba(228, 241, 255);
border: 1px solid rgba(3, 150, 248);
}
.date {
font-size: 8px;
font-size: 12px;
}
.weekday {
margin-top: 5px;
font-size: 10px;
font-size: 12px;
color: #666;
}
}

177
pages/subscribe/success_tolse.vue Normal file
View File

@ -0,0 +1,177 @@
<template>
<s-layout title="预约成功" :bgStyle="{ color: '#fff' }">
<view class="main">
<view class="main-t">
<view class="img-t">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/ab5eb1046be1b2d98fbab61cd1925301725b7a6d2d263fc22ea1a788e39df38d.png"
class="img"></image>
</view>
<view class="img-b">
预约成功
</view>
</view>
<view class="main-b">
<view class="list">
<view class="name">姓名</view>
<view class="name-value">{{ item.name }}</view>
</view>
<view class="list">
<view class="name">电话</view>
<view class="name-value">{{ item.phone }}</view>
</view>
<view class="list">
<view class="name">预约门店</view>
<view class="name-value">{{item.brandId}}</view>
</view>
<view class="list">
<view class="name">项目套餐</view>
<view class="name-value">{{item.projectId}} {{ item.technicianId }}</view>
</view>
<view class="list">
<view class="name">预约时间</view>
<view class="name-value">{{ item.projectdayId }} {{item.timeId}}</view>
</view>
</view>
</view>
<view class="btn" @click="sheep.$router.go('/pages/index/user')">
确认
</view>
</s-layout>
</template>
<script>
import {
ref,
computed,
onMounted
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app';
import request from '@/sheep/request';
import {
baseUrl,
apiPath
} from '@/sheep/config';
import sheep from '@/sheep';
export default {
setup() {
// 使用 ref 创建响应式数据
const memberId = ref(null);
const reservationList = ref([]);
const page = ref(1);
const limit = ref(10);
const totalPages = ref(1);
const item = ref({});
// 使用 computed 创建计算属性
const userInfo = computed(() => sheep.$store('user').userInfo);
memberId.value = userInfo.value.id;
// 使用 onMounted 生命周期钩子
onMounted(() => {
getList();
});
onLoad((options) => {
if (options) {
item.value = options;
console.log(item.value,"-------------------")
}
});
// 定义方法
function getList() {
request({
url: `${baseUrl}${apiPath}/h5/reservation/reservationInfo`,
method: 'GET',
custom: {
showLoading: false,
},
}).then((res) => {
reservationList.value = res.data;
});
}
// 将响应式数据和方法暴露给模板
return {
memberId,
reservationList,
page,
limit,
totalPages,
getList,
sheep,
item
};
},
};
</script>
<style scope lang="scss">
.main {
background: white;
margin: 15px 15px;
border-radius: 12px;
padding-bottom: 10px;
.main-t {
.img-t {
padding-bottom: 20px;
.img {
width: 143px;
height: 106px;
display: block;
margin: 10px auto;
padding-top: 25px;
}
}
.img-b {
text-align: center;
font-size: 24px;
font-weight: 700;
width: 90%;
margin: 0 auto;
border-bottom: 1px solid rgba(233, 233, 233);
padding-bottom: 15px;
}
}
.main-b {
margin: 10px auto;
width: 90%;
margin-top: 40px;
.list {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin:10px 0;
.name {
font-size: 17px;
color: rgba(101, 101, 101);
}
.name-value {
font-size: 17px;
}
}
}
}
.btn {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
border-radius: 16px;
background: rgba(0, 149, 248);
text-align: center;
color: white;
width: 89%;
padding: 10px 0;
}
</style>

518
pages/user/address/edit.vue
View File

@ -1,305 +1,271 @@
<!-- 收货地址的新增/编辑 -->
<template>
<s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
<uni-forms
ref="addressFormRef"
v-model="state.model"
:rules="rules"
validateTrigger="bind"
labelWidth="160"
labelAlign="left"
border
:labelStyle="{ fontWeight: 'bold' }"
>
<view class="bg-white form-box ss-p-x-30">
<uni-forms-item name="name" label="收货人" class="form-item">
<uni-easyinput
v-model="state.model.name"
placeholder="请填写收货人姓名"
:inputBorder="false"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
/>
</uni-forms-item>
<s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
<uni-forms ref="addressFormRef" v-model="state.model" :rules="rules" validateTrigger="bind" labelWidth="160"
labelAlign="left" border :labelStyle="{ fontWeight: 'bold' }">
<view class="bg-white form-box ss-p-x-30">
<uni-forms-item name="name" label="收货人" class="form-item">
<uni-easyinput v-model="state.model.name" placeholder="请填写收货人姓名" :inputBorder="false"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" />
</uni-forms-item>
<uni-forms-item name="mobile" label="手机号" class="form-item">
<uni-easyinput
v-model="state.model.mobile"
type="number"
placeholder="请输入手机号"
:inputBorder="false"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item
name="areaName"
label="省市区"
@tap="state.showRegion = true"
class="form-item"
>
<uni-easyinput
v-model="state.model.areaName"
disabled
:inputBorder="false"
:styles="{ disableColor: '#fff', color: '#333' }"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
placeholder="请选择省市区"
>
<template v-slot:right>
<uni-icons type="right" />
</template>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item
name="detailAddress"
label="详细地址"
:formItemStyle="{ alignItems: 'flex-start' }"
:labelStyle="{ lineHeight: '5em' }"
class="textarea-item"
>
<uni-easyinput
:inputBorder="false"
type="textarea"
v-model="state.model.detailAddress"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
placeholder="请输入详细地址"
clearable
/>
</uni-forms-item>
</view>
<view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
<view class="default-box-title"> 设为默认地址 </view>
<su-switch style="transform: scale(0.8)" v-model="state.model.defaultStatus" />
</view>
</uni-forms>
<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
<view class="footer-box ss-flex-col ss-row-between ss-p-20">
<view class="ss-m-b-20">
<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button>
</view>
<button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
删除
</button>
</view>
</su-fixed>
<uni-forms-item name="mobile" label="手机号" class="form-item">
<uni-easyinput v-model="state.model.mobile" type="number" placeholder="请输入手机号" :inputBorder="false"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
</uni-easyinput>
</uni-forms-item>
<uni-forms-item name="areaName" label="省市区" @tap="state.showRegion = true" class="form-item">
<uni-easyinput v-model="state.model.areaName" disabled :inputBorder="false"
:styles="{ disableColor: '#fff', color: '#333' }"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
placeholder="请选择省市区">
<template v-slot:right>
<uni-icons type="right" />
</template>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item name="detailAddress" label="详细地址" :formItemStyle="{ alignItems: 'flex-start' }"
:labelStyle="{ lineHeight: '5em' }" class="textarea-item">
<uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.detailAddress"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
placeholder="请输入详细地址" clearable />
</uni-forms-item>
</view>
<view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
<view class="default-box-title"> 设为默认地址 </view>
<su-switch style="transform: scale(0.8)" v-model="state.model.defaultStatus" />
</view>
</uni-forms>
<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
<view class="footer-box ss-flex-col ss-row-between ss-p-20">
<view class="ss-m-b-20">
<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button>
</view>
<button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
删除
</button>
</view>
</su-fixed>
<!-- 省市区弹窗 -->
<su-region-picker
:show="state.showRegion"
@cancel="state.showRegion = false"
@confirm="onRegionConfirm"
/>
</s-layout>
<!-- 省市区弹窗 -->
<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />
</s-layout>
</template>
<script setup>
import { ref, reactive, unref } from 'vue';
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import _ from 'lodash';
import { mobile } from '@/sheep/validate/form';
import AreaApi from '@/sheep/api/system/area';
import AddressApi from '@/sheep/api/member/address';
import {
ref,
reactive,
unref
} from 'vue';
import sheep from '@/sheep';
import {
onLoad
} from '@dcloudio/uni-app';
import _ from 'lodash';
import {
mobile
} from '@/sheep/validate/form';
import AreaApi from '@/sheep/api/system/area';
import AddressApi from '@/sheep/api/member/address';
const addressFormRef = ref(null);
const state = reactive({
showRegion: false,
model: {
name: '',
mobile: '',
detailAddress: '',
defaultStatus: false,
areaName: '',
},
rules: {},
});
const addressFormRef = ref(null);
const state = reactive({
showRegion: false,
model: {
const rules = {
name: {
rules: [
{
required: true,
errorMessage: '请输入收货人姓名',
},
],
},
mobile,
detailAddress: {
rules: [
{
required: true,
errorMessage: '请输入详细地址',
},
],
},
areaName: {
rules: [
{
required: true,
errorMessage: '请选择您的位置',
},
],
},
};
defaultStatus: false,
},
rules: {},
});
// 确认选择地区
const onRegionConfirm = (e) => {
state.model.areaName = `${e.province_name} ${e.city_name} ${e.district_name}`;
state.model.areaId = e.district_id;
state.showRegion = false;
};
const rules = {
name: {
rules: [{
required: true,
errorMessage: '请输入收货人姓名',
}, ],
},
mobile,
detailAddress: {
rules: [{
required: true,
errorMessage: '请输入详细地址',
}, ],
},
areaName: {
rules: [{
required: true,
errorMessage: '请选择您的位置',
}, ],
},
};
// 获得地区数据
const getAreaData = () => {
if (_.isEmpty(uni.getStorageSync('areaData'))) {
AreaApi.getAreaTree().then((res) => {
if (res.code === 0) {
uni.setStorageSync('areaData', res.data);
}
});
}
};
// 确认选择地区
const onRegionConfirm = (e) => {
state.model.areaName = `${e.province_name} ${e.city_name} ${e.district_name}`;
state.model.areaId = e.district_id;
state.showRegion = false;
};
// 保存收货地址
const onSave = async () => {
// 参数校验
const validate = await unref(addressFormRef)
.validate()
.catch((error) => {
console.log('error: ', error);
});
if (!validate) {
return;
}
// 获得地区数据
const getAreaData = () => {
if (_.isEmpty(uni.getStorageSync('areaData'))) {
AreaApi.getAreaTree().then((res) => {
if (res.code === 0) {
uni.setStorageSync('areaData', res.data);
}
});
}
};
// 提交请求
const formData = {
...state.model,
};
const { code } =
state.model.id > 0
? await AddressApi.updateAddress(formData)
: await AddressApi.createAddress(formData);
if (code === 0) {
sheep.$router.back();
}
};
// 保存收货地址
const onSave = async () => {
// 参数校验
const validate = await unref(addressFormRef)
.validate()
.catch((error) => {
console.log('error: ', error);
});
if (!validate) {
return;
}
// 删除收货地址
const onDelete = () => {
uni.showModal({
title: '提示',
content: '确认删除此收货地址吗？',
success: async function (res) {
if (!res.confirm) {
return;
}
const { code } = await AddressApi.deleteAddress(state.model.id);
if (code === 0) {
sheep.$router.back();
}
},
});
};
// 提交请求
const formData = {
...state.model,
};
const {
code
} =
state.model.id > 0 ?
await AddressApi.updateAddress(formData) :
await AddressApi.createAddress(formData);
if (code === 0) {
sheep.$router.back();
}
};
onLoad(async (options) => {
// 获得地区数据
getAreaData();
// 情况一：基于 id 获得收件地址
if (options.id) {
let { code, data } = await AddressApi.getAddress(options.id);
if (code !== 0) {
return;
}
state.model = data;
}
// 情况二：微信导入
if (options.data) {
let data = JSON.parse(options.data);
const areaData = uni.getStorageSync('areaData');
const findAreaByName = (areas, name) => areas.find((item) => item.name === name);
// 删除收货地址
const onDelete = () => {
uni.showModal({
title: '提示',
content: '确认删除此收货地址吗？',
success: async function(res) {
if (!res.confirm) {
return;
}
const {
code
} = await AddressApi.deleteAddress(state.model.id);
if (code === 0) {
sheep.$router.back();
}
},
});
};
let provinceObj = findAreaByName(areaData, data.province_name);
let cityObj = provinceObj ? findAreaByName(provinceObj.children, data.city_name) : undefined;
let districtObj = cityObj ? findAreaByName(cityObj.children, data.district_name) : undefined;
let areaId = (districtObj || cityObj || provinceObj).id;
onLoad(async (options) => {
// 获得地区数据
getAreaData();
// 情况一：基于 id 获得收件地址
if (options.id) {
let {
code,
data
} = await AddressApi.getAddress(options.id);
if (code !== 0) {
return;
}
state.model = data;
}
// 情况二：微信导入
if (options.data) {
let data = JSON.parse(options.data);
const areaData = uni.getStorageSync('areaData');
const findAreaByName = (areas, name) => areas.find((item) => item.name === name);
state.model = {
...state.model,
areaId,
areaName: [data.province_name, data.city_name, data.district_name]
.filter(Boolean)
.join(' '),
defaultStatus: false,
detailAddress: data.address,
mobile: data.mobile,
name: data.consignee,
};
}
});
let provinceObj = findAreaByName(areaData, data.province_name);
let cityObj = provinceObj ? findAreaByName(provinceObj.children, data.city_name) : undefined;
let districtObj = cityObj ? findAreaByName(cityObj.children, data.district_name) : undefined;
let areaId = (districtObj || cityObj || provinceObj).id;
state.model = {
...state.model,
areaId,
areaName: [data.province_name, data.city_name, data.district_name]
.filter(Boolean)
.join(' '),
defaultStatus: false,
detailAddress: data.address,
mobile: data.mobile,
name: data.consignee,
};
}
});
</script>
<style lang="scss" scoped>
:deep() {
.uni-forms-item__label .label-text {
font-size: 28rpx !important;
color: #333333 !important;
line-height: normal !important;
}
:deep() {
.uni-forms-item__label .label-text {
font-size: 28rpx !important;
color: #333333 !important;
line-height: normal !important;
}
.uni-easyinput__content-input {
font-size: 28rpx !important;
color: #333333 !important;
line-height: normal !important;
padding-left: 0 !important;
}
.uni-easyinput__content-input {
font-size: 28rpx !important;
color: #333333 !important;
line-height: normal !important;
padding-left: 0 !important;
}
.uni-easyinput__content-textarea {
font-size: 28rpx !important;
color: #333333 !important;
line-height: normal !important;
margin-top: 8rpx !important;
}
.uni-easyinput__content-textarea {
font-size: 28rpx !important;
color: #333333 !important;
line-height: normal !important;
margin-top: 8rpx !important;
}
.uni-icons {
font-size: 40rpx !important;
}
.uni-icons {
font-size: 40rpx !important;
}
.is-textarea-icon {
margin-top: 22rpx;
}
.is-textarea-icon {
margin-top: 22rpx;
}
.is-disabled {
color: #333333;
}
}
.is-disabled {
color: #333333;
}
}
.default-box {
width: 100%;
box-sizing: border-box;
height: 100rpx;
.default-box {
width: 100%;
box-sizing: border-box;
height: 100rpx;
.default-box-title {
font-size: 28rpx;
color: #333333;
line-height: normal;
}
}
.default-box-title {
font-size: 28rpx;
color: #333333;
line-height: normal;
}
}
.footer-box {
.save-btn {
width: 710rpx;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: $white;
}
.footer-box {
.save-btn {
width: 710rpx;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: $white;
}
.cancel-btn {
width: 710rpx;
height: 80rpx;
border-radius: 40rpx;
background: var(--ui-BG);
}
}
</style>
.cancel-btn {
width: 710rpx;
height: 80rpx;
border-radius: 40rpx;
background: var(--ui-BG);
}
}
</style>

281
pages/user/address/list.vue
View File

@ -1,156 +1,155 @@
<!-- 收件地址列表 -->
<template>
<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
<view v-if="state.list.length">
<s-address-item
hasBorderBottom
v-for="item in state.list"
:key="item.id"
:item="item"
@tap="onSelect(item)"
/>
</view>
<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
<view v-if="state.list.length">
<s-address-item hasBorderBottom v-for="item in state.list" :key="item.id" :item="item" @tap="onSelect(item)"
@cc="getList" />
</view>
<su-fixed bottom placeholder>
<view class="footer-box ss-flex ss-row-between ss-p-20">
<!-- 微信小程序和微信H5 -->
<button
v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
@tap="importWechatAddress"
class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center"
>
<text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text>
导入微信地址
</button>
<button
class="add-btn ss-reset-button ui-Shadow-Main"
@tap="sheep.$router.go('/pages/user/address/edit')"
>
新增收货地址
</button>
</view>
</su-fixed>
<s-empty
v-if="state.list.length === 0 && !state.loading"
text="暂无收货地址"
icon="/static/data-empty.png"
/>
</s-layout>
<su-fixed bottom placeholder>
<view class="footer-box ss-flex ss-row-between ss-p-20">
<!-- 微信小程序和微信H5 -->
<button v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
@tap="importWechatAddress"
class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center">
<text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text>
导入微信地址
</button>
<button class="add-btn ss-reset-button ui-Shadow-Main"
@tap="sheep.$router.go('/pages/user/address/edit')">
新增收货地址
</button>
</view>
</su-fixed>
<s-empty v-if="state.list.length === 0 && !state.loading" text="暂无收货地址" icon="/static/data-empty.png" />
</s-layout>
</template>
<script setup>
import { reactive, onBeforeMount } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { isEmpty } from 'lodash';
import AreaApi from '@/sheep/api/system/area';
import AddressApi from '@/sheep/api/member/address';
import {
reactive,
onBeforeMount
} from 'vue';
import {
onShow
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import {
isEmpty
} from 'lodash';
import AreaApi from '@/sheep/api/system/area';
import AddressApi from '@/sheep/api/member/address';
const state = reactive({
list: [], // 地址列表
loading: true,
});
const state = reactive({
list: [], // 地址列表
loading: true,
});
// 选择收货地址
const onSelect = (addressInfo) => {
uni.$emit('SELECT_ADDRESS', {
addressInfo,
});
sheep.$router.back();
};
// 选择收货地址
const onSelect = (addressInfo) => {
uni.$emit('SELECT_ADDRESS', {
addressInfo,
});
sheep.$router.back();
};
// 导入微信地址
// TODO 芋艿：未测试
function importWechatAddress() {
let wechatAddress = {};
// #ifdef MP
uni.chooseAddress({
success: (res) => {
wechatAddress = {
consignee: res.userName,
mobile: res.telNumber,
province_name: res.provinceName,
city_name: res.cityName,
district_name: res.countyName,
address: res.detailInfo,
region: '',
is_default: false,
};
if (!isEmpty(wechatAddress)) {
sheep.$router.go('/pages/user/address/edit', {
data: JSON.stringify(wechatAddress),
});
}
},
fail: (err) => {
console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow');
},
});
// #endif
// #ifdef H5
sheep.$platform.useProvider('wechat').jssdk.openAddress({
success: (res) => {
wechatAddress = {
consignee: res.userName,
mobile: res.telNumber,
province_name: res.provinceName,
city_name: res.cityName,
district_name: res.countryName,
address: res.detailInfo,
region: '',
is_default: false,
};
if (!isEmpty(wechatAddress)) {
sheep.$router.go('/pages/user/address/edit', {
data: JSON.stringify(wechatAddress),
});
}
},
});
// #endif
}
// 导入微信地址
// TODO 芋艿：未测试
function importWechatAddress() {
let wechatAddress = {};
// #ifdef MP
uni.chooseAddress({
success: (res) => {
wechatAddress = {
consignee: res.userName,
mobile: res.telNumber,
province_name: res.provinceName,
city_name: res.cityName,
district_name: res.countyName,
address: res.detailInfo,
region: '',
is_default: false,
};
if (!isEmpty(wechatAddress)) {
sheep.$router.go('/pages/user/address/edit', {
data: JSON.stringify(wechatAddress),
});
}
},
fail: (err) => {
console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow');
},
});
// #endif
// #ifdef H5
sheep.$platform.useProvider('wechat').jssdk.openAddress({
success: (res) => {
wechatAddress = {
consignee: res.userName,
mobile: res.telNumber,
province_name: res.provinceName,
city_name: res.cityName,
district_name: res.countryName,
address: res.detailInfo,
region: '',
is_default: false,
};
if (!isEmpty(wechatAddress)) {
sheep.$router.go('/pages/user/address/edit', {
data: JSON.stringify(wechatAddress),
});
}
},
});
// #endif
}
onShow(async () => {
state.list = (await AddressApi.getAddressList()).data;
state.loading = false;
});
function getList(val) {
AddressApi.getAddressList().then((res) => {
state.list = res.data
})
}
onShow(async () => {
state.list = (await AddressApi.getAddressList()).data;
state.loading = false;
});
onBeforeMount(() => {
if (!!uni.getStorageSync('areaData')) {
return;
}
// 提前加载省市区数据
AreaApi.getAreaTree().then((res) => {
if (res.code === 0) {
uni.setStorageSync('areaData', res.data);
}
});
});
onBeforeMount(() => {
if (!!uni.getStorageSync('areaData')) {
return;
}
// 提前加载省市区数据
AreaApi.getAreaTree().then((res) => {
if (res.code === 0) {
uni.setStorageSync('areaData', res.data);
}
});
});
</script>
<style lang="scss" scoped>
.footer-box {
.add-btn {
flex: 1;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
border-radius: 80rpx;
font-size: 30rpx;
font-weight: 500;
line-height: 80rpx;
color: $white;
position: relative;
z-index: 1;
}
.footer-box {
.add-btn {
flex: 1;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
border-radius: 80rpx;
font-size: 30rpx;
font-weight: 500;
line-height: 80rpx;
color: $white;
position: relative;
z-index: 1;
}
.sync-wxaddress {
flex: 1;
line-height: 80rpx;
background: $white;
border-radius: 80rpx;
font-size: 30rpx;
font-weight: 500;
color: $dark-6;
margin-right: 18rpx;
}
}
</style>
.sync-wxaddress {
flex: 1;
line-height: 80rpx;
background: $white;
border-radius: 80rpx;
font-size: 30rpx;
font-weight: 500;
color: $dark-6;
margin-right: 18rpx;
}
}
</style>

580
pages/user/goods_details_store/index.vue
View File

@ -1,275 +1,353 @@
<template>
<s-layout title="选择自提门店" :bgStyle="{ color: '#FFF' }">
<view class="storeBox" ref="container">
<view class="storeBox-box" v-for="(item, index) in state.storeList" :key="index" @tap="checked(item)">
<view class="store-img">
<image :src="item.logo" class="img" />
</view>
<view class="store-cent-left">
<view class="store-name">{{ item.name }}</view>
<view class="store-address line1">
{{ item.areaName }}{{ ', ' + item.detailAddress }}
</view>
</view>
<view class="row-right ss-flex-col ss-col-center">
<view>
<!-- #ifdef H5 -->
<a class="store-phone" :href="'tel:' + item.phone">
<view class="iconfont">
<view class="ss-rest-button">
<text class="_icon-forward" />
</view>
</view>
</a>
<!-- #endif -->
<!-- #ifdef MP -->
<view class="store-phone" @click="call(item.phone)">
<view class="iconfont">
<view class="ss-rest-button">
<text class="_icon-forward" />
</view>
</view>
</view>
<!-- #endif -->
</view>
<view class="store-distance ss-flex ss-row-center" @tap.stop="showMaoLocation(item)">
<text class="addressTxt" v-if="item.distance">距离{{ item.distance.toFixed(2) }}千米</text>
<text class="addressTxt" v-else>查看地图</text>
<view class="iconfont">
<view class="ss-rest-button">
<text class="_icon-forward" />
</view>
</view>
</view>
</view>
</view>
</view>
</s-layout>
<s-layout title="选择自提门店" :bgStyle="{ color: '#FFF' }">
<view class="storeBox" ref="container">
<view class="storeBox-box" v-for="(item, index) in state.storeList" :key="index" @tap="checked(item)">
<view class="store-img">
<image :src="item.logo" class="img" />
</view>
<view class="store-cent-left">
<view class="store-name">{{ item.name }}</view>
<view class="store-address line1">
{{ item.areaName }}{{ ', ' + item.detailAddress }}
</view>
<view class="store-address line1">
营业时间：{{item?.openingTime[0] + ":" + item?.openingTime[1]}}-{{item?.closingTime[0] + ":" + item?.closingTime[1]}}
</view>
<view class="status" v-if="item?.stat == 0">未营业</view>
<view class="status" v-if="item?.stat == 1">营业中</view>
</view>
<view class="row-right ss-flex-col ss-col-center">
<view>
<!-- #ifdef H5 -->
<!-- <a class="store-phone" :href="'tel:' + item.phone">
<view class="iconfont">
<view class="ss-rest-button">
<text class="_icon-forward" />
</view>
</view>
</a> -->
<!-- #endif -->
<!-- #ifdef MP -->
<!-- <view class="store-phone" @click="call(item.phone)">
<view class="iconfont">
<view class="ss-rest-button">
<text class="_icon-forward" />
</view>
</view>
</view> -->
<!-- #endif -->
</view>
<view class="store-distance ss-flex ss-row-center">
<view class="addressTxt" v-if="item.distance==0 || item.distance">
距离{{ item.distance.toFixed(2) }}km</view>
<!-- <text class="addressTxt" v-else>查看地图</text> -->
<!-- <view class="iconfont">
<view class="ss-rest-button">
<text class="_icon-forward" />
</view>
</view> -->
<view class="tb">
<image @tap.stop="showMaoLocation(item)" style="margin-right:10px;"
src="https://zysc.fjptzykj.com:3000/shangcheng/c7362f85726ef0030b407f1c3749c710ca0caa51fee5cc8ffbb64e11226354a8.png"
class="img"></image>
<image @click.stop="call(item.phone)"
src="https://zysc.fjptzykj.com:3000/shangcheng/535ee6f79e04d4b6e46fcfa59ed052f214ad6ab756c340c0c040e68357f68e9a.png"
class="img"></image>
</view>
</view>
</view>
</view>
</view>
</s-layout>
</template>
<script setup>
import DeliveryApi from '@/sheep/api/trade/delivery';
import { onMounted, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import DeliveryApi from '@/sheep/api/trade/delivery';
import {
onMounted,
reactive
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
const LONGITUDE = 'user_longitude';
const LATITUDE = 'user_latitude';
const state = reactive({
loaded: false,
loading: false,
storeList: [],
system_store: {},
locationShow: false,
user_latitude: 0,
user_longitude: 0,
});
const LONGITUDE = 'user_longitude';
const LATITUDE = 'user_latitude';
const state = reactive({
loaded: false,
loading: false,
storeList: [],
system_store: {},
locationShow: false,
user_latitude: 0,
user_longitude: 0,
});
const call = (phone) => {
uni.makePhoneCall({
phoneNumber: phone,
});
};
const selfLocation = () => {
// #ifdef H5
const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
if (jsWxSdk.isWechat()) {
jsWxSdk.getLocation((res) => {
console.log(res);
state.user_latitude = res.latitude;
state.user_longitude = res.longitude;
uni.setStorageSync(LATITUDE, res.latitude);
uni.setStorageSync(LONGITUDE, res.longitude);
getList();
});
} else {
// #endif
uni.getLocation({
type: 'gcj02',
success: (res) => {
try {
state.user_latitude = res.latitude;
state.user_longitude = res.longitude;
uni.setStorageSync(LATITUDE, res.latitude);
uni.setStorageSync(LONGITUDE, res.longitude);
} catch {
}
getList();
},
complete: () => {
getList();
},
});
// #ifdef H5
}
// #endif
};
const showMaoLocation = (e) => {
// #ifdef H5
const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
if (jsWxSdk.isWechat()) {
jsWxSdk.openLocation({
latitude: Number(e.latitude),
longitude: Number(e.longitude),
name: e.name,
address: `${e.areaName}-${e.detailAddress}`
});
} else {
// #endif
uni.openLocation({
latitude: Number(e.latitude),
longitude: Number(e.longitude),
name: e.name,
address: `${e.areaName}-${e.detailAddress}`,
success: function() {
console.log('success');
},
});
// #ifdef H5
}
// #endif
};
const call = (phone) => {
uni.makePhoneCall({
phoneNumber: phone,
});
};
const selfLocation = () => {
// #ifdef H5
const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
if (!!jsWxSdk?.isWechat()) {
jsWxSdk.getLocation((res) => {
state.user_latitude = res.latitude;
state.user_longitude = res.longitude;
uni.setStorageSync(LATITUDE, res.latitude);
uni.setStorageSync(LONGITUDE, res.longitude);
getList();
});
} else {
// #endif
uni.getLocation({
type: 'gcj02',
success: (res) => {
console.log(res.latitude, "--------经纬度-----");
try {
state.user_latitude = res.latitude;
state.user_longitude = res.longitude;
uni.setStorageSync(LATITUDE, res.latitude);
uni.setStorageSync(LONGITUDE, res.longitude);
} catch {}
/**
* 选中门店
*/
const checked = (addressInfo) => {
uni.$emit('SELECT_PICK_UP_INFO', {
addressInfo,
});
sheep.$router.back();
};
getList();
},
complete: () => {
getList();
},
fail(error) {
console.log(error, "错误")
}
});
console.log("有执行")
// #ifdef H5
}
// #endif
};
const showMaoLocation = (e) => {
// #ifdef H5
const jsWxSdk = sheep.$platform.useProvider('wechat').jsWxSdk;
if (jsWxSdk.isWechat()) {
jsWxSdk.openLocation({
latitude: Number(e.latitude),
longitude: Number(e.longitude),
name: e.name,
address: `${e.areaName}-${e.detailAddress}`
});
} else {
// #endif
uni.openLocation({
latitude: Number(e.latitude),
longitude: Number(e.longitude),
name: e.name,
address: `${e.areaName}-${e.detailAddress}`,
success: function() {
console.log('success');
},
});
// #ifdef H5
}
// #endif
};
/**
* 获取门店列表数据
*/
const getList = async () => {
if (state.loading || state.loaded) {
return;
}
state.loading = true;
const { data, code } = await DeliveryApi.getDeliveryPickUpStoreList({
latitude: state.user_latitude,
longitude: state.user_longitude,
});
if (code !== 0) {
return;
}
state.loading = false;
state.storeList = data;
};
/**
* 选中门店
*/
const checked = (addressInfo) => {
uni.$emit('SELECT_PICK_UP_INFO', {
addressInfo,
});
sheep.$router.back();
};
onMounted(() => {
if (state.user_latitude && state.user_longitude) {
getList();
} else {
selfLocation();
getList();
}
});
onLoad(() => {
try {
state.user_latitude = uni.getStorageSync(LATITUDE);
state.user_longitude = uni.getStorageSync(LONGITUDE);
} catch (e) {
// error
}
});
/**
* 获取门店列表数据
*/
const getList = async () => {
if (state.loading || state.loaded) {
return;
}
state.loading = true;
console.log(state.user_latitude, state.user_longitude, "------user_longitude-------")
const data2 = {
latitude: state.user_latitude,
longitude: state.user_longitude,
};
const {
data,
code
} = await DeliveryApi.getDeliveryPickUpStoreList(data2);
if (code !== 0) {
return;
}
state.loading = false;
state.storeList = data;
};
onMounted(() => {
if (state.user_latitude && state.user_longitude) {
getList();
} else {
selfLocation();
getList();
}
});
onLoad(() => {
try {
state.user_latitude = uni.getStorageSync(LATITUDE);
state.user_longitude = uni.getStorageSync(LONGITUDE);
console.log(state.user_latitude, state.user_longitude, "user_longitude");
} catch (e) {
// error
}
});
</script>
<style lang="scss" scoped>
.line1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.status {
background: rgba(214, 81, 42);
width: 40px;
text-align: center;
color: white;
border-radius: 3px;
margin-top: 5px;
font-size: 20rpx;
display:flex;
align-items:center;
justify-content:center;
}
.geoPage {
position: fixed;
width: 100%;
height: 100%;
top: 0;
z-index: 10000;
}
.line1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.storeBox {
width: 100%;
background-color: #fff;
padding: 0 30rpx;
}
.geoPage {
position: fixed;
width: 100%;
height: 100%;
top: 0;
z-index: 10000;
}
.storeBox-box {
width: 100%;
height: auto;
display: flex;
align-items: center;
padding: 23rpx 0;
justify-content: space-between;
border-bottom: 1px solid #eee;
}
.storeBox {
width: 100%;
}
.store-cent {
display: flex;
align-items: center;
width: 80%;
}
.storeBox-box {
background-color: #fff;
// width: 100%;
height: auto;
display: flex;
align-items: center;
padding: 23rpx;
justify-content: space-around;
border-bottom: 1px solid #eee;
margin: 10px 10px;
boeder-radius: 10px;
}
.store-cent-left {
width: 177px;
// flex: 2;
}
.store-cent {
display: flex;
align-items: center;
width: 80%;
}
.store-img {
// flex: 1;
width: 120rpx;
height: 120rpx;
border-radius: 6rpx;
margin-right: 22rpx;
}
.store-cent-left {
// width: 177px;
flex: 1;
max-width: 156px;
position: relative;
padding-right: 10px;
.store-img .img {
width: 100%;
height: 100%;
}
&::after {
position: absolute;
content: '';
width: 1px;
height: 100%;
background: rgba(223, 223, 223);
right: 0;
top: 0;
}
.store-name {
color: #282828;
font-size: 30rpx;
margin-bottom: 22rpx;
font-weight: 800;
}
}
.store-address {
color: #666666;
font-size: 24rpx;
}
.store-img {
// flex: 1;
width: 60px;
height: 60px;
border-radius: 6rpx;
margin-right: 22rpx;
}
.store-phone {
width: 50rpx;
height: 50rpx;
color: #fff;
border-radius: 50%;
display: block;
text-align: center;
line-height: 48rpx;
background-color: #e83323;
margin-bottom: 22rpx;
text-decoration: none;
}
.store-img .img {
width: 60px;
height: 60px;
border-radius: 31px;
}
.store-distance {
font-size: 22rpx;
color: #e83323;
}
.store-name {
color: #282828;
font-size: 26rpx;
margin-bottom: 5px;
font-weight: 800;
}
.iconfont {
font-size: 20rpx;
}
.store-address {
color: #666666;
font-size: 24rpx;
}
.row-right {
flex: 2;
//display: flex;
//flex-direction: column;
//align-items: flex-end;
//width: 33.5%;
}
</style>
.store-phone {
width: 50rpx;
height: 50rpx;
color: #fff;
border-radius: 50%;
display: block;
text-align: center;
line-height: 48rpx;
background-color: #e83323;
margin-bottom: 22rpx;
text-decoration: none;
}
.store-distance {
font-size: 22rpx;
color: #e83323;
flex-wrap: wrap;
.addressTxt {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.tb {
display: flex;
align-items: center;
justify-content: space-around;
.img {
width: 30px;
height: 30px;
}
}
}
.iconfont {
font-size: 20rpx;
}
.row-right {
// flex: 1;
margin-left: 10px;
//display: flex;
//flex-direction: column;
//align-items: flex-end;
//width: 33.5%;
}
</style>

45
pages/user/user_vip/agreement.vue Normal file
View File

@ -0,0 +1,45 @@
<!-- 会员信息 -->
<template>
<s-layout navbar="normal" title="会员协议">
<view class="main" v-html="data">
</view>
</s-layout>
</template>
<script setup>
import {
computed,
reactive,
onBeforeMount,
onMounted,
ref
} from 'vue';
import request from '@/sheep/request';
import {
baseUrl,
apiPath
} from '@/sheep/config';
import sheep from '@/sheep';
const data = ref([]);
request({
url: `${baseUrl}${apiPath}/member/paid-member-agree/get`,
method: 'GET',
params: {
},
custom: {
showLoading: false,
},
}).then((res) => {
data.value = res.data.content
});
// 使用 onMounted 生命周期钩子
onMounted(() => {
});
</script>
<style lang="scss" scoped>
.main{
width: 93%;
margin:10px auto;
}
</style>

25
pages/user/user_vip/index.vue
View File

@ -12,7 +12,7 @@
<view class="text acea-row row-middle">
<view class="name line1">
<!-- {{ userInfo.nickname }} -->
ai豆
{{userInfo.nickname}}
</view>
<!-- <view class="vip" v-if='userInfo.level'> -->
<view class="vip">
@ -20,7 +20,7 @@
<!-- {{ userInfo.level.name }} -->
白金会员
{{userInfo.level.name}}
</view>
</view>
</view>
@ -29,7 +29,7 @@
<zmxy-slideshow :items="levelList" :autoplay="false"></zmxy-slideshow>
<!-- TODO -->
<view class="experience">
<view class="title">当前经验值</view>
<view class="title">当前经验值:{{userInfo.experience}}</view>
<view class="num">
<!-- {{ userInfo.experience }} -->
</view>
@ -133,7 +133,8 @@
<view class="info line1">购买商品可获得对应是经验值</view>
</view>
</view>
<navigator url="/pages/index/category" class="button" hover-class="none">去获取</navigator>
<!-- <navigator class="button" hover-class="none" open-type='switchTab'>去获取</navigator> -->
<view class="button" @click="sheep.$router.redirect('/pages/index/category')">去获取</view>
</view>
</view>
</view>
@ -174,6 +175,10 @@
</template>
<script setup>
import {
computed
} from 'vue';
import sheep from '@/sheep';
import {
ref,
reactive,
@ -184,6 +189,8 @@
mapGetters
} from "vuex";
import getExper from '@/sheep/api/member/level';
const userInfo = computed(() => sheep.$store('user').userInfo);
console.log(userInfo.value,"isLoginisLogin")
// import dayjs from './dayjs/dayjs.min.js';
// const store = useStore();
@ -271,7 +278,7 @@
.swiper {
position: relative;
top: -353px;
top: -288px;
.new-img {
width: 90%;
@ -300,7 +307,7 @@
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 415px;
height: 348px;
background-color: #3b5086;
.picTxt {
@ -351,8 +358,8 @@
background-repeat: no-repeat;
background-size: 100% 100%;
width: 690rpx;
height: 360rpx;
margin: -315px auto 0 auto;
height: 144px;
margin: -275px auto 0 auto;
border-radius: 23rpx;
padding: 22rpx 27rpx;
box-sizing: border-box;
@ -535,7 +542,7 @@
.public_title {
color: #282828;
font-size: 30rpx;
align-items: center;
.icons {
width: 6rpx;
height: 28rpx;

194
pages/user/user_vip/list.vue
View File

@ -1,6 +1,7 @@
<!-- 会员信息 -->
<template>
<s-layout navbar="inner" title="SVIP会员专享" :statusBar="true" :bgStyle="{ color: '#FE832A', backgroundColor:'white' }" navbarbackgroundColor="rgba(57,55,54)">
<s-layout navbar="inner" title="SVIP会员专享" :statusBar="true" :bgStyle="{ color: '#FE832A', backgroundColor:'white' }"
navbarbackgroundColor="rgba(57,55,54)">
<view class='vip-main'>
<view class="vip-top">
<image
@ -14,15 +15,25 @@
<view class="t">{{ userInfo.nickname }}
<image src="" class="img"></image>
</view>
<view class="c">您与众悦e家商场的第101天</view>
<view class="b">开通即享会员权益</view>
<view class="c" v-if="!userInfo.activate">您与众悦e家商场的第101天</view>
<view class="b" v-if="!userInfo.activate">开通即享会员权益</view>
<view class="b" v-if="userInfo.activate">
<text v-if="userInfo.cardName != '永久'">
SVIP会员
{{ sheep.$helper.timeFormat(userInfo.cardExpirationTime, 'yyyy-mm-dd') }} 到期</text>
<text class="b" v-if="userInfo.cardName == '永久'">永久SVIP会员</text>
</view>
</view>
</view>
<view class="r">
开通会员
<view class="r" v-if="!userInfo.activate && userInfo.cardName != '永久'">
<text>立即开通</text>
</view>
<view class="r" v-if="userInfo.activate && userInfo.cardName != '永久'">
<text>续费会员</text>
</view>
</view>
<!-- <view class="vipLv" v-if="userInfo.activate">当前卡片：{{userInfo.cardName}}</view> -->
</view>
<view class="vip-zxq">
<image
@ -32,9 +43,7 @@
<view class="item" v-for="(item, index) in vipList2" :key="index">
<view class="new-nei">
<view class="l">
<image
:src="item.iconUrl"
class="l-img"></image>
<image :src="item.iconUrl" class="l-img"></image>
</view>
<view class="r">
<view class="t">
@ -52,30 +61,33 @@
</view>
</view>
<view class="vip-kt">
<view class="vip-kt" v-if="userInfo.cardName != '永久'">
<view class="top">
<text class="t1" v-if="userInfo.activate == 1">试用会员</text>
<text class="t1" v-if="userInfo.activate == 2">开通会员</text>
<!-- <text class="t1" v-if="userInfo.activate == 1">试用会员</text> -->
<text class="t1" v-if="!userInfo.activate">开通会员</text>
<text class="t2">有效期至</text>
<text class="t3">2024-10-24</text>
<text class="t3" v-if="timeAute">{{ timeAute }}</text>
<text class="t3" v-else>{{ sheep.$helper.timeFormat(userInfo.cardExpirationTime, 'yyyy-mm-dd') }}</text>
</view>
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
<view id="demo1" @click="vipFun(index,item.name)" class="scroll-view-item_H uni-bg-red" :class="valVip == index ? 'on' : ''" v-for="(item,index) in vipList" :key="index">
<view id="demo1" @click="vipFun(index,item.name)" class="scroll-view-item_H uni-bg-red"
:class="valVip == index ? 'on' : ''" v-for="(item,index) in vipList" :key="index">
<view class="t">{{item.name}}</view>
<view class="c">￥<text class="tx">{{item.specialPrice}}</text></view>
<view class="b" v-if="index==0">试用1天</view>
<view class="b" v-if="item.name=='试用'">试用1天</view>
<view class="b sc" v-else>￥{{item.originalPrice}}</view>
</view>
</scroll-view>
</view>
<view class="vip-text">
购买即视为同意《<text class="ts">会员用户协议</text>》
<view class="vip-text" v-if="userInfo.cardName != '永久'">
购买即视为同意《<text class="ts"
@click="sheep.$router.redirect('/pages/user/user_vip/agreement')">会员用户协议</text>》
</view>
<view class="vip-btn" @click="beclick()" v-if="userInfo.activate != 1">
<!-- <view class="vip-btn" @click="beclick()" v-if="!userInfo.activate">
立即试用
</view>
<view class="vip-btn" @click="beclick()" v-else>
</view> -->
<view class="vip-btn" @click="beclick()" v-if="userInfo.cardName != '永久'">
立即开通
</view>
</view>
@ -95,40 +107,51 @@
apiPath
} from '@/sheep/config';
import sheep from '@/sheep';
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const userInfo = computed(() => sheep.$store('user').userInfo);
const vipList = ref([]);
const vipList2 = ref([]);
const valVip = ref([]);
const valVip = ref(88888);
const nameVip = ref([]);
const timeAute = ref();
// 定义方法
function getList() {
request({
url: `${baseUrl}${apiPath}/member/card/type/list`,
method: 'GET',
params: {
},
params: {},
custom: {
showLoading: false,
},
}).then((res) => {
console.log(res,"sss")
vipList.value = res.data;
});
}
// vipFun
let data = {
cardName:nameVip.value
cardName: nameVip.value
}
function vipFun(index,name) {
function vipFun(index, name) {
valVip.value = index
data.cardName = name
if (name == '永久') {
timeAute.value = '永久会员';
} else {
timeAute.value = sheep.$helper.timeFormat(vipList.value[index].cardExpirationTime, 'yyyy-mm-dd');
}
console.log(userInfo.cardExpirationTime, "userInfo.cardExpirationTime")
}
// beclick
function beclick() {
console.log(data.cardName,"nameVip.value")
if (data.cardName == '') {
sheep.$helper.toast('请选择')
return;
};
request({
url: `${baseUrl}${apiPath}/pay/member/create`,
method: 'post',
@ -137,29 +160,36 @@
showLoading: false,
},
}).then((res) => {
console.log(res,"-----------试用---------------")
if(res.code == 200){
sheep.$helper.toast('试用开通成功');
sheep.$router.go('/pages/index/user')
}else{
if (res.code == 0) {
if (data.cardName == "试用") {
sheep.$helper.toast('试用开通成功');
// sheep.$router.go('/pages/index/user')
} else {
sheep.$router.go('/pages/pay/index', {
id: res.data.payOrderId,
type: 'vip',
vipid: res.data.id,
cardName: data.cardName
})
}
} else {
sheep.$helper.toast(res.msg);
}
});
}
// 定义方法2
function getList2() {
request({
url: `${baseUrl}${apiPath}/member/benefit/list`,
method: 'GET',
params: {
},
params: {},
custom: {
showLoading: false,
},
}).then((res) => {
console.log(res,"sss")
vipList2.value = res.data;
});
}
@ -179,6 +209,13 @@
// background: rgba(57, 55, 54);
position: relative;
.vipLv {
position: absolute;
bottom: 93px;
right: 10%;
color: #8a745c;
}
.img {
width: 100%;
height: 100%;
@ -209,7 +246,7 @@
.text {
.t {
font-size: 18px;
font-size: 16px;
font-weight: 700;
.img {
@ -225,7 +262,7 @@
.b {
color: rgba(201, 141, 99);
font-size: 13px;
font-size: 12px;
margin-top: 7px;
}
}
@ -233,18 +270,21 @@
.r {
color: #8a745c;
font-size: 15px;
padding: 5px 15px;
font-size: 12px;
padding: 5px 10px;
background: white;
border-radius: 15px;
border-radius: 0 11px 0 11px;
position: absolute;
right: 7px;
bottom: 64px;
}
}
}
.vip-zxq {
.img {
width: 77%;
height: 89px;
width: 63%;
height: 68px;
margin: 0 auto;
display: block;
margin-top: 20px;
@ -269,8 +309,8 @@
align-items: center;
.l-img {
width: 50px;
height: 50px;
width: 40px;
height: 40px;
margin-right: 10px;
}
}
@ -311,43 +351,52 @@
color: rgba(174, 90, 42);
}
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
.scroll-view-item_H {
width: 113px;
display: inline-block;
background-color: white;
border: 1px solid rgba(214,214,214);
margin-right:15px;
border: 1px solid rgba(214, 214, 214);
margin-right: 15px;
border-radius: 10px;
margin-top:15px;
padding:15px 0;
&.on{
background-color: rgba(254,247,236);
border: 1px solid rgba(252,194,130);
margin-top: 15px;
padding: 10px 3px;
width: 100px;
&.on {
background-color: rgba(254, 247, 236);
border: 1px solid rgba(252, 194, 130);
}
.t{
color:rgba(117,78,25);
.t {
color: rgba(117, 78, 25);
font-weight: 700;
font-size:20px;
font-size: 15px;
text-align: center;
}
.c{
color:rgba(117,78,25);
.c {
color: rgba(117, 78, 25);
// color: rgba(117, 78, 25);
font-weight: 700;
font-size:15px;
font-size: 15px;
text-align: center;
padding:10px 0;
.tx{
font-size:27px;
padding: 10px 0;
.tx {
font-size: 20px;
}
}
.b{
color:rgba(173,173,173);
font-size:16px;
.b {
color: rgba(173, 173, 173);
font-size: 14px;
text-align: center;
&.sc{
&.sc {
text-decoration: line-through;
}
}
@ -359,6 +408,7 @@
text-align: center;
color: rgba(157, 157, 157);
margin: 15px 0;
font-size: 13px;
.ts {
color: rgba(174, 90, 42);
@ -370,9 +420,9 @@
background: rgba(254, 220, 137);
text-align: center;
margin: 0 15px;
border-radius: 20px;
border-radius: 9px;
color: rgba(95, 53, 38);
}
}
</style>

84
pages/user/wallet/score.vue
View File

@ -1,12 +1,26 @@
<!-- 我的积分 -->
<template>
<s-layout class="wallet-wrap" title="我的积分" navbar="inner">
<s-layout class="wallet-wrap" title="我的积分" navbar="inner" :bgStyle="{ backgroundColor: '#fff'}">
<view class="header-box ss-flex ss-flex-col ss-row-center ss-col-center" :style="[
{
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
paddingTop: Number(statusBarHeight + 88) + 'rpx',
},
]">
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between" :style="[{top: Number(statusBarHeight + 88) + 'rpx'}]" v-if="state.isShow == 1">
<uni-datetime-picker v-model="state.date" type="daterange" @change="onChangeTime" :end="state.today">
<button class="ss-reset-button date-btn">
<text>{{ dateFilterText }}</text>
<text class="cicon-drop-down ss-seldate-icon"></text>
</button>
</uni-datetime-picker>
<!-- TODO 芋艿：优化 -->
<!-- <view class="total-box">-->
<!-- <view class="ss-m-b-10">总收入￥{{ state.pagination.income }}</view>-->
<!-- <view>总支出￥{{ -state.pagination.expense }}</view>-->
<!-- </view>-->
</view>
<view class="header-bg">
<view class="bg" />
</view>
@ -19,12 +33,12 @@
<view class="new-point">
<view class="l">
<view class="b">1000</view>
<view class="c">累计积分（带对接接口）</view>
<view class="b">{{state.pointData?.addUp}}</view>
<view class="c">累计积分</view>
</view>
<view class="l">
<view class="b">1000</view>
<view class="c">累计消费（带对接接口）</view>
<view class="b">{{state.pointData?.reduce}}</view>
<view class="c">累计消费</view>
</view>
<view class="l">
<view class="b">0</view>
@ -56,20 +70,7 @@
<!-- tab -->
<!-- <su-sticky :customNavHeight="sys_navBar"> -->
<!-- 统计 -->
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between" v-if="state.isShow == 1">
<uni-datetime-picker v-model="state.date" type="daterange" @change="onChangeTime" :end="state.today">
<button class="ss-reset-button date-btn">
<text>{{ dateFilterText }}</text>
<text class="cicon-drop-down ss-seldate-icon"></text>
</button>
</uni-datetime-picker>
<!-- TODO 芋艿：优化 -->
<!-- <view class="total-box">-->
<!-- <view class="ss-m-b-10">总收入￥{{ state.pagination.income }}</view>-->
<!-- <view>总支出￥{{ -state.pagination.expense }}</view>-->
<!-- </view>-->
</view>
<!-- <su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="state.currentTab"></su-tabs> -->
<!-- </su-sticky> -->
<!-- icon -->
@ -114,6 +115,11 @@
</template>
<script setup>
import request from '@/sheep/request';
import {
baseUrl,
apiPath
} from '@/sheep/config';
import sheep from '@/sheep';
import {
onLoad,
@ -145,7 +151,8 @@
loadStatus: '',
date: [],
today: '',
isShow: 1
isShow: 1,
pointData:[]
});
const tabMaps = [{
@ -169,6 +176,18 @@
return state.date.join('~');
}
});
//
//
function brandlists3() {
request({
url: `${baseUrl}${apiPath}/member/point/record/getPointInfo`,
method: 'GET',
}).then((res) => {
console.log(res, "------brandList3---------");
state.pointData = res.data;
});
}
async function getLogList() {
state.loadStatus = 'loading';
@ -194,6 +213,7 @@
state.today = dayjs().format('YYYY-MM-DD');
state.date = [state.today, state.today];
getLogList();
brandlists3();
});
function onChange(e) {
@ -247,9 +267,9 @@
}
.c {
font-size: 18px;
font-size: 15px;
color: rgba(198, 179, 114);
width: 50%;
width: 40%;
font-weight: 700;
line-height: 26px;
}
@ -270,7 +290,7 @@
background-size: 750rpx 100%;
padding: 0 0 0 0;
box-sizing: border-box;
position:relative;
.new-tab {
width: 100%;
display: flex;
@ -282,7 +302,7 @@
align-items: center;
justify-content: center;
width: 45%;
padding: 13px 0;
padding: 9px 0;
background: rgba(247, 247, 247);
border-radius: 10px 0 0 0;
@ -292,8 +312,8 @@
.img,
.img2 {
width: 25px;
height: 25px;
width: 20px;
height: 20px;
margin-right: 5px;
}
@ -314,8 +334,9 @@
}
.tx {
font-size: 18px;
font-size: 16px;
font-weight: 700;
color:rgba(187,187,187);
}
}
@ -377,7 +398,8 @@
height: 114rpx;
background-color: $bg-page;
background: rgb(193, 145, 81);
position:absolute;
left:-20px;
.total-box {
font-size: 24rpx;
font-weight: 500;
@ -385,13 +407,13 @@
}
.date-btn {
background-color: $white;
background-color: rgb(254, 242, 219);
line-height: 54rpx;
border-radius: 27rpx;
border-radius:0 27rpx 27rpx 0;
padding: 0 20rpx;
font-size: 24rpx;
font-weight: 500;
color: $dark-6;
color: rgba(137,118,76);
.ss-seldate-icon {
font-size: 50rpx;

4
sheep/api/pay/channel.js
View File

@ -2,11 +2,11 @@ import request from '@/sheep/request';
const PayChannelApi = {
// 获得指定应用的开启的支付渠道编码列表
getEnableChannelCodeList: (appId) => {
getEnableChannelCodeList: (appId, hideWalletPay) => {
return request({
url: '/pay/channel/get-enable-code-list',
method: 'GET',
params: { appId },
params: { appId, hideWalletPay:hideWalletPay },
});
},
};

3
sheep/api/trade/delivery.js
View File

@ -9,9 +9,10 @@ const DeliveryApi = {
});
},
// 获得自提门店列表
getDeliveryPickUpStoreList: () => {
getDeliveryPickUpStoreList: (data) => {
return request({
url: `/trade/delivery/pick-up-store/list`,
params:data,
method: 'get',
});
},

305
sheep/components/s-address-item/s-address-item.vue
View File

@ -1,110 +1,225 @@
<!-- 地址卡片 -->
<template>
<view
class="address-item ss-flex ss-row-between ss-col-center"
:class="[{ 'border-bottom': props.hasBorderBottom }]"
>
<view class="item-left" v-if="!isEmpty(props.item)">
<view class="area-text ss-flex ss-col-center">
<uni-tag
class="ss-m-r-10"
size="small"
custom-style="background-color: var(--ui-BG-Main); border-color: var(--ui-BG-Main); color: #fff;"
v-if="props.item.defaultStatus"
text="默认"
/>
{{ props.item.areaName }}
</view>
<view class="address-text">
{{ props.item.detailAddress }}
</view>
<view class="person-text"> {{ props.item.name }} {{ props.item.mobile }} </view>
</view>
<view v-else>
<view class="address-text ss-m-b-10">请选择收货地址</view>
</view>
<slot>
<button class="ss-reset-button edit-btn" @tap.stop="onEdit">
<view class="edit-icon ss-flex ss-row-center ss-col-center">
<image :src="sheep.$url.static('/static/img/shop/user/address/edit.png')" />
</view>
</button>
</slot>
</view>
<view class="address-item ss-flex ss-row-between ss-col-center"
:class="[{ 'border-bottom': props.hasBorderBottom }]">
<image class="imgs"
src="https://zysc.fjptzykj.com:3000/shangcheng/0f01dda22fb349c40c4659d73cb346a1423fee44c9d53eb07bdae1a1e11b5299.png">
</image>
<view class="item-left" v-if="!isEmpty(props.item)">
<!-- <view class="area-text ss-flex ss-col-center">
<uni-tag
class="ss-m-r-10"
size="small"
custom-style="background-color: var(--ui-BG-Main); border-color: var(--ui-BG-Main); color: #fff;"
v-if="props.item.defaultStatus"
text="默认"
/>
{{ props.item.areaName }}
</view> -->
<view class="address-text">
收货人：{{ props.item.name }} {{ props.item.mobile }}
</view>
<view class="person-text">收货地址： {{ props.item.areaName }} {{ props.item.detailAddress }}</view>
</view>
<view v-else>
<view class="address-text ss-m-b-10">请选择收货地址</view>
</view>
<slot>
<!-- <button class="ss-reset-button edit-btn" @tap.stop="onEdit">
<view class="edit-icon ss-flex ss-row-center ss-col-center">
<image
:src="sheep.$url.static('https://zysc.fjptzykj.com:3000/shangcheng/f6c484a459e843baeb729603ae221b6d3ab384b56c2d891ae53b0ee4205477a9.png')" />
</view>
</button> -->
</slot>
<view class="bottom">
<view class="left" @click.stop="auto(props.item)">
<view class="radio">
<image class="img"
v-if="props.item.defaultStatus"
src="https://zysc.fjptzykj.com:3000/shangcheng/1d07aff7a6a0a3a5f09ed68407bd4bb9c589b62dba04b23d61b7027453b2894e.png">
</image>
</view>设为默认
</view>
<view class='right'>
<view class="edit-icon" @click.stop="onEdit">
<image class="img"
src="https://zysc.fjptzykj.com:3000/shangcheng/82a9c12d309bf1a7f11e581ac31230e3847f2aaf2f31591b4d3aed7ee506ff54.png" />
编辑
</view>
<view class="edit-icon" @click.stop="onDelete(props.item.id)">
<image class="img"
src="https://zysc.fjptzykj.com:3000/shangcheng/efbc57f84ba2740666f17f3cfcd1b607af5e3c520eca27814e5cda11c9715494.png" />
删除
</view>
</view>
</view>
</view>
</template>
<script setup>
/**
* 基础组件 - 地址卡片
*
* @param {String} icon = _icon-edit - icon
*
* @event {Function()} click - 点击
* @event {Function()} actionClick - 点击工具栏
*
* @slot - 默认插槽
*/
import sheep from '@/sheep';
import { isEmpty } from 'lodash';
const props = defineProps({
item: {
type: Object,
default() {},
},
hasBorderBottom: {
type: Boolean,
defult: true,
},
});
/**
* 基础组件 - 地址卡片
*
* @param {String} icon = _icon-edit - icon
*
* @event {Function()} click - 点击
* @event {Function()} actionClick - 点击工具栏
*
* @slot - 默认插槽
*/
import sheep from '@/sheep';
import AddressApi from '@/sheep/api/member/address';
import {
isEmpty
} from 'lodash';
const emits = defineEmits(['cc']);
const props = defineProps({
item: {
type: Object,
default () {},
},
hasBorderBottom: {
type: Boolean,
defult: true,
},
});
const onEdit = () => {
sheep.$router.go('/pages/user/address/edit', {
id: props.item.id,
});
};
// 删除收货地址
const onDelete = (id) => {
uni.showModal({
title: '提示',
content: '确认删除此收货地址吗？',
success: async function (res) {
if (!res.confirm) {
return;
}
const { code } = await AddressApi.deleteAddress(id);
if (code === 0) {
emits("cc", "2222")
}
},
});
};
const onEdit = () => {
sheep.$router.go('/pages/user/address/edit', {
id: props.item.id,
});
};
function auto(item){
item.defaultStatus = !item.defaultStatus;
AddressApi.updateAddress(item).then((res)=>{
emits("cc", "2222")
})
}
</script>
<style lang="scss" scoped>
.address-item {
padding: 24rpx 30rpx;
.address-item {
background: white;
padding: 24rpx 30rpx;
position: relative;
flex-wrap: wrap;
padding-bottom: 0;
.item-left {
width: 600rpx;
}
.bottom {
width: 100%;
display: flex;
justify-content: space-between;
margin: 10px 0;
.area-text {
font-size: 26rpx;
font-weight: 400;
color: $dark-9;
}
.img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.address-text {
font-size: 32rpx;
font-weight: 500;
color: #333333;
line-height: 48rpx;
}
.left {
display: flex;
align-items: center;
font-size: 15px;
font-weight: 500;
.radio {
border: 1px solid #dddddd;
border-radius: 50%;
width: 20px;
height: 20px;
margin-right: 10px;
}
}
.person-text {
font-size: 28rpx;
font-weight: 400;
color: $dark-9;
}
}
.right {
display: flex;
align-items: center;
.edit-btn {
width: 44rpx;
height: 44rpx;
background: $gray-f;
border-radius: 50%;
.edit-icon {
display: flex;
align-items: center;
font-size: 15px;
font-weight: 500;
.img {
margin-right: 5px;
}
.edit-icon {
width: 24rpx;
height: 24rpx;
}
}
image {
width: 100%;
height: 100%;
}
</style>
&:first-child {
margin-right: 20px;
}
}
}
}
.imgs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
.item-left {
width: 100%;
border-bottom: 1px solid #fafafa;
padding: 6px 0;
padding-bottom: 13px;
}
.area-text {
font-size: 26rpx;
font-weight: 400;
color: $dark-9;
}
.address-text {
font-size: 15px;
font-weight: 600;
color: #333333;
line-height: 48rpx;
margin-bottom: 8px;
}
.person-text {
font-size: 15px;
font-weight: 500;
color: $dark-9;
}
}
.edit-btn {
width: 44rpx;
height: 44rpx;
background: $gray-f;
border-radius: 50%;
.edit-icon {
width: 24rpx;
height: 24rpx;
}
}
image {
width: 100%;
height: 100%;
}
</style>

14
sheep/components/s-block-item/s-block-item.vue
View File

@ -31,7 +31,7 @@
<s-hotzone-block v-if="type === 'HotZone'" :data="data" :styles="styles" />
<!-- 商品组件：商品卡片 -->
<s-goods-card v-if="type === 'ProductCard'" :data="data" :styles="styles" />
<s-goods-card v-if="type === 'ProductCard'" :data="data" :styles="styles" :fl="fl" />
<!-- 商品组件：商品栏 -->
<s-goods-shelves v-if="type === 'ProductList'" :data="data" :styles="styles" />
@ -45,6 +45,8 @@
<s-live-block v-if="type === 'MpLive'" :data="data" :styles="styles" />
<!-- 营销组件：优惠券 -->
<s-coupon-block v-if="type === 'CouponCard'" :data="data" :styles="styles" />
<!-- 营销组件：魔方 -->
<s-mof-block v-if="type === 'MenuGridTow'" :data="data" :styles="styles" />
<!-- 营销组件：文章 -->
<!-- <s-richtext-block v-if="type === 'PromotionArticle'" :data="data" :styles="styles" /> -->
<view class="floxt" v-if="type === 'PromotionArticle'">
@ -68,10 +70,8 @@
<view v-if="type === 'UserOrder'" class="new-huiy" @click="
sheep.$router.go('/pages/user/user_vip/list')
">
<view class="new-button" v-if="userInfo.activate == 1">正在试用</view>
<view class="new-button" v-if="userInfo.activate == 2">开通</view>
<view class="new-button" v-if="userInfo.activate == 3">永久</view>
<view class="new-button" v-if="userInfo.activate == 0">立即开通</view>
<view class="new-button" v-if="userInfo.activate && userInfo.activate != 4">已开通</view>
<view class="new-button" v-if="userInfo.activate == 0 || userInfo.activate == 4">立即开通</view>
<image class="seckill1" mode="aspectFit"
src="https://zysc.fjptzykj.com:3000/shangcheng/64776e2edc3c2f15295e7c3976ba301e08f9170f99a2e845d8f33bd65179b177.png" />
</view>
@ -123,6 +123,10 @@
type: Object,
default () {},
},
fl: {
type: Boolean,
default: false,
}
});
function path(id) {

621
sheep/components/s-goods-card/s-goods-card.vue
View File

@ -1,292 +1,371 @@
<!-- 装修商品组件：商品卡片 -->
<template>
<!-- 商品卡片 -->
<view>
<!-- 布局1. 单列大图（上图，下内容）-->
<view
v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length"
class="goods-sl-box"
>
<view
class="goods-box"
v-for="item in state.goodsList"
:key="item.id"
:style="[{ marginBottom: data.space * 2 + 'rpx' }]"
>
<s-goods-column
class=""
size="sl"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<!-- 商品卡片 -->
<view>
<view class="new-fenlei" v-if="fl">
<view class="list" :class="state.isShow == 'recommendNew' ? 'on' : ''" @click="classValue('recommendNew')">
<view class="t">首页新品</view>
<view class="b">最新出炉</view>
</view>
<view class="list" :class="state.isShow == 'recommendBest' ? 'on' : ''" @click="classValue('recommendBest')">
<view class="t">精品推荐</view>
<view class="b">猜你喜欢</view>
</view>
<view class="list" :class="state.isShow == 'recommendHot' ? 'on' : ''" @click="classValue('recommendHot')">
<view class="t">热门榜单</view>
<view class="b">好评如云</view>
</view>
<view class="list" :class="state.isShow == 'recommendGood' ? 'on' : ''" @click="classValue('recommendGood')">
<view class="t">促销单品</view>
<view class="b">多买多销</view>
</view>
</view>
<!-- 布局1. 单列大图（上图，下内容）-->
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length" class="goods-sl-box">
<!-- 布局2. 双列（每一列：上图，下内容）-->
<view
v-if="layoutType === LayoutTypeEnum.TWO_COL && state.goodsList.length"
class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
>
<view class="goods-list-box">
<view
class="left-list"
:style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
v-for="item in state.leftGoodsList"
:key="item.id"
>
<s-goods-column
class="goods-md-box"
size="md"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="calculateGoodsColumn($event, 'left')"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<view class="goods-list-box">
<view
class="right-list"
:style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
v-for="item in state.rightGoodsList"
:key="item.id"
>
<s-goods-column
class="goods-md-box"
size="md"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@getHeight="calculateGoodsColumn($event, 'right')"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
</view>
<view class="goods-box" v-for="item in state.goodsList" :key="item.id"
:style="[{ marginBottom: data.space * 2 + 'rpx' }]">
<s-goods-column class="" size="sl" :goodsFields="data.fields" :tagStyle="data.badge" :data="item"
:titleColor="data.fields.name?.color" :subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })">
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<!-- 布局3. 单列小图（左图，右内容） -->
<view
v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length"
class="goods-lg-box"
>
<view
class="goods-box"
:style="[{ marginBottom: data.space + 'px' }]"
v-for="item in state.goodsList"
:key="item.id"
>
<s-goods-column
class="goods-card"
size="lg"
:goodsFields="data.fields"
:data="item"
:tagStyle="data.badge"
:titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
</view>
<!-- 布局2. 双列（每一列：上图，下内容）-->
<view v-if="layoutType === LayoutTypeEnum.TWO_COL && state.goodsList.length"
class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top">
<view class="goods-list-box">
<view class="left-list" :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
v-for="item in state.leftGoodsList" :key="item.id">
<!-- <view class="left-list" :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
v-for="item in state.goodsList" :key="item.id"> -->
<s-goods-column class="goods-md-box" size="md" :goodsFields="data.fields" :tagStyle="data.badge"
:data="item" :titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<view class="goods-list-box">
<view class="right-list" :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
v-for="item in state.rightGoodsList" :key="item.id">
<s-goods-column class="goods-md-box" size="md" :goodsFields="data.fields" :tagStyle="data.badge"
:data="item" :titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
</view>
<!-- 布局3. 单列小图（左图，右内容） -->
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length" class="goods-lg-box">
<view class="goods-box" :style="[{ marginBottom: data.space + 'px' }]" v-for="item in state.goodsList"
:key="item.id">
<s-goods-column class="goods-card" size="lg" :goodsFields="data.fields" :data="item"
:tagStyle="data.badge" :titleColor="data.fields.name?.color"
:subTitleColor="data.fields.introduction.color" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@tap="sheep.$router.go('/pages/goods/index', { id: item.id })">
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
</view>
</template>
<script setup>
/**
* 商品卡片
*/
import { computed, reactive, onMounted } from 'vue';
import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
import request from '@/sheep/request';
import {
baseUrl,
apiPath
} from '@/sheep/config';
/**
* 商品卡片
*/
import {
computed,
reactive,
onMounted
} from 'vue';
import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
// 布局类型
const LayoutTypeEnum = {
// 单列大图
ONE_COL_BIG_IMG: 'oneColBigImg',
// 双列
TWO_COL: 'twoCol',
// 单列小图
ONE_COL_SMALL_IMG: 'oneColSmallImg',
};
// 布局类型
const LayoutTypeEnum = {
// 单列大图
ONE_COL_BIG_IMG: 'oneColBigImg',
// 双列
TWO_COL: 'twoCol',
// 单列小图
ONE_COL_SMALL_IMG: 'oneColSmallImg',
};
const state = reactive({
goodsList: [],
leftGoodsList: [],
rightGoodsList: [],
});
const props = defineProps({
data: {
type: Object,
default() {},
},
styles: {
type: Object,
default() {},
},
});
const state = reactive({
goodsList: [],
leftGoodsList: [],
rightGoodsList: [],
isShow:'recommendNew',
count:0
});
const props = defineProps({
data: {
type: Object,
default () {},
},
styles: {
type: Object,
default () {},
},
fl: {
type: Boolean,
default: false,
},
});
const { layoutType, btnBuy, spuIds } = props.data ?? {};
const { marginLeft, marginRight } = props.styles ?? {};
const {
layoutType,
btnBuy,
spuIds
} = props.data ?? {};
const {
marginLeft,
marginRight
} = props.styles ?? {};
// 购买按钮样式
const buyStyle = computed(() => {
if (btnBuy.type === 'text') {
// 文字按钮：线性渐变背景颜色
return {
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
};
}
if (btnBuy.type === 'img') {
// 图片按钮
return {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
};
}
});
// 购买按钮样式
const buyStyle = computed(() => {
if (btnBuy.type === 'text') {
// 文字按钮：线性渐变背景颜色
return {
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
};
}
if (btnBuy.type === 'img') {
// 图片按钮
return {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
};
}
});
//region 商品瀑布流布局
// 下一个要处理的商品索引
let count = 0;
// 左列的高度
let leftHeight = 0;
// 右列的高度
let rightHeight = 0;
//region 商品瀑布流布局
// 下一个要处理的商品索引
// let count = 0;
// 左列的高度
let leftHeight = 0;
// 右列的高度
let rightHeight = 0;
/**
* 计算商品在左列还是右列
* @param height 商品的高度
* @param where 添加到哪一列
*/
function calculateGoodsColumn(height = 0, where = 'left') {
// 处理完
if (!state.goodsList[count]) return;
// 增加列的高度
if (where === 'left') leftHeight += height;
if (where === 'right') rightHeight += height;
// 添加到矮的一列
if (leftHeight <= rightHeight) {
state.leftGoodsList.push(state.goodsList[count]);
} else {
state.rightGoodsList.push(state.goodsList[count]);
}
// 计数
count++;
}
//endregion
/**
* 计算商品在左列还是右列
* @param height 商品的高度
* @param where 添加到哪一列
*/
function calculateGoodsColumn() {
// 处理完
// if (!state.goodsList[state.count]) return;
// 增加列的高度
// if (where === 'left') leftHeight += height;
// if (where === 'right') rightHeight += height;
// 添加到矮的一列
if (state.count % 2 == 0) {
state.leftGoodsList.push(state.goodsList[state.count]);
} else {
state.rightGoodsList.push(state.goodsList[state.count]);
}
// console.log();
// 计数
state.count++;
}
//endregion
/**
* 根据商品编号列表，获取商品列表
* @param ids 商品编号列表
* @return {Promise<undefined>} 商品列表
*/
async function getGoodsListByIds(ids) {
const { data } = await SpuApi.getSpuListByIds(ids);
return data;
}
// 初始化
onMounted(async () => {
// 加载商品列表
state.goodsList = await getGoodsListByIds(spuIds.join(','));
// 只有双列布局时需要
if (layoutType === LayoutTypeEnum.TWO_COL) {
// 分列
calculateGoodsColumn();
}
});
/**
* 根据商品编号列表，获取商品列表
* @param ids 商品编号列表
* @return {Promise<undefined>} 商品列表
*/
async function getGoodsListByIds(ids) {
const {
data
} = await SpuApi.getSpuListByIds(ids);
return data;
}
// 分类的数据
function classValue(val) {
state.isShow = val;
request({
url: `${baseUrl}${apiPath}/product/spu/getActivityGoods`,
method: 'GET',
params: {
// projectdayId: this.brandId4,
// technicianId: this.brandId3
activityType:val
},
custom: {
showLoading: false,
},
}).then((res) => {
// 分列
leftHeight = 0;
rightHeight = 0;
// state.goodsList = [];
state.goodsList = res.data;
state.count = 0
// console.log(state.goodsList,"-----state.goodsList")
state.leftGoodsList = []
state.rightGoodsList = []
// 重新计算商品列
res.data.forEach((item) => {
calculateGoodsColumn();
});
});
}
// 初始化
onMounted(async () => {
if(props.fl){
}
// 加载商品列表
if(!props.fl){
state.goodsList = await getGoodsListByIds(spuIds.join(','));
// 只有双列布局时需要
if (layoutType === LayoutTypeEnum.TWO_COL) {
// 分列
calculateGoodsColumn();
}
}else{
classValue("recommendNew");
}
});
</script>
<style lang="scss" scoped>
.goods-md-wrap {
width: 100%;
}
.new-fenlei {
width: 100%;
display: flex;
margin:10px 0;
justify-content: space-around;
.list {
width: 24%;
&.on{
.t {
color: #e93422;
}
.b {
background: #e93422;
color:white;
}
}
.t {
text-align: center;
font-size: 16px;
}
.goods-list-box {
width: 50%;
box-sizing: border-box;
.left-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
.right-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
}
.b {
// background: rgba(255, 102, 7);
text-align: center;
color: rgba(153,153,153);
border-radius: 15px;
width: 63%;
margin: 0 auto;
font-size: 12px;
margin-top:5px;
}
}
}
.goods-box {
&:nth-last-of-type(1) {
margin-bottom: 0 !important;
}
}
// .goods-md-wrap {
// width: 100%;
// }
.goods-md-box,
.goods-sl-box,
.goods-lg-box {
position: relative;
.goods-list-box {
width: 50%;
box-sizing: border-box;
::v-deep &{
.left-list, .right-list{
// width:48%;
}
.left-list:nth-child(3n+2){
margin-right:0;
}
}
.left-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
.cart-btn {
position: absolute;
bottom: 18rpx;
right: 20rpx;
z-index: 11;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
}
}
</style>
.right-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
}
.goods-box {
&:nth-last-of-type(1) {
margin-bottom: 0 !important;
}
}
.goods-md-box,
.goods-sl-box,
.goods-lg-box {
position: relative;
.cart-btn {
position: absolute;
bottom: 18rpx;
right: 20rpx;
z-index: 11;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #fff;
}
}
</style>

11
sheep/components/s-goods-column/s-goods-column.vue
View File

@ -170,8 +170,8 @@
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view>
<!-- <view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center">秒杀</view> -->
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
<view class="tag-icon">拼团</view>
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center" :class="state.themeType ? state.themeType : ''">
<view class="tag-icon" :class="state.themeType ? state.themeType : ''">拼团</view>
</view>
<image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill" />
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ">
@ -350,6 +350,7 @@
*
*/
import {
reactive,
computed,
getCurrentInstance,
nextTick,
@ -369,7 +370,11 @@
import {
PromotionActivityTypeEnum
} from '@/sheep/util/const';
const app = computed(() => sheep.$store('app'));
const state = reactive({
themeType:app.value.platform.themeType
});
// console.log(PromotionActivityTypeEnum,"PromotionActivityTypeEnum")
// 接收参数
const props = defineProps({
goodsFields: {

2
sheep/components/s-groupon-block/s-groupon-block.vue
View File

@ -147,7 +147,7 @@
data: activity
} = await CombinationApi.getCombinationActivity(props.data.activityId);
const ss = await SpuApi.getSpulist();
console.log(ss, "getSpuListByIds")
// console.log(ss, "getSpuListByIds")
productList.value = ss.data;
});
</script>

283
sheep/components/s-mof-block/s-mof-block.vue Normal file
View File

@ -0,0 +1,283 @@
<!-- 全局 - 快捷入口 -->
<template>
<view class='new_czbk'>
<view class="t">
<text class="left-font">超值爆款</text>
<view class="sub">美好生活由此开始</view>
</view>
<view class="new-list">
<!-- <view class="item" @click="sheep.$router.go('/pages/goods/sales', {
activityType: 'recommendBest',
});"> -->
<view class="item" @click="sheep.$router.go(`${props.data.list[0].url}`);">
<view class="nei">
<view class="l">
<view class="t">今日推荐</view>
<view class="c">店主诚意推荐品质商品</view>
<view class="b">
<!-- GO! -->
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/40a7582be7aeb5a6047415ab3a6728439a2798a4752ffcc1c063d66a534aa630.png"
class="img"></image>
</view>
</view>
<view class="r">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/c80faeeeb2d6dadcdbe7e6d1a4caa06869b94301612cdf157414a10559b38267.png"
class="img"></image>
</view>
</view>
</view>
<!-- <view class="item" @click="sheep.$router.go('/pages/goods/sales', {
activityType: 'recommendHot',
});"> -->
<view class="item" @click="sheep.$router.go(`${props.data.list[1].url}`);">
<view class="nei">
<view class="l">
<view class="t">热门榜单</view>
<view class="c">店主诚意推荐品质商品</view>
<view class="b">
<!-- GO! -->
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/5c72fc99989bf0a7e59b57f519c76c9a98cb20478384e20b1b934aa8f80cc598.png"
class="img"></image>
</view>
</view>
<view class="r">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/904fd4848fde8025ccc17693662efd5b7bf5ec3f2656ecc7de407c8c46f910b2.png"
class="img"></image>
</view>
</view>
</view>
<!-- <view class="item" @click="sheep.$router.go('/pages/goods/sales', {
activityType: 'recommendNew',
});"> -->
<view class="item" @click="sheep.$router.go(`${props.data.list[2].url}`);">
<view class="nei">
<view class="l">
<view class="t">首发新品</view>
<view class="c">新品上架等 你来拿</view>
<view class="b">
<!-- GO! -->
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/ebb2fc0512d1bd6a6d21a2c07f6603bfd2ea6f7e23377eb4cd8118d89d666589.png"
class="img"></image>
</view>
</view>
<view class="r">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/7c71cbf2c757418302ea9ef2952893c24e1d46c4cc35a821f56be0f315bcabb0.png"
class="img"></image>
</view>
</view>
</view>
<!-- <view class="item" @click="sheep.$router.go('/pages/goods/sales', {
activityType: 'recommendGood',
});"> -->
<view class="item" @click="sheep.$router.go(`${props.data.list[3].url}`);">
<view class="nei">
<view class="l">
<view class="t">促销单品</view>
<view class="c">综合评选好 产品</view>
<view class="b">
<!-- GO! -->
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/aac8baa7a6feb9ee3459d1cf75ba9a7e8bacb5d93c88ac95c1b0ecd29b847f96.png"
class="img"></image>
</view>
</view>
<view class="r">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/8a61c35d82702c61f97ef3db43a8d6755b2eca3d78a22dbaa55851e815e96a23.png"
class="img"></image>
</view>
</view>
</view>
<view style="clear:both;"></view>
</view>
</view>
</template>
<script setup>
import {
reactive,
computed
} from 'vue';
import sheep from '@/sheep';
import {
showMenuTools,
closeMenuTools
} from '@/sheep/hooks/useModal';
// 接受参数
const props = defineProps({
data: {
type: Object,
default: {},
}
});
console.log("====++++=====",props.data)
const show = computed(() => sheep.$store('modal').menu);
function onClick(item) {
closeMenuTools();
if (item.url) sheep.$router.go(item.url);
}
const list = [{
url: '/pages/index/index',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f4e03230b5cb9b2bf789b67df43125af1b3cef9c2abf4d8bca8f6fa5ded16a20.png',
title: '首页',
},
{
url: '/pages/index/search',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/96a288f2a0043c8defaa37e922828b3092ba785e1c191bf18f20dbd462261f7a.png',
title: '搜索',
},
{
url: '/pages/index/user',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/227699332b8ae736e220852e60215072eb2805478dab4909e085f89aeb3604cf.png',
title: '个人中心',
},
{
url: '/pages/index/cart',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/a45981116198a65db5f28ffd070f0078cfa66ac932a0136bf45ba7e8f401a1d0.png',
title: '购物车',
},
{
url: '/pages/user/goods-log',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/7e5ecfb841f2d89b778e1070ef867c17ccda48a5fea14a149f8eb1ce6aa26a87.png',
title: '浏览记录',
},
{
url: '/pages/user/goods-collect',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/9f83f4dc3cbf8b1e8e747f8dd79a260feaf65fa9ef3f2e2224015779f85119a1.png',
title: '我的收藏',
},
{
url: '/pages/chat/index',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/739f3165045b1552b71176297dab45eda2e192b976e25b1a458a8781a61b7557.png',
title: '客服',
},
];
</script>
<style lang="scss" scoped>
.new_czbk {
width: 100%;
background: rgba(255, 229, 227);
border-radius: 5px;
margin: 0 auto;
padding: 5px 0;
// margin-top: 10px;
padding-bottom: 10px;
padding-top: 10px;
&>.t {
display: flex;
align-items: center;
padding: 0 10px;
.left-font {
color: rgba(252, 60, 62);
font-size: 17px;
font-weight: 700;
}
.sub {
background: rgba(248, 79, 43);
color: white;
border-radius: 20px 0px 20px 0px;
padding: 0 13px;
margin-left: 10px;
font-size: 13px;
}
}
.new-list {
// width: 100%;
margin-right: 10px;
.item {
float: left;
width: 50%;
.nei {
margin: 10px;
margin-right: 0;
margin-bottom: 0;
background: white;
border-radius: 10px;
padding: 8px 10px;
display: flex;
.l {
width: 50%;
.t {
// font-size: 17px;
}
.c {
color: rgba(153, 153, 153);
font-size: 12px;
margin: 3px 0;
}
.b {
// display: flex;
// align-items: center;
// justify-content: space-around;
// background: #329cff;
// margin: 0 3px;
// border-radius: 15px;
// color: white;
// font-weight: 700;
// padding: 0px 9px;
// font-style: oblique;
.img {
width: 76%;
height: 20px;
}
}
}
.r {
width: 49%;
.img {
width: 100%;
height: 100%;
}
}
}
}
}
}
// @media (max-width: 435px) {
// .new_czbk {
// .new-list {
// .item {
// width: 47%;
// }
// }
// }
// }
// @media (max-width: 379px) {
// .new_czbk {
// .new-list {
// .item {
// width: 46%;
// }
// }
// }
// }
</style>

285
sheep/components/s-order-card/s-order-card.vue
View File

@ -16,11 +16,7 @@
:key="item.title" @tap="sheep.$router.go(item.path, { type: item.value })">
<uni-badge class="uni-badge-left-margin" :text="numData.orderCount[item.count]" absolute="rightTop"
size="small">
<image v-if="index == 0" class="item-icon" :src="imag0" mode="aspectFit" />
<image v-if="index == 1" class="item-icon" :src="imag1" mode="aspectFit" />
<image v-if="index == 2" class="item-icon" :src="imag2" mode="aspectFit" />
<image v-if="index == 3" class="item-icon" :src="imag3" mode="aspectFit" />
<image v-if="index == 4" class="item-icon" :src="imag4" mode="aspectFit" />
<image class="item-icon" :src="item.icon" mode="aspectFit" />
</uni-badge>
<view class="menu-title">{{ item.title }}</view>
</view>
@ -39,57 +35,238 @@
*/
import sheep from '@/sheep';
import {
computed
computed,
reactive,
ref
} from 'vue';
const app = computed(() => sheep.$store('app'));
const state = reactive({
themeType: app.value.platform.themeType
});
const orderMap = ref([]);
if (state.themeType == 'lv') {
orderMap.value = [{
title: '待付款',
value: '1',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/853135945c3ba85e1e59b7b4998fc058353b0d6a293d123a7208ea119bbc3511.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/c9957347129a658ed5c9217bd913e4ecd8d05b161f9ba7931a7f9915657dde14.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/cdd41605506b625510a90ce6d8194ad4b66be37ec5bdf6a56ddcf8d9206eff40.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/c2c90f1a7bee3d1d0e933b7ab7c5b186b4dbc0adf8748ceb4e69cabcbfab136f.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/d392c395c9aa2fa0a6d250b4bad574909945f56cb480b7a05707c4f4e7e23b19.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
]
} else if (state.themeType == 'blue') {
orderMap.value = [{
title: '待付款',
value: '1',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/e947004cbd4ffa27cc5b0b752da5cebfc4133a280961711c581025ff2e28e04b.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/1658843d761c5d2a130feeabe86b82f11ef6f9546db4fd013eb94ab4d759858f.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/6c69c4f4b1887889a0d0a5ca34a26582a8ba4f0600ae2db3ea6c76a67fcdab59.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/71e01ef9cfe2c54695169248f142dd28d37b56b61fc36622b98b415b70e7b495.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/3bcf948bf269e61d0fe709836b2d36f646bfc3adbc968efc9404e41e7be6f04d.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
]
} else if (state.themeType == 'pink') {
orderMap.value = [{
title: '待付款',
value: '1',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f8efe1b47be8b8059469ff33fc401c1c89330409acf9ce7f979528cc3aad3441.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/ca96eec5b194101a6aec6d4088c944339b4552e01b605a8fc99a15859579b31f.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/74d8e6ec206bc7f33f577babd3aee0991cd57d4f4fe386bc30af0f37d11133ca.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/ffa9d0bfb0e2efcc213b2ff69d8da9a27bce77a6120eb338195cb1fd089147e0.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/5d35ebc74ddb39d70b8c8a03d53aff9023f6f6cafec1a7e0a59f93b2379517c6.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
]
} else if (state.themeType == 'orange') {
orderMap.value = [{
title: '待付款',
value: '1',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/0dd1d348022f3a4afc393e0ca1a903039feeb9931b18903790a12b3cb4d34c80.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f7916da551b40545227bca74dde309a24c6516ba292087a4aed717cac2e499e6.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/6168b9bfe12ffda1805880f4da75546af803565a26ae034b2604f0280f818595.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/837009349108b9f5fee0c490d94c070367dae5312298ddf47421f4706ae884f1.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/c1ae501cf8081e1402d85de5de66a63733f79f87d5599eeba98504f3246a9ef7.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
]
} else {
orderMap.value = [{
title: '待付款',
value: '1',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/623cb21c48a8e74cad53266c2b51db74408871f85a7e6adcb375513011659197.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/908b654b1d00bdb10f0364607fa2799f1209f2e986cb58582f0dc6ebe52d9ce4.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/686bf80ff876ed116df99552e5649e10ed5a9cddcc7b3cd5adc641ec022366cf.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/a6bc4ea6f95aaaec8b12ce20886d2dd7e1db7b547ba1c52f8b4bebb35f3e7cf3.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f4f14b9cc394e0791928257174fa1b62e05a535f5556f07218f058ffc6cefe80.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
// ,
// {
// title: '全部订单',
// value: '0',
// icon: '/static/img/shop/order/all_order.png',
// path: '/pages/order/list',
// }
];
}
const orderMap = [{
title: '待付款',
value: '1',
icon: '/static/img/shop/order/no_pay.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: '/static/img/shop/order/no_take.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: '/static/img/shop/order/no_take.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: '/static/img/shop/order/no_comment.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: '/static/img/shop/order/change_order.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
// ,
// {
// title: '全部订单',
// value: '0',
// icon: '/static/img/shop/order/all_order.png',
// path: '/pages/order/list',
// }
];
const numData = computed(() => sheep.$store('user').numData);

3
sheep/components/s-point-block/s-point-block.vue
View File

@ -130,6 +130,7 @@
btnBuy,
activityIds
} = props.data || {};
const {
marginLeft,
marginRight
@ -217,7 +218,7 @@
for (const activity of activityList) {
state.spuList.push(await getSpuDetail(activity.spuId));
}
console.log(state.spuList,"state.spuList");
// 循环活动列表
activityList.forEach((activity) => {
// 查找对应的 spu 并更新价格

2
sheep/components/s-seckill-block/s-seckill-block.vue
View File

@ -211,7 +211,7 @@
// const { data: activity } = await SeckillApi.getSeckillActivity(props.data.activityId);
// const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
const data = await SpuApi.getSpuSeckilllist();
console.log(data,"datadatadatadatadatadatadatadata")
// console.log(data,"datadatadatadatadatadatadatadata")
productList.value = data.data;
});

772
sheep/components/s-select-sku/s-select-sku.vue
View File

@ -1,428 +1,454 @@
<template>
<!-- 规格弹窗 -->
<su-popup :show="show" round="10" @close="emits('close')">
<!-- SKU 信息 -->
<view class="ss-modal-box bg-white ss-flex-col">
<view class="modal-header ss-flex ss-col-center">
<view class="header-left ss-m-r-30">
<image
class="sku-image"
:src="state.selectedSku.picUrl || goodsInfo.picUrl"
mode="aspectFill"
/>
</view>
<view class="header-right ss-flex-col ss-row-between ss-flex-1">
<view class="goods-title ss-line-2">{{ goodsInfo.name }}</view>
<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<view class="ss-flex">
<view class="price-text">
{{ fen2yuan(state.selectedSku.price || goodsInfo.price) }}
</view>
</view>
<view class="stock-text ss-m-l-20">
{{ formatStock('exact', state.selectedSku.stock || goodsInfo.stock) }}
</view>
</view>
</view>
</view>
<!-- 规格弹窗 -->
<su-popup :show="show" round="10" @close="emits('close')">
<!-- SKU 信息 -->
<view class="ss-modal-box bg-white ss-flex-col">
<view class="modal-header ss-flex ss-col-center">
<view class="header-left ss-m-r-30">
<image class="sku-image" :src="state.selectedSku.picUrl || goodsInfo.picUrl" mode="aspectFill" />
</view>
<view class="header-right ss-flex-col ss-row-between ss-flex-1">
<view class="goods-title ss-line-2">{{ goodsInfo.name }}</view>
<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<view class="ss-flex">
<view class="price-text">
{{ fen2yuan(state.selectedSku.price || goodsInfo.price) }}
</view>
</view>
<view class="stock-text ss-m-l-20">
{{ formatStock('exact', state.selectedSku.stock || goodsInfo.stock) }}
</view>
</view>
</view>
</view>
<!-- 属性选择 -->
<view class="modal-content ss-flex-1">
<scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop>
<view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id">
<view class="label-text ss-m-b-20">{{ property.name }}</view>
<view class="ss-flex ss-col-center ss-flex-wrap">
<button
class="ss-reset-button spec-btn"
v-for="value in property.values"
:class="[
<!-- 属性选择 -->
<view class="modal-content ss-flex-1">
<scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop>
<view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id">
<view class="label-text ss-m-b-20">{{ property.name }}</view>
<view class="ss-flex ss-col-center ss-flex-wrap">
<button class="ss-reset-button spec-btn" v-for="value in property.values" :class="[
{
'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id,
},
{
'disabled-btn': value.disabled === true,
},
]"
:key="value.id"
:disabled="value.disabled === true"
@tap="onSelectSku(property.id, value.id)"
>
{{ value.name }}
</button>
</view>
</view>
<view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
<view class="label-text">购买数量</view>
<su-number-box
:min="1"
:max="state.selectedSku.stock"
:step="1"
v-model="state.selectedSku.goods_num"
@change="onNumberChange($event)"
/>
</view>
</scroll-view>
</view>
{
'lv' : state.themeType == 'lv' && state.currentPropertyArray[property.id] === value.id,
},
{
'blue' : state.themeType == 'blue' && state.currentPropertyArray[property.id] === value.id,
},
{
'pink' : state.themeType == 'pink' && state.currentPropertyArray[property.id] === value.id,
},
{
'orange' : state.themeType == 'orange' && state.currentPropertyArray[property.id] === value.id,
},
]" :key="value.id" :disabled="value.disabled === true" @tap="onSelectSku(property.id, value.id)">
{{ value.name }}
</button>
</view>
</view>
<view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
<view class="label-text">购买数量</view>
<su-number-box :min="1" :max="state.selectedSku.stock" :step="1"
v-model="state.selectedSku.goods_num" @change="onNumberChange($event)"
:vsl=state.themeType />
</view>
</scroll-view>
</view>
<!-- 操作区 -->
<view class="modal-footer border-top">
<view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart"
>加入购物车</button
>
<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
</view>
</view>
</view>
</su-popup>
<!-- 操作区 -->
<view class="modal-footer border-top">
<view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
<button :class="state.themeType ? `${state.themeType}v` : ''"
class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart">加入购物车</button>
<button :class="state.themeType ? state.themeType : ''"
class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
</view>
</view>
</view>
</su-popup>
</template>
<script setup>
import { computed, reactive, watch } from 'vue';
import sheep from '@/sheep';
import { formatStock, convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
import {
computed,
reactive,
watch
} from 'vue';
import sheep from '@/sheep';
import {
formatStock,
convertProductPropertyList,
fen2yuan
} from '@/sheep/hooks/useGoods';
const app = computed(() => sheep.$store('app'));
const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
const props = defineProps({
goodsInfo: {
type: Object,
default () {},
},
show: {
type: Boolean,
default: false,
},
});
const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
const props = defineProps({
goodsInfo: {
type: Object,
default() {},
},
show: {
type: Boolean,
default: false,
},
});
const state = reactive({
selectedSku: {}, // 选中的 SKU
currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
themeType: app.value.platform.themeType
});
const state = reactive({
selectedSku: {}, // 选中的 SKU
currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
});
const propertyList = convertProductPropertyList(props.goodsInfo.skus);
const propertyList = convertProductPropertyList(props.goodsInfo.skus);
// SKU 列表
const skuList = computed(() => {
let skuPrices = props.goodsInfo.skus;
for (let price of skuPrices) {
price.value_id_array = price.properties.map((item) => item.valueId);
}
return skuPrices;
});
// SKU 列表
const skuList = computed(() => {
let skuPrices = props.goodsInfo.skus;
for (let price of skuPrices) {
price.value_id_array = price.properties.map((item) => item.valueId);
}
return skuPrices;
});
watch(
() => state.selectedSku,
(newVal) => {
emits('change', newVal);
}, {
immediate: true, // 立即执行
deep: true, // 深度监听
},
);
watch(
() => state.selectedSku,
(newVal) => {
emits('change', newVal);
},
{
immediate: true, // 立即执行
deep: true, // 深度监听
},
);
// 输入框改变数量
function onNumberChange(e) {
if (e === 0) return;
if (state.selectedSku.goods_num === e) return;
state.selectedSku.goods_num = e;
}
// 输入框改变数量
function onNumberChange(e) {
if (e === 0) return;
if (state.selectedSku.goods_num === e) return;
state.selectedSku.goods_num = e;
}
// 加入购物车
function onAddCart() {
if (state.selectedSku.id <= 0) {
sheep.$helper.toast('请选择规格');
return;
}
if (state.selectedSku.stock <= 0) {
sheep.$helper.toast('库存不足');
return;
}
// 加入购物车
function onAddCart() {
if (state.selectedSku.id <= 0) {
sheep.$helper.toast('请选择规格');
return;
}
if (state.selectedSku.stock <= 0) {
sheep.$helper.toast('库存不足');
return;
}
emits('addCart', state.selectedSku);
}
emits('addCart', state.selectedSku);
}
// 立即购买
function onBuy() {
if (state.selectedSku.id <= 0) {
sheep.$helper.toast('请选择规格');
return;
}
if (state.selectedSku.stock <= 0) {
sheep.$helper.toast('库存不足');
return;
}
emits('buy', state.selectedSku);
}
// 立即购买
function onBuy() {
if (state.selectedSku.id <= 0) {
sheep.$helper.toast('请选择规格');
return;
}
if (state.selectedSku.stock <= 0) {
sheep.$helper.toast('库存不足');
return;
}
emits('buy', state.selectedSku);
}
// 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {
let newSkus = []; // 所有可以选择的 sku 数组
if (isChecked) {
// 情况一：选中 property
// 获得当前点击选中 property 的、所有可用 SKU
for (let price of skuList.value) {
if (price.stock <= 0) {
continue;
}
if (price.value_id_array.indexOf(valueId) >= 0) {
newSkus.push(price);
}
}
} else {
// 情况二：取消选中 property
// 当前所选 property 下，所有可以选择的 SKU
newSkus = getCanUseSkuList();
}
// 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {
let newSkus = []; // 所有可以选择的 sku 数组
if (isChecked) {
// 情况一：选中 property
// 获得当前点击选中 property 的、所有可用 SKU
for (let price of skuList.value) {
if (price.stock <= 0) {
continue;
}
if (price.value_id_array.indexOf(valueId) >= 0) {
newSkus.push(price);
}
}
} else {
// 情况二：取消选中 property
// 当前所选 property 下，所有可以选择的 SKU
newSkus = getCanUseSkuList();
}
// 所有存在并且有库存未选择的 SKU 的 value 属性值 id
let noChooseValueIds = [];
for (let price of newSkus) {
noChooseValueIds = noChooseValueIds.concat(price.value_id_array);
}
noChooseValueIds = Array.from(new Set(noChooseValueIds)); // 去重
// 所有存在并且有库存未选择的 SKU 的 value 属性值 id
let noChooseValueIds = [];
for (let price of newSkus) {
noChooseValueIds = noChooseValueIds.concat(price.value_id_array);
}
noChooseValueIds = Array.from(new Set(noChooseValueIds)); // 去重
if (isChecked) {
// 去除当前选中的 value 属性值 id
let index = noChooseValueIds.indexOf(valueId);
noChooseValueIds.splice(index, 1);
} else {
// 循环去除当前已选择的 value 属性值 id
state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId.toString() !== '') {
return;
}
// currentPropertyId 为空是反选 填充的
let index = noChooseValueIds.indexOf(currentPropertyId);
if (index >= 0) {
// currentPropertyId 存在于 noChooseValueIds
noChooseValueIds.splice(index, 1);
}
});
}
if (isChecked) {
// 去除当前选中的 value 属性值 id
let index = noChooseValueIds.indexOf(valueId);
noChooseValueIds.splice(index, 1);
} else {
// 循环去除当前已选择的 value 属性值 id
state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId.toString() !== '') {
return;
}
// currentPropertyId 为空是反选 填充的
let index = noChooseValueIds.indexOf(currentPropertyId);
if (index >= 0) {
// currentPropertyId 存在于 noChooseValueIds
noChooseValueIds.splice(index, 1);
}
});
}
// 当前已选择的 property 数组
let choosePropertyIds = [];
if (!isChecked) {
// 当前已选择的 property
state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
if (currentPropertyId !== '') {
// currentPropertyId 为空是反选 填充的
choosePropertyIds.push(currentValueId);
}
});
} else {
// 当前点击选择的 property
choosePropertyIds = [propertyId];
}
// 当前已选择的 property 数组
let choosePropertyIds = [];
if (!isChecked) {
// 当前已选择的 property
state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
if (currentPropertyId !== '') {
// currentPropertyId 为空是反选 填充的
choosePropertyIds.push(currentValueId);
}
});
} else {
// 当前点击选择的 property
choosePropertyIds = [propertyId];
}
for (let propertyIndex in propertyList) {
// 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
if (choosePropertyIds.indexOf(propertyList[propertyIndex]['id']) >= 0) {
continue;
}
// 如果当前 property id 不存在于有库存的 SKU 中，则禁用
for (let valueIndex in propertyList[propertyIndex]['values']) {
propertyList[propertyIndex]['values'][valueIndex]['disabled'] =
noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) <
0; // true 禁用 or false 不禁用
}
}
}
for (let propertyIndex in propertyList) {
// 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
if (choosePropertyIds.indexOf(propertyList[propertyIndex]['id']) >= 0) {
continue;
}
// 如果当前 property id 不存在于有库存的 SKU 中，则禁用
for (let valueIndex in propertyList[propertyIndex]['values']) {
propertyList[propertyIndex]['values'][valueIndex]['disabled'] =
noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) < 0; // true 禁用 or false 不禁用
}
}
}
// 当前所选属性下，获取所有有库存的 SKU 们
function getCanUseSkuList() {
let newSkus = [];
for (let sku of skuList.value) {
if (sku.stock <= 0) {
continue;
}
let isOk = true;
state.currentPropertyArray.forEach((propertyId) => {
// propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
isOk = false;
}
});
if (isOk) {
newSkus.push(sku);
}
}
return newSkus;
}
// 当前所选属性下，获取所有有库存的 SKU 们
function getCanUseSkuList() {
let newSkus = [];
for (let sku of skuList.value) {
if (sku.stock <= 0) {
continue;
}
let isOk = true;
state.currentPropertyArray.forEach((propertyId) => {
// propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
isOk = false;
}
});
if (isOk) {
newSkus.push(sku);
}
}
return newSkus;
}
// 选择规格
function onSelectSku(propertyId, valueId) {
// 清空已选择
let isChecked = true; // 选中 or 取消选中
if (
state.currentPropertyArray[propertyId] !== undefined &&
state.currentPropertyArray[propertyId] === valueId
) {
// 点击已被选中的，删除并填充 ''
isChecked = false;
state.currentPropertyArray.splice(propertyId, 1, '');
} else {
// 选中
state.currentPropertyArray[propertyId] = valueId;
}
// 选择规格
function onSelectSku(propertyId, valueId) {
// 清空已选择
let isChecked = true; // 选中 or 取消选中
if (
state.currentPropertyArray[propertyId] !== undefined &&
state.currentPropertyArray[propertyId] === valueId
) {
// 点击已被选中的，删除并填充 ''
isChecked = false;
state.currentPropertyArray.splice(propertyId, 1, '');
} else {
// 选中
state.currentPropertyArray[propertyId] = valueId;
}
// 选中的 property 大类
let choosePropertyId = [];
state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId !== '') {
// currentPropertyId 为空是反选 填充的
choosePropertyId.push(currentPropertyId);
}
});
// 选中的 property 大类
let choosePropertyId = [];
state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId !== '') {
// currentPropertyId 为空是反选 填充的
choosePropertyId.push(currentPropertyId);
}
});
// 当前所选 property 下，所有可以选择的 SKU 们
let newSkuList = getCanUseSkuList();
// 当前所选 property 下，所有可以选择的 SKU 们
let newSkuList = getCanUseSkuList();
// 判断所有 property 大类是否选择完成
if (choosePropertyId.length === propertyList.length && newSkuList.length) {
newSkuList[0].goods_num = state.selectedSku.goods_num || 1;
state.selectedSku = newSkuList[0];
} else {
state.selectedSku = {};
}
// 判断所有 property 大类是否选择完成
if (choosePropertyId.length === propertyList.length && newSkuList.length) {
newSkuList[0].goods_num = state.selectedSku.goods_num || 1;
state.selectedSku = newSkuList[0];
} else {
state.selectedSku = {};
}
// 改变 property 禁用状态
changeDisabled(isChecked, propertyId, valueId);
}
// 改变 property 禁用状态
changeDisabled(isChecked, propertyId, valueId);
}
changeDisabled(false);
// TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格
changeDisabled(false);
// TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格
</script>
<style lang="scss" scoped>
// 购买
.buy-box {
padding: 10rpx 0;
.bluev {
background-color: rgba(33, 202, 254) !important;
color: white !important;
}
.add-btn {
width: 356rpx;
height: 80rpx;
border-radius: 40rpx 0 0 40rpx;
background-color: var(--ui-BG-Main-light);
color: var(--ui-BG-Main);
}
.lvv {
background-color: rgba(253, 157, 17) !important;
color: white !important;
}
.buy-btn {
width: 356rpx;
height: 80rpx;
border-radius: 0 40rpx 40rpx 0;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
.pinkv {
background-color: black !important;
color: white !important;
}
.score-btn {
width: 100%;
margin: 0 20rpx;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
}
.orangev {
background-color: rgba(253, 157, 17) !important;
color: white !important;
}
.ss-modal-box {
border-radius: 30rpx 30rpx 0 0;
max-height: 1000rpx;
// 购买
.buy-box {
padding: 10rpx 0;
.modal-header {
position: relative;
padding: 80rpx 20rpx 40rpx;
.add-btn {
width: 356rpx;
height: 80rpx;
border-radius: 40rpx 0 0 40rpx;
background-color: var(--ui-BG-Main-light);
color: var(--ui-BG-Main);
}
.sku-image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
.buy-btn {
width: 356rpx;
height: 80rpx;
border-radius: 0 40rpx 40rpx 0;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
.header-right {
height: 160rpx;
}
.score-btn {
width: 100%;
margin: 0 20rpx;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
}
.close-icon {
position: absolute;
top: 10rpx;
right: 20rpx;
font-size: 46rpx;
opacity: 0.2;
}
.ss-modal-box {
border-radius: 30rpx 30rpx 0 0;
max-height: 1000rpx;
.goods-title {
font-size: 28rpx;
font-weight: 500;
line-height: 42rpx;
}
.modal-header {
position: relative;
padding: 80rpx 20rpx 40rpx;
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.sku-image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
.score-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
}
.header-right {
height: 160rpx;
}
.price-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
.close-icon {
position: absolute;
top: 10rpx;
right: 20rpx;
font-size: 46rpx;
opacity: 0.2;
}
&::before {
content: '￥';
font-size: 30rpx;
font-weight: 500;
color: $red;
}
}
.goods-title {
font-size: 28rpx;
font-weight: 500;
line-height: 42rpx;
}
.stock-text {
font-size: 26rpx;
color: #999999;
}
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.modal-content {
padding: 0 20rpx;
.score-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
}
.modal-content-scroll {
max-height: 600rpx;
.price-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
.label-text {
font-size: 26rpx;
font-weight: 500;
}
&::before {
content: '￥';
font-size: 30rpx;
font-weight: 500;
color: $red;
}
}
.buy-num-box {
height: 100rpx;
}
.stock-text {
font-size: 26rpx;
color: #999999;
}
}
.spec-btn {
height: 60rpx;
min-width: 100rpx;
padding: 0 30rpx;
background: #f4f4f4;
border-radius: 30rpx;
color: #434343;
font-size: 26rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.modal-content {
padding: 0 20rpx;
.disabled-btn {
font-weight: 400;
color: #c6c6c6;
background: #f8f8f8;
}
}
}
}
</style>
.modal-content-scroll {
max-height: 600rpx;
.label-text {
font-size: 26rpx;
font-weight: 500;
}
.buy-num-box {
height: 100rpx;
}
.spec-btn {
height: 60rpx;
min-width: 100rpx;
padding: 0 30rpx;
background: #f4f4f4;
border-radius: 30rpx;
color: #434343;
font-size: 26rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.disabled-btn {
font-weight: 400;
color: #c6c6c6;
background: #f8f8f8;
}
}
}
}
</style>

24
sheep/components/s-share-modal/canvas-poster/index.vue
View File

@ -1,15 +1,16 @@
<!-- 海报弹窗 -->
<template>
<su-popup :show="show" round="10" @close="onClosePoster" type="center" class="popup-box">
<view class="ss-flex-col ss-col-center ss-row-center">
<view class="ss-flex-col ss-col-center ss-row-center"
:style="{
height: poster.css.height + 'px',
width: poster.css.width + 'px',
}">
<image
v-if="!!painterImageUrl"
class="poster-img"
:src="painterImageUrl"
:style="{
height: poster.css.height + 'px',
width: poster.css.width + 'px',
}"
:show-menu-by-longpress="true"
/>
</view>
@ -17,7 +18,6 @@
class="poster-btn-box ss-m-t-20 ss-flex ss-row-between ss-col-center"
v-if="!!painterImageUrl"
>
<button class="cancel-btn ss-reset-button" @tap="onClosePoster">取消</button>
<button class="save-btn ss-reset-button ui-BG-Main" @tap="onSavePoster">
{{
['wechatOfficialAccount', 'H5'].includes(sheep.$platform.name)
@ -25,6 +25,7 @@
: '保存图片'
}}
</button>
<button class="cancel-btn ss-reset-button" @tap="onClosePoster">取消</button>
</view>
<!-- 海报画板：默认隐藏只用来生成海报。生成方式为主动调用 -->
<l-painter
@ -65,6 +66,7 @@
css: {
// 根节点若无尺寸，自动获取父级节点
width: sheep.$platform.device.windowWidth * 0.9,
// width: 1 * 0.9,
height: 550,
},
views: [],
@ -137,10 +139,11 @@
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -80rpx;
bottom: -172rpx;
flex-wrap: wrap;
.cancel-btn {
width: 240rpx;
width: 100%;
height: 70rpx;
line-height: 70rpx;
background: $white;
@ -148,10 +151,11 @@
font-size: 28rpx;
font-weight: 500;
color: $dark-9;
margin-top:10px;
}
.save-btn {
width: 240rpx;
width: 100%;
height: 70rpx;
line-height: 70rpx;
border-radius: 35rpx;
@ -162,5 +166,7 @@
.poster-img {
border-radius: 20rpx;
width: 100%;
height:100%;
}
</style>

2
sheep/components/s-share-modal/canvas-poster/poster/user.js
View File

@ -78,7 +78,7 @@ const user = async (poster) => {
css: {
position: 'fixed',
left: width * 0.22,
top: width * 1.3,
top: width * 1.3,
width: width * 0.2,
height: width * 0.2,
},

294
sheep/components/s-tabbar/s-tabbar.vue
View File

@ -1,90 +1,232 @@
<template>
<view class="u-page__item" v-if="tabbar?.items?.length > 0">
<su-tabbar
:value="path"
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
:inactiveColor="tabbar.style.color"
:activeColor="tabbar.style.activeColor"
:midTabBar="tabbar.mode === 2"
:customStyle="tabbarStyle"
>
<su-tabbar-item
v-for="(item, index) in tabbar.items"
:key="item.text"
:text="item.text"
:name="item.url"
:isCenter="getTabbarCenter(index)"
:centerImage="sheep.$url.cdn(item.iconUrl)"
@tap="sheep.$router.go(item.url)"
>
<template v-slot:active-icon>
<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
</template>
<template v-slot:inactive-icon>
<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
</template>
</su-tabbar-item>
</su-tabbar>
</view>
<view class="u-page__item" v-if="tabbar?.items?.length > 0">
<su-tabbar :value="path" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
:inactiveColor="tabbar.style.color" :activeColor="tabbar.style.activeColor" :midTabBar="tabbar.mode === 2"
:customStyle="tabbarStyle">
<su-tabbar-item v-for="(item, index) in Citrn" :key="item.text" :text="item.text" :name="item.url"
:isCenter="getTabbarCenter(index)" :centerImage="sheep.$url.cdn(item.iconUrl)"
@tap="sheep.$router.go(item.url)"
:vl="state.themeType">
<template v-slot:active-icon>
<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
</template>
<template v-slot:inactive-icon>
<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
</template>
</su-tabbar-item>
</su-tabbar>
</view>
</template>
<script setup>
import { computed, unref } from 'vue';
import sheep from '@/sheep';
const tabbar = computed(() => {
return sheep.$store('app').template.basic?.tabbar;
});
const tabbarStyle = computed(() => {
const backgroundStyle = tabbar.value.style;
if (backgroundStyle.bgType === 'color') {
return { background: backgroundStyle.bgColor };
}
if (backgroundStyle.bgType === 'img')
return {
background: `url(${sheep.$url.cdn(
import {
computed,
unref,
ref,
reactive
} from 'vue';
import sheep from '@/sheep';
const app = computed(() => sheep.$store('app'));
const state = reactive({
themeType:app.value.platform.themeType
});
const tabbar = computed(() => {
return sheep.$store('app').template.basic?.tabbar;
});
console.log('--------', tabbar.value.items)
const Citrn = ref([]);
if (state.themeType == 'lv') {
Citrn.value = [{
text: "首页",
url: "/pages/index/index",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/fdece57673d74d956692edad8c83e85b62503f90f1286cfcbfa9e1c564e127f0.png"
},
{
text: "分类",
url: "/pages/index/category?id=3",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/3f681bdfd791d2170fff188be799c588b60a3ceb5b9cd22b8b94a1ae508783d4.png"
},
{
text: "购物车",
url: "/pages/index/cart",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/c8e2bc5e2d49ad959951e52c4f4020d6b794310389a09138e1b454be6d6086ec.png"
},
{
text: "我的",
url: "/pages/index/user",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/cfd3ca7242acfa44b890c66b43ea39dc83de0570a20718251c73785540085002.png"
}
];
} else if (state.themeType == 'blue') {
Citrn.value = [{
text: "首页",
url: "/pages/index/index",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/d353e289077f36dab00bb39b161e04364e8d5c1f8e86b2c8ad77e2efc8b38c80.png"
},
{
text: "分类",
url: "/pages/index/category?id=3",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/ffdbfc0244b68cbc0985339049e9b5b5cddf16e50cf4c0ec7326efd61dc5334d.png"
},
{
text: "购物车",
url: "/pages/index/cart",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/5d399948d0d391a2ae88fb29049ced561106d7bc6d3bae525c32f3f6dfb92677.png"
},
{
text: "我的",
url: "/pages/index/user",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/4a5387da733de9a9b2bfe921d0a3f09031cc6da7d3bf1b6125eb6635c9e5f7e9.png"
}
];
} else if (state.themeType == 'pink') {
Citrn.value = [{
text: "首页",
url: "/pages/index/index",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/0af8fd1f7dd91b22ce8480a4f75591d237f3a359a9d991e4eb333eda96f755fe.png"
},
{
text: "分类",
url: "/pages/index/category?id=3",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/15548546af5bd5e13ff5c69c5acab5ab0d3d0333b63d583fd0470f3d48bf4e76.png"
},
{
text: "购物车",
url: "/pages/index/cart",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/27ed7f014ba28a6c257c84c2ad6e8c73335d8e9df2076db4aedff1c5d03c66ba.png"
},
{
text: "我的",
url: "/pages/index/user",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/059277d5bfe7b44ee74cece09fbe8515f5d021f20b2a9729590265cdf893f31a.png"
}
];
} else if (state.themeType == 'orange') {
Citrn.value = [{
text: "首页",
url: "/pages/index/index",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/aab810be4dea52817656ac3ae17ed418561bc4b12b4e33116cb68abaf362311f.png"
},
{
text: "分类",
url: "/pages/index/category?id=3",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/c972bdc6808b37c9c88eac52bb8feb2bf787874a64b45a5ac3e41be60dee0994.png"
},
{
text: "购物车",
url: "/pages/index/cart",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/69febc6f7f2371180ae3e11c25bf46c046bdb1b80a14f0b5df3abbea060f47ac.png"
},
{
text: "我的",
url: "/pages/index/user",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/de40b82a64b9554092cc7c35621ce1a438bbf234e9b43567790a7b9bc1b8f618.png"
}
];
} else {
Citrn.value = [{
text: "首页",
url: "/pages/index/index",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/1-002.png"
},
{
text: "分类",
url: "/pages/index/category?id=3",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/2-002.png"
},
{
text: "购物车",
url: "/pages/index/cart",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/3-002.png"
},
{
text: "我的",
url: "/pages/index/user",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/4-002.png"
}
];
}
const tabbarStyle = computed(() => {
const backgroundStyle = tabbar.value.style;
if (backgroundStyle.bgType === 'color') {
return {
background: backgroundStyle.bgColor
};
}
if (backgroundStyle.bgType === 'img')
return {
background: `url(${sheep.$url.cdn(
backgroundStyle.bgImg,
)}) no-repeat top center / 100% auto`,
};
});
};
});
const getTabbarCenter = (index) => {
if (unref(tabbar).mode !== 2) return false;
return unref(tabbar).items % 2 > 0
? Math.ceil(unref(tabbar).items.length / 2) === index + 1
: false;
};
const getTabbarCenter = (index) => {
if (unref(tabbar).mode !== 2) return false;
return unref(tabbar).items % 2 > 0 ?
Math.ceil(unref(tabbar).items.length / 2) === index + 1 :
false;
};
const props = defineProps({
path: String,
default: '',
});
const props = defineProps({
path: String,
default: '',
});
</script>
<style lang="scss">
.u-page {
padding: 0;
.u-page {
padding: 0;
&__item {
&__title {
color: var(--textSize);
background-color: #fff;
padding: 15px;
font-size: 15px;
&__item {
&__title {
color: var(--textSize);
background-color: #fff;
padding: 15px;
font-size: 15px;
&__slot-title {
color: var(--textSize);
font-size: 14px;
}
}
&__slot-title {
color: var(--textSize);
font-size: 14px;
}
}
&__slot-icon {
width: 25px;
height: 25px;
}
}
}
</style>
&__slot-icon {
width: 25px;
height: 25px;
}
}
}
</style>

69
sheep/components/s-user-card/s-user-card.vue
View File

@ -1,19 +1,30 @@
<!-- 装修用户组件：用户卡片 -->
<template>
<view class="ss-user-info-wrap ss-p-t-50" style="z-index: 9999;">
<image class="seckill" src="@/static/images/seckilbg.png"></image>
<image class="seckill" src="https://zysc.fjptzykj.com:3000/shangcheng/e08f161b6bf1eddf5132fe4c4b087d75f7e77590a2f546147bd094593db83eb0.png" v-if="state.themeType == ''"></image>
<image class="seckill" src="https://zysc.fjptzykj.com:3000/shangcheng/7925fd9e2c1df9cd29462c946f7c54d89d148b03d5fd366864636c3343282a2b.png" v-if="state.themeType == 'lv'"></image>
<image class="seckill" src="https://zysc.fjptzykj.com:3000/shangcheng/b350b54f38628fcb465805b81d624717dc83598604c4e58c674ae8558dc7386c.png" v-if="state.themeType == 'blue'"></image>
<image class="seckill" src="https://zysc.fjptzykj.com:3000/shangcheng/806e2d991890cab22cbeeb6ac549d5d6179f04099203e3db0256ca25544bfb5a.png" v-if="state.themeType == 'pink'"></image>
<image class="seckill" src="https://zysc.fjptzykj.com:3000/shangcheng/ad23c1846977e232b50c3382d526b4d0d8bf2694b04f8090b2e873381cccab8b.png" v-if="state.themeType == 'orange'"></image>
<view class="ss-flex ss-col-center ss-row-between ">
<view class="left-box ss-flex ss-col-center ss-m-l-36">
<view class="avatar-box ss-m-r-24">
<image class="avatar-img" :src="
isLogin
? sheep.$url.cdn(userInfo.avatar)
: defaultAvatar
" mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')"></image>
isLogin
? sheep.$url.cdn(userInfo.avatar)
: defaultAvatar
" mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')"></image>
<image v-if="userInfo.activate && userInfo.activate != 4" class="vipCard"
src="https://zysc.fjptzykj.com:3000/shangcheng/8064149c53fe05f8d20263fba31992da2d24a751877a4ddcc696d7f53b5cc771.png">
</image>
</view>
<view>
<view style="z-index:22222;">
<view class="nickname-box ss-flex ss-col-center">
<view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
<view class="vipImg" v-if="userInfo.activate && userInfo.activate != 4">
<image class="img"
src="https://zysc.fjptzykj.com:3000/shangcheng/0419db3d6a991486176256374c05c2834006fd42b3f5f80e3ff385b027b7c34f.png" />
</view>
</view>
<view class="nickname-box ss-flex ss-col-center">
<view class="nick-name ss-m-r-20">{{ userInfo?.mobile || mobile }}</view>
@ -30,13 +41,13 @@
</view>
</view>
<!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
<view class="bind-mobile-box ss-flex ss-row-between ss-col-center" v-if="isLogin && !userInfo.mobile">
<!-- <view class="bind-mobile-box ss-flex ss-row-between ss-col-center" v-if="isLogin && !userInfo.mobile">
<view class="ss-flex">
<text class="cicon-mobile-o" />
<view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
</view>
<button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
</view>
</view> -->
</view>
</template>
@ -66,7 +77,10 @@
showShareModal,
showAuthModal
} from '@/sheep/hooks/useModal';
const app = computed(() => sheep.$store('app'));
const state = reactive({
themeType: app.value.platform.themeType
});
// 用户信息
const userInfo = computed(() => sheep.$store('user').userInfo);
console.log('用户信息', userInfo);
@ -108,7 +122,17 @@
</script>
<style lang="scss" scoped>
.qiandao{
.vipImg {
width: 42px;
height: 16px;
.img {
width: 100%;
height: 100%;
}
}
.qiandao {
width: 50px;
height: 30px;
background: yellow;
@ -125,12 +149,26 @@
.avatar-box {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
overflow: hidden;
position: relative;
.avatar-img {
width: 97%;
height: 93%;
left: 1px;
top: 1px;
border-radius: 50%;
display: block;
margin: 0 auto;
position: absolute;
}
.vipCard {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: -2px;
}
}
@ -180,12 +218,13 @@
color: #ffffff;
}
}
.seckill {
width: 100%;
position: absolute;
top:0;
left:0;
height:217px;
z-index:0;
top: 0;
left: 0;
height: 217px;
z-index: 0;
}
</style>

2
sheep/config/index.js
View File

@ -12,9 +12,11 @@ console.log(`[芋道商城 ${version}] http://doc.iocoder.cn`);
export const apiPath = import.meta.env.SHOPRO_API_PATH;
export const staticUrl = import.meta.env.SHOPRO_STATIC_URL;
export const websocketPath = import.meta.env.SHOPRO_WEBSOCKET_PATH;
export const kefuPath = import.meta.env.SHOPRO_KEFU_PATH;
export default {
baseUrl,
apiPath,
staticUrl,
websocketPath,
kefuPath
};

5
sheep/hooks/useModal.js
View File

@ -8,6 +8,11 @@ import AuthUtil from '@/sheep/api/member/auth';
// 打开授权弹框
export function showAuthModal(type = 'smsLogin') {
const modal = $store('modal');
// #ifdef MP
modal.$patch((state) => {
state.auth = '';
});
// #endif
if (modal.auth !== '') {
closeAuthModal();
setTimeout(() => {

679
sheep/platform/pay.js
View File

@ -2,7 +2,9 @@ import sheep from '@/sheep';
// #ifdef H5
import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
// #endif
import { getRootUrl } from '@/sheep/helper';
import {
getRootUrl
} from '@/sheep/helper';
import PayOrderApi from '@/sheep/api/pay/order';
/**
@ -14,350 +16,375 @@ import PayOrderApi from '@/sheep/api/pay/order';
*/
export default class SheepPay {
constructor(payment, orderType, id) {
this.payment = payment;
this.id = id;
this.orderType = orderType;
this.payAction();
}
constructor(payment, orderType, id) {
this.payment = payment;
this.id = id;
this.orderType = orderType;
this.payAction();
}
payAction() {
const payAction = {
WechatOfficialAccount: {
wechat: () => {
this.wechatOfficialAccountPay();
},
alipay: () => {
this.redirectPay(); // 现在公众号可以直接跳转支付宝页面
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
},
},
WechatMiniProgram: {
wechat: () => {
this.wechatMiniProgramPay();
},
alipay: () => {
this.copyPayLink();
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
},
},
App: {
wechat: () => {
this.wechatAppPay();
},
alipay: () => {
this.alipay();
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
},
},
H5: {
wechat: () => {
this.wechatWapPay();
},
alipay: () => {
this.redirectPay();
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
},
},
};
return payAction[sheep.$platform.name][this.payment]();
}
payAction() {
const payAction = {
WechatOfficialAccount: {
wechat: () => {
this.wechatOfficialAccountPay();
},
alipay: () => {
this.redirectPay(); // 现在公众号可以直接跳转支付宝页面
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
},
},
WechatMiniProgram: {
wechat: () => {
this.wechatMiniProgramPay();
},
alipay: () => {
this.copyPayLink();
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
},
},
App: {
wechat: () => {
this.wechatAppPay();
},
alipay: () => {
this.alipay();
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
},
},
H5: {
wechat: () => {
this.wechatWapPay();
},
alipay: () => {
this.redirectPay();
},
wallet: () => {
this.walletPay();
},
mock: () => {
this.mockPay();
},
},
};
return payAction[sheep.$platform.name][this.payment]();
}
// 预支付
prepay(channel) {
return new Promise(async (resolve, reject) => {
let data = {
id: this.id,
channelCode: channel,
channelExtras: {},
};
// 特殊逻辑：微信公众号、小程序支付时，必须传入 openid
if (['wx_pub', 'wx_lite'].includes(channel)) {
const openid = await sheep.$platform.useProvider('wechat').getOpenid();
// 如果获取不到 openid，微信无法发起支付，此时需要引导
if (!openid) {
this.bindWeixin();
return;
}
data.channelExtras.openid = openid;
}
// 发起预支付 API 调用
PayOrderApi.submitOrder(data).then((res) => {
// 成功时
res.code === 0 && resolve(res);
// 失败时
if (res.code !== 0 && res.msg.indexOf('无效的openid') >= 0) {
// 特殊逻辑：微信公众号、小程序支付时，必须传入 openid 不正确的情况
if (
res.msg.indexOf('无效的openid') >= 0 || // 获取的 openid 不正确时，或者随便输入了个 openid
res.msg.indexOf('下单账号与支付账号不一致') >= 0
) {
// https://developers.weixin.qq.com/community/develop/doc/00008c53c347804beec82aed051c00
this.bindWeixin();
}
}
});
});
}
// #ifdef H5
// 微信公众号 JSSDK 支付
async wechatOfficialAccountPay() {
let { code, data } = await this.prepay('wx_pub');
if (code !== 0) {
return;
}
const payConfig = JSON.parse(data.displayContent);
$wxsdk.wxpay(payConfig, {
success: () => {
this.payResult('success');
},
cancel: () => {
sheep.$helper.toast('支付已手动取消');
},
fail: (error) => {
if (error.errMsg.indexOf('chooseWXPay:没有此SDK或暂不支持此SDK模拟') >= 0) {
sheep.$helper.toast(
'发起微信支付失败，原因：可能是微信开发者工具不支持，建议使用微信打开网页后支付',
);
return;
}
this.payResult('fail');
},
});
}
// 预支付
prepay(channel) {
return new Promise(async (resolve, reject) => {
let data = {
id: this.id,
channelCode: channel,
channelExtras: {},
};
// 特殊逻辑：微信公众号、小程序支付时，必须传入 openid
if (['wx_pub', 'wx_lite'].includes(channel)) {
const openid = await sheep.$platform.useProvider('wechat').getOpenid();
// 如果获取不到 openid，微信无法发起支付，此时需要引导
if (!openid) {
this.bindWeixin();
return;
}
data.channelExtras.openid = openid;
}
// 发起预支付 API 调用
PayOrderApi.submitOrder(data).then((res) => {
// 成功时
res.code === 0 && resolve(res);
// 失败时
if (res.code !== 0 && res.msg.indexOf('无效的openid') >= 0) {
// 特殊逻辑：微信公众号、小程序支付时，必须传入 openid 不正确的情况
if (
res.msg.indexOf('无效的openid') >= 0 || // 获取的 openid 不正确时，或者随便输入了个 openid
res.msg.indexOf('下单账号与支付账号不一致') >= 0
) {
// https://developers.weixin.qq.com/community/develop/doc/00008c53c347804beec82aed051c00
this.bindWeixin();
}
}
});
});
}
// #ifdef H5
// 微信公众号 JSSDK 支付
async wechatOfficialAccountPay() {
let {
code,
data
} = await this.prepay('wx_pub');
if (code !== 0) {
return;
}
const payConfig = JSON.parse(data.displayContent);
$wxsdk.wxpay(payConfig, {
success: () => {
this.payResult('success');
},
cancel: () => {
sheep.$helper.toast('支付已手动取消');
},
fail: (error) => {
if (error.errMsg.indexOf('chooseWXPay:没有此SDK或暂不支持此SDK模拟') >= 0) {
sheep.$helper.toast(
'发起微信支付失败，原因：可能是微信开发者工具不支持，建议使用微信打开网页后支付',
);
return;
}
this.payResult('fail');
},
});
}
// 浏览器微信 H5 支付 TODO 芋艿：待接入
async wechatWapPay() {
const { error, data } = await this.prepay();
if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${
// 浏览器微信 H5 支付 TODO 芋艿：待接入
async wechatWapPay() {
const {
error,
data
} = await this.prepay();
if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${
this.payment
}&orderType=${this.orderType}`;
location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
}
}
location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
}
}
// 支付链接 TODO 芋艿：待接入
async redirectPay() {
let { error, data } = await this.prepay();
if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${
// 支付链接 TODO 芋艿：待接入
async redirectPay() {
let {
error,
data
} = await this.prepay();
if (error === 0) {
const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${
this.payment
}&orderType=${this.orderType}`;
location.href = data.pay_data + encodeURIComponent(redirect_url);
}
}
location.href = data.pay_data + encodeURIComponent(redirect_url);
}
}
// #endif
// #endif
// 微信小程序支付
async wechatMiniProgramPay() {
// let that = this;
let { code, data } = await this.prepay('wx_lite');
if (code !== 0) {
return;
}
// 调用微信小程序支付
const payConfig = JSON.parse(data.displayContent);
uni.requestPayment({
provider: 'wxpay',
timeStamp: payConfig.timeStamp,
nonceStr: payConfig.nonceStr,
package: payConfig.packageValue,
signType: payConfig.signType,
paySign: payConfig.paySign,
success: (res) => {
this.payResult('success');
},
fail: (err) => {
if (err.errMsg === 'requestPayment:fail cancel') {
sheep.$helper.toast('支付已手动取消');
} else {
this.payResult('fail');
}
},
});
}
// 微信小程序支付
async wechatMiniProgramPay() {
// let that = this;
let {
code,
data
} = await this.prepay('wx_lite');
if (code !== 0) {
return;
}
// 调用微信小程序支付
const payConfig = JSON.parse(data.displayContent);
uni.requestPayment({
provider: 'wxpay',
timeStamp: payConfig.timeStamp,
nonceStr: payConfig.nonceStr,
package: payConfig.packageValue,
signType: payConfig.signType,
paySign: payConfig.paySign,
success: (res) => {
this.payResult('success');
},
fail: (err) => {
if (err.errMsg === 'requestPayment:fail cancel') {
sheep.$helper.toast('支付已手动取消');
} else {
this.payResult('fail');
}
},
});
}
// 余额支付
async walletPay() {
const { code } = await this.prepay('wallet');
code === 0 && this.payResult('success');
}
// 余额支付
async walletPay() {
const {
code
} = await this.prepay('wallet');
code === 0 && this.payResult('success');
}
// 模拟支付
async mockPay() {
const { code } = await this.prepay('mock');
code === 0 && this.payResult('success');
}
// 模拟支付
async mockPay() {
const {
code
} = await this.prepay('mock');
code === 0 && this.payResult('success');
}
// 支付宝复制链接支付 TODO 芋艿：待接入
async copyPayLink() {
let that = this;
let { error, data } = await this.prepay();
if (error === 0) {
// 引入showModal 点击确认 复制链接；
uni.showModal({
title: '支付宝支付',
content: '复制链接到外部浏览器',
confirmText: '复制链接',
success: (res) => {
if (res.confirm) {
sheep.$helper.copyText(data.pay_data);
}
},
});
}
}
// 支付宝复制链接支付 TODO 芋艿：待接入
async copyPayLink() {
let that = this;
let {
error,
data
} = await this.prepay();
if (error === 0) {
// 引入showModal 点击确认 复制链接；
uni.showModal({
title: '支付宝支付',
content: '复制链接到外部浏览器',
confirmText: '复制链接',
success: (res) => {
if (res.confirm) {
sheep.$helper.copyText(data.pay_data);
}
},
});
}
}
// 支付宝支付 TODO 芋艿：待接入
async alipay() {
let that = this;
const { error, data } = await this.prepay();
if (error === 0) {
uni.requestPayment({
provider: 'alipay',
orderInfo: data.pay_data, //支付宝订单数据
success: (res) => {
that.payResult('success');
},
fail: (err) => {
if (err.errMsg === 'requestPayment:fail [paymentAlipay:62001]user cancel') {
sheep.$helper.toast('支付已手动取消');
} else {
that.payResult('fail');
}
},
});
}
}
// 支付宝支付 TODO 芋艿：待接入
async alipay() {
let that = this;
const {
error,
data
} = await this.prepay();
if (error === 0) {
uni.requestPayment({
provider: 'alipay',
orderInfo: data.pay_data, //支付宝订单数据
success: (res) => {
that.payResult('success');
},
fail: (err) => {
if (err.errMsg === 'requestPayment:fail [paymentAlipay:62001]user cancel') {
sheep.$helper.toast('支付已手动取消');
} else {
that.payResult('fail');
}
},
});
}
}
// 微信支付 TODO 芋艿：待接入
async wechatAppPay() {
let that = this;
let { error, data } = await this.prepay();
if (error === 0) {
uni.requestPayment({
provider: 'wxpay',
orderInfo: data.pay_data, //微信订单数据(官方说是string。实测为object)
success: (res) => {
that.payResult('success');
},
fail: (err) => {
err.errMsg !== 'requestPayment:fail cancel' && that.payResult('fail');
},
});
}
}
// 微信支付 TODO 芋艿：待接入
async wechatAppPay() {
let that = this;
let {
error,
data
} = await this.prepay();
if (error === 0) {
uni.requestPayment({
provider: 'wxpay',
orderInfo: data.pay_data, //微信订单数据(官方说是string。实测为object)
success: (res) => {
that.payResult('success');
},
fail: (err) => {
err.errMsg !== 'requestPayment:fail cancel' && that.payResult('fail');
},
});
}
}
// 支付结果跳转,success:成功，fail:失败
payResult(resultType) {
sheep.$router.redirect('/pages/pay/result', {
id: this.id,
orderType: this.orderType,
payState: resultType,
});
}
// 支付结果跳转,success:成功，fail:失败
payResult(resultType) {
sheep.$router.redirect('/pages/pay/result', {
id: this.id,
orderType: this.orderType,
payState: resultType,
});
}
// 引导绑定微信
bindWeixin() {
uni.showModal({
title: '微信支付',
content: '请先绑定微信再使用微信支付',
success: function (res) {
if (res.confirm) {
sheep.$platform.useProvider('wechat').bind();
}
},
});
}
// 引导绑定微信
bindWeixin() {
uni.showModal({
title: '微信支付',
content: '请先绑定微信再使用微信支付',
success: function(res) {
if (res.confirm) {
sheep.$platform.useProvider('wechat').bind();
}
},
});
}
}
export function getPayMethods(channels) {
const payMethods = [
{
icon: '/static/img/shop/pay/wechat.png',
title: '微信支付',
value: 'wechat',
disabled: true,
},
{
icon: '/static/img/shop/pay/alipay.png',
title: '支付宝支付',
value: 'alipay',
disabled: true,
},
{
icon: '/static/img/shop/pay/wallet.png',
title: '余额支付',
value: 'wallet',
disabled: true,
},
{
icon: '/static/img/shop/pay/apple.png',
title: 'Apple Pay',
value: 'apple',
disabled: true,
},
{
icon: '/static/img/shop/pay/wallet.png',
title: '模拟支付',
value: 'mock',
disabled: true,
},
];
const platform = sheep.$platform.name;
const payMethods = [{
icon: '/static/img/shop/pay/wechat.png',
title: '微信支付',
value: 'wechat',
disabled: true,
},
{
icon: '/static/img/shop/pay/wallet.png',
title: '余额支付',
value: 'wallet',
disabled: true,
},
// {
// icon: '/static/img/shop/pay/alipay.png',
// title: '支付宝支付',
// value: 'alipay',
// disabled: true,
// },
// {
// icon: '/static/img/shop/pay/apple.png',
// title: 'Apple Pay',
// value: 'apple',
// disabled: true,
// },
// {
// icon: '/static/img/shop/pay/wallet.png',
// title: '模拟支付',
// value: 'mock',
// disabled: true,
// },
];
const platform = sheep.$platform.name;
// 1. 处理【微信支付】
const wechatMethod = payMethods[0];
if (
(platform === 'WechatOfficialAccount' && channels.includes('wx_pub')) ||
(platform === 'WechatMiniProgram' && channels.includes('wx_lite')) ||
(platform === 'App' && channels.includes('wx_app'))
) {
wechatMethod.disabled = false;
}
wechatMethod.disabled = false; // TODO 芋艿：临时测试
// 1. 处理【微信支付】
const wechatMethod = payMethods[0];
if (
(platform === 'WechatOfficialAccount' && channels.includes('wx_pub')) ||
(platform === 'WechatMiniProgram' && channels.includes('wx_lite')) ||
(platform === 'App' && channels.includes('wx_app'))
) {
wechatMethod.disabled = false;
}
wechatMethod.disabled = false; // TODO 芋艿：临时测试
// 3. 处理【余额支付】
const walletMethod = payMethods[1];
if (channels.includes('wallet')) {
walletMethod.disabled = false;
}
// // 2. 处理【支付宝支付】
// const alipayMethod = payMethods[1];
// if (
// (platform === 'WechatOfficialAccount' && channels.includes('alipay_wap')) ||
// (platform === 'WechatMiniProgram' && channels.includes('alipay_wap')) ||
// (platform === 'App' && channels.includes('alipay_app'))
// ) {
// alipayMethod.disabled = false;
// }
// 2. 处理【支付宝支付】
const alipayMethod = payMethods[1];
if (
(platform === 'WechatOfficialAccount' && channels.includes('alipay_wap')) ||
(platform === 'WechatMiniProgram' && channels.includes('alipay_wap')) ||
(platform === 'App' && channels.includes('alipay_app'))
) {
alipayMethod.disabled = false;
}
// 3. 处理【余额支付】
const walletMethod = payMethods[2];
if (channels.includes('wallet')) {
walletMethod.disabled = false;
}
// 4. 处理【苹果支付】TODO 芋艿：未来接入
// 5. 处理【模拟支付】
const mockMethod = payMethods[4];
if (channels.includes('mock')) {
mockMethod.disabled = false;
}
return payMethods;
}
// // 4. 处理【苹果支付】TODO 芋艿：未来接入
// // 5. 处理【模拟支付】
// const mockMethod = payMethods[4];
// if (channels.includes('mock')) {
// mockMethod.disabled = false;
// }
return payMethods;
}

15
sheep/scss/index.scss
View File

@ -25,3 +25,18 @@ page {
color: transparent;
display: none;
}
/* 主题颜色 */
.lv{
background:rgba(72,204,82) !important;
}
.blue{
background:rgba(28,165,233) !important;
}
.pink{
background:#ff448f !important;
}
.orange{
background:#fe5c2d !important;
}

236
sheep/store/app.js
View File

@ -1,134 +1,140 @@
import DiyApi from '@/sheep/api/promotion/diy';
import { defineStore } from 'pinia';
import {
defineStore
} from 'pinia';
import $platform from '@/sheep/platform';
import $router from '@/sheep/router';
import user from './user';
import sys from './sys';
const app = defineStore({
id: 'app',
state: () => ({
info: {
// 应用信息
name: '', // 商城名称
logo: '', // logo
version: '', // 版本号
copyright: '', // 版权信息 I
copytime: '', // 版权信息 II
id: 'app',
state: () => ({
info: {
// 应用信息
name: '', // 商城名称
logo: '', // logo
version: '', // 版本号
copyright: '', // 版权信息 I
copytime: '', // 版权信息 II
cdnurl: '', // 云存储域名
filesystem: '', // 云存储平台
},
platform: {
share: {
methods: [], // 支持的分享方式
forwardInfo: {}, // 默认转发信息
posterInfo: {}, // 海报信息
linkAddress: '', // 复制链接地址
},
bind_mobile: 0, // 登陆后绑定手机号提醒 (弱提醒，可手动关闭)
},
template: {
// 店铺装修模板
basic: {}, // 基本信息
home: {
// 首页模板
style: {},
data: [],
},
user: {
// 个人中心模板
style: {},
data: [],
},
},
shareInfo: {}, // 全局分享信息
has_wechat_trade_managed: 0, // 小程序发货信息管理 0 没有 || 1 有
}),
actions: {
// 获取Shopro应用配置和模板
async init(templateId = null) {
// 检查网络
const networkStatus = await $platform.checkNetwork();
if (!networkStatus) {
$router.error('NetworkError');
}
cdnurl: '', // 云存储域名
filesystem: '', // 云存储平台
},
platform: {
share: {
methods: [], // 支持的分享方式
forwardInfo: {}, // 默认转发信息
posterInfo: {}, // 海报信息
linkAddress: '', // 复制链接地址
},
bind_mobile: 0, // 登陆后绑定手机号提醒 (弱提醒，可手动关闭)
goodsType: '' //商城分类样式
},
template: {
// 店铺装修模板
basic: {}, // 基本信息
home: {
// 首页模板
style: {},
data: [],
},
user: {
// 个人中心模板
style: {},
data: [],
},
},
shareInfo: {}, // 全局分享信息
has_wechat_trade_managed: 0, // 小程序发货信息管理 0 没有 || 1 有
}),
actions: {
// 获取Shopro应用配置和模板
async init(templateId = null) {
// 检查网络
const networkStatus = await $platform.checkNetwork();
if (!networkStatus) {
$router.error('NetworkError');
}
// 加载装修配置
await adaptTemplate(this.template, templateId);
// 加载装修配置
const res2 = await adaptTemplate(this.template, templateId);
console.log(res2,"--------------")
// TODO 芋艿：未来支持管理后台可配；对应 https://api.shopro.sheepjs.com/shop/api/init
if (true) {
this.info = {
name: '芋道商城',
logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png',
version: '1.1.13',
copyright: '全部开源，个人与企业可 100% 免费使用',
copytime: 'Copyright© 2018-2024',
// TODO 芋艿：未来支持管理后台可配；对应 https://api.shopro.sheepjs.com/shop/api/init
if (true) {
this.info = {
name: '芋道商城',
logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png',
version: '1.1.13',
copyright: '全部开源，个人与企业可 100% 免费使用',
copytime: 'Copyright© 2018-2024',
cdnurl: 'https://zysc.fjptzykj.com:3000', // 云存储域名
filesystem: 'qcloud', // 云存储平台
};
this.platform = {
share: {
methods: ['poster', 'link'],
linkAddress: 'http://127.0.0.1:3000', // TODO 芋艿：可以考虑改到 .env 那
posterInfo: {
user_bg: '/shangcheng/baa4f41883b4bb8880ff83281f258418281ea0383c505001300ca2953299db8a.png',
goods_bg: '/shangcheng/goods-poster-bg.png',
groupon_bg: '/shangcheng/groupon-poster-bg.png',
},
},
bind_mobile: 0,
goodsType:res2.goodsType,
themeType:res2.themeType
};
this.has_wechat_trade_managed = 0;
cdnurl: 'https://zysc.fjptzykj.com:3000', // 云存储域名
filesystem: 'qcloud', // 云存储平台
};
this.platform = {
share: {
methods: ['poster', 'link'],
linkAddress: 'http://127.0.0.1:3000', // TODO 芋艿：可以考虑改到 .env 那
posterInfo: {
user_bg: '/shangcheng/user-poster-bg.png',
goods_bg: '/shangcheng/goods-poster-bg.png',
groupon_bg: '/shangcheng/groupon-poster-bg.png',
},
},
bind_mobile: 0,
};
this.has_wechat_trade_managed = 0;
// 加载主题
const sysStore = sys();
sysStore.setTheme();
// 加载主题
const sysStore = sys();
sysStore.setTheme();
// 模拟用户登录
const userStore = user();
if (userStore.isLogin) {
userStore.loginAfter();
}
return Promise.resolve(true);
} else {
$router.error('InitError', res.msg || '加载失败');
}
},
},
persist: {
enabled: true,
strategies: [
{
key: 'app-store',
},
],
},
// 模拟用户登录
const userStore = user();
if (userStore.isLogin) {
userStore.loginAfter();
}
return Promise.resolve(true);
} else {
$router.error('InitError', res.msg || '加载失败');
}
},
},
persist: {
enabled: true,
strategies: [{
key: 'app-store',
}, ],
},
});
// todo: @owen 先做数据适配，后期重构
const adaptTemplate = async (appTemplate, templateId) => {
const { data: diyTemplate } = templateId
? // 查询指定模板，一般是预览时使用
await DiyApi.getDiyTemplate(templateId)
: await DiyApi.getUsedDiyTemplate();
// 模板不存在
if (!diyTemplate) {
$router.error('TemplateError');
return;
}
const {
data: diyTemplate
} = templateId
? // 查询指定模板，一般是预览时使用
await DiyApi.getDiyTemplate(templateId) :
await DiyApi.getUsedDiyTemplate();
// 模板不存在
if (!diyTemplate) {
$router.error('TemplateError');
return;
}
const tabBar = diyTemplate?.property?.tabBar;
if (tabBar) {
appTemplate.basic.tabbar = tabBar;
if (tabBar?.theme) {
appTemplate.basic.theme = tabBar?.theme;
}
}
appTemplate.home = diyTemplate?.home;
appTemplate.user = diyTemplate?.user;
const tabBar = diyTemplate?.property?.tabBar;
if (tabBar) {
appTemplate.basic.tabbar = tabBar;
if (tabBar?.theme) {
appTemplate.basic.theme = tabBar?.theme;
}
}
appTemplate.home = diyTemplate?.home;
appTemplate.user = diyTemplate?.user;
return diyTemplate
};
export default app;
export default app;

24
sheep/ui/su-number-box/su-number-box.vue
View File

@ -11,6 +11,10 @@
'uni-numbox--disabled': inputValue <= min || disabled,
'groupon-btn': activity === 'groupon',
'seckill-btn': activity === 'seckill',
'lvv' : vsl == 'lv',
'bluev' : vsl == 'blue',
'pinkv' : vsl == 'pink',
'orangev' : vsl == 'orange',
}"
@click="_calcValue('minus')"
></text>
@ -33,6 +37,10 @@
'uni-numbox--disabled': inputValue >= max || disabled,
'groupon-btn': activity === 'groupon',
'seckill-btn': activity === 'seckill',
'lvv' : vsl == 'lv',
'bluev' : vsl == 'blue',
'pinkv' : vsl == 'pink',
'orangev' : vsl == 'orange',
}"
@click="_calcValue('plus')"
></text>
@ -59,6 +67,10 @@
name: 'UniNumberBox',
emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
props: {
vsl:{
type: String,
default: '',
},
value: {
type: [Number, String],
default: 1,
@ -185,6 +197,18 @@
};
</script>
<style lang="scss" scoped>
.bluev{
color:rgba(28,165,233) !important;
}
.lvv{
color:rgba(72,204,82) !important;
}
.pinkv{
color:#ff448f !important;
}
.orangev{
color:#fe5c2d !important;
}
.uni-numbox .uni-numbox--disabled {
color: #c0c0c0 !important;
/* #ifdef H5 */

2
sheep/ui/su-status-bar/su-status-bar.vue
View File

@ -25,6 +25,6 @@
height: var(--status-bar-height);
}
.ss {
background: rgba(248, 83, 42);
background: #e93422;
}
</style>

17
sheep/ui/su-tabbar-item/su-tabbar-item.vue
View File

@ -32,6 +32,7 @@
:style="{
color: isActive ? parentData.activeColor : parentData.color,
}"
:class="vl && isActive ? `${vl}v` : ''"
>
{{ text }}
</text>
@ -65,6 +66,10 @@
type: String,
default: '',
},
vl: {
type: String,
default: '',
},
// 跳转的页面路径
url: {
type: String,
@ -185,6 +190,18 @@
</script>
<style lang="scss" scoped>
.lvv{
color:rgba(72,204,82) !important;
}
.bluev{
color:rgba(28,165,233) !important;
}
.pinkv{
color: #ff448f !important;
}
.orangev{
color: #fe5c2d !important;
}
.tabbar-center-item {
height: 40px;
width: 40px;

BIN
static/images/seckilbg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 82 KiB

6
uni_modules/z-paging/components/z-paging/z-paging.vue
View File

@ -339,7 +339,11 @@ by ZXLee
</script>
<script src="./js/z-paging-main.js" />
<style scoped>
<style scoped lang="scss">
@import "./css/z-paging-main.css";
@import "./css/z-paging-static.css";
.zp-list-cell{
padding: 0 15px;
}
</style>