合同小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

289 lines
5.9 KiB

  1. <template>
  2. <view class="container">
  3. <!-- 顶部标题 -->
  4. <view class="header">
  5. <view class="header_info">
  6. <uni-icons class="header_info_icon" type="left" size="30" color="#c2d4de" :size="1" @click="toBack"></uni-icons>
  7. <text class="header_text">录入订单</text>
  8. </view>
  9. </view>
  10. <view class="content_container">
  11. <view class="isshow-header">
  12. <uni-icons class=" isshow-header-content-icon" type="search" :size="20"></uni-icons>
  13. <uni-easyinput :inputBorder="false" class=" isshow-header-content-input" v-model="ServiceName" placeholder="请输入服务名称" :focus="firstFocus" />
  14. <text class="isshow-header-content-text" @click="searchName">搜索</text>
  15. </view>
  16. </view>
  17. <!-- 二级分类 -->
  18. <view class="content_footer">
  19. <!-- 分类 -->
  20. <scroll-view show-scrollbar="false" class="content_footer_left">
  21. <view v-for="(item,index) in product" :class="['content_footer_left_product', FirstIndex === item.id?'click_color':'']" @click="FirstLevelChange(item.id)">{{item.name}}</view>
  22. </scroll-view>
  23. <scroll-view show-scrollbar="false" class="content_footer_right">
  24. <view v-for="(item,index) in product_2" class="content_footer_right_content">
  25. <text class="text" :class="['content_footer_right_content_text', item.name === name?'select_color':'']">{{item.name}}</text>
  26. <radio class="content_footer_right_content_radio" value="item.id" :checked="item.name == name" activeBackgroundColor="#04517b" @click="selctRadio(item.name)"></radio>
  27. </view>
  28. </scroll-view>
  29. </view>
  30. <!-- 下一步 -->
  31. <view class="buttun" @click="toNext">下一步</view>
  32. </view>
  33. </template>
  34. <script>
  35. export default {
  36. data() {
  37. return {
  38. firstFocus:true,
  39. ServiceName:'',
  40. product:[
  41. {
  42. id: 1,
  43. name: '数码',
  44. children: [
  45. {
  46. id: 12,
  47. name: '耳机',
  48. children: [
  49. { id: 121, name: '漫步者' },
  50. { id: 122, name: '倍思' }
  51. ]
  52. },
  53. {
  54. id: 13,
  55. name: '电脑',
  56. children: [
  57. { id: 131, name: '联想' },
  58. { id: 132, name: '小米' },
  59. { id: 133, name: '戴尔' }
  60. ]
  61. }
  62. ]
  63. },
  64. {
  65. id: 2,
  66. name: '家用电器',
  67. // 类似数码的子结构
  68. children:[
  69. {
  70. id: 11,
  71. name: '手机',
  72. children: [
  73. { id: 111, name: 'iphone' },
  74. { id: 112, name: 'vivo' },
  75. { id: 113, name: 'oppo' }
  76. ]
  77. }
  78. ]
  79. }
  80. ],
  81. product_2:[],
  82. FirstIndex:0,
  83. name:''
  84. }
  85. },
  86. onLoad() {
  87. uni.request(
  88. {
  89. url: 'https://gpt.aiym.run/contract/miniapp/product/categories' ,
  90. method:'GET',
  91. header:{
  92. "Content-Type": "application/json",
  93. "X-Access-Token":'11'
  94. },
  95. success:(res)=>{
  96. console.log(res.data.result)
  97. }
  98. }
  99. );
  100. },
  101. methods: {
  102. toBack(){
  103. uni.navigateBack({
  104. delta: 1
  105. });
  106. },
  107. toNext(){
  108. console.log(111);
  109. uni.navigateTo(
  110. { url: '/pages/views/payment' }
  111. )
  112. },
  113. nameClick (){
  114. },
  115. FirstLevelChange(id){
  116. this.FirstIndex = id;
  117. this.product_2 = this.product[id-1].children;
  118. },
  119. selctRadio(name){
  120. console.log(name);
  121. this.name = name;
  122. }
  123. },
  124. searchName(){
  125. console.log('1');
  126. }
  127. }
  128. </script>
  129. <style>
  130. .container {
  131. display: flex;
  132. flex-direction: column;
  133. height: 100vh;
  134. background-color: #f5f5f5;
  135. position: relative;
  136. }
  137. /* 头部 */
  138. .header {
  139. width: 100%;
  140. height: 15%;
  141. background-color: #044f7a;
  142. color: #fff;
  143. display: flex;
  144. flex-direction: row;
  145. align-items: center;
  146. }
  147. .header_info{
  148. width: 100%;
  149. display: flex;
  150. flex-direction: row;
  151. align-items: center;
  152. color: #e0e9ef;
  153. justify-content: center;
  154. align-items: center;
  155. flex: 15;
  156. }
  157. .header_info_icon{
  158. margin-right: auto;
  159. flex: 1;
  160. }
  161. .header_text{
  162. flex: 14;
  163. display: flex;
  164. /* justify-content: center; */
  165. left:35%;
  166. align-items: center;
  167. }
  168. /* 搜索框 */
  169. .content_container{
  170. width: 100%;
  171. height: 10%;
  172. display: flex;
  173. flex-direction: row;
  174. justify-content: center;
  175. align-items: center
  176. }
  177. .content_footer{
  178. width: 100%;
  179. height: 75%;
  180. display: flex;
  181. flex-direction: row;
  182. }
  183. /* 搜索框 */
  184. /* 遮罩层 */
  185. .isshow-header{
  186. width: 90%;
  187. height: 100%;
  188. display: flex;
  189. justify-content: center;
  190. align-items: center;
  191. flex-direction: row;
  192. color: #3c7697;
  193. }
  194. .isshow-header-content-icon{
  195. width: 10%;
  196. height: 30%;
  197. }
  198. .isshow-header-content-input{
  199. width: 80%;
  200. height: 40%;
  201. margin: 0 20rem 0 20rem;
  202. border:none;
  203. outline:none;
  204. }
  205. .isshow-content{
  206. height: 70%;
  207. display: flex;
  208. flex-direction: column;
  209. align-items: center;
  210. overflow-y:scroll;
  211. }
  212. .isshow-content-text{
  213. color: #414141;
  214. height: 30rem;
  215. width: 100%;
  216. line-height: 30rem;
  217. margin: 20rem 0 20rem 0;
  218. font-size: 30rem;
  219. }
  220. .isshow-content::-webkit-scrollbar {
  221. display: none;
  222. }
  223. /* 二级分类 */
  224. .content_footer_left{
  225. width: 20%;
  226. }
  227. .content_footer_left_product{
  228. width: 100%;
  229. height: 10%;
  230. display: flex;
  231. justify-content: center;
  232. align-items: center;
  233. font-size: 27rem;
  234. color: #7f7f7f;
  235. }
  236. .content_footer_right{
  237. width: 80%;
  238. display: flex;
  239. flex-direction: column;
  240. align-items: center;
  241. }
  242. .content_footer_right_content{
  243. width: 100%;
  244. height: 10%;
  245. display: flex;
  246. flex-direction: row;
  247. /* background-color: red; */
  248. align-items: center;
  249. }
  250. .content_footer_right_content_text{
  251. margin-right: auto;
  252. color:#242424;
  253. margin-left: 5%;
  254. }
  255. .content_footer_right_content_radio{
  256. margin-left: auto;
  257. margin-right: 5%;
  258. }
  259. /* 点击颜色 */
  260. .click_color{
  261. background-color: #044f7a;
  262. color: #f0fcf2;
  263. }
  264. .select_color{
  265. color: #316b8b;
  266. }
  267. /* 按钮 */
  268. .buttun{
  269. width: 30%;
  270. height: 5%;
  271. position: absolute;
  272. display: flex;
  273. justify-content: center;
  274. align-items: center;
  275. font-size: 25rem;
  276. border-radius: 30rem;
  277. background-color: #05507c;
  278. bottom:5%;
  279. right: 5%;
  280. color: #fafcff;
  281. z-index: 99999;
  282. }
  283. </style>