首次提交
This commit is contained in:
commit
c3cccd6a8e
|
|
@ -0,0 +1,2 @@
|
|||
.hbuilderx/*
|
||||
unpackage/*
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<script>
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
console.log('App Launch')
|
||||
},
|
||||
onShow: function () {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function () {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
@import "/static/iconfont/font.scss";
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,31 @@
|
|||
// 如果没有通过拦截器配置域名的话，可以在这里写上完整的URL(加上域名部分)
|
||||
let hotSearchUrl = '/ebapi/store_api/hot_search';
|
||||
let indexUrl = '/ebapi/public_api/index';
|
||||
|
||||
// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
|
||||
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
|
||||
const install = (Vue, vm) => {
|
||||
// 此处没有使用传入的params参数
|
||||
let getSearch = (params = {}) => vm.$u.get(hotSearchUrl, {
|
||||
id: 2
|
||||
});
|
||||
// 此处使用了传入的params参数，一切自定义即可
|
||||
let getInfo = (params = {}) => vm.$u.get('/system/user/info/', params);
|
||||
|
||||
let gettest = (params = {}) => vm.$u.get('/system/test/', params);
|
||||
let login = (params = {}) => vm.$u.post('/index.php/api/login/index', params);
|
||||
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
|
||||
let getBanners =(params = {}) => vm.$u.get('/index.php/api/banner/index', params);
|
||||
let getCategory =(params = {}) => vm.$u.get('/index.php/api/category', params);
|
||||
vm.$u.api = {
|
||||
getSearch,
|
||||
getInfo,
|
||||
gettest,
|
||||
login,
|
||||
getBanners,
|
||||
getCategory};
|
||||
}
|
||||
|
||||
export default {
|
||||
install
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token
|
||||
// 同时，我们也可以在此使用getApp().globalData，如果你把token放在getApp().globalData的话，也是可以使用的
|
||||
const install = (Vue, vm) => {
|
||||
Vue.prototype.$u.http.setConfig({
|
||||
// baseUrl: 'https://api.youzixy.com',
|
||||
baseUrl: 'http://47.95.0.242',
|
||||
// 如果将此值设置为true，拦截回调中将会返回服务端返回的所有数据response，而不是response.data
|
||||
// 设置为true后，就需要在this.$u.http.interceptor.response进行多一次的判断，请打印查看具体值
|
||||
// originalData: true,
|
||||
// 设置自定义头部content-type
|
||||
// header: {
|
||||
// 'content-type': 'xxx'
|
||||
// }
|
||||
showLoading: false,
|
||||
loadingText: '请求中..',
|
||||
originalData: true,
|
||||
loadingTime: 800,
|
||||
loadingMask: true
|
||||
});
|
||||
// 请求拦截，配置Token等参数
|
||||
Vue.prototype.$u.http.interceptor.request = (config) => {
|
||||
config.header.Authorization = 'Bearer ' + vm.vuex_token;
|
||||
|
||||
// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式，见：https://uviewui.com/components/globalVariable.html
|
||||
// config.header.token = vm.token;
|
||||
|
||||
// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
|
||||
// config.header.token = vm.$store.state.token;
|
||||
|
||||
// 方式三，如果token放在了globalData，通过getApp().globalData获取
|
||||
// config.header.token = getApp().globalData.username;
|
||||
|
||||
// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的，所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
|
||||
// const token = uni.getStorageSync('token');
|
||||
// config.header.token = token;
|
||||
|
||||
return config;
|
||||
}
|
||||
// 响应拦截，判断状态码是否通过
|
||||
Vue.prototype.$u.http.interceptor.response = (response) => {
|
||||
// 如果把originalData设置为了true，这里得到将会是服务器返回的所有的原始数据
|
||||
// 判断可能变成了res.statueCode，或者res.data.code之类的，请打印查看结果
|
||||
const res = response.data
|
||||
if(res.code == 0){
|
||||
return res
|
||||
}
|
||||
if( res.code >= 200 && res.code < 300 ) {
|
||||
// 如果把originalData设置为了true，这里return回什么，this.$u.post的then回调中就会得到什么
|
||||
return res;
|
||||
}
|
||||
else if(res.code === 401){
|
||||
vm.$u.toast('验证失败，请重新登录');
|
||||
setTimeout(() => {
|
||||
// 此为uView的方法，详见路由相关文档
|
||||
vm.$u.route('/pages/login/login')
|
||||
}, 1500)
|
||||
return false;
|
||||
}
|
||||
else{
|
||||
vm.$u.toast(res.msg);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
install
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
export default {
|
||||
// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，共同部分写在common部分
|
||||
components: {
|
||||
desc: 'Numerous components cover the various requirements of the development process, and the components are rich in functions and compatible with multiple terminals. Let you integrate quickly, out of the box'
|
||||
},
|
||||
js: {
|
||||
desc: 'Numerous intimate gadgets are a weapon that you can call upon during the development process, allowing you to dart in your hand and pierce the Yang with a hundred steps'
|
||||
},
|
||||
template: {
|
||||
desc: 'Collection of many commonly used pages and layouts, reducing the repetitive work of developers, allowing you to focus on logic and get twice the result with half the effort'
|
||||
},
|
||||
nav: {
|
||||
components: 'Components',
|
||||
js: 'JS',
|
||||
template: 'Template'
|
||||
},
|
||||
common: {
|
||||
intro: 'UI framework for rapid development of multiple platforms',
|
||||
title: 'uView UI',
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
export default {
|
||||
// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，共同部分写在common部分
|
||||
components: {
|
||||
desc: '众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让你快速集成，开箱即用'
|
||||
},
|
||||
js: {
|
||||
desc: '众多的贴心小工具，是你开发过程中召之即来的利器，让你飞镖在手，百步穿杨'
|
||||
},
|
||||
template: {
|
||||
desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
|
||||
},
|
||||
nav: {
|
||||
components: '组件',
|
||||
js: '工具',
|
||||
template: '模板'
|
||||
},
|
||||
common: {
|
||||
intro: '多平台快速开发的UI框架',
|
||||
title: 'uView UI',
|
||||
},
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,139 @@
|
|||
/* eslint-disable */
|
||||
var provinceData = [{
|
||||
"label": "北京市",
|
||||
"value": "11"
|
||||
},
|
||||
{
|
||||
"label": "天津市",
|
||||
"value": "12"
|
||||
},
|
||||
{
|
||||
"label": "河北省",
|
||||
"value": "13"
|
||||
},
|
||||
{
|
||||
"label": "山西省",
|
||||
"value": "14"
|
||||
},
|
||||
{
|
||||
"label": "内蒙古自治区",
|
||||
"value": "15"
|
||||
},
|
||||
{
|
||||
"label": "辽宁省",
|
||||
"value": "21"
|
||||
},
|
||||
{
|
||||
"label": "吉林省",
|
||||
"value": "22"
|
||||
},
|
||||
{
|
||||
"label": "黑龙江省",
|
||||
"value": "23"
|
||||
},
|
||||
{
|
||||
"label": "上海市",
|
||||
"value": "31"
|
||||
},
|
||||
{
|
||||
"label": "江苏省",
|
||||
"value": "32"
|
||||
},
|
||||
{
|
||||
"label": "浙江省",
|
||||
"value": "33"
|
||||
},
|
||||
{
|
||||
"label": "安徽省",
|
||||
"value": "34"
|
||||
},
|
||||
{
|
||||
"label": "福建省",
|
||||
"value": "35"
|
||||
},
|
||||
{
|
||||
"label": "江西省",
|
||||
"value": "36"
|
||||
},
|
||||
{
|
||||
"label": "山东省",
|
||||
"value": "37"
|
||||
},
|
||||
{
|
||||
"label": "河南省",
|
||||
"value": "41"
|
||||
},
|
||||
{
|
||||
"label": "湖北省",
|
||||
"value": "42"
|
||||
},
|
||||
{
|
||||
"label": "湖南省",
|
||||
"value": "43"
|
||||
},
|
||||
{
|
||||
"label": "广东省",
|
||||
"value": "44"
|
||||
},
|
||||
{
|
||||
"label": "广西壮族自治区",
|
||||
"value": "45"
|
||||
},
|
||||
{
|
||||
"label": "海南省",
|
||||
"value": "46"
|
||||
},
|
||||
{
|
||||
"label": "重庆市",
|
||||
"value": "50"
|
||||
},
|
||||
{
|
||||
"label": "四川省",
|
||||
"value": "51"
|
||||
},
|
||||
{
|
||||
"label": "贵州省",
|
||||
"value": "52"
|
||||
},
|
||||
{
|
||||
"label": "云南省",
|
||||
"value": "53"
|
||||
},
|
||||
{
|
||||
"label": "西藏自治区",
|
||||
"value": "54"
|
||||
},
|
||||
{
|
||||
"label": "陕西省",
|
||||
"value": "61"
|
||||
},
|
||||
{
|
||||
"label": "甘肃省",
|
||||
"value": "62"
|
||||
},
|
||||
{
|
||||
"label": "青海省",
|
||||
"value": "63"
|
||||
},
|
||||
{
|
||||
"label": "宁夏回族自治区",
|
||||
"value": "64"
|
||||
},
|
||||
{
|
||||
"label": "新疆维吾尔自治区",
|
||||
"value": "65"
|
||||
},
|
||||
{
|
||||
"label": "台湾",
|
||||
"value": "66"
|
||||
},
|
||||
{
|
||||
"label": "香港",
|
||||
"value": "67"
|
||||
},
|
||||
{
|
||||
"label": "澳门",
|
||||
"value": "68"
|
||||
}
|
||||
]
|
||||
export default provinceData;
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
<template>
|
||||
<div class="mpvue-picker">
|
||||
<div :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></div>
|
||||
<div class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
|
||||
<div class="mpvue-picker__hd" catchtouchmove="true">
|
||||
<div class="mpvue-picker__action" @click="pickerCancel">取消</div>
|
||||
<div class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</div>
|
||||
</div>
|
||||
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange">
|
||||
<block>
|
||||
<picker-view-column>
|
||||
<div class="picker-item" v-for="(item,index) in provinceDataList" :key="index">{{item.label}}</div>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<div class="picker-item" v-for="(item,index) in cityDataList" :key="index">{{item.label}}</div>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<div class="picker-item" v-for="(item,index) in areaDataList" :key="index">{{item.label}}</div>
|
||||
</picker-view-column>
|
||||
</block>
|
||||
</picker-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import provinceData from './city-data/province.js';
|
||||
import cityData from './city-data/city.js';
|
||||
import areaData from './city-data/area.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerValue: [0, 0, 0],
|
||||
provinceDataList: [],
|
||||
cityDataList: [],
|
||||
areaDataList: [],
|
||||
/* 是否显示控件 */
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
props: {
|
||||
/* 默认值 */
|
||||
pickerValueDefault: {
|
||||
type: Array,
|
||||
default(){
|
||||
return [0, 0, 0]
|
||||
}
|
||||
},
|
||||
/* 主题色 */
|
||||
themeColor: String
|
||||
},
|
||||
watch:{
|
||||
pickerValueDefault(){
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
|
||||
this.provinceDataList = provinceData;
|
||||
this.cityDataList = cityData[this.pickerValueDefault[0]];
|
||||
this.areaDataList = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]];
|
||||
this.pickerValue = this.pickerValueDefault;
|
||||
},
|
||||
show() {
|
||||
setTimeout(() => {
|
||||
this.showPicker = true;
|
||||
}, 0);
|
||||
},
|
||||
maskClick() {
|
||||
this.pickerCancel();
|
||||
},
|
||||
pickerCancel() {
|
||||
this.showPicker = false;
|
||||
this._$emit('onCancel');
|
||||
},
|
||||
pickerConfirm(e) {
|
||||
this.showPicker = false;
|
||||
this._$emit('onConfirm');
|
||||
},
|
||||
showPickerView() {
|
||||
this.showPicker = true;
|
||||
},
|
||||
handPickValueDefault() {
|
||||
if (this.pickerValueDefault !== [0, 0, 0]) {
|
||||
if (this.pickerValueDefault[0] > provinceData.length - 1) {
|
||||
this.pickerValueDefault[0] = provinceData.length - 1;
|
||||
}
|
||||
if (this.pickerValueDefault[1] > cityData[this.pickerValueDefault[0]].length - 1) {
|
||||
this.pickerValueDefault[1] = cityData[this.pickerValueDefault[0]].length - 1;
|
||||
}
|
||||
if (this.pickerValueDefault[2] > areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1) {
|
||||
this.pickerValueDefault[2] = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
pickerChange(e) {
|
||||
let changePickerValue = e.mp.detail.value;
|
||||
if (this.pickerValue[0] !== changePickerValue[0]) {
|
||||
// 第一级发生滚动
|
||||
this.cityDataList = cityData[changePickerValue[0]];
|
||||
this.areaDataList = areaData[changePickerValue[0]][0];
|
||||
changePickerValue[1] = 0;
|
||||
changePickerValue[2] = 0;
|
||||
} else if (this.pickerValue[1] !== changePickerValue[1]) {
|
||||
// 第二级滚动
|
||||
this.areaDataList =
|
||||
areaData[changePickerValue[0]][changePickerValue[1]];
|
||||
changePickerValue[2] = 0;
|
||||
}
|
||||
this.pickerValue = changePickerValue;
|
||||
this._$emit('onChange');
|
||||
},
|
||||
_$emit(emitName) {
|
||||
let pickObj = {
|
||||
label: this._getLabel(),
|
||||
value: this.pickerValue,
|
||||
cityCode: this._getCityCode()
|
||||
};
|
||||
this.$emit(emitName, pickObj);
|
||||
},
|
||||
_getLabel() {
|
||||
let pcikerLabel =
|
||||
this.provinceDataList[this.pickerValue[0]].label +
|
||||
'-' +
|
||||
this.cityDataList[this.pickerValue[1]].label +
|
||||
'-' +
|
||||
this.areaDataList[this.pickerValue[2]].label;
|
||||
return pcikerLabel;
|
||||
},
|
||||
_getCityCode() {
|
||||
return this.areaDataList[this.pickerValue[2]].value;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pickerMask {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.mpvue-picker-content {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: all 0.3s ease;
|
||||
transform: translateY(100%);
|
||||
z-index: 3000;
|
||||
}
|
||||
.mpvue-picker-view-show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.mpvue-picker__hd {
|
||||
display: flex;
|
||||
padding: 9px 15px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
}
|
||||
.mpvue-picker__hd:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
color: #e5e5e5;
|
||||
transform-origin: 0 100%;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.mpvue-picker__action {
|
||||
display: block;
|
||||
flex: 1;
|
||||
color: #1aad19;
|
||||
}
|
||||
.mpvue-picker__action:first-child {
|
||||
text-align: left;
|
||||
color: #888;
|
||||
}
|
||||
.mpvue-picker__action:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
.picker-item {
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
}
|
||||
.mpvue-picker-view {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 238px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
[参考这里]: https://ask.dcloud.net.cn/article/35070 "参考这里"
|
||||
|
||||
|
||||
> * 遇到问题或有建议可以评论留言或者[直接提问](https://ask.dcloud.net.cn/publish/ext/?pn=商城模板&uid=518399)
|
||||
> * 如果觉得模板不错，<font color=#f00>给个五星鼓励鼓励</font>!
|
||||
|
||||
###已实现页面
|
||||
* tabbar
|
||||
* 首页(subNvue导航栏)
|
||||
* 分类页(vue,nvue)
|
||||
* 购物车页(subNvue导航栏)
|
||||
* 个人中心页(subNvue导航栏)
|
||||
* 下级页面
|
||||
* 商品列表页(vue,nvue)
|
||||
* 商品详情页
|
||||
* 订单确认页
|
||||
* 个人中心页
|
||||
* 登录页
|
||||
* 注册页
|
||||
* 重置密码页
|
||||
* 我的订单页(vue,nvue)
|
||||
* 设置页
|
||||
* 消息列表页
|
||||
* 聊天页
|
||||
* 我的二维码页
|
||||
* 优惠券页
|
||||
* 我的收藏页
|
||||
* 地址管理页
|
||||
* 地址编辑/新增页
|
||||
* 充值页
|
||||
* 订单支付页
|
||||
* 支付成功页
|
||||
* 评论列表
|
||||
|
||||
###模板说明
|
||||
> * HX 2.0.3+ 版本的用户注意，模板nvue文件编译模式为**weex模式**，不支持uni-app模式(等uni-app模式完善后再支持)，也就是说，目前页面目录会同时有nvue和vue文件，APP端使用nvue文件，非APP端使用vue文件。
|
||||
> * 首页、分类页左上角城市，使用了高德SDK获取城市信息，实际应用中请替换模板的高德KEY，[参考这里]。
|
||||
> * 所有页面的字体图标归类到/static/iconfont/font.scss下，App.vue引入全局调用，同时目录下有ttf文件，低版本安卓如果图标不显示，可以引用ttf文件试试。
|
||||
> * 模板中把表情上传到了第三方图床(仅供模板在APP和小程序中展示，请勿依赖此图床，实际使用中请自行上传到您的服务器中调用。)
|
||||
> * 地址编辑/新增页使用了mpvue-citypicker城市选择组件
|
||||
> * 模板页面之间耦合性低，页面除字体图标外的css都独立写在页面内部，只看上了模板中某个页面，可以很方便的拿出来单独使用(记得带上字体图标/static/iconfont/font.scss)。
|
||||
> * 点击昵称跳转登录/注册页面
|
||||
> * 模板中的搜索功能，建议用户直接做成跳转至[搜索模板](https://ext.dcloud.net.cn/plugin?id=91)进行搜索，需要自己动手实现。
|
||||
> * 模板中除了商品详情页外的图片均放在本地，如果要做小程序的，要换成远程图片避免大小限制。
|
||||
> * 模板商品图片采集于淘宝，分类图片使用[iconfont @是满月啊](https://www.iconfont.cn/collections/detail?cid=10840)，工具栏图标使用[iconfont @小胖要吃肉丸变成球球](https://www.iconfont.cn/collections/detail?cid=13655)，图片均只用于案例展示，请勿用于其他用途。
|
||||
> * 编译样式需要安装scss插件，HBuilderX -> 工具 -> 插件安装 -> scss/sass编译 -> 安装
|
||||
> * 如果觉得模板还不错<font color=#f00>给个五星鼓励鼓励</font>!
|
||||
|
||||
####APP端说明
|
||||
> * 为了提高APP端性能，APP端部分页面配套了subNvue导航栏或nvue页面，使用模板时候需要注意
|
||||
> * 使用模板中含有subNvue导航栏的页面时候，请注意配置page.json文件，模板为了兼容其他端，在vue页内也写有导航栏，在非APP端时候显示。
|
||||
> * 含有nvue页面的页面目录中，会有vue和nvue两个文件，APP端使用nvue，非APP端使用vue文件。
|
||||
> * 由于使用不同的页面，APP端和非APP端使用体验上有一定的差异。
|
||||
> * 如果你不想要这些APP独有的元素，可以在模板中删除，vue文件也支持在APP中使用的(删除subNvue导航栏需要改动页面参数让vue页的导航栏显示在APP)。
|
||||
|
||||
|
||||
|
||||
###版本记录
|
||||
-------------
|
||||
* 2019-07-08
|
||||
* 1. 部分页面添加subNvue导航栏(仅支持APP，具体添加页面看页面列表标注)
|
||||
* 2. 所有页面的字体图标归类到/static/iconfont/font.scss下，App.vue引入全局调用，目录下有ttf文件，低版本安卓如果图标不显示可以引用ttf文件试试
|
||||
* 3. 修复H5端商品详情页导航栏的错位问题 感谢 <font color=#22ac38>@深蓝新创科技</font> 反馈
|
||||
|
||||
* 2019-06-25
|
||||
* 1. 增加评论列表页(商品详情页点击评论进入)
|
||||
* 2. 模板编译模式改为自定义组件模式
|
||||
* 3. 一些小的语法变更
|
||||
|
||||
* 2019-04-26
|
||||
* 1. 购物车 修复全选删除不能全部删除问题(低级错误啊啊啊啊 0..0)
|
||||
* 2. 修复地址编辑保存按钮错位问题
|
||||
* 3. 修复H5平台从订单确认页进入选择地址列表不能编辑地址问题
|
||||
|
||||
* 2019-04-25
|
||||
* 1. 购物车
|
||||
- 修复删除商品没更新selectedList问题
|
||||
- 修复手动输入数量价格不更新问题
|
||||
- 添加加入商品方法(说明请看代码注释)
|
||||
* 2. 完善购物流程(完善了从下单到支付完成的页面)
|
||||
* 3. 增加更多功能页面(详细请看下方“已实现页面”)
|
||||
|
||||
* 2019-04-15
|
||||
* 1. 客服聊天页 消息过长不换行问题。
|
||||
* 2. 商品列表页，我的订单页 修复H5下重复进入页面顶部栏消失问题。
|
||||
* 3. 登录页 安卓下，弹出键盘会把第三方登录按钮顶上来问题。
|
||||
|
||||
* 2019-04-12
|
||||
* 1. 购物车页，修复数量没有垂直居中问题。
|
||||
* 2. 客服聊天页 修复点击发送图片按钮表情不收起的情况，优化初次进入页面时图片加载和调整聊天图片尺寸，把表情上传到了第三方图床(仅供模板在APP和小程序中展示，实际使用中请自行上传到您的服务器中调用。)
|
||||
|
||||
* 2019-04-11
|
||||
* 1. 修复iOS下页面回弹导致头部抖动
|
||||
* 2. 购物车页 修复删除商品时动画错误问题
|
||||
* 3. 商品详情页
|
||||
- 添加默认头部按钮半透明底色
|
||||
- 添加商品轮播图指示器
|
||||
- 添加分享弹窗(点击左下角分享)
|
||||
- 修复小程序下锚点不居中问题
|
||||
- 调整所有弹窗动画时长
|
||||
* 4. 增加页面 我的订单页,设置页,我的二维码页,消息列表页,聊天(客服)页
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
App.mpType = 'app'
|
||||
|
||||
// 引入全局uView
|
||||
import uView from 'uview-ui';
|
||||
Vue.use(uView);
|
||||
|
||||
import store from "@/store"
|
||||
|
||||
// 引入uView提供的对vuex的简写法文件
|
||||
let vuexStore = require('@/store/$u.mixin.js');
|
||||
Vue.mixin(vuexStore);
|
||||
|
||||
// i18n部分的配置
|
||||
// 引入语言包，注意路径
|
||||
import Chinese from '@/common/locales/zh.js';
|
||||
import English from '@/common/locales/en.js';
|
||||
|
||||
// VueI18n
|
||||
import VueI18n from '@/common/vue-i18n.min.js';
|
||||
|
||||
// VueI18n
|
||||
Vue.use(VueI18n);
|
||||
|
||||
const i18n = new VueI18n({
|
||||
// 默认语言
|
||||
locale: 'zh',
|
||||
// 引入语言文件
|
||||
messages: {
|
||||
'zh': Chinese,
|
||||
'en': English,
|
||||
}
|
||||
});
|
||||
|
||||
// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
|
||||
Vue.prototype._i18n = i18n;
|
||||
|
||||
const app = new Vue({
|
||||
i18n,
|
||||
store,
|
||||
...App
|
||||
})
|
||||
|
||||
// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
|
||||
import httpInterceptor from '@/common/http.interceptor.js';
|
||||
Vue.use(httpInterceptor, app);
|
||||
|
||||
// http接口API抽离，免于写url或者一些固定的参数
|
||||
import httpApi from '@/common/http.api.js';
|
||||
Vue.use(httpApi, app);
|
||||
|
||||
app.$mount()
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
{
|
||||
"name" : "xxmall",
|
||||
"appid" : "__UNI__BA7C91D",
|
||||
"description" : "",
|
||||
"versionName" : "1.2.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
"usingComponents" : true, //是否启用`自定义组件模式`，为true表示新的`自定义组件模式` ，否则为`template模板模式`
|
||||
"softinput" : {
|
||||
"navBar" : "none" // 是否显示软键盘上的导航条
|
||||
},
|
||||
/* 5+App特有相关 */
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
"modules" : {
|
||||
"Share" : {},
|
||||
"OAuth" : {}
|
||||
},
|
||||
/* 模块配置 */
|
||||
"distribute" : {
|
||||
"orientation" : [ "portrait-primary" ],
|
||||
/* 应用发布信息 */
|
||||
"android" : {
|
||||
/* android打包配置 */
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
"ios" : {},
|
||||
/* ios打包配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* SDK配置 */
|
||||
"quickapp" : {},
|
||||
/* 快应用特有相关 */
|
||||
"mp-weixin" : {
|
||||
/* 小程序特有相关 */
|
||||
"appid" : "wxe27470b2f09a2508",
|
||||
"setting" : {
|
||||
"urlCheck" : true
|
||||
},
|
||||
"permission" : {}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
{
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/tabBar/home/home",
|
||||
"style": {
|
||||
"navigationBarTextStyle":"black",
|
||||
"enablePullDownRefresh": true,
|
||||
"onReachBottomDistance":50,
|
||||
"app-plus": {
|
||||
"titleNView": false ,//禁用原生导航栏
|
||||
"softinputNavBar":"none",
|
||||
"subNVues":[{
|
||||
"id": "homeTitleNvue", // 唯一标识
|
||||
"path": "pages/tabBar/home/subNvue/homeTitleNvue", // 页面路径
|
||||
"type":"navigationBar"
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/tabBar/category/category",
|
||||
"style": {
|
||||
"navigationBarTextStyle":"black",
|
||||
"app-plus": {
|
||||
"titleNView": false ,//禁用原生导航栏
|
||||
"bounce":"none"
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/tabBar/cart/cart",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTextStyle":"black",
|
||||
"app-plus": {
|
||||
"titleNView": false ,//禁用原生导航栏
|
||||
"softinputNavBar":"none",
|
||||
"subNVues":[{
|
||||
"id": "cartTitleNvue", // 唯一标识
|
||||
"path": "pages/tabBar/cart/subNvue/cartTitleNvue", // 页面路径
|
||||
"type":"navigationBar"
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/tabBar/user/user",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"backgroundTextStyle":"light",
|
||||
"navigationBarBackgroundColor":"#f06c7a",
|
||||
"backgroundColorTop":"#f06c7a",
|
||||
"navigationBarTextStyle":"white",
|
||||
"app-plus": {
|
||||
"titleNView": false ,//禁用原生导航栏
|
||||
"subNVues":[{
|
||||
"id": "userTitleNvue", // 唯一标识
|
||||
"path": "pages/tabBar/user/subNvue/userTitleNvue", // 页面路径
|
||||
"type":"navigationBar"
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/goods/goods-list/goods-list",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "",
|
||||
"enablePullDownRefresh": true,
|
||||
"app-plus": {
|
||||
"bounce":"none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/goods/goods",
|
||||
"style" : {
|
||||
"navigationBarTitleText" : "",
|
||||
"navigationBarBackgroundColor":"#f1f1f1",
|
||||
"onReachBottomDistance":50,
|
||||
"h5":{
|
||||
"titleNView":false
|
||||
},
|
||||
"app-plus": {
|
||||
"titleNView": false ,//禁用原生导航栏
|
||||
"bounce":"none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录",
|
||||
"navigationBarBackgroundColor":"#f06c7a",
|
||||
"navigationBarTextStyle":"white",
|
||||
"app-plus": {
|
||||
"bounce": "none" ,//关闭窗口回弹效果
|
||||
"softinputNavBar":"none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/register",
|
||||
"style": {
|
||||
"navigationBarTitleText": "注册账号",
|
||||
"navigationBarBackgroundColor":"#f06c7a",
|
||||
"navigationBarTextStyle":"white",
|
||||
"app-plus": {
|
||||
"bounce": "none" ,//关闭窗口回弹效果
|
||||
"softinputNavBar":"none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/resetpasswd",
|
||||
"style": {
|
||||
"navigationBarTitleText": "重置密码",
|
||||
"navigationBarBackgroundColor":"#f06c7a",
|
||||
"navigationBarTextStyle":"white",
|
||||
"app-plus": {
|
||||
"bounce": "none" ,//关闭窗口回弹效果
|
||||
"softinputNavBar":"none"
|
||||
}
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/order/confirmation",
|
||||
"style": {
|
||||
"navigationBarTitleText": "确认订单",
|
||||
"softinputNavBar":"none"
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/user/order_list/order_list",
|
||||
"style" : {
|
||||
"navigationBarTitleText":"我的订单",
|
||||
"navigationBarBackgroundColor":"#f8f8f8",
|
||||
"backgroundColorTop":"#f3f3f3",
|
||||
"backgroundColorBottom":"#ffffff"
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/user/setting/setting",
|
||||
"style" : {
|
||||
"navigationBarBackgroundColor":"#f8f8f8",
|
||||
"navigationBarTitleText":"我的设置",
|
||||
"backgroundColorTop":"#ffffff",
|
||||
"backgroundColorBottom":"#f3f3f3"
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/user/myQR/myQR",
|
||||
"style" : {
|
||||
"navigationBarTitleText":"我的二维码",
|
||||
"app-plus":{
|
||||
"bounce":"none"
|
||||
}
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/msg/msg",
|
||||
"style" : {
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTitleText": "消息列表",
|
||||
"navigationBarBackgroundColor":"#f06c7a",
|
||||
"navigationBarTextStyle":"white"
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/msg/chat/chat",
|
||||
"style" : {
|
||||
"navigationBarBackgroundColor":"#f2f2f2",
|
||||
"backgroundColorTop":"#e5e5e5",
|
||||
"backgroundColorBottom":"#e5e5e5",
|
||||
"app-plus":{
|
||||
"softinputNavBar":"none",
|
||||
"bounce":"none"
|
||||
}
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/user/coupon/coupon",
|
||||
"style" : {
|
||||
"navigationBarTitleText": "优惠券",
|
||||
"navigationBarBackgroundColor":"#f06c7a",
|
||||
"navigationBarTextStyle":"white",
|
||||
"app-plus":{
|
||||
"bounce":"none"
|
||||
}
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/user/keep/keep",
|
||||
"style" : {
|
||||
"navigationBarTitleText": "我的收藏",
|
||||
"navigationBarBackgroundColor":"#f06c7a",
|
||||
"navigationBarTextStyle":"white",
|
||||
"app-plus":{
|
||||
"bounce":"none"
|
||||
}
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/user/address/address",
|
||||
"style" : {
|
||||
"navigationBarBackgroundColor":"#ffffff",
|
||||
"navigationBarTitleText":"地址管理",
|
||||
"backgroundColorTop":"#ffffff",
|
||||
"backgroundColorBottom":"#ffffff"
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/user/address/edit/edit",
|
||||
"style" : {
|
||||
"navigationBarBackgroundColor":"#ffffff",
|
||||
"navigationBarTitleText":"编辑收件人地址",
|
||||
"backgroundColorTop":"#ffffff",
|
||||
"backgroundColorBottom":"#ffffff"
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/user/deposit/deposit",
|
||||
"style" : {
|
||||
"navigationBarBackgroundColor":"#ffffff",
|
||||
"navigationBarTitleText":"充值",
|
||||
"backgroundColorTop":"#ffffff",
|
||||
"backgroundColorBottom":"#ffffff"
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/pay/payment/payment",
|
||||
"style" : {
|
||||
"navigationBarBackgroundColor":"#ffffff",
|
||||
"navigationBarTitleText":"订单支付",
|
||||
"backgroundColorTop":"#ffffff",
|
||||
"backgroundColorBottom":"#ffffff"
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/pay/success/success",
|
||||
"style" : {
|
||||
"navigationBarBackgroundColor":"#ffffff",
|
||||
"navigationBarTitleText":"支付成功",
|
||||
"backgroundColorTop":"#ffffff",
|
||||
"backgroundColorBottom":"#ffffff"
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/goods/ratings/ratings",
|
||||
"style" : {
|
||||
"navigationBarTitleText":"商品评论",
|
||||
"enablePullDownRefresh": true,
|
||||
"onReachBottomDistance":50,
|
||||
"backgroundColorTop":"#ffffff",
|
||||
"backgroundColorBottom":"#ffffff"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText" : "",
|
||||
"navigationBarBackgroundColor" : "#ffffff",
|
||||
"backgroundColor" : "#ffffff",
|
||||
"backgroundColorTop":"#ffffff",
|
||||
"backgroundColorBottom":"#ffffff"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#333333",
|
||||
"selectedColor": "#f06c7a",
|
||||
"borderStyle": "black",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [{
|
||||
"pagePath": "pages/tabBar/home/home",
|
||||
"iconPath": "static/img/tabBar/home.png",
|
||||
"selectedIconPath": "static/img/tabBar/home-on.png",
|
||||
"text": "首页"
|
||||
},
|
||||
// {
|
||||
// "pagePath": "pages/tabBar/category/category",
|
||||
// "iconPath": "static/img/tabBar/category.png",
|
||||
// "selectedIconPath": "static/img/tabBar/category-on.png",
|
||||
// "text": "分类"
|
||||
// },
|
||||
{
|
||||
"pagePath": "pages/tabBar/cart/cart",
|
||||
"iconPath": "static/img/tabBar/cart.png",
|
||||
"selectedIconPath": "static/img/tabBar/cart-on.png",
|
||||
"text": "购物车"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/tabBar/user/user",
|
||||
"iconPath": "static/img/tabBar/user.png",
|
||||
"selectedIconPath": "static/img/tabBar/user-on.png",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<header>
|
||||
<div class="header">
|
||||
<div class="target" v-for="(target, index) in orderbyList" :key="index" @click="select(index)" :class="[target.selected ? 'target-on' : 'target-on1']">
|
||||
<text class="target-text" :class="[target.selected ? 'target-text-on' : '']">{{ target.text }}</text>
|
||||
<text v-if="target.orderbyicon" class="target-icon" :class="[target.selected ? 'target-text-on' : '']">{{ target.orderbyicon[target.orderby] }}</text>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="place"></div>
|
||||
<waterfall class="goods-list" column-count="2" column-width="auto">
|
||||
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
|
||||
<text class="refresh-indicator-text">{{ refreshText }}</text>
|
||||
<loading-indicator class="refresh-indicator"></loading-indicator>
|
||||
</refresh>
|
||||
<cell v-for="goods in goodsList" :key="goods.goods_id">
|
||||
<view class="product" @tap="toGoods(goods)">
|
||||
<image class="product-image" mode="widthFix" :src="goods.img"></image>
|
||||
<text class="product-name">{{ goods.name }}</text>
|
||||
<view class="product-info">
|
||||
<text class="product-info-price">{{ goods.price }}</text>
|
||||
<text class="product-info-slogan">{{ goods.slogan }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</cell>
|
||||
<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
|
||||
<text class="loading-indicator-text">{{loadingText}}</text>
|
||||
<loading-indicator class="loading-indicator"></loading-indicator>
|
||||
</loading>
|
||||
</waterfall>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
refreshText: '下拉刷新',
|
||||
refreshing: false,
|
||||
loadinging: false,
|
||||
loadingText:'上拉加载',
|
||||
orderbyList: [
|
||||
{ text: '销量', selected: true, orderbyicon: false, orderby: 0 },
|
||||
{ text: '价格', selected: false, orderbyicon: ['\ue737', '\ue736'], orderby: 0 },
|
||||
{ text: '好评', selected: false, orderbyicon: false, orderby: 0 }
|
||||
],
|
||||
goodsList: [
|
||||
{
|
||||
goods_id: 0,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1JC1fe.CF3KVjSZJnq6znHFXaG.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '￥168',
|
||||
slogan: '1235人付款'
|
||||
},
|
||||
{
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1GSqoeWWs3KVjSZFxq6yWUXXav.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '￥168',
|
||||
slogan: '1235人付款'
|
||||
},
|
||||
{
|
||||
goods_id: 2,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB16wepeW5s3KVjSZFNq6AD3FXaJ.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '￥168',
|
||||
slogan: '1235人付款'
|
||||
},
|
||||
{
|
||||
goods_id: 3,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1duHtcfBj_uVjSZFpq6A0SXXaJ.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '￥168',
|
||||
slogan: '1235人付款'
|
||||
},
|
||||
{
|
||||
goods_id: 4,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB173epeW5s3KVjSZFNq6AD3FXai.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '￥168',
|
||||
slogan: '1235人付款'
|
||||
},
|
||||
{
|
||||
goods_id: 5,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1_Mefe3aH3KVjSZFjq6AFWpXaJ.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '￥168',
|
||||
slogan: '1235人付款'
|
||||
},
|
||||
{
|
||||
goods_id: 6,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1Lu1pe8Cw3KVjSZFuq6AAOpXaI.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '￥168',
|
||||
slogan: '1235人付款'
|
||||
},
|
||||
{
|
||||
goods_id: 7,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1iMife3aH3KVjSZFjq6AFWpXaA.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '￥168',
|
||||
slogan: '1235人付款'
|
||||
},
|
||||
{
|
||||
goods_id: 8,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1D6Sfe4iH3KVjSZPfq6xBiVXaG.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '￥168',
|
||||
slogan: '1235人付款'
|
||||
},
|
||||
{
|
||||
goods_id: 9,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1IjSfe4iH3KVjSZPfq6xBiVXa4.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '￥168',
|
||||
slogan: '1235人付款'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
beforeCreate() {
|
||||
const domModule = weex.requireModule('dom');
|
||||
domModule.addRule('fontFace', {
|
||||
fontFamily: 'iconfont',
|
||||
src: "url('https://at.alicdn.com/t/font_1087442_fe5vigfwr5m.ttf')"
|
||||
});
|
||||
},
|
||||
mounted(){
|
||||
// nvue页面下，关闭下拉刷新，用waterfall实现下拉和上拉刷新。
|
||||
const currentWebview = getCurrentPages()[getCurrentPages().length - 1].$getAppWebview();
|
||||
currentWebview.setStyle({
|
||||
pullToRefresh: {
|
||||
support: false
|
||||
},
|
||||
});
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.setTitle();
|
||||
},
|
||||
setTitle() {
|
||||
//设置标题
|
||||
let catName = uni.getStorageSync('catName');
|
||||
console.log('catName: ' + catName);
|
||||
uni.setNavigationBarTitle({
|
||||
title: catName
|
||||
});
|
||||
},
|
||||
select(index) {
|
||||
let tmpTis = this.orderbyList[index].text + '排序 ';
|
||||
if (this.orderbyList[index].orderbyicon) {
|
||||
let type = this.orderbyList[index].orderby == 0 ? '升序' : '降序';
|
||||
if (this.orderbyList[index].selected) {
|
||||
type = this.orderbyList[index].orderby == 0 ? '降序' : '升序';
|
||||
this.orderbyList[index].orderby = this.orderbyList[index].orderby == 0 ? 1 : 0;
|
||||
}
|
||||
tmpTis += type;
|
||||
}
|
||||
this.orderbyList[index].selected = true;
|
||||
let len = this.orderbyList.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
if (i != index) {
|
||||
this.orderbyList[i].selected = false;
|
||||
}
|
||||
}
|
||||
uni.showToast({ title: tmpTis, icon: 'none' });
|
||||
},
|
||||
onrefresh(event) {
|
||||
this.refreshText = '正在刷新';
|
||||
this.refreshing = true;
|
||||
setTimeout(() => {
|
||||
this.refreshText = '下载刷新';
|
||||
this.refreshing = false;
|
||||
}, 2000);
|
||||
},
|
||||
onpullingdown(event) {
|
||||
if (event.pullingDistance <= -200) {
|
||||
this.refreshText = '放开刷新';
|
||||
}
|
||||
},
|
||||
onloading(event) {
|
||||
this.loadinging = true;
|
||||
setTimeout(() => {
|
||||
let len = this.goodsList.length;
|
||||
if(len>=40){
|
||||
uni.showToast({title:'没有更多了',icon:'none'});
|
||||
this.loadinging = false;
|
||||
return false;
|
||||
}else{
|
||||
this.loadingText="正在加载...";
|
||||
}
|
||||
let tmpList = JSON.parse(JSON.stringify(this.goodsList));
|
||||
let end_goods_id = this.goodsList[len-1].goods_id;
|
||||
for(let i=1;i<=10;i++){
|
||||
let row = tmpList[i-1];
|
||||
row.goods_id = end_goods_id+i;
|
||||
this.goodsList.push(row);
|
||||
}
|
||||
this.loadinging = false;
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.header {
|
||||
width: 750px;
|
||||
height: 79px;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
background-color: #fff;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
.target {
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: -2px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.target-on {
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #f06c7a;
|
||||
}
|
||||
.target-text {
|
||||
color: #aaa;
|
||||
font-size: 30px;
|
||||
}
|
||||
.target-text-on,
|
||||
.target-icon-on {
|
||||
color: #555;
|
||||
font-weight: 600;
|
||||
}
|
||||
.target-icon {
|
||||
color: #aaa;
|
||||
font-family: iconfont;
|
||||
}
|
||||
.place {
|
||||
background-color: #ffffff;
|
||||
height: 80px;
|
||||
}
|
||||
.goods-list {
|
||||
width: 750px;
|
||||
padding: 0 30px 30px 30px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.product {
|
||||
width: 335px;
|
||||
border-radius: 20px;
|
||||
background-color: #fff;
|
||||
margin: 20px 0 0 0;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.product-image {
|
||||
width: 335px;
|
||||
height: 335px;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
.product-name {
|
||||
width: 335px;
|
||||
padding: 10px 13px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
font-size: 30px;
|
||||
}
|
||||
.product-info {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
width: 335px%;
|
||||
padding: 10px 13px;
|
||||
}
|
||||
.product-info-price {
|
||||
color: #e65339;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.product-info-slogan {
|
||||
color: #807c87;
|
||||
font-size: 24px;
|
||||
}
|
||||
.refresh {
|
||||
width: 690;
|
||||
height: 150;
|
||||
margin-top: -50;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.refresh-indicator-text {
|
||||
color: #888888;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.refresh-indicator {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
color: #000;
|
||||
}
|
||||
.loading {
|
||||
width: 690;
|
||||
height: 120;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.loading-indicator-text {
|
||||
color: #888888;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.loading-indicator {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="header" :style="{position:headerPosition,top:headerTop}">
|
||||
<view class="target" v-for="(target,index) in orderbyList" @tap="select(index)" :key="index" :class="[target.selected?'on':'']">
|
||||
{{target.text}}
|
||||
<view v-if="target.orderbyicon" class="icon" :class="target.orderbyicon[target.orderby]"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<view class="place"></view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="goods-list">
|
||||
<view class="product-list">
|
||||
<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods)">
|
||||
<image mode="widthFix" :src="goods.img"></image>
|
||||
<view class="name">{{goods.name}}</view>
|
||||
<view class="info">
|
||||
<view class="price">{{goods.price}}</view>
|
||||
<view class="slogan">{{goods.slogan}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="loading-text">{{loadingText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsList:[
|
||||
{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||||
{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||||
{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||||
{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||||
{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||||
{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||||
{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||||
{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||||
{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
|
||||
{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' }
|
||||
],
|
||||
loadingText:"正在加载...",
|
||||
headerTop:"0px",
|
||||
headerPosition:"fixed",
|
||||
orderbyList:[
|
||||
{text:"销量",selected:true,orderbyicon:false,orderby:0},
|
||||
{text:"价格",selected:false,orderbyicon:['sheng','jiang'],orderby:0},
|
||||
{text:"好评",selected:false,orderbyicon:false,orderby:0}
|
||||
],
|
||||
orderby:"sheng"
|
||||
};
|
||||
},
|
||||
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
|
||||
console.log(option.cid); //打印出上个页面传递的参数。
|
||||
uni.setNavigationBarTitle({
|
||||
title: option.name
|
||||
});
|
||||
|
||||
//兼容H5下排序栏位置
|
||||
// #ifdef H5
|
||||
//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
|
||||
let Timer = setInterval(()=>{
|
||||
let uniHead = document.getElementsByTagName('uni-page-head');
|
||||
if(uniHead.length>0){
|
||||
this.headerTop = uniHead[0].offsetHeight+'px';
|
||||
clearInterval(Timer);//清除定时器
|
||||
}
|
||||
},1);
|
||||
// #endif
|
||||
},
|
||||
onPageScroll(e){
|
||||
//兼容iOS端下拉时顶部漂移
|
||||
if(e.scrollTop>=0){
|
||||
this.headerPosition = "fixed";
|
||||
}else{
|
||||
this.headerPosition = "absolute";
|
||||
}
|
||||
},
|
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||||
onPullDownRefresh() {
|
||||
setTimeout(()=>{
|
||||
this.reload();
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
|
||||
onReachBottom(){
|
||||
uni.showToast({title: '触发上拉加载'});
|
||||
let len = this.goodsList.length;
|
||||
if(len>=40){
|
||||
this.loadingText="到底了";
|
||||
return false;
|
||||
}else{
|
||||
this.loadingText="正在加载...";
|
||||
}
|
||||
let end_goods_id = this.goodsList[len-1].goods_id;
|
||||
for(let i=1;i<=10;i++){
|
||||
let goods_id = end_goods_id+i;
|
||||
let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' };
|
||||
this.goodsList.push(p);
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
reload(){
|
||||
console.log("reload");
|
||||
let tmpArr = []
|
||||
this.goodsList = [];
|
||||
let end_goods_id = 0;
|
||||
for(let i=1;i<=10;i++){
|
||||
let goods_id = end_goods_id+i;
|
||||
let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' };
|
||||
this.goodsList.push(p);
|
||||
}
|
||||
},
|
||||
//商品跳转
|
||||
toGoods(e){
|
||||
uni.showToast({title: '商品'+e.goods_id,icon:"none"});
|
||||
uni.navigateTo({
|
||||
url: '../goods'
|
||||
});
|
||||
},
|
||||
//排序类型
|
||||
select(index){
|
||||
let tmpTis = this.orderbyList[index].text+"排序 "
|
||||
if(this.orderbyList[index].orderbyicon){
|
||||
let type = this.orderbyList[index].orderby==0?'升序':'降序';
|
||||
if(this.orderbyList[index].selected){
|
||||
type = this.orderbyList[index].orderby==0?'降序':'升序';
|
||||
this.orderbyList[index].orderby = this.orderbyList[index].orderby==0?1:0;
|
||||
}
|
||||
tmpTis+=type
|
||||
}
|
||||
this.orderbyList[index].selected = true;
|
||||
let len = this.orderbyList.length;
|
||||
for(let i=0;i<len;i++){
|
||||
if(i!=index){
|
||||
this.orderbyList[i].selected = false;
|
||||
}
|
||||
}
|
||||
uni.showToast({title:tmpTis,icon:"none"});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.icon {
|
||||
font-size:26upx;
|
||||
}
|
||||
.header{
|
||||
width: 92%;
|
||||
padding: 0 4%;
|
||||
height: 79upx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
border-bottom: solid 1upx #eee;
|
||||
.target{
|
||||
width: 20%;
|
||||
height: 60upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
margin-bottom: -2upx;
|
||||
color: #aaa;
|
||||
&.on{
|
||||
color: #555;
|
||||
border-bottom: 4upx solid #f06c7a;
|
||||
font-weight: 600;
|
||||
font-size: 30upx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.place{
|
||||
|
||||
background-color: #ffffff;
|
||||
height: 100upx;
|
||||
|
||||
}
|
||||
.goods-list{
|
||||
.loading-text{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60upx;
|
||||
color: #979797;
|
||||
font-size: 24upx;
|
||||
}
|
||||
.product-list{
|
||||
width: 92%;
|
||||
padding: 0 4% 3vw 4%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.product{
|
||||
width: 48%;
|
||||
border-radius: 20upx;
|
||||
background-color: #fff;
|
||||
margin: 0 0 15upx 0;
|
||||
box-shadow: 0upx 5upx 25upx rgba(0,0,0,0.1);
|
||||
image{
|
||||
width: 100%;
|
||||
border-radius: 20upx 20upx 0 0;
|
||||
}
|
||||
.name{
|
||||
width: 92%;
|
||||
padding: 10upx 4%;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-align: justify;
|
||||
overflow: hidden;
|
||||
font-size: 30upx;
|
||||
}
|
||||
.info{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
width: 92%;
|
||||
padding: 10upx 4% 10upx 4%;
|
||||
|
||||
.price{
|
||||
color: #e65339;
|
||||
font-size: 30upx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.slogan{
|
||||
color: #807c87;
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,388 @@
|
|||
<template>
|
||||
<view>
|
||||
<video id="myVideo" class="myVideo" :src="videoSrc" v-show="isPlayVideo" :show-fullscreen-btn="showFullscreenBtn" :direction="videoDirection" :show-play-btn="showPlayBtn" @pause="videoPause" @fullscreenchange="viderFullscreen">
|
||||
<cover-image class="stopPlayVideoBtn" @click="stopPlayVideo" src="/static/img/close.png"></cover-image>
|
||||
</video>
|
||||
<view class="content">
|
||||
|
||||
<view class="label">
|
||||
<view v-for="(label,index) in labelList" :class="{'on':index==labelIndex}" @tap="loadRatings(index)" :key="label.type">
|
||||
{{label.name}}({{label.number}})
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="row" v-for="(row,Rindex) in ratingsList" :key="Rindex">
|
||||
<view class="left">
|
||||
<view class="face">
|
||||
<image :src="row.face"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="name-date">
|
||||
<view class="username">
|
||||
{{row.username}}
|
||||
</view>
|
||||
<view class="date">
|
||||
{{row.date}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="spec">
|
||||
{{row.spec}}
|
||||
</view>
|
||||
<view class="first">
|
||||
<view class="rat">
|
||||
{{row.first.content}}
|
||||
</view>
|
||||
<view class="img-video">
|
||||
<view class="box" v-for="item in row.first.video" @tap="playVideo(item.path)" :key="item.path">
|
||||
<image mode="aspectFill" :src="item.img"></image>
|
||||
<view class="playbtn">
|
||||
<view class="icon bofang"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box" v-for="item in row.first.img" @tap="showBigImg(item,row.first.img)" :key="item">
|
||||
<image mode="aspectFill" :src="item"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="append" v-if="row.append">
|
||||
<view class="date">
|
||||
{{row.append.date}}天后追加
|
||||
</view>
|
||||
<view class="rat">
|
||||
{{row.append.content}}
|
||||
</view>
|
||||
<view class="img-video">
|
||||
<view class="box" v-for="item in row.append.video" @tap="playVideo(item.path)" :key="item.path">
|
||||
<image mode="aspectFill" :src="item.img"></image>
|
||||
<view class="playbtn">
|
||||
<view class="icon bofang"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box" v-for="item in row.append.img" @tap="showBigImg(item,row.append.img)" :key="item">
|
||||
<image mode="aspectFill" :src="item"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
labelList:[
|
||||
{name:'全部',number:25,type:'all'},
|
||||
{name:'好评',number:23,type:'good'},
|
||||
{name:'中评',number:1,type:'secondary'},
|
||||
{name:'差评',number:1,type:'poor'},
|
||||
{name:'有图',number:12,type:'img'},
|
||||
{name:'视频',number:2,type:'video'},
|
||||
{name:'追加',number:2,type:'append'}
|
||||
],
|
||||
labelIndex:0,
|
||||
ratingsList:[
|
||||
{id:1,username:"大黑哥",face:"/static/img/face.jpg",date:'2019-04-21',spec:"规格: XL",grade:"good",
|
||||
first:{content:"好看，可以，不愧是专业的，才拿到手上就研究了半天才装上",
|
||||
img:["https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg","https://ae01.alicdn.com/kf/HTB1sL7hTjDpK1RjSZFrq6y78VXaw.jpg","https://ae01.alicdn.com/kf/HTB111soTbvpK1RjSZPiq6zmwXXaB.jpg","https://ae01.alicdn.com/kf/HTB1O2TRTmzqK1RjSZPcq6zTepXa4.jpg"],
|
||||
video:[{img:"https://ae01.alicdn.com/kf/HTB1AMEBTcfpK1RjSZFOq6y6nFXaK.jpg",path:"https://mp4.vjshi.com/2018-12-28/1083f3db90334f86e3fc3586b4472914.mp4"}]
|
||||
},
|
||||
append:{date:65,content:"用了一段时间，质量很好，体验很流畅，推荐购买",
|
||||
img:["https://ae01.alicdn.com/kf/HTB1dKZtTgHqK1RjSZFEq6AGMXXaS.jpg","https://ae01.alicdn.com/kf/HTB18h3oTmzqK1RjSZFjq6zlCFXap.jpg"],
|
||||
video:[{img:"https://ae01.alicdn.com/kf/HTB1AMEBTcfpK1RjSZFOq6y6nFXaK.jpg",path:"https://mp4.vjshi.com/2017-06-17/ed1d63669bea39f5ef078c4e194291d6.mp4"}]
|
||||
}
|
||||
},
|
||||
{id:2,username:"小黑狗",face:"/static/img/face.jpg",date:'2019-04-21',spec:"规格: XL",grade:"secondary",
|
||||
first:{content:"好评，看图",
|
||||
img:["https://ae01.alicdn.com/kf/HTB111soTbvpK1RjSZPiq6zmwXXaB.jpg","https://ae01.alicdn.com/kf/HTB1O2TRTmzqK1RjSZPcq6zTepXa4.jpg"],
|
||||
video:[]
|
||||
}
|
||||
},
|
||||
{id:3,username:"小黑狗",face:"/static/img/face.jpg",date:'2019-04-21',spec:"规格: XL",grade:"poor",
|
||||
first:{content:"好评，看图",
|
||||
img:["https://ae01.alicdn.com/kf/HTB111soTbvpK1RjSZPiq6zmwXXaB.jpg","https://ae01.alicdn.com/kf/HTB1O2TRTmzqK1RjSZPcq6zTepXa4.jpg"],
|
||||
video:[]
|
||||
}
|
||||
},
|
||||
{id:3,username:"小黑狗",face:"/static/img/face.jpg",date:'2019-04-21',spec:"规格: XL",grade:"secondary",
|
||||
first:{content:"系统默认好评",
|
||||
img:[],
|
||||
video:[]
|
||||
}
|
||||
}
|
||||
],
|
||||
videoDirection:0,
|
||||
showFullscreenBtn:true,
|
||||
showPlayBtn:true,
|
||||
isPlayVideo:true,
|
||||
videoSrc:''
|
||||
|
||||
};
|
||||
},
|
||||
onReady: function (res) {
|
||||
this.videoContext = uni.createVideoContext('myVideo')
|
||||
},
|
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||||
onPullDownRefresh() {
|
||||
setTimeout(function() {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
|
||||
onReachBottom() {
|
||||
uni.showToast({ title: '触发上拉加载' });
|
||||
},
|
||||
methods: {
|
||||
loadRatings(index){
|
||||
this.labelIndex = index;
|
||||
uni.showToast({
|
||||
title:"切换评论列表"
|
||||
})
|
||||
//实际应用中，请求对应类型的评论列表，覆盖this.ratingsList
|
||||
/*
|
||||
let type = this.labelList[index].type; // 评论类型
|
||||
......
|
||||
*/
|
||||
},
|
||||
playVideo(path) {
|
||||
this.videoSrc = path;
|
||||
// this.isPlayVideo = true;
|
||||
this.$nextTick(function() {
|
||||
this.videoContext.requestFullScreen({direction:0});
|
||||
});
|
||||
|
||||
},
|
||||
stopPlayVideo(){
|
||||
this.videoContext.pause();
|
||||
},
|
||||
videoPause(){
|
||||
// this.isPlayVideo = false;
|
||||
this.videoSrc = '';
|
||||
},
|
||||
viderFullscreen(e){
|
||||
if(e.detail.fullScreen){
|
||||
this.videoContext.play();
|
||||
}else{
|
||||
this.stopPlayVideo();
|
||||
}
|
||||
},
|
||||
showBigImg(src,srclist){
|
||||
uni.previewImage({
|
||||
current:src,
|
||||
urls: srclist
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.myVideo{
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
}
|
||||
.content{
|
||||
view{
|
||||
display: flex;
|
||||
}
|
||||
width: 94%;
|
||||
padding: 0 3%;
|
||||
|
||||
.label{
|
||||
width: 100%;
|
||||
flex-wrap:wrap;
|
||||
view{
|
||||
padding: 0 20upx;
|
||||
height: 50upx;
|
||||
border-radius: 40upx;
|
||||
border:solid 1upx #ddd;
|
||||
align-items: center;
|
||||
color: #555;
|
||||
font-size: 26upx;
|
||||
background-color: #f9f9f9;
|
||||
margin: 10upx 20upx 10upx 0;
|
||||
&.on{
|
||||
border:solid 1upx #f06c7a;
|
||||
color: #f06c7a;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
padding: 20upx 0;
|
||||
.row{
|
||||
width: 100%;
|
||||
margin-top: 30upx;
|
||||
.left{
|
||||
width: 10vw;
|
||||
flex-shrink: 0;
|
||||
margin-right: 10upx;
|
||||
.face{
|
||||
width: 100%;
|
||||
image{
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
.name-date{
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
.username{
|
||||
font-size: 32upx;
|
||||
color: #555;
|
||||
}
|
||||
.date{
|
||||
font-size:28upx;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
.spec{
|
||||
width: 100%;
|
||||
color: #aaa;
|
||||
font-size: 26upx;
|
||||
}
|
||||
.first{
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
.rat{
|
||||
font-size: 30upx;
|
||||
}
|
||||
.img-video{
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
.box{
|
||||
width: calc((84.6vw - 50upx)/4);
|
||||
height: calc((84.6vw - 50upx)/4);
|
||||
margin: 5upx 5upx;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
image{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
.playbtn{
|
||||
position: absolute;
|
||||
.icon{
|
||||
font-size: 80upx;
|
||||
color: rgba(255,255,255,.9)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.append{
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
.date{
|
||||
width: 100%;
|
||||
height: 40upx;
|
||||
border-left: 10upx solid #f06c7a;
|
||||
padding-left: 10upx;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
margin: 20upx 0;
|
||||
}
|
||||
.rat{
|
||||
font-size: 30upx;
|
||||
}
|
||||
.img-video{
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
.box{
|
||||
width: calc((84.6vw - 10upx - (10upx * 4))/4);
|
||||
height: calc((84.6vw - 10upx - (10upx * 4))/4);
|
||||
margin: 5upx 5upx;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
image{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
.playbtn{
|
||||
position: absolute;
|
||||
.icon{
|
||||
font-size: 80upx;
|
||||
color: rgba(255,255,255,.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
* <view class="list">
|
||||
<view class="row">
|
||||
|
||||
<view class="right">
|
||||
|
||||
<view class="spec">
|
||||
规格：XL
|
||||
</view>
|
||||
<view class="first">
|
||||
<view class="rat">
|
||||
好看，可以，不愧是专业的，才拿到手上就研究了半天才装上
|
||||
</view>
|
||||
<view class="img-video">
|
||||
<view class="box">
|
||||
<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
|
||||
<view class="playbtn">
|
||||
<view class="icon bofang"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box">
|
||||
<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
|
||||
</view>
|
||||
<view class="box">
|
||||
<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="append">
|
||||
<view class="date">
|
||||
65天后追加
|
||||
</view>
|
||||
<view class="rat">
|
||||
好看，可以，不愧是专业的，才拿到手上就研究了半天才装上
|
||||
</view>
|
||||
<view class="img-video">
|
||||
<view class="box">
|
||||
<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
|
||||
</view>
|
||||
<view class="box">
|
||||
<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
*
|
||||
* */
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,782 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="content" @touchstart="hideEmoji">
|
||||
<scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView">
|
||||
<view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.id">
|
||||
<!-- 自己发出的消息 -->
|
||||
<view class="my" v-if="row.uid==myuid">
|
||||
<view class="left">
|
||||
<view v-if="row.type=='text'" class="bubble">
|
||||
<rich-text :nodes="row.msg.content"></rich-text>
|
||||
</view>
|
||||
<view v-if="row.type=='voice'" class="bubble voice" @tap="playVoice(row)" :class="playMsgid == row.id?'play':''">
|
||||
<view class="length">{{row.msg.length}}</view>
|
||||
<view class="icon my-voice"></view>
|
||||
</view>
|
||||
<view v-if="row.type=='img'" class="bubble img" @tap="showPic(row)">
|
||||
<image :src="row.msg.url" :style="{'width': row.msg.w+'px','height': row.msg.h+'px'}"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<image :src="row.face"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 别人发出的消息 -->
|
||||
<view class="other" v-if="row.uid!=myuid">
|
||||
<view class="left">
|
||||
<image :src="row.face"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="username">
|
||||
<view class="name">{{row.username}}</view> <view class="time">{{row.time}}</view>
|
||||
</view>
|
||||
<view v-if="row.type=='text'" class="bubble">
|
||||
<rich-text :nodes="row.msg.content"></rich-text>
|
||||
</view>
|
||||
<view v-if="row.type=='voice'" class="bubble voice" @tap="playVoice(row)" :class="playMsgid == row.id?'play':''">
|
||||
<view class="icon other-voice"></view>
|
||||
<view class="length">{{row.msg.length}}</view>
|
||||
</view>
|
||||
<view v-if="row.type=='img'" class="bubble img" @tap="showPic(row)">
|
||||
<image :src="row.msg.url" :style="{'width': row.msg.w+'px','height': row.msg.h+'px'}"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 表情栏 -->
|
||||
<view class="emoji-box" :class="showEmji" @touchmove.stop.prevent="discard">
|
||||
<swiper class="swiper" indicator-dots="true" duration="150">
|
||||
<swiper-item v-for="(page,pid) in emojiList" :key="pid">
|
||||
<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
|
||||
<image mode="widthFix" :src="'/static/img/emoji/'+em.url"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 底部输入栏 -->
|
||||
<view class="input-box" :class="showEmji" @touchmove.stop.prevent="discard">
|
||||
<!-- H5下不能录音，输入栏布局改动一下 -->
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="voice">
|
||||
<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="more" @tap="chooseImage">
|
||||
<view class="icon tupian"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="textbox">
|
||||
<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
|
||||
<view class="text-mode" :class="isVoice?'hidden':''">
|
||||
<view class="box">
|
||||
<textarea auto-height="true" v-model="textMsg" id="textMsg" />
|
||||
</view>
|
||||
<view class="em" @tap="chooseEmoji">
|
||||
<view class="icon biaoqing"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="more" @tap="chooseImage">
|
||||
<view class="icon tupian"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<label for="textMsg">
|
||||
<view class="send" :class="isVoice?'hidden':''" @tap="sendText">
|
||||
<view class="btn">
|
||||
发送
|
||||
</view>
|
||||
</view>
|
||||
</label>
|
||||
</view>
|
||||
<!-- 录音效果(上滑取消) -->
|
||||
<view class="record" :class="recording?'':'hidden'">
|
||||
<view class="ing" :class="willStop?'hidden':''"><view class="icon luyin2" ></view></view>
|
||||
<view class="cancel" :class="willStop?'':'hidden'"><view class="icon chehui" ></view></view>
|
||||
<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//文字消息
|
||||
|
||||
textMsg:'',
|
||||
//消息列表
|
||||
scrollAnimation:false,
|
||||
scrollTop:0,
|
||||
scrollToView:'',
|
||||
msgList:[],
|
||||
msgImgList:[],
|
||||
myuid:0,
|
||||
//录音相关参数
|
||||
// #ifndef H5
|
||||
//H5不能录音
|
||||
RECORDER:uni.getRecorderManager(),
|
||||
// #endif
|
||||
isVoice:false,
|
||||
voiceTis:'按住 说话',
|
||||
recordTis:"手指上滑 取消发送",
|
||||
recording:false,
|
||||
willStop:false,
|
||||
initPoint:{identifier:0,Y:0},
|
||||
recordTimer:null,
|
||||
recordLength:0,
|
||||
//播放语音相关参数
|
||||
AUDIO:uni.createInnerAudioContext(),
|
||||
playMsgid:null,
|
||||
VoiceTimer:null,
|
||||
//表情定义
|
||||
showEmji:'',
|
||||
emojiList:[
|
||||
[{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
|
||||
[{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
|
||||
[{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
|
||||
[{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
|
||||
[{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]
|
||||
],
|
||||
//表情图片图床名称
|
||||
onlineEmoji:{"100.gif":"AbNQgA.gif","101.gif":"AbN3ut.gif","102.gif":"AbNM3d.gif","103.gif":"AbN8DP.gif","104.gif":"AbNljI.gif","105.gif":"AbNtUS.gif","106.gif":"AbNGHf.gif","107.gif":"AbNYE8.gif","108.gif":"AbNaCQ.gif","109.gif":"AbNN4g.gif","110.gif":"AbN0vn.gif","111.gif":"AbNd3j.gif","112.gif":"AbNsbV.gif","113.gif":"AbNwgs.gif","114.gif":"AbNrD0.gif","115.gif":"AbNDuq.gif","116.gif":"AbNg5F.gif","117.gif":"AbN6ET.gif","118.gif":"AbNcUU.gif","119.gif":"AbNRC4.gif","120.gif":"AbNhvR.gif","121.gif":"AbNf29.gif","122.gif":"AbNW8J.gif","123.gif":"AbNob6.gif","124.gif":"AbN5K1.gif","125.gif":"AbNHUO.gif","126.gif":"AbNIDx.gif","127.gif":"AbN7VK.gif","128.gif":"AbNb5D.gif","129.gif":"AbNX2d.gif","130.gif":"AbNLPe.gif","131.gif":"AbNjxA.gif","132.gif":"AbNO8H.gif","133.gif":"AbNxKI.gif","134.gif":"AbNzrt.gif","135.gif":"AbU9Vf.gif","136.gif":"AbUSqP.gif","137.gif":"AbUCa8.gif","138.gif":"AbUkGQ.gif","139.gif":"AbUFPg.gif","140.gif":"AbUPIS.gif","141.gif":"AbUZMn.gif","142.gif":"AbUExs.gif","143.gif":"AbUA2j.gif","144.gif":"AbUMIU.gif","145.gif":"AbUerq.gif","146.gif":"AbUKaT.gif","147.gif":"AbUmq0.gif","148.gif":"AbUuZV.gif","149.gif":"AbUliF.gif","150.gif":"AbU1G4.gif","151.gif":"AbU8z9.gif","152.gif":"AbU3RJ.gif","153.gif":"AbUYs1.gif","154.gif":"AbUJMR.gif","155.gif":"AbUadK.gif","156.gif":"AbUtqx.gif","157.gif":"AbUUZ6.gif","158.gif":"AbUBJe.gif","159.gif":"AbUdIO.gif","160.gif":"AbU0iD.gif","161.gif":"AbUrzd.gif","162.gif":"AbUDRH.gif","163.gif":"AbUyQA.gif","164.gif":"AbUWo8.gif","165.gif":"AbU6sI.gif","166.gif":"AbU2eP.gif","167.gif":"AbUcLt.gif","168.gif":"AbU4Jg.gif","169.gif":"AbURdf.gif","170.gif":"AbUhFS.gif","171.gif":"AbU5WQ.gif","172.gif":"AbULwV.gif","173.gif":"AbUIzj.gif","174.gif":"AbUTQs.gif","175.gif":"AbU7yn.gif","176.gif":"AbUqe0.gif","177.gif":"AbUHLq.gif","178.gif":"AbUOoT.gif","179.gif":"AbUvYF.gif","180.gif":"AbUjFU.gif","181.gif":"AbaSSJ.gif","182.gif":"AbUxW4.gif","183.gif":"AbaCO1.gif","184.gif":"Abapl9.gif","185.gif":"Aba9yR.gif","186.gif":"AbaFw6.gif","187.gif":"Abaiex.gif","188.gif":"AbakTK.gif","189.gif":"AbaZfe.png","190.gif":"AbaEFO.gif","191.gif":"AbaVYD.gif","192.gif":"AbamSH.gif","193.gif":"AbaKOI.gif","194.gif":"Abanld.gif","195.gif":"Abau6A.gif","196.gif":"AbaQmt.gif","197.gif":"Abal0P.gif","198.gif":"AbatpQ.gif","199.gif":"Aba1Tf.gif","200.png":"Aba8k8.png","201.png":"AbaGtS.png","202.png":"AbaJfg.png","203.png":"AbaNlj.png","204.png":"Abawmq.png","205.png":"AbaU6s.png","206.png":"AbaaXn.png","207.png":"Aba000.png","208.png":"AbarkT.png","209.png":"AbastU.png","210.png":"AbaB7V.png","211.png":"Abafn1.png","212.png":"Abacp4.png","213.png":"AbayhF.png","214.png":"Abag1J.png","215.png":"Aba2c9.png","216.png":"AbaRXR.png","217.png":"Aba476.png","218.png":"Abah0x.png","219.png":"Abdg58.png"}
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: option.name
|
||||
});
|
||||
this.getMsgList();
|
||||
//语音自然播放结束
|
||||
this.AUDIO.onEnded((res)=>{
|
||||
this.playMsgid=null;
|
||||
});
|
||||
// #ifndef H5
|
||||
//录音开始事件
|
||||
this.RECORDER.onStart((e)=>{
|
||||
this.recordBegin(e);
|
||||
})
|
||||
//录音结束事件
|
||||
this.RECORDER.onStop((e)=>{
|
||||
this.recordEnd(e);
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
methods:{
|
||||
getMsgList(){
|
||||
// 消息列表
|
||||
let list = [
|
||||
{id:0,uid:0,username:"大黑哥",face:"/static/img/face.jpg",time:"12:56",type:"text",msg:{content:"为什么温度会相差那么大？"}},
|
||||
{id:1,uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg",time:"12:57",type:"text",msg:{content:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}},
|
||||
{id:2,uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg",time:"12:59",type:"voice",msg:{url:"/static/voice/3.aac",length:"00:06"}},
|
||||
{id:3,uid:0,username:"大黑哥",face:"/static/img/face.jpg",time:"13:05",type:"voice",msg:{url:"/static/voice/2.mp3",length:"00:06"}},
|
||||
{id:4,uid:0,username:"大黑哥",face:"/static/img/face.jpg",time:"13:05",type:"img",msg:{url:"/static/img/goods/p10.jpg",w:200,h:200}},
|
||||
{id:5,uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg",time:"12:59",type:"img",msg:{url:"/static/img/q.jpg",w:1920,h:1080}}
|
||||
]
|
||||
// 获取消息中的图片,并处理显示尺寸
|
||||
for(let i=0;i<list.length;i++){
|
||||
if(list[i].type=='img'){
|
||||
list[i] = this.setPicSize(list[i]);
|
||||
console.log("list[i]: " + JSON.stringify(list[i]));
|
||||
this.msgImgList.push(list[i].msg.url);
|
||||
}
|
||||
}
|
||||
this.msgList = list;
|
||||
// 滚动到底部
|
||||
this.$nextTick(function() {
|
||||
this.scrollTop = 9999;
|
||||
this.scrollAnimation = true;
|
||||
});
|
||||
},
|
||||
//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
|
||||
setPicSize(row){
|
||||
let maxW = uni.upx2px(350);
|
||||
let maxH = uni.upx2px(350);
|
||||
if(row.msg.w>maxW||row.msg.h>maxH){
|
||||
let scale = row.msg.w/row.msg.h;
|
||||
if(row.msg.w>row.msg.h){
|
||||
row.msg.w = maxW;
|
||||
row.msg.h = row.msg.w/scale
|
||||
}else{
|
||||
row.msg.h = maxH;
|
||||
row.msg.w = row.msg.h*scale;
|
||||
}
|
||||
}
|
||||
return row;
|
||||
},
|
||||
// 接受消息(筛选处理)
|
||||
screenMsg(msg){
|
||||
//从长连接处转发给这个方法，进行筛选处理
|
||||
if(msg.uid!=this.myuid){
|
||||
uni.vibrateLong();
|
||||
}
|
||||
switch (msg.type){
|
||||
case 'text':
|
||||
this.addTextMsg(msg);
|
||||
break;
|
||||
case 'voice':
|
||||
this.addVoiceMsg(msg);
|
||||
break;
|
||||
case 'img':
|
||||
this.addImgMsg(msg);
|
||||
break;
|
||||
}
|
||||
this.$nextTick(function() {
|
||||
this.scrollToView = 'msg'+msg.id
|
||||
});
|
||||
},
|
||||
// 选择表情
|
||||
chooseEmoji(){
|
||||
this.showEmji = this.showEmji=='showEmoji'?'hideEmoji':'showEmoji';
|
||||
},
|
||||
// 隐藏表情
|
||||
hideEmoji(){
|
||||
this.showEmji = this.showEmji=='showEmoji'?'hideEmoji':'';
|
||||
},
|
||||
//添加表情
|
||||
addEmoji(em){
|
||||
this.textMsg+=em.alt;
|
||||
},
|
||||
// 发送文字消息
|
||||
sendText(){
|
||||
this.hideEmoji();
|
||||
if(!this.textMsg){
|
||||
return;
|
||||
}
|
||||
let content = this.replaceEmoji(this.textMsg);
|
||||
let msg = {content:content}
|
||||
this.sendMsg(msg,'text');
|
||||
this.textMsg = '';
|
||||
},
|
||||
//替换表情符号为图片
|
||||
replaceEmoji(str){
|
||||
let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g,(item, index)=>{
|
||||
console.log("item: " + item);
|
||||
for(let i=0;i<this.emojiList.length;i++){
|
||||
let row = this.emojiList[i];
|
||||
for(let j=0;j<row.length;j++){
|
||||
let EM = row[j];
|
||||
if(EM.alt==item){
|
||||
//在线表情路径，图文混排必须使用网络路径
|
||||
let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
|
||||
let imgstr = '<img src="'+onlinePath+this.onlineEmoji[EM.url]+'">';
|
||||
console.log("imgstr: " + imgstr);
|
||||
return imgstr;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return '<div style="display: flex;align-items: center;">'+replacedStr+'</div>';
|
||||
},
|
||||
// 选择图片发送
|
||||
chooseImage(){
|
||||
this.hideEmoji();
|
||||
uni.chooseImage({
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
success: (res)=>{
|
||||
for(let i=0;i<res.tempFilePaths.length;i++){
|
||||
uni.getImageInfo({
|
||||
src: res.tempFilePaths[i],
|
||||
success: (image)=>{
|
||||
console.log(image.width);
|
||||
console.log(image.height);
|
||||
let msg = {url:res.tempFilePaths[i],w:image.width,h:image.height};
|
||||
this.sendMsg(msg,'img');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 发送消息
|
||||
sendMsg(content,type){
|
||||
//实际应用中，此处应该提交长连接，模板仅做本地处理。
|
||||
var nowDate = new Date();
|
||||
let lastid = this.msgList[this.msgList.length-1].id;
|
||||
lastid++;
|
||||
let msg = {id:lastid,uid:0,username:"大黑哥",face:"/static/img/face.jpg",time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,msg:content};
|
||||
this.screenMsg(msg);
|
||||
// 定时器模拟对方回复,三秒
|
||||
setTimeout(()=>{
|
||||
lastid = this.msgList[this.msgList.length-1].id;
|
||||
lastid++;
|
||||
msg = {id:lastid,uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg",time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,msg:content};
|
||||
this.screenMsg(msg);
|
||||
},3000)
|
||||
},
|
||||
|
||||
// 处理文字消息
|
||||
addTextMsg(msg){
|
||||
this.msgList.push(msg);
|
||||
},
|
||||
// 处理语音消息
|
||||
addVoiceMsg(msg){
|
||||
this.msgList.push(msg);
|
||||
},
|
||||
// 处理图片消息
|
||||
addImgMsg(msg){
|
||||
msg = this.setPicSize(msg);
|
||||
this.msgImgList.push(msg.msg.url);
|
||||
this.msgList.push(msg);
|
||||
},
|
||||
// 预览图片
|
||||
showPic(row){
|
||||
uni.previewImage({
|
||||
indicator:"none",
|
||||
current:row.msg.url,
|
||||
urls: this.msgImgList
|
||||
});
|
||||
},
|
||||
// 播放语音
|
||||
playVoice(msg){
|
||||
this.playMsgid=msg.id;
|
||||
this.AUDIO.src = msg.msg.url;
|
||||
console.log("msg.msg.url: " + msg.msg.url);
|
||||
this.AUDIO.play();
|
||||
},
|
||||
// 录音开始
|
||||
voiceBegin(e){
|
||||
if(e.touches.length>1){
|
||||
return ;
|
||||
}
|
||||
this.initPoint.Y = e.touches[0].clientY;
|
||||
this.initPoint.identifier = e.touches[0].identifier;
|
||||
this.RECORDER.start({format:"aac"});//录音开始,
|
||||
},
|
||||
//录音开始UI效果
|
||||
recordBegin(e){
|
||||
this.recording = true;
|
||||
this.voiceTis='松开 结束';
|
||||
this.recordLength = 0;
|
||||
this.recordTimer = setInterval(()=>{
|
||||
this.recordLength++;
|
||||
},1000)
|
||||
},
|
||||
// 录音被打断
|
||||
voiceCancel(){
|
||||
this.recording = false;
|
||||
this.voiceTis='按住 说话';
|
||||
this.recordTis = '手指上滑 取消发送'
|
||||
this.willStop = true;//不发送录音
|
||||
this.RECORDER.stop();//录音结束
|
||||
},
|
||||
// 录音中(判断是否触发上滑取消发送)
|
||||
voiceIng(e){
|
||||
if(!this.recording){
|
||||
return;
|
||||
}
|
||||
let touche = e.touches[0];
|
||||
//上滑一个导航栏的高度触发上滑取消发送
|
||||
if(this.initPoint.Y - touche.clientY>=uni.upx2px(100)){
|
||||
this.willStop = true;
|
||||
this.recordTis = '松开手指 取消发送'
|
||||
}else{
|
||||
this.willStop = false;
|
||||
this.recordTis = '手指上滑 取消发送'
|
||||
}
|
||||
},
|
||||
// 结束录音
|
||||
voiceEnd(e){
|
||||
if(!this.recording){
|
||||
return;
|
||||
}
|
||||
this.recording = false;
|
||||
this.voiceTis='按住 说话';
|
||||
this.recordTis = '手指上滑 取消发送'
|
||||
this.RECORDER.stop();//录音结束
|
||||
},
|
||||
|
||||
//录音结束(回调文件)
|
||||
recordEnd(e){
|
||||
clearInterval(this.recordTimer);
|
||||
if(!this.willStop){
|
||||
plus.io.resolveLocalFileSystemURL( e.tempFilePath, function( entry ) {
|
||||
// 可通过entry对象操作test.html文件
|
||||
entry.file( function(file){
|
||||
console.log(file.size + '--' + file.name);
|
||||
} );
|
||||
}, function ( e ) {
|
||||
alert( "Resolve file URL failed: " + e.message );
|
||||
} );
|
||||
console.log("e: " + JSON.stringify(e));
|
||||
let msg = {
|
||||
length:0,
|
||||
url:e.tempFilePath
|
||||
}
|
||||
let min = parseInt(this.recordLength/60);
|
||||
let sec = this.recordLength%60;
|
||||
min = min<10?'0'+min:min;
|
||||
sec = sec<10?'0'+sec:sec;
|
||||
msg.length = min+':'+sec;
|
||||
this.sendMsg(msg,'voice');
|
||||
}else{
|
||||
console.log('取消发送录音');
|
||||
}
|
||||
this.willStop = false;
|
||||
},
|
||||
// 切换语音/文字输入
|
||||
switchVoice(){
|
||||
this.hideEmoji();
|
||||
this.isVoice = this.isVoice?false:true;
|
||||
},
|
||||
discard(){
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size:56upx;
|
||||
color: #333;
|
||||
}
|
||||
.hidden{
|
||||
display: none !important;
|
||||
}
|
||||
@keyframes showEM {
|
||||
0% {transform: translateY(0);}
|
||||
100% {transform: translateY(-42vw);}
|
||||
}
|
||||
@keyframes hideEM {
|
||||
0% {transform: translateY(-42vw);}
|
||||
100% {transform: translateY(0);}
|
||||
}
|
||||
.emoji-box{
|
||||
&.hideEmoji{animation: hideEM .15s linear both;}
|
||||
&.showEmoji{animation: showEM .15s linear both;}
|
||||
width: 96%;
|
||||
height: 42vw;
|
||||
padding: 20upx 2%;
|
||||
background-color: #f3f3f3;
|
||||
border-top: solid 1upx #ddd;
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
top: 100%;
|
||||
.swiper{
|
||||
swiper-item{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
view{
|
||||
width: 12vw;
|
||||
height: 12vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
image{
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-box{
|
||||
&.hideEmoji{animation: hideEM .15s linear both;}
|
||||
&.showEmoji{animation: showEM .15s linear both;}
|
||||
width: 98%;
|
||||
min-height: 100upx;
|
||||
padding: 0 1%;
|
||||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
bottom: 0;
|
||||
.voice,.more{
|
||||
flex-shrink: 0;
|
||||
width: 90upx;
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.send{
|
||||
//H5发送按钮左边距
|
||||
/* #ifdef H5 */
|
||||
margin-left: 20upx;
|
||||
/* #endif */
|
||||
flex-shrink: 0;
|
||||
width: 100upx;
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.btn{
|
||||
width: 90upx;
|
||||
height: 56upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background:linear-gradient(to right,#f09b37,#eb632c);
|
||||
color: #fff;
|
||||
border-radius: 6upx;
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
.textbox{
|
||||
width: 100%;
|
||||
min-height: 70upx;
|
||||
margin-top: 15upx;
|
||||
.voice-mode{
|
||||
width: calc(100% - 2upx);
|
||||
height: 68upx;
|
||||
border-radius: 70upx;
|
||||
border:solid 1upx #cdcdcd;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
background-color: #fff;
|
||||
color: #555;
|
||||
&.recording{
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
}
|
||||
.text-mode{
|
||||
width: 100%;
|
||||
min-height: 70upx;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
border-radius: 40upx;
|
||||
.box{
|
||||
width: 100%;
|
||||
padding-left: 30upx;
|
||||
min-height: 70upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
textarea{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.em{
|
||||
flex-shrink: 0;
|
||||
width: 80upx;
|
||||
height: 70upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.record{
|
||||
width: 40vw;
|
||||
height: 40vw;
|
||||
position: fixed;
|
||||
top: 55%;
|
||||
left: 30%;
|
||||
background-color: rgba(0,0,0,.6);
|
||||
border-radius: 20upx;
|
||||
.ing{
|
||||
width: 100%;
|
||||
height: 30vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@keyframes volatility {
|
||||
0% {background-position: 0% 130%;}
|
||||
20% {background-position: 0% 150%;}
|
||||
30% {background-position: 0% 155%;}
|
||||
40% {background-position: 0% 150%;}
|
||||
50% {background-position: 0% 145%;}
|
||||
70% {background-position: 0% 150%;}
|
||||
80% {background-position: 0% 155%;}
|
||||
90% {background-position: 0% 140%;}
|
||||
100% {background-position: 0% 135%;}
|
||||
}
|
||||
.icon{
|
||||
background-image:linear-gradient(to bottom,#f09b37,#fff 50%);
|
||||
background-size:100% 200%;
|
||||
animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
|
||||
-webkit-background-clip:text;
|
||||
-webkit-text-fill-color:transparent;
|
||||
font-size: 150upx;
|
||||
color: #f09b37;
|
||||
}
|
||||
}
|
||||
.cancel{
|
||||
width: 100%;
|
||||
height: 30vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.icon{
|
||||
color: #fff;
|
||||
font-size: 150upx;
|
||||
}
|
||||
}
|
||||
.tis{
|
||||
width: 100%;
|
||||
height: 10vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 28upx;
|
||||
color: #fff;
|
||||
&.change{
|
||||
color: #f09b37;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
width: 100%;
|
||||
.msg-list{
|
||||
width: 96%;
|
||||
padding: 0 2%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 100upx;
|
||||
.row{
|
||||
&:first-child{
|
||||
margin-top: 20upx;
|
||||
}
|
||||
padding: 20upx 0;
|
||||
.my .left,.other .right{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.bubble{
|
||||
max-width: 70%;
|
||||
min-height: 50upx;
|
||||
border-radius: 10upx;
|
||||
padding: 15upx 20upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
word-break: break-word;
|
||||
&.img{
|
||||
background-color: transparent;
|
||||
padding:0;
|
||||
overflow: hidden;
|
||||
image{
|
||||
max-width: 350upx;
|
||||
max-height: 350upx;
|
||||
}
|
||||
}
|
||||
&.voice{
|
||||
.icon{
|
||||
font-size: 40upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.icon:after
|
||||
{
|
||||
content:" ";
|
||||
width: 53upx;
|
||||
height: 53upx;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.length{
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.my .right,.other .left{
|
||||
flex-shrink: 0;
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
image{
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
}
|
||||
.my{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.left{
|
||||
min-height: 80upx;
|
||||
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.bubble{
|
||||
background-color: #f06c7a;
|
||||
color: #fff;
|
||||
&.voice{
|
||||
.icon{
|
||||
color: #fff;
|
||||
}
|
||||
.length{
|
||||
margin-right: 20upx;
|
||||
}
|
||||
}
|
||||
&.play{
|
||||
@keyframes my-play {
|
||||
0% {
|
||||
transform: translateX(80%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
.icon:after
|
||||
{
|
||||
border-left: solid 10upx rgba(240,108,122,.5);
|
||||
animation: my-play 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
margin-left: 15upx;
|
||||
}
|
||||
}
|
||||
.other{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.left{
|
||||
margin-right: 15upx;
|
||||
}
|
||||
.right{
|
||||
flex-wrap: wrap;
|
||||
.username{
|
||||
width: 100%;
|
||||
height: 45upx;
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
display: flex;
|
||||
.name{
|
||||
margin-right: 50upx;
|
||||
}
|
||||
}
|
||||
.bubble{
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
&.voice{
|
||||
.icon{
|
||||
color: #333;
|
||||
|
||||
}
|
||||
.length{
|
||||
margin-left: 20upx;
|
||||
}
|
||||
}
|
||||
&.play{
|
||||
@keyframes other-play {
|
||||
0% {
|
||||
transform: translateX(-80%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
.icon:after
|
||||
{
|
||||
border-right: solid 10upx rgba(255,255,255,.8);
|
||||
|
||||
animation: other-play 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="chat-list">
|
||||
<view class="chat" v-for="(chat,index) in chatList" :key="index">
|
||||
<view class="row" @tap="toChat(chat)">
|
||||
<view class="left">
|
||||
<image :src="chat.face"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="top">
|
||||
<view class="username">{{chat.username}}</view>
|
||||
<view class="time">{{chat.time}}</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="msg">{{chat.msg}}</view>
|
||||
<view class="tis" v-if="chat.tisNum>0">{{chat.tisNum}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chatList:[
|
||||
{
|
||||
uid:1,
|
||||
username:"鲜果蔬专营店",
|
||||
face:"/static/img/im/face/face_1.jpg",
|
||||
time:"13:08",
|
||||
msg:"亲，20点前下单都是当天送达的",
|
||||
tisNum:1
|
||||
},
|
||||
{
|
||||
uid:2,
|
||||
username:"官店大欺客旗舰店",
|
||||
face:"/static/img/im/face/face_2.jpg",
|
||||
time:"13:05",
|
||||
msg:"问那么多干什么？不想买就滚~",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:3,
|
||||
username:"妙不可言",
|
||||
face:"/static/img/im/face/face_3.jpg",
|
||||
time:"12:15",
|
||||
msg:"推荐一个商品呗？",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:4,
|
||||
username:"茶叶专卖",
|
||||
face:"/static/img/im/face/face_4.jpg",
|
||||
time:"12:11",
|
||||
msg:"现在卖的都是未过青的茶哦",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:5,
|
||||
username:"likeKiss客服",
|
||||
face:"/static/img/im/face/face_5.jpg",
|
||||
time:"12:10",
|
||||
msg:"你好，发福建快递多久送到的？",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:6,
|
||||
username:"白开水",
|
||||
face:"/static/img/im/face/face_6.jpg",
|
||||
time:"12:10",
|
||||
msg:"在吗？",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:7,
|
||||
username:"衣帽间的叹息",
|
||||
face:"/static/img/im/face/face_7.jpg",
|
||||
time:"11:56",
|
||||
msg:"新品上市，欢迎选购",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:8,
|
||||
username:"景萧疏",
|
||||
face:"/static/img/im/face/face_8.jpg",
|
||||
time:"11:56",
|
||||
msg:"商品七天无理由退换的",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:9,
|
||||
username:"文宁先生",
|
||||
face:"/static/img/im/face/face_9.jpg",
|
||||
time:"12:15",
|
||||
msg:"星期天再发货的",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:10,
|
||||
username:"高端Chieh",
|
||||
face:"/static/img/im/face/face_10.jpg",
|
||||
time:"12:36",
|
||||
msg:"建议你直接先测量好尺码在选购的。",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:11,
|
||||
username:"mode旗舰店",
|
||||
face:"/static/img/im/face/face_11.jpg",
|
||||
time:"12:40",
|
||||
msg:"新品5折，还有大量优惠券。",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:12,
|
||||
username:"敏萘客服",
|
||||
face:"/static/img/im/face/face_12.jpg",
|
||||
time:"12:36",
|
||||
msg:"还没有用，等我明天早上试一下",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:13,
|
||||
username:"春天里的花",
|
||||
face:"/static/img/im/face/face_13.jpg",
|
||||
time:"12:36",
|
||||
msg:"适用于成年人的，小孩不适用的",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:14,
|
||||
username:"电脑外设专业户",
|
||||
face:"/static/img/im/face/face_13.jpg",
|
||||
time:"12:36",
|
||||
msg:"把上面的螺丝拆下来，把铁片撬开就能看见了",
|
||||
tisNum:0
|
||||
},
|
||||
{
|
||||
uid:15,
|
||||
username:"至善汽车用品",
|
||||
face:"/static/img/im/face/face_15.jpg",
|
||||
time:"12:36",
|
||||
msg:"这个产品是原车配件，完美装上的",
|
||||
tisNum:0
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||||
onPullDownRefresh() {
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
toChat(chat){
|
||||
uni.navigateTo({
|
||||
url:"chat/chat?name="+chat.username
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
.chat-list{
|
||||
width: 94%;
|
||||
padding: 0 3%;
|
||||
.chat{
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
padding: 20upx 0;
|
||||
border-bottom: solid 1upx #eaeaea;
|
||||
.row{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.left{
|
||||
flex-shrink:0;
|
||||
width: 100upx;
|
||||
height: 100upx;
|
||||
image{
|
||||
width: 100upx;
|
||||
height: 100upx;
|
||||
border-radius: 20upx;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex-shrink:1;
|
||||
width: 98%;
|
||||
padding-left: 2%;
|
||||
.top{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
.usernam{
|
||||
font-size: 26upx;
|
||||
}
|
||||
.time{
|
||||
font-size: 22upx;
|
||||
color: #bebebe;
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
width: 100%;
|
||||
height: 40upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.msg{
|
||||
font-size: 25upx;
|
||||
color: #777;
|
||||
}
|
||||
.tis{
|
||||
width: 35upx;
|
||||
height: 35upx;
|
||||
font-size: 22upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #eb4d3d;
|
||||
color: #fff;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,399 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 收货地址 -->
|
||||
<view class="addr" @tap="selectAddress">
|
||||
<view class="icon">
|
||||
<image src="../../static/img/addricon.png" mode=""></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="tel-name">
|
||||
<view class="name">
|
||||
{{recinfo.name}}
|
||||
</view>
|
||||
<view class="tel">
|
||||
{{recinfo.tel}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="addres">
|
||||
{{recinfo.address.region.label}}
|
||||
{{recinfo.address.detailed}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 购买商品列表 -->
|
||||
<view class="buy-list">
|
||||
<view class="row" v-for="(row,index) in buylist" :key="index">
|
||||
<view class="goods-info">
|
||||
<view class="img">
|
||||
<image :src="row.img"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="title">{{row.name}}</view>
|
||||
<view class="spec">选择{{row.spec}} 数量:{{row.number}}</view>
|
||||
<view class="price-number">
|
||||
<view class="price">￥{{row.price*row.number}}</view>
|
||||
<view class="number">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 提示-备注 -->
|
||||
<view class="order">
|
||||
<view class="row">
|
||||
<view class="left">
|
||||
积分 :
|
||||
</view>
|
||||
<view class="right">
|
||||
已扣除{{int}}积分抵扣{{deduction|toFixed}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="left">
|
||||
备注 :
|
||||
</view>
|
||||
<view class="right">
|
||||
<input placeholder="选填,备注内容" v-model="note" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 明细 -->
|
||||
<view class="detail">
|
||||
<view class="row">
|
||||
<view class="nominal">
|
||||
商品金额
|
||||
</view>
|
||||
<view class="content">
|
||||
￥{{goodsPrice|toFixed}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">
|
||||
运费
|
||||
</view>
|
||||
<view class="content">
|
||||
￥+{{freight|toFixed}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">
|
||||
积分抵扣
|
||||
</view>
|
||||
<view class="content">
|
||||
￥-{{deduction|toFixed}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="blck">
|
||||
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="settlement">
|
||||
<view class="sum">合计:<view class="money">￥{{sumPrice|toFixed}}</view></view>
|
||||
<view class="btn" @tap="toPay">提交订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
buylist:[], //订单列表
|
||||
goodsPrice:0.0, //商品合计价格
|
||||
sumPrice:0.0, //用户付款价格
|
||||
freight:12.00, //运费
|
||||
note:'', //备注
|
||||
int:1200, //抵扣积分
|
||||
deduction:0, //抵扣价格
|
||||
recinfo:{id:1,name:"大黑哥",head:"大",tel:"18816881688",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:true}
|
||||
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
//页面显示时，加载订单信息
|
||||
uni.getStorage({
|
||||
key:'buylist',
|
||||
success: (ret) => {
|
||||
this.buylist = ret.data;
|
||||
this.goodsPrice=0;
|
||||
//合计
|
||||
let len = this.buylist.length;
|
||||
for(let i=0;i<len;i++){
|
||||
this.goodsPrice = this.goodsPrice + (this.buylist[i].number*this.buylist[i].price);
|
||||
}
|
||||
this.deduction = this.int/100;
|
||||
this.sumPrice = this.goodsPrice-this.deduction+this.freight;
|
||||
}
|
||||
});
|
||||
uni.getStorage({
|
||||
key:'selectAddress',
|
||||
success: (e) => {
|
||||
this.recinfo = e.data;
|
||||
uni.removeStorage({
|
||||
key:'selectAddress'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
onBackPress() {
|
||||
//页面后退时候，清除订单信息
|
||||
this.clearOrder();
|
||||
},
|
||||
filters: {
|
||||
toFixed:function(x) {
|
||||
return parseFloat(x).toFixed(2);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearOrder(){
|
||||
uni.removeStorage({
|
||||
key: 'buylist',
|
||||
success: (res)=>{
|
||||
this.buylist = [];
|
||||
console.log('remove buylist success');
|
||||
}
|
||||
});
|
||||
},
|
||||
toPay(){
|
||||
//商品列表
|
||||
let paymentOrder = [];
|
||||
let goodsid=[];
|
||||
let len = this.buylist.length;
|
||||
for(let i=0;i<len;i++){
|
||||
paymentOrder.push(this.buylist[i]);
|
||||
goodsid.push(this.buylist[i].id);
|
||||
}
|
||||
if(paymentOrder.length==0){
|
||||
uni.showToast({title:'订单信息有误，请重新购买',icon:'none'});
|
||||
return ;
|
||||
}
|
||||
//本地模拟订单提交UI效果
|
||||
uni.showLoading({
|
||||
title:'正在提交订单...'
|
||||
})
|
||||
setTimeout(()=>{
|
||||
uni.setStorage({
|
||||
key:'paymentOrder',
|
||||
data:paymentOrder,
|
||||
success: () => {
|
||||
uni.hideLoading();
|
||||
uni.redirectTo({
|
||||
url:"../pay/payment/payment?amount="+this.sumPrice
|
||||
})
|
||||
}
|
||||
})
|
||||
},1000)
|
||||
|
||||
},
|
||||
//选择收货地址
|
||||
selectAddress(){
|
||||
uni.navigateTo({
|
||||
url:'../user/address/address?type=select'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.addr{
|
||||
width: 86%;
|
||||
padding: 20upx 3%;
|
||||
margin: 30upx auto 20upx auto;
|
||||
box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
|
||||
border-radius: 20upx;
|
||||
display: flex;
|
||||
.icon{
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
}
|
||||
}
|
||||
.tel-name{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-size: 32upx;
|
||||
.tel{
|
||||
margin-left: 40upx;
|
||||
}
|
||||
}
|
||||
.addres{
|
||||
width: 100%;
|
||||
font-size: 26upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.buy-list{
|
||||
width: 86%;
|
||||
padding: 10upx 3%;
|
||||
margin: 30upx auto 20upx auto;
|
||||
box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
|
||||
border-radius: 20upx;
|
||||
.row{
|
||||
margin: 30upx 0;
|
||||
.goods-info{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.img{
|
||||
width: 22vw;
|
||||
height: 22vw;
|
||||
border-radius: 10upx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
margin-right: 10upx;
|
||||
image{
|
||||
width: 22vw;
|
||||
height: 22vw;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
width: 100%;
|
||||
height: 22vw;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
.title{
|
||||
width: 100%;
|
||||
font-size: 28upx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
// text-align: justify;
|
||||
overflow: hidden;
|
||||
}
|
||||
.spec{
|
||||
font-size: 22upx;
|
||||
background-color: #f3f3f3;
|
||||
color: #a7a7a7;
|
||||
height: 40upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10upx;
|
||||
border-radius: 20upx;
|
||||
margin-bottom: 20vw;
|
||||
}
|
||||
.price-number{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
font-size: 28upx;
|
||||
height: 40upx;
|
||||
.price{
|
||||
color: #f06c7a;
|
||||
}
|
||||
.number{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order{
|
||||
width: 86%;
|
||||
padding: 10upx 3%;
|
||||
margin: 30upx auto 20upx auto;
|
||||
box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
|
||||
border-radius: 20upx;
|
||||
.row{
|
||||
margin: 20upx 0;
|
||||
height: 40upx;
|
||||
display: flex;
|
||||
.left{
|
||||
font-size: 28upx;
|
||||
}
|
||||
.right{
|
||||
margin-left: 40upx;
|
||||
font-size: 26upx;
|
||||
color: #999;
|
||||
input{
|
||||
font-size: 26upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.blck{
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
}
|
||||
.footer{
|
||||
width: 92%;
|
||||
padding: 0 4%;
|
||||
background-color: #fbfbfb;
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
position: fixed;
|
||||
bottom: 0upx;
|
||||
z-index: 5;
|
||||
|
||||
.settlement{
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.sum{
|
||||
width: 50%;
|
||||
font-size: 28upx;
|
||||
margin-right: 10upx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.money{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
padding: 0 30upx;
|
||||
height: 60upx;
|
||||
background-color: #f06c7a;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30upx;
|
||||
border-radius: 40upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
width: 86%;
|
||||
padding: 10upx 3%;
|
||||
margin: 30upx auto 20upx auto;
|
||||
box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
|
||||
border-radius: 20upx;
|
||||
.row{
|
||||
height: 60upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.nominal{
|
||||
font-size: 28upx;
|
||||
}
|
||||
.content{
|
||||
font-size: 26upx;
|
||||
color: #f06c7a;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="block">
|
||||
<view class="content">
|
||||
<view class="orderinfo">
|
||||
<view class="row">
|
||||
<view class="nominal">订单名称:</view><view class="text">{{orderName}}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">订单金额:</view><view class="text">{{amount}}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="block">
|
||||
<view class="title">
|
||||
选择支付方式
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="pay-list">
|
||||
<view class="row" @tap="paytype='alipay'">
|
||||
<view class="left">
|
||||
<image src="/static/img/alipay.png"></image>
|
||||
</view>
|
||||
<view class="center">
|
||||
支付宝支付
|
||||
</view>
|
||||
<view class="right">
|
||||
<radio :checked="paytype=='alipay'" color="#f06c7a" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="row" @tap="paytype='wxpay'">
|
||||
<view class="left">
|
||||
<image src="/static/img/wxpay.png"></image>
|
||||
</view>
|
||||
<view class="center">
|
||||
微信支付
|
||||
</view>
|
||||
<view class="right">
|
||||
<radio :checked="paytype=='wxpay'" color="#f06c7a" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay">
|
||||
<view class="btn" @tap="doDeposit">立即支付</view>
|
||||
<view class="tis">
|
||||
点击立即支付，即代表您同意<view class="terms">
|
||||
《条款协议》
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
amount:0,
|
||||
orderName:'',
|
||||
paytype:'alipay'//支付类型
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.amount = parseFloat(e.amount).toFixed(2);
|
||||
uni.getStorage({
|
||||
key:'paymentOrder',
|
||||
success: (e) => {
|
||||
if(e.data.length>1){
|
||||
this.orderName = '多商品合并支付'
|
||||
}else{
|
||||
this.orderName = e.data[0].name;
|
||||
}
|
||||
uni.removeStorage({
|
||||
key:'paymentOrder'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
doDeposit(){
|
||||
//模板模拟支付，实际应用请调起微信/支付宝
|
||||
uni.showLoading({
|
||||
title:'支付中...'
|
||||
});
|
||||
setTimeout(()=>{
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title:'支付成功'
|
||||
});
|
||||
setTimeout(()=>{
|
||||
uni.redirectTo({
|
||||
url:'../../pay/success/success?amount='+this.amount
|
||||
});
|
||||
},300);
|
||||
},700)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.block{
|
||||
width: 94%;
|
||||
padding: 0 3% 40upx 3%;
|
||||
.title{
|
||||
width: 100%;
|
||||
font-size: 34upx;
|
||||
}
|
||||
.content{
|
||||
.orderinfo{
|
||||
width: 100%;
|
||||
border-bottom: solid 1upx #eee;
|
||||
.row{
|
||||
width: 100%;
|
||||
height: 90upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nominal{
|
||||
flex-shrink: 0;
|
||||
font-size: 32upx;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
.text{
|
||||
width: 70%;
|
||||
margin-left: 10upx;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay-list{
|
||||
width: 100%;
|
||||
border-bottom: solid 1upx #eee;
|
||||
.row{
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left{
|
||||
width: 100upx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
}
|
||||
}
|
||||
.center{
|
||||
width: 100%;
|
||||
font-size: 30upx;
|
||||
}
|
||||
.right{
|
||||
width: 100upx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay{
|
||||
margin-top: 20upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.btn{
|
||||
width: 70%;
|
||||
height: 80upx;
|
||||
border-radius: 80upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
background-color: #f06c7a;
|
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.2);
|
||||
}
|
||||
.tis{
|
||||
margin-top: 10upx;
|
||||
width: 100%;
|
||||
font-size: 24upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
color: #999;
|
||||
.terms{
|
||||
color: #5a9ef7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="icon">
|
||||
<image src="/static/img/success.png"></image>
|
||||
</view>
|
||||
<view class="tis">
|
||||
订单支付成功
|
||||
</view>
|
||||
<view class="pay-amount">
|
||||
支付金额:{{amount}}元
|
||||
</view>
|
||||
<view class="back">
|
||||
<view class="btn" @tap="toUser">个人中心</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
amount:0
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.amount = parseFloat(e.amount).toFixed(2);
|
||||
},
|
||||
methods: {
|
||||
toUser() {
|
||||
uni.switchTab({
|
||||
url: '/pages/tabBar/user'
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
view{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.icon{
|
||||
width: 100%;
|
||||
margin-top: 10vw;
|
||||
image{
|
||||
width: 25vw;
|
||||
height: 25vw;
|
||||
}
|
||||
}
|
||||
.tis{
|
||||
width: 100%;
|
||||
margin-top: 20upx;
|
||||
font-size: 48upx;
|
||||
}
|
||||
.pay-amount{
|
||||
width: 100%;
|
||||
margin-top: 10upx;
|
||||
font-size: 32upx;
|
||||
}
|
||||
.back{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 80upx;
|
||||
.btn{
|
||||
padding: 0 50upx;
|
||||
height: 70upx;
|
||||
border: solid 2upx #f06c7a;
|
||||
color: #f06c7a;
|
||||
align-items: center;
|
||||
border-radius: 10upx;
|
||||
font-size: 34upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,582 @@
|
|||
<template>
|
||||
<view>
|
||||
<view v-if="showHeader" class="status" :style="{position:headerPosition,top:statusTop}"></view>
|
||||
<view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}">
|
||||
<view class="title">购物车</view>
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<view v-if="showHeader" class="place"></view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="goods-list">
|
||||
<view class="tis" v-if="goodsList.length==0">购物车是空的哦~</view>
|
||||
<view class="row" v-for="(row,index) in goodsList" :key="index" >
|
||||
<!-- 删除按钮 -->
|
||||
<view class="menu" @tap.stop="deleteGoods(row.id)">
|
||||
<view class="icon shanchu"></view>
|
||||
</view>
|
||||
<!-- 商品 -->
|
||||
<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
|
||||
<!-- checkbox -->
|
||||
<view class="checkbox-box" @tap="selected(index)">
|
||||
<view class="checkbox">
|
||||
<view :class="[row.selected?'on':'']"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品信息 -->
|
||||
<view class="goods-info" @tap="toGoods(row)">
|
||||
<view class="img">
|
||||
<image :src="row.img"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="title">{{row.name}}</view>
|
||||
<view class="spec">{{row.spec}}</view>
|
||||
<view class="price-number">
|
||||
<view class="price">￥{{row.price}}</view>
|
||||
<view class="number">
|
||||
<view class="sub" @tap.stop="sub(index)">
|
||||
<view class="icon jian"></view>
|
||||
</view>
|
||||
<view class="input" @tap.stop="discard">
|
||||
<input type="number" v-model="row.number" @input="sum($event,index)" />
|
||||
</view>
|
||||
<view class="add" @tap.stop="add(index)">
|
||||
<view class="icon jia"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 脚部菜单 -->
|
||||
<view class="footer" :style="{bottom:footerbottom}">
|
||||
<view class="checkbox-box" @tap="allSelect">
|
||||
<view class="checkbox">
|
||||
<view :class="[isAllselected?'on':'']"></view>
|
||||
</view>
|
||||
<view class="text">全选</view>
|
||||
</view>
|
||||
<view class="delBtn" @tap="deleteList" v-if="selectedList.length>0">删除</view>
|
||||
<view class="settlement">
|
||||
<view class="sum">合计:<view class="money">￥{{sumPrice}}</view></view>
|
||||
<view class="btn" @tap="toConfirmation">结算({{selectedList.length}})</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sumPrice:'0.00',
|
||||
headerPosition:"fixed",
|
||||
headerTop:null,
|
||||
statusTop:null,
|
||||
showHeader:true,
|
||||
selectedList:[],
|
||||
isAllselected:false,
|
||||
goodsList:[
|
||||
{id:1,img:'/static/img/goods/p1.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
|
||||
{id:2,img:'/static/img/goods/p2.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
|
||||
{id:3,img:'/static/img/goods/p3.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
|
||||
{id:4,img:'/static/img/goods/p4.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
|
||||
{id:5,img:'/static/img/goods/p5.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false}
|
||||
],
|
||||
//控制滑动效果
|
||||
theIndex:null,
|
||||
oldIndex:null,
|
||||
isStop:false
|
||||
}
|
||||
},
|
||||
onPageScroll(e){
|
||||
//兼容iOS端下拉时顶部漂移
|
||||
this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
|
||||
this.headerTop = e.scrollTop>=0?null:0;
|
||||
this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px';
|
||||
},
|
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||||
onPullDownRefresh() {
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
onLoad() {
|
||||
//兼容H5下结算条位置
|
||||
// #ifdef H5
|
||||
this.footerbottom = document.getElementsByTagName('uni-tabbar')[0].offsetHeight+'px';
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.showHeader = false;
|
||||
this.statusHeight = plus.navigator.getStatusbarHeight();
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
//加入商品 参数 goods:商品数据
|
||||
joinGoods(goods){
|
||||
/*
|
||||
* 这里只是展示一种添加逻辑，模板并没有做从其他页面加入商品到购物车的具体动作，
|
||||
* 在实际应用上，前端并不会直接插入记录到goodsList这一个动作，一般是更新列表和本地列表缓存。
|
||||
* 一般商城购物车的增删改动作是由后端来完成的,
|
||||
* 后端记录后返回前端更新前端缓存
|
||||
*/
|
||||
let len = this.goodsList.length;
|
||||
let isFind = false;//是否找到ID一样的商品
|
||||
for(let i=0;i<len;i++){
|
||||
let row = this.goodsList[i];
|
||||
if(row.id==goods.id )
|
||||
{ //找到商品一样的商品
|
||||
this.goodsList[i].number++;//数量自增
|
||||
isFind = true;//找到一样的商品
|
||||
break;//跳出循环
|
||||
}
|
||||
}
|
||||
if(!isFind){
|
||||
//没有找到一样的商品，新增一行到购物车商品列表头部
|
||||
this.goodsList[i].unshift(goods);
|
||||
}
|
||||
},
|
||||
//控制左滑删除效果-begin
|
||||
touchStart(index,event){
|
||||
//多点触控不触发
|
||||
if(event.touches.length>1){
|
||||
this.isStop = true;
|
||||
return ;
|
||||
}
|
||||
this.oldIndex = this.theIndex;
|
||||
this.theIndex = null;
|
||||
//初始坐标
|
||||
this.initXY = [event.touches[0].pageX,event.touches[0].pageY];
|
||||
},
|
||||
touchMove(index,event){
|
||||
//多点触控不触发
|
||||
if(event.touches.length>1){
|
||||
this.isStop = true;
|
||||
return ;
|
||||
}
|
||||
let moveX = event.touches[0].pageX - this.initXY[0];
|
||||
let moveY = event.touches[0].pageY - this.initXY[1];
|
||||
|
||||
if(this.isStop||Math.abs(moveX)<5){
|
||||
return ;
|
||||
}
|
||||
if (Math.abs(moveY) > Math.abs(moveX)){
|
||||
// 竖向滑动-不触发左滑效果
|
||||
this.isStop = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if(moveX<0){
|
||||
this.theIndex = index;
|
||||
this.isStop = true;
|
||||
}else if(moveX>0){
|
||||
if(this.theIndex!=null&&this.oldIndex==this.theIndex){
|
||||
this.oldIndex = index;
|
||||
this.theIndex = null;
|
||||
this.isStop = true;
|
||||
setTimeout(()=>{
|
||||
this.oldIndex = null;
|
||||
},150)
|
||||
}
|
||||
}
|
||||
},
|
||||
touchEnd(index,$event){
|
||||
//结束禁止触发效果
|
||||
this.isStop = false;
|
||||
},
|
||||
//控制左滑删除效果-end
|
||||
|
||||
|
||||
//商品跳转
|
||||
toGoods(e){
|
||||
uni.showToast({title: '商品'+e.id,icon:"none"});
|
||||
uni.navigateTo({
|
||||
url: '../../goods/goods'
|
||||
});
|
||||
},
|
||||
//跳转确认订单页面
|
||||
toConfirmation(){
|
||||
let tmpList=[];
|
||||
let len = this.goodsList.length;
|
||||
for(let i=0;i<len;i++){
|
||||
if(this.goodsList[i].selected) {
|
||||
tmpList.push(this.goodsList[i]);
|
||||
}
|
||||
}
|
||||
if(tmpList.length<1){
|
||||
uni.showToast({
|
||||
title:'请选择商品结算',
|
||||
icon:'none'
|
||||
});
|
||||
return ;
|
||||
}
|
||||
uni.setStorage({
|
||||
key:'buylist',
|
||||
data:tmpList,
|
||||
success: () => {
|
||||
uni.navigateTo({
|
||||
url:'../../order/confirmation'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
//删除商品
|
||||
deleteGoods(id){
|
||||
let len = this.goodsList.length;
|
||||
for(let i=0;i<len;i++){
|
||||
if(id==this.goodsList[i].id){
|
||||
this.goodsList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.selectedList.splice(this.selectedList.indexOf(id), 1);
|
||||
this.sum();
|
||||
this.oldIndex = null;
|
||||
this.theIndex = null;
|
||||
},
|
||||
// 删除商品s
|
||||
deleteList(){
|
||||
let len = this.selectedList.length;
|
||||
while (this.selectedList.length>0)
|
||||
{
|
||||
this.deleteGoods(this.selectedList[0]);
|
||||
}
|
||||
this.selectedList = [];
|
||||
this.isAllselected = this.selectedList.length == this.goodsList.length && this.goodsList.length>0;
|
||||
this.sum();
|
||||
},
|
||||
// 选中商品
|
||||
selected(index){
|
||||
this.goodsList[index].selected = this.goodsList[index].selected?false:true;
|
||||
let i = this.selectedList.indexOf(this.goodsList[index].id);
|
||||
i>-1?this.selectedList.splice(i, 1):this.selectedList.push(this.goodsList[index].id);
|
||||
this.isAllselected = this.selectedList.length == this.goodsList.length;
|
||||
this.sum();
|
||||
},
|
||||
//全选
|
||||
allSelect(){
|
||||
let len = this.goodsList.length;
|
||||
let arr = [];
|
||||
for(let i=0;i<len;i++){
|
||||
this.goodsList[i].selected = this.isAllselected? false : true;
|
||||
arr.push(this.goodsList[i].id);
|
||||
}
|
||||
this.selectedList = this.isAllselected?[]:arr;
|
||||
this.isAllselected = this.isAllselected||this.goodsList.length==0?false : true;
|
||||
this.sum();
|
||||
},
|
||||
// 减少数量
|
||||
sub(index){
|
||||
if(this.goodsList[index].number<=1){
|
||||
return;
|
||||
}
|
||||
this.goodsList[index].number--;
|
||||
this.sum();
|
||||
},
|
||||
// 增加数量
|
||||
add(index){
|
||||
this.goodsList[index].number++;
|
||||
this.sum();
|
||||
},
|
||||
// 合计
|
||||
sum(e,index){
|
||||
this.sumPrice=0;
|
||||
let len = this.goodsList.length;
|
||||
for(let i=0;i<len;i++){
|
||||
if(this.goodsList[i].selected) {
|
||||
if(e && i==index){
|
||||
this.sumPrice = this.sumPrice + (e.detail.value*this.goodsList[i].price);
|
||||
}else{
|
||||
this.sumPrice = this.sumPrice + (this.goodsList[i].number*this.goodsList[i].price);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.sumPrice = this.sumPrice.toFixed(2);
|
||||
},
|
||||
discard() {
|
||||
//丢弃
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page{position: relative;background-color: #fff;}
|
||||
.checkbox-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.checkbox{
|
||||
width: 35upx;
|
||||
height: 35upx;
|
||||
border-radius: 100%;
|
||||
border: solid 2upx #f06c7a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.on{
|
||||
width: 25upx;
|
||||
height: 25upx;
|
||||
border-radius: 100%;
|
||||
background-color: #f06c7a;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
font-size: 28upx;
|
||||
margin-left: 10upx;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
top: 0;
|
||||
/* #ifdef APP-PLUS */
|
||||
height: var(--status-bar-height);//覆盖样式
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.header{
|
||||
width: 92%;
|
||||
padding: 0 4%;
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
/* #ifdef APP-PLUS */
|
||||
top: var(--status-bar-height);
|
||||
/* #endif */
|
||||
.title{
|
||||
font-size: 36upx;
|
||||
}
|
||||
|
||||
}
|
||||
.place{
|
||||
|
||||
background-color: #ffffff;
|
||||
height: 100upx;
|
||||
/* #ifdef APP-PLUS */
|
||||
margin-top: var(--status-bar-height);
|
||||
/* #endif */
|
||||
}
|
||||
.goods-list{
|
||||
width: 100%;
|
||||
padding: 20upx 0 120upx 0;
|
||||
.tis{
|
||||
width: 100%;
|
||||
height: 60upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
}
|
||||
.row{
|
||||
width: calc(92%);
|
||||
height: calc(22vw + 40upx);
|
||||
margin: 20upx auto;
|
||||
|
||||
border-radius: 15upx;
|
||||
box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 4;
|
||||
border: 0;
|
||||
.menu{
|
||||
.icon{
|
||||
color: #fff;
|
||||
// font-size: 25upx;
|
||||
}
|
||||
position: absolute;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
.carrier{
|
||||
@keyframes showMenu {
|
||||
0% {transform: translateX(0);}100% {transform: translateX(-30%);}
|
||||
}
|
||||
@keyframes closeMenu {
|
||||
0% {transform: translateX(-30%);}100% {transform: translateX(0);}
|
||||
}
|
||||
&.open{
|
||||
animation: showMenu 0.25s linear both;
|
||||
}
|
||||
&.close{
|
||||
animation: closeMenu 0.15s linear both;
|
||||
}
|
||||
background-color: #fff;
|
||||
.checkbox-box{
|
||||
padding-left: 20upx;
|
||||
flex-shrink: 0;
|
||||
height: 22vw;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0 0;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.goods-info{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-right: 20upx;
|
||||
.img{
|
||||
width: 22vw;
|
||||
height: 22vw;
|
||||
border-radius: 10upx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
margin-right: 10upx;
|
||||
image{
|
||||
width: 22vw;
|
||||
height: 22vw;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
width: 100%;
|
||||
height: 22vw;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
.title{
|
||||
width: 100%;
|
||||
font-size: 28upx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
// text-align: justify;
|
||||
overflow: hidden;
|
||||
}
|
||||
.spec{
|
||||
font-size: 20upx;
|
||||
background-color: #f3f3f3;
|
||||
color: #a7a7a7;
|
||||
height: 30upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10upx;
|
||||
border-radius: 15upx;
|
||||
margin-bottom: 20vw;
|
||||
}
|
||||
.price-number{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
font-size: 28upx;
|
||||
height: 60upx;
|
||||
.price{
|
||||
}
|
||||
.number{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
.input{
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
margin: 0 10upx;
|
||||
background-color: #f3f3f3;
|
||||
input{
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 26upx;
|
||||
}
|
||||
}
|
||||
.sub ,.add{
|
||||
width: 45upx;
|
||||
height: 45upx;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 5upx;
|
||||
.icon{
|
||||
font-size: 22upx;
|
||||
width: 45upx;
|
||||
height: 45upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
width: 92%;
|
||||
padding: 0 4%;
|
||||
background-color: #fbfbfb;
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
position: fixed;
|
||||
bottom: 0upx;
|
||||
z-index: 5;
|
||||
.delBtn{
|
||||
border: solid 1upx #f06c7a;
|
||||
color: #f06c7a;
|
||||
padding: 0 30upx;
|
||||
height: 50upx;
|
||||
border-radius: 30upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.settlement{
|
||||
width: 60%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.sum{
|
||||
width: 50%;
|
||||
font-size: 28upx;
|
||||
margin-right: 10upx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.money{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
padding: 0 30upx;
|
||||
height: 50upx;
|
||||
background-color: #f06c7a;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 30upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div class="content" :style="{height:statusBarHeight+44+'wx'}">
|
||||
<div class="status-bar" :style="{height:statusBarHeight+'wx'}"></div>
|
||||
<div class="nav">
|
||||
<text class="title-text">购物车</text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:20
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
uni.getSystemInfo({
|
||||
success: (res)=>{
|
||||
this.statusBarHeight = res.statusBarHeight;
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.icon {
|
||||
font-family: iconfont;
|
||||
font-size: 42px;
|
||||
}
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
flex: 1;
|
||||
}
|
||||
.nav {
|
||||
width: 690px;
|
||||
margin-left: 30px;
|
||||
height: 88px;
|
||||
flex-direction: row;;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.title-text{
|
||||
font-size: 36upx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,524 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="header" :style="{ height: headerHeight + 'wx' }">
|
||||
<div class="status-bar" :style="{ height: statusBarHeight + 'wx' }"></div>
|
||||
<div class="nav">
|
||||
<text class="icon location">{{ iconLocation }}</text>
|
||||
<text class="location-city-text">{{ city }}</text>
|
||||
<div class="input-box">
|
||||
<input class="input-box-input" placeholder="默认关键字" @focus="inputfocus" />
|
||||
<text class="icon search">{{ iconSearch }}</text>
|
||||
</div>
|
||||
<text @click="toMsg" class="icon tongzhi">{{ iconTongzhi }}</text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-list" :style="{ top: headerHeight + 'wx' }">
|
||||
<list class="left" :show-scrollbar="false">
|
||||
<cell v-for="(row, index) in categoryList" :key="index" :ref="'tab' + index">
|
||||
<div class="left-row" :class="[index == showCategoryIndex ? 'left-row-on' : '']" @click="goToCategory($event, 'category' + index, index)">
|
||||
<div class="left-text">
|
||||
<div class="left-block" :class="[index == showCategoryIndex ? 'left-block-on' : '']"></div>
|
||||
<text class="left-text-text" :class="[index == showCategoryIndex ? 'left-text-on' : '']">{{ row.title }}</text>
|
||||
</div>
|
||||
</div>
|
||||
</cell>
|
||||
</list>
|
||||
|
||||
<list class="right">
|
||||
<template v-for="(row, index) in categoryList">
|
||||
<header :key="index">
|
||||
<div class="tab">
|
||||
<text class="category-title">{{ row.title }}</text>
|
||||
<text class="category-title-min">全场5折起，疯抢100元优惠券</text>
|
||||
</div>
|
||||
</header>
|
||||
<cell :ref="'category' + index" :key="index" @disappear="ondisappear($event, 'tab' + index, index)" @appear="onappear($event, 'tab' + index, index)">
|
||||
<div class="right-category">
|
||||
<div class="right-banner"><image class="right-banner-image" :src="row.banner"></image></div>
|
||||
<div class="right-list">
|
||||
<div class="right-box" v-for="(box, i) in row.list" :key="i" @click="toCategory(box)">
|
||||
<image class="right-box-image" :src="imglist[i]"></image>
|
||||
<text class="right-text">{{ box.name }}</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</cell>
|
||||
</template>
|
||||
</list>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const dom = weex.requireModule('dom') || {};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
city: '北京',
|
||||
subNVue: uni.getCurrentSubNVue(),
|
||||
iconSearch: '\ue628',
|
||||
iconLocation: '\ue611',
|
||||
iconTongzhi: '\ue729',
|
||||
headerHeight: 44,
|
||||
statusBarHeight: 0,
|
||||
showCategoryIndex: 0,
|
||||
stopAppear:false,
|
||||
//模板图片，使用模板时候应调用数据内数据
|
||||
imglist: [
|
||||
'https://ae01.alicdn.com/kf/HTB1Ns_ne.GF3KVjSZFmq6zqPXXaJ.jpg',
|
||||
'https://ae01.alicdn.com/kf/HTB1MzgAcfBj_uVjSZFpq6A0SXXaC.jpg',
|
||||
'https://ae01.alicdn.com/kf/HTB1ns_ne.GF3KVjSZFmq6zqPXXa6.jpg',
|
||||
'https://ae01.alicdn.com/kf/HTB1nRjte8Kw3KVjSZFOq6yrDVXaZ.jpg',
|
||||
'https://ae01.alicdn.com/kf/HTB1EBLweW5s3KVjSZFNq6AD3FXa9.jpg',
|
||||
'https://ae01.alicdn.com/kf/HTB1xYfSbMFY.1VjSZFnq6AFHXXaK.jpg',
|
||||
'https://ae01.alicdn.com/kf/HTB1jK2oe9SD3KVjSZFKq6z10VXap.jpg',
|
||||
'https://ae01.alicdn.com/kf/HTB1L0DweWWs3KVjSZFxq6yWUXXal.jpg',
|
||||
'https://ae01.alicdn.com/kf/HTB1Ak2qe8aE3KVjSZLeq6xsSFXan.jpg'
|
||||
],
|
||||
categoryList: [
|
||||
{
|
||||
id: 1,type:'A',
|
||||
title: '家用电器',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB10Xrqe.uF3KVjSZK9q6zVtXXaZ.jpg',
|
||||
list: [
|
||||
{ name: '冰箱' },
|
||||
{ name: '电视' },
|
||||
{ name: '空调' },
|
||||
{ name: '洗衣机' },
|
||||
{ name: '风扇' },
|
||||
{ name: '燃气灶' },
|
||||
{ name: '热水器' },
|
||||
{ name: '电吹风' },
|
||||
{ name: '电饭煲' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,type:'A',
|
||||
title: '办公用品',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1_Wjpe3mH3KVjSZKzq6z2OXXab.jpg',
|
||||
list: [{ name: '打印机' }, { name: '路由器' }, { name: '扫描仪' }, { name: '投影仪' }, { name: '墨盒' }, { name: '纸类' }]
|
||||
},
|
||||
{
|
||||
id: 3,type:'A',
|
||||
title: '日常用品',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1wr_se7WE3KVjSZSyq6xocXXa4.jpg',
|
||||
list: [{ name: '茶具' }, { name: '花瓶' }, { name: '纸巾' }, { name: '毛巾' }, { name: '牙膏' }, { name: '保鲜膜' }, { name: '保鲜袋' }]
|
||||
},
|
||||
{
|
||||
id: 4,type:'A',
|
||||
title: '蔬菜水果',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB17d_xe8Kw3KVjSZTEq6AuRpXaT.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 5,type:'A',
|
||||
title: '手机数码',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB10KDqe9SD3KVjSZFKq6z10VXaS.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 6,type:'A',
|
||||
title: '酒水饮料',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1ypjpe4iH3KVjSZPfq6xBiVXaw.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 7,type:'A',
|
||||
title: '母婴童装',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1zdPue9WD3KVjSZSgq6ACxVXaE.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 8,type:'A',
|
||||
title: '玩具乐器',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1Hn_se8GE3KVjSZFhq6AkaFXaj.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 9,type:'A',
|
||||
title: '医药保健',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1CiHpe3aH3KVjSZFjq6AFWpXaS.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 10,type:'A',
|
||||
title: '运动户外',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1f_2UbMFY.1VjSZFnq6AFHXXaK.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 11,type:'A',
|
||||
title: '汽车生活',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1kbHre9SD3KVjSZFKq6z10VXa9.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 12,type:'A',
|
||||
title: '家具厨具',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1hlPzeW5s3KVjSZFNq6AD3FXaK.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 13,type:'A',
|
||||
title: '生活旅行',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1CcPye8Kw3KVjSZTEq6AuRpXaQ.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 14,type:'A',
|
||||
title: '图书文娱',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1Eabte8GE3KVjSZFhq6AkaFXa3.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 14,type:'A',
|
||||
title: '礼品鲜花',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1Eabte8GE3KVjSZFhq6AkaFXa3.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 14,type:'A',
|
||||
title: '宠物盛会',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1Eabte8GE3KVjSZFhq6AkaFXa3.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 14,type:'A',
|
||||
title: '艺术邮币',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1Eabte8GE3KVjSZFhq6AkaFXa3.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 14,type:'A',
|
||||
title: '家居家装',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1Eabte8GE3KVjSZFhq6AkaFXa3.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
},
|
||||
{
|
||||
id: 14,type:'A',
|
||||
title: '食品生鲜',
|
||||
banner: 'https://ae01.alicdn.com/kf/HTB1Eabte8GE3KVjSZFhq6AkaFXa3.jpg',
|
||||
list: [{ name: '苹果' }, { name: '芒果' }, { name: '椰子' }, { name: '橙子' }, { name: '奇异果' }, { name: '玉米' }, { name: '百香果' }]
|
||||
}
|
||||
],
|
||||
timer:null
|
||||
};
|
||||
},
|
||||
beforeCreate() {
|
||||
const domModule = weex.requireModule('dom');
|
||||
domModule.addRule('fontFace', {
|
||||
fontFamily: 'iconfont',
|
||||
src: "url('https://at.alicdn.com/t/font_1087442_fe5vigfwr5m.ttf')"
|
||||
});
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
toMsg() {
|
||||
uni.navigateTo({
|
||||
url: '../../msg/msg'
|
||||
});
|
||||
},
|
||||
init() {
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
this.statusBarHeight = res.statusBarHeight;
|
||||
this.headerHeight += this.statusBarHeight;
|
||||
}
|
||||
});
|
||||
this.nVueTitle = uni.getCurrentSubNVue();
|
||||
this.nVueTitle.onMessage(res => {
|
||||
let type = res.data.type;
|
||||
switch (type) {
|
||||
case 'location':
|
||||
this.setCity(res.data.city);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
setCity(city) {
|
||||
this.city = city;
|
||||
},
|
||||
inputfocus() {
|
||||
this.subNVue.postMessage({
|
||||
type: 'focus'
|
||||
});
|
||||
},
|
||||
toCategory(e){
|
||||
uni.navigateTo({
|
||||
url: '../../goods/goods-list/goods-list?cid='+e.id+'&name='+e.name
|
||||
});
|
||||
},
|
||||
goToCategory(event, refId, index) {
|
||||
if(this.showCategoryIndex==index){return ;}
|
||||
clearTimeout(this.timer);
|
||||
this.stopAppear = true;
|
||||
this.showCategoryIndex = index;
|
||||
|
||||
const target = event.target;
|
||||
const ref = this.$refs[refId];
|
||||
this.leftScrollToElement(index,target);
|
||||
ref && dom.scrollToElement(ref[0], { offset: -69 });
|
||||
if(plus.os.name=='Android'){
|
||||
this.timer = setTimeout(()=>{
|
||||
this.stopAppear = false;
|
||||
},1000)
|
||||
}else{
|
||||
this.timer = setTimeout(()=>{
|
||||
this.stopAppear = false;
|
||||
},300)
|
||||
}
|
||||
},
|
||||
ondisappear($event,refId,index){
|
||||
if($event.direction=='up'){
|
||||
this.checkScroll($event.direction,refId,index);
|
||||
}
|
||||
},
|
||||
onappear($event,refId,index){
|
||||
if($event.direction=='down'){
|
||||
this.checkScroll($event.direction,refId,index);
|
||||
}
|
||||
},
|
||||
checkScroll(direction,refId,index){
|
||||
if(this.stopAppear){
|
||||
return false;
|
||||
}
|
||||
if(Math.abs(index - this.showCategoryIndex)>1&&plus.os.name=='iOS'){
|
||||
return ;
|
||||
}
|
||||
const ref = this.$refs[refId];
|
||||
this.leftScrollToElement(index,ref[0]);
|
||||
if(direction=='down'){
|
||||
this.showCategoryIndex = index;
|
||||
}
|
||||
if(direction=='up'){
|
||||
this.showCategoryIndex = parseInt(index)+1;
|
||||
}
|
||||
},
|
||||
leftScrollToElement(index,target){
|
||||
if(plus.os.name=='Android'){
|
||||
//安卓滚动的动画有回弹，左侧滚动体验不好，关闭动画
|
||||
index > 0 && dom.scrollToElement(target, { offset: -90 ,animated:false});
|
||||
}else{
|
||||
index > 0 && dom.scrollToElement(target, { offset: -90 });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.icon {
|
||||
font-family: iconfont;
|
||||
font-size: 42px;
|
||||
}
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header {
|
||||
width: 750px;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
.status-bar {
|
||||
width: 750px;
|
||||
}
|
||||
.nav {
|
||||
width: 750px;
|
||||
padding: 0 20px;
|
||||
/* margin-left: 20px; */
|
||||
position: relative;
|
||||
height: 88px;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.location,
|
||||
.tongzhi {
|
||||
width: 60px;
|
||||
height: 88px;
|
||||
text-align: center;
|
||||
line-height: 88px;
|
||||
}
|
||||
.location {
|
||||
left: 0px;
|
||||
color: #ffc50a;
|
||||
}
|
||||
.location-city-text {
|
||||
width: 60px;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
font-size: 26px;
|
||||
color: #000;
|
||||
}
|
||||
.tongzhi {
|
||||
right: 0px;
|
||||
color: #000;
|
||||
}
|
||||
.input-box {
|
||||
width: 525px;
|
||||
margin-left: 5px;
|
||||
height: 60upx;
|
||||
border-radius: 60px;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.input-box-input {
|
||||
width: 330px;
|
||||
height: 60px;
|
||||
font-size: 28px;
|
||||
margin-left: 30px;
|
||||
placeholder-color: #c0c0c0;
|
||||
}
|
||||
.search {
|
||||
width: 60px;
|
||||
font-size: 34px;
|
||||
padding-right: 30px;
|
||||
color: #c0c0c0;
|
||||
}
|
||||
.place {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.category-list {
|
||||
position: absolute;
|
||||
width: 750px;
|
||||
bottom: 0;
|
||||
}
|
||||
.left {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #f2f2f2;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.left-row {
|
||||
width: 180px;
|
||||
height: 90px;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.left-row-on {
|
||||
width: 180px;
|
||||
height: 90px;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
background-color: #fff;
|
||||
/* height: 100px; */
|
||||
}
|
||||
.left-text {
|
||||
width: 180px;
|
||||
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.left-text-text {
|
||||
text-align: center;
|
||||
font-size: 28upx;
|
||||
color: #3c3c3c;
|
||||
}
|
||||
.left-text-on {
|
||||
/* font-size: 30px; */
|
||||
font-weight: 600;
|
||||
color: #2d2d2d;
|
||||
}
|
||||
.left-block {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
width: 10px;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.left-block-on {
|
||||
|
||||
|
||||
background-color: #f06c7a;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
width: 570px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.tab {
|
||||
width: 570px;
|
||||
height: 70px;
|
||||
padding: 0 17px 10px 17px;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
background-color: #fff;
|
||||
}
|
||||
.category-title {
|
||||
font-size: 28px;
|
||||
color: #666;
|
||||
}
|
||||
.category-title-min {
|
||||
margin-left: 15px;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
.right-category {
|
||||
width: 570px;
|
||||
padding: 0 17px 20px 17px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.right-banner {
|
||||
width: 536px;
|
||||
height: 182px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.right-banner-image {
|
||||
width: 536px;
|
||||
height: 182px;
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
.right-list {
|
||||
margin-top: 40px;
|
||||
width: 536px;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.right-box {
|
||||
width: 178px;
|
||||
margin-bottom: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
.right-box-image {
|
||||
width: 106px;
|
||||
height: 106px;
|
||||
margin: 0 36px;
|
||||
}
|
||||
.right-text {
|
||||
margin-top: 5px;
|
||||
width: 178px;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<view class="status" :style="{position:headerPosition}"></view>
|
||||
<view class="header" :style="{position:headerPosition}">
|
||||
<view class="addr"><view class="icon location"></view>{{city}}</view>
|
||||
<view class="input-box">
|
||||
<input placeholder="默认关键字" placeholder-style="color:#c0c0c0;" @tap="toSearch()"/>
|
||||
<view class="icon search"></view>
|
||||
</view>
|
||||
<view class="icon-btn">
|
||||
<view class="icon tongzhi" @tap="toMsg"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<view class="place"></view>
|
||||
<view class="category-list">
|
||||
<!-- 左侧分类导航 -->
|
||||
<scroll-view scroll-y="true" class="left" >
|
||||
<view class="row" v-for="(category,index) in categoryList" :key="category.id" :class="[index==showCategoryIndex?'on':'']" @tap="showCategory(index)">
|
||||
<view class="text">
|
||||
<view class="block"></view>
|
||||
{{category.title}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<!-- 右侧子导航 -->
|
||||
<scroll-view scroll-y="true" class="right" >
|
||||
<view class="category" v-for="(category,index) in categoryList" :key="category.id" v-show="index==showCategoryIndex" >
|
||||
<view class="banner">
|
||||
<image :src="category.banner"></image>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="box" v-for="(box,i) in category.list" :key="i" @tap="toCategory(box)">
|
||||
<image :src="'/static/img/category/list/'+box.img"></image>
|
||||
<view class="text">{{box.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
//高德SDK
|
||||
import amap from '@/common/SDK/amap-wx.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showCategoryIndex:0,
|
||||
headerPosition:"fixed",
|
||||
city:"北京",
|
||||
//分类列表
|
||||
categoryList:[
|
||||
{id:1,title:'家用电器',banner:'/static/img/category/banner.jpg',list:[
|
||||
{name:'冰箱', img:'1.jpg'},
|
||||
{name:'电视', img:'2.jpg'},
|
||||
{name:'空调', img:'3.jpg'},
|
||||
{name:'洗衣机', img:'4.jpg'},
|
||||
{name:'风扇', img:'5.jpg'},
|
||||
{name:'燃气灶', img:'6.jpg'},
|
||||
{name:'热水器', img:'7.jpg'},
|
||||
{name:'电吹风', img:'8.jpg'},
|
||||
{name:'电饭煲', img:'9.jpg'}
|
||||
]},
|
||||
{id:2,title:'办公用品',banner:'/static/img/category/banner.jpg',list:[
|
||||
{name:'打印机', img:'1.jpg'},
|
||||
{name:'路由器', img:'2.jpg'},
|
||||
{name:'扫描仪', img:'3.jpg'},
|
||||
{name:'投影仪', img:'4.jpg'},
|
||||
{name:'墨盒', img:'5.jpg'},
|
||||
{name:'纸类', img:'6.jpg'}
|
||||
]},
|
||||
{id:3,title:'日常用品',banner:'/static/img/category/banner.jpg',list:[
|
||||
{name:'茶具', img:'1.jpg'},
|
||||
{name:'花瓶', img:'2.jpg'},
|
||||
{name:'纸巾', img:'3.jpg'},
|
||||
{name:'毛巾', img:'4.jpg'},
|
||||
{name:'牙膏', img:'5.jpg'},
|
||||
{name:'保鲜膜', img:'6.jpg'},
|
||||
{name:'保鲜袋', img:'7.jpg'}
|
||||
]},
|
||||
{id:4,title:'蔬菜水果',banner:'/static/img/category/banner.jpg',list:[
|
||||
{name:'苹果', img:'1.jpg'},
|
||||
{name:'芒果', img:'2.jpg'},
|
||||
{name:'椰子', img:'3.jpg'},
|
||||
{name:'橙子', img:'4.jpg'},
|
||||
{name:'奇异果', img:'5.jpg'},
|
||||
{name:'玉米', img:'6.jpg'},
|
||||
{name:'百香果', img:'7.jpg'}
|
||||
]},
|
||||
]
|
||||
}
|
||||
},
|
||||
onPageScroll(e){
|
||||
//兼容iOS端下拉时顶部漂移
|
||||
if(e.scrollTop>=0){
|
||||
this.headerPosition = "fixed";
|
||||
}else{
|
||||
this.headerPosition = "absolute";
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.amapPlugin = new amap.AMapWX({
|
||||
//高德地图KEY，随时失效，请务必替换为自己的KEY，参考：http://ask.dcloud.net.cn/article/35070
|
||||
key: '7c235a9ac4e25e482614c6b8eac6fd8e'
|
||||
});
|
||||
//定位地址
|
||||
this.amapPlugin.getRegeo({
|
||||
success: (data) => {
|
||||
this.city = data[0].regeocodeData.addressComponent.city.replace(/市/g,'');//把"市"去掉
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
//消息列表
|
||||
toMsg(){
|
||||
uni.navigateTo({
|
||||
url:'../../msg/msg'
|
||||
})
|
||||
},
|
||||
//分类切换显示
|
||||
showCategory(index){
|
||||
this.showCategoryIndex = index;
|
||||
},
|
||||
toCategory(e){
|
||||
uni.setStorageSync('catName',e.name);
|
||||
uni.navigateTo({
|
||||
url: '../../goods/goods-list/goods-list?cid='+e.id+'&name='+e.name
|
||||
});
|
||||
},
|
||||
//搜索跳转
|
||||
toSearch(){
|
||||
uni.showToast({title: "建议跳转到新页面做搜索功能"});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
.status {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
top: 0;
|
||||
/* #ifdef APP-PLUS */
|
||||
height: var(--status-bar-height);//覆盖样式
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
|
||||
.header{
|
||||
width: 92%;
|
||||
padding: 0 4%;
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
/* #ifdef APP-PLUS */
|
||||
top: var(--status-bar-height);
|
||||
/* #endif */
|
||||
|
||||
.addr{
|
||||
width: 120upx;
|
||||
height: 60upx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
.icon{
|
||||
height: 60upx;
|
||||
margin-right: 5upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 42upx;
|
||||
color: #ffc50a;
|
||||
}
|
||||
}
|
||||
.input-box{
|
||||
width: 100%;
|
||||
height: 60upx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 30upx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top:0;
|
||||
right: 0;
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
font-size: 34upx;
|
||||
color: #c0c0c0;
|
||||
}
|
||||
input{
|
||||
padding-left: 28upx;
|
||||
height: 28upx;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
.icon-btn{
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
.icon{
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-size: 42upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.place{
|
||||
|
||||
background-color: #ffffff;
|
||||
height: 100upx;
|
||||
/* #ifdef APP-PLUS */
|
||||
margin-top: var(--status-bar-height);
|
||||
/* #endif */
|
||||
}
|
||||
.category-list{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
.left,.right{
|
||||
position: absolute;
|
||||
|
||||
top: 100upx;
|
||||
/* #ifdef APP-PLUS */
|
||||
top: calc(100upx + var(--status-bar-height));
|
||||
/* #endif */
|
||||
bottom: 0upx;
|
||||
}
|
||||
.left{
|
||||
width: 24%;
|
||||
left: 0upx;
|
||||
background-color: #f2f2f2;
|
||||
.row{
|
||||
width: 100%;
|
||||
height: 90upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
font-size: 28upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #3c3c3c;
|
||||
.block{
|
||||
position: absolute;
|
||||
width: 0upx;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
&.on{
|
||||
height: 100upx;
|
||||
background-color: #fff;
|
||||
.text{
|
||||
font-size: 30upx;
|
||||
font-weight: 600;
|
||||
color: #2d2d2d;
|
||||
.block{
|
||||
width: 10upx;
|
||||
height: 80%;
|
||||
top: 10%;
|
||||
background-color: #f06c7a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 76%;
|
||||
left: 24%;
|
||||
.category{
|
||||
width: 94%;
|
||||
padding: 20upx 3%;
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 24.262vw;
|
||||
border-radius: 10upx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.3);
|
||||
image{
|
||||
width: 100%;
|
||||
height: 24.262vw;
|
||||
}
|
||||
}
|
||||
.list{
|
||||
margin-top: 40upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.box{
|
||||
width: calc(71.44vw / 3);
|
||||
margin-bottom: 30upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
image{
|
||||
width: 60%;
|
||||
height: calc(71.44vw / 3 * 0.6);
|
||||
}
|
||||
.text{
|
||||
margin-top: 5upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 26upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div class="content" :style="{height:statusBarHeight+44+'wx'}">
|
||||
<div class="status-bar" :style="{height:statusBarHeight+'wx'}"></div>
|
||||
<div class="nav">
|
||||
<text class="icon location">{{ iconLocation }}</text>
|
||||
<text class="location-city-text">{{ city }}</text>
|
||||
<div class="input-box">
|
||||
<input class="input-box-input" placeholder="默认关键字" @focus="inputfocus" />
|
||||
<text class="icon search">{{ iconSearch }}</text>
|
||||
</div>
|
||||
<text class="icon yuyin">{{ iconYuyin }}</text>
|
||||
<text @click="toMsg" class="icon tongzhi">{{ iconTongzhi }}</text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
city: '北京',
|
||||
subNVue: uni.getCurrentSubNVue(),
|
||||
iconSearch: '\ue628',
|
||||
iconLocation: '\ue611',
|
||||
iconYuyin: '\ue64e',
|
||||
iconTongzhi: '\ue729',
|
||||
statusBarHeight:20
|
||||
};
|
||||
},
|
||||
beforeCreate() {
|
||||
const domModule = weex.requireModule('dom');
|
||||
domModule.addRule('fontFace', {
|
||||
fontFamily: 'iconfont',
|
||||
src: "url('https://at.alicdn.com/t/font_1087442_fe5vigfwr5m.ttf')"
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
toMsg() {
|
||||
uni.navigateTo({
|
||||
url: '../../msg/msg'
|
||||
});
|
||||
},
|
||||
init() {
|
||||
uni.getSystemInfo({
|
||||
success: (res)=>{
|
||||
this.statusBarHeight = res.statusBarHeight;
|
||||
}
|
||||
});
|
||||
this.nVueTitle = uni.getCurrentSubNVue();
|
||||
this.nVueTitle.onMessage(res => {
|
||||
let type = res.data.type;
|
||||
switch (type) {
|
||||
case 'location':
|
||||
this.setCity(res.data.city);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
setCity(city) {
|
||||
this.city = city;
|
||||
},
|
||||
inputfocus() {
|
||||
this.subNVue.postMessage({
|
||||
type: 'focus'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.icon {
|
||||
font-family: iconfont;
|
||||
font-size: 42px;
|
||||
}
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: 750px;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
height: 88px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.location,
|
||||
.yuyin,
|
||||
.tongzhi {
|
||||
width: 60px;
|
||||
height: 88px;
|
||||
text-align: center;
|
||||
line-height: 88px;
|
||||
}
|
||||
.location {
|
||||
color: #ffc50a;
|
||||
}
|
||||
.location-city-text {
|
||||
width: 60px;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
font-size: 26px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.yuyin {
|
||||
color: #000;
|
||||
}
|
||||
.tongzhi {
|
||||
color: #000;
|
||||
}
|
||||
.input-box {
|
||||
width: 465px;
|
||||
margin-left: 5px;
|
||||
height: 60upx;
|
||||
border-radius: 60px;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.input-box-input {
|
||||
width: 330px;
|
||||
height: 60px;
|
||||
font-size: 28px;
|
||||
margin-left: 30px;
|
||||
placeholder-color: #c0c0c0;
|
||||
}
|
||||
.search {
|
||||
width: 60px;
|
||||
font-size: 34px;
|
||||
padding-right: 30px;
|
||||
color: #c0c0c0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<div class="content" :style="{height:statusBarHeight+44+'wx'}">
|
||||
<!-- 此页面不知为何，不设置状态栏高度就布局异常 -->
|
||||
<div class="status-bar" :style="{height:statusBarHeight+'wx'}"></div>
|
||||
<div class="nav">
|
||||
<text @click="toMsg" class="icon tongzhi">{{ iconTongzhi }}</text>
|
||||
<text @click="toSetting" class="icon setting">{{ iconSetting }}</text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
subNVue: uni.getCurrentSubNVue(),
|
||||
iconSetting: '\ue64f',
|
||||
iconTongzhi: '\ue729',
|
||||
statusBarHeight:20
|
||||
};
|
||||
},
|
||||
beforeCreate() {
|
||||
const domModule = weex.requireModule('dom');
|
||||
domModule.addRule('fontFace', {
|
||||
fontFamily: 'iconfont',
|
||||
src: "url('https://at.alicdn.com/t/font_1087442_fe5vigfwr5m.ttf')"
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.setStatusBarHeight();
|
||||
},
|
||||
methods: {
|
||||
setStatusBarHeight(){
|
||||
uni.getSystemInfo({
|
||||
success: (res)=>{
|
||||
console.log('设置状态栏高度：'+res.statusBarHeight);
|
||||
this.statusBarHeight = res.statusBarHeight;
|
||||
}
|
||||
});
|
||||
},
|
||||
toMsg() {
|
||||
uni.navigateTo({
|
||||
url: '../../msg/msg'
|
||||
});
|
||||
},
|
||||
toSetting() {
|
||||
uni.navigateTo({
|
||||
url: '../../user/setting/setting'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.icon {
|
||||
font-family: iconfont;
|
||||
font-size: 42px;
|
||||
}
|
||||
.content {
|
||||
background-color: #f06c7a;
|
||||
flex-direction: column;
|
||||
}
|
||||
.status-bar {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: 710px;
|
||||
height: 88px;
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tongzhi,
|
||||
.setting {
|
||||
width: 60px;
|
||||
height: 88px;
|
||||
text-align: center;
|
||||
line-height: 88px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
}
|
||||
.tongzhi {
|
||||
right: 60px;
|
||||
}
|
||||
.setting {
|
||||
right: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,499 @@
|
|||
<template>
|
||||
<view>
|
||||
<view v-if="showHeader" class="status" :style="{position:headerPosition,top:statusTop}"></view>
|
||||
<view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}">
|
||||
<view class="addr"></view>
|
||||
<view class="input-box">
|
||||
|
||||
</view>
|
||||
<view class="icon-btn">
|
||||
<view class="icon tongzhi" @tap="toMsg"></view>
|
||||
<view class="icon setting" @tap="toSetting"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<view v-if="showHeader" class="place"></view>
|
||||
<!-- 用户信息 -->
|
||||
<view class="user">
|
||||
<!-- 头像 -->
|
||||
<view class="left">
|
||||
<image :src="user.face" @tap="toSetting"></image>
|
||||
</view>
|
||||
<!-- 昵称,个性签名 -->
|
||||
<view class="right">
|
||||
<view class="username" @tap="toLogin">{{user.username}}</view>
|
||||
<view class="signature" @tap="toSetting">{{user.signature}}</view>
|
||||
</view>
|
||||
<!-- 二维码按钮 -->
|
||||
<view class="erweima" @tap="toMyQR">
|
||||
<view class="icon qr"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- VIP banner -->
|
||||
<view class="VIP">
|
||||
<view class="img">
|
||||
<image src="/static/img/VIP.png"></image>
|
||||
</view>
|
||||
<view class="title">开通VIP会员</view>
|
||||
<view class="tis">会员特权</view>
|
||||
</view>
|
||||
<!-- 订单-余额 -->
|
||||
<view class="order">
|
||||
<!-- 订单类型 -->
|
||||
<view class="list">
|
||||
<view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index)">
|
||||
<view class="img">
|
||||
<view class="icon" :class="row.icon"></view>
|
||||
</view>
|
||||
<view class="text">{{row.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 余额 -->
|
||||
<view class="balance-info">
|
||||
<view class="left">
|
||||
<view class="box">
|
||||
<view class="num">{{user.integral}}</view>
|
||||
<view class="text">积分</view>
|
||||
</view>
|
||||
<view class="box">
|
||||
<view class="num">{{user.envelope}}</view>
|
||||
<view class="text">佣金</view>
|
||||
</view>
|
||||
<view class="box">
|
||||
<view class="num">{{user.balance}}</view>
|
||||
<view class="text">余额</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="box" @tap="toDeposit">
|
||||
<view class="img">
|
||||
<view class="icon chongzhi"></view>
|
||||
</view>
|
||||
<view class="text">充值</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 工具栏 -->
|
||||
<view class="toolbar">
|
||||
<view class="title">我的工具栏</view>
|
||||
<view class="list">
|
||||
<view class="box" v-for="(row,index) in mytoolbarList" :key="index" @tap="toPage(row.url)">
|
||||
<view class="img">
|
||||
<image :src="row.img"></image>
|
||||
</view>
|
||||
<view class="text">{{row.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<view class="place-bottom"></view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isfirst:true,
|
||||
headerPosition:"fixed",
|
||||
headerTop:null,
|
||||
statusTop:null,
|
||||
showHeader:true,
|
||||
//个人信息,
|
||||
user:{
|
||||
username:'游客1002',
|
||||
face:'/static/img/face.jpg',
|
||||
signature:'点击昵称跳转登录/注册页',
|
||||
integral:0,
|
||||
balance:0,
|
||||
envelope:0
|
||||
},
|
||||
// 订单类型
|
||||
orderList:[
|
||||
{text:'待付款',icon:"fukuan"},
|
||||
{text:'待发货',icon:"fahuo"},
|
||||
{text:'待收货',icon:"shouhuo"},
|
||||
{text:'待评价',icon:"pingjia"},
|
||||
{text:'退换货',icon:"tuihuo"}
|
||||
],
|
||||
// 工具栏列表
|
||||
mytoolbarList:[
|
||||
{url:'../../user/keep/keep',text:'我的收藏',img:'/static/img/user/point.png'},
|
||||
{url:'../../user/coupon/coupon',text:'优惠券',img:'/static/img/user/quan.png'},
|
||||
{url:'',text:'新客豪礼',img:'/static/img/user/renw.png'},
|
||||
{url:'',text:'领红包',img:'/static/img/user/momey.png'},
|
||||
|
||||
{url:'../../user/address/address',text:'收货地址',img:'/static/img/user/addr.png'},
|
||||
{url:'',text:'账户安全',img:'/static/img/user/security.png'},
|
||||
{url:'',text:'银行卡',img:'/static/img/user/bank.png'},
|
||||
{url:'',text:'抽奖',img:'/static/img/user/choujiang.png'},
|
||||
// {text:'客服',img:'/static/img/user/kefu.png'},
|
||||
// {text:'签到',img:'/static/img/user/mingxi.png'}
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||||
onPullDownRefresh() {
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
onPageScroll(e){
|
||||
//兼容iOS端下拉时顶部漂移
|
||||
this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
|
||||
this.headerTop = e.scrollTop>=0?null:0;
|
||||
this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px';
|
||||
},
|
||||
onLoad() {
|
||||
this.statusHeight = 0;
|
||||
// #ifdef APP-PLUS
|
||||
this.showHeader = false;
|
||||
this.statusHeight = plus.navigator.getStatusbarHeight();
|
||||
// #endif
|
||||
},
|
||||
onReady(){
|
||||
//此处，演示,每次页面初次渲染都把登录状态重置
|
||||
uni.setStorage({
|
||||
key: 'UserInfo',
|
||||
data: false,
|
||||
success: function () {
|
||||
},
|
||||
fail:function(e){
|
||||
}
|
||||
});
|
||||
},
|
||||
onShow(){
|
||||
uni.getStorage({
|
||||
key: 'UserInfo',
|
||||
success: (res)=>{
|
||||
if(!res.data){
|
||||
if(this.isfirst){
|
||||
//this.toLogin();
|
||||
}
|
||||
return ;
|
||||
}
|
||||
this.user = res.data;
|
||||
},
|
||||
fail:(e)=>{
|
||||
//this.toLogin();
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
//消息列表
|
||||
toMsg(){
|
||||
uni.navigateTo({
|
||||
url:'../../msg/msg'
|
||||
})
|
||||
},
|
||||
toOrderList(index){
|
||||
uni.setStorageSync('tbIndex',index);
|
||||
uni.navigateTo({url:'../../user/order_list/order_list?tbIndex='+index})
|
||||
},
|
||||
toSetting(){
|
||||
uni.navigateTo({
|
||||
url:'../../user/setting/setting'
|
||||
})
|
||||
},
|
||||
toMyQR(){
|
||||
uni.navigateTo({
|
||||
url:'../../user/myQR/myQR'
|
||||
})
|
||||
},
|
||||
toLogin(){
|
||||
uni.showToast({title: '请登录',icon:"none"});
|
||||
uni.navigateTo({
|
||||
url:'../../login/login'
|
||||
})
|
||||
this.isfirst = false;
|
||||
},
|
||||
isLogin(){
|
||||
//实际应用中,用户登录状态应该用token等方法去维持登录状态.
|
||||
const value = uni.getStorageSync('UserInfo');
|
||||
if (value) {
|
||||
return true;
|
||||
}
|
||||
return false
|
||||
},
|
||||
toDeposit(){
|
||||
uni.navigateTo({
|
||||
url:'../../user/deposit/deposit'
|
||||
})
|
||||
},
|
||||
toPage(url){
|
||||
if(!url){
|
||||
uni.showToast({title: '模板未包含此页面',icon:"none"});return;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page{position: relative;background-color: #fff;}
|
||||
.status {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
background-color: #f06c7a;
|
||||
top: 0;
|
||||
/* #ifdef APP-PLUS */
|
||||
height: var(--status-bar-height);//覆盖样式
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
|
||||
.header{
|
||||
width: 92%;
|
||||
padding: 0 4%;
|
||||
height: 100upx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #f06c7a;
|
||||
/* #ifdef APP-PLUS */
|
||||
top: var(--status-bar-height);
|
||||
/* #endif */
|
||||
.icon-btn{
|
||||
width: 120upx;
|
||||
height: 60upx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
.icon{
|
||||
color: #fff;
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-size: 42upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.place{
|
||||
background-color: #f06c7a;
|
||||
height: 100upx;
|
||||
/* #ifdef APP-PLUS */
|
||||
margin-top: var(--status-bar-height);
|
||||
/* #endif */
|
||||
}
|
||||
.place-bottom{
|
||||
height: 300upx;
|
||||
}
|
||||
.user{
|
||||
width: 92%;
|
||||
padding: 0 4%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// position: relative;
|
||||
background-color: #f06c7a;
|
||||
padding-bottom: 120upx;
|
||||
.left{
|
||||
width: 20vw;
|
||||
height: 20vw;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20upx;
|
||||
border: solid 1upx #fff;
|
||||
border-radius: 100%;
|
||||
image{
|
||||
width: 20vw;
|
||||
height: 20vw;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.right{
|
||||
width: 100%;
|
||||
.username{
|
||||
font-size: 36upx;
|
||||
color: #fff;
|
||||
}
|
||||
.signature{
|
||||
color: #eee;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
.erweima{
|
||||
flex-shrink: 0;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
margin-left: 5vw;
|
||||
border-radius: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(to left, #fbbb37 0%,#fcf0d0 105%);
|
||||
.icon{
|
||||
color: #7b6335;
|
||||
font-size: 42upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order{
|
||||
width: 84%;
|
||||
margin: 30upx 4% 30upx 4%;
|
||||
padding: 30upx 4% 20upx 4%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
|
||||
border-radius: 15upx;
|
||||
.list{
|
||||
display: flex;
|
||||
border-bottom: solid 1upx #17e6a1;
|
||||
padding-bottom: 10upx;
|
||||
.box{
|
||||
width: 20%;
|
||||
.img{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.icon{
|
||||
font-size: 50upx;
|
||||
color: #464646;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 28upx;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.balance-info{
|
||||
display: flex;
|
||||
padding: 10upx 0;
|
||||
.left{
|
||||
width: 75%;
|
||||
display: flex;
|
||||
.box{
|
||||
width: 50%;
|
||||
font-size: 28upx;
|
||||
|
||||
.num{
|
||||
width: 100%;
|
||||
height: 50upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
color: #f9a453;
|
||||
}
|
||||
.text{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #3d3d3d;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
border-left: solid 1upx #17e6a1;
|
||||
width: 25%;
|
||||
.box{
|
||||
|
||||
.img{
|
||||
width: 100%;
|
||||
height: 50upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
.icon{
|
||||
font-size: 45upx;
|
||||
color: #e78901;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 28upx;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.VIP{
|
||||
width: 84%;
|
||||
margin: -65upx auto 20upx auto;
|
||||
padding: 30upx 4%;
|
||||
background: linear-gradient(to left, #dea96d 0%,#f6d59b 100%);
|
||||
box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.2);
|
||||
border-radius: 15upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.img{
|
||||
flex-shrink: 0;
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
image{
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
width: 100%;
|
||||
color: #796335;
|
||||
font-size: 30upx;
|
||||
}
|
||||
.tis{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: #fcf0d0;
|
||||
font-size: 26upx;
|
||||
}
|
||||
}
|
||||
.toolbar{
|
||||
width: 92%;
|
||||
margin: 0 4% 0 4%;
|
||||
padding: 0 0 20upx 0;
|
||||
background-color: #fff;
|
||||
box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
|
||||
border-radius: 15upx;
|
||||
.title{
|
||||
padding-top: 10upx;
|
||||
margin: 0 0 10upx 3%;
|
||||
font-size: 30upx;
|
||||
height: 80upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.box{
|
||||
width: 25%;
|
||||
margin-bottom: 30upx;
|
||||
.img{
|
||||
width: 23vw;
|
||||
height: 10.5vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
image{
|
||||
width: 9vw;
|
||||
height: 9vw;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 26upx;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="content">
|
||||
<view class="list">
|
||||
<view class="row" v-for="(row,index) in addressList" :key="index" @tap="select(row)">
|
||||
<view class="left">
|
||||
<view class="head">
|
||||
{{row.head}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="name-tel">
|
||||
<view class="name">{{row.name}}</view>
|
||||
<view class="tel">{{row.tel}}</view>
|
||||
<view class="default" v-if="row.isDefault">
|
||||
默认
|
||||
</view>
|
||||
</view>
|
||||
<view class="address">
|
||||
{{row.address.region.label}} {{row.address.detailed}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="icon bianji" @tap.stop="edit(row)">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="add">
|
||||
<view class="btn" @tap="add">
|
||||
<view class="icon tianjia"></view>新增地址
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isSelect:false,
|
||||
addressList:[
|
||||
{id:1,name:"大黑哥",head:"大",tel:"18816881688",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:true},
|
||||
{id:2,name:"大黑哥",head:"大",tel:"15812341234",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深北小道2222号有名公寓502'},isDefault:false},
|
||||
{id:3,name:"老大哥",head:"老",tel:"18155467897",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:false},
|
||||
{id:4,name:"王小妹",head:"王",tel:"13425654895",address:{region:{"label":"广东省-深圳市-福田区","value":[18,2,1],"cityCode":"440304"},detailed:'深南大道1111号无名摩登大厦6楼A2'},isDefault:false},
|
||||
]
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
|
||||
uni.getStorage({
|
||||
key:'delAddress',
|
||||
success: (e) => {
|
||||
let len = this.addressList.length;
|
||||
if(e.data.hasOwnProperty('id')){
|
||||
for(let i=0;i<len;i++){
|
||||
if(this.addressList[i].id==e.data.id){
|
||||
this.addressList.splice(i,1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
uni.removeStorage({
|
||||
key:'delAddress'
|
||||
})
|
||||
}
|
||||
})
|
||||
uni.getStorage({
|
||||
key:'saveAddress',
|
||||
success: (e) => {
|
||||
let len = this.addressList.length;
|
||||
if(e.data.hasOwnProperty('id')){
|
||||
for(let i=0;i<len;i++){
|
||||
if(this.addressList[i].id==e.data.id){
|
||||
this.addressList.splice(i,1,e.data);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
let lastid = this.addressList[len-1];
|
||||
lastid++;
|
||||
e.data.id = lastid;
|
||||
this.addressList.push(e.data);
|
||||
}
|
||||
uni.removeStorage({
|
||||
key:'saveAddress'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
onLoad(e) {
|
||||
if(e.type=='select'){
|
||||
this.isSelect = true;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
edit(row){
|
||||
uni.setStorage({
|
||||
key:'address',
|
||||
data:row,
|
||||
success() {
|
||||
uni.navigateTo({
|
||||
url:"edit/edit?type=edit"
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
add(){
|
||||
uni.navigateTo({
|
||||
url:"edit/edit?type=add"
|
||||
})
|
||||
},
|
||||
select(row){
|
||||
//是否需要返回地址(从订单确认页跳过来选收货地址)
|
||||
if(!this.isSelect){
|
||||
return ;
|
||||
}
|
||||
uni.setStorage({
|
||||
key:'selectAddress',
|
||||
data:row,
|
||||
success() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
view{
|
||||
display: flex;
|
||||
}
|
||||
.icon {
|
||||
// &.bianji {
|
||||
// &:before{content:"\e61b";}
|
||||
// }
|
||||
// &.tianjia {
|
||||
// &:before{content:"\e81a";}
|
||||
// }
|
||||
}
|
||||
.add{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.btn{
|
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4);
|
||||
width: 70%;
|
||||
height: 80upx;
|
||||
border-radius: 80upx;
|
||||
background-color: #f06c7a;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.icon{
|
||||
height: 80upx;
|
||||
color: #fff;
|
||||
font-size: 30upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
font-size: 30upx;
|
||||
}
|
||||
}
|
||||
.list{
|
||||
flex-wrap: wrap;
|
||||
.row{
|
||||
width: 96%;
|
||||
padding: 20upx 2%;
|
||||
.left{
|
||||
width: 90upx;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
.head{
|
||||
width: 70upx;
|
||||
height: 70upx;
|
||||
background:linear-gradient(to right,#ccc,#aaa);
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 60upx;
|
||||
font-size: 35upx;
|
||||
}
|
||||
}
|
||||
.center{
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
.name-tel{
|
||||
width: 100%;
|
||||
align-items: baseline;
|
||||
.name{
|
||||
font-size: 34upx;
|
||||
}
|
||||
.tel{
|
||||
margin-left: 30upx;
|
||||
font-size: 24upx;
|
||||
color: #777;
|
||||
}
|
||||
.default{
|
||||
|
||||
font-size: 22upx;
|
||||
|
||||
background-color: #f06c7a;
|
||||
color: #fff;
|
||||
padding: 0 18upx;
|
||||
border-radius: 24upx;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
}
|
||||
.address{
|
||||
width: 100%;
|
||||
font-size: 24upx;
|
||||
align-items: baseline;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
margin-left: 20upx;
|
||||
.icon{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 80upx;
|
||||
height: 60upx;
|
||||
border-left: solid 1upx #aaa;
|
||||
font-size: 40upx;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="content">
|
||||
<view class="row">
|
||||
<view class="nominal">
|
||||
收件人
|
||||
</view>
|
||||
<view class="input">
|
||||
<input placeholder="请输入收件人姓名" type="text" v-model="name" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">
|
||||
电话号码
|
||||
</view>
|
||||
<view class="input">
|
||||
<input placeholder="请输入收件人电话号码" type="text" v-model="tel" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">
|
||||
所在地区
|
||||
</view>
|
||||
<view class="input" @tap="chooseCity">
|
||||
{{region.label}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">
|
||||
详细地址
|
||||
</view>
|
||||
<view class="input">
|
||||
<textarea v-model="detailed" auto-height="true" placeholder="输入详细地址"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nominal">
|
||||
设置默认地址
|
||||
</view>
|
||||
<view class="input switch">
|
||||
<switch color="#f06c7a" :checked="isDefault" @change=isDefaultChange />
|
||||
</view>
|
||||
</view>
|
||||
<view class="row" v-if="editType=='edit'" @tap="del">
|
||||
<view class="del">
|
||||
删除收货地址
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="save" @tap="save">
|
||||
<view class="btn">
|
||||
保存地址
|
||||
</view>
|
||||
</view>
|
||||
<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
|
||||
export default {
|
||||
components: {
|
||||
mpvueCityPicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editType:'edit',
|
||||
id:'',
|
||||
name:'',
|
||||
tel:'',
|
||||
detailed:'',
|
||||
isDefault:false,
|
||||
cityPickerValue: [0, 0, 1],
|
||||
themeColor: '#007AFF',
|
||||
region:{label:"请点击选择地址",value:[],cityCode:""}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onCancel(e) {
|
||||
console.log(e)
|
||||
},
|
||||
chooseCity() {
|
||||
this.$refs.mpvueCityPicker.show()
|
||||
},
|
||||
onConfirm(e) {
|
||||
this.region = e;
|
||||
this.cityPickerValue = e.value;
|
||||
},
|
||||
isDefaultChange(e){
|
||||
this.isDefault = e.detail.value;
|
||||
},
|
||||
del(){
|
||||
uni.showModal({
|
||||
title: '删除提示',
|
||||
content: '你将删除这个收货地址',
|
||||
success: (res)=>{
|
||||
if (res.confirm) {
|
||||
uni.setStorage({
|
||||
key:'delAddress',
|
||||
data:{id:this.id},
|
||||
success() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
save(){
|
||||
let data={"name":this.name,"head":this.name.substr(0,1),"tel":this.tel,"address":{"region":this.region,"detailed":this.detailed},"isDefault":this.isDefault}
|
||||
if(this.editType=='edit'){
|
||||
data.id = this.id
|
||||
}
|
||||
if(!data.name){
|
||||
uni.showToast({title:'请输入收件人姓名',icon:'none'});
|
||||
return ;
|
||||
}
|
||||
if(!data.tel){
|
||||
uni.showToast({title:'请输入收件人电话号码',icon:'none'});
|
||||
return ;
|
||||
}
|
||||
if(!data.address.detailed){
|
||||
uni.showToast({title:'请输入收件人详细地址',icon:'none'});
|
||||
return ;
|
||||
}
|
||||
if(data.address.region.value.length==0){
|
||||
uni.showToast({title:'请选择收件地址',icon:'none'});
|
||||
return ;
|
||||
}
|
||||
uni.showLoading({
|
||||
title:'正在提交'
|
||||
})
|
||||
//实际应用中请提交ajax,模板定时器模拟提交效果
|
||||
setTimeout(()=>{
|
||||
uni.setStorage({
|
||||
key:'saveAddress',
|
||||
data:data,
|
||||
success() {
|
||||
uni.hideLoading();
|
||||
uni.navigateBack();
|
||||
}
|
||||
})
|
||||
},300)
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
//获取传递过来的参数
|
||||
|
||||
this.editType = e.type;
|
||||
if(e.type=='edit'){
|
||||
uni.getStorage({
|
||||
key:'address',
|
||||
success: (e) => {
|
||||
this.id = e.data.id;
|
||||
this.name = e.data.name;
|
||||
this.tel = e.data.tel;
|
||||
this.detailed = e.data.address.detailed;
|
||||
this.isDefault = e.data.isDefault;
|
||||
this.cityPickerValue = e.data.address.region.value;
|
||||
this.region = e.data.address.region;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
onBackPress() {
|
||||
if (this.$refs.mpvueCityPicker.showPicker) {
|
||||
this.$refs.mpvueCityPicker.pickerCancel();
|
||||
return true;
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
if (this.$refs.mpvueCityPicker.showPicker) {
|
||||
this.$refs.mpvueCityPicker.pickerCancel()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
.save{
|
||||
view{
|
||||
display: flex;
|
||||
}
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.btn{
|
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4);
|
||||
width: 70%;
|
||||
height: 80upx;
|
||||
border-radius: 80upx;
|
||||
background-color: #f06c7a;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.icon{
|
||||
height: 80upx;
|
||||
color: #fff;
|
||||
font-size: 30upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
font-size: 30upx;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
view{
|
||||
display: flex;
|
||||
}
|
||||
.row{
|
||||
width: 94%;
|
||||
|
||||
margin: 0 3%;
|
||||
border-top: solid 1upx #eee;
|
||||
.nominal{
|
||||
width: 30%;
|
||||
height: 120upx;
|
||||
font-weight: 200;
|
||||
font-size: 30upx;
|
||||
align-items: center;
|
||||
}
|
||||
.input{
|
||||
width: 70%;
|
||||
padding: 20upx 0;
|
||||
align-items: center;
|
||||
font-size: 30upx;
|
||||
&.switch{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.textarea{
|
||||
margin: 20upx 0;
|
||||
min-height: 120upx;
|
||||
}
|
||||
}
|
||||
.del{
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 36upx;
|
||||
color: #f06c7a;
|
||||
background-color: rgba(255,0,0,0.05);
|
||||
border-bottom: solid 1upx #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,469 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="tabr" :style="{top:headerTop}">
|
||||
<view :class="{on:typeClass=='valid'}" @tap="switchType('valid')">可用({{couponValidList.length}})</view><view :class="{on:typeClass=='invalid'}" @tap="switchType('invalid')">已失效</view>
|
||||
<view class="border" :class="typeClass"></view>
|
||||
</view>
|
||||
<view class="place" ></view>
|
||||
<view class="list">
|
||||
<!-- 优惠券列表 -->
|
||||
<view class="sub-list valid" :class="subState">
|
||||
<view class="tis" v-if="couponValidList.length==0">没有数据~</view>
|
||||
<view class="row" v-for="(row,index) in couponValidList" :key="index" >
|
||||
<!-- 删除按钮 -->
|
||||
<view class="menu" @tap.stop="deleteCoupon(row.id,couponValidList)">
|
||||
<view class="icon shanchu"></view>
|
||||
</view>
|
||||
<!-- content -->
|
||||
<view class="carrier" :class="[typeClass=='valid'?theIndex==index?'open':oldIndex==index?'close':'':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
|
||||
<view class="left">
|
||||
<view class="title">
|
||||
{{row.title}}
|
||||
</view>
|
||||
<view class="term">
|
||||
{{row.termStart}} ~ {{row.termEnd}}
|
||||
</view>
|
||||
<view class="gap-top"></view>
|
||||
<view class="gap-bottom"></view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="ticket">
|
||||
<view class="num">
|
||||
{{row.ticket}}
|
||||
</view>
|
||||
<view class="unit">
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
<view class="criteria">
|
||||
{{row.criteria}}
|
||||
</view>
|
||||
<view class="use">
|
||||
去使用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sub-list invalid" :class="subState">
|
||||
<view class="tis" v-if="couponinvalidList.length==0">没有数据~</view>
|
||||
<view class="row" v-for="(row,index) in couponinvalidList" :key="index" >
|
||||
<!-- 删除按钮 -->
|
||||
<view class="menu" @tap.stop="deleteCoupon(row.id,couponinvalidList)">
|
||||
<view class="icon shanchu"></view>
|
||||
</view>
|
||||
<!-- content -->
|
||||
<view class="carrier" :class="[typeClass=='invalid'?theIndex==index?'open':oldIndex==index?'close':'':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
|
||||
<view class="left">
|
||||
<view class="title">
|
||||
{{row.title}}
|
||||
</view>
|
||||
<view class="term">
|
||||
{{row.termStart}} ~ {{row.termEnd}}
|
||||
</view>
|
||||
<view class="icon shixiao">
|
||||
|
||||
</view>
|
||||
<view class="gap-top"></view>
|
||||
<view class="gap-bottom"></view>
|
||||
</view>
|
||||
<view class="right invalid">
|
||||
<view class="ticket">
|
||||
<view class="num">
|
||||
{{row.ticket}}
|
||||
</view>
|
||||
<view class="unit">
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
<view class="criteria">
|
||||
{{row.criteria}}
|
||||
</view>
|
||||
<view class="use">
|
||||
去查看
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
couponValidList:[
|
||||
{id:1,title:"日常用品立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"满50使用"},
|
||||
{id:2,title:"家用电器立减100元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"100",criteria:"满500使用"},
|
||||
{id:3,title:"全场立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"无门槛"},
|
||||
{id:4,title:"全场立减50元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"50",criteria:"满1000使用"}
|
||||
|
||||
],
|
||||
couponinvalidList:[
|
||||
{id:1,title:"日常用品立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"满50使用"},
|
||||
{id:2,title:"家用电器立减100元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"100",criteria:"满500使用"},
|
||||
{id:3,title:"全场立减10元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"10",criteria:"无门槛"},
|
||||
{id:4,title:"全场立减50元",termStart:"2019-04-01",termEnd:"2019-05-30",ticket:"50",criteria:"满1000使用"}
|
||||
],
|
||||
headerTop:0,
|
||||
//控制滑动效果
|
||||
typeClass:'valid',
|
||||
subState:'',
|
||||
theIndex:null,
|
||||
oldIndex:null,
|
||||
isStop:false
|
||||
}
|
||||
},
|
||||
onPageScroll(e){
|
||||
|
||||
},
|
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||||
onPullDownRefresh() {
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
onLoad() {
|
||||
//兼容H5下排序栏位置
|
||||
// #ifdef H5
|
||||
//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
|
||||
let Timer = setInterval(()=>{
|
||||
let uniHead = document.getElementsByTagName('uni-page-head');
|
||||
if(uniHead.length>0){
|
||||
this.headerTop = uniHead[0].offsetHeight+'px';
|
||||
clearInterval(Timer);//清除定时器
|
||||
}
|
||||
},1);
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
switchType(type){
|
||||
if(this.typeClass==type){
|
||||
return ;
|
||||
}
|
||||
uni.pageScrollTo({
|
||||
scrollTop:0,
|
||||
duration:0
|
||||
})
|
||||
this.typeClass = type;
|
||||
this.subState = this.typeClass==''?'':'show'+type;
|
||||
setTimeout(()=>{
|
||||
this.oldIndex = null;
|
||||
this.theIndex = null;
|
||||
this.subState = this.typeClass=='valid'?'':this.subState;
|
||||
},200)
|
||||
},
|
||||
//控制左滑删除效果-begin
|
||||
touchStart(index,event){
|
||||
//多点触控不触发
|
||||
if(event.touches.length>1){
|
||||
this.isStop = true;
|
||||
return ;
|
||||
}
|
||||
this.oldIndex = this.theIndex;
|
||||
this.theIndex = null;
|
||||
//初始坐标
|
||||
this.initXY = [event.touches[0].pageX,event.touches[0].pageY];
|
||||
},
|
||||
touchMove(index,event){
|
||||
//多点触控不触发
|
||||
if(event.touches.length>1){
|
||||
this.isStop = true;
|
||||
return ;
|
||||
}
|
||||
let moveX = event.touches[0].pageX - this.initXY[0];
|
||||
let moveY = event.touches[0].pageY - this.initXY[1];
|
||||
|
||||
if(this.isStop||Math.abs(moveX)<5){
|
||||
return ;
|
||||
}
|
||||
if (Math.abs(moveY) > Math.abs(moveX)){
|
||||
// 竖向滑动-不触发左滑效果
|
||||
this.isStop = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if(moveX<0){
|
||||
this.theIndex = index;
|
||||
this.isStop = true;
|
||||
}else if(moveX>0){
|
||||
if(this.theIndex!=null&&this.oldIndex==this.theIndex){
|
||||
this.oldIndex = index;
|
||||
this.theIndex = null;
|
||||
this.isStop = true;
|
||||
setTimeout(()=>{
|
||||
this.oldIndex = null;
|
||||
},150)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
touchEnd(index,$event){
|
||||
//解除禁止触发状态
|
||||
this.isStop = false;
|
||||
},
|
||||
|
||||
//删除商品
|
||||
deleteCoupon(id,List){
|
||||
let len = List.length;
|
||||
for(let i=0;i<len;i++){
|
||||
if(id==List[i].id){
|
||||
List.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.oldIndex = null;
|
||||
this.theIndex = null;
|
||||
},
|
||||
|
||||
discard() {
|
||||
//丢弃
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
view{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
page{position: relative;background-color: #f5f5f5;}
|
||||
.hidden{
|
||||
display: none !important;
|
||||
}
|
||||
.place{
|
||||
width: 100%;
|
||||
height: 95upx;
|
||||
}
|
||||
.tabr{
|
||||
background-color: #fff;
|
||||
width: 94%;
|
||||
height: 95upx;
|
||||
padding: 0 3%;
|
||||
border-bottom: solid 1upx #dedede;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
view{
|
||||
width: 50%;
|
||||
height: 90upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
color: #999;
|
||||
}
|
||||
.on{
|
||||
color: #f06c7a;
|
||||
}
|
||||
.border{
|
||||
height: 4upx;
|
||||
background-color: #f06c7a;
|
||||
transition: all .3s ease-out;
|
||||
&.invalid{
|
||||
transform: translate3d(100%,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.list{
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
@keyframes showValid {
|
||||
0% {transform: translateX(-100%);}100% {transform: translateX(0);}
|
||||
}
|
||||
@keyframes showInvalid {
|
||||
0% {transform: translateX(0);}100% {transform: translateX(-100%);}
|
||||
}
|
||||
.sub-list{
|
||||
&.invalid{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left:100%;
|
||||
display: none;
|
||||
}
|
||||
&.showvalid{
|
||||
display: flex;
|
||||
animation: showValid 0.20s linear both;
|
||||
}
|
||||
&.showinvalid{
|
||||
display: flex;
|
||||
animation: showInvalid 0.20s linear both;
|
||||
}
|
||||
width: 100%;
|
||||
padding: 20upx 0 120upx 0;
|
||||
.tis{
|
||||
width: 100%;
|
||||
height: 60upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
}
|
||||
.row{
|
||||
width: 92%;
|
||||
height: 24vw;
|
||||
margin: 20upx auto 10upx auto;
|
||||
border-radius: 8upx;
|
||||
// box-shadow: 0upx 0 10upx rgba(0,0,0,0.1);
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 4;
|
||||
border: 0;
|
||||
.menu{
|
||||
.icon{
|
||||
color: #fff;
|
||||
font-size:50upx;
|
||||
}
|
||||
position: absolute;
|
||||
width: 28%;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
.carrier{
|
||||
@keyframes showMenu {
|
||||
0% {transform: translateX(0);}100% {transform: translateX(-28%);}
|
||||
}
|
||||
@keyframes closeMenu {
|
||||
0% {transform: translateX(-28%);}100% {transform: translateX(0);}
|
||||
}
|
||||
&.open{
|
||||
animation: showMenu 0.25s linear both;
|
||||
}
|
||||
&.close{
|
||||
animation: closeMenu 0.15s linear both;
|
||||
}
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0 0;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
.left{
|
||||
width: 100%;
|
||||
.title{
|
||||
padding-top: 3vw;
|
||||
width: 90%;
|
||||
margin: 0 5%;
|
||||
font-size: 36upx;
|
||||
}
|
||||
.term{
|
||||
width: 90%;
|
||||
margin: 0 5%;
|
||||
font-size: 26upx;
|
||||
color: #999;
|
||||
}
|
||||
position: relative;
|
||||
.gap-top,.gap-bottom{
|
||||
position: absolute;
|
||||
width: 20upx;
|
||||
height: 20upx;
|
||||
right: -10upx;
|
||||
border-radius: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.gap-top{
|
||||
top: -10upx;
|
||||
}
|
||||
.gap-bottom{
|
||||
bottom: -10upx;
|
||||
}
|
||||
.shixiao{
|
||||
position: absolute;
|
||||
right: 20upx;
|
||||
font-size: 150upx;
|
||||
z-index: 6;
|
||||
color: rgba(153,153,153,0.2)
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex-shrink: 0;
|
||||
width: 28%;
|
||||
color: #fff;
|
||||
background:linear-gradient(to right,#ec625c,#ee827f);
|
||||
&.invalid{
|
||||
background:linear-gradient(to right,#aaa,#999);
|
||||
.use{
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
justify-content: center;
|
||||
.ticket,.criteria{width: 100%;}
|
||||
.ticket{
|
||||
padding-top: 1vw;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
height: 6vw;
|
||||
.num{
|
||||
font-size: 42upx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.unit{
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
.criteria{
|
||||
justify-content: center;
|
||||
|
||||
font-size: 28upx;
|
||||
}
|
||||
.use{
|
||||
width: 50%;
|
||||
height: 40upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24upx;
|
||||
background-color: #fff;
|
||||
color: #ee827f;
|
||||
border-radius: 40upx;
|
||||
padding: 0 10upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
|
||||
<view class="left">
|
||||
<view class="title">
|
||||
10元日常用品类
|
||||
</view>
|
||||
<view class="term">
|
||||
2019-04-01~2019-05-30
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="ticket">
|
||||
<view class="num">
|
||||
10
|
||||
</view>
|
||||
<view class="unit">
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
<view class="criteria">
|
||||
满50使用
|
||||
</view>
|
||||
<view class="use">
|
||||
去使用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
*
|
||||
* */
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="block">
|
||||
<view class="title">
|
||||
我的账户
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="my">
|
||||
我的账户余额：0 元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="block">
|
||||
<view class="title">
|
||||
充值金额
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="amount">
|
||||
<view class="list">
|
||||
<view class="box" v-for="(amount,index) in amountList" :key="index" @tap="select(amount)" :class="{'on':amount == inputAmount}">
|
||||
{{amount}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="num">
|
||||
<view class="text">
|
||||
自定义充值金额
|
||||
</view>
|
||||
<view class="input">
|
||||
<input type="number" v-model="inputAmount" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="block">
|
||||
<view class="title">
|
||||
选择支付方式
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="pay-list">
|
||||
<view class="row" @tap="paytype='alipay'">
|
||||
<view class="left">
|
||||
<image src="/static/img/alipay.png"></image>
|
||||
</view>
|
||||
<view class="center">
|
||||
支付宝支付
|
||||
</view>
|
||||
<view class="right">
|
||||
<radio :checked="paytype=='alipay'" color="#f06c7a" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="row" @tap="paytype='wxpay'">
|
||||
<view class="left">
|
||||
<image src="/static/img/wxpay.png"></image>
|
||||
</view>
|
||||
<view class="center">
|
||||
微信支付
|
||||
</view>
|
||||
<view class="right">
|
||||
<radio :checked="paytype=='wxpay'" color="#f06c7a" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay">
|
||||
<view class="btn" @tap="doDeposit">立即充值</view>
|
||||
<view class="tis">
|
||||
点击立即充值，即代表您同意<view class="terms">
|
||||
《条款协议》
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inputAmount:'',//金额
|
||||
amountList:[10,50,100],//预设3个可选快捷金额
|
||||
paytype:'alipay'//支付类型
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
select(amount){
|
||||
this.inputAmount = amount;
|
||||
},
|
||||
doDeposit(){
|
||||
if (parseFloat(this.inputAmount).toString() == "NaN") {
|
||||
uni.showToast({title:'请输入正确金额',icon:'none'});
|
||||
return ;
|
||||
}
|
||||
if(this.inputAmount<=0){
|
||||
uni.showToast({title:'请输入大于0的金额',icon:'none'});
|
||||
return ;
|
||||
}
|
||||
if(parseFloat(this.inputAmount).toFixed(2)!=parseFloat(this.inputAmount)){
|
||||
uni.showToast({title:'最多只能输入两位小数哦~',icon:'none'});
|
||||
return ;
|
||||
}
|
||||
//模板模拟支付，实际应用请调起微信/支付宝
|
||||
uni.showLoading({
|
||||
title:'支付中...'
|
||||
});
|
||||
setTimeout(()=>{
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title:'支付成功'
|
||||
});
|
||||
setTimeout(()=>{
|
||||
uni.redirectTo({
|
||||
url:'../../pay/success/success?amount='+this.inputAmount
|
||||
});
|
||||
},300);
|
||||
},700)
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.block{
|
||||
width: 94%;
|
||||
padding: 20upx 3%;
|
||||
.title{
|
||||
width: 100%;
|
||||
font-size: 34upx;
|
||||
}
|
||||
.content{
|
||||
.my{
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30upx;
|
||||
border-bottom: solid 1upx #eee;
|
||||
}
|
||||
.amount{
|
||||
width: 100%;
|
||||
|
||||
.list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20upx 0;
|
||||
.box{
|
||||
width: 30%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10upx;
|
||||
box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.05);
|
||||
font-size: 36upx;
|
||||
background-color: #f1f1f1;
|
||||
color: 333;
|
||||
&.on{
|
||||
background-color: #f06c7a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.num{
|
||||
margin-top: 10upx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.text{
|
||||
padding-right: 10upx;
|
||||
font-size: 30upx;
|
||||
}
|
||||
.input{
|
||||
width: 28.2vw;
|
||||
border-bottom: solid 2upx #999;
|
||||
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
input{
|
||||
margin: 0 20upx;
|
||||
height: 60upx;
|
||||
font-size: 30upx;
|
||||
color: #f06c7a;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay-list{
|
||||
width: 100%;
|
||||
border-bottom: solid 1upx #eee;
|
||||
.row{
|
||||
width: 100%;
|
||||
height: 120upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.left{
|
||||
width: 100upx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
}
|
||||
}
|
||||
.center{
|
||||
width: 100%;
|
||||
font-size: 30upx;
|
||||
}
|
||||
.right{
|
||||
width: 100upx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay{
|
||||
margin-top: 20upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.btn{
|
||||
width: 70%;
|
||||
height: 80upx;
|
||||
border-radius: 80upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
background-color: #f06c7a;
|
||||
box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.2);
|
||||
}
|
||||
.tis{
|
||||
margin-top: 10upx;
|
||||
width: 100%;
|
||||
font-size: 24upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
color: #999;
|
||||
.terms{
|
||||
color: #5a9ef7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,396 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="tabr" :style="{top:headerTop}">
|
||||
<view :class="{on:typeClass=='goods'}" @tap="switchType('goods')">商品({{goodsList.length}})</view>
|
||||
<view :class="{on:typeClass=='shop'}" @tap="switchType('shop')">店铺({{shopList.length}})</view>
|
||||
<view class="border" :class="typeClass"></view>
|
||||
</view>
|
||||
<view class="place" ></view>
|
||||
<view class="list">
|
||||
<!-- 优惠券列表 -->
|
||||
<view class="sub-list goods" :class="subState">
|
||||
<view class="tis" v-if="goodsList.length==0">没有数据~</view>
|
||||
<view class="row" v-for="(row,index) in goodsList" :key="index" >
|
||||
<!-- 删除按钮 -->
|
||||
<view class="menu" @tap.stop="deleteCoupon(row.id,goodsList)">
|
||||
<view class="icon shanchu"></view>
|
||||
</view>
|
||||
<!-- content -->
|
||||
<view class="carrier" :class="[typeClass=='goods'?theIndex==index?'open':oldIndex==index?'close':'':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
|
||||
<view class="goods-info" @tap="toGoods(row)">
|
||||
<view class="img">
|
||||
<image :src="row.img"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="title">{{row.name}}</view>
|
||||
<view class="price-number">
|
||||
<view class="keep-num">
|
||||
905人收藏
|
||||
</view>
|
||||
<view class="price">￥{{row.price}}</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sub-list shop" :class="subState">
|
||||
<view class="tis" v-if="shopList.length==0">没有数据~</view>
|
||||
<view class="row" v-for="(row,index) in shopList" :key="index" >
|
||||
<!-- 删除按钮 -->
|
||||
<view class="menu" @tap.stop="deleteCoupon(row.id,shopList)">
|
||||
<view class="icon shanchu"></view>
|
||||
</view>
|
||||
<!-- content -->
|
||||
<view class="carrier" :class="[typeClass=='shop'?theIndex==index?'open':oldIndex==index?'close':'':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
|
||||
<view class="left">
|
||||
<image :src="row.img"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="name">
|
||||
{{row.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsList:[
|
||||
{id:1,img:'/static/img/goods/p1.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
|
||||
{id:2,img:'/static/img/goods/p1.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
|
||||
{id:3,img:'/static/img/goods/p1.jpg',name:'商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',spec:'规格:S码',price:127.5,number:1,selected:false},
|
||||
],
|
||||
shopList:[
|
||||
{id:1,name:"冰鲜专卖店",img:"/static/img/shop/1.jpg"},
|
||||
{id:2,name:"果蔬天下",img:"/static/img/shop/2.jpg"},
|
||||
{id:3,name:"办公耗材用品店",img:"/static/img/shop/3.jpg"},
|
||||
{id:4,name:"天天看好书",img:"/static/img/shop/4.jpg"}
|
||||
],
|
||||
headerTop:0,
|
||||
//控制滑动效果
|
||||
typeClass:'goods',
|
||||
subState:'',
|
||||
theIndex:null,
|
||||
oldIndex:null,
|
||||
isStop:false
|
||||
}
|
||||
},
|
||||
onPageScroll(e){
|
||||
|
||||
},
|
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||||
onPullDownRefresh() {
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
onLoad() {
|
||||
//兼容H5下排序栏位置
|
||||
// #ifdef H5
|
||||
//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
|
||||
let Timer = setInterval(()=>{
|
||||
let uniHead = document.getElementsByTagName('uni-page-head');
|
||||
if(uniHead.length>0){
|
||||
this.headerTop = uniHead[0].offsetHeight+'px';
|
||||
clearInterval(Timer);//清除定时器
|
||||
}
|
||||
},1);
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
switchType(type){
|
||||
if(this.typeClass==type){
|
||||
return ;
|
||||
}
|
||||
uni.pageScrollTo({
|
||||
scrollTop:0,
|
||||
duration:0
|
||||
})
|
||||
this.typeClass = type;
|
||||
this.subState = this.typeClass==''?'':'show'+type;
|
||||
setTimeout(()=>{
|
||||
this.oldIndex = null;
|
||||
this.theIndex = null;
|
||||
this.subState = this.typeClass=='goods'?'':this.subState;
|
||||
},200)
|
||||
},
|
||||
//控制左滑删除效果-begin
|
||||
touchStart(index,event){
|
||||
//多点触控不触发
|
||||
if(event.touches.length>1){
|
||||
this.isStop = true;
|
||||
return ;
|
||||
}
|
||||
this.oldIndex = this.theIndex;
|
||||
this.theIndex = null;
|
||||
//初始坐标
|
||||
this.initXY = [event.touches[0].pageX,event.touches[0].pageY];
|
||||
},
|
||||
touchMove(index,event){
|
||||
//多点触控不触发
|
||||
if(event.touches.length>1){
|
||||
this.isStop = true;
|
||||
return ;
|
||||
}
|
||||
let moveX = event.touches[0].pageX - this.initXY[0];
|
||||
let moveY = event.touches[0].pageY - this.initXY[1];
|
||||
|
||||
if(this.isStop||Math.abs(moveX)<5){
|
||||
return ;
|
||||
}
|
||||
if (Math.abs(moveY) > Math.abs(moveX)){
|
||||
// 竖向滑动-不触发左滑效果
|
||||
this.isStop = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if(moveX<0){
|
||||
this.theIndex = index;
|
||||
this.isStop = true;
|
||||
}else if(moveX>0){
|
||||
if(this.theIndex!=null&&this.oldIndex==this.theIndex){
|
||||
this.oldIndex = index;
|
||||
this.theIndex = null;
|
||||
this.isStop = true;
|
||||
setTimeout(()=>{
|
||||
this.oldIndex = null;
|
||||
},150)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
touchEnd(index,$event){
|
||||
//解除禁止触发状态
|
||||
this.isStop = false;
|
||||
},
|
||||
|
||||
//删除商品
|
||||
deleteCoupon(id,List){
|
||||
let len = List.length;
|
||||
for(let i=0;i<len;i++){
|
||||
if(id==List[i].id){
|
||||
List.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.oldIndex = null;
|
||||
this.theIndex = null;
|
||||
},
|
||||
|
||||
discard() {
|
||||
//丢弃
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
view{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
page{position: relative;background-color: #f5f5f5;}
|
||||
|
||||
.hidden{
|
||||
display: none !important;
|
||||
}
|
||||
.place{
|
||||
width: 100%;
|
||||
height: 95upx;
|
||||
}
|
||||
.tabr{
|
||||
background-color: #fff;
|
||||
width: 94%;
|
||||
height: 95upx;
|
||||
padding: 0 3%;
|
||||
border-bottom: solid 1upx #dedede;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
view{
|
||||
width: 50%;
|
||||
height: 90upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
color: #999;
|
||||
}
|
||||
.on{
|
||||
color: #f06c7a;
|
||||
}
|
||||
.border{
|
||||
height: 4upx;
|
||||
background-color: #f06c7a;
|
||||
transition: all .3s ease-out;
|
||||
&.shop{
|
||||
transform: translate3d(100%,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.list{
|
||||
width: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
@keyframes showGoods {
|
||||
0% {transform: translateX(-100%);}100% {transform: translateX(0);}
|
||||
}
|
||||
@keyframes showShop {
|
||||
0% {transform: translateX(0);}100% {transform: translateX(-100%);}
|
||||
}
|
||||
.sub-list{
|
||||
&.shop{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left:100%;
|
||||
display: none;
|
||||
}
|
||||
&.showgoods{
|
||||
display: flex;
|
||||
animation: showGoods 0.20s linear both;
|
||||
}
|
||||
&.showshop{
|
||||
display: flex;
|
||||
animation: showShop 0.20s linear both;
|
||||
}
|
||||
width: 100%;
|
||||
padding: 20upx 0 120upx 0;
|
||||
.tis{
|
||||
width: 100%;
|
||||
height: 60upx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
}
|
||||
&.shop{
|
||||
.row{
|
||||
height: 20vw;
|
||||
.left{
|
||||
width: 20vw;
|
||||
height: 20vw;
|
||||
padding-left: 20upx;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 18vw;
|
||||
height: 18vw;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
height: 20vw;
|
||||
align-items: center;
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.row{
|
||||
width: 100%;
|
||||
height: 30vw;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-bottom: solid 1upx #dedede;
|
||||
.menu{
|
||||
.icon{
|
||||
color: #fff;
|
||||
font-size:50upx;
|
||||
}
|
||||
position: absolute;
|
||||
width: 28%;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.carrier{
|
||||
@keyframes showMenu {
|
||||
0% {transform: translateX(0);}100% {transform: translateX(-28%);}
|
||||
}
|
||||
@keyframes closeMenu {
|
||||
0% {transform: translateX(-28%);}100% {transform: translateX(0);}
|
||||
}
|
||||
&.open{
|
||||
animation: showMenu 0.25s linear both;
|
||||
}
|
||||
&.close{
|
||||
animation: closeMenu 0.15s linear both;
|
||||
}
|
||||
background-color: #fff;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0 0;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
flex-wrap: nowrap;
|
||||
.goods-info{
|
||||
width: calc(100% - 40upx);
|
||||
padding: 20upx;
|
||||
flex-wrap: nowrap;
|
||||
.img{
|
||||
width: calc(30vw - 40upx);
|
||||
height: calc(30vw - 40upx);
|
||||
border-radius: 10upx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20upx;
|
||||
image{
|
||||
width: calc(30vw - 40upx);
|
||||
height: calc(30vw - 40upx);
|
||||
}
|
||||
}
|
||||
.info{
|
||||
width: 100%;
|
||||
height: calc(30vw - 40upx);
|
||||
overflow: hidden;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
position: relative;
|
||||
.title{
|
||||
width: 100%;
|
||||
font-size: 28upx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.price-number{
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
|
||||
.keep-num{
|
||||
font-size: 26upx;
|
||||
color: #999;
|
||||
}
|
||||
.price{
|
||||
font-size: 30upx;
|
||||
color: #f06c7a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="block">
|
||||
|
||||
</view>
|
||||
<view class="QR">
|
||||
<image src="../../../static/img/qr.png"></image>
|
||||
</view>
|
||||
<view class="title">
|
||||
扫描二维码，加我好友
|
||||
</view>
|
||||
<view class="btn" v-show="showBtn" @tap="printscreen">
|
||||
{{tis}}
|
||||
</view>
|
||||
<view class="logo">
|
||||
<image mode="widthFix" src="../../../static/img/qrlogo.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tis:"保存到相册",
|
||||
showBtn:false
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS
|
||||
this.showBtn = true;
|
||||
// #endif
|
||||
},
|
||||
methods:{
|
||||
// 截图，调用webview、Bitmap方法
|
||||
printscreen(){
|
||||
this.tis = "正在保存"
|
||||
let ws=this.$mp.page.$getAppWebview();
|
||||
let bitmap = new plus.nativeObj.Bitmap();
|
||||
this.showBtn = false;
|
||||
this.$nextTick(function(){
|
||||
setTimeout(()=>{
|
||||
ws.draw(bitmap,(e)=>{
|
||||
this.showBtn = true;
|
||||
console.log('bitmap绘制图片成功');
|
||||
console.log("e: " + JSON.stringify(e));
|
||||
bitmap.save("_doc/Qr.jpg", {
|
||||
overwrite: true,
|
||||
quality: 100
|
||||
}, (i)=>{
|
||||
plus.gallery.save(i.target,(e)=>{
|
||||
uni.showToast({
|
||||
title:'保存成功'
|
||||
})
|
||||
this.tis = "保存到相册"
|
||||
bitmap.clear(); //销毁
|
||||
},(e)=>{
|
||||
bitmap.clear(); //销毁
|
||||
});
|
||||
},(e)=>{
|
||||
console.log('保存图片失败：' + JSON.stringify(e));
|
||||
});
|
||||
},(e)=>{
|
||||
console.log('bitmap绘制图片失败：'+JSON.stringify(e));
|
||||
});
|
||||
},200)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #f06c7a;
|
||||
}
|
||||
.block{
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.QR{
|
||||
width: 60vw;
|
||||
height: 60vw;
|
||||
margin: -40vw auto 0 auto;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
image{
|
||||
width: 50vw;
|
||||
height: 50vw;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
width: 100%;
|
||||
margin-top: 50upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 36upx;
|
||||
color: #fff;
|
||||
}
|
||||
.btn{
|
||||
|
||||
width: 50%;
|
||||
height: 80upx;
|
||||
border-radius: 80upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 20upx;
|
||||
margin: 0 auto;
|
||||
margin-top: 50upx;
|
||||
background-color: rgba(255,255,255,.8);
|
||||
}
|
||||
.logo{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 25upx;
|
||||
image{
|
||||
width: 39.6%;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,542 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<div class="tab">
|
||||
<text v-for="(tab, tbIndex) in orderType" :key="tbIndex"
|
||||
@click="showType(tbIndex)"
|
||||
class="tab-text"
|
||||
:class="[tbIndex == selectIndex ? 'tab-text-on' : '']"
|
||||
>{{ tab }}</text>
|
||||
</div>
|
||||
<div class="border" :style="{ transform: 'translateX(' + translateXW + 'px)' }"></div>
|
||||
</div>
|
||||
<slider class="slider" :auto-play="false" :infinite="false" :index="selectIndex" @change="sliderChange">
|
||||
<list class="frame" v-for="(page, index) in orderList" :key="index">
|
||||
<cell v-if="page.length == 0">
|
||||
<div class="onorder">
|
||||
<image class="onorder-image" src="https://ae01.alicdn.com/kf/HTB1FGJ7XED1gK0jSZFG762d3FXam.png"></image>
|
||||
<text class="onorder-text">没有相关订单</text>
|
||||
</div>
|
||||
</cell>
|
||||
<cell v-for="(row, rowIndex) in page" :key="rowIndex" v-if="page.length > 0">
|
||||
<div class="row">
|
||||
<text class="type">{{ typeText[row.type] }}</text>
|
||||
<div class="order-info">
|
||||
<div class="order-info-left"><image class="left-image" :src="row.img"></image></div>
|
||||
<div class="order-info-right">
|
||||
<text class="order-info-right-name">{{ row.name }}</text>
|
||||
<text class="order-info-right-spec">{{ row.spec }}</text>
|
||||
<div class="order-info-right-price-number">
|
||||
<text class="order-info-right-unit">￥</text>
|
||||
<text class="order-info-right-price">{{ row.price }}</text>
|
||||
<text class="order-info-right-multiplier">x</text>
|
||||
<text class="order-info-right-number">{{ row.numner }}</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<text class="detail-number">共{{ row.numner }}件商品</text>
|
||||
<div class="detail-sum">
|
||||
<text class="detail-sum-text">合计￥</text>
|
||||
<text class="detail-sum-payment">{{ row.payment }}</text>
|
||||
<text class="detail-sum-nominal">(含运费 ￥{{ row.freight }})</text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="btns-div" v-if="row.type == 'unpaid'">
|
||||
<text class="btns-btn default" @click="cancelOrder(row)">取消订单</text>
|
||||
<text class="btns-btn pay" @click="toPayment(row)">付款</text>
|
||||
</div>
|
||||
<div class="btns-div" v-if="row.type == 'back'"><text class="btns-btn default" @click="remindDeliver(row)">提醒发货</text></div>
|
||||
<div class="btns-div" v-if="row.type == 'unreceived'">
|
||||
<text class="btns-btn default" @click="showLogistics(row)">查看物流</text>
|
||||
<text class="btns-btn pay">确认收货</text>
|
||||
<text class="btns-btn pay">我要退货</text>
|
||||
</div>
|
||||
<div class="btns-div" v-if="row.type == 'received'">
|
||||
<text class="btns-btn default">评价</text>
|
||||
<text class="btns-btn default">再次购买</text>
|
||||
</div>
|
||||
<div class="btns-div" v-if="row.type == 'completed'"><text class="btns-btn default">再次购买</text></div>
|
||||
<div class="btns-div" v-if="row.type == 'refunds'"><text class="btns-btn default">查看进度</text></div>
|
||||
<div class="btns-div" v-if="row.type == 'cancelled'"><text class="btns-btn default">已取消</text></div>
|
||||
</div>
|
||||
</div>
|
||||
</cell>
|
||||
</list>
|
||||
</slider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectIndex: 0,
|
||||
translateX: [0, 125, 250, 375, 500, 625, 750],
|
||||
translateXW: 0,
|
||||
orderType: ['全部', '待付款', '待发货', '待收货', '待评价', '退换货'],
|
||||
typeText: {
|
||||
unpaid: '等待付款',
|
||||
back: '等待商家发货',
|
||||
unreceived: '商家已发货',
|
||||
received: '等待用户评价',
|
||||
completed: '交易已完成',
|
||||
refunds: '商品退货处理中',
|
||||
cancelled: '订单已取消'
|
||||
},
|
||||
orderList: [
|
||||
[
|
||||
{
|
||||
type: 'unpaid',
|
||||
ordersn: 0,
|
||||
goods_id: 0,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB16wepeW5s3KVjSZFNq6AD3FXaJ.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168.00',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
},
|
||||
{
|
||||
type: 'unpaid',
|
||||
ordersn: 1,
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1duHtcfBj_uVjSZFpq6A0SXXaJ.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168.00',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
},
|
||||
{
|
||||
type: 'back',
|
||||
ordersn: 2,
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB173epeW5s3KVjSZFNq6AD3FXai.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168.00',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
},
|
||||
{
|
||||
type: 'unreceived',
|
||||
ordersn: 3,
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB173epeW5s3KVjSZFNq6AD3FXai.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168.00',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
},
|
||||
{
|
||||
type: 'received',
|
||||
ordersn: 4,
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1JC1fe.CF3KVjSZJnq6znHFXaG.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168.00',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
},
|
||||
{
|
||||
type: 'completed',
|
||||
ordersn: 5,
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1GSqoeWWs3KVjSZFxq6yWUXXav.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168.00',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
},
|
||||
{
|
||||
type: 'refunds',
|
||||
ordersn: 6,
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1_Mefe3aH3KVjSZFjq6AFWpXaJ.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
},
|
||||
{
|
||||
type: 'cancelled',
|
||||
ordersn: 7,
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1Lu1pe8Cw3KVjSZFuq6AAOpXaI.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
type: 'unpaid',
|
||||
ordersn: 0,
|
||||
goods_id: 0,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1iMife3aH3KVjSZFjq6AFWpXaA.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
},
|
||||
{
|
||||
type: 'unpaid',
|
||||
ordersn: 1,
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1D6Sfe4iH3KVjSZPfq6xBiVXaG.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
}
|
||||
],
|
||||
[
|
||||
//无
|
||||
],
|
||||
[
|
||||
{
|
||||
type: 'unreceived',
|
||||
ordersn: 3,
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB1IjSfe4iH3KVjSZPfq6xBiVXa4.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
type: 'received',
|
||||
ordersn: 4,
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB16wepeW5s3KVjSZFNq6AD3FXaJ.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
type: 'refunds',
|
||||
ordersn: 6,
|
||||
goods_id: 1,
|
||||
img: 'https://ae01.alicdn.com/kf/HTB16wepeW5s3KVjSZFNq6AD3FXaJ.jpg',
|
||||
name: '商品名称商品名称商品名称商品名称商品名称',
|
||||
price: '168',
|
||||
payment: 168.0,
|
||||
freight: 12.0,
|
||||
spec: '规格:S码',
|
||||
numner: 1
|
||||
}
|
||||
]
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.selectIndex = parseInt(uni.getStorageSync('tbIndex'))+1;
|
||||
},
|
||||
methods: {
|
||||
showType(tbIndex) {
|
||||
this.selectIndex = tbIndex;
|
||||
this.translateXW = this.translateX[tbIndex];
|
||||
console.log('this.selectIndex: ' + this.selectIndex);
|
||||
},
|
||||
sliderChange(e) {
|
||||
this.selectIndex = e.index;
|
||||
this.translateXW = this.translateX[e.index];
|
||||
console.log('e.index: ' + JSON.stringify(e.index));
|
||||
},
|
||||
|
||||
remindDeliver(row) {
|
||||
uni.showToast({
|
||||
title: '已提醒商家发货'
|
||||
});
|
||||
},
|
||||
cancelOrder(row) {
|
||||
uni.showModal({
|
||||
title: '取消订单',
|
||||
content: '确定取消此订单？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
this.doCancelOrder(row.ordersn);
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
doCancelOrder(ordersn) {
|
||||
let typeNum = this.orderList.length;
|
||||
for (let i = 0; i < typeNum; i++) {
|
||||
let list = this.orderList[i];
|
||||
let orderNum = list.length;
|
||||
if (orderNum > 0 && list[0].type == 'unpaid') {
|
||||
for (let j = 0; j < orderNum; j++) {
|
||||
if (this.orderList[i][j].ordersn == ordersn) {
|
||||
this.orderList[i][j].type = 'cancelled';
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
toPayment(row) {
|
||||
//本地模拟订单提交UI效果
|
||||
uni.showLoading({
|
||||
title: '正在获取订单...'
|
||||
});
|
||||
let paymentOrder = [];
|
||||
paymentOrder.push(row);
|
||||
setTimeout(() => {
|
||||
uni.setStorage({
|
||||
key: 'paymentOrder',
|
||||
data: paymentOrder,
|
||||
success: () => {
|
||||
uni.hideLoading();
|
||||
uni.navigateTo({
|
||||
url: '../../pay/payment/payment?amount=' + row.payment
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tabs {
|
||||
width: 750px;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: 750px;
|
||||
height: 76px;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
width: 125px;
|
||||
height: 76px;
|
||||
line-height: 76px;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
color: #444;
|
||||
}
|
||||
.tab-text-on {
|
||||
color: #f06c7a;
|
||||
}
|
||||
.border {
|
||||
width: 75px;
|
||||
margin: 0 25px;
|
||||
height: 4px;
|
||||
background-color: #f06c7a;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 750px;
|
||||
top: 80px;
|
||||
bottom: 0;
|
||||
background-color: #f3f3f3;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: 750px;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
.onorder {
|
||||
width: 750px;
|
||||
height: 375px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.onorder-image {
|
||||
width: 150;
|
||||
height: 150;
|
||||
border-radius: 150;
|
||||
}
|
||||
.onorder-text {
|
||||
width: 750;
|
||||
height: 60px;
|
||||
font-size: 28px;
|
||||
color: #444;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.row {
|
||||
width: 710px;
|
||||
height: 400px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
margin-top: 20px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.type {
|
||||
width: 710px;
|
||||
font-size: 26px;
|
||||
color: #ec652f;
|
||||
height: 50px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
width: 710px;
|
||||
height: 188px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.left {
|
||||
flex-shrink: 0;
|
||||
width: 188px;
|
||||
height: 188px;
|
||||
}
|
||||
.left-image {
|
||||
width: 188px;
|
||||
height: 188px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.order-info-right {
|
||||
width: 472px;
|
||||
height: 188px;
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.order-info-right-name {
|
||||
width: 472px;
|
||||
height: 94px;
|
||||
font-size: 28px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.order-info-right-spec {
|
||||
color: #a7a7a7;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.order-info-right-price-number {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 472px;
|
||||
color: #333;
|
||||
justify-content: flex-end;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.order-info-right-unit,
|
||||
.order-info-right-multiplier {
|
||||
font-size: 20px;
|
||||
}
|
||||
.order-info-right-price,
|
||||
.order-info-right-number {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
width: 670px;
|
||||
height: 60px;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
}
|
||||
.detail-number {
|
||||
font-size: 26px;
|
||||
}
|
||||
.detail-sum {
|
||||
padding: 0 8px;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.detail-sum-text {
|
||||
font-size: 26px;
|
||||
}
|
||||
.detail-sum-payment {
|
||||
font-size: 30px;
|
||||
}
|
||||
.detail-sum-nominal {
|
||||
font-size: 26px;
|
||||
}
|
||||
.btns {
|
||||
width: 670px;
|
||||
height: 80px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.btns-div {
|
||||
width: 670px;
|
||||
height: 50px;
|
||||
justify-content: flex-end;
|
||||
flex-direction: row;
|
||||
}
|
||||
.btns-btn {
|
||||
min-width: 120px;
|
||||
height: 50px;
|
||||
padding: 0 20px;
|
||||
border-radius: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
margin-left: 20px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.default {
|
||||
border-color: #ccc;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.pay {
|
||||
border-color: #ec652f;
|
||||
color: #ec652f;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,359 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 顶部导航 -->
|
||||
<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
|
||||
<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
|
||||
<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
|
||||
<view class="order-list">
|
||||
<view class="list">
|
||||
<view class="onorder" v-if="list.length==0">
|
||||
<image src="../../../static/img/noorder.png"></image>
|
||||
<view class="text">
|
||||
没有相关订单
|
||||
</view>
|
||||
</view>
|
||||
<view class="row" v-for="(row,index) in list" :key="index">
|
||||
<view class="type">{{typeText[row.type]}}</view>
|
||||
<view class="order-info">
|
||||
<view class="left">
|
||||
<image :src="row.img"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="name">
|
||||
{{row.name}}
|
||||
</view>
|
||||
<view class="spec">{{row.spec}}</view>
|
||||
<view class="price-number">
|
||||
￥<view class="price">{{row.price}}</view>
|
||||
x<view class="number">{{row.numner}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="detail">
|
||||
<view class="number">共{{row.numner}}件商品</view><view class="sum">合计￥<view class="price">{{row.payment}}</view></view><view class="nominal">(含运费 ￥{{row.freight}})</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<block v-if="row.type=='unpaid'"><view class="default" @tap="cancelOrder(row)">取消订单</view><view class="pay" @tap="toPayment(row)">付款</view></block>
|
||||
<block v-if="row.type=='back'"><view class="default" @tap="remindDeliver(row)">提醒发货</view></block>
|
||||
<block v-if="row.type=='unreceived'"><view class="default" @tap="showLogistics(row)">查看物流</view><view class="pay">确认收货</view><view class="pay">我要退货</view></block>
|
||||
<block v-if="row.type=='received'"><view class="default">评价</view><view class="default">再次购买</view></block>
|
||||
<block v-if="row.type=='completed'"><view class="default">再次购买</view></block>
|
||||
<block v-if="row.type=='refunds'"><view class="default">查看进度</view></block>
|
||||
<block v-if="row.type=='cancelled'"><view class="default">已取消</view></block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
headerPosition:"fixed",
|
||||
headerTop:"0px",
|
||||
typeText:{
|
||||
unpaid:'等待付款',
|
||||
back:'等待商家发货',
|
||||
unreceived:'商家已发货',
|
||||
received:'等待用户评价',
|
||||
completed:'交易已完成',
|
||||
refunds:'商品退货处理中',
|
||||
cancelled:'订单已取消'
|
||||
},
|
||||
orderType: ['全部','待付款','待发货','待收货','待评价','退换货'],
|
||||
//订单列表 演示数据
|
||||
orderList:[
|
||||
[
|
||||
{ type:"unpaid",ordersn:0,goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
|
||||
{ type:"unpaid",ordersn:1,goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
|
||||
{ type:"back",ordersn:2,goods_id: 1, img: '/static/img/goods/p3.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
|
||||
{ type:"unreceived",ordersn:3,goods_id: 1, img: '/static/img/goods/p4.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
|
||||
{ type:"received",ordersn:4,goods_id: 1, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
|
||||
{ type:"completed",ordersn:5,goods_id: 1, img: '/static/img/goods/p6.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '168.00',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
|
||||
{ type:"refunds",ordersn:6,goods_id: 1, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
|
||||
{ type:"cancelled",ordersn:7,goods_id: 1, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 }
|
||||
],
|
||||
[
|
||||
{ type:"unpaid",ordersn:0,goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 },
|
||||
{ type:"unpaid",ordersn:1,goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 }
|
||||
],
|
||||
[
|
||||
//无
|
||||
],
|
||||
[
|
||||
{ type:"unreceived",ordersn:3,goods_id: 1, img: '/static/img/goods/p4.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 }
|
||||
],
|
||||
[
|
||||
{ type:"received",ordersn:4,goods_id: 1, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 }
|
||||
],
|
||||
[
|
||||
{ type:"refunds",ordersn:6,goods_id: 1, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168',payment:168.00,freight:12.00,spec:'规格:S码',numner:1 }
|
||||
]
|
||||
|
||||
],
|
||||
list:[],
|
||||
tabbarIndex:0
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
//option为object类型，会序列化上个页面传递的参数
|
||||
console.log("option: " + JSON.stringify(option));
|
||||
let tbIndex = parseInt(option.tbIndex)+1;
|
||||
this.list = this.orderList[tbIndex];
|
||||
this.tabbarIndex = tbIndex;
|
||||
//兼容H5下排序栏位置
|
||||
// #ifdef H5
|
||||
let Timer = setInterval(()=>{
|
||||
let uniHead = document.getElementsByTagName('uni-page-head');
|
||||
if(uniHead.length>0){
|
||||
this.headerTop = uniHead[0].offsetHeight+'px';
|
||||
clearInterval(Timer);//清除定时器
|
||||
}
|
||||
},1);
|
||||
// #endif
|
||||
},
|
||||
onPageScroll(e){
|
||||
return;
|
||||
//兼容iOS端下拉时顶部漂移
|
||||
this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
|
||||
},
|
||||
methods: {
|
||||
showType(tbIndex){
|
||||
this.tabbarIndex = tbIndex;
|
||||
this.list = this.orderList[tbIndex];
|
||||
},
|
||||
showLogistics(row){
|
||||
|
||||
},
|
||||
remindDeliver(row){
|
||||
uni.showToast({
|
||||
title:'已提醒商家发货'
|
||||
})
|
||||
},
|
||||
cancelOrder(row){
|
||||
uni.showModal({
|
||||
title: '取消订单',
|
||||
content: '确定取消此订单？',
|
||||
success: (res)=>{
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
this.doCancelOrder(row.ordersn);
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
doCancelOrder(ordersn){
|
||||
let typeNum = this.orderList.length;
|
||||
for(let i=0;i<typeNum;i++){
|
||||
let list = this.orderList[i];
|
||||
let orderNum = list.length;
|
||||
if(orderNum>0 && list[0].type=='unpaid'){
|
||||
for(let j=0;j<orderNum;j++){
|
||||
if(this.orderList[i][j].ordersn == ordersn){
|
||||
this.orderList[i][j].type = 'cancelled';
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
toPayment(row){
|
||||
//本地模拟订单提交UI效果
|
||||
uni.showLoading({
|
||||
title:'正在获取订单...'
|
||||
})
|
||||
let paymentOrder = [];
|
||||
paymentOrder.push(row);
|
||||
setTimeout(()=>{
|
||||
uni.setStorage({
|
||||
key:'paymentOrder',
|
||||
data:paymentOrder,
|
||||
success: () => {
|
||||
uni.hideLoading();
|
||||
uni.navigateTo({
|
||||
url:'../../pay/payment/payment?amount='+row.payment
|
||||
})
|
||||
}
|
||||
})
|
||||
},500)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
.topTabBar{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #f8f8f8;
|
||||
height: 80upx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.grid{
|
||||
width: 20%;
|
||||
height: 80upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #444;
|
||||
font-size: 28upx;
|
||||
.text{
|
||||
height: 76upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.on{
|
||||
color: #f06c7a;
|
||||
border-bottom: solid 4upx #f06c7a;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.order-list{
|
||||
margin-top: 80upx;
|
||||
padding-top: 20upx;
|
||||
width: 100%;
|
||||
.list{
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
.onorder{
|
||||
width: 100%;
|
||||
height: 50vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
image{
|
||||
width: 20vw;
|
||||
height: 20vw;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.text{
|
||||
width: 100%;
|
||||
height: 60upx;
|
||||
font-size: 28upx;
|
||||
color: #444;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.row{
|
||||
width: calc(100% - 40upx);
|
||||
padding: 10upx 20upx;
|
||||
border-radius: 10upx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20upx;
|
||||
.type{
|
||||
font-size: 26upx;
|
||||
color: #ec652f;
|
||||
height: 50upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.order-info{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.left{
|
||||
flex-shrink: 0;
|
||||
width: 25vw;
|
||||
height: 25vw;
|
||||
image{
|
||||
width: 25vw;
|
||||
height: 25vw;
|
||||
border-radius: 10upx;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 100%;
|
||||
margin-left: 10upx;
|
||||
position: relative;
|
||||
.name{
|
||||
width: 100%;
|
||||
font-size: 28upx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.spec{
|
||||
color: #a7a7a7;
|
||||
font-size: 22upx;
|
||||
|
||||
}
|
||||
.price-number{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 22upx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.price{
|
||||
font-size: 24upx;
|
||||
margin-right: 5upx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
height: 60upx;
|
||||
font-size: 26upx;
|
||||
.sum{
|
||||
padding: 0 8upx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.price{
|
||||
font-size: 30upx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.btns{
|
||||
height: 80upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
view{
|
||||
min-width: 120upx;
|
||||
height: 50upx;
|
||||
padding: 0 20upx;
|
||||
border-radius: 50upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28upx;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
.default{
|
||||
border: solid 1upx #ccc;
|
||||
color: #666;
|
||||
}
|
||||
.pay{
|
||||
border: solid 1upx #ec652f;
|
||||
color: #ec652f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="content">
|
||||
<view class="list">
|
||||
<view class="row">
|
||||
<view class="title">头像</view>
|
||||
<view class="right"><view class="tis">
|
||||
<image src="/static/img/face.jpg" mode="widthFix"></image>
|
||||
</view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="title">昵称</view>
|
||||
<view class="right"><view class="tis">大黑哥</view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="title">个性签名</view>
|
||||
<view class="right"><view class="tis">这人太懒了，什么都不写</view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="title">收货地址</view>
|
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="title">账户安全</view>
|
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="row">
|
||||
<view class="title">通知提醒</view>
|
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="title">支付设置</view>
|
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="title">通用</view>
|
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="row">
|
||||
<view class="title">版本升级</view>
|
||||
<view class="right"><view class="tis">v1.0.0</view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="title">清除缓存</view>
|
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="title">问题反馈</view>
|
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="title">关于商城</view>
|
||||
<view class="right"><view class="tis"></view><view class="icon xiangyou"></view></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showType(tbIndex){
|
||||
this.tabbarIndex = tbIndex;
|
||||
this.list = this.orderList[tbIndex];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 30upx;
|
||||
|
||||
}
|
||||
.content{
|
||||
padding-bottom: 20upx;
|
||||
.list{
|
||||
width: 96%;
|
||||
padding-left: 4%;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20upx;
|
||||
.row{
|
||||
widows: 100%;
|
||||
min-height: 90upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: solid 1upx #eee;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
.title{
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
.tis{
|
||||
font-size: 26upx;
|
||||
margin-right: 5upx;
|
||||
max-height: 120upx;
|
||||
image{
|
||||
width: 100upx;
|
||||
height: 100upx;
|
||||
border-radius: 100%;
|
||||
margin: 10upx 0;
|
||||
}
|
||||
}
|
||||
.icon{
|
||||
width: 40upx;
|
||||
color: #cecece;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
page {
|
||||
background: linear-gradient(to bottom, #f06c7a 0%, #f06c7a 100%);
|
||||
height: 100%;
|
||||
}
|
||||
.icon {
|
||||
color:#ffffff;
|
||||
}
|
||||
.logo {
|
||||
width: 100%;
|
||||
height: 45vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.img {
|
||||
width: 25%;
|
||||
height: 25vw;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form {
|
||||
width: 86%;
|
||||
padding: 0 7%;
|
||||
font-size: 30upx;
|
||||
.username,
|
||||
.password,
|
||||
.code {
|
||||
width: calc(100% - 90upx);
|
||||
height: 90upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 45upx;
|
||||
background-color: rgba($color: #ffffff, $alpha: 0.1);
|
||||
padding: 0 45upx;
|
||||
margin-bottom: 26upx;
|
||||
input {
|
||||
width: 100%;
|
||||
height: 50upx;
|
||||
color: rgba($color: #ffffff, $alpha: 0.8);
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: #f06c7a;
|
||||
width: 100%;
|
||||
height: 90upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 45upx;
|
||||
background-color: #fff;
|
||||
font-size: 40upx;
|
||||
}
|
||||
}
|
||||
.re {
|
||||
.username{
|
||||
position: relative;
|
||||
.get-code{
|
||||
position: absolute;
|
||||
height: 90upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 0;
|
||||
padding: 0 40upx;
|
||||
z-index: 3;
|
||||
&:after {
|
||||
content: " ";
|
||||
width: 1upx;
|
||||
height: 50upx;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
margin-right: 100%;
|
||||
left: 0;
|
||||
top: 20upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.res {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100upx;
|
||||
color: rgba($color: #ffffff, $alpha: 0.8);
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 826 B |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue