修改UI 商品详情选择商品

msb_beta
ch 3 years ago
parent 47423491ed
commit 8813c689c6

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2019-04-01 01:47:12 * @Date: 2019-04-01 01:47:12
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-15 10:44:33 * @LastEditTime: 2022-04-22 14:47:06
* @Description: file content * @Description: file content
--> -->
<script> <script>
@ -30,5 +30,12 @@
font-size: $font-size-base; font-size: $font-size-base;
color: $color-grey6; color: $color-grey6;
} }
body{
padding-bottom: constant(safe-area-inset-bottom);
/* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom);
/* 兼容 iOS >= 11.2 */
}
</style> </style>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-17 16:36:59 * @Date: 2022-03-17 16:36:59
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-20 16:07:24 * @LastEditTime: 2022-04-22 20:30:03
* @Description: 针对uniapp request请求做了一次封装使用思维参考axios * @Description: 针对uniapp request请求做了一次封装使用思维参考axios
* *
* *
@ -81,7 +81,7 @@ class MsbUniRequest {
}else{ }else{
let newRes = this.hook.success(response, option); let newRes = this.hook.success(response, option);
// 业务结果处理可能为一个Promise对象根据结果调用错误或正确状态 // 业务结果处理可能为一个Promise对象根据结果调用错误或正确状态
if(newRes.constructor === Promise){ if(newRes && newRes.constructor === Promise){
newRes.then(res => { newRes.then(res => {
resolve(res); resolve(res);
}, error =>{ }, error =>{

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-17 17:42:32 * @Date: 2022-03-17 17:42:32
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-22 11:12:36 * @LastEditTime: 2022-04-22 16:37:06
* @Description: 项目接口请求统一处理器返回一个需要token和不需要token的请求封装方法 * @Description: 项目接口请求统一处理器返回一个需要token和不需要token的请求封装方法
*/ */

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-20 13:11:55 * @Date: 2022-03-20 13:11:55
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 16:00:40 * @LastEditTime: 2022-04-22 11:37:16
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -59,7 +59,8 @@ export default {
} }
&--icon { &--icon {
width: 280rpx; width: 380rpx;
height: 240rpx;
} }
} }
</style> </style>

@ -2,12 +2,12 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-19 11:37:50 * @Date: 2022-04-19 11:37:50
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-19 14:42:49 * @LastEditTime: 2022-04-22 18:11:00
* @Description: file content * @Description: file content
--> -->
<template> <template>
<UiRadioPicker title="请选择支付方式" :show="show" :options="options" <UiRadioPicker title="请选择支付方式" :show="show" :options="options"
@close="close" @confirm="confirm" /> @close="close" @confirm="confirm" />
</template> </template>
<script> <script>
import UiRadioPicker from './UiRadioPicker.vue' import UiRadioPicker from './UiRadioPicker.vue'

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-26 10:06:38 * @Date: 2022-03-26 10:06:38
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-19 14:38:07 * @LastEditTime: 2022-04-22 20:07:26
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -26,7 +26,7 @@ export default {
}, },
methods:{ methods:{
click(){ click(){
!this.disabed && this.$emit('click'); !this.disable && this.$emit('click');
} }
} }
} }
@ -36,18 +36,25 @@ export default {
display: inline-block; display: inline-block;
padding: 0 50rpx; padding: 0 50rpx;
border-radius: 50rpx; border-radius: 50rpx;
&::after{
display: none;
}
&__normal{ &__normal{
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
font-size: $font-size-base; font-size: $font-size-base;
} }
&__min{ &__min{
height: 60rpx;
line-height: 60rpx;
font-size: $font-size-base;
}
&__small{
height: 50rpx; height: 50rpx;
line-height: 50rpx; line-height: 50rpx;
font-size: $font-size-base; font-size: $font-size-base;
} }
&__max{ &__max{
width: 690rpx;
height: 80rpx; height: 80rpx;
line-height: 80rpx; line-height: 80rpx;
font-size: $font-size-lg; font-size: $font-size-lg;
@ -63,7 +70,7 @@ export default {
&__line{ &__line{
background: none; background: none;
color: $color-grey6; color: $color-grey6;
border: 1px solid rgb(192, 185, 185); border: 1px solid $color-grey4;
} }
&__primaryLine{ &__primaryLine{
background: none; background: none;

@ -2,21 +2,21 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-26 18:29:19 * @Date: 2022-03-26 18:29:19
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-09 15:01:40 * @LastEditTime: 2022-04-22 15:54:57
* @Description: file content * @Description: file content
--> -->
<template> <template>
<view class="uiCell" @click="$emit('click')"> <view class="ui-cell" @click="$emit('click')">
<slot name="icon"></slot> <slot name="icon"></slot>
<view class="uiCell--left"> <view class="ui-cell--left">
<text class="uiCell--title">{{title}}</text> <text class="ui-cell--title">{{title}}</text>
<text class="uiCell--label">{{label}}</text> <text class="ui-cell--label" v-if="label">{{label}}</text>
</view> </view>
<slot name="value"> <slot name="value">
<text class="uiCell--value">{{value}}</text> <text class="ui-cell--value">{{value}}</text>
</slot> </slot>
<slot name="right-icon" v-if="rightIcon"> <slot name="right-icon" v-if="rightIcon">
<image class="uiCell--rightIcon" src="@/static/common/arrow.png"/> <image class="ui-cell--rightIcon" src="@/static/common/arrow.png"/>
</slot> </slot>
</view> </view>
</template> </template>
@ -43,9 +43,9 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.uiCell{ .ui-cell{
min-height: 100rpx; min-height: 100rpx;
border-bottom: 1px solid $color-grey2; border-bottom: 1px solid $color-grey1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -53,6 +53,7 @@ export default {
&--title{ &--title{
color: $color-grey6; color: $color-grey6;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $font-size-base;
display: block; display: block;
} }
&--label{ &--label{

@ -2,17 +2,17 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-31 14:49:33 * @Date: 2022-03-31 14:49:33
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 16:27:29 * @LastEditTime: 2022-04-22 18:24:57
* @Description: file content * @Description: file content
--> -->
<template> <template>
<view class="ui-goods"> <view class="ui-goods">
<view class="ui-goods-item"> <view class="ui-goods-item">
<image class="ui-goods-item--image" mode="widthFix" :src="data.productImageUrl" /> <image class="ui-goods-item--image" mode="aspectFit" :src="data.productImageUrl" />
<view class="ui-goods-item--right"> <view class="ui-goods-item--right">
<view class="ui-goods-item--con"> <view class="ui-goods-item--con">
<text class="ui-goods-item--title">{{data.productName}}</text> <text class="ui-goods-item--title">{{data.productName}}</text>
<UiMoney :money="data.realAmount"></UiMoney> <UiMoney :money="data.realAmount" prefix float suffix></UiMoney>
</view> </view>
<view class="ui-goods-item--desc"> <view class="ui-goods-item--desc">
<text>{{data.skuDescribe}}</text> <text>{{data.skuDescribe}}</text>
@ -59,11 +59,13 @@ export default {
line-height: 39rpx; line-height: 39rpx;
} }
&--title{ &--title{
width: 300rpx;
overflow:hidden; overflow:hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
display:-webkit-box; display:-webkit-box;
-webkit-box-orient:vertical; -webkit-box-orient:vertical;
-webkit-line-clamp:2; -webkit-line-clamp:2;
font-weight: bold;
} }
&--pirce{ &--pirce{
font-size: 22rpx; font-size: 22rpx;
@ -86,4 +88,15 @@ export default {
} }
} }
} }
/deep/{
.ui-money{
text{
font-size: $font-size-base;
font-weight: bold;
}
.ui-money--prefix,.ui-money--suffix{
font-size: $font-size-sm;
}
}
}
</style> </style>

@ -0,0 +1,96 @@
<!--
* @Author: ch
* @Date: 2022-04-22 16:48:11
* @LastEditors: ch
* @LastEditTime: 2022-04-22 17:03:48
* @Description: file content
-->
<template>
<view class="goods-item">
<image class="goods-item--image" mode="aspectFit" :src="data.productImageUrl" />
<view class="goods-item--con">
<view class="goods-item--title-box">
<text class="goods-item--title">{{data.productName}}</text>
<UiMoney :money="data.realAmount" float prefix suffix/>
<!-- <text class="goods-item--pirce">{{data.realAmount}}</text> -->
</view>
<view class="goods-item--desc">
<text>{{data.skuDescribe}}</text>
<text class="goods-item--num">x{{data.quantity}}</text>
</view>
</view>
</view>
</template>
<script>
import UiMoney from './UiMoney.vue'
export default {
components: { UiMoney },
props : {
data : {
type : Object,
default : ()=> ({})
}
}
}
</script>
<style lang="scss" scoped>
.goods-item{
display: flex;
justify-content: space-between;
padding: 30rpx 0 0;
&--image{
width: 180rpx;
height: 180rpx;
}
&--con{
width: 480rpx;
}
&--title-box{
display: flex;
justify-content: space-between;
font-size: $font-size-base;
color: $color-grey6;
line-height: 39rpx;
}
&--title{
width: 320rpx;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
font-weight: bold;
}
&--pirce{
font-size: 22rpx;
margin-left: 60rpx;
}
&--desc{
margin-top: 20rpx;
line-height: 39rpx;
display: flex;
justify-content: space-between;
text{
font-size: $font-size-sm;
color: $color-grey4;
}
}
&--num{
font-size: $font-size-base;
margin-left: 60rpx;
}
}
/deep/{
.ui-money{
text{
font-size: $font-size-base;
font-weight: bold;
}
.ui-money--prefix,.ui-money--suffix{
font-size: $font-size-sm;
}
}
}
</style>

@ -2,14 +2,14 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-21 09:54:15 * @Date: 2022-04-21 09:54:15
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 17:44:58 * @LastEditTime: 2022-04-22 19:43:05
* @Description: file content * @Description: file content
--> -->
<template> <template>
<view class="ui-money"> <view class="ui-money">
<text v-if="prefix" class="ui-money--prefix"></text> <text v-if="prefix" class="ui-money--prefix"></text>
<text class="ui-money--price">{{moneyStr}}</text> <text class="ui-money--price">{{moneyStr}}</text>
<text v-if="flaot && suffix" class="ui-money--suffix">.{{moneyArr[1]}}</text> <text v-if="float && suffix" class="ui-money--suffix">.{{moneyArr[1]}}</text>
</view> </view>
</template> </template>
<script> <script>
@ -19,7 +19,7 @@ export default {
type : Number | String, type : Number | String,
default : '0' default : '0'
}, },
flaot : { float : {
type : Boolean, type : Boolean,
default : false default : false
}, },
@ -52,15 +52,13 @@ export default {
moneyArr (){ moneyArr (){
let moneyArr = (this.money || '0').toString().split('.'); let moneyArr = (this.money || '0').toString().split('.');
// 0 00 // 0 00
console.log(this.flaot); if(this.float){
if(this.flaot){
if(!moneyArr[1]){ if(!moneyArr[1]){
moneyArr[1] = '00'; moneyArr[1] = '00';
}else if(moneyArr[1] < 10){ }else if(moneyArr[1] < 10){
moneyArr[1] = `0${moneyArr[1]}`; moneyArr[1] = `0${moneyArr[1]}`;
} }
} }
console.log(moneyArr);
return moneyArr; return moneyArr;
} }

@ -2,12 +2,12 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-25 10:11:37 * @Date: 2022-03-25 10:11:37
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 15:27:05 * @LastEditTime: 2022-04-22 14:16:14
* @Description: file content * @Description: file content
--> -->
<template> <template>
<view class="header"> <view class="header">
<image class="header--back" v-if="back" src="@/static/search/arrow.png" @click="$Router.back()"></image> <image class="header--back" v-if="back" src="@/static/common/back.png" @click="$Router.back()"></image>
<slot name="custom"> <slot name="custom">
<text class="header--title">{{title}}</text> <text class="header--title">{{title}}</text>
<view class="header--operation"> <view class="header--operation">

@ -2,14 +2,14 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-12 10:37:24 * @Date: 2022-04-12 10:37:24
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-19 14:38:12 * @LastEditTime: 2022-04-22 18:13:08
* @Description: file content * @Description: file content
--> -->
<template> <template>
<u-popup :show="show" @close="close" round="16rpx" closeable> <u-popup :show="show" @close="close" round="16rpx" closeable>
<view class="ui-select--title" v-if="title">{{title}}</view> <view class="ui-select--title" v-if="title">{{title}}</view>
<radio-group class="ui-select--cell" @change="change"> <radio-group class="ui-select--cell">
<UiCell :title="item.label" v-for="item in options" :key="item.value"> <UiCell :title="item.label" v-for="item in options" @click="change(item)" :key="item.value">
<radio slot="right-icon" class="ui-select--radio" color="#FF875B" <radio slot="right-icon" class="ui-select--radio" color="#FF875B"
:value="item.value" :checked="item.value === selected.value"/> :value="item.value" :checked="item.value === selected.value"/>
</UiCell> </UiCell>
@ -53,7 +53,7 @@ export default {
}, },
methods:{ methods:{
change(val){ change(val){
this.selected = this.options.find(item => val.detail.value === item.value); this.selected = this.options.find(item => val.value === item.value);
}, },
confirm(){ confirm(){
if(!this.selected.value){ if(!this.selected.value){
@ -87,6 +87,9 @@ export default {
padding: 68rpx 40rpx; padding: 68rpx 40rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.ui-btn{
width: 690rpx;
}
} }
} }
</style> </style>

@ -15,7 +15,7 @@
"aliasPath" : "/login", "aliasPath" : "/login",
"style": { "style": {
"navigationStyle" : "custom", "navigationStyle" : "custom",
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "马士兵严选"
} }
}, },
{ {
@ -23,7 +23,7 @@
"aliasPath" : "/seckill", "aliasPath" : "/seckill",
"style": { "style": {
"navigationStyle" : "custom", "navigationStyle" : "custom",
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "马士兵严选"
} }
}, },
{ {
@ -31,7 +31,7 @@
"aliasPath" : "/category", "aliasPath" : "/category",
"style": { "style": {
"navigationStyle" : "custom", "navigationStyle" : "custom",
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "马士兵严选"
} }
}, },
{ {
@ -39,7 +39,7 @@
"aliasPath" : "/search", "aliasPath" : "/search",
"style": { "style": {
"navigationStyle" : "custom", "navigationStyle" : "custom",
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "马士兵严选"
} }
}, },
{ {
@ -47,7 +47,7 @@
"aliasPath" : "/goodsList", "aliasPath" : "/goodsList",
"style": { "style": {
"navigationStyle" : "custom", "navigationStyle" : "custom",
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "马士兵严选"
} }
}, },
{ {
@ -55,7 +55,7 @@
"aliasPath" : "/goodsDetail", "aliasPath" : "/goodsDetail",
"style": { "style": {
"navigationStyle" : "custom", "navigationStyle" : "custom",
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "马士兵严选"
} }
}, },
{ {
@ -63,7 +63,7 @@
"aliasPath" : "/account", "aliasPath" : "/account",
"style": { "style": {
"navigationStyle" : "custom", "navigationStyle" : "custom",
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "马士兵严选"
} }
}, },
{ {
@ -72,7 +72,7 @@
"aliasPath" : "/cart", "aliasPath" : "/cart",
"style": { "style": {
"navigationStyle" : "custom", "navigationStyle" : "custom",
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "马士兵严选"
} }
}, },
{ {
@ -81,7 +81,7 @@
"aliasPath" : "/tabBarCart", "aliasPath" : "/tabBarCart",
"style": { "style": {
"navigationStyle" : "custom", "navigationStyle" : "custom",
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "马士兵严选"
} }
}, },
{ {
@ -229,7 +229,7 @@
{ {
"path": "pages/account/message/list", "path": "pages/account/message/list",
"style": { "style": {
"navigationBarTitleText": "uni-app" "navigationBarTitleText": "马士兵严选"
} }
} }
], ],
@ -237,7 +237,7 @@
"color": "#BBBBBB", "color": "#BBBBBB",
"selectedColor": "#FF875B", "selectedColor": "#FF875B",
"backgroundColor": "#FFF", "backgroundColor": "#FFF",
"borderStyle" : "white", "borderStyle" : "#eee",
"fontSize" : "24rpx", "fontSize" : "24rpx",
"height" : "120rpx", "height" : "120rpx",
"list": [ "list": [

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-22 14:12:18 * @Date: 2022-03-22 14:12:18
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-20 19:23:18 * @LastEditTime: 2022-04-22 19:04:06
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -119,9 +119,10 @@ page {
position: fixed; position: fixed;
bottom: 89rpx; bottom: 89rpx;
left: 30rpx; left: 30rpx;
width: 670rpx;
} }
/deep/ { /deep/ {
.form--city .uiCell{ .form--city .ui-cell{
padding: 0 40rpx; padding: 0 40rpx;
} }
} }

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-22 14:12:18 * @Date: 2022-03-22 14:12:18
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 21:14:45 * @LastEditTime: 2022-04-22 19:04:16
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -138,12 +138,13 @@ page {
position: fixed; position: fixed;
bottom: 89rpx; bottom: 89rpx;
left: 30rpx; left: 30rpx;
width: 670rpx;
} }
/deep/ { /deep/ {
.del-address .uiCell--title{ .del-address .uiCell--title{
color: $color-yellow3; color: $color-yellow3;
} }
.form--city .uiCell{ .form--city .ui-cell{
padding: 0 40rpx; padding: 0 40rpx;
} }
} }

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-22 13:54:15 * @Date: 2022-03-22 13:54:15
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 21:01:49 * @LastEditTime: 2022-04-22 18:58:37
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -166,13 +166,6 @@ page{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&::before{ width: 670rpx;
display: inline-block;
content: "+";
margin-right: 20rpx;
font-size: 46rpx;
font-weight: bold;
padding-top: 10rpx;
}
} }
</style> </style>

@ -3,7 +3,7 @@
components: { UiCell },: ch components: { UiCell },: ch
* @Date: 2019-08-22 19:41:20 * @Date: 2019-08-22 19:41:20
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-19 15:39:04 * @LastEditTime: 2022-04-22 18:25:50
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -14,7 +14,6 @@
</view> </view>
<UiCell class="header--cell" :title="userInfo.nickname" label="第一个青春是上帝给的..." <UiCell class="header--cell" :title="userInfo.nickname" label="第一个青春是上帝给的..."
@click="$Router.push('/setUserInfo')"> @click="$Router.push('/setUserInfo')">
<!-- <image slot="icon" class="head-img" src="@/static/account/tx.png" shape="circle" /> -->
<image slot="icon" class="head-img" :src="userInfo.avatar || require('@/static/account/tx.png')" shape="circle" /> <image slot="icon" class="head-img" :src="userInfo.avatar || require('@/static/account/tx.png')" shape="circle" />
</UiCell> </UiCell>
<view class="order"> <view class="order">
@ -105,24 +104,25 @@ page{
} }
.header{ .header{
height: 88rpx; height: 88rpx;
display: flex;
justify-content: end;
align-items: center;
padding: 0 40rpx; padding: 0 40rpx;
position: relative; position: relative;
width: 100%;
&--msg{ &--msg{
width: 34rpx; width: 34rpx;
height: 40rpx height: 40rpx;
float: right;
margin-top: 22rpx;
} }
&--badge{ &--badge{
position: absolute; position: absolute;
right: 30rpx; right: 30rpx;
top: 10rpx; top: 10rpx;
z-index: 99; z-index: 99;
border: 1px solid #fff;
} }
&--cell{ &--cell{
border: 0; border: 0;
padding: 0 40rpx; padding: 0 60rpx 0 40rpx;
background: none; background: none;
} }
} }
@ -139,7 +139,7 @@ page{
border-radius: 16rpx; border-radius: 16rpx;
margin: 40rpx auto; margin: 40rpx auto;
padding: 30rpx; padding: 30rpx;
box-shadow: 0 0 13rpx 1px rgba(0, 0, 0, .05); // box-shadow: 0 0 13rpx 1px rgba(0, 0, 0, .05);
&--title{ &--title{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -160,9 +160,11 @@ page{
justify-content: space-around; justify-content: space-around;
&--item{ &--item{
text-align: center; text-align: center;
font-size: $font-size-sm;
color: $color-grey5;
position: relative; position: relative;
view{
font-size: $font-size-sm;
color: $color-grey5;
}
.item-icon{ .item-icon{
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
@ -172,6 +174,7 @@ page{
top: -10rpx; top: -10rpx;
right: 0; right: 0;
z-index: 99; z-index: 99;
border: 1px solid #fff;
} }
} }
} }
@ -190,4 +193,10 @@ page{
border: 0; border: 0;
} }
} }
/deep/{
.header--cell .ui-cell--title{
font-weight: bold;
font-size: $font-size-lg;
}
}
</style> </style>

@ -2,13 +2,13 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-28 15:38:23 * @Date: 2022-03-28 15:38:23
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-09 15:03:41 * @LastEditTime: 2022-04-22 19:16:20
* @Description: file content * @Description: file content
--> -->
<template> <template>
<view> <view>
<UiPageHeader title="设置昵称"> <UiPageHeader class="header" title="设置昵称">
<view slot="operation" class="headerBtn" @click="confirm"></view> <view slot="operation" class="header-btn" @click="confirm"></view>
</UiPageHeader> </UiPageHeader>
<u--input class="input" v-model="userInfo.nickname" maxlength="10" placeholder="请输入昵称" clearable ></u--input> <u--input class="input" v-model="userInfo.nickname" maxlength="10" placeholder="请输入昵称" clearable ></u--input>
<view class="tips"> <view class="tips">
@ -47,15 +47,19 @@ export default {
page{ page{
background: $color-grey1; background: $color-grey1;
} }
.headerBtn{ .header{
background: $color-grey0;
}
.header-btn{
height: 88rpx; height: 88rpx;
line-height: 88rpx; line-height: 88rpx;
font-size: $font-size-base; font-size: $font-size-base;
color: $color-yellow3; color: $color-yellow3;
} }
.input{ .input{
margin-top: 20rpx;
padding: 20rpx 40rpx !important; padding: 20rpx 40rpx !important;
height: 60rpx; height: 100rpx;
background: $color-grey0; background: $color-grey0;
border: 0; border: 0;
font-size: $font-size-base; font-size: $font-size-base;
@ -63,9 +67,11 @@ page{
} }
.tips{ .tips{
padding: 20rpx 40rpx; padding: 20rpx 40rpx;
font-size: $font-size-sm;
color: $color-grey4;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
text{
font-size: $font-size-sm;
color: $color-grey4;
}
} }
</style> </style>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2019-08-22 19:41:20 * @Date: 2019-08-22 19:41:20
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 18:05:32 * @LastEditTime: 2022-04-22 14:47:49
* @Description: file content * @Description: file content
--> -->
<template> <template>

@ -65,8 +65,8 @@
<UiMoney class="goods-price" :money="totalPrice" prefix/> <UiMoney class="goods-price" :money="totalPrice" prefix/>
</view> </view>
<view class="cart-action"> <view class="cart-action">
<UiButton v-if="mode == 'edit'" :disable="!checkedIds.length" @click="handleDelete"></UiButton> <UiButton v-if="mode == 'edit'" size="max" :disable="!checkedIds.length" @click="handleDelete"></UiButton>
<UiButton v-else type="gradual" :disable="!checkedIds.length" @click="handleOrder">({{list.length}})</UiButton> <UiButton v-else type="gradual" size="max" :disable="!checkedIds.length" @click="handleOrder">({{list.length}})</UiButton>
</view> </view>
</view> </view>
</view> </view>
@ -293,6 +293,7 @@ export default {
page { page {
background: $color-grey1; background: $color-grey1;
padding-bottom: 240rpx; padding-bottom: 240rpx;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -309,6 +310,7 @@ export default {
z-index: 999; z-index: 999;
&--title text{ &--title text{
font-size: 36rpx; font-size: 36rpx;
font-weight: bold;
} }
&--totla{ &--totla{
font-size: 36rpx; font-size: 36rpx;
@ -337,16 +339,13 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 50rpx 40rpx 40rpx 24rpx; padding: 50rpx 40rpx 40rpx 24rpx;
margin: 20rpx auto; margin: 0 auto 20rpx;
&--radio { &--radio {
width: 56rpx; width: 56rpx;
height: 80rpx; height: 80rpx;
line-height: 80rpx; line-height: 80rpx;
margin-right: 10rpx; margin-right: 10rpx;
text-align: center; text-align: center;
.radio {
transform: scale(0.76)
}
} }
&--image { &--image {
width: 170rpx; width: 170rpx;
@ -362,7 +361,8 @@ export default {
&--title { &--title {
font-size: $font-size-base; font-size: $font-size-base;
line-height: 39rpx; line-height: 36rpx;
font-weight: bold;
max-height: 76rpx; max-height: 76rpx;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -447,28 +447,30 @@ export default {
.footer { .footer {
display: flex; display: flex;
align-items: center; align-items: center;
height: 96rpx; height: 140rpx;
background: $color-grey0; background: $color-grey0;
padding: 0 30rpx; padding: 0 30rpx;
position: fixed; position: fixed;
bottom: 120rpx; bottom: 120rpx;
left: 0; left: 0;
right: 0; right: 0;
z-index: 11; z-index: 11;
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
&__inner{ &__inner{
bottom: 0; bottom: 0;
} }
.all-radio { .all-radio {
width: 140rpx; width: 140rpx;
display: flex; display: flex;
align-items: center; align-items: center;
color: $color-grey5; text{
font-size: $font-size-sm; color: $color-grey5;
font-size: $font-size-base;
}
.radio { .radio {
margin-bottom: -4rpx; margin-right: 5rpx;
transform: scale(0.76)
} }
} }
@ -478,8 +480,11 @@ export default {
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding-right: 30rpx; padding-right: 30rpx;
font-size: $font-size-sm; text{
color: $color-grey5; font-size: $font-size-base;
color: $color-grey5;
}
} }
@ -487,17 +492,24 @@ export default {
/deep/{ /deep/{
.cart-item--price{ .cart-item--price{
text{ text{
font-size: $font-size-base; font-size: $font-size-lg;
color: $color-yellow4; color: $color-yellow4;
font-weight: bold;
} }
.ui-money--prefix{ .ui-money--prefix{
font-size: $font-size-sm; font-size: $font-size-sm;
} }
} }
.uni-radio-input{
width: 36rpx;
height: 36rpx;
}
.goods-price{ .goods-price{
margin-bottom: 10rpx;
text{ text{
font-size: 40rpx; font-size: 40rpx;
color: $color-yellow4; color: $color-yellow4;
font-weight: bold;
} }
.ui-money--prefix{ .ui-money--prefix{
font-size: $font-size-lg; font-size: $font-size-lg;

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-08 18:36:14 * @Date: 2022-04-08 18:36:14
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 15:46:55 * @LastEditTime: 2022-04-22 14:47:43
* @Description: file content * @Description: file content
--> -->
<template> <template>

@ -30,7 +30,8 @@
</view> </view>
</view> </view>
<!-- </view> --> <!-- </view> -->
<BsEmpty v-if="!categoryData[curIndex].children.length && !categoryData[curIndex].isLoading" /> <BsEmpty class="empty" v-if="!categoryData[curIndex].children.length && !categoryData[curIndex].isLoading"
:icon="require('@/static/common/empty_goods.png')" />
<u-loadmore status="loading" v-if="categoryData[curIndex].isLoading" /> <u-loadmore status="loading" v-if="categoryData[curIndex].isLoading" />
</scroll-view> </scroll-view>
</view> </view>
@ -118,6 +119,7 @@ page {
<style lang="scss" scoped> <style lang="scss" scoped>
.search{ .search{
padding: 0 30rpx; padding: 0 30rpx;
background: $color-grey0;
} }
.search--input{ .search--input{
display: block; display: block;
@ -126,7 +128,7 @@ page {
box-sizing: border-box; box-sizing: border-box;
background: $color-grey1; background: $color-grey1;
&__placeholder{ &__placeholder{
font-size: 26rpx; font-size: $font-size-base;
color: $color-grey5; color: $color-grey5;
} }
} }
@ -146,7 +148,7 @@ page {
.cate-right { .cate-right {
height: 100%; height: 100%;
padding: 40rpx 0 0; padding: 30rpx 0 0;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
@ -164,11 +166,12 @@ page {
background: $color-grey0; background: $color-grey0;
color: $color-yellow3; color: $color-yellow3;
font-size: $font-size-base; font-size: $font-size-base;
font-weight: bold;
} }
.cate-tow-img{ .cate-tow-img{
width:480rpx; width:480rpx;
margin: 0 40rpx 40rpx; margin: 0 40rpx 20rpx;
height: 164rpx; height: 164rpx;
background: $color-grey3; background: $color-grey3;
border-radius: 16rpx; border-radius: 16rpx;
@ -176,12 +179,14 @@ page {
.cate-tow-group{ .cate-tow-group{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 40rpx; // margin-bottom: 20rpx;
&--title{ &--title{
padding: 20rpx 40rpx; padding: 20rpx 40rpx;
display: block; display: block;
width: 100%; width: 100%;
font-size: 30rpx; font-size: 30rpx;
line-height: 30rpx;
font-weight: bold;
color: $color-grey6; color: $color-grey6;
} }
&--item{ &--item{
@ -197,8 +202,8 @@ page {
width: 130rpx; width: 130rpx;
text-align: center; text-align: center;
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: 36rpx; line-height: 30rpx;
margin: 10rpx 0 40rpx; margin: 14rpx 0 20rpx;
color: $color-grey6; color: $color-grey6;
display: -webkit-box; display: -webkit-box;
/*! autoprefixer: off */ /*! autoprefixer: off */
@ -210,6 +215,9 @@ page {
padding-bottom: 200rpx; padding-bottom: 200rpx;
} }
} }
.empty{
margin-top: 100rpx;
}
</style> </style>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-24 11:30:55 * @Date: 2022-03-24 11:30:55
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 14:42:04 * @LastEditTime: 2022-04-22 20:21:28
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -13,7 +13,7 @@
<view> <view>
<view class="product-info--price">{{curSku.sellPrice}}</view> <view class="product-info--price">{{curSku.sellPrice}}</view>
<view class="product-info--sku">{{curSku.name}}</view> <view class="product-info--sku">{{curSku.name}}</view>
<!-- <view>库存{{curSku.stock}}</view> --> <view>库存{{curSku.stock}}</view>
</view> </view>
</view> </view>
<view class="attr-group" v-for="(item, index) in attributeGroupList" :key="item.id"> <view class="attr-group" v-for="(item, index) in attributeGroupList" :key="item.id">
@ -29,7 +29,7 @@
<view class="sku-num--single-box"> <view class="sku-num--single-box">
<template> <template>
<text>数量</text> <text>数量</text>
<text class="sku-num--single">{{maxBuyNum}}</text> <!-- <text class="sku-num--single">{{maxBuyNum}}</text> -->
</template> </template>
</view> </view>
<u-number-box :min="1" :max="maxBuyNum" button-size="40rpx" bgColor="#F5F6FA" <u-number-box :min="1" :max="maxBuyNum" button-size="40rpx" bgColor="#F5F6FA"
@ -40,8 +40,8 @@
</view> </view>
<view class="footer"> <view class="footer">
<view class="btn-bg" v-if="mode == 1"> <view class="btn-bg" v-if="mode == 1">
<UiButton class="btn" @click="addCart" size="max">加入购物车</UiButton> <UiButton class="btn" @click="addCart" size="max" :disable="curSku.stock == 0">加入购物车</UiButton>
<UiButton class="btn btn__buy" @click="buyNow" size="max">立即购买</UiButton> <UiButton class="btn btn__buy" @click="buyNow" size="max" :disable="curSku.stock == 0">立即购买</UiButton>
</view> </view>
<UiButton v-else class="btn__confirm" type="gradual" size="max" @click="confirm"></UiButton> <UiButton v-else class="btn__confirm" type="gradual" size="max" @click="confirm"></UiButton>
</view> </view>
@ -116,7 +116,8 @@ export default {
const skuSymbolList = this.attributeGroupList.map(item => { const skuSymbolList = this.attributeGroupList.map(item => {
const activeAttr = item.attributes.find(i => i.active); const activeAttr = item.attributes.find(i => i.active);
return activeAttr ? activeAttr.symbol : '' return activeAttr ? activeAttr.symbol : ''
}).filter(i => i); }).filter(i => i).sort();
console.log(skuSymbolList);
return this.skuInfo.find(i => i.attributeSymbolList === skuSymbolList.join(',')) || {}; return this.skuInfo.find(i => i.attributeSymbolList === skuSymbolList.join(',')) || {};
}, },
/** /**
@ -136,6 +137,9 @@ export default {
*/ */
setDefaultAttr(){ setDefaultAttr(){
const curSku = this.skuInfo.find(i => i.stock > 0); const curSku = this.skuInfo.find(i => i.stock > 0);
if(!curSku){
return false
}
this.attributeGroupList.forEach((item, index) => { this.attributeGroupList.forEach((item, index) => {
for(let i of item.attributes){ for(let i of item.attributes){
if(curSku.attributeSymbolList.includes(i.symbol)){ if(curSku.attributeSymbolList.includes(i.symbol)){
@ -191,6 +195,10 @@ export default {
* 加入购物车 * 加入购物车
*/ */
async addCart(){ async addCart(){
if(!this.curSku.skuId){
uni.$u.toast('请选择规格~');
return false;
}
const {error, result} = await ApiPutAddCart({ const {error, result} = await ApiPutAddCart({
productSkuId : this.curSku.skuId, productSkuId : this.curSku.skuId,
productId : this.goodsInfo.id, productId : this.goodsInfo.id,
@ -208,6 +216,10 @@ export default {
* 立即购买 * 立即购买
*/ */
buyNow(){ buyNow(){
if(!this.curSku.skuId){
uni.$u.toast('请选择规格~');
return false;
}
this.$Router.push({ this.$Router.push({
path : '/orderSubmit', path : '/orderSubmit',
query: { query: {
@ -332,6 +344,7 @@ export default {
.btn__confirm{ .btn__confirm{
margin: 0; margin: 0;
width: 670rpx;
} }
} }
</style> </style>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-23 17:27:21 * @Date: 2022-03-23 17:27:21
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 14:49:48 * @LastEditTime: 2022-04-22 20:09:27
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -36,9 +36,9 @@
<view class="icon cart" @click="$Router.push('/cart')"></view> <view class="icon cart" @click="$Router.push('/cart')"></view>
</view> </view>
<view class="footer--btns"> <view class="footer--btns">
<UiButton class="btn" v-if="activityStatus !== 'startActivity' " @click="onShowSkuPopup(2)"></UiButton> <UiButton class="btn" :disable="stock == 0" v-if="activityStatus !== 'startActivity' " @click="onShowSkuPopup(2)"></UiButton>
<UiButton class="btn btn--buy" v-if="activityStatus === 'noStartActivity'" @click="onShowSkuPopup(3)"></UiButton> <UiButton class="btn btn--buy" :disable="stock == 0" v-if="activityStatus === 'noStartActivity'" @click="onShowSkuPopup(3)"></UiButton>
<UiButton class="btn btn--buy" v-else @click="onShowSkuPopup(3)"> </UiButton> <UiButton class="btn btn--buy" :disable="stock == 0" v-else @click="onShowSkuPopup(3)"> </UiButton>
</view> </view>
</view> </view>
</view> </view>
@ -82,6 +82,13 @@ export default {
status = 'startActivity'; status = 'startActivity';
} }
return status; return status;
},
stock(){
let stock = 0;
this.skuInfoData.forEach(i => {
stock += i.stock
})
return stock
} }
}, },
onLoad(){ onLoad(){
@ -132,7 +139,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
page{ page{
background: $color-grey1; background: $color-grey1;
padding-bottom: 138rpx; padding-bottom: 206rpx;
} }
.back{ .back{
position: absolute; position: absolute;
@ -184,8 +191,8 @@ page{
padding: 20rpx; padding: 20rpx;
} }
.footer{ .footer{
height: 138rpx; height: 206rpx;
padding: 0 30rpx; padding: 0 30rpx 68rpx 30rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-21 11:29:38 * @Date: 2022-03-21 11:29:38
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-22 11:01:26 * @LastEditTime: 2022-04-22 14:14:25
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -130,7 +130,7 @@ page{
box-sizing: border-box; box-sizing: border-box;
background: $color-grey1; background: $color-grey1;
&__placeholder{ &__placeholder{
font-size: 26rpx; font-size: $font-size-base;
color: $color-grey5; color: $color-grey5;
} }
} }

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-23 10:31:12 * @Date: 2022-03-23 10:31:12
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-20 18:29:40 * @LastEditTime: 2022-04-22 18:02:47
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -46,9 +46,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.banner{ .banner{
height: 388rpx; height: 368rpx;
position: relative; position: relative;
padding: 50rpx 30rpx 0; padding: 40rpx 30rpx 0;
overflow: hidden; overflow: hidden;
&::before{ &::before{
display: block; display: block;

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-23 10:29:07 * @Date: 2022-03-23 10:29:07
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-22 10:34:09 * @LastEditTime: 2022-04-22 19:15:35
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -19,7 +19,8 @@
<!-- <view class="price">{{max.startingPrice}}</view> --> <!-- <view class="price">{{max.startingPrice}}</view> -->
<UiMoney class="price" :money="max.startingPrice" prefix></UiMoney> <UiMoney class="price" :money="max.startingPrice" prefix></UiMoney>
<view class="img-box"> <view class="img-box">
<image class="img" :src="max.recommendPicture"/> <!-- <image class="img" :src="max.recommendPicture"/> -->
<image class="img" src="https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/1111111.png"/>
</view> </view>
</view> </view>
<view class="min" @click="$Router.push(`/goodsDetail?id=${minOne.id}`)"> <view class="min" @click="$Router.push(`/goodsDetail?id=${minOne.id}`)">

@ -2,13 +2,13 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-22 15:36:46 * @Date: 2022-03-22 15:36:46
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-22 11:18:14 * @LastEditTime: 2022-04-22 11:28:03
* @Description: file content * @Description: file content
--> -->
<template> <template>
<view class="container"> <view class="container">
<view class="header"> <view class="header">
<image class="arrow" src="@/static/search/arrow.png" @click="goBack"/> <image class="arrow" src="@/static/common/back.png" @click="goBack"/>
</view> </view>
<view class="logo">马士兵严选</view> <view class="logo">马士兵严选</view>
<u--form class="login"> <u--form class="login">
@ -23,7 +23,7 @@
@click="getCode">{{tips}}</text> @click="getCode">{{tips}}</text>
</u-form-item> </u-form-item>
</u--form> </u--form>
<UiButton class="login--btn" type="gradual" @click="login"></UiButton> <UiButton class="login--btn" type="gradual" size="max" @click="login"></UiButton>
<label class="login--agreement"> <label class="login--agreement">
<radio class="radio" :checked="checked" @click="checked = !checked" color="#FF875B"/> <radio class="radio" :checked="checked" @click="checked = !checked" color="#FF875B"/>
同意<text class="link">用户协议</text><text class="link">隐私协议</text>首次登录将自动注册 同意<text class="link">用户协议</text><text class="link">隐私协议</text>首次登录将自动注册
@ -168,8 +168,6 @@ export default {
} }
&--btn{ &--btn{
width: 650rpx; width: 650rpx;
height: 88rpx;
line-height: 88rpx;
font-size: $font-size-lg; font-size: $font-size-lg;
margin: 60rpx 50rpx 40rpx; margin: 60rpx 50rpx 40rpx;
} }

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-15 16:36:02 * @Date: 2022-04-15 16:36:02
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-18 18:38:25 * @LastEditTime: 2022-04-22 18:28:23
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -54,10 +54,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.address{ .address{
/deep/.u-cell__body__content{
padding: 10rpx 0;
}
&--title{ &--title{
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -80,4 +76,17 @@ export default {
} }
} }
} }
/deep/{
.u-cell__body__content{
padding: 10rpx 0;
}
.u-cell__title{
font-weight: bold;
line-height: 36rpx;
}
.address--label{
font-weight: normal;
}
}
</style> </style>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-15 16:04:28 * @Date: 2022-04-15 16:04:28
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 17:45:16 * @LastEditTime: 2022-04-22 15:30:50
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -23,6 +23,10 @@
<text class="cell--title">支付方式:</text> <text class="cell--title">支付方式:</text>
<text class="cell--value">{{orderInfo.payTypeDesc}}</text> <text class="cell--value">{{orderInfo.payTypeDesc}}</text>
</view> </view>
<view class="cell" v-if="orderInfo.logistics.companyName">
<text class="cell--title">配送方式:</text>
<text class="cell--value">{{orderInfo.logistics.companyName}}</text>
</view>
<view class="cell"> <view class="cell">
<text class="cell--title">买家留言:</text> <text class="cell--title">买家留言:</text>
<text class="cell--value">{{orderInfo.userMessage}}</text> <text class="cell--value">{{orderInfo.userMessage}}</text>
@ -36,11 +40,12 @@
</view> </view>
<view class="cell"> <view class="cell">
<text class="cell--title">运费:</text> <text class="cell--title">运费:</text>
<text class="cell--value">{{orderInfo.shippingAmount}}</text> <text class="cell--value">{{orderInfo.shippingAmount}}</text>
</view> </view>
<view class="amount-box"> <view class="amount-box">
<text class="amount-label">实付款</text> <text class="amount-label" v-if="orderInfo.orderStatus == 1"></text>
<UiMoney :money="orderInfo.payAmount" flaot prefix suffix/> <text class="amount-label" v-else></text>
<UiMoney :money="orderInfo.payAmount" float prefix suffix/>
<!-- <text class="amount">{{orderInfo.payAmount}}</text> --> <!-- <text class="amount">{{orderInfo.payAmount}}</text> -->
</view> </view>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-31 17:53:43 * @Date: 2022-03-31 17:53:43
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 17:24:22 * @LastEditTime: 2022-04-22 18:20:00
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -89,7 +89,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.status{ .status{
padding: 48rpx 60rpx 0; padding: 40rpx 60rpx 0;
margin-bottom: 48rpx; margin-bottom: 48rpx;
min-height: 130rpx; min-height: 130rpx;
position: relative; position: relative;
@ -98,14 +98,17 @@ export default {
height: 100rpx; height: 100rpx;
position: absolute; position: absolute;
right: 60rpx; right: 60rpx;
top: 10rpx; top: 40rpx;
} }
&--name{ &--name{
font-size: 36rpx; font-size: 36rpx;
margin-bottom: 20rpx; line-height: 36rpx;
margin: 8rpx 0 20rpx;
font-weight: bold;
} }
&--desc{ &--desc{
font-size: $font-size-base; font-size: $font-size-base;
line-height: $font-size-base;
color: $color-grey4; color: $color-grey4;
margin-bottom: 48rpx; margin-bottom: 48rpx;
} }

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-31 14:26:09 * @Date: 2022-03-31 14:26:09
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 14:49:52 * @LastEditTime: 2022-04-22 18:48:28
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -12,14 +12,18 @@
<UiGoodsInfo :class="index === orderInfo.products.length - 1 && 'goods-info__last'" <UiGoodsInfo :class="index === orderInfo.products.length - 1 && 'goods-info__last'"
v-for="(item, index) in orderInfo.products" :data="item" :key="index"> v-for="(item, index) in orderInfo.products" :data="item" :key="index">
<template slot="operation"> <template slot="operation">
<view class="goods-info-operation" v-if="item.afterSaleApplyFlag || [3,4].includes(item.detailStatus)"> <view class="goods-info-operation" v-if="item.afterSaleApplyFlag || [2,3,4].includes(item.detailStatus)">
<UiButton size="min" type="primaryLine" v-if="item.afterSaleApplyFlag" <UiButton size="min" type="primaryLine" v-if="item.afterSaleApplyFlag"
@click="$Router.push(`/saleAfterSelect?id=${item.orderProductId}`)">申请售后</UiButton> @click="$Router.push(`/saleAfterSelect?id=${item.orderProductId}`)">申请售后</UiButton>
<template v-else> <template v-else>
<UiButton size="min" type="line" v-if="item.detailStatus === 3" <UiButton size="min" type="line"
@click="$Router.push(`/saleAfterDetail?orderProductId=${item.orderProductId}`)">
{{ item.detailStatus === 2 ? '退款中' : item.detailStatus === 3 ? '已退款' : '退款关闭'}}
</UiButton>
<!-- <UiButton size="min" type="line" v-if="item.detailStatus === 3"
@click="$Router.push(`/saleAfterDetail?orderProductId=${item.orderProductId}`)">已退款</UiButton> @click="$Router.push(`/saleAfterDetail?orderProductId=${item.orderProductId}`)">已退款</UiButton>
<UiButton size="min" type="line" v-if="item.detailStatus === 4" <UiButton size="min" type="line" v-if="item.detailStatus === 4"
@click="$Router.push(`/saleAfterDetail?orderProductId=${item.orderProductId}`)">退款关闭</UiButton> @click="$Router.push(`/saleAfterDetail?orderProductId=${item.orderProductId}`)">退款关闭</UiButton> -->
</template> </template>
</view> </view>
</template> </template>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-22 10:58:24 * @Date: 2022-03-22 10:58:24
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 18:30:09 * @LastEditTime: 2022-04-22 18:07:49
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -21,34 +21,31 @@
<text class="orders--name">官方自营</text> <text class="orders--name">官方自营</text>
<text class="orders--status" :class="[1,3].includes(item.orderStatus) && 'orders--status__warn'">{{item.orderStatusDesc}}</text> <text class="orders--status" :class="[1,3].includes(item.orderStatus) && 'orders--status__warn'">{{item.orderStatusDesc}}</text>
</view> </view>
<view class="orders--item" v-for="i in item.products" :key="i.orderProductId" @click="$Router.push(`/orderDetail?id=${item.orderId}`)"> <UiGoodsInfoMax v-for="item in item.products" :key="item.orderProductId"
<image class="orders--item-image" mode="widthFix" :src="i.productImageUrl" /> :data="item" @click="$Router.push(`/orderDetail?id=${item.orderId}`)" />
<view >
<view class="orders--item-con">
<text class="orders--item-title">{{i.productName}}</text>
<text class="orders--item-pirce">{{i.realAmount}}</text>
</view>
<view class="orders--item-desc">
<text>{{i.skuDescribe}}</text>
<text class="orders--item-num">x{{i.quantity}}</text>
</view>
</view>
</view>
<view class="orders--total"> <view class="orders--total">
<text>合计</text> <text class="orders--total__amount">合计</text>
<text class="orders--total__amount">{{item.totalAmount}}</text> <UiMoney class="orders--total__amount" :money="item.totalAmount" float prefix suffix/>
<text class="orders--total__pay">应付</text> <text class="orders--total__pay ">应付</text>
<text class="orders--total__amount orders--total__pay">{{item.payAmount}}</text> <UiMoney class="orders--total__pay" :money="item.totalAmount" float prefix suffix/>
</view> </view>
<view class="orders--footer"> <view class="orders--footer">
<button class="orders--footer-btn orders--footer-btn__red" <UiButton size="min" type="gradual"
v-if="item.orderStatus === 1" @click="pay(item)">去支付</button> v-if="item.orderStatus === 1" @click="pay(item)">去支付</UiButton>
<UiButton size="min" v-if="[2,3].includes(item.orderStatus)"
@click="$Router.push(`/orderDetail?id=${item.orderId}`)">查看详情</UiButton>
<UiButton size="min" v-if="item.orderStatus >= 4"
@click="$Router.push(`/logisitcsInfo?orderId=${item.orderId}`)">查看物流</UiButton>
<UiButton size="min" type="gradual" v-if="item.orderStatus === 4" @click="receive(item)"></UiButton>
<!-- <button class="orders--footer-btn orders--footer-btn__red"
>去支付</button>
<button class="orders--footer-btn" v-if="item.orderStatus === 2" <button class="orders--footer-btn" v-if="item.orderStatus === 2"
@click="$Router.push(`/orderDetail?id=${item.orderId}`)">查看详情</button> @click="$Router.push(`/orderDetail?id=${item.orderId}`)">查看详情</button>
<button class="orders--footer-btn" v-if="item.orderStatus >= 4" <button class="orders--footer-btn" v-if="item.orderStatus >= 4"
@click="$Router.push(`/logisitcsInfo?orderId=${item.orderId}`)">查看物流</button> @click="$Router.push(`/logisitcsInfo?orderId=${item.orderId}`)">查看物流</button>
<button class="orders--footer-btn orders--footer-btn__red" <button class="orders--footer-btn orders--footer-btn__red"
v-if="item.orderStatus == 4" @click="receive(item)">确认收货</button> v-if="item.orderStatus == 4" @click="receive(item)">确认收货</button> -->
</view> </view>
</view> </view>
<u-loadmore :status="loadingStatus" v-if="loadingStatus === 'loading'"/> <u-loadmore :status="loadingStatus" v-if="loadingStatus === 'loading'"/>
@ -61,17 +58,20 @@ import BsEmpty from '@/components/BsEmpty.vue';
import UiButton from '@/components/UiButton.vue'; import UiButton from '@/components/UiButton.vue';
import { ApiGetOrderList, ApiPutOrderReceive } from '@/common/api/order'; import { ApiGetOrderList, ApiPutOrderReceive } from '@/common/api/order';
import BsPay from '../../components/BsPay.vue'; import BsPay from '../../components/BsPay.vue';
import UiGoodsInfo from '../../components/UiGoodsInfo.vue';
import UiGoodsInfoMax from '../../components/UiGoodsInfoMax.vue';
import UiMoney from '../../components/UiMoney.vue';
export default { export default {
components: { BsEmpty, UiButton, BsPay }, components: { BsEmpty, UiButton, BsPay, UiGoodsInfo, UiGoodsInfoMax, UiMoney },
data () { data () {
return { return {
tabListData : [ tabListData : [
{key : '-1', name : '全部'}, {key : '-1', name : '全部'},
{key : '1', name : '待付款'}, {key : '1', name : '待付款'},
{key : '3', name : '待发货'}, {key : '3', name : '待发货'},
{key : '4', name : '待收货'}, {key : '4', name : '待收货'}
{key : '6', name : '待评价'} // {key : '6', name : ''}
], ],
currentTabKey : this.$Route.query.tab || '-1', currentTabKey : this.$Route.query.tab || '-1',
orderListData : [], orderListData : [],
@ -201,6 +201,7 @@ page{
&--name{ &--name{
font-size: $font-size-lg; font-size: $font-size-lg;
color: $color-grey6; color: $color-grey6;
font-weight: bold;
} }
&--status{ &--status{
font-size: $font-size-sm; font-size: $font-size-sm;
@ -209,92 +210,51 @@ page{
color: $color-yellow3; color: $color-yellow3;
} }
} }
&--item{
display: flex;
justify-content: space-between;
padding: 30rpx 0 0;
}
&--item-image{
width: 180rpx;
height: 180rpx;
margin-right: 30rpx;
}
&--item-con{
width: 510rpx;
display: flex;
justify-content: space-between;
font-size: $font-size-base;
color: $color-grey6;
line-height: 39rpx;
}
&--item-title{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
&--item-pirce{
font-size: 22rpx;
margin-left: 60rpx;
}
&--item-desc{
width: 510rpx;
font-size: $font-size-sm;
color: $color-grey4;
margin-top: 20rpx;
line-height: 39rpx;
display: flex;
justify-content: space-between;
}
&--item-num{
font-size: $font-size-base;
margin-left: 60rpx;
}
&--total{ &--total{
font-size: $font-size-sm;
color: $color-grey4;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: end; justify-content: flex-end;
margin-top: 30rpx; margin-top: 30rpx;
&__amount{
font-size: $font-size-base;
margin-right: 20rpx;
}
&__pay{
color: $color-grey6;
}
} }
&--footer{ &--footer{
display: flex; display: flex;
justify-content: end; justify-content: flex-end;
align-items: center; align-items: center;
margin-top: 30rpx; margin-top: 30rpx;
&-btn{
height: 58rpx;
line-height: 58rpx;
border-radius: 30rpx;
margin: 0 0 0 30rpx;
border: 1px solid $color-grey6;
color: $color-grey6;
background: none;
font-size: 26rpx;
&__red{
background: linear-gradient(270deg, $color-yellow2 0%, $color-yellow1 100%);
color: $color-grey0;
border: 0;
height: 60rpx;
line-height: 60rpx;
}
}
} }
} }
/deep/{
.orders--footer{
// .ui-btn{
margin: 0 0 0 20rpx;
width: 180rpx;
padding: 0;
}
}
.orders--total__amount,.orders--total__pay{
font-size: $font-size-sm;
text{
font-size: 36rpx;
font-weight: bold;
}
.ui-money--prefix{
font-size: $font-size-sm;
}
.ui-money--suffix{
font-size: $font-size-sm;
}
}
.orders--total__amount {
color: $color-grey4;
text{
color: $color-grey4;
}
.ui-money--suffix{
margin-right: 20rpx;
}
}
}
</style> </style>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-18 15:28:14 * @Date: 2022-04-18 15:28:14
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-18 17:13:27 * @LastEditTime: 2022-04-22 19:28:13
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -13,12 +13,15 @@
</UiWhiteBox> </UiWhiteBox>
<UiWhiteBox class="company"> <UiWhiteBox class="company">
<text class="company--name">{{orderInfo.companyName}}</text> <text class="company--name">{{orderInfo.companyName}}</text>
<view class="company--no">{{orderInfo.trackingNo}}</view> <view class="company--no">
<text>{{orderInfo.trackingNo}}</text>
<UiCopy :value="orderInfo.trackingNo"/>
</view>
</UiWhiteBox> </UiWhiteBox>
<UiWhiteBox> <UiWhiteBox>
<view class="title"> <view class="title">
<text>物流信息</text> <text>物流信息</text>
<text class="title--desc">本服务快递100提供</text> <text class="title--desc">本服务快递100提供</text>
</view> </view>
<view class="group"> <view class="group">
<view class="item" :class="idx === orderInfo.logisticsDataList.length - 1 ? 'item__last' : ''" <view class="item" :class="idx === orderInfo.logisticsDataList.length - 1 ? 'item__last' : ''"
@ -34,8 +37,9 @@
import UiGoodsInfo from '@/components/UiGoodsInfo.vue' import UiGoodsInfo from '@/components/UiGoodsInfo.vue'
import UiWhiteBox from '@/components/UiWhiteBox.vue' import UiWhiteBox from '@/components/UiWhiteBox.vue'
import {ApiGetOrderLogistics} from '@/common/api/order'; import {ApiGetOrderLogistics} from '@/common/api/order';
import UiCopy from '../../components/UiCopy.vue';
export default { export default {
components: { UiWhiteBox, UiGoodsInfo }, components: { UiWhiteBox, UiGoodsInfo, UiCopy },
data(){ data(){
return { return {
orderInfo : {} orderInfo : {}

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-11 13:51:10 * @Date: 2022-04-11 13:51:10
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-18 17:55:17 * @LastEditTime: 2022-04-22 18:53:35
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -203,5 +203,6 @@ textarea{
position: fixed; position: fixed;
bottom: 40rpx; bottom: 40rpx;
left: 30rpx; left: 30rpx;
width: 670rpx;
} }
</style> </style>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-14 14:19:41 * @Date: 2022-04-14 14:19:41
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-18 18:14:30 * @LastEditTime: 2022-04-22 19:24:49
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -66,6 +66,9 @@ export default {
font-size: $font-size-sm; font-size: $font-size-sm;
color: $color-grey5; color: $color-grey5;
text-align: right; text-align: right;
max-width: 500rpx;
word-wrap: break-word;
word-break: normal;
} }
} }
.recipient{ .recipient{

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-14 13:44:30 * @Date: 2022-04-14 13:44:30
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-19 17:28:01 * @LastEditTime: 2022-04-22 18:53:55
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -246,6 +246,7 @@ export default {
position: fixed; position: fixed;
bottom: 30rpx; bottom: 30rpx;
left: 30rpx; left: 30rpx;
z-index:999 z-index:999;
width: 670rpx;
} }
</style> </style>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-04-11 13:51:10 * @Date: 2022-04-11 13:51:10
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-14 17:55:55 * @LastEditTime: 2022-04-22 18:53:25
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -225,5 +225,6 @@ textarea{
position: fixed; position: fixed;
bottom: 40rpx; bottom: 40rpx;
left: 30rpx; left: 30rpx;
width: 670rpx;
} }
</style> </style>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-03-20 14:14:53 * @Date: 2022-03-20 14:14:53
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-04-21 19:58:02 * @LastEditTime: 2022-04-22 19:51:14
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -166,15 +166,26 @@ export default {
uni.$u.toast(error.message); uni.$u.toast(error.message);
return false; return false;
} }
// this.wxpay(result.orderId); this.wxpay(result.orderId);
}, },
async wxpay(orderId){ wxpay(orderId){
const {error, result} = await ApiPostWxPay({orderId,payTypeEnum:'WXPAY'}); this.$msb.confirm({
if(error){ content : '您确定要支付吗?',
this.$Router.replace(`/payFail?ordId=${orderId}`) cancelText : '暂不支付',
}else{ confirmText : '立即支付',
this.$Router.replace(`/paySuccess?ordId=${orderId}`) confirm : async () => {
} const {error, result} = await ApiPostWxPay({orderId,payTypeEnum:'WXPAY'});
if(error){
this.$Router.replace(`/payFail?ordId=${orderId}`)
}else{
this.$Router.replace(`/paySuccess?ordId=${orderId}`)
}
},
cancel : ()=>{
this.$Router.replace(`/orderDetail?id=${orderId}`)
}
})
} }
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 906 B

After

Width:  |  Height:  |  Size: 945 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 915 B

After

Width:  |  Height:  |  Size: 968 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 827 B

After

Width:  |  Height:  |  Size: 866 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 976 B

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 884 B

After

Width:  |  Height:  |  Size: 1011 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 942 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 372 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 372 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Loading…
Cancel
Save