Compare commits

..

No commits in common. 'main' and 'feature/comment-0624-ch' have entirely different histories.

@ -1,4 +1,4 @@
FROM node:14.17.0
FROM node:12.13.1
WORKDIR /workload
COPY nuxt.config.js /workload/nuxt.config.js

@ -5,59 +5,30 @@
* @LastEditTime: 2022-05-07 11:39:38
* @Description: file content
-->
# shop-pc
## 前置环境
由于项目依赖问题,开发 `node` 版本必须是 `14`
如果电脑安装 `Node 18`,那么怎么添多个 `node` 版本,可以使用 `nvm` 版本管理工具。具体安装可以参考下面教程
[window install nvm](https://juejin.cn/post/7074108351524634655)
[mac install nvm](https://juejin.cn/post/7206882855200047161)
## 修改前端接口请求地址
进入到 ` plugins/config/env.js` 中:
```js
// 修改对应值即可
const ENV = {
base_url: "https://k8s-horse-gateway.mashibing.cn",
imUrl: "wss://k8s-horse-gateway.mashibing.cn",
};
export default ENV;
```
> `注意 ⚠️`:通常本地开发访问线上接口地址时会出现跨越(协议、域名、端口不一样时就会出现跨越问题),此时后端服务需要配置跨域相关的内容。
## 运行&打包
- 运行直接执行 npm run dev 打包执行 npm run build 即可,会根据分支读取不同环境变量配置;
- 运行直接执行 npm run dev 打包执行npm run build 即可,会根据分支读取不同环境变量配置;
## 环境变量配置
- 环境变量配置文件 env.config;
- 环境变量配置文件env.config;
- 配置与分支对应关系msb_prod -> prod msb_beta -> beta msb_test -> test msb-其他 -> dev
- 输出的环境变量文件plugins/config/env.js
- 修改环境变量配置后需要执行 “ node env.config " 输出的环境变量才会更新
```js
``` js
// 直接引入输出的配置文件即可
import ENV from "@/plugins/config/env.js";
import ENV from '@/plugins/config/env.js';
// 直接访问你在配置文件中定义的属性
console.log(ENV.baseUrl);
```
## 公共方法 utils
```
- 公共方法统一放置 utils 文件夹内,可以按分类建方法文件 如:验证类 verify.js 请求类 request.js
## 公共方法utils
- 公共方法统一放置utils文件夹内可以按分类建方法文件 如验证类verify.js 请求类request.js
- 所有公共方法采用大驼峰命名法
- 所有的方法都从 index.js 输出,引入时统一引入 index不允许直接引入方法文件
- 所有的方法都从index.js输出引入时统一引入index不允许直接引入方法文件
- 所有方法文件如果导出的是多个方法,不允许在定义方法时导出,必须在文件底部一一导出,并附上方法简单的注释
```js
``` js
// 正确
import {Req, IsPhone} from '@/common/utils';
@ -75,25 +46,21 @@ export {
IsEmail
}
```
## 组件
- 根目录的components 只放置真正的组件某个页面的业务模块应该在pages的相应目录下新建module目录放置
- 所有的自定义组件文件名以大驼峰命名且在templet中使用也用大驼峰形式使用(包括页面内的模块组件)
- 根目录的 components 只放置真正的组件,某个页面的业务模块应该在 pages 的相应目录下新建 module 目录放置
- 所有的自定义组件文件名以大驼峰命名,且在 templet 中使用也用大驼峰形式使用(包括页面内的模块组件)
## storage 的使用
## storage的使用
- 不要在页面内直接使用loaclStorage全都放置到vuex中做一次管理
- 不要在页面内直接使用 loaclStorage全都放置到 vuex 中做一次管理
## 请求
- 项目中有两个 axios 请求实例,一个事 nuxt 自带的(不需要 Token 请使用这个),一个是额外封装的(需要 Token 请使用这个);
- 需要 Token 的请求,不要写在 asyncData 中;
- 项目中有两个axios请求实例一个事nuxt自带的不需要Token请使用这个一个是额外封装的需要Token请使用这个
- 需要Token的请求不要写在asyncData中
- 所有请求方法命名以Api+请求类型+具体方) 法命名
- 所有请求使用 ToAsyncAwait 包裹
- 不允许使用 try catch 和 then 处理返回结果
```js
- 所有请求使用ToAsyncAwait 包裹
- 不允许使用try catch 和 then 处理返回结果
``` js
// 使用示例
// xxapi.js
import {ToAsyncAwait, ReqestTk} from '@/common/utils'
@ -115,16 +82,13 @@ export {
}
```
## css
- 采用BEM命名法
- 采用 BEM 命名法
### 兼容 CSS
```css
### 兼容CSS
``` css
/* 以下兼容方式的样式请使用util.css中的adj方法 */
.my-class {
.my-class{
transform: translate3d(-50%, 0, 0);
-webkit-transform: translate3d(-50%, 0, 0);
-moz-transform: translate3d(-50%, 0, 0);
@ -133,22 +97,22 @@ export {
}
/* 使用以下方法 */
@import "~/assets/scss/util.scss";
.my-class {
.my-class{
@include adj(transform, translate3d(-50%, 0, 0));
}
```
## 登录相关
```javascript
// 访问token
this.$store.state.token;
this.$store.state.token
// 设置token
this.$store.commit("setToken");
this.$store.commit('setToken')
// 退出登录
this.$store.commit("setLoginOut");
this.$store.commit('setLoginOut')
// 获取登录的用户信息
this.$store.state.userInfo;
this.$store.state.userInfo
// 登录拦截
// 示例:点击购买课程前需要判断当前用户是否登录,未登录则弹出登录弹窗
@ -158,4 +122,6 @@ function onPurchaseCourse() {
}
// 此处省略其他业务代码...
}
```

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

@ -2,7 +2,7 @@
* @Author: ch
* @Date: 2022-06-24 11:43:04
* @LastEditors: ch
* @LastEditTime: 2022-07-01 18:13:33
* @LastEditTime: 2022-06-30 19:46:42
* @Description: file content
-->
<template>
@ -24,7 +24,7 @@
<el-rate :value="commentDetail.commentScore" disabled/>
<span class="time">{{FormatDate(commentDetail.createTime, 'yyyy-mm-dd hh:ii')}}</span>
</div>
<p class="sku" v-if="commentDetail.skuName">{{commentDetail.skuName}}</p>
<p class="sku">已购买{{commentDetail.skuName}}</p>
<div class="ctx">{{commentDetail.commentContent}}</div>
<!-- 图片预览 -->
<UiImgs v-if="imgs.length" :list="imgs" class="imgs" />
@ -118,8 +118,8 @@ export default {
answerVisible : false,
answerContent : '',
answer : null,
isLike : this.commentDetail.isLike,
usefulCount : this.commentDetail.usefulCount,
isLike : false,
usefulCount : 0,
replyCount : this.commentDetail.replyCount,
showFollowForm : this.isFollowForm,
followComment : this.commentDetail.followComment || null
@ -147,16 +147,12 @@ export default {
}
},
watch:{
commentDetail:{
handler(){
commentDetail(){
this.followComment = this.commentDetail.followComment;
this.replyCount = this.commentDetail.replyCount || 0;
this.answerCommentList = this.commentDetail.answerCommentList || [];
this.isLike = this.commentDetail.isLike;
this.usefulCount = this.commentDetail.usefulCount;
},
deep : true
}
},
mounted(){

@ -2,45 +2,32 @@
* @Author: ch
* @Date: 2022-05-08 00:39:50
* @LastEditors: ch
* @LastEditTime: 2022-07-11 11:32:27
* @LastEditTime: 2022-06-15 16:40:14
* @Description: file content
-->
<template>
<el-dialog :title="title" width="380px" class="box" center
<el-dialog title="打开微信扫描付款" width="380px" class="box" center
:visible.sync="myVisible" @open="open" @close="close" :modal="false">
<div class="pay-type" v-if="!myPayType">
<el-radio-group v-model="myPayType">
<el-radio label="wx" class="pay-type--item" >
<img class="pay-type--wx" src="@/assets/img/order/wx.png"/>
</el-radio>
<el-radio label="ali" class="pay-type--item" >
<img class="pay-type--ali" src="@/assets/img/order/zfb.png"/>
</el-radio>
</el-radio-group>
</div>
<div class="pay" v-else>
<div class="pay">
<span class="pay--timer">{{timerTxt}}</span>
<UiMoney class="money" sufSize="14px" preSize="14px" size="20px"
float suffix prefix :money="orderInfo.payAmount"/>
<div class="pay--code">
<img :src="imgUrl" v-if="imgUrl"/>
<span v-else>{{imgTip}}</span>
<!-- <p v-if="!timer"></p> -->
</div>
<p class="pay--tips">如支付后没有自动跳转请点击 <span class="pay--finish" @click="finish"></span></p>
<UiButton class="pay--btn" type='yellow_gradual' @click="back"></UiButton>
</div>
</el-dialog>
</template>
<script>
import {ApiPostWxPayCdoeImg, ApiPostAliPayCdoeImg} from '@/plugins/api/pay'
import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
import {ApiGetOrderDetail} from '@/plugins/api/order'
import UiMoney from './UiMoney.vue';
import UiButton from './UiButton.vue';
import QRcode from 'qrcode';
import {CreateUUID} from '@/plugins/utils';
export default {
components: { UiMoney, UiButton },
components: { UiMoney },
props : {
visible : {
type : Boolean,
@ -49,30 +36,15 @@ export default {
orderId : {
type : Number | String,
default : ''
},
payType:{
type : String | null,
require : true
}
},
data(){
return {
orderInfo: {},
imgUrl : '',
imgTip : '二维码获取中',
timerTxt : '',
startSecondNum : 0,
timerStop : null,
myPayType : null,
payUUID : null
}
},
watch:{
myPayType(val){
// change使watch
if(val){
this.getQrCode();
}
}
},
computed:{
@ -83,25 +55,12 @@ export default {
set(val){
this.$emit('update:visible', val)
}
},
title(){
let str = '请选择支付方式';
if(this.myPayType === 'wx'){
str = '打开微信扫描付款';
}else if(this.myPayType === 'ali'){
str = '打开支付宝扫描付款';
};
return str;
}
},
methods : {
open(){
this.getOrderInfo();
this.myPayType = this.payType;
if(this.myPayType){
this.getQrCode();
}
this.getCodeImg();
},
/**
* 获取订单最新信息
@ -123,44 +82,9 @@ export default {
}
},
getQrCode(){
this.payUUID = CreateUUID();
if(this.myPayType == 'wx'){
this.getWxCodeImg(this.payUUID);
}else if(this.myPayType === 'ali'){
this.getAliCodeImg(this.payUUID);
}
},
/**
* 支付宝二维码
*/
async getAliCodeImg(uid){
const {error, result} = await ApiPostAliPayCdoeImg({orderId : this.orderId});
if(this.payUUID !== uid){
return false;
}
async getCodeImg(){
const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
if(error){
this.imgTip = error.message;
return false;
}
QRcode.toDataURL(result.payDataInfo.qrCodeData,{
width : 200
}, (err, url)=>{
this.imgUrl = url;
})
},
/**
* 微信二维码
*/
async getWxCodeImg(uid){
const {error, result} = await ApiPostWxPayCdoeImg({orderId : this.orderId});
if(this.payUUID !== uid){
return false;
}
if(error){
this.imgTip = error.message;
return false;
}
QRcode.toDataURL(result.payDataInfo.codeUrlData,{
@ -199,17 +123,11 @@ export default {
close(){
clearInterval(this.timerStop);
this.timerStop = null;
this.myPayType = this.payType;
this.$emit('cancel');
},
finish(){
this.myVisible = false;
this.$emit('finish')
},
back(){
this.myPayType = null;
this.imgUrl = null;
this.imgTip = '二维码获取中'
}
}
}
@ -218,25 +136,6 @@ export default {
.box{
background: rgba(0,0,0, .5);
}
.pay-type{
width: 270px;
padding: 0 30px;
&--item{
width: 270px;
height: 56px;
display: flex;
align-items: center;
border: 1px solid #ccc;
padding-left: 55px;
margin-bottom: 20px;
}
&--wx{
width: 108px;
}
&--ali{
width: 78px;
}
}
.pay{
text-align: center;
&--code{
@ -251,10 +150,6 @@ export default {
left: -20px;
top: -20px;
}
span{
line-height: 100px;
color: #999;
}
}
&--timer{
color: #999;
@ -268,12 +163,6 @@ export default {
color: #FF512B;
cursor: pointer;
}
&--btn{
border-radius: 4px;
width: 143px;
height: 32px;
margin-top: 20px;
}
}
.money{
color: #FF512B;

@ -28,6 +28,7 @@ const envConfig = {
imUrl : 'wss://you-gateway.mashibing.com'
}
}
const branch = getRepoInfo().branch; // 调用获取git信息
let curEnvConfig = null;
const argv = global.process.argv;
for(key in envConfig){

@ -18,8 +18,6 @@
<div class="layout-footer-wrap__address">
© 2020 马士兵北京教育科技有限公司
地址北京市海淀区北三环中路44号4号楼1层114 京ICP备17012835号-1
<a href="https://oss-cdn.mashibing.com/teacher_attachment/user_00020172/yyzz.jpg" target="_blank">营业页执照</a>
<a href="https://oss-cdn.mashibing.com/default/cbwxkz.jpg" target="_blank">出版物经营许可证新出发京零字第海210140号</a>
</div>
</div>
</div>
@ -91,9 +89,6 @@ export default {
color: #999999;
text-align: center;
line-height: 20px;
a{
color: #999;
}
}
}
}

@ -96,7 +96,7 @@ export default {
},
methods: {
getList(id) {
let list = this.list.filter((item) => item && item.id == id);
let list = this.list.filter((item) => item.id == id);
// console.log(`list[0]?.list`, list[0]?.list);
return list[0]?.list || [];
},

@ -2,69 +2,75 @@
* @Author: ch
* @Date: 2022-05-03 22:14:16
* @LastEditors: ch
* @LastEditTime: 2023-04-21 16:14:15
* @LastEditTime: 2022-06-24 14:17:59
* @Description: file content
*/
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "马士兵严选",
title: '马士兵严选',
htmlAttrs: {
lang: "zh",
lang: 'zh'
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [{ rel: "icon", type: "image/x-icon", href: "/logo.ico" }],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/logo.ico' }
]
},
router: {
extendRoutes(routes, resolve) {
routes.push({
name: "custom",
path: "/",
component: resolve(__dirname, "pages/index/index.vue"),
});
name: 'custom',
path: '/',
component: resolve(__dirname, 'pages/index/index.vue')
})
},
middleware: ["redirect"],
middleware: ['redirect']
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["@assets/scss/global.scss", "element-ui/lib/theme-chalk/index.css"],
css: [
'@assets/scss/global.scss',
'element-ui/lib/theme-chalk/index.css'
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
"@/plugins/element-ui",
"@/plugins/axios",
"@/plugins/axiosTk.js",
"@plugins/vue-inject.js",
"@/plugins/v-distpicker",
"@/plugins/router",
"@/plugins/im",
"@/plugins/chat",
'@/plugins/element-ui',
'@/plugins/axios',
'@/plugins/axiosTk.js',
'@plugins/vue-inject.js',
'@/plugins/v-distpicker',
'@/plugins/router',
'@/plugins/im',
'@/plugins/chat'
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],
buildModules: [
],
build: {
vendor: ["v-distpicker"],
vendor: ['v-distpicker']
},
styleResources: {
scss: "@/assets/scss/global.scss",
scss: '@/assets/scss/global.scss'
},
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
"@nuxtjs/axios",
"cookie-universal-nuxt",
"@nuxtjs/style-resources",
'@nuxtjs/axios',
'cookie-universal-nuxt',
'@nuxtjs/style-resources'
],
// Build Configuration: https://go.nuxtjs.dev/config-build
@ -73,19 +79,20 @@ export default {
},
axios: {
// 表示开启代理
// proxy: true,
proxy: true,
},
proxy: {
// '/mall/': {
// target: 'https://you-gateway.mashibing.com/', // 目标接口域名
// // target: 'https://k8s-horse-gateway.mashibing.cn/', // 目标接口域名
// pathRewrite: {
// changeOrigin: true, // 表示是否跨域
// },
// },
'/mall/': {
// target: 'http://114.55.64.39:3004', // 目标接口域名
target: 'https://you-gateway.mashibing.com/', // 目标接口域名
// target: 'https://k8s-horse-gateway.mashibing.cn/', // 目标接口域名
pathRewrite: {
changeOrigin: true, // 表示是否跨域
},
},
},
server: {
port: 3000,
host: "0.0.0.0",
port: 3000, // default: 3000
host: '0.0.0.0' // default: localhost,
},
};
}

27875
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -3,9 +3,9 @@
"version": "1.0.0",
"private": true,
"scripts": {
"server": "node env.config.js & nuxt",
"server:beta": "node env.config.js --ENV:beta & nuxt",
"server:prod": "node env.config.js --ENV:prod & nuxt",
"dev": "node env.config.js & nuxt",
"dev:beta": "node env.config.js --ENV:beta & nuxt",
"dev:prod": "node env.config.js --ENV:prod & nuxt",
"build:test": "node env.config.js --ENV:test & nuxt build",
"build:beta": "node env.config.js --ENV:beta & nuxt build",
"build:prod": "node env.config.js --ENV:prod & nuxt build",
@ -21,26 +21,26 @@
"element-ui": "^2.15.8",
"js-util-all": "^1.0.6",
"lodash": "^4.17.21",
"nuxt": "2.15.8",
"nuxt": "^2.15.8",
"qrcode": "^1.5.0",
"v-distpicker": "^1.2.13",
"vue": "2.6.14",
"vue-server-renderer": "2.6.14",
"vue-template-compiler": "2.6.14"
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14"
},
"devDependencies": {
"@vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"webpack": "^4.46.0",
"node-sass": "^4.14.1",
"sass": "^1.32.13",
"sass-loader": "^7.3.1",
"babel-jest": "^27.4.4",
"eslint": "^8.15.0",
"eslint-plugin-prettier": "^4.0.0",
"git-repo-info": "^2.1.1",
"jest": "^27.4.4",
"node-sass": "^4.14.1",
"prettier": "^2.6.2",
"sass": "^1.32.13",
"sass-loader": "^7.3.1",
"vue-jest": "^3.0.4",
"webpack": "^4.46.0"
"vue-jest": "^3.0.4"
}
}

@ -2,7 +2,7 @@
* @Author: ch
* @Date: 2022-05-04 17:30:58
* @LastEditors: ch
* @LastEditTime: 2022-06-30 11:19:15
* @LastEditTime: 2022-05-27 19:54:39
* @Description: file content
-->
@ -12,17 +12,11 @@
<h3 class="title">收货地址</h3>
<BsAddress v-model="address"/>
</template>
<h3 class="title">支付方式</h3>
<!-- <h3 class="title">支付方式</h3>
<div class="pay-type">
<el-radio-group v-model="payType">
<el-radio label="wx" >
<img class="pay-type--wx" src="@/assets/img/order/wx.png"/>
</el-radio>
<el-radio label="ali" >
<img class="pay-type--ali" src="@/assets/img/order/zfb.png"/>
</el-radio>
</el-radio-group>
</div>
<el-radio label="微信支付" />
<el-radio label="支付宝支付" />
</div> -->
<h3 class="title">确认商品信息</h3>
<OrderInfo :products="orderInfo.products" />
<Message :orderInfo="orderInfo" :message.sync="userMessage"/>
@ -30,7 +24,7 @@
<div class="pay">
<UiButton radius type="red_panel" @click="submit"></UiButton>
</div>
<BsPay :visible.sync="payVisible" :payType="payType" :orderId="payOrder.orderId"
<BsPay :visible.sync="payVisible" :orderId="payOrder.orderId"
@cancel="cancelPay" @finish="finishPay" />
</div>
</template>
@ -51,7 +45,6 @@ export default {
orderInfo : {},
userMessage : '',
payOrder : {},
payType : 'wx',
payVisible : false,
payTimerTxt : '',
payTimerStop : null,
@ -172,12 +165,6 @@ export default {
.pay-type{
border: 1px solid #DDDDDD;
padding: 30px 70px;
&--wx{
width: 130px;
}
&--ali{
width:92px
}
}
.pay{
text-align: right;

@ -1,26 +0,0 @@
/*
* @Author: ch
* @Date: 2022-05-08 00:44:22
* @LastEditors: ch
* @LastEditTime: 2022-06-29 14:51:00
* @Description: file content
*/
import {axiosTk} from "../axiosTk";
import {ToAsyncAwait} from "@/plugins/utils";
import ENV from '../config/env';
const BASE_URL = `${ENV.base_url}/mall/trade`;
/**
* 获取微信支付二维码
* @param {*} data
*/
export const ApiPostWxPayCdoeImg = (data) =>
ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/wxPay/nativeData`, data));
/**
* 获取支付宝支付二维码
* @param {*} data
*/
export const ApiPostAliPayCdoeImg = (data) =>
ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/aliPay/qr`, data));

@ -0,0 +1,17 @@
/*
* @Author: ch
* @Date: 2022-05-08 00:44:22
* @LastEditors: ch
* @LastEditTime: 2022-06-15 15:07:13
* @Description: file content
*/
import {axiosTk} from "../axiosTk";
import {ToAsyncAwait} from "@/plugins/utils";
import ENV from '../config/env';
const BASE_URL = `${ENV.base_url}/mall/trade`;
export const ApiPostPayCdoeImg = (data) =>
ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/wxPay/nativeData`, data));
Loading…
Cancel
Save