首页,我的 写扫码点餐之前提交1.0.0
This commit is contained in:
wwz
321
pages/user/address/edit.vue
Normal file
321
pages/user/address/edit.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="content_box">
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
联系人
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.name" placeholder="请填写收货人姓名" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
联系电话
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="number" v-model="form.mobile" maxlength="11"
|
||||
placeholder="请填写收货人手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
所在地区
|
||||
</view>
|
||||
<view class="content_box_item_tow flex-start">
|
||||
<input type="text" v-model="regionName" disabled="disabled" placeholder="省市区、乡镇等" />
|
||||
<!-- <image class="content_box_itemimage" @click="chooseLocation" src="@/static/address.png" mode="aspectFill">
|
||||
</image> -->
|
||||
</view>
|
||||
</view>
|
||||
</pick-regions>
|
||||
<!-- <view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
所在街道
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.name" placeholder="填写街道" />
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
详细地址
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.address" placeholder="请填写详细地址" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_box_tow flex-between">
|
||||
<view class="content_box_tow_one">
|
||||
设为默认地址
|
||||
</view>
|
||||
<u-switch v-model="showis_default" size="20" @change="change"></u-switch>
|
||||
</view>
|
||||
<view class="positionfixed flex-center" @click="usereditaddress">
|
||||
保存
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import pickRegions from '@/components/pick-regions/pick-regions.vue'
|
||||
export default {
|
||||
components: {
|
||||
pickRegions
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
region: [],
|
||||
showis_default: true,
|
||||
defaultRegionCode: '610112', //默认未央区
|
||||
height: '',
|
||||
form: {
|
||||
regionName: '',
|
||||
type: ''
|
||||
},
|
||||
valueswitch: false
|
||||
};
|
||||
},
|
||||
async onLoad(e) {
|
||||
this.form.id = e.id
|
||||
if (e.type == 1) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '添加地址'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '修改地址'
|
||||
})
|
||||
let res = await this.api.usereaddressshow({
|
||||
id: this.form.id
|
||||
})
|
||||
console.log(res)
|
||||
if (res) {
|
||||
this.form = res
|
||||
if (res.is_default == 1) {
|
||||
this.showis_default = true
|
||||
} else {
|
||||
this.showis_default = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.form.type = e.type
|
||||
},
|
||||
onShow() {},
|
||||
watch: {},
|
||||
computed: {
|
||||
regionName() {
|
||||
// 转为字符串
|
||||
let res = null
|
||||
if (this.region.length == 0) {
|
||||
res = this.form.province + this.form.city + this.form.area
|
||||
} else {
|
||||
res = this.region.map(item => item.name).join(' ')
|
||||
}
|
||||
return res
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.showis_default = e
|
||||
console.log('change', e);
|
||||
},
|
||||
async usereditaddress() {
|
||||
if (this.form.name == null || this.form.name == '') {
|
||||
uni.showToast({
|
||||
title: '请输入姓名',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.mobile == null || this.form.mobile == '') {
|
||||
uni.showToast({
|
||||
title: '请输入电话号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.province == null || this.form.province == '') {
|
||||
uni.showToast({
|
||||
title: '请选择省，市，区',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.address == null || this.form.address == '') {
|
||||
uni.showToast({
|
||||
title: '请输入详细地址',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
let res = await this.api.usereditaddress({
|
||||
id: this.form.id, //地址ID
|
||||
province: this.form.province, //省
|
||||
city: this.form.city, //市
|
||||
area: this.form.area, //区
|
||||
address: this.form.address, //详细地址
|
||||
name: this.form.name, //姓名
|
||||
mobile: this.form.mobile, //电话
|
||||
lng: this.form.lng, //经度
|
||||
is_default: this.showis_default == true ? 1 : '', //1 默认
|
||||
lat: this.form.lat, //维度
|
||||
type: this.form.type //1 添加 2修改
|
||||
})
|
||||
console.log(res)
|
||||
if (res == 1) {
|
||||
uni.showToast({
|
||||
title: this.form.type == 1 ? '添加成功' : '修改成功',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
handleGetRegion(region) {
|
||||
console.log(111, region)
|
||||
this.region = region
|
||||
this.form.province = region[0].name
|
||||
this.form.city = region[1].name
|
||||
this.form.area = region[2].name
|
||||
|
||||
},
|
||||
chooseLocation() {
|
||||
uni.chooseAddress({
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
this.form.address = res.address
|
||||
this.form.lat = res.latitude
|
||||
this.form.lng = res.longitude
|
||||
this.lnglat = res.latitude + '-' + res.longitude
|
||||
console.log('位置名称：' + res.name);
|
||||
console.log('详细地址：' + res.address);
|
||||
console.log('纬度：' + res.latitude);
|
||||
console.log('经度：' + res.longitude);
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e)
|
||||
// uni.getSetting({
|
||||
// success: function(res) {
|
||||
// var statu = res.authSetting;
|
||||
// console.log(statu);
|
||||
// if (!statu['scope.userLocation']) {
|
||||
// console.log(123);
|
||||
// uni.showModal({
|
||||
// title: '是否授权当前位置',
|
||||
// content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
|
||||
// success(tip) {
|
||||
// if (tip.confirm) {
|
||||
// uni.authorize({
|
||||
// scope: 'scope.userLocation',
|
||||
// success:()=> {
|
||||
// this.chooseLocation()
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: '授权失败',
|
||||
// icon: 'none',
|
||||
// duration: 1000
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
}
|
||||
})
|
||||
},
|
||||
edit(e) {
|
||||
uni.pro.navigateTo('my/address/edit', e.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.content_box {
|
||||
padding-left: 40rpx;
|
||||
background: #FFF;
|
||||
|
||||
.content_box_item {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid #F6F6F6;
|
||||
|
||||
.content_box_item_one {
|
||||
width: 112rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.content_box_item_tow {
|
||||
flex: auto;
|
||||
padding-left: 80rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #CCCCCC;
|
||||
|
||||
input {
|
||||
flex: auto;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
|
||||
.content_box_itemimage {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_box_tow {
|
||||
margin-top: 24rpx;
|
||||
padding: 34rpx 44rpx;
|
||||
background: #FFF;
|
||||
|
||||
.content_box_tow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.positionfixed {
|
||||
position: fixed;
|
||||
background: #f6f6f6;
|
||||
width: 90%;
|
||||
bottom: 50rpx;
|
||||
left: 5%;
|
||||
padding: 24rpx 34rpx;
|
||||
text-align: center;
|
||||
background:#f0cb66;
|
||||
border-radius: 46rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
244
pages/user/address/index.vue
Normal file
244
pages/user/address/index.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<view class="content" >
|
||||
<view class="contentitem" v-for="(item,index) in list" :key="index" @click.stop="order_fn(item)">
|
||||
<view class="contentitemone flex-start">
|
||||
<view class="contentitemone_textone">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="contentitemone_textyow">
|
||||
{{item.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentitemtow ">
|
||||
{{item.province}}{{item.area}}{{item.city}}{{item.address}}
|
||||
</view>
|
||||
<view class="contentitemthere flex-between">
|
||||
<view class="contentitemthereone flex-start" @click.stop="edit(item)">
|
||||
<u-icon v-if="item.is_default == 1" style="margin-right: 10rpx;" name="checkmark-circle-fill"
|
||||
color="##9397c1" size="18"></u-icon>
|
||||
<view v-else class="contentitemthereonecircle">
|
||||
|
||||
</view>
|
||||
默认地址
|
||||
</view>
|
||||
<view class="contentitemtheretow flex-start">
|
||||
<text @click.stop="edit(item)">编辑</text>
|
||||
<text style="margin-left: 60rpx;" @click.stop="clickdelete(item)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="positionfixed flex-center" @click="add">
|
||||
<u-icon name="plus" color="#FFF" size="24"></u-icon>
|
||||
<view style="margin-left: 20rpx;">添加地址</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image style="margin-top: 100rpx;" :src="bgnothave" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
<view :style="{height:height}"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
height: '',
|
||||
is_order: 0,
|
||||
list: [],
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.is_order = e.order
|
||||
},
|
||||
onReachBottom() {
|
||||
this.usermyaddresslist()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.positionfixed')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = ele.height + 50 + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
onShow() {
|
||||
// this.inif()
|
||||
},
|
||||
methods: {
|
||||
async usermyaddresslist() {
|
||||
let res = await this.api.usermyaddresslist({
|
||||
page: this.form.page
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
order_fn(item) {
|
||||
if (this.is_order == 1) {
|
||||
uni.$emit('update', JSON.stringify(item));
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
add() {
|
||||
uni.pro.navigateTo('my/address/edit', {
|
||||
type: 1
|
||||
})
|
||||
},
|
||||
edit(e) {
|
||||
uni.pro.navigateTo('my/address/edit', {
|
||||
type: 2,
|
||||
id: e.id
|
||||
})
|
||||
},
|
||||
inif() {
|
||||
this.list = []
|
||||
this.is_end = false,
|
||||
this.form = {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
this.usermyaddresslist()
|
||||
},
|
||||
async clickdelete(e) {
|
||||
var this_ = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除该地址吗？',
|
||||
async success(data) {
|
||||
if (data.confirm) {
|
||||
let res = await this_.api.useredeleteaddress({
|
||||
id: e.id
|
||||
})
|
||||
if (res) {
|
||||
this_.inif()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.positionfixed {
|
||||
position: fixed;
|
||||
background: #f6f6f6;
|
||||
width: 80%;
|
||||
bottom: 50rpx;
|
||||
left: 10%;
|
||||
padding: 24rpx 34rpx;
|
||||
text-align: center;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 46rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.contentitem {
|
||||
padding: 32rpx 40rpx;
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.contentitemone {
|
||||
.contentitemone_textone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.contentitemone_textyow {
|
||||
margin-left: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.contentitemtow {
|
||||
margin-top: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.contentitemtow::after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
margin: 32rpx 0 20rpx 0;
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.contentitemthere {
|
||||
.contentitemthereone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #5C685D;
|
||||
}
|
||||
|
||||
.contentitemthereonecircle {
|
||||
margin-right: 10rpx;
|
||||
border-radius: 50%;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border: 2rpx solid #666666;
|
||||
}
|
||||
|
||||
.contentitemtheretow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
659
pages/user/coupon.vue
Normal file
659
pages/user/coupon.vue
Normal file
@@ -0,0 +1,659 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="towcontent">
|
||||
<view class="towcontentlistxitem flex-start">
|
||||
<view class="towcontentlistxitembox flex-colum"
|
||||
:class="tabIndex == item.type?'towcontentlistxitemboxopacity':''" v-for="(item,index) in tabList"
|
||||
:key="index" @click="towcontentclick(item)">
|
||||
<text class="title">{{item.name}}</text>
|
||||
<image v-if="tabIndex == item.type"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/dg.png" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="containertop"
|
||||
:class="{select: type == 'confirm_order_coupon' || type == 'confirm_order_product' || type == 'orderInfo_coupon' || type == 'orderInfo_product'}">
|
||||
<view class="containertopbox">
|
||||
<view class="containertopboxitem flex-start" v-for="(item,index) in list" :key="index">
|
||||
<view class="containertopboxitemleft flex-colum"
|
||||
:class="{'containertopboxitemleft_vip': item.type == 2,'containertopboxitemlefts': status != 1,}">
|
||||
<view class="containertopboxitemleft_one"
|
||||
:class="status == 1?'':'containertopboxitemleft_ones'">
|
||||
<block v-if="item.type == 2">
|
||||
<text>{{item.num || 0}}</text>
|
||||
<text style="font-size: 28rpx;margin-left: 6rpx;">张</text>
|
||||
</block>
|
||||
<block v-else>
|
||||
<text style="font-size: 28rpx;margin-right: 6rpx;">￥</text>
|
||||
<text>{{item.discountAmount || 0}}</text>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
<view class="containertopboxitemleft_tow" :class="{
|
||||
'containertopboxitemleft_tows': status != 1,
|
||||
'containertopboxitemleft_nameVip': item.type == 2,
|
||||
}">
|
||||
{{ item.type == 2 ? item.name : '优惠券(元)'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="containertopboxitemright">
|
||||
<view class="containertopboxitemright_one">
|
||||
<view class="flex-start">
|
||||
<image class="icon"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/coupon_icon.png"
|
||||
mode="aspectFill">
|
||||
<text class="title">{{ item.shopName }}</text>
|
||||
</view>
|
||||
<text>无门槛使用</text>
|
||||
</view>
|
||||
<view class="containertopboxitemright_tow">
|
||||
<view> {{ item.type == 2 ? '会员商品券' : item.name}}</view>
|
||||
<view @click="navigatorGo(item)"
|
||||
:class="status == 1?'containertopboxitemright_four containertopboxitemright_btn':'containertopboxitemright_fours containertopboxitemright_btn'">
|
||||
{{status == 1 ? '去使用':'已使用'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="containertopboxitemright_there" v-if="item.type == 1 ">
|
||||
有效期至：{{$u.timeFormat(item.endTime, 'yyyy/mm/dd') || '0'}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image style="width: 402rpx;height: 442rpx;margin:240rpx auto 32rpx;"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png" v-if="list.length <= 0"
|
||||
mode="aspectFill"></image>
|
||||
<u-loadmore :status="form.status" iconSize='24' fontSize='24' height='40' />
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnBox"
|
||||
v-if="type == 'confirm_order_coupon' || type == 'confirm_order_product' || type == 'orderInfo_coupon' || type == 'orderInfo_product'">
|
||||
<view class="btn" @click="cancelCoupon">暂不使用券</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
|
||||
{
|
||||
name: '未使用',
|
||||
type: '1'
|
||||
},
|
||||
{
|
||||
name: '已使用',
|
||||
type: '2'
|
||||
},
|
||||
{
|
||||
name: '已过期',
|
||||
type: '-1'
|
||||
}
|
||||
],
|
||||
tabIndex: 1,
|
||||
list: [],
|
||||
status: 1,
|
||||
type: "",
|
||||
payAmount: 0,
|
||||
shopId: null,
|
||||
orderId: null,
|
||||
couopnInfo: null,
|
||||
shoppingCart: [],
|
||||
productList: [],
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options)
|
||||
if (options.type) {
|
||||
this.type = options.type
|
||||
}
|
||||
if (options.payAmount) {
|
||||
this.payAmount = options.payAmount
|
||||
}
|
||||
if (options.shopId) {
|
||||
this.shopId = options.shopId
|
||||
}
|
||||
if (options.orderId) {
|
||||
this.orderId = options.orderId
|
||||
}
|
||||
if (options.couopnInfo) {
|
||||
this.couopnInfo = JSON.parse(decodeURIComponent(options.couopnInfo))
|
||||
}
|
||||
if (options.shoppingCart) {
|
||||
this.shoppingCart = JSON.parse(decodeURIComponent(options.shoppingCart))
|
||||
}
|
||||
if (options.productList) {
|
||||
this.productList = JSON.parse(decodeURIComponent(options.productList))
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.list = [];
|
||||
this.getCouponList()
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 切换类型
|
||||
* @param {Object} item
|
||||
*/
|
||||
towcontentclick(item) {
|
||||
this.tabIndex = item.type;
|
||||
this.status = item.type;
|
||||
this.list = [];
|
||||
this.getCouponList()
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取优惠券数据
|
||||
*/
|
||||
async getCouponList() {
|
||||
try {
|
||||
let params = {
|
||||
userId: uni.getStorageSync('userInfo').id,
|
||||
status: this.status
|
||||
}
|
||||
if (this.type == 'confirm_order_coupon' || this.type == 'confirm_order_product' || this.type ==
|
||||
'orderInfo_coupon' || this.type == 'orderInfo_product') {
|
||||
params.orderId = -1;
|
||||
}
|
||||
if (this.shopId) {
|
||||
params.shopId = this.shopId;
|
||||
}
|
||||
let res = await this.api.conponList(params)
|
||||
if (res.code == 0) {
|
||||
console.log(res)
|
||||
let list = [];
|
||||
if (this.type == 'confirm_order_coupon' || this.type == 'orderInfo_coupon') {
|
||||
list = res.data.filter(v => v.type == 1);
|
||||
} else if (this.type == 'confirm_order_product' || this.type == 'orderInfo_product') {
|
||||
list = res.data.filter(v => v.type == 2);
|
||||
} else {
|
||||
list = res.data;
|
||||
}
|
||||
this.list = list;
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 去使用优惠券
|
||||
*/
|
||||
navigatorGo(item) {
|
||||
|
||||
uni.cache.set('shopId', item.shopId)
|
||||
if (this.type == 'confirm_order_coupon' || this.type == 'confirm_order_product' || this.type ==
|
||||
'orderInfo_coupon' || this.type == 'orderInfo_product') {
|
||||
if (item.type == 1) {
|
||||
if (this.payAmount < item.fullAmount) {
|
||||
uni.showToast({
|
||||
title: "当前订单金额不足使用金额",
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (this.payAmount < item.discountAmount) {
|
||||
uni.showToast({
|
||||
title: "当前订单金额不足抵扣金额",
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
uni.$emit('couponItem', JSON.stringify(item))
|
||||
let selectCouponData = uni.cache.get('selectCouponData') || [];
|
||||
let couponList = selectCouponData.filter(v => v.type == 1);
|
||||
if (couponList.length > 0) {
|
||||
couponList.map(items => {
|
||||
if (item.type == 1) {
|
||||
for (var v in items) {
|
||||
items[v] = item[v]
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
selectCouponData.push(item)
|
||||
}
|
||||
uni.cache.set('selectCouponData', selectCouponData)
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
let productNum = 0; //商品购物车数量
|
||||
let productTicketNum = 0; //商品券使用数量
|
||||
let product = this.shoppingCart.filter(v => v.productId == item.proId);
|
||||
let productTicket = this.productList.filter(v => v.productId == item.proId);
|
||||
if (product.length <= 0) {
|
||||
uni.showToast({
|
||||
title: "购物车没有" + item.name,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (this.productList.filter(v => v.userCouponId == item.id).length > 0) {
|
||||
uni.showToast({
|
||||
title: `当前优惠券已选择`,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
// 计算当前商品购物车数量
|
||||
product.forEach(item => {
|
||||
productNum += item.number;
|
||||
})
|
||||
// 计算当前商品券使用数量
|
||||
productTicket.forEach(item => {
|
||||
productTicketNum += item.num;
|
||||
})
|
||||
if ((productNum - productTicketNum) == 0) {
|
||||
uni.showToast({
|
||||
title: `当前商品已经全部抵扣`,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
let isNum = 0;
|
||||
let isProductItem;
|
||||
|
||||
// 确认订单
|
||||
if (this.type == 'confirm_order_product') {
|
||||
product.forEach(item => {
|
||||
for (let i = 0; i < item.number; i++) {
|
||||
isNum++
|
||||
if (isNum == productTicketNum + 1) {
|
||||
isProductItem = item;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (this.payAmount < (isProductItem.memberPrice > 0 ? isProductItem.memberPrice : isProductItem
|
||||
.salePrice)) {
|
||||
uni.showToast({
|
||||
title: `当前金额不足商品抵扣`,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 订单详情
|
||||
if (this.type == 'orderInfo_product') {
|
||||
product.forEach(item => {
|
||||
for (let i = 0; i < item.num; i++) {
|
||||
isNum++
|
||||
if (isNum == productTicketNum + 1) {
|
||||
isProductItem = item;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (this.payAmount < (isProductItem.memberPrice > 0 ? isProductItem.memberPrice : isProductItem
|
||||
.price)) {
|
||||
uni.showToast({
|
||||
title: `当前金额不足商品抵扣`,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!isProductItem) {
|
||||
uni.showToast({
|
||||
title: `当前订单无可抵扣商品`,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
// let productNum = 0;
|
||||
// product.map(item => {
|
||||
// productNum += item.number
|
||||
// })
|
||||
// if ( productNum < item.num) {
|
||||
// uni.showToast({
|
||||
// title: `购物车${item.name}数量不足`,
|
||||
// icon: "none",
|
||||
// })
|
||||
// return;
|
||||
// }
|
||||
// if (product[0].number item.num) {
|
||||
|
||||
// }
|
||||
uni.$emit('couponItem', JSON.stringify(item))
|
||||
let selectCouponData = uni.cache.get('selectCouponData') || [];
|
||||
selectCouponData.push(item)
|
||||
uni.cache.set('selectCouponData', selectCouponData)
|
||||
uni.navigateBack();
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
uni.pro.navigateTo('/pages/order_food/order_food', {
|
||||
shopId: item.shopId
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 取消使用优惠券/商品券
|
||||
*/
|
||||
async cancelCoupon() {
|
||||
let selectCouponData = uni.cache.get('selectCouponData')
|
||||
if (this.type == 'confirm_order_coupon' || this.type == 'orderInfo_coupon') {
|
||||
let couponList = selectCouponData.filter(v => v.type == 1);
|
||||
let productList = selectCouponData.filter(v => v.type == 2);
|
||||
if (couponList.length > 0) {
|
||||
uni.cache.set('selectCouponData', productList)
|
||||
if (this.couopnInfo && this.orderId) {
|
||||
let params = {
|
||||
shopId: this.shopId,
|
||||
orderId: this.orderId,
|
||||
}
|
||||
if (this.couopnInfo.userCouponInfos.filter(v => v.type == 2).length > 0) {
|
||||
params.userCouponInfos = this.couopnInfo.userCouponInfos.filter(v => v.type == 2)
|
||||
}
|
||||
if (this.couopnInfo.isPointsChecked && this.couopnInfo.calcUsablePointsData.pointsNum &&
|
||||
this.couopnInfo.calcUsablePointsData.pointsNum > 0) {
|
||||
params.pointsNum = this.couopnInfo.calcUsablePointsData.pointsNum;
|
||||
}
|
||||
let res = await this.api.useCoupon(params)
|
||||
}
|
||||
}
|
||||
} else if (this.type == 'confirm_order_product' || this.type == 'orderInfo_product') {
|
||||
let couponList = selectCouponData.filter(v => v.type == 1);
|
||||
let productList = selectCouponData.filter(v => v.type == 2);
|
||||
if (productList.length > 0) {
|
||||
uni.cache.set('selectCouponData', couponList)
|
||||
|
||||
if (this.couopnInfo && this.orderId) {
|
||||
let params = {
|
||||
shopId: this.shopId,
|
||||
orderId: this.orderId,
|
||||
}
|
||||
if (this.couopnInfo.userCouponInfos.filter(v => v.type == 1).length > 0) {
|
||||
params.userCouponInfos = this.couopnInfo.userCouponInfos.filter(v => v.type == 1)
|
||||
}
|
||||
if (this.couopnInfo.isPointsChecked && this.couopnInfo.calcUsablePointsData.pointsNum &&
|
||||
this.couopnInfo.calcUsablePointsData.pointsNum > 0) {
|
||||
params.pointsNum = this.couopnInfo.calcUsablePointsData.pointsNum;
|
||||
}
|
||||
let res = await this.api.useCoupon(params)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
uni.navigateBack();
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
.towcontent {
|
||||
padding: 0 28rpx;
|
||||
border-top: 16rpx solid #f7f7f7;
|
||||
|
||||
.towcontentlistxitem {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.towcontentlistxitembox {
|
||||
width: 33.33%;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
image {
|
||||
margin-top: 6rpx;
|
||||
width: 38.83rpx;
|
||||
height: 8.62rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentlistxitemboxopacity {
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
color: #E3AD7F;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 38.83rpx;
|
||||
height: 8.62rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.containertop {
|
||||
padding: 40rpx 32rpx;
|
||||
|
||||
.containertopbox {
|
||||
margin-top: 8rpx;
|
||||
|
||||
.containertopboxitem::after {
|
||||
position: absolute;
|
||||
bottom: 14rpx;
|
||||
left: 14rpx;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/coupontop.png) no-repeat;
|
||||
width: 72.83rpx;
|
||||
height: 77.14rpx;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.containertopboxitem {
|
||||
margin-bottom: 32rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 18rpx;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
overflow: hidden;
|
||||
|
||||
.containertopboxitemleft {
|
||||
position: relative;
|
||||
width: 182rpx;
|
||||
height: 192rpx;
|
||||
background: #E3AD7F;
|
||||
border-radius: 18rpx 0rpx 0rpx 18rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
|
||||
// ::before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// bottom: 0rpx;
|
||||
// left: 166rpx;
|
||||
// background: #fff;
|
||||
// display: inline-block;
|
||||
// width: 32rpx;
|
||||
// height: 16rpx;
|
||||
// line-height: 32rpx;
|
||||
// border-radius: 32rpx 32rpx 0 0;
|
||||
// box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
|
||||
// z-index: 999;
|
||||
|
||||
// }
|
||||
|
||||
.containertopboxitemleft_one {
|
||||
text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 60rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemleft_ones {
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemleft_tow {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.containertopboxitemleft_nameVip {
|
||||
color: #967152;
|
||||
}
|
||||
|
||||
.containertopboxitemleft_tows {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemleft::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
left: 166rpx;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0rpx 1rpx 9rpx 21rpx rgba(0, 0, 0, 0.04);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.containertopboxitemleft::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20rpx;
|
||||
left: 166rpx;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0rpx 0rpx 15rpx 1rpx rgba(0, 0, 0, 0.1);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.containertopboxitemleft_vip {
|
||||
background-color: #E1D4B2;
|
||||
}
|
||||
|
||||
.containertopboxitemlefts {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.containertopboxitemright {
|
||||
position: relative;
|
||||
padding: 0 32rpx;
|
||||
flex: auto;
|
||||
height: 192rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0rpx 18rpx 18rpx 0rpx;
|
||||
|
||||
.containertopboxitemright_one {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
padding: 16rpx 0 20rpx 0;
|
||||
border-bottom: 1rpx dashed #707070;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemright_tow {
|
||||
margin-top: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.containertopboxitemright_there {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.containertopboxitemright_btn {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.containertopboxitemright_four {
|
||||
color: #FFFFFF;
|
||||
background: #967152;
|
||||
}
|
||||
|
||||
.containertopboxitemright_fours {
|
||||
color: #999999;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
padding-bottom: 180rpx;
|
||||
}
|
||||
|
||||
.btnBox {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
background-color: #fff;
|
||||
padding: 30rpx 30rpx 50rpx 30rpx;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
background: #E3AD7F;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
453
pages/user/my_info.vue
Normal file
453
pages/user/my_info.vue
Normal file
@@ -0,0 +1,453 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
|
||||
<view class="info_list">
|
||||
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">头像</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="list_item_right_head" type="default" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button class="list_item_right_head" @click="onChooseAvatar">
|
||||
<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">昵称</view>
|
||||
<view class="list_item_right" style="width: 100%;">
|
||||
<u-input v-model="nickName" type="text" input-align="right" placeholder="请输入不支持特殊字符10个字以内" :custom-style="{color:'#333',fontSize: '28rpx',border:'none'}" placeholder-style="color:#999;font-size: 28rpx"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">账号</view>
|
||||
<view class="list_item_right ">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="phone" v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getPhone">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button class="phone" v-if="!mobile" open-type="getAuthorize" scope='phoneNumber' @getAuthorize="getPhone" @error="getPhoneError">
|
||||
<!-- #endif -->
|
||||
<view class="flex-colum-end">
|
||||
<view class="text">请授权手机号</view>
|
||||
</view>
|
||||
</button>
|
||||
<view v-else >
|
||||
<view class="flex-colum-end">
|
||||
<view class="text">{{phonetitle }}</view>
|
||||
<view class="place">绑定的手机号不能修改</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">性别</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<view class="place r" @click="sexShow = true">{{sexText}}</view>
|
||||
<u-picker @cancel="sexShow = false" itemHeight="66" :show="sexShow" :columns="sexList" keyName="label" @confirm="confirmSex"></u-picker>
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">生日</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<view class="place r" @click="calendarShow = (birthDay ? false : true)"> {{ birthDay || '生日一旦填写不能修改'}}</view>
|
||||
<!-- <u-calendar @close="calendarShow = false" monthNum="99" minDate="1945-01-01" maxDate="2055-12-12" :show="calendarShow" mode="single" @confirm="confirmCalendar"></u-calendar> -->
|
||||
<!-- <u-picker :show="calendarShow" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> -->
|
||||
<!-- <picker :show="calendarShow" mode="date"></picker> -->
|
||||
<u-datetime-picker
|
||||
mode="date"
|
||||
itemHeight="90"
|
||||
visibleItemCount="5"
|
||||
@cancel="calendarShow = false"
|
||||
:show="calendarShow"
|
||||
:minDate="-2208988800000"
|
||||
v-model="value1"
|
||||
@confirm="confirmTime"
|
||||
></u-datetime-picker>
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item" @click="boxClick">
|
||||
<view class="list_item_left">绑定微信</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<view class="text r">已绑定</view>
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="save active" @click="$u.debounce(sumbit, 500)">保存</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
sexShow: false,
|
||||
calendarShow: false,
|
||||
sexText: '请选择',
|
||||
value1: Number(new Date()),
|
||||
form: {
|
||||
sex: 1,
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore',
|
||||
},
|
||||
sexList: [
|
||||
[{
|
||||
value: 1,
|
||||
label: '男'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
label: '女'
|
||||
},]
|
||||
],
|
||||
|
||||
userInfo: uni.cache.get('userInfo'),
|
||||
userHeadImg: "",
|
||||
nickName: '',
|
||||
birthDay: "",
|
||||
mobile: "",
|
||||
phonetitle: ""
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
this.userHeadImg = this.userInfo.headImg;
|
||||
this.nickName = this.userInfo.nickName;
|
||||
this.sex = this.userInfo.sex;
|
||||
if ( this.userInfo.sex != null ) {
|
||||
this.sexText = this.userInfo.sex == 1 ? '男' : '女';
|
||||
}
|
||||
this.birthDay = this.userInfo.birthDay;
|
||||
this.phonetitle = this.userInfo.telephone ? (this.userInfo.telephone.substr(0, 3) + "****" + this.userInfo.telephone.substr(7)) : ""
|
||||
this.mobile = this.userInfo.telephone;
|
||||
this.date = this.getDate({ format: true})
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 确定生日
|
||||
* @param {Object} e
|
||||
*/
|
||||
confirmTime(e) {
|
||||
this.calendarShow = false;
|
||||
this.birthDay = this.getDate(e.value);
|
||||
},
|
||||
|
||||
/**
|
||||
* 确定性别
|
||||
* @param {Object} e
|
||||
*/
|
||||
confirmSex(e) {
|
||||
this.sexShow = false;
|
||||
this.sex = e.value[0].value;
|
||||
this.sexText = e.value[0].label;
|
||||
console.log(e)
|
||||
},
|
||||
|
||||
getDate(time) { //年月日
|
||||
const date = new Date(time);
|
||||
// const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
|
||||
month = month > 9 ? month : '0' + month;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取手机号
|
||||
* @param {Object} d
|
||||
*/
|
||||
async getPhone(d) {
|
||||
console.log(d)
|
||||
// #ifdef MP-WEIXIN
|
||||
if (d.detail.iv) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
// 微信小程序环境
|
||||
console.log(data)
|
||||
let res = await this.api.userwxlogins({
|
||||
code: data.code,
|
||||
encryptedData: d.detail.encryptedData,
|
||||
iv: d.detail.iv,
|
||||
source: "wechar"
|
||||
})
|
||||
this.phonetitle = res.data.substr(0, 3) + "****" + res.data.substr(7)
|
||||
this.mobile = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
// 支付宝小程序环境
|
||||
my.getAuthCode({
|
||||
scopes: 'auth_user',
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
let authCode = res.authCode;
|
||||
my.getPhoneNumber({
|
||||
success: async (data) => {
|
||||
let res = await this.api.userwxlogins({
|
||||
// code: authCode,
|
||||
encryptedData: JSON.parse(data.response).response,
|
||||
source: "alipay"
|
||||
})
|
||||
this.phonetitle = res.data.substr(0, 3) + "****" + res.data.substr(7)
|
||||
this.mobile = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
|
||||
getPhoneError (e) {
|
||||
console.log(e)
|
||||
},
|
||||
|
||||
/**
|
||||
* 取消绑定/退出登录
|
||||
*/
|
||||
boxClick() {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '确定要取消绑定吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
await this.api.loginOut();
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
uni.cache.clear();
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 上传头像
|
||||
* @param {Object} e
|
||||
*/
|
||||
onChooseAvatar(e) {
|
||||
let _this = this;
|
||||
//#ifdef MP-WEIXIN
|
||||
let avatarUrl = e.detail.avatarUrl
|
||||
uni.uploadFile({
|
||||
url: uni.conf.baseUrl + '/common/upload',
|
||||
// url: uni.conf.baseUrl + '/common/upload',
|
||||
filePath: avatarUrl,
|
||||
header: {
|
||||
environment: 'app',
|
||||
type: 'android',
|
||||
version: '1.7.3',
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
fileType:'image',
|
||||
name: "file",
|
||||
formData: {
|
||||
file: avatarUrl,
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let { data } = JSON.parse(uploadFileRes.data)
|
||||
this.userHeadImg = data
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
//#ifdef MP-ALIPAY
|
||||
uni.chooseImage({
|
||||
count: 1, // 默认9，设置图片的数量
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success: function (res) {
|
||||
// 成功选择图片后
|
||||
let avatarUrl = res.tempFilePaths[0]; // 获取文件路径
|
||||
|
||||
my.uploadFile({
|
||||
url: uni.conf.baseUrl + '/common/upload',
|
||||
// url: uni.conf.baseUrl + '/common/upload',
|
||||
filePath: avatarUrl,
|
||||
header: {
|
||||
environment: 'app',
|
||||
type: 'android',
|
||||
version: '1.7.3',
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
fileType:'image',
|
||||
name: "file",
|
||||
formData: {
|
||||
file: avatarUrl,
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let { data } = JSON.parse(uploadFileRes.data)
|
||||
_this.userHeadImg = data
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
|
||||
// #endif
|
||||
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
async sumbit() {
|
||||
let res = await this.api.upUserInfo({
|
||||
headImg: this.userHeadImg,
|
||||
nickName: this.nickName,
|
||||
sex: this.sex,
|
||||
birthDay: this.birthDay,
|
||||
telephone: this.mobile,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.container{
|
||||
|
||||
::v-deep .u-input input{
|
||||
background-color: transparent;
|
||||
}
|
||||
.info_list{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20rpx;
|
||||
.list_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
.list_item_left{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.list_item_right{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
.list_item_right_head{
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 16rpx;
|
||||
padding: 0;
|
||||
}
|
||||
.phone{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
// #ifdef MP-ALIPAY
|
||||
display: initial;
|
||||
// #endif
|
||||
}
|
||||
.place{
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
line-height: initial;
|
||||
}
|
||||
.text{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.r{
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
button{
|
||||
outline: none;
|
||||
text{
|
||||
color: #fff!important;
|
||||
}
|
||||
}
|
||||
button::after{
|
||||
border: none;
|
||||
}
|
||||
button:active {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.save{
|
||||
width: 502rpx;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
background-color: #E0E0E0;
|
||||
border-radius: 48rpx;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
position: fixed;
|
||||
bottom: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.save.active{
|
||||
background-color: #E3AD7F;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
254
pages/user/repairpassword.vue
Normal file
254
pages/user/repairpassword.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<view class="Box">
|
||||
<view class="box_one" v-if="isPwd == 0">安全密码用于商户推广提现/订单退款，确保资金安全</view>
|
||||
<view class="box_box">
|
||||
<view class="box_item flex-between" v-if="isPwd == 0">
|
||||
<text class="top_box_one_text">手机号码</text>
|
||||
<input type="number" v-model="form.mobile" placeholder="请输入手机号" maxlength="11" disabled="disabled" />
|
||||
</view>
|
||||
<view class="box_item flex-between">
|
||||
<text class="top_box_one_text">密码</text>
|
||||
<input type="number" v-model="form.password" placeholder="密码必须是6位" maxlength="6"
|
||||
:password="!passwords" />
|
||||
</view>
|
||||
<view class="box_item flex-between">
|
||||
<text class="top_box_one_text">确认密码</text>
|
||||
<input type="number" v-model="form.payPassword" placeholder="确认密码必须是6位" maxlength="6"
|
||||
:password="!payPasswords" />
|
||||
</view>
|
||||
<view class="box_item flex-between" style="position:relative;">
|
||||
<text class="top_box_one_text">验证码</text>
|
||||
<input type="number" v-model="form.checkCode" placeholder="请输入验证码" style="padding-right: 140rpx;" />
|
||||
<view class="top_box_one_texts">
|
||||
<view v-if="showText == true" class="yzm" @click="CodeRegister">{{ Recapture }}</view>
|
||||
<view v-else style="color: #ccc; background-color: #f9f9f9; border-radius:16px; padding: 10rpx;">
|
||||
{{ second }}s重新发送
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-colum">
|
||||
<view class="Box_bottom" @click="userInfosavePayPassword">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isPwd: uni.cache.get('userInfo').isPwd,
|
||||
form: {
|
||||
mobile: uni.cache.get('userInfo').telephone,
|
||||
password: '',
|
||||
payPassword: '',
|
||||
checkCode: ''
|
||||
},
|
||||
passwords: false,
|
||||
payPasswords: false,
|
||||
// 注册定时器 初始值
|
||||
second: 60,
|
||||
showText: true,
|
||||
Recapture: '发送验证码'
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
if (uni.cache.get('userInfo').isPwd != 0) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '忘记支付密码', // 标题文本，必须是字符串
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
async CodeRegister() {
|
||||
const res = await this.api.phoneValidateCode({
|
||||
// post 手机验证码
|
||||
phone: this.form.mobile
|
||||
});
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '验证码获取成功',
|
||||
icon: 'none'
|
||||
});
|
||||
// 定时器
|
||||
this.showText = false;
|
||||
this.Recapture = '重新获取';
|
||||
var interval = setInterval(() => {
|
||||
let times = --this.second;
|
||||
this.second = times < 10 ? '0' + times : times; //小于10秒补 0
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
clearInterval(interval);
|
||||
this.second = 60;
|
||||
this.showText = true;
|
||||
}, 60000);
|
||||
}
|
||||
},
|
||||
async loginwxuserInfo() {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.getStorageSync('userInfo').id,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data);
|
||||
}
|
||||
},
|
||||
async userInfosavePayPassword() {
|
||||
|
||||
if (this.form.mobile.length != 11 && this.isPwd == 0) {
|
||||
uni.showToast({
|
||||
title: '手机号必须是11位',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.password == null || this.form.password == '') {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.payPassword == null || this.form.payPassword == '') {
|
||||
uni.showToast({
|
||||
title: '请输入确认密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.password.length != 6 || this.form.payPassword.length != 6) {
|
||||
uni.showToast({
|
||||
title: '密码必须是6位',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.payPassword != this.form.password) {
|
||||
uni.showToast({
|
||||
title: '密码和确认密码不一致',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.checkCode == null || this.form.checkCode == '') {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.loginresetPwd({
|
||||
pwd: this.form.password,
|
||||
code: this.form.checkCode
|
||||
})
|
||||
|
||||
if (res.code == 0) {
|
||||
if (uni.cache.get('userInfo').isPwd != 0) {
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '设置成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
// 获取用户信息
|
||||
this.loginwxuserInfo()
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.Box {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.box_one {
|
||||
margin-top: 26rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.box_box {
|
||||
background: #fff;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.box_item {
|
||||
.top_box_one_text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 26rpx 0;
|
||||
width: 75%;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
}
|
||||
|
||||
.repeat {
|
||||
position: absolute;
|
||||
bottom: 26rpx;
|
||||
right: 0;
|
||||
width: 25rpx;
|
||||
height: 17rpx;
|
||||
}
|
||||
|
||||
.top_box_one_texts {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #5082fd;
|
||||
|
||||
.yzm {
|
||||
padding: 6rpx 10rpx;
|
||||
background: #FFD158;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flex-colum {
|
||||
width: 100%;
|
||||
margin-top: 156rpx;
|
||||
|
||||
.Box_bottom {
|
||||
width: 558rpx;
|
||||
height: 72rpx;
|
||||
background: #FFD158;
|
||||
border-radius: 50rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
223
pages/user/repairpasswordtwo.vue
Normal file
223
pages/user/repairpasswordtwo.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view v-if="isPwd == 0">
|
||||
<view class="contenttext flex-center">
|
||||
{{form.password.length == 6?'请再次确认支付密码':"请设置新密码，用于支付验证"}}
|
||||
</view>
|
||||
<view class="contentbox flex-between">
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(0,1)}}
|
||||
</view>
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(1,2)}}
|
||||
</view>
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(2,3)}}
|
||||
</view>
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(3,4)}}
|
||||
</view>
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(4,5)}}
|
||||
</view>
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(5,6)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
|
||||
</view>
|
||||
<cwx-keyboard ref="keyboard" v-if="isPwd == 0" @confirmEvent="confirmEvent"
|
||||
:money.sync="consumeFee"></cwx-keyboard>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard';
|
||||
export default {
|
||||
components: {
|
||||
cwxKeyboard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isPwd: uni.cache.get('userInfo').isPwd,
|
||||
form: {
|
||||
mobile: uni.cache.get('userInfo').telephone,
|
||||
password: '', //密码
|
||||
payPassword: '', //二次密码
|
||||
checkCode: ''
|
||||
},
|
||||
passwords: false,
|
||||
payPasswords: false,
|
||||
// 注册定时器 初始值
|
||||
second: 60,
|
||||
showText: true,
|
||||
Recapture: '发送验证码',
|
||||
consumeFee: '', //第一遍
|
||||
consumeFees: '', //第二遍
|
||||
money: ''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
if (uni.cache.get('userInfo').isPwd != 0) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '忘记支付密码', // 标题文本，必须是字符串
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
consumeFee(newVal, oldVal) {
|
||||
if (this.form.password.length == 6) {
|
||||
this.form.payPassword = newVal
|
||||
if (this.form.payPassword.length == 6) {
|
||||
this.userInfosavePayPassword()
|
||||
}
|
||||
} else {
|
||||
this.form.password = newVal
|
||||
if (this.form.password.length == 6) {
|
||||
this.$refs.keyboard._handleClearKey() //清空
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmEvent(e) {
|
||||
console.log(e)
|
||||
},
|
||||
async CodeRegister() {
|
||||
const res = await this.api.phoneValidateCode({
|
||||
// post 手机验证码
|
||||
phone: this.form.mobile
|
||||
});
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '验证码获取成功',
|
||||
icon: 'none'
|
||||
});
|
||||
// 定时器
|
||||
this.showText = false;
|
||||
this.Recapture = '重新获取';
|
||||
var interval = setInterval(() => {
|
||||
let times = --this.second;
|
||||
this.second = times < 10 ? '0' + times : times; //小于10秒补 0
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
clearInterval(interval);
|
||||
this.second = 60;
|
||||
this.showText = true;
|
||||
}, 60000);
|
||||
}
|
||||
},
|
||||
async loginwxuserInfo() {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.getStorageSync('userInfo').id,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data);
|
||||
}
|
||||
},
|
||||
async userInfosavePayPassword() {
|
||||
if (this.form.mobile.length != 11 && this.isPwd == 0) {
|
||||
uni.showToast({
|
||||
title: '手机号必须是11位',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.password == null || this.form.password == '') {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.payPassword == null || this.form.payPassword == '') {
|
||||
uni.showToast({
|
||||
title: '请输入确认密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.password.length != 6 || this.form.payPassword.length != 6) {
|
||||
uni.showToast({
|
||||
title: '密码必须是6位',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.payPassword != this.form.password) {
|
||||
this.$refs.keyboard._handleClearKey() //清空
|
||||
this.form.payPassword = ''
|
||||
this.form.password = ''
|
||||
uni.showToast({
|
||||
title: '密码和确认密码不一致',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.checkCode == null || this.form.checkCode == '') {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.loginresetPwd({
|
||||
pwd: this.form.password,
|
||||
code: this.form.checkCode
|
||||
})
|
||||
|
||||
if (res.code == 0) {
|
||||
if (uni.cache.get('userInfo').isPwd != 0) {
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '设置成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
// 获取用户信息
|
||||
this.loginwxuserInfo()
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$refs.keyboard._handleClearKey() //清空
|
||||
this.form.payPassword = ''
|
||||
this.form.password = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.contenttext {
|
||||
padding: 48rpx 0;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.contentbox {
|
||||
margin-top: 48rpx;
|
||||
padding: 0 56rpx;
|
||||
|
||||
.contentboxitem {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
692
pages/user/shop/confirm.vue
Normal file
692
pages/user/shop/confirm.vue
Normal file
@@ -0,0 +1,692 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone flex-start">
|
||||
<view class="onecontent_one">
|
||||
商品信息
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttow flex-start">
|
||||
<view class="onecontenttowitem flex-between" v-for="(item,index) in elist.goods" :key="index">
|
||||
<view class="onecontenttowitem_one flex-start">
|
||||
<image class="onecontenttowitemimage" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="onecontenttowitem_onebox flex-colum-start">
|
||||
<view class="onecontenttowitem_onebox_one">
|
||||
{{item.title || '无'}}
|
||||
</view>
|
||||
<view class="onecontenttowitem_onebox_tow">
|
||||
{{item.spec || '无'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttowitem_tow flex-colum-end">
|
||||
<view class="onecontenttowitem_towstext_one">
|
||||
{{item.price || '无'}}
|
||||
</view>
|
||||
<view class="onecontenttowitem_towstetx_tow">
|
||||
×{{item.number || '无'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontent" style="margin-top: 32rpx;">
|
||||
<view class="onecontentone flex-between">
|
||||
<view class="onecontent_one">
|
||||
确认地址
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#000" size="14"></u-icon>
|
||||
</view>
|
||||
<view class="onecontentaddress flex-colum-start" v-if="elist.address" @click="clickaddress">
|
||||
<view class="onecontentaddressone" v-if="formlist.type == 3">
|
||||
{{elist.address.address}}
|
||||
</view>
|
||||
<view class="onecontentaddressone" v-else>
|
||||
{{elist.address.province}}-{{elist.address.city}}-{{elist.address.area}}-{{elist.address.address}}
|
||||
</view>
|
||||
<view class="onecontentaddresstow">
|
||||
{{elist.address.name}}<text style="margin-left: 10rpx;">{{elist.address.mobile}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentaddress" v-else>
|
||||
<view class="onecontentaddressone" @click="clickaddress">
|
||||
去添加地址
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<!-- <view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
商品金额
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
{{elist.number}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
优惠券
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
暂无可用
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
运费
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
￥{{elist.freight}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="therecontenttow_tow" style="color:#FC5F69;">
|
||||
￥{{elist.price.total_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fivecontent">
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
手机号码
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
{{mobile}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
姓名
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
张雪
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="sixcontent">
|
||||
<view class="sixcontentone flex-between">
|
||||
<view class="sixcontent_one">
|
||||
支付方式
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttow">
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/wx.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">微信支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(2)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/ye.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">余额支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fourcontent">
|
||||
<view class="fourcontentone flex-start">
|
||||
<view class="fourcontent_one">
|
||||
须知：
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontenttow flex-colum-start">
|
||||
|
||||
</view>
|
||||
</view> -->
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
实付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{elist.price.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showpopup" @close="closepopup" @open="openpopup" mode="center" :round="10">
|
||||
<view class="u-popupflex-colum flex-colum">
|
||||
<view class="u-popupflex-columview">
|
||||
请输入支付密码
|
||||
</view>
|
||||
<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot @finish="finish"></u-code-input>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpopup: false,
|
||||
ucodeinputvalue: '',
|
||||
height: '',
|
||||
order_id: '',
|
||||
elist: {
|
||||
address: {
|
||||
|
||||
},
|
||||
price: {
|
||||
total_price: '',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
mobile: uni.cache.get('loginuser').userinfo.mobile,
|
||||
formlist: {
|
||||
goods_id: ''
|
||||
},
|
||||
pay_type: 1
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
// this.elist = JSON.parse(optionItem)
|
||||
this.formlist = e
|
||||
this.formlist.spec = decodeURIComponent(e.spec)
|
||||
let res = await this.api.shoppingindexgoodindexoforders({
|
||||
type: this.formlist.type, // 1购物车 2商品详情页
|
||||
goods_id: this.formlist.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: this.formlist.car_id, //购物车ID 1,2 购物车来源时必填
|
||||
number: this.formlist.number, //数量 商品详情页来源时必填
|
||||
spec: this.formlist.spec, //规格 商品详情页来源时必填
|
||||
address_id: this.formlist.address_id, //地址ID 可以为空（为空时返回默认地址）
|
||||
order_id:this.formlist.order_id,
|
||||
})
|
||||
if (res) {
|
||||
this.elist = res
|
||||
this.elist.goods[0].spec = this.formlist.spec
|
||||
if (this.elist.address) {
|
||||
this.elist.address.mobile = res.address.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickaddress() {
|
||||
uni.pro.navigateTo("user/address/index", {
|
||||
order: 1
|
||||
});
|
||||
uni.$once('update', data => {
|
||||
this.elist.address = JSON.parse(data)
|
||||
if (this.elist.address) {
|
||||
this.elist.address.mobile = this.elist.address.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
this.$forceUpdate();
|
||||
})
|
||||
},
|
||||
openpopup() {
|
||||
console.log('open');
|
||||
},
|
||||
closepopup() {
|
||||
this.showpopup = false
|
||||
},
|
||||
|
||||
finish(e) {
|
||||
this.reservationmakenowsub()
|
||||
},
|
||||
showpopupclick() {
|
||||
if(this.elist.address == null || this.elist.address == undefined){
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '收货地址不能为空'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.pay_type == 1) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
this.reservationmakenowsub()
|
||||
return false;
|
||||
} else {
|
||||
if (this.pay_type == 2) {
|
||||
if (this.elist.is_vip_password == 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您目前没有设置密码，请先设置支付密码',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/repairpassword'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showpopup = true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async reservationmakenowsub() {
|
||||
var datareslane = await this.api.shoppingindexgoodindexsuborder({
|
||||
type: this.formlist.type,
|
||||
goods_id: this.formlist.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: this.formlist.car_id, //购物车ID 1,2 购物车来源时必填
|
||||
number: this.formlist.number, //数量 商品详情页来源时必填
|
||||
spec: this.formlist.spec, //规格 商品详情页来源时必填
|
||||
address_id: this.formlist.address_id, //地址ID 可以为空（为空时返回默认地址）
|
||||
pay_type: this.pay_type ,//1微信 2余额卡
|
||||
order_id:this.formlist.order_id
|
||||
})
|
||||
console.log(datareslane, 280)
|
||||
if (datareslane.data) {
|
||||
let res = await this.api.shoppingindexgoodindexgetpayparams({
|
||||
order_id: datareslane.data.order_id,
|
||||
sec_password: this.ucodeinputvalue //安全密码 余额卡支付时有效
|
||||
}) //判断是否支付成功
|
||||
this.ucodeinputvalue = ''
|
||||
console.log(res, 287)
|
||||
if (res.data.pay_status == 0) {
|
||||
this.showpopup = false
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.pay_data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.pay_data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.data.pay_data.paynonceStr, // 随机字符串
|
||||
package: res.data.pay_data.payPackage, // 固定值
|
||||
signType: res.data.pay_data.paySignType, //固定值
|
||||
paySign: res.data.pay_data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/ordersuccess?id=" + datareslane.data.order_id,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/index?e=" +0,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/ordersuccess?id=" + datareslane.data.order_id,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message || res.msg,
|
||||
icon: "none",
|
||||
success() {
|
||||
setTimeout(res => {
|
||||
// if (options.toast) {
|
||||
uni.hideLoading()
|
||||
// }
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.onecontent_one {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentaddress {
|
||||
.onecontentaddressone {
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontentaddresstow {
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
width: 100%;
|
||||
|
||||
.onecontenttowitem {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
|
||||
.onecontenttowitem_one {
|
||||
.onecontenttowitemimage {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.onecontenttowitem_onebox {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.onecontenttowitem_onebox_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onecontenttowitem_onebox_tow {
|
||||
margin-top: 32rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowitem_tow {
|
||||
.onecontenttowitem_towstext_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontenttowitem_towstetx_tow {
|
||||
margin-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: DIN Alternate-Bold, DIN Alternate;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fivecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fivecontentitem:nth-child(2) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.fivecontentitem {
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fivecontentitem_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fivecontentitem_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.therecontenttow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontenttow_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fourcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourcontenttow {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-popupflex-colum {
|
||||
padding: 80rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.u-popupflex-columview {
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
341
pages/user/shop/detail.vue
Normal file
341
pages/user/shop/detail.vue
Normal file
@@ -0,0 +1,341 @@
|
||||
<template>
|
||||
<view id="wrapper">
|
||||
<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
|
||||
:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
|
||||
<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
|
||||
<view class="left-btn">
|
||||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||||
@click="navClickHandle(1)">
|
||||
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
||||
</view>
|
||||
<view class="left-btntitle"
|
||||
:style="{ height: `${menuInfo.height}px`,lineHeight:`${menuInfo.height}px`}">
|
||||
积分商城
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-cover">
|
||||
<image class="img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopindexnav.png" mode="widthFix">
|
||||
</image>
|
||||
<view class="shop-coverone" :style="{ paddingTop: `${menuInfo.top + menuInfo.height + 25}px`}">
|
||||
<view class="shop-coveronebox flex-center">
|
||||
<view style="margin-right: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
<u-icon name="error-circle" color="#fff" size="32"></u-icon>
|
||||
</view>
|
||||
<view class="shop-coveroneboxnuber">
|
||||
5830
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_content">
|
||||
<view class="shop_contenttitle">积分明细</view>
|
||||
<!-- <view class="shop_contenbox flex-start">
|
||||
<view class="shop_contenboxitem" :class="index == 0?'shop_contenboxitems':''"
|
||||
v-for="(item,index) in shopcontenboxlsit" :key="index">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="shop_contenlist">
|
||||
<view class="shop_contenlistabsolute">
|
||||
<view class="flex-start">
|
||||
<text class="flex-starttext">收入</text>
|
||||
/
|
||||
<text>支出</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_contenlistitem flex-between" v-for="(item,index) in 6" :key="index">
|
||||
<view class="shop_contenlistitemone flex-colum-start">
|
||||
<view>交易积分-线下收款</view>
|
||||
<view>2023-01-11 17:33:09</view>
|
||||
</view>
|
||||
<view class="shop_contenlistitemtow">+0.02</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import navbar from '@/uni_modules/uview-ui/libs/config/props/navbar';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menuInfo: uni.getMenuButtonBoundingClientRect(),
|
||||
paddingBtmSize: 6,
|
||||
isFixed: false,
|
||||
active: 0,
|
||||
titleTopNums: [],
|
||||
shopcontenboxlsit: [{
|
||||
name: '全部'
|
||||
|
||||
},
|
||||
{
|
||||
name: '交易积分'
|
||||
|
||||
}, {
|
||||
name: '活动积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
|
||||
this.isFixed = true;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
});
|
||||
} else {
|
||||
this.isFixed = false;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
});
|
||||
}
|
||||
this.countScrollTitle(e.scrollTop);
|
||||
},
|
||||
onLoad(e) {
|
||||
// #ifdef APP-PLUS || H5
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
this.menuInfo = res
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.menuInfo = uni.getMenuButtonBoundingClientRect()
|
||||
// #endif
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 导航栏点击
|
||||
navClickHandle(t) {
|
||||
switch (t) {
|
||||
case 1:
|
||||
// 返回
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
countScrollTitle: _.throttle(function(top) {
|
||||
if (this.titleTopNums.length > 1) {
|
||||
for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
|
||||
if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
|
||||
this.titleTopNumIndex = i;
|
||||
}
|
||||
}
|
||||
if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
|
||||
this.titleTopNumIndex = this.titleTopNums.length - 1;
|
||||
}
|
||||
}
|
||||
}, 100),
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$bg: #fafafa;
|
||||
$tabLeft: 200upx;
|
||||
$itemH: 100upx;
|
||||
$cartH: 90upx;
|
||||
|
||||
.nav-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 97;
|
||||
|
||||
&.is-fixed {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
|
||||
.left-btn {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: $paddingSize;
|
||||
}
|
||||
}
|
||||
|
||||
.left-btntitle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-cover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
// &::after {
|
||||
// content: '';
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// z-index: 2;
|
||||
// background-color: rgba(0, 0, 0, 0.3);
|
||||
// }
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.shop-coverone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0rpx 32rpx;
|
||||
z-index: 2;
|
||||
|
||||
.shop-coveronebox {
|
||||
padding: 6rpx 10rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 58rpx 58rpx 58rpx 58rpx;
|
||||
font-family: PingFangSC-Semibold, PingFangSC-Semibold;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.shop-coveroneboxnuber {
|
||||
margin-top: 32rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 74rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop_content {
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx 26rpx 0rpx 0rpx;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
top: -92rpx;
|
||||
|
||||
.shop_contenttitle {
|
||||
padding: 16rpx 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shop_contenbox {
|
||||
padding: 0 60rpx;
|
||||
|
||||
.shop_contenboxitem:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.shop_contenboxitem {
|
||||
margin-left: 24rpx;
|
||||
padding: 6rpx 10rpx;
|
||||
background: #F9F9F9;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.shop_contenboxitems {
|
||||
background: #F1CB66;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contenlist {
|
||||
position: relative;
|
||||
margin-top: 32rpx;
|
||||
background: #fff;
|
||||
|
||||
.shop_contenlistabsolute {
|
||||
position: absolute;
|
||||
top: -32rpx;
|
||||
right: 32rpx;
|
||||
|
||||
.flex-start {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
.flex-starttext {
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contenlistitem {
|
||||
padding: 32rpx 44rpx;
|
||||
border-bottom: 2rpx solid #E5E5E5;
|
||||
|
||||
.shop_contenlistitemone {
|
||||
view:nth-child(1) {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
margin-top: 16rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contenlistitemtow {
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 32rpx;
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
418
pages/user/shop/index.vue
Normal file
418
pages/user/shop/index.vue
Normal file
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<view id="wrapper">
|
||||
<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
|
||||
:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
|
||||
<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
|
||||
<view class="left-btn">
|
||||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||||
@click="navClickHandle(1)">
|
||||
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
||||
</view>
|
||||
<view class="left-btntitle"
|
||||
:style="{ height: `${menuInfo.height}px`,lineHeight:`${menuInfo.height}px`}">
|
||||
积分商城
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-cover">
|
||||
<image class="img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopindexnav.png" mode="widthFix">
|
||||
</image>
|
||||
<view class="shop-coverone" :style="{ paddingTop: `${menuInfo.top + menuInfo.height + 25}px`}">
|
||||
<view class="shop-coveronebox flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view style="margin-left: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-coveroneboxnuber">
|
||||
5830
|
||||
</view>
|
||||
<navigator url="/pages/user/shop/detail" hover-class="navigator-hover"
|
||||
class="shop-coveroneboxdetail flex-start">
|
||||
<view style="margin-right: 20rpx;">
|
||||
积分明细
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#666666" size="28"></u-icon>
|
||||
</navigator>
|
||||
<view class="shop-coveroneinput flex-start">
|
||||
<u-search shape="round" searchIconSize='32rpx' height='100%' bgColor='#fff' placeholder="请输入商品"
|
||||
:animation="true" :clearabled="true" v-model="keyword"></u-search>
|
||||
<view class="shop-coveroneinputsouso">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_content">
|
||||
<view class="shop_contenttitle">
|
||||
<view class="shop_contenttitleitem" :class="index == 1?'shop_contenttitleitems':''"
|
||||
v-for="(item,index) in shopcontenboxlsit" :key="index">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_contentlist flex-between">
|
||||
<view class="shop_contentlistitem flex-colum-start" @click="clickshopinfo(item)"
|
||||
v-for="(item,index) in 4" :key="index">
|
||||
<image class="shop_contentlistitemimage" src="@/static/avatar.png" mode="aspectFill"></image>
|
||||
<view class="shop_contentlistitemone">
|
||||
澳洲高级洗发水
|
||||
</view>
|
||||
<view class="shop_contentlistitemtow flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view>
|
||||
30积分
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_contentlistitemthere flex-between">
|
||||
<view>
|
||||
市场价¥100.00
|
||||
</view>
|
||||
<view>
|
||||
已兑换0390件
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import navbar from '@/uni_modules/uview-ui/libs/config/props/navbar';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
menuInfo: {},
|
||||
paddingBtmSize: 6,
|
||||
isFixed: false,
|
||||
active: 0,
|
||||
titleTopNums: [],
|
||||
shopcontenboxlsit: [{
|
||||
name: '全部'
|
||||
},
|
||||
{
|
||||
name: '交易积分'
|
||||
}, {
|
||||
name: '活动积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
|
||||
this.isFixed = true;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
});
|
||||
} else {
|
||||
this.isFixed = false;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
});
|
||||
}
|
||||
this.countScrollTitle(e.scrollTop);
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS || H5
|
||||
uni.getSystemInfo({
|
||||
success: (e) => {
|
||||
console.log(e)
|
||||
this.menuInfo = e
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.menuInfo = uni.getMenuButtonBoundingClientRect()
|
||||
// #endif
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
clickshopinfo(item) {
|
||||
uni.pro.navigateTo('user/shop/shopinfo', {
|
||||
item: item
|
||||
})
|
||||
},
|
||||
// 导航栏点击
|
||||
navClickHandle(t) {
|
||||
switch (t) {
|
||||
case 1:
|
||||
// 返回
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
countScrollTitle: _.throttle(function(top) {
|
||||
if (this.titleTopNums.length > 1) {
|
||||
for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
|
||||
if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
|
||||
this.titleTopNumIndex = i;
|
||||
}
|
||||
}
|
||||
if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
|
||||
this.titleTopNumIndex = this.titleTopNums.length - 1;
|
||||
}
|
||||
}
|
||||
}, 100),
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$bg: #fafafa;
|
||||
$tabLeft: 200upx;
|
||||
$itemH: 100upx;
|
||||
$cartH: 90upx;
|
||||
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.nav-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 97;
|
||||
|
||||
&.is-fixed {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
|
||||
.left-btn {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: $paddingSize;
|
||||
}
|
||||
}
|
||||
|
||||
.left-btntitle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-cover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
// &::after {
|
||||
// content: '';
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// z-index: 2;
|
||||
// background-color: rgba(0, 0, 0, 0.3);
|
||||
// }
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.shop-coverone {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0rpx 32rpx;
|
||||
z-index: 2;
|
||||
|
||||
.shop-coveronebox {
|
||||
font-family: PingFangSC-Semibold, PingFangSC-Semibold;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-coveroneboxnuber {
|
||||
margin-top: 8rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
font-size: 74rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shop-coveroneboxdetail {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.shop-coveroneinput {
|
||||
margin-top: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
|
||||
.shop-coveroneinputsouso {
|
||||
border-left: 2rpx solid #E8E8E8;
|
||||
height: 100%;
|
||||
padding: 4rpx 28rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
line-height: 60 rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop_content {
|
||||
position: relative;
|
||||
top: 0rpx;
|
||||
margin-top: -24rpx;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
||||
padding: 0 28rpx 28rpx 28rpx;
|
||||
|
||||
.shop_contenttitle {
|
||||
width: 100%;
|
||||
padding-top: 32rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
overflow-x: scroll;
|
||||
white-space: nowrap;
|
||||
|
||||
.shop_contenttitleitem:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.shop_contenttitleitem {
|
||||
margin-left: 18rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.shop_contenttitleitems {
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contentlist {
|
||||
.shop_contentlistitem {
|
||||
margin-top: 32rpx;
|
||||
width: 48%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
.shop_contentlistitemimage {
|
||||
width: 100%;
|
||||
height: 296rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
}
|
||||
|
||||
.shop_contentlistitemone {
|
||||
padding: 16rpx 16rpx 0 16rpx;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shop_contentlistitemtow {
|
||||
padding: 16rpx 16rpx 0 16rpx;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
margin-left: 6rpx;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contentlistitemthere {
|
||||
padding: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
view:nth-child(1) {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-decoration-line: line-through;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
560
pages/user/shop/shopinfo.vue
Normal file
560
pages/user/shop/shopinfo.vue
Normal file
@@ -0,0 +1,560 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="contentimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/ewm.png" mode="aspectFill"></image>
|
||||
<view class="contentbox">
|
||||
<view class="contentbox_one">
|
||||
111
|
||||
</view>
|
||||
<view class="contentbox_tow flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view style="margin-left: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentboxtow">
|
||||
<view class="onecontentterewone flex-start">
|
||||
<view class="onecontenttereone_one">
|
||||
商品详情
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="introduction_yow" v-html="list.details">
|
||||
|
||||
</view> -->
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_letr flex-start">
|
||||
<view class="fixedview_letr_item flex-colum" @click="eeInfoindex">
|
||||
<image src="@/static/shop/s.png" mode="aspectFill"></image>
|
||||
<text>首页</text>
|
||||
</view>
|
||||
<view class="fixedview_letr_item flex-colum" @click="makePhoneCall">
|
||||
<image src="@/static/shop/k.png" mode="aspectFill"></image>
|
||||
<text>客服</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow flex-between">
|
||||
<view class="fixedview_towtow" @click="overlayshowsboxs(2)">
|
||||
立即购买
|
||||
</view>
|
||||
<!-- <view class="fixedview_towtow" style="background: #ccc;">
|
||||
立即购买
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-start">
|
||||
<image class="onecontentone_image" src="@/static/shop/k.png" mode="aspectFill"></image>
|
||||
<view class="nonecontentone_view flex-colum-start">
|
||||
<text class="nonecontentone_view_one">贝尔纳干红葡萄酒</text>
|
||||
<view class="nonecontentone_view_otow flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view style="margin-left: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onerecticon" @click="overlayshow = false">
|
||||
<u-icon @click="overlayshow = false" name="close-circle-fill" color="#000000"
|
||||
size="32"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="towrect" v-for="(item,n) in list.spec" :key="item.id">
|
||||
<view class="towrect_one">
|
||||
{{item.spec_name}}
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="towrect_tow" v-for="(item1,index1) in item.spec_options" :key="index1"
|
||||
@click="overlayshowsbox(item1,index1)">
|
||||
<view
|
||||
:class="[item1.isShow?'noneActive':'',towrecttowclass == index1?'towrect_towtext':'towrect_towtexts']">
|
||||
{{item1.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererect_one">
|
||||
购买数量
|
||||
</view>
|
||||
<view class="thererect_tow">
|
||||
<u-number-box v-model="numberbox" :min="1" button-size="24" color="#ffffff"
|
||||
:bgColor="theme.cartpieces" iconStyle="color: #fff" integer></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fuorrect flex-between">
|
||||
<view class="fuorrect_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="fuorrect_tow">
|
||||
¥100
|
||||
</view>
|
||||
</view>
|
||||
<view class="fvirect flex-center" @click="requestSubscribeMessage">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
goods_id: '',
|
||||
overlayshow: false,
|
||||
towrecttowclass: 0,
|
||||
numberbox: 1,
|
||||
list: {},
|
||||
height: '',
|
||||
lsitform: {},
|
||||
selectArr: [], //存放被选中的值
|
||||
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
|
||||
subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
onLoad(e) {
|
||||
this.goods_id = e.id
|
||||
},
|
||||
onShow() {},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
methods: {
|
||||
makePhoneCall() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.list.mobile //打电话
|
||||
});
|
||||
},
|
||||
overlayshowsboxs(e) {
|
||||
this.cartshping = e
|
||||
this.overlayshow = true
|
||||
|
||||
},
|
||||
async overlayshowsbox(item1, index1) {
|
||||
this.towrecttowclass = index1
|
||||
this.lsitform = item1
|
||||
this.lsitform.title_name = item1.title_name
|
||||
// this.lsitform.name = item1.name
|
||||
console.log(this.lsitform)
|
||||
},
|
||||
async requestSubscribeMessage() {
|
||||
// if (this.lsitform.id == '' || this.lsitform.id == null) {
|
||||
// uni.showToast({
|
||||
// title: '请选择合法规格',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// return false;
|
||||
// }
|
||||
// if (this.cartshping == 1) {
|
||||
// this.$u.debounce(this.shoppingindexgoodindexsaddcar(), 200);
|
||||
// } else {
|
||||
uni.pro.navigateTo('user/shop/confirm', {
|
||||
type: 2, // 1购物车 2商品详情页
|
||||
goods_id: this.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: '', //购物车ID 1,2 购物车来源时必填
|
||||
number: this.numberbox, //商品详情页来源时必填
|
||||
spec: this.lsitform.name, //规格 商品详情页来源时必填
|
||||
address_id: '', //地址ID 可以为空（为空时返回默认地址）
|
||||
})
|
||||
// }
|
||||
},
|
||||
async shoppingindexgoodindexsaddcar() {
|
||||
let res = await this.api.shoppingindexgoodindexsaddcar({
|
||||
number: this.numberbox,
|
||||
goods_id: this.goods_id,
|
||||
spec: this.lsitform.name,
|
||||
})
|
||||
if (res == 1) {
|
||||
this.overlayshow = false
|
||||
console.log(res)
|
||||
uni.showToast({
|
||||
title: '添加购物车成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
eeInfoindex() { //去首页
|
||||
uni.pro.navigateTo('user/shop/index')
|
||||
},
|
||||
async shoppingindexgoodsgoodsdetail() {
|
||||
let res = await this.api.shoppingindexgoodsgoodsdetail({
|
||||
goods_id: this.goods_id
|
||||
})
|
||||
this.list = res
|
||||
this.lsitform = res.spec[0]
|
||||
this.lsitform.title_name = res.spec[0].title
|
||||
this.lsitform.img = res.host_img
|
||||
this.list.details = res.details.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig,
|
||||
'style="max-width:100%;height:auto;"') // 替换style
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_letr {
|
||||
.fixedview_letr_item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fixedview_letr_item {
|
||||
margin-left: 32rpx;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
flex: auto;
|
||||
padding-left: 24rpx;
|
||||
|
||||
.fixedview_towone {
|
||||
// width: 50%;
|
||||
// font-size: 28rpx;
|
||||
// font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
// font-weight: bold;
|
||||
// color: var(--cart-text-color);
|
||||
// height: 72rpx;
|
||||
// line-height: 72rpx;
|
||||
// text-align: center;
|
||||
// border-radius: 50rpx 0 0 50rpx;
|
||||
// background: var(--cart-background-color);
|
||||
}
|
||||
|
||||
.fixedview_towtow {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
border-radius: 50rpx;
|
||||
background: #F1CB66;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
|
||||
margin-left: 16rpx;
|
||||
|
||||
.nonecontentone_view_one {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.nonecontentone_view_otow {
|
||||
margin-top: 10rpx;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #FF981E;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
padding-top: 34rpx;
|
||||
|
||||
.towrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towrect_tow {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.noneActive {
|
||||
background-color: #ccc;
|
||||
opacity: 0.4;
|
||||
color: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.towrect_towtext {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #4F5066;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #4F5066;
|
||||
}
|
||||
|
||||
|
||||
.towrect_towtexts {
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #4F5066;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.thererect {
|
||||
padding: 34rpx 0;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
|
||||
.thererect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.thererect_tow {}
|
||||
}
|
||||
|
||||
.fuorrect {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fuorrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fuorrect_tow {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fvirect {
|
||||
margin-top: 200rpx;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
background: #F1CB66;
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.contentimage {
|
||||
width: 100%;
|
||||
height: 528rpx;
|
||||
}
|
||||
|
||||
.contentbox {
|
||||
padding: 28rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.contentbox_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.contentbox_tow {
|
||||
margin-top: 12rpx;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #FF981E;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentboxtow {
|
||||
margin-top: 14rpx;
|
||||
width: 100%;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.onecontentterewone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: #febc46;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontentterewone {
|
||||
.onecontenttereone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.introduction_yow {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
width: 100%;
|
||||
|
||||
/deep/ [alt] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
276
pages/user/user.vue
Normal file
276
pages/user/user.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<image class="topBack"
|
||||
:src="shopExtend?shopExtend.value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'"
|
||||
mode="aspectFill"></image>
|
||||
<view class="myContent">
|
||||
<view class="my_info flex-between">
|
||||
<view class="my_info_left">
|
||||
<image class="my_info_left_head" :src="userInfo.headImg" mode="aspectFill"></image>
|
||||
<view class="name">{{userInfo.nickName || '无'}}</view>
|
||||
</view>
|
||||
<image class="my_info_right_qr" @click="clickEvent" v-if="shopInfo.isVip!=0"
|
||||
:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_qRcode.png'" mode="aspectFill">
|
||||
</image>
|
||||
<view class="my_info_right" @click="clickEvent" v-else>
|
||||
<text>免费入会</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="my_item my_assets">
|
||||
<view class="my_item_title">我的资产</view>
|
||||
<view class="my_assets_list">
|
||||
<view class="my_list_item" @click="clickTo(item,index)" v-for="(item,index) in myAssetsList"
|
||||
:key="index">
|
||||
<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
|
||||
<view class="my_list_item_name">{{item.name}}</view>
|
||||
<view class="my_list_item_num">{{item.num || '**'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="my_item my_fun">
|
||||
<view class="my_item_title">我的功能</view>
|
||||
<view class="my_fun_list">
|
||||
<view class="my_list_item" @click="clickTo(item,index)" v-for="(item,index) in myFunList"
|
||||
:key="index">
|
||||
<view class="my_list_item_left">
|
||||
<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
|
||||
<view class="my_list_item_name">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="my_list_item_right">
|
||||
<u-icon name="play-right-fill" color="#999999" size="12"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
onMounted,
|
||||
reactive
|
||||
} from "vue";
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
const myAssetsList = ref([
|
||||
[{
|
||||
name: "储值",
|
||||
type: "recharge",
|
||||
num: 0,
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/storedValue.png"
|
||||
},
|
||||
{
|
||||
name: "积分",
|
||||
type: "points",
|
||||
num: 0,
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png"
|
||||
},
|
||||
{
|
||||
name: "优惠券",
|
||||
type: "my_coupon",
|
||||
num: 0,
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/coupon.png"
|
||||
},
|
||||
// { name: "权益卡", type: "", num: 0, icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/equityCard.png"}
|
||||
]
|
||||
])
|
||||
const myFunList = ref([{
|
||||
name: "我的优惠券",
|
||||
type: "my_coupon",
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_coupon.png"
|
||||
},
|
||||
{
|
||||
name: "我的订单",
|
||||
type: "my_order",
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_order.png"
|
||||
},
|
||||
// { name: "收货地址", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_address.png"},
|
||||
{
|
||||
name: "个人资料",
|
||||
type: "my_info",
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/personal.png"
|
||||
},
|
||||
{
|
||||
name: "我的会员卡",
|
||||
type: "my_member",
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_member.png"
|
||||
},
|
||||
// { name: "关于", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/inRegard.png"},
|
||||
])
|
||||
const shopInfo = reactive({
|
||||
isVip: 0
|
||||
})
|
||||
const userInfo = reactive({
|
||||
nickName: '无名',
|
||||
headImg: 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_member.png'
|
||||
})
|
||||
const teblist = ref([])
|
||||
const shopExtend = ref(null)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.topBack {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.myContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 298rpx 20rpx 0 20rpx;
|
||||
|
||||
.my_info {
|
||||
height: 172rpx;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.my_info_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.my_info_left_head {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
margin-right: 18rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.my_info_right {
|
||||
width: 136rpx;
|
||||
height: 48rpx;
|
||||
background-color: #E3AD7F;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.my_info_right_qr {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.my_item {
|
||||
background-color: #fff;
|
||||
padding: 22rpx 32rpx;
|
||||
border-radius: 18rpx;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.my_item_title {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
}
|
||||
|
||||
.my_assets {
|
||||
.my_item_title {
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.my_assets_list {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0 38rpx;
|
||||
|
||||
.my_list_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.my_list_item_icon {
|
||||
width: 52rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
|
||||
.my_list_item_name {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
margin-top: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.my_list_item_num {
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #E3AD7F;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my_fun {
|
||||
.my_item_title {
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.my_fun_list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.my_list_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 0 26rpx 0;
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
|
||||
.my_list_item_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.my_list_item_icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.my_list_item_name {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my_list_item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user