增加新模块
This commit is contained in:
何江明
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="showModel">uni.showModal</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
showModel() {
|
||||
uni.showModal({
|
||||
content: this.$t('api.message'),
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<no-data></no-data>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: this.$t('')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<view class="hash_union_warp">
|
||||
<view class="not_order_warp">
|
||||
<up-image src="/static/common/not_order.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="not_order_msg_warp">暂无相关数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hash_union_warp{
|
||||
height: 100vh;
|
||||
background-color: $app-bj;
|
||||
.not_order_warp {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
margin-top: 0;
|
||||
padding-top: 400rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view class="login_warp">
|
||||
<view class="login_logo_warp">
|
||||
<view style="margin-left: 8rpx;">
|
||||
<up-image src="/static/logo.png" width="90" height="90" bgColor="#f1f6ff00" radius="10"></up-image>
|
||||
</view>
|
||||
<view style="margin-top: 20rpx;">
|
||||
<up-image src="/static/logo_z.png" width="100" height="40" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="login_info">
|
||||
<view class="login_info_item">
|
||||
<up-input
|
||||
placeholder="请输入手机号/账户名称"
|
||||
border="surround"
|
||||
v-model="form.name"
|
||||
:customStyle="inputCss"
|
||||
@change="checkNameParam"
|
||||
></up-input>
|
||||
</view>
|
||||
<!-- 密码登录 -->
|
||||
<view class="login_info_item" v-if="loginWay === 'password'">
|
||||
<up-input
|
||||
placeholder="请输入密码"
|
||||
border="surround"
|
||||
v-model="form.password"
|
||||
:customStyle="inputCss"
|
||||
:type="isShow ?'text':'password'"
|
||||
@change="checkParam"
|
||||
>
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<up-image v-if="isShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="isShow=false;"></up-image>
|
||||
<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="isShow=true;"></up-image>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
<!-- 验证码登录 -->
|
||||
<view class="login_info_item" v-else>
|
||||
<up-input
|
||||
placeholder="请输入验证码"
|
||||
border="surround"
|
||||
v-model="form.code"
|
||||
:customStyle="inputCss"
|
||||
>
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<view v-if="countdown" class="code-warp">
|
||||
<up-count-down :time="60 * 1000" format="ss" @finish="countdown = false"></up-count-down>
|
||||
<text style="margin-left: 10rpx;">s</text>
|
||||
</view>
|
||||
<view v-else @click="getMobileCode" class="code_msg">
|
||||
获取验证码
|
||||
</view>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
|
||||
<view class="login_comm_but login_comm_but_yes" @click="loginFun">
|
||||
登录
|
||||
</view>
|
||||
<view class="cut_way_warp">
|
||||
<view v-if="loginWay === 'password'" @click="loginWay = 'code'">验证码登录</view>
|
||||
<view v-if="loginWay === 'code'" @click="loginWay = 'password'">密码登录登录</view>
|
||||
<view @click="jumpRegister">注册</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="policy_warp">
|
||||
<up-checkbox
|
||||
name="isCheck"
|
||||
usedAlone
|
||||
v-model:checked="isPolicy"
|
||||
shape="circle"
|
||||
activeColor="#FF7C41"
|
||||
size="19"
|
||||
iconSize="18"
|
||||
>
|
||||
<template #label>
|
||||
<text>已阅读并同意</text>
|
||||
<text class="policy_a_warp">《哈希优品服务协议》</text>
|
||||
<text>及</text>
|
||||
<text class="policy_a_warp">《隐私政策》</text>
|
||||
</template>
|
||||
</up-checkbox>
|
||||
</view>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import InputCodeComm from '@/components/code-comm/code-comm.vue';
|
||||
import { SMS_TYPE } from '@/utils/enumUtils.js';
|
||||
import { getUserList } from '@/api/common.js';
|
||||
import { loginbysms } from '@/api/login.js';
|
||||
import { setStorageFun,TOKEN_NAME,USER_KEY,USER_DATA,USER_LOGIN_TIME } from '@/utils/auth.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
InputCodeComm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form:{
|
||||
name:null,
|
||||
password:null,
|
||||
code:null
|
||||
},
|
||||
inputCss:{
|
||||
"height":'80rpx',
|
||||
"background": "#F3F3F3FF",
|
||||
"border-radius": "30rpx",
|
||||
"border": "0rpx",
|
||||
"padding-left": "16px",
|
||||
},
|
||||
loginWay:'password',
|
||||
isShow:false,// 是否显示
|
||||
isPolicy:false,// 是否同意
|
||||
countdown:false,// 清空倒计时
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpHome(){
|
||||
// const sysPlatform = getCurrentSysPlatform();
|
||||
// if(sysPlatform === "android"){
|
||||
// uni.switchTab({
|
||||
// url: '/pages/message/message',
|
||||
// })
|
||||
// }else{
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home',
|
||||
})
|
||||
// }
|
||||
|
||||
},
|
||||
async loginFun(){
|
||||
const then=this;
|
||||
const form=this.form;
|
||||
const params = {}
|
||||
if(!this.isPolicy){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请阅读完相关协议以及政策，并且勾选同意选项",
|
||||
});
|
||||
return;
|
||||
}
|
||||
let response={};
|
||||
if(this.loginWay === 'password'){
|
||||
|
||||
}else{
|
||||
params.mobile = form.name;
|
||||
params.smsCode = form.code;
|
||||
response = await loginbysms(params);
|
||||
}
|
||||
const data = response.data;
|
||||
setStorageFun(TOKEN_NAME,data.token);
|
||||
// 用于无感登录
|
||||
setStorageFun(USER_KEY,'');
|
||||
const userInfo = {
|
||||
avatar:data.avatarUrl,
|
||||
name: data.name,
|
||||
userId: data.userId,
|
||||
};
|
||||
setStorageFun(USER_DATA,userInfo);
|
||||
// 当前登录得时间戳
|
||||
let currentTimeStamp = new Date().getTime();
|
||||
setStorageFun(USER_LOGIN_TIME,currentTimeStamp);
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'success',
|
||||
message: response.msg,
|
||||
});
|
||||
setTimeout(()=>{
|
||||
then.jumpHome();
|
||||
},2000);
|
||||
},
|
||||
checkNameParam(val){
|
||||
console.log("val",val);
|
||||
},
|
||||
checkParam(val){
|
||||
console.log("val",val);
|
||||
},
|
||||
/**
|
||||
* 获取手机验证码
|
||||
*/
|
||||
async getMobileCode(){
|
||||
const form = this.form;
|
||||
if(!form.name){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入账号",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.countdown = true;
|
||||
|
||||
const params={
|
||||
mobile:form.name,
|
||||
type:SMS_TYPE.LOGIN,
|
||||
}
|
||||
const response = await getUserList(params);
|
||||
if(response && response.bizcode === 100){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'success',
|
||||
message: response.msg,
|
||||
});
|
||||
}else{
|
||||
this.countdown = false;
|
||||
}
|
||||
},
|
||||
jumpRegister(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/register/register",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login_warp{
|
||||
height: calc(100vh - 460rpx);
|
||||
padding: 250rpx 50rpx 0;
|
||||
}
|
||||
.login_logo_warp{
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
}
|
||||
.login_info{
|
||||
margin-top: 60rpx;
|
||||
.login_info_item{
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.code_msg{
|
||||
font-size: 36rpx;
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
}
|
||||
.login_comm_but{
|
||||
background: #CCCCCC;
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
padding: 28rpx 0;
|
||||
}
|
||||
.login_comm_but_yes{
|
||||
background: $app-bt-bj;
|
||||
color: #ffffff;
|
||||
}
|
||||
.cut_way_warp{
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<view class="mine_address_warp">
|
||||
<view v-for="item in addressList" :key="item.id" class="address_item" v-if="addressList && addressList.length !==0">
|
||||
<view class="address_item_info">
|
||||
<view>{{item.name}}</view>
|
||||
<view style="margin-left: 20rpx;">{{item.phone}}</view>
|
||||
</view>
|
||||
<view class="address_item_address">
|
||||
{{item.countryName}} {{item.provinceName}} {{item.cityName}} {{item.areaName}} {{item.address}}
|
||||
</view>
|
||||
<view class="address_operate">
|
||||
<up-checkbox
|
||||
:customStyle="{}"
|
||||
label="已默认"
|
||||
name="agree"
|
||||
usedAlone
|
||||
:checked="item.isDefault"
|
||||
shape="circle"
|
||||
activeColor="#FF7C41"
|
||||
@change="isDefaultChange(item)"
|
||||
>
|
||||
</up-checkbox>
|
||||
<view class="operate_item">
|
||||
<view class="operate_" @click="deleteAddressFun(item)">删除</view>
|
||||
<view class="operate_" @click="updateAddress(item)">修改</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<view class="not_order_warp_img"><up-image src="/static/common/not_search.png" width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
|
||||
<view class="not_order_msg_warp">暂时地址，快去添加吧~</view>
|
||||
</view>
|
||||
<view class="add_but" @click="jumpAddAddress">
|
||||
新增地址
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAddress,setAddressDefault,deleteAddress } from '@/api/address.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addressList:[
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAddressList();
|
||||
},
|
||||
methods: {
|
||||
// 添加地址
|
||||
jumpAddAddress(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/mine_address_add/mine_address_add',
|
||||
})
|
||||
},
|
||||
// 查询地址
|
||||
async getAddressList(){
|
||||
const res = await getAddress();
|
||||
if(res && res.bizcode === 100){
|
||||
this.addressList = res.data;
|
||||
}
|
||||
},
|
||||
// 设为默认地址
|
||||
async isDefaultChange(item){
|
||||
const params={
|
||||
id:item.id,
|
||||
}
|
||||
const res = await setAddressDefault(params);
|
||||
if(res && res.bizcode === 100){
|
||||
this.getAddressList();
|
||||
}
|
||||
},
|
||||
// 删除地址
|
||||
deleteAddressFun(item){
|
||||
console.log("item",item);
|
||||
const then = this;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否要删除该地址？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
then.deleteAddress(item);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除的方法
|
||||
async deleteAddress(item){
|
||||
const params={
|
||||
id:item.id,
|
||||
}
|
||||
const respon = await deleteAddress(params);
|
||||
if(respon && respon.bizcode === 100){
|
||||
this.getAddressList();
|
||||
}
|
||||
},
|
||||
// 修改地址
|
||||
updateAddress(item){
|
||||
uni.navigateTo({
|
||||
url:'/pages/mine_address_add/mine_address_add?id='+item.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mine_address_warp{
|
||||
height: calc(100vh - 188rpx);
|
||||
overflow-y: auto;
|
||||
background-color: $app-bj;
|
||||
padding: 30rpx;
|
||||
}
|
||||
.address_item{
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.address_item_info{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
display: flex;
|
||||
}
|
||||
.address_item_address{
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.address_operate{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.operate_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.operate_{
|
||||
padding: 10rpx 30rpx;
|
||||
background: #F3F3F3;
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
color: #222222;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<view class="address_add_warp">
|
||||
<view class="address_form">
|
||||
<view class="add_form_item add_form_item_but">
|
||||
<view class="add_form_title">收货人</view>
|
||||
<up-input
|
||||
placeholder="收货人"
|
||||
border="surround"
|
||||
v-model="form.name"
|
||||
:customStyle="{
|
||||
'border':'0rpx',
|
||||
}"
|
||||
></up-input>
|
||||
</view>
|
||||
<view class="add_form_item add_form_item_but">
|
||||
<view class="add_form_title">手机号码</view>
|
||||
<up-input
|
||||
placeholder="请填写收货人手机号"
|
||||
border="surround"
|
||||
v-model="form.mobile"
|
||||
:customStyle="{
|
||||
'border':'0rpx',
|
||||
}"
|
||||
></up-input>
|
||||
</view>
|
||||
<view class="add_form_item add_form_item_but" >
|
||||
<view class="add_form_title">所在地区</view>
|
||||
<view class="region_warp" @click="regionShowCheck(true)">
|
||||
<view style="color: #808080;margin-left: 22rpx;font-size: 28rpx;">{{(form.regionStr && form.regionStr.join("/")) || "所在地区"}}</view>
|
||||
<up-image src="/static/common/right_soild.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="add_form_item">
|
||||
<view class="add_form_title">详细地址</view>
|
||||
<up-input
|
||||
placeholder="门牌号、小区、楼栋号、单元室等"
|
||||
border="surround"
|
||||
v-model="form.address"
|
||||
:customStyle="{
|
||||
'border':'0rpx',
|
||||
'height':'100rpx',
|
||||
}"
|
||||
></up-input>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="address_default">
|
||||
<view class="title">设为默认地址</view>
|
||||
<up-switch
|
||||
v-model="form.isDefault"
|
||||
activeColor="#FF7C41"
|
||||
size="20"
|
||||
>
|
||||
</up-switch>
|
||||
</view> -->
|
||||
<view class="add_but" @click="addAddress">
|
||||
保存地址
|
||||
</view>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
<up-picker
|
||||
:show="regionShow"
|
||||
ref="uPickerRef"
|
||||
:columns="regionColumns"
|
||||
@confirm="regionConfirm"
|
||||
:loading="regionLoading"
|
||||
@change="regionChange"
|
||||
keyName="label"
|
||||
itemHeight="34"
|
||||
></up-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { editAddress,getAddressDetail } from '@/api/address.js'
|
||||
import { getCascadeRegion } from '@/api/common.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form:{
|
||||
id:0,
|
||||
name:null,// 收货人
|
||||
mobile:null,// 手机号码
|
||||
regionStr:null,// 所属地区
|
||||
countryId:null,// 国家ID
|
||||
provinceId:null,// 省份ID
|
||||
cityId:null,// 城市ID
|
||||
areaId:null,// 区域ID
|
||||
address:null,// 详细地址
|
||||
},
|
||||
regionShow:false,
|
||||
regionColumns:[],
|
||||
regionLoading:false,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const id = option.id;
|
||||
if(id && id!==0){
|
||||
this.getById(id);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 用作编辑
|
||||
*/
|
||||
async getById(id){
|
||||
const parasm ={
|
||||
id,
|
||||
}
|
||||
const resp = await getAddressDetail(parasm);
|
||||
if(resp && resp.bizcode === 100){
|
||||
const data = resp.data;
|
||||
this.form.id = id;
|
||||
this.form.name=data.name;// 收货人
|
||||
this.form.mobile=data.phone;// 手机号码
|
||||
this.form.countryId=data.countryId;// 国家ID
|
||||
this.form.provinceId=data.provinceId;// 省份ID
|
||||
this.form.cityId=data.cityId;// 城市ID
|
||||
this.form.areaId=data.areaId;// 区域ID
|
||||
this.form.address=data.address;//
|
||||
const regionStr = [];
|
||||
if(data.countryName){
|
||||
regionStr.push(data.countryName);
|
||||
}
|
||||
if(data.provinceName){
|
||||
regionStr.push(data.provinceName);
|
||||
}
|
||||
if(data.cityName){
|
||||
regionStr.push(data.cityName);
|
||||
}
|
||||
if(data.areaName){
|
||||
regionStr.push(data.areaName);
|
||||
}
|
||||
|
||||
this.form.regionStr=regionStr;// 所属地区
|
||||
}
|
||||
},
|
||||
|
||||
// 选择地址的弹框
|
||||
async regionShowCheck(status){
|
||||
if(status){
|
||||
const nation = await this.getRegion(0);
|
||||
const province = nation && nation.length !==0 ? await this.getRegion(nation[0].id):[];
|
||||
const city = province && province.length !==0 ? await this.getRegion(province[0].id):[];
|
||||
const area = city && city.length !==0 ? await this.getRegion(city[0].id):[];
|
||||
this.regionColumns = [nation,province,city,area];
|
||||
}else{
|
||||
this.regionColumns = [[],[],[],[]];
|
||||
}
|
||||
this.regionShow = status;
|
||||
},
|
||||
// 数据交互
|
||||
async getRegion(pId){
|
||||
this.regionLoading = true
|
||||
const params={
|
||||
parentId:pId,
|
||||
}
|
||||
const resp = await getCascadeRegion(params);
|
||||
const arrOption=[];
|
||||
if(resp.bizcode === 100){
|
||||
const data = resp.data;
|
||||
if(data && data.length !==0){
|
||||
data.map(item=>{
|
||||
arrOption.push({
|
||||
id:item.id,
|
||||
label:item.name,
|
||||
pId:pId,
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
this.regionLoading = false;
|
||||
return arrOption
|
||||
},
|
||||
// 地区改变
|
||||
async regionChange(e){
|
||||
const {
|
||||
columnIndex,
|
||||
index,
|
||||
picker
|
||||
} = e;
|
||||
const selectData = this.regionColumns[columnIndex][index];
|
||||
const resultData = await this.getRegion(selectData.id);
|
||||
if(resultData && resultData.length !==0){
|
||||
const index = columnIndex+1;
|
||||
this.regionColumns[index] = resultData;
|
||||
}
|
||||
},
|
||||
|
||||
// 提交地址
|
||||
regionConfirm(e){
|
||||
const {
|
||||
columnIndex,
|
||||
value,
|
||||
values,
|
||||
index,
|
||||
} = e;
|
||||
const regionStr = [];
|
||||
const regionId = [];
|
||||
value.map(item=>{
|
||||
if(item){
|
||||
regionStr.push(item.label);
|
||||
regionId.push(item.id);
|
||||
}
|
||||
})
|
||||
this.form.regionStr = regionStr;
|
||||
if(regionId && regionId.length !==0){
|
||||
this.form.countryId = regionId[0] ? regionId[0] : null;
|
||||
this.form.provinceId = regionId[1] ? regionId[1] : null;
|
||||
this.form.cityId = regionId[2] ? regionId[2] : null;
|
||||
this.form.areaId = regionId[3] ? regionId[3] : null;
|
||||
}
|
||||
this.regionShowCheck(false);
|
||||
},
|
||||
|
||||
// 添加地址
|
||||
async addAddress(){
|
||||
const params = {
|
||||
...this.form,
|
||||
}
|
||||
if(!params.name){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入收货人",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!params.mobile){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入收货人手机号",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!params.regionStr){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请选择所在地区",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!params.address){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入详细地址",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!params.id || params.id === 0){
|
||||
delete params.id;
|
||||
}
|
||||
if(!params.areaId || params.areaId === 0){
|
||||
delete params.areaId;
|
||||
}
|
||||
delete params.regionStr;
|
||||
const res = await editAddress(params);
|
||||
if(res && res.bizcode === 100){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'success',
|
||||
message: params.id && params.id !==0 ? '修改成功':"添加成功",
|
||||
});
|
||||
setTimeout(()=>{
|
||||
uni.navigateTo({
|
||||
url:'/pages/mine_address/mine_address',
|
||||
})
|
||||
},2000)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.address_add_warp{
|
||||
height: calc(100vh - 58rpx);
|
||||
background-color: $app-bj;
|
||||
padding: 30rpx;
|
||||
}
|
||||
.address_form{
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 0 30rpx 30rpx;
|
||||
}
|
||||
.region_warp{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 160rpx);
|
||||
}
|
||||
.address_default{
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #222222;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<view class="authentication_warp">
|
||||
<view class="data_common_warp">
|
||||
<view class="data_msg">请填写商户本人的相关信息</view>
|
||||
<view
|
||||
:class="item.id < formList.length ?'add_form_item add_form_item_but':'add_form_item'"
|
||||
v-for="item in formList"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="add_form_title">{{item.title}}</view>
|
||||
<up-input
|
||||
:placeholder="item.placeholder"
|
||||
border="surround"
|
||||
v-model="form[item.formName]"
|
||||
:customStyle="inputCss"
|
||||
></up-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="data_common_warp">
|
||||
<view class="ID_card_title">上传证件照</view>
|
||||
<view class="ID_card_msg">（请务必上传本人证件照，生活照、艺术照将会被驳回）</view>
|
||||
<view class="ID_card_upload">
|
||||
<view class="upload_item">
|
||||
<up-image src="/static/common/ID_rx.png" width="100%" height="90" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="upload_msg">点击上传身份证人像面</view>
|
||||
</view>
|
||||
<view class="upload_item">
|
||||
<up-image src="/static/common/ID_gq.png" width="100%" height="90" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="upload_msg">点击上传身份国旗面</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ID_card_upload_templ">
|
||||
<view class="templ_title">上传标准</view>
|
||||
<view class="templ_img_list">
|
||||
<view class="templ_img_item" v-for="item in uploadTemplList" :key="item.id">
|
||||
<up-image :src="item.url" width="100%" height="50" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="templ_img_item_msg">
|
||||
<up-image :src="item.isOk ? '/static/common/ID_ok_1.png' :'/static/common/ID_error.png'" width="10" height="10" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="templ_img_item_msg_title">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="add_but" @click="addAuthentication">
|
||||
提交
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inputCss:{
|
||||
"height":'80rpx',
|
||||
"border-radius": "30rpx",
|
||||
"border": "0rpx",
|
||||
},
|
||||
form:{
|
||||
name:null,
|
||||
mobile:null,
|
||||
number:null,// 银行名称
|
||||
},
|
||||
formList:[
|
||||
{
|
||||
id:1,
|
||||
title:"真实姓名",
|
||||
formName:"name",
|
||||
placeholder:"请输入您的真实姓名",
|
||||
},{
|
||||
id:2,
|
||||
title:"手机号",
|
||||
formName:"mobile",
|
||||
placeholder:"请输入手机号",
|
||||
},{
|
||||
id:3,
|
||||
title:"证件号码",
|
||||
formName:"number",
|
||||
placeholder:"请输入证件号码",
|
||||
}
|
||||
],
|
||||
uploadTemplList:[
|
||||
{
|
||||
id:1,
|
||||
title:"标准",
|
||||
isOk:true,
|
||||
url:"/static/common/ID_ok.png",
|
||||
},{
|
||||
id:2,
|
||||
title:"边框缺失",
|
||||
isOk:false,
|
||||
url:"/static/common/ID_error_1.png",
|
||||
},{
|
||||
id:3,
|
||||
title:"照片模糊",
|
||||
isOk:false,
|
||||
url:"/static/common/ID_error_2.png",
|
||||
},{
|
||||
id:4,
|
||||
title:"闪光强烈",
|
||||
isOk:false,
|
||||
url:"/static/common/ID_error_3.png",
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addAuthentication(){
|
||||
const params={
|
||||
...this.form
|
||||
}
|
||||
if(!params.name){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入您的真实姓名",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!params.mobile){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入手机号",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!params.number){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入证件号码",
|
||||
});
|
||||
return;
|
||||
}
|
||||
console.log("params",params);
|
||||
uni.navigateTo({
|
||||
url:'/pages/mine_authentication_ok/mine_authentication_ok',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.authentication_warp{
|
||||
height: calc(100vh - 58rpx);
|
||||
background-color: $app-bj;
|
||||
padding: 30rpx;
|
||||
.data_common_warp{
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.data_msg{
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #F34343;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="authentication_ok_warp">
|
||||
<view class="authentication_result">
|
||||
<view class="result_title">您的实名认证</view>
|
||||
<view class="result_value">已通过!</view>
|
||||
</view>
|
||||
<view class="authentication_info">
|
||||
<view class="info_item">
|
||||
<text class="info_item_title">证件姓名：</text>
|
||||
<text class="info_item_value">张某</text>
|
||||
</view>
|
||||
<view class="info_item">
|
||||
<text class="info_item_title">证件性别：</text>
|
||||
<text class="info_item_value">男</text>
|
||||
</view>
|
||||
<view class="info_item">
|
||||
<text class="info_item_title">证件号码：</text>
|
||||
<text class="info_item_value">448468454848458</text>
|
||||
</view>
|
||||
</view>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.authentication_ok_warp{
|
||||
height: 100vh;
|
||||
background-color: #FFFFFF;
|
||||
padding: 60rpx;
|
||||
.authentication_result{
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
.result_title{
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.result_value{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
}
|
||||
.authentication_info{
|
||||
background: #F8F8F8;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.info_item{
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 66rpx;
|
||||
}
|
||||
.info_item_value{
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<view class="bank_add_warp">
|
||||
<view class="add_form">
|
||||
<view class="add_bank_form_item" v-for="item in formList" :key="item.id">
|
||||
<view class="add_title">{{item.title}}</view>
|
||||
<up-input
|
||||
:placeholder="item.placeholder"
|
||||
border="surround"
|
||||
v-model="form[item.formName]"
|
||||
:customStyle="inputCss"
|
||||
></up-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="add_but" @click="addBank">
|
||||
添加
|
||||
</view>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inputCss:{
|
||||
"height":'80rpx',
|
||||
"background": "#F5F5F5",
|
||||
"border-radius": "30rpx",
|
||||
"border": "0rpx",
|
||||
"padding-left": "16px",
|
||||
},
|
||||
form:{
|
||||
name:null,
|
||||
number:null,
|
||||
bankName:null,// 银行名称
|
||||
bankBranch:null,// 开户支行
|
||||
iban:null,// IBAN
|
||||
},
|
||||
formList:[
|
||||
{
|
||||
id:1,
|
||||
title:"姓名",
|
||||
formName:"name",
|
||||
placeholder:"请输入姓名",
|
||||
},{
|
||||
id:2,
|
||||
title:"银行卡账号/卡号",
|
||||
formName:"number",
|
||||
placeholder:"请输入账号",
|
||||
},{
|
||||
id:3,
|
||||
title:"银行名称",
|
||||
formName:"bankName",
|
||||
placeholder:"请输入银行名称",
|
||||
},{
|
||||
id:4,
|
||||
title:"开户支行（选填）",
|
||||
formName:"bankBranch",
|
||||
placeholder:"请属于您的开户支行",
|
||||
},{
|
||||
id:5,
|
||||
title:"IBAN（选填）",
|
||||
formName:"iban",
|
||||
placeholder:"IBNA",
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addBank(){
|
||||
|
||||
const param ={
|
||||
...this.form
|
||||
};
|
||||
if(!param.name){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入姓名",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!param.number){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "银行卡账号/卡号",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!param.bankName){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "银行名称",
|
||||
});
|
||||
return;
|
||||
}
|
||||
console.log("param",param);
|
||||
uni.navigateTo({
|
||||
url:'/pages/mine_bank_card/mine_bank_card',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bank_add_warp{
|
||||
height: calc(100vh - 58rpx);
|
||||
background-color: $app-bj;
|
||||
padding: 30rpx;
|
||||
}
|
||||
.add_form{
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.add_bank_form_item{
|
||||
margin-bottom: 30rpx;
|
||||
.add_title{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #111111;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view class="mine_bank_warp">
|
||||
<view class="bank_title">
|
||||
银行卡（{{bankList.length}}张）
|
||||
</view>
|
||||
<view class="bank_list">
|
||||
<view class="bank_item" v-for="item in bankList" :key="item.id" >
|
||||
<view class="bank_data">
|
||||
<up-image :src="item.url" width="50" height="50" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="bank_info">
|
||||
<view class="bank_bank_name">{{item.bankName}}</view>
|
||||
<view class="bank_user_name">{{item.userName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bank_parting_line"></view>
|
||||
<view>{{item.number}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="add_but" @click="jumpAddBank">
|
||||
添加银行卡
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bankList:[
|
||||
{
|
||||
id:1,
|
||||
url:'/static/bank/default.png',
|
||||
bankName:'中国交通银行',
|
||||
userName:'张某某',
|
||||
number:"**** **** **** 0865",
|
||||
},{
|
||||
id:2,
|
||||
url:'/static/bank/default.png',
|
||||
bankName:'中国农业银行',
|
||||
userName:'张某某',
|
||||
number:"**** **** **** 0769",
|
||||
},{
|
||||
id:3,
|
||||
url:'/static/bank/default.png',
|
||||
bankName:'中国农业银行',
|
||||
userName:'张某某',
|
||||
number:"**** **** **** 0769",
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpAddBank(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/mine_bank_add/mine_bank_add',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mine_bank_warp{
|
||||
height: calc(100vh - 58rpx);
|
||||
background-color: $app-bj;
|
||||
padding: 30rpx;
|
||||
overflow-y: hidden;
|
||||
.bank_title{
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.bank_list{
|
||||
margin-top: 20rpx;
|
||||
height: calc(100vh - 250rpx);
|
||||
overflow: auto;
|
||||
}
|
||||
.bank_item{
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.bank_data{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.bank_info{
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.bank_bank_name{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.bank_user_name{
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.bank_parting_line{
|
||||
height: 1rpx;
|
||||
background: #EEEEEEFF;
|
||||
border-radius: 0rpx 0rpx 1rpx 1rpx;
|
||||
margin: 30rpx auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,470 @@
|
||||
<template>
|
||||
<view class="order_warp">
|
||||
<view class="order_header">
|
||||
<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpLeft"></up-image>
|
||||
<up-search shape="round" bgColor="#FFFFFFFF" :showAction="false" @search="searchFun"></up-search>
|
||||
</view>
|
||||
<view class="order_type_title">
|
||||
<view
|
||||
:class="type === item.id ? 'order_type_title_item order_type_title_item_sel':'order_type_title_item'"
|
||||
v-for="item in orderTypeList"
|
||||
@click="checkType(item)"
|
||||
:key="item.id"
|
||||
>
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view v-if="orderList && orderList.length!==0" class="order_list_warp">
|
||||
<view class="order_item" v-for="item in orderList" :key="item.id">
|
||||
<!-- 头部 -->
|
||||
<view class="order_item_header">
|
||||
<view class="order_item_header_left">
|
||||
<up-image :src="item.url" width="22" height="22" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="order_product_title">{{item.name}}</view>
|
||||
</view>
|
||||
<!-- 除开待付款 -->
|
||||
<view
|
||||
v-if="item.status !== 1"
|
||||
class="order_item_header_right"
|
||||
:style="{'color': ORDER_STATUS_CSS[item.status]}">
|
||||
{{getValue(ORDER_STATUS,item.status)}}
|
||||
</view>
|
||||
<!-- 待付款 -->
|
||||
<view v-else class="order_item_header_right order_right_due">
|
||||
<view class="order_right_due_msg">等待付款</view>
|
||||
<view class="order_right_due_time">{{item.paymentTime}}分钟</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 产品详情 -->
|
||||
<view class="order_item_content">
|
||||
<view v-for="pItem in item.product" :key="pItem.id" class="content_item">
|
||||
<up-image :src="pItem.url" width="80" height="80" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="content_info">
|
||||
<view class="content_info_title">{{pItem.title}}</view>
|
||||
<view class="content_info_tag">{{pItem.tag.join(" ")}}</view>
|
||||
<view>
|
||||
<text class="content_info_description" v-for="dItem in pItem.description">
|
||||
{{dItem}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_right">
|
||||
<view class="content_right_total">￥{{pItem.total}}</view>
|
||||
<view class="content_right_quantity">x{{pItem.quantity}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 汇总 -->
|
||||
<view class="order_item_collect">
|
||||
<view class="collect_msg">共1件,合计￥3599</view>
|
||||
<view class="collect_operate">
|
||||
<view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.UNSHIPPED" @click="checkCancel(true)">取消订单</view>
|
||||
<view class="operate_comm operate_but_2" v-if="item.status === ORDER_TYPE.UNPAID" @click="jumpOrderInfo">去付款</view>
|
||||
<view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.COMPLETED">申请退款</view>
|
||||
<view class="operate_comm operate_but_2" v-if="item.status === ORDER_TYPE.NOT_RECEIVE">确认收货</view>
|
||||
<view class="operate_comm operate_but_3" v-if="item.status === ORDER_TYPE.UNSHIPPED">提醒发货</view>
|
||||
<view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.COMPLETED">申请售后</view>
|
||||
<view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.AFTER_SALE">查看售后</view>
|
||||
<view class="operate_comm operate_but_1" v-if="[ORDER_TYPE.COMPLETED].includes(item.status)">删除记录</view>
|
||||
<view class="operate_comm operate_but_3" v-if="[ORDER_TYPE.COMPLETED,ORDER_TYPE.CANCELED].includes(item.status)">再次购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<up-image src="/static/common/not_order.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="not_order_msg_warp">暂无相关订单</view>
|
||||
</view>
|
||||
</view>
|
||||
<up-popup v-model:show="cancelShow" :round="10" :closeOnClickOverlay="false">
|
||||
<view class="cancel_show_warp">
|
||||
<view class="cancel_show_title_warp">
|
||||
<view>取消订单</view>
|
||||
<view class="cancel_show_title_icon" @click="checkCancel(false)"><up-icon name="close-circle" color="#9e9e9e" size="20"></up-icon></view>
|
||||
</view>
|
||||
<view class="cancel_show_msg_warp">
|
||||
<view>温馨提示：</view>
|
||||
<view>1.限时特价、预约资格等购买优惠可能一并取消</view>
|
||||
<view>2.订单一旦取消，支付优惠一并取消，可能无法恢复</view>
|
||||
</view>
|
||||
<view class="cancel_show_reason_warp">
|
||||
<view class="reason_title">请选择取消订单的原因（必选）：</view>
|
||||
<up-radio-group
|
||||
v-model="cancelForm.reason"
|
||||
placement="column"
|
||||
>
|
||||
<up-radio
|
||||
:customStyle="{marginBottom: '8px'}"
|
||||
v-for="(item, index) in reasonList"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.name"
|
||||
>
|
||||
</up-radio>
|
||||
</up-radio-group>
|
||||
<up-textarea v-model="cancelForm.remark"></up-textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="but_border_warp"></view>
|
||||
<view class="cancel_show_but">
|
||||
<view class="add_but" @click="cancelOk">提交</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ORDER_TYPE,ORDER_STATUS,getValue } from '@/utils/enumUtils.js';
|
||||
import { ORDER_STATUS_CSS } from '@/utils/enumCssUtils.js';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
ORDER_TYPE() {
|
||||
return ORDER_TYPE;
|
||||
},
|
||||
ORDER_STATUS() {
|
||||
return ORDER_STATUS;
|
||||
},
|
||||
ORDER_STATUS_CSS() {
|
||||
return ORDER_STATUS_CSS;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type:0,// 选中的类型
|
||||
orderTypeList:[
|
||||
{
|
||||
id:0,
|
||||
title:"全部",
|
||||
},
|
||||
{
|
||||
id:ORDER_TYPE.UNPAID,
|
||||
title:"待支付",
|
||||
},{
|
||||
id:ORDER_TYPE.UNSHIPPED,
|
||||
title:"待发货",
|
||||
},{
|
||||
id:ORDER_TYPE.NOT_RECEIVE,
|
||||
title:"待收货",
|
||||
},{
|
||||
id:ORDER_TYPE.AFTER_SALE,
|
||||
title:"退款售后",
|
||||
},
|
||||
],
|
||||
form:{
|
||||
search:null,//搜索
|
||||
},
|
||||
orderList:[
|
||||
{
|
||||
id:1,
|
||||
url:'/static/common/order_defal.png',
|
||||
name:"哈希店铺",
|
||||
status:1,
|
||||
paymentTime:29,// 剩余付款时间，单位：分钟
|
||||
product:[
|
||||
{
|
||||
id:1,
|
||||
url:'/static/common/product_def.png',
|
||||
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
|
||||
description:['双开门','大容量'],
|
||||
tag:['7天无理由退货','退货险'],
|
||||
quantity:1,
|
||||
total:3599,
|
||||
}
|
||||
],
|
||||
productTotal:3599,
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
url:'/static/common/order_defal.png',
|
||||
name:"哈希店铺",
|
||||
status:2,
|
||||
product:[
|
||||
{
|
||||
id:1,
|
||||
url:'/static/common/product_def.png',
|
||||
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
|
||||
description:['双开门','大容量'],
|
||||
tag:['7天无理由退货','退货险'],
|
||||
quantity:1,
|
||||
total:3599,
|
||||
},{
|
||||
id:2,
|
||||
url:'/static/common/product_def.png',
|
||||
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
|
||||
description:['双开门','大容量'],
|
||||
tag:['7天无理由退货','退货险'],
|
||||
quantity:1,
|
||||
total:3599,
|
||||
}
|
||||
],
|
||||
productTotal:7099.88,
|
||||
},{
|
||||
id:3,
|
||||
url:'/static/common/order_defal.png',
|
||||
name:"哈希店铺",
|
||||
status:4,
|
||||
product:[
|
||||
{
|
||||
id:1,
|
||||
url:'/static/common/product_def.png',
|
||||
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
|
||||
description:['双开门','大容量'],
|
||||
tag:['7天无理由退货','退货险'],
|
||||
quantity:1,
|
||||
total:3599,
|
||||
}
|
||||
],
|
||||
productTotal:3599,
|
||||
},{
|
||||
id:4,
|
||||
url:'/static/common/order_defal.png',
|
||||
name:"哈希店铺",
|
||||
status:5,
|
||||
product:[
|
||||
{
|
||||
id:1,
|
||||
url:'/static/common/product_def.png',
|
||||
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
|
||||
description:['双开门','大容量'],
|
||||
tag:['7天无理由退货','退货险'],
|
||||
quantity:1,
|
||||
total:3599,
|
||||
}
|
||||
],
|
||||
productTotal:3599,
|
||||
},{
|
||||
id:6,
|
||||
url:'/static/common/order_defal.png',
|
||||
name:"哈希店铺",
|
||||
status:6,
|
||||
product:[
|
||||
{
|
||||
id:1,
|
||||
url:'/static/common/product_def.png',
|
||||
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
|
||||
description:['双开门','大容量'],
|
||||
tag:['7天无理由退货','退货险'],
|
||||
quantity:1,
|
||||
total:3599,
|
||||
}
|
||||
],
|
||||
productTotal:3599,
|
||||
},
|
||||
],
|
||||
cancelShow:false,// 取消订单
|
||||
reasonList:[
|
||||
{
|
||||
id:1,
|
||||
name:'地址信息填写错误',
|
||||
},{
|
||||
id:2,
|
||||
name:'不想要了',
|
||||
},{
|
||||
id:3,
|
||||
name:'商品错选/多选',
|
||||
},{
|
||||
id:4,
|
||||
name:'没用/少用/错用优惠券',
|
||||
},{
|
||||
id:5,
|
||||
name:'商品降价',
|
||||
},{
|
||||
id:6,
|
||||
name:'其他原因',
|
||||
},
|
||||
],
|
||||
cancelForm:{
|
||||
reason:null,
|
||||
remark:null,
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const type = options.type;
|
||||
this.type = type ? parseInt(type,10) : 0;
|
||||
},
|
||||
methods: {
|
||||
getValue,
|
||||
jumpLeft(){
|
||||
uni.switchTab({
|
||||
url: '/pages/mine/mine',
|
||||
})
|
||||
},
|
||||
searchFun(val){
|
||||
console.log("searchFun",val);
|
||||
},
|
||||
checkType(item){
|
||||
this.type = item.id;
|
||||
},
|
||||
jumpOrderInfo(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/mine_order_info/mine_order_info?type="+this.type,
|
||||
})
|
||||
},
|
||||
checkCancel(status){
|
||||
this.cancelShow = status;
|
||||
if(!status){
|
||||
this.cancelForm={
|
||||
reason:null,
|
||||
remark:null,
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 确认取消
|
||||
*/
|
||||
cancelOk(){
|
||||
const params={
|
||||
...this.cancelForm,
|
||||
}
|
||||
if(!params.reason){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请选择取消原因",
|
||||
});
|
||||
return;
|
||||
}
|
||||
console.log("params",params);
|
||||
this.checkCancel(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order_warp{
|
||||
height: calc(100vh - 130rpx);
|
||||
background-color: $app-bj;
|
||||
padding: 100rpx 30rpx 30rpx;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.order_header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.order_type_title{
|
||||
display: flex;
|
||||
margin-top: 30rpx;
|
||||
align-items: center;
|
||||
.order_type_title_item{
|
||||
margin-right: 40rpx;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
}
|
||||
.order_type_title_item_sel{
|
||||
font-weight: 800;
|
||||
font-size: 36rpx;
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
}
|
||||
.order_list_warp{
|
||||
height: calc(100vh - 270rpx);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.order_item{
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx 20rpx;
|
||||
margin-top: 20rpx;
|
||||
.order_item_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.order_product_title{
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #1A1A1A;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.order_item_header_left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.order_item_header_right{
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.order_right_due{
|
||||
display: flex;
|
||||
background: #FFF9F2;
|
||||
border-radius: 19rpx 22rpx 22rpx 19rpx;
|
||||
}
|
||||
.order_right_due_msg{
|
||||
background: $app-bt-bj;
|
||||
border-radius: 22rpx 0rpx 12rpx 22rpx;
|
||||
color: #FFFFFF;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
.order_right_due_time{
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: $app-bt-bj;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.order_item_collect{
|
||||
margin-top: 20rpx;
|
||||
.collect_msg{
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.cancel_show_warp{
|
||||
padding: 20rpx;
|
||||
.cancel_show_title_warp{
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #222222;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.cancel_show_title_icon{
|
||||
position: absolute;
|
||||
right: 14rpx;
|
||||
top: 6rpx;
|
||||
}
|
||||
.cancel_show_msg_warp{
|
||||
background: #F8F8F8;
|
||||
padding: 30rpx;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
line-height: 48rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.cancel_show_reason_warp{
|
||||
margin-top: 20rpx;
|
||||
.reason_title{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
line-height: 36rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.but_border_warp{
|
||||
border: 1rpx solid #eeeeee94;
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
.cancel_show_but{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.add_but {
|
||||
position: initial;
|
||||
width: 94%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<view class="mine_order_info_warp">
|
||||
<view class="order_info_header">
|
||||
<up-image src="/static/common/left_b.png" width="20" height="19" bgColor="#f1f6ff00" @click="jumpLeft"></up-image>
|
||||
<view class="header_status">
|
||||
<up-image src="/static/common/order_status_1.png" width="20" height="19" bgColor="#f1f6ff00"></up-image>
|
||||
<text class="msg">{{getValue(ORDER_STATUS,orderInfo.status)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order_info_content">
|
||||
<!-- 等待付款 -->
|
||||
<view class="content_due" v-if="orderInfo.status === ORDER_TYPE.UNPAID">
|
||||
<view style="">
|
||||
<text style="font-size: 28rpx;font-weight: bold;">需付款：</text>
|
||||
<text style="font-size: 28rpx;">￥</text>
|
||||
<text style="font-size: 36rpx;font-weight: bold;">234</text>
|
||||
<text style="font-size: 28rpx;">.00</text>
|
||||
<text style="font-size: 20rpx;font-weight: bold;margin-left: 20rpx;">剩余</text>
|
||||
<text style="font-size: 28rpx;font-weight: bold;margin-left: 10rpx;">29:32:20</text>
|
||||
<text style="font-size: 20rpx;font-weight: bold;"> 订单自动取消</text>
|
||||
</view>
|
||||
<view class="payment_but">
|
||||
<view class="but">去支付</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_cancel" v-if="orderInfo.status === ORDER_TYPE.CANCELED">取消原因：超时未支付</view>
|
||||
<!-- 地址 -->
|
||||
<view class="steps_warp">
|
||||
<!-- 物流单号 -->
|
||||
<view class="address_info" v-if="[ORDER_TYPE.NOT_RECEIVE].includes(orderInfo.status)">
|
||||
<view class="address_data_warp">
|
||||
<up-image src="/static/common/waybill.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="address_info_name">运单号：</view>
|
||||
<view class="address_info_mobile" style="margin-right: 20rpx;">{{orderInfo.waybillNumber}}</view>
|
||||
<up-image src="/static/common/copy.png" width="14" height="14" bgColor="#f1f6ff00" @click="copyData(orderInfo.waybillNumber)"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="address_info_right" v-if="[ORDER_TYPE.NOT_RECEIVE].includes(orderInfo.status)"> </view>
|
||||
<!-- 收货地址 -->
|
||||
<view class="address_warp">
|
||||
<view class="address_info">
|
||||
<view class="address_data_warp">
|
||||
<up-image src="/static/common/address.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="address_info_name">{{orderInfo.name}}</view>
|
||||
<view class="address_info_mobile">{{orderInfo.mobile}}</view>
|
||||
</view>
|
||||
<view class="address_but">修改地址</view>
|
||||
</view>
|
||||
<view class="address_content">
|
||||
{{orderInfo.address}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 产品 -->
|
||||
<view class="order_comm order_product_warp">
|
||||
<!-- 头部 -->
|
||||
<view class="order_product_header">
|
||||
<up-image :src="orderInfo.product.url" width="22" height="22" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="order_product_title">{{orderInfo.product.name}}</view>
|
||||
</view>
|
||||
<!-- 产品详情 -->
|
||||
<view class="order_item_content">
|
||||
<view v-for="pItem in orderInfo.product.productList" :key="pItem.id" class="content_item">
|
||||
<up-image :src="pItem.url" width="80" height="80" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="content_info">
|
||||
<view class="content_info_title">{{pItem.title}}</view>
|
||||
<view class="content_info_tag">{{pItem.tag.join(" ")}}</view>
|
||||
<view>
|
||||
<text class="content_info_description" v-for="dItem in pItem.description" :key="dItem">
|
||||
{{dItem}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_right">
|
||||
<view class="content_right_total">￥{{pItem.total}}</view>
|
||||
<view class="content_right_quantity">x{{pItem.quantity}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 金额等数据汇总 -->
|
||||
<view class="order_comm order_data_warp">
|
||||
<view class="data_item">
|
||||
<view class="item_title">商品总价</view>
|
||||
<view class="item_value">￥3599.00</view>
|
||||
</view>
|
||||
<view class="data_item">
|
||||
<view class="item_title">快递运费</view>
|
||||
<view class="item_value">￥0.00</view>
|
||||
</view>
|
||||
<view class="data_item">
|
||||
<view class="item_title">平台优惠<text class="copy_order_coupon">优惠券</text></view>
|
||||
<view class="item_value">-￥10.00</view>
|
||||
</view>
|
||||
<view class="data_item">
|
||||
<view class="item_title">应付款</view>
|
||||
<view class="item_value pay_amount">￥3589.00</view>
|
||||
</view>
|
||||
<view class="order_data_but"></view>
|
||||
<view class="data_item">
|
||||
<view class="item_title">订单编号</view>
|
||||
<view class="item_value">2324124232424 <text class="copy_order_number" @click="copyData('2324124232424')">复制</text></view>
|
||||
</view>
|
||||
<view class="data_item">
|
||||
<view class="item_title">买家留言</view>
|
||||
<view class="item_value">快点发货~</view>
|
||||
</view>
|
||||
<view class="data_item">
|
||||
<view class="item_title">配送方式</view>
|
||||
<view class="item_value">普通快递</view>
|
||||
</view>
|
||||
<view class="data_item">
|
||||
<view class="item_title">支付方式</view>
|
||||
<view class="item_value">微信支付</view>
|
||||
</view>
|
||||
<view class="data_item">
|
||||
<view class="item_title">下单时间</view>
|
||||
<view class="item_value">2024-10-12 20:18:25</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="collect_operate order_but_warp">
|
||||
<view class="operate_comm operate_but_1" v-if="orderInfo.status === ORDER_TYPE.UNSHIPPED">取消订单</view>
|
||||
<view class="operate_comm operate_but_2" v-if="orderInfo.status === ORDER_TYPE.UNPAID" @click="goPay">去付款</view>
|
||||
<view class="operate_comm operate_but_1" v-if="orderInfo.status === ORDER_TYPE.COMPLETED">申请退款</view>
|
||||
<view class="operate_comm operate_but_2" v-if="orderInfo.status === ORDER_TYPE.NOT_RECEIVE">确认收货</view>
|
||||
<view class="operate_comm operate_but_3" v-if="orderInfo.status === ORDER_TYPE.UNSHIPPED">提醒发货</view>
|
||||
<view class="operate_comm operate_but_1" v-if="orderInfo.status === ORDER_TYPE.COMPLETED">申请售后</view>
|
||||
<view class="operate_comm operate_but_1" v-if="orderInfo.status === ORDER_TYPE.AFTER_SALE">查看售后</view>
|
||||
<view class="operate_comm operate_but_1" v-if="[ORDER_TYPE.COMPLETED].includes(orderInfo.status)">删除记录</view>
|
||||
<view class="operate_comm operate_but_3" v-if="[ORDER_TYPE.COMPLETED,ORDER_TYPE.CANCELED].includes(orderInfo.status)">再次购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ORDER_TYPE,ORDER_STATUS,getValue } from '@/utils/enumUtils.js';
|
||||
import { copyData } from '@/utils/index.js';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
ORDER_TYPE() {
|
||||
return ORDER_TYPE;
|
||||
},
|
||||
ORDER_STATUS() {
|
||||
return ORDER_STATUS;
|
||||
},
|
||||
ORDER_STATUS_CSS() {
|
||||
return ORDER_STATUS_CSS;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type:0,
|
||||
orderInfo:{
|
||||
// status:ORDER_TYPE.UNPAID,// 待付款
|
||||
// status:ORDER_TYPE.CANCELED,// 已取消
|
||||
// status:ORDER_TYPE.UNSHIPPED,// 待发货
|
||||
status:ORDER_TYPE.NOT_RECEIVE,// 待收货
|
||||
// status:ORDER_TYPE.COMPLETED,// 完成
|
||||
// status:ORDER_TYPE.AFTER_SALE,
|
||||
name:"张先生",
|
||||
mobile:"18****2848",
|
||||
address:"河南省郑州市金水区东风路街道北三环索凌路交叉口明明小区1号楼1座",
|
||||
waybillNumber:'SF23423443242',
|
||||
product:{
|
||||
id:1,
|
||||
url:'/static/common/order_defal.png',
|
||||
name:"哈希店铺",
|
||||
status:1,
|
||||
paymentTime:29,// 剩余付款时间，单位：分钟
|
||||
productList:[
|
||||
{
|
||||
id:1,
|
||||
url:'/static/common/product_def.png',
|
||||
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
|
||||
description:['双开门','大容量'],
|
||||
tag:['7天无理由退货','退货险'],
|
||||
quantity:1,
|
||||
total:3599,
|
||||
},{
|
||||
id:2,
|
||||
url:'/static/common/product_def.png',
|
||||
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
|
||||
description:['双开门','大容量'],
|
||||
tag:['7天无理由退货','退货险'],
|
||||
quantity:1,
|
||||
total:3599,
|
||||
}
|
||||
],
|
||||
productTotal:7599,
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const type = options.type;
|
||||
this.type = type ? parseInt(type,10) : 0;
|
||||
},
|
||||
methods: {
|
||||
getValue,
|
||||
copyData,
|
||||
jumpLeft(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/mine_order/mine_order?type="+this.type,
|
||||
})
|
||||
},
|
||||
// 去支付
|
||||
goPay(){
|
||||
console.log("goPay.....")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mine_order_info_warp{
|
||||
height: calc(100vh - 180rpx);
|
||||
background-color: $app-bj;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.order_info_header{
|
||||
background-color: $app-bt-bj;
|
||||
height: 288rpx;
|
||||
display: flex;
|
||||
padding: 100rpx 30rpx 30rpx;
|
||||
.header_status{
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 58rpx;
|
||||
align-items: center;
|
||||
.msg{
|
||||
margin-left: 20rpx;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_info_content{
|
||||
position: absolute;
|
||||
top: 184rpx;
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
.content_due{
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: #FFFFFF;
|
||||
.payment_but{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.but{
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
width: 200rpx;
|
||||
padding: 10rpx 0;
|
||||
color: $app-bt-bj;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.content_cancel{
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.steps_warp{
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 20rpx;
|
||||
width: calc(100% - 80rpx);
|
||||
margin-top: 66rpx;
|
||||
.address_info_right{
|
||||
border-left: 1rpx dashed #99999959;
|
||||
height: 26rpx;
|
||||
width: 10rpx;
|
||||
margin: 20rpx;
|
||||
}
|
||||
.address_warp{
|
||||
}
|
||||
.address_info{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.address_data_warp{
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.address_info_name{
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.address_info_mobile{
|
||||
margin-left: 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.address_but{
|
||||
border-radius: 30rpx;
|
||||
border: 1px solid #9A9A9A;
|
||||
font-size: 20rpx;
|
||||
color: #222222;
|
||||
padding: 8rpx 20rpx;
|
||||
}
|
||||
.address_content{
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
padding: 20rpx 10rpx 20rpx 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order_comm{
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-top: 30rpx;
|
||||
width: calc(100% - 96rpx);
|
||||
}
|
||||
.order_product_warp{
|
||||
.order_product_header{
|
||||
display: flex;
|
||||
}
|
||||
.order_product_title{
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #1A1A1A;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order_data_warp{
|
||||
margin-bottom: 20rpx;
|
||||
.data_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 60rpx;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.item_title{
|
||||
color: #808080;
|
||||
}
|
||||
.item_value{
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.pay_amount{
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
.copy_order_number{
|
||||
background: #F2F2F2;
|
||||
border-radius: 18rpx;
|
||||
font-weight: bold;
|
||||
font-size: 22rpx;
|
||||
color: #333333;
|
||||
padding: 4rpx 14rpx;
|
||||
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.copy_order_coupon{
|
||||
margin-left: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
border: 1px solid $app-bt-bj;
|
||||
padding: 4rpx 18rpx;
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
.order_data_but{
|
||||
border: 1rpx solid #F6F6F6;
|
||||
}
|
||||
}
|
||||
|
||||
.order_but_warp{
|
||||
position: fixed;
|
||||
height: 140rpx;
|
||||
bottom: 0;
|
||||
background-color: #ffffff;
|
||||
right: 14rpx;
|
||||
width: calc(100% - 40rpx);
|
||||
background-color: #ffffff;
|
||||
padding: 20rpx;
|
||||
.operate_comm{
|
||||
height: 34rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="purse_warp">
|
||||
<view class="purse_collect">
|
||||
<view class="collect_item collect_item_but">
|
||||
<view class="item_warp">
|
||||
<view class="collect_title">余额(元）</view>
|
||||
<view class="collect_value">100.00</view>
|
||||
</view>
|
||||
<view class="item_right_warp"></view>
|
||||
<view class="item_warp" @click="jumpBonus">
|
||||
<view class="collect_title">奖金(元）</view>
|
||||
<view class="collect_value">200.21</view>
|
||||
</view>
|
||||
<view class="item_right_warp"></view>
|
||||
<view class="item_warp">
|
||||
<view class="collect_title">兑换券</view>
|
||||
<view class="collect_value">10</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="collect_item">
|
||||
<view class="item_warp">
|
||||
<view class="collect_title">HM（锁仓）</view>
|
||||
<view class="collect_value">100.00</view>
|
||||
</view>
|
||||
<view class="item_right_warp"></view>
|
||||
<view class="item_warp">
|
||||
<view class="collect_title"> HM（可交易）</view>
|
||||
<view class="collect_value">200.21</view>
|
||||
</view>
|
||||
<view class="item_right_warp"></view>
|
||||
<view class="item_warp">
|
||||
<view class="collect_title">HMC</view>
|
||||
<view class="collect_value">10</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_warp">
|
||||
<view class="info_title_warp">
|
||||
<view :class="selInfo === item.id ? 'info_title_item_warp info_title_item_sel_warp':'info_title_item_warp'" v-for="item in infoList" :key="item.id" @click="selectInfo(item)">
|
||||
<text>{{item.name}}</text>
|
||||
<view class="info_title_item_sel_but_warp" v-if="selInfo === item.id"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_list_warp">
|
||||
<view v-for="item in orderList" :key="item.id" class="purse_info_item">
|
||||
<view class="purse_info_left">
|
||||
<up-image :src="item.type === 1? '/static/mine/purse_sf.png' : '/static/mine/purse_xf.png'" width="40" height="40" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="purse_data_warp">
|
||||
<view class="purse_info_name">{{item.name}}</view>
|
||||
<view class="purse_info_value">{{item.time}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ipurse_nfo_right">
|
||||
<view class="purse_info_title">{{item.type ===1 ? '+':'-'}} {{item.amount}}</view>
|
||||
<view class="purse_info_value">{{item.typeName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
infoList:[
|
||||
{
|
||||
id:1,
|
||||
name:"余额"
|
||||
},{
|
||||
id:2,
|
||||
name:"奖金"
|
||||
},{
|
||||
id:3,
|
||||
name:"兑换券"
|
||||
},{
|
||||
id:4,
|
||||
name:"HM"
|
||||
},{
|
||||
id:5,
|
||||
name:"HMC"
|
||||
},
|
||||
],
|
||||
selInfo:1,
|
||||
orderList:[
|
||||
{
|
||||
id:1,
|
||||
type:0,// 0：消，1：收
|
||||
name:"购物",
|
||||
time:"01-01 14:10:10",
|
||||
amount:1000,
|
||||
typeName:"购物消费",
|
||||
},{
|
||||
id:2,
|
||||
type:1,// 0：消，1：收
|
||||
name:"卖出HM-到账",
|
||||
time:"01-01 14:10:10",
|
||||
amount:1000,
|
||||
typeName:"收入到账",
|
||||
},{
|
||||
id:3,
|
||||
type:1,// 0：消，1：收
|
||||
name:"卖出HM-到账",
|
||||
time:"01-01 14:10:10",
|
||||
amount:1000,
|
||||
typeName:"收入到账",
|
||||
},{
|
||||
id:4,
|
||||
type:1,// 0：消，1：收
|
||||
name:"卖出HM-到账",
|
||||
time:"01-01 14:10:10",
|
||||
amount:1000,
|
||||
typeName:"收入到账",
|
||||
},{
|
||||
id:5,
|
||||
type:1,// 0：消，1：收
|
||||
name:"卖出HM-到账",
|
||||
time:"01-01 14:10:10",
|
||||
amount:1000,
|
||||
typeName:"收入到账",
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectInfo(item){
|
||||
this.selInfo = item.id;
|
||||
},
|
||||
// 跳转到奖金
|
||||
jumpBonus(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/mine_purse_bonus/mine_purse_bonus",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.purse_warp{
|
||||
height: calc(100vh - 58rpx);
|
||||
padding: 20rpx;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.purse_collect{
|
||||
padding: 48rpx 16px;
|
||||
background: $app-bt-bj;
|
||||
border-radius: 24rpx;
|
||||
.collect_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
.item_warp{
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
.item_right_warp{
|
||||
border-right: 1rpx solid #ffffff85;
|
||||
height: 50rpx;
|
||||
}
|
||||
.collect_title{
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.collect_value{
|
||||
font-weight: 800;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
.collect_item_but{
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info_warp{
|
||||
margin-top: 30rpx;
|
||||
.info_title_warp{
|
||||
display: flex;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
.info_title_item_warp{
|
||||
margin-right: 40rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
}
|
||||
.info_title_item_sel_warp{
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.info_title_item_sel_but_warp{
|
||||
background: #FFB541;
|
||||
border-radius: 4rpx;
|
||||
width: 40rpx;
|
||||
height: 8rpx;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
.info_list_warp{
|
||||
margin-top: 30rpx;
|
||||
height: calc(100vh - 500rpx);
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<view class="mine_purse_bonus_warp">
|
||||
<view class="mine_purse_bonus_header">
|
||||
<view>
|
||||
<view class="header_title">可提现总额</view>
|
||||
<view>
|
||||
<text style="font-size: 40rpx;">￥</text>
|
||||
<text style="font-size: 60rpx;">585.</text>
|
||||
<text style="font-size: 40rpx;">84</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header_but">提现</view>
|
||||
</view>
|
||||
<view class="mine_purse_bonus_content">
|
||||
<view class="title">财务明细</view>
|
||||
<view class="content_list">
|
||||
<view class="content_item purse_info_item" v-for="item in contentList" :key="item.id">
|
||||
<view class="purse_info_left">
|
||||
<up-image :src="item.type === 1? '/static/mine/purse_j.png' : '/static/mine/purse_t.png'" width="40" height="40" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="purse_data_warp">
|
||||
<view class="purse_info_name">{{item.name}}</view>
|
||||
<view class="purse_info_value">{{item.time}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="purse_info_right">
|
||||
<view class="purse_info_title">{{item.type ===1 ? '+':'-'}} {{item.amount}}</view>
|
||||
<view class="purse_info_value">{{item.typeName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
contentList:[
|
||||
{
|
||||
id:1,
|
||||
type:1,// 1：提，2：奖
|
||||
name:"提现-中国银行5478",
|
||||
time:"01-01 14:10:10",
|
||||
amount:1000,
|
||||
typeName:"购物消费",
|
||||
},{
|
||||
id:2,
|
||||
type:3,// 1：提，2：奖
|
||||
name:"奖励",
|
||||
time:"01-01 14:10:10",
|
||||
amount:1000,
|
||||
typeName:"奖励",
|
||||
},{
|
||||
id:3,
|
||||
type:3,// 1：提，2：奖
|
||||
name:"奖励",
|
||||
time:"01-01 14:10:10",
|
||||
amount:1000,
|
||||
typeName:"奖励",
|
||||
},{
|
||||
id:4,
|
||||
type:1,// 1：提，2：奖
|
||||
name:"提现-中国银行5478",
|
||||
time:"01-01 14:10:10",
|
||||
amount:1000,
|
||||
typeName:"购物消费",
|
||||
},{
|
||||
id:5,
|
||||
type:1,// 1：提，2：奖
|
||||
name:"提现-中国银行5478",
|
||||
time:"01-01 14:10:10",
|
||||
amount:1000,
|
||||
typeName:"购物消费",
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mine_purse_bonus_warp{
|
||||
height: 100vh;
|
||||
background-color: $app-bj;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mine_purse_bonus_header{
|
||||
background: $app-bt-bj;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
.header_title{
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #EEEEEE;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.header_but{
|
||||
background: #FFFFFF;
|
||||
border-radius: 25rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
color: $app-bt-bj;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.mine_purse_bonus_content{
|
||||
padding: 20rpx;
|
||||
height: calc(100vh - 300rpx);
|
||||
overflow-y: auto;
|
||||
.title{
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
}
|
||||
.content_item{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,580 @@
|
||||
<template>
|
||||
<view class="order_submit_warp">
|
||||
<!-- 收件人信息 -->
|
||||
<view class="order_submit_header_warp" @click="checkAddressShow(true,'data')" v-if="orderInfo.address && Object.keys(orderInfo.address).length !==0">
|
||||
<view class="header_areaAddress_warp">
|
||||
<view class="tab-comm areaAddress_default" v-if="orderInfo.address.isDefault">默认</view>
|
||||
<!-- <view class="tab-comm areaAddress_tab">家</view> -->
|
||||
<text>{{assembleAddress(orderInfo.address).names}}</text>
|
||||
</view>
|
||||
<view class="header_detailedAddress_warp">
|
||||
<view style="width: 90%;">{{orderInfo.address.address}}</view>
|
||||
<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
<view class="header_name_warp">
|
||||
<text style="margin-right: 20rpx;">{{orderInfo.address.name}}</text>
|
||||
<text>{{orderInfo.address.phone}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 没有地址 -->
|
||||
<view v-else class="no_address" @click="checkAddressShow(true,'data')">
|
||||
<view class="no_address_title">
|
||||
<view>请填写地址</view>
|
||||
<up-image src="/static/common/right.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
<view class="no_address_msg">您还未添加收货地址，请完善地址！</view>
|
||||
</view>
|
||||
<!-- 店铺信息 -->
|
||||
<view class="order_store_warp order_product_warp" v-for="(item,index) in orderInfo.shops" :key="item.id">
|
||||
<!-- 头部 -->
|
||||
<view class="order_product_header">
|
||||
<up-image :src="item.logo" width="22" height="22" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="order_product_title">{{item.name}}</view>
|
||||
</view>
|
||||
<view v-for="(addItem,addIndex) in item.addrTimes" :key="addIndex">
|
||||
<!-- 单个地址 -->
|
||||
<view v-if="addItem.address" class="shops_address_warp" @click="checkAddressShow(true,'addrTimes',addIndex,index)">
|
||||
<view class="shops_address_warp_title">
|
||||
<text style="margin-right: 20rpx;">{{addItem.address.name}}</text>
|
||||
<text>{{addItem.address.address}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<up-image src="/static/common/right.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 产品详情 -->
|
||||
<view class="order_item_content" v-for="(pItem,pIndex) in addItem.goods" :key="pItem.id">
|
||||
<up-image :src="pItem.img" width="80" height="80" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="content_info_right">
|
||||
<view>
|
||||
<view class="content_info_title">{{pItem.title}}</view>
|
||||
<view class="content_info_tag">{{pItem.specs}}</view>
|
||||
</view>
|
||||
<view class="content_info_right_total">
|
||||
<view class="content_right_total">
|
||||
<view>￥<text style="font-size: 36rpx;">{{pItem.totalPrice}}</text></view>
|
||||
<view>每件到手价￥{{pItem.unitPrice}}</view>
|
||||
</view>
|
||||
<view class="shopping_info_quantity">
|
||||
<view class="quantity_but" @click="quantityFun('minus',index,addIndex,pIndex)">-</view>
|
||||
<view class="quantity_value">{{pItem.num}}</view>
|
||||
<view class="quantity_but" @click="quantityFun('add',index,addIndex,pIndex)">+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_info_right_remark">
|
||||
<view class="title">留言</view>
|
||||
<up-input
|
||||
placeholder="建议留言前先与商家沟通确认"
|
||||
border="surround"
|
||||
v-model="addItem.remark"
|
||||
:customStyle="{
|
||||
'text-align': 'right !important',
|
||||
'border':'0rpx',
|
||||
}"
|
||||
style="text-align: right;"
|
||||
></up-input>
|
||||
</view>
|
||||
<!-- 运费 -->
|
||||
<view class="order_freight_warp">
|
||||
<view class="order_freight_item">
|
||||
<view>运费</view>
|
||||
<view class="value_">
|
||||
<text style="color: #9E9E9E;">（{{getValue(PRODUCT_DELIVERY_TIME,addItem.deliveryTime)}}）</text>包邮
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="order_freight_item">
|
||||
<view>优惠<text class="coupon_">已选优惠券</text></view>
|
||||
<view class="value_"><text>-￥{{orderInfo.coupon}}</text></view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="order_way_warp" @click="wayShow = true;">
|
||||
<view>支付方式</view>
|
||||
<view class="order_way_right">
|
||||
{{getValue(PAYMENT_WAY_,orderInfo.paymentMethod)}}
|
||||
<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 去支付的固定按钮 -->
|
||||
<view class="order_pay_but">
|
||||
<view class="price_">￥<text style="font-size: 60rpx;">{{orderInfo.amount}}</text></view>
|
||||
<view class="_but" @click="goPay">支付</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择支付方式 -->
|
||||
<up-popup v-model:show="wayShow" :round="10" :closeOnClickOverlay="false" :closeable="true" :safeAreaInsetBottom="false">
|
||||
<view class="way_popup_warp">
|
||||
<view class="way_popup_title">支付方式</view>
|
||||
<up-radio-group
|
||||
v-model="orderInfo.paymentMethod"
|
||||
placement="column"
|
||||
>
|
||||
<view class="way_item" v-for="item in wayList" :key="item.id">
|
||||
<view class="way_item_">
|
||||
<view style="margin-top: 2rpx;"><up-image :src="item.path" width="20" height="20" bgColor="#f1f6ff00"></up-image></view>
|
||||
<view class="way_item_val">{{item.name}}</view>
|
||||
</view>
|
||||
<up-radio
|
||||
:name="item.id"
|
||||
:disabled="item.disabled"
|
||||
activeColor="#FF7C41"
|
||||
>
|
||||
</up-radio>
|
||||
</view>
|
||||
</up-radio-group>
|
||||
<view class="popup_but" @click="wayShow=false;">
|
||||
确认
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
|
||||
<!-- 选择地址 -->
|
||||
<up-popup v-model:show="addressShow" :round="10" :closeOnClickOverlay="false" :closeable="true" :safeAreaInsetBottom="false" @close="checkAddressShow(false,null,0,0)">
|
||||
<view class="address_popup_warp">
|
||||
<view class="address_popup_title">收件地址</view>
|
||||
<view class="address_popup_content">
|
||||
<Address @valueFunc="getAddressValueFunc"/>
|
||||
</view>
|
||||
<view class="popup_but" @click="addressOk">
|
||||
确认
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Address from '@/components/address.vue';
|
||||
import { PAYMENT_WAY,PAYMENT_WAY_,PRODUCT_DELIVERY_TIME,getValue } from '@/utils/enumUtils.js';
|
||||
import { getSettleList } from '@/api/cart.js'
|
||||
import { assembleAddress } from '@/utils/index.js'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
PAYMENT_WAY_() {
|
||||
return PAYMENT_WAY_;
|
||||
},
|
||||
PRODUCT_DELIVERY_TIME() {
|
||||
return PRODUCT_DELIVERY_TIME;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Address,
|
||||
},
|
||||
onLoad(option) {
|
||||
const ids = option.ids;
|
||||
if(ids){
|
||||
this.ids = ids;
|
||||
this.getOrder();
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ids:0,
|
||||
orderInfo:{
|
||||
// coupon:2,//优惠卷
|
||||
paymentMethod:null,// 支付方式
|
||||
total:4000,// 需要支付的总金额
|
||||
address:{},// 选中的地址
|
||||
store:[],
|
||||
},
|
||||
wayList:[
|
||||
{
|
||||
disabled:false,
|
||||
id:PAYMENT_WAY.WECHAT,
|
||||
name:"微信支付",
|
||||
path:"/static/product/way_wx.png",
|
||||
},
|
||||
{
|
||||
disabled:false,
|
||||
id:PAYMENT_WAY.ALIPAY,
|
||||
name:"支付宝支付",
|
||||
path:"/static/product/way_zfb.png",
|
||||
},
|
||||
],
|
||||
wayShow:false,
|
||||
addressShow:false,// 收件地址选择
|
||||
addressType:'',// 收件地址数据类型
|
||||
addressIndex:0,// 收件地址数据类型
|
||||
shopsIndex:0,// 收件地址数据类型
|
||||
selectAddress:{},// 收件地址选择
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getValue,
|
||||
assembleAddress,
|
||||
async getOrder(){
|
||||
const ids = this.ids;
|
||||
if(!ids || ids ===0){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "暂时没有需要结算的订单",
|
||||
});
|
||||
setTimeout(()=>{
|
||||
uni.switchTab({
|
||||
url: '/pages/shopping_cart/shopping_cart',
|
||||
})
|
||||
},2000)
|
||||
return;
|
||||
}
|
||||
const params = {
|
||||
cartIds:ids,
|
||||
}
|
||||
const resp = await getSettleList(params);
|
||||
if(resp && resp.bizcode === 100){
|
||||
const data = resp.data;
|
||||
const shops = data.shops;
|
||||
if(shops && shops.length !==0){
|
||||
shops.map(item=>{
|
||||
item.addrTimes.map(addItem=>{
|
||||
addItem.remark=null;
|
||||
})
|
||||
})
|
||||
}
|
||||
data.shops = shops;
|
||||
data.paymentMethod = null;// 支付方式
|
||||
console.log("data",data);
|
||||
this.orderInfo = data;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 数量进行增加删除
|
||||
* @param {Object} type 区分是 + 还是 -
|
||||
* @param {Object} pIndex 父节点数据，用作与从新修改数据
|
||||
* @param {Object} addIndex 需要修改店铺的数据节点
|
||||
* @param {Object} index 需要修改的数据节点
|
||||
*/
|
||||
quantityFun(type,index,addIndex,pIndex){
|
||||
let currentQuantity = this.orderInfo.shops[index].addrTimes[addIndex].goods[pIndex].num;// 当前数量
|
||||
if(type === "minus"){
|
||||
if(currentQuantity === 1){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "不能再减拉，不能小于最低购买数量~",
|
||||
});
|
||||
}else{
|
||||
currentQuantity = currentQuantity - 1;
|
||||
}
|
||||
}else if(type === "add"){
|
||||
// 需要判断一下库存
|
||||
currentQuantity = currentQuantity + 1;
|
||||
}
|
||||
this.orderInfo.shops[index].addrTimes[addIndex].goods[pIndex].num = currentQuantity;
|
||||
},
|
||||
|
||||
// 获取备注
|
||||
getRemark(){
|
||||
const orderInfo = this.orderInfo;
|
||||
const remarkArr = [];
|
||||
if(orderInfo && Object.keys(orderInfo).length!==0){
|
||||
|
||||
}
|
||||
|
||||
return remarkArr;
|
||||
},
|
||||
/**
|
||||
* 去支付
|
||||
*/
|
||||
goPay(){
|
||||
const params={
|
||||
addrId:this.orderInfo.address.id,// 收货地址ID
|
||||
cartIds:this.ids,//结算的购物车ID，多个以逗号分割，ALL表示全选
|
||||
payway:0,// 支付方式：1-微信，2-支付宝
|
||||
remark:null,//备注信息'[{"sid":"店铺ID","rmk":"备注内容"},{"sid":"店铺ID","rmk":"备注内容"}]'
|
||||
}
|
||||
console.log("params",params);
|
||||
|
||||
// 支付成功的页面
|
||||
// uni.navigateTo({
|
||||
// url:"/pages/order_submit_ok/order_submit_ok",
|
||||
// })
|
||||
},
|
||||
// 地址选中
|
||||
getAddressValueFunc(item){
|
||||
const addressObj = item;
|
||||
addressObj.addressStr = assembleAddress(addressObj).names;
|
||||
this.selectAddress = addressObj;
|
||||
},
|
||||
addressOk(){
|
||||
const type = this.addressType;
|
||||
const addressIndex = this.addressIndex;
|
||||
const shopsIndex = this.shopsIndex;
|
||||
if(type === 'data'){
|
||||
this.orderInfo.address = this.selectAddress;
|
||||
}else if(type === 'addrTimes'){
|
||||
this.orderInfo.shops[shopsIndex].addrTimes[addressIndex].address = this.selectAddress;
|
||||
}
|
||||
this.addressShow = this.false;
|
||||
},
|
||||
// 地址类型
|
||||
checkAddressShow(status,type,addIndex,index){
|
||||
this.addressShow = status;
|
||||
this.addressType = type;
|
||||
this.addressIndex = addIndex;
|
||||
this.shopsIndex = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order_submit_warp{
|
||||
background-color: $app-bj;
|
||||
height: calc(100vh - 200rpx);
|
||||
padding: 20rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.order_submit_header_warp{
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
.header_areaAddress_warp{
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
.tab-comm{
|
||||
color: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
width: 58rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
margin-right: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.areaAddress_default{
|
||||
background: #FD2A53;
|
||||
}
|
||||
.areaAddress_tab{
|
||||
background: #4D88FE;
|
||||
}
|
||||
}
|
||||
.header_detailedAddress_warp{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.header_name_warp{
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.no_address{
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
.no_address_title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
}
|
||||
.no_address_msg{
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #808080;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.order_store_warp{
|
||||
margin-top: 30rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
.order_product_warp{
|
||||
.order_product_header{
|
||||
display: flex;
|
||||
}
|
||||
.order_product_title{
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #1A1A1A;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.shops_address_warp{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 10rpx;
|
||||
margin: 10rpx;
|
||||
font-size: 26rpx;
|
||||
.shops_address_warp_title{
|
||||
color: #222222;
|
||||
}
|
||||
}
|
||||
.order_item_content{
|
||||
display: flex;
|
||||
.content_info_right{
|
||||
margin-left: 20rpx;
|
||||
display: grid;
|
||||
}
|
||||
.content_info_title {
|
||||
width: 266px;
|
||||
}
|
||||
.content_info_tag{
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.content_info_right_total{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx 0 0;
|
||||
}
|
||||
.content_right_total{
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
}
|
||||
.content_info_right_remark{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
align-items: center;
|
||||
.title{
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
}
|
||||
::v-deep{
|
||||
input{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order_freight_warp{
|
||||
.order_freight_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
line-height: 60rpx;
|
||||
.value_{
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
.coupon_{
|
||||
margin-left: 20rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 5rpx;
|
||||
border: 1px solid $app-bt-bj;
|
||||
font-size: 20rpx;
|
||||
color: $app-bt-bj;
|
||||
padding: 0rpx 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order_way_warp{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
margin-top: 30rpx;
|
||||
padding: 30rpx;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
.order_way_right{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.order_pay_but{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 144rpx;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 34rpx);
|
||||
padding-top: 20rpx;
|
||||
._but{
|
||||
padding: 20rpx 72rpx;
|
||||
text-align: center;
|
||||
background: $app-bt-bj;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
color: #FFF;
|
||||
height: 46rpx;
|
||||
}
|
||||
.price_{
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
}
|
||||
|
||||
.way_popup_warp{
|
||||
padding: 30rpx;
|
||||
min-height: 800rpx;
|
||||
width: calc(100% - 60rpx);
|
||||
.way_popup_title{
|
||||
text-align: center;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
.way_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 82rpx;
|
||||
.way_item_{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.way_item_val{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.popup_but{
|
||||
position: fixed;
|
||||
bottom: 64rpx;
|
||||
background: $app-bt-bj;
|
||||
border-radius: 16rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
width: calc(100% - 60rpx);
|
||||
}
|
||||
.address_popup_warp{
|
||||
padding: 30rpx;
|
||||
height: 1200rpx;
|
||||
overflow-y: hidden;
|
||||
.address_popup_title{
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.address_popup_content{
|
||||
height: calc(100% - 180rpx);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<view class="order_sumbit_ok_warp">
|
||||
<view class="ok_img">
|
||||
<up-image src="/static/product/ok.png" width="120" height="120" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="ok_img_msg">支付成功</view>
|
||||
</view>
|
||||
<view class="ok_but" @click="jumpHome">确认</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpHome(){
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order_sumbit_ok_warp{
|
||||
height: calc(100vh - 80rpx);
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
.ok_img{
|
||||
display: grid;
|
||||
.ok_img_msg{
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
}
|
||||
.ok_but{
|
||||
margin-top: 100rpx;
|
||||
background: $app-bt-bj;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
height: 46rpx;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view class="preference_warp">
|
||||
<view class="header_comm">
|
||||
<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpHome"></up-image>
|
||||
<view>好物优选专区</view>
|
||||
<up-image src="/static/common/share.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpInviteFriends"></up-image>
|
||||
</view>
|
||||
<view class="preference_content_warp">
|
||||
<up-swiper
|
||||
:list="swiperList"
|
||||
height="140"
|
||||
>
|
||||
</up-swiper>
|
||||
<view class="preference_title">
|
||||
<up-image src="/static/product/title_bg.png" width="100%" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="msg">好物优选</view>
|
||||
</view>
|
||||
<view class="preference_product">
|
||||
<view class="product_item" v-for="item in productList">
|
||||
<view class="product_item_left">
|
||||
<up-image :src="item.url" width="100" height="100" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="product_item_left_bz product_item_left_bz_img" v-if="item.type === 1">
|
||||
<view>爆款专区</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="product_item_right">
|
||||
<view class="title_warp">{{item.name}}</view>
|
||||
<view class="price_warp">
|
||||
<view class="price_o_warp">
|
||||
<view class="price_o_title_warp">原价</view>
|
||||
<view class="price_o_value_warp">
|
||||
<text>￥</text>
|
||||
<text>{{item.oPrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price_zq_warp">
|
||||
<view class="price_lj_warp">专区立省{{item.zqPrice}}元</view>
|
||||
<view class="price_ds_warp">到手￥<text style="font-size: 31rpx;">{{item.price}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperList:[
|
||||
'/static/home/banner03.png',
|
||||
],
|
||||
productList:[
|
||||
{
|
||||
id:1,
|
||||
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||||
url:"/static/common/product_def.png",
|
||||
zqPrice:42.84,// 专区价格
|
||||
price:424.84,// 到手价格
|
||||
oPrice:466.84,// 原价价格
|
||||
type:1,// 1:爆款区的 0：普通区
|
||||
},{
|
||||
id:2,
|
||||
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||||
url:"/static/common/product_def.png",
|
||||
zqPrice:42.84,// 专区价格
|
||||
price:424.84,// 到手价格
|
||||
oPrice:466.84,// 原价价格
|
||||
type:0,
|
||||
},{
|
||||
id:3,
|
||||
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||||
url:"/static/common/product_def.png",
|
||||
zqPrice:42.84,// 专区价格
|
||||
price:424.84,// 到手价格
|
||||
oPrice:466.84,// 原价价格
|
||||
type:0,
|
||||
},{
|
||||
id:4,
|
||||
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||||
url:"/static/common/product_def.png",
|
||||
zqPrice:42.84,// 专区价格
|
||||
price:424.84,// 到手价格
|
||||
oPrice:466.84,// 原价价格
|
||||
type:1,
|
||||
},{
|
||||
id:5,
|
||||
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||||
url:"/static/common/product_def.png",
|
||||
zqPrice:42.84,// 专区价格
|
||||
price:424.84,// 到手价格
|
||||
oPrice:466.84,// 原价价格
|
||||
type:0,
|
||||
},{
|
||||
id:6,
|
||||
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||||
url:"/static/common/product_def.png",
|
||||
zqPrice:42.84,// 专区价格
|
||||
price:424.84,// 到手价格
|
||||
oPrice:466.84,// 原价价格
|
||||
type:0,
|
||||
},{
|
||||
id:7,
|
||||
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||||
url:"/static/common/product_def.png",
|
||||
zqPrice:42.84,// 专区价格
|
||||
price:424.84,// 到手价格
|
||||
oPrice:466.84,// 原价价格
|
||||
type:0,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpHome(){
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home',
|
||||
})
|
||||
},
|
||||
// 邀请好友
|
||||
jumpInviteFriends(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/invite_friends/invite_friends',
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product_item_left_bz_img{
|
||||
height: 32rpx;
|
||||
width: 140rpx;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAAAmCAYAAAABZeN/AAAAAXNSR0IArs4c6QAACcBJREFUeF7tnH1sE+cdx7+PbWyHpAkpKeElZIkICU3AwXHeU8BsQCtRtGqb+kfHNrpN1cZemIREX+g6UEaLxsbWTqxFtDSwsaYroHYh3aDqiCipJia2KW01hohtyCCQEmIcHCe2757pzo59d7473wUnEOL8E8Xne+655/k839/b84RA+Yc85lya07rH8Z7FzC4HDQMIQ8tvhmEutLwdWPXdHf/pAcCqPCN96S4dAaLUr6KiIusbzdXrv1ifu08rEPHvMfjjMXb9vle9Rzo8nuG79N3T3VJTBaVrjTbbrMN7Ha1z8kwr9YLR72VurvsRs94fpie7urr86RmYfCOgpBimn3xnZd2vni47aSDMNL1gnDzkRdaJXizCMMygklGJPjL2sbALatcAUPF3+b/4djS2Ibmf75jc/dG+UWG7Ou8V9UnuXv7ZMu+TpE+RwZS8r3SIRf2Wfn90OgRtRO6/BdATYLHV4vGckwWjqazsvld+UdNcVZG1CZTR7FtwAAWHQzi86TIaAgOYjRAMCYtlIsGQvJ7OyZUHQzigtwGkEhhKC0Y0+eMCRmSmKAYoIfVyYJD6pUu/cLyl7mR2FinSC8a/OgZx443/wW64helUNLRi0nUrBomu7jjxyRXjdsAgAq0TPlsLGBqeqwqGdFoS3z2+3tSuySmiomJEL/DPPpoARklJiWX7DxY//sS6goMRE6JPMd756RUsvvg5CskwTKIVKpE0vStDpi1FMJK2LZVRuRU4pcG4lQCGo7Q07/C+5fuL5lnX6QWjpzuAs9vcaCA+5BAGJCkYOlbGuIGhZA5SBYbKitbkM0UXlGZTIlUrzT6GUDHOSGfG+MRjjUtadjo6p5nodL1g/HXvNTzQeQWlJBBxOtNgRMyn0qSOCQwdi0nWkU1uSgjLbhA9xWazZf7u+cotTY77X4ibEG2mxO8L4s+bLuChsBd5JOp0jiMYZNTzVokqlL13bX5CfD5vx8eYTGBwfaX9ZkoLRDpaZ7PNa9//0F9m5k5brBeMvx+7gZFWDyoNfmSMJjvTYEgUQ90plfeZpKZkPBWDgFK6y+p2b4k9pby83PzUV0oe2fTkgncBlugF45OOAdx/YxA5CMLAgUG59cZlwykIyyL0SQBG9wiM3N+KEqd1dXFaIAx7lcI3DZ+rhLCpV4y7HAwKhjJMqfXSJVesp0uWLMl959eNvy0rnv51fkJj0Yg2UyKuoTDRmgp3b6QtZojBtY2XkUvCkdxGgglI4mRJ1CcNhsBXUHRM9YarpN3icj0qdFcNa5yO0nf3rPg4w0pzxwOMq+fDuP5iH4q5MPZOgKEx+xhN8vAmYKopBgVZa3W53o+B0VBQkPGzn6/c+PCy/F8C8VWuNyoRFtEiChJpq+8ag7ZmP5oGvSgknDm5A4qRBkOSgxbnciilLovbs5BEq+HcVVJTXp7f1rLqSP5Mc2OqwfD5WBxoDqCi7yYWkyFkg0mBjxEzJKq1jrHUKyZMMWSiKW2+Vyqcz8RcB6XYYnW7dwmDWdNzGx9e1rzZ9oEB1JhKMIaHGbz5UgCFbi+WEj9yCRNRi9tWjBSBoVqAG2dTojlhlyQqUYv81MZZqB8sAiPB4Pzsy5f7Y2A4HI6c/c01L9kWZX8flIsiUmNKGCaMg7uHkNPlhYPcQh4JR3yLNBjRhZG48sekGEnBSEhuS6qznFmnLRaX50nh9JBam634w0NrTmVlGgpSBQalDP70uh/sqQHUkkHkkxBMfJiqVqPQE5WMo2II6izj6nxqVgxhWC6MF0aVV8a0iBZgEjAoH/rXml2uf4jBsNurP3pr9WmzGZZUgfH+ET/63utHAwYxlwQxbTR3MVnBGIPjGh9kLVnTyITLK8b4gkEozphd7jqJZwpSb7NVrVo+78eLS3NWsCxjiRQ4RpNTDIxDI7NXr34AuTlcB5Pv+ez80I/PWvrQiEE+AuFqJnFm9SiGhmSQrA3VMhHakmMxxbiXwQDdYO72HEgAw+F4cI6RsVQRQhcRSrLEKkRNj2b4nn/69eWYZuL8D3Uwuv45hFMv96KJ+lCMEVjBivYaxaIE2bK4Hidrgk2J1g0+Ywb1TikG7TczKCAy+3KJ0+k0eb3erAxKM4nBYGJpfBQYSjNfqQ5+Wv9MfdLd4a7zQ2jbeQX1QS8WGgIym3QE9jENhmzleaJNCWXB10WkaiHjyYi/wm0Ibv32jGvz1y5QBeNq7zBat/fAcWsAi8gQsggDQ4JzNQ5gJE2ra6uiKvkDqqYkSairz8dIooAxJUqh80kpQ8MsXxfRC4ahtrKy5MTusv/mFGYqguEdGMHBbR5UXL+BCuLnN+hEaiEq3nCqFCMNhvqeF7V5oGi3uNx8XUQXGFy19cvL8lft2LygnZDRopjYxwgEgniz2YPii32w8QmssCCBNQXB0LWlUFz5jf2lqkQ6FUN24UTaoJRda3Vd5OsiusCoKynJ3rnN/qyzbsYzck5nOBTCgV1uzPy0F1XEj5l8AktQ5puKijFJwKCAy9Idr4voAsNut889+hvbH4rmmhMOHFEaRuurHhhO96CGDGJWFAqRRkxyMFJ2pkS0tU/Z55lIxaAgW6zd8bqIHjAMTZWVD35wqPZ0hgUzpIpx7K0e9Le5UE980QSWeBMd/6A0GNHx1pZXmTAwKAIjIyFRXUQzGNy51c3fqPjaD781//fS4wOnjvfiXMs5NBEf5pPISTNRqnv0KXcEDJUsodZcRNQc3MOK0WLpFtdFNIPB7ebav932YrXtvu8Jwfj3mc/R+XIXGulNfsNNPIEl42jqBkNP6ncM6eM0GPz8E8rUml09orqIVjCI3W4vbN/jODpnlqlqFIwL5wbQvuMsGsIDKCEBTBdlNdNgiI8JJMmfJJharZlcaVQi3SMruZ4Ylfgs3Z4cpUhE+LlcTGl6ZEWNvW1vzUcmE2vhwOi97MPbL5xB9VA/yrgEFqK5ilhLdyMY6rWWiB+kPND36LnVo5Zuz1fHBEZDQ0PGhnWzvvnU4/Nf45xO783h4P6tH2Pp9avmCm4HFp/VlDatBQxpAU1mUmKTlWxlaDEltwNGqjbpJJ5oj43cmA4bJR8X0cwIwecOK8NQb3W5zo8JDGd5eda8hblrdz9X/prFTKdv3X3++MhnV/72rPHSl2YjtNJIkJnwnw0kpTL5qEQDGJpObEUGR7GuoCuXoDTQ9xAYFH4QHAdD+H9voAUK6ajw9ziLiqzD2dmVxEjWUIpcSugZNsR2Zubl9XZ0dHA7fNM/U2AE5HwMQ0NFxYyQ0TiXq7YiGLzKZmT0nz17NjQFxiP9itERkAODVxInYITTiY6ODm4TaIJXkR7Be3sE/g8F1/zj2n46nQAAAABJRU5ErkJggg==");
|
||||
background-size: 100% 100%;
|
||||
background-position: center; /* 将图片居中显示 */
|
||||
}
|
||||
.price_o_warp{
|
||||
background: #FFF5F5FF;
|
||||
color: #F9241F;
|
||||
}
|
||||
.price_o_title_warp{
|
||||
color: #F9241FFF;
|
||||
}
|
||||
.price_o_value_warp{
|
||||
color: #F9241FFF;
|
||||
}
|
||||
.price_zq_warp{
|
||||
color: #FFDB62FF;
|
||||
background: linear-gradient(-88deg, #FA2222, #F83600);
|
||||
}
|
||||
.price_lj_warp{
|
||||
background: #CE2300FF;
|
||||
color: #FFF6ED;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,736 @@
|
||||
<template>
|
||||
<view class="product_info_warp">
|
||||
<!-- 头部产品描述图 -->
|
||||
<view class="product_info_header_warp">
|
||||
<up-swiper
|
||||
:list="swiperList"
|
||||
height="280"
|
||||
>
|
||||
<template #indicator>
|
||||
<view
|
||||
class="indicator-num"
|
||||
>
|
||||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</up-swiper>
|
||||
<view class="img_comm left_warp">
|
||||
<up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00" @click="jumpLeft"></up-image>
|
||||
</view>
|
||||
<view class="img_comm right_warp">
|
||||
<up-image src="/static/common/share_st.png" width="30" height="30" bgColor="#f1f6ff00" @click="jumpShare"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 数据详情 -->
|
||||
<view class="product_content_warp">
|
||||
<!-- 标题，系列 -->
|
||||
<view class="content_data">
|
||||
<view class="content_data_price">
|
||||
<text>￥</text>
|
||||
<text style="font-size: 60rpx;" v-if="orderInfo.maxPrice && orderInfo.maxPrice !==0">{{orderInfo.minPrice}} - {{orderInfo.maxPrice}}</text>
|
||||
<text style="font-size: 60rpx;" v-else>{{orderInfo.minPrice}}</text>
|
||||
<text class="price_o">￥{{orderInfo.adPrice}}</text>
|
||||
</view>
|
||||
<view class="content_data_title">
|
||||
{{ orderInfo.name}}
|
||||
</view>
|
||||
<view class="content_data_series">
|
||||
<!-- 暂时隐藏 -->
|
||||
<view>
|
||||
</view>
|
||||
<!-- 销量还需要改 -->
|
||||
<view>销量1.5万件</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 具体规格 -->
|
||||
<view class="content_concrete">
|
||||
<view class="concrete_item concrete_item_but" @click="checkSpecification(true)">
|
||||
<view class="concrete_item_">
|
||||
<view class="concrete_item_title">规格</view>
|
||||
<view class="concrete_item_value">
|
||||
{{selectSpecificationTempl.combTypes || '暂未选择规格'}}
|
||||
</view>
|
||||
</view>
|
||||
<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
<view class="concrete_item">
|
||||
<view class="concrete_item_">
|
||||
<view class="concrete_item_title">发货地址</view>
|
||||
<view class="concrete_item_value">
|
||||
<view class="address_warp">
|
||||
<up-image src="/static/common/address2.png" width="10" height="10" bgColor="#f1f6ff00"></up-image>
|
||||
<view style="margin-left: 10rpx;">请填写地址</view>
|
||||
</view>
|
||||
<view class="address_72_warp">现货{{getValue(PRODUCT_DELIVERY_TIME,orderInfo.deliveryTime)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image> -->
|
||||
</view>
|
||||
<view class="concrete_item">
|
||||
<view class="concrete_item_">
|
||||
<view class="concrete_item_title">购物保障</view>
|
||||
<view class="concrete_item_value concrete_item_bz">
|
||||
<view class="concrete_item_bz concrete_item_bz_item">
|
||||
<up-image src="/static/product/product_b.png" width="10" height="12" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="concrete_item_bz_item_left">品质严保</view>
|
||||
</view>
|
||||
<view class="concrete_item_bz">
|
||||
<up-image src="/static/product/product_js.png" width="10" height="10" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="concrete_item_bz_item_left">极速退款</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品详情 -->
|
||||
<view class="content_details">
|
||||
<view class="content_details_title">商品详情</view>
|
||||
<view v-html="orderInfo.detailInfo"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部编辑按钮 -->
|
||||
<view class="product_but_warp">
|
||||
<view class="product_but_left">
|
||||
<view class="left_item">
|
||||
<up-image src="/static/product/home.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpHome"></up-image>
|
||||
<view>首页</view>
|
||||
</view>
|
||||
<view class="left_item">
|
||||
<up-image src="/static/product/kefu.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpShare"></up-image>
|
||||
<view>咨询</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="product_but_right">
|
||||
<view class="but_comm join_warp" @click="checkSpecification(true,'addCart')">加入购物车</view>
|
||||
<view class="but_comm buy_warp" @click="checkSpecification(true,'buy')">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选择规格的弹框 -->
|
||||
<up-popup
|
||||
v-model:show="specificationShow"
|
||||
:round="10"
|
||||
:closeOnClickOverlay="false"
|
||||
:closeable="true"
|
||||
mode="bottom"
|
||||
>
|
||||
<view class="specification_warp">
|
||||
<!-- 选择地址 -->
|
||||
<view class="specification_adress_warp">
|
||||
<view class="specification_adress_msg">10+刚刚抢购</view>
|
||||
<!-- <view class="specification_adress_arr">
|
||||
<up-image src="/static/common/address_st.png" width="30" height="30" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="address_title address_title_sel" v-if="orderInfo && orderInfo.addressObj">
|
||||
<text style="font-size: 30rpx;margin-right: 20rpx;">{{orderInfo.addressObj.name}}</text>
|
||||
<text>{{orderInfo.addressObj.address}}</text>
|
||||
</view>
|
||||
<view class="address_title" v-else>暂无收货地址，请添加收货地址！</view>
|
||||
<view><up-image src="/static/common/right.png" width="16" height="16" bgColor="#f1f6ff00"></up-image></view>
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- 商品 -->
|
||||
<view class="specification_product_warp">
|
||||
<up-image :src="orderInfo.mainGraph" width="100" height="100" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="product_content">
|
||||
<view class="price_warp">
|
||||
<view class="price_content_warp">
|
||||
<view>￥</view>
|
||||
<text style="font-size: 50rpx;" v-if="selectSpecificationTempl && Object.keys(selectSpecificationTempl).length !==0">
|
||||
{{selectSpecificationTempl.price}}
|
||||
</text>
|
||||
<view style="font-size: 50rpx" v-else>
|
||||
{{orderInfo.minPrice}} - {{orderInfo.maxPrice}}
|
||||
</view>
|
||||
<view class="price_content_coupon_warp" v-if="orderInfo.couponPrice && orderInfo.couponPrice !==0">优惠卷{{orderInfo.couponPrice}}</view>
|
||||
</view>
|
||||
<view class="oOrice_content_warp" >￥{{orderInfo.adPrice}}</view>
|
||||
<view class="coupon_content_warp" v-if="orderInfo.couponPrice && orderInfo.couponPrice !==0">优惠卷已优惠￥{{orderInfo.couponPrice}}</view>
|
||||
</view>
|
||||
<view class="inventory_warp">
|
||||
<view>库存</view>
|
||||
<view>{{orderInfo.inventory || 0}}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 规格 -->
|
||||
<view class="specification_list_warp">
|
||||
<view v-for="(item,index) in specificationList" :key="item.id" class="list_warp">
|
||||
<view class="list_title_warp">{{item.type}}</view>
|
||||
<view class="specification_item_warp">
|
||||
<view
|
||||
:class="oItem.inventory === 0 ? 'item_Warp item_Warp_no_warp' : item.selectVal === oItem.n?'item_Warp item_Warp_yes_warp':'item_Warp' "
|
||||
v-for="(oItem,oIndex) in item.items"
|
||||
:key="oItem.n"
|
||||
@click="clickSpecification(index,oItem)"
|
||||
>
|
||||
{{oItem.n}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 购买数量 -->
|
||||
<view class="specification_but">
|
||||
<view class="specification_buy">
|
||||
<view>数量</view>
|
||||
<view class="shopping_info_quantity">
|
||||
<view class="quantity_but" @click="quantityFun('minus')">-</view>
|
||||
<view class="quantity_value">{{orderInfo.quantity}}</view>
|
||||
<view class="quantity_but" @click="quantityFun('add')">+</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="specificationShowType === 'buy'" class="specification_buy_but" @click="byFun">去支付</view>
|
||||
<view v-else-if="specificationShowType === 'addCart'" class="specification_buy_but" @click="addCart">加入购物车</view>
|
||||
<view v-else class="product_but_right popup_but">
|
||||
<view class ='but_comm join_warp' @click="addCart">加入购物车</view>
|
||||
<view class="but_comm buy_warp" @click="byFun">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import{ getGoodsDetail,addGoods,getGoodsSpecs } from '@/api/product.js';
|
||||
import { getValue,PRODUCT_DELIVERY_TIME } from '@/utils/enumUtils.js'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
PRODUCT_DELIVERY_TIME() {
|
||||
return PRODUCT_DELIVERY_TIME;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id:0,
|
||||
swiperList:[],
|
||||
currentNum:1,
|
||||
specificationShow:false,
|
||||
specificationShowType:'',// 弹框类型
|
||||
orderInfo:{
|
||||
id:1,
|
||||
url:"/static/common/product_def.png",
|
||||
price:87.00,
|
||||
oPrice:199.00,
|
||||
couponPrice:50,
|
||||
inventory:100,// 库存
|
||||
quantity:1,
|
||||
addressObj:{
|
||||
name:'李个',
|
||||
address:'郑州市金水区东风路街道白庙小区五号楼'
|
||||
},
|
||||
},
|
||||
specificationList:[],//规格
|
||||
selectSpecification:[],// 选择的规格
|
||||
specificationTempl:[],// 规格模版数据
|
||||
selectSpecificationTempl:{},// 选择规格模版数据
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const id = options.id;
|
||||
if(id && id !==0){
|
||||
this.id = id ? parseInt(id,10) : 0;
|
||||
this.getById();
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
getValue,
|
||||
jumpLeft(){
|
||||
uni.navigateBack({
|
||||
delta: 1 // 返回的页面数，默认为1,返回到上一级
|
||||
});
|
||||
},
|
||||
jumpHome(){
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home',
|
||||
})
|
||||
},
|
||||
// 分享
|
||||
jumpShare(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/invite_friends/invite_friends',
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 查询详细内容
|
||||
*/
|
||||
async getById(){
|
||||
const params={
|
||||
id:this.id,
|
||||
}
|
||||
const resp = await getGoodsDetail(params);
|
||||
if(resp && resp.bizcode === 100){
|
||||
const data = resp.data;
|
||||
// 商品图
|
||||
if(data.goodsGraph){
|
||||
this.swiperList = data.goodsGraph.split(",");
|
||||
}
|
||||
data.addressObj={}// 收件人地址
|
||||
data.quantity=1// 数量
|
||||
data.inventory=0// 库存
|
||||
this.orderInfo = data;
|
||||
this.getSpecification(data.specs);
|
||||
}
|
||||
},
|
||||
|
||||
checkSpecification(val,type){
|
||||
// 需要查询一下最新的规格
|
||||
if(val){
|
||||
this.querySpecification()
|
||||
}else{
|
||||
this.specificationList=[];//规格
|
||||
this.selectSpecification=[];// 选择的规格
|
||||
this.specificationTempl=[];// 规格模版数据
|
||||
}
|
||||
this.specificationShow = val;
|
||||
this.specificationShowType = type;
|
||||
},
|
||||
// 拆解规格
|
||||
getSpecification(specs){
|
||||
console.log("specs",specs);
|
||||
const optionArr=[];
|
||||
if(specs){
|
||||
const arr = JSON.parse(specs);
|
||||
arr.map(item=>{
|
||||
console.log("item",item);
|
||||
optionArr.push({
|
||||
type:item.type,
|
||||
items:item.items,
|
||||
selectVal:null,
|
||||
})
|
||||
})
|
||||
}
|
||||
this.specificationList = optionArr;
|
||||
},
|
||||
// 获取规格模版数据
|
||||
async querySpecification(){
|
||||
const params={
|
||||
id:this.id,
|
||||
}
|
||||
const resp = await getGoodsSpecs(params);
|
||||
if(resp && resp.bizcode === 100){
|
||||
const data = resp.data;
|
||||
let stock=0;
|
||||
data.map(item=>{
|
||||
stock = stock+item.stock;
|
||||
})
|
||||
this.specificationTempl = data;
|
||||
this.orderInfo.inventory = stock;// 库存
|
||||
}
|
||||
},
|
||||
//改变规格的样式
|
||||
clickSpecification(pIndex,oItem){
|
||||
// if(oItem.inventory<=0){
|
||||
// return;
|
||||
// }
|
||||
this.specificationList[pIndex].selectVal = oItem.n;
|
||||
// 计算规格的价格
|
||||
this.selectSpecificationFun(pIndex,oItem);
|
||||
},
|
||||
// 选择规格
|
||||
selectSpecificationFun(index,item){
|
||||
const currentSelectSpecification = this.selectSpecification;
|
||||
currentSelectSpecification[index] = item.n;
|
||||
this.selectSpecification = currentSelectSpecification;
|
||||
const oldLength = this.specificationList.length;
|
||||
const newLength = this.selectSpecification.length;
|
||||
// 开始做校验
|
||||
if(oldLength === newLength){
|
||||
const newLengthStr = this.selectSpecification.join("♧");
|
||||
const specificationTempl = this.specificationTempl;
|
||||
let selectTempl = {};
|
||||
specificationTempl.map(item=>{
|
||||
if(item.combNames === newLengthStr){
|
||||
selectTempl = item
|
||||
return;
|
||||
}
|
||||
});
|
||||
this.selectSpecificationTempl = selectTempl;
|
||||
this.orderInfo.inventory = selectTempl.stock;// 库存
|
||||
}
|
||||
},
|
||||
// 改变数量
|
||||
quantityFun(type){
|
||||
let currentQuantity = this.orderInfo.quantity;// 当前数量
|
||||
if(type === "minus"){
|
||||
if(currentQuantity === 1){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "不能低于最低购买数量",
|
||||
});
|
||||
}else{
|
||||
currentQuantity = currentQuantity - 1;
|
||||
}
|
||||
}else if(type === "add"){
|
||||
// 需要判断一下库存
|
||||
currentQuantity = currentQuantity + 1;
|
||||
}
|
||||
this.orderInfo.quantity = currentQuantity;
|
||||
},
|
||||
/**
|
||||
* 立即购买，确定订单页面
|
||||
*/
|
||||
byFun(){
|
||||
// 先加入购物车，再去购买
|
||||
this.addCart();
|
||||
uni.navigateTo({
|
||||
url: '/pages/order_submit/order_submit',
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 加入购入车
|
||||
*/
|
||||
async addCart(){
|
||||
const selectTempl = this.selectSpecificationTempl;
|
||||
if(!selectTempl || Object.keys(selectTempl).length ===0){
|
||||
uni.showToast({
|
||||
title: '请先选择规格',
|
||||
icon: 'none', // 可选 success/loading/none
|
||||
duration: 2000 // 持续时长，单位ms
|
||||
});
|
||||
return;
|
||||
}
|
||||
const params={
|
||||
id:this.id,
|
||||
specsId:selectTempl.id,// 规格ID
|
||||
goodsNum:this.orderInfo.quantity,// 商品数量
|
||||
}
|
||||
const resp = await addGoods(params);
|
||||
if(resp && resp.bizcode === 100){
|
||||
uni.showToast({
|
||||
title: '成功加入购物车',
|
||||
icon: 'success', // 可选 success/loading/none
|
||||
duration: 2000 // 持续时长，单位ms
|
||||
});
|
||||
setTimeout(()=>{
|
||||
this.checkSpecification(false,null);
|
||||
},2000)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product_info_warp{
|
||||
height: calc(100vh - 196rpx);
|
||||
background-color: $app-bj;
|
||||
}
|
||||
.product_info_header_warp{
|
||||
position: relative;
|
||||
.img_comm{
|
||||
position: absolute;
|
||||
top: 140rpx;
|
||||
}
|
||||
.left_warp{
|
||||
left: 40rpx;
|
||||
}
|
||||
.right_warp{
|
||||
right: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.product_content_warp{
|
||||
// background: linear-gradient(0deg, #F9F9F9 0%, #FFFFFF 100%);
|
||||
border-radius: 30rpx 30rpx 0rpx 24rpx;
|
||||
padding: 20rpx;
|
||||
.content_data{
|
||||
padding: 20rpx;
|
||||
}
|
||||
.content_data_price{
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: $app-bt-bj;
|
||||
.price_o{
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
text-decoration-line: line-through;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.content_data_title{
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #111111;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.content_data_series{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.content_concrete{
|
||||
padding: 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
.concrete_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.concrete_item_{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.concrete_item_but{
|
||||
border-bottom: 1rpx solid #EEEEEEFF;
|
||||
}
|
||||
.concrete_item_title{
|
||||
color: #808080;
|
||||
width: 140rpx;
|
||||
}
|
||||
.concrete_item_value{
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
width: calc(100% - 140rpx);
|
||||
.address_warp{
|
||||
display: flex;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.address_72_warp{
|
||||
font-size: 24rpx;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
.concrete_item_bz{
|
||||
display: flex;
|
||||
}
|
||||
.concrete_item_bz_item{
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.concrete_item_bz_item_left{
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_details{
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 10rpx 10rpx 30rpx;
|
||||
margin-top: 30rpx;
|
||||
.content_details_title{
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
img,
|
||||
img[alt] {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.product_but_warp{
|
||||
padding: 20rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 160rpx;
|
||||
width: calc(100% - 40rpx);
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.product_but_left{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 30%;
|
||||
.left_item{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.product_but_right{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.but_comm{
|
||||
text-align: center;
|
||||
padding: 20rpx 40rpx;
|
||||
color: #FFFFFF;
|
||||
height: 50rpx;
|
||||
}
|
||||
.join_warp{
|
||||
background: #FFA64F;
|
||||
border-radius: 16rpx 0rpx 0rpx 16rpx;
|
||||
}
|
||||
.buy_warp{
|
||||
background: $app-bt-bj;
|
||||
border-radius: 0rpx 16rpx 16rpx 0rpx;
|
||||
}
|
||||
}
|
||||
.specification_warp{
|
||||
background-color: $app-bj;
|
||||
.specification_adress_warp{
|
||||
padding: 30rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
.specification_adress_msg{
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #808080;
|
||||
margin: 0 10rpx 0 20rpx;
|
||||
}
|
||||
.specification_adress_arr{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.address_title{
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #BBBBBB;
|
||||
margin-bottom: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 592rpx;
|
||||
white-space: nowrap; /* 防止文本换行 */
|
||||
overflow: hidden; /* 隐藏溢出的文本 */
|
||||
text-overflow: ellipsis; /* 使用省略号表示溢出的内容 */
|
||||
}
|
||||
.address_title_sel{
|
||||
color: #333333;
|
||||
}
|
||||
.specification_product_warp{
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
.product_content{
|
||||
margin-left: 10rpx;
|
||||
display: grid;
|
||||
}
|
||||
.price_content_warp{
|
||||
// font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: $app-bt-bj;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.price_content_coupon_warp{
|
||||
margin-left: 20rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
text-align: center;
|
||||
color: $app-bt-bj;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
border: 1px solid $app-bt-bj;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.oOrice_content_warp{
|
||||
font-size: 26rpx;
|
||||
color: #808080;
|
||||
line-height: 11rpx;
|
||||
text-decoration-line: line-through;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.coupon_content_warp{
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
color: $app-bt-bj;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.inventory_warp{
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
.specification_list_warp{
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
.list_warp{
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.list_title_warp{
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #1A1A1A;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.specification_item_warp{
|
||||
// display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.item_Warp{
|
||||
width: 48%;
|
||||
background: $app-bj;
|
||||
border-radius: 10rpx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
padding: 10rpx 0;
|
||||
margin-top: 13rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.item_Warp_no_warp{
|
||||
background: #F5F5F5;
|
||||
color: #999999;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
.item_Warp_yes_warp{
|
||||
border: 1px solid $app-bt-bj;
|
||||
color: $app-bt-bj;
|
||||
background: #FFF1EB;
|
||||
}
|
||||
}
|
||||
|
||||
.specification_but{
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
margin-top: 30rpx;
|
||||
.specification_buy{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.specification_buy_but{
|
||||
width: 100%;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
background-color: $app-bt-bj;
|
||||
color: #FFFFFF;
|
||||
margin-top: 20rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup_but{
|
||||
.but_comm{
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<view class="register_warp">
|
||||
<view class="register_title_warp">注册</view>
|
||||
<view class="register_ifo_warp">
|
||||
<view class="register_info_item">
|
||||
<up-input
|
||||
placeholder="请输入手机号"
|
||||
border="surround"
|
||||
v-model="form.mobile"
|
||||
:customStyle="inputCss"
|
||||
></up-input>
|
||||
</view>
|
||||
<view class="register_info_item">
|
||||
<up-input
|
||||
placeholder="请输入验证码"
|
||||
border="surround"
|
||||
v-model="form.code"
|
||||
:customStyle="inputCss"
|
||||
>
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<view v-if="countdown" class="code-warp">
|
||||
<up-count-down :time="60 * 1000" format="ss" @finish="getCode(false)"></up-count-down>
|
||||
<text style="margin-left: 10rpx;">s</text>
|
||||
</view>
|
||||
<view v-else @click="getMobileCode" class="code_msg">
|
||||
获取验证码
|
||||
</view>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
<view class="register_info_item">
|
||||
<up-input
|
||||
placeholder="请输入登录密码"
|
||||
border="surround"
|
||||
v-model="form.loginPassword"
|
||||
:customStyle="inputCss"
|
||||
:type="loginPasswordIsShow ?'text':'password'"
|
||||
>
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<up-image v-if="loginPasswordIsShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="loginPasswordIsShow=false;"></up-image>
|
||||
<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="loginPasswordIsShow=true;"></up-image>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
<view class="register_info_item">
|
||||
<up-input
|
||||
placeholder="再次输入登录密码"
|
||||
border="surround"
|
||||
v-model="form.loginPassword2"
|
||||
:customStyle="inputCss"
|
||||
:type="loginPassword2IsShow ?'text':'password'"
|
||||
>
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<up-image v-if="loginPassword2IsShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="loginPassword2IsShow=false;"></up-image>
|
||||
<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="loginPassword2IsShow=true;"></up-image>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
<view class="register_info_item">
|
||||
<up-input
|
||||
placeholder="请输入交易密码"
|
||||
border="surround"
|
||||
v-model="form.transactionCode"
|
||||
:customStyle="inputCss"
|
||||
:type="transactionCodeIsShow ?'text':'password'"
|
||||
>
|
||||
<template #suffix style="margin-right: 10rpx;">
|
||||
<up-image v-if="transactionCodeIsShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="transactionCodeIsShow=false;"></up-image>
|
||||
<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="transactionCodeIsShow=true;"></up-image>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
<view class="register_info_item">
|
||||
<up-input
|
||||
placeholder="推荐码"
|
||||
border="surround"
|
||||
v-model="form.referralCode"
|
||||
:customStyle="inputCss"
|
||||
></up-input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login_comm_but login_comm_but_yes" @click="registerFun">
|
||||
注册
|
||||
</view>
|
||||
<view class="policy_warp">
|
||||
<up-checkbox
|
||||
name="isCheck"
|
||||
usedAlone
|
||||
v-model:checked="isPolicy"
|
||||
shape="circle"
|
||||
activeColor="#FF7C41"
|
||||
size="19"
|
||||
iconSize="18"
|
||||
>
|
||||
<template #label>
|
||||
<text>已阅读并同意</text>
|
||||
<text class="policy_a_warp">《哈希优品服务协议》</text>
|
||||
<text>及</text>
|
||||
<text class="policy_a_warp">《隐私政策》</text>
|
||||
</template>
|
||||
</up-checkbox>
|
||||
</view>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form:{
|
||||
mobile:null,
|
||||
code:null,// 验证码
|
||||
loginPassword:null,
|
||||
loginPassword2:null,
|
||||
transactionCode:null,// 交易密码
|
||||
referralCode:null,// 推荐码
|
||||
},
|
||||
inputCss:{
|
||||
"height":'80rpx',
|
||||
"background": "#F3F3F3FF",
|
||||
"border-radius": "30rpx",
|
||||
"border": "0rpx",
|
||||
"padding-left": "16px",
|
||||
},
|
||||
countdown:false,// 清空倒计时
|
||||
loginPasswordIsShow:false,
|
||||
loginPassword2IsShow:false,
|
||||
transactionCodeIsShow:false,// 交易密码
|
||||
isPolicy:false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
registerFun(){
|
||||
const params = {
|
||||
...this.form,
|
||||
}
|
||||
console.log("params",params);
|
||||
if(!params.mobile){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入手机号",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!params.code){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入验证码",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!params.loginPassword){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入登录密码",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!params.loginPassword2){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入二次确认密码",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(params.loginPassword !== params.loginPassword2){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "两次输入的登录密码不一致",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!params.referralCode){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入推荐码",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(!this.isPolicy){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请阅读完相关协议以及政策，并且勾选同意选项",
|
||||
});
|
||||
return;
|
||||
}
|
||||
console.log("params",params);
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home',
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取手机验证码
|
||||
*/
|
||||
getMobileCode(){
|
||||
this.countdown = true;
|
||||
// const form = this.form;
|
||||
// const params={
|
||||
// mobile:form.mobile,
|
||||
// type:SMS_TYPE.LOGIN,
|
||||
// }
|
||||
// const response = await uni.$http.post(smsCode,params);
|
||||
// if(response && response.code === 0){
|
||||
// this.startCountdown = true;
|
||||
// this.$refs.uToastRef.show({
|
||||
// type: 'success',
|
||||
// message: response.msg,
|
||||
// });
|
||||
// }else{
|
||||
// this.startCountdown = false;
|
||||
// }
|
||||
},
|
||||
getCode(val){
|
||||
this.countdown = false;
|
||||
// const emptyCountdown = this.emptyCountdown;
|
||||
// if(val){
|
||||
// const codeNumber = this.codeNumberRef;
|
||||
// if(codeNumber){
|
||||
// this.$emit('getCode');
|
||||
// }else{
|
||||
// this.$refs.uToastRef.show({
|
||||
// type: 'error',
|
||||
// message: "请输入邮箱",
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
// }else{
|
||||
// this.$refs.uToastRef.show({
|
||||
// type: 'error',
|
||||
// message: "请输入邮箱",
|
||||
// });
|
||||
// }
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.register_warp{
|
||||
height: calc(100vh - 280rpx);
|
||||
padding: 40rpx;
|
||||
}
|
||||
.register_title_warp{
|
||||
font-weight: bold;
|
||||
font-size: 62rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.register_ifo_warp{
|
||||
margin-top: 30rpx;
|
||||
.register_info_item{
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view>{{$t('schema.name')}}</view>
|
||||
<input class="input" v-model="name" />
|
||||
<button type="primary" @click="add">{{$t('schema.add')}}</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const collection = "hello";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
uni.showLoading();
|
||||
let db = uniCloud.database()
|
||||
db.collection(collection).add({
|
||||
name: this.name
|
||||
}).then((res) => {
|
||||
uni.showToast({
|
||||
title: this.$t('schema.add-success')
|
||||
})
|
||||
}).catch((err) => {
|
||||
uni.showModal({
|
||||
content: err.message,
|
||||
showCancel: false
|
||||
})
|
||||
}).finally(() => {
|
||||
uni.hideLoading();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.input {
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 3px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<view class="search_warp">
|
||||
<!-- 头部搜索 -->
|
||||
<view class="header_comm">
|
||||
<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpHome"></up-image>
|
||||
<view>
|
||||
<up-input
|
||||
placeholder="搜索关键字（商品、店铺、品牌）"
|
||||
:customStyle="{
|
||||
'border-color':'#FF7C41 !important',
|
||||
'padding': '0 0 0 20rpx !important',
|
||||
'border-radius': '20rpx !important',
|
||||
'width': '590rpx',
|
||||
}"
|
||||
v-model="searchVal"
|
||||
>
|
||||
<template #prefix>
|
||||
<up-image src="/static/common/search.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpHome"></up-image>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<view class="search_but_warp" @click="searchClickFun">搜索</view>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 历史搜索 -->
|
||||
<view class="search_history" v-if="!searchVal">
|
||||
<view class="search_history_title">
|
||||
<view>历史搜索</view>
|
||||
<up-image src="/static/common/delete.png" width="20" height="20" bgColor="#f1f6ff00" @click="isShowSearch = true;"></up-image>
|
||||
</view>
|
||||
<view class="search_history_cotent" v-if="searchList && searchList.length !==0">
|
||||
<view v-for="item in searchList" :key="item.id" style="margin: 0 10rpx 10rpx 0;">
|
||||
<up-tag plain :text="item.name" type="warning" :show="true" :closable="isShowSearch" @close="searchHistoryDelete(item)" @click="searchClick(item)"></up-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<view class="not_order_warp_img"><up-image src="/static/common/not_search.png" width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
|
||||
<view class="not_order_msg_warp">暂无搜索记录</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索出内容 -->
|
||||
<view v-else class="poduct_list">
|
||||
<view class="poduct_search_warp">
|
||||
<view>综合</view>
|
||||
<view>销量</view>
|
||||
<view>优惠卷</view>
|
||||
<view>
|
||||
<up-image :src="imgSize === 'big' ? '/static/search/dt.png':'/static/search/xt.png'" width="20" height="20" bgColor="#f1f6ff00" @click="toggleImg"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="poduct_content_warp" >
|
||||
<view v-if="poductList && poductList.length !==0">
|
||||
<!-- 大图 -->
|
||||
<view v-if="imgSize === 'big'" class="big_warp">
|
||||
<view v-for="item in poductList" class="big_item_warp" :key="item.id" @click="jumpInfo(item)">
|
||||
<up-image :src="item.url " width="100%" height="150px" bgColor="#f1f6ff00" radius="10"></up-image>
|
||||
<view class="big_item_content_warp">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="total_or_quantity">
|
||||
<view class="total_">
|
||||
<text>￥</text>
|
||||
<text style="font-size: 36rpx;">{{item.adPrice}}</text>
|
||||
</view>
|
||||
<view>已售{{item.price}}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 小图 -->
|
||||
<view v-if="imgSize === 'min'" class="min_warp">
|
||||
<view v-for="item in poductList" class="min_item_warp" :key="item.id" @click="jumpInfo(item)">
|
||||
<up-image :src="item.url " width="100" height="100" bgColor="#f1f6ff00" radius="10"></up-image>
|
||||
<view class="min_item_content_warp">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="total_or_quantity">
|
||||
<view class="total_">
|
||||
<text>￥</text>
|
||||
<text style="font-size: 36rpx;">{{item.adPrice}}</text>
|
||||
</view>
|
||||
<view>已售{{item.price}}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<view class="not_order_warp_img"><up-image src="/static/common/not_search.png" width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
|
||||
<view class="not_order_msg_warp">抱歉没有搜索此类商品~</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { searchList } from '@/api/product.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchList:[
|
||||
{
|
||||
id:1,
|
||||
name:'酒',
|
||||
},{
|
||||
id:2,
|
||||
name:'鸿星尔克',
|
||||
},{
|
||||
id:3,
|
||||
name:'361',
|
||||
},{
|
||||
id:4,
|
||||
name:'国美',
|
||||
},{
|
||||
id:5,
|
||||
name:'刘丹',
|
||||
},{
|
||||
id:6,
|
||||
name:'榴莲',
|
||||
},{
|
||||
id:7,
|
||||
name:'会心一笑',
|
||||
},
|
||||
],// 搜索历史记录
|
||||
isShowSearch:false,
|
||||
searchVal:null,
|
||||
poductList:[],// 产品列表
|
||||
imgSize:"min",// big:大，min:笑
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpHome(){
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home',
|
||||
})
|
||||
},
|
||||
|
||||
// 删除历史
|
||||
searchHistoryDelete(item){
|
||||
console.log("item",item);
|
||||
this.isShowSearch = false;
|
||||
},
|
||||
/**
|
||||
* 查询产品
|
||||
*/
|
||||
async searchClick(item){
|
||||
this.searchVal = item.name;
|
||||
this.searchClickFun();
|
||||
},
|
||||
/**
|
||||
* 查询产品
|
||||
*/
|
||||
async searchClickFun(){
|
||||
const param = {
|
||||
keyword:this.searchVal,
|
||||
}
|
||||
const resp = await searchList(param);
|
||||
if(resp && resp.bizcode === 100){
|
||||
this.poductList = resp.data;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 切换图大小
|
||||
*/
|
||||
toggleImg(){
|
||||
this.imgSize = this.imgSize === 'big'?'min':'big';
|
||||
},
|
||||
jumpInfo(item){
|
||||
uni.navigateTo({
|
||||
url: '/pages/productInfo/productInfo?id='+item.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search_warp{
|
||||
background-color: $app-bj;
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
.search_but_warp{
|
||||
background: $app-bt-bj;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 40rpx;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.search_history{
|
||||
padding: 60rpx 40rpx;
|
||||
.search_history_title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.search_history_cotent{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.poduct_list{
|
||||
.poduct_search_warp{
|
||||
background: #FFFFFF;
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 60rpx;
|
||||
}
|
||||
.poduct_content_warp{
|
||||
padding: 30rpx;
|
||||
height: calc(100vh - 340rpx);
|
||||
overflow-y: auto;
|
||||
.big_warp{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.big_item_warp{
|
||||
width: 48%;
|
||||
margin-bottom: 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
.big_item_content_warp{
|
||||
padding: 20rpx;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.min_warp{
|
||||
.min_item_warp{
|
||||
padding: 30rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.min_item_content_warp{
|
||||
margin-left: 10rpx;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
}
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.total_or_quantity{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10rpx 0 6rpx;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.total_{
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #F52D1D;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,439 @@
|
||||
<template>
|
||||
<view
|
||||
:style="{'height':isDataNull ? 'calc(100vh - 134rpx)':'calc(100vh - 256rpx)'}"
|
||||
class="shopping_cart_warp"
|
||||
>
|
||||
<view class="shopping_cart_header">
|
||||
<view class="cart">购物车({{shoppingTotal}})</view>
|
||||
<view class="enit_but" @click="isEdit = true">编辑</view>
|
||||
</view>
|
||||
<!-- 购物车列表 -->
|
||||
<view
|
||||
class="shopping_cart_content"
|
||||
>
|
||||
<view v-if="!isDataNull" class="shopping_cart_content_item" v-for="(item,index) in shoppingList" :key="item.id" >
|
||||
<!-- 头部 -->
|
||||
<up-checkbox
|
||||
:customStyle="{marginBottom: '8px'}"
|
||||
name="isCheck"
|
||||
usedAlone
|
||||
v-model:checked="item.isCheck"
|
||||
shape="circle"
|
||||
activeColor="#FF7C41"
|
||||
size="19"
|
||||
iconSize="18"
|
||||
>
|
||||
<template #label>
|
||||
<view class="content_item_header">
|
||||
<up-image :src="item.shopLogo ?item.shopLogo :'/static/shopping/store.png'" width="22" height="22" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="order_product_title">{{item.shopName}}{{item.id}}</view>
|
||||
</view>
|
||||
</template>
|
||||
</up-checkbox>
|
||||
|
||||
<view >
|
||||
<view class="content_item_info" v-for="(pItem,pIndex) in item.product" :key="pItem.id">
|
||||
<up-checkbox
|
||||
:customStyle="{marginBottom: '8px'}"
|
||||
name="isCheck"
|
||||
usedAlone
|
||||
v-model:checked="pItem.isCheck"
|
||||
shape="circle"
|
||||
activeColor="#FF7C41"
|
||||
size="19"
|
||||
iconSize="18"
|
||||
:disabled="!pItem.isAvail"
|
||||
>
|
||||
</up-checkbox>
|
||||
<view class="info_item">
|
||||
<up-image :src="pItem.mainGraph" width="100" height="100" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="content_info">
|
||||
<view class="shopping_content_info_title">{{pItem.name}}</view>
|
||||
<view class="content_info_description">
|
||||
{{pItem.goodsSpece}}
|
||||
</view>
|
||||
<view class="shopping_info_amount">
|
||||
<view>
|
||||
<view style="color: #FF7C41FF;">
|
||||
<text style="font-size: 22rpx;">￥</text>
|
||||
<text style="font-size: 32rpx;">{{pItem.unitPrice}}</text>
|
||||
</view>
|
||||
<view class="shopping_info_amount_original">￥{{pItem.unitPrice}}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="shopping_info_quantity">
|
||||
<view class="quantity_but" @click="quantityFun('minus',index,pIndex,pItem.id)">-</view>
|
||||
<view class="quantity_value">{{pItem.buyNum}}</view>
|
||||
<view class="quantity_but" @click="quantityFun('add',index,pIndex,pItem.id)">+</view>
|
||||
</view>
|
||||
<view v-if="!pItem.isAvail" class="insufficient_stock">库存不足</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<up-image src="/static/common/not_shopping.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="not_order_msg_warp">购物车是空的</view>
|
||||
</view>
|
||||
<choiceness/>
|
||||
</view>
|
||||
<!-- 操作按钮 -->
|
||||
<view v-if="!isDataNull">
|
||||
<view class="shopping_cart_but">
|
||||
<view class="shopping_cart_but_total">
|
||||
<up-checkbox
|
||||
name="isAll"
|
||||
usedAlone
|
||||
v-model:checked="isAll"
|
||||
shape="circle"
|
||||
activeColor="#FF7C41"
|
||||
size="19"
|
||||
iconSize="18"
|
||||
@change="isAllChange"
|
||||
>
|
||||
<template #label>
|
||||
<text style="font-size: 26rpx;color: #444444;">全选</text>
|
||||
</template>
|
||||
</up-checkbox>
|
||||
<text style="margin-left: 20rpx;font-size: 24rpx;color: #444444;">合计：</text>
|
||||
<text style="font-size: 24rpx;">￥</text>
|
||||
<text style="font-size: 32rpx;">2000.00</text>
|
||||
</view>
|
||||
<view v-if="isEdit" class="delete_but_css" @click="deleteShopping">
|
||||
删除
|
||||
</view>
|
||||
<view v-else class="add_but_css" @click="settleShopping">
|
||||
结算(2)
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import choiceness from '@/components/choiceness/choiceness.vue';
|
||||
import { getCartList,updateGoodsNum,removeGoods } from '@/api/cart.js';
|
||||
|
||||
export default {
|
||||
components:{choiceness},
|
||||
data() {
|
||||
return {
|
||||
shoppingTotal:0,// 总条数
|
||||
setShoppingList:[],
|
||||
isDataNull:false,// 数据是否为空
|
||||
shoppingList:[],// 购物车列表
|
||||
isEdit:false,// 是否编辑
|
||||
isAll:false,// 是否全选
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getCartList();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 查询购物车列表
|
||||
*/
|
||||
async getCartList(){
|
||||
const resp = await getCartList();
|
||||
if(resp && resp.bizcode === 100){
|
||||
// 处理了后的数据
|
||||
const data = this.transformedArray(resp.data);
|
||||
this.shoppingTotal = resp.data.length;
|
||||
this.shoppingList = data;
|
||||
}
|
||||
},
|
||||
// 处理购物车的数据
|
||||
transformedArray(originalArray){
|
||||
const newOriginalArray = [];
|
||||
originalArray.map(curr=>{
|
||||
console.log("currcurrcurrcurr",curr);
|
||||
const existingShop = newOriginalArray.find(shop => shop.shopId === curr.shopId && shop.shopName === curr.shopName);
|
||||
|
||||
if (existingShop) {
|
||||
// 如果商店已存在，则向 productObj 数组中添加新产品对象
|
||||
existingShop.product.push({
|
||||
id: curr.id,
|
||||
goodsId: curr.goodsId, // 商品ID
|
||||
name: curr.name, // 商品名称
|
||||
mainGraph: curr.mainGraph,// 主图
|
||||
buyNum: curr.buyNum,// 数量
|
||||
unitPrice: curr.unitPrice,// 商品单价
|
||||
goodsSpece: curr.goodsSpece,// 规格
|
||||
specsId: curr.specsId,// 规格Id
|
||||
isCheck:false,// 用作于全选
|
||||
isAvail:curr.isAvail,// 是否有库存
|
||||
});
|
||||
} else {
|
||||
// 如果商店不存在，则创建一个新商店对象，并初始化 productObj 数组
|
||||
newOriginalArray.push({
|
||||
isCheck:false,// 用作于全选
|
||||
shopId: curr.shopId,
|
||||
shopName: curr.shopName,
|
||||
name: curr.name,
|
||||
shopLogo: curr.shopLogo,
|
||||
product: [{
|
||||
id: curr.id,
|
||||
goodsId: curr.goodsId, // 商品ID
|
||||
name: curr.name, // 商品名称
|
||||
mainGraph: curr.mainGraph,// 主图
|
||||
buyNum: curr.buyNum,// 数量
|
||||
unitPrice: curr.unitPrice,// 商品单价
|
||||
goodsSpece: curr.goodsSpece,// 规格
|
||||
specsId: curr.specsId,// 规格Id
|
||||
isCheck:false,// 用作于全选
|
||||
isAvail:curr.isAvail,// 是否有库存,用作于全选
|
||||
}]
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
return newOriginalArray;
|
||||
},
|
||||
/**
|
||||
* 数量进行增加删除
|
||||
* @param {Object} type 区分是 + 还是 -
|
||||
* @param {Object} pItem 父节点数据，用作与从新修改数据
|
||||
* @param {Object} cItem 需要修改的数据节点
|
||||
*/
|
||||
async quantityFun(type,index,pIndex,id){
|
||||
let currentQuantity = this.shoppingList[index].product[pIndex].buyNum;// 当前数量
|
||||
if(type === "minus"){
|
||||
if(currentQuantity === 1){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'warring',
|
||||
message: "宝贝数量不能在减少啦~",
|
||||
});
|
||||
return;
|
||||
}else{
|
||||
currentQuantity = currentQuantity - 1;
|
||||
}
|
||||
}else if(type === "add"){
|
||||
// 需要判断一下库存
|
||||
currentQuantity = currentQuantity + 1;
|
||||
}
|
||||
const params={
|
||||
id,
|
||||
goodsNum:currentQuantity,
|
||||
}
|
||||
const result = await updateGoodsNum(params);
|
||||
console.log("result",result);
|
||||
if(result && result.bizcode === 100){
|
||||
this.shoppingList[index].product[pIndex].buyNum = currentQuantity;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 结算订单
|
||||
*/
|
||||
settleShopping(){
|
||||
console.log("结算订单....")
|
||||
const deleteId = this.getCheckList();
|
||||
if(!deleteId || deleteId.length === 0){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'warring',
|
||||
message: "请先选择需要结算的商品",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.isAll = false;
|
||||
this.selectCheck(false);
|
||||
uni.navigateTo({
|
||||
url:"/pages/order_submit/order_submit?ids="+deleteId.join(","),
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 删除选中的
|
||||
*/
|
||||
deleteShopping(){
|
||||
const then = this;
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您确定要删除选中的所有商品吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
then.deleteShoppingFun();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除选中的
|
||||
async deleteShoppingFun(){
|
||||
const deleteId = this.getCheckList();
|
||||
if(!deleteId || deleteId.length === 0){
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'warring',
|
||||
message: "请先选择需要删除的商品",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const params={
|
||||
ids:deleteId.join(","),
|
||||
}
|
||||
const result = await removeGoods(params);
|
||||
if(result && result.bizcode === 100){
|
||||
this.isEdit = false;
|
||||
this.isAll = false;
|
||||
this.selectCheck(false);
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'success',
|
||||
message: "删除成功",
|
||||
});
|
||||
this.getCartList();
|
||||
}else{
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "删除失败",
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
// 获取选中的数据
|
||||
getCheckList(){
|
||||
const shoppingList = this.shoppingList;
|
||||
const deleteId=[];
|
||||
shoppingList.map(item=>{
|
||||
if(item.product && item.product.length!==0){
|
||||
item.product.map(pItem=>{
|
||||
if(pItem.isCheck){
|
||||
deleteId.push(pItem.id);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
return deleteId;
|
||||
},
|
||||
// 全部选中 or 全部取消选中
|
||||
isAllChange(val){
|
||||
this.selectCheck(val);
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑是否选中
|
||||
*/
|
||||
selectCheck(isAll){
|
||||
const currentShoppingList = this.shoppingList;
|
||||
currentShoppingList.map(item=>{
|
||||
if(isAll){
|
||||
item.isCheck = true;
|
||||
}else{
|
||||
item.isCheck = false;
|
||||
}
|
||||
if(item.product && item.product.length!==0){
|
||||
if(isAll){
|
||||
item.product.forEach(o => o.isCheck=true);
|
||||
}else{
|
||||
item.product.forEach(o => o.isCheck=false);
|
||||
}
|
||||
}
|
||||
})
|
||||
this.shoppingList = currentShoppingList;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shopping_cart_warp{
|
||||
// height: calc(100vh - 256rpx);
|
||||
background-color: $app-bj;
|
||||
padding: 104rpx 30rpx 30rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.shopping_cart_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #222222;
|
||||
.cart{
|
||||
font-weight: bold;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.enit_but{
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.shopping_cart_content{
|
||||
margin-top: 30rpx;
|
||||
height: calc(100vh - 304rpx);
|
||||
overflow-y: auto;
|
||||
.shopping_cart_content_item{
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.content_item_header{
|
||||
display: flex;
|
||||
}
|
||||
.order_product_title{
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.info_item{
|
||||
display: flex;
|
||||
margin-top: 10rpx;
|
||||
width: calc(100% - 40rpx);
|
||||
}
|
||||
.content_info{
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.shopping_content_info_title{
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #272727;
|
||||
}
|
||||
.shopping_info_amount{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.shopping_info_amount_original{
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
.insufficient_stock{
|
||||
text-align: center;
|
||||
color: #9E9E9E;
|
||||
font-size: 22rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.content_item_info{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.shopping_cart_but{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 40rpx);
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
|
||||
height: 84rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx;
|
||||
align-items: center;
|
||||
.shopping_cart_but_total{
|
||||
font-weight: bold;
|
||||
color: $app-bt-bj;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.add_but_css{
|
||||
height: 38rpx;
|
||||
width: 226rpx;
|
||||
}
|
||||
.delete_but_css{
|
||||
width: 226rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<view class="sort_warp">
|
||||
<view class="sort_header">
|
||||
<view class="sort_category_header">
|
||||
<view :class="selCategory === 1 ? 'category_item category_item_sel':'category_item'" @click="checkCategory(1)">
|
||||
<view>分类</view>
|
||||
<view v-if="selCategory === 1" class="category_item_sel_but"></view>
|
||||
</view>
|
||||
<view :class="selCategory === 2 ? 'category_item category_item_sel':'category_item'" @click="checkCategory(2)">
|
||||
<view>品牌</view>
|
||||
<view v-if="selCategory === 2" class="category_item_sel_but"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 200rpx;" @click="jumpSearch">
|
||||
<up-search
|
||||
shape="square"
|
||||
bgColor="#EEEEEEFF"
|
||||
color="#666666FF"
|
||||
:showAction="false"
|
||||
placeholder="搜索"
|
||||
></up-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-menu-wrap">
|
||||
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
|
||||
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
|
||||
:data-current="index" @tap.stop="swichMenu(index)">
|
||||
<text class="u-line-1">{{item.name}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<block v-for="(item,index) in tabbar" :key="index">
|
||||
<scroll-view scroll-y class="right-box" v-if="current==index">
|
||||
<view style="padding: 0rpx 20rpx;">
|
||||
<up-swiper
|
||||
:list="bannerList"
|
||||
height="80px"
|
||||
></up-swiper>
|
||||
</view>
|
||||
<view class="page-view">
|
||||
<view class="class-item">
|
||||
<view class="item-title">
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
<view class="item-container">
|
||||
<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
|
||||
<image class="item-menu-image" :src="item1.icon" mode=""></image>
|
||||
<view class="item-menu-name">{{item1.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import classifyData from '@/common/classify.data.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selCategory:1,
|
||||
tabbar: classifyData,
|
||||
scrollTop: 0, //tab标题的滚动条位置
|
||||
current: 0, // 预设当前项的值
|
||||
menuHeight: 0, // 左边菜单的高度
|
||||
menuItemHeight: 0, // 左边菜单item的高度
|
||||
bannerList:['/static/common/product_def_banner.png','/static/common/product_def_banner.png','/static/common/product_def_banner.png'],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkCategory(val){
|
||||
this.selCategory = val;
|
||||
},
|
||||
jumpSearch(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/search/search',
|
||||
})
|
||||
},
|
||||
getImg() {
|
||||
return Math.floor(Math.random() * 35);
|
||||
},
|
||||
// 点击左边的栏目切换
|
||||
async swichMenu(index) {
|
||||
if(index == this.current) return ;
|
||||
this.current = index;
|
||||
// 如果为0，意味着尚未初始化
|
||||
if(this.menuHeight == 0 || this.menuItemHeight == 0) {
|
||||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||||
await this.getElRect('u-tab-item', 'menuItemHeight');
|
||||
}
|
||||
// 将菜单菜单活动item垂直居中
|
||||
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
||||
},
|
||||
// 获取一个目标元素的高度
|
||||
getElRect(elClass, dataVal) {
|
||||
new Promise((resolve, reject) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.' + elClass).fields({size: true},res => {
|
||||
// 如果节点尚未生成，res值为null，循环调用执行
|
||||
if(!res) {
|
||||
setTimeout(() => {
|
||||
this.getElRect(elClass);
|
||||
}, 10);
|
||||
return ;
|
||||
}
|
||||
this[dataVal] = res.height;
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sort_warp{
|
||||
padding: 130rpx 0rpx 0rpx;
|
||||
height: calc(100vh - 130rpx);
|
||||
}
|
||||
.sort_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
.sort_category_header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.category_item{
|
||||
width: 140rpx;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.category_item_sel{
|
||||
font-size: 44rpx;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.category_item_sel_but{
|
||||
height: 8rpx;
|
||||
width: 50rpx;
|
||||
background: $app-bt-bj;
|
||||
margin-top: 4rpx;
|
||||
margin-left: 12%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sort_content{
|
||||
|
||||
}
|
||||
.u-menu-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin-top: 20rpx;
|
||||
height: calc(100vh - 216rpx);
|
||||
}
|
||||
|
||||
.u-search-inner {
|
||||
background-color: rgb(234, 234, 234);
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 16rpx;
|
||||
}
|
||||
|
||||
.u-search-text {
|
||||
font-size: 26rpx;
|
||||
color: $u-tips-color;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.u-tab-item {
|
||||
height: 110rpx;
|
||||
background: #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.u-tab-item-active {
|
||||
position: relative;
|
||||
color: #000;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.u-tab-item-active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 4px solid $app-bt-bj;
|
||||
height: 32rpx;
|
||||
left: 0;
|
||||
top: 39rpx;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
background-color: rgb(250, 250, 250);
|
||||
}
|
||||
|
||||
.page-view {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.class-item {
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #fff;
|
||||
padding: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 26rpx;
|
||||
color: $u-main-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-menu-name {
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: $u-main-color;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.thumb-box {
|
||||
width: 33.333333%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.item-menu-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user